你的界面設(shè)計不是迪士尼電影

之前的一篇關(guān)于無償動畫的短文確實引起了人們的共鳴。群眾們的回復是熱烈的,運用超棒的動畫界面設(shè)計表達了傳達了人們的感受。

最清楚的一點,我不是不贊成情感化的用戶界面設(shè)計。從遠處講,我有一個關(guān)于動畫的問題就是動畫可能最終只會妨礙用戶。

有能力的UI 設(shè)計師最明顯的標志之一就是克制。是去了解你所選用平臺的各種功能款式并且不去使用它們(直到出現(xiàn)完美的機會)。

與其抱怨使用了不必要的動畫,我會盡力去建議去在可以從中收益的場景中使用動畫。

我期待聽到您對此主題的意見和建議。

如果您喜歡這篇文章,您也可能會喜歡

一個人為的例子

以下是我提出的一個快速,認為的例子來展示UI動效設(shè)計。雖然這是一個夸張的例子,但實際上有許多用戶界面設(shè)計中存在這樣花哨的動效。

此鏈接查看這次演示的實時版本https://www.ux-app.com/device/view?s=MRGG9547&l=&pg=35687

這就像我們已經(jīng)放棄了視覺假象,并將其替換為行為特征,我們的數(shù)據(jù)就像是有果凍制成或者懸掛在隱形橡皮筋上的。

停止恣意使用動畫

動畫就像咒語。如果你過度使用它,它會失去所有影響。

動畫使用準則

我聽說一些UI設(shè)計師建議將迪士尼的動畫制作準則作為UI設(shè)計師的必讀內(nèi)容。這的確有助于加深UI作為娛樂的概念,但這總會降低用戶操作效率。

許多UI動畫設(shè)計師似乎都將用戶界面是為動畫組合。除非你希望皮克斯能夠接受它,否則你應該避免使用動畫造成的“Bounce”或”Ease-in-Out”.

什么是界面?

在計算中,接口是共享界面,計算機系統(tǒng)中的兩個單獨組件通過該邊界交換信息。

界面(計算)—?維基百科,免費的百科全書

https://en.wikipedia.org/wiki/Interface_(computing)

界面負責調(diào)解信息交換,這就使得界面變得相當重要。設(shè)計師面臨的挑戰(zhàn)是確定他們的設(shè)計何時會妨礙這一中心UI原則。

UI設(shè)計中的動效

以下是一些對我有用的簡單原則,我建議給你們的:

·確保每個動畫的使用對用戶有用。“它看起來很漂亮”是沒資格使用的

·將動畫持續(xù)時間保持在不超過300毫秒

·避免線性動畫漸漸消逝。它會使動效看起來緩慢,無趣和機械

·99%的動畫應使用簡單的“緩入”或“緩出”。

你很少需要過于炫酷的動畫,像Spring,Bounce等。

一些UI示例

查看此演示的實時版本https://www.ux-app.com/device/view?s=MRGG9547&l=1&pg=366

上面的演示使用了強度升級的動畫

·在第一次點擊時,通知會淡入

·在第二次單擊時標簽會抖動

如果用戶持續(xù)點擊按鈕,則可以使用針對該問題可選的模式來覆蓋按鈕吸引用戶的注意力

此外,按鈕本身可以更改的顏色來指示后續(xù)失敗的操作。

卡片擴展

這是卡片視圖的簡單但非常有效的實現(xiàn)方法之一,通常在移動設(shè)備上使用。我非常喜歡這種互動,是因為它允許用戶維護上下文。即使我們對列表的看法模糊不清,我們也知道它位于擴展視圖后面。

點擊這里查看查看演示實時版本https://www.ux-app.com/device/view?s=MRGG9547&l=1&pg=36662

我故意稍微延遲了顯示卡片的關(guān)閉圖標,我使用了一個動畫轉(zhuǎn)換,可以激活位置和不透明度。

這將用戶的注意力吸引到需要知道的能夠接觸卡片的重要UI元素。

重要層次性

作為設(shè)計人員和開發(fā)人員,我們所做的最重要的事情之一就是確定UI的哪些元素比其他元素更重要。我們用多種方式做到這一點

·通過使用標題

·加下劃線或使文字變粗

·使用顏色

·使用形狀和圖像

·動效

你不會將文檔中的每個句子都放入標題中。同樣的原則也適用于動畫。將UI中的每個動畫元素都當做書面文檔中的標題。它應該用于表示元素的重要性。過度使用它會簡化您的層次結(jié)構(gòu)并淡化您嘗試通信的消息。

功能與美學動畫

程序眼經(jīng)常根據(jù)“code smell”討論代碼?!癱ode smell”指的是編程代碼的功能,這些代碼可能不是完全糟糕的,但它們確實激發(fā)經(jīng)驗豐富的程序員對潛在的糟糕代碼的敏銳感覺。

如果你開始聽到團隊成員使用諸如“令人愉快”這樣的術(shù)語來談?wù)搫赢嫞敲茨愕摹癲esgin smell”警報應該開始消失。為動畫而去做動畫(幾乎總是)是糟糕的設(shè)計。

請記住,對于動畫要少用。功能總是勝于純粹的美學動畫。

Sophie Paxton

不要讓你的動畫以你理解的用戶方式進行。這就是為什么飛機的導航界面設(shè)計不使用任何動畫的原因。在你的用戶界面添加一個不必要的300ms動畫可能不會殺死任何人,但它會讓你的用戶感到煩躁,而不是“讓他們愉悅”!

最后的看法

總的來說在界面設(shè)計中使用的動畫可以為高速寬帶快速傳達重要信息。傾向于功能性而不是純粹的美學設(shè)計,并且要珍惜用戶投入你界面設(shè)計的每分每秒。

三米工作室“TF三缺一與他們的經(jīng)紀人”小組的每周優(yōu)質(zhì)設(shè)計文章漢化計劃09篇--《你的界面設(shè)計不是迪士尼電影(Your UI isn’t a Disney?Movie)》。

Medium原文鏈接:https://startupsventurecapital.com/your-ui-isn-t-a-disney-movie-703f7fbd24d2

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 我之前的一篇關(guān)于無償動畫的短文確實引起了人們的共鳴。群眾們的回復是熱烈的,運用超棒的動畫界面設(shè)計表達了傳達了人們的...
    Lisawei520閱讀 583評論 0 0
  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明AI閱讀 16,232評論 3 119
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,326評論 25 708
  • 每天家里都是爭吵,原本樂觀的我慢慢的產(chǎn)生一種抗拒,大人總是自私的為了爭吵勝利的快感而忽略了孩子的感受,殊不知,無論...
    何以解憂唯有簡書閱讀 176評論 0 0
  • 這幾天還在繼續(xù)想著湮滅。 女主是個生物學家。從生物學來講,人類成長是因為細胞分裂。從一個到無限個,從單細胞到復雜的...
    湮滅降臨閱讀 348評論 0 1

友情鏈接更多精彩內(nèi)容