如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

它能幫助你從擁擠不堪的海量信息中脫穎而出，同時也反映出你的可信度。這是你的用戶通過初次訪問來了解你品牌的地方。如果他們沒有找到自己喜歡的，幾乎80%的人都會選擇離開你的網(wǎng)站。

這就是為什么在構(gòu)建和設(shè)計網(wǎng)站時，永遠(yuǎn)不要低估用戶滿意度帶來的影響。

接下來要講的是如何設(shè)計一個無可挑剔的、以用戶為中心的網(wǎng)站，來使你的網(wǎng)站轉(zhuǎn)化率飛速上漲。

1. 提供直觀的導(dǎo)航

如果不能引導(dǎo)用戶完成最終購買，那么設(shè)計再精美的網(wǎng)站都是毫無意義的。用戶沒有選擇在你這里購買的一個主要原因是復(fù)雜的網(wǎng)站導(dǎo)航。記住，用戶不希望無休止的點擊和滑動鼠標(biāo)后才能找到他們想要的產(chǎn)品。如果他們發(fā)現(xiàn)自己正將時間浪費在不必要的操作上，就會棄你而去，到你的競爭對手那里。

這也是你想要阻止發(fā)生的事情。

• 創(chuàng)建具有描述性的菜單標(biāo)簽
  使用“產(chǎn)品”或“解決方案”之類的通用選項，無法給用戶帶來任何價值。除了用戶體驗不佳，這樣的標(biāo)簽也不利于你網(wǎng)站的SEO（搜索引擎排名優(yōu)化）。在搜索電商品牌時，沒人會搜“產(chǎn)品”或“我們能做什么”。
• 簡化導(dǎo)航菜單
  菜單項越少，你的潛在客戶就越容易找到他們想要的東西。這也有利于你網(wǎng)站對于搜索引擎排名的優(yōu)化工作，因為更簡單的菜單，會將你主頁的頁面權(quán)威度（Page Authority，該指標(biāo)由Moz軟件公司開發(fā)出，用來預(yù)測單個頁面在搜索引擎中排名的打分系統(tǒng)，分?jǐn)?shù)為0-100。單個頁面所獲分?jǐn)?shù)越高，則表示有越高能力在搜索引擎中獲得靠前的排名）賦權(quán)給你網(wǎng)站中權(quán)威度稍低的頁面。
• 讓用戶在頁面間的跳轉(zhuǎn)更方便
  添加內(nèi)鏈，強(qiáng)化行為召喚，最重要的是，確保從你的主頁進(jìn)入任意子頁面均不超過4次點擊。不管用戶處在哪個頁面，他們都需要知道自己在哪里，菜單欄或搜索欄在哪里，如何回到主頁，以及如何篩選出想要的結(jié)果，等等。

2. 設(shè)計一個令人驚艷的主頁

人們常說不能以貌取人，但我們卻一直都在這么做。在電商的世界中，你的主頁就是顏值。

研究表明，只需0.05秒，一個用戶就能判斷出你的網(wǎng)站是否能夠滿足他們的需求。而且，如果你不能讓他們相信你的網(wǎng)站是可靠的、安全的或足夠有價值的，他們就會在眨眼之間拋棄你的網(wǎng)站。

那么，一個令人驚艷的主頁包含哪些要素呢?

• 一個可靠的產(chǎn)品價值定義，而非只是一句簡單的口號。
  它可以向用戶表明選擇你而非你的對手的主要原因。它由強(qiáng)有力的標(biāo)題、子標(biāo)題、功能列表和視覺要素組成。它傳達(dá)了你的品牌優(yōu)勢，展示了用戶將得到的收獲，且簡潔易懂。
• 展示你的可信度。
  在主頁底部展示用戶評價、合作伙伴、核心產(chǎn)品的特點和優(yōu)勢，或者一些動向。
• 網(wǎng)站頁腳應(yīng)是一個可以讓用戶找到所有你最重要網(wǎng)頁頁面的地方。
  請始終保持鏈接到公司信息頁、用戶幫助頁、社交媒體帳戶頁、聯(lián)系方式和社交媒體詳細(xì)信息，以及核心產(chǎn)品和其余產(chǎn)品種類。
• 讓這一切鏈接通暢無阻。
  不論用戶是想購買產(chǎn)品還是只想了解更多，他們都會想要和你進(jìn)行直接交流。這也就是為什么你需要加一個聊天機(jī)器人、電子郵件地址、點擊呼叫按鈕和社交媒體鏈接，以便于這些潛在客戶找到你。

3. 讓產(chǎn)品詳情頁更易轉(zhuǎn)化

主頁是用來吸引用戶并與他們建立關(guān)系的。但當(dāng)你想把一位訪客變成付費用戶時，體現(xiàn)產(chǎn)品詳情頁重要價值的時刻就到了。它們需要為用戶深度展示你的產(chǎn)品，激發(fā)他們的興趣，并讓他們產(chǎn)生點擊“立即購買”按鈕的欲望。那么，讓我們來一起看看產(chǎn)品詳情頁中最重要的元素都有哪些吧。

• 產(chǎn)品圖片
  有的時候，即便是像“光線不好”這樣的細(xì)微因素也會影響人們對你照片的感覺，并導(dǎo)致他們離開你的網(wǎng)站。確保你的圖片和網(wǎng)站的色調(diào)很好地融合在一起，并保持合理。你拍攝的產(chǎn)品圖片應(yīng)增強(qiáng)你的品牌透明度和信任度，因此展示“正在使用中”的產(chǎn)品是個好主意。不管你賣的是衣服還是健身器材，你的用戶都希望可以輕松想象他們使用產(chǎn)品的樣子。
• 產(chǎn)品信息
  告訴用戶關(guān)于產(chǎn)品他想知的一切信息，以便幫助他做出明智的決定。例如，如果要賣衣服，請列出具體的尺寸、尺碼、面料等。用簡單易懂的語言來解釋產(chǎn)品的特點，以及它是如何解決用戶問題的。如果產(chǎn)品有不同的尺寸或顏色，應(yīng)明確說明。
• 個性化的用戶體驗
  這是所有大型電商品牌都會做的事情。他們會觀察用戶的偏好和購買記錄，為他們提供一個流暢的購買旅程。例如，添加“相關(guān)產(chǎn)品”或“其他用戶也購買了”這樣的選項，可以幫助用戶更快地找到理想產(chǎn)品，并完成購買。你還應(yīng)為用戶展示產(chǎn)品瀏覽歷史，方便他們更便捷地加入購物車。
• 關(guān)聯(lián)銷售
  簡單地說，關(guān)聯(lián)銷售的意思就是說服用戶從你這里購買更多的商品。一旦用戶購買了某款產(chǎn)品，你的網(wǎng)站就展示與其相關(guān)的產(chǎn)品。舉例來說，如果一位用戶購買了無線鼠標(biāo)，你也可以為其展示鼠標(biāo)墊或電池產(chǎn)品。

4. 提供常見問題頁面（FAQ）

