在smashingmagazine上看到這篇文章，講的是Web應(yīng)用程序設(shè)計(jì)流程和準(zhǔn)則等方面，也許對(duì)大家有所幫助。翻譯比較倉(cāng)促，錯(cuò)誤地方請(qǐng)多指教，查看原文點(diǎn)這里。

商務(wù)Web應(yīng)用程序的界面設(shè)計(jì)

商務(wù)Web應(yīng)用程序的設(shè)計(jì)常常被人們所忽視。我看到許多程序，它們既不符合商業(yè)目標(biāo)，也不滿足用戶需求，它們有很差的用戶體驗(yàn)，并造成了商業(yè)利潤(rùn)的損失。更夸張的是，有些設(shè)計(jì)師根本沒有參與整個(gè)程序的開發(fā)流程，而是把全部職責(zé)都推給了開發(fā)人員。

對(duì)于擅長(zhǎng)前端和后臺(tái)技術(shù)的工程師來說，他們?nèi)狈υO(shè)計(jì)能力，很難完成這項(xiàng)艱巨的任務(wù)。不滿意的消費(fèi)者、沮喪的用戶，以及失敗的項(xiàng)目，也就自然而然地出現(xiàn)了。

接下來，我們將介紹“商務(wù)Web應(yīng)用程序”界面設(shè)計(jì)的基礎(chǔ)知識(shí)。一般來說,人們可以提供許多有關(guān)界面設(shè)計(jì)的方法、技巧和準(zhǔn)則，而這里，我們的重點(diǎn)將放在商務(wù)Web應(yīng)用程序上來。

一. 網(wǎng)站與Web應(yīng)用程序
我們很容易將Web應(yīng)用程序和網(wǎng)站搞混，就像搞混用戶界面設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)一樣。其實(shí)它們?cè)诒举|(zhì)上和其他方面上都有很大不同，本文將就此與大家探討。

一個(gè)網(wǎng)站更像是一組網(wǎng)頁(yè)集合，大部分都是靜態(tài)文本、圖像和視頻等等，只有有限的交互功能（聯(lián)系表單和搜索功能除外）。網(wǎng)站的主要作用是提供信息。雖然一些網(wǎng)站使用“內(nèi)容管理系統(tǒng)”來提供動(dòng)態(tài)文本，但從性質(zhì)上來說依舊是信息。

CampaignMonitor是強(qiáng)大的電子郵件營(yíng)銷軟件，而Jeff Sarimento 的網(wǎng)站向讀者講述他的工作和生活。

另一方面講，Web應(yīng)用程序是動(dòng)態(tài)交互系統(tǒng)，它幫助企業(yè)完成重要商業(yè)事務(wù)，評(píng)估并提高企業(yè)自身生產(chǎn)力。因此Web應(yīng)用程序的主要作用是：根據(jù)明確的業(yè)務(wù)規(guī)則，滿足不同用戶的需求。

Web應(yīng)用程序在參與度以及知識(shí)儲(chǔ)備方面，對(duì)用戶有更高的要求。這些用戶不只是偶然地使用了它，并評(píng)價(jià)一番，而是把它當(dāng)作完成日常重要商務(wù)的平臺(tái)。總之，當(dāng)他們不了解一款程序的運(yùn)行機(jī)制時(shí)，是不會(huì)隨便喜新厭舊的。而對(duì)網(wǎng)站來說，這種情況卻常常發(fā)生。

1.1 不同類型的Web應(yīng)用程序
Web應(yīng)用程序的業(yè)務(wù)范圍，可以從為自由職業(yè)者開發(fā)票，到內(nèi)容管理、文件管理、銀行和金融系統(tǒng)等等。

我們可以區(qū)分出開放的和保密的應(yīng)用程序。在開放的程序中，用戶可以很容易接近到其他注冊(cè)用戶。他們可以在網(wǎng)上使用這些程序，選擇注冊(cè)免費(fèi)賬號(hào)或是收費(fèi)賬號(hào)。保密的應(yīng)用程序通常不允許在公司以外的地點(diǎn)使用。在外面,它們僅僅是一個(gè)“離線”的程序（雖然很多系統(tǒng)通過一些服務(wù)或是專用接口，向商業(yè)伙伴展示了一些功能）。這種程序一般只能在公司的內(nèi)部網(wǎng)絡(luò)中運(yùn)行，只有員工才可以使用。

