<p> 不同網(wǎng)站設(shè)計(jì)，不同的類型，不要的要求，但是對(duì)于企業(yè)網(wǎng)站或者公司網(wǎng)站的設(shè)計(jì)制作來說，一般整理的規(guī)范和要求是一致的，除非始于一些不同行業(yè)，不同類型的公司的網(wǎng)站來說，在<a href="http://www.szbc888.com" target="_blank"><strong>深圳網(wǎng)站設(shè)計(jì)</strong></a>，網(wǎng)站制作層面有很大的差異的，另外作為網(wǎng)站來說，不同的網(wǎng)站制作公司對(duì)網(wǎng)站的理解和設(shè)計(jì)規(guī)劃方面存在很大的差異，這就不同的網(wǎng)站制作公司制作出來的網(wǎng)站大大不同的，原因就在只此，接下來我們來聽聽<a href="http://www.szbc888.com" target="_blank"><strong>深圳網(wǎng)站設(shè)計(jì)公司</strong></a>的是怎么看待這個(gè)問題的 </p> <h3> <strong>公司網(wǎng)站設(shè)計(jì)制作全局規(guī)范和要求</strong> </h3> 一、頁面布局<br /> 頁面布局是企業(yè)網(wǎng)站設(shè)計(jì)的核心，需要進(jìn)行有效的規(guī)劃。一個(gè)好的頁面布局不僅能提高用戶的使用體驗(yàn)，還能使頁面信息更加有序、易讀。以下是一些頁面布局要求：<br /> 1.簡潔明了<br /> 企業(yè)網(wǎng)站頁面應(yīng)該盡量簡潔，只保留必要的信息，而不是無謂的裝飾和內(nèi)容。頁面布局應(yīng)該符合人性化的習(xí)慣，讓用戶能夠快速找到所需信息。<br /> 2.易于導(dǎo)航<br /> 企業(yè)網(wǎng)站應(yīng)該具有簡單的導(dǎo)航條，便于用戶進(jìn)行跳轉(zhuǎn)。導(dǎo)航條不能過于復(fù)雜，需要明確的標(biāo)注當(dāng)前所在位置。<br /> 3.排版合理<br /> 企業(yè)網(wǎng)站的排版需要考慮字體、字號(hào)、顏色搭配等各方面因素。標(biāo)題應(yīng)該簡潔明了、易于辨認(rèn)，正文應(yīng)該是簡潔通俗易懂的語言，段落之間需要空行，以便增加空氣感和閱讀舒適度。<br /> 二、顏色搭配<br /> 顏色是構(gòu)成網(wǎng)頁的基本元素之一，恰當(dāng)?shù)氖褂媚軌蛟鰪?qiáng)網(wǎng)頁的設(shè)計(jì)感和美感。對(duì)于企業(yè)網(wǎng)站而言，顏色的搭配更需注意以下幾點(diǎn)：<br /> 1.以品牌色為主<br /> 企業(yè)網(wǎng)站的主色調(diào)應(yīng)以品牌色為主，以便更好地傳遞企業(yè)形象。品牌色對(duì)企業(yè)影響很大，因此應(yīng)注重品牌色的貫徹，以更好地展示企業(yè)形象。<br /> 2.不要使用太多顏色<br /> 企業(yè)網(wǎng)站不應(yīng)使用過多的顏色，過多的顏色反而會(huì)對(duì)用戶產(chǎn)生視覺疲勞，影響信息的傳遞。<br /> 3.保持統(tǒng)一<br /> 企業(yè)網(wǎng)站的顏色搭配應(yīng)該保持統(tǒng)一，以保證整個(gè)網(wǎng)站的風(fēng)格協(xié)調(diào)。這樣可以使企業(yè)網(wǎng)站更加專業(yè)、穩(wěn)重。<br /> 三、內(nèi)容呈現(xiàn)<br /> 企業(yè)網(wǎng)站的內(nèi)容呈現(xiàn)是影響用戶訪問體驗(yàn)的一個(gè)重要部分，需要遵循以下幾個(gè)要求：<br /> 1.簡潔明了<br /> 企業(yè)網(wǎng)站需要在內(nèi)容呈現(xiàn)方面保持簡單清晰的定位，講述內(nèi)容時(shí)不能太過花哨，過于華麗的語言或者過多的修飾會(huì)影響用戶的閱讀體驗(yàn)。<br /> 2.內(nèi)容即王<br /> 內(nèi)容是企業(yè)網(wǎng)站最重要的基礎(chǔ)，企業(yè)網(wǎng)站所要展示的內(nèi)容需要體現(xiàn)企業(yè)的文化氛圍和品牌形象。企業(yè)網(wǎng)站的內(nèi)容所涵蓋的領(lǐng)域應(yīng)該盡可能地廣泛，從企業(yè)簡介、產(chǎn)品介紹、新聞動(dòng)態(tài)、服務(wù)文化、聯(lián)系方式等方面進(jìn)行呈現(xiàn)。<br /> 3.移動(dòng)適配<br /> 當(dāng)前，移動(dòng)設(shè)備用戶日益增多，因此企業(yè)網(wǎng)站的內(nèi)容呈現(xiàn)還要考慮移動(dòng)端適配。企業(yè)網(wǎng)站在做移動(dòng)適配時(shí)要合理布局、保證簡潔易讀，讓用戶能夠方便快捷地訪問企業(yè)網(wǎng)站。<br /> <h3> <a href="http://www.szbc888.com" target="_blank"><strong>深圳公司網(wǎng)站設(shè)計(jì)</strong></a><strong>規(guī)劃規(guī)范</strong> </h3> 1、每個(gè)頁面上沒有太多鏈接<br /> 確保每個(gè)網(wǎng)頁上沒有太多鏈接。太多的內(nèi)容很容易分散網(wǎng)頁的重量。 在鏈接數(shù)量的問題上，不要過度追求數(shù)量。 一切都基于網(wǎng)站推廣的原則。<br /> 2、向用戶提供一個(gè)站點(diǎn)地圖文件，其中包含指向網(wǎng)站重要頁面的鏈接<br /> 為確保站點(diǎn)促銷具有站點(diǎn)地圖文件，它包含兩個(gè)xml格式和html格式的地圖文件。 以xml格式創(chuàng)建地圖文件時(shí)，請(qǐng)注意每個(gè)地圖文件中的鏈接數(shù)不得超過50,000。 如果鏈接很多，則可以創(chuàng)建多個(gè)站點(diǎn)地圖文件。 創(chuàng)建站點(diǎn)地圖文件后，您可以將其提交給搜索引擎。 例如，您可以在百度網(wǎng)站管理員平臺(tái)或Google管理員工具上提交它。<br /> 3、盡可能使用靜態(tài)URL。 使用動(dòng)態(tài)URL時(shí)，應(yīng)將參數(shù)較小化<br /> 盡管搜索引擎可以正常爬網(wǎng)靜態(tài)和動(dòng)態(tài)URL，但是靜態(tài)URL仍然具有某些優(yōu)勢。 當(dāng)您要使用動(dòng)態(tài)URL時(shí)，URL應(yīng)該盡可能簡短和描述性強(qiáng)，并且不包含太多參數(shù)。<br /> 4、網(wǎng)站應(yīng)務(wù)實(shí)且內(nèi)容豐富，網(wǎng)頁文字應(yīng)清晰準(zhǔn)確地描述要交流的內(nèi)容<br /> 搜索引擎越來越重視網(wǎng)頁的促銷內(nèi)容。 可以提供豐富實(shí)用內(nèi)容的網(wǎng)站越來越受到在線營銷搜索引擎的青睞。 在網(wǎng)頁中，圖片和文字可用于豐富網(wǎng)頁的內(nèi)容。<br /> 5、考慮用戶將使用哪些詞來查找您的網(wǎng)頁，并確保該站點(diǎn)實(shí)際上包含文本<br /> 在編寫網(wǎng)頁內(nèi)容時(shí)，您應(yīng)該從網(wǎng)站用戶的角度出發(fā)編寫更多內(nèi)容，考慮用戶將使用哪種語言，并嘗試盡可能滿足用戶的需求，并且可以基于以下內(nèi)容構(gòu)建關(guān)鍵字詞庫 詞庫中的關(guān)鍵字。 推廣網(wǎng)站的內(nèi)容以組織網(wǎng)頁的內(nèi)容，并確保每個(gè)頁面都有用戶想要使用的潛在搜索詞。<br /> 6、檢查網(wǎng)頁上是否有無效鏈接，以確保可以正常打開每個(gè)網(wǎng)頁，并確保網(wǎng)頁HMTL語言正確<br /> 我們可以使用W3C工具來檢查網(wǎng)頁的內(nèi)容是否符合標(biāo)準(zhǔn)格式，例如是否存在打開的HTML標(biāo)簽。 我們要經(jīng)常使用無效鏈接檢查工具來檢查網(wǎng)站。 例如，我們可以使用XENU工具檢查網(wǎng)站上的無效鏈接。 由Google管理在該工具中，搜尋器還將提供搜尋錯(cuò)誤信息。 一旦發(fā)現(xiàn)問題，就要立即解決網(wǎng)絡(luò)營銷中的死鏈接問題。<br /> 7、網(wǎng)站應(yīng)具有清晰的層次結(jié)構(gòu)和文本鏈接，以確保至少應(yīng)通過靜態(tài)文本鏈接打開每個(gè)網(wǎng)頁。<br /> 在網(wǎng)站設(shè)計(jì)中，網(wǎng)站樹結(jié)構(gòu)的優(yōu)化是重要的環(huán)節(jié)。 甚至許多大型網(wǎng)站都有SEO架構(gòu)師之類的職位。 網(wǎng)站推廣的層次結(jié)構(gòu)應(yīng)清晰，目錄層次結(jié)構(gòu)的設(shè)置不得超過三層，對(duì)于每個(gè)網(wǎng)頁，至少應(yīng)通過靜態(tài)文本鏈接打開，并應(yīng)放置網(wǎng)站的內(nèi)部鏈接 以確保搜索引擎蜘蛛可以正常爬網(wǎng)。<br /> 8、嘗試使用文本而不是圖片來顯示重要的名稱，內(nèi)容或鏈接<br /> 搜索引擎搜尋器無法識(shí)別圖片中包含的文本。如果要將圖像用于文本內(nèi)容，請(qǐng)考慮使用“ ALT”屬性來包含一些描述性的網(wǎng)站促銷文本。 例如，許多網(wǎng)站管理員經(jīng)常使用圖片顯示導(dǎo)航內(nèi)容，以使導(dǎo)航非常令人眼花撩亂。 實(shí)際上，使用圖片遠(yuǎn)比使用文本錨文本差。<br /> <h3> <a href="http://www.szbc888.com" target="_blank"><strong>深圳公司網(wǎng)頁設(shè)計(jì)</strong></a><strong>時(shí)用色規(guī)范</strong> </h3> 1．色彩風(fēng)格設(shè)計(jì).<br /> 網(wǎng)站的色彩風(fēng)格往往是給人的第眼感覺，因此尤為重要。在確保網(wǎng)站風(fēng)格獨(dú)特和排他性的同時(shí)，盡量向企業(yè)的特點(diǎn)和企業(yè)色靠攏。下圖是一個(gè)綠色能源公司的網(wǎng)站，在用色上體現(xiàn)了公司的性質(zhì)。<br /> 2．版面布局設(shè)計(jì).<br /> 網(wǎng)站的版面布局是多種多樣的，例如廠型布局、同型布局等等。設(shè)計(jì)師要把握網(wǎng)站的整體感，網(wǎng)站不能給人以零散的感覺，同時(shí)設(shè)計(jì)師還要把握板塊之間的銜接，比如使用漸變和不同色塊來聯(lián)系和區(qū)分板塊，同時(shí)給人以層次感。下圖是lNG集團(tuán)網(wǎng)站首頁，版面布局簡單大方。<br /> 3．圖形與圖像的使用.<br /> 圖形和圖像有雙重的屬性，是信息的傳遞元素又是頁面的修飾元素。所以用好它們非常重要。圖形的使用要注意統(tǒng)一性，比如使用同一體系的標(biāo)識(shí)圖案等。圖像的選擇首先要符合表現(xiàn)的內(nèi)容，比如一張表示數(shù)據(jù)庫服務(wù)的圖像，我們要從圖庫里去尋找一些數(shù)字類的科技圖像，其次圖像的顏色方面要注意同頁面風(fēng)格和其他頁面元素的搭配。下圖所示的網(wǎng)站均使用了圓角圖像，破除了版面均是直角的死板。<br /> 4．文字和標(biāo)題.<br /> 盡量使網(wǎng)頁易于閱讀，除了分欄之外(將頁面縱向分割)，也需要利用標(biāo)題和副標(biāo)題將文檔分段。為所有標(biāo)題和副標(biāo)題設(shè)置同一字體，并將標(biāo)題字體加大一號(hào)，所有標(biāo)題和副標(biāo)題都采用粗體，這樣便于識(shí)別標(biāo)題(字體加大加粗)和副標(biāo)題(粗體，與正文字體大小相同)，使瀏覽者一眼就可以看到重點(diǎn)，以便找出感興趣的內(nèi)容并繼續(xù)閱讀。標(biāo)題的重要性可見一斑，要認(rèn)真寫好每個(gè)標(biāo)題。下圖所示的網(wǎng)站在文字和標(biāo)題上全部統(tǒng)一，界面顯得整齊干凈。<br /> 5．動(dòng)畫.<br /> 動(dòng)畫可以表達(dá)更多的內(nèi)容，同時(shí)增加頁面感染力，但是為了提高商務(wù)型網(wǎng)站打開速度，建議盡量少使用動(dòng)畫元素。<br /> <h3> <strong>公司網(wǎng)站設(shè)計(jì)制作具體細(xì)節(jié)規(guī)范和要求</strong> </h3> 1. 頁面布局<br /> 統(tǒng)一尺寸<br /> 據(jù)統(tǒng)計(jì)，目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 來設(shè)計(jì)的話，向上適配或者向下適配誤差會(huì)比較小。<br /> 適配方案：面向多個(gè)客戶，后臺(tái)產(chǎn)品設(shè)計(jì)功能型頁面的尺寸統(tǒng)一為 1440*900，按照柵格系統(tǒng)原則向上或向下適配。展示型頁面以 1440*900 為主，同時(shí)設(shè)計(jì)出極端情況（寬度為 1280 以及寬度為 1920）的效果圖，力求實(shí)現(xiàn)前端實(shí)現(xiàn)效果和高保真設(shè)計(jì)圖誤差最小。面向公司內(nèi)部的后臺(tái)系統(tǒng)，由于各個(gè)職工電腦屏幕是統(tǒng)一采購、統(tǒng)一尺寸，所以開發(fā)適配的分辨率可以統(tǒng)一尺寸進(jìn)行設(shè)計(jì)，這個(gè)尺寸根據(jù)公司內(nèi)部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。<br /> 頁面框架<br /> 頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側(cè)菜單欄、主體內(nèi)容三大區(qū)域，其中頂部菜單欄、左側(cè)菜單欄為固定結(jié)構(gòu)，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行動(dòng)態(tài)縮放；上下欄布局包括頂部菜單欄和主體內(nèi)容兩大區(qū)域，其中頂部菜單欄為固定結(jié)構(gòu)，主體內(nèi)容進(jìn)行動(dòng)態(tài)縮放且需定義主體內(nèi)容左右兩邊空白區(qū)域最小值；左右欄布局時(shí)，左側(cè)菜單可收縮展開，收縮狀態(tài)下固定寬度。<br /> 柵格布局<br /> 柵格系統(tǒng)的使用是為了解決自適應(yīng)和響應(yīng)式問題，從而更好地進(jìn)行產(chǎn)品設(shè)計(jì)和產(chǎn)品開發(fā)。響應(yīng)式柵格采用 24 列柵格系統(tǒng)實(shí)現(xiàn)，以滿足 2，3，4，5，6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進(jìn)行動(dòng)態(tài)縮放。<br /> 需要柵格化處理的內(nèi)容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。<br /> 谷歌規(guī)定模塊和結(jié)構(gòu)之間要以 8px 為基準(zhǔn)，布局間相對(duì)間距可采用 8px 以及 8 的倍數(shù)，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準(zhǔn)。柵格布局是為了輔助設(shè)計(jì)，靈活運(yùn)用，不要被它所局限。<br /> 尺寸設(shè)定<br /> 一般在整體區(qū)域左上角放置產(chǎn)品 LOGO 及產(chǎn)品名稱，大部分系統(tǒng)頂部欄高度 48+8n，側(cè)邊欄寬度&nbsp; 200+8n。我常用的是頂部欄高度 56px，側(cè)邊欄寬度 200px，側(cè)邊欄收縮狀態(tài)寬度 56px，右側(cè)的側(cè)浮窗寬度 400px。<br /> 相對(duì)間隔<br /> 定義主體內(nèi)容的上下左右邊距，定義主體區(qū)域內(nèi)各模塊的邊距及安全寬度，超出內(nèi)容區(qū)域的部分采用區(qū)域內(nèi)滾動(dòng)或整屏滾動(dòng)，視情況固定導(dǎo)航欄。<br /> 2. 標(biāo)準(zhǔn)色<br /> 顏色分為品牌色、輔助色、中性色。根據(jù)不同產(chǎn)品的不同需求，可能也會(huì)將統(tǒng)計(jì)圖、標(biāo)簽等進(jìn)行統(tǒng)一標(biāo)準(zhǔn)色設(shè)定。<br /> 品牌色即產(chǎn)品主色，產(chǎn)品主色的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品直接對(duì)外的形象。品牌色要根據(jù)產(chǎn)品特性、用戶使用場景、產(chǎn)品定位等進(jìn)行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應(yīng)用場景包括操作狀態(tài)、按鈕色、可操作圖標(biāo)等。輔助色用于提示其他場景，比如成功、失敗、警告、無效等。<br /> 中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現(xiàn)不同的層級(jí)結(jié)構(gòu)。<br /> 其他色如統(tǒng)計(jì)圖、數(shù)據(jù)可視化、多個(gè)標(biāo)簽的不同配色方案根據(jù)項(xiàng)目情況單獨(dú)設(shè)定。<br /> 3. 標(biāo)準(zhǔn)字<br /> 后臺(tái)系統(tǒng)常用的字體：windows 系統(tǒng)，中文 Microsoft YaHei，英文 Arial；Mac 字體，中文 PingFang SC，英文 Helvetica；除此之外可以選擇的字體還有 segoe UI、思源黑體、Hiragino Sans GB等。后臺(tái)系統(tǒng)中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。<br /> 行高設(shè)定，根據(jù)文字大小及使用場景設(shè)置行高，一般行高=文字大小+6px/8px。<br /> 4. 圖標(biāo)<br /> 圖標(biāo)是 UI 設(shè)計(jì)中重要組成部分，一般分為功能圖標(biāo)和應(yīng)用圖標(biāo)，以圖形的方式傳達(dá)概念，可以降低理解成本，使得界面更加協(xié)調(diào)美觀。在后臺(tái)產(chǎn)品中，圖標(biāo)的功能則更偏向輔助性，輔助用戶對(duì)功能的認(rèn)識(shí)。<br /> 除了某些常用的圖標(biāo)，有一些專業(yè)性的操作和詞匯則需要設(shè)計(jì)師進(jìn)行繪制，現(xiàn)在比較高效方便的方法是在 iconfont 提供的圖標(biāo)模板上用 AI 繪制，畫板 1024*1024，提供圓形、正方形、矩形形狀。圖標(biāo)尺寸按照 8 的倍數(shù)進(jìn)行延展，繪制完成后生成 svg 格式文件，提交到阿里巴巴矢量圖標(biāo)庫的項(xiàng)目組里，方便前端調(diào)用，調(diào)整大小和顏色更為方便，且能夠優(yōu)化系統(tǒng)內(nèi)存和性能。<br /> 5. 按鈕<br /> 按鈕是后臺(tái)產(chǎn)品進(jìn)行交互設(shè)計(jì)是重要元素，提供給用戶進(jìn)行點(diǎn)擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。<br /> 按鈕的交互狀態(tài)包括默認(rèn)、懸停、點(diǎn)擊和不可用。<br /> 按鈕根據(jù)需求分為不同尺寸，大中小三個(gè)級(jí)別用在不同的場景，一般按照 8 的倍數(shù)設(shè)定。如高度分別設(shè)定為 24、32、40px。<br /> 規(guī)范整理時(shí)要規(guī)定不同類型按鈕的寬高、圓角及文字大小，同時(shí)還要將按鈕的不同狀態(tài)展現(xiàn)出來。<br /> 填充按鈕之間間距最小為 10px。<br /> 6. 導(dǎo)航<br /> 導(dǎo)航的類型有很多種，常用的比如頂欄菜單、側(cè)欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時(shí)間軸、tab標(biāo)簽頁、膠囊菜單、徽標(biāo)數(shù)等。<br /> 各類導(dǎo)航中的字體大小可進(jìn)行統(tǒng)一設(shè)定。<br /> 頂欄菜單多為一級(jí)菜單，點(diǎn)擊切換，或作為下拉菜單的父級(jí)，將子級(jí)菜單合理分類。<br /> 側(cè)欄菜單為垂直導(dǎo)航菜單，可以內(nèi)嵌子菜單。<br /> 下拉菜單的觸發(fā)方式一般有鼠標(biāo)懸停和鼠標(biāo)點(diǎn)擊兩種。<br /> 步驟條引導(dǎo)用戶按照流程來完成任務(wù)，一般步驟不得少于兩步。<br /> 分頁的高度設(shè)定為 24px、30px、32px，根據(jù)應(yīng)用場景適當(dāng)增減內(nèi)容，比如設(shè)定每頁展示數(shù)據(jù)的條數(shù)、跳轉(zhuǎn)至指定頁等。<br /> 面包屑用于說明層級(jí)結(jié)構(gòu)，使用戶明確當(dāng)前所在位置，并且可以回到任一上級(jí)頁面。<br /> 徽標(biāo)數(shù)用來通知用戶當(dāng)前有未讀消息，一般出現(xiàn)在圖標(biāo)的右上角或者跟在文字后面。<br /> 7. 表單<br /> 表單多由一條或多條列表項(xiàng)組成，單一列表項(xiàng)的類型有字段輸入框、條件選擇器。<br /> 字段輸入框的標(biāo)題和輸入框分布方式包括左右、上下、無標(biāo)題。左右分布是常見的對(duì)齊方式，比較適合 PC 端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標(biāo)題經(jīng)常應(yīng)用在登錄注冊(cè)，雖然減少了面積，但是增加了理解難度。<br /> 輸入框的交互狀態(tài)包括默認(rèn)、輸入結(jié)果、提示錯(cuò)誤、禁用、獲取焦點(diǎn)。<br /> 輸入框的尺寸可按照8的倍數(shù)進(jìn)行設(shè)定，比如 24px、32px，也可根據(jù)系統(tǒng)實(shí)際情況進(jìn)行設(shè)定，我常用的輸入框高度為 30px，寬度視情況而定，無圓角。上下布局的多個(gè)輸入框上下間距為 20px，有錯(cuò)誤提示時(shí)候豎向增加 10px 或橫向顯示在輸入框右側(cè)（預(yù)留出位置）。<br /> 表單中標(biāo)題文字左對(duì)齊，輸入框左對(duì)齊，標(biāo)題文字距離輸入框20px（多個(gè)長度不同的輸入框算最長的）；標(biāo)題文字右對(duì)齊，輸入框左對(duì)齊，也是常用的方式。輸入框內(nèi)正文字體 14px，文字和左右兩邊邊框的邊距 10px。選擇器包括單選、多選、時(shí)間選擇、開關(guān)切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復(fù)選框多為方形。<br /> 搜索框和選擇框的高度為 30px 或按照 8 的倍數(shù)自行設(shè)定，通常和輸入框保持一致。搜索框距離右側(cè)按鈕 4px，內(nèi)部文字 14px。<br /> 單選多選框尺寸 16*16px，多個(gè)選項(xiàng)橫向排列間距 16px，縱向排列間距 8px。<br /> 開關(guān)按鈕外框 40*20px，內(nèi)部圓形 16*16px。<br /> 8. 表格<br /> 表格在后臺(tái)產(chǎn)品 UI 設(shè)計(jì)中占比非常大，用來展示數(shù)據(jù)、統(tǒng)一管理、作為詳情入口，是最清晰、高效的形式之一。在設(shè)計(jì)規(guī)范中需設(shè)定表頭高度、表格行高、表格列寬范圍，同時(shí)也包括表格中的按鈕樣式、標(biāo)簽樣式。<br /> 表格主要分為五大區(qū)域：選擇搜索區(qū)、操作區(qū)、表頭、正文、底欄。選擇搜索區(qū)放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區(qū)指各種對(duì)表格內(nèi)容進(jìn)行增刪改查、批量處理、配置列的動(dòng)作；表頭展示列標(biāo)題，一般具有排序功能；正文主要展示各種各樣的數(shù)據(jù)，要注意行高、對(duì)齊、分割、信息層級(jí)等，要考慮是否提供行內(nèi)操作；底欄顯示分頁、總數(shù)統(tǒng)計(jì)等。<br /> 表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對(duì)可批量操作的表格數(shù)據(jù)在第一列增加多選框。<br /> 行高<br /> 表格行高可設(shè)置為表格內(nèi)字體高度的 2~3 倍，主表格會(huì)間隔顯示不同顏色，用于區(qū)分不同行數(shù)據(jù)、加強(qiáng)視覺流引導(dǎo)，展開單行的內(nèi)置表格可采用純色，選中行應(yīng)有視覺上的反饋。表頭要和表格內(nèi)容有視覺上的區(qū)分。表格行高可采用 36、40、48、60 等。<br /> 行數(shù)<br /> 表格行數(shù)太多加載速度會(huì)降低，延長用戶等待時(shí)間；行數(shù)太少會(huì)導(dǎo)致用戶不斷翻頁，降低使用效率。比較合適的默認(rèn)表格行數(shù)是 20 或 50，用戶可以根據(jù)自己需求選擇默認(rèn)的行數(shù)。設(shè)定行數(shù)之后，如果每頁行數(shù)多于每屏行數(shù)，可在表格內(nèi)引入滾動(dòng)條，這時(shí)可以固定表頭滾動(dòng)內(nèi)容。<br /> 列寬<br /> 列寬根據(jù)內(nèi)容字段長短需要有不同且合理的默認(rèn)值，使得表格字段有良好的展示效果。列內(nèi)容的長度固定時(shí)，列寬應(yīng)大于固定寬度（比如時(shí)間、MD5、SHA1）；列內(nèi)容不固定時(shí)，能預(yù)判最大寬度的按照最大寬度設(shè)定列寬（比如IP地址、MAC地址、姓名），不能預(yù)判最大寬度的設(shè)定列寬按照常用寬度，多于內(nèi)容省略以「…」展示，鼠標(biāo)懸停出現(xiàn)完整內(nèi)容（比如詳情、描述）。<br /> 列數(shù)<br /> 表格列不應(yīng)過多，列數(shù)比較多的情況下應(yīng)該合理進(jìn)行合并、隱藏、刪除或進(jìn)行優(yōu)先級(jí)處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動(dòng)條，根據(jù)實(shí)際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。<br /> 對(duì)齊方式<br /> 表格內(nèi)的文本應(yīng)按照文本類型不同進(jìn)行統(tǒng)一規(guī)范，如金額類數(shù)值保留相同位數(shù)小數(shù)，SHA1 雖然是一串?dāng)?shù)字但是其實(shí)那并不是數(shù)據(jù)而是一串編碼，所以可以像文本一樣左對(duì)齊。根據(jù)文本內(nèi)容不同，對(duì)齊方式也應(yīng)靈活調(diào)整，可采用文本左對(duì)齊、數(shù)據(jù)右對(duì)齊、金額小數(shù)點(diǎn)對(duì)齊的方式。數(shù)據(jù)前面有標(biāo)簽的，將標(biāo)簽前置對(duì)齊。類似 IP 地址、MD5、SHA1、域名這樣的信息，也可以根據(jù)產(chǎn)品需要在文本前面增加「復(fù)制」圖標(biāo)，方便用戶調(diào)用。<br /> 詳情入口<br /> 表格內(nèi)部數(shù)據(jù)的詳情入口，將能點(diǎn)擊下鉆查看詳情的內(nèi)容以不同顏色表示，同時(shí)在表格行最后一列操作按鈕部分放置一個(gè)查看按鈕。<br /> 9. 反饋<br /> 包括彈框、側(cè)滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態(tài)等。分為模態(tài)框和非模態(tài)框，區(qū)別是是否會(huì)打斷用戶工作流。<br /> 彈框又稱對(duì)話框，是疊加在應(yīng)用主窗口上的彈出式窗口，以對(duì)話的方式使用戶參與進(jìn)來。<br /> 彈框<br /> 彈框出現(xiàn)時(shí)，主題內(nèi)容增加一層遮罩 #000，透明度 50%，避免使用雙層彈框，可同時(shí)采用有關(guān)閉圖標(biāo)的彈框和無關(guān)閉圖標(biāo)的彈框，引導(dǎo)用戶對(duì)內(nèi)容進(jìn)行正確操作。如果設(shè)定系統(tǒng)內(nèi)所有彈框均可以點(diǎn)擊彈框外區(qū)域關(guān)閉， 則需要為用戶新增或編輯內(nèi)容的彈框彈出二級(jí)確認(rèn)的彈框，或者再次進(jìn)行交互梳理。<br /> 側(cè)滑框<br /> 側(cè)滑框又稱抽屜，出現(xiàn)在右側(cè)，固定寬度 400px，高度覆蓋在主題內(nèi)容之上，點(diǎn)擊側(cè)滑框以外的區(qū)域則收起側(cè)滑框。<br /> 骨架屏<br /> 為某些特定數(shù)據(jù)提供數(shù)據(jù)加載等待時(shí)的占位圖形組合。<br /> 全局提示<br /> 建議停留時(shí)間 3s，可根據(jù)文字字?jǐn)?shù)調(diào)整停留時(shí)間，文字內(nèi)容限制在 30 以內(nèi)。<br /> 警告提示<br /> 用不同顏色和樣式展示需要關(guān)注的信息。<br /> 通知提醒<br /> 消息通知和警告信息用通知提醒框，單個(gè)消息從頁面右側(cè)以抽屜的方式劃出，用戶可手動(dòng)關(guān)閉，或停留 3s 后自動(dòng)關(guān)閉。<br /> 10. 缺省狀態(tài)<br /> 繪制不同類型的情感化插畫表示缺省狀態(tài)，如404、500、暫時(shí)沒有數(shù)據(jù)、沒有新消息等。頁面需要一個(gè)默認(rèn)的底色，錯(cuò)誤文字使用 14px，與情感化插畫間距 20px，與按鈕間距 30px。<br /> 11. 數(shù)據(jù)可視化<br /> 數(shù)據(jù)可視化部分可能是后臺(tái)產(chǎn)品中對(duì)視覺設(shè)計(jì)要求較高的部分，使用情境為各類統(tǒng)計(jì)圖、大屏展示頁面等。<br /> 功能型頁面的數(shù)據(jù)可視化可以引入圖形化設(shè)計(jì)組件，Echarts、G2、d3等；展示型頁面的數(shù)據(jù)可視化則可以做得更有趣，比如立體的統(tǒng)計(jì)圖、粒子地球效果、靈活有趣的網(wǎng)絡(luò)拓?fù)鋱D等。考慮到數(shù)據(jù)可視化可能會(huì)需要深色淺色不同的背景，在數(shù)據(jù)可視化統(tǒng)計(jì)圖的色彩搭配上要注意顏色的拓展性。<br />