時(shí)代的推移,移動(dòng)端已經(jīng)成為互聯(lián)網(wǎng)中,較為主力的一種互聯(lián)網(wǎng)模式。但越是與人們生活不容分開(kāi),對(duì)于設(shè)計(jì)與內(nèi)容的調(diào)整就需要幾乎完美。因?yàn)榱己玫挠脩趔w驗(yàn)和內(nèi)容無(wú)縫的配合,才能得到大家的認(rèn)可。這時(shí)就需要設(shè)計(jì)師們對(duì)于小屏幕交互進(jìn)行相關(guān)的設(shè)計(jì)思考和優(yōu)化。今天的文章要說(shuō)的就是移動(dòng)端內(nèi)容時(shí)代,7個(gè)用戶體驗(yàn)關(guān)鍵點(diǎn)!這幾種技巧會(huì)幫助更好的過(guò)度移動(dòng)端內(nèi)容時(shí)代。
1、每屏完成一項(xiàng)任務(wù)
雖然手機(jī)的屏幕越來(lái)越大,但是當(dāng)你的內(nèi)容在移動(dòng)端設(shè)備上呈現(xiàn)的時(shí)候,依然要保證每屏只執(zhí)行一個(gè)特定的任務(wù),不要堆積太多的、跨流程的內(nèi)容。
雖然在移動(dòng)端設(shè)備上,用戶已經(jīng)習(xí)慣了執(zhí)行多任務(wù),看著球賽聊著天,這樣的案例不勝枚舉。用戶的習(xí)慣和多樣的應(yīng)用場(chǎng)景使得移動(dòng)端界面必須保持內(nèi)容和界面與內(nèi)容的簡(jiǎn)單直觀,這樣用戶在繁復(fù)的操作中,不至于迷失或者感到混亂。
怎樣保證這種清晰的體驗(yàn)?zāi)兀克械奈谋尽⒉瀹?huà)、視頻、UI元素都集中幫助用戶執(zhí)行特定的任務(wù),搭配在一起讓用戶作出抉擇:你想執(zhí)行這個(gè)操作嗎?
2、精簡(jiǎn)并優(yōu)化導(dǎo)航體系
當(dāng)用戶打開(kāi)你的網(wǎng)站或者APP的時(shí)候,他們通常傾向于執(zhí)行特定的操作,訪問(wèn)特定的頁(yè)面,或者你希望他們點(diǎn)擊特定的按鈕,所有的這些操作能否實(shí)現(xiàn),大多是要基于導(dǎo)航模式的設(shè)計(jì)。
雖然在桌面端網(wǎng)頁(yè)上,一個(gè)可用性較強(qiáng)的導(dǎo)航能夠承載多個(gè)層級(jí)、十幾個(gè)甚至20多個(gè)不同的導(dǎo)航條目,但是在移動(dòng)端上,屏幕限制和時(shí)間限制往往讓用戶來(lái)不及也不愿意去瀏覽那么多類目。
導(dǎo)航需要精簡(jiǎn)優(yōu)化。如果你不確定從什么地方開(kāi)始,那么你應(yīng)該針對(duì)你的移動(dòng)端版本進(jìn)行用戶分析。了解你的用戶群體需要什么?當(dāng)你清楚的了解你的客戶,那么你的導(dǎo)航關(guān)鍵元素就能夠確定,并有針對(duì)性的優(yōu)化和調(diào)整。
3、基于搜索引擎的設(shè)計(jì)模式
“不要總是玩弄算法,創(chuàng)造用戶想看的內(nèi)容才是正途。”。
無(wú)論你的網(wǎng)站的PV是100還是10萬(wàn),你都得盡量讓你的移動(dòng)端上的內(nèi)容更易于被搜索到。無(wú)論是關(guān)鍵詞、圖片還是內(nèi)容都應(yīng)該能夠被優(yōu)化到易于被搜索引擎抓取到。但是最關(guān)鍵的地方并不在算法,而是要?jiǎng)?chuàng)建用戶想要獲取的優(yōu)質(zhì)內(nèi)容。
從桌面端遷移到移動(dòng)端,內(nèi)容的形態(tài)也需要跟隨著平臺(tái)的變化而進(jìn)行適當(dāng)?shù)膬?yōu)化和修改。比如大量的大尺寸的圖片需要跟著移動(dòng)端的需求而進(jìn)行優(yōu)化,比如選擇尺寸更合理的圖片,放棄不匹配移動(dòng)端需求的JS動(dòng)效等。
4、更大的字體
在小屏幕上顯示的內(nèi)容,應(yīng)該適當(dāng)?shù)卦黾哟笮。層脩裟軌蚋p松地閱讀和消化。通常,在移動(dòng)端上,每行容納的英文字符的尺寸在30~40個(gè)最為合理,而這個(gè)數(shù)量基本上是桌面端的一半左右。
在移動(dòng)端上排版設(shè)計(jì)要注意的東西還有很多,但是總體上,讓字體適當(dāng)?shù)脑龃笠恍茏屨w的閱讀體驗(yàn)有所提升。
5、意義清晰的微文案
微文案在界面中幾乎無(wú)處不在,比如按鈕中的文本,它們對(duì)于整體的體驗(yàn)有著不小的影響。設(shè)計(jì)優(yōu)秀的微文案能夠讓整個(gè)界面的個(gè)性、設(shè)計(jì)感有明顯提升,它們是信息呈現(xiàn)的重要途徑,將設(shè)計(jì)轉(zhuǎn)化微可供理解的內(nèi)容。
在移動(dòng)端設(shè)計(jì)上,微文案的顯示要足夠清晰,并且始終是圍繞著幫助用戶要做什么,來(lái)打磨其中的表述方式。
在移動(dòng)端上支付是非常常見(jiàn)的使用場(chǎng)景,而支付時(shí)常受到各種問(wèn)題的影響,比如橫跨多屏的表單,這個(gè)時(shí)候,引導(dǎo)性較強(qiáng)的微文案能夠更好的幫助用戶一次填寫(xiě)好正確的內(nèi)容。
6、移除不必要的特效
PC端上的旋轉(zhuǎn)動(dòng)效和視差滾動(dòng)會(huì)讓網(wǎng)頁(yè)看起來(lái)非常不錯(cuò),但是在移動(dòng)端上,情況則完全不同。內(nèi)容在遷移到移動(dòng)端的網(wǎng)頁(yè)和APP上的時(shí)候,效率和可用性始終是第一需求。快速無(wú)縫的加載和即點(diǎn)即用的交互是用戶的首要需求,剝離花哨和無(wú)用的動(dòng)效,會(huì)讓用戶感覺(jué)更好。
另外,懸停動(dòng)效也要去掉。移動(dòng)端上手指觸摸是主要的交互手段,懸停動(dòng)效是毫無(wú)意義的存在。作為設(shè)計(jì)師,你需要圍繞著點(diǎn)擊和滑動(dòng)這兩種交互來(lái)構(gòu)建移動(dòng)端體驗(yàn),因?yàn)橹挥兴鼈儾拍芙o用戶正確的反饋。
7、尺寸適配
在移動(dòng)端設(shè)備上打開(kāi)一個(gè)網(wǎng)頁(yè),結(jié)果加載的是桌面端的版本,僅僅只是尺寸縮小了,沒(méi)有什么比這個(gè)更令人尷尬的了。移動(dòng)端的網(wǎng)頁(yè)和APP應(yīng)該讓用戶更易于訪問(wèn),對(duì)于整體尺寸和排版布局的設(shè)計(jì),應(yīng)該更有針對(duì)性。
有的時(shí)候,這種內(nèi)容的適配只需要針對(duì)部分內(nèi)容,重新排布:
1.在桌面端橫向排布的控件,可以垂直排列在移動(dòng)端頁(yè)面上。
2.考慮到移動(dòng)端設(shè)備上用戶的瀏覽方式,圖片最好被切割為方形,或者和手機(jī)屏幕比例相近的形狀。
3.文本和微文案應(yīng)該設(shè)計(jì)的更加簡(jiǎn)明直觀。
4.導(dǎo)航可以不用沿用桌面端的導(dǎo)航模式,可以采用側(cè)邊欄或者底部導(dǎo)航等更適合移動(dòng)端的方式。
5.行為召喚元素可以做的更大,甚至擴(kuò)展到整屏。
6.所有的按鈕或者可點(diǎn)擊的元素都按照用戶的手持方式,放到手指最易于觸發(fā)的位置。
當(dāng)你準(zhǔn)備將內(nèi)容從pc端遷移到移動(dòng)端時(shí),一定要在設(shè)計(jì)過(guò)程中,對(duì)信息和數(shù)據(jù)分析。了解用戶所需要的東西,在將你的內(nèi)容細(xì)節(jié)、交互模式進(jìn)行深入調(diào)整,才能做出真正用戶所需要的設(shè)計(jì)。
我們擁有國(guó)內(nèi)頂級(jí)的設(shè)計(jì)、技術(shù)團(tuán)隊(duì)和多年互聯(lián)網(wǎng)軟件開(kāi)發(fā)經(jīng)驗(yàn)。