Web交互設計方法概論頁面表達常用方式

1、頁面表達常用方式是整個“web交互設計方法”中的一部分：設計師在設計頁面時，應該在頁面上建立許多視覺層次，引導用戶的視覺焦點。把用戶的注意力吸引到最重要的元素上，然后才把視線引導到其他重要程度次要的信息上。這樣便于用戶快捷迅速地找到自己所需，更好的完成閱讀、瀏覽任務。這里介紹幾種頁面表達的常用方式。一、頁面的瀏覽順序對用戶掃描頁面的時候進行視線跟蹤，這叫做“視覺流”。好的設計能夠讓人們按照順暢的次序沿著它向前流動。人們一般的習慣是從左到右、從上到下。從左至右，從上到下：長期以來，用戶已經習慣了從左至右、從上到下的閱讀習慣，所以頁面設計的時候我們需要讓瀏覽者從一個方向上看文字，用戶的視線從左至右

2、、從上到下的，這樣做會更快更有效。不要讓文字排列成這樣：這樣的排列也可以，仍是從左至右、從上到下：按鈕要放在右邊：左上角優(yōu)先：下圖中，亮度越高、越集中的地方，說明被關注的越多：從上到下，從左到右是默認的視覺流方向。強烈的焦點會首先吸引眼球，然后才是次要信息的。所以，在瀏覽順序上靠前、靠上的位置，即先被看到的位置，是容易被關注和記憶的地方，即“左上角優(yōu)先”。因為日常中人們往往沒有充足的時間瀏覽網(wǎng)頁，或在很快地獲取需要的資訊后即停止瀏覽或轉連到其它網(wǎng)頁，所以左上角常常成為視覺焦點。對齊在內容排版的設計中，把內容右對齊，會形成一種良好的雙重邊界，該邊界沿著這一組對象的中間向下延伸（利用了格式塔原則連

3、續(xù)性原則），這樣帶來的好處是加強了邊界引導讀者的眼光平滑向下延伸，有助于形成良好的視覺流。如下圖：在表單設計中，也是如此。能夠使操作區(qū)域對齊，將大大提升用戶的完成任務的效率。但是對齊是以左對齊還是右對齊也要引起注意。據(jù)研究表明，標簽和輸入框之間的空白區(qū)域加重了用戶的認知負擔（cognitive loading），用戶必須花相當多的時間以便在標簽和輸入框之間移動視線：操作過程中，用戶更關注輸入框本身，而不是標簽。用戶眼睛關注點的轉移速度是非?？斓?，并且即使不從頭閱讀標簽也能明白它的意思。但人們習慣于從左至右的書寫，所以這種右對齊的布局給用戶造成了細微的閱讀障礙：而以下這種擺放形式的好處

4、就是，用戶可以一眼就看到標簽和它對應的輸入框，而且不用擔心用戶閱讀標簽帶來的額外負擔：二、大字更突出文字的主要功能是在視覺傳達中向大眾傳達作者的意圖和各種信息，要達到這一目的必須考慮文字的整體訴求，給人以清晰的視覺印象。因此，設計中的文字應避免繁雜零亂，使人易認，易懂，切忌為了設計而設計，忘記了文字設計的根本目的是為了更好、更有效的傳達作者的意圖，表達設計的主題和構想意念。在頁面文字的處理上，層次關系很重要。我們的眼睛常常被吸引到厚重而又對比強烈的圖形上面，同時大的、加粗的字體表現(xiàn)了它的重要性和主題思想。字體對比中，字體越大越粗，就表示該部分內容越重要。對標題來說，一般都使用一種突出的字體和其

5、他內容區(qū)別開來加粗、加寬、加大字號、強烈的顏色等（白紙黑字，黑色字體與白色頁面對比是最強烈，反之亦然）。其次是普通字體，這些字體是對主題進行進一步的說明。而指示和注釋部分的小字重要性更次之，告訴了我們：你也許想閱讀這些內容，但是沒有看到也沒關系。同時要注意，所有圖片中的文本都應該清晰易讀。三、圖形更吸引人界面需要一定的圖形輔助，這將使產品更具吸引力。圖形能夠傳達各種產品的個性，例如：安全可靠、令人激動、好玩、充滿活力、舒適愉快、冷靜、有力、緊張等，這是情感訴求。Donald Norman（唐諾曼）認為，產品設計中一個非常重要的因素，那就是“愉悅”(Enjoyment)成分，讓人喜歡這

