第五章 產品經理的線框圖和原型設計

專業技能通常被視產品經理的軟肋——組織會議和制定規程，激勵團隊，宣講產品願景...——這些是一個產品經理的典型形象。但這個形象與真實情況大相徑庭。為什麼呢？這是因為錯誤的以為，可以用一大堆技能描述，刻畫出組織中的某個重要的角色形象。不要用以技能為中心的陳述來描述產品經理，我建議你用以目標結果為導向。

以目標結果為導向的描述產品經理只關注於整個團隊工作的產出。目標非常明確——打造完美的產品。

頭腦中有了這樣的概念，你就能理解產品經理的工作不只是組織會議和把工作任務扔給團隊這麼簡單了。你的工作就是盡一切努力打造一款傑出的產品。

雖然可能你覺得這只不過是換一種說法的文字遊戲，但這對於思維模式的轉換至關重要。如果你從一個以目標結果為導向的角度待產品經理，你就不會被那些專業技能束縛。事實上，我也堅信，你不應該被它們束縛住。

產品經理是一名有完全能力的團隊成員，因此應該有平等的權利去參與到設計過程中。設計評估，測試、可用性研究，甚至是製作產品原型——產品經理都可以參與，這些活動也應該在有產品經理參與的情況下合作完成。

以上就是我將繼續指引學習原型設計和線框圖的原因，你便可以與使用者體驗設計師一起參與產品的設計工作中。

準備好我們要開始實戰啦！

產品原型，線框圖，介面原型——有何區別？

在我們介紹產品原型和相關設計技術的技巧和竅門之前，作為一名產品經理，如果你想參與進設計過程，得先聽我解釋幾個重要的術語和定義。

使用者體驗設計，就像任何科技領域一樣，都有自己的特有詞彙，使用者體驗領域之外的人很容易被專業術語給搞的暈頭轉向。大多數非使用者體驗專業人士，甚至我見過的某些使用者體驗設計師都搞不清楚產品原型（prototype），線框圖（wireframe ）和，介面原型（mockup）的區別。當然，它們之間實際上是有本質區別的。

當我們繼續深入瞭解之後，你就可以輕鬆的和使用者體驗設計師交流了。

什麼是線框圖（Wireframe）

線框圖是一種低保真的設計展現（Representation）。應該傳達如下資訊：

• 主要內容（設計的是什麼？）
• 資訊結構（處於什麼位置？）
• 描述和實現基本的使用者視覺化——互動介面（如何操作？）

線框圖不只是毫無意義的灰色方格子，儘管看起來就是那樣的。請把它們看作是設計的中樞，一定要記住，線框圖應當包含最終產品的所有元素。

“展現（Representation）”這個詞很關鍵，它能讓你保持保真度與速度之間的平衡。一方面你不能死摳細節，另一方面你還得考慮如何忠實的展現出最終產品，不會遺漏任何重要的元素。你得為整個專案制定路線，並讓團隊成員（開發人員，視覺設計師，文案，專案經理等——他們都需要良好的線框圖）和你共同執行。實際上你正創造一個城市的地圖。每條道路都清晰的展現在地圖上，但只是很簡單的表現。你能從地圖中理解城市的架構，但不能感知它的美。

大多數的時間應該花在和團隊成員交流溝通和思考的過程中。而實際的繪製線框圖的過程應該非常迅速。

視覺化本應該是符合審美的，但線框圖確是極簡的。黑白灰是線框圖的常用色（有時特定的連結會用藍色）。 不要花太多的時間進行準備（比如挑選圖示，上傳圖片等），你只需要用最簡潔的方式表達（比如用中間打叉的方形代替圖片，加上一點必要的描述）。我們喜歡把線框圖稱為低保真交付（lo-fi）。

請牢記——好的線框圖能讓設計交流清晰明瞭，併為整個團隊制定好工作路線。

線框圖通常是用來當作專案文件的。因為它是靜態的，有用沒法互動，所以新增一些文字說明總是必要的（可以是表明互動的簡短筆記，有必要的話，也可以新增一些複雜的技術資料）。

然而，也可以不那麼正式。快速繪製的簡單線框圖，只作為團隊內部溝通的草圖。如果開發人員詢問應該做什麼——就可以用快速的線框圖來回答。

設想一下：UXPin 作為一家創業公司開發週期極短（每隔幾天就釋出一個迭代）。我們使用線框圖快速的將任務（即使是很小的！）視覺化。這種廉價的方式能很輕鬆的消除誤解。

線框圖並不能拿來做測試，儘管看起來可能在對初期收集反饋意見，和研究方面有用，但你不會在意使用的方法是否正式，只要能讓你快速理解就行。

把線框圖納入整個設計流程中，效果是十分顯著的，雖然近年來它遭受了一些非議，但在一個複雜專案的啟動階段仍是不可或缺的。

什麼是產品原型（Prototype）

