駱駝服飾旗艦店網(wǎng)頁(yè)設(shè)計(jì)

李軍

摘 要：網(wǎng)絡(luò)視覺(jué)設(shè)計(jì)區(qū)別于其他傳統(tǒng)的平面媒體，對(duì)于報(bào)紙、雜志、圖書，設(shè)計(jì)時(shí)要考慮其特定的空間限制，但對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)不存在限定的概念。不過(guò)兩者所遵循的設(shè)計(jì)原理是一致的。要將所有要表現(xiàn)的元素有層次和邏輯性的進(jìn)行排列，符合人的視覺(jué)流程。所以優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)第一點(diǎn)要考慮的是內(nèi)容上的精益求精。這就需要通過(guò)第二點(diǎn)對(duì)內(nèi)容合理有效的視覺(jué)編排來(lái)實(shí)現(xiàn)。本次畢業(yè)設(shè)計(jì)圍繞著色彩、圖像、文字三大部分出發(fā)來(lái)對(duì)網(wǎng)頁(yè)的編排進(jìn)行設(shè)計(jì)。從圖片的處理，把控整體的色調(diào)和構(gòu)圖來(lái)為觀者營(yíng)造出一種輕松愉悅的視覺(jué)環(huán)境，讓他們有一種全身心的享受與共鳴。使其在享受美感的同時(shí)，接受設(shè)計(jì)師所要傳達(dá)的信息。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；視覺(jué)元素；構(gòu)成要素；有效性

1 駱駝服飾旗艦店總體說(shuō)明

1.1駱駝服飾旗艦店網(wǎng)頁(yè)設(shè)計(jì)的總體規(guī)劃

網(wǎng)頁(yè)設(shè)計(jì)是通過(guò)很多的設(shè)計(jì)領(lǐng)域啟迪、順應(yīng)時(shí)代要求而產(chǎn)生的一門新的藝術(shù)設(shè)計(jì)類型，它既有與傳統(tǒng)的設(shè)計(jì)藝術(shù)相同的美學(xué)規(guī)律，又有其自己的特色，具有相同的智慧和激情的表達(dá)方式，它是需要用頭腦和心來(lái)創(chuàng)作的。同時(shí)“視覺(jué)設(shè)計(jì)”以功能和美學(xué)為載體而創(chuàng)作。它分成兩個(gè)主要領(lǐng)域：設(shè)計(jì)和風(fēng)格?！霸O(shè)計(jì)”是為了符合一個(gè)特定的目標(biāo)；“風(fēng)格”是為了引起消費(fèi)者的注意力。[1]本次的設(shè)計(jì)不僅僅是為了迎合商業(yè)銷售的用途，有的設(shè)計(jì)將大部分的注意力放在了如何讓作品引人注目，為了美感而忽視了功能，或者為了功能而忽視了美感的設(shè)計(jì)都是不成功的。在網(wǎng)頁(yè)設(shè)計(jì)中，首先要考慮技術(shù)實(shí)現(xiàn)的問(wèn)題，然后才是如何讓網(wǎng)頁(yè)美觀、視覺(jué)效果的統(tǒng)一以及網(wǎng)頁(yè)整體結(jié)構(gòu)的合理性。本次設(shè)計(jì)將把以上因素有效的結(jié)合在一起，依照編排中的三大構(gòu)成和形態(tài)構(gòu)成進(jìn)行網(wǎng)頁(yè)規(guī)劃。

1.2網(wǎng)頁(yè)界面設(shè)計(jì)中的思考

