比例與尺度在手機(jī)APP界面設(shè)計(jì)中的應(yīng)用

摘 要：版式設(shè)計(jì)的常見布局有十三種：骨骼型，滿版型、上下分割型、左右分割型、中軸型、曲線型、傾斜型、對(duì)稱型、重心型、三角型、并置型、自由型、四角型等。

關(guān)鍵詞：比例與尺度；手機(jī)APP；視覺

一、 手機(jī)APP界面的版式設(shè)計(jì)

移動(dòng)界面按照其產(chǎn)品功能可以分為兩大類：信息展示型界面和功能操作型界面。

（一） 信息展示型界面

我們常見的以閱讀和傳遞信息為主的界面有：新聞、天氣、閱讀、購物、音樂、食譜、健康等APP的某些界面，另外還有新手引導(dǎo)頁也是比較常見的以傳遞信息為主的頁面。

（二） 功能操作型界面

以功能操作為主的界面主要是引導(dǎo)用戶操作，所以常見的布局主要有上下分割型、左右分割型、中軸型等。

二、 觸屏手機(jī)界面的視覺形式研究

隨著人們對(duì)時(shí)尚、趣味、和審美的不斷追求，觸屏手機(jī)界面設(shè)計(jì)也在探索新的視覺效果。在短短數(shù)年間，便有大量精美、新穎、富有創(chuàng)造力和想象力的觸屏界面設(shè)計(jì)展現(xiàn)到了人們的眼前。但并不是每個(gè)設(shè)計(jì)都可以得到用戶的認(rèn)可。就如同花哨并不等于美麗一樣，觸屏手機(jī)界面的美不僅是一種表象，更是一種實(shí)質(zhì)的提現(xiàn)。

觸屏手機(jī)界面設(shè)計(jì)是一個(gè)年輕又充滿活力的設(shè)計(jì)分支，它需要滿足目標(biāo)用戶的審美觀、使用目的和心理情感等等。觸屏手機(jī)界面設(shè)計(jì)應(yīng)該為用戶創(chuàng)造有價(jià)值的、令人注目的信息和交互體驗(yàn)，讓用戶通過與觸屏手機(jī)界面的互動(dòng)達(dá)到體驗(yàn)上的滿足和心理上的愉悅。為了達(dá)到這一點(diǎn)，在設(shè)計(jì)觸屏手機(jī)界面的時(shí)候，必須充分考慮到各個(gè)視覺元素的樣式，以及在不同操作狀態(tài)下它們的視覺效果。

觸屏手機(jī)界面視覺形式包含的具體內(nèi)容很多，概括來說主要有文字、色彩、圖標(biāo)、導(dǎo)航、圖像和圖表、以及版式等。

（一） 文字

科學(xué)技術(shù)的發(fā)展使文字早已不再只局限在某一特定的媒介上。文字作為人類最古老的信息傳播載體之一，從最初的甲骨文、活字印刷等發(fā)展到現(xiàn)在的信息技術(shù)環(huán)境下的、以新媒體為媒介的屏幕文字，其漫長的發(fā)展演變歷史證明了文字的生存能力、實(shí)用性和極強(qiáng)的適應(yīng)力。在移動(dòng)終端蓬勃發(fā)展的今天，觸屏手機(jī)屏幕中的文字又一次開始適應(yīng)科技的腳步。

觸屏手機(jī)界面中的文字是影響觸屏手機(jī)界面視覺設(shè)計(jì)的重要視覺元素之一。為了適應(yīng)以數(shù)字技術(shù)為基礎(chǔ)發(fā)展起來的觸屏手機(jī)界面，達(dá)到更好的視覺效果，文字要在不同的傳播環(huán)境下展現(xiàn)不同的形態(tài)。

文字的主要功能是在向用戶傳達(dá)文本的信息和意圖。為了達(dá)到這一目的，設(shè)計(jì)師必須考慮文字的整體訴求效果，以給人一種清晰的視覺印象。

