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

設(shè)計(jì)師在設(shè)計(jì)頁(yè)面時(shí)，應(yīng)該在頁(yè)面上建立許多視覺層次，引導(dǎo)用戶的視覺焦點(diǎn)。把用戶的注意力吸引到最重要的元素上，然后才把視線引導(dǎo)到其他重要程度次要的信息上。這樣便于用戶快捷迅速地找到自己所需，更好的完成閱讀、瀏覽任務(wù)。這里介紹幾種頁(yè)面表達(dá)的常用方式。

一、頁(yè)面的瀏覽順序

對(duì)用戶掃描頁(yè)面的時(shí)候進(jìn)行視線跟蹤，這叫做“視覺流”。好的設(shè)計(jì)能夠讓人們按照順暢的次序沿著它向前流動(dòng)。人們一般的習(xí)慣是從左到右、從上到下。

從左至右，從上到下：長(zhǎng)期以來(lái)，用戶已經(jīng)習(xí)慣了從左至右、從上到下的閱讀習(xí)慣，所以頁(yè)面設(shè)計(jì)的時(shí)候我們需要讓瀏覽者從一個(gè)方向上看文字，用戶的視線從左至右、從上到下的，這樣做會(huì)更快更有效。不要讓文字排列成這樣：

這樣的排列也可以，仍是從左至右、從上到下：

按鈕要放在右邊：

左上角優(yōu)先：下圖中，亮度越高、越集中的地方，說明被關(guān)注的越多：

從上到下，從左到右是默認(rèn)的視覺流方向。強(qiáng)烈的焦點(diǎn)會(huì)首先吸引眼球，然后才是次要信息的。

所以，在瀏覽順序上靠前、靠上的位置，即先被看到的位置，是容易被關(guān)注和記憶的地方，即“左上角優(yōu)先”。因?yàn)槿粘Ｖ腥藗兺鶝]有充足的時(shí)間瀏覽網(wǎng)頁(yè)，或在很快地獲取需要的資訊后即停止瀏覽或轉(zhuǎn)連到其它網(wǎng)頁(yè)，所以左上角常常成為視覺焦點(diǎn)。

對(duì)齊

在內(nèi)容排版的設(shè)計(jì)中，把內(nèi)容右對(duì)齊，會(huì)形成一種良好的雙重邊界，該邊界沿著這一組對(duì)象的中間向下延伸（利用了格式塔原則——連續(xù)性原則），這樣帶來(lái)的好處是加強(qiáng)了邊界引導(dǎo)讀者的眼光平滑向下延伸，有助于形成良好的視覺流。如下圖：

在表單設(shè)計(jì)中，也是如此。能夠使操作區(qū)域?qū)R，將大大提升用戶的完成任務(wù)的效率。但是對(duì)齊是以左對(duì)齊還是右對(duì)齊也要引起注意。據(jù)研究表明，標(biāo)簽和輸入框之間的空白區(qū)域加重了用戶的認(rèn)知負(fù)擔(dān)（cognitive loading），用戶必須花相當(dāng)多的時(shí)間以便在標(biāo)簽和輸入框之間移動(dòng)視線：

操作過程中，用戶更關(guān)注輸入框本身，而不是標(biāo)簽。用戶眼睛關(guān)注點(diǎn)的轉(zhuǎn)移速度是非?？斓模⑶壹词共粡念^閱讀標(biāo)簽也能明白它的意思。但人們習(xí)慣于從左至右的書寫，所以這種右對(duì)齊的布局給用戶造成了細(xì)微的閱讀障礙：

而以下這種擺放形式的好處就是，用戶可以一眼就看到標(biāo)簽和它對(duì)應(yīng)的輸入框，而且不用擔(dān)心用戶閱讀標(biāo)簽帶來(lái)的額外負(fù)擔(dān)：

二、大字更突出

