人機工程與交互設計(網(wǎng)頁界面設計)

1、 浙江大學城市學院2012 2013 學年第 1 學期期末考核 人機工程學 大作業(yè)姓名：李鵬飛 林智翔 學號：31102052 31102055班級：電信1101_ 電信1102_指導老師：_劉加海_人機工程與交互設計網(wǎng)頁設計摘 要：就產(chǎn)品而言，隨著時代的發(fā)展，產(chǎn)品已不是單純地重視款式的創(chuàng)新，更多的強調(diào)的是用戶的體驗。但社會上仍有許多產(chǎn)品新增了各式各樣的功能，卻忽略了用戶對產(chǎn)品功能是否可以簡單方便地使用。而本文將從使用者的角度探討網(wǎng)頁設計，主張網(wǎng)頁設計要以人為本，進行人性化設計。在探討過程中，我們會對各種類型的門戶網(wǎng)站進行對比，分析其設計的含義。指出網(wǎng)頁設計的主要內(nèi)容，并提出網(wǎng)頁設計的要點。但

2、在設計中由于網(wǎng)站對針對自己用戶方面有自己獨特的創(chuàng)新設計，所以不能以偏概全，因此會產(chǎn)生些許不足。關鍵字：人機界面 網(wǎng)頁設計 以人為本 人性化設計 abstract：terms of products, with the development of the times, the product has not simply emphasis on models of innovation, more emphasis is the user experience. but there are still many products added to a variety of functions,

3、 but ignored the user whether the product functions can be simple and easy to use. this article from the users perspective of web design, advocate web design to people-oriented, user-friendly design. explore the process, we will all types of portal comparison analysis of the meaning of its design. t

4、hat the main content of the web design, web design and made points. website design has its own unique innovative design for their own user, so can not be generalized, and therefore will have a little less.key word：man-machine interface web design people-oriented user-friendly design 目錄第一章 交互設計的介紹11.

5、1傳統(tǒng)的交互設計11.2以人為本的人性化交互設計1第二章分析人機界面的設計22.1人機界面的介紹22.2網(wǎng)站界面的設計原則32.3分析傳統(tǒng)網(wǎng)頁界面的不足之處4（1）排版不簡潔4（2） 字體不統(tǒng)一5（3）主次色彩不分6（4）廣告圖片太多6（5）沒有重點7（6）文字形式相同，功能不同8（7）導航目有重復8（8）信息遮攔92.4分析好的網(wǎng)頁界面出彩之處9（1）排版整齊9（2）突出重點10（3）字體統(tǒng)一10（4）色彩搭配協(xié)調(diào)11（5）條目數(shù)量適宜12（6）導航目錄合理安排132.5針對不足提出如何改進13（1）明確網(wǎng)頁主題13（2）排版改進13（3）色彩搭配15（4）圖片處理17第三章設計網(wǎng)頁界面23

6、3.1網(wǎng)頁界面的用戶研究233.2人機界面的信息設計（強調(diào)視覺）243.3人機界面的視覺設計24第四章以人性化為主旨的交互設計的5樣產(chǎn)品264.1浙江大學城市學院26（1）網(wǎng)站主題26（2）排版264.2網(wǎng)易新聞網(wǎng)28（1）網(wǎng)站主題28（2）排版29（3）顏色搭配30（4）圖片304.3dota視頻網(wǎng)31（1）網(wǎng)站主題31（2）排版31（3）色彩搭配33（4）圖片33第五章人性化交互設計未來的發(fā)展355.1人性化交互設計未來的發(fā)展35【參考文獻】36引言：一個門戶網(wǎng)站作體現(xiàn)著是企業(yè)的形象，好的網(wǎng)站對企業(yè)重要性不言自喻。如今越來越多的行也開始注重網(wǎng)站對于自身宣傳。然而目前由于網(wǎng)頁技術更新很快，導

7、致目前的網(wǎng)頁設計普遍沿用某個經(jīng)典模式，而沒有根據(jù)用戶的需求去設計。比如現(xiàn)在的市場中，有大部分中小企業(yè)看重網(wǎng)站對其知名度的宣傳，從而匆匆仿照某個模板，簡單地建立一個網(wǎng)站，但這種人云亦云的網(wǎng)站如何能讓人印象深刻。因此一個好的交互網(wǎng)站無疑是必須的。但如何使網(wǎng)站很好地幫助雙方的交互交流呢則是我們關注。第一章 交互設計的介紹1.1傳統(tǒng)的交互設計簡單的說，交互設計是人工制品、環(huán)境和系統(tǒng)的行為，以及傳達這種行為的外形元素的設計與定義。對于傳統(tǒng)的設計，設計者主要關注的產(chǎn)品的外在形式，卻忽視了使用者對產(chǎn)品的實用性?？梢赃@么說，傳統(tǒng)設計是設計者們自然現(xiàn)象中直接得到啟示，或是全憑人的直觀感覺來設計制作工具。設計方案

8、存在于手工藝人頭腦之中，無法記錄表達，產(chǎn)品也是比較簡單的。也可以說，這只是設計，還沒有達到交互的目的。事實上，通過對產(chǎn)品的界面和行為進行設計，讓產(chǎn)品和它的使用者之間建立一種有機關系，從而可以有效達到使用者的目標，這才是交互設計。所以現(xiàn)代的交互設計關注的是產(chǎn)品的內(nèi)容和內(nèi)涵，即一個產(chǎn)品的設計是從客戶需求為出發(fā)點的，在客戶需求的前提下，盡可能將產(chǎn)品的使用性設計的方便，區(qū)別于傳統(tǒng)的交互設計，既需要設計出用戶滿意的功能產(chǎn)品，還要使設計品方便用戶發(fā)現(xiàn)和了解使用方法。這就需要現(xiàn)代的人性化交互設計來滿足顧客需求。1.2以人為本的人性化交互設計一般來說，好的產(chǎn)品設計并非始于圖片，而是對人的理解。好的設計建立在對

9、用戶的深刻了解上。 用戶喜歡什么產(chǎn)品，他們的用產(chǎn)品習慣是什么，了解產(chǎn)品的交互，他們將如何與之交互都是一個設計者需要去求證的。作為設計師，只有對使用的人了解越多，這樣才能對產(chǎn)品進行更有效的設計。只有了解了用戶的真正目的，然后更好的幫助用戶達到其目的，才能使用戶更加喜歡。而以用戶的目的為主旨，根據(jù)人的行為習慣、人體的生理結(jié)構(gòu)、人的心理情況、思維方式等等，在原有設計基本功能和性能的基礎上，對產(chǎn)品進行優(yōu)化，使用戶使用起來更加方便、舒適。人性化設計可以說是是科學、技術與人性的結(jié)合。人性化很大程度上和可用性設計緊密聯(lián)系在一起,或者說人性化設計就是可用性設計的一個思路和原則。最后讓我們來定義究竟什么是人性化

