以《高考1977》手游為例的扁平化設(shè)計(jì)研究

章京京 韓玉婷

摘要：分析扁平化設(shè)計(jì)流行原因及應(yīng)用領(lǐng)域，結(jié)合手游特點(diǎn)研究其在手游中的優(yōu)勢及運(yùn)用程度，并以自主開發(fā)的《高考1977》手游為例，闡述扁平化設(shè)計(jì)在手游領(lǐng)域的應(yīng)用及其內(nèi)核。

關(guān)鍵詞：扁平化設(shè)計(jì) 手游 按鈕設(shè)計(jì)

引言

扁平化是一種“精簡式”理念，組織管理如此，界面設(shè)計(jì)亦是如此。刪繁就簡，簡約卻直指要害。當(dāng)下扁平化設(shè)計(jì)的再度流行，可以說是設(shè)計(jì)學(xué)的—場“返璞歸真”。扁平化設(shè)計(jì)似乎有包豪斯主義的影子，簡潔而實(shí)用，然而扁平化設(shè)計(jì)又有其獨(dú)特概念：屬于二次元，放棄一切能夠做出3D效果的裝飾元素，所有元素的邊界都干凈利落，尤其在手機(jī)上，按鈕和選項(xiàng)的設(shè)計(jì)盡量更少，使得界面干；爭整潔方便使用，可以更直接地將信息和事物的工作方式展示出來，減少認(rèn)知障礙。扁平化設(shè)計(jì)的要素簡要地可以歸為：設(shè)計(jì)中拒絕特效，界面中簡化信息，形式上追求干凈，色彩上崇尚層次，排版中力求簡約。

一、手游中扁平化設(shè)計(jì)的一般性分析

（一）扁平化設(shè)計(jì)的優(yōu)勢

扁平化設(shè)計(jì)簡潔而不簡單，正如中國的剪紙藝術(shù)，盡管是平面的藝術(shù)形式，沒有任何三維的效果卻傳達(dá)了豐富多彩的內(nèi)容，可見平面化的東西不一定是死板的，有時(shí)候是設(shè)計(jì)中的一種特色和獨(dú)有。扁平化設(shè)計(jì)的特點(diǎn)和作用可以歸納為：直觀的界面展示，明確的交互方式，高效的信息傳達(dá)，靈活的可移植性。這些是其他設(shè)計(jì)難以統(tǒng)一和諧的，融合在一起的關(guān)鍵。

目前扁平化設(shè)計(jì)主要應(yīng)用在網(wǎng)頁設(shè)計(jì)、UI設(shè)計(jì)、手機(jī)界面設(shè)計(jì)等領(lǐng)域，在游戲中的運(yùn)用較少見到。

（二）手游的一般視覺效果及特點(diǎn)

手游是指在手機(jī)等各類手持硬件設(shè)備上運(yùn)行的游戲類應(yīng)用程序。手游有其獨(dú)特性，體現(xiàn)在以下四個方面：（1）畫面風(fēng)格簡單活潑；（2）屏幕顯示尺寸較??；（3）操作簡單易上手；（4）操作形式多樣化。首先，手游的畫面風(fēng)格普遍比較明快亮麗，用色上色彩鮮明活潑，造型設(shè)計(jì)上卡通可愛，符合手游本身的娛樂特點(diǎn)——休閑簡單，比如《割繩子》游戲中角色與場景造型的設(shè)計(jì)充滿輕松活潑的氣息。其次，手機(jī)屏幕具有屏幕尺寸小的限制，這也就自然而然地限定了游戲的畫面尺寸，這對游戲界面的內(nèi)容設(shè)計(jì)也有了一定的限制，不同于網(wǎng)絡(luò)游戲的宏大場面，網(wǎng)絡(luò)游戲可以添加更多的場景更多的角色以及更多的道具元素等，而手游界面提供的版面有限，這也就對信息量進(jìn)行了限制。然后，手游操作簡單，用戶打開游戲，簡單熟悉過后便可上手操作，這對于用戶來說，減少了學(xué)習(xí)成本，符合手游最初的市場定位。最后，手游具有一個很重要的特點(diǎn)，它具有網(wǎng)游目前所沒有的觸屏點(diǎn)擊功能，這對于游戲本身來說是一種玩法的創(chuàng)新，不再僅限于鍵盤鼠標(biāo)的控制，用手指在手機(jī)屏幕上進(jìn)行常見的點(diǎn)擊、滑動、切，拖拉等手法便可輕松進(jìn)行游戲項(xiàng)目，增加了更多的用戶體驗(yàn)。

（三）扁平化設(shè)計(jì)在手游中的優(yōu)勢及應(yīng)用程度

