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

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

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

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

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

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

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

7. 強調(diào)推薦的主打產(chǎn)品或服務(wù)
當(dāng)頁面上有多項可選擇的產(chǎn)品或服務(wù)時，強調(diào)主打品會是一個好想法，因為有些使用者需要多一點刺激物才會注意到。但心理學(xué)的研究指出，若提供使用者越多項的選擇時，他們從中挑選的機率就越低。為了解決這個困境，我們需要利用設(shè)計來強調(diào)最推薦的主要產(chǎn)品或服務(wù)。

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

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

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

11. 用對比的手法來強調(diào)
讓你的CTA(calls to action) 更加明顯可提高使用者注意到的機率，我們可以透過深淺色調(diào)、陰影、漸層或?qū)Ρ壬氖址▉碓黾赢嬅嫔系膶Ρ刃裕M而達(dá)到我們的目的。

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

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

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

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

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

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

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

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

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

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

當(dāng)前題目：電子商務(wù)網(wǎng)站頁面 設(shè)計寶典 (一)
當(dāng)前URL：http://muchs.cn/news37/131237.html

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

廣告

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