新印象——解構UI設計(第2版)
王鐸
- 出版商: 人民郵電
- 出版日期: 2022-11-01
- 售價: $594
- 貴賓價: 9.5 折 $564
- 語言: 簡體中文
- 頁數: 256
- ISBN: 7115597782
- ISBN-13: 9787115597786
-
相關分類:
交互設計 Interaction-design、使用者介面 UI
立即出貨
買這商品的人也買了...
-
$500Python + Kivy (App開發) 從入門到實踐
-
$602Python 基礎與 PyQt 可視化編程詳解
-
$756UI設計實戰精講
-
$556Vue.js 3 企業級應用開發實戰 (雙色版)
-
$640$499 -
$407Axure RP9原型設計實戰案例教材
-
$658快學 Python:自動化辦公輕松實戰
-
$780$663 -
$680$530 -
$620$465 -
$600$468 -
$520$406 -
$650$507 -
$1,200$792 -
$1,200$948 -
$594$564 -
$356電腦視覺 — 飛槳深度學習實戰
-
$680$530 -
$354$336 -
$600$468 -
$458R語言醫學多元統計分析
-
$570多模態大模型:技術原理與實戰
-
$680$537 -
$560$442 -
$620$484
相關主題
商品描述
這是一本系統介紹UI設計的書,可帶領初、中級讀者快速學習UI設計知識、技巧和操作。
本書從UI設計基礎入手,結合大量的案例分析,深入地講解了UI設計的界面類型、界面構圖、版面佈局、元素、界面用色、設計原則與規範、切圖與標註、圖標設計及藝術二維 碼設計等方面的內容。通過實戰練習,幫助讀者輕松地掌握UI設計的相關技術。
隨書附帶所有實戰案例的源文件和素材文件,方便讀者練習。
本書適合UI設計師、交互設計師、準備轉至UI設計方向的平面設計師,以及相關專業的高校學生閱讀。
作者簡介
王铎,先后服务于腾讯、奇虎360、今日头条等公司,人民网特邀讲师。 参与项目手机QQ、360儿童卫士、360空气净化器及360防丢卫士、老虎地图、内涵段子等产品。 第五届国际大学生动画节漫画插画类作品奖 创意紫峰优秀作品奖中国包装创意设计大赛 优秀奖中国之星设计艺术大奖获 中国绿化基金会“绿色爱心设计师”称号。
目錄大綱
第 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