2017-5-9 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
出于對(duì)新交互模式的探索和技術(shù)的發(fā)展,曾經(jīng)網(wǎng)頁(yè)設(shè)計(jì)中的許多禁忌,現(xiàn)如今反而成為了越來(lái)越受歡迎的趨勢(shì),網(wǎng)頁(yè)中的滾動(dòng)交互,就是如此。作為一項(xiàng)基本的交互方式,滾動(dòng)交互并不是一成不變,它正將新的技巧和新的規(guī)則納入其中,逐步演進(jìn)。
今天的文章,我們會(huì)探討滾動(dòng)交互在網(wǎng)頁(yè)中的新變化,探討新“滾動(dòng)”的利弊,分享技巧。
原因很簡(jiǎn)單,移動(dòng)端設(shè)備的興起,讓滾動(dòng)交互重獲新生。隨著移動(dòng)端用戶(hù)數(shù)量逐步超過(guò)桌面端的用戶(hù)數(shù)量,UI和UX設(shè)計(jì)師會(huì)不斷地針對(duì)交互和UI進(jìn)行調(diào)整。移動(dòng)端的用戶(hù)是如此之多,滾動(dòng)交互的重要性就顯得越來(lái)越明顯。
與此同時(shí),另外一件事情也顯得非常重要。為了確保能夠盡可能多、盡可能方便地訪問(wèn)互聯(lián)網(wǎng),減少頁(yè)面跳轉(zhuǎn),盡量通過(guò)滾動(dòng)瀏覽來(lái)提率,這也是滾動(dòng)交互熱度提升的一個(gè)重要原因。社交媒體中常見(jiàn)的動(dòng)態(tài)加載技術(shù)的出現(xiàn),讓用戶(hù)可以一邊滾動(dòng)瀏覽一邊加載自適應(yīng)的內(nèi)容,成為了可能。
此外,我們之前一直重視的首屏,在今天似乎也沒(méi)有那么重要了。研究表明,用戶(hù)真的不介意向下滾動(dòng)瀏覽大量的內(nèi)容,換句話(huà)說(shuō),頁(yè)面的所有內(nèi)容都會(huì)在用戶(hù)的滾動(dòng)瀏覽過(guò)程中逐步展開(kāi),首屏的重要性無(wú)疑被稀釋了。
當(dāng)然,如今的滾動(dòng)需要相應(yīng)的技術(shù)支持,也正是在CSS和JS技術(shù)有所發(fā)展之后,滾動(dòng)交互才被界定為真正有意義的設(shè)計(jì)模式。在此之前,通過(guò)滾動(dòng)交互來(lái)視覺(jué)化地展現(xiàn)故事,本身是一件相對(duì)困難的事情,隨后技術(shù)的發(fā)展,讓復(fù)雜的UI布局,微妙的動(dòng)效和加入到滾動(dòng)交互過(guò)程中,從而有了今天的全新的滾動(dòng)交互。
不過(guò)一旦準(zhǔn)備借助長(zhǎng)滾動(dòng)式的頁(yè)面來(lái)呈現(xiàn)故事的時(shí)候,那么你就要充分運(yùn)用一切手段(圖形、動(dòng)畫(huà)、圖標(biāo)等),借用電影般的表現(xiàn)力和戲劇化的起承轉(zhuǎn)合,將用戶(hù)的吸引力牢牢地拉扯住。
事實(shí)上,一些混合型的設(shè)計(jì)正在占據(jù)滾動(dòng)交互的主流。就像UXPin的首頁(yè),頁(yè)面采用的是長(zhǎng)滾動(dòng)式設(shè)計(jì),但是其中包含了一個(gè)固定不動(dòng)的窗口,而窗口內(nèi)的內(nèi)容是隨著滾動(dòng)而改變的。這種全新的滾動(dòng)交互模式帶來(lái)的體驗(yàn)和以往傳統(tǒng)的滾動(dòng)式交互截然不同。
每種技術(shù)、每款工具都有其特定的使用環(huán)境,相應(yīng)的,有人會(huì)喜歡它們,有人會(huì)討厭它們,這都是很自然的事情。所以,在你使用全新的滾動(dòng)交互的時(shí)候,你需要對(duì)于自己的產(chǎn)品、需求和滾動(dòng)交互本身有足夠清晰的判斷:
滾動(dòng)交互的優(yōu)點(diǎn):
·鼓勵(lì)交互。不同的交互和元素會(huì)不斷刺激用戶(hù),是一種有趣的故事呈現(xiàn)方式,鼓勵(lì)用戶(hù)與頁(yè)面進(jìn)行互動(dòng),特別是視差滾動(dòng)。
·更加快速。滾動(dòng)交互比起復(fù)雜的頁(yè)面條狀更加,并不會(huì)減緩或者限制整個(gè)用戶(hù)體驗(yàn)。
·引誘用戶(hù)。滾動(dòng)式的設(shè)計(jì)會(huì)促進(jìn)用戶(hù)交互,提高用戶(hù)的停留時(shí)間,讓用戶(hù)持續(xù)發(fā)掘?qū)λ麄冇形Φ膬?nèi)容。
·響應(yīng)式設(shè)計(jì)。這些頁(yè)面挑弄廣場(chǎng)能夠兼容不同尺寸、不同設(shè)備屏幕,滾動(dòng)式交互本身就有助于簡(jiǎn)化設(shè)備和屏幕尺寸間的差異。
·手勢(shì)交互。滾動(dòng)交互始終同觸摸機(jī)制結(jié)合在一起,向下滾動(dòng)頁(yè)面比起使用向下按鈕要方便得多,在移動(dòng)端上尤其是如此。
·愉悅體驗(yàn)。較少的點(diǎn)擊和直覺(jué)式的交互,加上有趣的內(nèi)容和多樣的動(dòng)效,滾動(dòng)交互給用戶(hù)帶來(lái)的體驗(yàn)是愉悅的。
滾動(dòng)交互的缺陷:
·頑固的用戶(hù)。不要問(wèn)為什么,總會(huì)有一部分用戶(hù)抵制新東西。盡管如此,新的滾動(dòng)交互依然廣泛地普及開(kāi)來(lái)。尤其是在移動(dòng)端上,而且許多用戶(hù)已經(jīng)習(xí)慣了這一技術(shù)。
·SEO上的缺陷。大量的內(nèi)容被匯集到了一個(gè)頁(yè)面當(dāng)中,對(duì)于SEO可能會(huì)有負(fù)面的影響。
·迷失方向。用戶(hù)可能會(huì)在滾動(dòng)瀏覽過(guò)程中迷失方向,這是客觀存在的問(wèn)題。
·導(dǎo)航困難。大量的內(nèi)容被匯集到一頁(yè)當(dāng)中,用戶(hù)無(wú)法像以前一樣“回到”上一頁(yè)。通??梢越柚敳炕蛘邆?cè)邊的固定導(dǎo)航,來(lái)解決這個(gè)問(wèn)題。
·訪問(wèn)速度。諸如視頻和動(dòng)效這種多樣、復(fù)雜而又占空間的內(nèi)容要加載,在訪問(wèn)和加載速度上可能不如以前那么網(wǎng)站那么快速。
·沒(méi)有頁(yè)腳。絕大多數(shù)可以無(wú)限滾動(dòng)的網(wǎng)站都通常沒(méi)有設(shè)置頁(yè)腳,所以,我們可以設(shè)計(jì)一個(gè)常駐底部的頁(yè)腳,
除開(kāi)這些優(yōu)缺點(diǎn),長(zhǎng)滾動(dòng)式的網(wǎng)頁(yè)在某些特定的功能上非常突出。它非常適合用來(lái)展現(xiàn)內(nèi)容,以及:
·承載大量的移動(dòng)端內(nèi)容
·展現(xiàn)頻繁更新的內(nèi)容(博客和微博客)
·以單一方式呈現(xiàn)大量?jī)?nèi)容(比如信息圖表)
·由于信息負(fù)荷量大而不適宜呈現(xiàn)富媒體(加載時(shí)間長(zhǎng))
諸如社交媒體這樣的網(wǎng)站適合長(zhǎng)滾動(dòng)頁(yè)面來(lái)展現(xiàn),而類(lèi)似電商類(lèi)網(wǎng)站,需要導(dǎo)航來(lái)導(dǎo)向特定內(nèi)容的網(wǎng)站,則適合使用相對(duì)保守的頁(yè)面導(dǎo)航設(shè)計(jì),并且控制頁(yè)面長(zhǎng)度。
和許多設(shè)計(jì)趨勢(shì)一樣,不要因?yàn)槟憧吹絼e的網(wǎng)站采用了這些趨勢(shì),你就將它套用到自己的網(wǎng)站上,你依然需要針對(duì)自己的網(wǎng)站來(lái)進(jìn)行衡量,否則實(shí)際效果會(huì)非常糟糕。
長(zhǎng)滾動(dòng)頁(yè)面,視差等設(shè)計(jì)模式是最近4年內(nèi)才出現(xiàn)的,通過(guò)這幾年的試錯(cuò)和市場(chǎng)驗(yàn)證,我們已經(jīng)擁有了一些頗為值得參考的最佳實(shí)踐:
1、不要害怕長(zhǎng)滾動(dòng)頁(yè)面替代傳統(tǒng)的短頁(yè)面。讓內(nèi)容來(lái)控制頁(yè)面長(zhǎng)度,而非其他方式。
2、考慮使用懸浮導(dǎo)航。使用懸浮式的導(dǎo)航能讓用戶(hù)在長(zhǎng)滾動(dòng)頁(yè)面中更容易定位和頁(yè)內(nèi)跳轉(zhuǎn)。
3、建議使用設(shè)計(jì)元素來(lái)給用戶(hù)以視覺(jué)指引。比如箭頭、動(dòng)效、按鈕之類(lèi)的元素,簡(jiǎn)單快速地引導(dǎo)用戶(hù),讓他們明白如何使用。有些網(wǎng)站甚至?xí)黾游淖终f(shuō)明,諸如“Scroll for more”。
4、如果使用文字說(shuō)明的話(huà),盡量使用準(zhǔn)確的詞匯,諸如點(diǎn)擊按鈕、滾動(dòng)等。
5、稍加鉆研,了解用戶(hù)是如何滾動(dòng)頁(yè)面的。比如,你可以借用 Google Analytics 的“頁(yè)內(nèi)分析”,來(lái)了解有多少用戶(hù)翻頁(yè)查看了更多的內(nèi)容。根據(jù)數(shù)據(jù),你可以作出更有針對(duì)性的改版設(shè)計(jì)。
6、長(zhǎng)滾動(dòng)并不是說(shuō)毫無(wú)限制。你并不需要在一個(gè)頁(yè)面內(nèi)塞入500頁(yè)書(shū)的內(nèi)容,講述你的故事,然后結(jié)束。
7、專(zhuān)注于你的用戶(hù)和目標(biāo)。創(chuàng)建長(zhǎng)滾動(dòng)頁(yè)面的時(shí)候,應(yīng)該明白用戶(hù)也是需要方向感的,所以,你應(yīng)該通過(guò)設(shè)計(jì)讓他們知道所處的位置,能夠通過(guò)合理的導(dǎo)航跳轉(zhuǎn)到其他的位置。
8、加入視覺(jué)線(xiàn)索。
以滾動(dòng)為主交互的設(shè)計(jì),是一把雙刃劍,用對(duì)與用好是同樣重要的。
在長(zhǎng)滾動(dòng)頁(yè)面中,用戶(hù)通常不會(huì)涉及到頁(yè)面間的跳轉(zhuǎn)。仔細(xì)觀察最近幾年的趨勢(shì),最常用的移動(dòng)端設(shè)備,我們的手機(jī),在界面尺寸上基本上穩(wěn)定下來(lái)了,在小屏幕上的滾動(dòng)交互,將會(huì)在未來(lái)越來(lái)越多。
頁(yè)面的概念正在逐步淡化,長(zhǎng)滾動(dòng)頁(yè)面的下一步進(jìn)化應(yīng)該就是“無(wú)頁(yè)面式”的網(wǎng)頁(yè)設(shè)計(jì),實(shí)際上許多設(shè)計(jì)師認(rèn)為這才是網(wǎng)頁(yè)設(shè)計(jì)的未來(lái)。
交互設(shè)計(jì)是長(zhǎng)滾動(dòng)式網(wǎng)頁(yè)的設(shè)計(jì)基礎(chǔ),如果用戶(hù)喜歡你所設(shè)計(jì)的頁(yè)面,并且覺(jué)得它們足夠有趣而直觀,他們是不會(huì)在意內(nèi)容長(zhǎng)短的。
如果你想讓你的網(wǎng)頁(yè)用戶(hù)停留時(shí)間足夠長(zhǎng),你首先應(yīng)該讓內(nèi)容有趣,讓等待也足夠有趣才行。
藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.820esy.cn