中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

設計系統(tǒng)包括完整的設計價值觀和原則、設計標準、場景定義 以及一套工具包，用于搭建和組合產(chǎn)品與服務。

為什么需要搭建設計系統(tǒng)？設計系統(tǒng)解決了以下問題：

1）設計高效率：快速了解產(chǎn)品設計全貌（包括設計原則、風格，樣式、組件）多人協(xié)作如Google docs共享的方式高效。

2）協(xié)作高效率：對齊研發(fā)的實現(xiàn)距離單位，高還原度，及跨學科跨崗位間的高效溝通。共享的詞匯表，有用的文檔使測試更容易，并作為未來協(xié)作友好的基礎(chǔ)。

1. 什么是設計系統(tǒng)？

設計系統(tǒng)包括完整的設計價值觀和原則、設計標準、場景定義 以及一套工具包（UI 模式庫和代碼），用于搭建和組合產(chǎn)品與服務。鼓勵崗位之間的合作，減少溝通障礙。一個好的風格指南可以幫助設計人員和開發(fā)人員了解他們工具箱的工具，并為如何正確使用他們提供規(guī)則和最佳實踐。

2. 設計系統(tǒng)的前世今生

從1977年ChristopherAlexander在《A Pattern language》中首次提出模式的概念anirbnb、Salesforce 、Atlasssian、Spotify、AntDesign、Fusion Design先后對外公布的設計系統(tǒng)，歷經(jīng)了43年的演練。

3. 設計系統(tǒng)的構(gòu)成

設計系統(tǒng)由風格指南，基礎(chǔ)構(gòu)件，模式庫，規(guī)則組成。據(jù)不同項目，構(gòu)成要素可以相應重構(gòu)與取舍，但風格指南，組件庫，設計原則必不可少。搭建完成后在項目中的版本迭代若只是視覺改版則只需改風格指南。模式庫的組件是大量在UI設計師日常工作中，組件分為：按鈕卡片、圖標、導航、列表、下拉框、搜索框、表單、分頁、進度欄、彈框、加載、側(cè)邊欄等。

我們創(chuàng)建各種組件，用于構(gòu)成界面，那么關(guān)于組件：

• 什么是組件？組件是可以在你的設計中反復使用的頁面元素。
• 何時創(chuàng)建組件？在界面設計中發(fā)現(xiàn)兩個頁面中出現(xiàn)了重復的元素時可考慮是否要將它轉(zhuǎn)換為組件。
• 如何創(chuàng)建組件？根據(jù)「原子設計Atomic Design」理論將組件進行原子級的結(jié)構(gòu)拆分,這不是一個線性過程，而是一個思維模型。

4. 如何搭建設計系統(tǒng)

搭建要點：創(chuàng)建可維護的設計系統(tǒng)，要建立長遠成功的設計系統(tǒng)。

• 建立設計體系團隊，合適的人員和流程來確保系統(tǒng)的穩(wěn)定發(fā)展。
• 適應性強，使其易于維護。

新模式的請求是如何處理的？發(fā)現(xiàn)錯誤的時候會怎樣？誰批準設計系統(tǒng)的變化？負責保持文檔更新的是誰？改變系統(tǒng)的UI模式？團隊如何了解變化？

搭建步驟流程：

• 共創(chuàng)者：UI+ UI Dev
• 創(chuàng)建工具：Sketch(UX設計工具) + Zeplin（團隊協(xié)作工具+ Storybook（github設計系統(tǒng)開源框架）
• 協(xié)作方式：設計師與研發(fā)不再是線性的瀑布式協(xié)作模式，而是共創(chuàng)的協(xié)作模式

步驟：（以調(diào)色板為例）

• 統(tǒng)一命名通過點擊Sketch頂部菜單欄Plugins-Zeplin-Export Selected可配色版的色值直接同步至Zeplin的style guide。
• 前端研發(fā)可在Zeplin style guide tab: Color & Text Styles下查看，并把產(chǎn)品配色封裝為配色的變量保存至storybook。

1）規(guī)則

