中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

什么是網(wǎng)頁(yè)設(shè)計(jì)中的滾動(dòng)設(shè)計(jì)

2022-08-09    分類(lèi): 網(wǎng)站建設(shè)

近年來(lái),,曾經(jīng)的網(wǎng)站設(shè)計(jì)“禁忌”已經(jīng)成為最受歡迎的技術(shù)之一,用戶(hù)開(kāi)始欣賞和喜歡網(wǎng)頁(yè)站中的滾動(dòng)設(shè)計(jì)。滾動(dòng)設(shè)計(jì)擺脫了之前的標(biāo)簽定義,它正在重塑自己去成為交互設(shè)計(jì)的一個(gè)核心元素——這也意味著設(shè)計(jì)師們需要學(xué)習(xí)新的滾動(dòng)設(shè)計(jì)規(guī)則。在本文中,我們將探索滾動(dòng)設(shè)計(jì)的重生,討論一些滾動(dòng)設(shè)計(jì)的利弊,并分析一些技巧。為什么滾動(dòng)條可以重新被人們喜愛(ài)?答案很簡(jiǎn)單,那就是移動(dòng)設(shè)備的遍及。自從移動(dòng)用戶(hù)超越桌面用戶(hù)以來(lái),世界各地的UI設(shè)計(jì)師都進(jìn)行了相應(yīng)的調(diào)整。隨著越來(lái)越多的用戶(hù)使用較小的屏幕,滾動(dòng)變得越來(lái)越重要:屏幕越小,滾動(dòng)的時(shí)間就越長(zhǎng)。也有其他因素。比如,人們?cè)诟嗟胤娇梢栽L問(wèn)高速互聯(lián)網(wǎng),使用滾動(dòng)能更快捷地訪問(wèn)信息,而不是從頁(yè)面到頁(yè)面點(diǎn)擊。社交媒體網(wǎng)站的日益強(qiáng)大也推動(dòng)了此技術(shù):滾動(dòng)自然地適應(yīng)了他們豐富的用戶(hù)生成內(nèi)容。正如《2015-2016 年網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)》指南中所解釋的,長(zhǎng)滾動(dòng)與基于卡片的設(shè)計(jì)一起演變。結(jié)合后,這些技術(shù)就可以為用戶(hù)提供源源不斷的小容量?jī)?nèi)容(這非常適合web,尤其是移動(dòng)體驗(yàn))。此外,把內(nèi)容都集中在一屏里而不是使用長(zhǎng)滾動(dòng)的原則被認(rèn)為是一種迷信。根據(jù)實(shí)際研究,事實(shí)是用戶(hù)真的不介意滾動(dòng)。當(dāng)然,這個(gè)迷信之所以流行,部分原因在于,在Javascript和CSS的進(jìn)步之后,滾動(dòng)只被認(rèn)為是一種有意義的設(shè)計(jì)模式。 在此之前,通過(guò)視覺(jué)講故事使?jié)L動(dòng) "有趣" 要困難得多??梢韵胂?,包含文本的長(zhǎng)頁(yè)(偶爾被圖像打斷)并不是一個(gè)非常吸引人的 UI 布局但是一旦你嘗試使用長(zhǎng)滾動(dòng)作為畫(huà)布來(lái)展示開(kāi)頭,中間和結(jié)尾(通過(guò)圖形,動(dòng)畫(huà),圖標(biāo)等),那么你就會(huì)開(kāi)始看到它在吸引用戶(hù)注意力方面具有電影般的力量。事實(shí)上,一些混合模式正在成為滾動(dòng)的最新趨勢(shì)。 例如,我們?cè)谧约旱腢XPin游覽頁(yè)面上使用的 “原地固定滾動(dòng)” 創(chuàng)建了傳統(tǒng)長(zhǎng)滾動(dòng)網(wǎng)站的相同交互式體驗(yàn),而無(wú)需垂直拉伸網(wǎng)站。滾動(dòng)設(shè)計(jì)適合你的產(chǎn)品嗎?每一種設(shè)計(jì)技巧和工具,都有喜歡這個(gè)概念的人和那些討厭它的人。在大多數(shù)情況下,任何一方都不是本質(zhì)上對(duì)錯(cuò)的;因此,在處理此類(lèi)項(xiàng)目之前,權(quán)衡所有注意事項(xiàng)非常重要。滾動(dòng)的優(yōu)點(diǎn):鼓勵(lì)互動(dòng) – 隨著不斷變化的元素不斷刺激,它可以是一種有趣的講故事方法,鼓勵(lì)用戶(hù)交互 - 尤其是高雅執(zhí)行的視差滾動(dòng)。更快 – 長(zhǎng)滾動(dòng)比單擊復(fù)雜的導(dǎo)航路徑更快,并且不會(huì)減慢或限制用戶(hù)體驗(yàn)。如Interaction Design Best Practices中所述,對(duì)時(shí)間的感知通常比實(shí)際時(shí)間的流逝更重要。吸引用戶(hù) – 易用性可促進(jìn)交互性,增加現(xiàn)場(chǎng)時(shí)間。對(duì)于無(wú)限滾動(dòng)網(wǎng)站尤其如此,您可以在其中幫助用戶(hù)發(fā)現(xiàn)他們可能甚至沒(méi)有想到的相關(guān)內(nèi)容。響應(yīng)式設(shè)計(jì) – 頁(yè)面設(shè)計(jì)在具有不同屏幕大小和功能的設(shè)備之間可能會(huì)變得復(fù)雜,但滾動(dòng)有助于簡(jiǎn)化差異。手勢(shì)控制 – 滾動(dòng)似乎與觸摸有著有機(jī)的聯(lián)系,因?yàn)橄蛳螺p掃比在屏幕上不同區(qū)域重復(fù)點(diǎn)擊要自然得多。。 用戶(hù)(尤其是移動(dòng)設(shè)備)通常接受這一方式來(lái)顯示信息。令人愉快的設(shè)計(jì) – 不需要多次單擊即可獲得更快的交互,從而獲得更類(lèi)似于應(yīng)用或游戲的用戶(hù)體驗(yàn)。
Photo credit: Bauer滾動(dòng)的缺點(diǎn)固執(zhí)用戶(hù) –一些用戶(hù)總是毫無(wú)理由地去抵制改變。盡管如此,該技術(shù)現(xiàn)在非常普遍(特別是在移動(dòng)體驗(yàn)期間),可以說(shuō)大多數(shù)用戶(hù)都習(xí)慣了這種技術(shù)。SEO缺點(diǎn) - 只有一個(gè)頁(yè)面可能對(duì)網(wǎng)站的SEO產(chǎn)生負(fù)面影響。迷失方向 - 滾動(dòng)和內(nèi)容之間的斷開(kāi)可能會(huì)使用戶(hù)感到困惑或脫節(jié)。導(dǎo)航困難 – "返回"頁(yè)面上的先前內(nèi)容可能會(huì)很尷尬。為了對(duì)付這種情況,您可以創(chuàng)建一個(gè)持久的頂部導(dǎo)航,其中每個(gè)部分都錨定到頁(yè)面。網(wǎng)站速度 – 視頻或圖像圖庫(kù)等大量?jī)?nèi)容可能會(huì)降低網(wǎng)站速度,尤其是視差滾動(dòng)網(wǎng)站,它們依賴(lài)于 Javascript 和 jQuery沒(méi)有頁(yè)腳 – 使用無(wú)限滾動(dòng)網(wǎng)站,我們建議使用簡(jiǎn)約的"粘性"頁(yè)腳,這樣您就不會(huì)犧牲可導(dǎo)航性。否則,用戶(hù)可能會(huì)因?yàn)轫?yè)面底部缺少進(jìn)一步的導(dǎo)航而感到困惑。撇開(kāi)優(yōu)點(diǎn)和缺點(diǎn)不談,某些類(lèi)型的網(wǎng)站更適合長(zhǎng)滾動(dòng)設(shè)計(jì)。更長(zhǎng)的滾動(dòng)網(wǎng)站更適合……...包含很大一部分移動(dòng)流量(大多數(shù)用戶(hù))...包括頻繁更新或新內(nèi)容(如博客)...有很多信息以單一的方式呈現(xiàn),以便理解(如信息圖)...不包含富媒體,因?yàn)檫@可能導(dǎo)致負(fù)載時(shí)間的消耗社交媒體網(wǎng)站帶有不斷和廣泛的用戶(hù)生成的內(nèi)容,可以很好的進(jìn)行長(zhǎng)滾動(dòng)設(shè)計(jì)(事實(shí)上,早在幾年前,F(xiàn)acebook和Twitter就幫助推廣了這項(xiàng)技術(shù))。另一方面,像電子商務(wù)這樣的目標(biāo)導(dǎo)向的網(wǎng)站——需要連貫的導(dǎo)航——更趨向于保守的頁(yè)面長(zhǎng)度。
Photo credit: Amazon處于中間處境的是像Etsy這樣的網(wǎng)站:一個(gè)用戶(hù)生成產(chǎn)品的網(wǎng)上商店,它使用混合解決方案:幾頁(yè)所謂的"無(wú)限"滾動(dòng),最后以"顯示更多"的號(hào)召性用語(yǔ)結(jié)束。
Photo credits: Etsy
與所有 Web 設(shè)計(jì)趨勢(shì)一樣,不要僅僅因?yàn)榭吹狡渌W(wǎng)站遵循該模式而使用較長(zhǎng)的滾動(dòng)。確保您你的網(wǎng)站符合我們討論的標(biāo)準(zhǔn),否則實(shí)際上你可能會(huì)體驗(yàn)到更差的性能。滾動(dòng)好實(shí)踐長(zhǎng)滾動(dòng)、視差效應(yīng)和類(lèi)似機(jī)制在設(shè)計(jì)領(lǐng)域中仍然比較新(約4年歷史),但仍從試錯(cuò)經(jīng)驗(yàn)中可以獲取一些基本的好實(shí)踐。從 2015 和 2016 的 Web 設(shè)計(jì)趨勢(shì)總結(jié),以下是成功實(shí)現(xiàn)長(zhǎng)滾動(dòng)的一些日常技巧。不用擔(dān)心短滾動(dòng)和長(zhǎng)滾動(dòng)交替使用。 讓內(nèi)容決定滾動(dòng)長(zhǎng)度,而不是反過(guò)來(lái)。 使用短滾動(dòng)主頁(yè)和長(zhǎng)滾動(dòng)著陸頁(yè)(如產(chǎn)品,旅游等)非常好(并且非常受歡迎)。考慮粘性導(dǎo)航,以便用戶(hù)始終可以快速"返回"或從滾動(dòng)中的元素跳轉(zhuǎn)到另一個(gè)元素。將滾動(dòng)與設(shè)計(jì)元素或工具結(jié)合,以便每個(gè)用戶(hù)都能快速了解網(wǎng)站的工作方式。箭頭、動(dòng)畫(huà)按鈕或類(lèi)似的用戶(hù)界面工具是幫助用戶(hù)確定下一步操作的有趣且簡(jiǎn)單的方法。有些網(wǎng)站甚至包含一個(gè)小按鈕,其中包含"滾動(dòng)更多"或"開(kāi)始"等說(shuō)明,來(lái)提高頁(yè)面的導(dǎo)航性。明確區(qū)分滾動(dòng)點(diǎn)擊和其他CTA元素,以便網(wǎng)站獲得所需的交互。做一些研究,看看用戶(hù)如何與滾動(dòng)交互。例如,在 Google 分析中,可以打開(kāi)"網(wǎng)頁(yè)分析"選項(xiàng)卡,查看屏幕下方(第二屏及之后)用戶(hù)的點(diǎn)擊數(shù)。然后,你可以根據(jù)需要調(diào)整設(shè)計(jì)。不要過(guò)分。長(zhǎng)滾動(dòng)并不意味著 500 頁(yè)的連續(xù)內(nèi)容 - 長(zhǎng)滾動(dòng)也可以很簡(jiǎn)單。講述你的故事,然后適可而止,不要喋喋不休 。下面的 Deca 網(wǎng)站只使用了幾頁(yè)長(zhǎng)的滾動(dòng)。專(zhuān)注于用戶(hù)目標(biāo),并接受即使是無(wú)限滾動(dòng)網(wǎng)站也不是真正無(wú)窮無(wú)盡的。 創(chuàng)建長(zhǎng)滾動(dòng)網(wǎng)站時(shí),要了解用戶(hù)仍需要方向感(當(dāng)前位置)和導(dǎo)航(其他可能的路徑)。包括有助于在滾動(dòng)中定位用戶(hù)的視覺(jué)提示,例如左下方用于“七種類(lèi)型的摩托車(chē)騎手”站點(diǎn)的頭盔圖標(biāo)。
Photo credits: MCaleicester滾動(dòng)可能是一把雙刃劍,所以堅(jiān)持使用它的建議用法,以避免它弊大于利。未來(lái)的無(wú)頁(yè)面設(shè)計(jì)長(zhǎng)滾動(dòng)網(wǎng)站不能適應(yīng)所有的情況。盡管我們已經(jīng)看到流行設(shè)備上屏幕大小的起伏和流動(dòng)(或增加和減少),但在可預(yù)見(jiàn)的將來(lái),屏幕尺寸很小。小屏幕需要更多的滾動(dòng)。事實(shí)上,從長(zhǎng)滾動(dòng)到 "無(wú)頁(yè)面" 的設(shè)計(jì)的過(guò)渡已經(jīng)開(kāi)始,一些設(shè)計(jì)師(如數(shù)字遠(yuǎn)程技術(shù)設(shè)計(jì)師)甚至相信這是網(wǎng)絡(luò)的未來(lái)。隨著網(wǎng)站不斷擺脫用戶(hù)思考和使用信息的一些限制,設(shè)計(jì)人員必須更徹底地思考在不同環(huán)境中創(chuàng)建內(nèi)容的好方式。
Photo credits: Photohigh交互設(shè)計(jì)是長(zhǎng)滾動(dòng)網(wǎng)站設(shè)計(jì)的基礎(chǔ)。 如果用戶(hù)喜歡這個(gè)界面,并且發(fā)現(xiàn)它直觀且有趣,那么他們就不會(huì)真正關(guān)注滾動(dòng)的長(zhǎng)度(只要它不是夸張地很長(zhǎng))。你并不總是需要縮短滾動(dòng)長(zhǎng)度 - 你還可以讓滾動(dòng)過(guò)程更有趣??赐赀@篇文章,你開(kāi)始對(duì)滾動(dòng)設(shè)計(jì)感興趣了吧?那么就快去試一試?yán)瞺產(chǎn)品經(jīng)理和UI設(shè)計(jì)師們都可以使用墨刀,很方便地對(duì)產(chǎn)品進(jìn)行滾動(dòng)設(shè)計(jì):把鼠標(biāo)放在頁(yè)面最底部區(qū)域,拖動(dòng)即可調(diào)整頁(yè)面長(zhǎng)度。

文章題目:什么是網(wǎng)頁(yè)設(shè)計(jì)中的滾動(dòng)設(shè)計(jì)
本文地址:http://m.rwnh.cn/news38/187638.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、外貿(mào)建站做網(wǎng)站、網(wǎng)站設(shè)計(jì)外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)
凤城市| 额敏县| 桃源县| 且末县| 铜川市| 潢川县| 衡东县| 高雄市| 莒南县| 鄯善县| 遵义市| 龙口市| 白水县| 若羌县| 垦利县| 朝阳县| 龙江县| 中牟县| 马山县| 安乡县| 略阳县| 东乡| 西青区| 镇巴县| 宁远县| 永新县| 望谟县| 巨野县| 禹城市| 万安县| 连州市| 叙永县| 万宁市| 丰宁| 仙游县| 巴彦淖尔市| 岐山县| 井冈山市| 邢台县| 迁安市| 五峰|