產品設計務實：產品的最終具象化

透過產品設計務實系列文章的前兩篇（《產品設計務實：產品為什麼“長”成這個樣子？》和《產品設計務實：抓住產品的真正核心》），我們一起分析了產品“容貌”的決定因素是產品本身，也就是說從一個產品的定位（產品是做什麼的）開始，它的形態基本就已經確認了；

接著，我們從確定了的產品定位和功能出發，抽取了產品的兩個核心：核心元素和核心任務鏈，得以在產品基本形態確認（我們可以稱之為“骨骼”確認）的基礎上，將產品設計繼續延申和擴充套件，“附之以血肉”；到了第三步，也是最後一步，就是將這“骨骼”和“血肉”的內容對映到“視覺化”的“表皮”層面，即原型設計，實現產品的最終具象化。

一、骨肉皮

Groupie, 骨肉皮。在搖滾圈，或者泛娛樂圈裡對一類人的統稱，多半是女生。他們追求和明星（可以是影星，歌星，作家等）發生關係（大多數情況下是肉體，少數情況為精神上的）。不過，在今天的引述裡是為了其他的用意，我們借用這個表達，並且把它做一個拆分，拆分成：骨、肉、皮。

作為生命形體構成形式，骨、肉、皮 剛好按照了肌體構成“由核心向外延”的方式進行排列，同時也是按照支撐肌體構成、支撐生命體存續重要程度的“由重向輕”的排列順序。基於此，我們借用這個詞來對映產品的定位和功能，產品的核心元素和核心任務鏈，以及產品的原型設計對於產品本身以及他們之間的相互關係。

1. 產品的定位和功能是產品的骨

一個產品是幹什麼的，從根本上決定了產品最終呈現給使用者的樣子，如果它是一隻霸王龍，那麼它就和翼龍不一樣，它有強壯的大腿，用來快速奔跑追逐獵物，而不是長出一對翅膀。

回到網際網路產品的定位和功能上，我們大致區分的話，可以得到這樣的分類：購物、社交、內容、工具及遊戲，當然手機應用商店的分類會比這個要細緻一些，但實際上都可以歸集到上述五類中的一類或多類（產品功能的跨越性導致的多型別）。

例如，我們前述的例子，微信毫無疑問是社交產品，但同時在不斷的版本迭代帶來的功能的新增之後，它同時也具有了購物的功能（商家小程式等）、內容的功能（公眾號）、工具的功能（各種小程式，比如查詢公交地鐵等到站資訊）以及遊戲的功能（微信飛機大戰），但這些都不影響微信作為社交產品的定位，相反地微信透過適度地新增功能不斷強化社交的屬行、誘導社交的行為。

微信_飛機大戰（圖片來自網路）

2. 核心元素和核心任務鏈是產品的肉

產品向用戶提供那些資訊，透過怎麼樣的方式、過程來幫助使用者達到使用產品的目的，實現產品定位和功能的價值，就是依附在“骨”上的“肉”的職責。透過“肉”，“骨”具備了一定的形象，變得豐滿起來，“肉”對“骨”進行了解釋和說明，並受“骨”的約束。

還是以微信來說，需要展示哪些資訊是以滿足社交活動這一定位為前提，並服務於社交活動的展開；操作流程的設計也是根據社交活動開展的流程，對映使用者行為並服務於使用者在這個過程中的操作而進行的。因此，核心元素的“肉”決定了產品基本的資訊架構，核心任務鏈的“肉”決定了產品基本的互動結構。

3. 原型設計是產品的皮

蒙在“骨肉”之外的，就是產品的“門面”，也正是在對映使用者心智的基礎上，透過符合互動習慣和使用者使用習慣的方式把產品的定位和功能，核心元素和核心任務鏈進行的視覺化呈現、視覺化傳達。

換句話說，原型設計所扮演的是產品最終同用戶接觸點的角色，一個產品的定位和功能是否符合使用者期望，所展示的資訊是否足夠，設定的業務流程是否清晰流暢，都將最終由原型設計來進行傳達。

從這個意義上來說，雖然，原型設計是產品設計的“皮毛”，但是如果這個“皮毛”不夠靚麗，再好的“骨”“肉”，使用者也是沒有興趣。

既然直接面向終端使用者的“皮”這麼重要，沒辦法像“骨”和“肉”一樣是可以躲起來，而且更為重要的是——對於“皮”的設計和處理可能是產品經理日常進行的最多的工作之一，不管是一整個APP的設計，一個業務模組的設計，還是一個功能點的設計。那麼，問題來了：怎樣處理“皮”才是正確的呢？

二、沒有正確答案

這個問題可能真的沒有絕對“正確”的答案。因為，絕對正確這個概念本身並不存在，就原型設計來說，決定原型設計的因素有很多，比如網路環境、終端裝置、使用者群體、主流設計風格、實現成本以及服務系統效能等等。

