前端_有关设计的52条原则
有关产品、UI、前端设计的52条规则
前端_有关设计的52条原则-MakerLi

1、二八定律(帕累托法则)

20%的数量决定了80%的结果

示例:表单单选默认选项可以选中最常用的选项。

2、功能越多-代价越大

应用会因为多功能而变得平庸

3、成本效益

产品效益=新的体验-旧的体验-替换成本

4、曝光效应

除开厌恶的事物,或者无意义的曝光外,多次出现或提及会增加用户的喜爱程度(或者好奇心)

示例:多次出现的横幅广告。或者推送的消息

5、形式追随功能

功能优先,先实现功能再优化样式,样式根据当时的功能进行开发

示例:表单金额、百分比输入不应该与正常文本输入同长度,因为没有这么长的金额或者百分比

6、奥卡姆剃刀

哲学上,一个证明题,用最少的步骤证明,说明这个方法更优越

示例:百度搜索入口页,与360搜索对比。百度更简单明了

7、古腾堡图表

人的阅读方式从左至右,从上到下,所以左上角比右下角的关注度成倍增长

示例:弹窗,标题应放在左上角吸引注意,重要操作需要放到右下角减少操作负荷。

注意:信息均匀分布才有此规律,图片、加黑标题、阅读习惯等会影响此规律

8、菲兹定律

目标越大,距离越近,越容易达到。

这个规律可以运用到生活中:

订小而短的人生规划

工作中:

写代码时先拆分任务,并写好注释

示例:重要操作按钮可以放大尺寸,并占满整行,易于点击

9、席克定律

选择越多,所花的时间就越长

示例:导航栏不应该将所有链接都平铺,但是用户不好选择

注意:思考类型的阅读不适合减少内容

10、米勒定律

人的处理信息能力是有限的,最多处理5-9个,超过九个容易出错,也就是常说的7+2法则。4个为最佳

示例:底部导航按钮普遍为3-5个,银行卡号4个数字为一组,金额3个为一组

11、泰斯勒定律

复杂度守恒定律,复杂度总是存在,是工程师宁愿花一周时间减少复杂度,还是让百万用户多花一分钟,这得看产品需求综合分析。

示例:输入框在搜索用户等确定的选项时,可以采用自动联想功能

12、多尔蒂门槛

系统需要在0.4秒内对操作做出响应,这样才能保持使用者的专注,让人着迷。

示例:

  1. 可以在App应用中添加骨架屏,填充等待时间,减少等待焦虑
  2. 我们大脑在0.1s内对图像有意识,平均反应时间是0.25s,所以简单动画在0.1s内完成,复杂动画在0.5s内完成
  3. 网页加载也可以使用压缩体积,gzip等压缩方法

13、认知加工层次

一般来说,经过分析的信息会比简单信息更容易被记住。通过交互得来的信息更容易被记住。

14、垃圾进垃圾出

简单来说计算机的输出结果取决于输入结果,除非有设计干预

示例:在表单输入中,可以使用确认密码,提前校验等操作提示用户,减少了不必要的提交与等待结果

15、五架帽理论

其实就是五中信息组织方法:类别、时间、地点、字母表、连续感。根据这五种组织信息是最有效的方法。

16、倒金字塔结构

信息的重要性递减,将最重要的信息放在首位。

示例:无论是设计图标、还是总结文章,最重要的信息应该放在最前面

17、干扰效应

有两个以上的任务交替时,会影响使用者的思维逻辑

示例:相比于一列图标,两列图标会干扰使用者。

18、图优效应

图像和文本对比、图片更容易被记住。因为图片在大脑中被编码了两次,而图片只有一次。

示例:新闻中首页图片应该在显眼位置

19、宜家效应

消费者在DIY自己的产品,会产生对价值的认知过高,投入感情越多,付出时间越多,物品的意义就越大。

示例:产品提供制定主题,或者装扮空间来提升对产品的好感,会有更高的留存。

20、框架效应

人的决策会被表达方式影响,在逻辑相似的不同说法下,会有不同的判断。在人际沟通中,关键不在于说什么,而在于怎么说。

示例:大多数情况下,正面叙述的框架有更高的使用和转化率。

21、期望效应

在潜意识中,积极的期望能影响行为,反之亦然。

示例:比如完成任务后,展现部分其他人获得的结果,会促使用户更积极的投入行动中

22、蔡加尼克效应

没有被完成或被中断的任务让人更佳深刻

示例:文章中的继续阅读,获取全文等能增加交互与增加记忆力

23、确认性操作

在关键操作的时候需要二次弹窗确认,避免失误

注意:确认性弹框不能频繁出现,弹窗文案不能让用户产生排斥。

24、渐进呈现

交互中需要减轻用户的浏览压力,通过逐步披露信息改善用户体验。

示例:可以将低频操作收录在更多中,避免浏览压力

 

25、共同命运原则

