如何畫出專業的原型圖?(上)

47 評論 170622 瀏覽 908 收藏 14 分鐘

怎么樣的原型圖才算是專業的原型圖呢?文章總結了一些經驗,希望對你有所幫助。

本片文章(原型上篇)重點內容:

  • 清晰的視覺層次
  • 視覺流結構
  • 功能預見性
  • 信息的焦點即為視覺的焦點
  • 足夠簡單
  • 考慮到邊界條件

首先,我們要明確原型圖是畫給誰看的,通常是以下幾類人:開發、部門領導、UI設計師和測試,一個完善的產品流程離不開著幾個角色。

開發通常最關心的是有多少功能,功能的復雜度怎么樣,邊界條件是什么,異常情況怎么處理等。設計師通常關心元素之間的關系,排版和布局。而跟主管匯報,由于主管的事情是很多的,他們通常最關心功能整體的流程、原型的易讀性,以及價值體現。而測試則關心產品需求用戶(后面會詳細介紹),輔助他們寫測試用例,以及是否窮盡考慮到各個場景。

那么,怎么樣的原型圖才算是專業的原型圖呢?小編總結了工作以來畫原型圖的經驗,總結出了以下經驗。

一、清晰的視覺層次

突出重要元素,弱化次要元素

頁面是由元素組成的,這些元素包括線、顏色、按鈕等,要做到層次清晰,就要把重要的元素進行強化,次要的元素進行弱化,比如可以通過顏色的飽和度來突出重要元素,通過面積突出重要元素等,引導用戶聚集視覺焦點到重要的元素上。如下圖,通過對比顏色和區域面積的大小,來突出重要元素。

格式塔原理

將相關的元素組織在一起,讓用戶知道這些元素在任務、數據和工具上是相關的,通常用位置表示。相關的元素位置上相近,不相關元素用空間隔開。如下圖,第一個圖為反面例子,信息距離上下一致,用戶無法區分中間的信息是屬于上方還是下方。第二張圖是airbnb的截圖,紅色線框部分明顯與下方隔開一定距離,在視覺上體現為跟上方相關。

二、視覺流結構

什么是視覺流?

視覺流是指視覺焦點形成的軌跡,由于眼球生理結構限制,人眼在某時刻只能產生一個焦點。人的這一視覺特性使得人的視線運動通常表現為點到點的跳躍式掃描(saccade),而不是平滑移動。人在閱讀時,一行通常包含4~7個跳動――定位(jump-fixation)的動作,注視持續時間為200~600ms。?因此用戶在對界面持續關注后會留下一系列的視覺焦點,這些視覺焦點的軌跡稱為視覺流(visual line)。

平穩的視覺流結構能幫助用戶快速理解邏輯路徑,減少用戶的認知成本。平穩的視覺流有兩個原則:

  • 一、視覺焦點不宜過多;
  • 二、視覺焦點的路徑邏輯盡量簡單。

如下圖,同為軟件教程詳情頁,左側的視覺焦點過多,視覺流向路徑復雜,而右側的視覺流向路徑簡單,容易理解。

三、功能預見性

看到一個功能,就知道該功能如何使用,稱為功能預見性。

如,lofter底部導航欄在改版前,只用圖標表現功能,沒法清晰知道每個圖標的含義。改版后,用“圖標+文字”,直接解釋每個圖標的含義,減少認知負荷。

如下圖,為途虎養車某個門店的評價截圖,該門店提供三個服務,分別是輪胎、保養、美容和安裝,紅色方框內為各個服務的得分。當第一次進入這個頁面,默認“輪胎”評價高亮紅色,其他為灰色,潛意識里不知道點擊是可以切換查看對應評論列表的,即切換查看功能感太弱。

四、視覺的焦點為信息的焦點

每個頁面都有一個核心功能,這個核心功能不應該被其他功能所覆蓋,特別是當功能越來越多、越來越復雜時。那我們怎么判斷頁面上哪個功能是信息的焦點呢?如果針對競品調研,頁面上顏色飽和度最高,或者功能占據區域最大的即為頁面的核心功能,即信息焦點。當設計自家產品功能,要從主流用戶的主流場景,或者功能的商業價值、使用頻率等維度進行分析,一個頁面的信息焦點不宜過多,過多會影響視覺流的穩定。