網(wǎng)頁(yè)是通過(guò)視覺(jué)元素吸引受眾并進(jìn)而實(shí)現(xiàn)信息內(nèi)容的傳達(dá)，為了使網(wǎng)頁(yè)獲得最大的視覺(jué)傳達(dá)功能，使網(wǎng)頁(yè)真正成為可讀強(qiáng)性而且新穎的互聯(lián)網(wǎng)載體，網(wǎng)頁(yè)的設(shè)計(jì)必須適應(yīng)人們視覺(jué)流向的心理和生理的特點(diǎn)，由此確定各種視覺(jué)構(gòu)成元素之間的關(guān)系和秩序因此，在網(wǎng)頁(yè)信息的表達(dá)上，靈活而合理地運(yùn)用視覺(jué)流程和最佳視域，組織好自然流暢的視覺(jué)導(dǎo)向，準(zhǔn)確的利用各個(gè)視覺(jué)元素的功能與形式美，將直接影響到信息傳達(dá)的準(zhǔn)確與有效性。[2]優(yōu)秀的網(wǎng)頁(yè)界面設(shè)計(jì)簡(jiǎn)單明了，好的設(shè)計(jì)需要服務(wù)于功能，人們會(huì)在使用功能的同時(shí)慢慢的接受設(shè)計(jì)。

1.3設(shè)計(jì)預(yù)期取得的效果

本次的設(shè)計(jì)將構(gòu)架好網(wǎng)頁(yè)內(nèi)容。在情感上實(shí)現(xiàn)戶外用戶群的精準(zhǔn)定位，符合他們的使用體驗(yàn)。整體上用戶能對(duì)信息溝通順暢，保持體驗(yàn)統(tǒng)一，信息傳達(dá)快速，細(xì)節(jié)上局部的設(shè)計(jì)會(huì)有貼心令人驚喜的體驗(yàn)。體現(xiàn)駱駝的品牌形象，是其元素保持延續(xù)和統(tǒng)一，在共性的基礎(chǔ)上，給人耳目一新的感受。通過(guò)合理的劃分界面邏輯結(jié)構(gòu)，按照不同的功能與內(nèi)容邏輯進(jìn)行劃分，突出結(jié)構(gòu)主次。在注重客戶體驗(yàn)的時(shí)候增強(qiáng)用戶體驗(yàn)，提升老顧客的粘性，增加訪問(wèn)次數(shù)和提升寶貝停留時(shí)間。減少客戶流失，提高店鋪的轉(zhuǎn)化率，做好視覺(jué)營(yíng)銷，實(shí)現(xiàn)店鋪的整體盈利。

2 駱駝服飾旗艦店網(wǎng)頁(yè)策劃需求

2.1駱駝服飾旗艦店網(wǎng)頁(yè)策劃

創(chuàng)建于2005年的廣東駱駝服飾有限公司負(fù)責(zé)全權(quán)運(yùn)營(yíng)“CAMEL駱駝”品牌的發(fā)展。據(jù)介紹，駱駝品牌來(lái)源于人類途步靈感的象征意義，代表人們向往探索，渴望自由的心靈釋放。其倡導(dǎo)的是一種舒適自由，輕松享受的品牌文化，舒適休閑是其最深入人心的特色，在設(shè)計(jì)源頭就將產(chǎn)品組合和顧客形象搭配納入其中，注重設(shè)計(jì)感、服飾搭配和舒適性，在細(xì)節(jié)之處創(chuàng)造美感。駱駝品牌與其他服裝品牌主要差異在于產(chǎn)品多以自然、厚重為主，注重產(chǎn)品與時(shí)尚元素的結(jié)合，能夠?qū)r(shí)尚與休閑、高貴與精美、美觀與舒適等等元素融為一體，便于滿足消費(fèi)者的需求。[2]本次的設(shè)計(jì)將圍繞是樹立企業(yè)的形象，通過(guò)天貓這個(gè)平臺(tái)來(lái)為自己的產(chǎn)品和銷售業(yè)績(jī)做宣傳。

2.2客戶需求分析

對(duì)于駱駝的客戶分析得出，一是駱駝品牌的擁有者自身的定位在舒適休閑的自由之風(fēng)。產(chǎn)品會(huì)從服飾跨度到鞋包，這就要求設(shè)計(jì)風(fēng)格的多元。二是對(duì)于目標(biāo)消費(fèi)群體分析得出，一般為年齡在18-50歲的都市男女，購(gòu)買力中上，受教育程度本科以上的戶外休閑人群。這些人群對(duì)于審美要求偏高，總結(jié)得出本次的畢業(yè)設(shè)計(jì)就圍繞著戶外、運(yùn)動(dòng)、簡(jiǎn)潔方向的點(diǎn)來(lái)完成。

