界面設計規(guī)范

Web應用界面設計規(guī)范部門：研發(fā)中心主講人：軟件界面規(guī)范的重要性及其目的用戶體驗為何如此重要Web規(guī)范體系介紹界面設計開發(fā)流程應該遵循的基本原則界面設計規(guī)范軟件界面規(guī)范的重要性及其目的產品設計通過規(guī)范的方式來達到以用戶為中心的目的。

使最終設計出來的界面風格一致化，開發(fā)編碼人員相互之間開發(fā)更輕松，遵循統(tǒng)一的操作規(guī)范，以標準化的方式設計界面，提高工作效率。減少和改變責任不明，任務不清和由此產生的信息溝通不暢、反復修改、重復勞動、效率低下的現(xiàn)象。軟件界面規(guī)范的重要性及其目的用戶體驗為何如此重要Web規(guī)范體系介紹界面設計開發(fā)流程應該遵循的基本原則界面設計規(guī)范日常生活中的遭遇什么是用戶體驗用戶體驗的要素用戶體驗和軟件應用記住你的用戶早晨起來，發(fā)現(xiàn)鬧鐘沒有按原先設定響起來。一邊燒水，一邊穿衣服，臨走前去喝水卻發(fā)現(xiàn)水還沒有燒開。到了地鐵站，發(fā)現(xiàn)公交卡沒有錢了。無奈之下只能去排隊買票。排了3趟地鐵，終于到公司了，但是你卻遲到了。結果：盡管你已經(jīng)非常努力，但是你還是遲到了。那么，讓我們看看這一連串的倒霉事，是什么讓我們如此狼狽？用戶體驗為何如此重要？X員工悲慘的一天

什么是用戶體驗用戶體驗（userexperience）是以用戶為中心的設計中最重要的一個部分，強調的是過程，是軟件對用戶行為產生的反應與用戶期待值要盡可能的一致。表現(xiàn)一：過分使用各種奇形怪狀、五顏六色的控件。表現(xiàn)二：界面元素比例失調。比如按鈕巨大無比，其尺寸甚至超過顯示重要內容的文本框的界面。表現(xiàn)三：界面元素凌亂。比如說，按鈕和文本框擺放地點隨意，該對齊的控件對不齊。表現(xiàn)四：違背使用習慣。你按F1，它沒有彈出幫助，卻執(zhí)行了一件絕對出乎你意料的動作。表現(xiàn)五：消息框信息含糊、混亂。比如軟件彈出一個消息框。把原本“確定”和“取消”寫成為“是”和“否”，讓用戶不知道什么意思。表現(xiàn)六：還有一種糟糕的用戶界面，乍一看很厲害，實際上完全是缺乏規(guī)劃的結果。這種軟件本身的確提供了比較復雜的功能，但對于哪些是常用功能，哪些是很少用到的高級功能，缺乏評估。什么功能都往界面上擠，占地方不說，用戶會厭煩，弄不好還會被嚇跑。

用戶體驗為何如此重要？體驗好的用戶界面糟糕的用戶界面表現(xiàn)糟糕的用戶界面用戶體驗為何如此重要？

