極簡主義網(wǎng)站:你需要知道的一切

極簡主義網(wǎng)站可以幫助用戶更快地思考。

在用戶變得越來越不耐煩且技術(shù)普遍變變得越來越倦怠的時(shí)代池磁,冷靜和清晰的設(shè)計(jì)對于任何互聯(lián)網(wǎng)時(shí)代業(yè)務(wù)的成功都至關(guān)重要挖息。

本文主要從以下幾個方面來定義極簡主義網(wǎng)站設(shè)計(jì)并向你和你的用戶解釋其優(yōu)勢所在:

  • 極簡主義設(shè)計(jì)的美學(xué)標(biāo)志
  • 極簡主義的UI優(yōu)勢
  • 極簡主義設(shè)計(jì)如何防止開發(fā)技術(shù)倦怠拓售,以及為什么這對你的成功至關(guān)重要

視覺美學(xué)

當(dāng)我們想到極簡主義時(shí)募书,我們自然而然地會聯(lián)想到與之互動的極簡主義的各個方面绪囱。

例如,蘋果美學(xué)無需近觀就可以很容易地辨認(rèn)出來莹捡,它是科技界的主要潮流引領(lǐng)者鬼吵。盡管它們的設(shè)計(jì)相對簡單,但看上去總是非常美觀篮赢。

究其原因所在齿椅,是因?yàn)樗鼈兯缟械囊曈X風(fēng)格是極簡抽象藝術(shù)化的。

蘋果的極簡主義視覺美感

下面讓我們探究一下它的真正含義启泣,促成極簡抽象視覺美感的各種因素涣脚,以及為什么這些因素能夠如此有效。

白色還是黑色

白色的中性特征不僅容易入眼种远,而且也很容易記住涩澡。因?yàn)榘咨珱]有任何代表意義顽耳,所以用戶不會因?yàn)樗稚⒆⒁饬蚴潜黄人伎荚擃伾唧w要表達(dá)的意思坠敷。

白色背景可以突出顯示一些重要的元素,比如號召性語句或者有意義的文本射富,同時(shí)確保它們之間的最佳色彩對比膝迎。它的亮度與對比色相匹配,是實(shí)現(xiàn)可訪問性的絕佳工具胰耗。

Slack的白色背景使文字和按鈕更加生動

黑色是比白色更“嚴(yán)肅”的替代選擇限次。它仍然傳達(dá)了一種極簡主義,以內(nèi)容為中心的用戶界面柴灯,同時(shí)還傳達(dá)了一種更“合適”的感覺卖漫。

黑色是全新的白色嗎?

無襯線字體排版

無襯線(Sans-serif)字體看起來比襯線(serif)字體更清晰赠群,這就是為什么它們經(jīng)常被更大企業(yè)“委以重任”羊始。結(jié)合無襯線字體排版,大字體和/或粗體字體查描,將產(chǎn)生最大的影響和情感共鳴突委。如果我們同時(shí)還能明智地使用詞語,它們可能成為網(wǎng)站最迷人的地方冬三。這就是一個“少即是多(less is more)”的最佳案例匀油。

微軟采取“少即是多”的方法來實(shí)現(xiàn)效果最大化

大膽的顏色

雖然當(dāng)用作背景色本身時(shí),大膽的色彩看起來幾乎與白色或黑色的效果一樣微小勾笆,但它們會與白色和黑色背景形成鮮明對比敌蚜,同時(shí)還傳達(dá)了更多的情感和意義。

決定創(chuàng)業(yè)可能是一個情緒化的決定窝爪。Shopify網(wǎng)站通過使用出色的圖像和美麗大膽的色彩強(qiáng)化了這一事實(shí)钝侠。

漸變是使用大膽色彩而不會使用戶不堪重負(fù)的絕佳解決方案该园,尤其是在與無襯線字體配對的時(shí)候。下圖是一個來自 Dribbble 的示例帅韧,向我們展示了極簡主義如何不同程度地存在里初,以及極簡主義網(wǎng)站如何有多種不同的形狀和大小。

情緒化忽舟,但簡單双妨。

[圖片上傳失敗...(image-1ffa0f-1564026803466)]

扁平化設(shè)計(jì)

扁平化設(shè)計(jì)是2012年左右出現(xiàn)的一種網(wǎng)頁設(shè)計(jì)趨勢。盡管在NNGroup的文章「突出嚴(yán)重的可用性問題」中指出叮阅,由于扁平化設(shè)計(jì)將極簡主義概念應(yīng)用于比如按鈕這樣的交互式元素上刁品,使它們看起來好像根本不具備交互性。但無可否認(rèn)浩姥,扁平化設(shè)計(jì)仍然是視覺上非常吸引人的極簡主義設(shè)計(jì)挑随。

