電子商務(wù)網(wǎng)站頁(yè)面 設(shè)計(jì)寶典 (一)

電子商務(wù)平臺(tái)經(jīng)營(yíng)成功的要素，除了要有好的商業(yè)模式外，頁(yè)面設(shè)計(jì)也相當(dāng)重要。優(yōu)異的使用者頁(yè)面需有高度的網(wǎng)站轉(zhuǎn)換率(conversion rate) 且好用易上手。
1. 單欄排版取代多欄排版
單欄排版讓你更能掌握內(nèi)容的呈現(xiàn)樣貌。對(duì)使用者來(lái)說(shuō)，上而下的方式閱讀更直覺(jué)。相對(duì)的，多欄排版可能增加使用者閱讀時(shí)分心的風(fēng)險(xiǎn)，而不能專注于重點(diǎn)上。

2. 嘗試先給使用者好處，不要馬上進(jìn)行銷售
可以利用友善的活動(dòng)或方案讓顧客買單，例如送些小禮物。而給與顧客禮物的方式要以互惠的角度，這樣對(duì)他們而言才是有效且具說(shuō)服力的銷售戰(zhàn)術(shù)。

3. 在頁(yè)面上整合相似的功能，避免版面破碎化
設(shè)計(jì)師常因無(wú)心而設(shè)計(jì)出多欄位卻又相似的元素或功能，在頁(yè)面上就會(huì)顯得多余甚至混淆影響使用者的操作。

4. 讓社群來(lái)證明您的價(jià)值，而非老王賣瓜
利用社群的力量來(lái)幫助你說(shuō)服客戶是相當(dāng)聰明的策略，且可有效的提高轉(zhuǎn)換率。用戶看到別人的認(rèn)可，或是討論你的產(chǎn)品服務(wù)時(shí)，會(huì)加強(qiáng)他們想要了解或使用的動(dòng)機(jī)，所以試著把使用者的推薦文或是數(shù)據(jù)證明放在網(wǎng)站上吧!

5. 希望使用者進(jìn)行某項(xiàng)動(dòng)作，你可在不同位置放入引導(dǎo)的指示
在長(zhǎng)頁(yè)面或多分頁(yè)的網(wǎng)頁(yè)中，重復(fù)出現(xiàn)你希望使用者進(jìn)行操作的元件，是一個(gè)好的經(jīng)營(yíng)策略。不過(guò)你千萬(wàn)不要卯起來(lái)放這些元件，這么做肯定會(huì)讓使用者感到憤怒或挫折的。然而,長(zhǎng)頁(yè)面的網(wǎng)站設(shè)計(jì)模式已經(jīng)相當(dāng)?shù)钠占?，不像過(guò)去盡量將可視范圍壓縮在一個(gè)螢?zāi)淮笮?nèi)。所以在長(zhǎng)頁(yè)面的最上方及最下方各放置一個(gè)可操作的元件，這樣的作法顯得合理且符合人性。就使用者的習(xí)慣而言，通常他們會(huì)將網(wǎng)頁(yè)閱讀(或掃視)至最底，此時(shí)看到可操作的元件，可以激發(fā)他們思考接下去該做什么，如此你就有機(jī)會(huì)完成一筆交易。

6. 讓可點(diǎn)擊和可選擇之元件的樣式有所差異，避免混淆
應(yīng)用視覺(jué)元素之手法可以幫助使用者了解頁(yè)面上的功能與結(jié)構(gòu)，例如顏色、深度與對(duì)比度等。同時(shí)為了與你的使用者精準(zhǔn)的溝通，需點(diǎn)擊的行為(如連結(jié)或按鈕)與需選擇的元件(如選單)設(shè)計(jì)上要有所區(qū)別，同時(shí)上方的文字必須描述清楚，才有利使用者辨別。在底下的例子中，作者選擇了藍(lán)色做為網(wǎng)站上使用者可點(diǎn)擊元件的主色，而黑色為標(biāo)示已選擇的項(xiàng)目或是現(xiàn)在頁(yè)面的名稱，簡(jiǎn)單明顯的顏色應(yīng)用，讓使用者藉由顏色的線索更輕易的學(xué)習(xí)和使用網(wǎng)站功能。最后請(qǐng)記得，千萬(wàn)別使用難以辨識(shí)或過(guò)多的顏色混淆使用者。

