版式設計在移動界面中的應用

王燕艷

(上海交通大學媒體與設計學院,上海 200240)

版式設計在移動界面中的應用

王燕艷

(上海交通大學媒體與設計學院,上海 200240)

互聯(lián)網(wǎng)的進步,計算機科學的發(fā)展,新手機品牌地不斷興起,讓現(xiàn)在的手機屏幕越來越大,像素越來越高,呈現(xiàn)的信息也越來越豐富。為了減少界面的復雜程度,人們精簡版面信息。更多的把注意力放在界面的功能和交互上,信息框架也呈現(xiàn)出一種扁平化的趨勢,盡量減少信息的層級,讓用戶能夠更精準,更快速地獲取到想要的信息。UI設計上,也不斷推成出新,從由蘋果公司引領的擬物設計,過度到了如今簡約至上的Metro風格。雖然在移動應用中是以用戶的操作和使用體驗為主,但隨著界面設計向扁平化Metro風格發(fā)展,版面設計中細膩的質(zhì)感和光影可以進一步提升界面的品質(zhì)感,從而打造更好的用戶體驗。本文主要探討版面設計在移動界面設計中的應用,通過案例分析闡述幾種具體的應用方式。

版式設計 移動界面 界面設計

1 版式設計簡介

根據(jù)版式設計原理,可以把版式設計分為以下常見的幾種類型:骨骼型,滿版型、上下分割型、左右分割型、中軸型、曲線型、傾斜型、對稱型、重心型、三角型、并置型、自由型、四角型等[1]。骨骼型是一種規(guī)范的理性的分割方法。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。在圖片和文字的編排上則嚴格按照骨骼比例進行編排配置,給人以嚴謹、和諧、理性的美。骨骼經(jīng)過相互混合后的版式,既理性、條理,又活潑而具彈性。滿版型的版面是用圖片充滿,文字一般是浮于圖片上方。圖片較清晰的版面人的注意力主要集中在圖片上,而現(xiàn)在有些滿版型的版面會對圖片做一些處理,比如模糊等,圖片會起到一種烘托氣氛的效果。滿版型給人以大方、舒展的感覺,是商品廣告常用的形式。

圖1

圖2

圖3

上下分割型版面是將版面分成上下兩個部分,圖片和文字通常各占半個版面。圖片的部分通常傳達一種比較生動的感覺,而文字部分則是作輔助說明或者理性分析。左右分割型的版面與上下分割類似,也是把整個版面分成兩部分,只是分割的方向不同。也是通常左右兩遍一邊放圖片,一邊配文案。由于左右分割的方式與人的自然視覺習慣有沖突,因此沒有上下分割的效果自然。中軸型的版面將圖形做水平或垂直方向的排列,文案以上下或左右配置。水平排列的版面給人穩(wěn)定、安靜、和平與含蓄之感。垂直排列的版面給人強烈的動感。曲線型的版面圖片或文字在版面結(jié)構(gòu)上作曲線的編排構(gòu)成,產(chǎn)生節(jié)奏和韻律。傾斜型的版面版面主體形象或多幅圖版做傾斜編排,造成版面強烈的動感和不穩(wěn)定因素,引人注目。對稱型版面一般都是左右對稱,它會給人穩(wěn)定、莊重理性的感覺。對稱有絕對對稱和相對對稱。一般多采用相對對稱。以避免過于嚴謹。給人一種死板的感覺。中心型版面就是將視覺注意力集中在一個焦點上,它一般有三種類型。第一,直接以獨立而輪廓分明的形象占據(jù)版面中心。第二,向心型,即視覺元素向版面中心聚攏的運動。第三,離心式,即從中間開始慢慢往外擴散,形成一種發(fā)散敢。中心型版式產(chǎn)生視覺焦點,給人強烈的視覺沖擊力。三角形版面是一種比較穩(wěn)定的版面形式,因為三角形本身就是一個最穩(wěn)固的形狀。因此這樣的界面也會給人一種安全穩(wěn)固的感覺。并置型版面將相同或不同的圖片作大小相同而位置不同的重復排列。并置構(gòu)成的版面有比較、說解的意味,給予原本復雜喧囂的版面以次序、安靜、調(diào)和與節(jié)奏感。自由型版面結(jié)構(gòu)沒有一定的規(guī)律,是一種比較隨意的編排方式。因此,會給人一種愉快、活潑、輕松的感覺。四角型版面是在頁面的四個角上放置圖片或文案,形成四個角相對的形狀。這種版面結(jié)構(gòu)也比較穩(wěn)定,能夠給人一種嚴謹、規(guī)范的感覺。

