[發明專利]基于圖片識別的骨架屏生成方法、裝置、設備及存儲介質

在審

• 申請號: 202011594807.4
• 申請日: 2020-12-29
• 公開（公告）號: CN112633270A
• 公開（公告）日: 2021-04-09
• 發明（設計）人: 李世華;杜亮
• 申請（專利權）人: 平安銀行股份有限公司
• 主分類號: G06K9/20
• 分類號: G06K9/20;G06K9/32
• 代理公司: 北京鴻元知識產權代理有限公司 11327
• 代理人: 董永輝;曹素云

本發明涉及人工智能技術領域，提供一種基于圖片識別的骨架屏生成方法、裝置、設備及存儲介質。其中，方法包括：獲取加載有真實數據的頁面所對應的截圖；對截圖進行OCR識別，得到頁面元素對應的區域坐標信息；根據區域坐標信息，自動生成骨架屏。本申請結合骨架屏布局簡單、樣式單一的特點，采用圖片識別技術對加載有真實數據的頁面進行識別，得到頁面元素對應的區域坐標信息，然后自動生成骨架屏，保證了骨架屏結構與頁面結構的一致性，簡化了骨架屏開發流程，降低了開發和維護成本；無需手工寫骨架屏代碼，無需對代碼結構分析、配置；且骨架屏代碼結構清晰、合理、體積小；大幅度減少了白屏時間，優化了頁面加載體驗，提升了用戶體驗。

技術領域

本發明涉及人工智能技術領域，特別是涉及一種基于圖片識別的骨架屏生成方法、裝置、設備及存儲介質。

背景技術

當今App市場競爭激烈，一款App產品的用戶體驗對該產品的成敗至關重要；其中，優化頁面加載體驗是比較重要的一個提升用戶體驗的細節。App頁面數據的加載逐漸從Loading和進度條轉換成了骨架屏加載方式，從而提升了用戶等待體驗。

骨架屏，就是在頁面真實數據尚未加載前，先給用戶展示出頁面的大致結構，一般采用淺灰色占位圖，能讓用戶對加載內容有個大致的預期；可以減輕用戶對加載過程的關注，將注意力轉移到正在加載的內容上，用戶會覺得內容正在逐漸加載即將呈現，降低焦灼情緒，使加載過程主觀上變得流暢，用戶感知等待的時間比較短，直到請求數據返回后再渲染頁面，補充進需要顯示的數據內容；在網絡環境差或加載數據量很大的情況下，效果會更明顯。

骨架屏特點是：布局簡約、樣式單一，使用淺灰色或偏中性填充顏色的塊，來描繪頁面大致框架；但是看似簡單的頁面布局，實現過程并不簡單；其中涉及的環節較多，例如實現過程中需要設計師、開發人員一起參與才能完成，設計師給出骨架屏設計稿，開發工程師手工書寫為骨架屏代碼；同時，因頁面交互需求的不同，骨架屏會經常發生變化，這樣對于骨架屏的維護來說是個很大的問題，需要一部分人力投入。

目前主要的骨架屏生成方案有以下幾種：

一、首先由設計師提供骨架屏設計稿，開發人員完成骨架屏相關代碼的書寫，然后手工放到html文件中。該方案需要設計師參與、開發人員手工書寫骨架屏代碼，需要手工注入html文件中，流程較長，不夠靈活，變更成本較高；同時由于是單獨設計，很容易出現骨架屏和頁面實際內容不一致的情況。

二、首先由設計師提供骨架屏設計稿，開發人員完成骨架屏組件的書寫，通過ssrrender插件解析并自動注入html文件中。該方案雖然實現了將骨架屏代碼自動注入到html文件中，但是，仍然存在周期長、靈活性差、以及容易出現骨架屏和頁面實際內容不一致的情況。

三、不需要設計稿，通過Puppeteer在服務端操控headless Chrome打開需要生成骨架屏的頁面，通過對頁面中元素進行刪減或增添，對已有元素進行樣式層疊，達到在不改變頁面布局的情況下，隱藏圖片和文字，通過樣式覆蓋，使其展示為灰色塊；然后將修改后的代碼提取出來，用作骨架屏。該方案雖然不需要設計師參與，可以自動生成骨架屏，但是，對頁面結構有一定要求，如果想要達到預期效果，就需要很多的配置，比如：通過DOM屬性進行骨架屏細粒度配置、指定節點配置、自適應的單位要求，使用門檻較高；同時生成的骨架屏代碼復雜，體積較大；Puppeteer有大概80M，很容易安裝失敗，在只能在內網辦公環境下使用，存在使用局限性。

綜上所述，如何既能夠簡化骨架屏開發流程，保證自動生成，保證與真實頁面結構的一致性，使其具有簡潔的骨架屏代碼，又能夠簡化使用方式，對頁面結構無侵入性，降低開發和維護成本，是該領域目前所要解決的主要技術問題。

發明內容

本發明的目的在于提供一種基于圖片識別的骨架屏生成方法、裝置、設備及存儲介質，以解決目前骨架屏結構與頁面結構不一致，骨架屏生成流程復雜等問題。

上述目的是通過以下技術方案實現的：