網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)

2011-12-26    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 包裝設(shè)計(jì) 、 圖標(biāo)定制 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

(一)垃圾還是經(jīng)典
網(wǎng)頁(yè)技術(shù)更新很快,一個(gè)網(wǎng)站的界面設(shè)計(jì)壽命僅僅2-3年而已。不管是垃圾還是精品,都沒(méi)有所謂的經(jīng)典。經(jīng)典只存在于是哪個(gè)首次成功創(chuàng)新性的應(yīng)用。網(wǎng)頁(yè)設(shè)計(jì) 者不管自己的學(xué)識(shí)、技術(shù)和經(jīng)驗(yàn)如何,都自以為自己吊的不得了,這可能是源與商業(yè)設(shè)計(jì)自我意識(shí)體現(xiàn)的強(qiáng)烈主觀因素。一個(gè)閉門(mén)造車(chē)者做出的東西,是遠(yuǎn)遠(yuǎn)趕不上 綜合借鑒者的。網(wǎng)頁(yè)設(shè)計(jì)不同于其他藝術(shù),在模仿加創(chuàng)新的網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域當(dāng)中,即便是完全自己設(shè)計(jì)的,也是沿用了人們已經(jīng)認(rèn)同的大部分用戶(hù)習(xí)慣,而且這種沿襲 的痕跡時(shí)非常的明顯!還有那個(gè)設(shè)計(jì)者敢腆著臉說(shuō),這都是我自己的原創(chuàng)設(shè)計(jì)?對(duì)于業(yè)界來(lái)說(shuō),經(jīng)典只是個(gè)理念和象征!

(二)國(guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)環(huán)境
不可否認(rèn),國(guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)環(huán)境目前還停留在初級(jí)的認(rèn)知階段,也就是說(shuō),絕大多數(shù)人不知道網(wǎng)絡(luò)的真正的可用之處,你去做一個(gè)業(yè)務(wù)的時(shí)候,不得不去做大量的說(shuō)服 教育工作。以乙方的身份去說(shuō)服甲方,以專(zhuān)業(yè)角度去教育非專(zhuān)業(yè)認(rèn)識(shí),結(jié)果是可想而知的。也正是這種全體社會(huì)普遍的低認(rèn)知水平,導(dǎo)致了大量網(wǎng)絡(luò)垃圾的產(chǎn)生。

舉個(gè)簡(jiǎn)單的例子,看看“阿里巴巴”中文和英文兩個(gè)版本的頁(yè)面。中文版主色是橙色(與標(biāo)志色統(tǒng)一),英文版是極不協(xié)調(diào)的藍(lán)橙(具有很明顯的生湊效果)。

為啥中文版是橙色,呵呵,不要以為哪是為了和標(biāo)志統(tǒng)一,其實(shí)那時(shí)國(guó)內(nèi)最常用的商業(yè)色。橙色代表什么?肉色,淫欲。商業(yè)是性質(zhì)?貪婪、拜金。對(duì)于社會(huì)主義初 級(jí)階段群眾的普遍思想來(lái)說(shuō),橙色就是最突出的體現(xiàn),它不僅僅是網(wǎng)頁(yè)首選商業(yè)色,它還體現(xiàn)了當(dāng)今社會(huì)經(jīng)濟(jì)發(fā)展條件下的“浮躁”和“糜爛”,它還說(shuō)明了“低認(rèn) 知水平”的國(guó)人,需要用這個(gè)刺激的顏色,去宣教引領(lǐng)他們被動(dòng)接受。

為啥英文版是藍(lán)橙?因?yàn)檠笕艘烟幱诎l(fā)達(dá)社會(huì),他們首先需要的不是“宣教引領(lǐng)”,而是“功能”。一個(gè)弱化的界面更能強(qiáng)化顯示功能,使人方便使用。較刺激熱烈 的顏色,會(huì)引起洋人的反感,所以用的淺藍(lán)灰色。那么為什么又會(huì)出現(xiàn)極不協(xié)調(diào)的橙色捏?原因有二,一是要與標(biāo)志顏色統(tǒng)一,二是中英文要有傳承,所以出了這末 個(gè)一半是火焰一半世海水的結(jié)果。

明白了嗎?社會(huì)主義初級(jí)階段界定了各行業(yè)都在一個(gè)初級(jí)階段,這個(gè)初級(jí)階段歸根結(jié)底是由“經(jīng)濟(jì)發(fā)達(dá)水平”決定的。同樣,決定網(wǎng)頁(yè)設(shè)計(jì)的也是“經(jīng)濟(jì)發(fā)達(dá)水平”,而不是個(gè)人的設(shè)計(jì)水平和思想理念。

