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

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

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

一、頁(yè)面的閱覽次第

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

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

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

按鈕要放在右邊：

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

從上到下，從左到右是默許的視覺(jué)流方向。激烈的焦點(diǎn)會(huì)首先招引眼球，然后才是次要信息的。

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

對(duì)齊

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

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

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

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

二、大字更杰出

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

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

三、圖形更招引人

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

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

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

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

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

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

并排聯(lián)系：并排聯(lián)系便是把平等重要的信息依次羅列，互相沒(méi)有層級(jí)聯(lián)系。邏輯上相關(guān)的部分在視覺(jué)表達(dá)上也相關(guān)。例如，把相近的內(nèi)容分成一組，放在同一個(gè)標(biāo)題至下，選用相似的辦法顯現(xiàn)信息，并把它們?nèi)�部放在一個(gè)定義明確的區(qū)域以?xún)?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信息的一個(gè)子集。如下圖中，“空間熱門(mén)”就包括“日志精選”，她們之間便是從屬聯(lián)系。而“日志精選”里又包括6條文章稱(chēng)號(hào)，它們之間也是一種從屬聯(lián)系，這便是咱們所說(shuō)的正文和標(biāo)題的聯(lián)系。

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

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

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

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

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

排序：

選擇：