2016-10-18 用心設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
來源：UI中國
利用
我們?nèi)绾慰创ぞ?/strong>
有一種觀點：設(shè)計師不要學(xué)太多的軟件，精通一種就好了，更重要的是你的思維。
從個人技能上，這個說法沒錯，但它可能忽視的是，思維和工具，并不獨立。因為所謂工具，其實是思維的被封裝與具象化，而你使用工具的過程，便是對這思維的習(xí)得和解碼。就像閱讀從不是一個單方面行為，而是讀者和作者思維的無聲交流。你閱讀書，書塑造你。
而你總不能只讀一本書，只讀一類書。
一個錯覺是，我們在利用工具。
更的說法是，我們和工具彼此利用。
人類的起源時期，石制的手斧是最早的常用武器?？墒甲嫒祟惖氖滞蠼Y(jié)構(gòu)，很難提供足夠的腕力來緊握一些小物體。進(jìn)化的車輪下，一塊新手骨出現(xiàn)了，這塊叫第三掌骨的結(jié)構(gòu)，給了這批新人類更強(qiáng)的握力、更精細(xì)的手部動作，也意味著對工具更的掌握，而這也意味著：進(jìn)化的優(yōu)勢。
到底是我們根據(jù)雙手的形狀打造了工具，還是我們的雙手進(jìn)化成了可以握住工具的形態(tài)？
循環(huán)
學(xué)習(xí)工具是為了理解媒介
在一個新的媒介產(chǎn)生的初期，用于生產(chǎn)內(nèi)容的工具是來源于舊媒介的。
許多視覺設(shè)計師習(xí)慣用Photoshop來進(jìn)行網(wǎng)頁和APP界面設(shè)計，但Photoshop的本質(zhì)依然是一款位圖處理軟件，是以印刷為主導(dǎo)媒介的時代產(chǎn)生的主力工具。在這個階段，新媒介的形態(tài)也會受到舊工具的影響。Photoshop作為WEB/APP設(shè)計主力的時代，也是擬物化設(shè)計最盛行的時代。
隨著新媒介的發(fā)展，必然會出現(xiàn)適應(yīng)新媒介的新生產(chǎn)工具。
因此一款更加適應(yīng)新媒介的工具的產(chǎn)生和流行就是一種必然。Sketch的興起不是單純的因為它“簡潔易用”，而是其形態(tài)更貼近于信息時代媒介的本質(zhì)屬性。新工具的每一個功能從設(shè)計初始，就做好了和新媒介做無縫嫁接的準(zhǔn)備。不再需要從位圖到代碼的轉(zhuǎn)換成本，一個開源的插件就能將樣式轉(zhuǎn)化為CSS代碼，盡管現(xiàn)在不夠完美，但方向是可見的：工具的發(fā)展將不斷減少中間步驟，趨近媒介本身的形態(tài)。
新工具的不斷產(chǎn)生會擴(kuò)充媒介的外延，并最終產(chǎn)生新的媒介形態(tài)。
工具的進(jìn)化不僅僅是適應(yīng)媒介，同時也在塑造和擴(kuò)充媒介。從Photoshop到Sketch，從擬物設(shè)計到從現(xiàn)在的Complexion Reduction，對材質(zhì)的棄用、對顏色的克制、對圖標(biāo)的簡化，工具的進(jìn)化更替暗合著設(shè)計的風(fēng)格迭代。
信息成為了設(shè)計主體后，動效設(shè)計就應(yīng)運而生。如果說扁平化是在設(shè)計“信息”，那動效設(shè)計就是設(shè)計“信息的傳遞”。新的工具隨之如雨后春筍，Origami、Framer、Form、Pixate、Flinto、Principe、Atomic...設(shè)計師從來沒有過這么多的選擇，而在這些選擇背后，是更新的設(shè)計形態(tài)孕育在襁褓之中。
成為
為何我們要做原型
在交互設(shè)計師的工作流里，有一個重要部分叫“原型設(shè)計”。
而當(dāng)我們在做原型時，我們在做什么？
或許一開始你用紙和筆勾勒出網(wǎng)站或應(yīng)用的輪廓，就像給一幢大廈搭好框架。接下來，你可能選擇用Axure畫好線框圖，加上標(biāo)注，喚之“低保真原型”。又或者再進(jìn)一步，上色處理，添加動效，做個可以在屏幕上供人指指點點的，所謂“高保真原型”。
這一派觀點認(rèn)為，把原型做到高保真是沒有必要的，視覺還是要做設(shè)計稿，前端還是要開發(fā)，你把原型做得再精準(zhǔn)，都是徒然。
這種觀點，代表了一種線性的工作流。在實際的產(chǎn)品設(shè)計中，交互從不僅是一個中間環(huán)節(jié)，它的觸角延伸到產(chǎn)品開發(fā)的每個階段，牽一發(fā)而動全身，而原型設(shè)計也不是一個承上啟下、可有可無的中間步驟。而如果回到本質(zhì)，原型，究竟是什么？
讓我們做一個類似于“惠勒的龍”的思維實驗：假設(shè)有這樣一個原型，它做得如此逼真，如此晚上，以致于用戶在使用中，無法區(qū)分出原型和產(chǎn)品。那這個原型，和真正的產(chǎn)品，有區(qū)別嗎？
原型的本質(zhì)是描述真實的語言。越高保真的原型，就越逼近真實，而越高保真的原型工具，其描述方式（被封裝的思維方式）就越接近真實事物的運行方式。
紙和筆的語言是“描述”，覆蓋一切，但低效而不，且無法被機(jī)器理解。
Axure的語言是“控件”。頁面由一個個控件組成，而控件則由其自身的樣式、屬性構(gòu)成。每個控件的的事件是獨立的，如果你想讓一個事件觸發(fā)多個控件行為，或是多個控件共用一個屬性，那Axure就會變得極其繁瑣和不便。
Principle的語言是“狀態(tài)”。設(shè)定一個起始態(tài)、一個終態(tài)、一個觸發(fā)方式，剩下的就只是調(diào)整狀態(tài)變化的參數(shù)。也因為核心語言的限制，2.0版本前的Principle，更適合做單一動效演示，而非全產(chǎn)品原型。
Quartz composer的語言是“流動”。它將MVC設(shè)計模式中的“視圖”、“模型”、“控制器”具象為一個個Patch，通過連線的方式將實現(xiàn)接口的連接和數(shù)據(jù)的流動，用樂高積木一般的方式，將事物的運行邏輯可視化。
Framer的語言是“對象”。將CoffeeScript作為一種中間語言，更簡潔的語法，更清晰的面向?qū)ο缶幊?，使得Framer成為了最靈活、最強(qiáng)大的原型工具。
Webflow的語言是“成為”?？梢暬罱ǎ苯由身撁?，設(shè)計即編程，設(shè)計及開發(fā)。工具總在嘗試各種各樣的方法，降低中間步驟，最終成為真實。
因此，當(dāng)我們拿起工具，我們不僅僅是為了“使用”，更為了透過它們背后設(shè)計者的眼睛，尋找觀察產(chǎn)品的不同角度。
而我們之所以要做原型，也不僅僅是為了模擬。模擬不是目的，模擬是探索事物運行規(guī)律的過程，最終目的是成為真實。
真實
一個原型設(shè)計原則
用原型來理解真實產(chǎn)品的一個方法是，嘗試做“真實原型”。
剛剛接觸Axure的時候，經(jīng)常要做一種叫膠囊型TAB/Capsule的控件。
軟件還不熟悉，采用的做法是，把這個控件做成了一個動態(tài)面板，然后通過點擊不同區(qū)域來切換面板狀態(tài)。
這樣的效果，其觀感和真實情況一樣。但實現(xiàn)的方法，卻不簡潔優(yōu)雅，更關(guān)鍵的是：這不真實。
為了實現(xiàn)一個切換效果，就創(chuàng)建了控件的一堆影分身，這不是這個世界的運行方式。
當(dāng)你覺得麻煩到家時，一定是你哪走了彎路。
所以我揣測設(shè)計者應(yīng)該考慮到了這樣的場景，就在Axure的面板里找來找去，然后發(fā)現(xiàn)了那個之前從未注意的功能：select group：通過創(chuàng)建一個按鈕組，就可以解決切換問題。這樣制作的控件，簡潔清晰、易于復(fù)用，更重要的是，它是通過對控件的屬性進(jìn)行歸納和抽象來解決問題，而不是制造一個“看上去一樣”的假象。這也是產(chǎn)品實際的運行邏輯。
當(dāng)你需要新增固定內(nèi)容時，你可以使用中繼器而不是設(shè)置大量隱藏面板；當(dāng)你的交互需要觸發(fā)控件移動時，你可以用push交互來更改位置而不是手動設(shè)置坐標(biāo)。這并不是什么《Axure：30天從入門到精通》中的習(xí)得的“常用小技巧”，而是逼迫自己使用一種更誠實的原型制作方式，跳出自己習(xí)慣的思維和習(xí)慣，去探索那些自己尚未發(fā)現(xiàn)的領(lǐng)域，這樣才能在制作原型的過程中，洞察真實。
而真實是什么？
或許，真實就是簡潔，是奧卡姆的剃刀，是如無必要勿增實體，是光會挑選的那條最短路徑，是物質(zhì)會降低到勢能態(tài)，是用最小的資源去實現(xiàn)最大的效能。
分割
好的思維是結(jié)構(gòu)化的解構(gòu)
分割不是一種方法，但它是一切方法的本源。
任何一個復(fù)雜的事物，都可以被分割成為一個個最簡單不可分割的單元。再復(fù)雜的邏輯，分割到最后，也不過了一些與非門、或非門、異或門的集合；所以再復(fù)雜的問題，經(jīng)過分割后，也只不過是用一定的順序，去解決一些簡單的小問題。
在阿里云官網(wǎng)首頁中，需要設(shè)計一個卡片的展開和收起狀態(tài)。
一個不負(fù)責(zé)任的做法是，畫出視覺稿，簡單標(biāo)注變化過程，之后扔給前端說：“喏，把這個，變成這個?！?
只要再往前走一步，你會發(fā)現(xiàn)這一句“變成”，可能就包含了十幾個動效細(xì)節(jié)。
當(dāng)你去嘗試做一個“真實原型”時，你會發(fā)現(xiàn)“分割”的思維方式會幫你規(guī)避掉“虛假”，因為當(dāng)你把原型分割到最小粒度時，你會發(fā)現(xiàn)你和開發(fā)面對的是同樣的問題，而你的解決方式可能也是前端的方案。而那些你已經(jīng)多次思考和調(diào)整的參數(shù)，就無縫地融入到了前端的開發(fā)進(jìn)程中。
分割的另外一個好處，是幫你快速找到適合解決這個問題的工具。
當(dāng)我們討論哪些工具更強(qiáng)大、更自由時，其實是在討論它們的分割顆粒度。
把一個元素從頁面的左邊移到右邊，axure給你提供了勻速、漸入漸出等預(yù)設(shè)動效，而principle則可以對緩動函數(shù)進(jìn)行更的控制，本質(zhì)上，是在對動效問題上，后者采用了更細(xì)的分割顆粒度。就好像給你一堆五顏六色的碎片，讓你去完成一個拼圖，那碎片切分越細(xì)、形狀越全、色域越廣，你最終的拼圖就越可能接近目標(biāo)。而你是永遠(yuǎn)無法用4個大方塊拼成一個圓形的。
阿里云官網(wǎng)新首頁里，有幾處icon，在鼠標(biāo)移入后，會發(fā)生一些有趣的運動。
當(dāng)時決策要使用動效icon時，開發(fā)的時間只有兩天，留給設(shè)計的時間更少。而關(guān)于這個icon應(yīng)該怎么動，一開始卻是一籌莫展的。我們只知道應(yīng)該是一些互相連接的點和線，在兩個形態(tài)之間互相轉(zhuǎn)換，但大腦的空間想象力畢竟有限，語言的描述畢竟匱乏，如何快速地創(chuàng)造出11個這樣的動效icon呢？
在快速分割問題后，發(fā)現(xiàn)這只是一個初始態(tài)和終態(tài)的問題，而中間的變化形態(tài)是難以憑空手繪或想象的。而解決始態(tài)終態(tài)問題的最快速的工具，是什么？
Keynote。
憑借最簡單的神奇移動，我們快速產(chǎn)出了這些動效icon，本來預(yù)計要一天的工作，壓縮到了兩小時。
所以分割不是方法，它本身不解決任何問題，它只是把問題分解成你可以解決的小問題，并幫你找到能解決它的方法。
藍(lán)藍(lán)設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.wnxcall.com