設(shè)計規(guī)范是遵循一定的設(shè)計原則，在產(chǎn)品周期下不斷進(jìn)行迭代和升級。變化的用戶習(xí)慣，以及新的交互模式，因此需要不斷跟緊潮流了解新興事物，保持好奇心，才能產(chǎn)出更具有時代特性的產(chǎn)品。

設(shè)計規(guī)范一詞于我入設(shè)計行業(yè)之時便始終伴隨著我，這是一個貫穿始終卻又作用良多的物件兒。

先有產(chǎn)品還是先有規(guī)范？

在設(shè)計過程中，產(chǎn)品的各項功能從1.0版本的基礎(chǔ)功能到后來2.0、3.0等的期望功能、興奮功能等會，產(chǎn)品在不斷的經(jīng)歷迭代，不停蛻變。在一開始你是無法預(yù)測產(chǎn)品未來的走向的，所以，設(shè)計規(guī)范也會經(jīng)歷1.0、2.0、3.0……的迭代

而這些迭代必然是根據(jù)產(chǎn)品不停的發(fā)展帶來的反饋，在一些細(xì)小的變化及修改積累到一定程度的時候，就會為產(chǎn)品帶來一系列新的風(fēng)格變化，且不再適用于之前的規(guī)范。所以，必須對規(guī)范進(jìn)行更新及修改，來適應(yīng)新走向，給產(chǎn)品帶來新一輪風(fēng)格升級，確保產(chǎn)品一致性。

設(shè)計規(guī)范都是什么樣兒的？

設(shè)計規(guī)范內(nèi)容包含：主要色彩、文字、icon、組件、模塊、頁面。

一個產(chǎn)品的內(nèi)容物必然包括以上6點(diǎn)，這樣才能組成一個完成一個基本完整的頁面。

• 色彩：產(chǎn)品的主色調(diào)是什么，紅色、藍(lán)色、綠色、橙色。明度區(qū)分，深沉的，亮眼的，還是濃郁的，主色調(diào)決定了產(chǎn)品的整體調(diào)性。
• 文字：APP里常見的字體無非是12、14、16等的常規(guī)字體大小，你選擇字體的大小、粗細(xì)程度也是對產(chǎn)品整體風(fēng)格有一個很大的影響的，字體纖細(xì)較為時尚，字體粗重更加沉穩(wěn)。
• 圖標(biāo)：線性圖標(biāo)、塊面圖標(biāo)、雙色圖標(biāo)、多色圖標(biāo)、漸變圖標(biāo)、寫實圖標(biāo)等等
• 模塊組件：下拉列表菜單、搜索模塊、新聞模塊、信息卡片模塊、輸入模塊、按鈕等
• 頁面：首頁、新聞頁面、我的頁面、設(shè)置頁面、音頻頁面、視頻頁面、詳情頁面等。

主流設(shè)計規(guī)范

現(xiàn)在主流的設(shè)計規(guī)范，從大的方面說起，包含谷歌系統(tǒng)出具的Meterial Design，以及基于蘋果的iOS人機(jī)規(guī)范指南，還有一些大廠的整體設(shè)計組件庫比如Ant Design、Airbnb DLS等。

基于各家的產(chǎn)品風(fēng)格和設(shè)計理念產(chǎn)出的設(shè)計規(guī)范語言體系，通過模塊化的解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計者能專注于更好的用戶體驗，這種可持續(xù)性、可發(fā)展性是維護(hù)設(shè)計規(guī)范系統(tǒng)產(chǎn)生價值的核心。

設(shè)計規(guī)范的來源

設(shè)計規(guī)范基于諸多已經(jīng)成理論的設(shè)計原則，在方向上具有指導(dǎo)作用，在設(shè)計頁面時可細(xì)讀體會理解，并加以運(yùn)用?。

尼爾森10大可用性原則可謂是指導(dǎo)設(shè)計交互等的綜合性的原則，后續(xù)的很多原則都多少包含了它的影子，讓我們來重點(diǎn)解讀一下：

