客服
網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范有哪些
就算不懂行的人想起網(wǎng)頁(yè)設(shè)計(jì)估計(jì)都會(huì)覺(jué)得繁瑣，別說(shuō)那些天天面對(duì)的網(wǎng)頁(yè)設(shè)計(jì)師了，網(wǎng)頁(yè)設(shè)計(jì)不僅繁瑣在設(shè)計(jì)本身上，還在于網(wǎng)頁(yè)設(shè)計(jì)的行為規(guī)范上，今天就給大家羅列了一些網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范。
網(wǎng)頁(yè)設(shè)計(jì)也被稱為 Web Design、網(wǎng)站設(shè)計(jì)、WUI 等。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計(jì)。雖然現(xiàn)在我們常使用移動(dòng)端上的 APP 來(lái)獲取資訊，但是針對(duì)于企業(yè)來(lái)講，企業(yè)網(wǎng)站也是必不可少的一種形式，從1987年錢天白教授向德國(guó)發(fā)出第一封電子郵件到2000年搜狐、新浪、網(wǎng)易在美國(guó)納斯達(dá)克掛牌上市，再到現(xiàn)在網(wǎng)站遍地；中國(guó)的網(wǎng)站高速發(fā)展了近三十年。電腦的分辨率只有800×600像素，那時(shí)的網(wǎng)站性能和體驗(yàn)都不好，而現(xiàn)在網(wǎng)站設(shè)計(jì)和過(guò)去已經(jīng)有了巨大的變化：注重用戶體驗(yàn)、注重頁(yè)面內(nèi)容、多媒體等設(shè)計(jì)讓如今的網(wǎng)站體驗(yàn)并不比軟件和手機(jī) APP 差。加上個(gè)人電腦的普及，網(wǎng)站仍然是人機(jī)交互中非常重要的平臺(tái)之一。那么作為 UI設(shè)計(jì)師我們就必須掌握網(wǎng)站設(shè)計(jì)的規(guī)范和理解網(wǎng)站運(yùn)行的原理，才能更好地駕馭這個(gè)平臺(tái)。
因互聯(lián)網(wǎng)的發(fā)展，現(xiàn)今對(duì)網(wǎng)頁(yè)設(shè)計(jì)的要求也提高了，所以有個(gè)自己的設(shè)計(jì)規(guī)范會(huì)使設(shè)計(jì)簡(jiǎn)潔而高效。接下來(lái)，我們會(huì)從尺寸、字體、圖片、顏色等方面來(lái)開(kāi)展深入探索嘍！其實(shí)設(shè)計(jì)規(guī)范就是把主要頁(yè)面的元素固定成統(tǒng)一元素即可。具體來(lái)說(shuō)一個(gè)產(chǎn)品的設(shè)計(jì)規(guī)范應(yīng)該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類。
網(wǎng)頁(yè)的布局主要有兩種：
左右布局和居中布局。布局不一樣使設(shè)計(jì)的空間也不相同。
⑴、左右布局，靈活性強(qiáng)，UI限制??；左右通欄為導(dǎo)航欄，寬度沒(méi)具體限制，可根據(jù)實(shí)際情況調(diào)整；右側(cè)為內(nèi)容板塊范圍，是網(wǎng)站內(nèi)容展示區(qū)域。
?、?、居中布局，中間的深色部分為有效的顯示局域，用于網(wǎng)站內(nèi)容的展示；兩邊留白沒(méi)實(shí)際用圖，只是為適配而存在。
當(dāng)前最流行的分辨率是1920px*1080px的，所以建議創(chuàng)建網(wǎng)頁(yè)尺寸為1920px*1080px，頁(yè)面內(nèi)容區(qū)域（版心）常設(shè)置為1200px（或1000px -1200px區(qū)間），以這個(gè)尺寸來(lái)設(shè)計(jì)相對(duì)標(biāo)準(zhǔn)。每個(gè)屏幕的高度約為900px左右。
網(wǎng)頁(yè)設(shè)計(jì)字體的選擇可以微軟雅黑，英文及數(shù)字可以使用Arial字體；說(shuō)完字體咱們?cè)撜f(shuō)字體的字重、字號(hào)、行高、字間距、行間距、段間距了、字體顏色。
字號(hào)（所有字號(hào)使用偶數(shù)）：
正文：12px－18px之間
12px是應(yīng)用于網(wǎng)頁(yè)的最小字體，適用于非突出性的日期，版權(quán)等注釋性內(nèi)容。
14px 則適用于非突出性的普通正文內(nèi)容。
英文可偏小些 ：10px－16px
導(dǎo)航欄字體：一般在14px-18px區(qū)間，最大不超過(guò)18px，禁用加粗
字體間距
相鄰兩個(gè)文字的間距，其實(shí)不需要太過(guò)介意，除了特殊的需求之外，都可以使用默認(rèn)數(shù)值的間距。
行間距，推薦使用 字體大小的1.5-1.7倍 作為參考；
字間距，推薦使用 0/25/50即，當(dāng)用12px 的字體時(shí)，行間距：18-20；
字體顏色
正文字體顏色，建議選用 #333333到#666666 之間的顏色。
輔助性的，注釋類的文字，則可以選用#999999之類的比較淺的顏色。
雖然網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范是比較繁雜的，但是作為一個(gè)這方面的專業(yè)人員，就算再繁雜也得用心做，因?yàn)槟愕膶?duì)得起你的用戶，對(duì)得起她們的信任。西安蟠龍網(wǎng)絡(luò)，十年專注網(wǎng)站建設(shè)服務(wù)，給客戶的承諾，就是我們的責(zé)任，致力于為中小企業(yè)提供一站式互聯(lián)網(wǎng)服務(wù)！
相關(guān)文章：
-
windows+r打開(kāi)運(yùn)行對(duì)話框，輸入regedit，點(diǎn)擊確定打開(kāi)注冊(cè)表 按Ctrl+F鍵打開(kāi)查找對(duì)話框，輸入C:\Windows\system32\notepad.exe,-469 找到后雙擊打開(kāi) 修改其值為T文本文檔 然后右鍵，按W，按T。就可以快速新...
-
PHP去除BOM頭的方法 BOM頭是UTF-8來(lái)告訴編輯器：我是UTF8編碼。它的編碼是\xEF\xBB\xBF 但是PHP在設(shè)計(jì)之初并沒(méi)有考慮到BOM頭的問(wèn)題，所以在編解碼的時(shí)候很容易出現(xiàn)問(wèn)題 代碼如下： $result = trim($re...
-
CSS實(shí)現(xiàn)圖片裁剪居中 其實(shí)，css實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，只需要設(shè)置img的樣式：object-fit：none即可，不過(guò)你要給img一個(gè)高度，因?yàn)椴眉袈?頁(yè)面：（圖片可以自己隨便截兩張來(lái)測(cè)試） !--長(zhǎng)圖片-- div clas...
-
CSS背景圖片自適應(yīng)全屏 .bg{ background:url(bg.png) no-repeat; background-size:cover; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )//IE特有的濾鏡 }...
-
$str = file_get_contents(weixinname.txt);//將整個(gè)文件內(nèi)容讀入到一個(gè)字符串中 $str_encoding = mb_convert_encoding($str, UTF-8, UTF-8,GBK,GB2312,BIG5);//轉(zhuǎn)換字符集（編碼） $arr = explode(\r\n, $str_encoding);//轉(zhuǎn)換成數(shù)組 //去...
-
在線HTML實(shí)體轉(zhuǎn)字符串工具 #22235;在線HTML實(shí)體轉(zhuǎn)漢字 HTML實(shí)體編碼互轉(zhuǎn) https://uutool.cn/html2str/ http://www.toolzl.com/tools/htmlende.html...
-
使用百度編輯器上傳附件后，附件的圖標(biāo)，引用的是絕對(duì)URL，一下子完整暴露了編輯器所在目錄，甚至后臺(tái)入口也完全暴露了： 要解決這個(gè)問(wèn)題，有兩個(gè)方法： 前提是要把ueditor\dialogs\attachm...
-
插件界面 插件功能 支持記錄當(dāng)天審核記錄 支持可控時(shí)間段審核 支持可控欄目審核 支持審核后生成HTML，包括首頁(yè)，欄目列表頁(yè)，內(nèi)容頁(yè) 支持審核后推送到百度和熊掌 支持查看推送記錄 使用...
-
display: table-cell table-cell屬性讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)。兼容IE8+，會(huì)被以下CSS屬性破壞： float position // 設(shè)置display: table-cell的元素對(duì)寬高敏感，margin無(wú)反應(yīng)，響應(yīng)padding 實(shí)現(xiàn)大小不固定...
-
Viewport viewport：可視窗口，也就是瀏覽器。 vw Viewport寬度， 1vw 等于viewport寬度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的數(shù)學(xué)運(yùn)算規(guī)則，但是也提供更智能的功能：...