扁平化設(shè)計(jì)本身具有直觀的界面展示，明確的交互方式，高效的信息傳達(dá)，靈活的可移植性四個特點(diǎn)，這與手游界面設(shè)計(jì)的需求是如此的相貼切。手游界面有其自身的特點(diǎn)和缺陷，適當(dāng)?shù)丶尤氡馄交O(shè)計(jì)元素會更好地彌補(bǔ)手游界面設(shè)計(jì)存在的缺憾，另外，扁平化設(shè)計(jì)有它自身的美學(xué)感，恰當(dāng)?shù)厝谌胧钟谓缑娴脑O(shè)計(jì)當(dāng)中，相信會給用戶一份新的體驗(yàn)。以《Smart clear》為例，游戲采用了扁平化的設(shè)計(jì)風(fēng)格，簡潔清爽，符合未來的美學(xué)風(fēng)格?！禨mart Clear》游戲界面設(shè)計(jì)的初衷也許只是為符合游戲本身特性，并沒有明確地提出在其界面設(shè)計(jì)中推行扁平化設(shè)計(jì)事實(shí)上，對于這類走極簡風(fēng)的小型游戲來說，扁平化是一個最佳選擇，可以彰顯獨(dú)特的美術(shù)風(fēng)格，從畫面和色彩上就先聲奪人。且筆者相信，扁平化設(shè)計(jì)終會以其自身的特色融入于手游界面設(shè)計(jì)當(dāng)中，并愿為之進(jìn)行作品的實(shí)踐創(chuàng)作與嘗試。

二、扁平化設(shè)計(jì)元素融入《高考1977》手游界面設(shè)計(jì)的過程

（一）高考《1977》手游的構(gòu)思及創(chuàng)作

高考《1977》是一款講述進(jìn)行升學(xué)考試的答題游戲，游戲主角是一只大熊貓，選擇熊貓這一形象作為角色，賦予了游戲玩家作為進(jìn)行“升學(xué)考試的考生”的“國寶”形象，每一位高考的學(xué)生都是國寶。游戲玩家通過選擇想要報(bào)考的大學(xué)，進(jìn)行相應(yīng)的答題游戲，每一所大學(xué)都有各自的教學(xué)特色及答題難度，例：南氣大學(xué)，特色附加題為氣象知識。玩家需要自身一定的知識儲備并且答對一定的題量才能通過相應(yīng)環(huán)節(jié)的游戲，最后答題準(zhǔn)確率通過的情況下獲得游戲的勝利，進(jìn)入理想的“大學(xué)”并獲得相應(yīng)的分值和榮譽(yù)。

（二）《高考1977》手游特點(diǎn)與扁平面化設(shè)計(jì)特點(diǎn)的相似性

《高考1977》作為一款手游，在該游戲中選擇以扁平化設(shè)計(jì)理念作為元素融入其游戲界面風(fēng)格當(dāng)中，經(jīng)過一定的深思熟路。《高考1977》手游具有與扁平面化設(shè)計(jì)相似的特點(diǎn)，具體體現(xiàn)在以下：（1）移動端更適合扁平化：《高考1977》作為一款手游，具有顯示屏幕小的特點(diǎn)，扁平化設(shè)計(jì)實(shí)用且靈活性強(qiáng)，能夠較好地彌補(bǔ)手機(jī)界面顯示設(shè)計(jì)的不足。（2）高效性：《高考1977》手游作為一款益智答題游戲，在答題過程中要集中注意力進(jìn)行限時(shí)答題，這就要求在答題界面的設(shè)計(jì)中既要維持界面的美觀又要避免不必要的視覺干擾，這就需要扁平化設(shè)計(jì)中明確的交互方式和高效的信息傳達(dá)這兩大特點(diǎn)。（3）色彩的選擇：《高考1977》游戲，界面設(shè)計(jì)風(fēng)格采用活潑可愛的卡通風(fēng)格，扁平化設(shè)計(jì)用色大膽鮮艷，6到8種活潑顏色的色彩排列組合富有童趣性，另外，扁平化色彩設(shè)計(jì)具有層級展現(xiàn)的優(yōu)勢，適合游戲自身定位的同時(shí)促進(jìn)了用戶交互體驗(yàn)。（4）排版設(shè)計(jì)：游戲的視覺效果很重要，同樣游戲的版面排列也很重要，清晰美觀的功能界面幫助用戶更好地明確游戲目的，扁平化設(shè)計(jì)注重排版，追求功能本身的使用。

（三）扁平化設(shè)計(jì)的過程