1. 系統(tǒng)可見性原則：在我理解呢，就是需要給予反饋，一步操作一個反饋，哪怕是輕點(diǎn)按鈕等也需要給一個狀態(tài)甚至是些微的顏色改變等，時時刻刻讓用戶有操縱感，清晰可見。
2. 場景貼切原則：你所做的一切設(shè)計都需要與真實世界做匹配，就如當(dāng)年橫空出世的iPhone，日歷、計算器、相機(jī)等都是采用的擬物風(fēng)格，就連我們習(xí)以為常的四方形圓角，那也是經(jīng)過深思熟慮之后考慮到用戶對觸屏使用的感受，圓角不會刺傷手指而做的設(shè)計，而非隨意為之。
3. 可控性原則：這里說的就是用戶的控制性能和自由度，想點(diǎn)擊哪里就跳轉(zhuǎn)對應(yīng)頁面，不希望有通知就可以及時關(guān)閉，支付方式可選擇，行為可撤銷等等，都屬于可控性原則范圍內(nèi)。
4. 一致性原則：產(chǎn)品要保持一致，不能這里的叫確定按鈕，那里的叫確認(rèn)按鈕。主色是紅色，你不能改個橘紅和玫紅一起做主要視覺色。嗯，這很好理解的吧。
5. 防錯原則：在手機(jī)等這些移動設(shè)備上操作，必不可少的會造成誤觸或者是點(diǎn)擊不當(dāng)?shù)?，輸入錯誤等，最常見的防錯原則應(yīng)用就是密碼的修改，需要你輸入兩次以作確認(rèn)，來降低輸錯的可能。還有所有頁面都可返回上一層級，死所有操作都有可修改，可取消等等。
6. 協(xié)助記憶原則：對用戶來說識別比記憶的負(fù)擔(dān)要小的多，在優(yōu)化體驗上，這也是一條非常友好的原則。案例就例如一些歷史標(biāo)簽、登錄頁面的上次登錄提示，
7. 靈活和高效原則： 智能聯(lián)想輸入等，如果你的應(yīng)用不能高效解決我的需求，那我拋棄你是非?？焖俚囊患?。
8. 美學(xué)和最簡主義原則：例如現(xiàn)在的陰影風(fēng)格設(shè)計、高光設(shè)計等，還有篇平化設(shè)計，都是基于美學(xué)原則趨于最簡主義原則的案例。
9. 幫助用戶識別、診斷、并從錯誤中恢復(fù)：密碼輸錯的提示、密碼提示找回、實在不行我們還有客服，等等
10. 幫助和文檔：一些操作的簡短提示，甚至是一些長段的介紹說明這些就是你不出問題，用戶大概率不會去看的東西，但是你一定要有。

米勒定律，也稱之為“7±2法則”，最常見的就是分段記憶，例如銀行卡號的輸入為每4位間隔一次，目的就是降低記憶成本，提高信息的易讀性，從而達(dá)到視覺防錯的作用。

席克定律也叫克制定律，選擇越多，做出選擇的時間也就越多，強(qiáng)調(diào)精簡設(shè)計。

費(fèi)茨定律，產(chǎn)品可用性中的效率指標(biāo)，距離決定你的操作效率，你需要強(qiáng)調(diào)關(guān)聯(lián)性就讓元素之間靠近，如果為了防止用戶誤操作或習(xí)慣性操作導(dǎo)致錯誤可以放遠(yuǎn)，可以正著用當(dāng)然也可以反正來。

這些定律、原則都是指導(dǎo)我們設(shè)計、交互以及與設(shè)計規(guī)范等息息相關(guān)的原則，我們需在理解的基礎(chǔ)上合理運(yùn)用，遵從規(guī)則順勢而為也不失為一種很省力的做法。

設(shè)計規(guī)范的作用

• 宏觀上對內(nèi)統(tǒng)一：不會出現(xiàn)來對接的設(shè)計不知道主色是啥，對接的開發(fā)不知道原來常用的字色、字體大小是啥，導(dǎo)致產(chǎn)品出現(xiàn)不一致，對內(nèi)管理出現(xiàn)混亂。讓管理和合作都變得容易。
• 提高設(shè)計效率：組件可以多次甚至全應(yīng)用復(fù)用，例如一些常規(guī)按鈕、控件等，協(xié)同工作的情況下，可以保證產(chǎn)出一致。
• 一致性的用戶體驗：統(tǒng)一的交互帶來統(tǒng)一的用戶體驗。
• 維護(hù)方便易于拓展：減少重復(fù)開發(fā)，保持內(nèi)部統(tǒng)一，不管是在設(shè)計協(xié)作還是開發(fā)對接都能有一套統(tǒng)一的規(guī)范可循，降低溝通成本，利于迭代維護(hù)，不會因為心血來潮或追趕潮流的設(shè)計而導(dǎo)致產(chǎn)品風(fēng)格混亂。

大多數(shù)移動應(yīng)用是暫態(tài)的，用戶用完就走，在短時間內(nèi)需要給用戶建立起深刻的印象，你就需要在產(chǎn)品整體建立起統(tǒng)一化的風(fēng)格，提高辨識度。

設(shè)計規(guī)范是遵循一定的設(shè)計原則，在產(chǎn)品周期下不斷進(jìn)行迭代和升級。變化的用戶習(xí)慣，以及新的交互模式，移動設(shè)備的不斷更新，大眾的認(rèn)知也在慢慢被改變。

所以，我們需要不斷跟緊潮流了解新興事物，保持好奇心，才能產(chǎn)出更具有時代特性的產(chǎn)品。

作者：就不，公眾號：豬三的日常

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

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