界面設(shè)計(jì)是非常重要的一項(xiàng)工作，在界面設(shè)計(jì)過程中有著很多事項(xiàng)是需要注意的，通常需要按照流程來完成設(shè)計(jì)和布置，那么界面設(shè)計(jì)流程是什么呢？下面一起看下吧。

　　1、UI界面設(shè)計(jì)需求分析

　　采用需求調(diào)查表的形式，充分與客戶溝通，全面了解客戶對UI界面設(shè)計(jì)方面需求。

　　2、確認(rèn)UI界面效果圖

　　根據(jù)與客戶達(dá)成意見，結(jié)合技術(shù)人員的設(shè)計(jì)思路，完成UI界面效果圖設(shè)計(jì)，并最終由客戶確認(rèn)。

　　3、搜集材料

　　確認(rèn)了界面首頁效果圖之后，就要圍繞主題開始搜集材料了。 常言道：“巧婦難為無米之炊”。要想讓規(guī)劃的界面夠吸引住用戶，就要盡量搜集材料，搜集得材料越多，以后設(shè)計(jì)UI界面就越容易。

　　4、UI界面規(guī)劃

　　4.1結(jié)構(gòu)

　?。?）欄目

　　欄目的實(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）可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢

　?。?） 版塊

　　板塊比欄目的概念要大些，每個(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)。

　?。?） 形象設(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è)詞來高度概括.

界面設(shè)計(jì)流程（圖片來自網(wǎng)絡(luò)）

　　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)的整體形象給瀏覽者的綜合感受；

　?。?）“整體形象”包括站點(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é)色彩上不注意，很容易讓人"看之無味"。

　?。?）"口"型布局:

　　這是一個(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)：就是速度慢。

　　作為版面布局還是值得借鑒的。

　　（5）最新響應(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)；

　　（3）使用CSS(CascadingStyle Sheet)樣式表規(guī)范網(wǎng)站字體大?。?/span>

　　4.7制作工具

　　Photoshop+Dreamweaver+Html+CSS

　　Sublime+Html5+CSS3

　　4.8規(guī)劃設(shè)計(jì)

　?。?）先大后小：在制作網(wǎng)頁時(shí)，先把大的結(jié)構(gòu)設(shè)計(jì)好，然后再逐步完善小的結(jié)構(gòu)設(shè)計(jì)。

　?。?）從簡到繁：先設(shè)計(jì)出簡單的內(nèi)容，然后再設(shè)計(jì)復(fù)雜的內(nèi)容，以便出現(xiàn)問題時(shí)好修改。

　?。?）運(yùn)用模板：在制作網(wǎng)頁時(shí)要多靈活運(yùn)用模板，這樣可以大大提高制作效率。
　

界面設(shè)計(jì)流程（圖片來自網(wǎng)絡(luò)）
　

　　以上是小編為大家整理的界面設(shè)計(jì)流程資料，相信大家在看完之后也清楚了吧，做好界面設(shè)計(jì)才可以保證界面更美觀，希望本文對你有所幫助。