運(yùn)動類APP界面設(shè)計(jì)的風(fēng)格探析

陳志瑩，劉美杰，陳潔

（河北工業(yè)大學(xué) 建筑與藝術(shù)學(xué)院，天津 300401）

運(yùn)動類APP界面設(shè)計(jì)的風(fēng)格探析

陳志瑩，劉美杰，陳潔

（河北工業(yè)大學(xué) 建筑與藝術(shù)學(xué)院，天津 300401）

文章通過對界面設(shè)計(jì)風(fēng)格形成的因素分析以及運(yùn)動APP的發(fā)展與特點(diǎn)闡述，根據(jù)界面元素的不同對運(yùn)動APP界面設(shè)計(jì)風(fēng)格進(jìn)行分類，并分析不同風(fēng)格的特征與優(yōu)勢，總結(jié)出運(yùn)動APP界面設(shè)計(jì)主要采用積極、健康、時尚、有趣味性的元素，這些元素的應(yīng)用影響著界面設(shè)計(jì)的風(fēng)格。根據(jù)運(yùn)動APP界面元素的應(yīng)用把運(yùn)動類APP界面風(fēng)格分為寫實(shí)照片風(fēng)格、扁平化圖形風(fēng)格和插畫風(fēng)格。

運(yùn)動APP；界面設(shè)計(jì)；風(fēng)格

Internet :www.artdesign.org.cn

隨著人們健康意識的不斷加強(qiáng)和全民健身事業(yè)的發(fā)展，對運(yùn)動和健身的需求不斷增多，要求越來越高，運(yùn)動類APP也應(yīng)運(yùn)而生。運(yùn)動類APP的出現(xiàn)大大提高了運(yùn)動健身的自由性，讓運(yùn)動不再局限于健身房，促進(jìn)了全民健身事業(yè)的發(fā)展，同時也達(dá)到了運(yùn)動社交的目的。運(yùn)動APP種類繁多，不同的APP風(fēng)格也不盡相同，風(fēng)格問題是設(shè)計(jì)師們不斷研究的問題，對于APP本身，它是整個企業(yè)精神面貌的展現(xiàn)和企業(yè)文化理念的傳播者，設(shè)計(jì)者通過不同設(shè)計(jì)語言和形式的表現(xiàn)，展現(xiàn)出不同的界面效果。一款A(yù)PP界面設(shè)計(jì)不僅要滿足大眾的功能需求和審美需求，更要傳遞出個性和情感。不同風(fēng)格的界面設(shè)計(jì)會吸引不同的人群，界面設(shè)計(jì)給人們第一印象的好壞取決于界面風(fēng)格的把握。

一、影響APP界面風(fēng)格形成的因素

影響APP界面設(shè)計(jì)風(fēng)格形成的因素包括物質(zhì)性因素和文化情感因素。這里物質(zhì)性因素指圖形、色彩、文字、版面、設(shè)計(jì)手法、表現(xiàn)方式等。其中任何一個因素都是界面風(fēng)格形成必不可少的條件，如圖標(biāo)設(shè)計(jì)。蘋果手機(jī)之所以風(fēng)靡全球，受廣大果粉追捧，不僅是因?yàn)樗鼜?qiáng)大的iOS系統(tǒng)，還有其整體統(tǒng)一、簡潔易識別、人性化的界面圖標(biāo)設(shè)計(jì)。色彩的運(yùn)用也直接影響著界面風(fēng)格，在一定程度上，色彩本身就是一種情感或風(fēng)格的表現(xiàn)。例如，兒童讀書軟件界面色彩一般選用純度和明度較高色彩，因?yàn)檫@類型色彩能表現(xiàn)出可愛活潑受兒童喜歡的界面風(fēng)格。不同的字體擁有不同的性格和情感，宋體給人典雅莊重感，黑體干凈醒目等。如keep健身軟件歡迎界面的廣告語“自律給我自由”的字體設(shè)計(jì)，采用簡潔的黑體筆畫為基礎(chǔ)，整齊的排列中每個字體展現(xiàn)出自身筆畫的律動感，白字搭配灰底，充滿力量感和時尚感。簡約又不失個性的表現(xiàn)風(fēng)格符號當(dāng)下大眾的審美傾向。當(dāng)然，影響界面風(fēng)格的物質(zhì)性因素很多，且每個因素都要統(tǒng)一于界面整體風(fēng)格，使界面更加諧調(diào)。

