網(wǎng)頁設(shè)計(jì)【視覺篇】-2課件

標(biāo)題:字體:微軟雅黑粗體字號:32-36pt顏色:主題藍(lán)色副標(biāo)題:字體:微軟雅黑字號:24pt顏色:主題灰色網(wǎng)頁設(shè)計(jì)：從界面布局到視覺表現(xiàn)基礎(chǔ)篇界面交互篇視覺表現(xiàn)篇綜合案例篇講師：余蘭亭標(biāo)題:網(wǎng)頁設(shè)計(jì)：從界面布局到視覺表現(xiàn)基礎(chǔ)篇界面交互篇視覺表現(xiàn)視覺表現(xiàn)篇視聽元素網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)網(wǎng)頁視覺風(fēng)格視覺表現(xiàn)篇視聽元素網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)網(wǎng)頁視覺風(fēng)格7.網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)7.1視覺的有效性7.2視覺的層次性7.3

視覺的一致性7.4視覺的創(chuàng)意性7.5案例——早教機(jī)構(gòu)網(wǎng)站界面設(shè)計(jì)7.網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)7.1視覺的有效性7.2視覺的7網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)

網(wǎng)頁的視覺設(shè)計(jì)屬于用戶體驗(yàn)中的表現(xiàn)層，它是聯(lián)合內(nèi)容、功能和美學(xué)匯集到一起來產(chǎn)生一個(gè)最終設(shè)計(jì)，這將滿足其他四個(gè)層面的所有目標(biāo)。本章介紹了網(wǎng)頁視覺設(shè)計(jì)的四個(gè)要點(diǎn)，即有效性、層次性、一致性、創(chuàng)意性。通過要點(diǎn)的學(xué)習(xí)指導(dǎo)大家在界面布局大的框架下如何進(jìn)一步確定界面版式與各個(gè)視覺元素的設(shè)計(jì)。7網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)網(wǎng)頁的視覺設(shè)計(jì)屬于用戶體驗(yàn)

初學(xué)網(wǎng)頁界面者最容易走進(jìn)的誤區(qū)就是認(rèn)為版面越滿越好，但實(shí)際上有時(shí)候“多即是少”，視覺元素越多，就越容易分散用戶的注意力。網(wǎng)頁中視覺的有效性是視覺設(shè)計(jì)要點(diǎn)的最基礎(chǔ)的特性。由于不同的視覺語言往往會打破自然的視覺流程，因此在整個(gè)版式上必須力求要點(diǎn)突出，主要的解決方法有簡化版式、適當(dāng)留白等。7.1視覺的有效性初學(xué)網(wǎng)頁界面者最容易走進(jìn)的誤區(qū)就是認(rèn)為版面越滿越好，但7.1.1簡化版式

簡化版式是盡量以簡單明確的語言和畫面告訴大家本站點(diǎn)的主題。簡化并非為了版式的簡潔而刪除信息，而是應(yīng)當(dāng)遵循網(wǎng)站的信息結(jié)構(gòu)及框架的基礎(chǔ)上，尋找界面版式最佳的表現(xiàn)方法。

一方面，在每個(gè)界面內(nèi)仔細(xì)斟酌信息間的結(jié)構(gòu)聯(lián)系，對于過于繁冗或者毫無聯(lián)系的內(nèi)容，進(jìn)行必要的轉(zhuǎn)移或刪除。尤其是在電子商務(wù)網(wǎng)站中，把控好信息層級結(jié)構(gòu)、矩形結(jié)構(gòu)、自然結(jié)構(gòu)的版式表現(xiàn)，不僅有利于用戶理解網(wǎng)站的主題內(nèi)容，還能為網(wǎng)站本身帶來更多的商業(yè)價(jià)值。7.1.1簡化版式簡化版式是盡量以簡單明確的如窩窩團(tuán)網(wǎng)站的原版設(shè)計(jì)重點(diǎn)內(nèi)容就不夠突出，其界面在1366*768px的屏幕分辨率下文字、圖片信息都未能顯示完整。如窩窩團(tuán)網(wǎng)站的原版設(shè)計(jì)重點(diǎn)內(nèi)容就不夠突出，其界面在1366*