文字的主要功能是在視覺傳達(dá)中向大眾傳達(dá)作者的意圖和各種信息，要達(dá)到這一目的必須考慮文字的整體訴求，給人以清晰的視覺印象。因此，設(shè)計(jì)中的文字應(yīng)避免繁雜零亂，使人易認(rèn)，易懂，切忌為了設(shè)計(jì)而設(shè)計(jì)，忘記了文字設(shè)計(jì)的根本目的是為了更好、更有效的傳達(dá)作者的意圖，表達(dá)設(shè)計(jì)的主題和構(gòu)想意念。

在頁(yè)面文字的處理上，層次關(guān)系很重要。我們的眼睛常常被吸引到厚重而又對(duì)比強(qiáng)烈的圖形上面，同時(shí)大的、加粗的字體表現(xiàn)了它的重要性和主題思想。字體對(duì)比中，字體越大越粗，就表示該部分內(nèi)容越重要。對(duì)標(biāo)題來(lái)說，一般都使用一種突出的字體和其他內(nèi)容區(qū)別開來(lái)——加粗、加寬、加大字號(hào)、強(qiáng)烈的顏色等（白紙黑字，黑色字體與白色頁(yè)面對(duì)比是最強(qiáng)烈，反之亦然）。其次是普通字體，這些字體是對(duì)主題進(jìn)行進(jìn)一步的說明。而指示和注釋部分的小字重要性更次之，告訴了我們：你也許想閱讀這些內(nèi)容，但是沒有看到也沒關(guān)系。同時(shí)要注意，所有圖片中的文本都應(yīng)該清晰易讀。

#p#

三、圖形更吸引人

界面需要一定的圖形輔助，這將使產(chǎn)品更具吸引力。圖形能夠傳達(dá)各種產(chǎn)品的個(gè)性，例如：安全可靠、令人激動(dòng)、好玩、充滿活力、舒適愉快、冷靜、有力、緊張等，這是情感訴求。Donald Norman（（唐?諾曼）認(rèn)為，產(chǎn)品設(shè)計(jì)中一個(gè)非常重要的因素，那就是“愉悅”(Enjoyment)成分，讓人喜歡這個(gè)東西——讓人覺得高興、有趣。他說：“積極的情感增強(qiáng)了創(chuàng)造性和廣度優(yōu)先的思考，而負(fù)面的情感集中在認(rèn)知上，增強(qiáng)深度優(yōu)先處理并把干擾降到最少?！薄胺e極的情感能讓人們更能容忍一些困難，在尋找解決方案的時(shí)候變得更靈活而有創(chuàng)造性。”一定層度上，不影響人們?cè)诮缑嫔贤瓿扇蝿?wù)效率的前提下，適度的裝飾、漂亮的細(xì)節(jié)會(huì)影響人們使用產(chǎn)品的心情，引導(dǎo)人們?cè)俅味毫艉吞剿鞫帱c(diǎn)時(shí)間，甚至推薦給別人。

圖形需要減少認(rèn)知負(fù)擔(dān)。其實(shí)文字最早來(lái)源于圖形，取材于自然形態(tài)，所以相比之下，簡(jiǎn)化的、順暢的、示意性準(zhǔn)確的圖形能夠減少認(rèn)知負(fù)擔(dān)，讓用戶不需要一個(gè)個(gè)文字閱讀，所以比文字更便于用戶識(shí)別、理解和記憶。但圖形設(shè)計(jì)一定要遵循簡(jiǎn)潔規(guī)則：你想要你的用戶注意到你站點(diǎn)上所提供的產(chǎn)品、服務(wù)和信息，而不是你站點(diǎn)的精美設(shè)計(jì)。過多的裝飾將干擾用戶操作。

四、動(dòng)畫會(huì)被誤以為是廣告

