技術(shù)資訊
探索網(wǎng)頁設(shè)計(jì)中的黃金比例
2008-10-15 15:43:00
在網(wǎng)頁設(shè)計(jì)發(fā)展到一定階段的時(shí)候就必然會和其他學(xué)科或領(lǐng)域只是產(chǎn)生交匯和共鳴,在閱讀《超越CSS:web設(shè)計(jì)藝術(shù)精髓》這本書的時(shí)候,發(fā)現(xiàn)原來web設(shè)計(jì)還可以這樣。比較突出的例子是現(xiàn)在經(jīng)常被設(shè)計(jì)師提到的網(wǎng)頁柵格設(shè)計(jì),TAOBAO UED曾經(jīng)探討過這個(gè)問題(http://ued.taobao.com/blog/2008/09/17/grid_systems/),通過很有邏輯性的公式換算加上一定的數(shù)學(xué)分析,得到對網(wǎng)頁設(shè)計(jì)有建設(shè)性的概念指導(dǎo),從一定程度上說算是一種創(chuàng)新。
也許有的設(shè)計(jì)師會認(rèn)為使用這些所謂的規(guī)范性東西會是一種限制而不是創(chuàng)造,在我看來這些新的概念對網(wǎng)頁設(shè)計(jì)來說是一種嘗試和提升,會給你接下來的創(chuàng)意構(gòu)思提供一個(gè)堅(jiān)實(shí)的基礎(chǔ),讓人從一個(gè)新的視角來看待好的網(wǎng)頁設(shè)計(jì)。
在超越CSS這本書中,就提到了網(wǎng)頁設(shè)計(jì)中的黃金比例這個(gè)概念。對于很多做設(shè)計(jì)的人來說,黃金比例并不陌生,它是最符合自然界美感的一個(gè)很神奇的東西,在古希臘的藝術(shù)雕塑中頻頻體現(xiàn)出來。對于我們網(wǎng)頁設(shè)計(jì)師來說,只要記住一個(gè)數(shù)字就可以了:“1.62”,以950局中的頁面為例:
我們要為一個(gè)950px寬度局中頁面來設(shè)計(jì)欄目,根據(jù)黃金比例原則,可以這樣設(shè)計(jì):這樣的Web布局具有一定的平衡感,整個(gè)頁面也比較和諧。
現(xiàn)在的頁面布局一般都是比較彈性的設(shè)計(jì),因?yàn)檫@樣頁面可以充滿瀏覽者的屏幕空間,而不管視窗的大小尺寸是多少,這對于那些高分辨率寬屏的用戶來說是有意義的。而對于堅(jiān)持固定像素寬度的設(shè)計(jì)者來說,1024*768就是王道,摒棄了兩端的使用人群。在超越css這本書中還提到,即使是固定寬度的設(shè)計(jì),減掉瀏覽器的滾動(dòng)條寬度和瀏覽者打開了工具欄的寬度之后,水平寬度就顯得不夠用了:
許多設(shè)計(jì)師在設(shè)計(jì)版面的時(shí)候都是隨意制定一下寬度就開始他們的設(shè)計(jì),往往會出現(xiàn)挑選的寬度沒有考慮到說要表現(xiàn)的內(nèi)容,在后期出現(xiàn)內(nèi)容問題的時(shí)候就很受限制。還有很多開發(fā)人員在實(shí)現(xiàn)頁面的時(shí)候,并沒有完全依靠視覺效果圖來實(shí)現(xiàn),有時(shí)就大致量了一下然后根據(jù)以往經(jīng)驗(yàn)來定制寬度,而這種寬度往往不能很好的適應(yīng)他們的內(nèi)容,所以,這時(shí)候,黃金比例的使用就很重要了。
黃金比例不僅在大的布局上可以使用,在小的欄目設(shè)計(jì)中也可以靈活使用。可以細(xì)化到很小的設(shè)計(jì)元素,比如一塊圖片信息展示區(qū)域:
書中還提到可以根據(jù)內(nèi)容反向推導(dǎo)出大的區(qū)域?qū)挾?,例如網(wǎng)頁的首頁上需要放一個(gè)寬度為500的banner圖片,那么我們可以用黃金比例算出整個(gè)網(wǎng)頁可以選擇的合適寬度:500*1.62=810px,并不一定要是950或者800這些被很多人推崇的頁面寬度。
黃金比例還有哪些用處,大家一起來探討~~
原文:http://ued.alipay.com/?p=59
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計(jì)開發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2016-08-03 10:53:41] 網(wǎng)頁設(shè)計(jì)中標(biāo)簽式導(dǎo)航的設(shè)計(jì)思路
- [2012-02-20 21:40:11] 網(wǎng)頁切圖應(yīng)該注意的細(xì)節(jié)
- [2014-10-14 09:49:31] 網(wǎng)頁設(shè)計(jì)中需要掌握的功能以及美化
- [2011-10-19 09:13:45] 網(wǎng)頁設(shè)計(jì)總是超越技術(shù),設(shè)計(jì)是一種藝術(shù)!
- [2011-11-10 00:07:02] 谷歌搜索引擎算法升級 預(yù)計(jì)將影響35%的搜索結(jié)果
- [2014-09-28 10:39:40] 了解和運(yùn)用網(wǎng)頁設(shè)計(jì)中的GRUNGE
- [2009-04-19 08:42:00] 將設(shè)計(jì)執(zhí)行到底
- [2011-10-28 22:56:31] 青島網(wǎng)站設(shè)計(jì)時(shí)網(wǎng)頁上必須放關(guān)鍵詞的5個(gè)位置
- [2014-11-13 22:56:52] 網(wǎng)頁設(shè)計(jì)師如何跟客戶溝通
- [2011-10-14 17:21:42] 中文網(wǎng)站設(shè)計(jì)風(fēng)格分析
- [2011-11-15 00:12:46] 如何使蜘蛛逆向爬行索引
- [2014-01-06 11:55:06] 視覺層次感提升網(wǎng)頁設(shè)計(jì)效果(原創(chuàng))
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
青島flash網(wǎng)站 微信小程序 營銷策略 青島網(wǎng)站案例 網(wǎng)站動(dòng)畫 H5 手機(jī)網(wǎng)站建設(shè) 色彩心理學(xué) HTML5 青島輪胎網(wǎng)站設(shè)計(jì)公司 膠南網(wǎng)站建設(shè)公司 建站常識 力圖 扁平化設(shè)計(jì) 版面布局 輪胎網(wǎng)站設(shè)計(jì) html和css H5定制設(shè)計(jì) 網(wǎng)站改版 高端輪胎網(wǎng)站設(shè)計(jì) 青島網(wǎng)站營銷 官網(wǎng)網(wǎng)站建設(shè) 網(wǎng)站交互設(shè)計(jì) SEO 青島抖音小程序開發(fā) 外貿(mào)網(wǎng)站設(shè)計(jì) 微網(wǎng)站 良好的導(dǎo)航 蘋果系統(tǒng) php程序