把控界面內(nèi)圖形圖片與文字的比例。圖與文的搭配可以降低閱讀的疲勞感，但要注意各自所占的比例。同一個(gè)信息內(nèi)容可以設(shè)計(jì)成炫酷的圖片還可以是簡單的文字，首先需要參考信息的優(yōu)先級來決定其視覺表現(xiàn)形式，其次要考慮界面中圖文比例，若圖過多面積過大可能會造成視覺繁雜，若字過多會顯得界面過于空洞。如同為招聘網(wǎng)站，智聯(lián)招聘網(wǎng)站的圖多，顯得雜亂，用戶需要在圖片中找到自己需要的信息。而58同城招聘頁面大量的文字配以少量的文字，反而顯得大氣而不失精致，有利于用戶理解網(wǎng)站的信息邏輯，建立良好的印象。把控界面內(nèi)圖形圖片與文字的比例。圖與文的搭配可7.1.2適當(dāng)留白

留白空間不一定要是白色的。這個(gè)術(shù)語指的是任何與背景相同的空間。所以它可以是白色、黑色，甚至包含微妙的紋理。不管你習(xí)慣稱之為負(fù)空間還是留白，它都非常聰明地引導(dǎo)你關(guān)注網(wǎng)頁的重要內(nèi)容，同時(shí)它也是極簡風(fēng)格的典型特征。越來越多的網(wǎng)站開始使用這種設(shè)計(jì)，設(shè)計(jì)師們逐漸意識到這種設(shè)計(jì)是多么有用。7.1.2適當(dāng)留白留白空間不一定要是白色的。

在很多藝術(shù)家設(shè)計(jì)師的個(gè)人網(wǎng)站中也會大膽地運(yùn)用留白，如藝術(shù)指導(dǎo)junlu的個(gè)人網(wǎng)站，進(jìn)入首頁就是簡單的幾個(gè)作品的布局，每個(gè)作品間的間距大自然分割出每個(gè)作品的空間，沒有其他的修飾元素進(jìn)行干擾，卻能有力的告訴用戶，別想其他的，請靜靜欣賞我的作品吧。在很多藝術(shù)家設(shè)計(jì)師的個(gè)人網(wǎng)站中也會大膽地運(yùn)用留白，如藝術(shù)7.2視覺的層次性7.2.1視覺流程

視覺流程是各種視覺信息作用于人們的視覺器官，引起視線的移動和變化，而視線會隨著注意物的方向、形態(tài)、色彩、聲音等的心理暗示的影響遵循著一定的方向和秩序有規(guī)律的進(jìn)行。人們的視覺流程總會受生活習(xí)慣、地域文化等因素影響形成一定的視覺流程。如國內(nèi)人們文字是從左向右、從上至下的書寫，因此人眼對信息的觀察也是從左到右、從上至下。在網(wǎng)頁界面設(shè)計(jì)中最常見的視覺流程有“F”模式、“Z”模式、縱向模式三種。7.2視覺的層次性7.2.1視覺流程視覺流F模式Z模式縱向模式F模式是指用戶通常會沿著左側(cè)垂直瀏覽而下，先去尋找文章中每個(gè)段落開頭的興趣點(diǎn)，這時(shí)，如果用戶發(fā)現(xiàn)了他喜歡的，他就會從這里開始水平線方向的閱讀。最終結(jié)果就是用戶的視線呈F型或者E型進(jìn)行瀏覽。這種模式在一些以文字為主的網(wǎng)站較常出現(xiàn)，例如新聞資訊類的網(wǎng)站、博客等。F模式Z模式縱向模式F模式是指用戶通常會沿著左F模式Z模式縱向模式Z模式是基于用戶從左到右自上而下的閱讀習(xí)慣，指用戶首先關(guān)注的頁頭水平方向上的內(nèi)容，依照從頭部左到頭部右，再沿著對角線瀏覽下一部分的中部左到中部右，循環(huán)往復(fù)的瀏覽模式。這種較常出現(xiàn)于網(wǎng)頁內(nèi)容不是以大量文字為信息內(nèi)容的頁面。如印象筆記網(wǎng)站首頁布局上Z模式，第一屏為注冊登錄框，將用戶的視線牢牢地鎖定在該領(lǐng)域。接下來對該產(chǎn)品的賣點(diǎn)展示，第一行左文字右圖，第二行右圖左文字，第三行左文字右圖如此重復(fù)，圖片與文字順序的更換一方面遵循了用戶是視覺流程，也是有效引導(dǎo)用戶向下瀏覽，在頁面底部又為注冊登錄框，給用戶唯一的操作選擇，以達(dá)到該頁面的功能訴求。Z模式縱向模式F模式Z模式縱向模式Z模式是基于用戶從左到右自F模式Z模式縱向模式

