Chapter1 揭开交互神秘面纱
第一章 揭开交互神秘面纱
- 产品设计开发流程和团队构成
- 交互设计师和产品经理的区别
- 交互设计影响用户体验
优秀的交互设计来源于生活!!!
用户体验:国际标准化组织ISO 9241-210定义:用户对于使用或期望是用的产品、系统或者服务的主观感受和反应。
案例:网易云音乐
- 推荐歌曲:私人FM、歌单&电台、听歌识曲;
- 分享歌曲:分享歌词、动态发布;
- 操作体验:黑胶唱片仿真、切歌体验;
用户体验5要素:战略层、范围层、结构层【功能/信息层次】、框架层【结构布局】、表现层(重点关注结构层和框架层)
框架层案例:网易
- 特色功能区:私人FM、每日推荐、云音乐榜单--界面布局清晰,主功能突出,操作界面按操作的频繁和人体视觉习惯程度设计出层次。
结构层案例:网易
- 注册功能:只需三步
- 听歌识曲:左上角;
- 正在播放:常驻右上角
第二章 玩转Axure
本章老师以一个案例简要介绍了Axure的界面、交互,具体Axure的详细教程可以上网自己找一些资源,还是蛮简单的。
第三章 平台设计规范与常见的设计模式
(一)ios与Android的设计规范
1、ios端
- 页眉-导航栏:用于实现在应用不同信息层级结构间的导航,有时候也可用于管理当前屏幕内容。
- 页脚-工具栏:用于放置操作当前屏幕中各对象的控件。既可以放icon,也可以放文字。
Tips:如果想让工具栏上可以放置更多功能入口,可以选择icon;如果工具没有那么多,又想表达更加清晰,可以选择文字。
- 页脚-标签栏:让用户在不同的任务、界面和模式中进行切换。
Tips:一般标签放置不超过5个
2、Android端 4.0
- 页眉-操作栏(Action Bar):操作栏用于实现app内视图的切换和层级间的导航(返回上层),还会放置一些重要控件。
3、Android端 5.0--扁平化时代下的《Material Design》
- 页眉-应用栏(APP Bar):在旧版本中叫做操作栏,用于显示应用的标识、应用导航、内容搜索以及其他操作。
- 明显的有层次有美感。如:抽屉式导航(知乎)。
- 二级导航
4、常用控件(进度条、时间控制、开关按钮等平台一般均已经设定好)
比如:ios端和安卓端搜索的设计是有区别的。
- 无限循环:短时间;
- 进度条:时间比较长;
5、手势介绍
(二) 移动产品模式设计之导航栏
1、标签式导航
入口扁平化;导航控件面积大,功能间快速切换;
ios一般布局在底部,安卓一般布局在顶部
当标签过多(>5个)时,可使用滚动式导航,但要让用户知道这是可滚动的。
2、分段式导航
尺寸较小,能轻松融入界面,不占用空间。
Tips:它只是ios的标准控件;不适合作为一级导航,往往作为二级导航与标签导航嵌套使用
3、舵式导航
多个功能中有某个功能特别重要
4、抽屉式导航
隐藏不重要功能,让用户更关注核心功能,大大减少主界面中的导航控件数量
Tips:不要在抽屉式导航放置太重要的功能
5、下拉菜单式导航
可与滚动式导航结合
(三)移动产品模式设计之列表
1、垂直列表
阅读习惯:从左往右,从上往下。条目详细程度与条目数量要平衡。
模式:标准模式(纯文字)、图文结合模式、控制模式、时间轴形式、对话形式
应用到导航:
- 简单清晰、冷静高效,文字为主。
- 适用于二级导航
实例:邮箱、微信;
2、横向列表
banner轮播大图展示型、轮播小图展示型
Tips:需要指示器,来提示用户,表示屏幕外面还有内容。
应用到导航:
- 优点-隐藏其余导航选项,使页面简洁,让用户在同一时间只专注于一个目标
- 缺点-用户很难跳转到非相邻的导航选项
体验感强,适用于一些功能选项较少,且不频繁跳转的产品,又或者是浏览体验式的产品
3、网格列表
展示以图片为主+文字辅助,可以展示更多内容,更富有感染力 eg:相册
变形:瀑布流(花瓣、lofter)
应用到导航:
- eg:手机主页、支付宝、微信钱包;
相比垂直列表在右侧区域有很大空闲,宫格导航可以充分应用整个页面
适用于二级导航,在有限空间罗列大量功能
(四)Web端设计规范与设计模式
1. 网页布局
自适应设计:自动识别屏幕宽度、并做出调整的网页设计
2. 页面设计
主要分为:logo、导航、用户登录、网站推广内容、广告、其他信息
- logo:左上角
- 导航:顶部一级导航、左侧二级导航。当用户下拉网页不在第一屏时,可以将导航固定在顶部。
- 用户登录:右上角
- 案例:网易云课堂
3. 自适应设计(多平台设计需要考虑)
- 自适应网页设计:可以自动识别屏幕的宽度,并作出相应的调整的网页设计。