7. 強(qiáng)調(diào)推薦的主打產(chǎn)品或服務(wù)
當(dāng)頁(yè)面上有多項(xiàng)可選擇的產(chǎn)品或服務(wù)時(shí)，強(qiáng)調(diào)主打品會(huì)是一個(gè)好想法，因?yàn)橛行┦褂谜咝枰嘁稽c(diǎn)刺激物才會(huì)注意到。但心理學(xué)的研究指出，若提供使用者越多項(xiàng)的選擇時(shí)，他們從中挑選的機(jī)率就越低。為了解決這個(gè)困境，我們需要利用設(shè)計(jì)來(lái)強(qiáng)調(diào)最推薦的主要產(chǎn)品或服務(wù)。

8. 讓使用者有復(fù)原(undo)的機(jī)會(huì)，而非跳出確認(rèn)視窗一次定生死
按下按鈕或連結(jié)，系統(tǒng)可能會(huì)出現(xiàn)兩種訊息，第一種為在頁(yè)面的底部滑出可讓你回復(fù)至上個(gè)狀態(tài)的功能，另一種則是跳出視窗詢問(wèn)你是否要進(jìn)行操作，確認(rèn)后無(wú)法復(fù)原。而這兩種有什么差異呢?
可"復(fù)原(undo)"的設(shè)計(jì)對(duì)使用者是友善且尊敬的，因?yàn)樗峁┦褂谜呔退悴僮麇e(cuò)誤也可以回復(fù)到上一步的功能，而不是像"跳出提示視窗"般，似乎質(zhì)疑使用者的意圖。另外，使用者若需要重復(fù)的進(jìn)行某項(xiàng)工作，系統(tǒng)又以跳出提示視窗為操作的方式，可能讓使用者操作效率低落，甚至產(chǎn)生不好的體驗(yàn)。

9. 清楚描述網(wǎng)站的目標(biāo)族群
你希望網(wǎng)站的目標(biāo)用戶是大眾還是特定族群?
描述或限制適合產(chǎn)品或服務(wù)的目標(biāo)族群，可以幫助網(wǎng)站找到更多相似特質(zhì)的使用者，也更具特色，同時(shí)讓使用者感到自己具獨(dú)特性。然而，使用這樣策略具有風(fēng)險(xiǎn)，可能讓你的網(wǎng)站在短期內(nèi)失去一些潛在用戶。不過(guò)，透明與誠(chéng)實(shí)才是建立與使用者之間信任的好方式。

10. 語(yǔ)氣若不肯定，你叫使用者怎么信任你
當(dāng)你收到一封語(yǔ)句充滿不確定性，甚至有些膽怯的信件，以及收到一封肯定且充滿信心語(yǔ)句的信件，你會(huì)怎么看待這兩個(gè)撰寫(xiě)信件的人?沒(méi)錯(cuò)!答案很明確肯定能待給人安心，優(yōu)柔寡斷則會(huì)降低信任感。
如果你常使用問(wèn)句，或是用一些不確定的詞匯，例如:也許、可能、有興趣嗎?或想要嗎?。這代表你對(duì)你的產(chǎn)品或服務(wù)信心不足，這時(shí)候可以使用更具權(quán)威性的語(yǔ)句，例如你能帶給用戶什么有利的改變。

11. 用對(duì)比的手法來(lái)強(qiáng)調(diào)
讓你的CTA(calls to action) 更加明顯可提高使用者注意到的機(jī)率，我們可以透過(guò)深淺色調(diào)、陰影、漸層或?qū)Ρ壬氖址▉?lái)增加畫(huà)面上的對(duì)比性，進(jìn)而達(dá)到我們的目的。

