產(chǎn)品UI設計規(guī)范.docx

1、產(chǎn)品UI設計規(guī)范一、為什么要做設計規(guī)范？(why)如果說工作兩年我養(yǎng)成了什么習慣的話，那一定是在做任何需求之前,都先問問自己“為什么要做這件事”O(jiān)整理規(guī)范也是一樣，做之前先要想清楚為什么要做規(guī)范？清楚的了解做一件事的價值有助于我們產(chǎn)生心理認同，從而更好的實施。1. 保證平臺統(tǒng)一性統(tǒng)一性是交互設計的一個基本原則，在一個長期迭代多人合作的項目中，不同的設計師會負責不同的模塊，每個人都有各自的思路，就有可能會對相同的元素做出了不同的方案，對于用戶來說容易造成困惑，對品牌整體形象的建設也沒有好處。所以對于較大型的產(chǎn)品，最好有設計規(guī)范來定義基本的元素，幫助眾多設計師一起做出有統(tǒng)一性的產(chǎn)品。2. 提升團隊

2、工作效率對于同一個基本元素，如果沒有設計規(guī)范，交互設計師需要設計一次交互方式，視覺設計師需要設計一次外形，UI開發(fā)同學需要開發(fā)一次，每個不同的設計師遇到這個元素時都可能重新設計一遍。但如果有了設計規(guī)范，只需設計一次，團隊中任何一個設計師需要用的時候直接拿來用就可以了，也不需要再進行視覺和開發(fā)，極大的提升了效率。3. 打磨細節(jié)體驗在整理每個元素的規(guī)范時，設計師都需要對其場景、狀態(tài)考慮清楚。在整理的過程中，經(jīng)常會發(fā)現(xiàn)一些以前沒注意到的問題，并進行優(yōu)化。把一個小元素單獨拎出來仔細考量，寫成一篇完整規(guī)范的過程，其實就是在打磨細節(jié)的過程。二、什么時候做設計規(guī)范？(when)雖說最理想的情況是在做設計前把

3、設計準則、風格、規(guī)范都定義清楚，但在實際項目中很少能有條件這樣做。項目初期總是小步快跑、先上再說，產(chǎn)品在不斷試錯的同時設計也是在不斷試錯，在一開始就能定義一個完全“正確”的規(guī)范其實是不太現(xiàn)實的。焜咬行猝炒先行？規(guī)范和設計兼先飄后？我所提倡的規(guī)范應該在設計中同步退行.沒有根據(jù)設計實踐建立的規(guī)范瓶頸過低,經(jīng)常遺遇各種事先沒有考慮進去的問題,同時在設計中要不斷充菁和修復自己的規(guī)范.驗。好的設計規(guī)范應該是能讓用戶高效獲取到有效信息的，但針對不同的受眾，規(guī)范本身也會有不同的側(cè)重點。規(guī)范的制定最好能有系統(tǒng)的組織、遵循一定的流程來完成，以確保規(guī)范有條不素的整理和推進。規(guī)范輸出后并不代表完成，還需要推動落地、

4、迭代優(yōu)化、維護更新。有了規(guī)范也不代表設計師就沒有創(chuàng)新的空間了，規(guī)范和創(chuàng)新從來都不是對立的。整理規(guī)范對設計師的基本能力有很好的鍛煉作用，所以各位設計師們整理規(guī)范時不要嫌瑣碎麻煩，它可以讓我們慢慢變強！三、什么樣的規(guī)范是好規(guī)范？(what)規(guī)范是給人閱讀的，寫好一篇規(guī)范就像是設計好一個界面，我們也應該確定目標用戶、用戶目標、設計目標后，再進行設計執(zhí)行。通常情況下，在產(chǎn)品發(fā)展日趨平穩(wěn)，產(chǎn)品定位和品牌形象都比較確定的時候；參與設計的人越來越多，統(tǒng)一性和效率的問題漸漸顯現(xiàn)出來的時候，就是需要定義和整理設計規(guī)范的時候。規(guī)范目標分析目標用戶團隊內(nèi)設計師第三方團隊公開給大眾用戶目標準確使用快速上手尋求參考快速