如下圖,圖1為《風起長林》中的劇集截圖,圖2為點擊后的效果,圖3刻意把進度條拖動方塊變小。我們先來分析進度條的使用場景:查看進度、快進、拖動進度條,當把進度條變小,如圖3,進度條不再成為信息的焦點,視覺效果被弱化,用戶在查看進度、快進時要自己看才能看到當前進度,拖動滑塊時要小心翼翼才能點中。

再看一個生活中真實的例子,有一天點了外賣,配送員說已送達,于是去公司的前臺找(前臺有很多外賣),找了三遍沒有找到,第四遍終于在僅剩2份沒有人拿的外賣中找到了。

如下圖,我們先來做個場景分析,去找外賣,一般人大多數情況時尋找自己的名字/電話,可是這份外賣單子把騎手的姓名和電話號碼打印得很大,客戶(我)的名字沒有打印,只留了一個小小的號碼,造成了很難找到,然而我又不會刻意去記住騎手名稱和電話。

五、把簡單留給用戶

復雜度守恒定律(Law of conservation of complexity)由Larry Tesler 于1984年提出,也稱泰斯勒定律(Tesler’s Law)。根據復雜度守恒定律,每個應用程序都具有其內在的、無法簡化的復雜度。

無論在產品開發環節還是在用戶與產品的交互環節,這一固有的復雜度都無法依照我們的意愿去除,只能設法調整、平衡。在交互設計中,體現為把復雜留給系統,盡量把簡單的界面呈現給用戶。

如,我們在百度上搜索圖片,輸入關鍵詞-點擊搜索-出現圖片,整個過程是一個非常簡單的過程,即白盒部分是非常簡單的。黑盒部分,在用戶輸入關鍵詞后,系統進行需求識別,識別出來大量圖片,然后將些圖片繼續排序,檢索出用戶最可能希望看到的圖片,然后才會顯示出來,用戶看到的結果系統往往需要進行大量的計算。

比如,你在家里點外賣和在公司點外賣,無需每次都定位和選擇收貨地址,系統會自動檢測你當前的地理位置,從而給出合適的收貨地址。但是快遞的收貨就不一樣,有可能在家里下單,收貨地址選為公司,或者在公司下單,收貨地址選為家里,這個時候就不能根據用戶當前的地理位置進行自動選擇出收貨地址。

其他的還體現為默認給出分類、選項、填空內容等,由輸入變為選擇。顯性顯示用戶最關心的信息,比如在美團上點了外賣,很多人很關心外賣的送達時間,會好幾次進入訂單詳情查看,美團干脆直接把送達情況展示出來,無需進入詳情頁查看。

根據《簡約至上》,可以大大簡化頁面上的功能。

1.刪除

  • 關注核心功能:增加價值始于改進核心體驗
  • 砍掉殘缺功能:不完美的功能不如不要
  • 刪除掉可能對用戶帶來負擔的細節,如干擾的文字、可有可無的選項
  • 排定功能優先級:產品的價值不是由功能的多寡來決定的,而是看能否滿足用戶的最高優先級目標
  • 刪除干擾項
  • 選擇聰明的默認值,減少用戶選擇
  • 避免視覺混亂,讓用戶保持專注

2.組織

  • 分類
  • 利用網格,呈現頁面布局
  • 利用大小、位置、分層、色標等進行實際組織
  • 關注用戶的期望路徑,而不是邏輯

3.隱藏

  • 隱藏不常用但不能少的功能
  • 漸進展示:展示核心功能,隱藏擴展功能
  • 階段展示:隨著用戶深入界面而展示相應的功能
  • 適時出現,不打擾用戶,隱藏的目的不是為了藏,而是更好的展示
  • 讓功能方便找到,不能藏得找不到

4.轉移

  • 把復雜性轉移給擅長的一方,如用戶、后臺系統、其他設備
  • 創造開放式體驗,降低用戶受到的約束

六、考慮到邊界條件

產品經理或者交互設計師,在做功能時,很容易遺漏一些邊界條件,出現遺漏的原因,主要是在設計功能時至考慮到了主流場景,只做了主流場景下我設計,異常場景或者邊界條件很難考慮到,這里教大家一個小技巧,寫產品需求用例。在構建產品架構雛形時,用例往往能起到幫助確定功能界限的作用。

用例包括以下內容:

  • 用例名稱 ?– 此產品/功能的名稱
  • 用例編號 – 此產品用例的編號
  • 角色- 操作/執行該功能的角色
  • 簡要說明 – 最簡化的內容對該需求功能的描述
  • 前置條件- 執行該功能的前提條件
  • 后置條件 – 該功能執行完畢后的結果條件
  • 主事件流- 該功能角色所執行的主要正常過程
  • 異常和分支事件流 – 該功能角色所執行的次要異常過程