縱向模式是用戶習(xí)慣自上而下滾動來瀏覽更多信息。當(dāng)用戶還處于確定目標(biāo)信息時(shí)，縱向視覺流能幫助用戶在不需要回掃的情況下獲取更多信息。除了大圖，用戶會選擇數(shù)欄的其中一列縱向?yàn)g覽直到找到某一目標(biāo)信息后，橫向?yàn)g覽細(xì)節(jié)。F模式Z模式縱向模式縱向模式是用戶習(xí)慣自上而下7.2.2視覺層級關(guān)系

視覺表現(xiàn)手法主要有位置、大小、距離、內(nèi)容形式、色彩五種元素組成，實(shí)際設(shè)計(jì)中為了讓效果拉開主次，可能會同時(shí)使用多種方法以達(dá)到更好的效果。7.2.2視覺層級關(guān)系視覺表現(xiàn)手法主要有位置、大小、位置大小內(nèi)容形式距離顏色

位置是在設(shè)計(jì)開始就會考慮的元素，網(wǎng)頁界面設(shè)計(jì)上若遵循人們“從左向右，從上向下”閱讀的視覺規(guī)律，能幫助用戶更容易、更快捷地看到或理解眼前的事物。界面中優(yōu)先級依次為左上，左下，而右下最差。因此很多網(wǎng)站都將自己的logo、商品名、主題等重要信息放在頂部靠左或頂部中間最佳視域內(nèi)。以設(shè)計(jì)癖網(wǎng)站為例，在原稿中，焦點(diǎn)訊息左圖是第一優(yōu)先級的信息，筆者將焦點(diǎn)新聞與右側(cè)的其他列表新聞位置對調(diào)后對比原稿與修改稿：雖然焦點(diǎn)新聞依然是大圖的形式，占的面積也夠大，但由于位置不在最佳視域，會被其新聞分散一部分視線。位置大小內(nèi)容形式距離顏色位置是在設(shè)計(jì)開始就會考慮的元素位置大小內(nèi)容形式距離顏色

在確定了內(nèi)容板塊的位置后，設(shè)計(jì)師還需要考慮給這模塊多大的空間，大小會很直觀反映信息的重要等級。重要的元素相對于一般元素要大一些，甚至?xí)壤д{(diào)也不為過。以TheBostonGlobe網(wǎng)站為例，原稿有左右兩張圖片，左側(cè)的新聞圖片面積約為右側(cè)廣告圖的2倍，輕而易舉地立刻吸引了用戶的注意。筆者將左圖面積縮小為右圖均等后，對比發(fā)現(xiàn)：即便左圖位置仍在用戶會第一時(shí)間關(guān)注的左側(cè)，但用戶看到左圖的時(shí)候也會不自覺地看到右圖，于是網(wǎng)站的新聞重點(diǎn)會被廣告所打擾，造成不良的心理感受。位置大小內(nèi)容形式距離顏色在確定了內(nèi)容板塊的位置位置大小內(nèi)容形式距離顏色

距離可以分為二維的距離效果與三維的距離效果。二維的距離是保證信息可被理解的前提下，視覺元素尺寸不變，細(xì)節(jié)被放大，人眼會感受到元素更清晰，離眼睛更近而容易先去關(guān)注。還可以通過視覺手段能體現(xiàn)出三維距離的效果。具體方法有模糊元素、調(diào)整透明度、增添投影等。位置大小內(nèi)容形式距離顏色距離可以分為二維的距離效位置大小內(nèi)容形式距離顏色

確定了內(nèi)容板塊的位置、大小和距離關(guān)系后，我們會繼續(xù)考慮內(nèi)容的形式包括視頻、圖片、文字等，這里主要講我們經(jīng)常使用的圖形和文字；相比起文字，圖片在抓住用戶眼球這一點(diǎn)上是功不可沒的，同時(shí)還能使用戶在短時(shí)間內(nèi)形成形象記憶，從視覺層級上，人眼一般會先關(guān)注圖后關(guān)注文字。但僅僅這點(diǎn)還不夠，通過圖片抓取用戶眼球后引導(dǎo)視線到下一個(gè)關(guān)注點(diǎn)，是設(shè)計(jì)上更多會考慮的點(diǎn)，概括有以下表現(xiàn)手法：1）方向性引導(dǎo)圖片中的形象有些具有明顯的方向性，如人眼注視的方向、手勢所指的方向、物體運(yùn)動方向、光照方向等，這些特征會引導(dǎo)人眼視線朝著設(shè)定的方向運(yùn)動，從而達(dá)到視覺層級有主有次。2）符號引導(dǎo)除了圖片，一些符號本身帶有順序和方向性，也能有效引導(dǎo)視線根據(jù)符號來瀏覽，包括阿拉伯?dāng)?shù)字、字母順序、時(shí)間順序（時(shí)間軸）、箭頭等。如極客學(xué)院網(wǎng)（見圖7.19）課程視頻學(xué)習(xí)頁面，課程就是以數(shù)字來標(biāo)識排序。位置大小內(nèi)容形式距離顏色確定了內(nèi)容板塊的位置、位置大小內(nèi)容形式距離顏色

