原型與你

這是之前一篇設計類的約稿，讀起來比較無趣。之後這個專欄里會以設計、科技、影評類文章為主，穿插時評、書評、評書相聲，魔術雜技，如果你跟著唱出來了那說明您上了一定的年紀。

————————————————————————————————————————

一、利用

我們如何看待工具？

有一種觀點：設計師不要學太多的軟體，精通一種就好了，更重要的是你的思維。

從個人技能上，這個說法沒錯，但它可能忽視的是，思維和工具，並不獨立。因為所謂工具，其實是思維的被封裝與具象化，而你使用工具的過程，便是對這思維的習得和解碼。就像閱讀從不是一個單方面行為，而是讀者和作者思維的無聲交流。你閱讀書，書塑造你。

而你總不能只讀一本書，只讀一類書。

一個錯覺是，我們在利用工具。

更精確的說法是，我們和工具彼此利用。

人類的起源時期，石制的手斧是最早的常用武器。可始祖人類的手腕結構，很難提供足夠的腕力來緊握一些小物體。進化的車輪下，一塊新手骨出現了，這塊叫第三掌骨的結構，給了這批新人類更強的握力、更精細的手部動作，也意味著對工具更精確的掌握，而這也意味著：進化的優勢。

到底是我們根據雙手的形狀打造了工具，還是我們的雙手進化成了可以握住工具的形態？

二、循環

學習工具是為了理解媒介

在一個新的媒介產生的初期，用於生產內容的工具是來源於舊媒介的。

許多視覺設計師習慣用Photoshop來進行網頁和APP界面設計，但Photoshop的本質依然是一款點陣圖處理軟體，是以印刷為主導媒介的時代產生的主力工具。在這個階段，新媒介的形態也會受到舊工具的影響。Photoshop作為WEB/APP設計主力的時代，也是擬物化設計最盛行的時代。

隨著新媒介的發展，必然會出現適應新媒介的新生產工具。

因此一款更加適應新媒介的工具的產生和流行就是一種必然。Sketch的興起不是單純的因為它「簡潔易用」，而是其形態更貼近於信息時代媒介的本質屬性。新工具的每一個功能從設計初始，就做好了和新媒介做無縫嫁接的準備。不再需要從點陣圖到代碼的轉換成本，一個開源的插件就能將樣式轉化為CSS代碼，儘管現在不夠完美，但方向是可見的：工具的發展將不斷減少中間步驟，趨近媒介本身的形態。

新工具的不斷產生會擴充媒介的外延，並最終產生新的媒介形態。

工具的進化不僅僅是適應媒介，同時也在塑造和擴充媒介。從Photoshop到Sketch，從擬物設計到從現在的Complexion Reduction，對材質的棄用、對顏色的剋制、對圖標的簡化，工具的進化更替暗合著設計的風格迭代。

信息成為了設計主體後，動效設計就應運而生。如果說扁平化是在設計「信息」，那動效設計就是設計「信息的傳遞」。新的工具隨之如雨後春筍，Origami、Framer、Form、Pixate、Flinto、Principe、Atomic...設計師從來沒有過這麼多的選擇，而在這些選擇背後，是更新的設計形態孕育在襁褓之中。

三、成為

為何我們要做原型？

在交互設計師的工作流里，有一個重要部分叫「原型設計」。

而當我們在做原型時，我們在做什麼？

或許一開始你用紙和筆勾勒出網站或應用的輪廓，就像給一幢大廈搭好框架。接下來，你可能選擇用Axure畫好線框圖，加上標註，喚之「低保真原型」。又或者再進一步，上色處理，添加動效，做個可以在屏幕上供人指指點點的，所謂「高保真原型」。

這一派觀點認為，把原型做到高保真是沒有必要的，視覺還是要做設計稿，前端還是要開發，你把原型做得再精準，都是徒然。

這種觀點，代表了一種線性的工作流。在實際的產品設計中，交互從不僅是一個中間環節，它的觸角延伸到產品開發的每個階段，牽一髮而動全身，而原型設計也不是一個承上啟下、可有可無的中間步驟。而如果回到本質，原型，究竟是什麼？

讓我們做一個類似於「惠勒的龍」的思維實驗：假設有這樣一個原型，它做得如此逼真，如此完善，以致於用戶在使用中，無法區分出原型和產品。那這個原型，和真正的產品，有區別嗎？

原型的本質是描述真實的語言。越高保真的原型，就越逼近真實，而越高保真的原型工具，其描述方式（被封裝的思維方式）就越接近真實事物的運行方式。

紙和筆的語言是「描述」，覆蓋一切，但低效而不精確，且無法被機器理解。

Axure的語言是「控制項」。頁面由一個個控制項組成，而控制項則由其自身的樣式、屬性構成。每個控制項的的事件是獨立的，如果你想讓一個事件觸發多個控制項行為，或是多個控制項共用一個屬性，那Axure就會變得極其繁瑣和不便。

Principle的語言是「狀態」。設定一個起始態、一個終態、一個觸發方式，剩下的就只是調整狀態變化的參數。也因為核心語言的限制，2.0版本前的Principle，更適合做單一動效演示，而非全產品原型。

