圖片加載失敗
首頁 動态

Our News

動态

從(cóng)零開(kāi)始教你(nǐ)打造網頁設計(jì)中的(de)極簡風(♦↕fēng)格

作(zuò)為(wèi)設計(jì)師(shī),我們都(dōu)知(zhī)道(dào÷→π→)極簡的(de)設計(jì)效果的(de)确非常出彩。然而,在設計(jì)過程中,我們往往>‌​會(huì)由于使用(yòng)較少(shǎo)元素而感覺缺了(le)什(sh©∏én)麽,或是(shì)讓最終成品看(kàn)起來(lái)仿佛沒有(yǒu)完成。₹δ​↔那(nà)麽什(shén)麽是(shì)極簡設計(jì)?又(yòu)是 ✘∑α(shì)什(shén)麽方法使你(nǐ)的(de)設計(j↕←★↔ì)看(kàn)起來(lái)簡約又(yò ☆₩u)不(bù)簡單呢(ne)?這(zhè)篇文(wén)章(zhāng)也(<β♠yě)許會(huì)幫到(dào)你(nǐ)。

什(shén)麽是(shì)極簡設計(jì)

極簡設計(jì),嚴格上(shàng)講不(bù)能(néng)算®←(suàn)作(zuò)一(yī)種視(shì)覺風(fēng)格,而是(shì)一(yī)種設Ω<∞™計(jì)哲學。它在保持了(le)基本的(de)骨架內 β(nèi)容的(de)基礎上(shàng),剔除掉多≠₽£↕(duō)餘的(de)元素、裝飾、色彩和(hé)紋理(lǐ)>β£φ,是(shì)通(tōng)過不(bù)斷思考而進行(xíng)化(§ ♣→huà)繁為(wèi)簡的(de)設計(jì)過程。這(zhè)樣×₹←ε做(zuò)的(de)結果是(shì)突δ✘™★顯了(le)主題內(nèi)容。所以,它是(shα↔ì)紮根于設計(jì)思想根部的(de)概念。

極簡主義起源于蘇格蘭,當時(shí)在各個(gè)文(wén)化(huà)領域都‌∏α(dōu)掀起了(le)極簡的(de)風(§₹ fēng)潮:平面設計(jì)、建築、音(yī©✔$n)樂(yuè)、文(wén)學、繪畫(huà)等↓₩‍。直到(dào)現(xiàn)在,也(yě)開(kāi)始在網頁設計(jì)中盛行(xínβ₩g)。

天貓&京東(dōng),內(nèi)蒙古電(diàn)商品牌策劃,內(nèi)蒙古微(wēi)信營銷,內(nèi)蒙古微(wēi)網站(zhàn),呼和(∏ hé)浩特電(diàn)商品牌策劃,呼和(hé£÷↕↓)浩特微(wēi)信營銷,呼和(hé)浩特ε♦  微(wēi)網站(zhàn),內(nèi)蒙古網站(zhàn)制(zhì)作(zuò),內(nèi)蒙古網站(zhàn)設計(jì),內(nèi)蒙古網站(zhàn)建設,呼和(hé)浩特網站(zhàn)建設,γ≤≠‌呼和(hé)浩特網站(zhàn)制(zhì)作(zuò)、呼和£σ★(hé)浩特網站(zhàn)設計(jì)首選∏→<λ內(nèi)蒙古呼和(hé)浩特先誠網絡科(kē)技(jì)公司。先誠官網:/

盡管極簡設計(jì)風(fēng)格在十年(nián)間(jiān)并未₩↑≤∏得(de)以足夠的(de)關注度,早先的(de)互聯網領域中根本看(kàn)不(bù)到(dà‌→©o)它的(de)影(yǐng)子(zǐ),樣式複雜♥ ×(zá)的(de)LOGO和(hé)廣告,'δσ豔麗(lì)的(de)色彩……網頁設計(jì)一(yī)直以來(®✔δ♠lái)都(dōu)以臃腫繁雜(zá)的(de)形象出現(xiàn)。

