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

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

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

一、頁面的閱覽次第

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

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

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

按鈕要放在右邊：

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

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

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

對齊

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

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

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

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

二、大字更杰出

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

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

三、圖形更招引人

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

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

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

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

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

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

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

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

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

方位或留白：

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

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

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

六、多項并排的信息

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

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

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

排序：

選擇：