作為一名準產品新汪，雖然沒有十足干貨，但希望記下苦海行舟之點滴，以求共勉?。▊€人練習，僅供參考）

一、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：點擊“顯示”、“隱藏”即可

在線演示

本文由 @西禪 原創發布于人人都是產品經理。未經許可，禁止轉載。