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

首先說明愉阎,這是一篇轉(zhuǎn)載的文章触趴,原文在這

移動端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)品最有影響力的趨勢:

1. 卡片視圖

1.card view.gif

隨著移動端設(shè)備在互聯(lián)網(wǎng)中的地位越發(fā)重要弟灼,產(chǎn)品的打磨中,如何使得移動端和桌面端UI之間的界限更為模糊冒黑,用戶體驗(yàn)更加無痕田绑,則是設(shè)計(jì)師迫切需要解決的問題÷盏卡片視圖則很好的解決了這個問題掩驱、

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

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

2.微交互

2.micro interaction.gif

從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)樗鹆巳藗兛偸窍肓私飧嘈畔⒌脑加叫堋S脩粼谶M(jìn)行某個操作后能瞬間得到視覺上的反饋奇适,這會讓人充滿繼續(xù)操作下去的欲望。微交互也可以用來引導(dǎo)用戶進(jìn)行正確的操作芦鳍。

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

3.拉長滾動和視差

31.png

拉長滾動能夠很好的把桌面端內(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ì)更方便

4.data fill.gif

在用戶體驗(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. 全屏視頻

9.png

視覺永遠(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)品主頁來說價值可以得到充分發(fā)揮赶站,讓背景排版更為大氣華麗。

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

6.flat design.png

扁平化風(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í)

7.ar.gif

隨著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.漸變色

81.png

自從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)新。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末侈离,一起剝皮案震驚了整個濱河市试幽,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌卦碾,老刑警劉巖铺坞,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異洲胖,居然都是意外死亡济榨,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進(jìn)店門绿映,熙熙樓的掌柜王于貴愁眉苦臉地迎上來擒滑,“玉大人腐晾,你說我怎么就攤上這事∝ひ唬” “怎么了藻糖?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵,是天一觀的道長库车。 經(jīng)常有香客問我巨柒,道長,這世上最難降的妖魔是什么柠衍? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任洋满,我火速辦了婚禮,結(jié)果婚禮上珍坊,老公的妹妹穿的比我還像新娘牺勾。我一直安慰自己,他們只是感情好阵漏,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布驻民。 她就那樣靜靜地躺著,像睡著了一般袱饭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上呛占,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天虑乖,我揣著相機(jī)與錄音,去河邊找鬼晾虑。 笑死疹味,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的帜篇。 我是一名探鬼主播糙捺,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼笙隙!你這毒婦竟也來了洪灯?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤竟痰,失蹤者是張志新(化名)和其女友劉穎签钩,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體坏快,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡铅檩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了莽鸿。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片昧旨。...
    茶點(diǎn)故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡拾给,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出兔沃,到底是詐尸還是另有隱情蒋得,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布粘拾,位于F島的核電站窄锅,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏缰雇。R本人自食惡果不足惜入偷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望械哟。 院中可真熱鬧疏之,春花似錦、人聲如沸暇咆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽爸业。三九已至其骄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間扯旷,已是汗流浹背拯爽。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留钧忽,地道東北人毯炮。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像耸黑,于是被迫代替她去往敵國和親桃煎。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 從移動端興起大刊,主流設(shè)計(jì)風(fēng)格定型为迈,再到Uber、Vine等現(xiàn)象級APP的崛起缺菌,移動端的APP設(shè)計(jì)直到現(xiàn)在才漸入佳境曲尸。...
    shanghaicity88閱讀 837評論 0 7
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,745評論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件男翰、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,059評論 4 62
  • 我是日記星球271號星寶寶 正在參加21天蛻變之旅 下輩子我要做顆沒有棱角的石頭 或許做棵樹一半在泥土里深埋 一...
    徐夢琳閱讀 1,758評論 0 0
  • 第一次畫簡筆…
    Qincius閱讀 165評論 0 0