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

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

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

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

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

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

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

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

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

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

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

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

設(shè)計(jì)規(guī)范的來(lái)源

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

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

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

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

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

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

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

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

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

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

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

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

作者：就不，公眾號(hào)：豬三的日常

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

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