首頁 > 新聞 > 設(shè)計(jì) > 滾動視差設(shè)計(jì)指南
滾動視差設(shè)計(jì)指南
視差效果,原本是一個天文學(xué)術(shù)語,當(dāng)我們觀察星空時,離我們遠(yuǎn)的星星移動速度較慢,離我們近的星星移動速度則較快。當(dāng)我們坐在車上向車窗外 看時,也會有這樣的感覺,遠(yuǎn)處的群山似乎沒有在動,而近處的稻田卻在飛速掠過。許多游戲中都使用視差效果來增加場景的立體感。說的簡單點(diǎn)就是網(wǎng)頁內(nèi)的元素在滾動屏幕時發(fā)生的位置的變化,然而各個不同的元素位置變化的速度不同,導(dǎo)致網(wǎng)頁內(nèi)的元素有層次錯落的錯覺,這和我們?nèi)梭w的眼球效果很像。我看到多家產(chǎn)品商用視差滾動效果來展示產(chǎn)品,從不同的空間角度和用戶體驗(yàn),起到了非常不錯的效果。
背景層的滾動(最慢)
貼圖層(內(nèi)容層和背景層之間的元素)的滾動(次慢); 按照現(xiàn)實(shí)生活的經(jīng)驗(yàn),越遠(yuǎn)的景物移動越慢。
內(nèi)容層的滾動(可以和頁面的滾動速度一致) 。
我們讓三個圖層的滾動速度不一致,就做出了簡單的差異滾動效果。
需要有一個視覺引導(dǎo)元素貫穿整站,。這個視覺引導(dǎo)會讓你在場景種有個代入感。仿佛你就隨著這個引導(dǎo)元素來體驗(yàn)整個故事。在對設(shè)計(jì)稿分層時,設(shè)計(jì)者要定位好背景層,貼圖層和內(nèi)容層之間的關(guān)系。
根據(jù)頁面自身的功能來定義是否需要貼圖層,貼圖層的存在是為了更有效的傳達(dá)視覺效果,但如果它成為了干擾,就會違背了我們使用的初衷
內(nèi)容層的展現(xiàn)是最主要的,無論背景層和貼圖層有多少花哨,在設(shè)計(jì)師設(shè)計(jì)過程中,內(nèi)容層對用戶的展示是最優(yōu)先的。
網(wǎng)站從Listen everywhere(隨處可聽)、Search & discover(搜索與探索)、Build your collection(建立你的收藏)、Follow & share(關(guān)注和分享)、Radio(電臺)這五個緯度來介紹spotify這個音樂產(chǎn)品。運(yùn)用合適的背景圖片營造五個場景,介紹產(chǎn)品的五種特性。設(shè)計(jì)者將網(wǎng)頁分為內(nèi)容層和背景層上下兩層,運(yùn)用滾動時的速率差異形成滾動視差。一屏一個場景,也可以稱為一個畫面,五個場景相互獨(dú)立,通過縱向的滾屏來實(shí)現(xiàn)切換。
這個網(wǎng)站設(shè)計(jì)者也是采用多場景式,將網(wǎng)頁橫向分割成多個場景,場景與場景之間通常顏色區(qū)分很明顯,用以分割場景。場景內(nèi)設(shè)計(jì)者將近景的部分做了高斯模糊,從而巧妙的形成了景深視覺效果。在技術(shù)實(shí)現(xiàn)上,除了利用了不同分層滾動速率不一樣外,還限定了相應(yīng)元素的顯示范圍。滾動時超出范圍的部分會隱藏掉,形成被遮擋的視覺上的分層效果。
這是一個產(chǎn)品的介紹網(wǎng)站,設(shè)計(jì)者非常有意思,以多場景的形式介紹了產(chǎn)品的幾大功能,同時在這個過程中又以產(chǎn)品本身為線索貫穿所有的場景。有點(diǎn)像是故事型和多場景型的結(jié)合。
畢竟視覺設(shè)計(jì)師輸出的視覺稿都是靜態(tài)圖片,而滾動視差網(wǎng)站時一個隨著滾動不斷變化的,所以設(shè)計(jì)時與傳統(tǒng)網(wǎng)頁有很多不同。在設(shè)計(jì)初期設(shè)計(jì)師要判斷這個頁面適不適合采用滾動視差。在決定采用滾動視差之后就需要設(shè)計(jì)者整理現(xiàn)有的內(nèi)容資料,將其故事化或場景化,然后根據(jù)構(gòu)思設(shè)計(jì)出關(guān)鍵狀態(tài)的視覺設(shè)計(jì)稿。傳統(tǒng)網(wǎng)頁設(shè)計(jì)師做到這一步基本上工作就已經(jīng)完成,可以交給其他人不管了。但是滾動視差的網(wǎng)站不行,視覺設(shè)計(jì)的工作才剛剛開始,這時,你需要負(fù)責(zé)跟重構(gòu)設(shè)計(jì)師講解你的設(shè)計(jì)思路,你需要怎么分層怎么運(yùn)動。在重構(gòu)設(shè)計(jì)師實(shí)現(xiàn)的時候通常并不會一帆風(fēng)順,通常會因?yàn)閷?shí)現(xiàn)成本等各種問題需要設(shè)計(jì)師返回去重新修改設(shè)計(jì)稿。通過反復(fù)的溝通,反復(fù)的磨合才能完成預(yù)想中的漂亮的滾動視差網(wǎng)站。
- 基于用戶創(chuàng)新
界面設(shè)計(jì)日新月異,夢創(chuàng)義堅(jiān)持基于用戶需求的界面創(chuàng)新設(shè)計(jì)……
- 服務(wù)設(shè)計(jì)思維
互聯(lián)網(wǎng)的格局發(fā)生的改變,在我們進(jìn)行設(shè)計(jì)服務(wù)時更是考慮不同用戶、不同……
- 洞察用戶心理
洞察用戶有意識和無意識的行為以及心理特征通過構(gòu)造一系列的服務(wù)來促進(jìn)……
- 查看更多 >>
最新新聞Latest News
- 中小型企業(yè)網(wǎng)站建設(shè)完應(yīng)該如何營銷
- 很多中小型企業(yè)往往糾結(jié)于以下10個問題:一、我們起步比別人晚,我們的……
- 做企業(yè)網(wǎng)站到底做給誰看?
- 設(shè)計(jì)經(jīng)常時不時的遇到一些企業(yè)客戶,常常搞不清楚誰會真正看你的企業(yè)網(wǎng)……
- 傳統(tǒng)企業(yè)進(jìn)軍移動互聯(lián)網(wǎng),從移動云網(wǎng)站開始
- 移動互聯(lián)網(wǎng)是移動通信和互聯(lián)網(wǎng)融合的產(chǎn)物,其發(fā)展的重要基礎(chǔ)便是智能手……
- 網(wǎng)站建設(shè)和運(yùn)營五大細(xì)節(jié)決定用戶黏性
- 網(wǎng)站的成功離不開搜索引擎優(yōu)化,更離不開最基礎(chǔ)最根本的用戶群體,如何……
- 2015年值得關(guān)注的電子商務(wù)5大趨勢
- 線上線下銷售的界線正在變得越來越模糊。在2015年,這一趨勢仍將繼續(xù)!