[發明專利]一種電腦顯示界面實現方法

在審

• 申請號: 201710432444.6
• 申請日: 2017-06-09
• 公開（公告）號: CN107239289A
• 公開（公告）日: 2017-10-10
• 發明（設計）人: 周麗娜
• 申請（專利權）人: 成都知道創宇信息技術有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44;G06F17/30
• 代理公司: 成都信博專利代理有限責任公司51200
• 代理人: 張輝

技術領域

本發明涉及計算機顯示領域，特別是一種電腦顯示界面實現方法。

背景技術

交互設計又稱互動設計，(英文Interaction Design，縮寫IxD或者IaD)，是定義、設計人造系統的行為的設計領域。人造物，即人工制成物品，例如，軟件、移動設備、人造環境、服務、可佩帶裝置以及系統的組織結構。交互設計在于定義人造物的行為方式(the "interaction"，即人工制品在特定場景下的反應方式)相關的界面。交互設計作為一門關注交互體驗的新學科在二十世紀八十年代產生了，它由IDEO的一位創始人比爾·摩格理吉(Bill Moggridge)在1984年一次設計會議上提出。

初創期(1929年-1970年)簡單的說，交互設計是人工制品、環境和系統的行為，以及傳達這種行為的外形元素的設計與定義。不像傳統的設計學科主要關注形式，則是關注內容和內涵，而交互設計首先旨在規劃和描述事物的行為方式，然后描述傳達這種行為的最有效形式。

表單是網頁中經常出現的一個元素，表單過長，在用戶體驗上會出現一定的問題，會讓用戶產生疲勞感，甚至在一個長表單中，不能及時的獲取到自己需要的數據。而且經常會出現這種情況，一個比較長的表單，當想看某一行的數據的時候，有時數據會看到其他行去，數據就不能一一對應，那么這時就可以采用一個比較好的網頁交互方式來解決這個問題。

GUI，即圖形用戶界面是一種人與計算機通信的界面顯示格式，允許用戶使用鼠標等輸入設備操縱屏幕上的圖標或菜單選項，以選擇命令、調用文件、啟動程序或執行其它一些日常任務。

微交互是來自用戶的一個操作，觸發另一個動作的裝置。每一個交互是基于以人為本的設計理念，在數字工具的工作原理和功能也反映出一個人會做些什么。可用性的秘密武器——交互行為像預期的那樣，“以人為中心”。微交互是應用程序設計的重要組成部分，他們幫助創造接觸，創建用戶看不到的微小的時刻，提升用戶體驗。

UED時代——用戶體驗制勝我們不缺技術，我們不缺另人震撼的視覺，這些雖然過去是我們孜孜追求的東西，如今已經不足為奇。但是我們缺用戶來用，我們缺用戶持續來關注，我們缺用戶體驗。用戶體驗過去一直在產生影響，但是未能得到足夠的重視。

隨著網頁技術的不斷發展，網頁設計的趨勢在扁平化，改變、響應式、卡片式、視覺差滾動等給設計師帶來了更多的發揮空間，簡約的設計，也以其輕薄美觀、簡潔直觀等特點，越來越受到我們設計師的追捧和大眾的喜愛。

WUI設計是將設計回歸本質的一種設計理念。簡約并不是對網站內容的簡單刪減，而是提煉設計精華，滿足于我們美觀實用的本質需求，在網頁中，具有簡約的交互操作，往往具清晰的頁面結構、簡單的設計等特征。在滿足傳遞信息的同時，從視覺體驗的角度，為用戶帶來愉悅，輕松美感。

像素是指在由一個數字序列表示的圖像中的一個最小單位，稱為像素(px)。

十六進制顏色碼就是在軟件中設定顏色值的代碼，例如，在網頁上要指定一種顏色，就要使用RGB模式來確定，方法是分別指定R/G/B，也就是紅/綠/藍三種原色的強度，通常規定，每一種顏色強度最低為0，最高為255，并通常都以16進制數值表示，那么255對應于十六進制就是FF，并把三個數值依次并列起來，以#開頭。

發明內容

本發明所要解決的技術問題是提供一種電腦顯示界面實現方法，屬于GUI、交互設計的范疇，在用戶瀏覽網頁的時候，當鼠標移向指定區域時會出現微交互，該交互可以增強用戶體驗。

為解決上述技術問題，本發明采用的技術方案是：

一種電腦顯示界面實現方法，包括以下步驟：

步驟1：采用標準網頁html5，并向搜索引擎表示所顯示頁面為html語言；設置可變長度字符編碼為UTF-8，定義所要顯示的整個區域及整個區域的屬性；

步驟2：將所要顯示的整個區域分割為所要顯示的多個子區域；

步驟3：定義某個子區域的信息并編寫樣式，讓此子區域表單的奇偶行實現不同顏色的展示；

步驟4：在步驟3所述子區域的文字下面定義一個寬度為350像素、高度為60像素的矩形框，并設置該矩形框的樣式為：邊框顏色為#ddd、矩形框陰影的屬性是陰影擴散的距離為 10像素、矩形框陰影顏色為#999；所述#ddd和#999為灰色的顏色代碼；

步驟5：將步驟4定義好的矩形框設置為透明，達到隱藏效果；

步驟6：當鼠標懸浮或移到步驟4矩形框內的時候，該矩形框設置顯示，即達到對應子區域的顯示效果；