手機(jī)版WPS 手機(jī)版wps免費(fèi)下載
2022-11-29
更新時(shí)間:2022-03-21 14:35:05作者:佚名
1、UI界面設(shè)計(jì)需求分析
采用需求調(diào)查表的形式,充分與客戶溝通,全面了解客戶對UI界面設(shè)計(jì)方面需求。
2、確認(rèn)UI界面效果圖
根據(jù)與客戶達(dá)成意見,結(jié)合技術(shù)人員的設(shè)計(jì)思路,完成UI界面效果圖設(shè)計(jì),并最終由客戶確認(rèn)?! ?/p>
3、搜集材料
確認(rèn)了界面首頁效果圖之后,就要圍繞主題開始搜集材料了。 常言道:“巧婦難為無米之炊”。要想讓規(guī)劃的界面夠吸引住用戶,就要盡量搜集材料,搜集得材料越多,以后設(shè)計(jì)UI界面就越容易。
4、UI界面規(guī)劃
4.1結(jié)構(gòu)
(1)欄目
欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引,索引應(yīng)該將網(wǎng)站的主體明確顯示出來。在制定欄目的時(shí)候,要仔細(xì)考慮,合理安排。
1)只設(shè)計(jì)與主題相關(guān)的欄目
2)盡可能將網(wǎng)站內(nèi)最有價(jià)值的內(nèi)容列在欄目上
3)可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢
(2) 版塊
板塊比欄目的概念要大些,每個(gè)版塊都 有自己的欄目。
1)各板塊要有相對獨(dú)立性
2)各板塊要有相互關(guān)聯(lián)
3)各板塊的內(nèi)容要圍繞站點(diǎn)主題
?。?) 目錄結(jié)構(gòu)
1)不要將所有文件都存放在根目錄下
2)按欄目內(nèi)容建立子目錄
3)在每個(gè)主目錄下都建立獨(dú)立的Images目錄
4)按欄目內(nèi)容建立子目錄在每個(gè)子目錄下都建立獨(dú)立的Images目錄
5)目錄的層次不要太深,不要超過3層
6)不要使用中文目錄
7)不要使用過長的目錄
8)盡量使用意義明確的目錄
?。?) 鏈接結(jié)構(gòu)
網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。
1)樹狀結(jié)構(gòu)(一對一):
首頁鏈接指向一級頁面,一級頁面鏈接指向二級頁面。瀏覽時(shí),一級級進(jìn)入,一級級退出,條理比較清晰,訪問者明確知道自己在什么位置,但瀏覽效率低,一個(gè)欄目下的子頁面到另一個(gè)欄目下的子頁面,必須回到首頁再進(jìn)行。
2)星形結(jié)構(gòu)(一對多):
每個(gè)頁面相互之間都建立有鏈接。這樣瀏覽再進(jìn)行。比較方便,隨時(shí)可以到達(dá)自己喜歡的頁面。但是由于鏈接太多,容易使瀏覽者迷路,搞不清自己在什么位置,看了多少內(nèi)容。
3)混合型結(jié)構(gòu)(1和2):
首頁和一級頁面之間用星狀鏈接結(jié)構(gòu),一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。
(5) 形象設(shè)計(jì)
1)設(shè)計(jì)網(wǎng)站標(biāo)志(LOGO):
標(biāo)志的設(shè)計(jì)創(chuàng)意應(yīng)當(dāng)來自網(wǎng)站的名稱和內(nèi)容;
2)設(shè)計(jì)網(wǎng)站字體:
標(biāo)準(zhǔn)字體是指用于標(biāo)志、標(biāo)題、主菜單的特有字體。
使用非默認(rèn)字體只能用圖片的形式;
3)設(shè)計(jì)網(wǎng)站色彩:
“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩,要用于網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊。
一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種,適合于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有:藍(lán)色,黃/橙色,黑/灰/白色三大系列;
4)設(shè)計(jì)網(wǎng)站宣傳語:
網(wǎng)站精神、主題與中心,或是網(wǎng)站的目標(biāo),用一句話或一個(gè)詞來高度概括.
4.2設(shè)置
好的內(nèi)容選擇需要有好的創(chuàng)意,作為網(wǎng)頁設(shè)計(jì)制作者,最苦惱的就是沒有好的內(nèi)容創(chuàng)意。網(wǎng)絡(luò)上的最多的創(chuàng)意即是來自于虛擬同現(xiàn)實(shí)的結(jié)合。創(chuàng)意的目的是為了更好的宣傳與推廣網(wǎng)站,如果創(chuàng)意很好,卻對網(wǎng)站發(fā)展毫無意義,那么,網(wǎng)站設(shè)計(jì)制作者也應(yīng)當(dāng)放棄這個(gè)創(chuàng)意。
另外,主頁內(nèi)容是網(wǎng)站的根本之所在,如果內(nèi)容空洞,即使頁面制作地再怎樣精美,仍然不會有多少用戶。從根本上說,網(wǎng)站內(nèi)容仍然左右著網(wǎng)站流量,內(nèi)容為王依然是個(gè)人網(wǎng)站成功的關(guān)鍵。
4.3風(fēng)格
(1)“風(fēng)格”是抽象的,是指站點(diǎn)的整體形象給瀏覽者的綜合感受;
(2)“整體形象”包括站點(diǎn)的CI(標(biāo)志,色彩,字體,標(biāo)語)、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價(jià)值等等諸多因素;
?。?)風(fēng)格是有人性的,通過網(wǎng)站的色彩、技術(shù)、文字、布局、交互
方式可以概括出一個(gè)站點(diǎn)的個(gè)性:是粗獷豪放的,還是清新秀麗的;是溫文儒雅的,還是執(zhí)著熱情的;是活潑易變的,還是墨守成規(guī)的。
4.4色彩搭配
網(wǎng)頁顏色原理和象征意義:大型的商業(yè)網(wǎng)站,你會發(fā)現(xiàn)他們更多運(yùn)用的是白色、藍(lán)色、黃色等,使得網(wǎng)頁顯得典雅,大方和溫馨。更重要的是,這樣可以大大加快瀏覽者打開網(wǎng)頁的速度。
一般來說,網(wǎng)頁的背景色應(yīng)該柔和一些、素一些、淡一些,再配上深色的文字,使人看起來自然、舒暢。而為了追求醒目的視覺效果,可以為標(biāo)題使用較深的顏色。
紅色:熱情、奔放、喜悅、莊嚴(yán);
黃色:高貴、富有、燦爛、活潑;
黑色:嚴(yán)肅、夜晚、沉著;
白色:純潔、簡單、潔凈;
藍(lán)色:天空、清爽、科技、希望;
綠色:植物、生命、生機(jī)、自然、健康;
灰色:莊重、沉穩(wěn)、大氣;
紫色:浪漫、富貴、高雅;
棕色:大地、厚樸;……
4.5版面布局
?。?)“T”結(jié)構(gòu)布局:
所謂“T”結(jié)構(gòu),就是指頁面頂部為橫條網(wǎng)站標(biāo)志+廣告條,下方左面為主菜單,右面顯示內(nèi)容的布局,因?yàn)椴藛螚l背景教深,整體效果類似英文字母“T”,所以我們稱之為“T”形布局。
這是網(wǎng)頁設(shè)計(jì)中用的最廣返的一種布局方式。
優(yōu)點(diǎn):是頁面結(jié)構(gòu)清晰,主次分明。是初學(xué)者最容易上手的布局方法。
缺點(diǎn):是規(guī)矩呆板,如果細(xì)節(jié)色彩上不注意,很容易讓人"看之無味"。
(2)"口"型布局:
這是一個(gè)象形的說法,就是頁面一般上下各有一個(gè)廣告條,左面是主菜單,右面放友情連接等,中間是主要內(nèi)容。
優(yōu)點(diǎn):是充分利用版面,信息量大(我的主頁首頁即屬于這種布局)。
缺點(diǎn):是頁面擁擠,不夠靈活。也有將四邊空出,只用中間的窗口型設(shè)計(jì)。
?。?)“三"型布局:
這種布局多用于國外站點(diǎn),國內(nèi)用的不多。特點(diǎn)是頁面 上橫向三條色塊,將頁面整體分割為四部分,色塊中大多放廣告條。
?。?)POP布局:
POP引自廣告術(shù)語,就是指頁面布局象一張宣傳海報(bào),以一張精美圖片作為頁面的設(shè)計(jì)中心。
常用于時(shí)尚類站點(diǎn),比如ELLE.com。
優(yōu)點(diǎn):顯而易見:漂亮吸引人。
缺點(diǎn):就是速度慢。
作為版面布局還是值得借鑒的。
?。?)最新響應(yīng)式布局:
響應(yīng)式布局是比較新的東西。技術(shù)上對瀏覽兼容性要求高;不兼容ie9--以下瀏覽器
常用于時(shí)尚類站點(diǎn),手機(jī)、ipad、電腦多設(shè)備支持。
優(yōu)點(diǎn):多設(shè)備支持。
缺點(diǎn):低版本瀏覽器兼容性不好。
4.6樣式控制
?。?)圖片使用文字作注解;
?。?)圖片色彩盡量符合網(wǎng)站整體色調(diào);
?。?)使用CSS(CascadingStyle Sheet)樣式表規(guī)范網(wǎng)站字體大?。?/p>
4.7制作工具
Photoshop+Dreamweaver+Html+CSS
Sublime+Html5+CSS3
4.8規(guī)劃設(shè)計(jì)
?。?)先大后?。涸谥谱骶W(wǎng)頁時(shí),先把大的結(jié)構(gòu)設(shè)計(jì)好,然后再逐步完善小的結(jié)構(gòu)設(shè)計(jì)。
(2)從簡到繁:先設(shè)計(jì)出簡單的內(nèi)容,然后再設(shè)計(jì)復(fù)雜的內(nèi)容,以便出現(xiàn)問題時(shí)好修改。
(3)運(yùn)用模板:在制作網(wǎng)頁時(shí)要多靈活運(yùn)用模板,這樣可以大大提高制作效率。