首页  思维导图  详情



 



网易云交互-让页面布局更优雅

2019-01-26 14:13:37   1  举报





网易云交互设计微专业-让页面布局更优雅

交互设计

产品经理

需求分析

信息架构

网易云微专业

模板推荐

作者其他创作

大纲/内容

1.你需要懂的视觉心理学

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

运用用户观察和思考的规律来设计界面

图

子主题

界面设计是连接业务流程与用户体验的重要桥梁

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

图

子主题

更好的向视觉设计师传递设计方案

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

问题引出

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

接近性

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

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

相似性

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

图

子主题

相似VS对比

相似性可以帮助我们识别哪些是同类，做出快速的判断

对比，可以表明彼此间的差异，做出适当的引导

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

封闭性

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

常见的分组模式

点线面

图

子主题

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

连续性

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

图

子主题

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

对称性

根据视觉元素重量的不同，来营造实现视觉的平衡

不平衡

依靠视觉重量引导用户的视觉流

为什么整个页面感觉总是不对？

情感化

色彩帮助营造网站的整体氛围

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

图

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

1.确定页面的任务目标

如何判断一个页面的优劣

衡量页面的标准

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

有用

最重要的衡量标准，用户和产品需求的满足

易用

架构清晰、流程清晰、不需思考

好用

友好和充满情感化

用户到达每个产品页面都是有目的的

获取信息+流程操作=完成“任务”

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

图

微信，陌陌，易信都是查看附近的人

2.信息元素的组织分类

将用户方及产品方的需求，页面的目的转换为相应的可视化的功能

卡片分类法的应用

图

子主题

3.对组织分类过的信息或组块进行排版布局

信息太多，产品想展示更多内容，怎么破？

设计原则

整体原则

清晰的视觉引导

用户固有的阅读习惯

对角线法则

显示

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

分组：点线面应用

弱化

弱化次要流程

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

例子

微信登陆页面的更多

颜色区分

增加流程

删除

删除不必要的功能

必要功能

那些关系到用户日常使用体验的功能，以及那些能消除他们挫败感的功能

隐藏

不能删除的非必要信息

高阶的功能

普通用户很少用到，高级用户才会用到

影响因素

操作频率

距离与面积

好用

情感化设计

动效

图

子主题

4.权衡平台规范和用户的使用习惯

引出问题

1.针对不同平台，需要几套设计方案？

2.如果人力财力有限，能否设计一套方案来兼容？而这一套如何提供？

3.如何以最低的成本设计两套方案？

4.除了两套方案，有无更好解决方法？

易信例子

易信1.0版本，成本及市场前景的未确定性，采用多平台统一一个设计方案

2.0版本，产品定位和功能上做了调整，从熟人通讯到陌生人社交转变

区分化设计

1.安卓4.0规范已经很成熟，而且赢得市场用户亲睐

2.在人员及资金储备充足

3.竞争对手微信在安卓版也完全遵循规范

更好的方式

Native App

指原生程序，一般依托于操作系统，又很强的交互，是一个完整的App，可拓展性强。需要用户下载安装使用。

Web App

指采用Html5语言写出的App，不需要下载。生存在浏览器中的应用，基本可以说是触屏版的网页应用。

混合设计（Hybrid）

页面框架由本地native构成，确保稳定性

页面内容由H5构成，保证迭代的灵活性

注意事项

简化

不重要的动画/动效，负责的图形文字样式

少用

手势，弹窗

减少

页面内容，空间数量，页面跳转次数，尽量显示在当前页

增强

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

大饼秘籍

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

1.是否区分设计，需要看当前项目的阶段和项目重点

2.若不区分设计，在大框架一致的前提下，尊重平台控件使用规范

3.若采用分别设计，发挥各大平台最大的潜力i，做到极致

4.混合设计也许能从另一个层面解决跨平台兼容性问题

5.页面排版的设计验证

实践是检验真理的唯一标准

只有在真实任务场景中，帮助用户快速完成目标的页面才是最好的设计。

大饼秘籍

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

1.为了借鉴而借鉴

