（河南工程學(xué)院 河南·鄭州 451191）

0 引言

隨著移動智能設(shè)備的迅速發(fā)展，用戶除了追求圖形界面的視覺個(gè)性外，對產(chǎn)品硬件性能的完善、操作系統(tǒng)的交互體驗(yàn)、應(yīng)用程序的內(nèi)容多樣性及其功能的易用性等方面更為關(guān)注。對設(shè)計(jì)開發(fā)者而言，增強(qiáng)應(yīng)用軟件用戶體驗(yàn)，提升用戶黏性，在一定程度上與圖形用戶界面中控件元素的有效設(shè)計(jì)有著密切聯(lián)系。首先，界面中的控件可在多個(gè)頁面重復(fù)調(diào)用，使操作邏輯更加清晰、嚴(yán)謹(jǐn)；其次，在各頁面中進(jìn)行統(tǒng)一的控件元素設(shè)計(jì)，能夠大大減少設(shè)計(jì)開發(fā)的時(shí)間成本；再次，控件元素的個(gè)性化制定，在大幅降低用戶在軟件操作中的學(xué)習(xí)認(rèn)知成本的同時(shí)，可提升用戶界面的指引性及互動性。在控件設(shè)計(jì)時(shí)，控件的布局以業(yè)務(wù)、功能和需求為出發(fā)點(diǎn)，重要控件設(shè)計(jì)凸顯，利用控件設(shè)計(jì)實(shí)現(xiàn)控件層次感，引導(dǎo)用戶使用相關(guān)功能。

1 按鈕設(shè)計(jì)

1.1 單擊按鈕設(shè)計(jì)

按鈕作為圖形用戶界面中最基礎(chǔ)的控件元素之一，在絕大部分?jǐn)?shù)字產(chǎn)品或操作平臺中被廣泛應(yīng)用，并發(fā)揮著舉足輕重的作用。在頁面中，按鈕傳達(dá)給用戶的是直接的可執(zhí)行性的操作，它們通常會存在于整個(gè)UI界面體系當(dāng)中，從各種對話框、窗口到工具欄。按鈕和鏈接在某些功能體驗(yàn)上很接近，其功能作用為即時(shí)響應(yīng)用戶的點(diǎn)擊行為，用戶通過鼠標(biāo)點(diǎn)擊或手指觸摸即可觸發(fā)得到相應(yīng)結(jié)果。在PC用戶界面中，可執(zhí)行的單擊按鈕控件分為六個(gè)狀態(tài)：正常狀態(tài)、懸停狀態(tài)、點(diǎn)擊狀態(tài)、聚焦?fàn)顟B(tài)、失效狀態(tài)、加載狀態(tài)。

單擊按鈕元素通常呈現(xiàn)于關(guān)鍵頁面、對話框、表單、卡片、工具欄等各種界面模式中，依據(jù)視覺層級原則，可將單擊按鈕分為主要按鈕、默認(rèn)按鈕、提示按鈕、文字按鈕四種類型。主要按鈕往往在色彩和尺寸比例等方面上較為醒目且突出，處于視覺的最高層級，其目的在于引導(dǎo)用戶點(diǎn)擊，具有高度強(qiáng)調(diào)的特征；默認(rèn)按鈕在界面中出現(xiàn)的概率最高，其處于視覺的中間層級，起到中等強(qiáng)調(diào)的作用，在以扁平化風(fēng)格為主的 UI界面設(shè)計(jì)中往往采用線框或低飽和度色彩填充的處理形式；提示按鈕在界面中的操作頻率并不高，其作用大都以提醒或警示為主，在樣式上可采用虛線框或者點(diǎn)睛色加以處理；文字按鈕屬于視覺的最弱層級，在門戶類及電商類網(wǎng)站中常見，由于其沒有容器填色作背景，不會對用戶閱讀造成強(qiáng)烈干擾，在設(shè)計(jì)應(yīng)用時(shí)文字設(shè)置不能過長，且需保證信息內(nèi)容清晰明確。

1.2 滑塊按鈕設(shè)計(jì)

滑塊按鈕設(shè)計(jì)為按鈕控件元素的一類特殊樣式，在移動用戶界面中應(yīng)用極為廣泛。隨著數(shù)字硬件的更新迭代，更多產(chǎn)品和平臺都具備觸摸交互的功能體驗(yàn)，“長按”、“雙擊”、“滑動”等手勢交互已被用戶頻繁使用?；瑝K按鈕設(shè)計(jì)的應(yīng)用場景很多，最常見的即為布爾開關(guān)按鈕，其用于切換ON與OFF兩種互斥的狀態(tài)，用戶只需進(jìn)行左右滑動即可實(shí)現(xiàn)不同選擇，這種按鈕形式在界面布局中可節(jié)省更大的版面空間，使信息結(jié)構(gòu)更簡單化。例如手機(jī)操作系統(tǒng)中常見的拖動滑塊解鎖的功能，這種設(shè)計(jì)形式能有效防止用戶不小心喚醒屏幕后進(jìn)行解鎖的操作失誤。

