標籤：

極簡的網頁設計如何體現設計感？

01-05

極簡風格的網頁設計，如果把握不好，可能弄巧成拙讓用戶覺得「簡陋」、「太素了」，應該如何避免？或者說已經是極簡風格的網頁，如何增加元素來體現設計感？

註：問題源於個人遇到的具體問題，http://shixiann.com 是一個設計上走極簡風格的社區網站(想盡量凸顯網站的核心--內容)，圖標、線條、色塊都盡量少用。但是目前有用戶覺得太素了，不認為是極簡，反而覺得是水平比較次的、簡陋的網頁。希望有知友可以針對我的具體問題也簡單回答下，不甚感激。

你對於極簡的理解並不透徹。「極簡」是手段、是形式而非目的，如果設計是為了「極簡」而「極簡」，很容易陷入「極簡只是單純的盡量少的元素」這種認知。

遠的不說，就拿「知乎」的網站設計來舉例好了。對比「新浪微博」、「人人網」這些社交網站，知乎就是一個非常典型的「極簡設計」。前二者都允許用戶自定義個人主頁，單單這一項就足矣將兩者從「極簡設計」的 List 中移除了。但知乎的設計也並沒有讓我們覺得單調乏味，反而我們會覺得優雅大方。問題就在這裡。網站的極簡設計有時是一種感覺，是一種理念，你想給用戶什麼功能，你要大方地給，要給的流暢給的漂亮，不想給的功能就一刀切地絕對不給。這也是人們會覺得 http://apple.com 設計出眾的原因，他給消費者所有應該知道的一切，但消費者卻很難察覺到開發者的入口在哪裡（我們都知道對於如今的蘋果，開發者和消費者的分量幾乎是同等重要的）。

再稍微深入地聊聊知乎。現在知乎其實就是五頁：時間軸（也就是首頁）、問答頁、話題頁、個人主頁，以及新推出的專欄頁。除了專欄頁的設計還不太融合到整體設計里外，另外的四部分的整體感已經很強了。這種整體感來源何處？是一種貫穿整站的設計元素的不斷重複。舉幾個大家都看得到的栗子：

  • 豎向排列的不同區域間的灰色橫線；

  • 主要超鏈接採用藍色，次要超鏈接採用灰色；

  • 綠色而非藍色的關注按鈕；
  • 回答人和其一句話介紹使用粗體；

  • 時間軸上活動人的右邊顯示活動時間；
  • …

如果按照你的理解，這些元素都該去掉，而且我看到在 http://shixiann.com 上看你也確實這麼做。但這恰好是為什麼網站用戶會覺得設計太過偷懶的緣故：你省卻了不該省的元素。

  • 灰色的細橫線雖然極不引人注意，但卻是個非常有必要的視覺提醒。你大多數時候不會意識到它的存在，但一旦去掉就會有「少點什麼但說不上來」的感覺；
  • 主次超鏈接顏色的區分，能幫我們「無意識」地過濾掉那些無用的信息，一旦所有鏈接使用相同顏色你又會有「總覺得多點又說不上來」的感覺；
  • 如果「關注」按鈕使用藍色我一點也不會覺得奇怪，但知乎的綠色「關注」真的是讓整個網站不單調的一個很重要的原因；
  • 粗體也是同理；
  • 時間軸上的時間提示對於我們來說，真的是非常無關緊要，「誰會關心這個呢？我關心的是內容啊！」但你想過沒，每天有多少次是瞟完問題再瞟一眼時間？這其實也是一個緩解整頁內容所帶給你的壓力的小把戲。
  • …

以上分析都是我的主觀馬後炮。但我相信你現在已經明白了，極簡設計並不是元素盡量少，而是「無用的」元素盡量少，而必要的元素一個都不少，有時還要不惜代價的利用這些必要元素。很多人以為極簡設計是最偷懶的，但我覺得極簡設計並不簡單，有時比擬物的還要複雜，因為擬物你已經有了參照物，只要依樣描繪就可以，但是極簡卻永遠沒有盡頭，因為什麼是合適，什麼是多餘，永遠都沒有公式。

「沒有人會關心你的動機，人們想要的是結果」，孫悟空取經歸來後如是說。

簡評：Less is more，極簡是一種設計思想，更是一種哲學。去偽存真，保留最核心的東西。在網頁設計中，極簡不是簡單的 0 + 1，而是 2 - 1。

極簡主義起始於二戰後的藝術運動，在設計界中佔據重要的一席之地。在網頁設計中，極簡主義為網站帶來了諸多的好處，它看上去非常簡單，但真正設計起來不單單是「Less is more」，需要有很多的指導思想。

什麼是網頁設計中的極簡主義？

網頁設計的極簡主義起始於 2000 年，Google 被認為是這個設計流派的先驅。