色彩是影響用戶對界面第一印象的重要因素，色彩的應(yīng)用對視覺層級的影響也能起到立竿見影的效果，總結(jié)起來人眼對色彩的關(guān)注度差別主要是以下兩點(diǎn)這種反差包括色彩色相、飽和度和明度反差。位置大小內(nèi)容形式距離顏色色彩是影響用戶對界面第一印象的7.3視覺的一致性

很多大型的研究院及設(shè)計(jì)開發(fā)部門都會對產(chǎn)品的視覺交互整理出一套界面交互規(guī)范，以幫助團(tuán)隊(duì)更好的協(xié)同工作。因?yàn)楫a(chǎn)品的一致性設(shè)計(jì)會極大的改善我們的設(shè)計(jì)流程，縮短設(shè)計(jì)周期，有章可循自然設(shè)計(jì)起來得心應(yīng)手。7.3視覺的一致性很多大型的研究院及設(shè)計(jì)開發(fā)7.3.1與企業(yè)形象一致

網(wǎng)站最終是為企業(yè)品牌服務(wù)，所以網(wǎng)頁必須能夠起到承載品牌信息的作用，這樣即便用戶沒有瀏覽過該品牌的網(wǎng)站，看了你的設(shè)計(jì)后也會聯(lián)想到網(wǎng)站背后的產(chǎn)品品牌。網(wǎng)頁界面視覺設(shè)計(jì)需要與企業(yè)的VI系統(tǒng)保持一致，主要是VI基礎(chǔ)應(yīng)用部分的logo、配色方案、視覺圖形、標(biāo)準(zhǔn)字等。尤其是對于老牌的產(chǎn)品，網(wǎng)站必須保證線上的效果與線下傳統(tǒng)媒體（如海報(bào)、宣傳手冊等）以及店面的視覺風(fēng)格的一致。7.3.1與企業(yè)形象一致網(wǎng)站最終是為企業(yè)品牌服7.3.2頁面及各元素間的共識

論是主頁還是列表頁或是詳細(xì)頁面，盡管層級不一、功能不同，但是要大體上保持不同頁面之間視覺風(fēng)格的一致。一致性主要體現(xiàn)在三個(gè)方面：一是各個(gè)視覺元素布局上井然有序，主頁面、子頁面視覺表現(xiàn)上有章可循，如logo和導(dǎo)航的位置相對固定；二是相同級別的板塊內(nèi)的文字字體、大小、色彩、樣式一致，圖標(biāo)圖形大小一致、各元素間的比例、間距一致；三是配色方案上自成體系，哪些顏色占用比例大，哪些顏色用于強(qiáng)調(diào)等。7.3.2頁面及各元素間的共識論是主頁還是列表頁或是7.4視覺的創(chuàng)意性

盡管網(wǎng)頁設(shè)計(jì)需要遵循很多的秩序規(guī)范，但是在某些特定的頁面視覺創(chuàng)意加以新興的計(jì)算機(jī)手段，卻能讓網(wǎng)頁富有自己獨(dú)特的藝術(shù)風(fēng)格及特征，增強(qiáng)網(wǎng)頁信息的傳達(dá)性、趣味性。7.4視覺的創(chuàng)意性盡管網(wǎng)頁設(shè)計(jì)需要遵循很多的秩7.4.1秩序內(nèi)的創(chuàng)新

