《交互设计基础原则》

1995年， “About Face：The Essentials of User Interface Design” 《交互设计精髓》出版，提出“交互设计”一词（Interaction Design）

幻灯片3.jpeg

美的三种模式

幻灯片1.jpeg

公认的

公认的美与基本的设计美学原则有关，
如对称、协调、三分法则和黄金比例。这些是美观设计的传统基础。心理学和进化生物学为这些公认的原则提供了许多解释。我们的视觉系统趋于在事物中组织信息、寻找模式和建立秩序。

文化的

文化的美指的是在某个时刻从某种方面我们发现某种文化的迷人之处。
玛丽莲·梦露是世界上最有名的人物之一。不过，如果她现在还活着，她会不会成为美的典范就很难说了。在网上，思考点在于不同时代流行于不同群体间的各种文体风格。

主观的

主观的美就是你个人觉得对象具有美， 这与你个人的品味和偏好有关。
也许你觉得Quora的斯巴达美学很对你的胃口，或者也许你觉得相当无趣。

业界标榜

幻灯片5.jpeg 幻灯片6.jpeg 幻灯片7.jpeg 幻灯片8.jpeg

交互设计所涉及的学科

心理学、社会学、人机工程、用户体验等
以价值为中心的设计

1. 诱惑，被吸引而心动，不仅仅是审美选择
2. 同理心：能够体会到他人所想的能力
3. 现代产品：功用性、可行性 、称许性，缺一不可
4. 设计方案应该具备四个特点：
   1. 合乎伦理（有用、贴心）
      • 不造成伤害
      • 改善人类环境
   2. 目标明确（有用、可用）
      • 帮助用户实现目标和期望
      • 符合用户场景和能力水平
   3. 实用（切实可行）
      • 帮助设计机构实现目标
      • 满足商业和技术需求
   4. 优雅（高效、艺术性、能打动人）
      • 代表最简单而完整的方案
      • 内在一致性（自我表现、可理解的）
      • 恰当顺应、调动认知与情感

法则

幻灯片4.jpeg

1. Fitts’ Law / 菲茨定律（费茨法则）
2. Hick’s Law / 席克定律（希克法则）
3. 神奇数字 7±2 法则
4. The Law Of Proximity 接近法则
5. Tesler’s Law 泰思勒定律（复杂性守恒定律）
6. 新乡重夫：防错原则
7. Occam’s Razor 奥卡姆剃刀原理（简单有效原理）
   1. Fitts’ Law / 菲茨定律（费茨法则）
      • 定律内容：从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（上图中的 D与 W），用数学公式表达为时间 T = a + b log2(D/W+1)。
      • 1954 年保罗.菲茨首先提出来的，用来预测从任意一点到目标中心位置所需时间的数学模型，在人机交互（HCI）和设计领域的影响却最为广泛和深远。 新的 Windows 8 中由开始菜单到开始屏幕的转变背后也可以看作是该定律的应用。
      • 菲茨定律的启示：
      • 按钮等可点击对象需要合理的大小尺寸
      • 屏幕的边和角很适合放置像菜单栏和按钮这样的元素，因为边角是巨大的目标，它们无限高或无限宽，你不可能用鼠标超过它们。即不管你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。
      • 出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快，因为不需要移动到屏幕的其他位置。
   2. Hick’s Law / 席克定律（希克法则）
      • 定律内容：一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。用数学公式表达为反应时间 T=a+b log2（n）。在人机交互中界面中选项越多，意味着用户做出决定的时间越长。例如比起 2 个菜单，每个菜单有 5 项，用户会更快得从有 10 项的 1 个菜单中做出选择。
      • 席克定律多应用于软件/网站界面的菜单及子菜单的设计中，在移动设备中也比较适用。
   3. 神奇数字 7±2 法则
      • 1956 年乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似，神奇数字 7±2 法则也经常被应用在移动应用交互设计上，如应用的选项卡不会超过 5 个，如iOS的标签栏图标个数。
   4. The Law Of Proximity 接近法则
      • 根据格式塔（Gestalt）心理学：当对象离得太近的时候，意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框，因此当相互靠近的功能块是不相关的话，就说明交互设计可能是有问题的。
   5. Tesler’s Law 泰思勒定律（复杂性守恒定律）

    - 该定律认为每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。如对于邮箱的设计，收件人地址是不能再简化的，而对于发件人却可以通过客户端的集成来转移它的复杂性。
   

   6. 新乡重夫：防错原则
      • 防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的，但在交互设计也十分适用。如在硬件设计上的 USB 插槽；而在界面交互设计中也是可以经常看到，如当使用条件没有满足时，常常通过使功能失效来表示（一般按钮会变为灰色无法点击），以避免勿按。
      • 如评论功能快，在留言框没有内容或邮箱格式不正确的时候是无法获取验证码的，只有两者都满足了才可以。
   7. Occam’s Razor 奥卡姆剃刀原理（简单有效原理）
      • 这个原理被称为“如无必要，勿增实体”，即如有两个功能相等的设计，那么选择最简单的。除非是用户真的需要，否则不要添加功能和交互。
      • 如与费茨定律接近的 Steering Law转向定律、Gutenberg Diagram古登堡图法则

