5000+的干货，帮你系统掌握金刚区图标设计

剖析总结 UI 规划的细分模块才干愈加深化到每一个细分规划中，在 App 的各模块中，金刚区算是比较重要的存在之一。是页面的中心功用区域，聚合了事务线的功用进口，规划的发挥影响了曝光度的强弱，是规划师需求要点深化的模块。

今天黑马哥将和咱们一起讨论一下关于金刚区模块规划的千奇百态，从布局的款式、图标规划的风格、不局限于图形表达的办法等方向为咱们进行整理，期望能够让你对金刚区模块的规划有更深化的了解。

共享目录

• 关于金刚区模块
• 金刚区图标规划类型
• 规划指南和注意事项
• 线上优异事例剖析
• 总结

关于金刚区模块

金刚区模块是整个界面布局的中心功用区域，一般布局在页面顶部 Banner 之下，金刚区的功用模块不会固定化，会依据事务目标的改动进行灵敏调整。这种可改动组合的灵敏性就像百变金刚一样，所以咱们才把这个功用区域称之为金刚区。

由于金刚区所属方位为中心区域，相当于流量站，能够聚焦事务功用为其带来更好的曝光度。服务于整个产品架构，一方面能够为事务进行导流，给产品中的各事务版块进行引流；另一方面也是一种功用挑选进口，为用户供给不同功用的挑选和切换，享用功用带来的服务。这也是金刚区在规划中需求要点对待的原因，也是迭代更新相对比较频频的要素。

金刚区一般以单行或许多行进行宫格布局，以“图标+文字”的办法进行展现。一般为 1~3 行图标展现，超越 3 行的比较少。单行的图标展现数量最佳挑选在 4~5 个，假如超越 5 个的一般会选用左右滑动的交互办法。在后续也会持续为咱们整理规划的类型，在规划上面的一些技巧和事例剖析。

金刚区图标规划类型

金刚区模块的规划类型一般是以“图标+文字”的办法，而图标的规划方向不局限于图形化的表达，从视觉表现层剖析会有图形化图标规划、产品什物展现、人物形象引证、混合调配、文字化结合、节日/主题规划等办法。格局上来归类会有静态格局和动态格局，微动效的表达一般是局部图标动效，接下来咱们详细的整理一下。

1. 图形化图标规划

金刚区图标规划以图形化的办法表达是最为通用的，图标规划的风格有线性图标、面性图标、线面结合、微质感等。而面性图标有直接进行图形规划的办法，也有以基础图形（圆形、圆角矩形等）作为外概括加内部图标组成。

这种结合事务或许功用模块的要害词进行图标创造，是金刚区最为简略的规划切进口，也是考验规划师图标规划能力的要害。

2. 产品什物展现

除了图形化的图标规划以外，以主营事务为代表的产品什物相片作为图标运用也是一个方向，独自展现或配有布景底版展现均可。产品什物展现能够带来真实感，给人一种牢靠的感觉，表现办法简略粗暴，就是缺少必定的规划感，产品展现的视觉比重把控有必定的难度。

产品什物图展现简单给用户错误的信息传达，会误以为就是配图的产品，可是功用模块的传达并不必定指的是特定的某一个产品。假如常常更换产品图片也很难构成用户回忆，需求依靠文案信息的传递强化回忆，对于用户来说认知压力增大。

3. 人物形象引证

除了进行图标规划以外，也有一些产品会用到明星头像、游戏人物、公众人物形象等图片引证为图标进行展现，一般为合作特定的运营活动推行呈现。比方某部影片上线、某款游戏上线、特别事情纪念活动等。

4. 混合调配

在对接事务需求的时分，单一的办法无法满意差异化的事务需求，金刚区模块的规划会混合调配。混合调配尽管能够满意事务需求，可是混合调配简单在风格上互相排斥，感官体会难以掌控。

一般为了视觉作用尽量一致，会挑选基础图形作为一致的外概括，使其与其它图标规划风格相对调配。

5. 文字化结合

为了合作特定主题活动的推行，金刚区图标规划也会结合文字化的办法表达，杰出活动主题。这种办法主题杰出，活动针对性强，能够最大化的进步主题活动的曝光度。

当然，这种办法只合适在活动期间运用，匹配功用模块的辨识度较低。

6. 节日/主题规划

在一些节日主题活动中，为了增强节日氛围，除了将节日主题文字化结合规划以外，也能够将节日关联性的元素结合到图标规划中。能够在特定的节日或许主题活动中使规划细节更丰厚，不过时效性较低，过于依靠文案阐明，合适活动期间运用。

7. 图标微动效

金刚区图标微动效运用越发频频，相较于静态图标来说更能引起用户的重视。适用于需求要点强调的功用模块，能够在金刚区模块中构成差异。

