2018 移動端APP設(shè)計(jì)趨勢 2

移動端APP在2017年經(jīng)歷了諸多的變化， 人工智能、聊天式的界面、響應(yīng)式設(shè)計(jì)、虛擬現(xiàn)實(shí)（VR）和增強(qiáng)現(xiàn)實(shí)（AR）讓設(shè)計(jì)師不斷面臨新的挑戰(zhàn)。研究表明，用戶每天耗費(fèi)在手機(jī)和平板上的平均時長為158分鐘，其中127分鐘是耗費(fèi)在各類APP中，可以看出移動端APP的快速發(fā)展都是不爭的事實(shí)，在我們不斷吸收新的東西和掌握新的潮流的同時，還需要確認(rèn)這些設(shè)計(jì)趨勢是否被驗(yàn)證了。以下是2017年移動端產(chǎn)品最有影響力的趨勢，同時在2018年也會流行：：

1. 卡片視圖

隨著移動端設(shè)備在互聯(lián)網(wǎng)中的地位越發(fā)重要，產(chǎn)品的打磨中，如何使得移動端和桌面端UI之間的界限更為模糊，用戶體驗(yàn)更加無痕，則是設(shè)計(jì)師迫切需要解決的問題?？ㄆ晥D則很好的解決了這個問題。

作為交互信息的載體，卡片以濃縮的形式提供了快速并且相關(guān)的信息，還會用另一種委婉的方式去要求一次交互。設(shè)計(jì)精美的卡片視圖能夠快速抓住用戶眼球，完全適配響應(yīng)式，還有極高的可讀性。

在較小的屏幕上靈活組織和安排內(nèi)容的意義是無價(jià)的，卡片提供了文本、圖像和視頻等多種媒體內(nèi)容的一體化解決方案，目前為止，App Store，F(xiàn)acebook、Google和Twitter已經(jīng)完成了卡片式設(shè)計(jì)的迭代更新，相信這股趨勢仍然會在2018年保持強(qiáng)勁勢頭。

2．微交互

從2016開始，微交互一直出現(xiàn)在趨勢盤點(diǎn)類的文章中的熱點(diǎn)話題，在這篇2017的回顧當(dāng)中，我們?nèi)匀换乇懿涣宋⒔换ミ@個主題。

在移動端產(chǎn)品中，小屏幕上以動畫形式呈現(xiàn)的微交互對用戶體驗(yàn)和界面都有著至關(guān)的作用。對于用戶體驗(yàn)來說。微交互提供給了用戶直觀而人性化的反饋方式，并且能夠傳遞某種微妙的狀態(tài)和預(yù)知感。

微交互之所以會起作用是因?yàn)樗鹆巳藗兛偸窍肓私飧嘈畔⒌脑加?。用戶在進(jìn)行某個操作后能瞬間得到視覺上的反饋，這會讓人充滿繼續(xù)操作下去的欲望。微交互也可以用來引導(dǎo)用戶進(jìn)行正確的操作。

具體來說，聰明的設(shè)計(jì)師通過有趣的加載動畫，順滑的圖標(biāo)切換等微互動同時起到吸引和明確通知用戶的作用。從長遠(yuǎn)來看，微交互不會變成曇花一現(xiàn)的投機(jī)取巧的小把戲，反而會成為一個更為龐大的豐富的話題，值得設(shè)計(jì)師們不斷探索和創(chuàng)新。

3．拉長滾動和視差

拉長滾動能夠很好的把桌面端內(nèi)容轉(zhuǎn)化到移動端瀏覽，并且滾動這一交互方式本身跟移動端上的觸摸控制渾然一體，有助于用戶在單向滑動中獲取大量內(nèi)容保持不中斷。

不過拉長滾動總的來說已經(jīng)較為普及，這里更多的是想提到視差滾動。視差的原理是讓前景和背景以不同的速度進(jìn)行滾動，從而創(chuàng)造一種深度的視覺觀感。在此基礎(chǔ)上，不少設(shè)計(jì)師已經(jīng)開始嘗試多圖形元素的視差滾動，僅僅通過滾動和圖形就能夠呈現(xiàn)一個完整的故事。

對于產(chǎn)品而言，恰如其分的滾動效果會不單單能夠高效率、分層次地傳遞內(nèi)容和信息，還能夠優(yōu)雅流暢地提高產(chǎn)品本身的精致感。

這款網(wǎng)站是長滾動視差效果的最佳案例，有興趣可以看看：http://everylastdrop.co.uk/。

4. 移動端原型設(shè)計(jì)更方便

