理性設計丨給產品和設計的一堂課

蘋果公司設計師年薪高達17.4萬美圓，約合人民幣110萬，而蘋果官網也被業界捧爲大師之做，受到世界各國產品經理和設計師的追捧。爲何蘋果公司設計的網頁如此受歡迎，有什麼技巧在其中嗎？

今天就讓咱們來聊聊如何理性的進行設計，談談產品經理和設計師在工做的過程當中怎麼樣把幾何學融入到做品中。

設計原本就是一種理性的科學門類，審美因人而異，只有言之有理的設計才能說服別人，運用幾何學的手法就是設計師的利器之一，科學的設計並不會限制你的創意，它只會幫助你的做品成爲精品的必要手段之一。從古至今，人類從天然界中獲得過無數的啓示，其中就包含黃金分割。這個從貝類完美的生長方式中提煉出的曲線，改變了全部人的審美。

從公元前20世紀到16世紀的史前巨石柱記載的關於1:1.618比例的黃金矩形的應用開始到如今，人們對黃金分割的愛歷來就沒有改變過，五邊形和五角星也一樣具備黃金分割比例，由於五角星內三角形的邊長比例是1：1.618。在海膽和雪花裏也能找到相同的五邊形/五角形關係。

人體也具備一樣的完美比例，人體的高度與伸展開的手臂造成了一個正方形將人體圍住，而手和腳正好落在以肚臍爲圓心的圓上，肚臍位於黃金分割點上，這在文藝復興時期的藝術家萊昂納多·達芬奇和丟勒的《完美的比例》《人體比例四書》也都有所體現。

人類對這種審美的提煉不只僅是對於天然界，而是幾乎把它運用到咱們能見到的各個領域當中。建築中的比例，雅典的帕提農神廟（Parthenon)是一個運用希臘比例體系的實例。

以後的許多哥特式的大教堂也大多運用了這個「完美比例」，例如咱們都知道的巴黎聖母院。

人類從黃金分割率中提煉出的√2矩形也具備許多特殊的性質，能被無限的分割成更小的等比矩形，其長寬比也至關接近黃金分割率（1.414與1.618）

正是因爲這個屬性，√2矩造成爲歐洲DIN（德國工業標準）紙張尺寸體系的基礎。也就是咱們最多見的紙張尺寸。這樣裁切出來的紙張不只容易生產，並且不會有一點浪費。

除了√2矩形之外，由其衍生出來的√三、√四、√5矩形也一樣具有能夠被橫向和縱向切割的屬性。√3矩形也是正六邊形的構成基礎，這個形狀也能夠在天然界中的不少方面找到，例如雪花晶體與蜂巢的形狀。

幾何化的方式在當今的設計中的應用更是多到沒朋友，也成爲設計師的金牌工具，可讓你的設計言之有理，若是你的設計已經很不錯了，那麼經過幾何化的規範，你的設計能夠更加的具備可信度與持久性，從而減小反對的聲音，縮短淘汰的週期。以logo設計爲例，咱們看看這些牛逼的logo到底有什麼共同點。首先是Apple的logo，利用斐波那契數列1,1,2,3,5,8,13,21，……爲比例的圓形切割而成，使得logo總體很是的平衡。

Apple的另外一個產品iCloud也是由具備黃金比例的四個圓構建而成，而總體的logo也一樣符合黃金比例。

一樣，追求更加年輕有效的百事公司、堅持革新與惟美的國家地理、追求個性的Twitter、以及衆多的汽車logo都遵循幾何化的設計方式去規範他們的品牌。

設計的幾何學在排版與網頁設計上的應用更是十分必要的，版式設計與網頁設計的信息體量遠比標誌設計大得多，它須要經過你對信息的梳理來引導用戶去按照你的方式正確閱讀。因此使用科學的方式梳理你的頁面佈局會讓你的做品更加具備連續性、秩序性與易讀性。網頁設計或是板式設計不一樣於其餘的設計內容，它不只要考慮每一個元素的樣式，而且要有設計的順序，而不是盲目的不斷嘗試。第一步，給你的網頁或版式作定位。不是全部的網站或版式都是統一的套路，它們也有本身的性格在裏面。考慮品牌的定位是怎樣的，受衆羣體是誰，用戶的閱讀順序與閱讀體驗是怎樣的，咱們最想讓用戶看到什麼，用戶最想看到什麼……要在有限的畫布中展現全部想要表現的內容，就必定會有取捨，設計不是僅僅作到美觀便可，好看只是你符合設計師這個職位的前提；設計師更多要考慮的是解決問題。
第二步，肯定大風格。