當(dāng)然,這也引發(fā)了“扁平化 2.0”的出現(xiàn)勒叠,使用圓角和陰影為這些交互元素添加更多深度兜挨,而不會使UI變得混亂。

圓角是有效的眯分,因?yàn)樗鼈冾愃朴诂F(xiàn)實(shí)生活中的真實(shí)按鈕拌汇。陰影更具有相關(guān)性,因?yàn)樗鼈優(yōu)榘粹o提供了3D元素弊决,將它們與設(shè)計(jì)分離噪舀,并更容易聯(lián)想到真實(shí)的元素。

Buffer網(wǎng)站飘诗,簡單且扁平化与倡,但是又不為過

如果我們無法明確表達(dá)交互式點(diǎn)擊目標(biāo)是具備交互性的,那么我們的設(shè)計(jì)就變得不可用昆稿,因?yàn)橛脩粜枰约号袛嗄男﹥?nèi)容可點(diǎn)擊以及哪些內(nèi)容不可點(diǎn)擊纺座。這種復(fù)雜的思維與極簡主義應(yīng)該實(shí)現(xiàn)的一切相悖。

正如史蒂夫·克魯克(Steve Krug)那本著名的設(shè)計(jì)和可用性書籍的名稱一樣貌嫡,永遠(yuǎn)都要“別讓我思考(Don’t make me think)”比驻。

極簡主義的視覺美學(xué)肯定會使我們的設(shè)計(jì)更清晰,但在設(shè)計(jì)UI時(shí)我們不應(yīng)該做過分的處理岛抄。

首先關(guān)注清晰度及可點(diǎn)擊性别惦,其次再關(guān)注視覺吸引力。

設(shè)計(jì)極簡化UI和內(nèi)容

為極簡主義網(wǎng)站設(shè)計(jì)UI和內(nèi)容需要關(guān)注以下四點(diǎn):

  • 清晰度夫椭。信息有多清楚掸掸?
  • 可查找性。用戶如何輕松地找到東西嗎?
  • 可選擇性扰付。用戶可以輕松地做出決策嗎堤撵?
  • 可掃描性。用戶可以輕松地掃描文檔嗎羽莺?
InVision Studio主頁清晰整潔实昨,但如果需要,還可提供其他信息盐固。

避免視覺混亂

經(jīng)驗(yàn)法則:如果某些內(nèi)容有用荒给,但不是對大多數(shù)用戶或用戶當(dāng)前上下文環(huán)境內(nèi)有用,請隱藏它刁卜。

隱藏某些東西以減少認(rèn)知負(fù)荷的一個例子是志电,將一個不太重要的導(dǎo)航項(xiàng)目移動到畫布外的菜單中,僅在實(shí)際請求時(shí)顯示蛔趴。

這背后的想法是:為什么強(qiáng)迫用戶在他們可能甚至不需要看到或使用它的時(shí)候要去考慮它的含義挑辆?

我們還需要考慮這樣一個事實(shí):如果信息太多,用戶將無法在關(guān)鍵時(shí)刻回憶起重要信息孝情。

「認(rèn)知負(fù)荷會影響我們的記憶」一文中指出鱼蝉,當(dāng)被太多物體或選擇所淹沒時(shí),我們會癱瘓咧叭,不知道去哪里蚀乔。

使用視覺層次來減少認(rèn)知負(fù)荷

視覺層次結(jié)構(gòu)應(yīng)指示每個元素的重要性并影響其查看順序烁竭。這意味著我們需要在視覺上確定某些元素的優(yōu)先級菲茬,以幫助用戶準(zhǔn)確理解正在發(fā)生的事情。例如派撕,想象一個產(chǎn)品婉弹,使用大于產(chǎn)品標(biāo)題的字體大小來顯示價(jià)格,用戶可能會知道該產(chǎn)品需要花費(fèi)10美元终吼,但要混淆幾秒鐘镀赌,因?yàn)樗麄冞€不知道產(chǎn)品是什么。當(dāng)事實(shí)證明他們甚至根本不關(guān)心該產(chǎn)品時(shí)际跪,情況就更糟了商佛,因?yàn)樗麄儸F(xiàn)在處理的信息對他們來說毫無用處。

