UI界面設計規(guī)范

1、UI設計（流程界面）規(guī)范一：UI設計基本概念與流程1.1目的規(guī)范公司UI設計流程，使UI設計師參與到產(chǎn)品設計整個環(huán)節(jié)中來，對產(chǎn)品的易用性進行全流程負責，使UI設計的流程規(guī)范化，保證UI設計流程的可操作性。1.2 范圍l界面設計l此文檔用于界面設計，本文檔的讀者對象是項目管理人員、售前服務人員、UI界面設計人員、界面評審人員和配置測試人員。1.3 概述UI設計包括交互設計，用戶研究，與界面設計三個部分?；谶@三部分的UI設計流程是從一個產(chǎn)品立項開始，UI設計師就應根據(jù)流程規(guī)范，參與需求階段、分析設計階段、調(diào)研驗證階段、方案改進階段、用戶驗證反饋階段等環(huán)節(jié)，履行相應的崗位職責。UI設計師應全面負責

2、產(chǎn)品以用戶體驗為中心的UI設計，并根據(jù)客戶（市場）要求不斷提升產(chǎn)品可用性。本規(guī)范明確規(guī)定了UI設計在各個環(huán)節(jié)的職責和要求，以保證每個環(huán)節(jié)的工作質(zhì)量。1.4 基本介紹A、需求階段軟件產(chǎn)品依然屬于工業(yè)產(chǎn)品的范疇。依然離不開3W的考慮（Who,where,why.）也就是使用者，使用環(huán)境，使用方式的需求分析。所以在設計一個軟件產(chǎn)品之前我們應該明確什么人用（用戶的年齡，性別，愛好，收入，教育程度等）。什么地方用（在辦公室/家庭/廠房車間/公共場所）。如何用（鼠標鍵盤/遙控器/觸摸屏）。上面的任何一個元素改變結果都會有相應的改變。除此之外在需求階段同類競爭產(chǎn)品也是我們必須了解的。同類產(chǎn)品比我們提前問世，

3、我們要比他作的更好才有存在的價值。那么單純的從界面美學考慮說哪個好哪個不好是沒有一個很客觀的評價標準的。我們只能說哪個更合適，更合適于我們的最終用戶的就是最好的。B、分析設計階段通過分析上面的需求，我們進入設計階段。也就是方案形成階段。我們設計出幾套不同風格的界面用于被選。C、調(diào)研驗證階段幾套風格必須保證在同等的設計制作水平上，不能明顯看出差異，這樣才能得到用戶客觀真實的反饋。測試階段開始前我們應該對測試的具體細節(jié)進行清楚的分析描述。調(diào)研階段需要從以下幾個問題出發(fā)：用戶對各套方案的第一印象用戶對各套方案的綜合印象用戶對各套方案的單獨評價選出最喜歡的選出其次喜歡的對各方案的色彩，文字，圖形等分別

4、打分。結論出來以后請所有用戶說出最受歡迎方案的優(yōu)缺點。所有這些都需要用圖形表達出來，直觀科學。D、方案改進階段經(jīng)過用戶調(diào)研，我們得到目標用戶最喜歡的方案。而且了解到用戶為什么喜歡，還有什么遺憾等，這樣我們就可以進行下一步修改了。這時候我們可以把精力投入到一個方案上，將方案做到細致精美。E、用戶驗證階段改正以后的方案，我們可以將他推向市場。但是設計并沒有結束。我們還需要用戶反饋，好的設計師應該在產(chǎn)品上市以后去站柜臺。零距離接觸最終用戶，看看用戶真正使用時的感想。為以后的升級版本積累經(jīng)驗資料。經(jīng)過上面設計過程的描述，大家可以清楚的發(fā)現(xiàn)，界面UI設計是一個非常科學的推導公式，他有設計師對藝術的理解感

5、悟，但絕對不是僅僅表現(xiàn)設計師個人的繪畫。所以我們一再強調(diào)這個工作過程是設計過程。UI界面設計不存在美工。2. UI設計流程2.1概述根據(jù)上述原則，分析公司產(chǎn)品的特點，制定符合軟件產(chǎn)品（或項目）生命周期的UI設計流程。每個產(chǎn)品（或項目）的生命周期中，UI設計師應該嚴格按照流程，完成每個環(huán)節(jié)的職責，確保流程準確有效的得到執(zhí)行，從而提高產(chǎn)品的可用性，提升產(chǎn)品質(zhì)量。二：UI界面用戶體驗設計原則與規(guī)范1：應該遵循的基本原則無論是控件使用，提示信息措辭，還是顏色、窗口布局風格，遵循統(tǒng)一的標準，做到真正的一致。這樣得到的好處：1：使用戶使用起來能夠建立起精確的心里模型，使用熟練了一個界面后，切換到另外一個界

