本發(fā)明涉及計(jì)算機(jī)顯示領(lǐng)域，特別是一種電腦顯示界面實(shí)現(xiàn)方法。

背景技術(shù)：

交互設(shè)計(jì)又稱互動(dòng)設(shè)計(jì)，(英文interactiondesign，縮寫ixd或者iad)，是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域。人造物，即人工制成物品，例如，軟件、移動(dòng)設(shè)備、人造環(huán)境、服務(wù)、可佩帶裝置以及系統(tǒng)的組織結(jié)構(gòu)。交互設(shè)計(jì)在于定義人造物的行為方式(the"interaction"，即人工制品在特定場景下的反應(yīng)方式)相關(guān)的界面。交互設(shè)計(jì)作為一門關(guān)注交互體驗(yàn)的新學(xué)科在二十世紀(jì)八十年代產(chǎn)生了，它由ideo的一位創(chuàng)始人比爾·摩格理吉(billmoggridge)在1984年一次設(shè)計(jì)會(huì)議上提出。

初創(chuàng)期(1929年-1970年)簡單的說，交互設(shè)計(jì)是人工制品、環(huán)境和系統(tǒng)的行為，以及傳達(dá)這種行為的外形元素的設(shè)計(jì)與定義。不像傳統(tǒng)的設(shè)計(jì)學(xué)科主要關(guān)注形式，則是關(guān)注內(nèi)容和內(nèi)涵，而交互設(shè)計(jì)首先旨在規(guī)劃和描述事物的行為方式，然后描述傳達(dá)這種行為的最有效形式。

表單是網(wǎng)頁中經(jīng)常出現(xiàn)的一個(gè)元素，表單過長，在用戶體驗(yàn)上會(huì)出現(xiàn)一定的問題，會(huì)讓用戶產(chǎn)生疲勞感，甚至在一個(gè)長表單中，不能及時(shí)的獲取到自己需要的數(shù)據(jù)。而且經(jīng)常會(huì)出現(xiàn)這種情況，一個(gè)比較長的表單，當(dāng)想看某一行的數(shù)據(jù)的時(shí)候，有時(shí)數(shù)據(jù)會(huì)看到其他行去，數(shù)據(jù)就不能一一對(duì)應(yīng)，那么這時(shí)就可以采用一個(gè)比較好的網(wǎng)頁交互方式來解決這個(gè)問題。

gui，即圖形用戶界面是一種人與計(jì)算機(jī)通信的界面顯示格式，允許用戶使用鼠標(biāo)等輸入設(shè)備操縱屏幕上的圖標(biāo)或菜單選項(xiàng)，以選擇命令、調(diào)用文件、啟動(dòng)程序或執(zhí)行其它一些日常任務(wù)。

微交互是來自用戶的一個(gè)操作，觸發(fā)另一個(gè)動(dòng)作的裝置。每一個(gè)交互是基于以人為本的設(shè)計(jì)理念，在數(shù)字工具的工作原理和功能也反映出一個(gè)人會(huì)做些什么?？捎眯缘拿孛芪淦鳌换バ袨橄耦A(yù)期的那樣，“以人為中心”。微交互是應(yīng)用程序設(shè)計(jì)的重要組成部分，他們幫助創(chuàng)造接觸，創(chuàng)建用戶看不到的微小的時(shí)刻，提升用戶體驗(yàn)。

ued時(shí)代——用戶體驗(yàn)制勝我們不缺技術(shù)，我們不缺另人震撼的視覺，這些雖然過去是我們孜孜追求的東西，如今已經(jīng)不足為奇。但是我們?nèi)庇脩魜碛?，我們?nèi)庇脩舫掷m(xù)來關(guān)注，我們?nèi)庇脩趔w驗(yàn)。用戶體驗(yàn)過去一直在產(chǎn)生影響，但是未能得到足夠的重視。

隨著網(wǎng)頁技術(shù)的不斷發(fā)展，網(wǎng)頁設(shè)計(jì)的趨勢在扁平化，改變、響應(yīng)式、卡片式、視覺差滾動(dòng)等給設(shè)計(jì)師帶來了更多的發(fā)揮空間，簡約的設(shè)計(jì)，也以其輕薄美觀、簡潔直觀等特點(diǎn)，越來越受到我們?cè)O(shè)計(jì)師的追捧和大眾的喜愛。

wui設(shè)計(jì)是將設(shè)計(jì)回歸本質(zhì)的一種設(shè)計(jì)理念。簡約并不是對(duì)網(wǎng)站內(nèi)容的簡單刪減，而是提煉設(shè)計(jì)精華，滿足于我們美觀實(shí)用的本質(zhì)需求，在網(wǎng)頁中，具有簡約的交互操作，往往具清晰的頁面結(jié)構(gòu)、簡單的設(shè)計(jì)等特征。在滿足傳遞信息的同時(shí)，從視覺體驗(yàn)的角度，為用戶帶來愉悅，輕松美感。

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

