劉慶梅

關(guān)鍵詞： 符號學(xué); 網(wǎng)頁界面; 視覺展示; 展示系統(tǒng)設(shè)計; 界面展示; 網(wǎng)頁設(shè)計

中圖分類號： TN99?34; F49 ? ? ? ? ? ? ? ? ? ? ? 文獻(xiàn)標(biāo)識碼： A ? ? ? ? ? ? ? ? ? ? ? 文章編號： 1004?373X（2019）05?0119?05

Design of Web interface visual display system based on semiotics

LIU Qingmei

（Canvard College， Beijing Technology and Business University， Beijing 101118， China）

Abstract： The traditional Web interface visual display system has poor interface definition and system operation efficiency， and cant achieve the expected display effect after repeatedly improvements. Therefore， a new visual display system of Web interface is designed. The collector， processor and display are designed emphatically， and the structure diagram and circuit diagram are given. TUD232 is selected as the internal chip of the collector， which can collect video data， audio data and text data at the same time. ARM10 is selected as the processor to improve the running efficiency of the system. LCD is used as the display to make the display result clearer. The software design is composed of icon design， unified style planning and personalized design. In order to test the effect of the system， the experimental comparison is carried out with the traditional display system. The results show that the Web interface visual display system based on semiotics has strong display ability， high operation efficiency and high resolution， and can clearly display various types of information to users， which is convenient for communication and exchange of users.

Keywords： semiotics; Web interface; visual display; display system design; interface display; Web design

0 ?引 ?言

網(wǎng)頁界面是一種新興界面，能夠同時展示文本、圖形、聲音、視頻等內(nèi)容，表現(xiàn)形式多樣，互動能力強(qiáng)。鑒于網(wǎng)頁界面有著自身獨(dú)特的性質(zhì)，所以設(shè)計方式也與其他方式不同[1]。網(wǎng)頁界面主要負(fù)責(zé)傳達(dá)視覺信息，因此設(shè)計的網(wǎng)頁元素也要遵循視覺信息傳達(dá)原則，通過多樣化的展示方式吸引視線，將信息清晰準(zhǔn)確地傳送出去。

現(xiàn)有網(wǎng)頁界面視覺展示系統(tǒng)雖然能夠?qū)⑾胍磉_(dá)的內(nèi)容展示出來，但是整體展現(xiàn)效果不佳。部分網(wǎng)頁展示系統(tǒng)在視頻處理上效果很好，但在音頻處理上效果卻不佳，也有一些網(wǎng)頁展示系統(tǒng)能夠很好地展示出文字效果，卻不能展示出動態(tài)效果[2]。鑒于目前網(wǎng)頁界面視覺展示系統(tǒng)整體展示效果差的缺點(diǎn)，從符號學(xué)原理出發(fā)，充分考慮網(wǎng)頁界面的發(fā)展和特性，設(shè)計了一種新的網(wǎng)頁界面視覺展示系統(tǒng)?；诜枌W(xué)的網(wǎng)頁界面視覺展示系統(tǒng)運(yùn)用符號學(xué)原理設(shè)定出一個展示系統(tǒng)，在系統(tǒng)中確立信息的展現(xiàn)方式，將文字信息、圖片信息、音頻信息、視頻信息等多類型信息全方位的展示出來[3]。

1 ?基于符號學(xué)的網(wǎng)頁界面視覺展示系統(tǒng)硬件設(shè)計

視覺展示系統(tǒng)要具備極強(qiáng)的采集能力和兼容能力，同時還要能夠?qū)⒉杉降母鞣N字符轉(zhuǎn)換成人們視覺能夠接收的信號文字[4]。因此，基于符號學(xué)設(shè)計的網(wǎng)頁界面視覺展示系統(tǒng)硬件部分包括信息采集器、放大器、降噪器、處理器、顯示器、并行電源等。基于符號學(xué)的網(wǎng)頁界面視覺展示系統(tǒng)硬件結(jié)構(gòu)如圖1所示。

由于傳統(tǒng)網(wǎng)頁界面視覺展示系統(tǒng)存在展示界面清晰度較差和運(yùn)行速率較低的問題，所以重點(diǎn)對展示系統(tǒng)硬件中的采集器、處理器和顯示器三部分進(jìn)行設(shè)計，以此達(dá)到改善傳統(tǒng)系統(tǒng)不足的目的。