(三)什么是好的網(wǎng)頁(yè)設(shè)計(jì)
(1)內(nèi)容和功能決定表現(xiàn)形式和界面設(shè)計(jì)
常常拿到的任務(wù)是一張小紙條,上面兩句話,叫你去做一個(gè)網(wǎng)站設(shè)計(jì)。有的人看看紙條就去設(shè)計(jì)頁(yè)面了憑,憑兩句話,你就可以為客戶(hù)做一個(gè)頁(yè)面設(shè)計(jì),以我7、8年的設(shè)計(jì)經(jīng)驗(yàn),我都不敢去做,你真是我的偶像阿!

做網(wǎng)頁(yè)設(shè)計(jì),你需要了解客戶(hù)的東西很多:
1、建站目的
2、欄目規(guī)劃及每個(gè)欄目的表現(xiàn)形式及功能要求
3、主色、客戶(hù)性別喜好、聯(lián)系方式、舊版網(wǎng)址、偏好網(wǎng)址
4、根據(jù)行業(yè)和客戶(hù)要求,那些要著重表現(xiàn)
5、是否分期建設(shè)、考慮后期的兼容性
6、客戶(hù)是否有強(qiáng)烈的建站欲望
7、你是否能在精神意識(shí)上控制住客戶(hù)
8、面對(duì)你未接觸的技術(shù)知識(shí),你有底嗎?
等等...

當(dāng)你把這些內(nèi)容都了解清除了時(shí)候,你的大腦中就已經(jīng)給這個(gè)網(wǎng)站有個(gè)全面而形象的定位了,這時(shí)才是有的放矢去做界面設(shè)計(jì)的時(shí)候了。

(2)界面弱化
一個(gè)好的界面設(shè)計(jì)它的界面時(shí)弱化的,它突出的是功能,著重體現(xiàn)的是網(wǎng)站業(yè)提供給使用者是主要什么。這就涉及到瀏覽順序、功能分區(qū)等等。
要讓訪客在0.5內(nèi)就能把握網(wǎng)站的行業(yè)性質(zhì),1秒內(nèi)就知道該從哪個(gè)地方開(kāi)始使用這個(gè)網(wǎng)站,能點(diǎn)一此的,絕不點(diǎn)第二次。當(dāng)然上面說(shuō)的是大多數(shù)功能性網(wǎng)站,對(duì) 于宣戰(zhàn)展示性網(wǎng)站,諸如加的或Flash網(wǎng)站,可能就不得不花哨一些,但不能太過(guò)分。網(wǎng)站不是動(dòng)畫(huà)片,在效率越來(lái)越高,社會(huì)心理越來(lái)越浮躁的中國(guó),人 們的耐心越來(lái)越小,心理承受能力越來(lái)越低。效果可以體現(xiàn)意境,點(diǎn)到為止。

(3)模塊化和可修改性強(qiáng)
模塊化不僅可以提高重用性,也能統(tǒng)一網(wǎng)站風(fēng)格,還可以降低程序開(kāi)發(fā)的強(qiáng)度。這里就設(shè)計(jì)一些尺寸、模數(shù)、寬容度、命名規(guī)范等等知識(shí)了,不再冗述。
,無(wú)論是架構(gòu)還是模塊或圖片,都要考慮可修改性強(qiáng)。舉個(gè)簡(jiǎn)單的例子,logo、按鈕等,很多人喜歡制作圖片,N個(gè)按鈕就是N張圖片。如果只做3-5類(lèi)按鈕 的背景圖片,然后用在網(wǎng)頁(yè)代碼里打上文字,那么修改起來(lái)就簡(jiǎn)單了,讓程序員自己改字就可以了。然而網(wǎng)頁(yè)顯示的字體是帶有鋸齒的,一般即能清晰又保證美觀的 字體字號(hào)有幾類(lèi):
宋體 12px | 宋體 12px 粗體 | 宋體 14px | 宋體 14px 粗體 | 黑體 20px | verdana 9px | Arial Black 12px+ |


(4)創(chuàng)藝是可恥的,分析能力遠(yuǎn)比創(chuàng)藝來(lái)的重要
設(shè)計(jì)界動(dòng)輒就大談什么“創(chuàng)意”,我要說(shuō)的是,還沒(méi)有搞清目的意義內(nèi)容,還沒(méi)在技術(shù)制作上臻于完善的基礎(chǔ)上班,用創(chuàng)藝和來(lái)迷惑客戶(hù)和訪客是可恥的。一個(gè)網(wǎng)也設(shè)計(jì)者的分析能力遠(yuǎn)比創(chuàng)藝來(lái)的重要。

