2022-7-19 鶴鶴
對于B端來說，可能很多UI和前端喜歡直接套用Ant Design或Element ui組件規范；因為之前企業要求并不高，但是隨著市場和環境的發展，企業對B端越來越重視，這些模版太類同，顯然就太爛大街了。隨后字節推出Arco Design、騰訊推出企業級設計體系TDesign、有贊推出Zan Design，很多大廠都推出了適合自己產品的模版和規范，給了我們許多借鑒，能讓我們快速作出一個不出錯的方案。不過企業、市場的要求顯然不止于此，我們的設計追求也不止于此。那么我們如何才能擺脫套模版，提高界面的精致度，提升界面的交互體驗呢？
為啥要搭建設計系統？設計系統對我們開發團隊中誰有指導作用？
◆ 設計系統可以保證我們產品風格的統一性，降低用戶對新產品適應時間和學習成本；對UI設計輸出效率有很大的提高，在團隊協同中可以大大的減少無效溝通，節約時間成本
◆ 在開發團隊中，設計系統對UI、交互、前端、測試等崗位的工作都有一定的指導作用
設計原則是傳統智慧的沉淀與未來趨勢的結合體，能夠幫助我們更好的進行設計活動時代在進步，設計原則也必然需要不斷的更新以適應發展新的設計原則要求界面更友好，操作更加人性化。
這里我歸納了8條原則僅供大家借鑒學習:
◆ 可用性：有助于檢查用戶是否能夠輕松地完成任務、產品是否正常運行以及是否完成工作
◆ 易用性：易用是首要考慮的因素，能一步解決的事情絕不兩步
◆ 統一性：頁面風格、色彩、布局等要保持全局統一，不可為了某一功能的美觀而去破壞整體
◆ 親密性：信息的關聯性強，距離就要相應的縮短，讓他們看起來是一個視覺單元；反之，則距離要加大，要讓用戶對信息的區域劃分一目了然
◆ 對齊性：在界面中，將元素進行對齊，符合用戶的認知，引導視覺流向，讓用戶更加流暢的閱讀信息
◆ 對比性：對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結構，讓用戶快速識別關鍵信息。
◆ 重復性：相同的元素在整個界面中不斷重復，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關聯性。
◆ 穩定性：沒有任何東西比產品的穩定重要，down機再好的產品也是徒勞。會影響到系統穩定的事情不能做
響應式布局，能夠適應各種屏幕尺寸及分辨率，確保整體布局的一致性簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。一般采用柵格系統布局，常用柵格一般是16列或24列。
◆ 柵格：是對界面當中元素橫向排布的一種模式，主要用于大型區塊間距的排列，不適用于圖標與文字間隔的小型元素。
◆ 模度：為界面布局的一致性和韻律感，統一設計到開發的布局語言，減少還原損耗，我們網格基數設為8，卡片寬度及間距為8n。常用模度：4 8 16 24 32 40 48 56 64 … 1920
◆ 布局：常用左右布局或上下布局
左右布局以1920頁面布局為案例：通常B端產品左側會有一個導航菜單，假設240px,右側核心工作區域總寬1632px, 右偏移240px ,列數16列，列寬86px, 間隙16px， 左右邊距24px; 左邊導航和邊距固定不變。
上下布局以1920頁面布局為案例：通常左右會有一個留白區域，假設144px,中間核心區域總寬1632px, 右偏移144px ,列數16列，列寬86px, 間隙16px。
設計風格說白了就是用戶最直觀的感受，“商務、時尚、簡約、科技感、沉穩、年輕、高端...”?
決定設計風格的因素有這些：
色彩是UI設計的基石，人腦對于色彩的記憶度要高于形態；除了美學之外，色彩還是是情感和聯想的創造者。通過對自然的感知和行為，我們通常對色彩定義品牌色板、功能色板、中性色板，以及衍生色。
◆ 品牌色：是體現產品特性和傳播理念最直觀的視覺元素之一（例如：我們熟悉的政府藍/黨政紅/淘寶橙，他們都能直觀或間接的傳達產品特征屬性）
◆ 功能色：遵守用戶對色彩的基本認知，保持一致性，不過多的自定義干擾用戶的認知體驗，提高用戶的閱讀理解力，功能色代表了明確的信息以及狀態，比如正常、成功、失敗、警告、鏈接等
◆ 中性色：主要應用在界面的文字部分、背景、邊框、分割線等場景，根據使用場景，通常將中性色被定義為 3 類：文字、線條、背景
◆ 衍生色：B端產品中顏色的應用場景可能很廣泛，要考慮它的延展性，按照一定規則定義完畢主色，便可以自動獲得一系列完整的衍生色
設定統一的字體規范，無襯線黑體中宮更為開放，布白更為勻稱，顯示效果更為舒適，醒目利于閱讀，更利于視覺信息的傳達，在互聯網時代后期在界面設計中字體樣式還是會以無襯線體為主。
◆ 字體家族：根據系統區分Mac or Windows，如果用戶使用的是Mac系統可以優先使用Mac默認字體渲染 ；如果使用的是Win，字體兼容性選擇順序（有購買版權字體的可優先考慮），例：
◆ 字號：為了提升用戶的閱讀體驗，滿足用戶的可讀性，更為舒適、清晰，也能保證界面的層次感（結合WCAG 2.0標準），將 PC/Web 端主字體從以前的12px改為 14px。
◆ 行高：為上下文之間提供了呼吸的空間，規范的行高，可以使得界面層次清晰、重點突出
◆ 字體顏色：WCAG 2.0 中將顏色對比等級分為 3 種，A級，AA級，AAA級，等級越高意味著顏色的對比度越高，呈現出來的視覺壓力越大。字體顏色數量不建議太多，根據文字主次關系定義3-4個為宜（例：主文字、輔助性文字、提示文字、輕提示/禁用文字）
◆ 字重：字重不建議太多種，2-3種為宜（例：Regular、Medium、Light）
圖形中有圖片、圖標、圖表，都對整體風格有一定影響，設定統一的圖形使用規范，可以使視覺效果更加和諧
交互，即交流互動，也就是說我們自己通過我們的五覺：視覺、聽覺、觸覺、嗅覺、味覺來感受其他事物并和他們之間產生信息溝通的過程。在互聯網中交互對象個體主要是人和機器，所謂人機互動，相互配合，共同達成某種目的。
◆ 交互方式：保持產品的統一性，同類別的交互不可有不同的操作感受。要符合大眾的認知習慣，可創新但不可違背潛意識，例：wab端頁面鼠標交互操作一般有下拉、上滑、按壓、懸停，移動端一般左右上下滑動、下拉、上拉、雙指縮放...
◆ 交互狀態：按鈕狀態變化，頁面狀態變化，組件狀態變化...交互內容確實太大了，我個人也只接觸到的也只是冰山一角，只能拋磚引玉，勾起大家思維，相互探討學習
◆ 引導：引導一般常見5 種：新手引導）、步驟引導、幫助/操作引導、新功能引導、空白頁引導
什么是組件？組件是抽象概念,對面向過程而言是對數據和方法的簡單封裝。對面向對象而言是一些符合某種規范的類組合在一起就構成了組件。它可以提供某些特定的功能。組件出現的原因軟件工程中重復、反復出現、普遍的、有相似的問題的出現,導致開發過程中有大量的代碼需要不斷的重新設計,開發周期延長,開發復雜度增加。需要岀現一種模型通過剝離掉各個問題的特性,抽取各個問題之間的共性。從而在保證代碼的靈活性下極大的增加代碼的可重用性。組件的岀現就是為了解決這些實際問題的。
在前端眼里，組件通常是指頁面上的視圖單元，可以說，UI組件是組件的子集。組件庫大致可以分為這幾大類：
◆ 導航：固釘、面包屑、下拉菜單、下拉導航、電梯、菜單、分頁器、步驟條
◆ 數據錄入：自動完成、級聯選擇、多選框、日期選擇框、表單、輸入框、數字輸入框、提及、步進器、評分、下拉選擇、滑動條、穿梭框、文件上傳
◆ 數據展示: 頭像、標題、卡片、輪播、折疊面板、表格、拖拽排序、高亮關鍵詞、時間軸、走馬燈、空狀態、徽標數、樹、標簽、標簽頁、圖片、氣泡...
◆ 反饋: 警告提示、抽屜、全局提示、對話框、通知提醒框、氣泡確認框、進度條、結果、加載中..
◆ 其他: 錨點、回到頂部、圖標...
設計規范是為了更高效的做設計，但不是一成不變的，它在落地使用的時或多或少都會有問題，需要我們慢慢的去反復檢驗它的合理性，發現不合理的及時更正，不斷迭代，不斷沉淀，不斷優化，這樣才能不斷提高產品的用戶體驗。此次分享借鑒一些前輩的經驗，主要是整理歸納學習，如有需要補充或糾正的，歡迎大家相互探討！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：小魚ID 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.lapeinture.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司