交互设计清单

~ 看四毛姐姐的笔记,加上读了几本交互设计相关的书,用清单的方式整理的笔记。

产品定义

  • 为明确的目标用户,而不是全部用户设计

页面、布局、视觉(颜色)

跨页:

  • 可滚动的长页:需要建立一个视觉模式或节奏,让用户可以感知到后面还有内容。
  • 重复关键操作,页面很长或是分页的情况,可以在页面顶部放置一个按钮,然后在页面底部再放置一个更显眼的按钮
  • 简化页面,让一个控件提供多个功能,但也降低了功能可见性,适用于高级功能
  • 好的视觉层次能够区分页面中哪些元素重要,哪些次要。层次分明,可以从对齐、间距、颜色、色调、缩进、字体大小、元素大小等视觉语言入手,将它们运用得当,用户就能顺畅阅读。
  • 适当留白的间距让内容/数据更好读

单页:

  • 尽量使用单列布局,引导用户自上而下阅读
  • 不要使用太多线条和边框,注意力是宝贵的资源,在排版时通过缩小组内元素边距、增加组和组之间边距、使用不同背景色、将文字对齐等方法来划分区域。
  • 响应式布局,根据屏幕形状和大小自动调整内容。
  • 对比要鲜明,好的界面重点突出,与周围的元素区分开:
    • a)某个元素使用深色调和其它浅色调元素区分开;
    • b)为元素增加阴影和渐变突然对比
    • c)选择互补色(比如黄色和紫色)提高对比度”
  • 视觉清晰,视觉上的对比让人更容易理解产品,大小、颜色对比要明显
  • 逐步显示信息,用户不用看到一堆不相干的信息。

动画

  • 平滑的过场动画:为这些元素增加淡入淡出等过渡动画,能让用户更容易理解刚才的操作带来的变化,给予用户足够的时间来观察变化的大小和位置。(时间控制在0.5秒以内)

化繁为简

  • 合并相似功能,同一页面不要有相似操作
  • 循序渐进地引导,不要直接让用户注册,让用户先进行一些体验式的操作
  • 让用户选择,而不是填写,用户更擅长从一堆东西中识别出某样东西,而不是靠记忆来回想
  • 提供撤销操作来替代确认提醒,操作更顺畅平滑
  • 当有多个选择时,提供一个推荐项是不错的做法:高亮或强调某个选项
  • 精简表单字段,没有人喜欢填写一堆表单
  • 直接放出选项,谨慎使用下拉菜单,下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),需要反复操作的地方(比如操作菜单)

引导操作、跨过障碍

新用户:

  • 饥饿营销,比如限制网络研讨会的门票数量,或者限制产品每月服务的人数上限等等。
  • 适当营造紧迫氛围,暗示着资源紧张,或活动时间有限,希望用户立即行动
  • 免费试用,样章、演示、产品试用,诱导潜在消费者购买完整的内容
  • 产品引导页直接提供注册表单,让用户直观的感受到要填写的内容没多少,不会花时间
  • 强调选择自由,可以在一个行动后,紧随简单的声明——「你有自由选择的权利」或「你可以选择接受或拒绝」。这种方式在动作和声明紧连一起时最有效。
  • 默认帮用户选中服务,前提是文本清晰易懂,让用户知道开启的是什么服务。
  • 提供恰当的默认值能大大减少用户工作
  • 支持分享,当我们向别人宣告要做什么时,更可能会付出行动。
  • 设计零数据页面,让用户跨越最初的障碍

用户的操作:

  • 增大点击区域,把链接、按钮、窗体的尺寸做大,更容易点击。
  • 让用户更容易操作 区分「可点击」和「被选中」的样式,比如颜色,层次的区分
  • 降低使用门槛,相比完成一个大任务,人们普遍更容易完成一系列相互关联的小任务。
  • 把好处写在按钮标题上,让用户感受到好处的按钮更有可能被点击。也可以把这些信息放在按钮旁边。
  • 直接在元素上操作,数据列表:单击某个条目直接进入编辑状态,比选中条目再点击按钮的方式要简便。
  • 对用户输入的数据,尽量放宽限制,人性化。如:支持多种格式的电话号码
  • 及时检验:处理表单时,最好及时检测是否存在错误,并显示检测结果,用户可以立即通过提示的错误信息(一般放在字段右边)调整内容。
  • 如果你的目的是想让用户点击页面下方那个重要按钮,每增加一个链接,都会降低他点击按钮的概率
  • 提供解释、说明和提示,如:表单要求用户输入开放性的内容,但这些解释不要放在表单字段的占位符里。
  • 强调重点功能:使用不规则的形状、自动聚焦、高亮区域、浮动显示、指示性箭头等等
  • 限制要比较的属性数量,不要过多;
  • 区隔开需要对比的属性,不要合在一列;
  • 只让用户做一个决定(而不是多个决定,或混在一起的决定)

