工作總結(jié)_設(shè)計(jì)語言系統(tǒng)（DLS）

1.設(shè)計(jì)規(guī)范的意義：

視覺語言和其他語言一樣，都是能傳遞信息的契吉。如果不能有效的表達(dá)意義漠其，那么視覺語言就沒有表現(xiàn)該有的意義。

制定規(guī)范首先應(yīng)該要提高使用效率瑞驱，其次才是品牌的傳播和內(nèi)容的沉淀娘摔，不應(yīng)該本末倒置。

2.規(guī)范的分類：

分為系統(tǒng)性和產(chǎn)品性規(guī)范

系統(tǒng)性規(guī)范：包括IOS唤反、Android凳寺、支付寶&微信的錢包接口之類的規(guī)范。系統(tǒng)性大規(guī)范需要考慮多方面情況彤侍，要從宏觀的角度去考慮肠缨；而像支付寶一類的設(shè)計(jì)要遵循系統(tǒng)規(guī)范，也是為了最大限度保證與系統(tǒng)體驗(yàn)的一致性

產(chǎn)品性規(guī)范：包括手機(jī)淘寶盏阶、QQ之類的單一產(chǎn)品晒奕。由一個團(tuán)隊(duì)來進(jìn)行設(shè)計(jì)，自己團(tuán)隊(duì)設(shè)定品牌規(guī)范和視覺語言名斟，體現(xiàn)產(chǎn)品特色脑慧。能更好，更合理的匹配產(chǎn)品的業(yè)務(wù)訴求

3.規(guī)范的使用角色：

包括設(shè)計(jì)師砰盐、產(chǎn)品經(jīng)理和開發(fā)人員三類人員漾橙。

產(chǎn)品經(jīng)理：對規(guī)范的需求，是幫助不同產(chǎn)品經(jīng)理之間對于同一模塊的理解楞卡，了解和說明業(yè)務(wù)的背景和原理霜运，而并不需要嚴(yán)格意義上的執(zhí)行。

技術(shù)開發(fā)：在確定好一個規(guī)范控件以編碼以后蒋腮，直接在庫里調(diào)用就可以了淘捡。在未來不改版的情況下，日常使用下是可以擺脫對規(guī)范的需求池摧。

設(shè)計(jì)師：大部分情況下焦除，日常工作基本上還是設(shè)計(jì)師在使用和制定設(shè)計(jì)規(guī)范。

總之作彤，大而全的設(shè)計(jì)規(guī)范可讀性較差膘魄，要針對性的讓規(guī)范可讀性和使用性強(qiáng)。

4.設(shè)計(jì)規(guī)范的理想形態(tài)：

首先竭讳，現(xiàn)在的規(guī)范多參考系統(tǒng)性規(guī)范的思路和模板创葡，以一個個控件為基準(zhǔn)。這樣導(dǎo)致的后果就是設(shè)計(jì)師在執(zhí)行具體業(yè)務(wù)的時候绢慢，還是需要自己思考控件怎么組合灿渴。

然而，理想的規(guī)范使用是：在設(shè)計(jì)師接到業(yè)務(wù)需求后，能通過規(guī)范找到合適根控件kit骚露，然后快速搭建業(yè)務(wù)界面蹬挤，再根據(jù)具體業(yè)務(wù)需求單獨(dú)修改文案、icon棘幸、圖片等元素焰扳，快速輸出方案。

當(dāng)然误续，更重要的是蓝翰，根控件kit是固定的，而業(yè)務(wù)需求是變化的女嘲，設(shè)計(jì)師會因?yàn)椴煌枨笥龅讲煌慕缑娣答佇蠓荩@些內(nèi)容決定了設(shè)計(jì)的結(jié)果是動態(tài)的。所以欣尼，在設(shè)計(jì)根控件kit的時候爆雹，需要多考慮靜態(tài)內(nèi)容模塊的源文件在真實(shí)業(yè)務(wù)場景里的變化規(guī)則。能對已有和未來可能要發(fā)生的組件做出預(yù)判愕鼓，這樣才能保證整個設(shè)計(jì)具有良好的擴(kuò)張性钙态。

5.設(shè)計(jì)規(guī)范的開發(fā)時間節(jié)點(diǎn)：

在開始創(chuàng)做時不要設(shè)定規(guī)范，會導(dǎo)致設(shè)計(jì)畏首畏尾

在1.0版本設(shè)計(jì)結(jié)束時菇晃，再制定規(guī)范又比較晚了册倒，很多東西開發(fā)出來又不行了

一般在概念稿定版后開始設(shè)定規(guī)范，在批量生產(chǎn)

6.產(chǎn)品性規(guī)范的思路：

分為設(shè)計(jì)準(zhǔn)則磺送、素材庫驻子、指南三部分。