6、面能夠很輕松的推測出各種功能，語句理解也不需要費神理解2：降低培訓、支持成本，支持人員不會行費力逐個指導。3：給用戶統(tǒng)一感覺，不覺得混亂，心情愉快，支持度增加做法：項目組有經(jīng)驗人士，確立UI規(guī)范：美工提供色調(diào)配色方案，提供整體配色表界面控制程序人員、用戶體驗人員提出合理統(tǒng)一使用的控件庫。參考標準界面使用規(guī)范：控件功能遵循行業(yè)標準，windows平臺參見Microsoft用戶體驗控件樣式在允許的范圍內(nèi)可以統(tǒng)一修改其樣式、色調(diào)參考其他軟件先進操作，提取對本項目有用的功能，以使用，絕對不能盲從，漫無目的。根據(jù)需要，設計特殊操作控件，準則為：簡化操作、達到一定功能目的界面實施人員與美工商榷控件可實現(xiàn)性

7、,（如不實行此步驟，將會導致各自對對方工作不滿意，也會產(chǎn)生不一致的混亂）。重復疊代上述工作。建立合理化文檔UI標準描述上述規(guī)范，強行界面設計者理解之，并作為開發(fā)準則，SQA人員進行監(jiān)控開發(fā)人員是否遵循，及時告誡開發(fā)人員。2:(Color)顏色使用恰當，遵循對比原則：1：統(tǒng)一色調(diào)，針對軟件類型以及用戶工作環(huán)境選擇恰當色調(diào)：如：安全軟件，根據(jù)工業(yè)標準，可以選取黃色，綠色體現(xiàn)環(huán)保，藍色表現(xiàn)時尚、紫色表現(xiàn)浪漫等等，淡色可以使人舒適，暗色做背景使人不覺得累等2：如果沒有自己的系列界面，采用標準界面則可以少考慮此方面，做到與操作系統(tǒng)統(tǒng)一，讀取系統(tǒng)標準色表3：色盲、色弱用戶，即使使用了特殊顏色表示重點或者特

8、別的東西，也應該使用特殊指示符，？quot;!,?著重號，以及圖標等4：顏色方案也需要測試，常常由于顯示器、顯卡的問題，色彩表現(xiàn)每臺機器都不一樣，應該經(jīng)過嚴格測試，不同機器進行顏色測試5：遵循對比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍色文字以白色背景容易識別，而在紅色背景則不易分辨，原因是紅色和藍色沒有足夠反差，而藍色和白色反差很大。除非特殊場合，杜絕使用對比強烈，讓人產(chǎn)生憎惡感的顏色。6：整個界面色彩盡量少的使用類別不同的顏色itop色表具體標準參考美術學統(tǒng)計學術標準。色表的建設，對于美工在圖案設計、包裝設計上起著標準參考作用，對于程序界面設計人員設計控件、窗體調(diào)色起到有

9、章可循的作用。3:(Resource)資源一個多姿多彩的人機交互界面，少不了精美的鼠標光標、圖標以及指示圖片、底圖等。1：也需要遵循統(tǒng)一的規(guī)則，包括上述顏色表的建立，圖標的建立步驟也應該盡可能的形成標準，參考itop的outlookbar圖標設計標準2：有標準的圖標風格設計，有統(tǒng)一的構圖布局，有統(tǒng)一的色調(diào)、對比度、色階，以及圖片風格3：底圖應該融于底圖，使用淺色,低對比，盡量少的使用顏色。4：圖標、圖像應該很清晰的表達出意思，遵循常用標準，或者用戶機器容易聯(lián)想的到物件，絕對不允許畫出莫名奇妙的圖案。5：鼠標光標樣式統(tǒng)一，盡量使用系統(tǒng)標準，杜絕出現(xiàn)重復的情況，例如某些軟件中一個手的形狀就有4鐘不

