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

設(shè)計(jì)規(guī)范對(duì)于設(shè)計(jì)師來(lái)說(shuō)并不陌生，日常工作中也經(jīng)常使用。統(tǒng)一的設(shè)計(jì)規(guī)范不僅有利于設(shè)計(jì)師提升效率，同樣可以幫助產(chǎn)品、開(kāi)發(fā)、運(yùn)營(yíng)、測(cè)試等相關(guān)人員對(duì)產(chǎn)品的體驗(yàn)有更好的認(rèn)知。

什么是UI設(shè)計(jì)規(guī)范

通俗來(lái)說(shuō)，設(shè)計(jì)規(guī)范是圍繞在某種風(fēng)格或者大型設(shè)計(jì)項(xiàng)目下形成可視化、數(shù)據(jù)化的標(biāo)準(zhǔn)，針對(duì)相對(duì)獨(dú)立的體系建立的統(tǒng)一遵守條款。

UI即User Interface（用戶界面），UI設(shè)計(jì)規(guī)范是基于用戶界面產(chǎn)品而制定的一套可復(fù)用設(shè)計(jì)庫(kù)，也是為了方便設(shè)計(jì)師、開(kāi)發(fā)和測(cè)試人員共同協(xié)作，而遵循的規(guī)律和法則。

產(chǎn)品要有可遵循的標(biāo)準(zhǔn)來(lái)規(guī)范視覺(jué)呈現(xiàn)和元素定義，保證日后的迭代可以延續(xù)產(chǎn)品所傳遞的思想和價(jià)值，能最大限度保證產(chǎn)品的一致性。

為什么要做設(shè)計(jì)規(guī)范

統(tǒng)一產(chǎn)品風(fēng)格

對(duì)于同一個(gè)產(chǎn)品的多個(gè)頁(yè)面來(lái)說(shuō)，統(tǒng)一的設(shè)計(jì)規(guī)范能夠使得產(chǎn)品視覺(jué)風(fēng)格保持一致。同時(shí)可以保障良好的用戶體驗(yàn)。

一個(gè)大型項(xiàng)目的視覺(jué)稿，往往會(huì)有幾十個(gè)甚至是上百個(gè)頁(yè)面。哪怕自己一手包辦全部頁(yè)面，恐怕也很難統(tǒng)一各個(gè)控件的樣式，因?yàn)樵谠O(shè)計(jì)過(guò)程中很容易產(chǎn)生細(xì)微的出入，時(shí)間長(zhǎng)了也會(huì)忘記部分參數(shù)，導(dǎo)致每個(gè)控件都可能會(huì)有細(xì)微的差別。

更何況多個(gè)設(shè)計(jì)師共同合作，如果沒(méi)有及時(shí)制定規(guī)范，每個(gè)人自由發(fā)揮，同一個(gè)控件便會(huì)出現(xiàn)不同的樣式。

例：同一個(gè)產(chǎn)品中，設(shè)計(jì)師A的按鈕是2px圓角，設(shè)計(jì)師B的按鈕做成了8px，同時(shí)設(shè)計(jì)師C頁(yè)面的按鈕又做成了全圓角。

提高開(kāi)發(fā)效率、解決代碼冗余問(wèn)題

通過(guò)設(shè)計(jì)規(guī)范，程序員可以了解到哪些控件是可以一次性寫(xiě)好并能重復(fù)調(diào)用，同時(shí)在規(guī)范的輔助下，程序員在搭建全局共用元素時(shí)規(guī)則更會(huì)加清晰。

例如icon、按鈕、行間距、字體大小、色值等等。這樣既可以提高開(kāi)發(fā)效率，又可以減少客戶端安裝包的大小。

幫助新人快速上手

當(dāng)新人剛加入團(tuán)隊(duì)時(shí)，對(duì)產(chǎn)品的風(fēng)格和基調(diào)可能不太熟悉或者理解不透，可能無(wú)法快速進(jìn)入設(shè)計(jì)工作，這時(shí)設(shè)計(jì)規(guī)范就可以幫他們快速上手，提高工作效率，并且也能保持產(chǎn)品風(fēng)格和控件的統(tǒng)一性。

如何制定UI設(shè)計(jì)規(guī)范

第1步：明確設(shè)計(jì)原則

設(shè)計(jì)師要清楚的知道，產(chǎn)品需要傳遞給用戶的設(shè)計(jì)特征和原則是什么，以及整個(gè)平臺(tái)的約束是什么。

在 facebook 的設(shè)計(jì)語(yǔ)言原則里面，強(qiáng)調(diào)了他們的設(shè)計(jì)價(jià)值觀：通用、人性、干凈、統(tǒng)一、有用、快速、透明，在 facebook 所有設(shè)計(jì)中，都將這些要點(diǎn)作為他們?cè)O(shè)計(jì)的指導(dǎo)準(zhǔn)則。