2 控制元素設(shè)計(jì)

2.1 活動與進(jìn)度指示器

活動與進(jìn)度指示器在UI界面中的表現(xiàn)為提示用戶的作用，告知用戶系統(tǒng)正在處理或者正在執(zhí)行下達(dá)的指令，消除用戶的心理等待時(shí)間?；顒优c進(jìn)度指示器與用戶之間的無須進(jìn)行手勢動作的交互，當(dāng)系統(tǒng)后臺正在運(yùn)轉(zhuǎn)或加載任務(wù)，活動指示器在頁面中呈現(xiàn)動態(tài)效果，其通常會出現(xiàn)在頁面中央或狀態(tài)欄中，停留若干時(shí)間后會緊接出現(xiàn)進(jìn)度指示器，為用戶展示系統(tǒng)預(yù)測的任務(wù)完成程度或所用時(shí)間，通常以圓形或條狀等圖形呈現(xiàn)比例。在許多產(chǎn)品中，活動指示器與進(jìn)度指示器的設(shè)計(jì)并非會使用系統(tǒng)默認(rèn)的控件形式，而是定制屬于產(chǎn)品風(fēng)格氣質(zhì)的視覺形式，例如一些應(yīng)用程序會使用趣味性的動態(tài)指示圖形來緩解用戶的等待顧慮。

2.2 頁碼與刷新控件

頁碼控件在banner輪播圖片中較為常見，其作用是為用戶呈現(xiàn)當(dāng)前共擁有的頁面視圖數(shù)量，并告知用戶當(dāng)前頁的位置。在設(shè)計(jì)中，以圓點(diǎn)或矩形為主要展示形式，代表當(dāng)前頁的圖形可在顏色或者尺寸大小上做突出處理，其他頁面保持形式一致。值得注意的是，一般在數(shù)量設(shè)置上不宜過多，間距適中，否則會造成一定程度的視覺干擾。

刷新控件在PC網(wǎng)頁端的設(shè)計(jì)形式較為單一，一般以點(diǎn)擊按鈕或圖標(biāo)可實(shí)現(xiàn)頁面刷新。而在移動界面中的形式具有獨(dú)特性和趣味性，其主流的設(shè)計(jì)形式結(jié)合了手勢交互的操作，用戶上下拖拽頁面即可觸發(fā)刷新與加載指令，從而實(shí)現(xiàn)頁面內(nèi)容的更新與加載，有時(shí)可伴隨頗具視覺趣味的動畫設(shè)計(jì)。這種下拉刷新的交互方式由Twitter最早使用，如今在更多的手機(jī)App中廣泛應(yīng)用。例如Zcool站酷手機(jī)應(yīng)用中，當(dāng)用戶向下拉動主頁面置頂時(shí)，可進(jìn)行界面內(nèi)容更新，同時(shí)標(biāo)簽欄下方會彈出個(gè)性的動畫設(shè)計(jì)，其達(dá)到的視覺效果與活動指示器相同，而當(dāng)用戶在瀏覽至頁面底部時(shí)再次向上拉動，可實(shí)現(xiàn)頁面內(nèi)容的加載。

2.3 開關(guān)與滑動器

開關(guān)控件屬于特殊的滑塊類按鈕，又稱為切換器，用戶可以直接滑動滑塊實(shí)現(xiàn)兩種互斥狀態(tài)的切換。在絕大多數(shù)手機(jī)App開發(fā)中，開關(guān)控件直接使用系統(tǒng)組件即可，無需 UI設(shè)計(jì)師進(jìn)行額外單獨(dú)設(shè)計(jì)，但可根據(jù)UI界面的品牌主色與輔助色更改開關(guān)底部顏色，而在PC界面或游戲界面中，亦可依據(jù)UI整體風(fēng)格調(diào)性進(jìn)行個(gè)性定制?；瑒悠饔址Q為滑動選擇器，由滑塊與滑軌共同構(gòu)成，滑軌兩端分別代表數(shù)值變量的兩極，用戶可拖拽滑塊進(jìn)行數(shù)值控制?；瑒悠鞒Ｒ娪谝魳凡シ拧⒙曇艨刂?、顯示設(shè)置等界面模式，其設(shè)計(jì)形式與風(fēng)格類型因不同操作系統(tǒng)的UI界面體系而各有不同，設(shè)計(jì)時(shí)應(yīng)充分考慮滑軌在界面布局中的尺寸大小及位置關(guān)系。

