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