圖形用戶界面中的版式設(shè)計

孫 湛

（安徽商貿(mào)職業(yè)技術(shù)學(xué)院 藝術(shù)設(shè)計系，安徽 蕪湖241000）

在個人電腦、互聯(lián)網(wǎng)和智能手機、平板電腦廣泛運用的當(dāng)今社會，用戶界面設(shè)計越來越受到重視，并獲得了高速發(fā)展。用戶界面，簡稱UI（User Interface），或稱使用者界面，是介于用戶與硬件之間，為彼此之間交互溝通而設(shè)計的相關(guān)軟件，它能將信息的內(nèi)部語言與指令轉(zhuǎn)換為使用者可以簡單接受和使用的形式，并達成雙向交流。早期的用戶界面稱為命令行界面（簡稱：CLI），依靠鍵盤輸入的指令作為使用者與計算機溝通的工具，不支持鼠標(biāo)操作，因其使用不便，隨著科技的發(fā)展已在一般個人用戶層面逐漸被對用戶來說更為簡便易用的圖形用戶界面（簡稱：GUI）所取代。

圖形用戶界面通過各種圖形來實現(xiàn)用戶與計算機系統(tǒng)之間的互動，以經(jīng)過設(shè)計美化的視窗、菜單、標(biāo)簽、圖標(biāo)、按鈕等界面元素，為用戶提供了界面友好的操作環(huán)境，著名的如微軟公司的 WORDOWS系列、蘋果公司的MACOS和IOS系列、谷歌的安卓系統(tǒng)系列。用戶可使用鼠標(biāo)、鍵盤乃至直接觸屏操作的方式操作圖形用戶界面軟件，軟件系統(tǒng)對用戶操作的反饋同樣以圖形方式顯示。因為視覺效果生動、操作直接便捷，且用戶使用門檻低，圖形用戶界面已被廣泛認可和使用，隨著個人數(shù)字終端的普及成為人們?nèi)粘Ｉ钪械闹匾?，也成為視覺傳達設(shè)計中日漸重要的組成部分。版式設(shè)計作為視覺傳達的重要手段，在圖形用戶界面設(shè)計中也同樣起到至關(guān)重要的作用。

一、圖形用戶界面中版式設(shè)計的特點

所謂版式設(shè)計，就是對版面上所有信息編排的形式進行設(shè)計，是將圖形、文字、色彩等視覺要素在限定的版面內(nèi)按照一定的審美規(guī)律進行排列組合。與傳統(tǒng)印刷品的版式設(shè)計相比，圖形用戶界面設(shè)計中版式設(shè)計除具有審美規(guī)律等共性外，還具有自身的獨特之處。

（一）版面尺寸具有不固定性

圖形用戶界面的版面是一種動態(tài)的版面，并且受到硬件平臺的屏幕尺寸和分辨率的影響。印刷品都有固定的版面尺寸，例如，一本開本為大16開的雜志，版面尺寸210mm×285mm，那么每個頁面都是相同的尺寸，設(shè)計者在這樣固定的版面里進行設(shè)計要素的編排，作品最終印刷出來后的視覺效果也都是固定不變的。與印刷品不同，對很多圖形用戶界面軟件來說，因為需運行的硬件不是唯一的，相應(yīng)帶來的結(jié)果是其顯示尺寸和分辨率具有不固定性。例如使用安卓操作系統(tǒng)的移動數(shù)字終端，包括智能手機、平板電腦、智能電視等多種，其屏幕尺寸從數(shù)寸至數(shù)十寸不等，分辨率大小也千差萬別，運行于安卓平臺的各類App，就必須考慮到同時對種類繁多的手機、平板電腦屏幕尺寸和分辨率的支持，有的甚至還需要考慮橫屏、豎屏使用的不同版面編排和視覺效果，因此其版式設(shè)計也就必須兼顧到App在多種終端上的顯示效果以及用戶的不同視覺習(xí)慣。例如在界面中將大量文字進行縱向多欄排版，在較大尺寸屏幕和高分辨率的支持下或許效果尚可，但在小屏幕、低分辨率情況下就會難以閱讀，過多的翻頁操作也會讓用戶厭煩。有不少第三方的app，因其設(shè)計開發(fā)企業(yè)和人員素質(zhì)良莠不齊，大多注重應(yīng)用的功能性，卻忽視了程序界面的編排，這就影響了軟件的推廣［1］。

