網(wǎng)站設(shè)計(jì)規(guī)范詳解

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

網(wǎng)站不同于移動(dòng)應(yīng)用:

屏幕適配(屏幕尺寸、分辨率)。

交互方式不同,鼠標(biāo)相對(duì)手指具備更精準(zhǔn)的點(diǎn)擊范圍,有更多的控件狀態(tài)。

在設(shè)計(jì)網(wǎng)站原型時(shí),并沒(méi)有具體的控件大小和條欄規(guī)范,需要注意相關(guān)設(shè)計(jì)規(guī)范。

PC導(dǎo)航:面包屑,非線性。APP導(dǎo)航:線性。

設(shè)計(jì)尺寸:

電腦分辨率主要是1920*1080,版心為960-1200(默認(rèn)安全區(qū)1200即可)。

設(shè)計(jì)板塊

注意事項(xiàng):

簡(jiǎn)單:每個(gè)網(wǎng)站都應(yīng)該有盡可能簡(jiǎn)單的結(jié)構(gòu)。


清晰:導(dǎo)航的每項(xiàng)對(duì)用戶而言,都應(yīng)該是清楚的。用戶最少的點(diǎn)擊,最快地到達(dá)目的網(wǎng)頁(yè)。


一致:系統(tǒng)的導(dǎo)航頁(yè)在每一頁(yè)中都應(yīng)該是相同的。


控件:同級(jí)別的控件應(yīng)該做的一樣,如果不是按鈕的就不要做成按鈕的樣式,不要做太多讓用戶誤操作的東西,可點(diǎn)擊的要有點(diǎn)擊后的效果。


網(wǎng)站中文建議使用 微軟雅黑 字體,英文則建議使用 Arial 字體。iOS系統(tǒng)用 蘋(píng)方字體。安卓用 思源黑體。


12px是網(wǎng)頁(yè)設(shè)計(jì)的最小字號(hào),適用于突出性的日期,版權(quán)等注釋性內(nèi)容。14px則適用于非突出性的普通正文內(nèi)容。16px或18px適用于突出性的標(biāo)題內(nèi)容。網(wǎng)站的字體大小沒(méi)有硬性規(guī)定,根據(jù)實(shí)際情況可以酌情考慮,但是要使用偶數(shù)字號(hào)。


頁(yè)面加載速度:當(dāng)用戶在等待內(nèi)容加載時(shí),他們很可能會(huì)變的沮喪。如果加載速度很慢,用戶很可能會(huì)離開(kāi)這個(gè)網(wǎng)站。解決方案 懶加載、預(yù)加載。


返回按鈕:新打開(kāi)的頁(yè)面中盡量有返回按鈕(或者面包屑導(dǎo)航)。如果一定要跳轉(zhuǎn)到獨(dú)立的頁(yè)面,設(shè)置為在新窗口打開(kāi)。


慎用促銷、廣告:促銷和廣告會(huì)搶奪用戶的注意力,影響他們?cè)L問(wèn)網(wǎng)站。


慎用滾動(dòng)劫持:用戶最不喜歡的設(shè)計(jì)之一,用戶有權(quán)決定自己瀏覽的網(wǎng)頁(yè)和APP的位置。(滑動(dòng)到一定錨點(diǎn)時(shí)觸發(fā)模態(tài)彈窗)


慎用自動(dòng)播放音視頻:需要用打開(kāi)的音視頻文件,設(shè)置為非自動(dòng)播放的形式。


文字配色:不要使用繁重的顏色背景,配方方案要協(xié)調(diào)、易接受。不要使用閃爍的文字。


超鏈接:處理超鏈接時(shí),需注意超鏈接是網(wǎng)站中的重要組成元素。點(diǎn)擊過(guò)的超鏈接要改變字體顏色。 如果帶檢索功能,搜索結(jié)果中,要對(duì)關(guān)鍵字做出變色處理,提示用戶。

字體顏色


網(wǎng)頁(yè)標(biāo)題:網(wǎng)站設(shè)計(jì)規(guī)范詳解
網(wǎng)址分享:http://www.muchs.cn/news34/266334.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供云服務(wù)器、虛擬主機(jī)、網(wǎng)站改版、ChatGPT、網(wǎng)站設(shè)計(jì)手機(jī)網(wǎng)站建設(shè)

廣告

聲明:本網(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)

手機(jī)網(wǎng)站建設(shè)