組件設計｜京東中后臺UI組件庫-樂高V2.0改版復盤

▲點擊"三分設"關注，回復"社群"加入我們

歡迎來到專業(yè)設計師學習交流社區(qū)

三分設｜連接知識，幫助全球 1 億設計師成長

轉自：京東設計中心JDC

編輯：劉麗

共 3034 字，預計閱讀 8 分鐘

樂高致力于打造一套多終端，多場景，多技術棧的企業(yè)級 UI 組件庫。2020 年，樂高V2.0 版本針對 PC 組件迎來了全面升級。

背景

樂高 V1.0 產品希望建立起一個中后臺設計平臺，解放互聯(lián)網(wǎng)人雙手，不再做 0-1 的重復工作。覆蓋人群包括產品設計師，UI / UE 設計師，前端工程師。1.0 版本雖然能滿足部分業(yè)務中的設計和開發(fā)需求，但是上手始終很費力，整體流程體驗只做到能用，但是不夠好用。2.0 版本在設計和開發(fā)上都希望對樂高進行一次換血，真正達到好用的程度

如何改造

結構層

用戶分類
1.0 版本希望能夠兼顧產品、設計、開發(fā)3類用戶，從全流程多個節(jié)點提升效率。從頁面布局也能看出來，1.0 版本做了大量對交互設計說明，并分布在每個組件實例的下面。但根據(jù)競品調研結果顯示，此類產品的最大用戶群體是開發(fā)人員，而且從樂高實際能夠提供的能力來看，對三類用戶差異也極大，最核心的功能也是針對開發(fā)的。所以 2.0 的目標用戶進行了調整：前端開發(fā) > 設計師 > 產品經(jīng)理。

用戶行為

對競品調研發(fā)現(xiàn)，此類網(wǎng)站的體驗同質程度化非常高，頁面核心內容只包含實例和代碼兩部分。用戶行為基本在重復查找的流程，直到找到或者找不到為止。以核心用戶開發(fā)人員為示例：

而穿插在實例中間的大篇幅交互設計說明其實在干擾開發(fā)用戶尋找信息，同樣的問題也存在于設計用戶的使用中。為了提高用戶的瀏覽效率，頁面信息需要進行拆分重組，應該盡可能提高對應用戶頁面的信息密度。

網(wǎng)站重構

針對上述用戶定位和用戶表現(xiàn)，本次對網(wǎng)站結構進行了拆解重構

1.增加組件搜索、組件總覽頁面，提高檢索效率。

2.組件詳情頁面刪除交互設計說明，排除設計說明對開發(fā)用戶的干擾，提高組件實例展示密度。

3.將剝離出的交互設計說明重新整合，按照組件應用的關聯(lián)度分類排序，形成系統(tǒng)性的設計指導文檔。對于新手或者接觸B端中后臺設計不久的設計師非常友好，這也是樂高的一大產品優(yōu)勢。

表現(xiàn)層

網(wǎng)站設計

首頁風格 V2.0 首頁整體風格偏向輕簡，舍棄了 1.0 厚重的 3D 風格，整體采用扁平風格，色調也改為亮色系，并且去掉了滾屏的設計，減弱了平臺介紹，把更多的權重讓給開始使用按鈕和導航功能，希望用戶盡快體驗產品。

頂部全局導航

頂部導航增加了全局搜索，并且始終吸頂，便于快速搜索組件。另外增加了分類菜單，通過內容拆分，引導不同用戶去向不同頁面。

左側導航菜單

針對左側導航菜單做了以下修改:

1.整體弱化了一二級分類的感知，將原來可以折疊的一級分類全部平鋪開，去掉縮進，并且壓縮每條菜單的高度，提高信息密度。弱化一級分類的樣式，起到輔助分割作用。

2.組件名稱進行調整，將英文名前置。組件中文名受到習慣影響較大，缺少規(guī)范統(tǒng)一，而英文名稱更具有共識性，也更貼近編程語言的書寫方式，對于開發(fā)用戶的認知感會更強。

3.對組件排序進行了重新調整，2.0 按照字母順序排列。與前面提到的情況類似，以往的排序習慣將具有功能關聯(lián)性的組件放在一起（如：單選和復選），但是仍然受個體差異影響，缺乏統(tǒng)一的標準。配合英文名前置的修改，排序也遵從字母表順序，形成統(tǒng)一的檢索規(guī)律，將有助于提高瀏覽效率。

組件設計

2.0 的組件升級主要從視覺和應用兩個維度出發(fā)。

輕盈簡潔

