界面設(shè)計中頁面元素的布局課件

1、界面設(shè)計中的頁面元素的布局博客設(shè)計組：非非界面設(shè)計中的頁面元素的布局博客設(shè)計組：非非界面設(shè)計中頁面元素的布局視覺層次：視覺流：分組和對齊：重要程度區(qū)分接下來做什么？誰和誰在一起界面設(shè)計中頁面元素的布局視覺層次：視覺流：分組和對齊：重要程視覺層次:重要程度區(qū)分解釋：重要程度區(qū)分，用戶能從頁面的布局推導(dǎo)出它的信息結(jié)構(gòu)。重要的內(nèi)容應(yīng)該最突出,不重要的次之。 標(biāo)題、二級內(nèi)容、注釋等看起來就是他們本身，不為用戶帶來任何疑問。視覺層次:重要程度區(qū)分解釋：重要程度區(qū)分，用戶能從頁面的布局案例：沒有視覺層次案例：沒有視覺層次界面設(shè)計中頁面元素的布局課件案例：帶空白的文本案例：帶空白的文本案例：排版和對齊方式案

2、例：排版和對齊方式界面設(shè)計中頁面元素的布局課件關(guān)于視覺結(jié)構(gòu)層次的小結(jié)左上角優(yōu)先：空白：字體對比：前景色和背景色的對比：位置、對齊、縮進(jìn)：圖形輪廓：其他（標(biāo)題、列表、導(dǎo)航條、動作按鈕等）我們的語言習(xí)慣是，從左到右，從上到下。條理清晰，組的形式來呈現(xiàn)內(nèi)容。大小粗細(xì)顏色等的對比，表達(dá)信息的重要程度。顏色對比可以進(jìn)一步的突出內(nèi)容。從屬關(guān)系更清晰，結(jié)構(gòu)明白。整體感增強。關(guān)于視覺結(jié)構(gòu)層次的小結(jié)左上角優(yōu)先：空白：字體對比：前景色和背界面設(shè)計中頁面元素的布局課件界面設(shè)計中頁面元素的布局課件設(shè)計中我們遇到的問題視線首先落在什么地方？那個設(shè)計元素在第一時間吸引了用戶的注意力？用戶第一時間注意到的東西與它們的（或你

3、的）目標(biāo)是背盜而馳？它對于戰(zhàn)略目標(biāo)上來講是很重要的東西嗎？設(shè)計中我們遇到的問題視線首先落在什么地方？那個設(shè)計元素在第一好的視覺引導(dǎo)是一條流暢的路徑，設(shè)計能順利地引導(dǎo)用戶在頁面上移動能“干擾”用戶的視線，為用戶提供有效選擇的、某種可能的“引導(dǎo)”，支持用戶試圖去完成它們的目標(biāo)和任務(wù)。我們需要。好的視覺引導(dǎo)是一條流暢的路徑，設(shè)計能順利地引導(dǎo)用戶在頁面上移視覺流：接下來我該看什么解釋：在讀者掃描頁面的時候跟蹤讀者的視線。建立流：視覺流的牽制因素：. 閱讀習(xí)慣。 . 用戶的頁面目的。在頁面上通過焦點引導(dǎo)用戶。焦點：眼睛不能地址的地方。視覺流：接下來我該看什么解釋：在讀者掃描頁面的時候跟蹤讀者的案例：焦點

4、和視覺流案例：焦點和視覺流案例：焦點和視覺流案例：焦點和視覺流如何建立焦點對比：顏色、高度、字體的粗細(xì)等。如何建立焦點對比：顏色、高度、字體的粗細(xì)等。如何建立焦點帶有指示性的圖片：箭頭、清晰的輪廓、表情和動作、匯聚的線條等。如何建立焦點帶有指示性的圖片：箭頭、清晰的輪廓、表情和動作、視覺層次結(jié)構(gòu)和視覺流視覺層次結(jié)構(gòu)和視覺流關(guān)于視覺流的小結(jié)從上到下，從左到右是默認(rèn)的視覺流方向。強烈的焦點會首先吸引眼球，然后才是那些次之的。對頁面內(nèi)容的理解會隨著用戶選擇看哪一部分而改變。關(guān)于視覺流的小結(jié)從上到下，從左到右是默認(rèn)的視覺流方向。強烈的分組和對齊：誰和誰一起解釋：對于形成清晰的視覺層次結(jié)構(gòu)是很必要的，分

5、組和對齊意味著頁面元素之間互相關(guān)聯(lián)。作用：通過分組和對齊把用戶的視線從一組元素引到另外一組，從而來完成引導(dǎo)，幫助形成視覺流。牽制因素：.視覺習(xí)慣，放在一起的東西，我們就會覺得有關(guān)聯(lián)。.空白，足夠的空間距離，讓元素在邏輯上不相關(guān)。如何建立：輪廓和線條、間隔（空白）、對比等。分組和對齊：誰和誰一起解釋：對于形成清晰的視覺層次結(jié)構(gòu)是很必關(guān)于分組和對齊的小結(jié)分組和對齊描述的是布局屬性；相鄰性:小貼士：層級變多之后，分組的難度會加大，單純依靠分住是不能滿足需求，分組和對齊同時使用便于表達(dá)復(fù)雜的層級關(guān)系。 相似性: 連續(xù)性: 封閉性:擺在一起的東西，用戶就會把他們聯(lián)系起來。兩個元素屬性向同，比如顏色大小形

6、狀方向等。有規(guī)律的重復(fù)，對齊或者小的元素組。閉合的區(qū)域，大塊的留白。關(guān)于分組和對齊的小結(jié)分組和對齊描述的是布局屬性；相鄰性:小貼界面設(shè)計中頁面元素的布局課件界面設(shè)計中頁面元素的布局課件整合起來：1.視覺層次機構(gòu)整合起來：1.視覺層次機構(gòu)整合起來：2.視覺流對頁面內(nèi)容的理解會隨著用戶選擇看哪一部分而改變。強烈的焦點會首先吸引眼球，然后才是那些次之的。整合起來：2.視覺流對頁面內(nèi)容的理解會隨著用戶選擇看哪一部分整合起來：3.分組合對齊整合起來：3.分組合對齊總結(jié)視覺層次結(jié)構(gòu)、視覺流、焦點、分組合對齊，這些都是頁面布局的基本手段。設(shè)計師可以通過這些有效的視覺手段，來吸引或分散用戶的注意力，形成視覺引導(dǎo)，支持用戶試圖去完成它