8.帕累托定律（80/20 原则）
9.三等分原则等
（2/3的值接近于黄金分割点）

设计源于生活

饮水思源、联想生活的转换。如抽屉——菜单。

幻灯片13.jpeg

要知道标准规范在哪里，什么样才是好，什么是差的，这是本文的目的。

• 移动终端的屏幕小。App的一个页面能展示的信息本来就非常有限，不可能像PC一样堆满各种不同的信息。况且，App的使用环境还非常不稳定，如走路、坐车、单手、双手等，这些进一步限制了一个App页面只能做一件事情。
• 参考以下思路
  • 删除隐藏
  • 确定主要任务和次要任务，排序优先级
  • 满足主流的中级用户，他们是重点，不能为了某个极客的行为就去开发一个功能

1. 删除那些可有可无的功能、多余的选项、冗余的文字、花哨的修饰，可以减轻用户的负担，让用户专心做自己想做的事。界面清清爽爽、简简单单，不去分散用户的注意力
2. 隐藏的功能在用户需要的时候会出现在合适的位置。例如使用支付宝转账到卡，默认隐藏了到账时间，以简化页面。当用户填好卡号等信息的时候会自动出现到账时间（ 如Adobe软件工具栏的小三角）
3. 其它措施
   • 1秒钟等待
   • 转移注意力
   • 减少客户端和服务端发生数据调用的场景
   • 一次点击
   • 三级跳

等待时间

1. 外面的世界很精彩，用户不想等
2. 许多研究表明，超过8秒，无法忍受

幻灯片15.jpeg

3. 界限点0.1秒、1秒、8秒，研究超过8秒钟用户离你而去
4. 如YouTube先加载框，后文字，最后图像，减轻等待的负面情绪
5. 生活中亦是，如饭店中，等待排队，店家为客户提供小吃、休闲游戏
6. 在交互中可以应用一些小动画，如财产类产品中的数字金额的小动画，减少等待的焦虑情绪

方便快捷，提升可用性

幻灯片14.jpeg

要记住：懒，是人的天性。

交互设计师的天职就是将用户从繁重的交互操作中拯救出来，提升产品的可用性，让用户方便快捷地完成任务。在交互设计中，应尽可能地减少额外的点击，做到一键完成任务。一次点击意在减少用户操作次数，提高操作效率，成全人类“懒”的天性。
交互产品经常包括一些不必要的额外点击，对于用户而言，这些不必要的操作都是附加工作。附加工作消耗用户的精力，又不能直接实现用户的目标。消除附加工作，可以提升操作效率，改善产品的可用性。交互设计师只有对产品中附加工作高度敏感，才能把产品设计得更高效。
PC有全局导航和面包屑导航，这些跳转可能都不是问题。但是在手机屏幕上是没有这些导航的，只有左上角的返回，这就完全交代不清楚了。所以，在手机应用页面之间的跳转不能太多。
标签栏、抽屉式、宫格式、列表式、轮播式、唤起式，
移动设计里的导航模式就这几种，都是比较简单的结构和模式。如果在移动设计里面设计了太深的信息架构，一会让用户迷惑，二会大大降低操作效率。所以，移动设计中常用的内容应该在3个层级以内看到
手机上能不跳转就不跳转，用户不离开当前页面，如模态对话框

基础规范

幻灯片21.jpeg

1. 从设计原则着手，制订框架，定设计标准，如螺丝的生产，有了标准后，品控就保障了
2. 有控件的视觉设计源文件
   • 保证页面基础元素、框架的一致
   • 难定义点，某些页面的弹框出现方式不一样
   • 什么时候应该用小气泡，什么时候该用弹框
3. 对页面中通用交互规则进行定义
   • 打造一致的操作体验
   • 降低用户的学习成本
   • 最大限度地复用系统原生的交互规则
   • 这套规范进一步保障了重要元素的交互行为和视觉样式的一致性
4. 交互规范和视觉规范都是死的，设计是活的
   • 团队要有一致的设计价值观
   • 知道什么样的设计是好的
   • 什么样的设计是不好的
   • 一个代表团队设计价值观的东西——设计原则应运而生
   • 遵循标准，用于指导设计和衡量设计方案的优劣

好的规范需要执行

规范如果没有人使用，那就是一堆文档。
当然，为了保障产品整体的体验，我们可以采用行政手段，强制要求团队成员阅读并且遵守规范文档。这全靠每个人的记忆力和自觉性，并不能很好地达到我们想要的效果。因为每个人对同一个东西的理解和执行度都是不一样的。
强制的方法不好，我们就得换一个角度，从每个人的利益出发，让大家都乐意使用规范。
这个利益点就是“效率”，我们要::让规范帮助大家提升工作效率、沟通效率。::
规范是死的，设计是活的。
设计文档和标准控件是死的，设计思想是活的。
标准化建设的过程中一定要把握好这个平衡，不能让规范制约了创新。建立团队统一的设计价值观，界定一个好的设计框架，让设计师在一致的范围里创造是设计规范的价值所在。所以，设计原则、规范理论基础等的提炼和建设在规范体系里应该得到我们的重视。
不要“戴着镣铐跳舞”
规范文档&UIKit

幻灯片16.jpeg

