這6個方法,能幫你在畫原型前清晰把握自己的思路

4 評論 34743 瀏覽 231 收藏 12 分鐘

嘗試著在畫原型之前多考慮這些步驟,畫原型應該是一個占時較少的過程。

不知道大家在畫原型時會不會遇到這樣的問題:

  • “我問下,這里是不是少了個狀態,點了之后這里XXX,那么那里XXX?”
  • “這里這樣是不是不太合理,不如這樣?”
  • “你這里邏輯有問題xxxx”
  • “你這原型畫的不夠細致,如果是這樣XXX,那應該XXX”
  • “你看看別人家的這個是這樣設計的,你是不是該XXX?”

…….

在原型設計時,一定要注重細節,但是,我們常說在構思原型時不要過早陷入到細節之中去,到底應該怎么做才好呢?

在畫原型前應該在一個更高的層次上考慮用戶界面,行為和整體產品結構之間的關系,這個階段叫做設計框架。比如設計一款汽車,一定是先設計它的結構,最后設計它的細節,如何開門,什么樣的車燈等。

“設計框架定義了用戶體驗的整個結構,包括底層組織原則、屏幕上功能元素的排列、工作流程、產品交互、傳遞信息的視覺和形式語言、功能性和品牌識別等,形式設計和行為設計必須保持一致,交互設計者利用場景和需求創建屏幕和行為草圖,完成交互框架設計?!?/p>

通過以下6個方法,也許能夠幫助你在畫原型前更能清晰把握自己的思路

交互框架圖

1.產品定位,定義形式及交互模式

產品定位主要需要考慮三個問題;什么樣的用戶想要什么?我們要做什么樣的產品(也可以只是個模塊或功能)?我們要做什么樣的?

這是一個產品要考慮的基本問題,但如果這些問題都沒考慮清楚,那么后期的設計一旦出了問題,全部將會重頭開始。一般可以根據需求,用戶畫像,反饋痛點,運營同事,老大要求等對產品定位展開分析。

定義形式可以理解為用戶會投入多大的注意力和產品互動,產品的行為會對用戶投入的注意力做出何種反饋。定義形式可以通過產品使用的情景場景,環境等做出決策。

交互模式即用戶與產品互動的方式,受到產品定位和形式的影響,如果是手機應用,那么交互模式基本就是單手觸控。手指點觸,滑動等。web產品則是鼠標點擊等,VR產品用視覺停留等,不用的交互模式會有不同的限制,應該在早期就規劃清楚。

2. 定義功能和數據

這里的定義功能則是指的較為具體的功能及對應的數據元素,與產品定位中考慮的功能不同。這里將需要將宏觀的功能具體化。

比如設計一個打車軟件,產品定位通常是簡短的一句話:用戶打開打開軟件發送打車請求,然后車就到了。 具體的功能則需要考慮到:打開軟件是否要告訴用戶附近有哪些車?發送請求是不是要多個催司機功能?

而數據元素則需要考慮到:告訴用戶附近有哪些車的時候,要告訴他們具體是多少米?催司機時是否只用發送催司機的文本消息?

每個功能及元素的定義要針對需求,考慮周全了,產品各方面都有會有清晰的意圖。

數據元素通常都是彼此關聯的,建議在定義產品數據時可以通過畫數據流圖來分析,視覺化的數據元素將會讓你更能結構化地去管理,去分類排布,讓你的設計逐漸清晰具體,讓開發人員更好理解你的意圖。

功能及數據就可以形成一個較為初步的設計方案了,這時就可以開始對這個方案進行檢測了。檢驗解決方案最好是從情景場景開始,分析人物畫像,用戶的目標,用戶的的心理模型。一個簡單的需求將會有多種解決方案,這時候需要考驗設計決策能力,通??梢詮囊韵聨讉€方面著手:

  • 最有效滿足用戶目標
  • 最符合設計原則
  • 最適合當前的技術水平和成本
  • 能滿足其他條件等

滿足用戶目標應該是一個順暢的過程,減少用戶理解或學習成本,讓用戶能夠順暢地操作軟件達成自己的目標。檢驗這個過程有個好方法,即用戶對該產品產生控制感,能夠潛意識地完成操作。

android和iOS的原則已經考慮地較為詳細和周全了,使用它們將會對你的抉擇有很好的幫助。

3. 確定層級和頁面

