首页
业务
关于
客户
服务
联系
13520390899
资 深 的 互 联 网 开 发 服 务 商
专注于 网站开发 / 小程序开发 / APP开发 / 软件开发
网十科技 > 动态

新手福利!超详细解析系统图标设计的6大原则

什么是系统图标系统图标是在触摸设备上具有明确指代含义的图形符号。它源自于生活中的各种图形标识,是触摸设备中元素图形化的重要组成部分。它不同于手机屏幕上的应用图标,在这里我们要讲解的系统图标是指在移动设备界面中的小图标。在UI设计中系统图标是非常重要的部分。虽然系统图标的尺寸看起来非常小,但是系统图标设计的能力在很大程度上反映了一个UI设计师的设计水准。

界面中的小图标称为系统图标

系统图标的作用系统图标在界面设计中起着非常重要的信息传达和提升美感的重要作用。首先图标可以代替文字快速传递信息,用户可以省去阅读文字的时间直接识别图形就可以快速做出反应。其次,图标可以极大的提升界面的美观度和简洁度,例如表示点赞数和评论数的图标。另外也有一部分图标因为含义较为生僻,图标不能完整的表达含义。这种情况下就需要图标和文字搭配使用。

系统图标设计原则:

1.避免模糊像素在UI设计最基础也是最忌讳的问题就是像素模糊的问题,这是因为随着设备的不断更新手机屏幕的显示精致度越来高,任何一个微小的瑕疵都会在手机屏幕上被用户明显感知。并且会因为这样的模糊问题直接降低整个UI界面的品质度。

像素清晰和像素模糊的对比

这张图是清晰图标和模糊效果的对比,是不是差距很大呢。

2.统一的栅格体系,保证视觉大小一致性为了保证系统图标的视觉大小一致,谷歌官方给安卓系统制定了一套完善的栅格系统。这套栅格系统分别定制了方形图标,圆形图标,横长形图标和竖长形图标。因为不同图形的图标的视觉张力不同会给人不同的视觉大小,这套栅格就是为了能够保证不同形状下图标的视觉大小一致。

安卓系统官方栅格系统

如果方形和圆形按照实际尺寸做一样大小的情况下,正方形看起来会比圆形的视觉大小大很多。

按照栅格体系适当缩小正方形的实际尺寸后,正方形和圆形的视觉大小就保持了统一

栅格体系实际应用的效果

3.统一的视觉风格一套优质的系统图标必然是一套有着自己统一风格的图标,统一的视觉风格有很多种元素,包含圆角,线面,线条粗细,设计形式等。圆角的统一又分为统一的外圆角和统一的内圆角,例如外圆角为4px内圆角为2px,那么所有涉及到圆角的图标都要保持统一。线形图标和面性图标最好不要混合使用,尤其是同一类的图标。线条粗细要全套图标完全一致,例如设定图标粗细为3px那就要统一为3px。当然在实际设计中可能还有更多的设计元素需要统一,只要遵循这个统一的原则就一定能设计出一套有品质保证的图标。

统一的线条粗细,统一的断点设计,统一的色彩运用

统一的色彩,统一的线条,统一的圆角

4.统一的透视角度图标设计的透视角度经常被设计师所忽略,所以在这里专门拿出来着重讲解一下。一般情况下图标设计的角度都会选择正视图的角度,这个角度的图标图形会相对更加简洁概括。当然也可以选择其他角度,比如俯视的角度,这样的角度就会相对复杂,其中已经出现了透视关系比较难处理。当然最可怕的角度莫过于是侧视图的三维角度了,这个角度出现了三个面在设计图标的时候已经变得非常复杂了。再设计图标时应当尽量避免这样的角度,以免自取烦恼。为了保持整套图标的设计统一,应当避免不同透视角度图标的存在。

7x24
售后服务支持
10
故障时长赔付
16
16年行业服务经验
20
售后服务人员
70
设计、开发团队
10
国内顶尖技术专家
1000
大型及上市企业
版权所有 © 北京网十互动科技有限公司 网站 APP 小程序 软件 备案号:京ICP备16050073号-2

电话咨询