规范文档是最全的文档，里面详细阐述了设计原则、基础规范，以及每个控件的样式和使用规则。
这部分文档需要设计师阅读并且理解里面的规则。
UIKit则是控件样式的集合，提供和维护最新的样式源文件。工作中只需要复制和拖动，不必重复绘制和单独设计，节省了大家的时间。

开发基础控件库

幻灯片12.jpeg

建立开发的基础控件库，让各个开发都可以直接调用和配置参数，这是规范和标准化执行的终极环节。
- 开发基础控件库
建立开发的基础控件库，让各个开发都可以直接调用和配置参数，这是规范和标准化执行的终极环节。
- 适时反馈

幻灯片18.jpeg

- 适度反馈

幻灯片19.jpeg
- 情感关怀 幻灯片20.jpeg

Siri很好的体现了三点：

幻灯片17.jpeg

• 界面中展示的信息是系统向用户传递信息，用户的操作是在向系统传递信息，这一来一往就是对话
• 营造和谐的人机对话，是我们提出人性化原则的目的

• 当成生活中一个可以对话的助手

  
  幻灯片13.jpeg

人与人的交流中，对话要有反应，尊重人。程序应及时恰当的反馈能告诉用户下一步该做什么，帮助用户做出判断和决定

• 为用户的操作提供必要、积极、即时的反馈
• 根据内容的重要程度选择合适的反馈形式
• 避免过渡反馈，以免给用户带来不必要的打扰
• 不要打断用户的意识流，避免遮挡用户可能回去查看或操作的对象
• 对话框
  • 对话框
    带有一两句说明文字和两个操作按钮，用于确认和取消重要操作（比如，是否删除内容），通常会用明显的颜色，突出显示可能造成损失的操作项（比如，“删除”“不保存”）。对话框的出现，强迫用户关注弹窗内容和操作，并屏蔽背景的所有内容不可操作，是对用户打扰最大的反馈提示，也是最强的反馈方式。通常用户都想赶快关掉对话框，以便接着完成被打断的操作。所以，对话框中的文案要尽量言简意赅，帮助用户快速了解和做出决策
  • 气泡
    也可以叫“Toast”，是一种弱化版的对话框。它就像气泡一样，在界面上展示短暂的时间（5秒以下），然后自动消失。它不强制用户做任何操作和确认，所以对用户的打扰比对话框小很多。气泡一般用来确认用户执行的任务状态或者
  • 按钮
    是虚拟世界隐喻现实世界的产物，是对现实世界的按钮和开关的模拟。而现实世界中的按钮会对用户的操作提供实实在在的物理反馈。
    为了符合用户的心智模式，界面中的按钮也应该为用户的操作提供反馈，否则用户不知道发生了什么。当用户在屏幕上按下一个按钮或链接时，也需要有状态的改变，让用户知道界面已经接收到他的操作了
    • 小气泡
    • 多态按钮
    • 动画
      • 动画能给用户提供有意义的反馈，帮助用户直观了解操作的结果。并且不打扰用户的操作，用户体验更流畅。而且精美有趣的动画，能给用户留下深刻印象，提升使用时的愉悦感。
      • 手机购物时将商品收入购物车时的动画
  • 声音或震动
    • 声音或震动能带给用户更真实的物理反馈。声音或震动的反馈给用户的感觉也应该是最真实和自然的。
      • 虚拟键盘“啪啪”声
      • 短信、邮件“嗖”声
      • 拍照时“咔嚓”声
    • 恰当的声音反馈有画龙点睛的效果，但过多地使用可能会变成一种打扰。所以，我们不能将声音作为主要反馈，并且要给用户关闭提示音的权利（因为用户所处的环境多样，可能很吵而听不见声音，也可能不适合打开声音）。
    • 震动是一种更强烈的触觉反馈，可以用来加强声音的反馈。
  • 过度反馈
    • 滥用，反而打扰了用户的体验流程，体验糟糕
    • 情感是人对客观事物是否满足自己的需要而产生的态度体验。——《心理学大辞典》
      人性和情感是紧密相连、不可分割的，我们在思考人性化的时候，一定不能忘了用户的情感需求。用户的需求和期望得到满足时会产生愉快、喜爱的情感；反之，就会苦恼、厌恶。所以，当用户受挫的时候，我们要及时地给予情感上的安抚和关怀；
  • 安抚和关怀
  • 正向强化
  • 智能服务
    等待、报错、系统繁忙等场景都会使用户产生挫败感。长时间的等待会让用户感到烦躁；犯错误让用户感到苦恼；系统繁忙甚至让用户感到厌恶。巧妙地处理好这些场景，降低用户的挫败感，就能体现设计在产品中的价值。
    赋予系统人格特征，用能俗易懂的语言和虔诚的口吻，跟用户展开“人与人”之间的对话。
    强化正向情体验，让用户有喜悦感，加深产品的正向情感，强化自我认同感。
    一些信息，系统可以用户记住，不需要用户二次输入，提升操作效率。
    如输入银行卡号，系统自动判断是哪家银行。

品牌意识

反映品牌个性与共性，从而建立品牌知名度、美誉度、忠诚度及品牌联想度。

