2019 年年末,58UXD 重新整理了 58 同城的設(shè)計(jì)規(guī)范,在原有基礎(chǔ)上將組件擴(kuò)展到了 20 種,覆蓋了 532 種組件狀態(tài)以及接近 1000 枚的圖標(biāo)。在 2020 年將其正式更名為「LOCO Design System」,從此開(kāi)始,這套設(shè)計(jì)系統(tǒng)支撐了 58 同城各業(yè)務(wù)線的日常迭代,成為協(xié)同各業(yè)務(wù)線設(shè)計(jì)部提升設(shè)計(jì)一致性的重要紐帶,無(wú)縫鏈接用戶、設(shè)備、場(chǎng)景的載體和觸點(diǎn),為用戶提供完美的生活服務(wù)體驗(yàn)。

大廠組件:

「LOCO Design System」包含了大量的可復(fù)用資源,如 icon、全局樣式、基礎(chǔ)組件、布局、導(dǎo)航、輸入等,可用來(lái)快速搭建的界面設(shè)計(jì),大大提升 UXD 設(shè)計(jì)師的效率。

目前,「LOCO Design System」已集成到 58 自研的產(chǎn)品風(fēng)火輪上,大家可以下載風(fēng)火輪的 Sketch 插件即可拖拽設(shè)計(jì)資源到畫(huà)板上進(jìn)行編輯。

正式上線!58UXD 設(shè)計(jì)組件 LOCO Design 開(kāi)源啦!

正式上線!58UXD 設(shè)計(jì)組件 LOCO Design 開(kāi)源啦!

風(fēng)火輪除了承載設(shè)計(jì)資產(chǎn)以外,還可以可通過(guò) Sketch 插件上傳設(shè)計(jì)稿到風(fēng)火輪協(xié)作平臺(tái),實(shí)現(xiàn)標(biāo)注和代碼解析,可直接鏈接分享給產(chǎn)品和開(kāi)發(fā)。下面我就來(lái)介紹下這款神器。

為設(shè)計(jì)者提升工作效率的 Sketch 插件,輕松調(diào)用「LOCO Design System」

通過(guò) Sketch 插件進(jìn)入設(shè)計(jì)師的工作流程,聚合設(shè)計(jì)資產(chǎn),解決設(shè)計(jì)規(guī)范落地、設(shè)計(jì)資產(chǎn)可視化承載,提升設(shè)計(jì)規(guī)范和設(shè)計(jì)資產(chǎn)的使用率,增強(qiáng)資源共享避免重復(fù)設(shè)計(jì)。目前為止 sketch 插件可以承載 icon 庫(kù)、組件庫(kù)、場(chǎng)景庫(kù)、插畫(huà)庫(kù)、基礎(chǔ)運(yùn)營(yíng)庫(kù)資源。大家可以通過(guò)我們的制作要求,上傳自己的規(guī)范。

1. 組件資源-icon/色彩/組件/場(chǎng)景/插畫(huà)

主要承載 58 集團(tuán)「LOCO Design System」的設(shè)計(jì)規(guī)范和設(shè)計(jì)資產(chǎn),供全體設(shè)計(jì)師共享使用。

正式上線!58UXD 設(shè)計(jì)組件 LOCO Design 開(kāi)源啦!

正式上線!58UXD 設(shè)計(jì)組件 LOCO Design 開(kāi)源啦!

2. 自有組件庫(kù)快速生成

可自己制作組件 Library,導(dǎo)入風(fēng)火輪 Sketch 插件。導(dǎo)入的組件 Library 需遵循《本地 Library 資源制作規(guī)范》。

正式上線!58UXD 設(shè)計(jì)組件 LOCO Design 開(kāi)源啦!

3. 上傳設(shè)計(jì)稿

可通過(guò)風(fēng)火輪 Sketch 插件上傳設(shè)計(jì)稿到風(fēng)火輪協(xié)作平臺(tái),實(shí)現(xiàn)標(biāo)注和代碼解析,可直接鏈接分享給產(chǎn)品和開(kāi)發(fā)同學(xué)。

