UI設(shè)計交流文檔

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

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

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

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

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

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

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

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

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

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

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