在用戶體驗(yàn)和界面設(shè)計(jì)不斷一體化的大趨勢下，原型設(shè)計(jì)在產(chǎn)品設(shè)計(jì)中的地位更加不可或缺，而快速、高效率和可視化則是行業(yè)對原型設(shè)計(jì)的潛在要求，今年各色原型設(shè)計(jì)工具也在不斷地進(jìn)行升級優(yōu)化，例如Mockplus最新的3.2版本支持快速的數(shù)據(jù)自動填充，一鍵導(dǎo)出頁面流程圖，加速了移動端原型設(shè)計(jì)上的效率，從而改善整體工作流程，留出更多時間思考用戶體驗(yàn)。

還值得一體的是，Mockplus在今年舉行的原型設(shè)計(jì)比賽對移動端產(chǎn)品設(shè)計(jì)的優(yōu)化發(fā)展也開了個好頭，產(chǎn)品經(jīng)理和設(shè)計(jì)師們也需要一個更為開放的平臺分享和展示對產(chǎn)品設(shè)計(jì)行業(yè)的理解和思考，從而讓整個行業(yè)更加百花齊放，生機(jī)勃勃。

5. 全屏視頻

視覺永遠(yuǎn)是人們感知最強(qiáng)烈的。巨大的單幅圖片已經(jīng)成為了幾年來的主流設(shè)計(jì)趨勢，而大幅圖片的成功和帶寬的發(fā)展也為全屏沉浸式視頻鋪墊了道路，動態(tài)的視頻在產(chǎn)品設(shè)計(jì)中的出場率越來越高，甚至出現(xiàn)了內(nèi)容豐富、互動強(qiáng)勁的全屏視頻的展示模式。

巨大、動態(tài)和美觀的視覺觀感其實(shí)正是符合了人類本身的自然審美追求，沉浸式的視頻對于產(chǎn)品主頁來說價(jià)值可以得到充分發(fā)揮，讓背景排版更為大氣華麗。

6. 半扁平化設(shè)計(jì)

扁平化風(fēng)格已經(jīng)占領(lǐng)了設(shè)計(jì)風(fēng)潮的半壁江山，在卡片視圖的影響下，為了更加突出內(nèi)容和觀感，扁平化設(shè)計(jì)變得更為立體和多維度，采用了大量的陰影和對比。

平滑的陰影能夠增強(qiáng)界面深度和復(fù)雜性，同時也不會對原有風(fēng)格造成沖突，相信在之后，扁平化風(fēng)格不會止步于現(xiàn)在的整體的風(fēng)格，還會融合更多模式不斷優(yōu)化創(chuàng)新。

7. AR增強(qiáng)現(xiàn)實(shí)

隨著iPhone X上Animoji的推出，2017年成為AR技術(shù)在移動端應(yīng)用上井噴的一年。在技術(shù)的進(jìn)步下，今年的AR產(chǎn)品在信息集成、實(shí)時交互和精準(zhǔn)定位上都有著巨大的突破。此外AR如今已經(jīng)不單單用于兒童的科普和教育認(rèn)知，在移動端產(chǎn)品運(yùn)用范疇上已經(jīng)得到了極大的豐富，如今已經(jīng)涵蓋了軍事、醫(yī)療、建筑、教育、工程、影視和娛樂等領(lǐng)域。

比較值得一提的是宜家《家具指南》APP，早在兩年宜家已經(jīng)開始了AR領(lǐng)域的嘗試，限于技術(shù)當(dāng)時的體驗(yàn)相對不佳。目前這款A(yù)pp已經(jīng)能夠用3D的形式較為精準(zhǔn)地呈現(xiàn)宜家的各色產(chǎn)品了，通過用戶手持手機(jī)旋轉(zhuǎn)角度，即可讓虛擬家具等比例的出現(xiàn)在家里任何角落，家具采購的體驗(yàn)得到了極大提升。

8.漸變色

自從Instagram的logo更改以來，漸變色逐漸進(jìn)入了人們的視野。歸根其原因在于扁平化風(fēng)格極其容易造成同質(zhì)性，追求視覺豐富度的設(shè)計(jì)語言又開始回歸。除了上面提到的半扁平化風(fēng)格，更具視覺沖擊的漸變色能夠牢牢抓住用戶眼球，簡潔的圖形和高飽和度的漸變色能夠較好兼顧設(shè)計(jì)的便利度和視覺的分量感。

色彩上的精準(zhǔn)運(yùn)用，有利于喚起用戶情緒并且建立一個有個性的產(chǎn)品，讓用戶通過色彩深刻地感知你的產(chǎn)品。

總結(jié)

2017年是承上啟下的一年。一方面例如AI、AR和VR技術(shù)的發(fā)展對于產(chǎn)品設(shè)計(jì)本身如同更換了引擎，未來的走向和進(jìn)程有無數(shù)未知的可能和機(jī)遇。另一方面，設(shè)計(jì)上以人為本的基本精神會繼續(xù)指引產(chǎn)品設(shè)計(jì)走向更正確的方向。不管趨勢如何，設(shè)計(jì)師更要堅(jiān)持自己的判斷的想法，從而持之以恒的學(xué)習(xí)和創(chuàng)新。