<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>
          
  
      
    

          


          
    
  
    
          
    
                    首頁
    
          
              
          
            
            
          是什么讓學習 Web 開發在未來幾年變得有價值？
          
            
          
               前端達人                                            
          
            
          
    什么是網頁開發？

          

          
    Web 開發是指在互聯網上創建網站或 Web 應用程序。它涉及一系列任務，從開發網站的整體結構和設計到編寫使網站栩栩如生的代碼。Web 開發可能是一個復雜的過程，它通常涉及使用各種不同的技術，包括 HTML、CSS 和 JavaScript，以及服務器端語言，如 PHP、Ruby、Nodejs 和 Python。Web 開發人員可能在前端工作網站的一部分，這是用戶與之交互的部分，或者在后端，這是處理網站幕后功能的部分。Web 開發是一個快速發展的領域，Web 開發人員需要跟上最新的技術和最佳實踐，才能創建有效且引人入勝的網站和 Web 應用程序。

          

          
    在這里插入圖片描述

          

          
    Web 開發領域的未來是什么樣的？

          

          
    可以肯定地說，Web 開發將繼續是一個重要且充滿活力的領域。隨著 Internet 的不斷發展和演變，對 Web 開發人員的需求也可能會增加。Web 開發中使用的技術和工具也將繼續發展和改進，這將使 Web 開發人員能夠創建更先進、更復雜的網站和應用程序。此外，人工智能、虛擬現實和增強現實以及物聯網等新技術的興起可能會為網絡開發人員帶來新的機遇和挑戰。Web 開發的未來看起來一片光明，對于那些對技術充滿熱情的人來說，它將繼續是一個令人興奮和有益的領域。

          

          
    現在是成為 Web 開發人員的好時機嗎？

          

          
    Web 開發是一個快速發展和動態的領域，由于 Web 應用程序開發的復雜性和多樣性不斷增加，因此對 Web 開發人員的需求量很大。

          

          
    Web 開發人員有什么好的工作機會嗎？答案是肯定的?；ヂ摼W改變了我們的生活方式。如果您想加入一個令人興奮的新行業來開發新技術，我們建議您這樣做并成為一名網絡開發人員。該技術不僅“防 covid”，而且相對抗衰退。

          

          
    人們每天都越來越多地參與網絡，并使用他們的智能手機和平板電腦訪問互聯網，因此對于網絡開發人員來說，創建針對這些智能設備優化的網站和網絡應用程序非常重要。

          

          
    對于網站和應用程序而言，提供用戶會喜歡的令人難忘的用戶體驗將變得更加重要。具有提供引人入勝的用戶體驗天賦的開發人員應該研究這些趨勢帶來的機會。

          

          
    總之，每項 Web 技術的背后都有一支經驗豐富、才華橫溢的開發人員團隊，他們負責更新、開發和維護它。技術每天都在發展，因此有才華的 Web 開發人員始終可用并存在非常重要。

          

          
    在這里插入圖片描述

          

          
    網頁設計和網頁開發有何不同？

          

          
    網頁開發和網頁設計是兩個經常混淆的獨立領域。雖然它們是相關的，但它們是具有不同重點和目標的不同學科。

          

          
    網頁設計側重于網站的美學和功能方面，涉及用戶界面和用戶體驗的規劃和創建。網頁設計師負責網站的布局、配色方案和整體外觀，以及網站的導航和用戶流程。

          

          
    另一方面，Web 開發側重于構建網站的技術方面。這包括編寫代碼來創建網站的各種組件，例如前端和后端，并將它們集成以創建功能強大且可用的網站。Web 開發人員負責網站的實施和維護，并且可能會使用各種編程技能和框架來實現。

          

          
    Web 開發人員是專門開發可通過 Web 瀏覽器訪問 Internet 的應用程序和服務的程序員。Web 開發人員使用各種技術和語言（例如 HTML、CSS 和 JavaScript）來創建網站或 Web 應用程序的結構、布局和設計。

          

          
    Web 開發人員負責構建和維護 Web 應用程序的各種組件，包括用戶界面、服務器端邏輯和數據庫。他們還可能負責將 Web 應用程序與其他系統和 API 集成，并負責實現增強用戶體驗的特性和功能。

          

          
    總之，網頁設計關注網站的視覺和面向用戶的方面，而網頁開發則關注網站的技術實現和功能。

          

          
    在這里插入圖片描述

          

          
    網絡開發人員做什么的？

          

          
    前端網頁開發

          

          
    前端開發人員是專門從事 Web 開發客戶端的 Web 開發人員。他們負責構建和維護 Web 應用程序的用戶界面和用戶體驗，包括布局、設計和交互性。

          

          
    前端開發人員通常精通前端技術和語言，例如 HTML、CSS 和 JavaScript。他們負責實施 Web 應用程序的視覺設計，包括布局、排版和配色方案。他們還可能負責實現交互元素，例如按鈕、表單和菜單，以及將 Web 應用程序與后端系統和 API 集成。

          

          
    除了技術技能，前端開發人員還需要對用戶體驗和設計原則有深刻的理解。他們應該能夠創建直觀、用戶友好且美觀的 Web 應用程序。

          

          
    前端開發是 Web 開發的重要組成部分，前端開發人員在創建 Web 應用程序的外觀方面發揮著關鍵作用。

          

          
    后端網頁開發

          

          
    后端開發人員是專門從事 Web 開發服務器端的 Web 開發人員。他們負責構建和維護 Web 應用程序的底層邏輯和基礎設施，包括服務器端邏輯、數據庫和 API。

          

          
    后端開發人員通常具有服務器端語言和技術方面的專業知識，例如 PHP、Python、Ruby 和 Node.js。他們負責實現 Web 應用程序的服務器端邏輯，包括業務規則、數據驗證和用戶身份驗證。他們還可能負責設計和實施數據庫模式，以及將 Web 應用程序與其他系統和 API 集成。

          

          
    除了技術技能，后端開發人員還需要具備強大的問題解決、溝通和協作能力。他們應該能夠批判性和邏輯性地思考，并能夠設計和實施可擴展、可維護且高效的解決方案。

          

          
    后端開發是 Web 開發的重要組成部分，后端開發人員在構建和維護 Web 應用程序的功能和性能方面發揮著關鍵作用。

          

          
    全棧網頁開發

          

          
    全棧開發人員是在前端和后端開發方面都具有專業知識的 Web 開發人員。他們負責構建和維護整個 Web 應用程序，從用戶界面和用戶體驗到底層服務器端邏輯和數據庫。

          

          
    全棧開發人員通常對用于構建 Web 應用程序的技術和語言有深入的了解，包括 HTML、CSS、JavaScript 和服務器端語言（如 PHP、Python 和 Ruby）。他們能夠處理 Web 應用程序的所有層，從用戶界面和用戶體驗到數據庫和服務器端邏輯。

          

          
    除了技術技能，全棧開發人員還需要具備強大的問題解決、溝通和協作能力。他們應該能夠創造性和批判性地思考，并能夠適應不斷變化的技術和要求。

          

          
    全棧開發是一個充滿挑戰和回報的領域，由于 Web 應用程序的復雜性和多樣性不斷增加，對全棧開發人員的需求量很大。

          

          
    站長

          

          
    網站管理員負責構建、維護和更新網站。他們還可能負責將網站與其他系統或云服務集成，例如數據庫和內容管理系統 (CMS)，以及實施增強用戶體驗的特性和功能。

          

          
    網站管理員通常與開發團隊的其他成員（包括圖形設計師、內容創建者和項目經理）密切合作，以創建和維護滿足企業或組織需求的網站。他們還可以與客戶合作以了解他們的要求并提供滿足他們需求的解決方案。

          

          
    從哪里開始，第一步是什么？

          

          
    如果你是 Web 開發的新手并且想知道從哪里開始以及第一步是什么，這里有一些建議：

          

          
    學習 HTML 和 CSS 等 Web 開發基礎知識——這些是 Web 的核心技術，良好的這些語言基礎對于任何 Web 開發人員來說都是必不可少的。您可以從學習 HTML 和 CSS 的基礎知識開始，例如網頁的結構、如何添加內容和樣式以及如何創建簡單的靜態網頁。

          

          
    選擇開發環境——開發環境是一組用于構建和測試 Web 應用程序的工具和資源。這通常包括用于編寫代碼的文本編輯器或集成開發環境 (IDE)、用于測試網頁的 Web 瀏覽器以及用于運行 Web 應用程序的本地 Web 服務器。帶有大量插件的 vscode 編輯器肯定需要引起您的注意。

          

          
    構建一個簡單的網頁——學習了 HTML 和 CSS 的基礎知識后，嘗試構建一個包含一些文本、圖像和基本樣式的簡單網頁。這將使您有機會練習所學的技能，并了解不同技術如何協同工作。然后更進一步，開始復制一些最流行的網絡應用程序，然后 memic 嘗試重新創建它，我指的只是這里的設計。

          

          
    探索 Web 開發框架和庫– 有許多可用的 Web 開發框架和庫可以更輕松地構建 Web 應用程序。一些流行的選項包括 React、Angular、Vue.js 和 Django。一旦你確定了一個框架，立即開始學習它并堅持下去直到你掌握它。

          

          
    在這里插入圖片描述

          

          
    學習基礎知識

          

          
    HTML或超文本標記語言是一種用于創建和構建網頁內容的編程語言。HTML使用一系列元素或標簽來定義網頁的結構和布局，包括標題、段落、列表和鏈接。HTML 還允許開發人員向網頁添加圖像、視頻和其他多媒體內容，使其成為構建 Web 應用程序的強大且通用的語言。

          

          
    定義帶有標題、段落和圖像的簡單網頁的 HTML 代碼：

          

          <!DOCTYPE html> <html> <head> <title>我的 Web 頁面</title> </head> <body> <h1>Hello, World!</h1> <p>這是我的第一個 Web 頁面</p> <img src="https://www.example.com/image.jpg" alt="A beautiful landscape"> </body> </html> 

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 


          

          

          
    在此示例中，<html>和<body>標簽定義了網頁的結構，而<h1>、<p>和<img>標簽定義了頁面的內容。<img>標簽的src屬性指定要顯示的圖像的 URL，而alt屬性為無法看到圖像的用戶提供圖像的文本描述。所以你需要了解 HTML 標簽和它們的屬性。

          

          
    CSS或層疊樣式表是一種樣式表語言，用于描述以標記語言編寫的文檔的外觀和格式。在 Web 開發環境中，CSS 用于控制以 HTML 或其他標記語言編寫的網頁的外觀和布局。CSS 允許開發人員為網頁上的內容定義顏色、字體、大小和其他樣式，使其成為構建現代響應式 Web 應用程序的重要組成部分。

          

          
    可用于設置上述網頁內容樣式的 CSS 代碼：

          

          body { font-family: Arial, sans-serif; background-color: #f1f1f1; } h1 { color: #333; text-align: center; margin: 30px 0; } p { color: #777; font-size: 18px; line-height: 1.5; padding: 0 20px; } img { width: 100%; height: auto; } 

          
    

          


            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 

    
          • 
        12
    
            • 

    
          • 
        13
    
            • 

    
          • 
        14
    
            • 

    
          • 
        15
    
            • 

    
          • 
        16
    
            • 

    
          • 
        17
    
            • 

    
          • 
        18
    
            • 

    
          • 
        19
    
            • 

    
          • 
        20
    
            • 

    
          • 
        21
    
            • 

    
          • 
        22
    
            • 


          

          

          
    在此示例中，body選擇器將樣式應用于網頁的<body>元素， h1選擇器將樣式應用于所有<h1>元素，p和img選擇器將樣式應用于所有<p>和<img>元素， 分別。此 CSS 代碼中定義的樣式指定頁面及其元素的字體系列、背景顏色、文本對齊方式和其他屬性。顯示此示例演示了選擇 HTML 元素的重要性以及需要使用哪些屬性來設置它的樣式。因此，了解所有類型的選擇器以及它們需要的屬性。

          

          
    你可以使用 CSS 框架讓您的生活更輕松。最受歡迎的是Bootstrap和Tailwind CSS，它們都是用于構建響應式、移動優先的 Web 應用程序的前端框架。這兩個框架都提供了一組預定義的 CSS 類和組件，可以輕松地將它們合并到網頁中，以創建一致的、具有專業外觀的設計。Bootstrap 和 Tailwind CSS 是構建現代響應式 Web 應用程序的強大工具。這兩個框架之間的選擇將取決于您的個人喜好和項目的具體需求。

          

          
    最流行的框架

          

          
    有許多不同的框架可用于 Web 開發，每個框架的流行程度取決于項目的具體需求以及開發人員、團隊或公司的偏好。一些最流行的 Web 開發框架包括：

          

          
    React： React 是用于構建用戶界面的最多的javascript 框架之一。 許多公司都在使用它，并且擁有龐大的開發人員社區。

          

          
    Angular： Angular 是一個基于 TypeScript 的開源 Web 應用程序框架，由 Google 的 Angular 團隊以及個人和公司社區領導。

          

          
    Vue.js： Vue.js 是一個用于構建用戶界面的漸進式 JavaScript 框架。它旨在逐步采用并可以集成到現有項目中。

          

          
    Ember.js： Ember.js 是一個用于構建大型 Web 應用程序的開源 JavaScript Web 框架。它以其約定優于配置方法和強調開發人員生產力而聞名。

          

          
    10 種最流行的 Web 開發編程語言

          

          
    以下編程語言列表可幫助您了解在成為 Web 開發人員的過程中您想要學習和追求的語言。大多數時候，選擇將取決于您選擇的框架或其他方式：

          

          
    JavaScript——讓我們從顯而易見的最流行的 Web 開發編程語言開始，它是 JavaScript，它是一種用于構建前端 Web 應用程序的通用語言。它是一種客戶端語言，這意味著它在用戶的網絡瀏覽器中運行，并允許開發人員創建交互式和動態網頁。JavaScript 還通過 Node.js 等技術用于服務器端開發，它允許開發人員構建可擴展的高性能 Web 應用程序。

          

          
    Python – Python 是一種高級解釋型編程語言，廣泛用于 Web 開發。它具有簡單易學的語法，是初學者的絕佳選擇。Python 還以其強大的庫和框架而聞名，例如 Flask 和 Django，這使得快速構建復雜的 Web 應用程序變得容易。

          

          
    Java – Java 是一種流行的面向對象的編程語言，廣泛用于構建可擴展的高性能 Web 應用程序。它是一種通用語言，可用于為各種平臺（包括桌面、移動和 Web）構建 Web 應用程序。

          

          
    Ruby – Ruby 是一種高級解釋型編程語言，通常用于 Web 開發。它以簡單和優雅著稱，使其成為想要快速輕松地構建 Web 應用程序的開發人員的熱門選擇。

          

          
    PHP – PHP 是一種流行的腳本語言，廣泛用于構建動態網站和 Web 應用程序。它是一種服務器端語言，這意味著它在網絡服務器上運行并生成發送到用戶網絡瀏覽器的 HTML 頁面。

          

          
    C# – C# 是一種流行的面向對象的編程語言，通常用于構建 Web 應用程序。它是一種通用語言，可用于為各種平臺（包括桌面、移動和 Web）構建 Web 應用程序。

          

          
    Swift – Swift 是一種現代的編譯型編程語言，通常用于構建 Web 應用程序。它是一種功能強大的語言，以其安全性和性能著稱，使其成為構建需要處理大量數據或執行復雜計算的 Web 應用程序的絕佳選擇。

          

          
    Go – Go 是一種現代的編譯型編程語言，通常用于構建 Web 應用程序。它是一種快速、高效的語言，以并發性和可擴展性著稱，使其成為構建需要處理大量流量或數據的 Web 應用程序的絕佳選擇。

          

          
    TypeScript – TypeScript 是一種流行的類型化編程語言，通常用于構建大型、復雜的 Web 應用程序。它是 JavaScript 的超集，這意味著它包含 JavaScript 的所有功能，以及可以更輕松地構建大型、可維護的 Web 應用程序的附加功能。

          

          
    Kotlin – Kotlin 是一種現代的編譯型編程語言，通常用于構建 Web 應用程序。它是一種簡潔、強大的語言，以其安全性和與 Java 的互操作性而著稱，使其成為構建需要與現有 Java 代碼集成的 Web 應用程序的絕佳選擇。

          

          
    Web開發是一個好職業嗎？

          

          
    追求網絡開發職業道路可能是一個不錯的選擇，原因有很多。Web 開發職業的一些好處包括：

          

          
    對 Web 開發人員的高需求：對 Web 開發人員的需求一直很高，并且預計在未來幾年將繼續增長。這意味著那些擁有技能和經驗的人將有很多機會在這個領域取得成功。

          

          
    高薪： Web 開發人員的薪水很高，薪水因經驗、地點和其他因素而異?？偟膩碚f，Web 開發人員可以期望獲得豐厚的薪水，并且成長和進步的潛力很大。

          

          
    靈活性： Web 開發可以在工作地點和日程安排方面提供很大的靈活性。許多 Web 開發人員遠程工作，并且能夠設置自己的時間并按照靈活的時間表工作。

          

          
    學習和成長的機會： Web 開發是一個不斷變化的領域，新技術和工具不斷涌現。這意味著作為 Web 開發人員，始終有學習和成長的機會，并保持在行業的前沿。

          

          
    創造有形事物的滿足感：作為一名 Web 開發人員，您將有機會創造有形且有用的事物。這可以令人難以置信地滿足，并且可以為您的工作提供成就感和自豪感。

          

          
    Web開發的未來范圍

          

          
    Web 開發的未來看起來一片光明，許多激動人心的發展和趨勢即將出現。一些可能影響 Web 開發未來的最新 Web 開發趨勢包括：

          

            
    
          • 
        
            
            人工智能和機器學習的興起：人工智能和機器學習在網絡開發中變得越來越重要，出現了許多新的工具和框架來幫助開發人員構建人工智能驅動的應用程序。
        
            
    
            • 
    
          • 
        
            
            物聯網的發展：物聯網 (IoT) 是一個由可以收集和共享數據的連接設備組成的網絡，預計在未來幾年將顯著增長。這將為網絡開發人員創造新的機會來構建可以連接這些設備并與之交互的應用程序。
        
            
    
            • 
    
          • 
        
            
            移動設備的重要性日益增加：隨著越來越多的人使用智能手機和其他移動設備訪問網絡，網絡開發人員創建適合移動設備的應用程序和網站將變得越來越重要。
        
            
    
            • 
    
          • 
        
            
            漸進式 Web 應用程序的興起：漸進式 Web 應用程序 (PWA) 是外觀和感覺都像本機移動應用程序的 Web 應用程序，并且有望在未來變得更加流行。這將為 Web 開發人員創造新的機會來構建可跨不同設備和平臺提供無縫用戶體驗的 PWA。
        
            
    
            • 
    
          • 
        
            
            云計算的發展：云計算在網絡開發中變得越來越重要，許多公司將他們的應用程序和數據轉移到云中。這將為 Web 開發人員創造新的機會來構建云原生應用程序并將它們與現有的云服務集成。
        
            
    
            • 

          

          
    結論：

          

          
    Web 開發仍然值得學習，因為它是構建和維護作為現代 Internet 支柱的網站和 Web 應用程序的基本技能。隨著世界變得越來越緊密，對 Web 開發人員的需求不斷增長，對于那些擁有構建和維護未來 Web 應用程序的技能和專業知識的人來說，有許多激動人心的機會。

          

          
    Web 開發也是一個回報豐厚且具有挑戰性的領域，它允許開發人員利用他們的創造力和解決問題的技能來構建供全球數百萬人使用的應用程序。有了合適的工具和資源，任何人都可以學習 Web 開發并開始構建自己的 Web 應用程序，從而打開一個充滿可能性和機遇的世界。

          


          

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

          

          
    
          
          

          

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

          

          
          

          

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

          
            
          
              
                評論(0)
                瀏覽(1201)
              
                          
          
          
          
                      
          
            
            
          Vue.js 狀態管理：Pinia 與 Vuex
          
            
          
               前端達人                                            
          
            
          

          
    Vuex 和 Pinia 是用于管理 Vue.js 應用程序狀態的標準 Vue.js 庫。讓我們比較一下他們的代碼、語言、功能和社區支持。

          

          
    如果沒有合適的庫，開發人員管理應用程序的狀態可能會很困難。Vuex 和 Pinia 是標準的 Vue.js 庫，用于處理應用程序中的條件。這兩個庫都非常適合狀態管理，但是由于它們出色的特性和功能，選擇哪個庫用于你的項目需要時間并且令人沮喪。好吧，我們將在本文中看看為什么一個是最好的。

          

          
    在本文中，我們將通過實際代碼示例查看代碼比較、它們的變體、功能，以及推薦使用哪一個來管理你的狀態應用程序，以便更好地理解。我們還將考慮每個產品的語言、功能和社區支持。

          

          
    Pinia 和 Vuex 簡介

          

          
    我將簡要總結 Vuex 和 Pinia。如果你想要更詳盡的解釋，我建議閱讀Vuex 文檔和Pinia 文檔。

          

          
    什么是Pinia？

          

          
    Pinia是一個新的狀態管理庫，可幫助你在 Vue.js 應用程序中跨組件管理和存儲響應數據和狀態。Pinia 由 Vue 核心團隊成員之一 Eduardo San Martin Morote 創建。

          

          
    Pinia 使用新的反應系統來構建一個直觀且完全類型化的狀態管理系統。

          

          
    庫中引入的新特性是促成 Pinia 推薦的因素之一?？傮w而言，Pinia 顯得輕巧、簡單且易于掌握。它擁有可以使 Vue 3 和 Vue 2 中的編程變得通用的一切。因此，這是試用 Pinia 的理想機會。

          

          
    什么是 Vuex？

          

          
    Vuex是一種狀態管理模式和庫，構建為集中式存儲，可幫助你維護 Vue 應用程序中存在的所有組件的狀態。Vuex 遵循確保你的狀態突變為預測標準的規則。

          

          
    使 Vuex 更強大的一個因素是組件從 Vuex store 中獲取它們的狀態，并且可以快速有效地響應 store 狀態的變化。

          

          
    Vuex雖然是維護你store的狀態管理庫，但建議你熟悉或搭建過大型SPA。如果你沒有經驗，Vuex 可能會冗長且令人生畏。

          

          
    如果你的應用程序很廣泛，你需要管理復雜的數據流，并且你有嵌套的組件，你可以使用 Vuex。查看官方文檔以獲取有關何時使用 Vuex 的更多信息。

          

          
    Pinia 的特點

          

          
    Pinia 和 Vuex 之間的區別之一是 Pinia 是“模塊化設計”，換句話說，它被構建為擁有多個商店，而 Vuex 只有一個商店。在這些商店中，您可以擁有子模塊。除此之外，Pinia 允許將這些模塊中的每一個從他們的商店直接導入到需要的組件中。

          

          
    模塊化設計

          

          
    如果您是一名 Vue 開發人員并且曾使用 Vuex 管理應用程序的狀態，您會注意到 Vuex 只有一個商店。在該商店中，您可以在其中包含多個模塊。使用 Pinia，您可以將這些模塊中的每一個都存儲在一個地方，并在需要時將它們直接導入到組件中。

          

          
    此方法允許捆綁器自動對它們進行代碼拆分，并提供更好的 TypeScript 推理。

          

          
    完整的開發工具支持

          

          
    Pinia 提供開發工具支持，以幫助您使用該庫構建和輕松調試。當我們安裝 Pinia 時，它會自動掛接到我們的 Vue.js 開發工具，并讓我們跟蹤對我們的商店所做的更改，這讓我們在 Vue.js 版本（Vue 2 和 Vue3）中獲得流暢的開發人員體驗。

          

          
    Pinia 很直觀

          

          
    Pinia 提供了一個簡單的 API，使您的商店的編寫變得簡單且井井有條，就像創建組件一樣。這意味著與 Vuex 解決方案相比，需要掌握的樣板文件和概念更少。

          

          
    Pinia 是可擴展的

          

          
    Pinia 還提供了一個完整的插件系統，具有交易和本地存儲同步等功能，適用于 Pinia 默認行為不足的情況。

          

          
    TypeScript 支持

          

          
    Pinia 提供比 Vuex 更好的 TypeScript 支持，具有 Javascript 自動完成功能，這使得開發過程變得簡單。

          

          
    Pinia 輕量的

          

          
    Pinia 的重量只有 1 KB，因此很容易融入您的項目。這可能會提高您的應用程序性能。

          

          
    Vuex的特點

          

          
    模塊

          

          
    當您的應用程序擴展時，遍歷變得很困難。但是，使用 Vuex 模塊，您可以根據領域功能將您的商店拆分為多個文件，并從該特定命名空間中的模塊訪問狀態循環。

          

          
    開發工具支持

          

          
    Vue devtools 中的 Vuex 選項卡允許我們查看狀態并跟蹤我們的變化。這使我們能夠快速評估我們的程序如何執行和調試錯誤。

          

          
    熱重載

          

          
    Vuex支持熱重載功能，它使用 webpack 的熱模塊替換 API，可以在您開發時快速重載您的 mutations、modules、action 和 getters。

          

          
    TypeScript 支持

          

          
    如果你想編寫一個 TypeScript 存儲定義，Vuex 可以提供它的類型并且更容易實現。它有一個默認的 TypeScript 配置，不需要額外的設置。

          

          
    Pinia和Vuex的代碼對比

          

          
    Pinia 是一個輕量級庫，可幫助您管理整個應用程序的反應狀態。與 Vuex 相比，Pinia API 易于學習，使您的代碼更易于閱讀。

          

          
    讓我們看一下使用 Pinia 和 Vuex 管理我們的狀態的代碼比較：

          

          
    Vuex

          

          
    在此示例中，我們將查看一個簡單的 Vuex 存儲，它跟蹤待辦事項列表項的狀態：

          

          import { createStore } from 'vuex' const TodoListstore = createStore({ state() { return { todoListItems: [] } }, actions: { addNewList({ commit }, item) { { commit('createNewItem', item) } }, mutations: { createNewItem(state, item) { state.todoListItems.push(item) } } }) 

          
    

          


            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 

    
          • 
        12
    
            • 

    
          • 
        13
    
            • 

    
          • 
        14
    
            • 

    
          • 
        15
    
            • 

    
          • 
        16
    
            • 

    
          • 
        17
    
            • 

    
          • 
        18
    
            • 

    
          • 
        19
    
            • 

    
          • 
        20
    
            • 


          

          

          
    如果你看上面的代碼，你可以看到 Vuex 存儲中的三個動作：狀態、 動作和突變。狀態返回當前的todoListItems，動作提交一個突變來創建一個新項目，最后，突變創建新項目并將其添加到列表中。當你構建一個更大的應用程序時，你可能會意識到動作和突變相對相似，導致冗余代碼，因為每個狀態變化都需要一個樣板。

          

          
    Pinia

          

          
    使用 Pinia 簡單 API，您可以消除突變和冗余代碼。讓我們查看一個代碼示例，了解當您使用 Pinia 實現之前的代碼時的樣子：

          

          import { defineStore } from 'pinia' Export const useListStore = defineStore('list', { state() => ({ return { todoListItems: [] } }), actions: { addNewList() { this.todoListItems.push(item) } }}) 

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 

    
          • 
        12
    
            • 

    
          • 
        13
    
            • 


          

          

          
    上面的示例是 Pinia API 在管理應用程序狀態時如何工作的簡單代碼。使用 Pinia，我們刪除了突變并將其直接更新到我們的動作中。

          

          
    注意：在上面的代碼示例中，當我們將項目直接提交給我們的操作時，我們不需要跟蹤我們的項目。

          

          
    Pinia 和 Vuex 的優缺點

          

          
    Pinia 和 Vuex 是控制應用程序狀態的優秀工具，但其中一個必須具有另一個所沒有的某些功能。讓我們來看看它們是什么。

          

          
    Pinia 的優點

          

            
    
          • 
        Pinia 允許你在不重新加載頁面的情況下修改你的商店。
    
            • 
    
          • 
        它在 JavaScript 中提供 TypeScript 支持和良好的自動完成功能。
    
            • 
    
          • 
        Pinia 提供 devtool 支持，這有助于增強開發人員使用該工具的體驗。
    
            • 
    
          • 
        Pinia 只有狀態、吸氣劑和動作。不需要突變。
    
            • 
    
          • 
        使用 Pinia，你可以將狀態存儲在一個地方，并在請求時將其傳遞給它們的組件。
    
            • 
    
          • 
        它是一個重量為 1 KB 的輕量級庫。
    
            • 
    
          • 
        它提供服務器端渲染支持和自動類型模塊，無需額外工作。
    
            • 
    
          • 
        Pinia 兼容 Vue 2 和 Vue 3。
    
            • 

          

          
    Pinia 的缺點

          

            
    
          • 
        與 Vuex 相比，它沒有龐大的社區支持和解決方案。
    
            • 
    
          • 
        Pinia 不支持調試功能，如時間旅行和編輯。
    
            • 

          

          
    Vuex 的優點

          

            
    
          • 
        Vuex 有 mutations、getters 和 actions。
    
            • 
    
          • 
        與 Pinia 相比，Vuex 的社區支持很大。
    
            • 
    
          • 
        Vuex 支持調試功能，如時間旅行和編輯。
    
            • 

          

          
    Vuex 的缺點

          

            
    
          • 
        它對 TypeScript 不友好。
    
            • 
    
          • 
        你只能將其用于大型 SPA。
    
            • 

          

          
    我應該使用哪個：Pinia 還是 Vuex？

          

          
    好吧，這就是它變得更具挑戰性的地方，因為仍然有一些項目需要使用 Vuex 來處理狀態應用程序，即使 Pinia 是新推薦的狀態管理庫。它有幾個 Vuex 沒有的有價值的功能。

          

          
    Vuex 仍然是構建大型 SPA 的理想解決方案，因為對于構建中小型應用程序的人來說，它相當冗長。

          

          
    Pinia 也一樣。盡管如此，如果你需要所有列出的功能，例如 devtool 支持、TypeScript 支持和狀態應用程序的輕松管理，那么 Pinia 是最好的解決方案——它為你提供流暢的開發體驗。

          

          
    如果你正在構建一個不太復雜的應用程序，無論是中等到廣泛的應用程序，你都可以使用 Pinia，因為它的重量約為 1 KB。

          

          
    結論

          

          
    由于功能多樣，在管理應用程序狀態時，在 Vuex 和 Pinia 之間進行選擇可能會造成混淆。不過，這兩個框架都非常適合管理狀態應用程序。本文簡要比較了它們的特性、功能和對代碼的影響。讀完這篇文章后，也許你將能夠找到適合你的庫。

          



          

          

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

          

          
    
          
          

          

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

          

          
          

          

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

          
            
          
              
                評論(0)
                瀏覽(1567)
              
                          
          
          
          
                      
          
            
            
          7個實用技巧，教你搞定可視化圖表
          
            
          
               ui設計分享達人                                            
          
            
          
    
          
        可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中，如果沒有系統的可視化知識，會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么，在復雜的數據關系中如何設計和選用圖表，如何在好看的同時提升信息傳達效率，看完這篇文章希望對你的設計過程有所幫助。 
    
          
    
          
        
          
// 為什么要數據可視化 
    
          
    
          
        
          
    
          
    
          
        數據可視化就是用圖表來表示數據信息，它所傳達的信息包括你所拿到的數據源和你分析后的結果，再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。 
    
          

          
    
          
         
    
          

          
    
          
        舉個例子，同樣一組數據，用表格的形式呈現是很難有所洞察的；如果將各個地區維度的數據聚合以柱圖形式呈現，很容易就能看出各個地區間數據的差異，并從中洞察規律 
    
          
    
          
        
          
    
          
    
          
        關于如何設計好數據可視化圖表，這邊總結了三個步驟：選擇適合的圖表，強化視覺層次，圖表響應式適配。 
    
          
    
          
        
          
    
          
    
          
        一、選擇適合的圖表 
    
          
    
          
        
          
數據可視化的圖表種類繁多，當我們真的開始作圖，往往會遇到一個困境：有這么多類型，要如何選擇正確的圖表呢？首要依據是考慮所要傳達的信息意圖，即所要制作的圖表它的任務是什么，再通過分析數據關系來選擇表達方式；第二層意圖是圖表傳達內容，這時候我們就需要根據數據的特征去突出和強化。 
    
          
    
          
        
          
1. 分析數據關系 
    
          
    
          
        根據數據分析的方式來看，每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構，再結合數據關系作出選擇。了解圖表的可能知道，一般圖表的數據關系有構成、比較、分布，以商業數據為例，常見的還有流轉關系。 
    
          

          
    
          
         
    
          

          
    
          
        構成關系 
    
          
    
          
        構成關系的圖表表達的是部分和整體的關系，用于分析總體和各部分的占比比例，構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小，也可以使用比較關系的圖表。 
    
          
    
          
        常用圖表：餅/環圖、堆疊圖、面積圖等，如涉及到層級結構，還會用矩形樹圖或旭日圖等特殊結構圖表。 
    
          
    
          
        關鍵詞：“占比、比例、百分比” 
    
          

          
    
          
         
    
          

          
    
          
        比較關系 
    
          
    
          
        比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內，通過對兩個或兩個以上的指標分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內數據的變化，分類對比用于比較數據規模。 
    
          
    
          
        常用圖表：趨勢對比常用圖表有折線圖、散點圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。 
    
          
    
          
        關鍵詞：“增減、升降、漲跌、波動” 
    
          

          
    
          
         
    
          

          
    
          
        分布關系 
    
          
    
          
        利用空間分區來展示數據之間的分布關系，常用于體現兩個或以上數據的相關性。 
    
          
    
          
        常用圖表：散點圖、熱力圖、雷達圖等 
    
          
    
          
        關鍵詞：“隨著……而變化、A/B之間的相關性、交/并集”等 
    
          

          
    
          
         
    
          

          
    
          
        關聯與流轉 
    
          
    
          
        流轉關系是B端數據常用的一種關系，它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等，以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。 
    
          
    
          
        常用圖表：關系圖、?；鶊D、漏斗圖、進度圖等 
    
          
    
          
        關鍵詞：“流程步驟、留存、轉化、關系” 
    
          

          
    
          
         
    
          

          
    
          
        2. 分析數據特征 
    
          
    
          
        按數據關系和分析目的選擇好圖表類型后，第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有：變量特征、維度特征、層級特征、流程特征。 
    
          
    
          
        
          
變量特征 
    
          
    
          
        分辨一個指標通常有兩類特征，按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢，離散數據通常統計各分類下數量的變化。
    
          
    
            
        
          • 
            連續型數據：指在一定區間內可以任意取值的數據叫連續數據，其數值是連續不斷的。如身高、體重等帶有時間因素變量的數據等，通常用折線圖體現變化趨勢。
        
            • 
        
          • 
            離散型數據：指其數值只能用自然數或整數單位計算的數據。如當天銷量、進店人數等表示分類類型的數據，用柱圖表現更加體現變量的特征。
        
            • 
    
          

          
    
          
         
    
          

          
    
          
        維度特征 
    
          
    
          
        多維度分析需要將多個變量在同一平面上直觀的表示，可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據，可使用不同顏色進行分類 
    
          
    
            
        
          • 
            根據分析視角選擇圖表：對于多維度變量的數據我們需要明確分析的視角，去找準對應的數據映射。如案例中多個班級的科目成績的這組數據，如需要全局視角查看個班的綜合素質，推薦使用雷達圖；對比單科成績的變化分布，則推薦使用堆積圖。
        
            • 
    
          

          
    
          
         
    
          

          
    
          
        層級特征 
    
          
    
          
        多層級數據由多個部分構成一個整體，又稱樹形結構數據。除了用結構樹圖表表現以外，還可以考慮以下兩種圖表類型： 
    
          
    
            
        
          • 
            矩形樹圖：突出子層級占比大小。最初是用來顯示計算機硬盤驅動器上文件的結構和大小，它以面積的形式突出展現各個子層級節點的占比，可幫助用戶看到數據的層次結構以及各層級之間的關系。
        
            • 
    
          

          
    
          
         
    
          

          
    
          
        例如：上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額，通過色調來區分不同類型，顏色的深淺代表分類下的子集，面積體現銷售占比。對比一般結構樹圖表，它的優勢在于可以有效利用空間。 
    
          
    
            
        
          • 
            旭日圖：突出細分層級關系。由多個圓環圖嵌套而成，也稱為徑向樹圖，它既能像餅圖一樣表現局部和整體的占比，又能像矩形樹圖一樣表現層級關系。常用于細分分析方法，將事物從大到小進行拆解。每個級別的數據通過1個圓環表示，離原點越近代表圓環級別越高。 旭日圖在顯示一個環如何被劃分為多個層級時最有效，而矩形樹圖適合比較相對大小。
        
            • 
    
          

          
    
          
         
    
          

          
    
          
        流程特征 
    
          
    
          
        流轉關系是表達數據轉化流程的重要類型，不僅包含統計意義上的數據總和，同時還表達了信息流轉的路徑；其中?；鶊D和漏斗圖都可以表達路徑中流量的變化，不同的是桑基圖重點強調流量的強度和走向，漏斗圖更加注重突出轉化率和效果，根據不同的表達目的選用。
    
          

          
    
          
         
    
          

          
    
          
        二、強化視覺層次 
    
          
    
          
        
          
選擇合適的圖表后，在信息傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現數據特點。 
    
          
    
          
        
          
    
          
    
          
        1. 強化數據特性 
    
          
    
          
        使用圖表正確的表達信息，需要設計師在強化數據特性的同時避免偏差 
    
          
    
            
        
          • 
            趨勢易感知：折線圖數值如過于平均導致趨勢平緩，有時候無法體現偏差；在強調數據趨勢的場景下，推薦用動態取值范圍讓波動保持在一定范圍內，放大波動占比更突出趨勢。 
        
            • 
    
          

          
    
          
         
    
          

          
    
            
        
          • 
            展示更準確：柱狀圖依靠柱體面積體現最終數值，使用動態范圍截斷將會導致數據解讀不完整；始終將 y 軸從 0 開始，才能更準確的反映柱圖中的值。 
        
            • 
    
          

          
    
          
         
    
          

          
    
          
        2. 色彩視覺傳達 
    
          
    
          
        除了在設計構圖上優化以外，顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知，錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板，精確傳達信息同時后續的項目在選用時也可以達到用色的統一。 
    
          

          
    
          
         
    
          

          
    
          
        我們在之前的文章里有介紹過圖表的取色模型，通過調整顏色HSL值的區間，可以得到以下三種意圖色板： 
    
          
    
            
        
          • 
            定性型-分類色板：用于區分不同的類型，又稱為無序色板。適合區分沒有內在順序的類別 
        
            • 
        
          • 
            定量分歧型-發散色板：通過兩邊互補色來體現，具有明亮的中間值，然后以不同的色調在刻度的兩端變暗。通常用于可視化負值和正值 
        
            • 
        
          • 
            定量順序型-順序色板：從亮到暗或相反的漸變。適合可視化從低到高的數字。 
        
            • 
    
          
    
          
        那么我們要怎么樣去使用這些色板呢？下面幾個案例將帶你了解其中的差異。 
    
          
    
          
        
          
定性型：使用色調來進行分類 
    
          
    
          
        數據內在沒有順序差別時，建議使用色調值（H）進行區分；如定義國家、行業等類型。如果希望圖表看起來更加專業，以下有幾項分類色板的小建議： 
    
          
    
            
        
          • 
            選取盡量少的色調：取色時無需使用整個色環，使用鄰近色或互補色的取色方式顯得更加專業。 
        
            • 
    
          

          
    
          
         
    
          

          
    
            
        
          • 
            色板適度明暗交替：一些視障人士無法區分色相，主要靠顏色的明暗差異來識別，通過飽和度和暗度的調整，創造明暗交替的色板。 
        
            • 
    
          

          
    
          
         
    
          

          
    
          
        定量型：使用深淺色板強調內在順序 
    
          
    
          
        如果在同一個分類下包含子類別，或者數據本身具有排名屬性，那么建議使用連續色板來突出他們內在的順序，使圖表更加易讀。 
    
          
    
            
        
          • 
            順序色板-選擇合適的插值：根據數據的分布情況選擇不同的的插值斷點，突出數據的差異。如以下案例中，根據統計學概念設定不同的取值區間，左側示例使用的是平均線性差值，反映的是數據的集中趨勢；右側示例使用的是中位數插值，能更好的體現數據分布的形態。 
        
            • 
    
          

          
    
          
         
    
          

          
    
            
        
          • 
            發散色板-關注對比色的識別性：盡量避免紅綠配色，如需使用綠色，偏黃或偏藍的綠色更易分辨，對視障人士也更加友好。 
        
            • 
    
          

          
    
          
         
    
          

          
    
          
        三、圖表中的響應式設計 
    
          
    
          
        
          
B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報，在基礎設計完成后還需要考慮到圖表展示的環境，根據不同端去適配顯示效果，以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。 
    
          
    
          
        
          
1. 布局框架適配 
    
          
    
          
        在網頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態，將非必要的的元素轉化或隱藏，保留重要的圖形元素去適應當前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產生元素的重疊。 
    
          

          
    
          
         
    
          

          
    
          
        如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達到適配當前空間的效果。 
    
          
    
          
        2. 圖表元素適配 
    
          
    
          
        要適配移動端，網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外，還需要考慮手機屏幕的尺寸和圖表元素的適配性，去兼容相關的交互操作。 
    
          
    
            
        
          • 
            信息浮層：在圖表中，信息卡元素是傳達信息內容的重要組件，在網頁端中懸浮展示，通常會占據很大空間；圖表適配移動端后，信息浮層改動到圖表上方常駐顯示，并跟隨手指的滑動變化響應數值，完整展示信息的同時也避免了頁面抖動。
        
            • 
    
          

          
    
          
         
    
          

          
    
            
        
          • 
            坐標軸標簽：過長的坐標標簽在適配過程中會產生重疊，而省略也會造成信息展示的不完整。我們需要針對不同的坐標軸類型給出響應的規范。如文本類軸標簽我們可以采用省略、換行、旋轉等方式適配，避免信息的缺失。針對有連續型的數據類坐標軸我們可以使用抽樣、轉化單位等方式適配，精簡空間避免堆疊。
        
            • 
    
          

          
    
          
         
    
          

          
    
          
        3. 極值適配 
    
          
    
          
        因B端平臺的特性，我們無法預知客戶傳入的數據量，可能會遇到因數據量過多，造成圖表顯示不佳，數據讀取困難等問題。這種情況下，提前考慮數據極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。 
    
          
    
            
        
          • 
            縮放和平移：在數據范圍過多時增加取值范圍的縮略軸組件，通過限制展示范圍讓數據量顯示可控。 
        
            • 
    
          

          
    
          
         
    
          

          
    
            
        
          • 
            互動切換視圖：如果折線的類別過多且無法省略的，建議分組查看。默認狀態僅當前組折線高亮，其他數據以淺色顯示，通過切換的方式查看其他組別的信息。 
        
            • 
    
          

          
    
          
         
    
          

          
    
            
        
          • 
            懸浮鼠標高亮：在分類過多不好分辨時，可使用懸浮高亮的交互方式突出相關聯的數據組。 
        
            • 
    
          

          
    
          
         
    
          

          
    
          
        還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨立介紹。 
    
          
    
          
        
          
    
          
    
          
        // 結語 
    
          
    
          
        
          
    
          
    
          
        數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確，才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據，確保用戶能夠更好的接收信息，才是可視化的關鍵。 
    
          

          
作者：百度MEUX
          
來源：站酷
          
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
          
    
          
        藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 
    
          
    
          
        
          
           
    
          
    
          
        分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          

          

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

          
            
          
              
                評論(0)
                瀏覽(842)
              
                          
          
          
          
                      
          
            
            
          簡約設計4原則在表單設計中的應用
          
            
          
               ui設計分享達人                                            
          
            
          
    隨著Ｂ端體驗設計的發展，表單類頁面已經形成了一定的設計模式，例如登錄頁面，場景比較明確、業務流程和設計模式都比較成熟了。

          

          
    業務型表單設計與業務強相關。既需要考慮交互帶來的用戶體驗，又要從業務角度出發滿足用戶的行為需求，相對比較復雜。不過也形成了一些固定的設計方法。今天我們先來看看「精簡」策略。 

          

          
    本文主要內容： 

          

          
    ? 刪除，實現表單輕量化 

          

          
    ? 組織，讓表單更加有層次 

          

          
    ? 隱藏，讓表單更加靈活 

          

          
    ? 轉移，擴展表單的異步空間 

          

          
    
          

          

          
    表單是系統與用戶進行溝通的語言，它應當符合雙方的認知邏輯。因此表單設計時，需要解決「產品」和「用戶」２個方面的問題： 

          

          
    ? 表單需要用戶提供哪些信息，保證信息的正常流轉和業務的完整

          

          
    ? 用戶如何理解這些信息，如何更好地幫助用戶完成表單填寫

          

          
    尤其是面對復雜表單，需要從這兩方面尋找到突破口。

          

          
    ? 在業務層面，設計師需要探究用戶的實際需求，反思表單項是否必要，從而減少不必要的選項，提高用戶效率。 

          

          
    ? 同時在設計層面，還需要基于用戶認知習慣，通過合理的信息組織、交互形式幫助用戶完成表單任務。 

          

          
    復雜表單通常包含多種業務場景，并且與其他業務存在關聯和嵌套，導致表單內容信息量較大。我們需要通過「刪除」、「組織」、「隱藏」、「轉移」４個交互設計原則，讓表單頁面更加簡單、有效。 

          


          

          
     

          


          

          
    ▎01　刪除，實現表單輕量化 

          

          
    前幾年，我們在銀行或者移動營業廳開通一些新業務時，都會填寫表單，通常是密密麻麻一堆信息。但是實際需要填寫的內容可能只有2～3項，業務人員會特意勾選出來給客戶，其余的都是非必填項，或者是業務人員填寫的。

          

          
    線上表單設計時，沒有專門的業務人員指導，用戶更容易迷失。所以設計師或者產品經理的首要任務就是盡可能地減少表單信息量，降低用戶的認知負荷。 

          

          
    最近在做一個表單的優化，業務方要求增加“入參”、“出參”兩個表格項，說是用戶會看。與用戶溝通后，反饋也說“會看一下”。但是在深度挖掘用戶場景后，發現用戶確實會查看這個信息，只不過不是在當前環節查看，而是在結果項中查看。

          

          
    所以我們最終去掉了這兩個信息量較大的表格內容，從而讓整個表單的信息量得到了明顯的下降。因此面對復雜長表單，我們需要從需求入手，判斷是否有必要讓用戶提供如此多的復雜信息。

          

          
    ▎02　組織，讓表單更加有層次 

          

          
    當我們不得不面對復雜表單時，如果采用簡單內容平鋪，用戶看到的是滿屏的散點信息，造成信息識別困難，用戶一時間難以找到填寫思路，反而增加用戶的心理負擔。因此信息的層次性，對于復雜表單至關重要。 

          

          
    首先要從內容和視覺層面讓復雜信息變得清晰、規整，更加符合用戶的認知習慣。例如，可以利用分組標題、分割線、卡片，按照不同信息的類別、屬性和相關性進行區塊劃分。 

          

          
    根據不同的布局和交互，主要有以下4種表單設計模式。 

          


          

          
     

          


          

          
    1、順序表單 

          

          
    表單分組后，可以按照業務邏輯順序鋪開展示。用戶只要按順序填寫就可以了。但是對于超長表單，這種布局方式下，用戶無法全覽頁面信息。頁面上下滾動、定位查找帶來的交互成本比較高。 

          

          
    1）平鋪表單

          


          

          
     

          


          

          
    2）卡片表單

          


          

          
     

          


          

          
    因此順序表單更多地用在業務信息比較簡單的場景中。

          

          
    2、錨點表單 

          

          
    為了解決長表單的定位效率問題，可以在順序表單的基礎上增加錨點。另外錨點還可以幫助用戶快速了解表單所包含的內容模塊。 

          

          
    根據錨點的布局，可以分為橫向錨點和縱向錨點兩類。錨點需要吸頂方便用戶操作。本質上來說，錨點表單是順序表單的優化版本。

          


          

          
     

          



          

          

          
     

          


          

          
    3、標簽表單 

          

          
    如果長表單內容沒有依賴關系，還可以將表單拆分為幾個相互獨立的標簽內容，這就是標簽表單。

          


          

          
     

          


          

          
    不過標簽表單更強調內容的并列關系，常用于配置表單中，例如 MAC 或者 Windows 系統的配置彈窗。標簽表單在全新表單中應用較少。 

          


          

          
     

          


          

          
    因為標簽表單容易造成內容遺漏，并且無法告知用戶哪些標簽已經填寫，哪些標簽未填寫，或者無法清晰地展示校驗信息。來回切換標簽查看信息，也會影響效率，因此主要用于用戶有目的的配置行為中。 

          

          
    4、步驟表單 

          

          
    步驟表單是一種常見的表單拆分方式。通過節點將子表單串聯起來，形成一個完整的業務閉環。例如阿里云的云服務器訂單流程，或者一些開戶流程等。

          


          

          
     

          


          

          
    步驟表單有幾個特點： 

          

          
    1）過程串聯

          

          
    理論上來說，步驟表單有明顯的操作順序，用戶需要按照節點完成內容填寫，因此不會產生信息遺漏。當然也可以根據實際的業務場景，設置選填節點。但是總得來說，步驟表單更強調的是順序操作。

          

          
    2）業務引導性

          

          
    對于復雜業務，步驟表單可以將分散在不同頁面中的獨立業務串聯起來，在一定程度上具備新人教學功能，幫助用戶了解業務邏輯。減少用戶自定義操作時在不同頁面的跳轉，從而提供新人用戶的操作效率。例如系統配置向導類的步驟表單。

          

          
    3）逆向操作

          

          
    由于步驟表單存在正向和逆向操作，因此設計時還需要考慮清楚逆向操作的設計邏輯。例如：

          

          
    ? 當用戶想要修改前面步驟信息時，除了逐步返回，是否可以步驟條直接跨節點修改？ 

          

          
    ? 用戶中途退出表單后，重啟時是從第一步開始，還是直接從未填寫的步驟開始呢？ 

          

          
    ? 用戶如果完成了步驟條表單填寫，想要二次修改時，是用普通表單，還是仍然使用步驟表單形式呢？

          

          
    4）節點的平衡性

          

          
    步驟表單可以分拆信息，化整為零。但是信息節點也不能過多，否則同樣會影響用戶的操作效率。所以要減少不必要的流程節點。 

          

          
    最近在做設計時，發現步驟表單最后一步是內容預覽。通過用戶調研發現，部分用戶會謹慎地預覽前面４步填寫的內容。而另一部分用戶則認為，剛填寫了內容不需要預覽，強制預覽的設計并不友好。該如何平衡設計呢？

          

          
    最終我們選擇了將預覽節點取消，將預覽功能調整到第４步，采用「預覽」按鈕的形式。既滿足了部分用戶預覽的需要，另一部分用戶也可以不做預覽，直接提交申請。

          

          
    所以步驟表單過程中的節點具有一定的強制性，需要謹慎對待，保證節點的合理有效。 

          

          
    ▎03　隱藏，讓表單更加靈活 

          

          
    1、模塊隱藏 

          

          
    表單實際上是任務信息的集合，為了具有更高的適配性，內容通常是多種場景的集合。而場景有高頻、低頻區分，對于高頻信息需要優先展示，便于提高用戶的填寫效率；對于低頻場景，可以隱藏弱化展示，從而降低整個表單的復雜度。 

          

          
    例如我們常見的「高級配置」，通常在表單的底部默認收起展示。

          


          

          
     

          


          

          
    2、信息隱藏 

          

          
    復雜表單中信息會出現多級信息共存的場景。這種場景下，復雜表單默認展示當前選項對應的子內容，隱藏其他選項的內容，從而提高信息的指向性。 

          


          

          
     

          


          

          
    3、合理的組件形式 

          

          
    比較典型的就是單選和下拉選擇器如何選擇。有人為了強調效率，一味地追求單選按鈕平鋪展示，認為單選更加直觀，用戶不需要點擊下拉滾動查看備選項。但是用戶同樣需要逐個瀏覽選擇，反而增加了整個頁面的信息量。

          

          
    所以單選框更多用在備選項較少的場景，如果備選項較多，建議優先采用下拉選擇器，隱藏備選項。 

          

          
    ▎04　轉移，擴展表單的異步空間 

          

          
    1、信息轉移 

          

          
    在表單設計時，可以將部分二級信息轉移到彈窗、抽屜中，利用浮層空間拓展業務內容，根據用戶操作逐級加載出來。從而減少表單的信息量。 

          

          
    例如下圖中，沒有將「所有配送區域及運費」直接展示出來供用戶選擇，而是放在了彈窗中，表單中只呈現最后的選擇結果。既簡化了表單的內容，又讓選擇結果更加突出，方便用戶的查看和校驗。 

          


          

          
     

          


          

          
    2、記憶轉移 

          

          
    現在很多瀏覽器都增加了密碼存儲功能，減少用戶記憶成本。而在電商購物網站可以設定默認的收貨地址。系統自動讀取調用，從而減少用戶的輸入操作。

          

          
    3、行為轉移 

          

          
    現在越來越多的網站支持「手機短信驗證碼」免密注冊登錄方式，或者第三方登錄方式，或者手機端掃碼登錄。將原有的表單填寫轉變為系統行為，從而降低用戶的行為成本。 

          


          

          
     

          


          

          
    好了，以上就是我總結的表單設計的內容～ 

          

          
    重復一遍： 

          

          
    ? 刪除，實現表單輕量化 

          

          
    ? 組織，讓表單更加有層次 

          

          
    ? 隱藏，讓表單更加靈活 

          

          
    ? 轉移，擴展表單的異步空間
          

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

          
作者：騰訊ISUX團隊    來源：子牧先生
          

          

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

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

          
            
          
              
                評論(0)
                瀏覽(1661)
              
                          
          
          
          
                      
          
            
            
          MAC 解壓rar
          
            
          
               前端達人                                            
          
            
          
    
          
        本文轉載至 : Mac解壓壓縮 rar文件
    
          

          

          
    一、下載壓縮包到本地（Downloads文件夾下）

          

          
    RAR 5.60 for Mac OS Xwww.rarlab.com

          

          
    二、雙擊打開下載好的rarosx-5.6.0.tar.gz文件，會自動解壓出一個rar文件夾。由于默認下載到了Downloads目錄，所以在終端中執行

          

          cd ~/Downloads/rar 

            

    
          • 
        1
    
            • 


          

          

          
    三、需要執行兩個命令。一個是安裝rar壓縮命令，一個是安裝unrar解壓命令

          

          sudo install -c -o $USER rar /usr/local/bin/
sudo install -c -o $USER unrar /usr/local/bin 

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 


          

          

          
    四、走完上面三步，實際上我們mac已經能夠正常解壓和壓縮rar文件了。下面只介紹解壓命令

          

          
    1，解壓命令

          

          //解壓到當前目錄
unrar x a.rar //解壓到指定目錄
unrar x a.rar ~/Downloads //解壓文件到當前目錄
unrar e test.rar //查看rar中的文件
unrar l test.rar //更詳細?
unrar v test.rar //測試是否可以成功解壓
unrar t test.rar 

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 

    
          • 
        12
    
            • 


          

          

          
    2，壓縮命令

          

          // 將file文件壓縮到text.rar
rar a text.rar file
          



          

          

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

          

          
    
          
          

          

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

          

          
          

          

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

          
            
          
              
                評論(0)
                瀏覽(1214)
              
                          
          
          
          
                      
          
            
            
          前端基于DOM或者Canvas實現頁面水印
          
            
          
               前端達人                                            
          
            
          

          
    前言

          

          
    我們會看到很多頁面帶有水印，但是怎么實現呢？當然可以有多種實現方式，本文主要講解在vue項目中基于DOM或者Cavans實現水印效果，當然還有其他的實現方式，比如在原圖片的基礎上加上水印生成新的圖片，但是這需要后端處理。因為要在vue項目中使用，所以我使用自定義指令可以直接對掛載的dom實現水印效果。

          

          
    本文實現水印的項目環境為：vue + vite + ts

          

          
    一、vue自定義指令directive講解

          

          
    前面專門有一篇講解vue2.x與vue3.x中自定義指令詳解

          

          
    二、基于DOM的實現方式

          

          
    1. 思路整理

          

            
    
          • 
        獲取寬高
            
（1）獲取綁定元素的實際寬度clientWidth
            
（2）獲取綁定元素實際高度clientHeight
            
（3）獲取綁定元素的父元素parentElement
    
            • 
    
          • 
        創建盒子
            
（1）創建一個包裹水印圖片的盒子
            
（2）創建一個水印圖片的盒子
    
            • 
    
          • 
        設置盒子樣式
            
（1）包裹水印盒子寬高為綁定元素的寬高，即clientWidth、clientHeight
            
（2）水印盒子設置背景圖、旋轉度、寬高、點擊穿透
    
            • 
    
          • 
        設置創建的元素的位置
            
（1）水印盒子放到包裹水印圖片的盒子里 （包裹水印圖片的盒子包裹水?。?br style="box-sizing:border-box;outline:0px;user-select:text !important;overflow-wrap:break-word;" />
（2）包裹水印圖片的盒子放到被綁定元素之前
            
（3）被綁定元素放到裹水印圖片的盒子里（不然被綁定元素與包裹水印圖片的盒子層級同級）
    
            • 

          

          
    2.新建index.vue

          

          
    將水印的指令放到標簽上，設置標簽的寬高。水印可以放大div標簽上，也可以是img標簽上。注意：img才有onload方法，div標簽么有。

          

          <script setup lang="ts"> import { ref } from "vue"; </script> <template> <div class="index-content" > <div class="watermaker" v-watermark ></div> <!-- <img v-watermark style="width:400px;height:400px" src="../assets/vue.svg" alt=""> --> </div> </template> <style scoped> .watermaker { width: 400px; height: 400px; } .index-content{ width: 100%; height: 100%; } </style> 

          
    

          


            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 

    
          • 
        12
    
            • 

    
          • 
        13
    
            • 

    
          • 
        14
    
            • 

    
          • 
        15
    
            • 

    
          • 
        16
    
            • 

    
          • 
        17
    
            • 

    
          • 
        18
    
            • 

    
          • 
        19
    
            • 

    
          • 
        20
    
            • 

    
          • 
        21
    
            • 


          

          

          
    3. 新建directives文件

          

          
    在directives文件下創建waterMark.ts 文件，具體內容實現如下：

          

          import waterImg from "@/assets/vue.svg" const directives: any = { mounted(el: HTMLElement) { //如果el元素是img，則可以用el.onload將下面包裹 const { clientWidth, clientHeight, parentElement } = el; console.log(parentElement, 'parentElement') const waterMark: HTMLElement = document.createElement('div'); const waterBg: HTMLElement = document.createElement('div'); //設置waterMark的class和style waterMark.className = `water-mark`; waterMark.setAttribute('style', ` display: inline-block;
            overflow: hidden;
            position: relative;
            width: ${clientWidth}px; 
            height: ${clientHeight}px;`); // 創建waterBg的class和style waterBg.className = `water-mark-bg`;// 方便自定義展示結果 waterBg.setAttribute('style', ` position: absolute;
            pointer-events: none;`在這里插入代碼片` transform: rotate(45deg);
            width: 100%;
            height: 100%;
            opacity: 0.2;
            background-image: url(${waterImg}); 
            background-repeat: repeat; `); // 水印元素waterBg放到waterMark元素中 waterMark.appendChild(waterBg); //waterMark插入到el之前，即插入到綁定元素之前 parentElement?.insertBefore(waterMark, el); // 綁定元素移入到包裹水印的盒子 waterMark.appendChild(el); } } export default { name: 'watermark', directives } 

          
    

          


            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 

    
          • 
        12
    
            • 

    
          • 
        13
    
            • 

    
          • 
        14
    
            • 

    
          • 
        15
    
            • 

    
          • 
        16
    
            • 

    
          • 
        17
    
            • 

    
          • 
        18
    
            • 

    
          • 
        19
    
            • 

    
          • 
        20
    
            • 

    
          • 
        21
    
            • 

    
          • 
        22
    
            • 

    
          • 
        23
    
            • 

    
          • 
        24
    
            • 

    
          • 
        25
    
            • 

    
          • 
        26
    
            • 

    
          • 
        27
    
            • 

    
          • 
        28
    
            • 

    
          • 
        29
    
            • 

    
          • 
        30
    
            • 

    
          • 
        31
    
            • 

    
          • 
        32
    
            • 

    
          • 
        33
    
            • 

    
          • 
        34
    
            • 

    
          • 
        35
    
            • 

    
          • 
        36
    
            • 

    
          • 
        37
    
            • 

    
          • 
        38
    
            • 

    
          • 
        39
    
            • 

    
          • 
        40
    
            • 

    
          • 
        41
    
            • 

    
          • 
        42
    
            • 

    
          • 
        43
    
            • 

    
          • 
        44
    
            • 


          

          

          
    4. 在directives文件下創建 index.ts文件

          

          import type { App } from 'vue' import watermark from './waterMark' export default function installDirective(app: App) { app.directive(watermark.name, watermark.directives); } 

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 


          

          

          
    5. 在main.ts中全局引入

          

          import { createApp } from 'vue' import App from './App.vue' import directives from './directives' const app = createApp(App); app.use(directives); app.mount('#app'); 

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 


          

          

          
    6. 缺點

          

            
    
          • 
        直接刪除水印元素時，頁面中的水印直接就被刪除了，當然我們可以用MutationObserver對水印元素進行監聽，刪除時，我們再立即生成一個水印元素就可以了，具體方面在下面講解。
    
            • 
    
          • 
        如果原始元素本身存在 css 定位等規則，會導致整體布局效果出現影響，因為上面實現排除了原始元素沒有定位，所以實現方式不是很嚴謹，本文具體實現實現如下：
        
              
            
            • 
                創建一個水印的容器設置為 position：relative
            
              • 
            
            • 
                將原有的節點放入到這個容器中
            
              • 
            
            • 
                同時創建一個帶有水印的 dom 設置為position：absolute ，實現這個水印元素覆蓋到原始元素的上層，以實現水印的效果。
            
              • 
        
            
    
            • 

          

          
    三、基于Canvas和MutationObserver的實現方式

          

          
    1. 思路整理

          

            
    
          • 
        配置水印的具體樣式（大小，旋轉角度，文字填充）
    
            • 
    
          • 
        設置水?。ㄎ恢茫?    
            • 
    
          • 
        監聽dom變化（防止水印刪除后頁面不再展示水?。?    
            • 

          

          
    2. 生成水印

          

          
    通過將圖片繪制在cavans中，然后通過cavans的toDataURL方法，將圖片轉為base64編碼。

          

          // 全局保存 canvas 和 div ，避免重復創建（單例模式） const globalCanvas = null; const globalWaterMark = null; // 獲取 toDataURL 的結果 const getDataUrl = ( // font = "16px normal", // fillStyle = "rgba(180, 180, 180, 0.3)", // textAlign, // textBaseline, // text = "請勿外傳", ) => { const rotate = -10; const canvas = globalCanvas || document.createElement("canvas"); const ctx = canvas.getContext("2d"); // 獲取畫布上下文 ctx.rotate((rotate * Math.PI) / 180); ctx.font = "16px normal"; ctx.fillStyle = "rgba(180, 180, 180, 0.3)"; ctx.textAlign = "left"; ctx.textBaseline = "middle"; ctx.fillText('請勿外傳', canvas.width / 3, canvas.height / 2); return canvas.toDataURL("image/png"); }; 

          
    

          


            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 

    
          • 
        12
    
            • 

    
          • 
        13
    
            • 

    
          • 
        14
    
            • 

    
          • 
        15
    
            • 

    
          • 
        16
    
            • 

    
          • 
        17
    
            • 

    
          • 
        18
    
            • 

    
          • 
        19
    
            • 

    
          • 
        20
    
            • 

    
          • 
        21
    
            • 

    
          • 
        22
    
            • 

    
          • 
        23
    
            • 

    
          • 
        24
    
            • 


          

          

          
    3. 使用MutationObserver監聽水印

          

          
    使用MutationObserver監聽dom變化，MutationObserver詳細用法之前已經講過了，詳細可見作為前端你還不懂MutationObserver？那Out了
          
具體監聽邏輯如下：

          

            
    
          • 
        1.直接刪除dom
            
（1）先獲取設置水印的dom
            
（2）監聽到被刪除元素的dom
            
（3）如果他兩相等的話就停止觀察，初始化（設置水印+啟動監控）
    
            • 
    
          • 
        2.刪除style中的屬性
            
（1）判斷刪除的是否是標簽的屬性 （type === “attributes”)
            
（2）判斷刪除的標簽屬性是否是在設置水印的標簽上
            
（3）判斷修改過的style和之前的style對比，不等的話，重新賦值
    
            • 

          

          // watermark 樣式 let style = ` display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: repeat;
pointer-events: none;`; //設置水印 const setWaterMark = (el: HTMLElement, binding: any) => { const { parentElement } = el; // 獲取對應的 canvas 畫布相關的 base64 url const url = getDataUrl(binding); // 創建 waterMark 父元素 const waterMark = globalWaterMark || document.createElement("div"); waterMark.className = `water-mark`; // 方便自定義展示結果 style = `${style}background-image: url(${url});`; waterMark.setAttribute("style", style); // 將對應圖片的父容器作為定位元素 parentElement.setAttribute("style", "position: relative;"); // 將圖片元素移動到 waterMark 中 parentElement.appendChild(waterMark); }; // 監聽 DOM 變化 const createObserver = (el: HTMLElement, binding: any) => { console.log(el, 'el') console.log(style, 'style') // console.log(el.parentElement.querySelector('.water-mark'),'el.parentElement') const waterMarkEl = el.parentElement.querySelector(".water-mark"); const observer = new MutationObserver((mutationsList) => { console.log(mutationsList, 'mutationsList') if (mutationsList.length) { const { removedNodes, type, target } = mutationsList[0]; const currStyle = waterMarkEl.getAttribute("style"); // console.log(currStyle, 'currStyle') // 證明被刪除了 //   （1）直接刪除dom //   1.先獲取設置水印的dom //   2.監聽到被刪除元素的dom //   如果他兩相等的話就停止觀察，初始化（設置水印+啟動監控） //   (2) 刪除style中的屬性 //  1 判斷刪除的是否是標簽的屬性 （type === "attributes") //  2.判斷刪除的標簽屬性是否是在設置水印的標簽上 //  3.判斷修改過的style和之前的style對比，不等的話，重新賦值 if (removedNodes[0] === waterMarkEl) { console.log(removedNodes[0]) // 停止觀察。調用該方法后，DOM 再發生變動，也不會觸發觀察器。 observer.disconnect(); //初始化（設置水印，啟動監控） init(el, binding); } else if ( type === "attributes" && target === waterMarkEl && currStyle !== style ) { console.log(currStyle, 'currStyle') console.log(style, 'style') waterMarkEl.setAttribute("style", style); } } }); observer.observe(el.parentElement, { childList: true, attributes: true, subtree: true, }); }; // 初始化 const init = (el: HTMLElement, binding: any = {}) => { // 設置水印 setWaterMark(el, binding.value); // 啟動監控 createObserver(el, binding.value); }; const directives: any = { mounted(el: HTMLElement, binding: any) { //注意img有onload的方法，如果自定義指令注冊在html標簽的話，只需要init(el, binding.value) el.onload = init.bind(null, el, binding.value); }, }; 

          
    

          


            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 

    
          • 
        12
    
            • 

    
          • 
        13
    
            • 

    
          • 
        14
    
            • 

    
          • 
        15
    
            • 

    
          • 
        16
    
            • 

    
          • 
        17
    
            • 

    
          • 
        18
    
            • 

    
          • 
        19
    
            • 

    
          • 
        20
    
            • 

    
          • 
        21
    
            • 

    
          • 
        22
    
            • 

    
          • 
        23
    
            • 

    
          • 
        24
    
            • 

    
          • 
        25
    
            • 

    
          • 
        26
    
            • 

    
          • 
        27
    
            • 

    
          • 
        28
    
            • 

    
          • 
        29
    
            • 

    
          • 
        30
    
            • 

    
          • 
        31
    
            • 

    
          • 
        32
    
            • 

    
          • 
        33
    
            • 

    
          • 
        34
    
            • 

    
          • 
        35
    
            • 

    
          • 
        36
    
            • 

    
          • 
        37
    
            • 

    
          • 
        38
    
            • 

    
          • 
        39
    
            • 

    
          • 
        40
    
            • 

    
          • 
        41
    
            • 

    
          • 
        42
    
            • 

    
          • 
        43
    
            • 

    
          • 
        44
    
            • 

    
          • 
        45
    
            • 

    
          • 
        46
    
            • 

    
          • 
        47
    
            • 

    
          • 
        48
    
            • 

    
          • 
        49
    
            • 

    
          • 
        50
    
            • 

    
          • 
        51
    
            • 

    
          • 
        52
    
            • 

    
          • 
        53
    
            • 

    
          • 
        54
    
            • 

    
          • 
        55
    
            • 

    
          • 
        56
    
            • 

    
          • 
        57
    
            • 

    
          • 
        58
    
            • 

    
          • 
        59
    
            • 

    
          • 
        60
    
            • 

    
          • 
        61
    
            • 

    
          • 
        62
    
            • 

    
          • 
        63
    
            • 

    
          • 
        64
    
            • 

    
          • 
        65
    
            • 

    
          • 
        66
    
            • 

    
          • 
        67
    
            • 

    
          • 
        68
    
            • 

    
          • 
        69
    
            • 

    
          • 
        70
    
            • 

    
          • 
        71
    
            • 

    
          • 
        72
    
            • 

    
          • 
        73
    
            • 

    
          • 
        74
    
            • 

    
          • 
        75
    
            • 

    
          • 
        76
    
            • 

    
          • 
        77
    
            • 

    
          • 
        78
    
            • 

    
          • 
        79
    
            • 

    
          • 
        80
    
            • 

    
          • 
        81
    
            • 

    
          • 
        82
    
            • 

    
          • 
        83
    
            • 

    
          • 
        84
    
            • 

    
          • 
        85
    
            • 

    
          • 
        86
    
            • 

    
          • 
        87
    
            • 


          

          

          
    四、成果展示

          

          
    刪除水印標簽依然還在，除非刪除水印注冊的標簽才能刪除水印，但是這樣做毫無意義，因為這樣做內容也會全部刪除掉。

          

          
    在這里插入圖片描述

          

          
    附：文中用到的js基礎知識

          

          
    toDataURL用法

          

          
    toDataURL(type, encoderOptions)，接收兩個參數：

          

            
    
          • 
        type：圖片類型，比如image/png、image/jpeg、image/webp等等，默認為image/png格式
    
            • 
    
          • 
        encoderOptions：圖片質量的取值范圍（0-1），默認值為0.92，當超出界限按默認值0.92
    
            • 

          



          


          

          

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

          

          
    
          
          

          

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

          

          
          

          

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

          
            
          
              
                評論(0)
                瀏覽(1306)
              
                          
          
          
          
                      
          
            
            
          用「用戶體驗五要素」整理「Live Activities設計規范」
          
            
          
               ui設計分享達人                                            
          
            
          
    
          
        眾所周知，「用戶體驗五要素」出自Jesse James Garrett 的《用戶體驗要素》一書：戰略層、范圍層、結構層、框架層、表現層。
          
產品設計者和開發者的角度可以對應理解為：為什么做、做到什么程度、這些東西如何組成、規劃用戶操作行為、如何呈現這些東西。
    
          

          
    
          
        
    
          

          
    
          
        「Live Activities設計規范」由蘋果出品，原文為英文，上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個人對其內容的敘述方式存在一點意見。為了更好的記住&理解「Live Activities設計規范」，使用比較熟悉的「用戶體驗五要素」對內容進行整理。
    
          
    
          
        1. 戰略層——為什么做
    
          
    
          
        原文提供的Live Activity定義如下：
          
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
          
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
    
          
    
          
        從原文可以提煉出Live Activity顯示特點：
    
          
    
          
        1. 內容是頻繁更新的、有進度/狀態顯示的、用戶關心的。
    
          
    
          
        2. 內容的信息量是一眼就能看完的程度。
    
          
    
          
        
          
但上述仍是表象，并非實質，接下來思考這幾個問題：
    
          
    
          
        1. 為什么顯示的是進度/狀態頻繁更新的內容？
    
          
    
          
        2. 為什么要強調用戶關心的？
    
          
    
          
        3. 為什么信息量是一眼就能看完的程度？
    
          
    
          
        沒有Live Activity時，頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋，且隨著各種APP的頻繁使用，用戶獲取關鍵信息的效率和通過push打開APP的次數反而在下降。
    
          
    
          
        
          
進度/狀態頻繁更新的內容，說明每個狀態存在的時間短，如果被覆蓋/忽略，同一狀態就不再復現，用戶所關心的，或APP所希望用戶關心的，就看不到了。比如：什么時候取外賣、待付款、上傳成功等等。
    
          
    
          
        
          
當下我們所處的時代是信息泛濫的時代，需要對信息作精簡，但用戶的操作是可以多條線進行的，比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時候寫作。
    
          
    
          
        
          
信息內容和量是官網一直在強調的，需要精簡，只展示用戶需要的，基本達到一眼看完的程度，目的就是知道變化的是什么，當前狀態是什么。
    
          
    
          
        分析了這么多，大膽推測一下Live Activity的設計初衷是：快&準確&輕。而終極目的是打動用戶，形成好體驗，進而推動口碑和銷售；為各APP提供新的通知形式，互惠互利。當然Live Activity在一定程度上也彌補了硬件上的缺憾。
    
          

          
    
          
        
    
          

          
    
          
        2. 范圍層——做到什么程度
    
          
    
          
        關于這個層次相當于規定功能范圍&信息邊界限制，就是什么要，什么不能要。這部分的信息官網給出許多，在此將其分類梳理如下，為避免大家不好查找官網/譯文對應出處，在句未已標注。
    
          
    
          
        1）硬性限制
    
          
    
          
        1. 僅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平臺注意事項）
    
          
    
          
        2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。（源自：什么是Live Activity-鎖屏）
    
          
    
          
        3. 支持用戶手動清除鎖屏狀態下的Live Activity。（源自：實際操作）
    
          
    
          
        4. 支持用戶直接關閉對應APP的Live Activity。（源自：最佳實踐方式第3/c條）
    
          
    
          
        5. 支持Live Activity自動開始&結束。（源自：最佳實踐方式第6/f條）
    
          
    
          
        6. 限制跟蹤活動/狀態時長不超過8小時。（源自：最佳實踐方式第1/a條）
    
          
    
          
        7. 限制活動/進程結束后展示時長不超過4小時。（源自：最佳實踐方式第8/h條）
    
          
    
          
        8. 支持更改背景顏色&不透明度。（源自：設計有用的Live Activity第5/e條）
    
          
    
          
        9. 限制內容布局。（源自：設計有用的Live Activity第5/e條）
    
          
    
          
        10. 限制不同設備的展示尺寸。（源自：規范）
    
          
    
          
        2）非硬性限制
    
          
    
          
        1. 避免在Live Activity中顯示敏感信息。（源自：最佳實踐方式第4/d條）
    
          
    
          
        2. 避免在Live Activity中顯示廣告和促銷活動。（源自：最佳實踐方式第5/e條）
    
          
    
          
        3. 只提供正在進行的任務/事件的關鍵摘要。（源自：最佳實踐方式第2/b條）
    
          
    
          
        4. 在任務/活動結束前，給用戶提供關閉Live Activity按鈕。（源自：最佳實踐方式第6/f條）
    
          
    
          
        5. 點擊Live Activity直接定位到對應頁面，無需用戶二次導航。（源自：最佳實踐方式第7/g條）
    
          
    
          
        6. 考慮在活動結束后，鎖屏上在合理時段后自動刪除Live Activity。（源自：最佳實踐方式第8/g條）
    
          
    
          
        3. 結構層——這些東西如何組成？
    
          
    
          
        （個人猜測）由于是提供一個展示區域，且展示區域有限，所以對于層級架構，一級展示什么，二級展示什么，各階段展示什么，這些都沒有做明確規定&建議。各家APP可以根據自身實際情況進行設計。
    
          
    
          
        4. 框架層——規劃用戶操作行為
    
          
    
          
        通過Live Activity的展示形式，可以總結為2點：吸引、查看（摘要&詳情）。
    
          
    
          
        1）吸引
    
          
    
          
        1. 一般是在原深感攝像頭兩側展示（電話會直接展示擴展型），分為緊湊型和最小化。
    
          
    
          
        2. 緊湊型在僅有一個活動/事件的時候展示，雖被原深感攝像頭分割兩端，但僅作為一條信息展示，為了視覺上的統一，這里的顏色不支持開發設置，使用的是系統默認色值。
    
          
    
          
        3. 最小化在存在多個活動的時候展現，左側和原深感攝像頭粘連，右側獨立成島。
    
          
    
          
        4. 不管是緊湊型，還是最小化，都可以通過點擊原深感攝像頭區域，進入APP內頁，或者長按喚出擴展型。
    
          

          
    
          
        
    
          

          
    
          
        2）查看
    
          
    
          
        1. 進入內頁的查看基本就是各家顯神通了，這里主要講擴展型和鎖屏。
    
          
    
          
        2. 原則上是不支持在擴展型和鎖屏做復雜操作的，基本點擊是進入APP。
    
          
    
          
        3. 擴展型是用戶長按緊湊型/最小化喚起的展示區域，內容是可以自定義的，當然官方也給了相應的建議，具體如下。內容信息種類多的可以采用這種信息左中右排布，底部預留大按鈕。內容信息少的可以采用左內容右操作的方式。
    
          

          
    
          
        
    
          

          
    
          
        4. 根據一致性原則，鎖屏展示的布局框架應該與擴展型差不多，同樣可以點擊打開APP。只是在鎖屏狀態如果有多個任務同時進行，是會全部展示的，所以要注意品牌的傳遞，避免用戶混淆服務方。
    
          

          
    
          
        
    
          

          
    
          
        5. 表現層——如何呈現這些東西
    
          
    
          
        對于如何呈現這些東西，蘋果還是寫了很多建議，確保視覺上的一致性和美觀。
    
          
    
          
        1）顏色
    
          
    
          
        1. 緊湊型狀態下，為了保證兩側信息的連貫，除了語句閱讀連貫，還需要在圖形和顏色上具有一致性，視覺上連貫。
    
          
    
          
        2. 鎖屏狀態下的背景是可以自定義顏色、圖像、不透明度的，當然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。
    
          
    
          
        3. 設計師不僅要考慮最佳狀態，還有深色&淺色模式下的，以及不同環境光、設備亮度下的顯示。還有一點很容易忽視的，就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取，還需要考慮美感問題。
    
          
    
          
        2）間距布局
    
          
    
          
        1. 緊湊型和擴展型之間的布局要保持一致，兩者間的變化過渡效果是可以預測的。
    
          
    
          
        2. 一般來說，擴展型和鎖屏狀態下的信息間標準間距是20pt。
    
          
    
          
        3. 在某些情況下，例如圖形和按鈕，您可能需要使用更緊湊的邊距，以避免擠滿邊緣或形成混亂的外觀。
    
          
    
          
        3）圓角
    
          
    
          
        1. 內容和Live Activity邊緣之間的邊距需要保持一致，請遵循SwiftUI規則。
    
          
    
          
        1內容和Live Activity邊緣之間的邊距需要保持一致，，發現以圓角邊界為測距點得到的間距關系較為舒適。即：圓形/大致為圓形的圖形保持上下，3. 以及左側或者右側間距一致即可；方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個圖形圓角需要相對統一，才能確保間距的一致性。
    
          

          
    
          
        
    
          

          
    
          
        4）尺寸
    
          
    
          
        需要適應不同機型的尺寸。具體的尺寸規范如下。
    
          
    
          
        a. 靈動島
    
          
    
          
        動態島使用44個點的角半徑，其圓角形狀與原深感攝像頭相匹配。
    
          

          
    
          
        
    
          

          
    
          
        b. Live Activity大小
    
          
    
          
        下表中列出的所有值均以pt為單位。
          
ps：左側為寬度，右側為高度。
    
          

          
    
          
        
    
          

          
    
          
        以上就是整理分析的全部。
    
          
    
          
        在整理分析過程中加強了對「用戶體驗5要素」各個層劃分的理解，也對Live Activity在各個層次上的要求更加明確。
    
          

          
作者：Viola_1241
          
鏈接：https://www.zcool.com.cn/article/ZMTUxMTIzNg==.html
          
來源：站酷
          
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
          

          
作者：Viola_1241     來源：站酷
          

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

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

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

          
            
          
              
                評論(0)
                瀏覽(1904)
              
                          
          
          
          
                      
          
            
            
          閱讀可視化1：《交互設計沉思錄》第一篇
          
            
          
               ui設計分享達人                                            
          
            
          
    
          
        不太愛看書，看了老忘，就很容易失去信心，垂頭喪氣、一蹶不振。
    
          
    
          
        比較喜歡做圖，把信息間的邏輯以圖示化的方式表現出來，能加強理解，后期回顧也會比較舒心。
    
          
    
          
        所以就有了這個系列——閱讀圖示化。
    
          
    
          
        可能會出得很慢，畫圖比較費時間，想著怎么展示信息間的邏輯也很費時間。
    
          
    
          
        基本是按著小節一塊內容對應單圖/多圖。
    
          
    
          
        基本一張圖是一個完整的知識點。
    
          

          
    
          
         
    
          

          

          
    
          
         
    
          

          

          
    
          
         
    
          

          

          
    
          
         
    
          

          

          
    
          
         
    
          

          

          
    
          
         
    
          

          

          
    
          
         
    
          

          

          
    
          
         
    
          

          

          
    
          
         
    
          

          

          
    
          
         
    
          

          

          
    
          
         
    
          

          

          
    
          
         
    
          

          

          
    
          
         
    
          

          

          
    
          
         
    
          

          
作者：Viola_1241
          
鏈接：https://www.zcool.com.cn/article/ZMTUxNDE4MA==.html
          
來源：站酷
          
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
          

          
作者：Viola_1241     來源：站酷
          

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

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

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

          
            
          
              
                評論(0)
                瀏覽(1087)
              
                          
          
          
          
                      
          
            
            
          經典案例研究：推動業務發展，利用B端設計挖掘潛在價值
          
            
          
               ui設計分享達人                                            
          
            
          
    
          
        當今提到促進業務增長，尤其是有關互聯網行業，總是繞不開B端設計。那么今天我們來挖一挖B端設計到底牛在哪里。 
    
          
    
          
        1、什么是B端設計 
    
          
    
          
        B端設計是指針對企業的終端用戶的產品設計，包括適用于消費者、企業、政府、行業等等市場的協同、全方位的客戶體驗設計，例如產品UI/UX設計、信息可視化設計等等。B端設計是提供終端用戶新的解決方案，注重以客戶的需求為導向，通過數據分析、可視化、流程優化等手段來進行產品設計。 
    
          
    
          
        在一個產品設計中，要考慮到用戶的體驗，UI/UX有著至關重要的作用，它能夠把產品從用戶的角度出發，將用戶直接引入到設計之中，使用戶步入終端，真正成為使用者。 
    
          
    
          
        此外，B端設計還要注重對業務流程的優化，例如在訂單管理系統的設計中，需要把客戶的需求分析清楚，盡可能用最少的步驟幫助客戶快速進行訂單操作，增加操作效率；同時，也需要考慮到如何將整個管理系統融入到業務流程之中，使其成為一個可持續發展的解決方案。 
    
          
    
          
        此外，B端設計還需要考慮系統安全性和可用性。系統安全性指的是在設計過程中重視數據安全，例如考慮不同用戶的權限，避免未經授權的訪問以及防止誤操作等；而系統的可用性則指的是系統操作的一致性，即如何在使用中滿足客戶的需求，在系統功能上保障系統的完備性和易用性，為用戶提供更方便的操作體驗。 
    
          
    
          
        2、B端設計的組成部分 
    
          
    
          
        正確的B端設計應包括：用戶界面設計、業務流程的優化、系統安全性以及可用性的考慮等。 
    
          
    
          
        用戶界面設計的目的在于提供簡單易用的用戶界面，以滿足客戶需求，提高用戶體驗。 
    
          
    
          
        業務流程優化則是確保系統能夠有效地協調用戶間的溝通，使用戶流程更加高效、可靠。 
    
          
    
          
        系統安全性考慮需要重視數據安全，增加對不同用戶權限的考慮，以避免未經授權的訪問以及誤操作。 
    
          
    
          
        而系統可用性方面，則需要系統操作一致性，保障功能的完整性和易用性，使用戶操作更加便捷。 
    
          
    
          
        用戶界面設計還需要考慮跨瀏覽器的兼容性，以確保用戶能夠在不同的終端上獲得有效的使用體驗。此外，對于功能性更強的應用，還需要考慮響應速度、網絡請求數和業務性能等方面的優化，以便在處理大量的信息時能夠有效地完成任務。 
    
          
    
          
        對于不同的用戶群體，應當提供相應的交互界面設計，例如考慮弱智使用者和視覺障礙者，以及嬰幼兒等特殊群體。此外，可以通過支持多種語言、國家文化差異和地域語言來優化用戶體驗。 
    
          
    
          
        3、如何使用B端設計原則來推動業務發展 
    
          
    
          
        B端設計原則可以幫助企業更好的把握商業機遇，推動業務發展。 
    
          
    
          
        首先，應當按照核心業務找出客戶需求，深入挖掘，從客戶視角出發，明確目標。 
    
          
    
          
        其次，要強化設計意識，注重交互性，利用技術手段和平臺將功能元件組合在一起，以便更好地解決客戶面臨的問題和滿足客戶的需求。 
    
          
    
          
        最后，對產品的功能、使用效果和用戶體驗進行定期的測試評估，根據反饋進行變更和優化，以滿足客戶的需求。 
    
          
    
          
        4、如何利用B端設計實現潛在的價值 
    
          
    
          
        為實現B端設計的潛在價值，可以采用多重方法，比如從創新的角度增加產品的附加值，加強功能和服務體驗，提升網站可用性，優化頁面布局，提高頁面加載速度等。 
    
          
    
          
        另外，還可以改進客戶體驗，通過可視化或語音技術提升網站和移動應用的交互性，以便讓客戶更容易獲取想要的信息和服務。 
    
          
    
          
        此外，可以加強產品的社會化和移動性，以便更好地滿足客戶的需求，從而獲得更多的潛在價值。 
    
          
    
          
        對于B端設計來說，還要考慮技術層面的因素。 
    
          
    
          
        首先，應根據客戶使用情況進行系統優化，以提高系統效率。 
    
          
    
          
        其次，要重視人機交互技術，盡可能提供給用戶更好的界面體驗，并利用智能技術提升用戶體驗。 
    
          
    
          
        此外，應結合實際情況，采用合適的網絡技術和安全技術，提升網站的安全性。 
    
          
    
          
        最后，還要將設計與市場營銷結合起來，通過有效的營銷手段，提高客戶購買意愿，以獲得更多的潛在價值。 
    
          
    
          
        B端設計要考慮的技術層面因素有：系統優化、人機交互技術、網絡技術和安全技術以及營銷手段。這些都是為了能夠更好地滿足客戶的需求，并獲得更大的價值。 
    
          
    
          
        5、優秀的B端設計案例，以及借鑒價值 
    
          
    
          
        首先，淘寶的B端設計把價值的提升放在了首位。它通過實時監測用戶行為來分析用戶習慣，以實現實時調整，提升客戶體驗。此外，淘寶的營銷手段也讓它的業務獲得了極大的成功。 
    
          
    
          
        另外，微信也是一個優秀的B端設計案例。它引入了更多的人機交互技術，以有效溝通用戶，同時也提供更安全、便捷的服務，大大提升了用戶體驗，獲得了廣泛的應用。 
    
          
    
          
        總之，優秀的B端設計不僅能優化用戶體驗，還可以帶來更多的商業價值。 
    
          
    
          
        從用戶體驗角度來看，優秀的B端設計應包括系統優化、人機交互技術、網絡技術和安全技術，這樣可以給用戶提供更流暢的體驗，更快的響應速度和更好的安全保障。 
    
          
    
          
        此外，B端設計還應該擁有一套完整和靈活的營銷手段，幫助企業獲得更多的客戶價值，以提升品牌影響力和競爭力。 
    
          
    
          
        要做好B端設計，一個重要的方面是把用戶群體的心理需求和行為習慣結合起來，設計出更具吸引力的產品界面。例如，可以通過實時調整產品配置、設定營銷活動等手段來滿足不同用戶群體的需求。 
    
          
    
          
        另外，為了提升用戶體驗，應該使用更智能化的人工智能（AI）技術，幫助企業更好地分析用戶行為，從而更有針對性地進行產品調整。 
    
          
    
          
        總而言之，B端設計的成功關鍵在于結合用戶群體的心理需求和行為習慣，并利用智能化的AI技術對用戶行為進行分析，只有這樣才能設計出更具吸引力的產品界面，滿足不同用戶群體的需求，并提升用戶體驗。 
    
          
    
          
        在企業開發B端產品之前，應該先進行大量的市場調研，以便弄清楚用戶的心理需求和行為習慣，這也是設計成功的前提。在制定設計思路時，應該結合用戶需求和行為習慣，并加入智能化AI技術，以有效調整產品界面，使其更具吸引力。在可行性研究階段，應該采用多種方法，以測試產品整體性能，包括安全性、可靠性等，確保系統可以正常運行，避免潛在風險的發生，為用戶的體驗提供完善的保障。市場調研是設計成功的先決條件。除了市場調研，企業還應該采用新穎的營銷策略，以拓展客戶群，豐富產品服務，提升用戶體驗，實現B端設計成功。 
    
          

          
作者：和阿莫伊
          
來源：站酷
          
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
          

          
作者：和阿莫伊     來源：站酷
          

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

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

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

          
            
          
              
                評論(0)
                瀏覽(1514)
              
                          
          
          
          
                      
          
            
            
          淺析：設計趨勢之開源設計
          
            
          
               ui設計分享達人                                            
          
            
          
    
          
        什么是開源設計（Open Source Design）
    
          
    
          
        在講開源設計前，我們或許可以先講講開源一詞是指什么。
    
          
    
          
        開源全稱開放源代碼，開源軟件最大的特點是開放，也就是任何人都可以得到軟件的源代碼，加以修改學習，甚至重新發放，當然是在版權限制范圍之內。雖然開源一詞最初是為軟件開發而創造的，但現如今開源所涉及的領域也極其廣闊，并不只是包括軟件領域，如醫藥領域的藥物開發開源、文化領域的書籍到期開源等等所以開源設計已包含了更廣泛的含義，它包括了由任何人或者團隊自由共享、協作的設計方案、項目、產品。
    
          
    
          
        我們來看幾個大型開源的設計了解一下~
    
          
    
          
        開源設計資源舉例
    
          
    
          
        Ant Design 
    
          
    
          
        阿里的開源系統后臺組件庫
    
          
    
          
        https://ant.design
    
          
    
          
         
    
          
    
          
        ECharts 
    
          
    
          
        百度推出的開源圖表
    
          
    
          
        https://echarts.apache.org/
    
          
    
          
         
    
          
    
          
        Unsplash  
    
          
    
          
        全球知名圖片開源平臺 
    
          
    
          
        https://unsplash.com
    
          
    
          
         
    
          
    
          
        所以我們不難發現開源設計都有以下特點： 
    
          
    
          
        免費（大部分是）：開源設計的一個關鍵要素是它們通常（但不總是?。┟赓M。這是一個重要因素，因為閉源設計通常需要花費不菲的價格或者冒著侵犯版權的風險去使用。 
    
          
    
          
        思想碰撞：更多的設計師或者創意愛好者共同為一個創意提出自己的見解和再設計。
    
          

          
    
          
        設計開源領域廣闊：設計開源領域也幾乎涵蓋了所有的設計和創意領域如平面設計、三維設計、用戶體驗設計、環境設計、建筑設計、服裝設計、插畫、動畫設計等等 
    
          
    
          
        但是許多人可能會有一個疑問，開源設計和以往的素材網站或者源文件售賣網站有什么區別呢？ 
    
          
    
          
        在我看來，開源網站與傳統售賣設計資源的網站最大的區別是開放與共建，以figma的社區為例，作者發布作品后，任何人都可以對其作品進行redesign甚至remix，這極大的提高了設計師的興趣，每個人都希望自己的作品能被他人看到，也希望自己的創意能與他人的創意進行更好的結合，這是一個多么美好的場景。而傳統網站只是冷冰冰的展示文件售賣資源，缺少了設計中的靈魂。 
    
          
    
          
        那說了這么多，開源設計到底有哪些優勢呢？
    
          
    
          
        開源設計的優勢 
    
          
    
          
        提升設計效率：設計師不應花費時間去解決別人已經解決的問題，比如當我設計一個新項目時，無需從零開始設計系統組件，可以直接使用Ant Design、Ant Mobile Design等現有組件庫。
    
          

          
    
          
        增加學習機會：通過開源社區，設計人員可以從其他人所做的項目中學習，并與專業人員交流經驗。 
    
          
    
          
        提高設計質量：設計師自己看本人作品時，往往是身在其中不知如何下手，而將作品發布到更廣泛的社區有助于設計師獲得有價值的反饋以改進他們的作品。 
    
          
    
          
        提升品牌價值：對設計開源后，公司品牌能在某些領域內獲得傳播，提升品牌價值。并且在招募人才時也能成為有吸引力的一項條件。 
    
          
    
          
        提升個人價值：一個設計師想要提升個人價值和影響力，可以用開源作品來在行業內獲得一定口碑，甚至直接將用戶流量轉化為訂單，或許是更簡單且容易的事情。 
    
          
    
          
        從這些優勢中不難發現，在開源生態中，我們的作品不再是一座孤島，通過互聯網，我們的作品可以和任何人進行鏈接并且產生共鳴，提升品牌和個人的價值，所以每個人都值得感受開源的美好。 
    
          
    
          
        但開源的同時不可避免的會帶來許多新的問題和挑戰，讓我們一起來看一下。
    
          
    
          
        開源設計帶來了哪些挑戰 
    
          
    
          
        知識產權問題：在開源社區中，設計師可能不清楚其創作的知識產權。因此，他們可能會不自知地侵犯其他設計師的知識產權。 
    
          
    
          
        設計門檻問題：設計開源意味著設計師的門檻變低，任何人都可以隨意使用開源的設計項目，導致設計師不再愿意花心血創作。 
    
          
    
          
        設計師競爭力下降：開源設計意味著普通的設計內容已不需要單獨的設計師來完成，頂尖設計師的機會會更多，而普通設計師的競爭力會明顯下降。 
    
          
    
          
        隨著這些挑戰的來臨，如何更好的面對設計領域的開源是值得深思的問題，既要保護設計師的自身利益，也要讓設計行業在開放、共享的環境下擁抱變革，所以在未來的道路上，我們每個人都可以嘗試用自身的方法去探索未來，讓每個人都能成為時代浪潮中的一朵浪花。
    
          

          
作者：芝麻侃設計
          
來源：站酷
          
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
          

          
作者：芝麻侃設計     來源：站酷
          

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

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

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

          
            
          
              
                評論(0)
                瀏覽(1271)
              
                          
          
          
          
              
          

  

          


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

          

          



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