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