UI基本名詞

UI：即User Interface，用戶界面。

UI設(shè)計不是一個單獨的個體，它是指對設(shè)備的人機交互，操作邏輯，界面視覺的整體設(shè)計。包括圖形界面設(shè)計GUI(Graphical User Interface)，交互體驗設(shè)計ID(Iteraction Design)和用戶研究設(shè)計UE(User Experience).

GUI(Graphical User Interface)：對圖形用戶界面的視覺設(shè)計，用戶通過界面像手機發(fā)出指令并與之產(chǎn)生交互行為，手機接收到指令產(chǎn)生相應(yīng)的反饋。

UE/UX(User Experience)：用戶體驗，用戶在使用產(chǎn)品過程中的個人主觀感受，UE設(shè)計關(guān)注用戶在使用前，使用過程中，使用后的整體感受，包括用戶行為，情感，成就等各個方面，其目的是保證用戶對產(chǎn)品的使用體驗有正確的預(yù)期，了解他們真實的期望和目的，并以此作為產(chǎn)品核心功能設(shè)計進行修正，保證其與人機界面之間的協(xié)調(diào)工作。

ID(Iteraction Design)：交互設(shè)計，考慮人，環(huán)境與設(shè)備的關(guān)系和行為，以及傳達這種行為的元素設(shè)計。交互設(shè)計，為了讓產(chǎn)品更快易用和高效，讓用戶在使用產(chǎn)品時感到舒適。

UCD(User Center Design)：用戶為中心設(shè)計，是一種設(shè)計思維模式，強調(diào)產(chǎn)品設(shè)計過程中，從用戶的角度出發(fā)來進行設(shè)計，讓用戶成為第一。

UI知識體系

基礎(chǔ)美學(xué) ★★☆☆☆

素描、速寫、色彩

平面設(shè)計??★★★★☆

布局設(shè)計，字體設(shè)計，圖標(biāo)設(shè)計

設(shè)計規(guī)范??★★★★★

界面尺寸，尺寸，系統(tǒng)字體，ui控件，切片輸出，標(biāo)注適配，手勢交互，動效

交互設(shè)計?★★★☆☆

產(chǎn)品結(jié)構(gòu)，交互邏輯，用戶研究

動效設(shè)計?★★★☆☆

動畫腳本，動畫運動理論

設(shè)計心理學(xué)??★★☆☆☆

設(shè)計工具:PS/Sketch/AI/Axure/Ae

輔助工具:ps play/ mark man/ cutter man

UI設(shè)計原則

1、清晰

1）內(nèi)容展示清晰，重要操作擺放位置方便用戶操作

2）可帶來損害性的操作使用鮮艷醒目的顏色提醒用戶，層級之間路徑是否被用戶感知

3）清晰的界面，讓用戶看上去一目了然

2、一致性

1）保持界面風(fēng)格的一致性、結(jié)構(gòu)清晰明朗

2）布局一致，操作流程一致，色調(diào)一致，視覺風(fēng)格一致，控件尺寸一致

3）同樣的圖標(biāo)表意相同，不同位置執(zhí)行同樣的操作時使用同樣的反饋。符合用戶預(yù)期

3、直接操作

1）支持多點觸摸的界面，用戶無需進入應(yīng)用中就可以在手機主屏幕使用3d touch長按進行超級的操作

2）可通過捏合操作直接放大縮小圖片或文本內(nèi)容，通過上下滑動屏幕瀏覽網(wǎng)頁內(nèi)容

3）通過拖拽屏幕將一個內(nèi)容移動至另一個位置上，晃動手機可撤銷輸入的文本內(nèi)容

4、及時反饋

1）界面提醒功能，讓用戶了解反饋信息

2）點擊列表或控件時會臨時高亮，并在操作過程中持續(xù)一段時間，以展示控件被執(zhí)行的過程

5、美學(xué)

1）顏色搭配和諧，圖標(biāo)設(shè)計精致

2）設(shè)計語言一致，布局結(jié)構(gòu)清晰，視圖尺寸舒適，整體視覺規(guī)范統(tǒng)一

3）界面質(zhì)感符合產(chǎn)品氣質(zhì)。設(shè)計風(fēng)格符合用戶定位

APP開發(fā)過程

App團隊成員：產(chǎn)品經(jīng)理，用戶研究，交互設(shè)計，ui設(shè)計，程序開發(fā)人員，測試以及運營團隊

完整的開發(fā)過程

1、產(chǎn)品經(jīng)理

采集需求構(gòu)想開發(fā)產(chǎn)品，包括產(chǎn)品功能需求，產(chǎn)品設(shè)計需求，了解用戶需求，項目期望完成時間和開發(fā)預(yù)算等，最終輸出粗略的原型圖。

2、交互設(shè)計

產(chǎn)品定位和前期需求確定，交互設(shè)計師深入產(chǎn)品原型圖，對需求進行修訂和完善，定義信息架構(gòu)和優(yōu)化操作流程。直接影響產(chǎn)品的業(yè)務(wù)目標(biāo)和轉(zhuǎn)化率。

組織頁面元素，制作高保真原型圖，參與審評，讓產(chǎn)品，視覺，開發(fā)和測試直觀的看到產(chǎn)品的雛形。對原型進行修正改進，做簡單的用戶測試?yán)^續(xù)挖掘情感需求。

3、用戶研究

明確用戶需求點，分析用戶行為習(xí)慣和痛點，建立用戶行為模型，為產(chǎn)品的使用及市場推廣活動提供策略支持，幫助設(shè)計師制定產(chǎn)品設(shè)計方向。

建立產(chǎn)品用戶體驗監(jiān)控指標(biāo)，跟蹤和監(jiān)督用戶滿意度提升，根據(jù)調(diào)研結(jié)果，提出合理的產(chǎn)品改進或優(yōu)化建議。

4、視覺設(shè)計

交互原型圖，頁面邏輯是否順暢(是否和ios規(guī)范有沖突)、信息的重點(用戶最關(guān)心什么)、用戶人群，視覺風(fēng)格和主色調(diào)(電商類用暖色系，社交類用冷色系)、布局是否合理(首屏是否可以容下足夠的關(guān)鍵信息)、設(shè)計語言使用(線性圖標(biāo)還是面形圖標(biāo))、頁面情感化設(shè)計(空狀態(tài)頁面如何引導(dǎo)用戶)

ui設(shè)計師制定設(shè)計規(guī)范，將視覺稿進行適配，標(biāo)注，切片交付給開發(fā)人員，待程序發(fā)測試包后還要進行視覺校驗和界面還原

5、程序開發(fā)

按照用戶需求確定程序功能，并進行模塊化設(shè)計，按照產(chǎn)品經(jīng)理分工完成程序編寫任務(wù)。

6、測試

ui設(shè)計師與開發(fā)人員密切溝通，宣講視覺規(guī)范，協(xié)助視覺還原

7、運營

核心目的讓產(chǎn)品占據(jù)市場和用戶，通過各種推廣渠道讓產(chǎn)品的裝機量，活躍用戶數(shù)和市場占有率等數(shù)據(jù)獲得提升。