典型在线教育App产品设计风格分析与思考

刘婧 肖枫涛 陆海叶 吴燕

[摘           要]  首先归纳了App产品基本的风格设计，对其中关键的色彩设计、布局设计进行了细化描述。以此为基础，对目前广泛流行的四款在线教育App产品——学习强国、中国大学MOOC、得到、喜马拉雅进行了对比分析，并提出了进一步的思考与建议。

[关    键   词]  在线教育;App;界面设计;布局设计;色彩设计

[中图分类号]  TP311                [文献标志码]  A               [文章编号]  2096-0603（2021）03-0234-03

一、前言

移动互联网技术催生了数以千万计的App，仅2019年App的总下载量就超过了2040亿次，推动了人们的生活、工作、学习、娱乐发生了翻天覆地的变化。与传统PC桌面版的应用软件不同，手机屏幕的尺寸更加小巧、界面大小更加多样、人机交互方式更为多元，但首先对用户产生影响的就是其风格设计。App的风格设计既要保证用户拥有流畅的操作感受，又要满足审美需求、内容呈现需求和适应操作习惯需求。在线教育App因为要承载多样化的学习内容，在设计上更要降低由于内容学习给自身带来的心理成本，让用户能够更容易产生认同感，进而增强学习动力。因此，App在启动设计时，首先便应该定下整个App的设计风格，这样可以方便设计团队制定设计规范，减少设计风格不一致带来的沟通成本;反应App自身特性和所面向人群特点，形成认同感;适应用户已经形成的感官习惯和操作习惯，降低用户未来的使用成本。

二、App设计风格的主要类型

App设计风格是传达给使用者的一种整体的视觉感受，主要包括色彩搭配、页面布局和交互设计。通常，App的设计风格是通过对主要页面进行设计而体现的，在一定程度上体现了2/8法则。App风格主要包括：扁平化风格、三维设计风格、渐变风格等[1][2][3]。具体如下：

1.扁平化风格

扁平化设计是App的主流设计风格，又可细分为极简设计风格、Material Design和微软产品的metro风格。扁平化设计风格的App，界面美观、简约大方、条理清晰;设计元素上抽象、极简、符号化，能够更加凸显App的文字图片等信息内容。

2.三维设计风格

应用3D手法使App设计有关内容更加有纵深感，增强了界面的趣味性、美观性，能更好地反映App特性和调性，常用于游戏App界面。

3.渐变风格

渐变风格的运用范围很广，它可以当作背景使用，也可以在Logo或者按钮上使用，多为大撞色的使用，能更好地营造氛围和提升产品气质，同时使得界面充满时尚性、动感性。

下面重点就设计风格中的色彩搭配和頁面布局进行分析，关于交互设计，因为涉及内容多，另文分析。

三、App设计风格中色彩设计应用原则

色彩设计是影响App设计风格表现的重要因素。合理灵活地运用色彩搭配，不仅可以更好地呈现视觉效果，还可以提升界面感染力、引起用户共鸣，高效表达App的情感化设计，助力App成为衔接设计者和用户的情感桥梁。但色彩设计也需要遵从以下原则：

1.符合App自身定位

色彩本身自带联想性，会自主传达出其定势或者习惯的特点，进而直接影响人的情绪。如红色表示热情和庄严，在党政类App中广泛应用，和文化母体契合;橄榄绿往往和军队相关，深蓝色往往和科技相关。在进行色彩设计时，要结合需求分析和定位分析，明确App定位，尽量采取该定位已经形成的关联色，可便于用户快速地了解App的主题定位，从潜意识开始就获得用户的认可。

2.适应不同受众特点

色彩设计伴随用户年龄段呈现不同需求[4]，也伴随男性、女性性别不同呈现不同偏好。色彩设计需结合用户分析，按照二八法则和奥卡姆剃刀原理，确定主要用户群体和其偏好，以此为基础进行色彩选择、搭配和设计。

3.满足“总体协调，局部对比”

色彩设计一般包含一个主色和若干个辅色。单一颜色设计时可通过选定色相，调整纯度，使色彩具有层次感。在进行两种或两种以上色彩搭配设计时，选择色环相邻的进行搭配，可以使得设计更加高效稳定。

4.合理布局色彩

没有条理的色彩分布会提高用户认知和使用成本。应合理使用大、小色块，确定色块面积和布局。大色块烘托主题和气氛，小色块用于点缀。色彩的面积比例应能促进色彩分层布局，帮助用户建立视觉层级关系，降低用户成本。

5.兼顾各界面内和切换时的一致性