如果有用戶不確定是否要從你這里購買產(chǎn)品，那他很可能會在深思熟慮前就離開你的網(wǎng)站。你需要向他們證明這是一個錯誤的選擇，而這正是“常見問題“的切入點。

創(chuàng)建一個頁面去回答用戶最常問的問題，會讓用戶感到高興，將他們的購買焦慮降到，也能夠更快引導(dǎo)他們完成購買。這就是為什么，你需要積極地構(gòu)建FAQ頁面，提供可操作和有用的技巧，甚至通過截圖和圖片的形式來讓答案容易被更多人理解。

一個可靠的FAQ頁面還可以提升SEO（搜索引擎排名優(yōu)化），特別是在語音搜索SEO和本地化SEO盛行的時代。數(shù)據(jù)顯示，22%的搜索者會使用語音搜索在網(wǎng)上查找本地企業(yè)。因此，綜合考慮電商SEO實踐與本地化SEO服務(wù)，對你的電商網(wǎng)站至關(guān)重要。

這就是FAQ頁發(fā)揮首要作用的地方。也就是說，在不損害用戶體驗的情況下，它使你有機(jī)會針對搜索時高頻出現(xiàn)，及具有地區(qū)特征的關(guān)鍵詞，來優(yōu)化FAQ頁面的問題和答案。此外，這也有助于提升你的網(wǎng)站在語音搜索中的排名，因為谷歌經(jīng)常使用FAQ頁面作為語音搜索結(jié)果。

5. 讓訂單流程更友好

你已經(jīng)通過種種努力讓令人驚艷的主頁贏得了用戶的信任，用產(chǎn)品詳情頁頁的優(yōu)質(zhì)文案提升了他們對產(chǎn)品的興趣，現(xiàn)在是時候激發(fā)他們?nèi)ネ瓿勺詈蟮馁徺I流程了。你千萬不能搞砸了這個關(guān)鍵環(huán)節(jié)，因為購買流程是購物流程閉環(huán)的最后一步。

• 不要強(qiáng)迫用戶注冊
  不是所有人都想出現(xiàn)在你的收件人列表中。那么，面對這些希望不注冊就能從你這里購買的用戶時，要怎么做呢？顯然，你應(yīng)該允許用戶自由選擇是否要跳過這一步。這也是你如何減少用戶放棄后的流失，并激發(fā)他們完成購買的一個方法。
• 精簡注冊表單
  如果用戶決定注冊，那么讓他們的體驗盡可能順暢。請去掉所有無關(guān)緊要的表單字段，專注于那些對你來說真正重要的信息，例如手機(jī)號，電子郵件地址，信用卡信息以及收貨地址。要測試表單在移動終端上填寫的友好性，確保用戶可以很容易地在這些設(shè)備上填寫。
• 運(yùn)費透明
  用戶并不喜歡討人厭的“驚喜”，而運(yùn)費就是其中一種。這就是為什么你需要在產(chǎn)品頁上突出運(yùn)費選項，并且告訴用戶產(chǎn)品總價和運(yùn)費，以及預(yù)期送達(dá)時間。
• 建立用戶信任
  用戶早已對愈演愈烈的網(wǎng)絡(luò)攻擊有所防備。令人不快的購買經(jīng)歷，以及他們每天看到的關(guān)于數(shù)據(jù)泄露相關(guān)的消息，都迫使他們變得小心翼翼。所以，當(dāng)用戶在你網(wǎng)站下單之前，他們都想檢驗?zāi)愕降子卸嘀档眯湃巍?br /> 1）首先，你需要從HTTP切換到HTTPS（加密的網(wǎng)絡(luò)傳輸協(xié)議）。Google用一個綠色掛鎖和“安全”標(biāo)簽，來標(biāo)記帶有SSL證書的站點。而只有HTTP的站點會被標(biāo)記為“不安全”。這也適用于那些擁有復(fù)雜的數(shù)據(jù)加密手段和存儲用戶數(shù)據(jù)的有效方式但仍未購買SSL證書電商網(wǎng)站。當(dāng)用戶看到“不安全”的警告時，他們可能會離開你的網(wǎng)站。
  2）在購買頁面上，另一個重要元素就是安全徽章。這展示了你網(wǎng)站的權(quán)威性，并且告訴用戶，他們的敏感數(shù)據(jù)將會被安全地保存在你這里。
  3）最后，寫出一個詳細(xì)的隱私政策，并為它提供一個方便用戶找到的鏈接入口。

總結(jié)

對于電商而言，用戶體驗至關(guān)重要。她會為你積累忠實的老用戶，激勵新訪客轉(zhuǎn)換為付費用戶，并有助于他們向親朋好友傳播關(guān)于你的正面口碑。Jeff Bezos對此有很好的詮釋：

“如果你的確建立了很好的體驗，用戶就會口口相傳?？诒牧α渴菬o比強(qiáng)大的?！?/span>

我希望以上的這些秘訣將可以成為你的堅實基礎(chǔ)，助力你在在電商領(lǐng)域取得成功。

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

B端產(chǎn)品設(shè)計的6大挑戰(zhàn)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

帶來的作品有FY品牌官網(wǎng)與移動端設(shè)計，展示部分界面與交互動效，Gif輸出存在色差，實際情況以高保真視覺界面為準(zhǔn)。

文章來源：UI中國

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

明修棧道C和暗渡陳倉B

1. 初識B端產(chǎn)品和C端產(chǎn)品

C端 Consumer，表示為消費者、個人用戶或終端用戶設(shè)計，直接面向普通用戶提供服務(wù)來幫助他們實現(xiàn)個人需求。B端 Business，它面對商業(yè)和企業(yè)，是為幫助企業(yè)集團(tuán)等實現(xiàn)商業(yè)目的而設(shè)計的軟件、工具或者平臺。

在我們?nèi)粘Ｉ钪?，在手機(jī)上使用的大多是 C 端產(chǎn)品，單一的 C 端產(chǎn)品通常是為了實現(xiàn)單一的需求。比如看網(wǎng)紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等，這些產(chǎn)品有自己的核心功能，其他的功能則是附加的，倘若沒有這些附加功能，雖然用戶體驗感會降低，但并不會影響產(chǎn)品的核心功能。

而面向 B 端的產(chǎn)品，我個人稱之為「暗渡陳倉」，當(dāng)個人用戶為實現(xiàn)個人需求產(chǎn)生了一系列動作，往往伴隨著該需求的另一端也會反饋一系列動作，即 C 端產(chǎn)品的后臺產(chǎn)品線（BtoC），比如淘寶賣家平臺、餓了么商家版等。除此之外，還有面向商家、企業(yè)、業(yè)務(wù)部門提供的企業(yè)級服務(wù)產(chǎn)品，以及面對企業(yè)或者個人提供的平臺級工具產(chǎn)品等。

