启示性设计思路在“恋爱帮”App中的应用

Devding
Jun 4, 2017
4 min read

1.背景描述

“恋爱帮”是一款基于二度人脉的恋爱交友App，导入用户的现实关系链，保证信息的真实可靠。目前安卓端已上线主流应用市场，并登上“360应用助手”分享热榜前五。“恋爱帮”App的竞品主要为“世纪佳缘”及“百合婚恋”，随着用户群体的年轻化、多样化，两者均没有在产品的界面设计上做出对应的迭代，导致产品体验的下降。启示性概念的融入为“恋爱帮”产品情感化的表达提供可能性，主要表现在行为流程优化及界面元素的设计上。

2.旧版产品框架

“恋爱帮”旧版的产品界面采用常见的标签页分类，信息规整有序但优先层级不足，对于行为流程的优化也不到位：

（1）首页。产品默认界面，优先展示用户的二度好友，排序依据主要为信息完善度；

（2）消息。消息列表呈现页包含三部分：用户消息、系统消息及客服，排序依据为接收时间；

（3）帮脱单。邀请好友加入“恋爱帮”的入口，包含邀请数据、已邀请的好友、未邀请的好友三部分；

（4）我的。个人相关信息呈现页面，包含交友特性数据：访客、关注及好友评价。

旧版本高保真原型的展示视频如下所示（基于Mock Plus）：

3.新版产品界面设计

3.1 功能描述及产品框架

以调研数据为依据，将用户需求转化为具体的功能与内容。新版界面的产品框架在保证核心功能不改变的基础上，以体验流为核心：

（1）去除四个标签页的固定模式，新增左右侧滑菜单，优化信息展示层级；

（2）首页的信息简化，凸显照片等核心信息；

（3）“个人页面”信息进行整合重分，精简了冗余列表；

（4）对优先级靠后的操作进行弱化处理，重要的功能在视觉设计上进行强化，保证主体信息优先；

（5）产品的文案表述进行升级，引导用户的同时注重操作的转化；

（6）各元素的统一协调，在顺应当下移动端的设计风格基础上进行优化。

3.2 启示性的应用内涵

主体风格是指用户对于界面整体性的感知，它是所有视觉组成元素的基础。由于产品自身框架的繁杂，“恋爱帮”的旧版界面并没有对内容做统一化处理，导致不同页面之间的视觉风格差异较大。主题色设计是“基于经验的认知准确”思路的典型体现，大面积的浅色调，降低冗余元素对于核心内容的影响。遵循主题色的设计思路，更新后的“恋爱帮”产品界面简洁直观，简化图标及信息层级（见图4.7左）。 “首页”是对象列表的集中呈现，新版界面在瀑布流设计的基础上，凸显照片、姓名等关键信息的优先级。“瀑布流”的特点表现为参差不齐的多栏结构，随着页面滚动分段加载数据块。卡片高度由于好友评价内容不同而导致的错落格局，提升了阅读的趣味性，兼顾信息呈现与浏览效率。筛选按钮呈圆形放置于右下角，属于单手操作的舒适区域，且可点击区域大于视觉区域。“筛选”界面中，年龄段的选择采用横向滑杆，用颜色区分量级，易于交互且便于呈现（见图4.7右）。

“好友评价”、“推荐我的”和“喜欢我的”为性质接近的交友数据呈现，因此界面风格也趋于相近，均为卡片式设计的典型应用。卡片式设计有三个特点：清晰直观、简单易懂、信息模块化。模块化的卡片式设计是格式塔理论接近性原则的体现，引导用户的视觉路径，减少思考时间。同时，本案例中卡片自身阴影效果的加入强化了模块化的质感（见图4.8）。

“恋爱帮”App“聊天界面”及“好友主页”的按钮创意设计中，综合运用了图形识别易化与具有特定涵义的微动效表达，按钮的切换状态在可识别的前提下，同时展示契合内容的特定微动效情节，符合“基于目标的结果预知”的设计思路。“聊天界面”的“发送按钮”可根据输入框的状态进行启示性的引导，发送按钮外形为纸飞机，隐喻发送、传递的概念。默认情况下，按钮呈灰色，有文字输入时则变为蓝色，同时纸飞机朝向发生改变，传递着将“消息”发往“聊天界面”的状态（见图4.10）。

新版“恋爱帮”的产品框架从“基于情景的行为契合”思路出发，对体验流程进行优化，根本上提升了体验的效率。旧有的产品结构为传统树状路径，没有考虑操作的优先级。更新后的界面将导航信息集中在左侧的汉堡栏菜单，汉堡菜单从左侧划入至页面三分之一处，底部背景变暗。这个概念的设置可以兼顾用户的多级浏览需求，方便页面间的切换。导航菜单的内容以间距及颜色为划分依据，保证界面的干净整洁。右侧菜单是消息列表，可通过右上角的按钮启用排序规则（见图4.14）。

“我的会员”及“我的缘分币”界面，两者均涉及关键数据的呈现：会员的到期时间及现有缘分币的数量。大面积的主题蓝色渐变凸显数据的重要性，采用蓝色点缀关键信息是由产品的差异化定位决定的，当用户为男性时，界面为蓝色色调，反之为品牌色色调。页面中的次要信息采用卡片式设计，利于多级信息的结构化表现（见图4.15）。