在扁平化設(shè)計(jì)的過程中，主要有圖紙和位圖兩種方式。圖紙是指在稿紙上作畫；位圖主要有運(yùn)用Photo Shop等繪圖軟件進(jìn)行設(shè)計(jì)展現(xiàn)。設(shè)計(jì)的過程中少不了概念設(shè)計(jì)的階段，概念設(shè)計(jì)主要是指掌握游戲內(nèi)容后進(jìn)行相應(yīng)的原畫構(gòu)思。概念設(shè)計(jì)過后便是進(jìn)行實(shí)際手繪原畫設(shè)計(jì)，在圖紙?jiān)嬰A段，需要充分查閱資料，瀏覽扁平化設(shè)計(jì)優(yōu)秀作品學(xué)習(xí)扁平化設(shè)計(jì)知識，融合扁平化設(shè)計(jì)的特點(diǎn)進(jìn)行重點(diǎn)設(shè)計(jì)。在原畫草圖調(diào)整完善結(jié)束后，進(jìn)行位圖設(shè)計(jì)，位圖設(shè)計(jì)過程中繼續(xù)學(xué)習(xí)相應(yīng)知識，輔之各種技術(shù)運(yùn)用，逐漸彌補(bǔ)圖紙?jiān)O(shè)計(jì)階段尚且不足之處，過程中再經(jīng)過反復(fù)修改，直到成稿。

1.手游《高考1977》中扁平化設(shè)計(jì)的元素——按鈕的交互設(shè)計(jì)

手游交互設(shè)計(jì)中最核心的是界面設(shè)計(jì)，游戲界面包括主界面和子界面，任何界面都是直面玩家，給予玩家直觀的視覺感受，我們很多時(shí)候注重游戲的主要界面，忽視了游戲的分界面，分界面包括選項(xiàng)界面、暫停界面、提示界面等。而這些界面中無一例外不用到按鈕這個界面元素。按鈕是一個游戲必備的元素，并且貫穿游戲的始終，按鈕的設(shè)計(jì)不僅要貼合視覺需求，更要設(shè)計(jì)出合理的人機(jī)交互模式，包括用戶習(xí)慣的操作方式，界面整體的統(tǒng)一和功能模塊的區(qū)分等。可見按鈕的設(shè)計(jì)也需遵循一切為用戶著想的設(shè)計(jì)理念。

2.手游中按鈕交互設(shè)計(jì)的狀況

在一份觸屏手游界面交互設(shè)計(jì)體驗(yàn)問卷調(diào)查中，對于按鈕大小與擺放位置是否合適的調(diào)查中，只有27.8%的人覺得大小適中，擺放合適，67%的人覺得很一般，有5.1%的人覺得不合適。36.7%的用戶表示游戲登錄界面設(shè)計(jì)對玩游戲的影響不大，73.3%的人覺得有影響甚至很大。操作失誤的原因中，由于界面設(shè)計(jì)不合理失誤的占到9.1%，交互過程中手指和按鈕大小不匹配的占到62.7%。有三分之一的人因?yàn)榻换ピO(shè)計(jì)體驗(yàn)不合理放棄一款游戲。手游由于其屏幕小的弱點(diǎn)，界面設(shè)計(jì)中存在一些問題，界面設(shè)計(jì)中按鈕大小及擺放不夠合理，交互過程中手指與按鈕大小不匹配，使某些操作使用不便，手指與按鍵大小的匹配程度是游戲是否順暢的一個重要因素。另外，按鈕的不合理放置，耗費(fèi)不必要的流量。鑒于以上，按鈕看似一個小小的符號標(biāo)志，實(shí)際傳達(dá)著諸多功能，便于玩家體驗(yàn)更舒適順心的交互體驗(yàn)，按鈕的交互設(shè)計(jì)仍需要更加用心的完善。

3.結(jié)合扁平化設(shè)計(jì)進(jìn)行按鈕交互設(shè)計(jì)

《高考1977》作為一款手游，適用在手機(jī)移動平臺，具有手游界面空間設(shè)計(jì)局限，手機(jī)界面小，手游界面內(nèi)容也就被限制了，而扁平化設(shè)計(jì)中，注重排版帶來的效果恰好可以完善這一不足。游戲中按鈕元素及按鈕頁面的設(shè)計(jì)制作常受忽視，對按鈕的擺放進(jìn)行簡單的放置，沒有很好考慮到按鈕的實(shí)際交互功能。游戲界面中，按鈕作為游戲順接每一關(guān)的紐帶，起著不可忽視的作用，優(yōu)秀的人機(jī)交互設(shè)計(jì)，能夠讓玩家在整個游戲過程中易于操作并且保持沉浸感。鑒于以上手游中按鈕交互設(shè)計(jì)的狀況，結(jié)合扁平化設(shè)計(jì)的幾項(xiàng)優(yōu)勢，對手游中按鈕界面的設(shè)計(jì)進(jìn)行更好的功能方面的完善。從以下三點(diǎn)切入進(jìn)行按鈕元素的交互設(shè)計(jì)：