產品原型，很容易讓人和線框圖混淆，是最終產品的中到高保真的展示，並可以模擬使用者介面的互動。 它應該能讓使用者：

• 體驗產品內容並與介面進行互動

• 以接近最終產品的主要互動方式來測試產品

產品原型可以對使用者和產品最終的介面的互動進行模擬。雖然它看起來可能和最終產品不完全一樣，但也應該很接近（肯定不是灰色盒子和草圖一樣的東西）。必須小心構建互動方式，你需要讓它接近於最終的產品體驗。前端介面和後端之間的互動關係通常可以忽略，這樣就可以節約成本、加快開發速度。

產品原型用來在使用者測試中的發現所有潛在問題。 在最終的介面開發之前，進行這樣的模擬是對互動方式和可用性最好的測試。

產品原型通常不是你想象的那樣完美，因為它的任務只是讓使用者能理解互動介面。另一方面，產品原型又是迷人的，因為它能把無形的設計文件變成簡單明瞭的有形介面。

例如你可以用 UXPin 做一個快速互動模型，建立產品原型，分享給他人使用，並進行適當的可用性研究。

什麼是介面原型（Mockup）

介面原型是一種靜態的，中到高保真的設計展現。介面原型通常是視覺設計稿，也可能是真實的視覺設計。一個良好的介面原型：

• 展現可以資訊結構，將內容視覺化，並靜態的演示基本的功能

• 主要讓人們關注產品的視覺方面。許多人也很容易把介面原型和線框圖搞混，因為某公司的軟體名。

介面原型的用處主要是展示給利益相關者，如果他們看懂了，你就可以更早的獲得支援。由於它的視覺特性，介面原型並非低保真的交付成果，製作也比互動原型快的多。它是很好的意見反饋收集器，放在整個設計流程的場景中，也是設計文件中比較好看的那一部分。

使用者體驗交付世界中的產品經理

大多數情況下，產品經理工作都是繪製線框圖和製作中保真產品原型。這些都不需要藝術天分，而是有關使用者行為的知識，產品經理能把他獨特的觀點融入產品中，並和團隊成員和諧共處。

例如使用 UXPin —— 一款線上協同設計程式可以讓你和使用者體驗設計師一同工作。團隊成員可以線上交流關於介面的意見。實時的協同工作能構建了一種理想的合作氣氛。要認真對待並積極探討解決方案，不要總是強迫別人接受你的意見。

與常見的看法不同，我不認為低保真的交付成果（線框圖）比中保真的交付成果（產品原型）更容易。雖然製作產品原型通常需要花費更多時間（為介面元素新增互動總是需要一些工作量的），而由於線框圖的設計表達形式上的簡單很容易被人誤解。

我曾目睹過許多產品經理在繪製線框圖時犯過的錯誤，這會損害團隊成員之間的溝通，所以我想稍微解釋一下。

把過多（或過少）的細節納入一個線框圖——是危險的行為，可能影響到整個設計流程。

通過了解5個線框圖的繪製原則，我希望你引以為戒避免重蹈覆轍。

1. 排除干擾

你要十分清楚想要良好溝通的前提就是排除干擾。

那麼是什麼在干擾線框圖呢？

• 使用不恰當的顏色
• 不恰當的保真度
• 難看的影像和圖示
• 奇怪難辨的字型
• 只有你自己能看懂的符號標記
• 任何讓人難以理解的東西

你的設計理念應該這樣。保持簡潔：不允許任何裝飾，只保留必要的元素。

我這有個例子：從前有個使用者體驗設計師總喜歡在佔位符（打叉的方格）上寫一些縮寫，來標註圖片的型別。他自己可能很清楚，但別人不見得知道這是什麼。

當然你可以使用一些祕密的標記來讓自己看懂？但要是想展示給團隊和客戶就不要這麼做。這些縮寫會分散讀者的注意力並對理解設計造成干擾。

2. 謹慎地使用顏色

顏色同樣會造成很多誤解。線框圖應該是隻有黑色或白色的一堆方格子嗎？或者應該是五顏六色視覺設計?

都不是。為什麼？因為並非只有黑白或五顏六色的東西才能清楚的表達設計。我建議你閱讀如下原則：

• 用深淺不同的灰度來表達介面和內容結構
• 並用不同的灰度來表達層級和順序
• 圖片和圖示的顏色都是灰色的（不要在視覺上突出它們）
• 在不同的元素間要有恰當的對比（尤其是文字部分，要易於閱讀）
• 可以用藍色來表達連結，紅色的方框表示通知，綠色的方框表示確認，藍色的方框表示資訊，黃色表示警告（在表單中這些尤為重要，確保使用恰當的顏色，並讓團隊都瞭解這幾種顏色代表的重要程度）
• 避免使用純黑——黑色的邊框讓線框圖看起來很混亂

3. 避免過度設計

