發(fā)布時(shí)間:2023-12-15 09:19:02 瀏覽量:201次
UI設(shè)計(jì)移動(dòng)端的用戶體驗(yàn)越來越重要,怎么抓住用戶的心,這5招告訴你。
不談APP,即使是瀏覽網(wǎng)頁,大部分用戶都是從移動(dòng)端設(shè)備來進(jìn)行了。所以,為移動(dòng)端的用戶設(shè)計(jì)穩(wěn)定、可用的用戶體驗(yàn),是UI設(shè)計(jì)師最需要注意的事情。當(dāng)然,UI/UX設(shè)計(jì)的成熟,設(shè)計(jì)師們從常見的設(shè)計(jì)模式中探索出來的經(jīng)驗(yàn),總結(jié)出來了5條提升移動(dòng)端體驗(yàn)的技巧。
相比于曾經(jīng)所流行的大型導(dǎo)航設(shè)計(jì),移動(dòng)端設(shè)備和精簡(jiǎn)的導(dǎo)航更搭。當(dāng)用戶在使用移動(dòng)端設(shè)備的時(shí)候,注意力和時(shí)間通常都是碎片化的,當(dāng)他們打開應(yīng)用和網(wǎng)站的時(shí)候,希望盡快找到想要的內(nèi)容。
所以,在設(shè)計(jì)移動(dòng)端APP和網(wǎng)站的導(dǎo)航的時(shí)候,盡量根據(jù)分析和實(shí)際狀況,保留最常用的的幾個(gè)導(dǎo)航選項(xiàng)即可。
這樣的設(shè)計(jì)一方面能夠節(jié)省屏幕空間,而且導(dǎo)航選項(xiàng)的觸發(fā)區(qū)域也可以設(shè)計(jì)得相對(duì)更大一些。
UI設(shè)計(jì)移動(dòng)端用戶體驗(yàn)越來越重要,怎么抓用戶的心,這5招告訴你
至于漢堡圖標(biāo)和彈出式菜單,具體用法見仁見智,可以根據(jù)實(shí)際狀況靈活處理。但是有了漢堡圖標(biāo)這一約定俗成的菜單標(biāo)識(shí),用戶可以快速理解它的含義,并且意識(shí)到背后還有一個(gè)彈出式的菜單。
Ebates 這款A(yù)PP 就使用了兩級(jí)菜單的設(shè)計(jì),首先最常用的導(dǎo)航選項(xiàng)被做成標(biāo)簽頁置于頁面頂部,另外一個(gè)就是右上角的書簽式菜單(心型+漢堡圖標(biāo))。整個(gè)設(shè)計(jì)確保了功能性,足夠簡(jiǎn)單,不會(huì)讓用戶覺得復(fù)雜,也可以輕松找到他們想要的東西。
移動(dòng)端的交互和桌面端是截然不同的,而你的UI和UX設(shè)計(jì)要有意識(shí)地為移動(dòng)端進(jìn)行適配。
在這個(gè)過程中,手勢(shì)交互是很重要的組成部分,設(shè)計(jì)師應(yīng)該充分利用手勢(shì),幫助用戶更快更高效地完成交互。
常見的手勢(shì)包括:
點(diǎn)按,雙擊
按壓
長(zhǎng)按
托拽
縮放
滑動(dòng)
移動(dòng)端的手勢(shì)交互的地位相當(dāng)于桌面端的點(diǎn)擊交互。
不過當(dāng)你在思考手勢(shì)交互的時(shí)候,別忘了搭配相應(yīng)的觸覺反饋。在我們?nèi)粘J褂靡苿?dòng)端設(shè)備的過程中,常常會(huì)借用震動(dòng)和力反饋來強(qiáng)化交互體驗(yàn)。而這種觸感的設(shè)計(jì),精髓在于盡量微妙一點(diǎn),確保能讓用戶感知到反饋,又不會(huì)太過吸引人注意。觸摸界面越來越多,用戶是期望從中獲得積極響應(yīng)的。
人們始終是希望通過語言交流來溝通的。也正是這種需求,使得對(duì)話式UI和聊天機(jī)器人能逐步走到臺(tái)前,成為一種流行趨勢(shì)。所以,當(dāng)你的移動(dòng)端UI當(dāng)中,擁有讓用戶可以即時(shí)聊天的可能性的時(shí)候,你可以借用對(duì)話式UI 來提升用戶體驗(yàn):
在你的界面當(dāng)中加入更加觸動(dòng)人心的文案。無論是成段的文本,還是界面元素里的微文案,都可以通過更有觸動(dòng)性的文本來創(chuàng)造對(duì)話的感覺。就像 WTFWeather 這個(gè)應(yīng)用一樣,從文本到標(biāo)簽都采用的是對(duì)話式的表達(dá),在為用戶推送信息的時(shí)候也盡量營造出對(duì)話的感覺。
使用聊天機(jī)器人和對(duì)話界面來和用戶進(jìn)行溝通。聊天機(jī)器人可謂是 24小時(shí)在線的客服,他們幫助用戶解決問題,也能從某種程度上提升客戶的忠誠度。
將語音交互集成到設(shè)計(jì)當(dāng)中來。Siri 、Cortana 和 Alexa 幾乎是家喻戶曉的人工智能語音助手了,將它們加入進(jìn)來,讓對(duì)話式界面更加強(qiáng)大。
如果你仔細(xì)觀察近年來的網(wǎng)頁,會(huì)發(fā)現(xiàn)動(dòng)畫特效已經(jīng)無處不在了。動(dòng)畫效果能夠讓頁面更加自然,更加漂亮,也更加引人入勝。動(dòng)畫不僅能夠吸引用戶關(guān)注,而且能夠幫助用戶展示如何更好的設(shè)計(jì)和交互。
Google 地圖 當(dāng)中就集成了少量的動(dòng)效,它們并不引人注意,但是讓整個(gè)應(yīng)用更好周到、完整。在之前 Nick Babich 的文章當(dāng)中,他總結(jié)了動(dòng)效的三個(gè)關(guān)鍵用途:
呈現(xiàn)系統(tǒng)狀態(tài):使用動(dòng)效來顯示加載狀態(tài),內(nèi)容刷新,推送通知
用戶導(dǎo)航和過渡:使用動(dòng)效來幫助用戶了解內(nèi)容切換,件視覺層次,呈現(xiàn)狀態(tài)的變化
用于視覺反饋:使用動(dòng)畫幫助用戶確認(rèn)他們之前的操作完成了
相比于網(wǎng)頁,APP當(dāng)中的新用戶引導(dǎo)流程是相當(dāng)關(guān)鍵的。
絕大多數(shù)的應(yīng)用因?yàn)槠渲械墓δ堋⒎?wù)的獨(dú)特性,設(shè)計(jì)師會(huì)在用戶初次打開應(yīng)用的提供快速入門的教程,引導(dǎo)用戶熟悉其功能。這一點(diǎn)在游戲類應(yīng)用中尤其普遍。
如果新用戶引導(dǎo)教程做的足夠有趣,很容易提升用戶的忠誠度。確保引導(dǎo)教程足夠簡(jiǎn)單,并且能夠給用戶以幫助,而用戶看過之后,如果還能回過頭來再次查看,就更好了。
移動(dòng)端網(wǎng)站則不同,最大的問題通常不是新用戶引導(dǎo)而是注冊(cè)表單和登錄表單。移動(dòng)端設(shè)備上,用戶對(duì)于表單的易用性其實(shí)非常的敏感,用戶不會(huì)喜歡又臭又長(zhǎng)的表單和復(fù)雜的字段,所以,簡(jiǎn)化移動(dòng)端網(wǎng)頁的表單,能夠更好地提升轉(zhuǎn)化率。
看看上面的GoodRx,表單的設(shè)計(jì)就足夠簡(jiǎn)單。
注冊(cè)表單不應(yīng)復(fù)雜。讓用戶輸入郵箱注冊(cè),用戶名、郵箱、密碼三者綁定,登錄的時(shí)候用戶名和郵箱通用,這樣能夠便捷不少。
當(dāng)然,還有更為便捷的思路,就是使用通用的社交網(wǎng)絡(luò)站好來登錄注冊(cè),這樣對(duì)于用戶而言就更加方便了。
移動(dòng)端用戶體驗(yàn)要如何構(gòu)建,對(duì)于如今的設(shè)計(jì)師而言,是很日常的問題了。激烈的競(jìng)爭(zhēng)中,產(chǎn)品的差異往往是透過各種細(xì)節(jié)來呈現(xiàn)的。創(chuàng)建一套易用的用戶界面,結(jié)合良好的用戶體驗(yàn),在細(xì)節(jié)上精細(xì)打磨,才能讓用戶真正留下來。
熱門資訊
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范,原來如此重要!
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎?這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范,包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
3. 移動(dòng)端UI設(shè)計(jì)中常見的5種APP界面類型,你get到了嗎?
通過介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型,幫助大家更好地了解UI設(shè)計(jì)的基本知識(shí)
4. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
5. 移動(dòng)端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個(gè)好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
6. 推薦10本適合UI設(shè)計(jì)師看的書籍,輕松掌握技能!
對(duì)于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久?培訓(xùn)完能拿多少工資?
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長(zhǎng)與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程,以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過程中,應(yīng)盡量使用簡(jiǎn)潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣?想學(xué)UI設(shè)計(jì)要多少錢?
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎?不知道學(xué)UI設(shè)計(jì)要花多少錢?不妨看看這篇文章,了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
10. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對(duì)色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
最新文章
同學(xué)您好!