雖說我們?nèi)粘Ｊ褂玫母嗍?C 端產(chǎn)品，但是 B 端產(chǎn)品對我們的影響也是時時刻刻存在著。C 端產(chǎn)品在明，逐漸改變著現(xiàn)代人的生活方式，B 端產(chǎn)品在暗，間接服務(wù)于用戶，讓一切流程化秩序化，并且具有多個主要功能點。

2. B端和C端產(chǎn)品的區(qū)別

在我看來，C 端產(chǎn)品以消費互聯(lián)網(wǎng)為主，B 端產(chǎn)品以產(chǎn)業(yè)互聯(lián)網(wǎng)為主，C 端更感性，而B 端更理性。

從使用者的角度來說：

• C 端產(chǎn)品關(guān)鍵詞包括免費使用、迅速上手、體驗為王、你能讓我做什么；
• B 端產(chǎn)品的關(guān)鍵詞則是付費購買、上手緩慢、效率第一、你能為我做什么。

從開發(fā)的角度來說：

• C端周期短，B端周期長；
• C端用戶多，B端用戶少；
• C端邏輯簡單，B端邏輯復(fù)雜；
• C端競品較多，B端競品較少；
• C端主戰(zhàn)場是移動端，B端則是 PC 端；
• C端是用戶體驗驅(qū)動，B端是解決問題驅(qū)動；
• C端產(chǎn)品的使用決策權(quán)在用戶手中，而B端產(chǎn)品的使用決策權(quán)則在客戶手中（B端客戶不一定是用戶）；
• C端產(chǎn)品除了產(chǎn)品的體驗以外，也要讓產(chǎn)品更美觀，讓活動更有趣，讓用戶更舒服，產(chǎn)品經(jīng)理有很強(qiáng)的同理心。B端產(chǎn)品的實用性大于美觀性，能切實解決問題、配置資源的 B 端產(chǎn)品才是一個好的 B 端產(chǎn)品，產(chǎn)品經(jīng)理要具有更強(qiáng)的邏輯思維能力。

3. 后臺產(chǎn)品常見分類

后臺產(chǎn)品按其作用可大致分為兩類，一是支撐前臺產(chǎn)品，二是管理各種資源。我認(rèn)為后臺產(chǎn)品應(yīng)當(dāng)是囊括在 B 端產(chǎn)品的范圍之內(nèi)的，常見的類型包括：

• C 端產(chǎn)品的后臺產(chǎn)品線，如淘寶商家版，餓了么商家版，對訂單和用戶進(jìn)行管理，支持 C 端產(chǎn)品的業(yè)務(wù)進(jìn)展。
• 平臺級工具產(chǎn)品，如微信公眾平臺，對文章和讀者的數(shù)據(jù)統(tǒng)計和管理；各大互聯(lián)網(wǎng)公司的開放平臺，如微博開放平臺等。
• 企業(yè)級服務(wù)產(chǎn)品，虛擬主機(jī)系統(tǒng)（VMware），云主機(jī)管理系統(tǒng)（深信服、xensystem、騰訊云）以及各種云SaaS。
• 企業(yè)的業(yè)務(wù)處理平臺，對內(nèi)有考勤、報銷等 OA辦公系統(tǒng)，對外有 CRM 客戶管理系統(tǒng)，ERP 資源及供應(yīng)鏈管理系統(tǒng)。

后臺產(chǎn)品設(shè)計思路

1. 初識后臺產(chǎn)品設(shè)計

說起后臺產(chǎn)品，很容易想到復(fù)雜、龐大、邏輯縝密，而作為設(shè)計師，則苦于競品短缺、架構(gòu)復(fù)雜，設(shè)計的前期工作比設(shè)計本身要復(fù)雜得多等問題。

后臺產(chǎn)品不同于普通用戶所使用的 APP，它在用戶初次使用和短暫時間內(nèi)的認(rèn)知成本是較高的。當(dāng)用戶用慣了一個音樂類的 app，再給他幾個其他的音樂 APP，用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產(chǎn)品則不然。

對于后臺產(chǎn)品來說，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權(quán)限限制，一般來講很難像超級管理員一樣接觸到整體功能；其次，門檻之高，后臺產(chǎn)品的使用者一般都是在該行業(yè)沉淀了很久，所以要對后臺產(chǎn)品進(jìn)行設(shè)計就需要同樣了解該行業(yè)，甚至更能洞察該行業(yè)，業(yè)務(wù)本身的復(fù)雜性質(zhì)決定了后臺產(chǎn)品架構(gòu)也會比較龐大；然后，無論是工廠商家的進(jìn)銷存管理，還是政府醫(yī)院的工作流和業(yè)務(wù)流，乃至企業(yè)內(nèi)部的產(chǎn)品，除了不同行業(yè)都有門檻外，對信息和產(chǎn)品也有「保密協(xié)議」的使命感，所謂「隔行如隔山」，在后臺產(chǎn)品更是如此；最后，后臺產(chǎn)品設(shè)計往往沒有固定的功能架構(gòu)和商業(yè)模式，對于產(chǎn)品經(jīng)理的邏輯思維能力要求更高，設(shè)計師不僅僅是做界面、優(yōu)化流程，也要主動和產(chǎn)品經(jīng)理溝通交流，并對產(chǎn)品進(jìn)行思考和探索。

2. 后臺UI設(shè)計工作流程

后臺 UI 設(shè)計的工作，大體分為三個部分：需求分析、設(shè)計執(zhí)行、數(shù)據(jù)分析。

在需求分析階段，要對產(chǎn)品本身和行業(yè)本身有一些基本的認(rèn)知。要了解產(chǎn)品的基本情況，比如產(chǎn)品目標(biāo)、用戶人群、產(chǎn)品定位、需求分析、功能模塊、主要競品和產(chǎn)品特色。做這個產(chǎn)品是為了解決什么問題？想實現(xiàn)什么目標(biāo)？使用這個系統(tǒng)的用戶有哪些？不同角色的用戶有哪些具體的權(quán)限？是否需要對每一個用戶的行為都生成操作日志？產(chǎn)品有哪些主要的功能模塊？產(chǎn)品的業(yè)務(wù)流程是怎樣的？有哪些同類型的產(chǎn)品？和他們相比我們的產(chǎn)品有什么特色和特點？成功地做出大而全的后臺產(chǎn)品，是整個設(shè)計團(tuán)隊和開發(fā)團(tuán)隊能力的體現(xiàn)，而對很多小團(tuán)隊來說，只能做一些大團(tuán)隊不愿去做的產(chǎn)品，或另辟蹊徑在某些方面做專做精。

在設(shè)計執(zhí)行階段，參照 PM 給出的功能清單做原型和流程的梳理，需要關(guān)注的有當(dāng)前版本規(guī)劃、功能模塊、功能類型、功能描述、任務(wù)優(yōu)先級、完成時間等，交互原型則伴隨著功能描述、規(guī)則判定條件、觸發(fā)條件等內(nèi)容。原型設(shè)計完成，開始做 UI 視覺方面的設(shè)計，而這時后端同步構(gòu)思需求的實現(xiàn)方案。UI 設(shè)計師向前端了解實現(xiàn)框架，方便交接和溝通。當(dāng)界面實現(xiàn)，UI 設(shè)計師應(yīng)該是最早進(jìn)行測試的，力求視覺設(shè)計和代碼實現(xiàn)無誤差。在完成設(shè)計執(zhí)行后，從信息層級、文字、圖標(biāo)、圖片等方面進(jìn)行設(shè)計走查，進(jìn)行多次設(shè)計驗證與測試。

