給產品經理的 UX 設計指南:5. 如何繪製產品的線框和原型

產品經理的線框和原型

大家通常會覺得產品經理做的事情都是一些「軟技能」:像是組織會議、激勵團隊、講述關於產品願景的故事... 等等。這是通常大家對於的 PM 形象。但這也是一個相當不準確的印象,怎麼說呢?因為這整件事建立在一個錯誤的假設上,就是用「功能」去描述組織中任何重要的角色。我不建議團隊使用任何功能性為中心的工作描述去區分大家的工作,團隊應該以目標為中心去分配每個人應該做什麼。

產品經理以目標為中心的描述側重於整個團隊的工作結果。目標是明確的:創造完美的產品。

考慮到這一點,你應該明白,作為一名產品經理的工作不是組織會議,或是幫大家拉甘特圖(雖然你不得不)。產品經理的工作就是盡一切努力建設打造一個很棒的產品。

雖然這聽起來像是文字遊戲,但我認為這個觀點很重要。如果你以目標導向的視角去審視一個 PM 的工作,你就不會單純把職業和軟技能相關聯。事實上,我認為新創團隊中任何的職位都不應該以「功能性」去檢視工作成效。

產品經理是產品團隊中一個完全有能力的成員,因此應該有平等的權利來參與設計過程。設計評審、測試、可用性研究甚至原型設計:這些都是可以或可能應該與 PM 合作完成的活動。

這就是為什麼在下面的段落中,我想要談談產品經理在繪製原型(Prototype)和線框(Wireframe)上的一些事情,所以你將能夠加入你的用戶體驗設計師和一起工作的產品。

準備好一些實用的知識!

原型,線框,模型... 有什麼區別?

在我們討論作為 PM 可以參與的原型和相關設計技巧的技巧和訣竅之前,讓我們解釋幾個與重要術語和定義相關的問題。

與任何技術領域一樣,用戶體驗設計(User Experience Design)有一些自己的專有名詞,在用戶體驗(UX)世界之外,它只是令人困惑。然而我在職業生涯中遇到的一些用戶體驗設計師也並不了解原型、線框和模型之間的區別。

這三者之間實際上有很大的區別,我們會在接下來的段落中一一說明,你就可以輕鬆地與你的設計師溝通。

什麼是線框(Wireframe)?

線框是設計的低保真版本。不需要做的很精美,但它應該清楚地表明:

  1. 產品的主要組成(What)
  2. 信息的結構(Where)
  3. 用戶界面交互的描述和基本可視化(How)

線框不僅僅是灰色方塊這麼簡單,儘管它們可能看起來完全一樣。記住,你的線框應該包含最終產品中每一個重要部分的表示,你的 Wireframe 已經要呈現出產品應該有的「功能」。

「功能」在這裡是一個關鍵詞,你的線框只需要清楚的表現出產品的結構。不要花太多時間在細節上,但另一方面,你需要確定你的設計師能夠理解你的線框,他們在設計時不會錯過任何重要的一部分。您正在為整個項目和與您合作的人員(開發人員,視覺設計師,撰稿人,項目經理 - 他們都需要創建良好的線框)設置路徑。事實上,你正在創建一個城市的地圖。每一條街都在地圖上呈現,只是大大簡化了。如果你在地圖上看,你可以感覺到城市的建築,但你無法感受到它的美麗。

線框應該要是快速創造出來的,你的時間幾乎都應該花在與團隊成員溝通思考上。不要想著對齊你的線稿,或是調整線條的粗細、顏色好不好看之類的,你的東西就是一個草稿,只要能夠清楚的說明你的想法就行。

可視化應該是審美的,但是這大大簡化了。黑色和灰色是你線框中主要的兩個顏色(當然你可以加上藍色或是紅色來標記超鏈接或是某些重點)。如果準備工作需要花費太多時間(例如選擇圖標,上傳圖像),則必須以簡化的方式(例如,使用佔位符 - 圖像的交叉矩形以及適當的說明)來表示它。我們傾向於將線框稱為低保真交付(lo-fi)。

請記住:一個好的線框應該要讓第一次看的人都看的懂,為整個團隊設定一條路徑。

線框通常用作項目的文檔。由於它們是靜態的並且在特定的時間點與接口保持交互,所以它們應該伴隨著書面文字(從解釋交互的簡短註釋到在需要時複雜的技術文檔)。

但是,它們也可能以較不正式的方式使用。由於他們形式上簡單快捷,所以他們可以作為團隊內部溝通的清晰草圖。如果開發人員詢問應該怎麼做 - 答案可以作為一個快速創建的線框提供。

線框幾乎不被用作測試材料,雖然它們可能有助於收集初期游擊式研究的反饋,而在這些研究中,您不關心方法純度,而是試圖獲得一些快速的見解。

在整個設計故事的背景下放置的線框可能會非常有效,儘管近年來他們已經收到了一些不好的報導,但作為複雜項目的初始階段,它仍然是不可或缺的。

什麼是原型(Prototype)?

通常與線框混淆的原型是最終產品的中高保真度表示,其模擬用戶界面交互。它應該允許用戶:

  1. 體驗內容和與界面的交互
  2. 以類似於最終產品的方式測試主要的相互作用