10、設計呢？專家普遍指出：人性化是指廠家在設計產(chǎn)品時力求從人體工程學、生態(tài)學和美學等角度達到完美，從而真正實現(xiàn)科技以人為本的目的。第二章分析人機界面的設計2.1人機界面的介紹人機界面，又稱用戶界面或使用者界面，是指對軟件的人機交互、操作邏輯、界面美觀的整體設計，是人與計算機之間傳遞、交換信息的媒介和對話接口，是計算機系統(tǒng)的重要組成部分,其主要功能是幫助人和機器在信息交換和功能上接觸或互相影響。如下圖所示。人機界面示意圖設計用戶界面時要充分考慮人的視覺，觸覺，聽覺的作用。好的用戶界面設計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由,充分體現(xiàn)軟件的定位和特點。在生活中，凡參與人機

11、信息交流的領域都存在著人機界面。而其中網(wǎng)頁設計則作為人機界面設計中重要的一塊，已經(jīng)越來越受現(xiàn)代人所重視。一個好的網(wǎng)站展現(xiàn)出來的不僅僅是企業(yè)的形象與，更重要的其對用戶認真的風格。網(wǎng)頁界面設計作為一個廣義用語，包含了許多不同的技能和學科中所生產(chǎn)和維護的網(wǎng)站。其主要目的是通過文字圖形的空間結(jié)合，進行合理的排列布局，從而可以使用戶可以有一個流暢的視覺體驗，達到最佳的視覺表現(xiàn)效果。此外能夠快速地尋找到用戶所需要的信息則是好網(wǎng)站設計的核心所在。2.2網(wǎng)站界面的設計原則網(wǎng)站設計絕不是憑自己的臆想來進行設計的，其中有許多設計原則是需要熟記并且遵守的。如果你經(jīng)常上網(wǎng)的話，會看到很多網(wǎng)站設計很樸素，看起來給人一種

12、很舒服的感覺；有點網(wǎng)站很有創(chuàng)意，能給人帶來意外的驚喜和視覺的沖擊；而相當多的網(wǎng)站頁面上充斥著怪異的字體，花哨的色彩和圖片，給人網(wǎng)頁制作粗劣的感覺。網(wǎng)站界面的設計，既要從外觀上進行創(chuàng)意以到達吸引眼球的目的，還要結(jié)合圖形和版面設計的相關原理，從而使得網(wǎng)站設計變成了一門獨特的藝術。通常的講，網(wǎng)站用戶界面的設計應遵循以下幾個基本原則：（1）用戶導向原則設計網(wǎng)頁首先要明確到底誰是使用者，要站在用戶的觀點和立場上來考慮設計網(wǎng)站。要作到這一點，必須要和用戶來溝通，了解他們的需求、目標、期望和偏好等（2）kiss原則kiss原則就是keep it sample and stupid的縮寫，簡潔和易于操作是網(wǎng)頁

13、設計的最重要的原則。畢竟，網(wǎng)站建設出來是用于普通網(wǎng)民來查閱信息和使用網(wǎng)絡服務。沒有必要在網(wǎng)頁上設置過多的操作，堆集上很多復雜和花哨的圖片（3）布局控制關于網(wǎng)頁排版布局方面，很多網(wǎng)頁設計者重視不夠，網(wǎng)頁排版設計的過于死板，甚至照抄他人。如果網(wǎng)頁的布局凌亂，僅僅把大量的信息堆集在頁面上，會干擾瀏覽者的閱讀。因此合理的排版是必須的。（4）視覺平衡網(wǎng)頁設計時，也要各種元素（如圖形、文字、空白）都會有視覺作用。根據(jù)視覺原理，圖形與一塊文字相比較，圖形的視覺作用要大一些。所以，為了達到視覺平衡，在設計網(wǎng)頁時需要以更多的文字來平衡一幅圖片。另外，按照中國人的閱讀習慣是從左到右，從上到下，因此視覺平衡也要遵循

14、這個這個道理。同時，也決不能低估空白的價值。如果你的網(wǎng)頁上所顯示的信息非常密集，這樣不但不利于讀者閱讀，甚至會引起讀者反感，破壞該網(wǎng)站的形象。在網(wǎng)頁設計上，適當增加一些空白，精煉你的網(wǎng)頁，使得頁面變的簡潔（5）色彩搭配與文字可閱讀性顏色是影響網(wǎng)頁的重要因素，不同的顏色對人的感覺有不同的影響，例如：紅色和橙色使人興奮并使得心跳加速；黃色使人聯(lián)想到陽光，是一種快活的顏色；黑顏色顯得比較莊重，考慮到你希望對瀏覽者產(chǎn)生什么影響，為網(wǎng)頁設計選擇合適的顏色（包括背景色、元素顏色、文字顏色、鏈節(jié)顏色等）。此外，為了方便閱讀網(wǎng)站上的信息，可以參考報紙的編排方式將網(wǎng)頁的內(nèi)容分欄設計，甚至兩欄也要比一滿頁的視覺效

15、果要好。另一種能夠提高文字可讀性的因素是所選擇的字體，（6）和諧與一致性通過對網(wǎng)站的各種元素（顏色、字體、圖形、空白等）使用一定的規(guī)格，使得設計良好的網(wǎng)頁看起來應該是和諧的?；蛘哒f，網(wǎng)站的眾多單獨網(wǎng)頁應該看起來像一個整體。網(wǎng)站設計上要保持一致性，這又是很重要的一點（7）個性化雖然說是個性化，但是網(wǎng)站的整體風格和整體氣氛表達要與網(wǎng)站的主旨相符合。2.3分析傳統(tǒng)網(wǎng)頁界面的不足之處上面解析了一下網(wǎng)站界面和介紹了一些交互設計的原則，接下來我們將根據(jù)以上所講進行詳細的優(yōu)缺點分析。（1）排版不簡潔 傳統(tǒng)的網(wǎng)頁界面注重的的其功能，簡而言之，就是將用戶所需要的功能都擺在了臺面上，然而再簡單地加以修飾，一眼看上

16、去的確是極其地充實，但這琳瑯滿目的信息卻并不能給瀏覽者留下深刻的印象。失敗的規(guī)劃是造成這的主要原因。如下圖所示（2） 字體不統(tǒng)一各種顏色的字實在看上去太繚亂了，讓人容易一下子就開始犯迷糊，一眼看上去總感覺排布不那么對勁，主要原因便出現(xiàn)在這些字體上面，如下圖所示（3）主次色彩不分網(wǎng)站顏色是抓住用戶眼球的第一要素，一個好的網(wǎng)站絕對不會讓次要內(nèi)容的顏色搶了主要內(nèi)容的風頭。如下圖所示，紅色實在是太搶鏡了。（4）廣告圖片太多適量的圖片的確能起到錦上添花的作用，但是不要讓大量的圖片充斥在一個框面上，對瀏覽者來說，誰都不希望看到亮花自己雙眼出網(wǎng)站。（5）沒有重點有些新聞網(wǎng)站看上去排序井然有序，經(jīng)過了簡單的規(guī)

