全面解析!写给UI小白的系统图标设计攻略
ztj100 2024-12-24 16:59 18 浏览 0 评论
///
系统图标即应用于系统内的基础图标,pc端、网页端和App等应用内的导航、按钮、列表、弹窗内的图标。
系统图标不同于富有细节的修饰性图标,清晰明确得传达交互目的是设计师的首要任务,其次是可复用性和高效率。因此相较而言,系统图标设计得更加精炼。
·修饰性图标(来源:dribbble)
·系统图标(来源:dribbble)
目前在做B端,所以以B端产品为例。B端产品所谓好的体验,除了要做到功能交互一致,还需要在视觉上保持一致,避免用户产生疑惑。系统图标作为其中重要的视觉元素,更需要做到精简高效。
我在试用网上某产品时,遇到下图。这是一个数据处理页(局部),操作栏中密集的排列着很多按钮,按钮样式为“图标+文字”。
我们把图标单拎出来,可以明显看出几个典型问题。
几个典型问题:
- 图标线条粗细不一致;
- 视觉大小不一致,第一个和第四个对比尤其明显;
- 风格不统一,面性和线性混搭;
- 个别图标不够简洁明确,比如这个“查找替换”用了一个斜上方视图的望远镜,辨识度较低。
针对上述问题做了适当调整,如下:
我们在设计功能多、布局紧凑的页面时,首要确保图标清晰明确、无歧义,再考虑设计感。
比如上面的第五个图标中,“列显示”看起来是个不太常见的按钮,我们不用将“列”和“显示”的意思用一个图标都传达出来,否则在图标小,内容多的情况下,图标细节太多很容易”糊“在一起,导致整个图标无法分辨。我们只需要表达出“列”的意思,再加上按钮文字说明,能够让用户快速了解这个按钮的功能即可。
系统图标设计方法
第一步:选择合适的图标原型
常见的系统图标一般都有默认的样式,比如“设置”一般就用齿轮来表现,“搜索”常规就是一个放大镜,这些图标要么就是由认知习惯而来、要么就是隐喻真实的使用场景。
如果你不想让用户使用你的产品很费劲的话,就用这些常规默认的样式吧。当然,为了使我们的图标具有独特性和设计感,你可以在常规样式上增加细节扩展。
选择图标就像选择伴侣,没有最好,只有最合适。不同场景需要选择符合该场景下交互方式的图标。
如下图三个示例中都有“编辑”功能,根据不同的应用场景与风格,设计细节也有所不同。
·线条精简的线性图标
·带有修饰性线条的图标
·造型概括的面形图标
在B端场景中,大部分时候都可以根据产品的风格和应用场景来选择合适的图标原型。
系统图标设计方法
第二步:统一设计风格,符合产品调性
每个产品根据其功能、定位,都会有其产品调性,不同的产品调性,系统图标的设计风格也迥然不同。图标的属性有很多,一组和谐统一的系统图标,它们的基本属性应该是一致的。
2.1. 单一元素、辅助元素
通常情况下,当图标表意为同类别功能或相似功能时会用辅助元素加以区分,所以一组系统图标中可以同时出现单一元素和辅助元素。但需注意同一组图标的辅助元素要区分明显,易识别。比如下图这组图标中增加的辅助元素就很难识别。
2.2. 线性、面性、线面混合
线性:元素单一、表现力弱,但线条本身简练、可塑性强,可以通过对线条的设计,塑造可爱、专业、严谨等多种风格。所以线性图标在系统图标中使用率最高。
面性:面性具有体块感,视觉重心强,通常搭配混色(两种颜色及以上),以达到增加视觉吸引力的目的,我们在APP的金刚区经常见到。
线面混合:表现力介于线性与面性之间,相比于线性图标更有活力和质感,又不会在页面中太过抢眼。通常在一些年轻用户多、表现生活品质的产品中出现,比如airbnb、绿洲等。
2.3. 单色、混色
单色:只使用一种颜色的图标,具有稳定、统一的特点。
混色:使用二种及以上颜色的图标,混色图标可运用品牌VI系统的配色来增加产品记忆,塑造品牌形象,也可以增加页面的视觉表现力。
但是混色图标在开发中较难维护,而svg格式下的单色图标只需前端同事在代码中修改色值即可,多色图标则需要设计修改后重新交付一份文件给前端同事。
系统图标设计方法
第三步:保持视觉大小的一致性
在设计好样式、定义了配色之后,图标设计中最基础也是最重要的一步来了:保持图标的视觉一致性。如果一组图标在页面中大大小小,即使设计得再炫酷,也是一组不规范的图标。
3.1. 统一设计尺寸和线条粗细
在设计之初,我们需要先定义统一的图标尺寸和线条粗细(线性图标),不确定的话就多做几版尝试,前期试错总比后期大动干戈去修改来的好。你可以用24*24的画板尺寸,也可以根据需要自己定义。
需要注意的是,如果是用sketch设计图标,轮廓化后的图标放大时,线条的圆形端点会发生变形(除非将图形拼合),但在ai中不会发生变化,因此在sketch设计图标时,尽量选择常用尺寸中最大的。
3.2. 根据参考线规范图标视觉大小
在24*24的画板内,边距预留2px后,蓝色矩形框中为安全区域,方便规范图标大小。
下图是当图标是正方形、矩形、圆形四种形状下的位置,根据上图参考线,我们可以确定图标在画板中的位置。
其他不规则形状在参考线中的位置。
系统图标设计方法
第四步:图标的管理与维护
当产品从零到一逐渐成型和完善之后,系统图标也会越来越多、越来越难以维护。后期容易出现同一个功能好几种种图标的情况,影响统一性。
4.1. 设计规范文档
一般产品设计中期,设计师会慢慢形成设计规范文档,便于提高设计效率和团队协作,其中图标规范必不可少。图标规范中一般包含产品中所有设计到的图标,一到二种常用尺寸,基础图标以及其他图标。
·设计规范文档中的图标
4.2. 组件化图标库
tch中的symbol功能,我们可以很方便的将规范中的图标组件化,然后添加进组件库。
我们在设计中可随时从组件库调用所需图标。
还可以随时打开原始文档,以便对规范文档进行编辑与更新。
4.3. 在iconfont中创建项目
阿里的iconfont非常适合图标项目管理与团队协作
我们把图标上传到创建的项目中,配合插件“kithen”就可以在sketch中随时查看和调用相应项目中的图标。
在sketch的插件中可随时查看图标项目和调用相应的图标。
结语
系统图标在UI设计中是非常基础的图形化语言,也在页面交互中起到很重要的作用。单个图标的设计并不难,但是系统化、规范化所有图标并在项目中不断应用与复用,是对UI设计能力的考验。
随着设计工具的更新迭代,我们需要不断学习并利用好这些工具,提高工作效率,才能将有限的时间利用到更重要的设计内容中去。
相关推荐
- Win10预览版10532已知问题汇总(微软win11正式版已知问题一览)
-
IT之家讯微软已向Insider用户推送了Win10预览版10532更新,本次更新对右键菜单、《Windows反馈》应用以及Edge浏览器进行了改进。除此之外还包含一些Bug,汇总如下,有意升级Wi...
- Gabe Aul正测试Win10 Mobile 10532,Insider用户还需等
-
IT之家讯本月中旬微软向Insider用户推送了Win10Mobile预览版10512,该版本修复了一些Bug,增强了系统稳定性,但依然存在一些问题。今天,微软Insider项目负责人GabeAu...
- 微软开始推送Win10预览版10532快速版更新
-
8月28日消息,刚才,微软推送了Win10Build10532快速版,修复了之前的Bug,并带来了三项改进。主要来说,这次的更新改进了右键菜单的UI,使其更具Modern风格(见上图)。此外,更新...
- Win10预览版10532更新内容大全(windows10更新预览版)
-
IT之家讯今天凌晨微软向Insider用户推送了Win10预览版10532快速版更新,本次更新主要带来了三处改进,汇总如下:o改进右键菜单,外观更加Modern。这是基于网友要求界面一致的反馈做出...
- 无法升级Win10预览版10532?也许Hyper-V在搞鬼
-
根据IT之家网友的反映,安装了微软虚拟机Hyper-V的Win10预览版用户无法成功升级Build10532版本,安装过程中会被要求回滚系统。很多朋友在尝试关闭虚拟机之后重启安装程序,结果仍然无法顺...
- Win10预览版10532界面兴起“酷黑”风潮
-
Win10预览版10532的界面改动还是较为明显的,主要体现在右键菜单上面。总体来看,该版本的右键菜单间距更宽,视觉上更大气,操作上更便于触控。具体来说,任务栏右键菜单的变化最为明显。除了增加选项的宽...
- Win10预览版10532上手图集(windows10预览版下载)
-
IT之家讯8月28日,微软今天推送了Win10预览版10532快速版更新,在该版本中,微软主要是加强细节上调整,并且主要是增强Edge浏览器性能等。在Windows10预览版10532中,微软改进了...
- Win10预览版10532上手视频亮点演示
-
IT之家讯8月28日消息,今天凌晨微软向WindowsInsider快速通道用户推送了Win10预览版10532。在Windows10预览版10532中,微软改进了右键菜单,外观更加现代化。另外还...
- 第二篇 前端框架Vue.js(vue前端框架技术)
-
前端三大核心是网页开发的基础,Vue则是基于它们构建的“生产力工具”。通俗理解就是HTML是化妆的工具如眉笔,CSS是化妆品如口红,JavaScript是化妆后的互动,而Vue就是化妆助手。有了化妆工...
- 基于SpringBoot + vue2实现的旅游推荐管理系统
-
项目描述...
- 基于Vue以及iView组件的后端管理UI模板——iview-admin
-
介绍iView-admin是一套后端管理界面模板,基于Vue2.0,iView(现在为ViewUI)组件是一套完整的基于Vue的高质量组件库,虽然Github上有一套非常火的基于ElementUI...
- 别再说你会SPA开发了,这5个核心你真的搞懂了吗?
-
前言此spa非彼spa,不是你所熟知的spa。你所熟知的spa作者肯定是没有你熟悉的。我们这里指的是在前端开发中的一种模型,叫作单页应用程序,顾名思义,就是整个项目只有一个页面,而页面中的内容是动态的...
- React.js Top20面试题(react.js中文官网)
-
概述作为React开发者,对框架的关键概念和原则有扎实的理解是很重要的。考虑到这一点,我整理了一份包含20个重要问题的清单,每个React开发者都应该知道,无论他们是在面试工作还是只是想提高技能。...
- 美媒:特朗普签署行政令后,FBI又发现约2400份、总计超14000页涉肯尼迪遇刺案文件
-
来源:环球时报新媒体1月23日特朗普下令公布肯尼迪遇刺案相关机密文件图源:美媒综合福克斯新闻网和Axios网站10日报道,在总统特朗普签署行政令,要求公布“肯尼迪遇刺案”相关政府机密文件之后,美国...
- 2021 年 Node.js 开发人员学习路线图
-
Node.js自发布以来,已成为业界重要破局者之一。Uber、Medium、PayPal和沃尔玛等大型企业,纷纷将技术栈转向Node.js。Node.js支持开发功能强大的应用,例如实时追踪...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- Win10预览版10532已知问题汇总(微软win11正式版已知问题一览)
- Gabe Aul正测试Win10 Mobile 10532,Insider用户还需等
- 微软开始推送Win10预览版10532快速版更新
- Win10预览版10532更新内容大全(windows10更新预览版)
- 无法升级Win10预览版10532?也许Hyper-V在搞鬼
- Win10预览版10532界面兴起“酷黑”风潮
- Win10预览版10532上手图集(windows10预览版下载)
- Win10预览版10532上手视频亮点演示
- 第二篇 前端框架Vue.js(vue前端框架技术)
- 基于SpringBoot + vue2实现的旅游推荐管理系统
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)