產品原型實戰篇:實操摩拜單車周邊服務原型

15 評論 18741 瀏覽 129 收藏 7 分鐘

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

一、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. 高保真好棒,想向您請教學習

    回復
    1. 可能文中的那幾個小技巧費點心,其他的都是用基本的點擊切換實現的。

      來自廣東 回復
  2. 這個需求加上去太累贅了。為了做需求而做需求。

    來自福建 回復
  3. 加了周邊服務的話 感覺會很臃腫

    來自廣東 回復
  4. 如果摩拜把導航和周邊生活的東西加上去。。。這個app就太惡心了

    來自廣東 回復
    1. 也許吧 ??

      來自廣東 回復
    2. 你覺得加了的話,哪些方面會受不了呢?影響很大嗎?

      來自廣東 回復
    3. 導航
      1. 誰騎車還看導航,并且導航復雜度本來就很高,導錯了怎么辦?
      2. 單車和導航捆綁在一個app嗎?這樣不好用,不如2個分開呢。無端端增加了app的復雜性
      優惠券
      1. 優惠券可是一個非常復雜的電商系統,摩拜不務正業去干這個可以比得過美團?
      2. 相比直接用美團和摩拜2個獨立的app,這個思路沒有任何優勢

      換句話說,你在滴滴上把o2o加上去,甚至把摩拜單車加上去,把airbnb、攜程的酒店業務加上去,這樣的滴滴你會用嗎?好用嗎?

      來自廣東 回復
    4. 我之前還在想,像共享單車為什么沒和百度地圖、高德地圖合作呢?在地圖上留一個共享單車的入口。

      來自北京 回復
    5. 1、避免復雜度確實是個問題。思路的話還是做擴展,并不做替代;做周邊服務并不是要替代誰,而是更好的提供信息為主吧~
      2、 講真,現在各種APP做的復雜而臃腫,根本原因還是在構建自己的產品、信息城墻,這也是實情。
      3、非常感謝,給了很多可行性角度的參考

      來自廣東 回復
    6. 地圖app增加這些主要增加工具產品的用戶黏性和變現作用吧。地圖app可以加上去沒問題,但是不是這樣用戶體驗更好,而是一個很大的妥協。

      來自廣東 回復
  5. 原型貌似還少很多東西哇 ??

    來自廣東 回復
    1. 練習、練習?!皩Α苓叿铡δ苌婕暗降慕缑孢M行重點設計,其他未提界面保持原狀?!?/p>

      來自廣東 回復