4年磨一劍！金山云發(fā)布企業(yè)級(jí)設(shè)計(jì)解決方案2.0

金山云企業(yè)級(jí)設(shè)計(jì)解決方案 Kingsoft Cloud Design（以下簡稱：King Design）正式升級(jí) 2.0 版本。King Design 是由金山云 UED 團(tuán)隊(duì)和云計(jì)算前端團(tuán)隊(duì)歷時(shí)四年開發(fā)和維護(hù)的。提煉于復(fù)雜的云產(chǎn)品業(yè)務(wù)場(chǎng)景，不僅支持 Vue2、Vue3、React 等業(yè)界主流的技術(shù)框架，同時(shí)還支撐了云平臺(tái)上百個(gè)產(chǎn)品，服務(wù)于金山云內(nèi)外部用戶。

金山往期設(shè)計(jì)案例：

從首次發(fā)布到本次升級(jí)，King Design 經(jīng)歷了 4 年多時(shí)間的打磨，產(chǎn)出了設(shè)計(jì)風(fēng)格、設(shè)計(jì)指南、?具、業(yè)務(wù)模板等，提供從產(chǎn)品到測(cè)試全流程的設(shè)計(jì)解決方案，為跨部門協(xié)作提供了豐富的資源。我們希望借助本次升級(jí)，分享多年來在云計(jì)算行業(yè)中所獲得的經(jīng)驗(yàn)，同時(shí)借助社區(qū)力量，不斷進(jìn)化設(shè)計(jì)系統(tǒng)。

訪問鏈接：https://design.ksyun.com/

設(shè)計(jì)理念

King Design 致力于提升企業(yè)級(jí)產(chǎn)品的用戶體驗(yàn)，以賦能企業(yè)、提升團(tuán)隊(duì)生產(chǎn)力為愿景。源于實(shí)際業(yè)務(wù)，并在產(chǎn)品迭代過程中不斷豐富設(shè)計(jì)資產(chǎn)和生態(tài)，最終形成適用于互聯(lián)網(wǎng)各行業(yè)的設(shè)計(jì)解決方案。

遵從高效（Efficiency）、融合（Fusion）、演化（Evolution）的設(shè)計(jì)理念，King Design 從產(chǎn)品設(shè)計(jì)全流程的視角出發(fā)，更加流程化和系統(tǒng)化的幫助企業(yè)解決業(yè)務(wù)問題，通過搭建統(tǒng)一的生態(tài)平臺(tái)、易用的設(shè)計(jì)資產(chǎn)、多行業(yè)的解決方案，幫助提升團(tuán)隊(duì)生產(chǎn)力。

• 高效，全局標(biāo)準(zhǔn)化，優(yōu)化產(chǎn)研流程，為用戶帶來更便捷體驗(yàn)，提高團(tuán)隊(duì)生產(chǎn)力。
• 融合，融合實(shí)際業(yè)務(wù)場(chǎng)景，統(tǒng)一設(shè)計(jì)語言，讓產(chǎn)品家族更具一致性。
• 演化，具有靈活可擴(kuò)展性，在業(yè)務(wù)迭代過程中和設(shè)計(jì)趨勢(shì)發(fā)展中不斷演化。

技術(shù)特性

King Design 支持業(yè)界多種主流技術(shù)框架，本次版本主要支持了 Vue3、React 17、React 18。

代碼完全使用 TypeScript 重構(gòu)，全面接入 TS 生態(tài)，提供強(qiáng)大的類型系統(tǒng)，提高開發(fā)效率的同時(shí)，將大部分 Bug 遏止在編碼階段。

樣式方面，采用 CSS-in-JS 技術(shù)實(shí)現(xiàn)，支持靈活的主題定制，可依據(jù)產(chǎn)品特性對(duì)主題進(jìn)行一鍵更換，方便快捷。

全鏈路設(shè)計(jì)解決方案

在產(chǎn)品開發(fā)周期中，體驗(yàn)需融合到業(yè)務(wù)鏈條的每個(gè)環(huán)節(jié)中，King Design 打造了從產(chǎn)品、設(shè)計(jì)、開發(fā)、測(cè)試各個(gè)階段的設(shè)計(jì)解決方案，并保持各個(gè)階段設(shè)計(jì)語言的一致性。

