創(chuàng)意UI Photoshop 玩轉移動UI新媒體廣告設計 第 1章 精工細作：開啟移動UI設計之門 9 1.1 新手入門：零基礎小白入門移動UI設計 10 1.1.1 認識移動UI設計 10 1.1.2 移動UI界面設計規(guī)范 11 1.1.3 移動UI設計的個性化 11 1.2 制作工具：移動UI設計常用的軟件 12 1.2.1 Photoshop：功能強大的圖像處理工具 12 1.2.2 Illustrator：工業(yè)標準矢量插畫的軟件 13 1.2.3 CorelDRAW：矢量圖形制作工具軟件 13 1.3 圖像格式：移動UI設計常用的圖像類型 14 1.3.1 JPEG格式：很靈活的格式 14 1.3.2 PNG格式：便攜式網絡圖形 14 1.3.3 GIF格式：最簡單的動畫 14 1.3.4 了解有損壓縮與無損壓縮 14 1.4 設計規(guī)范：了解移動設備的尺寸標準 14 1.4.1 iPhone的界面和圖標尺寸 15 1.4.2 iPad的界面和圖標尺寸 15 1.4.3 Android的界面和圖標尺寸 16 1.5 系統(tǒng)學習：移動UI設計的基本原則 17 1.5.1 設計風格體現(xiàn)UI功能 17 1.5.2 移動產品的UI要統(tǒng)一 19 1.5.3 UI設計符合用戶習慣 19 1.5.4 UI提供實用內容 20 1.5.5 UI的層次感清晰 21 1.5.6 考慮用戶的網絡環(huán)境 21 1.5.7 添加合適的用戶指引 22 第 2章 布局原則：帶來舒服的視覺效果 23 2.1 常見布局：簡單的移動UI排列布局形式 24 2.1.1 豎排列表布局 24 2.1.2 橫排方塊布局 24 2.1.3 九宮格布局 25 2.1.4 六宮格布局 26 2.1.5 大圖展示布局 26 2.2 信息布局：完美地呈現(xiàn)移動UI中的信息 27 2.2.1 熱門標簽布局 27 2.2.2 走馬燈式布局 27 2.2.3 磁貼設計布局 28 2.2.4 圖示式布局 28 2.2.5 幻燈片式布局 29 2.2.6 數(shù)據(jù)圖表布局 29 2.3 菜單布局：保證UI布局和體驗的一致性 30 2.3.1 彈出框布局 30 2.3.2 抽屜式布局 31 2.3.3 陳列館式布局 32 2.3.4 分段菜單式布局 33 2.3.5 點聚式布局 34 2.3.6 底部導航欄布局 34 2.3.7 超級菜單式布局 35 2.3.8 選項卡式布局 35 2.4布局模式：常用的響應式移動UI模式 36 2.4.1 固定布局：固定使用一種布局 36 2.4.2 流線布局：相對拉伸內容元素 37 2.4.3 等比縮放：相對位置等比縮放 37 2.4.4 拓展布局：根據(jù)屏幕大小顯示 38 2.4.5 分欄布局：改變界面布局結構 38 2.4.6 流動布局：改變界面元素位置 38 2.5 布局優(yōu)化：打造友好的UI用戶界面 39 2.5.1 完善細節(jié)設計 39 2.5.2 圖片瀑布流聚焦用戶 40 2.5.3 妙用圓形與多邊形 41 2.5.4 用通欄圖片作為背景 41 2.5.5 移動UI的布局原則 42 第3章 視覺交互：打造理想的用戶體驗 45 3.1 視覺設計：讓移動UI更加出色 46 3.1.1 色彩是重要的視覺因素 46 3.1.2 使用半透明的圖案效果 46 3.1.3 美觀是設計的首要要求 47 3.1.4 要把握好實用性的要點 47 3.1.5 高品質圖片呈現(xiàn)出美感 48 3.1.6 圖片不要隨意進行拉伸 49 3.1.7 對UI中的圖片進行美化 50 3.2 交互設計：進一步提升人機交流體驗 51 3.2.1 常見的UI手勢交互操作 51 3.2.2 增加真實感的循環(huán)動作 51 3.2.3 重復運用提高工作效率 52 3.2.4 關鍵動作制作動畫特效 53 3.2.5 連續(xù)動作描述運動軌跡 53 3.2.6 為App操作中斷做設計 54 3.2.7 夸張的想象力和創(chuàng)造力 54 3.3 反饋形式：用戶反饋功能的UI設計 55 3.3.1 氣泡狀提示 55 3.3.2 彈出框提示 56 3.3.3 按鈕的反饋 56 3.3.4 聲音的反饋 57 3.3.5 震動的反饋 57 3.3.6 動畫的反饋 57 3.3.7 反饋的位置 58 第4章 元素設計：創(chuàng)造精美的界面元素 61 4.1 組件解析：移動UI中的基本元素 62 4.1.1 常規(guī)按鈕元素 62 4.1.2 編輯輸入框元素 62 4.1.3 開關按鈕元素 63 4.1.4 網格式瀏覽元素 63 4.1.5 文本標簽元素 64 4.1.6 警告框元素 64 4.1.7 導航欄元素 65 4.1.8 頁面切換元素 65 4.1.9 進度條元素 65 4.2 設計要點：“簡練但不簡略”的規(guī)劃原則 66 4.2.1 好看的ico圖標更吸引人 66 4.2.2 簡約的UI更受青睞 66 4.2.3 分區(qū)和分組UI中的元素 67 4.2.4 換位思考解決用戶問題 67 4.2.5 加入感情呈現(xiàn)出人性化 68 4.2.6 做好UI的內容“裝修” 68 4.2.7 登錄界面做好用戶引導 69 4.2.8 UI基本元素的設計技巧 71 4.3 元素實戰(zhàn)：掌握常見UI元素的設計方法 75 4.3.1 下單按鈕設計 75 4.3.2 簡潔進度條設計 78 4.3.3 開關按鈕設計 81 第5章 字體設計：用戶為王的設計理念 83 5.1 字體解析：字體在移動UI中的應用 84 5.1.1 漢字的應用 84 5.1.2 字母的應用 84 5.1.3 數(shù)字的應用 85 5.1.4 符號的應用 85 5.2 文字設計：文字如何實現(xiàn)完美UI 86 5.2.1 保證字形設計的正確 86 5.2.2 采用統(tǒng)一的文字風格 86 5.2.3 注重文字內容和精神 87 5.2.4 文字內容要易于識別 87 5.2.5 文字的層次感要強烈 88 5.2.6 清晰地表達文字信息 89 5.2.7 把握好文字之間的間距 90 5.2.8 適當設置文字的色彩 91 5.3 字體實戰(zhàn)：掌握UI文字的設計方法 92 5.3.1 共享單車小程序文字設計 92 5.3.2 《青蛙旅行》游戲App文字設計 94 5.3.3 《今天頭條》資訊App文字設計 96 第6章 圖標設計：展現(xiàn)無限的創(chuàng)意火花 98 6.1 UI圖標：移動UI圖標最全設計技法 99 6.1.1 選取有代表性的獨立中文字體 99 6.1.2 使用英文、數(shù)字和特殊符號 101 6.1.3 提煉有特色的圖形作為圖標 103 6.1.4 運用游戲元素作為移動圖標 104 6.1.5 使用不同色彩進行組合設計 105 6.1.6 移動UI圖標的版式設計方法 106 6.2 App圖標：第三方應用圖標的設計實戰(zhàn) 107 6.2.1 卡通圖標設計 107 6.2.2 符號圖標設計 111 6.2.3 擬物化圖標設計 114 6.3 系統(tǒng)圖標：系統(tǒng)自帶圖標的設計實戰(zhàn) 116 6.3.1 日歷圖標設計 116 6.3.2 郵箱圖標設計 118 6.3.3 電話圖標設計 119 第7章 App設計：帶你領略移動UI的魅力 123 7.1 設計基礎：了解手機App UI設計 124 7.1.1 熟悉App的基本概念 124 7.1.2 了解App的主要類別 124 7.1.3 App的草圖設計方法 125 7.1.4 App的基本界面構成 126 7.1.5 App設計的用戶體驗 127 7.2 設計技巧：完整的App UI設計流程 128 7.2.1 流程1：需求目的 128 7.2.2 流程2：分析設計 128 7.2.3 流程3：調研驗證 128 7.2.4 流程4：方案改進 129 7.2.5 流程5：用戶反饋 129 7.3 登錄界面：漂亮的注冊和登錄頁設計 130 7.3.1 設計登錄界面背景效果 130 7.3.2 設計登錄界面主體效果 131 7.3.3 設計登錄界面整體效果 134 7.4 交互界面：體現(xiàn)移動App的特色功能 135 7.4.1 設計交互界面背景效果 136 7.4.2 設計交互界面整體效果 140 第8章 游戲UI：設計精美流暢的游戲界面 144 8.1 游戲UI：手機游戲App中的人機交互 145 8.1.1 了解什么是移動游戲UI設計 145 8.1.2 游戲UI設計必需的常用工具 146 8.1.3 移動游戲UI的角色設計 146 8.1.4 移動游戲UI的場景設計 147 8.1.5 移動游戲UI的色彩設計 150 8.2 休閑益智：掌握休閑類游戲App界面的 設計 151 8.2.1 設計休閑類游戲背景效果 152 8.2.2 設計休閑類游戲按鈕效果 153 8.2.3 設計休閑類游戲標題效果 156 8.3 對戰(zhàn)手游：掌握射擊類游戲App界面的 設計 158 8.3.1 設計射擊類游戲背景效果 158 8.3.2 設計射擊類游戲文字效果 160 8.3.3 設計射擊類游戲按鈕效果 161 第9章 微信UI：打造簡單高效的交互界面 164 9.1 公眾號：了解微信公眾號交互設計 165 9.1.1 公眾號頭像圖標設計 165 9.1.2 自動回復交互設計 165 9.1.3 信息反饋交互設計 166 9.1.4 底部菜單交互設計 167 9.1.5 公眾號圖文廣告設計 168 9.2 朋友圈：了解微信朋友圈交互設計 169 9.2.1 朋友圈的界面特色 169 9.2.2 朋友圈的功能結構 171 9.2.3 朋友圈的設計要點 172 9.3 引發(fā)關注：微信朋友圈相冊封面設計 174 9.3.1 設計朋友圈封面背景效果 174 9.3.2 設計朋友圈封面主體效果 176 9.3.3 設計朋友圈封面文字效果 178 9.4 吸引眼球：微信公眾號封面廣告設計 179 9.4.1 設計公眾號封面廣告背景效果 180 9.4.2 設計公眾號封面廣告主體效果 180 9.4.3 設計公眾號封面廣告整體效果 182 第 10章 小程序UI：創(chuàng)造真正的品牌價值 184 10.1 小程序UI：打造“爆款”小程序的設計規(guī)則 185 10.1.1 界面元素設計保持一致 185 10.1.2 功能設計滿足用戶需求 185 10.1.3 頭像設計要體現(xiàn)特色 186 10.1.4 用卡片流突出信息本身 186 10.1.5 考慮小程序的流暢性 187 10.1.6 適當構圖提高設計效率 188 10.1.7 使用空間和組塊更干凈 188 10.1.8 創(chuàng)造更有意思的微交互 189 10.1.9 精簡配色反映品牌特性 189 10.1.10 縮短用戶流程優(yōu)化體驗 190 10.2 界面精美：外賣小程序UI設計 191 10.2.1 設計外賣小程序UI主體效果 191 10.2.2 設計外賣小程序UI細節(jié)效果 193 10.2.3 設計外賣小程序UI文字效果 194 10.3 功能全面：攝影小程序UI設計 196 10.3.1 制作攝影小程序UI主體效果 196 10.3.2 制作攝影小程序UI導航按鈕 197 第 11章 H5場景UI：提升用戶瀏覽體驗 199 11.1 H5場景UI：H5界面的設計布局風格 200 11.1.1 采用統(tǒng)一的主色調設計風格 200 11.1.2 采用撞色多彩色的設計風格 200 11.1.3 采用可視化信息的表達方式 201 11.1.4 為H5打造一個專屬的風格 201 11.1.5 采用長頁面讓畫面更具張力 202 11.1.6 “一鏡到底”帶來更強的空間感 203 11.1.7 欣賞H5界面設計的創(chuàng)意玩法 204 11.2 品牌H5：汽車產品推廣H5界面設計 204 11.2.1 設計汽車產品界面背景效果 205 11.2.2 設計汽車產品界面框架效果 206 11.2.3 設計汽車產品文字修飾效果 208 11.3 招聘H5：企業(yè)招聘廣告H5界面設計 209 11.3.1 設計招聘H5背景界面效果 209 11.3.2 設計招聘H5標題邊框效果 211 第 12章 新媒體UI：打贏視覺營銷的戰(zhàn)役 213 12.1 新媒體UI：常見UI設計風格和技巧 214 12.1.1 設計風格要適合目標受眾 214 12.1.2 精心規(guī)劃簡約的設計風格 214 12.1.3 將用戶需要的內容放進去 215 12.1.4 讓用戶有很好的瀏覽體驗 215 12.1.5 采用單列布局更易于瀏覽 216 12.1.6 整合社交媒體的分享按鈕 217 12.2短視頻新媒體：視頻播放UI設計 217 12.2.1 設計短視頻新媒體界面背景效果 218 12.2.2 設計短視頻新媒體界面頭像效果 219 12.2.3 制作短視頻新媒體界面按鈕控件 221 12.3 音頻類新媒體：主播微課UI設計 224 12.3.1 制作音頻類新媒體界面主體效果 224 12.3.2 制作音頻類新媒體界面播放控件 227