用戶體驗的要素表現(xiàn)層視覺設計交互設計信息架構界面設計導航設計功能說明內容需求用戶需求產品目標框架層結構層范圍層戰(zhàn)略層具體抽象表現(xiàn)層---視覺設計在這個五層結構的頂端，我們把注意力轉移到系統(tǒng)用戶會注意到的那些方面：視覺設計，這里，內容、功能和美學匯集到一起來產生一個最終設計，這將滿足其他四個層面的所有目標?？蚣軐印缑嬖O計、導航設計和信息設計在充滿概念的結構層中開始形成了大量的需求，這些需求都是來自我們的戰(zhàn)略目標的需求。在框架層，我們要更進一步的提煉這些結構，確定很詳細的界面外觀、導航和信息設計，這能讓結構變得更實在。結構層—交互設計與信息架構在收集完用戶需求并將其排列好優(yōu)先級別之后，我們對于最終界面將會包括什么特性已經(jīng)有了清楚的圖像。然而，這些需求并沒有說明如何將這些分散的片段組成一個整體。這就是范圍層的上面一層：為產品創(chuàng)建一個概念結構。范圍層—功能規(guī)格和內容說明帶著“我們想要什么”、“我們的用戶想要什么”的明確認識，我們就能弄清楚如何去滿足所有這些戰(zhàn)略的目標。當你把用戶需求和系統(tǒng)目標轉變成系統(tǒng)應該提供給用戶什么樣的內容和功能時，戰(zhàn)略就變成了范圍。戰(zhàn)略層—產品目標和用戶需求成功的用戶體驗，其基礎是一個被明確表達的“戰(zhàn)略”。知道企業(yè)與用戶雙方對產品的期許和目標，有助于確立用戶體驗各方面戰(zhàn)略的制定面對大量的選擇，用戶只能自己想辦法，去決定哪一個軟件系統(tǒng)功能會符合她的要求。企業(yè)開始意識到，提供優(yōu)質的用戶體驗是一個重要的、可持續(xù)的競爭優(yōu)勢。用戶體驗形成了客戶對企業(yè)的整體印象，界定了企業(yè)和競爭對手的差異，并且決定了客戶什么時候還會再次光顧。用戶體驗為何如此重要？

用戶體驗和軟件應用用戶體驗為何如此重要？

記住你的用戶以用戶為中心的設計-------在開發(fā)產品的每一個步驟中，都要把用戶列入考慮范圍內?？紤]用戶體驗把它分為各個組成要素從不同角度來了解它-----通過這些才能確保你控制了決策所造成的全部結果用戶體驗很重要，最大的理由：它對你的用戶很重要。協(xié)調一致，直觀明了，甚至讓人愉快的體驗-----“一次”每件事都按照正確的方式在工作的體驗。軟件界面規(guī)范的重要性及其目的用戶體驗為何如此重要Web規(guī)范體系介紹界面設計開發(fā)流程應該遵循的基本原則界面設計規(guī)范產品/項目約定界面框架規(guī)范基礎界面元素規(guī)范產品VILOGO系統(tǒng)框架視覺風格根據(jù)業(yè)務需求約定交互模式、頁面流總體界面框架結構界面模式靈活優(yōu)化多語言、多瀏覽器、換膚、組件庫、擴展性等問題界面組件及其組合基礎應用模板Web標準編碼，優(yōu)化結構，代碼可重用性強Web規(guī)范體系介紹軟件界面規(guī)范的重要性及其目的用戶體驗為何如此重要Web規(guī)范體系介紹界面設計開發(fā)流程應該遵循的基本原則界面設計規(guī)范生命周期軟件界面設計實現(xiàn)過程相關活動需求PM:需求規(guī)劃討論P-spec編寫Ui草圖提供根據(jù)p-spec對界面工作成果審核確認PM:根據(jù)P-spec對界面工作成果審核確認RD:編寫pdd設計開發(fā)測試PM:根據(jù)P-spec修正解釋需求RD:編碼PM:解釋需求QA:測試RD:修正Bug界面維護支持框架、頁面模板HTML+CSS修正各HTML頁面修正及CSS技術支持DHTML組件HTML+CSS修正界面規(guī)劃（需求）需求理解建立界面模型界面設計主界面、登錄頁GUI設計主要模板頁GUI設計界面實現(xiàn)（編碼）框架、頁面模板HTML+CSS實現(xiàn)根據(jù)模板填充制作各HTML頁面部分DHTML組件的HTML+CSS提供界面設計制作InputFromPM1.P-spec2.UI草圖經(jīng)PM確認1.分析規(guī)劃文檔2.低保真模擬示意原型圖片經(jīng)PM確認主要界面高保真GUI設計圖經(jīng)PM確認模板頁html+css各原型頁面html組件html+css界面設計開發(fā)流程軟件界面規(guī)范的重要性及其目的用戶體驗為何如此重要Web規(guī)范體系介紹界面設計開發(fā)流程應該遵循的基本原則界面設計規(guī)范應該遵循的基本原則顯示信息一致性的原則以用戶為主導原則易用性原則鼠標與鍵盤一致性原則系統(tǒng)響應時間原則出錯信息和警告原則信息顯示原則數(shù)據(jù)輸入原則合理性原則美觀與協(xié)調性原則顯示信息一致性的原則無論是控件使用，提示信息措辭，還是顏色、窗口布局風格，遵循統(tǒng)一的標準，做到真正的一致。界面直觀、對用戶透明：用戶接觸軟件后對界面上對應的功能一目了然、不需要多少培訓就可以方便使用應用系統(tǒng)。這樣得到的好處：

