交互设计课-界面排版设计

作者: DaleAndriy | 来源:发表于2016-06-16 13:54 被阅读126次

1

为什么要懂视觉心理学

视觉心理学--通过繁琐/错误的信息，对用户的认知和判断进行干扰，造成错误的心理暗示

登陆页面🌰

#1 网易通行证账号作为一个第三方登陆入口，和网易云账号应该是平等关系，可是这里的视觉效果好像网易通信证账号是隶属于网易云账号

#2 通行证入口上面有很多不相关的奇怪小图标

#3 还是会让人误以为，通行证是在云账号之下的一个误导；另外X号给人感觉只是关掉通行证的页面，而不是关掉整个登陆系统

Reason-1 运用用户观察和思考规律来设计界面

Reason-2 构建的用户体验和使用场景需要视觉界面来实现

网易云信落地页设计

🌰 ：第一版视觉稿不符合我们对产品的定位，云信的定位是工具类应用，1稿有太多的社交意味，后来的第二版采用纯色背景，融合一些半透明图标表示多平台云同步，给人安全可靠的感觉

Reason-3 更好的向设计师传递设计方案

2

巧用视觉心理学来设计

#1 接近性 依据间距来判断彼此的关系，空间上的亲近暗示关系上的亲近，这种方法大量应用在分组中

windows 10 分组设计

微软在windows phone 和电脑的设计中大量采用这种方式，省去了分割线，却可以造成分组效果，这样界面会看起来简洁干净

#2 相似性 如果其他因素相同，那么相似的物体看起来归属与一组

表单🌰

相似性会让本来垂直阅读的视觉效果，变成水平，这里的相似性包含很多层面信息，不只是透明度、背景色，还可以是方向、大小、等等

#3 对比VS相似 相似，表明是同类，快速做出判断；对比，表明彼此差异，进行适当的引导

对比引导的栗子

Path的tab栏『发布』按钮区别与其他4个页面；而『储存』的颜色也是引导用户做出正确的点击

#4 封闭性 人们倾向于将缺损的轮廓加以补充使成为一个完整的封闭图形

栗子

左边既能够识别出是一双鞋，还能识别出是个「a」，这种方法常见于logo设计；Facebook用线框将用户名、图片、点赞等内容，框成一个卡片使之看起来是同一组信息

常见的分组方式-点、线、面

封闭性，本质上是对完整状态的一个认知倾向，比如『操作的闭环』，举个栗子，当我们点击添加购物车，应该给我一些，添加成功的反馈。

#5 连续性 凡具有连续性或者共同运动方向的物体容易被看作一个整体

连续性案例，方案3显然更优秀

连续性，🌰

滚动效果，可以暗示有大量内容；叠加效果，暗示背后有很多内容；半遮挡方式，暗示侧面还有图片没有完全展示完；小箭头提示，还有很多类似的内容在背后；方式并没有好坏之分，只是根据具体的用户场景选择合适的方式

#6 对称性 根据视觉元素重量的不同，来营造实现视觉平衡

视觉重量，可以通过颜色和不透明度来体现，不透明度越高，重量越大，

视觉重量栗子

web端，网页视觉流往往是「之」字型的，左边大球如果和右边小球的透明度一样，会显得很不合理，而现在的状态就会比较合理。

#7 情感化 色彩帮助网站营造整体氛围

明确情感需求，并准确传递给视觉，

交互设计师需要懂得的视觉心理学知识

3

页面排版布局通常的五个步骤

#1 确定页面的任务目标

#2 信息元素的组织分类

#3 对组块进行排版布局

#4 权衡平台设计规范和用户的使用习惯

#5 页面排版的设计验证

#1 确定页面的任务目标

页面的评判标准：有用、易用、好用，其中有用是最重要的。明确用户的任务和目的，以及产品的需求

用户到达每个产品页面的目的：获取信息+操作流程=完成「任务」，不同的任务下，排版布局当然有所不同。

用户需求更流程的支付体验

热门推荐，完成产品对增加群热度的业务需求

同样是沉浸式体验

