文章预计阅读5分钟
原创： 师维/文 海燕/图
“别小看任何一个元素，形状、色彩、材质、图案、字体，都能影响到用户体验。”
一个小小的按钮，包含哪些知识呢？
为什么用这种颜色呢？
为什么要做这么大呢？
为什么要输出几张图片呢？
放在哪里合适？
这些都是非常基础的知识，
也是很多体验问题的原因。
01
—
接一个需求
刚工作第一天，
领导丢过来个需求，要求做一个按钮。
……
接一个需求
小梵想，按钮简单啊，
很快就画好一个发过去，
没想到被领导打过来说不行！
要重新再做……
02
—
有什么要求
小梵看着自己做的按钮，饱满诱人还亮晶晶的，咋就不行呢？
小梵到群里请教……
Piupiu：按钮要与整个风格搭配啊！
小梵：怎么看出风格不搭配呢？
Piupiu：可以从最基本的图形、色彩、质感看得出来。如果美术画面中有很多圆润的形状，那么按钮也可以尝试相同的圆角。
小梵：按钮不是要突出吗？
美琪：可以有很多方式啊~
有什么要求
03
—
有什么关系
一个按钮需求终于完结了，
松了口气
这次的需求是要求重新做一个界面上的两个按钮。
通过沟通，小梵问清楚每个按钮的不同功能，
明白了做按钮还要考虑交互相关知识，
放在哪里更合适，还要分清主、次关系。
有什么关系
主要按钮视觉表现力最强，次要稍弱。
次要按钮弱化了，主要按钮相对就突出了。
可以通过颜色、阴影、大小、留白、装饰等等方式来做出差异化。
04
—
有什么规则
终于做好了按钮，小梵输出好文件给程序，结果说不对啊？
小梵向开发人员请教了过往的输出记录，
才知道不止输出一个文件……
有什么规则
通过这件事，小梵知道了不同平台，有不同的规则，输出前一定要做好沟通~
05
—
有什么变化
通过更多的工作需求，
小梵了解到为什么要这样设计，
比如心理学研究告诉我们，
原始的简单的符号会给人更加明确的指引。
有什么变化
另外也明白为什么想法很有创意，
但是却不被认可呢？
这是因为需求的变化，
如果创意不依附于需求之上，
都是不合时宜的。
06
—
有什么细节
小梵在本子上记录下，
不同的颜色和形状，都会创造不同的设计语言，
会影响到按钮带给人最直观的感受。
方形，四平八稳，给人一种稳定的感觉；
圆形，珠圆玉润，给人一种很活泼的感觉。
有什么细节
同一个颜色，不同的饱和度，
也会给人一种感受。
比如鲜亮的黄色给人一种很活泼的感觉。
但是降低饱和度之后变成金色，
会传达给用户一种很成熟的感受。
07
—
更多的知识
工作中不断的解决问题，
小梵学习到，还有很多心理学原理，
被广泛的运用到设计中。
更多的知识
费茨定律、希克定律也给设计带来启示，
如按钮应该尽量显眼些，被安排在靠近用户可能点击的地方。
如所做选项的数目越少，所花费的决定时间可能越少。
自己的工作还是很有成就感的~
按钮设计小贴士
大家可能都知道，谷歌网站界面除了一般搜索按钮之外，还有一个“手气不错（I ’m Felling Lucky）”按钮。它可以绕过繁琐的搜索结果页面，直接带领用户前往首个结果网站。早在2007年广告分析公司PAPT的汤姆▪查韦斯预计，谷歌每年因用户使用“手气不错”按钮而减少的广告收入高达1、1亿美元。
那谷歌为什么要将这样的功能放在首页呢？
一方面如果你相信谷歌搜索引擎的智能，你会经常使用它，并且可以更快速带你到达想去的页面。
另一方面这个按钮提供了很好的内部反馈机制，激励谷歌员工始终确保搜索引擎算法足够优秀，以便更多人选择点击它。
从用户角度来看，这个按钮创造了有趣和随机的体验，让用户喜欢上这种感觉。
《愤怒的小鸟》这款游戏中有非常多优秀的案例，其中“疯狂小鸟神鹰”在玩的尽兴，但屡次不过关的时候（处于高动机））会弹出一个界面按钮，文案是“卡在一个等级不能玩了？这里有无敌神鹰！”而其付费转换率为40%。
游戏UI中有很多创意的动态表现，可以根据不同的场景做出更有趣的设计。比如木板—翻转、泡泡—爆破，当用户点击按钮时，还包括夸张的声音反馈。然而也要思考这个游戏或者这个系统需要这样设计吗？要考虑用户的感知与注意的极限，过多无意义的设计带来疲劳。
我们的设计提升空间非常多，不仅是在视觉和交互上，甚至在时间上都会带来不同的结果。所以，一个小小的按钮，有着大大的作用呢~
— END —
《游戏UI设计：修炼之道》京东、天猫、亚马逊均有售！
网友评论