運動類APP界面設計的風格探析

陳志瑩，劉美杰，陳潔

（河北工業大學 建筑與藝術學院，天津 300401）

運動類APP界面設計的風格探析

陳志瑩，劉美杰，陳潔

（河北工業大學 建筑與藝術學院，天津 300401）

文章通過對界面設計風格形成的因素分析以及運動APP的發展與特點闡述，根據界面元素的不同對運動APP界面設計風格進行分類，并分析不同風格的特征與優勢，總結出運動APP界面設計主要采用積極、健康、時尚、有趣味性的元素，這些元素的應用影響著界面設計的風格。根據運動APP界面元素的應用把運動類APP界面風格分為寫實照片風格、扁平化圖形風格和插畫風格。

運動APP；界面設計；風格

Internet :www.artdesign.org.cn

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

一、影響APP界面風格形成的因素

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

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

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

> 圖 1 keep健身軟件界面

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

> 圖 2 “咕咚”運動軟件界面

二、運動類APP的發展與特點

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

三、運動APP界面設計風格分類

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

（一）寫實照片風格

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

（二）扁平化圖形風格

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

（三）插畫風格

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

通過以上分析得出，APP界面設計風格的形成不是獨立存在的，是兩者或者幾者風格元素的結合，主導因素不同，所體現風格就有所差異。

四、總結

隨著社會經濟的發展和科學技術得提升，以及人們對運動和健康的追求越來越理性化、科學化、多樣化。運動軟件也不斷的發展變化，并朝著越來越豐富，多彩符合大眾需求的方向前進，探析運動APP界面設計的風格，從不同的角度研究各種風格的適用性與特征。可以更詳細的了解運動APP界面設計的形式表現和情感傳遞，從而更理性有效的進行運動類APP界面創作，并不斷發現更多表達方式和風格。■

[1]黃晶晶，李東耀.全民健身背景下手機 APP 健身的發展趨勢研究[J].體育科技文獻通報，2017，25（1）：37.

[2]秦歲明，何夢楠.扁平化風格在網頁界面設計中的應用[J].包裝工程，2015（6）.

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

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

[5]韓久海.現代手機扁平化界面設計風格根源探討和趨勢分析[J].天津美術學院學報，2015（8）：100-102.

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

[7]甄真.色彩在手機界面設計中的運用[J].現代裝飾（理論），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