作者：網站建設公司 來源：佛山網站建設日期：2020-11-11 瀏覽： 次
一個新的設計風格的確立一定會提出他特有的設計原則。而如今設計原則越來越多的關注到了動效的定義。甚至在Android L的Material Design中直接將動效寫入的設計原則中：Motion provides meaning (動畫表達含義)。這里我們就通過一些業(yè)界成熟案例來簡單說明下動效是怎么在設計原則的基礎上定義出來的。
先，我們看下iOS7上的案例。眾所周知，iOS7相對于6設計更加的扁平，去掉了很多質感，保留一些微弱的質感，避免對內容的干擾。這一點遵循了iOS7新的設計理念，內容優(yōu)先(Defer to Content)，透氣(Provide Clarity)?；趦热輧?yōu)先和透氣的原則，對之前繁復的UI進行減負，剔除多余元素，有主次的保留，并統(tǒng)一界面里的質感。
iOS的6到7，外界都評價為設計由擬物到扁平，其實并不準確。iOS7還在延續(xù)擬物的設計，從界面到動效上有主次的保留了擬物的元素。
時間設置控件可以很清楚的說明這個問題，新舊兩版都是模擬波輪這個物體。只是新版為了更加突出內容，放棄了多余的質感，內容的呈現(xiàn)依然用波輪的方式表現(xiàn)。甚至在你波動波輪時會發(fā)現(xiàn)，已選狀態(tài)上依然保留了玻璃的特性，在邊緣會有一個折射效果。由此可以看出，iOS7的簡潔還是保留了相當多的擬物細節(jié)的。
另一個細節(jié)是在開關控件的設計上，新版同樣放棄了原有的光澤的材質，而使用了更加柔和的材質，讓界面更加的主次分明。如果說之前的材質是金屬或者硬塑料的話，那新的材質更加柔和，類似純色的橡膠，更軟，有韌性，可延展。由于材質發(fā)生了根本的變化，那么所顯現(xiàn)的動態(tài)效果也將是不同的。
以上這些都是基于內容優(yōu)先和透氣來做的。iOS7還有一個設計原則是：有層次的表達(Use Depth to Communicate)。在ui界面上表現(xiàn)為前后層次的區(qū)分，通過縱深感表達內容之間的關系。
在動效方面，動畫轉場是對內容層次關系知名的詮釋。通過模擬的縱深效果，讓用戶清晰的知道頁面之間的從屬關系。
雖然iOS6也有類似功能的動畫效果，通過抽屜打開的形式表現(xiàn)層級不關系。但很顯然，新版的效果與確定的設計原則更吻合。
參考： iOS Human Interface Guidelines
說完iOS，說說Android。材料設計(Material Design)是google發(fā)布的系統(tǒng)Android L里提出的設計觀點。其核心設計原則是，材質的隱喻(Material is the metaphor)。
關于材質的隱喻，簡單一點說就是將物理界中不同的材質特性提煉，再按需要結合在一起使用的方法。單從視覺上看，材質的隱喻更多落在卡片式設計上。但材質的特性更多需要通過行為上的互動才能體現(xiàn)出來。通過對象給出不同的反饋，可以了解到它的材質特性。這就需要通過動效的手法來體現(xiàn)。
這里我們舉三個點擊反饋的案例，來說明Android是怎么詮釋材質的隱喻這一設計原則的。
這三個效果都是點擊觸發(fā)的，彼此之間有共同點，但又都不完全相同。我們可以將反饋動畫分解，能更好的說明問題。
漣漪效果+區(qū)塊變暗
漣漪效果+陰影變大
漣漪效果+內容閃白
這時，我們可以發(fā)現(xiàn)，反饋動效都用到了漣漪效果，同時它又是以手指的觸碰位置確定起始位置的。結合起來，很容易就可以想到，這是引用了水的特質：手指觸碰平靜水面，產生圈狀漣漪。
除了漣漪，我們再來分析下另外三個不同的動效：
區(qū)塊變暗 > 內容下沉效果 > 按鈕按下
陰影變大 > 區(qū)塊浮動效果 > 被磁力或意念之類的抓起
內容閃白 > 閃光照射效果 > 拍照時的閃光燈
同樣都是點擊，為什么要賦予內容不同的材質特性呢?這我們就要看下使用場景了。
wifi的選擇菜單，點擊結束后即關閉了;
卡片式的內容區(qū)塊，選擇后應該會展開更多內容;
相冊照片，與拍照的閃光燈可以自然的聯(lián)想到一塊。
所以，結論就是，點擊手勢賦予內容水的材質;而根據不同場景又分別賦予了內容按鈕、懸浮、閃光燈的材質。這就很好的詮釋了材質的隱喻這一概念，根據不同需要將不同的材質特性賦予一個對象。
ok，關于動效與設計原則之間的關系，我們先說到這里，下次我們將會結合自己的案例詳細說下怎么基于設計原則打造適合自己產品的動效。
零度飛易提供品牌
一體化IT網站價格規(guī)劃書
教育網站設計方案建材網站設計方案機械網站設計方案廣告網站設計方案家居照明網站設計方案環(huán)保設備網站設計方案五金網站設計方案電器網站設計方案家具網站設計方案機械網站設計方案
零度飛易網絡科技是國內企業(yè)網絡運營服務商，旗下有“零度飛易”建站品牌，“微度”微信平臺開發(fā)系統(tǒng)及互聯(lián)網網絡推廣，三大業(yè)務是零度飛易戰(zhàn)略發(fā)展服務；零度是新網、阿里云（原萬網）、360建站等公司的戰(zhàn)略合作伙伴。零度飛易三大品牌產品為500+家廣東中小企業(yè)提供過互聯(lián)網網絡服務方案。在深圳-鄭州_成都-上海-北京-合肥-佛山-廣州-東莞-江門地區(qū)企業(yè)提供網站建設、網絡營銷、微信小程序開發(fā)、APP開發(fā)和域名注冊等網站建設服務。
網站制作電話：137 1543 1176
網站開發(fā)QQ:378780108
E-mail：sale@fslingdu.com如何制作網站QQ :378780108
零度飛易是一家專業(yè)網站設計,網站制作、seo優(yōu)化,網站推廣,網站建設的佛山網絡運營公司。零度飛易在家具網站建設、小家電網站建設、服裝網站建設、電器網站建設、機械網站建設等行業(yè)的網站設計、網絡運營都得到行業(yè)認可，在上海、深圳、北京、廣州、佛山、中山、東莞地區(qū)有著良好的口碑品牌的網站建設公司。我們的使命是打造創(chuàng)新型的網站建設企業(yè)，能輕易地開展“互聯(lián)網+”業(yè)務、實現(xiàn)“互聯(lián)網+企業(yè)”的企業(yè)愿景。
有一個互聯(lián)網項目想和我們談談嗎？您可以填寫右邊的表格，讓我們了解您的項目需求，這是一個良好的開始，我們將會盡快與你取得聯(lián)系。當然也歡迎您給我們寫信或是打電話，讓我們聽到你的聲音！
地址：佛山市順德區(qū)大良鳳翔商業(yè)廣場二座670
業(yè)務QQ：378780108
策劃專線：13715431176
E-mail：sale@fslingdu.com