針對組件視覺樣式進行了一次 “瘦身”，1.0 版本設計風格也有些年頭了，部分組件樣式還稍顯復雜，在整體簡約扁平的大基調下顯得有些累贅。針對這部分組件，做了視覺減法，去掉了繁復的漸變、描邊、內陰影、陰影等效果，使和頁面整體組合的感官更干凈輕盈，也節(jié)省了開發(fā)成本，使組件的可擴展性進一步提升，以下列出部分示例。

即拖即用

1.組件適配

之前有使用樂高的同事反饋，拖出來的組件不能自動適配，經(jīng)常要解綁再自己重新改布局和尺寸，并沒有節(jié)約時間。這樣就失去了使用組件的意義，同時也額外增加了規(guī)范不準確的風險。所以本次組件庫除了視覺優(yōu)化，還針對每個組件的應用場景，其可能出現(xiàn)的適配情況，對symbol進行了布局和伸縮的改造。保證每個組件在其合理的應用場景下都能正常適配。

2.變量管理

Sketch 69 以上版本更新了系統(tǒng)的配色管理，對于顏色的批量管理更加靈活，樂高組件庫也對此進行了同步更新。

3.切圖迭代

針對組件庫 icon 進行了圖層樣式關聯(lián)，補充了組內切圖，并且完成了標準規(guī)范英文命名，這樣圖標拖出之后無需其他動作，上傳之后就可以提供標準樣式和命名的切圖。

動效設計

1.0 版本沒有針對動效做出明確的使用指導，使得網(wǎng)站作為一個產品自身的交互反饋缺少統(tǒng)一的動效規(guī)則。而且部分產品內的組件的交互過程中也涉及到動效的應用，也有同樣的問題，導致在使用組件產生聯(lián)動或連動的時候動作 “不協(xié)調” 。這次版本更新針對這個問題已經(jīng)整理了初步的動效設計原則，第一版本主要針對時間，速度進行了規(guī)范呢。后續(xù)還會對實際組件的運動方向和軌跡進行優(yōu)化。

樂高的動效設計原則

自然： 基于設計原則中的 「一致性」 原則，用戶更容易理解或學會使用具有相似意思和功能的事物，所以設計動效首先要符合客觀世界物體的運動規(guī)律，不能讓用戶感到 “別扭”。

克制： 所有動效的設計都必須存在其合理性和必要性，所有的動效都是為系統(tǒng)本身提供輔助功能，這也就要求動效的程度和占用的時間不能超過其服務的功能本身。

靈活： 效率是動效的基礎屬性，但這并不意味著動畫的速度越快越好，時間越短越好。過快的反應速度可能會導致屏幕 “閃爍”。而過短的動畫時間可能讓用戶來不及意識發(fā)生了什么。

運動規(guī)則

1.標準運動:在界面中元素發(fā)生位移、形變、縮放等，即運動主體始終在可視范圍內的情況，通常建議應用緩入緩出 （ease-in-out） 的規(guī)則。

2.入場型:界面中原本沒有的元素進入界面的過程通常需要通過減速在引起用戶注意的同時給用戶一個 “緩沖” ，建議應用緩出 （ease - out） 的規(guī)則。

3.退場型:界面中的元素消失或離開界面的過程通常應該快速完成，所以需要運動過程逐步加速，一般應用緩入 （ease - in） 的規(guī)則。

4.速度與時間:一般用戶的反應時間應該在 0.2s 以上，為了符合一般用戶感知，常用動畫時長建議設置為 0.3s。這個時間通常可以引起足夠的用戶反應，也不至于顯得拖沓。

小結

如何使得產品好用，首先還是得明確問題：產品給誰用，用戶怎么用，哪里不好用。

如果有高效準確的搜集用戶反饋的途徑，這個問題就很好解決。但是如果沒有，和成熟的競品做對比也是一個很好的辦法。把自己帶入用戶的角色，當你發(fā)現(xiàn)和競品的差異時，就會自然的產生對比。分析為什么會存在這些差異，競品這樣做的好處是什么，壞處是什么，對比自己的產品哪些差異更有優(yōu)勢，將問題羅列并且歸類。

當問題明確后，需要明確需要達成的目標。為了達成目標，從整個使用流程中尋找需要在哪些節(jié)點做哪些動作，即修改方案落地。

同時也要考慮如何跟蹤和驗證改版是否真的使得產品變得好用，用戶反饋和貼合的體驗度量參數(shù)是比較好的解決方案。

以上，希望能給大家?guī)硇椭?/span>

---

?? 我們一起聊設計 ???♂?

微信行業(yè)交流群

期待與更多優(yōu)秀設計師一起成長

??

PS：歡迎大家關注三分設，每天早上9點，準時充電。分享優(yōu)質設計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號【 Lil_Bug 】，備注【 三分設 】加入！（只面向星標了公眾號三分設的粉絲）

---

推 薦 課 程

星標公眾號方法

點開下方公眾號 ??  點擊右上角【...】 ??   設為星標