2.1 關于UI設計

UI（用戶界面）是廣義的概念，包含軟硬件設計，包括了UE（用戶體驗）設計、GUI（用戶圖形界面）設計及ID（交互設計）。UE（用戶體驗）關注的是用戶的行為習慣和心理感受，就是琢磨用戶會怎么使用軟件或硬件才覺得稱心如意。GUI（用戶圖形界面）設計就是界面設計，負責應用的視覺界面，目前國內大部分的UI設計師其實做的就是GUI（用戶圖形界面）設計。ID（交互設計）簡單來講是指用戶和應用之間的互動過程，一般由交互工程師來做。

2.1.1 什么是UI設計

UI設計是指對應用的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅讓應用變得有個性，有別于其他產品，還要讓用戶便捷、高效、舒適、愉悅地使用。

在人機交互過程中，有一個層面被稱為界面。從心理學的角度來講，我們可以把它分為兩個層次：感覺（視覺、觸覺、聽覺）和情感。人們在使用某產品時，第一時間直觀感受到的是屏幕上的界面，它傳遞給人們在使用產品前的第一印象。一個友好的、美觀的界面能給人帶來愉悅的感受，增加用戶的產品黏度，為產品增加附加值。通常，很多人會覺得界面設計僅僅是視覺層面的東西，這是錯誤的理解。設計師需要定位用戶群體、使用環境、使用方法，最后根據這些數據進行科學的設計。

2.1.2 什么是GUI設計

GUI（Graphical User Interface，用戶圖形界面）是指使用圖形方式顯示的計算機操作用戶界面。GUI設計的廣泛應用是當今計算機發展的重大成就之一，它極大地方便了非專業用戶的使用。人們從此不需要死記硬背大量的命令，取而代之的是通過窗口、菜單、按鍵等方式來更加方便地進行操作。

圖形用戶界面是一種人與計算機通信的界面顯示格式，允許用戶使用鼠標等輸入設備操縱屏幕上的圖標或菜單選項，以選擇命令、調用文件、啟動程序或執行其他一些日常任務。與通過鍵盤輸入文本或字符命令來完成例行任務的字符界面相比，圖形用戶界面有許多優點。圖形用戶界面由窗口、下拉菜單、對話框及其相應的控制機制構成，在各種新式應用程序中都是標準化的，即相同的操作總是以同樣的方式來完成。在圖形用戶界面中，用戶看到和操作的都是圖形對象，應用的是計算機圖形學的技術。

UI設計包括了可用性分析、GUI設計及用戶測試等。GUI設計是UI設計的一種表達方式，是以可見的圖形方式展現給用戶的。

2.1.3 關于UE/UX

近幾年來，計算機技術發展日新月異。用戶體驗設計越來越被眾多設計開發企業所重視。

用戶體驗（User Experience，簡稱UE）是一種純主觀的、在用戶使用一個產品（服務）的過程中建立起來的心理感受。因為它是純主觀的，就帶有不確定因素。當每個個體在使用同一個產品時都有自身的感受，這個差異化也決定了這種體驗無法一一再現。但是設計師可以根據某個特定的使用群體做一個概括性的總結分析。

用戶體驗主要是來自用戶和人機界面的交互過程，它是伴隨著計算機的發展而產生的。在早期的產品開發中，用戶體驗通常不被企業重視，他們覺得用戶體驗只是產品制造中很小的一個環節，作為用戶體驗的表現層（GUI）也只是被看作產品的外包裝，往往等到產品核心功能設計進入尾聲時才讓UI設計師介入。這樣使得用戶體驗設計被框死在現有的功能之中，產品得不到應有的改善。如果發現了很大的體驗問題，那么產品核心功能將面臨再次被修改或強制性地推向市場，這樣無疑讓企業承受了很大的風險。

當前很多企業越來越注重以用戶為中心的產品觀念。用戶體驗的概念從開發的最早期就進入，并貫穿始終，其目的主要有以下幾點。

● 對用戶體驗有正確的預估。

● 認識用戶的真實期望和目的。

● 在核心功能還能夠以低廉成本加以修改時對設計進行修正。

● 保證核心功能與人機界面之間的協調工作，減少錯誤。

2.1.4 移動UI設計的崛起

隨著智能手機和平板電腦等移動設備的普及，移動設備成為與用戶交互最直接的體現。移動設備已經成為人們日常生活中不可缺少的一部分，各種類型的移動端應用層出不窮。移動端用戶不僅期望移動設備的軟件、硬件擁有強大的功能，而且更注重了操作用戶界面的直觀性、便捷性，能夠享受輕松愉快的操作體驗。

移動端和PC端的UI設計都非常重要，兩者之間存在著許多共同之處，因為我們的受眾沒有變，基本的設計方法和理念都是一樣的。移動端與PC端UI設計的區別主要取決于硬件設備提供的人機交互方式不同，現階段的技術制約也會影響到移動端和PC端的UI設計。下面從幾個方面向讀者介紹移動端UI設計與PC端UI設計的區別。

1.界面尺寸不同

移動端與PC端的輸出區域尺寸不同。目前主流顯示器的屏幕尺寸通常為19～24英寸，而主流手機的屏幕尺寸為5～5.5英寸，平板電腦的屏幕尺寸為7～10英寸。

由于兩者之間的輸出區域尺寸不同，在移動端界面設計與PC端界面設計中不能在同一屏幕中放入同樣多的內容。

在通常情況下，一個應用的信息量是固定的，在PC端的界面設計中，需要把盡量多的內容放到首頁中，避免出現過多的層級；而在移動端界面設計中，由于屏幕的限制，不能將內容都放到第一屏的界面中，因此需要更多的層級，以及一個非常清晰的操作流程，讓用戶可以知道自己在整個應用的什么位置，并能夠很容易地到達自己想要去的頁面或步驟。

2.側重點不同

在過去，PC端界面設計的側重點是“看”，即通過完美的視覺效果表現出網站中的內容和產品，給瀏覽者留下深刻的印象。而移動端界面設計的側重點是“用”，即在界面視覺效果的基礎上充分體現移動應用的易用性，使用戶更便捷、更方便地使用。但是，隨著技術水平的不斷發展，PC端界面設計也越來越多地體現出“用”的功能，使得PC端界面設計與移動端界面設計在這方面的界限越來越不明顯了。

3.精確度不同

PC端的操作媒介是鼠標，鼠標的精確度是相當高的，哪怕是再小的按鈕，對于鼠標來說也可以接受，單擊的錯誤率很低。

而移動端的操作媒介是手指，手指的準確度沒有鼠標那么高，因此，移動端界面中的按鈕需要一個較大的范圍，以減少操作錯誤率。

4.操作習慣不同

鼠標可以實現單擊、雙擊、右擊等操作，在PC端界面中也可以設計快捷菜單、雙擊等操作。而在移動端中，通常可以通過單擊、長按、滑動等操作進行控制，因此可以設計長按呼出菜單、滑動翻頁或切換、雙指的放大縮小及雙指的旋轉等操作。

5.按鈕狀態不同

PC端界面中的按鈕通常有4種狀態，默認狀態、鼠標經過狀態、鼠標單擊狀態和不可用狀態。而在移動端界面中的按鈕通常只有3種狀態，默認狀態、點擊狀態和不可用狀態。因此，在移動端界面設計中，按鈕需要更加明確，可以讓用戶一眼就知道什么地方有按鈕，當用戶點擊后，就會觸發相應的操作。