學習動畫的同學應該都知道迪士尼的動畫設計12原則吧？雖然這些原則最初是應用在動畫設計當中，但是實際上在如今的 UI 介面當中，同樣是適用，並且效果拔群的。

這12條原則當中，絕大多數都可以應用到 UI 的動效和互動設計當中，從而讓互動和體驗更上一層樓。這篇文章基於這12條原則，梳理出了 9 條適用於 UI 設計的原則，一起來看看吧：

想要學習或提升設計可以去：https://www.aaa-cg.com.cn/?wkc

1、擠壓和拉伸

在動畫當中，擠壓和拉伸主要體現在物件在受到重力影響的情況下，物體的表現，這種動畫效果能夠體現出質量、重量和柔韌感。當彈球在撞擊地面的時候，會呈現出這樣的擠壓和拉伸。在UI 介面當中，擠壓和拉伸則多呈現在按鈕類的元素上。

2、預備動作

預備動作，通常指的是提前告知使用者即將發生的事情，讓設計和使用者的預期貼合起來。一個角色要將箭射出去，他需要抬起手臂向後拉，你會清晰地看到射箭之前「引而不發」的狀態，然後你會對於箭射出有所預期。在使用者介面當中，當你懸停在按鈕之上的時候，按鈕會變化，進入「懸停」狀態，它就昭示著它是可被點選的，這就是它的預備動作。

懸停互動會告訴使用者下一步可以做什麼。

水平滾動的控制元件通常會展示出某些元素的一部分，讓使用者意識到可以滑動互動。

3、時間控制

在傳統的動畫當中，時間控制決定了幀數的繪製數量和內容。幀數越多，動畫就越流暢，相應的內容變化也可能更慢。同時，一個動畫所耗費的時間長短，也會影響到其中角色的表現力和使用者的心情。

時間控制是動畫設計的基礎。時間控制和緩動在動畫編排中發揮著重要的作用，過於漫長的過渡會讓使用者等太久，如果太快，使用者可能會覺得錯過重要的資訊。通常，絕大多數的動畫時長會控制在 200ms 到 600ms 之間，諸如懸停和點選反饋通常會控制在 300ms，而過渡則多為 500ms，你可以參考 Material Design 中動畫的時間處理。

右側的過渡會讓使用者覺得等待太久。

4、漸快和漸慢

現實世界當中，絕大多數的事物的運動規律都遵循緩動的規律。換句話說，沒有東西是突然開始運動，又突然停止的，自由落體也是有加速過程的。

所以，向 UI 元素當中新增緩動效果，能夠讓元素看起來更加自然，符合預期，結合緩動和時間控制，就能夠定義整個介面的運動系統了。

左側的為勻速運動，沒有緩動，而右側加了緩動之後，看起來更加自然。

5、表演與呈現方式

為角色設定舞臺，讓角色像登上舞臺一樣進入場景。換句話說，你需要借用動畫效果來進行「敘事」，考慮如何讓它進入場景，如何呈現，怎樣表演，如何借用鏡頭語言來引導使用者的注意力。

在 UI 介面當中，表演和呈現方式對應的就是元素的放置位置，以及元素如何進入介面，怎麼抓住使用者注意力，進行合理的動畫編排。

當你在思考如何呈現一個音樂 APP 的介面的時候，你可能需要基於使用者喜好來推薦類似歌曲，那麼喜歡/收藏音樂將會是一個重要的互動，和這首歌相關的歌曲可能需要一個獨立的介面來呈現，於是你要凸顯喜歡/收藏按鈕，要讓歌曲從列表中跳出，並且在下方列舉出相關的音樂。

6、弧形運動軌跡

純粹的直線運動的事物很少，從高處丟擲的球的運動軌跡是弧形的。很多時候弧形軌跡更符合自然規律也符合我們的日常認知。

在 UI 介面當中，重要的元素可以使用弧形運動軌跡來呈現，會顯得更加自然舒適，尤其是那種沿著對角線運動的元素。

7、附屬動作

在傳統動畫中，附屬動作主要是用來支撐和輔助主要動作的。比如一個正在行走的角色，他的頭部的擺動和轉動通常會被視作為附屬動作，

