恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【新手笔记】按钮看这一篇就够了
0.0°
2018-12-07 原创文章 经验/观点 举报 1691 3 3 0

“别小看任何一个元素,形状、色彩、材质、图案、字体,都能影响到用户体验。”

文章预计阅读5分钟

原创: 师维/文 海燕/图Image title

 一个小小的按钮,包含哪些知识呢?

为什么用这种颜色呢?

为什么要做这么大呢?

为什么要输出几张图片呢?

放在哪里合适?

这些都是非常基础的知识,

也是很多体验问题的原因。


 

 


01


接一个需求



刚工作第一天,

领导丢过来个需求,要求做一个按钮。

……

Image title

小梵想,按钮简单啊,

很快就画好一个发过去,

 

没想到被领导打过来说不行!

要重新再做……


 

 


02


有什么要求

 


小梵看着自己做的按钮,饱满诱人还亮晶晶的,咋就不行呢?

 

小梵到群里请教……

 

Piupiu:按钮要与整个风格搭配啊!

小梵:怎么看出风格不搭配呢?

Piupiu:可以从最基本的图形、色彩、质感看得出来。如果美术画面中有很多圆润的形状,那么按钮也可以尝试相同的圆角。

小梵:按钮不是要突出吗?

美琪:可以有很多方式啊~

Image title

终于明白问题出在哪里了~

尺寸比例上更大,会让人感觉更重要;

用互补色或是更亮一些,也可以吸引注意力。




 


03


有什么关系



一个按钮需求终于完结了,

松了口气

这次的需求是要求重新做一个界面上的两个按钮。

 

通过沟通,小梵问清楚每个按钮的不同功能,

明白了做按钮还要考虑交互相关知识,

放在哪里更合适,还要分清主、次关系。

Image title

主要按钮视觉表现力最强,次要稍弱。

次要按钮弱化了,主要按钮相对就突出了。

可以通过颜色、阴影、大小、留白、装饰等等方式来做出差异化。




 


04


有什么规则

 


终于做好了按钮,小梵输出好文件给程序,结果说不对啊?

 

小梵向开发人员请教了过往的输出记录,

才知道不止输出一个文件……

Image title

通过这件事,小梵知道了不同平台,有不同的规则,输出前一定要做好沟通~




 

 


05


有什么变化

 


通过更多的工作需求,

 

小梵了解到为什么要这样设计,

比如心理学研究告诉我们,

原始的简单的符号会给人更加明确的指引。

Image title

另外也明白为什么想法很有创意,

但是却不被认可呢?

这是因为需求的变化,

如果创意不依附于需求之上,

都是不合时宜的。





06


有什么细节



小梵在本子上记录下,

 

不同的颜色和形状,都会创造不同的设计语言,

会影响到按钮带给人最直观的感受。

方形,四平八稳,给人一种稳定的感觉;

圆形,珠圆玉润,给人一种很活泼的感觉。

Image title

同一个颜色,不同的饱和度,

也会给人一种感受。

比如鲜亮的黄色给人一种很活泼的感觉。

但是降低饱和度之后变成金色,

会传达给用户一种很成熟的感受。

 


 

 


07


更多的知识

 


工作中不断的解决问题,

小梵学习到,还有很多心理学原理,

被广泛的运用到设计中。

Image title

费茨定律、希克定律也给设计带来启示,

如按钮应该尽量显眼些,被安排在靠近用户可能点击的地方。

如所做选项的数目越少,所花费的决定时间可能越少。

 

自己的工作还是很有成就感的~


 





按钮设计小贴士


大家可能都知道,谷歌网站界面除了一般搜索按钮之外,还有一个“手气不错(I ’m Felling Lucky)”按钮。它可以绕过繁琐的搜索结果页面,直接带领用户前往首个结果网站。早在2007年广告分析公司PAPT的汤姆▪查韦斯预计,谷歌每年因用户使用“手气不错”按钮而减少的广告收入高达1、1亿美元。

那谷歌为什么要将这样的功能放在首页呢?

一方面如果你相信谷歌搜索引擎的智能,你会经常使用它,并且可以更快速带你到达想去的页面。

另一方面这个按钮提供了很好的内部反馈机制,激励谷歌员工始终确保搜索引擎算法足够优秀,以便更多人选择点击它。

从用户角度来看,这个按钮创造了有趣和随机的体验,让用户喜欢上这种感觉。

 

《愤怒的小鸟》这款游戏中有非常多优秀的案例,其中“疯狂小鸟神鹰”在玩的尽兴,但屡次不过关的时候(处于高动机))会弹出一个界面按钮,文案是“卡在一个等级不能玩了?这里有无敌神鹰!”而其付费转换率为40%。


游戏UI中有很多创意的动态表现,可以根据不同的场景做出更有趣的设计。比如木板—翻转、泡泡—爆破,当用户点击按钮时,还包括夸张的声音反馈。然而也要思考这个游戏或者这个系统需要这样设计吗?要考虑用户的感知与注意的极限,过多无意义的设计带来疲劳。

我们的设计提升空间非常多,不仅是在视觉和交互上,甚至在时间上都会带来不同的结果。所以,一个小小的按钮,有着大大的作用呢~



 

— END —


《游戏UI设计:修炼之道》京东、天猫、亚马逊均有售!









更新:2018-12-07

收藏

3人已收藏

  • 10

    作品

  • 24

    粉丝

  • 2

    关注

  • 【修炼篇】职场十字路口,选择专家线还是管理线?
  • 【进阶篇】没有超级项目,如何构建专业深度?
  • 【入门篇】没有业余时间,如何提升专业能力?
  • 【新手篇】没有项目经验,如何进入游戏行业?

    猜你喜欢

      2018-12-07 原创文章 经验/观点 举报 1691 3 3 0

      【新手笔记】按钮看这一篇就够了

      0.0°

      你确定要举报【新手笔记】按钮看这一篇就够了

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年12月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      3
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录