ui設(shè)計基礎(chǔ)(基本理論)

1、,AI---Illustrator 矢量圖繪制軟件,CI--- 被明確地認知企業(yè)理念與企業(yè)文化的活動,VI---企業(yè)視覺識別系統(tǒng),UI---軟件界面，也包括機械的人機交互系統(tǒng),,什么是UI設(shè)計？,UI=User Interface 就是用戶界面，一般指的是軟件界面，也包括機械的人機交互系統(tǒng)。UI設(shè)計則可以理解為協(xié)調(diào)用戶與界面之間關(guān)系的設(shè)計，包括交互設(shè)計、用戶研究、界面設(shè)計三部分。目前UI設(shè)計在國內(nèi)仍舊處于起步階段，長期以來界面設(shè)

2、計工作一直沒有被重視起來，國內(nèi)甚至還沒有院校設(shè)立相關(guān)的專業(yè)，市面上也極少關(guān)于UI設(shè)計的書籍，大部分的設(shè)計師都是在完全沒有這方面的系統(tǒng)知識框架的基礎(chǔ)上自學(xué)而成長起來的，這也大大限制了UI設(shè)計的發(fā)展，甚至導(dǎo)致大部分從事相關(guān)行業(yè)的人也對UI一知半解。有些界面設(shè)計師甚至被貶義地稱為“美工”。其實軟件界面設(shè)計就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計一樣，是產(chǎn)品的重要部分。一個友好美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦或手機等設(shè)備的距離，為商家創(chuàng)

3、造賣點。界面設(shè)計不是單純的美術(shù)繪畫，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶而設(shè)計，是純粹的科學(xué)性的藝術(shù)設(shè)計。檢驗一個界面的標準即不是某個項目開發(fā)組領(lǐng)導(dǎo)的意見也不是項目成員投票的結(jié)果，而是最終用戶的感受。所以界面設(shè)計要和用戶研究緊密結(jié)合，是一個不斷為最終用戶設(shè)計滿意視覺效果的過程。,,,UI設(shè)計師是做什么的？,UI設(shè)計從工作內(nèi)容上來說分為3個方向。它主要是由UI 研究的3個因素決定的：,1.研究界面—圖形設(shè)計師Graphic

4、UI designer 國內(nèi)目前大部分UI工作者都是從事這個行業(yè)。也有人稱之為美工，但實際上不是單純意義上的美術(shù)工人，而是軟件產(chǎn)品的產(chǎn)品外形設(shè)計師。這些設(shè)計師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設(shè)計教育背景，例如工業(yè)設(shè)計，平面設(shè)計，信息多媒體設(shè)計等。,2.研究人與界面的關(guān)系—交互設(shè)計師，interaction designer  在圖形界面產(chǎn)生之前，長期以來UI設(shè)計師就是指交互設(shè)計師。交互設(shè)計師的工作內(nèi)

5、容就是設(shè)計軟件的操作流程，樹狀結(jié)構(gòu)，軟件的結(jié)構(gòu)與操作規(guī)范等。一個軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計，并且確立交互模型，交互規(guī)范。 交互設(shè)計師一般都是軟件工程師背景居多。,3.研究人—用戶測試/研究工程師User experience engineer 研究用戶心理狀態(tài)、行為習(xí)慣和審美情趣等。主要是測試交互設(shè)計的合理性以及圖形設(shè)計的美觀性。測試方法一般彩頁目標用戶問卷的形式來衡量UI設(shè)計的合理性。這個環(huán)節(jié)很重要，

6、如果沒有這個環(huán)節(jié)，UI設(shè)計的好壞只能憑借設(shè)計師的經(jīng)驗或者領(lǐng)導(dǎo)的審美來評判，這樣就會給企業(yè)帶來嚴重的風(fēng)險性。用戶研究工程師一般是心理學(xué)人文學(xué)背景比較合適。,綜上所述，一個全面的UI設(shè)計師就是：軟件圖形設(shè)計師、交互設(shè)計師和用戶研究工程師。,,UI設(shè)計師需要做到什么？,1. 簡易性：界面的簡潔是要讓用戶便于使用、便于了解、并能減少用戶發(fā)生錯誤選擇的可能性。,2. 可控性：這是界面設(shè)計的先決條件，用戶想要做什么，就一定讓他做到，并且必須得到