確定一個頁面應該放多少東西,一個任務要分多少步來完成,通常情況下,一個頁面能夠完成的任務不要分多個頁面完成,盡量不要超過3個頁面。

當頁面元素居多時要保證用戶合理的視覺線,最需要用戶知道的東西要在最顯眼的地方,次級居之,就算是一個頁面也是有層級之分的,可以通過元素大小,顏色,來強化用戶對層次的感知。

也并非所有情況下都需要減少元素或是頁面來幫助用戶快速完成任務,比如支付頁面,多級確認讓用戶減少犯錯成本。一些重要的操作多一個頁面確認反而更能讓用戶安心。

在這個階段通常需要考慮這樣一些問題:

  • 哪些元素需要在一起
  • 如何組織才能優化用戶工作流
  • 哪些元素需要捆綁使用,哪些不需要
  • 相關聯的任務使用的順序如何
  • 哪些元素能幫助用戶做出決定
  • 采用何種交互模式和原則
  • 人物模型的心智模型如何影響元素組織

塔式塔原則也許能夠幫到你,即相關聯的控件應該組合在一起,控件應該靠近所要控制的對象。

4. 繪制原型草圖

有了以上的構思這一步就會變得容易,但要注意的是,最好是從整體且高層次的框架開始構建,(若使用axure繪制原型,這個地方就可以考慮好使用母版避免以后較多重復的修改)不要被細節分散了注意力,細節留到最后去仔細推敲。

5. 構建用戶行為路線

當然不是原型畫完了工作就結束了,在拿去評審或是交付給研發之前,要盡可能詳細地完成自檢。構建用戶行為路線則是考慮好用戶使用產品不同界面的主要路徑。

如當用戶打開app后,新用戶在什么地方提示登錄,用戶在什么時候,什么樣的場景下先點擊什么,再點擊什么,在不同的頁面之間是如何跳轉完成任務的等等。

這里需要考慮的是用戶最頻繁也是日常的一個行為路徑,可以通過給用戶設想不同的情景下完成什么任務來構建。構建完成后可以自己先行走查,刪除不必要的元素,優化重要的元素,使得用戶的主要任務行為路線是最為清晰且易記憶的。

注意用戶的行為也可能不是線性的過程,可能會在幾個頁面之間往返。

6. 通過場景驗證檢查設計

通過用戶行為路線調整了整個流程或框架,確保主要場景沒有問題后,可以將重心轉移到一些次的流程和場景之中,目的在于,找到原型或邏輯的漏洞,調整并優化。

通??梢愿鶕韵滤念愔饕膱鼍膀炞C

(1)路徑分岔點:指的是用戶對多種選擇時停留的位置。

用購物行為來舉個例子,你的用戶行為中,用戶是加入購物車,下訂單,付款等一整套流程,這個流程中,加入購物車,下訂單,付款都有分岔點,如用戶取消訂單,用戶放棄付款,這些行為背后的邏輯該是如何的?

(2)必要場景:指的一些必定會發生的,但又不常用的場景,比如清除緩存,注銷賬號等。雖然用戶會較少用到,但這部分的設計也是需要合理且易用的。因為用戶不經常用到, 缺少對這種操作的學習過程,用戶可能會忘記如何操作。

(3)邊緣情景場景:也就是通常說的邊緣情況,這部分的問題測試同學會經??紤]到,但在測試之前應該考慮清楚對應的邏輯。比如昵稱重名,重復提交取消訂單,頻繁發送好友申請等等。

邊緣情景通常還需要考慮一個極限值問題,比如一天可以添加多少好友?達到好友上線后如何?

這部分需要特別關注,也許還需要向研發咨詢對應的代碼策略。

(4)特殊場景:通常不是用戶主觀造成的問題,比如app崩潰,網絡請求延遲,網頁404錯誤等情況。

嘗試著在畫原型之前多考慮這些步驟,畫原型應該是一個占時較少的過程,嘗試著在畫原型前更加系統地思考,這樣在評審會上才能更好占據主導權。

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 第一點的三個問題,后面兩個重復了吧?
    “產品定位主要需要考慮三個問題;什么樣的用戶想要什么?我們要做什么樣的產品(也可以只是個模塊或功能)?我們要做什么樣的?”

    來自廣東 回復
    1. 恩 不好意思 應該是我們要做什么產品,要把它做成什么養的?

      來自上海 回復
    2. 。。手太殘了

      來自上海 回復
  2. 不錯,說的非常細致!

    來自上海 回復