17、劃，似乎是很不錯。但是用戶在瀏覽這類網(wǎng)站時希望看到的是最新或者最重要的新聞，這種則應該用比較突出的字體或圖畫體現(xiàn)出來。如下圖所示上圖看上去非常工整，但作為一個提供人民消息的網(wǎng)站，最好可以將一些最新消息和一些影響大的政策用顯眼的字體顏色和大號字體標出來，讓人一眼可以注意到。（6）文字形式相同，功能不同外觀相同的文字，功能卻不一樣，違背了一致性的原則。如下圖所示，“應急管理”和“主題服務”文字樣式相同，卻前者是鏈接而后者不是。這給交互者產(chǎn)生一個不好的挫折感。（7）導航目有重復一個明確的導航目錄可以讓瀏覽者少了很多的煩惱。雖然這是隱藏的要素，但這也是影響一個網(wǎng)站是否設計用心的一個方面，其潛在地影響了

18、這個網(wǎng)站的印象。如下圖所示導航目錄不得不提一下城院的門戶網(wǎng)站在這一點也做的不太好，如下圖所示，這兩條導航目錄是出現(xiàn)在在一屏中的。城院導航儀（8）信息遮攔網(wǎng)站需要賺錢，自然需要廣告的大量植入，但某些廣告圖片卻經(jīng)常將網(wǎng)站的信息遮攔住，這實在實不可取。雖然這種錯我網(wǎng)站越來越少，但還是會有一些網(wǎng)站出現(xiàn)這樣的問題。2.4分析好的網(wǎng)頁界面出彩之處一個好的界面應該不僅僅是畫面出彩，規(guī)范整齊等等，而應該讓使用者可以輕易地獲取其所希望的內(nèi)容，這才是一個好的網(wǎng)站所應該存在的。其中以下是一些好的網(wǎng)站所應該有的。（1）排版整齊不得不承認，看似一個沒有多少內(nèi)容的網(wǎng)站，卻給人有一種大氣的感覺，干凈整潔，一眼看去就知道有什

19、么內(nèi)容是自己需要的。作為一個新聞網(wǎng)站，其排版可以說是成功的。網(wǎng)易新聞網(wǎng)（2）突出重點瀏覽一些新聞網(wǎng)站往往是用戶希望獲得一些今日的熱點，如果網(wǎng)站可以把最重要的讓人一目了然，絕對是可以令人默默記住這個人性的網(wǎng)站。如下圖所示，這么大的一幅圖片再配上醒目顏色寫的文字，第一時間可以看到網(wǎng)站想要傳達的一個重點。中國娛樂網(wǎng)（3）字體統(tǒng)一同一等級的項目采用的是一樣的字體，這樣子給人的感覺就是整齊劃一，雖然字體的顏色不太一樣，但看上去絕對沒有眼花繚亂的感覺。起點小說網(wǎng)（4）色彩搭配協(xié)調(diào)合理地利用色彩的含義來襯托網(wǎng)站，同時利用各種顏色協(xié)調(diào)的搭配，往往能給網(wǎng)站帶來許多意想不到的效果。畢竟色彩也是能表達許多內(nèi)涵的。如

20、下圖所示世紀佳緣網(wǎng)（5）條目數(shù)量適宜一個好的網(wǎng)站不應該讓界面充滿過多的條目，這樣子給人一種不簡潔的感覺。有的時候幾條讓人一目了然的欄目絕對是讓人眼前一亮的。如下圖所示。新浪讀書網(wǎng)（6）導航目錄合理安排不同的網(wǎng)站有不同的安排，但最基本的就是應該將必須呈現(xiàn)出來而不是許多重復的放在上面。更多的時候簡潔即是美。如下圖所示。百度搜索引擎2.5針對不足提出如何改進（1）明確網(wǎng)頁主題相對于怎么去做好一個網(wǎng)頁，更重要的是你要明確你這個網(wǎng)站的內(nèi)容是什么。明確你網(wǎng)站的主題是什么，網(wǎng)站的服務對象是誰，網(wǎng)站的發(fā)展方向在哪里，網(wǎng)站的文化氛圍怎么樣，這些因素都是影響你的網(wǎng)站的設計。網(wǎng)站最重要的就是不能忽視你的服務對象，你

21、這個網(wǎng)站的用戶群體在哪里，用戶的特點是怎么樣的根據(jù)這些東西來制定你網(wǎng)頁的設計。明確了你的服務對象，接下去要知道的是你網(wǎng)站的功能。你功能如果只是單純地介紹的話，那么設計就不能與塑造企業(yè)形象的網(wǎng)站的設計一樣，因為你所提供用戶的功能是不一樣的。這對設計也是極其重要的一面。（2）排版改進一個好的排版可以讓網(wǎng)頁令人眼前一亮，簡潔有序的分布可以在第一時間便讓人喜歡上這個網(wǎng)站。那么怎樣才能做出好的排版呢。1）注意間距這個間距指的是網(wǎng)頁中各分欄之間的距離。所謂分欄，像報紙的排版一樣，采用分欄顯示信息，將其規(guī)劃成一個大表格，然后根據(jù)版面設計進行安排內(nèi)容，將這個表格分成不同的行和列調(diào)整行和列的高度和寬度，以便整個

22、頁面框架穩(wěn)定，再把圖片和文字放到相應的單元格里，以達到版面的要求。好的網(wǎng)頁要在一屏內(nèi)保持適當?shù)臋跀?shù)，即保持各個欄間的間距適宜，例如最基本的就有上下分欄和左右分欄，這些需要注意的就是在完成后既不能令版面太空曠也不能令版面顯得太狹窄。對于網(wǎng)站中正文內(nèi)容，現(xiàn)在普遍是將行距設置為字體的150%200%之間。至于為什么采用這樣的間距，主要是出于以下考慮：適當?shù)男芯鄷纬梢粭l明顯的水平空白帶，以引導瀏覽者的目光，而行距過寬會使一行文字失去較好的延續(xù)性。此外，除了對于可讀性的影響，行距本身也是具有很強表現(xiàn)力的設計語言，為了加強版式的裝飾效果，可以有意識地加寬或縮窄行距，體現(xiàn)獨特的審美意趣。例如，加寬行距可以

23、體現(xiàn)輕松、舒展的情緒，應用于娛樂性、抒情性的內(nèi)容恰如其分。另外，通過精心安排，使寬、窄行距并存，可增強版面的空間層次與彈性，表現(xiàn)出獨到的匠心。2）字體。針對字體的間距，則需要分字體的大小和中英文進行考慮。字體太大會減少一屏的網(wǎng)頁信息，字體太小則又會影響用戶的閱讀，產(chǎn)生視覺上的壓抑，因次字體的選擇便顯得尤為重要了。中國的網(wǎng)頁大概是760800寬左右，主要是因為現(xiàn)在顯示屏的分辨率普遍為1024*800上下，至于主要寬度則根據(jù)這個公司的種類如門戶類還是公司類等來進行確定。一般現(xiàn)在網(wǎng)頁上的默認字體為12pt（磅），現(xiàn)在網(wǎng)頁上較為流行的中小字體為9pt左右。中文的字體在默認大小的情況下一般每行2030個