和傳統(tǒng)按鍵式手機(jī)不同，觸屏手機(jī)由于顯示屏尺寸較大，其界面上的文本大多是可以觸摸操作的。在觸屏手機(jī)界面設(shè)計(jì)時(shí)，要確保用戶在操作中對(duì)文字的識(shí)別性與可理解性，減少用戶發(fā)生錯(cuò)誤操作的幾率。

（二） 圖標(biāo)

圖標(biāo)是具有指代意義的具有標(biāo)識(shí)性質(zhì)的圖形。在觸屏手機(jī)界面中，圖標(biāo)是一種功能標(biāo)識(shí)，扮演著極為重要的角色。它不僅可以代表一個(gè)文檔、一個(gè)應(yīng)用程序、一個(gè)指令，還可以通過點(diǎn)擊圖標(biāo)執(zhí)行一段命令或打開某種類型的文件等。

一個(gè)好的圖標(biāo)往往會(huì)反映應(yīng)用程序及其生產(chǎn)商的某些信息，特別是對(duì)一個(gè)觸屏手機(jī)的應(yīng)用程序來說，用戶可以從圖標(biāo)的外觀基本了解到這個(gè)應(yīng)用的類型或內(nèi)容。在一個(gè)布滿各種圖標(biāo)的界面中，只有主題突出的圖標(biāo)才會(huì)突顯出來。試想一下，一個(gè)能讓用戶輕易看到，并能一眼就確定其類型內(nèi)容的圖標(biāo)，對(duì)置身于龐大市場上的應(yīng)用程序會(huì)有多重要。

（三） 版式

觸屏手機(jī)界面的版式設(shè)計(jì)，就是在觸屏手機(jī)界面上，將有限的視覺元素進(jìn)行有機(jī)的排列組合。觸屏手機(jī)界面版式設(shè)計(jì)有著極其重要的地位。雖然基于不同的平臺(tái)，但報(bào)刊、雜志、網(wǎng)站等平面媒體的版式設(shè)計(jì)有很多共同之處，都是將理性思維個(gè)性化地表現(xiàn)出來，在傳達(dá)信息的同時(shí)，也產(chǎn)生感官上的美感，是一種具有個(gè)人風(fēng)格和藝術(shù)特色的視覺傳送方式。

三、 觸屏手機(jī)界面的版式設(shè)計(jì)

（一） 布局要有原則

布局是對(duì)事物的全面規(guī)劃和安排。一個(gè)合理的布局對(duì)觸屏手機(jī)界面的版式設(shè)計(jì)尤為重要。觸屏手機(jī)顯示屏雖然比傳統(tǒng)手機(jī)的尺寸大了不少，但是設(shè)計(jì)空間仍有限，在這有限的界面中，合理的布局能增加用戶人機(jī)互動(dòng)的流暢度，幫助用戶找到自己關(guān)注的對(duì)象。

一個(gè)好的觸屏手機(jī)界面設(shè)計(jì)不會(huì)把全部的信息都排在同一個(gè)模塊上，那樣會(huì)產(chǎn)生信息的積壓，容易給用戶帶來負(fù)面的影響和心理上的不適。在設(shè)計(jì)觸屏手機(jī)界面的版式時(shí)，必須要有一定的主次區(qū)別，將主次拉開，有主有次才能給予用戶清晰的指導(dǎo)。

基于觸屏手機(jī)屏幕的大小有限，在設(shè)計(jì)時(shí)，應(yīng)將最常使用的高度概括的信息、或者一些常規(guī)操作（如添加、保存、取消、完成等）置于屏幕頂端，突顯主題，便于操作。屏幕的底部一般是輔助性的工具欄，在模塊中屬于固定的位置固定的存在，一些較重要的操作如果出現(xiàn)在屏幕下半?yún)^(qū)域的話，要仔細(xì)考慮它們的排列設(shè)計(jì)。界面主次的區(qū)分有時(shí)候會(huì)造成定量的信息無法完全排進(jìn)模塊中，這時(shí)候，我們可以把不同的功能分類，然后采取打開鏈接的方式逐個(gè)操作；也可以采用模塊大于屏幕大小、用手指拖動(dòng)模塊進(jìn)行全方位移動(dòng)的方式來快速閱覽。這樣可以讓用戶更簡單的獲取信息和所需要的功能服務(wù)。