我不知道是誰創(chuàng)造了weblication這個(gè)詞，至少在現(xiàn)階段我很喜歡它，它描述了Web應(yīng)用程序是什么。但這并不意味著一個(gè)Web應(yīng)用程序就是網(wǎng)站和程序的簡(jiǎn)單混合，它可比這復(fù)雜得多。

二. 首先要了解你的用戶
有一句話，你可能聽過有一千次了，也聽過遵循它的理由。這就是“一個(gè)成功的用戶界面，一定要以用戶和他們的任務(wù)為核心”。這也是為什么許多開發(fā)人員沒能創(chuàng)造出良好的用戶體驗(yàn)的關(guān)鍵。正如Steve Krug所說，“開發(fā)人員喜歡復(fù)雜的東西，他們享受發(fā)現(xiàn)事物運(yùn)行機(jī)制的過程?！?/p>

在識(shí)別用戶時(shí)，切忌，客戶不是用戶，你也不是。雖然客戶的管理層通常會(huì)對(duì)該項(xiàng)目感興趣，并試圖影響你的決策，但你要記住，他們不會(huì)每天使用該程序工作好幾個(gè)小時(shí)（除非該程序是專門為他們?cè)O(shè)計(jì)的）。

2.1 如何識(shí)別用戶？
我們可以通過許多方法識(shí)別用戶，比如用戶訪談，商業(yè)利益相關(guān)者訪談和影子用戶觀察( the “shadowing” method of observation)等?！坝脩粼L談”讓你了解用戶在程序和計(jì)算機(jī)方面的知識(shí)儲(chǔ)備，而通過“用戶觀察” 能得到更詳盡的信息，比如用戶是如何完成任務(wù)的，他們都犯了哪些錯(cuò)誤?！坝白佑脩粲^察”之所以這么稱呼它，是因?yàn)橛^察者需要像用戶的影子一樣，與其形影不離，注意他們的每一步操作。

如果你沒有遇到真正的用戶，可能是因?yàn)槟銢]有權(quán)限，或是在設(shè)計(jì)開放的應(yīng)用程序，你可以使用“人物角色”來幫自己識(shí)別用戶。“人物角色”是真實(shí)用戶的代表，他具有他們的習(xí)慣，目標(biāo)和動(dòng)機(jī)等等。你可以利用在商業(yè)分析報(bào)告中獲得的用戶信息，來創(chuàng)建“人物角色”。如果你對(duì)這種方法不太熟悉，Brand Colbow的漫畫將對(duì)你有幫助。

“任務(wù)分析”有助于確定用戶在工作中需要完成哪些任務(wù)，他們是如何完成的，需要多長(zhǎng)時(shí)間，犯了哪些錯(cuò)誤。有時(shí)用戶正在使用你要去更新的舊程序。你正好可以利用這套舊程序，來看看用戶是如何操作的。這樣你會(huì)很容易了解到他們的任務(wù)和遇到的挑戰(zhàn)。

可以肯定的是：無論你的用戶是誰，在通常情況下你都必須同時(shí)考慮新手用戶和專家用戶。使“新手”盡快上手，“專家”地完成任務(wù)，也許意味著要為他們各自單獨(dú)設(shè)計(jì)界面。但在很多情況下，你要使用各種技巧，來保證不同類型的用戶正常使用同一界面，比如隱藏高級(jí)功能。

這些研究通常由市場(chǎng)分析來完成。但當(dāng)沒人來負(fù)責(zé)這項(xiàng)業(yè)務(wù)時(shí)，你應(yīng)該去完成它。一旦得到了必要的信息，就可以動(dòng)手設(shè)計(jì)了。