1） 信息采集器：所設(shè)計系統(tǒng)中信息采集器負(fù)責(zé)采集外部信號，采集器內(nèi)部芯片選用TUD232芯片，該芯片能夠同時采集視頻數(shù)據(jù)、音頻數(shù)據(jù)和文字?jǐn)?shù)據(jù)，具有全面性的優(yōu)勢。

2） 處理器：選用ARM10處理器，將采集到的信息進(jìn)行深度處理，選取適當(dāng)?shù)娘@示模板將各類信息顯示出來，通過該處理器能夠提高系統(tǒng)的運(yùn)行效率。

3） 顯示器：選用液晶顯示器，其具有分辨率高的特點(diǎn)，能夠提升界面顯示的清晰度[5]。

1.1 ?采集器設(shè)計

網(wǎng)頁界面中的視覺展示符號越多，意味著需要處理的數(shù)據(jù)量就越多，因此，需要采用高效處理器對大量的視覺數(shù)據(jù)進(jìn)行及時、準(zhǔn)確的處理。本文選用搭載TUD232芯片的采集器，采集器內(nèi)部配備了一款高性能CPU，運(yùn)行速度最高可達(dá)400 MHz，能夠?qū)崿F(xiàn)對數(shù)據(jù)的實(shí)時采集。圖2為采集器結(jié)構(gòu)圖，分析該圖可知，采集器的正常運(yùn)作由信息處理單元進(jìn)行監(jiān)視、測量、分析并記錄運(yùn)行操作。信息處理單元內(nèi)含PC126系統(tǒng)與多個端口，可以對多種圖像進(jìn)行集成處理[6]。

除了信息處理單元之外，采集器內(nèi)部還設(shè)計了C5792D0通信節(jié)點(diǎn)，繼承了數(shù)據(jù)采集系統(tǒng)數(shù)字外設(shè)模式以及定時、比較DIC等優(yōu)點(diǎn)[7?8]，同時，還具有低能耗、小巧、可靠性高等優(yōu)點(diǎn)，可以提升數(shù)據(jù)采集的可靠性。

1.2 ?處理器設(shè)計

處理器一直是研究的熱點(diǎn)，本文在采集器的基礎(chǔ)上，選用ARM10處理器，該處理器能夠?qū)⒉杉鞑杉降男畔⑦M(jìn)行深度處理，進(jìn)一步提高系統(tǒng)的運(yùn)行效率。該處理器中的jinecl與傳統(tǒng)CCUD內(nèi)核有很大區(qū)別，CCUC只提供12個通用寄存器和18位指令[9]，而jinecl特別緊湊，并且具有十分豐富的資源，能提供24個16位可通用寄存器，輸入18～24位指令具有2 KB的尋址空間與12位寬度地址線，能夠大大減少外圍存儲器的使用[10]。處理器線路圖如圖3所示。

1.3 ?顯示器設(shè)計

對數(shù)據(jù)進(jìn)行采集與處理之后，就需要將其進(jìn)行輸出，因此需要對顯示器進(jìn)行設(shè)計，通過顯示器將視覺信息傳達(dá)給用戶[11]。傳統(tǒng)顯示器分辨率不高且笨重，本文設(shè)計出一個具有超高分辨率，超低能耗和超薄機(jī)身的液晶顯示器。該顯示器由黑白和彩色像素組成，適合各種電子設(shè)備。運(yùn)用電流刺激液晶分子產(chǎn)生點(diǎn)、面、線配合背部燈管為原理，從而構(gòu)成畫面。與傳統(tǒng)顯示器相比，只占前者[13]空間。由于是低能耗，能做到不發(fā)熱，主要發(fā)熱部分在背光燈管，因?yàn)橐壕聊徊粫W爍，可防止視力疲勞，減少眼睛受傷。從結(jié)構(gòu)來說，液晶顯示器由很多不同部分組成，其中有兩塊板約厚1 mm，被均勻隔開，隔開為含有液晶材料的5UM，顯示器下部沒有燈管可作為光源。

