1、深圳XXXX技術(shù)有限公司產(chǎn)品部：XXXXUI設(shè)計(jì)目錄01 UI簡介02 UI設(shè)計(jì)理念03 UI設(shè)計(jì)原則04 UI設(shè)計(jì)流程05 正譜教育UI的設(shè)計(jì)想法01 UI簡介UI即用戶界面（ User interface ）在人和機(jī)器的互動(dòng)過程中，有一個(gè)層面，即我們所說的界面（interface）。泛指用戶的操作界面，UI設(shè)計(jì)主要指界面的樣式，美觀程度。01 UI簡介如果說程序是一個(gè)人的肌肉和骨骼，那么如果說程序是一個(gè)人的肌肉和骨骼，那么UI設(shè)計(jì)就是人的外貌和品格設(shè)計(jì)就是人的外貌和品格!都是一個(gè)成功軟件產(chǎn)品必不可少的重要組成部分都是一個(gè)成功軟件產(chǎn)品必不可少的重要組成部分!感覺（視覺/觸覺/聽覺）情感從心理

2、學(xué)意義來分，界面可分為感覺（視覺、觸覺、聽覺等）和情感兩個(gè)層次。置界面于用戶的控制之下減少用戶的記憶負(fù)擔(dān)保持界面的一致性三大原則用戶界面設(shè)計(jì)的三大原則02 UI設(shè)計(jì)理念設(shè)計(jì)理念在不同的軟件產(chǎn)品中會(huì)有一些不同的具體表現(xiàn)形式，根據(jù)產(chǎn)品特性不同、應(yīng)用場(chǎng)景不同而表現(xiàn)出不同的側(cè)重點(diǎn)及具體特性。但是核設(shè)計(jì)理念在不同的軟件產(chǎn)品中會(huì)有一些不同的具體表現(xiàn)形式，根據(jù)產(chǎn)品特性不同、應(yīng)用場(chǎng)景不同而表現(xiàn)出不同的側(cè)重點(diǎn)及具體特性。但是核心的理念特征卻一直保持統(tǒng)一，那就是心的理念特征卻一直保持統(tǒng)一，那就是“內(nèi)容重于形式內(nèi)容重于形式”。UI設(shè)計(jì)包含用戶研究、交互設(shè)計(jì)、界面設(shè)計(jì)三大類以用戶為中心易用舒適簡單UI設(shè)計(jì)交互設(shè)計(jì)用戶

3、研究界面設(shè)計(jì)一切以用戶為中心，設(shè)計(jì)出簡單舒適易用的界面02 UI設(shè)計(jì)理念不同的產(chǎn)品如一個(gè)兒童娛樂產(chǎn)品就需要將界面做的花哨一些或者用大的圖片充斥;一個(gè)應(yīng)用軟件就需要突出使用方便和強(qiáng)大的功能設(shè)計(jì)要簡潔。同類不同的內(nèi)容如一個(gè)可愛的幼兒教育產(chǎn)品(像兒歌動(dòng)畫類)就需要將界面做的活潑生動(dòng)可愛一點(diǎn);如果是一個(gè)中小學(xué)生的專業(yè)助教類產(chǎn)品就要做的簡潔明了一些。03 UI設(shè)計(jì)原則設(shè)計(jì)原則統(tǒng)一性設(shè)計(jì)目標(biāo)一致外觀元素一致交互行為一致合理性用戶習(xí)慣接受程度簡易可用性可理解性可達(dá)到性可控制性03 UI設(shè)計(jì)原則界面沒有任何的操作提示，用戶就明白通過左右滑動(dòng)屏幕來查看更多卡片，還知道卡片是以扇形為運(yùn)動(dòng)軌跡。干凈簡潔的界面可以讓

4、用戶更加沉浸在閱讀的世界里 界面清晰最重要 界面清晰是UI設(shè)計(jì)的第一步，要想讓用戶喜歡你設(shè)計(jì)的UI，首先必須讓用戶認(rèn)可它、知道怎么樣使用它。讓用戶在使用時(shí)預(yù)期會(huì)發(fā)生什么，并方便地與它交互。 全力維護(hù)用戶的注意力在閱讀的時(shí)候，總是會(huì)有事物分散我們的注意力。因此，在設(shè)計(jì)界面的時(shí)候，能夠吸引用戶的注意力很關(guān)鍵，千萬不要將界面的周圍設(shè)計(jì)得亂七八糟。03 UI設(shè)計(jì)原則用戶不知道如何查看很多的卡片，除了查看第一張卡片的詳情，其他的卡片脫離了用戶的掌控。圖標(biāo)的作用是以圖形化的視覺形象給用戶快速引導(dǎo)，如果只是裝飾，就不如不要。 讓界面處于用戶的掌控之中人類往往對(duì)能夠掌控自己和周圍的環(huán)境感到舒服，不考慮用戶感受

