10.08日(rì)音(yīn)訊,兒(φΩ​βér)童網站(zhàn)視(shì)覺結構布局設計(jì)分(fēn)析

　　10.08日(rì)音(yīn)訊,兒(ér♣₽)童網站(zhàn)視(shì)覺結構布局設計(jì)分(fē'±n)析。兒(ér)童網站(zhàn)的(de)設計(jì)不(bù•♣→)同與其它性質的(de)網站(zhàn)，它≤₩£≠的(de)平面效果顯示不(bù)能(néng§♦₽)太商業(yè)化(huà)了(le)，因為(wèi)畢竟針對(d∏♠uì)的(de)群體(tǐ)不(bù)一(yī)樣，兒(ér)童的(de♥≤)網站(zhàn)鮮明(míng)、快(kuài)樂(yuè)、喜愛(π•≤ài)等為(wèi)一(yī)體(tǐ)，可π₽✘(kě)以搭配卡通(tōng)、動植物(wù)照(zhào)片等等，加以設σ‌πε計(jì)師(shī)的(de)巧妙搭配和(hé)布局，最後，一(yī→σ‍)個(gè)好(hǎo)的(de)成功的(de)案例™®≥作(zuò)品出台了(le)，今天邯鄲網站(zhàn)建設首創網絡小(xiǎo)編來(lái)和(hé)大(dà)家(jiā←÷)一(yī)塊探討(tǎo)學習(xí)下(xià)兒(ér)童網¶<‌≈站(zhàn)的(de)設計(jì)概念♠↔和(hé)手法。

　　一(yī)、溫馨而柔和(hé)

　　高(gāo)亮(liàng)度，低(dī)飽←₹和(hé)度的(de)黃(huáng)色和(hé)綠(lǜ§÷←¶)色色彩營造出柔和(hé)溫馨的(de)氣氛，重 ↕'要(yào)信息部分(fēn)用(yòng)飽和(hé)度較高(gāo)一(y™§​ī)些(xiē)的(de)綠(lǜ)色和(hé)紅>§™(hóng)色跳(tiào)出。而背景中随機(jī)大(dà)小(xi‌₹$ǎo)的(de)圓形疊加增加夢幻、可(kě)愛(ài)的(de)氛圍。其餘←λΩ的(de)設計(jì)元素，例如(rú)雲朵般的(de)曲線邊緣、log¥πφ&o和(hé)導航的(de)針腳線、導航條背景≤×αλ的(de)大(dà)頭針、寶寶日(rì)記的(de)貼紙(zh<♠σǐ)、寶寶照(zhào)片吊牌、以及文(wén)字标題的(d‌Ω e)手寫字體(tǐ)都(dōu)圍繞著(zhe)整個(gè↕$)設計(jì)風(fēng)格來(lái)運用(yòng)，營造出整體(‍‍tǐ)溫馨的(de)氣氛。

　　二、萬物(wù)複蘇的(de)春天來(lái)了(le)

　　這(zhè)個(gè)設計(jì)看(kàn)上( "&€shàng)去(qù)也(yě)是(shì)偏柔和(¶∞hé)的(de)風(fēng)格，像是(shì)剛剛到(dà₽♦✘Ωo)來(lái)的(de)春天，到(dào)處都(dō"'¶u)是(shì)嫩綠(lǜ)的(de)顔色。色彩方案上(sh←÷àng)使用(yòng)了(le)兩種高(≥¶gāo)亮(liàng)度、中低(dī) σφ飽和(hé)度的(de)黃(huáng)色和(hé)綠 ♥☆≈(lǜ)色的(de)搭配，導航也(yě)用(yò™‌ng)了(le)連續的(de)雲朵狀的(de)弧形和(hé)手寫的(φα±♦de)字體(tǐ)，增加可(kě)愛(ài)溫馨的(de)氛圍。主視 ≥↕♠(shì)覺的(de)插畫(huà)對(duì)于整個(gè)設計(jì∏☆ )氛圍的(de)提升起到(dào)了(le)非常重要(yào)的(de®♥)作(zuò)用(yòng)，挂在樹(shù)上(∑↑™↓shàng)的(de)條幅寫上(shàng)了(le)∞Ω♦博客的(de)Logo，增加了(le)趣味。但(dàn✘α ₽)是(shì)布局上(shàng)類似于頁$↔面似的(de)方方正正的(de)布局卻是¶±(shì)中規中矩，缺少(shǎo)了(le)創意和(hé)突破。

　　三、色彩鮮豔、陽光(guāng)明(míng)媚的(de&‍×)春天

　　色彩飽和(hé)度和(hé)亮(l₽✔iàng)度非常高(gāo)的(de)天空(kōn$¥g)、雲朵、山(shān)峰、太陽、草(cǎo)地(↔↕αdì)以及各種卡通(tōng)動植物(wù)構成的(de)插畫γ✔(huà)背景是(shì)營造整體(tǐ)氣氛的(de)最主要(y↕♣π$ào)的(de)元素。為(wèi)了(le)讓背景₽  融合與整體(tǐ)設計(jì)之中，log×‍o的(de)條幅被小(xiǎo)鳥銜著(zhe)挂在空(¥£≠φkōng)中，飛(fēi)艇拉著(zhe)搜索框也(yě)漂浮在藍(lán)天εσ♥之上(shàng)。主內(nèi)容區(qū)左←÷側的(de)水(shuǐ)彩墨迹和(hé)手印、右側飛(fēi)躍而出的(σ≈€≠de)動感的(de)星形更增強了(le)歡樂(yuè)、可(kě)愛( <ài)的(de)氛圍。雲朵狀的(de)導航條Ωφ和(hé)可(kě)愛(ài)風(fēng)¥&格的(de)手寫文(wén)字雖然略顯粗糙，但(dàn)ε 是(shì)依然延續了(le)同樣的(de)設計(jì)風(fēng)>↕格。主內(nèi)容區(qū)兩張陽光(guāng)明(™φ©♣míng)媚、充滿歡笑(xiào)的(de)家(jiā)庭照(zhào)片更是£₽‍≈(shì)讓人(rén)感覺春意盎然、暖意融↑σ™¥融。

　　四、清新柔和(hé)

　　大(dà)面積的(de)低(dī)飽和↓∑→(hé)度、高(gāo)亮(liàng)度、偏綠$α↑&(lǜ)一(yī)點的(de)藍(lán)色給了(le)這(z↓>φhè)個(gè)設計(jì)平靜(jìng)和(hé)清新柔和(hé)的(de☆•‍)心理(lǐ)感受。再配合粉色系的(de)紅(hóng)色、黃(huáng↕♥φ)色、綠(lǜ)色的(de)局部色彩，讓整個(gè)設計(jì)擺脫了(l↑♠©e)過于單調的(de)色彩方案。其它在這(zhè)個(g≠∑☆​è)設計(jì)中值得(de)關注的(de)的(de)設計(j✘<ì)元素有(yǒu)：1、類似于格子(zǐ)布紋的(de)背景材質β₽；2、雲朵狀的(de)主內(nèi)容區(qū)邊緣；3、logo、÷γ導航文(wén)字、标題的(de)手寫字體(tǐ)；4、曲線吊牌和(hé㱶‍)按鈕；5、各個(gè)內(nèi)容區(qū)♥←域添加的(de)低(dī)調的(de)插畫(huà)背景。

　　五、靈活的(de)布局

　　打破框架的(de)信息布局方式和(hé)衆多(δ∞←↑duō)細碎的(de)信息區(qū)塊是(shì)這(zhè)個(gè)設計(™∏jì)給人(rén)的(de)第一(yī)印象，不(bù>¶)同信息區(qū)域的(de)不(bù)同設計(jì)方式讓人ε‍​(rén)産生(shēng)探索的(de)欲望。可(kě)愛(ài)的(✘φ©de)風(fēng)格貫穿于整個(gè)頁面，白(bδ €✘ái)色和(hé)高(gāo)飽和(hé)度以及亮±∏α♦(liàng)度的(de)綠(lǜ)色、橙色搭配又(yòu)π'給了(le)頁面清新的(de)感受。手繪風← ±(fēng)格的(de)插畫(huà)是(shì)兒(ér)童♦↕←網站(zhàn)中不(bù)可(kě)或缺的(de¥♣✔±)元素，非常能(néng)夠調動網站(zhàn)的(de)整個(gè)氣氛 ←✔。圓形以及大(dà)圓角的(de)邊框設計(jì)樣式也(yě)契合了 ‌÷γ(le)整個(gè)頁面的(de)風(fēng)格。不(b←§→ù)斷出現(xiàn)的(de)吊牌、打孔日(rì)曆的(δ"de)設計(jì)相(xiàng)互呼應，并且起到↔ε←(dào)了(le)劃分(fēn)各個(gè)信息區(qū)域的(deγ↑←)功能(néng)性作(zuò)用(yòng)。最為(wèi)重α‍§要(yào)的(de)是(shì)，這(zhè)個(gè)設計(jì)擺  ‌→脫了(le)前面幾個(gè)設計(jì)主內(nèi)♥σ♠∞容區(qū)大(dà)框架的(de)限制(↑ ¶zhì)，布局上(shàng)更為(wèi)自(¶ ♦±zì)由，作(zuò)為(wèi)兒(é <r)童網站(zhàn)來(lái)說(shuō)，這(zhè)φ‍δ•是(shì)需要(yào)這(zhè)樣的(de)創意方式↔‍。

　　六、熱(rè)烈的(de)氣氛

　　這(zhè)是(shì)一(yī)個(gè)氣氛相(αα♠↔xiàng)當足的(de)全Flash韓文(wé‍♦₩n)站(zhàn)點。氣氛的(de)營造和(hé)黃(hu★™áng)色以及橙色的(de)大(dà)面積使用(yòng)有(yǒu)著(z≈ ©>he)直接的(de)關系。網站(zhàn)建設雖然主色調是(s ™∞•hì)這(zhè)兩種顔色，但(dàn)是(shì)卻¶♥☆并不(bù)僅限于這(zhè)兩種色彩的(de¥​≥‌)使用(yòng)，粉紅(hóng)色、紫色、藍(lán)✘πγ色、綠(lǜ)色也(yě)都(dōu)出現(xiàn)在了(l₹<e)這(zhè)個(gè)設計(jì)中，但(dàn)是(shì)色彩比∑×例上(shàng)來(lái)說(shuō)，✔₽它們要(yào)少(shǎo)得(de)多(duō)，所以能(néng)做÷∑(zuò)到(dào)在豐富色彩方案的(de)同時(sΩφ™hí)又(yòu)不(bù)喧賓奪主，沖​≈∞淡或者相(xiàng)悖于整體(tǐ)的(de)氣氛。整個(gè)頁面沒有≥&Ω(yǒu)完全填充為(wèi)黃(huáng)色Ω ，底部頁腳部分(fēn)的(de)白(bái)色既給類似于打開(kāi)的(d≥€$>e)賀卡的(de)主視(shì)覺提供了(le)穩固的(de)水(sφ$¥≠huǐ)平面，也(yě)給整個(gè)設計(jγ©ì)增加透氣的(de)心理(lǐ)感受。大(dà)面積的(de)漸變黃(h♥→uáng)色背景中疊加了(le)卡通(tōng)圖案，增添了(™≥‌ le)設計(jì)層次，營造了(le)設計(jì§ ↔•)的(de)基調。Logo多(duō)色≈σΩ§彩的(de)拼圖方案和(hé)背景的(de)拼圖圖案相(xi₽ →♣àng)呼應，向下(xià)順延視(shì)↕‍線的(de)大(dà)圓角吊牌作(zuò)為(wèi)導航的(de)設計♦¶​ (jì)樣式，并使用(yòng)了(le)手寫的(de)卡通(t→&ōng)字體(tǐ)，右邊相(xiàngφλ)關活動內(nèi)容的(de)圓形吊牌也(yě)采用(yòng)↑•≠了(le)類似的(de)設計(jì)。可(kě)以★ α觀察到(dào)，圓角的(de)白(bái)色描邊在這(zh ₹è)個(gè)設計(jì)中重複出現(xiàn₹ )，可(kě)以作(zuò)為(wèi)關于兒(ér)童的(®  ≈de)網站(zhàn)設計(jì)的(de)細節考量。

　　七、清新淡雅的(de)東(dōng)方風(fēng)格

　　大(dà)面積的(de)白(bái)色加上( φ©shàng)暈開(kāi)的(de)水(shuǐ)彩背景↑≥<$以及主視(shì)覺部分(fēn)溫馨的(de)家(jiā)庭照(zhào)片×α★使得(de)這(zhè)個(gè)設計(jì)帶給人(rén)柔和↓'(hé)、清新的(de)感受。頁面上(s♠×hàng)的(de)元素，例如(rú)導航等沒有(yǒu)做(z→☆↔±uò)過多(duō)的(de)修飾，這(zhè)正是( αshì)這(zhè)個(gè)設計(jì)大(dà)膽的(de)地(dì)方，α₩而我們通(tōng)常的(de)想法卻是(shì)不(bù)加點 ∑圖層樣式的(de)效果就(jiù)會(huì)覺得(de)拿(ná)不(Ω₽bù)出手，覺得(de)這(zhè)就(jiù)不(bù)是(s  hì)設計(jì)。原因是(shì)我們頭腦(nǎo)中沒有(φφδ"yǒu)設計(jì)的(de)大(dà)方向所在，完全是 ‍π<(shì)被慣性盲目的(de)驅使著(zhe)往前走，最後設計(jì)成什(s↓•hén)麽樣子(zǐ)，走到(dào)哪裡(lǐ)完全沒有(yǒu)≠≈ ​概念。而這(zhè)個(gè)設計(jì)教會(huì)了(le)φ÷₩我們更大(dà)尺度的(de)設計(jì)思想，讓我們嘗試不(bù)同 •∞的(de)設計(jì)方法，在設計(jì)上(shàng)走的(de✔₹‍)更遠(yuǎn)一(yī)些(xiē)。

　　八、前期創意的(de)重要(yào)

　　藍(lán)色的(de)背景作(zuò)為(wèi)玩(wán)具陳列♠•€‍的(de)展廳和(hé)主信息區(qū)域的(dδ≤↔e)色彩形成鮮明(míng)的(de)對(duì)比，讓主信息區(∑β&‌qū)域從(cóng)背景中跳(tiào)出來(lá&‌i)。類似于打開(kāi)的(de)玩(wán)具盒子(zǐ)的(¶♦®de)創意既和(hé)網站(zhàn)主題相(xi≠ àng)關，又(yòu)增添了(le)更多(duō$☆∏β)的(de)趣味，而這(zhè)是(shì)在動手¥‍開(kāi)始做(zuò)具體(tǐ)設計(jì)之前完成的(d↑ ☆≥e)創意。所以要(yào)設計(jì)一(yī)個(gè♦÷∏©)網站(zhàn)，在打開(kāi)Ph↔ ®otoshop之前的(de)工(gōng)作(zuò)其實對(duì) >于設計(jì)的(de)走向起到(dào)非常重要(yào)的(de)作(∞ zuò)用(yòng)。這(zhè)部分(fēn)的(de)內(nèiφ♦♦)容包括研究階段以及畫(huà)草(cǎo)圖，這(zhè)是(sh♣♦ì)要(yào)設計(jì)一(yī)個(gè)優秀的<₽ (de)網站(zhàn)必不(bù)可(kě)少(shǎo​€<↑)的(de)工(gōng)作(zuò)。

　　九、安靜(jìng)的(de)色彩方案

　　這(zhè)是(shì)一(yī)個(gè)黃(huáng)色、橙色到¥→(dào)棕色色彩方案的(de)設計(jì)案例。基本屬于™ ββ同一(yī)色相(xiàng)、不(bù)§¶∞♦同層次色彩的(de)搭配，所以整體(tǐ)上(shàng)相(xiàng)較于₹™&<多(duō)種跳(tiào)躍較大(dà)的(d↕∑e)色彩方案來(lái)講，氛圍會(huì)安靜(jìng)一(yīε∑®)些(xiē)。由于此網站(zhàn)的(de)業(yè)務是(shì)提供✘≠嬰幼兒(ér)的(de)營養餐，所以暖色系的(de)平靜(jì₹​‌ng)色色彩方案反而會(huì)更适合一(yī)些(xiē)。

　　十、下(xià)半部分(fēn)稍顯破碎

　　多(duō)種高(gāo)亮(liàng)度和(hé)飽和(♠₽'‌hé)度的(de)色彩的(de)應用(yòn€‌g)依然是(shì)兒(ér)童網站(zhàn)✔✔設計(jì)中最常見(jiàn)到(dà☆★o)的(de)思路(lù)。此網站(zhàn)≠§→主頁的(de)信息量比較大(dà)，主視(sh​↕♣¥ì)覺以上(shàng)的(de)部分(fēn)結構清晰，視(s'‌​hì)覺感受不(bù)錯(cuò)，但(dàn)是(s‍‍≠hì)主視(shì)覺以下(xià)的(de)部分(fē≠ πn)欄目過多(duō)，組織的(de)不(bù)夠清晰，顯得(de&←)有(yǒu)些(xiē)破碎。”Play&rdq×¥™uo;、”Art”、&r≤®dquo;Music”和(hé)”Familyπ→•”四個(gè)并列的(de)闆塊如(rú)果在視(shì)覺上(φ¶δ→shàng)做(zuò)到(dào)更為(wèi)清晰的(dΩ↓±e)劃分(fēn)，标題文(wén)字跳(tiào)出正文(wén)文♦★(wén)字的(de)包圍可(kě)能(néng)視(shì)覺效果更☆ '好(hǎo)。但(dàn)是(shì)可(kě)以看(k•®♣"àn)出設計(jì)師(shī)在主要(yào)信息區(qū)域使用(yòng£≈λ↔)白(bái)色以及亮(liàng)度較高(gāo)的(de)灰色和(h∑≥é)多(duō)種色彩搭配，試圖營造出清爽、幹淨的(de)氛圍。隻是(shì)​₩©在信息的(de)組織和(hé)視(shìπ☆£)覺呈現(xiàn)上(shàng)做(zuò)的(de)還(hái)不(bù←$)夠，可(kě)以有(yǒu)更為(wèi)深入和∑≥λ(hé)思考。