關(guān)于兒童類網(wǎng)站的視覺(jué)結(jié)構(gòu)布局設(shè)計(jì)的方法分析

2024-08-30 08:34:43

字體：大中小

供稿：網(wǎng)友

一、溫馨而柔和

兒童網(wǎng)站視覺(jué)結(jié)構(gòu)布局設(shè)計(jì)分析,PS教程,武林網(wǎng)

相關(guān)地址：http://www.web-designers.cn/post.aspx?id=2481
高亮度，低飽和度的黃色和綠色色彩營(yíng)造出柔和溫馨的氣氛，重要信息部分用飽和度較高一些的綠色和紅色跳出。而背景中隨機(jī)大小的圓形疊加增加夢(mèng)幻、可愛(ài)的氛圍。其余的設(shè)計(jì)元素，例如云朵般的曲線邊緣、logo和導(dǎo)航的針腳線、導(dǎo)航條背景的大頭針、寶寶日記的貼紙、寶寶照片吊牌、以及文字標(biāo)題的手寫字體都圍繞著整個(gè)設(shè)計(jì)風(fēng)格來(lái)運(yùn)用，營(yíng)造出整體溫馨的氣氛。
二、萬(wàn)物復(fù)蘇的春天來(lái)了
兒童網(wǎng)站視覺(jué)結(jié)構(gòu)布局設(shè)計(jì)分析,PS教程,武林網(wǎng)

網(wǎng)站地址：http://tf.dtbaker.com.au/preview/?theme=26&style=0
這個(gè)設(shè)計(jì)看上去也是偏柔和的風(fēng)格，像是剛剛到來(lái)的春天，到處都是嫩綠的顏色。色彩方案上使用了兩種高亮度、中低飽和度的黃色和綠色的搭配，導(dǎo)航也用了連續(xù)的云朵狀的弧形和手寫的字體，增加可愛(ài)溫馨的氛圍。主視覺(jué)的插畫對(duì)于整個(gè)設(shè)計(jì)氛圍的提升起到了非常重要的作用，掛在樹上的條幅寫上了博客的Logo，增加了趣味。但是布局上類似于頁(yè)面似的方方正正的布局卻是中規(guī)中矩，缺少了創(chuàng)意和突破。
三、色彩鮮艷、陽(yáng)光明媚的春天
兒童網(wǎng)站視覺(jué)結(jié)構(gòu)布局設(shè)計(jì)分析,PS教程,武林網(wǎng)

相關(guān)地址：http://themeforest.net/theme_previews/92492-kids-toys
色彩飽和度和亮度非常高的天空、云朵、山峰、太陽(yáng)、草地以及各種卡通動(dòng)植物構(gòu)成的插畫背景是營(yíng)造整體氣氛的最主要的元素。為了讓背景融合與整體設(shè)計(jì)之中，logo的條幅被小鳥銜著掛在空中，飛艇拉著搜索框也漂浮在藍(lán)天之上。主內(nèi)容區(qū)左側(cè)的水彩墨跡和手印、右側(cè)飛躍而出的動(dòng)感的星形更增強(qiáng)了歡樂(lè)、可愛(ài)的氛圍。云朵狀的導(dǎo)航條和可愛(ài)風(fēng)格的手寫文字雖然略顯粗糙，但是依然延續(xù)了同樣的設(shè)計(jì)風(fēng)格。主內(nèi)容區(qū)兩張陽(yáng)光明媚、充滿歡笑的家庭照片更是讓人感覺(jué)春意盎然、暖意融融。
四、清新柔和
兒童網(wǎng)站視覺(jué)結(jié)構(gòu)布局設(shè)計(jì)分析,PS教程,武林網(wǎng)

