孫 湛

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

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

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

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

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

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

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

（二）版式元素具有互動(dòng)性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、結(jié)語

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

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

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

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

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

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

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