什么是簡約風(feng)格的(de)網(wang)站?

 

      扁(bian)平設計、英雄形象和漢堡(bao)包菜單(dan)等(deng)等(deng)許(xu)多這些現(xian)在流(liu)行的設計趨勢，都是(shi)于(yu)2000年開始逐漸受到極簡風格(ge)的影響才誕生的。

 

      「這里的英雄形(xing)象指的是：在網站(zhan)首頁上(shang)使(shi)用的大(da)尺寸圖片。在日本(ben)，作為(wei)視覺(jue)的關鍵(jian)，也(ye)被(bei)稱(cheng)為(wei)主(zhu)視覺(jue)。在Bootstrap中也(ye)有(you)命(ming)名為(wei)「Hero unit」的組件而被(bei)大(da)家廣泛使(shi)用著。」

 

      現在為我們提供(gong)了許多服務的google，它的主頁(ye)也已經(jing)有15年以上(shang)沒(mei)有變動過(guo)了。

 

      谷歌一直被評(ping)為(wei)采用簡(jian)約風格的Web界面的先驅，自20世紀90年(nian)代所(suo)提供的測試版以來，一直都(dou)很(hen)重(zhong)視界面的簡(jian)潔性。

 

      關于簡(jian)(jian)約(yue)風(feng)格(ge)的(de)討(tao)論還在(zai)繼(ji)續(xu)，但也(ye)有一(yi)些很多設(she)計師都認(ren)同的(de)共同點。那么，就(jiu)讓我們一(yi)起來(lai)詳細(xi)的(de)看一(yi)看簡(jian)(jian)約(yue)風(feng)格(ge)究竟(jing)有著(zhu)哪(na)些特征吧。

 

只有必要的元素

 

      簡(jian)約風(feng)格的(de)哲學非(fei)常簡(jian)單(dan)，即“少即是(shi)多(英(ying)文：Less is More)”。在 網(wang)頁設(she)計(ji) 中(zhong)，只使(shi)用真(zhen)正有必(bi)要的(de)要素，就可以實現(xian)更多的(de)事情。簡(jian)約風(feng)格的(de) 網(wang)頁設(she)計(ji) 策略，就是(shi)刪除用戶操(cao)作時不必(bi)要的(de)內容，以實現(xian)接口界面的(de)單(dan)純化。

 

      屏幕(mu)(mu)上的要(yao)(yao)素(su)越少，所留下(xia)的要(yao)(yao)素(su)就會變得更強。如果在屏幕(mu)(mu)上的設(she)計(ji)要(yao)(yao)素(su)只有一個，信(xin)息就能(neng)很(hen)準確(que)的傳遞(di)給用戶。

 

      極簡風格是刪(shan)除所(suo)有(you)讓用戶(hu)無法專(zhuan)注于內容(rong)的(de)(de)(de)元素。但與此同時(shi)，為了防(fang)止刪(shan)除或者隱藏了對(dui)用戶(hu)來說(shuo)真正(zheng)必要的(de)(de)(de)內容(rong)，而(er)讓用戶(hu)的(de)(de)(de)操作(zuo)感到困難，你需要仔細地檢查。對(dui)內容(rong)的(de)(de)(de)周圍加以設計(ji)，使用戶(hu)不會感到混亂，讓我們(men)留下一些輔助元素(如導航菜單)吧。

 

留白空間

 

      簡約(yue)風格的最常見的元(yuan)素(su)，就(jiu)(jiu)是什(shen)么設計元(yuan)素(su)都沒有。簡約(yue)風格最重要的一點就(jiu)(jiu)是負空間(jian)(jian)或留白空間(jian)(jian)，這些將(jiang)有助于引(yin)導(dao)用戶的視線(xian)。在設計要素(su)的周圍留有許多留白空間(jian)(jian)，就(jiu)(jiu)可以很好的將(jiang)用戶的視線(xian)集中起來。

 

      留白空間對簡約風格來說是最重要的元素。

 

視覺特性

 

      在簡(jian)約風格(ge)中，每一(yi)個設計(ji)的細節都是非常重要的。接下來介紹一(yi)些在設計(ji)中可以靈活(huo)使用的要點。

 

平整(zheng)紋理(英：flat textures)

 

      在(zai)簡(jian)約(yue)風格的界面(mian)中，簡(jian)單的紋理和(he)圖標是(shi)(shi)經常被使用(yong)的圖形元素。在(zai)界面(mian)中，不管是(shi)(shi)清晰高(gao)亮的效果、模糊陰暗(an)的效果還是(shi)(shi)給UI 元素添(tian)加上光(guang)澤表現3D的效果都是(shi)(shi)沒有必要的。

 

 

