主講人：ARay

目錄：

一、軟件界面規(guī)范的重要性及其目的
二、用戶體驗為何如此重要
三、Web規(guī)范體系介紹
四、界面設(shè)計開發(fā)流程
五、應(yīng)該遵循的基本原則
六、界面設(shè)計規(guī)范

一、軟件界面規(guī)范的重要性及其目的

    ①使最終設(shè)計出來的界面風(fēng)格一致化，開發(fā)編碼人員相互之間開發(fā)更輕松，遵循統(tǒng)一的操作規(guī)范，以標準化的方式設(shè)計界面，提高工作效率。減少和改變責(zé)任不明，任務(wù)不清和由此產(chǎn)生的信息溝通不暢、反復(fù)修改、重復(fù)勞動、效率低下的現(xiàn)象。
    ②產(chǎn)品設(shè)計通過規(guī)范的方式來達到以用戶為中心的目的。

二、用戶體驗為何如此重要

①日常生活中的遭遇

X員工悲慘的一天：

早晨起來，發(fā)現(xiàn)鬧鐘沒有按原先設(shè)定響起來。
一邊燒水，一邊穿衣服，臨走前去喝水卻發(fā)現(xiàn)水還沒有燒開。
到了地鐵站，發(fā)現(xiàn)公交卡沒有錢了。
無奈之下只能去排隊買票。
排了3趟地鐵，終于到公司了，但是你卻遲到了。
結(jié)果：盡管你已經(jīng)非常努力，但是你還是遲到了。
那么，讓我們看看這一連串
的倒霉事，
是什么讓我們?nèi)绱死仟N？

② 什么是用戶體驗

用戶體驗（user experience）是以用戶為中心的設(shè)計中最重要的一個部分，強調(diào)的是過程，是軟件對用戶行為產(chǎn)生的反應(yīng)與用戶期待值要盡可能的一致。

糟糕的用戶界面表現(xiàn)：

  表現(xiàn)一：過分使用各種奇形怪狀、五顏六色的控件。
  表現(xiàn)二：界面元素比例失調(diào)。比如按鈕巨大無比，其尺寸甚至超過顯示重要內(nèi)容的文本框的界面。

 
  表現(xiàn)三：界面元素凌亂。比如說，按鈕和文本框擺放地點隨意，該對齊的控件對不齊。

  表現(xiàn)四：違背使用習(xí)慣。你按F1，它沒有彈出幫助，卻執(zhí)行了一件絕對出乎你意料的動作。 
  表現(xiàn)五：消息框信息含糊、混亂。比如軟件彈出一個消息框。把原本“確定”和“取消”寫成為“是”和“否”，讓用戶不知道什么意思。
  表現(xiàn)六：還有一種糟糕的用戶界面，乍一看很厲害，實際上完全是缺乏規(guī)劃的結(jié)果。這種軟件本身的確提供了比較復(fù)雜的功能，但對于哪些是常用功能，哪些是很少用到的高級功能，缺乏評估。什么功能都往界面上擠，占地方不說，用戶會厭煩，弄不好還會被嚇跑。

③用戶體驗的要素

④   用戶體驗和軟件應(yīng)用

面對大量的選擇，用戶只能自己想辦法，去決定哪一個軟件系統(tǒng)功能會符合她的要求。
企業(yè)開始意識到，提供優(yōu)質(zhì)的用戶體驗是一個重要的、可持續(xù)的競爭優(yōu)勢。
用戶體驗形成了客戶對企業(yè)的整體印象，界定了企業(yè)和競爭對手的差異，并且決定了客戶什么時候還會再次光顧。

⑤記住你的用戶

以用戶為中心的設(shè)計
   -------在開發(fā)產(chǎn)品的每一個步驟中，都要把用戶列入考慮范圍內(nèi)

 考慮用戶體驗
 把它分為各個組成要素
 從不同角度來了解它
        -----通過這些才能確保你控制了決策所造成的全部結(jié)果

用戶體驗很重要，最大的理由：它對你的用戶很重要。

協(xié)調(diào)一致，直觀明了，甚至讓人愉快的體驗
-----“一次”每件事都按照正確的方式在工作的體驗。

三、Web規(guī)范體系介紹

四、界面設(shè)計開發(fā)流程

五、應(yīng)該遵循的基本原則

顯示信息一致性的原則
以用戶為主導(dǎo)原則
易用性原則
鼠標與鍵盤一致性原則
系統(tǒng)響應(yīng)時間原則
出錯信息和警告原則
信息顯示原則
數(shù)據(jù)輸入原則
合理性原則
美觀與協(xié)調(diào)性原則

①顯示信息一致性的原則
    無論是控件使用，提示信息措辭，還是顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標準，做到真正的一致。界面直觀、對用戶透明：用戶接觸軟件后對界面上對應(yīng)的功能一目了然、不需要多少培訓(xùn)就可以方便使用應(yīng)用系統(tǒng)。
