图形用户界面中的控件元素设计研究

（河南工程学院 河南·郑州 451191）

0 引言

随着移动智能设备的迅速发展，用户除了追求图形界面的视觉个性外，对产品硬件性能的完善、操作系统的交互体验、应用程序的内容多样性及其功能的易用性等方面更为关注。对设计开发者而言，增强应用软件用户体验，提升用户黏性，在一定程度上与图形用户界面中控件元素的有效设计有着密切联系。首先，界面中的控件可在多个页面重复调用，使操作逻辑更加清晰、严谨；其次，在各页面中进行统一的控件元素设计，能够大大减少设计开发的时间成本；再次，控件元素的个性化制定，在大幅降低用户在软件操作中的学习认知成本的同时，可提升用户界面的指引性及互动性。在控件设计时，控件的布局以业务、功能和需求为出发点，重要控件设计凸显，利用控件设计实现控件层次感，引导用户使用相关功能。

1 按钮设计

1.1 单击按钮设计

按钮作为图形用户界面中最基础的控件元素之一，在绝大部分数字产品或操作平台中被广泛应用，并发挥着举足轻重的作用。在页面中，按钮传达给用户的是直接的可执行性的操作，它们通常会存在于整个UI界面体系当中，从各种对话框、窗口到工具栏。按钮和链接在某些功能体验上很接近，其功能作用为即时响应用户的点击行为，用户通过鼠标点击或手指触摸即可触发得到相应结果。在PC用户界面中，可执行的单击按钮控件分为六个状态：正常状态、悬停状态、点击状态、聚焦状态、失效状态、加载状态。

单击按钮元素通常呈现于关键页面、对话框、表单、卡片、工具栏等各种界面模式中，依据视觉层级原则，可将单击按钮分为主要按钮、默认按钮、提示按钮、文字按钮四种类型。主要按钮往往在色彩和尺寸比例等方面上较为醒目且突出，处于视觉的最高层级，其目的在于引导用户点击，具有高度强调的特征；默认按钮在界面中出现的概率最高，其处于视觉的中间层级，起到中等强调的作用，在以扁平化风格为主的 UI界面设计中往往采用线框或低饱和度色彩填充的处理形式；提示按钮在界面中的操作频率并不高，其作用大都以提醒或警示为主，在样式上可采用虚线框或者点睛色加以处理；文字按钮属于视觉的最弱层级，在门户类及电商类网站中常见，由于其没有容器填色作背景，不会对用户阅读造成强烈干扰，在设计应用时文字设置不能过长，且需保证信息内容清晰明确。

1.2 滑块按钮设计

滑块按钮设计为按钮控件元素的一类特殊样式，在移动用户界面中应用极为广泛。随着数字硬件的更新迭代，更多产品和平台都具备触摸交互的功能体验，“长按”、“双击”、“滑动”等手势交互已被用户频繁使用。滑块按钮设计的应用场景很多，最常见的即为布尔开关按钮，其用于切换ON与OFF两种互斥的状态，用户只需进行左右滑动即可实现不同选择，这种按钮形式在界面布局中可节省更大的版面空间，使信息结构更简单化。例如手机操作系统中常见的拖动滑块解锁的功能，这种设计形式能有效防止用户不小心唤醒屏幕后进行解锁的操作失误。

2 控制元素设计

2.1 活动与进度指示器

活动与进度指示器在UI界面中的表现为提示用户的作用，告知用户系统正在处理或者正在执行下达的指令，消除用户的心理等待时间。活动与进度指示器与用户之间的无须进行手势动作的交互，当系统后台正在运转或加载任务，活动指示器在页面中呈现动态效果，其通常会出现在页面中央或状态栏中，停留若干时间后会紧接出现进度指示器，为用户展示系统预测的任务完成程度或所用时间，通常以圆形或条状等图形呈现比例。在许多产品中，活动指示器与进度指示器的设计并非会使用系统默认的控件形式，而是定制属于产品风格气质的视觉形式，例如一些应用程序会使用趣味性的动态指示图形来缓解用户的等待顾虑。

2.2 页码与刷新控件

页码控件在banner轮播图片中较为常见，其作用是为用户呈现当前共拥有的页面视图数量，并告知用户当前页的位置。在设计中，以圆点或矩形为主要展示形式，代表当前页的图形可在颜色或者尺寸大小上做突出处理，其他页面保持形式一致。值得注意的是，一般在数量设置上不宜过多，间距适中，否则会造成一定程度的视觉干扰。

