年前我就和助手 Young 讨论过,要增加一系列的 UX 相关分享,帮助 UI 设计师可以更好的理解 UX。作为入门,我们将目标瞄准了 Lawsofux 罗列的 19 条 UX 原则,它们具有易于理解和应用广泛的特性。

本系列课程主要由我的学生 Young 书写,我负责校对和审核。从开始准备到全部工作的完成,大约断断续续也花去了一个月的时间,期间翻阅文献、查找资料、细化理论、挑选案例花去了我们大量的精力,有些理论甚至全网 都没有文章可供参考,比如雅各布定律,原理论仅仅只是 Jakob Nielsen 在一段视频里提出的一个观点,原视频几分钟寥寥数句基本上除了观点其他什么都没讲,现在你们看到的所有延伸出来的要点都是我们一条条经过反复思考、推敲和整理出来的。

之前我们已经陆续将 19 篇文章内容发布到线上了,为了方便大家更好的学习,本篇文章会对这 19 条原则做出罗列和简介,大家可以在简要浏览完毕后查看原文的具体介绍,或者收藏本文随时进行查阅。

还有,为了便于我自己学生的学习,我将这 19 篇内容制作成了电子书,会在本文底部提及,如果觉得线上浏览麻烦的同学,也可以保存该文档到本地查看。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b70aeef7-ba31-404c-9341-6d8b0622d567/.png

这一版 19 篇包含以下内容:

  1. 美即好用效应 Aesthetic Usability Effect


    当界面被设计得足够美观时,用户往往会容忍一些较为轻微、影响较小的可用性问题。

    —— Massaki Kurosu & Kaori Kashimura

    应用案例1:Everest官方主页https://www.everest.agency

    应用案例1:Everest官方主页https://www.everest.agency

    例如页面中项目列表的滚动使用了一种极其酷炫的方式,动画自然流畅不拖沓,虽然整个页面利用率和操作效率没有比直接展示列表更好,但是使用者的感觉依然非常好。

    但是,如果一味强调美观性,以此作为设计的主旨,是得不偿失的,不会带来真正的进步和提升,也不是 「美即好用效应」的本意!

    原文阅读 →

  2. 多尔蒂门槛 Doherty Threshold


    系统需要在 400ms 内对使用者的操作做出响应,这样才能够让使用者保持专注,并提高生产效率。

    —— Walter Doherty

    应用案例1:模拟延迟效果

    应用案例1:模拟延迟效果

    研究结果表明,计算机的响应速度直接影响了使用者做出下一个决定所要花费的时间 (这个时间被称为用户响应时间) ,换句话说,计算机相应的时间越长,用户就要花费越多的时间来思考和决定下一步的操作。

    这是交互动画为什么建议在 400ms 左近时长的原因,无论太快还太慢,都不利于我们操作的反馈和决策。

    原文阅读 →

  3. 菲茨定律 Fitts' Law


    任意一点移动到目标中心位置所需要的时间,与目标距离正相关,与目标大小负相关。

    —— Paul Morris Fitts

    https://mmbiz.qpic.cn/mmbiz_png/LjlYomQkqFSDX434zNRvPibhYyPNbrxvnQRdYCq1drtqtv27rca5SpFsU7TBlhKGnpC56PqbvdJ1fcrPTgIfhCA/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

    人们做出一个移动指针的操作通常需要两步:

    1. 第一步:将指针快速移动至目标大致所在的区域;
    2. 第二步:精细调节指针的位置以达到可点击的区域;

    菲茨定律所包含的两点内容:

    1. 指针当前位置与目标间的距离 D 越长,所需时间越长;
    2. 目标的宽度 W 越大,所需时间越短。

    原文阅读 →

  4. 希克定律 Hick's Law


    决策所需要花费的时间随着选择的数量和复杂性增加而增加。

    —— William Edmund Hick & Ray Hyman

    案例1:APP Store 新旧版本对比

    案例1:APP Store 新旧版本对比

    改版后的 APP store 减少了选项的数目,便于集中用户的注意力,更能便于我们决策,增加用户对浏览首页的欲望和动力。

    尽可能缩减用户一次决策中出现的选项,且在已经有多个选项时,不要增加选项的复杂度。

    原文阅读 →

  5. 雅各布定律 Jakob's Law


    用户将大部分时间花在别人家的网站 (产品) 上,而不是你的。这意味他们希望你的网站 (产品) 跟别人的有相同的操作方法和使用模式。

    —— Jakob Nielsen

    案例1:商品详情页

    案例1:商品详情页

    在国内,不论是淘宝、造作、网易云音乐,不论是合家欢风格还是性冷淡风格,甚至不论是不是电商 APP ,只要涉及到商品的详情页面,版式都高度相似,上方是图片,中间描述,底部悬浮的操作区域,这也是用户最熟悉、最容易接受的排版。

    而和这种做法相违背是会造成用户极大的抵触和厌烦的,亚马逊中国就是一个非常好的例子。

    原文阅读 →

  6. 简洁法则 Law of Prägnanz


    为了更方便的理解这个世界,人类会将接受到的大量信息进行过滤和简化!

    —— Max Wertheimer

    几何形的识别难度

    几何形的识别难度

    在简洁法则的影响之下,我们所看到的几乎所有界面都呈现出一定的几何规律,绝大多数界面中的组件/控件,不论它到底是不是真正的几何,在大脑中都会呈现出它是几何形的印象。

    所有几何形中,识别负荷大致为圆形≈矩形≤凸多边形<凹多边形。

    正因如此,在较为界面较为复杂的场景下应用更易识别的几何形作为基础视觉形状,这是简洁法则最简单直接得应用。

    原文阅读 →