蘋(píng)果的設(shè)計(jì)規(guī)范包括：完整性、一致性、直接操作、反饋、隱喻、用戶控制等。

設(shè)計(jì)語(yǔ)言系統(tǒng)可以讓產(chǎn)品在不同終端、不同場(chǎng)景中的表現(xiàn)保持一致性，也有機(jī)會(huì)通過(guò)植入品牌基因的方式形成視覺(jué)錘，提升產(chǎn)品的識(shí)別度以及消費(fèi)者對(duì)品牌的認(rèn)知。

因此，我們?cè)诮⒃O(shè)計(jì)規(guī)范的第一步，是根據(jù)公司戰(zhàn)略布局，結(jié)合此產(chǎn)品的終極目標(biāo)和產(chǎn)品定位，建立設(shè)計(jì)準(zhǔn)則，明確設(shè)計(jì)原則，以保證整個(gè)設(shè)計(jì)體系的高效率和一致性，并以此來(lái)檢驗(yàn)設(shè)計(jì)的標(biāo)準(zhǔn)性，為具體的設(shè)計(jì)問(wèn)題提供解決方案。

第2步：制定基礎(chǔ)規(guī)范

任何一款產(chǎn)品都需要制定基礎(chǔ)規(guī)范來(lái)保持整體的一致性?；A(chǔ)規(guī)范包含柵格系統(tǒng)、色彩、字體等最基礎(chǔ)的內(nèi)容，此次以移動(dòng)端為例來(lái)進(jìn)行說(shuō)明：

柵格系統(tǒng)

建立橫向柵格系統(tǒng)，常用的是12柵格，12柵格比較好的地方能夠同時(shí)被2、3、4整除。因此能夠根據(jù)具體需求靈活的設(shè)計(jì)各種模塊。當(dāng)然如果產(chǎn)品比較輕量化，可以根據(jù)需求設(shè)置6、4甚至2柵格等。

還有一種是網(wǎng)格系統(tǒng)，制定最小的設(shè)計(jì)單位，界面中所有間距必須采用最小單位的倍數(shù)，包括模塊之間的間距、文本之間的間距等。比如制定最小單位為4，那么排版時(shí)橫向和縱向的間距都是4的倍數(shù)，比如8，12，24。根據(jù)最小單位制定間距，包括模塊之間間距、文本之間間距等。

色彩

色彩規(guī)范要標(biāo)明色彩的色值和使用范圍，包含主色、輔助色、狀態(tài)用色、文本色等。

如果使用到漸變色，需要標(biāo)注漸變色的色值和角度。

夜間模式需要額外注明日間和夜間模式下各個(gè)顏色的對(duì)應(yīng)色值。

字體

字體規(guī)范需要提取出各個(gè)場(chǎng)景下用到的字號(hào)，加以整理和說(shuō)明，需要讓其他設(shè)計(jì)師清晰的理解什么樣的場(chǎng)景用什么樣的字號(hào)。各個(gè)字號(hào)的行高也需要標(biāo)明，否則容易出現(xiàn)參差不齊的行間距，影響閱讀體驗(yàn)。

第3步：制定控件規(guī)范

控件相當(dāng)于由色彩、文字、圖形等組成的一個(gè)個(gè)小元素，遵循基礎(chǔ)規(guī)范，包含圖標(biāo)、按鈕、標(biāo)簽、分頁(yè)器、氣泡、提示框等?？丶糠忠呀?jīng)是一個(gè)比較龐大的內(nèi)容，所以以下我只做一小部分的示范。

圖標(biāo)

為保證不同形狀的圖標(biāo)在視覺(jué)上保持大小一致，需要制作一個(gè)圖標(biāo)繪制模板和圖標(biāo)制作說(shuō)明。說(shuō)明中標(biāo)明圖標(biāo)的圓角、描邊的粗細(xì)等。

按鈕

按鈕根據(jù)主次關(guān)系，通常分幾種不同的尺寸與類(lèi)型，需要標(biāo)明在什么樣的場(chǎng)景下使用哪一種按鈕。按鈕的顏色、字體字號(hào)都遵循該產(chǎn)品的色彩規(guī)范、字體規(guī)范。按鈕通常有三種狀態(tài)：常規(guī)狀態(tài)、點(diǎn)擊狀態(tài)和失效狀態(tài)，部分情況下可能會(huì)存在加載狀態(tài)，因此需要標(biāo)明按鈕在這些狀態(tài)下的樣式。

第4步：制定組件規(guī)范

組件由多個(gè)控件組合而成，因此需要在基礎(chǔ)規(guī)范和控件規(guī)范比較完善的情況下再去制定。組件通常包含導(dǎo)航、表單、彈窗、浮層、加載、缺省狀態(tài)等。同樣以下只做一小部分的示范。

