淺談UI設計

(湖南工業大學 湖南 株洲 412007)

淺談UI設計

陳丹彤

(湖南工業大學湖南株洲412007)

在做軟件界面設計的時候，經常會遇到一些困擾。UI設計師的職能大體包括三方面：一是圖形設計，即傳統意義上的“美工”。當然，實際上他們承擔的不是單純意義上美術工人的工作，而是軟件產品的產品“外形”設計。二是交互設計，主要在于設計軟件的操作流程、樹狀結構、操作規范等。

該怎么做，怎么做能過提高用戶對該軟件的興趣，提升用戶體驗，是界面設計師應該考慮的問題和做界面的出發點。界面美觀、舒適，但更重要的是使用方式，給人感覺友好、熟悉，又不缺乏個性，即所謂的人性化設計。

UI設計；交互方式；色彩搭配；一致性；語言；軟件應用

前言

UI設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由、充分體現軟件的定位和特點

一、UI設計介紹

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

1、關于UI設計

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

二、UI運用的軟件及應用

1、關于PS的介紹

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

2、關于PS的應用

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

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

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

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

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

“文字”可以進行文字的變形，柵格化文字，其中“柵格化”意思是使導入的照片、文字轉化成圖形，就可以在圖形的基礎上任意修改變形。

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

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

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

(2)工具介紹

“移動工具”移動畫布所在圖層上的圖案

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

“套索工具”功能同樣是用來選區，不同于“選框工具”這個所畫的選區邊緣是不規則的，對于復雜的圖案但邊緣是整齊的就可以根據習慣用“多邊形套索”和“磁鐵套索”這兩種。

“魔棒工具”是這幾種套索工具使用起來最快的選區工具，根據畫布上的圖案形狀進行選區，缺點是選區會擴散到其他地方，導致選區不準確。

“裁剪工具”裁剪畫布大小，不用擔心新建時畫布建小或建大的煩惱，可根據構圖隨時調整。

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

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

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

“仿制圖章工具”主要用來復制取樣的圖像，仿制圖章工具使用方便，它能夠按涂抹的范圍復制全部或者部分到一個新的圖像中。使用時，把鼠標放到要被復制的圖像的窗口上，按住Alt鍵，單擊一下鼠標進行定點選樣，這樣復制的圖像被保存到 剪貼板中。把鼠標移到要復制圖像的窗口中，選擇一個點，然后按住鼠標拖動即可逐漸地出現復制的圖像。

“橡皮工具”在畫布當前圖層擦掉不想保留及畫錯的部分。

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

“模糊工具”畫筆所經過的區域都會變虛變模糊，從而拉開近實遠虛的效果。其中“涂抹工具”是用來將兩種顏色進行混合讓其過渡更加自然。

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

“文字工具”橫排文字工具可添加橫向排版的文字格式，直排是縱向的排版格式。可以在想添加文字的地方任意添加，都可以進行變形。

三、如何做出更好的UI設計

1、交互方式模擬現實

模擬顯示的交互方式會給人帶來熟悉親切的感覺，用戶直觀一看便能夠理解。例如，某個按鈕按下去的時候，呈現顏色會比原來深，這個就是模擬現實中的光影效果，不同的厚度，對于同一個物體，呈現顏色會有所差別。很多手機系統里的“設置”打開這個功能按鈕后面就會帶有顏色，關閉則無色，就很像日常生活中的各種開關，開與關有著顏色或圖形符號的區別，所以用戶不必思考怎么啟用或關閉這個功能，因為很熟悉。用戶第一次接觸，不需要學習，毫無約束地使用的應用，就是好的應用。

2、界面設計要簡約

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

3、設計中的一致性原則

(1)設計目標一致

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

堅持以用戶體驗為中心設計原則，界面直觀、簡潔，操作方便快捷，用戶接觸軟件后對界面上對應的功能一目了然、不需要太多培訓就可以方便使用本應用系統。

(2)元素外觀一致

交互元素的外觀往往影響用戶的交互效果。同一個(類)軟件采用一致風格的外觀，對于保持用戶焦點，改進交互效果有很大幫助。遺憾的是如何確認元素外觀一致沒有特別統一的衡量方法。因此需要對目標用戶進行調查取得反饋。

(3)交互行為一致

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

四、色彩搭配

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

不要超過三種顏色是所有色彩原則的基礎。顏色用的多了會顯得雜亂無章，視覺混亂沒有重點。

1、黑白灰的技巧

(1)黑白灰優先使用

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

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

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

2、顏色的運用

(1)同一色系

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

(2)互補色搭配

只要比例得當，互補色的搭配一樣可以收獲很好的視覺效果。

(3)鄰近色搭配

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

五、語言的使用

1、語言使用的原則

(1)語言使用的一致性

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

(2)語言使用的準確性

使用語言一定要準確，不要產生歧義，不要讓用戶思考。

(3)語言使用的通俗性

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

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

盡量不要使用“警告”等不友好的語言，可以使用“溫馨提示”“請不要”以及比較時尚的網絡用語。總之語言要讓人感到親切、友好、輕松的感受。

六、UI修改前后的比較

1、以游戲UI為例

(1)如何表現出游戲的高品質氛圍

修改前：

圖1 手游UI

字體和邊框沒有高品質感，字體為重要信息采用白色和背景地圖顏色相同沒有凸出感并且沒有設計感。整體返回鍵和各項互動鍵字體和邊框設計風格不統一。

修改后：

圖2 手游UI

整體風格統一協調，配色以紅、金搭配，提高畫面高品質感。信息欄重要信息有所區別，感官上跟加清晰。

(2) 如何使LOGO漂亮有型

修改前：

圖3 手游UI

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

修改后：

圖4 手游UI

設計LOGO時，將委托方所要求的概念，凝聚在簡單的形狀中是非常重要的一點。

(3)如何表現華麗感

修改前：

圖5 手游UI

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

修改后：

圖6 手游UI

整體以紅黃為主，使畫面整體為暖色調，金色邊框和字體的設計使整個界面更為華麗。

結 論

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

[1]甲谷一.日本版式設計原理[M].上海人民美術出版社，2014

[2]何曉佑.人性化設計[M].江蘇美術出版社，2001.

[3]張瑞瑞.裝飾圖案創意與設計[M].武漢：武漢理工大學出版社，2005.

[4]徐航.裝飾圖形創意設計[M].北京：化學工業出版社，2012.