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

網(wǎng)站名稱：掌握這7項(xiàng)原則讓移動(dòng)網(wǎng)站設(shè)計(jì)更出眾
當(dāng)前地址：http://www.rwnh.cn/news1/282401.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、品牌網(wǎng)站建設(shè)、外貿(mào)建站、面包屑導(dǎo)航、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)