金云JIN Yun 方興FANG Xing 王雅溪WANG Yaxi

1.武漢理工大學(xué)，武漢 430070（WuHan University of Technology，430070 Wuhan）2.武漢工程大學(xué)，武漢 430205（WuHan Institute of Technology，430205 Wuhan）

手機(jī)界面文字設(shè)計(jì)的分析方法研究 *
—— 以智能手機(jī)網(wǎng)絡(luò)為中心

金云1，2JIN Yun 方興1FANG Xing 王雅溪2WANG Yaxi

1.武漢理工大學(xué)，武漢 430070（WuHan University of Technology，430070 Wuhan）2.武漢工程大學(xué)，武漢 430205（WuHan Institute of Technology，430205 Wuhan）

在智能手機(jī)文字設(shè)計(jì)方面，作為其相互作用研究的先行研究，探索了包含各種表現(xiàn)樣式的智能手機(jī)文字設(shè)計(jì)分析方法。分為界面組件和內(nèi)容分類過程、文字設(shè)計(jì)組件的分析過程，以及綜合分析過程這3個(gè)階段來進(jìn)行分析，并且在模式化、詳細(xì)化的設(shè)計(jì)開發(fā)過程中，使用與智能手機(jī)文字設(shè)計(jì)向?qū)囝愃频募皶r(shí)反饋，對(duì)智能手機(jī)文字設(shè)計(jì)的分析方法進(jìn)行分類，以能夠提前審查設(shè)計(jì)的預(yù)期效果。

移動(dòng)界面；文本設(shè)計(jì)元素；文本；圖形；文本結(jié)構(gòu)

一、引言

對(duì)于現(xiàn)代社會(huì)中的人來說，智能手機(jī)是必不可少的。通過智能手機(jī)顯示屏提供的服務(wù)或內(nèi)容，無論在種類方面還是數(shù)量方面都有長(zhǎng)足發(fā)展，同時(shí)，和現(xiàn)存顯示屏的分辨率相契合的文字設(shè)計(jì)也逐漸融入到人們的生活之中。

依據(jù)設(shè)計(jì)的原理，智能手機(jī)顯示屏的文字設(shè)計(jì)構(gòu)成要素之間存在著相互依存的關(guān)系。為了更好地進(jìn)行文字設(shè)計(jì)，計(jì)劃對(duì)智能手機(jī)的內(nèi)容和界面組件進(jìn)行分類，并且分析文字要素，之后在模式化、詳細(xì)化的設(shè)計(jì)開發(fā)過程中，提出有益的文字設(shè)計(jì)分析方法。

二、智能手機(jī)內(nèi)容和界面

1.智能手機(jī)內(nèi)容分類

隨著智能手機(jī)相關(guān)內(nèi)容的發(fā)展，智能手機(jī)的內(nèi)容已不只是音樂服務(wù)區(qū)，同時(shí)，多媒體服務(wù)，通訊服務(wù)和商務(wù)功能等多樣的服務(wù)也在不斷發(fā)展［1］。依據(jù)內(nèi)容的性質(zhì)，界面和文字設(shè)計(jì)形態(tài)以及使用目的都能夠做到多樣化、細(xì)致化。研究準(zhǔn)備以智能手機(jī)界面為基礎(chǔ)，提出文字設(shè)計(jì)的分析方法，并由此限定智能手機(jī)網(wǎng)絡(luò)的內(nèi)容分類。

2.智能手機(jī)文字設(shè)計(jì)的界面構(gòu)成原理

界面原本是化學(xué)用語，指兩物質(zhì)之間的接觸面。但是，我們現(xiàn)在使用的界面是指用戶界面（User Interface）［2］。界面設(shè)計(jì)是為了使電腦和用戶之間，能夠更為融洽地進(jìn)行相互了解。所以，設(shè)計(jì)者應(yīng)該首先考慮用戶的認(rèn)識(shí)方式所給出的設(shè)計(jì)信息，再考慮視覺性要素，由此完成的設(shè)計(jì)成果包涵在界面設(shè)計(jì)中［3］。

為了實(shí)現(xiàn)設(shè)計(jì)目的，考慮應(yīng)如何結(jié)合各個(gè)要素，來規(guī)劃構(gòu)成方案是界面構(gòu)成原理的職責(zé)。界面構(gòu)成原理包含統(tǒng)一原理、均衡原理，對(duì)比原理、比例原理，強(qiáng)調(diào)原理［4］。