5、的在規(guī)范內(nèi)找到有效信息，獲得清晰的指導設計目標分類合理、保持一致、排版易讀、定義清晰、描述準確、場景完備設計規(guī)范的目標用戶有可能只是一個團隊內(nèi)的設計師，有可能是第三方的工作人員，有可能是公開給所有人都可以查看的。不管是哪種類型的用戶，都會有一個基本一致的目標，那就是“快速的在規(guī)范中找到有效信息并獲得指導”0在這個一致的目標下又有所不同之處。1. 分類合理一整套規(guī)范的內(nèi)容通常都很多，為了能讓用戶快速查找，合理的分類必不可少。2. 保持一致每篇規(guī)范包含的內(nèi)容保持一致、格式保持一致可以給用戶構(gòu)建心理預期，讓他們看一篇規(guī)范就知道每篇都包含哪些部分，可以找到哪些信息。3. 排版易讀通過合適的字體字號、間

6、距留白減少用戶閱讀的疲勞感，圖片與說明清晰的結(jié)合，正碰和錯誤示例要能明顯區(qū)分，使用表格來組織信息。4. 定義清晰、描述準確、場景完備用簡單易憧的語句進行定義和描述，幫助用戶了解是什么、怎么用、哪些場景可用。（規(guī)范不可能包含所有場景，但應該包含大多數(shù)常見場景。）如何系統(tǒng)的整理規(guī)范?如何系統(tǒng)的整理規(guī)范?(how)一.制定一個計劃我們設計一個產(chǎn)品的設計方面的工作流程通常是：踩索照8草討論A綢化定稿焜楚批星化所以，先小范圍的捋設出0形生產(chǎn).在生產(chǎn)過程中不斷的沉淀規(guī)范.那些可以作為規(guī)范使用?曜地方需要靈活處理，這些都霉要實踐獲得，當小范圍的設計規(guī)范得到費證后，即可進行批星化生產(chǎn)，此時，所有設計怖都可介入

7、生產(chǎn)以程,產(chǎn)，此時，所有設計怖都可介入生產(chǎn)以程,的新加入的設計同事也可以通過規(guī)范了解設計規(guī)則.整理設計規(guī)范是一個涉及廣周期長的項目，所以有一個清晰的計劃可以幫助這個項目更好的推進。制定計劃的流程如下圖所示：制定一個計劃0000整理規(guī)范內(nèi)確定優(yōu)先級確定規(guī)范展示形式制定規(guī)范容及分類與分工及推進流程的規(guī)范1. 整理規(guī)范內(nèi)容及分類做之前先明確我們需要整理哪些內(nèi)容，這些內(nèi)容的分類是怎樣的，下圖是我們整理騰訊云規(guī)范時列的內(nèi)容及分類，初始時列舉的內(nèi)容可能不全，但沒有關(guān)系，先把最基礎的分類和內(nèi)容定義好，后續(xù)發(fā)現(xiàn)有遺漏的內(nèi)容再添加進去即可。整理規(guī)范內(nèi)容及分類設計準則2. 確定優(yōu)先級與分工由上圖可以看出，一整套規(guī)

8、范包含的內(nèi)容非常的多，所以內(nèi)容和分類整理好后，還需要確定每塊內(nèi)容的優(yōu)先級和分工。從大的模塊上說，首先應當確定整體的設計風格和框架，整體確定后才好確定細節(jié)的風格；其次的優(yōu)先級最好是控件、組件、場景，因為控件組成組件,控件和組件組成場景，所以先確定小的控件后，組件和場景更容易確定。至于分工，規(guī)范的制定是整個團隊的事情，最好團隊中的設計師都能夠參與，互相分擔工作量以提高規(guī)范整理的效率，也能夠確保規(guī)范是在大家的討論下制定而成，每個人都參與過并贊同結(jié)論。確定優(yōu)先級與分工分寅交互遇爆交互員n人微貫）8度K寬負責人遂度/當莆負責人/此目節(jié)點鼻色己蕪威J己芙或1JH作S3株正在希出產(chǎn)孫優(yōu)失蓄出u示界面富戛的伽

9、論SK-1又事學弁方#，討論-舶論-格99頁面布J面布已蕪底y已完K已完成j常已完成J/策布尺寸於制臺）已笑成3. 確定規(guī)范展示形式及推進流程其實確定規(guī)范展示形式也是確定規(guī)范目標用戶，要確定規(guī)范是給誰看的，展示在網(wǎng)站上還是直接用文檔承載，網(wǎng)站是否對公眾開放等問題。確定了這些問題后就可以確定規(guī)范的詳細程度、大體的展示形式。推進流程指的是整個項目要怎么跑，涉及到每個設計師接到分工后如何輸出,何時討論,怎么輸出，交接給誰等等問題。例如我們的推進流程是每周固定時間開規(guī)范討論會，每次確定幾個要討論的內(nèi)容，負責的設計師整理問題，在會議上和大家起討論敲定結(jié)果，經(jīng)過兩周討論后輸出最終版本，交給下一個負責人。4

