中文原文：極簡主義網(wǎng)站設(shè)計:寓豐富于簡單
譯自：Minimalist Web Design: When Less is More
原作者：Kayla Knight
譯者：神飛

--------------------------------------------------------------------------------

作為設(shè)計師，我們都知道，一個極簡的設(shè)計可以實現(xiàn)漂亮的效果。

然而，很多設(shè)計師在實現(xiàn)上有些麻煩：要么是沒有時間讓使用如此少的元素制作的頁面看起來漂亮，要么就是最終的結(jié)果只是看起來“不完美”。

網(wǎng)上有很多關(guān)于極簡主義設(shè)計的文章，而本文的目的是幫你實現(xiàn)一個漂亮而不空洞的極簡網(wǎng)站設(shè)計。

最重要的是，我們將展示一個小的極簡網(wǎng)站設(shè)計畫廊，這樣你就可以分析為什么一些設(shè)計可以而其它的則不可以。

什么是極簡主義設(shè)計

極簡主義設(shè)計已經(jīng)被描述為最基本的設(shè)計，剔除了多余的元素、色彩、形狀和紋理。

它的目的是使內(nèi)容被突出出來并成為焦點。從一個視覺的角度來說，極簡主義設(shè)計意味著平靜和將思想帶回本真。

這個設(shè)計運(yùn)動始于瑞士，然后被用于多種媒體：圖形設(shè)計、建筑、音樂、文學(xué)、繪畫以及最近的網(wǎng)頁設(shè)計。(拓展閱讀維基百科：極簡主義)

盡管極簡主義已經(jīng)有幾十年了，早期的互聯(lián)網(wǎng)并沒有能夠展示它。即便除了旋轉(zhuǎn)的logo、滾動和鮮艷的色彩之外，網(wǎng)站設(shè)計依然常常是雜亂和咄咄逼人的。

我們將在本文中討論極簡網(wǎng)站設(shè)計的基本原理。但是即便你選擇不去追求極簡主義的審美，本文也能幫你簡化你的設(shè)計，無論你是哪種風(fēng)格。

越簡單越豐富

正如提到的，極簡主義將最重要的內(nèi)容帶到最前面并為用戶避免分散注意力。如果一個頁面有太多的元素，瀏覽者將迷惑于去看哪里或誤解每個元素的優(yōu)先級。一個極簡主義設(shè)計將焦點正好放到正確的內(nèi)容上。

比如，在一個黑白設(shè)計上的任何色斑，都會引起用戶的注意力。色彩本身也將成為焦點。讓我們來看一個具體的例子：

之前你或許已經(jīng)見到此類設(shè)計：純白背景，一個內(nèi)容塊和一個圖形元素。

圖形元素使用色彩、紋理和形狀。很明顯這是頁面中最重要的元素，而且它代表了設(shè)計師的品牌和個性。

因為這個特殊的圖形元素的復(fù)雜性，該頁面中的更多內(nèi)容會讓它不太醒目，顯得不太重要。保持內(nèi)容到最小，設(shè)計師就實現(xiàn)了完美的平衡。

如何簡化內(nèi)容

實現(xiàn)極簡設(shè)計或者簡化設(shè)計的第一步，不是簡單的去掉大部分圖片，而是要重新考慮內(nèi)容并將其簡化到無遮蓋的需求。只有那樣才能讓頁面中最重要的元素實現(xiàn)其預(yù)期的效果。

就像你策劃任何其它網(wǎng)站一樣，寫下你需要的內(nèi)容：logo、介紹、導(dǎo)航等等。去掉其它一切不需要的東東。盡可能的丟掉它們。

下面是一些你可能不需要的元素。請注意這僅僅是一個指導(dǎo)。你的確切的需求將依賴于你的具體設(shè)計。下面的一些元素對你的網(wǎng)站來說可能不是必須的。

• 社區(qū)媒體的圖標(biāo)或圖形，或者社區(qū)媒體部分
• 宣傳員和補(bǔ)充說明或介紹
• “推薦,” “流行”和“最新”列表(包括Twitter和RSS訂閱列表)
• 多于3個主要部分的頁面(比如“介紹” “關(guān)于”和“服務(wù)”)
• 次級導(dǎo)航頁面

這里的關(guān)鍵并非讓網(wǎng)站有較少的功能，而是去掉不是必要的元素(從而強(qiáng)調(diào)必須的元素)或?qū)⒍鄠€部分整合到一個更簡單的布局(比如，通過合并你的社區(qū)媒體鏈接到“關(guān)于”或介紹性部分)。