12. 說(shuō)明產(chǎn)品的產(chǎn)地，增加與他牌的差異
說(shuō)明產(chǎn)品或服務(wù)的產(chǎn)地，可讓網(wǎng)站與用戶之間的溝通更加人性化。例如人們總是喜歡介紹自己來(lái)自哪個(gè)國(guó)家、地區(qū)及城市，若產(chǎn)品或服務(wù)也能以這種人性化的方式來(lái)介紹，會(huì)顯得更加友善。另外，說(shuō)明產(chǎn)地也可能讓產(chǎn)品品質(zhì)與產(chǎn)地名聲達(dá)到雙贏。

13. 別讓使用者填太多表單
人類天生不喜歡麻煩的事物，就如同大家不喜歡在網(wǎng)站上填寫(xiě)太多的表單。每新增一項(xiàng)必填欄位，訪客放棄填寫(xiě)的風(fēng)險(xiǎn)就越高。此外，并非所有人打字都相當(dāng)快，而且在移動(dòng)裝置上輸入簡(jiǎn)直就是件苦差事。所以盡可能的只留必要欄位，不那么重要的就不要讓使用者填了。但如果你真的有非常多必填欄位，可以試看看將第二重要的資訊在提交第一重要的資訊后，出現(xiàn)于單獨(dú)的頁(yè)面上，請(qǐng)使用者繼續(xù)填寫(xiě)。

14. 試著別隱藏頁(yè)面上的選項(xiàng)
使用下拉式選單的目的即是增加頁(yè)面的空間，但在第一時(shí)間，使用者無(wú)法了解選項(xiàng)的內(nèi)容。若你的目的在于選擇可預(yù)期或已熟悉的項(xiàng)目(例如:生日、日期或地區(qū))，那使用下拉式選單元件是個(gè)不錯(cuò)的選擇。另外，下拉式選單也長(zhǎng)被使用于高度重復(fù)操作的選項(xiàng)，例如作業(yè)系統(tǒng)上方的"檔案"或"編輯"(action menus)。
但若是這些選項(xiàng)是跟內(nèi)容有關(guān)，而且是流程中必選的(如下圖)，那你可以考慮不要隱藏這些選項(xiàng)，這樣可以提升網(wǎng)頁(yè)著轉(zhuǎn)換率。

15. 避免讓使用者產(chǎn)生已經(jīng)滾到 “網(wǎng)頁(yè)最底部" 的錯(cuò)覺(jué)
沒(méi)錯(cuò)，長(zhǎng)型的滾動(dòng)頁(yè)面的設(shè)計(jì)相當(dāng)符合人性，但要小心訪客可能會(huì)因?yàn)樵O(shè)計(jì)不良而產(chǎn)生“已經(jīng)滾到最底部"的錯(cuò)覺(jué)，這會(huì)大大的降低轉(zhuǎn)換率。
你可以透過(guò)視覺(jué)化的圖標(biāo)或是小動(dòng)畫(huà)，來(lái)告知或暗示使用者：網(wǎng)頁(yè)還沒(méi)置底，你們還可以繼續(xù)往下閱讀。另外，設(shè)計(jì)時(shí)也需小心各主題之間留白區(qū)域的尺寸，因?yàn)檫^(guò)大也會(huì)讓人產(chǎn)生底下無(wú)資訊的想法。

16. 以聚焦手法吸引使用者的目光，效果大于頁(yè)面上滿滿的連結(jié)
我們常會(huì)在頁(yè)面上留下許多"連結(jié)"，目的在于可以滿足使用者可能的所有需求(例如可了解更多)。不過(guò)，假如你的目的是讓使用者卷到頁(yè)面底部時(shí)，采取你期待他們做的動(dòng)作，那你必須思考上述的做法是否恰當(dāng)。因?yàn)樵谥虚g安插任何連結(jié)都可能導(dǎo)致使用者分心而忽視了你最希望他們做的事情，所以放置連結(jié)，其數(shù)量與位置都要取得平衡。怎么取得平衡必須仰賴大家的經(jīng)驗(yàn)，不過(guò)至少我們知道減少多余的連結(jié)，可增加使用者注意到你”最重要?jiǎng)幼?可能是按鈕)”的機(jī)會(huì)。

