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

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

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

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

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

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

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

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

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

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

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

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

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

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

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