不論在app界面、網(wǎng)頁(yè)瀏覽器中還是智能手表上，設(shè)計(jì)都是驅(qū)動(dòng)用戶參與最重要的動(dòng)力之一。從扁平化設(shè)計(jì)到Material design，我分析了設(shè)計(jì)趨勢(shì)的發(fā)展，得出了一些結(jié)論與讀者分享，看看設(shè)計(jì)領(lǐng)域有哪些趨勢(shì)？為什么這些趨勢(shì)對(duì)用戶有益？以及如何設(shè)計(jì)出符合趨勢(shì)的產(chǎn)品？

1. 更輕量化的設(shè)計(jì)

What

“扁平化設(shè)計(jì)”去除了多余的傾斜和陰影，在app中采用一種更加輕量化的美學(xué)，界面更簡(jiǎn)單，只關(guān)注獲取核心信息，拋開所有無(wú)用的設(shè)計(jì)元素。

Why

輕量化的設(shè)計(jì)排除了干擾因素，把注意力放在屏幕上有意義的內(nèi)容，讓用戶的操作更加簡(jiǎn)單，同時(shí)使界面更加優(yōu)雅、現(xiàn)代。

2. 只用一種字體

What

減少屏幕上字體的數(shù)量才能真正發(fā)現(xiàn)排版的力量。設(shè)計(jì)師不需要使用多種字體，只用一種字體，配上斜體、加粗、改變字號(hào)等手段，也可以分辨不同區(qū)域的內(nèi)容。

Why

在app、移動(dòng)端和PC端網(wǎng)站中使用單一字體有助于增強(qiáng)品牌的統(tǒng)一性，優(yōu)化全平臺(tái)的體驗(yàn)。此外，用戶也更喜歡單一字體所帶來(lái)的簡(jiǎn)潔性。

3. 利用留白和卡片式設(shè)計(jì)——不再有線條

What

以前，人們會(huì)使用線條和各種分隔符號(hào)來(lái)區(qū)分界面上的不同區(qū)域，但實(shí)際上這種方式現(xiàn)在看來(lái)會(huì)顯得過(guò)于擁擠。在設(shè)計(jì)中去掉線條通過(guò)留白和卡片的方式呈現(xiàn)內(nèi)容，可以創(chuàng)造出更干凈的界面。

Why

去掉明顯的線條和分隔符可以使界面更加時(shí)尚，也更容易關(guān)注到功能。圖片和字體可以放得更大，界面更加明晰，產(chǎn)品的易用性也將提高。而且，利用留白空間區(qū)分不同模塊也不像劃線那樣突兀。

4. 強(qiáng)調(diào)數(shù)字

What

現(xiàn)在的用戶傾向于更簡(jiǎn)單的界面，因此使用大字號(hào)和突出的顏色能夠更好地確保數(shù)字在人們注意力的中心。根據(jù)目標(biāo)消費(fèi)者的不同，所強(qiáng)調(diào)的數(shù)字可以有所變化。

Why

使用更大的字號(hào)或更突出的顏色可以將用戶的注意力吸引到屏幕上某個(gè)特定的區(qū)域，同時(shí)又不需要十分扎眼的推送，也不必要求用戶進(jìn)行操作。最終結(jié)果就是，用戶更快地獲取到了關(guān)鍵信息，整個(gè)頁(yè)面的瀏覽體驗(yàn)更好。

5. 微交互

What

微交互指的是一些細(xì)微的視覺效果增強(qiáng)（比如動(dòng)畫或音效）。在用戶完成交易、添加收藏或者彈出消息時(shí)都可以設(shè)置小的交互動(dòng)作，將人們的注意力吸引到合適的位置，讓你的產(chǎn)品與眾不同。

Why

這些微交互可以作為用戶完成某個(gè)動(dòng)作的信號(hào)。微交互較好的產(chǎn)品使用起來(lái)會(huì)更簡(jiǎn)單、有趣，用戶的參與感也更強(qiáng)。

6. 使用更簡(jiǎn)潔的配色方案

What

自2013年扁平化設(shè)計(jì)開始普及以來(lái)，使用更簡(jiǎn)潔的配色方案就成為一種趨勢(shì)。設(shè)計(jì)師和用戶都傾向于使用更少的顏色，以保持界面的干凈。

Why

正確使用顏色可以營(yíng)造情境，將用戶的注意力引導(dǎo)到合適的位置，強(qiáng)調(diào)關(guān)鍵功能，提高整個(gè)使用app過(guò)程中的體驗(yàn)。此外還能增強(qiáng)用戶對(duì)于品牌的辨識(shí)度。

7. 分層的界面

What

以前，用戶界面都是擬物化的，從事物本身選取素材，比如電子日歷長(zhǎng)得和紙質(zhì)桌面日歷一樣，把a(bǔ)pp圖標(biāo)設(shè)計(jì)成立體的，按鍵音也模仿傳統(tǒng)電話。現(xiàn)在，扁平化設(shè)計(jì)通過(guò)分層的方式來(lái)表現(xiàn)事物的深度和層次，創(chuàng)造一種更加“有形”的感覺。

Why

