Web交互規(guī)劃辦法：頁面表達常用辦法

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

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

一、頁面的閱覽次第

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

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

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

按鈕要放在右邊：

左上角優(yōu)先：下圖中，亮度越高、越會集的當?shù)�，闡明被重視的越多：

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

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

對齊

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

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

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

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

二、大字更杰出

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

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

三、圖形更招引人

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

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

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

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

五、內(nèi)容邏輯：并排聯(lián)系、從屬聯(lián)系

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

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

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

內(nèi)容縮進：

方位或留白：

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

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

在這兒，B信息里邊也可所以好幾條并排聯(lián)系的內(nèi)容組構(gòu)成。如：

六、多項并排的信息

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

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

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

排序：

選擇：