設計原則：有助于塑造我們的設計方法，并協(xié)助我們在產(chǎn)品設計過程中評估權(quán)衡。jared M.Spool的提出驗證原則的方法“6個違反直覺的測試”：

• 它直接來自研究嗎？
• 它在大多數(shù)情況下是否可以幫助您說“不”？
• 它是否將您的設計與競爭對手區(qū)分開？
• 在將來的發(fā)行版中您可能會扭轉(zhuǎn)嗎？
• 您是否對該項目進行了評估？
• 它的含義是否被不斷測試？

好的設計原則應具備：

• 足夠具體以進行衡量；
• 在整個產(chǎn)品流程中工作；
• 激勵您的團隊創(chuàng)造更好的結(jié)果；
• 挑戰(zhàn)中等和半定結(jié)果；
• 簡單而令人難忘；
• 將您的產(chǎn)品與競爭對手區(qū)分開來。

定義出色的產(chǎn)品原則：研討會的想法。

材料：便利貼，鋼筆，墻，零食；參與者：召集項目中的利益相關(guān)者：首席工程師，產(chǎn)品經(jīng)理，設計師，市場營銷等。在10分鐘內(nèi)寫下至少需與竟品區(qū)別8種品質(zhì)貼在墻上，將類似的便利貼放在一塊做聚類?；卮鹨韵聝?nèi)容并讓每個人都在注釋中進行解釋。（如果我們的產(chǎn)品是動物/一個人 /公司/電影/產(chǎn)品，那就是______又為什么呢？）要特別注意區(qū)分產(chǎn)品的原因和任何描述性屬性后聚類。

花10分鐘描述希望產(chǎn)品對用戶的感覺的3-5條原則，寫下希望產(chǎn)品避免使用的2-3個描述符并介紹自己的原則。最后列出8–15個潛在原則，共享利益相關(guān)者，在項目中溝通磨練形成最佳內(nèi)容，確定后盡一切努力貫徹在項目團隊意識中。

2）風格指南

雖然風格識別指南是相當觸覺的，設計語言指導方針更難確定。設計語言風格指導闡明一般的設計方向、哲學和方法具體項目或產(chǎn)品。設計師薩曼莎·沃倫(Samantha Warren)在設計 style tiles 時做出了回應，這是一款比情緒板更有形的可交付產(chǎn)品。

在視覺設計語言中，發(fā)散視覺風格推薦 The 20 second gut test 方法論。這個練習使涉眾在早期接觸到各種美學，通過品味差異有助于達成一些共同的審美價值。視覺設計師可抓住這些洞察開始將這些美學價值轉(zhuǎn)化為項目的視覺方向。

在項目啟動一部分會議上，向涉眾每20秒/個，展示20個相關(guān)網(wǎng)站，選擇特定于行業(yè)的站點及視覺上有趣的站點，為了增加可信度將網(wǎng)站logo改為項目logo。

對每個網(wǎng)站每人投票范圍1-10，得分1表示“如果這是我們的網(wǎng)站，我就辭職”。得分10“如果這是我們的網(wǎng)站，我一定會欣喜如狂”。發(fā)起者考慮參與者感興趣的視覺屬性，比如：排版，顏色，密度，布局，插畫風格和總體氛圍。

快速將分數(shù)加起來，聚類結(jié)果。談論得分最低的5個網(wǎng)站，得分最高的5個網(wǎng)站及爭議最大的網(wǎng)站。發(fā)起者應該解釋參與者為什么會被某個特定的網(wǎng)站吸引或排斥，并與團隊一起解決意見上的分歧。

3）基礎(chǔ)構(gòu)件

字體排版規(guī)范：

首先，了解產(chǎn)品需要支持哪些媒介：手機/平板/電腦/HMI車載屏等，其次，需要考慮如何定義Font-Color，Font-Size&Line-Height，F(xiàn)ont-Size，Font-Family