（二） 版式設(shè)計(jì)依賴于點(diǎn)線面的構(gòu)成

觸屏手機(jī)界面的版式設(shè)計(jì)依賴于點(diǎn)線面的構(gòu)成。由于觸屏手機(jī)軟件所處的運(yùn)行環(huán)境沒有電腦空間大，所以控制軟件自身的體積大小是十分必要的，有的應(yīng)用軟件因?yàn)檎加玫膬?nèi)存過大，而成為用戶優(yōu)先選擇卸載的項(xiàng)目。因此，在將體積較大的信息（如圖像、FLASH 等）排進(jìn)程序的時(shí)候，應(yīng)當(dāng)根據(jù)需要進(jìn)行適當(dāng)?shù)暮Y選和切分。單色的點(diǎn)、線和面是可以由程序自身來呈現(xiàn)的，所以在這個(gè)范圍內(nèi)可以節(jié)省空間。大塊面的色彩和點(diǎn)、線的組合是現(xiàn)代設(shè)計(jì)的發(fā)展趨勢，不僅版式時(shí)尚大氣，且信息傳遞的精準(zhǔn)度也高。所以，結(jié)合點(diǎn)線面基本元素的版式設(shè)計(jì)，不僅有效壓縮了應(yīng)用程序的體積，減小了觸屏手機(jī)的負(fù)擔(dān)，更凸顯了時(shí)代感，給用戶帶來輕松的操作體驗(yàn)。

需要注意的是，在設(shè)計(jì)觸屏手機(jī)界面的版式過程中，設(shè)計(jì)師應(yīng)當(dāng)在通過與程序員的密切溝通后再對(duì)需要優(yōu)化的圖形圖像進(jìn)行處理，繼而交由程序員進(jìn)行版式的二次組合，以避免失誤。

（三） 版式設(shè)計(jì)要基于應(yīng)用范疇

觸屏手機(jī)界面版式的設(shè)定，很大程度上需要考慮應(yīng)用軟件的功能范疇。應(yīng)用軟件的應(yīng)用范疇包括：界面構(gòu)架的功能操作區(qū)、內(nèi)容顯示區(qū)、導(dǎo)航控制區(qū)以及它所具有的行業(yè)標(biāo)準(zhǔn)（如地圖類應(yīng)用軟件有其獨(dú)特的界面特征）。

實(shí)用性是應(yīng)用軟件的根本，基于應(yīng)用軟件的版式設(shè)計(jì)要在軟件的應(yīng)用范疇內(nèi)進(jìn)行合理的版式安排，在有限的屏幕上將眾多元素整合排列。不同功能的相同操作區(qū)域，其設(shè)計(jì)風(fēng)格及視覺元素應(yīng)該一致，以便讓用戶能夠迅速操作不同的功能區(qū)域，從而也使整個(gè)界面版式統(tǒng)一在一個(gè)特有的整體之中。結(jié)合應(yīng)用軟件的特性、操作的可用性和可實(shí)施性，

對(duì)版式進(jìn)行科學(xué)、美觀的調(diào)整，使版式協(xié)調(diào)統(tǒng)一、主次得當(dāng)。如此一來，在確保風(fēng)格統(tǒng)一的同時(shí)，也有利于整合系統(tǒng)和應(yīng)用程序，以便達(dá)到美觀與實(shí)用兼顧的目的。

作者簡介：

周景成，天津市，天津工業(yè)大學(xué)。