數(shù)據(jù)分析是產(chǎn)品優(yōu)化迭代的重要依據(jù)。進(jìn)行多番測試和評審后交付客戶（或內(nèi)部）使用，根據(jù)產(chǎn)生的具體問題進(jìn)行不斷迭代，且觀察產(chǎn)品能否通過準(zhǔn)確的數(shù)據(jù)反映問題、體現(xiàn)能力，應(yīng)虛心接納使用者的使用建議并嚴(yán)謹(jǐn)思考其合理性，用戶的使用和反饋是優(yōu)化產(chǎn)品的重要途徑。只有達(dá)到了管理和運(yùn)營的指標(biāo)，后臺產(chǎn)品才是真正產(chǎn)生了價值。

3. 制定設(shè)計規(guī)范的作用

為后臺產(chǎn)品制定設(shè)計規(guī)范有哪些作用和好處呢？簡單來說就是對產(chǎn)品好、對自己好、對團(tuán)隊好、對客戶好。

• 對產(chǎn)品：在項目完成第一版較為穩(wěn)定的版本時，著手制定設(shè)計標(biāo)準(zhǔn)，統(tǒng)一公司視覺設(shè)計規(guī)范及某些特定交互設(shè)計規(guī)范。同一個項目會有多個設(shè)計師的參與，規(guī)范化的設(shè)計語言，避免因設(shè)計控件混亂而影響設(shè)計輸出。
• 對自己：組件化同類元素，提高工作效率，建立公司產(chǎn)品的組件庫，以便不同項目的復(fù)用及設(shè)計延展。在同一個項目中也能更好的把控該項目的視覺規(guī)范，提率。
• 對團(tuán)隊：設(shè)計規(guī)范的制定，規(guī)范了設(shè)計團(tuán)隊的輸出，同時方便了與開發(fā)團(tuán)隊的交接和協(xié)作。通過設(shè)計規(guī)范的制定，前端實現(xiàn)也能擁有一套可供復(fù)用和擴(kuò)展的組件庫，助力上下游交接及團(tuán)隊協(xié)作。
• 對客戶：制定設(shè)計規(guī)范的同時需要考慮設(shè)計延展性，為不同客戶的定制化需求提供更的輸出。同時在進(jìn)行產(chǎn)品迭代時，設(shè)計規(guī)范的組件化調(diào)整也大大提高了工作效率。

后臺產(chǎn)品設(shè)計規(guī)范

以下數(shù)值為參考，請結(jié)合特定產(chǎn)品靈活運(yùn)用。

1. 頁面布局

統(tǒng)一尺寸

據(jù)統(tǒng)計，目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 來設(shè)計的話，向上適配或者向下適配誤差會比較小。

適配方案：面向多個客戶，后臺產(chǎn)品設(shè)計功能型頁面的尺寸統(tǒng)一為 1440*900，按照柵格系統(tǒng)原則向上或向下適配。展示型頁面以 1440*900 為主，同時設(shè)計出極端情況（寬度為 1280 以及寬度為 1920）的效果圖，力求實現(xiàn)前端實現(xiàn)效果和高保真設(shè)計圖誤差最小。面向公司內(nèi)部的后臺系統(tǒng)，由于各個職工電腦屏幕是統(tǒng)一采購、統(tǒng)一尺寸，所以開發(fā)適配的分辨率可以統(tǒng)一尺寸進(jìn)行設(shè)計，這個尺寸根據(jù)公司內(nèi)部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。

頁面框架

頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側(cè)菜單欄、主體內(nèi)容三大區(qū)域，其中頂部菜單欄、左側(cè)菜單欄為固定結(jié)構(gòu)，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行動態(tài)縮放；上下欄布局包括頂部菜單欄和主體內(nèi)容兩大區(qū)域，其中頂部菜單欄為固定結(jié)構(gòu)，主體內(nèi)容進(jìn)行動態(tài)縮放且需定義主體內(nèi)容左右兩邊空白區(qū)域最小值；左右欄布局時，左側(cè)菜單可收縮展開，收縮狀態(tài)下固定寬度。

柵格布局

柵格系統(tǒng)的使用是為了解決自適應(yīng)和響應(yīng)式問題，從而更好地進(jìn)行產(chǎn)品設(shè)計和產(chǎn)品開發(fā)。響應(yīng)式柵格采用 24 列柵格系統(tǒng)實現(xiàn)，以滿足 2，3，4，5，6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進(jìn)行動態(tài)縮放。

需要柵格化處理的內(nèi)容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。

谷歌規(guī)定模塊和結(jié)構(gòu)之間要以 8px 為基準(zhǔn)，布局間相對間距可采用 8px 以及 8 的倍數(shù)，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準(zhǔn)。柵格布局是為了輔助設(shè)計，靈活運(yùn)用，不要被它所局限。

尺寸設(shè)定

一般在整體區(qū)域左上角放置產(chǎn)品 LOGO 及產(chǎn)品名稱，大部分系統(tǒng)頂部欄高度 48+8n，側(cè)邊欄寬度  200+8n。我常用的是頂部欄高度 56px，側(cè)邊欄寬度 200px，側(cè)邊欄收縮狀態(tài)寬度 56px，右側(cè)的側(cè)浮窗寬度 400px。

相對間隔

定義主體內(nèi)容的上下左右邊距，定義主體區(qū)域內(nèi)各模塊的邊距及安全寬度，超出內(nèi)容區(qū)域的部分采用區(qū)域內(nèi)滾動或整屏滾動，視情況固定導(dǎo)航欄。

2. 標(biāo)準(zhǔn)色

顏色分為品牌色、輔助色、中性色。根據(jù)不同產(chǎn)品的不同需求，可能也會將統(tǒng)計圖、標(biāo)簽等進(jìn)行統(tǒng)一標(biāo)準(zhǔn)色設(shè)定。

品牌色即產(chǎn)品主色，產(chǎn)品主色的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品直接對外的形象。品牌色要根據(jù)產(chǎn)品特性、用戶使用場景、產(chǎn)品定位等進(jìn)行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應(yīng)用場景包括操作狀態(tài)、按鈕色、可操作圖標(biāo)等。

輔助色用于提示其他場景，比如成功、失敗、警告、無效等。

中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現(xiàn)不同的層級結(jié)構(gòu)。

其他色如統(tǒng)計圖、數(shù)據(jù)可視化、多個標(biāo)簽的不同配色方案根據(jù)項目情況單獨設(shè)定。

3. 標(biāo)準(zhǔn)字

