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