電商網(wǎng)頁(yè)界面視覺(jué)設(shè)計(jì)元素解析

金镕基

摘 ? 要：隨著網(wǎng)絡(luò)購(gòu)物的日益普及，各大電商平臺(tái)紛紛在網(wǎng)站頁(yè)面的優(yōu)化上做足了功課，以增加客戶粘性及回購(gòu)率。電商頁(yè)面的視覺(jué)設(shè)計(jì)元素，是保障用戶在使用電商網(wǎng)頁(yè)時(shí)的舒適性，增強(qiáng)用戶體驗(yàn)的重要內(nèi)容。在本文中，將分析在電商網(wǎng)頁(yè)中的基礎(chǔ)文字表達(dá)、Tad標(biāo)簽、網(wǎng)頁(yè)導(dǎo)航、延展表單、logo、圖標(biāo)、配色、手機(jī)網(wǎng)頁(yè)等主要設(shè)計(jì)元素，以此優(yōu)化使用電商頁(yè)面的視覺(jué)設(shè)計(jì)。

關(guān)鍵詞：電商網(wǎng)頁(yè) ?視覺(jué)設(shè)計(jì) ?設(shè)計(jì)要素

中圖分類(lèi)號(hào)：TP393.0 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A ? ? ? ? ? ? ? ? ? ? ? 文章編號(hào)：1674-098X（2019）11（b）-0233-02

隨著現(xiàn)代網(wǎng)絡(luò)技術(shù)的發(fā)展與人們生活水平的提高，電子商務(wù)越來(lái)越受到人們的歡迎，而電商頁(yè)面作為用戶在進(jìn)行電商瀏覽過(guò)程中的主要內(nèi)容，其視覺(jué)設(shè)計(jì)的合理性是保障用戶視覺(jué)感官能夠獲得提升的有效途徑。為此需要綜合利用影響網(wǎng)頁(yè)視覺(jué)感官的設(shè)計(jì)元素來(lái)實(shí)現(xiàn)整體視覺(jué)設(shè)計(jì)效果的提升。

1 ?基礎(chǔ)文字表達(dá)

在電商網(wǎng)頁(yè)的界面設(shè)計(jì)元素中，文字是其中的基石部分，一個(gè)優(yōu)秀的文字設(shè)計(jì)與頁(yè)面排版能夠?qū)崿F(xiàn)吸引住用戶眼球，強(qiáng)化頁(yè)面設(shè)計(jì)附加功能的作用。但在對(duì)文字元素的實(shí)際應(yīng)用中應(yīng)當(dāng)注意的是，要確保文字能夠清晰可見(jiàn)，并且方便用戶進(jìn)行閱讀，把握好文字的間距、字距、字體以及文字排列方式，而后適當(dāng)采用一些具有變化或是藝術(shù)感的文字，使網(wǎng)頁(yè)界面看起來(lái)更加時(shí)尚且與商品的特點(diǎn)相互匹配。同時(shí)還要注意將促銷(xiāo)、打折等活動(dòng)區(qū)域的文字更加醒目，更加具有震撼力，讓用戶能夠第一時(shí)間注意到這些活動(dòng)頁(yè)面。并且需要注意對(duì)彩色字體的使用與控制，如果在頁(yè)面當(dāng)中濫用彩色字體會(huì)使整體頁(yè)面的視覺(jué)效果變得混亂無(wú)序，使用戶感到視覺(jué)疲勞，不僅起不到美化的效果，還會(huì)降低用戶的適應(yīng)體驗(yàn)[1]。

2 ?Tad標(biāo)簽

在電商網(wǎng)頁(yè)當(dāng)中，Tad標(biāo)簽是網(wǎng)頁(yè)當(dāng)中不可缺少的要素。通常在網(wǎng)頁(yè)設(shè)計(jì)中，標(biāo)簽都是通過(guò)垂直的方式進(jìn)行布置，并且應(yīng)當(dāng)避免標(biāo)簽的排列過(guò)于密集。而當(dāng)標(biāo)簽之間有重要性與關(guān)聯(lián)性的區(qū)別時(shí)，需要將標(biāo)簽按照重要性的大小進(jìn)行排列。并在標(biāo)簽過(guò)多時(shí)，將使用次數(shù)較低，或是相較之下并不重要的標(biāo)簽納入到“更多”選項(xiàng)當(dāng)中。同時(shí)，通過(guò)分組以及下拉菜單等形式還可以使標(biāo)簽的結(jié)構(gòu)性更強(qiáng)，方便用戶進(jìn)行瀏覽與使用。而在對(duì)標(biāo)簽進(jìn)行設(shè)計(jì)的過(guò)程中，要注意通過(guò)設(shè)置將用戶選種的標(biāo)簽與未被選種的標(biāo)簽進(jìn)行區(qū)分，一般可以通過(guò)對(duì)背景色的加深或是便是實(shí)現(xiàn)這種情況，并盡可能的保障界面的簡(jiǎn)潔與精煉，實(shí)現(xiàn)對(duì)信息的整合，在有限的空間內(nèi)讓用戶得到關(guān)于網(wǎng)頁(yè)產(chǎn)品的索引信息，使用戶的操作更加便捷。

