彭媛媛 （成都信息工程大學(xué)銀杏酒店管理學(xué)院 610000）

淺析扁平化設(shè)計(jì)在旅游UI界面中的運(yùn)用

彭媛媛 （成都信息工程大學(xué)銀杏酒店管理學(xué)院 610000）

本課題從旅游UI界面設(shè)計(jì)的角度出發(fā)，力求對游客傳遞旅游信息、解決旅游障礙等功能性，針對景區(qū)游客及消費(fèi)者對于旅游服務(wù)軟件界面的疑難和訴求進(jìn)行案例分析。課題從扁平化設(shè)計(jì)風(fēng)格的獨(dú)特視角，遵循視覺傳達(dá)設(shè)計(jì)形式美及功能美德形式法則，簡化界面設(shè)計(jì)以案例分析為核心，解析扁平化設(shè)計(jì)在旅游界面設(shè)計(jì)中的重要性，總結(jié)出將旅游服務(wù)類APP信息可視化設(shè)計(jì)的有效途徑。最終，提升UI界面的功能性和美觀性，達(dá)到宣傳及提升旅游品牌競爭力的目的。

扁平化設(shè)計(jì)；旅游APP；UI界面設(shè)計(jì)；極簡設(shè)計(jì)

一、扁平化設(shè)計(jì)的概述

扁平化設(shè)計(jì)風(fēng)格運(yùn)用于UI界面設(shè)計(jì)，受到了國際主義平面設(shè)計(jì)風(fēng)格、現(xiàn)代主義以及包豪斯新興風(fēng)格的影響。其概念的含義是：去除繁冗厚重、繁雜裝飾，實(shí)現(xiàn)極簡主義風(fēng)格。強(qiáng)調(diào)圖形圖標(biāo)的抽象、極簡和符號性。在手機(jī)APP界面中體現(xiàn)為：按鈕和選項(xiàng)精簡化，數(shù)字和字體簡單化，讓整個(gè)界面清爽整齊，讓用戶使用時(shí)清晰明了易懂，有效減少認(rèn)知障礙的產(chǎn)生。另一個(gè)優(yōu)勢是從功能性上還能降低功耗、延長待機(jī)時(shí)間，增加運(yùn)算速度等優(yōu)勢。

扁平化設(shè)計(jì)的元素組成元素，主要包括簡單的圖形元素、字體元素、色彩搭配。

在我們進(jìn)行圖形元素設(shè)計(jì)時(shí)，其核心的設(shè)計(jì)要點(diǎn)在于作減法。例如在圖形圖標(biāo)設(shè)計(jì)中，類似透視、紋理、漸變和3D效果的圖形圖標(biāo)去除掉，將信息中的核心簡明扼要的凸顯和優(yōu)化。由于屏幕的大小限制，應(yīng)高度歸納和概括按鈕和選項(xiàng)的造型，使界面干凈、整齊、簡單。在字體元素設(shè)計(jì)的時(shí)候，需要和其圖形元素相輔相成。花哨繁冗的字體在扁平化的界面里突兀且雜亂。符號化的字體和無襯線體的字體往往引人注目。特種字體包括手書字體雖然很有特點(diǎn)和亮點(diǎn)，但辨識度較低，容易被帶入混亂的版面當(dāng)中。在搭配色彩的時(shí)候，扁平化設(shè)計(jì)中，往往采用明亮、炫麗的色彩。由于界面載體的不同，普通版式色彩強(qiáng)調(diào)的形式法則，在扁平化色彩中不予以推薦。更建議使用飽和度較高的顏色使用到圖形圖標(biāo)上面，6-8種均可。多種色彩可以更好的凸顯圖形造型的分類，讓客戶立刻找到需要的圖標(biāo)、圖表和信息。

二、扁平化設(shè)計(jì)的原則和方法

1.旅游APP軟件UI界面設(shè)計(jì)中的原則

首先，遵循界面簡易原則。設(shè)計(jì)師在手機(jī)APP界面設(shè)計(jì)時(shí)候遵從簡約法則。文字字體采用辨識度較高的中英文字體，這樣做的好處是節(jié)約客戶閱讀及搜索信息的時(shí)間。圖標(biāo)的造型設(shè)計(jì)應(yīng)言簡意賅，掌握可看、易看、可讀、易讀的法則，高度提煉和概括的圖形圖標(biāo)（扁平化）更易使得用戶容易識別。背景方面注重實(shí)用和功能，用戶一目了然地快速理解APP的操作方法，提高軟件運(yùn)作效率。其次，遵循增加記憶原則。人類腦容量儲存信息是有限的，大量信息植入反而減少客戶的記憶程度。時(shí)間越長，人們記憶事物的強(qiáng)度越低。簡化界面設(shè)計(jì)，以減輕用戶的記憶負(fù)荷。

