(湖南工業(yè)大學(xué) 湖南 株洲 412007)

淺談UI設(shè)計(jì)

陳丹彤

(湖南工業(yè)大學(xué)湖南株洲412007)

在做軟件界面設(shè)計(jì)的時(shí)候，經(jīng)常會(huì)遇到一些困擾。UI設(shè)計(jì)師的職能大體包括三方面：一是圖形設(shè)計(jì)，即傳統(tǒng)意義上的“美工”。當(dāng)然，實(shí)際上他們承擔(dān)的不是單純意義上美術(shù)工人的工作，而是軟件產(chǎn)品的產(chǎn)品“外形”設(shè)計(jì)。二是交互設(shè)計(jì)，主要在于設(shè)計(jì)軟件的操作流程、樹狀結(jié)構(gòu)、操作規(guī)范等。

該怎么做，怎么做能過提高用戶對(duì)該軟件的興趣，提升用戶體驗(yàn)，是界面設(shè)計(jì)師應(yīng)該考慮的問題和做界面的出發(fā)點(diǎn)。界面美觀、舒適，但更重要的是使用方式，給人感覺友好、熟悉，又不缺乏個(gè)性，即所謂的人性化設(shè)計(jì)。

UI設(shè)計(jì)；交互方式；色彩搭配；一致性；語言；軟件應(yīng)用

前言

UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由、充分體現(xiàn)軟件的定位和特點(diǎn)

一、UI設(shè)計(jì)介紹

UI即User Interface(用戶界面)的簡(jiǎn)稱。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

1、關(guān)于UI設(shè)計(jì)

用戶界面作為人與機(jī)器交互的媒介，起著非常重要的作用，沒有界面那人就無法操作機(jī)器。所以界面設(shè)計(jì)的好壞直接影響到所操作軟件的難易程度。好的UI設(shè)計(jì)師可以使軟件使用變得輕松，不僅僅是軟件，比如日常生活中使用的手機(jī)，當(dāng)你打開它所需要的信息都一目了然；平時(shí)上網(wǎng)瀏覽的網(wǎng)頁；通訊軟件和娛樂游戲的每個(gè)界面都是UI設(shè)計(jì)。當(dāng)用戶使用某款軟件操作不順暢的時(shí)候那就是UI設(shè)計(jì)師的工作沒有做好。

二、UI運(yùn)用的軟件及應(yīng)用

1、關(guān)于PS的介紹

Adobe Photoshop，簡(jiǎn)稱“PS”，是美國Adobe公司旗下最為出名的圖像處理軟件系列之一，為圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意，圖像輸入與輸出于一體的圖形圖像處理軟件，深受廣大平面設(shè)計(jì)人員和電腦美術(shù)愛好者的喜愛。 Photoshop CS6是Adobe PhotoshopCS系列最后一個(gè)版本。歷史上首次將云計(jì)算、云存儲(chǔ)的概念引入到以Photoshop為代表的圖像處理領(lǐng)域。

2、關(guān)于PS的應(yīng)用

(1)軟件上方功能欄介紹

“文件”主要用于新建畫布，存儲(chǔ)。

“編輯”功能性偏多，用于圖形的編輯，圖層及其中素材的拷貝與編輯，還可以撤銷當(dāng)前錯(cuò)誤的制作步驟。

“圖像”可以更改畫布和圖像大小，更改圖像模式。

“圖層”是PS軟件中最重要的一個(gè)功能，所有的設(shè)計(jì)操作都要在圖層上面進(jìn)行，每新建一個(gè)圖層就像傳統(tǒng)美術(shù)中的繪畫過程，把每個(gè)過程通過圖層的方式記錄下來，你可以逐步的看清一張UI或者原畫是怎么由一張白畫布變成作品的。每個(gè)圖層都可以調(diào)節(jié)屬性如：“正品疊底”“疊加”“柔光”“線性減淡”等效果，這些都可以幫你添加畫面效果。

“文字”可以進(jìn)行文字的變形，柵格化文字，其中“柵格化”意思是使導(dǎo)入的照片、文字轉(zhuǎn)化成圖形，就可以在圖形的基礎(chǔ)上任意修改變形。

“選擇”基本上是對(duì)于圖層的選擇，其中“色彩范圍”是用于結(jié)合套索工具使用，先用套索工具選擇區(qū)域，使用“色彩范圍”選區(qū)就會(huì)變成所選顏色的范圍。

“濾鏡”用于加強(qiáng)畫面效果，我們手機(jī)中的美顏相機(jī)為什么拍出來的人會(huì)很好看呢？還有不同的光效，這就是濾鏡的作用。PS中的濾鏡也是起到這個(gè)作用。

