Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

3 評(píng)論 6747 瀏覽 9 收藏 16 分鐘

國(guó)外的很多網(wǎng)站都非常簡(jiǎn)約大氣,原來(lái)他們是遵循了這樣的設(shè)計(jì)原則啊。這樣的原則,不僅僅適用于web設(shè)計(jì),也同樣適用于App設(shè)計(jì)。

介紹:

“Less is more”-無(wú)論在時(shí)尚,室內(nèi)設(shè)計(jì)還是網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域,這句話都統(tǒng)治著設(shè)計(jì)界。這句話反映了古老的極簡(jiǎn)主義理論,也漸漸成為了簡(jiǎn)單,優(yōu)雅的功能性營(yíng)銷(xiāo)設(shè)計(jì)的最新工具。

可以說(shuō),極簡(jiǎn)主義正在盛行。

極簡(jiǎn)主義的應(yīng)用可以有兩種不同的方式。一個(gè)是美學(xué),一個(gè)是功能。在這里,我將討論功能性極簡(jiǎn)主義在Web設(shè)計(jì)中的應(yīng)用,在此之前,我們看一下它的基本概念和歷史。

極簡(jiǎn)主義:基本概念

極簡(jiǎn)主義的關(guān)鍵原則是讓用戶看到必要的功能。這樣,用戶的注意力不僅集中在藝術(shù)的重要部分上,而且還提高了作品的優(yōu)雅度。

傳奇極簡(jiǎn)主義畫(huà)家唐納德·賈德(Donald Judd)說(shuō):“形狀、體積、顏色、表面就是物品本身。它不應(yīng)該被隱藏成為完全不同的整體的一部分,形狀和材料不應(yīng)因環(huán)境而改變?!?/p>

涉及到極簡(jiǎn)設(shè)計(jì)時(shí),它可以采用兩種方式:設(shè)計(jì)師可以出于美學(xué)或功能的考慮創(chuàng)造簡(jiǎn)約設(shè)計(jì)。

以圖1中的這種設(shè)計(jì)為例:

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

圖1:缺乏功能的美學(xué)極簡(jiǎn)主義示例

以上設(shè)計(jì)來(lái)自眼鏡設(shè)計(jì)師Alfred Sung。盡管該設(shè)計(jì)很極致,看上去很美,但是除非用戶瀏覽菜單欄,否則該設(shè)計(jì)不會(huì)告知用戶網(wǎng)站的目的。這種簡(jiǎn)約的網(wǎng)頁(yè)設(shè)計(jì)僅是為了美觀,而不是功能。

但是,如果我們看下面的圖2,我們將看到功能性極簡(jiǎn)主義在Web設(shè)計(jì)中的完美應(yīng)用,用令人愉悅的視覺(jué)呈現(xiàn)重要信息。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

圖2:功能極簡(jiǎn)主義的示例,既美觀又實(shí)用

這是Libraton的網(wǎng)頁(yè)設(shè)計(jì)。干凈流暢的用戶界面,易于導(dǎo)航。這是網(wǎng)站設(shè)計(jì)中的功能性極簡(jiǎn)主義的主要示例。設(shè)計(jì)中沒(méi)有多余的文字,不必要的動(dòng)畫(huà)和額外的效果。借助適當(dāng)?shù)膱D像和內(nèi)容,讓用戶知道該網(wǎng)站的內(nèi)容。

所謂的網(wǎng)頁(yè)設(shè)計(jì)的功能性極簡(jiǎn)主義,即令人愉悅的視覺(jué)向用戶呈現(xiàn)必要的內(nèi)容。在簡(jiǎn)約的設(shè)計(jì)中,沒(méi)有多余的文字,不必要的動(dòng)畫(huà)和額外的效果。內(nèi)容和設(shè)計(jì)按原樣顯示,沒(méi)有任何額外的裝飾,以使用戶輕松找到他們想要的內(nèi)容。

極簡(jiǎn)主義的歷史與演變

極簡(jiǎn)主義意味著高效的生活,這意味著您可以將更多精力放在核心目的上,這意味著擺脫生活中所有多余的功能,裝飾品和其他任何裝飾。日本文化將生活中的簡(jiǎn)約與平衡和諧放在首位,您可以在他們的藝術(shù)和建筑中看到這一點(diǎn)。

