發(fā)布時(shí)間:2024-04-11 16:14:16 瀏覽量:242次
極簡(jiǎn)主義網(wǎng)站可以幫助用戶(hù)更快地思考。
在用戶(hù)變得越來(lái)越不耐煩且技術(shù)普遍變變得越來(lái)越倦怠的時(shí)代,冷靜和清晰的設(shè)計(jì)對(duì)于任何互聯(lián)網(wǎng)時(shí)代業(yè)務(wù)的成功都至關(guān)重要。
本文主要從以下幾個(gè)方面來(lái)定義極簡(jiǎn)主義網(wǎng)站設(shè)計(jì)并向你和你的用戶(hù)解釋其優(yōu)勢(shì)所在:
當(dāng)我們想到極簡(jiǎn)主義時(shí),我們自然而然地會(huì)聯(lián)想到與之互動(dòng)的極簡(jiǎn)主義的各個(gè)方面。
例如,蘋(píng)果美學(xué)無(wú)需近觀就可以很容易地辨認(rèn)出來(lái),它是科技界的主要潮流引領(lǐng)者。盡管它們的設(shè)計(jì)相對(duì)簡(jiǎn)單,但看上去總是非常美觀。
究其原因所在,是因?yàn)樗鼈兯缟械囊曈X(jué)風(fēng)格是極簡(jiǎn)抽象藝術(shù)化的。
蘋(píng)果的極簡(jiǎn)主義視覺(jué)美感
下面讓我們探究一下它的真正含義,促成極簡(jiǎn)抽象視覺(jué)美感的各種因素,以及為什么這些因素能夠如此有效。
白色的中性特征不僅容易入眼,而且也很容易記住。因?yàn)榘咨珱](méi)有任何代表意義,所以用戶(hù)不會(huì)因?yàn)樗稚⒆⒁饬蚴潜黄人伎荚擃伾唧w要表達(dá)的意思。
白色背景可以突出顯示一些重要的元素,比如號(hào)召性語(yǔ)句或者有意義的文本,同時(shí)確保它們之間的最佳色彩對(duì)比。它的亮度與對(duì)比色相匹配,是實(shí)現(xiàn)可訪問(wèn)性的絕佳工具。
Slack的白色背景使文字和按鈕更加生動(dòng)
黑色是比白色更“嚴(yán)肅”的替代選擇。它仍然傳達(dá)了一種極簡(jiǎn)主義,以?xún)?nèi)容為中心的用戶(hù)界面,同時(shí)還傳達(dá)了一種更“合適”的感覺(jué)。
黑色是全新的白色嗎?
無(wú)襯線(Sans-serif)字體看起來(lái)比襯線(serif)字體更清晰,這就是為什么它們經(jīng)常被更大企業(yè)“委以重任”。結(jié)合無(wú)襯線字體排版,大字體和/或粗體字體,將產(chǎn)生最大的影響和情感共鳴。如果我們同時(shí)還能明智地使用詞語(yǔ),它們可能成為網(wǎng)站最迷人的地方。這就是一個(gè)“少即是多(less is more)”的最佳案例。
微軟采取“少即是多”的方法來(lái)實(shí)現(xiàn)效果最大化
雖然當(dāng)用作背景色本身時(shí),大膽的色彩看起來(lái)幾乎與白色或黑色的效果一樣微小,但它們會(huì)與白色和黑色背景形成鮮明對(duì)比,同時(shí)還傳達(dá)了更多的情感和意義。
決定創(chuàng)業(yè)可能是一個(gè)情緒化的決定。Shopify網(wǎng)站通過(guò)使用出色的圖像和美麗大膽的色彩強(qiáng)化了這一事實(shí)。
漸變是使用大膽色彩而不會(huì)使用戶(hù)不堪重負(fù)的絕佳解決方案,尤其是在與無(wú)襯線字體配對(duì)的時(shí)候。下圖是一個(gè)來(lái)自 Dribbble 的示例,向我們展示了極簡(jiǎn)主義如何不同程度地存在,以及極簡(jiǎn)主義網(wǎng)站如何有多種不同的形狀和大小。
情緒化,但簡(jiǎn)單。
扁平化設(shè)計(jì)是2012年左右出現(xiàn)的一種網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)。盡管在NNGroup的文章「突出嚴(yán)重的可用性問(wèn)題」中指出,由于扁平化設(shè)計(jì)將極簡(jiǎn)主義概念應(yīng)用于比如按鈕這樣的交互式元素上,使它們看起來(lái)好像根本不具備交互性。但無(wú)可否認(rèn),扁平化設(shè)計(jì)仍然是視覺(jué)上非常吸引人的極簡(jiǎn)主義設(shè)計(jì)。
當(dāng)然,這也引發(fā)了“扁平化 2.0”的出現(xiàn),使用圓角和陰影為這些交互元素添加更多深度,而不會(huì)使UI變得混亂。
圓角是有效的,因?yàn)樗鼈冾?lèi)似于現(xiàn)實(shí)生活中的真實(shí)按鈕。陰影更具有相關(guān)性,因?yàn)樗鼈優(yōu)榘粹o提供了3D元素,將它們與設(shè)計(jì)分離,并更容易聯(lián)想到真實(shí)的元素。
Buffer網(wǎng)站,簡(jiǎn)單且扁平化,但是又不為過(guò)
如果我們無(wú)法明確表達(dá)交互式點(diǎn)擊目標(biāo)是具備交互性的,那么我們的設(shè)計(jì)就變得不可用,因?yàn)橛脩?hù)需要自己判斷哪些內(nèi)容可點(diǎn)擊以及哪些內(nèi)容不可點(diǎn)擊。這種復(fù)雜的思維與極簡(jiǎn)主義應(yīng)該實(shí)現(xiàn)的一切相悖。
正如史蒂夫·克魯克(Steve Krug)那本著名的設(shè)計(jì)和可用性書(shū)籍的名稱(chēng)一樣,永遠(yuǎn)都要“別讓我思考(Don’t make me think)”。
極簡(jiǎn)主義的視覺(jué)美學(xué)肯定會(huì)使我們的設(shè)計(jì)更清晰,但在設(shè)計(jì)UI時(shí)我們不應(yīng)該做過(guò)分的處理。
首先關(guān)注清晰度及可點(diǎn)擊性,其次再關(guān)注視覺(jué)吸引力。
為極簡(jiǎn)主義網(wǎng)站設(shè)計(jì)UI和內(nèi)容需要關(guān)注以下四點(diǎn):
InVision Studio主頁(yè)清晰整潔,但如果需要,還可提供其他信息。
經(jīng)驗(yàn)法則:如果某些內(nèi)容有用,但不是對(duì)大多數(shù)用戶(hù)或用戶(hù)當(dāng)前上下文環(huán)境內(nèi)有用,請(qǐng)隱藏它。
隱藏某些東西以減少認(rèn)知負(fù)荷的一個(gè)例子是,將一個(gè)不太重要的導(dǎo)航項(xiàng)目移動(dòng)到畫(huà)布外的菜單中,僅在實(shí)際請(qǐng)求時(shí)顯示。
這背后的想法是:為什么強(qiáng)迫用戶(hù)在他們可能甚至不需要看到或使用它的時(shí)候要去考慮它的含義?
我們還需要考慮這樣一個(gè)事實(shí):如果信息太多,用戶(hù)將無(wú)法在關(guān)鍵時(shí)刻回憶起重要信息。
「認(rèn)知負(fù)荷會(huì)影響我們的記憶」一文中指出,當(dāng)被太多物體或選擇所淹沒(méi)時(shí),我們會(huì)癱瘓,不知道去哪里。
視覺(jué)層次結(jié)構(gòu)應(yīng)指示每個(gè)元素的重要性并影響其查看順序。這意味著我們需要在視覺(jué)上確定某些元素的優(yōu)先級(jí),以幫助用戶(hù)準(zhǔn)確理解正在發(fā)生的事情。例如,想象一個(gè)產(chǎn)品,使用大于產(chǎn)品標(biāo)題的字體大小來(lái)顯示價(jià)格,用戶(hù)可能會(huì)知道該產(chǎn)品需要花費(fèi)10美元,但要混淆幾秒鐘,因?yàn)樗麄冞€不知道產(chǎn)品是什么。當(dāng)事實(shí)證明他們甚至根本不關(guān)心該產(chǎn)品時(shí),情況就更糟了,因?yàn)樗麄儸F(xiàn)在處理的信息對(duì)他們來(lái)說(shuō)毫無(wú)用處。
這聽(tīng)起來(lái)像一個(gè)小小的警告,但每個(gè)微小設(shè)計(jì)缺陷的認(rèn)知負(fù)荷全都加起來(lái),就可能導(dǎo)致用戶(hù)分心了。
正如??怂苟桑℉icks’ law)所述,選項(xiàng)越多,響應(yīng)時(shí)間越慢。當(dāng)選項(xiàng)太多時(shí),用戶(hù)可能會(huì)遇到?jīng)Q策癱瘓(decision paralysis),也就是說(shuō)由于認(rèn)知超負(fù)荷無(wú)法進(jìn)行選擇。
例如,耐克的網(wǎng)站旨在一次只向您展示部分產(chǎn)品。
Atoms網(wǎng)站是一個(gè)減少選項(xiàng)數(shù)量極好的例子。主導(dǎo)航只包含四個(gè)導(dǎo)航項(xiàng),不太重要的導(dǎo)航項(xiàng)移入了網(wǎng)站頁(yè)腳。 一旦用戶(hù)選擇“Find Your Fit”選項(xiàng),用戶(hù)就會(huì)看到一個(gè)會(huì)話,一次只需要做一個(gè)決定,就可以選擇正確的產(chǎn)品。
減少選項(xiàng)數(shù)量,使決策更容易做出
與視覺(jué)混亂非常相似,功能混亂也會(huì)增加用戶(hù)的認(rèn)知負(fù)荷,并且也是導(dǎo)致轉(zhuǎn)換的顯著減少的因素所在。
電子商務(wù)就是一個(gè)很好的例子,34%的廢棄結(jié)帳是由于用戶(hù)需要被迫創(chuàng)建一個(gè)帳戶(hù),從而導(dǎo)致巨大的經(jīng)濟(jì)損失。
假設(shè),這并不意味著我們需要在這種情況下強(qiáng)制訪客結(jié)賬,但我們可以將創(chuàng)建帳戶(hù)作為一個(gè)可選功能。如果我們真的想最大限度地減少用戶(hù)的認(rèn)知負(fù)荷,我們可以要求用戶(hù)在結(jié)賬后創(chuàng)建一個(gè)帳戶(hù),以便用戶(hù)不會(huì)因?yàn)閯?chuàng)建帳戶(hù)而分心!
減少摩擦,實(shí)現(xiàn)更多轉(zhuǎn)換
創(chuàng)建用戶(hù)流程圖是在進(jìn)入原型設(shè)計(jì)之前減少網(wǎng)站摩擦的絕佳方法。
這樣,如果由于功能混亂而存在任何摩擦?xí)r刻,我們就可以重新考慮用戶(hù)的旅程,轉(zhuǎn)而設(shè)計(jì)更流暢的體驗(yàn)。
我們始終生活在感性的世界里。包含它們的應(yīng)用程序和網(wǎng)站以及各種設(shè)備無(wú)處不在。新技術(shù)的加速發(fā)展意味著我們的日常所需 —— 手表、廚具、背包等 —— 正在以數(shù)字方式注入新技術(shù)和新功能,并讓我們的生活更美好。
但事實(shí)是,從長(zhǎng)遠(yuǎn)來(lái)看,只有少數(shù)人真正做到了。
技術(shù)越多,問(wèn)題越多。
人無(wú)完人,我們只能處理一定量的認(rèn)知負(fù)荷,但幾乎我們積累的所有東西都會(huì)導(dǎo)致這種負(fù)擔(dān)。這不僅來(lái)源于我們擁有的產(chǎn)品,還來(lái)源于它們所需的設(shè)置和維護(hù),以及操作它們所需的知識(shí)和信息。
假設(shè)我們確實(shí)在使用某款產(chǎn)品,但由于缺乏時(shí)間或動(dòng)力,你是否曾在幾個(gè)月內(nèi)停止了該產(chǎn)品的年度訂閱?
社交媒體有點(diǎn)不同。許多用戶(hù)沉迷于此,許多人每天至少花兩小時(shí)專(zhuān)注于社交媒體。
雖然我們會(huì)說(shuō)一天中沒(méi)有足夠的時(shí)間來(lái)使用,閱讀,觀察或以其他方式來(lái)消費(fèi)我們想要的所有東西,但真正的困境是這對(duì)我們的心理健康會(huì)產(chǎn)生長(zhǎng)期影響。
它讓我們感到負(fù)擔(dān)沉重。
負(fù)擔(dān)是壓力和義務(wù)的混合。壓力,因?yàn)槲覀儾辉试S讓自己永遠(yuǎn)放松,用某種形式的技術(shù)來(lái)填補(bǔ)每一個(gè)醒著的時(shí)刻。義務(wù),因?yàn)樵S多產(chǎn)品不道德地通過(guò)游戲化和鎖定合同來(lái)留住用戶(hù)。然后還有就是我們愛(ài)討價(jià)還價(jià)以及對(duì)下一個(gè)最好的東西產(chǎn)生熱愛(ài)。
對(duì)技術(shù)過(guò)量的誘惑無(wú)處不在。
當(dāng)用戶(hù)感到負(fù)擔(dān)時(shí),他們可能會(huì)感受到兩件事:
簡(jiǎn)而言之,當(dāng)用戶(hù)訪問(wèn)某個(gè)網(wǎng)站時(shí),他們的不耐煩和注意力的減少很可能導(dǎo)致他們過(guò)早退出。遺憾的是,對(duì)于今天的大多數(shù)用戶(hù)來(lái)說(shuō),這種行為再正常不過(guò)了。
作為數(shù)字化設(shè)計(jì)師,我們能夠減少產(chǎn)品的認(rèn)知負(fù)荷,減少用戶(hù)的壓力,焦慮和挫敗感。
想讓我們的網(wǎng)站可以在數(shù)字世界中成為一股清流,不斷引起注意,訣竅就是設(shè)計(jì)極簡(jiǎn)主義網(wǎng)站。這些網(wǎng)站對(duì)用戶(hù)已經(jīng)沉重的認(rèn)知負(fù)荷是一種釋放。
極簡(jiǎn)主義網(wǎng)站不僅僅是視覺(jué)美學(xué)。極簡(jiǎn)主義設(shè)計(jì)也是一個(gè)過(guò)程,需要盡可能清晰,極可能簡(jiǎn)化。
熱門(mén)資訊
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范,原來(lái)如此重要!
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎?這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范,包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
3. 移動(dòng)端UI設(shè)計(jì)中常見(jiàn)的5種APP界面類(lèi)型,你get到了嗎?
通過(guò)介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁(yè)、引導(dǎo)頁(yè)、浮層引導(dǎo)頁(yè)、空白頁(yè)和首頁(yè)等5種APP界面類(lèi)型,幫助大家更好地了解UI設(shè)計(jì)的基本知識(shí)
4. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、字體...
5. 移動(dòng)端列表頁(yè)和表單頁(yè)設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁(yè)和表單頁(yè)是不可或缺的部分。一個(gè)好的列表頁(yè)和表單頁(yè)設(shè)計(jì)能夠讓用戶(hù)輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
6. 推薦10本適合UI設(shè)計(jì)師看的書(shū)籍,輕松掌握技能!
對(duì)于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來(lái)說(shuō),這本書(shū)是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺(jué)醒》(IKKO TANAKA)推薦理由: 這本書(shū)是日本現(xiàn)代平面...
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久?培訓(xùn)完能拿多少工資?
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長(zhǎng)與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專(zhuān)業(yè)課程,以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶(hù)一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過(guò)程中,應(yīng)盡量使用簡(jiǎn)潔的圖標(biāo)、文字和色彩,避免過(guò)多的視覺(jué)干擾。符合用戶(hù)習(xí)慣:ui設(shè)...
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣?想學(xué)UI設(shè)計(jì)要多少錢(qián)?
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎?不知道學(xué)UI設(shè)計(jì)要花多少錢(qián)?不妨看看這篇文章,了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
10. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過(guò)對(duì)色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
最新文章
同學(xué)您好!