UI設計
劉田珦,鄧慧琴
- 出版商: 電子工業
- 出版日期: 2024-02-01
- 定價: $330
- 售價: 8.5 折 $281
- 語言: 簡體中文
- 頁數: 224
- ISBN: 7121473976
- ISBN-13: 9787121473975
下單後立即進貨 (約4週~6週)
相關主題
商品描述
本書採用理論與實踐相結合的方式,循序漸進地講解了與 UI 設計相關的知識和技術。 本書共 6 個項目,分別為 UI 設計基礎、圖標和按鈕設計、網頁 UI 設計、App 設計、軟件 UI 設計、網店 UI 設計。 全書內容詳略得當,並為重點內容配備了教學視頻,讀者通過掃描二維碼即可觀看。
目錄大綱
項目1 UI 設計基礎 …………………………………………………………………………… 001
1.1 學習情境 UI 設計介紹 …………………………………………………………… 002
1.1.1 UI 設計的概念 ……………………………………………………………… 002
1.1.2 設計類別 ……………………………………………………………………… 003
1.1.3 網頁 UI 設計和軟件 UI 設計 ………………………………………………… 004
1.2 學習情境 UI 設計的流程和軟件 ………………………………………………… 005
1.2.1 UI 設計的流程 ……………………………………………………………… 005
1.2.2 UI 設計的軟件 ……………………………………………………………… 005
1.2.3 UI 設計的原則 ……………………………………………………………… 008
1.3 學習情境 UI 的配色設計 ………………………………………………………… 010
1.3.1 色彩的基礎認識 ……………………………………………………………… 010
課堂案例1-1 製作網頁背景圖 …………………………………………………… 013
1.3.2 UI 的色彩搭配及作用 ……………………………………………………… 015
課堂案例1-2 製作網站首頁 ……………………………………………………… 019
1.3.3 網頁 UI 設計配色方法 ……………………………………………………… 023
課後拓展———製作數碼產品網站頁面導航 ……………………………………………… 029
項目2 圖標和按鈕設計 ……………………………………………………………………… 035
2.1 學習情境 圖標和按鈕介紹………………………………………………………… 036
2.1.1 圖標和按鈕的起源 …………………………………………………………… 036
2.1.2 圖標的分類 …………………………………………………………………… 037
課堂案例2-1 製作房屋圖標 ……………………………………………………… 039
2.2 學習情境 圖標設計………………………………………………………………… 040
2.2.1 圖標的特徵 …………………………………………………………………… 040
2.2.2 圖標的常用格式 ……………………………………………………………… 041
2.2.3 圖標的設計原則 ……………………………………………………………… 042
課堂案例2-2 製作銀行卡圖標 …………………………………………………… 044
2.3 學習情境 軟件按鈕設計…………………………………………………………… 046
2.3.1 軟件按鈕的特徵 ……………………………………………………………… 046
2.3.2 軟件按鈕的設計原則 ………………………………………………………… 046
課堂案例2-3 製作軟件按鈕 ……………………………………………………… 048
2.4 學習情境 網頁按鈕的設計規則與作用…………………………………………… 053
2.4.1 網頁按鈕的設計規則 ………………………………………………………… 053
2.4.2 常見的網頁按鈕類型 ………………………………………………………… 055
2.4.3 網頁按鈕的特徵 ……………………………………………………………… 056
2.4.4 網頁按鈕的作用 ……………………………………………………………… 057
課堂案例2-4 製作網頁中的“開始”按鈕 ………………………………………… 059
2.5 學習情境 手機游戲按鈕設計……………………………………………………… 061
2.5.1 單選按鈕的特徵 ……………………………………………………………… 061
2.5.2 滑塊按鈕的特徵 ……………………………………………………………… 062
2.5.3 游戲按鈕的視覺表現 ………………………………………………………… 063
課堂案例2-5 製作游戲按鈕 ……………………………………………………… 063
課後拓展———製作電源按鈕 ……………………………………………………………… 067
項目3 網頁 UI 設計…………………………………………………………………………… 071
3.1 學習情境 網頁 UI 設計介紹 ……………………………………………………… 072
3.1.1 網頁 UI 設計的發展 ………………………………………………………… 072
3.1.2 網頁 UI 設計的基本要素 …………………………………………………… 072
3.2 學習情境 網頁 Logo 與 Logo 設計 ………………………………………………… 074
3.2.1 網頁 Logo …………………………………………………………………… 074
3.2.2 網頁 Logo 設計的方法 ……………………………………………………… 075
課堂案例3-1 製作“抖音”的 Logo ……………………………………………… 077
3.3 學習情境 網頁導航設計…………………………………………………………… 082
3.3.1 網頁導航設計的目標 ………………………………………………………… 082
3.3.2 網頁導航設計的原則 ………………………………………………………… 083
課堂案例3-2 製作網站導航頁 …………………………………………………… 083
3.4 學習情境 網頁佈局設計…………………………………………………………… 090
3.4.1 網頁佈局設計的原則 ………………………………………………………… 090
3.4.2 常見的佈局模式 ……………………………………………………………… 090
課堂案例3-3 製作家居網站首頁 ………………………………………………… 095
課後拓展———製作手機宣傳網頁 ………………………………………………………… 100
項目4 App 設計 ……………………………………………………………………………… 107
4.1 學習情境 App 設計介紹…………………………………………………………… 108
4.1.1 認識 App ……………………………………………………………………… 108
4.1.2 App 設計流程 ………………………………………………………………… 108
4.1.3 界面設計團隊 ………………………………………………………………… 110
4.2 學習情境 App 的元素……………………………………………………………… 111
4.2.1 App 的構成元素 ……………………………………………………………… 111
課堂案例4-1 製作 App 引導頁 …………………………………………………… 114
4.2.2 屏幕的概念 …………………………………………………………………… 117
課堂案例4-2 製作 App 首頁 ……………………………………………………… 119
4.3 學習情境 App 佈局設計…………………………………………………………… 125
4.3.1 App 佈局設計模式 …………………………………………………………… 125
課堂案例4-3 製作 App 登錄頁 …………………………………………………… 128
4.3.2 App 設計註意事項 …………………………………………………………… 133
課堂案例4-4 製作 App 列表頁 …………………………………………………… 134
4.4 學習情境 App 設計規範…………………………………………………………… 140
4.4.1 設計規範 ……………………………………………………………………… 140
課堂案例4-5 製作 App 詳情頁 …………………………………………………… 141
4.4.2 App 版式要求 ………………………………………………………………… 144
課堂案例4-6 製作 App 個人中心頁 ……………………………………………… 145
課後拓展———製作 App 扁平化照相機圖標……………………………………………… 149
項目5 軟件 UI 設計…………………………………………………………………………… 153
5.1 學習情境 軟件 UI 設計介紹 ……………………………………………………… 154
5.1.1 軟件 UI 設計基礎 …………………………………………………………… 154
5.1.2 軟件 UI 設計原則 …………………………………………………………… 155
5.1.3 軟件 UI 設計分類 …………………………………………………………… 156
5.1.4 軟件 UI 設計元素 …………………………………………………………… 158
課堂案例5-1 製作視頻播放頁 …………………………………………………… 159
5.2 學習情境 軟件界面設計…………………………………………………………… 168
5.2.1 開關和進度條設計 …………………………………………………………… 168
5.2.2 軟件菜單的設計原則 ………………………………………………………… 168
課堂案例5-2 製作軟件加載進度條 ……………………………………………… 170
5.3 學習情境 軟件啟動界面設計……………………………………………………… 178
5.3.1 軟件啟動界面的作用 ………………………………………………………… 178
5.3.2 軟件啟動界面的設計原則 …………………………………………………… 178
5.3.3 軟件啟動界面設計的註意事項 ……………………………………………… 179
課堂案例5-3 製作軟件啟動界面 ………………………………………………… 180
課後拓展———製作天氣軟件界面 ………………………………………………………… 185
項目6 網店 UI 設計…………………………………………………………………………… 191
6.1 學習情境 網店 UI 設計基本元素 ………………………………………………… 192
6.1.1 關於網店設計 ………………………………………………………………… 192
6.1.2 網店設計遵循的原則 ………………………………………………………… 192
課堂案例6-1 製作水果網店廣告 ………………………………………………… 194
6.2 學習情境 店鋪專題海報設計……………………………………………………… 198
6.2.1 海報的擺放位置 ……………………………………………………………… 198
6.2.2 海報設計的層次 ……………………………………………………………… 198
6.2.3 海報設計中文字的作用 ……………………………………………………… 199
課堂案例6-2 製作女裝網店海報 ………………………………………………… 200
課後拓展———製作店鋪專題海報 ………………………………………………………… 204
參考文獻 ………………………………………………………………………………………… 215
