那些很熟悉但又叫不出名字的设计法则:约束法则 - 优设网 - UISDC

那些很熟悉但又叫不出名字的设计法则:约束法则

2018/10/02 6995评论区

约束法则:一种限制在某一系统中可操作的方法。牵引绳的作用之一是约束狗子的行为,同样约束法则也可以限制用户的可能动作。

想看更多设计法则,这个专题里全都有:设计法则专题

举个例子:如下图,用户在没有输入购买金额的时候,按钮置灰,无法进行下一步操作。适当的运用约束法则,会大大降低用户错误操作概率,提升效率。

一、约束法则分类

约束法则有两种基本形式:实体约束和心理约束。

二、实体约束

「实体约束」是指用具体方法使物体运动改变其方向,以限制其可能运动的范围。如果想对无用的输入降低操控灵敏度,并拒绝某些输入,「实体约束」会很有帮助。「实体约束」分为三种:路径、轴线与障碍。

1. 路径

利用沟或槽进行直线或曲线移动。遇到控制变数的范围相对较小又受限的情况,「路径」很有效。

举个例子:下图是虾米和网易云音乐的播放界面,其中控制栏可以调整歌曲播放位置。

2. 轴线

做出旋转动作,可在小空间里提供无边的控制。若是控制的表面范围有限,或者控制变数很大或没有限制的情况,「轴线」很有效。

举个例子:在播放器的高阶使用中,用户可以打开均衡器界面,传统的均衡器通过对各种不同频率的电信号的调节来补偿扬声器和声场的缺陷,这个页面是对实体声音均衡器的模仿,页面中的功能使用方式也同实体相似,以匹配用户心理模型中的使用方式,其中出现了路径约束和轴线约束两种实体约束方式。

Trackball 也是轴线约束的应用之一,打游戏的同学应该深有体会。

△ logitech wireless trackbal

3. 障碍

限制力量或使力量改变方向,阻碍周围的力量停止、减缓或改变方向。要拒绝不合适的动作时,「障碍」就很有效。

举个例子:不论是模态或者非模态的弹窗都是障碍约束的应用之一,弹窗是为了让用户回应,需要用户与之交互的窗口。非模态弹窗一般被设计成用来告诉用户信息内容,而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。尤其是模态弹窗,会打断用户的操作行为,强制用户必须进行操作,否则不可以进行其他操作,有强烈的障碍约束成分。

△ 模态与非模态弹窗

三、心理约束

「心理约束」利用人们对世界的感知与想法,限制可能动作的范围。「心理约束」分为三种:象征、惯例和映射。

1. 象征

利用语言传达意义,来影响人们的行为。把视觉、听觉或触觉的呈现方式,运用在标签、解释或警告的目的时,「象征」方式很有效。

举个例子:图标是「象征」的实际应用。首页的入口,都会有图标和文字来解释入口所进入的二级页面。

我们在支付成功后,就会出现「√」,用户在看到这个图标后,即使不看文字,也会明白自己操作成功了。相反,如果页面显示「×」,用户就会明白支付失败。一些产品会在此增加情感化的设计,这些巧妙的小插画会用「象征」来传达页面信息。

2. 惯例

根据承袭的传统或习惯,进而影响人们的行为。要想使得系统一致又容易使用,「惯例」非常有效。

举个例子:红色代表的警示、停止,绿色代表的是前进。我们再来看支付界面,表示支付成功的图标大多是绿色的,也有一些产品选择自己的品牌颜色作为支付成功的图标颜色,但是很少看到在支付成功页面单独运用具有警示含义的红色。

惯例还要遵循地方文化,例如在日本「√」的意思代表的是错误,圆圈则代表正确。《柯南》中有一位老师因为错用符号引来了杀身之祸。《哆啦A梦》中大雄的考卷经常也是全篇「√」。

△ 大雄惊人的算数水平

3. 映射

根据对元素彼此关系的感知,来影响人们的行为。如果要根据操控装置的能见度、位置与外表、来暗示哪些是可能动作,「映射」会很有帮助。

举个例子:播放器中「上一个」与「下一个」按钮总是对应的,如果单看一个按钮,用户会很难理解,只有成对的出现才能理解图标的含义。

我们在选择支付方式的时候,可用的银行卡是高亮的,那些不可用的支付选项则是置灰的,只有在两者同时出现时,用户才会更加了解两者的区别,做出正确的选择。

小结

为什么说「约束法则」很像「牵引绳」?并不是我们要训练用户去做什么,而是要给用户提供最简单、最便捷的使用路径,让使用中可能出现的错误概率降到最低,这种做法更像是在为用户指引。「实体约束」会让用户的输入降到最少,避免用户的犯错,给用户「选择」而不是让用户「创造」,「实体约束」也可以避免用户的危险动作。「心理约束」可以让用户根据自己的直觉来操作,减少用户的学习成本。

欢迎关注作者的微信公众号:「二手设计」

图片素材作者:Burnt Toast Creative

「延伸阅读,优秀体验的提示设计」

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/design-rules-constraint

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

界面设计 设计圈干货 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里