前言
首先定義下所謂行業(yè)。美柚是一個工具，但也不僅僅只是一個工具。我們致力于為女性提供一種新的生活方式，提供包含健康管理、問題解決、娛樂交流、電商購物等服務(wù)。
從功能上進行拆解，把美柚可以劃分為工具、社交、電商、母嬰四個大類。
在這四大領(lǐng)域中，我們從易觀千帆、艾瑞指數(shù)、七麥數(shù)據(jù)、蟬大師等相關(guān)指數(shù)平臺，篩選相關(guān)行業(yè)的主流應(yīng)用進行分析，總結(jié)出2021年美柚相關(guān)行業(yè)設(shè)計趨勢。
所選應(yīng)用應(yīng)該也是我們?nèi)粘Ｉ钪写蠹冶容^常用的，工具類所含的「健康醫(yī)美」也是近年來比較受關(guān)注的一點。
整體分析將從視覺表現(xiàn)以及人文關(guān)懷兩方面展開。7:3的內(nèi)容比例，以下分析案例包含但不僅限于上述20個應(yīng)用。
第一章 · 視覺表現(xiàn)
1.1 明亮飽和的主色
互聯(lián)網(wǎng)行業(yè)發(fā)展日趨成熟，早已進入爭奪用戶時間的階段。不計其數(shù)的應(yīng)用，多元的信息，都在促使我們需要一開始就吸引用戶。
對于品牌色的選擇，并不只取決于應(yīng)用本身，還有「競爭」，如何在成山成海的應(yīng)用列表中一開始吸引用戶，給用戶留下深刻的印象，是定義品牌色時需要思考的。
這幾年，有許多應(yīng)用對其品牌色進行調(diào)整。強如國民級應(yīng)用-「支付寶」和「淘寶」，也需要在被追趕的壓力下不斷調(diào)整策略。大多調(diào)整方式，是輕微變動其色相外，提升色彩的飽和度與明度，讓產(chǎn)品本身更跳躍。
將拾色器劃分為9宮格，通過對所選應(yīng)用主色在拾色器中的觀察，可以發(fā)現(xiàn)大部分APP主色的趨勢為：高明度、高飽和度的色彩。即拾色器的右上角區(qū)域。
母嬰孕育類產(chǎn)品的主色選擇則更偏向中度飽和。顏色飽和度更多偏向中右區(qū)域，這與品類本身柔和的氣質(zhì)息息相關(guān)。
從趨勢上來說，更加明亮飽和的色彩能在一定程度上更加吸引用戶的注意力。當然，并非一味的高明度、高飽和度色彩就是最好的，仍然需要根據(jù)產(chǎn)品特性及方向進行正確的決策。
1.2 大圓角卡片
日常生活中，如果一件物體過于鋒利，就顯得不夠安全，比如我們常見的錘子，剪刀，給人的感覺都很尖銳。圓角矩形在生活中也是非常常見的，如電腦、平板、桌子等等。巴羅神經(jīng)學研究所關(guān)于“角”的研究發(fā)現(xiàn)：角的突顯性感知與角的度數(shù)的線性變化，銳角比鈍角產(chǎn)生更強的虛幻的突顯性，因而圓角的設(shè)計比直角更具有溫度感。
蘋果新系統(tǒng)（Big Sur），窗口四角從以前的10px增加到20px，控制中心也沿用了ios14的卡片設(shè)計風格和布局。微軟win10的概念稿中也出現(xiàn)了圓角。我們可以確信，圓角矩形將會在未來一段時間內(nèi)繼續(xù)風行。
· 邊距卡片布局
卡片設(shè)計的本質(zhì)是將信息整合，建立更清晰的頁面結(jié)構(gòu)，同時擁有更強的交互能力。 從以下截圖中可以看到不論什么行業(yè)，卡片布局對于框架結(jié)構(gòu)的承載都是極其優(yōu)秀的。
· 懸浮卡片
iOS 13開始，模態(tài)面板采用新的卡片形式。模態(tài)面板在操作時會有一個縱深的效果，適用于單手操作。在Apple自帶應(yīng)用中，模態(tài)面板得到了廣泛應(yīng)用。
懸浮卡片在各大應(yīng)用中的運用率極高，不止在于模態(tài)面板，也可以作為模塊區(qū)分。模態(tài)面板一般懸浮卡片有吸頂操作，而僅作模塊區(qū)分的懸浮卡片會跟隨內(nèi)容移動。
· 大圓角
既然這個趨勢點命名為「大圓角卡片」，那么大圓角是必不可少的。
基于移動端屏幕質(zhì)量的進化，能更好的呈現(xiàn)圓角的質(zhì)感，圓角開始被廣泛使用。從蘋果手機的進化，我們也能明顯感受到其圓角的變化。隨著全面屏時代的來臨，圓角的弧度也越來越大。
可以感知到現(xiàn)在各大應(yīng)用中的圓角相較于以往都是成倍數(shù)的增長。
圓角卡片會成為一個趨勢，主要在于兩點：一個是技術(shù)升級，現(xiàn)在的設(shè)備都能更好的對圓角進行渲染；
二是我們視網(wǎng)膜中視覺最敏銳的區(qū)域叫中央凹，它在處理運行時最快，圓角矩形在視覺識別過程更容易。
1.3 輕量漸變
過渡柔和的輕量漸變越來越受歡迎，其簡約兼顧美感的同時，也可以創(chuàng)造輕松、溫暖的氛圍?；仡欉^去一年，關(guān)于色彩的運用，在漸變色的使用上越來越理性和克制。
觀賞下追波上幾個輕量漸變的作品，可以在展示時作為背景使用，也可以在頁面背景上直接使用，都擁有不錯的視覺效果。
實際案例中，考拉、淘寶和小紅書的幾個頁面背景都使用的輕量漸變的效果。我們常常使用的視頻軟件 騰訊和優(yōu)酷 也開始在頁面背景中使用輕量漸變進行氛圍烘托。
除了頁面背景，在單獨卡片背景我們也可以看到越來愈多使用輕量漸變的效果。這個位置漸變的使用會更加克制一些。
1.4 磨砂玻璃
磨砂玻璃主要基于「背景模糊」的效果。與過去的毛玻璃有所不同的是，磨砂玻璃模擬現(xiàn)實玻璃的效果，具有更強的通透感和層次感，帶有柔光的感覺。
一樣磨砂玻璃的技法，不同的色彩與透明度，所表現(xiàn)的效果是有區(qū)別的。
實際運用中，圖標和圖片都可以做磨砂效果。
玻璃效果的圖標層次感更好，有效提升視覺表現(xiàn)力。不過如果大片運用的話可能會引起視覺疲勞，能否成為一個成量級使用的趨勢還有待時間的考證。
彩色背景或圖像經(jīng)過玻璃效果的疊加顯示更加柔和，同時不影響前置文本的可讀性。這一點我覺得未來可能會運用的更多。
1.5 溫和彩色系圖標
這里需要著重強調(diào)下「系列」，是一整組的彩色圖標。
過度的使用高飽和色彩會引起視覺疲勞，在同一場景下，一整套多彩圖標偏向使用更加溫和的彩能傳遞平靜且更加柔軟的情緒。
大部分彩色系圖標處理方式有這幾種方式：
- 同色系疊加-圖形帶透明度產(chǎn)生疊加的視覺效果；
- 飽和相對較低的單色或同色微漸變；
- 微漸變主體+同色淺色底板
它們的統(tǒng)一特性就是成系列的彩色圖標，飽和低不高，視覺感受輕松柔和。
1.6 圖形三維化
手機屏幕進入高分辨率時代，屏幕色彩也更加的準確，現(xiàn)代的前端框架可以承載更加精細的畫面以及減少頁面的加載時長。三維可以創(chuàng)造更多元的設(shè)計感官，在UI中開始變得越來越受歡迎。毋庸置疑，3D在2021年會變的更加流行。
3D可以塑造更強的空間感。在UI運用中的3D效果不追求過分逼真和完全擬物的光澤感，以簡約的造型和豐富明快的顏色提升設(shè)計感。
視覺三維化以更加立體、更具視覺沖擊力的形象強化用戶對內(nèi)容的感知。IP形象三維化可以給用戶建立更加立體的品牌認知。也可以運用在運營圖中增加圖片的沖擊感。
圖標三維化，在立體感上可以再稍微弱化。Big Sur系統(tǒng)采用擬態(tài)圖標，既是一個新嘗試也是開始。我們可以大膽預測，未來將會在更多設(shè)計中看到輕擬物圖標。我們可以大膽預測，未來將會在更多設(shè)計中看到輕擬物圖標。
在時刻需要掠奪用戶注意力的時代，極簡扁平的視覺已到了極限。但全局擬物的設(shè)計勢必影響信息獲取效率，因而輕擬物圖標一般運用在關(guān)鍵功能入口上，不適宜大面積使用。
1.7 數(shù)據(jù)可視化
大數(shù)據(jù)時代，數(shù)據(jù)的展示是必不可少的，借助圖形化手段，更加清晰有效的傳達信息。讓美學和功能齊頭并進，整合稀疏而又復雜的數(shù)據(jù)集，這就是我們常說的數(shù)據(jù)可視化。
也可以理解為我們常說的圖表，看下實際案例中，不同行業(yè)有關(guān)數(shù)據(jù)的展示都進行了可視化表達。
第二章 · 人文關(guān)懷
2.1 關(guān)注隱私保護
大數(shù)據(jù)時代加快科技、社會發(fā)展的速度，同時也讓網(wǎng)絡(luò)時代下隱私保護的倫理問題進一步演化?；ヂ?lián)網(wǎng)便利的同時也滋生科技隱私的信任危機。
隱私保護技術(shù)不完善、法律不健全、意識不充分；國內(nèi)尚在制定中的《個人信息保護法》無一不在提示我們應(yīng)當關(guān)注隱私保護。
投射到應(yīng)用中，我們?nèi)绾文茏龅淖層脩舾兄约弘[私得到保護呢？
- 支付寶-多窗口模糊處理、付款二維碼界面截圖時會做模糊處理并在文字上進一步提示，是對金融資產(chǎn)的保護；
- 餓了么-電話呼出，使用加密虛擬號碼，這也是近年來幾乎都會使用的對通訊隱私的保護方式；
- 百度-無痕瀏覽是對搜索信息的保護
2.2 智能化
在互聯(lián)網(wǎng)、大數(shù)據(jù)的支持下，應(yīng)當具有滿足人的各種需求的屬性。一般來說，智能化我們都在說某一個系統(tǒng)或者設(shè)備，其實APP應(yīng)用也可以通過細枝末節(jié)的展示給予用戶智能化的感覺。
· 記住用戶的選擇
餓了么提交訂單頁面，當你選擇以后都需要餐具，后續(xù)每一次訂單都會默認「需要餐具」。記住用戶的選擇，不要讓用戶總是重復同一個選擇，提升操作效率。
· 告知用戶進度
keep進入「我學過的課程」會顯示上次學習時間，在相關(guān)課程詳情頁幫助用戶記錄訓練次數(shù)。告知用戶進度，不會疑惑當前事項是否曾經(jīng)操作過。
2.3 生活化
我們說了很多年的情感化設(shè)計，今天來說說更加生活的情感化，我在這里稱它為「生活化」。在更加浮躁的網(wǎng)絡(luò)時代，以更加生活化的情感來貼近用戶，引起共鳴。
薄荷健康首頁每天都會出現(xiàn)不同的壁紙，上面都附有很詩意的句子，如“你做三四月的事，在八九月自有答案”，“要有大大小小的期待，生活才不會百無聊賴”?？粗请u湯了一點，但是感覺陽光燦爛的一點呢。
丁香醫(yī)生下拉刷新隨機出現(xiàn)的文案也是非常生活化，“耳屎不用掏的太干凈”“口水消毒不靠譜”“腳臭的不一定有腳氣”，諸如此類，既貼近生活又帶點小科普，非常符合健康應(yīng)用的調(diào)性。
結(jié)語
趨勢具有周期性且永不止息。我們無法預知未來什么樣的設(shè)計會脫引而出引領(lǐng)潮流。我們能做的是先行感知可能成為趨勢的設(shè)計，在變革到來之前擁抱變化。
流行是量級，趨勢是方向，一個流行的設(shè)計是否成為趨勢要在一個周期內(nèi)的量來判斷。蘋果作為硬件乃至互聯(lián)網(wǎng)行業(yè)的先驅(qū)者，他們的每一次設(shè)計變革較大概率上都預示著視覺的革新。
原文地址：站酷
作者：草莓設(shè)計說
團隊：美柚用戶體驗設(shè)計中心
轉(zhuǎn)載請注明：學UI網(wǎng)》實例解析2021年UI設(shè)計流行趨勢 — 美柚UED
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)