蘋果公司設(shè)計師年薪高達(dá)17.4萬美元，約合人民幣110萬，而蘋果官網(wǎng)也被業(yè)界捧為大師之作，受到世界各國產(chǎn)品經(jīng)理和設(shè)計師的追捧。為什么蘋果公司設(shè)計的網(wǎng)頁如此受歡迎，有什么技巧在其中嗎？今天就讓我們來聊聊如何理性的進(jìn)行設(shè)計，談?wù)劗a(chǎn)品經(jīng)理和設(shè)計師在工作的過程中怎么樣把幾何學(xué)融入到作品中。大家一起來看看吧！
設(shè)計本來就是一種理性的科學(xué)門類，審美因人而異，只有言之有理的設(shè)計才能說服別人，運用幾何學(xué)的手法就是設(shè)計師的利器之一，科學(xué)的設(shè)計并不會限制你的創(chuàng)意，它只會幫助你的作品成為精品的必要手段之一。從古至今，人類從自然界中得到過無數(shù)的啟示，其中就包含 黃金分割。這個從貝類完美的生長方式中提煉出的曲線，改變了所有人的審美。
從公元前20世紀(jì)到16世紀(jì)的史前巨石柱記載的關(guān)于1:1.618比例的黃金矩形的應(yīng)用開始到現(xiàn)在，人們對黃金分割的愛從來就沒有改變過，五邊形和五角星也同樣具有黃金分割比例，因為五角星內(nèi)三角形的邊長比例是1：1.618。在海膽和雪花里也能找到相同的五邊形/五角形關(guān)系。
人體也具有同樣的完美比例，人體的高度與伸展開的手臂形成了一個正方形將人體圍住，而手和腳正好落在以肚臍為圓心的圓上，肚臍位于黃金分割點上，這在文藝復(fù)興時期的藝術(shù)家萊昂納多·達(dá)芬奇和丟勒的《完美的比例》《人體比例四書》也都有所體現(xiàn)。
人類對這種審美的提煉不僅僅是對于自然界，而是幾乎把它運用到我們能見到的各個領(lǐng)域當(dāng)中。建筑中的比例，雅典的帕提農(nóng)神廟（Parthenon)是一個運用希臘比例體系的實例。
之后的許多哥特式的大教堂也大多運用了這個"完美比例"，例如我們都知道的巴黎圣母院。
人類從黃金分割率中提煉出的√2矩形也具有許多特殊的性質(zhì)，能被無限的分割成更小的等比矩形，其長寬比也相當(dāng)接近黃金分割率（1.414與1.618）
正是由于這個屬性，√2矩形成為歐洲D(zhuǎn)IN（德國工業(yè)標(biāo)準(zhǔn)）紙張尺寸體系的基礎(chǔ)。也就是我們最常見的紙張尺寸。這樣裁切出來的紙張不僅容易生產(chǎn)，而且不會有一點浪費。
除了√2矩形以外，由其衍生出來的√3、√4、√5矩形也同樣具備可以被橫向和縱向切割的屬性。√3矩形也是正六邊形的構(gòu)成基礎(chǔ)，這個形狀也可以在自然界中的很多方面找到，例如雪花晶體與蜂巢的形狀。
幾何化的方式在當(dāng)今的設(shè)計中的應(yīng)用更是多到?jīng)]朋友，也成為設(shè)計師的金牌工具，可以讓你的設(shè)計言之有理，如果你的設(shè)計已經(jīng)很不錯了，那么通過幾何化的規(guī)范，你的設(shè)計可以更加的具有可信度與持久性，從而減少反對的聲音，縮短淘汰的周期。以logo設(shè)計為例，我們看看這些牛逼的logo到底有什么共同點。
首先是Apple的logo，利用斐波那契數(shù)列1,1,2,3,5,8,13,21，……為比例的圓形切割而成，使得logo整體非常的平衡。
Apple的另一個產(chǎn)品iCloud也是由具有黃金比例的四個圓構(gòu)建而成，而整體的logo也同樣符合黃金比例。
同樣，追求更加年輕有效的百事公司、堅持革新與唯美的國家地理、追求個性的Twitter、以及眾多的汽車logo都遵循幾何化的設(shè)計方式去規(guī)范他們的品牌。
設(shè)計的幾何學(xué)在排版與網(wǎng)頁設(shè)計上的應(yīng)用更是十分必要的，版式設(shè)計與網(wǎng)頁設(shè)計的信息體量遠(yuǎn)比標(biāo)志設(shè)計大得多，它需要通過你對信息的梳理來引導(dǎo)用戶去按照你的方式正確閱讀。所以使用科學(xué)的方式梳理你的頁面布局會讓你的作品更加具有 連續(xù)性、秩序性與易讀性。網(wǎng)頁設(shè)計或是板式設(shè)計不同于其他的設(shè)計內(nèi)容，它不僅要考慮每個元素的樣式，并且要有設(shè)計的順序，而不是盲目的不斷嘗試。
第一步，給你的網(wǎng)頁或版式做定位。
不是所有的網(wǎng)站或版式都是統(tǒng)一的套路，它們也有自己的性格在里面?？紤]品牌的定位是怎樣的，受眾群體是誰，用戶的閱讀順序與閱讀體驗是怎樣的，我們最想讓用戶看到什么，用戶最想看到什么……要在有限的畫布中展示所有想要表現(xiàn)的內(nèi)容，就一定會有取舍，設(shè)計不是僅僅做到美觀即可，好看只是你符合設(shè)計師這個職位的前提；設(shè)計師更多要考慮的是解決問題。
第二步，確定大風(fēng)格。
依據(jù)所設(shè)計的內(nèi)容，確定比例，色彩，形狀等這些基本的要素。統(tǒng)一的風(fēng)格不是偷懶，他會讓你的設(shè)計內(nèi)容更具一致性與連續(xù)性，不會讓用戶或讀者有太多不必要的跳出感，并且，大風(fēng)格的確定能加深你對所設(shè)計內(nèi)容的認(rèn)識。
第三步，確定你的畫布尺寸。
在網(wǎng)頁設(shè)計當(dāng)中，設(shè)計師最常用到的是960網(wǎng)格系統(tǒng)，它可以說是具有里程碑式或者具有代表意義的系統(tǒng)，設(shè)計之初主要針對的是1024×768的屏幕。雖然現(xiàn)在早已是1200以上像素的天下了，但960網(wǎng)格系統(tǒng)也早已從最初的理性設(shè)計的工具變成了網(wǎng)站設(shè)計的布局思維。
以1024×768的屏幕為例，用戶在瀏覽網(wǎng)站是，視線熱區(qū)可覆蓋大概80%的屏幕，此部分空間尺寸大致為974×650，在瀏覽器左右預(yù)留一些空間，并且為方便響應(yīng)式設(shè)計，我們的可設(shè)計區(qū)域就成為了現(xiàn)在最常用到的960×650像素，這個尺寸也同樣接近黃金分割的尺寸。
第四步，為你的畫布分欄。
12欄布局
16欄布局
用理性的網(wǎng)格將你的頁面分欄，這樣可以很好的將頁面中得圖片與文字進(jìn)行區(qū)隔，段落與段落間進(jìn)行區(qū)隔。
考慮到黃金分割的原理與響應(yīng)式頁面的可操作性，我們將頁面分為12，16或24欄，欄數(shù)依據(jù)你要設(shè)計的網(wǎng)頁體量而定。
第五步，確定最小字符。
橫向則依據(jù)你所使用的最小字符高度而定，一般使用12pt—16pt的文字，每行60—80字符是比較合理的范圍。這樣，我們就得到了一張理性，簡單，有效的網(wǎng)格，使用網(wǎng)格設(shè)計可使網(wǎng)頁的連貫性與秩序性增強(qiáng)，內(nèi)容與內(nèi)容不會相互影響，減少內(nèi)容取舍的復(fù)雜度，并且很大程度上增加網(wǎng)站代碼的復(fù)用率。
第六步，找到每屏的第一視覺點。
人的視線落點是需要引導(dǎo)的，通過科學(xué)理性的方式可快速找到用戶的視線范圍，把你最想讓用戶看到的內(nèi)容放在這個范圍內(nèi)，可以起到絕佳的效果與回饋。同時，也可以幫助你梳理每個元素之間的關(guān)系。
我們用這個思路再看那些牛逼的網(wǎng)站的時候，才會了解，原來這才是他們這些網(wǎng)站之所以牛逼的原因。比如下面的這幾張?zhí)O果的官網(wǎng)：
iPhone6官網(wǎng)不僅用到了網(wǎng)格系統(tǒng)，同時也應(yīng)用黃金分割率確定文字、圖片與連接的間距，讓整個頁面看起來簡潔且合理。
當(dāng)然，理性化的設(shè)計思路不僅僅只有蘋果一家公司是這樣，在http://960.gs/上面，你會看到更多的成功案例供大家參考。
我們的野狗科技的網(wǎng)站也同樣運用到了網(wǎng)格系統(tǒng)與黃金分割比例，讓整個網(wǎng)頁看起來更加合理，更具可讀性與舒適性。
產(chǎn)品經(jīng)理和設(shè)計師不僅僅需要是審美出眾的人，更應(yīng)該是理性的魔術(shù)師，當(dāng)別人按照你構(gòu)想的順序去瀏覽你的作品，或是在你的作品中看到你思考的過程，是不是僅僅比他們說"挺好看的"要強(qiáng)的多。所以，如果你是一個初學(xué)者，對產(chǎn)品設(shè)計不知從何下手，或者你的設(shè)計已經(jīng)很不錯，但是遇到了瓶頸，那么，通過這些幾何學(xué)與網(wǎng)格的使用一定會讓你的設(shè)計更進(jìn)一步。
作者：張冀偉，野狗科技高級視覺設(shè)計師，從事設(shè)計工作三年，曾任北京奇虎360設(shè)計師，參與360安全路由、家庭衛(wèi)士、兒童衛(wèi)士等硬件項目，北京正邦創(chuàng)意品牌設(shè)計主管。曾獲德國Red dot 三項，德國漢諾威IF（top 300）兩項，美國IDEA（國際設(shè)計優(yōu)秀獎）銅獎一項，F(xiàn)inalist三項設(shè)計大獎。
以上就是:產(chǎn)品經(jīng)理和設(shè)計師怎么把幾何學(xué)融入到產(chǎn)品中的介紹，大家看了之后有收獲嗎？希望能給大家?guī)韼椭?/p>
新聞熱點
疑難解答