另一方面是文化情感因素，是指社會文化的發(fā)展以及用戶的功能需求和情感共鳴。隨著經(jīng)濟(jì)全球化發(fā)展，各國文化的交流融合，人們已經(jīng)普遍接受外來物種和設(shè)計(jì)風(fēng)格。界面設(shè)計(jì)的形式和方法也朝著多樣化發(fā)展，但界面設(shè)計(jì)的最終目的始終是簡潔、直觀、易操作。運(yùn)動APP使用人群根據(jù)用戶使用目的劃分為：熱愛運(yùn)動的人群、以減肥為目的的人群和追求更高標(biāo)準(zhǔn)體型的人群。根據(jù)用戶運(yùn)動種類的不同和需求，APP也分為很多種，比如跟跑步相關(guān)的悅動圈，綜合類運(yùn)動健身軟件fit、keep等，還有許多當(dāng)下流行的瑜伽、腹肌等APP。

提到運(yùn)動二字，人們首先想到的是健康、正能量，在許多人看來，堅(jiān)持運(yùn)動是對身體健康的注重，也是一種性格魅力的展現(xiàn)，在當(dāng)今社會運(yùn)動健身更是被貼上了時尚的標(biāo)簽。但堅(jiān)持運(yùn)動并不容易，尤其對于以減肥為目的的人群，讓用戶堅(jiān)持運(yùn)動并堅(jiān)持使用運(yùn)動軟件，不僅要滿足用戶的功能需求，更是運(yùn)動APP界面風(fēng)格把握的重要因素，即所要傳遞的精神情感信息要與用戶產(chǎn)生情感共鳴。物質(zhì)性因素與文化情感因素對APP界面設(shè)計(jì)起到很重要的作用，兩者相輔相成，缺一不可。

> 圖 1 keep健身軟件界面

> 圖 3 “英雄健身房”軟件界面

> 圖 2 “咕咚”運(yùn)動軟件界面

二、運(yùn)動類APP的發(fā)展與特點(diǎn)

人們健身意識的增強(qiáng)、全民健身行動的號召，以及數(shù)字產(chǎn)品和互聯(lián)網(wǎng)技術(shù)的發(fā)展，是運(yùn)動APP發(fā)展的重要原因，運(yùn)動軟件的使用不僅推動了全民健身事業(yè)的發(fā)展，更讓用戶得益于其中。雖然運(yùn)動軟件在國內(nèi)發(fā)展較晚，但受現(xiàn)代設(shè)計(jì)風(fēng)格的影響，運(yùn)動類軟件的界面設(shè)計(jì)風(fēng)格和表現(xiàn)手法日趨多樣化。中國第一款運(yùn)動軟件為咕咚運(yùn)動，通過用戶個人信息（性別、身高、體重……）的分析，提供相應(yīng)的運(yùn)動方式、時間以及消耗的卡路里等信息，讓運(yùn)動有效科學(xué)的進(jìn)行。咕咚運(yùn)動早期界面logo為一個奔跑的人的形象，相對于現(xiàn)在的咕咚，圖形比較繁冗，且界面缺乏設(shè)計(jì)美感。隨著人們審美水平提高和運(yùn)動需求種類的增加，界面設(shè)計(jì)也更美觀、更具風(fēng)格和個性化。且軟件的功能不斷加強(qiáng)，種類也不斷增多。不僅可以針對個人制定科學(xué)的方法還提供視頻教學(xué)，在線預(yù)約健身教練或者減肥師等，并能時刻分享自己的健身運(yùn)動成果，用戶可以根據(jù)自己的喜好選擇不同的運(yùn)動軟件，并與小伙伴們產(chǎn)生互動，從而形成一種良好的激勵氛圍。跟健身房相比，它提高了運(yùn)動的自由開放性，跟盲目運(yùn)動相比，它讓運(yùn)動更加理性、有選擇、有效率、有趣味，同時還能擴(kuò)大自己的交際圈。

三、運(yùn)動APP界面設(shè)計(jì)風(fēng)格分類

