關(guān)于移動(dòng)端UI設(shè)計(jì)規(guī)范的案例，25學(xué)堂也分享了很多，只要大家在25學(xué)堂官網(wǎng)搜索框輸入“設(shè)計(jì)規(guī)范”，就至少20種不同APP成熟案例的UI設(shè)計(jì)方案和設(shè)計(jì)規(guī)范案例。

最近，在APP設(shè)計(jì)交流群里，很多小伙伴反應(yīng)看完這些APP設(shè)計(jì)規(guī)范，自己還是不知道怎么去整理，或者說有木有一定的套路來弄。

下面我們就看看史上最簡(jiǎn)單的，最有效的教你快速去整理總結(jié)移動(dòng)端UI設(shè)計(jì)規(guī)范信息圖參考。

但是看完以上的整理總結(jié)移動(dòng)端UI設(shè)計(jì)規(guī)范信息圖案例，

25學(xué)堂的小編還是想來跟大家，好好回顧下移動(dòng)端UI設(shè)計(jì)規(guī)范的詳細(xì)整理過程。

一、UI 設(shè)計(jì)規(guī)范的使用對(duì)象及場(chǎng)景

1、產(chǎn)品和設(shè)計(jì)團(tuán)隊(duì)參照共享的設(shè)計(jì)規(guī)范。

不管是跟外部的用戶體驗(yàn)設(shè)計(jì)公司合作，還是內(nèi)部的設(shè)計(jì)團(tuán)隊(duì)執(zhí)行設(shè)計(jì)，UI 設(shè)計(jì)規(guī)范都是用來體現(xiàn)大家在產(chǎn)品設(shè)計(jì)溝通后一致確認(rèn)的方案輸出，以及為后續(xù)的產(chǎn)品迭代提供參照依據(jù)。

2、為項(xiàng)目相關(guān)的技術(shù)同事（如前端工程師、iOS / Android 工程師）實(shí)際開發(fā)和重構(gòu)提供保障。

技術(shù)在實(shí)際產(chǎn)品開發(fā)的時(shí)候，往往喜歡模式化，因?yàn)殚_發(fā)的工具語言往往有庫、類這樣的模塊化思維。UI 設(shè)計(jì)規(guī)范通過對(duì)一系列元素模塊的具體規(guī)范，既能與產(chǎn)品開發(fā)實(shí)現(xiàn)完成對(duì)接，同時(shí)又便于工程師理解。

二、什么時(shí)候輸出UI 設(shè)計(jì)規(guī)范

一般都是產(chǎn)品高保真界面經(jīng)過產(chǎn)品、設(shè)計(jì)和技術(shù)共同討論確認(rèn)后。如果產(chǎn)品的高保真界面 OK，同時(shí)內(nèi)部設(shè)計(jì)資源相對(duì)有富余，對(duì)應(yīng)的產(chǎn)品設(shè)計(jì)師就可以整理一份初版的 UI 設(shè)計(jì)規(guī)范，然后后面再填充優(yōu)化。

三、UI 設(shè)計(jì)規(guī)范的三種類型

1、平臺(tái)（系統(tǒng)）性質(zhì)，主要對(duì)于其平臺(tái)內(nèi)生態(tài)的設(shè)計(jì)指南，

例如 Google Material Design 、Apple Watch Human Interface Guidelines、Ubuntu Design；

2、品牌物料，主要提供給媒體、第三方公司等用于公關(guān)報(bào)道和設(shè)計(jì)

（PS：貌似國(guó)內(nèi)很少看到有這種整理，導(dǎo)致一些媒體報(bào)道的 logo 圖片千奇百怪），例如 Dribbble - Logo Downloads & Brand Guidelines、LinkedIn Brand Guidelines、https://www.facebookbrand.com/

3、產(chǎn)品業(yè)務(wù)相關(guān)，主要是產(chǎn)品設(shè)計(jì)和實(shí)現(xiàn)層面的方案，Web 產(chǎn)品居多，同時(shí)很多是與前端技術(shù)成果相結(jié)合，

例如 Starbucks Style Guide、Overview | Atlassian Design Guidelines；

四、UI 設(shè)計(jì)規(guī)范的具體內(nèi)容劃分：

??? 品牌 Logo 及相關(guān)物料規(guī)范；

????字體排版（Typography），即界面版式設(shè)計(jì)；

????顏色（Color）規(guī)范，產(chǎn)品主要的顏色庫；

????圖標(biāo)庫（Icon）；

????控件庫（UI Toolkit），Web 產(chǎn)品與 APP 產(chǎn)品表現(xiàn)形式可能有所差異；

????視覺框架（Visual Hierarchy），定義產(chǎn)品的交互框架結(jié)構(gòu)，與信息架構(gòu)相關(guān)；

以上四點(diǎn)就是整理總結(jié)UI設(shè)計(jì)規(guī)范的知識(shí)點(diǎn)。希望對(duì)各位有幫助