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

　　1、UI界面設計需求分析

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

　　2、確認UI界面效果圖

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

　　3、搜集材料

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

　　4、UI界面規(guī)劃

　　4.1結構

　?。?）欄目

　　欄目的實質(zhì)是一個網(wǎng)站的大綱索引，索引應該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。

　　1）只設計與主題相關的欄目

　　2）盡可能將網(wǎng)站內(nèi)最有價值的內(nèi)容列在欄目上

　　3）可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢

　　（2） 版塊

　　板塊比欄目的概念要大些，每個版塊都 有自己的欄目。

　　1）各板塊要有相對獨立性

　　2）各板塊要有相互關聯(lián)

　　3）各板塊的內(nèi)容要圍繞站點主題

　?。?） 目錄結構

　　1）不要將所有文件都存放在根目錄下

　　2）按欄目內(nèi)容建立子目錄

　　3）在每個主目錄下都建立獨立的Images目錄

　　4）按欄目內(nèi)容建立子目錄在每個子目錄下都建立獨立的Images目錄

　　5）目錄的層次不要太深，不要超過3層

　　6）不要使用中文目錄

　　7）不要使用過長的目錄

　　8）盡量使用意義明確的目錄

　?。?） 鏈接結構

　　網(wǎng)站的鏈接結構是指頁面之間相互鏈接的拓撲結構。

　　1）樹狀結構（一對一）：

　　首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。瀏覽時，一級級進入，一級級退出，條理比較清晰，訪問者明確知道自己在什么位置，但瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須回到首頁再進行。

　　2）星形結構（一對多）：

　　每個頁面相互之間都建立有鏈接。這樣瀏覽再進行。比較方便，隨時可以到達自己喜歡的頁面。但是由于鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內(nèi)容。

　　3）混合型結構（1和2）：

　　首頁和一級頁面之間用星狀鏈接結構，一級和二級頁面之間用樹狀鏈接結構。

　?。?） 形象設計

　　1）設計網(wǎng)站標志(LOGO)：

　　標志的設計創(chuàng)意應當來自網(wǎng)站的名稱和內(nèi)容；

　　2）設計網(wǎng)站字體：

　　標準字體是指用于標志、標題、主菜單的特有字體。

　　使用非默認字體只能用圖片的形式；

　　3）設計網(wǎng)站色彩：

　　“標準色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩，要用于網(wǎng)站的標志、標題、主菜單和主色塊。

　　一個網(wǎng)站的標準色彩不超過3種，適合于網(wǎng)頁標準色的顏色有:藍色，黃/橙色，黑/灰/白色三大系列；

　　4）設計網(wǎng)站宣傳語：

　　網(wǎng)站精神、主題與中心，或是網(wǎng)站的目標，用一句話或一個詞來高度概括.

界面設計流程（圖片來自網(wǎng)絡）

　　4.2設置

　　好的內(nèi)容選擇需要有好的創(chuàng)意，作為網(wǎng)頁設計制作者，最苦惱的就是沒有好的內(nèi)容創(chuàng)意。網(wǎng)絡上的最多的創(chuàng)意即是來自于虛擬同現(xiàn)實的結合。創(chuàng)意的目的是為了更好的宣傳與推廣網(wǎng)站，如果創(chuàng)意很好，卻對網(wǎng)站發(fā)展毫無意義，那么，網(wǎng)站設計制作者也應當放棄這個創(chuàng)意。

　　另外，主頁內(nèi)容是網(wǎng)站的根本之所在，如果內(nèi)容空洞，即使頁面制作地再怎樣精美，仍然不會有多少用戶。從根本上說，網(wǎng)站內(nèi)容仍然左右著網(wǎng)站流量，內(nèi)容為王依然是個人網(wǎng)站成功的關鍵。

　　4.3風格

　?。?）“風格”是抽象的，是指站點的整體形象給瀏覽者的綜合感受；

　　（2）“整體形象”包括站點的CI(標志，色彩，字體，標語)、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價值等等諸多因素;

　?。?）風格是有人性的，通過網(wǎng)站的色彩、技術、文字、布局、交互

　　方式可以概括出一個站點的個性:是粗獷豪放的，還是清新秀麗的;是溫文儒雅的，還是執(zhí)著熱情的;是活潑易變的，還是墨守成規(guī)的。

　　4.4色彩搭配

　　網(wǎng)頁顏色原理和象征意義：大型的商業(yè)網(wǎng)站，你會發(fā)現(xiàn)他們更多運用的是白色、藍色、黃色等，使得網(wǎng)頁顯得典雅，大方和溫馨。更重要的是，這樣可以大大加快瀏覽者打開網(wǎng)頁的速度。

　　一般來說，網(wǎng)頁的背景色應該柔和一些、素一些、淡一些，再配上深色的文字，使人看起來自然、舒暢。而為了追求醒目的視覺效果，可以為標題使用較深的顏色。

　　紅色：熱情、奔放、喜悅、莊嚴；

　　黃色：高貴、富有、燦爛、活潑；

　　黑色：嚴肅、夜晚、沉著；

　　白色：純潔、簡單、潔凈；

　　藍色：天空、清爽、科技、希望；

　　綠色：植物、生命、生機、自然、健康；

　　灰色：莊重、沉穩(wěn)、大氣；

　　紫色：浪漫、富貴、高雅；

　　棕色：大地、厚樸；……

　　4.5版面布局

　　（1）“T”結構布局:

　　所謂“T”結構，就是指頁面頂部為橫條網(wǎng)站標志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因為菜單條背景教深，整體效果類似英文字母“T”,所以我們稱之為“T”形布局。

　　這是網(wǎng)頁設計中用的最廣返的一種布局方式。

　　優(yōu)點：是頁面結構清晰，主次分明。是初學者最容易上手的布局方法。

　　缺點：是規(guī)矩呆板，如果細節(jié)色彩上不注意，很容易讓人"看之無味"。

　?。?）"口"型布局:

　　這是一個象形的說法，就是頁面一般上下各有一個廣告條，左面是主菜單，右面放友情連接等，中間是主要內(nèi)容。

　　優(yōu)點：是充分利用版面，信息量大(我的主頁首頁即屬于這種布局)。

　　缺點：是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計。

　　（3）“三"型布局:

　　這種布局多用于國外站點，國內(nèi)用的不多。特點是頁面 上橫向三條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。

　　（4）POP布局:

　　POP引自廣告術語，就是指頁面布局象一張宣傳海報，以一張精美圖片作為頁面的設計中心。

　　常用于時尚類站點，比如ELLE.com。

　　優(yōu)點：顯而易見:漂亮吸引人。

　　缺點：就是速度慢。

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

　　（5）最新響應式布局:

　　響應式布局是比較新的東西。技術上對瀏覽兼容性要求高；不兼容ie9--以下瀏覽器

　　常用于時尚類站點，手機、ipad、電腦多設備支持。

　　優(yōu)點：多設備支持。

　　缺點：低版本瀏覽器兼容性不好。

　　4.6樣式控制

　　（1）圖片使用文字作注解；

　?。?）圖片色彩盡量符合網(wǎng)站整體色調(diào)；

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

　　4.7制作工具

　　Photoshop+Dreamweaver+Html+CSS

　　Sublime+Html5+CSS3

　　4.8規(guī)劃設計

　　（1）先大后?。涸谥谱骶W(wǎng)頁時，先把大的結構設計好，然后再逐步完善小的結構設計。

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

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

界面設計流程（圖片來自網(wǎng)絡）
　

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