對(duì)于文字設(shè)計(jì)，通過視覺閱讀的方式要比直接朗讀的方式更有效果，在有韻味的裝飾或者現(xiàn)代型的文字設(shè)計(jì)中，與文字字體的美學(xué)價(jià)值相比，更應(yīng)該將瀏覽的人能否快速地閱讀這個(gè)功能作為核心。

在智能手機(jī)文字設(shè)計(jì)的界面中，不僅是在構(gòu)成要素的審美方面，而且在考慮怎樣排列能夠提高用戶的理解和效率性這個(gè)功能性方面，也一定要使用合適的視覺性構(gòu)成原理。

3.智能手機(jī)界面設(shè)計(jì)組件

依據(jù)內(nèi)容分類，智能手機(jī)界面設(shè)計(jì)的組件有所不同。依據(jù)構(gòu)成原理，各組件之間存在相互依存的關(guān)系。雖然分類智能手機(jī)界面各要素的方法有很多，但是其研究?jī)?nèi)容，是以智能手機(jī)網(wǎng)絡(luò)為主的。所以，將構(gòu)成區(qū)分為標(biāo)題區(qū)，菜單區(qū)、內(nèi)容區(qū)，廣告區(qū)，其他區(qū)，背景區(qū)（見圖1）。

圖1　智能手機(jī)界面設(shè)計(jì)構(gòu)成區(qū)域①

智能手機(jī)界面組件可以表現(xiàn)為字符或字符和圖像結(jié)合的形式，根據(jù)構(gòu)成領(lǐng)域的不同，組件可分為菜單、標(biāo)題、背景、內(nèi)容、廣告、其他等（見表1）。

表1　構(gòu)成領(lǐng)域的組件

2.文字設(shè)計(jì)元素

一般設(shè)計(jì)元素分為概念元素、視覺元素、相關(guān)元素這3部分。概念元素是指點(diǎn)、線、面、量等。視覺元素是指顏色、質(zhì)感、形態(tài)、結(jié)構(gòu)等。給設(shè)計(jì)造成影響的相關(guān)元素，是指空間、重量、方向、位置等（見表2）。

表2　文字設(shè)計(jì)要素和說明

三、智能手機(jī)文字設(shè)計(jì)

1.現(xiàn)代漢字的形態(tài)和結(jié)構(gòu)

漢字在中國(guó)悠久的文化歷史變遷下，文字形態(tài)也在不斷地演變。最近幾十年來，漢字筆畫經(jīng)過反復(fù)調(diào)整，結(jié)構(gòu)趨于簡(jiǎn)單化。中國(guó)簡(jiǎn)體漢字筆畫中一橫一豎最多，以筆畫為基礎(chǔ)， 象形表意［5］［6］（見圖2、圖3）。

圖2　漢字的組合形式［6］

圖3　漢字的組合結(jié)構(gòu)②

四、智能手機(jī)文字設(shè)計(jì)的分析方法

依據(jù)智能手機(jī)內(nèi)容和信息結(jié)構(gòu)的不同來分類界面組件，以相應(yīng)文字組件的使用用途和表現(xiàn)方法為基礎(chǔ)，提出智能手機(jī)文字設(shè)計(jì)的分析方法。

1.標(biāo)本采集

隨著智能手機(jī)屏幕畫面保存方法的多樣化，大部分的手機(jī)都帶有屏幕保存功能。因?yàn)楦鶕?jù)標(biāo)本收集的種類不同，屏幕比例會(huì)有差異，所以為了有效地運(yùn)用截屏功能，需要先分類屏幕比例再進(jìn)行收集。

2.分析方法

研究中提出的智能手機(jī)文字設(shè)計(jì)分析方法，可以分為界面組件和內(nèi)容分類過程、文字設(shè)計(jì)組件分析過程，以及綜合分析過程這3個(gè)階段來予以整理（見表3）。

表3　智能手機(jī)界面的文字設(shè)計(jì)分析方法流程

在內(nèi)容分類的過程中，我們對(duì)分析對(duì)象智能手機(jī)內(nèi)容的類型進(jìn)行分類。對(duì)界面組件，我們則根據(jù)研究進(jìn)行先分析后分類。對(duì)于智能手機(jī)設(shè)計(jì)的組件分析，我們需要通過分析具體文字設(shè)計(jì)結(jié)構(gòu)的過程以及表現(xiàn)方法來進(jìn)行分類。在綜合分析的過程中，我們整理收集材料，并以此為基礎(chǔ)完成綜合考察和分析。

