2019-7-31 資深UI設(shè)計者
1. 品牌加載
公眾喜歡有趣，可塑的動畫。Airbnb 和 Netfilx 將品牌 logo 動畫應(yīng)用到了啟動頁和加載頁面。結(jié)合品牌特點(diǎn)、風(fēng)格和符號，融合到產(chǎn)品設(shè)計中，從而提升視覺的一致性，創(chuàng)造富有特有性格的產(chǎn)品界面。
△ Netflix & Airbnb
2. 圖標(biāo)動畫
微交互是建立在移動端上微妙視覺效果的小動畫，而圖標(biāo)動畫是微交互其中的一種。它的目的是吸引用戶，讓用戶感覺順暢、愉悅。
最近，讓我印象深刻的一個圖標(biāo)動畫是 Facebook 的新消息提醒界面，這些由產(chǎn)品所包含的一個個小細(xì)節(jié)，創(chuàng)造出了新穎而有趣的設(shè)計。
△ Facebook Website
在 UI 界面中，最常見的分隔方式是用細(xì)線對模塊進(jìn)行劃分，但隨著設(shè)計重心趨向簡約，注重內(nèi)容本身，傳統(tǒng)的分隔線方式就略顯多余。
根據(jù)格式塔親密原則，通過留白控制間距大小，可以清晰地劃分模塊層級，同時界面看起來也更加透氣、富有張力。可以看到 QQ、飛聊、Gmail、Messenger 等應(yīng)用都采用了留白分隔。
△ Gmail & Messenger
1. 品牌形象插畫
一個好的插畫作品可以為產(chǎn)品帶來極佳的辨識度。Snapchat 的頁面用了很多情感化設(shè)計和品牌形象，包括開啟通知引導(dǎo)動畫、查找好友 landing page、下拉刷新頁、照片回憶等等。
從品牌的個性化設(shè)計，尋找一種基于插畫的設(shè)計語言，把產(chǎn)品塑造成一個高辨識度的 ID。
△ Snapchat
2. 3D插畫
隨著軟件技術(shù)的提升，3D 插畫在這幾年中大受歡迎，很多應(yīng)用都使用 3D 渲染產(chǎn)品，如：星巴克、Keep、毒App 等等，因為它真實立體，有著更高的轉(zhuǎn)化率。
△ Starbucks by Wojciech
△ Keep & 毒
圓角代表友好、親和力，而卡片模塊化的布局更為清晰、有效、整潔。
在上周的微信改版《微信 7.0.5 發(fā)布：9個細(xì)節(jié)提升體驗》的文章中，我講到了訂閱號的推送文章去掉了標(biāo)題欄的背景，卡片變得更加簡潔。另外，公眾號詳情頁由原先的列表式，改成了圓角卡片式，彈窗也由直角改成圓角。
△ Broadcasting & 微信
長期以來，圖像在視覺設(shè)計中起著至關(guān)重要的作用，而視頻能夠更直觀的吸引用戶，傳達(dá)主要的思想。
在移動端中，視頻主要用于登錄頁背景，一般可以是幾秒鐘的循環(huán)剪輯視頻，它可以帶來一種身臨其境的體驗感受。
△ Lyft & Nike
Toast 是一種輕量級的提示，作為用戶操作后的反饋。UI 形態(tài)上從居中浮層，慢慢趨向于底部通欄樣式。這樣設(shè)計的好處是不會擋住當(dāng)前界面的內(nèi)容。
舉一個反例，iOS 的調(diào)整音量提示，大范圍的遮住了界面，特別是對正在玩游戲的用戶非常不友好，直到 iOS 13 這個設(shè)計才被修改。
△ Google Earth & Spotify
隨著扁平化設(shè)計和 Material Design 進(jìn)一步占據(jù)主流趨勢，簡約的界面，明亮，大膽的色彩一直都處于增長趨勢。色彩平鋪已經(jīng)成為清新、酷炫、數(shù)字時代的代名詞。
△ Snapchat & Spotify
重內(nèi)容、輕 UI，把注意力引導(dǎo)在重要內(nèi)容和功能上。像 Facebook、Instagram 這種以圖片社交為主的 App 都有一個特點(diǎn)，就是文字都是黑白灰，將彩色交給圖片去傳達(dá)，讓用戶關(guān)注內(nèi)容即可。
△ Facebook for Android
增強(qiáng)現(xiàn)實的技術(shù)，已經(jīng)出現(xiàn)在很多 Web、App 等領(lǐng)域中。許多平臺開發(fā)者也將增強(qiáng)現(xiàn)實技術(shù)納入其開發(fā)工具里面，可預(yù)期到這種類型的 App 將會越來越多。
1. 地圖導(dǎo)視界面
地圖+AR，讓你不再盯著二維平面上那個藍(lán)色的點(diǎn)，而是現(xiàn)實世界中的箭頭告訴你在哪個路口轉(zhuǎn)向。
△ Google Map
2. 表情貼紙
Instagram、Snapchat、Messenger 等平臺可用 AR 濾鏡來創(chuàng)作，表情貼紙可以幫助用戶更直白有效地自我表達(dá)、獲取注意力。
△ Spark AR
隨著 5G、車聯(lián)網(wǎng)、人工智能、自動駕駛的發(fā)展，車載界面也越來越受重視了。
在今年的 Google I/O 開發(fā)者大會上，針對車載系統(tǒng) Android Auto，推出了新的設(shè)計語言，它有著更好的可拓展性。在 UI 上，完全重新設(shè)計了導(dǎo)航欄，能夠更輕松地訪問應(yīng)用、通知，和你的 Google 智能助理，最大限度的幫助駕駛者減少分心，將注意力集中在道路上。
△ Android Auto UI
此外，還開發(fā)了新的系統(tǒng)小部件，在使用地圖進(jìn)行導(dǎo)航時，仍然可以一鍵控制音樂應(yīng)用，或者正在進(jìn)行的電話，同時在屏幕上保持地圖的完整視圖。
UI 設(shè)計的趨勢除了側(cè)重內(nèi)容和情感之外，還會根據(jù)不同設(shè)備載體、新的技術(shù)（3D、AR）而變化。但歸根結(jié)底還是以人為本，借用 Adobe 設(shè)計副總裁 Jamie Myrold 的一句話：如今設(shè)計師要思考的，絕不僅僅是設(shè)計一款 App、網(wǎng)站或設(shè)計工具。我們要思考的是人類的需求，用戶的需求，打造真正人性化，多元化與包容性的設(shè)計。
藍(lán)藍(lán)設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://www.teruid.com