陳志瑩，劉美杰，陳潔

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

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

陳志瑩，劉美杰，陳潔

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

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

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

Internet :www.artdesign.org.cn

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

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

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

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

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

> 圖 1 keep健身軟件界面

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

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

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

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

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

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

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

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

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

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

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

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

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

四、總結(jié)

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

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

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

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

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

[5]韓久海.現(xiàn)代手機(jī)扁平化界面設(shè)計(jì)風(fēng)格根源探討和趨勢(shì)分析[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