24、為宜，英文字母一般為4070個為宜。字體之間的間距在這些數(shù)量之內(nèi)不會令用戶產(chǎn)生不適應的感覺。這是針對字體大小的，對于字體樣式也是有考究的。網(wǎng)頁設計者可以用字體來更充分地體現(xiàn)設計中要表達的情感。字體選擇是一種感性、直觀的行為。但是，無論選擇什么字體，都要依據(jù)網(wǎng)頁的總體設想和瀏覽者的需要。例如：粗體字強壯有力，有男性特點，適合機械、建筑業(yè)等內(nèi)容；細體字高雅細致，有女性特點，更適合服裝、化妝品、食品等行業(yè)的內(nèi)容。在同一頁面中，字體種類少，版面雅致，有穩(wěn)定感；字體種類多，則版面活躍，豐富多彩。關鍵是如何根據(jù)頁面內(nèi)容來掌握這個比例關系。從加強平臺無關性的角度來考慮，正文內(nèi)容最好采用缺省字體。因為瀏覽器是

25、用本地機器上的字庫顯示頁面內(nèi)容的。作為網(wǎng)頁設計者必須考慮到大多數(shù)瀏覽者的機器里只裝有三種字體類型及一些相應的特定字體。而你指定的字體在瀏覽者的機器里并不一定能夠找到，這給網(wǎng)頁設計帶來很大的局限。解決問題的辦法是：在確有必要使用特殊字體的地方，可以將文字制成圖像，然后插入頁面中。此外，如果有一些精美的藝術字體應該謹慎使用，畢竟網(wǎng)頁需要照顧全局來考慮。3）窗口排布一個大小不合理的窗口排布容易讓用戶自己費精力去找重要的信息，此外也容易失去你所希望用戶看到的內(nèi)容，所以主次窗口的排布是非常重要的?，F(xiàn)在普遍采用的是一個主窗口大小旁邊附加若干個（一般不超過5個）小窗口進行排列。4）元素搭配平衡一個最簡單的網(wǎng)

26、頁的也就是幾樣元素，包含了文字，圖片和超鏈接。內(nèi)容網(wǎng)站的靈魂，而這些是構(gòu)成靈魂的物質(zhì)基礎。文字是網(wǎng)頁的主體。雖然利用flash和圖形文字等可以達到表達內(nèi)容的效果，甚至可以表現(xiàn)地更好。但是純文本文字的作用還是無法替代的，畢竟其所占用的存儲空間是非常少的。當然在顯示字體的時可以注意字體的大小和顏色，避免頁面過于呆板，從而達到改善網(wǎng)頁的效果。至于具體如何做將會在后面的內(nèi)容中進行述說。圖像給人的視覺效果比文字更加強烈。如果在網(wǎng)頁中可以靈活地運用圖片，可以很好地起到點綴網(wǎng)頁的作用。但是如果只是為了畫面的炫麗而盲目地添加圖片，則會造成網(wǎng)頁的混亂不堪，給人一種雜亂無章的感覺。對于超鏈接一定要讓人輕易辯得，對

27、于與網(wǎng)頁主題有關的目錄要用相對醒目的方式來進行表達，給人的感覺要鮮明。其實還有一點也可以算是元素，那就是空白區(qū)。一般來說空白區(qū)的合理安排也是網(wǎng)站成功的推手。（3）色彩搭配不要忽略色彩對網(wǎng)站的重要作用，一個適合的網(wǎng)頁內(nèi)容的顏色絕對是可以起到錦上添花的作用。其中排版使用的顏色并不是指單一的文字使用顏色，其中還包括圖片和背景所使用的顏色。在使用顏色中，由于許多網(wǎng)站其不同的功能性和針對用戶的不同，所使用的也要根據(jù)對象來選擇。不同的顏色給人的感覺是完全不同的。網(wǎng)站可以通過色彩的變換來協(xié)調(diào)用戶的心理，讓用戶對軟件產(chǎn)品時常保持一種新鮮度，有助于網(wǎng)站的持久性。下面舉出一些顏色的例子：紅色-是一種激奮的色彩。刺

28、激效果，能使人產(chǎn)生沖動，憤怒，熱情，活力的感覺。 綠色-介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感覺。 金黃-淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。 橙色-也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時尚的效果。 黃色-具有快樂，希望，智慧和輕快的個性，它的明度最高。 藍色-是最具涼爽，清新，專業(yè)的色彩。它和白色混合，能體現(xiàn)柔順，淡雅，浪漫的氣氛(象天空的色彩:) 。白色-具有潔白，明快，純真，清潔的感受。 黑色-具有深沉，神秘，寂靜，悲哀，壓抑的感受。 灰色-具有中庸，平凡，溫和，謙讓，中立和高雅的感覺。每種色彩在飽和度，透明度上略微變化就會產(chǎn)生不同的感覺。以綠色為例，黃綠色有

29、青春，旺盛的視覺意境，而藍綠色則顯得幽寧，陰深。此外，由于許多顏色都有其自身的含義，恰當?shù)厥褂眠@些色彩，可以完美地影響用戶的情感。一些典型的額設計如ibm的深藍色和window的紅黃藍綠色彩都令我們感覺很深切。下面展示出一些色彩的內(nèi)涵色彩圖片內(nèi)涵上面展現(xiàn)出來的是一部分顏色，針對不同的網(wǎng)站，瀏覽者不同，應用的主色調(diào)也可以進行相應的調(diào)整。根據(jù)色彩選內(nèi)容是一方面，另一方面則是需要將你選出的色彩進行合理的搭配。如果牽強地將你認為符合的顏色搭配在了一起，只會讓人產(chǎn)生一種很別扭的感覺。按照色彩的記憶性原則和以上顏色所代表的一些內(nèi)涵，再根據(jù)和諧，均衡和突出重點的原則，進行色彩的合理搭配。在色彩的運用中也不是

30、運用顏色越多越好，雖然沒有明確的顏色數(shù)量限制，但是太多的顏色顯現(xiàn)在一屏中容易讓用戶眼花繚亂并且失去重點。色彩可以通過對比可以給人以強烈的視覺沖擊，如windows紅黃藍三種基本色的搭配，而補色的對比則可以使顏色更加地鮮明，黑白的對比給人感覺黑的更黑，白的更白，給人的感覺相對比純色的話，刺激更大。色彩的互補則不單單是從顏色上表現(xiàn)出來，從深色與淡色的相互映襯可以使畫面看上去比較柔和。如果是兩種對比很強烈的顏色，則是可以通過面積大小這種方式進行排布，面積小的顏色自動會補充道面積大的顏色，從而襯托出面積大的顏色的搶眼。對于文字的顏色，要根據(jù)網(wǎng)頁的內(nèi)容和背景等進行相應的選擇。但不要出現(xiàn)字體顏色和背景顏色

