Computational Design

隨著技術的發(fā)展，設計方法，設計工具也一直在發(fā)生變化。從一開始的紙和筆，到后來的設計軟件如AutoCAD、Photoshop 、Sketch（將紙和筆電子化）。到現(xiàn)在越來越多人將計算機技術直接運用到設計中來。

很多人常常調侃說，設計師和工程師是生活在兩個世界的人。這是兩個需要有密切的合作的工種，很多時候卻搞不懂對方到底在想什么。這背后不僅僅是專業(yè)知識之間的差異，更重要的是思維模式的不同。而如果將工程師的思維運用到設計中去又會怎么樣呢？

下面就來說一下本文主題 ：Computational Design（計算設計）。簡單解釋一下，Computational Design就是將一些計算機技術運用到設計中去。傳統(tǒng)的設計更多是依賴于設計師個人的直覺和經驗來解決問題，而Computational Design更多是側重使用計算機技術來幫助解決設計問題。

近年來這種設計思路被運用到了越來越多的領域，如建筑設計，工程設計，平面設計等。

盡管Computational Design離不開代碼，但是本文并不打算討論“設計師是否需要會編程”這個被無休止爭論的問題。而是將重點放在對這種設計思想的介紹上，而非具體的代碼實現(xiàn)。

畫直線

下面以畫一條線為例，大致感覺一下Computational Design的運作方式。 

設計師的做法很直觀，只是把兩點連接起來。而用代碼的做法看上去非常復雜。很顯然，對于畫一條線來說，后面的做法完全沒有競爭力，甚至看上去有些傻。

不過一旦要畫很多條線時，它的優(yōu)勢才能發(fā)揮出來，利用計算機語言中常用的循環(huán)很容易畫出大量的直線。想要幾條就幾條，只是設置一個參數(shù)。 

一：等間距直線，然而畫一堆直線看上去并沒有什么吸引力。

二：讓直線之間的間距逐漸加大試試，看上去不錯。 

三：讓間距，線寬，灰度隨機變一下，看著越來越像回事了。

四：間距，角度，灰度隨機變化，效果更好。

從上面這個簡單的例子中，大概也能感覺出一點這種方式的不同之處。我們在用常規(guī)手段作圖的時候，通常是直接控制的，上下左右都可以一個個調整。和普通設計方法不同的是，這種角度和間距變化的節(jié)奏感很難手動一個個去調節(jié)出來，而必須通過和計算機合作才能做到。即使只是畫直線，也能玩出很多花樣來。包括文章封面的背景，也只不過是一堆直線罷了。 

粒子系統(tǒng)

最能將計算機“不怕苦不怕累”的特性發(fā)揮出來的，莫過于粒子系統(tǒng)。粒子系統(tǒng)里的每個個體都遵循一些基本的規(guī)則，單個物體不起眼，但是很多組合在一起時，會出現(xiàn)很多有趣的行為。

比如現(xiàn)實中的鳥群，當一只鳥在飛時，并不是什么有趣的現(xiàn)象，而當很多鳥聚在一起時，場面就變的非常壯觀。 

下圖是一種常見的設計，我們可以把它看做是一個粒子系統(tǒng)。就這幅圖而言，很可能是設計師一個個去手動連線的。如果是一個個手動連線，你大概能想象到其中的工作量了，當規(guī)模再擴大時候，基本不可操作了。

與其一個個去手動的連線，如果我們能找出連線的規(guī)律，就能將這些連線的工作都交給電腦去做了。 

從上面的圖中，我們大概可以總結出這樣一個規(guī)律：每個點只會和它附近幾個點進行連接。

有了這個規(guī)律，我們可讓計算機計算每個點之間的距離，當距離到達或者小于某一個值時，就進行連接。 

當把很多的點聚集在一起時，就會出現(xiàn)非常有趣的行為了。

如果我們把上面的連接線的變化記錄下來，并且根據(jù)距離的遠近來調整顏色。則出現(xiàn)了另一種完全不同的景象。 

如果說上面第一幅連線的效果還在我們意料之中的話，那么這一副的效果，完全不是我們事先可以預見到的。直到電腦畫出來前，我們不會意識到，這樣的行為后面還“隱藏”著這么一副畫。

我們還可以把它做成一個球體，如果之前的平面效果還可以勉強通過手動連接，而這樣的球體基本不太可能通過手動連接做到了。 

物理

使用Computational Design也就意味這我們能更好的利用物理規(guī)律。

再次拿封面做為例子，如果我們把封面背景中的線不是當做裝飾，而是一個力場，線所指的方向也就是力的方向。 

如果把一個小球扔進這樣的力場，它就會隨著力場的走向進行運動。 

有過上面的做法，你也許想到了，我們的目標不是扔一個“小球”進去，而是很多很多的“小球”，組成一個粒子系統(tǒng)?？梢钥吹剑緛黼S機分布的點，最后慢慢都聚集成了幾股細流。 

當把這些粒子的軌跡畫出來時，又得到了這樣一幅圖像。 

在App設計中的應用

看到這里，你可能會說，確實，這種方式有它的特別之處，也能產生不錯的效果?？墒菍τ贏pp設計來說，這些東西又有什么用呢？

如果你用過FaceTime的話，你就會發(fā)現(xiàn)，你可以在屏幕里隨意拖拽小窗口，當你釋放時，小窗口會根據(jù)你釋放時候的速度以及位置，停留在四個角落中的其中一個。

蘋果在一次WWDC的中公布了這個行為背后的原理?？刂七@些小窗口的背后正是一個力場，它被分成四個區(qū)域，四個區(qū)域都指向各自的角落，這也正是為什么這個小窗口最后會落到四個角落中其中一個原因。 

通過這種方式實現(xiàn)的動效，物體的運動是根據(jù)用戶的操作計算出來的，而非一成不變的按照事先安排好的軌跡進行，往往能達到更真實的效果。

實際上iOS系統(tǒng)動畫中大量的采用這種物理效果。

現(xiàn)在的設計幾乎都是通過Sketch、AI 、PS這類電腦軟件來完成的，不可否認這些軟件給我們提供了極大的便利。但在一些情況下，我們所能做的，很大程度上也是由這個軟件所提供的功能決定的。

當你使用代碼來實現(xiàn)你的想法時，你不用再考慮是否有這個功能，取而代之的是你自己來創(chuàng)造這些功能，當然，這樣會增加難度，但與此同時也給你帶來了極大的自由度。不僅如此，你還可以在設計的時候使用實時的數(shù)據(jù)，進行實施交互。

以上提到的Computational Design的應用只不過是冰山一角。那么現(xiàn)在的設計師是否需要使用這種方式來設計呢 ？如果你只是要畫一個圖標，做一個靜態(tài)的頁面，那么很大的可能性是你確實用不上它。但是如果你要解決的問題像是上面提到的Facetime的問題，能被抽象成一些算法，那么讓計算機來幫你解決問題是個明智的選擇。