亚洲精品无码久久久,亚洲精品成人网站在线,欧美日本高清在线不卡区

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場(chǎng)職場(chǎng)軟技能直播

12場(chǎng)求職輔導(dǎo)直播

12場(chǎng)專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

關(guān)于設(shè)計(jì)系統(tǒng)，你了解多少？

瀟影

2020-09-14

0 評(píng)論 3593 瀏覽 14 收藏

11 分鐘

編輯導(dǎo)讀：一套優(yōu)秀的設(shè)計(jì)系統(tǒng)有利于幫助產(chǎn)品在各個(gè)平臺(tái)保持一致的設(shè)計(jì)語言和風(fēng)格，給用戶一致的產(chǎn)品體驗(yàn)。本文將從設(shè)計(jì)系統(tǒng)是什么、為什么要搭建設(shè)計(jì)系統(tǒng)和怎么搭建設(shè)計(jì)系統(tǒng)三個(gè)方面對(duì)設(shè)計(jì)系統(tǒng)展開分析說明，與大家分享。

隨著互聯(lián)網(wǎng)高速的發(fā)展，許多公司為了加速開發(fā)流程，較具規(guī)模的公司往往有多數(shù)個(gè)產(chǎn)品，在使用公司的不同產(chǎn)品時(shí)，會(huì)發(fā)現(xiàn)視覺、交互、動(dòng)效，整體用戶體驗(yàn)上是來自不同的公司，而有些公司的不同產(chǎn)品你使用起來卻是非常和諧，像是同一個(gè)團(tuán)隊(duì)在做不同產(chǎn)品一樣，使用起來體驗(yàn)也一致(比如說Intuit , Google, GE , Salesforce )。

當(dāng)中的差異性是因?yàn)橛薪y(tǒng)一的一套設(shè)計(jì)系統(tǒng)(Design System)，如何去定義設(shè)計(jì)系統(tǒng)？設(shè)計(jì)系統(tǒng)可以是一個(gè)資源庫(kù)，里面有設(shè)計(jì)風(fēng)格規(guī)范、重復(fù)使用的界面設(shè)計(jì)元素(UI element)、重復(fù)使用的交互設(shè)計(jì)元素、大的設(shè)計(jì)方向，甚至是動(dòng)畫設(shè)計(jì)元素或是檔案工具管理等。

設(shè)計(jì)系統(tǒng)不僅僅只是界面設(shè)計(jì)的規(guī)范而已，更是團(tuán)隊(duì)的工作方式和團(tuán)隊(duì)所注重的核心價(jià)值。下面主要為大家分享設(shè)計(jì)系統(tǒng)的優(yōu)勢(shì)、案例、以及做設(shè)計(jì)系統(tǒng)時(shí)所需考慮的因素。

01 為什么需要設(shè)計(jì)系統(tǒng)？

設(shè)計(jì)系統(tǒng)(Design System)可以幫助不同產(chǎn)品有較好的用戶體驗(yàn)以及設(shè)計(jì)風(fēng)格，不僅讓公司對(duì)品牌核心價(jià)值有幫助，整體體驗(yàn)在用戶的心理預(yù)期承受范圍內(nèi)，不同產(chǎn)品體驗(yàn)上是同一個(gè)團(tuán)隊(duì)做出來的，而不是從沒有Design System團(tuán)隊(duì)研發(fā)出來的。

設(shè)計(jì)系統(tǒng)不應(yīng)僅僅是用戶界面組件的集合以及一些設(shè)計(jì)理論。它應(yīng)該演示如何在實(shí)際產(chǎn)品中應(yīng)用設(shè)計(jì)模式，并規(guī)范其他團(tuán)隊(duì)如何擴(kuò)展使用模式。

有統(tǒng)一的架構(gòu)和規(guī)范去幫助設(shè)計(jì)團(tuán)隊(duì)使用重復(fù)性質(zhì)高的元素，像是檔案管理，如何去上傳、刪除、復(fù)制等等，使用設(shè)計(jì)系統(tǒng)不僅讓不同產(chǎn)品有相同的用戶體驗(yàn)，項(xiàng)目上的設(shè)計(jì)師更可以節(jié)省時(shí)間重新設(shè)計(jì)，讓設(shè)計(jì)師專注在不同產(chǎn)品重點(diǎn)特別的功能上做設(shè)計(jì)。對(duì)于開發(fā)者來說，這些元素代碼也可以拿來重復(fù)利用，簡(jiǎn)單高效。

回顧當(dāng)前的設(shè)計(jì)流程