6、個東西讓人覺得高興、有趣。他說：“積極的情感增強了創(chuàng)造性和廣度優(yōu)先的思考，而負面的情感集中在認知上，增強深度優(yōu)先處理并把干擾降到最少?！薄胺e極的情感能讓人們更能容忍一些困難，在尋找解決方案的時候變得更靈活而有創(chuàng)造性?！币欢▽佣壬?，不影響人們在界面上完成任務效率的前提下，適度的裝飾、漂亮的細節(jié)會影響人們使用產品的心情，引導人們再次逗留和探索多點時間，甚至推薦給別人。圖形需要減少認知負擔。其實文字最早來源于圖形，取材于自然形態(tài)，所以相比之下，簡化的、順暢的、示意性準確的圖形能夠減少認知負擔，讓用戶不需要一個個文字閱讀，所以比文字更便于用戶識別、理解和記憶。但圖形設計一定要遵循簡潔規(guī)則：你想要你的用

7、戶注意到你站點上所提供的產品、服務和信息，而不是你站點的精美設計。過多的裝飾將干擾用戶操作。四、動畫會被誤以為是廣告頁面中動態(tài)的FLASH非常吸引人們的注意力了。Adobe公司的這項動畫技術讓互聯(lián)網(wǎng)變得更為強大，從Nike公司非常夸張的首頁動畫到眾多廣告商使用的網(wǎng)頁Banner。但是這項動畫技術現(xiàn)在已被濫用，使得用戶默認看到動畫就誤以為是個廣告，一個只對頁面內容感興趣的人、或者常常瀏覽網(wǎng)頁的人，可能會簡單快速地跳過動畫部分。所以在頁面設計中，應該盡量少地使用FIash動畫，過多的動畫不僅沒有實用性而且還會拖慢用戶的網(wǎng)頁瀏覽器。尤其是一個充滿廣告的頁面，那樣會使你的目標客戶無法閱讀棄你而去。五、

8、內容邏輯：并列關系、從屬關系人們往往喜歡有條理的視覺信息，邏輯清晰、層次分明、嚴謹?shù)膬热莶拍苡兄诒憬菘焖俚亻喿x。這里主要介紹“并列關系”和“從屬關系”。并列關系：并列關系就是把同等重要的信息依次羅列，彼此沒有層級關系。邏輯上相關的部分在視覺表達上也相關。例如，把相近的內容分成一組，放在同一個標題至下，采用類似的方式顯示信息，并把它們全部放在一個定義明確的區(qū)域以內。在表現(xiàn)的形式上，常常用到的方法有：內容縮進、位置或留白、線框或分組（線條、方框、顏色條）。內容縮進：位置或留白：線框或分組：（線條、方框、顏色條等等）：從屬關系：從屬關系表示A信息全部包含在B信息之內，或者表示A信息依附于B信息。就好比如標題和正文的關系，所以A信息是B信息的一個子集。如下圖中，“空間熱點”就包含“日志精選”，她們之間就是從屬關系。而“日志精選”里又包含6條文章名稱，它們之間也是一種從屬關系，這就是我們所說的正文和標題的關系。在這里，B信息里面也可以是好幾條并列關系的內容組構成。如：六、多項并列的信息多項并列的信息，由于視覺的連續(xù)性，混在一起容易產生混淆。我們可以用一些小技巧將其區(qū)分。比如，在并列的信息內容前面加上小圖標，或者區(qū)分排序：七、不同的排序方式VS篩選這里需要先說明兩個名詞的含義?！芭判蚍绞健敝傅氖菍⑽募械母鱾€信息按數(shù)值（如參與人數(shù)、點擊數(shù)等）、