10、. 制定規(guī)范的規(guī)范規(guī)范本身要遵循什么規(guī)則，也是需要事先確定的，我認為包括兩個部分，一是設計原則,二是輸出物規(guī)范。根據(jù)整個產(chǎn)品的目標用戶、用戶及產(chǎn)品目標可以確定我們的設計原則，所有的規(guī)范梳理都要遵循最基礎的設計原則，以滿足用戶及產(chǎn)品需求，提升整體的休驗。確定設計原則掌控感在訊云.5任務的聊戶,而不點累境.處m余的任麗.應sm戶及引的反n.注用FW»«!在n作的狀我反敏.姑果等.的t示等方itifl用戶僅持交功及日里語當?shù)囊?讓用戶餅制#持肘任務的嫩廖，輕量感HIS可以讓用戶在處理尸虐撕R任冊伽語舉卿Jg»受.990.去除家余的程K.)(少大次的濯他色虬使用JMHM

11、WyMHULitffiP在較#擱的便席1照中金期H牌在救球星而不腰使用環(huán)±iSff專注感RBJ用少處理任務啪千tt.營造.注K1Kff5O.例皿任務;規(guī)應KllilWS的割岫少的郵由.禍內(nèi)醐分為冬個慘.躋虬毗任務.系統(tǒng)性使用訊云偵®明的投何元IL«»»的界I元*«.nonW.以便焦戶&不向的產(chǎn)&中切»也不會迷失.t&BWKfflPWHHK憤率的旌手段.可靠性f&業(yè)膈定的產(chǎn)時M冶用戶可.的犀免.emx«.方使用戶在參個貝am中豚覺得可信的品廊.亦或*在it色等松您觀上i»曜用

12、戶WS.©業(yè)ID可的熙受.指引性教嗨引不itJSHH描手和新隊L它汪需，0在H個殖節(jié).IHlnl-個皎為產(chǎn)宙音業(yè)的產(chǎn)誨.人性輜街引coienst.能翌助用戶更蛔碰SAififtWiM.MOWmgAUBtfff).多播引等.之前有提到過規(guī)范自身保持一致性是提高規(guī)范閱讀效率的一部分,而且為了提升設計師輸出的效率，事先制定好規(guī)范輸出物的規(guī)范可以幫助設計師按照一個既定的格式進行輸出，同時乂能保持一致性。我們的輸出物規(guī)范中包括：1. 規(guī)范包含的內(nèi)容，需要有描述、類型及場景、使用說明、視覺規(guī)范、補充說明、相關(guān)下載、負責設計師2. 規(guī)范插圖的尺寸、背景色、板式、字體及用色、正確及錯誤示例圖樣式等二

13、.單個規(guī)范的整理流程整體計劃制定好之后，就需要開始一個個整理規(guī)范內(nèi)容了。整理單個規(guī)范的內(nèi)容也是有流程可尋的，如下圖所示。下面以整理“對話框”規(guī)范為例，講解一下單個規(guī)范整理的流程。單個規(guī)范整理流程000000收集場景歸納分類給出定義優(yōu)化方案宣講討論最終輸出1.收集場景給已經(jīng)趨于成熟的產(chǎn)品整理規(guī)范，第一步就是要先收集場景。以對話框為例，對話框可能出現(xiàn)的地方很多，類型也各有不同，在沒有規(guī)范之前，產(chǎn)品中可能會有各種各樣的對話框,每個設計師做的可能都有些差別，所以第一步是把產(chǎn)品中所有出現(xiàn)過的對話框都收集起來。2. 歸納分類場景收集完后，就要對收集到的所有場景進行歸類，例如對話框按照樣式不同可.以分為“模

14、態(tài)對話框”和“非模態(tài)對話框”，在模態(tài)對話框中按照功能不同又可以分成“確認美對話框”、“反饋&警示類對話框”、“表單類對話框”。歸納分類的作用在于，可以把眾多的場景收攏成幾個典型的種類，只對典型種類進行定義和詳細描述就可以很好的給用戶起到指導作用；同時歸類之后減少了規(guī)范對象的種類，更好的保證產(chǎn)品的致性。3. 給出定義分類確定好后就可以開始給出定義r,首先給出整個規(guī)范對象的定義，例如對話框是什么，什么情況下適合用對話框等。除了整體的定義外，每個類型也需要有定義，幫助用戶理解每種類型有何差別，什么場景選用哪種類別等。4. 優(yōu)化方案分類和定義都確定后，需要對各類型進行優(yōu)化輸出最終的規(guī)則，對于這

