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