亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

什么是基于容器的過渡

在界面設(shè)計(jì)中，容器是指封閉區(qū)域的形狀，可以通過是否有可見的形狀邊緣去識(shí)別，例如按鈕、列表、卡片、抽屜等。容器過渡動(dòng)效多用于在組件或全屏視圖之間過渡，目的在于加強(qiáng)界面元素之間的關(guān)系，幫助用戶更好的理解產(chǎn)品架構(gòu)。

有四種不同類型的容器過渡動(dòng)效：

1、容器轉(zhuǎn)換，通常內(nèi)容會(huì)跟隨容器的縮放而轉(zhuǎn)換

2、容器劃入，通常容器大小不會(huì)變化，從屏幕一側(cè)劃入

3、容器呼出，通常用于浮層的出現(xiàn)

容器轉(zhuǎn)換動(dòng)效

容器轉(zhuǎn)換動(dòng)效專為包含容器在內(nèi)的UI元素之間的轉(zhuǎn)換而設(shè)計(jì)，其目的是在兩個(gè)元素/元素與頁(yè)面之間創(chuàng)建可見的連接，將一個(gè)界面元素平滑轉(zhuǎn)換為另一個(gè)元素；它的特點(diǎn)是容器在開始到結(jié)束的過程中一直存在。例如，新增事項(xiàng)按鈕轉(zhuǎn)換為填寫事項(xiàng)頁(yè)面時(shí)，用戶的注意力會(huì)被引導(dǎo)到理解填寫事項(xiàng)頁(yè)面是新增事項(xiàng)按鈕的擴(kuò)展頁(yè)面。

開始設(shè)計(jì)

開始之前需要先了解兩個(gè)概念：運(yùn)動(dòng)規(guī)律和持續(xù)時(shí)間，前者可以還原物理世界中我們對(duì)運(yùn)動(dòng)快慢的理解，讓動(dòng)效貼近用戶認(rèn)知，更加的自然；持續(xù)時(shí)間則影響了動(dòng)效創(chuàng)造的界面連續(xù)性是否流暢清晰。

運(yùn)動(dòng)規(guī)律

借助簡(jiǎn)單的物理知識(shí)，物體的運(yùn)動(dòng)類型可以分為線性與緩動(dòng)，緩動(dòng)進(jìn)一步細(xì)分，可以分為緩入、緩出、緩入緩出。當(dāng)然，還有一些富有表現(xiàn)力的動(dòng)畫形式，比如彈性動(dòng)畫，這類型多用于表達(dá)品牌風(fēng)格，不在我們當(dāng)前的專題討論范圍。

加速緩動(dòng)（Ease-in）：開始慢，結(jié)束快（常用于退場(chǎng)元素）

減速緩動(dòng)（Ease-out）：開頭快，結(jié)尾慢（常用于傳入元素）

緩入緩出（Ease-both）：開頭慢，結(jié)束慢

線性（No-ease/linear）：以恒定速度移動(dòng)的物體

持續(xù)時(shí)間

平均而言，人類的視覺感知需要 230 毫秒，對(duì)于不同的人，它在 70 到 700 毫秒之間變化（更詳細(xì)信息可以通過訪問人類處理器模型從 Wikipedia 獲取更多信息），這就是為什么短轉(zhuǎn)換讓我們感覺太突然，而長(zhǎng)轉(zhuǎn)換讓我們感覺在等待。因此，我們需要根據(jù)動(dòng)畫的復(fù)雜程度調(diào)整持續(xù)時(shí)間，以產(chǎn)生自然清晰的過渡。

容器轉(zhuǎn)換動(dòng)效要點(diǎn)

了解了界面動(dòng)效的基本要素之后，我們應(yīng)該如何開始做容器轉(zhuǎn)換動(dòng)效？以文章最開始的案例為例，從三個(gè)步驟來(lái)分析：

1、容器動(dòng)畫

• 容器形狀和大小的轉(zhuǎn)換：容器的尺寸和圓角半徑從圓形按鈕轉(zhuǎn)化到填充屏幕的矩形，且是個(gè)循環(huán)動(dòng)畫
• 容器轉(zhuǎn)換運(yùn)動(dòng)類型分析：從用戶心理預(yù)期來(lái)思考，觸發(fā)添加按鈕的操作后，應(yīng)用應(yīng)該平滑快速的切換到下個(gè)添加詳情的頁(yè)面，與用戶預(yù)期一致的動(dòng)效應(yīng)該是容器快速加速然后緩慢減速以停止，這種緩動(dòng)方式也是界面動(dòng)效中最常用的，將用戶的注意力引導(dǎo)到下一步的內(nèi)容中。動(dòng)畫參數(shù)

  
  

• 容器動(dòng)畫

2、建立容器與元素之間的聯(lián)系

案例中，“?”圖標(biāo)和添加事項(xiàng)的頁(yè)面都屬于容器中的內(nèi)容。容器的大小變化，帶動(dòng)容器內(nèi)的內(nèi)容同步縮放。

元素固定隱藏在容器內(nèi)，以頂部為縮放中心，縮放容器中的內(nèi)容以適應(yīng)容器的寬度變化，這樣，在容器和內(nèi)部元素之間創(chuàng)建了清晰的連接。

容器與元素動(dòng)畫

容器與內(nèi)容動(dòng)畫

3、通過淡入淡出平滑過渡容器內(nèi)的元素

容器轉(zhuǎn)化動(dòng)效中，容器內(nèi)包含兩種類型的元素，分別是進(jìn)入和退出兩種；

過渡期間退出的元素不應(yīng)該過度引起用戶的注意，因此隨著容器的加速快速淡出，會(huì)用到運(yùn)動(dòng)類型中的加速緩動(dòng)（Ease-in）。相反，隨著容器減速，進(jìn)入的元素逐漸淡入，會(huì)用到運(yùn)動(dòng)類型中的減速緩動(dòng)（Ease-out）。

容器內(nèi)元素在快速縮放的過程中，通過不同時(shí)間段內(nèi)傳入和退場(chǎng)元素的淡入、淡出，實(shí)現(xiàn)不同元素的無(wú)縫對(duì)接，從而實(shí)現(xiàn)平滑的容器轉(zhuǎn)換動(dòng)效。

容器轉(zhuǎn)換動(dòng)效靈活的應(yīng)用場(chǎng)景

將此模式應(yīng)用于涉及容器的所有過渡可建立一致的風(fēng)格，它還使動(dòng)效開始和結(jié)束之間的元素關(guān)系變得清晰，因?yàn)樗鼈冇蓜?dòng)畫容器鏈接；它的應(yīng)用場(chǎng)景非常的靈活性，例如下面另外兩種不同的組合：

容器滑入動(dòng)效

常見的還有另一種情況，一些容器只是通過界面元素從屏幕外滑入，它滑動(dòng)的方向由它關(guān)聯(lián)的元素所在位置來(lái)決定，運(yùn)動(dòng)中也要遵循快速加速然后緩慢減速以停止的運(yùn)動(dòng)規(guī)律；

例如，輕點(diǎn)左上角的導(dǎo)航抽屜圖標(biāo)，抽屜容器從左側(cè)滑入屏幕。

擴(kuò)展閱讀：

《動(dòng)畫設(shè)計(jì)原則》https://uxdesign.cc/motion-in-ux-design-9-points-to-get-started-

《動(dòng)效規(guī)范》e891974dc7eehttps://www.carbondesignsystem.com/guidelines/motion/overview/

若有收獲，就點(diǎn)個(gè)贊吧

Powered by Froala Editor