十六進(jìn)制顏色碼就是在軟件中設(shè)定顏色值的代碼，例如，在網(wǎng)頁上要指定一種顏色，就要使用rgb模式來確定，方法是分別指定r/g/b，也就是紅/綠/藍(lán)三種原色的強(qiáng)度，通常規(guī)定，每一種顏色強(qiáng)度最低為0，最高為255，并通常都以16進(jìn)制數(shù)值表示，那么255對(duì)應(yīng)于十六進(jìn)制就是ff，并把三個(gè)數(shù)值依次并列起來，以#開頭。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明所要解決的技術(shù)問題是提供一種電腦顯示界面實(shí)現(xiàn)方法，屬于gui、交互設(shè)計(jì)的范疇，在用戶瀏覽網(wǎng)頁的時(shí)候，當(dāng)鼠標(biāo)移向指定區(qū)域時(shí)會(huì)出現(xiàn)微交互，該交互可以增強(qiáng)用戶體驗(yàn)。

為解決上述技術(shù)問題，本發(fā)明采用的技術(shù)方案是：

一種電腦顯示界面實(shí)現(xiàn)方法，包括以下步驟：

步驟1：采用標(biāo)準(zhǔn)網(wǎng)頁html5，并向搜索引擎表示所顯示頁面為html語言；設(shè)置可變長度字符編碼為utf-8，定義所要顯示的整個(gè)區(qū)域及整個(gè)區(qū)域的屬性；

步驟2：將所要顯示的整個(gè)區(qū)域分割為所要顯示的多個(gè)子區(qū)域；

步驟3：定義某個(gè)子區(qū)域的信息并編寫樣式，讓此子區(qū)域表單的奇偶行實(shí)現(xiàn)不同顏色的展示；

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

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

步驟6：當(dāng)鼠標(biāo)懸浮或移到步驟4矩形框內(nèi)的時(shí)候，該矩形框設(shè)置顯示，即達(dá)到對(duì)應(yīng)子區(qū)域的顯示效果；

步驟7：采用步驟3至步驟6所述方法定義其他所需要定義的子區(qū)域，完成整個(gè)區(qū)域的定義。

與現(xiàn)有技術(shù)相比，本發(fā)明的有益效果是：本發(fā)明方法對(duì)產(chǎn)品業(yè)務(wù)功能的完善及整合、流程的簡化、高效信息傳達(dá)起到至關(guān)重要的作用。而且傳統(tǒng)表單的數(shù)據(jù)一般是比較多的，如果想快速準(zhǔn)確的查看某一行的數(shù)據(jù)，那么我們通常會(huì)采取在頁面上拉一根直線避免數(shù)據(jù)錯(cuò)位，看成其他行的數(shù)據(jù)。本發(fā)明方法可以在美觀度、用戶體驗(yàn)度上有著一個(gè)很大的改進(jìn)。

附圖說明

圖1是采用本發(fā)明方法的顯示實(shí)例圖。

具體實(shí)施方式

下面結(jié)合附圖和具體實(shí)施方式對(duì)本發(fā)明作進(jìn)一步詳細(xì)的說明。

如圖1所示，由于本發(fā)明交互設(shè)計(jì)是用于網(wǎng)頁的，所以實(shí)現(xiàn)的一個(gè)流程是基于網(wǎng)頁的展示算法來實(shí)現(xiàn)的，具體流程如下(以“股東”一列為例子，其他需要使用的地方同理即可)：

1、定義“股東信息”模塊的整個(gè)大框，即圖1中帶陰影的最大的矩形框；

2、定義“股東”一列的信息，即圖1所示的黎萬強(qiáng)、余江縣全贏投資管理企業(yè)新鄉(xiāng)市中原起重機(jī)設(shè)備總工廠有限公司第一分公司等文字信息；

3、編寫樣式，讓“股東信息”表單的奇偶行實(shí)現(xiàn)不同顏色的展示(即斑馬紋，也就是隔行換色)；

4、在“股東”這一列的文字下面定義一個(gè)寬度為350像素、高度為60像素的矩形框，并設(shè)置該矩形框的樣式：邊框顏色為#ddd(灰色的一種)、矩形框陰影的屬性是陰影擴(kuò)散的距離為10像素、矩形框陰影顏色為#999(灰色的一種)；

5、將步驟4定義好的矩形框設(shè)置透明，即達(dá)到隱藏效果；

6、當(dāng)鼠標(biāo)懸浮或移到步驟4矩形框內(nèi)的時(shí)候，該矩形框設(shè)置顯示，即達(dá)到圖1中的效果。

為了對(duì)本發(fā)明更進(jìn)一步說明，下面通過代碼實(shí)現(xiàn)的形式詳細(xì)闡述。代碼的自然語言闡述如下(以股東一列為例子進(jìn)行說明)：

。