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

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

1、輕量化設(shè)計(jì)

圖來(lái)自Ghani Pradita

是什么

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

為什么

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

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

圖來(lái)自Brian Plemons

是什么

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

為什么

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

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

是什么

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

為什么

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

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

圖來(lái)自Morgan Allan Knutson

是什么

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

為什么

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

5、微交互

圖來(lái)自Kirill

是什么

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

為什么

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

6、小色塊

圖來(lái)自Ari

是什么

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

為什么

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

7、界面元素分層

圖來(lái)自Roman Nurik

是什么

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

為什么

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

8、幽靈按鈕（GhostButtons）

圖來(lái)自?Gleb Kuznetsov

是什么

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

為什么

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

9、手勢(shì)

圖來(lái)自Javi Pérez

是什么

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

為什么

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

10、APP動(dòng)效

圖來(lái)自Eddie Lobanovskiy

是什么

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

為什么

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

11、短小的用戶(hù)流

圖來(lái)自Jan Losert

是什么

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

為什么

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

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

圖來(lái)自Bill S Kenney

是什么

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

為什么

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

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

圖來(lái)自Ramil?Derogongun

是什么

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

為什么

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

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