《頁面表達常用方式》是整個「web互動設計方法」中的一部分：tcp3lian素材
tcp3lian素材
設計師在設計頁面時，應該在頁面上建立許多視覺層次，引導使用者的視覺焦點。把使用者的注意力吸引到最重要的元素上，然後才把視線引導到其他重要程度次要的資訊上。這樣便於使用者快捷迅速地找到自己所需，更好的完成閱讀、瀏覽任務。
這裡介紹幾種頁面表達的常用方式。tcp3lian素材
一、頁面的瀏覽順序tcp3lian素材
對使用者掃瞄頁面的時候進行視線跟蹤，這叫做「視覺流」。好的設計能夠讓人們按照順暢的次序沿著它向前流動。人們一般的習慣是從左到右、從上到下。tcp3lian素材
從左至右，從上到下：長期以來，使用者已經習慣了從左至右、從上到下的閱讀習慣，所以頁面設計的時候我們需要讓瀏覽者從乙個方向上看文字，使用者的視線從左至右、從上到下的，這樣做會更快更有效。不要讓文字排列成這樣：
tcp3lian素材
tcp3lian素材
這樣的排列也可以，仍是從左至右、從上到下：tcp3lian素材
tcp3lian素材
按鈕要放在右邊：tcp3lian素材
tcp3lian素材
左上角優先：下圖中，亮度越高、越集中的地方，說明被關注的越多：tcp3lian素材
tcp3lian素材
從上到下，從左到右是預設的視覺流方向。強烈的焦點會首先吸引眼球，然後才是次要資訊的。tcp3lian素材
所以，在瀏覽順序上靠前、靠上的位置，即先被看到的位置，是容易被關注和記憶的地方，即「左上角優先」。因為日常中人們往往沒有充足的時間瀏覽網頁，或在很快地獲取需要的資訊後即停止瀏覽或轉連到其它網頁，所以左上角常常成為視覺焦點。tcp3lian素材
對齊tcp3lian素材
在內容排版的設計中，把內容右對齊，會形成一種良好的雙重邊界，該邊界沿著這一組物件的中間向下延伸（利用了格式塔原則——連續性原則），這樣帶來的好處是加強了邊界引導讀者的眼光平滑向下延伸，有助於形成良好的視覺流。如下圖：tcp3lian素材
在表單設計中，也是如此。能夠使操作區域對齊，將大大提公升使用者的完成任務的效率。但是對齊是以左對齊還是右對齊也要引起注意。
據研究表明，標籤和輸入框之間的空白區域加重了使用者的認知負擔（cognitive loading），使用者必須花相當多的時間以便在標籤和輸入框之間移動視線：tcp3lian素材
tcp3lian素材
操作過程中，使用者更關注輸入框本身，而不是標籤。使用者眼睛關注點的轉移速度是非常快的，並且即使不從頭閱讀標籤也能明白它的意思。但人們習慣於從左至右的書寫，所以這種右對齊的布局給使用者造成了細微的閱讀障礙：
tcp3lian素材
tcp3lian素材
而以下這種擺放形式的好處就是，使用者可以一眼就看到標籤和它對應的輸入框，而且不用擔心使用者閱讀標籤帶來的額外負擔：tcp3lian素材
tcp3lian素材
二、大字更突出tcp3lian素材
文字的主要功能是在視覺傳達中向大眾傳達作者的意圖和各種資訊，要達到這一目的必須考慮文字的整體訴求，給人以清晰的視覺印象。因此，設計中的文字應避免繁雜零亂，使人易認，易懂，切忌為了設計而設計，忘記了文字設計的根本目的是為了更好、更有效的傳達作者的意圖，表達設計的主題和構想意念。tcp3lian素材
在頁面文字的處理上，層次關係很重要。我們的眼睛常常被吸引到厚重而又對比強烈的圖形上面，同時大的、加粗的字型表現了它的重要性和主題思想。字型對比中，字型越大越粗，就表示該部分內容越重要。
對標題來說，一般都使用一種突出的字型和其他內容區別開來——加粗、加寬、加大字型大小、強烈的顏色等（白紙黑字，黑色字型與白色頁面對比是最強烈，反之亦然）。其次是普通字型，這些字型是對主題進行進一步的說明。而指示和注釋部分的小字重要性更次之，三連素材，告訴了我們：
你也許想閱讀這些內容，但是沒有看到也沒關係。同時要注意，所有**中的文字都應該清晰易讀。tcp3lian素材
三、圖形更吸引人tcp3lian素材
介面需要一定的圖形輔助，這將使產品更具吸引力。圖形能夠傳達各種產品的個性，例如：安全可靠、令人激動、好玩、充滿活力、舒適愉快、冷靜、有力、緊張等，這是情感訴求。
donald norman（（唐諾曼）認為，產品設計中乙個非常重要的因素，那就是「愉悅」（enjoyment）成分，讓人喜歡這個東西——讓人覺得高興、有趣。他說：「積極的情感增強了創造性和廣度優先的思考，而負面的情感集中在認知上，增強深度優先處理並把干擾降到最少。
」「積極的情感能讓人們更能容忍一些困難，在尋找解決方案的時候變得更靈活而有創造性。」一定層度上，不影響人們在介面上完成任務效率的前提下，適度的裝飾、漂亮的細節會影響人們使用產品的心情，引導人們再次逗留和探索多點時間，甚至推薦給別人。tcp3lian素材
圖形需要減少認知負擔。其實文字最早**於圖形，取材於自然形態，所以相比之下，簡化的、順暢的、示意性準確的圖形能夠減少認知負擔，讓使用者不需要乙個個文字閱讀，所以比文字更便於使用者識別、理解和記憶。但圖形設計一定要遵循簡潔規則：
你想要你的使用者注意到你站點上所提供的產品、服務和資訊，而不是你站點的精美設計。過多的裝飾將干擾使用者操作。tcp3lian素材
四、動畫會被誤以為是廣告tcp3lian素材
頁面中動態的flash非常吸引人們的注意力了。adobe公司的這項動畫技術讓網際網路變得更為強大，從nike公司非常誇張的首頁動畫到眾多廣告商使用的網頁banner。但是這項動畫技術現在已被濫用，使得使用者預設看到動畫就誤以為是個廣告，乙個只對頁面內容感興趣的人、或者常常瀏覽網頁的人，可能會簡單快速地跳過動畫部分。
所以在頁面設計中，應該盡量少地使用fiash動畫，過多的動畫不僅沒有實用性而且還會拖慢使用者的網頁瀏覽器。尤其是乙個充滿廣告的頁面，那樣會使你的目標客戶無法閱讀棄你而去tcp3lian素材
五、內容邏輯：並列關係、從屬關係tcp3lian素材
人們往往喜歡有條理的視覺資訊，邏輯清晰、層次分明、嚴謹的內容才能有助於便捷快速地閱讀。這裡主要介紹「並列關係」和「從屬關係」。tcp3lian素材
並列關係：並列關係就是把同等重要的資訊依次羅列，彼此沒有層級關係。邏輯上相關的部分在視覺表達上也相關。
例如，把相近的內容分成一組，放在同乙個標題至下，採用類似的方式顯示資訊，並把它們全部放在乙個定義明確的區域以內。tcp3lian素材
在表現的形式上，常常用到的方法有：內容縮排、位置或留白、線框或分組（線條、方框、顏色條）。tcp3lian素材
內容縮排：tcp3lian素材
tcp3lian素材
位置或留白：tcp3lian素材
線框或分組：（線條、方框、顏色條等等）：tcp3lian素材
tcp3lian素材
從屬關係：從屬關係表示a資訊全部包含在b資訊之內，或者表示a資訊依附於b資訊。就好比如標題和正文的關係，所以a資訊是b資訊的乙個子集。
如下圖中，「空間熱點」就包含「日誌精選」，她們之間就是從屬關係。而「日誌精選」裡又包含6條文章名稱，它們之間也是一種從屬關係，這就是我們所說的正文和標題的關係。tcp3lian素材
tcp3lian素材
在這裡，b資訊裡面也可以是好幾條並列關係的內容組構成。如：tcp3lian素材
tcp3lian素材
六、多項並列的資訊tcp3lian素材
多項並列的資訊，由於視覺的連續性，混在一起容易產生混淆。我們可以用一些小技巧將其區分。比如，在並列的資訊內容前面加上小圖示，或者區分排序：tcp3lian素材
七、不同的排序方式vs篩選tcp3lian素材
這裡需要先說明兩個名詞的含義。「排序方式」——指的是將檔案中的各個資訊按數值（如參與人數、點選數等）、或者某種特性（如熱度）的遞公升或遞降次序重新排列成為乙個新的記錄序列。而「篩選」是指乙個以多個資訊中按預定目標就某種特定性質進行精選的操作過程。
它們都有「進一步」的關係，但是排序不會有數量的變化；而「篩選」因為是進一步針對特定條件精確挑選所剩，有可能導致數量的減少。如：tcp3lian素材
排序：tcp3lian素材
tcp3lian素材
篩選：tcp3lian素材
tcp3lian素材
修辭方式與表達方式
修辭方式與表達方式，表現手法與描寫手法，說明說明方法與方式，論證方法與論證方式，關鍵語句作用 一 修辭方式與表達方式修辭方式與表達方式在初中語文中是經常提及的兩個名詞術語 它們之間區別很大。修辭方式是指修飾文字詞句，運用各種方法，使語言表達得準確 鮮明而生動有力，情感真摯 強烈而又引人入勝。初中課文...
常用求婚方式
9 錄影表心意 製作一盤向她求婚的錄影帶很可以打動她的心，特別是如果你能夠同她一起 這盤錄影。她一定會高興得跳起來，立刻就要和你去度蜜月 10 愛情警察 當然，做到這一點有些難度，它需要真正的 警察叔叔 進行配合。不過，如果在她開車時，被警察叫到一邊，然後收到一張 求婚罰單 實在是很有新意的感受，不...
表達方式 賞析句子
1 分析句式特點和修辭的作用 常見的句式特點有 長短句結合 句子對仗工整 雙重否定句 排比句 反問句等。修辭常見的有八種 即比喻 比擬 誇張 排比 對偶 反覆 設問 反問 它們在不同的語境中所起到的作用各不相同。如比喻，是根據事物的相似點，用具體的 淺顯的 熟知的事物來說明抽象的 深奧的 生疏的事物...