歸納一些極簡主義的定義和特徵：

保留最基本元素

屏幕上的元素越少，焦點越有效。根據此邏輯，如果你的屏幕只有一個元素，你可以確定這個信息一定可以傳達到用戶。

圍繞內容進行設計，只留下必要的次要元素（例如主導航），以便用戶不會感到困惑。

留白

極簡主義中最常見的元素是沒有元素。

留白是極簡主義的重要特徵，它賦予設計以力量。

視覺特性

在一個簡約的設計中，每個細節都有意義。你選擇留下什麼是至關重要的：

  • 平面紋理。極簡主義界面通常使用平面紋理，圖標和圖形元素。

  • 生動的攝影。圖像是最簡約設計中最突出的藝術作品，它們使整個世界的情感聯繫和設置一個氣氛。（園長：但選擇什麼樣的圖片至關重要，選擇繁忙的圖片更容易分心）

  • 最少顏色。在簡約設計中，我們使用顏色創造視覺興趣或直接注意，而不添加任何額外的設計元素或實際圖形。

  • 戲劇性的排版。大膽的文字寫出內容，同時制定一個更有趣的視覺排版。

  • 對比。你可以使用更少的元素進行設計，在創建視覺層次結構時需要更有創意。

極簡主義的網頁設計最佳案例

當談到極簡主義時，不要認為它元素少就覺得更簡單。

單焦點

單頁單焦點。每頁專註於一個概念，圍繞此做視覺。

增加期待值

在頂部放置大量留白空間，在向下滾動的過程中增加內容密度。

精鍊的副標題

提煉關鍵元素的此語，引發思考。

簡化但不是隱藏導航

導航是有用的，如果你為了極簡而隱藏導航欄，在思路上是對的，但在用戶體驗上是很不好的，比如隱藏的導航欄點擊率會很低（如下圖，gif，chrome 和 知乎 app 點擊圖片查看）

而可以使用這樣的方式展示導航欄：

極簡主義的登錄頁面和作品集

內容較少的個人主頁，作品集或者登錄頁面可以採用極簡設計。

資源和工具

  • Minimalist Color Palettes?：非黑白的極簡主義配色方案。
  • Color Contrast Checker：輸入你的前後背景色，幫你調整顏色建議搭配。

小結

刪除不必要的元素，只保留最核心的。留下更輕便的結構、簡單的導航，留白以啟發思考。內容不多的時候，可以試試只用文字，要注意排版。

延伸閱讀：

  • 極簡主義設計的最佳實踐
  • 網頁導航設計：站在 2017 年的回顧與展望
  • 流行的網頁動畫技術

歡迎關註：知乎專欄「極光日報」，每天為 Makers 導讀三篇優質英文文章。

剛剛看了一下shixiann，對於「shixiann是走向極簡風格的社交網站」這一觀點不敢苟同。

極簡不是一味減少元素減少設計就能達到的，必要的東西還是得有。

網頁設計極簡主義三要素：主題、可用性、平衡。

主題。

看到「實現」這個title的時候我並沒有覺察到這個網站的主題是什麼，憑著對題主的描述的理解，我知道這個網站有社交元素，然後試著點了點，明白了怎樣評論和關注。

但這是幹什麼的網站？或者它其實僅僅是給出了一些信息，然後增加了一些互動功能而已？對不起我真不知道主題是啥……

可用性。

上面我也說了，我第一眼沒有明白網站的用意。另外，該網站只有一個主題色，藍色。一般網站會有主題色，輔助色和點睛色（確切名字不太記得了），而這個網站，只用一個顏色也罷，竟然只有左上角一點點……好無奈啊我還以為左側是導航欄呢哭。

沒突出重點信息和功能，像我這樣的小白受眾會吃不少苦，這樣也不利於網站的成長吧。

平衡。

向上面說的竟然只有左側有點點藍色，就很不平衡了，其它倒也還好能接受。

可以去看一下這篇文章。極簡主義的網頁設計。

我這樣改了一下。（對不起隨便把你的頁面扯下來PS……）

有沒有覺得高端帥氣了好多？

1. 很多人已經說了，字體的選擇很重要。舉例來說，知乎專欄在Mac上會調用Hiragino Sans GB，相比默認的黑體顯得更有態度。

2. 極簡要上檔次的一個要點是布局。建議題主研究一下grid layout。嚴格的網格布局可以讓簡單的文字變得有整體感。塊與塊之間要有足夠且一致的呼吸空間。

另外，針對題主的網站，有些個人意見。

1. 需要明顯的地方還是要明顯。首頁的兩個鏈接只是加了個下劃線，字型大小、色彩都沒有區別，而且上間距和下間距居然不一致，看上去就像是上面那個段落里的最後一句話一樣。