這樣得到的好處： 
 用戶使用起來能夠建立起精確的心里模型，使用熟練了一個系統(tǒng)界面后，切換到另外一個系統(tǒng)界面能夠很輕松的推測出各種功能。 
 降低培訓(xùn)、支持成本，支持人員不用費力逐個指導(dǎo)。 
 給用戶統(tǒng)一感覺，不覺得混亂，心情愉快，支持度增加。

②以用戶為主導(dǎo)原則
    明確用戶是所有系統(tǒng)處理的核心，不應(yīng)該有應(yīng)用程序來決定處理過程，所以用戶界面應(yīng)當(dāng)由用戶來控制應(yīng)如何工作、如何響應(yīng)，而不是由開發(fā)者按自己的意愿把操作流程強加給用戶。

③易用性原則

用戶不用查閱幫助就能知道該界面的功能并進行相關(guān)正確的操作。
完成相同或相近功能的按鈕用Frame框起來，常用按鈕要支持快捷方式。
完成同一功能或任務(wù)的元素放在集中位置，減少鼠標移動的距離。
按功能將界面劃分局域塊，用Frame框括起來,并要有功能說明或標題。

界面要支持鍵盤自動瀏覽按鈕功能，即按Tab鍵的自動切換功能。
界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前,位置也應(yīng)放在窗口上較醒目的位置。
同一界面上的控件數(shù)最好不要超過10個，多于10個時可以考慮使用分頁界面顯示。

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

④鼠標與鍵盤一致性原則
   盡量遵循可不用鼠標的原則：應(yīng)用中的功能只用鍵盤也應(yīng)當(dāng)可以完成。但是，許多鼠標的操作，如雙擊、拖動對象等，并不能簡單地用鍵盤來模擬即可實現(xiàn)，此類操作可適當(dāng)增加操作按鈕。
⑤系統(tǒng)響應(yīng)時間原則

    系統(tǒng)響應(yīng)時間應(yīng)該適中，響應(yīng)時間過長，用戶就會感到不安和沮喪，而響應(yīng)時間過快也會影響到用戶的操作節(jié)奏，并可能導(dǎo)致錯誤。因此在系統(tǒng)響應(yīng)時間上堅持如下原則：

 0-5秒鼠標顯示成為沙漏；
 5秒以上顯示處理窗口，或顯示進度條；
 一個長時間的處理完成時應(yīng)給予完成警告信息。

⑥出錯信息和警告原則

    出錯信息和警告是指出現(xiàn)問題時系統(tǒng)給出的壞消息，對于出錯信息和警告應(yīng)該遵循以下原則：

 信息以用戶可以理解的術(shù)語描述；
 信息簡明扼要，指出出錯原因并提供解決辦法提示。

⑦信息顯示原則

信息顯示遵循以下原則：
 只顯示與當(dāng)前用戶語境環(huán)境有關(guān)的信息；
 不要用數(shù)據(jù)將用戶包圍，使用便于用戶迅速吸取信息的方式表現(xiàn)信息；
 使用一致的標記、標準縮寫和顏色，顯示信息的含義應(yīng)該非常明確，用戶       
 不必再參考其它信息源；
 產(chǎn)生有意義的出錯信息；
 使用縮進和文本來輔助理解；
 使用窗口分隔控件分隔不同類型的信息；
 高效地使用顯示器的顯示空間，但要避免空間過于擁擠。

⑧數(shù)據(jù)輸入原則

數(shù)據(jù)輸入遵循以下原則：
盡量減少用戶輸入動作的數(shù)量；
維護信息顯示和數(shù)據(jù)輸入的一致性；
交互應(yīng)該是靈活的，對鍵盤和鼠標輸入的靈活性提供支持；
在當(dāng)前動作的語境中使不合適的命令不起作用；
讓用戶控制交互流，用戶可以跳過不必要的動作、改變所需動作的順序
（如果允許的話）以及在不退出系統(tǒng)的情況下從錯誤狀態(tài)中恢復(fù)；
為所有輸入的動作提供幫助；
消除冗余輸入。可能的話提供默認值、絕不要讓用戶提供程序中可以自  
動獲取或計算出來的信息。
⑨合理性原則

  屏幕對角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引
用戶注意力的位置，在放置窗體時要注意利用這兩個位置。

⑩美觀與協(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號的字體。

前景與背景色搭配合理協(xié)調(diào)，反差不宜太大。常用色考慮使用Windows界面色調(diào)。
如果使用其他顏色，主色要柔和，具有親和力，堅決杜絕刺目的顏色。
大型系統(tǒng)常用的主色有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。

界面風(fēng)格要保持一致，字的大小、顏色、字體要相同，除非是需要藝術(shù)處理或有特殊要求的地方。
如果窗體支持最小化和最大化或放大時，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放。
通常父窗體支持縮放時，子窗體沒有必要縮放。
如果能給用戶提供自定義界面風(fēng)格則更好，由用戶自己選擇顏色、字體等。

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