三. 設(shè)計(jì)流程
設(shè)計(jì)用戶界面時(shí)，你可以從許多流程中選擇一種來執(zhí)行，或者可能你已經(jīng)有了一種流程。不過我建議你選擇一種更便捷的方法。可能你會(huì)問為什么。這是因?yàn)閷?duì)用戶（和客戶）來說，最終的用戶界面才是他們看到的。本質(zhì)上來說，他們并不關(guān)心你的草圖、高超的后臺(tái)技術(shù)以及功能強(qiáng)大的服務(wù)器，他們只希望看到用戶界面。

那么這種方法是如何執(zhí)行的呢？主要還是通過它的核心法則：迭代。每次迭代都包括你在流程中定義的所有階段。這意味著在第一輪結(jié)束時(shí)，你將有一個(gè)可以測(cè)試的產(chǎn)品：原型。

3.1 草圖
草圖可以有效的拓展思路。我們通過畫出不同的概念圖來尋求解決方案。大多數(shù)草圖會(huì)被丟棄，但這無所謂。正如Bill Buxton在他的著作《手繪用戶體驗(yàn)草圖》中所說：“草圖不但速度快還便于處理，這就是它們?nèi)绱藦?qiáng)大的原因”。

草圖是否與線框圖一樣呢？似乎差別可以被忽視，但我卻不這樣認(rèn)為。線框圖并不是用于獲得粗略的想法，而是去延伸它們?？梢宰x讀IxDA上的精彩討論：線框圖前的草圖。

一旦你畫出了“正確”的草圖，或者至少是你認(rèn)為正確的，你便可以創(chuàng)建更詳細(xì)的線框圖，或者直接去創(chuàng)建交互原型。

Jason Robb畫的草圖。

有關(guān)草圖和線框圖的趣味閱讀：
?   35個(gè)優(yōu)秀線框圖素材
?   畫用戶體驗(yàn)草圖的工具
?   20步幫你提高線框圖質(zhì)量

3.2 原型
流程的下一步就是創(chuàng)建原型，用以模擬真實(shí)程序。原型可以含有一個(gè)或多個(gè)界面（或所有界面），它們只是模擬了一個(gè)真實(shí)程序的行為，讓用戶感覺程序確實(shí)是在運(yùn)行?？善鋵?shí)呢，它們什么都沒有做。如果需要的話，原型也可以完成一些功能（比如復(fù)雜運(yùn)算）。

網(wǎng)頁(yè)原型是臨時(shí)的，其目的歸根結(jié)底還是去驗(yàn)證想法。由于你不用花時(shí)間寫代碼，也就降低了犯錯(cuò)的成本。反正最后你也會(huì)扔掉它嘛。你還可以用專門的原型制作工具，比如Axure，有些人甚至?xí)?a target="_blank" style="margin:0px;padding:0px;vertical-align:baseline;background-color:transparent;color:#333333;text-decoration:none;">PowerPoint來制作原型。

一個(gè)用Axure制作的電子商務(wù)網(wǎng)站的交互原型，e-maujean提供。

有關(guān)原型的其他閱讀資料和工具：
?  5個(gè)有關(guān)網(wǎng)站規(guī)劃和原型制作的在線工具
?  原型制作指南：Rosenfeld Media著
?  16個(gè)原型和線框圖制作工具

3.3 測(cè)試
如果你沒有測(cè)試原型，它們便無法發(fā)揮作用。其實(shí)測(cè)試也算不上什么困難工作。Jakob Nielsen和Steve Krug就支持一種被稱作“簡(jiǎn)易可用性測(cè)試”（“discount usability testing”）的方法，它成本低廉、便捷，并能為你的設(shè)計(jì)決策提出寶貴建議。你也可以將測(cè)試結(jié)果用作另一次迭代的基礎(chǔ)。在重大問題得到解決之前，你至少要這么測(cè)試。我們知道，軟件項(xiàng)目的時(shí)間和預(yù)算都很緊張，因此為了更有效率，測(cè)試得越早越頻繁，也就越好。

Steve Krug的新書《將困難工作變得更簡(jiǎn)單》（“Rocket Surgery Made Easy”）是有關(guān)“簡(jiǎn)易可用性測(cè)試”方面最好的素材之一，找一本讀讀吧。

