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

2023-09-10    分類: 網(wǎng)站建設(shè)

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

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

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供營銷型網(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)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都app開發(fā)公司