- 相關(guān)推薦
網(wǎng)站美工需要注意web UI設(shè)計(jì)原則有哪些
之前的網(wǎng)站美工就是會(huì)使用PhotoShop或Firework設(shè)計(jì)頁(yè)面，然后用ImageReady或Firework切割頁(yè)面的圖片后直接生成HTML網(wǎng)頁(yè)，再把相應(yīng)的內(nèi)容填入網(wǎng)頁(yè)中，最后加上各種Java和表單效果完成網(wǎng)頁(yè)的制作。以下是關(guān)于網(wǎng)站美工需要注意web UI設(shè)計(jì)原則，希望大家喜歡!
部分網(wǎng)頁(yè)設(shè)計(jì)原則
規(guī)劃目錄結(jié)構(gòu)時(shí)應(yīng)當(dāng)遵循的幾個(gè)原則：
1.不要將所有文件都存放在根目錄下;
2.按欄目?jī)?nèi)容分別建立子目錄;
3.在每個(gè)主目錄下都建立獨(dú)立的images目錄;
4.目錄的層次不要太深;
5.切忌使用中文目錄;
6.不要使用過(guò)長(zhǎng)的目錄;
7.盡量使用意義明確的目錄。
除創(chuàng)意之外，在網(wǎng)站設(shè)計(jì)時(shí)還需要考慮以下基本原則：
1.網(wǎng)頁(yè)內(nèi)容要便于閱讀;
2.站點(diǎn)內(nèi)容要精、專和及時(shí)更新;
3.注重色彩搭配;
4.考慮帶寬;
5.要適當(dāng)考慮不同游覽器、不同分辨率的情況;
6.提供交互性;
7.簡(jiǎn)單即為美。
網(wǎng)頁(yè)設(shè)計(jì)的通用規(guī)則：
1.網(wǎng)站的設(shè)計(jì)目的決定設(shè)計(jì)方案;
2.瀏覽者的需求第一位;
3.頁(yè)面的有效性;
4.頁(yè)面布局的保持統(tǒng)一性;
5.使用無(wú)語(yǔ)意標(biāo)簽DIV和適當(dāng)?shù)慕Y(jié)構(gòu)來(lái)設(shè)計(jì)網(wǎng)頁(yè);
6.謹(jǐn)慎使用圖片;
7.減少Java Applet和其他多媒體的使用
頁(yè)面設(shè)計(jì)原則
1、 界面統(tǒng)一性。
一樣的功能在一樣的地方。一個(gè)頁(yè)面無(wú)非由一些基本模塊組成，每一種基本模塊在UI設(shè)計(jì)上，不同的應(yīng)用實(shí)例是否元素一致，包括字型、字號(hào)、顏色、按鈕顏色、按鈕形狀、按鈕功能、提示文字、行距等。說(shuō)來(lái)容易，執(zhí)行的時(shí)候很多設(shè)計(jì)師會(huì)有一些隨意的想法，可能某些想法是挺好的，但是我們必須執(zhí)行統(tǒng)一的界面標(biāo)準(zhǔn)。設(shè)想windows里面，如果不同的窗口關(guān)閉按鈕在不同的地方，并且顏色還不一樣，這會(huì)是什么樣混亂的狀況。
2 、留住用戶而不是騷擾用戶。
引導(dǎo)，不是強(qiáng)制。國(guó)內(nèi)的網(wǎng)站對(duì)于騙取點(diǎn)擊量是很有心得，記得有一段時(shí)間sina的新聞標(biāo)題都是危言聳聽，結(jié)果點(diǎn)進(jìn)去一看不是那么回事情，這樣的用戶體驗(yàn)就不好了。除了進(jìn)行角色用戶模型分析用戶關(guān)心的內(nèi)容以外，我這次也采用了比較極端的做法來(lái)避免用戶對(duì)于點(diǎn)擊的處理。彈出新頁(yè)面恐怕也是中國(guó)互聯(lián)網(wǎng)特有的現(xiàn)象，向前向后這些按鈕在中國(guó)用處不大。好在我們有各類多選項(xiàng)卡的瀏覽器，不怕，但是，良好的連續(xù)性體驗(yàn)被破壞了。你愿意看一本每頁(yè)印兩個(gè)字的書嗎?用戶感興趣才看某個(gè)網(wǎng)頁(yè)，我們要做得是引導(dǎo)用戶看到他想看的內(nèi)容，既不能硬塞，也不能騙取。
3、安靜的瀏覽器。
曾幾何時(shí)，我在看網(wǎng)站的時(shí)候，是選擇不顯示所有圖片的，這樣的干凈在某些領(lǐng)頭羊的帶領(lǐng)下，已經(jīng)不復(fù)存在了。諸多的flash閃爍，一碰就顯示的層，甚至還有不請(qǐng)自來(lái)的視頻，這些都不是NI自然界面理論能允許的，我們要的是一個(gè)給用戶安安靜靜閱讀內(nèi)容參加互動(dòng)的網(wǎng)頁(yè)。根據(jù)NI第二原則：網(wǎng)站設(shè)計(jì)要滿足人們的需要，包括個(gè)人化的和社會(huì)化的。用戶到網(wǎng)站上來(lái)有個(gè)人的需求，盡可能簡(jiǎn)潔的版式，容易閱讀的內(nèi)容，方便的導(dǎo)航，這些對(duì)于用戶來(lái)說(shuō)都是容易接受的，從web2.0風(fēng)潮開始，有一點(diǎn)至少是好的，就是國(guó)內(nèi)網(wǎng)站也開始注意這些方面，而不是將內(nèi)容一股腦的堆砌在那里。如果還是沒(méi)有很明白的話，大家可以發(fā)現(xiàn)絕大多數(shù)國(guó)外網(wǎng)站在點(diǎn)擊一個(gè)鏈接的時(shí)候，是在本頁(yè)打開，而國(guó)內(nèi)的網(wǎng)站基本上都是新開頁(yè)面。
設(shè)計(jì)注意的要點(diǎn)
1 、每一個(gè)模塊的邊框，標(biāo)題，按鈕(如果有的話)，“更多”“詳細(xì)”功能，這些元素的顏色、大小尺寸、位置、對(duì)齊方式、字體、字號(hào)、行距等都要一致。
2 、整個(gè)頁(yè)面的基調(diào)顏色要一致，不同的模塊除非有很大意義的差別，顏色應(yīng)該一致。
3、 可以點(diǎn)擊的文字、按鈕、圖片，鼠標(biāo)應(yīng)該呈現(xiàn)出統(tǒng)一的可點(diǎn)擊樣式，區(qū)別于不可點(diǎn)擊區(qū)域。
4 、呈現(xiàn)的日期格式的統(tǒng)一，比如都用長(zhǎng)日期格式“2007-2-1”或者都用短日期格式“07-3-1”，樣式不同的日期呈現(xiàn)方式還不如不呈現(xiàn)。
5 、可以點(diǎn)擊的圖片最好用不同的樣式顯示，比如鼠標(biāo)滑過(guò)時(shí)候的輝亮效果。因?yàn)榫W(wǎng)頁(yè)會(huì)大量的使用圖片做修飾效果，區(qū)分可以點(diǎn)擊和不可以點(diǎn)擊的圖片是值得去做的。
6 、有沒(méi)有不必要的彈出窗口。(從netscape開始這個(gè)設(shè)計(jì)真的很糟糕，ie也完全繼承了，解決的辦法是用js方式來(lái)呈現(xiàn)彈出窗口。)
7 、文字描述。很多時(shí)候會(huì)忽略這個(gè)問(wèn)題，在我們做demo的這個(gè)項(xiàng)目中有很多的文字描述，各有其用，統(tǒng)一描述的方式，統(tǒng)一人稱，統(tǒng)一語(yǔ)氣，都是給用戶帶來(lái)良好體驗(yàn)的途徑。
8 、圖片風(fēng)格。從欣賞的角度，圖片應(yīng)該是盡可能的統(tǒng)一風(fēng)格，素描樣式和點(diǎn)陣樣式共存總不是太好的事情。
9 、圖標(biāo)。很多時(shí)候會(huì)用圖標(biāo)來(lái)描述功能，漂亮的帶點(diǎn)陰影和倒影的圖標(biāo)是非常搶眼的，使用圖標(biāo)的話要注意風(fēng)格、透視角度、分辨率、辨識(shí)度的一致性。
【網(wǎng)站美工需要注意web UI設(shè)計(jì)原則有哪些】相關(guān)文章：
網(wǎng)頁(yè)美工設(shè)計(jì)基本原則有哪些07-02
SEO網(wǎng)站優(yōu)化需要注意哪些問(wèn)題07-13
網(wǎng)站代碼優(yōu)化需要注意哪些問(wèn)題10-10
網(wǎng)頁(yè)美工設(shè)計(jì)需要注意的細(xì)節(jié)07-16
網(wǎng)站頁(yè)面布局和優(yōu)化需要注意哪些11-03
模具設(shè)計(jì)需要注意哪些05-24
設(shè)計(jì)臥室需要注意哪些事項(xiàng)09-15