這是國外專業(yè)的移動端設(shè)計博客總結(jié)的關(guān)于2015年APP UI/UX設(shè)計趨勢的解讀。25學(xué)堂覺得今年的重點(diǎn)關(guān)鍵詞應(yīng)該是輕量化設(shè)計和微交互。

總共是從13個方面來闡述APP UI/UX設(shè)計趨勢。

1、輕量化設(shè)計

圖來自Ghani Pradita

是什么

輕量化設(shè)計避免大量使用漸變和陰影，轉(zhuǎn)而使用“扁平化”風(fēng)格，為應(yīng)用帶來簡潔、清爽的美感。使用留白而不是漸變、陰影，能讓界面看起來更加簡潔，便于突顯核心內(nèi)容，擯棄實(shí)現(xiàn)起來不那么容易以及分散用戶注意力的設(shè)計元素。

為什么

輕量化設(shè)計避免打擾用戶，分散用戶注意力，引導(dǎo)用戶關(guān)注屏幕上的主要內(nèi)容，提供清晰、明了的導(dǎo)航，同時向用戶傳達(dá)了流暢、現(xiàn)代感極強(qiáng)的品牌體驗(yàn)。

2、單一字體統(tǒng)天下

圖來自Brian Plemons

是什么

界面中，只使用一種字體，減少字體種類，將單一字體的表現(xiàn)力發(fā)揮到極致。單一字體，使用斜體、加粗、半粗體等效果，或者使用不同的字號，可以清楚地將內(nèi)容分成不同的區(qū)域，同樣能夠?qū)崿F(xiàn)不同字體實(shí)現(xiàn)的分隔效果。

為什么

整個應(yīng)用使用同一字體能夠提升品牌的一致性，對于其他終端——包括移動端應(yīng)用、手機(jī)網(wǎng)站、網(wǎng)站在內(nèi)——都使用同一字體的話，同一元素在不同終端擁有一致的體驗(yàn)。此外，用戶滾動瀏覽內(nèi)容時，同一種字體帶來的簡潔也會使他們感到很舒服。

3、用留白和塊狀區(qū)域分隔內(nèi)容——線條落伍了

是什么

之前，設(shè)計師喜歡用線條和其他元素來區(qū)分界面中的內(nèi)容，將它們分成不同的部分或類別，但是使用這些元素增加了界面元素的密度，導(dǎo)致界面看起來很擁堵。拿掉線條，根據(jù)內(nèi)容塊自身的顏色再加上內(nèi)容塊之間的間隔可以有效區(qū)分不同部分，這樣充分利用了留白，外觀更加清爽。

為什么

去除顯眼的線條等分隔元素，界面看起來現(xiàn)代感更強(qiáng)，功能得以突出顯示。例如，圖像、字體可以適當(dāng)放大，這樣看起來更清楚，提升易用性。使用留白分隔內(nèi)容較線條，更為自然，減少了生硬和突兀。

4、焦點(diǎn)數(shù)字

圖來自Morgan Allan Knutson

是什么

如今，用戶更喜歡簡潔的界面，使用大字號字體及醒目的顏色來突顯數(shù)字的做法越來越普遍?？筛鶕?jù)目標(biāo)用戶來調(diào)整數(shù)字的樣式。

為什么

大字號、醒目的顏色，兩個可以都用也可以任選其一，能夠自然而然地吸引用戶關(guān)注屏幕的特定區(qū)域——而不是迫使或命令用戶去關(guān)注。因此，用戶獲取信息的速度更快，在用戶看來，導(dǎo)航更加清晰，信息獲取更加快捷。

5、微交互

圖來自Kirill

是什么

微交互指的是圍繞用戶使用場景對細(xì)節(jié)進(jìn)行視覺體驗(yàn)上的改進(jìn)（例如，添加動畫、音效等）。這些場景包括完成交易、收藏商品或者彈出提示框等。這些交互都很小，但是它們能夠引導(dǎo)用戶關(guān)注應(yīng)該關(guān)注的元素，從而讓應(yīng)用看起來與眾不同。

為什么

微交互可以用作用戶完成任務(wù)（比如更改設(shè)置）時的一種激勵，形式可以是彈出消息框等。恰當(dāng)使用微交互，能夠給用戶帶去簡單、充滿趣味的正向體驗(yàn)，用戶也更愛用。

6、小色塊

圖來自Ari

是什么

2013年，扁平化風(fēng)格興起以來，簡單的配色方案成為趨勢，扁平化風(fēng)格注重清爽、簡潔。因此，設(shè)計師和用戶喜歡較少的顏色，他們偏愛清爽的風(fēng)格。

為什么

顏色的使用對于創(chuàng)造情緒，引導(dǎo)用戶的注意力，傳達(dá)品牌形象至關(guān)重要。更少的顏色可以更清楚地傳達(dá)品牌形象。此外，由于較少的顏色降低用戶分神的可能，用戶更喜歡。包含較少色彩的設(shè)計，便于用戶在使用過程中識別主要內(nèi)容，此外，還可以提升導(dǎo)航易用性。

7、界面元素分層

圖來自Roman Nurik

是什么

之前，界面設(shè)計主要圍繞著擬物化設(shè)計的規(guī)則來的，擬物化設(shè)計遵循的原則是采用實(shí)際結(jié)構(gòu)或物體中的元素（例如，電子日歷看起來就像是臺歷，應(yīng)用圖標(biāo)具有立體感，手機(jī)相機(jī)應(yīng)用快門的聲音）。如今，扁平化風(fēng)格與擬物化風(fēng)格相去甚遠(yuǎn)，前者在立體感設(shè)計方面開辟了新的天地，帶來了新機(jī)會。主要一點(diǎn)是使用層來創(chuàng)建立體感和維度，產(chǎn)生了更加“可觸摸”的用戶體驗(yàn)。

