目錄 第 1 章 UI 設(shè)計的常用工具 009 1.1 Photoshop 的界面介紹 010 1.2 Photoshop 中的常用工具 012 1.2.1 課堂案例：用常用工具制作界面 012 1.2.2 移動工具 015 1.2.3 矩形工具 016 1.2.4 橢圓工具 017 1.2.5 鋼筆工具 017 1.2.6 直接選擇工具 018 1.2.7 橫排文字工具 018 1.3 Illustrator 的界面介紹 019 1.4 Illustrator 中的常用工具 020 1.4.1 課堂案例：用常用工具制作手機圖標 021 1.4.2 選擇工具 023 1.4.3 直接選擇工具 023 1.4.4 鋼筆工具 023 1.4.5 矩形工具 024 1.4.6 橢圓工具 025 1.4.7 多邊形工具 026 1.4.8 文字工具 026 1.5 在Photoshop 中導入Illustrator文件的方法 027 課堂練習：在Illustrator 中繪制鬧鐘App 功能圖標 028 課后習題：在Photoshop 中制作鬧鐘App 界面 028 第 2 章 界面構(gòu)圖、布局與色彩 029 2.1 界面的常見構(gòu)圖類型 030 2.1.1 井字形構(gòu)圖 030 2.1.2 三角形構(gòu)圖 031 2.1.3 放射形構(gòu)圖 031 2.1.4 折線形構(gòu)圖 032 2.1.5 直角形構(gòu)圖 033 2.2 界面布局的要素 034 2.2.1 頁面的留白 034 2.2.2 頁面的對齊方式 034 2.2.3 界面的間距 035 2.2.4 界面的層次 035 2.3 界面的色彩搭配 037 2.3.1 色彩心理學 037 2.3.2 配色的方法 039 2.3.3 配色的要素 040 第3 章 UI 設(shè)計的原則及規(guī)范 041 3.1 iOS 系統(tǒng)的設(shè)計原則 042 3.1.1 統(tǒng)一化 042 3.1.2 凸顯內(nèi)容 042 3.1.3 適應(yīng)性 043 3.1.4 層級性 045 3.1.5 易操作性 046 3.2 iOS 界面尺寸與控件的設(shè)計規(guī)范 046 3.2. 1 界面尺寸 046 3.2.2 控件規(guī)范 047 3.3 Android 系統(tǒng)的設(shè)計原則 050 3.3. 1 核心視覺載體 050 3.3.2 層級空間 050 3.3.3 動畫 050 3.3.4 顏色 053 3.4 Android 界面尺寸與控件的設(shè)計規(guī)范054 3.4. 1 界面尺寸 054 3.4.2 控件規(guī)范 055 3.5 常用字體規(guī)范 063 3.5. 1 文字設(shè)計的要素 063 3.5.2 常用字體的類型 065 3.5.3 界面字體的規(guī)范 066 3.6 UI 設(shè)計的整體規(guī)范 069 3.6. 1 色彩控件 069 3.6.2 按鈕控件 069 3.6.3 分割線 070 3.6.4 頭像 070 3.6.5 提示框 070 3.6.6 文字 071 3.6.7 間距 072 3.6.8 圖標 072 第4 章 圖標設(shè)計 073 4.1 扁平化風格圖標 074 4.1.1 課堂案例：制作扁平化風格的播放器圖標 074 4.1.2 課堂案例：制作扁平化風格的旅游圖標 075 4.1.3 扁平化圖標的概念 077 4.1.4 扁平化圖標的類型 078 4.1.5 設(shè)計扁平化圖標的注意事項 078 4.2 線性風格圖標 079 4.2.1 課堂案例：制作線性風格的聊天圖標 079 4.2.2 課堂案例：制作線性風格的功能圖標 082 4.2.3 線性圖標的概念 084 4.2.4 設(shè)置線性圖標的注意事項 084 4.3 其他類型的圖標 085 4.3. 1 像素圖標 085 4.3.2 擬物化圖標 085 4.3.3 立體圖標 085 4.3.4 卡通圖標 085 4.3.5 文字圖標 086 4.3.6 功能圖形化圖標 086 課堂練習：在Illustrator 中繪制手機功能圖標 086 課后習題：在Photoshop 中繪制功能圖標 086 第5 章 閃屏頁設(shè)計 087 5.1 閃屏頁的概念 088 5.2 閃屏頁的常見類型 088 5.2.1 課堂案例：制作中秋主題的閃屏頁 088 5.2.2 宣傳型 092 5.2.3 關(guān)懷型 092 5.2.4 推廣型 093 課堂練習：制作品牌宣傳型閃屏頁 093 課后習題：制作推廣型閃屏頁 094 第6 章 引導頁與浮層引導頁設(shè)計095 6.1 引導頁的概念 096 6.2 引導頁的常見類型 096 6.2.1 課堂案例：制作功能介紹型引導頁 096 6.2.2 功能介紹型 100 6.2.3 情感型 101 6.2.4 幽默型 101 6.3 浮層引導頁 102 6.3.1 課堂案例：制作浮層引導頁 102 6.3.2 浮層引導頁的概念 104 課堂練習：制作旅游App 引導頁 105 課后習題：制作文檔App 引導頁 106 第7 章 空白頁設(shè)計 107 7.1 空白頁的概念 108 7.2 空白頁的常見類型 108 7.2.1 課堂案例：制作資料審核空白頁 108 7.2.2 首次進入型 112 7.2.3 錯誤提示型 112 課堂練習：制作消息中心空白頁 113 課后習題：制作購物車空白頁 114 第8 章 首頁設(shè)計 115 8.1 首頁的概念 116 8.2 首頁的常見類型 116 8.2.1 課堂案例：制作外賣App 首頁 116 8.2.2 列表型 125 8.2.3 圖標型 126 8.2.4 卡片型 126 8.2.5 綜合型 127 課堂練習：制作旅游App 主頁 128 課后習題：制作美食類App 主頁 128 第9 章 個人中心頁設(shè)計 129 9.1 個人中心頁的概念 130 9.2 個人中心頁的常見類型 131 9.2.1 課堂案例：制作個人中心頁 131 9.2.2 頭像居中對齊 137 9.2.3 頭像居左對齊 137 課堂練習：制作視頻App 個人中心頁 138 課后習題：制作學習類App 個人中心頁 138 第 10 章 列表頁設(shè)計 139 10.1 列表頁的概念 140 10.2 列表頁的常見類型 141 10.2.1 課堂案例：制作圖書折扣列表頁 141 10.2.2 單行列表 145 10.2.3 雙行列表 146 10.2.4 時間軸 146 10.2.5 圖庫列表 147 課堂練習：制作購物App 列表頁 147 課后習題：制作物流信息列表頁 148 第 11 章 播放頁設(shè)計 149 11.1 播放頁的概念 150 11.2 播放頁的常見類型 150 11.2.1 課堂案例：制作音樂播放器界面 150 11.2.2 音樂播放頁 155 11.2.3 視頻播放頁 156 11.2.4 音頻播放頁 157 課堂練習：制作音樂播放頁 157 課后習題：制作音頻播放頁 158 第 12 章 詳情頁設(shè)計 159 12.1 詳情頁的概念 160 12.2 詳情頁的常見類型 161 12.2.1 課堂案例：制作購物App 詳情頁 161 12.2.2 普通型 170 12.2.3 銷售型 170 課堂練習：制作食譜詳情頁 171 課后習題：制作旅游詳情頁 172 第 13 章 可輸入頁設(shè)計 173 13.1 可輸入頁的概念 174 13.2 可輸入頁的常見類型 175 13.2.1 課堂案例：制作軟件登錄頁 175 13.2.2 登錄頁面 180 13.2.3 信息發(fā)布頁面 180 13.2.4 聊天頁面 18 1 課堂練習：制作預(yù)約信息頁 18 1 課后習題：制作聊天頁 182 第 14 章 切圖與標注 183 14.1 iOS 與Android 的切圖方法 184 14.1.1 課堂案例：對個人中心界面進行切圖 184 14.1.2 Android 的常用單位 187 14.1.3 iOS 與Android 的尺寸關(guān)系 188 14.1.4 iOS 與Android 的切圖命名方式 188 14.1.5 通用切圖法 189 14.1.6 Android 的“點九”切圖法 189 14.2 界面標注 190 14.2.1 標注軟件 190 14.2.2 標注規(guī)范 190 課堂練習：對播放頁進行切圖 1 91 課后習題：對旅游主頁進行切圖 192 第 15 章 制作藝術(shù)二維碼 193 15.1 二維碼的原理結(jié)構(gòu) 194 15.2 制作藝術(shù)二維碼 195 15.2.1 課堂案例：制作數(shù)藝設(shè)藝術(shù)二維碼 195 15.2.2 生成二維碼的方法 197 15.2.3 設(shè)計藝術(shù)二維碼的注意事項 199 課堂練習：制作軟件書藝術(shù)二維碼 200 課后習題：制作手繪書藝術(shù)二維碼 200