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)畢竟針對(duì)的(de)群體(tǐ₩σ)不(bù)一(yī)樣，兒(ér)童的(de)網站(zhàn)鮮明(mín≈♣$g)、快(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ò)品出台了(l↔↕±<e)，今天
邯鄲網站(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ón®σ∑✘g)色跳(tiào)出。而背景中随機(jī)大(dà)小(xiǎo)的(₩™de)圓形疊加增加夢幻、可(kě)愛(ài)σ©的(de)氛圍。其餘的(de)設計(jì)元素，例如(rú€©™)雲朵般的(de)曲線邊緣、logo和(hé)導航α¥的(de)針腳線、導航條背景的(de)大φε≤(dà)頭針、寶寶日(rì)記的(de)貼紙(↔β ↑zhǐ)、寶寶照(zhào)片吊牌、以及文(wén)字标題的(de)$× 手寫字體(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é)亮(liàng)度非常≥←高(gāo)的(de)天空(kōng)、雲朵、¥©山(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ū)左側的(d>∏$e)水(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)這(zhè)個(gè)設計(jì)平靜(jìng)和★✔•λ(hé)清新柔和(hé)的(de)心理(וεlǐ)感受。再配合粉色系的(de)紅(hóng)色、"≤β€黃(huáng)色、綠(lǜ)色的(de)局部色彩，讓整個(gè)設計(jλì)擺脫了(le)過于單調的(de)色彩方案。其它在這≈×(zhè)個(gè)設計(jì)中值得(d≥λ∏ e)關注的(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à)圓角的(d✔ ≤e)邊框設計(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)著(zhe)直接的(de)關系。網站(zhàn)建₩"↕₹設雖然主色調是(shì)這(zhè)兩種顔色，但(dàn)是(sh∑₽€ì)卻并不(bù)僅限于這(zhè)兩種±≈¥ 色彩的(de)使用(yòng)，粉紅(hón→₽Ω≤g)色、紫色、藍(lán)色、綠(lǜ)色也(yě)都(dō≈↔↑¶u)出現(xiàn)在了(le)這(zhè)個(gè)設計(≠ε¥jì)中，但(dàn)是(shì)色彩比例上(shàng)來(l'σ♦ái)說(shuō)，它們要(yào)少(shǎo)得(de)¶♣♦多(duō)，所以能(néng)做(zuò)到(dào)在豐富色彩方案的↑↕¥φ(de)同時(shí)又(yòu)不(bù)喧賓奪主，沖淡或者相(xi≤σ↓àng)悖于整體(tǐ)的(de)氣氛。整個(gè)頁¥ α<面沒有(yǒu)完全填充為(wèi)黃(huáng)★Ω色，底部頁腳部分(fēn)的(de)白(bái)色π←'既給類似于打開(kāi)的(de)賀卡的(dβ"e)主視(shì)覺提供了(le)穩固的(de)水(shuǐ)平面，也(y∞≤★↓ě)給整個(gè)設計(jì)增加透氣的παβ>(de)心理(lǐ)感受。大(dà)面積的(de)♥∞₹漸變黃(huá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)感受。頁面上(shàng)的(↓>λ☆de)元素，例如(rú)導航等沒有(yǒu)做(♣α₽"zuò)過多(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ù)是(shì)↓♣$設計(jì)。原因是(shì)我們頭腦(nǎo)中沒₽&有(yǒu)設計(jì)的(de)大(dà)方向所在，完全是(s₩€"hì)被慣性盲目的(de)驅使著(zhe)往前β♣αγ走，最後設計(jì)成什(shén)麽樣子(zǐ)，走到(dào)哪裡(l¥δǐ)完全沒有(yǒu)概念。而這(zhè)個(☆>"gè)設計(jì)教會(huì)了(le)§↑>我們更大(dà)尺度的(de)設計(jì)思想，讓我們嘗試不(bù)同的(dπ<e)設計(jì)方法，在設計(jì)上(shàng)走的(de)更遠(yuσπεǎn)一(yī)些(xiē)。
八、前期創意的(de)重要(yào)
藍(lán)色的(de)背景作(zuò)為(wèi)♠♥玩(wán)具陳列的(de)展廳和(hé)主信息區(qū)域的(de)色彩 ∑形成鮮明(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ì)之前完成的(de)創意。所以要(yào)設計∑♠'(jì)一(yī)個(gè)網站(zhàn)，在打開(kāi)P★ ♥§hotoshop之前的(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à)的(de)色彩方案來(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òng)依然是(☆πshì)兒(ér)童網站(zhàn)設計(jì)中最常見(jiàn)到 λα(dào)的(de)思路(lù)。此網站(zhàn)主頁的(de)信息量比 €較大(dà)，主視(shì)覺以上(shàn≈≈≈±g)的(de)部分(fēn)結構清晰，視(shì)覺感受不(•÷×bù)錯(cuò)，但(dàn)是(shì)主↔₹®≥視(shì)覺以下(xià)的(de)部分(fēn)欄目過多(duō)，組織的™δ✔↓(de)不(bù)夠清晰，顯得(de)有(yǒu)些<★(xiē)破碎。”Play&rdqu♥ ≈'o;、”Art”、”✘λMusic”和(hé)”Fami•φ♦ly”四個(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én≥←g)視(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é)思考。÷₽£
