比例與尺度在手機APP界面設計中的應用

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

關鍵詞：比例與尺度；手機APP；視覺

一、 手機APP界面的版式設計

移動界面按照其產品功能可以分為兩大類：信息展示型界面和功能操作型界面。

（一） 信息展示型界面

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

（二） 功能操作型界面

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

二、 觸屏手機界面的視覺形式研究

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

觸屏手機界面設計是一個年輕又充滿活力的設計分支，它需要滿足目標用戶的審美觀、使用目的和心理情感等等。觸屏手機界面設計應該為用戶創造有價值的、令人注目的信息和交互體驗，讓用戶通過與觸屏手機界面的互動達到體驗上的滿足和心理上的愉悅。為了達到這一點，在設計觸屏手機界面的時候，必須充分考慮到各個視覺元素的樣式，以及在不同操作狀態下它們的視覺效果。

觸屏手機界面視覺形式包含的具體內容很多，概括來說主要有文字、色彩、圖標、導航、圖像和圖表、以及版式等。

（一） 文字

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

觸屏手機界面中的文字是影響觸屏手機界面視覺設計的重要視覺元素之一。為了適應以數字技術為基礎發展起來的觸屏手機界面，達到更好的視覺效果，文字要在不同的傳播環境下展現不同的形態。

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

和傳統按鍵式手機不同，觸屏手機由于顯示屏尺寸較大，其界面上的文本大多是可以觸摸操作的。在觸屏手機界面設計時，要確保用戶在操作中對文字的識別性與可理解性，減少用戶發生錯誤操作的幾率。

（二） 圖標

圖標是具有指代意義的具有標識性質的圖形。在觸屏手機界面中，圖標是一種功能標識，扮演著極為重要的角色。它不僅可以代表一個文檔、一個應用程序、一個指令，還可以通過點擊圖標執行一段命令或打開某種類型的文件等。

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

（三） 版式

觸屏手機界面的版式設計，就是在觸屏手機界面上，將有限的視覺元素進行有機的排列組合。觸屏手機界面版式設計有著極其重要的地位。雖然基于不同的平臺，但報刊、雜志、網站等平面媒體的版式設計有很多共同之處，都是將理性思維個性化地表現出來，在傳達信息的同時，也產生感官上的美感，是一種具有個人風格和藝術特色的視覺傳送方式。

三、 觸屏手機界面的版式設計

（一） 布局要有原則

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

一個好的觸屏手機界面設計不會把全部的信息都排在同一個模塊上，那樣會產生信息的積壓，容易給用戶帶來負面的影響和心理上的不適。在設計觸屏手機界面的版式時，必須要有一定的主次區別，將主次拉開，有主有次才能給予用戶清晰的指導。

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

（二） 版式設計依賴于點線面的構成

觸屏手機界面的版式設計依賴于點線面的構成。由于觸屏手機軟件所處的運行環境沒有電腦空間大，所以控制軟件自身的體積大小是十分必要的，有的應用軟件因為占用的內存過大，而成為用戶優先選擇卸載的項目。因此，在將體積較大的信息（如圖像、FLASH 等）排進程序的時候，應當根據需要進行適當的篩選和切分。單色的點、線和面是可以由程序自身來呈現的，所以在這個范圍內可以節省空間。大塊面的色彩和點、線的組合是現代設計的發展趨勢，不僅版式時尚大氣，且信息傳遞的精準度也高。所以，結合點線面基本元素的版式設計，不僅有效壓縮了應用程序的體積，減小了觸屏手機的負擔，更凸顯了時代感，給用戶帶來輕松的操作體驗。

需要注意的是，在設計觸屏手機界面的版式過程中，設計師應當在通過與程序員的密切溝通后再對需要優化的圖形圖像進行處理，繼而交由程序員進行版式的二次組合，以避免失誤。

（三） 版式設計要基于應用范疇

觸屏手機界面版式的設定，很大程度上需要考慮應用軟件的功能范疇。應用軟件的應用范疇包括：界面構架的功能操作區、內容顯示區、導航控制區以及它所具有的行業標準（如地圖類應用軟件有其獨特的界面特征）。

實用性是應用軟件的根本，基于應用軟件的版式設計要在軟件的應用范疇內進行合理的版式安排，在有限的屏幕上將眾多元素整合排列。不同功能的相同操作區域，其設計風格及視覺元素應該一致，以便讓用戶能夠迅速操作不同的功能區域，從而也使整個界面版式統一在一個特有的整體之中。結合應用軟件的特性、操作的可用性和可實施性，

對版式進行科學、美觀的調整，使版式協調統一、主次得當。如此一來，在確保風格統一的同時，也有利于整合系統和應用程序，以便達到美觀與實用兼顧的目的。

作者簡介：

周景成，天津市，天津工業大學。