3 ?網(wǎng)頁(yè)導(dǎo)航

網(wǎng)頁(yè)導(dǎo)航，是電商頁(yè)面的重要組成部分，用戶可以利用電商導(dǎo)航來(lái)進(jìn)入到電商平臺(tái)的各個(gè)頁(yè)面之中進(jìn)行選購(gòu)。而當(dāng)前流行的網(wǎng)頁(yè)導(dǎo)航主要分為主導(dǎo)航、次導(dǎo)航、面包屑導(dǎo)航三種，這三種導(dǎo)航分別實(shí)現(xiàn)了對(duì)訪問(wèn)者的引入、切換以及確認(rèn)位置的作用。在實(shí)際應(yīng)用中，大部分網(wǎng)站導(dǎo)航菜單設(shè)計(jì)都采用頂部水平欄導(dǎo)航，這種設(shè)計(jì)下網(wǎng)頁(yè)導(dǎo)航位置主要位于網(wǎng)站logo的上方或者下方。這種方式不僅操作更加簡(jiǎn)單，同時(shí)用戶使用時(shí)也更加輕松。此外，在網(wǎng)頁(yè)導(dǎo)航中，為了避免用戶無(wú)法尋找到自己所需的瀏覽頁(yè)面，簡(jiǎn)化網(wǎng)頁(yè)導(dǎo)航的復(fù)雜性。并且在對(duì)用于確認(rèn)用戶當(dāng)前位置的面包屑導(dǎo)航進(jìn)行設(shè)計(jì)時(shí)，需要通過(guò)加粗加大字體、改變字體顏色等方式，將導(dǎo)航設(shè)計(jì)的更加容易識(shí)別。

4 ?延展表單

表單，是用戶在進(jìn)行購(gòu)買(mǎi)、投訴、注冊(cè)、評(píng)價(jià)等內(nèi)容時(shí)所必須填寫(xiě)的項(xiàng)目，并且電商頁(yè)面在設(shè)計(jì)的過(guò)程中，要盡可能的簡(jiǎn)潔。將可以重復(fù)利用的信息在用戶的同意下儲(chǔ)存在云端，在下次填寫(xiě)時(shí)可以有系統(tǒng)自動(dòng)進(jìn)行填寫(xiě)，而需要改動(dòng)的信息則由用戶自主進(jìn)行操作。而且表單的外觀要確保用戶不會(huì)在使用的過(guò)程中對(duì)其感到反感，或是產(chǎn)生抵觸心理。為此，在對(duì)表單進(jìn)行設(shè)計(jì)時(shí)需要能夠?qū)⒈韱伪M可能的簡(jiǎn)化。而通常表單是由標(biāo)簽、輸入框、行為、幫助、信息以及驗(yàn)證六個(gè)部分所組成，這六個(gè)內(nèi)容相符相呈，但又各不相同。設(shè)計(jì)者必須能夠把握住這幾項(xiàng)內(nèi)容的特點(diǎn)，合理的進(jìn)行規(guī)劃與設(shè)計(jì)。此外，表單在進(jìn)行驗(yàn)證時(shí)，為了確保安全通常采用不同的驗(yàn)證方式，如驗(yàn)證碼、圖片滑塊、文字選取等形式，但如果安全驗(yàn)證過(guò)于復(fù)雜，雖然在一定程度上確保了驗(yàn)證的安全，卻降低了用戶的使用體驗(yàn)。為此，在進(jìn)行驗(yàn)證設(shè)計(jì)時(shí)，需要權(quán)衡驗(yàn)證設(shè)計(jì)的安全性與使用性，在保障用戶安全的同時(shí)使用戶體驗(yàn)得到優(yōu)化。

5 ?Logo

Logo是一個(gè)企業(yè)與公司在傳播過(guò)程中的重要標(biāo)志，能夠幫助用戶輕松的對(duì)網(wǎng)站進(jìn)行識(shí)別。一個(gè)優(yōu)秀的Logo不僅是企業(yè)的臉面，同時(shí)也是企業(yè)文化最為重要的外在表現(xiàn)。在電商網(wǎng)頁(yè)中，Logo的作用更加明顯，好的Logo能夠吸引用戶的眼球，并給予用戶關(guān)于網(wǎng)站的第一印象，使用戶對(duì)網(wǎng)站產(chǎn)生好感，樂(lè)于使用網(wǎng)站進(jìn)行購(gòu)物。而在對(duì)Logo進(jìn)行設(shè)計(jì)的過(guò)程中，除了藝術(shù)性以外也要關(guān)注Logo的簡(jiǎn)潔性與使用性。并且當(dāng)前主流的電商網(wǎng)站logo都是有圖形與文字進(jìn)行組合較少使用卡通形象，這是由于電商與其他企業(yè)的不同特點(diǎn)所決定的，而電商在對(duì)Logo設(shè)計(jì)的過(guò)程中，也要注意Logo能夠符合當(dāng)前網(wǎng)頁(yè)的類(lèi)型、網(wǎng)站的受眾群體以及整體風(fēng)格來(lái)進(jìn)行量身定做。