“窗口”是PS各功能的窗口，依照自己的習(xí)慣來挑選功能，選出來的功能框可以隨意擺放。

(2)工具介紹

“移動(dòng)工具”移動(dòng)畫布所在圖層上的圖案

“選框工具”分為矩形、橢圓、單行、單列這些形狀的選區(qū)工具，用來選擇區(qū)域，不會(huì)操作到區(qū)域外的地方。

“套索工具”功能同樣是用來選區(qū)，不同于“選框工具”這個(gè)所畫的選區(qū)邊緣是不規(guī)則的，對(duì)于復(fù)雜的圖案但邊緣是整齊的就可以根據(jù)習(xí)慣用“多邊形套索”和“磁鐵套索”這兩種。

“魔棒工具”是這幾種套索工具使用起來最快的選區(qū)工具，根據(jù)畫布上的圖案形狀進(jìn)行選區(qū)，缺點(diǎn)是選區(qū)會(huì)擴(kuò)散到其他地方，導(dǎo)致選區(qū)不準(zhǔn)確。

“裁剪工具”裁剪畫布大小，不用擔(dān)心新建時(shí)畫布建小或建大的煩惱，可根據(jù)構(gòu)圖隨時(shí)調(diào)整。

“吸管工具”主要用于吸取畫布上的顏色，筆刷就會(huì)變成吸取的顏色。

“污點(diǎn)修復(fù)工具”利用污點(diǎn)修復(fù)畫筆工具可以快速移去照片中的污點(diǎn)和其他不理想部分。在使用污點(diǎn)修復(fù)畫筆工具時(shí)，不需要定義原點(diǎn),只需要確定需要修復(fù)的圖像位置，調(diào)整好畫筆大小，移動(dòng)鼠標(biāo)就會(huì)在確定需要修復(fù)的位置自動(dòng)匹配，所以在實(shí)際應(yīng)用時(shí)比較實(shí)用，而且在操作時(shí)也簡(jiǎn)單。我們平常在聯(lián)想污點(diǎn)時(shí)容易想起衣物或者建筑物之類的污跡，那么除了這些，實(shí)際這個(gè)工具能操作的空間是很大的，比如簡(jiǎn)單的去痣工作只需輕輕一點(diǎn)就能實(shí)現(xiàn)了！

“畫筆工具”畫筆的文件格式是ABR ，看到任何圖像都可以定義為畫筆。畫筆中“載入”可以載入自定義筆刷。使用的時(shí)候運(yùn)用吸管工具取色，再用畫筆就可以在畫布上進(jìn)行創(chuàng)作。

“仿制圖章工具”主要用來復(fù)制取樣的圖像，仿制圖章工具使用方便，它能夠按涂抹的范圍復(fù)制全部或者部分到一個(gè)新的圖像中。使用時(shí)，把鼠標(biāo)放到要被復(fù)制的圖像的窗口上，按住Alt鍵，單擊一下鼠標(biāo)進(jìn)行定點(diǎn)選樣，這樣復(fù)制的圖像被保存到 剪貼板中。把鼠標(biāo)移到要復(fù)制圖像的窗口中，選擇一個(gè)點(diǎn)，然后按住鼠標(biāo)拖動(dòng)即可逐漸地出現(xiàn)復(fù)制的圖像。

“橡皮工具”在畫布當(dāng)前圖層擦掉不想保留及畫錯(cuò)的部分。

“漸變工具”可在窗口上方調(diào)整樣式，在畫布任取一點(diǎn)向任意方向一拉就可以有所取顏色的漸變效果，往往用于背景處理和整個(gè)畫面的光影處理。其中還有“油漆桶工具”這個(gè)工具就是用來填充所選區(qū)域內(nèi)的顏色一次性都填滿。

“模糊工具”畫筆所經(jīng)過的區(qū)域都會(huì)變虛變模糊，從而拉開近實(shí)遠(yuǎn)虛的效果。其中“涂抹工具”是用來將兩種顏色進(jìn)行混合讓其過渡更加自然。

“鋼筆工具”是做任何設(shè)計(jì)中都最為常用的工具，他可以快速勾勒出任何你想要的形狀剪影，修型，摳圖都需要這個(gè)工具。使用方法可以點(diǎn)擊畫布可創(chuàng)建筆直的路徑線段，點(diǎn)擊并拖曳可創(chuàng)建貝茲曲線路徑。自由鋼筆工具是點(diǎn)擊畫布拖曳可如使用畫筆般自由繪制路徑。添加錨點(diǎn)工具是點(diǎn)擊路徑線段可添加錨點(diǎn)。刪除點(diǎn)則點(diǎn)擊路徑上的點(diǎn)就可以刪除了。