少(shǎo)即是(shì)多(duō)

前已提及,極簡風(fēng)格是(shì)直截了(le)當地(±≥dì)展示主題,減少(shǎo)對(duì)觀者的(de)視(shì)覺幹擾。如(rú)果一(♣→• yī)個(gè)頁面有(yǒu)太多(duō)的(de)元素,用(yòng)戶就(jiù)會(h↕®☆uì)在衆多(duō)的(de)元素中,由于無法決定其主₩®≥次而陷入混亂。一(yī)個(gè)優秀的(de)→β 極簡設計(jì)勢必會(huì)用(yòng)不✘‌(bù)偏不(bù)倚的(de)姿态焦距主體(tǐ)內(nèi)容。

舉例來(lái)說(shuō),一(yī)個(gè)以黑(hēi)白(bái)灰為(w♥×★èi)主色的(de)網頁中,如(rú)果出現(xiàn)任何色↓←<彩,都(dōu)會(huì)成為(wèi)視(shì)覺✔ ™ 焦點。就(jiù)如(rú)下(xià)例所示,★φ白(bái)色作(zuò)為(wèi)底色背景,再加上σ₽>(shàng)一(yī)點淺色背景,搭配黑(hēi)色文(wén)字,同時(shí)有(β‌γyǒu)相(xiàng)應配圖,配圖的(de)色彩表現(xiàn)集中在模特的(de)€₽服飾上(shàng),這(zhè)很(hěn)好(hǎo)的(de∏ )突顯了(le)服裝品牌這(zhè)一(yī)焦點←♥π。

這(zhè)一(yī)種設計(jì)風(fēng)格就↕₽(jiù)讓用(yòng)戶焦距到(dào)服裝本身(shēn)的(de)&Ω質地(dì)、色彩、樣式上(shàng),從(cóng)而輕而易舉鎖定了(le)用(yòng)戶的≤±π(de)注意力。而與此同時(shí),在服裝本身(shēn)以外(wài©λ♠)不(bù)再增加任何的(de)裝飾和(hé)元素,除了(l  ≈÷e)主體(tǐ)結構再無其他(tā)。

怎樣簡化(huà)內(nèi)容

首先對(duì)于網頁所展示的(de)內(nèi)容,設計(jì)師(shī©₹ ‍)要(yào)有(yǒu)一(yī)個(gè)清晰的(de)認知(zhī•γ™•)。先将網頁上(shàng)所需要(yào)出β♠現(xiàn)的(de)元素列出清單,再從(✘&≠<cóng)中進行(xíng)逐次審視(shì)是(shì)否有(yǒu)出現(xiàn)γ↔的(de)必要(yào),是(shì)否需要(yào)去(qù)除。

這(zhè)是(shì)一(yī)份我認為(wèi)可(kě)能(néng)需要(yào)思考是<π ↓(shì)否應該不(bù)予出場(chǎng)的(de)元素清單。

社交媒體(tǐ)的(de)圖标

标語和(hé)詳細介紹

目前流行(xíng)的(de)一(yī)些(xiē)比較引人(rén)耳目的(de)  ✘元素(比如(rú)分(fēn)享和(hé)贊↔♥→等)

一(yī)個(gè)頁面多(duō)出三個(g‌™è)部分(fēn)以外(wài)的(de)部分(fēn)

導航中的(de)次級元素

當然,這(zhè)并不(bù)是(shì)一(yī)個(gè)框架,你(nǐ)當然需∏©&要(yào)考慮如(rú)果有(yǒu)必要(yào)時(shí)也(yě)不↔←✘(bù)能(néng)統統删除而後快(kuài)✘≤₹φ。主頁出現(xiàn)的(de)部分(fēn)元素都(dōu)可(kě)以放≈↔(fàng)到(dào)二級頁面裡(lǐ)。畢竟如(rú)果主頁信息量太大(d₽↑à),你(nǐ)的(de)用(yòng)戶也(y®Ωě)許也(yě)會(huì)“消化(huà)不(bù)良”。

