前言
虽然不同项目的产品类型千差万别，设计师做方案时用到的方法和思路总是相对固定的
一个人的价值，取决于他/她能为别人带来的价值
第1章 初学乍练—帮你把握大方向
1.1 设计中的交互设计
1.1.1 设计的目的：满足需要
第二次世界大战，让德国人束手无策的战机，德·哈维兰蚊式战斗轰炸机（简称【蚊式轰炸机】）。
由英国的德·哈维兰（de Havilland）飞机公司设计制造的。
设计师充分考虑了战争的现实需要
采用木制，保证了物资匮乏时代仍可以高效地制造；减轻重量，使其速度更快，能够躲避敌人的攻击。
设计的目的是满足需要，而艺术的目的是表达艺术家对世界的看法
1919年，德国成立了世界上第一所完全为发展设计教育而建立的学院—【包豪斯】（Bauhaus），从此，设计学科真正建立。
包豪斯首次将“理性思维”的观念注入了设计活动中，提出了关于设计的三个基本观点：
①设计是艺术与技术的新统一；
②设计的目的是人而不是产品；
③设计必须遵循自然与客观的法则来进行。
包豪斯实践了许多前所未有且影响深远的举措：
①首次提出要为大工业生产而设计
②包豪斯奠定了现代设计教育的结构基础。包豪斯把课程分为对平面和立体结构的研究、材料研究和色彩研究三个方面，使视觉教育第一次比较牢固地建立在科学的基础上。
③包豪斯首次提出了“以解决问题为中心”的设计理念。
包豪斯强调【形式追随功能】，强调突出功能，去掉不必要的装饰
1.1.2 什么是交互设计
1979年3月28日凌晨，美国宾夕法尼亚州哈里斯堡东南16km处的【三里岛核电站】2号反应堆发生了放射性物质外泄事故。
调查发现操控员的处理以及控制室仪表盘的界面都存在严重问题，
控制室的仪表盘没有提供监视堆芯温度的仪表，监控阀门的指示灯没有显示是哪里的阀门出现了问题
这样的设计使操控员在出现问题几小时后都无法确定问题发生的位置，导致问题越来越严重，最终发生了爆炸。
在这个监控系统的交互设计方案中，缺少了对关键部件的监测反馈，缺少有效反馈
例1，手机App，股票的“交易”界面，只说明了操作失败，但没有说明原因
例2，微信登录页错误提示的设计。
用户第一次密码输入错误时，会出现错误提示；第二次输入错误时，微信会提示是否需要找回或重置密码。
在处理错误信息这个问题上，更进一步的交互设计方案是【防患于未然】
例3，支付宝转账功能的设计方案。
用户输入数字后，会在输入框的上方出现“给对方转账xx元”的提示
更进一步进行了改进：用户点击昵称后，直接进入转账页面，从流程上直接进行了优化，避免了用户犯错。
用户进行操作过程中，系统或程序在用户操作错误时给予及时反馈，能带给用户掌控感，提升用户体验。
交互设计中“交互”一词，英文是interaction，其中inter是“互相”的意思，action就是“行动”，所以interaction直观上解释就是“互相的行动”，也就是主体行动一下，客体再行动一下，彼此往复，你来我往
“交互设计之父”艾伦·库伯，《About Face 4：交互设计精髓》：“交互设计是设计可互动的数字产品、环境、系统和服务的实践“
交互设计与人机交互的重叠区域最大，与工业设计、建筑设计、信息架构设计、视觉设计都有交集。
交互设计是对人与数字产品、环境、系统、服务等如何进行互动的设计。
这些互动的过程，主要发生在若干个节点上。
节点与节点之间的过程，系统需要让用户明白需要做什么，发生了什么，以便进行下面的步骤。
交互设计师处理的就是用户与这些关键节点的互动，让用户知道自己现在所处状态、该做什么、操作之后有何种效果这三种关键信息，辅助用户完成任务。
1.2 如何学习交互设计
1.2.1 互联网产品开发流程
产品需求阶段
交互设计阶段
视觉设计阶段
开发/测试阶段
上线阶段
1.2.2 交互设计师的必备技能
场景思维
用户习惯和心智模型
设计目标
竞品分析
流程设计
设计原则
设计规范
原型制作
可用性测试
1.2.3 交互设计的学习方法
学习基础知识和技能，然后进行实践是高效进行交互设计学习的“秘诀”。
第2章 登堂入室—目标用户和场景
2.1 确定目标用户
著名的美国设计理论学家维克多·帕帕奈克（Victor Papanek）认为，设计是为构建有意义的秩序而付出的有意识的、直觉上的努力
他认为设计有两个步骤。
第一步：理解用户的期望、需要、动机，并理解业务、技术和行业上的需求与限制。
第二步：将这些知道的东西转化为对产品的规划（或者产品本身），使产品的形式、内容和行为变得有用、能用、令人向往，并且在经济和技术上可行。
目标用户是产品主要服务的群体
处于不同发展阶段的产品，可以使用不同方法确定产品的目标用户：
对于已经处于成熟期的产品，可以通过分析用户的属性和行为数据，得到目标用户的画像；
对于处于拓展期的产品，需要进行市场调研、竞品分析，根据公司策略明确产品的目标用户人群；
对于从无到有的产品，一方面有赖于产品经理对于产品的定位和嗅觉，捕捉潜在用户，满足他们尚未被满足的需求；另一方面也要通过市场调研，分析竞品来确定用户。
2.2 场景思维
2.2.1 什么是场景
场景（Scenario）原是一个戏剧领域的词，意思是“剧情概要“
将设计工作的焦点从“定义系统的操作”转变到“描述什么人将使用该系统去完成其任务”
这是一个伟大的视角转变
“以场景为中心”的概念，则强调要以人的需求为中心，系统和应用程序要去帮助人们满足他们的需求
DOS操作系统需要用户记住各种命令的代码，而苹果计算机的操作系统从用户角度出发进行设计
不用太多的学习，就能掌握绝大多数操作
2.2.2 描述场景的公式
场景=特定类型的用户（Who）在某时间（When），某地点（Where），周围出现了某些事物时（With What），萌发了某种需求（Desire），会想到通过某种手段（Method）来满足需求。
设计机会点
2.2.3 场景的分类
用户场景和硬件场景
用户场景
客观场景还原用户的真实生活片段，重点用于发现用户的问题；
目标场景描述用户如何使用公司的产品来解决遇到的问题；
实际场景用于对用户进行测试，验证用户是否能够顺利地完成操作，是否能够使用设计方案解决问题。
设计方案主要服务于主要场景，兼顾次要场景和极端场景。
- 主要场景
服务于产品目标用户中的主要人物模型，即App的主要使用者
需要保证其可以轻易找到所需功能，并轻松使用
- 次要场景
是小众需求，设计方案需要保证用户在想要使用的时候，即使多点击几次，只要找到即可
- 极端场景
服务于第一次来到页面、页面尚没有内容、页面网络连接不好或者页面状态改变时的情况
考虑了主次场景之后，是否考虑极端场景是考验设计方案是否缜密完整的一个重要方面
首次使用时的新手引导
首次使用时没有数据的情况
页面无响应、无网络，大量数据，网络慢，是否有缓存，数据过期，状态的改变（如换城市）等。
硬件场景
各种硬件设备层出不穷，硬件本身的特点也都各不相同，这就需要设计师在设计的时候把硬件的特点考虑在内
2.3 用户场景地图
用户体验地图
用户体验地图是一种梳理体验问题的设计工具。它是用可视化的形式，将用户在经历一个过程中的主要体验都表现出来，并将用户的所做、所思、所感都分别展现，以便设计师更全面地了解产品带给用户的体验，以发掘可以优化的地方。
用户场景地图
用户场景地图是指设计师使用场景思维，将用户经历某个过程的场景用类似用户体验地图的思维进行排查，从中发掘设计机会点。
第3章 渐入佳境—心智模型和习惯
3.1 心智模型
3.1.1 什么是心智模型
一个人对世界的理解
3.1.2 心智模型与表现模型
所谓表现模型，库伯解释说，它是“设计师所选择的一种表现方式，用来向用户展现计算机程序有怎样的功能”。
通俗点说，就是设计师提供一套设计方案，让用户可以容易地操作一个设备或App，而根本不需要弄懂它的工作原理是什么。
设计师方案里使用的表现模型，越接近用户的心智模型，则越容易被用户接受
一个优秀的设计方案需要达到以下四项标准
①恰当的吸引力：功能入口的吸引力程度与功能的重要性成正比。
②容易理解：用户一看便知按钮、元素等的状态和可能的操作方法。
③正确的表现模型：设计师需提供给用户一个正确的概念模型，使操作键钮的设计与操作结果保持一致。
④反馈：用户能够接收到有关操作结果的完整的、持续的反馈信息。
3.1.3 心智模型的概括方法
唐纳德· A. 诺曼的定义中，心智模型包含两个关键要素：经验和期望。
瑞士心理学家皮亚杰认为：人的认知结构的发展存在同化、顺应和平衡化三个过程
同化就是把环境因素纳入人们已有的认知当中，以加强和丰富原有认知的过程，简单来说就是老经验指导新情况；
顺应是指认知结构因为受到外界刺激的影响而发生改变的情况，也就是新经验改变老经验；
平衡化是指同化和顺应是一个动态平衡的过程。
3.2 用户习惯
（1）用户单手持手机操作时，底部区域更易操作，因此应该将重要的按钮放在页面底部。
（2）扩大按钮操作区域。有时为了视觉的美观，页面中的按钮尺寸不能设计得太大。但按钮的可操作区域却是可以扩大的。这样可以大大方便用户的点击。
（3）如果设计师需要设计一个PC端的网页，请注意图片永远比文字更能吸引用户的注意。
第4章 驾轻就熟—设计目标面面观
4.1 什么是设计目标
设计的目的是满足需要
2025-04-28 09:11:06 不一定是为了方便用户使用，也可能为了其它目的故意增加使用难度。
圆纸卷卫生纸再设计，改造成了方形，希望用户在使用时可以降低资源消耗，传递出节省的信息。
设计目标是对设计方案要达到的期望效果的总结。
在设计刚开始时，首先确立设计目标，可以让设计师在设计的时候更有针对性，做到有的放矢，事半功倍。
具体到互联网产品的交互设计，设计目标是通过综合产品目标和用户目标得出的。
4.1.1 产品目标
产品目标是从业务的角度出发，根据业务需求归纳得出的对需求的期望效果。
产品目标通常表现为“某个功能可以为App的某个数据带来提升”这样的形式。
作为交互设计师，在接到需求后，一定要分析透彻产品目标是什么。 因为产品目标从一个方面决定了设计方案的方向。
在互联网公司中，产品需求主要来源于三种团队：产品经理、设计师和用户研究员。
针对三种不同来源的产品需求，如何得出产品目标。
（1）由产品经理提出的需求
阿里巴巴提出的“五导家设计法”中“挖掘业务本质需求”的方法。
该套方法提供了4个方向的基本问题，设计师可以通过这4个方向的问题，逐步了解需求的各个方面，并从中总结出需求的产品目标。
理清需求的4个方面：
①为什么会产生这样的需求？需求是怎么发现的？要解决怎样的问题？目标是什么？
②业务方针对目标提出的（产品）解决方案是什么？具体是怎么想的？是否还有想要解决的问题没想好方案的？
③该业务经验性的特点有哪些？是否有数据或报告？产品/品类特色是什么？何种内容转化率高、点击率高？
④业务后续规划的蓝图是怎样的？
深挖需求的5个方面：
①定位的主要目标用户群体是谁?选取得是否合理?为他们带来的核心价值是什么?为公司带来的核心价值是什么?
②整个业务流程是怎样的?盈利模式是什么?
③市场/行业情况怎么样?未来的趋势呢?
④竞争对手是谁?我们跟竞争对手相比核心竞争力在哪里?
5核心策略方向是否真的有效?发力重点是否合理?
（2）由设计师提出的需求
在实际工作中应用较少，是由设计师通过分析数据、总结用户反馈等方式提出。
（3）由用户研究员提出的需求
用户研究员在了解用户需求方面有很多针对性的方法，专业的用户研究员会根据研究目标选择相应的方法，以获得真实的用户想法。
常用的用户研究方法有用户访谈、问卷调查等。
在得出产品目标后，下一步需要找到用户使用产品时的目标。
一个好的交互方案永远是设计师在平衡产品目标和用户目标之后得到的。
4.1.2 用户目标
用户目标是设计师对用户在使用某个功能时，其希望满足的需要的总结。
用户目标是从用户的角度思考使用某个功能可以带来哪些收益。
确定用户目标的方法是从功能的场景出发，明确用户有何种需要。
亨利·福特（Henry Ford）曾说过：“如果我最初问消费者他们想要什么，他们会告诉我‘要一匹更快的马!’。”
在汽车还不普及的年代，消费者不知道汽车的存在，只知道马。
但“更快的马”这个需求，更深层的需求是更快的交通工具，再深层一点的需求是更快地到达目的地。
4.2 为什么需要设计目标
4.2.1 设计时有的放矢
4.2.2 更容易得到团队和用户的认可
4.2.3 设计效果更容易验证
4.3 案例分析——如何确定设计目标
一个理财产品的续约需求
分别分析需求的产品目标和用户目标，然后将它们综合
第5章 取长补短—竞品分析有方法
5.1 为什么要做竞品分析
分析各种方案的利弊，从中获得灵感，为设计师设计自己的方案打下基础
5.2 竞品分析的维度
确定竞品分析的维度，是从设计目标出发，思考自己的产品希望通过怎样的方式去吸引用户，让用户更愿意使用你的产品，而不是竞品的。
5.3 如何选择竞品
一条原则是看竞品是否有设计师当前项目所涉及的功能
设计师在选择竞品的时候，一定要以功能为基准，而不是单纯地以竞品是什么类型的App为基准。
5.4 竞品分析的方法
最常用的竞品分析的方法有流程走查法、表格法和借鉴法3种。
5.4.1 流程走查法
研究一个竞品的时候，建议按照入口、主要页面、操作、反馈的顺序来进行，即设计师需要根据普通用户日常使用这款产品的路径，对竞品进行走查。
一个功能完整的流程，包含了“发现→了解→操作→跟进”四个主要阶段。这个流程的万能公式。
网易严选App，下单的入口有“立即购买”和“加入购物车”。立即购买”背景是浅灰色的，而“加入购物车”是红色的，更加明显。显然网易严选App的设计者希望用户更多点击“加入购物车”。
京东App上，下单的入口只有“加入购物车“，体现了京东App对于购物车概念的重视—京东App的设计者希望用户都是去购物车结算。
5.4.2 表格法
表格法主要指用表格统计竞品中某个功能特性的有无，从而知晓某个功能的普遍程度，对市面上的产品有一个更整体的把握。
有两种表格可供使用：
一种表格是对比不同竞品的相同页面中，各种元素的有无。
另一种表格是对页面中元素的状态、行为进行分析对比。
5.4.3 借鉴法
借鉴法比较简单，就是找到竞品中值得借鉴的部分，分析原因，然后说明如何借鉴。
第三篇 原型制作
第6章 略有小成—设计流程有公式
6.1 如何画流程图
流程图可以清晰地表现出用户完成一个任务所要经历的各种步骤和操作。
6.1.1 画流程图的原则
流程图主要由三种元素组成：页面、动作、条件
以起点作为开始
流程图不展示内部算法逻辑，只展示用户界面逻辑
不要把操作步骤和界面都表现出来，应该只表达界面
6.1.2 画流程图的工具
Axure …
6.2 设计流程的万能公式
发现→了解→操作→跟进
淘宝App
用户发现了感兴趣的商品
了解商品
“操作”，如购买、加购物车、收藏
购买该商品，那么“跟进”这一步，会是查看物流、评价等步骤
把商品加入购物车，那么“跟进”就是查看购物车
收藏了商品，那么“跟进”就是查看收藏
流程中的“操作”这一步，需要设计师带着“如果……不……”的心态
发现很多可以做条件判断的地方
6.2.1 发现
（1）恰当的吸引力
功能的入口要符合这个功能的重要性，不能比更重要的功能更显眼，也不能太低调，以至于没人会注意到
（2）清楚的含义表达
Facebook，将用户最近拍的照片都展示出来，只要选择某张现成的照片，就可以发动态信息，因此促进了用户发动态信息的行为
2025-05-07 09:39:52 减少了操作步骤
6.2.2 了解
（1）运用接近性原则
接近性原则就是人们倾向于将彼此在位置上接近的物体归为一类。
（2）保证文案表意准确、清晰
一个界面中，除了图形元素，文字也是重要的“视觉元素”
（3）主次分明
重要的信息在视觉上更明显，一般通过加大尺寸、加粗、使用更显眼的颜色等方法就可以做到
（4）保证元素的可预见性
用户看到一件物品，或者一个界面，不用学习就知道如何使用
不用思考（without thought）
6.2.3 操作
4项要点：注意用户习惯、尽量缩短操作路径、注意遵循一致性、合理使用设计规范控件
6.2.4 跟进
设计师主要的任务是让用户知道在进行了操作之后，如何查看到后续的结果。
第7章 心领神会—设计原则有遵循
7.1 一致性
一致性原则就是相同的功能在不同的页面，需要保证相同的或者类似的交互操作体验，从而保证体验符合用户预期。
产品满足一致性，是为了保障让设计方案符合用户的预期，降低学习成本。
7.1.1 一致性原则对于用户的作用
（1）在设计方案中，应用一致性原则有利于用户对界面和功能操作的认知统一，学习成本低。
让用户有了稳定的预期，降低了学习成本
（2）加强对产品品牌的辨识度
在设计中不断使用与公司品牌相一致的设计，加深产品品牌对用户的印象
7.1.2 一致性原则对于产品的作用
（1）复用资源，降低设计成本。
（2）保证不同设计师方案的一致。
（3）新人可以快速上手。
（4）提高开发速度。
7.1.3 一致性原则的运用
界面排版
交互控件
多终端的体验
文案
7.2 容错性
容错性是产品对用户错误操作的承载性能，即用户对产品操作时出现错误的概率和错误出现后得到解决的概率和效率。
7.2.1 操作前的预防
在用户进行操作之前，告诉用户一些有价值的提示，可以有效避免用户犯错，提高用户的操作效率。
微信登录页面，在输入账号和密码之前，“登录”按钮是不可点击的
买火车票选择日期时，不能选择当日日期之前的日期
7.2.2 操作中的提醒
当用户正在进行操作，在还没有完成操作、造成结果的时候，软件可以对用户进行预提醒。
用户在支付宝App的聊天界面输入数字244，界面中会自动出现“给对方转账244元”的提醒
7.2.3 操作后的解决办法
当用户已经完成了操作，但是操作之后出现了错误，这时软件需要提供给用户弥补的方法。
经典的“Ctrl+Z”组合键操作，允许用户退回到上一步
网页版Gmail里，当用户删除了邮件，提示用户已经完成删除，同时提供了“撤销”按钮，允许用户反悔
另一种弥补的办法，是为出现的问题提供解决方案。
淘宝App，当网络不好或无网络的时候，页面无法展现内容，此时页面提示用户“别紧张，试试看刷新页面~”，这样温柔的提示让用户感受到温暖。
7.3 使用正确的意符
7.3.1 意符的概念
唐纳德· A. 诺曼在《设计心理学》中提出的概念，他指出：“‘意符指的是能告诉人们正确操作方式的任何可感知的标记或声音。”
一个优良的设计方案中使用的意符，一定是让用户看到就知道，点击了这里能做什么；
反过来，如果用户看到了却不会使用或者使用后经常发生错误，就不是好设计。
设计师在进行方案设计时，一定要注意页面上的元素是否能表达出它本来该有的意思。
7.3.2 注意文案的运用
（1）清晰表达信息
Airbnb网站的案例。当用户首次登录后，会展现提醒用户打开通知的页面。
标题“打开通知？”介绍了这个页面的主要意图；下面的说明文字解释了打开通知带来的好处；
第一个按钮“好的，打开吧”，是模拟了用户答应请求后的语气；
而“跳过”则表达了一种“我现在不想打开”的意思，为后续再次提醒用户打开通知做了铺垫。
使用“跳过”这样的文案，比使用“拒绝”或“不用了”之类含有否定意思的文案要好得多。
（2）展现产品个性
要展现一个产品的个性，不仅仅可以通过界面中的视觉元素展现，例如颜色、图标、排版风格等，而且通过文案也可以很好地展现。
尤其是现在越来越流行的语音交互设计，文案的风格更是展现产品个性的最重要的一方面。
7.4 即时反馈
给予用户即时反馈，指的是系统在用户进行操作后应立即给予操作结果的展示
提供即时反馈是重要的交互原则，但反馈也不是越多越好。过多的反馈会打扰用户的使用。
投票案例：每个选手的下方有个投票按钮，每个用户每天只能投给一个选手一票
为了表达出“不能再投票了”的状态，将所有按钮置灰，页面中有很多被置灰的按钮，这个页面看起来不是很友好
投票页面，在投完票之后，用户已经选择了一位选手，此时用户最关心的是“我是否已经投票”了。如果对这个活动比较感兴趣，用户还可能想要了解一下投票的排名，以及浏览一下都有哪些选手参与了投票。
改进后的方案，在用户点击投票之后，首先指明了用户投的是哪位选手、现在该选手共有多少票、排名是多少，后续的页面展示了票数的排名，从而避免了满屏都是置灰按钮的情况。
7.5 通用设计原则
（1）对齐
对齐的种类主要有三种：左对齐、右对齐、居中对齐。
要选择尽可能少的对齐方式，对齐的方式多，页面会更乱，就达不到使页面整洁的效果了。
（2）分类
分类的原则是指将相关的项目组织在一起，并且把不同的类别用留白区隔开。
（3）主次分明
将页面中重要的信息提取出来，并使用加大字号、加粗、区隔等形式予以加强，可以有效地将页面信息表现的更清楚。
第8章 融会贯通—设计规范有标准
8.1 提示框
8.1.1 Material Design设计规范
谷歌公司
注意，提示栏不能包含使其消失的“取消”（DISMISS）按钮！
不能与悬浮按钮重叠
不能同时出现两个提示栏
8.1.2 iOS设计规范
与提示框对应的是透明指示层（HUD）
iOS规范中的透明指示层与Material Design规范中的提示框有以下4项区别。
①透明指示层出现在屏幕的中央，提示框出现在底部。②透明指示层可以有图标，提示框不能有图标，只能用文字。③透明指示层一般是毛玻璃透明，提示框一般是灰黑或者黑色半透明。④透明指示层中内容可以变化（如调节音量时），提示框中内容不可变化。
iOS设计规范提到：潜移默化地将状态改变或者其他类型的反馈放进用户的界面中。理想的情况是：用户可以不用进行操作或者被打扰，就能得知重要的信息。
iOS“不操作、不打扰”的原则
短信App，用户进行删除操作之后，短信就消失了，这时候就不需要再弹出提示框提示“已删除“
8.2 警告框
两种系统中，它们有以下两个共同点
（1）都出现在页面的中央且自带蒙层
（2）警告框的选项通常是两个，且应避免“是/否”这样的选项，选项应明确告知用户操作的结果。
8.2.1 Material Design设计规范
警告框是一种紧急的打扰（提示），以告知用户一项发生了的情况。
警告框和之前提到的提示栏都是在用户进行操作之后出现的提示框
警告框可以看作是操作的确认，可以理解为操作的“最后一步”，只有当用户点击了“确认”按钮，这个操作才算是真正完成
提示栏是当用户真正操作完了之后才出现的提示信息，其信息的重要程度比警告框要低
Material Design设计规范把警告框分成两种：有标题的和没有标题的
认为大多数的警告框应该都是没有标题的，用一两句话描述一个询问决定的文案
①使用疑问句，例如，“删除这个对话？”。
②文案与警告框中的按钮文案要相关联。
有标题的警告框，Material Design设计规范提出，“只在高风险的操作时使用”
标题的写法需注意以下两点。
①尽量使用询问操作的疑问句，例如，“清除USB存储内容？”。
②避免使用不包含操作信息或其他有价值信息的问句，例如，“警告！”“你确定吗？”。
8.2.2 iOS设计规范
警告框包含的元素：标题（必选）、描述信息（可选）、输入框（可选）、按钮（必选）
① 尽量少使用警告框
② 确保警告框在竖屏、横屏条件下都显示正常。
（1）标题和描述信息
标题要尽量简洁，字越少越好。标题可以考虑使用疑问句或者简短的陈述句
尽量避免显得“指责”“审判”和“羞辱
避免使用“你”“你的”“我”“我的”这样的文案，有时候它们会被理解为高傲的或者带有羞辱意味
（2）按钮
①通常情况下，使用两个按钮
②按钮的文案建议使用能够描述操作结果的文案，避免使用“是/否”这样的文案
③一般来说，警告框左边放“取消”按钮，右边放用户最可能点击的按钮，左边表达取消操作的按钮都叫作“取消“
④iPhone的Home键自带取消警告框功能
8.3 底部模态浮层
在Material Design设计规范中，是模态底板（Modal Bottom Sheet）；在iOS设计规范中，是上拉菜单（Action Sheets）和活动视图（Activity Views）。
8.3.1 Material Design设计规范
底板分为两种：模态底板和固定底板
Material Design设计规范中提到了四种关闭模态底板的方法：点击系统返回键、向下拖动、点击底板以外区域、点击关闭按钮
8.3.2 iOS设计规范
（1）上拉菜单
上拉菜单是当用户激发一个操作的时候出现的浮层
（2）活动视图
活动视图可以是从底部出现的浮层，也可以是从按钮处展现的弹出框（Popover）
8.4 底部固定浮层
8.4.1 Material Design设计规范
固定底板的状态是固定的，与App界面在同一层级；而模态底板的状态是临时的，其层级位于App界面之上
如果两种底板同时出现，模态底板是高于固定底板的，应该压在固定底板上。
8.4.2 iOS设计规范
关于工具栏，iOS规范给出了以下几个需要注意的事项
①提供（与当前页面）相关的操作选项。工具栏应该提供当前的页面下常用的操作
②考虑使用图标还是文字来表示操作按钮。如果操作的按钮多于3个，使用图标；如果等于或少于3个，则文字有时能更清楚地表达操作
③避免使用分段控件（Segmented Control）。分段控件让用户可以切换不同的页面
④为文字操作按钮提供足够的空间
8.5 简易菜单、简易对话框和弹出框
简易菜单对应的是Material Design设计规范中的Simple Menu；
简易对话框对应的是Material Design设计规范中的Simple Dialog；
弹出框对应的是iOS设计规范中的Popover。
8.6 确认弹框和全屏弹框
（1）确认弹框
需要用户明确地选择一个选项的弹窗
弹框里只专注选择一个值
（2）全屏弹框
全屏弹框承载了一组任务
表达“保存”含义的按钮最好使用动词，如“保存、发送、分享、更新、创建”等
8.7 模态
模态让用户聚焦到某一个任务、消息或者视图上而不能做别的事情，直到用户完成了当前的任务。
一般来说，模态视图包括一个“完成”按钮和“取消”按钮。
8.8 弹出类控件对比总结
8.9 搜索
8.9.1 Material Design设计规范
“搜索使用户可以迅速定位App里的内容。”这是搜索功能的核心。
一般的搜索操作应该至少包含以下3个要素。①打开搜索输入框。②输入和提交搜索词。③展示搜索结果。
帮助用户提高搜索的体验。①语音搜索。②搜索历史。③搜索词自动补充
当开始输入关键词时，最好有关键词自动补充，还要有清空按钮
可展开式入口其实和固定式入口差不多，区别仅仅是入口形式上的不同
8.9.2 iOS设计规范
（1）如果有必要，可在搜索栏中提供一些提示和上下文
（2）考虑在搜索栏下方提供快速入口和其他内容，以帮助用户更快找到结果
（3）在搜索栏的下面，可加入“分段选择控件”，以帮助用户缩小搜索的范围
8.10 滑动器
8.10.1 Material Design设计规范
连续式滑动器
分离式滑动器
8.10.2 iOS设计规范
iOS设计规范中定义：滑动器只有水平的
8.11 按钮
8.11.1 Material Design设计规范
按钮主要有以下五种：扁平按钮、凸起按钮、底部常驻按钮、下拉菜单按钮和开关按钮
- 扁平按钮
把文字用作按钮
用法：扁平按钮一般用在警告框中，推荐居右对齐。一般右边放操作性的按钮，左边放取消按钮
用在卡片中，扁平按钮一般居左对齐，以增加按钮的曝光
- 凸起按钮
起到强调按钮本身的作用
底部常驻按钮
下拉菜单按钮
开关按钮
8.11.2 iOS设计规范
三种按钮：系统按钮、信息按钮和添加联系人按钮。
- 系统按钮
单纯使用一个词作为一个按钮
①使用动词
②尽量使动词简短。
③只在必要的情况下增加边框或者背景色
信息按钮
添加联系人按钮
8.12 标签导航和分段控件
8.12.1 Material Design设计规范
信息架构
标签导航一般用于从一个比较高的层级来组织信息，呈现出提纲挈领的效果。
内容
一个标签里的所有内容应该属于一个大分类（如“设置”或“音乐”），并且标签之间内容不能有重叠。
使用
标签有两种。一种是固定标签，适用于标签数量比较少的情况。
另一种是可滑动标签，适用于标签数量比较多的情况。
通常，建议标签在以下的情况下使用：
①需要经常切换视图；
②App包含的视图比较少；
③App提供的几个视图都比较重要。
8.12.2 iOS设计规范
分段控件通常用来作为不同视图的入口
例如在地图App里，分段控件可以让用户在“地图”“公交”和“卫星”等视图间切换
iOS设计规范给出了以下4项要点。
①限制分段选项的数目，以提高可用性
②尽量保证每个分段选项里的内容的尺寸是一致的
③在一个分段选项里，避免同时使用文案和图片
④如果用户定制了一个分段控件的外观，那么需确保内容的位置是恰当的
8.13 底部导航栏
8.13.1 Material Design设计规范
底部导航栏可以允许用户通过点击一下，就在不同页面间进行方便的切换。
- 用法
底部导航栏主要是为手机的导航设计的
底部导航栏主要用于以下两种情况。
①3~5个同等重要的页面间切换
②需要在App里方便地对页面进行切换
- 样式
①当某个选项是被选中状态，则展示该选项的图标和文字。
②如果只有3个选项，则一直展示所有选项的图标和文字；如果有4~5个选项，则被选中的选项展示图标和文字，未被选中的只展示图标
- 行为
当用户选择点击某个选项时，应该直接展现相应的页面，或者刷新当前的页面
8.13.2 iOS设计规范
（1）如果底部导航栏中的某个选项暂时不可用，不要把该选项置灰。在不可用而又点击了的情况下，页面只要展示这个页面为什么没有内容就可以了。
（2）避免使用过多的选项
（3）可以使用角标来提示信息数量
8.14 抽屉导航
抽屉导航是Material Design设计规范中独有的导航方式，适用于App中某些功能比较突出，而其他的功能不太突出的场景（不太突出的功能都可以塞到抽屉导航栏中）。
抽屉导航栏从屏幕最左边向右出现，占据屏幕100%的高度
8.15 手势
8.15.1 Material Design设计规范
按住水平滑动、按住上下滑动
8.15.2 iOS设计规范
边缘滑动手势起到了全局操作的作用
从屏幕左边缘向右滑动，可以返回上一级页面
从底部边缘向上滑动，可以滑出控制栏；从顶部边缘向下滑动，可以滑出消息/控制中心浮层
手势能表现执行的操作效果
8.16 导航设计总结
8.16.1 Material Design设计规范
如何确定一个App的导航结构
制作任务清单
找出App的用户是谁，以及他们的角色是什么，找出那些他们都想执行的、最普遍的任务
确定优先级
给用户的任务分出高、中、低的优先级。在UI界面中，给那些用户经常使用或者优先级高的功能以更突出的设计。
分组和排序
找出用户在App中操作的所有流程路径，并通过研究这些路径确定导航设计。
拆解
将复杂、大型或者模糊的用户任务分解成更小的用户任务。
8.16.2 iOS设计规范
1.层级导航
在每一级页面只选一个入口，直到用户到达他们的目标页面。
2.扁平导航
扁平导航允许用户在多个内容分类之间切换
3.内容驱动或体验驱动导航
该种导航允许用户在内容间自由地切换，或者内容本身就定义了导航
第9章 登峰造极—原型制作有技巧
9.1 什么是交互原型
交互原型分为静态原型和动态原型
静态原型有两种工具可供使用：Axure和Sketch
Axure可以使用站点地图来组织页面，所以比较适合大型的、有多个页面的方案
Sketch制作原型文件效率高，输出文件为PDF格式，适合小型的、功能单一的方案
动态原型，推荐使用苹果公司出品的Principle软件
还有一个在线的动态交互稿制作网站—Flinto
9.2 交互原型的作用
静态交互原型的本质是一种沟通工具，主要用于团队内部协作，其作用是传达需求
①产品经理主要关注设计方案是否满足业务和用户需求
②视觉设计师需要知道产品定位是怎样的，有哪些页面要设计，页面间的跳转是怎样的，各页面各元素包括什么状态
③开发人员需要知道，产品要实现多少功能，有多少页面，页面间是怎么跳转的，异常情况如何处理，哪里需要动效，动效的效果是怎样的，页面的运行规则
④测试人员需要参考交互原型梳理测试用例，测试用例需覆盖所有功能、使用场景、操作行为、产品细节，保证上线无bug或少bug状态。
9.3 交互原型的制作
9.3.1 项目概述
在交互原型的第1页，可以加上“项目概述”这个主题，主要展示该需求的基本信息和迭代说明
9.3.2 方案展示
交互原型中必须包含以下信息。
①功能的完整流程。
②界面及界面中的元素展现需求的所有功能点。
③界面中元素的各种状态说明，包含界面中元素的默认状态说明、操作说明等。
④元素操作后的效果。
⑤异常、极限状态说明，主要包含无响应、无网络、网络切换、空数据、字符限制、网络慢、数据过期、拉取数据失败、页面不存在、页面状态的改变（如换城市）、首次使用（新手引导）等。
绘制高质量的交互原型，有以下6点建议。
①同一页面的不同状态最好在一个页面展示（不要忽略极端情况）。
②页面之间要对齐，左右排列的页面顶端对齐，上下排列的页面左对齐。
③界面绝大多数元素均使用黑、白、灰，界面色值不超过3种。越深的部分代表这个部分越重要。特殊情况下需要强调某个元素，则可以使用彩色。
④界面中的控件，应遵守第8章中介绍的iOS和Material Design设计规范。规范的控件会提升交互原型的专业度。
⑤界面中的图标，可以去iconfont官网寻找合适的图标进行示意。如果不使用具体的图标，可以使用圆形、方形来代表“这里需要一个图标”。千万不要使用绘制粗糙的图标，这会降低交互原型的质量
⑥如果是为手机App绘制交互原型，则可以使用i Phone 8标准下的2倍图尺寸，即750px×1334px；如果是为计算机网页绘制交互原型，则可以使用宽度为1920px的分辨率，然后考虑在更小的界面下应该如何呈现。
9.3.3 设计分析
可以在交互原型中加入设计分析的部分
设计分析里只需要放入最核心的信息即可，包括：场景分析、产品目标、用户目标
第10章 出神入化—可用性测试见真章
10.1 可用性测试介绍
可用性测试又称易用性测试
是用户体验研究中最常用的一种方法，侧重于观察用户使用产品的行为过程，关注用户与产品的交互，是更偏重于行为观察的研究
10.2 正式的可用性测试
分为7步：测试前的思考→制作测试原型→撰写测试脚本→招募测试者→设置测试环境→预测试和正式测试→测试结果统计分析
10.2.1 测试前的思考
此次测试的目标
10.2.2 制作测试原型
10.2.3 撰写测试脚本
测试脚本的意义是把整个测试流程提前写下来，以保证第6步“预测试和正式测试”可以顺利、高效的运行
10.2.4 招募测试者
招募5~8名测试者比较合适。这个数字是人机交互专家雅各布·尼尔森提出的
测试5个用户就可以发现大约85%的可用性问题，性价比最高
10.2.5 设置测试环境
设置测试环境的目标是让被测试者在测试时感到舒服、不紧张，从而可以得到更真实的测试结果
10.2.6 预测试和正式测试
预测试的过程是找两位不知情的同事，预先进行一遍完整的测试过程，然后总结过程中关于测试本身的问题，以便对测试过程进行优化。
10.2.7 测试结果统计分析
测试完成之后，有一项比较繁重的工作：将录制的视频或者音频转换成文字稿
10.2.8 可用性测试报告
在通过以上7个步骤收获了许多结论之后，设计师就可以开始撰写可用性测试报告，报告一般包含3部分内容：背景介绍、测试方法、测试结果。
10.3 敏捷的可用性测试
正式可用性测试流程，由于耗时较长，一般用于设计大改版的情况
敏捷的可用性测试就成为操作性更强、更迅速有效的验证方法。
10.3.1 媒介即信息
加拿大传播学家马歇尔·麦克卢汉
有个著名的理论：媒介即信息。
主要内容是，传播信息的设备本身也是一种信息
纸质书、电子书或说书人念出来的有声书，这三种方式传达给读者的信息量是不同的
方案为哪种类型的设备而设计，就一定要尽量在相应的设备上进行测试。
10.3.2 设计师自测
当设计师把方案转移到真实设备上之后，就可以开始自测了。自测时，主要依据第6章讲过的设计流程的万能公式的4个步骤进行，依次查看每一步是否完整。
- 发现
①功能的入口位置、显著程度、展现形式是否恰当。②是否需要新手引导。③从A页面/状态到B页面/状态的过渡。④点击瞬间（网络问题、动效、频繁点击）。⑤载入中（网络问题、载入时间、可否取消）。⑥过场动画。
- 了解
①由于网络问题无法加载。②没有内容。③大量内容（如微信群聊中有许多条旧消息）。④内容获取失败。⑤数据过期。⑥缓存内容。⑦状态改变导致内容改变（如来到新的城市）。⑧加载动效。
- 操作
①网络问题无法加载。②从A页面/状态到B页面/状态的过渡。③操作前默认提示。④操作异常状态（如格式错误）。⑤操作后反馈。⑥操作失败情况（需要提供提示和解决办法）。
4．跟进
是否展示清楚哪里可以跟进。
10.3.3 寻找用户进行敏捷测试
- 注意选择测试对象
测试的用户对产品了解越少越好
- 注意测试时的提问方式
避免给被测试者带来引导
第11章 超凡入圣—人人羡慕作品集
11.1 核心原则
- 展现设计思路
用户体验之间取得平衡
项目介绍、目标用户定义、场景分析、设计目标定义、竞品分析、流程图（简单需求可省略）、交互方案、方案效果（通过数据/用户反馈来说明）。
设计师用来发现问题的常用方法有：可用性测试、用户体验地图、用户访谈、数据分析等
只展现最好的作品
展现不同方面的作品
11.2 作品集示例
- 项目介绍
包含项目背景、设计师职责和需求介绍
目标用户和场景
设计目标
优化点展示
竞品分析
流程图和交互方案
方案效果
说明方案效果最有效的方式，是从数据的角度说明方案上线后数据上涨了多少
第12章 返璞归真—活出自己最优秀
12.1 勤于总结归纳
对于大型需求，设计师在做完之后就可以进行复盘整理；
对于小需求，建议设计师每周或每两周总结这些需求的设计思路，并用PPT的形式沉淀下来，待需求上线，及时补充好方案的数据效果
12.2收集优秀案例
设计师在平时收集优秀的和有缺陷的设计案例，是很有效的设计提升方式
12.3 为自己而工作
珍视自己付出的时间
同一份时间，既出售给了公司，拿到了薪水，也出售给了自己，获得了成长
