2023-10-08 分類: 網(wǎng)站建設(shè)
※
一、文字
一個網(wǎng)頁里面最重要的元素就是文字,尤其是門戶類和企業(yè)類網(wǎng)頁,如果一個網(wǎng)頁沒有文字,就像一道菜沒有鹽,索然無味,甚至網(wǎng)頁想表達的是什么都不知道,那么文字的規(guī)范就很重要。常見的中文和英文最多,基本規(guī)范如下:
1、字體:中文常用宋體、微軟雅黑和黑體,其中黑體常用于導(dǎo)航或者標題,英文常用無襯線的Arial、Helvetica、Verdana和襯線的Georgia、Times。
2、字號:中文最小字號為12px,英文最小字號9px,不過建議10px起,因為網(wǎng)頁里面的字號通常為雙數(shù)。
3、樣式:網(wǎng)頁里宋體12px和14px通常設(shè)置為無,宋體的其他字號和其他字體通常平滑即可。
4、粗體:大片的閱讀性文字不適合加粗,文字加粗通常適用于導(dǎo)航、標題或者強調(diào)性的文字上。
5、顏色:除了標題或者交互等強調(diào)性的文字以外,其他重要文字用#333333居多,次要文字用#666666居多,輔助文字用#999999居多。
6、行高:行高可以根據(jù)字號來定,一般是字號的1.5-2倍居多。
※
二、圖片
網(wǎng)頁里面第二大重要元素就是圖片,尤其是電商類和專題類網(wǎng)頁,圖片完全符合人類的懶人閱讀法,能做到搭眼一看就能知道表達的主題是什么或者產(chǎn)品是什么,這是文字所不能匹敵的,并且一個網(wǎng)頁美不美,全靠圖片支撐,關(guān)于圖片的建議如下:
1、主次:也就是要大小混排,就連最簡單的電商列表頁,還要有側(cè)邊欄或者底部推薦產(chǎn)品的不同尺寸產(chǎn)品圖來陪襯,這樣的目的是避免瀏覽乏味,中和視覺。
2、大?。河械膹V告圖會比較大來增強視覺沖擊力,尤其是專題頁頭圖,建議不要超過一屏,不同分辨率的電腦一屏的尺寸會有所不同,一般800px上下最常見。
※
三、圖標
網(wǎng)頁是絕對少不了圖標的點綴裝飾的,只有文字會干巴巴的,那對于圖標就比較簡單了,注意如下幾點:
1、圖標要統(tǒng)一大小,統(tǒng)一材質(zhì),統(tǒng)一視角,統(tǒng)一顏色,統(tǒng)一風(fēng)格,比如用線條風(fēng)就整個全部用線條風(fēng),例如下面兩組風(fēng)格就不同。
2、圖標不易過大,一般圖標放到標題旁邊的居多,那圖標的尺寸跟旁邊文字字號一樣就可以了,如果比較大情況下,盡量對齊,比如居中對齊,頂對齊,底對齊等,如下:
※
四、邊框
在網(wǎng)頁里,除了強調(diào)和交互的時候邊框凸顯當(dāng)前效果以外,邊框大部分的作用只是起到分割模塊和排版整齊的作用,所以邊框要淡化,如果顏色過重、線條過粗或者邊框過多會給人視覺效果差,感覺滿屏的線條,而忽略了網(wǎng)頁的主體,主要注意幾點:
1、寬度:邊框?qū)挾?px即可。
2、顏色:邊框顏色一般#cccccc居多,或者更淺一點的顏色也可以。
3、重復(fù):同一個模塊里面,如果已經(jīng)有背景顏色或者邊框的存在,也就是說排版已經(jīng)明顯整齊,就不要重疊使用邊框。
4、距離:有邊框的時候,內(nèi)容要跟邊框分離一點,也就是內(nèi)外邊距要有。
※
五、間距
網(wǎng)頁里面設(shè)置間距就像是寫文章要有標點符號一樣,要讓人有喘息的時間,而間距的設(shè)置要根據(jù)模塊的大小來設(shè)置,就像是語句之間逗號,段落之間句號一樣,比如大模塊間的間距大于小模塊間的間距,這樣還能體現(xiàn)出主次關(guān)系,注意幾點:
1、太小不好:整個網(wǎng)頁間距如果全部都太小,給你很擁擠的感受,看起來很累,偶爾個別特殊排版的模塊間距小還好一些,例如下方,圖片和圖片緊貼,但是文字和邊緣是有堅決的,也就是說圖片沒有了外邊距,但是有內(nèi)邊距:
2、太大不好:如果模塊和模塊之間相隔很遠,會導(dǎo)致頁面內(nèi)容不充實,空洞,缺少繼續(xù)往下看的欲望,所以一般情況下10px到30px的間距居多。
※
六、配色
網(wǎng)頁設(shè)計也是設(shè)計,既然是設(shè)計,就離不開顏色的搭配,而網(wǎng)頁設(shè)計的配色跟其他類似,既不能太花哨也不能太單調(diào)。
1、種類:控制在三種之內(nèi),最少得有一個主色調(diào),主色調(diào)從哪里來呢?可以根據(jù)網(wǎng)頁內(nèi)容來定合適的,也可以用logo色來做主色調(diào),也可以選擇相近色或者撞色來做輔助色,其他可以黑白灰百搭色代替,專題頁可適當(dāng)放開。
2、明度飽和度:除了很小范圍的強調(diào)或者交互可以適當(dāng)選擇顏色飽和度高一點的,其他情況尤其是大片的背景色的時候盡量少用飽和度太高的,看久了刺眼,可以降低飽和度和調(diào)整明度,專題頁可適當(dāng)放開。
※
七、排版
網(wǎng)頁的排版就像是一名導(dǎo)游,讓游客能有目的性的或者條理性的往下游覽,所以排版必須條理清晰,無非做到以下兩點就可以。
1、整齊:對于普通網(wǎng)頁,只要做到整齊,哪怕你的設(shè)計不會很個性很出眾,但一定是一個不讓人討厭的稿子,其中里面的間距統(tǒng)一,主次要有,例如下面:整體是頂對齊底對其,間距統(tǒng)一,所以比較條例:
2、亂中有序:對于專題性質(zhì)的網(wǎng)頁,可能設(shè)計稍顯夸張,那就要亂中有序,比如以序列號、標題、線條等作為引導(dǎo),如下就是以序列號作為引導(dǎo):
當(dāng)前文章:網(wǎng)頁設(shè)計組成與規(guī)范需要遵循的原則及技巧
分享鏈接:http://m.rwnh.cn/news40/284640.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、做網(wǎng)站、網(wǎng)站制作、網(wǎng)站排名、App開發(fā)、電子商務(wù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容