国产一精品一aⅴ一免费-国产一精品一av一免费-国产一精品一av一免费爽爽-国产一久久香蕉国产线看观看-国产一卡2卡3卡四卡高清-国产一卡二卡3卡4卡视频

　　網頁設計中的幾何學

　　設計的幾何學在排版與網頁設計上的應用更是十分必要的，版式設計與網頁設計的信息體量遠比標志設計大得多，它需要通過你對信息的梳理來引導用戶去按照你的方式正確閱讀。所以使用科學的方式梳理你的頁面布局會讓你的作品更加具有連續性、秩序性與易讀性。

　　網頁設計或是板式設計不同于其他的設計內容，它不僅要考慮每個元素的樣式，并且要有設計的順序，而不是盲目的不斷嘗試。

　　第一步，給你的網頁或版式做定位。

　　不是所有的網站或版式都是統一的套路，它們也有自己的性格在里面。考慮品牌的定位是怎樣的，受眾群體是誰，用戶的閱讀順序與閱讀體驗是怎樣的，我們最想讓用戶看到什么，用戶最想看到什么……要在有限的畫布中展示所有想要表現的內容，就一定會有取舍，設計不是僅僅做到美觀即可，好看只是你符合設計師這個職位的前提；設計師更多要考慮的是解決問題。

　　第二步，確定大風格。

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

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

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

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

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

　　12 欄布局： 　　

　　16 欄布局：

　　24 欄布局： 　　

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

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

　　第五步，確定最小字符。

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

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

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

　　我們用這個思路再看那些牛逼的網站的時候，才會了解，原來這才是他們這些網站之所以牛逼的原因。比如下面的這幾張蘋果的官網： 　　

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

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

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

　　小結

　　產品經理和設計師不僅僅需要是審美出眾的人，更應該是理性的魔術師，當別人按照你構想的順序去瀏覽你的作品，或是在你的作品中看到你思考的過程，是不是僅僅比他們說“挺好看的”要強的多。

　　所以，如果你是一個初學者，對產品設計不知從何下手，或者你的設計已經很不錯，但是遇到了瓶頸，那么，通過這些幾何學與網格的使用一定會讓你的設計更進一步。