界面設(shè)計規(guī)范

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

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

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

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

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

用戶體驗和軟件應(yīng)用用戶體驗為何如此重要？

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

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

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

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

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

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

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

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

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

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