本章学习主题——让页面布局更优雅（PS：这章的大饼老师挺逗的）

1.视觉心理学

1.1为什么需要视觉心理学

• 掌握用户观察和思考的规则来设计（日常生活中一些糟糕的用户体验）
• 构建用户体验和使用场景也需要视觉界面来实现
• 产品想要想传达给用户的情感和产品定位，需要明晰视觉来表现

Paste_Image.png

1.2 利用视觉心理学设计页面

• 接近性：利用间距来判断彼此之间的关系，空间上的亲近暗示关系上的亲近。
• 相似性：如果其他因素相同，相似的物体看起来归属一组。
• 封闭性：人们倾向于将缺损的轮廓加以补充使成为一个完整的封闭图形。
• 连续性：凡具有连续性或者共同运动方向的物体容易被看做一个整体。

Paste_Image.png

• 对称性： 根据视觉元素的重量不同 来实现视觉平衡，依靠视觉重量不平衡来引导用户的视觉流

Paste_Image.png

（利用页面元素的重量去引导用户的视线流）

• 情感化：明确情感需求，并准确的传递给视觉设计师，帮助营造网站整体氛围，

Paste_Image.png

2.五步熟练掌握页面排版

Paste_Image.png

2.1 确定页面任务目标

2.1.1 如何判断一个页面的优劣

• 有用；易用；好用：满足用户需求，架构、流程清晰，减少用户理解和操作成本，友好还充满情感化能吸引用户
  一个案例：支付宝通过使用半遮罩的全新设计，减少页面跳转，营造一种当前页面的体验，提高了用户的付款率

Paste_Image.png

2.2 信息元素的组织分类

卡片分类：“可能是”信息组织分类最好的方法，应用场景在信息架构，导航设计以及页面设计中。

• 卡片分类的逻辑：现实生活的映射
• 卡片分类的应用：页面排版
  如何把用户的需求转化为产品的功能，一个经典案例，福特汽车在问用户需要什么的时候，民众说他们需要“一匹更快的马”然而等到福特做出来T型车之后，整个市场为之疯狂。实际上用户不是需要更快的马，而是需要更快的速度。

网易严选设计案例来说明：
1.整理用户需求并转换为功能点》2.整理产品需求并转换为功能点》3.功能点的组织分类

Paste_Image.png

2.3 对组块进行排版布局

清晰的视觉引导

• 用户固有的阅读习惯：用户行为热力图，从左往右
• 对角线原则：下图案例大猩猩的视线指向了注册按钮

Paste_Image.png

清晰页面的逻辑关系，突出主要的任务流程

• 格式塔里面关于逻辑关系的应用（点、线、面的应用）

弱化不重要的功能

• 优先级比较低功能，不需要用户第一时间就能够区分出来，减少了认知压力
• 除了视觉上的区分外，也可以通过操作步骤，来有意增加有些任务的的操作难度

删除不必要的信息

• 删除不必要的的功能：删除与用户体验无关的功能，以及那些增加他们挫折感的功能。

隐藏鸡肋or高级功能

• 有些信息并非主要任务流程中必须存在的，但是却有不能删除的“鸡肋”功能
• 普通用户比较少用到的，高级用户才会用到的高阶功能

影响因素

• 操作频率：手指在屏幕上的常用操作区域以及最常使用的功能，如返回上一级
• 距离与面积：费次定律——用户用指点设备到达一个目标的时间与距离和目标大小有关
• 悖论1：面积增加不会带来可用性的持续增加
• 悖论2：距离太近可能引发分组不清、界面混乱、容错低等问题

好用：情感化的体现/人性化

案列——3个产品的IOS权限请求设计

Paste_Image.png

动效

• 交互不在于酷炫，而是体验的一部分，起到情感唤起以及引导的作用。

继续接上一节网易严选的案例：
1.整理用户需求并转换为功能点》2.整理产品需求并转换为功能点》3.功能点的组织分类》4.理清各个功能组块的功能优先级排序》5.利用Axure进行初步的页面设计》6.优化你的原型设计方案使

Paste_Image.png