2.为了避免借鉴，而差异化设计

3.为了用户习惯而设计

常用的快速验证方法

“交互”专家评估

找专家级别的交互设计师，提出验证的原则或方向来验证我们的设计

“粗暴”的用户测试

拿着纸稿或原型demo去楼道楼间拉几个用户快速测试

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

1.交互设计文档是什么？

当用axure绘制交互稿，有三个问题

1.设计方案如何准确传递给视觉和开发？

2.开发过程中如何维护修改方案并展示给相关人员？

3.设计方案如何沉淀？

大饼秘籍

交互设计文档不是一个简单的axure文档，而是一套体系，一个完整的产品

交互设计阶段

需求确定

具象产品需求，以可视化的页面形式，谈论需求的满足情况

交互设计

作为交互设计方案的载体，详细阐述设计方案的细节，用来与上下游谈论方案的可行性，确定最终方案

视觉设计

根据交互稿设计出视觉效果图，关注页面的布局结构，顺序位置，主次及交互方式等

产品开发

通过交互文档，交互设计师与各端开发确定方案的可实现性。开发人员依据交互文档的实现方式进行开发

测试优化

严格测试设计方案最终的实现效果，确保产品的质量

上线迭代

交互文档的重要性

1.让相关者明白设计方案及分工

2.可以作为界面验收时的checklist

3.确保用户体验的一致性和统一性，达到传承传递的作用

子主题

交互文档没做好会带来

1.造成信息不对称，误解方案

2.给交互设计师自己带来很多不必要麻烦

3.产品开发变得混乱

4.导致整个产品达不到预期，产品失败的问题

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

1.封面

内容：需求名称，版本，涉及的相关人员

2.目录

好目录：结构清晰，命名准确

3.修订记录

意义

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

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

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

如何做

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

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

4.业务流程图

5.信息架构

6.交互流程图

梳理任务流程，并且画好流程图

多个任务流程时候，应该拆分开，逐条展示

7.交互方案

流程

一个页面说清楚一件事

每个任务都要有起点

同一个页面的不同状态，最好在一个页面展示

页面布局

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

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

交互说明

1.交互规则及逻辑关系

2.交互迭代要有标示

3.点击后的交互反馈

点击后跳转情况，时间纬度上的变化，比如：跳转，加载，按钮状态

4.动效如何说明

通缩局部小图展示动效的每个分镜头

通过文案描述，讲解动效需求

视觉同学提供动效效果图

需要视觉同学注意的特别标明

哪些页面需要视觉稿？

哪些需要视觉特殊处理？

如果视觉上有情感需求，需要特殊标明

8.控件库

用图

子主题

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

与产品经理的配合

产品

明确需求

制定规则

变更需求

交互

与产品一起明确需求

展示规则

方案变更周知

与视觉设计的配合

视觉

单个页面设计

不要轻易调整交互文档

可以设计调整的地方

交互

每块元素的合理布局

少用视觉元素

局部细节排版可以合作完成

与开发工程师配合

开发

功能的实现方式

实现方式的变更

交互

交互细节、交互逻辑的详细描述

变更前的确定，以及变更后的通知

与测试工程师的配合

测试

撰写测试用例

极端情况

交互文档的严格实行者

交互

详细表述细节

极端情况说明

交互设计师的好朋友

用图

子主题

问题引出

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

接近性

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

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

相似性

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

图

子主题

相似VS对比

相似性可以帮助我们识别哪些是同类，做出快速的判断

对比，可以表明彼此间的差异，做出适当的引导

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

封闭性

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

常见的分组模式

点线面

图

子主题

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

连续性

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

图

子主题

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

对称性

根据视觉元素重量的不同，来营造实现视觉的平衡

不平衡

依靠视觉重量引导用户的视觉流

为什么整个页面感觉总是不对？

情感化

色彩帮助营造网站的整体氛围

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

图

 Collect

Get Started

scutmall页面

 Collect

Get Started

页面

 Collect

Get Started

珊瑚海环境布局图

 Collect

Get Started

页面





0 条评论

下一页