后臺系統(tǒng)常用的字體：windows 系統(tǒng)，中文 Microsoft YaHei，英文 Arial；Mac 字體，中文 PingFang SC，英文 Helvetica；除此之外可以選擇的字體還有 segoe UI、思源黑體、Hiragino Sans GB等。

后臺系統(tǒng)中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。

行高設(shè)定，根據(jù)文字大小及使用場景設(shè)置行高，一般行高=文字大小+6px/8px。

4. 圖標(biāo)

圖標(biāo)是 UI 設(shè)計中重要組成部分，一般分為功能圖標(biāo)和應(yīng)用圖標(biāo)，以圖形的方式傳達(dá)概念，可以降低理解成本，使得界面更加協(xié)調(diào)美觀。在后臺產(chǎn)品中，圖標(biāo)的功能則更偏向輔助性，輔助用戶對功能的認(rèn)識。

除了某些常用的圖標(biāo)，有一些專業(yè)性的操作和詞匯則需要設(shè)計師進(jìn)行繪制，現(xiàn)在比較方便的方法是在 iconfont 提供的圖標(biāo)模板上用 AI 繪制，畫板 1024*1024，提供圓形、正方形、矩形形狀。圖標(biāo)尺寸按照 8 的倍數(shù)進(jìn)行延展，繪制完成后生成 svg 格式文件，提交到阿里巴巴矢量圖標(biāo)庫的項目組里，方便前端調(diào)用，調(diào)整大小和顏色更為方便，且能夠優(yōu)化系統(tǒng)內(nèi)存和性能。

5. 按鈕

按鈕是后臺產(chǎn)品進(jìn)行交互設(shè)計是重要元素，提供給用戶進(jìn)行點擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。

按鈕的交互狀態(tài)包括默認(rèn)、懸停、點擊和不可用。

按鈕根據(jù)需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照 8 的倍數(shù)設(shè)定。如高度分別設(shè)定為 24、32、40px。

規(guī)范整理時要規(guī)定不同類型按鈕的寬高、圓角及文字大小，同時還要將按鈕的不同狀態(tài)展現(xiàn)出來。

填充按鈕之間間距最小為 10px。

6. 導(dǎo)航

導(dǎo)航的類型有很多種，常用的比如頂欄菜單、側(cè)欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標(biāo)簽頁、膠囊菜單、徽標(biāo)數(shù)等。

各類導(dǎo)航中的字體大小可進(jìn)行統(tǒng)一設(shè)定。

頂欄菜單多為一級菜單，點擊切換，或作為下拉菜單的父級，將子級菜單合理分類。

側(cè)欄菜單為垂直導(dǎo)航菜單，可以內(nèi)嵌子菜單。

下拉菜單的觸發(fā)方式一般有鼠標(biāo)懸停和鼠標(biāo)點擊兩種。

步驟條引導(dǎo)用戶按照流程來完成任務(wù)，一般步驟不得少于兩步。

分頁的高度設(shè)定為 24px、30px、32px，根據(jù)應(yīng)用場景適當(dāng)增減內(nèi)容，比如設(shè)定每頁展示數(shù)據(jù)的條數(shù)、跳轉(zhuǎn)至指定頁等。

面包屑用于說明層級結(jié)構(gòu)，使用戶明確當(dāng)前所在位置，并且可以回到任一上級頁面。

徽標(biāo)數(shù)用來通知用戶當(dāng)前有未讀消息，一般出現(xiàn)在圖標(biāo)的右上角或者跟在文字后面。

7. 表單

表單多由一條或多條列表項組成，單一列表項的類型有字段輸入框、條件選擇器。

字段輸入框的標(biāo)題和輸入框分布方式包括左右、上下、無標(biāo)題。左右分布是常見的對齊方式，比較適合 PC 端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標(biāo)題經(jīng)常應(yīng)用在登錄注冊，雖然減少了面積，但是增加了理解難度。

輸入框的交互狀態(tài)包括默認(rèn)、輸入結(jié)果、提示錯誤、禁用、獲取焦點。

輸入框的尺寸可按照8的倍數(shù)進(jìn)行設(shè)定，比如 24px、32px，也可根據(jù)系統(tǒng)實際情況進(jìn)行設(shè)定，我常用的輸入框高度為 30px，寬度視情況而定，無圓角。上下布局的多個輸入框上下間距為 20px，有錯誤提示時候豎向增加 10px 或橫向顯示在輸入框右側(cè)（預(yù)留出位置）。

表單中標(biāo)題文字左對齊，輸入框左對齊，標(biāo)題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標(biāo)題文字右對齊，輸入框左對齊，也是常用的方式。輸入框內(nèi)正文字體 14px，文字和左右兩邊邊框的邊距 10px。

選擇器包括單選、多選、時間選擇、開關(guān)切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復(fù)選框多為方形。

搜索框和選擇框的高度為 30px 或按照 8 的倍數(shù)自行設(shè)定，通常和輸入框保持一致。搜索框距離右側(cè)按鈕 4px，內(nèi)部文字 14px。

單選多選框尺寸 16*16px，多個選項橫向排列間距 16px，縱向排列間距 8px。

開關(guān)按鈕外框 40*20px，內(nèi)部圓形 16*16px。

8. 表格

表格在后臺產(chǎn)品 UI 設(shè)計中占比非常大，用來展示數(shù)據(jù)、統(tǒng)一管理、作為詳情入口，是最清晰、的形式之一。在設(shè)計規(guī)范中需設(shè)定表頭高度、表格行高、表格列寬范圍，同時也包括表格中的按鈕樣式、標(biāo)簽樣式。

表格主要分為五大區(qū)域：選擇搜索區(qū)、操作區(qū)、表頭、正文、底欄。選擇搜索區(qū)放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區(qū)指各種對表格內(nèi)容進(jìn)行增刪改查、批量處理、配置列的動作；表頭展示列標(biāo)題，一般具有排序功能；正文主要展示各種各樣的數(shù)據(jù)，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內(nèi)操作；底欄顯示分頁、總數(shù)統(tǒng)計等。

表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數(shù)據(jù)在第一列增加多選框。

行高

表格行高可設(shè)置為表格內(nèi)字體高度的 2~3 倍，主表格會間隔顯示不同顏色，用于區(qū)分不同行數(shù)據(jù)、加強(qiáng)視覺流引導(dǎo)，展開單行的內(nèi)置表格可采用純色，選中行應(yīng)有視覺上的反饋。表頭要和表格內(nèi)容有視覺上的區(qū)分。表格行高可采用 36、40、48、60 等。

行數(shù)

表格行數(shù)太多加載速度會降低，延長用戶等待時間；行數(shù)太少會導(dǎo)致用戶不斷翻頁，降低使用效率。比較合適的默認(rèn)表格行數(shù)是 20 或 50，用戶可以根據(jù)自己需求選擇默認(rèn)的行數(shù)。設(shè)定行數(shù)之后，如果每頁行數(shù)多于每屏行數(shù)，可在表格內(nèi)引入滾動條，這時可以固定表頭滾動內(nèi)容。

