網頁元素與頁面的“轉場”設計

來源:互聯網
上載者:User

  在電視作品中,段落與段落、情境與情境之間的過渡或轉換,叫做轉場。為了使電視片內容的條理性更強、層次的發展更清晰、在場面與場面之間的轉換中,需要一定的手法。

  網站也是類似的,一個完整的網站由若干頁面組成,而每個頁面又由若干元素組成。為了使網站內容的條理性更強、操作邏輯更清晰、使用者體驗更好、使用者轉化率更高,在不同元素與頁面的轉換中,也需要一定的技巧。

  過渡效果

  a 漸入漸出

  這種方式非常常見:比如在酷狗音樂盒中關閉音樂後,聲音在幾秒鐘內逐漸停止,而不是馬上消失;凡客首頁廣告頭圖的輪換也採取了漸入漸出的方式。

  b 過程示意

  用動態效果表示當前進度、處理過程或反饋結果。

  · 當前進度:最常見的是進度條效果,明確表現出當前的進度,減少使用者等待時的焦慮。

  · 操作過程及反饋結果:

  比如刪除淘寶收藏夾中的商品,該商品會在逐漸向上滑動的同時漸層消失。這個動作清楚的表示正在刪除的過程和結果,而不用再另外提示使用者刪除成功。

  優眾網的收藏提示,則是一段小星星的動畫。

  · 視覺引導:在凡客誠品的用戶端中,把商品加入到購物車時的引導動畫,既表現了添加的過程及完成這一操作的反饋結果,又間接提示了購物車的位置,一舉兩得。

  c 過渡動畫

  當頁面元素產生變化的時候,最好能有一些過渡效果。比如畫面的漸層切換、下拉式清單的動態伸展、浮層的逐漸消失等等。突然的變化會給人生硬的感覺。

  舉個有趣的小例子:淘寶的收藏夾,滑鼠滑過時,原先的下三角會旋轉180°成為上三角。

  d 360度旋轉產品

  使用者在網上購物時,希望能夠儘可能多的瞭解商品的外觀,360°旋轉功能更好的滿足了這個需求。其實這種方式很早就有了,但是一直沒怎麼普及。

  頁面跳轉

  頁面跳轉(無論是原頁面重新整理還是新開視窗)給使用者帶來停頓感,影響使用者體驗。

  a 避免頻繁翻頁

  翻頁可以適當減輕閱讀的疲勞感,增加一點點的成就感,且賦予內容更明顯的物理位置(反覆尋找比較容易)。但是它畢竟在一定程度上打斷了我們的閱覽(尤其當網速很抱歉的時候),這可能導致使用者提前離開。因此在一些內容關聯性不強的網站上,可以嘗試適當減少翻頁的次數——最簡單的方式是增加一頁的顯示數量,但要考慮使用者的承受極限(不同的產品情況不同,需要酌情考慮)。

  比如新浪微博的頁面很長,當滾動到底部時,會立刻載入後面的內容(快到幾乎感覺不到)。如此反覆幾次,才會看到頁面底部的翻頁組件。

  一些新興的電子商務網站甚至沒有傳統的翻頁組件,整個頁面一氣呵成。比如優眾網,使用滾輪或上下方向鍵就可以繼續瀏覽商品。

  b 避免立即跳轉

  對於一個操作流程來說,每多一個頁面,就會增加使用者的流失率。而點選連結就意味著一定要刷出一個新頁面嗎?看看下面這些緩兵之計吧。

  對於關聯性較弱的連結:

  · 使用浮層:當說明內容不多時,可以使用浮層提示來代替在新頁面中開啟連結。

  · 使用浮層+二次連結:

  當說明內容很多,但重點內容不多時,可以提煉重點資訊在浮層上,剩下的放到連結中。

  比如下面這個例子,滑鼠滑過“查看收費標準”,出現了一個小浮層,裡麵包含的資訊是經過提煉的,可以滿足一部分人的需要。點擊浮層中的“查看收費標準”連結,才能在新視窗開啟該頁面,查看更具體的相關內容。

  雖然有點出乎意料,但這樣可以盡量減少頁面的跳轉次數,使操作的連續性不被過多破壞,同時減少使用者流失。

  · 使用錨點連結+二次連結:當說明內容很多,其中的重點內容也不少時,可以採用此法。錨點連結適用於長頁面,但這種快速的位置切換可能讓人感覺不明所以。但長頁面上又不適合增加頁面滾動的過渡效果,容易讓人眼暈。因此可以提煉重點內容在錨點即將跳轉的位置上以減少頁面長度,同時增加頁面滾動的過渡效果。

  比如支付寶的支付頁面,點擊右上方的“付款遇到問題”,可視地區從A逐漸過渡到B(頁面緩慢下沉),同時B地區高亮2秒左右,再逐漸還原。若此時使用者依然沒有找到答案,可以點擊左下角的“更多協助”連結,在新頁面中查看更多內容。

  這樣不僅能減少跳轉次數,更因為有過渡效果,使用者就會很清楚整個頁面的布局和之前的行為過程,不會因為畫面快速切換而感到手足無措。

  下面舉一個使用錨點連結的反例:

  在噹噹網的“收貨地址薄”中點擊“修改按鈕”,畫面立刻變為:

  每次遇到這種情況都感覺很突然。其實頁面本身並沒有改變,只是可視地區往下移了一些。但是使用者看不到移動的過程,只能看到改變的結果。

  兩點問題:1. 既然這個頁面並不長,從上方移動到下方至少應該有一個過渡效果,不然使用者不明白到底發生了什麼。2. 對於類似的操作內容使用錨點連結是否合適?看到“修改”這個動作,使用者可能會本能的想到彈窗,然而彈窗所能承載的資訊量比較有限,且位置不好控制(一般出現在頁面中央,離操作觸發地區可能較遠),那麼有什麼其他的解決方式呢?

  讓我們看看“頁面內展開”的方法。

  對於關聯性較強的操作或連結:

  · 頁面內展開:適合於對現有內容的擴充,它能夠即時的反饋使用者的操作,帶來更自然的體驗。 優點:所能承載的資訊量比彈窗大;過渡自然;在操作地區附近顯示展開的內容,連貫性更好。缺點:後面的內容會隨之下移,攪亂位置感。

  回到剛才噹噹網修改地址的例子,由於關聯性很強,因此是否可以用頁面內展開的方式呢?

  · 頁面內展開+二次連結:

  若內容非常多,可以在展開部分的底部再增加一次連結。

