UI进阶干货——金刚区

金刚区是一个页面中头部的重要位置,是页面的核心功能区域,表现形式基本是多行排列的宫格区图标。

金刚区的位置通常是位于banner之下,区域通常会占据屏幕22%~25%的大小且位于屏幕头部,从用户阅读屏幕内容的视觉流来说位置至关重要,而且是聚合各类子板块的入口,为各个子版块分发内容引导流量。可见重要性不言而喻,产品要让用户通过不同类型展示方式的组件找到相应的功能,而图标具备精炼高度概括内容的特性,而且图标的识别度大于文字,所以金刚区的设计通常以图标+说明文字为主。

常见的设计类型有3种:

面性图标

实拍性图标

线性图标

1.淘宝APP——面性图标

淘宝整个业务线很多,金刚区的部分是1排5个图标,共2排也就是10个图标。一行5个图标也是当下行业内的图标数量极限了。

淘宝APP金刚区组成:圆形底板+业务说明+图形+板块名称

纵观多种案例,我们会发现一个问题,为什么电商类APP金刚区图标多为圆形呢?我们来一起思考一下。从圆和方的直观感受来讲,圆给人一种亲近柔和的感觉,而正方形有4个棱角会让人感觉很生硬显得有距离感。在设计上来讲,方形的图标还需要考虑到四个棱角部分的设计不然会显得很空,圆形会显得更加聚焦内容,如下图。而且如果一排5个宽和高相同的圆形和方形图标,方形图标面积大所以会显得拥挤一些,所以金刚区图标圆形居多一些。

颜色:底板是从左到右0度的渐变,左边的颜色和右边的颜色属于同一色系。在色相,明度,饱和度上等数值上都有差别,但不会让渐变的两个颜色相差的特别明显。视觉感官上是左边的颜色比右边的颜色「亮」一些。

造型结构:图标是上下结构。上方是图标的业务说明描述,告知用户这个板块是做什么的,除了第一个图标外,其余的图标业务说明均是2个字,用最简短的词去描述、高度概括子版块内容。因为淘宝的受众用户人群众多,年龄跨度也较大,金刚区的识别性放在绝对的第一位,所以会在图标上写上业务说明。

2.京东APP——面性图标

京东APP金刚区组成:超椭圆底板+业务字设计/图形+板块名称

超椭圆形状介于圆形和方形之间,而相比于圆角矩形又显得很灵活生动饱满。

颜色:底板采用的是从左上到右下的斜45度渐变,左边的颜色和右边的颜色属于同一色系,渐变柔和变化不是很明显。

造型结构:在金刚区图标的设计上,京东也是将图标的识别性放在了首位,大部分图标使用板块的业务说明文字来进行设计,再叠加一个弧形的过渡,让图标内的图形看起来像是从一个空间延展到了另一个空间,增加了设计感不失趣味性。

3.饿了么APP

饿了么APP金刚区组成:轴测图立体图标+板块名称

颜色:金刚区图标的颜色总体给人鲜艳明亮的感觉,来表达食物的新鲜美味。就像我们生活中吃的食物生鲜蔬菜一样,如果颜色看起来脏脏的,怪怪的,一点都不给人新鲜的感觉,那么你肯定也不放心去吃它。

造型结构:饿了么采用的是2.5D轴测图的形式做的立体图标。与常规图标不同,这样的设计手法会展示图标3个不同的面,细节丰富设计感强,能在同类竞品中脱颖而出。而且这种设计手法所画出来的图标更加贴近真实食物的形态。

4.盒马APP——实拍性图标

盒马鲜生APP金刚区组成:实物实拍+统一圆形底板+板块名称

颜色:底板的配色依然是业务色,比如「海鲜水产」的底板色是海蓝。但有一点要注意,底板色要与实物实拍图有区别,不能看起来像是融为一体的感觉。而且为了营造新鲜感颜色应明亮一些。

5.支付宝——线性图标

钱包级别的应用要给用户带来安全、可靠的感觉,所以在金刚区的视觉上的设计尽量克制、简洁。线性图标在此应用最适合不过了。

1.辨识度

因为图标在辨识度上要优于文字。最好是在图标的设计上要与竞品有一些差异度。要让自身产品在市场中增强视觉差异,要让别人记住。比如请你在脑海中回忆「闲鱼」app的颜色和「京东」app的颜色,如果你用过两款产品,那么你可以轻易的回忆起闲鱼的品牌色是黄色,京东的品牌色是红色。

2.强调性

