您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

讓移動(dòng)端用戶(hù)體驗(yàn)出類(lèi)拔萃的5種技巧

不談APP,即使是欣賞頁(yè)面,大部分用戶(hù)也已經(jīng)是寄托移動(dòng)端設(shè)備來(lái)進(jìn)行了。所以,無(wú)論你是頁(yè)面設(shè)計(jì)師照舊在研發(fā)APP,為移動(dòng)端的用戶(hù)設(shè)計(jì)穩(wěn)固、可用的用戶(hù)體驗(yàn),應(yīng)該是你份內(nèi)的事情。當(dāng)然,因?yàn)楝F(xiàn)在UI/UX設(shè)計(jì)的成熟,各種最佳實(shí)踐使得設(shè)計(jì)師不用再對(duì)一些常見(jiàn)的設(shè)計(jì)模式從頭開(kāi)始摸索,而今天我們所聊的提拔移動(dòng)端體驗(yàn)的技巧,也是如許探索出來(lái)的經(jīng)驗(yàn)總結(jié)。

1、簡(jiǎn)化導(dǎo)航

相比于曾經(jīng)所流行的大型導(dǎo)航設(shè)計(jì),移動(dòng)端設(shè)備和精簡(jiǎn)的導(dǎo)航更搭。當(dāng)用戶(hù)在使用移動(dòng)端設(shè)備的時(shí)候,細(xì)致力和時(shí)間通常都是碎片化的,當(dāng)他們打開(kāi)應(yīng)用和網(wǎng)站的時(shí)候,盼望盡快找到想要的內(nèi)容。

所以,在設(shè)計(jì)移動(dòng)端APP和網(wǎng)站的導(dǎo)航的時(shí)候,盡量根據(jù)分析和現(xiàn)實(shí)狀態(tài),保留最常用的的幾個(gè)導(dǎo)航選項(xiàng)即可。

如許的設(shè)計(jì)一方面能夠節(jié)省屏幕空間,而且導(dǎo)航選項(xiàng)的觸發(fā)區(qū)域也可以設(shè)計(jì)得相對(duì)更大一些。

至于漢堡圖標(biāo)和彈出式菜單,詳細(xì)用法見(jiàn)仁見(jiàn)智,可以根據(jù)現(xiàn)實(shí)狀態(tài)天真處理。但是有了漢堡圖標(biāo)這一約定俗成的菜單標(biāo)識(shí),用戶(hù)可以快速理解它的含義,并且意識(shí)到背后還有一個(gè)彈出式的菜單。

Ebates 這款A(yù)PP 就使用了兩級(jí)菜單的設(shè)計(jì),首先最常用的導(dǎo)航選項(xiàng)被做成標(biāo)簽頁(yè)置于網(wǎng)頁(yè)頂部,另外一個(gè)就是右上角的書(shū)簽式菜單(心型+漢堡圖標(biāo))。整個(gè)設(shè)計(jì)確保了功能性,充足簡(jiǎn)單,不會(huì)讓用戶(hù)覺(jué)得復(fù)雜,也可以輕松找到他們想要的東西。

2、多考慮手勢(shì)與觸感

移動(dòng)端的交互和桌面端是截然不同的,而你的UI和UX設(shè)計(jì)要故意識(shí)地為移動(dòng)端進(jìn)行適配。

在這個(gè)過(guò)程中,手勢(shì)交互是很緊張的組成部分,設(shè)計(jì)師應(yīng)該充分行使手勢(shì),幫助用戶(hù)更快更高效地完成交互。

常見(jiàn)的手勢(shì)包括:

  • 點(diǎn)按,雙擊
  • 按壓
  • 長(zhǎng)按
  • 托拽
  • 縮放
  • 滑動(dòng)

移動(dòng)端的手勢(shì)交互的地位相稱(chēng)于桌面端的點(diǎn)擊交互。

不過(guò)當(dāng)你在思考手勢(shì)交互的時(shí)候,別忘了搭配響應(yīng)的觸覺(jué)反饋。在我們?nèi)粘J褂靡苿?dòng)端設(shè)備的過(guò)程中,常常會(huì)借用震蕩和力反饋來(lái)強(qiáng)化交互體驗(yàn)。而這種觸感的設(shè)計(jì),精髓在于盡量玄妙一點(diǎn),確保能讓用戶(hù)感知到反饋,又不會(huì)太過(guò)吸引人細(xì)致。觸摸界面越來(lái)越多,用戶(hù)是期望從中獲得積極相應(yīng)的。

3、創(chuàng)造對(duì)話(huà)

