读书笔记之《绝密原型档案》

一本系统讲解原型设计的书。干货满满~ 虽然Axure学个几小时就能绘制低保真原型,但这只是基础工具的使用。原型不只是一堆线框那么简单,更是设计者思想的体现,是否细心、思维逻辑如何 等等。反正我是个画原型都会拉辅助线的人 (~ ̄▽ ̄)~

以下是读书摘录。


  • 交互设计是在满足用户需求的基础上,让产品更好用、更易用的思想和方法。
  • 了解用户目标,协助用户完成任务,帮助用户解决问题,是进行所有设计的前提。
  • 一个好的设计需要满足“一目了然、简单自然”。
    一目了然:尽量让用户零成本地感知你的设计。例如,凳子看着就可以坐,椅子放那就可以靠,无需思考。
    简单自然:操作方式和交互流程符合用户的心智模型、使用习惯。
  • 产品经理最重要的工作,是“让正确的事情持续下去”,而不是“完成高保真原型”或者“写一份无可挑剔的PRD”。

第四章

  1. 完整的页面设计应该包含:内容设计与人机交互。
  2. 设计页面原型的流程:
  • 内容结构梳理:

    • 核心任务模块
    • 任务结果模块
    • 重要条件
    • 附带内容:个人中心、设置中心,放置一些不太常用但必然需要的杂物。
  • 页面模块:

    • 一级页面(模块首页)
    • 衍生页面(向下衍生,平级衍生:如不同状态的一系列页面)
  • 注意事项:

    • 先放置极为重要的信息
    • 完善每个页面的内容,向下填充细节,根据页面目的进行划分:展示页、列表页、正文页、功能页、辅助与特殊页面等。
  1. 展示页
  • 目的:提高信息被用户自然吸收的概率。自然吸收是在无意识的状态下被动学习。进入展示页的用户通常无明确目的。
  • 用来“看”的,“看”的目的是吸收信息,然后信息被转化成情感并推动行动。
  • 经常作为首页,或者重要模块的第一页,以及像个人空间这样需要渲染氛围的页面。
  • 决定了产品的氛围,最直观表现了产品的设计风格,应该在视觉阶段被先提取出来作为设计范本。
  • 围绕着“看”来设计:
    • 视线容易被焦点引导(图片或色彩都会成为焦点)。注意视觉焦点之间的节奏感,稳定的距离给用户安全感,如果中间间隔太长,用户就会在此时停止浏览,因为潜意识告诉他接下来没有更重要的内容了。
    • 如果你是近视眼,摘下眼镜看页面,你会更容易看到所有焦点。
  • 如何选择内容:
    • 通常不会承载太多内容,如果要出现某个内容,它一定是极为重要的,必须慎重选择。
    • 当展示的核心是内容推送,设计的重点在如何排列与突出优质信息。手机屏幕局限性大,排列方式受限,尤其要注意突出重要信息。
    • 如果用户量不够,就不合适显示数据。
    • 按优先级进行选择:用户喜欢的(产品早期应该迎合用户喜好),主要任务的(促成用户完成任务),可以赚钱的(产品后期的要务是提高成交转化率)。
  • 常见的展示页:
    产品首页/模块首页,个人资料,商品详情。
  1. 列表页

    • 找寻的方法
      • 排序。按时间,按字母,按高关注度信息,按决策依据信息。
      • 分类,标签。分类是较为概括的商品属性,一般有一级二级分类。分类是可以被明确区分的品类。古典欧式和田园贵族不能算是分类,但可以算是标签。通常每个物品只有一个同级的品类,但可以有多个标签。
      • 筛选。用户使用筛选,是为了得到更加精细而准确的结果,所以把用户会考虑到的其他范围因素放到筛选内容中。
      • (在某一特定范围内,分类是对全部内容的区分,筛选是对部分内容的交叉。)
      • 搜索。如果产品有多个信息群,比如作者或作品,这是需要区分的。搜索的历史记录和近义词是辅助,因为用户可能记不清关键字。
    • 列表页的特点
      • 同类内容
      • 规则排序
      • 包含全部
    • 常见的列表页:
      联系人列表,核心内容列表,设置中心。
  2. 功能页

  • 目标:让用户准确、顺利、快速地完成任务。
  • 应该注意:可控,拆分任务,时间,看到并操作,有且仅有两个角色(APP与用户)
  • 常见的功能页:发布内容 注册登录 设置编辑
  1. 欢迎页
  • 内容:功能/服务介绍,气氛营造,操作手册
  1. 过渡页
  • 承前启后:产品打开(微信的月球),场景跳转,弱化突然跳转带来的不适感
  1. 加载页
  • 备用事件

  • 跟踪进度,如进度条,让用户有个等待的心理准备

  1. 沉浸式页面

  2. 回答问题

  • 目的:这个页面为了谁,为了什么

  • 内容:这个页面有什么,有多少

  • 模块:收纳了哪些内容(内容模块化)

  • 数据:内容从哪儿来到哪儿去

  • 运营:人的工作是谁做的,做多少


