如何充分利用極簡主義網(wǎng)頁設(shè)計的優(yōu)勢(譯文)

如今極簡設(shè)計已普遍被應(yīng)用于網(wǎng)頁設(shè)計中恰响,當(dāng)然這擁有充分理由。輕量級的布局和低維修成本使其靈活適合于響應(yīng)式設(shè)計。自然優(yōu)雅極具美感借跪,使得很多品牌和機構(gòu)青睞并采用。然而贊賞這一設(shè)計風(fēng)格和創(chuàng)造它是兩碼事酌壕。

看起來掏愁,由于極簡主義元素不多歇由,復(fù)制某種風(fēng)格似乎變的及其容易。然而事實卻正好相反果港,由于設(shè)計師可利用的元素極少沦泌,創(chuàng)造一個極簡主義的設(shè)計設(shè)計師往往要付出更多思考和努力。

Image Source:Keecker.

這篇文章將解釋如何充分利用極簡主義設(shè)計的優(yōu)點辛掠,我們可以通過以下標(biāo)準(zhǔn)快速判斷極簡設(shè)計是否適用于你的網(wǎng)站設(shè)計谢谦,然后深入去做最佳實踐,因為你需要后續(xù)和技術(shù)討論合作公浪。


極簡主義是否適合你的網(wǎng)站他宛?

根據(jù)免費電子書《Web Design Book of Trends 2015-2016》的推薦。極簡主義設(shè)計并不是每個網(wǎng)站最好的選擇欠气。雖然這項技術(shù)非常適合簡單的企業(yè)機構(gòu)像是事務(wù)所網(wǎng)站和創(chuàng)意個人簡歷,但對于更復(fù)雜的網(wǎng)站情況會變得非常棘手厅各。

http://www.apple.com

讓我們來看看一些常見的網(wǎng)站應(yīng)用極簡主義時遇到的問題:

1.內(nèi)容太多:比如ebay或是Amazon的網(wǎng)站需要一個支持多內(nèi)容分類的詳盡界面,所以一個極簡主義的界面并不是最佳選擇预柒。然而队塘,這些網(wǎng)站仍應(yīng)用了極簡設(shè)計的一些準(zhǔn)則,比如在你不需要的時候宜鸯,將內(nèi)容隱藏憔古。

2.廣告太多:總的來說,外部的廣告和極簡主義無法很好并存淋袖。極簡主義準(zhǔn)確而細(xì)致鸿市,如果你無法確認(rèn)外部的廣告服務(wù)器會在網(wǎng)站插入怎樣的廣告,你的整個設(shè)計可能會被一些瑣碎的元素打亂即碗,比如廣告圖片的顏色焰情。即便廣告是被預(yù)設(shè)好的,仍然可能會成為你設(shè)計中多余的元素剥懒。

3.兒童和年輕人的網(wǎng)站:年輕觀眾可能會因為極簡主義的設(shè)計感到無聊内舟,他們常常會喜歡更多視覺刺激的網(wǎng)站,甚至也可以包含一些音頻初橘。

相比于其他的風(fēng)格验游,極簡主義有一套特定的風(fēng)格標(biāo)準(zhǔn),當(dāng)你決定使用這種風(fēng)格前保檐,需仔細(xì)思考耕蝉。


極簡主義的最佳實踐

看看這些有價值的極簡主義的指導(dǎo)方針:

1.只有著陸頁:對一些內(nèi)容豐富的網(wǎng)站來說,極少的元素并不有利夜只。這種情況下赔硫,更好的選擇是創(chuàng)造一個極簡主義的著陸頁,以這個頁面作為一個更復(fù)雜網(wǎng)站的入口盐肃。

2.干脆利落的設(shè)計稿:一般來說爪膊,“省略不必要的詞”是極棒的寫作建議,甚至更適用于極簡設(shè)計砸王。在做設(shè)計稿的時候推盛,想象你是海明威在寫作吧~

3.重視頂部空間:根據(jù)用戶瀏覽的習(xí)慣,將高質(zhì)量的內(nèi)容以充足的負(fù)空間排版放置于頁面頂端谦铃,隨著向下滾動頁面逐漸增加內(nèi)容的密度耘成。

4.保持趣味性:對極簡主義來說,無聊始終是一種威脅驹闰,所以改變你的布局以進一步吸引用戶瘪菌,交替沿z字形布局模式可以幫助閱讀。

5.一頁一個概念:簡潔設(shè)計的主旨嘹朗,每個頁面/屏幕圍繞一個視覺师妙,專注在一個概念上。

6.少于等于五部分:內(nèi)容最好不多于五個部分屹培,否則便縮減它們默穴。

7.從簡入繁:最好在設(shè)計的時候先從黑白的框架入手,然后再慢慢往里面添加元素比如說顏色等等褪秀,這樣做的目的是幫助你搞明白什么是必要的蓄诽,什么可以省去。

如果你是學(xué)習(xí)極簡設(shè)計的新手媒吗,如何取舍是極痛苦的選擇仑氛。下面我們做了一個列表給新手們。

1.必要元素——logo闸英,導(dǎo)航選項锯岖,正文內(nèi)容,聯(lián)系信息

2.可以舍去的——社交媒體鏈接/圖標(biāo)自阱,頁腳嚎莉,小部件(尤其是列表,比如最熱門點擊)沛豌。

