UI 設計技術與應用案例解析

目    錄 第1章 UI設計基礎知識 1.1 UI設計概述 2 1.1.1 UI設計的概念 2 1.1.2 UI設計的基本原則 3 1.1.3 UI設計的流程 6 1.1.4 UI設計的常用軟件 7 1.2 UI設計方向 8 1.2.1 用戶研究 8 1.2.2 交互設計 8 1.2.3 界面設計 8 1.3 UI界面設計原則 9 1.3.1 一致性原則 9 1.3.2 準確性原則 9 1.3.3 可讀性原則 9 1.3.4 佈局合理化原則 10 1.3.5 系統操作合理性原則 10 1.3.6 系統響應時間原則 11 1.4 UI設計規範 11 1.4.1 文字應用規範 11 1.4.2 圖片應用規範 12 1.4.3 色彩應用規範 13 課後練習 收集不同類別的UI界面設計 19 拓展賞析 中國的榫卯工藝 20 第2章 圖像處理知識準備 2.1 基礎知識詳解 22 2.1.1 案例解析：製作九宮格效果 22 2.1.2 認識工作界面 23 2.1.3 圖像的輔助調整 24 2.1.4 圖像的顯示調整 27 2.1.5 圖像的變形與變換 29 2.1.6 圖像的修飾與修復 31 2.2 圖形的繪制與填充 35 2.2.1 案例解析：重構圖像顯示 35 2.2.2 選框工具組 36 2.2.3 畫筆工具組 36 2.2.4 鋼筆工具組 37 2.2.5 形狀工具組 38 2.2.6 取樣、填充顏色 39 2.2.7 漸變工具 40 2.3 文本的創建與編輯 40 2.3.1 案例解析：製作電商Banner 40 2.3.2 認識文本工具 42 2.3.3 創建文本 42 2.3.4 編輯文本 43 2.4 蒙版和通道 44 2.4.1 案例解析：製作圓角方形頭像 44 2.4.2 認識通道 45 2.4.3 認識蒙版 45 2.5 圖像的色彩調整 46 2.5.1 案例解析：提取圖像線稿 46 2.5.2 色階 47 2.5.3 曲線 47 2.5.4 色相/飽和度 48 2.5.5 色彩平衡 49 2.5.6 去色 49 2.6 圖像的特效應用 50 2.6.1 案例解析：製作動感飛馳效果 50 2.6.2 圖層樣式 50 2.6.3 獨立濾鏡組 51 2.6.4 特效濾鏡組 53 課堂實戰 製作平鋪背景效果 55 課後練習 製作千圖成像效果 57 拓展賞析 傳世名畫：清明上河圖 58 第3章 圖形元素的設計技能 3.1 基礎知識詳解 60 3.1.1 案例解析：快速調整圖像尺寸 60 3.1.2 認識工作界面 61 3.1.3 畫板的尺寸調整 63 3.2 基礎圖形的繪制與填充 63 3.2.1 案例解析：繪制卡通雲朵 63 3.2.2 繪制線段和網格 64 3.2.3 繪制幾何形狀 65 3.2.4 構建新的形狀 67 3.2.5 設置填充與描邊 68 3.3 路徑的繪制與編輯 72 3.3.1 案例解析：繪制手賬本簡筆畫 72 3.3.2 繪制路徑 73 3.3.3 調整路徑 74 3.3.4 編輯路徑 75 3.4 對象的選擇與變換 76 3.4.1 案例解析：製作流動的山脈 76 3.4.2 對象的選擇 78 3.4.3 對象的對齊和分佈 79 3.4.4 對象的排列 80 3.4.5   對象的變換 80 3.4.6   對象的高級編輯 82 3.5 文本的創建與編輯 84 3.5.1 案例解析：製作網站Banner 84 3.5.2 創建文本 87 3.5.3 編輯文本 88 3.6 特效與樣式的添加 89 3.6.1 案例解析：製作多重文字描邊效果 89 3.6.2 Illustrator效果 91 3.6.3 Photoshop效果 91 3.6.4 外觀與圖形樣式 92 課堂實戰 製作拆分文字效果 94 課後練習 製作立體按鈕 95 拓展賞析 中國的水墨動畫 96 第4章 產品設計交互工具 4.1 認識MasterGo  98 4.1.1 MasterGo工作界面 99 4.1.2 視圖選項調整 100 4.1.3 標尺和參考線 101 4.2 MasterGo基礎工具 103 4.2.1 案例解析：繪制半圓效果 103 4.2.2 選擇工具 104 4.2.3 容器工具 105 4.2.4 形狀工具 106 4.2.5 鋼筆工具 107 4.2.6 文本工具 108 4.3 MasterGo組件和樣式 108 4.3.1 案例解析：應用預設樣式 108 4.3.2 創建組件 110 4.3.3 應用預設組件 111 4.3.4 創建樣式 111 4.4 MasterGo原型交互 114 4.4.1 案例解析：原型內容的固定與滾動 114 4.4.2 瞭解原型模式 116 4.4.3 交互—觸發和動作 117 4.4.4 交互—動畫和效果 118 4.4.5 溢出行為 119 4.4.6 約束設置 119 4.4.7 原型演示 119 4.5 MasterGo協同評論 120 4.5.1 文件分享 120 4.5.2 瞭解標註模式 121 4.5.3 評論工具 122 4.6 MasterGo切圖和導出 123 4.6.1 創建切圖 123 4.6.2 導出預設 123 4.6.3 導出Sketch格式 124 課堂實戰 製作網站登錄界面 125 課後練習 製作App首頁界面 127 拓展賞析 中國喜慶的裝飾藝術：年畫 128 第5章 組件與圖標設計 5.1  UI的控件、組件 130 5.1.1 UI控件詳解 130 5.1.2 UI組件詳解 131 5.2 按鈕的設計 133 5.2.1 按鈕的組成 133 5.2.2 按鈕的設計類型 133 5.2.3 按鈕的設計風格 136 5.3 圖標的設計 137 5.3.1 圖標的類型 137 5.3.2 圖標的設計風格 138 5.3.3 圖標的設計規範 140 課堂實戰 音樂應用圖標設計 143 課後練習 製作便簽圖標 148 拓展賞析 中國古代三大印花工藝 149 第6章 App界面設計 6.1 App常用界面類型 152 6.1.1 閃屏頁 152 6.1.2 引導頁 153 6.1.3 註冊登錄頁 154 6.1.4 空白頁 155 6.1.5 首頁 155 6.1.6 個人中心頁 157 6.2 App界面視覺設計 159 6.2.1 顏色規範 160 6.2.2 圖片規範 161 6.2.3 邊距和間距 161 6.3 ios設計規範指南 162 6.3.1 界面尺寸 162 6.3.2 文字規範 164 6.4 Android設計規範指南 165 6.4.1 界面尺寸 165 6.4.2 文字規範 166 課堂實戰 音樂App界面設計 167 課後練習 製作App首頁界面 174 拓展賞析 中國傳統玩具 175 第7章 網頁界面設計 7.1 網頁常用界面類型 178 7.1.1 首頁 178 7.1.2 欄目頁 179 7.1.3 詳情頁 179 7.1.4 專題頁 180 7.2 網頁界面設計詳解 181 7.2.1 網頁設計原則 182 7.2.2 網頁的界面佈局 184 7.3 網頁界面設計規範 187 7.3.1 界面尺寸 188 7.3.2 字體規範 189 7.3.3 顏色規範 190 7.3.4 圖片規範 190 課堂實戰 音樂網站設計 191 課後練習 製作家居網站界面 201 拓展賞析 中國四大國粹 204 第8章 軟件界面設計 8.1 軟件界面常用類型 206 8.1.1 啟動頁 206 8.1.2 著陸頁 206 8.1.3 集合頁 207 8.1.4 主/細節頁 207 8.1.5 詳細信息頁 207 8.1.6 表單頁 208 8.2 軟件界面設計詳解 208 8.2.1 軟件界面設計原則 209 8.2.2 軟件界面框架類型 210 8.3 軟件界面設計規範 212 8.3.1 界面尺寸 212 8.3.2 字體規範 213 8.3.3 圖標規範 215 課堂實戰 音樂軟件界面設計 215 課後練習 製作視覺設計平臺軟件界面 226 拓展賞析 中國名山 227 參考文獻 228