第1章UI設計              1 

1.1用戶界面                   2 

1.2圖形 UI                    2 

1.2.1Windows操作繫統圖形 UI的發展過程               2 
1.2.2手機設備與圖形 UI的發展     8 

1.3UI設計                    11 

1.4以用戶為中心的設計         13 

1.5交互設計                   14

第2章以用戶為中心的設計        17 

2.1用戶體驗                   18 

2.1.1用戶體驗決定成敗         18 

2.1.2好的用戶體驗原則         19 

2.2用戶研究                   20 

2.2.1用戶是誰               20 

2.2.2心理模型和表現模型        20 

2.2.3數字化生活方式           21 

2.3建立用戶角色的重要性           22 

2.3.1開發者與用戶不同         22 

2.3.2設計要有針對性           22 

2.3.3人物角色使“以用戶為中心”落到實處             22 
2.3.4人物角色可以減少爭論，提高效率                 22 
2.4產品規劃前期                23 

2.4.1產品規劃時效            23 

2.4.2明確產品價值和定位        23 

2.4.3明確產品生命周期          23 

2.4.4明確產品對像和終端        24 

2.5積累用戶需求池              24 

2.5.1訪談或問卷調研用戶        24 

2.5.2用戶使用路徑分析          25 

2.5.3根據業務模塊窮舉法        25 

2.5.4其他渠道               25 

2.6建立有價值人物角色類型      25 

2.6.1人物角色數量            26 

2.6.2人物角色需求分級         26 

2.7人物角色簡介               26 

2.7.1人物角色要具體化         26 

2.7.2編寫人物角色簡介         27 

2.8編寫用戶情境               27 

2.8.1用戶情境的典型一天       27 

2.8.2編寫用戶情境             28

第3章交互設計              29 

3.1人機交互                   30 

3.1.1人機交互三要素           30 

3.1.2人機交互現狀與未來        30 

3.2UI中的交互設計思維            32 

3.2.1信息傳遞               32 

3.2.2交互行為               32 

3.2.3交互行為的變革           33 

3.2.4情感化設計             35 

3.3信息架構                 36 

3.3.1信息架構師             36 

3.3.2信息架構目標           36 

3.3.3信息的選擇與組織        37 

3.3.4界面導航設計            39 

3.4流程圖                    41 

3.4.1流程圖的基本構成和常用符號                 41 
3.4.2交互流程圖             42 

3.4.3制作流程圖常用軟件        42 

3.5交互原型設計                42 

3.5.1低保真原型設計           42 

3.5.2高保真原型設計           44 

第4章U素             47 

4.1素                   48 

4.1.1色彩屬性               48 

4.1.2色彩搭配的黃金法則        50 

4.1.3色彩搭配與界面風格        51 

4.2素                   54 

4.2.1標題類文字             54 

4.2.2正文類文字             57 

4.2.3提示類文字             60 

4.2.4交互類文字             60 

4.2.5行為召喚語句            61 

4.2.6文字動畫               62 

4.3素                   63 

4.3.1界面中圖片的種類         63 

4.3.2選擇圖片的原則           65 

4.3.3圖片常見比例            67 

4.4素                   69 

4.4.1圖標的概念              69 

4.4.2圖標設計原則            70 

4.4.3圖標設計的注意事項        72 

4.4.4圖標的視覺造型風格        72 

4.4.5圖標制作               74 

4.5素                   75 

4.5.1控件與圖標的區別         75 

4.5.2控件設計的注意事項       76 

4.5.3常見素           76 

4.6素的交互狀態            79

第5章軟件 UI設計            81 

5.1軟件 UI設計尺寸              82 

5.2軟件的歡迎界面               82 

5.3軟件的主界面                84 

5.3.1Top Frame區            85 

5.3.2菜單欄和工具欄           85 

5.3.3功能模塊區             86 

5.3.4工作區                87 

5.3.5狀態信息區             87 

5.4軟件界面的設計原則            87 

5.4.1界面與功能的適合性        87 

5.4.2界面意圖容易理解         88 

5.4.3及時反饋信息            89 

5.4.4防錯處理               89 

5.4.5風格一致和必要的個性化     90 

5.4.6合理的布局             90 

5.4.7合理的色彩             91 

5.4.8適應用戶群體和國際化       92 

5.4.9效率               92 

5.4.10可復用                93 

5.5軟件素設計的基本規則     93 

5.5.1字體設計的基本規則        93 

5.5.2菜單界面設計的基本規則     93 

5.5.3命令按鈕設計的基本規則     94 