在 UI 介面當中，輔助動作可以讓主要的動畫效果更加突出。這些元素在需要使用者反饋的地方，顯得非常有用。所有的微互動幾乎都是基於「附屬動作」的原理來進行設計的。

8、誇張

在很多場景當中，角色需要具備有足夠的吸引人，那麼可以使用某些誇張的動作來吸引更多的關注。

在 UI 介面當中，最重要的互動可以使用誇張的動效來強化，引起使用者的注意。Material Design 當中的 FAB 動效就是一個最典型的誇張式的動效，它最終的靜態效果是很吸引人的，因為它將一個按鈕的色彩擴充套件到整個介面，並且在所有元素的最上層，強調到了極致。

使用 FAB 動效來進行誇張

在支付類APP中使用誇張的效果來強化

9、跟隨動作和重疊動作

沒有任何一種物體會突然停滯，通常運動是一個接著一個的。還有一個更加簡潔的表述為「動者恆動」。想象一下一隻兔子從高處跳下，當兔子開始運動的時候，它的耳朵會隨著運動而自然地偏移和擺動，當兔子落地的時候，身體基本靜止之後，它的耳朵可能還在動。前一種情況是「跟隨動作」，視差滾動就是典型的跟隨動作。而後者則是「重疊動作」，前一個動作停止之後，某些部分仍然處於運動的狀態。

在 UI 介面當中，可以讓元素在靜止之前，呼叫一個其他的互動和動效，從而讓整個動效和互動更加流暢連貫，且自然。

模態彈出框的跟隨動作，在底層動效停止之後依然運動，然後才靜止下來。

在滾動的時候，卡片和底部的元素以不同的速率運動，類似視差。

結語

在實際的設計過程中，UI動效和互動應當根據實際的情況來靈活調整，讓整個 UI 介面在保持自然的情況下，在正確的位置加入不同的互動、動效以及微互動，這會讓整個互動和 UI 介面本身的功能更深層地結合到一起。

設計的本質，其實不是創意，而是溝通

怎麼樣透過設計來提升使用者體驗呢？我們剖析下如何用設計語言方式進行溝通：

1.簡潔化

好設計是看似容易的設計。

例如hao123網站設計究竟好在何處？不花哨、不花哨、還是不花哨，特點樸素直觀，使用者一目瞭然

從數學的角度而言，少即是多，證據是每一個數學公理。從設計師角度而言，美依賴於一些精心選擇的結構性元素，而不是依賴於裝飾品點綴和堆砌。裝飾品本身並不是壞事，只有當它被用來掩蓋結構的蒼白時，才變成了一件壞事。

2.一致性

好設計是能夠再複製的設計。

因為對於使用者來說，同樣的控制元件樣式／操作反饋都觸發了相同的事情，而不同的介面視覺語言打亂了使用者的介面使用慣性， 給產品易用性打了折扣。

3.整體協調美觀

設計師巴克明斯特·富勒曾經說過：“當我開始研究一個問題時，我從不刻意去想它漂亮不漂亮；但一旦我完成這項工作，若它不好看，我就知道我失敗了。”

局座說過：長的漂亮的,戰鬥力就高

有效的就是最好的！

以上個人拙劣見解。

使用者體驗是使用者在使用產品過程中的一種主觀感受，影響使用者體驗的因素有:系統、使用者和場景三個方面。隨著網際網路的發展，產品不斷更新迭代，以使用者為中心、以人為本越來越得到重視。使用者體驗包含戰略層、範圍層、結構層、框架層、表現層五個層次，每個層次都需要合理的設計以保證良好的產品體驗。以下將從互動設計層面及視覺設計層面來分析設計如何提升使用者體驗。

一， 視覺設計層面

視覺層面即產品的表現層，是使用者體驗五層模型的最頂層，是產品與使用者接觸溝通的視窗，這一層將內容、功能和美學彙集到一起展現給使用者一個完美的產品，起到至關重要的作用，它需要滿足其他四個層面的所有目標。

