原型設計|從三個方面,系統地畫原型

14 評論 67494 瀏覽 560 收藏 6 分鐘

在剛進行原型設計的時候,不具備系統的思考框架。往往缺少某步操作流程、頁面,控件或者是沒思考好用戶的需求及頁面設計的目的,或是整個頁面在用戶體驗上十分粗糙。

那如何從哪些方面系統地去畫原型?在實踐與學習之中,我個人總結為3個步驟。下面貼出我的思維導圖:

一、需求

首先,需求,即什么人在什么場景下為了什么目的使用什么功能。這里要注意要綜合用戶和我們的需求,并將其融入到產品設計中。比如用戶喜歡在新年期間聽取吉祥話,求到幸運簽;而我們希望透過這個活動促進用戶分享,進而提升品牌曝光率。所以落實在產品設計中便是流程的趣味性及分享機制的設計。

二、入口

其次,入口,即用戶從哪些地方獲知我們的活動,或者說用戶從哪些地方進入活動頁面。這里要注意收集及窮盡入口,設計時不要有遺漏,讓技術能夠完整開發,測試人員能完整測試,保證活動的傳播效果。在自己實踐中,因為在入口處只粗糙交代了幾個,導致在項目后期開發及測試對入口存在不該有的疑惑點。

三、設計

最后,設計。清楚知道需求與入口,但還是不太知道怎么下手原型,其實出在幾個問題上:

  1. 不知道流程怎么畫。
  2. 不知道頁面怎么設計。
  3. 不知道控件怎么設計。
  4. 不知道用戶體驗方面怎么設計。

我用一句話介紹我的設計思路:從步驟到頁面,從元素到控件,進行后續設計。

1、從步驟到頁面

描繪業務流程及用戶操作流程→ 將流程轉化為頁面。首先,怎么去描繪流程?我將其分成兩點:

(1)業務流程

首先,我們需清楚線下場景,明確其中有哪些人物參與哪些任務。然后回歸線上,利用系統替換其中的角色。比如,線下用戶求簽的場景中,人物包括用戶及解簽人,任務包括搖簽,出簽及解簽。系統可以替代解簽人的角色及其任務。

(2)操作流程

先明晰用戶操作的主流程,然后再去窮盡分支流程。不要過早地陷入分支細節中,而忽視了主流程的清晰性及簡潔性,深深打擊用戶體驗。

然后,怎么將流程轉化為頁面呢?

  1. 將流程命名為頁面。比如進入活動首頁—填寫信息—獲取結果可依次命名為落地頁-編輯頁及結果頁。
  2. 明確頁面目的。好比結果頁要引導用戶分享。

2、從元素到控件

填充元素 → 轉化控件?→ ?頁面流轉

  • 填充元素:圍繞任務設計元素輔助用戶完成任務。比如:編輯頁的任務是填寫信息。所以應具備可填寫信息的元素;為了讓用戶簡單順利完成任務,還需加引導元素。轉
  • 轉化控件:將元素轉化為一個個控件比如點擊按鈕,文本框等。比如根據“填寫信息”設計文本框;根據“引導元素“設計動畫等。
  • 頁面流轉:通過控件描繪頁面跳轉的關系,將各頁面通過連接線連接起來。好比點擊編輯頁的確認按鈕,用戶進入結果頁。

3、進行后續設計

包括視覺邏輯以及功能預見性。這里就簡單提一下:

  • 視覺邏輯:通過上述設計步驟后,頁面就是一堆元素累積的大雜燴。所以需要有晰的視覺層次以及良好的視覺流結構。
  • 清晰的視覺層次:通過組織讓用戶意識到元素間的相關性,通過突出元素將用戶引導到重要的元素。良好的視覺流結構:視覺焦點的設置不宜過多,導致用戶視覺不斷跳躍。
  • 功能預見性:要讓用戶看到就知道如何操作。

原型設計后,到撰寫PRD,下一節將向大家談談PRD的撰寫寫法,稍后期待~

 

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

題圖來自 Pixabay,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 看完一篇原型設計文章啦,感覺還是不太會?

    ? 想從0基礎開始學習Axure么?推薦你找Axure實戰班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:大禮包

    領取原型設計大禮包,多學多練,你也能成為原型設計高手哦!

    來自廣東 回復
  2. 寫的很好,很適合初學者呀。在頁面和控件這一方面,不知道作者有什么方法能夠分享一下。我個人是覺得,Axure軟件本身的控件,基本上無法滿足我們做原型的需求的,或者是說效率太低?,F在我本人都是用一些封裝好的控件,進行適用性的修改。不知道作者有什么意見和建議。

    來自河南 回復
  3. 期待您的prd相關文章 ??

    來自上海 回復
  4. 好棒 受教了 剛起步小白想請問思維圖里的逆流程窮盡場景,怎么思考逆流程? 謝謝~

    來自北京 回復
  5. 這樣底層的邏輯才是我想看到的,謝謝作者的分享!

    來自廣東 回復
  6. 受教,非常感謝

    來自北京 回復
  7. 來過,受教,感謝

    來自浙江 回復
  8. 寫得真好,作為初學者,個人總結下:
    1. 明確用戶、場景、需求(為誰在什么場景下解決了什么問題)
    2. 收集并窮盡入口(讓用戶獲知),盡可能避免遺漏
    3. 明確業務流程->轉化為頁面流程(主流程為先)->添加元素、控件、流轉
    4. 后續設計優化(視覺邏輯、層次等優化)

    來自四川 回復
  9. 所以,有微信是可以添加好友的嗎

    來自浙江 回復
    1. Hhh可以阿 互相交流

      來自北京 回復
  10. 最近在寫PRD …心累

    來自河北 回復
  11. 感謝老師,獲益匪淺。后面您在介紹時能否配實例圖片呢,對于我這樣的初學者來說還挺抽象的。??

    回復
    1. 恩恩 GET

      來自北京 回復
    2. 是的是的,有圖會更好些,實習就這么厲害了,點贊!

      來自上海 回復