金刚区图标通常是在app的首屏出现,位置位于banner之下,而且金刚区图标通常会占据屏幕五分之一或者四分之一的大小,还起着为各个子版块分发引流的重要作用,所以在设计的重量上应该比金刚区图标下方的内容区:UGC、瓷片区等内容要重一些。

3.识别性

有了前两步的铺垫后,金刚区图标还需要有可识意性,通俗来讲,能让用户做到看其形明其意,这一点很重要,即使画的再好看,用户看到图标后不认识或者需要停下来想或者猜的话,那这图标基本算是废了,因为图标的作用就是为了在文字之上辅助用户识别,人脑对图片的敏感度要大于文字。所以这一点请注意!

4.趣味性

相当于考试时候的附加题了。不做不扣分,做了加分。如上图的飞猪APP趣味性的出现让整体的金刚区图标更加的生动灵活,多渐变多色彩的应用会给你带来一种旅途出游很愉快的感觉。

金刚区图标常用做法:45°渐变底板+白色面性图标+微投影

并非所有图标一定要做统一圆形底板的面性图标。不带底板的异形图标,线性图标都可以,具体还得看业务需求,如果不需要金刚区视觉效果很重的话可以考虑线性图标,更加的轻量、简洁、格调高。

怕钱不够?就业挣钱后再付学费!怕学不会?从入学起,达内定制课程!担心就业?达内多家实践企业供你挑选!

作为面向对象的三大特性之一,继承同样是我们必须掌握的知识,下面我会对继承它的一些理论知识与代码示例进行介绍。

我们都知道IT行业薪资水平高,这是公认的,没人会质疑什么,但不是行业薪资高你就能拿到高工资,首先你得有拿高薪资的本事,任何一个行业的任何一个人都不例外。

Java程序员的高薪引得不少人羡慕不已,有很多就是冲着Java的高薪从而转行。但是Java程序员的工资为什么那么高?本文为大家详细分析一下。

