网易交互设计师微专业C4 让页面更优雅

如果有需要视频资源的可以关注"AI产品经理人"，回复关键字“网易交互设计微专业”获取下载链接~ 

Chapter4  让页面更优雅

第一章 你需要懂的视觉心理学

1. 为什么要懂视觉心理学？

• 原因1. 运用用户观察和思考的规律来设计界面；
• 原因2. 构建的用户体验和使用场景需要通过视觉界面来实现；
• 原因3. 更好地向视觉设计师传递设计方案；

2. 巧用视觉心理来设计用户界面

Q1 : 为什么搞不清标题和内容的对应关系？

接近性：依据间距来判断彼此间的关系，空间上的亲近暗示关系上的亲近；

Q2 ：看着一样，为什么点击后的反馈不一样？

相似性（同类）：如果其他因素系统，那么相似的物体看起来归属于一组。

Q3：调整了间距，但是分组还是不明显？

封闭性：人们倾向于将缺损的轮廓加以补充使成为一个完整的封闭图形。（点线面分组）

Q4：怎么让用户感觉还有很多？

连续性：凡具有连续性或者共同运动方向的物理容易被看做一个整体；

Q5：整个页面感觉向一边倾斜了，怎样才会舒服些？

对称性：根据视觉元素重量的不同，来营造实现视觉平衡；（根据视觉的重量来引导用户）

Q6：为什么页面的感觉总是不对？

情感化：色彩帮助网站营造网站的整体氛围。需要准确传达情感！

第二章 5步熟练掌握页面排版布局

step1：确定页面的任务目的

明确当前页面用户的任务和目的，以及产品的需求。

衡量页面的标准：

满足用户需求，减少用户的理解和操作成本，还能深深的吸引用户，让这个产品捕获用户的芳心。

• 有用---最重要的衡量标准，用户和产品需求的满足
• 易用---架构清晰/流程清晰/不需思考
• 好用---友好和充满情感化

在评价同一功能不同竞品的好坏时，要从每个竞品的产品目标和定位出发，而不是仅仅评价外观.

案例：

案例：网易严选商品详情页

 

step2：信息元素的组织分类

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

案例：网易严选商品详情页

 

 

step3：对组块进行排版布局

Q1 : 消息太多，产品想展示更多内容，怎么办？

部分设计原则 ：

注：推荐书籍《简约至上 : 交互式设计四策略》 、《情感化设计》

• 清晰的视觉引导--用户固有的阅读习惯；
• 清晰的视觉引导--对角线法则；

• 显示：清晰的页面逻辑关系，突出主要任务流程（格式塔里面关于逻辑关系的应用--点线面）。5分钟了解格式塔原则
• 弱化：一些功能优先级较低，不需要用户第一时间能够区分出来，减少认知压力（eg：微信的登录）；
• 弱化：除了视觉上的区分外，也可以通过增加操作步骤，来有意增加某些任务难度（eg：微信的退出群聊，留住用户）；
• 删除：删除不必要的信息（eg：是否需要输入两次验证码--优化后-->查看明文密码）
• 隐藏：有些信息并非主要任务流程中，必须存在的，但是却又能删除的“鸡肋”（eg：严选的运费详情隐藏）；
• 隐藏：一些高阶功能，普通用户比较少用到，只有高级用户才会用到。
• 影响因素：操作频率（高频率放在拇指易于够到的操作区域）；
• 影响因素：距离与面积（费茨定律：用户使用指点设备到达一个目标的时间同距离D和面积S有关）。5分钟带你了解经典的费茨定律
• 情感化设计：有用、易用、好用；《情感化设计》
• 动效：不在于酷炫，而是体验的一部分。

step4：权衡平台规范和用户的使用习惯

Native APP ：

• 原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强。很稳定。需要用户下载安装使用。
• 语言：Object C （ios）、Java（Android）
• 页面：存放在本地

Web APP（H5）

• 跨平台跨终端，开发成本低，方便部署，无需下载，用户无须手动更新。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。但是会不稳定，数据可能会有延迟。
• 语言：Html
• 页面：存放于服务器

Hybrid混合设计：

• 化解Native 与web（h5）的设计之争
• 页面框架由本地native构成，确保稳定性；
• 页面内容由H5构成，保证迭代的灵活性。

Hybrid App 设计的注意事项：

