<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          


          
    
  
    
          
    
                    首頁
    
          
              
          
            
            
          在不同屏幕和設備上創建用戶體驗設計的8個步驟
          
            
          
               seo達人                                            
          
            
          

          
    
          
        
          
    
          

          

          

          
    1. 確定核心用戶體驗 

          

          
    每個產品都有核心的用戶體驗，這基本上是它存在的原因。它解決了人們所面臨的問題，而且為他們提供有意義的價值。關鍵內容和功能的組合代表了核心的用戶體驗。要查找你的產品核心用戶體驗，就要問自己一個問題：“客戶需要完成哪些最常見和最重要的任務？”在你用于產品的每個渠道上支持這些核心任務的本質至關重要。例如，Uber的核心用戶體驗是任何時間隨叫隨到。無論屏幕尺寸如何，此功能都能在每個設備上正常工作實現這一目的。

          

          
    Image title 

          

          
                                 預約出租車是Uber用戶最重要的任務。用戶可以使用Apple Watch完成此任務。圖片來源： Techcrunch 

          

          
     

          

          
    2. 定義產品的設備組 

          

          
    盡管存在大量不同屏幕尺寸的設備，但絕對不能定位各個設備，可以根據用戶可能關注的任務定義產品的設備組。最常見的設備組是：

          

          
    移動手機

          

          
    平板電腦

          

          
    臺式電腦

          

          
    智能電視

          

          
    智能手表

          

          
    Image title 

          

          
    不同的設備組在不同的上下文中提供不同的服務：用戶根據他們正在查看的屏幕的類型參與不同的交互模式。例如，手機主要用于微任務，并且具有較短的用戶會話。平板電腦主要用于內容消費，目前不被視為大多數人的工作工具。在了解各種設備類型的基本上下文的假設對于構建一個好的用戶體驗是至關重要。

          

          
     

          

          
    3. 適應每個上下文使用的體驗 

          

          
    確定產品的核心用戶體驗后，選擇一組你希望支持的設備組，你需要調整每個組的體驗（對于每個上下文的使用）。上下文的設計在不同設備組設計時尤為重要。

          

          
    第一，并非所有功能都在所有設備上都有意義。你需要確定你的產品在多個設備組中使用的不同場景，并設計適合每個場景的體驗。例如，通常移動用戶比電腦用戶想要的不同于產品。以 Evernote為例，可以在多臺設備上使用流行的筆記本產品。其電腦版本針對內容消費進行了優化：

          

          
    Image title 

          

          
                               用于電腦版本的Evernote應用程序被優化用于閱讀文本和查看媒體。 

          

          
     

          

          
    而移動版本是針對拍攝筆記、照片和捕獲音頻進行了優化的：

          

          
    Image title 

          

          
    Evernote了解移動環境：它利用設備功能，并提供快速保存想法的方式（添加文本筆記，捕獲照片或設置提醒）。 

          

          
     

          

          
    第二，不同的屏幕允許不同的輸入法。以觸摸輸入為例。在設計具有觸摸輸入（移動手機和智能手機）的設備時，設計師會犯的幾個常見錯誤包括：

          

          
    小的點擊目標。點擊目標（如CTA按鈕）必須具有足夠大的尺寸。通常至少7毫米是足夠的，但最好使用10mm觸摸目標尺寸。

          

          
    Image title 

          

          
                                          圖片來源：UXMag 

          

          
     

          

          
    將項目過于緊密地放在一起。你應該考慮點擊目標的大小以及它們之間的間距，因為間距有助于分離控件，并給你的用戶界面提供呼吸的空間。建議的間距至少為23pt以防止輸入錯誤。

          

          
    Image title 

          

          
                                                                                          按鈕之間的間距 

          

          
    使用懸停狀態。但在觸摸屏上，沒有“懸?！?。

          

          
     

          

          
    4. 最小屏幕設計 

          

          
    歷史上，設計師一直從事大屏幕到小屏幕的設計工作，這意味著第一個也是主要設計是為了完整的電腦桌面視圖（它具有最多的功能）。只有電腦桌面設計完成后才移植到移動設備和其他設備組。但當設計電腦桌面時，我們通常面臨“廚房水槽”問題：許多功能被添加到產品中，特別是當涉及多個利益相關者時。這并不奇怪，，當你有很多不動產時，添加功能是比較容易。實踐經驗清楚地表明，最好使用移動方法進行設計，并通過與用戶相關的最小屏幕創建應用程序。

          

          
    當你首先設計相關屏幕的最小尺寸時，它會強制你決定最重要的。一段時間后，你將采用同樣的方法仔細選擇產品的其他版本，無論是電腦桌面設備，平板電腦還是電視。

          

          
    Image title 

          

          
    在大多數情況下，手機將是相關屏幕的最小尺寸。如果可穿戴設備對你很重要，那么你將需要考慮具有更小分辨率的微型屏幕。

          

          
     

          

          
    5. 不要忘記大屏幕 

          

          
    想想大屏幕以及小屏幕，給大屏幕和小屏幕提供同樣的注意力：

          

          
    不只是縮小設計，使其適合那些大屏幕。充分利用你可以使用的額外空間。

          

          
    Image title 

          

          
                                                                                               圖片來源：Wikipedia 

          

          
     

          

          
    確保圖像不會因為屏幕尺寸的放大而失去質量。

          

          
    Image title 

          

          
                                                    左：低質量圖像。右：正確的分辨率。 

          

          
     

          

          
    考慮大屏幕細節。每個設備組都有自己的不同。例如，電視屏幕的設計被稱為“設計10英尺體驗”，因為從沙發的距離來看，與電腦桌面屏幕相比，屏幕上元素的明顯尺寸明顯更小。

          

          
    Image title 

          

          
                                                                     電視的用戶界面元素應大于電腦桌面。圖片來源：Samsung 

          

          
     

          

          
    6. 提供一致的體驗 

          

          
    一致的體驗意味著應用程序及其在所有屏幕尺寸上的體驗都是相似的。無論設備如何，一致的用戶體驗是成功的全通道用戶體驗的關鍵組成部分之一：

          

          
    對未來與產品的交互設定期望，并建立用戶信心。

          

          
    一致的體驗使得你的產品在其他設備上與用戶的交互更容易。

          

          
    你可以將它們視為相同體驗的方面，而不是將設計定制到越來越多的屏幕和設備中。例如，Google搜索應用在所有設備上提供相同的搜索體驗。

          

          
    Image title 

          

          
                                                     當設計和功能一致時，用戶可以在他們選擇的設備上更快更有效地完成任務。 

          

          
     

          

          
    7. 創造無縫體驗 

          

          
    跨不同設備組創建無縫體驗對你的用戶非常重要。人們可以自由地在設備之間來回移動，完成任務，或當他們從設備轉移到另一設備時，他們期望他們的產品和服務與他們一起轉移。這意味著用戶不必考慮他們正在使用的設備，環境的變化或上下文的變化，并且可以依賴于設備良好的功能性和獨立于設備的易用性。

          

          
    Image title 

          

          
                      大多數人如何走過他們的一天，他們訪問的主要屏幕。圖片來源：Intercom 

          

          
     

          

          
    根據使用情況，你可能希望確保每個設備上的內容消耗量同步。以Apple Music為例：你可以在Mac上設置播放列表，并在iPhone上即時播放，也可以開始聽iPhone上的歌曲，當你轉到電腦桌面時，你將被拍攝回到你在iPhone上。

          

          
    Image title 

          

          
                                                                      Apple Music可以很好地處理多個設備的同步。 

          

          
     

          

          
    8. 測試你的設計 

          

          
    在測試環境中有效的并不總是在現實世界中。在實際設備上為實際用戶運行可用性測試，你可以在發布之前發現用戶體驗的問題并解決它。

          

          
     

          

          
    結論 

          

          
    在設計多個屏幕和設備時，最好的策略是保持最終的用戶體驗。作為用戶體驗設計師，你必須評估產品的使用時間，位置和方式，以評估用戶的最佳體驗。無論你的內容是什么尺寸的屏幕，用戶都希望在各種設備之間獲得流暢的體驗。

          

          
     

          

          
    
          
        原文地址：ADOBE BLOG
    
          
    
          
        譯文地址：UI中國
    
          
    
          
        作者：Nick Babich
    
          
    
          
        譯者：SKYUI
    
          

          

          
     

          

          
    轉載請注明：學UI網》在不同屏幕和設備上創建用戶體驗設計的8個步驟
          

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。 

          

          
    截屏2021-05-13 上午11.41.03.png 

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、 

          

          
    UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          
           

          

          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(1701)
              
                          
          
          
          
                      
          
            
            
          動效賦能 助力用戶體驗設計
          
            
          
               seo達人                                            
          
            
          

          
    
          

          

          

          
    起源發展 

          

          動畫發展大致經過了三大階段，分別是從傳統動畫（紙筆）>>CG動畫（離線渲染）>>互動動畫（實時渲染）。隨著時代變遷、設備以及技術升級，新的動畫形式以及呈現載體不斷的被創造出來。
          動畫發展的三大階段
          

          
     

          

          

          
    傳統動畫注重理論基礎以及扎扎實實的基本功，并且是藝術學院必修課，宮崎駿的早期的動畫就是傳統的手繪動畫。每一張都是純手繪的作品，所以我們看到宮崎駿的動畫會有完全不同于純工業的動畫的感覺。

          

          CG動畫是隨著電影行業與游戲行業一并發展起來的，由于電影的工業化程度太高，技術積累也越來越深厚，所有游戲使用的工具與技術偏向電影那一套，但不同的是電影是離線渲染的，一部短片渲染幾千個小時都算很正常。而游戲與電影不同，實時渲染必須保證幀速率，所以游戲行業最重要的技術核心就是改進游戲引擎。
          互動動畫想必大家更加熟悉，也就是游戲、web/app、VR/AR/AI、新媒體這些領域的動畫，這篇文章我們主要講的就是Web/App動畫。
          初期蘋果Mac桌面文件夾的打開與關閉
          

          
     

          

          從初期的MAC電腦到現在的iPhone X 不過短短的幾十年，產品設計中動效的運用已經獲得了巨大的進步。動效其實對于用戶體驗這個大專業來講是一種新的學科，隨著我們的設備的硬件條件越來越好，動效才被支持的越來越好，可實現的難度也才越來越低。
          交互動畫里有一部分依然是歸為傳統動畫的，比如說Loading/插畫動畫/載入動畫等等。這些可以動畫需要多關注迪士尼12大動畫原則（節奏&時間、運動曲線、預備動作、夸張、擠壓&拉伸、次要動作、慣性、關鍵幀動畫&連貫動畫、動作表現力、感染力、角色個性），但是另外一部分則是扎根于產品設計的“交互”中。
          CG動畫與交互動畫的區別
          

          
     

          

          CG動畫更加注重片子所表達的故事的完整性以及趣味性，大部分運用的都是超現實的手法，時長一般都5s以上，只需要開動腦洞只要軟件技術能實現都可以發揮出來。
          而交互動畫更注重的是動效的合理性和可用性，動力學需符合真實的物理世界，還要注重整個產品內的動效的統一與協調。一般持續時間都很短在1s內，大部分動畫在200-500ms內完成。整體來說動效都相對簡單，不會太復雜因為要考慮技術可實現性。
          

          
     

          

          

          
     應用場景 

          

          
    這里我們只針對我們互聯網產品設計講一下交互動效的應用場景，我總結了以下七大應用場景，分別是圖標動畫、界面交互、插畫動效、HUD大屏、汽車系統、項目包裝、品牌宣傳等等。

          

          
     

          

          
    圖標動效 

          

          一般來說圖標動效適用于App或者web產品中，單個持續時間在100ms左右，根據圖標的復雜程度以及實際使用的場景最長時間也不超過400-500ms。圖標動效更注重微弱的變化帶來的趣味性以及流暢性，常用于狀態反饋以及導航引導，通過小小的變化可以為產品體驗增色不少，優秀的還可以給用戶留下深刻的印象。
          

          
     

          

          
    界面交互  

          

          一方面界面交互動效可以讓人對產品產生深刻的印象，甚至是帶來驚喜，另一方面表達了界面之間的交互過程，吸引用戶的注意力。通過減少預判誤差、增加連貫性、強調敘述、清晰關系四個方面來增加產品的可用性。
          

          
     

          

          

          
    汽車系統  

          

          汽車系統的用戶界面以及動效一般都來說比較有科技感，動畫會更加的酷炫。本質上來說汽車系統其實跟我們日常用的產品是一樣的，由于行業定位的不同以及用戶使用場景的不同造成了這些差異。
          

          
     

          

          
    插畫動效  

          

          適用于App的引導頁、運營活動、空狀態頁面、錯誤頁面，展示型網站等等。在產品設計中插畫動效一般有2種實現形式，一種是視頻或者動態圖片直接加載即可，另外一種就是開發同學通過技術手段來實現，SVGA、lottile、apng等等。
          

          
     

          

          
    品牌宣傳 

          

          http://mpvideo.qpic.cn/tjg_3563468614_50000_27353420971e4cc9bfc680ecff137bc3.f10002.mp4?dis_k=77967b65644a687675ed4f1eb1920a8c&dis_t=1568711387
          這是韓國一家咨詢公司Plus X做的一個App的宣傳動畫，這里說的品牌宣傳更像是一個產品的解析以及意義的傳達，更輕量化、片長更短、制作技法也相對簡單一些。
          

          
     

          

          
    HUD  

          

          HUD可能很多同學都不知道是什么，給大家科普一下。HUD（Head Up Display）又叫平視顯示器，最開始呢是運用在航空器上的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要的重要資訊。平視顯示器最早出現在軍用飛機上，降低飛行員需要低頭查看儀表的頻率，避免注意力中斷以及喪失對狀態意識(Situation Awareness）的掌握。因為HUD的方便性以及能夠提高飛行安全，民航機也紛紛跟進安裝，汽車也開始安裝。后面延伸到像大家在科幻電影里面看到的那種智慧大屏，以及政府機關等等我看看到的那種藍色動態LED大屏都屬于HUD。
          

          
     

          

          
    項目包裝  

          

          https://v.qq.com/x/page/r0824uenul0.html
          上面的視頻是騰訊的ISUX部門2018項目包裝的視頻，當時這個視頻上線后，各大公司的UED部門競相模仿，這個項目包裝里面有很多項目都用到動效設計，包括禮物動效，表情動效、插畫動效、logo演繹等等，這說明動效設計在互聯網產品設計中的應用已經相當的廣泛了，作品本身的效果加上簡單的動畫包裝就可以做成一個動態的作品集，對于宣傳團隊是一個很不錯的點，個人作品集也可以按照這個思路來做，肯定也會有很不錯的效果。
          

          
     

          

          
    設計語言 

          

          設計語言是指導統一產品設計的大腦，所以了解設計語言對于我們無論是做界面還是做交互設計以及動效設計等等都有很大的指導性作用。
          上圖中的6個是國內外比較知名的設計語言系統，大家應該或多或少了解一點，推薦大家有興趣可以去看看他們的設計系統，相信會對你們有很大的幫助，對幫助構建你的個人設計體系也有很大的參考作用。
          這里我們以Material Design為例進行講解，給大家介紹一下這套設計語言以及設計語言內的動畫模塊在我們的工作中是如何運用的。
          Material Design，是由Google在I/O 2014大會上推出的全新的設計語言，其靈感來自與真實物理世界及其紋理，包括真實物理世界如何反射光線和投射陰影，通過材料來重新構想紙張和墨水的一種介質。
          

          
     

          

          其主要目標是：
          創建：創建一種視覺語言，將經典的優秀設計原則與技術和科學的創新和可能性相結合。
          統一：開發單一的底層系統，統一跨平臺，設備和輸入方法的用戶體驗。
          定制：擴展Material的視覺語言，為創新和品牌表達提供靈活的基礎。
          

          
     

          

          基本設計原則：
          大膽，圖形，有意：Material Design以印刷設計方法為基本指導：排版、網格、空間、比例、顏色和圖像。即創造層次、意義和焦點，讓觀眾沉浸在體驗中。
          動效有意義：通過微妙的反饋和連貫的過渡，集中注意力并保持連續性。當元素出現在屏幕上時，它們會轉換和重新組織環境，交互產生新的轉換。
          基礎靈活：Material Design系統旨在實現品牌表達。它與自定義代碼庫集成，允許無縫實現組件，插件和設計元素。
          跨平臺：Material Design使用跨Android，iOS，Flutter和Web的共享組件跨平臺維護相同的UI。
          Material Design的要解決的問題以及設計原則大家應該都了解了，我們針對設計語言內的動效有意義做一下延伸，讓大家對動畫有一個再深入一些的了解。
          

          
     

          

          那么Material Design動效的用途主要有以下四點：
          層級關系：通過動效反映父級元素（收件箱）與子級元素（收件箱郵件）之間的層次結構關系。
          狀態與反饋：動效提供及時的反饋和用戶操作狀態。
          用戶引導：動效為用戶如何執行操作提供有用的建議。
          個性化：動效為產品設計提供可更多的趣味性、個性以及吸引力，對品牌的提升和認知有很大的促進作用。
          

          
     

          

          了解了設計語言的動效模塊，相信大家應該有一個系統的認識，在方寸之間進行動畫設計，考慮的就是毫秒之內，而在毫秒之內最應該考慮的就是速度，研究發現，在界面設計中最合適的動畫時間為200-500ms之間，時間太短，用戶難以感知，時間太長，用戶又會覺得整個過程太緩慢不夠流暢。
          當然了根據設備的不同動畫內容的不同，動畫持續的時間自然也是不相同的。動畫時間的長短與動畫路徑的遠近是成正比的一般。另外平臺的不同，動畫持續的時間也是不相同的，在pc端內的動畫要比移動端的動畫持續時間普遍少50%左右，這是因為平臺的屬性所造成的。但是要是單純的做裝飾動畫是可以單純發揮的，不用遵守上面的幾個原則，所以進行動畫設計的時候都需要考慮到具體的場景以及具體的需求，靈活運用。
          說完了時間，我們來說說跟時間息息相關的動畫曲線，我們都知道在幾百ms內表現出動畫的特點是有點難度的，所以精細的運動曲線對我們就顯得格外重要，這里我總結一下Material Design內提到的幾個常用的動畫運動曲線，大家有興趣可以去Material Design的官方文檔內詳細查看：
          上述的幾個運動類型以及動畫曲線我們在產品設計內經常會用到，希望大家打好基礎，靈活運用。
          我們知道任何一件事情都有存在的價值和必要，動畫也不例外，如果動畫沒有體現出他應該有的價值，那么做的再好看也只是僅僅局限在了好看這一個層面，下面我們就看看動畫到底能在產品設計中帶來什么樣的價值。
          

          
     

          

          

          
    動畫價值 

          

          有時候現代科技產物使用起來非常復雜，但是其實“復雜”本身沒有好壞之分：不好是因為沒有處理好這個復雜所以產生了“混亂”，所以應該被批評的不是復雜而是因復雜所產生的混亂。——唐納德·諾曼
          

          
    優秀的動效可以幫我們解決產品設計中的很多問題，可以從用戶體驗的五大要素來進行價值的拆解：

          

          
     

          

          
    戰略層 

          

          
    戰略層本質上來說大部分設計師其實是接觸不到的，當然接觸不到戰略并不能代表我們不需要了解，作為設計師我們必須了解公司對產品的戰略定位以及期望，也必須要了解用戶的目標和心理預期。戰略層是整個產品的核心也是底層，所以單純來講，動畫在這一層面上可以發揮的余地是是不多的，因為更多的這一層更加關注意識形態的戰略思考。

          

          
     

          

          
    范圍層 

          

          
    范圍層是通過戰略思考來思考明確產品的大概功能和內容，有很多產品的功能復雜，交互繁重，內容很多，在這種情況下動效就派上了用場，我們可以嘗試通過動效來解決內容過載，優化交互模塊，擴展產品內容功能范圍。

          

          
     

          

          
    結構層 

          

          
    這一層主要確定產品的功能結構以及層級，主要設計用戶如何快速，準確的觸達某個界面完成某個任務，要考慮用戶體驗地圖，用戶整個的任務路徑，簡單來說就是用戶要做什么事情，如何做，做完之后應該干什么，如果能對動效巧妙的運用，就可以做到引導用戶，練習上下流程的作用，降低用戶理解成本，提搞產品的操作效率，提高產品的可用性和易用性。

          

          
     

          

          
    框架層 

          

          
    從這一層開始，UI設計師接觸的內容逐漸多了起來，大家也會更加熟悉工作的內容以及范圍，這一層主要體現在優化頁面布局，確定元素擺放位置，涉及到具體的信息、界面、導航設計等等。通過利用格式塔，柵格，設計語言等方法確定產品功能具體頁面內容布局，我們可以通過動效來進行輔助設計，例如強化元素的位置、顏色、大小，優化頁面的切換、跳轉的流暢度以及自然度等等。 

          

          
     

          

          
    表現層 

          

          
    表現層具體涉及到視覺、聽覺、觸覺的體驗設計，也是做為視覺設計師、UI設計師發揮最多的一層，在表現層動效的展現形式會多種多樣，這里不展開講解，大家應該都明白。在表現層加入適當的動畫能夠提升產品趣味性，加強用戶與產品的情感鏈接，增加用戶對產品的友好度。

          

          
     

          

          
    未來發展 

          

          
    5G 

          

          
    5G時代已經到來，5G的普世將會為科技發展帶來更多的可能性，眾所周知5G的速度是4G的百倍，那么意味著我們的設計的動畫會加載的更快，動畫文件的大小限制將會被打破，另外也可以在某些領域的產品內設計更復雜更酷炫的動畫。

          

          
     

          

          
    人工智能（AI） 

          

          
    它是研究、開發用于模擬、延伸和擴展人的智能的理論、方法、技術及應用系統的一門新的技術科學。該領域的研究包括機器人、語言識別、圖像識別、自然語言處理和專家系統等。在我們日常生活中運用的包括不限于人機對弈、模式識別、自動工程、知識工程等等。所以未來在這些領域內，我們能參與到的動畫設計必然會更多樣，形式也會更豐富，挑戰也會更大。可能會不斷有新的動畫形式以及設計方法被創造出來，讓我們拭目以待。

          

          
     

          

          
    虛擬現實（VR） 

          

          
    是20世紀發展起來的一項全新的實用技術。虛擬現實技術囊括計算機、電子信息、仿真技術于一體，其基本實現方式是計算機模擬虛擬環境從而給人以環境沉浸感。隨著社會生產力和科學技術的不斷發展，各行各業對VR技術的需求日益旺盛，VR技術也取得了巨大進步，并逐步成為一個新的科學技術領域。相信在未來的工作中必然會慢慢的接觸到VR界面設計以及動畫設計，并且我相信未來會逐漸的變成主流。

          

          
     

          

          
    參考資料 

          

          material.io/design/motion
          https://www.zcool.com.cn/article/ZODIzMzky.html
          https://zhuanlan.zhihu.com/p/27114894
          

          
     

          

          原文地址： 小凱的設計筆記（公眾號）
          作者：小凱君
          轉載請注明：學UI網》動效賦能 助力用戶體驗設計
          

          
    
          

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。 

          

          
    截屏2021-05-13 上午11.41.03.png 

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、 

          

          
    UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          
           

          

          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(1922)
              
                          
          
          
          
                      
          
            
            
          你想要的，用戶體驗設計中的心理學
          
            
          
               seo達人                                            
          
            
          

          
    
          
        
          
    
          

          

          

          
    變色龍效應/鏡像效應 

          

          
    圖片 

          

          
    俗話說，“有樣學樣（Monkey see, monkey do）”，包括人類在內的靈長類動物都擅長模仿。這個詞表示無意識鏡像或模仿我們周邊人行為的狀態。根據我們在產品方面的經驗，我們進行的互動具有親密性和即時性。

          

          
    你有沒有試過聽了朋友說的話之后又說給對方聽？這是變色龍效應的完美例子。

          

          
     

          

          
    啟動效應（Priming） 

          

          
    圖片 

          

          
    指由于之前受某一刺激的影響而使得之后對同一刺激的知覺和加工變得容易的心理現象。我們半夜三更看了電視的恐怖電影之后，跟看喜劇相比，屋子里面聽到的任何吱吱聲或者噪音更有可能讓你毛骨悚然、心驚肉跳。

          

          
    啟動效應會塑造我們對環境的行為和反應，而且往往是有效的捷徑，讓我們可以迅速做出決定。這也是一種有效的說服工具，已經廣泛應用到產業的營銷和廣告領域。

          

          
     

          

          
    馮·雷斯托夫（Von Restorff）效應 

          

          
    圖片 

          

          
    德國精神病學家和兒科醫生海德維希·馮·雷斯托夫（Hedwig von Restorff）在1933年提出的理論。馮·雷斯托夫有一次實驗，涉及到讓受試者觀看一系列相似的物品。結果他發現，如果其中某個很特別的話，那么相比其他物品，受試者就更容易回憶起這件物品。

          

          
    馮·雷斯托夫效應又叫做隔離效應（isolation effect），或者新奇效應（novelty effect），其預測是當存在多個相似的對象時，跟其他有所不同的那個最有可能被記住。 

          

          
     

          

          
    序列位置效應 

          

          
    圖片 

          

          
    該理論由赫爾曼·艾賓浩斯（Herman Ebbinghaus，著名的艾賓浩斯遺忘曲線也是他的發現）提出。它描述了序列中項目的位置是如何影響回憶的準確性的。

          

          
    這種效應是指記憶材料在系列位置中所處的位置對記憶效果發生的影響，包括首因效應和近因效應。系列開頭的材料比系列中間的材料記得好叫首因效應或者首位效應；系列末尾的材料比系列中間的材料記得好叫近因效應或新近效應。

          

          
    用戶往往最容易記住系列中的第一項和最后一項。 

          

          
    把最重要的信息放到開始和結尾。把最不重要的信息放在中間，這是吸引用戶注意力的高效方法。

          

          
     

          

          
    格式塔原理 

          

          
    圖片 

          

          
    在格式塔原理之下，派生出了很多的其他原理。我們會在下面進行簡要討論：

          

          
     

          

          
    負空間： 

          

          
    圖片 

          

          
    在設計周圍留白，從而創造出一塊大于其各個部分之和的區域。用最簡單的措辭來說，格式塔理論是基于這樣一種思想，即人腦會下意識地把各個部分組織成一個系統，從而創造出一個整體而不是一系列的離散元素，通過這樣來簡化和組織包含有很多元素的復雜圖像或者設計。我們的大腦天生就是為了看清結構和模式，從而更好的理解我們生活的環境而構造出來的。

          

          
     

          

          
    相似： 

          

          
    圖片 

          

          
    在格式塔里面，相似的元素不管彼此是否靠近也會在視覺上進行分組。分組可以按顏色、形狀或大小進行。相似性可用來將可能彼此不相鄰的東西聯系在一起。

          

          
     

          

          
    連續性： 

          

          
    圖片 

          

          
    不管實際畫出來的線條如何，人眼在觀看線條的時候都會按照最平滑的路徑想象。當目標是引導訪客的眼睛朝特定方向看時，這種連續性會是很有價值的工具。

          

          
     

          

          
    閉合： 

          

          
    圖片 

          

          
    這條原理反映的是人會把設計或圖像缺失的部分自行腦補，創建出一個整體來?；蛘哒f得簡單點，在Adobe、Sun Microsystem、NBC、USA Network等的logo中就可以看到復雜的形狀。

          

          
     

          

          
    相鄰性： 

          

          
    圖片 

          

          
    這條原理是指元素之間的距離如何。在UX設計當中，運用相鄰性是為了讓用戶將某些事物組合到一起。通過把它們放在一起，用戶就會感覺它們是相關的。

          

          
     

          

          
    圖形與背景關系： 

          

          
    圖片 

          

          
    跟閉合原理類似，這條也利用了負空間。我們的大腦會區分出圖像前景的對象。設計師如果想要突出某個焦點時，用這條這真的很方便。

          

          
     

          

          
    共同命運律： 

          

          
    圖片 

          

          
    這條原理是指，沿同一個方向移動的元素本身會被視為一組。如果我們看到一群鳥朝特定的方向飛行，我們就會把它們組合在一起，并將它們看作是單個刺激物。

          

          
     

          

          
    認知負荷 

          

          
    指在一個人的工作記憶使用的腦力綜合。是指你為了完成任務需要消耗的腦力。

          

          
    認知負荷是表示處理具體任務時加在學習者認知系統上的負荷的多維結構。 

          

          
     

          

          
    ?？硕?/strong> 

          

          
    以英國心理學家威廉·埃德蒙·?？耍╓illiam Edmund Hick）命名，其理論指出當選項增加時，下決定的時間也增加。一個人做出決定所需的時間取決于他或她可以選擇的選項數。因此，如果選擇的數量增加，則做出決定的時間將對數增加。

          

          
    決策所需的時間隨著選項的數量和復雜性增加而增加。 

          

          
    圖片 

          

          
     

          

          
    菲茨定律（Fitt’s Law） 

          

          
    圖片 

          

          
    這條定律規定，任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關，距離越大時間越長，目標越大時間越短。

          

          
    獲得目標所需的時間取決于到目標的距離以及目標的大小。 

          

          
    可以利用這條定律來影響互動按鈕的轉化率，尤其是用手指操作的移動設備上的設計，可以把希望互動的按鈕設計得更大一點，把不希望用戶點擊的按鈕設計得小一點，更難點中一點。用戶任務/注意區域與任務相關的按鈕之間的距離應盡可能的短。

          

          
     

          

          
    美即適用效應 

          

          
    圖片 

          

          
    這條指的是用戶往往會認為有吸引力的產品更實用。大家往往會相信看起來更好的東西用起來也會更好——就算實際上效率和效能并沒有提高。

          

          
    用戶往往會把美觀的設計看作是更實用的設計。 

          

          
    對視覺設計的積極情緒反應會讓他們對可用性方面的小問題更加寬容。

          

          
     

          

          
    雙重編碼理論 

          

          
    這一理論是由心理學家佩維奧（Paivio）提出來的，他強調在信息的貯存、加工與提取中，語言與非語言的信息加工過程是同樣重要的。佩維奧（1986）指出：“人的認知是獨特的，它專用于同時對語言與非語言的事物和事件的處理?！崩秒p重編碼系統可以讓用戶更容易記住我們網站上的重要內容。

          

          
    我們會根據你對現實世界的體驗和感知為腦中想到的文字建立視覺形象。一想到“體育”，我們的大腦就會自動想到球的形象，運動員的形象。通過將文字跟圖像配對，可以更容易記住東西。

          

          
     

          

          
    直覺檢查 

          

          
    我們一般不會用價值數千美元的眼動追蹤軟件或者腦電圖來判斷設計是不是有效。但是5秒測試是個強大工具，用它就可以確定你的設計是不是一看就明白。

          

          
    所謂5秒測試，就是讓受試者觀看網站或應用5秒鐘，然后回答有關主題和設計的問題。如果用戶的答案或者留下的印象跟你的設想不一樣，那就說明設計沒有達到原先的目的，需要繼續改進。

          

          
     

          

          
    說服心理學 

          

          
    圖片 

          

          
    這條原理來自羅伯特·西奧迪尼（Robert Cialdini）的著名著作《影響力：說服心理學》（Influence: The Psychology of Persuasion），里面列舉了類似互惠、一致性、社會認同，權威以及稀缺性等原理。

          

          
    這些原理往往決定了我們在社會當中的行為方式，我們可以用它們來識別人類行為。

          

          
    互惠：這條原理是說人都不喜歡虧欠別人。如果別人給了他們什么東西的話，他們應該會覺得有責任給予一定程度的回報。提供免費的電子書，博客文章，播客或其他免費內容，然后換取用戶提供的電子郵件地址，這就是現實生活當中互惠的好例子。

          

          
    權威：權威這條原理說的是我們大多數人都意識到自己沒辦法在每一件事情上都是專家。我們最好的選擇是依靠專家的證詞。所以，我們允許專家和任何特定議題的“權威”人士影響我們。大家往往會對高水平的專家和權威人物的話言聽計從，因為覺得他們值得信賴。如果跟成功公司能扯上關系的話就會經常被提及，好建立一定程度的尊重和可信性。

          

          
    一致性：這條原理說的是大家一般都希望自己行為跟自己的決策過程保持一致。西奧迪尼曾經進行過一項研究，他讓兩組志愿者挨家挨戶去詢問房主愿不愿意在自家前面的草坪上立一塊寫著“小心駕駛”的大廣告牌。

          

          
    第一組的做法就是簡單粗暴直接上門問。而第二組是先做一個初訪，請求房主在他們前面的草坪放一塊很小的標志牌，“做一位安全的駕駛員?！?
          

          
    結果第二組的成功率高出450％。這就是（承諾與）一致的一個例子，因為房主會覺得自己有義務在這種情況下保持一致性。

          

          
    社會認同：大家未必總能知道自己為什么會這么做。大家是不是都在跳舞？如果是的話會有更多的人跟著跳。大家是不是都在看那個視頻嗎？是的話會更多人會點擊它。是不是每個人都在買你的產品嗎？是的話，你想攔都攔不住。在電子商務的實踐當中，我們使用的網站會社會認同（比方說點評、評論和推薦）來吸引其他用戶，并引導他們做出購買決定。亞馬遜有“購買這個的客戶也購買了那個”的提示，希望強化你跟商品的關聯性，讓用戶認為“如果別人需要它的話，那我也需要它”。

          

          
    稀缺性：在塑造行為的原理方面，這是我的最愛之一。稀缺性原理是說，如果東西有限的話，大家就會更想得到它。能得到的人越少，吸引的人就越多。

          

          
    為什么有的商店會推出限量版服裝？這就是原因，這樣可以吸引更多的顧客。

          

          
    變化盲視（Change Blindness）：指觀察者不能探測物體或情景所發生變化的現象。

          

          
     

          

          
    記憶限制 

          

          
    圖片 

          

          
    記憶未必永遠可靠。我們對信息的存儲方式會被我們的想法、感知信念以及周圍環境所重構。

          

          
    我們的工作記憶能力大概就只有10到15秒，一次只能記住3到4個東西。

          

          
    研究表明，大家往往會制造出錯誤的記憶，要么會記住了沒有發生過的事情，要么就是記得的東西跟實際不一樣。由于記憶具有提示性和可塑性，所以根據大腦的習慣或心智模式來進行設計就非常重要，因為這樣會更容易記住。

          

          
    盡可能為用戶提供幫助和反饋，并提供撤銷選項，以減少用戶犯錯時的沮喪情緒。讓體驗個性化，好迎合我們用戶的喜好。

          

          
     

          

          
    單純呈現效應（Mere Exposure Effect） 

          

          
    圖片 

          

          
    單純呈現效應是指圖片、符號、數字、聲音等外部刺激信息只要經常暴露在人面前，就能增加人們對其喜歡程度的現象。這種社會心理會發生在我們所有人身上，我們在不連續的時間段內見到某人的次數越多，我們覺得這個人討人喜歡或迷人的可能性就越高。這種效應有時候又被叫做熟悉定律。

          

          
    了解單純呈現效應及其機制，會讓你在轉化率優化的工作中具備重大優勢。更多的呈現會帶來熟悉感，進而帶來舒適感，從而讓轉化率優化整體上得到顯著改進。

          

          
     

          

          
    色彩心理學 

          

          
    圖片 

          

          
    色彩也是影響人的選擇和行為的主要因素之一。我們經常會發現兒童玩具顏色鮮艷，女孩玩具往往是粉紅色的。這方面研究的主要思想是色彩對用戶的感知有很大的影響。

          

          
    所以，作為設計師我們應選擇能夠傳遞含義與正確信息的色彩。

          

          
    紅色。跟熱情、強烈或攻擊性的感覺關聯。同時是好和不好的感受，比如愛、自信、熱情、憤怒等的象征。

          

          
    橙色。充滿活力的暖色，給人以興奮的感覺。

          

          
    黃色。幸福的色彩。象征著陽光、喜悅和溫暖。

          

          
    綠色。大自然的色彩。給人以來平靜和新生的感覺。另外，也可能用來表示經驗不足。

          

          
    藍色。一般用來表示企業形象。往往表現出冷靜的感覺，但是作為一種冷色，也跟距離與悲傷有關。

          

          
    紫色。由于很多國王都穿紫色的衣服，所以長期以來就與皇室和財富聯系在一起。紫色也是代表神秘與魔力的顏色。

          

          
    黑色。這種顏色有很多含義。往往跟悲劇和死亡相關聯?？梢源碇唇庵i?？梢允莻鹘y的，也可以是現代的。一切都取決于怎么用，以及跟哪些顏色一起用。

          

          
    白色。意味著純潔和純真，以及完整性和清晰度。

          

          
     

          

          
    本能反應 

          

          
    我們一般是從大腦負責本能的部分得到這種反應，本能反應的速度比我們的意識要快得多。本能反應會導致我們用了一下產品后就愛上了它。這些反應植根于我們的DNA之中，所以很容易預測。

          

          
    作為設計師我們就是要通過設計制造出視覺上極其出色的美感印象。為什么一個東西在用戶眼里好看，以及為什么他們是我們的目標受眾，他們的需求是什么，這些都不難猜測。

          

          
    用戶體驗設計的概念根植于認知和行為心理學，那是人類與機器交互的藍圖。當然，本文仍還沒有涵蓋到所有的設計心理學原理。但是，作為設計師，我們還需要觀察和理解最終用戶，并且加深對用戶的理解與共鳴。在產品開發過程中，了解用戶的互動、行為和情感可以增加更多的價值。

          

          
     

          

          
    原文地址：追波范兒（公眾號） 

          

          
    作者：terechen

          

          
    轉載請注明：學UI網》你想要的，用戶體驗設計中的心理學
          

          
          

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。 

          

          
    截屏2021-05-13 上午11.41.03.png 

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、 

          

          
    UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          
           

          

          
    
          

          

          
    
          

          

          
    
          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(2503)
              
                          
          
          
          
                      
          
            
            
          掌握這20條用戶體驗設計原則，助力設計成長！
          
            
          
               seo達人                                            
          
            
          

          
    
          
        1.以用戶為中心  
    
          

          

          

          
    這是最常被提及的用戶體驗設計基礎，當涉及到產品設計決策時，提醒我們要學會使用同理心，而不是僅憑個人的想法或意見。

          

          
    真正好的用戶體驗設計是為用戶量身打造的，用戶的意見、痛點、愿望、偏好和需求對產品來說至關重要，所以在項目初始階段需要投入大量的時間和精力去了解用戶。

          

          
    圖片 

          

          
    用戶體驗研究重點是了解用戶，為接下來的產品設計做準備。以用戶為中心的設計理念是設計師迎合用戶的需求，區分了設計任何人都可以使用的產品和為目標用戶設計的產品。

          

          
    一款特定的產品需要面對不同的目標群體，前期研究中需要了解目標人群需要什么并在產品中反映出來，這是針對性很強的設計研究。

          

          
     

          

          
    2.了解信息架構 

          

          

          
    可能很多人對信息架構的定義很模糊，這里舉個例子來具象說明一下信息架構的含義。

          

          
    例如在一款產品中，如果把所有內容都堆到一個列表或頁面中，可能我們將無法使用這款產品，所以我們看到大多數的App和網站都包含很多的導航和頁面結構，按照內容重要程度有序地來組織內容。

          

          
    信息體系結構的最終目標是幫助用戶理解他們在看什么，并幫助他們找到需要尋找的內容。 

          

          
    圖片 

          

          
    信息架構在制作線框圖或原型之前完成，因為它是產品的基礎，有助于設計師考慮什么功能是最重要的，哪些是用戶最需要的以及哪些次要內容可以隱藏起來等。

          

          
    這種結構與產品的導航設計密切相關，有助于將用戶引導到正確的位置。導航和信息架構都試圖讓用戶以最少的認知努力來完成操作。 

          

          
    信息架構的設計不當會造成重大故障甚至可能危及整個產品。如果用戶在使用產品時找不到任何想要的內容，點擊任何元素都沒有反應，會給用戶帶來很糟糕的使用體驗。

          

          
     

          

          
    3.考慮使用場景 

          

          
    沒有場景，任何設計都很難生效。設計師在項目開始時會投入時間去了解用戶面臨的問題以及圍繞這些問題的背景。

          

          
    圖片 

          

          
    這條原則有助于設計師考慮還有哪些因素會影響用戶和產品，很多產品設計會為用戶提供一些有助于消除使用摩擦的操作提示。

          

          
    例如在設計表單時，會盡可能的添加輸入提示，最大程度地減少用戶出錯的機會。

          

          
     

          

          
    4.了解一致性及其重要性 

          

          
    保持一致性是用戶體驗設計的關鍵原則。擁有一致設計的產品可以更快地被新用戶接受，因為用戶不需要再次學習如何操作，他們會回憶起之前的操作習慣并將其作為指導，這也解釋了為什么同類型的產品例如電商類App頁面設計的很相似。

          

          
    保持一致意味著在需要時可以重復使用某些UI組件，并在整個產品中保持一致的行為。例如當點擊或懸停在按鈕上面時，所以按鈕的狀態應該是一致的。 

          

          
    圖片 

          

          
    從邏輯上講，產品越大，這種一致性會變得越來越有挑戰性，這促使許多設計團隊創建自己的設計系統。一款產品的學習曲線越長越陡，放棄的用戶就會越多，在市場營銷中，這通常被稱為銷售漏斗中的漏洞。

          

          
     

          

          
    5.給予用戶適當的控制權 

          

          
    這條原則意味著用戶希望能控制產品，無論是完成任務還是定制滿足他們需求的內容。

          

          
    在設計過程中一直試圖給用戶盡可能多的控制權，例如允許用戶撤消操作、更改設置、自定義UI外觀、創建快捷方式等。

          

          
    圖片 

          

          
    需要注意的是，當提供太多選項或用戶太依賴于自己的選擇時，用戶可能會不知所措，造成所謂的選擇悖論。所以在設計時要了解用戶樂于掌控的余地，不能讓用戶感到使用壓力。

          

          
     

          

          
    6.把可用性放在首位 

          

          
    在整體上看，建立高標準的可用性是為用戶做的最好的事情，有助于檢查用戶是否能夠輕松地完成任務、產品是否正常運行以及是否完成工作。

          

          
    圖片 

          

          
    可用性的重要之處在于要理解可用性的靈活性和重要性。

          

          
     

          

          
    7.了解用戶測試 

          

          
    結合可用性的概念，我們還要進行用戶測試，這是設計師對工作進行測試的方式，對新的產品來說至關重要。

          

          
    當設計思想和理念被轉化為有形的原型時，設計師要觀察真實的用戶是如何與之交互的，可以通過許多不同的方式例如簡單的A/B測試到全面的審核測試等來實現。

          

          
    圖片 

          

          
    測試通常分幾輪進行，團隊在向原型添加更多細節之前驗證每個步驟。隨著測試結果的出現，設計也隨之發生了變化。

          

          
    如果發生更改，將會進行新一輪的測試，通過這個過程，設計團隊可以改進他們的工作，直到達到可用性標準。

          

          
     

          

          
    8.少即是多 

          

          
    在創造力和創造獨特事物的渴望中，很多設計師很容易無意中弄亂產品界面甚至產品本身。

          

          
    功能過多的產品可能會失去焦點并削弱吸引力。具有太多元素的頁面會變得充滿視覺沖擊，但也會給用戶帶來負面體驗，在設計時要學會克制并優先考慮真正關鍵的部分。

          

          
    另外手機端的屏幕空間非常小，創建一個有效的布局，想出巧妙的方法來隱藏次要元素并創建一個令人愉悅的界面需要付出很大的努力和創造力。

          

          
     

          

          
    9.視覺層次 

          

          
    視覺層次是向用戶傳達產品中元素重要性的方式。良好的層次結構有助于用戶視線在界面上移動，并立即了解最重要的內容以及這些內容與其他部分的關系。

          

          
    視覺層次結構與布局設計緊密相連，幫助用戶消化所接觸到的信息。 

          

          
    圖片 

          

          
    創建層次結構從概念的草圖開始，一直持續到完成設計。例如發送按鈕通常會用綠色而是不紅色，而次要按鈕會顯示為灰色或與背景混合，并顯示“撤消”或“返回”。

          

          
     

          

          
    10.了解用戶的心智模型 

          

          
    為用戶創建心智模型是嘗試使用同理心的一種方式，是幫助設計師從用戶的角度看待問題的工具。

          

          
    圖片 

          

          
    做到準確就是直觀的產品，用戶不需要投入精力就可以使用它，而錯誤的思維模型會導致一些問題，例如界面混亂、高昂的交互成本。

          

          
    為了匹配用戶的心智模型，可以采用多種不同類型的研究方法，常見的方法包括卡片分類、決策樹、對用戶行為的密切觀察，或者使用大量的數據來建立關鍵用戶的心理模型。

          

          
     

          

          
    11.設計中的講故事 

          

          
    講故事的方式更加直觀，利用圖像、視頻、動畫和文本等元素讓整個頁面與用戶對話。用戶體驗設計中的視覺敘事是為了喚起用戶的情感，給用戶留下持久的印象。 

          

          
    圖片 

          

          
    想出一種可視化的方式來傳達復雜的內容具有挑戰性，但同時也是有益的，可以更好地接近用戶并將其作為提高產品可學習性的方法。

          

          
     

          

          
    12.不要直接跳到高保真原型上 

          

          
    高保真原型是設計項目的最終目標，但是直接使用原型軟件不斷添加各種頁面細節是錯誤的操作。

          

          
    圖片 

          

          
    避免直接出高保真的主要原因是因為這樣做的成本會更高。在沒有任何用戶研究和測試的情況下，一款產品無論具有多少的細節都有可能面臨不符合用戶使用的情況。

          

          
     

          

          
    13.可訪問性測試很重要 

          

          
    不僅要檢查關鍵用戶是否可以流暢地使用產品，還應該檢查其他所有用戶例如少數群體等是否都能夠正常使用產品。

          

          
    圖片 

          

          
    事實上，殘疾人和其他用戶一樣需要數字產品，但很多產品在設計時并沒有考慮到這些群體，但這也提供了一個機會，為所有用戶提供一個可以依賴的好產品。

          

          
     

          

          
    14.熟悉并在用戶體驗設計中使用 

          

          
    我們知道為用戶提供一致的設計有助于克服學習曲線，同時為用戶提供熟悉的東西也有助于縮短學習曲線。

          

          
    例如，大多數用戶都會立即識別某些UI組件(漢堡菜單/單選按鈕)，這意味著他們會本能地知道這些組件代表什么意思或者如何操作。

          

          
    圖片 

          

          
    使用用戶已經熟悉的東西并不一定會讓產品的獨特性消失，有經驗的設計師會利用這種熟悉性來來創造一些獨特的設計，同時也是直觀的，不需要太多努力就可以使用。

          

          
    設計一個完全不依賴熟悉度的產品可能是具有風險的行為，因為它很容易讓那些不熟悉產品的用戶超負荷，形成巨大的學習曲線，增加用戶負擔。

          

          
     

          

          
    15.了解交付成果的力量 

          

          
    可交付成果是可以在整個團隊中交付的內容，包括用戶畫像、心智模型、用戶旅程以及線框圖和原型等，是一種有形和具體的表現。

          

          
    可交付成果是用戶體驗設計原則，可以幫助設計團隊和其他利益相關者理解和交流概念。

          

          
    圖片 

          

          
    ▲ 用戶畫像可以捕捉理想用戶，并提供可以相關聯的真實面孔，是一種指導設計的工具。用戶旅程圖幫助設計師了解用戶完成任務需要的具體步驟，有助于確保這些步驟確實可以輕松執行，并且整個過程很流暢。

          

          
    這些交付成果服務于關鍵功能，設計師需要在整個項目中都依賴它們，不斷轉換為用戶可以與之交互的真實有形的設計。

          

          
     

          

          
    16.專業的原型設計工具 

          

          
    用戶體驗設計的過程不是線性的，而是一個循環。無論創建什么樣的產品，都需要專業的原型工具，將基本框架放在一起，然后添加可能需要的所有細節。

          

          
    圖片 

          

          
    從邏輯上講，設計團隊的具體需求會因團隊而異，但一些關鍵功能例如團隊協作、需求管理、交互設計和開發移交等，對于大多數團隊來說是必要的。

          

          
     

          

          
    17.精心管理產品需求 

          

          
    一切都從收集需求開始，然后慢慢創建關鍵列表。雖然簡單地列出一個列表聽起來很容易，但隨著項目的進展，要保持列表的條理性確實是一個挑戰。

          

          
    圖片 

          

          
    除了創建需求和檢查需求之外，還有一個問題就是調整需求，需要從設計、技術和業務各個方面來處理各種需求，還要確保這些需求之間沒有相互矛盾。

          

          
     

          

          
    18.了解移動和網頁產品之間的差異 

          

          
    網頁端和移動端產品最明顯的區別是屏幕尺寸，這意味著所有的視覺層次結構和信息架構都將從Web到App發生變化。

          

          
    圖片 

          

          
    移動端產品會有更多影響設計決策的因素，例如設備的操作系統、使用產品的環境等。了解移動端產品在導航設計、用戶流程等關鍵方面的差異是至關重要的用戶體驗設計原則。

          

          
     

          

          
    19.利用UX設計模式 

          

          
    幾乎所有的產品都專注于設計模式，它們可靠、易于查找并通過減少設計時間來為項目增加實用性。

          

          
    圖片 

          

          
    ▲ 當用戶在谷歌搜索中輸入的內容有問題時，谷歌會提供一個相關的搜索提示，輔助用戶進行精確地搜索，解決用戶使用不同方式在搜索欄中傳達他們正在尋找的內容的問題。

          

          
     

          

          
    20.使用合適的工具才能有效 

          

          
    擁有單一的內容來源可以為團隊帶來清晰性和高效性，如果線框和原型分散在多個渠道中，這種內容的集合就會變得很難達成。

          

          
    圖片 

          

          
    通過合適高效的工具能夠避免產品在到達終點時遇到各種各樣的可用性問題，防止產品細節沒有表現出來或者被忽略。

          

          
     

          

          
    最后 

          

          
    通過這份用戶體驗設計原則的合集希望能夠讓你對這個領域有一個大致的了解。

          

          
    沒有人知道用戶體驗設計在未來會引領我們走向哪里，不過我們可以確定，無論它帶給我們什么，肯定都會很有趣。

          

          
     

          

          
    內容參考：justinmind.com/ux-design/principles 

          

          
     

          

          
    原文地址：Clip設計夾（公眾號）

          

          
    作者：Clippp

          

          
    轉載請注明：學UI網》掌握這20條用戶體驗設計原則，助力設計成長！
          

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。 

          

          
    截屏2021-05-13 上午11.41.03.png 

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、 

          

          
    UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          
           

          

          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(1662)
              
                          
          
          
          
                      
          
            
            
          高效動畫解決方案
          
            
          
               純純                                            
          
            
          

          
    
          
        
          
            在終端APP中，動畫非常常見，它可以輔助視覺制造焦點，同時也可以讓用戶交互更加順滑，但動畫的實現卻是設計師和研發群體的一個痛點。如何輔助設計師設計高性能炫酷的動畫、如何將設計師設計的動畫準確無誤的還原到終端APP上是業界不斷探索和解決的問題。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
        
          
        
          
            圖1 傳統動畫實現流程圖
        
          
        
          
            
          
        
          
        
          
            
        
          
        
          
            當前最好的動畫設計軟件是Adobe After Effects（簡稱AE），從AE動畫制作到終端APP呈現，傳統的實現方式如圖1所示，有三大痛點：實現成本高、溝通成本高和性能難以保證。
        
          
        
          
            
          
        
          
        
          
            近幾年，業界誕生了像Lottie、SVGA這樣的動畫工作流解決方案，雖然在一定程度上提升了生產效率，但存在AE支持能力有限、動畫性能難以保證、配套工具支持有限的問題。
        
          
        
          
            
          
        
          
    
          
    
          
        1 ：PAG解決的問題
          
    
          
    
          
        ——————————
    
          
    
          
        
    
          
    
          
        PAG（Portable Animated Graphics）是騰訊PCG發布器中臺自主研發的一套完整的動畫工作流解決方案，助力于將AE動畫方便快捷的應用于各平臺終端。PAG的流程圖如圖2所示，設計師在AE上設計出動畫后，可以通過導出插件導出pag文件，同時PAG提供了桌面端預覽工具，支持實時預覽效果，在確認效果后，通過運行配置上線，各平臺終端可以通過PAG SDK加載渲染pag動畫。
    
          
    
          
        
          
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖2 PAG動畫工作流流程圖
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        與Lottie、SVGA相比，PAG增加支持了服務端。除此之外，如圖3所示，PAG動畫方案在導出動畫文件大小、AE特性支持和可編輯性方面具有較大的優勢。
    
          
    
          
        
          
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖3 PAG和Lottie對比圖
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        2: PAG支持的AE特性能力
    
          
    
          
        ——————————
          
    
          
    
          
        2.1 矢量特性能力的支持
          
    
          
    
          
        和Lottie、SVGA實現不同的是，PAG不依賴平臺端渲染接口，可以實現各平臺的渲染一致性。PAG與Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。
    
          
    
          
        
          
    
          
    
          
        2.2 BMP預合成--全AE特性支持
          
    
          
    
          
        無論是PAG還是Lottie、SVGA，所支持的AE特性僅僅是AE眾多特性中的很少的一部分，這在一定程度上限制了設計師的創造力。針對這個問題，PAG新增了BMP預合成的導出方式，支持導出所有AE特性，適用于不可編輯的場景。其原理如圖4所示，在合成的層面將渲染結果截取成圖片，然后進行視頻編碼。
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖 4 BMP預合成原理圖
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        針對視頻不支持透明通道而動畫需要包含透明通道的問題，在編碼的層面擴展了透明通道的支持，如圖5所示。
    
          
    
          
        
          
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖6 PAG矢量和BMP預合成混合導出
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        3: PAG導出插件
    
          
    
          
        ——————————
          
    
          
    
          
        3.1 不支持AE特性提示
    
          
    
          
        針對導出動畫和AE設計動畫存在偏差的問題，PAG導出插件增加了使用了不支持AE特性提醒功能，如下圖7所示。
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖7 PAG導出面板
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        在預覽界面，同樣有不支持特性的提示，如圖8所示。
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖8 PAG導出面板預覽窗口
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        在使用AE設計動畫的過程中，設計師可以方便快捷的提前查看使用了那些不支持直接導出的AE特性，換種實現方式或者導出成BMP預合成，有效的解決了設計動畫和導出動畫存在偏差的問題。
    
          
    
          
        
          
    
          
    
          
        3.2 BMP預合成一鍵設置
    
          
    
          
        在AE動畫設計的過程中，PAG導出面板提供了一鍵設置BMP預合成的方法，如下圖9所示。需要提示的是，一旦設置了BMP預合成，該合成中的文本和圖片將不能再被用戶編輯。
    
          
    
          
        
          
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖9 BMP 預合成設置
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        由于BMP預合成可能會影響到可替換圖片的數量，PAG同時會實時更新可替換圖片的數量給設計以提示。
    
          
    
          
        
          
    
          
    
          
        3.3 圖片填充模式設置
    
          
    
          
        在用pag設置的素材中，經常會遇到用戶填充的圖片與默認占位圖尺寸不一致的情況，在導出面板中PAG增加圖片填充的四個規則，如圖10所示：
    
          
    
          
        
          
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖10 可替換圖片填充設置
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        其中：
    
          
    
          
        
          
    
          
    
          
        不縮放：畫面不縮放，從左上角位置開始裁剪
    
          
    
          
        
          
    
          
    
          
        黑邊：在保持高寬比的情況下縮放到設備的可用屏幕大小，圖像不發生變形，如果圖片尺寸和填充區域比例不一致，會出現黑邊，為默認填充模式
    
          
    
          
        
          
    
          
    
          
        拉伸：不保持寬高比填充，會發生失變形
    
          
    
          
        
          
    
          
    
          
        裁剪：在保持高寬比的情況下縮放到完全填滿可用的屏幕大小
    
          
    
          
        
          
    
          
    
          
        具體效果如圖11所示。
    
          
    
          
        
          
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖11 圖片填充效果圖
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        4桌面預覽工具PAGViewer
    
          
    
          
        ——————————
          
    
          
    
          
        4.1 效果預覽
    
          
    
          
        PAGViewer支持桌面端預覽PAG文件動畫效果，如下圖所示。支持查看動畫文件中包含有多少個可編輯文本和可編輯圖片，且支持設計師本地填充素材，實時預覽填充效果，無需等待上線后才能確認真實效果。圖片占位圖支持填充圖片或視頻，如果PAG文件內置了音頻文件，支持播放音頻效果。具體效果如圖12所示。
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖12 PAG效果預覽
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        4.2 性能檢測
    
          
    
          
        在pag動畫實際使用的過程中，PAG經常遇到的問題是設計師辛辛苦苦設計的動畫在終端上性能表現不佳，需要進行返工優化，同樣的問題在使用Lottie方案時候也會存在。
    
          
    
          
        
          
    
          
    
          
        除了效果預覽，PAGViewer還增加了性能展示面板，可以很方便的看到pag動畫的基本信息，如時長、幀率、尺寸、bmp預合成的數量，圖層總數等，還有量化的性能指標，定量的評估pag文件的性能，如圖13所示，方便設計師進行針對性的優化，而不需要等到上線前才會暴露性能問題。具體效果如圖13所示。
    
          
    
          
        
          
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖13 PAG性能展示面板
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        5: PAG的應用場景
    
          
    
          
        目前PAG方案已經廣泛應用于騰訊公司內外幾十款產品中，涵蓋了眾多的國民級應用。
    
          
    
          
        
          
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        總結下來，PAG目前主要使用在以下幾大場景：
    
          
    
          
        
          
    
          
    
          
        5.1 UI動畫
          
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖15 UI動畫場景
    
          
    
          
        
          
    
          
    
          
        設計師設計出動畫文件后，研發只需要替換預設的文本內容即可，并且文件體積非常小。
    
          
    
          
        
          
    
          
    
          
        5.2 貼紙動畫
          
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖16 貼紙動畫場景
    
          
    
          
        
          
    
          
    
          
        5.3 照片/視頻模板
          
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖17 照片/視頻模板場景
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        PAG支持將內置的圖片作為占位圖替換，并保留所有動畫效果。因此可以將整個PAG動畫設計成一個模板，把預設的占位圖替換成用戶選取的照片，自動套用效果生成視頻。全程可以讓設計師自由批量生產模板，無需研發介入。
    
          
    
          
        
          
    
          
    
          
        仍然基于圖片替換原理，PAG也支持將占位圖替換為視頻，實現視頻模板功能。
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        5.4 智能剪輯
    
          
    
          
         
    
          
    
          
        
    
          
    
          
        圖18 智能剪輯場景
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        智能剪輯是圍繞用戶上傳的視頻內容，生成定制化的模板，模板本身是不固定的，可以從多個PAG文件組合而成，類似活字印刷。設計師可以利用這個特性，構建自己的特效組件庫，然后對接AI的識別能力，根據一定規則組合得到無限數量的模板效果，可以做到一鍵出片。這塊目前的典型應用場景是王者榮耀的周戰報功能，隨機生成游戲高光時刻視頻。
          

          
    
          
    
          
        
          
            
          
                
          
                    
          
                        原文地址：站酷
                    
          
                    
          
                        作者：騰訊ISUX
                    
          
                
          
            
          
        
          
    
          
    
          
        藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。 
    
          
    
          
        截屏2021-05-13 上午11.41.03.png 
    
          
    
          
        分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          
           
    
          
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、 
    
          
    
          
        UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 
    
          
    
          
        
          
    
          

          


          
            
          
              
                評論(0)
                瀏覽(1995)
              
                          
          
          
          
                      
          
            
            
          如何輸出清晰有效的設計方案
          
            
          
               純純                                            
          
            
          
    本文從What和How兩個部分闡述如何輸出清晰有效的設計方案，為大家建立系統的設計思路提供幫助。

          

          
    
          

          

          
     

          

          
    
          

          

          
    很多初入職場的設計師在審美和平面圖形基礎上都比較扎實，對軟件的操作也出神入化，單個方案的界面視覺表現完成度和細致度也沒有太大問題。但卻往往在實際輸出項目方案的時候碰到瓶頸，方案反復地修改還不盡人意，設計能力無法得到質的提升，晉升的腳步也從而停滯。

          

          
    
          

          

          
    本文從What/How兩個部分循序漸進地闡述如何輸出清晰有效的設計方案，希望給大家一些建立系統性設計思路的啟發，幫助大家更好地輸出設計方案，為決策設計方案提供更有力的參考。

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    
          

          

          
     WHAT: 什么是清晰有效的設計方案 

          

          
    
          

          

          
    首先我們需要對清晰有效有一個整體的認知。所謂清晰，從字面上理解是指看得很清楚、明朗，設計層面來說就是方案能做到方向明確，方案明了。而有效字面上指的是有效果，有效力，從設計層面來說就是輸出的方案可以解決存在的問題，能達到設定的目標以及可以切實落地。

          

          
    
          

          

          
    清晰和有效的考量維度是不一樣的：清晰更多是針對設計這一環節，在于不同方向/方案的差異度和側重點；而有效則更多需要聯合設計上下游（用戶/產品/開發）。對于優秀的設計方案來說兩者相輔相成，缺一不可。

          

          
    
          

          

          
    接下來我們來詳細拆解什么是清晰和有效。

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    1.清晰 - 方向明確，方案明了 

          

          
    —————————— 

          

          
    
          

          

          
    很多設計師對方案輸出的數量有個認知誤區，認為設計方案越多越好，可以給老板、合作方更多選擇，往往不假思索地用大量的時間輸出所有可能的方案，并拿出來讓別人評審，認為把所有的可能性列出來就不會錯，這正是對方案清晰性缺乏認知的表現。

          

          
    
          

          

          
    在設計最初期，不要著急動手輸出界面，先結合目標（近期目標和遠期目標）綜合考量，系統性地思考有哪些途徑達到目標，確保所有實現手段的方式都有考慮到，并且可以整合途徑一致、方向近似的方案。對差異性不大的方案進行合并劃歸，才能在合理范圍內整理出具有不同思考維度與目標側重的提案方向。前期規劃思考的深度決定了方案的廣度，只有清晰的思考方案才會創造無限的可能。

          

          
    
          

          

          
     

          

          
    
          

          

          
     用案例來讓大家對清晰這個定義有更具象的認知：

          

          
    
          

          

          
    相冊小程序Logo這個需求的目標是需要突出相冊元素，并強化品牌識別度。

          

          
    
          

          

          
    這是設計師輸出的Logo提案初稿，雖然輸出了28個方案之多，但沒有設計思路的規劃，想到哪就畫到哪，很多方案是重復的，還有一些方案在設計初期就應該Pass，設計的整個細致度也不夠充分。

          

          
    
          

          

          
     

          

          
    
          

          

          
    于是設計師對設計方向重新進行規劃整合，按照輸出形式重新規劃了分類。

          

          
    
          

          

          
     

          

          
    
          

          

          
    按照分類篩選出四個可以繼續優化的方案。并且拿著四個不同方向的方案去匯報。最終確定D方案。

          

          
    
          

          

          
     

          

          
     

          

          
    
          

          

          
    我們重新回顧一下這個需求，28個方案 VS 4個方案，設計師需要的不是盡可能輸出多方案的能力，方案越多可能表示你在錯誤的道路上越走越遠，需要的是通過前期系統的思考能一次把方案做對的能力。

          

          
    
          

          

          
    
          

          

          
    2. 有效 - 解決存在的問題、能達到設定的目標、可以落地的方案 

          

          
    —————————— 

          

          
    
          

          

          
    很多設計師拿到產品需求會立即動手，認為滿足了產品這個角色提的需求便是好的設計輸出，或者把方案出的天花亂墜，當產品或者其他角色提出不同意見就會覺得他們不懂什么是好的設計。這些現象大多是因為設計師在項目前期沒有正確思考和評估這個需求本身需要解決什么問題、方案能否達到團隊共同設定的目標，以及方案是否能平穩落地這三個維度。

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    解決存在的問題—從問題出發 

          

          
    
          

          

          
    我們在實際輸出方案的時候，不能從產品經理的需求文檔開始，而是要把考量維度更前置，從項目現有的問題出發。這個問題的搜集包括外部用戶的反饋，內部團隊的聲音，但需要注意的是用戶的反饋不一定是真正的問題，需要做到篩選和甄別。比如新發布一個版本可能會碰到的一個情況是很多用戶打一星反饋說界面太難看太丑，這種屬于用戶感受，我們可以再深挖一下用戶覺得丑的原因，是不是改變了太多用戶習慣，但又沒有給用戶真的帶來更好的體驗和更多的收益。

          

          
    
          

          

          
    
          

          

          
    能達到設定的目標—從目標啟動 

          

          
    
          

          

          
    問題還需要結合目標一起考慮，解決問題的思路并不完全等同于目標，目標是大家一起制定的未來產品的發展方向。比如我們新發布的版本里面新加了一個Tab改變了用戶習慣，大批用戶投訴，但如果這個新Tab是符合我們目標的，我們不能為了短期解決用戶投訴把這個Tab下掉，應該繼續觀察用戶在這個使用過程中碰到了什么問題，解決實際操作中碰到的問題。

          

          
    
          

          

          
    用案例來讓大家對問題和目標有更具象的認知：

          

          
    
          

          

          
    我們需要優化QQ空間的為空界面，首先我們梳理下現網存在的問題，風格整體比較老舊，很多圖形表意不明確，新出模塊就會有新風格，所以存在很多不統一的地方，空間整個業務有一百多個為空界面，導致開發也不清楚到底應該怎么用，用什么，所以很長一段時間是處于亂用的狀態。

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    接著我們梳理了這次優化的目標：

          

          
    
          

          

          
    1 界面統一，用戶能對表意感知明確（解決現網問題）

          

          
    2 強化QQ的品牌

          

          
    3 做成基礎組件，保證復用性

          

          
    4 低成本開發

          

          
    
          

          

          
    確定了優化目標以后我們沒有馬上急于嘗試風格，而是先遍歷了所有為空異常頁，整合了所有場景最后梳理出八種情況，這八種情況可以覆蓋所有的為空場景，梳理整合場景是目標1、3、4能實現的前提。

          

          
    
          

          

          
     

          

          
    
          

          

          
    然后我們基于這八個場景來輸出設計風格，要低成本開發，所以這里沒有考慮加動畫，用企鵝剪影結合具體的場景來表意，不僅強化了品牌，也能做到表意清晰明確。圖形定好以后我們馬上也輸出了規范，Push給對接的開發同學方便調用。

          

          
    
          

          

          
     

          

          
     

          

          
    
          

          

          
    在輸出方案過程中，始終都要緊緊貼合問題和目標，避免無效設計。

          

          
    
          

          

          
    
          

          

          
    能落地的方案—技術可以實現 

          

          
    
          
           

          

          
    在輸出設計方案的時候，設計師需要考慮到開發成本是什么，需要消耗多少資源去實現這個需求，最低成本達到目標的路徑是什么。如果有些方案開發成本很大卻收益價值卻很小，我們就需要斟酌它是否仍有執行的必要。避免一味的追求設計效果不去對齊成本、人力，最后也只會是設計的自嗨。

          

          
    
          

          

          
    用案例來讓大家對清晰這個定義有更具象的認知：

          

          
    
          

          

          
    產品提了好友生日推送禮物的需求，目標是想用生日這一比較溫情的場景去設計專門的祝福頁，用來提升寫操作和大盤活躍。我們需要設計送給用戶的禮物卡片，從實現手段的難易規劃了三個方向：

          

          
    
          

          

          
    A 手勢交互但開發難度大: 3D手勢交互動畫

          

          
    B 趣味動圖且開發成本適中：局部小動畫

          

          
    C 靜態但開發成本低：全靜態視覺，復用已有開發流程

          

          
    
          

          

          
     

          

          
    
          

          

          
    最后團隊對齊了人力成本，決定采用方案C，把設計精力放在本身卡片的表現上。

          

          
    
          

          

          
     

          

          
    
          

          

          
    HOW: 如何輸出清晰有效的設計方案 

          

          
    
          

          

          
    那如何才能輸出清晰有效的設計方案呢？設計方案歸根結底是思維方式的具體體現，輸出清晰有效的設計方案最核心的點在于體系化的思考方式，我總結了一下幾點：

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    1 拓寬邊界 

          

          
    —————————— 

          

          
    拓寬邊界需要設計師站在更高的視角和有更廣的視野，把設計從表現和執行抽離往前后延展，在整個設計過程中往前去挖掘需求和規劃產品結構，往后做到把控和沉淀，能站在上下游各維度去Review整個項目，只有站在更全局的視角審視，才能跳出片面設計的維度。

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    2 轉換視角 

          

          
    —————————— 

          

          
    從不同的視角看待問題，學會拆解問題和解決問題，從產品/開發不同的角度來全盤看整個產品，分析這個需求的投入產出比是不是足夠，是不是能達到目標（包括設計目標和產品目標）。設計、產品、開發從來都不是對立的，都是不同角色為了整個產品發力。

          

          
    
          

          

          
    舉個例子，產品同學覺得輸出的方案不好看，是在用感性表達，我們可以嘗試繼續拆解不好看背后的原因，比如是不是核心內容不夠突出、擔心按鈕轉化率等，一開始就抱著產品不懂設計這種想法是沒有辦法解決問題的。

          

          
    
          

          

          
    還有一個就是用戶同理心，很多時候我們不能只站在設計師和產品的角度看待用戶反饋的問題，比如新功能內部團隊覺得很厲害，但實際門檻太高，用戶根本不知道怎么操作，而我們長期體驗這個產品反而忽略了產品的易用性。

          

          
    
          

          

          
    
          

          

          
    3 結構思維 

          

          
    —————————— 

          

          
    我們在啟動項目的時候，不要單點去看要在某個頁面要做什么改動，而是從問題入手，和產品同學對齊好目標，結合設計理念，最后找到發力點在哪里，循序漸進，這樣很大程度上能避免項目的反復，對設計流程的準確把控也是輸出優秀設計方案的基礎。

          

          
    
          

          

          
    舉一個日常生活的例子幫助大家理解，比如我的問題是長得丑，我的目標是要變得更年輕漂亮，我的理念就是改善體型和優化五官，最后找到具體的發力點比如晚上不吃晚飯，去美容院打美容針、學會怎么化妝等。

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    4 認知創新 

          

          
    —————————— 

          

          
    有些新設計師對設計創新的認知還停留在是去做一些創造世界、改變世界的事情，認為創新就是把原項目進行翻天覆地的改變，初入職場會覺得負責的業務和項目都很小，沒有什么意思，其實創新的維度有很多，包括設計工作流程的優化、還有從小的問題點著手去深挖和思考，找到合適的解決方案并打磨細節給用戶創造驚喜。擺正心態才能做對事做好事。

          

          
    
          

          

          
    
          

          

          
    5 及時復盤 

          

          
    —————————— 

          

          
    完成項目以后需要不斷的總結方法，遇到的問題，除了技法層面的提升，更重要的還包括思考層面的提升。學會去總結之前踩過的坑，避免重復性的問題，比如你的輸出一直存在層級不清晰的問題，那么你需要關注后續輸出的界面里大模塊之間以及元素之間的層次是否還存在這個問題?？梢苑稿e誤，但是盡量避免總是犯同樣的錯誤，這樣才能加速成長的腳步。

          

          
    
          

          

          
    
          

          

          
    
          
           

          

          
    寫在最后 

          

          
    
          

          

          
    
          

          

          
    
          

          

          

          
    進入互聯網公司工作之前，我們對設計的理解更多停留在表現層面，所以對好設計的判斷標準更多是好不好看、喜不喜歡。當進入互聯網公司后，隨著工作經驗的積累，我們會發現設計不只是狹義地使用軟件繪制圖形，背后需要很強的邏輯和系統思考的能力、結構化的思維、溝通能力等，需要我們不斷的學習補齊自己的短板，及時轉換職場心態。
          

          
文章來源：站酷   作者：騰訊ISUX
          

          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.           

          

          
    
          

          

          
    免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 

          

          
    
          

          


          
            
          
              
                評論(0)
                瀏覽(1533)
              
                          
          
          
          
                      
          
            
            
          B端后臺設計規范—OA系統為例
          
            
          
               純純                                            
          
            
          
    綜合監管平臺是對自然資源管控的一個OA系統。主要功能是對國土資源相關業務的監測、評估和統計，將各專項規劃實現“多規融合”，從而優化城市自然資源配置，做好國土空間規劃統籌。

          

          
    
          
           

          

          
    為什么要有設計規范 

          

          
    1、多個設計師同步設計 

          

          
    我們部門有2名UI設計師，所以在我們同時畫同一個項目界面時，為了保持整個設計的統一，就需要我們設定設計規范。

          

          
    
          

          

          
    2、設計與前端之間的溝通 

          

          
    與設計同理，開發人員參照統一的設計規范寫頁面，可避免同一系統中出現設計控件混亂的情況，從而提高開發效率、減少溝通成本、減少返工率。

          

          
    
          

          

          
    3、在公司內部復用 

          

          
    在公司內部，設計規范可運用在多個項目中，從而減少開發的工作量、提高開發效率。

          

          
    
          

          

          
    建立設計規范前的工作 

          

          
    從產品經理手中接到原型圖，首先是與產品經理的溝通，包括客戶需求、設計風格的確定、頁面內容的布局等等，關于設計尺寸，因為我們客戶用的是1920*1080分辨率的電腦，所以設計就基于1920*1080尺寸來做；但有時會基于1440*900的尺寸來設計，然后上下適配1920*1080和1366*768。所以設計尺寸要根據具體情況而定。

          

          
    
          

          

          
    頁面框架 

          

          
    a、主體框架分為四個區域：頂欄、左側欄、頁簽、主體內容

          

          
    b、主體內容上、左邊距為10px，默認顯示一屏高度，超出的內容加上下滾動條

          

          
    c、頁面中的各個組件根據不同屏幕分辨率采用自適應

          

          
     

          

          
    
          

          

          
    如何建立設計規范 

          

          
    1、顏色規范 

          

          
    后臺系統主色調大多運用藍色，這是因為藍色往往圍繞著科技、安全、信任等等，很符合業務場景，比如智慧城市、智慧醫療、智慧交通等。但是藍色用多了也會讓人感覺沒有新意、審美疲勞，所以在色調這塊，后臺系統可以采取皮膚功能的擴展，做兩套配色好的皮膚供客戶選擇，這樣避免了因客戶的不滿而一次次的修改，從而提高工作效率。

          

          
     

          

          
    2、文字規范 

          

          
    因為我們面向的客戶多為政府工作人員，且年紀稍長，所以字號要比平常的網頁設計要稍大一些；常用字體，中文：微軟雅黑，英文或阿拉伯數字：Arial；行間距=字體+8px。

          

          
    undefined 

          

          
    3、按鈕規范 

          

          
    按鈕是用戶與系統間交互的一個重要觸點，用于特定觸發事件的發生。按鈕類型可分為線性按鈕、面型按鈕、文字按鈕、圖標按鈕、圖標+文字按鈕，按鈕狀態分為常規、懸停、按下、禁用。按鈕的寬、高、曲率、文字離邊框的間距需要在規范中寫明。

          

          
     

          

          
    4、表單規范 

          

          
    在后臺系統中，表單多用于登錄注冊、搜索框、選擇器、信息錄入等。表單類型可分為輸入框、下拉框、時間選擇框、單選框、多選框等等，表單狀態分為默認、輸入/選中、填寫完成/已選擇、不可填寫/不可選、錯誤提示。對于必填表單，需在標簽前后或輸入框后增加“紅色*號”。輸入框的高度、曲率需要在規范中寫明。

          

          
     

          

          
    5、表格 

          

          
    此圖為可進行單選或批量選擇、排序、表頭分組和帶有凍結列的復合型表格：

          

          
    a、固定列表格：對于屏幕無法展示完全的內容，可以采用凍結重要列的方式，然后橫向加滾動條左右滑動

          

          
    b、可對數據進行排序：升序和降序

          

          
    c、文字類字數限制：重要字段全部顯示，其他文字信息超出寬度以“...”代替，鼠標懸停時顯示全部內容

          

          
    d、對齊方式：文字信息左對齊，因為人的閱讀習慣是由左到右、由上到下的，此外在主從型列表中，采用左對齊錯開文字，可使用戶一目了然，降低視覺噪音；數據信息右對齊，因為數字單位個十百千萬...是由右向左，方便比較數據大小

          

          
    
          

          

          
    文章來源：站酷    作者：Alice冰冰
          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.           

          

          
    免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 

          

          
    
          
           

          

          
    
          

          
            
          
              
                評論(0)
                瀏覽(3852)
              
                          
          
          
          
                      
          
            
            
          大屏數據可視化設計指南
          
            
          
               seo達人                                            
          
            
          

          
    
          
        
          
    
          
    
          
        
          
           
    
          

          

          

          
     

          

          
     

          

          
    一、基礎概念 

          

          
    1、什么是數據可視化 

          

          
    把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數據可視化，數據可視化是為了更形象地表達數據內在的信息和規律，促進數據信息的傳播和應用。

          

          
    在當前新技術支持下，數據可視化除了“可視”，還可有可交流、可互動的特點。數據可視化的本質是數據空間到圖形空間的映射，是抽象數據的具象表達。 

          

          
     

          

          
    數據可視化作品《launchit》  作者：Shane Mielke

          

          
    作者寫了本書，地圖上顯示了世界各地讀者的分布情況及對應人數

          

          
     

          

          
     

          

          
    數據可視化作品《world-drawn-by-travelers》 作者：TripHappy

          

          
    國家之間相互連通的旅游路線，顏色越相近的國家，表明兩國家的人們互動越頻繁

          

          
     

          

          
     

          

          
     

          

          
    2、什么是大屏數據可視化 

          

          
    大屏數據可視化是以大屏為主要展示載體的數據可視化設計。

          

          
    “大面積、炫酷動效、豐富色彩”，大屏易在觀感上給人留下震撼印象，便于營造某些獨特氛圍、打造儀式感。電商雙11類大屏利用此特點打造了熱烈、狂歡的節日氛圍，原本看不見的數據可視化后，便能調動人的情緒、引發人的共鳴，傳遞企業文化和價值。

          

          
     

          

          
     

          

          
    利用面積大、可展示信息多的特點，通過關鍵信息大屏共享的方式可方便團隊討論、決策，故大屏也常用來做數據分析監測使用。大屏數據可視化目前主要有信息展示、數據分析及監控預警三大類。

          

          
    數據分析類  圖片來源：必應；圖片作者：帆軟軟件有限公司 

          

          
     

          

          
     

          

          
    二、大屏數據可視化設計原則：設計服務需求、先總覽后細節 

          

            
    
          • 
        設計服務需求 
    
            • 

          

          
    大屏設計要避免為了展示而展示，排版布局、圖表選用等應服務于業務，所以大屏設計是在充分了解業務需求的基礎上進行的。那什么是業務需求呢？業務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標，是大屏數據可視化的價值所在。

          

            
    
          • 
        先總覽后細節 
    
            • 

          

          
    大屏因為大，承載數據多，為了避免觀者迷失，大屏信息呈現要有焦點、有主次?？梢酝ㄟ^對比，先把核心數據拋給用戶，待用戶理解大屏主要內容與展示邏輯后，再逐級瀏覽二三級內容。部分細節數據可暫時隱藏，用戶需要時可通過鼠標點擊等交互方式喚起。

          

          
     

          

          
    三、大屏可視化設計流程 

          

          
    規范的流程是好結果的保證。找到一個可參考的流程，然后步步為營，就能避免很多不必要的返工，保證設計質量和項目進度。

          

          
     

          

          
    1、根據業務場景抽取關鍵指標 

          

          
    關鍵指標是一些概括性詞語，是對一組或者一系列數據的統稱。一般情況下，一個指標在大屏上獨占一塊區域，所以通過關鍵指標定義，我們就知道大屏上大概會顯示哪些內容以及大屏會被分為幾塊。以共享單車電子圍欄監控系統為例，這里的關鍵指標有：企業停車時長、企業違停量、熱點違停區域、車輛入欄率等。

          

          
    確定關鍵指標后，根據業務需求擬定各個指標展示的優先級（主、次、輔）。

          

          
     

          

          
     

          

          
    2、確立指標分析維度 

          

          
    “橫看成嶺側成峰”。同一個指標的數據，從不同維度分析就有不同結果。很多小伙伴做完可視化設計，發現可視化圖形并沒有準確表達自己的意圖，也沒能向觀者傳達出應有的信息，可視化圖形讓人困惑或看不懂。出現這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂。

          

          
     

          

          
    上圖向大家展示了數據分析常用的4個維度，我們在選定指標后，就需要跟項目組其他小伙伴討論：我們的各個指標主要想給大家展示什么，更進一步的講，是我們想通過可視化表達什么樣的規律和信息。而上圖，可以引導我們從“聯系、分布、比較、構成”四個維度更有邏輯的思考這個問題。

          

            
    
          • 
        聯系：數據之間的相關性
    
            • 
    
          • 
        分布：指標里的數據主要集中在什么范圍、表現出怎樣的規律
    
            • 
    
          • 
        比較：數據之間存在何種差異、差異主要體現在哪些方面
    
            • 
    
          • 
        構成：指標里的數據都由哪幾部分組成、每部分占比如何
    
            • 

          

          
     

          

          
    3、選定可視化圖表類型 

          

          
    當確定好分析維度后，事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數幾個圖表里篩選出最能體現我們設計意圖的那個就好了。

          

          
    選定圖表注意事項：易理解、可實現；

          

          
     

          

          
    易理解 

          

          
    可視化設計要考慮大屏最終用戶，可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。

          

          
     

          

          
     

          

          
    可實現 

          

            
    
          1. 
        我們需要了解現有數據的信息、規模、特征、聯系等，然后評估數據是否能夠支撐相應的可視化表現
    
            2. 
    
          2. 
        我們設計的圖形圖表，要開發能夠實現。實際工作中，一些可視化效果開發用代碼寫很容易實現，效果也不錯，但這些效果設計師用Ps/Ai/Ae這些工具模擬時會發現比較困難；同樣的，某些效果設計師用設計工具可以輕易實現，但開發要用代碼落地卻非常困難，所以大屏設計中跟開發常溝通非常重要，我們需要明確哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計！一個項目總有周期與預算限制，不會無限期的修改迭代，所以設計師在這里需要抓住重點，有取舍，不鉆牛角尖、死磕不放。
    
            3. 

          

          
     

          

          
     

          

          
    4、了解物理大屏，確定設計稿尺寸 

          

          
    多數情況下設計稿分辨率即被投大屏的信號源電腦屏幕的分辨率。有多個信號源時，就會有多個設計稿，此時每個設計稿的尺寸即對應信號源電腦屏幕的分辨率

          

          
     

          

          
    一般情況下設計稿的分辨率就是電腦的分辨率，當有多個信號源時，有時會通過顯卡自定義電腦屏幕分辨率，從而使電腦顯示分辨率不等于其物理分辨率，此時，對應設計稿的分辨率也就變成了設置后的分辨率；此外，當被投電腦分辨率長寬比與大屏物理長寬比不一致時（單信號源），也會對被投電腦屏幕分辨率做自定義調整，這種情況設計稿分辨率也會發生變化。所以設計開始前了解物理大屏長寬比很重要。 

          

          
     

          

          
    5、頁面布局、劃分 

          

          
    尺寸確立后，接下來要對設計稿進行布局和頁面的劃分。這里的劃分，主要根據我們之前定好的業務指標進行，核心業務指標安排在中間位置、占較大面積；其余的指標按優先級依次在核心指標周圍展開。一般把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。

          

          
     

          

          
     

          

          
    6、定義設計風格 

          

          
    很多小伙伴也許沒接觸過大屏設計工作，但大多數人都應該有APP或者Web風格定義的經驗。我們在定義一款APP或者Web頁面設計風格時常用的方法是什么呢？情緒版！ 

          

          
    大屏雖酷炫，但實際上也是運行在瀏覽器里的Web頁面，所以大屏設計風格定義方法也同樣可以是用情緒版來做，這種方法也是目前比較科學高效的風格定義手段

          

          
     

          

          
    上圖提供了情緒版應用的腦圖，具體操作細節不做介紹，不太了解的小伙伴可以自己找找資料哈。情緒版的一套流程下來，我們定義的風格基本是科學準確的，可以指導我們執行設計。如果是給甲方爸爸做大屏，這個流程也可以讓我們提出的方案更有說服力

          

          
     

          

          
    7、可視化設計 

          

          
    根據定義好的設計風格與選定的圖表類型進行合理的可視化設計。目前來講大屏可視化主要有指標類信息點和地理類信息點兩大可視化數據。指標類信息點可視化效果相對簡單易實現，而地理類信息點一般可視化效果酷炫，但是開發相對困難，需要設計師跟開發多溝通的。地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點，所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求，硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況，所以這點也是需要提前溝通評估的。

          

          
     

          

          
     

          

          
    8、樣圖溝通確認 

          

          
    這里的溝通分三個層面：設計師對內溝通、設計師對外溝通、設計師與大屏的“溝通”。

          

          
     

          

          
    樣圖溝通環節，最初的樣圖不需要十分精致，我們可以把它理解為一個“低保真”原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點，然后又大修大改的情況。

          

          
    因為我們在前幾步已經分別確定了頁面布局、圖表類型、頁面風格特點，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現出來，然后根據樣圖效果嘗試確定五方面內容：

          

            
    
          1. 
        之前確立的布局在放入設計內容后是否依然合適 
    
            2. 
    
          2. 
        確立的圖表類型帶入數據后是否仍然客觀準確 
    
            3. 
    
          3. 
        根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受 
    
            4. 
    
          4. 
        已有的樣式、數據內容、動效等在開發實現方面是否存在問題 
    
            5. 
    
          5. 
        大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象 
    
            6. 

          

          
    跟大屏“溝通”是比較重要也是個特殊的環節，這也是我覺得大屏設計跟其它設計不一樣的地方，大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境，這里的很多問題只有設計稿投到大屏上才能夠被發現，所以這一步在樣圖溝通確認環節非常重要，有時候需要開發出demo，反復測試多次。

          

          
     

          

          
    9、頁面定稿、開發 

          

          
    事實上頁面開發階段并不是到了這一步才進行，這里說的頁面開發僅指前端樣式的實現，實際上后臺數據準備工作在定義好分析指標后就已經開始進行了，而我們當前的工作是把數據接入到前端，然后用設計的樣式呈現出來。

          

          
     

          

          
    切圖與標注 

          

          
    由于大屏實際就是一個web頁面，所以開發階段的切圖與標注是少不了的。

          

          
    切圖：哪些元素需要切圖，怎么切？ 

          

          
    一般開發用代碼寫不出的樣式或動效，都需要設計師切圖作支持：比如數據容器的邊框、小的動效、頁面整體大背景、部分圖標等。切圖按正常網頁設計標準切就可以了。

          

          
    標注 

          

          
    Web頁面用什么插件做標注這個大家都很熟悉，我就不多說了。需要注意的是，如果大屏頁面需要在不同比例的終端展示，那么此時的標注與開發可以使用rem作為基本單位來實現，這樣實現的大屏頁面在后期會有更好的擴展性與適應性。

          

          
     

          

          
    10、整體細節調優與測試 

          

          
    這部分是指頁面開發完成后，將真實頁面投放到大屏進行的測試與優化。這里主要有兩部分工作。

          

          
    視覺方面的測試（有點像APP的UI走查）：關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。

          

          
    性能與數據方面的測試：圖形圖表動畫是否流暢、數據加載、刷新有無異常；頁面長時間展示是否存在奔潰、卡死等情況；后臺控制系統能否正常切換前端頁面顯示。

          

          
     

          

          
    四、大屏設計的注意事項 

          

          
    1、字體使用 

          

          
    字體優先使用系統默認字體，需要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。

          

          
     

          

          
    如果頁面是云端部署，需要嵌入字體包時，我們可以使用FontCreator這類的軟件把那些用不到的字符從字體包中刪掉，然后重新打包上傳，減小字體包大小，可以優化頁面加載體驗，避免在替換默認字體的過程中出現頁面文字跳動等現象。（一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對于大屏這個明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數字）

          

          
     

          

          
     

          

          
    2、顏色搭配 

          

            
    
          • 
        1、色彩明度與飽和度差異顯著、對比鮮明， 盡量避免使用鄰近色配色
    
            • 

          

          
     

          

            
    
          • 
        2、使用深色暗色背景：深色暗色背景可減少拼縫帶來的不適感。由于背景面積大，使用暗色背景還能夠減少屏幕色差對整體表現的影響；同時暗色背景更能聚焦視覺，也方便突出內容、做出一些流光、粒子等酷炫的效果，
    
            • 
    
          • 
        3、漸變色慎重使用：大屏普遍色域有偏差，顯示偏色，因而使用漸變色需要根據大屏反饋確定是否調整，純色最佳。
    
            • 
    
          • 
        3、頁面布局: 主次分明、條理清晰、注意留白，合理利用大屏上各小的顯示單元，并盡量避免關鍵數據被拼縫分割
    
            • 

          

          
     

          

          
     

          

          
    五、Q&A 

          

          
    – 1、設計稿投到大屏上顯示效果不佳怎么辦？ 

          

          
    大屏的分辨率、比例、使用環境、投射方式等均會對設計造成影響。理想情況下，我們應該在設計開始前，就能打開大屏系統做一些簡單測試。我們可以從網上收集不同設計師不同風格的大屏設計作品，然后投上去查看實際效果。因為大多數時候大屏都會存在色彩偏差，這時通過測試我們就能發現漸變色、鄰近色等不同類型的色彩搭配是否可以在目標大屏上良好呈現，如果不可以，那我們設計進行時就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環節及時測試也很重要。

          

          
    – 2、大屏設計定稿后，切圖切幾倍圖？ 

          

          
    由于是將我們電腦屏幕投射到了大屏，大屏上的內容是運行在我們電腦瀏覽器上的頁面。所以切圖根據我們電腦的分辨率，正常切1倍圖就可以

          

          
    – 3、1920*1080的設計稿，投到9000*4320的屏幕上，文字圖片會發虛么？ 

          

          
    看情況，視大屏系統硬件規格與觀看距離來定。這塊有四個概念需要跟大家交流下。

          

          
    大屏邏輯分辨率（設計稿尺寸）——顯卡輸出分辨率——視頻矩陣切換器（DVI）支持分辨率——大屏實際物理分辨率。

          

          
    一般后兩個是沒問題的，大屏跟矩陣切換器是由大屏廠商提供，一般剛好配套大屏。容易問題的是顯卡輸出分辨率，我們電腦屏幕分辨率并不是最終顯卡傳遞到DVI接口的分辨率，傳遞到DVI接口的分辨率是電腦顯卡所能輸出的最大分辨率（部分電腦可設置或自定義輸出分辨率）。輸出分辨率等于DVI支持分辨率時顯示效果最佳。輸出分辨率低于DVI支持分辨率，DVI會將信號放大后傳遞到大屏，放大的過程中就有圖像信息丟失，雖然此過程中有各種算法支持去保證圖像盡可能清晰，但算法再好，跟真實圖形還是有差距的。此外，多信號源投射效果優于單個信號源投射。對于現場直播數據大屏，一般至少有兩個信號源，一個投屏，另一個也投屏但是處于備用狀態。

          

          
    離大屏的距離也影響觀感，一般離得近，顆粒感明顯，距離稍遠，會顯的較為清晰

          

          
    – 4、設計稿完成開發后，發現在大屏上頁面有被拉伸或者壓縮的情況，怎么補救？ 

          

          
    一般來講，開發只需要對設計圖做還原即可。但特殊情況下，比如顯示器擴展不正確導致頁面被拉伸或壓縮，這時就需做處理：我們可以先得到被拉伸/壓縮的比例，然后對整體視圖做壓縮/拉伸處理，再由其拉伸/壓縮，這樣被拉伸/壓縮的瑕疵就可以得到一定程度上的矯正。另外，了解被投電腦硬件特點，有的電腦可以通過自定義分辨率解決這部分問題。

          

          
    – 5、除自行開發可視化大屏外，還可以通過哪些第三方服務來快速實現？ 

          

          
    阿里云DataV、騰訊云圖、百度Sugar等

          

          
    – 6、數據可視化的圖表樣式可以在那些地方找到參考？ 

          

          
    圖表部分的二個庫是我們設計師可以打開瀏覽產看的，這里面所有的圖表樣式都是基于代碼實現的，可以作為我們設計圖表的參考，也可以讓開發拿代碼去用，或者在這些圖表的基礎修改

          

          
    工具類的需要有一定的代碼基礎，里面同樣有豐富的圖表，所以跟開發的溝通也很重要，因為他們可能會了解多一些更新的前沿的圖表形式是我們設計師不知道的，所以彼此多溝通交流是在太重要了

          

          
     

          

          
     

          

          
    總結 

          

          
    數據可視化是一門龐大系統的科學，本文所有討論僅針對大屏數據可視化這一特定領域，管中窺豹，如有遺漏或不足之處歡迎大家討論交流

          

          
     

          

          
    原文地址：UX設計詩  （公眾號） 

          

          
    作者：UXBoy

          

          
    轉載請注明：學UI網》大屏數據可視化設計指南
          

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。 

          

          
    截屏2021-05-13 上午11.41.03.png 

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、 

          

          
    UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          
           

          

          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(2251)
              
                          
          
          
          
                      
          
            
            
          數據可視化為什么偏愛FUI
          
            
          
               seo達人                                            
          
            
          

          
    
          
        1.FUI的定義 
    
          

          

          

          
    相信許多同學對與“FUI”并不陌生，可能一提到這個詞大家首先想到就是漫威和 DC 科幻電影中主角的操作場景，例如漫威電影中鋼鐵俠的操作界面：

          

          
    
          
圖片源自 HUDS+GUIS 

          

          
    由于大家長期受到科幻電影影響，一度認為 FUI 即為“科幻界面設計”，這個定義真的是正確的么？大家可以短暫思考一下，帶著疑問繼續閱讀下面對 FUI 的定義，看是否和你想的一樣。

          

          
     

          

          
    A.定義 

          

          
    為了讓大家更好的理解 “FUI” 的定義，我們將 “FUI” 這個詞拆開分別進行簡單解釋。在 FUI 中：

          

          
    “U”代表用戶（User）

          

          
    “I”代表界面（Interface）

          

          
    “F”代表虛構的（Fiction）、未來的（Future）、幻想的（Fantasy）。

          

          
    簡單點來講 FUI 就是：虛構的、未來的、幻想的用戶界面。 

          

          
    相信讀到這里大家已經對 FUI 有了初步的認識，“科幻界面”只是 FUI 中的分支，并不能完全解釋 FUI 。對與“虛構、未來、幻想”三個詞我們再做進一步分析解構：

          

          
     

          

          
    a.虛構的 

          

          
    FUI 的專業術語是“虛構用戶界面”，其中包含各種“虛構”的用戶界面，即不真實，只是大膽的設想。例如人們大膽的設想宇宙飛船的界面設計，或者可穿戴的智能設備界面。

          

          
    
          
圖片源自 Behance 

          

          
     

          

          
    b.未來的 

          

          
    我們再回憶我們看過的科幻電影，在電影中它通常作為故事的一部分而創建。故事可以在不同的時間段進行設定，例如將來、當前或者過去。所以我們并不將 FUI 限制在“未來”用戶界面，它的時間線是相對的。不同時代的人們對于科幻電影的理解不一樣，所以大家對于未來的定義也有所不同，例如早年的《星球大戰》系列電影和《環太平洋》系列電影都屬于科幻電影，但存在的時間線卻有所不同，其中的界面設計風格也會因有所不同。

          

          
    
          
圖片源自 HUDS+GUIS 

          

          
     

          

          
    c.幻想的 

          

          
    關于“幻想”的用戶界面，人們腦袋可能首先閃過一些夸張虛幻、為人聳聽的畫面。就像《神奇博士》中的神奇博士進入多瑪姆的世界當中一樣。

          

          
    
          
圖片源自百度 

          

          
    “幻想”這個詞經常被用來描述哪些遠離現實的事情，這些事情難以被實現。百度百科中對幻想的解釋是“虛而不實的思想；沒有道理的想象；無根據的看法或信念；以理想或愿望為依據，對還沒有實現的事物有所象?！?
          

          
    關于“幻想”的用戶界面也可以包括基于現實和真實技術的用戶界面，因為人們在基于現實的基礎幻想也屬于幻想的范疇之內。例如寶馬的概念設計中，我們依然能看到現代的汽車設計的雛形，但也突破了現有的汽車設計狀態。

          

          
    
          
圖片源自 HUDS+GUIS 

          

          
    相信到這里大家已經對 FUI 的定義有一個較為清晰的概念，FUI 是虛構的、未來的、幻想的用戶界面設計，即進行大膽的假設虛構用戶界面，且并不受時間的限制的，遠離現實的幻想用戶界面。

          

          
     

          

          
    2.FUI的優勢 

          

          
    相對于大眾接受度更好的扁平化，數據可視化設計卻對 FUI 的設計風格情有獨鐘，在筆者所接觸得到的數據可視化的設計中，無論是實際的工作項目還是一些概念稿的設計都頻繁用到 FUI 的設計風格。到底是什么原因讓市場對 FUI 接受程度如此之高呢？接下來我們從心理學、視覺、思維以及硬件幾個角度作為切入點來進行分析。

          

          
     

          

          
    A.物以希為貴 

          

          
    羅馬人說：“物以希為貴?！币驗樵谄綍r生活中極為罕見，則顯得十分珍貴。例如大家平時的在玩游戲的時候，游戲中“限定”的虛擬商品總是能夠比其它虛擬商品更加吸引玩家去購買，因為“限定”預示珍貴、與眾不同，即使價格高一點，玩家也能夠接受。例如最近王者榮耀中的新年限定皮膚，因為是“限定”，所以總是不斷的勾引用戶的錢包。

          

          
    
          
圖片源自 王者榮耀 

          

          
    同樣 FUI 的設計風格在整個設計行業屬于一個小眾的形式，我們在日常生活中難以接觸到，畢竟我們的日常生活中不可能出現宇宙飛船或者炫酷的機架。面對當今扁平化設計的主流趨勢，FUI 的設計風格會讓用戶耳目一新，接受程度會更高一些。例如在商品的展示中，同樣是 New Balance 的鞋子，你那種形式的展示會讓顧客更加愿意買單？

          

          
     

          

          
     

          

          
    B.視覺優勢 

          

          
    相對于當前流行的扁平化設計，FUI 可謂是在 UI 設計中獨樹一幟，設計風格十分鮮明，極具未來感和科技感。

          

          
    
          
作為主流趨勢的扁平化設計，無論是 Material Design 還是 iOS 都以深入人心，人們對扁平化的設計風格習以為常，已經很難在數據可視化的設計中進行視覺創新，而 FUI 的設計風格可以說是在數據可視化的設計中極具視覺優勢。

          

          
    FUI 區別于我們平時所接觸的扁平化的設計，在視覺層面我們主要以色彩和圖形兩個方面進行分析。

          

          
     

          

          
    色彩 

          

          
    a.背景 

          

          
    在背景的處理上常以深色的背景營造來營造強烈空間感，讓用戶感覺自己處在一個三維的空間當中，例如下圖，我們能夠感受到強烈的空間感，數據儀表盤處于一個具有縱深感的三維世界當中，視覺中心的數據顯示器與背景形成了鮮明的對比。

          

          
    
          
圖片源自 HUDS+GUIS 

          

          
     

          

          
    b.配色簡潔 

          

          
    在顏色的選擇上，借鑒了軍事設備中的配色準則，在殘酷的戰爭中“快速、準確、直接”是最重要的，所以在軍事設備上多以單一的冷色調為主，盡量避免多種色彩的使用，這樣對于操作者而言更加簡單。所以 FUI 的配色設計大多以冷色調為主，對比色通常作為輔助色用以反饋重要信息，例如在 007系列電影中的界面都是使用對比色反饋重要信息，如下圖中的坐標信息都使用了紅色作為突出重要信息的設計手段。

          

          
    
          
圖片源自 HUDS+GUIS 

          

          
    當然也有大量使用同類色的情況，例如 Sid Meier 中的飛船狀態頁面，著重表示當前的飛船的狀態，這樣在發生異常的狀況下可以立馬發現。

          

          
    
          
圖片源自 HUDS+GUIS 

          

          
     

          

          
    c.對比強烈 

          

          
    FUI 中的配色對比強烈，首先因為背景多以深色為主，強烈的對比能夠有效的拉開頁面中的空間感，例如鋼鐵俠中的史塔克戰役中頭盔的界面。

          

          
    
          
圖片源自 HUDS+GUIS 

          

          
    其次強烈的對比能夠突出核心信息，更好的進行信息反饋。例如下圖，強烈的對比能讓我們一眼就能看到核心信息，以及當前的狀態反饋

          

          
    
          
圖片源自 HUDS+GUIS 

          

          
     

          

          
    圖形 

          

          
    FUI 的圖形裝飾元素可以說是極其豐富，形式感很強。在設計的細節當中使用大量的“異形”的圖形元素，并輔以一定的裝飾元素。例如下圖：

          

          
    
          
圖片來自于 Grey Goo 

          

          
     

          

          
    a.軍事風格 

          

          
    FUI 的設計大量借鑒了軍事風格，其中也大量借鑒軍事操控的平臺的界面圖形設計，這里借鑒軍事風格的原因很簡單，因為在眾多的科幻、動作的故事題材中都是以軍隊或者其他超級團隊來去對抗惡勢力或者外星人入侵者，在界面設計上自然要延續其中軍事風格。

          

          
    
          
圖片源自Behance 

          

          
    細節上例如戰斗機上的 HUD 瞄準界面中的圖形多次被引用到飛船的操作界面上等等。

          

          
    
          
圖片源自 HUDS+GUIS 

          

          
     

          

          
    b.機甲元素的運用 

          

          
    大量異形元素的機架風格源于對機甲設計的靈感，并且在細節上使用大量的裝飾元素。

          

          
    
          
在細節上例如邊框和環形圖的設計，相對于扁平化的設計，FUI 的設計風格顯然更具視覺沖擊力。

          

          
    
          
圖片源自 HUDS+GUIS 

          

          
     

          

          
    C.突破思維限制 

          

          
    FUI 是一個非常有趣的 UI 設計領域，是我們在日常現實生活之中無法探索的用戶界面設計方式。在我們的日常工作中，通常普通設計師很難有機會為宇宙飛船、時間旅行設備，或者感知型人工智能和外星人使用的用戶界面做設計。

          

          
    
          
圖片源自 HUDS+GUIS 

          

          
    FUI 使設計師有機會去突破現有的用戶體驗和用戶界面的限制，探索一個新的領域。通過虛幻界面設計，我們可以大膽的設想以及尋找新的解決方案。例如我們可以大膽的設想 AR 技術的應用，地圖可以采用全息投影技術、人與智能硬件的環境交互等等。

          

          
    虛幻界面設計甚至可以是新的發明，它們可以作為一種概念的驗證，它們可以啟發我們，提出問題，探索什么可行，什么不可行。正如科幻小說可以激勵人們登上月球或建造自動駕駛汽車一樣。虛幻用戶界面可以激勵人們為未來創造技術。

          

          
     

          

          
    D.硬件載體 

          

          
    在我們之前提到影視故事中設定的使用場景多為宇宙飛船的指揮艙或者駕駛艙、可穿戴式AR設備等等，但在現實生活現在多以配備“大屏”的指揮廳為主，相對于我們平時使用的移動設備和 PC 臺式機，大屏的物理渲染尺寸更大，在比例上的差異也更大。如下圖：

          

          
    
          
由于硬件設施的變更，扁平化的設計無法滿足用戶的需求，主要原因有：扁平化設計力求干凈整潔，而在大屏中物理渲染尺寸的變大會顯得畫面格外空和呆板；其次是缺乏細節。而 FUI 的設計風格設計細節豐富，恰好可以補充其細節缺失的問題。

          

          
     

          

          
    3.總結 

          

          
    數據可視化設計選擇 FUI 的設計風格有著必然的原因，首先是 FUI 的設計風格屬于一個小眾的設計風格，在這個扁平化當道的時代更容易吸引用戶的目光，接受程度高；其次是視覺沖擊力強，設計細節豐富，軍事風格和機甲風格的圖形在視覺上更加新穎；再者是“大屏”作為視覺載體，物理渲染尺寸比例的變更使得扁平化設計在大屏上顯得畫面不飽滿，缺乏細節，而 FUI 則恰好能夠補充這些空白；最后 FUI 可以幫助我們突破思維限制，尋求更好的解決方案。

          

          
     

          

          
    借鑒參考： 

          

          
    《FUI-How-to-design-User-Interfaces-for-Film-and-Games》 

          

          
    圖片來源： 

          

          
    https://www.hudsandguis.com 

          

          
    https://scifiinterfaces.com 

          

          
     

          

          
    原文地址：海鹽社（公眾號）

          

          
    作者： 姜正 

          

          
    轉載請注明：學UI網》數據可視化為什么偏愛FUI
          

          
          

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。 

          

          
    截屏2021-05-13 上午11.41.03.png 

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、 

          

          
    UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          
           

          

          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(2000)
              
                          
          
          
          
                      
          
            
            
          Material Design Data Visualization 數據可視化
          
            
          
               seo達人                                            
          
            
          

          
    
          
        
          
    
          

          

          

          
    原則 

          

          
    數據可視化是一種用圖形形式來描述密集和復雜信息的通訊方式。由此產生的視覺視覺效果使得數據比較和用數據講來故事都變得更加容易——這兩種方法都有助于用戶做出決策。

          

          
    數據可視化可以表示不同類型和大小的數據：從少量數據點到大型多元數據集都可以表示。

          

          
     

          

          
     

          

          
    類型 

          

          
    數據可視化可以用不同的形式來傳達。圖表是一種常用的數據傳達方法，因為它們不僅描述了不同的數據類型，還能進行數據比較。

          

          
    圖表類型的使用主要取決于兩個方面：想要傳達的數據，以及想要傳達的數據有關的內容。以下指南提供并描述了各種不同類型的圖表及其用例。

          

          
     

          

          
    圖表類型 

          

          
    隨時間變化 

          

          
    隨時間變化的圖表顯示一段時間內的數據，如多個類別的變化趨勢及其對比。

          

          
    使用情況包括：

          

            
    
          1. 
        股票價格表現
    
            2. 
    
          2. 
        健康統計
    
            3. 
    
          3. 
        年度報表
    
            4. 

          

          
     

          

          
     

          

          
    隨時間變化的圖表包括

          

            
    
          1. 
        折線圖
    
            2. 
    
          2. 
        柱狀圖
    
            3. 
    
          3. 
        堆積柱狀圖
    
            4. 
    
          4. 
        燭臺圖
    
            5. 
    
          5. 
        面積圖
    
            6. 
    
          6. 
        時間軸
    
            7. 
    
          7. 
        地平線圖
    
            8. 
    
          8. 
        瀑布流圖
    
            9. 

          

          
     

          

          
    類別比較 

          

          
    類別比較圖比較多個不同類別之間的數據。

          

          
    使用情況包括：

          

            
    
          1. 
        不同國家間的收入對比
    
            2. 
    
          2. 
        熱門場次對比
    
            3. 
    
          3. 
        團隊分配
    
            4. 

          

          
     

          

          
     

          

          
    類別比較圖包括：

          

            
    
          1. 
        柱狀圖
    
            2. 
    
          2. 
        分組柱狀圖
    
            3. 
    
          3. 
        氣泡圖
    
            4. 
    
          4. 
        平行線圖
    
            5. 
    
          5. 
        多條折線圖
    
            6. 
    
          6. 
        子彈圖
    
            7. 

          

          
     

          

          
    排序 

          

          
    排序圖表示一個項目在有序列表中的位置。

          

          
    使用情況包括：

          

            
    
          1. 
        選舉結果
    
            2. 
    
          2. 
        表現統計
    
            3. 

          

          
     

          

          
     

          

          
    排序圖包括：

          

            
    
          1. 
        排序條形圖
    
            2. 
    
          2. 
        排序柱狀圖
    
            3. 
    
          3. 
        平行線圖
    
            4. 

          

          
     

          

          
    部分-整體 

          

          
    部分-整體圖表示部分元素是如何加總為整體的。

          

          
    使用情況包括：

          

            
    
          1. 
        產品類別綜合收益
    
            2. 
    
          2. 
        預算
    
            3. 

          

          
     

          

          
     

          

          
    部分-整體圖包括：

          

            
    
          1. 
        堆積柱狀圖
    
            2. 
    
          2. 
        餅狀圖
    
            3. 
    
          3. 
        堆積面積圖
    
            4. 
    
          4. 
        矩陣樹圖
    
            5. 
    
          5. 
        太陽輻射圖
    
            6. 

          

          
     

          

          
    相關 

          

          
    相關圖展示兩個或多個變量之間的相關性。

          

          
    使用情況包括：

          

            
    
          1. 
        收入和預期壽命
    
            2. 

          

          
     

          

          
     

          

          
    相關圖包括：

          

            
    
          1. 
        散點圖
    
            2. 
    
          2. 
        氣泡圖
    
            3. 
    
          3. 
        柱狀和折線圖
    
            4. 
    
          4. 
        熱力圖
    
            5. 

          

          
     

          

          
    分布 

          

          
    分布圖展示每個值在數據集中出現的頻率。

          

          
    使用情況有：

          

            
    
          1. 
        人口分布
    
            2. 
    
          2. 
        收入分布
    
            3. 

          

          
     

          

          
     

          

          
    分布圖包括：

          

            
    
          1. 
        直方圖
    
            2. 
    
          2. 
        線箱圖
    
            3. 
    
          3. 
        小提琴圖
    
            4. 
    
          4. 
        密度圖
    
            5. 

          

          
     

          

          
    流 

          

          
    流圖顯示數據在多種狀態之間的流動。

          

          
    使用情況包括：

          

            
    
          1. 
        資金轉移
    
            2. 
    
          2. 
        投票統計和選舉結果
    
            3. 

          

          
     

          

          
     

          

          
    流圖包括：

          

            
    
          1. 
        ?；鶊D
    
            2. 
    
          2. 
        甘特圖
    
            3. 
    
          3. 
        和弦圖
    
            4. 
    
          4. 
        網狀圖
    
            5. 

          

          
     

          

          
    關系 

          

          
    關系圖顯示多個項目之間是如何彼此關聯的。

          

          
    使用情況有：

          

            
    
          1. 
        社交網絡
    
            2. 
    
          2. 
        文字圖
    
            3. 

          

          
     

          

          
     

          

          
    關系圖包括：

          

            
    
          1. 
        網狀圖
    
            2. 
    
          2. 
        維恩圖（或譯Venn圖、文氏圖、韋恩圖、范氏圖）
    
            3. 
    
          3. 
        和弦圖
    
            4. 
    
          4. 
        太陽輻射圖
    
            5. 

          

          
     

          

          
    選擇圖表 

          

          
    許多類型的圖表都可以用于描述數據。下面的指導方針提供了如何選擇圖表的見解。

          

          
     

          

          
    顯示隨時間產生的變化 

          

          
    隨時間產生的變化可以用時間序列圖來表示，這是一種按照時間順序來表示數據點的圖表。

          

          
    可以表示隨時間變化的圖表包括：折線圖、條形圖和面積圖。

          

          
    
        
          
            
                圖表類型
            
            
                用法
            
            
                基線值
            
            
                時間系列的數量
            
            
                數據類型
            
        
          
        
          
            
                線性圖
            
            
                傳達數據中的細微變化
            
            
                任何值
            
            
                任何時間序列（適用于8個及以上的時間列）
            
            
                連續型
            
        
          
        
          
            
                條形圖
            
            
                傳達數據中較大的差異，單個數據點如何與整體數據關聯、比較和排序
            
            
                0
            
            
                4個或以下
            
            
                離散型或類別數據
            
        
          
        
          
            
                面積圖
            
            
                總結數據集之間的關系，單個數據點是如何與整體數據關聯的
            
            
                0（當有多個時間列時）
            
            
                8個或更少
            
            
                連續型
            
        
          
              

          

          
    *基線值是指y軸上的起始值。

          

          
     

          

          
    條形圖和餅狀圖 

          

          
    條形圖和餅狀圖都可以用于顯示比例，表示部分值與整體值之間的比較。

          

            
    
          1. 
        條形圖使用一條共同的基線，通過條柱的長度表達數量
    
            2. 
    
          2. 
        餅狀圖使用圓內的圓弧或圓角表示整體的一部分
    
            3. 

          

          
    條形圖、折線圖和堆積面積圖比餅狀圖更能夠表達隨時間產生的變化。因為這三種類型的圖表中，可能的值共享同一條基線，所以比基于條柱長度的條形圖更容易比較值之間的差異。

          

          
     

          

          
     

          

          
    面積圖 

          

          
    面積圖有多種類型，包括堆積面積圖和重疊面積圖：

          

            
    
          1. 
        堆積面積圖表示（在同一時間段內）多個時間序列堆積在一起
    
            2. 
    
          2. 
        重疊面積圖表示（在同一時間段內）多個時間序列重疊在一起
    
            3. 

          

          
    重疊面積圖中不建議包含兩個以上的時間序列，以免模糊數據。相反，可以使用堆積面積圖在一個時間間隔內比較多個值（橫軸表示時間）。

          

          
     

          

          
     

          

          
    樣式 

          

          
    數據可視化使用自定義的樣式和形狀，以適應用戶需求和上下文的方式使得數據一目了然。

          

          
    下列有益于圖表自定義：

          

            
    
          1. 
        圖形元素
    
            2. 
    
          2. 
        排版
    
            3. 
    
          3. 
        圖標
    
            4. 
    
          4. 
        軸和標簽
    
            5. 
    
          5. 
        說明和注釋
    
            6. 

          

          
     

          

          
    設置不同類型數據的樣式 

          

          
    視覺編碼是將數據轉換成視覺形式的過程。獨特的圖形屬性可以應用于定量數據（如溫度，價格或速度）和定性數據（如類別，風味和表達式）。

          

          
    這些圖形屬性包括：

          

            
    
          1. 
        形狀
    
            2. 
    
          2. 
        顏色
    
            3. 
    
          3. 
        尺寸
    
            4. 
    
          4. 
        面積
    
            5. 
    
          5. 
        體積（容積/量）
    
            6. 
    
          6. 
        長度
    
            7. 
    
          7. 
        角度
    
            8. 
    
          8. 
        位置
    
            9. 
    
          9. 
        方向
    
            10. 
    
          10. 
        密度
    
            11. 

          

          
     

          

          
    表達不同屬性

          

          
    多種視覺處理方式可以應用于數據點的多個方面。例如，條柱的色彩可以表示一個類別，與此同時條柱的長度可以表示一個值（如人口大?。?
          

          
     

          

          
    形狀可以用來表示定性數據。在該圖表中，每個類別由一種特定形狀代替（圓形，方形和三角形），這使得比較特定范圍內的數據或與其他類別數據進行比較都很容易。

          

          
     

          

          
    形狀 

          

          
    圖表可以通過形狀來以多種不同的方式表達數據。形狀可以被設計為一條有趣的曲線，或一個精確的高保真圖形，以及介于二者之間的其他方式。

          

          
     

          

          
    形狀的精確程度 

          

          
    圖表可以以不同的精度來表示數據。用于深入研究的數據應該（根據觸摸目標的尺寸和相關可視化要求）使用適合交互的形狀來表示。而用于表達大致想法或趨勢的數據可以使用細節較少的形狀。

          

          
     

          

          
     

          

          
    顏色 

          

          
    顏色有四種主要的區分數據的方式：

          

            
    
          1. 
        區分不同的類別
    
            2. 
    
          2. 
        表示數量
    
            3. 
    
          3. 
        突出特定數據
    
            4. 
    
          4. 
        表達意義
    
            5. 

          

          
     

          

          
    顏色區分類別 

          

          
     

          

          
    在環形圖中顏色被用于定義類別。

          

          
     

          

          
    顏色表示數量 

          

          
     

          

          
    在地圖中顏色被用于表示數據值。

          

          
     

          

          
    顏色突出數據 

          

          
     

          

          
    在散點圖中顏色被用于突出特殊數據。

          

          
     

          

          
    焦點區域 

          

          
    當顏色被少量使用時，它可以突出焦點區域。不建議使用大量的高光顏色，因為它們會分散用戶的注意力。

          

          
     

          

          
     

          

          
    顏色表示意義 

          

          
     

          

          
     

          

          
    無障礙 

          

          
    為了適應無法區別色彩差異的用戶，可以使用其他的方法來強調數據，例如高對比度著色、形狀或紋理。

          

          
    將文本標簽應用于數據也有助于澄清其含義，同時消除了對說明的需要。

          

          
     

          

          
    線條 

          

          
    圖表中的線條可以傳達數據的質量，例如層次結構、突出強調和對比。線條的樣式可以采用不同方式，如使用虛線或不同的不透明度。

          

          
     

          

          
    線條可以應用于特定的元素中，包括：

          

            
    
          1. 
        注釋
    
            2. 
    
          2. 
        預測元素
    
            3. 
    
          3. 
        比較工具
    
            4. 
    
          4. 
        置信區間
    
            5. 
    
          5. 
        異常
    
            6. 

          

          
     

          

          
     

          

          
    排版 

          

          
    文本可以用于標記不同的圖表元素，包括：

          

            
    
          1. 
        圖表標題
    
            2. 
    
          2. 
        數據標簽
    
            3. 
    
          3. 
        軸標簽
    
            4. 
    
          4. 
        說明
    
            5. 

          

          
    層次結構中級別最高的文本通常是圖表標題，最低的是軸標簽和說明。

          

          
     

          

          
    
        
          
            
                范圍類型
            
            
                字體
            
            
                字型
            
            
                大小
            
        
          
        
          
            
                1.圖表標題
            
            
                Roboto
            
            
                常規
            
            
                18pt
            
        
          
        
          
            
                圖表副標題
            
            
                Roboto
            
            
                常規
            
            
                14pt
            
        
          
        
          
            
                2.數據標簽
            
            
                Roboto
            
            
                常規
            
            
                22pt
            
        
          
        
          
            
                子標簽
            
            
                Roboto
            
            
                常規
            
            
                14pt
            
        
          
        
          
            
                3.軸標簽
            
            
                Roboto
            
            
                常規
            
            
                12pt
            
        
          
        
          
            
                4.說明標簽
            
            
                Roboto
            
            
                常規
            
            
                12pt
            
        
          
              

          

          
     

          

          
    文本粗細 

          

          
    標題和不同的字體粗細在層次結構中可以傳達哪些內容比另一些更重要（或更不重要）。然而這種處理方式應該有節制地使用，即采用數量有限的字體樣式。

          

          
     

          

          
    圖標 

          

          
    圖標可以表示圖表中不同類型的數據，以提高圖表的整體可用性。

          

          
     

          

          
    圖標可以被用于：

          

            
    
          1. 
        分類數據，以區分組或類別
    
            2. 
    
          2. 
        UI控件及操作，如篩選，縮放，保存和下載
    
            3. 
    
          3. 
        狀態，例如錯誤狀態，無數據狀態，完成狀態和危險狀態
    
            4. 

          

          
    當在圖表中使用圖標時，建議使用普遍可識別的圖標，尤其是在表示操作或狀態時，例如：保存，下載，完成，錯誤和危險。

          

          
     

          

          
     

          

          
     

          

          
    在傳達意義時圖標補充了顏色的意義。

          

          
     

          

          
    有標記的軸 

          

          
    有標記的軸或多個軸能夠指示數據所展示的規?；蚍秶?。例如，折線圖展示的是沿水平和豎直方向標記的軸的范圍內的值。

          

          
     

          

          
     

          

          
    條形圖基線 

          

          
    條形圖應該從基線（y軸上的起始值）上的0開始。從不為0的基線開始可能會導致數據被錯誤地感知。

          

          
     

          

          
     

          

          
    軸標簽 

          

          
    標簽的使用應該反映圖表中最重要的數據細節。軸的標簽應該根據需要，并在用戶界面中以一致的方式使用。它們的存在不應該妨礙圖表的閱讀。

          

          
     

          

          
     

          

          
    文本方向 

          

          
    在圖表中文本標簽應該按水平方向放置，以保證其易于閱讀。

          

          
    文本標簽不應該：

          

            
    
          1. 
        被旋轉
    
            2. 
    
          2. 
        垂直堆疊
    
            3. 

          

          
     

          

          
     

          

          
    說明和注釋 

          

          
    說明和注釋描述圖表的信息。注釋應該突出顯示數據點、數據異常值和任何值得注意的內容。

          

          
     

          

            
    
          1. 
        注釋
    
            2. 
    
          2. 
        說明
    
            3. 

          

          
     

          

          
    在桌面設備上，建議在圖表下方放置說明。而在移動設備中，建議將說明放置在圖表上方，以便在交互過程中保持說明可見。

          

          
     

          

          
    標簽和說明 

          

          
    在簡單的圖表中，圖表元素可以被直接標記。但是，密集的圖表（或較大圖表組中的部分）可以在說明中顯示標簽。

          

          
     

          

          
     

          

          
    小型顯示器 

          

          
    在可穿戴設備（或其他小型顯示屏）上顯示的圖表應該是桌面端或移動端圖表的簡化版。

          

          
     

          

          
    行為 

          

          
    圖表為用戶提供了可以控制所展示數據的交互模式。這些模式讓用戶關注圖表中的特定值或特定范圍。

          

          
    以下推薦的交互模式、樣式和效果（如觸覺反饋）可以提高用戶對圖表數據的理解：

          

            
    
          1. 
        逐級展開 提供了一種清晰的途徑來揭示細節，可按需展示。
    
            2. 
    
          2. 
        直接操作允許用戶直接對UI元素進行操作，以減少屏幕上所需的操作步數，直接操作包括：縮放和平移，分頁，數據控件。
    
            3. 
    
          3. 
        改變透視圖可以使一項設計服務于不同的用戶和數據類型，例如數據控件和移動。
    
            4. 

          

          
     

          

          
    逐級展開 

          

          
    使用逐級展開的方式顯示圖表細節，能夠允許用戶根據需要查看特定的數據點。

          

          
     

          

          
     

          

          
    縮放和平移 

          

          
    縮放和平移是圖表中流行的交互方式，它們影響用戶研究數據和探索圖表UI的密切程度。

          

          
     

          

          
    縮放 

          

          
    縮放改變了UI顯示的距離。而設備類型則決定縮放的執行方式。

          

            
    
          1. 
        在桌面端，通過點擊并拖動或滾動的方式實現縮放
    
            2. 
    
          2. 
        在移動端，使用雙指捏放的手勢來實現縮放
    
            3. 

          

          
    當縮放不是主要操作時，（在桌面端）可以通過單擊并拖動或（在移動端）通過雙擊來實現相同效果。

          

          
     

          

          
    平移 

          

          
    平移能夠讓用戶探索超出屏幕之外的UI。應該以對顯示數據有意義的方式對其進行約束。例如，如果一張圖表的一個維度比另一個維度更重要，那么平移的方向可以僅限于更重要的維度方向上。

          

          
    平移操作通常與縮放配合使用。

          

          
    在移動端，通常通過手勢進行平移，例如單指滑動。

          

          
     

          

          
     

          

          
    分頁 

          

          
    在移動端上，分頁是一種常見的模式，允許用戶通過左右滑動查看上一張或下一張圖表。

          

          
    視頻播放器 
    
          
        
          
            
          
                
            
          
            
          
                
          
                    
          
                    
          
                
          
            
          
            
          
                
          
                     
                
          
                
          
                    00:00 
                
          
                
          
                     
                
          
                
          
                    00:09 
                
          
                
          
                     
                
          
                
          
                     
                
          
            
          
        
          
    
          

          

          
    在移動端，用戶可以向右滑動查看前一天的內容。

          

          
     

          

          
    數據控件 

          

          
    可以使用切換控件、選項卡和下拉列表篩選或更改數據。

          

          
    當用戶調整控件時，這些控件也可以顯示度量。

          

          
    視頻播放器 
    
          
        
          
            
          
                
            
          
            
          
                
          
                    
          
                    
          
                
          
            
          
            
          
                
          
                     
                
          
                
          
                    00:00 
                
          
                
          
                     
                
          
                
          
                    00:05 
                
          
                
          
                     
                
          
                
          
                     
                
          
            
          
        
          
    
          

          

          
    切換控件、選項卡和下拉列表意味著可以篩選或更改數據。

          

          
     

          

          
    動效 

          

          
    動效可以加強并鞏固數據間的關系以及用戶和數據的交互方式。動效應該有目的地（而不是裝飾性地）被使用，以表達不同狀態和空間之間的關系。

          

          
    動效應該合乎邏輯，平穩且能夠快速響應，不妨礙用戶的體驗旅程。

          

          
     

          

          
    視頻播放器 
    
          
        
          
            
          
                
            
          
            
          
                
          
                    
          
                    
          
                
          
            
          
            
          
                
          
                     
                
          
                
          
                    00:00 
                
          
                
          
                     
                
          
                
          
                    00:06 
                
          
                
          
                     
                
          
                
          
                     
                
          
            
          
        
          
    
          

          

          
    在這一案例中，數據的動效設置在切換按天顯示和按周顯示的時候。在切換的過程中不顯示所選日期范圍之外的數據，從而降低了圖表復雜性。

          

          
    視頻播放器 
    
          
        
          
            
          
                
            
          
            
          
                
          
                    
          
                    
          
                
          
            
          
            
          
                
          
                     
                
          
                
          
                    00:00 
                
          
                
          
                     
                
          
                
          
                    00:06 
                
          
                
          
                     
                
          
                
          
                     
                
          
            
          
        
          
    
          

          

          
    此處的動效顯示了兩張不同圖表之間的聯系。

          

          
     

          

          
    空狀態 

          

          
    空白的圖片和表格可以顯示一些表明在數據可用時期望發生的內容。

          

          
    在適用的情況下，角色動畫能夠帶來愉悅感和激勵。

          

          
     

          

          
    視頻播放器 
    
          
        
          
            
          
                
            
          
            
          
                
          
                    
          
                    
          
                
          
            
          
            
          
                
          
                     
                
          
                
          
                    00:00 
                
          
                
          
                     
                
          
                
          
                    00:17 
                
          
                
          
                     
                
          
                
          
                     
                
          
            
          
        
          
    
          

          

          
    角色動畫豐富了空白圖片。

          

          
     

          

          
    儀表盤 

          

          
    數據可視化可以在一系列的多個圖表中展現，這在UI中被稱為儀表盤。多個單獨的圖表有時比一個復雜的圖表能夠更好地傳達一個故事。

          

          
     

          

          
    儀表盤設計 

          

          
    儀表盤的目的應反映在其布局、樣式和交互模式中。儀表盤的設計應該適應它的使用方式，無論它是一個演示工具還是一個深入研究數據的工具。

          

          
    一個儀表盤應該：

          

            
    
          1. 
        （通過布局）優先考慮最重要的信息
    
            2. 
    
          2. 
        顯示根據層次結構（使用顏色、位置、大小和視覺權重）排序的信息焦點
    
            3. 

          

          
     

          

          
     

          

          
    應該根據數據提出的問題對信息進行優先級排序。在本案例所示的操作儀表盤中，考慮了以下的用戶問題：

          

            
    
          1. 
        需要被注意的問題
    
            2. 
    
          2. 
        問題發生的時間
    
            3. 
    
          3. 
        問題發生的位置
    
            4. 
    
          4. 
        受問題影響的其他變量
    
            5. 

          

          
     

          

          
    分析型儀表盤 

          

          
    分析型儀表盤能夠讓用戶探索多個數據集并發現趨勢。通常這些儀表盤包括復雜的圖表，這些圖表能夠發現數據細節。

          

          
    使用情況包括：

          

            
    
          1. 
        強調隨時間變化的趨勢
    
            2. 
    
          2. 
        回答“為什么”和“如果……怎樣”的問題
    
            3. 
    
          3. 
        預測
    
            4. 
    
          4. 
        創建深入的報告
    
            5. 

          

          
     

          

          
    分析型儀表盤的案例有：

          

            
    
          1. 
        跟蹤隨時間變化的廣告活動表現
    
            2. 
    
          2. 
        跟蹤產品在整個生命周期中的銷售和收益
    
            3. 
    
          3. 
        顯示城市人口隨時間改變的趨勢
    
            4. 
    
          4. 
        跟蹤隨時間變化的氣候數據
    
            5. 

          

          
     

          

          
     

          

          
    操作型儀表盤 

          

          
    操作型儀表板旨在回答一組預定義的問題。它們通常用于完成與監視相關的任務。

          

          
    在大多數情況下，這種類型的儀表盤會把當前信息安排在一組簡單的圖表中。

          

          
    使用情況包括：

          

            
    
          1. 
        根據目標跟蹤當前進度
    
            2. 
    
          2. 
        實時跟蹤系統表現
    
            3. 

          

          
     

          

          
    操作型儀表盤的案例有：

          

            
    
          1. 
        跟蹤呼叫中心活動，如呼叫量、等待時間、呼叫長度或呼叫類型
    
            2. 
    
          2. 
        監視云端應用程序的運行情況
    
            3. 
    
          3. 
        顯示股票市場表現
    
            4. 
    
          4. 
        監視賽車的遙測數據
    
            5. 

          

          
     

          

          
     

          

          
    演示型儀表盤 

          

          
    演示型儀表板提供了關于感興趣主題的詳細快照。

          

          
    這些儀表板通常包括一些小圖表或記分卡，通過動態標題來解釋每個支持圖表中提供的趨勢和見解。

          

          
    使用情況包括：

          

            
    
          1. 
        提供關鍵績效的指標概述
    
            2. 
    
          2. 
        創建高級執行摘要
    
            3. 

          

          
     

          

          
    展示型儀表盤的案例有：

          

            
    
          1. 
        提供投資帳戶表現的概述
    
            2. 
    
          2. 
        提供產品銷售和市場份額數據摘要
    
            3. 

          

          
     

          

          
     

          

          
    原文地址：Material Design

          

          
    譯者：杜雅黎

          

          
     轉載請注明：學UI網》Material Design Data Visualization 數據可視化
          

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。 

          

          
    截屏2021-05-13 上午11.41.03.png 

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、 

          

          
    UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          
           

          

          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(2250)
              
                          
          
          
          
              
          

  

          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合