設(shè)計(jì)階段編輯
網(wǎng)站伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起,作為上網(wǎng)的主要依托,由于人們使用網(wǎng)絡(luò)的頻繁而變得非常的重要。由于企業(yè)需要通過網(wǎng)站呈現(xiàn)產(chǎn)品、服務(wù)、理念、文化,或向受眾提供某種功能服務(wù)。因此網(wǎng)頁設(shè)計(jì)必須首先明確設(shè)計(jì)站點(diǎn)的目的和用戶的需求,從而做出切實(shí)可行的設(shè)計(jì)方案。
專業(yè)的網(wǎng)頁設(shè)計(jì),需要經(jīng)歷以下幾個階段:
-
需要根據(jù)消費(fèi)者的需求、市場的狀況、企業(yè)自身的情況等進(jìn)行綜合分析,從而建立起營銷模型。
-
以業(yè)務(wù)目標(biāo)為中心進(jìn)行功能策劃,制作出欄目結(jié)構(gòu)關(guān)系圖。
-
以滿足用戶體驗(yàn)設(shè)計(jì)為目標(biāo),使用
axure rp或同類軟件進(jìn)行頁面策劃,制作出交互用例。
-
以頁面精美化設(shè)計(jì)為目標(biāo),使用
PS、
AI等軟件,調(diào)整,使用更合理的顏色、字體、圖片、樣式進(jìn)行頁面設(shè)計(jì)美化。
-
根據(jù)用戶反饋,進(jìn)行頁面設(shè)計(jì)調(diào)整,以達(dá)到最優(yōu)效果。
設(shè)計(jì)目標(biāo)編輯
-
業(yè)務(wù)邏輯清晰,能清楚的向?yàn)g覽者傳遞信息,瀏覽者能方便的尋找到自己想要查看的東西
-
用戶體驗(yàn)良好,用戶在視覺上,操作上都能感到很舒適
-
頁面設(shè)計(jì)精美,用戶能得到美好的視覺體驗(yàn),不會為一些糟糕的細(xì)節(jié)而感到不適
-
建站目標(biāo)明晰,網(wǎng)頁很好的實(shí)現(xiàn)了企業(yè)建站的目標(biāo),向用戶傳遞了某種信息,或展示了產(chǎn)品、服務(wù)、理念、文化
設(shè)計(jì)流程編輯
主題明確
在目標(biāo)明確的基礎(chǔ)上,完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案。對網(wǎng)站的整體風(fēng)格和特色作出定位,規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。
Web站點(diǎn)應(yīng)針對所服務(wù)對象(機(jī)構(gòu)或人)的不同而具有不同的形式。有些站點(diǎn)只提供簡潔文本信息;有些則采用多媒體表現(xiàn)手法,提供華麗的圖像、閃爍的燈光、復(fù)雜的頁面布置,甚至可以下載聲音和錄像片段。好的Web站點(diǎn)把圖形表現(xiàn)手法和有效的組織與通信結(jié)合起來。
為了做到主題鮮明突出,要點(diǎn)明確,應(yīng)該使配色和圖片圍繞預(yù)定的主題;調(diào)動一切手段充分表現(xiàn)網(wǎng)站點(diǎn)的個性和情趣,辦出網(wǎng)站的特點(diǎn)。
充分利用已有信息,如客戶手冊.公共關(guān)系文檔.技術(shù)手冊和數(shù)據(jù)庫等。
設(shè)計(jì)思路
-
簡潔實(shí)用:這是非常重要的,網(wǎng)絡(luò)特殊環(huán)境下,盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的,所以要去掉所有的冗余的東西。
-
使用方便:同第一個是相一致的,滿足使用者的要求,網(wǎng)頁做得越適合使用,就越顯示出其功能美
-
整體性好:一個網(wǎng)站強(qiáng)調(diào)的就是一個整體,只有圍繞一個統(tǒng)一的目標(biāo)所做的設(shè)計(jì)才是成功的。
-
網(wǎng)站形象突出:一個符合美的標(biāo)準(zhǔn)的網(wǎng)頁是能夠使網(wǎng)站的形象得到最大限度的提升的。
頁面用色協(xié)調(diào),布局符合形式美的要求:布局有條理,充分利用美的形式,使網(wǎng)頁富有可欣賞性,提高檔次。當(dāng)然雅俗共賞是人人都追求的。
-
交互式強(qiáng):發(fā)揮網(wǎng)絡(luò)的優(yōu)勢,是每個使用者都參與到其中來,這樣的設(shè)計(jì)才能算成功的設(shè)計(jì)。這樣的網(wǎng)頁才算真正的美的設(shè)計(jì)。
版式設(shè)計(jì)
網(wǎng)頁設(shè)計(jì)作為一種
視覺語言,特別講究
編排和布局,雖然主頁的設(shè)計(jì)不等同于平面設(shè)計(jì),但它們有許多相近之處。
版式設(shè)計(jì)通過文字圖形的空間組合,表達(dá)出和諧與美。
多頁面站點(diǎn)頁面的
編排設(shè)計(jì)要求把頁面之間的有機(jī)聯(lián)系反映出來,特別要求處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。為了達(dá)到最佳的視覺表現(xiàn)效果,反復(fù)推敲整體布局的合理性,使瀏覽者有一個流暢的視覺體驗(yàn)。
色彩作用
色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計(jì)中,設(shè)計(jì)師根據(jù)和諧、均衡和重點(diǎn)突出的原則,將不同的色彩進(jìn)行組合.搭配來構(gòu)成美麗的頁面。 根據(jù)色彩對人們心理的影響,合理地加以運(yùn)用。如果企業(yè)有CIS(
企業(yè)形象識別系統(tǒng)),應(yīng)按照其中的VI進(jìn)行色彩運(yùn)用。
形式內(nèi)容
為了將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu),形式語言必須符合頁面的內(nèi)容,體現(xiàn)內(nèi)容的豐富含義。
靈活運(yùn)用對比與調(diào)和、
對稱與平衡、節(jié)奏與韻律以及留白等手段,通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài),產(chǎn)生和諧的美感。
三維空間的構(gòu)成
網(wǎng)絡(luò)上的三維空間是一個假想空間,這種空間關(guān)系需借助動靜變化.圖像的比例關(guān)系等空間因素表現(xiàn)出來。 在頁面中,圖片、文字位置前后疊壓,或頁面位置變化所產(chǎn)生的視覺效果都各不相同。通過圖片、文字前后疊壓所構(gòu)成的空間層次不太適合網(wǎng)頁設(shè)計(jì),根據(jù)現(xiàn)有瀏覽器的特點(diǎn),網(wǎng)頁設(shè)計(jì)適合比較規(guī)范、簡明的頁面,盡管這種疊壓排列能產(chǎn)生強(qiáng)節(jié)奏的空間層次,視覺效果強(qiáng)烈。
網(wǎng)頁上常見的是頁面上、下、左、右、中位置所產(chǎn)生的空間關(guān)系,以及疏密的位置關(guān)系所產(chǎn)生的空間層次,這兩種位置關(guān)系使產(chǎn)生的空間層次富有彈性,同時也讓人產(chǎn)生輕松或緊迫的心理感受。
虛擬現(xiàn)實(shí)
人們已不滿足于
HTML(
標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用)編制的二維Web頁面,三維世界的誘惑開始吸引更多的人,虛擬現(xiàn)實(shí)要在Web網(wǎng)上展示其迷人的風(fēng)采,于是VRML語言出現(xiàn)了。
VRML是一種面向?qū)ο蟮恼Z言,它類似Web
超級鏈接所使用的HTML語言,也是一種基于文本的語言,并可以運(yùn)行在多種平臺之上,只不過能夠更多地為虛擬現(xiàn)實(shí)環(huán)境服務(wù)。
多媒體
網(wǎng)絡(luò)資源的優(yōu)勢之一是多媒體功能。要吸引瀏覽者注意力,網(wǎng)頁的內(nèi)容可以用
三維動畫、
FLASH等來表現(xiàn)。但要由于網(wǎng)絡(luò)寬帶的限制,在使用多媒體的形式表現(xiàn)網(wǎng)頁的內(nèi)容時不得不考慮客戶端的傳輸速度。
便于使用
如果人們看不懂或很難看懂您的網(wǎng)站,那么,他如何了解你的企業(yè)信息和服務(wù)項(xiàng)目呢?使用一些醒目的標(biāo)題或文字來突出您的產(chǎn)品與服務(wù)。并且即使您擁有最棒的產(chǎn)品,如果客戶從您的網(wǎng)站上看不清楚您在介紹什么或不清楚如何受益的話,他們是不會喜歡您的網(wǎng)站的,這對于網(wǎng)頁設(shè)計(jì)而言是失敗的。
導(dǎo)向清晰
網(wǎng)頁設(shè)計(jì)中導(dǎo)航使用
超文本鏈接或圖片鏈接,使人們能夠在您的網(wǎng)站上自由前進(jìn)或后退,而不必讓他們使用瀏覽器上的前進(jìn)或后退。我們在所有的圖片上使用“ALT”
標(biāo)識符注明圖片名稱或解釋,以便那些不愿意自動加載圖片的觀眾能夠了解圖片的含義。
快速下載時間
很多的瀏覽者不會進(jìn)入需要等待5分鐘下載時間才能進(jìn)入的網(wǎng)站,在互聯(lián)網(wǎng)上30秒的等待時間與我們平常10分鐘等待時間的感覺相同。因此,建議在網(wǎng)頁設(shè)計(jì)中盡量避免使用過多的圖片及體積過大的圖片。主要頁面的容量應(yīng)確保普通瀏覽者頁面等待時間不超過10秒。
非圖形內(nèi)容
在必要時適當(dāng)使用動態(tài)“
Gif”圖片,為減少動畫容量,應(yīng)用巧妙設(shè)計(jì)的Java動畫可以用很小的容量使圖形或文字產(chǎn)生動態(tài)的效果。但是,由于在互聯(lián)網(wǎng)瀏覽的大多是一些尋找信息的人們,仍然建議您要確定您的網(wǎng)站將為他們提供的是有價(jià)值的內(nèi)容,而不是過度的裝飾。
反饋與溝通
讓客戶明確您所能提供的產(chǎn)品或服務(wù)并讓他們非常方便地訂購是您獲得成功的重要因素。如果客戶在您的網(wǎng)站上產(chǎn)生了購買產(chǎn)品或服務(wù)的欲望,您是否能夠讓他們盡快實(shí)現(xiàn)嗎?是在線還是離線?
因此,如果是產(chǎn)品或服務(wù)介紹網(wǎng)站,應(yīng)該有留言、電話、在線咨詢等功能或信息呈現(xiàn)。
在企業(yè)的Web站點(diǎn)上,要認(rèn)真回復(fù)用戶的電子郵件和傳統(tǒng)的聯(lián)系方式如信件.電話垂詢和傳真,做到有問必答。最好將用戶的用意進(jìn)行分類,如售前一般了解.售后服務(wù)等,由相關(guān)部門處理,使網(wǎng)站訪問者感受到企業(yè)的真實(shí)存在并由此產(chǎn)生信任感。
測試改進(jìn)
測試實(shí)際上是模擬用戶詢問網(wǎng)站的過程,用以發(fā)現(xiàn)問題并改進(jìn)網(wǎng)頁設(shè)計(jì)。應(yīng)該與用戶共同安排
網(wǎng)站測試。
內(nèi)容更新
企業(yè)Web站點(diǎn)建立后,要不斷更新網(wǎng)頁內(nèi)容。站點(diǎn)信息的不斷更新,讓瀏覽者了解企業(yè)的發(fā)展動態(tài)和網(wǎng)上職務(wù)等,同時也會幫助企業(yè)建立良好的形象。
注意不要許諾你實(shí)現(xiàn)不了的東西,在你真正有能力處理回復(fù)之前,不要懇求用戶輸入信息或羅列一大堆自己不能及時答復(fù)的電話號碼。 如果要求訪問者自愿提供其個人信息,應(yīng)公布并認(rèn)真履行個人隱私保承諾。
用戶體驗(yàn)編輯
1. 輸入控件的自動聚焦和可用鍵盤切換輸入焦點(diǎn)
使用JavaScript實(shí)現(xiàn)頁面加載完成后立即自動聚焦(focus)到第一個輸入控件。可用TAB鍵(IE缺省實(shí)現(xiàn))或
方向鍵切換聚焦到下一個輸入控件。
2. 可用Enter(或Ctrl+Enter)鍵提交,確保和點(diǎn)擊提交按鈕的效果是相同的
不要在提交按鈕上加入onClick=”…”這樣的JavaScript代碼。
3.鼠標(biāo)動作提示和回應(yīng)
對用戶的鼠標(biāo)定位操作,當(dāng)移動到可響應(yīng)的位置上時,應(yīng)給予視覺或聽覺的提示。
4.盡可能早的在客戶端完成輸入數(shù)據(jù)合法性驗(yàn)證
輸入數(shù)據(jù)的合法性檢驗(yàn)應(yīng)該在客戶端使用JavaScript進(jìn)行驗(yàn)證。除非驗(yàn)證只能在服務(wù)器端完成,否則驗(yàn)證工作應(yīng)在最早能完成的情況下進(jìn)行。
5.根據(jù)應(yīng)用場景決定在表單頁面和提交后返回頁面間是否使用中間過渡頁面
根據(jù)應(yīng)用場景,決定是否顯示接收表單頁面(表單頁面和提交后返回頁面間的中間過渡頁面),以及使用何種方式顯示接收表單頁面。
6.防止表單重復(fù)提交處理
對提交按鈕點(diǎn)擊后做變灰處理避免在網(wǎng)絡(luò)響應(yīng)較慢情況下用戶重復(fù)提交同一個表單。使用頁面過期失效避免用戶后退瀏覽重復(fù)提交表單。
7.頁面鏈接是打開新窗口、使用原窗口還是彈出窗口的原則
一般而言,首頁上鏈接可以使用
target=”_blank”屬性打開新窗口,而其他頁面上的鏈接都應(yīng)使用原窗口或彈出窗口。如果鏈接頁面內(nèi)容相對原頁面來說不重要,是附屬性質(zhì)的,可以使用彈出窗口方式。
8.盡可能少的排列可選項(xiàng),盡可能少的安排操作步驟
根據(jù)用戶操作習(xí)慣安排盡可能少的操作菜單選項(xiàng),同時要保證盡可能少的操作步驟。
9.操作邏輯無漏洞,保證數(shù)據(jù)是操作安全的
多個頁面間的操作和同個頁面上的多個操作間的邏輯關(guān)系在設(shè)計(jì)上是安全和嚴(yán)謹(jǐn)?shù)摹1WC不會出現(xiàn)不被允許的用戶操作組合,至少不會因?yàn)橛脩舻牟贿m當(dāng)?shù)牟僮鲗?dǎo)致出錯。
西方設(shè)計(jì)編輯
網(wǎng)頁設(shè)計(jì)的基本概念
在這個頁面,你會發(fā)現(xiàn)基本的網(wǎng)頁設(shè)計(jì)概念,以及如何他們可以用來提高您的項(xiàng)目的信息。
設(shè)計(jì)到Web相關(guān)的也有幾個原則。其中有接近,對齊,重復(fù)和對比。這四項(xiàng)原則的影響,如何被認(rèn)為網(wǎng)頁。
接近
接近是指在Web頁面上的元素的元素彼此之間的關(guān)系之間的距離。這些元素包括文本,導(dǎo)航,標(biāo)題,等等。
一般來說,并攏的元素,似乎有強(qiáng)大的關(guān)系網(wǎng)比元素相距較遠(yuǎn)。
在合適的的插圖顯示的差異,使得接近。被放置的點(diǎn)遠(yuǎn)的部分所造成的弱的布局間距寬。
發(fā)展趨勢編輯
在網(wǎng)頁設(shè)計(jì)中,總是有傾向的特定技術(shù)來觀察,或跟蹤的網(wǎng)頁設(shè)計(jì)師加強(qiáng)的趨勢。這里有專有和開源和免費(fèi)的技術(shù)專用的支持者。然而,近些年來,又增加自由和開放源碼技術(shù),包括由W3C和WHATWG進(jìn)行監(jiān)控和批準(zhǔn),監(jiān)督和實(shí)施增加。
趨勢可以發(fā)現(xiàn),不僅在看在時尚領(lǐng)域的使用的技術(shù),如網(wǎng)站和匹配的標(biāo)志是清晰的喜好確定。著名的藝術(shù)字Web 2.0至今的重要作用的幫助。
網(wǎng)頁設(shè)計(jì)是一個不斷更新?lián)Q代、推陳出新的行業(yè),它要求設(shè)計(jì)師們必須隨時把握最新的設(shè)計(jì)趨勢,從而確保自己不被這個行業(yè)所淘汰。2013年,網(wǎng)頁設(shè)計(jì)主要流行響應(yīng)式設(shè)計(jì)、扁平化設(shè)計(jì)、無限滾動、單頁、固定標(biāo)頭、大膽的顏色、更少的按鈕和更大的網(wǎng)頁寬度。
實(shí)戰(zhàn)技巧編輯
網(wǎng)頁技術(shù)更新很快,一個網(wǎng)站的
界面設(shè)計(jì)壽命僅僅2-3年而已。不管是垃圾還是精品,都沒有所謂的經(jīng)典,經(jīng)典只存在于是哪個首次成功創(chuàng)新性的應(yīng)用。一個閉門造車者做出的東西,是遠(yuǎn)遠(yuǎn)趕不上綜合借鑒者的。網(wǎng)頁設(shè)計(jì)不同于其他藝術(shù),在模仿加創(chuàng)新的網(wǎng)頁設(shè)計(jì)領(lǐng)域當(dāng)中,即便是完全自己設(shè)計(jì)的,也是沿用了人們已經(jīng)認(rèn)同的大部分用戶習(xí)慣,而且這種沿襲的痕跡是非常明顯的!還有哪個設(shè)計(jì)者敢腆著臉說,這都是我自己的原創(chuàng)設(shè)計(jì)?對于業(yè)界來說,經(jīng)典只是個理念和象征!
外國網(wǎng)頁設(shè)計(jì) (10張)
設(shè)計(jì)環(huán)境
不可否認(rèn),國內(nèi)網(wǎng)頁設(shè)計(jì)環(huán)境還停留在初級的認(rèn)知階段,也就是說,絕大多數(shù)人不知道網(wǎng)絡(luò)的真正的可用之處,你去做一個業(yè)務(wù)的時候,不得不去做大量的說服教育工作。以乙方的身份去說服甲方,以專業(yè)角度去教育非專業(yè)人士,結(jié)果是可想而知的。也正是這種全體社會普遍的低認(rèn)知水平,導(dǎo)致了大量網(wǎng)絡(luò)垃圾的產(chǎn)生。
企業(yè)客戶所在行業(yè)往往有其特定的設(shè)計(jì)需求,特別是對于企業(yè)網(wǎng)站建設(shè)當(dāng)中的配色,除了應(yīng)根據(jù)企業(yè)的VI標(biāo)準(zhǔn)色,以及客戶自身的喜好進(jìn)行配色分析外,同時不能忽略整個行業(yè)對于顏色上的‘慣例’。那么,企業(yè)網(wǎng)站在設(shè)計(jì)和制作當(dāng)中,到底有哪一些配色規(guī)則需要設(shè)計(jì)師遵循呢?
1、行業(yè)避忌的顏色
某些行業(yè)的企業(yè)客戶,對于網(wǎng)站整體顏色的要求涉及到具體的顏色避忌,例如金融、投資類的企業(yè)網(wǎng)站,應(yīng)盡量避免綠色,或相近顏色的使用。這是因?yàn)椋G色在金融投資行業(yè)當(dāng)中代表的是低迷,不景氣,下滑等負(fù)面的元素,因此即便企業(yè)宣揚(yáng)的是環(huán)保、低碳等企業(yè)文化,也是不能輕易予以使用。
2、特征選色
企業(yè)客戶在不同的發(fā)展階段,對于網(wǎng)站設(shè)計(jì)的配色需求并不一樣。在企業(yè)初創(chuàng)階段,企業(yè)建站的目的是打造品牌網(wǎng)絡(luò)形象,開拓客戶資源,這時候的企業(yè)客戶更多的是關(guān)注自身的個性化,如何才能凸顯企業(yè)的特質(zhì),如何才能在行業(yè)當(dāng)中顯示其獨(dú)有的特性,這是初建網(wǎng)站的企業(yè)客戶所重點(diǎn)關(guān)注的內(nèi)容;在企業(yè)形成規(guī)模,進(jìn)行品牌提升階段,企業(yè)建設(shè)網(wǎng)站或進(jìn)行改版的目的是重塑品牌網(wǎng)絡(luò)形象,打造更為專業(yè)、沉穩(wěn)和可持續(xù)發(fā)展的品牌理念和文化,這時候的企業(yè)客戶更多的是考慮如何將企業(yè)的品牌內(nèi)涵與行業(yè)相融合,在配色的選擇上更傾向于穩(wěn)重、包容,能夠適應(yīng)各種場合需要的配色。
好的網(wǎng)頁設(shè)計(jì)師
1、內(nèi)容和功能決定表現(xiàn)形式和界面設(shè)計(jì)
常常拿到的任務(wù)是一張小紙條,上面兩句話,叫你去做一個網(wǎng)站設(shè)計(jì)。有的人看看紙條就去設(shè)計(jì)頁面了,憑兩句話,你就可以為客戶做一個頁面設(shè)計(jì),以我7、8年的設(shè)計(jì)經(jīng)驗(yàn),我都不敢去做,你真是我的偶像啊!
做網(wǎng)頁設(shè)計(jì),你需要了解客戶的東西很多:
(1)建設(shè)網(wǎng)站的目的;
(2)欄目規(guī)劃及每個欄目的表現(xiàn)形式和功能要求;
(3)網(wǎng)站主體色調(diào)、客戶性別喜好、聯(lián)系方式、舊版網(wǎng)址、偏好網(wǎng)址;
(4)根據(jù)行業(yè)和客戶要求,哪些要著重表現(xiàn);
(5)是否分期建設(shè)、考慮后期的兼容性;
(6)客戶是否有強(qiáng)烈建設(shè)網(wǎng)站的欲望;
(7)你是否能在精神意識上控制住客戶;
(8)面對你未接觸的技術(shù)知識,你有底嗎;
(9)網(wǎng)站類型。
等等
當(dāng)你把這些內(nèi)容都了解清楚的時候,在你的大腦中就已經(jīng)對這個網(wǎng)站有了全面而形象的定位,這時才是放手去做界面設(shè)計(jì)的時候。
2、界面弱化
一個好的界面設(shè)計(jì)它的界面是弱化的,它突出的是功能,著重體現(xiàn)的是網(wǎng)站業(yè)提供給使用者主要是什么。這就涉及到瀏覽順序、功能分區(qū)等等。
要讓訪客在0.5秒內(nèi)就能把握網(wǎng)站的行業(yè)性質(zhì),1秒內(nèi)就知道該從哪個地方開始使用這個網(wǎng)站,能點(diǎn)一次的,絕不點(diǎn)第二次。當(dāng)然上面說的是大多數(shù)功能性網(wǎng)站,對于宣傳展示性網(wǎng)站,諸如加特效的或Flash網(wǎng)站,可能就不得不花哨一些,但不能太過分。網(wǎng)站不是動畫片,在效率越來越高,社會心理越來越浮躁的中國,人們的耐心越來越小,心理承受能力越來越低。效果可以體現(xiàn)意境,點(diǎn)到為止。
3、模塊化和可修改性強(qiáng)
模塊化不僅可以提高重用性,也能統(tǒng)一網(wǎng)站風(fēng)格,還可以降低程序開發(fā)的強(qiáng)度。這里就涉及一些尺寸、模數(shù)、寬容度、命名規(guī)范等等知識了,不再冗述。
無論是架構(gòu)還是模塊或圖片,都要考慮可修改性強(qiáng)。舉個簡單的例子,圖標(biāo)、按鈕等,很多人喜歡制作圖片,N個按鈕就是N張圖片。如果只做3-5類按鈕的背景圖片,然后用在
網(wǎng)頁代碼里打上文字,那么修改起來就簡單了,讓程序員自己改字就可以了。然而網(wǎng)頁顯示的字體是帶有鋸齒的,一般既能清晰又保證美觀的字體字號有幾類:
宋體12px | 宋體 12px 粗體 | 宋體 14px | 宋體 14px 粗體 | 黑體 20px | verdana 9px | Arial Black 12px+ |
4、分析能力遠(yuǎn)比創(chuàng)意來的重要
設(shè)計(jì)界動輒就大談什么“創(chuàng)意”,我要說的是,還沒有搞清目的意義內(nèi)容,還沒在技術(shù)制作上臻于完善的基礎(chǔ)上,用創(chuàng)意和特效來迷惑客戶和訪客是可恥的。一個網(wǎng)頁設(shè)計(jì)者的分析能力遠(yuǎn)比創(chuàng)意來的重要。
結(jié)尾,經(jīng)驗(yàn)
1、網(wǎng)頁配色基本概念
(1)白紙黑字是永遠(yuǎn)的主題,誰都說不出不好來。
(2)網(wǎng)頁最常用流行色
·藍(lán)色
·綠色
·橙色
·暗紅
(3)顏色的忌諱
·忌臟
·忌純
·忌跳
·忌花
·忌粉
·藍(lán)色忌純,綠色忌黃,紅色忌艷。
(4)幾種固定搭配
·藍(lán)白橙
·綠白蘭
·橙白紅
·暗紅黑
2、網(wǎng)頁設(shè)計(jì)理念
(1)內(nèi)容決定形式
先把內(nèi)容充實(shí)上,再分區(qū)塊,再定色調(diào),再處理細(xì)節(jié)。
(2)先整體,后局部,最后回歸到整體。
全局考慮,把能填上的都填上,占位置。然后定基調(diào),分模塊設(shè)計(jì)。最后調(diào)整不滿意的幾個局部細(xì)節(jié)。
(3)功能決定設(shè)計(jì)方向
看網(wǎng)站的用途,決定設(shè)計(jì)思路.商業(yè)性的就要突出贏利目的;政府型的就要突出形象和權(quán)威性的文章;教育性的,就要突出師資和課程。
總結(jié)∶網(wǎng)站設(shè)計(jì)應(yīng)簡潔,明了。從用戶體驗(yàn)度出發(fā)設(shè)計(jì)。
設(shè)計(jì)收費(fèi)制度
每一種不同的產(chǎn)品,設(shè)計(jì)的方式也就不一樣,每一個代運(yùn)營團(tuán)隊(duì)必須要有一個實(shí)力較強(qiáng)的設(shè)計(jì)師,要對產(chǎn)品的背景圖片進(jìn)行設(shè)計(jì)、要給產(chǎn)品拍照、做后期的圖像處理。每一種產(chǎn)品的不同,難度和方式就會不同。例如我們的做的產(chǎn)品是珠寶,那么設(shè)計(jì)師就要考慮怎么拍照才能拍出最好的效果,才能體現(xiàn)出珠寶的高貴,并且以什么形式展示為最好,這些都是設(shè)計(jì)師需要考慮的難題。所以產(chǎn)品的難度是決定收費(fèi)的一個項(xiàng)目。
標(biāo)題設(shè)計(jì)編輯
在設(shè)計(jì)網(wǎng)頁標(biāo)題時,應(yīng)注意同時兼顧對用戶的注意力,以及對搜索引擎檢索的需要。這一原則在實(shí)際操作中可通過三個方面來體現(xiàn),這三個方面也可以被認(rèn)為是
網(wǎng)頁標(biāo)題設(shè)計(jì)的一般規(guī)律:
一、網(wǎng)頁標(biāo)題不宜過短或者過長
一般來說6-10個漢字比較理想,最好不要超過30個漢字。網(wǎng)頁標(biāo)題字?jǐn)?shù)過少可能包含不了有效關(guān)鍵詞,字?jǐn)?shù)過多不僅搜索引擎無法正確識別標(biāo)題中的核心關(guān)鍵詞,而且也讓用戶難以對網(wǎng)頁標(biāo)題(尤其是首頁標(biāo)題,代表了網(wǎng)站名稱)形成深刻印象,也不便于其他
網(wǎng)站鏈接。
二、網(wǎng)頁標(biāo)題應(yīng)概括網(wǎng)頁的核心內(nèi)容
當(dāng)用戶通過搜索引擎檢索時,在檢索結(jié)果頁面中的內(nèi)容一般是
網(wǎng)頁標(biāo)題(加鏈接)和網(wǎng)頁摘要信息,要引起用戶的關(guān)注,網(wǎng)頁標(biāo)題發(fā)揮了很大的作用,如果網(wǎng)頁標(biāo)題和頁面摘要信息有較大的相關(guān)性,摘要信息對網(wǎng)頁標(biāo)題將發(fā)揮進(jìn)一步的補(bǔ)充作用,從而引起用戶對該網(wǎng)頁信息點(diǎn)擊行為的發(fā)生(也就意味著
搜索引擎推廣發(fā)揮了作用)。另外,當(dāng)網(wǎng)頁標(biāo)題被其他網(wǎng)站或者本網(wǎng)站其他欄目/網(wǎng)頁鏈接時,一個概括了網(wǎng)頁核心內(nèi)容的標(biāo)題有助于用戶判斷是否點(diǎn)擊該網(wǎng)頁標(biāo)題鏈接。
三、網(wǎng)頁標(biāo)題中應(yīng)含有豐富的關(guān)鍵詞
考慮到
搜索引擎營銷的特點(diǎn),搜索引擎對網(wǎng)頁標(biāo)題中所包含的關(guān)鍵詞具有較高的
權(quán)重,盡量讓網(wǎng)頁標(biāo)題中含有用戶檢索所使用的關(guān)鍵詞。以網(wǎng)站首頁設(shè)計(jì)為例,一般來說首頁標(biāo)題就是網(wǎng)站的名稱或者公司名稱,但是考慮到有些名稱中可能無法包含公司/網(wǎng)站的核心業(yè)務(wù),也就是說沒有核心關(guān)鍵詞,這時通常采用“核心關(guān)鍵詞+公司名/品排名”的方式來作為網(wǎng)站首頁標(biāo)題。開頭所列舉的某網(wǎng)絡(luò)營銷服務(wù)商網(wǎng)站首頁標(biāo)題實(shí)例,其實(shí)也是采用這種方式來設(shè)計(jì)
網(wǎng)頁標(biāo)題,只不過由于羅列了太多的“核心關(guān)鍵詞”,反而沒有了核心。
做美工看起來并不是一件容易的事情。首先,要對整個站點(diǎn)和企業(yè)有個大致的了解。例如:某些企業(yè)喜歡藍(lán)色的主調(diào),你不可能去做個紅色的主調(diào),這樣完全違背客戶的主要意愿,如果百度的標(biāo)志改成五顏六色的,相信大家也不會認(rèn)可的。
站長的職責(zé)是規(guī)劃
網(wǎng)站結(jié)構(gòu)。同樣也需要有一定的審美觀。下面介紹了幾款常用的繪圖工具和基本知識。
設(shè)計(jì)要點(diǎn)編輯
網(wǎng)頁設(shè)計(jì)的兩大要點(diǎn)是:整體風(fēng)格和色彩搭配。
確定網(wǎng)站整體風(fēng)格
在這里,我提供給大家一些參考經(jīng)驗(yàn):
1.將你的標(biāo)志logo,盡可能的放在每個頁面上最突出的位置。
2.突出你的標(biāo)準(zhǔn)色彩。
3.總結(jié)一句能反映貴站精髓的宣傳標(biāo)語!
4.相同類型的圖像采用相同效果,比如說標(biāo)題字都采用
陰影效果,那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的!
網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是最難以學(xué)習(xí)的,難就難在沒有一個固定的模式可以參照和模仿。給你一個主題,任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。
R、G、B就是Red、Green、Blue(紅,綠,藍(lán))三種顏色,RGB模式就是由這三種顏色為基色進(jìn)行疊加而模擬出大自然色彩的色彩組合模式。我們?nèi)粘S玫牟噬娔X顯示器、彩色電視機(jī)等的色彩都使用這種模式。
1、 矢量圖
矢量圖又叫做向量圖,是用一系列計(jì)算機(jī)指令來描述和記錄一幅圖,一幅圖可以解為一系列由點(diǎn)、線、面等到組成的子圖,它所記錄的是對象的幾何形狀、線條粗細(xì)和色彩等。生成的矢量圖文件存儲量很小,特別適用于文字設(shè)計(jì)、圖案設(shè)計(jì)、版式設(shè)計(jì)、標(biāo)志設(shè)計(jì)、計(jì)算機(jī)輔助設(shè)計(jì)(CAD)、工藝美術(shù)設(shè)計(jì)、插圖等。矢量圖只能表示有規(guī)律的線條組成的圖形,如工程圖、三維造型或藝術(shù)字等; 常見的矢量圖處理軟件有CoreIDRAW、AutoCAD、Illustrator和FreeHand等。
2、位圖
位圖又叫點(diǎn)陣圖或像素圖,計(jì)算機(jī)屏幕上的圖你是由屏幕上的發(fā)光點(diǎn)(即像素)構(gòu)成的,每個點(diǎn)用二進(jìn)制數(shù)據(jù)來描述其顏色與亮度等信息,這些點(diǎn)是離散的,類似于點(diǎn)陣。 位圖在放大到一定限度時會發(fā)現(xiàn)它是由一個個小方格組成的,這些小方格被稱為像素點(diǎn),一個像素是圖像中最小的圖像元素。也就是我們俗稱的馬賽克。
bmp:是未經(jīng)過壓縮的用
點(diǎn)陣來表示的真彩圖片,占用磁盤空間較大
gif:是經(jīng)過壓縮的,只能表示256種顏色,占用磁盤空間小,常用來演示色彩單一的成塊的卡通圖案,GIF還有一種可以表示連續(xù)的動畫。
png:是fireworks的圖片格式
jpg:也稱為jpeg,是有損壓縮格式但是它表示的顏色比較豐富,一般用來顯示真彩的照片或圖案。
作為設(shè)計(jì)者和客戶(這里指各站長),如果事先沒有明文協(xié)議的話設(shè)計(jì)者有權(quán)不提供源文件。
VI是Visual Identity的縮寫,中文譯為“
企業(yè)視覺識別”。VI是CI計(jì)劃的靜態(tài)識別符號,是企業(yè)理念視覺化傳達(dá)的載體,因此它項(xiàng)目最多,效果最為直接。VI作為視覺識別,它是外在表現(xiàn),固然需要具有美感,但VI必須是MI的體現(xiàn),直接反映企業(yè)的理念。因此VI設(shè)計(jì)包含這樣一些原則:即充分傳達(dá)企業(yè)理念、人性原則、民族性原則、簡潔抽象及動態(tài)原則、員工參與原則、法律原則、藝術(shù)性原則和個性原則。
CI是Corporate Identity的縮寫,中文譯為“企業(yè)形象”。CI計(jì)劃,是指企業(yè)有目的、有計(jì)劃、戰(zhàn)略性地創(chuàng)造出所希望的自身形象,由此提高企業(yè)的社會知名度,最終得到自己最適合的經(jīng)營環(huán)境。
而logo只是網(wǎng)站或企業(yè)一個標(biāo)志。
網(wǎng)頁色彩搭配
1.用一種色彩。這里是指先選定一種色彩,然后調(diào)整透明度或者飽和度,這樣的頁面看起來色彩統(tǒng)一,有層次感。
2.用兩種色彩。先選定一種色彩,然后選擇它的對比色。
3.用一個色系。簡單的說就是用一個感覺的色彩,例如淡藍(lán),淡黃,淡綠;或者土黃,土灰,土藍(lán)。
在網(wǎng)頁配色中,還要切記一些誤區(qū):
1.不要將所有顏色都用到,盡量控制在三至五種色彩以內(nèi)。
2.背景和前文的對比盡量要大(絕對不要用花紋繁復(fù)的圖案作背景),以便突出主要文字內(nèi)容。
網(wǎng)頁設(shè)計(jì)工具
圖像處理設(shè)計(jì):
-
adobe
Photo
Shop(外語簡稱:
PS、其程序圖標(biāo)便是它的外語簡稱)是一個由
Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。 Adobe Photoshop有兩個發(fā)行版本:標(biāo)準(zhǔn)版Adobe Photoshop和擴(kuò)展版Adobe Photoshop Extended,擴(kuò)展版除包含標(biāo)準(zhǔn)版所有功能之外,還增加了3D處理功能、動畫圖形編輯功能和高級圖像分析功能。 Adobe只支持Windows操作系統(tǒng)和Mac OS操作系統(tǒng)版本的Photoshop , 但Linux操作系統(tǒng)用戶可以通過使用Wine來運(yùn)行Photoshop CS6。
-
-
動畫設(shè)計(jì):
-
Adobe Flash,前稱Macromedia Flash,外語簡稱Flash,前身FutureSplash,既指Adobe Flash Professional多媒體創(chuàng)作程序,也指Adobe Flash Player。
網(wǎng)頁代碼編輯器:
-
Adobe Dreamweave(前稱Macromedia Dreamweaver)用于編輯HTML、ASP、JSP、PHP、CSS、XML、JS的頁面制作工具;是Adobe公司的著名網(wǎng)站開發(fā)工具。它使用所見即所得的接口,亦有HTML編輯的功能。有支持Mac和Windows兩個系統(tǒng)的版本。
-
當(dāng)你在INTERNET這個信息的海洋中盡情遨游時,會發(fā)現(xiàn)許許多多內(nèi)容豐富、創(chuàng)意新穎、設(shè)計(jì)獨(dú)特的個人網(wǎng)頁,不知道你見到這樣漂亮可人的網(wǎng)頁是否有點(diǎn)心動。一旦你具備了上網(wǎng)的條件,又萌發(fā)了制作主頁的念頭,那么就應(yīng)該注意網(wǎng)頁設(shè)計(jì)時應(yīng)考慮哪些方面的問題,包括網(wǎng)站功能和以及訪問者需要什么。你的整個設(shè)計(jì)都應(yīng)該圍繞這些方面來進(jìn)行。下面筆者就自己在實(shí)踐操作中的使用體會來談?wù)劸W(wǎng)頁設(shè)計(jì)時應(yīng)該考慮哪些問題,希望能給初建網(wǎng)站的用戶帶來一定的作用。
1、頁面內(nèi)容要新穎
網(wǎng)頁內(nèi)容的選擇要不落俗套,要重點(diǎn)突出一個“新”字,這個原則要求我們在設(shè)計(jì)網(wǎng)站內(nèi)容時不能照抄別人的內(nèi)容,要結(jié)合自身的實(shí)際情況創(chuàng)作出一個獨(dú)一無二的網(wǎng)站。 放眼望去,網(wǎng)上的許多個人主頁簡直就是"雜貨店",內(nèi)容包羅萬象,題材千篇一律,人人都是"軟件下載",個個都有"網(wǎng)絡(luò)導(dǎo)航",從頭到尾找不出一絲“鮮”意。所以,我們在設(shè)計(jì)網(wǎng)頁時,要把功夫下在選材上。選材要盡量做到“少”而“精”,又必須突出“新”,如能堅(jiān)持天天更新的話,我相信這樣的網(wǎng)頁一定會受到大家的歡迎。
2、網(wǎng)頁命名要簡潔
由于一個網(wǎng)站不可能就是由一個網(wǎng)頁組成,它有許多子頁面,為了能使這些頁面有效地被連接起來,用戶最后能給這些頁面起一些有代表性的而且簡潔易記的網(wǎng)頁名稱。這樣既會有助于你以后方便管理網(wǎng)頁,在向搜索引擎提交你的網(wǎng)頁時更容易被別人索引到。在給網(wǎng)頁命名時,最好使用自己常用的或符合頁面內(nèi)容的小寫英文字母,這直接關(guān)系到頁面上的連接。
3、要及時更新網(wǎng)頁
網(wǎng)頁制作好后,不能說萬事大吉了,其實(shí)事后的工作量更大。因?yàn)榫W(wǎng)頁制作是一時的,而維護(hù)更新的工作是每天都要做的。要及時把網(wǎng)頁上已經(jīng)作廢的連接應(yīng)該立即刪除掉,比如用戶無意中點(diǎn)擊了頁面中的一個連接,在苦苦的等待之后,換來的是無法訪問的結(jié)果,那么他們會對你的網(wǎng)頁大失所望,可能以后再也不會光顧你的網(wǎng)頁了。若不能及時更新,也最好在主頁上發(fā)布信息,告訴前來訪問的朋友,因有特殊情況需要離開一段時間,未能及時更新主頁,希望各位見諒,這樣就能給人一種對別人負(fù)責(zé)的感覺,同時能得到網(wǎng)友的信任。
4、注意視覺效果
設(shè)計(jì)Web頁面時,一定要用1024*768的分辨率來 分別觀察。許多瀏覽器使用1024*768的分辨率,盡管在1280*1024高分辨率下一 些Web頁面看上去很具吸引力,但在1024*768的模式下可能會黯然失色。作一點(diǎn)小小的努力,設(shè)計(jì)一個在不同分辨率下都能正常顯示的網(wǎng)頁
5、隨時注意網(wǎng)站升級
時刻注意網(wǎng)站的運(yùn)行狀況。性能很好的主機(jī)隨著訪問人數(shù)的增加,可能會運(yùn)行緩慢。但是,如果你不想失去訪問者的話,一定要仔細(xì)計(jì)劃好你的升級計(jì)劃。
6、 網(wǎng)頁內(nèi)容要易讀
網(wǎng)站設(shè)計(jì)最重要的訣竅,恐怕就是你的網(wǎng)頁要易讀。這就意味著,你必須花點(diǎn)心思來規(guī)劃文字與背景顏色的搭配方案。注意不要使背景的顏色沖淡了文字的視覺效果,別用花里胡哨的色彩組合,讓人看起你的網(wǎng)頁來很費(fèi)勁。一般來說,淺色背景下的深色文字為佳 。這個要點(diǎn)要求你最好別把文字的規(guī)格設(shè)得太小、也不能太大。文字太小,人家讀起來難受;文字太大,或者文字視覺效果變化頻繁,像是沖著人大喊大叫,看起來不舒服。另外,最好讓文本
左對齊,而不是居中。按當(dāng)代中文的閱讀習(xí)慣,文本大都居左的。當(dāng)然,標(biāo)題一般應(yīng)該居中,因?yàn)檫@符合讀者的閱讀習(xí)慣。
7、善用表格來布局
不要把一個網(wǎng)站的內(nèi)容象作報(bào)告似的一二三四地羅列出來,要注意多用表格把網(wǎng)站內(nèi)容的層次性和空間性突出顯示出來,使人一眼就能看出你的網(wǎng)站重點(diǎn)突出,結(jié)構(gòu)分明。
8、 少用特殊字體
雖然你可以在你的HTML中使用特殊的字體,但是,你不可能預(yù)測你的訪問者在他們的計(jì)算機(jī)上將看到什么。在你的計(jì)算機(jī)里看起來相當(dāng)好的頁面,在另一個不同的平臺上看起來可能非常糟糕。一些網(wǎng)站設(shè)計(jì)員喜歡使用來定義特性,這雖然允許你使用特殊的字體,但是仍需要一些變通的方法,以免你所選擇的字體在訪問者的計(jì)算機(jī)上不能顯示。級聯(lián)風(fēng)格表CSS有助于解決這些問題,但是只有最新版的瀏覽器才支持CSS。
為了成功地設(shè)計(jì)網(wǎng)站,你必須理解
HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用)是如何工作的。大多數(shù)的網(wǎng)站設(shè)計(jì)者建議網(wǎng)絡(luò)新手應(yīng)從有關(guān)HTML的書中去尋找答案,用Notepad制作網(wǎng)頁。因?yàn)橛肏TML設(shè)計(jì)網(wǎng)站,可以控制設(shè)計(jì)的整個過程。但是,如果你僅僅是網(wǎng)站設(shè)計(jì)的新手,你應(yīng)該尋找一個允許修改HTML的軟件包。HomeSite4是一個很好的Web設(shè)計(jì)工具。在設(shè)計(jì)過程中,HomeSite4能幫助你學(xué)習(xí)
HTML。它還允許你切換到所見即所得的模式,以便你在把網(wǎng)站發(fā)送到Web之前,預(yù)覽你的網(wǎng)站。
10、盡量少用Java程序
不要大幅度地使用的Java程序,能夠用javascript替代效果的則盡量不要使用java。因?yàn)閬碇vjava的運(yùn)行速度實(shí)在慢的讓人無法忍受,往往使瀏覽者沒有耐心等頁面全部顯示出來,這樣你的精心設(shè)計(jì)便毫無效果啦。
許多設(shè)計(jì)者把他們的網(wǎng)站地圖放在網(wǎng)站上,這種做法,卻是弊大于利。絕大部分的訪問者上網(wǎng)是尋找一些特別的信息,他們對于
你的網(wǎng)站是如何工作的,并沒有興趣。如果你覺得你的網(wǎng)站需要地圖,那很可能是需要改進(jìn)你的導(dǎo)航和工具條。
12、要為圖片附加注釋文字
給每個圖形加上文字的說明,在出現(xiàn)之前就可以看到相關(guān)內(nèi)容,尤其是導(dǎo)航按鈕和大圖片更應(yīng)如此。這樣一來,用戶在訪問你的站點(diǎn)時就有一種親切感覺,認(rèn)為你心細(xì),比較善解人意,時時刻刻為他人著想,相信你的好心會有好報(bào)的。
13、做個網(wǎng)站介紹
一個簡單明了的網(wǎng)站介紹,不僅能讓別人對你的網(wǎng)站能夠提供些什么有個了解,引發(fā)共鳴或是表達(dá)你的誠意,常常最能打動讀者,而且還能使訪問者能快速找到想要的東西。但是,許多設(shè)計(jì)者都沒有這樣做。有效的
導(dǎo)航條和搜索工具使人們很容易找到有用的信息,這對訪問者很重要。告訴訪問者你所提供的正是他們想要的信息。
14、考慮瀏覽器的兼容性
當(dāng)然IE所占的市場份額越來越大,但是我們?nèi)匀恍枰紤]到Netscape以及Opera這些瀏覽器用戶。設(shè)計(jì)風(fēng)格的考慮,如色彩的搭配,圖形、線條的使用等等。要時刻為用戶著想,必須最少在幾種不同類型的瀏覽器下測試網(wǎng)站,看看兼容性如何。
15、不宜多用閃爍文字
有的設(shè)計(jì)者想通過閃爍的文字來引起訪問者的注意是可以被人理解的,但一個頁面中最多不能有三處閃爍文字,太多了給用戶一種眼花繚亂的感覺,反而會影響用戶去訪問該網(wǎng)站的其他內(nèi)容,正所謂“物極必反”也。
16、每個頁面都要有導(dǎo)航按鈕
應(yīng)當(dāng)避免強(qiáng)迫用戶使用
工具欄中的向前和向后按鈕。你的設(shè)計(jì)應(yīng)當(dāng)使用戶能夠很快地找到他們所要的東西。絕大多數(shù)好的站點(diǎn)在每一頁同樣的位置上都有相同的導(dǎo)航條,使瀏覽者能夠從每一頁上訪問網(wǎng)站的任何部分。
17、避免長文本頁面
在一個站點(diǎn)上有許多只有文本的冗長頁面,是令人乏味的,人們?yōu)榱碎喿x這些長文本,不得不使用卷滾條,從而也浪費(fèi)了用戶在網(wǎng)上沖浪的時間。如果你有大量的基于文本的文檔,應(yīng)當(dāng)以Adobe Acrobat格式的文件形式來放置,以便你的訪問者能離線閱讀,從而節(jié)省寶貴的時間。
18、 網(wǎng)頁風(fēng)格要統(tǒng)一
你網(wǎng)頁上所有的圖像、文字,包括像背景顏色、區(qū)分線、字體、標(biāo)題、注腳什么的,要統(tǒng)一風(fēng)格,貫穿全站。這樣子讀者看起來舒服、順暢,會對
你的網(wǎng)站留下一個“很專業(yè)”的印象。
19、動畫最多只用一個
大家都喜歡用GIF動畫來裝飾網(wǎng)頁,它的確很吸引人,但我們在選擇時,是否能確定必須用GIF動畫,如果答否,那么就選擇靜止的圖片,因?yàn)樗娜萘恳〉枚唷M瑯拥某叽绲腖OGO,GIF動畫的容量有5K,而靜止LOGO的只有3K。雖然只有2K之差,但多起來,就會影響下載的速度,所以,如果有些不是
必須的,就選擇最小的。
20、善用圖像
用戶在網(wǎng)上四處漫游,你必須設(shè)法吸引和維護(hù)他們對你的主頁的注意力。萬維網(wǎng)的其中一個最重大資源是其多媒體能力,所以我們無論如何要善加利用。主頁上最好有醒目的圖像、新穎的畫面、美觀的字款,使其別具特色,令人過目不忘。圖像的內(nèi)容應(yīng)有一定的實(shí)際作用,切忌虛飾浮夸。注意圖畫可以彌補(bǔ)文字之不足,但并不能夠完全取代文字。很多用戶把瀏覽軟件設(shè)定為略去圖像,以求節(jié)省時間他們只看文字。因此,制作主頁時,必須注意將圖像所連接的重要信息或聯(lián)接其他頁面的指示用文字重復(fù)表達(dá)幾次,同時要注意避免使用過大的圖像,如果不得不放置大的圖像在網(wǎng)站上,就最好使用Thumbnails軟件,把圖像的縮小版本的預(yù)覽效果顯示出來,這樣用戶就不必浪費(fèi)金錢和時間去下載他們根本不想看的大圖像。
所有的
超鏈接應(yīng)清晰無誤地向讀者標(biāo)識出來,所有導(dǎo)航性質(zhì)的設(shè)置,像圖像按鈕,都要有清晰的標(biāo)識,讓人看得明白,千萬別光顧視覺效果是熱鬧的,而讓人家不知東西南北。鏈接文本的顏色最好用約定俗成的:未訪問的,藍(lán)色;點(diǎn)擊過的,紫色或栗色。總之,文本鏈接一定要和頁面的其他文字有所區(qū)分,給讀者清楚的導(dǎo)向 。
22、最好不用記數(shù)器
由于
計(jì)數(shù)器也是由程序設(shè)計(jì)成的,顯示計(jì)數(shù)器的過程其實(shí)就是在執(zhí)行一個程序的過程,它需要占用用戶寶貴的上網(wǎng)時間,況且大多數(shù)瀏覽者認(rèn)為計(jì)數(shù)器毫無意義,它們很容易被做假,瀏覽者也不想看廣告。因此筆者建議不要輕易考慮在
你的網(wǎng)站上放置一個醒目的點(diǎn)擊記數(shù)器。你設(shè)計(jì)網(wǎng)站是為了給訪問者提供服務(wù),而不是推銷你自己認(rèn)為重要的東西。如果你顯示你的網(wǎng)站是多么受歡迎,你最好提供一個鏈接,顯示訪問日志。
23、不能忽視錯別字
一個好的網(wǎng)站對設(shè)計(jì)的每一個細(xì)節(jié)都不會放過,哪怕是一個微小的拼寫錯誤都是絕對不能出現(xiàn)的。但是遺憾的是,許多設(shè)計(jì)者都缺少這種技能。確保你拼寫正確,并且格外注意平常容易誤寫的錯別字,要時時刻刻保持一種嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度。
與記數(shù)器一樣,框架在網(wǎng)頁上越來越流行。在大多數(shù)網(wǎng)站上,在屏幕的左邊有一個框架。但是設(shè)計(jì)者立刻就發(fā)現(xiàn),在使用框架時產(chǎn)生了許多的問題。使用框架時如果沒有17英寸的顯示屏幾乎不可能顯示整個網(wǎng)站。框架也使得網(wǎng)站內(nèi)個人主頁不能夠成為書簽。也許更重要的是,搜索引擎常常被框架混淆,從而不能列出你的網(wǎng)站。
如果網(wǎng)站上有聲音或視頻,要保證使用者通過使用某個知名的插件,能夠聽到或看到。如果訪問者沒有所要求的插件,將不得不到其它站點(diǎn)去下載,這樣訪問者有可能就不會返回了。許多站點(diǎn)使用QuickTime、RealPlay和 Shockwave插件。因?yàn)椋S多訪問者并不愿意浪費(fèi)很多時間和金錢去下載可能僅使用一次的插件。
26、使網(wǎng)站具有交互功能
一個
靜態(tài)網(wǎng)頁始終給人一種呆板的感覺,缺少一種活力和生氣。最好在網(wǎng)站上提供一些回答問題的工具以及其他具有交互性能的設(shè)計(jì),使得訪問者能從網(wǎng)站上獲得交互的信息,從而使訪問者有一種參與網(wǎng)絡(luò)建設(shè)的新鮮感和成就感。
設(shè)計(jì)師編輯
第一部分(美術(shù)部分)
結(jié)構(gòu)素描、光影素描、速寫、設(shè)計(jì)素描、戶外寫生
第二部分(靜態(tài)網(wǎng)頁)
Flash CS4:經(jīng)典網(wǎng)頁動畫、廣告、片頭、賀卡設(shè)計(jì)與分析;MTV制作、交互式網(wǎng)站簡介
IllustratorCS4:廣告招牌制作、燈箱廣告、服裝廣告設(shè)計(jì)、企業(yè)徽標(biāo)設(shè)計(jì)、名片設(shè)計(jì)
三大構(gòu)成:平面構(gòu)成、色彩構(gòu)成、立體構(gòu)成
Photoshop美工及網(wǎng)頁配色、排版設(shè)計(jì)、網(wǎng)站框架美工設(shè)計(jì)、網(wǎng)頁logo網(wǎng)頁設(shè)計(jì)、banner設(shè)計(jì);
Illustrator網(wǎng)頁設(shè)計(jì)、網(wǎng)頁
字體設(shè)計(jì)、網(wǎng)頁規(guī)劃設(shè)計(jì)
網(wǎng)站分類編輯
企業(yè)網(wǎng)站主要為了外界了解企業(yè)自身、樹立良好企業(yè)形象、并適當(dāng)提供一定服務(wù)的網(wǎng)站。根據(jù)行業(yè)特性的差別,以及企業(yè)的建站目的和主要目標(biāo)群體的不同,大致可以把企業(yè)網(wǎng)站分為:
基本信息型
主要面向客戶、業(yè)界人士或者普通瀏覽者,以介紹企業(yè)的基本資料、幫助樹立企業(yè)形象為主;也可以適當(dāng)提供行業(yè)內(nèi)的新聞或者知識信息。這種類型網(wǎng)站通常也被形象的比喻為企業(yè)的"web catalog"。
電子商務(wù)型
主要面向供應(yīng)商、客戶或者企業(yè)產(chǎn)品(服務(wù))的消費(fèi)群體,以提供某種直屬于企業(yè)業(yè)務(wù)范圍的服務(wù)或交易、或者為業(yè)務(wù)服務(wù)的服務(wù)或者交易為主;這樣的電子商務(wù)網(wǎng)站建設(shè)可以說是正處于電子商務(wù)化的一個中間階段,由于行業(yè)特色和企業(yè)投入的深度廣度的不同,其電子商務(wù)化程度可能處于從比較初級的服務(wù)支持、產(chǎn)品列表到比較高級的網(wǎng)上支付的其中某一階段。通常這種類型可以形象的稱為"網(wǎng)上xx企業(yè)"。例如,網(wǎng)上銀行、網(wǎng)上酒店等。
多媒體廣告型
主要面向客戶或者企業(yè)產(chǎn)品(服務(wù))的消費(fèi)群體,以宣傳企業(yè)的核心品牌形象或者主要產(chǎn)品(服務(wù))為主。這種類型無論從目的上還是實(shí)際表現(xiàn)手法上相對于普通網(wǎng)站而言更像一個平面廣告或者電視廣告,因此用"多媒體廣告"來稱呼這種類型的網(wǎng)站更貼切一點(diǎn)。
網(wǎng)站格式編輯
靜態(tài)網(wǎng)頁
靜態(tài)網(wǎng)頁多數(shù)為單一的超文本標(biāo)記語言檔案。現(xiàn)今不少網(wǎng)站建設(shè)皆傾向把動態(tài)網(wǎng)頁靜態(tài)化,從而令搜尋引擎最佳化。
動態(tài)網(wǎng)頁
動態(tài)網(wǎng)頁的內(nèi)容隨著用戶的輸入和互動而有所不同,或者隨著用戶、時間、數(shù)據(jù)修正等而改變。網(wǎng)頁上的內(nèi)容也可以由用戶通過使用客戶端描述語言(JavaScript、JScript、Actionscript)來改變。
網(wǎng)頁布局編輯
網(wǎng)頁可以說是網(wǎng)站構(gòu)成的基本元素。當(dāng)我們輕點(diǎn)鼠標(biāo),在網(wǎng)海中遨游,一副副精彩的網(wǎng)頁會呈現(xiàn)在我們面前,那么,網(wǎng)頁的精彩與否的因素是什么呢?色彩的搭配、文字的變化、圖片的處理等,這些當(dāng)然是不可忽略的因素,除了這些,還有一個非常重要的因素——網(wǎng)頁的布局。下面,我們就有關(guān)網(wǎng)頁布局談?wù)撘幌隆?/div>
1、“國”字型
也可以稱為“同”字型,是一些大型網(wǎng)站所喜歡的類型,即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條,接下來就是網(wǎng)站的主要內(nèi)容,左右分列一些兩小條內(nèi)容,中間是主要部分,與左右一起羅列到底,最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型。
2、拐角型
這種結(jié)構(gòu)與上一種其實(shí)只是形式上的區(qū)別,其實(shí)是很相近的,上面是標(biāo)題及廣告橫幅,接下來的左側(cè)是一窄列鏈接等,右列是很寬的正文,下面也是一些網(wǎng)站的
輔助信息。在這種類型中,一種很常見的類型是最上面是標(biāo)題及廣告,左側(cè)是導(dǎo)航鏈接。
3、標(biāo)題正文型
這種類型即最上面是標(biāo)題或類似的一些東西,下面是正文,比如一些文章頁面或注冊頁面等就是這種類。
4、封面型
這種類型基本上是出一些網(wǎng)站的首頁,大部分為一些精美的平面設(shè)計(jì)結(jié)合一些小的動畫,放上幾個簡單的鏈接或者僅是一個“進(jìn)入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分是企業(yè)網(wǎng)站和個人主頁,如果說處理的好,會給人帶來賞心悅目的感覺。
5、“T”結(jié)構(gòu)布局
所謂“T”結(jié)構(gòu)布局,就是指網(wǎng)頁上邊和左邊相結(jié)合,頁面頂部為橫條網(wǎng)站標(biāo)志和廣告條,左下方為主菜單,右面顯示內(nèi)容,這是網(wǎng)頁設(shè)計(jì)中用得最廣泛的一種布局方式。在實(shí)際設(shè)計(jì)中還可以改變“T”結(jié)構(gòu)布局的形式,如左右兩欄式布局,一半是正文,另一半是形象的圖片、導(dǎo)航。或正文不等兩欄式布置,通過
背景色區(qū)分,分別放置圖片和文字等。
這樣的布局有其固有的優(yōu)點(diǎn),因?yàn)槿说淖⒁饬χ饕谟蚁陆牵云髽I(yè)想要發(fā)布給用戶的信,大都能被用戶以最大可能性獲取,而且很方便,其次是頁面結(jié)構(gòu)清晰,主次分明、易于使用。缺點(diǎn)是規(guī)矩呆板,如果細(xì)節(jié)色彩上不注意,很容易讓人“看之無味”。
6、“口”型布局
這是一個形象的說法,指頁面上下各有一個廣告條,左邊是主菜單,右邊是友情鏈接等,中間是主要內(nèi)容。
這種布局的優(yōu)點(diǎn)是頁面充實(shí)、內(nèi)容豐富、信息量大,是綜合性網(wǎng)站常用的版式,特別之處是頂部中央的一排小圖標(biāo)起到了活躍氣氛的作用。缺點(diǎn)是頁面擁擠,不夠靈活。也有將四邊空出,只用中間的窗口型設(shè)計(jì),例如網(wǎng)易壁紙站使用多幀形式,只有頁面中央部分可以滾動,界面類似游戲界面。使用此類版式的有多維游戲娛樂性網(wǎng)站。
7、“三”型布局
這種布局多用于國外網(wǎng)站,國內(nèi)用得不多。其特點(diǎn)是頁面上橫向兩條色塊,將頁面整體分割為4個部分,色塊中大多放廣告條。
8、 對稱對比布局
顧名思義,它指采取左右或者上下對稱的布局,一半深色,一半淺色,一般用于設(shè)計(jì)型網(wǎng)站。其優(yōu)點(diǎn)是視覺沖擊力強(qiáng),缺點(diǎn)是將兩部分有機(jī)地結(jié)合比較困難。
9、POP布局
POP源自廣告術(shù)語,指頁面布局像一張宣傳海報(bào),以一張精美圖片作為頁面的設(shè)計(jì)中心。常用于時尚類網(wǎng)站,優(yōu)點(diǎn)顯而易見:漂亮吸引人,缺點(diǎn)是速度慢。
1、導(dǎo)航菜單使用圖片、flash
2、不恰當(dāng)?shù)厥褂脠D片
3、內(nèi)容里特殊字體的運(yùn)用
4、新窗口打開
5、無實(shí)際意義的特效
6、內(nèi)容滾動
7、用戶難以獲取自己想要的內(nèi)容
8、文件名命名不規(guī)范
9、長篇文章未設(shè)置分頁
10、顏色搭配錯誤,網(wǎng)頁難于閱讀
11、沒有返回指向
12、顯眼的點(diǎn)擊計(jì)數(shù)器
13、使用框架
14、不恰當(dāng)?shù)厥褂寐曇?/div>
15、兼容性不佳
17、急于發(fā)布網(wǎng)站。
1、字間距太擠或太寬
2、行距太小或太大
3、段距太少或太多
4、每行字?jǐn)?shù)太多或太少
最好的方法莫過于模塊化,此前國內(nèi)少有真正優(yōu)秀的網(wǎng)頁模板,PSD吧專注設(shè)計(jì)多年,擁有一批高水準(zhǔn)的設(shè)計(jì)師,PSD吧公開下載頂尖設(shè)計(jì)檔次的模板,并授權(quán)用于商業(yè),可大大提高網(wǎng)頁設(shè)計(jì)的效率。
設(shè)計(jì)誤區(qū)編輯
一、不重視域名和空間
不少企業(yè)在進(jìn)行網(wǎng)頁設(shè)計(jì)時的時候,不注重域名和空間的穩(wěn)定性,隨便找個域名和空間來注冊。一個空間可以存放很多網(wǎng)站,一旦其中一個網(wǎng)站被降權(quán)或被K那將影響到其他的網(wǎng)站,選擇好的、有保障的供應(yīng)商非常重要。
二、注重外觀不注重實(shí)用
很多企業(yè)在進(jìn)行網(wǎng)頁設(shè)計(jì)時,網(wǎng)站注重網(wǎng)站外觀是否漂亮,有的網(wǎng)頁為追求漂亮,用了大量的flash,實(shí)際上flash不利于百度蜘蛛的抓取,不利于企業(yè)開展網(wǎng)絡(luò)營銷,建議企業(yè)在進(jìn)行網(wǎng)頁設(shè)計(jì)時的時候,不僅要重視它的外觀是否漂亮,還要注意網(wǎng)頁是否迎合搜索引擎的喜好。
三、網(wǎng)站維護(hù)的缺乏
很多企業(yè)把網(wǎng)頁建好以后就不管不問了,有的網(wǎng)頁成年累月沒有更新內(nèi)容,這樣百度就無法收錄對于企業(yè)來說,必須找一些專業(yè)人士進(jìn)行網(wǎng)頁內(nèi)容更新。
工作內(nèi)容編輯
1 、負(fù)責(zé)對網(wǎng)站整體表現(xiàn)風(fēng)格的定位,對用戶視覺感受的整體把握;
2、進(jìn)行網(wǎng)頁的具體設(shè)計(jì)制作;
3、產(chǎn)品目錄的平面設(shè)計(jì);
4、各類活動的廣告設(shè)計(jì);
5、協(xié)助開發(fā)人員頁面設(shè)計(jì)等工作。
6、協(xié)助SEO人員完成搜索引擎規(guī)范的網(wǎng)頁。
好處
首要,是做到用戶價(jià)值上的簡單。在中心用戶價(jià)值上只保存最重要的一項(xiàng),其他都可以先舍去。這樣做最大的優(yōu)點(diǎn)是用戶可以很簡單了解你所要表達(dá)的價(jià)值。就好像談到查找引擎用戶就很自然地想到百度。
優(yōu)化問題編輯
框架結(jié)構(gòu)
有些搜索引擎(如FAST)是不支持框架結(jié)構(gòu)的,他們的“蜘蛛”程序無法閱讀這樣的網(wǎng)頁。
頁面結(jié)構(gòu)
DIV+CSS是網(wǎng)頁美工必須了解和掌握的一門技術(shù),互聯(lián)網(wǎng)是屬于
web2.0的時代,主流的網(wǎng)站都采用DIV+CSS結(jié)構(gòu)。
DIV+CSS即是樣式和數(shù)據(jù)分離,利于搜索引擎讀懂網(wǎng)站頁面,提高網(wǎng)頁收錄數(shù)量,最主要是方便管理和維護(hù)網(wǎng)站。
圖像區(qū)塊
除AltaVista、Google和Northern Light(現(xiàn)已停止公共搜索服務(wù))明確支持圖像區(qū)塊鏈接外,其他引擎是不支持它的。當(dāng)“蜘蛛”程序遇到這種結(jié)構(gòu)時,往往會感到茫然不知所措。因此盡量不要設(shè)置Image Map鏈接。
特效鏈接
我們經(jīng)常看到有些網(wǎng)站為導(dǎo)航鏈接加上了特效,如點(diǎn)擊某個項(xiàng)目會展開下層鏈接等。這些效果一般通過Java Script實(shí)現(xiàn),視覺上非常新穎,但在“蜘蛛”程序的眼里則沒那么誘人,相反它無法解讀這種鏈接。為了讓搜索引擎順利檢索到你的網(wǎng)頁,建議還是犧牲掉一些花哨的東西。
FLASH
雖然FLASH制作的網(wǎng)頁視覺效果較好,但搜索引擎對此卻不太感冒,個案表明這一類的網(wǎng)站很難被
百度搜索引擎索引。明智的做法是提供FLASH和非FLASH網(wǎng)頁兩種選擇,這樣即增加了網(wǎng)頁的觀賞性,又照顧到了搜索引擎的情緒。
加密網(wǎng)頁
除非你不希望搜索引擎檢索你的網(wǎng)頁,否則不要給你的網(wǎng)頁加密。
網(wǎng)頁容量
包括圖像在內(nèi)的網(wǎng)頁字節(jié)數(shù)最好不要超過50K。體型龐大的網(wǎng)頁下載速度慢,不僅會讓普通訪問者等得心急如焚,有時也會使“蜘蛛”程序感到不耐煩。
詳細(xì)咨詢電話:0871-67213511 微信:zsf19910720