用戶使用起來能夠建立起精確的心里模型，使用熟練了一個系統(tǒng)界面后，切換到另外一個系統(tǒng)界面能夠很輕松的推測出各種功能。降低培訓、支持成本，支持人員不用費力逐個指導。給用戶統(tǒng)一感覺，不覺得混亂，心情愉快，支持度增加。應該遵循的基本原則明確用戶是所有系統(tǒng)處理的核心，不應該有應用程序來決定處理過程，所以用戶界面應當由用戶來控制應如何工作、如何響應，而不是由開發(fā)者按自己的意愿把操作流程強加給用戶。應該遵循的基本原則以用戶為主導的原則用戶不用查閱幫助就能知道該界面的功能并進行相關正確的操作。應該遵循的基本原則完成相同或相近功能的按鈕用Frame框起來，常用按鈕要支持快捷方式。完成同一功能或任務的元素放在集中位置，減少鼠標移動的距離。按功能將界面劃分局域塊，用Frame框括起來,并要有功能說明或標題。界面要支持鍵盤自動瀏覽按鈕功能，即按Tab鍵的自動切換功能。界面上首先應輸入的和重要信息的控件在Tab順序中應當靠前,位置也應放在窗口上較醒目的位置。同一界面上的控件數(shù)最好不要超過10個，多于10個時可以考慮使用分頁界面顯示。

易用性細則：易用性原則應該遵循的基本原則易用性細則：分頁界面要支持在頁面間的快捷切換，常用組合快捷鍵Ctrl+Tab默認按鈕要支持Enter操作，即按Enter后自動執(zhí)行默認按鈕對應操作。可寫控件檢測到非法輸入后應給出說明并能自動獲得焦點。復選框和選項框按選擇幾率的高底而先后排列。復選框和選項框要有默認選項，并支持Tab選擇。專業(yè)性強的軟件要使用相關的專業(yè)術語，通用性界面則提倡使用通用性詞眼。

