歡迎來到培訓(xùn)無憂網(wǎng)!
咨詢熱線 400-001-5729
2022-11-03 14:09:52|已瀏覽:138次

如何設(shè)計(jì)用戶喜歡的滾動(dòng)頁(yè)面
如何設(shè)計(jì)用戶喜歡的滾動(dòng)頁(yè)面:從某種意義上來說,長(zhǎng)滾動(dòng)頁(yè)面和無限滾動(dòng)的設(shè)計(jì),如此地受歡迎,是因?yàn)樗N合了用戶滾動(dòng)瀏覽的習(xí)慣。今天小編主要給大家分享如何設(shè)計(jì)用戶喜歡的滾動(dòng)頁(yè)面,希望對(duì)你們有幫助!
1. 一開始就提供有趣的內(nèi)容
盡管許多用戶習(xí)慣于在頁(yè)面加載時(shí)就滾動(dòng)頁(yè)面,但是首屏的內(nèi)容對(duì)用戶決策的影響是至關(guān)重要的。首屏的質(zhì)量將對(duì)后續(xù)內(nèi)容的預(yù)期產(chǎn)生重大影響。如果首屏的內(nèi)容足夠有趣,用戶就會(huì)主動(dòng)向下滾動(dòng),希望看到同樣有趣的內(nèi)容。
因此,作為整體設(shè)計(jì)的一部分,設(shè)計(jì)師應(yīng)該在首屏上設(shè)計(jì)讓用戶感興趣的內(nèi)容,并傳遞給用戶一條同樣有趣的消息。
在設(shè)置內(nèi)容時(shí),盡量為用戶提供:
(1)有趣的元素和內(nèi)容。(吸引用戶注意力的內(nèi)容和信息)
(2)精彩的圖片或視頻。(用戶會(huì)密切關(guān)注這些視覺信息)
2.給用戶一個(gè)直觀的提示
有時(shí)候,如果想讓用戶向下滾動(dòng),設(shè)計(jì)師可以直接告訴用戶,在這方面為用戶提供視覺線索,例如指向的指引箭頭,或者簡(jiǎn)單地在文本中寫下“向下滾動(dòng)”,以通知用戶下面有更多的內(nèi)容。
呈現(xiàn)視覺線索的方法有很多,如果顯式的內(nèi)容不夠“優(yōu)雅”,可以嘗試讓下面的內(nèi)容顯示在首屏上,讓用戶明白下面還有更多。
3.保持導(dǎo)航可見
導(dǎo)航是一個(gè)網(wǎng)站的重要組成部分,它能成就一個(gè)網(wǎng)站的良好體驗(yàn),也可以摧毀它。設(shè)計(jì)web頁(yè)面時(shí)最大的風(fēng)險(xiǎn)之一是可用性低導(dǎo)航設(shè)計(jì),這會(huì)導(dǎo)致用戶在使用過程中會(huì)迷失方向。
通常,這種設(shè)計(jì)會(huì)讓用戶感到吃多白干,因此,嘗試使用懸浮制定的的導(dǎo)航欄,或者固定導(dǎo)航欄,一方面讓用戶始終知道自己在哪里,另一方面方便用戶跳轉(zhuǎn)到其它位置。
在為移動(dòng)端設(shè)計(jì)時(shí),需要注意導(dǎo)航會(huì)不會(huì)占用太多的空間,更合理的策略是讓導(dǎo)航在滾動(dòng)時(shí)隱藏,當(dāng)它準(zhǔn)備回到頂部或停止時(shí)顯示出來。
4.加入動(dòng)態(tài)效應(yīng),增強(qiáng)參與性
以視差滾動(dòng)為代表的動(dòng)畫特效是一種設(shè)計(jì)技巧,它允許用戶滾動(dòng)瀏覽更有趣的設(shè)計(jì),同時(shí),吸引用戶不斷往下滾動(dòng)瀏覽,讓用戶始終處于探索“下一步還會(huì)發(fā)生什么”的過程中。
考慮到頁(yè)面常常被設(shè)計(jì)成不同的區(qū)塊,創(chuàng)造性的效果可以移動(dòng)到不同的區(qū)塊中,讓用戶在精心設(shè)計(jì)的路徑中滾動(dòng)瀏覽。
視差滾動(dòng)是目前最流行的特效之一,設(shè)計(jì)師可以根據(jù)元素移動(dòng)速度的不同來創(chuàng)建深度和沉浸感。當(dāng)用戶平滑地滾動(dòng)內(nèi)容時(shí),視差效應(yīng)產(chǎn)生的沉浸感會(huì)給用戶一種身臨其境的感覺。
5.避免滾動(dòng)劫持
滾動(dòng)劫持的概念并不難理解,瀏覽器本身的滾動(dòng)機(jī)制被替換,用戶無法按照他們期望習(xí)慣的方式滾動(dòng)頁(yè)面。
有時(shí)這種情況是設(shè)計(jì)師故意創(chuàng)造的瀏覽效果,但它并不是一定能給用戶一個(gè)很好的體驗(yàn),至少大部分時(shí)間是超出用戶的預(yù)期,滾動(dòng)劫持這種情況應(yīng)該盡可能避免使用。
注:尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://www.hebeijilong.cn/news-id-66086.html 違者必究!部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們,了解更多相關(guān)資訊請(qǐng)關(guān)注網(wǎng)頁(yè)制作頻道查看更多,了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多:150 3333 6050