為商業(yè)Web應(yīng)用設(shè)計(jì)用戶界面

1、為商業(yè)Web應(yīng)用設(shè)計(jì)用戶界面商業(yè)Web應(yīng)用的設(shè)計(jì)經(jīng)常會(huì)被疏忽。我見到過大量既不符合企業(yè)目標(biāo)也不能滿足用戶需 求的應(yīng)用，因此導(dǎo)致利潤的虧損和糟糕的用戶體驗(yàn)。甚至是，設(shè)計(jì)師完全沒有參與到應(yīng)用開 發(fā)過程當(dāng)中，而是由開發(fā)人員承擔(dān)全部的職責(zé)。對于開發(fā)人員，這是一個(gè)艱巨的任務(wù)。開發(fā)人員也許擁有前端或后端的豐富開發(fā)經(jīng)驗(yàn)， 但是他們的設(shè)計(jì)知識有限。最終只能是客戶不滿意、用戶沮喪和項(xiàng)目失敗。因此，我將介紹商業(yè)Web應(yīng)用界面設(shè)計(jì)的基礎(chǔ)。雖然在UI設(shè)計(jì)時(shí)，可以使用許多不同 方法、技術(shù)和原則，但我們這里主要專注于商業(yè)Web應(yīng)用。Web站點(diǎn)VS Web應(yīng)用很容易將Web應(yīng)用（Web Applications）和web網(wǎng)

2、站（Websites）相混淆，就像將用 戶界面設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)相混淆一樣。但是它們從本質(zhì)上及其它許多方面都不同，我們將在本 文中進(jìn)行探討。Web網(wǎng)站由許多頁面組成，這些頁面往往包含許多靜態(tài)文本、圖像和視頻，只有有限的 交互性功能（例如，聯(lián)系表單和搜索功能）。網(wǎng)站的主要作用是傳播信息。一些網(wǎng)站使用CMS （內(nèi)容管理系統(tǒng)）生成動(dòng)態(tài)內(nèi)容，但是其性質(zhì)仍然是提供信息。而Web應(yīng)用是動(dòng)態(tài)、交互式的系統(tǒng)，幫助企業(yè)執(zhí)行重要的商業(yè)任務(wù)，達(dá)到衡量和提升企 業(yè)生產(chǎn)力的目的。因此，Web應(yīng)用的主要作用是根據(jù)定義的業(yè)務(wù)規(guī)則，去執(zhí)行那些服務(wù)于用 戶任務(wù)的功能。對用戶而言，Web應(yīng)用需要較高層次的參與和應(yīng)用知識。用戶不會(huì)只是

3、偶然性的發(fā)現(xiàn)這 個(gè)應(yīng)用和無意識的隨便使用。他們會(huì)將這個(gè)應(yīng)用作為一個(gè)日常性使用的工具，去完成非常重 要的商業(yè)任務(wù)。最后，即使用戶不喜歡它，也不能輕易的停止使用它和用其它應(yīng)用替代它。CampaignMonitor是一個(gè)強(qiáng)大的電子郵件營銷應(yīng)用軟件，而Jeff Sarimento的網(wǎng)站旨在向 讀者展示他的生活和工作。Web應(yīng)用的類型商業(yè)Web應(yīng)用的業(yè)務(wù)范圍廣泛，從貨品計(jì)價(jià)、內(nèi)容管理系統(tǒng)、文檔管理系統(tǒng)，到金融和 財(cái)務(wù)系統(tǒng)等等。我們可以將商業(yè)Web應(yīng)用區(qū)分為開放的和封閉的應(yīng)用。開放的系統(tǒng)是在線應(yīng)用，任何人 都可以注冊賬戶，然后輕松的訪問。用戶可以通過web網(wǎng)絡(luò)訪問這個(gè)應(yīng)用，可以免費(fèi)或付費(fèi) 注冊賬號。封閉的