這聽起來像一個小小的警告姆打,但每個微小設(shè)計(jì)缺陷的認(rèn)知負(fù)荷全都加起來良姆,就可能導(dǎo)致用戶分心了。

為更加簡化的體驗(yàn)提供更少的選擇

正如厢O罚克斯定律(Hicks’ law)所述玛追,選項(xiàng)越多,響應(yīng)時(shí)間越慢。當(dāng)選項(xiàng)太多時(shí)痊剖,用戶可能會遇到?jīng)Q策癱瘓(decision paralysis)韩玩,也就是說由于認(rèn)知超負(fù)荷無法進(jìn)行選擇。

例如陆馁,耐克的網(wǎng)站旨在一次只向您展示部分產(chǎn)品找颓。

[圖片上傳失敗...(image-df161a-1564026803466)]

Atoms網(wǎng)站是一個減少選項(xiàng)數(shù)量極好的例子。主導(dǎo)航只包含四個導(dǎo)航項(xiàng)叮贩,不太重要的導(dǎo)航項(xiàng)移入了網(wǎng)站頁腳叮雳。 一旦用戶選擇“Find Your Fit”選項(xiàng),用戶就會看到一個會話妇汗,一次只需要做一個決定帘不,就可以選擇正確的產(chǎn)品。

減少選項(xiàng)數(shù)量杨箭,使決策更容易做出

設(shè)計(jì)功能混亂

與視覺混亂非常相似寞焙,功能混亂也會增加用戶的認(rèn)知負(fù)荷,并且也是導(dǎo)致轉(zhuǎn)換的顯著減少的因素所在互婿。

電子商務(wù)就是一個很好的例子捣郊,34%的廢棄結(jié)帳是由于用戶需要被迫創(chuàng)建一個帳戶,從而導(dǎo)致巨大的經(jīng)濟(jì)損失慈参。

[圖片上傳失敗...(image-fcc771-1564026803466)]

假設(shè)呛牲,這并不意味著我們需要在這種情況下強(qiáng)制訪客結(jié)賬,但我們可以將創(chuàng)建帳戶作為一個可選功能驮配。如果我們真的想最大限度地減少用戶的認(rèn)知負(fù)荷娘扩,我們可以要求用戶在結(jié)賬后創(chuàng)建一個帳戶,以便用戶不會因?yàn)閯?chuàng)建帳戶而分心壮锻!

減少摩擦琐旁,實(shí)現(xiàn)更多轉(zhuǎn)換

創(chuàng)建用戶流程圖是在進(jìn)入原型設(shè)計(jì)之前減少網(wǎng)站摩擦的絕佳方法。

這樣猜绣,如果由于功能混亂而存在任何摩擦?xí)r刻灰殴,我們就可以重新考慮用戶的旅程,轉(zhuǎn)而設(shè)計(jì)更流暢的體驗(yàn)掰邢。

防止用戶的技術(shù)倦怠

我們始終生活在感性的世界里牺陶。包含它們的應(yīng)用程序和網(wǎng)站以及各種設(shè)備無處不在。新技術(shù)的加速發(fā)展意味著我們的日常所需 —— 手表辣之、廚具掰伸、背包等 —— 正在以數(shù)字方式注入新技術(shù)和新功能,并讓我們的生活更美好召烂。

但事實(shí)是碱工,從長遠(yuǎn)來看,只有少數(shù)人真正做到了。

技術(shù)越多怕篷,問題越多历筝。

人無完人,我們只能處理一定量的認(rèn)知負(fù)荷廊谓,但幾乎我們積累的所有東西都會導(dǎo)致這種負(fù)擔(dān)梳猪。這不僅來源于我們擁有的產(chǎn)品,還來源于它們所需的設(shè)置和維護(hù)蒸痹,以及操作它們所需的知識和信息春弥。

假設(shè)我們確實(shí)在使用某款產(chǎn)品,但由于缺乏時(shí)間或動力叠荠,你是否曾在幾個月內(nèi)停止了該產(chǎn)品的年度訂閱匿沛?

社交媒體有點(diǎn)不同。許多用戶沉迷于此榛鼎,許多人每天至少花兩小時(shí)專注于社交媒體逃呼。

雖然我們會說一天中沒有足夠的時(shí)間來使用,閱讀者娱,觀察或以其他方式來消費(fèi)我們想要的所有東西抡笼,但真正的困境是這對我們的心理健康會產(chǎn)生長期影響。

它讓我們感到負(fù)擔(dān)沉重黄鳍。