照片內(nèi)容是有關(guān)美味的可用性測(cè)試，Dave（新西蘭）提供。

其他閱讀資料：
?  為什么你只需要測(cè)試5名用戶
?  解密可用性測(cè)試
?  可用性測(cè)試的神話

四. 設(shè)計(jì)準(zhǔn)則
現(xiàn)在流行著許多設(shè)計(jì)準(zhǔn)則，但這些準(zhǔn)則似乎并沒有達(dá)成共識(shí)。我們將拋開那些嚴(yán)格的定義，帶著大家簡(jiǎn)單地將它們過一遍。

4.1 沒人喜歡被驚嚇
優(yōu)秀用戶界面的關(guān)鍵，可以說就是“一致”與“友好”。用戶界面在程序內(nèi)部，比如導(dǎo)航和配色等，都應(yīng)該保持一致。這就是內(nèi)部一致。除此以外，套裝程序和系統(tǒng)在用戶界面上也應(yīng)互相保持一致。典型的案例就是微軟的Office套裝。這就是外部一致。

一種保證“一致”的有效方法，就是為每個(gè)或每組項(xiàng)目的用戶界面都制定“用戶界面設(shè)計(jì)準(zhǔn)則”。每個(gè)細(xì)節(jié)的設(shè)計(jì)都應(yīng)該遵行它。設(shè)計(jì)準(zhǔn)則不僅能使界面保持一致，作為說明文檔，它還能幫助團(tuán)隊(duì)成員更好地理解你的決策。

一個(gè)簡(jiǎn)單的例子，SprinklePenny在全站都保持著“一致”和“友好”。

一致的用戶界面容易上手，因?yàn)橛脩艨梢愿鶕?jù)以前版本的使用經(jīng)驗(yàn)，識(shí)別程序各部分?！?strong style="margin:0px;padding:0px;border:0px;outline:0px;vertical-align:baseline;background-color:transparent;">友好”某種意義上容易與“一致”相混淆?！坝押谩钡挠脩艚缑鎻挠脩暨^去的經(jīng)歷中提取信息，形成合理的隱喻。比如說文件夾，就是一個(gè)有關(guān)文件組熟知的隱喻，它已取代了以前命令行界面中使用的“目錄”。總之，就是使用用戶自己的語(yǔ)言。

很多企業(yè)領(lǐng)導(dǎo)都有一個(gè)共同的認(rèn)識(shí)：出色的用戶界面要看起來像微軟Office系列，特別是outlook。我不想說這多么沒意義。這里，我只提出不同于他們的建議：要沿用“以用戶為中心”的方法，并解釋為什么為員工、客戶和合作伙伴（也就是他們的用戶）所設(shè)計(jì)的應(yīng)用程序才是重要的。

盡管如此，由于工作流程不同，大多數(shù)企業(yè)的情況也是各異的。例如來自同一行業(yè)的兩個(gè)企業(yè)，很可能就有不同的工作流程。這會(huì)迫使你超越自己，開始創(chuàng)新。這部分的設(shè)計(jì)流程是相當(dāng)吸引人的，當(dāng)然你也要在創(chuàng)新的程度上多加把握。

其他閱讀資料：
? 為用戶界面設(shè)計(jì)和選擇組件
? 為什么說一致很重要

4.2 用戶應(yīng)當(dāng)是的
毫無疑問，用戶應(yīng)該能地使用商務(wù)應(yīng)用程序。這是他們付費(fèi)的原因，也是管理者所期望的。用戶界面應(yīng)該讓用戶工作，以最簡(jiǎn)單、最快捷的方式完成任務(wù)。但事實(shí)上，并非總是如此。開發(fā)人員在思想和行動(dòng)上有一種想法。他們認(rèn)為：用戶界面的后臺(tái)應(yīng)盡可能的復(fù)雜。無論聽起來多么荒謬，但問題已經(jīng)出現(xiàn)了，可能還會(huì)令你很頭痛。這就是為什么說與開發(fā)人員的良好溝通和合作是很必要的。

