浅议图标在UI设计中的界面布局

杨媛

摘 要：在UI设计中图标设计是重要的设计元素，其功能是在于让用户能根据需求进行准确的点击，因此图标设计所表述的含义必须准确。我们必须让UI中的图标达到看图识字的效果，因为不同国界、不同语言的情况下，只能通过图形表意来完成信息的传递。作为能和用户直接互动的图标设计因其本身的指示功能、识别功能、操作功能都要求我们对图标设计有足够的认识，因此图标在UI设计中尤为重要。

关键词：UI设计；图标；界面；布局

DOI：10.16640/j.cnki.37-1222/t.2019.15.207

图标设计在这个UI界面种类繁多的情况下具备个性化、独特化是不可或缺的，图标作为一种设计语言，它是一种具有很强的表现含义、象征意义的图形符号，在UI设计中最直接的作用就是便于用户识别和记忆，图标设计有别于标志设计，标志设计更倾向于是用隐喻的手法或抽象的手法来表现，不会过于直接的使用具象图形，但图标设计却需要直接明了，让用户能一眼看出其含义，能直接识别其功能，因此图标设计多运用较为直观的视觉表现方式。在进行图标设计时，直接的图形表现很难做到既保证艺术审美又非常具象，所以在设计时需要考虑诸多因素，如图标的形状、大小、色彩、表现形式等。

但总体来说图标设计还是属于视觉设计，因此设计的第一要素就是视觉上的界面布局，UI的界面布局是设计的第一步，是设计前期的工作，从产品的功能性、用户的需求关系、界面的展示效果等均属于界面布局的一部分，并且因为产品的最终目的是交予用户使用和选择，所以应该将用户需求放在第一位。作为受众而言，产品的功能是第一选择，也就是这个产品的目的是什么，只有有针对性的产品而没有包罗万象的产品，其次是美感，一款产品部具备美感，抓不住用户的审美需求，也将不会在市面上流通。

1 图标与界面布局的关系

在图标的界面布局设计过程中，必须要把握图标在界面中的均衡性、视觉清晰感，以及图标的规范效果。图标在界面的均衡性是指图标存在于界面中时上下左右的留白关系是否均衡，如我们常说的画面平衡，有多绘画的初学者经常会犯的错误就是面画的重心感的问题，左轻右重、右轻左重、下轻上重等，所以在画面中图标的布局一定要注意画面的均衡，左右的间距、图标之间的排列间距，界面的重心问题和绘画一样讲究的是下重上轻，或者重心平衡，让视觉元素分布更加合理，不要出现视觉效果过于集中或过于分散的情况。特别是UI界面的，特别是手机界面的屏幕均有限定，所以图标的尺寸就更加有限，图标在界面布局中的大小也非常关键，过大会让画面感还饱和，过小会引起用户的视觉疲劳，并且会出现信息识别错误以及点击错误的情况，所以在均衡性上面一定要进行多次调整。

2 图标的视觉要求

图标在界面中的清晰感一定要得到保证，图标设计的作用就在于识别性，必须达到清晰可见，这是图标设计的基本要求。很多设计师在进行图标设计时为了给予图标个性化，将诸多设计要素内容放进图标当中，让图标显得非常臃肿，我们在进行设计时，图标可以放大观看，但在手机界面当中，图标的大小已经被固定，不能随意的调整，并且图标在放进界面之前会进行像素的调整，改变图标的像素大小，将所有界面元素全部像素调小，用于减轻产品的运行负担，提高运行速度。所以在进行图标设计时，不要为了追求设计的个性化而融入太多的设计要素，直观的、明确的展示其图标功能即可。

3 图标的设计与运用规范

图标的规范效果是指图标的设计规范，图标的规范效果一般是指图标的大小规范和保存格式，一般的图标设计常用工具为AI或PS，我们在图标设计好后会进行导图，一般的不涉及到透明背景的显示效果的标志我们保存为JPG格式，JPG格式下的图标压缩效果较好，图标使用的还原度高，因此多为图标设计使用；第二种图标的保存形式为PNG格式，在图标涉及到透明背景时，要将图标保存为PNG格式；第三种为GIF格式，这种格式也适用于透明背景的应用，但最大效果是动态效果的制作，该格式是可以进行简单的连续动画画面使用的。

图标的大小规范是因为UI界面的大小是被限定的，界面取决于屏幕密度，屏幕密度分为4个等级低密度（IDPI）、中密度（MDPI）、高密度（HDPI）、特高密度（XHDPI），IPHONE系统和Android系统是移动端的两大系统。Android系统的图标大小又根据启动图标、菜单栏图标、状态图标、列表显示图标等，启动图标和菜单图标低密度一般为36PX*36PX、中密度为48PX*48PX、高密度为72PX*72PX、特高密度为96PX*96PX、状态图标和列表图标低密度一般为24PX*24PX，中密度为32PX*32PX，高密度为48PX*48PX，特高密度为72PX*72PX。IPHONE系统的图标大小一般默认为中密度，启动图标一般为57PX*57PX，设置图标等其他图标为29PX*29PX。

4 图标设计的色彩要求

然后是图标的图形设计，图形的确定是图标设计的重要环节，用户的信息获取来源均来自图形，因此图标图形必须是清晰可见的图形、简单易懂的图形，或者图形和文字共存，图标中的图形必须要完整且清晰的表述其功能含义，在相关联图形的设计时，风格必须协调统一，在色彩方面一定要遵循色彩心理的原理，在色彩心理上在满足功能需求的同时也要满足用户的需求，图标的色彩要和整体界面色彩的搭配协调、相互统一，不能出现色彩冲击太大的情况，这样会影响用户的视觉体验。针对不同的产品和用户群体，色彩的搭配也不尽相同，例如年轻人使用较多的APP，色彩搭配应该更加的绚丽、丰富多变，而针对中老人的APP色彩搭配应该沉稳，尽量使用同色系的颜色变化。

以上无论是图标在界面中的均衡性、视觉清晰感、图标的规范要素、图形的选择、色彩的搭配等都属于UI设计的视覺要素，人类作为视觉性动物，对艺术审美的要求不断拔高，这就要求设计师无论是功能上还是视觉上都应该达到最佳，所以必须在UI设计的各方面都下大功夫。

参考文献：

[1]李倩.基于用于体验的UI界面中图标设计研究[D].沈阳师范大学，2018（03）.

[2]荣波.浅图标设计在移动应用界面中的设计研究[J].现代装饰（理论），2016（12）.

[3]何冬.移动终端平台下视觉形象在传统餐饮业中的应用研究[D].西南交通大学，2017.