5、的設(shè)計(jì)往往會(huì)讓這種舒適感消失。保證界面處于用戶的掌控之中，讓用戶自己感受主動(dòng)權(quán)。直接操作的感覺最棒 當(dāng)能夠直接操作物體時(shí)，用戶的感覺是最棒的。在設(shè)計(jì)界面時(shí)，我們?cè)黾拥膱D標(biāo)往往并不是必需的，比如我們過多的使用按鈕、選項(xiàng)等等其他繁瑣的東西僅僅是為了填滿界面，這些都是畫蛇添足。03 UI設(shè)計(jì)原則界面的交互非常清晰，點(diǎn)擊向下展開，再次點(diǎn)擊向上收起。界面非常漂亮，但登錄被弱化，并且表現(xiàn)形式雷同輸入的提示文字，用戶不易察覺。 界面過渡自然界面的交互都是關(guān)聯(lián)的，所以要認(rèn)真地考慮到下一步的交互是怎樣的，并且通過設(shè)計(jì)將其實(shí)現(xiàn)。當(dāng)用戶已經(jīng)完成該做的步驟，不要讓他們不知所措，給他們自然而然繼續(xù)下去的方法，以達(dá)成目的

6、。表里如一如果它看上去像個(gè)按鈕，那么它就應(yīng)該具備按鈕的功能。設(shè)計(jì)師不應(yīng)該在基本的交互問題上耍小聰明，要在更高層次的問題上發(fā)揮創(chuàng)造力。03 UI設(shè)計(jì)原則元素排版整齊且統(tǒng)一，功能清晰明了。界面以用戶的閱讀習(xí)慣將層次拉開，從左到右，從上到下，元素之間互不干擾。 區(qū)別對(duì)待一致性如果屏幕元素各自的功能不同，那么它們的外觀也理應(yīng)不同。反之，如果功能相同或相近，那么它們看起來就應(yīng)該是一樣的。強(qiáng)烈的視覺層次感強(qiáng)烈的視覺層次感是通過界面上視覺元素提供的清晰瀏覽順序來實(shí)現(xiàn)的，也就是說，用戶每次都能按照同一個(gè)順序?yàn)g覽同一些元素。弱化的視覺層次沒有給用戶提供如何瀏覽的線索，用戶會(huì)感到困惑和混亂。當(dāng)一切都是粗體時(shí)，就沒

7、有主次之分了。03 UI設(shè)計(jì)原則將零散的元素進(jìn)行組合，并以生活中常見的物品展示，用戶更易理解。通過鮮艷的色彩來提醒需要用戶關(guān)注的內(nèi)容恰當(dāng)?shù)慕M織UI能夠降低認(rèn)知難度正如John Maeda在他的書中所說，對(duì)屏幕元素的恰當(dāng)組織能夠使頁面顯得簡潔，這能夠幫助用戶更容易并且更快地理解你的界面。顏色不是決定性因素物體的顏色會(huì)隨著光線的變化而變化，顏色是一個(gè)變化的性質(zhì)，不應(yīng)該在界面上起決定性作用。但是現(xiàn)在有很多天氣、記事、時(shí)鐘類APP極簡的設(shè)計(jì)，常常采用色彩進(jìn)行區(qū)分也非常贊。03 UI設(shè)計(jì)原則用戶只單純地想播放音樂，所以列表頁只需要當(dāng)前播放狀態(tài)、演唱者、專輯名和歌曲名，無需太多的信息。零狀態(tài)結(jié)果本身對(duì)用戶

8、體驗(yàn)極其不好，更需要情感化或引導(dǎo)性的設(shè)計(jì)來降低用戶焦躁的情緒。漸進(jìn)展示在每個(gè)屏幕上只顯示必要的內(nèi)容，如果用戶在做選擇，那么給他們顯示足夠的信息，然后在各自的頁面上展示詳情，避免在某個(gè)界面過度展示所有細(xì)節(jié)。零狀態(tài)的界面第一次訪問界面是最重要的，但經(jīng)常被設(shè)計(jì)者忽視。為了幫助用戶適應(yīng)，應(yīng)該提供啟動(dòng)的方向和引導(dǎo)。03 UI設(shè)計(jì)原則要想做到這點(diǎn)非常不易，但是無厘頭Yo做到了。視覺效果非常好，但是用戶體驗(yàn)上非常糟糕，當(dāng)前狀態(tài)與主界面關(guān)聯(lián)太弱，弧形軌跡閱讀太累。優(yōu)秀的設(shè)計(jì)是無形的優(yōu)秀的設(shè)計(jì)是沒有痕跡的，如果設(shè)計(jì)是成功的，那么用戶可以只關(guān)注自己的目的，而不是界面，不依賴于界面。界面是被人使用的只有用戶使用你設(shè)

