網(wǎng)頁(yè)設(shè)計(jì)進(jìn)階之三：設(shè)計(jì)步驟及思考

與之前的步驟不同,這是實(shí)際操作的步驟.本文包括了大局的步驟和欄目,圖片,小到一個(gè)圖標(biāo)的選取等等等等,可能會(huì)漏掉很多的東西.歡迎補(bǔ)充.我只是引導(dǎo)你去思考,本章絕對(duì)不是網(wǎng)頁(yè)的標(biāo)準(zhǔn)制作步驟,我相信也沒(méi)有什么標(biāo)準(zhǔn)的制作步驟.
      本章的設(shè)計(jì)步驟是建立在網(wǎng)頁(yè)設(shè)計(jì)進(jìn)階之一 (步驟和大局觀)之上的.可能會(huì)涉及一些平面相關(guān)的知識(shí).和網(wǎng)頁(yè)與平面的比較.網(wǎng)頁(yè)與平面的區(qū)別我會(huì)在以后在寫(xiě).
      本章所講的基于PHOTOSHOP軟件制作.
      本章印證了網(wǎng)頁(yè)90%是排版這句話(huà).
      遵循從整體到局部的順序.

1:在定位的基礎(chǔ)上,搞明白自己要做什么.
      這句其實(shí)不用解釋了.你要明白的是我要做的站大概有什么樣的效果,并有例子在腦海里浮現(xiàn).要做的這個(gè)站屬于什么樣的行業(yè),這個(gè)行業(yè)的站都有什么共同的特點(diǎn).

2:你的目標(biāo)/效果和你希望達(dá)到的目標(biāo)/效果是怎么樣的.你設(shè)計(jì)的目標(biāo),與客戶(hù)的目標(biāo)和公司領(lǐng)導(dǎo)的目標(biāo)是否一致,有什么區(qū)別.

3:你要如何去做,怎樣去做,用什么樣的手法手段,來(lái)達(dá)到你的目標(biāo)/效果.又用怎樣的設(shè)計(jì)來(lái)強(qiáng)化和突出這個(gè)效果.

4:你的布局,應(yīng)該怎樣和你的設(shè)計(jì)搭配,怎樣來(lái)突出你的思路.

5:是否有不同的風(fēng)格,是否只是顏色上的變換.(將所有含有顏色的背景層保留)

這幾步,是在動(dòng)手之前要寫(xiě)下來(lái)的.甚至有更詳細(xì)的功能和版面的東西,自己搞定吧.

下面才是真正的動(dòng)手設(shè)計(jì)的步驟.

1:確定分辨率.和不同分辨下對(duì)應(yīng)的效果.
      與平面的載體的不同,決定了網(wǎng)頁(yè)具有比平面更靈活的表達(dá)方式.
      站點(diǎn)的滿(mǎn)屏概念其實(shí)是分相對(duì)和絕對(duì)兩種,相對(duì)的,是針對(duì)當(dāng)前分辨率的滿(mǎn)屏.而絕對(duì)滿(mǎn)屏幕,則是不同的顯示器不同的分辨率下都是滿(mǎn)屏,一般我會(huì)給出一個(gè)最小分辨率,最大到無(wú)限.相對(duì)滿(mǎn)屏,比如1024×768,800×600等.最好是用絕對(duì)寬度來(lái)定義,就是像素為單位.而絕對(duì)滿(mǎn)屏,則用百分比.
      在確定分辨率之后,你的PS圖要比實(shí)際設(shè)計(jì)的圖要大.要考慮用戶(hù)使用高于你設(shè)計(jì)的分辨率下,網(wǎng)頁(yè)以怎樣的形式表達(dá),是居左,還是居中,還是靠在右邊.

2:大背景,3條輔助線及邊界處理.結(jié)構(gòu)(頭部,中間,底部的大概位置.)
      整體是否有背景.
      左邊界線,右邊界線,和中間線.
      如果是絕對(duì)寬度的設(shè)計(jì),那么用戶(hù)使用較高分辨率瀏覽時(shí),內(nèi)容與多出的屏幕是否有分割.
      結(jié)構(gòu),究竟是上中下結(jié)構(gòu),還是左中右結(jié)構(gòu),還是其他的.每一塊,大概放什么內(nèi)容.


3:導(dǎo)航和標(biāo)志.
        網(wǎng)站的100-1%是導(dǎo)航.這是一句被傳爛了的話(huà).
        你的導(dǎo)航是長(zhǎng)的還是短的,是橫的還是豎的.還是弧形的.是否有下拉菜單.比重各是多少.和標(biāo)志處在什么位置.各語(yǔ)言版面入口在哪里.登陸(后臺(tái)管理/用戶(hù)/MAIL)在什么位置,標(biāo)志附近是否有點(diǎn)睛一般的廣告詞.
        好了,我們進(jìn)行下一步.


4:banner同導(dǎo)航,和過(guò)度.
        導(dǎo)航跟banner是分開(kāi)的還是在一起的.在一起的話(huà)你是否采用flash制作,如不用flash制作,你設(shè)計(jì)的背景是否適合切割成平鋪的背景,怎樣讓背景圖片體積最小.記住不要用2×2的背景做平鋪.banner是占據(jù)了整個(gè)寬度,還是只是一部分.如果是一部分,那么空出的地方你準(zhǔn)備放什么東西.

5:主體內(nèi)容部分.
        我的中間是左右機(jī)構(gòu),還是一大塊,還是左中右結(jié)構(gòu)的.每一塊的分割采用什么手法.顏色以怎么樣的規(guī)則變化.然后將內(nèi)容填充進(jìn)去.

6:底部版權(quán)信息及其他.

7:不同的風(fēng)格的調(diào)整.

基本是這些.我理不清頭緒,寫(xiě)出來(lái)的這些自己基本都不滿(mǎn)意,但總可以讓自己規(guī)避很多的問(wèn)題吧.

關(guān)于圖片和小圖標(biāo)的選擇:

圖片選擇遵循以下幾點(diǎn)要素:
1:必須有一個(gè)鮮明的主題.
2:圖片盡量有懸念.
3:突出的內(nèi)容只有一個(gè)(圖片突出的內(nèi)容只有一個(gè),版面也一樣)
4:從目標(biāo)對(duì)象或目標(biāo)服務(wù)對(duì)象來(lái)考慮圖片的選擇.
5:要善于從做背景.
6:新手盡量大面積留白.
7:新手慎用弧.

圖標(biāo)選擇注意要素:
1:圖標(biāo)表達(dá)意思與title相適應(yīng)
2:同色系或統(tǒng)一風(fēng)格.
3:學(xué)會(huì)突破(圖標(biāo)不受title的背景限制)
4:圖標(biāo)大小要特別注意.
5:善用圓角.(與弧不同)
6:要便于記憶.
7:盡量避免重復(fù)(純裝飾除外,重復(fù)刺激效果的除外)