列寬

列寬根據(jù)內(nèi)容字段長短需要有不同且合理的默認(rèn)值，使得表格字段有良好的展示效果。列內(nèi)容的長度固定時，列寬應(yīng)大于固定寬度（比如時間、MD5、SHA1）；列內(nèi)容不固定時，能預(yù)判最大寬度的按照最大寬度設(shè)定列寬（比如IP地址、MAC地址、姓名），不能預(yù)判最大寬度的設(shè)定列寬按照常用寬度，多于內(nèi)容省略以「…」展示，鼠標(biāo)懸停出現(xiàn)完整內(nèi)容（比如詳情、描述）。

列數(shù)

表格列不應(yīng)過多，列數(shù)比較多的情況下應(yīng)該合理進(jìn)行合并、隱藏、刪除或進(jìn)行優(yōu)先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動條，根據(jù)實際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

對齊方式

表格內(nèi)的文本應(yīng)按照文本類型不同進(jìn)行統(tǒng)一規(guī)范，如金額類數(shù)值保留相同位數(shù)小數(shù)，SHA1 雖然是一串?dāng)?shù)字但是其實那并不是數(shù)據(jù)而是一串編碼，所以可以像文本一樣左對齊。根據(jù)文本內(nèi)容不同，對齊方式也應(yīng)靈活調(diào)整，可采用文本左對齊、數(shù)據(jù)右對齊、金額小數(shù)點對齊的方式。數(shù)據(jù)前面有標(biāo)簽的，將標(biāo)簽前置對齊。類似 IP 地址、MD5、SHA1、域名這樣的信息，也可以根據(jù)產(chǎn)品需要在文本前面增加「復(fù)制」圖標(biāo)，方便用戶調(diào)用。

詳情入口

表格內(nèi)部數(shù)據(jù)的詳情入口，將能點擊下鉆查看詳情的內(nèi)容以不同顏色表示，同時在表格行最后一列操作按鈕部分放置一個查看按鈕。

9. 反饋

包括彈框、側(cè)滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態(tài)等。分為模態(tài)框和非模態(tài)框，區(qū)別是是否會打斷用戶工作流。

彈框又稱對話框，是疊加在應(yīng)用主窗口上的彈出式窗口，以對話的方式使用戶參與進(jìn)來。

彈框

彈框出現(xiàn)時，主題內(nèi)容增加一層遮罩 #000，透明度 50%，避免使用雙層彈框，可同時采用有關(guān)閉圖標(biāo)的彈框和無關(guān)閉圖標(biāo)的彈框，引導(dǎo)用戶對內(nèi)容進(jìn)行正確操作。如果設(shè)定系統(tǒng)內(nèi)所有彈框均可以點擊彈框外區(qū)域關(guān)閉， 則需要為用戶新增或編輯內(nèi)容的彈框彈出二級確認(rèn)的彈框，或者再次進(jìn)行交互梳理。

側(cè)滑框

側(cè)滑框又稱抽屜，出現(xiàn)在右側(cè)，固定寬度 400px，高度覆蓋在主題內(nèi)容之上，點擊側(cè)滑框以外的區(qū)域則收起側(cè)滑框。

骨架屏

為某些特定數(shù)據(jù)提供數(shù)據(jù)加載等待時的占位圖形組合。

全局提示

建議停留時間 3s，可根據(jù)文字字?jǐn)?shù)調(diào)整停留時間，文字內(nèi)容限制在 30 以內(nèi)。

警告提示

用不同顏色和樣式展示需要關(guān)注的信息。

通知提醒

消息通知和警告信息用通知提醒框，單個消息從頁面右側(cè)以抽屜的方式劃出，用戶可手動關(guān)閉，或停留 3s 后自動關(guān)閉。

10. 缺省狀態(tài)

繪制不同類型的情感化插畫表示缺省狀態(tài)，如404、500、暫時沒有數(shù)據(jù)、沒有新消息等。

頁面需要一個默認(rèn)的底色，錯誤文字使用 14px，與情感化插畫間距 20px，與按鈕間距 30px。

11. 數(shù)據(jù)可視化

數(shù)據(jù)可視化部分可能是后臺產(chǎn)品中對視覺設(shè)計要求較高的部分，使用情境為各類統(tǒng)計圖、大屏展示頁面等。

功能型頁面的數(shù)據(jù)可視化可以引入圖形化設(shè)計組件，Echarts、G2、d3等；展示型頁面的數(shù)據(jù)可視化則可以做得更有趣，比如立體的統(tǒng)計圖、粒子地球效果、靈活有趣的網(wǎng)絡(luò)拓?fù)鋱D等。

考慮到數(shù)據(jù)可視化可能會需要深色淺色不同的背景，在數(shù)據(jù)可視化統(tǒng)計圖的色彩搭配上要注意顏色的拓展性。

經(jīng)驗觀點及設(shè)計資源

1. 設(shè)計前端一家親

• Ant Design 的設(shè)計組件，實現(xiàn)框架 React、Angular
• Element 的設(shè)計組件，實現(xiàn)框架 Vue 2.0、 Angular
• iView 的設(shè)計組件，實現(xiàn)框架 Vue
• 飛冰的設(shè)計組件，實現(xiàn)框架 React
• Layui 的設(shè)計組件
• G2 可視化圖形組件
• Echarts 可視化圖形組件
• d3.js 可視化圖形組件
• GridGuide 在線柵格化計算工具

2. 書籍推薦

• 《B端產(chǎn)品經(jīng)理必修課》
• 《交互設(shè)計精髓》
• 《U一點料·Ⅱ》
• 《簡約至上：交互式設(shè)計四策略》

3. 文章和作品推薦

• 《如何更好地使用柵格系統(tǒng)》 Christie Tang
• 《柵格系統(tǒng)及其在后臺設(shè)計中的應(yīng)用》 UXBoy
• 《新人來收！10分鐘幫你掌握柵格系統(tǒng)基礎(chǔ)知識！》 蝸牛醒
• 《原子化設(shè)計-后臺產(chǎn)品組件庫建設(shè)》 MrLei
• 《如何寫后臺系統(tǒng)UI設(shè)計規(guī)范 》 八戒Maria
• 《B端產(chǎn)品設(shè)計》 千夜Ryan_Vision
• 《面向企業(yè)中后臺產(chǎn)品的設(shè)計系統(tǒng)大合集》 Z清暉
• 《B端網(wǎng)頁設(shè)計規(guī)范全方位匯總》 BruceXLS
• 《如何利用走查表驅(qū)動設(shè)計改版》 可樂Cola
• Michal Parulski 的后臺可視化設(shè)計作品
• zoeyshen 的后臺可視化設(shè)計作品
• 三魚先生的數(shù)據(jù)可視化設(shè)計作品

總結(jié)

不管是做 C 端產(chǎn)品還是 B 端產(chǎn)品，都是為了實現(xiàn)用戶的需求、幫用戶解決問題。