17. 描述項(xiàng)目或功能目前的狀態(tài)
網(wǎng)頁(yè)設(shè)計(jì)的手法常以不同的元素來(lái)表現(xiàn)某項(xiàng)目的不同狀態(tài)。例如 E-mail 上可標(biāo)記為未讀或已讀，帳單旁可顯示已繳清或未繳的 icon 等。這些做法都是告知使用者，該項(xiàng)目目前的狀態(tài)，也是系統(tǒng)提供回饋給使用者的好方式。
重點(diǎn)是，頁(yè)面上項(xiàng)目的狀態(tài)可以幫助使用者了解是否已經(jīng)操作過(guò)了?操作是否成功?或是哪些動(dòng)作是使用者需進(jìn)行的?

18. 試著在頁(yè)面上使用能"帶給用戶好處的按鈕"，取代"任務(wù)導(dǎo)向的按鈕"
想像一下，若是頁(yè)面上有兩個(gè)按鈕，其中一個(gè)寫(xiě)著"替你省下大錢"(帶來(lái)好處的按鈕)，另一個(gè)寫(xiě)著"請(qǐng)注冊(cè)吧"(任務(wù)導(dǎo)向的按鈕)，肯定大部分的使用者會(huì)點(diǎn)擊前者。原因很簡(jiǎn)單，因?yàn)榈谝粋€(gè)按鈕視乎能替使用者產(chǎn)生價(jià)值；相對(duì)的，注冊(cè)這個(gè)動(dòng)作則代表使用者需要花時(shí)間精力填寫(xiě)表單，當(dāng)然他們不愿點(diǎn)擊。由此可知，若這個(gè)按鈕能替使用者帶來(lái)好處，自然就會(huì)有較高的轉(zhuǎn)換率。另外，"帶來(lái)好處的按鈕"與"任務(wù)導(dǎo)向的按鈕"若有相關(guān)性，可以將兩者放置于一區(qū)(如下圖)，這樣可提醒使用者為什么他們需要進(jìn)行這項(xiàng)任務(wù)或動(dòng)作。

19. 直接操作比多階層下拉式選單 (contextless menus) 來(lái)的直覺(jué)
針對(duì)頁(yè)面上的元素直接操作有時(shí)比整合的操作工具列還要來(lái)的方便直覺(jué)。如下圖，若各項(xiàng)目皆有一些可以讓使用者操作的功能，我們可以藉由點(diǎn)擊或鼠標(biāo)覆蓋的方式來(lái)呈現(xiàn)一些功能或進(jìn)行操作(如刪除或重新命名等)。另外還有一種常見(jiàn)的操作方式，就是點(diǎn)擊項(xiàng)目后，該項(xiàng)目會(huì)轉(zhuǎn)變?yōu)榭删庉嫷臓顟B(tài)。
然而，多階層下拉式選單(context of button)十分常見(jiàn)，但過(guò)多的階層可能會(huì)增加操作的步驟，所以下次設(shè)計(jì)時(shí)不妨考慮減少階層或直接操作的方法。

20. 當(dāng)下就可以操作，何必再多開(kāi)分頁(yè)呢?
當(dāng)頁(yè)面上有一些我們期望使用者做，并會(huì)帶來(lái)價(jià)值的功能時(shí)(例如留下聯(lián)絡(luò)方式)，最好可將實(shí)際的表單或欄位放置于本頁(yè)上。如下圖，欄位若能與頁(yè)面整合在同一層，其帶來(lái)的好處大于還要連結(jié)至別頁(yè)輸入的方式。

那我們?cè)撛趺醋瞿?首先，必須精簡(jiǎn)流程的步驟，盡可能的讓使用者花最少的時(shí)間。接著，將精簡(jiǎn)化的表單或欄位放置于該頁(yè)面上，除了可讓使用者直接操作外，使用者也可借此預(yù)估完成所需的時(shí)間，這樣他們進(jìn)行操作的意愿會(huì)更高。

當(dāng)前標(biāo)題：電子商務(wù)網(wǎng)站頁(yè)面 設(shè)計(jì)寶典 (一)
文章網(wǎng)址：http://www.bm7419.com/news/131237.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有電子商務(wù)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)