（二）版式元素具有互動性

在印刷品的版式中，所編排的視覺元素包括文字、圖形、攝影圖片、色彩等，都屬于靜態(tài)元素。而在圖形用戶界面中，視覺元素除了傳統(tǒng)的靜態(tài)元素外，還包括動態(tài)圖片（如GIF格式圖片等）、動畫、視頻等動態(tài)視覺元素，而且這些視覺元素?zé)o論靜態(tài)還是動態(tài)，都可以被設(shè)計為可對用戶的操作（如點擊、滑動、按鍵輸入等）進行互動反饋，以及按某種規(guī)律或觸發(fā)條件產(chǎn)生放大、縮小、位置變化、變形、彈出菜單或窗口等能夠影響界面版式構(gòu)圖的變化。這些圖形和版式的變化，反過來又會對用戶的體驗和下一步操作帶來直接或間接影響，具有互動性特點。如果說對印刷版面的設(shè)計只要考慮平面空間因素，那么對圖形用戶界面的版面設(shè)計還要加上對時間因素的考慮。這種動態(tài)的、包含時間因素的互動效果，正是圖形用戶界面與印刷版面的最大不同點，也是其魅力所在。

（三）版式設(shè)計結(jié)構(gòu)具有非線性

傳統(tǒng)的平面印刷品，無論是書籍、刊物、報紙還是DM，其讀者閱讀的方式一般都是單線性的，也就是從前向后閱讀。這種閱讀方式也就決定了平面印刷品的編輯和版式設(shè)計方式是單線性的結(jié)構(gòu)，設(shè)計者在版式設(shè)計過程中要考慮到前后頁面、左右頁面視覺與內(nèi)容的連貫性與均衡性，讓讀者能清晰而流暢地閱讀信息。圖形用戶界面因為其架構(gòu)層級呈現(xiàn)樹形、網(wǎng)狀、發(fā)散狀乃至更復(fù)雜的結(jié)構(gòu)，不同頁面之間存在時間與空間的多重聯(lián)系，因此其編輯與版式設(shè)計是非線性的，結(jié)構(gòu)形式蘊含極其豐富的變化，為設(shè)計者提供了更大的設(shè)計發(fā)揮空間。

二、在圖形用戶界面中進行版式設(shè)計實踐應(yīng)遵循的幾個原則

因為圖形用戶界面設(shè)計中版式設(shè)計相對于傳統(tǒng)的印刷排版具有自身的獨特之處，設(shè)計時完全生搬硬套或完全摒棄傳統(tǒng)的印刷排版方式都是片面的，應(yīng)在秉承形式美法則等美學(xué)規(guī)律和邏輯規(guī)律的基礎(chǔ)上，靈活運用版式設(shè)計方法和技巧，根據(jù)圖形用戶界面的自身特點和用戶習(xí)慣進行考慮與設(shè)計。

（一）圖形用戶界面的版式設(shè)計要注意風(fēng)格整體一致性

版式設(shè)計可表現(xiàn)出獨特的風(fēng)格，如簡約主義、解構(gòu)主義等。除特殊情況外，圖形用戶界面的版式設(shè)計風(fēng)格應(yīng)該與軟件創(chuàng)意主題、界面視覺元素的視覺風(fēng)格、界面色彩的搭配使用風(fēng)格保持一致，這種一致性甚至是衡量界面設(shè)計是否成功的重要因素之一［2］。例如，現(xiàn)代簡約風(fēng)格的界面視覺元素和配色，就應(yīng)該搭配相應(yīng)簡潔明快的版式設(shè)計風(fēng)格。視覺風(fēng)格高度一致、主體性明確的用戶界面，更容易讓界面各個部分的信息安排顯得井井有條，甚至可以體現(xiàn)特定的文化氣質(zhì)，給人以視覺上的沖擊，從而給用戶留下深刻而鮮明的印象。

