網(wǎng)站設(shè)計(jì)分頁的那點(diǎn)事兒
電子商務(wù)網(wǎng)站的產(chǎn)品分頁設(shè)計(jì)是很小塊的設(shè)計(jì),絕大多數(shù)的網(wǎng)站不會(huì)在這里花費(fèi)什么精力,但是,如果能在細(xì)節(jié)上做的更貼心一些,對(duì)用戶的購(gòu)買體驗(yàn)還是有所提升的,畢竟用戶每次購(gòu)買都會(huì)多次使用該功能模塊。
首先要說的是,分頁是用戶普遍接受的產(chǎn)品頁面瀏覽方式,設(shè)計(jì)也是大同小異,用戶的學(xué)習(xí)成本為零。
現(xiàn)在的電商網(wǎng)站通常選擇在產(chǎn)品頁的上下部分均放置分頁,下面是完整的分頁功能,上面是簡(jiǎn)化功能。產(chǎn)品頁下面需要完整的分頁功能很好理解,因?yàn)橛脩舳际菫g覽完該頁產(chǎn)品再翻頁,所以把完整功能置于底部。那什么時(shí)候用戶需要在產(chǎn)品頁上面使用分頁功能呢?那是在用戶不想看產(chǎn)品頁內(nèi)容就翻頁的時(shí)候,是在用戶想了解自己所處位置的時(shí)候,另外由于產(chǎn)品頁上部的分頁模塊常常和產(chǎn)品篩選條件模塊放于一處,所以這里的功能需要盡量簡(jiǎn)化、節(jié)約空間,好的設(shè)計(jì)可參照下圖中的樂淘,如果用戶體驗(yàn)做的更好一點(diǎn),這里可以再加入產(chǎn)品頁第一頁的鏈接,畢竟用戶返回第一頁的需求是硬性需求。
對(duì)于產(chǎn)品頁下部的分頁設(shè)計(jì),各個(gè)網(wǎng)站最大的區(qū)別就是是否放置自定義選擇頁的設(shè)計(jì)。用戶看頁面的習(xí)慣分兩種,一種是按照順序往后看的,另一種是挑頁面去看的。由于現(xiàn)在電商網(wǎng)站的產(chǎn)品篩選條件比較豐富,用戶很少?gòu)暮竺娴漠a(chǎn)品頁往前面的產(chǎn)品頁瀏覽或是直接看中間的產(chǎn)品頁,如果網(wǎng)站沒有要增強(qiáng)后面產(chǎn)品的曝光需求,可以拿掉自定義選擇頁模塊(注:淘寶應(yīng)該還是很需要這個(gè)模塊的)。
在產(chǎn)品頁比較多的情況下,用戶瀏覽到中間的頁面會(huì)出現(xiàn)如何進(jìn)行分頁導(dǎo)向的問題。解決辦法分兩種,一種是中間放置五個(gè)頁碼,兩邊是開始頁和最后頁,中間省略號(hào),此類做法可以參照下圖中的樂淘分頁設(shè)計(jì),令一種做法是類似淘寶、當(dāng)當(dāng)?shù)脑O(shè)計(jì),由于已經(jīng)有自定義選擇頁設(shè)計(jì),可以簡(jiǎn)化前面頁碼,省略掉一個(gè)省略號(hào)以及第一頁的頁碼。兩者的結(jié)合體可以參見下圖中的1號(hào)店和凡客,看起來元素有點(diǎn)冗余了。
另外,從方便用戶使用的角度來說,分頁的頁碼點(diǎn)擊區(qū)域應(yīng)該大一些,反例請(qǐng)參考下圖的凡客,在凡客你必須把鼠標(biāo)移到頁碼的數(shù)字上面才可以點(diǎn)擊,悲劇。
產(chǎn)品分頁可以說的內(nèi)容不是太多,暫時(shí)先說到這里,關(guān)于電商網(wǎng)站的設(shè)計(jì)文章會(huì)陸續(xù)出爐,歡迎關(guān)注:)
本文地址:http://m.likemindfilms.com/tutorial/di980.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