從功能需求分析到核心確認，產品設計的最終具象化是原型設計。它是產品經理日常進行的最多的工作之一，決定了產品的“長相”。進行原型設計需要對信息架構和交互設計展開規劃，文章結合案例，對這兩個模塊展開了分析，與大家分享。
通過產品設計務實系列文章的前兩篇（《產品設計務實：產品為什麼“長”成這個樣子？》和《產品設計務實：抓住產品的真正核心》），我們一起分析了產品“容貌”的決定因素是產品本身，也就是説從一個產品的定位（產品是做什麼的）開始，它的形態基本就已經確認了；
接着，我們從確定了的產品定位和功能出發，抽取了產品的兩個核心：核心元素和核心任務鏈，得以在產品基本形態確認（我們可以稱之為“骨骼”確認）的基礎上，將產品設計繼續延申和擴展，“附之以血肉”；到了第三步，也是最後一步，就是將這“骨骼”和“血肉”的內容映射到“可視化”的“表皮”層面，即原型設計，實現產品的最終具象化。
一、骨肉皮Groupie, 骨肉皮。在搖滾圈，或者泛娛樂圈裏對一類人的統稱，多半是女生。他們追求和明星（可以是影星，歌星，作家等）發生關係（大多數情況下是肉體，少數情況為精神上的）。不過，在今天的引述裏是為了其他的用意，我們借用這個表達，並且把它做一個拆分，拆分成：骨、肉、皮。
作為生命形體構成形式，骨、肉、皮 剛好按照了肌體構成“由內核向外延”的方式進行排列，同時也是按照支撐肌體構成、支撐生命體存續重要程度的“由重向輕”的排列順序。基於此，我們借用這個詞來映射產品的定位和功能，產品的核心元素和核心任務鏈，以及產品的原型設計對於產品本身以及他們之間的相互關係。
1. 產品的定位和功能是產品的骨一個產品是幹什麼的，從根本上決定了產品最終呈現給用户的樣子，如果它是一隻霸王龍，那麼它就和翼龍不一樣，它有強壯的大腿，用來快速奔跑追逐獵物，而不是長出一對翅膀。
回到互聯網產品的定位和功能上，我們大致區分的話，可以得到這樣的分類：購物、社交、內容、工具及遊戲，當然手機應用商店的分類會比這個要細緻一些，但實際上都可以歸集到上述五類中的一類或多類（產品功能的跨越性導致的多類型）。
例如，我們前述的例子，微信毫無疑問是社交產品，但同時在不斷的版本迭代帶來的功能的添加之後，它同時也具有了購物的功能（商家小程序等）、內容的功能（公眾號）、工具的功能（各種小程序，比如查詢公交地鐵等到站信息）以及遊戲的功能（微信飛機大戰），但這些都不影響微信作為社交產品的定位，相反地微信通過適度地添加功能不斷強化社交的屬行、誘導社交的行為。
微信_飛機大戰（圖片來自網絡）
2. 核心元素和核心任務鏈是產品的肉產品向用户提供那些信息，通過怎麼樣的方式、過程來幫助用户達到使用產品的目的，實現產品定位和功能的價值，就是依附在“骨”上的“肉”的職責。通過“肉”，“骨”具備了一定的形象，變得豐滿起來，“肉”對“骨”進行了解釋和説明，並受“骨”的約束。
還是以微信來説，需要展示哪些信息是以滿足社交活動這一定位為前提，並服務於社交活動的展開；操作流程的設計也是根據社交活動開展的流程，映射用户行為並服務於用户在這個過程中的操作而進行的。因此，核心元素的“肉”決定了產品基本的信息架構，核心任務鏈的“肉”決定了產品基本的交互結構。
3. 原型設計是產品的皮蒙在“骨肉”之外的，就是產品的“門面”，也正是在映射用户心智的基礎上，通過符合交互習慣和用户使用習慣的方式把產品的定位和功能，核心元素和核心任務鏈進行的可視化呈現、可視化傳達。
換句話説，原型設計所扮演的是產品最終同用户接觸點的角色，一個產品的定位和功能是否符合用户期望，所展示的信息是否足夠，設定的業務流程是否清晰流暢，都將最終由原型設計來進行傳達。
從這個意義上來説，雖然，原型設計是產品設計的“皮毛”，但是如果這個“皮毛”不夠靚麗，再好的“骨”“肉”，用户也是沒有興趣。
既然直接面向終端用户的“皮”這麼重要，沒辦法像“骨”和“肉”一樣是可以躲起來，而且更為重要的是——對於“皮”的設計和處理可能是產品經理日常進行的最多的工作之一，不管是一整個APP的設計，一個業務模塊的設計，還是一個功能點的設計。那麼，問題來了：怎樣處理“皮”才是正確的呢？
二、沒有正確答案這個問題可能真的沒有絕對“正確”的答案。因為，絕對正確這個概念本身並不存在，就原型設計來説，決定原型設計的因素有很多，比如網絡環境、終端設備、用户羣體、主流設計風格、實現成本以及服務系統效能等等。
不同的影響元素對於原型設計都會有自己的“價值”主張，而且有可能互相沖突（比如用户羣體特性的高要求和技術實現成本的低儲備）。另外還要看產品定位上對於某一個方面的目的的側重，比如強化商業轉化、付費轉化的功能，必然會對主業務流程的支持上造成一定的影響。但是產品的商業訴求必須是需要去滿足的，除非是公益性的產品。
所以一個保守但是相當有效的方式就是向成功的前輩學習，俗稱“抄”。這麼做的原因有三：
- 通過實踐證明的穩定性、可用性和易用性。在信息架構和交互架構設計領域有着很多經過時間檢驗過的定律及法則來作為設計的指導，它幫助我們還原作為產品使用者的人的認知問題的方式和方法、一些普遍的規律以及不同情境下的行為偏好；
- 省去用户學習的成本。就像我們不認為有正確的答案一樣，信息展示和流程設計的實現方式是多樣的。只不過需要考慮的是，用户接觸到一個新樣式，新模式的時候，有多大的興趣去接受你的新模式，需要多久的時間去學習，特別是在眾多產品共同搶奪用户使用時長的這個語境之下。
- 良好的微創新的平台。在穩定、可用、易用的前提下，在保持基本信息架構和交互結構的基礎上，根據產品的需求進行“自定義”的微調整和微創新，從而實現通用向創新的自然過渡。
就 原型設計 來説，與產品需求文檔不同，它是一個產品需求的可視化呈現過程，其目的在於產品經理同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協議