原型製作是一個老生常談的問題，筆者分享了自己獨有的原型製作的經驗，將其歸納為“整”“拆”“合”“移”，並且給出了實際案例，非常具有參考性。
前言：大家好，本文主要通過介紹原型製作的四字法則：“整”“拆”“合”“移”，希望大家能夠有所得，更好地應用到自己實際的工作中去，提高自己的工作效率。
本次與前幾次的分享略有不同，我們不講如何構建組件的框架，這個知識點在前兩篇的分享文章中已經介紹的非常詳細了，要是新的觀眾不太瞭解的可以回看前兩篇關於組件庫打造的相關文章。
《技巧分享：Axure後臺組件製作的全過程》
《打造高品質Axure組件庫，就是這麼簡單！》
關於新組件MobileKit的彩蛋在此處放出，希望大家能夠喜歡。
MobileKit預覽效果：https://uedart.com/demo/templatesMobileKit/index.html
本次將著重介紹原型製作的方法體系以及如何將製作與方法體系相結合，快速幫助大家進行手機交互組件的落地製作。
通過瀏覽MobileKit組件庫的預覽效果，大家不難發現，本次的組件庫的體量是以往PC端組件庫的2倍之多，之所以有這麼大的體量是因為手機交互的多樣性。面對如此豐富的手機交互形式，我們在製作的過程中一定要有支撐自己思路的方法體系，才能讓我們的製作更有方法。
這套思路體系不僅僅適用於Axure組件的製作，對於工作中的一些事務處理也是不可或缺的“利器”。
一、方法體系起源
你們一定很疑惑，我的製作方法體系從何而來？
說起起源，這要感謝一本書《超級整理術》。這是一件很有意思的小事，因參與了當當網的滿減湊單意外地收穫了佐藤可士和的這本書，也正是這本書，讓我改變了很多我做事的方式與想法。
佐藤可士和在書中介紹的方法，能夠很好的應用到學習、生活、工作中的場景中使用，幫助我們更好的進行知識整理，希望大家可以從中獲得一些信息整理的啟發。
- 進行用戶調研與需求收集——收集信息；
- 對用戶反饋的需求進行需求分析——簡化信息；
- 進行信息結構與產品結構圖分析——分類信息；
- 按版本計劃將需求分配到不同版本中實現——信息優先級；
- 按流程進行信息的梳理整合——信息重組。
在後續的產品工作中我逐步優化簡化形成了一套製作原型的方法：“整”“拆”“合”“移”。
其實就像我們平時接觸到的很多產品一樣， 產品頁面本身都是由組件、元素構成的，這並不複雜。複雜的是我們要理清這些頁面背後的用戶需求、業務流程、邏輯走向，這才是頁面的核心要點。
有很多人問我如何快速畫原型，他們會在“畫”上下很多功夫，這就已經走上了一條錯誤的道路，我們應該花更多的時間與精力去提升自己的“思考力”，找準每件事的核心要點，比純粹的製作更為重要。
這也是我們為什麼製作組件的出發點，減少重複工作量，將製作組件化、模塊化，形成自己的組合思維，將更多有效的時間花在思考上，減少在原型上的試錯成本，達成快速製作原型的目標。
在此我將毫無保留地分析給大家，希望大家能夠有所收穫。
二、“整”字訣
“整”字訣介紹
何為“整”？——對所做進行信息的整理分析，明確目標與思路。
我們在製作原型時可以從以下三方面進行整理分析：
- 信息整理——信息的整理，理明確目標、整理需求、流程、信息；
- 佈局構建——佈局的整理，搭建大體結構，按信息整理的分析結果進行佈局；
- 細節處理——細節處理方式的整理，各個環節進行細節調整，完善整體原型、
這就像一個“金字塔”，每一層的推進都是重要的，從底層開始到最後頂尖層，每一個環節都搭建的很好，才可以構建一個穩固的金字塔。
示例1：首頁特色卡片打造
從小的卡片組件打造來講：
要做什麼：這裡我們要做的是一個特色卡片，目的是像用戶傳達相應活動的信息，以及做為活動的入口展示給用戶，達成首頁分流的目的。
如何去做：清晰了這一目的，我們在製作此類卡片上的目標就十分明確。
- 信息整理——信息的整理，明確目標後，卡片信息的整理；
- 佈局構建——佈局的整理，優先級區分，卡片佈局結構的搭建；
- 細節處理 ——細節處理方式的整理，規範、字體、圖標、間距、顏色、點綴、透明度的處理。
示例2：MobileKit組件庫打造
從大的組件庫打造來講：
要做什麼：我們此次要做的一件事是打造一個優秀的手機組件庫幫助大家快速完成原型製作。
如何去做： 在明確要做什麼的基礎上，我們要按序推進這個MobileKit的原型製作。
- 信息整理——進行內容結構的梳理；
- 佈局構建——構建組件整體展示框架；
- 細節處理——各個分類組件的細節打造處理。
我們不難發現大的製作思路和小的製作思路的整體流程上並沒有什麼很大區別，唯一的區別就在於我們的製作複雜度上，將複雜度拆解開來，其實是這一套流程的重複應用：信息整理——佈局構建——細節處理。
信息整理——進行內容結構的梳理
事先搭建好自己組件體系的內容結構可以很好地引導你去製作，讓製作更有方向性。
通過mindnode進行製作前的組件分類：
佈局構建——構建組件整體展示框架
色彩體系確立
本次MobileKit組件採用雙色系模式進行製作，為了配合最近MAC熱門的暗黑模式，我們也做了暗色系模式，雙色系更加符合現在手機APP的流行趨勢。
關於色彩取用：MobileKit沿用了UEDART前期作品製作的主題色系，拓展了暗色系色彩色系。
框架體系確立
本次MobileKit組件沿用了UEDART常見的框架模式之一，此後臺組件展示的框架的拓展性更強。
大家在製作時也可以沿用此類型的框架去構建自己的組件庫。
首頁展示效果
採用ipx的外殼展示模式，來進行各個組件的展示預覽。
框架加載效果，黑白對比展示模式
左側菜單欄進行頻道切換，針對有黑白模式的組件頁面，採用了左右比對的Light&Dark模式對比查看，針對圖標的瀏覽查看採用了燈泡開關的Light&Dark模式對比查看。
細節處理——各個分類組件的細節打造處理
卡片流細節處理
滑動選擇條動效細節處理
三、“拆”字訣
“拆”字訣介紹
何為“拆”？——將複雜事務進行拆分變為更為簡單的小事件。
通常我們要進行一件複雜度比較高的事情的時候，往往會有一種不知如何下手的感覺，但是當我們把複雜的事物進行分解，拆成一個一個的小目標時，這個時候再去實行這個大的目標就更為簡單了。
“拆”在產品構思過程中的運用
我們在構思產品的時候，使用的產品結構圖和產品信息圖將“拆”字訣運用地恰到好處，對產品結構進行各個模塊的功能拆解。
例如，我在進行PRD文檔規範2.0的產品構思時運用到的產品結構圖：
“拆”在流程分解過程中的運用
我們通常在設計產品流程的過程中，先會根據用戶需求，把產品內部的主流程確立下來，後續逐步根據用戶在不同場景下的不同情況，構建產品的子流程，從而將整個產品的所有流程完善起來。
在進行產品文檔交付的時候，我們也經常將產品內部的流程進行拆分，形成子流程，來闡述各個流程的相對關係，這樣便於開發的理解。
例如，產品文檔中各流程的拆解闡述：
“拆”在產品原型製作中的運用
同樣我們在進行原型製作時，也能夠很好的運用“拆”字訣來輔助我們的製作。往往我們在設計一個流程的過程中，裡面會有很多組成部分，我們要從中把它們拆解出來。
譬如微信的朋友圈中的拍照功能，裡面包含了諸多複雜變化的效果，通過“拆”來將各個步驟環節進行拆解，會一下子清晰明朗很多。
拍照流程拆解分析：
- 前置條件：點擊拍攝進入拍照頁面；
- 觸發條件：點擊事件；
- 過程動效：提示文字隱藏，捕捉面部焦點，點擊按鈕縮放；
- 結果反饋：拍照完成展開照片處理功能。
這樣一來，我們所有的流程節點都一清二楚。我這邊模擬了一個微信拍照的動效效果展示給大家看一下：
動態效果預覽地址：https://uedart.com/demo/templatesMobileKit/index.html#g=1&p=拍照_視頻_頁面__photo_video
四、“合”字訣
“合”字訣介紹
何為“合”？——將信息重新組合形成新的模式。
在我們進行頁面佈局過程中，很多複雜的頁面其實就是簡單組件的重組。
和“拆”字訣很像的是，拆字訣將複雜的東西簡單化後，實現最終的製作目標，“合”字訣是將簡單的東西進行重組，實現複雜頁面的重組。
組件化思維製作組件庫
組件化思維在“合”字訣上運用地淋漓盡致，我們將一些常見的元素、組件進行組件化。當我們進行新產品的策劃時，進行產品分析、確定好所有產品流程後，進入到原型繪製階段，構建新頁面時我們不需要再重新制作這一類的組件，只需從通用組件庫中調取，進行重組即可快速構成頁面。
我們根據手機交互中的各個場景應用拆分出了很多組件，這些組件為後續的產品製作提供了一個很強大的庫，我們在重組頁面時可以很好的應用組件庫進行原型頁面的重組。
例如，我們製作的組件中有：
頂部元素
底部元素
“合”在啟動頁的製作應用
在我們的啟動頁製作中我們提供了三種樣式的啟動頁頁面，其實從中不難看出，裡面運用了一些簡單的元素的重新組合，再加上一些不一樣的元素的構成就可以形成新的頁面形式，達成了不一樣的展示效果。
- 頂部狀態欄
- logo
- 標語
頁面本身的製作並不是很難，難點在於從產品入手，本產品更需要啟動頁展示怎樣的內容，再通過其內容分析頁面需要具備怎樣的元素，再把元素進行重組。
“拆”與“合”在播放頁的製作應用
下面通過優酷視頻播放的案例來展示“拆”字訣“合”字訣與的組合運用。
將需要製作的目標進行拆解，尤其在層次分佈上的先後順序一定要分明白。
廣告播放流程拆解分析：
- 前置條件：進入播放頁面
- 觸發條件：倒計時事件
- 過程動效：倒計時
- 結果反饋：倒計時完畢後進入播放主頁
視頻播放流程拆解分析：
- 前置條件：倒計時後進入此頁面
- 觸發條件：點擊事件
- 過程動效：彈幕控制。上下操作欄緩入，右側操作區顯示，截圖/GIF頁面跳轉
- 結果反饋：出現對應模塊操作模塊
拆解完畢後從原有的組件庫中調用了廣告標籤、倒計時組件、播放操作欄組件進行頁面的組合。
動態效果的預覽地址：https://uedart.com/demo/templatesMobileKit/index.html#g=1&p=視頻播放_video
五、“移”字訣
“移”字訣介紹
何為“移”？——借用解決其他事情的思路來解決當前的問題。
我們從書中獲得的知識，將其應用到實際工作的場景中就是“移”字訣的很好體現。在我們的產品工作中，我們也經常去找”參考”，分析其他產品是如何解決相近問題，並將其解決問題的思路轉移到自己產品的問題解決上來。
“移”在產品設計中的應用
找參考產品的兩個維度：
- 從大的層面：研究產品相關的業務，有競爭關係的產品；
- 從小的層面：研究產品的某個功能，能提供參考意義的產品功能。
無論是借用競品產品的參考，還是借用相似功能的參考都是“移”字訣的很好運用。在我的產品設計過程中，我更趨向於運用相似功能的參考，簡化成一個一個的功能模塊，你會發現這樣的參考產品十分之多，我們可以從不同業務模式下的同類進行類比，找到最適合當前產品此功能的交互形式。
他山之石可以攻玉，合理利用其它方面的知識，加以利用，變成好的方法去解決當下的問題。這種能力轉移的處理方式是很好的處理事務的方式，同樣在製作原型中也十分適用。
原型組件庫的運用同樣也是“移”字訣的實際運用。我們在日常的產品工作中，將一些產品經驗轉化為實際的原型組件產物，方便自己在其他產品設計中的複用，這種組件化的思維複用正是“移”字訣的的精髓。
“移”在原型製作中的應用
圖片選擇，參考產品“微信”和“閒魚”。
手勢解鎖，參考產品“京東金融”。
解鎖前-解鎖正確-解鎖失敗：
聊天窗口，參考產品“淘寶”。
歷史消息-語音消息-發送操作：
六、總結
到此關於原型製作的四字訣方法體系就介紹完了，大家可以從四字訣中發現“合”字訣與“移”字訣中都提到了組件庫。我喜歡組件庫中運用的組件化思維，這種思維如果能夠很好地運用起來，相信大家的工作效率一定能夠得到很大的提升。希望大家能夠快速掌握應用到自己的工作當中去，四字訣不僅適用於原型製作，在很多方面都是適用的。
筆者一直以來都希望能夠給大家輸出一些有用的知識，在此感謝大家的關注與支持。正是你們一路以來的支持，我才有堅持不懈努力寫下去的動力，希望能夠在設計研究這條道路上一直走下去。
推薦書籍：這邊推薦三本相關書籍給大家，希望大家能有所收穫。
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
