LD | 前端一定要知道的设计常识(一) | 席克定律

[ 友情提醒 多图杀流量 ]

前端和设计的日常

你确定这是我给你切的图?

为什么这里的图标这么小?

这个间距不对!

点这个按钮为什么没有弹一下!

这个定位少了1PX!

╰（‵□′）╯ 你到底有没有按照我的图做啊

...

TOT 哭晕在厕所有没有~

前端作为实现用户与产品之间硬连接的存在, 在日常工作中少不了被设计姐姐亲切的问(qiang)候(po). 不过仔细想想, 前端和设计是不分家的, 前端主动学习补充一些设计知识, 不仅可以拓宽知识面, 有利于职业生涯, 而且也是培养自己的美感的过程, 最重要的是可以吃上设计姐姐的糖(逃 ε=ε=ε=┏(゜ロ゜;)┛)

JS的高度灵活, 使得我们每一个人的代码思考和代码想法都能得到几乎详尽的表达, 为了使开发过程更加流畅, 我们在团队中可以通过代码模式, 编写出优良的代码结构, 减少项目的混乱程度, 或是通过ESLint规范团队成员的语法, 减少编辑器一打开代码全红而尴尬的概率), 以求达到标准. 在设计界其实也有这样的标准存在: 设计七大定律

我们今天介绍其中最易懂也最好用的一种, 席克定律

席克定律

我们先来看一张图:

假设我们要在这个列表中寻求某个角色, 第一感觉是不是要疯掉~ 那如果又是这样呢:

瞬间感觉界面清晰很多, 不过还可以更好:

席克定律主要描绘的就是这样一个场景, 当选项不断增加时, 我们下决定的时长就会增加.

通常情况而言, 选项数量和用户决定时长呈出类似下面的函数关系:

我们观察图片可以发现:

1. 用户有基础反应时间, 也就是只要有选项的情况下(就算选项数量只有一个), 用户仍然需要时间进行反应.
2. 当面对的选项数量越多, 用户需要的反应时长也相应增加.
3. 如果选项复杂度不同, 反应时间也会相应变化(主要反应在曲线的曲率变化上)

程序员最怕的BUG是找不到的BUG, 不过我们已经知道了席克定律的基本原理, 那反应在界面上常见的交互问题就很好解决了. 根据以上三点原理, 我们可以大致总结出这几点不同的解决方案:

1. 分步选择, 均分总复杂度到每一个步骤
2. 限制选项数量, 保留基本的选项
3. 控制单个元素的复杂度, 使页面简单好理解

我们用三个例子分别描绘这些解决方案:

分步选择

我们在网站搜索素材时, 种类繁多的素材总是让我们无所适从. 我们可以使用分类选择来均分每一个选择的步骤, 这样就能很快筛选出我们想要的素材了:

限制选项数量

虽然说, 右键打开菜单这个快捷设计很大程度上而言提升了使用鼠标时的幸福感, 但你们有没有觉得, 当选项数量一多的时候整个人都不好了. 我们对比一下两个软件, 当我在它的系统托盘区域点击右键时, 会弹出怎样的画面:

首先是一个Steam上免费的截图软件Sharex:

再是一个免费的文件搜索工具Listary:

哈哈, 差距超明显有没有, 右键点击后者的托盘, 我能很清晰的做出决定我将要做什么, 而面对ShareX庞大的选单时, 作为新手用户的我, 肯定是一脸黑线, 这简直就是折磨!

题外话: 并不是说哪个软件不好, 像ShareX这种功能强大的软件需要更高的学习成本, 是理所应当的. 我们最终关注的点不在设计定律, 而在用户, 当面对用户反应时间/出错率, 操作复杂度/功能复杂度等多方面维度的立体考虑时, 我们往往要结合具体的产品和对应用户做具体分析.

控制单个元素的复杂度

就像你做阅读理解, 虽然说每道阅读理解都只有4个选项, 但是, 简单的一下子就能做出来, 难的就死也做不出来一样 TOT

老师怎么用难题折磨你, 你就应该怎么去折磨你的用户, 你就应该怎么避免去用复杂逻辑折磨用户.

我们用谷歌登陆框举例, 登陆本身是没有复杂度可言的, 但是如果我们假设以下情况:

1. 用户使用手机登陆, 手机屏幕很小
2. 手机键盘很高, 容易遮挡用户视野
3. Input框如果设计的很小, 那么如果填错将难以修改

谷歌的应对方案是将登陆步骤拆分开, 填写用户名和填写密码作为了两个独立的逻辑存在, 一个页面只有一个模块, 在分步的基础上进一步降低了界面复杂度, 提高界面可用性, 减少用户反应时间.

拓展

Lionad : 规范是死的, 人是活的

咳咳, 上面那就话是我胡诌的.

我想说的是, 无论规范(代码规范, 设计规范)定义的多么严格, 我们总会有跳出规范施展手脚的时候, 比如著名的航天飞机式代码. 在具体的项目实施过程中, 我们通常会在规范的基础上融合多种通用的手段, 就像是我们上面介绍的三种减少用户反应时间的解决方案中, 他们自有某种相似的概念, 在某种程度上来说是可以通用的, 甚至我们还可以结合其它定律以通使用:

• 就像是分步解决的过程中, 通常要结合泰思勒定律, 考虑到整个系统的复杂度可压缩程度是有限的, 分步步骤需要仔细权衡;
• 限制选项数量的过程中, 我们可以使用奥卡姆剃刀原理, 剔除页面荣誉, 仅保留页面的基本元素, 如网易云音乐的车载模式;
• ...

这里还是需要再强调三遍: 理论不能脱离实际, 定律也应该结合具体项目使用

结语

通过上面的介绍, 我们对席克定律有了一个基本的认识, 我们就可以时常把他们代入到产品中进行思考啦, 只有在代入思考的过程中, 才能对这些定律有更加深刻的体会. 作为一个合格的前端, 通悉交互, 打磨页面, 不仅是对自己技术和职业的负责, 也是对用户的负责, 希望此文对你有所帮助, 看到这里都是真爱啊(笑.jpg) 请点赞 收藏 关注 三连击!

(我是Lionad, 剩下的几大定律随缘更新了, 欢迎私信交流 我逃 ε=ε=ε=┏(゜ロ゜;)┛ 反正你抓不住我~)