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