（二）圖形用戶界面的版式設(shè)計要具有易控性

在很多印刷品中，或為表現(xiàn)某種設(shè)計風(fēng)格，或為盡可能多地傳達復(fù)雜視覺信息，或因其他某種原因，版式可以設(shè)計得相當(dāng)復(fù)雜，特別是在雜志、報紙、DM等大信息量媒介中，這一情況相當(dāng)常見。但是在圖形用戶界面設(shè)計中，過于復(fù)雜的界面版式，會使用戶接受信息和進行操作的過程失于通暢，影響用戶視覺和操作體驗。特別是在對于智能手機等小尺寸屏幕的移動終端或?qū)Σ僮餍院突有砸筝^高的游戲類App上，過于復(fù)雜的界面版式，會讓用戶無從下手，進而失去使用的興趣。圖形用戶界面的版式設(shè)計要在考慮目標(biāo)用戶群年齡層次特點和閱讀、操控習(xí)慣的前提下，以方便用戶閱讀和操控為宗旨，有條理地規(guī)劃界面元素的圖形設(shè)計和編排。

（三）圖形用戶界面的版式設(shè)計要遵循用戶的使用習(xí)慣

圖形用戶界面設(shè)計的直接目的是方便用戶使用軟硬件系統(tǒng)，因此在其界面版式編排方面，必須考慮到大多數(shù)目標(biāo)用戶的使用特點和一般習(xí)慣。

用戶的使用習(xí)慣有的是因用戶年齡層次等自然生理因素產(chǎn)生，例如，學(xué)齡前兒童對鮮艷的顏色認知更加敏感。雖然他們的顏色視覺已經(jīng)能夠區(qū)分近似的混合色，如黃色和棕色，但還大多不能正確地把顏色和顏色的名稱聯(lián)系起來。所以圖形界面的主色調(diào)盡量選用鮮艷而明確的基本顏色，比如純度較高的紅、綠、黃、藍［3］，避免使用顏色傾向模糊的混合色調(diào)。兒童操作軟件時，無論使用鼠標(biāo)還是用手直接觸控屏幕，一般很難進行相對精確的點擊操作；因智力發(fā)育等原因，通常無法駕馭較為復(fù)雜的軟件功能設(shè)計。因此，針對低齡兒童用戶的圖形用戶界面在版式設(shè)計時，色彩搭配要醒目鮮明，強化視覺刺激；圖形和按鍵要比較大，且保持較大間隔，防止兒童發(fā)生誤操作；界面的功能分區(qū)不宜過多，要能夠一目了然，簡單摸索就能很快上手操作。

還有些使用習(xí)慣是長期以來約定俗成的選擇導(dǎo)致的。人們在日常生活中會逐漸積累對于各種事物的認知，從而形成自己的習(xí)慣和經(jīng)驗，如果接觸的某個事物與頭腦中的經(jīng)驗或習(xí)慣相關(guān)，人們就會本能地借助經(jīng)驗和習(xí)慣幫助自己完成對事物的接觸［4］。例如，軟件在進行一些重要操作時，界面上往往會彈出各種形式的確認對話框，上面一般都會有兩個大概意思為“確認”和“放棄”的按鈕，在大多數(shù)軟件中，“確認”按鈕放在左側(cè)，“放棄”按鈕放在右側(cè)，這就讓大多數(shù)用戶產(chǎn)生了思維慣性，“確認”操作習(xí)慣于點擊左側(cè)按鍵。如果某軟件將這一按鍵排列順序反過來，那么大多數(shù)使用者就會感到不適應(yīng)，在不經(jīng)意間很容易產(chǎn)生誤操作，從而影響使用體驗。