2. 該有的東西還是得有。為啥首頁有直接創建項目的鏈接，可是導航條里卻沒有?

3. 不同類別的信息之間，甚至是同類信息的不同條目之間都需要有足夠的視覺區分。「所有項目」頁面中，僅用淺背景色區分不同的項目，項目之間沒有分隔線或是足夠的空間，會讓人產生正在讀一篇長文，而不是在閱讀一個個相對獨立的條目的認知錯覺。

4. 「所有項目」頁的信息展示效率很低。打開後只能看到1~2條條目，需要一條條往下翻，而且每一條都是直接全文，這就把總結概要的負擔放到了讀者身上，如同看一本沒有目錄的書一樣，會增加讀者的認知疲勞。總結概要應該是項目創建者的任務，另外建議增加關鍵字功能。

國外其實有個很類似的項目可以參考：LaunchSky

如何做到極簡？

首先，只滿足用戶的核心需求（內容上的簡）

其次，有一個非常棒的用戶體驗（形式上的簡）

當然，很多時候，你是看不到這些的，因為處於自身的商業目標。。。

關注shixiann很長時間了，個人很喜歡這種很素的風格。

線條、色塊是給內容分區，圖標是讓文字更容易理解或者頁面更生動。如果內容本身已經很好地歸類了，也沒有難以用文字表達的部分，這樣就很好。

另外，為了設計感而產生的設計，肯定不會是好的設計了。

目前我在做的一個小項目，有部分靈感就是從你的網站來的，謝謝：）

你管這個叫極簡？

文字排版，顏色，再有加個框架可能更好些，我覺得知乎的進入界面是個很好的借鑒

補充一點

字體

是非常重要的事情

字體的不同，即使是一個小小筆畫的細微差別，都會產生不同的風格或是情感影響的差別

我往往在極簡風格的設計時，都要選出若干種比較適合的字體反覆推敲，比較他們帶來的美感和情感的不同

即使不是在極簡風格，想要追求精緻的美感，同樣如此

字體/大小規範、排版、結構：

例如：

jekyll+lanyon主題做的

Blog · Cellier

正因為極簡，細節才重要，選擇極簡者通常藝術品味也頗高，但在你的網站上看不到這一點，一眼望去不計其數的細節被忽略，毫無品味可言。

推薦一個設計不錯的網站 圖翼網 http://www.tuyiyi.com/hao/

字體大小，行間距，字體顏色，模塊間距離。

還是要看你展示的內容而定的，

標題字體不對。

極簡的網頁設計對設計者的版式把控能力要求很高，試著通過生動的版式設計去打動人，另外顏色的處理也至關重要，極簡的網頁設計是對內容的精鍊，去除不必要的元素，更好的傳達內容的意思給用戶，平衡美感和用戶體驗~不要忘記網頁設計的初衷是什麼，加油！！

門外漢點開網頁的直觀感受是 logo 有點灰濛濛的，主色調和微博登陸的按鈕色彩不搭，最頂上「實現」二字有點粗糙，不夠精緻，可能是樓上說的字體問題。

簡約而不簡單

擬物時代關注的人的感性認知，極簡風格關注的理性認知。

當把一切裝飾物都去掉的時候，內容本身就成了唯一的設計元素。

那麼問題來了

你對內容做了什麼設計呢？

LOGO的字體，模塊與模塊之間的比例，模塊與留白之間的比例，標題和正文字型大小的比例，字型大小和行距的比例，行距和字距的比例，按鈕字體與周邊空間的比例

它們之間的關係有做過處理嗎？

不要任何分隔線，當然可以。

比如列表項之間的空間加大到能讓人一眼就區分出兩篇文章，又不能覺得太空，再配合加大標題字型大小，摘要縮進之類的處理方式（我隨便說說而已不要跟著做）

分隔線不是目標，只是手段。如果你有別的手段能達成同樣的目標，就可以去掉分隔線。

稍做了點改動 :)

原圖：

個人意見：極簡設計的設計感來源於：

1、網頁配色。網頁所用的配色需要融洽，很多看起來「簡陋」的網頁多源於它的配色沒做好。現在有很多提供網頁配色服務的網站，可以提供很好的參考。

2、排列：有序的設計可以讓用戶感覺非常舒服。

極簡本身就很有設計感。前提是極簡，而不是簡單。

點開了樓主的網站，上半部是簡單粗糙，下半部是臃腫堆砌。離極簡很遠

推薦閱讀：

※怎樣發覺潛在的用戶需求或創造需求？
※產品新人如何做產品？
※互聯網行業的產品總監是怎麼成長起來的？
※如何看待近期阿里巴巴拚命推廣「來往」這個產品？
※除了省錢，你為什麼願意使用共享式的產品？

TAG:網頁設計 | 設計 | 產品 | 用戶體驗設計 | 極簡主義Minimalism |