· 快顯視窗:

  適用於內容比較簡潔,需要使用者重點關注,且頁面內元素位置需固定的情況。但彈窗往往位於頁面中央,離觸發操作地區可能會比較遠。

  當進入列表頁時,很多使用者習慣同時點擊多條連結,並在新視窗開啟。一是因為網速可能較慢,在等待新頁面開啟的同時不如回到列表頁看看其他的內容;二是因為使用者可能在列表上看到多條感興趣的內容,因此逐一在新視窗開啟,避免漏掉。而優眾網是這樣處理的:

  沒有多餘的新開視窗,原頁面也沒有完全改頭換面,使用者不容易迷失,操作路徑更清晰。彈窗比切換頁面速度要快,但是要考慮到彈窗承載的資訊量有限,且難以控制彈出的位置。

  · 彈出子項:介於頁面內展開和彈窗之間,適用於內容不是很多,操作不是非常重要,且頁面內元素位置需固定的情況。比彈窗人性化(彈窗一般位於頁面中央,而彈出子項位於操作地區附近),比頁面內展開的方式更穩定(頁面位置不會變化),缺點是所能承載的內容比較有限。

提示效果

  恰到好處的提示可以讓使用者產生正確的心理預期,防止誤操作,也使操作過程更加流暢連貫。

  a 滑鼠移至上方提示

在豆瓣個人首頁上,滑鼠移至上方左側欄目會出現

表徵圖,這樣我們就會知道這部分地區是可以移動的。

b 操作定位

  對於容易誤操作的介面(尤其是手機介面,手指會擋到操作地區),需要一個定位提示。

  當內容離title比較遠時,也需要一個定位提示。

c 報錯提示

  報錯提示最好位於操作地區附近,否則使用者的視線需要來回移動,破壞了視線、操作、思維的連貫性。

d 從屬關係提示

  僅僅是加一個小箭頭,也會讓不同元素之間的邏輯關係清晰很多。

其他

  為了防止機器人的惡意登入,我們不得不填寫各種奇異的驗證碼,不僅機器辨認不出來了,正常人也是經常會因此而輸錯。豆瓣則使用了英文單詞變形的方式,讓我們在輸入時的思維是連貫的,不易出錯。

  最後想說的是,其實還有更多沒有想到的東西,僅以此拋磚引玉,希望能帶給觀者一點點啟發。

  文章來源:legene的互動設計部落格

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。