4、系統(tǒng)是離線應(yīng)用，不能在公司外部訪問和使用（雖然很多系統(tǒng)通過一些服 務(wù)或是專用接口，向商業(yè)伙伴展示了一些功能）。這些應(yīng)用往往是在公司內(nèi)部網(wǎng)絡(luò)中運(yùn)行， 只有公司員工才可以使用。我不知道是誰創(chuàng)造了 weblication這個(gè)詞，但我喜歡這個(gè)詞，它大致說出了 web應(yīng)用是 什么。但這并不是說一個(gè)web應(yīng)用是一半網(wǎng)站和一半應(yīng)用的混合體，web應(yīng)用比這可要復(fù)雜 的多。首先，理解你的用戶也許你已經(jīng)不斷的聽到說要理解你的用戶，并且理由也很充分：一個(gè)成功的用戶界面要 以用戶和用戶任務(wù)為中心。然而，這就是為什么大多數(shù)開發(fā)人員無法創(chuàng)建良好用戶體驗(yàn)的關(guān) 鍵所在。正如Steve Krug說的：“開發(fā)人員喜歡復(fù)雜性，他們

5、喜歡去探索系統(tǒng)是如何運(yùn)行 的?！碑?dāng)你去識別和確認(rèn)誰是用戶時(shí)，記住客戶不是用戶，你自己也不是用戶。雖然客戶的管 理層經(jīng)常會(huì)對項(xiàng)目感興趣和試圖影響決策，但他們不會(huì)一天中在電腦面前坐上幾個(gè)小時(shí)去使 用它（除非這個(gè)應(yīng)用就是針對他們的）。如何識別用戶？你可以使用許多技術(shù)去識別用戶，例如用戶訪談、商業(yè)利益相關(guān)者訪談和“影子”觀察 法。通過訪談，你可以知道用戶對于系統(tǒng)和計(jì)算機(jī)的基本理解和認(rèn)知。而通過“影子”觀察， 你可以知道用戶如何執(zhí)行任務(wù)和犯了哪些錯(cuò)誤的更加詳細(xì)的信息。之所以叫“影子”觀察法， 是因?yàn)橛^察者就像一直跟隨用戶的影子一樣，去觀看和記錄用戶的每一個(gè)任務(wù)步驟。如果你沒有遇到真正的用戶（可能是因?yàn)槟?/p>

6、沒有權(quán)限，或是在設(shè)計(jì)開放的應(yīng)用），你可 以使用“人物角色”來幫自己識別用戶?！叭宋锝巧笔钦鎸?shí)用戶的代表，包含了用戶的習(xí) 慣、目標(biāo)和動(dòng)機(jī)等等。由于有關(guān)用戶的某些信息往往是通過商業(yè)分析中確定的，所以你可以 利用它來創(chuàng)建人物角色。如果你對人物角色方法不太熟悉，Brand Colbow的漫畫將對你有幫 助（如下圖）。這個(gè)人物角色有這些目的人物背景：目標(biāo)和動(dòng)機(jī)Mike是一個(gè)家小型制造公司的現(xiàn)場支持工 程師，他經(jīng)常會(huì)被委派外出，一天之中只 有一兩次在辦公室。Mike想要在到達(dá)客戶那里進(jìn)行維修之前， 就知道發(fā)生了什么問題。目的是為了第一 時(shí)間就能準(zhǔn)確的修正問題。回訪或超過計(jì) 劃日程，會(huì)占用他個(gè)人時(shí)間和公司

7、最低要 求時(shí)間。人物角色任務(wù)分析有助于確定用戶在工作中需要完成哪些任務(wù)、如何完成、需要多長時(shí)間、犯了 哪些錯(cuò)誤。有時(shí)用戶正在使用你將要重新設(shè)計(jì)的舊版本應(yīng)用。你正好可以利用這套舊系統(tǒng)， 來看看用戶是如何操作的。這樣你會(huì)很容易了解到用戶的任務(wù)和遇到的挑戰(zhàn)。無論誰是你的用戶，有一點(diǎn)可以肯定的是：在大多數(shù)情況下，您必須同時(shí)考慮新手和專 家。要讓新手用戶盡可能快的學(xué)習(xí)和上手，而專家用戶要盡可能快速高效的完成任務(wù)。這就 可能要分別為他們創(chuàng)建單獨(dú)的用戶界面。但在很多情況下，你可以使用各種技巧（比如隱藏 高級功能，逐漸顯露 progressive disclosure），來保證不同類型的用戶正常使用同一界面。

