圖形用戶界面中的控件元素設計研究

（河南工程學院 河南·鄭州 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界面控件元素是實現產品功能及建構邏輯框架的重要內容，隨著數字智能設備的發展，控件形式及風格也在不斷發生著變化，故對其視覺層面及交互層面的設計研究還需要更為深入的探索。