5.5.4工具條和圖標按鈕設計的基本規則              94 
5.5.5提示信息設計的基本規則     94 

5.5.6單選按鈕設計的基本規則     95 

5.5.7復選按鈕設計的基本規則     95 

5.5.8輸入框和文本域設計的基本規則              96 
5.5.9組合下拉框和列表框設計的基本規則              96 
5.5.10多頁選項板設計的基本規則   96 
5.5.11數據表格設計的基本規則     97 

5.5.12日期控件設計的基本規則     97 

5.5.13軟件對話窗口設計的基本規則              98 
5.5.14軟件消息框設計的基本規則   98 
5.6窗口的交互規則              100 

5.6.1一般規則              100 

5.6.2焦點規則              101 

5.6.3選擇規則              101

第6章移動 App UI設計         103 

6.1移動 App UI設計概念           104 

6.2移動 App UI設計的風格類型       104 

6.3移動 App UI的設計原則         106 

6.3.1審美完整性原則          106 

6.3.2一致性原則             106 

6.3.3直接操作原則           106 

6.3.4提供反饋原則           106 

6.3.5隱喻的原則             107 

6.3.6用戶控制原則           107 

6.4移動智能設備               107 

6.5移動智能設備的操作繫統         107 

6.6iOS繫統 UI設計規範           108 

6.6.1iOS常用術語           108 

6.6.2iOS設計尺寸           110 

6.6.3iOS適配              111 

6.6.4iOS界面布局規範         112 

6.6.5iOS文字規範           113 

6.6.6iOS圖標規範           114 

6.6.7iOS交互注意事項        117 

6.7Android繫統 UI設計規範         118 

6.7.1Android常用術語         118 

6.7.2Android設計尺寸         119 

6.7.3Android適配            120 

6.7.4Android界面布局規範      120 

6.7.5Android文字規範         123 

6.7.6Android圖標規範         124 

6.7.7Android交互的注意事項     126 

6.7.8Android的其他設計建議     126 

6.8Harmony OS繫統 UI設計規範      127 

6.8.1Harmony OS常用術語      127 

6.8.2Harmony OS界面布局規範    127 
6.8.3Harmony OS文字規範      127 

6.8.4Harmony OS圖標規範      128 

6.8.5Harmony OS其他設計建議    128 
6.9移動 App切圖規則與規範       128 

6.9.1切圖類型              129 

6.9.2切圖範圍              129 

6.9.3小觸擊區域          129 

6.9.4切圖命名              129 

6.9.5AI切圖演示            130

第7章網頁 UI設計           131 

7.1常用術語                  132 

7.1.1網站                 132 

7.1.2網頁                 132 

7.1.3瀏覽器               132 

7.2網頁界面風格             132 

7.2.1嚴肅穩重型             132 

7.2.2綜合流量型             133 

7.2.3簡潔大氣型             133 

7.2.4生動活潑型             134 

7.2.5時尚個性型             134 

7.2.6傳統古樸型             134 

7.3屏幕分辨率與自適應       135 

7.3.1橫屏                 135 

7.3.2豎屏                 140 

7.4網頁的柵格布局              141 

7.5網頁布局參考              142 

7.6網頁字體                  145 

7.7網頁切圖                  145 

7.7.1切圖的原則             145 

7.7.2切圖的技巧             145 

7.7.3切圖的類型             145

第8章遊戲 UI設計           147 

8.1遊戲的分類                 148 

8.2遊戲 UI的獨特性            154 

8.2.1視覺風格              154 

8.2.2互動感受              155 

8.2.3復雜性                155 

8.3遊戲 UI的職能               156 

8.3.1實現功能切換           156 

8.3.2實現反饋交流           156 

8.3.3實現沉浸式體驗          157 

8.4遊戲 UI設計前期工作           158 

8.4.1明確遊戲的世界觀         158 

8.4.2明確遊戲的整體風格       159 

8.5遊戲 UI設計原則            161 

8.5.1統一性原則             161 

8.5.2易用性原則             162 

8.5.3習慣與認知原則          163 

8.5.4容錯性原則             164 

8.5.5及時信息反饋原則         164 

8.6手遊 UI設計的限制            165 

8.6.1尺寸限制              165 

8.6.2性能限制              165 

8.6.3分辨率限制             165 

8.6.4音效限制              165 

8.6.5操控限制              166 

8.6.6沉浸式體驗限制          166 

8.7手遊 UI設計注意事項           166 

8.7.1更高的易用性           166 

8.7.2更及時的反饋           166 

8.7.3更多樣化的操作控制     167

第9章UI設計項目案例         169 

9.1“找到你”App產品定位         170 