我 們的現(xiàn)實(shí)世界是3D的，以前人們習(xí)慣的界面也是擬物的，所以在進(jìn)行扁平化設(shè)計(jì)時(shí)可能會(huì)出現(xiàn)的一個(gè)風(fēng)險(xiǎn)就是“過(guò)于扁平”，導(dǎo)致用戶的不適應(yīng)，而分層設(shè)計(jì)就是 解決這個(gè)問(wèn)題的方法，把一個(gè)物件放在另一個(gè)物件的上方，充分利用縱向的層次，幫助用戶理清不同物件之間的關(guān)系，把注意力放在特定的位置。

8. 虛擬按鈕

What

虛擬按鈕指的是透明的按鈕，沒有顏色填充，通過(guò)細(xì)線勾勒出長(zhǎng)方形或正方形的邊緣，邊角是直角或圓弧形。按鈕中文字也極簡(jiǎn)的。

Why

這些設(shè)計(jì)優(yōu)雅的按鍵可以抓住用戶的注意力，看起來(lái)十分干凈、時(shí)髦又不花哨。同一個(gè)頁(yè)面上的按鈕還可以通過(guò)不同的設(shè)計(jì)和位置來(lái)表現(xiàn)優(yōu)先級(jí)，比如用虛擬按鈕來(lái)顯示選項(xiàng)或者中間步驟。在material design的一些情況下，還可以用細(xì)微的陰影幫助用戶理解按鈕的層級(jí)。

9. 手勢(shì)

What

隨著陀螺儀和運(yùn)動(dòng)傳感器的普及，用戶在使用設(shè)備時(shí)不僅可以點(diǎn)擊屏幕，還可以將現(xiàn)實(shí)生活中的一些手勢(shì)運(yùn)用到屏幕上。

Why

很多手勢(shì)是符合用戶的直覺的，比如當(dāng)需要?jiǎng)h除某個(gè)東西時(shí)，不論年齡性別的用戶都會(huì)想到把這個(gè)東西扔出屏幕。手勢(shì)可以顯著提升產(chǎn)品的使用體驗(yàn)，幫助用戶以更少的點(diǎn)擊完成更多交互。

10. 動(dòng)態(tài)效果

What

隨著軟件技術(shù)的進(jìn)步，設(shè)計(jì)師現(xiàn)在可以利用樣式表來(lái)控制畫面的動(dòng)態(tài)效果，比如用來(lái)過(guò)渡、顯示動(dòng)畫甚至模仿3D立體感。設(shè)計(jì)中動(dòng)態(tài)效果的使用可以促進(jìn)用戶的參與，并適當(dāng)強(qiáng)調(diào)某些元素。

Why

動(dòng)態(tài)效果可以將用戶的注意力吸引到特定區(qū)域，或者讓他們不要注意某個(gè)區(qū)域。通過(guò)視覺上的反饋，它可以增加用戶的參與度，取悅用戶，甚至讓他們感到驚嘆。

11. 更短的用戶操作流程

What

以前，人們完成一次交易可能要跳轉(zhuǎn)好幾個(gè)頁(yè)面，而現(xiàn)在在一屏內(nèi)就可以完成這些步驟，省時(shí)省力。比如用戶在完成某項(xiàng)任務(wù)后會(huì)高亮接下來(lái)所需要進(jìn)行的操作或者自動(dòng)打開新頁(yè)面。

Why

現(xiàn)在人們的生活節(jié)奏較快，經(jīng)常會(huì)在走路的時(shí)候用手機(jī)，因此簡(jiǎn)單快捷的操作更受歡迎。按照這種思路設(shè)計(jì)產(chǎn)品操作流程可以幫用戶省時(shí)省力，增加轉(zhuǎn)化率并提高用戶打開app的頻率。

12. 最優(yōu)化設(shè)計(jì)規(guī)范

What

設(shè)計(jì)規(guī)范是在項(xiàng)目開始之初制定的視覺語(yǔ)言規(guī)范，包括顏色、圖標(biāo)和整體風(fēng)格等方面的標(biāo)準(zhǔn)。

Why

制定設(shè)計(jì)規(guī)范可以保持應(yīng)用內(nèi)以及各平臺(tái)之間設(shè)計(jì)語(yǔ)言的一致性，同時(shí)還能在開發(fā)過(guò)程中盡可能減少錯(cuò)誤，在未來(lái)做出修改時(shí)也更方便。

13. 利用原型不斷改進(jìn)

What

產(chǎn)品原型可以為功能的開發(fā)設(shè)計(jì)提供寶貴的指導(dǎo)。在產(chǎn)品設(shè)計(jì)的早期做出矯正，避免在產(chǎn)品基本成型時(shí)才修改，浪費(fèi)時(shí)間和精力。

Why

通過(guò)低成本的“實(shí)驗(yàn)”，可以測(cè)試產(chǎn)品各個(gè)功能的需求，通過(guò)迭代改進(jìn)產(chǎn)品，用更少的時(shí)間開發(fā)出更好的產(chǎn)品。

原文來(lái)自：36kr

本文編譯自：medium.com

作者：Onur Oral