低效。設(shè)計(jì)團(tuán)隊(duì)資源不透明，重復(fù)設(shè)計(jì)相同的元素，增加設(shè)計(jì)投入成本（人力及時(shí)間）。
不符合一致性原則。不符合一致性的界面元素，造成不佳的用戶體驗(yàn)：由于快節(jié)奏的開發(fā)過程，導(dǎo)致在設(shè)計(jì)時(shí)沒有考量規(guī)?；蛘邲]有時(shí)間QA就將產(chǎn)品推入市場(chǎng)。不一致的元素會(huì)讓用戶產(chǎn)生困惑，花更多時(shí)間上手，可能因此放棄使用產(chǎn)品。
對(duì)設(shè)計(jì)產(chǎn)出沒有信心。由于沒有規(guī)范，對(duì)自己產(chǎn)出的設(shè)計(jì)是否符合產(chǎn)品設(shè)計(jì)方向持懷疑態(tài)度。

02 設(shè)計(jì)系統(tǒng)是什么？

設(shè)計(jì)系統(tǒng)并不是一個(gè)新觀念，2013年Brad Forst提出的原子設(shè)計(jì)。谷歌Material Design在2014年大放異彩，2016年Airbnb開始進(jìn)行創(chuàng)建設(shè)計(jì)系統(tǒng)。陸陸續(xù)續(xù)，許多知名公司包含Salesforce，Atlasssian，Shopify，Apple對(duì)外公布產(chǎn)品的設(shè)計(jì)系統(tǒng)，讓大眾認(rèn)識(shí)設(shè)計(jì)系統(tǒng)的概要及推廣設(shè)計(jì)的可擴(kuò)展性。

Set of shared and integrated patterns and principles that define the overall design of a product”.

— Karri Saarinen, Principle Designer at Airbnb.

用實(shí)體物品來形容的話，可以把它比作樂高。每個(gè)元件都是可以組合的，會(huì)有N+種可能。就像是樂高中心管控每個(gè)元件、組合，每次更新版本自動(dòng)規(guī)?；略O(shè)計(jì)。

案例：

1. GE’s Predix Design System

使用原子設(shè)計(jì)理論Atomic Design為基礎(chǔ)，從基本的按鈕，文字輸入等開始，在頁面設(shè)計(jì)時(shí)，會(huì)包含按鈕和文字等的原子而成為分子，以此類推。

上圖：?原子設(shè)計(jì)是一種網(wǎng)頁設(shè)計(jì)方法，出自于Brad Frost在2013年時(shí)發(fā)表的文章

（ Atoms原子-Molecules分子-Organisms組織-Templates模板-Pages頁面）

2. Google Material Design

Google的設(shè)計(jì)系統(tǒng)深入規(guī)范每個(gè)設(shè)計(jì)元素的使用方式，譬如說在使用Scrollable Tab時(shí)的不同tab所包括的資訊架構(gòu)不能不一樣等，Material Design更說明了他們的設(shè)計(jì)思維，譬如說他們使用真正的紙張作為隱喻，在不同的設(shè)計(jì)元素或是動(dòng)畫上都可以看到使用真正紙張作為陰影等。

上圖：?Google Material Design

03 為什么要做設(shè)計(jì)系統(tǒng)？

市場(chǎng)/平臺(tái)逐趨成熟。用戶對(duì)產(chǎn)品的要求更高，需要設(shè)計(jì)系統(tǒng)提升產(chǎn)品品質(zhì)。
提升產(chǎn)品一致性。不但是在單一產(chǎn)品之內(nèi)，包含在不同平臺(tái)及硬件的轉(zhuǎn)換(iOS, Andriod, PC, Web, iPad, or TV, etc)，都能建立產(chǎn)品的連貫性。
提高研發(fā)效率。成員可以隨時(shí)下載更新組件，減少設(shè)計(jì)與開發(fā)反覆確認(rèn)的過程。
擴(kuò)張產(chǎn)品團(tuán)隊(duì)。產(chǎn)品模塊化，增加延展性。

設(shè)計(jì)系統(tǒng)需要考慮的重要因素

（1）時(shí)間和資源：設(shè)計(jì)系統(tǒng)是個(gè)不斷在維護(hù)迭代的過程，很多時(shí)候設(shè)計(jì)系統(tǒng)更是一個(gè)“設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)去做的”，沒有那么多資源的團(tuán)隊(duì)必須考慮花下來的時(shí)間成本，更需要leader和資源的支持，讓所有設(shè)計(jì)師都有自信去打磨一套完美的設(shè)計(jì)系統(tǒng)。