頁(yè)面中動(dòng)態(tài)的FLASH非常吸引人們的注意力了。Adobe公司的這項(xiàng)動(dòng)畫技術(shù)讓互聯(lián)網(wǎng)變得更為強(qiáng)大，從Nike公司非?？鋸埖氖醉?yè)動(dòng)畫到眾多廣告商使用的網(wǎng)頁(yè)Banner。但是這項(xiàng)動(dòng)畫技術(shù)現(xiàn)在已被濫用，使得用戶默認(rèn)看到動(dòng)畫就誤以為是個(gè)廣告，一個(gè)只對(duì)頁(yè)面內(nèi)容感興趣的人、或者常常瀏覽網(wǎng)頁(yè)的人，可能會(huì)簡(jiǎn)單快速地跳過動(dòng)畫部分。所以在頁(yè)面設(shè)計(jì)中，應(yīng)該盡量少地使用FIash動(dòng)畫，過多的動(dòng)畫不僅沒有實(shí)用性而且還會(huì)拖慢用戶的網(wǎng)頁(yè)瀏覽器。尤其是一個(gè)充滿廣告的頁(yè)面，那樣會(huì)使你的目標(biāo)客戶無(wú)法閱讀棄你而去。

五、內(nèi)容邏輯：并列關(guān)系、從屬關(guān)系

人們往往喜歡有條理的視覺信息，邏輯清晰、層次分明、嚴(yán)謹(jǐn)?shù)膬?nèi)容才能有助于便捷快速地閱讀。這里主要介紹“并列關(guān)系”和“從屬關(guān)系”。

并列關(guān)系：并列關(guān)系就是把同等重要的信息依次羅列，彼此沒有層級(jí)關(guān)系。邏輯上相關(guān)的部分在視覺表達(dá)上也相關(guān)。例如，把相近的內(nèi)容分成一組，放在同一個(gè)標(biāo)題至下，采用類似的方式顯示信息，并把它們?nèi)糠旁谝粋€(gè)定義明確的區(qū)域以內(nèi)。

在表現(xiàn)的形式上，常常用到的方法有：內(nèi)容縮進(jìn)、位置或留白、線框或分組（線條、方框、顏色條）。

內(nèi)容縮進(jìn)：

位置或留白：

線框或分組：（線條、方框、顏色條等等）：

從屬關(guān)系：從屬關(guān)系表示A信息全部包含在B信息之內(nèi)，或者表示A信息依附于B信息。就好比如標(biāo)題和正文的關(guān)系，所以A信息是B信息的一個(gè)子集。如下圖中，“空間熱點(diǎn)”就包含“日志精選”，她們之間就是從屬關(guān)系。而“日志精選”里又包含6條文章名稱，它們之間也是一種從屬關(guān)系，這就是我們所說的正文和標(biāo)題的關(guān)系。

在這里，B信息里面也可以是好幾條并列關(guān)系的內(nèi)容組構(gòu)成。如：

六、多項(xiàng)并列的信息

多項(xiàng)并列的信息，由于視覺的連續(xù)性，混在一起容易產(chǎn)生混淆。我們可以用一些小技巧將其區(qū)分。比如，在并列的信息內(nèi)容前面加上小圖標(biāo)，或者區(qū)分排序：

七、不同的排序方式VS篩選

這里需要先說明兩個(gè)名詞的含義?！芭判蚍绞健薄傅氖菍⑽募械母鱾€(gè)信息按數(shù)值（如參與人數(shù)、點(diǎn)擊數(shù)等）、或者某種特性（如熱度）的遞升或遞降次序重新排列成為一個(gè)新的記錄序列。而“篩選”是指一個(gè)以多個(gè)信息中按預(yù)定目標(biāo)就某種特定性質(zhì)進(jìn)行精選的操作過程。它們都有“進(jìn)一步”的關(guān)系，但是排序不會(huì)有數(shù)量的變化；而“篩選”因?yàn)槭沁M(jìn)一步針對(duì)特定條件精確挑選所剩，有可能導(dǎo)致數(shù)量的減少。如：

排序：

篩選：