幻灯片22.jpeg
处理好设计元素之间完美配合，才能达到理想的效果。
品牌色在界面设计中的使用应同时具备品牌识别性以及界面设计功能性，色彩的运用应达到信息传递、动作指引、交互反馈，或是强化和凸显某一个元素的目的。
人们的大脑记忆过程主要分为3个阶段：识记、保存、重现。在实际设计中，我们可以利用这一特点，更好地传达品牌的视觉感知。

1. 极简主义（MinimaIism）
   • 设计从功能出发
   • 形式以满足功能而存在，没有功能性的修饰全部去掉
   • 感官上简约整洁，品位和思想上更为优雅
   • 极简主义设计时，
   • 颜色
   • 字体及大小
   • 线条
   • icon风格
   • 留白

留白是一门想象的艺术。没有过多的元素去干扰，用户更容易拥有想象的空间去发挥。为了让页面饱满而去做一些没意义的信息补充是不可取的方式，留白也是有讲究的。

移动端通过视觉感官来增强品牌色的引用主要有3种途径
1.当前选中项
2.主操作按钮
3.操作类文案信息

字体

幻灯片25.jpeg

字体如果做个性设计，会产生3个方面的影响：

1. 增加了App的安装包的大小

2. 用户在使用该App时，增加额外的学习和适用成本

3. 个性字体与系统字体没有统一性
   建议大家采用系统字体做设计方案的产出。下面介绍一下大家经常接触的两大系统字体及属性。

4. iOS

   • 2015开发者大会，苹方字体，其字体具有现代感的外观、清晰易读的屏幕显示效果，并同时支持简体中文（PingFangSC）、繁体中文（PingFangTC）、香港中文（PingFangHK），苹果公司还是很注重中国人的用户体验

5. Android

   • 2011年4.0版本，Ice Cream Sandwich发布以来，Roboto就是Android系统的默认英文及数字体。宽度和圆度都轻微提高，从而提升了清晰度，并且看起来让人更加愉悦。

进阶知识
思源宋体：是 Google 的一个开放原始码自由字型专桉，与 Adobe 公司合作，旨在提供一个可以涵盖 Unicode 全部字符的多语言、全方位字型，用「Noto」这名称来代表「No more Tofu（没有豆腐）」，试图消灭电脑中无法显示罕见文字时的那些空白方块（豆腐形状）。

字号的大小也会降低可读性和易读性，
设计师应站在用户角度去思考，
他们在阅读时是否会觉得困难？如果你无法确定，可以多进行一些测试和对比。
在做设计时，可能我们能顺利读懂内容，对于大部分的用户来说却是很困难的事情。
有目的地进行层次结构划分是非常重要的步骤。
在设计领域，层次涉及的是一些表示重要度的视觉元素排列。
要通过规模、颜色、类型等，将一些重要元素和不重要的元素类型区分开来。
不同的元素在设计中表现不同的重要性。

中文字在国际GB 2312—1980（汉字国际码）中采用全角字符，输入中文时，所使用标点同时应采用全角字符。这样就与中文字占的字节数保持一致，展示出来的中文字与标点所占的间距保持统一。

幻灯片27.jpeg 幻灯片28.jpeg

半角

• 英文

• 数字
  特殊字符采用半角输入模式，其内容所使用的标点也采用半角标点。

  
  幻灯片28.jpeg

“空格”是键盘里最大的一个按键。
如何把“空格”应用到实际的设计中，下3点经验：
1. 中英文混排时中文与英文之间加半角空格，方便用户在阅读时进行区分
2. 数字与单位之间需要增加空格，方便用户精确查阅数字（财务类软件中，用户对数字非常关注，数字等同于金额）。但度、百分比与数字之间无须增加空格
3. 中文之间链接文字需增加空格。在技术上实现链接时，可增大可点区域，同时给用户传递可点击感

根据消息的强弱进行消息通知的设计。
强消息通知
可以使用客户端推送，用户可以在手机屏幕或者手机的通知栏预览到内容。用户可以通过通知的新消息直达到详情页面或通知列表。用户未读的信息可以标记出未读数字。
弱消息通知
可以在用户打开应用后，在内容层上统一提示，告诉共有××条新消息。点击后可查看所有消息内容。

幻灯片29.jpeg

iOS

• 在设计过程中，采用默认的字行高产出设计稿，但在视觉验收阶段，却发现技术开发的页面与设计稿不一致。例如：文字与图片的间距、文字与文字间距、文字与边框间距等都不同。
• 解决此类问题其实很简单，文字行高采用与技术开发对等的参数产出设计稿 幻灯片30.jpeg

Y=2×ceiI（X/10）+X式中：X 为字号（sketch里的字号）; Y为行高；ceiI（）为向上取整数 

• 此公式方便我们在产出设计稿时，按照文字大小，对应地设置文字行高，便可以确保设计稿与技术开发的页面中的文字行高一致了。
  Android
• Android由于各机型的字体不同，字体库对手机厂商的开放，文字行高就很难找统一的规则。在实际产出设计稿时，采用字体Droid Sans FaIIback、Roboto，文字行高为系统默认，不做设置

风格

幻灯片23.jpeg