本文采用CAN總線通信技術(shù)對顯示器進(jìn)行設(shè)計，顯示器與信息單元都會設(shè)有兩條CAN總線，并建立兩條獨(dú)立通道，處于正常工作狀態(tài)時只有一條CAN總線與通道運(yùn)行，并設(shè)有CAN控制器，可控制總線與通道的轉(zhuǎn)換，出現(xiàn)故障時，根據(jù)判斷切換，保證其正常運(yùn)轉(zhuǎn)，顯示器會判斷故障類型，分別為通道故障與總線通信故障，完成判斷后向故障判斷機(jī)制發(fā)送故障狀態(tài)。系統(tǒng)中都是采用備份的方式進(jìn)行運(yùn)轉(zhuǎn)，目的是提高系統(tǒng)的可靠性，通信在正常運(yùn)作中會實(shí)時跟蹤監(jiān)控總線接收的錯誤計算，發(fā)生故障時，對接收與發(fā)送出錯的各節(jié)點(diǎn)賦予數(shù)值并進(jìn)行累加[12]。顯示器線路圖如圖4所示。

綜上，完成了對基于符號學(xué)的網(wǎng)頁界面視覺展示系統(tǒng)硬件部分的設(shè)計，通過對信息采集器、處理器和顯示器的設(shè)計達(dá)到對網(wǎng)頁界面視頻數(shù)據(jù)、音頻數(shù)據(jù)和文字?jǐn)?shù)據(jù)的采集與處理，為系統(tǒng)的軟件設(shè)計提供基礎(chǔ)。

2 ?基于符號學(xué)的網(wǎng)頁界面視覺展示系統(tǒng)軟件設(shè)計

人們將接收到的視覺符號進(jìn)行處理，從而獲取信息、信息交流，采取行動。符號學(xué)是一種應(yīng)用廣泛的交流規(guī)則，其具體包含符號、語用學(xué)以及語義學(xué)。具體來講，符號學(xué)是指以符號概括文字信息和圖片信息，展示事物的發(fā)展規(guī)律。從符號學(xué)的角度出發(fā)，產(chǎn)生了產(chǎn)品設(shè)計符號學(xué)、圖文設(shè)計符號學(xué)以及計算機(jī)符號學(xué)。符號在進(jìn)行傳達(dá)的過程中，實(shí)際上是將圖文信息進(jìn)行編碼，人們在接收到編碼信息后，將其轉(zhuǎn)化成具體的信息。

將符號學(xué)理論引入網(wǎng)頁界面視覺展示系統(tǒng)軟件設(shè)計中，設(shè)計的軟件流程圖如圖5所示。

為了能夠更好地支持硬件功能的實(shí)現(xiàn)，對軟件進(jìn)行設(shè)計時選用BIOS和Linux作為軟件操作平臺[13]。軟件設(shè)計的符號要符合人的固有思維，盡量讓讀者能夠一眼理解其中的含義。觀察圖5可知，網(wǎng)頁界面視覺展示系統(tǒng)軟件流程主要分為三步：

第一步：設(shè)計圖標(biāo)。利用人眼跟蹤方法在界面上繪制圖標(biāo)，分析人在觀察圖像時，視線的流動方式以及在腦海中對每一個畫面線條的認(rèn)知。設(shè)計圖標(biāo)要精確到每一個細(xì)節(jié)，思考顯示界面面對的用戶類型，選取更加合適的圖標(biāo)。同時，設(shè)計的圖標(biāo)要跟界面相符，不能過大，也不能過小，要在滿足屏幕布局的基礎(chǔ)上盡可能地做到大方、美觀。

第二步：風(fēng)格統(tǒng)一。網(wǎng)頁界面視覺展示系統(tǒng)要能夠?qū)⒄故镜乃袃?nèi)容風(fēng)格統(tǒng)一化，使外觀更加清晰。界面使用的色彩要協(xié)調(diào)一致，選取一種顏色作為主色調(diào)，選擇其他顏色時，要盡量與主色調(diào)顏色相近或者能夠搭配。如果展示界面顏色搭配不和諧，會影響使用者的視覺效果。設(shè)定基本的操作模式，使操作界面更加規(guī)范化，網(wǎng)頁界面顯示的每一個內(nèi)容都要遵循統(tǒng)一的顯示規(guī)定。

第三步：個性化設(shè)計。展示系統(tǒng)不能只追求整體性和一致性，而忽略了軟件的個性化。界面要有合理的排版模式和獨(dú)特的使用風(fēng)格，界面內(nèi)部要擁有專用的界面圖標(biāo)，使用戶使用起來更加容易，識別起來更加簡單。在個性化設(shè)計的同時，不可以影響圖像和圖形的輸出質(zhì)量。