a.設(shè)計(jì)準(zhǔn)則：

產(chǎn)品性規(guī)范更貼近產(chǎn)品估灿，能有效執(zhí)行崇呵，可操作性不強(qiáng)；系統(tǒng)性規(guī)范相對模糊馅袁，只能通過設(shè)計(jì)語言進(jìn)行建議域慷。

1.自然：界面設(shè)計(jì)都是模擬自然界的真實(shí)存在，符合物理規(guī)則下的視覺效果汗销。

2.有序：業(yè)務(wù)間的樣式是保持一致的犹褒，使業(yè)務(wù)之間能有連續(xù)性。

3.無痕：提倡高效的協(xié)作弛针。去除無意義的裝飾叠骑，有效呈現(xiàn)界面的信息，保證代碼和設(shè)計(jì)無縫對接钦奋。

b.素材庫：

主要是指樣式座云，比如信息流分為多圖、單圖付材、商品評價(jià)朦拖、商品詳情樣式等。

c.指南：

主要指使用建議厌衔，如色號璧帝、字體大小、熱區(qū)富寿、色彩睬隶、透明度、尺寸页徐、間距等使用情況等苏潜。

7.設(shè)計(jì)規(guī)范細(xì)致分類：

a.組件

含義：

組件是指符合平臺的整體規(guī)范，有較高的可復(fù)用性变勇，具備完善的使用說明和代碼文檔的控件恤左。

組成：

1.可以是按鈕、表單搀绣、圖片樣式等飞袋。

2.可以是基于組件衍生的子組件，某表單生成的子表單樣式等链患。

構(gòu)成：

1.原子組件和分子組件的概念：原子組件+原子組件=分子組件（但這種狀態(tài)知識相對的巧鸭，更好的方式是維持動態(tài)的生態(tài)模式）

2.頁面>組件>元素>圖片=文字=icon=彈窗

使用說明：

1.說明元素意義（比如功能、對用戶的作用麻捻、能提供什么信息）

2.使用規(guī)則纲仍、限制情況（用的時候要注意什么、有什么限制）

3.使用場景（在哪用贸毕，怎么用）

4.一致性（新設(shè)計(jì)的組件巷折，在哪些部分要和原有組件保持一致）

5.組合性(擴(kuò)展子組件時，有什么特殊性)

6.各種狀態(tài)（不同操作狀態(tài)下呈現(xiàn)的樣貌）

7.平臺差異性（不同平臺上崖咨，同種組件的差別）

8.正確&錯誤示范（標(biāo)出常見的錯誤情況锻拘，節(jié)省來回修改時間）

載體：

1.規(guī)模不大的產(chǎn)品，以頁面為載體展示組件击蹲。以頁面流程為基礎(chǔ)署拟，添加合適的控件「璨颍基于場景推穷，能避免脫離場景閱讀設(shè)計(jì)文檔的空洞感。

2.規(guī)模較大的產(chǎn)品类咧，需要和開發(fā)溝通一遍馒铃，需要使用說明做支撐蟹腾。

b.字體

1.字體樣式盡量保持在1-2個之間

2.字體樣式不要違背設(shè)計(jì)氛圍，每種字體都有自己內(nèi)在傳遞的意義

3.字體選擇的順序：英>日>中

4.字體選擇也會受到系統(tǒng)和瀏覽器的影響区宇，對于后臺調(diào)用的數(shù)據(jù)娃殖，一般不要用特殊字體設(shè)計(jì)，系統(tǒng)會自動使用默認(rèn)字體

5.字體層級一般分為：一級標(biāo)议谷、二級標(biāo)炉爆、一級正文、二級正文卧晓、注釋

對應(yīng)字體大小芬首，盡量用雙數(shù)字號【web端：24、20逼裆、16郁稍、14、12胜宇；移動端：32-34艺晴、30-32、28-30掸屡、26-28封寞、22】

6.挑選字體時，保證一定的跨度仅财，使界面層級明顯

c.色彩層次

1.字體色彩狈究，一般分為3層常見色值：333333 ?666666 ?999999

2.分割線色彩，一般分為2層常見色值：一深一淺【編碼盡量為AAAAAA ?ABABAB】

3.背景色彩盏求，一般分為3層常見色值：FFFFFF +一深一淺【編碼根據(jù)具體情況而定】

d.尺寸

1.尺寸盡量為偶數(shù)

2.統(tǒng)一尺寸抖锥，學(xué)會歸納控件類型，把相同類型控件歸為一類碎罚，做尺寸做歸集磅废，分清層次

3.在前期開發(fā)時，對每種小控件荆烈，比如選框拯勉、按鈕、頭像憔购、圖片宫峦、tag等做分類，一般先分為3個層級玫鸟，再在迭代情況下進(jìn)行層級擴(kuò)展