你也可以分割內(nèi)容到獨立的頁面，給予內(nèi)容的每個部分更多關(guān)注。

如何簡化設(shè)計

現(xiàn)在輪到盡可能的簡化設(shè)計了。

簡約設(shè)計應(yīng)該有較少的紋理、色彩、形狀、線條、內(nèi)容或排版。然而，如果太直白，設(shè)計將會空洞。與其丟掉所有東西，不如通過給焦點添加一個重要的特征來給設(shè)計一些感染力。

選擇焦點可能的樣式，并在你的設(shè)計過程中注意一下下面提到的技巧。

使用一個很棒的線框

通過理論下面的展示，我們看到一些設(shè)計師通過微妙的色彩填充、獨特布局或有趣的圖形添加一些視覺趣味。然而，或許他們所依賴的最重要的元素，就是一個獨特的線框。

為這樣的網(wǎng)頁創(chuàng)建一個線框需要一些額外的注意事項。通過正確的線框，你可以實現(xiàn)正確的層級和組織以及創(chuàng)建正確的視覺趣味。

要啟動一個線框，請按照以下步驟：

• 確定你絕對需要的內(nèi)容
• 在一個列表里面，區(qū)分內(nèi)容的優(yōu)先級
• 給予你的列表繪制線框的草圖以實驗最佳的視覺層級

當(dāng)作出了線框之后，考慮一下布置以及視覺上的處理方法。譬如，你的logo使用了一種在其它地方不再重用的顏色，你必須說明原因。

擴(kuò)展閱讀：從線框圖到最終設(shè)計

空白

空白實際上同義與極簡主義。

無論你的設(shè)計多么有創(chuàng)意，一個缺少大量空白的極簡主義設(shè)計不是一個真正的極簡主義設(shè)計。這樣，一定要在元素周圍比你平時添加更多的空白。

空白對平衡即將出現(xiàn)在頁面中的少量元素是必要的。

平衡、對齊、對比

雖然大部分的布局可以通過空白和良好的線框?qū)崿F(xiàn)，還是要特別注意一下設(shè)計的基本原則。與極簡設(shè)計相關(guān)的三個最重要的因素是平衡、對齊和對比。

要確保您的設(shè)計遵循這些原則，但并不需要一個補(bǔ)充的視覺輔助以看起來“完成”了。

請同時注意其它基本設(shè)計原理?；貦z它們并實驗不同的選擇來實現(xiàn)最佳的效果。查看 “設(shè)計的原理”以獲取更多參考。

當(dāng)過度設(shè)計成為一個習(xí)慣

過度設(shè)計有時會成為一種習(xí)慣。無論你多么艱難的嘗試將一個設(shè)計保持簡單，它最終變得凌亂和復(fù)雜。要修正這一點，我們必須養(yǎng)成新的習(xí)慣。

試著在每個項目之前回顧上面的技巧并讓它們貫穿整個設(shè)計流程。每次集中精力開發(fā)一個習(xí)慣。比如，努力在將內(nèi)容放到空白上之前減少和簡化它們。

如果您發(fā)現(xiàn)自己左右為難，“有什么遺漏了”，可以先試著把東西拿出來，而不是加入一些新的東西。

極簡主義的每一個方面，需要不同的天賦。你將這些原理實踐的越多，你的設(shè)計就將變得越簡單。

另外，一旦你使用了這里討論到的技術(shù)，看一下最終的產(chǎn)品并查看一下你是否能找到更進(jìn)一步簡化這個結(jié)果的方法。

你可以專注于在設(shè)計過程中你不能確定的區(qū)域，而且你也可以向其他設(shè)計師詢問以指出你可能遺漏的元素。

極簡網(wǎng)站設(shè)計欣賞

下面是一個極簡主義網(wǎng)站設(shè)計的簡要展示?？匆幌挛覀冇懻摰脑硎侨绾螌崿F(xiàn)的。同樣也可以看一下哪個打破了我們的指南，并思考它們?yōu)槭裁催€可行。

1. James Day Photo

2. Killswitch Collective

3. Lonely

4. DBushell

5. XPD.no

6. Toy NY

7. Joshua Serbus

8. Ah-Studio

9. Symour Powell

10. Icon Werk

11. Neil Wilson Architects

12. Non-Format

13. Zaum

14. Checkland Kindlysides

15. Blumenthal

16. Tink London

17. Proud Creative

18. Kimag

19. Bernat Fortet

20. All Day