相關(guān)地址：http://tf.dtbaker.com.au/preview/?theme=22
大面積的低飽和度、高亮度、偏綠一點(diǎn)的藍(lán)色給了這個(gè)設(shè)計(jì)平靜和清新柔和的心理感受。再配合粉色系的紅色、黃色、綠色的局部色彩，讓整個(gè)設(shè)計(jì)擺脫了過(guò)于單調(diào)的色彩方案。其它在這個(gè)設(shè)計(jì)中值得關(guān)注的的設(shè)計(jì)元素有：1、類似于格子布紋的背景材質(zhì);2、云朵狀的主內(nèi)容區(qū)邊緣;3、logo、導(dǎo)航文字、標(biāo)題的手寫字體;4、曲線吊牌和按鈕;5、各個(gè)內(nèi)容區(qū)域添加的低調(diào)的插畫背景。
五、靈活的布局
兒童網(wǎng)站視覺(jué)結(jié)構(gòu)布局設(shè)計(jì)分析,PS教程,武林網(wǎng)

網(wǎng)站地址：http://www.freesam.com/
打破框架的信息布局方式和眾多細(xì)碎的信息區(qū)塊是這個(gè)設(shè)計(jì)給人的第一印象，不同信息區(qū)域的不同設(shè)計(jì)方式讓人產(chǎn)生探索的欲望。可愛(ài)的風(fēng)格貫穿于整個(gè)頁(yè)面，白色和高飽和度以及亮度的綠色、橙色搭配又給了頁(yè)面清新的感受。手繪風(fēng)格的插畫是兒童網(wǎng)站中不可或缺的元素，非常能夠調(diào)動(dòng)網(wǎng)站的整個(gè)氣氛。圓形以及大圓角的邊框設(shè)計(jì)樣式也契合了整個(gè)頁(yè)面的風(fēng)格。不斷出現(xiàn)的吊牌、打孔日歷的設(shè)計(jì)相互呼應(yīng)，并且起到了劃分各個(gè)信息區(qū)域的功能性作用。最為重要的是，這個(gè)設(shè)計(jì)擺脫了前面幾個(gè)設(shè)計(jì)主內(nèi)容區(qū)大框架的限制，布局上更為自由，作為兒童網(wǎng)站來(lái)說(shuō)，這是需要這樣的創(chuàng)意方式。
六、熱烈的氣氛
兒童網(wǎng)站視覺(jué)結(jié)構(gòu)布局設(shè)計(jì)分析,PS教程,武林網(wǎng)

網(wǎng)站地址：http://kidsplus.shinhan.com/
這是一個(gè)氣氛相當(dāng)足的全Flash韓文站點(diǎn)。氣氛的營(yíng)造和黃色以及橙色的大面積使用有著直接的關(guān)系。雖然主色調(diào)是這兩種顏色，但是卻并不僅限于這兩種色彩的使用，粉紅色、紫色、藍(lán)色、綠色也都出現(xiàn)在了這個(gè)設(shè)計(jì)中，但是色彩比例上來(lái)說(shuō)，它們要少得多，所以能做到在豐富色彩方案的同時(shí)又不喧賓奪主，沖淡或者相悖于整體的氣氛。整個(gè)頁(yè)面沒(méi)有完全填充為黃色，底部頁(yè)腳部分的白色既給類似于打開的賀卡的主視覺(jué)提供了穩(wěn)固的水平面，也給整個(gè)設(shè)計(jì)增加透氣的心理感受。大面積的漸變黃色背景中疊加了卡通圖案，增添了設(shè)計(jì)層次，營(yíng)造了設(shè)計(jì)的基調(diào)。Logo多色彩的拼圖方案和背景的拼圖圖案相呼應(yīng)，向下順延視線的大圓角吊牌作為導(dǎo)航的設(shè)計(jì)樣式，并使用了手寫的卡通字體，右邊相關(guān)活動(dòng)內(nèi)容的圓形吊牌也采用了類似的設(shè)計(jì)。可以觀察到，圓角的白色描邊在這個(gè)設(shè)計(jì)中重復(fù)出現(xiàn)，可以作為關(guān)于兒童的網(wǎng)站設(shè)計(jì)的細(xì)節(jié)考量。
七、清新淡雅的東方風(fēng)格
兒童網(wǎng)站視覺(jué)結(jié)構(gòu)布局設(shè)計(jì)分析,PS教程,武林網(wǎng)