7、應(yīng)有的提示。3. 記憶負擔最小化：人腦比不了電腦，人類的短期記憶極不穩(wěn)定、有限。不要輕易打破用戶的行為習(xí)慣，不要讓用戶思考。,,4. 一致性：是每一個優(yōu)秀界面都具備的特點。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與實際內(nèi)容相一致。同一軟件的不同界面，同一界面的不同板塊，同一板塊的不同位置，都必須保持相當?shù)囊恢滦浴?. 提高用戶的熟悉程度：用戶可通過已掌握的知識來使用界面，但不應(yīng)超出一般常識。如擬物法。,,從用戶的觀點考慮：想他們所想

8、，做他們所做。大多數(shù)用戶并沒有相當?shù)膶I(yè)知識，他們往往只是從自身的經(jīng)驗和習(xí)慣出發(fā)思考和操作。把自己代入用戶角色，設(shè)定為最糟糕的用戶：無知，易怒，缺乏耐性。有序排列：一個有序排列的界面可以讓用戶輕松，讓界面簡潔美觀。安全性：用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示。 靈活人性化：高效率和用戶滿意度是人性化的直接體現(xiàn)。要盡可能考慮到特殊用戶的操作體驗，如色盲，殘疾人等。,5W2H 設(shè)計

9、原則 WHO WHERE WHEN WHAT WHY HOW HOW MUCH,,GUI：,前面大致介紹了UI設(shè)計的一些基本理論，其中很大部分都是涉及到邏輯與用戶，也可以說它們屬于UE（用戶體驗）范疇，所以我們的主要重點放GUI上。下面就從我自己的認知出發(fā)，讓大家跟著我的思路認識學(xué)習(xí)GUI。GUI就是軟件產(chǎn)品的外觀設(shè)計，是在達到功能目標的基礎(chǔ)上使產(chǎn)品更加美觀個性，抓住用戶眼球的重要

10、環(huán)節(jié)。一般來說，GUI設(shè)計分為兩大塊部分：圖標(icon)設(shè)計 和 界面(interface)設(shè)計。常用軟件：Photoshop Illustrator,,Icon：,Icon即為圖標，分為 桌面圖標 和 界面圖標 。桌面圖標是軟件標識，所以也可以稱為Logo。界面圖標是功能標識，表示功能與含義。圖標能夠?qū)a(chǎn)品或功能的信息快速傳達給用戶，并獲得更好的視覺體驗，在軟件界面中具有重要價值。 圖

11、標能夠強調(diào)產(chǎn)品的重要特點，醒目地傳達用戶須知的操作重點 圖標可以減輕認知負擔，尤其是對于復(fù)雜的產(chǎn)品功能 圖標可以使人機界面更加具有吸引力，不顯得空洞乏味 統(tǒng)一的圖標風(fēng)格能夠加深用戶記憶，給予他們信賴感,,移動設(shè)備ICON規(guī)范：,由于受到移動設(shè)備屏幕尺寸和分辨的大小限制，icon的尺寸也不盡相同：Icon基本尺寸: 96*96 64*64 48*48

12、 32*32 16*16 12*12Icon平臺： symbian、mobile、java、android、iphone、mtk不同平臺對ICON的設(shè)計要求：,Symbian Size: 64*64 32*32 16*16 File layout: svg bmp png Svg 是一種矢量文件，可由AI轉(zhuǎn)化生成，可以對圖標

13、文件無虛化無損拉伸和壓縮，但是需要分層，容易產(chǎn)生亂碼。 Bmp 是最初使用的文件格式，不支持透明背景，現(xiàn)在已經(jīng)被淘汰。 Png24 支持透明背景 不支持無損自適應(yīng)縮放,,Mobile Size: 32*32 16*16 File layout: ICO Ps: win mobile不支持PNG格式,透明圖標效果只能用ICO格式實現(xiàn)。,Android

14、 Size: 64*64 32*32 File layout: PNG24 透明背景,Iphone Size: 自適應(yīng) File layout: PNG24 透明背景 無需其他效果，系統(tǒng)自動生成,,ICON表現(xiàn)技法：,光感表現(xiàn)：,材質(zhì)表現(xiàn)：,,Interface：,,作業(yè)1：,手繪天氣圖標 （晴、少云、多云、霧、小雨、大雨、雷電、小雪、大雪、冰雹、風(fēng)…….)圖標大小：30*30mm紙張：A4