2.4 权衡平台规范和用户使用习惯

Paste_Image.png

移动端三大平台各自的设计规范，使得我们经常会在产品设计中有如下问题：

• 针对不同平台，我们需要设计几套方案？
• 如果人力有限，能否只设计一套方案？如何设计者一套方案？
• 如何以最低成本来设计两套（安卓&IOS）方案？、
• 除了两套方案外，有没有更好的解决方案？

用易信的例子来说明他们应对这些问题的思路：考虑到成本和市场前景的不确定性，初创时期产品1.0时期可使用多平台统一的设计方案并且调用较多的系统控件来快速推出产品以及验证市场 。产品2.0时期，市场前景明晰资源逐渐到位，在产品定位与功能调整之后，并借鉴竞品动态（如微信已经区分两端设计），开始采用严格遵守IOS以及安卓两端设计。

Hybrid APP化解Native 与WEB（H5)的设计之争

• Native APP: 原生程序，一般依托于操作系统，有很强的交互，是一个完整的APP，可拓展性强，需要用户下载安装。
• WEB（H5) APP： 依托于H5技术，生成在浏览器的应用，不需要下载安装，能够实现跨平台跨终端。优点是开发成本低，部署方便，设计规范宽泛，用户也无需手动更新。

Paste_Image.png

Paste_Image.png

Hybrid APP设计的注意事项

• 简化 不重要的动画/动效，简化复杂的图形文字样式
• 少用 手势和弹窗
• 减少页面内容、控件数量、页面跳转次数

• 增强 Loading时的趣味性，页面主次关系，控件的复用性

  
  
  Paste_Image.png

2.5 页面排版的设计验证

• 实验为检验，在真实的任务场景中，帮助用户快速完成目标的页面才是好的设计（靠谱的非语言，而是行为）
• 交互专家评估：由几个评价者根据可用性原则和经验来发现系统潜在的可用性问题
• 粗暴的用户测试 ：不拘泥于形势的原型；有针对性的抓取同事进行测试；可以任务走查，也可是AB测试；获取测试结果后优化

3.撰写漂亮的交互设计文档、

3.1 交互设计文档是什么

• 需求确定阶段：具象产品需求，以可视化的页面形式，谈论需求的满足情况
• 交互设计阶段：详细阐述设计方案细节，与上下游谈论方案可行性，确定最终方案。
• 视觉设计阶段：根据交互稿设计出视觉效果图，关注页面布局结构，顺序位置，主次及交互方式等。
• 交互文档的重要性：
• 让相关者明白设计方案以及分工
• 可以作为界面验收时的checklist。
• 确保用户体验一致性和统一性，达到传承传递的作用。

3.2 如何撰写高质量的交互设计文档

• 封面：项目名称版本号，相关人员（产品、交互、UI、开发、测试）
• 目录：用Axure的站点地图来表现，要求结构清晰，命名准确
• 修订记录：持续跟进新的交互文档，记录需求变更的历史，以天为单位清楚记录文档从建立到开发完成的所有修改过程
• 业务流程图：业务逻辑和系统，用流程图展现
• 信息架构：产品信息架构图
• 交互流程图：梳理核心流程的交互过程
• 交互方案：每个页面的具体方案设计，包含流程、页面、交互说明：
  • 一个页面说清楚一个事情；每个任务都要有起点；同一个页面的不同状态，在一个页面展示清楚
  • 页面布局规范，准确传递设计方案；尽量黑白灰，避免视觉干扰
  • 交互说明需要阐述交互规则以及逻辑关系；交互迭代要有所标示；点击后的交互反馈；动效说明；需要UI特别注意的特别标明
• 控件库：常用的组件

3.3 交互设计文档在实际工作重中的应用

• 与产品经理一起明确需求，通过产品经理的制定规则去展示规则；变更需求让大家都能够知道。
• 让UI能合理布局每块元素，不能轻易调整交互设计，局部细节排版可以合作完成
• 让开发能够得知交互细节和交互逻辑详细描述，需求变更前的确定，以及变更后的通知
• 让测试人员撰写测试用例；极端情况说明；严格执行交互文档的说明