31、相近導致無法看清的狀況。而在整個網(wǎng)頁上，最重要的是統(tǒng)一色調(diào)，整個界面中盡量少使用類別不同的顏色，控制在三種之內(nèi)，使界面看上去保持簡潔，單純。除非是特殊情況，否則盡量不要使用對比非常強烈的色彩搭配。在網(wǎng)頁設計中，色彩的運用遵循以上一些技巧和原則，如統(tǒng)一色調(diào)，慎用對比，善用色彩明度和面積等等，就大致可以設計出比較符合用戶的網(wǎng)站了。（4）圖片處理如果可以很好地利用圖片的話，是可以對網(wǎng)站起到點睛之筆的作用，因為圖片的視覺沖擊是遠遠大于文字的。但是如果不顧原則地亂放一切的話，給人的第一印象絕對是不會好的?，F(xiàn)在市場上的網(wǎng)站由于廣告的盈利性，網(wǎng)頁上的圖片自然就會造成網(wǎng)頁的不協(xié)調(diào)，對于這些圖片只能看網(wǎng)站經(jīng)營商

32、的想法了。對于圖片的處理是非常復雜的事情。由于圖片既包含有彩色和造型各異的字體，還有許多自己的色彩，對于某些動態(tài)圖片，更有動畫產(chǎn)生，這些因素都是影響網(wǎng)頁的整體造型。因此圖片要與網(wǎng)站相協(xié)調(diào)是件更加困難的事情，它甚至可以說還綜合了前面字體與顏色設計技巧。對于圖片處理，本著設計簡潔至上的原則，應通過和諧統(tǒng)一的樣式風格將這些視覺元素呈現(xiàn)出來。圖片的幾何框架，線條風格，色彩飽和度等要與網(wǎng)頁的相關主題保持一致。下面列舉出一些圖片在排版時的一些注意點：1）圖片的擺放圖片的擺放位置直接關系到版面的構(gòu)圖布局、版面中的左右上下及對角線的四角都是視線的焦點。在這焦點上恰到好處地安排圖片，版面的視覺沖擊力就會明顯地表

33、露出來。編排中有效地控制住這些點，可使版面變得清晰、簡潔而富于條理性。圖片擺放位置2）圖版面積圖片面積的大小安排，直接關系到版面的視覺傳達。一般情況下，把那些重要的、吸引讀者注意力的圖片放大，從屬的圖片縮小，形成主次分明的格局，這是排版設計的基本原則。圖版面積的大小安排，直接關系到版面的視覺傳達。一般情況下，把那些重要的、吸引讀者注意力的圖片放大，從屬的圖片縮小，形成主次分明的格局，這是排版設計的基本原則。圖片面積3）圖片的數(shù)量圖片數(shù)量多寡，可影響到讀者的閱讀興趣。如果版面只采用一張圖片時，那么，其質(zhì)量就決定著人們對它的印象。往往這是顯示出格調(diào)高雅的視覺效果之根本保證。增加一張圖片，就變?yōu)檩^為

34、活躍的版面了，同時也就出現(xiàn)了對比的格局。圖片增加到三張以上，就能營造出很熱鬧的版面氛圍了，非常適合于普及的、熱鬧的和新聞性強的讀物。有了多張照片，就有了瀏覽的余地。數(shù)量的多少，并不是設計者的隨心所欲，而最重要的是根據(jù)版面的內(nèi)容來精心安排。圖片數(shù)量4）圖片的形式對于不同的網(wǎng)站需求，圖片也將以不同的方式呈現(xiàn)出來方形圖式方形格式出血圖式 即圖片充滿整個版面而不露出邊框。出血格式退底圖式 是設計者根據(jù)版面內(nèi)容所需，將圖片中精選部分沿邊緣裁剪?；W(wǎng)圖式 是利用電腦技術用以減少圖片的層次。退底格式特殊圖式 是將圖片按照一定的形狀來限定。對于一些非常特別的形式，我一下子也沒法找到，只能希望大家以后瀏覽網(wǎng)站時

35、注意關注就是了。5）圖片的組合設計者將數(shù)張圖片安排在同一版面中。它包括塊狀組合與散點組合。塊狀組合強調(diào)了圖片與圖片之間的直線。垂直線和水平線的分割，文字與圖片相對獨立，使組合后的圖片整體大方，富于理智的秩序化條理。圖片組合6）圖片方向的強弱可造成版面的行之有效的視覺攻勢。方向感強則動勢強，產(chǎn)生的視覺感應就強。反之則會平淡無奇。圖片的方向性可通過人物的運勢、視線的方向等方面的變化來獲得，也可借助近景、中景和遠景來達到。圖片方向感以上這些都是對網(wǎng)頁中圖片的排版應該注意到的地方，安排好這些細節(jié)有助于圖片與網(wǎng)站的協(xié)調(diào)性。有這樣一說，一幅圖版勝于千字。但這并非語言或文字表現(xiàn)力減弱了，而是說圖片在視覺傳達

36、上能輔助文字，幫助理解，更可以使版面立體、真實。因此通過圖片具體而直接地把網(wǎng)站的意念高素質(zhì)、高境界地表現(xiàn)出來，使本來物變成強而有力的訴求性畫面，充滿了更強烈的創(chuàng)造性，這是每一個設計者都應該學習的。第三章設計網(wǎng)頁界面3.1網(wǎng)頁界面的用戶研究現(xiàn)在網(wǎng)站很受歡迎，其中重要的一點就是對用戶體驗的重視。用戶體驗是顧客滿意度和忠誠度的決定性因素。網(wǎng)頁設計中的用戶體驗是指用戶在訪問網(wǎng)站界面、功能的過程中建立起來的心理感受。如今企業(yè)對用戶體驗的關注度也已經(jīng)成為了一陣熱潮。很多跨國公司如微軟、蘋果、雅虎、惠普、ibm等都先后成立了用戶體驗研究機構(gòu),嘗試將用戶體驗的研究成果應用到設計中來,為自己的產(chǎn)品提高競爭力;國

37、內(nèi)企業(yè)如華為、中興、騰訊、阿里巴巴、網(wǎng)易、攜程旅行網(wǎng)等大型企業(yè)也在用戶體驗研究中投入了巨大的人力物力。這些企業(yè)從界面、情感、信息架構(gòu)及交互設計角度進行分析,全面探討了用戶體驗的研究范圍和影響因素。隨著情感化設計在產(chǎn)品設計領域的風行,人機界面界面設計不再是外觀的藝術性和信息的簡單呈現(xiàn),自然的人機交互和良好的用戶體驗逐步變成關注的焦點。用戶體驗專家提出應該從品牌、內(nèi)容、功能和可用性這4個用戶體驗影響因素進行衡量。由于用戶體驗的根本目標是提高用戶滿意度,對網(wǎng)站界面用戶體驗的研究應一切以用戶為中心、綜合運用不同學科的知識展開,并以盡可能實現(xiàn)這4個用戶體驗影響因素為目標。（1）根據(jù)心理學理論進行情感體驗

