引言
金刚区也叫瓷片区,位于整个界面布局的核心功能区域,是首页的视觉中心,承载着产品的业务功能。那么在UI设计中金刚区有哪几种设计形式呢?几种设计形式中又包含哪些优缺点?
一、金刚区具有的意义和功能
Meaning and function
金刚区在页面中的一般处于BANNER模块的下方,占据手机满屏比例为1/5~1/4,作为各个子业务功能的聚合入口,为其分发流量,并在数据埋点中承担着重要角色。要使用户能够在金刚区中快速的定位到对应的功能,需要图标的展示方式与业务紧密贴合,图标本身具有高度概括内容的特点,所以金刚区的设计一般采用文字+图标的方式。
二、金刚区的几种常见类型
unctionSeveral types
金刚区最为常见的的图标展现形式是图形化,分为线性、面性、线面混合等设计风格。而面性图标又分为有底板和无底板两种类型。除了图形化设计之外,还有实景图和节日/主题图标两种设计方式,下面剖析下几种常见设计类型的优缺点:
1. 面性图标
① 有底板
设计样式:一般使用圆形或带有圆角的形状,颜色分为纯色和渐变色,内部的图标风格样式统一,图标颜色一般填充为白色。优点:通过底板的色彩划分区域,视觉上更有冲击力。缺点:对于具有较高相似性的业务功能,因为底板形状相同,识别性并不高。
② 无底板设计样式:没有底板作为背景,使用纯图标元素,可以使样式更加多元化。优点:打造小场景的插画效果,使细节更加丰富。缺点:轮廓复杂不一,对图标的风格统一性要求更强。
2. 线性图标
设计样式:使用较粗的外轮廓线条进行构图,色彩上采取单色或双色俩种方式。
优点:视觉上整洁干净、安静沉稳。减少色彩的使用,使得留白区域增大,适合简约风的设计风格。
缺点:视觉冲击力较弱,不适合扁平化布局。
3. 实物图标
设计样式:围绕文字元素匹配对应的实物商品/人物为图标,分为有底板和无底板俩种类型。优点:使用图片可以带来真实、新鲜的感觉。增强了页面的色彩丰富度,并可以将需要主推的商品作为图标为板块引流。缺点:商品图片需要经常替换,对用户的认知能力要求较高,导致最终会依赖文字信息进行辨别。
4. 节日/主题图标
设计样式:以节日或活动作为主题进行图标的设计,较多使用面性图标。优点:节日气氛浓重,设计细节丰富,富有创意,与用户的情感保持联动。缺点:有失效时间,只针对短期使用,识别度较低,较为依赖文字说明。
三、金刚区需要注意的几点
Requires Attention
1. 设计尺寸
金刚区图标设计尺寸没有硬性规定,通过经验规范下来,如果是没有外轮廓作为背景的情况下,图标尺寸的范围一般在 44~98px 左右(@2x);加上外轮廓的情况下一般在 80~98px 左右(@2x)。尺寸的范围仅为参考,根据图标造型的繁简度不同都会形成差异,最终要以预览效果为准。
2. 颜色
金刚区图标颜色的可以直接采用品牌色,在简约的线性图标和面性图标中有时也会使用品牌色作为辅助色。如果要采用多种颜色且色相角度差异较大的,需要把控好色彩之间的关联性。底色的整体饱和度和明度要尽量做成视觉统一。
3. 差异性
在同质化的设计中,差异化的设计才能拉开与竞品的关系,增加产品的辨识度,通过整体的视觉语言设计让用户对产品有一个明确的记忆,增加辨识度。
4. 设计样式选择
功能型产品:由于以产品提供的功能服务为主,用户的自主性较强。 线性图标更加适合,因为线性图标视觉上更加安静沉稳,页面更加统一整体。
业务型产品:以业务导流为主,需要较强的视觉冲击力,更合适使用面性图标,能够引导用户点击,从而完成导流的作用。有时为了提高用户关注度,也会采用图标动效进行结合,提升主推业务的曝光度。
小结
Summary
以上提炼的方法不是绝对的,只是作为设计金刚区的一个参考,这里只是为大家进行抛砖引玉,更多还是要根据实际业务场景选择最适合产品的设计方法。
本文地址:[https://chuanchengzhongyi.com/kepu/336416c222a3a01e.html]