人們始終是盼望通過(guò)語(yǔ)言交流來(lái)溝通的。也正是這種需求,使得對(duì)話(huà)式UI和聊天機(jī)器人能漸漸走到臺(tái)前,成為一種流行趨勢(shì)。所以,當(dāng)你的移動(dòng)端UI當(dāng)中,擁有讓用戶(hù)可以即時(shí)聊天的可能性的時(shí)候,你可以借用對(duì)話(huà)式UI 來(lái)提拔用戶(hù)體驗(yàn):

  • 在你的界面當(dāng)中加入更加觸動(dòng)人心的文案。無(wú)論是成段的文本,照舊界面元素里的微文案,都可以通過(guò)更有觸動(dòng)性的文原本創(chuàng)造對(duì)話(huà)的感覺(jué)。就像 WTFWeather 這個(gè)應(yīng)用一樣,從文本到標(biāo)簽都采用的是對(duì)話(huà)式的表達(dá),在為用戶(hù)推送信息的時(shí)候也盡量營(yíng)造出對(duì)話(huà)的感覺(jué)。
  • 使用聊天機(jī)器人和對(duì)話(huà)界面來(lái)和用戶(hù)進(jìn)行溝通。聊天機(jī)器人可謂是 24小時(shí)在線的客服,他們幫助用戶(hù)解決題目,也能從某種程度上提拔客戶(hù)的忠誠(chéng)度。
  • 將語(yǔ)音交互集成到設(shè)計(jì)當(dāng)中來(lái)。Siri 、Cortana 和 Alexa 幾乎是家喻戶(hù)曉的人工智能語(yǔ)音助手了,將它們加入進(jìn)來(lái),讓對(duì)話(huà)式界面更增強(qiáng)大。

4、動(dòng)畫(huà)化

假如你細(xì)心觀察近年來(lái)的頁(yè)面,會(huì)發(fā)現(xiàn)動(dòng)畫(huà)殊效已經(jīng)無(wú)處不在了。動(dòng)畫(huà)結(jié)果能夠讓網(wǎng)頁(yè)更加天然,更加漂亮,也更加引人入勝。動(dòng)畫(huà)不僅能夠吸引用戶(hù)關(guān)注,而且能夠幫助用戶(hù)展示如何更好的設(shè)計(jì)和交互。

Google 地圖 當(dāng)中就集成了少量的動(dòng)效,它們并不引人細(xì)致,但是讓整個(gè)應(yīng)用更好殷勤、完備。在之前 Nick Babich 的文章當(dāng)中,他總結(jié)了動(dòng)效的三個(gè)關(guān)鍵用途:

  • 呈現(xiàn)體系狀況:使用動(dòng)效來(lái)表現(xiàn)加載狀況,內(nèi)容刷新,推送關(guān)照
  • 用戶(hù)導(dǎo)航和過(guò)渡:使用動(dòng)效來(lái)幫助用戶(hù)了解內(nèi)容切換,件視覺(jué)條理,呈近況態(tài)的轉(zhuǎn)變
  • 用于視覺(jué)反饋:使用動(dòng)畫(huà)幫助用戶(hù)確認(rèn)他們之前的操作完成了

5、善用新用戶(hù)指導(dǎo)流程和表單

相比于頁(yè)面,APP當(dāng)中的新用戶(hù)指導(dǎo)流程是相稱(chēng)關(guān)鍵的。

絕大多數(shù)的應(yīng)用由于其中的功能、服務(wù)的獨(dú)特征,設(shè)計(jì)師會(huì)在用戶(hù)初次打開(kāi)應(yīng)用的提供快速入門(mén)的教程,指導(dǎo)用戶(hù)認(rèn)識(shí)其功能。這一點(diǎn)在游戲類(lèi)應(yīng)用中尤其普遍。

假如新用戶(hù)指導(dǎo)教程做的充足風(fēng)趣,很容易提拔用戶(hù)的忠誠(chéng)度。確保指導(dǎo)教程充足簡(jiǎn)單,并且能夠給用戶(hù)以幫助,而用戶(hù)看過(guò)之后,假如還能回過(guò)頭來(lái)再次查看,就更好了。

移動(dòng)端網(wǎng)站則不同,最大的題目通常不是新用戶(hù)指導(dǎo)而是注冊(cè)表單和登錄表單。移動(dòng)端設(shè)備上,用戶(hù)對(duì)于表單的易用性其實(shí)特別很是的敏感,用戶(hù)不會(huì)喜好又臭又長(zhǎng)的表單和復(fù)雜的字段,所以,簡(jiǎn)化移動(dòng)端頁(yè)面的表單,能夠更好地提拔轉(zhuǎn)化率。

看看上面的GoodRx,表單的設(shè)計(jì)就充足簡(jiǎn)單。

注冊(cè)表單不應(yīng)復(fù)雜。讓用戶(hù)輸入郵箱注冊(cè),用戶(hù)名、郵箱、密碼三者綁定,登錄的時(shí)候用戶(hù)名和郵箱通用,如許能夠便捷不少。

當(dāng)然,還有更為便捷的思路,就是使用通用的社交網(wǎng)絡(luò)站好來(lái)登錄注冊(cè),如許對(duì)于用戶(hù)而言就更加方便了。

結(jié)語(yǔ)

移動(dòng)端用戶(hù)體驗(yàn)要如何構(gòu)建,對(duì)于現(xiàn)在的設(shè)計(jì)師而言,是很日常的題目了。激烈的競(jìng)爭(zhēng)中,產(chǎn)品的差異每每是透過(guò)各種細(xì)節(jié)來(lái)呈現(xiàn)的。創(chuàng)建一套易用的用戶(hù)界面,結(jié)合優(yōu)秀的用戶(hù)體驗(yàn),在細(xì)節(jié)上邃密打磨,才能讓用戶(hù)真正留下來(lái)。


[教程作者:互聯(lián)網(wǎng)]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/wd3826.html
拿到低保真原型后,設(shè)計(jì)師應(yīng)該做哪些事情?
淺析APP中的那些預(yù)加載圖設(shè)計(jì)
圖趣網(wǎng)微信
建議反饋
×