• Font-Color：關(guān)于安全色，如何保證文字的可閱讀性，常常用的3個閱讀色#333333#666666，#999999，可以通過該網(wǎng)站測試字體色與背景色的對比度是否能夠保證可讀性。
• Font-Size&Line-Height：字號大小和行高的定義從用戶特質(zhì)（年齡特征、工作環(huán)境）及可閱讀性來思考。（比如用戶視力程度如何？是比較年輕的還是比較年長的？工作環(huán)境的光線如何？）
• Font-Size：考慮字重級字體的粗細使用regular,medium,bold的使用與定義，字重的定義主要通過對比增加設計的層次與韻律。css支持字重與系統(tǒng)的字重如主light，regular，medium，bold，bolder會有差別，具體與研發(fā)調(diào)整再定義。
• Font-Family：在項目上，了解大部分的用戶使用系統(tǒng)及使用人群，方便系統(tǒng)快速識別。整個產(chǎn)品除了logo是vi字體，其余為web默認中英文。

布局規(guī)范：

間距公式：

8 的倍數(shù)在 Sketch 里建立運用刪格系統(tǒng)基于1366*768空間最大化利用y=8+8*n n>0 (eg：8,16,24,32,64px)對于諸如列表，表格，卡片，表格等常見內(nèi)容區(qū)域存在一個或多個部分和面板組成的系統(tǒng)，這些部分共同協(xié)作以創(chuàng)建一致的視覺布局。

帶側(cè)邊欄的≦1440像素屏幕的草圖布局計算：

• 畫邊寬度 – 邊欄寬度 =內(nèi)容區(qū)域
• 內(nèi)容區(qū)域- 邊距*2 =總寬度
• 邊欄寬度+邊距 = 偏移

帶側(cè)邊欄的≦1440像素示例計算：

• 1440px – 80px = 1360px
• 1360px – 50px * 2 = 1260px
• 80px + 50px = 130px

無側(cè)邊欄的≦1440像素屏幕的草圖布局計算：

• 畫邊寬度 =內(nèi)容區(qū)域
• 內(nèi)容區(qū)域-邊距*2=總寬度
• 偏移 = 0 – 僅選擇“居中”

帶側(cè)邊欄的≦1440像素示例計算：

• 1440px- 80px = 1360px
• 1440px- 50px * 2 = 1340px

偏移 = 0 – 僅選擇“居中”

4）模式庫

原子設計方法論：

組件的建立中，重點聊聊原子設計，原子設計方法論由五個不同的階段共同工作，以創(chuàng)建界面設計系統(tǒng)深思熟慮的，等級分明的方式。

原子Atoms：界面的基本元素，設計時需要考慮：

按鈕的樣式：

• Background color背景色
• Border radius圓角
• Color字體顏色
• FontSize字號
• Font-weight字重
• Font-family字體
• Padding內(nèi)邊距
• Margin外邊距
• Box-shadow陰影

交互狀態(tài)：

• Button/Primary/Default
• Button/Primary/Hover
• Button/Primary/Pressed
• Button/Primary/Disabled
• Button/Primary/Loading

大小層次：

• Small
• Medium
• Large

按鈕的層次：

• Primary
• Secondary
• Thirdly

可擴展性：

是否固定padding值，據(jù)內(nèi)容保持固定內(nèi)邊距自適應，或文字+圖標擴展形式。

一個好的設計系統(tǒng)需要設計師與研發(fā)工程師共同協(xié)作，建立統(tǒng)一認知的設計價值觀，風格指南梳理設計原則，構(gòu)建完善的組件庫，協(xié)調(diào)研發(fā)規(guī)則與協(xié)作流程，立足于創(chuàng)建可維護的長遠成功設計系統(tǒng)?；谖磥淼脑O計系統(tǒng)，創(chuàng)建適應性的，智能的能夠感知上下文并自動結(jié)合，從而減少工作負荷，AI驅(qū)動設計。

本文作者：Emilychen；公眾號：Design Thinker，UIUX設計師，從業(yè)6年+，關(guān)注設計思維及實踐，核心宗旨：設計思維驅(qū)動下的設計沉淀。

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

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