图标规划的类型千奇百态，丰厚的款式不断刷新着咱们的规划认知，这儿仅仅列举了方向性的延展。为咱们整理出大纲方向，等待发现更多不同的规划处理方案。

规划指南和注意事项

了解金刚区模块的规划方向之后，咱们在进行实战规划的时分也需求防止一些要素，更好的复原规划需求和添加用户感官体会。

1. 图标数量

金刚区模块以“图标+文字”的办法展现，图标单行 4~5 个为最佳，低于 4 个显得松散，高于 5 个一般需求结合左右滑动交互。一般都操控在 3 行以内，超越的相对比较少，版面占用太大，用户挑选性过于密集。

2. 图标规划尺度

金刚区图标规划尺度没有硬性规定，经过经历规范下来，假如是没有外概括作为布景的状况下，图标尺度的规模一般在 44~98px 左右（@2x）；加上外概括的状况下一般在 80~98px 左右（@2x）。尺度的规模仅为参阅，依据图标造型的繁简度不同都会构成差异，终究要以预览作用为准。

3. 外概括内图形尺度

假如金刚区图标运用了带有外概括作为布景来进行规划，内部图形的尺度需求结合外概括尺度来确认。太大会显得很满，给人压抑感；太小会使得负空间过多，显得很空。没有强制的尺度要求，一般以经历来判别，内部图形的尺度一般操控在外概括巨细的 1/2 左右，极小值设置在 2/5 偏上，极大值设置在 3/5 偏下，增减误差一般不会太大。数字联系仅为参阅，详细还要以实践预览作用为准，图标的繁简程度都可能会搅扰到数据的改动。

4. 图标均分准则

金刚区图标单行布局一般都是 4 个或许以上，在进行布局的时分咱们会依据一些均分准则来进行，这样更能使得规划规范。

一般有三种均分办法：第一种是宽度等分准则，依据布局图标数量将界面宽度等分，每一个图标居中布局在等分内部；第二种是边距固定准则，用相同款式设置好左右边距，然后依据图标数量天然均分；第三种是固定距离准则，一般合适带有左右滑动的状况，固定好图标之间的距离不变，依据图标数量天然显示或许遮挡。

5. 图标配色方向

金刚区图标颜色的挑选方向除了直接选用品牌色以外，也会运用品牌色作为装点，一般呈现在简略的线性图标和面性图标中。假如是一些微质感的图标规划，配色会比较多样化一些，除了选用同色系改动以外，也能够在邻近色和类似色中挑选，这些都是简单把控的方向。假如要选用多种颜色且色相视点差异较大的，需求把控好颜色之间的数字关联性，这个在以后的配色课程能够和咱们深化探究。

6. 图标规划的差异化

在同质化的规划中，差异化的规划才干摆开与竞品的联系，添加产品的辨识度。除了在本身的图标造型和颜色联系上进行差异以外，结合本身的品牌基因也是一个要点探究的方向。在外概括上面也有一些产品在不断改动，从圆形概括到圆角矩形，再到超椭圆的细微改动，也有选用椭圆概括和特别图形概括，或许结合品牌的特征联系进行延展等。从大的造型特征到细节的探究改动，规划师都在不断地寻求新的差异化规划切进口。

7. 图标款式如何挑选

金刚区图标规划的首要方向是线性图标、面性图标和微质感等，在挑选的时分要结合自己的实践需求来判别。在属性层面首要能够划分为功用型金刚区和事务型金刚区，一种是以产品中心功用为主，为用户供给各种服务；另一种是以事务导流为主，进步事务模块的曝光度。

功用型金刚区：由于以产品供给的功用服务为主，用户的自主性较强。一般运用较多的是线性风格的图标规划，在视觉呈现上愈加理智沉稳，模块布局也愈加一致全体。比方银行类产品、支付宝、东西型产品等，不过这仅仅相对而言，也有选用面性图标的规划，不过款式一般不会过于繁琐，以简约规划为主。

事务型金刚区：由于是以事务导流为主，需求视觉冲击力比较强的规划风格，而面性图标和微质感图标相对比较合适，能够更快的招引证户的重视度而完成事务导流的作用。为了进步用户重视度，也会选用图标动效进行结合，添加主推事务的曝光度。

8. 引荐规划

为了进步金刚区某个事务模块或许功用服务，会在金刚区图标中进行引荐规划，以强化杰出特定功用模块。

一般有两种首要的处理方向，一种是添加标签规划，一般呈现在图标的右上角居多，静态和动态的均可，起到强化杰出的意图。第二种就是图标动效的运用，给需求杰出的图标添加动效来招引证户视线，从而到达引荐的意图。不过动效的办法不合适引荐数过多，会构成相互搅扰，反而达不到引荐的意图。