綜上所述，完成了對基于符號學(xué)的網(wǎng)頁界面視覺展示系統(tǒng)硬件與軟件方面的整體設(shè)計。下面需要對改進(jìn)系統(tǒng)的性能進(jìn)行實(shí)驗(yàn)，以此來驗(yàn)證系統(tǒng)的性能。

3 ?驗(yàn)證實(shí)驗(yàn)

為了檢測基于符號學(xué)的網(wǎng)頁界面視覺展示系統(tǒng)的實(shí)際效果，以內(nèi)容展示清晰度和系統(tǒng)運(yùn)行效率作為實(shí)驗(yàn)指標(biāo)進(jìn)行對比實(shí)驗(yàn)，分析本文系統(tǒng)與傳統(tǒng)系統(tǒng)的不同。

3.1 ?實(shí)驗(yàn)參數(shù)設(shè)置

設(shè)置實(shí)驗(yàn)參數(shù)如表1所示。

3.2 ?實(shí)驗(yàn)結(jié)果與分析

根據(jù)上述參數(shù)進(jìn)行實(shí)驗(yàn)，選用所提系統(tǒng)和傳統(tǒng)展示系統(tǒng)同時對同等數(shù)據(jù)進(jìn)行展示，分析頁面清晰度，根據(jù)結(jié)果對兩種系統(tǒng)的性能進(jìn)行具體分析。得到的實(shí)驗(yàn)結(jié)果如表2所示。

觀察表2可以發(fā)現(xiàn)，隨著設(shè)計次數(shù)的增加，傳統(tǒng)系統(tǒng)和所提系統(tǒng)的分辨率也在逐漸增加，但傳統(tǒng)系統(tǒng)的增加幅度很小，所提系統(tǒng)的增加幅度很大。當(dāng)設(shè)計次數(shù)達(dá)到6次時，所提展示系統(tǒng)的分辨率可以達(dá)到5 450×5 000，而傳統(tǒng)展示系統(tǒng)的分辨率僅為2 500×3 500。由此可見，在相同成本下，基于符號學(xué)的網(wǎng)頁界面視覺展示系統(tǒng)分辨率更高，給用戶的視覺體驗(yàn)更好。

分析表6可知，傳統(tǒng)系統(tǒng)的運(yùn)行效率整體低于30%，而本文系統(tǒng)的運(yùn)行效率高于傳統(tǒng)系統(tǒng)，雖然在實(shí)驗(yàn)開始階段，該系統(tǒng)存在短暫的不穩(wěn)定性，但是隨著時間的增長，本文系統(tǒng)的運(yùn)行效率呈現(xiàn)持續(xù)增長的趨勢。說明本文系統(tǒng)能夠快速地將視覺信息傳達(dá)給用戶，及時性較強(qiáng)。

4 ?結(jié) ?語

網(wǎng)頁界面是操作系統(tǒng)的基本界面，為用戶信息傳遞提供了一個平臺，良好的展示系統(tǒng)能夠使用戶有更優(yōu)的視覺體驗(yàn)，信息溝通也更加方便。本文引用符號學(xué)原理設(shè)計了一種新的網(wǎng)頁界面視覺展示系統(tǒng)，該系統(tǒng)能夠提高交互效果，并且信息傳達(dá)具有及時性的特點(diǎn)，讓信息以最有效的方式在用戶之間進(jìn)行傳遞。重點(diǎn)設(shè)計了采集器、處理器和顯示器，設(shè)計結(jié)果符合人的思維方式、視覺、知覺和交流方式。分析信息交流的重要參數(shù)，設(shè)計的結(jié)果具有較高的可靠性，對于互聯(lián)網(wǎng)的發(fā)展有一定的參考意義。未來將進(jìn)一步完善網(wǎng)頁界面視覺展示系統(tǒng)，并進(jìn)行更深一步的探討和分析。

參考文獻(xiàn)

[1] 劉群，王倩.基于符號學(xué)的漢字圖形化視覺表現(xiàn)研究[J].黑河學(xué)院學(xué)報，2017，8（5）：163?164.

LIU Qun， WANG Qian. Research on graphical visualization of Chinese characters based on semiotics [J]. Journal of Heihe University， 2017， 8（5）： 163?164.

