產品原型實戰篇:實操摩拜單車周邊服務原型
作為一名準產品新汪,雖然沒有十足干貨,但希望記下苦海行舟之點滴,以求共勉?。▊€人練習,僅供參考)
一、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:點擊“顯示”、“隱藏”即可
本文由 @西禪 原創發布于人人都是產品經理。未經許可,禁止轉載。
高保真好棒,想向您請教學習
可能文中的那幾個小技巧費點心,其他的都是用基本的點擊切換實現的。
這個需求加上去太累贅了。為了做需求而做需求。
加了周邊服務的話 感覺會很臃腫
如果摩拜把導航和周邊生活的東西加上去。。。這個app就太惡心了
也許吧 ??
你覺得加了的話,哪些方面會受不了呢?影響很大嗎?
導航
1. 誰騎車還看導航,并且導航復雜度本來就很高,導錯了怎么辦?
2. 單車和導航捆綁在一個app嗎?這樣不好用,不如2個分開呢。無端端增加了app的復雜性
優惠券
1. 優惠券可是一個非常復雜的電商系統,摩拜不務正業去干這個可以比得過美團?
2. 相比直接用美團和摩拜2個獨立的app,這個思路沒有任何優勢
換句話說,你在滴滴上把o2o加上去,甚至把摩拜單車加上去,把airbnb、攜程的酒店業務加上去,這樣的滴滴你會用嗎?好用嗎?
我之前還在想,像共享單車為什么沒和百度地圖、高德地圖合作呢?在地圖上留一個共享單車的入口。
1、避免復雜度確實是個問題。思路的話還是做擴展,并不做替代;做周邊服務并不是要替代誰,而是更好的提供信息為主吧~
2、 講真,現在各種APP做的復雜而臃腫,根本原因還是在構建自己的產品、信息城墻,這也是實情。
3、非常感謝,給了很多可行性角度的參考
地圖app增加這些主要增加工具產品的用戶黏性和變現作用吧。地圖app可以加上去沒問題,但是不是這樣用戶體驗更好,而是一個很大的妥協。
原型貌似還少很多東西哇 ??
練習、練習?!皩Α苓叿铡δ苌婕暗降慕缑孢M行重點設計,其他未提界面保持原狀?!?/p>