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

2、設計理念,設計理念在不同的軟件產(chǎn)品中會有一些不同的具體表現(xiàn)形式，根據(jù)產(chǎn)品特性不同、應用場景不同而表現(xiàn)出不同的側(cè)重點及具體特性。但是核心的理念特征卻一直保持統(tǒng)一，那就是“內(nèi)容重于形式”。,UI設計包含用戶研究、交互設計、界面設計三大類,一切以用戶為中心，設計出簡單舒適易用的界面,02 UI設計理念,不同的產(chǎn)品 如一個兒童娛樂產(chǎn)品就需要將界面做的花哨一些或者用大的圖片充斥;一個應用軟件就需要突出使用方便和強大的功能設計要簡潔。,同類不同的內(nèi)容 如一個可愛的幼兒教育產(chǎn)品(像兒歌動畫類)就需要將界面做的活潑生動可愛一點;如果是一個中小學生的專業(yè)助教類產(chǎn)品就要做的簡潔明了一些。,03 UI設計原則,設計

3、原則,統(tǒng)一性,設計目標一致,外觀元素一致,交互行為一致,合理性,用戶習慣,接受程度,簡易,可用性,可理解性,可達到性,可控制性,03 UI設計原則,界面沒有任何的操作提示，用戶就明白通過左右滑動屏幕來查看更多卡片，還知道卡片是以扇形為運動軌跡。,干凈簡潔的界面可以讓用戶更加沉浸在閱讀的世界里,界面清晰最重要 界面清晰是UI設計的第一步，要想讓用戶喜歡你設計的UI，首先必須讓用戶認可它、知道怎么樣使用它。讓用戶在使用時預期會發(fā)生什么，并方便地與它交互。,全力維護用戶的注意力 在閱讀的時候，總是會有事物分散我們的注意力。因此，在設計界面的時候，能夠吸引用戶的注意力很關(guān)鍵，千萬不要將界面的周圍設計得

4、亂七八糟。,03 UI設計原則,用戶不知道如何查看很多的卡片，除了查看第一張卡片的詳情，其他的卡片脫離了用戶的掌控。,圖標的作用是以圖形化的視覺形象給用戶快速引導，如果只是裝飾，就不如不要。,讓界面處于用戶的掌控之中 人類往往對能夠掌控自己和周圍的環(huán)境感到舒服，不考慮用戶感受的設計往往會讓這種舒適感消失。保證界面處于用戶的掌控之中，讓用戶自己感受主動權(quán)。,直接操作的感覺最棒 當能夠直接操作物體時，用戶的感覺是最棒的。在設計界面時，我們增加的圖標往往并不是必需的，比如我們過多的使用按鈕、選項等等其他繁瑣的東西僅僅是為了填滿界面，這些都是畫蛇添足。,03 UI設計原則,界面的交互非常清晰，點擊向下

5、展開，再次點擊向上收起。,界面非常漂亮，但登錄被弱化，并且表現(xiàn)形式雷同輸入的提示文字，用戶不易察覺。,界面過渡自然 界面的交互都是關(guān)聯(lián)的，所以要認真地考慮到下一步的交互是怎樣的，并且通過設計將其實現(xiàn)。當用戶已經(jīng)完成該做的步驟，不要讓他們不知所措，給他們自然而然繼續(xù)下去的方法，以達成目的。,表里如一 如果它看上去像個按鈕，那么它就應該具備按鈕的功能。設計師不應該在基本的交互問題上耍小聰明，要在更高層次的問題上發(fā)揮創(chuàng)造力。,03 UI設計原則,元素排版整齊且統(tǒng)一，功能清晰明了。,界面以用戶的閱讀習慣將層次拉開，從左到右，從上到下，元素之間互不干擾。,區(qū)別對待一致性 如果屏幕元素各自的功能不同，那么

6、它們的外觀也理應不同。反之，如果功能相同或相近，那么它們看起來就應該是一樣的。,強烈的視覺層次感 強烈的視覺層次感是通過界面上視覺元素提供的清晰瀏覽順序來實現(xiàn)的，也就是說，用戶每次都能按照同一個順序瀏覽同一些元素。弱化的視覺層次沒有給用戶提供如何瀏覽的線索，用戶會感到困惑和混亂。當一切都是粗體時，就沒有主次之分了。,03 UI設計原則,將零散的元素進行組合，并以生活中常見的物品展示，用戶更易理解。,通過鮮艷的色彩來提醒需要用戶關(guān)注的內(nèi)容,恰當?shù)慕M織UI能夠降低認知難度 正如John Maeda在他的書中所說，對屏幕元素的恰當組織能夠使頁面顯得簡潔，這能夠幫助用戶更容易并且更快地理解你的界面。,