3.分析方法

我們的研究計(jì)劃是以智能手機(jī)界面為基礎(chǔ)，來提出文字設(shè)計(jì)的分析方法，所以智能手機(jī)內(nèi)容分類和界面精密分析，是超出本研究范圍的部分。我們將分析對(duì)象限定為智能手機(jī)網(wǎng)絡(luò)內(nèi)容，通過智能手機(jī)的屏幕截圖功能來收集數(shù)據(jù)，是為了使用便利化、符號(hào)化的縮略語并且整理分類記號(hào)。網(wǎng)頁界面組件的表達(dá)方法，具體如下（見表4）。

表4　智能手機(jī)界面各區(qū)的表達(dá)方法

分類界面是指除開各個(gè)元素的概念元素，通過視覺元素和相關(guān)元素將文字設(shè)計(jì)元素細(xì)節(jié)化，并且分析構(gòu)成元素表達(dá)方法的過程。

（1）視覺元素。智能手機(jī)文字設(shè)計(jì)的視覺元素，包含顏色、大小、效果、形態(tài)等，其表達(dá)方法具體如下（見表5）。

表5　智能手機(jī)文字設(shè)計(jì)各個(gè)要素的表達(dá)方法

（2）相關(guān)元素。智能手機(jī)文字設(shè)計(jì)的相關(guān)因素，包含文字的位置、文字之間的間距與方向、文字的背景顏色與筆畫數(shù)等，其表達(dá)方法具體如下（見表6）。

表6　智能手機(jī)文字設(shè)計(jì)相關(guān)元素和標(biāo)記方法

以上面的縮略語為基礎(chǔ)，來分析文字設(shè)計(jì)要素并記錄圖像，記錄順序按內(nèi)容、界面、視覺元素、相關(guān)元素的順序來表達(dá)（見圖4）。

圖4　智能手機(jī)文字要素分析圖像記錄示例③

4.綜合分析過程

在智能手機(jī)文字設(shè)計(jì)分析的過程中，有整理提煉資料階段和記錄階段。根據(jù)智能手機(jī)內(nèi)容和界面元素的不同，文字的功能也存在著差異。因此，我們需要通過各個(gè)功能相同的界面元素來分析并活用數(shù)據(jù)。

由此可知，數(shù)據(jù)組應(yīng)放在首要位置，為了更有效地分析收集到的數(shù)據(jù)，我們需要建立和分析用途相符合的各個(gè)文件夾并保管。

同時(shí)，我們需要記錄文件的范圍和縮略語，并且要做到可以識(shí)別文件的種類和大小。接著為了進(jìn)行系統(tǒng)性分析和數(shù)據(jù)保存，分析記錄收集到的數(shù)據(jù)，我們需要先生成一個(gè)記錄表（見表7），再進(jìn)行和用途相符合的記錄。分析者可以隨時(shí)使用分析記錄表，并且為了功能性和方便性，需要給研究人員提供相應(yīng)的記錄工具。對(duì)于智能手機(jī)的限制性，在考慮了其使用性的前提下，為了使信息傳達(dá)更好地進(jìn)行，我們還需要注意可變性和解讀性。研究可以對(duì)以下數(shù)據(jù)進(jìn)行分析。

表7　智能手機(jī)文字設(shè)計(jì)分析記錄表

（1）在內(nèi)容分類中，基于界面元素，能夠了解到字符的類型和用途。

（2）與文字的數(shù)量無關(guān)，能夠有效地進(jìn)行簡(jiǎn)單、快速的閱讀，才是更為重要的。同時(shí)，底色、字體類型的重量感等，都會(huì)對(duì)可變性產(chǎn)生影響。

（3）通過對(duì)文字元素的分類，能夠正確分析文字元素的大小、停頓等。在快速了解內(nèi)容方面，解讀性對(duì)于進(jìn)行短文閱讀的人來說是很有幫助的。依據(jù)使用目的，對(duì)文字的對(duì)齊、字符間隔、行間距等進(jìn)行適當(dāng)?shù)男Ｕ?，是非常必要的。因?yàn)橥ㄟ^視覺性信息來解讀信息，能夠有效地提高閱讀的效率。

（4）在文字元素中，理解符號(hào)元素使得我們正確地掌握和分類智能手機(jī)文字設(shè)計(jì)的特性成為可能。以此為基礎(chǔ)，我們可以提出智能手機(jī)文字設(shè)計(jì)的開發(fā)方向。