用戶完成特定任務(wù)時(shí)應(yīng)該是的。正如前文所說，任務(wù)分析可以幫助你確定任務(wù)，以及用戶如何完成。如果任務(wù)很花時(shí)間，就需要將其分解成一些較小的任務(wù)，這樣用戶就不會(huì)感覺費(fèi)時(shí)了。你還可以通過提供鍵盤輸入和快捷鍵來提率。試想一下，當(dāng)用戶必須在鼠標(biāo)和鍵盤之間來回切換是多么耽誤時(shí)間。在某些情況下，你需要為習(xí)慣于命令行界面的用戶設(shè)計(jì)，他們強(qiáng)烈希望支持鍵盤輸入。給你一個(gè)建議：定義快捷鍵時(shí)，應(yīng)與常用程序的快捷鍵相同。例如，Ctrl s永遠(yuǎn)應(yīng)該是“保存”等等。

Google Docs中的表格就為用戶提供了鍵盤快捷鍵和快捷菜單，并借鑒了用戶熟悉的桌面程序，使用戶率完成工作。

通過個(gè)性化定制可以提高用戶使用效率。用戶自己定制界面時(shí)，不但會(huì)更快上手，更重要的是，在使用時(shí)會(huì)更有信心。個(gè)性化可以體現(xiàn)在許多方面：選擇儀表板中的模塊，定義快捷鍵選項(xiàng)和收藏，改變組件順序等等。

注意一下可訪問性。雖然許多人認(rèn)為在Web應(yīng)用程序中“可訪問性”并不重要。但事實(shí)并不這樣。要像對(duì)待公共網(wǎng)站的可訪問性那樣去對(duì)待它。

Web應(yīng)用程序在處理信息時(shí)也必須是的。因此，局部呈現(xiàn)和AJAX請(qǐng)求產(chǎn)生的耗資源的交互行為需要慎重使用。

4.3 救命！
對(duì)于系統(tǒng)處于何種狀態(tài)，界面上應(yīng)提供有效的反饋。如果發(fā)生錯(cuò)誤，應(yīng)當(dāng)通知用戶并設(shè)法恢復(fù)。如果程序正在運(yùn)行中，需要通知用戶進(jìn)展如何。

我們可以更進(jìn)一步說：用戶界面應(yīng)該防止用戶犯錯(cuò)。這一法則被稱作容錯(cuò)，確認(rèn)對(duì)話框、撤消選項(xiàng)、智能輸入（forgiving formats）等就遵循了它。“容錯(cuò)”讓用戶更安全地使用程序，降低了學(xué)習(xí)成本，并提高了整體滿意度。

由于Web應(yīng)用程序很復(fù)雜，你還需要提供一個(gè)綜合幫助系統(tǒng)。這項(xiàng)工作可以由內(nèi)部幫助、支持的數(shù)據(jù)庫(kù)、知識(shí)庫(kù)或是向?qū)Вò曨l，圖像和文字）來完成。

其他閱讀資料：
?  用戶界面設(shè)計(jì)中的容錯(cuò)
?  Web表單確認(rèn)：最佳實(shí)例和教程
?  悉心處理用戶錯(cuò)誤：使用戶重回正軌

4.4 讓用戶滿意
滿意度是一個(gè)比較主觀的詞，它是指用戶使用界面時(shí)的愉悅程度。我們之前介紹的每一條設(shè)計(jì)準(zhǔn)則，都會(huì)影響滿意度。還有一些準(zhǔn)則需要在這提一下。

簡(jiǎn)潔是界面設(shè)計(jì)的一條基本準(zhǔn)則。越是簡(jiǎn)潔的用戶界面，就越容易操作。但對(duì)商務(wù)應(yīng)用程序來說，讓用戶界面簡(jiǎn)潔卻是一個(gè)挑戰(zhàn)，因?yàn)檫@些程序往往有許多功能。問題的關(guān)鍵就是要平衡功能和簡(jiǎn)潔。最有效的解決方法就是“約束”。換句話說，就是找到最簡(jiǎn)單的解決方案。