由于運(yùn)動類APP界面設(shè)計(jì)要傳達(dá)健康、時尚、正能量的感覺，且功能性很重要，所以界面一般采用直觀、簡約且富有個性的元素來表現(xiàn)，根據(jù)元素和表現(xiàn)方式的不同把運(yùn)動APP界面設(shè)計(jì)風(fēng)格分為三類：寫實(shí)照片風(fēng)格、扁平化圖形風(fēng)格、插畫風(fēng)格。

（一）寫實(shí)照片風(fēng)格

這類界面風(fēng)格主要通過照片來表達(dá)和傳遞信息，特點(diǎn)是直觀易懂。設(shè)計(jì)中以照片為主文字為輔，通過不同照片區(qū)分功能和主題，讓用戶能夠清楚的識別信息，輕松的操作畫面，照片的風(fēng)格統(tǒng)一化處理，統(tǒng)一的風(fēng)格中每張照片又有自己的層次感，使畫面統(tǒng)一而不單調(diào)，反而賦予界面一種時尚簡約的視覺感。如圖1的keep健身軟件的界面，除了訓(xùn)練界面和交友界面外，keep健身軟件界面分為頂部滾動欄、中間功能區(qū)以及底部導(dǎo)航欄。整個界面中的幾個區(qū)域都采用了照片輔以文字的形式，不同的區(qū)域，版式也有所不同，界面照片整體采用了時尚灰色調(diào)，給人一種平緩舒適又有個性的形式感。與界面功能區(qū)不同，底部的導(dǎo)航欄采用簡潔圖標(biāo)形式，簡約圖標(biāo)設(shè)計(jì)使界面更加干凈、一目了然。為統(tǒng)一于整體時尚簡約風(fēng)格，字體的選擇也以黑體為主，不同筆畫、粗細(xì)、大小的字體使界面更加豐富。寫實(shí)照片風(fēng)格的界面設(shè)計(jì)更具真實(shí)感，通過真實(shí)人物照片給人以親切感，讓用戶充分體驗(yàn)互動性，從而直接影響用戶，促進(jìn)堅(jiān)持運(yùn)動的精神傳遞。與keep界面設(shè)計(jì)風(fēng)格相同的運(yùn)動APP還有fit、火辣健身等。

（二）扁平化圖形風(fēng)格

扁平化圖形風(fēng)格界面以扁平化圖形或者色塊為主，圖形的設(shè)計(jì)讓界面充滿設(shè)計(jì)感，界面功能采用簡潔的圖標(biāo)設(shè)計(jì)或者色塊來表現(xiàn)，有時會采用花紋和漫畫豐富畫面，使畫面活潑有情趣。由于圖形造型簡潔、易識別、主題明確，所以便于記憶和傳播。如圖2為現(xiàn)在的咕咚運(yùn)動界面，扁平化圖形和圖標(biāo)是界面主要元素，歡迎界面采用了不同形式公路并用隱喻的手法表現(xiàn)出發(fā)、轉(zhuǎn)彎、超越極限、從新開始的意義。主界面中以中間和底部導(dǎo)航欄的圖標(biāo)為主導(dǎo)，并結(jié)合文字表現(xiàn)主題。用戶信息界面也采用了簡單的線性輪廓圖標(biāo)形式，用獎牌的輪廓表現(xiàn)運(yùn)動生涯成就，鞋子來隱喻裝備，排行榜用數(shù)字123表現(xiàn)。扁平化圖形給人以無限趣味性和表現(xiàn)力，充滿設(shè)計(jì)感，是文字和照片無法替代的。以矢量圖形為主的扁平化圖形風(fēng)格的界面設(shè)計(jì)要始終堅(jiān)持界面圖形設(shè)計(jì)原則，讓圖形更加直觀、便于操作。與咕咚運(yùn)動界面設(shè)計(jì)風(fēng)格相似的還有悅動圈等。

（三）插畫風(fēng)格

