1.1 了解UI設計

用戶界面在我們的生活中隨處可見，什么是用戶界面？什么又是用戶界面設計？用戶界面主要包括哪些類型？用戶界面的設計又有哪些具體的規則和要求？本節就向用戶介紹一些用戶界面設計相關的基礎理論知識。

1.1.1 什么是UI設計

UI設計即為用戶界面設計，全稱User Interface。UI設計是為了滿足專業化、標準化需求而對軟件界面進行美化、優化和規范化的設計分支。具體包括軟件啟動界面設計、軟件框架設計、按鈕設計、面板設計、菜單設計、圖標設計、滾動條和狀態欄設計等，如圖1-1所示。

1.1.2 常見的UI設計分類

隨著信息技術的高速發展，人們對信息的需求量不斷增加，圖形界面的設計也越來越多樣化。UI設計主要可以分為手機界面設計、網站設計、軟件用戶界面設計和游戲界面設計等，不同類型的界面設計風格和特點各不相同。

手機界面設計

現如今，手機儼然已經成為普通大眾的生活必需品，而手機的功能也越來越完善，很多高端手機的性能甚至與電腦不分高下。手機界面設計最大的要求就是人性化，它不僅要便于用戶操作，還要美觀大方。如圖1-2所示為一些成功的手機界面設計作品。

網站設計

近年來，隨著電子商務的高速發展，國內網站設計行業也正在快速崛起。從最初的純文本網頁到版式古板、配色拙劣的網頁，再到現如今的配色新奇、版式多元化的網頁，網站設計得到了長足發展。網站界面設計必須具有獨立性和創意性，能夠最大限度地方便用戶檢索信息，從而提升用戶的操作體驗。如圖1-3所示為一些成功的網站設計作品。

軟件用戶界面

用戶主要通過軟件與各種機器設備進行交流，更確切地說，是通過軟件界面達到這一目的。為了方便用戶使用，軟件界面的設計應該簡潔美觀、易于操作。如圖1-4所示為一些成功的軟件用戶界面設計作品。

播放器界面

如今，市場上的各種音樂播放器軟件層出不窮，體驗者們不再局限于追求軟件的強大功能，更對軟件界面風格提出了新的要求。如圖1-5所示為兩款成功的播放器界面設計作品，這兩款界面無論在款式還是在質感上都極為出色。

游戲界面

相較于其他軟件界面來說，游戲界面通常都更加華麗、主題鮮明，三維效果應用非常普遍，具有較強的視覺震撼力。如圖1-6所示為兩款成功的游戲界面設計作品。

1.1.3 導航欄和按鈕的設計要點

導航欄和按鈕都是網頁中的重要元素。瀏覽網頁時，我們主要通過導航欄和按鈕跳轉到不同的頁面，檢索需要的信息。制作網頁時，導航欄和各種按鈕應該給予最高級別的重視，下面分別是二者的設計要點。

導航欄

導航欄一般位于網頁的上方，在與瀏覽者視線持平的位置，所以導航欄設計得是否到位也會在很大程度上決定整個網頁的成敗，導航欄的設計主要有以下幾個要點。

? 導航欄目不多的情況下，通常設計成一排，橫豎都可以。當欄目超過6個以上時，可以考慮設計成兩排。

? 導航欄目在很多的情況下也可以設計成多排，甚至是不規則的多排（一排個數不同，或長度不同）。商業設計或門戶網站通常都會有多個頻道，在設計時就需要考慮橫向雙排，因為使用豎排會占用太大的空間。

? 在網頁內容不多的情況下，可能無所謂欄目，站點本身就包括了導航的具體內容。

? 多排導航未必一定要在一起，可以自由發揮想象，設計出更加靈活新穎的版式。

? 圖片式導航比較美觀，也更容易吸引瀏覽者，但占用空間比較大。

? 目前網站中使用較多的是Flash制作的導航欄，其體積小，且具有視覺沖擊力。

? 包含信息較多的網站可以考慮使用快捷導航，即框架快捷導航，這樣無論瀏覽者進入哪個頁面都可以快速跳轉到另外的欄目，這樣更利于操作。如圖1-7所示為一款漂亮的圖片式導航欄。

按鈕

按鈕被頻繁地應用于網頁和各種軟件界面中，主要用來指示和引導用戶完成相應的操作。按鈕的體積雖然小，但卻是瀏覽者使用較為頻繁的元素，所以也應該得到充分的重視。一款漂亮的按鈕可以增加整個UI界面的趣味性，從而提升用戶體驗。網頁中按鈕的設計主要有以下幾個要點。

? 按鈕要與頁面的整體效果相協調，不能喧賓奪主。

? 如果頁面中的內容單一，比如包含大片的文字，那么應該使用漂亮醒目的按鈕來點綴。

? 圖片與字體的搭配，要考慮文字是否易讀，色彩搭配是否協調統一等問題，整個頁面的顏色最好不要超過4種。

? 很長的按鈕可能是框架的分解，因此要盡量設計得纖細一些，否則版面會有奇怪的失重感。如圖1-8所示為一套設計精美的網頁按鈕。

1.1.4 UI設計的重要性

軟件界面設計是產品設計的重要組成部分，是用戶對界面的體驗和信息交互意愿。一個美觀友好的界面能夠給用戶帶來舒適的操作體驗，從而為商家創造賣點。用戶界面是人機之間溝通交流的平臺，所以用戶界面設計應該和用戶研究緊密聯系，它是一個不斷為最終用戶設計滿意視覺效果的過程。

界面設計的原則

? 簡易性：用戶界面設計應該簡潔、易于操作使用、易于了解，并能減小用戶發生錯誤操作的可能性。

? 可控性：可控性是用戶界面設計的重要條件，即用戶想要進行什么操作，就一定讓它做到，并且要有相應的操作提示。

? 一致性：一致性是指界面的設計風格必須和頁面內容協調一致，顏色的搭配要符合人們的視覺習慣，同一界面的不同板塊和同一板塊的不同位置都要保持一致性，如圖1-9所示。

? 安全性：用戶可以自由地做出選擇，且所有選擇都是可逆的。在用戶做出危險的選擇時有信息介入提示。

? 人性化：要盡可能考慮到特殊用戶的操作體驗，如殘疾人、色盲色弱等，以提高用戶操作效果和操作滿意度。

? 靈活性：簡單來說就是要讓用戶方便地使用。界面設計是瀏覽者接觸網頁的第一印象，所以它的設計風格要與整體頁面相一致，顏色的搭配要符合人們的視覺習慣，并與頁面的整體色調相協調。其中字體的選用不要過于花哨，平常的字體即可。

1.1.5 了解交互的概念

交互是指人與機之間的交互工程。人機交互是一門研究系統與用戶之間交互關系的學問，這里的系統可以是計算機化的系統或軟件。

圖形界面通常是指用戶可見的部分，是人與軟件之間傳遞和交換信息的媒介。交互與圖形界面之間有著緊密的聯系，但二者又是兩個完全不同的概念。