《頁面表達(dá)原則》是整個(gè)“web交互設(shè)計(jì)方法”中的一部分：

頁面表達(dá)原則概述：
1.更少的信息量更好。
2.不提供多余的功能。
3.結(jié)構(gòu)化更易于理解。
4.信息的表達(dá)應(yīng)該清楚、明確、直接。
5.操作可識(shí)別。
6.操作前，結(jié)果可預(yù)知。
7.操作時(shí)，操作有反饋。
8.操作后，操作可撤銷。
9.讓用戶知道身處何地。
10.避免內(nèi)容看上去象廣告。
11.同一功能在不同頁面上位置相同。
12.措辭統(tǒng)一。

詳細(xì)描述：
1．更少的信息量更好。
用戶不是在閱讀網(wǎng)站，而是在瀏覽網(wǎng)站。他們?yōu)g覽與自己目標(biāo)匹配的文字和圖片，冗長的鏈接、說明和消息只能減慢用戶的速度，并且“隱藏”重要信息。

實(shí)例一.

公告欄有“詳情”，那么這個(gè)頁面中只需要簡略的寫出最重要的一兩句話：
近期個(gè)別不法團(tuán)伙利用自定義代碼竊取網(wǎng)友QQ密碼，轉(zhuǎn)載廣告。為保障廣大網(wǎng)友的利益，出現(xiàn)類似行為的QQ空間將被永久關(guān)閉。了解詳情

實(shí)例二.

左側(cè)的文字過多，這些文字完全是可以精簡的。以左下角的“溫馨提示”為例：

關(guān)于上傳照片的說明，溫馨提示之前已經(jīng)有的專門的說明。這里不必要再說了。此處的溫馨提示可以直接簡化為：

再進(jìn)一步來看，這個(gè)頁面是注冊成為城市達(dá)人的頁面，這段信息本來也不必要出現(xiàn)在這里。也就是說，整段溫馨提示都可以刪掉。

2. 不提供多于的功能，減少出錯(cuò)。

提供盡可能多的功能并不意味著會(huì)有更多的用戶喜歡。提供過多的功能，過大的自由度不僅不會(huì)使產(chǎn)品的功能更強(qiáng)大，反而會(huì)給用戶造成很多錯(cuò)誤的引導(dǎo)。

實(shí)例一.QQ空間商城中的導(dǎo)航

#p#

為了讓用戶預(yù)覽到自己空間中的導(dǎo)航換上皮膚的效果，這里顯示出了用戶個(gè)人空間中的導(dǎo)航。顯然這里并不希望用戶通過它離開商城。但是，這里的“主頁、日志……”卻是可以點(diǎn)擊的。
為了挽留用戶，且避免誤操作，不得不彈出一個(gè)對話框：

實(shí)例二.Photoshop CS2中，一個(gè)工作窗口可以拖動(dòng)的范圍更大了，如圖：

以前的版本只能這樣：

與以前的版本相比，最頂部的80px也可以用作顯示工作窗口了。PhotoshopCS2提供了更大自由度的操作。但是，如果把工作窗口拖上去，菜單欄、輔助工具欄就會(huì)被遮擋住。在遮擋住的狀態(tài)下，要想點(diǎn)擊“顯示變換控件”這個(gè)復(fù)選項(xiàng)，又不得不再把工作窗口拖下來。更糟糕的是，也許有些用戶會(huì)根本就找不到這個(gè)功能了。

雖然遮擋住菜單欄是用戶自己的操作導(dǎo)致的，但是這并不能說明這個(gè)設(shè)計(jì)是沒問題的。用戶在遮擋住菜單欄的時(shí)候并不總能意識(shí)到操作將產(chǎn)生的全部后果。

在photoshop CS3中，這個(gè)功能被取消了。

實(shí)例三：

當(dāng)用戶在Qzone商城中將播放器放在上圖這個(gè)位置時(shí)，很可能沒有意識(shí)到“裝扮空間”、“自定義”、“信息中心”三個(gè)鏈接將會(huì)被擋住，無法點(diǎn)擊了。
允許用戶在頁面上任意位置擺放裝扮物，這樣強(qiáng)大的功能并沒有建立在“不出錯(cuò)”的基礎(chǔ)上。