正式上線!58UXD 設(shè)計(jì)組件 LOCO Design 開(kāi)源啦!

設(shè)計(jì)師、產(chǎn)品、研發(fā)多角色一站式協(xié)同平臺(tái),設(shè)計(jì)稿在線可視化

通過(guò)風(fēng)火輪協(xié)作平臺(tái)進(jìn)行團(tuán)隊(duì)管理,團(tuán)隊(duì)資產(chǎn)、項(xiàng)目管理,實(shí)現(xiàn)設(shè)計(jì)稿在線標(biāo)注解析,供研發(fā)同學(xué)在線查看研發(fā)。同時(shí)還生成各種前端代碼,供前端同學(xué)復(fù)制使用,縮短研發(fā)同學(xué)的工作路徑,提升工作效率的同時(shí)順應(yīng)市場(chǎng)潮流,實(shí)現(xiàn)從設(shè)計(jì)到代碼的愿景。

正式上線!58UXD 設(shè)計(jì)組件 LOCO Design 開(kāi)源啦!

團(tuán)隊(duì)與項(xiàng)目

  1. 風(fēng)火輪協(xié)作平臺(tái)的團(tuán)隊(duì)項(xiàng)目,采用團(tuán)隊(duì)—(文件夾)—項(xiàng)目—分組—畫(huà)板的層級(jí)進(jìn)行設(shè)計(jì)稿的管理。
  2. 項(xiàng)目是從屬于團(tuán)隊(duì)的。想使用項(xiàng)目相關(guān)功能,需要先創(chuàng)建/加入一個(gè)團(tuán)隊(duì)。為便于管理,一個(gè)團(tuán)隊(duì)下可建立多個(gè)項(xiàng)目。

正式上線!58UXD 設(shè)計(jì)組件 LOCO Design 開(kāi)源啦!

項(xiàng)目文件管理

項(xiàng)目可存在于任何一級(jí)文件夾下。團(tuán)隊(duì)成員均可進(jìn)行項(xiàng)目管理。項(xiàng)目文件中承載了項(xiàng)目中的全部?jī)?nèi)容(設(shè)計(jì)稿、切圖、源文件、代碼等)。

正式上線!58UXD 設(shè)計(jì)組件 LOCO Design 開(kāi)源啦!

多方協(xié)作-編輯器

編輯器頁(yè)面可進(jìn)行設(shè)計(jì)稿畫(huà)板標(biāo)注/代碼信息查看、設(shè)計(jì)圖/切圖下載。每個(gè)畫(huà)板提供了標(biāo)注模式和代碼模式兩種視圖。

  1. 在標(biāo)注模式下,可以查看圖層的尺寸、位置、字體、文本內(nèi)容、樣式等信息,可以復(fù)制并使用標(biāo)注樣式代碼;如果是切圖,則可以下載對(duì)應(yīng)的不同尺寸、格式的圖片。
  2. 在代碼模式下可查看平臺(tái)解析當(dāng)前畫(huà)板,所生成的全部代碼,可一鍵復(fù)制使用。

正式上線!58UXD 設(shè)計(jì)組件 LOCO Design 開(kāi)源啦!

代碼生成

在上傳設(shè)計(jì)稿時(shí)選擇生成代碼,在協(xié)作過(guò)程中,平臺(tái)會(huì)展示,整個(gè)設(shè)計(jì)項(xiàng)目的全部代碼,供研發(fā)同學(xué)使用。我們目前生成的代碼,高精度的還原了設(shè)計(jì)稿。

正式上線!58UXD 設(shè)計(jì)組件 LOCO Design 開(kāi)源啦!

對(duì)于不同規(guī)模的產(chǎn)研團(tuán)隊(duì),風(fēng)火輪都沒(méi)有任何的費(fèi)用。良心的免費(fèi)設(shè)計(jì)神器,大家快來(lái)解鎖吧!

正式上線!58UXD 設(shè)計(jì)組件 LOCO Design 開(kāi)源啦!

風(fēng)火輪官網(wǎng): https://fhl.58.com ,下載插件,獲取 LOCO Design 的源文件

收藏 20
點(diǎn)贊 15

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。