編輯導(dǎo)語：規(guī)范的制定對頁面的設(shè)計尤其重要，好的頁面設(shè)計，能夠吸引更多的用戶。那在頁面設(shè)計中，為什么需要制定規(guī)范呢？本文從原因、制定過程、推進三個部分詳細地為大家介紹規(guī)范的制定。一起來看看吧。

無規(guī)矩不能方圓，在頁面設(shè)計中亦是如此，規(guī)范的制定尤為重要，大到一個app的整體視覺，小到一個banner，卡片。都可以通過規(guī)范的制定形成統(tǒng)一的設(shè)計標(biāo)準(zhǔn)。

一、為什么需要制定規(guī)范

1. 設(shè)計規(guī)范有助于團隊內(nèi)部協(xié)作，提升工作效率

有了清晰明確的設(shè)計規(guī)范，設(shè)計師可以通過設(shè)計組件進行快速搭建，大大提高設(shè)計師的工作效。

提升設(shè)計師之間的內(nèi)部協(xié)作，同時也便于與產(chǎn)品及開發(fā)之間的溝通。

2. 設(shè)計規(guī)范有助于視覺統(tǒng)一

在日常工作中，同一個項目需求可能會由多個設(shè)計師負責(zé)維護，如果沒有統(tǒng)一的規(guī)范，每個設(shè)計師都進行自由發(fā)揮，會導(dǎo)致頁面風(fēng)格多種多樣，難以保持統(tǒng)一。

通過規(guī)范的制定，可以使整個頁面的視覺統(tǒng)一，提升用戶體驗，增強品牌感。

二、規(guī)范的制定過程

在頁面中，有很多位置都需要設(shè)計師制定相應(yīng)的設(shè)計規(guī)范。

例如到家app首頁feed流里需要增加運營位卡片，以提升轉(zhuǎn)化。

卡片內(nèi)容涉及日常保潔、維修清洗、保姆月嫂等多個業(yè)務(wù)范圍。為了后續(xù)的維護以及視覺的統(tǒng)一性，對此我們制定了相應(yīng)的設(shè)計規(guī)范。

整個卡片由主標(biāo)題、標(biāo)簽、副標(biāo)題、活動內(nèi)容、背景色、裝飾元素組成。

在卡片設(shè)計時不能僅局限于單個卡片中，同時也要將卡片放在整體頁面去中看，保證卡片與整體頁面的統(tǒng)一性。

在卡片標(biāo)題上，因為卡片的內(nèi)容不固定，所以在設(shè)計的時候需要考慮主副標(biāo)題的最長字段限制。

給出最長限制字段，并與需求方及時進行溝通，避免字段展示不下的情況。

在卡片內(nèi)容上，要考慮多種活動內(nèi)容形式，并做出相應(yīng)的樣式展示，保證視覺的一致性。

在卡片背景上，背景色采用了到家app定義的色彩規(guī)范，使卡片的顏色與整個app進行統(tǒng)一，并通過裝飾元素豐富卡片細節(jié)。

共產(chǎn)出四個背景色，可根據(jù)卡片內(nèi)容選擇相應(yīng)的卡片模版進行設(shè)計輸出。

通過最終的設(shè)計結(jié)果，制定相應(yīng)的設(shè)計規(guī)范，并與相關(guān)同學(xué)達成一致。

輸出規(guī)范文檔并及時進行同步，推動落地與實施。

以上是我在項目中的一些思考過程。

希望在日后的不斷迭代中可以做的更好，思考更全面。

三、關(guān)于規(guī)范的推進

規(guī)范文檔相當(dāng)于設(shè)計使用說明書，光有說明書還不夠，還需要建立相應(yīng)的審核機制。

經(jīng)設(shè)計師內(nèi)部審核過后，推動最終上線。

規(guī)范是否合理，通過對規(guī)范的應(yīng)用可及時獲取反饋，我們還需要不斷進行打磨和沉淀，做出相對應(yīng)的更新及調(diào)整。規(guī)范修改優(yōu)化后要及時更新規(guī)范文檔，并同步給相關(guān)設(shè)計人員。

有了規(guī)范我們就必須百分百按照規(guī)范來做嗎？

隨著業(yè)務(wù)的不斷發(fā)展，會有更多業(yè)務(wù)訴求。

一定會有當(dāng)前規(guī)范無法滿足需求的時候，后續(xù)也會作出相應(yīng)的優(yōu)化調(diào)整。

作者： 環(huán)鐵藝術(shù)家，微信公眾號：58UXD

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

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