增强反馈:

  • 直接显示元素状态,静态反馈。比如邮件分已读、未读,帮助用户了解自己过去的操作是否成功,接下来应该采取什么行动
  • 提供非模态的反馈。模态窗口或弹框会带给用户许多困扰:阻止用户执行其他任务、遮挡窗口后的信息、打断沉浸在任务中的用户;
  • 给用户反馈操作结果,如果程序缺少操作反馈,用户会很困惑

更简单、遵从用户习惯

  • 给用户的选项数量要尽量少:5+-2
  • 给图标增加文本标签,一次显示所有图标的含义(而不是悬停在每个图标上单独显示)
  • 更好对比的数据,表格的目的是显示关键属性的差异
  • 显示预期结果,让用户知道自己所处状态和操作预期结果并不费劲
  • 提供补救措施,允许用户在出问题时补救,而不是重头再来
  • 提供重操作功能,如:上传文件失败得再试一次,让重新操作的过程变得超级简单
  • 遵循用户的使用习惯,也能减少用户的学习成本,如:用户不用思考就知道在屏幕右上角关闭窗口。只有给用户带来的好处大于弊端时,才能打破用户习惯。
  • 考虑用户下一步操作

一致性、用户习惯

  • 页面设计尽量保持一致,当我们按下按钮或移动滑块,我们期望这些元素的行为和以往见到的一致。要做到一致性,得在很多方面下功夫,包括:颜色、方向、行为、位置、大小、形状、标签和语言等。
  • 不一致的元素或行为会让用户下意识的关注——如果想让用户注意,可以尝试这么做。
  • 支持快捷键,比如使用J键和K键来前进和后退

理解用户心理、提升情感体验,获得用户好感

  • 尽早激励用户,让他们更有动力前进
  • 来自用户的评价好过自吹自擂,但是要使用真实数据,有好评也有差评看起来更可信。另外,精确的数字也能让产品更可信。
  • 优化页面加载速度,不要让用户等待:优化代码和图像来减少加载时间,或者运用心理学原理让用户觉得时间没有那么长。如:进度条
  • 告诉用户产品能帮他避免损失,我们更倾向于避免损失而不是获取收益,应用在产品设计和推广中
  • 展示产品带给用户的好处,而不是产品有什么特性。人们期望能拥有更多的:爱、金钱、认同感和自由支配的时间,同时有更少的:压力、冲突、烦心事和不确定性。
  • 提供礼物,不要急着推销产品
  • 灵活多变的奖励比一成不变的奖励更能激励用户
  • 感谢用户,在一些任务完成后感谢用户,比只告诉用户结果更好,也能引导用户进行下一步行动
  • 提供好理解的数据,不要让他们自己计算,如:帮用户计算出还能用多少天,比直接显示剩余额度更直观。
  • 提供集合,人都喜欢收集东西,把整套收集完后,会得到额外的奖励
  • 幽默一点,在页面上添加有趣的东西,增进你和用户间的关系

价格

  • 使用「只要」、「负担得起」、「小费用」等文案,降低心理负担
  • 把价格拆分为单元价格:每页3分钱比每本书30元
  • 价格以9结束:29、299、2999
  • 价格要用更少的数字:30元比30.00元好”
  • 利用锚定效应,如:一开始给出高价,再给出稍低点的价格,会比直接给出后面的价格更容易被接受。
  • 有技巧地展示价格,利用人类非理性的一面
  • 销售页末尾,安抚你的用户,比如:航运免费、支付安全、可以随时退出,没有任何风险。

文字描述

  • 使用有逻辑的叙述来引导用户,并在文末提供一个呼吁用户行动的按钮
  • 叙述故事来替代信息的罗列,基本的故事有几个要素:人物、情节和需要被解决的问题。用在产品引导页或各种可交互的程序中
  • 直截了当,不要优柔寡断,去掉弱性词汇「也许」,参考:《翻译乃大道》
  • 个性化介绍:让用户觉得产品友好和亲近,指明产品在哪里被制造还能够让用户下意识地认为产品有较好的质量
  • 使用自然语言–非正式、对话式的交流方式,而非严格、正式的文本。
  • 随着用户使用次数的增加,逐步减少提醒
  • 将用户的利益放在自己的前面,少用「我」,多用「你」
  • 用词简练,缩短句子长度

参考:


  • 170928 update
  • 170601 create
这是我的原创文章,如果觉得不错,可以打个赏~