(5)兼顧還是拋棄
CSS、XHTML、web2.0、Ajax等等山雨欲來(lái),學(xué)習(xí)先進(jìn)技術(shù)固然是有好處的,但對(duì)于目前國(guó)內(nèi)普遍的低認(rèn)知水平,決定了客戶(hù)的需求和價(jià)格也是相當(dāng)?shù)偷摹V?,說(shuō)到經(jīng)濟(jì)決定網(wǎng)也設(shè)計(jì),所以有的時(shí)候,是不允許你做出更多的兼顧的,拋棄和放棄也是無(wú)奈之舉。

(四)結(jié)尾,送上我的《簡(jiǎn)明網(wǎng)頁(yè)設(shè)計(jì)理念》

(一)網(wǎng)頁(yè)配色基本概念

(1)白紙黑字是永遠(yuǎn)的主題,誰(shuí)都說(shuō)不出不好來(lái)。

(2)網(wǎng)頁(yè)最常用流行色

·蘭色——藍(lán)天白云,沉靜整潔的顏色。
·綠色——綠白相間,雅致而有生氣。
·橙色——活潑熱烈,標(biāo)準(zhǔn)商業(yè)色調(diào)。
·暗紅——寧重、嚴(yán)肅、高貴,需要配黑和灰來(lái)壓制刺激的紅色,

(3)顏色的忌諱

·忌臟 ——背景與文字內(nèi)容對(duì)比不強(qiáng)烈,灰暗的背景令人沮喪!
·忌純 ——艷麗的純色對(duì)人的刺激太強(qiáng)烈抗議,缺乏內(nèi)涵。
·忌跳 ——再好看的顏色,也不能脫離整體。脫離群眾是自取其辱!
·忌花 ——要有一種主色貫穿其中,主色并不時(shí)面積最大的顏色,而是最重要,最能揭示和反映主題的顏色,就象領(lǐng)導(dǎo)者一樣,雖然在人數(shù)上居少數(shù),但起決定作用。
·忌粉 ——顏色淺固然顯的干凈,但如果對(duì)比過(guò)弱,整得蒼白無(wú)力了,就象病夫一樣無(wú)可救藥。
·藍(lán)色忌純,綠色忌黃,紅色忌艷。

(4)幾種固定搭配

·藍(lán) 白橙——藍(lán)為主調(diào)。白底,藍(lán)標(biāo)題欄,橙色按鈕或ICON做點(diǎn)綴。
· 白蘭——綠為主調(diào)。白底,綠標(biāo)題欄,蘭色或橙色按鈕或ICON做點(diǎn)綴。
· 白紅——橙為主調(diào)。白底,橙標(biāo)題欄,暗紅或桔紅色按鈕或ICON做點(diǎn)綴。
·暗紅 黑——暗紅主調(diào)。黑或灰底,暗紅標(biāo)題欄,文字內(nèi)容背景為淺灰色。

(二)網(wǎng)頁(yè)設(shè)計(jì)理念

(1)內(nèi)容決定形式
先把內(nèi)容充實(shí)上,再分區(qū)塊,再定色調(diào),再處理細(xì)節(jié)。

(2)先整體,后局部,最后回歸到整體。
全局考慮,把能填上的都填上,占位置。然后定基調(diào),分模塊設(shè)計(jì)。最后調(diào)整不滿(mǎn)意的幾個(gè)局部細(xì)節(jié)。

(3)功能決定設(shè)計(jì)方向
·看網(wǎng)站的用途,決定設(shè)計(jì)思路.商業(yè)性的就要突出贏利目的;政府型的就要突出形象和權(quán)威性的文章;教育性的,就要突出師資和課程。

(三)如何快速的完成設(shè)計(jì)工作

(1)天下文章一大抄。
就看你會(huì)抄不會(huì)抄。抄的是道念,思想,局部精致的點(diǎn)綴。
在網(wǎng)上搜索同類(lèi)網(wǎng)站,找?guī)讉€(gè)順眼的,用一個(gè)為基本蘭圖,把幾個(gè)優(yōu)點(diǎn)整和成自己的,這樣最快捷,而且還出成果,能學(xué)到很多東西。

(2)上設(shè)計(jì)論壇,找參考資料。

日歷

鏈接

個(gè)人資料

存檔