8、這些研究通常由市場分析來完成。但當(dāng)沒人來負(fù)責(zé)這項(xiàng)業(yè)務(wù)時(shí)，你應(yīng)該去完成它。一旦 得到了必要的信息，就可以開始設(shè)計(jì)了。設(shè)計(jì)流程有許多種界面設(shè)計(jì)流程你可以采用，或者你已經(jīng)使用了某一中。然而，我建議你考慮敏 捷（Agile）方法。為什么呢？因?yàn)閷τ谟脩簦ɑ蚩蛻簦﹣碚f，用戶界面就是產(chǎn)品。他們不 會(huì)關(guān)心你的概念構(gòu)思、先進(jìn)的后臺(tái)技術(shù)或強(qiáng)大的服務(wù)器。他們希望看到的只是用戶界面。那么，敏捷方法有何幫助？主要是它的重要的原則：迭代方法。每一次迭代都包括了你 所定義流程的所有步驟。這就意味著，第一次迭代結(jié)束后，你將得到一個(gè)可以進(jìn)行測試的產(chǎn) 品：即一個(gè)原型。早圖(Sketching)草圖是探索思路的一種強(qiáng)大方法。目的

9、是通過起草各種不同的概念，找到最佳方案。大 多數(shù)草圖會(huì)被丟棄，但這無所謂。正如Bill Buxton在他的Sketching User Experience 一書中說的：草圖快速低廉且容易處理，這正是它為何如此強(qiáng)大。草圖(sketches )和線框圖(wireframes) 一樣嗎？也許區(qū)別是模糊的，但是我覺得不 同。線框圖不是捕捉粗略的想法，而是對粗略想法的延伸實(shí)現(xiàn)?？梢宰x讀IxDA上的精彩討 論：線框圖前的草圖。一旦你得到“正確”的草圖，或者至少你認(rèn)為正確的一個(gè)，你便可以創(chuàng)建更加詳細(xì)的線 框圖或直接去創(chuàng)建可交互的原型。F函砒I1ESH 畚 F”，ftJason Robb的早圖有關(guān)草圖和線框

10、圖的趣味閱讀：35杰出的線框圖資源起草構(gòu)思用戶體驗(yàn)的工具20步改進(jìn)線框圖原型(Prototyping)接著就是去創(chuàng)建能夠模擬真實(shí)應(yīng)用的原型。原型可以包含一個(gè)或多個(gè)功能（或所有功能）， 但它只是模擬真實(shí)應(yīng)用的行為，而不是對功能的真正實(shí)現(xiàn)，讓用戶感覺到好像真的在運(yùn)行。 但原型也可以包含一些真正的功能，例如復(fù)雜的計(jì)算。由于HTML原型是臨時(shí)性的（它的目的是驗(yàn)證想法），所以不用花時(shí)間在代碼上。讓bug 最少，但只要能夠運(yùn)行就行，畢竟你最終會(huì)扔掉它。你也可以使用一些專門的原型設(shè)計(jì)工具， 如 Axure，有些人甚至PowerPoint 做原型。PM 如a 囪士, F理中Nam du prodonit #3

11、bCwH 4 曲 E# nr du pflMlH i n urjf fltyjEBl以畔獨(dú)OngTw 田 nilMiririK監(jiān) “mriitu kihBOriBaim ItpikHVialr prvdutt-Gwr lit* d la marai節(jié)45I 柄K “E“ ,。呼1.片1網(wǎng) 呻flf Pg腎虬 F 中 WiM iMTTpfl-心 呻班 營可 中El!i1|ib llfur 5 imrt d rrniwn% nilrid EMnrifiMkEn -tai!i uitdr nsi. if LiiffYiide Si1&呷 it Qua -.iv d tkn kt irp-itfit

