分享流程
graph TD
A[制作設(shè)計(jì)規(guī)范] -->|A1| B(制作設(shè)計(jì)組件)
B -->D[更新設(shè)計(jì)規(guī)范]
B -->E[開發(fā)制作開發(fā)組件]
B -->F[更新開發(fā)規(guī)范]
E -->G[設(shè)計(jì)規(guī)范落地]
制作設(shè)計(jì)規(guī)范過程可以幫助去總結(jié)自己的項(xiàng)目,
熟悉自己的設(shè)計(jì)風(fēng)格
個(gè)人的設(shè)計(jì)風(fēng)格可以在日積月累中漸漸體現(xiàn).不斷地在接受外界的內(nèi)容,自己其實(shí)也在不斷的轉(zhuǎn)化.
加深對排版的感覺
因?yàn)槭謾C(jī)的屏幕十分有限,所以相差微小數(shù)值的內(nèi)容,看起來也很不一樣.
不同權(quán)重內(nèi)容icon
可以理解不同的字體和不同的權(quán)重內(nèi)容該怎么區(qū)分.
- 設(shè)計(jì)語言設(shè)定包含了蹋宦，設(shè)計(jì)原則冷冗、色彩系統(tǒng)蒿辙、顏色系統(tǒng)须板、柵格系統(tǒng)兢卵、圖形（圖片秽荤、插畫和icon）、字體牍氛、投影烟阐、動(dòng)效等原則
- 規(guī)范的用處
- 移動(dòng)端和網(wǎng)頁的端的常用font大小及icon大小
- 隨著流行趨勢的改變和手機(jī)屏幕的變大蜒茄，死板的設(shè)計(jì)嵌套是肯定不行的檀葛。
-
柵格系統(tǒng)的應(yīng)用
- 網(wǎng)頁端應(yīng)用
- 移動(dòng)端應(yīng)用
組件的應(yīng)用及助力
- 制作規(guī)范的常用方法以及規(guī)范在團(tuán)隊(duì)中的落地使用
- 探討與開發(fā)對接的設(shè)計(jì)規(guī)范文檔
1. 規(guī)范的用處
1. 使設(shè)計(jì)元素不那么雜亂
設(shè)計(jì)規(guī)范就是為了避免雜亂屿聋，使設(shè)計(jì)語言統(tǒng)一
同樣是設(shè)計(jì)，不可能把淘寶的設(shè)計(jì)元素直接去套用在微信上面转锈。
一個(gè)APP或者網(wǎng)站的設(shè)計(jì)可以包含數(shù)十甚至上百的頁面黑忱，如果每個(gè)設(shè)計(jì)師根據(jù)自己的喜好建立了很多個(gè)pattern樣式甫煞，在當(dāng)前的頁面看起來沒問題冠绢，但是當(dāng)和其他頁面對比的時(shí)候才發(fā)現(xiàn)自己用了多少不同的樣式弟胀。
這是對開發(fā)資源的一種浪費(fèi)孵户，更是對于APP自身設(shè)計(jì)語言的破壞夏哭。
建立用戶對于APP（品牌）的認(rèn)知
用戶在從打開APP的那一刻起竖配，就在不斷地對APP進(jìn)行建立認(rèn)知里逆，就像是去熟悉一個(gè)陌生人原押。APP里面的設(shè)計(jì)元素和交互元素就像是陌生人發(fā)出的“語言”诸衔。這些語言不斷在用戶頭腦中建立認(rèn)知颇玷。用戶知道淘寶是一個(gè)怎樣怎樣的APP亚隙，有著什么樣的性格阿弃。
需要注意的是設(shè)計(jì)并不應(yīng)該成為用戶關(guān)注的重點(diǎn)
色彩系統(tǒng)
一個(gè)APP的色彩系統(tǒng)就像是一個(gè)活動(dòng)頁面一樣渣淳。
圖形（圖片、插畫和icon）
字體
應(yīng)該是也能從APP包里面導(dǎo)入其他的字體的吧
動(dòng)效
2. 基礎(chǔ)UI元素
按鈕
當(dāng)我們設(shè)計(jì)按鈕時(shí)旁赊，優(yōu)先要從高度入手终畅，再去定義寬竟闪。為了便于新手理解炼蛤，我首先從高度上來匹配權(quán)重理朋，分成高子寓、中斜友、低三類：
高權(quán)重：40-56pt
中權(quán)重：24-40pt
低權(quán)重：12-24pt
輸入框的使用高度尺寸鲜屏，常規(guī)在 36-56pt 之間国拇。低于 36pt 時(shí)則輸入框看起來會非常擁擠
高權(quán)重的按鈕酱吝，類似登錄頁的注冊务热、登錄，購物詳情頁的購買捆毫，流程頁中的下一步绩卤，它的最小高度應(yīng)該從 40pt 開始遞增江醇，低于這個(gè)大小陶夜，那么這個(gè)按鈕就很難在這個(gè)頁面起到視覺支撐律适，因?yàn)楦杏X太細(xì)了。
最大寬度應(yīng)該小于內(nèi)容距離上下的 2 倍
而圓角的設(shè)置范圍纠修，不大于高度的 1/4
字體
在中文應(yīng)用中建議使用的字號：
標(biāo)題：28、24辰妙、22、20
正文：18蛙婴、16街图、14
注釋：12餐济、11
圖標(biāo)
所以，對矩形尺寸定義的建議：
最大：64篙悯、56辕近、48
中等：44匿垄、36椿疗、32
最锌返俊：28倔喂、24席噩、20
3. 柵格系統(tǒng)的應(yīng)用
電腦端
移動(dòng)端
| 8等分 | 網(wǎng)格 | 外邊距 | 列寬 | 水槽 |
|---|---|---|---|---|
| 大小 | 8px | 32px | (750-32X2-24X7)?8=65px | 24px |
3. 組件的應(yīng)用
為什么能夠那么快速的實(shí)現(xiàn)這些功能？因?yàn)樵O(shè)計(jì)師已經(jīng)事先將這些東西用了兩三天或者一個(gè)星期將這些東西做成了組件。
以后隨時(shí)調(diào)用就可以了名船。
開發(fā)可以同上述一樣將代碼進(jìn)行組件化渠驼。這樣對設(shè)計(jì)和開發(fā)來說都有好處渴邦。
對設(shè)計(jì)師的意義
對開發(fā)者的意義
如果說讓開發(fā)根據(jù)設(shè)計(jì)師的組件去制作組件的話瓮床，那就需要設(shè)計(jì)師對于前端的搭建有一定的了解产镐。
輕度組件化
組件化開發(fā)有兩種不同程度的做法癣亚。
先講講輕度組件化述雾。它的主要思想是使用相同的html結(jié)構(gòu)和特定的class名，并且用同一段css代碼定義樣式唆缴，用同一個(gè)js函數(shù)來定義交互面徽。
我們來看看上面這個(gè)登錄框匣掸，下面3個(gè)代碼塊是它大致的代碼結(jié)構(gòu)碰酝。輸入框在其他頁面肯定也會用到，那么只需要與左邊框里的html結(jié)構(gòu)保持一致唧躲。各處頁面代碼中引用同一個(gè)css和js文件弄痹，至少做到了在一處集中管理樣式與交互。但如果組件的html結(jié)構(gòu)發(fā)生變化谐丢，修改的工作量還是會比較大蚓让。
重度組件化
重度組件化的方式可以解決這個(gè)問題历极，不過這就不僅僅停留在思想層面趟卸，對項(xiàng)目的代碼結(jié)構(gòu)都有一定的要求。
每個(gè)組件的html結(jié)構(gòu)图云、css樣式、js交互都獨(dú)立封裝管理邻邮，定義好框架和加載方式竣况，內(nèi)容在加載時(shí)從外部填充。
在重度組件化的項(xiàng)目中筒严，每個(gè)組件都做到了徹底的獨(dú)立封裝丹泉。比如這個(gè)頁頭組件，它的代碼存在于獨(dú)立的目錄下萝风，這個(gè)目錄包含了它的html結(jié)構(gòu)紫岩、css樣式规惰、js交互、資源圖泉蝌、甚至自測試模塊歇万。
那么各處頁面中要加載頁頭組件，往往只是一條語句勋陪，將數(shù)據(jù)傳入這個(gè)已存在的結(jié)構(gòu)中就行了贪磺。
組件如果要與外部進(jìn)行數(shù)據(jù)傳遞，也應(yīng)該以接口形式對外開放诅愚。組件內(nèi)部是個(gè)黑盒寒锚，外部只需要了解數(shù)據(jù)的輸入與返回，不必關(guān)心組件內(nèi)的工作原理。
4. 規(guī)范的制作及落地
完整設(shè)計(jì)規(guī)范的示例
一個(gè)完整設(shè)計(jì)規(guī)范的制作不是一天兩天就可以做出來的刹前，需要更多的思考泳赋。甚至有可能是需要一周的時(shí)間，還需要后期不斷去維護(hù)喇喉。
需求文檔的制作也不是那么的簡單祖今。都需要人員投入和時(shí)間投入。
框架設(shè)計(jì)規(guī)范的示例
在使用過程中拣技，發(fā)現(xiàn)布局參數(shù)上千诬，框架間距的代號應(yīng)與普通間距代號區(qū)分開，否則在界面大改版無法靈活地調(diào)整界面框架的間距和尺寸參數(shù)膏斤。分離框架代號（#WG）與普通代號（#W）后徐绑，研發(fā)工程師只要修改框架間距代號的數(shù)值就能快速調(diào)整框架，并且不影響界面具體代號的效果莫辨，極大地降低過往版本迭代中要逐個(gè)參數(shù)對比修改的工作量泵三。
制作規(guī)范過程中的難題
- 規(guī)范文檔和生產(chǎn)軟件不能很好的聯(lián)通，需要手動(dòng)去查衔掸。
- 規(guī)范是非常占工時(shí)的一項(xiàng)工作烫幕。
- 規(guī)范的推廣落地需要嚴(yán)格的執(zhí)行甚至是加入考核標(biāo)準(zhǔn)。
