《Photoshop+PxCook+Cutterman網頁UI設計教程》是2021年電子工業出版社出版的圖書，作者是李曉斌 。
基本介紹
- 中文名：Photoshop+PxCook+Cutterman網頁UI設計教程
- 作者：李曉斌
- 出版社：電子工業出版社
- 出版時間：2021年
- 頁數：232 頁
- 定價：89.8 元
- 開本：16 開
- ISBN：9787121414329
內容簡介,目錄,
內容簡介
本書主要講解了iOS系統和Android系統兩種移動設備系統界面的結構及設計規範，全面解析了移動端App界面的設計流程及技巧。本書還介紹了如何使用Adobe XD、Photoshop、PxCook和Cutterman等主流軟體進行UI設計製作。 本書共6章。第1章主要講解移動UI設計基礎；第2章主要講解iOS系統界面設計；第3章主要講解Android系統界面設計；第4章主要講解移動UI圖示設計；第5章主要講解iOS系統界面套用設計；第6章主要講解Android系統界面套用設計。 本書將提供全部案例的素材、源檔案和教學視頻，讀者可以結合書、練習檔案和教學視頻，提升移動端App界面設計的學習效率。
目錄
第1章 網頁UI設計初體驗
1.1 初識網頁UI ···································1
1.2 網頁UI的分類 ································2
1.3 網頁UI設計的工作流程 ····················5
1.3.1 網頁產品調研 ···············································.5
1.3.2 網頁原型設計 ···············································.6
1.3.3 設計網頁UI ··················································.7
1.3.4 網頁UI 標註 ·················································.8
1.3.5 網頁UI 切圖輸出 ·········································.8
1.4 深刻理解網頁UI設計原則 ·················8
1.4.1 視覺美觀 ·······················································.8
1.4.2 主題明確 ·······················································.9
1.4.3 內容與形式相統一 ·····································.10
1.4.4 整體性 ·························································.11
1.4.5 快速載入 ·····················································.11
1.4.6 為用戶考慮 ·················································.12
1.5 網頁UI的設計風格 ························13
1.5.1 擬物化風格 ·················································.13
1.5.2 扁平化風格 ·················································.13
1.5.3 極簡化風格 ·················································.14
1.5.4 3D 風格 ·······················································.14
1.5.5 插畫風格 ·····················································.15
1.5.6 低多邊形風格 ·············································.15
1.5.7 無框線風格 ·················································.15
1.5.8 縱向分割風格 ·············································.16
1.5.9 超級頭版風格 ·············································.17
1.6 設計網頁UI的常用工具 ··················17
1.6.1 Axure RP 9 ···················································.17
1.6.2 Photoshop 和Illustrator·······························.18
1.6.3 Sketch 和Adobe XD ···································.21
1.6.4 PxCook 和Cutterman ·································.23
1.7 本章小結 ····································24
第2章 合理的網頁版式與布局
2.1 了解網頁布局 ······························25
2.1.1 網頁布局的目的 ·········································.25
2.1.2 網頁布局的操作流程 ·································.26
2.2 網頁布局的基本方法 ·····················27
2.2.1 網頁的布局設計 ·········································.27
2.2.2 網頁布局的原則 ·········································.28
2.3 網頁布局的常見類型 ·····················29
2.3.1 國字型 ·························································.30
2.3.2 拐角型 ·························································.30
2.3.3 標題正文型 ·················································.31
2.3.4 左右框架型 ·················································.31
2.3.5 上下框架型 ·················································.31
2.3.6 封面型 ·························································.32
2.3.7 變化型 ·························································.33
2.4 根據內容位置決定網頁布局方式 ······33
2.4.1 滿屏式網頁布局 ·········································.33
2.4.2 一欄式網頁布局 ·········································.34
實戰練習01——設計並製作白酒網頁 ···············.35
2.4.3 兩欄式網頁布局 ·········································.40
實戰練習02——布局啤酒網站 ···························.42
2.4.4 三欄式網頁布局 ·········································.45
2.4.5 水平和垂直居中的網頁布局 ·····················.47
2.5 頁面分割方向的布局方式 ···············48
2.5.1 縱向分割 ·····················································.48
2.5.2 橫向分割 ·····················································.49
實戰練習03——布局家居網站 ···························.49
2.5.3 縱向與橫向複合型 ·····································.52
2.5.4 運用固定區域的設計 ·································.53
2.6 網頁布局的特性 ···························53
2.7 PC端與移動端網頁布局的區別 ········55
2.8 本章小結 ····································56
第3章 奠定基礎的網頁構成元素
3.1 網頁中的線條 ······························57
3.1.1 點、線、面的關係 ·····································.57
3.1.2 網頁中套用的線條風格 ·····························.58
3.1.3 線條在網頁UI 中的作用 ···························.62
3.2 網頁中的標誌 ······························66
3.2.1 網頁標誌的尺寸 ·········································.66
3.2.2 網頁標誌的特點 ·········································.66
3.2.3 網頁標誌的設計規範 ·································.67
實戰練習01——設計並製作網頁標誌 ···············.69
3.2.4 網頁標誌的表現形式 ·································.71
3.3 網頁中的圖示和按鈕 ·····················73
3.3.1 網頁圖示的概念 ·········································.73
3.3.2 網頁圖示的設計原則 ·································.73
3.3.3 網頁圖示的套用 ·········································.75
實戰練習02——設計並製作簡易圖示 ···············.76
3.3.4 網頁按鈕的概念 ·········································.80
3.3.5 網頁按鈕的功能 ·········································.80
3.3.6 設計出色的網頁按鈕 ·································.81
實戰練習03——設計並製作簡單的網頁元素 ···.83
3.4 網頁中的導航 ······························88
3.4.1 布局網頁導航 ·············································.88
3.4.2 網頁導航的設計技巧 ·································.91
實戰練習04——設計並製作家居網頁的主體廣告和導航 ·············92
3.5 網頁中的文字 ······························96
3.5.1 網頁中的文字設定 ·····································.96
3.5.2 網頁文字的設計原則 ·······························.100
3.5.3 網頁文字的排版規則 ·······························.100
3.6 網頁中的圖片 ···························.103
3.6.1 網頁中的圖片設定 ···································.103
3.6.2 網頁圖片的套用 ·······································.104
3.7 網頁中的富媒體 ························.106
3.8 本章小結 ·································.106
第4章 美觀的網頁配色
4.1 配色的基礎 ······························.107
4.1.1 色彩的概念 ···············································.107
4.1.2 色彩的三要素 ···········································.107
4.1.3 顏色模式 ···················································.110
4.1.4 十六進制顏色碼 ·········································111
4.2 網頁配色的基本要素 ··················.112
4.2.1 網頁的主題色 ···········································.112
實戰練習01——設計並製作家具網站的登錄頁面 ··················.113
4.2.2 網頁的背景色 ···········································.115
4.2.3 網頁的輔助色 ···········································.116
4.2.4 網頁的文本色 ···········································.117
4.2.5 網頁的強調色 ···········································.117
4.3 網頁元素的色彩搭配 ··················.118
4.3.1 網頁標誌與廣告 ·······································.118
4.3.2 網頁導航 ···················································.118
實戰練習02——設計並製作圖片資源網頁 ·····.118
4.3.3 背景色與文字 ···········································.120
4.3.4 連結文字 ···················································.121
4.4 根據色調進行網頁配色 ···············.122
4.5 利用色彩對比進行網頁配色 ·········.123
4.5.1 色彩的冷暖對比 ·······································.123
4.5.2 色彩的大小對比 ·······································.124
4.5.3 色彩的色相對比 ·······································.124
4.6 網頁中的配色技巧 ·····················.128
4.6.1 突出網頁主題 ···········································.128
實戰練習03——設計並製作咖啡網頁 ·············.131
4.6.2 融合整體配色 ···········································.132
4.7 本章小結 ·································.134
第5章 iOS系統UI設計
5.1 iOS系統簡介 ····························.135
5.2 iOS系統的元素設計 ···················.136
5.2.1 尺寸單位 ···················································.136
5.2.2 尺寸大小 ···················································.137
5.2.3 組件尺寸 ···················································.138
5.2.4 圖示 ···························································.138
5.3 iOS系統的邊距和間距設計 ··········.140
5.3.1 全局邊距 ···················································.140
實戰練習01——設計並製作運動App 的主頁 ···.141
5.3.2 卡片間距 ···················································.143
5.3.3 內容間距 ···················································.144
5.4 iOS系統的文字設計 ···················.146
5.4.1 字型 ···························································.146
5.4.2 字號與字重 ···············································.146
實戰練習02——設計並製作旅遊App 的“我的”界面 ···················.147
5.5 iOS系統的圖片設計 ···················.151
5.5.1 圖片的比例 ···············································.151
5.5.2 圖片的格式 ···············································.152
5.6 iOS系統的網頁布局 ···················.153
5.6.1 列表式布局 ···············································.153
5.6.2 陳列館式布局 ···········································.153
5.6.3 宮格式布局 ···············································.154
5.6.4 卡片式布局 ···············································.154
5.7 iOS系統UI的設計原則 ················.155
5.7.1 親密性 ·······················································.155
5.7.2 對齊、對比和重複 ···································.156
5.7.3 直截了當 ···················································.158
5.7.4 提供邀請 ···················································.160
5.8 本章小結 ·································.162
第6章 Android系統UI設計
6.1 Android系統簡介 ·······················.163
6.2 Android系統的元素設計 ··············.163
6.2.1 設計單位 ···················································.164
6.2.2 界面尺寸 ···················································.165
6.2.3 組件尺寸 ···················································.165
實戰練習01——設計並製作App 的登錄界面 ····.166
6.3 Android系統的文字設計 ··············.168
6.3.1 字型和字重 ···············································.168
6.3.2 字號 ···························································.169
6.4 Android系統的圖示設計 ··············.170
6.4.1 啟動圖示 ···················································.170
6.4.2 標籤欄/ 系統通知圖示 ····························.170
6.4.3 上下文圖示 ···············································.171
6.4.4 圖示尺寸 ···················································.171
實戰練習02——設計並製作App 界面中的上下文圖示 ··················.172
6.5 Android系統UI的設計原則 ···········.174
6.5.1 一步到位 ···················································.174
6.5.2 即時反應 ···················································.177
6.5.3 簡化互動 ···················································.179
實戰練習03——設計並製作Android 系統App“我的”界面 ···············.181
6.6 本章小結 ·································.184
第7章 適配輸出網頁UI設計
7.1 PC端網頁的適配輸出 ·················.185
7.1.1 PC 端的適配方法 ·····································.185
7.1.2 適配時需要注意的點 ·······························.185
7.2 iOS系統界面的適配輸出 ·············.186
7.2.1 界面標註 ···················································.186
7.2.2 標註工具——PxCook ······························.188
實戰練習01——標註iOS 系統App 界面 ········.191
7.2.3 適配輸出 ···················································.193
7.3 Android系統界面的適配輸出 ········.195
7.3.1 界面標註 ···················································.195
7.3.2 適配輸出 ···················································.196
7.3.3 .9 切圖法 ···················································.198
7.3.4 輸出工具——Cutterman 外掛程式 ·················.201
實戰練習02——輸出Android 系統的App 界面 ·······················.201
7.4 本章小結 ·································.203
第8章 綜合案例
8.1 設計PC端的家居網頁 ·················.204
8.1.1 家居網頁案例分析 ···································.204
8.1.2 家居網頁色彩分析 ···································.205
8.1.3 家居網頁製作步驟 ···································.206
8.2 設計iOS系統的旅遊App界面 ·······.209
8.2.1 旅遊App 界面案例分析 ··························.209
8.2.2 旅遊App 界面色彩分析 ··························.210
8.2.3 旅遊App 界面製作步驟 ··························.211
8.3 設計Android系統的家居App界面 ··.215
8.3.1 家居App 界面案例分析 ··························.215
8.3.2 家居App 界面色彩分析 ··························.217
8.3.3 家居App 界面製作步驟 ··························.218
8.4 本章小結 ·································.222
