簡單是關鍵——探索最小的網頁設計

極簡主義網頁設計與其說是一種特定的設計美學，不如說是一組設計原則或指南。 在實踐中，遵循這些原則會產生一個簡單的網站設計，它只使用最重要的元素來實現訪問者的預期結果。

除了普遍存在的“少即是多”的概念外，這些原則還包括使用有限的調色板和負空間等技術。

最少的網頁設計少即是多

“少即是多”可能是最常聽到的極簡主義格言之一，無論是談論網頁設計還是任何其他形式的極簡主義。 但在極簡主義網頁設計的背景下，它的真正含義是什麼？

有時，通過首先查看什麼不是極簡主義，更容易弄清楚什麼是極簡主義設計。 這是一個極端的例子：

雖然 Ling's Cars 的網站顯然非常成功，但它經常列出現有設計最差的網站。 發生了很多事情。 任何人都可以看到它並立即知道它不是極簡主義的。

然而，有很多精心設計的網站也不是極簡主義的。 以這個為例：

這個網站設計精美，但在動畫、紋理背景、拼貼元素和排版之間，絕對不是極簡主義。 不一定是任何特定元素單獨使其不符合極簡主義網頁設計定義 - 它更多的是所有這些元素的組合。

極簡主義設計專注於創造引人注目的設計，而更少的事情發生。 實現這一目標的一個關鍵是不斷刪除元素，直到設計中斷。 在這種情況下，“中斷”應被解釋為不再滿足用戶的需求。

最小的網頁設計讓內容脫穎而出

支持極簡主義網頁設計的最引人注目的論點之一是它讓內容真正脫穎而出並閃耀。 這就是為什麼一個簡單的網站設計是這麼多藝術家、攝影師甚至一些作家的首選。 他們希望他們的創意內容成為關注的焦點，而不是其他人創造的設計元素。

以 Ian Jones 的網站為例。 他從事平面和數字設計以及攝影。 他的網站將重點放在內容上，同時還融入了一些有趣的設計元素（如網格背景）和微妙的動畫。 最終的結果是一個極簡的 UI 設計，讓他的作品大放異彩。

編劇兼電影導演 Artemy Ortus 的網站是極簡主義設計的另一個令人驚嘆的例子，它專注於他的作品。 幻燈片元素在不造成任何設計混亂的情況下創造了大量的視覺趣味。

Cooper Perkins 的網站是極簡主義設計的又一個絕妙例子，它使用動畫來創造興趣而不會造成混亂。

每個 UI 和 UX 決策都必須是有意的

從表面上看，極簡主義設計似乎比看起來更複雜的設計風格更容易掌握。 事實上，通常情況正好相反。

極簡主義設計將每一個設計元素放在首位和中心。 網頁設計師所做的每一個選擇都會展示給每一位訪問者。 雖然視覺上更複雜的設計可能會導致幾乎看不見的小錯誤或失誤（對於許多初學者來說，這是一個受歡迎的好處），但簡單的網站設計並不能提供相同的覆蓋範圍。

Narrator WordPress 主題是一個很好的網站示例，它對將所有內容聯繫在一起的小元素進行了很多思考。 在不為不同元素添加視覺混亂的情況下，線條、箭頭符號和簡單的灰色背景為網站提供了有時缺乏極簡設計的潤色。

乍一看，Inlay 的網站看起來非常簡約。 滾動顯示動畫和更複雜的屏幕，但整體極簡主義的氛圍始終存在。

應用程序也可以從極簡設計中受益。 這個 Word Counter 應用程序的簡單設計使您可以輕鬆查看它提供的所有功能，而無需更正式的入職培訓。 很容易看出，所做的每一個設計決策都是有意的，並強調可用性。

利用負空間

一個好的極簡主義網頁設計最重要的元素之一可能是使用負空間。 極簡主義設計與不存在的東西一樣重要。

負空間，也稱為“空白”，是圍繞設計和/或內容元素定義的空白或開放空間。 誠然，有時這個空間並不總是真正空的，可能會被背景紋理、圖案或顏色填充。 但它仍然是沒有像網站的其他元素一樣被“使用”的空間。

Platoon Branding Studio 在其標題中的字體周圍使用了充足的負空間，使其脫穎而出並立即吸引眼球。

Nohau 的標題很相似，它們的字體周圍有很多空白區域。

負空間也可用於在設計中創建可能不會立即顯而易見的有趣形狀或圖像。

這個來自布朗克斯動物園的標誌和長頸鹿腿之間的空間一起玩。 它們是摩天大樓的輪廓。

用攝影、排版和對比創造戲劇

僅僅因為設計簡單或極簡併不意味著它也不能具有戲劇性。 在極簡設計中創造戲劇效果的一些最常見方法包括使用攝影、排版和對比（無論是在顏色方面還是在設計元素之間）。

大照片，包括照片背景，是為設計增添大量視覺趣味的好方法，如果做得好，絕對可以融入極簡主義的設計美學。 為了獲得最大的影響，最好避免使用非常忙碌的照片。 極簡設計中的照片本身至少應該有點極簡主義（包括簡單的調色板和負空間的使用）。

Wildsmith Skin 網站在他們的登陸屏幕上使用了一張大照片，以及其他引人注目的字體。 它立即引起了人們的注意，而分割照片是一種不太常見的選擇。