剛接觸后臺產(chǎn)品的時候，最希望能把產(chǎn)品做的炫酷、美觀，工作中慢慢地發(fā)現(xiàn)項目的背后思考更為重要，產(chǎn)出的設(shè)計成果也應(yīng)該有理有據(jù)、支撐整個設(shè)計體系。網(wǎng)上供大家使用和學(xué)習(xí)的資源非常多，對一些公司來說、專門去制定一套自己的后臺設(shè)計規(guī)范不免顯得費時費力，合理引入 antdesign 和 element 等開源的設(shè)計組件，會使得設(shè)計師以及前端事半功倍，有助于設(shè)計師把更多的精力投入到沉淀行業(yè)知識、研究產(chǎn)品架構(gòu)、梳理交互方式和創(chuàng)新視覺表現(xiàn)上。

在后臺產(chǎn)品的設(shè)計過程中，更應(yīng)該把寶貴的時間用在更值得關(guān)注的事物上，讓設(shè)計師能夠輔助業(yè)務(wù)挖掘，從趨于相同的表象中找到產(chǎn)品獨有的閃光點，從而切實解決問題和實現(xiàn)價值。

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

常見的網(wǎng)頁設(shè)計、文章設(shè)計錯誤
本文來自阮一峰分享

 1.內(nèi)容未按邏輯分成塊

用戶可以根據(jù)邏輯塊輕易的獲取信息。

具體做法為：將padding設(shè)置為120px-180px，同時不同的邏輯塊使用不同的背景。

2.每個邏輯塊的空白大小不一致 

對于每個邏輯塊，需要設(shè)置同等大小且適宜的空白。否則網(wǎng)頁看起來會很混亂，作者不會對每個邏輯塊同等對待。



 

3.Padding不能設(shè)置過小，否則用戶無法將內(nèi)容分為邏輯塊

 為了這點，插入大的空白（至少120px），以使內(nèi)容按邏輯塊分開。





4.背景圖片和文字 應(yīng)該對比鮮明

 


5.在一頁中，樣式過多

太多不同 的排版和樣式將會使得頁面不太專業(yè)以及難以閱讀。

解決的方法是，以字體為例，設(shè)置一種字體，字體為正常或粗體（保證在兩種不同樣式之內(nèi)）



 

6.背景顏色塊過于狹窄




7. 在一個狹窄的列中，放入了過多的文字

這導(dǎo)致用戶閱讀需跳很多行，整體看起來也不行。推薦的做法為，減少列的數(shù)量，精煉文字。

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

環(huán)顧身邊常見的優(yōu)秀設(shè)計很多都使用了柵格系統(tǒng)，你可能非常贊同在界面中使用柵格系統(tǒng)，但卻沒有人告訴你應(yīng)該如何使用它們。

印刷中也會用到柵格，但就本文而言，我主要想討論的是用于PC和移動設(shè)備上的柵格系統(tǒng)設(shè)計。

紫色塊放內(nèi)容

內(nèi)容塊包括文本，圖片或者是兩者的組合形式，背景顏色實際上不能算是內(nèi)容元素，除非是作為文本或者圖片的容器。

上圖中的粉色塊作為柵格中的列，它們構(gòu)成了內(nèi)容寬度。一般來說，列寬是不會變的，只是列數(shù)會隨著設(shè)備的不同而變化，比如從PC端的12列變?yōu)槠桨咫娔X上的8列，然后在移動端變?yōu)?列。嚴(yán)格來說，你其實可以定義任何想要的列寬，但大多數(shù)情況下的網(wǎng)格列寬都設(shè)置在60-80px之間。選擇合適的列寬是最重要的，因為它是內(nèi)容寬度的主要決定因素。

水槽是在列與列之間的空間。20px是一個常見的尺寸設(shè)置，當(dāng)設(shè)計塊狀或者卡片元素的網(wǎng)格時，這種間距非常重要，比如做照片類設(shè)計的時候。有些系統(tǒng)會隨著設(shè)備寬度的增加而增加水槽的寬度，但也可以保持固定。

外邊距也稱為外水槽，是內(nèi)容寬度之外的空白區(qū)域。為了更方便的設(shè)計，外邊距會隨著設(shè)備寬度的增加而增加。移動設(shè)備的邊距通常為20-30px，而在平板電腦和PC端，這個間距通常會差異很大。

下面會介紹一些基本的準(zhǔn)則，但要明白在實際設(shè)計中其實沒有任何硬性的規(guī)定。

1. 內(nèi)容元素必須位于若干列上

其核心思想是內(nèi)容元素必須位于若干列上，你可以任意分割，比如6x2,3x4,4x3。下面的例子中，我展示了不同分割方式設(shè)計的信息卡片。

不同柵格設(shè)計展示

很棒，這看起來很簡單對吧。有的時候，你想把內(nèi)容嚴(yán)格的套用在柵格布局上，會發(fā)現(xiàn)可能不夠美觀，比如下面的例子。

如果我們把內(nèi)容都放在網(wǎng)格上，文本內(nèi)容會顯得很長，最佳的位置是不嚴(yán)格在任何網(wǎng)格上，這也是可以的，只要理解了整個元素實際上是一個不可見的，更大的容器就行。

這也是4x3的布局，只是給了它內(nèi)部不可見的填充。當(dāng)把這樣的設(shè)計稿給到開發(fā)時，他們就能很直觀的知道這一點，所以這更利于去理解如何實際地分配好內(nèi)容。

2. 不要將內(nèi)容元素留在水槽中

內(nèi)容元素應(yīng)該要在列寬以內(nèi)，而不能流出在水槽之外，這樣會違背柵格化的目的。

3. 只要父級元素對齊柵格，子級可以不完全對齊列

有些時候，你想要將設(shè)計和卡片分成兩部分，一半是圖片，一半是文字。你可能遇到這樣尷尬的情況，圖片沒有完全落在一列上，文字被迫以一種奇怪的方式自適應(yīng)。其實不用擔(dān)心，只要“父”容器對齊柵格，這就沒有關(guān)系。

父子級內(nèi)容柵格排版示意

4. 除非有意，否則不要把列作為外部填充

所有重要內(nèi)容都應(yīng)該與柵格列寬相適應(yīng)。一開始會覺得奇怪，因為如果不習(xí)慣使用網(wǎng)格，可能會把網(wǎng)格寬度當(dāng)成全部內(nèi)容區(qū)域，所以還需要給它設(shè)定一定的內(nèi)邊距。此時外邊距就起到了留白的作用，它們充當(dāng)了內(nèi)邊距。不要在網(wǎng)格內(nèi)部利用列寬當(dāng)成內(nèi)邊距，而是要與網(wǎng)格最外面保持對齊，利用網(wǎng)格外的間距來當(dāng)做留白區(qū)域。根據(jù)代碼實現(xiàn)方式，要么網(wǎng)格內(nèi)的內(nèi)容按比例縮放，邊距固定，要么外邊距與內(nèi)容同時縮放。

正確的內(nèi)容填充方式和不正確的把柵格當(dāng)做邊距