App往往有多个界面，多界面内色彩设计要遵从相对统一。同时，App各界面切换时，要符合色彩心理学和动态色彩的视知觉特性[5]，形成更加科学的色彩配色方案，为用户带来更丰富的视觉感受。

四、App设计风格中页面布局的主要方式

手机屏幕尺寸有限，使得页面的布局方式对App视觉效果会产生更大的影响。页面的布局，也是App风格设计中涉及内容组织提炼的重要内容，合理布局不仅能带来好的视觉效果，而且能够将App的内容更加便捷高效地呈现给用户。目前广泛使用的布局方式有：

1.列表式布局

该布局使得信息可以纵向无限伸展，也便于用户理解信息层级关系，常在信息瀑布流或者导航栏等场景中使用。但此种布局，用户往往难以记住整体信息架构，每次操作需从头开始，操作时间较长，容易使用户感觉到单调和疲倦。

2.分栏标签式布局

通常有上、下分栏，左侧和上侧分栏，上下分栏居多。上栏通常作为内容分类，多为多级分类。下栏作为App整体场景、应用领域或者主题等区分。通常会形成下栏作为第一级，上栏分别作为第二、三级的多级分类体系。下栏的分类往往较少，一般不多于5个，但也不少于3个。上栏往往较多。

3.网格式布局

常用的有四宫格、六宫格、九宫格和十宫格，多采用图标+文字上下或左右并排的方式显示。进入具体功能页路径短，而且能够使App的重点内容和主要功能更加凸显。但同时显示信息有限，次级入口不容易显示，功能层级多的App反而容易导致操作时间长。

4.卡片式布局

该布局可使各部分操作相对独立，浏览体验较好。但同时也无法承载过多的信息。

5.多面板式布局

可设计成多选多面板和单选多面板。多选多面板就是多个面板可以同时打开浏览内容，单选多面板是只可以一次性查看一个面板上的内容。该布局中每个面板上的内容呈现有限，需要避免在面板内重新分类显示，否则会增强操作复杂性。

6.复合式布局

组合使用上述布局方式，但一般不超过2～3种。

五、典型的在线教育App设计风格分析

（一）学习强国界面风格

1.色彩搭配

启动图标为红色背景，白色字体镂空，图标饱和度和明度双高吸引用户眼球，界面色彩搭配主要采用红色、白色，在界面背景、课程海报、界面按钮等元素中大量应用，红色大色块烘托主题和气氛，白色主要用于内容背景色，体现平台相关内容的严肃性。色彩搭配，符合整个“宣传”主题的同时，也更易于全体党员及全社会这个广大的目标用户群体接受和使用。

2.页面布局

界面主要采用列表式、上＼下标签式相结合的复合式布局，其中下标签为功能导航，共计5个标签，操作选择速度快;上标签为每一项主要功能的次级分类，左右滑动进行切换，非常便捷;功能标签“百灵”“电台”采用1级上标签进行分类，“學習”“电视台”采用2级上标签进行分类;每类中间内容均采用列表式布局，上下滑动进行选择浏览，这也契合平台上新闻要闻、政策法规解读、会议精神等内容需要篇幅式呈现的特点。

总的来说，学习强国App界面简约大方，操作使用便捷;其色彩搭配迎合目标用户群体，主题突出显著;其复合式的布局方式，对内容进行合理分类，逻辑严密，用户学习使用容易掌握平台内容的整体架构。不足之处是，上标签栏的“频道”太多，达到近40个，而且部分频道也有次级分类，这样，用户对某个频道某项分类感兴趣，操作步骤多容易忘记，可以在平台添加频道下次级分类的收藏功能，更便于用户使用。

（二）得到、中国大学MOOC界面风格

1.色彩搭配

中国大学MOOC：整个界面色彩搭配与启动图标的白、蓝、绿整体一致，每个界面选用色彩少，显得清晰簡洁;在每类内容卡片式布局中，卡片背景普遍使用渐变色，不仅赋予强烈的个性，而且和用户之间产生足够的情感共鸣。甚至借助渐变色来作为视觉引导，主功能“首页”下“国家精品课程”界面，顶部卡片大量使用蓝色，通过深浅渐变创造出方向性，引导用户向特定的地方浏览。

得到：以橙色选择了App主色，背景以白色作为底色，让整个App内容表现得更加清晰，内容中使用了一些高级灰的色彩进行搭配，让整个界面看起来更加和谐，对背景和主题色调进行融合，使App的主色调也包含了产品需求的意义。

2.页面布局