9、計(jì)的界面時(shí)，才是成功的。如果一件衣服很漂亮，但是穿起來不舒服，那么設(shè)計(jì)是失敗的。04 UI設(shè)計(jì)流程配合階段分析階段設(shè)計(jì)階段驗(yàn)證階段UI設(shè)計(jì)流程競爭產(chǎn)品能夠上市并且被UI設(shè)計(jì)者知道，必然有其長處。這就是所謂三人行必有我?guī)煹囊馑肌Ｃ總€(gè)設(shè)計(jì)者的思維都有局限性，看到別人的設(shè)計(jì)會(huì)有觸類旁通的好處。當(dāng)市場(chǎng)上存在競品時(shí)，去聽聽用戶的評(píng)論，哪怕是罵聲都好，別沉迷于自己的設(shè)計(jì)中，讓真正的用戶說話。好的設(shè)計(jì)建立在對(duì)用戶深刻了解之上。因此用戶使用場(chǎng)景分析就很重要，了解產(chǎn)品的現(xiàn)有交互以及用戶使用產(chǎn)品習(xí)慣等，但是設(shè)計(jì)人員在分析的時(shí)候一定要站在用戶角度思考：如果我是用戶，這里我會(huì)需要什么。04 UI設(shè)計(jì)流程分析階段需求分

10、析用戶場(chǎng)景模擬競品分析對(duì)于一個(gè)產(chǎn)品來說，必然有對(duì)用戶需求的分析內(nèi)容，更多的是從MRD與PRD獲得，或者從產(chǎn)品需求評(píng)審會(huì)議上得到需求分析的內(nèi)容，當(dāng)然可以直接與產(chǎn)品經(jīng)理交流獲得相關(guān)產(chǎn)品需求。如果說設(shè)計(jì)原則是所有設(shè)計(jì)的出發(fā)點(diǎn)的話，那么用戶需求就是本次設(shè)計(jì)的出發(fā)點(diǎn)。輸入物：MRD(市場(chǎng)需求文檔)、PRD（產(chǎn)品需求文檔）、市場(chǎng)調(diào)查報(bào)告、競品分析文檔輸出物：設(shè)計(jì)初稿(或許只是幾個(gè)簡單的界面)面向?qū)ο螅a(chǎn)品面向的用戶不同對(duì)于產(chǎn)品的設(shè)計(jì)要求不同，不同年齡層的用戶對(duì)于產(chǎn)品的要求不同，產(chǎn)品的用戶定位將對(duì)UI設(shè)計(jì)師影響因素。面向事件驅(qū)動(dòng)則是對(duì)產(chǎn)品響應(yīng)與觸發(fā)事件的設(shè)計(jì)，一個(gè)提示框，一個(gè)提交按鈕這類都是對(duì)事件驅(qū)動(dòng)的設(shè)計(jì)

11、。04 UI設(shè)計(jì)流程設(shè)計(jì)階段(設(shè)計(jì)方法)面向場(chǎng)景面向事件驅(qū)動(dòng)面向?qū)ο竺嫦驁?chǎng)景是針對(duì)該產(chǎn)品使用場(chǎng)景等模擬，模擬用戶在多種情況下產(chǎn)品使用的模擬。輸入物：交互文檔（高保真原型）輸出物：設(shè)計(jì)終稿(所有的設(shè)計(jì)稿)04 UI設(shè)計(jì)流程配合階段UI設(shè)計(jì)師交出產(chǎn)品設(shè)計(jì)圖時(shí)，更多的配合開發(fā)人員、測(cè)試人員進(jìn)行截圖配合。配合開發(fā)人員對(duì)于PSD格式的圖片切圖操作，對(duì)于不同的開發(fā)人員的要求，切圖方式也有不同，UI設(shè)計(jì)師需配合相關(guān)的開發(fā)人員進(jìn)行最適合的切圖配合。對(duì)做好的UI產(chǎn)品要制定一份UI規(guī)范，作為產(chǎn)品的UI設(shè)計(jì)規(guī)范，適用于公司內(nèi)部UI團(tuán)隊(duì)和開發(fā)人員作為參考標(biāo)準(zhǔn)。輸入物：設(shè)計(jì)終稿（高保真效果圖）輸出物：設(shè)計(jì)修改稿(設(shè)計(jì)稿切片標(biāo)注)、UI設(shè)計(jì)規(guī)范04 UI設(shè)計(jì)流程驗(yàn)證階段產(chǎn)品出來后，UI設(shè)計(jì)師需對(duì)產(chǎn)品的效果進(jìn)行驗(yàn)證，與當(dāng)初設(shè)計(jì)產(chǎn)品時(shí)的想法是否一致，是否可用，用戶是否接受，以及與需求是否一致。都需要UI設(shè)計(jì)師驗(yàn)證，UI設(shè)計(jì)師是將產(chǎn)品需求用圖片展現(xiàn)給用戶最直接的經(jīng)手人，對(duì)于產(chǎn)品的理解會(huì)更加深刻。輸入物：產(chǎn)品輸出物：產(chǎn)品(面向用戶最終版本)05 正譜教育UI設(shè)計(jì)想法風(fēng)格定位通過了解公司產(chǎn)品需求再去體驗(yàn)學(xué)習(xí)同行產(chǎn)品的設(shè)計(jì)（如智慧云課堂產(chǎn)品，體驗(yàn)學(xué)習(xí)同行品牌：AiSchool、樂望、極域、NEC）,大致了解同類產(chǎn)品的設(shè)計(jì)走勢(shì)和風(fēng)格。公司產(chǎn)品U