在談?wù)摌O簡(jiǎn)主義的歷史時(shí),您需要對(duì)日本文化作簡(jiǎn)要了解。日本文化最好的反映了極簡(jiǎn)主義的概念。極簡(jiǎn)主義的概念在整個(gè)歷史中都存在過(guò),但是在二戰(zhàn)之后,它通過(guò)藝術(shù)家Frank Stella和Robert Rayman的作品而得到了廣泛傳播。由于該概念的普及,極簡(jiǎn)主義也逐漸滲透到其他領(lǐng)域,例如建筑。

很快,極簡(jiǎn)主義也進(jìn)入了網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域。在互聯(lián)網(wǎng)的起源上,存在另一種風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格,我們稱(chēng)之為野蠻風(fēng)格。布局雜亂,幾何圖案笨拙且重復(fù),字體也多種樣式??偠灾靶U派網(wǎng)頁(yè)設(shè)計(jì)對(duì)掩蓋丑陋設(shè)計(jì)毫無(wú)欲望。

但是隨著設(shè)計(jì)的開(kāi)始改進(jìn),極簡(jiǎn)主義走在了最前列,網(wǎng)站開(kāi)始變得更加美觀。不過(guò),野獸派的設(shè)計(jì)也再次卷土重來(lái),聲稱(chēng)反對(duì)同質(zhì)化的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格。

極簡(jiǎn)網(wǎng)頁(yè)設(shè)計(jì)及其必要功能

網(wǎng)頁(yè)設(shè)計(jì)中的極簡(jiǎn)主義是設(shè)計(jì)師最流行的實(shí)踐。隨著極簡(jiǎn)網(wǎng)頁(yè)設(shè)計(jì)變得流行,當(dāng)設(shè)計(jì)功能性網(wǎng)站時(shí),極簡(jiǎn)主義已成為第一法則。這是為什么了解極簡(jiǎn)主義網(wǎng)頁(yè)設(shè)計(jì)的最佳方法,是了解其主要功能。

1. 重點(diǎn):突出內(nèi)容

簡(jiǎn)約的Web設(shè)計(jì)中,內(nèi)容是重點(diǎn),通過(guò)刪除多余的元素(所謂的多余是指不影響用戶進(jìn)行操作的部分)簡(jiǎn)化界面。這種方法,內(nèi)容的優(yōu)化是最重要的過(guò)程。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

資料來(lái)源:https ://newday.agency/

通過(guò)確定內(nèi)容的優(yōu)先級(jí),設(shè)計(jì)人員刪除網(wǎng)頁(yè)上可能讓用戶分散注意力的所有元素。最后,每個(gè)元素都將具有一定的功能。剝離多余的內(nèi)容時(shí)可能會(huì)遇到一個(gè)問(wèn)題,那就是會(huì)刪除重要的內(nèi)容。因此,請(qǐng)確保您沒(méi)有從頁(yè)面中刪除重要內(nèi)容。

(1)負(fù)空間的廣泛使用

基于日本的ma原理,負(fù)空間或留白在簡(jiǎn)約設(shè)計(jì)中起著重要作用。負(fù)空間或留白是極簡(jiǎn)網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)非常普遍的功能,內(nèi)容(圖像或文本)之間的空白更加強(qiáng)調(diào)頁(yè)面的內(nèi)容。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

資料來(lái)源:https ://perficientdigitallabs.com/

雖然負(fù)空間也稱(chēng)為空白,它并不一定總是白色。作為設(shè)計(jì)師,您還可以使用空的全色背景在設(shè)計(jì)中引入負(fù)空間。

(2)視覺(jué)特征

極簡(jiǎn)網(wǎng)頁(yè)設(shè)計(jì)具有很多獨(dú)特的視覺(jué)特征。這些特征在網(wǎng)站的整體外觀中起著重要作用。

(3)平面設(shè)計(jì)和紋理

極簡(jiǎn)設(shè)計(jì)省去過(guò)度使用的3D效果,陰影和漸變,而廣泛使用平面紋理。去除網(wǎng)站顯得浮華的設(shè)計(jì)元素。在平面設(shè)計(jì)中,從字體到圖標(biāo),所有內(nèi)容都保持在最低限度,這不僅美觀而且功能強(qiáng)大。QAccounting是很好的示例。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