（2）責(zé)任：設(shè)計(jì)系統(tǒng)需要人去負(fù)責(zé)監(jiān)督和審核的，不同產(chǎn)品有不同的功能和設(shè)計(jì)，哪些需要加入設(shè)計(jì)系統(tǒng)，哪些元素是提供基本方向而不會(huì)過于牽制產(chǎn)品設(shè)計(jì)的，產(chǎn)品有新的功能也需要不斷的去更新設(shè)計(jì)系統(tǒng)。

（3）溝通：設(shè)計(jì)系統(tǒng)需要與每個(gè)團(tuán)隊(duì)上的設(shè)計(jì)師去做溝通，整合現(xiàn)有的不協(xié)調(diào)，更需要跟不同項(xiàng)目的設(shè)計(jì)師溝通確認(rèn)大家都同意將新的東西加入規(guī)范。再來是跟開發(fā)者的溝通，沒人喜歡在問題出來之前設(shè)計(jì)系統(tǒng)就已經(jīng)預(yù)設(shè)了解決方案，設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)需要不斷的重復(fù)去溝通設(shè)計(jì)系統(tǒng)是用來幫大家節(jié)省時(shí)間。

（4）使用性：設(shè)計(jì)系統(tǒng)不只是界面設(shè)計(jì)資源庫(kù)而已，更需要包含品牌想要表達(dá)的價(jià)值，來決定設(shè)計(jì)系統(tǒng)里的風(fēng)格和用戶體驗(yàn)。如何要去使用設(shè)計(jì)系統(tǒng)，要給設(shè)計(jì)師比較多的空間對(duì)不同產(chǎn)品去做克制化嗎還是較為嚴(yán)謹(jǐn)？要如何使用設(shè)計(jì)系統(tǒng)幫助大家工作，需要包含每個(gè)東西的代碼？或是設(shè)計(jì)師的規(guī)范去如何使用等?；蚴切枰_設(shè)計(jì)系統(tǒng)嗎？有沒有外部的其他公司需要使用設(shè)計(jì)系統(tǒng)等。

04 設(shè)計(jì)系統(tǒng)是持續(xù)更新的系統(tǒng)，定義產(chǎn)品的基石，組成成員可能包含如下

05 如何著手去做設(shè)計(jì)系統(tǒng)？

1. 種子期

心中有設(shè)計(jì)系統(tǒng)的概念。

2. 搜集

搜集現(xiàn)有產(chǎn)品UI 元素。

方法：截圖，把產(chǎn)品所有的頁面、單一組件截圖，目的是找出用戶體驗(yàn)不同的元件。

3. 分類

尋找相同的界面元素，將現(xiàn)有UI 元素分類。

4. 發(fā)想

搜集現(xiàn)有設(shè)計(jì)，發(fā)想所有可能性。

競(jìng)品或者業(yè)內(nèi)不錯(cuò)的產(chǎn)品，搜集元素；

內(nèi)部探索，搜集過往設(shè)計(jì)，集中探索優(yōu)化，發(fā)散重構(gòu)。

5. 定義

收斂定義設(shè)計(jì)系統(tǒng)基本架構(gòu)。提煉設(shè)計(jì)，重新定義架構(gòu)。

競(jìng)品或者業(yè)內(nèi)不錯(cuò)的產(chǎn)品，搜集元素；

內(nèi)部探索，搜集過往設(shè)計(jì)，集中探索優(yōu)化，發(fā)散重構(gòu)。

6. 開發(fā)＆合作

和前端工程師一起定義設(shè)計(jì)系統(tǒng)，反覆溝通的過程是為了確保Design System使用的更長(zhǎng)遠(yuǎn)、易維系。

結(jié)尾

恭喜你看完這篇冗長(zhǎng)的文章，希望能幫助到大家認(rèn)識(shí)設(shè)計(jì)系統(tǒng)Design System，了解設(shè)計(jì)系統(tǒng)的使用時(shí)機(jī)、優(yōu)點(diǎn)，及設(shè)計(jì)過程。

每一個(gè)公司都是獨(dú)特的，不只是產(chǎn)品，還有團(tuán)隊(duì)跟環(huán)境，設(shè)計(jì)系統(tǒng)必須綜合考量所有的因素。設(shè)計(jì)系統(tǒng)不僅幫助用戶有好的用戶體驗(yàn)，對(duì)于內(nèi)部設(shè)計(jì)師和開發(fā)者省時(shí)省力。歡迎大家一起來討論，希望這篇文章對(duì)你有幫助！