盡量遵循可不用鼠標的原則：應用中的功能只用鍵盤也應當可以完成。但是，許多鼠標的操作，如雙擊、拖動對象等，并不能簡單地用鍵盤來模擬即可實現(xiàn)，此類操作可適當增加操作按鈕。應該遵循的基本原則鼠標與鍵盤一致性原則系統(tǒng)響應時間應該適中，響應時間過長，用戶就會感到不安和沮喪，而響應時間過快也會影響到用戶的操作節(jié)奏，并可能導致錯誤。因此在系統(tǒng)響應時間上堅持如下原則：0-5秒鼠標顯示成為沙漏；5秒以上顯示處理窗口，或顯示進度條；一個長時間的處理完成時應給予完成警告信息。應該遵循的基本原則系統(tǒng)響應時間原則出錯信息和警告是指出現(xiàn)問題時系統(tǒng)給出的壞消息，對于出錯信息和警告應該遵循以下原則：信息以用戶可以理解的術語描述；信息簡明扼要，指出出錯原因并提供解決辦法提示。應該遵循的基本原則出錯信息和警告原則信息顯示遵循以下原則：只顯示與當前用戶語境環(huán)境有關的信息；不要用數(shù)據(jù)將用戶包圍，使用便于用戶迅速吸取信息的方式表現(xiàn)信息；使用一致的標記、標準縮寫和顏色，顯示信息的含義應該非常明確，用戶不必再參考其它信息源；產生有意義的出錯信息；使用縮進和文本來輔助理解；使用窗口分隔控件分隔不同類型的信息；高效地使用顯示器的顯示空間，但要避免空間過于擁擠。應該遵循的基本原則信息顯示原則數(shù)據(jù)輸入遵循以下原則：盡量減少用戶輸入動作的數(shù)量；維護信息顯示和數(shù)據(jù)輸入的一致性；交互應該是靈活的，對鍵盤和鼠標輸入的靈活性提供支持；在當前動作的語境中使不合適的命令不起作用；讓用戶控制交互流，用戶可以跳過不必要的動作、改變所需動作的順序（如果允許的話）以及在不退出系統(tǒng)的情況下從錯誤狀態(tài)中恢復；為所有輸入的動作提供幫助；消除冗余輸入?？赡艿脑捥峁┠J值、絕不要讓用戶提供程序中可以自動獲取或計算出來的信息。應該遵循的基本原則數(shù)據(jù)輸入原則應該遵循的基本原則合理性原則屏幕對角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引用戶注意力的位置，在放置窗體時要注意利用這兩個位置。

應該遵循的基本原則合理性原則合理性細則：父窗體或主窗體的中心位置應該在對角線焦點附近。子窗體位置應該在主窗體的左上角或正中。多個子窗體彈出時應該依次向右下方偏移，以顯示窗體出標題為宜。重要的命令按鈕與使用較頻繁的按鈕要放在界面上醒目的位置。與正在進行的操作無關的按鈕應該加以屏蔽(用灰色顯示，沒法使用該按鈕)。對可能造成數(shù)據(jù)無法恢復的操作必須提供確認信息,給用戶放棄選擇的機會。非法的輸入或操作應有足夠的提示說明。對運行過程中出現(xiàn)問題而引起錯誤的地方要有提示，讓用戶明白錯誤出處，避免形成無限期的等待。提示、警告、或錯誤說明應該清楚、明了、恰當。

美觀與協(xié)調性細則：應該遵循的基本原則美觀與協(xié)調性原則界面應該大小適合美學觀點，感覺協(xié)調舒適，能在有效的范圍內吸引用戶的注意力。長寬接近黃金點比例，切忌長寬比例失調、或寬度超過長度。布局要合理,不宜過于密集，也不能過于空曠，合理的利用空間。按鈕大小基本相近，忌用太長的名稱，免得占用過多的界面位置。按鈕的大小要與界面的大小和空間要協(xié)調。避免空曠的界面上放置很大的按鈕。放置完控件后界面不應有很大的空缺位置。字體的大小要與界面的大小比例協(xié)調,通常使用的字體中宋體9-12較為美觀，很少使用超過12號的字體。

應該遵循的基本原則美觀與協(xié)調性原則美觀與協(xié)調性細則：前景與背景色搭配合理協(xié)調，反差不宜太大。常用色考慮使用Windows界面色調。如果使用其他顏色，主色要柔和，具有親和力，堅決杜絕刺目的顏色。大型系統(tǒng)常用的主色有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。界面風格要保持一致，字的大小、顏色、字體要相同，除非是需要藝術處理或有特殊要求的地方。如果窗體支持最小化和最大化或放大時，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放。通常父窗體支持縮放時，子窗體沒有必要縮放。如果能給用戶提供自定義界面風格則更好，由用戶自己選擇顏色、字體等。

