最好的最小網站設計和用戶界面示例——另外，為什麼它們是有效的
已發表: 2018-07-20
有很多關於 UI 中的極簡主義及其吸引用戶注意力的力量的討論。 那麼，您是否應該趕上潮流並去除您網站上所有不必要的元素？
事實證明，你應該。
一項研究表明，視覺複雜性會影響用戶在50 毫秒內對網站的感知，使他們更難導航和與網站元素進行交互。
但是，不要將極簡主義誤認為簡單。 一個最小的網站可以是一個複雜的生態系統，但它的界面乾淨、清晰和簡潔。 配色方案簡單，佈局便於瀏覽網站，一切都以用戶體驗為設計理念。
極簡主義的網頁設計不僅僅是讓您的網站或應用程序看起來漂亮。 這是關於幫助用戶盡可能高效地瀏覽您的平台。 這是形式和功能的完美搭配。
“少即是多。”
請放心，當現代設計成為談話的話題時，我們都已經聽到這句話的次數超過了我們的數。 事實證明，極簡主義實際上是要走的路。 但是，我們都應該記住，儘管創建和管理簡約的設計和 UI 方法似乎很容易，但通往那裡的道路崎嶇不平，而且往往很棘手。
現在，您可能會想，“創建簡約的 UI 很容易……您只需刪除不需要的所有內容。”
但是男孩，你會錯嗎！ 試著這樣想像：你有一個產品和/或一項服務，你想為你的（潛在）客戶獲得最大量的信息。 但是，有一個問題。 您絕對不能使用任何類型的複雜通信。
聽起來不再那麼容易了，是嗎？
那麼，您如何創建極簡主義設計？
好吧，優秀設計師和偉大設計師之間的區別就在於此。 構建一個完美的最小網站或應用程序以獲取大量信息需要耐心、經驗和研究。 有幾種方法可以為完美的用戶體驗創建完美的用戶界面，但兩種主要策略是：
- 建起來
- 向下建造
前者需要更多的經驗，而且遠比後者難。 構建基本上意味著您從頭開始，只創建站點所需的必要元素。 這會帶來潛在的風險，即使對於設計老手來說也是如此，因為總有一些元素可能會被遺漏。 這就是為什麼向下建造總是可取的。
創建網站（尤其是極簡主義網站）時，構建（或略讀）絕對是更長的路線。 從本質上講，您可以將您能想到的所有可能元素都整合到一個大組合中。 之後，您開始略讀不必要的元素，並逐步了解最重要的特性、功能和信息。 在過濾之後，通過簡化來增強視覺體驗。
現在，讓我們通過一些設計精美的 Web UI 示例，探索它們為什麼好（或壞）並確定我們可以從它們中學到什麼。
這10個極簡主義設計的驚人例子設置了現代趨勢
1.推特
馬上，我們就有了臭名昭著的 Twitter 鳥。 我們不禁要提到這個聰明的符號，因為它的簡單和圓滑。
當這個社交網絡被廣泛使用時，設計很簡單，但有點笨拙。 徽標中有“Twitter”這個詞，當時鳥徽標已經過時了。 不久之後，事情開始發生變化。 UI變得越來越簡單。 並且不要忘記 140 個字符（現在是兩倍大小）的限制來傳達您的信息。
整個設計試圖變得簡單和簡約，但它只是缺少標記。 這個系統散發著“高效、快速”的極簡主義氣息。 但隨著最近的更新，這種設計確實體現了創意極簡主義。
現在，我們可以從這項服務中學到更多東西。 例如，將“最喜歡的”圖標從星星重新製作成心形的決定就是一個有用的簡化的很好的例子。 由於用戶需要花費更少的時間來盡可能地了解站點，因此心形圖標更改是理想的選擇。 對更易識別的符號的輕微更改使用戶能夠更有效地瀏覽。
此外，來自朋友和品牌的推文的時尚列表與巧妙的圖像和乾淨的界面相匹配，使設計優雅而精緻。
這個界面天生直觀，是為消費者而構建的，它的主頁部分注入了簡約元素，如白色空間，其發現部分的標題組織精美，帶來了完整的、極簡設計的完整循環。
2. 全球石油地圖（GSM London）
現在，討論一個稍微與業務相關的主題——一個有點奇怪的 UI 示例，與原油的進出口有關。 這個網站相當獨特，提供了極簡主義的一個很好的學習例子。
當您登陸網站時，您會看到流動的油和一條短信。 除了這些選項之外，還有探索按鈕。 您從該頭版獲得的第一印像是嚴肅認真，並推崇現代性。 但接下來是真正重要的部分。
單擊探索按鈕後，您不會看到解釋您正在查看的地圖是什麼的行和文本框。 不，你會得到一個地球儀來探索和點擊，過濾器放在一邊，以便進一步發現。
在這個例子中，我們不僅看到了一個非常強烈的第一印象的例子，而且看到了跟進的重要性。 在製作最小的用戶界面時，請記住您網站的每個方面都需要完美結合。 這樣，您將重要且負責任的效果烙印在您的服務和/或產品中，這就是理想的結果。
3.生菜公司
我們正在慢慢進入真正的交易（並不是前面的例子不好）。 這家活動策劃公司觸及了極簡主義的真正柔和甜蜜。 如果您考慮一下，進行室內設計或任何其他高度視覺化的工作，都需要您的在線展示準確無誤。 從Lettuce的例子中我們可以看出，這種專業的氛圍絕對可以傳遞到您的在線工作中。
極簡主義的一個高度相關的元素在這裡得到了完美的利用。 如果您現在還沒有猜到，它就是留白的重要技能。 是的，與您放在網站上的元素一樣重要，您不使用的元素也很重要。 這就是極簡主義的美麗、祝福和詛咒。
白色空間提供了一種呼吸空間，一個供用戶站立並觀察您提供的內容的開放空間。 在本網站的動畫移動菜單中，我們可以看到沒有特別促銷和折扣正是讓我們留下來的原因。 這聽起來幾乎違反直覺，但是，儘管如此，它向我們表明，在美學方面，它們意味著嚴肅的事情。
始終牢記您的目標受眾是誰，以及如何在不嚇到他們的情況下傳輸盡可能多的信息。
4. Rubrasonic
是時候觸及我們眼睛以外的其他感官的表面了。 這家提供背景音樂的公司將音頻作為其最小設計的一部分。 他們在頁面中央向您致意的最小幾何標誌，讓您無能為力。 直到您意識到將鼠標懸停在屏幕底部的氣泡上會產生旋律。
在旋律之後，您可以向下滾動，聆聽您自己設定的曲調。 這種利用聲音來銷售他們的音頻服務是巧妙的，因為它顯示了音樂作為一個發達環境的重要組成部分的重要性。
該網站有多個著名的歷史人物關於聲音的引用。 設計師在這裡放置的巧妙捕捉隱藏在顯眼的地方。 網站有點無聊，還沒動動鼠標就開始聽音樂了，證明背景音樂有改變心情的力量，一眨眼就改變心情。
雖然聲音是這個特定 UI 的最大武器，但 Rubrasonic 犯了一個小錯誤。 他們使用了沉重的調色板，這對眼睛來說有點困難。 音頻和視頻效果的結合仍然很重要，但我們絕不能忘記顏色在設計中的作用，尤其是在極簡設計中。 平衡的重要性怎麼強調都不為過。
顏色會產生影響。 在這個關於色彩心理學的DesignRush 案例研究中了解如何利用它並吸引您的消費者！
5. 下雨的心情
說到聲音，那些喜歡 ASMR 和其他大氣音樂的人肯定對這個極簡的網站很熟悉。 Rainy Mood 是一個單頁的網站，它只提供了幾個選項，但做得非常優雅。
本網站的強大之處在於其獨特的設計。 該網站的唯一目的是播放下雨天的白噪音，提供放鬆和冥想的感覺。 一張背景圖代表了一片草地的窗外景色，水濺得遍地都是，雨聲非常適合。 其餘圖像包括音量控制旋鈕和設計為白色小圖標的社交媒體鏈接。
從 Rainy Mood 的例子中，我們可以了解到，一張照片可以被充分利用，以至於它覆蓋了整個網站。 此外，最近他們嵌入了“每日歌曲”功能，這是一個推薦系統，可為您提供與雨聲相得益彰的歌曲建議。
儘管該網站不銷售產品或服務，但它以其簡單性提供輕鬆的氛圍。 利用我們每天在每個角落都受到超重營銷轟炸的事實，現在掌握了極簡設計。
6.Instagram
現在是從音頻切換到純視覺效果的時候了。 我們絕對不能不提及 Instagram 就談論極簡設計，這是一種既稀缺又豐富的設計。 首先，重要的是要區分這個照片共享平台的網站和移動應用程序迭代。
老實說，即使它是功能性的，人們也會注意到該網站給人一種不完整的感覺。 當極簡主義的表達達到散發這種氛圍的地步時，重新考慮是必要的。
但我們不要忘記，Instagram 是為移動用戶設計的，主要用於移動用戶，應用程序 UI 幾乎完美無缺。 滾動、點擊點擊是唯一的移動選項。 您可以看到的唯一內容來自用戶本身——網站不會提供任何其他元素供您選擇。 我們可以觀察到這一點，並了解到添加大量選擇會窒息您的網絡流量，而 Instagram 輕鬆地繞過了這個障礙。
我們或多或少都熟悉這個平台及其目的，但從設計的角度來看它並將其與來自同一分支的其他媒體進行比較很重要。 如前所述，Twitter 是最好的極簡網站之一，而 Instagram 正在打破標準社交網絡設計的模式。 他們都做到了，而不會失去任何可信度，也不會缺少功能部門。
7.品趣
說到精心設計的基於社區的網站，我們不能不提 Pinterest。 Pinterest 不僅徹底改變了我們瀏覽想法和靈感的方式，更重要的是，它徹底改變了我們在線策劃內容的方式。
憑藉僅由圖像組成的結構、極簡主義的方法和連接屏幕的少量文字，Pinterest 將其歸結為網站本身的流程。 除了標準的社交包之外幾乎沒有其他選項 - 在您想要保存以供以後保存或作為集合的一部分的內容中放置一個圖釘就是它所在的位置。
Pinterest 是一個網站，您可以在上面花費數小時而不會覺得它壓在您身上或讓您感到疲倦。
這一切都歸功於滾動系統，通過不每分鐘都按自己的方式拋出鏈接和建議，從而營造出“反侵入”的氛圍。 儘管 Pinterest 有一個龐大的數據庫供用戶使用，但它的外觀和感覺仍然就像您在瀏覽幾個關鍵圖像一樣。
從設計的角度來看，簡單的佈局，屏幕上沒有文字，為流量大的網站帶來輕鬆和現代的感覺。
8. 我們為何探索
是時候遠離社交網絡、點贊和分享了。 在這個精彩的例子中，我們可以看到極簡主義是如何用於敘事目的的。 這個美麗的講故事工具以從左到右滾動文本冒險的形式出現。
巧妙地使用了大量的空白，這個相當小的網站的訪問者不會厭倦，並且該網站有一個當天部分的圖像，以保持它的新鮮度並賦予它重播價值。
在從左到右的極簡風格網站的情況下，我們可以看到滾動可以本能地用於表示時間順序和/或任何想像的層次結構。
即使這個特定的網站甚至有 3D 模型，它們也被平滑地融入黑色背景中，留下足夠的空白空間，讓我們感受到宇宙中的小行星。 在整個旅程中，最小的環境讓遊客保持冷靜並專注於所提供的信息。 為了提高標準，小行星周圍有一些微妙的可點擊按鈕以獲取額外信息。
正如前面提到的一些網站所做的那樣，該網站告訴我們，確實越多就是越少。 它向我們表明，即使是“不那麼傳統”的教育網站也可以以極簡主義的風格完成。
快速修復您的設計。 註冊DesignRush 每日劑量！
9. 天鵝絨錘
一個精心設計的網站可能是最適合您業務的廣告。 音樂製作和公關公司 Velvet Hammer 意識到了這一點，並將其完美地投入使用。
該網站幾乎是單色的，顏色保持在黑色、白色和灰色的範圍內。 當您打開網站時，您會看到公司客戶在沒有任何解釋的情況下表演的快速剪輯照片蒙太奇。 很快，公司的標誌出現了，精美的排版緊隨其後。 縮小到一個圖標的大小，所有與 Velvet Hammer 合作過的樂隊都帶有他們的標誌。
隨著文本背後的紋理和背景漸變隨著滾動變得更加灰色，即使沒有文本可閱讀，訪問者的注意力也會保持集中。
一個帶有更多選項（但不是太多）的菜單被小心地放在頂部。 這有點令人困惑，但很乾淨。 一旦你完成滾動，網站就會變黑，並彈出更多選項。
這裡的留白用的很漂亮，頁面本身看起來精緻而奢華。
10. 萊維筆
在整個分析過程中，我們觀察到免費和付費、基於社區和以個人為中心的服務。 現在，是時候看看如何利用極簡主義來宣傳產品了。
信不信由你，這是一個鋼筆網站——準確地說是一個豪華的網站。 這是一個多功能工具，有很多選擇。 網站的黑色，設計師給了它一個嚴肅的感覺，而跟隨用戶的動畫讓它感覺很現代，甚至是未來派。 當您向下滾動網站時，筆會被解剖，其中的整個系統很容易解釋。
留白的使用做的很整齊。 這種設計將這支筆宣傳為某種科幻設備。 一切都在您眼前被剖析，即使是非技術精通的人也能立即理解整個概念。
這向我們表明，積極的營銷方法絕對不是銷售的唯一途徑。 一個普通的項目，擁有非凡的設計和網站元素，本身就會變得非凡。
極簡主義的網站設計有各種形狀和大小
而且，我們走了 - 一整套可供學習的最小網站。 有些比其他人更廣為人知，但每一個都給了我們一兩個寶貴的教訓。 幸運的是，我們將其總結為可操作的提示和技巧：
少即是多……但多多少少？
極簡主義通常總是在某種程度上存在。 最近，隨著廣告商社交網絡的擴張，極簡主義更受歡迎，因為它提供了一種不那麼前衛的營銷風格。 在為您的企業尋找合適的簡約風格時，請記住，您仍然需要將所有必要的信息傳達給潛在客戶。 用戶界面需要為你說話，所以保持簡單、簡潔和有品位。
顏色可能很棘手
這是極簡主義的一個敏感領域。 一般的經驗法則是使用盡可能少的顏色，但不要局限於黑色和白色。 在這里和那裡使用少量顏色可以幫助您真正強調您要傳達的主要觀點。 儘管如此，外部鏈接或網站其他部分的顏色編碼可以用作導航工具。
聲音在進化
是的，聲音。 如今，我們都擁有足夠強大的計算機，無論是家用的還是袖珍型的，都可以隨身攜帶。 所以是的，聲音是在平台內使用的有效工具。 盡可能保持它的工具性，並請專家將聲音與您網站的主題相匹配。 最近，隨著技術越來越先進，這似乎很有影響力。
不要只是為了切割而切割
這是設計界最常見的錯誤之一。 人們想讓他們的網站更有效，所以他們刪掉了很多東西，只留下一半必要的信息。
極簡設計的全部意義在於將所有註意力集中在您呈現的單一事物上。 嘗試將極簡主義視為一種微妙而有效的聚光燈，而不是化妝品。
它就是——研究執行良好的網站，從商業電子商務到教育和廣告等行業。 您可能已經得出結論，形象就是一切，廣告是關鍵。
在一個大多數人通過相當響亮、凌亂和混亂的渠道宣傳自己的世界中，請考慮採取更平靜的方式。 極簡設計的被動攻擊性通常比常規聲音響亮。
探索優秀的機構，讓您的網站在DesignRush 的網頁設計和開發機構列表中佔據優勢！