38、設計。在心理方面,完成任務的動機和態(tài)度對完成任務質(zhì)量和效率起著非常關鍵的作用,需要對不同文化背景不同環(huán)境因素下的用戶的上網(wǎng)目的、行為習慣和心理反應進行分析,研究如何讓用戶更方便快捷地獲取相關信息、簡單高效地完成任務,不斷提高網(wǎng)站的情感體驗,讓用戶感到舒適、友好、可靠,實現(xiàn)網(wǎng)站可用性和功能性目標。在心理方面,用戶使用網(wǎng)站時會有一定的忍耐限度,因此需關注頁面加載速度,盡量確保頁面在5 s內(nèi)打開,并加快反饋時間。為避免用戶產(chǎn)生受挫感,應減小使用難度,簡化操作流程,提供必要的反饋,提高交互的流暢性,減少用戶的記憶負擔,保持界面一致性!為原則指導可用性的設計。（2）結(jié)合心理學和美學理論進行感官體驗設計。

39、運用美學中色彩、空間布局、視覺中心等方面的原理,結(jié)合網(wǎng)站的具體性能需求展開界面的藝術性設計。通過合理運用圖形、色彩等設計元素,以及平衡、呼應、對比、疏密等平面設計手段,不但可以增強界面的視覺藝術效果,還可以有效引導用戶的視覺焦點,清晰展示信息的主次層次及任務流程的先后順序,幫助用戶在愉悅的視覺聽覺環(huán)境中完成目標,讓用戶心理上的可控制需求得到滿足。用戶進入網(wǎng)站后對網(wǎng)站產(chǎn)生的第一印象為網(wǎng)站首頁的視覺效果。它可以給瀏覽者一個概念或一種印象,這種印象有時候是致命!的。越是與人對周圍環(huán)境視覺習慣概念、經(jīng)驗感受相一致,越是符合人的審美意識,越能激起人們的直覺審美認同,就越能產(chǎn)生審美快感。簡潔美觀充滿親和力

40、的首頁,能從審美角度滿足人類最基本也最強烈的生理需求,使用戶在一開始使用時就產(chǎn)生審美愉悅,從心理上提高用戶的滿意度,同時也增強了用戶愿意學習并使用的心理暗示,在一定程度上提高了用戶的可用性。（3）結(jié)合心理學和交互設計學理論進行交互、瀏覽體驗設計。以web2. 0相關技術如分類標簽、引用等為輔助手段,研究如何增強網(wǎng)站的趣味性和交互友好性。心流理論強調(diào)用興奮感和成就感來增強用戶駕馭網(wǎng)站的自信心,將工作任務當作一種愉悅的享受,提高完成任務的效率。激發(fā)用戶產(chǎn)生興奮感和成就感的具體手段包括提供一些創(chuàng)造性的個性化服務,例如火狐瀏覽器網(wǎng)頁切換時的立體視覺效果、flickr隨心的功能排放、delicio. u

41、s的右鍵提交等。3.2人機界面的信息設計（強調(diào)視覺）由于不同類型的網(wǎng)站對網(wǎng)站功能和界面風格以及用戶體驗要求都有所不同,后面的設計與開發(fā)都要緊緊圍繞網(wǎng)站目標和目標用戶需求進行,確定合適的設計元素類型和原則。在可用性方面,電子商務網(wǎng)站在保證用戶高效完成購買任務的基礎上,還應給予用戶充分的控制權和信任感 3;信息網(wǎng)站則側(cè)重于搜索的便捷性和信息呈現(xiàn)的清晰性。針對目標用戶年齡、性別、個人文化水平方面的不同,對網(wǎng)站的風格設計和可用性要求也不同,例如:以青年人為目標用戶的娛樂網(wǎng)站要求設計個性張揚,色彩濃烈;女性化妝品網(wǎng)站要求色彩柔和;大學生則傾向于交互性強、自由個性的風格3.3人機界面的視覺設計界面視覺設計

42、對用戶體驗的要求是綜合運用色彩、圖片、按鈕、線條、邊框、文字等設計元素把網(wǎng)頁要傳達的信息通過藝術的形式展示出來,形成網(wǎng)站的特定風格。這一階段應注重藝術性和可用性的結(jié)合,核心原則如下:（1）品牌一致性。整站的風格應保持簡潔和一致性,增強網(wǎng)頁的可記憶性和學習性。主色調(diào)要與品牌整體形象相統(tǒng)一,以恰當?shù)纳拭鞫群土炼?確保瀏覽者的瀏覽舒適度。（2）圖形的可學習性。采用用戶熟悉的事務圖形做圖標,增強網(wǎng)頁的可學習性。（3）各種元素的藝術性處理。利用文字行距加強版式的裝飾效果,加寬行距可以體現(xiàn)輕松、舒展的情緒,而寬、窄行距并存,可增強版面的空間層次與彈性。根據(jù)以上這一些核心設計原則我們在網(wǎng)頁設計中還應該注意

43、到以下這些方面：（1）布局的藝術性。運用美學構(gòu)圖中的形式美規(guī)律對稱、平衡、黃金分割、對比、多樣統(tǒng)一、變化!,結(jié)合光影、色彩、影調(diào)等輔助手段,對網(wǎng)頁設計元素及內(nèi)容進行合理布局,使網(wǎng)頁形式富有節(jié)奏感并且圖文并茂。如果網(wǎng)頁只有多樣變化,沒有和諧統(tǒng)一,就會顯得紛繁雜亂;如果只有和諧與統(tǒng)一,沒有多樣變化,就顯得呆板單調(diào)。只有各獨立的差異因素在藝術組合建構(gòu)中,不僅有外在關系的差異,而且有一定內(nèi)在聯(lián)系,構(gòu)成統(tǒng)一整體,才能具有賞心悅目的審美效果。（2）重要內(nèi)容的突出性。根據(jù)視覺流程原理,采用容易掃視的方法安排整體版面,把重要內(nèi)容和功能放在醒目位置。針對國內(nèi)網(wǎng)站,醒目位置包括由九宮格!法 3確定的中間位置和根據(jù)

