400-611-9921
2016-07-15
2206
1、保持導(dǎo)航欄可見
當(dāng)你設(shè)計無限滾動方案時,最好保持導(dǎo)航欄始終可見,使得用戶能更快更容易的前往網(wǎng)站/App的不同區(qū)域。如果導(dǎo)航欄超出了一定范圍后不再顯示,那么用戶將不得不在滾出范圍之外時再往回滾才能重新看到導(dǎo)航欄。
僅對移動設(shè)備有效:因?yàn)橐苿釉O(shè)備屏幕更小,而導(dǎo)航欄會占用一定的屏幕空間。如果屏幕內(nèi)容是滾動式的信息流,導(dǎo)航欄可以在用戶向上滾動出新內(nèi)容的時候隱藏掉,并在他們向下滾動試圖重新返回到頂部的時候再顯現(xiàn)出來。
2、如果你有頁腳的話可以使用一個“加載更多”按鈕
無線滾動的方式阻礙了用戶到達(dá)頁腳位置。事實(shí)上這也正是這種設(shè)計的最主要的挑戰(zhàn)之一:因?yàn)樾畔⒃谟脩艚咏撞康耐瑫r不斷加載,用戶只能在下一撥信息加載出來之前看到頁腳一兩秒鐘,之后頁腳就會被擠出視野。這就阻礙了用戶到達(dá)頁腳位置。
拿Bing圖片來舉例。其頁腳位置包含諸如“了解更多”和“幫助”等這樣的鏈接,但是實(shí)際上用戶很難點(diǎn)擊到這些鏈接,除非當(dāng)前頁面停止?jié)L動,然而這可能會花一些時間。
如果你的網(wǎng)站/App有一個頁腳,那對你很重要(或者對你的用戶更為重要)的一條原則是,你應(yīng)該使用“加載更多”這種方法。新的內(nèi)容在你點(diǎn)擊“加載更多”按鈕之前不會自動加載。這種界面設(shè)計簡單,又能夠讓用戶更輕易的認(rèn)識到加載更多內(nèi)容的方法。
Instagram使用“加載更多”按鈕來讓用戶能更容易的前往頁腳位置,并不會迫使用戶一次又一次的點(diǎn)擊“加載更多”按鈕。
3、使用后退按鈕將用戶帶回以前的位置
無線滾動方案有時被認(rèn)為有一個最主要的可用性缺點(diǎn)是:滾動位置沒有像一個狀態(tài)一樣被記錄下來。如果用戶順著信息列表中某個位置點(diǎn)的鏈接前往了另一個頁面,再去點(diǎn)擊后退按鈕,他們期望的是回到信息列表中的同一位置處。但是用戶在列表中的位置點(diǎn)并沒有被記錄,這就意味著用戶瀏覽器中的后退按鈕將會帶他們重新回到列表頂部位置。這樣的做法之下,也就不用奇怪用戶會失望于所謂的后退按鈕并沒有起到實(shí)質(zhì)上的作用。
Flickr使得瀏覽器的后退按鈕觸發(fā)的行為跟用戶的期望一致。它記錄用戶在列表中滾動到的位置,因此用戶點(diǎn)擊后退按鈕后會回到同一位置。
4、使添加書簽功能成為可能
無線滾動的最為人詬病的缺點(diǎn)之一是你不可能將出現(xiàn)的信息添加進(jìn)書簽。將喜歡的結(jié)果創(chuàng)建一個簡單的書簽(或者“收藏”下來),待以后使用,這種做法對用戶來講會是一個非常強(qiáng)大的功能。如果你的網(wǎng)站/App值得,用戶確實(shí)是會創(chuàng)建標(biāo)簽的。例如Pinterest,使用一個標(biāo)簽工具讓用戶保存下創(chuàng)造性的想法。
5、加載新內(nèi)容的時候提供一個視覺反饋
當(dāng)新的內(nèi)容在加載的時候,用戶需要一個清晰的指示告訴他們網(wǎng)站正在加載。你應(yīng)該使用進(jìn)度指示器告訴用戶新內(nèi)容正在加載并且很快就會出現(xiàn)在屏幕中。
因?yàn)榧虞d新內(nèi)容通常很快(它不應(yīng)該花費(fèi)超過2 – 10秒的時間),你可以使用一個環(huán)形動畫告訴用戶系統(tǒng)正在響應(yīng)。
如果指示器中國包含一些文本說明告訴用戶為何他們需要等待(如“加載評論中”),這對用戶清晰的理解當(dāng)前狀態(tài)會有額外的幫助。
結(jié)論
如果無線滾動方案應(yīng)用恰當(dāng),它能營造一種流暢一體的體驗(yàn)。希望你通過本文了解到該如何設(shè)計一個友好的無限滾動方案,這將幫助你建立完美的用戶體驗(yàn)。
本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-縱天科技
標(biāo)簽:縱天,高端網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),廣州響應(yīng)式網(wǎng)站
關(guān)注我們:在查找公眾號中搜索:zomsky1688,或者掃描下方二維碼快速關(guān)注。
400-611-9921
020-29860991
地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F
業(yè)務(wù) QQ: 3561401262
E-mail: sales@zomsky.com