1. 简化。简化不重要的动画/动效，简化复杂的图形文字样式;
2. 少用。少用手势、少用弹窗;
3. 减少。减少页面内容，减少控件数量，减少页面跳转次数、尽量在当前页面展示;
4. 增强。增强加载时的趣味性，增强页面主次关系，增强控件复用性。

Tips：平台规范是基础，用户的使用习惯是核心，一起规范终究要给用户习惯让步。

是否区分平台设计：

• 是否区分平台设计，需要看当前项目的阶段和项目重点；
• 如果不区分设计，在大框架一致的前提下，尊重平台控件的使用规范；
• 如果采取分别的设计，发挥各自平台最大的潜力，做到极致；
• Hybrid混合设计也许能够从另外一个层面解决跨平台兼容问题。

案例：网易严选商品详情页（网易系产品均很遵守平台规范）

 

 

step5：页面排版的设计验证

真正靠谱的是用户的行为！而不是用户怎么说！

关于借鉴与设计的三个阶段：

• 阶段1：为了借鉴而借鉴；
• 阶段2：为了避免借鉴，而差异化设计；
• 阶段3：为了用户习惯而设计；

常用到的快速验证方法：

• “交互”专家评估

• “粗暴”的用户测试

1. 不拘泥于形式的原型；
2. 有针对性抓取同事进行测试；
3. 可疑人物走查，也可以是AB测试；
4. 获取测试结果后快速优化。

• 其他（很重要但是太慢）：

1.   标准用户测试
2. 线上用户反馈
3. 数据表现  

方案严重的好处：快捷、低成本、额外收获；

第三章 撰写漂亮的交互设计文档

1. 什么是交互设计？

• 需求确定阶段：具象产品需求，以可视化的页面形式，谈论需求的满足情况；
• 交互设计阶段：详细阐述设计方案的细节，用来和上下游讨论方案的可行性，确定最终方案；
• 视觉设计阶段：根据交互稿设计出视觉效果图，关注页面的布局结构，顺序位置，主次与交互方式等；
• 开发阶段：通过交互文档，交互设计师与各端开发确定方案的可实现性，开发人员依据交互文档的实现方式进行开发。
• 测试阶段：严格测试设计方案最终的实现效果，确保产品的质量。

交互文档的重要性：

• 让相关者明白设计方案以及分工；
• 可以作为界面验收时的checklist。
• 确保用户体验一致性和统一性，达到传承传递的作用

交互文档没做好会带来：

• 造成信息不对称，误解方案；
• 给交互设计是自己带来很多不必要的麻烦；
• 产品开发变得混乱；
• 导致整个产品达不到预期、产品失败问题

2. 撰写高质量的交互设计文档

工具：Axure、Sketch、Keynote/PPT；

1)、封面

主要内容：名称、版本、负责人员

2)、目录 

主要内容：即站点地图

3)、修订记录

主要内容：功能变动、时间、超链接

意义：

• 方便各方快速了解更新内容，而无需一页一页的查找，浪费不必要的时间和精力；
• 对交互设计是自己也是一个记录笔记的地方，避免遗忘；
• 当各方意见相左时，修订记录是最好的约定；

4)、需求分析+业务流程图

产品需求文档中也会有业务流程图，但是为了方便开发和测试在一份交互稿里理解业务需求，可以放上

5)、信息架构

6)、交互流程图

• 梳理任务流程，并且画好流程图
• 多个任务流程的时候，应该拆分开来，逐条展示；

7)、交互方案

• 流程

一个页面一个任务；

每个任务都要有起点；

同一个页面的不同状态，最好在一个页面展示（不要忽视极端情况）

• 页面内容

页面布局规范，准确传递设计方案

尽量黑白灰，避免视觉干扰

• 交互说明

交互说明1：交互规则及逻辑关系

交互说明2：交互迭代要有标识

交互说明3：点击后的交互反馈

交互说明4：动效说明

（1）通过局部小图展示动效的每个分镜头；

（2）通过文案描述，讲解动效需求；

（3）视觉同学提供动态效果图。

交互说明5：需要视觉同学注意的要特别标明

（1）那些页面需要视觉稿；

（2）那些需要视觉特殊处理；

（3）如果在视觉上有情感需求，需要特殊标明；

8）、控件库

• 保持一致性；
• 布局规范

3. 交互设计文档在工作中的应用