12、frltfi 1 ill4i1 AIM td.-iiidMv toupniriLi Efw劇* ifffKC iib；ii cdMai rwripSHi w4 m cvi v-r -IniiuM gH IrtTWFF TFW 國口網(wǎng).*虬 trf 電 PWF 1F. rafilrud v Evrcrlofin sjtAmqg Ufna. hi ftl L-iiTB-ri=d: tTrlM Dxri *JSrid-dbJ-1- j岬hi idmd JiM34I dekr* ipifiriji E ppr irfir ant atcH 網(wǎng)尋衛(wèi) rwri |i ci-Hi iu#ir唧. 卜，4#c

13、r 1 商run nwfbilitorvnRffrpss-ili li marw N=* m diCI2lr!TUl嚴(yán)心嚀戶T*牝rpm擊中| 1, rant-tajBflpr 明磚pi |舟；村 為叫日”押Ifrr產(chǎn)四心四J Ihlitr K 姐研 Fig iLqj a U rftrn * 頑町 f inL.d rfeiKittfN 都并金卻IM tf a *i MMHda El: !fcl. J : fFm一個(gè)電子商務(wù)網(wǎng)站的Axure交互式原型，e-maujean提供。原型設(shè)計(jì)的相關(guān)閱讀和工具：5個(gè)Web設(shè)計(jì)規(guī)劃和原型設(shè)計(jì)的實(shí)用工具一個(gè)實(shí)踐者的原型設(shè)計(jì)指南:來自Rosenfeld Medi

14、a的一本書16個(gè)用于原型和線框圖的設(shè)計(jì)工具測試（Testing）原型如果不用于進(jìn)行測試，原型也就失去了其真正的意義。測試并沒有那么難，正如Jakob Nielsen和Steve Krug提倡的“簡易可用性測試”方法，它成本低廉、快速，并為 你的設(shè)計(jì)決策提供寶貴建議。你也可以將測試結(jié)果作為另一次迭代（草圖-原型-測試）的基 礎(chǔ)。至少在主要問題解決之前，你都該進(jìn)行測試。我們知道軟件項(xiàng)目的時(shí)間和預(yù)算都很緊張， 所以為了更加高效，要盡早測試和經(jīng)常測試。Steve Krug的這本Rocket Surgery Made Easy書是簡易可用性測試的最好資源， 你可以找一本進(jìn)行閱讀。E圖是對Deliciou

15、s進(jìn)行可用性測試，(nz)dave提供更多閱讀:為什么你只需要測試5個(gè)用戶可用性測試不神秘可用性測試神話設(shè)計(jì)原則現(xiàn)在流行許多設(shè)計(jì)原則，但還沒有形成最終的普遍共識。所以我們這里去看一些非正式 的設(shè)計(jì)原則，但并不進(jìn)行嚴(yán)格定義。一致性一個(gè)優(yōu)秀用戶界面的關(guān)鍵要素是“一致性”和“熟悉感”。用戶界面在整個(gè)應(yīng)用的所有 部分的應(yīng)該一致，從導(dǎo)航、顏色到術(shù)語，這叫做內(nèi)部一致性。用戶界面還應(yīng)該和該應(yīng)用所處 的環(huán)境一致，例如和操作系統(tǒng)或其它配套應(yīng)用達(dá)到一致，一個(gè)典型的例子就是微軟Office 套裝應(yīng)用，這叫做外部一致性。保證一致性的一種有效的方法，就是為每個(gè)項(xiàng)目或?yàn)橐唤M項(xiàng)目定義用戶界面指南(user interfac

16、e guidelines)。每個(gè)詳細(xì)的設(shè)計(jì)決定都應(yīng)該遵循它。用戶界面指南不僅能保持界 面一致性，還能夠作為文檔幫助團(tuán)隊(duì)成員更好的理解你的決策。雖然是一個(gè)簡單例子，SprinklePenny在整個(gè)應(yīng)用中達(dá)到了一致性和熟悉感一致的用戶界面使得學(xué)習(xí)曲線縮短，因?yàn)橛脩粢呀?jīng)認(rèn)識了系統(tǒng)的某些部分和復(fù)用以前的 使用經(jīng)驗(yàn)。但是“熟悉感”有時(shí)會(huì)和“一致性”相混淆。具有“熟悉感”的用戶界面能夠吸 取用戶的心智模型和利用合理的隱喻方法。例如，文件夾就是對文件組織方式的著名的隱喻， 而不再是使用以往命令行操作系統(tǒng)的“目錄”。總之，就是要使用用戶的語言。很多企業(yè)用戶有一個(gè)共同的觀點(diǎn)是：一個(gè)良好的用戶界面應(yīng)該看起來像微軟