[2] 楊洋，楊程.界面設(shè)計中基于符號學(xué)的設(shè)計元素提取方法研究[J].大眾文藝，2018，22（2）：37?38.

YANG Yang， YANG Cheng. Research on extraction method of design elements based on semiotics in interface design [J]. Po?pular art， 2018， 22（2）： 37?38.

[3] 朱潤秋，傅蓉蓉.基于皮爾斯符號學(xué)的民國刊物設(shè)計及傳播研究：以《良友》畫報為例[J].設(shè)計，2018，58（1）：115?117.

ZHU Runqiu， FU Rongrong. Research on the design and communication of republic of china publications based on pierce semiotics： taking the "Liangyou" pictorial as an example [J]. Design， 2018， 58（1）： 115?117.

[4] 戚羽絲.基于符號學(xué)理論的文字表情設(shè)計創(chuàng)作與應(yīng)用[J].包裝與設(shè)計，2017，62（6）：96?97.

QI Yusi. Creation and application of literal expression design based on semiotic theory [J]. Packaging and design， 2017， 62（6）： 96?97.

[5] 單筱秋.淺議圖形符號在人機(jī)交互界面中的應(yīng)用[J].南京藝術(shù)學(xué)院學(xué)報：美術(shù)與設(shè)計，2017，69（6）：185?187.

SHAN Xiaoqiu. Discussion on the application of graphic symbols in human?computer interface [J]. Journal of Nanjing University of the Arts： art and design， 2017， 69（6）： 185?187.

[6] 付彧.基于符號學(xué)的手機(jī)APP圖標(biāo)圖形設(shè)計方法研究[J].包裝工程，2017，38（10）：90?94.

FU Yu. Research on graphic design method of mobile APP icon based on semiotics [J]. Packaging engineering， 2017， 38（10）： 90?94.

[7] 王夢瑩.圖形設(shè)計與符號學(xué)原理在視覺傳達(dá)中的運(yùn)用研究[J]. 赤峰學(xué)院學(xué)報（自然科學(xué)版），2017，33（16）：31?32.

WANG Mengying. Research on the application of graphic design and semiotics in visual communication [J]. Journal of Chifeng University （natural science）， 2017， 33（16）： 31?32.

[8] 張玉嬋.基于符號學(xué)導(dǎo)向的民國唱片封套中的變體美術(shù)字研究[J].工業(yè)設(shè)計，2017，61（1）：131.

ZHANG Yuchan. Research on variant art characters in the album cover of the Republic of China based on semiotics orientation [J]. Industrial design， 2017， 61（1）： 131.

[9] 胡凡.基于商業(yè)圈視覺導(dǎo)視系統(tǒng)的設(shè)計基礎(chǔ)探究[J].美術(shù)教育研究，2017，96（21）：80.

HU Fan. Research on the design basis of visual guidance system based on business circle [J]. Art education research， 2017， 96（21）： 80.

[10] 王兆陽.設(shè)計符號學(xué)在產(chǎn)品包裝設(shè)計中的應(yīng)用價值[J].藝海，2017，36（8）：100?101.

WANG Zhaoyang. Application value of design semiotics in product packaging design [J]. Yihai， 2017， 36（8）： 100?101

[11] 武爽，姚音竹，張書鴻.古村落中象征型符號在居室設(shè)計的應(yīng)用研究：以江西婺源為例[J].家具與室內(nèi)裝飾，2017，91（12）：14?15.

WU Shuang， YAO Yinzhu， ZHANG Shuhong. Application research of symbolic symbols in ancient villages in residential design： taking Jiangxi Wuyuan as an example [J]. Furniture and interior decoration， 2017， 91（12）： 14?15.

[12] 趙鐸.基于層次輪廓計算機(jī)視覺的交通路標(biāo)識別[J].電子設(shè)計工程，2017，25（14）：123?126.

ZHAO Duo. Traffic road sign recognition based on computer vision outline level [J]. Electronic design engineering， 2017， 25（14）： 123?126.

[13] 王柳兵，景軍鋒，蘇澤斌.基于WebGL的紐扣三維展示系統(tǒng)[J].西安工程大學(xué)學(xué)報，2017，31（5）：606?611.

WANG Liubing， JING Junfeng， SU Zebin. A 3D display system of buttons based on WebGL [J]. Journal of Xian Polytechnic University， 2017， 31（5）： 606?611.