Web交互規劃辦法：頁面表達常用辦法

《頁面表達常用辦法》是整個“web交互規劃辦法”中的一部分：

規劃師在規劃頁面時，應該在頁面上建立許多視覺層次，引導用戶的視覺焦點。把用戶的留意力招引到最重要的元素上，然后才把視野引導到其他重要程度次要的信息上。這樣便于用戶方便迅速地找到自己所需，更好的完結閱覽、閱覽任務。這兒介紹幾種頁面表達的常用辦法。

一、頁面的閱覽次第

對用戶掃描頁面的時分進行視野盯梢，這叫做“視覺流”。好的規劃可以讓人們按照順利的次第沿著它向前活動。人們一般的習氣是從左到右、從上到下。

從左至右，從上到下：長期以來，用戶已經習氣了從左至右、從上到下的閱覽習氣，所以頁面規劃的時分咱們需求讓閱覽者從一個方向上看文字，用戶的視野從左至右、從上到下的，這樣做會更快更有用。不要讓文字擺放成這樣：

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

按鈕要放在右邊：

左上角優先：下圖中，亮度越高、越會集的當地，闡明被重視的越多：

從上到下，從左到右是默許的視覺流方向。激烈的焦點會首先招引眼球，然后才是次要信息的。

所以，在閱覽次第上靠前、靠上的方位，即先被看到的方位，是簡單被重視和回憶的當地，即“左上角優先”。由于日常中人們往往沒有充足的時刻閱覽網頁，或在很快地獲取需求的資訊后即中止閱覽或轉連到其它網頁，所以左上角常常成為視覺焦點。

對齊

在內容排版的規劃中，把內容右對齊，會構成一種良好的雙重邊界，該邊界沿著這一組方針的中心向下延伸（利用了格式塔原則——連續性原則），這樣帶來的優點是加強了邊界引導讀者的眼光滑潤向下延伸，有助于構成良好的視覺流。如下圖：

在表單規劃中，也是如此?？梢允共僮鲄^域對齊，將大大提高用戶的完結任務的功率?？墒菍�齊是以左對齊仍是右對齊也要引起留意。據研討標明，標簽和輸入框之間的空白區域加劇了用戶的認知擔負（cognitive loading），用戶有必要花相當多的時刻以便在標簽和輸入框之間移動視野：

操作過程中，用戶更重視輸入框本身，而不是標簽。用戶眼睛重視點的轉移速度是非?？斓?，并且即便不從頭閱覽標簽也能了解它的意思。但人們習氣于從左至右的書寫，所以這種右對齊的布局給用戶造成了纖細的閱覽障礙：

而以下這種擺放形式的優點便是，用戶可以一眼就看到標簽和它對應的輸入框，而且不用擔心用戶閱覽標簽帶來的額外擔負：

二、大字更杰出

文字的主要功能是在視覺傳達中向大眾傳達作者的意圖和各種信息，要到達這一意圖有必要考慮文字的整體訴求，給人以明晰的視覺印象。因而，規劃中的文字應避免冗雜零亂，使人易認，易懂，切忌為了規劃而規劃，忘記了文字規劃的根本意圖是為了更好、更有用的傳達作者的意圖，表達規劃的主題和設想意念。

在頁面文字的處理上，層次聯系很重要。咱們的眼睛常常被招引到厚重而又比照激烈的圖形上面，同時大的、加粗的字體表現了它的重要性和主題思想。字體比照中，字體越大越粗，就表明該部分內容越重要。對標題來說，一般都運用一種杰出的字體和其他內容差異開來——加粗、加寬、加大字號、激烈的色彩等（白紙黑字，黑色字體與白色頁面比照是最激烈，反之亦然）。其次是一般字體，這些字體是對主題進行進一步的闡明。而指示和注釋部分的小字重要性更次之，告知了咱們：你也許想閱覽這些內容，可是沒有看到也不要緊。同時要留意，所有圖片中的文本都應該明晰易讀。

三、圖形更招引人