THE END
1.标志设计中文化内涵的体现形式四、结语 标志是一个人或者集体价值观的体现,是文化的外在表现形式,具有精神载体的功能。标志在设计过程中,形式和表现手法都是多元化的,本文通过标志设计中体现的民族文化内涵、地域文化内涵和时代文化内涵,来阐述标志设计中文化内涵的体现。分别举例子说明了不同文化对标志设计者灵感的提供,期待现代标志设计在延续和...https://m.mayiwenku.com/p-33761794.html
2.ICON设计的要点AI工具系统图标可以采用面形或线性的表现形式。面形用于软件标志的比较多,因为它的视觉识别性最强。线性作为功能标识来使用,在APP界面的功能展示中可以通过简单的弱化视觉表现力的东西来展现更多的信息。 4.原创绘制的方法 ICON的设计需要多看多想多做,可以通过竞品分析来借鉴和参考。但是要避免盲目借鉴,需要设计出自己独有的...https://www.xinzhibang.net/article_detail-13407.html
3.设计师应该掌握的设计细节当产品中的图标字段和文字和字段比较多的时候,我们想要将他们有序的区别开,且不会很凌乱,这个时候我们可以考虑用卡片的来分隔页面,这样板块与板块直接会更加清晰明朗,而且列表中的信息比较多的时候,通常是采用卡片的形式进行划分,让界面看起来更为整洁。 https://www.51zxw.net/TechArticleDetails.aspx?id=206
4.持续更新JavaScript常见面试题整理卡尔西法calcifer30、把Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们? 如果说放在body的封闭之前,将会阻塞其他资源的加载 如果放在body封闭之后,不会影响body内元素的加载 31、iframe的优缺点? 优点: 1. 解决加载缓慢的第三方内容如图标和广告等的加载问题 ...https://www.cnblogs.com/wq1994/p/7816020.html
5.信息的出现和消失——游戏信息提示框设计文字层级表现形式 在视觉的文字表现上,提示框内的文字与其他文字部分排版相同,可以通过大小、粗细、颜色来体现文字信息的层级。让玩家能够详略得当地阅读较多的文字,并且快速提取需要的信息并运用与游戏中。 《永劫无间》活动规则提示框 而在文本的编写上,可以多用短句、善用分段,为玩家打造较好的阅读体验。此外,要注...https://www.gameres.com/902130.html
1.轻松绘制Icon图标,提升新媒体视觉效果总的来说,Icon图标虽小,却在新媒体视觉效果中扮演着举足轻重的角色。通过掌握基础知识、运用绘制技巧、巧妙应用于新媒体领域,我们不仅能轻松绘制出美观实用的Icon,还能为品牌传播和用户体验增添更多亮点。希望今天的分享能对大家有所帮助,让我们一起在视觉设计的道路上不断前行!https://www.batmanit.cn/blog/k/52326.html
2.网站建设有什么看法/网络营销的表现形式有哪些网站建设有什么看法,网络营销的表现形式有哪些,网站中英文域名,搜中文找不到公司网站是怎么回事,全能企业网站管理系统,找做网站页的在哪找3D相关开发 [direct-X] 1、direct-X最小框架 [OpenGL] 1、环境搭建及最小系统 [OpenGL] 2、企业版VC6.0自带的Win32-OpenGL工程浅析 51单片机 [51单片机] 1602液晶显示控制...http://www.flsr.cn/news/431173.html
3.图标设计评分标准(通用12篇)到后来, 图标只是一些只有很小尺寸但很可爱的艺术表现符号, 图标有浮雕、绘画、镶嵌工艺等表现形式。在现代的语言中, 图标是一种符号, 它象征着一些众所周知的属性、实体或概念。在某些特定的文化背景里, 图标应该非常容易被辨认出来。随着计算机的出现, 图标被赋予了新的含义, 图标被认为是图像、图片或者表示概念...https://www.360wenmi.com/f/filednhrjwz6.html
4.icon图标立体(图标立体效果)随着科技发展和时代变迁,传统平面式icon图标已经不能满足用户需求。立体设计能够让icon图标更具现代感和科技感,在视觉上更加符合当下用户的审美需求。 2. 丰富表现形式 传统平面式icon图标往往只能呈现简单的二维形态,而立体设计可以让icon图标更具立体感和层次感,从而丰富了其表现形式。这也为设计师提供了更多的创作空...https://www.c4dmodels.cn/article/142820.html
5.标志百科之词条:标志(Logo)4.标志修正--提案阶段确定的标志,可能在细节上还不太完善,我们经过对标志的标准制图、大小修正、黑白应用、线条应用等不同表现形式的修正,使标志使用使更加规范,同时标志的特点、结构在不同环境下使用时,也不会丧失,达到统一、有序、规范的传播。 配色技巧 ...https://www.logonews.cn/logo.html
6.《漫画》教案(通用18篇)1、 欣赏漫画作品的构思特点,表现方式和艺术效果。 2、 了解漫画的一些基本常识。 3、 初步掌握漫画创作的常用手法。 二、教学内容: 1、 认识漫画这种艺术形式,了解漫画除了具体特有的讽丑恶、弘正气、扬美善的社会功能和教化功能、娱乐功能、审美功能。 https://www.jy135.com/jiaoan/540431.html
7.设计师必看的色彩与应用指南–深圳小火花软件科技有限公司4.3.2 渐变的表现形式 在界面设计中经常看多各种各样的渐变表现方式,使用最多的有以下几种: 水平渐变 这个很好理解,是指角度为0的线性渐变,是最流行的渐变形式。界面设计中多用在导航栏、进度条、按钮等元素上,能让画面变得精致而通透。例如京东使用橙红渐变的设计语言贯穿整个App,从应用图标到导航栏、按钮、标签...https://www.sparklet-soft.com/design/2020-12-10/13890.html
8.幼儿园大班教案《寻宝》(精选17篇)师:听听这段音乐有几句乐句?(区分前奏) 4、教师鼓励幼儿用手势来表现4个乐句。 三、听辨并表现乐句 ★价值取向:阅读秘籍图,听辨音乐用动作等形式表现不同的乐句。 1、一人寻找,尝试表现乐句。 (1)阅读秘籍图的第二页:一人爬山寻找钥匙。 (2)秘籍图告诉了我们什么? https://www.unjs.com/jiaoan/youer/20230325143304_6733756.html
9.计算机基础知识51CTO博客计算机的应用已渗透到社会的各行各业,正在改变着传统的工作、学习和生活方式,推动着社会的发展。计算机的应用主要表现在以下几个方面。? (1)科学计算。科学计算又称为数值计算,是计算机的传统应用领域。在科学研究和工程技术中,有大量复杂计算问题,利用计算机高速运算和大容量存储的能力,可进行浩繁而复杂、人工难以...https://blog.51cto.com/yangsir0576/5345438
10.七年级美术教案(精选18篇)2、展示儿童有关于“彩线连彩点”的绘画作品和手工作品。 三、造型和表现 1、请学生思考: A、你想用点、线、面来表现画面吗? B、想一想,你准备用他们来表现哪些东西? 2、分小组尝试运用点、线、面来表现自己想表现的画面。 采用单线、涂色及剪贴等各种形式来表现自己对事物的感受。进一步了解线的组细、点...https://www.fwsir.com/jiaoan/html/jiaoan_20230201092144_2316727.html
11.2024年初中政治答题小技巧+答题模板答题技巧含义+表现+特点+形成+种类(不是每个必讲,用的不多,在做题的第一句话时需要点清是什么)。 3.为什么的别名 作用+意义+重要性=必要性+危害性+关系+功能+原则+理念等。 4.怎么办 国家怎么办+社会怎么办+公民怎么办+青少年怎么办+{途径+方式+方法+技能技巧}。 http://www.zhongkao.com/e/20230728/64c3b678e6431.shtml
12.抖音发布不当信息产地发货地描述不符实施细则二、“产地发货地描述不符”的表现形式有哪些? (1)直播场景描述不当 主播在直播间宣传某一商品的品种、产地卖点时,若发货地与对应品种、产地不一致,且未在直播间明确说明(要求背景板或者文字展示,主播口播不符合),属于产地发货地描述不符。 (2)视频/图文内容描述不当 ...https://www.maijia.com/article/580007
13.游戏新闻《热舞派对MAX》官方网站按钮对应图标的表现形式为: 小蓝NOTE:字母键“F”“J”(两个键按下任意均可) 大蓝NOTE:字母键“F”“J”两个键一起按下 小红NOTE:字母键“D”“K”(两个键按下任意均可) 大红NOTE:字母键“D”“K”两个键一起按下 蓝色连打NOTE:字母键“F”“J”连续击打(两个键按下任意均可) ...http://rwpd.wanmei.com/news/gamenews/20100413/45909.shtml
14.抽丝剥茧最具深度图标设计学习指南(三)规定形中的变化这一表现手法在早期欧美标志中就非常常见,选用圆形,其构成特点是将图形置于中心,文字环绕图形,有集中醒目的效果。如今这种复古设计形式还在沿用。 设计元素的运用是灵活的,在规定形中可以是点线面,也可以是图形,也可以是文字。 香港著名设计师陈幼坚为香港美心快餐和bossini服饰品牌设计的整体形象,运用的...https://maimai.cn/article/detail?fid=1720167681&efid=IHWbefQs8Y1hXJHSrE9hZw
15.如何在标志logo设计中体现品牌的创新和未来性?未来感的表现方式可以通过运用科技感十足的色彩和图形来实现。比如,使用银色和蓝色等冷色调,配合流线型的线条和现代感十足的字体,可以直观地传递出品牌的前沿性和创新力。此外,还可以运用一些未来科技的元素,如虚拟现实、人工智能等,通过图标的形式来体现品牌的未来发展方向。 http://www.chinalhcz.com/news/20240323193252.html
16.大班美术教案我运动(通用14篇)《纲要》指出“提供自由表现的机会,鼓励幼儿用不同艺术形式大胆的表达自己的情感、理解和想象,尊重每个幼儿的想法和创造,肯定和接纳他们独特的审美感受和表现方式,分享他们创造的快乐。”因此在本次活动中我做到了:活动以探究为核心,并鼓励幼儿创造性地利用自制器械合作表演运动项目。关注幼儿探究思维能力的`培养。做到真...https://www.ruiwen.com/meishujiaoan/7253481.html
17.2024年黑龙江省公务员考试报考指南1.非普通高等学历教育的其他国民教育形式的毕业生是否可以报考? 非普通高等学历教育的其他国民教育形式(自学考试、成人教育、网络教育、夜大、电大等)毕业生取得毕业证后,符合职位要求的资格条件的,可以报考。 2.2024年毕业的定向生、委培生是否可以报考? 2024年毕业的定向生、委培生原则上不得报考。 https://www.gwyzk.com/p/6319.html
18.社会课程:“遇见公园”——“浅水湾公园”情境教育项目课程叙事...2.图片两张,直观(蜡质的表现——用塑封纸封起来) 活动过程: 一、小问号引题: 师:秋天到了,各种各样的树会发生许多的变化,你有哪些关于树 的问题要问吗?(教师根据幼儿的回答进行小结并用图文的形式进行记录,主要是落叶和变色) 二、认识常绿树和落叶树 ...https://fzzx.rdedu.net/Item/3563.aspx