簡潔至上的Web設(shè)計(jì)——創(chuàng)意要素及設(shè)計(jì)技巧

時間：2022-07-11 19:03:01 | 來源：建站知識

時間：2022-07-11 19:03:01 來源：建站知識

簡潔，不等于簡單。這與彈琴是一個道理，你也許有能力彈得很快，但你并不需要在所有地方都彈得這么快。在很多時候，讓速度慢下來反而比彈得飛快要來的更加困難。實(shí)際上，味道往往最能體現(xiàn)在從容自然、舒緩平淡的韻律當(dāng)中。接下來進(jìn)入原文作者人格;我發(fā)現(xiàn)自己在很大程度上就是一Dummy System來著。

簡潔的Web頁面設(shè)計(jì)風(fēng)格是當(dāng)前圈子當(dāng)中的風(fēng)潮之一。在本文中，我們首先將對這類風(fēng)格當(dāng)中的那些最具代表性的組成要素進(jìn)行分析，隨后，我(英文原文作者)還會向各位分享一些工作中的實(shí)戰(zhàn)技巧。

簡潔風(fēng)格的創(chuàng)意組成要素

固定寬度的頁面布局結(jié)構(gòu)

花時間觀察一些簡潔風(fēng)格的網(wǎng)站，你會發(fā)現(xiàn)它們當(dāng)中的絕大多數(shù)都有用到經(jīng)過良好規(guī)劃的網(wǎng)格布局系統(tǒng)。如果哪位朋友對網(wǎng)格布局還不大了解的話，可以設(shè)想一下，在著手進(jìn)行實(shí)際的視覺設(shè)計(jì)工作之前，使用輔助線將頁面劃分為若干等寬的列，通過這種方式對頁面結(jié)構(gòu)及元素的布局進(jìn)行更精準(zhǔn)的規(guī)劃。網(wǎng)格布局可以使設(shè)計(jì)方案當(dāng)中的信息結(jié)構(gòu)更加清晰，在視覺上具有強(qiáng)烈的節(jié)奏感與一致性。

固定寬度的網(wǎng)格布局結(jié)構(gòu)可以為頁面帶來秩序與效率。舉個例子，雖然Creative Review當(dāng)中的頁面布局會根據(jù)內(nèi)容類型的不同而有所區(qū)別，但我們能夠感受到的瀏覽體驗(yàn)卻是相當(dāng)連貫的，因?yàn)檫@些頁面都是基于同一套網(wǎng)格布局框架進(jìn)行設(shè)計(jì)的。下圖展示了他家的首頁和About頁面：

對于在線雜志或報紙一類需要呈現(xiàn)大量內(nèi)容的網(wǎng)站來說，要打造簡潔的頁面設(shè)計(jì)方案則更加困難。不過英國的衛(wèi)報(The Guardian)以及一些同類型的在線報紙站點(diǎn)倒是向我們展示了通過固定寬度的網(wǎng)格布局實(shí)現(xiàn)簡潔設(shè)計(jì)方案的可行性：

配色有些許兇殘么——譯者C7210注。

如果不使用固定寬度的布局方式來組織這些內(nèi)容，幾乎可以說，首頁將會亂的一塌糊涂。然而，在網(wǎng)格布局的幫助下，模塊之間的留白及層次關(guān)系都相當(dāng)清晰，整個內(nèi)容結(jié)構(gòu)的健壯性得到了提升。

下面兩篇文章(英文)可以幫助你更好的理解與實(shí)踐網(wǎng)格布局的概念：

A Brief Look at Grid-Based Layouts in Web Design

The 960 Grid System Made Easy

也不是什么新概念了，國產(chǎn)好文章也蠻多，有欲求的同學(xué)可自行覓食——譯者C7210注。

良好的文字排印

良好的文字排印方案往往可以對簡潔風(fēng)格的頁面設(shè)計(jì)起到事半功倍的推進(jìn)作用。

對字體數(shù)量的限制是這其中的一個關(guān)鍵因素。如果在同一套設(shè)計(jì)方案當(dāng)中運(yùn)用了過多的字體，它們彼此之間就會產(chǎn)生視覺上的競爭與沖突，這無疑會使頁面變得凌亂不堪，用戶的閱讀連貫性也會受到極大的破壞。

看看那些設(shè)計(jì)優(yōu)秀的網(wǎng)站，你會發(fā)現(xiàn)它們通常只會用到一到兩種字體，并在此基礎(chǔ)上通過不同的字號、字色、粗細(xì)、間距等屬性來體現(xiàn)出內(nèi)容的層次結(jié)構(gòu)。

在這方面，紐約時報(The New York Times)與The Mavenist都是不錯的例子。

這兩個站點(diǎn)用到的字體都不超過兩種，但它們的設(shè)計(jì)方案都比較充分地利用了字體各方面的屬性特質(zhì)，使得整個頁面當(dāng)中的信息層次非常鮮明。

除了字體以外，行間距(line-height)也是文字排印方案當(dāng)中的一個關(guān)鍵性因素。使行與行之間保持足夠的空間，文字段落就能變得更加易讀，當(dāng)用戶閱讀到一行文字的末尾時，也可以很輕松的將目光轉(zhuǎn)向下一行開頭的位置。我們可以在樣式表當(dāng)中通過line-height屬性對行間距進(jìn)行調(diào)整。

此外，對于每一行當(dāng)中的文字來說，字間距(letter-spacing)也是我們需要考慮到的細(xì)節(jié)問題。合理的字間距可以為文字帶來更好的呼吸感。

關(guān)于文字排印，也有些不錯的文章(英文)推薦一看：

A Basic Look at Typography in Web Design

CSS Typography: The Basics

CSS Typography: Techniques and Best Practices

CSS Typography: Examples and Tools

簡化的配色方案

在印刷領(lǐng)域，設(shè)計(jì)方案所用到的顏色數(shù)量通常會受到各種現(xiàn)實(shí)問題的限制，譬如項(xiàng)目的預(yù)算只允許設(shè)計(jì)師使用兩種顏色來設(shè)計(jì)海報。類似這樣的情況是很常見的，設(shè)計(jì)師們時常會因?yàn)檫@些局限而感到相當(dāng)?shù)聂[不住。

而Web設(shè)計(jì)領(lǐng)域當(dāng)中卻不存在這類問題，如今，多數(shù)顯示設(shè)備所支持的顏色數(shù)量都龐大的不亦樂乎。從技術(shù)上講，我們可以隨心所欲地打造各種花里胡哨五彩繽紛的設(shè)計(jì)方案，然而這樣的實(shí)踐方式顯然會與簡潔至上的設(shè)計(jì)目標(biāo)背道而馳。很多經(jīng)典的案例當(dāng)中只會用到兩種顏色， 即某個明度的灰色外加一種有彩色。其中的有彩色會用在最為關(guān)鍵的頁面元素上，例如重要的鏈接或頁頭當(dāng)中的交互對象。從某種角度來說這種極簡的配色方案具有一石二鳥的作用，一方面，它無疑會對簡潔視覺風(fēng)格的構(gòu)建起到至關(guān)重要的作用，同時，這類方案還能有效的提高頁面元素之間的對比度，使那些重要元素得到最大程度的突出。

AisleOne的配色方案稱得上是這方面的典范：

Fuzzco則更為極端的只用到一種顏色：

好么?我個人持保留意見——譯者C7210注。