用戶界面指南（user interface guidelines）， 標準(standards)， 通用風格指南(corporate style guides)， 企業(yè)風格指南(enterprise style guides)， Web應(yīng)用軟件(Web applications)
引言
挑戰(zhàn)
在為一系列Web應(yīng)用軟件創(chuàng)建用戶界面設(shè)計指南時，我們和很多公司一樣面臨著困難。我們力圖設(shè)計出豐富多樣的，基于web的軟件產(chǎn)品來滿足不同用戶群體的需要，而作為參考的只有桌面應(yīng)用程序的相關(guān)指南。我們知道技術(shù)的限制影響著我們的指南，我們同樣希望能使軟件易獲得、兼容各種瀏覽器并可本地化。這篇文章將會探討我們遇到的，也是其他公司經(jīng)常提出的問題，以及我們?nèi)绾稳タ朔鼈儭?/p>
我們首先面臨的挑戰(zhàn)就是Oracle已有的UI指南。它關(guān)注的是Java而不是Html，并且適用于窗口層，因此沒有提供用例（use-cases）、多重選項、高級組件組合（如模板或者流程），也沒有相關(guān)例子說明使用方法。我們將使用其他的指南作為范本，放棄原有的指南，因為它太過空泛無法具體、一致地應(yīng)用到產(chǎn)品中。
其次，新的指南需要適應(yīng)不斷發(fā)展的技術(shù)——Web應(yīng)用軟件。Web應(yīng)用軟件指南可以從桌面應(yīng)用程序的UI指南得到借鑒，但這種方法受到其使用性限制。Web應(yīng)用軟件通過瀏覽器傳輸，與桌面軟件（如：窗口和菜單）相比受控于不同的表現(xiàn)形式（如：以網(wǎng)頁為中心）。另外，為了支持跨瀏覽器的兼容性、國際標準和無障礙性的訪問標準，這種基于Html的用戶界面在交互性上要弱于桌面應(yīng)用程序。
第三個問題是基于web的產(chǎn)品的適用范圍。我們的設(shè)計需要滿足100多個不同領(lǐng)域開發(fā)的基于web的產(chǎn)品，服務(wù)于多種多樣的用戶群體。
第四，我們?nèi)狈娭坪椭С謥碓O(shè)計和執(zhí)行一系列的指南。很多開發(fā)團隊已經(jīng)在快速開發(fā)他們具備獨特的外觀感受的產(chǎn)品。
為了應(yīng)對開發(fā)Html 界面設(shè)計指南的困難，我們制定的指南不僅要能靈活的應(yīng)用于大量不同的實例和問題，在細節(jié)上也要滿足所有團隊的需要。
我們的解決方案——The Bull’s Eye（同心圓）
我們設(shè)計了Bull’s-Eye（同心圓）來解決我們面臨的四個挑戰(zhàn)。 Bull‘s-Eye（圖1）表示了指南的同心圓結(jié)構(gòu)，每一層都是其相鄰圓開始由內(nèi)向外的延伸。在Bull’s-Eye（同心圓結(jié)構(gòu)圖）的中心是組件部分，緊接著的是網(wǎng)頁模板和網(wǎng)頁流程。交互模型或模式在網(wǎng)頁流程的上面。Bull’s-Eye（同心圓結(jié)構(gòu)圖）最外部的結(jié)構(gòu)是總體特征和原則。
缺乏HTML的界面設(shè)計基礎(chǔ)
在形成Bull‘s-Eye的概念和制定標準之前，我們評估了我們已有的設(shè)計指南，以及其他軟件的指南。對于制定風格指南[2,3,7,11]、圖形化用戶界面（GUI）指南[1,4,6,16,12,13,5]以及網(wǎng)頁風格指南[9] 的考察顯示，現(xiàn)有的資源不是過于概括就是過于具體?，F(xiàn)有的方法提供的一系列用戶界面設(shè)計原則（如，設(shè)計指南和啟發(fā)），過于概括而難以在具體的項目上應(yīng)用，或者它們提供一些標準（如在UI組件或控件層），太過狹隘而無法應(yīng)用到我們團隊所面對的多種多樣的項目上。由于篇幅有限，本文中我們無法就此分析做出更多的探討?，F(xiàn)有設(shè)計指南的明顯不足，促使我們決定制定能適應(yīng)從UI組件到總體特征的多層次指南。從組件層到流程的多層次指南的概念，成為Bull’s-Eye （同心圓結(jié)構(gòu)圖）表現(xiàn)形式的基礎(chǔ)。Web應(yīng)用軟件
作為Web設(shè)計指南調(diào)查的一部分，我們研究了現(xiàn)有的Web表現(xiàn)形式。我們檢查了現(xiàn)有的Web應(yīng)用軟件和Web站點，以及能在Web瀏覽器環(huán)境下運行的桌面元素。在這個過程中，制定出了一系列關(guān)于Web應(yīng)用軟件UI設(shè)計指南的通用概念，比如：縱向網(wǎng)頁 (對應(yīng)于橫行網(wǎng)頁), 基于瀏覽器的分級網(wǎng)頁結(jié)構(gòu), 自由式布局 (對應(yīng)于GUI風格的窗口、面板和工具條）, 和web導(dǎo)航結(jié)構(gòu)，如標簽（tab）導(dǎo)航和側(cè)邊導(dǎo)航(對應(yīng)于菜單結(jié)構(gòu)和多重對話界面)。我們發(fā)現(xiàn)這些概括性的說法和其他人取得了一致，其他很多人也做出了同樣的努力。如Web設(shè)計顧問Najjar’在Viant所做的工作 [8], 消費Web應(yīng)用軟件設(shè)計師們的工作，以及Zhu在微軟的工作[17]. 隨后我們將這些結(jié)論應(yīng)用到Bull‘s-Eye（同心圓結(jié)構(gòu)圖）中不同層次的指南上。
設(shè)計Web應(yīng)用軟件的第二個問題是，基于瀏覽器的UI界面需要能夠支持對各種瀏覽器的兼容性、國際化和無障礙性。 為了解決這個問題，我們選擇了減少界面中一些特定的交互操作，只能在非常有限的情況下使用Javascript，而且基本上不能使用Java applets。
廣域、多樣的產(chǎn)品線和用戶群
我們的產(chǎn)品序列范圍從服務(wù)器技術(shù)、開發(fā)工具，到客戶關(guān)系管理（CRM）、企業(yè)資源預(yù)算（ERP），一直到商務(wù)智能化。多樣化的產(chǎn)品和與之相應(yīng)的用戶群體，對于什么是軟件經(jīng)常進行的典型任務(wù)，常常衍生出非常不同的界面詮釋（圖2）。例如，用來篩選產(chǎn)品的操作像“Search”在各個不同的程序中，其外觀和操作都是不同的。獲取和顯示搜索條目與搜索結(jié)果列的網(wǎng)頁流程設(shè)計，在各個軟件中并非一致。對于基本對象（如從購買訂單到數(shù)據(jù)庫對象）的顯示和導(dǎo)航在不同的程序中也是大不相同的；它們在外觀和交互行為上都沒有任何共同之處。甚至于一些簡單的操作，如查看報告在不同的程序中也是各式各樣的。對產(chǎn)品序列的檢查，顯示了程序和劃分中UI的不一致性，并且這種問題在網(wǎng)頁和網(wǎng)頁流程上最為顯著。然而，我們確信創(chuàng)建一個跨平臺的通用外觀是可行的[例如，5]。
同時，我們要面對各式各樣的用戶群體。例如自助式保險金軟件定義其用戶為“在公司里能使用鼠標的任何雇員”。從看門人到CEO的任何人，都可以為了他們的保險金而登陸使用該產(chǎn)品。而相反的卻是數(shù)據(jù)庫產(chǎn)品，其定義的用戶“初學者到專家數(shù)據(jù)庫管理員”——他們都需要有比較高的電腦技術(shù)。
為了使不同的程序能具有通用的外觀和感受，我們再次轉(zhuǎn)向制定多層指南的概念。指南不僅覆蓋網(wǎng)頁上單獨的UI組件（如搜索網(wǎng)頁上的圖標），也包括頁面布局和網(wǎng)頁流程（如搜索網(wǎng)頁模板和通用的搜索流程）。
在這一點上，Bull’s Eye（同心圓結(jié)構(gòu)圖）解決了在廣泛的產(chǎn)品組中創(chuàng)建通用的用戶體驗的大體問題，但并沒有解決在這些產(chǎn)品組中用戶群體的多樣性問題。如一個基本的搜索網(wǎng)頁模板和搜索流程能滿足很多程序的需要（和潛在的一些用戶群體），但卻不能滿足所有程序的要求或適應(yīng)不同用戶的技術(shù)水平。很明顯，指南的每個層次的多重選項需要滿足這種多樣性。
缺乏強制和支持
1999年我們收到上級管理部門的一個CEO級別的命令，要求我們采用通用的外觀和感受。為使UI指南和標準能夠?qū)崿F(xiàn)，我們需要開展三種適當?shù)幕A(chǔ)性的實踐：
培訓的范圍是從對開發(fā)產(chǎn)品的團隊提供咨詢建議到指南內(nèi)容的課堂教學。早期在推廣這些信息的時候，指南的主要設(shè)計者使用了大范圍的演講來介紹指南的所有獨立部分。這些演講常常針對的是特定領(lǐng)域，比如，人力資源領(lǐng)域。在推廣的過程中，UI團隊為產(chǎn)品團隊提供了一對一的咨詢建議。這包括將產(chǎn)品的信息結(jié)構(gòu)和工作流程轉(zhuǎn)換為適應(yīng)指南的界面設(shè)計。最后，為那些我們無法開展面對面咨詢的開發(fā)者開設(shè)了一個基于Web的自學課程。
協(xié)調(diào)所采取的形式包括:
a) 收集產(chǎn)品和用戶群的需求；
b) 開發(fā)可復(fù)用的UI代碼；
c) 對指南進行可用性測試，以及
d) 個別產(chǎn)品評測
需求的收集是每周一次，持續(xù)不斷的跟蹤需求的變化，識別出現(xiàn)有指南的提升點，將新的需求增加到的下一版本指南中。開發(fā)了一個可復(fù)用的UI代碼庫，用以簡化指南的使用，并且增強指南實現(xiàn)的一致性。一個小組被指派到Oracle來開發(fā)基于指南的可重用UI代碼。與該小組的密切合作成功地采用了指南代碼（至于如何定義“成功”容后再述）。為了檢查指南的有效性，與可用性工程師合作，這樣就有機會不僅對某產(chǎn)品，而且可以對某指南細節(jié)進行可用性測試。最后，在各個層面上都進行了產(chǎn)品UI評測，從UI設(shè)計師的非正式的評測，到部門副主管的正式評測。
溝通的部門不僅僅是可用性和界面設(shè)計部門，還有他們支持的產(chǎn)品團隊。定期的指南更新會通過會議和email通知UI設(shè)計師、可用性工程師、產(chǎn)品經(jīng)理、開發(fā)人員、主任和副主管們。有了這些適當?shù)幕A(chǔ)，我們就完成了指南第一個版本。