從好的一面看趋箩,隨著你更深入地進行極簡設(shè)計,你直覺就會越清楚哪些可以被省略加派。將必要的和多余的內(nèi)容元素區(qū)分開來是所有設(shè)計風(fēng)格都需要的技能(更不需要提你的生活或工作以外的事情)叫确。


極簡主義與其他設(shè)計風(fēng)格

《極簡主義設(shè)計之美》這篇文章的一部分是講極簡主義是如何與其他設(shè)計風(fēng)格很好配合的∩纸酰可以把極簡主義當(dāng)作一種屬性竹勉,而它可以添加或結(jié)合其他的風(fēng)格和技術(shù)以揚長避短。

特別是娄琉,現(xiàn)今流行的移動設(shè)備和重加載動畫次乓,極簡主義設(shè)計提供了一個方法來保證質(zhì)量的同時降低維護成本吓歇。因此,極簡主義設(shè)計常常和其他風(fēng)格的設(shè)計并用票腰。


1.扁平化設(shè)計


Image Source:Quotes Magazine.

極簡設(shè)計和扁平化設(shè)計兩者搭配相得益彰城看,因為兩者重點都是強調(diào)簡潔之特性。同樣都是舍棄了很多設(shè)計上的技巧而將重點放在內(nèi)容上杏慰,扁平化設(shè)計的基本風(fēng)格就其本身來說测柠,其實便是極簡化設(shè)計。


2.英雄標(biāo)題和圖片

Image Source:Bone and Gold.

先不談及光鮮的扁平設(shè)計缘滥,真實照片和大尺寸篇幅的照片正在越來越廣泛地被應(yīng)用轰胁。隨著這大量又極具吸引力的影相自然而然成為屏幕上最吸引人的焦點,將他們同極簡主義設(shè)計結(jié)合可以防止分散太多用戶的注意力朝扼。


3.簡單的導(dǎo)航

Image Source:ETQ.

換句話說赃阀,你大可以簡化你的導(dǎo)航為漢堡按鈕(左上三條橫線),當(dāng)你需要顯示全部導(dǎo)航內(nèi)容的時候吟税,只需要點擊或鼠標(biāo)滑過凹耙。

雖然這個方法是實現(xiàn)純粹極簡主義設(shè)計的最快策略,但并不推薦用于所有網(wǎng)站——這種過于簡單化的導(dǎo)航致使用戶更難發(fā)現(xiàn)導(dǎo)航肠仪,所以對于一些不熟悉的頁面并不適合用這種導(dǎo)航來吸引用戶肖抱。


4.具有藝術(shù)性的排版

Image Source:The Outpost.

因為對于極簡設(shè)計來說,文字總是不可或缺的組成部分异旧,文字的排版因此顯得舉足輕重意述。也成為創(chuàng)造更具有有個性和感染力的極簡主義網(wǎng)站的幾種方式之一。


總結(jié)

極簡主義設(shè)計有諸多的優(yōu)點吮蛹,例如減少加載時間更適合響應(yīng)式設(shè)計荤崇,值得我們?nèi)パ芯俊H绻愕脑O(shè)計符合上面所提到的所有標(biāo)準(zhǔn)潮针,便可以嘗試用更少的元素重新構(gòu)思你的網(wǎng)站术荤,可以當(dāng)作只是一個練習(xí)。你會發(fā)現(xiàn)有很多你曾經(jīng)覺得必要的元素也是可以被省略每篷。

欲知更多關(guān)于極簡主義設(shè)計的技巧瓣戚,比如其他9個目前的web設(shè)計趨勢,查看免費的電子書《Web Design Book of Trends 2015-2016》.上面有166個手動挑選的例子:比如Adidas,intercom,Apple,Google,Versace等等焦读。當(dāng)然也有100個收集好的資源來幫助你提升設(shè)計水平子库。


第一次翻譯有很多生硬和不恰當(dāng)之處,盡請諒解~

閱讀原文

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末矗晃,一起剝皮案震驚了整個濱河市仑嗅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖仓技,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸵贬,死亡現(xiàn)場離奇詭異,居然都是意外死亡浑彰,警方通過查閱死者的電腦和手機恭理,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來郭变,“玉大人,你說我怎么就攤上這事涯保∷弑簦” “怎么了?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵夕春,是天一觀的道長未荒。 經(jīng)常有香客問我,道長及志,這世上最難降的妖魔是什么片排? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮速侈,結(jié)果婚禮上率寡,老公的妹妹穿的比我還像新娘。我一直安慰自己倚搬,他們只是感情好冶共,可當(dāng)我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著每界,像睡著了一般捅僵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上眨层,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天庙楚,我揣著相機與錄音,去河邊找鬼趴樱。 笑死馒闷,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的伊佃。 我是一名探鬼主播窜司,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼航揉!你這毒婦竟也來了塞祈?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤帅涂,失蹤者是張志新(化名)和其女友劉穎议薪,沒想到半個月后尤蛮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡斯议,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年产捞,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哼御。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡坯临,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出恋昼,到底是詐尸還是另有隱情看靠,我是刑警寧澤,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布液肌,位于F島的核電站挟炬,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏嗦哆。R本人自食惡果不足惜谤祖,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望老速。 院中可真熱鬧粥喜,春花似錦、人聲如沸烁峭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽约郁。三九已至缩挑,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鬓梅,已是汗流浹背供置。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留绽快,地道東北人芥丧。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像坊罢,于是被迫代替她去往敵國和親续担。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,925評論 2 344

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