資料來(lái)源:https ://qaccounting.beta.herdl.com/

(4)照片和插圖

一張圖片相當(dāng)于一千文字,圖像和插圖是極簡(jiǎn)網(wǎng)站的最重要設(shè)計(jì)元素。通過(guò)圖片您可以傳達(dá)更多的情感和思想。不過(guò)圖片也要遵守極簡(jiǎn)主義原則。如果它是一個(gè)復(fù)雜的圖像/插圖,包含太多的細(xì)節(jié),那么它將抵消設(shè)計(jì)的整個(gè)效果。例如:Manho的設(shè)計(jì)。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

資料來(lái)源:https ://mahno.com.ua/en

(5)有限的配色

顏色可以使視覺(jué)集中在內(nèi)容上,但是它也可以分散用戶的注意力。因此,以簡(jiǎn)約設(shè)計(jì)為目標(biāo)的設(shè)計(jì)師通常選擇有限的配色方案。無(wú)論單色方案,還是僅兩種顏色的方案,這種有限配色方案是簡(jiǎn)約設(shè)計(jì)的關(guān)鍵視覺(jué)特征之一。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

來(lái)源:https://showcase.withgoogle.com/experiment/pizza-authenticator/

2. 獨(dú)特的版式

在極簡(jiǎn)主義的背景下,大膽的排版必定能呈現(xiàn)最好的內(nèi)容,設(shè)計(jì)師使用此功能來(lái)強(qiáng)調(diào)其內(nèi)容。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

資料來(lái)源:https ://culture.basicagency.com/

3. 設(shè)計(jì)對(duì)比

高對(duì)比度元素是極簡(jiǎn)設(shè)計(jì)的不錯(cuò)選擇。作為一名設(shè)計(jì)師,您無(wú)需付出太多努力,即可充分利用簡(jiǎn)單的設(shè)計(jì)元素,這也是將用戶聚焦到頁(yè)面主要元素的最有效方法。在最近網(wǎng)站大修中,Unified Infotech修改了色彩和對(duì)比度方案,使其更具吸引力。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

資料來(lái)源:https ://www.unifiedinfotech.net/

網(wǎng)頁(yè)設(shè)計(jì)極簡(jiǎn)主義的最佳實(shí)踐

有時(shí)實(shí)踐“l(fā)ess is more ”的理念可能會(huì)具有挑戰(zhàn)性。如果您正在努力為網(wǎng)站創(chuàng)建簡(jiǎn)約設(shè)計(jì),不必?fù)?dān)心。下面,我將列出一些最佳實(shí)踐,通過(guò)遵循極簡(jiǎn)主義的最佳實(shí)踐,您將可以輕松創(chuàng)建極簡(jiǎn)的網(wǎng)站設(shè)計(jì)。

1. 單一焦點(diǎn)

簡(jiǎn)約設(shè)計(jì)的概念是使用戶專(zhuān)注于網(wǎng)頁(yè)的主要元素,簡(jiǎn)約是關(guān)鍵。因此,只有一個(gè)焦點(diǎn)是極簡(jiǎn)主義的最佳實(shí)踐。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

資料來(lái)源:https ://www.portofmokha.com/

2. 內(nèi)容層次

我已經(jīng)討論過(guò)內(nèi)容進(jìn)行排序,并確定需要什么和不需要什么,現(xiàn)在是時(shí)候確定什么先行,什么后行了。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

資料來(lái)源:https ://www.gsmlondon.ac.uk/global-oil-map/

內(nèi)容的層次結(jié)構(gòu)意味著內(nèi)容的放置。頁(yè)面頂部的內(nèi)容最重要,而頁(yè)面底部的內(nèi)容最不重要。用戶的眼睛總是盯著頁(yè)面的頂部,所以將頁(yè)面的主要內(nèi)容放在頂部附近很重要。

3. 精確且清晰的內(nèi)容

我將再次討論頁(yè)面的內(nèi)容,在為極簡(jiǎn)網(wǎng)站編寫(xiě)內(nèi)容時(shí),您需要去除多余的單詞。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

資料來(lái)源:https ://hopdeco.ca/en

頁(yè)面的文本內(nèi)容必須是用最少單詞傳達(dá)所有的信息。