Quartz composer的語言是「流動」。它將MVC設計模式中的「視圖」、「模型」、「控制器」具象為一個個Patch，通過連線的方式將實現介面的連接和數據的流動，用樂高積木一般的方式，將事物的運行邏輯可視化。

Framer的語言是「對象」。將CoffeeScript作為一種中間語言，更簡潔的語法，更清晰的面向對象編程，使得Framer成為了最靈活、最強大的原型工具。

Webflow的語言是「成為」。可視化搭建，直接生成頁面，設計即編程，設計及開發。工具總在嘗試各種各樣的方法，降低中間步驟，最終成為真實。

因此，當我們拿起工具，我們不僅僅是為了「使用」，更為了透過它們背後設計者的眼睛，尋找觀察產品的不同角度。

而我們之所以要做原型，也不僅僅是為了模擬。模擬不是目的，模擬是探索事物運行規律的過程，最終目的是成為真實。

四、真實

一個原型設計原則

用原型來理解真實產品的一個方法是，嘗試做「真實原型」。

剛剛接觸Axure的時候，經常要做一種叫膠囊型TAB/Capsule的控制項。

當時對軟體還不熟悉，採用的做法是，把這個控制項做成了一個動態面板，然後通過點擊不同區域來切換面板狀態。

這樣的效果，其觀感和真實情況一樣。但實現的方法，卻不簡潔優雅，更關鍵的是：這不真實。

為了實現一個切換效果，就創建了控制項的一堆影分身，這不是這個世界的運行方式。

當你覺得麻煩到家時，一定是你哪走了彎路。

所以我揣測設計者應該考慮到了這樣的場景，就在Axure的面板里找來找去，然後發現了那個之前從未注意的功能：select group：通過創建一個按鈕組，就可以解決切換問題。這樣製作的控制項，簡潔清晰、易於復用，更重要的是，它是通過對控制項的屬性進行歸納和抽象來解決問題，而不是製造一個「看上去一樣」的假象。這也是產品實際的運行邏輯。

當你需要新增固定內容時，你可以使用中繼器而不是設置大量隱藏面板；當你的交互需要觸發控制項移動時，你可以用push交互來更改位置而不是手動設置坐標。這並不是什麼《Axure：30天從入門到精通》中的習得的「常用小技巧」，而是逼迫自己使用一種更誠實的原型製作方式，跳出自己習慣的思維和習慣，去探索那些自己尚未發現的領域，這樣才能在製作原型的過程中，洞察真實。

而真實是什麼？

或許，真實就是簡潔，是奧卡姆的剃刀，是如無必要勿增實體，是光會挑選的那條最短路徑，是物質會降低到最低勢能態，是用最小的資源去實現最大的效能。

五、分割

好的思維是結構化的解構

分割不是一種方法，但它是一切方法的本源。

任何一個複雜的事物，都可以被分割成為一個個最簡單不可分割的單元。再複雜的邏輯，分割到最後，也不過了一些與非門、或非門、異或門的集合；所以再複雜的問題，經過分割後，也只不過是用一定的順序，去解決一些簡單的小問題。

當你需要設計一個卡片的展開和收起狀態。一個不負責任的做法是，畫出視覺稿，簡單標註變化過程，之後扔給前端：說：「喏，把這個，變成這個。」

只要再往前走一步，你會發現這一句「變成」，可能就包含了十幾個動效細節。

當你去嘗試做一個「真實原型」時，你會發現「分割」的思維方式會幫你規避掉「虛假」，因為當你把原型分割到最小粒度時，你會發現你和開發面對的是同樣的問題，而你的解決方式可能也是前端的方案。而那些你已經多次思考和調整的參數，就無縫地融入到了前端的開發進程中。

分割的另外一個好處，是幫你快速找到適合解決這個問題的工具。

當我們討論哪些工具更強大、更自由時，其實是在討論它們的分割顆粒度。

把一個元素從頁面的左邊移到右邊，axure給你提供了勻速、漸入漸出等預設動效，而principle則可以對緩動函數進行更精確的控制，本質上，是在對動效問題上，後者採用了更細的分割顆粒度。就好像給你一堆五顏六色的碎片，讓你去完成一個拼圖，那碎片切分越細、形狀越全、色域越廣，你最終的拼圖就越可能接近目標。而你是永遠無法用4個大方塊拼成一個圓形的。

阿里雲官網新首頁里，有幾處icon，在滑鼠移入後，會發生一些有趣的運動。

當時決策要使用動效icon時，開發的時間只有兩天，留給設計的時間更少。而關於這個icon應該怎麼動，一開始卻是一籌莫展的。我們只知道應該是一些互相連接的點和線，在兩個形態之間互相轉換，但大腦的空間想像力畢竟有限，語言的描述畢竟匱乏，如何快速地創造出11個這樣的動效icon呢？

在快速分割問題後，發現這只是一個初始態和終態的問題，而中間的變化形態是難以憑空手繪或想像的。而解決始態終態問題的最快速的工具，是什麼？

Keynote。

憑藉最簡單的神奇移動，我們快速產出了這些動效icon，本來預計要一天的工作，壓縮到了兩小時。

所以分割不是方法，它本身不解決任何問題，它只是把問題分解成你可以解決的小問題，並幫你找到能解決它的方法。

以上。

推薦閱讀：