以插畫形式表現(xiàn)主題和傳達(dá)信息，根據(jù)不同的主題和信息設(shè)計(jì)插畫的風(fēng)格和元素，并輔以文字信息表達(dá)主題，是插畫風(fēng)格的特點(diǎn)。插畫風(fēng)格界面的優(yōu)點(diǎn)是能夠?qū)χ黝}起到渲染的作用，容易引起人們的聯(lián)想，增加界面的趣味性和故事性。如圖3為gym of heroes“英雄健身房”健身APP界面設(shè)計(jì)，界面logo是由健身與英雄的英文以及一個裸露的肌肉男的外形組成，生動形象的傳遞出健身這一主題。歡迎界面由三個滾動界面組成，每個界面都由一副幽默的動態(tài)小插畫表現(xiàn)，第一個界面是一個肥胖的人站在床前，并配文“告別懶惰動起來”，第二個界面是由一個人站和啞鈴及水杯組成，寓意“讓身材變得更合適”。第三個界面是不同的健身器材組成的插畫，并指示“選擇你喜歡的健身項(xiàng)目”。每個界面的頂端或者底部都以一個健壯的肩膀圖形元素來表現(xiàn)，體現(xiàn)出輕松幽默的界面風(fēng)格，且背景圖案是由很多健身相關(guān)的物品組成，提升界面層次。黃黑兩種色彩搭配，充滿視覺沖擊感。界面中小圖標(biāo)的設(shè)計(jì)也采用了插畫風(fēng)格，使界面更加統(tǒng)一。插畫風(fēng)格的界面設(shè)計(jì)可以滿足不同用戶的需求，因?yàn)樗粌H是對主題的貼切再現(xiàn)，更可以根據(jù)不同的主題表現(xiàn)出不同的情感色彩，從而吸引不同的用戶。

通過以上分析得出，APP界面設(shè)計(jì)風(fēng)格的形成不是獨(dú)立存在的，是兩者或者幾者風(fēng)格元素的結(jié)合，主導(dǎo)因素不同，所體現(xiàn)風(fēng)格就有所差異。

四、總結(jié)

隨著社會經(jīng)濟(jì)的發(fā)展和科學(xué)技術(shù)得提升，以及人們對運(yùn)動和健康的追求越來越理性化、科學(xué)化、多樣化。運(yùn)動軟件也不斷的發(fā)展變化，并朝著越來越豐富，多彩符合大眾需求的方向前進(jìn)，探析運(yùn)動APP界面設(shè)計(jì)的風(fēng)格，從不同的角度研究各種風(fēng)格的適用性與特征。可以更詳細(xì)的了解運(yùn)動APP界面設(shè)計(jì)的形式表現(xiàn)和情感傳遞，從而更理性有效的進(jìn)行運(yùn)動類APP界面創(chuàng)作，并不斷發(fā)現(xiàn)更多表達(dá)方式和風(fēng)格?！?/p>

[1]黃晶晶，李東耀.全民健身背景下手機(jī) APP 健身的發(fā)展趨勢研究[J].體育科技文獻(xiàn)通報(bào)，2017，25（1）：37.

[2]秦歲明，何夢楠.扁平化風(fēng)格在網(wǎng)頁界面設(shè)計(jì)中的應(yīng)用[J].包裝工程，2015（6）.

[3]刁穎，手機(jī)界面設(shè)計(jì)一體化趨勢探析[J].藝術(shù)與設(shè)計(jì)（理論），2015（3）：57-59.

[4]李娟，吳磊.圖形符號的文化特征認(rèn)知[J].包裝工程，2009（3）.

[5]韓久海.現(xiàn)代手機(jī)扁平化界面設(shè)計(jì)風(fēng)格根源探討和趨勢分析[J].天津美術(shù)學(xué)院學(xué)報(bào)，2015（8）：100-102.

[6]韓靜華，馬麗莉.兒童數(shù)字讀物的界面設(shè)計(jì)風(fēng)格探析[TB].包裝工程，2014，35（20）：83-86.

[7]甄真.色彩在手機(jī)界面設(shè)計(jì)中的運(yùn)用[J].現(xiàn)代裝飾（理論），2015（11）：103-104.

Analysis on the Style of Sports Software Interface Design

CHEN Zhi-ying, LIU Mei-jie, CHEN Jie
(School of Architecture & Art Design, Hebei University of Technology, Tianjin 300401,China)

Based on the analysis of the factors of interface design with the development and characteristics of the sports APP, the style of sports APP is classified according to the interface elements. Analyzed the characteristics and advantages of different interface styles . Summed up the movement APP interface design mainly using healthy, stylish, interesting elements, the application of these elements affect the interface design style. Sports APP interface style is divided into: realistic photo style, flat graphics style and illustrator style according to the application of sports APP interface elements.

sports app; interface design; style

TP311

A

1008-2832（2017）09-0096-03

檢 索 :www.artdesign.org.cn