交互设计原型的构建与设计

  继续《交互设计的职能》的内容,那么怎么去组织页面元素,制作原型Demo;哪些表现层面是交互设计师该重点表达的内容,原型的制作又有哪些章法可循呢?

  Ⅰ. 什么是原型?

  原型的概念说的简单直白些就是用户使用产品的界面模型,原型的设计主要包括三部分:①需求内容的呈现 ②导航和链接 ③数据的交换

  ①需求内容的呈现

  1)文本,多媒体内容的呈现

  最基础的web页面就是文字和多媒体的载体,通过文字和媒体把需求内容呈现给访问者是Web设计最最基础的部分,设计师需要将信息分主次的传达给访问者,这是设计最基本的目的,之前我写过类似的文章《视觉设计是为了表达信息》。其实不管是交互还是视觉,都应该具备排版组织能力,分得清主次,明白目标,懂得用户群,才能谈的上设计。

  了解栅格,有排版功底的交互设计师可以省去很多沟通成本:

  和传统的视觉排版不同的是,交互设计需要在有限的空间内组织信息,举几个最常用的手法:

  在设计布局的过程中,交互还必须要清楚前端实现的方法,基本的html,css和一些常用脚本效果都要有所了解。

  2)行为召唤

  除了基本的排版布局,交互在需求的呈现方面还需要花点心思。读点心理学,了解数据分析,熟悉用户的行为习惯,想好以何种方式呈现内容才能迎合用户。对待用户,设计师要有一颗奴才的心态去猜测主子的玻璃心。

  先介绍一种内容引导的方法,姑且给这样的设计方法称作为“行为召唤”。所谓的“行为召唤”就是呈现界面的时候考虑到用户心理,能够激发起用户的参与度。一些比较生硬的做法比如:文字加粗加大变色,按钮变大,AD广告做成gif图或flash晃来晃去,增加new,hot等图片标签,或者干脆用性感美女做广告。这些做法虽然破坏了画面和体验,但还是要承认这些比较生硬的设计方法确实能够吸引一部分用户的注意力。

  如果将这些方法做一些思考用另一种方式呈现:

  上述都是利用心理学的方法做的“行为召唤”,理解用户,站在用户的角度思考问题是交互设计师必须要学习的方法之一。

  3)示例引导

  如果给用户三个垃圾桶,分类分别是可回收,不可回收,有害垃圾。无论你怎么设计外观,用什么颜色,还是有很多用户不知道该如何分类。但如果垃圾桶内已存在一些垃圾,用户自然会根据上一个人的垃圾来选择分类。这样的引导方法同样可以运用到Web设计中。

  看一些例子:

  ②导航和链接

  除了内容的呈现,网页中还存在着大量的导航和链接,也就是传说中的信息架构。信息架构主要目标就是以最短时间,最方便的形式让用户能够快速找到想要的内容,关于结构导航的概念请阅读上篇文章《交互设计的职能》中的<1.关于结构导航的设计>,这里再粗略的讲一下链接,也就是导航中的关联导航。

  关联导航主要就是解决用户“下一步”应该做什么,这个分两种情况:

  1)产品经理希望用户做什么

  产品经理会迫于一些指标压力将业务模式加到网站中,这些内容可能是和用户自己预想的内容毫无关系。那么这一类的链接都统称为业务式链接。

  这一类的业务链接内容,交互所需要考虑的就是怎么将这些链接融入到页面中,强调又不至于太生硬。常见的方法基本上就是图文混排,动态播放滚动,AD广告插入。

  2)用户到底想做什么

  用户想做什么可能他自己都不是很清楚,如何帮助用户发现感兴趣的内容就需要通过元数据自动创建关联内容。元素据包括:时间,类型,主题,兴趣,搜索或购买记录等。这时候的链接是靠程序生成的,交互设计师要能够看的懂数据,给出合适的链接规则。

  例如最常见的“猜你喜欢”

  如果能够将业务导向和用户的心理模型保持在一个维度,比如google,baidu的个性化广告投放,那么这个产品的体验和转化率自然就会上升,不过要做到这一点,需要数据分析人员,产品人员和交互设计师的共同努力。

  ③数据的交换

  之前所讲的内容都是我们呈现给用户的内容,但产品级的Web的还需要与用户之间有互动,也就是数据的交换。如何让用户参与的更容易,数据交换的更顺利,这就是我们平常所谈到的产品的易用性。那么原型阶段是怎么做到让产品更好用呢?

  1)熟悉并运用Web平台的各种标准组件

  另外附一个jQuery组件的Demo预览网站http://jqueryui.com/demos/

  2)给出合适的即时的操作反馈

  3)容错性原则

  4)程序能够实现的,尽量不用让用户去操作

  类似导入类似产品,选择记录,智能搜索等

  Ⅱ. 如何绘制原型

  绘制原型当然要先选工具,博主用过以下原型工具:

  当然最后还是觉得Axure最好用,工具的使用方法请移步到产品原型设计论坛,本篇就不再赘述了。

  Ⅲ. 原型是过程,不是最终结果

  我觉得这个观点非常重要,所以单独列出来讲了。我曾经很迷恋工具的使用方法,甚至会利用PS切图将原型做到非常逼真的程度,但时间长了会觉得这样的举动非常没有意义,而且会不自觉的抗拒别人的修改建议。原型只是一个概念到实现的过渡,是不同部门对话的交流介质,最终还是会被开发需求文档和前端稿所取代,交互的重点在于沟通和帮助项目成员理解改进需求。

  所以我一直觉得交互设计就是一个有产品思想的需求翻译,比视觉更懂产品,比产品更懂设计,是承担起概念到实现的沟通桥梁。所以,广泛的接受修改建议,有选择的对原型不断的做改进,利用原型引起项目成员的讨论,每次的原型修改都是一次理解上的进步,这样才能发挥交互设计的真正意义。

  最后写点总结:

  原型的制作是一项比较复杂的工程,没有捷径和速成的方法,能力上的差别基本上在于项目经验的积累和对业务的熟悉程度,当然个人的感悟认知能力也很重要。博主也是一名入行不久的交互菜鸟,写这样的文章基本上都是自己对交互设计的个人理解,希望能够起到抛砖引玉的效果。