這(zhè)樣精簡以後的(de)結果是(shì),也(yě)許你(nǐ)的(de)網站✘•↔(zhàn)的(de)功能(néng)性相(xiàng)比弱化(huà)了(le)一(yī)些φ&ε(xiē),但(dàn)删減了(le)多(duō)餘的(de)元素,使之成為(wèi)一(yī)∏‍•個(gè)更為(wèi)簡化(huà)的(de)布局,'©±​這(zhè)讓用(yòng)戶可(kě)以在你(nǐ)的(de)網站(→♣zhàn)停留時(shí)間(jiān)更長(cháng)一(yī)點。而讓用(yòng)戶成☆♣♠為(wèi)願意為(wèi)之學習(xí)的(de)網站(zhàn)。

怎樣簡化(huà)設計(jì)

你(nǐ)需要(yào)不(bù)斷簡化(huà)任何出現(xiàn)的(de)元σ€素,讓紋理(lǐ)消失直至不(bù)見(jiàn)、更 →♦♦少(shǎo)顔色、更簡單的(de)造型……總而言之,這(zhè)一(yī)∞<"系列的(de)處理(lǐ)過程的(de)确讓你(nǐ)的(de)設計(jì)變得(de)有₩₽(yǒu)些(xiē)平淡了(le)。但(± dàn)這(zhè)時(shí)你(nǐ)要(yào)記‍ γ住,不(bù)要(yào)偏離(lí)了(le)極簡的✔'✘(de)方向,你(nǐ)可(kě)以把設計(jì)集中到(dào₽÷Ω♥)焦點內(nèi)容上(shàng),讓焦點內(nèi)容成為(wèi)唯一(yī)重要(yào)÷±‍★的(de)視(shì)覺核心。使用(yòng)一(yī)些(xiē)創造性的(de♠Ω)技(jì)巧來(lái)處理(lǐ)細節。

使用(yòng)優雅的(de)線框

大(dà)家(jiā)都(dōu)知(zhī)道(dào),使用(yòngσ≈‌)線框能(néng)讓你(nǐ)的(de)設計(jì)看(kàn)上(shàng)去(qù)更“✘♦∞穩固”,因為(wèi)你(nǐ)的(de)眼力其實超乎你(nǐ)想象≤™≥的(de)好(hǎo)用(yòng),它甚至會(huì)記得(de)每©↓一(yī)段間(jiān)隔每一(yī)個(gè)交點,所以任₽± 何破壞視(shì)覺平衡的(de)元素都(dōu)會(huì)格外(wà♣£α i)突兀,這(zhè)時(shí)你(nǐ)的(de)直×λ$∞覺隻會(huì)告訴你(nǐ)“感覺不(b↑÷☆♥ù)對(duì)”。但(dàn)這(zhè)其實就(jiù)是(shì)沒有(yǒu)運用(yòn¥®☆g)好(hǎo)線框的(de)結果。

一(yī)個(gè)合适的(de)線框圖是(shì)極簡設計(☆Ωjì)緻勝前提。你(nǐ)可(kě)以運用(yòng$¶©)它獲得(de)合适的(de)比例,創造出有(yǒu)趣的(de)視(shì‌♦••)覺平衡。

你(nǐ)可(kě)以在設計(jì)伊始就(jiù)用(☆γπyòng)2B鉛筆(bǐ)在草(cǎo)稿上(shàng)畫(huà)出你(nǐ)的(de)頁面布 × 局和(hé)元素樣式。

在畫(huà)線框時(shí),你(nǐ)需要(yào)遵循下(♥Ω±xià)面的(de)順序

1)決定你(nǐ)的(de)網頁中需要(yào)出現(xiàn)的(de)元素 2)對(≈‍₽↔duì)元素之間(jiān),按優先次序¶÷±進行(xíng)排序 3)畫(huà)出線框草(cǎo)圖并試著(zhe)去(qù)達到(dào÷γλ)最佳的(de)布局視(shì)覺效果

留白(bái)