图标风格
使用图标网格可确保图标设计的一致性，从而建立一套明确的图形元素定位规则。
关键线的形状
关键线的形状是网格的基础。利用这些核心形状作为向导，即可使整个相关产品的图标保持一致的视觉比例。
产品图标
色彩鲜明，精致，传递产品的核心理念与内涵。
一致性的原则要求，系统中同样功能的元素、控件、界面应该在样式、交互行为上都保持一致。
控件以及组件的标准
建立控件以及组件的标准，整个规范才能完整地发挥作用。

- 系统层
- 框架层
- 临时层
- 内容层

系统层——完全调用系统原生的控件和组件，不做任何额外的定义和设计。所有产品和页面都应该是一致的，最大限度符合系统特性，随着系统更新变化而变化。系统层包括状态栏、系统通知、控制控件、系统键盘、手势
框架层——用于组织页面信息，并且起到导航作用的控件。这部分控件在符合系统体验原则的基础上，应该反映支付宝的品牌特点。所以框架层需要根据支付宝自身的特点定制和开发，但是它在内部应该是一致的。这部分控件包括导航栏、Tab栏、分段控件、工具栏
临时层——页面中临时出现的浮层和内容，在调整符合系统交互特性的基础上，样式根据特点定制和开发。内部需要保持体验的一致性。临时层包括活动视图、活动菜单、POP菜单、弹框、Toast、选择器、临时公告等
内容层——页面中剩下的内容，跟页面内容的特点相关，每个页面可能都不同，是设计师发挥空间最大的部分。但是一些具有共性的控件，如列表项、按钮、输入框等可以抽离出来，做成标准化

一个基本思路如下：

1. 选择一种尺寸作为设计和开发基准
2. 定义一套适配规则，自动适配剩下尺寸
3. 特殊适配效果给出设计效果

幻灯片33.jpeg

第一步：
视觉设计阶段，按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。
第二步：
输出两个交付物给开发工程师：一个是程序用到的@3X切图资源，另一个是宽度750px的设计标注
图。
第三步：
开发拿到750px标注图和@3X切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其他尺寸。
第四步：
适配调试阶段，基于iPhone 6的界面效果，分别向上、向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。
由此完成大、中、小三屏适配。
iOS
第一步：
视觉设计阶段，按宽度1080px做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在1080px的设计稿上做标注，输出标注图。同时等比放大4/3倍生成宽度1440px的设计稿，在1440px的稿子里切图。
第二步：
输出两个交付物给开发工程师：一个是程序用到的@4X切图资源，另一个是宽度1080px的设计标注图。
第三步：
开发工程师拿到1080px标注图和@4X切图资源，完成1080px的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其他宽度尺寸。
第四步：
适配调试阶段，基于1080px的界面效果，分别向上、向下调试1440px和720px及以下的界面效果。由此完成大、中、小三屏适配。
Android
这套适配规则总结起来就是：文字流式，控件弹性，图片等比缩放，适配系数。
- 文字流式：
在不同的设备上，文字大小不变，文字显示的区域产生变化。通常iOS5的文字显示区域更长，一行可以展示更多的文字。
- 控件弹性：
navigation、cell、bar等适配过程中垂直方向上高度不变、水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示越多的内容，发挥大屏幕的优势，如图44所示。
- 图片等比缩放：
当涉及插图、banner等位图时，这些图片在不同设备中根据屏幕大小等比缩放，保证不变形，
- 适配系数：
同屏幕密度的适配，如6、5、4s，用到前面3个规则就可以了；跨屏幕密度的适配，如6+、6、3Gs，需要用一个适配系数进行换算以后再用前面3个规则
- 特殊适配：
有些界面通过以上规则进行适配以后，可能并不能达到设计师理想的效果。这时候需要对这个页面做各个屏幕的设计稿，进行特殊适配。为了更好地展示效果，工作量成倍地增长。

排版

人们的阅读习惯一般是从左到右，人的两眼是横着排列的，眼睛视线横看比竖看要宽，横看时眼和头部转动较小，自然省力，不易疲劳。
在实际的文字排版中，中文或英文均可以采用左对齐的方式。
数字通常采用右对齐或小数点对齐，便于对个、十、百、千位上的数字进行对比。3个数字以上，使用千分符作为分隔，便于用户识别。
左对齐类型是最常见的形式，是指将每行文字的首字左对齐，与此同时，右侧则呈现出错位的效果。这是最容易被接受并且不太会出错的方案，如果拿捏不定，不妨选择左对齐。该类排列方式在结构上与人们的阅读习惯相符，因而能使读者在浏览时觉得轻松与自然。
右对齐类型是比较有自我风格的一种对齐形式，是指将每行文字尾字右对齐排列，而左侧则呈现出参差不齐的状态。左对齐和右对齐是两组完全对立的排列方式，它们在结构与形式上都各具特色。由于右对齐排列有违人们的阅读习惯，因此该类排列在视觉上总会带给人以不顺遂的印象，但同时也为版面增添了几分新颖的效果。右对齐用在平面排版以及一些装饰类的设计上比较多。不建议大篇幅的文本采取右对齐排版方式，因为右对齐在大篇幅的文章中很难起到良好的引导作用，也容易使文章的折行不自然。
居中的文本形式，是指版面中的文字要素以画面的中心线为参照物，将段落与画面的中心进行重合式排列。居中对齐拥有简洁的排列结构，它也是版式设计中较常见的一种文字编排手法，
海报、请柬、品牌推广使用居中对齐的频率比较高。居中类型的文本可以很容易地平衡内容，并且显得比较美观。然而，并不建议对大篇幅的文本类型采用居中对齐的排版形式。
许多正文以左右均齐的方式进行排版，版面表现出整齐、干净的视觉效果。相关图片分别放置在文案的左右两侧，使版面更加具有平衡感。

