toofoo Music 同福音乐APP

2020 | 品牌体验创新 | 交互设计 / 视觉设计

同福音乐，英文名 “toofoo”。产品服务于商场、商超、酒店、餐饮、娱乐、教育等的公共场合的背景音乐、商业视频的播放和展示。产品有基于互联网的硬件播放盒子，还有音视频内容分发的在线平台，旨在提供智能优质的背景音乐服务。

2020年，同福音乐委托MingDesign对其APP进行了交互设计和视觉设计工作。

清晰的版块划分，降低用户减少操作难度，做的所见即所得。

统一每个界面的图标、颜色、字体，做到各层级内容视觉统一性。

优化产品的交互体验，通过视觉简化，架构分类，清晰简明呈现功能模块。

丰富组件样式，有层次的呈现内容，增强界面的节奏感和趣味性。

由于产品本身层级并不复杂，功能直接明了，所以在层级处理上去做减法，也符合产品最初简洁、直观的定位。

从首页入口就可以很直观的了解APP整体的框架和功能点，使用户在第一时间就可以找到所有的功能需求入口。

通过对产品的分析，发现无衬线字体更符合这种直观且偏功能性的产品调性。因此在字体的应用上：中文字体使用了“平方简体”，英文字体使用了“Helvetica”

根据产品直观、简洁的属性，圆角的线性图标更容易被人接受，传达一种干净利落的品质感。图标断线的处理方式增强品牌记忆。

通过对常见的应用颜色进行分类发现，红色是音乐类APP常用的颜色。红色也是一种充满能量的颜色，是最醒目的颜色，能在总多应用中脱颖而出。选用灰色和白色作为背景划分信息展示和功能操作区域，同时用颜色拉开页面的信息层级。

结合产品特色的视觉设计

根据iOS12的设计规范，结合产品自身属性，界面设计采用大间距，大留白来做信息层级的区分，无框式设计更适合这类APP的调性。整体布局给人时尚、通透和舒适的使用体验。

设计理念上从用户本能、行为、精神层三个维度来打造一款好看好用又能深入人心的个性化产品，让设计既能服务于功能需求，又能提升功能需求。

为了保持UI的一致性，MingDesign的设计师从整体的品牌调性出发，用“简约而不简单”的设计理念贯穿整个设计，不断做减法，去掉多余的装饰设计，让整体的设计依附于内容层面的表达，尽可能弱化UI元素所占据的比例达到强化内容的目的。

明和体验设计咨询