金刚区是什么，想必大家都有所了解。
没有的话看这张图就懂了：
图片来源：淘宝首页
我在微信上搜了一下，发现大部分讨论金刚区设计的文章，都是在讲怎么画图标。
但是我自己在使用各大 APP 的过程中，发现很多金刚区并不是那么好用，而且这跟图标好不好看无关。
金刚区设计不好，会对我的使用造成直接影响：
- 不够清晰易懂根本不想去看
- 首次使用找不到需要的内容
- 下次使用记不住图标的样子
- 图标设计得怪怪的不好理解
我今天就来总结一下，对于金刚区设计的交互/体验思考：
- 数量
- 顺序
- 颜色
- 样式
数量
金刚区里有多少项比较合适？
这其实是米勒法则（Miller’s Role）的典型运用了。
如果你还不太了解米勒法则，看看下面这张图里的词语：
现在，半分钟回忆一下，你记住了多少个？
……
大部分人能记住 5~9 个。
米勒的研究发现，普通人的工作记忆（Working Memory）只有 7±2 个信息块。
如果给的信息超出了这个数字，大部分人也只能记住这么多。
所以说，金刚区里的图标数量，最好也维持在这个数，否则就是对用户的记忆能力要求过高了。
通常来，4 个图标很轻松，说 6 个图标是比较理想的，8~9 个就有点吃力了，10 个就超纲了。
例如支付宝这个就过分了，好在这只是工具类产品，复杂一点也没办法：
顺序
人们在看阅读文字时，视线轨迹是之字形：
人们在阅读表格时，视线轨迹是除草机形：
上图来源：这样设计表格，看着真难受！
虽然金刚区的眼动图我没有，但第一步肯定是从左上角开始往右扫。
所以，用户最有可能使用的图标，应该从左到右排在最上面一行，最不常用的可以排在右下角。
例如美团外卖这个设计，看着就挺合理。不但把重要内容放在第一行，而且还做了很大的视觉区分：
不过一些不愁流量的 APP 会选择把黄金位置用做商业宣传，难免损失点易用性。
颜色
仿真图标
如果追求质感，多半会使用物品本身的颜色，例如每日优鲜这个：
这种图标就没什么颜色好讨论了，注意一下整体和谐就好。
数量较少
如果图标数量不多可以使用一个颜色，那么颜色上，同样没什么好讨论的。
例如 QQ 音乐：
数量适中
如果图标数量在 7 个左右或以内，那么可以每种颜色的图标都来一个，这样用户也能记住大概什么颜色代表什么。
例如京东这样：
数量很多
图标数量远超过 7 时，就不可能每种颜色来一个了，否则颜色都不够用了。
如果还是想要划分颜色，可以将类型作为依据，这样用户在寻找图标时会比较有方向。
当然，其实也可以简单点，干脆都一个颜色，例如联通手机营业厅：
样式
底框
一些产品为了统一感，会用圆圈或者圆角矩形，把所有图标都框起来。
这样视觉上是好处理了，但交互上很不推荐，因为会大大降低图标的识别度，眨眼一看都长一样。
这种底框在主流产品里已经很少见了，不过这么做的设计师还是不少，至少站酷上可以找到很多：
这种图标数量少，有颜色区分还好，如果数量多又一个颜色，那就很难辨认了。
风格
纵观常见的金刚区图标，通常不外乎四种样式：线条、形状、2D、3D、仿真。
联通手机营业厅
QQ音乐
京东
美团外卖
每日优鲜
任何样式都能让用户识别和记忆，但是不同的样式给人的感官不同。
真实性越高的视觉样式，就越容易给人高级的感觉；相反真实性越低的视觉样式，越容易给人简单边界的感觉。
总结
我发现做设计时，从不同的角度会带来截然不同的思考。
今天这篇分析，算是一个以交互体验为主，融合了一些视觉角度，希望带给大家一些灵感~
如果你还有什么 idea，欢迎在评论区探讨~
原文地址：体验进阶（公众号）
作者：设计师ZoeYZ
转载请注明：学UI网》金刚区也要考虑交互，不只是画图标而已
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务