激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

說說UI設(shè)計規(guī)范的那些事兒

發(fā)布時間：2024-03-12 14:06:51 瀏覽量：129次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

幫助新人快速上手

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

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

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

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

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

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

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

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

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

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

柵格系統(tǒng)

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

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

色彩

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

分享

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定