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