摘 要：互聯(lián)網(wǎng)應(yīng)用的飛速發(fā)展與普及，使網(wǎng)頁(yè)設(shè)計(jì)形成了一個(gè)新興領(lǐng)域，網(wǎng)站界面設(shè)計(jì)受到越來(lái)越多企業(yè)及開(kāi)發(fā)者的重視，使用Photoshop來(lái)設(shè)計(jì)美觀、簡(jiǎn)潔的網(wǎng)頁(yè)界面是大部分專(zhuān)業(yè)設(shè)計(jì)師和愛(ài)好者的首選，本文通過(guò)網(wǎng)站頁(yè)面設(shè)計(jì)前期的需求分析、以及使用Photoshop對(duì)網(wǎng)頁(yè)中各元素的設(shè)計(jì)技巧、頁(yè)面的整個(gè)結(jié)構(gòu)布局的設(shè)計(jì)，全面的闡述了使用Photoshop設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面的方法與流程。

關(guān)鍵詞：Photoshop；頁(yè)面設(shè)計(jì)；CI設(shè)計(jì)

中圖分類(lèi)號(hào)：TP393.092；TP317.4

隨著網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，電子產(chǎn)品的不斷更新?lián)Q代，智能手機(jī)的不斷普及，互聯(lián)網(wǎng)應(yīng)用達(dá)到了空前的繁榮。在互聯(lián)網(wǎng)中，各種不同行業(yè)、不同種類(lèi)、頁(yè)面精彩吸人眼球的網(wǎng)站頁(yè)面帶給人們強(qiáng)大的視覺(jué)沖擊力的同時(shí)也給人們的生活添加了色彩。在這些精彩頁(yè)面誕生的最初，就是設(shè)計(jì)者根據(jù)用戶需求應(yīng)用Photoshop來(lái)不斷完善并完成頁(yè)面效果圖的過(guò)程，下面就來(lái)闡述一下基于Photoshop的網(wǎng)頁(yè)頁(yè)面的設(shè)計(jì)方法與流程。

1 需求分析

設(shè)計(jì)者與客戶簽訂合同之前，都要看設(shè)計(jì)者的網(wǎng)站頁(yè)面效果圖是否能達(dá)到客戶的預(yù)期要求，那么怎樣能設(shè)計(jì)出讓客戶滿意的效果圖，關(guān)鍵在于正確與全面的了解客戶的需求。精確掌握客戶需求應(yīng)該從以下兩方面著手：

1.1 確定網(wǎng)站類(lèi)型。常見(jiàn)的網(wǎng)站分類(lèi)分為如下幾類(lèi)：（1）綜合性網(wǎng)站：以新浪為例，他的首頁(yè)包括豐富的新聞、資訊、娛樂(lè)、體育等信息，包羅萬(wàn)象，種類(lèi)非常豐富；（2）電子商務(wù)類(lèi)網(wǎng)站：俗稱(chēng)購(gòu)物網(wǎng)站，比如淘寶、聚美優(yōu)品這一類(lèi)網(wǎng)站都可以稱(chēng)為電子商務(wù)類(lèi)網(wǎng)站；（3）娛樂(lè)資訊網(wǎng)站：在互聯(lián)網(wǎng)上看電影、聽(tīng)音樂(lè)已經(jīng)成為人們?nèi)粘Ｉ畹囊徊糠?，土豆網(wǎng)、騰訊視頻等都屬于這類(lèi)網(wǎng)站；（4）社交類(lèi)網(wǎng)站：隨著互聯(lián)網(wǎng)時(shí)代的到來(lái)，人們的交流方式產(chǎn)生很大變化，網(wǎng)絡(luò)交流平臺(tái)給人們溝通學(xué)習(xí)帶來(lái)了巨大的便利，微博、豆瓣、人人網(wǎng)等都是這類(lèi)交互式的網(wǎng)站。