秩序內(nèi)的創(chuàng)新依然遵循網(wǎng)站布局規(guī)范，在某些特定的頁面，在保證功能正常運(yùn)作的前提下，界面設(shè)計(jì)表現(xiàn)得靈動、幽默、大膽。這種特定的頁面主要包括錯誤或不存在的頁面，及不得以加載等待頁面。等待上的幽默——等待更有樂趣。如acfun網(wǎng)視頻加載頁面，每次都會出現(xiàn)一則小笑話，緩解用戶焦急心里。7.4.1秩序內(nèi)的創(chuàng)新秩序內(nèi)的創(chuàng)新依然遵循網(wǎng)站7.4.新媒體下的出其不意

隨著CSS3和HTML5技術(shù)的成熟，許多驚艷的效果都能應(yīng)用在網(wǎng)站設(shè)計(jì)中了，比如視差滾動，故事游戲等。波蘭某動物保護(hù)組織網(wǎng)就非常有創(chuàng)意,它選取了十只動物與它的所有者或相關(guān)者,將動物的半張臉同相應(yīng)的人的半張臉結(jié)合在一起,作為一幅頁面的核心內(nèi)容，折射出滑動鼠標(biāo)滾軸，實(shí)現(xiàn)各自臉部左上右下的切換，而點(diǎn)擊頁面兩側(cè)的“＋”、“－”會展示出他們詳細(xì)介紹和心里感受。7.4.新媒體下的出其不意隨著CSS3和HTML5ColonyTV網(wǎng)是為一個(gè)美國科幻劇所創(chuàng)建的，當(dāng)你打開網(wǎng)頁的時(shí)候，會被其中的地圖和劇情所吸引，它利用js技術(shù)將網(wǎng)站設(shè)計(jì)成了一個(gè)游戲在不斷完成任務(wù)的過程中解鎖成就，了解故事走向，直到欲罷不能。ColonyTV網(wǎng)是為一個(gè)美國科幻劇所創(chuàng)建的，當(dāng)你打開網(wǎng)頁7.5案例——早教機(jī)構(gòu)網(wǎng)站界面設(shè)計(jì)詳情請參考微課視頻。7.5案例——早教機(jī)構(gòu)網(wǎng)站界面設(shè)計(jì)詳情請參考微課視頻。網(wǎng)頁設(shè)計(jì)【視覺篇】---2課件標(biāo)題:字體:微軟雅黑粗體字號:32-36pt顏色:主題藍(lán)色副標(biāo)題:字體:微軟雅黑字號:24pt顏色:主題灰色網(wǎng)頁設(shè)計(jì)：從界面布局到視覺表現(xiàn)基礎(chǔ)篇界面交互篇視覺表現(xiàn)篇綜合案例篇講師：余蘭亭標(biāo)題:網(wǎng)頁設(shè)計(jì)：從界面布局到視覺表現(xiàn)基礎(chǔ)篇界面交互篇視覺表現(xiàn)視覺表現(xiàn)篇視聽元素網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)網(wǎng)頁視覺風(fēng)格視覺表現(xiàn)篇視聽元素網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)網(wǎng)頁視覺風(fēng)格7.網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)7.1視覺的有效性7.2視覺的層次性7.3

視覺的一致性7.4視覺的創(chuàng)意性7.5案例——早教機(jī)構(gòu)網(wǎng)站界面設(shè)計(jì)7.網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)7.1視覺的有效性7.2視覺的7網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)

網(wǎng)頁的視覺設(shè)計(jì)屬于用戶體驗(yàn)中的表現(xiàn)層，它是聯(lián)合內(nèi)容、功能和美學(xué)匯集到一起來產(chǎn)生一個(gè)最終設(shè)計(jì)，這將滿足其他四個(gè)層面的所有目標(biāo)。本章介紹了網(wǎng)頁視覺設(shè)計(jì)的四個(gè)要點(diǎn)，即有效性、層次性、一致性、創(chuàng)意性。通過要點(diǎn)的學(xué)習(xí)指導(dǎo)大家在界面布局大的框架下如何進(jìn)一步確定界面版式與各個(gè)視覺元素的設(shè)計(jì)。7網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)網(wǎng)頁的視覺設(shè)計(jì)屬于用戶體驗(yàn)

初學(xué)網(wǎng)頁界面者最容易走進(jìn)的誤區(qū)就是認(rèn)為版面越滿越好，但實(shí)際上有時(shí)候“多即是少”，視覺元素越多，就越容易分散用戶的注意力。網(wǎng)頁中視覺的有效性是視覺設(shè)計(jì)要點(diǎn)的最基礎(chǔ)的特性。由于不同的視覺語言往往會打破自然的視覺流程，因此在整個(gè)版式上必須力求要點(diǎn)突出，主要的解決方法有簡化版式、適當(dāng)留白等。7.1視覺的有效性初學(xué)網(wǎng)頁界面者最容易走進(jìn)的誤區(qū)就是認(rèn)為版面越滿越好，但7.1.1簡化版式

