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

     來新的項目組后發(fā)現(xiàn)我司產(chǎn)品很喜歡加動效，動效需求很多，造成了端內(nèi)各種互斥以及視覺焦點凌亂的情況出現(xiàn)。

     站在交互的角度考慮，動效是用來輔助設(shè)計的一種形式，而不是作為一個需求來無腦添加的~

       下面這句寶強哥哥說的話很恰當(dāng)?shù)恼f明動效的作用，就是要精準(zhǔn)輔助設(shè)計在用戶場景恰當(dāng)使用的。

于是交互這邊寫了一套產(chǎn)品設(shè)計動效體驗設(shè)計原則和規(guī)范

原則進(jìn)而也可以演變?yōu)樵O(shè)計師自己的走查表。

以后再做動效類的需求時，設(shè)計師就可以利用原則進(jìn)行自我走查，

也可以利用原則駁回產(chǎn)品的無理需求。

下面具體講一下整體的產(chǎn)出過程。

因為能力有限，首先是看了下官方的原則參考作為整個產(chǎn)品的基礎(chǔ)性原則。記錄在此算是自己的設(shè)計筆記和知識積累。

第一個就是經(jīng)典的iOS人機交互指南

第二個是新版Material Design原則，詳細(xì)的可以點這里：https://material.io

Material Design專門針對動效也產(chǎn)出了很多細(xì)致的內(nèi)容，具體簡單翻譯如下

Motion－為什么要做動效

1 不同視圖之間的焦點引導(dǎo)。

2 當(dāng)用戶完成了一個手勢后，提示用戶將會發(fā)生什么

3 明確元素之間的層級和空間關(guān)系

4 當(dāng)程序在后臺運行時，分散用戶的注意力

（例如獲取內(nèi)容或載入下一個視圖）

5 潤色整個app：個性化、令人愉悅

1  響應(yīng)（Responsive）

     迅速精確響應(yīng)用戶用戶所觸發(fā)的內(nèi)容

在移動設(shè)備上的長動畫大約是300-400ms，短動畫大概是150-200ms。過長的動畫讓人感覺遲鈍，過短的動畫讓人覺得難以看明白。

2  自然（Natural）

     通過模仿真實世界的力，而展現(xiàn)了自然的運動過程。

真實世界的物體可以被重量、表面摩擦力影響很快的加速或減速。所以動效設(shè)計也是不會發(fā)生突然停止或啟動，都是會有一個加速度或者減速度。（紅色沒緩動，藍(lán)色有緩動）

3  可察覺的（Aware）

     可以被周圍環(huán)境察覺的，包括用戶和周圍其他的元素

  作為過渡元素，和周圍元素的運動是精心安排的，可以通過這個過程看出他們之間的關(guān)系。

4  有引導(dǎo)意向的（Intentional）

     動效能使焦點在對的時間聚焦在對的點

轉(zhuǎn)場動效有助于引導(dǎo)用戶進(jìn)行下一步的交互。

動效可以傳遞不同的信號，例如，一個操作是否不可用。

動效能使用戶關(guān)注特定對象。

Material Design告訴我們，好的動效設(shè)計應(yīng)該遵從以下3點：

1、速度——不應(yīng)讓用戶不必要的等待。

2、明確——轉(zhuǎn)場動畫應(yīng)該明確，簡單，一致。應(yīng)該避免一次有太多的元素動效。

3、統(tǒng)一——動效是由速度、響應(yīng)性、和意向所統(tǒng)一的。在App中的任何動效體驗都應(yīng)保持一致。

同時，Material Design在動效的時間上也給出了參考

移動設(shè)備

移動設(shè)備上，動畫通常會持續(xù)300ms左右：

大而復(fù)雜的全屏移動設(shè)備上，通常需要更長的持續(xù)時間，375ms左右。

物體進(jìn)入屏幕的持續(xù)時間大概是225ms。

物體離開屏幕的持續(xù)時間大概是195ms。

動畫超過400ms會顯得慢而拖沓。

大屏幕移動設(shè)備

在大屏幕移動設(shè)備上，同一時間段內(nèi)，物體移動較長的距離速度比移動較短的距離更快。越大的屏幕物體移動的持續(xù)時間應(yīng)該更長，這樣動效不會顯得太快。

平板設(shè)備

平板設(shè)備上動效的持續(xù)時間應(yīng)該比移動設(shè)備長30%左右。移動設(shè)備上300ms的持續(xù)時間，在平板設(shè)備上應(yīng)該是390ms左右。

可穿戴設(shè)備

可穿戴設(shè)備上的動效時間應(yīng)該比移動設(shè)備上短30%左右。移動設(shè)備上300ms的持續(xù)時間，在可穿戴設(shè)備上應(yīng)該是210ms左右。

第三個參考原則是：Fluent Design System

詳細(xì)網(wǎng)址：https://fluent.microsoft.com

根據(jù)官方原則的盤點和詳細(xì)閱讀之后，我開始對端內(nèi)的動效設(shè)計進(jìn)行了總結(jié)和歸納

這里就不方便用我們自己的產(chǎn)品來舉例了，就直接寫出最后的整理總結(jié)。