2.旅游APP界面設(shè)計(jì)方法

首先，頁面布局與設(shè)計(jì)方法。旅游APP的主界面設(shè)計(jì)要突出廣告和信息的主要功能與特色，例如將景區(qū)攝影圖片作為背景，圖片來源可以是商業(yè)攝影也可以選擇意境圖，可以提升用戶的的參與和體驗(yàn)性。主界面一般顯示廣告的核心，其余子頁面設(shè)計(jì)，可根據(jù)信息類型、特征、屬性選用統(tǒng)一的布局形式，并做出細(xì)節(jié)變化。其次，扁平化視覺設(shè)計(jì)方法。具體視覺元素可采用扁平化的設(shè)計(jì)風(fēng)格，包括文字、圖形、圖標(biāo)、圖表、背景、色彩等，力求通俗易懂、言簡意賅，以獲得極簡的視覺效果。最后，動效與反饋提醒設(shè)計(jì)方法。APP界面設(shè)計(jì)常見的動效設(shè)計(jì)，大致包括轉(zhuǎn)場動效和反饋提醒。兩者都需要注意，設(shè)計(jì)的數(shù)量適可而止，力求界面更加生動有趣的同時(shí)，避免繁冗和重復(fù)

三、扁平化設(shè)計(jì)在旅游APP界面中的運(yùn)用

以下是一組由來自全球的設(shè)計(jì)師設(shè)計(jì)的漂亮而極其現(xiàn)代的旅游類界面案例解析。

圖1來自Swipe to Travel界面設(shè)計(jì)，以“你想要飛往哪里”這個(gè)簡單的問題開始，設(shè)計(jì)理念讓猶豫不定的客戶較為輕松地做出目的地決定，通過豐富的圖片定位你的目的地，能讓你向左右滑動，甚至都不需要知道確切的旅行日期。簡短精小的APP能幫助猶豫不決的人更容易做出決定。

圖2 攜程旅行APP界面設(shè)計(jì)

圖2來自國內(nèi)最大一家旅游APP軟件攜程旅行網(wǎng)，界面設(shè)計(jì)簡約清晰，扁平化風(fēng)格融入其中。首頁界面設(shè)計(jì)三個(gè)大類別酒店、機(jī)票、旅游等運(yùn)用簡約的圖形樣式（飛機(jī)、建筑、自由女神像）體現(xiàn)扁平化的視覺效果，力求為顧客提供全方位的商務(wù)及休閑旅游服務(wù)，例如酒店機(jī)票預(yù)訂、休閑度假及商旅管理、特惠商戶及旅游資訊。

四、結(jié)語

扁平化設(shè)計(jì)作為簡約時(shí)尚的UI設(shè)計(jì)理念，普及在UI界面設(shè)計(jì)中。傳統(tǒng)的媒介例如標(biāo)志設(shè)計(jì)、包裝設(shè)計(jì)、書籍設(shè)計(jì)、廣告宣傳設(shè)計(jì)等，現(xiàn)在的旅游類手機(jī)APP界面設(shè)計(jì)中尤為普及。其強(qiáng)調(diào)版面干凈利落，圖形圖標(biāo)形狀規(guī)則飽滿，字體清晰且一目了然，凸顯出新穎現(xiàn)代的視效，給游客提供搜索信息無限的便利。用戶對旅游APP設(shè)計(jì)越來越高，所以旅游APP界面設(shè)計(jì)一定要注重用戶體驗(yàn)，在用戶體驗(yàn)方面多下功夫，開發(fā)設(shè)計(jì)出更人性化、更實(shí)用、更簡潔、更美觀的旅游APP軟件。

[1]汪蘭川，劉春雷.UI圖標(biāo)設(shè)計(jì)從入門到精通[M].北京：人民郵電出版社，2016.10.

[2]趙大羽.交互設(shè)計(jì)的藝術(shù)：iOS 7擬物化到扁平化革命[M].北京：清華大學(xué)出版社，2014.02.

[3]嚴(yán)晨.多媒體界面設(shè)計(jì)[M].北京：電子工業(yè)出版社，2011.09.

本論文為四川景觀與游憩研究中心資助科研項(xiàng)目的研究成果。項(xiàng)目名稱：《川內(nèi)旅游景區(qū)中旅游服務(wù)類APP的可視化設(shè)計(jì)研究》。項(xiàng)目編號：JGYQ2016026。