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