不同的影響元素對於原型設計都會有自己的“價值”主張，而且有可能互相沖突（比如使用者群體特性的高要求和技術實現成本的低儲備）。另外還要看產品定位上對於某一個方面的目的的側重，比如強化商業轉化、付費轉化的功能，必然會對主業務流程的支援上造成一定的影響。但是產品的商業訴求必須是需要去滿足的，除非是公益性的產品。

所以一個保守但是相當有效的方式就是向成功的前輩學習，俗稱“抄”。這麼做的原因有三：

1. 透過實踐證明的穩定性、可用性和易用性。在資訊架構和互動架構設計領域有著很多經過時間檢驗過的定律及法則來作為設計的指導，它幫助我們還原作為產品使用者的人的認知問題的方式和方法、一些普遍的規律以及不同情境下的行為偏好；
2. 省去使用者學習的成本。就像我們不認為有正確的答案一樣，資訊展示和流程設計的實現方式是多樣的。只不過需要考慮的是，使用者接觸到一個新樣式，新模式的時候，有多大的興趣去接受你的新模式，需要多久的時間去學習，特別是在眾多產品共同搶奪使用者使用時長的這個語境之下。
3. 良好的微創新的平臺。在穩定、可用、易用的前提下，在保持基本資訊架構和互動結構的基礎上，根據產品的需求進行“自定義”的微調整和微創新，從而實現通用向創新的自然過渡。

三、原型設計，最終的具象化

就 原型設計 來說，與產品需求文件不同，它是一個產品需求的視覺化呈現過程，其目的在於產品經理同UI設計師、UE設計師以及開發工程師進行更準確、更有效的溝通，幫助設計師和工程師對於產品需求的可行性和易用性進行更直觀的判斷，最終保證實現效果與需求一致。

從這個意義上說，原型設計解決的雖然不是“產品是什麼的問題”（當然也有團隊直接以原型設計作為產品需求文件），更多的是“產品長成什麼樣子”的問題。

換句話說，原型設計可能並不是必需，但肯定是可以更好地幫助我們去實現產品。根據前文推演，我們決定了要透過“抄”的方式來指導原型設計，抄什麼，怎麼抄，怎麼樣去呈現“骨”和“肉”？解決這個問題，我們一方面要了解進行原型設計需要規劃的兩個模組，另一方面那看前輩給我們留下了的可以借鑑的“經驗”和“模板”。

模組一：資訊架構

資訊架構，即資訊的架構。從語法的角度來說，資訊是架構的定語，架構是中心詞。它是按照一定的方式、方法用來組織資訊，以使資訊有某種或者多種結構化的方式進行展示，從而科學、有序和有效的達成資訊傳達的目的。

從視覺直觀的角度說，我們在各種產品中看到的頁面、影片、圖片、圖示、文案、按鈕、彈窗等等，都屬於資訊的範疇。常見的資訊架構模式包括 層級式、輻射式、套娃式、標籤檢視、便當盒和篩選檢視；也有按照目的維度去畫分的，包括 分類系統、導航系統、標籤系統、搜尋系統、個性化推薦系統。

兩種分類方式沒有本質上的差別，前面一種分類方式是PC站時代的定義，後面一種主要是APP站時點的定義，而APP站作為PC站的繼承和發揚，在資訊架構上並不是一種“原生”的創新，兩種分類方法也就存在著一定的對映關係，比如，從命名上就能看出的一致（標籤檢視與標籤系統、搜尋系統和篩選檢視）。既然存在多種的資訊架構模式，如何選擇呢？

這就要回歸到我們產品的定位、功能和核心元素和核心任務鏈上。產品定位是一個資訊聚合平臺（如某頭條）的話，功能主要是向用戶包括文字、圖片、音訊、影片等多媒體資訊，對應的核心元素就是這些多媒體資訊，而核心任務鏈勢必就是圍繞使用者如何獲取、檢視資訊，輔以定向主動獲取、定向被動推送，以及資訊獲取後的反饋機制等。

基於分析，我們就應當選用一種更便於資訊組織的資訊架構模式來作為產品的主資訊架構，比如分類系統，而輔之導航系統、搜尋系統和個性化推薦系統。

資訊架構示例（圖片來自網路）

模組二：互動設計

互動設計（Interaction Design, 縮寫IXD)，完整的說應該是“人機互動設計”，在學科上說應該是在工業設計的範疇之內，屬於子學科。

我們還是從語法的角度來說，互動是設計的定語，是設計的約束語。而互動是接觸和反饋的集合體，交即接觸，互即互動和反饋。所以互動設計就是對互動行為、互動過程、互動方式、互動載體等進行的可用、易用和通用的設計。