簡化版式是盡量以簡單明確的語言和畫面告訴大家本站點(diǎn)的主題。簡化并非為了版式的簡潔而刪除信息，而是應(yīng)當(dāng)遵循網(wǎng)站的信息結(jié)構(gòu)及框架的基礎(chǔ)上，尋找界面版式最佳的表現(xiàn)方法。

一方面，在每個(gè)界面內(nèi)仔細(xì)斟酌信息間的結(jié)構(gòu)聯(lián)系，對于過于繁冗或者毫無聯(lián)系的內(nèi)容，進(jìn)行必要的轉(zhuǎn)移或刪除。尤其是在電子商務(wù)網(wǎng)站中，把控好信息層級結(jié)構(gòu)、矩形結(jié)構(gòu)、自然結(jié)構(gòu)的版式表現(xiàn)，不僅有利于用戶理解網(wǎng)站的主題內(nèi)容，還能為網(wǎng)站本身帶來更多的商業(yè)價(jià)值。7.1.1簡化版式簡化版式是盡量以簡單明確的如窩窩團(tuán)網(wǎng)站的原版設(shè)計(jì)重點(diǎn)內(nèi)容就不夠突出，其界面在1366*768px的屏幕分辨率下文字、圖片信息都未能顯示完整。如窩窩團(tuán)網(wǎng)站的原版設(shè)計(jì)重點(diǎn)內(nèi)容就不夠突出，其界面在1366*

把控界面內(nèi)圖形圖片與文字的比例。圖與文的搭配可以降低閱讀的疲勞感，但要注意各自所占的比例。同一個(gè)信息內(nèi)容可以設(shè)計(jì)成炫酷的圖片還可以是簡單的文字，首先需要參考信息的優(yōu)先級來決定其視覺表現(xiàn)形式，其次要考慮界面中圖文比例，若圖過多面積過大可能會造成視覺繁雜，若字過多會顯得界面過于空洞。如同為招聘網(wǎng)站，智聯(lián)招聘網(wǎng)站的圖多，顯得雜亂，用戶需要在圖片中找到自己需要的信息。而58同城招聘頁面大量的文字配以少量的文字，反而顯得大氣而不失精致，有利于用戶理解網(wǎng)站的信息邏輯，建立良好的印象。把控界面內(nèi)圖形圖片與文字的比例。圖與文的搭配可7.1.2適當(dāng)留白

留白空間不一定要是白色的。這個(gè)術(shù)語指的是任何與背景相同的空間。所以它可以是白色、黑色，甚至包含微妙的紋理。不管你習(xí)慣稱之為負(fù)空間還是留白，它都非常聰明地引導(dǎo)你關(guān)注網(wǎng)頁的重要內(nèi)容，同時(shí)它也是極簡風(fēng)格的典型特征。越來越多的網(wǎng)站開始使用這種設(shè)計(jì)，設(shè)計(jì)師們逐漸意識到這種設(shè)計(jì)是多么有用。7.1.2適當(dāng)留白留白空間不一定要是白色的。

在很多藝術(shù)家設(shè)計(jì)師的個(gè)人網(wǎng)站中也會大膽地運(yùn)用留白，如藝術(shù)指導(dǎo)junlu的個(gè)人網(wǎng)站，進(jìn)入首頁就是簡單的幾個(gè)作品的布局，每個(gè)作品間的間距大自然分割出每個(gè)作品的空間，沒有其他的修飾元素進(jìn)行干擾，卻能有力的告訴用戶，別想其他的，請靜靜欣賞我的作品吧。在很多藝術(shù)家設(shè)計(jì)師的個(gè)人網(wǎng)站中也會大膽地運(yùn)用留白，如藝術(shù)7.2視覺的層次性7.2.1視覺流程