• 產(chǎn)品階段，提供 Web 端和移動(dòng)端的專業(yè)版和快捷版原型設(shè)計(jì)工具，同時(shí)提供通用型和行業(yè)型業(yè)務(wù)模版，如金融、醫(yī)療、政府等行業(yè)，幫助產(chǎn)品規(guī)劃原型設(shè)計(jì)，節(jié)省構(gòu)建原型的時(shí)間。
• 設(shè)計(jì)階段，提供多類型設(shè)計(jì)工具，包含 Web 端和移動(dòng)端的 Sketch 組件庫、Figma 組件庫、素材庫，后續(xù)還會(huì)發(fā)布更多在線協(xié)同工具的組件庫，助力設(shè)計(jì)師和開發(fā)工程師更好協(xié)作。
• 開發(fā)階段，支持 Vue2、Vue3、React 等業(yè)界主流的技術(shù)框架，全面接入 TS 生態(tài)，提供強(qiáng)大的類型系統(tǒng)，支持靈活的主題定制。
• 測(cè)試階段，從測(cè)試和 UI 走查角度，提供度量測(cè)試工具，助力打造規(guī)范化的產(chǎn)品體驗(yàn)測(cè)試流程。

貼近真實(shí)的動(dòng)效

動(dòng)效可增強(qiáng)用戶使用產(chǎn)品的愉悅感，增加界面舒適性和活力，King Design 升級(jí)了組件級(jí)動(dòng)效，模擬真實(shí)物理世界的運(yùn)動(dòng)規(guī)律，貼近用戶真實(shí)的感受。

組件動(dòng)效模擬物理世界中水滴掉落在湖面形成的漣漪效果，即當(dāng)水滴掉落到湖面時(shí)，將在水滴中央向四周擴(kuò)散形成漣漪。當(dāng)對(duì)組件進(jìn)行操作時(shí)，由組件內(nèi)部向外側(cè)擴(kuò)散形成漣漪效果，漣漪向外擴(kuò)散時(shí)逐漸減弱并消失。

在整體設(shè)計(jì)理念的基礎(chǔ)上，我們提煉了組件動(dòng)效原則，以真實(shí)、高效、適度作為設(shè)計(jì)原則，設(shè)計(jì)更貼近企業(yè)級(jí)的產(chǎn)品特征，并依據(jù)用戶認(rèn)知習(xí)慣，建立其與屏幕內(nèi)虛擬世界的認(rèn)知連續(xù)，讓人們?cè)诨ヂ?lián)網(wǎng)世界中體驗(yàn)到自然的觸感。

靈活的主題定制

支持實(shí)時(shí)主題定制，可依據(jù)產(chǎn)品品牌特性自定義主題。提供符合 WCAG 2.2 規(guī)范的多元化預(yù)置主題，用戶可一鍵切換更換產(chǎn)品風(fēng)格。除色彩定制外，在保持瀏覽器原生特性的基礎(chǔ)上增強(qiáng)交互能力，可靈活按需定制組件風(fēng)格，滿足不同業(yè)務(wù)場(chǎng)景需求。

統(tǒng)一的生態(tài)平臺(tái)

金山云 UED 開源共享自主設(shè)計(jì)研發(fā)的素材站，提供大量具有云計(jì)算風(fēng)格的設(shè)計(jì)資產(chǎn)，包括圖標(biāo)庫、圖片庫、字體庫（后續(xù)開放）等生態(tài)平臺(tái)。支持多格式、多尺寸的資源下載，同時(shí)支持線上代碼引用。此外，用戶可在生態(tài)平臺(tái)進(jìn)行項(xiàng)目管理和資源管理，更好地實(shí)現(xiàn)團(tuán)隊(duì)間的資源協(xié)作和積累。

多行業(yè)的解決方案

從大量的業(yè)務(wù)實(shí)踐中，提取了共性設(shè)計(jì)模式，如登錄、表單、列表、總覽、詳情、個(gè)人中心，形成通用業(yè)務(wù)模板。提煉不同行業(yè)的業(yè)務(wù)場(chǎng)景，形成行業(yè)解決方案模板，如 IoT、教育、人工智能等。用戶可在線查看并下載業(yè)務(wù)模板，快速完成產(chǎn)品構(gòu)建。

最后

通過升級(jí)，King Design 已經(jīng)從一個(gè)組件庫演化為適用于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)系統(tǒng)，隨著業(yè)務(wù)場(chǎng)景和設(shè)計(jì)趨勢(shì)的變化，設(shè)計(jì)系統(tǒng)將不斷進(jìn)行演化。未來，金山云 UED 團(tuán)隊(duì)會(huì)持續(xù)對(duì) King Design 進(jìn)行優(yōu)化，以形成更成熟的解決方案和更豐富的設(shè)計(jì)資產(chǎn)，為企業(yè)產(chǎn)品賦能增效。

歡迎關(guān)注作者微信公眾號(hào)：「金山云用戶體驗(yàn)設(shè)計(jì)」