精練，不等于簡(jiǎn)單。這與撫琴是一個(gè)事理，你也許有能力彈得很快，但你并不需要在所有處所都彈得這么快。在良多時(shí)辰，讓速度慢下來反而比彈得飛快要來的加倍堅(jiān)苦。現(xiàn)實(shí)上，味道往往最能表此刻年夜容自然、舒緩平平的韻律傍邊。接下來進(jìn)入原文作者人格;我發(fā)現(xiàn)自己在很年夜水平上就是一Dummy System來著。
精練的Web頁面設(shè)計(jì)氣概是當(dāng)前圈子傍邊的風(fēng)潮之一。在本文中，我們首先將對(duì)這類氣概傍邊的那些最具代表性的組成要素進(jìn)行剖析，隨后，我(英文原文作者)還會(huì)向列位分享一些工作中的拭魅戰(zhàn)技巧。
精練氣概的創(chuàng)意組成要素
固定寬度的頁面結(jié)構(gòu)結(jié)構(gòu)
花時(shí)刻不雅察看一些精練氣概的網(wǎng)站，你會(huì)發(fā)現(xiàn)它們傍邊的絕年夜年夜都都有用到經(jīng)由精陋習(xí)劃的網(wǎng)格結(jié)構(gòu)系統(tǒng)。如不美觀哪位伴侶對(duì)網(wǎng)格結(jié)構(gòu)還不年夜體味的話，可以設(shè)想一下，在著手進(jìn)行現(xiàn)實(shí)的視覺設(shè)計(jì)工作之前，使用輔助線將頁面劃分為若干等寬的列，經(jīng)由過程這種體例對(duì)頁面結(jié)構(gòu)及元素的結(jié)構(gòu)進(jìn)行更精準(zhǔn)的規(guī)劃。網(wǎng)格結(jié)構(gòu)可以使設(shè)計(jì)方案傍邊的信息結(jié)構(gòu)加倍清楚，在視覺上具有強(qiáng)烈的節(jié)奏感與一致性。
固定寬度的網(wǎng)格結(jié)構(gòu)結(jié)構(gòu)可覺得頁面帶來秩序與效率。舉個(gè)例子，雖然Creative Review傍邊的頁面結(jié)構(gòu)會(huì)按照內(nèi)容類型的分歧而有所區(qū)別，但我們能夠感應(yīng)感染到的瀏覽體驗(yàn)卻是相當(dāng)連貫的，因?yàn)檫@些頁面都是基于統(tǒng)一套網(wǎng)格結(jié)構(gòu)框架進(jìn)行設(shè)計(jì)的。下圖展示了他家的首頁和About頁面：
對(duì)于在線雜志或報(bào)紙一類需要呈現(xiàn)年夜量?jī)?nèi)容的網(wǎng)站來說，要打造精練的頁面設(shè)計(jì)方案則加倍堅(jiān)苦。不外英國的衛(wèi)報(bào)(The Guardian)以及一些同類型的在線報(bào)紙站點(diǎn)卻是向我們展示了經(jīng)由過程固定寬度的網(wǎng)格結(jié)構(gòu)實(shí)現(xiàn)精練設(shè)計(jì)方案的可行性：
配色有些許兇殘么——譯者C7210注。
如不美觀不使用固定寬度的結(jié)構(gòu)體例來組織這些內(nèi)容，幾乎可以說，首頁將會(huì)亂的烏煙瘴氣。然而，在網(wǎng)格結(jié)構(gòu)的輔佐下，模塊之間的留白及條理關(guān)系都相當(dāng)清楚，整個(gè)內(nèi)容結(jié)構(gòu)的健壯性獲得了晉升。
下面兩篇文章(英文)可以輔佐你更好的理解與實(shí)踐網(wǎng)格結(jié)構(gòu)的概念：
A Brief Look at Grid-Based Layouts in Web Design
The 960 Grid System Made Easy
也不是什么新概念了，國產(chǎn)好文章也蠻多，有欲求的同窗可自行覓食——譯者C7210注。
精采的文字排印
精采的文字排印方案往往可以對(duì)精練氣概的頁面設(shè)計(jì)起到事半功倍的推進(jìn)浸染。
對(duì)字體數(shù)目的限制是這其中的一個(gè)關(guān)頭身分。如不美觀在統(tǒng)一套設(shè)計(jì)方案傍邊運(yùn)用了過多的字體，它們彼此之間就會(huì)發(fā)生視覺上的競(jìng)爭(zhēng)與沖突，這無疑會(huì)使頁面變得凌亂不勝，用戶的閱讀連貫性也會(huì)受到極年夜的破損。
看看那些設(shè)計(jì)優(yōu)異的網(wǎng)站，你會(huì)發(fā)現(xiàn)它們凡是只會(huì)用到一抵站種字體，并在此基本上經(jīng)由過水平歧的字號(hào)、字色、粗細(xì)、間距等屬性來浮現(xiàn)出內(nèi)容的條理結(jié)構(gòu)。
在這方面，紐約時(shí)報(bào)(The New York Times)與The Mavenist都是不錯(cuò)的例子。
這兩個(gè)站點(diǎn)用到的字體都不跨災(zāi)站種，但它們的設(shè)計(jì)方案都斗勁充實(shí)地操作了字體各方面的屬性特質(zhì)，使得整個(gè)頁面傍邊的信息條理很是光鮮。
除了字體以外，行間距(line-height)也是文字排印方案傍邊的一個(gè)關(guān)頭性身分。使行與行之間連結(jié)足夠的空間，文字段落就能變得加倍易讀，當(dāng)用戶閱讀到一行文字的末尾時(shí)，也可以很輕松的將目光轉(zhuǎn)向下一行開首的位置。我們可以在樣式表傍邊經(jīng)由過程line-height屬性對(duì)行間距進(jìn)行調(diào)整。
此外，對(duì)于每一行傍邊的文字來說，字間距(letter-spacing)也是我們需要考慮到的細(xì)節(jié)問題。合理的字間距可覺得文字帶來更好的呼吸感。
關(guān)于文字排印，也有些不錯(cuò)的文章(英文)舉薦一看：
A Basic Look at Typography in Web Design
CSS Typography: The Basics
CSS Typography: Techniques and Best Practices
CSS Typography: Examples and Tools
簡(jiǎn)化的配色方案
在印刷規(guī)模，設(shè)計(jì)方案所用到的顏色數(shù)目凡是會(huì)受到各類現(xiàn)實(shí)問題的限制，譬如項(xiàng)目的預(yù)算只許可設(shè)計(jì)師使用兩種顏色來設(shè)計(jì)海報(bào)。近似這樣的情形是很常見的，設(shè)計(jì)師們時(shí)常會(huì)因?yàn)檫@些局限而感應(yīng)相當(dāng)?shù)聂[不住。
而Web設(shè)計(jì)規(guī)模傍邊卻不存在這類問題，現(xiàn)在，年夜都顯示設(shè)備所撐持的顏色數(shù)目都復(fù)雜的不亦樂乎。年夜手藝上講，我們可以隨心所欲地打造各類花里胡哨花團(tuán)錦簇的設(shè)計(jì)方案，然而這樣的實(shí)踐體例顯然會(huì)與精練至上的設(shè)計(jì)方針各走各路。良多經(jīng)典的案例傍邊只會(huì)用抵站種顏色， 即某個(gè)明度的灰色外加一種有彩色。其中的有彩色會(huì)用在最為關(guān)頭的頁面元素上，例如主要的鏈接或頁頭傍邊的交互對(duì)象。年夜氖亟誶度來嗣魅這種極簡(jiǎn)的配色方案具有一舉兩得的浸染，一方面，它無疑會(huì)對(duì)精練視覺氣概的構(gòu)建起到至關(guān)主要的浸染，同時(shí)，這類方案還能有用的提高頁面元素之間的對(duì)比度，使那些主要元素獲得最年夜水平的凸起。
推薦閱讀
<b>創(chuàng)業(yè)的路上要堅(jiān)持不懈 一個(gè)保定站長(zhǎng)真實(shí)的經(jīng)歷</b>
我出生于保定的一個(gè)通俗農(nóng)村家庭，巨細(xì)就神馳著長(zhǎng)年夜后能干出一番事業(yè)。初中時(shí)第一次進(jìn)修信息手藝，年夜此就迷上了電腦，可是在黌舍進(jìn)修電腦，一周就兩節(jié)課，偶然還打消不上。機(jī)房里電腦就20多臺(tái)，但學(xué)生有70多個(gè)，>>>詳細(xì)閱讀
本文標(biāo)題：<b>簡(jiǎn)潔至上的Web設(shè)計(jì)——?jiǎng)?chuàng)意要素及設(shè)計(jì)技巧</b>
地址：http://www.geekbao.cn/a/22/20120319/41999.html
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示