刷新控件在PC网页端的设计形式较为单一，一般以点击按钮或图标可实现页面刷新。而在移动界面中的形式具有独特性和趣味性，其主流的设计形式结合了手势交互的操作，用户上下拖拽页面即可触发刷新与加载指令，从而实现页面内容的更新与加载，有时可伴随颇具视觉趣味的动画设计。这种下拉刷新的交互方式由Twitter最早使用，如今在更多的手机App中广泛应用。例如Zcool站酷手机应用中，当用户向下拉动主页面置顶时，可进行界面内容更新，同时标签栏下方会弹出个性的动画设计，其达到的视觉效果与活动指示器相同，而当用户在浏览至页面底部时再次向上拉动，可实现页面内容的加载。

2.3 开关与滑动器

开关控件属于特殊的滑块类按钮，又称为切换器，用户可以直接滑动滑块实现两种互斥状态的切换。在绝大多数手机App开发中，开关控件直接使用系统组件即可，无需 UI设计师进行额外单独设计，但可根据UI界面的品牌主色与辅助色更改开关底部颜色，而在PC界面或游戏界面中，亦可依据UI整体风格调性进行个性定制。滑动器又称为滑动选择器，由滑块与滑轨共同构成，滑轨两端分别代表数值变量的两极，用户可拖拽滑块进行数值控制。滑动器常见于音乐播放、声音控制、显示设置等界面模式，其设计形式与风格类型因不同操作系统的UI界面体系而各有不同，设计时应充分考虑滑轨在界面布局中的尺寸大小及位置关系。

3 筛选器设计

3.1 选项卡与分段控件

当用户需要在大量选择对象或信息数据集合中快速找到目标，并且做出相应的选择动作时，筛选器会使之变得轻松。在用户界面中，筛选器能够帮助用户提升决策效率。在移动界面中，选项卡与分段控件为常见的直列式型筛选器，前者为安卓系统中的设计样式，后者为IOS系统常见的控件元素。不同的是，选项卡可允许追加三项以上的栏目，而分段控件往往不超过三项，故分段控件也可应用于导航栏上。

3.2 时间与日期选择器

时间与日期选择器是一种特殊的筛选器设计形式，这此类选择器可根据项目集合设立多个旋转滑轮，用户可通过上下滑动的方式选择目标对象。这种“轮盘”式的设计形式，在网页界面中也得到广泛应用。设计时，需要充分考虑界面布局与对象类别的排列逻辑。

4 表单控件设计

4.1 文本框与复选框

文本框控件为用户在界面中进行文字输入的区域，其样式有圆角、直角、纯色填充或单线描边等。在移动界面中，用户点击文本框即可弹出输入键盘开始编辑文字，在设计时需考虑键盘界面的高度与输入框的关系，并遵循合理的文本框设计规范，其中包含文本框的高度、间距、框内字体大小等。复选框控件一般出现于用户进行目标对象选择时的界面中，选框内可包含文字、图片以及选择标签，其中标签的状态一般分为选中及未选中两类，在设计时需要在视觉形式上明确对立，可通过颜色变化或改变标签图形样式来区分。

4.2 下拉菜单与表格

下拉菜单为用户界面中最为常见的控件元素，在电商类应用程序中应用广泛，由于该类应用中内嵌大量的H5页面，其形式更具个性化与多样化。当用户选中一个选项后，该选单会向下延伸出具有其他选项的另一个表单。下拉式表单通常应用于把一些具有相同分类的功能放在同一个下拉式表单中，并把这个下拉式表单置于主选单的一个选项下。由于表单中涵盖多个下拉选项，设计时依旧要考虑单个选框的高度以及字体大小，界面中菜单样式应保持统一，背景与文字色彩的使用应遵循规范，清晰且易于辨别。用户界面中的表格以归类与展示信息为其主要作用，表格的样式在设计时应充分结合周围图形元素及文字进行合理布局。

5 结语

本文笔者根据应用程序中常用控件元素的功能特征，分别针对界面中的按钮、控制元素、筛选器、表单控件进行了深入探析，并总结出相应的设计思路及方法，对从事UI设计行业相关工作者起到了一定借鉴意义。UI界面控件元素是实现产品功能及建构逻辑框架的重要内容，随着数字智能设备的发展，控件形式及风格也在不断发生着变化，故对其视觉层面及交互层面的设计研究还需要更为深入的探索。