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