2.1　UI界面设计元素的分类

UI界面中包含多种不同的视觉设计元素，包括启动界面设计、界面框架设计、按钮设计、图标设计、标签设计、菜单设计、滚动条及状态栏设计等。

●启动界面设计

由于启动界面会在不同的平台和操作系统中出现，所以UI界面设计中的启动界面多为高清图像。在转换不同的格式时，考虑到界面图像存在清晰度问题，所以对色彩的选用不宜超过256色，最好使用216色的网页安全色。

在启动界面的设计上，可以在界面上添加醒目的Logo，也可以在界面中添加名称、版本号、网址、版权声明、序列号等信息，加深用户对UI界面的印象，方便使用者或购买者在界面启动的时候得到提示。如图2-1所示为UI启动界面，可以看到图片、Logo和名称等内容。

如果想要在启动界面中插入图片，图片最好使用具有独立版权的、象征性强的、识别性高的和视觉传达效果较好的图形。若使用动态图片，则不宜帧数过长，但动态图片更容易形成该UI界面的个性化特征。

提示

PC 端的启动界面图像的大小多为主流显示器分辨率的1/6，而移动端的启动界面大小则是完全占满手机屏幕。如果UI 界面是一系列产品，还得考虑UI 界面整体设计的统一性和延续性。

●界面框架设计

UI界面的框架设计要比启动界面复杂得多，因为涉及界面的使用功能，所以设计师应该对该产品的程序及其如何使用都比较了解，具备一定的界面开发经验，并且能够快速地学习和使用UI产品。这便于设计师能够和UI产品的程序开发员及界面使用对象进行良好的沟通，同时也利于设计师设计出界面友好的、独特的、符合程序开发原则的UI界面框架。如图2-2所示为一款UI界面的框架设计。

UI界面的框架设计应该简洁明快，尽量少用无谓的装饰。在界面框架设计阶段更应该考虑如何节省屏幕空间，不同分辨率下的大小问题，缩放时的状态和原则，以及为按钮、菜单、标签、滚动条及状态栏预留位置等。

提示

UI 界面的框架设计要将界面整体色彩组合进行合理搭配，首先要将软件商标放在显著位置，方便使用者看到。然后将主菜单放在左边或上边、滚动条放在右边、状态栏放在下边，这样符合视觉流程和用户使用心理。

●按钮设计

UI界面的按钮设计应该具有交互性，即按钮会有2～6种状态效果。这几种状态效果分别为：点击时的状态、鼠标悬停时的状态、点击前的状态、点击后的状态、不能点击时的状态和独立自动变化的状态。如图2-3所示为两种不同设计形式的按钮。

按钮的设计最好具备简洁的图示效果，最好能够让使用者产生功能关联反应。而对于比较大型的UI界面，按钮的设计风格应该统一，并且与界面整体风格相融合，否则，功能差异大的按钮会让使用者对界面产生分离感。

●图标设计

UI界面的图标设计色彩不宜超过64色，因为图标设计是“方寸艺术”，所以设计师在设计时应该更加注重图标的视觉冲击力，以此给使用者留下深刻印象。如图2-4所示为PC端和移动端的图标。

在UI界面中图标需要在很小的范围内表现出UI界面的内涵，所以很多图标设计师在设计图标时使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，放大图标在人眼中的视觉效果，让使用者可以轻易看到图标，从而体现了图标的价值。如图2-5所示为两套不同形式的主题图标。

●标签设计

UI界面中的标签其实就是网页中常见的选项卡，在标签的设计过程中应该注意转角部分的变化，其状态可以参考按钮设计。

但是标签设计的状态一般情况下只有两种，分别为选中状态和未选中状态，如图2-6所示。

●菜单设计

UI界面的菜单设计通常情况下分为：选中状态和未选中状态，而且菜单的每个选项都包含文字和图示两项内容。简单来说，每个菜单选项的左边应为“图示”或“快捷键”，右边应为“菜单名称”，如图2-7所示为移动端和PC端的菜单界面。

提示

假如这个菜单选项还有下级菜单需要显示，那么设计师应该为此菜单项添加下级箭头符号或是其他符号，向使用者释义。同时，不同功能区间的菜单选项应该使用线条进行分割，让使用者可以更好地进行区分。

●滚动条及状态栏设计

UI界面设计中的滚动条主要是为了在固定大小的界面中可以存放更多内容。滚动条的基础设计应该有上下箭头、滚动标示等，如果再精细一些的话，也可以为滚动条设计翻页图标。

滚动条的设计是对区域性空间进行扩展，是对固定大小界面的循环利用，如图2-8所示。

在UI界面设计中，状态栏是为了显示当前UI界面的状态。如图2-9所示为移动端的UI界面状态栏。