如在一個圖片素材下載網站下載圖片的用例:

如果不寫產品用例,很多人可能只考慮進入詳情頁-點擊下載按鈕-下載成功這個流程,很容易遺漏用戶未登錄狀態下的提示,無權限下載該圖片的提示,甚至是圖片下架后無法下載圖片的提示。

原型上篇結束,下篇預告內容:

  • 原型圖標注頁面跳轉圖
  • 盡量在一個頁面展示所有的交互狀態
  • 繪制流程圖
  • 功能模塊化,可復用

 

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

題圖來自PEXELS,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 您好,我是新人,對您這個文章困惑太多了。
    1、這個圖都是實際效果圖,原型的意義在哪里?
    2、這個圖以產品的能力,可以達到嗎?產品經理對美感的敏感度要求如何?
    3、產品的精力和工作量是否允許畫到這種地步?

    來自中國 回復
  2. 不太明白~如果產品經理出出來是這樣的黑白原型圖。。UI是不是只要上個色就可以了。。

    來自江蘇 回復
  3. 感謝大佬,對新人幫助非常大,期待下一篇的精彩發揮?。。。。。?!

    來自河北 回復
  4. 謝謝作者,寫的很棒,對我這個新人幫助很大,也在重新思考怎樣才能設計符合產品定位的產品,繼續加油!

    來自北京 回復
  5. 為啥app上不能聽文章啊

    回復
  6. 生死看淡,不服就干。。?;顑?/p>

    回復
  7. 白盒測試、黑盒測試那張圖是不是畫反了?白盒基于內部結構的,黑盒是注重功能的。

    來自北京 回復
    1. 同感

      來自山東 回復
    2. 確實反了

      回復
  8. 點到為止,恰到好處就好。我就反對那些叫囂著要出高保真原型圖的人。產品經理沒必要出高保真原型圖。因為高保真原型圖直接影響設計師的第一印象,會左右和限定設計師的理解力或者創造力。另外,對于程序員來說,你啪啪啪幾個相框圖他們就知道怎么做了。我很擔心那些剛入門的孩子,最后產品經理的核心價值和作用沒理解,真正的本領沒學到,倒成了精通某一個或多個原型制作工具或平臺的人才。以為掌握了足夠好的原型制作技術,寫出漂亮的產品文檔就是能力的體現,那真的很耽誤孩子們的青春。

    來自上海 回復
    1. 無比贊同,感謝

      來自海南 回復
    2. 段位高的產品都會自己出高保真原型圖,產品要什么樣的設計風格,產品經理在設計初期就應該有規劃。整個團隊最熟悉產品特性的就是產品經理。10幾年的工作經驗告訴我 我沒見過啪啪啪拍幾個相框圖 就能把產品做得很好地。這種人10個有9個做東西缺胳膊少腿,開發團隊對產品的認知必然是循序漸進的。開需求對接會的時候,可能看看圖很簡單理解的,做著做著可能程序員就提產品找到漏洞 一些設計不周全的地方了。牛的產品在產品設計時都會把數據的生成規則,前后端如何產值一并考慮進去。產品考慮的越多,開發就會越順暢。原型圖畫漂亮,需求文檔寫詳細,沒什么不好打。

      來自浙江 回復
  9. 說好了周三更新就是周三更新,下篇早上已經更新了哦,進入我的主頁就能看到啦~

    來自上海 回復
  10. 很不錯,期待后續文章

    來自陜西 回復
    1. 下篇早上已經更新啦~進入我的主頁就可以找到哦

      來自上海 回復
  11. 適合需要業務能力到更高層次的,,不適合入門的

    來自廣東 回復
    1. 小可愛可以說說看你想要學習哪方面的內容 我們會考慮的哦

      來自上海 回復
  12. 外賣訂單那個其實挺有講究的,從我個人角度來說,我在公司上班,經常點外賣,但是公司所在的寫字樓,曾經因為有個人外賣袋掉地上了,弄在客梯里,都是湯,從此之后這個寫字樓物業,就明確規定,所有的外賣不準進樓,必須放在后門的送餐車上,而且拿外賣的人,也不能走客梯,然后定外賣的人自己下去拿,超級麻煩,中午用餐高峰期,拿個外賣一上一下一二十分鐘。所以也能想到去找外賣的時候,一看都是騎手名字,找自己名字找的尷尬死了。排除這種情況,其他時候,一般外賣都是親自送到手上的,不用去找。對騎手來說,就是另外一個場景了,一家店鋪,很多人點了外賣,很多騎手過來找餐,騎手名字增大,方便騎手找餐,也給騎手早點送達提供便利。

    來自浙江 回復
    1. 說的好

      來自北京 回復
  13. 寫的挺詳細的,看到美團訂單那個,其實這個是為了方便騎手取餐的時候不搞錯,這個才是主場景。因為大多數情況,快遞都是送到訂餐人手里的,而由于像你說的,一個頁面不能突出的東西太多,所以并沒有突出訂餐人的信息罷了

    來自四川 回復
    1. 這個才是正解

      來自湖北 回復
  14. 你好,你用的元件庫能分享一下嗎?萬分感謝啊,1551505149@qq.com

    來自河南 回復
    1. 是公司的,不方便分享,諒解哈

      來自上海 回復
  15. 講的是交互設計哦,~

    來自四川 回復
    1. 后面還會有專門的專題講交互哦~

      來自上海 回復
  16. 針對外賣單這里,個人理解是,既然是為消費者服務的,那應該提供便捷快速渡基礎上為消費者提供良好的服務,騎手的名字和號碼放大有利于騎手取餐,但是消費者取餐的時候應該也要注明,或者說在騎手取餐的大號號碼可換為其他(騎手圖片、等)在后續消費者那可增加個姓名和號碼,說到隱私,在騎手聯系不到消費者的時候,電話是唯一的途徑,所有個人覺得電話和姓名必須得有的。只要在騎手和消費者聯系方式中采取不一樣的識別就好。

    來自廣東 回復
    1. 后面想到一個方案 騎手的信息也可以做得很明顯 但是可以做成打印出來方便撕掉的 這樣用戶找起來方便
      用戶的姓名確實是必須的 因為騎手有時候一次送好幾個外賣 不可以一一記得哪一個外賣是哪個客戶的

      來自上海 回復
    2. 剛關注了你的公眾號 很棒的文章,發現與你是同一個地方的人,哈哈。

      來自廣東 回復
    3. 么么噠

      來自上海 回復
    4. 我還是認為送餐小哥的姓名和電話應該標記的,不應該撕掉,萬一撕錯,會導致幾個外賣出現錯誤的情況,而且更加的不好核對。
      中午高峰期有一些店外賣非?;鸨胖芏嗟乃筒托「?,他們有很多一下子要拿很多外賣,如果增加撕掉的功能,無意在給他們增加工作量,所以不建議撕掉。
      我倒是認為顧客的姓名不是必須的,姓名就是為了方便小哥稱呼而已,真正起到送餐的關鍵作用的是電話和地址,您說“用戶的姓名確實是必須的 因為騎手有時候一次送好幾個外賣 不可以一一記得哪一個外賣是哪個客戶的”,其實即使你寫了姓名他也記不住名字,他的重點是地址和電話。

      來自北京 回復
  17. 哇 整理了筆記 謝謝??

    來自陜西 回復
    1. 互相學習哦

      來自上海 回復
  18. 下篇什么時候更新?,我要抄筆記 ??

    來自遼寧 回復
    1. 下周三之前出來哦

      來自上海 回復
  19. 期待下篇。

    回復
    1. 壓力很大啊 ?

      來自上海 回復
  20. 受教了,寫的很詳細 ,設計崇尚簡約,但核心功能需要突出,能讓用戶快速知道自己在哪里,可以去哪里,可以做什么

    回復
    1. 謝謝

      來自上海 回復
  21. 值得借鑒

    回復
  22. 詳細

    回復
    1. 歡迎繼續關注下一篇哦

      來自上海 回復
  23. 外賣單子的外賣員的信息字體大號,應該是考慮的使用用戶是外賣員。當外賣在飯店時,會有大量的單子,方便外賣員拿去,而配送的用戶基本上則是一對一拿去,像你說的寄存在前臺的場景其實相比于一對一還是少數用戶。

    來自江蘇 回復
    1. 是的,我也是怎么想的,沒有寫姓名,也算是對用戶的信息的保密。

      來自北京 回復
    2. 贊同,我也是想說的。這一點作者還是考慮欠缺了

      來自浙江 回復
    3. 來自北京 回復
  24. 請問下有什么工具畫的原型圖呢?
    有交互和跳轉嗎?

    來自廣東 回復
    1. axure和sketch都可以的

      來自上海 回復