頁面表達常用方式 -網上推廣


《頁面表達常用方式》是整個“web交互設計方法”中的一部分:

 

設計師在設計頁面時,應該在頁面上建立許多視覺層次,引導用戶的視覺焦點。把用戶的注意力吸引到最重要的元素上,然后才把視線引導到其他重要程度次要的信息上。這樣便于用戶快捷迅速地找到自己所需,更好的完成閱讀、瀏覽任務。這里介紹幾種頁面表達的常用方式。

一、頁面的瀏覽順序

對用戶掃描頁面的時候進行視線跟蹤,這叫做“視覺流”。好的設計能夠讓人們按照順暢的次序沿著它向前流動。人們一般的習慣是從左到右、從上到下。

從左至右,從上到下:長期以來,用戶已經習慣了從左至右、從上到下的閱讀習慣,所以頁面設計的時候我們需要讓瀏覽者從一個方向上看文字,用戶的視線從左至右、從上到下的,這樣做會更快更有效。不要讓文字排列成這樣:

 

這樣的排列也可以,仍是從左至右、從上到下:

 

按鈕要放在右邊:

 

左上角優先:下圖中,亮度越高、越集中的地方,說明被關注的越多:

 

從上到下,從左到右是默認的視覺流方向。強烈的焦點會首先吸引眼球,然后才是次要信息的。

所以,在瀏覽順序上靠前、靠上的位置,即先被看到的位置,是容易被關注和記憶的地方,即“左上角優先”。因為日常中人們往往沒有充足的時間瀏覽網頁,或在很快地獲取需要的資訊后即停止瀏覽或轉連到其它網頁,所以左上角常常成為視覺焦點。

對齊

在內容排版的設計中,把內容右對齊,會形成一種良好的雙重邊界,該邊界沿著這一組對象的中間向下延伸(利用了格式塔原則——連續性原則),這樣帶來的好處是加強了邊界引導讀者的眼光平滑向下延伸,有助于形成良好的視覺流。如下圖:

 

在表單設計中,也是如此。能夠使操作區域對齊,將大大提升用戶的完成任務的效率。但是對齊是以左對齊還是右對齊也要引起注意。據研究表明,標簽和輸入框之間的空白區域加重了用戶的認知負擔(cognitive loading),用戶必須花相當多的時間以便在標簽和輸入框之間移動視線:

 

操作過程中,用戶更關注輸入框本身,而不是標簽。用戶眼睛關注點的轉移速度是非常快的,并且即使不從頭閱讀標簽也能明白它的意思。但人們習慣于從左至右的書寫,所以這種右對齊的布局給用戶造成了細微的閱讀障礙:

 

而以下這種擺放形式的好處就是,用戶可以一眼就看到標簽和它對應的輸入框,而且不用擔心用戶閱讀標簽帶來的額外負擔:

 

二、大字更突出

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

 

在頁面文字的處理上,層次關系很重要。我們的眼睛常常被吸引到厚重而又對比強烈的圖形上面,同時大的、加粗的字體表現了它的重要性和主題思想。字體對比中,字體越大越粗,就表示該部分內容越重要。對標題來說,一般都使用一種突出的字體和其他內容區別開來——加粗、加寬、加大字號、強烈的顏色等(白紙黑字,黑色字體與白色頁面對比是最強烈,反之亦然)。其次是普通字體,這些字體是對主題進行進一步的說明。而指示和注釋部分的小字重要性更次之,告訴了我們:你也許想閱讀這些內容,但是沒有看到也沒關系。同時要注意,所有圖片中的文本都應該清晰易讀。


arrow
arrow
    創作者介紹
    創作者 pagepe 的頭像
    pagepe

    pagepe的部落格

    pagepe 發表在 痞客邦 留言(0) 人氣()