網(wǎng)頁UI設(shè)計

項目一 頁面草圖繪制 1
任務(wù)1 手繪草圖 4
1.1.1 網(wǎng)頁布局的基本知識 5
1.1.2 響應(yīng)式網(wǎng)頁布局的設(shè)計特點 8
1.1.3 手繪草圖的方法 14
任務(wù)2 手繪流程圖 21
1.2.1 繪制流程圖 21
1.2.2 POP軟件 23
項目二 頁面原型設(shè)計 28
任務(wù)1 認識Axure軟件 29
2.1.1 軟件安裝 29
2.1.2 軟件的工作環(huán)境 34
2.1.3 基本元件 34
2.1.4 元件的樣式與屬性 35
任務(wù)2 使用Axure軟件繪制頁面原型 40
2.2.1 自適應(yīng)視圖 41
2.2.2 柵格系統(tǒng) 42
2.2.3 元件使用 48
任務(wù)3 使用Axure軟件進行交互設(shè)計 71
2.3.1 交互樣式設(shè)置 71
2.3.2 動態(tài)面板 73
2.3.3 組合/取消組合元件 74
2.3.4 元件交互的使用―顯示/隱藏 76
2.3.5 變量 78
2.3.6 內(nèi)聯(lián)框架 78
任務(wù)4 使用Axure軟件進行流程設(shè)計 117
2.4.1 流程圖組件 117
2.4.2 母版 120
任務(wù)5 發(fā)布原型設(shè)計作品 124
2.5.1 快速預(yù)覽查看原型 125
2.5.2 生成HTML文件查看原型 125
2.5.3 Web字體設(shè)置 126
2.5.4 移動設(shè)備設(shè)置 127
2.5.5 發(fā)布原型到AxShare 127
項目三 網(wǎng)頁頁面設(shè)計 137
任務(wù)1 移動端頁面設(shè)計 138
3.1.1 網(wǎng)頁設(shè)計標(biāo)準尺寸 138
3.1.2 排版構(gòu)成 143
3.1.3 色彩構(gòu)成 146
3.1.4 扁平化概念 147
任務(wù)2 平板電腦端頁面設(shè)計 182
版式構(gòu)成 182
任務(wù)3 計算機端及寬屏頁面設(shè)計 194
版面設(shè)計 194
任務(wù)4 頁面交互設(shè)計 211
簡析交互設(shè)計 211
任務(wù)5 產(chǎn)品匯報與展示 220
網(wǎng)頁效果圖展示 220
項目四 App產(chǎn)品原型設(shè)計 224
任務(wù)1 使用Axure軟件繪制App產(chǎn)品線框圖原型 225
4.1.1 App產(chǎn)品與Web產(chǎn)品 226
4.1.2 App產(chǎn)品常見UI組件 227
4.1.3 App產(chǎn)品交互設(shè)計注意事項 231
任務(wù)2 使用Photoshop軟件制作App產(chǎn)品效果圖和應(yīng)用圖標(biāo)原型 234
任務(wù)3 使用Axure軟件制作App產(chǎn)品高保真視覺原型 243