導(dǎo)航

導(dǎo)航分為頂部導(dǎo)航欄、底部導(dǎo)航欄、分段器、樓層定位等。

以頂部導(dǎo)航欄為例，標(biāo)題需要注意文字的極限值，圖標(biāo)位置和間距要考慮最小可點(diǎn)擊區(qū)域，熱區(qū)之間不能重疊。

UI設(shè)計(jì)規(guī)范注意點(diǎn)

規(guī)范建立時(shí)機(jī)

規(guī)則從無(wú)到有的制定并非一日完成的，也并非先制定了設(shè)計(jì)規(guī)范再著手進(jìn)行界面改動(dòng)，兩者應(yīng)該同時(shí)進(jìn)行。

在經(jīng)過(guò)一次版本升級(jí)后，才有一個(gè)確定的設(shè)計(jì)規(guī)范，否則很可能被所謂的規(guī)范束縛住手腳，到頭來(lái)還是東拼西湊毫無(wú)可遵循的標(biāo)準(zhǔn)可言，那制定設(shè)計(jì)規(guī)范的意義就不存在了。

最佳時(shí)機(jī)是在完成風(fēng)格定位后開(kāi)始著手基礎(chǔ)規(guī)范和控件規(guī)范，根據(jù)基礎(chǔ)控件進(jìn)行其他頁(yè)面拓展，然后建立組件規(guī)范，并后期逐步完善規(guī)范，這樣可以承上啟下高效完成工作。

規(guī)范的尺度與范圍

有時(shí)做新頁(yè)面，如果很死板的100%遵循規(guī)范，做出來(lái)的視覺(jué)效果可能不是很好，太過(guò)全面的規(guī)范會(huì)影響設(shè)計(jì)師發(fā)揮。

一些特殊場(chǎng)景下，規(guī)范需要靈活變通。

例：部分強(qiáng)烈營(yíng)銷(xiāo)活動(dòng)場(chǎng)景中，頂部導(dǎo)航、主內(nèi)容的上下左右間隔可遵循統(tǒng)一的設(shè)計(jì)規(guī)范，其他根據(jù)不同場(chǎng)景進(jìn)行了自由發(fā)揮，從而給用戶帶來(lái)截然不同的視覺(jué)感受。

優(yōu)秀的設(shè)計(jì)規(guī)范既能統(tǒng)一方向和基本參數(shù)，又能預(yù)留無(wú)數(shù)的可能性來(lái)保證擴(kuò)展性。因此適當(dāng)?shù)匕芽睾迷O(shè)計(jì)規(guī)范的尺度與范圍，需要在制定規(guī)范的過(guò)程中，將必須遵循的部分需要進(jìn)行詳細(xì)說(shuō)明。

及時(shí)迭代規(guī)范

在完成v1.0版規(guī)范后，產(chǎn)品還會(huì)一直迭代，產(chǎn)品改版過(guò)程中必定會(huì)不斷優(yōu)化設(shè)計(jì)。因此，在產(chǎn)品迭代過(guò)程中需要對(duì)舊規(guī)范進(jìn)行更新優(yōu)化，不合適的、過(guò)時(shí)的規(guī)范需要及時(shí)同步歸納，并及時(shí)通知到項(xiàng)目相關(guān)人員。要不然，陳舊的規(guī)范無(wú)法幫助設(shè)計(jì)工作的開(kāi)展，反而會(huì)造成一種負(fù)面影響。

最后

另外，還有很多內(nèi)容沒(méi)有展開(kāi)說(shuō)，比如創(chuàng)建和維護(hù)規(guī)范化組件庫(kù)的方式之一：Sketch Libraries。

Libraries功能可以幫助我們創(chuàng)建獨(dú)立的、能夠被多個(gè)文件統(tǒng)一調(diào)用的Symbols庫(kù)。將所有的控件和組件制作成一個(gè)個(gè)Symbols，當(dāng)你修改了Libraries源文件，相關(guān)的變化也會(huì)同步更新到所有的項(xiàng)目文件當(dāng)中。這對(duì)于界面元素更加標(biāo)準(zhǔn)與統(tǒng)一，對(duì)于產(chǎn)品的維護(hù)和迭代更加效率。

希望小伙伴們?cè)跇?gòu)建自己產(chǎn)品的設(shè)計(jì)規(guī)范時(shí)，要圍繞產(chǎn)品的設(shè)計(jì)原則，針對(duì)目標(biāo)用戶制定設(shè)計(jì)規(guī)范，做到簡(jiǎn)樸、易懂、能落地。

作者：張蕾，消費(fèi)者平臺(tái)研發(fā)中心 視覺(jué)設(shè)計(jì)師，公眾號(hào)：蘇寧設(shè)計(jì)

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

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