題外圖：攝于2019.3.10
引言
本文一方面用于完成筆者的實驗報告——原型設計
另一方面給大家介紹Axure基本操作，以頭條為例，制作一款高保真原型
因時間緊迫，故大部分內容使用截圖，如有時間更推薦原創
出現錯誤，煩請見諒
環境與工具
- Mac OS
- Axure
分析路徑
首先使用Xmind制作出今日頭條的交互功能框架，按照路線制作原型會讓我們的思路更清晰，起到事半功倍的效果
交互路徑
前期工作
- 截取手機主界面、今日頭條首頁、西瓜視頻、小視頻、我的幾大模塊
- 找到一個手機外殼png素材
第一部分：實現基本跳轉
- 將手機外殼與桌面重疊放置，調整好尺寸
- 在今日頭條app處建立等大小的熱區
- 設置交互：鼠標點擊時，逐漸顯示Slogan-等待1500毫秒-當前窗口打開首頁
手機桌面
交互功能
-
以此類推，將首頁下方菜單欄分別建立四個熱區，對應跳轉至四個界面，同時將四個熱區打包成組，分別用在四個界面下方
四個熱區
打包組合
至此，基本的跳轉功能已經實現
點擊發布、點擊編輯資料、頻道篩選等功能與點擊切換界面制作方式一致，在此不多贅述
第二部分：實現內容滑動
- 對滑動內容分別截圖再拼接，注意不要出現斷層
- 在首頁屏幕中央建立動態面板first，尺寸設置和內容滑動模塊同樣大小
- 在動態面板界面二次建立動態面板second，尺寸設置和內容整個篇幅同樣大小，并置入滑動內容圖
-
設置交互功能：secong動態面板垂直移動
first
second
設置交互功能
還有些細節暫未處理
- 拖動時沒有邊界限制
我們建立兩個熱區，命名hot1、hot2,分別位于內容模塊上下邊界
hot1
hot2
對second動態面板設置交互條件：如果邊界未接觸則移動回原位
滑動條件
- 拖動時上方出現刷新按鈕，只需在內容模塊下放置按鈕圖片即可
至此，內容拖動部分已完成，頻道滑動等功能制作方式一致，不多贅述
第三部分：細節功能
搜索欄
- 首先點擊搜索框熱區跳轉至搜索界面
-
搜索界面處放置文本框，類型設置為Text，可添加初始灰字
搜索熱區
文本框屬性
頻道切換
-
以 關注 和 推薦 為例，同時設置熱區，注意位于最頂層，設置點擊顯示對應的界面，另一個界面隱藏
關注與推薦頻道熱區
對應切換隱藏顯示
至此，今日頭條大部分功能已經實現。
總結
- 在制作過程中，務必要注意熱區，圖層的上下級優先關系，否則會出現鏈接錯誤或無法點擊的情況
- 在時間充裕的情況下，盡可能找更多的素材來制作原型
- 如有問題歡迎評論交流
