日本在线免费AⅤ视频_欧美一级网站在线播放_久久久久久免费一区二区三区_国产在线网址

無(wú)論是互聯(lián)網(wǎng)大廠，還是小公司，無(wú)論是成熟產(chǎn)品，還是新產(chǎn)品，都需要做 UI 設(shè)計(jì)規(guī)范，這不是為了顯示我們 UI 設(shè)計(jì)師有多專業(yè)，而是 UI 設(shè)計(jì)規(guī)范確實(shí)有它實(shí)際的價(jià)值。

一、UI 設(shè)計(jì)規(guī)范有什么用？

UI 設(shè)計(jì)規(guī)范的作用，概括來(lái)說(shuō)有三點(diǎn)：提升效率、保障質(zhì)量、統(tǒng)一體驗(yàn)。

交互設(shè)計(jì)師和產(chǎn)品經(jīng)理，能根據(jù)這套規(guī)范快速搭建頁(yè)面；

視覺(jué)設(shè)計(jì)師，能根據(jù)這套規(guī)范產(chǎn)出視覺(jué)風(fēng)格統(tǒng)一、細(xì)節(jié)精良的頁(yè)面；

前端工程師，能根據(jù)這套規(guī)范快速推進(jìn)開(kāi)發(fā)，遇到通用組件不清晰的地方，直接可以查；

運(yùn)營(yíng)，在某些時(shí)候，也能根據(jù)這套規(guī)范，自己搭建簡(jiǎn)單的頁(yè)面；

用戶，根據(jù)這套規(guī)范指導(dǎo)下設(shè)計(jì)的產(chǎn)品，使用起來(lái)，在視覺(jué)、交互方面有統(tǒng)一的體驗(yàn)。

國(guó)內(nèi)一些大廠做得優(yōu)秀的設(shè)計(jì)規(guī)范案例，比如螞蟻金服的 Ant Design，餓了么的 Element，已經(jīng)實(shí)現(xiàn)了端到端的體驗(yàn)一致，而且它們組件的豐富程度足夠滿足大部分使用場(chǎng)景。

二、大廠設(shè)計(jì)規(guī)范參考

想要提升自己對(duì)規(guī)范的理解和建立規(guī)范的能力，多向成熟的大廠規(guī)范學(xué)習(xí)，是很有必要的。

推薦你關(guān)注即時(shí)設(shè)計(jì)的資源廣場(chǎng)，持續(xù)分享國(guó)內(nèi)外大廠的設(shè)計(jì)規(guī)范，而且這些資源都可以免費(fèi)獲取。目前已有大廠資源，包括蘋果、谷歌、字節(jié)跳動(dòng)、螞蟻金服、餓了么、百度......

· iOS 15 設(shè)計(jì)規(guī)范和組件庫(kù)

· ArcoDesign 全套設(shè)計(jì)資源（字節(jié)跳動(dòng)內(nèi)部團(tuán)隊(duì)打造的企業(yè)級(jí)設(shè)計(jì)系統(tǒng)）

· Ant Design 全套設(shè)計(jì)資源（螞蟻金服團(tuán)隊(duì)打造的服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系）

· WeUI 設(shè)計(jì)規(guī)范（微信官方出品為微信內(nèi)網(wǎng)頁(yè)和微信小程序設(shè)計(jì)）

· Element 餓了么 設(shè)計(jì)規(guī)范

· Material Design 設(shè)計(jì)規(guī)范

· Harmony OS 設(shè)計(jì)規(guī)范

· 百度智能小程序全套設(shè)計(jì)資源

三、設(shè)計(jì)規(guī)范的制作方法

這里推薦一個(gè)原子設(shè)計(jì)理論，從這個(gè)理論的操作方法中，可以一窺設(shè)計(jì)規(guī)范的制作原理，而且使用起來(lái)也比較簡(jiǎn)單，適合那些處在開(kāi)發(fā)初期，而且規(guī)模比較小的團(tuán)隊(duì)。

原子設(shè)計(jì)就是由原子、分子、組織、模板和頁(yè)面共同協(xié)作，創(chuàng)造出用戶界面系統(tǒng)的一種設(shè)計(jì)方法論。

原子設(shè)計(jì)的五?個(gè)階段分別是：

1.原子。構(gòu)成頁(yè)面的基本元素。例如標(biāo)簽、輸入，或是一個(gè)按鈕，也可以為抽象的概念，例如字體、色調(diào)等。

2.分子。由原子構(gòu)成的簡(jiǎn)單 UI 組件。例如，一個(gè)表單標(biāo)簽，搜索框和按鈕共同打造了一個(gè)搜索表單分子。

3.組織。由原子及分子組成的相對(duì)復(fù)雜的 UI 構(gòu)成物 。

4.模版。將以上元素進(jìn)行排版，顯示設(shè)計(jì)的底層內(nèi)容結(jié)構(gòu)。

5.頁(yè)面。將實(shí)際內(nèi)容（圖片、文章等）套件在特定模板，頁(yè)面是模板的具體實(shí)例。

原子設(shè)計(jì)理論的優(yōu)點(diǎn)是一致、清晰、高效，使用的時(shí)候要根據(jù)實(shí)際情況靈活運(yùn)用，不求全面，但求實(shí)用。

「即時(shí)設(shè)計(jì)」官網(wǎng)地址：https://js.design