20年高端網(wǎng)站建設(shè)服務(wù)商

網(wǎng)站設(shè)計(jì)中的黃金比例

作者

卓越邁創(chuàng)

發(fā)表于

2019年05月31日

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



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

在《超越CSS》這本書(shū)中,就提到了網(wǎng)站設(shè)計(jì)中的黃金比例這個(gè)概念。對(duì)于很多做設(shè)計(jì)的人來(lái)說(shuō),黃金比例并不陌生,它是最符合自然界美感的一個(gè)很神奇的東西,在古希臘的藝術(shù)雕塑中頻頻體現(xiàn)出來(lái)。對(duì)于我們網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō),只要記住一個(gè)數(shù)字就可以了:“1.62”,以950局中的頁(yè)面為例:

我們要為一個(gè)950px寬度局中頁(yè)面來(lái)設(shè)計(jì)欄目,根據(jù)黃金比例原則,可以這樣設(shè)計(jì):這樣的Web布局具有一定的平衡感,整個(gè)頁(yè)面也比較和諧。


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


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

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


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

華為·深開(kāi)鴻官網(wǎng)數(shù)字化升級(jí)

深圳開(kāi)鴻數(shù)字產(chǎn)業(yè)發(fā)展有限公司(簡(jiǎn)稱“深開(kāi)鴻”)是一家專注于數(shù)字化和智能軟件解決方案的企業(yè),華為對(duì)其持有股份。在行業(yè)內(nèi)具有較高的技術(shù)實(shí)力和品牌影響力,服務(wù)領(lǐng)域覆蓋工業(yè)、教育、交通及能源等多個(gè)行業(yè)。
2026-01-09

攜手金蝶打造國(guó)際化官網(wǎng)形象

金蝶國(guó)際正不斷推進(jìn)國(guó)際市場(chǎng)的業(yè)務(wù)布局,為了更好地服務(wù)海外客戶,企業(yè)官網(wǎng)成為其展示品牌價(jià)值、產(chǎn)品解決方案及服務(wù)能力的重要窗口。
2025-11-29

國(guó)資委企業(yè)水務(wù)集團(tuán)官網(wǎng)升級(jí)

深圳市水務(wù)科技有限公司是深圳環(huán)境水務(wù)集團(tuán)旗下專業(yè)科技企業(yè),長(zhǎng)期致力于智慧水務(wù)、數(shù)字化水環(huán)境治理解決方案,并在行業(yè)內(nèi)積累了豐富的技術(shù)與實(shí)踐經(jīng)驗(yàn)。
2025-09-09

助力中海達(dá)海外數(shù)字化官網(wǎng)升級(jí)

廣州中海達(dá)衛(wèi)星導(dǎo)航技術(shù)股份有限公司(Hi?Target)是中國(guó)測(cè)繪與定位領(lǐng)域的領(lǐng)先企業(yè),業(yè)務(wù)覆蓋智慧城市、基礎(chǔ)設(shè)施監(jiān)測(cè)、智能農(nóng)業(yè)等多個(gè)應(yīng)用場(chǎng)景。 隨著國(guó)際化布局和業(yè)務(wù)拓展的不斷深入,中海達(dá)官網(wǎng)亟需升級(jí),以更高效地展示品牌形象、技術(shù)實(shí)力及產(chǎn)品方案,滿足國(guó)內(nèi)外客戶多樣化的信息需求
2026-01-09

人形智能機(jī)器人優(yōu)必選官網(wǎng)建設(shè)

隨著智能機(jī)器人行業(yè)的快速發(fā)展,優(yōu)必選希望官網(wǎng)能夠更準(zhǔn)確、系統(tǒng)地呈現(xiàn)企業(yè)技術(shù)實(shí)力和產(chǎn)品應(yīng)用價(jià)值,滿足不同受眾對(duì)技術(shù)內(nèi)容和應(yīng)用場(chǎng)景的理解需求。在官網(wǎng)建設(shè)項(xiàng)目招標(biāo)中,卓越邁創(chuàng)憑借科技企業(yè)官網(wǎng)規(guī)劃能力和豐富執(zhí)行經(jīng)驗(yàn),成功中標(biāo)該項(xiàng)目。
2026-01-09

國(guó)民品牌華美月餅官網(wǎng)升級(jí)

華美月餅希望通過(guò)官網(wǎng)整合品牌文化與產(chǎn)品信息,提升品牌在消費(fèi)者心中的形象,同時(shí)優(yōu)化用戶瀏覽體驗(yàn)。 在本次官網(wǎng)建設(shè)項(xiàng)目中,客戶要求網(wǎng)站不僅展示產(chǎn)品,還要完整傳遞品牌歷史、節(jié)慶文化及品質(zhì)理念。卓越邁創(chuàng)憑借在消費(fèi)品牌數(shù)字化建設(shè)的豐富經(jīng)驗(yàn),成功中標(biāo)該項(xiàng)目。
2025-12-18
別錯(cuò)過(guò)!200+上市公司選擇的策劃方案
《2026年行業(yè)最新設(shè)計(jì)趨勢(shì)》 《網(wǎng)站痛點(diǎn)分析與優(yōu)化策略》 《競(jìng)品洞察與成功案例》
立即領(lǐng)取資料立即領(lǐng)取資料

僅剩5

* 200+上市公司都在用的工具書(shū)
微信掃碼領(lǐng)取
網(wǎng)站定制聯(lián)系
網(wǎng)站設(shè)計(jì)報(bào)價(jià)洽詢
您希望我們?yōu)槟峁┦裁捶?wù)呢
集團(tuán)官網(wǎng)建設(shè) 營(yíng)銷型網(wǎng)站建設(shè) 外貿(mào)網(wǎng)站建設(shè) 海外獨(dú)立站開(kāi)發(fā) 網(wǎng)站年度運(yùn)維 微信小程序開(kāi)發(fā) GEO搜索優(yōu)化 媒體發(fā)稿服務(wù) 視頻拍攝 品牌VI設(shè)計(jì) LOGO設(shè)計(jì) 畫(huà)冊(cè)設(shè)計(jì)
您的預(yù)算

3萬(wàn)-5萬(wàn)

5萬(wàn)-8萬(wàn)

8萬(wàn)-10萬(wàn)

10萬(wàn)以上

招標(biāo)項(xiàng)目

獲取方案

咨詢

微信掃碼咨詢
電話咨詢
在線咨詢

業(yè)務(wù)咨詢

在線詢價(jià)

微信咨詢