1.2 網(wǎng)站的CI設(shè)計(jì)需求分析。CI（Corporate Image）是指企業(yè)的形象，在網(wǎng)頁(yè)設(shè)計(jì)中，色彩的選擇和搭配結(jié)合Logo和Banner的設(shè)計(jì)，能夠最有效的傳達(dá)企業(yè)形象。（1）Logo設(shè)計(jì)：Logo即標(biāo)志，是商標(biāo)的一種體現(xiàn)，可以是中文，英文字母，可以是符號(hào)，圖案，可以是動(dòng)物或者人物等等，一個(gè)好的Logo能體現(xiàn)出網(wǎng)站的特色和內(nèi)涵[1]；（2）網(wǎng)頁(yè)的標(biāo)準(zhǔn)色彩：“標(biāo)準(zhǔn)色彩”是網(wǎng)站形象和內(nèi)涵的延伸，一個(gè)網(wǎng)頁(yè)的標(biāo)準(zhǔn)色彩不宜超過(guò)三種，太少則太單調(diào)，太多則讓人眼花繚亂。一般來(lái)說(shuō)，適合于網(wǎng)頁(yè)標(biāo)準(zhǔn)色的顏色有：藍(lán)色，黃/橙色，黑/灰/白色三大系列色[2]；（3）網(wǎng)頁(yè)的標(biāo)準(zhǔn)字體：根據(jù)網(wǎng)站的內(nèi)涵，選擇適合的字體，一般網(wǎng)頁(yè)的默認(rèn)字體為宋體；（4）Banner設(shè)計(jì)：可以作為網(wǎng)頁(yè)中的橫幅廣告，也是體現(xiàn)網(wǎng)站中心意旨、情感思想的宣傳中心。

通過(guò)標(biāo)志、色彩、字體、標(biāo)語(yǔ)協(xié)調(diào)統(tǒng)一的設(shè)計(jì)，可以很好的樹(shù)立網(wǎng)站的CI形象。

2 頁(yè)面的基本組成部分與結(jié)構(gòu)圖

一般企業(yè)網(wǎng)站都包括六部分：logo、導(dǎo)航、banner、內(nèi)容、友情鏈接、版權(quán)。根據(jù)不同網(wǎng)站的需求定位，這六個(gè)部分在體現(xiàn)形式上有著不同的延伸和變化，但不管是大型綜合性網(wǎng)站還是小至個(gè)人博客網(wǎng)站，我們都會(huì)找到這六部分的身影。由這六部分組成的網(wǎng)頁(yè)頁(yè)面基本結(jié)構(gòu)圖如圖1所示：

圖1 網(wǎng)頁(yè)基本結(jié)構(gòu)圖

3 在Photoshop中制作網(wǎng)頁(yè)元素的技巧

3.1 Logo制作。Logo不僅僅是將某些顏色與線條的堆疊，它要比品牌的名稱(chēng)更具標(biāo)識(shí)度。在設(shè)計(jì)過(guò)程中，要思考、藝術(shù)分析和系統(tǒng)規(guī)劃。一個(gè)優(yōu)秀的Logo作品，應(yīng)該具備簡(jiǎn)單、動(dòng)態(tài)、靈活、獨(dú)特、有意義這五個(gè)特點(diǎn)，同時(shí)應(yīng)注意顏色的重要性、不要標(biāo)新立異Logo不是藝術(shù)品、不要低估定制字體、不要可預(yù)測(cè)的效果、不要落入俗套。

3.2 Banner制作。一個(gè)優(yōu)秀的Banner作品的主題要明確、重點(diǎn)文字要突出、文字要符合閱讀習(xí)慣、要在最短的時(shí)間激起點(diǎn)擊的欲望、色彩不要過(guò)于醒目、產(chǎn)品數(shù)量不宜過(guò)多、信息數(shù)量要平衡、留空給圖形文字以呼吸的空間。

