PART 1 关于海燕计划
随着2020毕业季的到来，自如启动了2020「海燕计划」第8季，同时联合多个品牌，助力毕业生自如生活。
「海燕计划」是自如每年最重要的企业社会责任项目，旨在为初入社会的高校应届毕业生提供租房月付、免押金的专项支持。
自2013年举办以来，「海燕计划」已连续举办8年，惠及全球2000+所高校的近92万+毕业生，减免租房押金超过5亿元。今年，自如「海燕计划」第八季将继续为全球高校应届毕业生提供包括租房、出行、娱乐、旅行、职场、知识等总价值超过3亿元的一站式专项支持，助力全球高校应届毕业生勇敢飞翔。
PART 2 主视觉复盘
视觉设计师：隐身少女Alice
视觉色调
2020年「海燕计划」至今已开展到第8季，考虑到前几季的蓝色系的活动品牌调性，并结合今年的毕业生状况，我们选用浅蓝色大面积天空背景，沿用第七季的深蓝色为小面积地面底色，绿色植物做点缀。为此次「海燕计划」带来一种春夏交际的清新和自然的感觉。
海燕领飞在前指引，毕业生们在人生道路上自由奔跑，在自如「海燕计划」的助力下开启新的社会生活。
标志色彩
本季Logo颜色与去年颜色稍有调整，颜色更符合本季主视觉配色。
红色与黄色作为比划点缀，提亮整个Logo的色彩。
动效结合
初版「海燕计划」页面偏清新绿，主视觉撑满整个画面；画面动效层层叠动，体现场景的景深，增加趣味性的同时，更多的抓取用户视觉停留。
第二版的延展「海燕计划」一贯的蓝色调，在画面静止的时候也有一些小动态，会增加一些视觉停留，画面动效体现在未划动时的微小运动。
最终版的主视觉动态结合前两种动态，并整体缩小了主要人物，为画面留下更多呼吸的空间。
人物风格
此次「海燕计划」主视觉人物风格从自如插画组件系统中提取，同时一步步明晰自如的人物插画风格。奔跑的人物侧面形象寓意着毕业生们在自如「海燕计划」的帮助下，在解决了租住这一难题，可以放心大胆的迈入社会走入新的职场人生阶段。
视觉周边
在「海燕计划」的基础上新增了10款生动活泼的木木熊贴纸作为的周边产物。
设计师手记
Tips：在做主视觉的时候，画面人物上增加不同的表情可以让人物生动，尝试一些小动效会让画面更灵活一些。
PART 3 活动页面
视觉设计师：Sinshuo Han
「海燕计划」是营销属性的项目，相较功能型页面来讲，在设计营销运营活动页面时，需要在保持理性的同时多投入一些感性来营造气氛，运营活动的页面就像是商场柜台的导购员或是网络直播销售的播主，如何将自己的产品业务更快、更好、更生动的推荐给用户是关键，平淡的、说明书似的叙述是很难打动用户的。
关于页面配色
「海燕计划」服务的对象是大学毕业、即将走出校园的年轻人，青春、活力是必不可少的。由于主视觉部分已经由同事完成，所以在确定页面风格调性上省了不少力。页面作为主视觉的延伸，在配色上不能脱离主视觉，现有主视觉的下方用深蓝作为底色，因此页面设计的背景部分也采用了相同的颜色，一来是在视觉上与主视觉保持统一、突出品牌调性，二来也是为了能更好的突出页面要传达的内容。
页面的配色以主视觉为参考，同色系颜色或邻近色系颜色相互搭配可以让页面的视觉更加和谐，不至于杂乱花哨。例如icon部分，这种配色方式是相对稳妥的，也更容易操作，出错率较低。
「海燕计划」的品牌视觉色为蓝色系，有美术基础的同学应该有了解——「互补色」指在色相环上距离180度左右的两个颜色，因此蓝色的互补色为橙色，而橙色也正好是自如的品牌色。
互补色可以用作页面的点缀、重点内容的高亮，让页面更有层次和活力。而且互补色的视觉对比效果更为强烈，色彩名都对比、互补色对比都是突出信息的方法，当信息层级较多时两种方法可以同时使用。互补色可用在需要着重强调的内容上面，从视觉上去引导用户先看到此内容；次级内容根据具体情况，使用同色系、不同明度配色或邻近色系配色，页面具体应用如下：
前期的准备工作很重要。在接到一个需求时，首先做的不是马上开始画图稿，而是要先了解这个需求的项目背景、受众人群等相关的信息，同时对现有原型、文案进行梳理，确认信息层级、重点内容。
在页面的初版设计中，第一个板块用的是浅配色，与背景色的对比强烈，虽然达到了突出内容的效果，但在视觉上却显的突兀生硬，既不承上又不启下，甚至强过了主视觉部分。发现问题后对这一部分的配色进行了调整，在视觉上进行了降级处理，提升了舒适度，与页面其他部分内容搭配更和谐，此外，与下面的内容板块也进行了区分，让主视觉和核心内容板块之间增加了视觉过渡。
内容具象处理
能用图表示的就不要只用文字。具象化的设计在信息传达上更高效，也能够在最短的时间内被用户轻松的感知。一眼读完所有文字内容是不现实的，具象化的设计至少可以让用户在最短的时间内了解到活动内容，优惠券部分的设计就是很好的例子。
具象化处理需要对关键词进行「联想推理」，例如页面中有一部分内容是关于「付款、支付」的，通过相应的关键词可以「联想推理」到很多内容，可能会想到很多无用、不相关的内容，但没关系，这时候就是需要脑洞大开！
选出最贴合内容且最适合内容设计、页面排布的关键词，将其具像化。这里我选择的是“钱包、卡片隔层”和“银行卡”，同时也要注意相应的内容的关联性、层级性，并在视觉上加以区分。
总结
以上两个部分在这次项目设计中思考多一些。其实营销运营类的需求时效性较强，没有给设计留出很多时间，「如何在有限的时间内高效的产出高质量的设计」是每个设计师都应该去思考的，多看、多思考、多积累，这样面对紧急需求时，才能不慌不乱、快速反应。设计没有好坏之分，只有合适与否。
PART 4 权益中心复盘
UX设计师：姜正
项目背景
一直以来海燕计划承载着为大学生群体解决毕业租房问题的社会责任，作为海燕计划核心的“权益中心”也承载着用户认证转化、权益福利、品牌宣传的作用。为了更好的帮助用户完成认证流程、领取海燕福利，我们需要从设计的角度辅助用户提高决策效率。
设计师面临的挑战不仅仅是运营活动的时效性和需求的多样性，同时还要兼顾产品、运营、品牌合作方的多方需求，最后还要考虑到技术的适配以及降低实现成本，作为设计师必须均衡各方诉求。
接下来将从设定设计目标、建立设计原则、优化交互信息降低信噪比、组件化的思维等几个方面和大家分享这次的设计思考。
设计目标
为了更好的服务于用户，提高的新海燕的认证转化，以及结合运营项目的种种特性，我们设定了“辅助提高用户决策效率、快速响应业务需求”两个主要设计目标。
1.为什么要提高用户用户决策效率？
权益中心承载着“用户认证转化”的核心业务目标，其次还包含用户权益、品宣活动、房源展示等信息模块，面对丰富的信息纬度且密度较大的情况下，如何帮助用户在短时间内决策成为了首要问题。
在运营活动当中，用户往往通过快速扫描来获取自己所需要的信息，而非像读小说或看视频一样沉浸其中，如果用户长时间的停留在页面当中且无法找到自己所需要的信息，只会增加用户厌烦的情绪，对产品而言则无法有效的提高认证转化以及各模块的点击率。
对此我们对整个页面进行交互信息梳理，提高信噪比、降低沉浸感，提高用户获取信息的效率，从而提高用户的决策效率。
2.为什么要快速响应业务
多数运营设计存在的痛点：时间紧任务重！
这取决于运营活动本身存在的时效性，为了赢得用户和争取市场，整个项目的必须快人一步；其次对于时间周期较长的项目，也会有根据市场进行一系列活动迭代。
面对像「海燕」这类大型需求的时候，往往存在多个需求需求方，例如产品、运营、品牌合作方等等，同时还要兼顾技术的开发成本，来保证项目本身小步快跑的状态。
设计落地
1.设定设计原则
为保证之后设计的顺利进行，我们首先设定了相应的“设计原则”来作为接下来的设计的准则。
综上所述，我们提到权益中心中信息存在纬度丰富、密度大的问题，以及运营活动需求的时效性和灵活性，我们制定了“简易性、统一性、易识别”三个主要的设计原则。
易识别
用户在没有获得准确的信息之前是无法作出决定的，为了保障用户能够获取准确的信息，在面对众多信息的情况下，如何区分信息等级成了首要问题，所以我们将“易识别”作为重要的设计原则之一。
统一性
利用“统一性”我们可统一设计样式，减少差异性，形成以业务为基础的设计单元，既能降低用户的识别负担，又能降低修改成本。
简易性
简易性除了考虑到用户识别和交互信息逻辑架构以外，作为设计师的我们还要考虑到落地实施的成本，这其中包括首次实施落地，还包括日后的维护、以及应对紧急需求时如何联合技术的同学保证项目的快速上线。
2.如何辅助提高用户决策效率
用户在参与运营活动时，具备极强的目的性，会通过“扫读”快速获取自己所需要的信息。为了提高用户的决策效率，我们必须提高用户的信息获取效率，所以我们从首屏屏效、信噪比、设计语言三个角度进行设计。
首屏屏效
权益中心肩负着对大学生用户认证转化的业务目的，认证入口按钮的点击率则称为重要的衡量指标，首屏的屏效成为了奠定认证入口的点击率的基础。
在有限的空间内，为保证不同的机型首屏的屏效，我们选用@2x的设计倍率作为基准，由视觉同学提炼主视觉卖点，将主视觉缩小至 16:9 的比例大小，将更多的空间用以展示“海燕权益”，用此类与用户切身相关的权益信息鼓励用户认证。
提高信噪比
用户在面对大量的信息时，往往无法迅速做出决策，很大一部分原因是：
页面的信噪比太低！
信噪比是指一个电子设备或者电子系统中信号与噪声的比例，在界面中我们可以理解为我们期待用户产生行为的视觉元素是信号，而其它干扰因素则视为噪音。
信噪比过低会导致整个页面 缺乏点或者出现细节元素过于突出干扰用户，干扰用户决策。
在设计过程当中我们根据不同的使用场景，以业务目标为导向控制信噪比的表现，例如在用户完成认证之后，业务目标期望用户能够更多的下滑浏览其他模块，相比认证前我们会主动降低信噪比，减少面性icon的使用，引导用户查看海燕权益等信息。
设计语言
为了辅助用户作出决策，我们必须帮助用户聚焦当前信息，用户获取信息的速度越快作出决策时间则越短，所以在设计语言我们选择了圆角卡片作为基础的设计语言。
卡片设计具备独立性，在信息纬度丰富的情况下，卡片可以独立承载内容而不必依赖于周围的环境，也就是说通过卡片承载的每个业务都是相对独立的。
其次在卡片的细节之处加入圆角，使得卡片更容易识别和内容更加聚焦，因为人眼睛上的中央凹（视网膜中视觉最敏锐的区域）在处理圆形时最快，其次圆角弧度具备内指性，更加凸显卡片上的内容。
3.如何快速响应业务
上文提到运营项目中活动会跟随市场或者业务战略方向随时做出调整，与此同时对于整个团队的快速响应能力有更高的需求，在设计层面为了更加快速的响应产品业务的需求以及降低降低技术的实施成本，我们在设计层面上牺牲个性，选用更具备统一性的组件化设计。
组件化思维
个性化设计势必会消耗更多的设计资源和开发资源，同时在每次迭代都需要二次消耗。在小步快跑快速迭代的情况下，个性化的设计可能无法快速满足需求快更迭诉求。
从整个页面的角度来看，我们通过卡片作为承载业务的容器，结合业务以此作为一个大的设计单元，这样做的好处在于保障了在之后的迭代当中，无论是业务删减或者增加，对于业务方或者技术都可以以此为单元做删减或者增加即可。
细节之处避免无意义的修饰图形和加强统一性。例如在标题设计时不添加任何修饰元素，只通过字重和字号大小来区分信息等级；同时在图形的使用也广泛的使用更加简单直白的几何图形，例如在专业有品质和承诺有保障都选用了同样的设计形式。
这样做不仅降低了用户识别成本，同时保障了在快速响应设计需求的时候能够快速修改内容，以一种更加统一形式来向用户展示页面信息。
广泛使用可配置内容
作为设计师我们有责任帮助需求方消化需求，并满足对方诉求，对于一些更新迭代频率高的业务模块，显然定制化的设计是无法满足的，例如运营 Banner 位、房源展示等等。对于此类需求，运营同学往往在意的是时效性和运营信息的准确传达。
通过与技术同学合作将该部分设计成可配置内容，极大的满足了运营同学对于活动内容更替的灵活性，同时减少了设计、技术成本。
总结
本次权益中心页面的设计核心目标围绕着辅助用户提高决策效率和快速响应业务为主，建立易识别、统一性、简易性的设计原则。
在设计落地是通过合理利用屏效、提高界面信噪比、选用圆角卡片作为基础的设计语言等措施提高用户的信息获取效率，从而间接的提高用户的决策效率。
通过组件化的设计思维和广泛使用可配置内容来快速响应业务的需求。
本篇文章来源于微信公众号: 自如ZDC