44、國內(nèi)用戶從上往下、從左向右的視覺瀏覽習慣確定的頁面上部和中上部。網(wǎng)站公告以及一些關系可用性的關鍵要素如全局導航、輔助導航以及一些常用輔助功能的快捷方式應放在頁面頂部。對于擁有海量信息的網(wǎng)站,首頁盡量不超過3屏,將目標用戶最感興趣的且與網(wǎng)站的營銷目標最符合的信息放在首頁首屏之內(nèi),其他次要信息可通過合理分類僅在首頁提供類別入口, 例如淘寶網(wǎng)首頁的分類列表。（3）信息瀏覽的便捷性。由于網(wǎng)頁的信息主體為文字,通過大小、色彩、位置等調(diào)整和圖片圖標線條等元素,對重點文字信息進行強調(diào),能幫助用戶快速閱讀。具體包括:加粗段落標題以區(qū)別于內(nèi)文;采用易于閱讀的字體,避免文字過小或過密造成的閱讀障礙;對字體進行大中

45、小設置,以滿足不同的瀏覽習慣;對于長篇文章進行分頁瀏覽,避免頁面過長而影響閱讀;為新文章提供標識(如new圖標),吸引瀏覽者查看;為重要內(nèi)容在首頁設立導讀,使得瀏覽者可以了解大概信息（4）表單操作的友好性。表單的布局可利用視覺流程的相關研究來提高可用性。表單元素對應的標簽與其垂直對齊能提高可讀性;為減少操作時間,增加表單的效率性,盡量采用下拉框而不是輸入框,并在頁面出錯后能保存已輸入的信息,避免重復輸入信息;對必需字段及其限制做出標注(如手機位數(shù)、數(shù)據(jù)類型等等,避免無效信息);交互性的按鈕必須清晰突出第四章以人性化為主旨的交互設計的5樣產(chǎn)品4.1浙江大學城市學院俗話說：學以致用。作為學院的一份

46、子，我就先將學校的這個門戶網(wǎng)站來進行解析一下。（1）網(wǎng)站主題既然是學校網(wǎng)站，他的最主要作用是宣揚我們學校形象。也就是對社會上公布我們學校最近的近況，引起社會關注，令我們的學校在社會中擁有好的影響力。換句話說，它的服務人群一部分是社會上的群眾，記者等，另外一部分也是我們學生的家長。這些用戶的特點都是希望了解學校最進什么內(nèi)容，所以在設計時應該在正文中對學校狀狂多加描述，這是網(wǎng)站的任務之一。網(wǎng)站的設計就是要營造出一種濃郁的學院氣氛，僅從網(wǎng)站外表看上去，就要知道我們學校雖然不是一所一流大學，但是是在朝這個目標前進的。總而言之，網(wǎng)站就是向這些關心學校的用戶群體提供學校的內(nèi)容，展示學校良好形象。（2）排版

47、1）間距進行大致區(qū)分一下，這個網(wǎng)站的主要版塊就是兩塊，一塊是上面的圖畫，另一塊就是正文的內(nèi)容。然后，通過的中間的導航儀進行分離。兩者之間的距離通過導航目錄完美地分來了，然后針對導航目錄中的間距而言，每個條目之間大約空余了兩個字的間距。從整行的字體數(shù)量來考慮的話，其實是略顯多的，有52個字，幸好是字體較小才沒有帶來比較擁擠的感覺。但因為字體大小的原因，每個字體之間的間距就顯得有些窄，畢竟你要是太寬的話就感覺正文有點空泛了。并且每行之間的間距也不太大，總之一眼看去正文給人的感覺有點不太顯大氣。但總的來說間距還是比較適宜的，沒用影響用戶的可讀性。2）字體針對字體型式而言，采用的是標準的宋體，畢竟學校

48、展示出來的不能像一些娛樂網(wǎng)站一樣用一下特殊的藝術體來進行表述內(nèi)容。而簡明干練的宋體字可以說符合學校的形象3）窗口排布一眼看上去顯而易見可以明顯區(qū)分出來三個窗口，一個是最上面的圖片，然后是下面左邊的內(nèi)容展現(xiàn)，最后是右邊的正文內(nèi)容。概括起來就是上下規(guī)劃加上左右規(guī)劃，是非常常見的布局?？傊谎劭瓷先タ梢哉f是井然有序的，沒有讓人感覺到排版很混亂。對于內(nèi)容窗口的展示，網(wǎng)站設計者采用的是一個窗口搭配幾個目錄進行設計，相對于一個大窗口帶上若干個小窗口的設計，顯得比較簡潔，唯一設計的問題就是目錄的擺放位置放在圖片上方，令用戶可能有些不習慣。這個可以改下。4）元素搭配對于文字前面已經(jīng)說過了，圖片則后面再說。對于

49、超鏈接而言，如下圖所示 這是這個網(wǎng)站的超鏈接，只是較為簡單的將字體的顏色進行改變了下，對于一個學校網(wǎng)站來說，的確也可以了，不需要像一些娛樂網(wǎng)站搞的非常炫目的。此外這個網(wǎng)站的部分留白還是不錯的，通過這些白色令頁面看上去簡潔多了。（3）顏色搭配首先明確的就是這事一個學校網(wǎng)站，它需要紅綠藍的顏色使網(wǎng)站看上去非常絢麗的，這樣子顏色起到的就是反效果了，網(wǎng)站采用是以白色為底，藍色為導航目錄框，紅色大標題，黑色字的搭配?？偨Y(jié)來說，就是把每個顏色各自的作用表現(xiàn)出來。白底黑字是最常見的搭配，是用戶可以清晰地瀏覽內(nèi)容，藍色代表的是活力，冷靜，城市信賴的含義，而這種活力藍則避免頁面充滿了死氣沉沉的感覺，帶來用戶一抹

50、明亮的心情，紅色大標題第一時間抓住用戶們的眼球，讓人可以在第一時間關注到今日的重要新聞。由此看來，設計者在顏色運用上是非常不錯的。（4）圖片放眼望去，圖片一共也就兩張，可是說采用的方形格式的擺放。第一張是占了全屏內(nèi)容一半的學校展校景圖，放在了網(wǎng)頁的正上方?？梢哉f，這幅圖片在第一時間內(nèi)吸引了用戶的眼光，給大家展現(xiàn)出來了學校的良好學習環(huán)境。另外一幅是占了網(wǎng)站四分之一的內(nèi)容的新聞畫面,放在了下面的左邊，可以方便用戶們迅速地獲取他們想要的信息。4.2網(wǎng)易新聞網(wǎng)如下圖所示網(wǎng)易新聞網(wǎng)這個是網(wǎng)易的新聞網(wǎng)站，可以說這是我做這篇論文來所有 看過的網(wǎng)站做的最好的網(wǎng)站之一了。接下來我以上面講的幾個方面進行解析這個網(wǎng)