依據所設計的內容，肯定比例，色彩，形狀等這些基本的要素。統一的風格不是偷懶，他會讓你的設計內容更具一致性與連續性，不會讓用戶或讀者有太多沒必要要的跳出感，而且，大風格的肯定能加深你對所設計內容的認識。

第三步，肯定你的畫布尺寸。

在網頁設計當中，設計師最經常使用到的是960網格系統，它能夠說是具備里程碑式或者具備表明意義的系統，設計之初主要針對的是1024×768的屏幕。雖然如今早已經是1200以上像素的天下了，但960網格系統也早已從最初的理性設計的工具變成了網站設計的佈局思惟。

以1024×768的屏幕爲例，用戶在瀏覽網站是，視線熱區可覆蓋大概80%的屏幕，此部分空間尺寸大體爲974×650，在瀏覽器左右預留一些空間，而且爲方便響應式設計，咱們的可設計區域就成爲了如今最經常使用到的960×650像素，這個尺寸也一樣接近黃金分割的尺寸。

第四步，爲你的畫布分欄。

12欄佈局

16欄佈局

24欄佈局

用理性的網格將你的頁面分欄，這樣能夠很好的將頁面中得圖片與文字進行區隔，段落與段落間進行區隔。

考慮到黃金分割的原理與響應式頁面的可操做性，咱們將頁面分爲12，16或24欄，欄數依據你要設計的網頁體量而定。

第五步，肯定最小字符。

橫向則依據你所使用的最小字符高度而定，通常使用12pt—16pt的文字，每行60—80字符是比較合理的範圍。這樣，咱們就獲得了一張理性，簡單，有效的網格，使用網格設計可以使網頁的連貫性與秩序性加強，內容與內容不會相互影響，減小內容取捨的複雜度，而且很大程度上增長網站代碼的複用率。

第六步，找到每屏的第一視覺點。

人的視線落點是須要引導的，經過科學理性的方式可快速找到用戶的視線範圍，把你最想讓用戶看到的內容放在這個範圍內，能夠起到絕佳的效果與回饋。同時，也能夠幫助你梳理每一個元素之間的關係。

咱們用這個思路再看那些牛逼的網站的時候，纔會瞭解，原來這纔是他們這些網站之因此牛逼的緣由。好比下面的這幾張蘋果的官網：

iPhone6官網不只用到了網格系統，同時也應用黃金分割率肯定文字、圖片與鏈接的間距，讓整個頁面看起來簡潔且合理。

固然，理性化的設計思路不只僅只有蘋果一家公司是這樣，在http://960.gs/上面，你會看到更多的成功案例供你們參考。

咱們的野狗科技的網站也一樣運用到了網格系統與黃金分割比例，讓整個網頁看起來更加合理，更具可讀性與溫馨性。

產品經理和設計師不只僅須要是審美出衆的人，更應該是理性的魔術師，當別人按照你構想的順序去瀏覽你的做品，或是在你的做品中看到你思考的過程，是否是僅僅比他們說「挺好看的」要強的多。因此，若是你是一個初學者，對產品設計不知從何下手，或者你的設計已經很不錯，可是遇到了瓶頸，那麼，經過這些幾何學與網格的使用必定會讓你的設計更進一步。

做者：張冀偉，野狗科技高級視覺設計師，從事設計工做三年，曾任北京奇虎360設計師，參與360安全路由、家庭衛士、兒童衛士等硬件項目，北京正邦創意品牌設計主管。曾獲德國Red dot 三項，德國漢諾威IF（top 300）兩項，美國IDEA（國際設計優秀獎）銅獎一項，Finalist三項設計大獎。