第五章

  1. 菜单
  • 如果符合逻辑和快捷有冲突,则取逻辑,舍快捷。

  • 上部菜单

  • 下部菜单(airbnb Android版)

  • 左侧菜单:适用于功能单一但比较复杂的产品,不影响主页面的操作,可以随时添加快捷入口。通常用在早期还不确定的产品形态中,或像Uber这种功能单一、主界面承载较多信息的产品。要注意空间的前后关系(如Uber,QQ)。

  • 右侧菜单:辅助菜单(airbnb iOS版)

  • 融合菜单(QQ)

  • “反馈建议”通常在设置中心里,但新产品刚上线时需要多收集用户反馈,于是可以在菜单里增加“反馈建议”的快捷入口。

  1. 页面动态
  • 左轻右重,左侧内容重要于右侧内容

  • 覆盖移入、移出

  • 左右平移

  • 上下平移(知乎的答案翻页)

  • 弹窗从上掉入屏幕中上位置,再往下掉出屏幕

  1. 为人为错误设计
  • 习惯。不要违背自然规律或用户经验,在设计先后顺序和左右位置时不要特立独行

  • 提示。比如删除的时候。

  • 反馈。让用户知道每个操作行为都能得到反馈。

  • 反悔。

  1. 为情绪设计
  • 建立用户克服困难的成就感

  • 放松状态能让人更好地处理信息

  • 给用户较少的选择,可以让用户轻松抉择。

  1. 手指行为
  • 居中的长按钮方便左手右手都可以轻松操作
  • iOS的最小操作区是44dp,Android的是48dp

第六章

  1. 状态栏:沉浸式页面可隐藏
  2. iOS导航栏的页面标题居中,Android的在左边
  3. 移动端的重要按钮放在右边,与web相反。
    上下排列的则放在上面。
    重要按钮使用主色调,或焦点色。
  4. 按钮点击状态:正常,按下,不可点击,按钮加载中
  5. iOS按钮默认状态下不含边界,也不含背景图,可以自定义描边和背景图
  6. 缓存:
    • 可清理的
    • 不可清理的
    • 自动清理(累计到某个容量或定时帮用户自动清理缓存,音频视频图画类软件通常同时保留下载功能和自动清理缓存,用户要保存某类文件可以使用下载,其他的会被清空)
  7. 页面交互方式:
    • 菜单的进入与退出方式
    • 一级页面的进入与退出方式(菜单可直接点击到达的页面)
    • 子页面的进入与退出方式(除了菜单和一级页面之外,所有的衍生页面)
    • 模态视图的进入与退出方式(弹窗)
  8. 转场方式:
图片来自书里“图6-45”
  1. 原型包括:
  • 修改记录
  • 页面结构
  • 全局说明
  • 字符限制说明
  • 核心任务流程(流程图,以界面的形式绘制跳转的前后关系)
  • 核心外任务流程(登录注册,加好友)
  • 页面与注释:
    • 按照页面模块进行划分。(进行开发时也应该先区分模块,再填充内容)
    • 罗列数据。
    • 操作。先描述操作的结果,设计师据此考虑操作的形式、过程、结果等具体的人机交互方法。
    • 规则。包括:页面的不同状态,内容的初始、正常、异常状态,列表的排序优先规则。
    • 可以把UI、程序员、运营等需要特别注意的地方标注出来。
    • 静态的注释若描述得不够清楚,可以做动效帮助理解。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,837评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 一. 用户体验设计 · 用户和人机界面的交互过程。 · 用户体验设计特征 1.严谨、理性、创意 2.提供特定问题的...
    Serene77阅读 773评论 0 7
  • 八进四的收官之战,在广州主场作战的WE面对的是北美传统豪门C9战队。 尽管在国内赛事中他们往往被TSM压着一头,但...
    十里缘起面青山阅读 471评论 3 2
  • 没女是个时下非常流行的新词语。是指邢些没长相、没身材、没青春、没学历、更没钱的女人。 反正什么都没有,不如干脆摆出...
    古一爻阅读 147评论 0 0