51、站。（1）網(wǎng)站主題一眼看去，瀏覽者可以輕松地發(fā)現(xiàn)這是一個上面類型的網(wǎng)站，這至少說明了一點，網(wǎng)站設計者明確自己是去做新聞網(wǎng)站，他所服務的客戶群體是獲取新聞的人，是那些空暇之余看新聞的人群，所以他的發(fā)展方向就是給這個最大的用戶群體提供瀏覽網(wǎng)頁的最大便利。那么這是這個網(wǎng)站最基本的內(nèi)容，也是每個網(wǎng)站設計者所需要明確的。（2）排版1）間距由于每臺電腦屏幕有限，那么你對你安排的內(nèi)容就要進行有效的規(guī)劃，既不能給人產(chǎn)生一種極其空洞的感覺，又要防止一堆琳瑯滿目的信息讓用戶眼花繚亂。這時候你需要做的第一點就是控制好各個版面之間的間距和版面內(nèi)各個內(nèi)容之間的距離。進行大致區(qū)分，這個網(wǎng)頁可以分為3塊版面。第一塊是最上面

52、的網(wǎng)易的導航目錄，然后在下面是網(wǎng)易新聞的導航目錄，最后面試網(wǎng)易今日的新聞要點。這是大的分欄。對于這3塊版面，第一個導航目錄和第二個導航目錄采用的是用圖片進行分離。由鮮艷的圖片給人以強烈的視覺沖擊，可以令用戶不自覺地就將這兩塊內(nèi)容進行區(qū)分開來。至于第三塊和第二塊的內(nèi)容同屬于新聞，所以可以很自然將它延續(xù)在了下面，方便用戶進行掃視型的瀏覽。對于正文中字體間的距離，設計者在文本字體的基礎上，空余出了0.5倍字高的行距，這樣子給人的感覺就是非常簡潔的。2）字體對于字體來說，由于這是一個新聞網(wǎng)站，它給人的風格應該是非常嚴肅的，因此設計中就不應該采用一些花俏的字體和一些兒大小不同的字體尺寸，所以網(wǎng)頁中各個版

53、塊的內(nèi)容采用的都是非常標準的宋體，對于今日的重要消息，則一律采用了小四加粗的方案，而對于普通新聞標題采用的是則是正常的五號字體。這種字體一眼看上去則給人傳出來一種不帶一絲感情的感覺，正是符合新聞的公正，公開的風格。且各個同等級的標題采用的是同一大小的字體，給人以一種整齊統(tǒng)一的協(xié)調(diào)性。最后整個頁面看上去給人的第一感覺就是整齊，簡潔。作為一個新聞網(wǎng)站，其無疑成功的。3）窗口排布這個網(wǎng)頁頁面在總規(guī)劃上采用的第一步是上下規(guī)劃的分局，然后在下面局部采用的是左右規(guī)劃的分局。然后采用了一個主窗口進行圖片展示。對于一個新聞網(wǎng)站來說，一個展示新聞圖片的窗口也是可以的。當然，如果可以在主窗口邊上再加上4個左右的小

54、窗口的話就顯得比較好了，畢竟這樣子無論如何也不會漏掉今日大多數(shù)人關注的重要信息了。4）元素搭配這個網(wǎng)站包含的也就是圖片，文字，超級鏈接三部分。對于文字和圖片前面已經(jīng)略微介紹過了，至于超鏈接則可以通過下面這幅小圖展現(xiàn)出來圖超鏈接展示非常簡潔的一種超鏈接設計，只是將顏色進行了改變，同時會有輕微的凹下去的感覺，但是使用者卻已經(jīng)知道了這地方有個超鏈接了。這個網(wǎng)站做的還有一點非常好，那就是進行了部分的留白。由于其有部分的空白區(qū)域，合理地分開了各個版塊之間的內(nèi)容，使得整個頁面看上去非常整齊并且精致。（3）顏色搭配作為一個新聞網(wǎng)站，它對色彩的要求是不需要花俏的，新聞的特征是公正嚴謹，而黑色擁有崇高，嚴肅的含

55、義，而白色代表的是純真和神圣，從這幾點上看來，其都符合新聞的含義此外，黑白搭配的感覺是可以比任何集中顏色搭配相比帶給人以一種強烈的視覺沖擊，因為這是兩種完全相反的顏色。網(wǎng)站設計者以白色為頁面背景，以黑色為文本文字，就給人傳達了一種情感-我們新聞是真實的，是準確的，報導是嚴謹?shù)?，不會有一絲的歪曲。這幾點都會新聞報導必須擁有的。一個好的網(wǎng)站不可能讓一個頁面中出現(xiàn)在太多顏色，一般以3種顏色為主。這個網(wǎng)站除了主色調(diào)，只有兩個微小的局域部分采用的是藍色（針對圖片的顏色和網(wǎng)易名字的顏色不在考慮范圍之內(nèi)），這種微小的點綴作用可以給人在沉默中帶來一絲明亮。不可忽略的是，藍色代表的含義是理性，是信用，是冷靜，這

56、幾點含義也有助于瀏覽者在看新聞報導時的情感。從總的來說，這個網(wǎng)站在顏色搭配上還是做得不錯的，沒有出現(xiàn)顏色含義與新聞特點不相符合的情況，也沒有大量的花邊顏色進行混淆瀏覽者的視線，由于其良好的搭配，給網(wǎng)頁增色不少。（4）圖片網(wǎng)站內(nèi)圖片數(shù)量上將還是很少的，除了一張今日重要新聞的圖片，也就在第一個導航目錄和第二個導航目錄之間插了一副廣告圖片，從一個網(wǎng)站經(jīng)營者角度來看，倒也無可厚非。在面積上來考慮，所占也不大。兩張圖片中，第一個廣告圖片對于網(wǎng)站毫無用處，自然不能將其作為重點，因此給予它的面積是較小的，畢竟你大了，用戶不滿意啊。至于其的擺放方式采用方形形式，在方向上從左到右，依次擺放了3張圖片合并為一張，

57、秩序上還是不錯的。中間的新聞圖片所占地方實在是好，基本上可以在第一時間內(nèi)吸引到瀏覽者的視線，作為今日最重要的圖片，倒也應該是應該的。對于圖片來說，網(wǎng)站設計者對其的處理的還算是不錯的。廣告圖片不多，不會引起用戶的反感，新聞圖片顯少，讓人還需要通過文字來進行尋找信息，畢竟文字表達能力是大于文字的?？偟膩碚f是不太完美的。4.3dota視頻網(wǎng)雖然很不好意思將這個游戲的網(wǎng)站放上去，但我再看了許多做視頻的網(wǎng)站之后，不得不承認這個網(wǎng)站在許多做視頻之中做的比較好的。優(yōu)酷網(wǎng)的背景顏色搭配不協(xié)調(diào)，并且視頻位置排版實在是講不上好；奇藝網(wǎng)的設計比較新穎，但視頻導航儀放的位置卡在了圖片的中間，不好；土豆網(wǎng)排版做的倒是的確不錯，但是背景與導航儀的顏色和留白幾方面做的不太好，讓人一眼看上去有點空，而不是簡潔。我只看了這幾個視頻網(wǎng)站的大家，其他就不注意了。接下去忽略網(wǎng)站本身的內(nèi)容是什么來進行解