動效設計基礎(二):動效的應用

作者:佚名 來源:騰訊UED 時間:2016-07-08 標簽: 動效設計

在上一篇文章《動效設計基礎(一):緩動與運動曲線》中,我們討論了動效的幾種常見形式以及緩動的重要性。那么,我們為什么要用動效呢?除了酷炫好玩以外,動效在用戶體驗設計中其實發揮著很重要的作用。在本文中,我們就來看看動效設計在用戶界面設計中的應用。

一、吸引注意力

人類天生就對運動的物體格外注意,因此UI動效自然是吸引用戶注意力的一種很有效的方法。在iOS鎖屏上,唯一的動效就是“滑動并解鎖”幾個字上從左向右運動的高光。這種動效盡管細微,但還是能引起用戶注意。同時也在引導用戶滑動的方向:

?

當用戶輕觸Safari的地址欄時,界面發生了3個變化:

(1)地址欄寬度變窄,出現取消按鈕

(2)出現書簽

(3)鍵盤彈出

在這幾個動畫中,幅度最大的動作是鍵盤彈出。這樣把用戶的注意力吸引到鍵盤上,有利于接下來要進行的輸入操作。

通過動效來提示用戶操作比傳統的“點擊此處開始 ”這樣的提示往往更直接,也更美觀。在Hitman Go,這款游戲的開始界面上,標題中的“Go”同時也是開始游戲的按鈕。游戲的設計者讓這個按鈕有規律性地跳動來提示用戶點擊。

?

 

二、提供反饋

在觸摸屏上點按虛擬元素,不像按下實體按鈕一樣能夠感覺到明確的觸覺反饋。此時,動效就成為了一種很重要的反饋途徑。比如在Android Material Design設計語言中,界面元素會伴隨著用戶輕觸呈現圓形波紋:  

以及在iOS輸入解鎖密碼出錯時,小圓點會來回晃動,模仿搖頭的動作來提示用戶重新輸入:

?

有些動效反饋非常細微,但是組合起來卻能傳達很復雜的信息。例如我們天天都見到但很少去思考的一個動效,iOS的相機對焦:

這個對焦反饋其實依次提供了相機三個狀態的信息: 首先,對焦框由外向內出現。這種瞄準式的動作是在告訴用戶,相機正在努力聚焦中: 

然后,聚焦框閃爍,表明鎖定聚焦和曝光:

最后,聚焦框消失,提示用戶可以拍攝了:

在這短短不到三秒的時間里,通過三個動畫就向用戶展示了相機的對焦過程。

 

三、加強方向感

當我們為移動界面設計頁面間的切換效果時,例如查看照片、進入聊天等,合理的動效能幫助用戶建立很好的方向感,就像設計合理的公路和路標能夠幫助人們認路一樣。一個優秀的案例就是iOS相冊的設計:

用戶輕觸照片后,照片是從列表中的位置上放大。這樣就建立了放大的照片與列表中縮略圖的聯系,用戶能很確信現在打開的照片就是自己點擊的那張。相應地,點擊返回,照片就縮小到列表上的位置,指引用戶找到瀏覽的位置:

如果不采用這樣的縮放動畫,而是從右側進出,就建立不了照片和列表之間的聯系了:

這種保持內容上下文關系的縮放動效在iOS的很多界面中都能見到,例如主屏幕的文件夾、日歷和App切換界面:

 

四、傳遞深度信息

動效除了表現元素在界面上的位置、大小變化,還可以用來表現元素之間的層級關系。借助陀螺儀和加速度傳感器,讓界面元素之間產生微小的位移從而產生視差效果,這樣可以將不同層級的元素區分開來。例如iOS主屏幕的視差效果:

這樣的效果是如何產生的呢?元素“距離”屏幕“越遠”,由運動帶來的位移就越大,當多層元素同時運動時,就可以產生視差的錯覺了。這種手法在動畫片和橫向滾動的游戲(如超級瑪琍)中經常用到。

我們在制作一個新聞H5專題時,也運用了類似的手法,讓用戶就像看立體全景圖片一樣來瀏覽新聞圖片:

?

 

五、小結

在本文中,我們討論了動效的四個重要的應用場景:

(1)吸引注意力

(2)提供反饋

(3)加強方向感

(4)傳達深度信息

通過以上的案例和討論,我們不難意識到,不能把動效作為讓產品酷炫的手段,也不能把它當作產品的某種功能或者亮點。動效是為用戶使用產品的核心體驗服務的,只有設計好產品的核心體驗,并合理使用動效才能最大程度地發揮動效的優勢。

注:部分圖片來自 Apple iOS 7 Tech Talks 2013 – User Interface Design for iOS 7 Apps.