2.3網(wǎng)頁(yè)中信息有效性傳達(dá)的分析

各種視覺(jué)元素在視覺(jué)語(yǔ)言中的位置不同，其作用也不同。由于它們是按照一定的規(guī)律和邏輯性排列組合起來(lái)的，如果破壞了這種規(guī)律與邏輯，視知覺(jué)就無(wú)法識(shí)別和接受。[3]因此，在視覺(jué)信息傳達(dá)時(shí)要依靠統(tǒng)一與對(duì)比、虛與實(shí)、大與小等形式手法，根據(jù)信息的順序?qū)⒁曈X(jué)元素進(jìn)行排列組合，從而產(chǎn)生強(qiáng)弱、主次等視覺(jué)語(yǔ)言的邏輯性。

3 駱駝服飾旗艦店網(wǎng)頁(yè)設(shè)計(jì)說(shuō)明

3.1導(dǎo)航的設(shè)計(jì)

導(dǎo)航在網(wǎng)站中起到了地圖的作用。根據(jù)人們的視覺(jué)流程從上到下、從左到右的規(guī)律在最頂部使顧客非常容易找到自己所看到，清楚的告訴了訪問(wèn)者自己所在網(wǎng)頁(yè)中的位置，如何到達(dá)正在尋找的信息以及其他還有哪些內(nèi)容可以瀏覽。在導(dǎo)航上是banner的設(shè)計(jì)，添加了駱駝的標(biāo)志，引導(dǎo)語(yǔ)的文案告訴消費(fèi)者駱駝品牌自身是美式休閑領(lǐng)導(dǎo)者同時(shí)也是全網(wǎng)銷量的冠軍，給顧客以品牌和品質(zhì)的保障。右側(cè)的優(yōu)惠券采用紅黃的顏色搭配，通過(guò)色彩上的差異進(jìn)行對(duì)比突出。見附錄圖A1-1 店招導(dǎo)航的設(shè)計(jì)

3.2新品分區(qū)的設(shè)計(jì)

3.2.1Banner的設(shè)計(jì)

Banner有三部分組成，產(chǎn)品、背景、文案。根據(jù)之前的分析，本張的設(shè)計(jì)是采用了左文右圖的購(gòu)物。在選圖的方面上，模特位于圖片的黃金分割點(diǎn)，在蔚藍(lán)的游泳池下即表達(dá)了春天的蓬勃朝氣，也傳遞這夏季涼爽的心境。整體的主色是偏向藍(lán)、綠色調(diào)。藍(lán)綠色的搭配不僅和諧，而且非常時(shí)尚，對(duì)顧客傳遞這熱烈、健康、激動(dòng)的信息。字體選用加粗的宋體和微軟雅黑，白色的字體顏色在藍(lán)色底下對(duì)比突出明顯，能讓顧客一眼看出是新品發(fā)布的主題。字體上細(xì)下粗，主次分明，形成對(duì)比，四方的構(gòu)圖十分穩(wěn)重，非常平衡。

3.2.2服飾店的分區(qū)設(shè)計(jì)

斜切式的構(gòu)圖使畫面顯得時(shí)尚，動(dòng)感活躍，在版式設(shè)計(jì)中，平衡感極為重要，左面模特的視線引導(dǎo)顧客在右側(cè)鞋子上，鞋子的構(gòu)圖是傾斜40度，在兩張圖片大小一樣的情況下，能形成很好的呼應(yīng)。