（1）排版設(shè)計(jì)：扁平化設(shè)計(jì)要求元素更簡單，排版就顯得尤為重要了，優(yōu)秀的排版設(shè)計(jì)不僅使視覺舒適，而且在內(nèi)容上能更優(yōu)地展示信息。按鈕的設(shè)計(jì)要考慮到手指的寬度，設(shè)計(jì)多大的范圍來感應(yīng)手指的觸碰，按鈕的大小設(shè)計(jì)是否影響游戲界面的美觀。諸多小游戲中都有游戲說明的頁面，該頁面有諸多按鈕，需要點(diǎn)擊按鈕來進(jìn)行一項(xiàng)一項(xiàng)的閱讀，不僅浪費(fèi)了玩家時(shí)間，也增加了一些不必要的流量（以支付流量游戲?yàn)槔羰菍⑦@一頁面結(jié)合扁平化設(shè)計(jì)進(jìn)行直觀的信息展示處理，合理利用界面設(shè)計(jì)空間，將每個按鈕及其內(nèi)容設(shè)計(jì)成扁平化的風(fēng)格進(jìn)行排版設(shè)計(jì)。正如扁平化設(shè)計(jì)的特征：尤其在手機(jī)上，更少的按鈕和選項(xiàng)使得界面干凈整齊，使用起來格外簡潔。可以更加簡單直接地將信息和事物的工作方式展示出來，減少認(rèn)知障礙的產(chǎn)生。

（2）色彩設(shè)計(jì)：色彩作為扁平化設(shè)計(jì)中一個不可或缺的設(shè)計(jì)風(fēng)格，能夠更好地體現(xiàn)在按鈕元素的設(shè)計(jì)上。扁平化設(shè)計(jì)色彩用色大膽，習(xí)慣采用多種不同的純色進(jìn)行信息的層級管理，游戲說明頁面中按鈕的大小不大符合人機(jī)交互體驗(yàn)也不夠引起用戶的注意，用戶需要逐一點(diǎn)開按鈕方能瀏覽相應(yīng)信息。扁平化設(shè)計(jì)注重顏色設(shè)計(jì)，用顏色來鼓勵用戶交互，鼓勵用戶對按鈕所包含的信息進(jìn)行探索了解，體現(xiàn)視覺效果的同時(shí)專注于功能本身。扁平化設(shè)計(jì)色彩注重純色，注重色彩的視覺感受，手游中，游戲畫面的設(shè)計(jì)滿足玩家對于游戲的特性視覺需求，在按鈕及部分二級界面設(shè)計(jì)中添加扁平化設(shè)計(jì)元素，相信也會給與用戶新的視覺享受。

（3）移動端需要更好的可移植性：《高考1977》作為一款手游，受移動端平臺界面大小設(shè)計(jì)的限制，手游畫面內(nèi)容擺放有限，特別是游戲按鈕的設(shè)計(jì)。扁平化設(shè)計(jì)具有良好的可移植性，按鈕作為游戲中的指示符號，只要調(diào)節(jié)元素的外框大小即可，不大影響整體美觀及顯示。根據(jù)扁平化設(shè)計(jì)的特性，取長補(bǔ)短，更好地為手游界面按鈕功能的設(shè)計(jì)服務(wù)。

三、扁平化設(shè)計(jì)的討論

扁平化設(shè)計(jì)是針對當(dāng)前過度裝飾設(shè)計(jì)強(qiáng)有力的回?fù)?，扁平化設(shè)計(jì)帶著它特有的視覺語言向我們展示了強(qiáng)大一面：直接、簡練、清晰、高效的模式。扁平化設(shè)計(jì)也有不受待見的時(shí)候，反對者認(rèn)為扁平化過于平面，過于冰冷，扁平化不適用于每一個用戶，太費(fèi)學(xué)習(xí)成本。筆者認(rèn)為，無論哪一種設(shè)計(jì)都有其利弊，扁平化設(shè)計(jì)有值得運(yùn)用借鑒的地方，畢竟創(chuàng)造了一種新的理念，但也有需要完善的地方。當(dāng)前有人提出“準(zhǔn)扁平化”設(shè)計(jì)的方案，仔細(xì)觀察不難發(fā)現(xiàn)，除了典型的扁平化設(shè)計(jì)作品外，百度搜索首頁、淘寶、聚美優(yōu)品等網(wǎng)站的設(shè)計(jì)無不運(yùn)用了當(dāng)前流行的扁平化元素，并且讓人眼前一亮。好的設(shè)計(jì)不應(yīng)當(dāng)局限于某種設(shè)計(jì)風(fēng)格，而需要更注重可用性、有用性。