生图提示词手册
首页 视觉设计 4个金刚区的图标设计交互要点

4个金刚区的图标设计交互要点

前言:金刚区基本是APP设计中常见的一个重要区域,它的设计比重是很关键的,关于如何做好金刚区的设计体验与细节,请看本文的分享。 金刚区是什么,想必大家都有所了解。 没有的话看这张图…

前言:金刚区基本是APP设计中常见的一个重要区域,它的设计比重是很关键的,关于如何做好金刚区的设计体验与细节,请看本文的分享。

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

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

4个金刚区的图标设计交互要点

图片来源:淘宝首页

我在微信上搜了一下,发现大部分讨论金刚区设计的文章,都是在讲怎么画图标。但是我自己在使用各大 APP 的过程中,发现很多金刚区并不是那么好用,而且这跟图标好不好看无关。

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

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

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

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

一、数量

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

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

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

4个金刚区的图标设计交互要点

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

……

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

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

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

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

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

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

4个金刚区的图标设计交互要点

二、顺序

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

4个金刚区的图标设计交互要点

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

4个金刚区的图标设计交互要点

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

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

4个金刚区的图标设计交互要点

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

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

4个金刚区的图标设计交互要点

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

三、颜色

仿真图标

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

4个金刚区的图标设计交互要点

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

数量较少

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

例如 QQ 音乐的金刚区UI设计:

4个金刚区的图标设计交互要点

数量适中

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

例如京东这样:

4个金刚区的图标设计交互要点

数量很多

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

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

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

4个金刚区的图标设计交互要点

四、样式

底框

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

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

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

4个金刚区的图标设计交互要点

这种图标数量少,有颜色区分还好,如果数量多又一个颜色,那就很难辨认了。风格纵观常见的金刚区图标,通常不外乎四种样式:线条、形状、2D、3D、仿真。

4个金刚区的图标设计交互要点

联通手机营业厅

4个金刚区的图标设计交互要点

QQ音乐

4个金刚区的图标设计交互要点

京东

4个金刚区的图标设计交互要点

美团外卖

4个金刚区的图标设计交互要点

每日优鲜

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

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

总结

我发现做设计时,从不同的角度会带来截然不同的思考。今天这篇分析,算是一个以交互体验为主,融合了一些视觉角度,希望带给大家一些灵感~如果你还有什么 idea,欢迎在评论区探讨~

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

艺术感满满的啤酒包装设计

艺术感满满的啤酒包装设计欣赏 生成海报 下载海报

香薰包装设计

香薰包装设计 生成海报 下载海报

肥料包装设计欣赏

肥料包装设计是产品营销的关键环节之一,良好的包装设计能够吸引消费者的注意力,激发他们的购买欲望,并提升产品的形象和价值。...

宠物食品包装设计

宠物食品包装设计欣赏 生成海报 下载海报

宠物食品包装设计欣赏

宠物食品包装设计欣赏 生成海报 下载海报

发表回复

返回顶部