整體的背景色在頁(yè)面中起到了非常重要的作用，決定了頁(yè)面的整體印象。一是結(jié)合本身品牌印象進(jìn)行色彩選擇。會(huì)以藍(lán)、綠色系為主。綠色是自然界中植物的色彩，是戶外最大氣的顏色，它的轉(zhuǎn)調(diào)領(lǐng)域十分廣泛，搭配任何色彩都會(huì)顯得很漂亮。藍(lán)色對(duì)視覺(jué)的刺激較弱，能夠使人聯(lián)想到寬闊的海洋和蔚藍(lán)的天空，會(huì)使人變得心胸開闊、理智、博大，同時(shí)也是前衛(wèi)只會(huì)的象征。兩者的結(jié)合會(huì)使人聯(lián)想到平靜的湖水，有豁達(dá)、安靜、寬闊的感覺(jué)。是對(duì)品牌本身彰顯的自然與時(shí)尚最好的定義。它環(huán)抱著整個(gè)頁(yè)面，起到協(xié)調(diào)、支配整體的作用，淺藍(lán)色顏色明亮，使整體的色調(diào)也變得明亮。產(chǎn)品的的底色是灰白色的顏色選擇，能很好的與藍(lán)綠色調(diào)相配合，即增強(qiáng)了產(chǎn)品的感染力，同時(shí)也給人帶來(lái)輕盈、明快之感。

從針對(duì)的人群來(lái)說(shuō)，男性的特點(diǎn)是剛硬，所以在排版上中規(guī)中矩，通過(guò)不同的產(chǎn)品圖來(lái)多方位的展示產(chǎn)品。主要分成三版，左側(cè)是模特圖，簡(jiǎn)潔干凈，沒(méi)有任何文字添加；中側(cè)上面僅放置字體，大小和加粗的對(duì)比能給略死板的空間帶來(lái)一絲活躍的氛圍，下方的產(chǎn)品直接采用俯視圖，能很好的與左右側(cè)產(chǎn)品形成對(duì)比，表現(xiàn)差異，會(huì)將爆款主推的鞋子放在這個(gè)黃金位置。右側(cè)是三類鞋子的展現(xiàn)，統(tǒng)一的角度和大小有一定的規(guī)范。

4 結(jié)語(yǔ)

綜上所述：本次的設(shè)計(jì)主要從網(wǎng)頁(yè)中的視覺(jué)信息入手，站在顧客的角度，重點(diǎn)研究并設(shè)計(jì)了如何通過(guò)實(shí)際的設(shè)計(jì)來(lái)提高視覺(jué)信息傳遞效率的問(wèn)題。不僅僅是視覺(jué)審美方面的形式研究，更需要從人的生理結(jié)構(gòu)出發(fā)，結(jié)合心理機(jī)制的相關(guān)內(nèi)容進(jìn)行分析，同時(shí)也明確了在創(chuàng)作中最重要的是設(shè)計(jì)本身，而不是操作軟件。有了本次的思路，通過(guò)對(duì)駱駝服飾旗艦店的調(diào)查和分析，得出顧客所瀏覽網(wǎng)頁(yè)的主要需求并結(jié)合設(shè)計(jì)實(shí)例，分析存在問(wèn)題的具體體現(xiàn)和原因。預(yù)期本次的設(shè)計(jì)將會(huì)對(duì)銷售額的提升有很大的幫助，能夠?qū)崿F(xiàn)銷售平臺(tái)的最優(yōu)化模式，帶動(dòng)企業(yè)的利益持續(xù)增長(zhǎng)。不足之處需要通過(guò)顧客實(shí)際的評(píng)價(jià)和后臺(tái)數(shù)據(jù)的統(tǒng)計(jì)監(jiān)測(cè)得到本次設(shè)計(jì)的反饋。

參考文獻(xiàn)：

[1] 潘艷飛.網(wǎng)頁(yè)的色彩表現(xiàn)[J]. 美與時(shí)代（下半月）.2008（12）.

[2] 許金友.藝術(shù)與技術(shù)的完美結(jié)合——淺議網(wǎng)頁(yè)設(shè)計(jì)的特色[J]. 藝術(shù)與設(shè)計(jì)（理論）.2009（04）.

[3] 何麗萍.網(wǎng)頁(yè)的版式設(shè)計(jì)對(duì)信息傳遞的影響[J]. 上海工藝美術(shù). 2010（01）.

[4] 王小妍.點(diǎn)、線、面在網(wǎng)頁(yè)設(shè)計(jì)構(gòu)成元素中的應(yīng)用[J]. 美術(shù)教育研究.2011（07）.