透過對於互動的設計，創造和建立的是人與人之外的，特別是計算機系統、工業裝置等“非人”之間的相互交流、操作互動的方式，實現“人機”的互動。從視覺直觀的角度說，我們在各種產品中看到的介面、輸入框、選擇控制元件、確定或者取消按鈕、彈窗、蒙版提示等，包括SIRI的語音助手、華為的骨節敲擊、微信的搖一搖都是互動設計的範疇。

常見的用於互動設計細分包括：互動介面（包括互動反饋）的設計、互動控制元件的選擇和互動動作（包括互動方式）的選擇。其中：

（1）互動介面

是互動動作和互動方式的載體，它與資訊架構有一定的關聯，但側重點有不同，除了考慮保證互動資訊（提示資訊、按鈕等）完整性之外，還需要考慮介面佈局的合理性，如按鈕的位置，關聯資訊的距離等。

關於互動架構模式佈局設計的基本理論主要有以下幾種：格式塔原理、網格系統、7±2法則、席克定律、費茨定律、奧卡姆剃刀原理、複雜性守恆定律，網上有很多前輩都做了充分的介紹，大家可參考閱讀。

互動介面（圖片來自網路）

（2）互動控制元件

如果大家留意的話，相比於互動介面的設計，對於互動控制元件和互動動作的描述，我們使用了“選擇”。之所以這樣處理是因為互動控制元件在不同的系統裡，比如網頁、IOS客戶端或者安卓客戶端都有了比較明確的定義，而且新增也往往是一個系統化定義的過程，新增更新的週期也會比較長（涉及到大量使用者對新互動控制元件的普遍認可和接受）。

不同系統定義好的互動控制元件都是有公開資料可以查閱的，而且我們的原型設計軟體也會將基本的互動控制元件作為基本元素，提供我們進行“拖拽”使用。常見的互動控制元件包括：彈窗（Alert_會話彈窗/Alert Dialog）、操作選單（Action Sheets_控制選單/Popover、Action views、Sheets_bottom、Dropdown menu等）、浮窗提示（Toast_提示/Snackbars），這部分也有很詳實的公開資料可以查閱和學習。

互動控制元件（圖片來自網路）

（3）互動動作

簡單來說是人，特別是人手 在互動介面對互動控制元件進行操作的動作。 在APP站常見的交易動作包括，點選、長按、划動（上下、左右）、拖拽、拖拉（多觸點、多手指）等。

這些基本的互動動作是符合了使用者的認知和直接的條件反射的，也是滿足我們基本的產品功能的操作需求的。我們日常體驗中，幼兒，特別是很多嬰兒可以很自如的操作我們的手機的一些功能就很好的說明了這個現象。

互動動作（圖片來自網路）

如前述，互動介面、互動控制元件的選擇和互動動作選擇所服務的是產品的核心任務鏈，透過必要資訊、控制元件的組織，配合資訊架構引導使用者完成核心任務鏈，即業務流程的操作，最終完成其使用產品的目的。

樣例

我們還是用前文提到的醫療平臺作為樣例，來製作一個簡單的線框結構的原型（再次感謝提供案例的同學）。在上兩篇裡分析的基礎上，作為案例的“移動線上醫療訓練平臺”定位是一個提供給備考考生，或者相關從業者進行“臨床類別實踐技能”訓練的平臺產品，也提取了它的核心元素（訓練內容、相關指導資訊、後評價資訊）和核心任務鏈【發現（訓練）——選擇（訓練）——進行（訓練）——（訓練）評價——發現（訓練）】。

此外，醫療平臺作為一個獨立的使用者產品，要需要加入一些標準的公共產品模組（如使用者管理：註冊、登入、個人資訊等）來構建。

原型樣例

以上原型設計僅作為樣例展示，實際的產品原型還是需要根據具體的需求進行設計，包括全業務流程的引導和控制，同時也依賴產品在同業產品中的行業定位、產品策略和競爭策略的不同而有所差別。

結語

產品設計的目標：為使用者帶來價值、為使用者提供舒適的使用體驗、為使用者提供情感的安慰、為使用者提供驚喜。

本篇是這個系列的文章的最後一篇，感謝閱讀和支援，產品路上，讓我們一起努力。

#相關閱讀#

《產品設計務實：產品為什麼“長”成這個樣子？》

《產品設計務實：抓住產品的真正核心》

#專欄作家#

大俠，人人都是產品經理專欄作家。混過文青的支付出道的產品人，長期以支付廝混，關注支付、O2O、社交領域，擅長行業、業務需求分析，產品設計和使用者體驗。

本文原創釋出於人人都是產品經理，未經許可，不得轉載。

題圖來自Unsplash，基於CC0協議