軟件界面規(guī)范的重要性及其目的用戶體驗為何如此重要Web規(guī)范體系介紹界面設計開發(fā)流程應該遵循的基本原則界面設計規(guī)范所有界面基準字體為9pt。不考慮特殊字體(隸書、草書等,特殊情況可以使用圖片取代),保證每個用戶使用起來顯示都正常。所有字體屬性設定應在CSS中完成。所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強顯示等例外情況。避免使用粗體和斜體：用粗體來吸引人的注意，用斜體表示著重，但還要少使用。避免混合字體：最多包含兩種不同的字體。界面設計規(guī)范【功能名稱】字體【功能簡述】各個頁面必須使用統(tǒng)一的字體樣式【規(guī)范要求】不規(guī)范實例：所有字體尺寸一律采用“pt”作為單位，對象和線條的尺寸一律采用“px”作為單位。界面設計規(guī)范【功能名稱】尺寸單位【功能簡述】各個頁面必須使用統(tǒng)一的尺寸單位【規(guī)范要求】界面設計規(guī)范盡可能通過選擇合適的主題顏色或系統(tǒng)顏色來選擇顏色。不要混用顏色類型。這就是說，應當始終將主題顏色與對應的主題顏色匹配使用，系統(tǒng)顏色與對應的系統(tǒng)顏色匹配使用，固定顏色與其他固定顏色一起使用。如果你一定要使用主題或系統(tǒng)顏色之外的顏色：最好是從某個主題或系統(tǒng)顏色派生，而不要硬編碼顏色值。如果不是為了顯示真實感的圖形和圖像，應當限制屏幕的色彩數(shù)目，因為人們在觀察屏幕時很難同時記住多種色彩應當根據(jù)對象的重要性來選擇顏色，重要的對象應該用醒目的顏色表示。使用顏色的時候應當保持一致性，例如錯誤提示信息用紅色表示，正常信息用綠色表示。在表達信息時，不要過度依賴顏色，因為有些用戶可能色盲或色弱?！竟δ苊Q】顏色【功能簡述】各個頁面必須使用統(tǒng)一的顏色設置【規(guī)范要求】“危險、有風險、未知、基本安全”的顏色，有什么講究嗎？“黃色”看不清楚。另外，文字不完整，在數(shù)字后面加“個”，前后項留合適的間隙。界面設計規(guī)范【功能名稱】登錄框【功能簡述】【規(guī)范要求】1.用戶名、密碼寬度應該上下對齊。2.輸入框上下對齊。3.鼠標點擊登錄、重置按鈕應該顯示手型，而不是箭頭。打開一個新界面，光標默認停留在第一個待輸入的文本框中。當選擇下拉框不存在默認值時，則默認為“請選擇”；當存在默認值時，請綁定顯示默認值。界面設計規(guī)范【功能名稱】默認值【功能簡述】各個頁面都會存在默認值【規(guī)范要求】界面的必填項必須以紅色*號標識出來。當必填項沒有填寫時，可在光標準備移走時，在文本框后以“請輸入”紅色文字標識。當界面排列較緊時，必填項沒有填可以以彈出信息的方式來提示，光標移走時彈出或最后提交時彈出都可；但確定后必須停留在第一個待輸入的文本框中。

界面設計規(guī)范【功能名稱】必填值【功能簡述】對界面必填項的一些規(guī)范【規(guī)范要求】可輸入/選擇框以正常色顯示；不可輸入/選擇框以灰色顯示；對于不可輸入/選擇框，通過鼠標或鍵盤都不可讓光標定位至此控件。

界面設計規(guī)范【功能名稱】控件顯示【功能簡述】【規(guī)范要求】提示信息中標點符號請統(tǒng)一為全角符號。提示信息如有主語，請統(tǒng)一為‘您’。復雜的操作在成功后給予提示信息。需要后續(xù)操作的操作在成功后給予提示信息。提示信息不宜太長，寬度不能超過當前窗口的1/2