網站建設

曾經在網站設計了一個完整的復興禁忌最流行的技術之一,近年來隨著用戶正在尋找一個新的愛和贊賞地點滾動是非常必要的。 脫落的舊觀念,滾動是改頭換面作為核心交互設計元素——這也意味著設計師需要學習新規則。

圖片來源: Fitbit

在這篇文章中,我們將探索滾動的重生,討論一些利弊,列出一些小貼士的技術。

為什么滾動是重生

簡單的答案是移動設備。

自從 手機用戶已超過桌面用戶 ,UI設計人員都有相應的調整。 和這么多的用戶在小屏幕上,滾動是變得越來越有必要:屏幕越小,滾動的時間越長。

但也有其他因素。 接入高速互聯網可以在更多的地方,使滾動更快的方式獲取信息,而不是從頁面點擊。 社交媒體網站也助長了國力的增強技術:用戶生成內容的滾動自然地適應他們的財富。

導游解釋說 網頁設計趨勢2015 & 2016 長和滾動發展 基于設計 。 結合時,讓你的技術為用戶提供無窮無盡的的內容(這是適合web特別是移動體驗)。

圖片來源: Upworthy

另外,阻礙滾動的折疊線以上學說是現在被認為是神話。 真相, 根據實際研究 是,用戶真的不介意。 的干擾的做法都是輸給了距離沿著甚至和平滑滾動。

神話成為受歡迎的部分原因,當然,是滾動才認真考慮作為一個先進的Javascript和CSS后故意設計模式。 在此之前,它是更加困難使滾動通過視覺故事的“性感”。 正如你想象的,很長的頁面的文本(偶爾打斷了圖片)并不是一個非常迷人的UI布局。

圖片來源: 這艘船

但一旦你開始接近長期滾動畫布,說明開始,中間,和結束(通過圖形、動畫、圖標等),然后你開始看到它是片狀的力量捕獲用戶的關注。

事實上,一些混合模式成為最新的趨勢在滾動。 例如,我們使用的“固定的滾動”靠自己UXPin 訪問頁面創建相同的互動體驗傳統的長卷垂直網站網站不做伸展運動。

滾動是正確的嗎?

每個設計技術和工具,有些人愛這個概念,討厭它的人。 在大多數情況下,任何一方在本質上是對還是錯; 這就是為什么重要的是要考慮所有因素之前解決這樣的一個項目。

滾動的優點:

• 鼓勵互動——永遠不變的刺激變化的元素,它可以是一個有趣的講故事的方法,鼓勵用戶交互,特別是 tastefully-executed視差滾動 。

• 快長滾動速度比點擊是一個復雜的導航路徑,不慢下來或限制用戶體驗。 中描述的交互設計的最佳實踐 , 感知 時間往往比實際的時間更重要。

• 建議用戶, 易用性促進互動,增加現場時間。 特別是無限滾動的網站,在那里你可以幫助用戶發現相關內容,他們甚至可能沒有想到。

• 響應設計, 頁面設計可以在設備有不同的屏幕尺寸和功能復雜,但滾動有助于簡化的差異。

• 姿態控制, 向下滾動似乎有機聯系聯系,因為刷容易得多比重復水龍頭在屏幕的不同區域。 用戶(特別是移動)通常接受這是一個顯示信息的方法。

• 可愛的設計, 幾個點擊會導致更快的交互更應用或游戲的用戶體驗。

圖片來源: 鮑爾

滾動的缺點:

• 頑固的用戶, 別介意,為什么有些用戶總是抗拒改變。 盡管如此,這項技術是現在普遍的(特別是在移動體驗),這可能是有把握地說,大部分的用戶都習慣了技術。

• SEO的缺點- 只有一頁對網站的搜索引擎優化可能有負面影響。 (學習如何減少這些SEO缺點,看看這個 Moz視差滾動塊 和 這對無限滾動Quicksprout塊 )。

• 迷茫, 滾動和內容之間的分離會讓用戶混淆或脫節的。

• 導航困難- 會尷尬的“回去”之前的頁面上的內容。 為了應對這一問題,你可以創建一個持久的頂部導航,每一項是固定在一個頁面部分

• 網站的速度, 大塊的內容,如視頻或圖像畫廊可能會減慢網站的速度,尤其是parallax-scrolling網站,依靠Javascript和jQuery(查看 本教程 學習如何創建視差網站沒有網站速度慢)。