4.首先在保證界面沒美感的情況下导绷，做到同類控件尺寸、寬高比都有一定規(guī)律可循

5.在統(tǒng)一尺寸范圍內(nèi)繪制原始icon屎飘，再根據(jù)具體需求進(jìn)行放大縮小妥曲，統(tǒng)一線型贾费，倒角、設(shè)計(jì)區(qū)域

【PC端：16檐盟、24褂萧、32、48遵堵、64箱玷、128怨规、256陌宿；移動端：16、24波丰、32壳坪、48、64掰烟、128】

6.控件尺寸要盡可能被各種數(shù)整除爽蝴，這樣能滿足同一控件不同狀態(tài)的尺寸需求。通過觀察各種UIkit發(fā)現(xiàn)纫骑，不同控件最后都能拼成一個方塊蝎亚，這證明各控件尺寸之間是存在一定數(shù)值關(guān)系的

5.保證控件的層級和復(fù)用性，在滿足設(shè)計(jì)需求的前提下先馆，能少一種控件就不多一種发框，減少不必要的代碼壓力，也能保證視覺的統(tǒng)一性

7.縱向尺寸上可以多看看經(jīng)典界面如何做的煤墙，借鑒尺寸梅惯，如導(dǎo)航欄、tab欄等【有規(guī)范按規(guī)范來仿野，沒規(guī)范按經(jīng)典界面來】

8.控件的圓角铣减、陰影在CSS3之后都可用代碼實(shí)現(xiàn)，做好規(guī)范即可

e.布局

1.web端首屏布局尺寸一般控制在1170*620左右脚作，這個尺寸能較好適配不同屏幕葫哗。【高620：是去除瀏覽器導(dǎo)航球涛、系統(tǒng)工具欄之后的凈尺寸魄梯；寬1170：是市面大多數(shù)瀏覽器的在去除邊框等數(shù)值后的凈尺寸】

1.只做典型界面的布局設(shè)定，只做基礎(chǔ)框架宾符，以基礎(chǔ)框架為原型酿秸，進(jìn)行擴(kuò)展，對大框架進(jìn)行標(biāo)注

2.確定各個模塊魏烫，明確各個模塊的設(shè)計(jì)區(qū)域

3.盡量做到布局上的12分法辣苏，有利于開發(fā)做響應(yīng)式布局

4.同種控件中肝箱，各邊距保持一致。間距可在屏幕尺寸變化是稀蟋，靈活調(diào)動

5.清晰的間距能暗喻層次關(guān)系煌张，外邊距>內(nèi)邊距

6.間距也按照同種類型進(jìn)行排布，在一個控件中出現(xiàn)各種各樣的間距

f.狀態(tài)

1..反饋狀態(tài)：按鈕類反饋：【nor退客、hover骏融、active、disable】形式要統(tǒng)一萌狂；控件框類反饋：默認(rèn)档玻、觸發(fā)、出錯狀態(tài)

3.常規(guī)狀態(tài)：輸入框水印態(tài)茫藏、頁面空狀態(tài)

4.觸發(fā)新增狀態(tài)：輸入框下拉態(tài)【待補(bǔ)充】

g.風(fēng)格

1.在對各種空間了解熟悉之后误趴，平時多觀察同種控件在設(shè)計(jì)樣式上的不同。比如tabs务傲、面包屑導(dǎo)航等凉当，都有很多種不同樣式

2.色彩能確定產(chǎn)品的調(diào)性，幾個色彩的搭配能決定產(chǎn)品的風(fēng)格售葡。色彩一般1+3【即1主色看杭、3輔色：輔色可以是主色的對比色or臨近色】，盡量控制在4種以內(nèi)

8.注意事項(xiàng)：

1.規(guī)范要讓人們愿意使用挟伙，一甩幾十頁的規(guī)范楼雹，學(xué)習(xí)成本太高，別人看起來也煩

2.規(guī)范要有參考性像寒，對每個控件必要的使用說明是一定需要的

3.制作80%的規(guī)范烘豹，要給設(shè)計(jì)師發(fā)揮的空間

4.規(guī)范不是萬能的，不僅用來提升體驗(yàn)和審美诺祸，也需要不斷迭代和執(zhí)行携悯，才能達(dá)到設(shè)計(jì)規(guī)范的目的

5.規(guī)范是會迭代變化的要根據(jù)產(chǎn)品情況進(jìn)行增減，不要被規(guī)范綁架

6.規(guī)范或者設(shè)計(jì)作品要定期打印出來展示筷笨，對作品進(jìn)行評判憔鬼，指出優(yōu)缺點(diǎn)，才能去想解決方案胃夏，更加優(yōu)化設(shè)計(jì)或規(guī)范