更多(duō)人(rén)開始關注移動頁面的(de)數據而不是電腦(nǎo)端的(de),包括訪問率、轉化(huà)率、點擊率等等。而要實現這(zhè)些指标的(de)提升,努力方向之一就是頁面的(de)設計,讓手機網站頁面更加友好、體驗更佳。基于此,我們提供五個(gè)促進手機頁面友好的(de)設計技巧,供參考。
注重設計元素的(de)間距
間距設計元素不僅僅是爲了(le)創造一個(gè)良好的(de)視覺流, 它能夠使網站易于使用(yòng)的(de)所有訪客。
一個(gè)常見的(de)移動可(kě)用(yòng)性錯誤是“可(kě)點擊元素靠得(de)太近”。這(zhè)給使用(yòng)小型設備的(de)訪問者帶來(lái)了(le)一種令人(rén)沮喪的(de)體驗,因爲他(tā)們在試圖浏覽網站時(shí),可(kě)能會無意中點擊了(le)一些元素。從手機用(yòng)戶體驗設計的(de)角度來(lái)看,按鈕和(hé)互動或可(kě)點擊元素需要足夠大(dà),并在設計中放置得(de)足夠遠(yuǎn)。
因此,需要在按鈕和(hé)元素之間設計足夠的(de)空間,這(zhè)樣訪問者才不會有令人(rén)沮喪的(de)移動體驗。
還(hái)需要考慮可(kě)訪問性,以及訪問者可(kě)能如何使用(yòng)較小的(de)設備。無論如何,網站設計需要易于導航。最後,用(yòng)戶也(yě)會用(yòng)他(tā)們的(de)拇指在設備上滾動浏覽網頁,所以需要确保沒有大(dà)的(de)可(kě)點擊元素,以免用(yòng)戶在滾動時(shí)不小心點擊。
确保文字和(hé)字體的(de)可(kě)讀性
除了(le)間距之外,另一個(gè)常見的(de)移動可(kě)用(yòng)性錯誤是“文本太小,無法閱讀”。
選擇一個(gè)容易辨認的(de)字體是開始的(de)第一步。用(yòng)戶在使用(yòng)小型設備時(shí),經常是在行走、多(duō)任務或戶外,他(tā)們可(kě)能在試圖浏覽您的(de)網站時(shí)處于非理(lǐ)想的(de)情況。
根據字體大(dà)小創建視覺層次結構是幫助這(zhè)些移動用(yòng)戶快(kuài)速浏覽和(hé)理(lǐ)解頁面内容的(de)另一種方法。它也(yě)有助于移動或平闆設備,因爲标題文本可(kě)能轉到下(xià)一行。 在整個(gè)頁面中使用(yòng)相同的(de)字體和(hé)大(dà)小會導緻頁面含義的(de)混亂。可(kě)以增加文本行之間的(de)行高(gāo),以提高(gāo)頁面的(de)可(kě)讀性。一旦決定了(le)字體和(hé)大(dà)小,還(hái)需要考慮顔色的(de)對(duì)比度。
由于訪客可(kě)能在室内、室外或光(guāng)線差的(de)環境中,遵循背景和(hé)前景色的(de)對(duì)比标準是很重要的(de)。
确保懸停和(hé)動畫(huà)最佳呈現
大(dà)多(duō)數網頁設計都包含了(le)一些微型動畫(huà)和(hé)互動組件; 這(zhè)是客戶在重新設計過程中常見的(de)要求。添加移動到站點通(tōng)常是設計師和(hé)開發人(rén)員(yuán)之間的(de)合作,因爲動畫(huà)會影(yǐng)響頁面加載時(shí)間,如果編碼不好,會導緻無休止的(de)質量控制。 在設計過程中選擇動畫(huà)時(shí),你還(hái)需要計劃這(zhè)些交互是否會發生在移動設備上。
由于性能問題,用(yòng)戶通(tōng)常會關閉手機上複雜(zá)的(de)動畫(huà)和(hé)視頻(pín)背景,因爲它們會降低網站的(de)加載時(shí)間,尤其是對(duì)移動網絡的(de)訪問者。一般來(lái)說,動畫(huà)和(hé)交互應該以微妙的(de)方式來(lái)支持用(yòng)戶體驗,而不應該分(fēn)散訪問者的(de)注意力。 它也(yě)不應該是幫助訪問者完成一個(gè)行動的(de)必要成分(fēn)。
懸停是另一個(gè)常見的(de)設計元素,在移動設備上看起來(lái)可(kě)能有所不同。 在桌面上,懸停是指當訪問者将鼠标懸停在一個(gè)對(duì)象或圖像上時(shí),該對(duì)象或圖像會改變或顯示文本。
規劃彈出窗(chuāng)口和(hé)第三方元素
在移動設備上避免彈出式表單的(de)一個(gè)理(lǐ)由是,訪問者關閉表單或消息會更加困難。可(kě)以在與客戶討(tǎo)論彈出式表單時(shí)權衡所有這(zhè)些元素,并确定表單設計的(de)最佳用(yòng)戶體驗。當我們采取一種基于移動設備的(de)設計方法時(shí),我們需要考慮如何将元素放置在較小的(de)設備上。
實時(shí)聊天已經成爲一種非常流行的(de)工具,聊天工具經常出現在設計的(de)右下(xià)角或左下(xià)角。
重新考慮表單設計和(hé)布局
在移動設備或更小的(de)平闆電腦(nǎo)上填寫和(hé)提交表單對(duì)訪問者來(lái)說可(kě)能是一項煩人(rén)的(de)任務。這(zhè)就是爲什(shén)麽在網站設計中考慮表單的(de)替代選擇是至關重要的(de)。
當創建移動菜單導航時(shí),考慮在标題中包含一個(gè)“點擊呼叫”電話(huà)号碼,這(zhè)樣訪問者就可(kě)以很容易地聯系到企業。在設計站點上的(de)所有表單時(shí),桌面和(hé)移動端都應該盡可(kě)能減少表單字段的(de)數量,并清楚地指明(míng)哪些字段是必需的(de)。 提高(gāo)表單移動體驗的(de)一個(gè)技巧是設計表單标簽,而不是僅僅在表單字段中使用(yòng)占位符文本。移動設備上的(de)訪問者很容易被其他(tā)通(tōng)知和(hé)交互打斷,因此他(tā)們可(kě)能在表單完成過程中被打斷,忘記了(le)占位符所列的(de)内容。
考慮到人(rén)們越來(lái)越關注手機性能,在設計項目時(shí)将上述一些想法付諸實踐将節省你的(de)時(shí)間,并在項目啓動時(shí)減少挫敗感。