視覺流程是各種視覺信息作用于人們的視覺器官，引起視線的移動和變化，而視線會隨著注意物的方向、形態(tài)、色彩、聲音等的心理暗示的影響遵循著一定的方向和秩序有規(guī)律的進(jìn)行。人們的視覺流程總會受生活習(xí)慣、地域文化等因素影響形成一定的視覺流程。如國內(nèi)人們文字是從左向右、從上至下的書寫，因此人眼對信息的觀察也是從左到右、從上至下。在網(wǎng)頁界面設(shè)計(jì)中最常見的視覺流程有“F”模式、“Z”模式、縱向模式三種。7.2視覺的層次性7.2.1視覺流程視覺流F模式Z模式縱向模式F模式是指用戶通常會沿著左側(cè)垂直瀏覽而下，先去尋找文章中每個(gè)段落開頭的興趣點(diǎn)，這時(shí)，如果用戶發(fā)現(xiàn)了他喜歡的，他就會從這里開始水平線方向的閱讀。最終結(jié)果就是用戶的視線呈F型或者E型進(jìn)行瀏覽。這種模式在一些以文字為主的網(wǎng)站較常出現(xiàn)，例如新聞資訊類的網(wǎng)站、博客等。F模式Z模式縱向模式F模式是指用戶通常會沿著左F模式Z模式縱向模式Z模式是基于用戶從左到右自上而下的閱讀習(xí)慣，指用戶首先關(guān)注的頁頭水平方向上的內(nèi)容，依照從頭部左到頭部右，再沿著對角線瀏覽下一部分的中部左到中部右，循環(huán)往復(fù)的瀏覽模式。這種較常出現(xiàn)于網(wǎng)頁內(nèi)容不是以大量文字為信息內(nèi)容的頁面。如印象筆記網(wǎng)站首頁布局上Z模式，第一屏為注冊登錄框，將用戶的視線牢牢地鎖定在該領(lǐng)域。接下來對該產(chǎn)品的賣點(diǎn)展示，第一行左文字右圖，第二行右圖左文字，第三行左文字右圖如此重復(fù)，圖片與文字順序的更換一方面遵循了用戶是視覺流程，也是有效引導(dǎo)用戶向下瀏覽，在頁面底部又為注冊登錄框，給用戶唯一的操作選擇，以達(dá)到該頁面的功能訴求。Z模式縱向模式F模式Z模式縱向模式Z模式是基于用戶從左到右自F模式Z模式縱向模式

縱向模式是用戶習(xí)慣自上而下滾動來瀏覽更多信息。當(dāng)用戶還處于確定目標(biāo)信息時(shí)，縱向視覺流能幫助用戶在不需要回掃的情況下獲取更多信息。除了大圖，用戶會選擇數(shù)欄的其中一列縱向?yàn)g覽直到找到某一目標(biāo)信息后，橫向?yàn)g覽細(xì)節(jié)。F模式Z模式縱向模式縱向模式是用戶習(xí)慣自上而下7.2.2視覺層級關(guān)系

視覺表現(xiàn)手法主要有位置、大小、距離、內(nèi)容形式、色彩五種元素組成，實(shí)際設(shè)計(jì)中為了讓效果拉開主次，可能會同時(shí)使用多種方法以達(dá)到更好的效果。7.2.2視覺層級關(guān)系視覺表現(xiàn)手法主要有位置、大小、位置大小內(nèi)容形式距離顏色

位置是在設(shè)計(jì)開始就會考慮的元素，網(wǎng)頁界面設(shè)計(jì)上若遵循人們“從左向右，從上向下”閱讀的視覺規(guī)律，能幫助用戶更容易、更快捷地看到或理解眼前的事物。界面中優(yōu)先級依次為左上，左下，而右下最差。因此很多網(wǎng)站都將自己的logo、商品名、主題等重要信息放在頂部靠左或頂部中間最佳視域內(nèi)。以設(shè)計(jì)癖網(wǎng)站為例，在原稿中，焦點(diǎn)訊息左圖是第一優(yōu)先級的信息，筆者將焦點(diǎn)新聞與右側(cè)的其他列表新聞位置對調(diào)后對比原稿與修改稿：雖然焦點(diǎn)新聞依然是大圖的形式，占的面積也夠大，但由于位置不在最佳視域，會被其新聞分散一部分視線。位置大小內(nèi)容形式距離顏色位置是在設(shè)計(jì)開始就會考慮的元素位置大小內(nèi)容形式距離顏色