在我眼中,留白(bái)是(shì)一(yī)種設計(jì)素材。留白(bái)并不•€(bù)等同于極簡,但(dàn)它與極簡設計(jì)有(yǒu)α₽<♥著(zhe)千絲萬縷的(de)聯系。

不(bù)管你(nǐ)多(duō)麽有(yǒu)創意,一(yī)個(gè)極簡設計(ε≤jì)如(rú)果沒有(yǒu)足夠留白(bái),那 ↕(nà)麽也(yě)将是(shì)失敗的(de)。所以,在設計(jì♠★‍↓)時(shí),你(nǐ)要(yào)考慮每個(gè)元素的(de)周‍®圍都(dōu)有(yǒu)足夠多(duō)的(de)留白(bái)空(kōng)間→ σ™(jiān)。

例如(rú)上(shàng)面這(zhè)個(gè)網頁主頁中的(de)LOGO部分(fēn∏δ∏)周圍的(de)大(dà)量留白(bái<∞₽),讓LOGO本身(shēn)得(de)到(dào)直觀的(±©‍∞de)展示。

讓簡單成為(wèi)習(xí)慣

我們不(bù)可(kě)否認,我們有(yǒu)一(yī)種‍★↔✘自(zì)我膨脹的(de)惡習(xí)。設計(jì)中,不(bù)知(zhī)不(‌‌​bù)覺就(jiù)會(huì)增加過多(duō)的(d‌↑‍e)東(dōng)西(xī),因為(wèi)你(nǐ)的(d←♠★Ωe)腦(nǎo)海(hǎi)中一(yī)直浮現(xiànβ ¶¥)一(yī)種想要(yào)“完美(měi)”它的(de)欲望。鑒于此,我們必須要(yàoו)讓自(zì)己從(cóng)這(zhè)個(gè)習(xí)慣中擺脫≈€♣出來(lái)形成另一(yī)個(gè)良好(hǎo)的(de)習(xí)慣。

如(rú)果你(nǐ)在設計(jì)中陷入了(le)盲區(qū),總覺得(de)不(b&¶α£ù)對(duì)勁“仿佛缺了(le)點什(shén)麽”的(de)話(huà),這(Ω>zhè)時(shí),與其糾結于給頁面增加δ∑更多(duō)的(de)元素,不(bù)如(rú)想想怎樣讓頁面減少(shǎo)更多(duō)的σ×(de)元素。

最後,當你(nǐ)對(duì)設計(jì)已經滿意後,再看(kà±βn)看(kàn)是(shì)否仍然可(kě)以進一(yī)步簡‌Ω©化(huà)設計(jì)。就(jiù)像給樹(shù)苗修剪枝葉一(yī)樣的(de)λ$耐心。

網頁設計(jì)中極簡範式

黑(hēi)白(bái)灰:色彩禁欲主義