（四）圖形用戶界面的版式設(shè)計要保證合理的邏輯性

所謂邏輯，就是指人的正常思維規(guī)律。圖形用戶界面在版式設(shè)計上必須保證具備清晰合理的邏輯性，才能讓用戶獲得流暢舒適的使用體驗。

人的視覺不可能同時關(guān)注屏幕上的每個部分，必然有一個閱讀順序。當(dāng)今大眾的主流閱讀順序習(xí)慣受西方文化影響，是從左向右、從上向下的。受這一閱讀習(xí)慣影響，對界面的版式來說，視覺元素放在左側(cè)比在右側(cè)更醒目，放在上半部分比在下半部分更醒目。那么，哪些視覺元素放在醒目位置更具有邏輯性呢？一個圖形用戶界面上包含的圖形、按鍵、菜單、視頻等諸多界面元素，因功能設(shè)計、視覺效果、用戶習(xí)慣等因素，用戶使用時總是會自然地出現(xiàn)常用和不常用的區(qū)別，因此在界面版式設(shè)計時，也就必須明確這些界面元素的用戶重視程度，在界面排版上“區(qū)別對待”。具體來說，事先要明確哪些界面元素會經(jīng)常被用戶使用和重視，這些界面元素就應(yīng)放在版面上較為醒目的位置上。相反，一些不常用、常被忽視的界面元素就可以放在視覺上不突出的版面位置，很多情況下甚至可以把它們設(shè)置為默認隱藏狀態(tài)，防止其在視覺上分散用戶的注意力，另一方面也可以節(jié)約屏幕的可用版面面積。

有些界面元素被設(shè)計為只在某些情況下可以被用戶操作，它們在版式設(shè)計上應(yīng)當(dāng)通過色彩變化、附加特殊標(biāo)志、添加動畫特效等方式進行“可用”與“不可用”狀態(tài)的區(qū)分。例如某按鍵在不可用狀態(tài)時顯示為黑白狀態(tài)或疊加一個禁止符號，當(dāng)轉(zhuǎn)換為可使用狀態(tài)時，按鍵顯示為彩色，禁止符號消失，為提醒用戶注意，還可添加閃動、縮放等動畫效果。

界面元素之間有緊密聯(lián)系的應(yīng)有計劃地放置在同一個視覺區(qū)域內(nèi)，防止因視覺位置差異過大導(dǎo)致邏輯混亂。有些特定的界面元素之間存在一種對應(yīng)或從屬關(guān)系，例如某個圖形對應(yīng)某段文字數(shù)據(jù)，在版式設(shè)計時就應(yīng)將該圖形放置在它所對應(yīng)數(shù)據(jù)的附近，以方便用戶明確該圖形元素和數(shù)據(jù)之間的邏輯對應(yīng)關(guān)系。

（五）圖形用戶界面的版式設(shè)計要考慮到軟件的運行要求

在印刷品的設(shè)計中，為了版式設(shè)計的美觀，設(shè)計者經(jīng)常會運用一些裝飾圖案、輔助圖形、藝術(shù)字體及特殊文字編排（如出血等）來增加頁面的層次感和視覺效果［5］。但是，圖形用戶界面的運行是以硬件計算能力和網(wǎng)絡(luò)傳輸能力為基礎(chǔ)的，如果大量使用圖形圖像或其他多媒體元素，或使用過多的版式變化特效，會增加軟件占用的系統(tǒng)資源，對運行平臺和網(wǎng)絡(luò)環(huán)境提出更高的硬件要求，削弱軟件的實用性和通用性。

三、圖形用戶界面的版式設(shè)計典型案例分析