“文字工具”橫排文字工具可添加橫向排版的文字格式，直排是縱向的排版格式?？梢栽谙胩砑游淖值牡胤饺我馓砑樱伎梢赃M(jìn)行變形。

三、如何做出更好的UI設(shè)計(jì)

1、交互方式模擬現(xiàn)實(shí)

模擬顯示的交互方式會(huì)給人帶來熟悉親切的感覺，用戶直觀一看便能夠理解。例如，某個(gè)按鈕按下去的時(shí)候，呈現(xiàn)顏色會(huì)比原來深，這個(gè)就是模擬現(xiàn)實(shí)中的光影效果，不同的厚度，對(duì)于同一個(gè)物體，呈現(xiàn)顏色會(huì)有所差別。很多手機(jī)系統(tǒng)里的“設(shè)置”打開這個(gè)功能按鈕后面就會(huì)帶有顏色，關(guān)閉則無色，就很像日常生活中的各種開關(guān)，開與關(guān)有著顏色或圖形符號(hào)的區(qū)別，所以用戶不必思考怎么啟用或關(guān)閉這個(gè)功能，因?yàn)楹苁煜ぁＳ脩舻谝淮谓佑|，不需要學(xué)習(xí)，毫無約束地使用的應(yīng)用，就是好的應(yīng)用。

2、界面設(shè)計(jì)要簡(jiǎn)約

界面設(shè)計(jì)跟平面設(shè)計(jì)有很大不同，平面設(shè)計(jì)可以隨自己的喜好或者是需要加入一些裝飾，特別是海報(bào)招貼設(shè)計(jì)，需要有一些吸引人眼球的內(nèi)容和色彩，畫面需要有沖擊力。但是界面對(duì)于用戶來說是工具，所以好用是最重要的，是要可以給用戶直觀的表明這是什么，什么用處，為了不干擾重點(diǎn)表達(dá)的內(nèi)容，不要添加不必要的裝飾。

3、設(shè)計(jì)中的一致性原則

(1)設(shè)計(jì)目標(biāo)一致

軟件中往往存在多個(gè)組成部分(組件、元素)。不同組成部分之間的交互設(shè)計(jì)目標(biāo)需要一致。 例如：如果以電腦操作初級(jí)用戶作為目標(biāo)用戶，以簡(jiǎn)化界面邏輯為設(shè)計(jì)目標(biāo)，那么該目標(biāo)需要貫徹軟件(軟件包)整體，而不是局部。

堅(jiān)持以用戶體驗(yàn)為中心設(shè)計(jì)原則，界面直觀、簡(jiǎn)潔，操作方便快捷，用戶接觸軟件后對(duì)界面上對(duì)應(yīng)的功能一目了然、不需要太多培訓(xùn)就可以方便使用本應(yīng)用系統(tǒng)。

(2)元素外觀一致

交互元素的外觀往往影響用戶的交互效果。同一個(gè)(類)軟件采用一致風(fēng)格的外觀，對(duì)于保持用戶焦點(diǎn)，改進(jìn)交互效果有很大幫助。遺憾的是如何確認(rèn)元素外觀一致沒有特別統(tǒng)一的衡量方法。因此需要對(duì)目標(biāo)用戶進(jìn)行調(diào)查取得反饋。

(3)交互行為一致

在交互模型中，不同類型的元素用戶觸發(fā)其對(duì)應(yīng)的行為事件后，其交互行為需要一致。 例如：所有需要用戶確認(rèn)操作的對(duì)話框都至少包含確認(rèn)和放棄兩個(gè)按鈕。 對(duì)于交互行為一致性原則比較極端的理念是相同類型的交互元素所引起的行為事件相同。但是我們可以看到這個(gè)理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個(gè)理念設(shè)計(jì)，會(huì)更加簡(jiǎn)化用戶操作流程。

四、色彩搭配

色彩，是一種很好理解的情感。周圍的環(huán)境都是屬于色彩給我們帶來的理解。例如，每逢佳節(jié)到處都是紅色，即便沒人直接告訴你，也會(huì)潛移默化的記?。杭t色是代表著喜慶、歡樂、幸福、吉祥。夏日里，烈日炎炎的暑天，藍(lán)色、白色就會(huì)給人帶來清涼的感覺。在信息化的社會(huì)中藍(lán)色也代表著信息化，科技的發(fā)展。顏色擁有如此多復(fù)雜的意義，那怎么搭配起到更好的感情色彩就尤為重要了。

不要超過三種顏色是所有色彩原則的基礎(chǔ)。顏色用的多了會(huì)顯得雜亂無章，視覺混亂沒有重點(diǎn)。

1、黑白灰的技巧

