《新印象——解構UI設計(第2版)》是2022年人民郵電出版社出版的圖書,作者是王鐸。
基本介紹
- 中文名:新印象——解構UI設計(第2版)
- 作者:王鐸
- 出版時間:2022年11月
- 出版社:人民郵電出版社
- ISBN:9787115597786
- 類別:圖書>計算機/網路>程式設計>其他
- 開本:128 開
- 裝幀:平裝-膠訂
內容簡介,圖書目錄,作者簡介,
內容簡介
這是一本系統介紹UI設計的書,可帶領初、中級讀者快速學習UI設計知識、技巧和操作。
本書從UI設計基礎入手,結合大量的案例分析,深入地講解了UI設計的界面類型、界面構圖、版面布局、元素、界面用色、設計原則與規範、切圖與標註、圖示設計及藝術二維 碼設計等方面的內容。通過實戰練習,幫助讀者輕鬆地掌握UI設計的相關技術。
隨書附帶所有實戰案例的源檔案和素材檔案,方便讀者練習。
本書適合UI設計師、互動設計師、準備轉至UI設計方向的平面設計師,以及相關專業的高校學生閱讀。
圖書目錄
第 1章 界面類型 009
1.1 閃屏頁 010
1.1.1 品牌宣傳型 010
1.1.2 節日關懷型 011
1.1.3 活動推廣型 012
1.2 引導頁 013
1.2.1 功能介紹型(初級) 013
1.2.2 情感帶入型(中級) 014
1.2.3 搞笑型(高級) 015
1.3 浮層引導頁 016
1.4 空白頁 017
1.4.1 首次進入型 017
1.4.2 錯誤提示型 018
1.5 首頁 019
1.5.1 列表型 019
1.5.2 圖示型 020
1.5.3 卡片型 020
1.5.4 綜合型 021
1.6 個人中心頁 022
1.7 列表頁 024
1.7.1 單行列表頁 024
1.7.2 雙行列表頁 025
1.7.3 時間軸列表頁 025
1.7.4 圖庫列表頁 026
1.8 播放頁面 027
1.9 詳情頁 028
1.10 可輸入頁面 029
1.11 實戰:兩步打造炫酷界面 030
1.11.1 繪製基礎圖形 030
1.11.2 添加顏色與細節 032
第 2章 界面構圖 035
2.1 九宮格構圖 036
案例分析 037
2.2 圓心放射構圖 038
案例分析 039
2.3 三角形構圖 041
案例分析 041
2.4 S形構圖 043
案例分析 044
2.5 F形構圖 047
案例分析 047
2.6 實戰:用多種構圖方式
製作運動App界面 048
2.6.1 用放射構圖設計運動頁面 048
2.6.2 用倒三角形構圖設計地圖頁面 053
2.6.3 用三角形構圖設計個人頁面 056
第3章 版面布局 059
3.1 界面版率 060
3.1.1 單色塊填充 061
3.1.2 多色塊組合 062
3.1.3 穿插填充 062
3.1.4 關鍵字圖形化 063
3.1.5 放大文字 064
3.2 摳圖法 065
案例分析 065
3.3 破界法 066
案例分析 066
3.4 局部提取 069
案例分析 069
3.5 對齊方式 070
3.5.1 界面中常用的對齊方式 070
3.5.2 小米官網的登錄頁 072
3.5.3 蘋果官網的登錄頁 073
3.6 間距 074
案例分析 074
3.7 視覺層次 077
案例分析 077
3.8 實戰:設計空氣淨化器App界面 080
3.8.1 對頁面進行整體布局 080
3.8.2 設計“較差”頁面 082
3.8.3 設計“良好”頁面 086
第4章 元素 087
點線面 088
案例分析 088
4.2 極簡至上 093
案例分析 093
4.3 品牌靈魂 095
案例分析 095
4.4 形象靈魂化 096
案例分析 096
4.5 動畫賦予設計生命 099
案例分析 099
4.6 選單設定 100
案例分析 100
4.7 實戰:快速製作晶格化界面 101
4.7.1 製作圓形頭像 101
4.7.2 製作晶格背景 102
4.7.3 製作界面細節 104
第5章 界面用色 107
5.1 感知色彩 108
5.1.1 紅色 109
5.1.2 橙色 110
5.1.3 黃色 110
5.1.4 綠色 111
5.1.5 藍色 111
5.1.6 粉色 112
5.1.7 黑色 112
5.2 色不過三 113
案例分析 113
5.3 主色、輔助色及點睛色 116
5.3.1 主色 116
5.3.2 輔助色 117
5.3.3 點睛色 118
5.4 配色 119
5.4.1 互補色搭配 119
5.4.2 冷暖對比色搭配 121
5.5 實戰:設計色彩統一的頁面 123
5.5.1 設計頁面圖示 123
5.5.2 設計個人中心頁 128
5.5.3 設計聊天頁 132
第6章 設計原則與規範 135
6.1 iOS的五大設計原則 136
6.1.1 突顯內容原則 137
6.1.2 統一化原則 139
6.1.3 適應化原則 140
6.1.4 層級性原則 144
6.1.5 易操作性原則 145
6.2 iOS界面尺寸及控制項設計規範 147
6.2.1 界面尺寸 147
6.2.2 控制項設計規範 149
6.3 Android設計原則及規範 154
6.3.1 Android的設計原則 154
6.3.2 Android的控制項設計規範 158
6.3.3 Android的設計尺寸及單位 163
6.4 常用字型規範 165
6.4.1 成也字,敗也字 165
6.4.2 字不過三 166
案例分析 166
6.4.3 文字與背景要分明 168
6.4.4 字型與氣氛要匹配 168
案例分析 168
6.4.5 常用字型類型 169
6.4.6 界面字型規範 172
6.4.7 常用字型顏色 174
6.5 制定一套設計規範 175
6.5.1 色彩規範 176
6.5.2 按鈕控制項規範 177
6.5.3 分割線規範 177
6.5.4 頭像規範 177
6.5.5 其他控制項與聊天氣泡規範 178
6.5.6 文字字號規範 179
6.5.7 間距規範 180
6.5.8 圖示規範 181
6.6 實戰:設計毛筆字風格的登錄頁 182
6.6.1 製作基礎字型 182
6.6.2 用筆刷設計細節 184
第7章 切圖與標註 189
7.1 高效切圖 190
7.1.1 iPhone螢幕與Android手機螢幕的關係 190
7.1.2 Android的常用單位 191
7.1.3 通用切圖法 192
7.1.4 Android的“點九”切圖法 194
7.2 界面標註 197
7.2.1 標註軟體 197
7.2.2 標註規範 198
7.3 實戰:為一款首頁界面切圖 201
7.3.1 切圖分析 201
7.3.2 iOS切圖 203
7.3.3 Android切圖 205
第8章 圖示設計 207
8.1 圖示創意 208
8.1.1 卡通形象化 208
8.1.2 關鍵字圖形化 208
8.1.3 文字直觀化 209
案例分析 209
8.2 圖示類型 210
8.2.1 像素圖示 210
案例分析 211
8.2.2 擬物化圖示 212
8.2.3 扁平化圖示 212
案例分析 214
8.2.4 線性圖示 215
案例分析 215
8.2.5 立體圖示 217
案例分析 217
8.3 實戰:繪製功能圖示 219
8.3.1 功能圖示的設計規範 219
8.3.2 功能圖示的繪製過程 220
8.4 實戰:製作立體圖示 227
8.4.1 製作透視格線 227
8.4.2 製作立體字 228
8.4.3 製作燈泡 229
8.4.4 製作光暈 230
8.5 實戰:快速製作線條流暢的Logo 231
8.5.1 製作Logo形狀的輔助線 231
8.5.2 生成Logo路徑形狀 232
8.5.3 將輔助線設定為虛線 234
第9章 藝術二維碼設計 235
9.1 二維碼的原理與結構 236
9.2 動態二維碼的表現 239
9.2.1 MICU二維碼——航行 239
9.2.2 MICU二維碼——音樂節 240
9.2.3 MICU二維碼——清涼夏日 241
9.2.4 MICU二維碼——UI疫苗站 241
9.2.5 MICU二維碼——設計樂園 242
案例分析 242
9.3 實戰:製作寶馬春節藝術二維碼 245
9.3.1 製作原碼 245
9.3.2 設計二維碼 246
9.3.3 製作動效 249
9.4 實戰:快速製作動態界面 253
9.4.1 導入GIF圖片並轉換為智慧型對象 253
9.4.2 製作透視展示圖 254
作者簡介
王鐸,先後服務於騰訊、奇虎360、今日頭條等公司,人民網特邀講師。 參與項目手機QQ、360兒童衛士、360空氣淨化器及360防丟衛士、老虎地圖、內涵段子等產品。 第五屆國際大學生動畫節漫畫插畫類作品獎 創意紫峰優秀作品獎中國包裝創意設計大賽 優秀獎中國之星設計藝術大獎獲 中國綠化基金會“綠色愛心設計師”稱號。