在业务中，为了方便用户更好地浏览，绝大多数都是左对齐。

通识性问题

1．时间
- 制定时间规范
根据产品设计需求，在前期根据场景规划时间显示规则，如格式是“2016-3-16”还是“2016/03/16”等。用在列表页面、详情页面还是会话页面都要提前规范好。
- 不同场景下时间格式的选择
用户对于时间的感知根据场景的不同会有很大的差异。
平时问“什么时候开周会”，会回答“周三”。
问“什么时候提交报告”，会回答“3月20日”。
从对话的场景中可以看出我们对时间维度的区分。因此在对时间进行设计时，一定是根据使用场景来进行时间的设计。
- 有效/失效时间
消息、卡券、红包等都会有时效性，有的时效对用户来说是有生效期的，与生效期相对的是失效期。
内容失效后需要处理，可能由清除或者其他功能来支持。
有的内容是没有生效期的，但是它会变成历史内容，历史内容与现有的内容需要进行一定的区分。
2．数量
规范数量规则时，需考虑以下问题：

• 是否为零，为零时应该显示还是隐藏？
• 刷新是否影响数字变化？
• 数字是否会减少，当数字减少为零时是否有反馈或界面变化？

适时友好反馈

（1）即时反馈
当用户操作后，若有需要反馈的信息，在操作后立刻给出，反馈的区域不能距用户的操作区域太远，否则就会被忽略。
如果是非阻塞式的反馈，那反馈的方式要轻，不要因反馈而干扰用户当前的任务，对用户造成困扰。
（2）反馈效果
所有的点击都要有明确的反馈状态，点击后会出现一系列的状态变化。如有的按钮只可以被点击一次，用户点击后首先按钮状态会改变，其次会产生一个与点击相关的操作结果反馈。

• 点击状态
• 发送状态
  按钮点击状态包括开始、结束、不可点、失效、已领完、已过期等
  发送状态分两种：
  一是发送后需要较长时间返回结果的，此时发送后直接到结果页面，结果页面上显示当前进度和最终结果及其时间；
  二是发送后较短时间就返回结果的，此时发送后到过渡页面，有几秒的等待时间，然后跳转到最终结果页面。
• 输入
• 音效
  （1）减少输入
  在移动端输入的成本比较高，可以通过表单、选项卡、默认填入值来减少输入。
  在社交会话中则可以通过更多的语音、图片、视频来减少输入，让用户沟通得更轻松。
  （2）输入限制
  在内容不确定多寡的输入框内，可以采用暗文或数字的方式来帮助用户确认当前的输入内容有没有超过限制。
  输入的内容一定要做长度限制，因为不只是在输入过程中会遇到显示的问题，在发布后也会有显示问题。
  （3）中断时保存内容
  移动环境不稳定，经常会出现中断退出的情况。
  当遇到异常情况时，可以保存用户在中断前输入的内容，待环境稳定后用户可以继续操作。
  __应用音效需要考虑其大小，配合操作使用时是否有延迟。特别需要考虑用户当前的使用场景出现声音是否合适。 __

设计，专注目标