时间: 2025-01-21 15:45:19

交互设计原型的构建与设计的相关文章

原型的构建与设计(Web版)

继续上一章的内容,那么怎么去组织页面元素,制作原型Demo;哪些表现层面是交互设计师该重点表达的内容,原型的制作又有哪些章法可循呢? Ⅰ. 什么是原型? 原型的概念说的简单直白些就是用户使用产品的界面模型,原型的设计主要包括三部分:①需求内容的呈现 ②导航和链接 ③数据的交换 ①需求内容的呈现 1)文本,多媒体内容的呈现 最基础的web页面就是文字和多媒体的载体,通过文字和媒体把需求内容呈现给访问者是Web设计最最基础的部分,设计师需要将信息分主次的传达给访问者,这是设计最基本的目的,之前我写过

原型的构建与设计

继续上一章的内容,那么怎么去组织页面元素,制作原型Demo:哪些表现层面是交互设计师该重点表达的内容,原型的制作又有哪些章法可循呢? Ⅰ. 什么是原型? 原型的概念说的简单直白些就是用户使用产品的界面模型,原型的设计主要包括三部分:①需求内容的呈现  ②导航和链接   ③数据的交换 ①需求内容的呈现 1)文本,多媒体内容的呈现 最基础的web页面就是文字和多媒体的载体,通过文字和媒体把需求内容呈现给访问者是Web设计最最基础的部分,设计师需要将信息分主次的传达给访问者,这是设计最基本的目的,之前

随时随地设计原型:4款iPad原型绘制应用

