網(wǎng)頁設(shè)計(jì)!教你如何設(shè)計(jì)網(wǎng)頁
首先,大家要先知道,什么是網(wǎng)頁設(shè)計(jì),很多人會(huì)說,網(wǎng)頁設(shè)計(jì)不就是文字和圖片的組合嗎?沒錯(cuò),網(wǎng)頁中包括文字、圖片、視頻等元素,但是僅僅把這些元素排在一起就是網(wǎng)頁了嘛,顯然不是。
網(wǎng)頁設(shè)計(jì)其實(shí)是一個(gè)感性思考與理性分析相結(jié)合的過程,對(duì)設(shè)計(jì)師自身的美感以及對(duì)版面的把握都有較高的要求。經(jīng)過這幾年網(wǎng)頁設(shè)計(jì)的經(jīng)驗(yàn),總結(jié)了以下幾點(diǎn),供大家參考。
網(wǎng)頁設(shè)計(jì)的尺寸
網(wǎng)頁設(shè)計(jì)的版面尺寸沒有固定的標(biāo)準(zhǔn),和顯示器的大小以及分辨率有關(guān),設(shè)計(jì)的時(shí)候要考慮多種分辨率的情況,一般將寬度設(shè)置在768像素以內(nèi),就不會(huì)出現(xiàn)水平滾動(dòng)條,高度則視版面和內(nèi)容而定。例如,在分辨率為1440*768像素情況下,將網(wǎng)頁內(nèi)容保持在1002像素以內(nèi)的話,高度在612-615像素之間,就不會(huì)出現(xiàn)滾動(dòng)條和垂直滾動(dòng)條了。
2. 網(wǎng)頁設(shè)計(jì)的程序
很多小伙伴們一拿到產(chǎn)品經(jīng)理的原型之后,就開始百度各種設(shè)計(jì)素材,開始拼素材之旅,照著原型開始設(shè)計(jì)界面,也許你能夠拼湊出領(lǐng)導(dǎo)滿意的界面,但是你永遠(yuǎn)都不會(huì)進(jìn)步,永遠(yuǎn)都只是個(gè)美工,而成為不了真正的UI設(shè)計(jì)師。拼素材,首先不說版權(quán)問題,就看各類網(wǎng)站千篇一律的素材,你即使再怎么努力排版設(shè)計(jì),都設(shè)計(jì)不出真正“高大上”的界面。素材問題后面的設(shè)計(jì)文章會(huì)另外跟大家分享自己素材創(chuàng)作的經(jīng)驗(yàn)。
今天要跟大家說的是網(wǎng)頁設(shè)計(jì)的程序,沒有程序,你的設(shè)計(jì)將會(huì)雜亂無章,無從下手
第一:分析定位
這一階段根據(jù)網(wǎng)站的性質(zhì)來確定設(shè)計(jì)風(fēng)格,確定設(shè)計(jì)思路,比如你要設(shè)計(jì)的是汽車網(wǎng)站,汽車給人的感覺是動(dòng)感,時(shí)尚,而你設(shè)計(jì)成可愛風(fēng)格,對(duì)不起 ,那你就準(zhǔn)備定加班餐吧- -
第二:設(shè)計(jì)構(gòu)思
這一階段根據(jù)客戶所提供的圖片,文字、視頻等內(nèi)容進(jìn)行大致位置規(guī)劃,也就是設(shè)計(jì)布局;绢愋陀袧M版型、分割性、曲線形、對(duì)稱性等,可以根據(jù)不同網(wǎng)站的行業(yè)屬性、進(jìn)行選擇(PS:網(wǎng)站的版式布局后續(xù)會(huì)跟大家一起分享)
第三:方案設(shè)計(jì)階段
這一階段,往往會(huì)暴露出很多問題,要逐一分析解決,結(jié)合版面色彩,構(gòu)圖等元素綜合考慮,制作出稿件,供客戶審核。
為了保證整個(gè)網(wǎng)站風(fēng)格的統(tǒng)一,需要盡可能將logo放在每個(gè)頁面上最突出的位置,要突出你的標(biāo)注顏色,要有一句反映主題的宣傳口號(hào),相同類型的圖片要做統(tǒng)一的效果處理,例如在網(wǎng)站出現(xiàn)的標(biāo)題都有描邊投影效果,其他頁面都應(yīng)該是一致的。
色彩搭配方面,為了使版面統(tǒng)一在一種色彩上,通過調(diào)整明度,純度,以形成豐富的層次感;或者選擇兩個(gè)具有對(duì)比效果的顏色,形成視覺沖擊?傊,要使整個(gè)網(wǎng)站保持統(tǒng)一的色彩感覺。
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 設(shè)計(jì)欣賞,汽車儀表盤UI設(shè)計(jì)欣賞。
- 設(shè)計(jì)知識(shí),聊聊設(shè)計(jì)細(xì)節(jié)的重要性
- 設(shè)計(jì)知識(shí),學(xué)修圖要不要學(xué)習(xí)骷髏頭結(jié)構(gòu)
- UI設(shè)計(jì)師的技能提升
- 色彩知識(shí),講解PS工具中的顏色模式
- PS新手理論之:高斯模糊與高反差保留
- 顏色搭配,新手如何快速學(xué)會(huì)搭配顏色(一)
- 經(jīng)典的Photoshop技巧大全~選擇技巧
- Photoshop圖層混合模式中圖層互疊所產(chǎn)生的效果原理
- Photoshop教程:圖層遮罩使用方法