TW201619803A - 使用者介面顯示系統及方法 - Google Patents

使用者介面顯示系統及方法 Download PDF

Info

Publication number
TW201619803A
TW201619803A TW104100155A TW104100155A TW201619803A TW 201619803 A TW201619803 A TW 201619803A TW 104100155 A TW104100155 A TW 104100155A TW 104100155 A TW104100155 A TW 104100155A TW 201619803 A TW201619803 A TW 201619803A
Authority
TW
Taiwan
Prior art keywords
layer
image
processing
user interface
layers
Prior art date
Application number
TW104100155A
Other languages
English (en)
Other versions
TWI547853B (zh
Inventor
胡爽
姜至善
蔣玲娟
程華東
Original Assignee
鴻海精密工業股份有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 鴻海精密工業股份有限公司 filed Critical 鴻海精密工業股份有限公司
Publication of TW201619803A publication Critical patent/TW201619803A/zh
Application granted granted Critical
Publication of TWI547853B publication Critical patent/TWI547853B/zh

Links

Classifications

    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G09G5/14—Display of multiple viewports
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2310/00—Command of the display device
    • G09G2310/02—Addressing, scanning or driving the display screen or processing steps related thereto
    • G09G2310/0232—Special driving of display border areas
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image
    • G09G2340/045—Zooming at least part of an image, i.e. enlarging it or shrinking it
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/12—Overlay of images, i.e. displayed pixel being the result of switching between the corresponding input pixels

Landscapes

  • Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • Computer Hardware Design (AREA)
  • General Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • User Interface Of Digital Computer (AREA)
  • Digital Computer Display Output (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

一種使用者介面顯示系統及方法，安裝並運行於一電子設備中。所述系統包括：一獲取模組，用於獲取當前使用者介面顯示的圖像層數並判斷當前使用者介面顯示的圖像層數是否大於兩層；一處理確定模組，用於在當前使用者介面顯示的圖像層數大於兩層時，根據獲取的圖像層數確定對各層圖像的處理方式；一影像處理模組，用於根據確定的處理方式對各層圖像分別進行影像處理；及一顯示控制模組，用於將進行影像處理後的各層圖像生成一使用者介面並顯示。

Description

使用者介面顯示系統及方法
本發明涉及一種顯示系統及方法，特別涉及一種使用者介面顯示系統及方法。
具有顯示系統的電子產品以其強大的人機交互功能深受使用者的歡迎，使用者通過操作使用者介面上的圖示就可以輕鬆實現人機對話和互動。若干層圖像疊加顯示在使用者介面上已經普遍存在，例如，使用者介面的最底層顯示桌面圖像，在桌面圖像上顯示應用程式圖示或資料夾圖示，在打開資料夾後顯示子資料夾等。但是在現有的使用者介面顯示系統中，各層圖像只是簡單的疊加顯示，沒有層次感，且當頂層圖像大小大於其下層的圖像大小時，使用者只能看到最頂層的圖像，體驗感欠佳。
鑒於以上內容，有必要提供一種使用者介面顯示系統及方法。
一種使用者介面顯示系統，安裝並運行於一電子設備中。所述系統包括：一獲取模組，用於獲取當前使用者介面顯示的圖像層數並判斷當前使用者介面顯示的圖像層數是否大於兩層；一處理確定模組，用於在當前使用者介面顯示的圖像層數大於兩層時，根據獲取的圖像層數確定對各層圖像的處理方式，其中，所述對各層圖像的處理方式為縮小處理、降低飽和度處理、模糊處理以及半透明處理中的一種或多種；一影像處理模組，用於根據確定的處理方式對各層圖像分別進行影像處理；及一顯示控制模組，用於將進行影像處理後的各層圖像生成一使用者介面並顯示。
一種使用者介面顯示方法，應用於一電子設備中。所述方法包括步驟：獲取當前使用者介面顯示的圖像層數並判斷當前使用者介面的圖像層數是否大於兩層；如果當前使用者介面顯示的圖像層數大於兩層，根據獲取的圖像層數確定對各層圖像的處理方式，其中，所述對各層圖像的處理方式為縮小處理、降低飽和度處理、模糊處理以及半透明處理中的一種或多種；根據確定的處理方式對各層圖像分別進行影像處理；及將進行影像處理後的各層圖像生成一使用者介面並顯示。
本發明的使用者介面顯示系統及方法將使用者介面中的多層圖像分別進行影像處理後再進行顯示，使整個使用者介面呈現立體效果，增強用戶體驗。
圖1是本發明一實施方式中的使用者介面顯示系統的應用環境示意圖。
圖2是本發明一實施方式中的使用者介面顯示方法的流程圖。
圖3是本發明一實施方式中的一層圖像上的圖元點的參考圖元點的選取示意圖。
圖4是本發明一實施方式中的使用者介面顯示效果圖。
如圖1所示，是本發明一實施方式中的使用者介面顯示系統10的應用環境示意圖。在本實施方式中，該使用者介面顯示系統10安裝並運行於一電子設備100中，所述電子設備100可以是手機，平板電腦等。所述電子設備100還包括，但不限於，記憶體20、顯示螢幕30以及處理器40。所述記憶體20用於存儲電子設備100的資料，所述顯示螢幕30用於顯示使用者介面，所述處理器40用於控制電子設備100工作。
所述使用者介面顯示系統10用於當電子設備100上開啟新一層的圖像時，獲取當前介面顯示的圖像層數並分別對各層圖像進行影像處理後再進行顯示，使整個使用者介面呈現立體效果。所述圖像可以為桌面壁紙圖像，應用程式圖示，資料夾圖示，應用程式顯示介面等。
在本實施方式中，所述使用者介面顯示系統10包括獲取模組11、處理確定模組12、影像處理模組13以及顯示控制模組14。本發明所稱的模組是指一種能夠被電子設備100的處理器40所執行並完成特定功能的一系列程式指令段，其存儲在電子設備100的記憶體20中。關於各模組的功能將在下圖2的流程圖中具體描述。
如圖2所示，是本發明一實施方式中的使用者介面顯示方法的流程圖。
步驟S201，當電子設備100上開啟新一層的圖像時，所述獲取模組11獲取當前使用者介面顯示的圖像層數n並判斷當前使用者介面顯示的圖像層數n（n為整數）是否大於兩層，如果當前使用者介面顯示的圖像層數大於兩層，即n＞2，執行步驟S202，如果當前使用者介面顯示的圖像層數不大於兩層，即n＜2或n=2，直接結束流程。
步驟S202，所述圖層處理確定模組12根據獲取的圖像層數確定對各層圖像的處理方式。所述對各層圖像的處理方式為縮小處理、降低飽和度處理、模糊處理以及半透明處理中的一種或多種。
在本實施方式中，所述對各層圖像的處理方式為：對第二層至倒數第二層（即第（n-1）層）各層圖像進行縮放處理，對第二層至最底層（即第n層）各層圖像進行模糊處理以及降低飽和度處理，對第一層至最n層所有圖像進行半透明處理。
所述對第二層至第（n-1）層各層圖像進行縮小處理的方式為：以遞減的比例依次縮小第二層至第（n-1）層各層圖像，例如，以一初始比例r（r＜1）縮小第二層圖像，其餘圖像每增大一層，縮小比例減小一縮小步進值△r，即將第i層圖像縮小【r-（i-2）*△r】倍，其中，1＜i＜n（i為整數），△r＜r/(n-2)。
所述對第二層至第n層各層圖像進行模糊處理的方式為：根據一影像處理寬度W（W為正整數），在各層圖像中的每一圖元點周圍確定K個參考圖元點，其中，K=4*W，取該K個參考圖元點的（R，G，B）值的平均值作為該圖元點的（R，G，B）值，從而達到模糊的效果。其中，該K個參考圖元點為以該圖元點為中心的水準方向上的2*W個圖元點以及垂直方向上的2*W個圖元點，如果某圖元點為邊界或臨近邊界圖元點，則根據邊界圖元延展的方法確定該圖元點的圖元值，即當某圖元點的水準方向或垂直方向上無法確定對稱的2W個圖元點時，則重複選取該方向上的邊界圖元點作為參考圖元點。具體地，如圖3所示，是本發明一實施方式中的一層圖像上的圖元點的參考圖元點的選取示意圖。圖元點A、B的座標分別為（xA ，yA ）、（xB ，yB ），如果影像處理寬度W=2，則需要以A、B為中心分別確定K=4W=8個圖元點分別計算圖元點A、B的（R，G，B）值，對於圖元點A，確定以其為中心的8個參考圖元點分別為：A1 （xA ，yA +1）、A2 （xA +1，yA ）、A3 （xA ，yA -1）、A4 （xA -1，yA ）、A5 （xA ，yA +2）、A6 （xA +2，yA ）、A7 （xA ，yA -2）、A8 （xA -2，yA ）。對於圖元點B，確定的8個參考圖元點分別為：B1 （xB ，yB +1）、B2 （xB +1，yB ）、B3 （xB ，yB -1）、B4 （xB ，yB ）、B5 （xB ，yB +1）、B6 （xB +2，yB ）、B7 （xB ，yB -2）、B8 （xB ，yB ）。需要說明的是，影像處理寬度W的值越大，經模糊處理後的圖像越模糊。所述影像處理寬度W可以是一預設固定值，也可以是使用者根據當前需要輸入的一數值。
所述對第二層至第n層各層圖像進行降低飽和度處理的方式為：以遞減的方式依次降低第二層至第n層各層圖像的飽和度，例如將第二層圖像的飽和度調整至一初始飽和度t（t＜1），其餘圖像每增大一層，飽和度減小一飽和度步進值△t，即將第i層圖像的飽和度調整至【t-（i-2）*△t】，其中，△t＜t/(n-2)。
所述對圖像的半透明處理屬於現有技術範疇，在此不再贅述。
步驟S203，所述影像處理模組13根據確定的處理方式對各層圖像分別進行影像處理。
步驟S204，所述顯示控制模組14將進行處理後的各層圖像生成一使用者介面並顯示。在本實施方式中，所述顯示控制模組14將進行處理後的各層圖像居中設置生成一使用者介面並顯示。如圖4所示，是本發明一實施方式中的使用者介面顯示效果圖，圖中所示的使用者介面的圖層為3層。在圖4中，最底層的圖像為桌面壁紙圖像，第二層為應用程式圖示以及資料夾圖示，第一層也就是最上層為一資料夾中的應用程式圖示。
通過本發明的使用者介面顯示系統及方法根據當前使用者介面顯示的圖像層數對各層圖像分別進行影像處理後各層圖像除最底層外以逐漸縮小的趨勢顯示，給人一種距離越遠圖像越小並且模糊的視覺體驗，使得整個使用者介面呈現立體效果。
最後應說明的是，以上實施例僅用以說明本發明的技術方案而非限制，儘管參照較佳實施例對本發明進行了詳細說明，本領域的普通技術人員應當理解，可以對本發明的技術方案進行修改或等同替換，而不脫離本發明技術方案的精神和範圍。
100‧‧‧電子設備
10‧‧‧使用者介面顯示系統
11‧‧‧獲取模組
12‧‧‧處理確定模組
13‧‧‧影像處理模組
14‧‧‧顯示控制模組
20‧‧‧記憶體
30‧‧‧顯示螢幕
40‧‧‧處理器
S201~S204‧‧‧步驟
無
S201~S204‧‧‧步驟

Claims (10)

  1. 一種使用者介面顯示系統，安裝並運行於一電子設備中，其改良在於，所述系統包括：
    一獲取模組，用於獲取當前使用者介面顯示的圖像層數並判斷當前使用者介面顯示的圖像層數是否大於兩層；
    一處理確定模組，用於在當前使用者介面顯示的圖像層數大於兩層時，根據獲取的圖像層數確定對各層圖像的處理方式，其中，所述對各層圖像的處理方式為縮小處理、降低飽和度處理、模糊處理以及半透明處理中的一種或多種；
    一影像處理模組，用於根據確定的處理方式對各層圖像分別進行影像處理；及
    一顯示控制模組，用於將進行影像處理後的各層圖像生成一使用者介面並顯示。
  2. 如申請專利範圍第1項所述之系統，其中，所述對各層圖像的處理方式為：對第二層至倒數第二層各層圖像進行縮小處理，對第二層至最底層各層圖像進行模糊處理以及降低飽和度處理，對第一層至最底層所有圖像進行半透明處理。
  3. 如申請專利範圍第2項所述之系統，其中，所述對第二層至倒數第二層各層圖像進行縮小處理的方式為：以遞減的比例依次縮小第二層至倒數第二層各層圖像。
  4. 如申請專利範圍第2項所述之系統，其中，所述對第二層至最底層各層圖像進行模糊處理的方式為：在各層圖像中的每一圖元點周圍確定多個參考圖元點，取該多個參考圖元點的（R，G，B）值的平均值作為該圖元點的（R，G，B）值。
  5. 如申請專利範圍第2項所述之系統，其中，所述對第二層至最底層各層圖像進行降低飽和度處理的方式為：以遞減的方式依次降低第二層至最底層各層圖像的飽和度。
  6. 一種使用者介面顯示方法，應用於一電子設備中，其改良在於，所述方法包括步驟：
    獲取當前使用者介面顯示的圖像層數並判斷當前使用者介面的圖像層數是否大於兩層；
    如果當前使用者介面顯示的圖像層數大於兩層，根據獲取的圖像層數確定對各層圖像的處理方式，其中，所述對各層圖像的處理方式為縮小處理、降低飽和度處理、模糊處理以及半透明處理中的一種或多種；
    根據確定的處理方式對各層圖像分別進行影像處理；及
    將進行影像處理後的各層圖像生成一使用者介面並顯示。
  7. 如申請專利範圍第6項所述之方法，其中，所述對各層圖像的處理方式為：對第二層至倒數第二層各層圖像進行縮小處理，對第二層至最底層各層圖像進行模糊處理以及降低飽和度處理，對第一層至最底層所有圖像進行半透明處理。
  8. 如申請專利範圍第7項所述之方法，其中，所述對第二層至倒數第二層各層圖像進行縮小處理的方式為：以遞減的比例依次縮小第二層至倒數第二層各層圖像。
  9. 如申請專利範圍第7項所述之方法，其中，所述對第二層至最底層各層圖像進行模糊處理的方式為：在各層圖像中的每一圖元點周圍確定多個參考圖元點，取該多個參考圖元點的（R，G，B）值的平均值作為該圖元點的（R，G，B）值。
  10. 如申請專利範圍第7項所述之方法，其中，所述對第二層至最底層各層圖像進行降低飽和度處理的方式為：以遞減的方式依次降低第二層至最底層各層圖像的飽和度。
TW104100155A 2014-11-27 2015-01-06 使用者介面顯示系統及方法 TWI547853B (zh)

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410706147.2A CN105700766B (zh) 2014-11-27 2014-11-27 用户界面显示系统及方法

Publications (2)

Publication Number Publication Date
TW201619803A true TW201619803A (zh) 2016-06-01
TWI547853B TWI547853B (zh) 2016-09-01

Family

ID=56079560

Family Applications (1)

Application Number Title Priority Date Filing Date
TW104100155A TWI547853B (zh) 2014-11-27 2015-01-06 使用者介面顯示系統及方法

Country Status (3)

Country Link
US (1) US9847075B2 (zh)
CN (1) CN105700766B (zh)
TW (1) TWI547853B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TWI595438B (zh) * 2016-09-29 2017-08-11 麗寶大數據股份有限公司 使用者介面顯示方法

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106484397A (zh) * 2016-09-18 2017-03-08 乐视控股（北京）有限公司 一种3d空间中用户界面控件的生成方法及其装置
CN106776682A (zh) * 2016-10-28 2017-05-31 努比亚技术有限公司 一种图片匹配装置、方法及移动终端
CN106558032A (zh) * 2016-11-28 2017-04-05 武汉斗鱼网络科技有限公司 一种应用窗体的高斯模糊方法和装置
CN109859638A (zh) * 2018-11-20 2019-06-07 武汉华星光电半导体显示技术有限公司 U-cut屏幕oled显示装置及其图标显示方法
TWI694404B (zh) * 2019-02-18 2020-05-21 麗寶大數據股份有限公司 使用者介面顯示方法
CN112527220B (zh) * 2019-09-18 2022-08-26 华为技术有限公司 一种电子设备显示方法及电子设备

Family Cites Families (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TW200928985A (en) * 2007-12-21 2009-07-01 Inventec Corp Frame switching method
CN101321240B (zh) * 2008-06-25 2010-06-09 华为技术有限公司 多图层叠加的方法及其装置
KR20110107939A (ko) * 2010-03-26 2011-10-05 삼성전자주식회사 휴대 단말기 및 그 휴대 단말기에서 아이콘 제어 방법
US9727226B2 (en) * 2010-04-02 2017-08-08 Nokia Technologies Oy Methods and apparatuses for providing an enhanced user interface
US8479117B2 (en) * 2010-06-04 2013-07-02 Lenovo (Singapore) Pte. Ltd. Intelligent window sizing for graphical user interfaces
US20130009991A1 (en) * 2011-07-07 2013-01-10 Htc Corporation Methods and systems for displaying interfaces
CN103049924B (zh) * 2012-12-11 2016-03-02 广东威创视讯科技股份有限公司 多图层分布式渲染方法及系统
US9542907B2 (en) * 2013-06-09 2017-01-10 Apple Inc. Content adjustment in graphical user interface based on background content
CN103823621B (zh) * 2014-03-17 2017-11-03 联想(北京)有限公司 创建联系人头像的方法和装置
CN103927086B (zh) * 2014-04-21 2018-11-16 努比亚技术有限公司 一种壁纸处理方法、系统和移动终端
CN103973891B (zh) * 2014-05-09 2016-06-01 平安付智能技术有限公司 用于软件界面的数据安全处理方法

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TWI595438B (zh) * 2016-09-29 2017-08-11 麗寶大數據股份有限公司 使用者介面顯示方法
US10444935B2 (en) 2016-09-29 2019-10-15 Cal-Comp Big Data, Inc. User interface display method

Also Published As

Publication number Publication date
CN105700766B (zh) 2018-09-14
US20160155427A1 (en) 2016-06-02
US9847075B2 (en) 2017-12-19
TWI547853B (zh) 2016-09-01
CN105700766A (zh) 2016-06-22

Similar Documents

Publication Publication Date Title
TWI547853B (zh) 使用者介面顯示系統及方法
US20120174029A1 (en) Dynamically magnifying logical segments of a view
US9170728B2 (en) Electronic device and page zooming method thereof
US20130152024A1 (en) Electronic device and page zooming method thereof
US8773468B1 (en) System and method for intuitive manipulation of the layering order of graphics objects
WO2016045523A1 (zh) 一种移动终端界面内容的显示方法、装置及终端
AU2014238102A1 (en) Device, method, and graphical user interface for adjusting the appearance of a control
WO2016145832A1 (zh) 终端的操作方法及装置
WO2018072270A1 (zh) 一种图像显示增强方法及装置
CN104038807A (zh) 一种基于OpenGL的图层混合方法及装置
US20160070460A1 (en) In situ assignment of image asset attributes
TW201445421A (zh) 基於互動自動地操縱視覺化資料
JP2015046045A5 (zh)
TW201621609A (zh) 桌面顯示系統及方法
CN105511712A (zh) 一种图片呈现方法及装置
US11636572B2 (en) Method and apparatus for determining and varying the panning speed of an image based on saliency
US10078793B2 (en) Method and device for displaying image
US10140685B2 (en) Display device, system and controlling method therefor
CN107861711B (zh) 页面适配方法及装置
EP2871826B1 (en) Method, device and terminal for adjusting widget
CN109065001B (zh) 一种图像的降采样方法、装置、终端设备和介质
EP2911115B1 (en) Electronic device and method for color extraction
KR101680672B1 (ko) 텍스쳐 효과 제공방법 및 이를 적용한 디스플레이 장치
KR20130134546A (ko) 동영상의 섬네일 이미지 생성 방법 및 그 전자 장치
CN109766530B (zh) 图表边框的生成方法、装置、存储介质和电子设备