亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

交互技巧,淺析四個(gè)主流的頁(yè)面間跳轉(zhuǎn)動(dòng)效

2016-1-13    用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

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

轉(zhuǎn)場(chǎng)動(dòng)效也是在APP中應(yīng)用最多的動(dòng)效,連接兩個(gè)頁(yè)面。通過(guò)合理的動(dòng)效讓?xiě)裟芨宄覐哪睦飦?lái),現(xiàn)在在哪,怎么回去等一系列問(wèn)題。初次接觸產(chǎn)品,恰當(dāng)?shù)膭?dòng)效使產(chǎn)品頁(yè)面間的邏輯關(guān)系與用戶(hù)自身建立起來(lái)的認(rèn)知模型相吻合,操作后的反饋符合用戶(hù)的心理預(yù)期。(這種認(rèn)知與預(yù)期一部分來(lái)自長(zhǎng)時(shí)間使用電子設(shè)備的使用習(xí)慣,一部分來(lái)自對(duì)現(xiàn)實(shí)世界的物理環(huán)境認(rèn)知)。

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

彈出

場(chǎng)景:

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

Tool   Tool

例子:

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

下面并不完全屬于頁(yè)面間的切換,但是使用場(chǎng)景很相似且歸到一類(lèi)

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

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

slide

例子:

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

側(cè)滑

場(chǎng)景:

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

ListList

漸變放大

場(chǎng)景:

頁(yè)面post了很多同等級(jí)信息,就如同貼滿(mǎn)了信息、照片的墻面,用戶(hù)有時(shí)需要近距離看看上面都是什么內(nèi)容,在快速瀏覽和具體查看之間輕松切換。漸變放大的切換動(dòng)效與左右滑動(dòng)切換的動(dòng)效最大的區(qū)別是,前者大多用在張貼顯示信息的面板中,后者主要用于羅列信息的表單中。在張貼信息的面板中左右切換進(jìn)入詳情總會(huì)給人一種不符合心理預(yù)期的感覺(jué),違背了人們?cè)谖锢硎澜缰行纬傻牧?xí)慣認(rèn)知。

Board                          Board

例子:

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

其他

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

 

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

 

原文地址:Miyuhao

藍(lán)藍(lán)設(shè)計(jì)www.teruid.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