網(wǎng)站設計中的黃金比例

來源:【易網(wǎng)做網(wǎng)站設計/建設/制作/改版公司 | 更新:2020-02-27

在《超越CSS》這本書中,就提到了網(wǎng)站設計中的黃金比例這個概念。對于很多做設計的人來說,黃金比例并不陌生,它是最符合自然界美感的一個很神奇的東西,在古希臘的藝術雕塑中頻頻體現(xiàn)出來。

網(wǎng)站設計發(fā)展到一定階段的時候就必然會和其他學科或領域只是產(chǎn)生交匯和共鳴,在閱讀《超越CSS:web設計藝術精髓》這本書的時候,發(fā)現(xiàn)原來web設計還可以這樣。比較突出的例子是現(xiàn)在經(jīng)常被設計師提到的網(wǎng)頁柵格設計,TAOBAO UED曾經(jīng)探討過這個問題,通過很有邏輯性的公式換算加上一定的數(shù)學分析,得到對網(wǎng)頁設計有建設性的概念指導,從一定程度上說算是一種創(chuàng)新。

網(wǎng)站設計,黃金比例

也許有的設計師會認為使用這些所謂的規(guī)范性東西會是一種限制而不是創(chuàng)造,在我看來這些新的概念對網(wǎng)站設計來說是一種嘗試和提升,會給你接下來的創(chuàng)意構(gòu)思提供一個堅實的基礎,讓人從一個新的視角來看待好的網(wǎng)頁設計。

在《超越CSS》這本書中,就提到了網(wǎng)站設計中的黃金比例這個概念。對于很多做設計的人來說,黃金比例并不陌生,它是最符合自然界美感的一個很神奇的東西,在古希臘的藝術雕塑中頻頻體現(xiàn)出來。對于我們網(wǎng)頁設計師來說,只要記住一個數(shù)字就可以了:“1.62”,以950局中的頁面為例:我們要為一個950px寬度局中頁面來設計欄目,根據(jù)黃金比例原則,可以這樣設計:這樣的Web布局具有一定的平衡感,整個網(wǎng)站設計也比較和諧。

網(wǎng)站設計,黃金比例

現(xiàn)在的頁面布局一般都是比較彈性的設計,因為這樣頁面可以充滿瀏覽者的屏幕空間,而不管視窗的大小尺寸是多少,這對于那些高分辨率寬屏的用戶來說是有意義的。而對于堅持固定像素寬度的設計者來說,1024*768就是王道,摒棄了兩端的使用人群。在超越css這本書中還提到,即使是固定寬度的設計,減掉瀏覽器的滾動條寬度和瀏覽者打開了工具欄的寬度之后,水平寬度就顯得不夠用了:

許多設計師在設計版面的時候都是隨意制定一下寬度就開始他們的設計,往往會出現(xiàn)挑選的寬度沒有考慮到說要表現(xiàn)的內(nèi)容,在后期出現(xiàn)內(nèi)容問題的時候就很受限制。還有很多開發(fā)人員在實現(xiàn)頁面的時候,并沒有完全依靠視覺效果圖來實現(xiàn),有時就大致量了一下然后根據(jù)以往經(jīng)驗來定制寬度,而這種寬度往往不能很好的適應他們的內(nèi)容,所以,這時候,黃金比例的使用就很重要了。

網(wǎng)站設計,黃金比例

黃金比例不僅在大的布局上可以使用,在小的欄目設計中也可以靈活使用。可以細化到很小的設計元素,比如一塊圖片信息展示區(qū)域。

書中還提到可以根據(jù)內(nèi)容反向推導出大的區(qū)域?qū)挾龋缇W(wǎng)頁的首頁上需要放一個寬度為500的banner圖片,那么我們可以用黃金比例算出整個網(wǎng)頁可以選擇的合適寬度:500*1.62=810px,并不一定要是950或者800這些被很多人推崇的頁面寬度。

主站蜘蛛池模板: 欧美成人精品第一区二区三区| 免费无码成人片| 国产成人精品综合在线观看| 国产成人精品福利网站在线观看| 国产成人亚洲精品大帝| 色窝窝无码一区二区三区成人网站 | 久久久久AV综合网成人| 一级成人生活片免费看| 在线观看国产精成人品| 久久成人a毛片免费观看网站| 成人理论电影在线观看| 亚洲国产精品一区二区成人片国内 | 成人国产精品免费视频| 久久久久久亚洲av成人无码国产| 成人动漫在线播放| yw在线观看成人免费| 国产成人免费ā片在线观看| 欧美日韩成人午夜免费| 亚洲国产成人精品青青草原| 成人中文字幕一区二区三区| 精品无码成人网站久久久久久| 四虎高清成人永久免费影院| 国产成人精品免费视频软件| 成人午夜18免费看| 成人在线观看不卡| 成人性生活免费视频| 欧美国产成人精品一区二区三区 | 国产精品成人不卡在线观看| 成人欧美在线视频| 成人精品一区二区激情| 欧洲成人r片在线观看| 韩国成人在线视频| 成人精品一区二区户外勾搭野战| 红楼遗梦成人h文完整版| 欧美a级成人淫片免费看| 成人综合婷婷国产精品久久蜜臀 | 亚洲精品成人网久久久久久 | 亚洲av无码专区在线观看成人 | 口国产成人高清在线播放| 国产成人无码AⅤ片在线观看| 国产成人无码av在线播放不卡 |