網(wǎng)站導(dǎo)航設(shè)計(jì)特點(diǎn)研究.doc

論網(wǎng)頁界面設(shè)計(jì)的規(guī)范鄭州輕院輕工職業(yè)學(xué)院?？飘厴I(yè)設(shè)計(jì)（論文） 題 目 論網(wǎng)頁界面設(shè)計(jì)的規(guī)范 學(xué)生姓名 高美 專業(yè)班級(jí) 電腦藝術(shù)設(shè)計(jì)2班 學(xué) 號(hào) 06010701024 系 別 06 級(jí) 指導(dǎo)教師(職稱) 王俊波（講師） 完成時(shí)間 2012 年 4 月 15 日 論網(wǎng)頁界面設(shè)計(jì)的規(guī)范摘 要網(wǎng)站設(shè)計(jì)是一門新興的邊緣性職業(yè)，既要從外觀上進(jìn)行創(chuàng)意，又要結(jié)合圖形和版面設(shè)計(jì)，交互設(shè)計(jì)等諸多相關(guān)原理，這使得網(wǎng)站設(shè)計(jì)變成了一門獨(dú)特的藝術(shù)。良好的網(wǎng)站設(shè)計(jì)能使網(wǎng)站在同類站點(diǎn)中獨(dú)具特色，優(yōu)秀的創(chuàng)意和表現(xiàn)方式能給瀏覽者留下深刻的印象，使網(wǎng)站訪問流量增加甚至直接增加網(wǎng)站收入。因此，在設(shè)計(jì)的初始階段就規(guī)劃好網(wǎng)站的設(shè)計(jì)步驟是非常重要的。理解并遵循網(wǎng)頁設(shè)計(jì)的規(guī)范是網(wǎng)頁界面設(shè)計(jì)的基礎(chǔ)，網(wǎng)頁設(shè)計(jì)的規(guī)范在行業(yè)中通常被稱為設(shè)計(jì)的“一貫性”。一個(gè)優(yōu)秀的、有經(jīng)驗(yàn)的設(shè)計(jì)師能把網(wǎng)頁設(shè)計(jì)的基本規(guī)范自然而本能地融入作品中。在顯示器的方寸顯示空間里，用戶需要以被限定的分辨率來瀏覽頁面、以鍵盤和鼠標(biāo)來交互控制界面、繼而在有限的網(wǎng)絡(luò)傳輸速度下一個(gè)個(gè)層級(jí)地瀏覽整個(gè)站點(diǎn)，可想而知其中有多少要素需要規(guī)范化。關(guān)鍵詞 網(wǎng)頁/界面/設(shè)計(jì)/規(guī)范ON THE WEB INTERFACE DESIGNSPECIFICATIONABSTRACTWeb site design is the edge of a new job, not only from the appearance on creativity, but also combination of graphics and layout design, interaction design, and many other related principle, which makes web site design has become a unique art. Good website design make web site in the same unique, outstanding creativity and expression to give visitors impressed, so that even an increase website traffic increase website revenue directly. Therefore, the initial stage in the design of a good site on the planning steps of the design is very important. Understand and adhere to the norms of web design is the basis of web interface design, web page design specifications in the industry in design, often referred to as the consistency. An excellent and experienced website designers can design the basic norms of natural and instinctively into the works. The confusion shows in the display space, the user needs to be limited to browse page resolution to the keyboard and mouse to control the interactive interface, and then limited the speed of network transmission of the next level to browse the entire site, which can be imagined the need for standardization of the number of elements.KEY WORDS Web page ,interface ,design ,specification目 錄 中文摘要 1 英文摘要 21 網(wǎng)站界面設(shè)計(jì)的重點(diǎn) 4 2 界面設(shè)計(jì)需規(guī)范的要素 6 3 如何進(jìn)行界面的設(shè)計(jì) 6 3.1 遵循簡潔為美原則 6 3.2 重視交互性和用戶體驗(yàn) 74 網(wǎng)頁界面設(shè)計(jì)風(fēng)格三要素的應(yīng)用8 4.1 協(xié)調(diào)運(yùn)用顏色 8 4.2 適當(dāng)選擇線條和形狀 8 4.3 均衡的分割版式 9結(jié)束語 10致謝 11參考文獻(xiàn) 121 網(wǎng)站界面設(shè)計(jì)的重點(diǎn) 如何搭建完整的網(wǎng)站架構(gòu)并設(shè)計(jì)出一個(gè)出色的網(wǎng)站？關(guān)于這個(gè)問題，我們很難提出一個(gè)絕對(duì)權(quán)威和正確的設(shè)計(jì)思路，但任何網(wǎng)站的設(shè)計(jì)都需要遵循一個(gè)循序漸進(jìn)的步驟。因此，在設(shè)計(jì)的初始階段就規(guī)劃好網(wǎng)站的設(shè)計(jì)步驟是非常重要的，我們從以下四個(gè)方面來了解一下網(wǎng)站界面設(shè)計(jì)中的重點(diǎn)。1、 網(wǎng)站設(shè)計(jì)，不僅僅是美術(shù)設(shè)計(jì)。 你的工作究竟屬于設(shè)計(jì)師還是美工？那得看你做的活是真正的設(shè)計(jì)，還是點(diǎn)綴頁面使之更好看的操作。設(shè)計(jì)師的工作是高屋建瓴的，而美工只是軟件工具的使用者。很多人把在網(wǎng)站中的設(shè)計(jì)定義為美術(shù)設(shè)計(jì)，認(rèn)為設(shè)計(jì)師的工作任務(wù)就是使Photoshop一類的繪圖軟件把需要展示的頁面畫出來，其實(shí)這是很狹義的理解。合格的設(shè)計(jì)師應(yīng)該立足于整個(gè)網(wǎng)站的全局，在規(guī)劃上對(duì)整個(gè)網(wǎng)站進(jìn)行完整的設(shè)計(jì)，在宏觀上把握設(shè)計(jì)風(fēng)格導(dǎo)向，微觀上再針對(duì)該網(wǎng)站的具體定位來決定如何對(duì)設(shè)計(jì)進(jìn)行元素上的細(xì)化。 二、設(shè)計(jì)人員在需求階段介入，影響需求，而不干預(yù)需求。我們常聽到有設(shè)計(jì)師抱怨：“這個(gè)設(shè)計(jì)讓我改了十多遍怎么還不能定稿？”，也常聽到產(chǎn)品經(jīng)理說：“這個(gè)設(shè)計(jì)師怎么就是把握不住要點(diǎn)？”不論設(shè)計(jì)在網(wǎng)站的實(shí)現(xiàn)過程中有多么重要，網(wǎng)站該是什么模樣，還是必須由需求決定。所以網(wǎng)站項(xiàng)目的前期需求是至關(guān)重要的環(huán)節(jié)，也可以理解成房屋建筑的地基。需求也許是經(jīng)過若干調(diào)查，將結(jié)果匯總后產(chǎn)生的報(bào)告，也可能是領(lǐng)導(dǎo)或老板的一時(shí)沖動(dòng)而引發(fā)的大討論。在需求的確立過程中，遺憾的是，網(wǎng)站設(shè)計(jì)人員的分量是極其有限的，產(chǎn)品經(jīng)理、頻道主管、某級(jí)領(lǐng)導(dǎo)的想法往往直接決定著需求的最終形態(tài)。但是設(shè)計(jì)人員在需求階段的介入還是很有必要的，設(shè)計(jì)師能以自己專業(yè)獨(dú)到的眼光，提出科學(xué)合理的建議，影響需求的細(xì)節(jié)。這樣做的結(jié)果是能在最大限度上取得需求方和設(shè)計(jì)方的思想一致，而不至于在設(shè)計(jì)過程中面對(duì)著有意見卻不讓更改的需求問題而大發(fā)牢騷。3、 學(xué)會(huì)掌控用戶路徑 用戶從哪個(gè)頁面來？他最有可能點(diǎn)哪個(gè)鏈接或者按鈕？他使用了搜索框嗎？他下一頁去哪里？最后哪個(gè)頁面會(huì)被他打印輸出？站在整個(gè)網(wǎng)站的角度出發(fā)，這些流程也許只是產(chǎn)品經(jīng)理需要把握的，設(shè)計(jì)師拿到UE圖只管一個(gè)接一個(gè)繪制頁面就行。其實(shí)不然，好的設(shè)計(jì)師往往能承擔(dān)一部分產(chǎn)品經(jīng)理的職責(zé)，設(shè)計(jì)出一個(gè)典型的用戶路徑，這對(duì)網(wǎng)站頁面流程有著很大的影響。頁面和頁面之間有很多關(guān)聯(lián)，成片的超鏈接把流程頁面和外部頁面混亂地串在一起，區(qū)域A的文字鏈接要鏈到頁面2，區(qū)域B的圖片鏈接是指向頁面3，側(cè)邊的一個(gè)位置顯著的大按鈕其實(shí)是鏈接到網(wǎng)站X頁面和頁面之間也是有繼承關(guān)系的，繼承的過程要讓用戶覺得理所當(dāng)然，在視覺上實(shí)現(xiàn)平滑過渡，這就是設(shè)計(jì)師要考慮的具體問題。從一個(gè)頁面到另一個(gè)頁面的路徑組成里，哪些模塊要原樣保留，哪些控件要發(fā)生變化？頁面結(jié)構(gòu)是否可以變動(dòng)，頁面色彩是否可以更換？這些都是需要參照用戶路徑進(jìn)行設(shè)計(jì)的地方。把自己想象成為一個(gè)普通用戶，一頁一頁地點(diǎn)進(jìn)來，你就能明白用戶需要的是什么樣的合理設(shè)計(jì)。4、 初步實(shí)現(xiàn)UE產(chǎn)品模型，并審核設(shè)計(jì)師需要以什么作為參考來進(jìn)行頁面設(shè)計(jì)？所有的元素和流程都在腦子里，這個(gè)時(shí)候設(shè)計(jì)師需要稍加整理把它們簡要地畫出來，畫出線框和注釋就可以了。我們可以把UE模型理解為設(shè)計(jì)草圖，在UE階段，設(shè)計(jì)師主要根據(jù)用戶路徑得來的線索，加上對(duì)用戶交互習(xí)慣的探索，進(jìn)而整理出一個(gè)大概的模型框架。這個(gè)框架里，要明確畫出有幾個(gè)關(guān)鍵頁面，每個(gè)關(guān)鍵頁面的關(guān)鍵元素和模塊有哪些，這些關(guān)鍵元素和模塊哪些是必須以某種特定位置排列或者是務(wù)必要強(qiáng)調(diào)突出的。其中，網(wǎng)站的首頁、最終頁面是最重要的兩級(jí)頁面，首頁會(huì)是用戶使用網(wǎng)站的第一站，在首頁的體驗(yàn)好壞，直接決定著他的去留；而最終頁面是用戶想要獲得信息的具體頁面，他會(huì)在這個(gè)頁面停留最久，可能會(huì)進(jìn)行仔細(xì)的閱讀，或是打印出這一頁備用。通常在繪制完UE模型之后，會(huì)有一個(gè)開發(fā)小組來討論并且審核這個(gè)模型，這時(shí)候就需要著重確定首頁和最終頁的大概模樣，每個(gè)討論參與者對(duì)此都很關(guān)心。UE模型的繪制我們可以參考如圖的某商城的UE圖。UE模型通過之后，傳統(tǒng)意義的設(shè)計(jì)終于派上用場，要進(jìn)行具體的頁面設(shè)計(jì)了。2 界面設(shè)計(jì)需規(guī)范的要素理解并遵循網(wǎng)頁設(shè)計(jì)的規(guī)范是網(wǎng)頁界面設(shè)計(jì)的基礎(chǔ)，網(wǎng)頁設(shè)計(jì)的規(guī)范在行業(yè)中通常被稱為設(shè)計(jì)的“一貫性”。一個(gè)優(yōu)秀的、有經(jīng)驗(yàn)的設(shè)計(jì)師能把網(wǎng)頁設(shè)計(jì)的基本規(guī)范自然而本能地融入作品中。在顯示器的方寸顯示空間里，用戶需要以被限定的分辨率來瀏覽頁面、以鍵盤和鼠標(biāo)來交互控制界面、繼而在有限的網(wǎng)絡(luò)傳輸速度下一個(gè)個(gè)層級(jí)地瀏覽整個(gè)站點(diǎn)，可想而知其中有多少要素需要規(guī)范化。形象標(biāo)志(LOGO)、導(dǎo)航、搜索、內(nèi)容區(qū)塊、頁面長度、字體字號(hào)等元素是這些規(guī)范中至關(guān)重要的部分。這些元素中大部分都表現(xiàn)在網(wǎng)站的頭部或者是第一屏能顯示的區(qū)域內(nèi)：一般的網(wǎng)站通常會(huì)在頭部顯著位置顯示網(wǎng)站LOGO，以合理的層級(jí)關(guān)系及最普通的字體字號(hào)來展現(xiàn)導(dǎo)航以及設(shè)計(jì)合理的搜索功能塊。在這里我們需要注意的是除非非常必要，網(wǎng)站的LOGO盡量不要以flash動(dòng)畫展示，同時(shí)導(dǎo)航也盡量不要以flash動(dòng)畫或圖片來表現(xiàn)，因?yàn)闉g覽器有攔截flash的可能；同時(shí)，不同終端設(shè)備上瀏覽器對(duì)flash和圖片的不支持也可能造成網(wǎng)站無法繼續(xù)訪問或者根本無法識(shí)別。除此之外，網(wǎng)站的各內(nèi)容區(qū)塊應(yīng)切割明顯，讓用戶能很容易地判斷內(nèi)容塊的起始。如果不是門戶類型網(wǎng)站，網(wǎng)站頁面長度盡量不要超過三屏（因?yàn)椴煌@示器分辨率參數(shù)不同，三屏的說法不一定適用于所有設(shè)計(jì)），即不要讓用戶在同一頁面上過多滾動(dòng)鼠標(biāo)滾輪。中文網(wǎng)站設(shè)計(jì)時(shí)應(yīng)注意內(nèi)容區(qū)域文字盡量使用12像素、14像素等偶數(shù)字號(hào)，以準(zhǔn)確表達(dá)中文字體的整齊切割，正文漢字部分應(yīng)嚴(yán)格使用宋體，保證用戶最好的閱讀感受。標(biāo)題部分可以稍微增大字號(hào)，頁面上除裝飾性圖片或廣告之外的地方最多使用兩種字體。3 如何進(jìn)行界面的設(shè)計(jì)3.1 遵循簡潔為美原則網(wǎng)頁設(shè)計(jì)不是僅僅使用戶在顯示器上看到漂亮的裝飾性畫面那么簡單。比起華麗的畫面裝飾，網(wǎng)頁設(shè)計(jì)應(yīng)該在更有效地傳達(dá)信息方面多下些工夫。這必須有對(duì)布局設(shè)計(jì)和色彩的正確理解和相關(guān)知識(shí)，要熟知網(wǎng)頁物理系統(tǒng)的特性，并具備應(yīng)對(duì)各種情況的能力。在具備人性化界面的網(wǎng)站設(shè)計(jì)中，我們不難發(fā)現(xiàn)其表現(xiàn)出來的功能性和自然美。多數(shù)設(shè)計(jì)得比較好的網(wǎng)站，都考慮了多媒體的特性，色彩設(shè)計(jì)和信息按照一定秩序排列，能更有效地向用戶傳達(dá)內(nèi)容。很多設(shè)計(jì)師認(rèn)為畫出美妙絕倫的頁面才是設(shè)計(jì)，其實(shí)不然，要在有限的元素和色彩里表達(dá)出風(fēng)格才是更有難度也更有層次的設(shè)計(jì)。經(jīng)過嚴(yán)謹(jǐn)?shù)乃伎己吐L的推敲，最終只花幾分鐘為頁面畫下一個(gè)簡單的圓角框或者一條兩像素的實(shí)線，其效果也許比涂滿了色彩和組合了數(shù)十個(gè)分層的畫面更好。設(shè)計(jì)最終將上升到思想的層面，而不是僅僅停留在工具和素材的使用。簡單就是美的設(shè)計(jì)理念使得Web設(shè)計(jì)中的簡約風(fēng)格意向逐步明朗，在體驗(yàn)了復(fù)雜煩瑣的顏色和圖片堆砌之后，主流設(shè)計(jì)開始返璞歸真。畢竟網(wǎng)站是給用戶使用的，而不是光用來看的，簡約的設(shè)計(jì)能給人以輕松的視覺體驗(yàn)，更好的突出網(wǎng)站功能主題，更適用于網(wǎng)站文字內(nèi)容的資料表達(dá)。3.2 重視交互性和用戶體驗(yàn)在界面設(shè)計(jì)方面，很重要的一點(diǎn)就是要站在用戶的立場去進(jìn)行設(shè)計(jì)。如果網(wǎng)站的畫面既不美觀大方，使用起來也不方便，那么這個(gè)網(wǎng)頁的界面設(shè)計(jì)是失敗的。既能給用戶帶來方便，又兼?zhèn)湟曈X的沖擊力的網(wǎng)頁界面設(shè)計(jì)，才是每個(gè)網(wǎng)頁設(shè)計(jì)人員應(yīng)該思考并追求的東西。在網(wǎng)頁界面設(shè)計(jì)方面，設(shè)計(jì)師尤其應(yīng)該考慮使用的便利性和視覺效果這兩方面的問題。在使用方法方面，可能的話應(yīng)該遵循網(wǎng)站設(shè)計(jì)的普遍規(guī)律，界面的構(gòu)成不能太復(fù)雜，主要內(nèi)容應(yīng)該設(shè)計(jì)在引人注目的地方，所有操作性按鈕位置應(yīng)該科學(xué)，讓用戶容易適應(yīng)；同時(shí)，要考慮符合網(wǎng)站主體的色彩系統(tǒng)，去除不必要的內(nèi)容，把信息塊分類設(shè)計(jì)得成體系，讓用戶很容易就能找到想要的內(nèi)容。如果不是追求藝術(shù)美感和試驗(yàn)性的特殊網(wǎng)站，無論設(shè)計(jì)師想表達(dá)的東西是多么新穎多么富有創(chuàng)意，假如把網(wǎng)站頭部設(shè)計(jì)得很復(fù)雜很難以理解，進(jìn)而影響了用戶的操作，那么它就很難成為一個(gè)優(yōu)秀的網(wǎng)站。4 網(wǎng)頁界面設(shè)計(jì)風(fēng)格三要素的應(yīng)用4.1 協(xié)調(diào)運(yùn)用顏色不同的色彩影響著人們對(duì)網(wǎng)站的第一感覺，紅色系象征著激烈、興奮，灰色系象征著平淡和低調(diào)。因此，旅游和園林類型的網(wǎng)站使用綠色系比較多，藍(lán)色則被譽(yù)為是企業(yè)色確實(shí)很多企業(yè)和政府機(jī)關(guān)都偏愛使用沉穩(wěn)而大方的藍(lán)色。另外也有幾種顏色在網(wǎng)頁設(shè)計(jì)中是很少被大面積使用的，比如紫色。一個(gè)網(wǎng)站不可能單一地運(yùn)用一種顏色，這會(huì)讓人感覺單調(diào)，乏味；但也不可能將所有的顏色都運(yùn)用到網(wǎng)站中，給人感覺輕浮、花俏。一個(gè)網(wǎng)站必須有一種或兩種主題色，既不至于讓客戶迷失方向，也不至于單調(diào)、乏味。所以確定網(wǎng)站的主題色也是設(shè)計(jì)者必須考慮的問題之一。通常情況下，一個(gè)頁面內(nèi)盡量不要使用超過4種色彩，太多的色彩容易讓人感覺沒有方向、沒有側(cè)重。當(dāng)主題色確定好以后，考慮其他配色時(shí)，一定要考慮其他配色與主題色的關(guān)系，要體現(xiàn)什么樣的效果；另外還要考慮哪種因素可能占主要地位，是明度、純度還是色相。4.2 適當(dāng)選擇線條和形狀文字、標(biāo)題、圖片等的組合，會(huì)在頁面上形成各種各樣的線條和形狀。這些線條與形狀的組合，構(gòu)成了主頁的總體藝術(shù)效果。必須注意藝術(shù)地搭配好這些線條和形狀，才能增強(qiáng)頁面的藝術(shù)魅力。以下我們來探討一下幾種不同線條和形狀的使用方法。直線（矩形）的應(yīng)用。直線條的藝術(shù)效果是流暢、挺拔、規(guī)矩、整齊的，也就是所謂的有輪有廓。直線和矩形在頁面上的重復(fù)組合可以呈現(xiàn)井井有條、涇渭分明的視覺效果。一般應(yīng)用于比較莊重、嚴(yán)肅的主頁題材。 曲線（弧形）的應(yīng)用。曲線的效果是流動(dòng)、活躍，具有動(dòng)感的，曲線和弧形在頁面上的重復(fù)組合可以呈現(xiàn)流暢、輕快、富有活力的視覺效果。一般應(yīng)用于青春、活潑的主頁題材。 曲、直線（矩形、弧形）的綜合應(yīng)用。把以上兩種線條和形狀結(jié)合起來運(yùn)用，可以大大豐富主頁的表現(xiàn)力，使頁面呈現(xiàn)更加豐富多彩的藝術(shù)效果。這種形式的主頁，適應(yīng)的范圍更大，各種主題的主頁都可以應(yīng)用。但是，在頁面的編排處理上，難度也會(huì)相應(yīng)大一些，處理得不好會(huì)產(chǎn)生凌亂的效果。最簡單的途徑是，在一個(gè)頁面上以一種線條（形狀）為主，只在局部的范圍內(nèi)適當(dāng)用一些其他線條（形狀）。4.3 均衡的分割版式 在網(wǎng)頁設(shè)計(jì)中，頁面因?yàn)閮?nèi)容元素的需要被分割成很多區(qū)塊，區(qū)塊之間的均衡就是版式設(shè)計(jì)上需要著重考慮的問題。均衡并非簡單理性的等量不等形的計(jì)算，一幅好的、均衡的網(wǎng)頁版面設(shè)計(jì)，是布局、重心、對(duì)比等多種形式原理創(chuàng)造性全面應(yīng)用的結(jié)果，是對(duì)設(shè)計(jì)師的藝術(shù)修養(yǎng)、藝術(shù)感受力的一種檢驗(yàn)。在面積對(duì)比強(qiáng)烈(不等形)而又均衡(等量)的設(shè)計(jì)中，我們可以看到對(duì)比法則的成功參與；而在一些對(duì)比不十分強(qiáng)烈、典雅的不對(duì)稱設(shè)計(jì)中，我們則可感受到設(shè)計(jì)者儒雅的學(xué)者風(fēng)范。需要注意的是，傳統(tǒng)網(wǎng)頁設(shè)計(jì)的版式控制都是在不超越大眾顯示器分辨率寬度的前提下，依照內(nèi)容多少縱向延展設(shè)計(jì)。而如今流行的產(chǎn)品型網(wǎng)站，更傾向于在一屏內(nèi)表達(dá)最主要的東西，尤其是首頁，盡量不出現(xiàn)滾動(dòng)條。結(jié)束語設(shè)計(jì)界面所包含的因素是極為廣泛的，但在運(yùn)用中卻只能有側(cè)重、有強(qiáng)調(diào)的把握。設(shè)計(jì)因素雖多，但它仍是一個(gè)不可分割的整體。它的結(jié)果是物化的形，但這個(gè)形卻是代表了時(shí)代、民族等方面的意識(shí)，并最終映出人的“美”的心理活動(dòng)。設(shè)計(jì)界面的運(yùn)用，核心是設(shè)計(jì)分析。在一些國際性的大公司，如索尼、松下、柯尼卡等，都有許多的成功案例可為借鑒。如柯尼卡公司設(shè)計(jì)其相機(jī)時(shí)，首先不是去繪制“美”的形和考慮技術(shù)的進(jìn)步，而是進(jìn)行對(duì)象人的日常行為分析，作出故事版(STORY)。它先假定對(duì)象人的年齡為35歲，名：Xxxx，從而分析他的家庭、喜好與憎惡，分析他的日常行為，進(jìn)而考察其人在什么場合需要僚機(jī)，從而為設(shè)計(jì)提供概念(CONCEPT)與目標(biāo)(TARGET)，進(jìn)行設(shè)計(jì)。經(jīng)過分析，設(shè)計(jì)師有了明確的概念與目標(biāo)，并隨信息的交互產(chǎn)生了創(chuàng)造力。另一方面，設(shè)計(jì)師自身對(duì)社會(huì)環(huán)境也要進(jìn)行深入的認(rèn)識(shí)與考察，對(duì)設(shè)計(jì)的作品取向有明晰的認(rèn)識(shí)：是否符合人們的消費(fèi)預(yù)期?是否能感受到人們的審美知覺?日本設(shè)計(jì)師佐野邦雄先生曾作一圖生