優(yōu)秀的界面編排，不但可以突出軟件自身的個性，體現(xiàn)自身審美價值，其操作也會更加簡便、舒適［6］，經(jīng)典而時尚的IOS系統(tǒng)就擁有這樣的圖形用戶界面。蘋果公司推行的這一移動操作系統(tǒng)，目前已推出到了IOS8版本，其簡潔時尚的扁平化圖形用戶界面設(shè)計受到市場的高度認同。IOS系統(tǒng)最大的應(yīng)用平臺就是人們熟悉的蘋果手機（iPhone）和平板電腦iPad。

移動設(shè)備區(qū)別于普通電腦有一個巨大的特點，就是設(shè)備需進行手持操作，其操作界面的版式布局必須考慮到屏幕的橫豎方向，由于消費者個人習(xí)慣不同，強制限定單方向的操作模式缺乏適應(yīng)性。IOS系統(tǒng)就針對橫豎兩個方向進行了針對性的版式編排設(shè)計，方便用戶使用同時保持其界面風(fēng)格一致性，這圖標(biāo)位置設(shè)計，考慮到了使用者習(xí)慣和邏輯關(guān)系，不會出現(xiàn)界面改變方向后一時找不到圖標(biāo)的情況。

雖然iPhone和iPad的屏幕分辨率、尺寸乃至長寬比都有極大差異，充分體現(xiàn)了圖形界面版式的不固定性，但是IOS系統(tǒng)的界面仍然能夠很好地通用于iPhone和iPad，在適應(yīng)屏幕特點、保證使用體驗的同時又讓人充分感覺到“這是同一個操作系統(tǒng)”（這一點非常有利于培養(yǎng)客戶的忠實度），其對圖形界面版式的精妙控制不得不讓人佩服。

化繁為簡，讓版面更加易控，IOS系統(tǒng)的界面版面設(shè)計同樣符合這一原則。無論是IOS6以前的擬物化設(shè)計還是IOS7以后的扁平化設(shè)計，視覺效果雖改變巨大，其界面版式設(shè)計簡潔明快的根本原則卻始終沒有改變。IOS系統(tǒng)的流行，除了其功能強大外，其極易上手的操作流程和時尚、簡潔的界面風(fēng)格帶來的友好交互體驗也是主要原因。為迎合消費者需求，IOS系統(tǒng)在很多人機交互的細節(jié)上進行了提高操作體驗的設(shè)計，包括提高流暢度和添加有趣的操作反饋，增加版面元素的互動性，多點觸控和手勢功能更是將復(fù)雜而強大的功能實現(xiàn)于簡單的操作中。這一切精心設(shè)計最終都統(tǒng)一于簡潔、易控、符合使用者操作習(xí)慣的界面中，力求給用戶帶來優(yōu)秀的圖形界面操作體驗。

四、結(jié)語

圖形用戶界面中的版式設(shè)計與印刷版式相比具有其獨特之處，在進行設(shè)計實踐時既要吸收傳統(tǒng)印刷版式的實踐經(jīng)驗，又要考慮圖形用戶界面與印刷作品的不同之處，以及隨之對版式設(shè)計的獨特要求。說到底，無論怎樣設(shè)計，圖形用戶界面中版式設(shè)計的最終目的，是為用戶服務(wù)，讓用戶獲得最佳的使用體驗。

［1］田龍過，閆河.智能手機App界面設(shè)計探討［J］.西部廣播電視，2014，（11）.

［2］王建民.圖形用戶界面設(shè)計的原則與發(fā)展趨勢探討［J］.藝術(shù)探索，2007，（4）.

［3］郝晶，孫亞云.面向?qū)W齡前兒童的app界面視覺設(shè)計原則［J］.設(shè)計，2015，（3）.

［4］趙玉航，李世國.圖形用戶界面設(shè)計中的功能可見性［J］.包裝工程，2010，（20）.

［5］彭輝.網(wǎng)頁藝術(shù)設(shè)計中的版式設(shè)計原則［J］.光盤技術(shù)，2007，（2）.

［6］陳巖.數(shù)字媒體中的扁平化版式［J］.設(shè)計藝術(shù)研究，2015，（1）.