色彩鮮艷的圖片

 

      圖(tu)片是簡約設計中(zhong)最(zui)醒目(mu)的(de)要(yao)素(su)，可以渲(xuan)染出(chu)作品(pin)的(de)氛圍(wei)。然而，我們也需要(yao)謹記，必須要(yao)使(shi)用抓住了簡約風格(ge)特點的(de)圖(tu)片。選擇了錯誤的(de)圖(tu)像(xiang)(如亂七八糟不能(neng)集中(zhong)的(de)圖(tu)像(xiang))，它(ta)會抵(di)消采用了簡約風格(ge)界(jie)面(mian)的(de)好處。

 

簡約風格中最(zui)搶眼(yan)的(de)英(ying)雄圖像

 

      用(yong)最少的顏色

 

      在簡約風(feng)格(ge)中，無需添加設計元素(su)(su)和圖形(xing)，只使(shi)用顏(yan)色便能引起視(shi)(shi)覺(jue)上的(de)關注，將視(shi)(shi)線集中到元素(su)(su)之上。因為使(shi)用的(de)顏(yan)色數量必須(xu)很(hen)少，所以必須(xu)做出具有創(chuang)意的(de)視(shi)(shi)覺(jue)性層次感效果。

 

      用(yong)戶所(suo)能利(li)用(yong)的(de)有(you)效情報很(hen)少，配色就(jiu)會(hui)變得(de)顯眼，對網站(zhan)也會(hui)有(you)著顯著的(de)影響(xiang)。

 

印刷字體

 

      大膽(dan)的印刷(shua)體，側重于將(jiang)瞬間描(miao)述所記(ji)載(zai)的詞匯和(he)內(nei)容作為焦點，以達(da)到(dao)更有趣味的視覺效果。當(dang)你使(shi)(shi)用(yong)引人注目(mu)的具有魅力的印刷(shua)體時(shi)，使(shi)(shi)用(yong)文字來傳(chuan)遞情(qing)報是非常有效的。

 

   ;   想傳遞信息時(shi)，請使用具有(you)魅力的印刷字體吧。

 

 

對比度

 

      由(you)于使用了(le)比平時較(jiao)少的(de)設計元素(su)，當你想(xiang)創建一個具有視覺(jue)性層(ceng)次感的(de)畫面時是(shi)非常有創意的(de)想(xiang)法。在下面的(de)案例(li)中，白色的(de)背景與黑色的(de)寶(bao)石作為視覺(jue)性的(de)要素(su)被(bei)使用，實現了(le)經典的(de)簡約風格。

 

      簡(jian)約設計中(zhong)，多數情況下只使用一種(zhong)顏色作為重點，那(nei)個顏色可以(yi)強調重要元素。

 

簡約(yue)Web風(feng)格(ge)的實踐總結

 

      對于(yu)簡(jian)約風格，請不(bu)要以為看起來(lai)簡(jian)單，做起來(lai)就會(hui)很(hen)容(rong)易。使用的設(she)計元素很(hen)少，界(jie)面也(ye)變得簡(jian)單，所以有(you)必要給用戶(hu)提供在同一平面內舒適的體驗。

 

一(yi)個(ge)屏幕，一(yi)個(ge)焦(jiao)點

 

      遵從“一(yi)(yi)個(ge)頁面(mian)一(yi)(yi)個(ge)概(gai)(gai)念”的(de)原則，以(yi)單一(yi)(yi)的(de)視覺要素(su)為中心傳(chuan)達一(yi)(yi)個(ge)概(gai)(gai)念為吸(xi)引點，在各個(ge)頁面(mian)都(dou)用心設計吧。

 

 

將(jiang)魅力展(zhan)現(xian)在首屏

 

      充分配合留白(bai)空間的(de)重要(yao)內容，然后隨(sui)著滾動(dong)不斷提高內容的(de)密度吧。

 

簡單易懂的宣傳詞

 

   ;   《The ELements of Style》作(zuo)者Strunk先(xian)生(sheng)與White先(xian)生(sheng)，提(ti)倡“省略不(bu)必(bi)要的單詞(英(ying): Omit needless words)”。將完(wan)成的內容再編輯，選擇(ze)傳遞信息所需的最低(di)限度的單詞吧。

 

