內(nèi)容遷移到移動(dòng)端時(shí)，用戶體驗(yàn)優(yōu)化的7個(gè)關(guān)鍵點(diǎn)

好的設(shè)計(jì)往往需要好的內(nèi)容作為基礎(chǔ)支撐。無(wú)論是內(nèi)容還是設(shè)計(jì)，想要讓兩者最大化的搭配，往往是需要進(jìn)行調(diào)整和優(yōu)化才行。

當(dāng)你的內(nèi)容需要遷移到移動(dòng)端上的時(shí)候，要怎么讓內(nèi)容和用戶體驗(yàn)無(wú)縫地配合起來(lái)呢？設(shè)計(jì)師要基于小屏幕的交互來(lái)思考整個(gè)設(shè)計(jì)和優(yōu)化的策略，而今天的文章，就為你分享7個(gè)設(shè)計(jì)技巧。

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)行用戶分析。用戶訪問(wèn)得最多的前三四個(gè)類目是什么？這些頁(yè)面是否符合主要用戶群體的期望？你希望用戶更多點(diǎn)擊哪些內(nèi)容？當(dāng)你搞清楚整個(gè)導(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)有所提升。

這些實(shí)用的字體排版技巧值得看看：《對(duì)比這10個(gè)注意事項(xiàng)，你的網(wǎng)頁(yè)文字排版達(dá)標(biāo)了么？》

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)容。

微文案設(shè)計(jì)指南：《無(wú)聲處聽(tīng)驚雷！如何用微文案改善網(wǎng)站的用戶體驗(yàn)？》

6、移除不必要的特效

在桌面端網(wǎng)頁(yè)上，旋轉(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)容，重新排布。

·在桌面端橫向排布的控件，可以垂直排列在移動(dòng)端頁(yè)面上；
·考慮到移動(dòng)端設(shè)備上用戶的瀏覽方式，圖片最好被切割為方形，或者和手機(jī)屏幕比例相近的形狀；
·文本和微文案應(yīng)該設(shè)計(jì)的更加簡(jiǎn)明直觀
·導(dǎo)航可以不用沿用桌面端的導(dǎo)航模式，可以采用側(cè)邊欄或者底部導(dǎo)航等更適合移動(dòng)端的方式；
·行為召喚元素可以做的更大，甚至擴(kuò)展到整屏
·所有的按鈕或者可點(diǎn)擊的元素都按照用戶的手持方式，放到手指最易于觸發(fā)的位置

結(jié)語(yǔ)

你準(zhǔn)備好重新思考你的網(wǎng)站上內(nèi)容的正確呈現(xiàn)方式了嗎？當(dāng)你的內(nèi)容從桌面端遷移到移動(dòng)端的時(shí)候，響應(yīng)式的設(shè)計(jì)也許無(wú)法真正與之匹配，你需要對(duì)內(nèi)容細(xì)節(jié)、交互模式進(jìn)行深入的調(diào)整，作出和用戶需求真正匹配的設(shè)計(jì)。

設(shè)計(jì)過(guò)程中最重要的部分其實(shí)是你對(duì)于信息和數(shù)據(jù)的分析，你的用戶到底需要什么，他們想要的東西往往能夠從數(shù)據(jù)中洞悉到。

【用戶體驗(yàn)設(shè)計(jì)有哪些技巧】

1. 《科普好文！作為UX設(shè)計(jì)師你需要知道的52個(gè)專業(yè)術(shù)語(yǔ)》
2. 《想讓設(shè)計(jì)更走心？你得學(xué)會(huì)用共情來(lái)驅(qū)動(dòng)設(shè)計(jì)》
3. 《跨屏幕的響應(yīng)式設(shè)計(jì)，你需要這樣來(lái)設(shè)計(jì)用戶體驗(yàn)》
4. 《想轉(zhuǎn)型成為用戶體驗(yàn)設(shè)計(jì)師，只會(huì)畫(huà)圖遠(yuǎn)不夠》

原文地址：designshack
原文作者：CARRIE COUSINS
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com