負(fù)擔(dān)是壓力和義務(wù)的混合推姻。壓力,因?yàn)槲覀儾辉试S讓自己永遠(yuǎn)放松框沟,用某種形式的技術(shù)來填補(bǔ)每一個醒著的時(shí)刻藏古。義務(wù),因?yàn)樵S多產(chǎn)品不道德地通過游戲化和鎖定合同來留住用戶街望。然后還有就是我們愛討價(jià)還價(jià)以及對下一個最好的東西產(chǎn)生熱愛校翔。

對技術(shù)過量的誘惑無處不在弟跑。

負(fù)擔(dān)對網(wǎng)站用戶的影響

當(dāng)用戶感到負(fù)擔(dān)時(shí)灾前,他們可能會感受到兩件事:

  • 不耐煩。他們只愿意投入少量的時(shí)間和精力與網(wǎng)站互動孟辑,如果他們遇到一個很小的障礙哎甲,他們可能會放棄它。
  • 沮喪饲嗽。如果用戶對各種選項(xiàng)感到不知所措炭玫,他們將不太可能轉(zhuǎn)換,甚至更有可能嘗試競爭對手的網(wǎng)站或是完全放棄他們的信息搜索貌虾。

簡而言之吞加,當(dāng)用戶訪問某個網(wǎng)站時(shí),他們的不耐煩和注意力的減少很可能導(dǎo)致他們過早退出。遺憾的是衔憨,對于今天的大多數(shù)用戶來說叶圃,這種行為再正常不過了。

極簡主義設(shè)計(jì)如何幫助用戶践图?

作為數(shù)字化設(shè)計(jì)師掺冠,我們能夠減少產(chǎn)品的認(rèn)知負(fù)荷,減少用戶的壓力码党,焦慮和挫敗感德崭。

想讓我們的網(wǎng)站可以在數(shù)字世界中成為一股清流,不斷引起注意揖盘,訣竅就是設(shè)計(jì)極簡主義網(wǎng)站眉厨。這些網(wǎng)站對用戶已經(jīng)沉重的認(rèn)知負(fù)荷是一種釋放。

極簡主義網(wǎng)站不僅僅是視覺美學(xué)兽狭。極簡主義設(shè)計(jì)也是一個過程,需要盡可能清晰,極可能簡化。

(編譯完)


英文原文:地址
原文作者:Daniel Schwarz
編譯作者:Linkedin / 微博

以上譯文僅代表原作者觀點(diǎn)似忧。如需轉(zhuǎn)載請遵循CC版權(quán)協(xié)議正確標(biāo)明出處。

image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末幼衰,一起剝皮案震驚了整個濱河市肥印,隨后出現(xiàn)的幾起案子挤牛,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件挪蹭,死亡現(xiàn)場離奇詭異词顾,居然都是意外死亡碱妆,警方通過查閱死者的電腦和手機(jī)肉盹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來疹尾,“玉大人上忍,你說我怎么就攤上這事『嚼猓” “怎么了睡雇?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長饮醇。 經(jīng)常有香客問我,道長秕豫,這世上最難降的妖魔是什么朴艰? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任观蓄,我火速辦了婚禮,結(jié)果婚禮上祠墅,老公的妹妹穿的比我還像新娘侮穿。我一直安慰自己,他們只是感情好毁嗦,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布亲茅。 她就那樣靜靜地躺著,像睡著了一般狗准。 火紅的嫁衣襯著肌膚如雪克锣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天腔长,我揣著相機(jī)與錄音袭祟,去河邊找鬼。 笑死捞附,一個胖子當(dāng)著我的面吹牛巾乳,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鸟召,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼胆绊,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了欧募?” 一聲冷哼從身側(cè)響起辑舷,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎槽片,沒想到半個月后何缓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡还栓,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年碌廓,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片剩盒。...
    茶點(diǎn)故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡谷婆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出辽聊,到底是詐尸還是另有隱情纪挎,我是刑警寧澤,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布跟匆,位于F島的核電站异袄,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏玛臂。R本人自食惡果不足惜烤蜕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一封孙、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧讽营,春花似錦虎忌、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至莉兰,卻和暖如春挑围,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背贮勃。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工贪惹, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人寂嘉。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓奏瞬,卻偏偏與公主長得像,于是被迫代替她去往敵國和親泉孩。 傳聞我的和親對象是個殘疾皇子硼端,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,728評論 2 351

推薦閱讀更多精彩內(nèi)容