掌握這7項(xiàng)原則讓移動(dòng)網(wǎng)站設(shè)計(jì)更出眾

  1. 創(chuàng)建一個(gè)堅(jiān)實(shí)的信息層次結(jié)構(gòu)
  移動(dòng)用戶(hù)有非常明確的目標(biāo)導(dǎo)向。當(dāng)他們?cè)L問(wèn)一個(gè)網(wǎng)站時(shí)，他們希望盡快找到他們需要的東西。人們很少逐字閱讀網(wǎng)頁(yè)，而是瀏覽網(wǎng)頁(yè)。這就是為什么良好的可掃描性是移動(dòng)網(wǎng)站設(shè)計(jì)的基本屬性。訪(fǎng)問(wèn)者應(yīng)該可以輕松快速地在你的網(wǎng)站上找到他們正在尋找的信息。
  2. 使用簡(jiǎn)單的頁(yè)面布局
  用戶(hù)注意力是一種寶貴的資源，應(yīng)該相應(yīng)地分配。當(dāng)你設(shè)計(jì)移動(dòng)布局時(shí)，你需要優(yōu)先考慮簡(jiǎn)單性，因?yàn)楹?jiǎn)單的布局在小屏幕上效果更好。以下是實(shí)現(xiàn)這一目標(biāo)的方法：
  堅(jiān)持一欄布局。當(dāng)你優(yōu)化桌面網(wǎng)頁(yè)設(shè)計(jì)時(shí)，你通常依靠多欄網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)格來(lái)構(gòu)建信息。但是對(duì)于移動(dòng)設(shè)備，堅(jiān)持使用一欄布局要好得多，因?yàn)槎鄼跁?huì)引入更多噪音并使用戶(hù)更難理解信息。
  不要使用水平滾動(dòng)。水平滾動(dòng)不僅會(huì)造成糟糕的用戶(hù)體驗(yàn)（因?yàn)樗綕L動(dòng)并不直觀(guān)），而且還未能通過(guò) Google 移動(dòng)友好測(cè)試。
  整理布局。移動(dòng)用戶(hù)不應(yīng)該一次被大量信息淹沒(méi)，因?yàn)檫@可能會(huì)造成混亂并難以找到他們需要的信息。遵循簡(jiǎn)約的方法來(lái)創(chuàng)建干凈的布局——使用簡(jiǎn)潔的副本并擺脫純粹的裝飾元素，這樣你的用戶(hù)就可以享受干凈且高度集中的移動(dòng)體驗(yàn)。請(qǐng)記住，你使用的每個(gè)文本或圖像都應(yīng)該為訪(fǎng)問(wèn)者帶來(lái)價(jià)值。
  3.使文本可讀并使用大觸摸目標(biāo)
  可讀性，或讀者理解書(shū)面文本的難易程度，是網(wǎng)頁(yè)設(shè)計(jì)的基本屬性，因?yàn)楹芏嘈畔⒍际峭ㄟ^(guò)文本或副本傳達(dá)的。以下是在設(shè)計(jì)時(shí)考慮到良好的可讀性時(shí)需要考慮的屬性：
  字體。選擇一種可以很好地縮放并且在任何屏幕尺寸上看起來(lái)都很棒的字體。Helvetica(中文選擇非襯線(xiàn)體)和Roboto是不錯(cuò)的選擇。
  字體大小。16 像素是移動(dòng)字體大小的一個(gè)很好的默認(rèn)值。
  顏色對(duì)比。爭(zhēng)取達(dá)到WCAG 2.0 AA 級(jí)，讓讀者可以訪(fǎng)問(wèn)文本。
  小觸摸目標(biāo)是移動(dòng)用戶(hù)的另一個(gè)問(wèn)題。在移動(dòng)設(shè)備上，用戶(hù)用手指點(diǎn)擊屏幕上的項(xiàng)目，但較小的觸摸目標(biāo)會(huì)增加用戶(hù)擊中錯(cuò)誤對(duì)象的機(jī)會(huì)。手指友好的大按鈕將使最終用戶(hù)與你的網(wǎng)站的交互更加舒適。觸摸屏對(duì)象的推薦目標(biāo)尺寸為 7-10mm。
  4. 盡量減少用戶(hù)輸入數(shù)據(jù)的工作量
  填寫(xiě)表單并不是 Web 體驗(yàn)中最令人興奮的部分，但設(shè)計(jì)高效的表單至關(guān)重要，這樣你的訪(fǎng)問(wèn)者就不必花費(fèi)太多時(shí)間輸入數(shù)據(jù)。設(shè)計(jì)表單時(shí)需要考慮以下幾點(diǎn)：
  詢(xún)問(wèn)最低限度的信息。通過(guò)僅詢(xún)問(wèn)基本信息，你可以最大限度地減少用戶(hù)填寫(xiě)表單時(shí)的工作量。
  為送貨或帳單地址等字段提供自動(dòng)填充功能。你可以根據(jù)用戶(hù)的 GEO 位置自動(dòng)填充用戶(hù)的地址。
  使用內(nèi)聯(lián)驗(yàn)證實(shí)時(shí)驗(yàn)證用戶(hù)輸入。用戶(hù)在輸入信息時(shí)會(huì)看到他們錯(cuò)誤地添加了信息，而不是在他們點(diǎn)擊“提交”按鈕時(shí)。
  5. 優(yōu)化頁(yè)面速度的設(shè)計(jì)
  用戶(hù)在交互設(shè)計(jì)中關(guān)心速度。網(wǎng)站加載內(nèi)容所需的時(shí)間越長(zhǎng)，用戶(hù)放棄它的可能性就越大。因此，建議測(cè)量性能并刪除任何會(huì)增加加載時(shí)間的對(duì)象。高分辨率圖像、視頻和精美動(dòng)畫(huà)都會(huì)影響頁(yè)面加載時(shí)間。
  6. 移動(dòng)端和桌面端的視覺(jué)和功能一致性
  許多數(shù)字產(chǎn)品可作為移動(dòng)應(yīng)用程序和網(wǎng)站使用。如果你的產(chǎn)品在兩者上都運(yùn)行，則需要使應(yīng)用程序和網(wǎng)站的移動(dòng)用戶(hù)界面保持一致。理想情況下，移動(dòng)網(wǎng)絡(luò)體驗(yàn)應(yīng)該與你的移動(dòng)應(yīng)用程序沒(méi)有區(qū)別，因?yàn)樗试S用戶(hù)在應(yīng)用程序和網(wǎng)站之間自由切換。
  7. 允許用戶(hù)在另一臺(tái)設(shè)備上完成他們的旅程
  訪(fǎng)問(wèn)者在移動(dòng)設(shè)備上開(kāi)始任務(wù)但在桌面上完成它是很常見(jiàn)的。一個(gè)例子是從電子商務(wù)商店購(gòu)買(mǎi)產(chǎn)品。訪(fǎng)問(wèn)者喜歡在移動(dòng)設(shè)備上瀏覽，但在填寫(xiě)表格時(shí)，他們希望切換到桌面，因?yàn)樗奖?。提供“共享”功能，以便訪(fǎng)問(wèn)者可以通過(guò)電子郵件發(fā)送鏈接。
  始終與用戶(hù)一起驗(yàn)證你的設(shè)計(jì)。