装饰性图标提升页面设计与用户体验,说明性图标阐明功能特性
2.装饰性图标
旨在增强页面视觉效果,强化独特的设计风格,同时增强用户在网上的使用感受,满足目标用户群体的喜好,增强设计的亲切感。例如,在节日需求下,开展相应的线上活动,采用个性化的图标设计。再如,页面更新、空白页面、奖励设置以及用户等级标识等,均属于具有装饰作用的图标。
3.说明性图标
阐释信息图标的不同种类,以辨别不同功能或内容的视觉标识;简言之,就是对功能进行解释和说明。例如,在展现行业特色时,金刚区或特定功能区的图标设计;针对不同用户群体,挑选相应的风格设计,以早教应用与健康管理应用为例,这种对比尤为显著。
首页的图标均归入此类,以美团为例,其设计融合了直线型图标与渐变色面形图标,巧妙地将金刚区域划分为三个部分,从而提升了页面的层次与辨识度。
表现形式分类
按表现形式分类:象形图标,隐喻图标,工具图标和混合图标
1.象形图标
最初,在UI设计领域,图标类型指南https://www.aaa-cg.com.cn/ui/2584.html?gpf中的设计师们为了确保图标的高识别度,并减少用户的学习引导成本,倾向于采用更加写实风格的icon,因为这样的设计更贴近生活,易于用户将图标与实际物品联系起来。在iOS系统上,有一段时间非常流行“拟物化设计理念”,这种理念下的设计可以被视为超写实设计的范畴。并且坚信,只要条件允许,在应用过程中融入更多实际、物理层面的维度,使其与现实世界越加贴近,操作方式越加相似,便越能帮助用户更好地理解其运作机制,从而提高用户接受度。
2.隐喻图标
将两种看似无关却存在某些共性的事物通过图标的形式相互连接,以便于记忆和操作。例如,将“设置”与“工具”相连接,将“云端”与“云”相联系,将“购物”与“袋子”相搭配,以及将“会员”与“钻石”或“皇冠”相联结等等。
3.工具图标
以行业门类作为划分标准,其应用领域极为广泛,无论是普通大众还是业内人士都能轻易辨识,并且已经持续使用了很长时间。例如,在建筑、医疗、化工等行业中均有应用。
4.混合图标
即是将前三种风格融合在一起,旨在实现多样化的视觉感受和适用不同的设计结构。近期颇为流行的MBE粗描边风格图标,便是这种综合风格的产物,它往往能够体现设计师的独特设计风格,或者适用于那些设计感较为强烈的软件。
设计风格分类
根据设计风格的不同,我们可以将其分为以下几类:面性图标、线性图标、扁平图标、拟物图标、2.5D图标以及桌面应用图标。
1.面性图标
应用范围极广,稳定性出色,且页面层次感显著增强。在UI页面设计过程中,必须从页面层级与产品功能两个维度综合考虑其具体应用。面性图标种类繁多,不仅包括常规类型,还涵盖多色、渐变、不透明叠加、插画、扁平投影等多种形式。
2.线性图标
页面设计更显轻盈与精致,简约风格成为当前使用频率最高的设计之一。除了采用普遍的单一颜色线条图标外,还有双色或多色设计,粗细不一的线条组合,以及缺口形状、渐变效果、边缘描边和半透明叠加等多种样式。
3.扁平图标
这实际上是由线条与平面,平面与平面组合而成。其变现手段丰富多样,具有极强的拓展性,且更加注重个性化和年轻化。即便是相同的设计风格的图标,只需更换颜色,也能展现出截然不同的信息和意义。
4.拟物图标,2.5D图标和桌面应用图标
三、运用场景与选择图标
在设计风格确定下来之后,我们才应选择相应的运用场景,避免将图标的使用场景与设计风格中的图标概念相混淆。在应用图标时,必须确保风格类型的一致性,而判断风格是否一致,可以通过观察图标的设计风格分类以及其绘制原则来实现。
该工具主要适用于五种主要场景:包括顶部的导航栏、底部的标签栏、金刚区、交互区域以及分类列表。
1.顶部导航栏
UI页面的上方设计注重轻盈,避免显得过于沉重;图标设计追求简约,避免过于显眼,旨在提供便捷的导航,清晰传达信息;通常采用单个图标,不与文字结合。
2.底部标签栏
页面底部设有图标,便于用户进行页面间的切换操作;这些图标数量通常保持在3至5个之间较为适宜;同时,它们以图标与文字相结合的形式来展示产品的各项功能。
3.金刚区
之所以被称作金刚区,是因为它通常坐落于网页中心区域,位于横幅广告或搜索框下方,是产品核心功能区的集中地带,对子板块起到引流作用。在此区域,约有40%至58%的用户流量来源,它占据了首屏约22%至25%的空间,并通过图标与文字的结合来展示产品功能。
4.分类列表
通常采用瀑布式布局、宫格式布局、色块式布局,确保页面风格的一致性,精确传达信息,并借助用户定位功能模块。
5.交互功能区
这正是在交互性图标中应用最为广泛的功能,诸如收藏、点赞、刷新、搜索等操作。
五、写给设计师
图标选用亦需事先深思熟虑:需对用户需求、功能细节、同类产品及行业惯例进行深入剖析,此过程与个人中心设计理念所遵循的思维方式如出一辙。
图标设计需在坚守原则的基础上,进行个性化的创作设计;同时,要兼顾辨识度和适用性,持续优化用户的使用感受和信息接收效率,确保信息的准确传达。
深入剖析,反复思索,不断丰富知识储备,增强对应用技巧的感知力,大家共同努力,加油向前!
UI设计中的色彩搭配策略,UI设计中的投影运用技巧,UI设计中的按钮设计指导,UI设计中的首页布局排版方法,UI设计中的顶部导航栏设计关键点。