17、的Office 產(chǎn)品，尤其是Outlook。我不想去解釋這是否有意義。但是我想說的是：要遵循“以用戶為 中心”的方法這里，我只提出不同于他們的建議：要沿用“以用戶為中心”的方法，并解釋為什么為 員工、客戶和合作伙伴（合作伙伴的用戶）設(shè)計(jì)應(yīng)用程序才是重要的。盡管如此，大多數(shù)企業(yè)都不相同，他們的工作流程也不同。例如，來自同一行業(yè)的兩個(gè) 公司可能有完全不同的流程，將迫使你超越和創(chuàng)新。設(shè)計(jì)流程中的這部分可能非常有趣，當(dāng) 然你也要在創(chuàng)新的程度上多加把握。更多閱讀：. 為設(shè)計(jì)和選擇組件. 為什么一致性如此重要高效毫無疑問，當(dāng)用戶使用商業(yè)應(yīng)用時(shí)應(yīng)該能夠達(dá)到高效，這正是客戶花錢的原因，也正是 管理者對應(yīng)用的期

18、望。用戶界面應(yīng)該能夠讓用戶高效工作，并以最輕松和快速的方式完成任 務(wù)。但事實(shí)上并非如此。開發(fā)人員們有一種觀點(diǎn)(至少實(shí)際行動(dòng)上確實(shí)如此)：用戶界面應(yīng) 該和系統(tǒng)后臺(tái)一樣復(fù)雜。無論這聽起來多么荒謬，但問題已經(jīng)出現(xiàn)，可能還會(huì)令你很頭疼。 這就是為什么必須與開發(fā)人員進(jìn)行良好的溝通和協(xié)作。當(dāng)用戶專注于某個(gè)特定任務(wù)時(shí)是高效的。前面提到，任務(wù)分析可以幫助你識別任務(wù)和確 定用戶如何完成該任務(wù)。如果一個(gè)任務(wù)需要較長時(shí)間，就需要將其分解成許多較小的任務(wù)， 這樣能加速用戶完成任務(wù)。你還可以通過提供鍵盤輸入和快捷鍵來提高效率。試想一下，當(dāng) 用戶必須在鼠標(biāo)和鍵盤之間來回切換是多么耽誤時(shí)間。在某些情況下，你需要為習(xí)慣于命令

19、 行界面的用戶設(shè)計(jì)，他們將強(qiáng)烈渴望支持鍵盤輸入。給你一個(gè)建議：定義快捷鍵時(shí)，應(yīng)與常 用程序的快捷鍵相同。例如，Ctrl + s永遠(yuǎn)應(yīng)該是“保存”等等。FileEdu VieA! Insert Fwmafi Fom T&alaHie4p尸$ %- tGplB -tw A-甜- 4 奉E ABIf&Fe-r0ne&iLFRLDe&enplisn.壬如*ePH招T多bisHt ciXnrnvni:3-10II薄13ehangs wlco 屈h riIb-sU35WedITISInSM舊211_Shflre *Coi ylc docs link?Google Docs中的表格就為用戶提供了鍵盤快捷鍵和

20、快捷菜單，并借鑒了用戶熟悉的桌面程 序，使用戶高效率完成工作。通過個(gè)性化定制也可以提高用戶使用效率。用戶自己定制界面時(shí)，不但會(huì)更快上手，更 重要的是，在使用時(shí)會(huì)更有信心。個(gè)性化可以體現(xiàn)在許多方面：選擇儀表板(dashboard) 中的模塊、定義快捷鍵選項(xiàng)、設(shè)置偏好、改變元素順序等等。也應(yīng)該注意可訪問性(accessibility)，雖然許多人覺得Web應(yīng)用中的可訪問性并不重 要，但實(shí)際上你該像對待公眾網(wǎng)站一個(gè)對待它。Web應(yīng)用程序在處理信息時(shí)也必須是高效的。因此，局部呈現(xiàn)和朗5求產(chǎn)生的耗資 源的交互行為需要慎重使用。反饋對于系統(tǒng)處于何種狀態(tài)，界面上應(yīng)提供有效的反饋。如果發(fā)生錯(cuò)誤，應(yīng)當(dāng)通知用戶并