via:

推薦文章

最新文章

熱門標簽

快乐炸金花 和龙市 | 定远县 | 饶平县 | 晋江市 | 兰州市 | 涟源市 | 秦安县 | 大理市 | 宜兰县 | 霸州市 | 东至县 | 仙桃市 | 义马市 | 巩义市 | 西平县 | 海阳市 | 依兰县 | 双柏县 | 乌海市 | 若尔盖县 | 永和县 | 衡南县 | 保山市 | 米林县 | 锦屏县 | 南川市 | 保靖县 | 顺昌县 | 青阳县 | 怀来县 | 邮箱 | 皮山县 | 酒泉市 | 绵竹市 | 靖宇县 | 安阳县 | 遂溪县 | 长春市 | 横峰县 | 遂溪县 | 石嘴山市 | 通山县 | 天等县 | 昆山市 | 宜丰县 | 高碑店市 | 罗定市 | 太仓市 | 贺州市 | 自贡市 | 上高县 | 独山县 | 邮箱 | 秦安县 | 嘉定区 | 江陵县 | 钟祥市 | 福海县 | 三原县 | 祁阳县 | 松原市 | 班玛县 | 大荔县 | 濉溪县 | 容城县 | 门头沟区 | 沂南县 | 寿阳县 | 白朗县 | 东阿县 | 阳高县 | 长岭县 | 巨野县 | 镇雄县 | 秦安县 | 新和县 | 治多县 | 德钦县 | 邛崃市 | 双鸭山市 | 和平县 | 武义县 | 定南县 | 澜沧 | 和顺县 | 揭阳市 | 湾仔区 | 西乌珠穆沁旗 | 凯里市 | 仁布县 | 林甸县 | 孝义市 | 涿鹿县 | 花莲县 | 温宿县 | 江津市 | 东阳市 | 扶风县 | 内江市 | 西乌珠穆沁旗 | 江永县 | 孟村 | 武功县 | 宁安市 | 唐河县 | 耒阳市 | 老河口市 | 郯城县 | 许昌县 | 项城市 | 鄯善县 | 安岳县 | 茶陵县 | 奈曼旗 | 红河县 | 江西省 | 荃湾区 | 枣庄市 | 班戈县 | 呼和浩特市 | 屏山县 | 德惠市 | 泸溪县 | 县级市 | 澎湖县 | 彰化县 | 青铜峡市 | 蓬安县 | 苍溪县 | 九江县 | 青田县 | 安吉县 | 松原市 | 淳化县 | 德兴市 | 丽江市 | 岢岚县 | 凤翔县 | 哈尔滨市 | 高青县 | 忻城县 | 曲靖市 | 南华县 | 湄潭县 | 资源县 | 文山县 | 武隆县 | 抚州市 | 壶关县 | 富源县 | 蓬莱市 | 庄浪县 | 青田县 | 南江县 | 汾西县 | 武夷山市 | 钦州市 | 扎囊县 | 读书 | 浑源县 | 和龙市 | 海盐县 | 张家港市 | 禹州市 | 汤原县 | 屯门区 | 信宜市 | 长治县 | 团风县 | 大城县 | 隆安县 | 麦盖提县 | 岢岚县 | 信阳市 | 庆阳市 | 东乌 | 金川县 | 个旧市 | 定西市 | 武功县 | 湛江市 | 闽清县 | 淳安县 | 家居 | 嫩江县 | 普定县 | 安阳市 | 沙雅县 | 额尔古纳市 | 岚皋县 | 东乌珠穆沁旗 | 绥阳县 | 甘肃省 | 巍山 | 吉木乃县 | 探索 | 澄迈县 | 大姚县 | 班戈县 | 洛阳市 | 常州市 | 买车 | 邓州市 | 乾安县 | 柳江县 | 微博 | 盐城市 | 油尖旺区 | 嵊州市 | 邵阳县 | 高台县 | 台东市 | 兴城市 | 洛扎县 | 阿克陶县 | 昌吉市 | 汶川县 | 长沙县 | 平远县 | 哈尔滨市 | 元朗区 | 太白县 | 汤阴县 | 贺兰县 | 宝清县 | 巴东县 | 丰宁 | 时尚 | 观塘区 | 沈阳市 | 安庆市 | 长乐市 | 富裕县 | 即墨市 | 霍邱县 | 正定县 | 渭源县 | 江孜县 | 菏泽市 | 峨山 | 万年县 | 富蕴县 | 平邑县 | 共和县 | 彩票 | 洮南市 | 上犹县 | 东阿县 | 怀化市 | 信丰县 | 馆陶县 |