過度設計也是一個比較容易犯的錯誤。必須記住你正努力用最簡潔、清晰、快速的方式傳達設計思想。不要搞的太花哨。

只因為線框圖不好看就反覆修改介面完全是在浪費時間。當你面臨一個元素取捨的困境時，可以用以下原則拷問自己：

• 這個特別的設計放在使用者使用場景中有意義嗎？
• 清楚地傳達了意義和價值嗎?
• 其他團隊成員能理解嗎？

你要考慮的不是好看不好看，而是考慮是否清晰合理。

4. 使用真實的尺寸 (近似地)

根據你的實際尺寸設計（比如你要設計一個網頁應用，寬度是980畫素，那麼你的畫板上的線框圖也應該是980畫素）並且按比例排列所有介面元素。

為什麼這樣做？因為在寬廣的1200畫素畫板上排布元素是很輕鬆的，但視覺設計師通常被迫要把所有元素擠到980畫素。你必須事先了解限制因素。用假想的尺寸開發產品簡直就是自尋死路。不要再任何不確定的東西上做設計。

5. 功能可見性很重要

早在1988年使用者體驗設計之父唐•諾曼，就用了一個由詹姆斯•吉布森命名的心理學術語——啟示（affordances），來描述人類感知事物的功能可見性。軟體介面中的按鈕看起來就是想讓人去按的；標籤就是表示可以切換不同的內容；輸入框表示可以輸入文字等等。

想要清楚地傳達你的想法——你必須讓按鈕看起來像按鈕，標籤看起來像標籤，輸入框像輸入框…我甚至會說在最終產品的功能可見性和你線上框圖中表達的是一樣的。在最終產品中，使用者能夠理解產品的功能，線上框圖中也應該同樣表達清楚。

功能可見性會讓線框圖確切的表達你的想法。

立刻實踐你的設計技能！

設計同其他技能一樣都需要大量的練習。儘管製作線框圖和產品原型看起來很容易，但是依然要遵循某些規則，所以你需要先學習之後才能把它們付諸實踐。

讓我們設想一下，你和團隊成員正在研究一個的電子商務登入頁面。你有自己的想法，知道應該怎麼辦，你需要把想法展示給團隊以便讓他們瞭解你的這個備選方案。

1.首先應該準備一張畫布。設定網格和網站的寬度。你就可以用正確的比例和尺寸限制來繪圖。980畫素是目前網站開發的標準寬度。我還會用比較常用的12分欄網格作為介面元素排列的參考，當然這不是必須的。

2.規劃網站的架構並建立一個站點地圖。從與客戶的交流和你的使用者故事中，你已經知道登陸頁面的大概樣子：

• 一個有內容描述的主頁
• 一個購物車頁面
• 一個訂貨表單
• 一個確認購買頁
• 一個展示配送歷史資訊的頁面
• 聯絡人頁面，關於我們頁面
• 一個服務條款頁面

建立好所有的頁面之後，通過編輯器新增新的頁面線框圖形成簡單的站點地圖。拖拽並使它們的符合你網站的層次結構 。

3.規劃好你的第一個網站結構。就可以在頂部設定一個導航。畫一個盒子表示主要內容和頁尾元素。在充分發揮你的創造力之前，你要有個基本的佈局。

4.建立導航。從頂部選單開始。為了避免誤導，確保所在頁面（主頁）的背景是白色的。購物車和服務條款是導航裡重要的組成部分。

我常用藍色清晰的強調連結元素，它們可以跳轉到特定的頁面（你真的可以把這些頁面連結起來，整個導航以後都可以重複使用）。我也會從審美的角度使用不同深淺的灰色標記內容層級。

5.設定主要的內容塊。確保和你實際網站內容大小一致。它可以展示正確的比例和限制因素。也可以讓你的快速的進行除錯。

記住，線框圖的美觀度在這一步很重要。視覺設計不能是錯誤的，看起來要很專業。視覺層次結構可以通過灰色陰影清晰的展現。簡潔的排版不會讓人分心去關注內容。我會使用網格和參考線來保持元素對齊。

最後的細節改善。我會線上框圖上新增具有清晰功能可見性的按鈕。它看起來確實像一個按鈕，讓人明白它是可以按的。並連結到購物車頁面讓使用者能輕鬆的理解這是個簡單的互動。

你也可以新增幾個專案備註（右下角）併為開發人員新增一些描述。讓這個線框圖更利於溝通。

線框圖、產品原型和溝通

你要牢記線框圖和產品原型永遠只是溝通工具。清楚的交流設計思想是使用它們的主要目的。

你用 UXPin 畫的線框圖，是想把一個特定使用者的問題的解決方案告訴給團隊。你當然可以用言語來描述，但我們常說“一圖值千言”。

每當你在為線框圖爭執時，記住你設計線框圖是為了交流想法，而不是為了爭奪你在公司裡的地位。

稍作休息，來享受一下這個通向偉大的產品過程。