什么是網(wǎng)頁(yè)藝術(shù)設(shè)計(jì) ?
網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)是是網(wǎng)頁(yè)設(shè)計(jì)者以所處時(shí)代所能獲取的技術(shù)和藝術(shù)經(jīng)驗(yàn)為基礎(chǔ),依照設(shè)計(jì)目的和要求自覺(jué)地對(duì)網(wǎng)頁(yè)的構(gòu)成元素進(jìn)行藝術(shù)規(guī)劃的創(chuàng)造性思維活動(dòng)。下面詳細(xì)介紹什么是網(wǎng)頁(yè)藝術(shù)設(shè)計(jì),希望為大家?guī)?lái)幫助。 ?
?
網(wǎng)頁(yè)藝術(shù)設(shè)計(jì): ?
網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)是是網(wǎng)頁(yè)設(shè)計(jì)者以所處時(shí)代所能獲取的技術(shù)和藝術(shù)經(jīng)驗(yàn)為基礎(chǔ),依照設(shè)計(jì)目的和要求自覺(jué)地對(duì)網(wǎng)頁(yè)的構(gòu)成元素進(jìn)行藝術(shù)規(guī)劃的創(chuàng)造性思維活動(dòng)。 ?
設(shè)計(jì)活動(dòng)中包含著主觀和客觀兩方面的因素,在確立了網(wǎng)頁(yè)主題之后,首先要明確和熟悉設(shè)計(jì)的對(duì)象和構(gòu)成的要素。網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)涉及的具體內(nèi)容很多,可以概括為視聽元素和版式設(shè)計(jì)兩個(gè)方面。 ?
設(shè)計(jì)內(nèi)容: ?
視聽元素 ?
這里所說(shuō)的視聽元素,主要包括:文本、背景、按鈕、圖標(biāo)、圖像、表格、顏色、導(dǎo)航工具、背景音樂(lè)、動(dòng)態(tài)影像等。無(wú)論是文字、圖形、動(dòng)畫,還是音頻、視頻,網(wǎng)頁(yè)設(shè)計(jì)者所要考慮的是如何以感人的形式把它們放進(jìn)頁(yè)面這個(gè)“大畫布”里。多媒體技術(shù)的運(yùn)用大大豐富了網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的表現(xiàn)力。 ?
以上各視聽元素大多數(shù)瀏覽器本身都可以顯示或收聽,無(wú)需任何外部程序或模塊支持。比如,大部分瀏覽器都可以顯示GIF、JPEG圖形和GIF89a動(dòng)畫。還有些多媒體文件(如MP3音樂(lè))需要先下載到本地硬盤上,然后啟動(dòng)相應(yīng)的外部程序來(lái)播放。另外,在瀏覽器使用插件(Plug-in)可以播放更多格式的多媒體文件。微軟推出IE瀏覽器后,提供了基于OLE的ActiveX技術(shù),用來(lái)在網(wǎng)頁(yè)中播放多媒體。ActiveX已經(jīng)成為熱門技術(shù)。另一種播放多媒體的技術(shù)是JavaApplet。它是用Java語(yǔ)言編寫的應(yīng)用于網(wǎng)頁(yè)之中的小應(yīng)用程序,相比于插件和ActiveX,JavaApplet具有更大的靈活性和良好的跨平臺(tái)能力,因此具有很好的發(fā)展前景。總之,技術(shù)的不斷發(fā)展使多媒體元素在網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)中的綜合運(yùn)用越來(lái)越廣泛,使瀏覽者可以享受到更加完美的視聽效果。這些新技術(shù)的出現(xiàn),也對(duì)網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)提出了更高的要求。 ?
版式設(shè)計(jì) ?
網(wǎng)頁(yè)的版式設(shè)計(jì)同報(bào)刊雜志等平面媒體的版式設(shè)計(jì)有很多共同之處,它在網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)中占據(jù)著重要的地位。所謂網(wǎng)頁(yè)的版式設(shè)計(jì),是在有限的屏幕空間上將視聽多媒體元素進(jìn)行有機(jī)的排列組合,將理性思維個(gè)性化的表現(xiàn)出來(lái),是一種具有個(gè)人風(fēng)格和藝術(shù)特色的視聽傳達(dá)方式。它在傳達(dá)信息的同時(shí),也產(chǎn)生感官上的美感和精神上的享受。 ?
但網(wǎng)頁(yè)的排版與書籍雜志的排版又有很多差異。印刷品都有固定的規(guī)格尺寸,網(wǎng)頁(yè)則不然,它的尺寸是由讀者來(lái)控制的。這使網(wǎng)頁(yè)設(shè)計(jì)者不能精確控制頁(yè)面上每個(gè)元素的尺寸和位置。而且,網(wǎng)頁(yè)的組織結(jié)構(gòu)不像印刷品那樣為線性組合,這給網(wǎng)頁(yè)的版式設(shè)計(jì)帶來(lái)了一定的難度。 ?
什么是網(wǎng)頁(yè)設(shè)計(jì) ?
網(wǎng)頁(yè)設(shè)計(jì)是一種視覺(jué)語(yǔ)言,特別講究編排和布局,雖然主頁(yè)的設(shè)計(jì)不等同于平面設(shè)計(jì),但它們有許多相近之處。版式設(shè)計(jì)通過(guò)文字圖形的空間組合,表達(dá)出和諧與美。 ?
多頁(yè)面站點(diǎn)頁(yè)面的編排設(shè)計(jì)要求把頁(yè)面之間的有機(jī)聯(lián)系反映出來(lái),特別要求處理好頁(yè)面之間和頁(yè)面內(nèi)的秩序與內(nèi)容的關(guān)系。為了達(dá)到*的視覺(jué)表現(xiàn)效果,反復(fù)推敲整體布局的合理性,使瀏覽者有一個(gè)流暢的視覺(jué)體驗(yàn)。 ?
網(wǎng)頁(yè)設(shè)計(jì)(web design,又稱為Web UI design,WUI design,WUI),是根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息(包括產(chǎn)品、服務(wù)、理念、文化),進(jìn)行網(wǎng)站功能策劃,然后進(jìn)行的頁(yè)面設(shè)計(jì)美化工作。作為企業(yè)對(duì)外宣傳物料的其中一種,精美的網(wǎng)頁(yè)設(shè)計(jì),對(duì)于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。 ?
網(wǎng)頁(yè)設(shè)計(jì)一般分為三種大類:功能型網(wǎng)頁(yè)設(shè)計(jì)(服務(wù)網(wǎng)站&B/S軟件用戶端)、形象型網(wǎng)頁(yè)設(shè)計(jì)(品牌形象站)、信息型網(wǎng)頁(yè)設(shè)計(jì)(門戶站)。設(shè)計(jì)網(wǎng)頁(yè)的目的不同,應(yīng)選擇不同的網(wǎng)頁(yè)策劃與設(shè)計(jì)方案。 ?
網(wǎng)頁(yè)設(shè)計(jì)主要以Adobe產(chǎn)品為主,常見的工具包括FW、PS、FL、DW、CDR、AI等,其中DW是代碼工具,其他是圖形圖像和FL動(dòng)畫工具。還有最近幾年Adobe新出的EdgeReflow、EdgeCode、Muse。 ?
什么是自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì) ?
一、什么是自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)? ?
2011年,網(wǎng)頁(yè)設(shè)計(jì)師Aaron Gustafson在他的書《自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)》里率先提出了自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的概念。 ?
?
Adaptive design (自適應(yīng)設(shè)計(jì)):為不同類別的設(shè)備建立不同的網(wǎng)頁(yè),檢測(cè)到設(shè)備分辨率大小后調(diào)用相應(yīng)的網(wǎng)頁(yè)。目前AWD網(wǎng)頁(yè)主要針對(duì)這幾種分辨率(320,480,760,960,1200,1600) ?
和響應(yīng)式網(wǎng)頁(yè)不同,自適應(yīng)設(shè)計(jì)是基于斷點(diǎn)使用靜態(tài)布局,一旦頁(yè)面被加載就無(wú)法再進(jìn)行自動(dòng)適應(yīng),自適應(yīng)會(huì)自動(dòng)檢測(cè)屏幕的大小來(lái)加載適當(dāng)?shù)墓ぷ鞑季?。因此,?dāng)您在電腦上打開瀏覽器瀏覽網(wǎng)頁(yè)時(shí),該網(wǎng)站會(huì)自動(dòng)檢測(cè)并選擇該桌面屏幕的*布局。 ?
二、如何做自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)? ?
基礎(chǔ)的網(wǎng)頁(yè)設(shè)計(jì)涵蓋了幾大重要環(huán)節(jié): ?
前期的原型設(shè)計(jì)(工具:Axure,Mockplus)UX設(shè)計(jì)(工具:Justinmind)UI設(shè)計(jì)(工具:Sketch)后期的前后端,HTML,CSS, JS. ?
而做好自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)則需要遵循以下幾個(gè)步驟: ?
Step 1. Meta 標(biāo)簽 ?
為了適應(yīng)屏幕,不少移動(dòng)瀏覽器都會(huì)把HTML頁(yè)面置于較大視口寬度(一般會(huì)大于屏幕寬度),你可以使用viewport meta標(biāo)簽來(lái)設(shè)定。以下viewport meta標(biāo)簽告訴瀏覽器視口寬度等于設(shè)備屏幕寬度,且不進(jìn)行初始縮放: ?
Step 2. HTML結(jié)構(gòu) ?
在這個(gè)例子中,頁(yè)面布局包括 Header, Content, Sidebar和Footer. Header固定高度為180px, Content寬600px, Sidebar寬300px。 ?
Step 3. Media Queries ?
CSS3 media query是自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵,就像高級(jí)語(yǔ)言里的if條件語(yǔ)句,告訴瀏覽器根據(jù)不同的視口寬度(這里等于瀏覽器寬度)來(lái)渲染網(wǎng)頁(yè)。 ?
網(wǎng)頁(yè)設(shè)計(jì)和web前端的區(qū)別 ?
web前端通常稱為軟件設(shè)計(jì)或者美工,普遍工資確實(shí)要比網(wǎng)頁(yè)設(shè)計(jì)高,因?yàn)檐浖氖召M(fèi)比網(wǎng)頁(yè)或者網(wǎng)站高多了,一個(gè)網(wǎng)站收費(fèi)過(guò)萬(wàn)就算比較高了,而軟件隨隨便便就是好幾萬(wàn)的,一二十萬(wàn)、幾十萬(wàn)甚至上百萬(wàn)的都也是正常,但是網(wǎng)站的制作周期比較短,小點(diǎn)的網(wǎng)站通常是一兩周之內(nèi)就可以完成,而軟件的周期短則幾個(gè)月、半年,長(zhǎng)則一年幾年都有可能,像我們公司就是給**做監(jiān)控及統(tǒng)計(jì)軟件的,每個(gè)項(xiàng)目隨隨便便都是半年以上的制作周期,收費(fèi)嘛自然也比較高,有個(gè)項(xiàng)目都做了3年了,不過(guò)這個(gè)項(xiàng)目是個(gè)長(zhǎng)期項(xiàng)目,不斷的提交又不斷的增加新功能而已; ?
話說(shuō)回來(lái),網(wǎng)頁(yè)設(shè)計(jì)和web前端其實(shí)差別并不太大,對(duì)于設(shè)計(jì)師來(lái)說(shuō)兩者也就是界面模式不同而已,對(duì)于熟練的設(shè)計(jì)師來(lái)說(shuō),兩者之間可以很好的轉(zhuǎn)換,頁(yè)面/界面布局的方式其實(shí)還是一樣的,使用的也還算div+css布局; ?
我本人做這行已經(jīng)8年了,剛開始做了2年的網(wǎng)頁(yè)設(shè)計(jì),后來(lái)轉(zhuǎn)了軟件設(shè)計(jì)一直做到現(xiàn)在,老實(shí)說(shuō)做軟件設(shè)計(jì)確實(shí)是工資高了,工作也更輕松了,因?yàn)樽鼍W(wǎng)頁(yè)的公司普遍規(guī)模都不大,為了能有收益必須大量的接單,這也勢(shì)必造成工作量很大,但是設(shè)計(jì)公司又普遍是有項(xiàng)目提成的,所以工資有時(shí)候反而比做軟件的高,做軟件的普遍是拿固定工資的,所以說(shuō)兩者的工資水平并不是絕對(duì)的,只能說(shuō)做軟件更輕松一些 ?