首先，整個產品需要有一個統一的設計風格，符合目標使用者的審美習慣，並具有良好的引導性。如蔚來汽車整體採用冰藍色作為品牌的主色調，其app延續這一色彩，整體給使用者年輕、時尚、科技、未來感的視覺體驗。

其次，需保持產品視覺的一致性，統一的色彩、標題大小、彈窗樣式、圓角角度、線條粗細等讓介面層次分明，給使用者清晰的視覺引導，有助於提升使用者的閱讀體驗。

第三，情感化設計：將品牌獨有的元素情感化表達融入到產品中，既能提升品牌形象又能拉近產品與使用者之間的距離，常見的下拉重新整理，空狀態頁面，活動頁面等透過情感化設計可大大緩解使用者的焦慮增加趣味性，如轉轉的小熊、京東的小狗、天貓的小貓等。

二，互動設計層面

互動設計的目的是讓使用者能簡單高效使用產品，因此，“可用性”是衡量一個產品體驗的重要指標，“可用性”涉及到易學性、易用性等因素。

1. 易學性 當產品有新的功能或較為複雜的操作時，可透過引導、場景指示的方法來提升使用者體驗，如淘寶的頻道導航，具有較強的操作指導作用。

2. 易用性 堅持一個螢幕一個任務原則，以減輕使用者的資訊負擔；導航清晰原則，減少層級，讓使用者輕鬆找到所需資訊；單手操作原則，隨著螢幕的不斷變大，單手操作變得越來越難，儘量做到單手也可完成重要的操作。

當然，可用性還包含系統的有效性、使用者滿意等因素。良好的使用者體驗存在每個細節中，如頁面跳轉增加動畫效果可提升體驗的流暢度及友好性，loading介面增加微動效可減少使用者等待的焦慮等。

當今，是一個注重個性化體驗的時代，做好服務設計和產品設計是使用者體驗的核心，在未來的發展中必將透過體驗驅動,引領創新設計的發展。

我們常常探討使用者體驗，那麼使用者體驗到底是什麼？許多人認為，使用者體驗更多的是關乎產品的可用性（產品是如何運作的）。而實際上，使用者體驗遠不止於一個“能用”的東西，它是關於使用者的主觀感受的。透過設計為可用的產品增添令人愉快的體驗，同用戶產生情感聯絡，這才是使用者體驗設計所要做的事情。

當我們談及使用者體驗的時候，“愉悅”這個詞是最常聽到的一個形容詞。讓使用者愛上一個產品，“愉悅”的使用者體驗就是核心要素，這也是設計力圖達到的效果。在今天的文章當中，將會分享一些創造令人愉悅有趣使用者體驗的常見技巧。

設計令人愉悅的瞬間

令人愉悅的設計是建立產品和使用者之間情感紐帶的核心，這些令人愉悅的瞬間會讓使用者感受到，有設計師在產品背後為這一刻的愉悅而奮鬥。下面是創造令人愉悅使用者體驗的5個實用技巧。

1、定製化體驗

定製化的體驗是整個產品的使用者體驗設計當中至關重要的一個組成部分。這是目前UX設計當中的一個大趨勢，使用者也希望當他們訪問你的網站或者APP的時候，它帶來的體驗是符合使用者個人的預期和需求的。

看看世界上訪問量最大的網站和服務是怎麼做的吧：亞馬遜會根據使用者之前的購買記錄來匹配和推薦商品：

Youtube 是另一個不錯的案例。你可以在你的Youtube 的首頁上看到系統給你定製化的內容，而這些也同樣是基於你之前的訪問記錄來進行最佳化推薦的。亞馬遜的定製化內容會盡量引起使用者的注意以達到促銷的目的，與亞馬遜的設計相反，Youtube 為使用者的定製化內容通常會盡量不引起使用者的注意。

需要定製化內容的不僅僅是APP和網站，推送通知同樣需要包含個性化的內容設計。Netflix 就是個極好的案例。他們會在每次釋出新的節目或者每季劇集更新的時候，為使用者進行個性化的內容通知。由於Netflix 瞭解每個使用者的觀看習慣和喜好，他們會在使用者喜好的節目和劇集更新的時候，才給使用者傳送通知。

2、品牌個性

