|
關(guān)于我們
 書單推薦 新書推薦 |
App草圖+流程圖+交互原型設計教程 
定 價：89.8 元 叢書名：UI設計從業(yè)必讀
9 7 3 8 9 7 4 1 4 2 7 1 8 讀者對象:ui設計從業(yè)人員，學生 
? 該系列圖書通過采用軟件知識點+行業(yè)基礎+實戰(zhàn)的方式講解。? 案例與基礎知識相融合，快速帶領用戶掌握網(wǎng)站UI產(chǎn)品原型設計制作方法和技巧? 分別使用流行的Axure和Adobe XD完成網(wǎng)站產(chǎn)品的制作，與實際工作接軌? 在每章的最后為讀者提供一個操作案例，供讀者練習使用。? 全書所有案例配教學視頻，有助讀者學習。? 全書的案例極具針對性，便于讀者查找學習。
劉源，男，從事App項目開發(fā)多年，有豐富的策劃與制作能力。能熟練完成草圖、流程圖和高保真原型的制作。對APP設計中的原型策劃有獨特的見解。曾參與多款APP項目的研發(fā)與制作。能夠熟練掌握Axure RP、Photoshop、Adobe XD等設計軟件的使用。
第1章 了解網(wǎng)站產(chǎn)品原型
1.1 互聯(lián)網(wǎng)產(chǎn)品開發(fā)流程 ························1 1.1.1 需求分析 ··········································.1 1.1.2 交互設計 ··········································.2 1.1.3 視覺設計 ··········································.5 1.1.4 技術(shù)開發(fā) ··········································.6 1.1.5 發(fā)布維護 ··········································.6 1.2 互聯(lián)網(wǎng)產(chǎn)品開發(fā)人員配置 ··················7 1.2.1 產(chǎn)品經(jīng)理 ··········································.7 1.2.2 產(chǎn)品助理 ··········································.8 1.2.3 設計師 ·············································.8 1.2.4 產(chǎn)品運營 ··········································.9 1.2.5 產(chǎn)品開發(fā) ··········································.9 1.2.6 市場營銷 ·········································.10 1.3 互聯(lián)網(wǎng)產(chǎn)品原型的應用 ··················.11 1.3.1 互聯(lián)網(wǎng)產(chǎn)品原型設計 ··························.11 1.3.2 互聯(lián)網(wǎng)產(chǎn)品原型的作用 ·······················.12 1.3.3 互聯(lián)網(wǎng)產(chǎn)品原型的重要性 ····················.13 1.3.4 互聯(lián)網(wǎng)產(chǎn)品原型的設計技巧 ·················.13 1.4 互聯(lián)網(wǎng)產(chǎn)品原型的設計流程 ·············14 1.4.1 確定整體結(jié)構(gòu) ···································.14 1.4.2 確定排版布局 ···································.15 1.4.3 確定功能模塊 ···································.16 1.4.4 設計制作原型稿 ································.17 1.4.5 設計交互效果 ···································.18 1.4.6 調(diào)試交互效果 ···································.20 1.5 了解網(wǎng)站產(chǎn)品原型的分類 ················20 1.5.1 低保真原型 ······································.20 1.5.2 高保真原型 ······································.22 1.5.3 交互動畫原型 ···································.24 1.6 原型設計的常用工具 ······················26 1.6.1 Axure RP ·········································.27 1.6.2 Adobe XD ········································.27 1.6.3 墨刀 ···············································.28 1.7 本章小結(jié) ·····································29 第2章 了解Axure RP 9 2.1 初識Axure RP 9 ···························30 2.1.1 關(guān)于Axure RP 9 ································.30 2.1.2 軟件下載與安裝 ································.31 2.2 Axure RP 9的工作界面 ···················32 2.2.1 了解Axure RP 9 的工作界面 ················.33 2.2.2 自定義工具欄 ···································.35 2.3 頁面設置 ·····································36 2.3.1 頁面基本屬性 ···································.36 實戰(zhàn)練習01——使用“頁面”面板 ···············.36 2.3.2 頁面自適應 ······································.39 2.4 使用Axure RP 9的元件庫 ···············40 2.4.1 Default 元件 ·····································.40 2.4.2 Flow 元件 ········································.40 2.4.3 Icons 元件 ········································.40 2.4.4 使用“動態(tài)面板” ······························.41 實戰(zhàn)練習02——使用“動態(tài)面板”制作輪播圖片 ·.41 2.4.5 使用中繼器 ······································.45 實戰(zhàn)練習03——使用“中繼器”元件展示商品 ···.45 2.4.6 下載和導入元件庫 ·····························.48 2.5 Axure RP 9中的基本交互效果··········50 2.5.1 交互事件 ·········································.50 2.5.2 鏈接 ···············································.51 2.5.3 元件 ···············································.51 2.6 Axure RP 9中的高級交互效果··········51 2.6.1 設置條件 ·········································.52 2.6.2 添加變量 ·········································.52 實戰(zhàn)練習04——使用全局變量設置歡迎頁面 ···.53 2.6.3 使用表達式 ······································.56 2.7 使用函數(shù) ·····································57 2.7.1 中繼器/ 數(shù)據(jù)集 ································.58 2.7.2 元件函數(shù) ·········································.58 2.7.3 指針函數(shù) ·········································.59 2.7.4 窗口函數(shù) ·········································.59 實戰(zhàn)練習05——使用窗口函數(shù)顯示隱藏元件 ···.60 2.7.5 頁面函數(shù) ·········································.62 2.7.6 數(shù)字函數(shù) ·········································.62 2.7.7 字符串函數(shù) ······································.63 實戰(zhàn)練習06——使用字符串函數(shù)設置關(guān)鍵字搜索 ·.64 2.7.8 數(shù)學函數(shù) ·········································.68 2.7.9 時間函數(shù) ·········································.69 實戰(zhàn)練習07——使用時間函數(shù)顯示實時時間 ···.70 2.8 查看原型 ·····································73 2.8.1 快速預覽 ·········································.74 2.8.2 預覽選項 ·········································.74 2.8.3 生成HTML 文件 ·······························.75 2.8.4 生成Word 說明書 ···························.77 2.9 發(fā)布與測試 ··································78 2.10 本章小結(jié) ···································79 第3章 了解Adobe XD 3.1 Adobe XD的簡介 ··························80 3.1.1 初識Adobe XD ·································.80 3.1.2 下載和安裝Adobe XD ························.80 3.1.3 了解主頁屏幕 ···································.81 3.1.4 工作界面結(jié)構(gòu) ···································.82 3.1.5 使用資源 ·········································.83 3.1.6 使用輔助工具 ···································.84 3.2 Adobe XD的基礎工作流程 ··············86 3.3 Adobe XD的基礎操作 ····················86 3.3.1 新建、打開和存儲文件 ·······················.86 3.3.2 使用畫板 ·········································.87 實戰(zhàn)練習01——新建和存儲Adobe XD 文件 ····.88 3.3.3 導入對象 ·········································.89 3.3.4 創(chuàng)建重復元素 ···································.90 3.3.5 對象的操作 ······································.91 3.4 Adobe XD的基本工具 ····················95 3.4.1 繪圖工具 ·········································.95 3.4.2 文本工具 ·········································.95 3.4.3 使用圖層 ·········································.96 3.4.4 使用布爾運算 ···································.97 3.4.5 蒙版技術(shù) ·········································.98 實戰(zhàn)練習02——使用蒙版遮罩圖像 ···············.98 3.4.6 設置描邊、填充、投影和模糊 ············.100 3.5 使用Adobe XD完成原型 ··············.101 3.5.1 鏈接頁面 ·······································.101 3.5.2 設置原型首屏內(nèi)容 ···························.102 3.5.3 使用語音命令創(chuàng)建原型 ·····················.102 3.6 使用Adobe XD導出文檔 ··············.103 3.7 本章小結(jié) ··································.104 第4章 設計制作PC端網(wǎng)頁產(chǎn)品原型 4.1 PC端網(wǎng)頁產(chǎn)品原型概述 ··············.105 4.2 PC端網(wǎng)頁設計規(guī)范 ····················.106 4.2.1 網(wǎng)頁尺寸設計規(guī)范 ···························.106 4.2.2 網(wǎng)頁文本設計規(guī)范 ···························.109 4.2.3 網(wǎng)頁圖像選擇規(guī)范 ·····························116 實戰(zhàn)練習01——制作網(wǎng)頁低保真原型 ············117 4.3 PC端網(wǎng)頁配色設計 ····················.121 4.3.1 明確主色 ·······································.121 4.3.2 明確背景色 ····································.122 4.3.3 確定輔色 ·······································.124 4.3.4 協(xié)調(diào)點綴色 ····································.125 4.3.5 搭配字體色 ····································.127 4.4 PC端網(wǎng)頁布局方式 ····················.128 4.4.1 布局方式 ·······································.128 4.4.2 分列布局 ·······································.131 4.4.3 網(wǎng)頁構(gòu)圖 ·······································.133 實戰(zhàn)練習02——制作網(wǎng)頁高保真原型 ··········.133 4.5 PC端網(wǎng)頁交互效果 ····················.136 4.5.1 頁面的鏈接效果 ······························.136 4.5.2 文字的描述效果 ······························.139 實戰(zhàn)練習03——制作網(wǎng)頁交互效果 ·············.144 4.6 PC端網(wǎng)頁適配···························.149 4.6.1 適配的方式方法 ······························.150 4.6.2 適配時需要注意的點 ························.150 4.7 本章小結(jié) ··································.150 第5章 設計制作Android系統(tǒng)產(chǎn)品原型 5.1 Android系統(tǒng)的原型設計 ··············.151 5.1.1 Android 系統(tǒng)的碎片化 ······················.151 5.1.2 Android 系統(tǒng)的原型優(yōu)勢 ···················.152 5.2 設計Android系統(tǒng)原型的流程 ········.156 5.2.1 確定框架 ·······································.156 5.2.2 制定全局 ·······································.157 5.2.3 繪制頁面 ·······································.157 5.2.4 輸出原型 ·······································.158 5.3 Android系統(tǒng)的設計規(guī)范 ··············.159 5.3.1 設計單位 ·······································.159 5.3.2 頁面尺寸 ·······································.160 5.3.3 組件尺寸 ·······································.161 5.3.4 圖標尺寸 ·······································.161 5.3.5 間距規(guī)范 ·······································.163 實戰(zhàn)練習01——設計制作App 頁面的低 保真原型 ···············································.164 5.4 Android系統(tǒng)的文字規(guī)范 ··············.168 5.5 Android系統(tǒng)的頁面布局 ··············.169 5.5.1 列表式布局 ····································.169 5.5.2 陳列式布局 ····································.170 5.5.3 宮格式布局 ····································.170 5.5.4 卡片式布局 ····································.171 實戰(zhàn)練習02——設計制作App 的高保真原型 ··.171 5.6 Android系統(tǒng)的版式設計 ··············.177 實戰(zhàn)練習03——設計制作App 頁面的交互效果 ·.178 5.7 Android系統(tǒng)的頁面適配 ··············.185 5.7.1 適配方式 ·······································.185 5.7.2 整體頁面適配 ·································.185 5.7.3 圖標適配 ·······································.185 5.7.4 文本適配 ·······································.186 5.7.5 圖片適配 ·······································.186 5.8 本章小結(jié) ··································.187 第6章 設計制作iOS系統(tǒng)產(chǎn)品原型 6.1 設計iOS系統(tǒng)的原型頁面 ··············.188 6.1.1 確定設計尺寸 ·································.188 6.1.2 指定頁面布局 ·································.188 6.1.3 定義內(nèi)容區(qū)域 ·································.189 6.1.4 遵循設計規(guī)范 ·································.189 6.2 iOS系統(tǒng)設計規(guī)范 ·······················.190 6.2.1 設計單位 ·······································.190 6.2.2 設計尺寸 ·······································.190 6.2.3 組件尺寸 ·······································.191 6.3 iOS系統(tǒng)的文字規(guī)范 ····················.191 6.3.1 字體 ·············································.192 6.3.2 字號 ·············································.192 6.3.3 字體顏色 ·······································.193 6.3.4 字重 ·············································.193 實戰(zhàn)練習01——設計iOS 系統(tǒng)App 的低 保真原型 ···············································.194 6.4 iOS系統(tǒng)的圖標設計規(guī)范 ··············.198 6.5 iOS系統(tǒng)的邊距設計規(guī)范 ··············.200 6.5.1 全局邊距 ········································.200 6.5.2 卡片邊距 ········································.201 6.5.3 內(nèi)容間距 ········································.201 實戰(zhàn)練習02——設計iOS 系統(tǒng)App 的高 保真原型 ···············································.202 6.6 iOS系統(tǒng)的圖片設計規(guī)范 ··············.206 6.6.1 圖片比例 ·······································.206 6.6.2 圖片格式 ·······································.208 實戰(zhàn)練習03——設計iOS 系統(tǒng)App 的 交互效果 ···············································.208 6.7 iOS系統(tǒng)的頁面適配 ····················.212 6.7.1 向下適配 ·······································.213 6.7.2 向上適配 ·······································.214 6.8 本章小結(jié) ··································.216 第7章 了解標注與輸出 7.1 Android系統(tǒng)界面的輸出 ··············.217 7.1.1 Android 系統(tǒng)界面標注 ····················.217 實戰(zhàn)練習01——使用PxCook 標注效果圖 ·····.218 7.1.2 Android 系統(tǒng)界面切圖 ····················.219 7.2 iOS系統(tǒng)界面的輸出 ···················.224 7.2.1 iOS 系統(tǒng)界面標注 ··························.224 7.2.2 iOS 系統(tǒng)界面切圖 ··························.226 實戰(zhàn)練習02——使用Adobe XD 導出資源 ·····.228 7.3 項目輸出 ··································.229 7.4 本章小結(jié) ··································.230
你還可能感興趣
我要評論
|