3.3 導(dǎo)航欄制作。導(dǎo)航欄是繼Logo之后用戶第一個(gè)看到的組件，如何讓導(dǎo)航欄更加優(yōu)雅美麗，在設(shè)計(jì)過(guò)程中應(yīng)主意兩大要點(diǎn)。第一，不要使用一些繁雜的裝飾來(lái)做突出，通過(guò)字體設(shè)計(jì)、懸停效果設(shè)計(jì)、頁(yè)面留白可以設(shè)計(jì)出簡(jiǎn)約、優(yōu)雅的極簡(jiǎn)主義導(dǎo)航欄[3]。第二，響應(yīng)式導(dǎo)航設(shè)計(jì)更完美，根據(jù)用戶終端設(shè)備的不同，按照屏幕尺寸來(lái)合理縮放頁(yè)面，達(dá)到更好的閱讀效果。

3.4 網(wǎng)頁(yè)背景制作。網(wǎng)頁(yè)背景設(shè)計(jì)目前還沒(méi)有一套設(shè)計(jì)準(zhǔn)則可遵循，根據(jù)總結(jié)，我們把網(wǎng)頁(yè)背景大致分為六種類(lèi)型：顏色背景、沙文背景、條狀背景、照片背景、復(fù)合背景、局部背景。一般情況下，考慮到網(wǎng)站的下載速度和網(wǎng)頁(yè)內(nèi)容的顯示效果，我們并不提倡使用圖像作為網(wǎng)頁(yè)背景。

4 使用Photoshop制作網(wǎng)頁(yè)效果圖應(yīng)注意的幾個(gè)問(wèn)題

4.1 主頁(yè)頁(yè)面應(yīng)干凈整潔、條理清晰、專(zhuān)業(yè)水準(zhǔn)、引人入勝。過(guò)多的絢麗、閃爍、下拉式菜單、圖片等會(huì)讓用戶產(chǎn)生無(wú)所適從、心煩意亂的感覺(jué)，導(dǎo)致快速關(guān)閉頁(yè)面。

4.2 導(dǎo)航設(shè)計(jì)要便捷、美觀、全面。導(dǎo)航就如同網(wǎng)站的地圖，導(dǎo)航的設(shè)計(jì)原則要遵循用戶的閱讀邏輯，同樣也要兼顧網(wǎng)站的重點(diǎn)，設(shè)計(jì)好的導(dǎo)航條不能隨意改動(dòng)，否則用戶就會(huì)迷路，找不到原來(lái)瀏覽的內(nèi)容，給用戶帶來(lái)困惑。

4.3 提高頁(yè)面下載速度。網(wǎng)頁(yè)的下載速度是網(wǎng)站留住訪問(wèn)者的關(guān)鍵因素，圖片是影響網(wǎng)頁(yè)下載速度的重要原因，根據(jù)經(jīng)驗(yàn)，把每頁(yè)全部?jī)?nèi)容控制在30K左右可以保證比較理想的下載時(shí)間，圖象在6-8K之間為宜，每增加2K會(huì)延長(zhǎng)1秒鐘的下載時(shí)間。制作好效果圖之后，執(zhí)行Photoshop軟件里“將文件存儲(chǔ)為web和設(shè)備所用格式”命令，對(duì)頁(yè)面進(jìn)行優(yōu)化，控制最終文件所占的存儲(chǔ)空間。

參考文獻(xiàn)：

[1]朱彩華.Photoshop在網(wǎng)頁(yè)版式設(shè)計(jì)中的應(yīng)用與技巧[J].電子技術(shù)與軟件工程，2013（11）.

[2]丁士鋒.網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)實(shí)戰(zhàn)大全[M].北京：清華大學(xué)出版社，2013.

[3]劉麗君，陳強(qiáng).淺談Photoshop在網(wǎng)頁(yè)制作中的應(yīng)用[J].科技廣場(chǎng)，2011（07）.

作者簡(jiǎn)介：邢蕾（1982-），女，講師，碩士，主要研究方向：互聯(lián)網(wǎng)的開(kāi)發(fā)與應(yīng)用。

作者單位：遼寧公安司法管理干部學(xué)院，沈陽(yáng) 110031