不提供多余的功能的觀點(diǎn)來自于alan cooper的“以目標(biāo)為導(dǎo)向的設(shè)計(jì)理念”。

“以目標(biāo)為導(dǎo)向的設(shè)計(jì)理念”首先區(qū)分了用戶的“目標(biāo)”與“任務(wù)”這兩個(gè)概念。
目標(biāo)是用戶需要最終做到的；任務(wù)是為了完成目標(biāo)而不得不完成的操作。任務(wù)不是用戶的需求。如果可以完成更少的任務(wù)就達(dá)到目標(biāo)，是更好的。一個(gè)產(chǎn)品是在幫助用戶實(shí)現(xiàn)目標(biāo)。用戶使用產(chǎn)品的過程是借助產(chǎn)品完成自己目標(biāo)的過程。因此，在幫助用戶實(shí)現(xiàn)目標(biāo)的前提下，產(chǎn)品要求用戶進(jìn)行的操作越少越好。

3. 結(jié)構(gòu)化更易于理解

結(jié)構(gòu)化是指：將信息歸納、整理成若干條，以條目的形式展示的做法。類似下圖：

將較大信息量的文字信息逐條展示可以提高讀者的閱讀速度，提高閱讀效率。

顯然下面這樣一段說明文字是很難閱讀的：

請您務(wù)必填寫個(gè)人真實(shí)資料，如果因?yàn)槟膫€(gè)人資料填寫錯(cuò)誤所導(dǎo)致無法成功辦理中信QQ信用卡及無法獲贈(zèng)QQ會(huì)員，騰訊及中信將不承擔(dān)任何責(zé)任。QQ用戶點(diǎn)擊“下載申請表格”，（下載申請表后，不要修改文檔，直接點(diǎn)擊打印，否則無法進(jìn)件。請務(wù)必完整打印出申請表與申請合約，并寄回信用卡中心。）打印后并填寫好申請表，準(zhǔn)備好身份證復(fù)印件（必須），以及其他備選財(cái)產(chǎn)證明文件：其他信用卡的復(fù)印件、車產(chǎn)證明復(fù)印件、房產(chǎn)證明復(fù)印件、收入證明復(fù)印件、交易額等證明復(fù)印件，裝到信封內(nèi)，即可郵寄到“深圳郵政028-222信箱”，或者快遞到“廣東省深圳市羅湖區(qū)筍崗路12號中民時(shí)代廣場B座29層 進(jìn)件室”，郵編518029。中信銀行信用卡中心在收到申請資料后，即開始審核信用卡的申請，申請的注意條款、申請進(jìn)度查詢，詳見網(wǎng)址http://bank.ecitic.com/cards/，或者咨詢中信銀行信用卡客服中心40088-95558。選用此方式辦卡的用戶可獲得價(jià)值120元QQ會(huì)員禮包（12個(gè)月會(huì)員資格）。QQ用戶在申請成功并獲發(fā)信用卡后10個(gè)工作日內(nèi)，將開通該用戶的QQ會(huì)員資格6個(gè)月，成功激活后，再延長該用戶6個(gè)月的QQ會(huì)員資格，注：QQ會(huì)員服務(wù)由中信銀行購買并贈(zèng)送給QQ信用卡客戶。之前通過手機(jī)、小靈通、寬帶、電信付費(fèi)開通會(huì)員的用戶，此次暫無法享受贈(zèng)送。申請用戶必須是中信銀行的新用戶，才可以享受贈(zèng)送會(huì)員服務(wù)的優(yōu)惠。如果您已經(jīng)擁有中信銀行的信用卡，則再申請中信銀行QQ信用卡不享受贈(zèng)送的QQ會(huì)員服務(wù)。

將這些文字分成若干條，閱讀起來就容易多了：

