App草圖+流程圖+交互原型設計教程

第1章　了解網站產品原型
1．1 互聯(lián)網產品開發(fā)流程 ????????????????????????????????????????????????1
1．1．1 需求分析 ????????????????????????????????????????????????????????????????????????????????????．1
1．1．2 交互設計 ????????????????????????????????????????????????????????????????????????????????????．2
1．1．3 視覺設計 ????????????????????????????????????????????????????????????????????????????????????．5
1．1．4 技術開發(fā) ????????????????????????????????????????????????????????????????????????????????????．6
1．1．5 發(fā)布維護 ????????????????????????????????????????????????????????????????????????????????????．6
1．2 互聯(lián)網產品開發(fā)人員配置 ????????????????????????????????????7
1．2．1 產品經理 ????????????????????????????????????????????????????????????????????????????????????．7
1．2．2 產品助理 ????????????????????????????????????????????????????????????????????????????????????．8
1．2．3 設計師 ??????????????????????????????????????????????????????????????????????????????????????????．8
1．2．4 產品運營 ????????????????????????????????????????????????????????????????????????????????????．9
1．2．5 產品開發(fā) ????????????????????????????????????????????????????????????????????????????????????．9
1．2．6 市場營銷 ??????????????????????????????????????????????????????????????????????????????????．10
1．3 互聯(lián)網產品原型的應用 ????????????????????????????????????．11
1．3．1 互聯(lián)網產品原型設計 ????????????????????????????????????????????????????．11
1．3．2 互聯(lián)網產品原型的作用 ??????????????????????????????????????????????．12
1．3．3 互聯(lián)網產品原型的重要性 ????????????????????????????????????????．13
1．3．4 互聯(lián)網產品原型的設計技巧 ??????????????????????????????????．13
1．4 互聯(lián)網產品原型的設計流程 ??????????????????????????14
1．4．1 確定整體結構 ??????????????????????????????????????????????????????????????????????．14
1．4．2 確定排版布局 ??????????????????????????????????????????????????????????????????????．15
1．4．3 確定功能模塊 ??????????????????????????????????????????????????????????????????????．16
1．4．4 設計制作原型稿 ????????????????????????????????????????????????????????????????．17
1．4．5 設計交互效果 ??????????????????????????????????????????????????????????????????????．18
1．4．6 調試交互效果 ??????????????????????????????????????????????????????????????????????．20
1．5 了解網站產品原型的分類 ????????????????????????????????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 本章小結 ??????????????????????????????????????????????????????????????????????????29
第2章　了解Axure RP 9
2．1 初識Axure RP 9 ??????????????????????????????????????????????????????30
2．1．1 關于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ù)設置關鍵字搜索 ??．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 本章小結 ??????????????????????????????????????????????????????????????????????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 工作界面結構 ??????????????????????????????????????????????????????????????????????．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 蒙版技術 ??????????????????????????????????????????????????????????????????????????????????．98
實戰(zhàn)練習02――使用蒙版遮罩圖像 ??????????????????????????????．98
3．4．6 設置描邊、填充、投影和模糊 ????????????????????????．100
3．5 使用Adobe XD完成原型 ????????????????????????????．101
3．5．1 鏈接頁面 ??????????????????????????????????????????????????????????????????????????????．101
3．5．2 設置原型首屏內容 ??????????????????????????????????????????????????????．102
3．5．3 使用語音命令創(chuàng)建原型 ??????????????????????????????????????????．102
3．6 使用Adobe XD導出文檔 ????????????????????????????．103
3．7 本章小結 ????????????????????????????????????????????????????????????????????．104
第4章　設計制作PC端網頁產品原型
4．1 PC端網頁產品原型概述 ????????????????????????????．105
4．2 PC端網頁設計規(guī)范 ????????????????????????????????????????．106
4．2．1 網頁尺寸設計規(guī)范 ??????????????????????????????????????????????????????．106
4．2．2 網頁文本設計規(guī)范 ??????????????????????????????????????????????????????．109
4．2．3 網頁圖像選擇規(guī)范 ??????????????????????????????????????????????????????????116
實戰(zhàn)練習01――制作網頁低保真原型 ????????????????????????117
4．3 PC端網頁配色設計 ????????????????????????????????????????．121
4．3．1 明確主色 ??????????????????????????????????????????????????????????????????????????????．121
4．3．2 明確背景色 ????????????????????????????????????????????????????????????????????????．122
4．3．3 確定輔色 ??????????????????????????????????????????????????????????????????????????????．124
4．3．4 協(xié)調點綴色 ????????????????????????????????????????????????????????????????????????．125
4．3．5 搭配字體色 ????????????????????????????????????????????????????????????????????????．127
4．4 PC端網頁布局方式 ????????????????????????????????????????．128
4．4．1 布局方式 ??????????????????????????????????????????????????????????????????????????????．128
4．4．2 分列布局 ??????????????????????????????????????????????????????????????????????????????．131
4．4．3 網頁構圖 ??????????????????????????????????????????????????????????????????????????????．133
實戰(zhàn)練習02――制作網頁高保真原型 ????????????????????．133
4．5 PC端網頁交互效果 ????????????????????????????????????????．136
4．5．1 頁面的鏈接效果 ????????????????????????????????????????????????????????????．136
4．5．2 文字的描述效果 ????????????????????????????????????????????????????????????．139
實戰(zhàn)練習03――制作網頁交互效果 ??????????????????????????．144
4．6 PC端網頁適配??????????????????????????????????????????????????????．149
4．6．1 適配的方式方法 ????????????????????????????????????????????????????????????．150
4．6．2 適配時需要注意的點 ????????????????????????????????????????????????．150
4．7 本章小結 ????????????????????????????????????????????????????????????????????．150
第5章　設計制作Android系統(tǒng)產品原型
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 本章小結 ????????????????????????????????????????????????????????????????????．187
第6章　設計制作iOS系統(tǒng)產品原型
6．1 設計iOS系統(tǒng)的原型頁面 ????????????????????????????．188
6．1．1 確定設計尺寸 ??????????????????????????????????????????????????????????????????．188
6．1．2 指定頁面布局 ??????????????????????????????????????????????????????????????????．188
6．1．3 定義內容區(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 內容間距 ????????????????????????????????????????????????????????????????????????????????．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 本章小結 ????????????????????????????????????????????????????????????????????．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 本章小結 ????????????????????????????????????????????????????????????????????．230