一個偉大設計的開始始于内容。為(wèi)充分(fēn)利用(yòng)恒星移動用(yòng)戶體(tǐ)驗,内容可(kě)能(néng)需要經過一些調整和更改。
但你從哪兒開始呢(ne)?應如何調整内容以在移動設備上無縫工(gōng)作(zuò)?它首先考慮用(yòng)戶與較小(xiǎo)屏幕交互的方式,以及它們如何影響他(tā)們想要閱讀的内容(以及内容)。
1.每屏幕一個想法
在為(wèi)移動設備折疊内容時,嘗試對各個元素進行規劃,以便每個屏幕都有(yǒu)一個元素。即使手機似乎再次趨于更大尺寸,也不要試圖在屏幕上塞滿大量信息!
每個屏幕一個想法就夠了。任何更多(duō),你冒着壓倒用(yòng)戶的風險。
移動設備用(yòng)戶傾向于多(duō)任務(wù)。在參加棒球比賽時,他(tā)們在與朋友交談時正在看你的網站。通過保持簡單和直接的信息和内容,您有(yǒu)更好的機會讓單個想法得到溝通。
但是,一個人的想法是什麽樣子?這是一個文(wén)本,圖像和可(kě)操作(zuò)的元素塊都捆綁在一起。内容組應該要求用(yòng)戶做出一個選擇:你想這樣做嗎?
2.優先導航
在訪問您的網站的移動(響應)版本時,應該有(yǒu)一些用(yòng)戶傾向于做的事情,或者您希望他(tā)們做的事情。确保有(yǒu)易于遵循的導航功能(néng),可(kě)以讓用(yòng)戶快速訪問這些元素。
雖然一個包含多(duō)個級别的十個導航選項菜單可(kě)能(néng)會在您的桌面網站上運行,但移動用(yòng)戶通常會有(yǒu)更多(duō)的時間緊迫。他(tā)們無意在網站周圍徘徊,直到他(tā)們發現某些東西。
導航需要簡單和精(jīng)簡。如果您不确定從哪裏開始,請查看您的移動用(yòng)戶分(fēn)析。訪問的前三四頁(yè)是什麽?這些頁(yè)面是否符合你的期望?您找到了關鍵的導航元素,因此您可(kě)以相應地調整移動内容。
3.像一個搜索引擎一樣思考
不要玩這個算法。創建用(yòng)戶想要閱讀的高質(zhì)量内容。
無論您每天獲得10次綜合浏覽量,還是數百萬次浏覽量,當涉及到移動設備上的内容時,您都希望像搜索引擎一樣思考。每一個字,圖像和内容都需要快速搜索。但不要玩這個算法。創建用(yòng)戶想要閱讀的高質(zhì)量内容。
當談到移動時,這可(kě)能(néng)意味着削減一些内容元素。例如,選擇一張最重要的照片,而不是在主頁(yè)上顯示三張圖像。不要輕視你的手機網站; 網速和Wi-Fi一直在變得越來越好,但一些用(yòng)戶會與連接發生沖突,并且您的網站仍然需要訪問。
您可(kě)以使用(yòng)Google提供的這款漂亮工(gōng)具(jù)來檢查移動網頁(yè)的速度,這可(kě)以幫助您保持一切優化。
4.使文(wén)字更大
較小(xiǎo)的屏幕不應該意味着較小(xiǎo)的文(wén)字。實際上,您應該增加磅值以使内容更易于閱讀和消化。看看你的身體(tǐ)副本,并選擇一個允許每行30到40個字符的大小(xiǎo)。(這是桌面屏幕推薦的一半左右)。
還有(yǒu)其他(tā)一些技(jì )巧可(kě)以使文(wén)本在小(xiǎo)屏幕上更具(jù)可(kě)讀性。您可(kě)以在以前的Design Shack文(wén)章中(zhōng)找到有(yǒu)關設計更好的移動排版技(jì )巧的文(wén)章。
5.寫有(yǒu)意義的顯微鏡
偉大的顯微鏡 - 按鈕等元素内的文(wén)字 - 可(kě)以制作(zuò)或破壞設計。微鏡可(kě)以為(wèi)設計增添個性和火花(huā)。它還傳達大量信息,并幫助用(yòng)戶找到解決方案。
尤其是在移動設備上,請考慮使顯微鏡比正常情況稍微大一些,并始終以形式使用(yòng)它,以幫助用(yòng)戶确切地知道該做什麽。
例如,考慮在為(wèi)手機付款時遇到的常見問題。表單可(kě)以跨越多(duō)個屏幕或卷軸; 引導顯微鏡可(kě)以使第一次正确填充所有(yǒu)内容變得更容易。(從移動用(yòng)戶轉換操作(zuò)的關鍵組件。)
6.删除移動設備的不必要的影響
删除您不需要的任何移動設計。
在桌面網站上旋轉動畫和視差滾動功能(néng)看起來很(hěn)棒,但可(kě)能(néng)會讓手機版本停滞不前。删除您不需要的任何移動設計。你希望一切都能(néng)快速無縫地加載; 動畫可(kě)能(néng)會或可(kě)能(néng)不會影響與用(yòng)戶立即連接的方式。
你可(kě)以去掉另一個效果?懸停效果。觸摸動作(zuò)沒有(yǒu)懸浮狀态。
通過簡單易懂的點擊功能(néng)簡化了移動用(yòng)戶體(tǐ)驗(取代點擊),這些功能(néng)具(jù)有(yǒu)明顯的反饋意義。您不希望用(yòng)戶質(zhì)疑是否有(yǒu)行動發生; 它應該永遠(yuǎn)是顯而易見的。
7.适應規模
沒有(yǒu)什麽比在一切都很(hěn)微小(xiǎo)的移動響應網站上登陸更令人沮喪。有(yǒu)一個移動設計的目的是為(wèi)了讓用(yòng)戶在更小(xiǎo)的設備上更容易訪問網站。你必須調整内容的規模。
有(yǒu)時适應内容隻是部分(fēn)的重新(xīn)安(ān)排。
在桌面上排列在屏幕上的盒子可(kě)能(néng)會垂直堆疊在移動設備上。
根據移動使用(yòng)的主導方向(垂直),照片會更方形或垂直裁剪。
為(wèi)簡潔起見,文(wén)本被編輯和修剪。
導航被重新(xīn)調整并放置在不同的位置。
行動呼籲被制作(zuò)成更大的幾乎屏幕尺寸的元素。
所有(yǒu)按鈕和龍頭元素都放置在易于到達的位置,這取決于用(yòng)戶握住手機的方式。
結論
你準備好重新(xīn)考慮你網站上的一些内容嗎?如果你建立了一個響應式網站,并且假設所有(yǒu)的東西都會轉換移動用(yòng)戶,那麽現在是時候評估移動設計的一部分(fēn)了。有(yǒu)可(kě)能(néng)會有(yǒu)小(xiǎo)的内容變化的空間,真正改變用(yòng)戶與設計交互的方式。
這是設計過程的重要組成部分(fēn)。看看你的分(fēn)析。您的用(yòng)戶群中(zhōng)有(yǒu)多(duō)少百分(fēn)比訪問移動設備上的設計?如果您沒有(yǒu)根據自己的需求進行調整,那麽您可(kě)能(néng)會疏遠(yuǎn)您的大部分(fēn)用(yòng)戶群,無意冒犯他(tā)們。
----圖文(wén)來自:網絡
----由廣州網站開發公(gōng)司-飛步科(kē)技(jì )編輯整理(lǐ),為(wèi)您提供更多(duō)有(yǒu)關廣州網站開發、網站設計、小(xiǎo)程序開發、APP開發及其他(tā)互聯網應用(yòng)服務(wù)