所以如果有人說“我需要一個1200px寬的設(shè)計”，這并不意味著你的設(shè)計就是1200px寬，這其實是說設(shè)計內(nèi)容寬度在1200px的畫布內(nèi)，實際內(nèi)容占位是960px，這樣就會有空間留出外邊距。

5. 完全出血的元素或紋理圖形應(yīng)該設(shè)計在畫板邊緣，并理解為出血的列網(wǎng)格

這個頁面布局的頂部圖片被設(shè)計成完全出血

這是一個例外的規(guī)則，當(dāng)背景顏色或者圖片在完全出血的情況下，開發(fā)同學(xué)會把它理解為一個全屏的內(nèi)容元素。

如果設(shè)計的是裝飾元素之類的內(nèi)容，可以接受它被裁切掉，此時也可以脫離柵格化的設(shè)計。

一些圖片和文字的出血設(shè)計

頁眉和頁腳有時也有例外，它們不被認(rèn)為是內(nèi)容的一部分。有些設(shè)計將它們固定在瀏覽器邊緣，有些則喜歡保持內(nèi)容的寬度，這取決于自身功能和內(nèi)容的情況。將它們保持在內(nèi)容寬度內(nèi)的好處是，當(dāng)用戶在寬屏顯示器上看頁面時，不需要來回掃視；將它們固定在瀏覽器上的好處是可以為導(dǎo)航元素提供更多的空間。

柵格化布局如何做到響應(yīng)式

圖片來源Intuit

在傳統(tǒng)的柵格化系統(tǒng)設(shè)計中，列的寬度和水槽的寬度是保持不變的，只是列的“數(shù)量”發(fā)生變化。為什么要這么處理呢？這是為了讓設(shè)計更簡單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會顯示兩張卡片，并把第三張卡片進(jìn)行折行顯示在第二行上。不需要做任何的調(diào)整，因為已經(jīng)知道它位于第四列上了。在手機(jī)上，答案也很簡單，只需要一張卡片，其他的就會自動堆到下面的行中。如果你愿意，也可以變得有創(chuàng)意，選擇只在手機(jī)上顯示一張卡片，或者做一個水平滾動。這些列的自適應(yīng)對于代碼來說就是很簡單的參考。

實際上，web必須呈現(xiàn)任何瀏覽器的寬度。例如，有一個大顯示器，它可以看到1600像素寬的東西，實際上pc端的網(wǎng)頁設(shè)計是1200px寬，平板電腦上是768px寬，手機(jī)是360px寬。所以你會看到一個小于1200px的設(shè)計，有大量的留白。但是當(dāng)你的瀏覽器再小一個像素，1199px，會發(fā)生什么呢？

固定網(wǎng)格

固定柵格示意

如果開發(fā)那邊寫了一個固定柵格，當(dāng)你從桌面縮小到平板電腦，就像是在900px的瀏覽器寬度時，你不會看到任何變化，設(shè)計就像是被剪掉了一樣。但當(dāng)達(dá)到768px臨界點時，設(shè)計馬上就會改變，平板電腦上的顯示效果就會好起來。如果繼續(xù)減小這個值，同樣的事情也會發(fā)生，在到達(dá)另一個臨界值之前，設(shè)計看起來都是不變的。

流動網(wǎng)格

流動網(wǎng)格的示例

現(xiàn)在來看看流動網(wǎng)格的特點，當(dāng)窗口縮小時，內(nèi)容將動態(tài)的發(fā)生變化，文本會進(jìn)行換行，元素也會變窄。然而，這些元素在內(nèi)容寬度縮小到下一個臨界值之前，布局是不會變化的。

所以我想說的是，設(shè)計的臨界值只是一個更改布局的參考點。這就是為什么列寬和水槽在網(wǎng)格中不會改變的原因，因為我們想讓設(shè)計師在考慮布局時能夠更容易地創(chuàng)建一致性。

混合網(wǎng)格

在實際項目中，使用流動網(wǎng)格和固定網(wǎng)格的組合也是常見的做法。網(wǎng)站通常是流動網(wǎng)格，因為它要去適應(yīng)各種不同終端的大小。

一些做的很酷的柵格系統(tǒng)

不需要太死板地去堅持傳統(tǒng)柵格套路，12、8、4這樣的分布，甚至不需要20px的水槽。下面是一些在設(shè)計中使用柵格系統(tǒng)做的很棒的設(shè)計靈感。

Invision’s Genome Project

可以看到，他們的設(shè)計故意不去使用任何的水槽，所以看起來是無縫的。

這個網(wǎng)站不僅設(shè)計的很好，他們還利用了在設(shè)計中展示他們自己的柵格系統(tǒng)來讓整體的設(shè)計變得更加酷炫。

Dropbox Design

他們沒有設(shè)計水槽和外邊距，相反，整個頁面被分成兩半，然后將內(nèi)容填充到這兩部分。

Wordpress

Wordpress創(chuàng)建賬號頁面

使用網(wǎng)格的方式取決于你自己。你可以在主要內(nèi)容部分使用網(wǎng)格，次要內(nèi)容則不使用。在Wordpress的例子中，頁面中間的部分使用柵格化設(shè)計，左側(cè)的側(cè)邊欄則沒有使用。

The Mockup Club

內(nèi)容和網(wǎng)格也并不總是從中間開始，對于模型網(wǎng)站，內(nèi)容在左邊也未嘗不可。

Instagram

我非常確定的說，Instagram的PC端是用上了6列柵格布局。

要點總結(jié)

寫這篇文章的目的是想提供一些關(guān)于如何在響應(yīng)式設(shè)計中使用柵格系統(tǒng)。我知道對于我自己來說，我花了很多年的時間寫了大量的代碼來理解網(wǎng)格是如何工作的。我在YouYube上看了很多視頻，也閱讀了大量的文章，但每個人都在關(guān)注它為什么重要，卻不去注重到底怎么在自己的項目中使用這些原則。

你要做的最好的事情就是從現(xiàn)在開始注意那些優(yōu)秀設(shè)計是如何對齊元素的，你將會開始看到這些模式。為了幫助理解，這里有一些設(shè)計系統(tǒng)概述了它們的網(wǎng)格使用：

Google’s Material Design System

Intuit’s Design System

IBM’s Carbon Design System

…And here’s huge list of other systems you can look through

在完全理解了網(wǎng)格的工作原理之后，我已經(jīng)成為了一名更好的設(shè)計師，因為我知道我的設(shè)計將如何在臨界值之間進(jìn)行轉(zhuǎn)換。我也可以落地我的設(shè)計，使它們能夠有一個完美的像素對齊。這樣的規(guī)范帶來了更一致，更簡潔的設(shè)計，當(dāng)用戶從一個界面到另一個界面流轉(zhuǎn)時，這真的提升了產(chǎn)品的檔次。我建議在你的設(shè)計中去應(yīng)用這些網(wǎng)格，并和開發(fā)一起，以相同的方式將它們落地，這將會是一個非常不錯的進(jìn)步。

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計