文章目錄
科技發(fā)展對(duì)app設(shè)計(jì)趨勢(shì)產(chǎn)生的影響
2020 年移動(dòng)應(yīng)用的設(shè)計(jì)趨勢(shì)
2020 年流行的移動(dòng)ui風(fēng)格
結(jié)語
最佳的移動(dòng)應(yīng)用設(shè)計(jì)是關(guān)于個(gè)性化的交流、友好的聲音和直觀的互動(dòng)。換句話說，設(shè)計(jì)的目的就是不需要用戶想太多，而是關(guān)注情感、動(dòng)機(jī)和需求。你想要?jiǎng)?chuàng)造一種技術(shù)先進(jìn)的產(chǎn)品來打動(dòng)用戶的心嗎?那就不要錯(cuò)過這篇文章。
在本文中，將跟大家介紹 20 個(gè) 2020 年移動(dòng)應(yīng)用程序設(shè)計(jì)的最佳實(shí)踐，并了解它們?nèi)绾未龠M(jìn)銷售和留住用戶。
如今，每個(gè)人都被海量的信息所淹沒，所以創(chuàng)造吸引眼球的產(chǎn)品變得越來越難。此外，你的產(chǎn)品可能是很有價(jià)值，但如果很難使用，沒有人會(huì)浪費(fèi)時(shí)間去用它。
簡(jiǎn)單、以人為本的設(shè)計(jì)是持久客戶關(guān)系的關(guān)鍵。之前，擁有一個(gè)有吸引力和獨(dú)特的產(chǎn)品設(shè)計(jì)就足夠了。但情況已經(jīng)發(fā)生轉(zhuǎn)變，以用戶為中心的方法已完全取代以系統(tǒng)為中心的方法，成為 2020 年的發(fā)展趨勢(shì)。
現(xiàn)代設(shè)計(jì)應(yīng)該反映最新的技術(shù)創(chuàng)新，下面讓我們深入了解正在逐漸改變我們生活的主要技術(shù)進(jìn)步。
科技發(fā)展對(duì)app設(shè)計(jì)趨勢(shì)產(chǎn)生的影響ux/ui設(shè)計(jì)總是會(huì)應(yīng)用一些最新的技術(shù)，這就是為什么使用最新的軟件和硬件設(shè)計(jì)是必要的。讓我們回顧一下現(xiàn)在最熱門的話題：
1) 4g到5g移動(dòng)數(shù)據(jù)傳輸?shù)拇笠?guī)模過渡
5g時(shí)代已經(jīng)近在咫尺，預(yù)計(jì)將在 2020 年底正式到來。5g的最快速度將比4g快2. 7 倍，這將對(duì)設(shè)計(jì)產(chǎn)生巨大影響：讓人乏味的屏幕加載將不再相關(guān)，詳細(xì)的數(shù)據(jù)可視化(以目前的速度是不可能的)將成為現(xiàn)實(shí)。
2)即時(shí)應(yīng)用越來越受歡迎
現(xiàn)在，人們不需要下載一個(gè)功能齊全的應(yīng)用程序從而使用某個(gè)工具。因此，ux/ui設(shè)計(jì)應(yīng)該適應(yīng)即時(shí)應(yīng)用，而不是設(shè)計(jì)一堆用戶不需要的功能。
3)物聯(lián)網(wǎng)應(yīng)用
根據(jù)全球統(tǒng)計(jì)，平均每人擁有6. 58 臺(tái)聯(lián)網(wǎng)設(shè)備。除了手機(jī)、平板電腦、智能手表，冰箱、安全攝像頭、智能燈也都是所謂物聯(lián)網(wǎng)的一小部分。當(dāng)然，家用電器和可穿戴設(shè)備的應(yīng)用有不同的用途，但它們都是 2020 年的大趨勢(shì)。
4)云解決方案
預(yù)計(jì)云解決方案在 2020 年app中的集成將會(huì)增長(zhǎng)。在云端運(yùn)行的app將極大地節(jié)省我們?cè)O(shè)備的內(nèi)存。這對(duì)設(shè)計(jì)師和開發(fā)者有什么影響呢?云解決方案將降低開發(fā)成本，并允許將更多資源用于功能和用戶界面。
5)無密碼登錄
在登錄過程，在登錄框輸入密碼已經(jīng)過時(shí)。所有現(xiàn)代設(shè)備都使用faceid或指紋認(rèn)證，因此用戶無需記住密碼，也無需中斷與app的交互。這是向簡(jiǎn)單、無間斷的ui又邁進(jìn)了一步。
2020 年移動(dòng)應(yīng)用的設(shè)計(jì)趨勢(shì)上面我們已經(jīng)解釋了技術(shù)是如何影響設(shè)計(jì)的變化，接著我們就來看看 2020 年app設(shè)計(jì)的最佳實(shí)踐。
動(dòng)畫和微交互成為沉浸式設(shè)計(jì)的一部分
動(dòng)態(tài)和功能動(dòng)畫是 2020 年移動(dòng)app設(shè)計(jì)的主流。好處包括：
動(dòng)畫和微交互能吸引注意力，創(chuàng)造出恰如其分的氣氛，所以沒有必要添加凌亂的元素或額外的文字。
動(dòng)畫效果使應(yīng)用程序更“活躍”，因?yàn)橛脩魠⑴c到他們和應(yīng)用程序之間的雙向?qū)υ捴?。即使是像改變活?dòng)塊的顏色、在滾動(dòng)時(shí)改變標(biāo)題大小這樣的小動(dòng)畫都可以改善用戶與應(yīng)用程序之間的交互。
個(gè)性化動(dòng)畫是另一個(gè)趨勢(shì)，有助于產(chǎn)品和用戶之間建立聯(lián)系
在個(gè)性化動(dòng)畫中，屏幕上的元素會(huì)根據(jù)用戶的行為變化?，F(xiàn)代分析算法允許我們定義用戶的類型，區(qū)分需要詳細(xì)信息的用戶和那些只是閑逛的用戶。
為了能夠適應(yīng)設(shè)計(jì)和個(gè)性化，這里有許多策略-包括a/b測(cè)試，市場(chǎng)分析和客戶細(xì)分。但是面向用戶的ui的主要目標(biāo)是適應(yīng)客戶的需求，這取決于他們的痛點(diǎn)。
3d元素
正如上文提到的，新的數(shù)據(jù)傳輸速度為創(chuàng)建逼真的視覺形式提供了很多機(jī)會(huì)。吸引人的3d元素應(yīng)該做到：
讓你的產(chǎn)品充滿未來主義色彩
給用戶一個(gè)觀察、旋轉(zhuǎn)元素大小的機(jī)會(huì)，從而增加他們對(duì)產(chǎn)品的參與度和興趣
能比文本更快更好地傳達(dá)信息
此外，與3d模型的交互類似于離線體驗(yàn)，讓用戶可以查看和觸摸產(chǎn)品。這樣的方法能喚起情緒并提高轉(zhuǎn)化。
設(shè)計(jì)和開發(fā)3d可視化的過程仍然有些麻煩。然而，在it方面投入資源會(huì)有回報(bào)，因?yàn)閹в杏螒蚧氐莫?dú)特界面會(huì)讓你的產(chǎn)品在市場(chǎng)上更具競(jìng)爭(zhēng)力。
全新的擬物化(skeuomorphism)設(shè)計(jì)
除了產(chǎn)品的3d模型，我們不得不提到3d作為界面風(fēng)格的回歸。
擬物化是一種設(shè)計(jì)原則，軟件界面設(shè)計(jì)模仿實(shí)物紋理。在經(jīng)歷了無數(shù)的波折之后，擬物化又以neumorphism的名字重生了。細(xì)節(jié)、陰影和燈光都增加了身臨其境的體驗(yàn)，消除了用戶和app之間的障礙。
講故事 (storytelling)
講故事是一種以引人入勝、簡(jiǎn)單和一致的方式與用戶互動(dòng)的方式。理想情況下，這個(gè)故事是一個(gè)整合的敘述，包括插圖，動(dòng)畫，文本，排版和流動(dòng)。
什么是有效的ux故事?它是由簡(jiǎn)短的文本、信息豐富的插圖和不間斷的ui 組成的單一故事。
當(dāng)用戶在購(gòu)買過程中不得不采取各種行動(dòng)時(shí)，那么講故事就不那么有效了。不間斷的ui是指與產(chǎn)品的順暢交互。具體操作如下：
在頁(yè)面上使用簡(jiǎn)短通知，而不是彈出窗口和覆蓋
當(dāng)人們不得不提供個(gè)人信息(尤其是敏感信息)時(shí)，他們會(huì)感到不舒服，所以你的任務(wù)是確保用戶的信息安全可靠。
使用動(dòng)態(tài)ui
現(xiàn)代設(shè)計(jì)幫助用戶在沒有任何使用障礙的情況下與app進(jìn)行交互。讓人們有機(jī)會(huì)改變產(chǎn)品參數(shù)，添加或刪除商品而無需返回幾個(gè)步驟。
vr和ar
vr 和 ar超出了游戲和娛樂app范疇，這些元素現(xiàn)在已經(jīng)成為電子商務(wù)、健康監(jiān)控和美容app的一部分。vr和ar給我們一種與產(chǎn)品聯(lián)系在一起的感覺，并幫助我們建立對(duì)產(chǎn)品的信任。ar也是一種能夠加速信息處理和目標(biāo)實(shí)現(xiàn)的沉浸式體驗(yàn)。
vr和ar是剛剛開始進(jìn)入市場(chǎng)的新技術(shù)。如果你想給你的用戶留下深刻印象，并在競(jìng)爭(zhēng)對(duì)手中脫穎而出，那么不要猶豫，讓它成為你設(shè)計(jì)的一部分。
極簡(jiǎn)主義
據(jù)統(tǒng)計(jì)，人類的平均注意力時(shí)長(zhǎng)從 2000 年的 12 秒下降到 2017 年的 8 秒。它還在繼續(xù)下降?，F(xiàn)在，要吸引別人的注意力和傳達(dá)必要的信息比以往任何時(shí)候都要困難。這就是為什么極簡(jiǎn)主義和簡(jiǎn)單是兩個(gè)不會(huì)消失的ux/ui趨勢(shì)。
以下是如何讓你的app更簡(jiǎn)約的方法：
留白
留白是如今極簡(jiǎn)主義的主要特征(行間距和信息塊之間更大的“空白”邊距就是這樣)。這樣的接口不包含很多元素，并且使解釋信息變得簡(jiǎn)單。
隱藏的導(dǎo)航面板和欄
不僅把菜單類別隱藏在一個(gè)小圖標(biāo)下，而且通過滑動(dòng)、多次點(diǎn)擊等方式在app中導(dǎo)航，這已經(jīng)成為一種常見的做法。無按鈕解決方案的常見的案例有流動(dòng)滑動(dòng)，它提供了頁(yè)面和類別之間完全直觀的轉(zhuǎn)換。
具有動(dòng)態(tài)ui的app
具有動(dòng)態(tài)ui的應(yīng)用程序會(huì)根據(jù)設(shè)備類型和其他外部條件改變它們的形式和外觀。這與動(dòng)態(tài)ux相反，在動(dòng)態(tài)ux中，界面的變化取決于交互的類型(而不是外觀)和用戶的行為(而不是外部條件)。動(dòng)態(tài)的ui使app在各種不同的設(shè)備上看起來完美，適應(yīng)寬屏手機(jī)、又或者是智能手表。
創(chuàng)建動(dòng)態(tài)ui很簡(jiǎn)單，可以包含多種設(shè)計(jì)方法。其中一種方法是使用基于卡片接口的自適應(yīng)卡片。
ui適應(yīng)性的另一個(gè)例子是在夜間自動(dòng)切換到黑暗模式。暗模式的的替代方案是自定義暗模式和動(dòng)態(tài)切換顏色選項(xiàng)。另一個(gè)裝飾性動(dòng)態(tài)ui的例子是應(yīng)用程序元素上的陰影，它會(huì)根據(jù)手持設(shè)備的角度而改變。
語音交互
我們已經(jīng)習(xí)慣讓屏幕充當(dāng)物理世界和數(shù)字世界之間的媒介。但是這種情況會(huì)保持不變嗎?盡管無屏幕可穿戴設(shè)備越來越受歡迎，觸覺技術(shù)可能是未來的元素，但語音控制設(shè)備才是當(dāng)下的主流。
智能揚(yáng)聲器的出貨量穩(wěn)步增長(zhǎng)，檢測(cè)和復(fù)制不同語言的技術(shù)也在增長(zhǎng)。在不久的將來，語音接口將廣泛應(yīng)用于電子商務(wù)、流媒體服務(wù)和新聞應(yīng)用。幾年前流行起來的聊天機(jī)器人已經(jīng)把ui /ux變成了應(yīng)用程序和用戶之間的實(shí)時(shí)對(duì)話。隨著語音接口的普及，這種對(duì)話將達(dá)到一個(gè)全新的水平。
2020 年流行的移動(dòng)ui風(fēng)格2020 年視覺風(fēng)格的趨勢(shì)將集中在排版上。在前幾年，應(yīng)用程序大多使用簡(jiǎn)單的無襯線字體。今年，老式的襯線字體又流行起來了。
并不意味著無襯線字體已經(jīng)成為過去。恰恰相反：它們將繼續(xù)被用來創(chuàng)造簡(jiǎn)單易懂的文本。
然而，如果你想要擁有吸引眼球的標(biāo)題，那么就需要使用襯線字體。不同字體的組合可以更好地組織文本，并從長(zhǎng)信息會(huì)中突出短信息塊。此外，老式字體會(huì)吸引用戶的注意，引導(dǎo)他們快速向下滾動(dòng)頁(yè)面。
2020 年將越來越受歡迎的其他視覺元素還包括：
1)柔和的漸變
web gradients 是一個(gè)設(shè)計(jì)師們經(jīng)常需要用到的ui背景漸變顏色組合。在 2020 年，使用柔和的色調(diào)、平滑的過渡和更多變化的顏色將成為時(shí)尚。設(shè)計(jì)師通常使用 2 到 4 種主要顏色。
2)半透明
半半透明的顏色浸透了明亮的元素，允許你在沒有任何額外負(fù)載的情況下挑選出不同的視覺塊。
3)圓形
有機(jī)，柔和，不對(duì)稱的線條喚起舒適和安全的感覺。它們?cè)谧屓藗兏械接袎毫ο嚓P(guān)的產(chǎn)品(如金融、電子商務(wù)、房地產(chǎn)和建筑)特別的有益。
4)明亮的霓虹燈色彩
紫色、粉色、藍(lán)色和綠色的未來色調(diào)為產(chǎn)品增添了進(jìn)步和新奇感。
2020 年手機(jī)app設(shè)計(jì)小貼士
使其能夠響應(yīng)并適應(yīng)可穿戴設(shè)備
使用動(dòng)畫和微互動(dòng)。讓設(shè)計(jì)與用戶互動(dòng)。
優(yōu)雅地使用新態(tài)和襯線字體。
利用更快的移動(dòng)速度制作3d圖形
添加語音界面
增加個(gè)性化選項(xiàng)
往 vr and ar方向發(fā)展
創(chuàng)建一個(gè)不間斷的界面