Alice

我在微信上搜了一下,发现大部分讨论金刚区设计的文章,都是在讲怎么画图标。但是我自己在使用各大 APP 的过程中,发现很多金刚区并不是那么好用,而且这跟图标好不好看无关。我今天就来总结一下,对于金刚区设计的交互/体验思考。

金刚区是什么,想必大家都有所了解。

没有的话看这张图就懂了:

图片

图片来源:淘宝首页

 

我在微信上搜了一下,发现大部分讨论金刚区设计的文章,都是在讲怎么画图标。

但是我自己在使用各大 APP 的过程中,发现很多金刚区并不是那么好用,而且这跟图标好不好看无关。

金刚区设计不好,会对我的使用造成直接影响:

  1. 不够清晰易懂根本不想去看
  2. 首次使用找不到需要的内容
  3. 下次使用记不住图标的样子
  4. 图标设计得怪怪的不好理解

我今天就来总结一下,对于金刚区设计的交互/体验思考:

  • 数量
  • 顺序
  • 颜色
  • 样式

 

数量

金刚区里有多少项比较合适?

这其实是米勒法则(Miller’s Role)的典型运用了。

如果你还不太了解米勒法则,看看下面这张图里的词语:

图片

现在,半分钟回忆一下,你记住了多少个?

……

大部分人能记住 5~9 个。

米勒的研究发现,普通人的工作记忆(Working Memory)只有 7±2 个信息块。

如果给的信息超出了这个数字,大部分人也只能记住这么多。

所以说,金刚区里的图标数量,最好也维持在这个数,否则就是对用户的记忆能力要求过高了。

通常来,4 个图标很轻松,说 6 个图标是比较理想的,8~9 个就有点吃力了,10 个就超纲了。

例如支付宝这个就过分了,好在这只是工具类产品,复杂一点也没办法:

图片

 

顺序

人们在看阅读文字时,视线轨迹是之字形:

图片

人们在阅读表格时,视线轨迹是除草机形:

图片

上图来源:这样设计表格,看着真难受!

 

虽然金刚区的眼动图我没有,但第一步肯定是从左上角开始往右扫。

图片

所以,用户最有可能使用的图标,应该从左到右排在最上面一行,最不常用的可以排在右下角。

例如美团外卖这个设计,看着就挺合理。不但把重要内容放在第一行,而且还做了很大的视觉区分:

图片

不过一些不愁流量的 APP 会选择把黄金位置用做商业宣传,难免损失点易用性。

 

颜色

仿真图标

如果追求质感,多半会使用物品本身的颜色,例如每日优鲜这个:

图片

这种图标就没什么颜色好讨论了,注意一下整体和谐就好。

 

数量较少

如果图标数量不多可以使用一个颜色,那么颜色上,同样没什么好讨论的。

例如 QQ 音乐:

图片

 

数量适中

如果图标数量在 7 个左右或以内,那么可以每种颜色的图标都来一个,这样用户也能记住大概什么颜色代表什么。

例如京东这样:

图片

 

数量很多

图标数量远超过 7 时,就不可能每种颜色来一个了,否则颜色都不够用了。

如果还是想要划分颜色,可以将类型作为依据,这样用户在寻找图标时会比较有方向。

当然,其实也可以简单点,干脆都一个颜色,例如联通手机营业厅:

图片

 

样式

底框

一些产品为了统一感,会用圆圈或者圆角矩形,把所有图标都框起来。

这样视觉上是好处理了,但交互上很不推荐,因为会大大降低图标的识别度,眨眼一看都长一样。

这种底框在主流产品里已经很少见了,不过这么做的设计师还是不少,至少站酷上可以找到很多:

图片

这种图标数量少,有颜色区分还好,如果数量多又一个颜色,那就很难辨认了。

 

风格

纵观常见的金刚区图标,通常不外乎四种样式:线条、形状、2D、3D、仿真。

图片

联通手机营业厅

 

图片

QQ音乐

 

图片

京东

 

图片

美团外卖

 

图片

每日优鲜

 

任何样式都能让用户识别和记忆,但是不同的样式给人的感官不同。

真实性越高的视觉样式,就越容易给人高级的感觉;相反真实性越低的视觉样式,越容易给人简单边界的感觉。

 

总结

我发现做设计时,从不同的角度会带来截然不同的思考。

今天这篇分析,算是一个以交互体验为主,融合了一些视觉角度,希望带给大家一些灵感~

如果你还有什么 idea,欢迎在评论区探讨~

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网 » 金刚区也要考虑交互,不只是画图标而已

登录收藏
 
你可能喜欢的:
B端产品C端化,抱歉我想的太简单!B端产品C端化,抱歉我想的太简单!
详解|可用性测试,看这一篇文章就够了!详解|可用性测试,看这一篇文章就够了!
测试了新手指引方案,总结下失败经验测试了新手指引方案,总结下失败经验
如何强化图标设计的细节?我总结了12个关键点!如何强化图标设计的细节?我总结了12个关键点!
体验设计构建品牌价值-打造影响用户心智的价值连接体验设计构建品牌价值-打造影响用户心智的价值连接
总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!
私域营销推广设计3大趋势--校园招聘产品推广研究私域营销推广设计3大趋势–校园招聘产品推广研究
结合项目来聊聊UI设计师的多面性结合项目来聊聊UI设计师的多面性
这个交互思路,居然将转化率提升50%这个交互思路,居然将转化率提升50%
展开全文后需要支持收起吗?从运用场景分析交互逻辑展开全文后需要支持收起吗?从运用场景分析交互逻辑