21、設(shè) 法恢復(fù)。如果程序正在運(yùn)行中，需要通知用戶進(jìn)展如何。我們可以更進(jìn)一步說：用戶界面應(yīng)該防止用戶犯錯(cuò)。這一法則被稱作容錯(cuò)，確認(rèn)對話框、 撤消選項(xiàng)、智能輸入(forgiving formats)等就遵循了它?！叭蒎e(cuò)”讓用戶更安全地探索 界面、降低了學(xué)習(xí)成本并提高了整體滿意度。由于商業(yè)Web應(yīng)用程序很復(fù)雜，你還需要提供一個(gè)全面的幫助系統(tǒng)。這可以通過聯(lián)機(jī)幫 助、支持?jǐn)?shù)據(jù)庫、知識庫或是向?qū)?包含視頻，圖像和文字)來達(dá)到。更多閱讀：UI設(shè)計(jì)中的容錯(cuò)Web表單驗(yàn)證：最佳實(shí)踐和練習(xí)小心處理用戶錯(cuò)誤：讓用戶回到正確軌道上讓用戶滿意滿意度是一個(gè)比較主觀的詞，它是指用戶使用界面時(shí)的愉悅程度。我們之前介紹的每一 條設(shè)

22、計(jì)準(zhǔn)則，都會(huì)影響滿意度。還有一些準(zhǔn)則需要在這提一下：簡潔是界面設(shè)計(jì)的一條基本準(zhǔn)則。越是簡潔的用戶界面，就越容易使用。但對商務(wù)應(yīng)用 程序來說，讓用戶界面簡潔卻是一個(gè)挑戰(zhàn)，因?yàn)檫@些應(yīng)用往往有許多功能。問題的關(guān)鍵就是 要平衡功能和簡潔。最有效的解決方法就是“約束”。換句話說，就是找到最簡單的解決方 案。BUILDITWITH.MEPE0PUE壓 M51GMWM0W rn_i mt HTwr*BWTJurrftn “hFWe*I 知，Jh3 EM ArMi*4Sots-GnCcwti nine郵b- Tft ! AH ,口fiLLF .b頃上廣BuildWith.me有一個(gè)簡單而高效的用戶界面，它并沒

23、有為此犧牲美觀。美觀，雖然是有些主觀甚至隨意的評價(jià)，但也是影響滿意度的重要因素。用戶喜愛漂亮 的用戶界面，甚至可以為此犧牲功能。但你也要注意自己并不是在創(chuàng)造藝術(shù)品。有關(guān)美觀的 最好的文章之一是美麗無罪(In Defense of Eye Candy)。最終，由于用戶會(huì)花很長時(shí)間去使用一個(gè)商務(wù)應(yīng)用程序，無論界面多么好用、一致性和 容錯(cuò)性，評價(jià)界面成功與否的決定因素還是：用戶滿意度。更多閱讀:7個(gè)界面技術(shù)簡化和整潔你的界面克制(Restraint)美麗無罪其它和UI設(shè)計(jì)相關(guān)的資源：優(yōu)秀用戶界面設(shè)計(jì)的12個(gè)實(shí)用技術(shù)成功用戶界面的8個(gè)特征用戶界面設(shè)計(jì)原則(維基百科)UI設(shè)計(jì)大師的10大原則幫你掌握用戶