當(dāng)然除了基礎(chǔ)功能動效還有一類就是英雄動效

是在基礎(chǔ)功能部分都滿足的情況下，輔助其他有趣的動畫或功能。能讓人眼前一亮，娛樂用戶。并讓他們一想到動畫就能想到該產(chǎn)品或者反之。

這類動效，沒有明確的劃分，應(yīng)該按照不同場景配合功能、品牌設(shè)計動效。

下面就開始講述我自己最后產(chǎn)出的端內(nèi)動效體驗設(shè)計原則

第一個原則是基礎(chǔ)原則，也就是在接到動效類需求時的最基礎(chǔ)原則

“目的明確原則"

具體來說也就是明確需求背景，動效的商業(yè)價值以及預(yù)期目標(biāo)，防止增加無關(guān)動效。

1、明確添加動效的產(chǎn)品背景

設(shè)計初期，明確需求，明確數(shù)據(jù)與業(yè)務(wù)背景。 綜合衡量整個產(chǎn)品，不為設(shè)計而設(shè)計，不為創(chuàng)新而創(chuàng)新。

2、明確希望到達(dá)的預(yù)期目標(biāo)

設(shè)計師能夠?qū)有τ脩魩淼母兄幸粋€大致的預(yù)期。 明確日后用何數(shù)據(jù)來考證動效的價值（如UV 點擊率、留存率、滿意度、認(rèn)知度、輿情反饋）

3、明確是否有必要用動效來解決，同時也要明確產(chǎn)品的開發(fā)能力

4、明確需要傳達(dá)的產(chǎn)品信息，

這里的信息會有很多可能，可以是：趨勢、來源、去向、結(jié)構(gòu)、情感、屬性，等。運用合理的動效傳遞信息，能大大增強產(chǎn)品的表現(xiàn)力，同時也能減少用戶的理解成本

第二個原則也屬于基本設(shè)計的原則，就是“一致性原則”

動效屬于整個產(chǎn)品組件的一部分，應(yīng)該符合產(chǎn)品的一致性。

1、視覺一致性：動效中出現(xiàn)的組件樣式、UI樣式的一致性

2、交互一致性：邏輯原則、出現(xiàn)消失、用戶點擊、轉(zhuǎn)場的一致性。

同時也應(yīng)該緊隨市場及設(shè)計規(guī)范發(fā)展，保證動效的適宜。當(dāng)無法確保用戶體驗的動效可以采用實驗的方法來驗證，嘗試創(chuàng)新。

以下的土豆視頻，動效設(shè)計就充分的展示了品牌的一致性，品牌元素貫徹始終。

第三個原則是效果適宜原則，主要是由視覺設(shè)計師把控，完成對動畫效果的呈現(xiàn)。

頻率不過快或過慢， 動效能否復(fù)合用戶預(yù)期，

動效涉及多個元素或者界面層級時，除了有效表現(xiàn)元素屬性變化以外，還應(yīng)將這些元素之前的關(guān)系傳遞出來：譬如：主次、聯(lián)動、并列先后、因果，等。

在此基礎(chǔ)上，給視覺同學(xué)充分發(fā)揮的空間，展示創(chuàng)意。

第四個原則是交互同學(xué)需要整體把控的，我把它定義為聚焦用戶原則，也就是時刻要以用戶視角來審視。

1、應(yīng)順應(yīng)用戶的操作路徑與真實場景。

2、遵循真實的自然物理狀態(tài)

這個原則上面官方原則也反復(fù)的提及過，符合真實物理狀態(tài)才是符合用戶預(yù)期和感知的動效。

      在宏觀物理世界（人類可觀測）的所有的運動，都是符合經(jīng)典物理定律的，動效的如果不自然，也就是源自運動方式并不是人們?nèi)粘Ｉ钪谐Ｓ^察到的，用戶就無法從運動想象其背后的物體屬性及關(guān)系。

      動效展現(xiàn)自然且復(fù)合物理現(xiàn)象 配合的交互手勢自然友好 提示愉快而不突兀 保障多元素的自然銜接與過渡。

3、給用戶以控制感

考慮動效能否被用戶關(guān)閉且關(guān)閉后的場景體現(xiàn)，都是能夠在用戶把控范圍內(nèi)的。

4、無視覺干擾與障礙

     我們客戶端因為有多個PM，提的需求太多，累計起來就會出現(xiàn)動效互斥的情況，沒有互斥也會出現(xiàn)視覺焦點凌亂，這時候交互要做的就是， 防止動效與其它功能操作發(fā)生干擾或沖突，同時也防止與其它動效發(fā)生干擾與沖突，在一些場景下多個動效出現(xiàn)時的時間間隔也需要控制。

最后一個原則是情感傳達(dá)原則，也是動效能夠發(fā)揮亮點作用的核心， 保持一致性與官方原則的基礎(chǔ)上，考慮用戶的心理情感，用動效創(chuàng)新體驗。

例如大眾點評這個東西就有很強的感染力~~

文章結(jié)束~~如果有幫助歡迎點贊關(guān)注我哦~~

本文由©xiafan原創(chuàng)發(fā)于Ui中國。未經(jīng)許可，禁止轉(zhuǎn)載。