4. 簡(jiǎn)化導(dǎo)航

簡(jiǎn)約設(shè)計(jì)的重要目標(biāo)之一是幫助用戶盡可能簡(jiǎn)單高效地完成任務(wù)。為此,您需要集成一個(gè)簡(jiǎn)單便捷的導(dǎo)航系統(tǒng),在極簡(jiǎn)的界面中可能會(huì)比較棘手。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

資料來(lái)源:https ://ark-shelter.com/

您可能會(huì)覺(jué)得需要隱藏導(dǎo)航以創(chuàng)建簡(jiǎn)約界面。但是,這可能降低用戶對(duì)網(wǎng)站的滿意度。因此,在簡(jiǎn)化設(shè)計(jì)的同時(shí)需要保證必要的功能。

5. 功能性動(dòng)畫(huà)

盡管動(dòng)畫(huà)被視為設(shè)計(jì)界的一種裝飾,有時(shí)候也必不可少。在簡(jiǎn)約界面中加入有針對(duì)性的動(dòng)畫(huà),不僅會(huì)使網(wǎng)站看起來(lái)更漂亮,也會(huì)使界面更高效。必要請(qǐng)看下,可以使用動(dòng)畫(huà)節(jié)省屏幕空間,同時(shí)使網(wǎng)站瀏覽更有趣。

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

通過(guò)GIPHY

6. 極簡(jiǎn)的登陸頁(yè)面和組合

但是,如果您的網(wǎng)站是內(nèi)容豐富的網(wǎng)站(例如新聞網(wǎng)站或博客網(wǎng)站)怎么辦?

在那種情況下,完全的簡(jiǎn)約設(shè)計(jì)可能會(huì)有些困難,使用簡(jiǎn)約的界面將使用戶操作更多,這對(duì)于高效的網(wǎng)站可能并不理想。

那么解決方案是什么?

Less is more?極簡(jiǎn)主義在Web設(shè)計(jì)中的真相

資料來(lái)源:https ://mywony.com/?ref=lapaninja

網(wǎng)站Mywony,婚紗設(shè)計(jì),在線購(gòu)物網(wǎng)站,采用使用簡(jiǎn)約的布局作為著陸頁(yè)。一個(gè)電子商務(wù)網(wǎng)站,無(wú)論是亞馬遜還是其他獨(dú)家網(wǎng)站,都傾向于展示他們銷(xiāo)售的所有產(chǎn)品。但是Mywony采取了極簡(jiǎn)主義的方式,為游客提供了功能完善的設(shè)計(jì),看上去也很討人喜歡。

你要做什么?那結(jié)論是什么?

許多人仍然認(rèn)為極簡(jiǎn)主義只是設(shè)計(jì)的視覺(jué)方面。雖然這部分是正確的,但極簡(jiǎn)主義也必須有其自身的功能。解鎖功能性極簡(jiǎn)主義的所有秘密之后,您可以將其應(yīng)用到網(wǎng)站設(shè)計(jì)中,這類(lèi)型的網(wǎng)站不僅是您和用戶之間的交流工具,也是用戶希望訪問(wèn)的美觀的網(wǎng)站。

 

原文網(wǎng)址:https://medium.com/usabilitygeek/is-less-really-more-the-truth-of-functional-minimalism-in-web-design-ff35256bda5f

作者:Jessica Bennett

編譯作者:熊不知;公眾號(hào):產(chǎn)品經(jīng)理熊不知(ID:xiongbuzhia),人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。5年產(chǎn)品經(jīng)理經(jīng)驗(yàn),專(zhuān)注海外社交APP和編輯工具類(lèi)APP的產(chǎn)品設(shè)計(jì)。

本文由@熊不知 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 如果有不同的觀點(diǎn),可以和我一起討論哦(pmxx661)

    來(lái)自湖北 回復(fù)
  2. 極簡(jiǎn)主義,極其考驗(yàn)運(yùn)營(yíng)者的智慧!極簡(jiǎn)實(shí)際上是極致!

    回復(fù)
  3. 我想看這些網(wǎng)站,發(fā)現(xiàn)我沒(méi)有VPN,所以我找了一波,又回來(lái)學(xué)習(xí)~

    回復(fù)