10、同的樣子。4:（Font）字體使用統(tǒng)一字體，字體標準的選擇依據(jù)操作系統(tǒng)類型決定。中文采用標準字體，“宋體”，英文采用標準MicrosoftSansSerif不考慮特殊字體（隸書、草書等,特殊情況可以使用圖片取代）,保證每個用戶使用起來顯示都很正常。字體大小根據(jù)系統(tǒng)標準字體來，例如MSS字體8磅，宋體的小五號字（9磅）五號字（10.5磅）。所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強顯示等例外情況ITop采用BCB，所有控件默認使用parentfont，不允許修改，這樣有利于統(tǒng)一調(diào)整。系統(tǒng)大小字體屬性改變的處理。Windows系統(tǒng)有個桌面設置，設置大字體屬性，很多界面設計者常常為這

11、個惱火，如果設計時遵循微軟的標準，全部使用相對大小作為控件的大小設置，當切換大小字體的時候，相對不會有什么特殊問題。但是由于常常方便使用點陣作為窗口設計單位，導致改變大字體后，出現(xiàn)版面混亂的問題。這個情況下，應該做相應處理：1：寫程序自動調(diào)節(jié)大小，點陣值乘以一個相應比例2：全部采用點陣作為單位，不理會系統(tǒng)字體的調(diào)節(jié)，這樣可以減少調(diào)節(jié)大字體帶來的麻煩。BCB/DELPHI中多采用這種方法，但是必然結果是和系統(tǒng)不統(tǒng)一。5:(Text)文字表達提示信息、幫助文檔文字表達遵循以下準則：1：口語化、客氣、多用您、請，不要用或少用專業(yè)術語，杜絕錯別字2：斷句逗號句號頓號分號的用法，提示信息比較多的話，應該

12、分段，3：警告、信息、錯誤使用對應的表示方法4：使用統(tǒng)一的語言描述，例如一個關閉功能按鈕，可以描述為退出、返回、關閉，則應該統(tǒng)一規(guī)定。5:根據(jù)用戶不同采用相應的詞語語氣語調(diào)，如專用軟件，可以出現(xiàn)很多專業(yè)屬于，用戶為兒童：這可以語氣親切和藹，老年用戶則應該成熟穩(wěn)重。制定標準遵循之。6:(STYLE)控件風格，不要使用錯誤控件，控件功能要專一有設計好的同一風格的控件，如果沒有能力設計出一套控件，則使用標準控件，絕對不能不倫不類，雜亂無章不要錯誤使用控件，例如：使用Button樣式做TTable的功能，拿主菜單條顯示版權信息，統(tǒng)一類型的控件操作方式相同，例如一個控件雙擊可以執(zhí)行某些動作，而同樣控件，

13、雙擊卻沒有任何反映一個控件只做單一功能，不復用很多人為了寫程序方便，喜歡把一個控件在不同情況下做不同功能用，這些對用戶初次理解增加難度，只有用戶熟悉后才能理解。例如改變紅色選項，左邊的參數(shù)代表不同的設置，可能由于為了節(jié)省控件或者編程量，但是只有熟練用戶才會使用，這種情況下解決方法：1:分組，使用雙份控件2：使用TABLE頁，給用戶很明顯的視覺變化總結起來就是：1. 產(chǎn)品制作人，寫產(chǎn)品計劃書。2. 用戶體驗研究員，作調(diào)查分析3. 信息建構師，設計產(chǎn)品架構。4. 互動設計師，作出互動流程。5. 視覺設計師和用戶界面設計師，作出頁面視覺設計。6. 前臺工程師，前臺開發(fā)。7. 后臺工程師，后臺開發(fā)。8

14、. 用戶體驗研究員，做用戶測試確保質(zhì)量。1. 確認目標用戶在軟件設計過程中，需求設計角色會確定軟件的目標用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標用戶的不同引起的交互設計重點的不同。例如：對于科學用戶和對于電腦入門用戶的設計重點就不同。2. 設計目標一致軟件中往往存在多個組成部分（組件、元素）。不同組成部分之間的交互設計目標需要一致。例如：如果以電腦操作初級用戶作為目標用戶，以簡化界面邏輯為設計目標，那么該目標需要貫徹軟件（軟件包）整體，而不是局部。3. 元素外觀一致交互元素的外觀往往影響用戶的交互效果。同一個（類）軟件采用一致風格的外觀，對于保持用戶焦點，改進交互效果有很大幫助