尽管仅仅产品规划中的一个细分模块，咱们在规划的时分依然需求深化的探究，添加每一个细分模块的规划质量，带给用户更好运用体会。这儿仅仅列举了一些首要的规划注意事项，期望抛砖引玉，带给咱们一些金刚区的规划思路。

线上优异事例剖析

当咱们对金刚区图标规划的知识点有了必定把握之后，在规划的过程中也不会毫无方向。接下来为了强化咱们的回忆，为咱们总结了一些优异的规划事例，站在优异的基础上才干考虑得更深化，创造出更优异的规划方案。

1. 品牌色的强化和装点

为了杰出品牌感，在金刚区图标规划上面选用品牌色强化是最常见的处理办法。直接将品牌色作为图标配色无论是线性图标还是面性图标都合适，不过相对来说在面性图标上面比较多一点。线性图标一般倾向于功用型产品运用较多，而品牌色多作为装点来运用，不仅能够强化品牌感，也能丰厚线性图标款式。

2. 产品什物替换图标规划

除了图形规划层面的表现以外，一些产品会挑选将产品什物相片作为金刚区的图标来呈现。比假如蔬类、图书类、服装类等，就将产品什物图片抠图处理，直接作为图标展现，也有结合外概括布景呈现，真实感的表现带给用户场景代入感。

3. 微质感图标增强层次感

在一些以事务导流为主的产品中，事务型金刚区图标规划以强视觉感为主。微质感的图标规划运用最为遍及，能够让图标的层次感更强，带来的视觉招引力也比较明显，更能引起用户的重视。目前微质感的表现首要有两个方向，无概括布景的办法和有概括布景的办法，无概括布景首要是经过颜色的改动和图层款式的调节来深化。有概括布景的质感强化除了在颜色和图层款式上面深化以外，利用白色的不透明度改动也是一个不错的技巧。

4. 立体图标的空间感强化

随着三维软件的不断遍及，许多 UI 规划师也把握了一些根本的三维规划能力，金刚区图标选用立体图标来表现，相较于扁平化的规划来说空间感更强。在进行透视视点把控的时分，要挑选一致的视角进行表达。现在许多立体图标的作用也并非必定需求三维软件实现，只需操控好透视的视点，PS、AI 或许 Sketch 软件等均能够实现。

5. 日子中的创意提炼

俗话说：“创意来历于日子”，基于日子中的物品进行创意提炼，是图形创意常用的手法之一。比方自如 App 的金刚区图标规划，就将日子中的物品造型进行图形化提炼而成，场景代入感不仅更好的辅助用户对功用模块的了解，规划风格也非常的清新天然。

6. 微动效的重视度强化

在需求特别杰出单个或许多个功用模块的时分，除了进行标签规划杰出以外，图标动效也是最为常见的处理办法。动效的图标能够更好的引起用户的重视度，仅仅需求操控动效的频率和数量，太多的动效也简单构成互相搅扰，需求有动效要点和主次分离。

7. IP 形象人物的规划融入

在一些儿童类产品中，金刚区会选用一些可爱的 IP 形象进行规划，除了结合本身产品的吉祥物进行发挥以外，也会结合主推事务的形象进行提炼。比方宝宝巴士旗下的系列产品，选用了众多 IP 形象作为图标规划，童趣可爱的风格更能引起小朋友的重视。

8. 文字化图标规划

为了合作运营活动推行，金刚区图标也会在活动期间结合活动主题进行规划，其中主题文字化图标规划也是较为常见的办法。直接将文字进行图形化表达，或许合作活动关联元素进行组合创造。这种办法主题杰出，活动针对性强，能够最大化的进步主题活动的曝光度。

9. 特别需求下的混合调配

为了满意事务需求，固定的办法无法被选用，就会呈现出混合调配的办法。这种办法尽管能够满意需求，可是风格很难做到一致，假如有固定的外形概括作为基础图形布景，算是一个相对合理的处理方案。

10. 磨砂玻璃图标规划风格

磨砂玻璃的图标受到许多规划师的追捧，最早在一些规划渠道呈现，后来国内一些产品也都有使用，比方自如、腾讯视频等。这种类似于特别材质的运用也是许多规划趋势所表露出来的，介于扁平和写实之间的微质感，带给用户一种轻质感的体会。

总结

金刚区模块规划无论是从布局款式还是图标规划风格上面，都有非常丰厚的优异事例作为创意来历。这儿仅仅为咱们进行抛砖引玉，剖析 UI 规划中的细分模块，让咱们能够愈加深化的探究规划细节和研究规划原理。

期望本文的共享能够带给你关于金刚区模块规划的思路和技巧，咱们后续再和咱们讨论更多细分规划的技巧和经历。

欢迎重视作者的微信公众号：「黑马宗族」