A、申請用戶必須是中信銀行的新用戶，才可以享受贈(zèng)送會(huì)員服務(wù)的優(yōu)惠。如果您已經(jīng)擁有中信銀行的信用卡，則再申請中信銀行QQ信用卡不享受贈(zèng)送的QQ會(huì)員服務(wù)。
B、如果因?yàn)槟膫€(gè)人資料填寫不準(zhǔn)確而導(dǎo)致無法成功辦理中信QQ信用卡及無法獲贈(zèng)QQ會(huì)員，騰訊及中信將不承擔(dān)任何責(zé)任。
C、下載申請表后，請勿修改文檔，直接點(diǎn)擊打印，否則無法進(jìn)件。
D、請務(wù)必完整打印出申請表與申請合約，并寄回信用卡中心。
E、郵寄材料：打印后并填寫好的申請表、身份證復(fù)印件（必須）、其他信用卡的復(fù)印件、車產(chǎn)證明復(fù)印件、房產(chǎn)證明復(fù)印件、收入證明復(fù)印件、交易額等證明復(fù)印件。
F、郵寄地址：深圳郵政028-222信箱?；蛘呖爝f到：廣東省深圳市羅湖區(qū)筍崗路12號中民時(shí)代廣場B座29層 進(jìn)件室 郵編518029。
G、中信銀行信用卡中心在收到申請資料后，即開始審核信用卡的申請，申請的注意條款、申請進(jìn)度查詢，詳見網(wǎng)址http://bank.ecitic.com/cards/，或者咨詢中信銀行信用卡客服中心40088-95558。
H、選用此方式辦卡的用戶可獲得價(jià)值120元QQ會(huì)員禮包（12個(gè)月會(huì)員資格）。QQ用戶在申請成功并獲發(fā)信用卡后10個(gè)工作日內(nèi)，將開通該用戶的QQ會(huì)員資格6個(gè)月，成功激活后，再延長該用戶6個(gè)月的QQ會(huì)員資格，注：QQ會(huì)員服務(wù)由中信銀行購買并贈(zèng)送給QQ信用卡客戶。之前通過手機(jī)、小靈通、寬帶、電信付費(fèi)開通會(huì)員的用戶，此次暫無法享受贈(zèng)送。

4. 信息的表達(dá)應(yīng)該清楚、明確、直接。

清楚、明確、直接是信息表達(dá)的一個(gè)基礎(chǔ)要求。但是這也是做不容易做到的。
實(shí)例一：

問題1.副標(biāo)題表意不明確

這句說明仍舊沒能說明“這里是什么功能”。如果能通過這句話說明：“在這里添加文字內(nèi)容，顯露您的心情”，說明的效果會(huì)更好。至于“讓好友都知道！”這幾個(gè)字幾乎是沒有用的，沒有傳達(dá)任何信息量。

問題2. “脫掉”按鈕不易找到

“脫掉”按鈕在框的右下角，很多時(shí)候會(huì)出現(xiàn)在預(yù)覽區(qū)以外，看不到，并且文字超小，無法閱讀。

實(shí)例二：

“您還沒有登錄”所以“請先登錄”。這是很清楚的邏輯關(guān)系。

“原因可能是長時(shí)間未操作而失效，謝謝合作！” 是什么事情需要解釋？其實(shí)這是在說另外一個(gè)事情：“您很奇怪剛才登錄過，現(xiàn)在為什么又要登錄嗎？我告訴您：原因可能是長時(shí)間未操作而失效…”

這里的表述過于追求文字上的簡練了，把兩個(gè)問題混為一談，沒有表述清楚。

5. 操作可識(shí)別

鏈接應(yīng)該象鏈接，按鈕應(yīng)該象按鈕。藍(lán)色、帶下劃線的文字是目前鏈接文字通用的表現(xiàn)方式。按鈕應(yīng)當(dāng)是有立體感的，看上去就感覺像是可以點(diǎn)擊的。
操作可識(shí)別原則是為了保證用戶觸發(fā)操作的有可能性。

QQ空間中有個(gè)不好的例子：

有輸入框，但卻看不到驗(yàn)證碼圖片。 “沒看到圖片我怎么知道要輸入什么？”“不知道要輸入什么，我就不去不輸入啦?！辈僮髑氨磉_(dá)的不夠清楚，會(huì)影響觸發(fā)操作的可能性。
（上面那行溫馨提示算是個(gè)補(bǔ)救措施，但并不能解決問題。如果都靠提示就可以了，那么就不需要設(shè)計(jì)師了，有作家就夠了。）

