實戰篇(3) 產品原型：摩拜單車-周邊服務原型

作為一名准產品新汪，雖然沒有十足乾貨，但希望記下苦海行舟之點滴，以求共勉！

一、Roadmap（路線圖、藍圖）

• 需求預期管理：優先順序、完成時間
• 更注重未來的時間周期

• 弱化具體的任務，具體任務有甘特圖或者項目計划進行詳細描述
• 突出關鍵節點

註：入駐餐飲商家數，主要參考美團和糯米，普通餐飲小店數量可能更多（可作為直接參考的 餓了么 沒能找到數據）

二、原型

原型是交互設計師與PD、PM、網站開發工程師溝通的最好工具。而交互設計是一種使得產品易用，有效的把人使用產品的過程變得愉悅的技術。

低保真：利用線框圖，把信息的組織架構通過圖形的模式展示。工作中多數情況為保證快素便捷進入溝通、開發，多採用低保真原型。初期也可以採用手繪、線框圖，後續版本迭代中可以在已有界面基礎上採用PS、Axure等。

（詳見文末「在線演示」中框出部分）

高保真：利用高功能性、高互動性完整的把用戶的操作流程表現出來。高保真原型製作可以博保障完成效果，但往往比較耗時，可能採用的場景：

• 部分特殊需求，如對體驗效果特別看重，或功能極其複雜，需擬定較好的高保真demo
• 以便技術實現後期與預期對比的情況

  

（詳見文末「在線演示」中框出部分）

註：右側「首頁」、「個人中心」等是便於每次刷新後快速進入某一頁面，非必須內容。

三、Axure小技巧

1.動態面板的使用

動態面板：使某一區域可以存在多種顯示狀態，可以進行切換。動態面板具有」拖動「系列交互事件，可實現拖動切換或者其他效果。預覽中，動態面板具體顯示為某一狀態。

利用動態面板最簡單的示例是可以實現banner，定時切換或者點擊切換。

2.熱區的使用

熱區：可以使頁面中被覆蓋區域具有交互能力。一般配合靜態圖片或者背景使用。

如下圖所示，背景為一張截圖，熱區」1″添加點擊用例後，返回到上一層界面；熱區」2″點擊後跳轉到」我的優惠「界面。熱區在預覽中為透明色，不影響背景內容。

3.拖動效果

step1：創建動態面板（「地圖可視區」），添加「map」狀態，雙擊進入編輯

step2：在「map」狀態中，添加圖片（「模擬地圖」）

註：圖片要大於動態面板尺寸，如：動態面板388*593，模擬地圖1766*900；示意圖：

step3：動態面板（」地圖可視區「）添加用例：交互-拖動時

註：參考示意圖，拖動操作的移動對象為」模擬地圖「；有效邊界不操出可視區域。

4.圖標滑動效果

step1：創建兩個文本標籤「全部單車」、「周邊服務」

step2：創建一個無邊框矩形，背景色設置，圓角半徑（高度的一半）

step3：布局，水平居中；文本標籤置頂，矩形框置於「全部單車」下方

step4：文本標籤分別添加用例：交互-滑鼠單擊時

註：「切換區-圖標」是無邊框矩形的名稱；(77, 15)是需要移動到的xy坐標值，可以分別將矩形框置於兩個文本標籤下獲取。

5.蒙版效果

step1：創建無邊框矩形，位置-尺寸 和背景內容相等

step2：層級關係，位於背景和消息框之間

step3：顏色，黑色、不透明 30%；默認隱藏

step4：點擊「顯示」、「隱藏」即可

在線演示

P.S.*Cover Photo by Sergey Zolkin on Unsplash本系列由 @西禪 原創發布，轉載請註明出處，謝謝。

推薦閱讀：