国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

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

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

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

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

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

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

提高開發(fā)效率、解決代碼冗余問題

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

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

幫助新人快速上手

當(dāng)新人剛加入團(tuán)隊(duì)時(shí)，對產(chǎn)品的風(fēng)格和基調(diào)可能不太熟悉或者理解不透，可能無法快速進(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è)平臺的約束是什么。

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

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

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

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

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

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

柵格系統(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è)顏色的對應(yīng)色值。

字體

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

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

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

圖標(biāo)

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

按鈕

按鈕根據(jù)主次關(guān)系，通常分幾種不同的尺寸與類型，需要標(biāo)明在什么樣的場景下使用哪一種按鈕。按鈕的顏色、字體字號都遵循該產(chǎn)品的色彩規(guī)范、字體規(guī)范。按鈕通常有三種狀態(tài)：常規(guī)狀態(tài)、點(diǎn)擊狀態(tài)和失效狀態(tài)，部分情況下可能會存在加載狀態(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ī)則從無到有的制定并非一日完成的，也并非先制定了設(shè)計(jì)規(guī)范再著手進(jìn)行界面改動(dòng)，兩者應(yīng)該同時(shí)進(jìn)行。

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

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

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

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

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

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

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

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

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

最后

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

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

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

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

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

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