編輯導(dǎo)語：一款應(yīng)用程序里與眾不同的用戶界面（UI）能夠給用戶帶來極致的體驗，可是我們?nèi)绾螌⒆约旱腶pp界面設(shè)計得與眾不同呢？本文將與你一同分享七種app的界面設(shè)計趨勢，感興趣的小伙伴們就一起來讀讀看吧！

現(xiàn)如今，我們經(jīng)常能看到各種形形色色的移動應(yīng)用程序。然而要想使這款應(yīng)用程序看起來與其他的與眾不同，就需要在其用戶界面（UI）中下功夫，并為用戶提供極致的體驗。

而這便是我們交互設(shè)計師所要思考的問題?？墒俏覀?nèi)绾螌⒆约旱腶pp界面設(shè)計得與眾不同呢？

今天，小編就來分享一下七種app的界面設(shè)計趨勢，以此幫助大家設(shè)計出更出挑的移動UI。

一、Design Trends

1. Motion&Animation-動效與動畫

如今，我們都熱衷于在抖音、火山小視頻等各種視頻類應(yīng)用程序上花費大量時間。而產(chǎn)生這一現(xiàn)象的主要原因就在于視頻的內(nèi)容和其中的動畫效果對于用戶來說具有強烈的吸引力和互動性。

根據(jù)數(shù)據(jù)統(tǒng)計顯示，大多數(shù)人在使用app之前都會傾向于觀看視頻說明。因為其動畫和動效設(shè)計使得內(nèi)容更加清晰且易于理解。當(dāng)我們?yōu)橛脩舫尸F(xiàn)一個實際示例時，他們就會更容易關(guān)注到其中的實用信息。這就與冗長的文字靜態(tài)描述有所不同，動畫可以保留用戶的專注度并提高這款應(yīng)用程序的吸引力。

借助動畫或動效設(shè)計，我們可以強調(diào)該款app的應(yīng)用功能并提高其轉(zhuǎn)化率。此外，如果我們想探索高級動畫設(shè)計，那么就需要知道：簡單的動作并不再適用于用戶。相反，我們可以使用更復(fù)雜的過渡并區(qū)分動畫的方法，來實現(xiàn)這一點。

圖源：Dribble

2. Gestures&Swiping Experience-手勢與滑動體驗

與電腦端相反，手勢和滑動體驗可以使我們所設(shè)計的移動應(yīng)用程序更加豐富飽滿。除此之外，界面上的滑動體驗也更具趣味性。我們每天都會花費數(shù)小時滾動或滑動各款應(yīng)用程序的界面，因此不難發(fā)現(xiàn)，屏幕上過多的按鈕和其他操作會刺激和分散我們的注意力。

因此，在應(yīng)用程序中添加手勢與界面滑動設(shè)計已變得越來越受到關(guān)注。一些app的創(chuàng)建者甚至將其應(yīng)用軟件設(shè)定為不支持使用按鈕。因為按鈕有時會造成界面混亂并占用過多的屏幕空間。所以，在之后的app設(shè)計中，我們也可以嘗試將手勢設(shè)計與滑動功能代替按鈕的使用。

與此同時，嘗試滑動動作的動畫對于整款應(yīng)用程序所呈現(xiàn)的效果也很有幫助。例如，圖書類應(yīng)用程序就經(jīng)常使用這種動畫效果來進(jìn)行頁面翻頁。

圖源：Dribble

3. Depth in Graphic-平面圖像深度

除非扁平化設(shè)計和圖片變得沉悶，否則在未來的設(shè)計中，我們需要更加嚴(yán)格和直接地使用它們。眾所周知，用戶更喜歡看到真實和具有互動性的內(nèi)容。而平面圖形中的陰影和圖層則賦予了它們3D效果、體積和深度，使得用戶可以享受更逼真的圖像效果。同時，我們也可以與任何元素一起結(jié)合使用，來加深平面圖像的深度。此外，在屏幕上創(chuàng)建對象層次結(jié)構(gòu)可以幫助用戶更輕松地瀏覽應(yīng)用程序。

在這里，值得我們注意的是，3D是一項革命性的技術(shù)。3D圖形幾乎可以在任何app中使用。例如，我們可以使用3D成像技術(shù)來構(gòu)建地圖類的應(yīng)用程序。它也非常適用于游戲并以此改變玩家的整體體驗。因此，當(dāng)我們在app中為圖像添加效果時，也可以試著考慮使用3D設(shè)計。

圖源：Dribble

4. Dark Mode-暗黑模式

暗黑模式其實大家并不陌生，它早已經(jīng)是許多應(yīng)用程序中被高度使用的一種設(shè)計手法。最近，大量開發(fā)人員提供了在應(yīng)用程序中切換標(biāo)準(zhǔn)模式和暗黑模式的機會。因此，用戶在使用這些app時，可以根據(jù)喜好選擇他們最喜歡的一種UI模式。

深色模式界面將背景變?yōu)榱松钌黝}，并使字體和其他元素變?yōu)榱藴\白/白色。例如，現(xiàn)在在Facebook等最受歡迎的app中都可以使用切換深色模式。而切換到深色模式，也有助于用戶減輕用眼疲勞，并更方便地進(jìn)行界面操作。