這些布局在平面設計中應用非常廣泛,區(qū)別于平面設計,移動界面的設計更強調(diào)界面的可用性,界面與用戶之間的“對話”及交互。因此,移動界面設計在版式的選取方面,應該要把產(chǎn)品所面向的用戶群特征以及產(chǎn)品的功能特征,以及手機端的特殊使用場景考慮在內(nèi)。

2 移動界面的分類

現(xiàn)在隨著各種應用商店的出現(xiàn),里面的App類型也越來越豐富,而且每一種類型的App都有很多同類競爭品。一個App要在眾多的競品中脫穎而出,首先必須能夠很好的滿足用戶的某一需求,而且要給用戶很好的使用體驗。使用體驗包括了視覺感受,交互方式等。而視覺往往是給用戶第一眼感覺的東西,一個視覺良好的產(chǎn)品,就能很好地抓住用戶的眼球,從而產(chǎn)生后面的持續(xù)使用。

如果從功能上來說,移動界面可以分為兩大類:一類是信息展示型界面,另一類是功能操作型界面。信息展示界面即靜態(tài)的頁面,不存在太多跟用戶之間的互動,而功能操作型界面則包含了豐富的互動體驗設計。但是,不管是靜態(tài)的還是互動式的,都需要設計師用心打造用戶界面,才能創(chuàng)造出良好的用戶體驗。

下面將兩種界面類型與它們所適合的版式設計相結(jié)合展開討論。

2.1 信息展示型界面

信息展示型頁面以閱讀類應用以及其他類型應用中的圖片,圖表,文字的展示等,另外應用程序的歡迎頁面也是比較常見的以傳遞信息為主的頁面。每一種類型的界面都有特定的功能,根據(jù)每個界面的特點,界面UI設計也必須做出相應的調(diào)整。展示型界面按照其不同特性,主要分為以瀏覽為主的界面,以品牌傳遞為主的界面,以提高瀏覽效率為主的界面,以信息展示為主的界面。下面將分類討論這些界面的特性以及它們分別適合怎樣的版面。

2.1.1 以瀏覽引導為主的界面

由于瀏覽引導界面主要以引導用戶的視線為主,因此會有一個很明顯的引導主線。根據(jù)上文討論的十三個版式布局中,最為適合這種界面類型的為重上下分割型、左右分割型、中軸型以及曲線型。這幾類版面設計的特點是有一條清晰的視線引導主線。如圖1 兩個界面,就是以瀏覽為主導的界面設計?？梢钥闯?每個界面都有清晰的主線,屬于中軸型版面,給人一種穩(wěn)定,清晰的感覺。

2.1.2 以品牌傳遞為主的界面

以品牌傳遞為主的界面需要突出品牌特點,讓人的視線集中在品牌形象上,版面設計中滿版型、中心型和自由型的布局比較適合這類應用界面?，F(xiàn)在采用滿版型設計的比較典型的是以渲染氣氛的大圖為背景,然后輔以具有煽動性的品牌文案,對于品牌傳遞是一個非常有效的設計。隨著商品化社會的發(fā)展,市場上充斥這各種各樣的商品,而且這些商品之間的競爭也趨于白熱化。為了凸顯自己的品牌,建立良好的品牌形象,商家會在這方面花費很大的經(jīng)歷和資金去打造一個吸引眼球的界面。因此,滿版型這種能夠最大限度突出品牌的方式也是經(jīng)常在移動界面設計中采用。如圖2兩個App界面就是很典型的例子。左邊的App利用了全版面的圖片進行氣氛的烘托,由于主要是英語口語學的應用,因此著重渲染出了一種跨國界,多元文化的氣氛。右邊的App是線上銷售類型,圖片的配色,人物都是為了渲染品牌的時尚感,讓消費者形成購買欲望。

