下層網(wǎng)頁(yè)設(shè)計(jì)的注意事項(xiàng)
一般設(shè)計(jì)師都會(huì)接觸到很多“下層網(wǎng)頁(yè)設(shè)計(jì)”,為了避免設(shè)計(jì)之中的麻煩,小編給大家總結(jié)了一些需要注意的要點(diǎn)。一起來(lái)看看吧!
下層網(wǎng)頁(yè)設(shè)計(jì)就是,根據(jù)主設(shè)計(jì)師設(shè)計(jì)的主頁(yè)面進(jìn)行下層頁(yè)面的制作。對(duì)于頁(yè)面較多的網(wǎng)站,會(huì)經(jīng)常這樣分工協(xié)作。在拿到首頁(yè)設(shè)計(jì)時(shí),首先要對(duì)整體仔細(xì)確認(rèn)。如果這一步?jīng)]有認(rèn)真做,接下來(lái)的頁(yè)面就會(huì)陷入不斷修正的麻煩之中。
1、網(wǎng)站的目的
入手下層網(wǎng)頁(yè)設(shè)計(jì)的第一件事,就是了解主設(shè)計(jì)師在設(shè)計(jì)主頁(yè)面時(shí)的思路。如果不了解這個(gè)思路,就可能會(huì)和原有的設(shè)計(jì)意圖有偏頗,導(dǎo)致返工。因此,不明白的地方和在意的細(xì)節(jié)都要好好確認(rèn)。這樣,如果在設(shè)計(jì)的時(shí)候能有明確的目的,和主頁(yè)面有區(qū)別的地方也會(huì)比較容易思考了。
2、使用的字體
一個(gè)網(wǎng)站給人的印象是會(huì)受字體所影響的。如果字體不統(tǒng)一,就會(huì)跟人一種進(jìn)入了不同網(wǎng)站的感覺。標(biāo)題和正文的字體一定要區(qū)分開來(lái)。另外,主頁(yè)面沒有使用的字體盡量不要使用。因此,在著手設(shè)計(jì)之前最好提前確認(rèn)準(zhǔn)備好。
3、文本的規(guī)則
字體接下來(lái)就是樣式。這一點(diǎn)很容易造成不統(tǒng)一,所以要特別注意。細(xì)分一下需要確認(rèn)的主要有三個(gè)重要點(diǎn)。
a.頁(yè)面標(biāo)題、目錄和正文的字號(hào)
一般來(lái)說(shuō)下層頁(yè)面會(huì)使用和主頁(yè)面一樣的字號(hào),每個(gè)頁(yè)面正文所使用的文本樣式都會(huì)相同。在PS中有“庫(kù)”的功能,登錄之后就可以很輕松地為開始制作做好準(zhǔn)備。另外,在對(duì)字號(hào)進(jìn)行調(diào)節(jié)的時(shí)候,也有為了保證印象將跳躍率調(diào)整為同樣的情況。
b.字間距、行間距
文字的行間距如果發(fā)生變化,整個(gè)頁(yè)面給人的印象就會(huì)因此不同,所以下層頁(yè)面要保證和主頁(yè)面統(tǒng)一。在不得不隨著文字的多少和內(nèi)容發(fā)生變化的時(shí)候,也不要增加太多的規(guī)則。
c.語(yǔ)言的使用
雖然不是直接和設(shè)計(jì)有關(guān),但是同樣的內(nèi)容卻使用不同的語(yǔ)言會(huì)造成混亂。詞尾也同樣,會(huì)根據(jù)持有的印象不同而變化,因此有注意的必要。
4、色彩
確認(rèn)使用的顏色。使用太多的顏色將會(huì)很難實(shí)現(xiàn)統(tǒng)一感,主要的部分也會(huì)變得不突出。
a.主色和點(diǎn)綴色
要確認(rèn)頁(yè)面中使用的主色和點(diǎn)綴色,記錄好色號(hào)。
b.文字色
保證不同的頁(yè)面使用的文字顏色統(tǒng)一,掌握好不同位置的文字所用的顏色。根據(jù)想要醒目一些的內(nèi)容,注釋的內(nèi)容等,要有層次感的變化,根據(jù)各個(gè)頁(yè)面建立統(tǒng)一的規(guī)則。
5、排版、留白
布局和排版要根據(jù)不同的目的而變化。為了引導(dǎo)視線,一個(gè)頁(yè)面中最想傳達(dá)的內(nèi)容要最醒目。這樣的規(guī)則要配合各個(gè)頁(yè)面得到統(tǒng)一。在這里面重要的劃分就是留白。若不確認(rèn)好目錄與正文之間及目錄本身的留白,就會(huì)變得散亂而失去了設(shè)計(jì)的一貫性?;ㄙM(fèi)時(shí)間去修改頁(yè)面的要素,可能就會(huì)耽誤整體的進(jìn)度,所以在設(shè)計(jì)的時(shí)候要好好確認(rèn)。
6、圖片
下層頁(yè)面在使用圖片的時(shí)候,應(yīng)該使用和主頁(yè)面同樣風(fēng)格的圖片,整體調(diào)整色調(diào)。事先在決定使用哪些圖片的時(shí)候,最好先確認(rèn)一下色調(diào),這樣后面就會(huì)順利很多。并且,還要事先考慮是否適用于移動(dòng)設(shè)備上,尤其是響應(yīng)式頁(yè)面圖片的比例要保持一致,在移動(dòng)設(shè)備上是否能夠完全顯示也必須考慮到,這樣會(huì)給之后減少很多工作量。
7、ICON
ICON的設(shè)計(jì)也必須要保證統(tǒng)一。在追加新icon的時(shí)候要保證和原來(lái)的風(fēng)格統(tǒng)一。在設(shè)計(jì)每一個(gè)ICON的時(shí)候要確認(rèn)好。并且,在高分辨率的屏幕上查看,ICON的畫質(zhì)會(huì)變?cè)?,所以要制作大一點(diǎn)的尺寸,然后再轉(zhuǎn)成 web font 。這樣就可以保證在任何環(huán)境下顯示效果都會(huì)好。在這里也要事先考慮好移動(dòng)設(shè)備的情況。
8、裝飾
例如,有圓角的按鈕,圓角的大小和線條的粗細(xì),按鈕的尺寸和使用的場(chǎng)合都應(yīng)該基本保持統(tǒng)一。無(wú)視主頁(yè)面已經(jīng)使用的元素,在下層頁(yè)面制作新的元素就會(huì)打破整體的規(guī)則。一般會(huì)要么都是圓角,要么都是直角,基本沒有混合使用的情況,所以不要讓破壞整體風(fēng)格的元素出現(xiàn)。
9、動(dòng)效
按鈕點(diǎn)擊的動(dòng)效,頁(yè)面收起展示目錄的動(dòng)效,整體從左右移動(dòng)的方向和上下移動(dòng)的方向一般都要保持一致,以保證統(tǒng)一。要注意頁(yè)面中不應(yīng)該出現(xiàn)和整體動(dòng)效原則相違背的元素。
總結(jié)
以上就是設(shè)計(jì)下層頁(yè)面時(shí)候最起碼應(yīng)該注意的地方。下層頁(yè)面的設(shè)計(jì)大體要遵循主頁(yè)面已經(jīng)確定好的規(guī)則,所以可發(fā)揮的空間很小,但每一個(gè)頁(yè)面的要素都不相同,因此也不是和主頁(yè)面完全相同。做的多了,自己也能決定規(guī)則的時(shí)候,就會(huì)變得越來(lái)越有趣了。
5、排版、留白
布局和排版要根據(jù)不同的目的而變化。為了引導(dǎo)視線,一個(gè)頁(yè)面中最想傳達(dá)的內(nèi)容要最醒目。這樣的規(guī)則要配合各個(gè)頁(yè)面得到統(tǒng)一。在這里面重要的劃分就是留白。若不確認(rèn)好目錄與正文之間及目錄本身的留白,就會(huì)變得散亂而失去了設(shè)計(jì)的一貫性?;ㄙM(fèi)時(shí)間去修改頁(yè)面的要素,可能就會(huì)耽誤整體的進(jìn)度,所以在設(shè)計(jì)的時(shí)候要好好確認(rèn)。
6、圖片
下層頁(yè)面在使用圖片的時(shí)候,應(yīng)該使用和主頁(yè)面同樣風(fēng)格的圖片,整體調(diào)整色調(diào)。事先在決定使用哪些圖片的時(shí)候,最好先確認(rèn)一下色調(diào),這樣后面就會(huì)順利很多。并且,還要事先考慮是否適用于移動(dòng)設(shè)備上,尤其是響應(yīng)式頁(yè)面圖片的比例要保持一致,在移動(dòng)設(shè)備上是否能夠完全顯示也必須考慮到,這樣會(huì)給之后減少很多工作量。
7、ICON
ICON的設(shè)計(jì)也必須要保證統(tǒng)一。在追加新icon的時(shí)候要保證和原來(lái)的風(fēng)格統(tǒng)一。在設(shè)計(jì)每一個(gè)ICON的時(shí)候要確認(rèn)好。并且,在高分辨率的屏幕上查看,ICON的畫質(zhì)會(huì)變?cè)?,所以要制作大一點(diǎn)的尺寸,然后再轉(zhuǎn)成 web font 。這樣就可以保證在任何環(huán)境下顯示效果都會(huì)好。在這里也要事先考慮好移動(dòng)設(shè)備的情況。
8、裝飾
例如,有圓角的按鈕,圓角的大小和線條的粗細(xì),按鈕的尺寸和使用的場(chǎng)合都應(yīng)該基本保持統(tǒng)一。無(wú)視主頁(yè)面已經(jīng)使用的元素,在下層頁(yè)面制作新的元素就會(huì)打破整體的規(guī)則。一般會(huì)要么都是圓角,要么都是直角,基本沒有混合使用的情況,所以不要讓破壞整體風(fēng)格的元素出現(xiàn)。
9、動(dòng)效
按鈕點(diǎn)擊的動(dòng)效,頁(yè)面收起展示目錄的動(dòng)效,整體從左右移動(dòng)的方向和上下移動(dòng)的方向一般都要保持一致,以保證統(tǒng)一。要注意頁(yè)面中不應(yīng)該出現(xiàn)和整體動(dòng)效原則相違背的元素。
總結(jié)
以上就是設(shè)計(jì)下層頁(yè)面時(shí)候最起碼應(yīng)該注意的地方。下層頁(yè)面的設(shè)計(jì)大體要遵循主頁(yè)面已經(jīng)確定好的規(guī)則,所以可發(fā)揮的空間很小,但每一個(gè)頁(yè)面的要素都不相同,因此也不是和主頁(yè)面完全相同。做的多了,自己也能決定規(guī)則的時(shí)候,就會(huì)變得越來(lái)越有趣了。
5、排版、留白
布局和排版要根據(jù)不同的目的而變化。為了引導(dǎo)視線,一個(gè)頁(yè)面中最想傳達(dá)的內(nèi)容要最醒目。這樣的規(guī)則要配合各個(gè)頁(yè)面得到統(tǒng)一。在這里面重要的劃分就是留白。若不確認(rèn)好目錄與正文之間及目錄本身的留白,就會(huì)變得散亂而失去了設(shè)計(jì)的一貫性?;ㄙM(fèi)時(shí)間去修改頁(yè)面的要素,可能就會(huì)耽誤整體的進(jìn)度,所以在設(shè)計(jì)的時(shí)候要好好確認(rèn)。
6、圖片
下層頁(yè)面在使用圖片的時(shí)候,應(yīng)該使用和主頁(yè)面同樣風(fēng)格的圖片,整體調(diào)整色調(diào)。事先在決定使用哪些圖片的時(shí)候,最好先確認(rèn)一下色調(diào),這樣后面就會(huì)順利很多。并且,還要事先考慮是否適用于移動(dòng)設(shè)備上,尤其是響應(yīng)式頁(yè)面圖片的比例要保持一致,在移動(dòng)設(shè)備上是否能夠完全顯示也必須考慮到,這樣會(huì)給之后減少很多工作量。
7、ICON
ICON的設(shè)計(jì)也必須要保證統(tǒng)一。在追加新icon的時(shí)候要保證和原來(lái)的風(fēng)格統(tǒng)一。在設(shè)計(jì)每一個(gè)ICON的時(shí)候要確認(rèn)好。并且,在高分辨率的屏幕上查看,ICON的畫質(zhì)會(huì)變?cè)?,所以要制作大一點(diǎn)的尺寸,然后再轉(zhuǎn)成 web font 。這樣就可以保證在任何環(huán)境下顯示效果都會(huì)好。在這里也要事先考慮好移動(dòng)設(shè)備的情況。
8、裝飾
例如,有圓角的按鈕,圓角的大小和線條的粗細(xì),按鈕的尺寸和使用的場(chǎng)合都應(yīng)該基本保持統(tǒng)一。無(wú)視主頁(yè)面已經(jīng)使用的元素,在下層頁(yè)面制作新的元素就會(huì)打破整體的規(guī)則。一般會(huì)要么都是圓角,要么都是直角,基本沒有混合使用的情況,所以不要讓破壞整體風(fēng)格的元素出現(xiàn)。
9、動(dòng)效
按鈕點(diǎn)擊的動(dòng)效,頁(yè)面收起展示目錄的動(dòng)效,整體從左右移動(dòng)的方向和上下移動(dòng)的方向一般都要保持一致,以保證統(tǒng)一。要注意頁(yè)面中不應(yīng)該出現(xiàn)和整體動(dòng)效原則相違背的元素。
總結(jié)
以上就是設(shè)計(jì)下層頁(yè)面時(shí)候最起碼應(yīng)該注意的地方。下層頁(yè)面的設(shè)計(jì)大體要遵循主頁(yè)面已經(jīng)確定好的規(guī)則,所以可發(fā)揮的空間很小,但每一個(gè)頁(yè)面的要素都不相同,因此也不是和主頁(yè)面完全相同。做的多了,自己也能決定規(guī)則的時(shí)候,就會(huì)變得越來(lái)越有趣了。
本文地址:http://irelandcustomcontracting.com/tutorial/di310.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