編輯導(dǎo)語：什么樣的組件才是美的？在設(shè)計(jì)組件時(shí)，組件狀態(tài)、尺寸是不是越全越好？本文作者對這兩個問題進(jìn)行了分析總結(jié)，希望能給你帶來幫助。

本文源于讀者和粉絲的相關(guān)提問，以及我前段時(shí)間在做 Ant Design 設(shè)計(jì)與運(yùn)營工作中的經(jīng)驗(yàn)沉淀和總結(jié)，希望對你有幫助 。

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

經(jīng)常有同學(xué)問我：什么樣的組件才是美的組件？或者怎樣定義做出來的組件是美的？

其實(shí)“美”這個概念因人而異，很難被絕對化的定義。我總結(jié)出了四條設(shè)計(jì)規(guī)則，幫助大家作出判斷。

1. 契合功能

“形式追隨功能” 是包豪斯很早期的產(chǎn)品設(shè)計(jì)理念，同樣也適用于交互設(shè)計(jì)。對于“美”的評判，需要特定環(huán)境和內(nèi)容的加持。再好看的視覺表現(xiàn)，沒有傳達(dá)出確定的語言或呼應(yīng)相關(guān)的功能，偏離了實(shí)際用途，都不能被稱作“美”。

2. 自然舒適

人類是大自然的產(chǎn)物。面對大自然，大多數(shù)人都會感到愉悅和放松。Ant Design 也在其設(shè)計(jì)價(jià)值觀中指出，“美” 的交互，會從兩個方面體現(xiàn)自然：

1. 感知自然：界面設(shè)計(jì)中的布局、色彩、插畫、圖標(biāo)等要素，應(yīng)充分汲取自然界規(guī)律，從而降低用戶認(rèn)知成本，帶來真實(shí)流暢的感受。
2. 行為自然：在與系統(tǒng)的互動中，設(shè)計(jì)師應(yīng)充分理解用戶、系統(tǒng)角色、任務(wù)目標(biāo)間的關(guān)系，場景化組織系統(tǒng)功能和服務(wù)。幫助用戶順暢決策、減少操作阻礙，節(jié)約用戶腦力和體力，讓人機(jī)交互行為更自然。

3. 積極正向

“美”是具體事物包含的正向價(jià)值，應(yīng)該使用正向的設(shè)計(jì)方法傳播正向的能量和思想認(rèn)知。危險(xiǎn)的、具備侵略性的、不健康的設(shè)計(jì)表達(dá)都不能稱之為美。

4. 與時(shí)俱進(jìn)

“美”是社會意識形態(tài)在視覺層面的體現(xiàn)，是跟隨著人類歷史與文化發(fā)展而發(fā)生不斷變化的。因此，是否符合當(dāng)下流行趨勢也可以構(gòu)成一個對“美”的評判標(biāo)準(zhǔn)。

另外，我認(rèn)為這四個判斷標(biāo)準(zhǔn)的關(guān)系是層層遞進(jìn)的。最基礎(chǔ)的美，就是“契合功能”，在與功能完美匹配后，便可以追求 “自然舒適”，然后再去“積極正向” 的感染他人，最后是“與時(shí)俱進(jìn)” 緊隨時(shí)代大潮流和趨勢不斷的自我革新。這也是一個螺旋上升的設(shè)計(jì)發(fā)展過程。

02 組件狀態(tài)、尺寸是不是越全越好？

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

1. 以「業(yè)務(wù)」為出發(fā)點(diǎn)

對于以上問題，一個很重要的判斷標(biāo)準(zhǔn)就是業(yè)務(wù)或產(chǎn)品是否需要。對于大多數(shù)產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)，在組件庫搭建的初期，一定是以業(yè)務(wù)為主的，組件的設(shè)計(jì)應(yīng)當(dāng)是“從業(yè)務(wù)中來，到業(yè)務(wù)中去”。

當(dāng)你的業(yè)務(wù)中對于一個組件有大、中、小尺寸的需求時(shí)，你再根據(jù)應(yīng)用的場景做出組件并制定出相應(yīng)的使用規(guī)則，也為時(shí)不晚。這樣做的好處有以下幾點(diǎn)：

• 做好的尺寸規(guī)定直接運(yùn)用到業(yè)務(wù)中，有現(xiàn)成的驗(yàn)證場景
• 節(jié)省時(shí)間，避免先做了一大堆的尺寸分類和說明，但卻無處應(yīng)用
• 在設(shè)計(jì)師查找和使用組件的過程中，盡可能減少干擾。避免選項(xiàng)太多干擾使用

另外要注意，如果做了多種尺寸，你需要詳細(xì)的規(guī)范每一種尺寸的使用場景，避免在實(shí)際設(shè)計(jì)和開發(fā)過程中的誤用或混用。一句話，對于組件來說，并不是內(nèi)容越全越好?！叭辈坏扔凇昂糜谩保乙矔砀嘈聠栴}。

2. 以「提效」為目的

對于業(yè)務(wù)級的組件設(shè)計(jì)系統(tǒng)，“大而全”不一定是好事，“專而精”有時(shí)會更高效。畢竟設(shè)計(jì)系統(tǒng)的根本目的就是降本提效，而非設(shè)計(jì)師們的炫耀設(shè)計(jì)價(jià)值的工具。

另外，“專而精” 也是另一個維度的 “全”。當(dāng)我們通過對業(yè)務(wù)需求和屬性的深入研究，將業(yè)務(wù)組件做的足夠?qū)I(yè)，也會從另一個維度對業(yè)務(wù)進(jìn)行補(bǔ)充和賦能，從設(shè)計(jì)側(cè)推動業(yè)務(wù)進(jìn)行體驗(yàn)優(yōu)化，促進(jìn)產(chǎn)品質(zhì)量的提升。

既然一切都以提效為目的，那什么樣的內(nèi)容可以被做成組件、要做出幾種狀態(tài)或尺寸、組件的使用規(guī)范要寫到什么顆粒度，這些就都可以由業(yè)務(wù)設(shè)計(jì)師根據(jù)業(yè)務(wù)需求，自行制定標(biāo)準(zhǔn)了。

3. 以「能力輸出」為重點(diǎn)

對于業(yè)務(wù)組件設(shè)計(jì)系統(tǒng)，組件庫并不是核心，而是更強(qiáng)調(diào)通過一系列的機(jī)制，訓(xùn)練和培養(yǎng)業(yè)務(wù)設(shè)計(jì)師們進(jìn)行統(tǒng)一的能力輸出，包括組件設(shè)計(jì)和應(yīng)用能力、協(xié)調(diào)和溝通能力、組件庫檢測和管理能力等等。

業(yè)務(wù)可能會千變?nèi)f化，但只要團(tuán)隊(duì)整體的設(shè)計(jì)能力具備統(tǒng)一水準(zhǔn)，工作流程規(guī)范，就能夠用最短的時(shí)間，保證最基礎(chǔ)的設(shè)計(jì)質(zhì)量，還可以不斷推陳出新，為業(yè)務(wù)注入更多設(shè)計(jì)價(jià)值。

本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。