為什么

扁平化設(shè)計一個風(fēng)險就是“太平”了——所有的元素都處于同一平面內(nèi)，習(xí)慣了3D世界的用戶如何跳轉(zhuǎn)，如何使用應(yīng)用呢？通過使用z坐標(biāo)，可以把一些元素放到其他元素的上面。層和深度可以幫助用戶識別不同元素之間的關(guān)系，吸引他們關(guān)注主要元素。

8、幽靈按鈕（GhostButtons）

圖來自?Gleb Kuznetsov

是什么

幽靈按鈕指的是透明，沒有填充色的按鈕，它們邊框使用纖細(xì)的線型，形狀很普通，比如矩形或方形，四個角為直角或是邊緣進(jìn)行模糊處理。按鈕中的文字簡單，字號較小。

為什么

幽靈按鈕在不失簡潔的情況下，能夠吸引用戶的注意力，同時看上去很潮且不突兀。如果屏幕上有多個按鈕，可以根據(jù)優(yōu)先級進(jìn)行排列，比如同一頁上有可選項(xiàng)和下一步按鈕，可根據(jù)優(yōu)先級放置這兩個按鈕。在遵循材質(zhì)化原則設(shè)計時，可以為幽靈按鈕添加一點(diǎn)陰影效果，幫助用戶感知按鈕的層級。

9、手勢

圖來自Javi Pérez

是什么

安裝陀螺儀和運(yùn)動傳感器，電子設(shè)備就能用檢測到用戶的動作。從而，用戶和設(shè)備的交互不再只局限于點(diǎn)擊，用戶可以用真實(shí)生活中的動作與設(shè)備進(jìn)行交互。

為什么

用戶很多手勢來自于直覺。我們問用戶如何刪除一項(xiàng)內(nèi)容時，不論受試者年齡大小、性別，他們會嘗試將物體移動到屏幕外的地方。減少點(diǎn)擊，增加滾動，能夠提升用戶體驗(yàn)，應(yīng)用變得交互性更強(qiáng)，而不只是用來點(diǎn)擊的對象。

10、APP動效

圖來自Eddie Lobanovskiy

是什么

隨著軟件技術(shù)的發(fā)展，設(shè)計師如今能夠用樣式表來控制物體的移動，充分利用這點(diǎn)能夠?qū)崿F(xiàn)很多意想不到的效果?；谶\(yùn)動的設(shè)計元素形式多樣，包括轉(zhuǎn)場、動畫，甚至用紋理模擬3D縱深效果（and evenon texture to mimic 3D depth）。設(shè)計中的運(yùn)動效果提升用戶參與度，帶給他們主人翁般的感覺，還可以將當(dāng)前場景的重要元素或數(shù)據(jù)與其他元素區(qū)分開來，便于用戶分辨主次。

為什么

動作能夠吸引用戶關(guān)注特定區(qū)域——或幫助他們轉(zhuǎn)移注意力。在視覺上給予回復(fù)，提升用戶參與感，是讓用戶感到驚喜的“驚奇因子”。

11、短小的用戶流

圖來自Jan Losert

是什么

縮短用戶流，用戶在完成任務(wù)前，我們應(yīng)避免讓用戶瀏覽過多頁面，減少中間頁面數(shù)量，最好在一屏內(nèi)囊括緊密聯(lián)系的幾個步驟，減少用戶花費(fèi)的時間和精力。例如，當(dāng)用戶完成前一項(xiàng)表單域的填寫時，新開一個表單或者高亮顯示接下來要填寫的表單域。

為什么

移動用戶使用應(yīng)用時，可能還在處理別的事情，所以他們很忙，他們更喜歡快捷地完成應(yīng)用內(nèi)的任務(wù)。設(shè)計時，考慮到這一點(diǎn)，能有效降低用戶的精力，增加轉(zhuǎn)化率和使用頻率。

12、設(shè)計標(biāo)準(zhǔn)——最佳設(shè)計實(shí)踐

圖來自Bill S Kenney

是什么

設(shè)計標(biāo)準(zhǔn)指的是在項(xiàng)目之初，通過確定顏色、圖標(biāo)、全局留白（global padding），把視覺語言標(biāo)準(zhǔn)化。

為什么

確定設(shè)計的標(biāo)準(zhǔn)，保證應(yīng)用內(nèi)部以及在不同終端的一致性，最小化項(xiàng)目過程中的錯誤，也便于日后修改。

13、制作原型——最佳設(shè)計實(shí)踐

圖來自Ramil?Derogongun

是什么

原型是產(chǎn)品準(zhǔn)備階段或早起的版本。使用原型，能夠更好地了解產(chǎn)品的功能，幫助發(fā)現(xiàn)用戶體驗(yàn)不夠好的地方，以提前修改，避免浪費(fèi)設(shè)計師的時間和精力。

為什么

制作原型不需要花費(fèi)太多精力，耗時也不會很長，可以幫助大家弄清楚項(xiàng)目的核心內(nèi)容、工作范圍以及要求。原型實(shí)驗(yàn)為設(shè)計人員留下寶貴時間和資源，他們可以根據(jù)原型測試結(jié)果來進(jìn)行修改、迭代，這種由觀察實(shí)驗(yàn)（insight-driven）驅(qū)動的設(shè)計過程更為有效。

在此25學(xué)堂感謝?宜_生?同學(xué)翻譯。內(nèi)容來源：https://medium.com/interactive-mind/mobile-2015-263ab694e60e