在你的APP或者網站中展示個性是非常有效的一種提升體驗的方式，你的使用者會以此來識別品牌並且與你產生共鳴。正如同 Aarron Walter 在他的《Designing for Emotion》中所寫：“個性是一種神秘的力量，它吸引一部分人，並且讓我們與另外一部分人區分開來。”

以MailChimp 為例，他們在品牌的個性化上有許多值得學習的地方。在使用者加入 MailChimp 之後，設計師會在引導使用者發出第一封郵件的過程中，安排許多幽默和獎勵的設計，來讓整個流程順滑而有意思。MailChimp 為何要如此呢？根據研究，使用者在使用新的服務傳送第一封電子郵件通常都不會太輕鬆，但是這些充滿個性又令人愉悅的驚喜，會讓使用者感受到樂趣，不會緊張。

3、動效

正如我們所熟知的，動效現在成了APP和網頁中溝通上下文、呈現細節、傳遞語義並且強化設計感的重要手段。當然，作為一種輔助手段，動效還是需要在在其他的功能的基礎上才能發揮作用。之所以說動效是創造優秀使用者體驗的組成部分，很大程度上是因為它在互動中的重要作用。

動效能做的事情並不少：

·動效可以讓你的介面更加鮮活

·動效能夠抓住使用者的注意力

·動效能夠彌補報錯和失誤給使用者帶來的沮喪感

在Photojojo 這個電商網站當中，設計師就透過動畫創造出令人難忘的有趣狗屋體驗。網站的角落隱藏了許多有趣的設計，其中有一個下拉按鈕被標識為“不要拉”，這種設計常常會令人好奇它的實際效果，當你拉它的時候，會有一隻手伸下來，將頁面向上拉，將你帶到產品詳情部分。

4、聲音反饋

設計師對於視覺設計的重視程度一直都很高，但是不要忘了，聽覺體驗對於使用者同樣非常重要：

·聲音同樣可以為使用者帶來有用的資訊反饋·使用音訊可以設計出更加個性化的產品

5、減少障礙

減少障礙是最大限度的減少使用者在設計過程中能給予使用者在使用產品過程中所產生的沮喪感。其中，同理心是設計的關鍵：你應該對於使用者可能碰到的問題有所預測，識別使用者產生焦慮的所在，並將這些時刻轉化為取悅使用者的機會。

當用戶使用Twitter 帳號登入其他服務的時候，他們會擔心Twitter 自動推送資訊，經驗豐富的營銷人員充分利用這一心理，在連線帳號的時候，強調不會發推，從而獲取了使用者的信任。這樣一個短小的句子就搞定了多數潛在使用者所擔憂的問題。

結語

不要低估愉悅感對於使用者體驗的提升，這種體驗的核心在於使用者，它雖然不是功能，但是能調整、引導使用者的情緒。想要讓使用者對於你的產品欲罷不能？那麼你還是應該仔細研究一下使用者體驗~

使用者體驗是一整套系統，包括但不限於：介面、流程、互動等，簡單講：好看又好用又有用的東西，使用者體驗絕對差不了。

那如何透過設計提升使用者體驗呢？答案也是透過這幾方面入手：精簡流程、突出重點、明確互動、符合預期、精煉介面、符合使用者預期等，這些地方做到位了，使用者體驗自然就提升了。

使用者體驗這東西，其實有點虛無縹緲但是又有跡可循，簡單說下我的見解。

每個人的瀏覽習慣都不一樣，有的比較喜歡華麗一點的，有的喜歡簡單一點的，但是他們每個人都有一個共同點——找自己需要的東西。

個人感覺：提高使用者體驗首先做的是頁面，將頁面做的簡單一點（如果你能保證做的華麗而不亂更好），讓使用者一眼就能找到自己進來的原因，而不是瀏覽了一圈之後發現自己連進來的目的是什麼都忘了。其次就是內容，要做到內容確實是客戶想要看到的，而不是客戶在點進來之前看到的是一個樣子，進到頁面後發現是另一個樣子，這樣客戶點進來就直接推出去了，何來的體驗之說。

以上是個人見解，不喜勿噴。