BuildWith.me有一個(gè)簡(jiǎn)單而有效的用戶界面，它并沒有為此犧牲美觀。

美觀，雖然是有些主觀甚至隨意的評(píng)價(jià)，但也是影響滿意度的重要因素。用戶喜愛漂亮的用戶界面，甚至可以為此犧牲功能。但你也要注意自己并不是在創(chuàng)造藝術(shù)品。有關(guān)美觀的最好的文章之一是美麗無罪（In Defense of Eye Candy）。

由于用戶會(huì)使用一個(gè)商務(wù)應(yīng)用程序很久，無論一款程序多么好用，多么具有一致性和容錯(cuò)性，評(píng)價(jià)它成功與否的決定因素還是：用戶滿意度。

其他閱讀資料：
?  簡(jiǎn)化界面設(shè)計(jì)的7種方法
?  約束
?  美麗無罪
用戶界面設(shè)計(jì)的其他相關(guān)資料：
?  優(yōu)秀用戶界面設(shè)計(jì)的12條準(zhǔn)則
?  成功用戶界面的8個(gè)特征
?  用戶界面設(shè)計(jì)準(zhǔn)則（維基百科）
?  成為界面設(shè)計(jì)大師的10條準(zhǔn)則
?  20個(gè)網(wǎng)站幫你精通用戶界面設(shè)計(jì)

五. Web應(yīng)用程序的重要元素
Web應(yīng)用程序雖然是各異的，但它們大多有很多相同的程式。每個(gè)應(yīng)用程序?qū)ζ涑淌降氖褂梅绞讲⒉幌嗤屛覀兿瓤纯此鼈冎凶畛Ｒ姷娜齻€(gè)吧。

5.1 Web表單
一般來說，表單對(duì)Web應(yīng)用程序非常重要。不過，Luke Wroblewski在他的Web表單設(shè)計(jì)的著作中卻說“沒有人愿意填表單?！边@里說的表單，就包括許多商務(wù)Web應(yīng)用程序的注冊(cè)表單。

盡量減少用戶填寫表單時(shí)的挫折感。提供內(nèi)部驗(yàn)證與良好的反饋系統(tǒng)，并盡可能使用默認(rèn)值。不要忘記新手用戶，通過向?qū)Щ螂[藏高級(jí)（或不常用的）功能，來幫助他們更快地完成任務(wù)。

5.2 主從窗格（Master-Detail Views）
它指的是一種在兩個(gè)獨(dú)立且相關(guān)的窗格看數(shù)據(jù)的程式。一個(gè)窗格顯示項(xiàng)目列表，另一個(gè)顯示所選項(xiàng)的詳細(xì)信息。這種程式在單一頁(yè)面或多頁(yè)切換時(shí)都可實(shí)現(xiàn)。

5.3 儀表板（Dashboards）
很多Web應(yīng)用程序都有儀表板。儀表板將需要操作和決定的重要信息展示在一起。它一般僅在單一頁(yè)面出現(xiàn)，而且是一個(gè)應(yīng)用程序的初始頁(yè)。儀表板非常重要，因?yàn)樗層脩粼诓贿M(jìn)入深層界面的情況下，就可以看到信息并執(zhí)行任務(wù)。

Xero在儀表板中顯示了用戶的最重要的財(cái)務(wù)信息（如銀行帳戶和信用卡信息），以便于用戶迅速看到自己的財(cái)務(wù)狀況。

5.4 大量使用表格
由于Web應(yīng)用程序需要處理大量易歸類的數(shù)據(jù)，表格也就不可避免了。這其實(shí)并不是一壞事。事實(shí)上，表格就是干這個(gè)用的。不要將其與沒表格的頁(yè)面布局相混淆。只有有效的表格才容易閱讀。因此在多數(shù)情況下，你需要選擇一個(gè)有意義的標(biāo)題，控制好表格各列和分頁(yè)的數(shù)量，將行顏色交替顯示，適當(dāng)對(duì)齊表格各列，并提供排序和過濾功能等等。

表格是可以人為調(diào)整的，這就是說你可以為它們添加更多信息，甚至去修改它們的數(shù)據(jù)項(xiàng)。