中国大学MOOC、得到界面布局主要采用多面板式、上＼下标签式相结合的复合式布局。下标签为功能导航，上标签为每一项主要功能的次级分类。

中国大学MOOC：功能导航标签3个，其中“首页”为主功能标签，包含5个次级分类，其布局方式较为复杂，除了次级分类“精选”总体采用多面板式布局，各面板采取网格、卡片、列表等布局方式;其余4个次级分类，均采用顶部卡片式布局，主要对相关重点课程进行宣传;下方为网格式布局，主要陈列出各项课程海报;用户在选择课程时，呈现上直观醒目。其余两个功能导航标签“我的学习”“账号”功能设置简单，为列表式布局。

得到：功能导航标签5个，其中“发现”“已购”采用上标签布局对次级内容进行分类，“学习计划”为卡片式布局、“知识城邦”为多面板布局、“我的”为多面板、网格相结合布局方式。主功能标签“发现”包含11个次级分类，每级分类布局方式大体相同，均采用卡片、网格、多面板的布局方式。

总的来说，两个App界面风格接近，布局方式相同，界面选用色彩少，清晰简洁，次级分类均采用了2～3种布局方式，每类页面排版上较为统一，呈现整体一致的视觉效果，用户体验好。中国大学MOOC两个功能导航标签“我的学习”“账号”功能，过于简单，可以增加笔记、收藏、订阅等功能，进一步提升用户的学习体验。得到主功能标签“发现”包含次级分类太多，每类布局方式较多，显得复杂，用户易产生视觉疲劳，短时间无法在脑海中形成信息框架。

（三）喜马拉雅界面风格

1.色彩搭配

界面色彩除了橙红色，每个界面均采用以外，剩下颜色搭配选择没有固定，根据不同的内容分类搭配相适应的颜色，比如“民间鬼故事”，其界面整体使用暗红和黑色，呈现一种阴森的氛围，突出主题;其次，每一项内容点进去页面背景色均采用纯色，文字均为白色，颜色的选择均与内容相适应，如“3D大自然睡前曲”背景采用绿色等;颜色的设置契合目标群体，如主功能“首页”下次级分类“儿童”“少儿教育”中高纯度的明亮颜色使用较多，符合儿童群体喜好。

2.页面布局

界面布局与得到较为接近，功能导航采用下标签式布局，功能次级分类采用上标签式布局，每类内容总体为多面板布局，各面板又采用网格、卡片、列表等布局方式。亮点在部分收听内容通过卡片式布局较独立、突出，点进去对相关内容采用旋转木马式布局，整个页面展示一项内容，整体性强、聚焦度高，通过手势滑动查看更多内容也较为方便。

总的来说，喜马拉雅界面美观，色彩搭配突出主题，引发用户情感共鸣，但非内容页面使用颜色过多（>3种），会分散用户的注意力，拉低使用体验;页面布局，逻辑清晰，内容整合合适，次级分类界面布局统一，但受内容类别过多的客观因素，主功能“首页”包含次级分类过多（23类），用户操作上会繁琐一些，也不易形成信息框架。

六、小结

App的风格设计相对独立，有自身的设计理论和实践做法支撑，但同时也和App本身的产品设计、内容设计、用户分析、需求分析等密切相关、相互关联。设计App的风格时，要充分考虑到用户的认知成本、操作成本和传播成本等，同时要兼顾显式的视觉体验层到隐式的情绪传达层，更要考虑到目标受众已经形成的视觉习惯、认知习惯、使用习惯，从更大层面上讲，要充分体现受众群体所接受的文化母体的影响。未来的在线教育类App的风格设计，应协同产品设计、内容设计和反馈设计，要能促使用户在使用App过程中感受到情感共鸣、人文关爱和学习乐趣，提升在功能操作和教育资源学习中的愉悦感、趣味感和成就感，从教育的本质属性出发，助力App更加便捷高效地推动人在知识储备、认知能力和内在深层次的改变和提升。

参考文献：

[1]廖磊，桑振.试析手机App设计中的扁平化设计风格[J].工业设计，2016（9）：116，118.

[2]徐孟瑾，朱华.极简主义在App界面设计中的原则探讨[J].设计，2016，238（7）：32-33.

[3]王洋，吕曦.以用户体验为中心的不同终端下同一App界面差异化设计[J].现代装饰（理论），2015（4）：114-115.

[4]谭妍珺.浅谈不同年龄阶段对包装设计的需求[J].艺术品鉴，2017（10）.

[5]高玉娇，覃京燕，陶晋.手机App交互设计中动态色彩的视知觉研究[J].包装工程，2016，37，326（8）：134-137.

编辑 李建军