Iglucraft 是另一個使用大照片的站點的絕佳示例，不僅在主登陸屏幕中，而且在整個站點中。 過渡動畫被考慮並添加到整體用戶體驗中。

除了大型攝影，大型插圖和視頻也可用於極簡主義網頁設計。

In Focus 網站在其背景中使用動畫、插圖和視頻。 雖然該網站不是立即直觀的，但探索和使用它很有趣。

排版是極簡設計師正在做一些非常酷的事情的另一個領域。

以藝術和文化非營利組織 KANEKO 的主要排版為例。 標題中字體上的圖案和顏色覆蓋與許多照片或插圖一樣具有視覺刺激性，但方式完全不同。

葡萄牙製作公司在大型視頻背景上混合使用了實線和線條排版，利用了兩種增加大量戲劇效果的技術。

Kobu 的網站不僅在每個屏幕上使用的顏色之間具有良好的對比度，而且在整個使用的各種屏幕之間也具有良好的對比度。 它將每個項目作為其獨特的特徵進行區分。

排版層次結構

由於在簡約的網頁設計中每個決定都必須經過深思熟慮，因此花時間創建清晰的排版層次感非常重要。 當類型必須區分不同類型的內容而沒有其他設計元素的幫助時，排版層次尤其重要。

例如，當一個人訪問一個極簡主義的網站時，他們應該能夠一眼就識別出標題、標題、正文和導航，而不必閱讀內容。 實現這一目標的最佳方法是通過這些元素之間的清晰對比。

InVision 的內部設計博客使用清晰的排版層次來區分標題、標題和正文。

雖然佈局和技術（例如為不同的印刷元素使用不同的顏色）對於實現這一目標大有幫助，但通過大小、重量和样式來描述各種元素至少同樣重要。

Stills WordPress 主題使用清晰的排版層次結構來區分標題和正文。

即使是最小的設計通常也應該包括至少三個層次的印刷層次結構：標題（也可以用於標題）、副標題和正文或文本副本。 通常，有多個子標題級別，但這絕不是必需的。 有些網站使用兩個級別（有些甚至選擇只使用一個級別，儘管在大多數情況下不推薦）。

保持導航簡單

許多極簡主義網站崩潰的一個領域是創建用戶友好的導航。 這在具有大量頁面的更複雜的網站上尤其常見。

頂部導航欄仍然是極簡設計的中流砥柱。 簡單的文本鏈接，有時帶有子菜單，是最常見的。 可以調整排版、顏色、形狀和其他設計元素以適應網站的整體外觀和感覺。 但還有其他選擇。

在極簡主義網頁設計中發現的另外兩種非常常見的導航設計模式是漢堡包和烤肉串菜單。 漢堡菜單由三個或四個水平線組成（變化有時使用垂直線，但想法是相同的），而烤肉菜單由三個點組成。

儘管充滿了可用性問題，臭名昭著的漢堡菜單——它已成為隱藏導航的通用快捷方式——仍然存在，因為它減少了視覺混亂。

Nilton Clothing 使用三個偏移線來創建他們的漢堡包菜單，該選擇已成為三個匹配線的流行替代品。

在 RFTB 的漢堡菜單後面放置彩色背景使其脫穎而出。

最常見的是，漢堡菜單將用於主導航，而烤肉菜單可能用於設置菜單或其他子菜單類型。 雖然兩者都成為更常見的導航元素，但一些設計師仍然添加文本以指示漢堡包是菜單。 如果網站不針對精通技術的用戶，這將特別有用。

極簡主義調色板

關於什麼是極簡主義調色板有許多思想流派。 許多極簡主義網站只使用兩種顏色。 其他人使用三個、四個或更多。 單獨的調色板不會成就或破壞簡約的網頁設計。

Pittori di Cinema 網站的主頁使用三色調色板（光標為紅色，背景為黃色，黑色字體）。

Zeus Jones 的網站包含多種顏色，每個部分使用不同的補色。 色塊清楚地描繪了各個部分，同時保持極簡主義。

Dot Lung 的網站使用了充滿活力的紫色、紅色和白色調色板。 它創造了一種活力和現代感，同時保持了簡約的整體配色方案。

Flow 的網站使用兩種顏色的調色板，但背景顏色不斷變化。 這是對極簡主義調色板的獨特詮釋。

有很多可能的方法可以為簡單的網站設計創建調色板。 但就像極簡設計的所有元素一樣，每個選擇都需要有意識，並改善整體用戶體驗。

結論

極簡設計帶來的最大挑戰是設計師沒有什麼可以隱藏的。 設計的每個元素都必須證明其價值。 每個元素都必須經過深思熟慮的選擇，並完美地實施，才能使設計本身出類拔萃。

將極簡設計視為比其他設計風格更容易的網頁設計師通常對創建產品所需的努力、時間和技能感到驚訝，該產品可以在用戶行為和體驗方面實現其目標，同時保持真正的極簡美學。

• • •

進一步閱讀 Toptal 設計博客：

• 粗野主義網頁設計、極簡主義網頁設計和 Web UX 的未來
• 擬物化、扁平化設計和字體設計的興起
• 停止製造垃圾：設計持久界面的指南
• 發揮你的靈感——情緒板指南
• 偷竊的藝術：如何成為大師級設計師