导图社区 《破茧成蝶:用户体验设计师的成长之路》读书笔记
设计小伙伴必读书目,该思维导图为书籍重要知识点整理。
编辑于2020-08-20 18:27:33这是一篇关于交互设计知识宇宙的思维导图,主要内容包括: 专业技能:线框图和流程图、原型图设计 ... 软件工具:Figma、Edraw Soft ... 积累知识:设计咨询、行业报告 ... 进阶知识:产品管理、美学、艺术 ... 基础知识:设计思维理论、交互设计原则与规范 ... 编程工具:Java、HTML ...
这是一篇关于107 个 cmd 命令程序员必知的思维导图,主要内容包括:calc,appwiz.cpl,certmgr.msc,charmap,chkdsk.exe,cleanmgr,cliconfg,cmstp,cmd.exe,自动关机命令,colorcpl,CompMgmtLauncher或compmgmt.msc,credwiz,comexp.msc,cont。
百款宝藏级AIGC神器 - AIGC 内容检测工具 (5) - 打假AIGC,领跑内容鉴别新赛道 - AIGC 生活工具 (10)- 下厨房、记笔记、做旅游攻略,让AI成为生活管家 - AIGC 办公工具 (16)- AI OA实现一键“从无到有” - AIGC 写作心得 (20)- 一键写作,生活or办公场景都适配 - AIGC 图像工具 (20)- 文生图不止Midjourney,一键实现绘画自由 - AIGC 音频制作工具 (14)- 可变声、可克隆、可降噪 - AIGC 视频处理工具(15)- 自动剪辑、生成分镜。
社区模板帮助中心,点此进入>>
这是一篇关于交互设计知识宇宙的思维导图,主要内容包括: 专业技能:线框图和流程图、原型图设计 ... 软件工具:Figma、Edraw Soft ... 积累知识:设计咨询、行业报告 ... 进阶知识:产品管理、美学、艺术 ... 基础知识:设计思维理论、交互设计原则与规范 ... 编程工具:Java、HTML ...
这是一篇关于107 个 cmd 命令程序员必知的思维导图,主要内容包括:calc,appwiz.cpl,certmgr.msc,charmap,chkdsk.exe,cleanmgr,cliconfg,cmstp,cmd.exe,自动关机命令,colorcpl,CompMgmtLauncher或compmgmt.msc,credwiz,comexp.msc,cont。
百款宝藏级AIGC神器 - AIGC 内容检测工具 (5) - 打假AIGC,领跑内容鉴别新赛道 - AIGC 生活工具 (10)- 下厨房、记笔记、做旅游攻略,让AI成为生活管家 - AIGC 办公工具 (16)- AI OA实现一键“从无到有” - AIGC 写作心得 (20)- 一键写作,生活or办公场景都适配 - AIGC 图像工具 (20)- 文生图不止Midjourney,一键实现绘画自由 - AIGC 音频制作工具 (14)- 可变声、可克隆、可降噪 - AIGC 视频处理工具(15)- 自动剪辑、生成分镜。
破茧成蝶用户体验设计师的成长之路
第1篇 成为用户体验设计师的信念
01 什么是用户体验设计
1.1 设计 != 艺术
艺术是感性的,而设计是相对理性、精密的;艺术所要表达的是创作者的个人意识,而设计是为了解决用户具体的问题
1.2 邂逅用户体验设计
用户体验设计首先是要解决用户的某个实际问题,其次是让问题变得更容易解决,最后是个用户留下深刻的印象,让他在整个过程中产生美好的体验
用户体验设计首先应是理性的(解决具体的某个问题:如用户插电源的烦恼),其次才是感性的(设计的美观度)
1.3 用户体验设计的特征
严谨、理性、创意
提供特定问题的解决方案
不让用户思考
趣味横生
1.4 用户体验设计的精益之道
热爱生活,细心观察,勇于改变
了解人,观察人
理性的思路
亲自使用、体验
多听用户的反馈意见
留心好的设计,在此基础上优化
02 了解用户体验设计师
广义的用户体验指人在使用某个产品时的主管感受。在互联网公司或软件公司里,用户体验主要来自用户和人机界面的交互过程
2.1 用户体验相关职位
交互设计师
理想的解释:帮助用户高效地完成产品所设想的任务,同时在这个过程中,能让用户感觉到愉悦和不受打扰
工作的角度:通过分析用户心理模型、设计任务流程、运用交互知识,把业务逻辑(功能规格或内容需求)以用户能理解的方式表达给用户,最终实现产品战略(公司需求和用户需求的最佳平衡点)的过程
产出物:竞品分析文档、用户反馈整理、流程图、设计草图、设计原型
多把精力放在对设计本身的考上,而不是过早的陷入对细节表现的追逐上
在工作中,交互设计师除了基本的设计工作外,还要沟通、宣传、执行、跟进自己的设计方案,确保最终的结果和自己的设计方案没有偏差。产品上线后,还要继续跟进,解决线上问题、收集反馈意见,为下一次迭代做准备。好的交互设计师对整个项目可以起到非常积极有效的推动作用。
视觉设计师
平面设计师、原画设计师、推广设计师、UI设计师,本文主要讲UI设计师
平面设计师:要求设计者能很好的传达思想,作品有较强的感染力,好的平面作品也不乏艺术感和优秀创意
原画设计师:要求设计者有很强的手绘能力,作品充满艺术表现力
推广设计师:互联网产品的推广运营设计师,要求作品能突出重点、快速抓住眼球,内容越直观越好
UI设计师:要求设计者既具备一定的交互知识,也具有良好的审美感觉,作品能很好的引导用户操作,同时令用户感受到作品的美感,下次还愿意光顾你的网站
用户研究员
顾名思义,就是专门研究用户的人,简称用研
产出物:各种类型的用研报告,更偏向于比较客观和实际的研究结果
一个好的用研人员,不仅要会研究,还要有较强的应变能力,能够根据项目情况、时间紧迫度,采取不同的方法应对;更要有广博的视野和知识面,能融会贯通,为产品提供有力的支持;最后还要注重报告的易读性,不枯燥、实用性强,既专业又能真正地解决用户所关心的问题
2.2 用户体验设计师的价值
用户体验设计师与产品经理区别:用户体验设计师更注重创意及逻辑、细节,设计目标更纯粹,能够更多的考虑用户,工作上更专注,设计方法更专业;产品经理作为产品的主要负责人,需要考虑更宏观的问题,聚焦的范围比较广,更重视商业目标
主要价值
项目价值
通过专业能力节省其他环节的时间
一个优秀的交互设计师可以快速判断出设计方案的优劣,更可以凭借经验和专业能力更快速地得出可靠的设计方案;能够节省产品人员挠头画原型的时间;能够减少产品人员因不断碰壁而不得不反复修改原型的时间;避免了整个项目因为一些明显的错误而导致不必要的迭代;节省了用户研究员做可用性测试的次数;节省了视觉设计师理解、修复不专业的原型稿的时间;节省了前端揣测不完整原型说明的时间;减少了开发因为需求或交互反复变动的抱怨
促进统一化及标准化,提升设计效率
促使项目流程更合理,更有规划
协助产品经理组织各个环节,是整个项目的有力推动者
跟进各个环节,保证产出物质量
用户价值
商业价值
品牌价值
03 设计师的职业困惑
3.1 我适合干这行吗
三百六十行行行出状元
是否适合这行,关键问题在于是否有兴趣及天分
你是否热衷于各种好玩有新奇的产品呢?
你平时是否喜欢用各种各样的产品并研究它是否好用呢?
你是否更容易发现使用中的各种问题,并积极想办法解决它呢?
你是否充满各种灵感和创意?
你是否喜欢思考问题,清晰的罗列各种解决方案并寻找其中的逻辑关系,并且乐此不疲呢?
在绘制草图的时候,你是否有一种莫名的兴奋感呢?
你喜欢跟人沟通和交流、展示你的想法和创意吗?
一般来说,你的想法容易得到别人的认可吗?
你会精益求精,总是要求自己超出预期吗?
3.2 菜鸟怎样入门
提高修养
接人待物
沟通表达
思维能力
专业积累
阅读专业书籍
阅读行业文章
多和同行交流
项目经验
多做项目
多研究竞品
多总结
3.3 去大公司、小公司,还是设计公司
没经验、实力可以去小公司磨炼
有经验、实力尝试去大厂锤炼
最重要适合自己长远发展
3.4 什么样的应聘者更容易成功如图3-4
技能掌握专业的技能
思维:具备强大的思维能力
从整体到局部,再到细节,最后回归到整体的思考过程
素养:具备良好的素养
兴趣:对用户体验具备浓厚的兴趣
3.5 未来的发展方向
复合型
喜欢设计:交互兼视觉
比较细心、对研究方向感兴趣:用研兼交互
对产品、运营感兴趣:产品经理
垂直型
在某项领域里面深入耕耘,专业程度比较精深
管理型
经验丰富,不仅精通自身专业,对其他领域也有所了解
对自己要求严格,并且有较强的组织协调能力和前瞻性
凡事愿意冲在前面,愿意承担责任
全能型
设计、调研、代码、项目管理样样精通
创业型
创业是一条艰辛的不归路,有的人赚的盘满钵满,有的人却伤痕累累
但是只要有人脉资源和信心,趁着年轻去做一番事业,还是非常值得鼓励的
第2篇 修炼用户体验设计师的技能
04 设计流程-设计师具体做什么
4.1 设计师如何参与一个具体的项目如图4-1
用户体验设计的目标:解决用户需求,减少用户理解和操作成本,给用户留下美好而深刻的印象
4.2 在项目中设计师容易遇到的问题
团队成员的专业能力
产品经理不能够清晰阐述需求
设计师专业能力有限
开发人员能力有限,不按照设计稿做,偷工减料
外界因素的干扰
上层领导干预过多
时间紧张,预留给设计师的时间太少
一个设计师负责多个项目,不能一一跟进
项目组成员座位距离太远,沟通不便
短期难以改变
团队凝聚力
解决方式:确定项目流程规范,同时指定一些举措(如排期时预留出设计走查时间,而不是只给设计师设计的时间;开发制作完毕后通知设计师进行走查等)保证流程执行下去
05 需求分析--拿回产品的主导权
5.1 和产品经理一起做需求分析
需求考虑的角度
从商业利益出发
从用户角度出发
从项目角度出发
三者缺一不可,相辅相成
5.1.1 不可忽视的产品定位
产品定位是产品设计的方向,也是需求文档和设计产出的判断标准;实际上就是关于产品的目标、范围、特征等约束条件
产品定位
产品定义由产品经理从网站角度考虑
产品定义就是用一句话概括某个产品举例:一款专为摄影初学者使用的简单易用的修图软件
使用人群:摄影初学者
主要功能:修图
产品特色:简单易用
产品定义作用:首先迫使产品经理努力去思考产品的方向和机会;其次为产品限定了大致范围,让团队成员不至于在千头万绪中感到无从下手、难以取舍;最后是团队成员的凝聚力更强、思想更统一。
用户需求由设计师从用户角度考虑
目标用户(最重要)
使用场景
用户目标
一条用户需求可以看作是“目标用户”在“合理场景”下的“用户目标”即:解决“谁”在“什么环境下”想要“解决什么问题”
产品经理的决策至关重要,为了和设计师一起确定产品定位,产品经理需要事先做更多的准备工作,包括但不限于:了解市场调研结果,了解市场上同类产品的情况,了解潜在用户的基本情况,了解自身优劣势等等
5.1.2 需求从哪儿来
采集需求的方式
用户调研
问卷调查
用户访谈
信息采集
竞品分析
上线前
用户反馈
产品数据
上线后
5.1.3 如何分析与筛选需求图5-1、5-2
筛选掉明显不合理的需求
技术不可实现/价值意义不大的
投入产出比低的
明显不合常理的需求
挖掘用户目标
匹配产品定定位
考虑项目资源/定义优先级
5.1.4 了解需求文档
需求文档包含内容
文档修改与审核记录:需求文档如有修改,需要简要记录
目录:内容过多最好提供目录
背景描述:为什么要做这个产品/模块、市场行情、业务目标、产品定位
用户类型和特征:简单的描述目标用户情况或现有使用人群的情况
项目时间安排:何时启动和完成
信息结构:内容或页面的层级
整体业务流程说明:对于涉及操作多的产品/功能,需要业务流程图,帮助设计师和项目成员理解具体的业务逻辑
需求详细说明:每一条需求的详细说明,如图5-3
需求文档的后续迭代
5.2 倾听用户的声音
5.2.1 拥抱用户
5.2.2 别被用户牵着走
5.2.3 如何对待用户的意见图5-4
目标用户
使用场景
用户目标
项目资源
产品定位
5.3 设计师的逆袭
5.3.1 如何面对强势的产品经理
5.3.2 拒绝不靠谱的需求文档
需求文档作用
第一、需求文档可以有效帮助产品经理理清产品功能、内容、业务逻辑等整体信息
第二、需求文档大大地方便了团队的沟通,让团队成员在项目前期迅速准确、全面地了解你的想法
第三、需求文档可以帮助其他项目成员有针对性的提出问题,而不会感动困惑和无所适从,提升工作效率
第四、需求文档不仅有利于项目的持续发展,还能促进产品经理自身能力、专业性的提升
需求文档不规范
第一、说明产品经理根本没有想清楚需求,设计师难以进行后续的设计任务
第二、没有需求文档,产品经理可以在设计环节随意更改想法,导致后续环节效率极低
5.3.3 从“功能需求”到“设计需求”
5.3.4 如何“抄袭”竞品
06 设计规划--从需求到设计草图
6.1 从需求到界面,隔着一扇门
6.1.1 如何搞定信息分类
逻辑分类:使用人们生活中熟悉的分类逻辑对内容进行组织
卡片分类:可以设计除符合用户心智模型的信息架构,简单的说就是邀请用户把“类似的东西放在一起”,一般由开放式和封闭式两种分类
开放式:给用户足够的自由度来进行信息归类;特点是对于内容复杂、信息庞大的网站来说,结果不可控
封闭式:设计师首先会将导航的架构设计好,确定出导航的个数和名称,再将属于这些类目的卡片分发给用户,让用户根据自己的期望,把卡片归类在不同的导航分类下;特点是结果可控,可用于对信息设计的结果进行验证的阶段
6.1.2 好的导航是成功的一半
信息的组织与分类是导航设计的基础,而导航设计在互联网产品设计中扮演着重要角色
导航的自我解释
成功的导航设计可以自我解释,让用户在导航系统中清楚的认识到信息结构和自己所处的位置,为用户解释“我从哪里来?”、“我现在在哪里?”、“我能去哪里?”的问题
深广度平衡
在导航的信息组织中,层级的数目称为导航的深度,每一层级中包含的菜单项数称为导航的广度。在设计导航时,要考虑到深度与广度的平衡,也就是纵向的层级数与横向的选项数的平衡
用户所需信息与商业推广信息的平衡
为重要功能和常用功能设置快捷入口
6.1.3 主要任务与次要任务
设计师需要站在用户角度上,通过优先级筛选、设计用户任务,并确定主要任务和次要任务,可以帮助我们快速判断界面上内容的主次关系
6.1.4 如何突出主要任务
1、分解用户任务
从用户的行为处罚,详细描述用户的使用过程,将用户任务分解为具体的行为操作
2、排列任务优先级
优先级并不是出现的先后次序,而是在页面中的重要程度;任务的出现次序,按照主行为流的次序排列
3、组织合并相关任务
将次序相同、操作类似、界面类似的任务组合起来,合并为同一组模块展现在用户面前
6.1.5 如何引导用户完成任务
1、相似性引导
大小相似引导
色彩相似引导
形态相似引导
视觉元素相似引导
2、方向性引导
3、运动元素引导
同一个页面的引导
4、向导控件(Wizard)
支持跨页面的引导,比如注册流程的1/2/3/4步骤条
6.2 设计友好而医用的界面
6.2.1 如何简化复杂的操作
1、减少冗余步骤和干扰项
2、将复杂的操作转移给系统
3、简化操作方式
4、优化操作过程
6.2.2 信息量太大,页面怎么摆
1、让页面层次不言而喻
逻辑上有包含关系的在视觉上进行嵌套:逻辑相关部分,在视觉呈现上也应该是相关的,要让用户一眼就能看出内容之间的关系
2、让重点信息“跳出来”
3、将次要信息“藏起来”
6.2.3 理性的规划VS感性的界面
对于设计师来说,既要通过理性的规划网站层级和逻辑,又要学会通过感性的界面吸引用户。
1、以人为本的界面设计
首先我们要了解用户,知道用户有什么样的需求,他想要的是什么
其次,我们要保证我们的界面逻辑不是错误的,可以让用户顺利完成任务
最后,我们要力求让设计形式符合用户的心理模型,让用户感受到“人性化”设计
2、帮助用户找到想要的东西
信息组织与分类的目的,就是要让信息易于找寻。让有明确目标的用户,能够快速找到所需信息;有不确定目标的用户,通过浏览和寻找,一点点明确自己的需要,最终找到信息;让没有目标的用户在探索中激发兴趣
3、吸引无目标用户
对于无目标或目标不明确的用户来说,我们不能再用理性、逻辑的思维方式来对待他们,而是充分地换位思考,用感性的思维方式来给他们营造贴心、友好、有吸引力的界面
4、符合用户心理模型
在设计的过程中,设计师也该充分考虑到用户是如何理解产品的,并在交互设计的表现形式上更加贴近用户的心理模型,避免将枯燥的逻辑直接呈现给用户
人不仅具有理性,也具有感性。这导致人们的目标、期望、行为习惯等和逻辑往往存在冲突。过于关注逻辑可能会使设计偏离了用户目标,最终导致易用性受到影响。但正确的逻辑依然重要。逻辑正确的设计可以保证产品是可用的,只是未必易用。在关注用户目标的基础上,逻辑也要合理,只是不要“过于”追求逻辑上的完美,平衡好用户情感与界面逻辑的关系,这样才能设计出友好而易用的界面
6.3 捕获用户的芳心
6.3.1 来着真实世界的灵感
拟物化的视觉
拟物化的设计可以在现实生活中找到映射,所以可以更好地传达信息
注重效率的应用可以设计的尽可能间接,帮助用户快速完成任务。但是对于那些娱乐型应用来说,人们对于情感的追求永远不会消失。拟物化并不意味着一定要100%还原物理世界的真实质感。抽象出物体中最有特征的部分,将繁复的视觉元素进行简化处理,一样可以设计出既简约有可以调动起用户情感的产品
隐喻化的操作
当应用中的可视化对象和操作与现实世界中的对象与操作类似时,用户就能快速领会如何使用它
6.3.2 贴心的设计惹人爱
可控的感受
如果界面没有任何提示,80%的用户等待超过2秒就会直接关闭窗口。如果界面有提示或是加载状态,用户的离开率就会极大地降低。加载状态提示可以增加用户对界面的可控感,形成操作预期,使用户安心
为了增强用户的可控感,界面还需要预先提供提示,向用户透露一些接下来将要发生的事情,让用户建立预期。
积极的反馈
积极的反馈可以增强用户的信心,提升用户体验的愉悦感
贴心的提醒
文字提醒
状态提醒
6.3.3 如何调动用户的情感
产品能通过功能满足用户需求,容易让人学会并顺利使用,让人感到愉悦并能深深地吸引用户
互动的乐趣
积极有趣的反馈方式令用户觉得操作得到了充分的响应,希望与界面互动的情感得到了满足
惊喜的力量
情感的烘托
为产品设计一个故事情节,通过视觉、动画和音效的烘托,把用户带入一个情境中。这种讲故事的方式可以很有趣味性,也可以很感人,能够有效吸引用户的注意力,调动起用户的情感
6.4 快速表达我的想法--纸面原型
纸面原型的目的
纸面原型不是为了交付,而是为了沟通、测试,尽快地解决那些不确定的问题。纸面原型更具有可塑性,可以快速修改和重建,帮助设计师探索可能多的想法并否定掉那些不靠谱的想法。
使用的工具
可使用最简单的铅笔和纸张,快速画出草图
可使用马克笔、双头笔,运用粗细不等的线条和阴影关系,画出界面的层次关系
如果希望页面尺寸更准确,还可以使用尺子等工具
如果想表达出交互效果,可以使用便签纸和小卡片,它们可以当做提示气泡、弹出层、模态窗口等,贴在绘图本的任何地方,也可以作为页面标注的工具,说明产品功能
需要表达的的内容
纸面原型可以看做是最终设计方案的雏形,其中最需要关注的是框架、流程、基本功能和内容,可以忽略设计细节
07 设计标准--好的设计需要表达
7.1 什么是原型
原型的由来-设计方案的表达
原型是设计方案的表达,是设计师重要的产出物之一,也是项目团队参考、评估的重要依据。它是产品功能和内容的示意图,既包含静态的页面样式(线框图),也包含冬天的操作效果(交互效果)
为什么要学习原型制作
第一、再好的设计想法,如果没有清晰、标准的表达,效果也会大打折扣。要想成为一个专业的交互设计师,一定要学会产出标准的原型稿
第二、原型设计是项目开发的标准和依据
原型按精细度分类
低保真原型
与最终产品不太相似的原型,可以是纸面原型,也可以是用软件绘制的线框图
高保真原型
高保真原型在外观、操作上与最终产品基本一致。通过高保真原型可以告诉项目组成员用户做什么操作后会出现什么效果,相当于一个高级模型,更适合做展示用
7.2 标准的原型应该包含什么内容
简要说明与信息结构
简要说明
变更日志
包含日期、变更内容、变更原因、备注等
版本说明
以版本号为单位,适合快速迭代且迭代周期比较固定的项目。包含版本号、日期、更改内容等
信息结构
产品内容、页面层级等,可以让项目成员快速浏览产品内容、功能、结构等重要信息;不同于需求文档阶段的信息结构,需求文档的信息结构更多体现了产品的逻辑结构,而原型稿中的信息结构,是被设计加工过的产物,它是综合考虑产品逻辑结构和用户习惯而得到的结果
任务流程与页面流程
任务流程
指用户使用产品时,它的每一步操作会遇到什么结果、系统会如何反馈等等
业务流程更偏向于业务限制、后台逻辑等,并不过分注重用户的操作逻辑;而任务流程则需要关注用户如何操作、界面如何反馈等,从而引导用户完成用户目标
页面流程
比任务流程更加清晰、具体。通过页面流程图,不仅可以看到具体的页面,还可以看到用户如何通过操作从一个页面跳转到另一个页面的完整过程
线框图与交互说明
线框图
原型既包含静态的页面样式,也包含动态的操作效果。线框图代表静态的部分
交互说明
原型图的交互说明代表动态的部分,是不可或缺的内容,逻辑严密、内容详细的交互说明会让原型看起来更加专业
类型
限制
范围值:数据的取值范围
极值:数据的显示限制
状态
默认状态:默认显示的文字、数据、选项等
常见状态:主要指针对一个模块经常遇到的一些状态
特殊状态:指非正常情况下的样式、文案、说明等
操作
常见操作:主要指正常操作时得到的反馈状态
特殊操作:主要指一些极端情况下的操作
误操作:主要指当用户操作错误时的情况
手势操作:主要指用户移动产品时的操作方式,常见的有点击、双击、长按、捏、伸、滑动等等
反馈:用户操作后得到的反馈动作,包含提示:操作后系统反馈给用户的文字说明等、跳转:指点击某个链接后,页面跳转到哪里、动画主要指用户操作后,系统通过动画的方式反馈给用户等
总而言之在写交互说明时主要应记住2条内容:除静态页面外,还需要考虑各种动态情况;除正常情况外,还需要考虑特殊和错误情况
7.3 你真的会画线框图吗
通过明暗对比表达
不使用截图和配色
合理的布局
遵守栅格规范
标记第一屏高度
表达清楚UI逻辑
考虑视觉实现前后的效果
视觉设计师拿到线框图后,先不要急着做,要先看看有没有问题,能不能突出重点,在做之前多沟通、多思考,才能事半功倍
了解视觉趋势
7.4 写交互说明的诀窍
尽量使用真实、符合逻辑的数据内容
不遗漏特殊状态的描述
避免过长的说明
需求或设计方案有问题,导致逻辑异常复杂
方案成本过高,是否有开发的必要
需求和设计都没问题,是否表述方式有问题
避免流水账式的说明
用表格罗列状态
巧妙组织文字说明
制作动态效果
重复出现的模块
使用模块化的思维方式来处理复杂的问题,对提高工作效率很有帮助
原型有修改,不要口头沟通,要更新交互说明并告知大家
7.5 关于设计规范
什么是设计规范?
设计规范是对设计的具体细节、技术要求,是设计工作的规则和界限,是一种模板化的应用方法
没有规范容易出现什么问题?
不同频道/模块独立设计
同类功能组件存在多种样式
同类元素多样性
设计效率低下
设计质量难以把控
规范解决了什么问题?
“一致性”形成鲜明的产品特征,增强用户粘度
提高易用性
满足团队协作需求
避免重复劳动、提高工作效率、提升设计质量、降低培训和支持成本、减少团队成员犯错误几率
设计规范的分类
从纵向考虑
交互规范
视觉规范
交互规范一般要先于视觉规范
从横向考虑
产品战略级方向的大规范
单个项目中的设计小规范
什么时候开始设计规范
大型且重要的产品
产品结构、页面类型、UI组件相对单一,可复用的内容较多
项目人手充足、时间较充裕
品牌风格、主题风格已确定完毕,品牌备忘和梳理势在必行
产品线日益丰富,后续设计一致性和可循环的要求被提高
产品结构壮大,新人不断涌入,沟通和执行效率亟待提升
制定设计规范的原则
制定规范是为了给团队成员做设计指导,所以内容一定要简单易懂、条理清晰
设计规范一般遵循从大到小的原则,即先制定大的设计方向,再制定项目中单个详细的说明;先制定团队合作的规范,再制定个人操作上的规范
规范的执行及注意事项
制定规范的目的并不是为了限制设计师的发挥,而是帮助设计师少走弯路,避免不必要的错误并提高设计效率,更多是起到指引和参考的作用,而不是限制
规范不可能面面俱到,也不可能涵盖到所有的情况,我们更需要的是培养设计师的规范意识,而不是过于教条。规范主要从全局考虑,因此我们在实际操作中可以在大统一的基础上做局部的特色处理
08 项目跟进--保障设计效果的实现
8.1 做设计评审的主导者
不同偏好和不同出发点的项目成员 图8-1
设计评审的目的
检验目标
在项目的各个阶段都需要用产品定位或设计目标去检验设计方案是否达成了最初确定的目标
发现问题
设计评审集中了项目组中的各个角色,可以及时发现问题与风险,在确定设计方案阶段,项目开发团队还没有完全开始投入,这时发现设计中的问题并进行更正,可避免一部分风险。良好的问题反馈也有助于设计师及时调整方案
达成共识
设计评审需要让项目成员达成共识,这样才能顺利进入下一个环节,为下一个流程分配任务。同时还可以让相关人员熟悉整个设计,确保大家的理解与设计稿的表达是一致的,避免沟通不顺畅而走弯路
评审前的充足准备
事先考虑所有可能的方案
事先把所有可能的方案都考虑到了就可以从容的应答评审会的问题, 把之前思考过的另一个方案存在的问题一一列举出来
准备各种设计依据
设计师需要在评审会前将用户调研的结果、支撑的数据、竞品分析、涉及实施前制定的目标等等都准备充分,在评审是阐述清楚,这样有理有据的设计才会得到大家的支持。评审前的充足准备,如右图8-2所示
做好会议前的邀请工作
邮件发送主要人员,附上设计理念、参考数据和资料、提醒参会人员熟悉设计方案和准备好问题,以便会上讨论
做好主要人员会前沟通
把控好会议每个环节的提问讨论时间;做好未解决问题记录,会后讨论
如何在评审中掌握主导权
主导流程
1. 明确设计方向
设计师首先明确产品定位或设计目标
2. 阐述设计分析
将用研结果、支撑数据、竞品分析等资料展示给大家,在评审人员了解设计的原委
3. 展示设计方案
注意表达技巧:语速不要过快,阐述重要的设计点要清晰,把握时间和节奏
4. 引导讨论
收集评审人员意见,引导讨论
提高效率,控制话题
及时将偏离主题的讨论及时拉回正轨
区分和收集有价值的反馈意见
评审后的分析与跟进
在评审会上收集了反馈意见之后,设计师需要整理总结这些意见;对于还没有达成一致的设计细节,继续进行完善细化。在根据反馈意见完善设计稿之后,将最终设计方案发送给项目组成员
8.2 如何审核视觉稿
界面中的视觉设计不是艺术作品,正确地理解信息和传递信息是最重要的事,忽略内容而关注形式是不可取的。所以交互设计师要注意视觉稿是不是和交互稿传达的信息一致,是否传达到位、重点突出且层次分明。
对交互稿理解是否正确
拒绝毫无发挥的视觉设计
关注视觉层次是否足够清晰
正确的理解信息并将其传达出来是对视觉设计师最基本的要求;此外还要让界面更美观、更有氛围;最后还要通过视觉元素清晰地引导用户,让用户能快速理解信息。
关注交互细节和状态标注
在审美方面不要过分干涉
信息传达是客观理性的,但视觉设计是主管感性的
8.3 开发阶段,设计师应该做什么
勤于沟通 图8-3-1
在设计方案完成后,一定要与工程师进行当面沟通,把重要的设计点详尽地区面熟给他们,需要特别注意的地方也要再次强调,这样确保技术人员可以正确理解设计,而不会忽略重要设计点
解答技术人员在开发时遇到的关于设计方面的问题、了解开发进度
统一的规范和标准
设计师会对设计稿进行标注和规范的整理,这样做的目的是为了使产品各个页面规范统一,同时也方便设计和开发实现一致、提高效率
设计走查 图8-3-2、8-3-3
在前端和后台开发完成后,设计师和开发人员必须进行确认
09 成果检验--设计的优劣可以判断
到了这一步,设计师工作中的重头戏似乎都已经完成了,但是交付方案并不是设计流程的结束。不管是产品经理还是设计师,此刻一定都非常关注设计方案的结果到底如何:是否达到了商业目标、用户是否满意、用户实际使用时的情况如何等等;在产品上线前发现的问题可以及时改进;在产品上线后发现的问题可以作为下次产品优化的依据。我们应该主动跟踪和反馈,发现新的需求、新的数据,再去分析产品应该如何持续优化,满足用户不断变化的需求,帮助产品取得更大成功
产品上线前或预上线阶段,一般使用可用性测试和A/B测试的方法;在上线后一般使用收集用户反馈、产品数据的方法对设计方案的优劣进行检验,如图9-1-1
9.1 可用性测试
可用性测试是通过观察用户使用产品,发现产品中存在的问题的一种定性分析方法,是改善产品的最佳方式之一,如图9-1-2
通过可用性测试,可以直接观察到用户的实际使用情况,并通过访谈得到用户的想法,这对提升产品的易用性很有帮助
设计测试任务要注意些什么?
给出使用目标,而不是直接操作
尽量选择最重要、最频繁的任务进行测试
符合正常的工作流程
测试用户的选择
选择具有代表性的用户
用户数量的选择:调查表明,5名左右的用户可以发现大概85%的问题
测试过程中的注意事项
切忌引导性过强
操作行为永远是重点:操作行为是最直接最具体和客观的用户反馈
不要忽视现场反应
考虑使用场景:每种产品都有一定的使用场景
感谢被测者,并给予一定报酬
问题的分析与改进
灵活运用可用性测试
9.2 A/B测试
A/B测试指A方案和B方案的比较,为同一个目标设计两种方案,一部分用户使用A方案,另外一部分用户使用B方案,通过用户的使用情况来衡量那个方案更优。如图9-2-1
A/B测试是一种定量分析方法,样本量大但结果较为客观,但我们很难直接通过数据了解到背后的原因。可用性测试是一种定性分析方法,样本量小但结果未必可靠,但可以了解到用户的想法。两种方法各有利弊,一般采用定性研究与定量研究相结合的方式
A/B测试可以了解一些关键数据指标的情况,对检验是否达到产品的商业目标很有帮助
注意事项
设定衡量标准
设定统一的衡量标准,才能比较出方案的优劣;一般是产品经理根据产品要求来确定统一衡量标准
对用一个用户呈现相同的页面
A/B测试需要保证用户在测试期间看到的都是同一个方案,即使看到不同的方案对测试结果也没任何影响,但这会降低用户对网站或APP的满意度
保证两个版本同时测试
两个版本同时测试才能保证数据的准确性
单一变量
单一变量的A/B测试通常可以选取按钮、标题或说明文案、产品页面上的图片、页面的结构布局或色彩风格等因素作为变量
A/B测试的延伸-灰度发布
灰度发布是一种能够平滑过渡的发布方式。将旧版本作为方案A,新版本作为方案B,让一部分用户继续试用旧版本,一部分用户切换到新版本,然后观察用户反馈和产品数据。如果用户的反应很好,则可以逐步扩大范围直至全部升级;如果部分用户在使用新版本的过程中发现一些问题,可以及时优化。
9.3 定性的用户反馈和定量的产品数据
收集和分析用户反馈
收集用户反馈
对于线上产品可以在界面上放置用户反馈入口,让用户在遇到问题时直接填写反馈信息。
对于新产品及重大改版时,可以通过电子邮件、首页链接等方式主动发放调查问卷,收集用户意见
如果产品有在线客服或产品论坛等功能,也可以让客服把每天的咨询最多的问题收集汇总给你,或是直接潜伏到论坛中看看用户的吐槽,获取第一手反馈资料
对于App还可以通过应用市场获取大量的评分和评论信息来收集用户反馈
分析用户反馈
无论是从网站的用户反馈系统中导出的内容,还是各处收集到的反馈都是零散、缺乏组织的。要将这些内容分类整理才能快速从中发现产品的问题。
关于如何筛选有价值的反馈信息、如何从反馈中探索出真实需求等问题,可以参加5.2节-倾听用户的声音
用数据检验产品目标
产品数据是否达到产品目标,并不是设计单方面可以决定的。运营推广力度的加大、技术方面的优化等都可以使产品数据上升。我们很难量化运营、技术、设计分别给产品带来了多少价值,产品的进步和每一个环节都分不开的,所以这些可以量化的产品数据,也是检验设计成果的一个方面。
第3篇 实现用户体验设计师的价值
10 设计师的自我修养
10.1 优秀的设计师VS糟糕的设计师
优秀的设计师
对设计充满兴趣和激情
有天分,思维活跃
执行力强
情商高
超出预期
有条理
有上进心
眼界开阔、知识面广
乐于分享
乐观的心态
糟糕的设计师
缺乏兴趣和耐心
心态不好、顽固任性
不会合理安排时间
时间估算不准
不会恰当表现
过于被动
沟通及团队协作能力差
学习意愿不强
不够专业
如何提高自身水平
专业
沟通
流程
10.2 学会思考,事半功倍
掌握正确的思维方法和专业技能,工作中很多难题便迎刃而解
10.3 在否定中积极成长
别害怕被否定
学会忍耐和付出
识别真相
适度妥协
超越自我
11 设计师易忽略的工作意识
11.1 设计师的品牌意识
品牌的作用:好的品牌可以成为一种信仰,对内凝聚员工对外树立形象
价值
专业
忠诚
信任
提升品牌的设计原则 图11-1-1
保证关联性
表现产品功能
迎合目标群体
体现产品特色
力求一致性
应用内一致
平台内一致
平台间一致
追求独特性
个性的标志
独特的风格
亮眼的细节
11.2 设计师的沟通意识
项目中常见的沟通方式及特点 图11-2-1
通过文档沟通
优点:不受文字数的限制,内容具体;便于查阅存档及日后的统一管理;适合描述功能多、业务复杂的项目;适合跨部门协作的项目
缺点:不容易建议统一标准;由于面向多种角色,因此阅读时不容易找到各自需要的重点;阅读费时;理解成本较高
通过邮件沟通
优点:打破时间和空间的限制;便于查阅记录;方便为多人发送附件;比较正式,适合报告工作进度或通过项目状况等
缺点:正文不宜太长;传递信息不及时(有时容易被忽略或丢失);不清楚语言环境,有时容易误读;不利于处理有争议或敏感的问题
通过IM(即时通信软件)沟通
优点:沟通方便;容易消除紧张情绪;截图、发送文件方便;可多人对话;适合相熟同事之间沟通,畅所欲言;适合解决争议不大的问题
缺点:容易被忽略;一些复杂的问题很难描述清楚;容易误解;查阅记录不是很方便;不利于解决争议;过于随意,不适合说重要且紧急的问题
通过电话沟通
优点:即时、有效,沟通效率较高;适合解决紧急但不太重要的问题
缺点:不利于传达微妙的情感;特别复杂的问题不容易说清楚,有可能引起误会;不方便查看图片;不方便查找记录
面对面沟通
优点:真实,便于拉近距离;便于说明复杂问题
缺点:无记录;沟通成本略高;多人沟通时效率可能较低;一旦陷入僵局,回旋余地较小
会议沟通
优点:集思广益、开拓思路,更多角度了解他人的观点;适用于跨部门、协同解决问题、头脑风暴等
缺点:若方法不得当,会导致效率极低
不同沟通方式的适用环境 图11-2-2
项目中常见的沟通问题
敢怒不敢言
用批评代替赞扬和鼓励
单向沟通
思维方式、立场不一致导致的沟通障碍
性格差异导致的沟通障碍
沟通积极性差
如何更好的沟通
放平心态:不太计较得失,客观看待问题,保持心情愉快
换位思考
积极主动
多思考、多提问、多表达自己的意见
更多肯定、更少批评
真正认识沟通的意义
沟通的本质不是为了说服,而是为了让彼此心悦诚服并最终解决问题
11.3 设计师的流程意识
设计流程
1. 需求分析
2. 信息架构
3. 任务流程
4. 页面草图
5. 标准原型
项目流程 图11-3-1
1. 用户研究
用户研究
竞品分析
用户角色
2. 概念设计
Demo评审
3. 产品立项
产品定义
需求文档
需求评审
立项会议
排期
4. 交互设计
竞品分析
低保真交互
可用性测试
交互评审
高保真交互
5. 视觉设计
竞品分析
视觉设计
视觉评审
6. 前后开发
开发时间安排
7. 测试走查
功能bug测试
交互走查
视觉走查
产品走查
可用性测试
8. 发版上线
产品运营
收集用户反馈
统计用户流量
不遵守流程的后果
需求不确定,反复修改
无具体排期,上线遥遥无期
没有预留出走查时间,仓促上线
产品经理一人独大,项目失控
出现问题难以确定责任
需要注意的问题
关于需求变动
需求变动时,需重新评估工作量
大的改动放到下一期
小的改动征得负责人同意可在本期修改,但需修改排期
关于排期
排期应该在需求评审后,根据需求内容来确定具体的时间安排
项目排期要算上迭代走查的时间
关于设计
设计师根据交互评审后的意见进行设计修改,尽量不再反复,如后期仍需修改,需要大家一起评估
多做可用性测试
上线前后
上线前产品经理通知项目组成员进行最后的检查
上线后及时收集用户反馈和产品数据情况
设计师的流程意识
灵活性
根据项目情况采取最合适的方法和流程,懂得灵活变通
主动性
主动发现流程问题,积极地协助产品经理或项目经理组织、协调、沟通,保证流程的合理运行,保证设计方案可以顺利、高效地执行下去
专业性
充分做好本职工作,如设计可靠的方案、产出标准的原型、主动跟进检验设计方案
12 设计师为了什么而设计
12.1 为老板?为用户?还是为自己设计
用户体验设计价值包含了用户价值、商业价值、项目价值、品牌价值
在实际工作中,要尽量权衡利弊,最大化发挥价值,做到三点
首先要排除不正确的价值观
其次要避免过于偏激和绝对,懂得适当变通
最后注意平衡不同的价值倾向,使整体价值最大化
设计师要做的是平衡商业价值和用户需求,通过自己的专业水平为公司、用户创造最大的价值
12.2 实现商业价值与用户需求的平衡
构建强大的自我
与产品经理的制衡
与产品经理的合作,可参考第5章
设计师具体做法
识别需求的有效性
重塑需求
梳理结构流程&界面设计,可参加第6章
12.3 实现用户体验设计师的价值
用户体验设计师面临的挑战与机会
交互设计师首先要肯定自己的价值,然后努力去发挥自己的价值
用户体验设计师的积累与突破
图3-4 什么样的应聘者更容易成功
图8-1 不同偏好和不同出发点的项目成员
图8-2 评审前的充足准备
图8-3-1 勤于沟通
图8-3-2 设计与开发需要最终确认
图9-1-1 检查设计成果的方法
图9-1-2 检查设计成果的方法
图11-2-1 不同沟通方式的特点
图11-1-1 提升品牌形象的一些设计规则
图11-2-2 不同沟通方式的适用环境
图11-3-1 完整项目流程
图12-2-1 设计师拿到需求后的4个步骤
图4-1 设计师如何参与一个具体的项目
图5-1 如何把用户需求转化为产品需求
图5-2 从产品定位到需求优先级
图5-3 需求的详细说明
图5-4 考虑用户意见的5个因素
图8-3-3 设计走查