::设计，就是设计生活，设计人生。::
需要用感性的右脑加理性的左脑去分析问题、解决问题，
::让设计、生活、人生变得更加美好。::
面向目标的设计”方法。如果设计师专注于人们的目标（即人们一开始使用一种产品的原因），以及期望、态度、天 资，就能设计出让人用起来既有效又愉快的解决方案。
人有许多特征，让自己变得体贴。人们或多或少地也将这些特征赋予了具有交互性质的产品，
体贴的交互性质的软件产品/(和人）所具有的特点：

1. 关心用户喜好
2. 是恭顺的
3. 乐于助人的
4. 具有常识
5. 有判断力
6. 预见需求
7. 尽责的
8. 不会因为自己的问题增加你的负担
9. 会及时通知我们
10. 是敏锐的
11. 是自信的
12. 不问过多的问题
13. 即使失败也不失风度
14. 知道什么时候调整规则
15. 承担责任
16. 能够帮助你避免犯低级错误

检查机制

幻灯片40.jpeg

设计走查表

• 场景可能包含了移动App使用的软件系统、硬件载体、移动环境下的网络状态以及App实现的技术框架、版本兼容、使用时间、地点等内容。这些场景中遇到的问题是我们设计走查表里的核心骨架。

    - 网络特性
  

网络环境对移动应用设计有较大的影响，如快速启动、合理缓存、弱网环境、中断/超时，都与网络状态密不可分。通过设计策略可以避免网络环境的各种状态对用户体验造成的影响。

1. 快速启动
   应用在启动时需要一个加载时间，为避免用户在等待时间感到枯燥、乏味，
   可采用以下3种方式。
   （1）让用户感知到应用的启动速度比较快
   使用一张与应用相同的图片，在用户点击应用时，这张图片就显示出来，用户会认为这个时候应用已启动，虽然用户会在启动页面停留几秒，但是会觉得应用加载速度比较快。
   （2）作为一个产品品牌展示区
   启动页面展示的是产品的广告语，如支付宝的“我有我的方式”或者如犀牛的故事“犀牛故事，在故事里相遇”。
   （3）作为一个广告展示区
   启动页面可以是产品代言人或者某个时间段的活动。如手机淘宝就经常会有这样的启动页面。

2. 合理缓存
   ●页面合理缓存可以让用户感受到应用的速度更快，不浪费流量。但是缓存不能过量，不能任何页面内容都做缓存，那哪些页面需要做缓存呢？一般应用首页有比较固定的内容时需要做缓存或已有内容的页面不需要全页面加载，可以先展示较旧的内容然后加载出较新的内容。相比每次进入都重新加载，缓存会让用户有更好的体验。

3. 弱网环境

    （1）弱网环境下加载失败
   

网络环境不稳定容易导致加载失败，加载时间控制在8秒内（8秒是用户最长的等待时间，用户在等待8秒左右时开始感到不耐烦并且想离开当前页面），并且尽可能地采用有趣的加载来降低用户的等待时间，加载失败后，要给予用户重试的机会，并且告知加载失败的原因。

    （2）弱网环境下内容展示不全

弱网环境下可能只能显示部分内容，经常遇到的情况是文字内容显示，而图片无法加载出来，只出现占位图或者是空白图片，图9所示为2016年新春红包出现的占位图。

    （3）弱网无网状态下数据传输/设置生效机制

如果网络环境不稳定或者断网，但用户需要将内容发布出去，可以支持用户本地发出去，本地可见。当有网络请求时，再将内容上传到服务端，并且让其他用户可见。这样可以有效提升用户体验，让用户不受网络环境的限制。如美拍可以在断网的环境下缓存视频，当有网络时可以手动将视频上传上去。Facebook自动检测网络，有网络后立即上传失败内容的设计

4. 中断、超时
   ●在网络中断时，帮助用户保存当前的输入内容或者浏览内容，当重新连接到网络时用户可以继续当前的任务。若超时则给用户提示，让用户停止等待，重新请求网络或退出。
   ○页面状态
   ○可以用生命周期来描述一个页面的状态。用户进入这个页面，首先会看到页面的初始化；阅读内容的过程中会涉及页面的刷新、加载；当同时访问页面的用户数量过多时，页面内容会被限流，用户会在不同的时间进入页面查看内容；当前页面内容可能过了某个时间节点会失效，用户不能再访问；当一个新用户进入这个页面，可能当前的页面内容为空。页面的这些状态需要设计师提前考虑并提出解决方案。
5. 页面初始化
   启动应用进入首页时，可以在启动过程中预加载首页内容，让用户快速进入且有内容可预览。页面初始化需要配合加载策略进行。
6. 页面刷新
   通过刷新可以更新当前页面的数据。一般情况下采用用户手动下拉刷新，下拉刷新不需要对整体页面进行刷新，只需要拉取最新的状态，显示出来即可。但是如果当前页面涉及一些数字的提醒或通知，则不需要刷新也可以展示给用户，当用户点击查看时触发刷新，则将页面内容更新到最新的状态。
7. 页面加载
   （1）分步加载
   分步加载是全页面加载的一种方式，为了尽快地显示页面内容，可先加载文字内容，再加载图片等内容。让用户在网速不够快的情况下可以尽快预览到内容。这种加载方式通常应用在用户首次进入页面时。
   （2）懒加载
   懒加载也称为延迟加载，即在需要的时候才加载，这种加载效率低，但占用内存小。一般在页面浏览过程中加载新内容时采用这种方式进行加载。
   （3）智能加载
   第一种策略是在产品中增加网络判断的机制，如果在弱网环境下，提前压缩图片并显示小图片，使其能尽量展示预览出的内容，点击小图，可查看大图。最好是可以让用户点击未加载的内容后继续加载，不需要重新刷新页面（只针对客户端页面）。第二种策略是降低图片视频质量，点击后可以加载高清图片或者点击播放视频选择高清模式。而在网络环境不佳的情况下，则默认帮助用户降低质量，减少流量的耗损。
8. 页面内容被限流
   一般产品页面是不会遇到限流的问题的，只有在活动页面可能因为访问量太大而遇到限流。如在支付宝的春晚发红包过程中，预测到活动中人流量会比较大，我们提前设计了限流页面，让用户有较好的体验。
9. 页面内容为空
   一般与用户相关的页面可能为空，如我的动态、评论等。这些页面为空时不能不显示，但可以在显示上用调皮一点的文案避免空页面显得过于枯燥。
10. 页面内容失效
    一般固定入口不会有页面失效的状态。非固定入口的页面失效后，可以将入口下掉或者在用户进入后重新刷新出可用内容。页面内也需要考虑信息的时效性、延时、过期等问题。
    页面流程完整性
    除了用抽象的流程图来确保流程的完整性，设计师还可以通过快速回到首页/主要页面、让用户始终知道自己在哪儿、返回到原来的浏览位置、任务完成后跳转这几项设计原则来确保完整性上的体验。
    ■快速回到首页/主要页面
    用户不管在应用的什么地方，都可以快速返回到首页/主要页面。这要求我们在搭建整体信息架构的时候，结构足够扁平。并且所有的页面流程都必须形成一个有效的闭环。
    ■让用户始终知道自己在哪儿
    通过页面标题来让用户确认当前的位置。
    通过页面之间跳转的转场动效让用户确认当前的位置。
    用户可以沿原路返回。
    返回到原来的浏览位置
    明确任何一个可点击的去向，且去向是可返回的。返回问题连带定位，从哪里去返回到哪里。特殊路径需要定制，可能会出现连跳几个页面的情况，在验收过程中需要重点注意。
    ■任务完成后跳转
    任务成功后，页面跳转后可返回到来源页面。
    任务失败后，需提示当前状态，并引导用户如何查看最新的状态。在有新结果时，通知用户。

硬件特性

硬件特性从制定适配原则、账户在设备上的切换、横竖屏显示效果等方面来描述，看看在设计前期我们需要注意哪些问题。
■制定适配原则
■任何产品都会涉及适配问题。首先是制订native适配方案，如显示的文字或图片的适配。
1）数量不变进行同比放大适配，如图2所示，支付宝首页适配的时候就是进行同比放大，一行数量不变。
2）同行数量增多，图片字号大小不变。
3）避免不规则背景。在图片的适配过程中，若图片底部有不规则花纹，如图3所示，因为要切一张大图，则可能会使红包增大，用户打开加载时也会增加流量的耗费。
■避免不规则背景
4）不同设备适配时遮挡。通常，操作时的适配问题容易被忽略。页面显示的内容在唤起键盘时是否有遮挡的问题，怎样解决遮挡问题？如图4所示，在iPhone4/4s上，无论怎样进行适配，由于页面承载的信息过多，下面的支付渠道（用黄色框框住的地方）仍然显示不全。但在iPhone5/5s、iPhone6/6pIus上则可以通过调整间距使内容显示完整。
■账户在设备上的切换
●同一设备，不同账户切换
切换的新账户若曾经在本设备上登录过，则帮助用户加载展示客户端存储的本地内容，并且标记用户未处理的新信息。在加载的过程中给出明确的加载状态、内容展示。
●不同设备，同一账户iOS切换
同一个账户在不同设备上登录时，先确定该账户是否支持多设备同时登录（多点登录）；如只支持单点登录，则在登录B设备时，A设备的账户自动被挤下线（单点登录的安全限制），并提示用户，设备是在何时何地登录的，所以退出了当前的登录状态，图5所示为支付宝账户在其他设备上登录时出现的提示。
●若支持多点登录，则注意内容的同步，且内容被操作后的状态也需要同步到各个设备上。特别是同时登录时push通知下发及同步，不能让用户操作重复阅读的工作。
●如果设计的产品与优惠、红包等相关，则要判断设备ID，避免用户刷优惠或红包，对产品或活动造成影响。
●横竖屏显示效果
应用是否支持横竖屏显示先确定，如果不支持则锁定竖向或横向的单一方向。如果支持则要在设计的过程中考虑竖屏和横屏两种模式下的显示效果。

 软件特性

软件系统本身是很复杂的，设计师需要掌握一些与设计相关的软件特性来帮助设计，如操作系统特性、制定多平台的设计规范、版本兼容。
操作系统特性
进行新产品规划初期，需要确定新产品覆盖的系统及系统版本号。如iOS系统支持很多手势操作，故iPhone的用户更容易接受手势操作。而Android因为硬件设备的差异比较大，对手势的支持也有较大的差异，因此较为隐藏的手势操作不适合使用。
■制定多平台的设计规范
系统是不断更新和进步的，一个产品如果是多平台设计，需要制定平台规范。比如统一的表单操作、选项卡、浮层提示、加载、刷新等，这些组控件的统一，可以有效地提高产品优化的效率，降低开发成本，同时能保证用户体验的一致性。图7所示为支付宝制定的标签统一规范。
■版本兼容
●版本覆盖时间
版本上线后要确认一下版本在多久的时间范围内可以覆盖80%以上的用户。当新版本的某些功能要配合H5活动时，这个时间显得尤为重要。如果版本没有发布，而活动的时间已经迫在眉睫，那这个活动可能将会面临失败。在跨部门合作过程中，可能因为沟通不到位产生这样的结果。因此当有大型活动进行时，需要全力去配合。
●更新提示强弱
一般来说，用户可以选择不去更新版本继续使用，但是当App产生较大BUG或存在安全隐患时，可通过不可取消更新进行强制升级
●兼容性展示
新版本的内容是可以展示在旧版本上的。用户在低版本客户端的会话页面仍然能收到会话消息提示，点击此消息，可以有效地引导用户更新App。更新后可查看来往的具体会话内容。

愿景

幻灯片42.jpeg

交互不是单个人，单一岗位的事情，需要大家通力协作，产品经理是源头，大家一起走，就有了康庄大道。

幻灯片43.jpeg