原型是模擬用戶和界面之間的最終交互。它可能看起來不像最終產品,但應該是非常相似(這絕對不是一個灰色,粗略的東西)。相互作用應仔細建模,並與最終的經驗非常相似。界面和後端機制之間的相互依賴通常被忽略,以降低成本和加快開發週期。

原型在用戶測試中被充分利用。在開發實際開始之前,這種對最終交互的模擬形成了很大的材料來檢查界面的可用性。

原型通常不是你能想像的最好的文檔,因為它們迫使 “讀者” 花費一些努力來理解界面。另一方面,原型是設計文檔中最引人入勝的形式,因為界面是有形和直接的。

什麼是模型(Mockup)?

一個模型是一個中到高保真,靜態的設計表示。很多時候,一個模型是一個視覺設計稿,甚至是實際的視覺設計。一個很好創建的模型:

  1. 代表信息結構,可視化內容,並以靜態方式展示基本功能
  2. 鼓勵人們實際審查項目的視覺方面

由於一些軟件公司的名字,模型經常與線框混淆。

如果你想從利益相關者那裡得到早期的支持,模型是特別有用的。由於它們的視覺特性,模型不具有低保真度可交付成果的阻力,而且比原型創建要快得多。他們是一個很好的反饋採集器,如果放在整個設計故事的背景下,可以形成一個偉大的文檔章節。

UX 交付產品領域的產品經理

在大多數情況下,產品經理負責處理 Wireframe 和基本的產品原型。在這個時期的產品因為還不需要任何的藝術成分,而是需要關於用戶行為的知識,所以 PM 可以很容易地加入到隊友的創作過程中,增加他們獨特的視角。

與流行的觀點相反,低保真交付物(線框)比中等保真交付物(原型)難以正確製作。雖然原型通常需要更多的時間(添加界面元素的交互總是需要一些工作),但通過對這種形式的設計表達式的誤解,線框更容易破壞。

我曾經看到,產品經理在製造線路過程中犯了很多錯誤,損害了他們與其他車隊之間的溝通,我希望每個人都能賺到幾美分。把太多的細節放在一個線框中,或者太少 - 是一個形式的危險的失敗,不幸的是可能會影響整個設計過程。

跟我走 5 條線路圖,希望能幫助你保護自己免受一些不幸的錯誤。

1. 消除所有的干擾:只有我們消除分心,才能實現清晰的溝通。

線框中的干擾是什麼?

  1. 使用不當的顏色
  2. 錯誤地應用保真度
  3. 醜陋的圖像和圖標
  4. 任何奇怪的字體
  5. 任何只有你能理解的符號和代碼

實際上任何讓你的讀者遠離理解你的設計理念的東西。簡單地說:不要想著裝飾你的線框,只要保留必須的互動。
考慮一下這個故事:我知道的用戶體驗設計師之一在每個佔位符(一個交叉的矩形)上使用縮寫來標記他期待的圖像類型。這對他有一定的意義,但任何外人都不能理解。

只為自己使用這樣的秘密標誌可以嗎?不,如果你打算與你的團隊和客戶分享這個文檔。這些縮寫使讀者分心,擾亂了他們對設計的看法。

2. 仔細使用顏色

考慮顏色時有很多誤解。線框應該只是一個黑色和白色的,視覺上苛刻的一套盒子?或者,他們應該是多彩的努力,建議的視覺設計?

都不是。為什麼?因為既不是黑白也不是彩虹般的東西,可以清楚地傳達出設計。我寧願建議你遵循這些簡單的規則:

  1. 對界面的線框結構和內容使用灰色陰影,
  2. 在視覺上建議一個層次結構,並使用不同的灰色陰影在線框中設置順序,
  3. 始終將任何圖像和圖標設置為灰色(您不希望它們在視覺上脫穎而出),
  4. 在元素之間使用適當的對比(特別是在文本的情況下 - 它必須是可讀的!),
  5. 您可以使用藍色鏈接,警報紅色框,確認綠色框,信息藍色框和警告黃色(在表單中這是特別重要的; 驗證信息的顏色很重要,通過設置適當的色調,讓你的團隊知道它的重要性),
  6. 避免黑色邊框使您的線框混亂,雜亂,真正四方形 - 在某些情況下,這可能是一個分心。

3. 不要過度設計它

過度設計線框是一個常見的錯誤。你必須記住,你正試圖以簡單,清晰和快速的方式傳達設計理念。不要太花哨。

花費幾個小時來製作界面元素只是因為它在線框上看起來不太好,這是浪費時間。每當你面對一個關於某個元素是否準備好的困境,問自己:

  1. 在特定產品的用戶場景中,這是否有意義?
  2. 它是否清楚地傳達了它的意義和價值?
  3. 你的隊友能理解嗎?
  4. 不要問自己是否漂亮;詢問是否清楚合理。

4. 使用實際尺寸(大約)

您必須為您的設計設置實際大小的畫布(例如,如果 Web 應用程序的寬度為 980 像素,則應在 980 像素畫布上線框化),並以比例方式線框界面中的所有元素。