产品体验日记（1）-金刚区怎么设计？

这是我第一篇产品体验日记，产品体验对于UI设计师来说有多重要？拖这么久，还是决定做这件事😂。一方面加强知识储备及产品设计能力，另一方面通过写小作文提升表达能力。当然也欢迎大家多多交流！

第一篇主要体验各大主流产品金刚区设计。

先了解一下金刚区：

金刚区通常指的是 banner 或搜索框下以宫格形式排列的多个图标，数量上多采用1-2行，每行展示5个图标，再多会显得拥挤。大多数金刚区可以左右滑动，以便查看更多的内容。

这个名称来源于百变金刚，由于产品迭代或功能调整变更，金刚区可以很灵活的进行替换，就像一个百变金刚一样，故称之为金刚区。比如每到春节等重要节日，金刚区就可以很方便换上一身“新衣服”。（节日类型的设计自由度较高，本次文章不作举例）

一、主流电商产品-京东、淘宝、拼多多

主流电商产品均舍弃外轮廓底板衬托，采用纯图形填充+插画场景。去底板设计释放了内容图形空间，放大图标细节，强化图标形象，插画技法装饰性强，更富有创意。

但，也很考验设计师的功力。纯图形设计会轮廓复杂不一，统一性较差，一旦设计过度，用色夸张，就会导致金刚区陷入混沌。尤其是体量较大的产品，展示空间有限，行间距小，用户不会花时间识别图形形象，最终还是会依赖文字信息。

三个产品金刚区结构上采用不区分设计，滑动交互查看超出屏幕外的应用，排版也整齐统一。淘宝和京东除了系统推荐外，用户可以在进入一个服务应用后每点击关注，该服务就会出现在首页金刚区。因此左划交互，将有限的金刚区拓展开，良好地避免了用户自选应用被挤情况。拼多多虽然在首页金刚区交互和其他两个产品一样，但是点进应用后不支持用户关注，还是依赖产品推荐。

二、主流外卖平台产品-饿了么、美团外卖

美团和饿了么金刚区结构上均采用区分设计，区分了推荐应用及自选应用。推荐应用单独一列，其余应用列两行。

区分设计使推荐应用得到最大化程度突出，推荐与自选一目了然。缺点是推荐个数有限。

图标设计上，推荐应用均采用底板衬托+插画图形设计，而自选应用采用去底板+插画图形设计。不同的是，美团外卖推荐应用图标采用破形设计，视觉更抢眼，内图形插画细节更明显，识意性更强。而饿了么推荐应用弱化内图形视觉，加入文字强化图标功能，虽然视觉呈现较弱，但应用功能识别性更强（虽然我个人感觉这种设计形式有点粗暴😂）。

三、本地生活平台类-大众点评、口碑

大众点评作为本地生活O2O产品鼻祖，近两年在视觉上做了多次改版，视觉及用户体验上提升不少。在金刚区同样采用区分式设计，推荐应用采用无底托+纯图形填充+渐变插画设计，图标精美，视觉性强，凸显大众点评产品娱乐基因；而其他应用则采用描边+单色填充线面结合设计，设计上简洁干净，视觉沉稳，与推荐应用主次层级拉开。注意金刚区左划交互并非是金刚区内左划查看，而是跳出金刚区查看所有分类页面。

口碑为阿里系本地生活产品，图标设计带有支付宝基因。采用无区分+无底托+纯色面性图形设计，图形抽象扁平，对文字信息依赖性较强。

四、生鲜超市类电商产品-每日优鲜、叮咚买菜、盒马生鲜、京东超市、天猫超市

很明显，生鲜超市类产品金刚区均采用了底托+商品实图设计，主题明确，感染力强。此类产品为民生应用，考虑到用户人群较广，采用商品实图有种商品货架的感觉，降低用户学习成本，展示更接地气。缺点就是商品图片会时不时更换，用户认知压力较大，最终还是会依赖文字信息辨别入口。

五、旅游订票类应用-携程旅游、同程旅游

两款产品金刚区均采用区分式设计，但是形式大不一样。携程旅游业务体量大，纯金刚区已不能满足其产品需求。因此结合瓷贴设计，突出推荐应用。而真正金刚区分为线性图标设计，及面性图标设计。同程旅游相对携程来说，业务较轻，因此金刚区设计较为常规，推荐应用部分采用圆形托底+面性图标，其他应用则采用线性图标设计，整体设计层次分明，简单清新。

六、音乐类应用-网易云、虾米音乐、qq音乐、酷狗音乐

相对电商生活类应用，音乐类产品金刚区设计较为克制，基本以基础的线性、面性较单一的设计形式，重功能入口，弱视觉承重。毕竟音乐app是情感载体，产品需要给用户营造舒适安静的倾听环境，而非热闹躁动的消费环境。

七、文教知识类应用-得到、喜马拉雅

两款产品定位不太一样，得到主要是帮助用户高效提升专业知识储备，而喜马拉雅以在线听书、分享音频为主，更注重情感连接。将这两款产品放一起，是因为都有“听书”功能。两款产品都采用圆形托底背景设计，得到是托底+线性设计，简单直接，让用户更快找到功能入口，黑色为主橙色为辅线性设计，打破单一感，增添温度，文艺清新，符合产品定位；喜马拉雅是情感应用，金刚区设计上跟注重场景打造，通过不同的“听”场景，采用渐变托底+文字+面性图形设计，营造不同的氛围，是情感化设计表现。

八、房产平台类应用-安居客、贝壳找房、链家

房产类应用金刚区均采用微渐变托底+面性图形设计，贝壳找房区分了推荐应用和普通应用。安居客托底饱和度较高，内部图形轮廓识别度较高，另外两款应用托底渐变较柔和，内部图形和托底背景更融合，视觉更精美，但内部图形识别度较低，用户更依赖文字信息找功能入口。相对来说，安居客金刚区图标占位更大，更易于点击，用户操作更放心，而贝壳找房推荐部分图标占位较小，用户会有误操作疑虑，但圆角钜形托底区别其他平台视觉，会形成产品记忆符号。

最后

第一篇产品体验日记终于结束，10%内容为参考。文章前面也讲了，写这个主要是学习和提升，内容也有主观成分，欢迎大家多多交流。

下一篇要不要加一组图标练习啊😂