15、些細節(jié)規(guī)則，無法確定的時候可以尋找一些優(yōu)秀案例來參考，例如優(yōu)秀的產(chǎn)品、有名的設計指南等。同時可以根據(jù)實際場景輸出多種優(yōu)劣不同的方案，和大家一起討論對比。5. 宣講討論規(guī)范整理出后可以在討論會議上同步給大家，最好事先把所有需要大家一起討論確定的問題列出來，把對比方案都做好，提高討論的效率，和大家一起來敲定最終的方案，同時也讓每個設計師都了解規(guī)范的細節(jié)。清的表達給所有人規(guī)范是面向所有設計師的，你需要讓規(guī)范被每個人理解.所以規(guī)范需要非常細致，按照規(guī)范的種類類歸，同一種控件按照多種狀態(tài)、不同場景羅列，讓每個設計師都能清晰設計中需要用郭一種，如下圖：6. 最終輸出所有問題都敲定后即可按照輸出物規(guī)范進行輸

16、出，輸出后交接給視覺設計師。五、規(guī)范整理完之后還有什么工作？如所有的設計工作一樣，輸出并不代表完結(jié)。設計稿輸出后還需要確保還原度、保證其正常上線、收集反饋意見不斷進行優(yōu)化。設計規(guī)范也一樣，做完規(guī)范后也要確保還原度，推動新的規(guī)范落地；不斷收集遺漏的部分補充進規(guī)范中，發(fā)現(xiàn)問題并不斷優(yōu)化，持續(xù)的維護更新規(guī)范文檔。六、有了完善的規(guī)范如何進行創(chuàng)新？規(guī)范和創(chuàng)新從來都不是對立的。1. 規(guī)范不可能囊括所有場景，即不可能所有場景都需要100%遵循規(guī)范。對于一些規(guī)范中沒有包含的場景，或者不適合遵循規(guī)范的場景，例如一些特殊的運營活動，一些特別的功能點，還是有可以創(chuàng)新的余地的。2. 體驗好是第一要義。遵循規(guī)范是為了保

17、證一致性從而保證體驗，如果在某些場景下不遵循規(guī)范也不會因為影響一致性而影響體軟，反而對特定場景有更好的效果時，不遵循規(guī)范也沒什么關(guān)系。3. 規(guī)范不是永恒不變的，還有優(yōu)化的空間。規(guī)范也需要不斷的優(yōu)化、迭代更新，優(yōu)化規(guī)范本身也是創(chuàng)新的過程。例如樣式風格隨著時間的變化需要更新，例如交互方式也有可能會有新的場景需要補充等等。七、整理規(guī)范可以鍛煉哪些能力？寫一篇分類簡單合理，場景、細節(jié)考慮完備，展示清晰易讀的規(guī)范，也不能算是一件很簡單的小情，需要用到設計師的很多基礎能力，例如：1. 收集信息的能力在整理規(guī)范時，收集場景、收集定義、收集優(yōu)秀案例都可以鍛煉到我們的收集信息能力,這個基本能力在日常工作中也經(jīng)常

18、需要用到，例如做需求前需要先收集需求背景相關(guān)信息,了解清楚是什么、為什么、怎么做的問題。2. 歸納總結(jié)的能力將收集到的信息進行歸納整理，得出簡單合理的分類的過程，就是鍛煉我們歸納總結(jié)能力的過程。在設計時，大到信息架構(gòu)的設計，小到表單信息分類展示，都需要此能力幫助我們更好的處理信息，更好的將信息展示給用戶。3. 全面思考的能力我一直認為，全面思考的能力是交互設計帥最重要的能力。在整理規(guī)范時，既需要對全局全面思考，例如什么情況適合用對話框，什么情況不適用，不同類型的對話框應該在哪些場景用等等；也需要對細節(jié)全面思考，例如對話框中需要放幾個按鈕、按鈕順序應該怎么定、按鈕文案怎么才好理解等等。在日常工作中也是一樣，既要思考全局的問題，例如用戶目標、產(chǎn)品目標