2.1.3 以提高瀏覽效率為主的界面

對于注重提高瀏覽效率為主的界面,界面需要一個非常清晰的主線來把大量的信息進行分類,讓用戶更容易閱讀。獲取信息的同時能夠有一個更好的用戶體驗。骨骼型是版面設計中比價符合這個類型應用界面設計的一種。骨骼型是能夠?qū)π畔⑦M行很好地分類梳理,分區(qū)展示,讓用戶能夠快速抓住信息。展示更加清晰,界面更加嚴謹。如下圖3所示的兩個界面就是骨骼型界面的典型例子。它將界面的文字信息和圖片信息進行分類,通過信息劃分讓用戶快速獲取自己想要的信息。值得一提的是,又圖是很流行的瀑布流界面,通常用來展示大量的圖片信息。它的設計靈感也正是來自于版面設計的骨骼型版面。

2.1.4 以信息展示為主的界面

這類界面最重要的是將信息直觀地展示在用戶面前,讓用戶能夠更加快速、直觀地獲取信息。有些界面的信息量會很大,因此也需要像提高瀏覽效率類界面一樣,將信息進行分類處理,而能夠較好滿足這類信息的版面主要有上下分割型、中軸型、自由型、骨骼型以及對稱型。如下面舉例的天氣類App,采用了滿版型的版面,能夠?qū)⑿畔⒈容^合理高效地展示出來。

2.2 功能操作型的界面

功能操作型界面需要和用戶進行大量的交互,因此要有一個比較清晰地主線引導用戶進行操作,以使用戶能夠高效地獲取他們想要的功能。目前對于這種類型的界面設計,設計師需要仔細揣摩用戶心理,包括行為習慣,使用環(huán)境等?；有褪窃O計對設計師來說本身就是一種挑戰(zhàn),而利用版面設計中的一些成熟的規(guī)則,能夠減輕設計師的負擔。

在版面設計中,比較合適功能操作型界面的布局是上下分割型,中軸型和左右分割型。這些界面的特點是都有比較清晰地引導主線,并且可操作區(qū)域和不可操作的區(qū)域能夠有一個比較清晰地劃分。另外,對于版面設計匯總應用,并不是一定在移動界面中全局的應用,也可以將界面分成幾個部分,每個部分針對不同的類型,可以采取不同的適合于這一類型界面的版式。

3 結(jié)語

在扁平化的潮流下,很多產(chǎn)品也借鑒了雜志排版的一些方式,為用戶帶來了良好的閱讀和使用體驗。也有很多流行的界面設計形式就是來自于版面設計中的靈感。設計都是相通的,通過類似的思維方式,互相借鑒,一定能夠在移動界面設計創(chuàng)新方面有新的發(fā)現(xiàn)。針對不同功能的應用,選擇適合的版式構(gòu)圖類型,大膽的結(jié)合版式設計的一些經(jīng)典的形式,也許能為我們的設計拓展新的思路。

[1]曲淑娟.論版式設計在平面設計中的實際應用[J].中國電子商,2012(15).

[2]尹一婷.現(xiàn)代雜志的版式常用類型探析[J].大眾文藝,2014(10).

[3]徐超.探究簡約主義的網(wǎng)頁設計[M].上海:上海師范大學出版社,2012.

[4]曹霄潔.基于時尚知識管理的服裝概念設計方法研究[M].上海東華大學,2013.

[5]The Reform and Practice on Communication Electronic CircuitCourse.2010International Conference on E-Health Networking, DigitalEcosystems and Technologies Proceedings.2010.

[6]趙蘭梅.基于設計的三維形態(tài)研究[J].軟件,2014(2).

王燕艷(1989—),女,江蘇蘇州人,碩士,畢業(yè)于上海交通大學,學生,研究方向:交互設計。