App 下载
注册
登录
|
搜索
正在搜索中...
首页
我的书架
我的主页
我的收藏
我的书评
破茧成蝶:用户体验设计师的成长之路
市面上已经有很多专业的用户体验书籍,但解决用户体验设计师在职场中遇到的众多现实问题的图书并不多见。本书从用户体验设计师的角度出发,系统地介绍了其职业生涯中的学习方法、思维
……
[ 展开全部 ]
方式、工作流程等,覆盖了用户体验设计基础知识、设计师的角色和职业困惑、工作流程、需求分析、设计规划和设计标准、项目跟进和成果检验、设计师职业修养以及需要具备的意识等,力图帮助设计师解决在项目中遇到的一些常见问题,找到自己的职业成长之路。 本书由资深的一线用户体验设计师编写,书中融入了宝贵的职业经验和专业思考,对于交互设计师、视觉设计师、用户研究员等具有一定参考价值和借鉴意义;同时,本书也适用于产品经理、运营、开发等用户体验相关人员以及相关专业的学生阅读思考。
[ 收起 ]
作者:刘津 李月
出版社:人民邮电出版社
定价:69.00
ISBN:4294967295
给个评价
做个书摘
书摘 (21 )
评价 (1 )
第二篇:修炼用户体验设计师的技能
Gone
2018-01-13 19:10:46 摘录
测试过程中的注意事项
1切忌引导性过强
2操作行为永远是重点
3不要忽视现场反应
4考虑使用场景
5感谢被测者,并给予一定报酬
什么是A/B测试呢?
顾名思义就是A方案和B方案的比较。为同一个目标设计2个方案。一部分用户使用A方案,一部分用户使用B方案。通过用户的使用情况,衡量哪个方案更优。
1设定衡量标准
2对同一个用户呈现相同的页面
3保证两个版本同时测试
4单一变量
AB测试的延伸—灰度发布
如果你想对网站进行改版,但又不确定用户会不会喜欢新的版本,也可以采用一种与AB测试很类似的方法—灰度发布。灰度发布是一种能够平滑过渡的发布方式。将旧版作为方案A、新版本作为方案B,让一部分用户继续试用旧版本、一部分用户切换到新版本,然后观察用户反馈和产品数据。如果用户的反应很好,可以逐步扩大范围,直至全部升级。如果部分用户在使用新版本的过程中发现一些问题,可以及时优化。另外,还可以同时对比新版与旧版的产品数据,如P∨、UV、转化率、跳出率等,直观地看出改版的成果或差距。
定性的用户反馈和定量的产品数据
可用性测试和AB测试一般是在上线前和预上线时对设计进行的检验。用户反馈和产品数据则是上线后,用户在真实环境下使用产品的情况,是更加实实在在的检验。用户反馈的所有问题和产品收集到的所有数据,都能真实地反映出整个方案的优劣。
1收集用户反馈
2分析用户反馈
我们可以从内容、功能、使用流程、设计、新功能建议和现有Bug等几个方面对问题进行归纳。
3用数据检验产品目标
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-13 18:14:41 摘录
08项目跟进—保障设计效果的实现
设计评审的目的
检验目标、发现问题、达成共识
评审前的充足准备
事先考虑所有可能的方案、准备各种设计依据、做好会议邀请工作
如何在评审中掌握主导权
主导流程、提高效率,控制话题、区别和收集有价值的反馈意见、评审后的分析与跟进
如何审核视觉稿
交互与视觉的联系可以说是非常紧密的,交互设计师完成交互稿之后,要向视觉设计师清楚地交代这个方案要重点表现出什么,传达出什么:视觉设计师在做完视觉稿之后,也会请交互设计师审核视觉方案。
我们需要知道:界面中的视觉设计不是艺术作品,正确地理解信息和传递信息是最重要的事、忽略内容而关注形式是不可取的。所以交互设计师要注意视觉稿是不是和交互稿传达的信息一致,是否传达到位、重点突出且层次分明。
1对交互稿理解是否正确
交互设计师需要注意改变是否合理,有没有违背交互逻辑,会不会引起用户的歧义。
2拒绝毫无发挥的视觉设计
3关注视觉层次是否足够清晰
4关注交互细节和状态标注
5在审美方面不要过分干涉
开发阶段,设计师该做些什么
1勤于沟通
2统一的规范和标准
3设计走查
09成果检验—设计优劣可以判断
可用性测试到底是什么?简单地说,就是通过观察用户使用产品,发现产品中存在的问题的一种方法。
设计测试任务该注意些什么
1给出使用目标,而不是直接地操作
用户在实际使用产品时,考虑的是使用目标,而不是具体的操作和功能。
2尽量选择最重要、最频繁的任务进行测试
3符合正常的操作流程
测试用户的选择
1选择有代表性的用户
2用户数量的选择
有调查表明,5名左右的用户可以发现大约85%的问题。所以一般小的功能点,测试3-5名用户即可。新产品,较大的改版和重要功能,可以测试5-10名用户。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-13 16:44:19 摘录
设计规范的分类
从不同的维度考虑,设计规范有不同的分类。
从纵向考虑,设计规范可分为交互规范和视觉规范。交互规范一般要先于视觉规范。
从横向考虑,设计规范可分为产品战略级方向的大规范及单个项目中的设计小规范。
1产品战略级方向的规范
这里面又包含两部分内容:一是整个公司或一级部门主打产品的设计方向,如主色调,整套的VI系统吉祥物,门户页面风格布局等等,即品牌规范。
另外就是达成共识的,恒定不变的内容:比如基本控件的设计规范,基本交互的规范,等等
2单个项目中的设计规范
我们就需要根据不同的产品类别设计不同的规范,为每个产品设计详细的规格说明书,比如:流程说明、交互模型、图标规范、界面设计规范,界面实现规范、控件设计规范,等等。
什么时候开始设计规范?
在设计开始之前就制定规范,是很不切实际的做法。你会发现做好的规范在实际操作中是无用且白费精力。
一般在以下这几种情况下,我们可以着手去制定一些规范,从而指导和完善后面的工作。
1大型且重要的产品
2产品结构、页面类型、UI组件相对较单一,可复用的内容较多
3项目人手充足、时间较充裕
4产品线日益丰富,后续设计一致性和可循环的要求被提高
5品牌风格、主题风格已确定完毕,品牌备忘和梳理势在必行
6产品结构壮大,新人不断涌入,沟通和执行效率亟待提升
制定设计规范的原则
制定规范是为了给团队成员做设计指导,所以内容一定要简单易懂、条理清晰。
交互规范一般先于视觉规范,视觉是在交互的基础上做效果
设计规范一般遵循从大到小的原则,即:先制定大的设计方向,再制定项目中单个详细的说明;先制定团队的规范,在制定个人操作上的规范。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-13 16:27:57 摘录
写交互说明的诀窍
1尽量使用真实、符合逻辑的数据内容
2不遗漏特殊状态的描述
3避免过长的说明
4避免流水账式的说明
流程图代替文字说明、用表格罗列各种状态、巧妙组织文字说明,如巧妙组织文字说明。用if、else、case"等来组织说明文字也是我喜欢的方式,当然开发人员对此更为喜欢。(case1库存下降且少于用户的购买量,case2:价格变动,Case3: Case1& Case2,else:跳转到订单成功页面)、制作动态效果
5关于重复出现的模块
比如下面这个模块,在购物车、个人中心等多个页面都会出现。为了节省时间,提高效率,我把这个模块独立出来,并起名为“迷你收藏夹"”然后在其他页面上只留个空位就可以了。
6如原型有修改,不要口头沟通,而要更新交互说明并告知大家
什么是设计规范
设计规范包含很多内容,比如交互规范、色彩规范、Logo规范、UI图标规范、控件规范,等等。
没有规范统一出现什么问题
1不同频道/模块独立设计
2同类功能组件存在多种样式
3同类元素多样性
即使是同一个设计师,设计同样的元素,也不可能保证和之前的结果完全一致,过多的样式不仅会增加大家的工作量、隆低工作效率、也会对界面的友好性、易用性、品牌的传达等造成很大影响。
4设计效率低下
5设计质量难以把控
规范解决了什么问题
1“一致性”形成鲜明的产品特征,增强用户粘度
2提高易用性
3满足团队协作需求
4其他
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-13 15:52:34 摘录
你真的会画线框图吗
1通过明暗对比表达
2不使用截图和颜色
3合理的布局
建议在确定页面布局时,提前和视觉设计师沟通商量,避免不必要的返工。
4遵守栅格规范
先简单介绍一下栅格的概念。删格设计系统,是一种平面设计的方法与风格。运用固定的格子设计版面布局,其风格工整简洁,已成为当今出版物设计的主流风格之一。
5标记第一屏高度
我们都知道,最重要的内容,尤其是重要的操作按钮一定要在第一屏内完全显示,否则用户第一眼看不到,就有可能放弃这个页面,从而严重影响转化率。
如果不那么严格的话,第一屏高度也可以定为600像素,在原型稿上标明即可。
6表达清楚UI逻辑
当没计一个内容元素较多、逻辑层级较复杂的页面(如表单)时,为了避免混乱,我们需要提前整理一下这些内容,以保证文字、链接、操作等内容的样式符合它们所代表的重要程度,并把各种复杂的情况归类成有限的几种形式,给用户一个合理的视觉引导。
比如设计收藏夹页面时,里面既有主导航、又有二级导航、既有链接,又有文本:既有需要重点突出的内容,又有需要虽弱化的内容。如果每种情况都出一个样式的话,那就会有无数种样式。但我们知道,一个界面的字号和颜色应尽量不要太多,那具体该怎样处理呢?
一般来说,操作的优先级大于链接,链接的优先级大于文本,最重要的操作一般是用按钮来表现的,如收藏夹中的“加入购物车”按钮,然后是普通操作,比如“对比”等;最后是消极操作,如“删除”。我们可以把普通操作和需要重点突出的链接设计成同样的样式。
7考虑视觉实现后的效果
交互没计师在绘制线框图时,不仅要考虑到清晰的逻辑,还要考虑视觉实现后的效果。不然很可能会导致视觉设计师频繁的返工。
8了解视觉趋势
时刻关注一些视觉趋势,有助于我们在审美上和视觉设计师站在较为一致的立场,使大家的沟通更加顺畅。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-13 15:25:53 摘录
状态:包含默认状态、常见状态、特殊状态等。
状态主要指默显示的文字、数据、选项等。这些内容需要注明,否则开发人员可能难以意识到这是用户填完的效果、还是默认就有的。
常见状态主要指针对某一个模块,经常遇到的一些状态。这些状态都需要在原型上表述出来。比如一个普通的积分模块,一般会出现3种状态:未登录状态、登录后未签到状态、登录后已签到状态。
特殊状态一般指非正常情况下的样式、文案、说明等。
操作:包含常见操作、特殊操作、误操作、手势操作等。
常见操作主要指正常操作时得到的反馈状态。
特殊操作主要指一些般极端情况下的操作。一般,用户不会这么操作,但是一旦遇到极端情况,还是要想好应对措施,因为对于开发人员来说,不管是正常的还是极端的操作情况,他们都要去编写对应的代码。
误操作主要指当用户操作错误时的情况。不过我们在设计时要尽里避免用户犯错的机会。
手势操作主要指用户使用移动产品时的操作方式。常见的有点击、双击、长按,捏,伸、滑动,等等。
反馈:用户操作后得到的反馈动作,包含提示、跳转、动画等。
提示主要指操作后,系统反馈给用户的文字说明等。
跳转主要指点击某个链接后,页面跳转到哪里。设计师需要在原型上注明跳转时是“原页面刷新”还是“新页面打开”。
动画主要指用户操作后,系统通过动画的方式反馈给用户。动画给人的感觉比较友好、趣味性较强,是非常常见的一种反馈形式。
在移动应用中,动画反馈的形式更为常见。因此设计师一定要在原型上表述清楚动画的形式,必要时可以制作一段动画演示效果给开发人员。
总而言之,写交互说明时主要应记住2条内容:除静态页面外,还需考虑各种动态情况;除正常情况外,还需考虑特殊和错误情况。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-13 15:07:04 摘录
简要说明与信息结构
1变更日志:同需求文档一样,原型的设计也不可能一次到位,一般都需要经过沟通,评审后略做调整。尤其是对于比较大型,周期较长的项目,不可能等原型全部设计完毕再进行评审,往往是做一部分评一部分,评审后定期更新。在这种情况下,填写更新日志就显得非常重要了。这样可以方便项目成员看到每次更改的内容,然后重点关注这部分内容就行了,从而大大提升了工作效率。变更日志一般包含日期、变更内容、变更原因、备注等内容。
2版本说明:和更新日志类似,只不过更新日志以天为单位,而版本说明以版本号为单位,适合快速迭代且迭代周期比较固定的项目。比如某产品,每两周固定迭代一次,那么就需要列出版本说明,告诉大家此版本改变了哪些地方,让项目成员一目了然。
版本说明需要包含版本号、日期、更改内容等。
3信息结构:产品内容都有什么,它们是如何组织起来的,页面层级又是如何分布的,等等,这些在信息结构中都有体现信息结构可以让项目成员快速浏览到产品内容,功能、结构等重要信息,做到一览全貌。
任务流程与页面流程
任务流程:是指用户使用产品时,它的每一步操作会遇到什么结果,系统如何反馈,等等。
页面流程:比任务流程图更清晰,具体。通过页面流程图,不仅可以看到具体的页面,还可以看到用户如何通过操作,从一个页面跳转到另一个页面的完整过程。任务流程图是页面流程图的基础和依据。
线框图与交互说明
原型既包含静态的页面样式,也包含动态的操作效果。线框图代表静态的部分,而交互说明则代表动态的部分。
交互说明主要有以下几种类型
限制:包常范围值、极限值等。
范围值主要指数据的取值范。比如,当你的界面上出现了下拉菜单、筛选按钮、滑块等控件时,你必须标注清楚它们的选择范围,否则开发人员就不清楚该如何设定。
限制值主要指数据的显示限制。比如,最多应该显示多少字数,超过时如何显示,是否折行等。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-13 14:42:00 摘录
2惊喜的力量
惊喜通常会令人开心,因为这是超出预期的体验。有些网站在一些小角落中隐藏着一些小惊喜。这些“惊喜”虽然在功能方面没有什么实际的用处,但偶然间发现后,会增添一份特殊的喜悦和乐趣。这些“惊喜”还可以引发用户的好奇心,增强他们的探索欲望。这让我想起了小时候玩超级玛丽时,误打误撞顶到了隐形蘑菇时的惊喜。在之后每次玩的时候,都要再去相同的地方找那个隐形的蘑菇。
3情境的烘托
为产品设计一个故事情节,通过视觉、动画和音效的烘托,把用户带入一个情境中。这种讲故事的方式可以很有趣味性,也可以很感人,能够有效吸引用户的注意力,调动起用户的情感。
情境烘托很适合用在活动页面的设计中。活动页面一般都会有较大的空间来设置一个完整的故事。如果选择人们比较有共性的经历,就很容易勾起用户的回忆。
07设计标准—好的设计需要表达
原型的由来—设计方案的表达
原型是设计方案的表达,是设计师的重要产出物之一,也是项目团队参考评估的重要依据。它是产品功能与内容的示意图,既包含静态的页面样式(线框图),也包含动态的操作效果(交互说明)。
需求文档也包含了对功能和内容的说明,但原型并不是简单的图形化的需求文档,它必须经过设计规划阶段,通过设计加工,形成最终结果。
为什么要学习原型制作?
除了能够更好地表达自己的设计方案,提升设计师的专业水平以外,原型还有一个非常重要的作用:它是项目开发的标准和依据。原型的使用者有产品经理,初觉设计师、前端工程师、开发工程师、测试工程师、可能还有商务,法务人员等。
低保真原型:与最终产品不太相似的原型。它可以是纸面原型(草图),也可以是用软件绘制的线框图。
高保真原型:在外观、操作上与最终产品基本一致。通过软件制作的高保真原型,其实就是告诉大家,在用户做什么操作后会出现什么结果。高保真原型相当于一个高级模型,更适合做展示用,并不等同于真实的产品。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-12 23:37:15 摘录
2积极的反馈
人们在表达之后,总是希望得到积极的反馈。提供积极反馈是与用户互动的一种方式。想象一下,如果在操作之后,网站长时间没有响应,用户就会有种和人们交谈却被忽略的感觉,怀疑自己的操作是否正确。这种感觉令人感到泪丧。当用户操作有误时,系统往往直接给出错误提示。一个红色的叉又常会令人产生挫败感。但当用户成功完成某项操作时,我们是否赞美鼓励过他们呢?人们在社会交往时具有的期望,在使用互联网产品时也会有。积极的反馈可以增强用户的信心,提升用户体验的愉悦感。
3贴心的提醒
在使用产品时,用户难免会有遗忘或是疏忽的时候,此时给予用户一些贴心的提醒,可以提升用户对产品的好感。
登录网站只需要花费十几秒的时间。对于一些登录框设计的细节,也许很多用户都不会察觉到。但如果有一天,你在使用一个不常登录的网站时,发现自己忘记用户名是邮箱还是昵称,甚至根本想不起来自己到底有没有注册过时,你也许会选择重新注册网站,或是干脆放弃登录。这样的经历不仅会让用户感到沮丧,还会降低网站的转化率。
如何调动用户的情感
产品能通过功能满足用户需求,是重要的,容易让人学会并顺利使用,也是重要的,更重要的是,产品要让人感到愉悦并能深深地吸引用户。
1互动的乐趣
人类是社会化的动物,在意情感的双向表达。在使用互联网产品的时候,人们希望可以体会到互动的乐趣,而不是单向地接收信息。无论是灵动的交互动画、操作后的反馈效果、误操作时的提示,还是像对话一样亲切的文案,都是机器和用户互动的结果。应该让用户感觉到,自己的一点一滴都能被系统感知,满足用户的参与感和被尊重感。利用互动因素可以极大提升用户界面的趣味性,调动用户的情感。
丰富的动效可以使界面更加生动、充满活力,也可以提升产品的品质。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-12 23:17:12 摘录
捕获用户的芳心
1拟物化的视觉
最直接的借鉴现实世界的设计方式就是拟物化。通过模拟现实中的物体,使用户产生熟悉感,让信息与功能更加易于识别和理解。随着苹果产品的风靡全球,拟物化成为了很多产品调动用户情感的设计方法。
有些产品会从形态,色彩、肌理材质,环境光照等方面直接拟物,在视觉设计方面,表现的精巧而考究。逼真的视觉效果,打破了用户对虚拟界面冷冰冰的印象,让用户感到自己仿佛是在使用现实生活中的物品。
2隐喻化的操作
直接拟物化的设计也有一定的局限性。并不是每种界面中的元素都可以在现实中找到对应物品的。视觉表现难以拟物时,也可以通过模拟现实中的操作,使用隐喻的方式让用户对操作感到熟悉。《 ios Human| nterface Guidelines)
里面是这样解释隐喻对体验的影响的:当应用中的可视化对象和操作与现实世界中的对象与操作类似时,用户就能快速领会如何使用它。
比如很多手机应用的设置界面,都设计在主界面的背面。当单击“设置”按钮时,主界面采用翻转的动效,与设置界面形成一种空间关系。
贴心的设计惹人爱
1可控的感受
调查表明,如果界面没有任何提示,80%的用户等待超过2秒就会直接关闭窗囗。如果界面有提示或是加载状态,用户的离开率就会极大地降低。加载状态提示可以增加用户对界面的可控感,形成操作预期,使用户安心。
为了增强用户的可控感,界面还需要预先提供提示,向用户透露一些接下来将要发生的事情,让用户建立预期。系统需要根据用户的操作收集信息,掌握规律,正确地预计未来可能出现的问题,并提前采取措施或提醒用户,将可能出现的冈险消除在萌芽状态。如果在写笔记时,操作失误,关闭了浏览器窗囗,而系统却没有提醒我们,就像是在公路上开车,前面有个坑,却没有任何警告,会令我们措手不及。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-12 21:11:04 摘录
理性的规划∨S感性的界面
在细化个个具体的界面时,我们又常常纠结于各种细节中而无法自拔。比如界面内容如何排布?图片应该大一些好还是小一些好?按钮放左边还是右边?对于功能类似的表单,可以在视觉效果上做成完全一样的吗?
出现这种状况,是因为在做设计的过程中,设计师需要用到不同的思维方式。在需求分析、设计任务流程,信息架构、导航、操作逻辑等阶段,设计师需要使用偏理性、逻辑的思维方式。在绘制界面细节时,设计师又需要使用偏感性的思维方式。因为用户使用产品时是相对感性的。他在使用你的产品时不会刻意去思考,而是通过感觉来判断你的产品是否适合他。
1以人为本的界面设计
目标明确的用户在使用产品时会按照流程一步步完成任务,而对于目标不明确的用户,则需要通过更多的展示内容来吸引他。用户被吸引了才有可尝试操作,进而完成任务。
2帮助用户找到想要的东西
信息组织与分类的目的,就是要让信息易于找寻。让有明确目标的用能够快速找到所需信息;有不确定目标的用户,通过浏览和寻找,一点点时确自己的需要,最终找到信息;让没有目标的用户在探索中激发需求。所以,互联网产品中信息的组织与分类,要满足这3种情况。通过合理组织网站所要承载的信息,帮助用户找到他们真正想要的东西。
3吸引无目标用户
对于无目标或目标不明确的用户来说,我们不能再用理性、逻辑的思维方式来对待他们,而是要充分地换位思考,用感性的思维方式来给他们营造贴心、友好,有吸引力的界面。
4符合用户心理模型
在设计过程中,设计师也该充分考虑到用户是如何理解产品的,并在交互设计的表现形式上更贴近用户的心理模型,避免将枯燥的逻辑直接呈现给用户。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-12 20:24:33 摘录
信息量太大,页面怎么摆
1让页面层次不言而喻
根据“用户想看到什么”和“我们想让用户看到什么”为内容模块排列优先级。
逻辑相关的信息在视觉上分为一组,内容或重要程度不同的信息在视觉上体现出差异,逻辑上有包含关系的信息在视觉上进行嵌套。
逻辑相关的在视觉上分为一组:让相关的信息在视觉上分为一组。可以利用“接近原则”,将相关内容组织到一起,以使页面之间的逻辑关系更清晰。
在设计界面时,将元素分好类后,在模块与模块之间、段落与段落之间、广告与内容之间、标题与正文之间划分几个固定的高度。在为整个页面排版的时候,严格按照这几个间距进行排布,从而形成整个模块与模块、内容与内容之间的节奏感。用不同的间距表明界面内容的关系。
内容或重要程度不同的在视觉上体现出差异:对于同类信息可以使用“接近原则”,对于内容或重要程度不同的信息就要使用“差异原则”。因为不同信息,如果表达形式过于类似,会造成误解,需要强化差异对比。
逻辑上有包含关系的在视觉上进行嵌套:逻辑相关的部分,在视觉呈现上也应该是相关的。要让用户一眼就能看出内容之间的关系。
2让重点信息“跳出来”
我们可以通过视觉设计的方法,如字体加大加粗,色彩对比、添加背景色留白等,强调界面的重点元素。而其他非重点的元素应该尽量藏起来,或是显得暗淡些,从而使界面的重点“跳出来”。
3将次要信息“藏起来”
随有产品的发展、功能的增加,很多网络产品正在变得越夹越臃肿,界面上的元素也越来越多,调查表明,80%的用户只会使用20%的功能,所以,设计者不应将那80%只有专家用户才会使用的功能放在显眼的位置。为了不影响新手和中间用户使用,我们应将那些次要的信息“藏起来”,待用户需要时再将它们展示出来。
无论是电商网站、门户网站还是社交网站,大多数都会设计列表页。列表页往往要展示很多信息,用户会通过快速扫描的方式,捕捉关键信息。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-07 22:21:54 摘录
设计让用户购买商品,对于网站来说也是最重要的任务。但要完成购买商品这个任务,期间可能还要完成很多子任务(浏览、选择、对比、收藏、加入购物车、充值、等等),这些任务属于次要任务,它们是为了用户完成最重要的任务而存在的。
如果说产品定位或设计目标相当于指南针,需求中的功能点就是一个一个零散的地理坐标,而任务流程就是途经这些地理坐标的路线图。由于有主线、有分支,这张路线图看起来更像一个迷宫。有了迷宫“地图”,设计师就可以轻松地带领用户完成任务,达成用户目标。
如今,大量Web产品都拥有丰富的界面。用户完成一顶任务时往往要面对很多复杂的信息和操作。如何抓住用户的注意力,引导用户关注于页面的主要任务呢?我们可以通过分解用户任务、排列任务优先级、组织合并相关任务等方式,使用户可以专注于主要任务。
如何引导用户完成任务
△相似性引导
所谓相似性引导就是,如果大小,色彩、形态、视觉元素等因素相似,那么这些相似的因素可以牵引着用户的视觉,引导用户操作。
△方向性引导
用具有指向性的箭,进行方向性引导。
清晰的视觉纵线也可以建立起无形的方向性。
△运动元素引导
虚线的运动轨迹
△向导控件
向导控件( Wizard)是一种常用的交互方式,用来引导用户完成多步操作Wizard在英文中是巫师的意思。向导控件就像神奇的巫师,可以在陌生的页面环境下,为用户指引路线。同时,还可以告诉用户,要完成任务一共需要多少步骤,你现在所处的步骤是哪个,还有多少步可以完成任务等。
如何简化复杂的操作
1减少冗长步骤和干扰项
提供很多选项,看似可以给用户更多选择,让他们可以掌控局面,但如果超过了一定的界限,特别是在很多选择都很类似的情况下,反而会给用户带来负担。
2将复杂操作转移给系统
3简化操作方式
4优化操作过程
提供合适的首选项,适时帮助,及时反馈,提供合理的默认值。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-07 21:32:17 摘录
第四,需求文档不仅有利于项目的持续发展,还能促进产品经理自身能力、专业性的提升。就像交互设计师要产出原型、视觉设计师要产出视觉稿,开发人员要产出代码一样,需求文档就是产品经理的重要产出物。很难想象不会设计原型的交互设计师、不会画视觉稿的视觉设计师,不会写代码的开发人员,能称得上专业。有些产品经理自认为很有才华,不屑于因循守旧、墨守成规,须知再才华横溢、满腹经纶的人,也需要脚踏实地,才能得到团队的认可。
需求文档中关于业务逻辑、产品要求、资源限制等是设计师必须要正确理解的内容。而与设计有关的信息结构、任务流程、功能说明、界面描述等,仅需作为参考即可。
06设计规划—从需求到设计草图
从需求到界面,隔着一扇门,这扇门就是信息的组织与任务的设定。
相较于鼠标的不停点击,眼睛在页面上扫视的成本要低许多。所以比起深层次的导航结构,广度导航更利于用户发现信息。但如果广度超出用户可以接受的范围,人们必须一次阅读很多选项才能在其中进行选择,也会大大增加用户的选择负担。一般来讲,超过7个选项时,用户就很难记住了。
深广度平衡的导航使用户在每个层级上不必面临过多选择,通过每个选顶的名称便可明确自己寻找的方向。
用户目标与商业目标之间肯定存在着矛盾,用户只想看到自己需要的信息,而企业又希望可以把业务和广告推荐给用户。
导航应该是结构清晰,合乎逻辑的,这是产品设计的必要条件。
为重要功能和常用功能设置快捷入口,就像是在原有产品架构的基础上搭建“快捷通道”。用户可以一步步顺着产品的逻辑来寻找所需功能,也可以通过快捷入口,按照自己的行为习惯,快速找到所需功能。
我们在投放广告素材时发现,当文字越多、内容越复杂时,用户点击量就越小,不仅是广告素材,其他形式的产品界面也是如此。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
Gone
2018-01-07 19:06:52 摘录
别被用户牵着走
用户说的不一定是心中所想的
用户没有表达出自己的真实需求:人们所说出来的一般只是表面的想法,不一定能代表他们心中的真实诉求。
该用户不是你的目标用户:提意见的用户并不一定是你的目标用户,他的意见也可能没有太大的参考价值。
用户意见不一定专业:用户不同于设计师,他的很多意见只是一种直观感受,不太可能经过缜密的思考。有的时候用户的要求甚至是不合乎常理的。这就需要设计师经过判断和思考,重新审视用户意见的合理性。
综上所述,我们既需要通过调研、观察、询问、记录意见等方式了解用户想法,同时又要避免不经思考,完全照搬用户的意见来设计产品需求。因为用户的意见并不一定是真正的用户需求,我们需要先去识别(目标用户在合理场景下的真实需求/目标才是用户需求)
如何对待用户的意见
根据目标用户考虑:提出要求的用户是你的目标用户吗?
根据使用场景考虑:用户提出的这个问题一般发生在什么场景?合乎实际的使用情况吗?
用非常复杂的功能。
根据用户目标(真实需求)考虑:用户表达出自己的真实需求了吗?
根据产品定位考虑:用户提出的要求符合产品的定位吗?
根据项目资源考虑:用户提出的这个要求需要多少开发资源?价值有多大?需要立即开发吗?
需求文档
第一可以有效地帮助产品经理理清产品功能、内容、业务逻辑等整体信息。如果跳过这一步,过早地陷入界面细节,很容易得到盲人摸象的结果,给后续环节造成灾难性的后果。
第二,需求文档大大地方便了团队的沟通,让团队成员在项目前期迅速准确、全面地了解你的想法,而仅靠简单的沟通则很难遍历到所有的需求点,且面对多人团队时效率很低。需求文档也规范了项目的具体内容,不会出现越跑越偏的情况,增强了对项目的把控力。
第三,需求文档可以助其他项目成员有针对性地提出问题,而不是感到困惑和无所适从,这样也提升了工作效率。
这条书摘已被收藏
0
次
+1
0
分享
收藏
0
条评价
导购链接
×
做书摘
文字书摘
读图识字
至少还需要输入
10
字
保存原图片为书摘
上传图片
识别
最多输入
500
个字
上传图片
重新上传
写点笔记吧
至少还需要输入
10
字
章节(选填)
第一篇:成为用户体验设计师的信念
第 1章 什么是用户体验设计
1.1 设计≠艺术
1.2 邂逅用户体验设计
1.3 用户体验设计的特征
1.4 用户体验设计的精益之道
第 2章 了解用户体验设计师
2.1 用户体验相关职位有哪些?
2.2 用户体验设计师的价值
第 3章 设计师的职业困惑
3.1 我适合干这行吗
3.2 菜鸟怎样入门
3.3 去大公司、小公司,还是设计公司
3.4 什么样的应聘者更容易成功
3.5 未来的发展方向
第二篇:修炼用户体验设计师的技能
第 4章 设计流程— 设计师具体做什么
4.1 设计师如何参与一个具体的项目
4.2 在项目中设计师容易遇到的问题
第 5章 需求分析— 拿回产品的主导权
5.1 和产品经理一起做需求分析
5.1.1 不可忽视的产品定位
5.1.2 需求从哪来
5.1.3 如何分析与筛选需求
5.1.4 了解需求文档
5.2 倾听用户的声音
5.2.1 拥抱用户
5.2.2 别被用户牵着走
5.2.3 如何对待用户的意见
5.3 设计师的逆袭
5.3.1 如何面对强势的产品经理
5.3.2 拒绝不靠谱的需求文档
5.3.3 从“功能需求”到“设计需求”
5.3.4 如何“抄袭”竞品
第 6章 设计规划— 从需求到设计草图
6.1 从需求到界面,隔着一扇门
6.1.1 如何搞定信息分类
6.1.2 好的导航是成功的一半
6.1.3 主要任务与次要任务
6.1.4 如何突出主要任务
6.1.5 如何引导用户完成任务
6.2 设计友好而易用的界面
6.2.1 如何简化复杂的操作
6.2.2 信息量太大,页面怎么摆
6.2.3 理性的规划 VS 感性的界面
6.3 捕获用户的芳心
6.3.1 来自真实世界的灵感
6.3.2 贴心的设计惹人爱
6.3.3 如何调动用户的情感
6.4 快速表达我的想法— 纸面原型
第 7章 设计标准— 好的设计需要表达
7.1 什么是原型
7.2 标准的原型应该包含什么内容
7.3 你真地会画线框图吗
7.4 写交互说明的诀窍
7.5 关于设计规范
第 8章 项目跟进— 保障设计效果的实现
8.1 做设计评审的主导者
8.2 如何审核视觉稿
8.3 开发阶段,设计师该做些什么
第 9章 成果检验— 设计优劣可以判断
9.1 可用性测试
9.2 A/B 测试
9.3 定性的用户反馈和定量的产品数据
第三篇:实现用户体验设计师的价值
第 10章 设计师的自我修养
10.1 好的设计师 VS 糟糕的设计师
10.2 学会思考,事半功倍
10.3 在否定中积极成长
第 11章 设计师易忽略的工作意识
11.1 设计师的品牌意识
11.2 设计师的沟通意识
11.3 设计师的流程意识
第 12章 设计师为了什么而设计
12.1 为老板?为用户?还是为自己设计
12.2 实现商业价值与用户需求的平衡
12.3 实现用户体验设计师的价值
页码(选填)
这本书已经添加了这些章节,请勾选或者新建你的书摘所属的章节
add
up
down
remove
第一篇:成为用户体验设计师的信念
第 1章 什么是用户体验设计
1.1 设计≠艺术
1.2 邂逅用户体验设计
1.3 用户体验设计的特征
1.4 用户体验设计的精益之道
第 2章 了解用户体验设计师
2.1 用户体验相关职位有哪些?
2.2 用户体验设计师的价值
第 3章 设计师的职业困惑
3.1 我适合干这行吗
3.2 菜鸟怎样入门
3.3 去大公司、小公司,还是设计公司
3.4 什么样的应聘者更容易成功
3.5 未来的发展方向
第二篇:修炼用户体验设计师的技能
第 4章 设计流程— 设计师具体做什么
4.1 设计师如何参与一个具体的项目
4.2 在项目中设计师容易遇到的问题
第 5章 需求分析— 拿回产品的主导权
5.1 和产品经理一起做需求分析
5.1.1 不可忽视的产品定位
5.1.2 需求从哪来
5.1.3 如何分析与筛选需求
5.1.4 了解需求文档
5.2 倾听用户的声音
5.2.1 拥抱用户
5.2.2 别被用户牵着走
5.2.3 如何对待用户的意见
5.3 设计师的逆袭
5.3.1 如何面对强势的产品经理
5.3.2 拒绝不靠谱的需求文档
5.3.3 从“功能需求”到“设计需求”
5.3.4 如何“抄袭”竞品
第 6章 设计规划— 从需求到设计草图
6.1 从需求到界面,隔着一扇门
6.1.1 如何搞定信息分类
6.1.2 好的导航是成功的一半
6.1.3 主要任务与次要任务
6.1.4 如何突出主要任务
6.1.5 如何引导用户完成任务
6.2 设计友好而易用的界面
6.2.1 如何简化复杂的操作
6.2.2 信息量太大,页面怎么摆
6.2.3 理性的规划 VS 感性的界面
6.3 捕获用户的芳心
6.3.1 来自真实世界的灵感
6.3.2 贴心的设计惹人爱
6.3.3 如何调动用户的情感
6.4 快速表达我的想法— 纸面原型
第 7章 设计标准— 好的设计需要表达
7.1 什么是原型
7.2 标准的原型应该包含什么内容
7.3 你真地会画线框图吗
7.4 写交互说明的诀窍
7.5 关于设计规范
第 8章 项目跟进— 保障设计效果的实现
8.1 做设计评审的主导者
8.2 如何审核视觉稿
8.3 开发阶段,设计师该做些什么
第 9章 成果检验— 设计优劣可以判断
9.1 可用性测试
9.2 A/B 测试
9.3 定性的用户反馈和定量的产品数据
第三篇:实现用户体验设计师的价值
第 10章 设计师的自我修养
10.1 好的设计师 VS 糟糕的设计师
10.2 学会思考,事半功倍
10.3 在否定中积极成长
第 11章 设计师易忽略的工作意识
11.1 设计师的品牌意识
11.2 设计师的沟通意识
11.3 设计师的流程意识
第 12章 设计师为了什么而设计
12.1 为老板?为用户?还是为自己设计
12.2 实现商业价值与用户需求的平衡
12.3 实现用户体验设计师的价值
×
添加一个书摘本
搜索创建书摘本
搜索
正在搜索...
不对,换一下
书名
作者
出版社
备注
ISBN
*
*
×
编辑书摘
书摘
最少还需要输入
10
字
写点笔记吧
最少还需要输入
10
字
*
这条书摘是属于哪一章节的?
第一篇:成为用户体验设计师的信念
第 1章 什么是用户体验设计
1.1 设计≠艺术
1.2 邂逅用户体验设计
1.3 用户体验设计的特征
1.4 用户体验设计的精益之道
第 2章 了解用户体验设计师
2.1 用户体验相关职位有哪些?
2.2 用户体验设计师的价值
第 3章 设计师的职业困惑
3.1 我适合干这行吗
3.2 菜鸟怎样入门
3.3 去大公司、小公司,还是设计公司
3.4 什么样的应聘者更容易成功
3.5 未来的发展方向
第二篇:修炼用户体验设计师的技能
第 4章 设计流程— 设计师具体做什么
4.1 设计师如何参与一个具体的项目
4.2 在项目中设计师容易遇到的问题
第 5章 需求分析— 拿回产品的主导权
5.1 和产品经理一起做需求分析
5.1.1 不可忽视的产品定位
5.1.2 需求从哪来
5.1.3 如何分析与筛选需求
5.1.4 了解需求文档
5.2 倾听用户的声音
5.2.1 拥抱用户
5.2.2 别被用户牵着走
5.2.3 如何对待用户的意见
5.3 设计师的逆袭
5.3.1 如何面对强势的产品经理
5.3.2 拒绝不靠谱的需求文档
5.3.3 从“功能需求”到“设计需求”
5.3.4 如何“抄袭”竞品
第 6章 设计规划— 从需求到设计草图
6.1 从需求到界面,隔着一扇门
6.1.1 如何搞定信息分类
6.1.2 好的导航是成功的一半
6.1.3 主要任务与次要任务
6.1.4 如何突出主要任务
6.1.5 如何引导用户完成任务
6.2 设计友好而易用的界面
6.2.1 如何简化复杂的操作
6.2.2 信息量太大,页面怎么摆
6.2.3 理性的规划 VS 感性的界面
6.3 捕获用户的芳心
6.3.1 来自真实世界的灵感
6.3.2 贴心的设计惹人爱
6.3.3 如何调动用户的情感
6.4 快速表达我的想法— 纸面原型
第 7章 设计标准— 好的设计需要表达
7.1 什么是原型
7.2 标准的原型应该包含什么内容
7.3 你真地会画线框图吗
7.4 写交互说明的诀窍
7.5 关于设计规范
第 8章 项目跟进— 保障设计效果的实现
8.1 做设计评审的主导者
8.2 如何审核视觉稿
8.3 开发阶段,设计师该做些什么
第 9章 成果检验— 设计优劣可以判断
9.1 可用性测试
9.2 A/B 测试
9.3 定性的用户反馈和定量的产品数据
第三篇:实现用户体验设计师的价值
第 10章 设计师的自我修养
10.1 好的设计师 VS 糟糕的设计师
10.2 学会思考,事半功倍
10.3 在否定中积极成长
第 11章 设计师易忽略的工作意识
11.1 设计师的品牌意识
11.2 设计师的沟通意识
11.3 设计师的流程意识
第 12章 设计师为了什么而设计
12.1 为老板?为用户?还是为自己设计
12.2 实现商业价值与用户需求的平衡
12.3 实现用户体验设计师的价值
*
页码
×
删除
您确定要删除吗?
1切忌引导性过强
2操作行为永远是重点
3不要忽视现场反应
4考虑使用场景
5感谢被测者,并给予一定报酬
什么是A/B测试呢?
顾名思义就是A方案和B方案的比较。为同一个目标设计2个方案。一部分用户使用A方案,一部分用户使用B方案。通过用户的使用情况,衡量哪个方案更优。
1设定衡量标准
2对同一个用户呈现相同的页面
3保证两个版本同时测试
4单一变量
AB测试的延伸—灰度发布
如果你想对网站进行改版,但又不确定用户会不会喜欢新的版本,也可以采用一种与AB测试很类似的方法—灰度发布。灰度发布是一种能够平滑过渡的发布方式。将旧版作为方案A、新版本作为方案B,让一部分用户继续试用旧版本、一部分用户切换到新版本,然后观察用户反馈和产品数据。如果用户的反应很好,可以逐步扩大范围,直至全部升级。如果部分用户在使用新版本的过程中发现一些问题,可以及时优化。另外,还可以同时对比新版与旧版的产品数据,如P∨、UV、转化率、跳出率等,直观地看出改版的成果或差距。
定性的用户反馈和定量的产品数据
可用性测试和AB测试一般是在上线前和预上线时对设计进行的检验。用户反馈和产品数据则是上线后,用户在真实环境下使用产品的情况,是更加实实在在的检验。用户反馈的所有问题和产品收集到的所有数据,都能真实地反映出整个方案的优劣。
1收集用户反馈
2分析用户反馈
我们可以从内容、功能、使用流程、设计、新功能建议和现有Bug等几个方面对问题进行归纳。
3用数据检验产品目标
设计评审的目的
检验目标、发现问题、达成共识
评审前的充足准备
事先考虑所有可能的方案、准备各种设计依据、做好会议邀请工作
如何在评审中掌握主导权
主导流程、提高效率,控制话题、区别和收集有价值的反馈意见、评审后的分析与跟进
如何审核视觉稿
交互与视觉的联系可以说是非常紧密的,交互设计师完成交互稿之后,要向视觉设计师清楚地交代这个方案要重点表现出什么,传达出什么:视觉设计师在做完视觉稿之后,也会请交互设计师审核视觉方案。
我们需要知道:界面中的视觉设计不是艺术作品,正确地理解信息和传递信息是最重要的事、忽略内容而关注形式是不可取的。所以交互设计师要注意视觉稿是不是和交互稿传达的信息一致,是否传达到位、重点突出且层次分明。
1对交互稿理解是否正确
交互设计师需要注意改变是否合理,有没有违背交互逻辑,会不会引起用户的歧义。
2拒绝毫无发挥的视觉设计
3关注视觉层次是否足够清晰
4关注交互细节和状态标注
5在审美方面不要过分干涉
开发阶段,设计师该做些什么
1勤于沟通
2统一的规范和标准
3设计走查
09成果检验—设计优劣可以判断
可用性测试到底是什么?简单地说,就是通过观察用户使用产品,发现产品中存在的问题的一种方法。
设计测试任务该注意些什么
1给出使用目标,而不是直接地操作
用户在实际使用产品时,考虑的是使用目标,而不是具体的操作和功能。
2尽量选择最重要、最频繁的任务进行测试
3符合正常的操作流程
测试用户的选择
1选择有代表性的用户
2用户数量的选择
有调查表明,5名左右的用户可以发现大约85%的问题。所以一般小的功能点,测试3-5名用户即可。新产品,较大的改版和重要功能,可以测试5-10名用户。
从不同的维度考虑,设计规范有不同的分类。
从纵向考虑,设计规范可分为交互规范和视觉规范。交互规范一般要先于视觉规范。
从横向考虑,设计规范可分为产品战略级方向的大规范及单个项目中的设计小规范。
1产品战略级方向的规范
这里面又包含两部分内容:一是整个公司或一级部门主打产品的设计方向,如主色调,整套的VI系统吉祥物,门户页面风格布局等等,即品牌规范。
另外就是达成共识的,恒定不变的内容:比如基本控件的设计规范,基本交互的规范,等等
2单个项目中的设计规范
我们就需要根据不同的产品类别设计不同的规范,为每个产品设计详细的规格说明书,比如:流程说明、交互模型、图标规范、界面设计规范,界面实现规范、控件设计规范,等等。
什么时候开始设计规范?
在设计开始之前就制定规范,是很不切实际的做法。你会发现做好的规范在实际操作中是无用且白费精力。
一般在以下这几种情况下,我们可以着手去制定一些规范,从而指导和完善后面的工作。
1大型且重要的产品
2产品结构、页面类型、UI组件相对较单一,可复用的内容较多
3项目人手充足、时间较充裕
4产品线日益丰富,后续设计一致性和可循环的要求被提高
5品牌风格、主题风格已确定完毕,品牌备忘和梳理势在必行
6产品结构壮大,新人不断涌入,沟通和执行效率亟待提升
制定设计规范的原则
制定规范是为了给团队成员做设计指导,所以内容一定要简单易懂、条理清晰。
交互规范一般先于视觉规范,视觉是在交互的基础上做效果
设计规范一般遵循从大到小的原则,即:先制定大的设计方向,再制定项目中单个详细的说明;先制定团队的规范,在制定个人操作上的规范。
1尽量使用真实、符合逻辑的数据内容
2不遗漏特殊状态的描述
3避免过长的说明
4避免流水账式的说明
流程图代替文字说明、用表格罗列各种状态、巧妙组织文字说明,如巧妙组织文字说明。用if、else、case"等来组织说明文字也是我喜欢的方式,当然开发人员对此更为喜欢。(case1库存下降且少于用户的购买量,case2:价格变动,Case3: Case1& Case2,else:跳转到订单成功页面)、制作动态效果
5关于重复出现的模块
比如下面这个模块,在购物车、个人中心等多个页面都会出现。为了节省时间,提高效率,我把这个模块独立出来,并起名为“迷你收藏夹"”然后在其他页面上只留个空位就可以了。
6如原型有修改,不要口头沟通,而要更新交互说明并告知大家
什么是设计规范
设计规范包含很多内容,比如交互规范、色彩规范、Logo规范、UI图标规范、控件规范,等等。
没有规范统一出现什么问题
1不同频道/模块独立设计
2同类功能组件存在多种样式
3同类元素多样性
即使是同一个设计师,设计同样的元素,也不可能保证和之前的结果完全一致,过多的样式不仅会增加大家的工作量、隆低工作效率、也会对界面的友好性、易用性、品牌的传达等造成很大影响。
4设计效率低下
5设计质量难以把控
规范解决了什么问题
1“一致性”形成鲜明的产品特征,增强用户粘度
2提高易用性
3满足团队协作需求
4其他
1通过明暗对比表达
2不使用截图和颜色
3合理的布局
建议在确定页面布局时,提前和视觉设计师沟通商量,避免不必要的返工。
4遵守栅格规范
先简单介绍一下栅格的概念。删格设计系统,是一种平面设计的方法与风格。运用固定的格子设计版面布局,其风格工整简洁,已成为当今出版物设计的主流风格之一。
5标记第一屏高度
我们都知道,最重要的内容,尤其是重要的操作按钮一定要在第一屏内完全显示,否则用户第一眼看不到,就有可能放弃这个页面,从而严重影响转化率。
如果不那么严格的话,第一屏高度也可以定为600像素,在原型稿上标明即可。
6表达清楚UI逻辑
当没计一个内容元素较多、逻辑层级较复杂的页面(如表单)时,为了避免混乱,我们需要提前整理一下这些内容,以保证文字、链接、操作等内容的样式符合它们所代表的重要程度,并把各种复杂的情况归类成有限的几种形式,给用户一个合理的视觉引导。
比如设计收藏夹页面时,里面既有主导航、又有二级导航、既有链接,又有文本:既有需要重点突出的内容,又有需要虽弱化的内容。如果每种情况都出一个样式的话,那就会有无数种样式。但我们知道,一个界面的字号和颜色应尽量不要太多,那具体该怎样处理呢?
一般来说,操作的优先级大于链接,链接的优先级大于文本,最重要的操作一般是用按钮来表现的,如收藏夹中的“加入购物车”按钮,然后是普通操作,比如“对比”等;最后是消极操作,如“删除”。我们可以把普通操作和需要重点突出的链接设计成同样的样式。
7考虑视觉实现后的效果
交互没计师在绘制线框图时,不仅要考虑到清晰的逻辑,还要考虑视觉实现后的效果。不然很可能会导致视觉设计师频繁的返工。
8了解视觉趋势
时刻关注一些视觉趋势,有助于我们在审美上和视觉设计师站在较为一致的立场,使大家的沟通更加顺畅。
状态主要指默显示的文字、数据、选项等。这些内容需要注明,否则开发人员可能难以意识到这是用户填完的效果、还是默认就有的。
常见状态主要指针对某一个模块,经常遇到的一些状态。这些状态都需要在原型上表述出来。比如一个普通的积分模块,一般会出现3种状态:未登录状态、登录后未签到状态、登录后已签到状态。
特殊状态一般指非正常情况下的样式、文案、说明等。
操作:包含常见操作、特殊操作、误操作、手势操作等。
常见操作主要指正常操作时得到的反馈状态。
特殊操作主要指一些般极端情况下的操作。一般,用户不会这么操作,但是一旦遇到极端情况,还是要想好应对措施,因为对于开发人员来说,不管是正常的还是极端的操作情况,他们都要去编写对应的代码。
误操作主要指当用户操作错误时的情况。不过我们在设计时要尽里避免用户犯错的机会。
手势操作主要指用户使用移动产品时的操作方式。常见的有点击、双击、长按,捏,伸、滑动,等等。
反馈:用户操作后得到的反馈动作,包含提示、跳转、动画等。
提示主要指操作后,系统反馈给用户的文字说明等。
跳转主要指点击某个链接后,页面跳转到哪里。设计师需要在原型上注明跳转时是“原页面刷新”还是“新页面打开”。
动画主要指用户操作后,系统通过动画的方式反馈给用户。动画给人的感觉比较友好、趣味性较强,是非常常见的一种反馈形式。
在移动应用中,动画反馈的形式更为常见。因此设计师一定要在原型上表述清楚动画的形式,必要时可以制作一段动画演示效果给开发人员。
总而言之,写交互说明时主要应记住2条内容:除静态页面外,还需考虑各种动态情况;除正常情况外,还需考虑特殊和错误情况。
1变更日志:同需求文档一样,原型的设计也不可能一次到位,一般都需要经过沟通,评审后略做调整。尤其是对于比较大型,周期较长的项目,不可能等原型全部设计完毕再进行评审,往往是做一部分评一部分,评审后定期更新。在这种情况下,填写更新日志就显得非常重要了。这样可以方便项目成员看到每次更改的内容,然后重点关注这部分内容就行了,从而大大提升了工作效率。变更日志一般包含日期、变更内容、变更原因、备注等内容。
2版本说明:和更新日志类似,只不过更新日志以天为单位,而版本说明以版本号为单位,适合快速迭代且迭代周期比较固定的项目。比如某产品,每两周固定迭代一次,那么就需要列出版本说明,告诉大家此版本改变了哪些地方,让项目成员一目了然。
版本说明需要包含版本号、日期、更改内容等。
3信息结构:产品内容都有什么,它们是如何组织起来的,页面层级又是如何分布的,等等,这些在信息结构中都有体现信息结构可以让项目成员快速浏览到产品内容,功能、结构等重要信息,做到一览全貌。
任务流程与页面流程
任务流程:是指用户使用产品时,它的每一步操作会遇到什么结果,系统如何反馈,等等。
页面流程:比任务流程图更清晰,具体。通过页面流程图,不仅可以看到具体的页面,还可以看到用户如何通过操作,从一个页面跳转到另一个页面的完整过程。任务流程图是页面流程图的基础和依据。
线框图与交互说明
原型既包含静态的页面样式,也包含动态的操作效果。线框图代表静态的部分,而交互说明则代表动态的部分。
交互说明主要有以下几种类型
限制:包常范围值、极限值等。
范围值主要指数据的取值范。比如,当你的界面上出现了下拉菜单、筛选按钮、滑块等控件时,你必须标注清楚它们的选择范围,否则开发人员就不清楚该如何设定。
限制值主要指数据的显示限制。比如,最多应该显示多少字数,超过时如何显示,是否折行等。
惊喜通常会令人开心,因为这是超出预期的体验。有些网站在一些小角落中隐藏着一些小惊喜。这些“惊喜”虽然在功能方面没有什么实际的用处,但偶然间发现后,会增添一份特殊的喜悦和乐趣。这些“惊喜”还可以引发用户的好奇心,增强他们的探索欲望。这让我想起了小时候玩超级玛丽时,误打误撞顶到了隐形蘑菇时的惊喜。在之后每次玩的时候,都要再去相同的地方找那个隐形的蘑菇。
3情境的烘托
为产品设计一个故事情节,通过视觉、动画和音效的烘托,把用户带入一个情境中。这种讲故事的方式可以很有趣味性,也可以很感人,能够有效吸引用户的注意力,调动起用户的情感。
情境烘托很适合用在活动页面的设计中。活动页面一般都会有较大的空间来设置一个完整的故事。如果选择人们比较有共性的经历,就很容易勾起用户的回忆。
07设计标准—好的设计需要表达
原型的由来—设计方案的表达
原型是设计方案的表达,是设计师的重要产出物之一,也是项目团队参考评估的重要依据。它是产品功能与内容的示意图,既包含静态的页面样式(线框图),也包含动态的操作效果(交互说明)。
需求文档也包含了对功能和内容的说明,但原型并不是简单的图形化的需求文档,它必须经过设计规划阶段,通过设计加工,形成最终结果。
为什么要学习原型制作?
除了能够更好地表达自己的设计方案,提升设计师的专业水平以外,原型还有一个非常重要的作用:它是项目开发的标准和依据。原型的使用者有产品经理,初觉设计师、前端工程师、开发工程师、测试工程师、可能还有商务,法务人员等。
低保真原型:与最终产品不太相似的原型。它可以是纸面原型(草图),也可以是用软件绘制的线框图。
高保真原型:在外观、操作上与最终产品基本一致。通过软件制作的高保真原型,其实就是告诉大家,在用户做什么操作后会出现什么结果。高保真原型相当于一个高级模型,更适合做展示用,并不等同于真实的产品。
人们在表达之后,总是希望得到积极的反馈。提供积极反馈是与用户互动的一种方式。想象一下,如果在操作之后,网站长时间没有响应,用户就会有种和人们交谈却被忽略的感觉,怀疑自己的操作是否正确。这种感觉令人感到泪丧。当用户操作有误时,系统往往直接给出错误提示。一个红色的叉又常会令人产生挫败感。但当用户成功完成某项操作时,我们是否赞美鼓励过他们呢?人们在社会交往时具有的期望,在使用互联网产品时也会有。积极的反馈可以增强用户的信心,提升用户体验的愉悦感。
3贴心的提醒
在使用产品时,用户难免会有遗忘或是疏忽的时候,此时给予用户一些贴心的提醒,可以提升用户对产品的好感。
登录网站只需要花费十几秒的时间。对于一些登录框设计的细节,也许很多用户都不会察觉到。但如果有一天,你在使用一个不常登录的网站时,发现自己忘记用户名是邮箱还是昵称,甚至根本想不起来自己到底有没有注册过时,你也许会选择重新注册网站,或是干脆放弃登录。这样的经历不仅会让用户感到沮丧,还会降低网站的转化率。
如何调动用户的情感
产品能通过功能满足用户需求,是重要的,容易让人学会并顺利使用,也是重要的,更重要的是,产品要让人感到愉悦并能深深地吸引用户。
1互动的乐趣
人类是社会化的动物,在意情感的双向表达。在使用互联网产品的时候,人们希望可以体会到互动的乐趣,而不是单向地接收信息。无论是灵动的交互动画、操作后的反馈效果、误操作时的提示,还是像对话一样亲切的文案,都是机器和用户互动的结果。应该让用户感觉到,自己的一点一滴都能被系统感知,满足用户的参与感和被尊重感。利用互动因素可以极大提升用户界面的趣味性,调动用户的情感。
丰富的动效可以使界面更加生动、充满活力,也可以提升产品的品质。
1拟物化的视觉
最直接的借鉴现实世界的设计方式就是拟物化。通过模拟现实中的物体,使用户产生熟悉感,让信息与功能更加易于识别和理解。随着苹果产品的风靡全球,拟物化成为了很多产品调动用户情感的设计方法。
有些产品会从形态,色彩、肌理材质,环境光照等方面直接拟物,在视觉设计方面,表现的精巧而考究。逼真的视觉效果,打破了用户对虚拟界面冷冰冰的印象,让用户感到自己仿佛是在使用现实生活中的物品。
2隐喻化的操作
直接拟物化的设计也有一定的局限性。并不是每种界面中的元素都可以在现实中找到对应物品的。视觉表现难以拟物时,也可以通过模拟现实中的操作,使用隐喻的方式让用户对操作感到熟悉。《 ios Human| nterface Guidelines)
里面是这样解释隐喻对体验的影响的:当应用中的可视化对象和操作与现实世界中的对象与操作类似时,用户就能快速领会如何使用它。
比如很多手机应用的设置界面,都设计在主界面的背面。当单击“设置”按钮时,主界面采用翻转的动效,与设置界面形成一种空间关系。
贴心的设计惹人爱
1可控的感受
调查表明,如果界面没有任何提示,80%的用户等待超过2秒就会直接关闭窗囗。如果界面有提示或是加载状态,用户的离开率就会极大地降低。加载状态提示可以增加用户对界面的可控感,形成操作预期,使用户安心。
为了增强用户的可控感,界面还需要预先提供提示,向用户透露一些接下来将要发生的事情,让用户建立预期。系统需要根据用户的操作收集信息,掌握规律,正确地预计未来可能出现的问题,并提前采取措施或提醒用户,将可能出现的冈险消除在萌芽状态。如果在写笔记时,操作失误,关闭了浏览器窗囗,而系统却没有提醒我们,就像是在公路上开车,前面有个坑,却没有任何警告,会令我们措手不及。
在细化个个具体的界面时,我们又常常纠结于各种细节中而无法自拔。比如界面内容如何排布?图片应该大一些好还是小一些好?按钮放左边还是右边?对于功能类似的表单,可以在视觉效果上做成完全一样的吗?
出现这种状况,是因为在做设计的过程中,设计师需要用到不同的思维方式。在需求分析、设计任务流程,信息架构、导航、操作逻辑等阶段,设计师需要使用偏理性、逻辑的思维方式。在绘制界面细节时,设计师又需要使用偏感性的思维方式。因为用户使用产品时是相对感性的。他在使用你的产品时不会刻意去思考,而是通过感觉来判断你的产品是否适合他。
1以人为本的界面设计
目标明确的用户在使用产品时会按照流程一步步完成任务,而对于目标不明确的用户,则需要通过更多的展示内容来吸引他。用户被吸引了才有可尝试操作,进而完成任务。
2帮助用户找到想要的东西
信息组织与分类的目的,就是要让信息易于找寻。让有明确目标的用能够快速找到所需信息;有不确定目标的用户,通过浏览和寻找,一点点时确自己的需要,最终找到信息;让没有目标的用户在探索中激发需求。所以,互联网产品中信息的组织与分类,要满足这3种情况。通过合理组织网站所要承载的信息,帮助用户找到他们真正想要的东西。
3吸引无目标用户
对于无目标或目标不明确的用户来说,我们不能再用理性、逻辑的思维方式来对待他们,而是要充分地换位思考,用感性的思维方式来给他们营造贴心、友好,有吸引力的界面。
4符合用户心理模型
在设计过程中,设计师也该充分考虑到用户是如何理解产品的,并在交互设计的表现形式上更贴近用户的心理模型,避免将枯燥的逻辑直接呈现给用户。
1让页面层次不言而喻
根据“用户想看到什么”和“我们想让用户看到什么”为内容模块排列优先级。
逻辑相关的信息在视觉上分为一组,内容或重要程度不同的信息在视觉上体现出差异,逻辑上有包含关系的信息在视觉上进行嵌套。
逻辑相关的在视觉上分为一组:让相关的信息在视觉上分为一组。可以利用“接近原则”,将相关内容组织到一起,以使页面之间的逻辑关系更清晰。
在设计界面时,将元素分好类后,在模块与模块之间、段落与段落之间、广告与内容之间、标题与正文之间划分几个固定的高度。在为整个页面排版的时候,严格按照这几个间距进行排布,从而形成整个模块与模块、内容与内容之间的节奏感。用不同的间距表明界面内容的关系。
内容或重要程度不同的在视觉上体现出差异:对于同类信息可以使用“接近原则”,对于内容或重要程度不同的信息就要使用“差异原则”。因为不同信息,如果表达形式过于类似,会造成误解,需要强化差异对比。
逻辑上有包含关系的在视觉上进行嵌套:逻辑相关的部分,在视觉呈现上也应该是相关的。要让用户一眼就能看出内容之间的关系。
2让重点信息“跳出来”
我们可以通过视觉设计的方法,如字体加大加粗,色彩对比、添加背景色留白等,强调界面的重点元素。而其他非重点的元素应该尽量藏起来,或是显得暗淡些,从而使界面的重点“跳出来”。
3将次要信息“藏起来”
随有产品的发展、功能的增加,很多网络产品正在变得越夹越臃肿,界面上的元素也越来越多,调查表明,80%的用户只会使用20%的功能,所以,设计者不应将那80%只有专家用户才会使用的功能放在显眼的位置。为了不影响新手和中间用户使用,我们应将那些次要的信息“藏起来”,待用户需要时再将它们展示出来。
无论是电商网站、门户网站还是社交网站,大多数都会设计列表页。列表页往往要展示很多信息,用户会通过快速扫描的方式,捕捉关键信息。
如果说产品定位或设计目标相当于指南针,需求中的功能点就是一个一个零散的地理坐标,而任务流程就是途经这些地理坐标的路线图。由于有主线、有分支,这张路线图看起来更像一个迷宫。有了迷宫“地图”,设计师就可以轻松地带领用户完成任务,达成用户目标。
如今,大量Web产品都拥有丰富的界面。用户完成一顶任务时往往要面对很多复杂的信息和操作。如何抓住用户的注意力,引导用户关注于页面的主要任务呢?我们可以通过分解用户任务、排列任务优先级、组织合并相关任务等方式,使用户可以专注于主要任务。
如何引导用户完成任务
△相似性引导
所谓相似性引导就是,如果大小,色彩、形态、视觉元素等因素相似,那么这些相似的因素可以牵引着用户的视觉,引导用户操作。
△方向性引导
用具有指向性的箭,进行方向性引导。
清晰的视觉纵线也可以建立起无形的方向性。
△运动元素引导
虚线的运动轨迹
△向导控件
向导控件( Wizard)是一种常用的交互方式,用来引导用户完成多步操作Wizard在英文中是巫师的意思。向导控件就像神奇的巫师,可以在陌生的页面环境下,为用户指引路线。同时,还可以告诉用户,要完成任务一共需要多少步骤,你现在所处的步骤是哪个,还有多少步可以完成任务等。
如何简化复杂的操作
1减少冗长步骤和干扰项
提供很多选项,看似可以给用户更多选择,让他们可以掌控局面,但如果超过了一定的界限,特别是在很多选择都很类似的情况下,反而会给用户带来负担。
2将复杂操作转移给系统
3简化操作方式
4优化操作过程
提供合适的首选项,适时帮助,及时反馈,提供合理的默认值。
需求文档中关于业务逻辑、产品要求、资源限制等是设计师必须要正确理解的内容。而与设计有关的信息结构、任务流程、功能说明、界面描述等,仅需作为参考即可。
06设计规划—从需求到设计草图
从需求到界面,隔着一扇门,这扇门就是信息的组织与任务的设定。
相较于鼠标的不停点击,眼睛在页面上扫视的成本要低许多。所以比起深层次的导航结构,广度导航更利于用户发现信息。但如果广度超出用户可以接受的范围,人们必须一次阅读很多选项才能在其中进行选择,也会大大增加用户的选择负担。一般来讲,超过7个选项时,用户就很难记住了。
深广度平衡的导航使用户在每个层级上不必面临过多选择,通过每个选顶的名称便可明确自己寻找的方向。
用户目标与商业目标之间肯定存在着矛盾,用户只想看到自己需要的信息,而企业又希望可以把业务和广告推荐给用户。
导航应该是结构清晰,合乎逻辑的,这是产品设计的必要条件。
为重要功能和常用功能设置快捷入口,就像是在原有产品架构的基础上搭建“快捷通道”。用户可以一步步顺着产品的逻辑来寻找所需功能,也可以通过快捷入口,按照自己的行为习惯,快速找到所需功能。
我们在投放广告素材时发现,当文字越多、内容越复杂时,用户点击量就越小,不仅是广告素材,其他形式的产品界面也是如此。
用户说的不一定是心中所想的
用户没有表达出自己的真实需求:人们所说出来的一般只是表面的想法,不一定能代表他们心中的真实诉求。
该用户不是你的目标用户:提意见的用户并不一定是你的目标用户,他的意见也可能没有太大的参考价值。
用户意见不一定专业:用户不同于设计师,他的很多意见只是一种直观感受,不太可能经过缜密的思考。有的时候用户的要求甚至是不合乎常理的。这就需要设计师经过判断和思考,重新审视用户意见的合理性。
综上所述,我们既需要通过调研、观察、询问、记录意见等方式了解用户想法,同时又要避免不经思考,完全照搬用户的意见来设计产品需求。因为用户的意见并不一定是真正的用户需求,我们需要先去识别(目标用户在合理场景下的真实需求/目标才是用户需求)
如何对待用户的意见
根据目标用户考虑:提出要求的用户是你的目标用户吗?
根据使用场景考虑:用户提出的这个问题一般发生在什么场景?合乎实际的使用情况吗?
用非常复杂的功能。
根据用户目标(真实需求)考虑:用户表达出自己的真实需求了吗?
根据产品定位考虑:用户提出的要求符合产品的定位吗?
根据项目资源考虑:用户提出的这个要求需要多少开发资源?价值有多大?需要立即开发吗?
需求文档
第一可以有效地帮助产品经理理清产品功能、内容、业务逻辑等整体信息。如果跳过这一步,过早地陷入界面细节,很容易得到盲人摸象的结果,给后续环节造成灾难性的后果。
第二,需求文档大大地方便了团队的沟通,让团队成员在项目前期迅速准确、全面地了解你的想法,而仅靠简单的沟通则很难遍历到所有的需求点,且面对多人团队时效率很低。需求文档也规范了项目的具体内容,不会出现越跑越偏的情况,增强了对项目的把控力。
第三,需求文档可以助其他项目成员有针对性地提出问题,而不是感到困惑和无所适从,这样也提升了工作效率。