#p#

6. 操作前，結(jié)果可預(yù)知。

未進(jìn)行一個(gè)操作之前，應(yīng)該讓用戶大致能猜測到操作后會(huì)是什么樣的結(jié)果?；蛘哒f，操作的設(shè)計(jì)應(yīng)該和用戶的期望相同。那些只寫成“返回”“上一步”“下一步”的鏈接，如果可能，最好還是寫清楚些為好。比如寫成：“下一步 進(jìn)入購物車”、“返回首頁”…

實(shí)例一.

如果將右上角的鏈接直接寫做：更多品牌專區(qū)，用戶則不需要縱觀整塊內(nèi)容，直接就能看懂這個(gè)鏈接指向哪個(gè)頁面。更快、更容易的看懂這個(gè)鏈接，會(huì)使得更多用戶去點(diǎn)擊，類似下面這樣：

實(shí)例二.

兩個(gè)按鈕都叫“復(fù)活Ta”，但其實(shí)操作后的效果并不一樣，前面一個(gè)按鈕是打開另外一個(gè)頁面，而后面一個(gè)按鈕是真的實(shí)現(xiàn)“復(fù)活”操作。用相同的按鈕表示不同的操作，使得用戶更不容易猜到操作的后果。

還有些時(shí)候，讓結(jié)果變的不可預(yù)知是設(shè)計(jì)者故意的：

點(diǎn)擊標(biāo)題，不是進(jìn)入這篇文章，而是進(jìn)入“圖領(lǐng)風(fēng)騷”欄目，如下圖：

這篇文章屬于這個(gè)“圖領(lǐng)風(fēng)騷”欄目，并且在第一屏看不到這篇文章。

7. 操作時(shí)，操作有反饋。

進(jìn)行了一個(gè)操作后，需要頁面上有反應(yīng)。

應(yīng)該引導(dǎo)用戶將掛件放在頁面比較靠上的位置，所以item的默認(rèn)位置在第一屏，為了確保用戶點(diǎn)擊了一個(gè)item后能看到這個(gè)item出現(xiàn)在了頁面上，QQ空間商城的頁面很短。

QQ秀商城左側(cè)固定，右側(cè)可滾動(dòng)，確保了用戶能看到點(diǎn)擊一個(gè)item后的變化—左側(cè)預(yù)覽圖上出現(xiàn)了變化。

確保操作有反饋還應(yīng)當(dāng)避免鏈接指向當(dāng)前頁。
指向當(dāng)前頁的鏈接，點(diǎn)擊后，只是頁面刷新，并沒有明確的告知用戶剛才的點(diǎn)擊操作產(chǎn)生了什么樣的后果。（除非鏈接就叫做“刷新當(dāng)前頁”。）

不好的例子：個(gè)性域名

之前的問題：當(dāng)輸入的個(gè)性域名不合要求時(shí)點(diǎn)擊“查詢”，頁面沒有反應(yīng)。

現(xiàn)在的設(shè)計(jì)：

當(dāng)焦點(diǎn)進(jìn)入第二個(gè)輸入框后，變紅。

#p#

當(dāng)時(shí)現(xiàn)在仍舊存在問題：

此時(shí)點(diǎn)擊“查詢”頁面還是沒有反應(yīng)。

8. 操作后，操作可撤銷。

執(zhí)行一個(gè)操作后，應(yīng)當(dāng)允許撤銷，允許用戶反悔。

實(shí)例一：

不想進(jìn)去了，怎么辦？

實(shí)例二：

要不想發(fā)表回復(fù)了怎么辦？

9. 讓用戶知道身處何地—頁面標(biāo)題、導(dǎo)航

讓用戶知道自己當(dāng)前身處何地是個(gè)很基本的訴求。清楚的表明當(dāng)前頁面是什么，在哪里，可以很大程度上降低用戶的恐懼感。
目前能實(shí)現(xiàn)這個(gè)要求的方法主要有兩個(gè)：頁面標(biāo)題和導(dǎo)航

頁面標(biāo)題是整個(gè)頁面的說明，可以最直接的表示出當(dāng)前頁面是什么。

其中的“World News”是頁面標(biāo)題。