• 沒有頁腳- - - - - - infinite-scrolling網站,我們推薦一個精益“粘性”頁腳,這樣你就不會犧牲適航性。 否則,用戶可能被缺乏進一步導航頁面的底部。

優點和缺點,長期滾動技術比別人更適合某些類型的網站。 不再滾動網站和最適合的內容和設計計劃,…

• …要包括很大一部分移動交通(大多數用戶)

• …包括頻繁的更新或新內容(如博客)

• …有很多信息在一個奇異的方式理解(比如一個信息圖表)

• …不含富媒體,因為排水這可能會導致加載時間

社會媒體網站,持續和廣泛的用戶生成內容,做好長期滾動(事實上,Facebook和Twitter幫助推廣這項技術年前)。 另一方面,面向目標的網站更喜歡電子商務——要求一致的導航——往往對保守的頁面長度。

圖片來源: 亞馬遜

中間地帶將是一個網站像Etsy,在線商店為用戶創造的產品,它使用一種混合解決方案:所謂的“無限”滾動幾頁,結束的文字-動作”給我?！?/p>

照片學分: Etsy

像所有的網頁設計趨勢,不使用長卷軸僅僅因為你見過其他網站遵循的模式。 確保你的網站符合我們討論的標準,否則你可能會 體驗更差的性能 。

滾動的最佳實踐

長的滾動,視差效果和類似的機制仍然是相對較新的領域的設計(~ 4年),但仍然有一些基本的試錯了一些基本的最佳實踐。

總結了從 網頁設計趨勢2015 & 2016 ,這里有一些日常小貼士成功實施滾動。

1. 不要害怕替代長與短滾動。 讓滾動的長度決定的內容,而不是相反。 很好(和非常流行)使用short-scroll主頁和長卷著陸頁面(如產品、旅游等)。

2. 考慮粘性的導航,比如使用的 自由放養的設計 ,這樣用戶可以迅速“回到”或從元素元素滾動反彈。

照片學分: 自由放養的設計

3. 建議與設計元素滾動或工具,每個用戶可以快速查看這個網站是如何運作的。 箭頭,動畫按鈕或相似的用戶界面工具很有趣和簡單的方法來幫助用戶確定下一步做什么。 一些網站甚至包括一個小按鈕指示“滾動的更多”或“開始”來幫助導航站點與非常規技術。

4. 明確區分滾動點擊或水龍頭和其他的號角,這樣你的網站得到所需的交互。

5. 做一些研究,看看用戶與之交互的滾動。 在谷歌分析,例如,你可以打開“頁面分析”選項卡,查看有多少人點擊以下褶皺。 基于數據,然后可以根據需要調整設計。

6. 不要走極端。 長滾動并不意味著500頁的連續的內容——很長也可以簡單的滾動。 告訴你的故事,然后停止。 不要強迫它。 十 下面的使用只有幾頁的滾動。

照片學分: Decasrl

7. 關注你的用戶目標和接受,甚至無限滾動網站并不是無止境的。 當創建longer-scrolling網站,了解用戶仍然需要一種取向(他們當前的位置)和導航(其他可能的路徑)。

8. 包括東方視覺線索,幫助用戶在滾動,如頭盔使用左手邊的圖標” 七種類型的摩托車騎手 “下面的網站。

照片學分: MCaleicester

滾動可以是一把雙刃劍,所以堅持其推薦使用,以避免它弊大于利。

Pageless未來的設計

長滾動網站是不會去任何地方。 當我們看到起伏(或增加和減少)在受歡迎的設備屏幕的大小,小的在這里在可預見的未來。 和小屏幕需要更多的滾動。

實際上,從long-scrolling過渡到“pageless”設計已經開始,和一些設計師(像那些數字心靈感應)甚至認為它是 未來的網絡 。 隨著網站繼續流的一些約束用戶如何思考和消費信息,設計師必須更徹底思考在不同環境中創建內容的最佳方式。

照片學分: Photohigh

交互設計 是長滾動網站設計的基礎。 如果用戶界面和直觀的找到它和有趣的使用,那么他們不會介意滾動的長度(只要不是殘酷地長)。

你并不總是需要縮短線——你可以等待更有趣。

如果你發現這篇文章有用,看看免費的電子書 網頁設計趨勢2015 & 2016 。 除了long-scrolling最佳實踐之外,您還將得到小貼士9其他成功的網頁設計的趨勢。 的技術說明和160 +分析例子從一些最好的網站。