王燕艷

(上海交通大學(xué)媒體與設(shè)計(jì)學(xué)院,上海 200240)

版式設(shè)計(jì)在移動(dòng)界面中的應(yīng)用

王燕艷

(上海交通大學(xué)媒體與設(shè)計(jì)學(xué)院,上海 200240)

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

版式設(shè)計(jì) 移動(dòng)界面 界面設(shè)計(jì)

1 版式設(shè)計(jì)簡(jiǎn)介

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

圖1

圖2

圖3

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

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

2 移動(dòng)界面的分類(lèi)

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

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

下面將兩種界面類(lèi)型與它們所適合的版式設(shè)計(jì)相結(jié)合展開(kāi)討論。

2.1 信息展示型界面

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

2.1.1 以瀏覽引導(dǎo)為主的界面

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

2.1.2 以品牌傳遞為主的界面

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

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

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

2.1.4 以信息展示為主的界面

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

2.2 功能操作型的界面

功能操作型界面需要和用戶進(jìn)行大量的交互,因此要有一個(gè)比較清晰地主線引導(dǎo)用戶進(jìn)行操作,以使用戶能夠高效地獲取他們想要的功能。目前對(duì)于這種類(lèi)型的界面設(shè)計(jì),設(shè)計(jì)師需要仔細(xì)揣摩用戶心理,包括行為習(xí)慣,使用環(huán)境等。互動(dòng)型是設(shè)計(jì)對(duì)設(shè)計(jì)師來(lái)說(shuō)本身就是一種挑戰(zhàn),而利用版面設(shè)計(jì)中的一些成熟的規(guī)則,能夠減輕設(shè)計(jì)師的負(fù)擔(dān)。

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

3 結(jié)語(yǔ)

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

[1]曲淑娟.論版式設(shè)計(jì)在平面設(shè)計(jì)中的實(shí)際應(yīng)用[J].中國(guó)電子商,2012(15).

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

[3]徐超.探究簡(jiǎn)約主義的網(wǎng)頁(yè)設(shè)計(jì)[M].上海:上海師范大學(xué)出版社,2012.

[4]曹霄潔.基于時(shí)尚知識(shí)管理的服裝概念設(shè)計(jì)方法研究[M].上海東華大學(xué),2013.

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

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

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