产品设计师们经常要与原型打交道,除了平时坐在桌前画纸面原型.在电脑屏幕前使用 Axure 或 Balsamiq Mockups 绘制原型之外,有没有想过怎样在地铁上利用乘车的时间随手记录下自己的零碎想法?又或是在咖啡馆里,与好友们一边讨论.一边设计原型?伴随着平板电脑的快 速普及,各大原型设计软件也都纷纷推出了iPad版,有了它们,就真的可以做到"Design on the go. Anytime, anywhere. ". 1. Sketchy Pad ($4.99) 使用这款应用,

[译] 虚拟现实是如何改变用户体验的:从原型到设备的设计

本文讲的是[译] 虚拟现实是如何改变用户体验的:从原型到设备的设计, 原文地址:How VR Is Changing UX: From Prototyping To Device Design 原文作者:Justinmind 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:Lai 校对者:halloween Larry 虚拟现实是如何改变用户体验的:从原型到设备的设计 虚拟现实(VR)正在不断改变着我们定义用户体验(UX)的方式,但是一条经久不变的原则

以原型设计为基础分析可视化内容设计

在风起云涌的互联网浪潮中,产品迭代的速度越来越快.随着用户需求的激增,也不断带来了对设计师能力要求的提高.初入交互设计领域几年来,明显发现可视化的内容远比文档的更易于被用户(以至我们的客户)所接受,就像用户研究项目中常说的一句话:"用户怎么说的,并不代表他们怎么想."今天以"原型设计"为基点,与大家展开几点做简要的分析. 一.什么是原型设计? 首先,让我们看看在体验设计的过程中的"原型设计". 以下结合个人对UCD理解和项目经验,梳理和简化的传统

腾讯高级交互设计师C7210的十年设计路

  本期访谈人物大家都应该都有所耳闻,知名设计博客Be For Web作者@C7210 ,先后就职于博客大巴.Tom集团和大众点评网,现为腾讯ISUX高级交互设计师,从视觉设计.前端.重构,到交互设计,无一不通.当然,作为一枚猫奴.吉他手.游戏迷,他的生活也保持了独特的设计师气质.经历太长,简介太短,还是让他本人和大家聊聊吧. 本系列将不断更新,欢迎设计师们毛遂自荐,预约采访可发邮件至:chengsdc@163.com,让更多人认识你! 同学们也可以推荐自己喜欢的设计师哟,优设会努力搞定采访,帮

浅谈交互设计的未来之服务设计

  做交互设计也有好几个年头了,最近一直在思考一个问题,我们这些俗称线框仔的交互设计师,如何保持自己的竞争力,我们的未来会是怎样的? 在互联网公司里担任交互设计师,往往只是一个项目里的螺丝钉,工作内容不外乎分析需求.分析用户.画线框图.做原型demo,在web时代如此,在移动互联时代亦是如此,我们往往只是着眼于屏幕上的信息与用户进行交互,从而容易陷入一个怪圈:交互设计师就是捣鼓UI,做屏幕上的人机交互的东西. 我也曾一度陷入这种想法,但跳出来看后,才惊觉交互其实应该有更广泛的范畴,它是关于我们身

GOOGLE新的设计界面四款淘汰的设计原型

Google网站新的设计界面已经面世,这次Google的设计师要将一个数百万人已经熟悉的东西重新设计一番,这自然是一项充满挑战的工作.此外Google还放出了之前四款淘汰的设计原型. Google当然想提供更强大更好的搜索服务,所以他们在测试了长达半年之后,终于全面"变脸"了.这次变化的目的主要是要实现更强的技术.更快的结果,突出简洁性.趣味性和古怪精灵的个性化体验.Google的设计师要将一个数百万人已经熟悉的东西重新设计一番,这自然是一项充满挑战的工作. 增加灵活性的常用方法就是在

纸上原型--纸上草稿设计--简单高效的沟通方式!

纸上原型--纸上草稿设计--简单高效的沟通方式! -----高端.大气.上档次!哈哈