陈志莹，刘美杰，陈洁

　　（河北工业大学 建筑与艺术学院，天津 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