满足用户阅读需求

Case ：严选商品详情页

严选case

以上这两大点就是我们在页面排版之前，先需要明确的内容

#2 信息元素的组织分类

卡片分类「可能是」最好用信息组织分类的方法，应用场景：信息架构梳理；导航设计；页面设计

卡片分类的逻辑-现实生活的映射（超市，商场……）

Case ：严选商品详情页

通过用户需求确定功能

通过业务需求确定功能

卡片信息组织分类

#3 对组块进行排版布局

用户到具体的页面来，都是带着需求来的，可以通过设计用户任务的方式，来确定页面信息的主次关系

设计原则

# 整体原则：清晰的视觉引导

对角线法则

# 显示：严谨的页面逻辑关系，突出主要任务流程

即，点线面，相关的内容成组

# 弱化：弱化次要的流程

微信登陆栗子

一些功能优先级比较低，不需要用户第一时间能够区分出来，减少认知压力

关于微信的🌰 ，就是采用不同的样式来弱化，原本的账号用的是登陆button，而其他的登陆方式用的是简单的文字链

当然，在其他设计中也可以用颜色加以区分，一个button颜色弱一些，一个button颜色具有很好的引导作用

除了视觉上的区分，还可以通过增加操作步骤，来有意增加某些任务的难度，以达到业务需求

易信、微信退群

# 删除：删除不必要的功能

用明文密码功能代替二次输入

# 隐藏：不能删除的非必要信息

隐藏必要不重要的运费信息

隐藏做的不能太隐蔽，在用户需要的时候用户又可以看得到，通常需要一些视觉引导，这里就是用的「下拉箭头」的方式

隐藏不光要隐藏鸡肋的功能，还可以隐藏一些高阶的功能，普通用户很少会用到，只有高级用户才会用到

LOFTER 发图流程中产品方希望用户发高质量单张图片，但终究也得向用户的需求妥协，用户现在已经习惯发多张图片，产品方也没有完全缴械，发多张图片这个功能做的比较隐藏，需要长按才能唤起

易信&LOFTER，隐藏高阶功能

# 影响因素：操作频率

重要的button和功能入口，建议放在底部和右侧

# 影响因素：距离与面积

面积增加不会带来可用性的持续增长

距离太近可能引发分组不清、界面混乱、容错性低等问题 🌰 ：淘宝购物车的找相似/删除，容错低

# 情感化设计

情感化

#动效：对于交互来说，动效是体验的一部分

Case ：严选商品详情页

用户主要任务&次要任务

设计策略：

1 帮助用户快速获取购买信息

2 较为搞笑易用的购买流程

3 能提供友好的用户体验

优先级排序

不能凭空判断，要通过指标来取个平均

组织排版结果

优化后版本

#4 权衡平台设计规范和用户的使用习惯

易信1.0 统一设计方案

易信4.0 风格一致，遵循格子规范

Hybrid App 化解 Native 与web 的设计之争

Hybrid Apple 注意事项

#1 简化，简化不重要的动画/动效，简化复杂的图形文字样式

#2 少用，少用手势，少用弹窗

#3 减少，减少页面内容，减少控件数量，减少页面跳转次数，尽量在当前页面显示

#4 增强，增强loding时的趣味性，增强页面主次关系，增强控件复用性

总结

Case ：严选商品详情页

尊重各自设计规范

#5 页面排版的设计验证

用户的行为往往比语言靠谱

用户不会过分关注你设计的点

专家评审

快速，低成本，额外收获

4

交互文档

#1 封面

让项目相关人员知晓自己

#2 目录

交互文档信息架构

#3 修订记录

修订记录

意义：

1、方便各方快速了解更新内容，而无需一页一页的查找，浪费不必要的时间

2、对交互设计师自己也是一个记录笔记的地方，避免遗忘

3、当各方意见相左时，修订记录时最好的约定

如何做：

1、以天为单位清除记录从文档建立到开发完成甚至到跟进阶段所有的修改内容

2、便于其他人的查找，附上页面链接，直接跳转相应页面

#4 需求&业务流程图