黑(hēi)白(bái)灰的(de)大(dà)氣讓人(rén)難忘,雖然是(shì)信手拈來(γ¶♠®lái)的(de)設計(jì)道(dào)理(lǐ),但(dàn)®$α放(fàng)到(dào)實踐中,設計(jì)師(sh ¥↑"ī)往往需要(yào)更多(duō)的(de)勇氣做(zuò)這(zhè)樣的(de)設計λ£♣(jì)。因為(wèi)做(zuò)這(zhè)類設計(jì)的(de)風(₽≈↔fēng)險太大(dà),不(bù)小(xiǎo)心就(jiù)會( βφ₹huì)讓設計(jì)變得(de)死氣沉沉一(yī)片荒蕪,帶給觀者負面的(d ©e)感受。如(rú)上(shàng)圖中以黑(hēi)色‍γ>為(wèi)背景就(jiù)需要(yào)嚴格與網站(zhàn)的(de)內Ω<(nèi)容契合,表現(xiàn)出黑(hēi)色的(de)“酷”。同時(shí),元素的(de)±÷γ÷編排也(yě)必須不(bù)拘一(yī)格,比如(rú)将人(rén)物(wù)置最∞♣‌前,文(wén)字放(fàng)于背景之上(s±×♥→hàng),黑(hēi)白(bái)的(de)搭配頓顯時(shí)尚感。

線形插畫(huà):形魅力

灰色的(de)背景上(shàng)隻用(yòng)白(bái)色作(zuò)為(wèi)前景  ™≥色,首頁的(de)焦點是(shì)中心位置的(de)線性插畫(huà),這(zhè)是​"(shì)品牌展示的(de)一(yī)種最為(wèi)直觀∞γ₹的(de)方式。而運用(yòng)一(yī)定的(de)投影(yǐng"‌≤ )效果,讓插畫(huà)仿佛懸浮在半空(kō©'♠♣ng)中則是(shì)增加了(le)一(yī)些(xiē)創造性的(dφδe)細節,這(zhè)就(jiù)讓畫(huà)面活躍起來(lá≈♦§δi),不(bù)會(huì)陷入一(yī)片荒蕪當之中。

字母:形的(de)構思

字母本身(shēn)的(de)造型就(jiù)是(shì)一(yī)副完美(měi)的(de) ≈≤ 構圖,加上(shàng)文(wén)字本身(shēn)所具有(yǒu)一(₩£★→yī)定的(de)含義,融合一(yī)身(shēn),就(jiù)會(huì)讓畫(huà)面¥€變成雙向發聲。所以,重新縮小(xiǎo)或放(fàng)大(dà)文(wén)字,讓文(™§wén)字成為(wèi)畫(huà)面的(de)焦 ¶±點用(yòng)以傳達品牌形象,這(zhè)種方式在極簡的→"δ (de)網站(zhàn)中很(hěn)容易做(zuò)到(dào)。如(rú)本例中可δ£(kě)以将文(wén)字的(de)背景作(zuò)為(wèi)創意擴展∏‍的(de)部分(fēn),讓鼠标移動時(shí)出現(xiàn)不(bù)同的(de)漸變•∑¶色背景,這(zhè)些(xiē)漸變色色彩都(dōuφ®)傾向鮮豔,而這(zhè)裡(lǐ)極好(hǎo)地(dì)點•"綴了(le)文(wén)字本身(shēn)的(de)美(měi)感。而中文(™¥βwén)相(xiàng)比英文(wén) ¥更為(wèi)複雜(zá),想要(yào)把文(wén)字也(yě)變為(wèi)對(duì)形态↑™®×的(de)焦距,就(jiù)需要(yào)将中文(π‍ πwén)改為(wèi)在形态上(shàng)較為(wèi&&')突出的(de)字體(tǐ),例如(rú)書(shū)法字體(tǐ)等。如(rú)下(xià)≠λ圖所示。

攝影(yǐng):用(yòng)圖講故事(shì)

用(yòng)一(yī)張高(gāo)清的(de)攝影(yǐng)作(zu¶↓ò)品作(zuò)為(wèi)背景,也(yě)是(shì)網頁中極簡設計(jσ<ì)的(de)常用(yòng)方法。這(zhè)幅攝影(yǐng)作(≤≈zuò)品本身(shēn)就(jiù)是(shì)極簡風(fēng)<®δ↔格的(de),讓品牌故事(shì)隐藏于照(zh✔♣ ào)片中。照(zhào)片的(de)寫實程度無能(néng®¥↓©)出其左右,而本身(shēn)的(de)風(fēng)格就(jiù)必須要(yào)明(m∞δπ"íng)顯地(dì)突出主題。這(zhè)時(shí)文(wén)字的(de)出現(xiàn)是π≥☆♥(shì)為(wèi)解釋說(shuō)明(míng)γε¶≥的(de)作(zuò)用(yòng),你(nσ×ǐ)可(kě)以在你(nǐ)的(de)設計(jì)中加以删減或增加。

你(nǐ)還(hái)可(kě)以像上(shàng)圖示例那(nà)樣讓圖片<←♠和(hé)文(wén)字展示出各種有(yǒu)趣的(de)組合樣式,這(zhè)時(sh≤↔•☆í)必須要(yào)考慮文(wén)字和(hé)圖片的(de)結合,千萬不(b♣γ↔ù)要(yào)用(yòng)一(yī)張和(hé)文(wén)字內(nèi)容毫不(bù¶♣)相(xiàng)幹的(de)圖片。

極簡設計(jì)的(de)适用(yòng)場(chǎ↑ ≤ng)合

就(jiù)像大(dà)家(jiā)所知(zhī),極簡設計(jì)由于內(nè​←‍i)容展示較少(shǎo),在目前商業(yè)應用(yòng)中☆™λ÷還(hái)不(bù)太廣泛,大(dà)多(duō)用(yòng)在小(xiǎo)型創意領域機(j♦&ī)構的(de)官網較多(duō)。當涉及營銷時(sh$"₹πí),由于營銷的(de)目的(de)就(jiù)是(shì)最短 ♣↔≠(duǎn)時(shí)間(jiān)推送最豐富全面的(de)信息給用(yòng&₹£)戶,因此一(yī)般的(de)商城(chéng)都(dōu)不™♠(bù)會(huì)讓自(zì)己看(kàn)上(shàng)去↓ ×(qù)太輕松。雖然這(zhè)樣說(s✘₩©huō),但(dàn)我們在設計(jì)商®♥σ$城(chéng)的(de)時(shí)候也(yě)δ 注意到(dào),目前已經有(yǒu)設計(jì)師(shī)開(kāi)始利用(↓←yòng)這(zhè)種簡化(huà)的(de)風(fēng)格設計(jì)商城(chéng)≤®,做(zuò)出不(bù)一(yī)樣的(de)細目更深化(hu∑Ωà)的(de)小(xiǎo)型商城(chéng)。這(zhè)類商城(chéng)的(de)φ 産品也(yě)針對(duì)的(de)是(shì)較高(gāo)端的(de)用♠εσ♥(yòng)戶,比如(rú)時(shí)裝行(xíng)業(yè)裡(lǐ)的(de)網↑≤∏±站(zhàn),可(kě)以不(bù)妨一(yī)•‌試這(zhè)樣的(de)設計(jì)風(fēng)格。如(rú)下( ¥☆>xià)例所示。

可(kě)以看(kàn)到(dào)所有(yǒu)的≠≠‌(de)信息都(dōu)被濃縮了(le),産品展示讓人(rén)一(y®>ī)目了(le)然。我認為(wèi)這(zhè↓£ )是(shì)一(yī)個(gè)進步,不(bù)論是(shì)審美(měi)方面還(hái)是(γ λshì)營銷影(yǐng)響方面都(dōu)讓産品和(hé)用(yòng)戶的(de)距離(lí)↑©♠更近(jìn)了(le)一(yī)步。

後記

我認為(wèi)極簡的(de)設計(jì)才是(shì)♦Ω≠未來(lái)派,以突出主題展示的(de)設計(jì)思≤β​路(lù)本身(shēn)就(jiù)是(shì)設計(jì≈€×)師(shī)應該執行(xíng)的(de)思維。無論設計(jì‌∑±)的(de)是(shì)什(shén)麽,都(dōu)要(yào)拷問(wèn)設計(j≤×ì)的(de)目的(de),因此對(duì)主體(tǐ)內(nèi)§'容的(de)精簡優化(huà)是(shì)提高(gāo)溝通(tōng)效率的(de)一(y₽∞§ī)種極為(wèi)有(yǒu)效的(de)方式。這(zhè)φ®從(cóng)未來(lái)來(lái)說(shu¥<Ωō),也(yě)是(shì)不(bù)可(kě)逆之一(yī)。

原文(wén)地(dì)址:ifeiwu

注:本文(wén)均來(lái)自(zì)百δ÷度搜索,如(rú)涉及版權問(wèn)題,請(qǐng)聯系我們,我們©λ會(huì)第一(yī)時(shí)間(jiān)解決。