App草圖+流程圖+交互原型設(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 頁(yè)面設(shè)置 ??????????????????????????????????????????????????????????????????????????36
2．3．1 頁(yè)面基本屬性 ??????????????????????????????????????????????????????????????????????．36
實(shí)戰(zhàn)練習(xí)01――使用“頁(yè)面”面板 ??????????????????????????????．36
2．3．2 頁(yè)面自適應(yīng) ????????????????????????????????????????????????????????????????????????????．39
2．4 使用Axure RP 9的元件庫(kù) ??????????????????????????????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)入元件庫(kù) ??????????????????????????????????????????????????????????．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è)置歡迎頁(yè)面 ??????．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 頁(yè)面函數(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 說(shuō)明書 ??????????????????????????????????????????????????????．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 了解主頁(yè)屏幕 ??????????????????????????????????????????????????????????????????????．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 鏈接頁(yè)面 ??????????????????????????????????????????????????????????????????????????????．101
3．5．2 設(shè)置原型首屏內(nèi)容 ??????????????????????????????????????????????????????．102
3．5．3 使用語(yǔ)音命令創(chuàng)建原型 ??????????????????????????????????????????．102
3．6 使用Adobe XD導(dǎo)出文檔 ????????????????????????????．103
3．7 本章小結(jié) ????????????????????????????????????????????????????????????????????．104
第4章　設(shè)計(jì)制作PC端網(wǎng)頁(yè)產(chǎn)品原型
4．1 PC端網(wǎng)頁(yè)產(chǎn)品原型概述 ????????????????????????????．105
4．2 PC端網(wǎng)頁(yè)設(shè)計(jì)規(guī)范 ????????????????????????????????????????．106
4．2．1 網(wǎng)頁(yè)尺寸設(shè)計(jì)規(guī)范 ??????????????????????????????????????????????????????．106
4．2．2 網(wǎng)頁(yè)文本設(shè)計(jì)規(guī)范 ??????????????????????????????????????????????????????．109
4．2．3 網(wǎng)頁(yè)圖像選擇規(guī)范 ??????????????????????????????????????????????????????????116
實(shí)戰(zhàn)練習(xí)01――制作網(wǎng)頁(yè)低保真原型 ????????????????????????117
4．3 PC端網(wǎng)頁(yè)配色設(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)頁(yè)布局方式 ????????????????????????????????????????．128
4．4．1 布局方式 ??????????????????????????????????????????????????????????????????????????????．128
4．4．2 分列布局 ??????????????????????????????????????????????????????????????????????????????．131
4．4．3 網(wǎng)頁(yè)構(gòu)圖 ??????????????????????????????????????????????????????????????????????????????．133
實(shí)戰(zhàn)練習(xí)02――制作網(wǎng)頁(yè)高保真原型 ????????????????????．133
4．5 PC端網(wǎng)頁(yè)交互效果 ????????????????????????????????????????．136
4．5．1 頁(yè)面的鏈接效果 ????????????????????????????????????????????????????????????．136
4．5．2 文字的描述效果 ????????????????????????????????????????????????????????????．139
實(shí)戰(zhàn)練習(xí)03――制作網(wǎng)頁(yè)交互效果 ??????????????????????????．144
4．6 PC端網(wǎng)頁(yè)適配??????????????????????????????????????????????????????．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 繪制頁(yè)面 ??????????????????????????????????????????????????????????????????????????????．157
5．2．4 輸出原型 ??????????????????????????????????????????????????????????????????????????????．158
5．3 Android系統(tǒng)的設(shè)計(jì)規(guī)范 ????????????????????????????．159
5．3．1 設(shè)計(jì)單位 ??????????????????????????????????????????????????????????????????????????????．159
5．3．2 頁(yè)面尺寸 ??????????????????????????????????????????????????????????????????????????????．160
5．3．3 組件尺寸 ??????????????????????????????????????????????????????????????????????????????．161
5．3．4 圖標(biāo)尺寸 ??????????????????????????????????????????????????????????????????????????????．161
5．3．5 間距規(guī)范 ??????????????????????????????????????????????????????????????????????????????．163
實(shí)戰(zhàn)練習(xí)01――設(shè)計(jì)制作App 頁(yè)面的低
保真原型 ??????????????????????????????????????????????????????????????????????????????????????????????．164
5．4 Android系統(tǒng)的文字規(guī)范 ????????????????????????????．168
5．5 Android系統(tǒng)的頁(yè)面布局 ????????????????????????????．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 頁(yè)面的交互效果 ??．178
5．7 Android系統(tǒng)的頁(yè)面適配 ????????????????????????????．185
5．7．1 適配方式 ??????????????????????????????????????????????????????????????????????????????．185
5．7．2 整體頁(yè)面適配 ??????????????????????????????????????????????????????????????????．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)的原型頁(yè)面 ????????????????????????????．188
6．1．1 確定設(shè)計(jì)尺寸 ??????????????????????????????????????????????????????????????????．188
6．1．2 指定頁(yè)面布局 ??????????????????????????????????????????????????????????????????．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)的頁(yè)面適配 ????????????????????????????????????????．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