網(wǎng)格系統(tǒng)在手機界面設計中的應用研究

梁海健 黃錦超 朱武鋒 廣東天訊達資訊科技股份有限公司

引言

頁面設計就是將信息用不同的文字圖形和色彩來進行表達，要將內(nèi)容以最為簡潔直接的形式傳達給使用者，優(yōu)秀的網(wǎng)格系統(tǒng)設計能讓使用者感受不到設計的痕跡。設計師在利用網(wǎng)格系統(tǒng)設計頁面時，不僅要設計出簡潔的頁面，還需能吸引使用者，用不同的表現(xiàn)形式來吸引使用者，并且可以形成一系列的聯(lián)系。網(wǎng)格系統(tǒng)可以將不同的元素放置在不同的位置來進行不同的設計，從而呈現(xiàn)出不同的視覺效果，傳達出各種信息。手機內(nèi)的信息只能通過手機界面這唯一途徑傳達出來，在設計手機界面時，需同時兼顧美觀和傳達信息兩大方面。手機頁面是相對有限的范圍，在設計這一頁面時，設計元素既是獨立的，也有相互之間的關系。在網(wǎng)格系統(tǒng)應用于手機頁面設計時，需要達到美觀的目的，還需要滿足手機頁面所需功能。

一、網(wǎng)格系統(tǒng)合理有效的傳達信息

一個版面的各個組成部分如何分配是由網(wǎng)格進行指導的，一個版面有多個組成部分，每個組成部分都有其功能和表達效果。網(wǎng)格系統(tǒng)大致可以分為版心，版面和留白這幾部分，網(wǎng)格系統(tǒng)利用分割線將頁面進行分割，劃分為不同的區(qū)域。手機界面的信息就是通過版面來傳達，不同信息的傳遞是通過版面不同的分割和元素不同的排列組合進行。信息的傳達需要做到完整直觀，這就需要傳達信息時有主要次要的區(qū)分，這種區(qū)分就是從網(wǎng)格版面和元素的排列組合中得到。

二、網(wǎng)格系統(tǒng)的三維空間展示

當網(wǎng)格系統(tǒng)應用于報紙、雜志等紙張類的設計時，頁面信息是通過二維空間來展示的。使用者閱讀時通常也有閱讀順序，但將網(wǎng)格系統(tǒng)應用于手機頁面的設計時，網(wǎng)格系統(tǒng)的展示從二維空間變成了三維空間。網(wǎng)格系統(tǒng)的三維空間展示可以將視覺效果通過動態(tài)的形式展示出來，這就要求設計師將系統(tǒng)應用于手機界面設計的各個方面。版面的分割也不僅僅是應用于平面圖形中，同時也要應用于立體圖形中。雖然網(wǎng)格系統(tǒng)應用于手機界面設計是由二維空間走向了三維空間，但仍可以通過擴大元素的比例來突出頁面重點，利用不同的色彩組合和頁面布局來吸引使用者。

三、網(wǎng)格系統(tǒng)滿足最易觀察、最易操作的需求

（一）網(wǎng)格系統(tǒng)滿足最易觀察

網(wǎng)格系統(tǒng)應用于手機界面設計師要同時滿足使用者最易觀察的需求。使用者觀察頁面時最易觀察到的區(qū)域就是網(wǎng)格系統(tǒng)的版面核心，被稱作最佳觀察區(qū)域。設計師應當將最需要突出的內(nèi)容放置于最佳觀察區(qū)域，讓使用者最直接的觀察到信息。最佳觀察區(qū)的設計主要是通過垂直線和水平線對手機界面的分割進行的，設計師需要做到在手機界面這個有限的范圍內(nèi)，進行最合理的布局。不僅要滿足手機界面的完整性，仍需將最重要的信息放置于最易觀察到的區(qū)域。保證使用者有最直接的視覺體驗，完成對信息的重視。

（二）網(wǎng)格系統(tǒng)滿足最易操作

傳統(tǒng)紙張類頁面設計只需要滿足使用者的閱讀需求，當用網(wǎng)格系統(tǒng)來設計手機界面時，還需要滿足使用者的操作需求.這就要求設計師在設計出容易操作的手機界面。當使用者滑動頁面或者翻頁時，會利用到三維空間的每個方面。手機界面的設計不僅需要網(wǎng)格系統(tǒng)，還需要交互設計。使用者在操作手機時通常是一只手握著手機利用大拇指來進行上下翻動或者左右翻頁，滿足使用者的最易操作需求時，不僅需要將板面的工具欄放置于大拇指容易觸碰到的兩側(cè)，仍需將頁面的主要內(nèi)容放置于大拇指容易觸碰到的地方。當使用者使用手機界面時，可以輕易操作自己感興趣的內(nèi)容，手機界面的最優(yōu)觀察區(qū)應與最易操作區(qū)域有重合之處。

四、結(jié)束語

手機界面設計不是簡單的滿足功能需求，更要滿足使用者對美的需求。手機界面需要擁有強大的功能性和完整的藝術性，這樣才能吸引到使用者。隨著信息的更新和技術的提高，手機的作用不僅局限于通訊，有了更多樣的功能。多樣的功能需要更好的手機界面設計，這就使手機界面的視覺效果更加重要。當設計師利用網(wǎng)格系統(tǒng)設計手機界面時，需符合使用者的需求，完成手機界面的功能性和藝術性的高度統(tǒng)一。設計師要利用最基礎的設計工具設計出最符合使用者需求的手機界面。