五、結(jié)論

隨著智能手機(jī)的不斷進(jìn)步，其不僅包含了現(xiàn)有媒體的所有特性而且攜帶性好。智能手機(jī)文字設(shè)計(jì)以具備形態(tài)性和功能性的作品為大宗，其文字設(shè)計(jì)領(lǐng)域的快速發(fā)展，也引起了人們爆炸性的需求。

到目前為止，智能手機(jī)文字設(shè)計(jì)的方法論還沒有得到深入的發(fā)展，只是剛剛起步。所以，建立使智能手機(jī)文字設(shè)計(jì)的分析用途有效執(zhí)行的設(shè)計(jì)方法論，就是刻不容緩的了。

本研究以智能手機(jī)界面元素為基礎(chǔ)，探索為了使文字有效使用的設(shè)計(jì)分析方法。我們根據(jù)內(nèi)容，分類界面元素并且分析文字設(shè)計(jì)組件和表達(dá)方法。并且，在模式化、詳細(xì)化的設(shè)計(jì)開發(fā)過程中，我們使用與智能手機(jī)文字設(shè)計(jì)向?qū)囝愃频募皶r(shí)反饋，分類出智能手機(jī)文字設(shè)計(jì)的分析方法，并期待能夠提前審查設(shè)計(jì)的預(yù)期結(jié)果。

此外，智能手機(jī)內(nèi)容的有形化，以及以此為基礎(chǔ)形成的與界面相關(guān)的研究是相對(duì)較少的。所以，我們期待日后能夠進(jìn)一步有效地開展掌握智能手機(jī)內(nèi)容分類，以及與界面分析有關(guān)的系統(tǒng)性、合理性研究。

注釋

① 圖1來源：圖1中的左圖部分為作者根據(jù)http：// m.qq.com再制作；圖1中的右圖部分為作者根據(jù)http：//m.naver.com再制作而成.

②圖3來源：作者自制.

③圖4來源：作者根據(jù)http：//m.qq.com再制作而成.

［1］ NAM GYEONG-HWA.Study on Convergence Trend Base on Mobile Content's Classification System［D］.Seoul：Sungshin Women's UniverSity，2009：10.

［2］ YU JI-HUI.A Study on the Evaluation of Mobile Website Interface in Academic Libraries［D］.Seoul：Dongduk Women's University，2015：6.

［3］ XIN RAN.The impact of interface design on user preferefces from the perspective of internet shopping mall［D］.Seoul：Chung -Ang University，2016：6.

［4］ LEE HYUN-JU，LEE JUNG-HYUN，BANG KYUNG-RHAN，RYOO SUNG-HYUN，SHIN KYE-OK，LEE EUN-JOO. Study in Analyzing Method of Web Interface Design［J］.Journal of Korea Society of Design Science，2001，14（2）：210-215.

［5］ LEE JIN-WOO.The investingation of the design and construction of the simplified printiong Chinese letters：The overlook of future and direction of the simplified printing Chinese letters from congnitive psychology［D］.Seoul：Sangmyung University，2016：17-21.

［6］ SEO A-HAM.study on online chatting terms in Chinese with the characteristics［D］. Busan：Dongseo University，2016：15.

（責(zé)任編輯 孫玉萍）

Research on the Analysis Method of Text Design in Mobile Phone Interface： Centered on the Network of Smart phone

As a preceding study on the interaction design，the research of smart phone text design analyzes a variety of analysis methodsof mobile text design. The analysis is carried in three stages， including the process of interface components and content classifi cation， the process of text design components analysis and the process of comprehensive analysis.On analyzing the modeled and specifi c course of design and development， the research classifi es the analysis methods through a timely feedback similar to the guidance of smart phone text design. On this basis the anticipated effect of the design could be examined.

Mobile interface；text design elements；text；shapes；text structure

J0-03

A

10.3963/j.issn.2095-0705.2016.05.005（0023-07）

2016-07-24

2015年度武漢工程大學(xué)科學(xué)研究基金項(xiàng)目（K201529）。

金云，武漢理工大學(xué)藝術(shù)與設(shè)計(jì)學(xué)院博士生，武漢工程大學(xué)藝術(shù)設(shè)計(jì)學(xué)院副教授；方興，武漢理工大學(xué)藝術(shù)與設(shè)計(jì)學(xué)院教授、博士生導(dǎo)師；王雅溪，博士，武漢工程大學(xué)藝術(shù)設(shè)計(jì)學(xué)院講師。