界面需求必定的圖形輔佐，這將使產品更具招引力。圖形可以傳達各種產品的特性，例如：安全可靠、令人激動、好玩、充溢活力、舒適愉快、鎮定、有力、嚴重等，這是情感訴求。Donald Norman（（唐?諾曼）以為，產品規劃中一個非常重要的要素，那便是“愉悅”(Enjoyment)成分，讓人喜愛這個東西——讓人覺得高興、有趣。他說：“積極的情感增強了創造性和廣度優先的思考，而負面的情感會集在認知上，增強深度優先處理并把攪擾降到最少?！薄胺e極的情感能讓人們更能容忍一些困難，在尋覓解決計劃的時分變得更靈敏而有創造性?！北囟▽佣壬?，不影響人們在界面上完結任務功率的前提下，適度的裝飾、美麗的細節會影響人們運用產品的心境，引導人們再次逗留和探索多點時刻，乃至推薦給別人。

圖形需求削減認知擔負。其實文字最早來源于圖形，取材于天然形態，所以相比之下，簡化的、順利的、示意性精確的圖形可以削減認知擔負，讓用戶不需求一個個文字閱覽，所以比文字更便于用戶識別、了解和回憶。但圖形規劃必定要遵循簡練規矩：你想要你的用戶留意到你站點上所供給的產品、服務和信息，而不是你站點的精美規劃。過多的裝飾將攪擾用戶操作。

四、動畫會被誤以為是廣告

頁面中動態的FLASH非常招引人們的留意力了。Adobe公司的這項動畫技能讓互聯網變得更為強壯，從Nike公司非?？鋸埖氖醉搫赢嫷胶芏鄰V告商運用的網頁Banner?？墒沁@項動畫技能現在已被濫用，使得用戶默許看到動畫就誤以為是個廣告，一個只對頁面內容感興趣的人、或許常常閱覽網頁的人，或許會簡單快速地越過動畫部分。所以在頁面規劃中，應該盡量少地運用FIash動畫，過多的動畫不只沒有實用性而且還會拖慢用戶的網頁閱覽器。尤其是一個充溢廣告的頁面，那樣會使你的方針客戶無法閱覽棄你而去。

五、內容邏輯：并排聯系、從屬聯系

人們往往喜愛有條理的視覺信息，邏輯明晰、層次分明、嚴謹的內容才能有助于便捷快速地閱覽。這兒主要介紹“并排聯系”和“從屬聯系”。

并排聯系：并排聯系便是把平等重要的信息依次羅列，互相沒有層級聯系。邏輯上相關的部分在視覺表達上也相關。例如，把相近的內容分成一組，放在同一個標題至下，選用相似的辦法顯現信息，并把它們全部放在一個定義明確的區域以內。

在表現的形式上，常常用到的辦法有：內容縮進、方位或留白、線框或分組（線條、方框、色彩條）。

內容縮進：

方位或留白：

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

從屬聯系：從屬聯系表明A信息全部包括在B信息之內，或許表明A信息依附于B信息。就好比如標題和正文的聯系，所以A信息是B信息的一個子集。如下圖中，“空間熱門”就包括“日志精選”，她們之間便是從屬聯系。而“日志精選”里又包括6條文章稱號，它們之間也是一種從屬聯系，這便是咱們所說的正文和標題的聯系。

在這兒，B信息里邊也可所以好幾條并排聯系的內容組構成。如：

六、多項并排的信息

多項并排的信息，由于視覺的連續性，混在一同簡單產生混淆。咱們可以用一些小技巧將其區別。比如，在并排的信息內容前面加上小圖標，或許區別排序：

七、不同的排序辦法VS選擇

這兒需求先闡明兩個名詞的含義?！芭判蜣k法”——指的是將文件中的各個信息按數值（如參與人數、點擊數等）、或許某種特性（如熱度）的遞升或遞降次第重新擺放成為一個新的記錄序列。而“選擇”是指一個以多個信息中按預訂方針就某種特定性質進行精選的操作過程。它們都有“進一步”的聯系，可是排序不會有數量的變化；而“選擇”由于是進一步針對特定條件精確選擇所剩，有或許導致數量的削減。如：

排序：

選擇：