9.1.1行業背景              170 

9.1.2調研手段              170 

9.1.3用戶需求              171 

9.1.4定位分析              171 

9.1.5建立人物角色與情境      172 

9.2交互設計                  173 

9.2.1產品框架              173 

9.2.2低保真原型圖設計         173 

9.3視覺設計                  175 

9.3.1標志設計              175 

9.3.2圖標設計              176 

9.3.3高保真原型圖設計         177 

9.4後期測試與維護              180 

9.4.1項目評審與測試          180 

9.4.2意見反饋與迭代          184

參考文獻                 185 

編寫本書的初衷是為了充盈用戶界面(UI)設計課程的教學材料，立足於培養全方位UI設計人纔，以符合UI設計教學的新需求和全面性原則為目的。UI設計具有多學科交融的特點，以作者多年來的教學經驗，深感UI設計不能隻注重技能的培訓，而更應該注重設計思維能力的培養。UI設計課程不隻是技能課程，其更重要的教學目的是注重學生產品思維、用戶思維和交互思維模式的形成。有了這些底層邏輯，再與視覺設計素養結合，學生設計出的界面作品纔能真正成為符合用戶和市場需求的產品。
本書注重培養學生思維模式和應用實踐能力的培養，內容涵蓋了UI設計概念，以用戶為中心的設計理念，交互設計，界素設計，軟件、移動App、網頁、遊戲UI設計以及用戶 UI設計項目流程解析。本書內容翔實、案例豐富、圖片精美，詳細解讀了用戶UI設計理論與方法，可作為高校和培訓機構等相關專業課程的實驗和實訓教材，也適合對UI設計感興趣或未來想從事UI設計相關工作的讀者使用。
本書共分為9章，具體安排如下。
第1章關於UI設計，介紹用戶UI概念，圖形UI的發展歷程，以用戶為中心的設計概念和交互設計概念。
第2章詳細講解以用戶為中心的設計，包括用戶體驗、用戶研究和以用戶為中心的產品策劃，其中包括用戶角色建立、累積用戶需求池、撰寫人物簡介、編寫用戶使用情境等內容。
第3章主要講解交互設計，包括人機交互概念、現狀與未來發展，交互設計思維、信息架構、流程圖以及原型圖設計等內容。
第4章講解UI中素，包括色彩、文字、圖片、圖標素以及交互狀態等內容。
第5章介紹軟件UI設計與交互的規則和規範、設計原則等內容。
第6章介紹移動App UI的設計概念、設計風格、設計原則，分別介紹了iOS、Android、 Harmony OS(鴻蒙)三個繫統的UI設計規則與規範以及切圖規範等內容。
第7章講解網頁 UI設計的常用術語，設計風格，網頁的分辨率與自適應，網頁的布局、字體與切圖等內容。
第8章講解遊戲的分類，遊戲UI的獨特性，遊戲UI的職能，UI設計前期工作，遊戲UI設計原則，手遊UI設計的局限性和注意事項等內容。
第9章講解用戶 UI設計項目案例流程，包括產品定位、交互設計、視覺設計、後期測試與 
維護等內容。本書特色如下。 
. 知識涵蓋廣泛。專門增設國內繫統平臺新秀Harmony OS(鴻蒙)的設計規範，同時注重塑造讀者的產品思維、用戶思維和交互思維模式的形成。對U素分門別類地詳細講解設計原則以及設計方法，對軟件、移動App、網頁和遊戲UI設計進行全面繫統的講解，帶領讀者了解整個用戶界面項目的制作流程。 

. 針對性強。專門為高校教師與學生編寫，知道教學設計重點，可作為高校和培訓機構等相關專業課程的實驗實訓教材。 

. 案例豐富、圖片精美，適合對 UI設計感興趣或未來想從事 UI設計相關工作的讀者閱讀。

本書主要由重慶文理學院美術與設計學院教師及馬來西大學學院在讀博士田雅嵐統籌主編。感謝劉偉編寫本書第8章和第9章；感謝重慶第二師範學院李賢老師和殷源同學提供本書後一章的項目案例；感謝鄭志翔對本書構架提出建設性的修改思路。在此還要特別感謝陳龍國院長為本書做出審讀意見；感恩重慶文理學院美術與設計學院的司桂松、遲鳳利、劉曉曄、鄧興興、劉春陽、任龍泉、賀鑫晨、劉敬彪、黃彪和尹丹在成書過程中給予的建議與幫助。
因編者水平有限，書中難免存在疏漏和不足之處，敬請廣大讀者、同人和專家批評指正。
編者