X

曜彤.手记

随记,关于互联网技术、产品与创业

吉 ICP 备10004938-2号

《瞬间之美 - Web 界面设计如何让用户心动》要点小记

“旧书清理”系列。这本书里提到的某些设计要点在如今看来有些过时,因此仅供参考。

指引用户

  • 使用“对角线平衡(Diagonal Balance)”的方式设计页面重点区域的布局。即运用视觉元素来创建一条虚拟的“线”,让用户的视线跟随它从左上的第一视觉落点区(Primary Optical Area,POA)到右下的最终视觉落点区(Terminal Area,TA)呈对角线似地移动。这条对角线就像箭头一样指向最终视觉落点。可使用具有反差的颜色来体现 POA 至 TA 中间的重要元素
  • 统一设计风格,尝试使用与 LOGO 相关的特殊符号;
  • 从产品功能和用例角度设计和组织导航栏菜单,而非对功能和任务的简单、生硬分类;
  • 避免常见语法错误:如使用 “Sign up” 而非 “Login”;
  • 环境提示成为信息引导的线索,即:尽可能减少冗杂的文字说明,让使用不同颜色、大小的元素能够直观传达隐含的信息;
  • 从用户的角度去思考你的每一个设计创新都是否有效(是否具有学习成本、用户是否会付出成本来买单)?

学习

  • 使用动宾结构的“赶快行动”词组来代替大段说明性文字,以让用户能够快速找到行动信息。而对于更多的说明解释性信息,则可放在 “info” 里;
  • 不要假设用户知道你的软件在某些功能使用上的“要求”;
  • 尝试使用视频来表述想法。

搜索

  • 尝试使用自动完成输入框。即随着用户输入的字符越来越多,系统为其直接推荐相关结果。其局限性在于推荐的非精确结果可能会使得人们放弃最初想要搜索的内容(人们更倾向于听从系统的引导);
  • 信赖行之有效的设计标准,比如组件库或大厂所采用的功能设计方式;
  • 没有必要一次性就把所有可用选项都列出来,使用“递进显示(Progressive Disclosure)”的设计方式(根据功能是否普及或必要来逐步显示它们)来逐步被动地显示用户需要的控件。

深入

  • 首选处理方式(Primary Action)和第二处理方式(Secondary Action):对同一类组件,根据其视觉重要性进行不同区分。比如凸显用于完成注册的 “Register now” 按钮,减弱取消按钮 “Cancel” 的视觉强度,因为前者通常是大多数用户用于完成某个任务的最终选择。
  • 除了检测到错误时立即显示友好提示信息之外,告诉用户“一切正常”同样可能也很重要。
  • 并非所有的交互都能够简化,但我们却可以让它们看上去更容易。一个基本的原则是:让用户在开始进行交互前,就能对需要花费的成本有着精准的预期。当然如果成本很高,也可以采用“引导型”的交互方式。
  • poka-yoke(防止错误)机制:侦测 + 预防。

参与

  • 满怀激情地憎恶也比毫不关心的冷漠好得多。那些最憎恨你的人,在你真正开始为他们考虑的那一刻,往往会成为最坚定的拥护者。

管理信息

  • 要想让用户战胜对新生 Web 技术的陌生感并加以运用,最困难的一点就是首先要意识到人们并不关心技术本身,而是关心自己能得到什么。我们推广的并不是技术,而是技术所能带来的好处。
  • 不论是复杂还是简单的交互,都需要呈现“邀请”、“操作”、“实现”这三个状态,以让用户理解如何开始、如何完成,然后相信自己操作无误。

离开

  • Sign-in 与 Sign-out 的过程可以形成闭环(即 Sign-out 之后再跳回 Sign-in 页面),其中前者可用于广告营销和老用户的再动员。
  • 针对“尘封用户”的“召回”手段:
    • 发送针对新产品介绍的推广邮件;
    • 发送基于用户属性的个性化沟通邮件;
    • 成立由用户组成的,聚焦于产品改进的“反馈小组”,进一步加强与用户的沟通。
  • 设计优秀 Web 应用的 7 个原则
    • 只提供用户所需;
    • 让初学者尽快转变为中级用户;
    • 尽可能地预防错误,如出错也应友善处理;
    • 精简和优化交互与任务流程,让最复杂的软件也清晰易懂;
    • 为支持特定行为而设计;
    • 持续改进和优化我们的流程与程序;
    • 忽略用户的某些需求,坚信自己的理想和洞察力。