網(wǎng)站地址：http://www.agabangncompany.com/cha/index.jsp
大面積的白色加上暈開的水彩背景以及主視覺(jué)部分溫馨的家庭照片使得這個(gè)設(shè)計(jì)帶給人柔和、清新的感受。頁(yè)面上的元素，例如導(dǎo)航等沒(méi)有做過(guò)多的修飾，這正是這個(gè)設(shè)計(jì)大膽的地方，而我們通常的想法卻是不加點(diǎn)圖層樣式的效果就會(huì)覺(jué)得拿不出手，覺(jué)得這就不是設(shè)計(jì)。原因是我們頭腦中沒(méi)有設(shè)計(jì)的大方向所在，完全是被慣性盲目的驅(qū)使著往前走，最后設(shè)計(jì)成什么樣子，走到哪里完全沒(méi)有概念。而這個(gè)設(shè)計(jì)教會(huì)了我們更大尺度的設(shè)計(jì)思想，讓我們嘗試不同的設(shè)計(jì)方法，在設(shè)計(jì)上走的更遠(yuǎn)一些。
八、前期創(chuàng)意的重要
兒童網(wǎng)站視覺(jué)結(jié)構(gòu)布局設(shè)計(jì)分析,PS教程,武林網(wǎng)

網(wǎng)站地址：http://www.toysrus.co.kr/index.jsp
藍(lán)色的背景作為玩具陳列的展廳和主信息區(qū)域的色彩形成鮮明的對(duì)比，讓主信息區(qū)域從背景中跳出來(lái)。類似于打開的玩具盒子的創(chuàng)意既和網(wǎng)站主題相關(guān)，又增添了更多的趣味，而這是在動(dòng)手開始做具體設(shè)計(jì)之前完成的創(chuàng)意。所以要設(shè)計(jì)一個(gè)網(wǎng)站，在打開Photoshop之前的工作其實(shí)對(duì)于設(shè)計(jì)的走向起到非常重要的作用。這部分的內(nèi)容包括研究階段以及畫草圖，這是要設(shè)計(jì)一個(gè)優(yōu)秀的網(wǎng)站必不可少的工作。
九、安靜的色彩方案
兒童網(wǎng)站視覺(jué)結(jié)構(gòu)布局設(shè)計(jì)分析,PS教程,武林網(wǎng)

網(wǎng)站地址：http://www.babymeal.co.kr/
這是一個(gè)黃色、橙色到棕色色彩方案的設(shè)計(jì)案例。基本屬于同一色相、不同層次色彩的搭配，所以整體上相較于多種跳躍較大的色彩方案來(lái)講，氛圍會(huì)安靜一些。由于此網(wǎng)站的業(yè)務(wù)是提供嬰幼兒的營(yíng)養(yǎng)餐，所以暖色系的平靜色色彩方案反而會(huì)更適合一些。
十、下半部分稍顯破碎
兒童網(wǎng)站視覺(jué)結(jié)構(gòu)布局設(shè)計(jì)分析,PS教程,武林網(wǎng)

網(wǎng)站地址：http://www.gymboree.co.kr/
多種高亮度和飽和度的色彩的應(yīng)用依然是兒童網(wǎng)站設(shè)計(jì)中最常見到的思路。此網(wǎng)站主頁(yè)的信息量比較大，主視覺(jué)以上的部分結(jié)構(gòu)清晰，視覺(jué)感受不錯(cuò)，但是主視覺(jué)以下的部分欄目過(guò)多，組織的不夠清晰，顯得有些破碎。”Play”、”Art”、”Music”和”Family”四個(gè)并列的板塊如果在視覺(jué)上做到更為清晰的劃分，標(biāo)題文字跳出正文文字的包圍可能視覺(jué)效果更好。但是可以看出設(shè)計(jì)師在主要信息區(qū)域使用白色以及亮度較高的灰色和多種色彩搭配，試圖營(yíng)造出清爽、干凈的氛圍。只是在信息的組織和視覺(jué)呈現(xiàn)上做的還不夠，可以有更為深入和思考。

上一篇：關(guān)于網(wǎng)站里的微博組件改版的介紹詳談(圖文)

下一篇：對(duì)于圖片社交網(wǎng)站UI應(yīng)用的對(duì)比分析(圖)