最終，是到了展示真正技術的時候了！通過 產品設計務實 系列文章的前兩篇（《產品設計務實：產品爲什麼“長”成這個樣子？》和《產品設計務實：抓住產品的真正核心》），我們一起分析了產品“容貌”的決定因素是產品本身，也就是說從一個產品的定位（產品是做什麼的）開始，它的形態基本就已經確認了；接着，我們從確定了的產品定位和功能出發，抽取了產品的兩個核心：核心元素和核心任務鏈，得以在產品基本形態確認（我們可以稱之爲“骨骼”確認）的基礎上，將產品設計繼續延申和擴展，“附之以血肉”；到了第三步，也是最後一步，就是將這“骨骼”和“血肉”的內容映射到“可視化”的“表皮”層面，即原型設計，實現產品的最終具象化。
骨肉皮
Groupie, 骨肉皮。在搖滾圈，或者泛娛樂圈裏對一類人的統稱，多半是女生。他們追求和明星（可以是影星，歌星，作家等）發生關係（大多數情況下是肉體，少數情況爲精神上的）。不過，在今天的引述裏是爲了其他的用意，我們借用這個表達，並且把它做一個拆分，拆分成：骨、肉、皮。
作爲生命形體構成形式，骨、肉、皮 剛好按照了肌體構成“由內核向外延”的方式進行排列，同時也是按照支撐肌體構成、支撐生命體存續重要程度的“由重向輕”的排列順序。基於此，我們借用這個詞來映射產品的定位和功能，產品的核心元素和核心任務鏈，以及產品的原型設計對於產品本身以及他們之間的相互關係。
產品的定位和功能是產品的骨。一個產品是幹什麼的，從根本上決定了產品最終呈現給用戶的樣子，如果它是一隻霸王龍，那麼它就和翼龍不一樣，它有強壯的大腿，用來快速奔跑追逐獵物，而不是長出一對翅膀。回到互聯網產品的定位和功能上，我們大致區分的話，可以得到這樣的分類：購物、社交、內容、工具及遊戲，當然手機應用商店的分類會比這個要細緻一些，但實際上都可以歸集到上述五類中的一類或多類（產品功能的跨越性導致的多類型）。例如，我們前述的例子，微信毫無疑問是社交產品，但同時在不斷的版本迭代帶來的功能的添加之後，它同時也具有了購物的功能（商家小程序等）、內容的功能（公衆號）、工具的功能（各種小程序，比如查詢公交地鐵等到站信息）以及遊戲的功能（微信飛機大戰），但這些都不影響微信作爲社交產品的定位，相反地微信通過適度地添加功能不斷強化社交的屬行、誘導社交的行爲。
核心元素和核心任務鏈是產品的肉。產品向用戶提供那些信息，通過怎麼樣的方式、過程來幫助用戶達到使用產品的目的，實現產品定位和功能的價值，就是依附在“骨”上的“肉”的職責。通過“肉”，“骨”具備了一定的形象，變得豐滿起來，“肉”對“骨”進行了解釋和說明，並受“骨”的約束。還是以微信來說，需要展示哪些信息是以滿足社交活動這一定位爲前提，並服務於社交活動的展開；操作流程的設計也是根據社交活動開展的流程，映射用戶行爲並服務於用戶在這個過程中的操作而進行的。因此，核心元素的“肉”決定了產品基本的信息架構，核心任務鏈的“肉”決定了產品基本的交互結構。
原型設計是產品的皮。蒙在“骨肉”之外的，就是產品的“門面”，也正是在映射用戶心智的基礎上，通過符合交互習慣和用戶使用習慣的方式把產品的定位和功能，核心元素和核心任務鏈進行的可視化呈現、可視化傳達。話句話說，原型設計所扮演的是產品最終同用戶接觸點的角色，一個產品的定位和功能是否符合用戶期望，所展示的信息是否足夠，設定的業務流程是否清晰流暢，都將最終由原型設計來進行傳達。從這個意義上來說，雖然，原型設計是產品設計的“皮毛”，但是如果這個“皮毛”不夠靚麗，再好的“骨”“肉”，用戶也是沒有興趣。
既然直接面向終端用戶的“皮”這麼重要，沒辦法像“骨”和“肉”一樣是可以躲起來，而且更爲重要的是——對於“皮”的設計和處理可能是產品經理日常進行的最多的工作之一，不管是一整個APP的設計，一個業務模塊的設計，還是一個功能點的設計。那麼，問題來了：怎樣處理“皮”纔是正確的呢？
沒有正確答案
這個問題可能真的沒有絕對“正確”的答案。因爲，絕對正確這個概念本身並不存在，就原型設計來說，決定原型設計的因素有很多，比如網絡環境、終端設備、用戶羣體、主流設計風格、實現成本以及服務系統效能等等。不同的影響元素對於原型設計都會有自己的“價值”主張，而且有可能互相沖突（比如用戶羣體特性的高要求和技術實現成本的低儲備）。另外還要看產品定位上對於某一個方面的目的的側重，比如強化商業轉化、付費轉化的功能，必然會對主業務流程的支持上造成一定的影響。但是產品的商業訴求必須是需要去滿足的，除非是公益性的產品。所以一個保守但是相當 有效 的方式就是向成功的前輩學習，俗稱“抄”。這麼做的原因有三：
1、通過實踐證明的穩定性、可用性和易用性。在信息架構和交互架構設計領域有着很多經過時間檢驗過的定律及法則來作爲設計的指導，它幫助我們還原作爲產品使用者的人的認知問題的方式和方法、一些普遍的規律以及不同情境下的行爲偏好；
2、省去用戶學習的成本。就像我們不認爲有正確的答案一樣，信息展示和流程設計的實現方式是多樣的。只不過需要考慮的是，用戶接觸到一個新樣式，新模式的時候，有多大的興趣去接受你的新模式，需要多久的時間去學習，特別是在衆多產品共同搶奪用戶使用時長的這個語境之下。
3、良好的微創新的平臺。在穩定、可用、易用的前提下，在保持基本信息架構和交互結構的基礎上，根據產品的需求進行“自定義”的微調整和微創新，從而實現通用向創新的自然過渡。
原型設計，最終的具象化
就 原型設計 來說，與產品需求文檔不同，它是一個產品需求的可視化呈現過程，其目的在於產品經理同UI設計師、UE設計師以及開發工程師進行更準確、更有效的溝通，幫助設計師和工程師對於產品需求的可行性和易用性進行更直觀的判斷，最終保證實現效果與需求一致。從這個意義上說，原型設計解決的雖然不是“產品是什麼的問題”（當然也有團隊直接以原型設計作爲產品需求文檔），更多的是“產品長成什麼樣子”的問題。換句話說，原型設計可能並不是必需，但肯定是可以更好地幫助我們去實現產品。根據前文推演，我們決定了要通過“抄”的方式來指導原型設計，抄什麼，怎麼抄，怎麼樣去呈現“骨”和“肉”？解決這個問題，我們一方面要了解進行原型設計需要規劃的兩個模塊，另一方面那看前輩給我們留下了的可以借鑑的“經驗”和“模板”。
模塊一：信息架構
信息架構，即信息的架構。從語法的角度來說，信息是架構的定語，架構是中心詞。它是按照一定的方式、方法用來組織信息，以使信息有某種或者多種結構化的方式進行展示，從而科學、有序和有效的達成信息傳達的目的。從視覺直觀的角度說，我們在各種產品中看到的頁面、視頻、圖片、圖標、文案、按鈕、彈窗等等，都屬於信息的範疇。常見的信息架構模式包括 層級式、輻射式、套娃式、標籤視圖、便當盒和篩選視圖；也有按照目的維度去畫分的，包括 分類系統、導航系統、標籤系統、搜索系統、個性化推薦系統。兩種分類方式沒有本質上的差別，前面一種分類方式是PC站時代的定義，後面一種主要是APP站時點的定義，而APP站作爲PC站的繼承和發揚，在信息架構上並不是一種“原生”的創新，兩種分類方法也就存在着一定的映射關係，比如，從命名上就能看出的一致（標籤視圖與標籤系統、搜索系統和篩選視圖）。既然存在多種的信息架構模式，如何選擇呢？
這就要回歸到我們產品的定位、功能和核心元素和核心任務鏈上。產品定位是一個信息聚合平臺（如某頭條）的話，功能主要是向用戶包括文字、圖片、音頻、視頻等多媒體信息，對應的核心元素就是這些多媒體信息，而核心任務鏈勢必就是圍繞用戶如何獲取、查看信息，輔以定向主動獲取、定向被動推送，以及信息獲取後的反饋機制等。基於分析，我們就應當選用一種更便於信息組織的信息架構模式來作爲產品的主信息架構，比如分類系統，而輔之導航系統、搜索系統和個性化推薦系統。
模塊二：交互設計
交互設計（Interaction Design, 縮寫IXD)，完整的說應該是“人機交互設計”，在學科上說應該是在工業設計的範疇之內，屬於子學科。我們還是從語法的角度來說，交互是設計的定語，是設計的約束語。而交互是接觸和反饋的集合體，交即接觸，互即互動和反饋。所以交互設計就是對交互行爲、交互過程、交互方式、交互載體等進行的可用、易用和通用的設計。通過對於交互的設計，創造和建立的是人與人之外的，特別是計算機系統、工業設備等“非人”之間的相互交流、操作交互的方式，實現“人機”的互動。從視覺直觀的角度說，我們在各種產品中看到的界面、輸入框、選擇控件、確定或者取消按鈕、彈窗、蒙版提示等，包括SIRI的語音助手、華爲的骨節敲擊、微信的搖一搖都是交互設計的範疇。常見的用於交互設計細分包括：交互界面（包括交互反饋）的設計、交互控件的選擇和交互動作（包括交互方式）的選擇。其中：
交互界面 是交互動作和交互方式的載體，它與信息架構有一定的關聯，但側重點有不同，除了考慮保證交互信息（提示信息、按鈕等）完整性之外，還需要考慮界面佈局的合理性，如按鈕的位置，關聯信息的距離等，關於交互架構模式佈局設計的基本理論主要有以下幾種：格式塔原理、網格系統、7±2法則、席克定律、費茨定律、奧卡姆剃刀原理、複雜性守恆定律，網上有很多前輩都做了充分的介紹，大家可參考閱讀。
交互控件 如果大家留意的話，相比於交互界面的設計，對於交互控件和交互動作的描述，我們使用了“選擇”。之所以這樣處理是因爲交互控件在不同的系統裏，比如網頁、IOS客戶端或者安卓客戶端都有了比較明確的定義，而且新增也往往是一個系統化定義的過程，新增更新的週期也會比較長（涉及到大量用戶對新交互控件的普遍認可和接受）。不同系統定義好的交互控件都是有公開資料可以查閱的，而且我們的原型設計軟件也會將基本的交互控件作爲基本元素，提供我們進行“拖拽”使用。常見的交互控件包括：彈窗（Alert_會話彈窗/Alert Dialog）、操作菜單（Action Sheets_控制菜單/Popover、Action views、Sheets_bottom、Dropdown menu等）、浮窗提示（Toast_提示/Snackbars），這部分也有很詳實的公開資料可以查閱和學習。
交互動作 簡單來說是人，特別是 人手 在交互界面對交互控件進行操作的動作。 在APP站常見的交易動作包括，點擊、長按、划動（上下、左右）、拖拽、拖拉（多觸點、多手指）等。這些基本的交互動作是符合了使用者的認知和直接的條件反射的，也是滿足我們基本的產品功能的操作需求的。我們日常體驗中，幼兒，特別是很多嬰兒可以很自如的操作我們的手機的一些功能就很好的說明了這個現象。
如前述，交互界面、交互控件的選擇和交互動作選擇所服務的是產品的核心任務鏈，通過必要信息、控件的組織，配合信息架構引導用戶完成核心任務鏈，即業務流程的操作，最終完成其使用產品的目的。
樣例
我們還是用前文提到的醫療平臺作爲樣例，來製作一個簡單的線框結構的原型（再次感謝提供案例的同學）。在上兩篇裏分析的基礎上，作爲案例的“移動在線醫療訓練平臺”定位是一個提供給備考考生，或者相關從業者進行“臨牀類別實踐技能”訓練的平臺產品，也提取了它的核心元素（訓練內容、相關指導信息、後評價信息）和核心任務鏈【發現（訓練）——選擇（訓練）——進行（訓練）——（訓練）評價——發現（訓練）】。此外，醫療平臺作爲一個獨立的用戶產品，要需要加入一些標準的公共產品模塊（如用戶管理：註冊、登錄、個人信息等）來構建。
以上原型設計僅作爲樣例展示，實際的產品原型還是需要根據具體的需求進行設計，包括全業務流程的引導和控制，同時也依賴產品在同業產品中的行業定位、產品策略和競爭策略的不同而有所差別。
結語
產品設計的目標：爲用戶帶來價值、爲用戶提供舒適的使用體驗、爲用戶提供情感的安慰、爲用戶提供驚喜。
本篇是這個系列的文章的最後一篇，感謝閱讀和支持，產品路上，讓我們一起努力。