PulseApp是表現(xiàn)“表格有效處理當(dāng)前復(fù)雜數(shù)據(jù)”的優(yōu)秀案例。

5.5 報(bào)告
大多數(shù)企業(yè)都離不開報(bào)告。由于打印報(bào)告是常用功能，你就要重視報(bào)告的設(shè)計(jì)。打印（或輸出）的報(bào)告通常是線上報(bào)告的簡(jiǎn)化版本，需要優(yōu)化它來適應(yīng)單色打印。

FreshBooks具有打印，PDF輸出和“發(fā)送電子郵件”功能。它還能提供打印預(yù)覽。

六. 不要忘記用戶界面設(shè)計(jì)版式
我們對(duì)界面設(shè)計(jì)版式的討論已經(jīng)很習(xí)慣了，但有時(shí)卻還會(huì)忽視它們！用戶界面設(shè)計(jì)版式對(duì)設(shè)計(jì)用戶界面是很有幫助的。版式往往能解決常見問題，合理的版式可以方便用戶熟悉界面，盡快上手。因此，你要在設(shè)計(jì)流程的初期階段就考慮版式，最好在草圖階段就開始。

這張截圖來自12個(gè)標(biāo)準(zhǔn)屏幕版式 ，這篇文章能幫你重溫最常見的屏幕版式。

其他閱讀資料：
?  Web界面設(shè)計(jì)：富交互的原則和版式
這是一本出色的著作，涵蓋了70多個(gè)網(wǎng)頁(yè)設(shè)計(jì)版式。
?  40多個(gè)有關(guān)用戶界面設(shè)計(jì)版式的素材

七. 案例教學(xué)：網(wǎng)上銀行
接下來我舉一個(gè)真實(shí)的案例，用來簡(jiǎn)單介紹設(shè)計(jì)“小型銀行網(wǎng)銀系統(tǒng)的用戶界面”的流程。我所在團(tuán)隊(duì)參與了改善該系統(tǒng)的工作。這次改版的主要原因，用他們管理人員的話說就是：“用戶經(jīng)常抱怨，其中有許多人已經(jīng)不再使用了?！?/p>

與實(shí)際用戶共處了幾個(gè)小時(shí)后，我們便發(fā)現(xiàn)了主要問題。賬戶與信用卡信息被深埋在了次級(jí)導(dǎo)航中。用戶很難看到消費(fèi)信息，以及賬戶和信用卡狀態(tài)。顯然，該應(yīng)用程序已經(jīng)變成為銀行員工設(shè)計(jì)的了，只有他們才熟悉專業(yè)術(shù)語(yǔ)，很好地解讀程序中的數(shù)字。

在緊迫的時(shí)間內(nèi)，我們遵循了文中所描述的設(shè)計(jì)流程，并取得了一定成功。由于問題明顯，在時(shí)間很短的情況下，我們依舊清楚地了解自己的主要任務(wù)和行動(dòng)方式。我們創(chuàng)建了一個(gè)“儀表板”，提供了所有帳戶及信用卡狀態(tài)的明確信息。新的導(dǎo)航讓用戶更方便地查詢信息。同時(shí)報(bào)告也方便用戶理解了，還加入了一些新的功能。

我們只進(jìn)行了部分調(diào)整，但由于改善了用戶完成關(guān)鍵任務(wù)的流程，也就極大地提高了整體的用戶體驗(yàn)。

八. 最后的思考
商務(wù)Web應(yīng)用程序的界面設(shè)計(jì)是一項(xiàng)艱巨的工作，它充斥著各項(xiàng)妥協(xié)。你必須在客戶和用戶需求之間，商務(wù)需求和用戶之間，新手和專家用戶之間，功能和簡(jiǎn)潔之間妥協(xié)。它需要你充分理解用戶和他們的任務(wù)，以及界面設(shè)計(jì)準(zhǔn)則和版式。盡管困難，但這項(xiàng)工作卻很有趣，你可以從每個(gè)項(xiàng)目中學(xué)到很多新的東西，并將它用到網(wǎng)站設(shè)計(jì)中去