24、界面設(shè)計(jì)的20個(gè)網(wǎng)站W(wǎng)eb應(yīng)用的必要元素Web應(yīng)用雖然各異，但它們大多包含有相同的元素。每個(gè)應(yīng)用對這些元素的使用方式并 不相同，讓我們先看看最常見的三個(gè)元素。eb 表單(WebForms )一般來說，表單對Web應(yīng)用程序非常重要。不過，正如Luke Wroblewski在他的Web 表單設(shè)計(jì)的著作中說的：“沒有人愿意填表單?！边@里說的表單，就包括許多商業(yè)Web應(yīng)用程 序的注冊表單。盡量減少用戶填寫表單時(shí)的挫折感。提供內(nèi)部驗(yàn)證與良好反饋，并盡可能使用默認(rèn)值。 不要忘記新手用戶，通過向?qū)Щ螂[藏高級(或不常用的)功能，來幫助他們更快地完成任 務(wù)。主從窗格(Master-DetailViews)這是一

25、種在兩個(gè)獨(dú)立且相關(guān)的窗格顯示數(shù)據(jù)的技術(shù)。一個(gè)窗格顯示項(xiàng)目列表，另一個(gè)顯 示所選項(xiàng)的詳細(xì)信息。主從窗格可以在單一頁面或通過多個(gè)頁切換進(jìn)行實(shí)現(xiàn)。儀表板(Dashboards)很多Web應(yīng)用程序都有儀表板。一個(gè)儀表板是將需要操作和決策的最重要信息展示在一 個(gè)視圖上。它一般僅在單一頁面出現(xiàn)，而且是一個(gè)應(yīng)用程序的初始頁。儀表板非常重要，因 為它讓用戶無需深入界面，就可以看到信息并執(zhí)行任務(wù)。ACCOUNT WATCHLISTM DNEV GOING OUTijAnv iccuyT；JieElMieAnBSm-OnL* COmiG IRCXero在儀表板中顯示了用戶的最重要的財(cái)務(wù)信息(如銀行帳戶和信用卡信息

26、)，以便于用戶 迅速看到自己的財(cái)務(wù)數(shù)據(jù)狀況。大量使用的表格(Heavy Use of Table)由于Web應(yīng)用常常需要處理大量容易取得和歸類的數(shù)據(jù)，表格也就不可避免了。這其實(shí) 并不是壞事。事實(shí)上，表格就是干這個(gè)用的。不要將其與無表格頁面布局相混淆。高效表 格能夠易于閱讀。因此在多數(shù)情況下，你需要一個(gè)有意義的標(biāo)題、合理的表格列數(shù)、分頁、 行顏色交替顯示、適當(dāng)?shù)牧袑R，并提供排序和過濾功能等等。表格是可以人為調(diào)整的，這就是說你可以為它們添加更多信息，甚至去修改它們的數(shù)據(jù) 項(xiàng)。Your Company* Cbh n*W ，-porl T iirnpjn.c5WUur 11 Adejnin：Cash

27、 FlowUHM*rhAjr州-岫酎tWH 弟 HAHDI I鼻WEbLireDD 亶田窗 、i*ooo msod u_iwic 4r.Br/Cujd lu-iacoINCOMEr%.W4品 w Win SJIPHL 卻2DQCIqJ W B.WW4.30.4W-M-.&inuoS.IW&.W-IJU E由做L8?.weaJ4AWg2.W#7_SO$WC g i.LE.WjU，.頃I湘fjDaLlidd 時(shí)* 他性相*miSM桐sWWflW蹄gPMffl-加OfWW岫妙* *wi0riibriMiirHMrtFIlJQ 疇qpjQ4M&O5也W如, J4悼* 曲MilngoaP.UDKSIM.WMsA.mnIA%.曲v miMM*uwioafi-JW-Wl_I J4&44LT睫做*LijfrKfLJMJLM4.&LWWE3M-L順的L施田L(fēng)Ml折PulseApp是“表格如何有效顯示和處理復(fù)雜數(shù)據(jù)”的優(yōu)秀案例。報(bào)表（Reports）大多數(shù)企業(yè)都離不開一些類型的報(bào)表。由于打印報(bào)表是常用功能，你就要重視報(bào)表的設(shè) 計(jì)。打印（或輸出）的報(bào)表通常是在線報(bào)表的簡化版本，所以需要優(yōu)化以適應(yīng)單色打印。FreshBooks具有打印、PDF輸出和“以電子郵件發(fā)送”功能。它還能提供打印預(yù)覽。不要忘記UI設(shè)計(jì)模式我們經(jīng)常聽到或討論UI設(shè)計(jì)模式，但有時(shí)還是會(huì)忽視它們！