本書包含四個項目，項目1 頁面草圖繪制：關注用戶需求,；項目2 頁面原型設計：關注布局、響應式頁面、頁面交互、流程；項目3 網頁頁面界面設計：關注色彩和細節(jié)；項目4 APP產品設計：關注對APP產品特征的設計把握。本教材是針對網頁UI原型設計師的崗位進行的課程開發(fā)，并融入世界技能大賽網站設計項目技術標準及模塊一的網頁界面設計相關知識，以世賽項目為引領，圍繞網頁和移動應用的界面和交互設計原型技術展開，引入現(xiàn)在流行的柵格系統(tǒng)和扁平化設計理念，同時結合學生對設計知識的學習遷移過程對每個任務的要求進行漸進式編排，形成最終的以賽引領、緊貼企業(yè)實踐的一體化課程。
鐘愛青，計算機網絡應用專業(yè)一體化教師，計算機科學與技術講師，助理電子商務師，電子商務考評員，網絡管理師。華南農業(yè)大學農業(yè)信息技術專業(yè)畢業(yè)，農學學士。江西師范大學計算機及應用專業(yè)畢業(yè)。
項目一 頁面草圖繪制 1
任務1 手繪草圖 4
1.1.1 網頁布局的基本知識 5
1.1.2 響應式網頁布局的設計特點 8
1.1.3 手繪草圖的方法 14
任務2 手繪流程圖 21
1.2.1 繪制流程圖 21
1.2.2 POP軟件 23
項目二 頁面原型設計 28
任務1 認識Axure軟件 29
2.1.1 軟件安裝 29
2.1.2 軟件的工作環(huán)境 34
2.1.3 基本元件 34
2.1.4 元件的樣式與屬性 35
任務2 使用Axure軟件繪制頁面原型 40
2.2.1 自適應視圖 41
2.2.2 柵格系統(tǒng) 42
2.2.3 元件使用 48
任務3 使用Axure軟件進行交互設計 71
2.3.1 交互樣式設置 71
2.3.2 動態(tài)面板 73
2.3.3 組合/取消組合元件 74
2.3.4 元件交互的使用―顯示/隱藏 76
2.3.5 變量 78
2.3.6 內聯(lián)框架 78
任務4 使用Axure軟件進行流程設計 117
2.4.1 流程圖組件 117
2.4.2 母版 120
任務5 發(fā)布原型設計作品 124
2.5.1 快速預覽查看原型 125
2.5.2 生成HTML文件查看原型 125
2.5.3 Web字體設置 126
2.5.4 移動設備設置 127
2.5.5 發(fā)布原型到AxShare 127
項目三 網頁頁面設計 137
任務1 移動端頁面設計 138
3.1.1 網頁設計標準尺寸 138
3.1.2 排版構成 143
3.1.3 色彩構成 146
3.1.4 扁平化概念 147
任務2 平板電腦端頁面設計 182
版式構成 182
任務3 計算機端及寬屏頁面設計 194
版面設計 194
任務4 頁面交互設計 211
簡析交互設計 211
任務5 產品匯報與展示 220
網頁效果圖展示 220
項目四 App產品原型設計 224
任務1 使用Axure軟件繪制App產品線框圖原型 225
4.1.1 App產品與Web產品 226
4.1.2 App產品常見UI組件 227
4.1.3 App產品交互設計注意事項 231
任務2 使用Photoshop軟件制作App產品效果圖和應用圖標原型 234
任務3 使用Axure軟件制作App產品高保真視覺原型 243
書單推薦
