作者 | 百度搜索用戶體驗中心
《Web設計指南》分為設計原則、基礎規范兩方面主要內容，同時會提供相應的實際案例及資源下載。歡迎關注OpenWeb開發者，訂閱《Web設計指南》。
前言
《Web設計指南》是專門為廣大Web內容生態提供一套簡單實用的設計指南，目的是提升設計與開發的效率及質量，為廣大用戶提供優質的用戶體驗。
Web內容數以千億涵蓋生活各個方面，除了穩定流暢的瀏覽，優質的內容及服務，也需要高質量的交互及視覺體驗。基于百度新使命以及百度搜索開放的生態特征，我們提供適合第三方的設計指南與直觀的案例參照。
《Web設計指南》會根據Web生態的發展不斷更新優化，但是指南中的設計原則仍然相對穩定，具有持久性。設計原則包括：通用一致、簡潔清晰、高級精致、智能快捷，本文將為大家介紹簡潔清晰原則。
簡潔清晰原則
去形式化做減法，突出內容盡可能去掉不必要的裝飾和形式，用清晰簡潔的設計形式來表達功能、交互及內容。
在頁面開發設計中，同一頁面展現盡可能多的內容通常不是最佳的設計，克制信息展現的數量，明確信息層次，突出主要內容。用戶在搜索相關場景下希望快捷準確的獲取相關信息，復雜或過量的信息容易讓用戶失去耐心，影響用戶的使用效率，也會讓頁面的設計看起來擁擠，影響頁面性能和設計品質。
做減法，保證清晰簡潔是優質設計區別于普通設計的關鍵因素之一。
簡潔是永遠不會過時的設計原則，在AI時代更顯重要，簡潔的設計不是不考慮功能和內容的復雜性，而是充分理解復雜的信息，對其進行有效分析，區分層級，用簡潔清晰的形式來表達。
簡潔清晰原則和扁平化設計風格相匹配，具體如下：
采用扁平化的圖形、按鈕或圖標，減少不必要的色彩，漸變，材質以及與內容無關的圖形元素。
保證頁面整潔，信息層次區分明確，區塊劃分明確，減少不同字體及樣式。
簡化信息，盡可能減少不必要的交互和步驟。
設計案例 01
設計案例01：減少背景色或背景圖對主體內容的干擾，克制使用大面積顏色，控制信息文案的長度，突出主體信息。
設計案例 02
設計案例02：盡可能減少不必要的浮層，彈窗打斷用戶的操作與瀏覽，彈層應該盡可能簡潔容易讓人理解，彈層分為模態和非模態，需要用戶進行確認或進行選擇的可以采用對話框形式，無需用戶確認和操作僅用來提示用戶的可采用toast形式。
設計案例 03
設計案例03：背景簡潔、主體突出的圖片更能傳達主要信息，克制使用不同字體及漸變材質效果
設計案例 04
設計案例04：減少內容區域被浮層干擾遮罩，突出主體信息，保證可閱讀性，保持頁面整體簡潔清晰。
設計案例 05
設計案例05：注意移動端下拉選擇的使用，例如二選一可以采用復選框 （check box） 或 切換按鈕（toggle button）。
設計案例 06
設計案例06：注意移動端簡化下拉交互操作，例如設定提醒日期時，選擇日期的交互操作。
設計案例 07
設計案例07：選擇簡潔的布局和版式，注意移動端的頁面適配。
設計案例 08
設計案例08：注意移動設備不同屏幕密度的字號適配，避免字號使用不當影響信息展現。
設計案例 09
設計案例09：注意移動設備不同屏幕密度的行間距適配，默認字體設置。不同設備和操作系統的字體展現效果可能存在差異。
Brilliant Open Web
BOW（Brillant Open Web）團隊，是一個專門的Web技術建設小組，致力于推動 Open Web 技術的發展，讓Web重新成為開發者的首選。
BOW 關注前端，關注Web；剖析技術、分享實踐；談談學習，也聊聊管理。
關注 OpenWeb開發者，回復“加群”，讓我們一起推動 OpenWeb技術的發展！