(1)黑白灰優(yōu)先使用

當(dāng)你沒有很好的配色，那可以先從這三種顏色入手，黑白灰首先很容易構(gòu)成層次感。其次，這類顏色很高級(jí)，所謂的“百搭”顏色，搭配其他任何顏色都有不同的效果。

(2)黑白灰基礎(chǔ)上在添加顏色

如果你覺得這三種顏色單調(diào)，可以在此基礎(chǔ)上再加一種顏色，分配好每種顏色所占的比例，可以給整體帶來一些活躍。

2、顏色的運(yùn)用

(1)同一色系

使用色彩的搭配，一個(gè)頁面可以考慮用同一色系的顏色進(jìn)行搭配，整體的色彩會(huì)很和諧感官上讓人舒適。

(2)互補(bǔ)色搭配

只要比例得當(dāng)，互補(bǔ)色的搭配一樣可以收獲很好的視覺效果。

(3)鄰近色搭配

一種顏色純度較高時(shí)，搭配另一種純度低的顏色，可以讓色彩平衡，看起來更順眼。

五、語言的使用

1、語言使用的原則

(1)語言使用的一致性

同一事物的說明要使用同一個(gè)詞語，例如，如果你使用了“查找”，就不要在同樣的情況下使用“搜索”

(2)語言使用的準(zhǔn)確性

使用語言一定要準(zhǔn)確，不要產(chǎn)生歧義，不要讓用戶思考。

(3)語言使用的通俗性

不要使用專業(yè)術(shù)語，軟件是給大眾使用的，不是給專業(yè)技術(shù)人員使用的，方便省事是最重要的。

(4)語言使用的情感關(guān)懷性

盡量不要使用“警告”等不友好的語言，可以使用“溫馨提示”“請(qǐng)不要”以及比較時(shí)尚的網(wǎng)絡(luò)用語?？傊Z言要讓人感到親切、友好、輕松的感受。

六、UI修改前后的比較

1、以游戲UI為例

(1)如何表現(xiàn)出游戲的高品質(zhì)氛圍

修改前：

圖1 手游UI

字體和邊框沒有高品質(zhì)感，字體為重要信息采用白色和背景地圖顏色相同沒有凸出感并且沒有設(shè)計(jì)感。整體返回鍵和各項(xiàng)互動(dòng)鍵字體和邊框設(shè)計(jì)風(fēng)格不統(tǒng)一。

修改后：

圖2 手游UI

整體風(fēng)格統(tǒng)一協(xié)調(diào)，配色以紅、金搭配，提高畫面高品質(zhì)感。信息欄重要信息有所區(qū)別，感官上跟加清晰。

(2) 如何使LOGO漂亮有型

修改前：

圖3 手游UI

裝飾不要過剩，使用后面裝飾紋樣，各種角色的排版使得畫面花哨，沒有重點(diǎn)，全部加裝飾等于沒有加裝飾。

修改后：

圖4 手游UI

設(shè)計(jì)LOGO時(shí)，將委托方所要求的概念，凝聚在簡(jiǎn)單的形狀中是非常重要的一點(diǎn)。

(3)如何表現(xiàn)華麗感

修改前：

圖5 手游UI

整體設(shè)計(jì)不夠豐富，有些單調(diào)，不夠讓人眼前一亮。綠色為底的配色顯得畫面比較悶，并不是很理想。

修改后：

圖6 手游UI

整體以紅黃為主，使畫面整體為暖色調(diào)，金色邊框和字體的設(shè)計(jì)使整個(gè)界面更為華麗。

結(jié) 論

在軟件的漫長發(fā)展中，設(shè)計(jì)師對(duì)于界面設(shè)計(jì)沒有得到很好的關(guān)注，其實(shí)產(chǎn)品的重點(diǎn)賣點(diǎn)是軟件界面設(shè)計(jì)。一個(gè)操作簡(jiǎn)潔美觀的界面會(huì)給人帶來舒適的視覺享受，拉近人與電腦的距離，同時(shí)用戶能夠最直觀地感受到視覺設(shè)計(jì)的魅力。相信以上的建議可以在制作UI的時(shí)候有所幫助。

[1]甲谷一.日本版式設(shè)計(jì)原理[M].上海人民美術(shù)出版社，2014

[2]何曉佑.人性化設(shè)計(jì)[M].江蘇美術(shù)出版社，2001.

[3]張瑞瑞.裝飾圖案創(chuàng)意與設(shè)計(jì)[M].武漢：武漢理工大學(xué)出版社，2005.

[4]徐航.裝飾圖形創(chuàng)意設(shè)計(jì)[M].北京：化學(xué)工業(yè)出版社，2012.