相同轨迹、相同速度移动的对象会被默认视为一组

示例:可将同组tab设置为同一方向移动,不同组的设置为不同方向

26、布拉格南斯定律

人在处理样式多变的形状时,会自动将复杂化为简单。

示例:将图形和内容排版成视作整体的形式,从而降低理解的时间成本

27、映射关系

针对物联网领域,控制区域与被控制区域应该有强关系映射。

28、马斯洛需求层次

用户需求分为功能、可靠、实用、熟练、创造,产品设计、代码也如此。

29、一致性

视觉或者交互的一致性会提升产品的易用性和认知效率。

示例:图标、按钮都应该设置相同样式

30、对比性

同一区域内,通过突出优先级和重要性更高的元素来实现对比。

示例:例如弹窗的取消、确定按钮。确定按钮添加主题色

注意:过多的对比会产生过多视觉焦点

31、邻近性

用户会将物理距离近的认为有强相关性

示例:在新闻、列表等样式中,邻近性原则可以帮助用户更好地感知内容

32、均质连接

用线条或者方框连接在一起的元素比单独或者邻近更加关联

33、图底关系

一定范围内,图形与背景对比越大,位置越突出,图形越容易被发现。

34、连续性

用户倾向将线按原有的方向平滑企且连续地延伸。

示例:移动端的滑动tab经常使用这个原则,还可以故意留一半提示用户,此模块可以滑动

35、恒常性

用户对于熟悉的事物认知常常保持不变

示例:可以用这一个特性让自己的产品和主流参评保持不变,例如按钮,操作等

36、对齐

对齐可以增加统一性和增强凝聚感,提高整体的稳定性和美观度。

示例:列表等对称页面多用栅格系统布局,让页面看起来更严谨美观

37、模块化

将复杂系统分解成几块可独立运行的子系统管理方式、利于系统本身的维护、测评和迭代

示例:例如UI组件库就是利用原子模块化的方式进行的

38、图层化

将相关的信息组合在同一层。能够加强他们之前的联系,能使复杂的问题分层简单化,焦点集中,便于人们理解

示例:例如蒙层弹框、蒙层引导、阴影等

39、约束性

限制用户行为,来避免错误操作发生。利用符号等影响认知和思维,物理约束来限制无意识的输入并阻止危险的发生。

示例:通过标识传递危险信息,警示用户,避免危险行为

40、宽容性

在之前说了有约束性防止用户错误操作,当错误发生后应该具备可逆性

示例:表单有缓存功能

41、趋同性

很多相同或者相类似的产品最后他们的创意和产出都会和其他产品趋同

示例:竞品相同

42、心流

心流指的是用户全身专注某个事情或者任务时,经常忘记时间以及对周围环境的感知。

示例:短视频页面整洁,去掉了不相关的操作,沉浸式体验。

43、正态分布

正态分布中大部分数据接近平均值,偏离平均值的分布在两侧。也可以结合长尾模型,利用正态分布的两侧。打造产品

示例:操作正态分布呈F形,大部分集中在导航栏附近。说明该产品要突出导航栏的样式。

44、期望路线

用户在无偏见的状态下使用产品的交互和痕迹,直到产品设计得到优化

45、反馈环

旧的输出会作为新的输入反馈到系统,对下一次的输出造成影响。

示例:APP常用的反馈渠道

46、留白感知

用户倾向于用物品或元素填满空白处而不留剩余空间,对于不同诉求的用户群体,留白与否所产生的体感不同。

示例:留白感知并不是一个绝对的设计规则,对于需要体现质感和高级感的场景使用留白,对于对效率和信息密度有诉求的场景避免使用太大的留白。

47、防止功能蔓延

功能蔓延是指在产品的开发过程中,有趋向性地进行新特性的不断扩张和增加。这会加大产品的使用难度,也会导致预算与时间成本的增加。当一个工具集合了过多功能时,会大大增加用户的使用成本。

48、提高信噪比

信噪比是指相关信息与不相关信息的比值。信噪比原指电子设备中信号与噪声的比例,信噪比越高,信息的传输质量越好。设计中追求高信噪比,可以提升信息触达的有效性,从而带来更好的用户体验。

示例:通过隐藏与目前用户主要目的不相关的信息和功能入口,能够提高信噪比,带来更好的使用体验。鼠标移入再删除等。

49、心智模型

产品需要考虑到目标人群的心智模型,参考其既定惯例和行为方式。

示例:红色在普遍定义中,代表着警告错误。在部分文化中也有代表好运。

50、委员会设计

指的是由多人组成的集体一起做决定,并不停反复修改设计的过程。时间充裕情况下,能降低风险,产品精密且多元。单人会耗时短,但风险高。具体需求要具体分析。

51、满意解决模式

在限定条件下,寻求足以解决问题的方案,而非最优方案。

52、克服非我发明症

对于不是自己所处的社会群体提出的想法和创新事物,人们可能会持排斥的心理倾向