在確定了內(nèi)容板塊的位置后，設(shè)計(jì)師還需要考慮給這模塊多大的空間，大小會很直觀反映信息的重要等級。重要的元素相對于一般元素要大一些，甚至?xí)壤д{(diào)也不為過。以TheBostonGlobe網(wǎng)站為例，原稿有左右兩張圖片，左側(cè)的新聞圖片面積約為右側(cè)廣告圖的2倍，輕而易舉地立刻吸引了用戶的注意。筆者將左圖面積縮小為右圖均等后，對比發(fā)現(xiàn)：即便左圖位置仍在用戶會第一時(shí)間關(guān)注的左側(cè)，但用戶看到左圖的時(shí)候也會不自覺地看到右圖，于是網(wǎng)站的新聞重點(diǎn)會被廣告所打擾，造成不良的心理感受。位置大小內(nèi)容形式距離顏色在確定了內(nèi)容板塊的位置位置大小內(nèi)容形式距離顏色

距離可以分為二維的距離效果與三維的距離效果。二維的距離是保證信息可被理解的前提下，視覺元素尺寸不變，細(xì)節(jié)被放大，人眼會感受到元素更清晰，離眼睛更近而容易先去關(guān)注。還可以通過視覺手段能體現(xiàn)出三維距離的效果。具體方法有模糊元素、調(diào)整透明度、增添投影等。位置大小內(nèi)容形式距離顏色距離可以分為二維的距離效位置大小內(nèi)容形式距離顏色

確定了內(nèi)容板塊的位置、大小和距離關(guān)系后，我們會繼續(xù)考慮內(nèi)容的形式包括視頻、圖片、文字等，這里主要講我們經(jīng)常使用的圖形和文字；相比起文字，圖片在抓住用戶眼球這一點(diǎn)上是功不可沒的，同時(shí)還能使用戶在短時(shí)間內(nèi)形成形象記憶，從視覺層級上，人眼一般會先關(guān)注圖后關(guān)注文字。但僅僅這點(diǎn)還不夠，通過圖片抓取用戶眼球后引導(dǎo)視線到下一個(gè)關(guān)注點(diǎn)，是設(shè)計(jì)上更多會考慮的點(diǎn)，概括有以下表現(xiàn)手法：1）方向性引導(dǎo)圖片中的形象有些具有明顯的方向性，如人眼注視的方向、手勢所指的方向、物體運(yùn)動方向、光照方向等，這些特征會引導(dǎo)人眼視線朝著設(shè)定的方向運(yùn)動，從而達(dá)到視覺層級有主有次。2）符號引導(dǎo)除了圖片，一些符號本身帶有順序和方向性，也能有效引導(dǎo)視線根據(jù)符號來瀏覽，包括阿拉伯?dāng)?shù)字、字母順序、時(shí)間順序（時(shí)間軸）、箭頭等。如極客學(xué)院網(wǎng)（見圖7.19）課程視頻學(xué)習(xí)頁面，課程就是以數(shù)字來標(biāo)識排序。位置大小內(nèi)容形式距離顏色確定了內(nèi)容板塊的位置、位置大小內(nèi)容形式距離顏色

色彩是影響用戶對界面第一印象的重要因素，色彩的應(yīng)用對視覺層級的影響也能起到立竿見影的效果，總結(jié)起來人眼對色彩的關(guān)注度差別主要是以下兩點(diǎn)這種反差包括色彩色相、飽和度和明度反差。位置大小內(nèi)容形式距離顏色色彩是影響用戶對界面第一印象的7.3視覺的一致性

很多大型的研究院及設(shè)計(jì)開發(fā)部門都會對產(chǎn)品的視覺交互整理出一套界面交互規(guī)范，以幫助團(tuán)隊(duì)更好的協(xié)同工作。因?yàn)楫a(chǎn)品的一致性設(shè)計(jì)會極大的改善我們的設(shè)計(jì)流程，縮短設(shè)計(jì)周期，有章可循自然設(shè)計(jì)起來得心應(yīng)手。7.3視覺的一致性很多大型的研究院及設(shè)計(jì)開發(fā)7.3.1與企業(yè)形象一致

網(wǎng)站最終是為企業(yè)品牌服務(wù)，所以網(wǎng)頁必須能夠起到承載品牌信息的作用，這樣即便用戶沒有瀏覽過該品牌的網(wǎng)站，看了你的設(shè)計(jì)后也會聯(lián)想到網(wǎng)站背后的產(chǎn)品品牌。網(wǎng)頁界面視覺設(shè)計(jì)需要與企業(yè)的VI系統(tǒng)保持一致，主要是VI基礎(chǔ)應(yīng)用部分的logo、配色方案、視覺圖