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

當(dāng)前文章：網(wǎng)頁(yè)設(shè)計(jì)組成與規(guī)范需要遵循的原則及技巧
分享鏈接：http://aaarwkj.com/news40/284640.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、做網(wǎng)站、網(wǎng)站制作、網(wǎng)站排名、App開(kāi)發(fā)、電子商務(wù)

廣告

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