6 ?圖標(biāo)

圖標(biāo)，不僅能夠幫助用戶了解到自身的位置，也能夠提升當(dāng)前電商網(wǎng)頁(yè)的美感，強(qiáng)化視覺(jué)設(shè)計(jì)的效用，為此在進(jìn)行設(shè)計(jì)的過(guò)程中需要商戶能夠根據(jù)當(dāng)前網(wǎng)頁(yè)的特點(diǎn)與風(fēng)格來(lái)制定與其相符的圖標(biāo)。并且圖標(biāo)作為在電商網(wǎng)站中，持續(xù)且明顯的一個(gè)符號(hào)，能夠?qū)崿F(xiàn)對(duì)相應(yīng)功能的表達(dá)。為此，需要使圖標(biāo)能夠明確對(duì)其所包含的內(nèi)容進(jìn)行明確表達(dá)，比如，在電商網(wǎng)站通常都會(huì)通過(guò)一個(gè)簡(jiǎn)化的手機(jī)符號(hào)來(lái)代表手機(jī)充值等行為。

7 ?配色

配色，是電商網(wǎng)頁(yè)界面設(shè)計(jì)中最重要的一部分，只有確保顏色的合理性，才能夠使用戶在進(jìn)行瀏覽的過(guò)程中，更加舒適。電商網(wǎng)頁(yè)的配色需要具有一定的導(dǎo)向性，為此一般的電商網(wǎng)站都會(huì)采取暖色作為頁(yè)面設(shè)計(jì)的主要顏色，比較常見(jiàn)的有橙色與紅色，而一些對(duì)男性用品進(jìn)行販賣(mài)的頁(yè)面通常會(huì)采用藍(lán)色，這是為了凸顯出顏色的象征意義。對(duì)配色的實(shí)際應(yīng)用中，使用得當(dāng)?shù)念伾粌H能夠強(qiáng)化用戶的操作體驗(yàn)，還能在心理層面，影響用戶的內(nèi)心思維以及心理狀態(tài)，為用戶留下深刻的印象[2]。同時(shí)，要降低對(duì)顏色的使用過(guò)程中過(guò)多的使用多種顏色，顏色過(guò)于繁雜會(huì)導(dǎo)致用戶產(chǎn)生視覺(jué)疲勞，也因此大部分網(wǎng)站都是采取單一的顏色，并適當(dāng)?shù)卦跇?biāo)簽被選中時(shí)改變顏色。此外，配色還要考慮電商網(wǎng)頁(yè)潛在用戶的感受，使電商網(wǎng)頁(yè)的配色能夠符合自身的設(shè)計(jì)風(fēng)格。

8 ?手機(jī)網(wǎng)頁(yè)

雖然當(dāng)前大部分電商都開(kāi)發(fā)了專屬的手機(jī)APP，但電商網(wǎng)頁(yè)在手機(jī)上的網(wǎng)頁(yè)設(shè)計(jì)也不可忽視。通常在進(jìn)行手機(jī)網(wǎng)頁(yè)的設(shè)計(jì)過(guò)程中，會(huì)采用將電商網(wǎng)頁(yè)按照手機(jī)的比例進(jìn)行調(diào)整的方式來(lái)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，但這種方式卻無(wú)法保證網(wǎng)頁(yè)設(shè)計(jì)的合理性，因此電商有必要對(duì)相應(yīng)的手機(jī)網(wǎng)頁(yè)進(jìn)行重新設(shè)計(jì)，方便手機(jī)網(wǎng)頁(yè)用戶能夠更加便捷地進(jìn)行操作。

9 ?結(jié)語(yǔ)

綜上所述，電商網(wǎng)頁(yè)界面設(shè)計(jì)效果離不開(kāi)對(duì)基礎(chǔ)文字表達(dá)、Tad標(biāo)簽、網(wǎng)頁(yè)導(dǎo)航、延展表單、logo、圖標(biāo)、配色、手機(jī)網(wǎng)頁(yè)等設(shè)計(jì)元素的優(yōu)化與合理選用，實(shí)現(xiàn)整體視覺(jué)設(shè)計(jì)效果的提升，能夠?qū)崿F(xiàn)電商網(wǎng)頁(yè)的整體可操作性與舒適性，令用戶對(duì)電商網(wǎng)頁(yè)的使用體驗(yàn)進(jìn)一步提升。

參考文獻(xiàn)

[1] 馮浩煜.電商網(wǎng)頁(yè)界面視覺(jué)設(shè)計(jì)元素解析[J].科技視界，2018（1）：159-160.

[2] 董華君.手機(jī)App界面的視覺(jué)設(shè)計(jì)研究[J].藝術(shù)科技，2017，30（8）：291.

[3] 楊帆.視覺(jué)營(yíng)銷(xiāo)下購(gòu)物類(lèi)網(wǎng)站頁(yè)面設(shè)計(jì)的研究[D].天津工業(yè)大學(xué)，2017.