交互小技巧!淺聊四個主流的頁面間跳轉(zhuǎn)動效

1 評論 12244 瀏覽 221 收藏 7 分鐘

最近一直在做交互規(guī)范總結(jié)的工作,在不斷梳理頁面間跳轉(zhuǎn)邏輯的同時,發(fā)現(xiàn)頁面間的邏輯關(guān)系并不能和頁面間跳轉(zhuǎn)的動效很好的結(jié)合上。雖然只是零點幾秒的切換動效,卻能在一定程度上影響用戶對于頁面間邏輯的認知。為了輸出詳細的規(guī)范,花了大量時間把玩現(xiàn)在公司線上的產(chǎn)品以及國內(nèi)外優(yōu)秀的APP,尤其是蘋果、谷歌自己開發(fā)的APP。(如果某些方面在設(shè)計規(guī)范中并沒有給出答案,就在原生APP中找答案吧?。?/p>

轉(zhuǎn)場動效也是在APP中應(yīng)用最多的動效,連接兩個頁面。通過合理的動效讓戶能更清楚我從哪里來,現(xiàn)在在哪,怎么回去等一系列問題。初次接觸產(chǎn)品,恰當(dāng)?shù)膭有巩a(chǎn)品頁面間的邏輯關(guān)系與用戶自身建立起來的認知模型相吻合,操作后的反饋符合用戶的心理預(yù)期。(這種認知與預(yù)期一部分來自長時間使用電子設(shè)備的使用習(xí)慣,一部分來自對現(xiàn)實世界的物理環(huán)境認知)。

我將現(xiàn)在主流的轉(zhuǎn)場動畫分為四類,并結(jié)合了一些使用場景和例子。

彈出

場景:

多出現(xiàn)于信息內(nèi)容頁面,用戶將絕大部分注意力集中在內(nèi)容信息本身上。當(dāng)信息不足或者展現(xiàn)形式上不符合自身要求,臨時調(diào)用工具對該頁面內(nèi)容進行添加、編輯等操作。在臨時頁面停留時間短暫,只想快速操作后重新回到信息內(nèi)容本身上面。

Tool? ?Tool

例子:

社交類APP如Tweeter發(fā)表推文;工具類APP如Evernote中新建筆記;基本大部分蘋果原生APP頂部的工具調(diào)出都采用這種方式

下面并不完全屬于頁面間的切換,但是使用場景很相似且歸到一類

當(dāng)功能較多時有可能需要多個按鈕而又不好將如此多的臨時調(diào)用工具堆在頁面上,則通過一個按鈕觸發(fā)顯示一系列功能,同時主要的信息內(nèi)容頁面并不離開用戶視線,始終提醒用戶你來的這里的初衷。

app主要功能都集中在一個頁面上,側(cè)面彈出調(diào)出其他頁面的導(dǎo)航入口,但這些次要頁面也都屬于臨時調(diào)出

slide

例子:

Facebook中的快速和聯(lián)系人通訊 ;與地圖關(guān)系很大的APP如Uber Google地圖 。(但Linkedin為了盡可能把feed流的空間擴大而將導(dǎo)航隱藏在側(cè)滑出的邊欄中用著很不方便,作為職場社交,所關(guān)注人發(fā)表的信息只是APP功能的一部分,發(fā)現(xiàn)人與工作也是相對重要的功能,所以頁面間需要頻繁切換。而這樣的導(dǎo)航設(shè)計讓用戶在切換選項過程中付出了很大的成本,久之則不愿意再麻煩的去切換,慢慢APP喪失掉了原本屬于職場社交的一部分重要功能。)

側(cè)滑

場景:

當(dāng)頁面見存在父集子集的時候,也是最常見到的一種轉(zhuǎn)場動效?;究吹竭@樣的動效,用戶就會在頭腦中形成樹的模型——哪些內(nèi)容在屬性上相似,量級相同,以及不同層級間的關(guān)系。

List

List

漸變放大

場景:

頁面post了很多同等級信息,就如同貼滿了信息、照片的墻面,用戶有時需要近距離看看上面都是什么內(nèi)容,在快速瀏覽和具體查看之間輕松切換。漸變放大的切換動效與左右滑動切換的動效最大的區(qū)別是,前者大多用在張貼顯示信息的面板中,后者主要用于羅列信息的表單中。在張貼信息的面板中左右切換進入詳情總會給人一種不符合心理預(yù)期的感覺,違背了人們在物理世界中形成的習(xí)慣認知。

Board

Board

例子:

Guardian的新聞流 ,Snapchat中的興趣發(fā)現(xiàn) ?社交feed流中的照片 蘋果原生app Photo中的照片流

其他

還有很多其他的切換動畫,它們大多是高度模仿物理現(xiàn)實世界的樣式。比如iBook里電子書翻頁就是在模仿現(xiàn)實世界中翻書的效果,還有Flipboard文章切換的樣式真的是flip的感覺。

產(chǎn)品中的動畫不僅僅局限于轉(zhuǎn)場之間的動效,還有控件,頁面元素的動畫。產(chǎn)品的動畫的樣式,持續(xù)時間和幅度都會在一定程度上影響用戶的使用體驗。把握好這種體驗更要好好學(xué)習(xí)心理學(xué)方面的內(nèi)容,覺得這是個越研究越有趣的領(lǐng)域!

 

作者:米_亓

原文地址:http://www.uisdc.com/website-redirection-interaction-animation

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 這個是拿什么軟件做的?AXURE?

    來自江蘇 回復(fù)