3 篩選器設(shè)計(jì)

3.1 選項(xiàng)卡與分段控件

當(dāng)用戶需要在大量選擇對象或信息數(shù)據(jù)集合中快速找到目標(biāo)，并且做出相應(yīng)的選擇動作時(shí)，篩選器會使之變得輕松。在用戶界面中，篩選器能夠幫助用戶提升決策效率。在移動界面中，選項(xiàng)卡與分段控件為常見的直列式型篩選器，前者為安卓系統(tǒng)中的設(shè)計(jì)樣式，后者為IOS系統(tǒng)常見的控件元素。不同的是，選項(xiàng)卡可允許追加三項(xiàng)以上的欄目，而分段控件往往不超過三項(xiàng)，故分段控件也可應(yīng)用于導(dǎo)航欄上。

3.2 時(shí)間與日期選擇器

時(shí)間與日期選擇器是一種特殊的篩選器設(shè)計(jì)形式，這此類選擇器可根據(jù)項(xiàng)目集合設(shè)立多個(gè)旋轉(zhuǎn)滑輪，用戶可通過上下滑動的方式選擇目標(biāo)對象。這種“輪盤”式的設(shè)計(jì)形式，在網(wǎng)頁界面中也得到廣泛應(yīng)用。設(shè)計(jì)時(shí)，需要充分考慮界面布局與對象類別的排列邏輯。

4 表單控件設(shè)計(jì)

4.1 文本框與復(fù)選框

文本框控件為用戶在界面中進(jìn)行文字輸入的區(qū)域，其樣式有圓角、直角、純色填充或單線描邊等。在移動界面中，用戶點(diǎn)擊文本框即可彈出輸入鍵盤開始編輯文字，在設(shè)計(jì)時(shí)需考慮鍵盤界面的高度與輸入框的關(guān)系，并遵循合理的文本框設(shè)計(jì)規(guī)范，其中包含文本框的高度、間距、框內(nèi)字體大小等。復(fù)選框控件一般出現(xiàn)于用戶進(jìn)行目標(biāo)對象選擇時(shí)的界面中，選框內(nèi)可包含文字、圖片以及選擇標(biāo)簽，其中標(biāo)簽的狀態(tài)一般分為選中及未選中兩類，在設(shè)計(jì)時(shí)需要在視覺形式上明確對立，可通過顏色變化或改變標(biāo)簽圖形樣式來區(qū)分。

4.2 下拉菜單與表格

下拉菜單為用戶界面中最為常見的控件元素，在電商類應(yīng)用程序中應(yīng)用廣泛，由于該類應(yīng)用中內(nèi)嵌大量的H5頁面，其形式更具個(gè)性化與多樣化。當(dāng)用戶選中一個(gè)選項(xiàng)后，該選單會向下延伸出具有其他選項(xiàng)的另一個(gè)表單。下拉式表單通常應(yīng)用于把一些具有相同分類的功能放在同一個(gè)下拉式表單中，并把這個(gè)下拉式表單置于主選單的一個(gè)選項(xiàng)下。由于表單中涵蓋多個(gè)下拉選項(xiàng)，設(shè)計(jì)時(shí)依舊要考慮單個(gè)選框的高度以及字體大小，界面中菜單樣式應(yīng)保持統(tǒng)一，背景與文字色彩的使用應(yīng)遵循規(guī)范，清晰且易于辨別。用戶界面中的表格以歸類與展示信息為其主要作用，表格的樣式在設(shè)計(jì)時(shí)應(yīng)充分結(jié)合周圍圖形元素及文字進(jìn)行合理布局。

5 結(jié)語

本文筆者根據(jù)應(yīng)用程序中常用控件元素的功能特征，分別針對界面中的按鈕、控制元素、篩選器、表單控件進(jìn)行了深入探析，并總結(jié)出相應(yīng)的設(shè)計(jì)思路及方法，對從事UI設(shè)計(jì)行業(yè)相關(guān)工作者起到了一定借鑒意義。UI界面控件元素是實(shí)現(xiàn)產(chǎn)品功能及建構(gòu)邏輯框架的重要內(nèi)容，隨著數(shù)字智能設(shè)備的發(fā)展，控件形式及風(fēng)格也在不斷發(fā)生著變化，故對其視覺層面及交互層面的設(shè)計(jì)研究還需要更為深入的探索。