讓導航菜單(dan)變得簡(jian)單(dan)(但不是(shi)隱(yin)藏(zang))

 

     ; 簡單易懂的(de)導航菜單一直是 網頁設(she)計 中非常重要的(de)要素。然而，這并(bing)不(bu)意味著將(jiang)它隱藏起來。

 

      在(zai)使用(yong)漢堡菜(cai)單簡化界面(mian)之前，讓(rang)(rang)我們(men)先確認為什么要使用(yong)它。漢堡菜(cai)單會讓(rang)(rang)菜(cai)單的各個(ge)項目變得很難(nan)找到，這是(shi)(shi)(shi)你(ni)所必須注意(yi)到的。在(zai)多(duo)數情況(kuang)下總是(shi)(shi)(shi)顯示的導航(hang)菜(cai)單是(shi)(shi)(shi)有(you)效的。讓(rang)(rang)我們(men)比較一下下面(mian)的案例。

 

      上面的(de)案例是(shi)(shi)點擊(ji)才會顯(xian)示(shi)導(dao)航(hang)菜單，而(er)下面的(de)則是(shi)(shi)總是(shi)(shi)顯(xian)示(shi)導(dao)航(hang)菜單。

 

嘗試使用動畫(hua)

 

      由于(yu)使用動(dong)畫(hua)效果的(de)機會越來越多，尚未使用動(dong)畫(hua)效果的(de)簡約(yue)風(feng)格(ge)的(de)網站(zhan)人氣恐怕會下降。但是，這些新的(de)效果也需要遵守簡約(yue)風(feng)格(ge)的(de)原則，謹慎(shen)小心的(de)使用。

 

為著陸頁和投(tou)資網站保留簡約風格

 

      「這(zhe)里的(de)著陸頁(ye)指的(de)是：在互聯(lian)網(wang)(wang)營銷中，引(yin)導頁(ye)就是當潛在用(yong)(yong)戶點擊(ji)廣告(gao)或者(zhe)利用(yong)(yong)搜索(suo)引(yin)擎搜索(suo)后顯示(shi)給(gei)用(yong)(yong)戶的(de)網(wang)(wang)頁(ye)。一(yi)般這(zhe)個(ge)(ge)頁(ye)面(mian)會(hui)顯示(shi)和(he)所(suo)點擊(ji)廣告(gao)或搜索(suo)結果鏈(lian)接相(xiang)關(guan)的(de)擴展內(nei)容(rong)，而且(qie)這(zhe)個(ge)(ge)頁(ye)面(mian)應該是針對(dui)某個(ge)(ge)關(guan)鍵字(或短語)做過(guo)搜索(suo)引(yin)擎優化(hua)的(de)。」

 

      重(zhong)視內容(rong)，所有的網(wang)站都可(ke)以使(shi)用，但不(bu)一定都是合適。簡(jian)約(yue)風格的目的非常簡(jian)單(dan)，正如(ru)下面的例子，他適合著陸頁(英(ying)：Landing Page)和投資網(wang)站(英(ying)：portfolio sites)這類內容(rong)相對較少的網(wang)站。

 

      設計(ji)師Brian Danaher的(de)投(tou)資網站，對大多數設計(ji)師來說是一個典型的(de)簡(jian)約風格的(de)例子。

 

      越(yue)是復(fu)雜的(de)網站(zhan)想使用簡(jian)約(yue)風格(ge)的(de)效果(guo)，就越(yue)是困難。內容豐富的(de)網站(zhan)，由于缺少設計要素恐怕將會給(gei)用戶帶(dai)來混亂。在(zai)這種情況下，創建(jian)具(ju)有簡(jian)約(yue)風格(ge)的(de)著陸頁，可(ke)以幫助你的(de)用戶瀏(liu)覽到他需(xu)要瀏(liu)覽的(de)詳細內容。

 

 

與簡(jian)約風(feng)格相關的工(gong)具

 

      Minimalist Color Palettes ：一些(xie)簡約(yue)風格的配(pei)色(se)方案(an)，將(jiang)幫助你脫(tuo)離(li)標準的黑白設計創造(zao)更多的組合(he)。

 

      Color Contrast Checker ：輸入(ru)前景(jing)色和(he)背景(jing)色，計算機自動幫助(zhu)你(ni)計算百分比，輕松的(de)就能創建很棒(bang)的(de)顏色組合。

 

總結

 

      簡(jian)約風格的(de)(de)網(wang)(wang)站，通過刪除(chu)不必要的(de)(de)設計元素和(he)與(yu)用(yong)戶目的(de)(de)無(wu)關的(de)(de)內容，將網(wang)(wang)頁的(de)(de)接口變(bian)得簡(jian)單。為了使這一類型的(de)(de)網(wang)(wang)站變(bian)得具(ju)有非凡的(de)(de)吸(xi)引力，精煉(lian)的(de)(de)設計與(yu)簡(jian)易的(de)(de)操作相組合是非常重要的(de)(de)。能更簡(jian)單地誘導用(yong)戶的(de)(de)網(wang)(wang)站，會成為非常強有力的(de)(de)交互工具(ju)。