4.让页面布局更优雅
2019-01-26 14:13:37 1 举报AI智能生成
登录查看完整内容
网易云交互设计微专业-让页面布局更优雅
作者其他创作
大纲/内容
子主题
图
运用用户观察和思考的规律来设计界面
构建的用户体验和使用场景需要通过视觉界面来实现
界面设计是连接业务流程与用户体验的重要桥梁
更好的向视觉设计师传递设计方案
1.为什么需要懂视觉心理学？
依据间距来判断彼此间的关系，空间上的亲近暗示关系上的亲近
接近性
为什么搞不清标题和内容的对应关系？
如果其他因素相同，那么相似的物体看起来归属于一组
相似性
看着一样，为什么点击后的反馈不一样？
相似性可以帮助我们识别哪些是同类，做出快速的判断
对比，可以表明彼此间的差异，做出适当的引导
相似VS对比
点线面
常见的分组模式
人们倾向于将残缺的轮廓加以补充使成为一个完成的封闭图形
封闭性
调整了间距，但是分组还是不明显？
凡具有连续性或共同运动方向的物体容易被看做一个整体
连续性
怎么让用户感觉还有很多？
根据视觉元素重量的不同，来营造实现视觉的平衡
依靠视觉重量引导用户的视觉流
不平衡
对称性
整个页面感觉向一遍倾斜了，怎样才会舒服些？
明确情感需求，并准确传递给视觉童鞋
色彩帮助营造网站的整体氛围
情感化
为什么整个页面感觉总是不对？
问题引出
2.巧用视觉心理学来设计用户界面？
1.你需要懂的视觉心理学
最重要的衡量标准，用户和产品需求的满足
有用
架构清晰、流程清晰、不需思考
易用
友好和充满情感化
好用
满足用户需求，减少用户的理解和操作成本，还能深深地吸引用户，让这个产品捕获用户的芳心。
衡量页面的标准
如何判断一个页面的优劣
获取信息+流程操作=完成“任务”
明确当前页面用户的任务和目的，以及产品的需求
用户到达每个产品页面都是有目的的
微信，陌陌，易信都是查看附近的人
1.确定页面的任务目标
将用户方及产品方的需求，页面的目的转换为相应的可视化的功能
卡片分类法的应用
2.信息元素的组织分类
用户固有的阅读习惯
对角线法则
清晰的视觉引导
整体原则
分组：点线面应用
严谨的页面逻辑关系，突出主要任务流程
显示
颜色区分
微信登陆页面的更多
增加流程
例子
一些功能优先级较低，不需要用户第一时间能够区分出来，减少认知压力
弱化次要流程
弱化
删除不必要的功能
那些关系到用户日常使用体验的功能，以及那些能消除他们挫败感的功能
必要功能
删除
不能删除的非必要信息
普通用户很少用到，高级用户才会用到
高阶的功能
隐藏
设计原则
操作频率
距离与面积
影响因素
情感化设计
动效
信息太多，产品想展示更多内容，怎么破？
3.对组织分类过的信息或组块进行排版布局
1.针对不同平台，需要几套设计方案？
2.如果人力财力有限，能否设计一套方案来兼容？而这一套如何提供？
3.如何以最低的成本设计两套方案？
4.除了两套方案，有无更好解决方法？
引出问题
易信1.0版本，成本及市场前景的未确定性，采用多平台统一一个设计方案
1.安卓4.0规范已经很成熟，而且赢得市场用户亲睐
2.在人员及资金储备充足
3.竞争对手微信在安卓版也完全遵循规范
区分化设计
2.0版本，产品定位和功能上做了调整，从熟人通讯到陌生人社交转变
易信例子
指原生程序，一般依托于操作系统，又很强的交互，是一个完整的App，可拓展性强。需要用户下载安装使用。
Native App
指采用Html5语言写出的App，不需要下载。生存在浏览器中的应用，基本可以说是触屏版的网页应用。
Web App
页面框架由本地native构成，确保稳定性
页面内容由H5构成，保证迭代的灵活性
不重要的动画/动效，负责的图形文字样式
简化
手势，弹窗
少用
页面内容，空间数量，页面跳转次数，尽量显示在当前页
减少
增强loading时的趣味性，页面的主次关系，控件的复用性
增强
注意事项
混合设计（Hybrid）
更好的方式
1.是否区分设计，需要看当前项目的阶段和项目重点
2.若不区分设计，在大框架一致的前提下，尊重平台控件使用规范
3.若采用分别设计，发挥各大平台最大的潜力i，做到极致
4.混合设计也许能从另一个层面解决跨平台兼容性问题
平台规范是基础，用户的使用习惯是核心，一切规范终究要给用户习惯让步
大饼秘籍
4.权衡平台规范和用户的使用习惯
只有在真实任务场景中，帮助用户快速完成目标的页面才是最好的设计。
实践是检验真理的唯一标准
1.为了借鉴而借鉴
2.为了避免借鉴，而差异化设计
3.为了用户习惯而设计
关于借鉴与设计的三个阶段
找专家级别的交互设计师，提出验证的原则或方向来验证我们的设计
“交互”专家评估
拿着纸稿或原型demo去楼道楼间拉几个用户快速测试
“粗暴”的用户测试
常用的快速验证方法
5.页面排版的设计验证
2.五步熟练掌握页面排版布局
1.设计方案如何准确传递给视觉和开发？
2.开发过程中如何维护修改方案并展示给相关人员？
3.设计方案如何沉淀？
当用axure绘制交互稿，有三个问题
交互设计文档不是一个简单的axure文档，而是一套体系，一个完整的产品
具象产品需求，以可视化的页面形式，谈论需求的满足情况
需求确定
作为交互设计方案的载体，详细阐述设计方案的细节，用来与上下游谈论方案的可行性，确定最终方案
交互设计
根据交互稿设计出视觉效果图，关注页面的布局结构，顺序位置，主次及交互方式等
视觉设计
通过交互文档，交互设计师与各端开发确定方案的可实现性。开发人员依据交互文档的实现方式进行开发
产品开发
严格测试设计方案最终的实现效果，确保产品的质量
测试优化
上线迭代
交互设计阶段
1.让相关者明白设计方案及分工
2.可以作为界面验收时的checklist
3.确保用户体验的一致性和统一性，达到传承传递的作用
交互文档的重要性
1.造成信息不对称，误解方案
2.给交互设计师自己带来很多不必要麻烦
3.产品开发变得混乱
4.导致整个产品达不到预期，产品失败的问题
交互文档没做好会带来
1.交互设计文档是什么？
内容：需求名称，版本，涉及的相关人员
1.封面
好目录：结构清晰，命名准确
2.目录
1.方便各方快速了解更新内容，而无需一页一页的查找，浪费不必要的时间和精力
2.对交互设计师自己也是一个记录笔记的地方，避免遗忘
3.当各方意见相左时，修订记录是最好的约定
意义
1.以天为单位清楚记录从文档建立时到开发完成甚至跟进阶段所有修改的内容
2.便于其他人的查找，可附上页面链接，直接跳转相应页面
如何做
3.修订记录
4.业务流程图
5.信息架构
梳理任务流程，并且画好流程图
多个任务流程时候，应该拆分开，逐条展示
6.交互流程图
一个页面说清楚一件事
每个任务都要有起点
同一个页面的不同状态，最好在一个页面展示
流程
页面布局规范，准确传递设计方案
尽量黑白灰，避免视觉干扰
页面布局
1.交互规则及逻辑关系
2.交互迭代要有标示
点击后跳转情况，时间纬度上的变化，比如：跳转，加载，按钮状态
3.点击后的交互反馈
通缩局部小图展示动效的每个分镜头
通过文案描述，讲解动效需求
视觉同学提供动效效果图
哪些页面需要视觉稿？
哪些需要视觉特殊处理？
如果视觉上有情感需求，需要特殊标明
需要视觉同学注意的特别标明
4.动效如何说明
交互说明
7.交互方案
8.控件库
用图
2.如何撰写高质量的交互设计文档
变更需求
制定规则
明确需求
产品
方案变更周知
展示规则
与产品一起明确需求
交互
与产品经理的配合
可以设计调整的地方
不要轻易调整交互文档
单个页面设计
视觉
局部细节排版可以合作完成
少用视觉元素
每块元素的合理布局
与视觉设计的配合
实现方式的变更
功能的实现方式
开发
变更前的确定，以及变更后的通知
交互细节、交互逻辑的详细描述
与开发工程师配合
交互文档的严格实行者
极端情况
撰写测试用例
测试
交互设计师的好朋友
极端情况说明
详细表述细节
与测试工程师的配合
3.交互设计文档在实际工作中的应用
3.撰写漂亮的交互设计文档
人们倾向于将残缺的轮廓加以补充使成为一个完整的封闭图形
网易云交互-4.让页面布局更优雅
0 条评论
回复 删除
下一页
