編輯導語：什麼樣的元件才是美的？在設計元件時，元件狀態、尺寸是不是越全越好？本文作者對這兩個問題進行了分析總結，希望能給你帶來幫助。

本文源於讀者和粉絲的相關提問，以及我前段時間在做 Ant Design 設計與運營工作中的經驗沉澱和總結，希望對你有幫助 。

01 如何判斷元件的美觀性？

經常有同學問我：什麼樣的元件才是美的元件？或者怎樣定義做出來的元件是美的？

其實“美”這個概念因人而異，很難被絕對化的定義。我總結出了四條設計規則，幫助大家作出判斷。

1. 契合功能

“形式追隨功能”

是包豪斯很早期的產品設計理念，同樣也適用於互動設計。對於“美”的評判，需要特定環境和內容的加持。再好看的視覺表現，沒有傳達出確定的語言或呼應相關的功能，偏離了實際用途，都不能被稱作“美”。

2. 自然舒適

人類是大自然的產物。面對大自然，大多數人都會感到愉悅和放鬆。Ant Design 也在其設計價值觀中指出，“美” 的互動，會從兩個方面體現自然：

2. 自然舒適

介面設計中的佈局、色彩、插畫、圖示等要素，應充分汲取自然界規律，從而

感知自然：

，帶來

降低使用者認知成本

。

真實流暢的感受

在與系統的互動中，設計師應充分理解使用者、系統角色、任務目標間的關係，場景化組織系統功能和服務。幫助使用者

行為自然：

，節約使用者腦力和體力，讓人機互動行為更自然。

順暢決策、減少操作阻礙

“美”是具體事物包含的

3. 積極正向

，應該使用正向的設計方法傳播正向的能量和思想認知。危險的、具備侵略性的、不健康的設計表達都不能稱之為美。

3. 積極正向

“美”是

正向價值

在視覺層面的體現，是跟隨著人類歷史與文化發展而發生不斷變化的。因此，是否符合當下流行趨勢也可以構成一個對“美”的評判標準。

另外，我認為

4. 與時俱進

。最基礎的美，就是“契合功能”，在與功能完美匹配後，便可以追求 “自然舒適”，然後再去“積極正向” 的感染他人，最後是“與時俱進” 緊隨時代大潮流和趨勢不斷的自我革新。這也是一個螺旋上升的設計發展過程。

02 元件狀態、尺寸是不是越全越好？

在做元件庫時，你可能也會糾結這樣的問題：一個元件要不要提供多個大小呢？如何判斷一個元件是否需要做多種尺寸呢？元件庫是不是越全越好呢？

4. 與時俱進

對於以上問題，一個很重要的判斷標準就是

社會意識形態

。對於大多數產品設計團隊，在元件庫搭建的初期，一定是以業務為主的，元件的設計應當是

這四個判斷標準的關係是層層遞進的

。

當你的業務中對於一個元件有大、中、小尺寸的需求時，你再根據應用的場景做出元件並制定出相應的使用規則，也為時不晚。這樣做的好處有以下幾點：

做好的尺寸規定直接運用到業務中，有現成的

1. 以「業務」為出發點

1. 以「業務」為出發點

，避免先做了一大堆的尺寸分類和說明，但卻無處應用

在設計師查詢和使用元件的過程中，儘可能

業務或產品是否需要

。避免選項太多幹擾使用

另外要注意，如果做了多種尺寸，你需要詳細的

“從業務中來，到業務中去”

驗證場景

，避免在實際設計和開發過程中的誤用或混用。一句話，對於元件來說，並不是內容越全越好。“全”不等於“好用”，而且也會帶來更多新問題。

節省時間

對於業務級的元件設計系統，“大而全”不一定是好事，

減少干擾

有時會

規範每一種尺寸

。畢竟設計系統的根本目的就是降本提效，而非設計師們的炫耀設計價值的工具。

另外，

的使用場景

。當我們透過對業務需求和屬性的深入研究，將業務元件做的足夠專業，也會從另一個維度對業務進行

2. 以「提效」為目的

，從設計側推動業務進行體驗最佳化，促進產品質量的提升。

既然一切都以提效為目的，那什麼樣的內容可以被做成元件、要做出幾種狀態或尺寸、元件的使用規範要寫到什麼顆粒度，這些就都可以由業務設計師根據業務需求，自行制定標準了。

2. 以「提效」為目的

對於業務元件設計系統，元件庫並不是核心，而是更強調透過一系列的機制，訓練和培養業務設計師們進行

“專而精”

，包括元件設計和應用能力、協調和溝通能力、元件庫檢測和管理能力等等。

業務可能會千變萬化，但只要團隊整體的設計能力具備統一水準，工作流程規範，就能夠用最短的時間，保證最基礎的設計質量，還可以不斷推陳出新，為業務注入更多設計價值。

本文由@ 元堯 原創釋出於人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基於CC0協議。