圖源：Dribble

圖源：https://blog.synthetix.io/mintr-v2-is-now-live/

5. Typography-排版

在移動應(yīng)用程序中選擇正確的排版是我們設(shè)計必不可少的一步。對于用戶來說，他們通常會掃讀屏幕上所顯示的內(nèi)容，而不是逐字逐句地閱讀。因此，我們就需要將重點信息使用合適的排版和字體加以強調(diào)。如果我們使用了一些不尋常的字體或排版，那么就會使得信息內(nèi)容看上去不那么無聊，同時也不會使得用戶迷失在整個界面背景之中。

使用正確的排版和字體可以提高整個app設(shè)計的明亮度和新穎性。通過組織排版，我們可以為用戶提供愉快且深刻的用戶體驗，即：設(shè)置點之間的大小、行距、行長、創(chuàng)建和跟蹤層次結(jié)構(gòu)。此外，它也具備了以下幾個優(yōu)勢：

• 定下app的整體基調(diào)
• 提高該款app的知名度
• 提供更好的視覺體驗
• 提高可讀性

然而，我們也需要牢記，那些與眾不同且看起來有點“瘋狂”的排版并不適合所有應(yīng)用程序。在設(shè)計過程中，我們需要定義文本在自己這款app中所相對應(yīng)的功能。如果它為用戶提供了額外的信息內(nèi)容，那么我們就不需要對字體和排版進(jìn)行過多的嘗試。

圖源：Dribble

6. Gradients & Transparent Elements-漸變和透明元素

在設(shè)計app的過程中，我們可以在按鈕和背景設(shè)計上使用漸變，這是由于漸變可以突出這款應(yīng)用程序的基本內(nèi)容，并使用戶專注于某些我們想要傳達(dá)的特定內(nèi)容，從而賦予層次感。

而在app中使用透明元素則可以展示界面內(nèi)容的深度和驅(qū)動力，使得設(shè)計更加清晰、更具吸引力。此外，我們可以使用從淺色到深色主題設(shè)計的過渡，從而將屏幕分成兩個邏輯部分。與此同時，我們也可以在按鈕上使用漸變主題，使它們在界面上呈現(xiàn)彈出效果。

今年，在漸變和透明色設(shè)計中，我們也可以關(guān)注”Glassomorphism (玻璃形態(tài))“這一概念。其背后的設(shè)計想法是柔滑敏感設(shè)計元素之間的對比；其設(shè)計理念類似于磨砂玻璃表面的透明模糊背景。而Glassomorphism也具有以下特點：

• 透明度和背景模糊
• 透明物體上的細(xì)光邊框
• 分層效果
• 鮮艷的色彩

圖源：Dribble

Glassomorphism

圖源：Dribble

Glassomorphism phone icon set

圖源：Dribble

7. Comfort Visuals-舒適的視覺效果

舒適的視覺效果可以減緩用戶的眼睛疲勞感，因此用戶和app設(shè)計者都很熱衷于這一設(shè)計手法。而我們需要知道，移動應(yīng)用程序設(shè)計并不應(yīng)該只是為了美觀。它也應(yīng)該為用戶提供極佳的生理體驗。

如果想要呈現(xiàn)舒適的視覺效果，那么我們可以在app中使用自然的色彩、舒緩的圖像和簡單的布局。我們可以看到，這些設(shè)計技巧被廣泛用于冥想類的應(yīng)用程序之中。他們包括自然的真實圖片、具有平靜的色彩和簡單的輕元素，卻很難看到界面中呈現(xiàn)出深色的主題設(shè)計。

圖源：Dribble

冥想類app

圖源：Dribble02

二、Takeaways

那么究竟什么是好的應(yīng)用程序設(shè)計呢？我們在哪里可以找到這類的出色設(shè)計想法呢？接下來，小編就給大家分享幾點小tips：

• 查閱他人的作品：查閱目前領(lǐng)先的UI作品，分析其優(yōu)缺點。從他們的經(jīng)驗中學(xué)習(xí)，而不是一味地復(fù)制
• 使app變得直觀：參考這些設(shè)計趨勢來創(chuàng)建具有友好和直觀界面的應(yīng)用程序。無論是3D效果、動畫還是虛擬現(xiàn)實，我們都需要確保它簡化應(yīng)用程序并易于使用
• 使用標(biāo)準(zhǔn)導(dǎo)航：在設(shè)計過程中，切忌使用過多的選項菜單欄。我們只需保留必要的元素即可
• 使用具有吸引力的圖像：抽象藝術(shù)、插圖、真實照片等等，這些都有助于吸引用戶的關(guān)注

以上，就是移動應(yīng)用程序設(shè)計的相關(guān)設(shè)計趨勢。如果想要設(shè)計出與他人不同的app，那么不妨可以參考上述趨勢并進(jìn)行適當(dāng)應(yīng)用。

作者：交互設(shè)計小站；公眾號：交互設(shè)計小站

原文鏈接：https://mp.weixin.qq.com/s/PDhPahLQtzJlR48Z2JNenQ

本文由 @交互設(shè)計小站 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。