15、。遺憾的是如何確認元素外觀一致沒有特別統(tǒng)一的衡量方法。因此需要對目標用戶進行調(diào)查取得反饋。7.可用性原則7.1可理解軟件要為用戶使用，用戶必須可以理解軟件各元素對應的功能。如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應的功能。例如：刪除操作元素。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認刪除操作，用戶可以更加詳細的理解該元素對應的功能，同時可以取消該操作。7.2可達到用戶是交互的中心，交互元素對應用戶需要的功能。因此交互元素必須可以被用戶控制。用戶可以用諸如鍵盤、鼠標之類的交互設備通過移動和觸發(fā)已有的交互元素達到其它在此之前不可見

16、或者不可交互的交互元素。要注意的是交互的次數(shù)會影響可達到的效果。當一個功能被深深隱藏（一般來說超過4層）那么用戶達到該元素的幾率就大大降低了?？蛇_到的效果也同界面設計有關。過于復雜的界面會影響可達到的效果。（參考簡單導向原則）Quote階段一：分析1、用戶需求分析2、用戶交互場景分析3、競爭產(chǎn)品分析這兩者可以說是相輔相成的。對于一個較為正規(guī)的項目而言，必然有對用戶需求的分析內(nèi)容。其中用戶UI需求是重要的組成部分。如果說UI設計原則是所有UI設計的出發(fā)點的話，那么用戶UI需求就是本次設計的出發(fā)點。好的UI設計建立在對用戶深刻了解之上。因此用戶交互場景分析就很重要。對于大部分項目組來說也許沒有時間

17、和精力去實際勘查用戶的現(xiàn)有交互、制作完善的交互模型考察，但是UI設計人員在分析的時候一定要站在用戶角度思考：如果我是用戶，這里我會需要什么。競爭產(chǎn)品能夠上市并且被UI設計者知道，必然有其長處。這就是所謂三人行必有我?guī)煹囊馑肌Ｃ總€設計者的思維都有局限性，看到別人的設計會有觸類旁通的好處。當然有的時候可以參考的并不一定是競爭產(chǎn)品。階段二：設計采用面向場景、面向事件驅(qū)動和面向?qū)ο蟮脑O計方法。UI設計著重于交互，因此必然要對最終用戶的交互場景進行設計。軟件是交互產(chǎn)品，用戶所作的就是對軟件事件的響應以及觸發(fā)軟件內(nèi)置的事件。因此要面向事件設計?，F(xiàn)在的程序開發(fā)主流采用的是面向?qū)ο笤O計。面向?qū)ο笤O計可以有效的

18、體現(xiàn)面向場景和面向事件的特點。設計的四個要素：交互對象,數(shù)據(jù)對象,事件（交互事件和異常）,動作階段三：開發(fā)通過：用戶交互case圖（說明用戶和系統(tǒng)之間的聯(lián)系）用戶交互流程圖（說明交互和事件之間的聯(lián)系）交互功能設計圖（說明功能和交互的對應關系）最終得到UI的設計產(chǎn)品。階段四：驗證正如UI交互設計原則探討文中提到的，對于UI產(chǎn)品的驗證主要從下面幾個方面入手：1、功能性對照UI設計的再好，和需求不一致也不可以。2、實用性內(nèi)部測試UI設計的最重要點就是實用性。3、用戶焦點小組UI設計是否優(yōu)秀的重要衡量依據(jù)。最后，說一點其他的問題?，F(xiàn)在往往認為交互式設計和最終的UI效果設計可以截然分開。這就好比說需求可以和設計截然分開，是不可能的。QuoteUI設計流程以及設計師參與的環(huán)節(jié)最近的工作中總結出一條結論：擁有一個完善規(guī)范的流程，是決定著一個項目走向成功或失敗的關鍵。對于UI設計的工作流程，我覺得可以根據(jù)“市場分析-用戶分析-架構-原型-界面-輸出-完善”這條主線制定，每個環(huán)節(jié)UI設計師都應參與其中。1. 產(chǎn)品定位與市場分析這一類工作大多都是由新產(chǎn)品研發(fā)部門以及市場需求完成的，但UI設計師應了解產(chǎn)品的市場定位、產(chǎn)品定義、客戶群體、運營方式等。2. 用戶研究與分析這個過程