一本系统讲解原型设计的书。干货满满~ 虽然Axure学个几小时就能绘制低保真原型,但这只是基础工具的使用。原型不只是一堆线框那么简单,更是设计者思想的体现,是否细心、思维逻辑如何 等等。反正我是个画原型都会拉辅助线的人 (~ ̄▽ ̄)~
以下是读书摘录。
序
- 交互设计是在满足用户需求的基础上,让产品更好用、更易用的思想和方法。
- 了解用户目标,协助用户完成任务,帮助用户解决问题,是进行所有设计的前提。
- 一个好的设计需要满足“一目了然、简单自然”。
一目了然:尽量让用户零成本地感知你的设计。例如,凳子看着就可以坐,椅子放那就可以靠,无需思考。
简单自然:操作方式和交互流程符合用户的心智模型、使用习惯。 - 产品经理最重要的工作,是“让正确的事情持续下去”,而不是“完成高保真原型”或者“写一份无可挑剔的PRD”。
第四章
- 完整的页面设计应该包含:内容设计与人机交互。
- 设计页面原型的流程:
-
内容结构梳理:
- 核心任务模块
- 任务结果模块
- 重要条件
- 附带内容:个人中心、设置中心,放置一些不太常用但必然需要的杂物。
-
页面模块:
- 一级页面(模块首页)
- 衍生页面(向下衍生,平级衍生:如不同状态的一系列页面)
-
注意事项:
- 先放置极为重要的信息
- 完善每个页面的内容,向下填充细节,根据页面目的进行划分:展示页、列表页、正文页、功能页、辅助与特殊页面等。
- 展示页
- 目的:提高信息被用户自然吸收的概率。自然吸收是在无意识的状态下被动学习。进入展示页的用户通常无明确目的。
- 用来“看”的,“看”的目的是吸收信息,然后信息被转化成情感并推动行动。
- 经常作为首页,或者重要模块的第一页,以及像个人空间这样需要渲染氛围的页面。
- 决定了产品的氛围,最直观表现了产品的设计风格,应该在视觉阶段被先提取出来作为设计范本。
- 围绕着“看”来设计:
- 视线容易被焦点引导(图片或色彩都会成为焦点)。注意视觉焦点之间的节奏感,稳定的距离给用户安全感,如果中间间隔太长,用户就会在此时停止浏览,因为潜意识告诉他接下来没有更重要的内容了。
- 如果你是近视眼,摘下眼镜看页面,你会更容易看到所有焦点。
- 如何选择内容:
- 通常不会承载太多内容,如果要出现某个内容,它一定是极为重要的,必须慎重选择。
- 当展示的核心是内容推送,设计的重点在如何排列与突出优质信息。手机屏幕局限性大,排列方式受限,尤其要注意突出重要信息。
- 如果用户量不够,就不合适显示数据。
- 按优先级进行选择:用户喜欢的(产品早期应该迎合用户喜好),主要任务的(促成用户完成任务),可以赚钱的(产品后期的要务是提高成交转化率)。
- 常见的展示页:
产品首页/模块首页,个人资料,商品详情。
-
列表页
- 找寻的方法
- 排序。按时间,按字母,按高关注度信息,按决策依据信息。
- 分类,标签。分类是较为概括的商品属性,一般有一级二级分类。分类是可以被明确区分的品类。古典欧式和田园贵族不能算是分类,但可以算是标签。通常每个物品只有一个同级的品类,但可以有多个标签。
- 筛选。用户使用筛选,是为了得到更加精细而准确的结果,所以把用户会考虑到的其他范围因素放到筛选内容中。
- (在某一特定范围内,分类是对全部内容的区分,筛选是对部分内容的交叉。)
- 搜索。如果产品有多个信息群,比如作者或作品,这是需要区分的。搜索的历史记录和近义词是辅助,因为用户可能记不清关键字。
- 列表页的特点
- 同类内容
- 规则排序
- 包含全部
- 常见的列表页:
联系人列表,核心内容列表,设置中心。
- 找寻的方法
功能页
- 目标:让用户准确、顺利、快速地完成任务。
- 应该注意:可控,拆分任务,时间,看到并操作,有且仅有两个角色(APP与用户)
- 常见的功能页:发布内容 注册登录 设置编辑
- 欢迎页
- 内容:功能/服务介绍,气氛营造,操作手册
- 过渡页
- 承前启后:产品打开(微信的月球),场景跳转,弱化突然跳转带来的不适感
- 加载页
备用事件
跟踪进度,如进度条,让用户有个等待的心理准备
沉浸式页面
回答问题
目的:这个页面为了谁,为了什么
内容:这个页面有什么,有多少
模块:收纳了哪些内容(内容模块化)
数据:内容从哪儿来到哪儿去
运营:人的工作是谁做的,做多少
第五章
- 菜单
如果符合逻辑和快捷有冲突,则取逻辑,舍快捷。
上部菜单
下部菜单(airbnb Android版)
左侧菜单:适用于功能单一但比较复杂的产品,不影响主页面的操作,可以随时添加快捷入口。通常用在早期还不确定的产品形态中,或像Uber这种功能单一、主界面承载较多信息的产品。要注意空间的前后关系(如Uber,QQ)。
右侧菜单:辅助菜单(airbnb iOS版)
融合菜单(QQ)
“反馈建议”通常在设置中心里,但新产品刚上线时需要多收集用户反馈,于是可以在菜单里增加“反馈建议”的快捷入口。
- 页面动态
左轻右重,左侧内容重要于右侧内容
覆盖移入、移出
左右平移
上下平移(知乎的答案翻页)
弹窗从上掉入屏幕中上位置,再往下掉出屏幕
- 为人为错误设计
习惯。不要违背自然规律或用户经验,在设计先后顺序和左右位置时不要特立独行
提示。比如删除的时候。
反馈。让用户知道每个操作行为都能得到反馈。
反悔。
- 为情绪设计
建立用户克服困难的成就感
放松状态能让人更好地处理信息
给用户较少的选择,可以让用户轻松抉择。
- 手指行为
- 居中的长按钮方便左手右手都可以轻松操作
- iOS的最小操作区是44dp,Android的是48dp
第六章
- 状态栏:沉浸式页面可隐藏
- iOS导航栏的页面标题居中,Android的在左边
- 移动端的重要按钮放在右边,与web相反。
上下排列的则放在上面。
重要按钮使用主色调,或焦点色。 - 按钮点击状态:正常,按下,不可点击,按钮加载中
- iOS按钮默认状态下不含边界,也不含背景图,可以自定义描边和背景图
- 缓存:
- 可清理的
- 不可清理的
- 自动清理(累计到某个容量或定时帮用户自动清理缓存,音频视频图画类软件通常同时保留下载功能和自动清理缓存,用户要保存某类文件可以使用下载,其他的会被清空)
- 页面交互方式:
- 菜单的进入与退出方式
- 一级页面的进入与退出方式(菜单可直接点击到达的页面)
- 子页面的进入与退出方式(除了菜单和一级页面之外,所有的衍生页面)
- 模态视图的进入与退出方式(弹窗)
- 转场方式:
- 原型包括:
- 修改记录
- 页面结构
- 全局说明
- 字符限制说明
- 核心任务流程(流程图,以界面的形式绘制跳转的前后关系)
- 核心外任务流程(登录注册,加好友)
- 页面与注释:
- 按照页面模块进行划分。(进行开发时也应该先区分模块,再填充内容)
- 罗列数据。
- 操作。先描述操作的结果,设计师据此考虑操作的形式、过程、结果等具体的人机交互方法。
- 规则。包括:页面的不同状态,内容的初始、正常、异常状态,列表的排序优先规则。
- 可以把UI、程序员、运营等需要特别注意的地方标注出来。
- 静态的注释若描述得不够清楚,可以做动效帮助理解。