7、顏色不是決定性因素 物體的顏色會隨著光線的變化而變化，顏色是一個變化的性質(zhì)，不應該在界面上起決定性作用。但是現(xiàn)在有很多天氣、記事、時鐘類APP極簡的設計，常常采用色彩進行區(qū)分也非常贊。,03 UI設計原則,用戶只單純地想播放音樂，所以列表頁只需要當前播放狀態(tài)、演唱者、專輯名和歌曲名，無需太多的信息。,零狀態(tài)結(jié)果本身對用戶體驗極其不好，更需要情感化或引導性的設計來降低用戶焦躁的情緒。,漸進展示 在每個屏幕上只顯示必要的內(nèi)容，如果用戶在做選擇，那么給他們顯示足夠的信息，然后在各自的頁面上展示詳情，避免在某個界面過度展示所有細節(jié)。,零狀態(tài)的界面 第一次訪問界面是最重要的，但經(jīng)常被設計者忽視。為了幫助

8、用戶適應，應該提供啟動的方向和引導。,03 UI設計原則,要想做到這點非常不易，但是無厘頭Yo做到了。,視覺效果非常好，但是用戶體驗上非常糟糕，當前狀態(tài)與主界面關(guān)聯(lián)太弱，弧形軌跡閱讀太累。,優(yōu)秀的設計是無形的 優(yōu)秀的設計是沒有痕跡的，如果設計是成功的，那么用戶可以只關(guān)注自己的目的，而不是界面，不依賴于界面。,界面是被人使用的 只有用戶使用你設計的界面時，才是成功的。如果一件衣服很漂亮，但是穿起來不舒服，那么設計是失敗的。,04 UI設計流程,配合階段,分析階段,設計階段,驗證階段,UI設計流程,競爭產(chǎn)品能夠上市并且被UI設計者知道，必然有其長處。這就是所謂三人行必有我?guī)煹囊馑?。每個設計者的思維

9、都有局限性，看到別人的設計會有觸類旁通的好處。當市場上存在競品時，去聽聽用戶的評論，哪怕是罵聲都好，別沉迷于自己的設計中，讓真正的用戶說話。,好的設計建立在對用戶深刻了解之上。因此用戶使用場景分析就很重要，了解產(chǎn)品的現(xiàn)有交互以及用戶使用產(chǎn)品習慣等，但是設計人員在分析的時候一定要站在用戶角度思考：如果我是用戶，這里我會需要什么。,04 UI設計流程,分析階段,需求分析,用戶場景模擬,競品分析,對于一個產(chǎn)品來說，必然有對用戶需求的分析內(nèi)容，更多的是從MRD與PRD獲得，或者從產(chǎn)品需求評審會議上得到需求分析的內(nèi)容，當然可以直接與產(chǎn)品經(jīng)理交流獲得相關(guān)產(chǎn)品需求。如果說設計原則是所有設計的出發(fā)點的話，那么

10、用戶需求就是本次設計的出發(fā)點。,輸入物：MRD(市場需求文檔)、PRD（產(chǎn)品需求文檔）、市場調(diào)查報告、競品分析文檔,輸出物：設計初稿(或許只是幾個簡單的界面),面向?qū)ο螅a(chǎn)品面向的用戶不同對于產(chǎn)品的設計要求不同，不同年齡層的用戶對于產(chǎn)品的要求不同，產(chǎn)品的用戶定位將對UI設計師影響因素。,面向事件驅(qū)動則是對產(chǎn)品響應與觸發(fā)事件的設計，一個提示框，一個提交按鈕這類都是對事件驅(qū)動的設計。,04 UI設計流程,設計階段(設計方法),面向場景,面向事件驅(qū)動,面向?qū)ο?面向場景是針對該產(chǎn)品使用場景等模擬，模擬用戶在多種情況下產(chǎn)品使用的模擬。,輸入物：交互文檔（高保真原型）,輸出物：設計終稿(所有的設計稿),

11、04 UI設計流程,配合階段,UI設計師交出產(chǎn)品設計圖時，更多的配合開發(fā)人員、測試人員進行截圖配合。配合開發(fā)人員對于PSD格式的圖片切圖操作，對于不同的開發(fā)人員的要求，切圖方式也有不同，UI設計師需配合相關(guān)的開發(fā)人員進行最適合的切圖配合。對做好的UI產(chǎn)品要制定一份UI規(guī)范，作為產(chǎn)品的UI設計規(guī)范，適用于公司內(nèi)部UI團隊和開發(fā)人員作為參考標準。,輸入物：設計終稿（高保真效果圖）,輸出物：設計修改稿(設計稿切片標注)、UI設計規(guī)范,04 UI設計流程,驗證階段,產(chǎn)品出來后，UI設計師需對產(chǎn)品的效果進行驗證，與當初設計產(chǎn)品時的想法是否一致，是否可用，用戶是否接受，以及與需求是否一致。都需要UI設計師驗證，UI設計師是將產(chǎn)品需求用圖片展現(xiàn)給用戶最直接的經(jīng)手人，對于產(chǎn)品的理解會更加深刻。,輸入物：產(chǎn)品,輸出物：產(chǎn)品(面向用戶最終版本),05 正譜教育UI設計想法,風格定位 通過了解公司產(chǎn)品需求再去體驗學習同行產(chǎn)品的設計（如智慧云課堂產(chǎn)品，體驗學習同行品牌：AiSchool、樂望、極域、NEC）,大致了解同類產(chǎn)品的設計走勢和風格。公司產(chǎn)品