其中的“Audio, TV & Home Theater”是頁面標(biāo)題。

頁面標(biāo)題寫在一個(gè)頁面的最上面，并且通常是一個(gè)頁面中最大字號的文字。

在web界面中，使用 “層級式導(dǎo)航”（路點(diǎn)）可以很清楚的說明當(dāng)前頁面在整個(gè)網(wǎng)站中的所處的位置。

其中的“Home / Products / Acrobat family /”清楚的表明了當(dāng)前頁面“Adobe Acrobat Connect Professional”在整個(gè)網(wǎng)站中的位置。（“Adobe Acrobat Connect Professional” 是這個(gè)頁面的標(biāo)題。）

10. 避免內(nèi)容看上去象廣告

用戶會(huì)在閱讀網(wǎng)頁的時(shí)候，會(huì)“有選擇的”閱讀，既，并非單傳按照從左到右，從上到下的順序閱讀；也并不是單純的按照視覺規(guī)律閱讀，色彩顯眼的、能運(yùn)動(dòng)的圖形很容易引起視覺上的注意，單如果看上去象廣告，那么，用戶會(huì)跳過那一部分內(nèi)容閱讀的。網(wǎng)頁的閱讀順序不僅遵循常規(guī)的閱讀規(guī)律，也受網(wǎng)頁閱讀習(xí)慣的影響。

所以，網(wǎng)頁上的正文內(nèi)容不要表現(xiàn)的象廣告一樣。并非更大的展示形象的圖片就能更突出內(nèi)容；內(nèi)容的中元素能動(dòng)起來，也不意味著更能吸引用戶；類似“馬上注冊！”“免費(fèi)獲取”之類的說法也不單純意味著能吸引人。這些表達(dá)方式都有可能讓用戶誤會(huì)。

11. 同一功能在不同頁面上位置相同。（一致性）
同一功能在不同的頁面上出現(xiàn)在相同的位置上可以減少用戶尋找的時(shí)間。

實(shí)例一.

返回yahoo首頁的鏈接：yahoo！ 始終出現(xiàn)在頁面的左上角。

實(shí)例二.

Google中個(gè)人帳戶的相關(guān)鏈接總顯示在頁面的右上角。

實(shí)例三：

Amazon中左側(cè)欄始終是用來展示分類索引的。

12. 措辭統(tǒng)一（一致性）

●表述中避免使用“用戶”，而使用“網(wǎng)友”、“朋友”、“訪客”等。
●第二人稱用“您”，而不使用“你”。
●“登錄”而不是“登陸”。登陸一詞也確實(shí)會(huì)用到，比如：登陸qq.com，發(fā)現(xiàn)更多精彩…這種情況下，盡量避開“登陸”一詞，用“訪問”、“瀏覽”之類的詞代替。
●騰訊的產(chǎn)品中，“好友”一次有特殊的含義，指“QQ好友”。所以，在通常的表述中應(yīng)避免使用“好友”。

避免混亂措辭的一個(gè)有效方法：為產(chǎn)品建立措辭庫
為各個(gè)產(chǎn)品建立措辭庫。例如：

措辭的不一致除了工作的不規(guī)范，缺少統(tǒng)一的標(biāo)準(zhǔn)，另外一種情況是由于產(chǎn)品在定義概念的過程中本身沒有定義清楚，在具體到頁面上時(shí)反應(yīng)成為措辭的不一致，例如：

“心情秀預(yù)覽”暗示出，“心情秀”是指外框+文字內(nèi)容。
“換心情秀”功能只是換外框。這意味著“心情秀”是指外框。
如果按照第一個(gè)定義來理解，“心情秀是指外框+文字內(nèi)容”，那么點(diǎn)擊“下一個(gè)”后，其中的文字內(nèi)容是不是也會(huì)變化？

缺少對文字內(nèi)容、外框的單獨(dú)定義，使得“心情秀”概念被濫用，造成概念上的混淆。概念上的混淆給操作帶來困擾。

這個(gè)例子中，同一個(gè)詞有著不同的含義。“措辭統(tǒng)一”原則要求同一個(gè)事物用同一個(gè)詞來描述，這同時(shí)也是在要求：不同的含義使用不同的詞。