簡潔至上的Web設計 - 創意要素及設計技巧

周五了，將今次的譯文發上來，以紀念一周的過去。眼看著天氣突然就這麼熱了起來，坐在空調風口下面不到一米的距離內，周身熱乎乎的，雙眼也似有若無的迷離了起來，這是鬧那樣呢。

這周有兩大喜事。一是終於不用每天回家一直泡在iOS Wow Factor一書的翻譯工作當中了，具體情況會在接下來一篇文章當中進行嘀咕。第二是公司UED新總監的到任。看到了一些希望在裡面，這兩件事都是如此。我們來看正題吧。

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

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

簡潔風格的創意組成要素

固定寬度的頁面布局結構

花時間觀察一些簡潔風格的網站， 你會發現它們當中的絕大多數都有用到經過良好規劃的網格布局系統。如果哪位朋友對網格布局還不大了解的話，可以設想一下，在著手進行實際的視覺設計工作之 前，使用輔助線將頁面劃分為若干等寬的列，通過這種方式對頁面結構及元素的布局進行更精准的規劃。網格布局可以使設計方案當中的信息結構更加清晰，在視覺 上具有強烈的節奏感與一致性。

固定寬度的網格布局結構可以為頁面帶來秩序與效率。舉個例子，雖然Creative Review當中的頁面布局會根據內容類型的不同而有所區別，但我們能夠感受到的浏覽體驗卻是相當連貫的，因為這些頁面都是基於同一套網格布局框架進行設計的。下圖展示了他家的首頁和About頁面：

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

配色有些許凶殘麼——譯者C7210注。

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

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

A Brief Look at Grid-Based Layouts in Web Design

The 960 Grid System Made Easy

也不是什麼新概念了，國產好文章也蠻多，有欲求的同學可自行覓食——譯者C7210注。

良好的文字排印

良好的文字排印方案往往可以對簡潔風格的頁面設計起到事半功倍的推進作用。

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

看看那些設計優秀的網站，你會發現它們通常只會用到一到兩種字體，並在此基礎上通過不同的字號、字色、粗細、間距等屬性來體現出內容的層次結構。

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

這兩個站點用到的字體都不超過兩種，但它們的設計方案都比較充分地利用了字體各方面的屬性特質，使得整個頁面當中的信息層次非常鮮明。

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

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

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

A Basic Look at Typography in Web Design

CSS Typography: The Basics

CSS Typography: Techniques and Best Practices

CSS Typography: Examples and Tools

簡化的配色方案

在印刷領域，設計方案所用到的顏色數量通常會受到各種現實問題的限制，譬如項目的預算只允許設計師使用兩種顏色來設計海報。類似這樣的情況是很常見的，設計師們時常會因為這些局限而感到相當的鬧不住。

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

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

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

好麼？我個人持保留意見——譯者C7210注。

另外一些成功的簡潔設計方案當中，雖然用到的顏色數量會超過兩種，但整體的配色風格依然趨向於保守，而且用到的顏色多數是比較中性的。我們來看看Solo：

正如文字排印方式與信息傳達效果之間的關聯作用，配色同樣不僅是選取一些好看的顏色那麼簡單，優秀的配色方案可以通過正確的視覺基調將網站當中的內容更加有效地呈現出來。以Notologist為例，明亮、互補的顏色搭配使得內容信息及它們之間的關聯得到了非常自然的體現，頁面整體風格非常簡潔直白，同時又不失活力。

但我不喜歡這個頁面中的黑色導航——譯者C7210注。

一致的圖片樣式

如果同一個網站當中的圖片(照片、插畫、圖表等)樣式