成都小程序設(shè)計(jì)使用移動(dòng)優(yōu)先的開(kāi)發(fā)過(guò)程開(kāi)發(fā)。這種設(shè)計(jì)和開(kāi)發(fā)網(wǎng)站的方法將移動(dòng)設(shè)備用戶的需求放在首位。然而,盡管使用移動(dòng)設(shè)備的人數(shù)不斷增加,但一些網(wǎng)站仍然無(wú)法在移動(dòng)設(shè)備上提供優(yōu)質(zhì)的用戶體驗(yàn)。當(dāng)然,移動(dòng)友好型網(wǎng)頁(yè)設(shè)計(jì)比將桌面版本壓縮到小屏幕上要多得多。使站點(diǎn)具有響應(yīng)性只能部分滿足移動(dòng)用戶的需求。必須將一些基本的設(shè)計(jì)功能整合到真正適合移動(dòng)設(shè)備的網(wǎng)站中。以下是為移動(dòng)設(shè)備設(shè)計(jì)響應(yīng)式網(wǎng)站時(shí)需要考慮的關(guān)鍵點(diǎn)。
字體大小必須足夠大,以便人們?cè)谂_(tái)式機(jī)和移動(dòng)設(shè)備上都能輕松閱讀。14 像素的字體大小通常最適合桌面用戶。然而,即使是 14 像素的字體也可能難以在小的移動(dòng)設(shè)備屏幕上閱讀。因此,對(duì)于移動(dòng)設(shè)備,您可能需要將字體大小增加到 16 像素或更大。
字體必須是品牌上的。但是,最好選擇在小屏幕上清晰易讀的響應(yīng)式字體。實(shí)驗(yàn)字體可能在桌面的大屏幕上可讀。但是,當(dāng)縮小尺寸以適應(yīng)移動(dòng)屏幕時(shí),某些字體幾乎變得不可讀。因此,最好在各種設(shè)備上測(cè)試字體,以確保無(wú)論屏幕大小如何,一切看起來(lái)都正確。并且不要忘記檢查粗體或斜體時(shí)字體的外觀。
您可能認(rèn)為用戶會(huì)水平拿著手機(jī)來(lái)查看網(wǎng)站。然而,調(diào)查發(fā)現(xiàn)事實(shí)并非如此。事實(shí)上,據(jù)估計(jì)高達(dá) 90% 的人豎著拿手機(jī)。他們不會(huì)切換到以橫向模式查看網(wǎng)站,即使該網(wǎng)站使用起來(lái)很棘手。因此,最好在橫向和縱向模式下測(cè)試易用性。
對(duì)于某些人來(lái)說(shuō),在手機(jī)上打字并不容易。因此,避免要求輸入太多需要輸入的信息。記住,有些人手指粗,手機(jī)小!您可以使用下拉菜單來(lái)減少打字的需要。最好避免向用戶詢問(wèn)不必要的或長(zhǎng)篇大論的信息。
如上所述,較大的字體在移動(dòng)設(shè)備上更易讀。但是,您可以過(guò)大,尤其是標(biāo)題。如果標(biāo)題的字體太大,您可能會(huì)發(fā)現(xiàn)只有一兩個(gè)詞適合移動(dòng)屏幕的寬度。如果是這樣,標(biāo)題可能會(huì)占據(jù)大部分屏幕。過(guò)長(zhǎng)的標(biāo)題也可能造成同樣的問(wèn)題。
在移動(dòng)設(shè)備上打字并不是唯一具有挑戰(zhàn)性的事情。嘗試點(diǎn)擊靠得太近的可點(diǎn)擊元素也會(huì)令人沮喪。因此,盡量避免將超鏈接和按鈕放在一起。
當(dāng)字體在移動(dòng)設(shè)備上縮小時(shí),閱讀起來(lái)就更難了。因此,當(dāng)在移動(dòng)設(shè)備上查看網(wǎng)站時(shí),文本和背景之間的對(duì)比更為重要。例如,白色背景上的灰色字體可能在較大的桌面屏幕上可讀。但是,當(dāng)為較小的移動(dòng)屏幕縮小時(shí),對(duì)比度可能不足以使文本清晰可辨。
空格仍然很重要
移動(dòng)設(shè)備顯示文本的空間有限。即便如此,最好不要用不間斷的文本塊填滿整個(gè)屏幕。事實(shí)上,應(yīng)該使用空格來(lái)分隔文本,就像在網(wǎng)站的桌面版本上一樣。但是,移動(dòng)設(shè)備上的空間會(huì)成比例地變小。空白還有助于解決在移動(dòng)設(shè)備上選擇可點(diǎn)擊對(duì)象的一些困難。
在移動(dòng)設(shè)備的小空間內(nèi)獲取關(guān)鍵信息至關(guān)重要。因此,通常最好剝離內(nèi)容并將重要信息放在首屏。如果用戶可以看到首屏下方有更多內(nèi)容可讀,這也會(huì)有所幫助。例如,在屏幕底部顯示部分標(biāo)題會(huì)鼓勵(lì)人們向下滾動(dòng)。
用鼠標(biāo)輕松點(diǎn)擊的按鈕可能很難用手指按下。因此,在設(shè)計(jì)適合移動(dòng)設(shè)備的網(wǎng)站時(shí),請(qǐng)同時(shí)考慮按鈕的位置和大小。
當(dāng)人們使用移動(dòng)設(shè)備時(shí),他們傾向于用拇指點(diǎn)擊按鈕。因此,將按鈕放置在不需要人們移動(dòng)手部位置即可按下的位置。按鈕通常還需要在移動(dòng)屏幕上更加突出。如果可點(diǎn)擊控件太小或靠得太近,選擇正確的選項(xiàng)可能會(huì)很棘手。
如前所述,在移動(dòng)設(shè)備上準(zhǔn)確打字可能具有挑戰(zhàn)性。因此,人們經(jīng)常在鍵入時(shí)鍵入并快速更正錯(cuò)誤。但是自動(dòng)更正可能會(huì)替換整個(gè)拼寫(xiě)錯(cuò)誤的單詞,從而使更正更耗時(shí)。自動(dòng)更正通常會(huì)將地址等內(nèi)容替換為更常見(jiàn)的術(shù)語(yǔ),從而導(dǎo)致需要進(jìn)行更多更正。因此,通常最好在網(wǎng)站的移動(dòng)版本上禁用自動(dòng)更正功能。
彈出窗口在桌面網(wǎng)站上非常有效。彈出窗口相對(duì)簡(jiǎn)單,可以用鼠標(biāo)關(guān)閉。但是,在移動(dòng)設(shè)備上,彈出窗口可能會(huì)占據(jù)整個(gè)屏幕。找到關(guān)閉選項(xiàng)可能具有挑戰(zhàn)性。因此,最好在網(wǎng)站的移動(dòng)版本上消除彈出窗口。
人們通常在旅途中使用移動(dòng)設(shè)備。因此,頁(yè)面加載速度比桌面加載速度更為重要。您可以采取任何措施來(lái)減少頁(yè)面加載時(shí)間,從而改善移動(dòng)設(shè)備上的用戶體驗(yàn)。降低頁(yè)面加載速度的方法之一是壓縮 CSS(層疊樣式表)代碼和高分辨率圖像。壓縮圖像和CSS可以加快它們的加載速度,但不會(huì)對(duì)功能或質(zhì)量產(chǎn)生負(fù)面影響。
移動(dòng)友好性不再是一個(gè)不錯(cuò)的選擇;它必須從一開(kāi)始就集成到網(wǎng)站的設(shè)計(jì)中。這意味著要做的不僅僅是縮放站點(diǎn)以適應(yīng)較小的屏幕。它還意味著要考慮內(nèi)容的布局、鏈接和按鈕的位置以及排版。
未能融入基本移動(dòng)設(shè)計(jì)原則的網(wǎng)站將失去不斷增長(zhǎng)的移動(dòng)流量。但成都小程序設(shè)計(jì)希望以上提示能幫助您設(shè)計(jì)出對(duì)移動(dòng)設(shè)備用戶和桌面用戶一樣易于使用的網(wǎng)站。