首页

当我们在谈 SaaS 的时候,在谈什么?

资深UI设计者

当我们在谈 SaaS 的时候,在谈什么?

● 什么是 SaaS

● SaaS 产品的优缺点

● SaaS 产品的销售模式

● SaaS 产品指标

● SaaS 业务指标

● SaaS 收入计算



一、什么是 SaaS


这个模式让软件变得和水电气很相似,只需要每月缴纳固定的费用即可享受服务。

——马克·贝尼奥夫(salesforce 创始人)


Image title


订阅模式


SaaS(software as a service),软件即服务,是一种软件交付和销售方式——订阅许可模式。 

它基于云, 运行在远程服务器上,集中托管。因此不需要独立部署甚至物理分发来完成交付和使用,这意味着用户通过网络即可使用。

例如,过去你使用 office,需要买一张光盘或者在线下载,输入序列号(一次性付费),进行本地使用。如果要更新你需要重新购买和下载版本。而 SaaS 只需在线登录即可使用服务,无需安装和手动升级,并根据使用时间付费(按月/年)。



规模化和复利


SaaS 采取订阅付费(按月/年)模式,良好留存的情况下,当月/年的收入就是下个月/年的基础,不断累加下去(复合累积收益),形成良好的现金流。


也因此,SaaS 产品的收入具有了经常性、可预测性的特点。这使得,企业可以根据现金流进行规划,甚至通过融资,提前获取未来的收入,来进行产品的增长和扩张。


同时,对于订阅者而言,无需购买硬件和中间件(前期成本),以及实施、维护、更新、运维和管理成本(后期持续投入成本),只需要连接网络即可使用,致使决策和投入成本得到了大幅降低。同时,后期可根据业务的发展,升级套餐或增加数量,这些优势致使 SaaS 软件更容易拥有大量客户,形成规模。


从复利性角度,SaaS 产品的估值是经常性收入的若干倍。因此,SaaS 产品的改进,不仅仅是提高下个月的或者长期的收入,而是整个企业的市值,可谓“一本万利”。



开放和灵活


SaaS 会针对不同组织的诉求,提供多种套餐方案,通常在付钱前,用户可以进行免费试用,从而更好的判断是否满足自身需求。


同时,SaaS 会开放自己的接口(API),方便与其他软件集成,从而更好的满足客户业务。SaaS 厂商也会对接市场上跟产品业务相关的主流软件,从而提供更加完善的解决方案。


例如,你使用 53KF 云客服进行在线服务,同时打通 CRM 和订单系统,以及百度、腾讯、头条、360 等流量渠道,从而提供更好的客户支持和流量转化。



先进生产力


SaaS 产品的发展,是不断验证市场需求(PMF)、优胜劣汰的过程,其成功就代表着某种先进生产力(工具、流程或方法)。


从更大价值角度考虑,SaaS 卖的不仅仅只是工具,而是解决方案,融入到生产制造中去,协助客户获取成功。同时,对于厂商而言,也是更有价值、更有竞争力、更长久存在的经营方式。


从市场而言,SaaS 是一种众包模式,厂商觉得市场有大量的同类需求且长期存在,开发成产品进行运作。也真正有效的节省了同类诉求其社会资源的多次投入。


由于 SaaS 产品的有利可图,促使市场的激烈竞争,也锻造了厂商在其领域的专业化,提供更加有效的解决方案。



二、SaaS 产品的优缺点


优点/优势


● 易于访问。SaaS 通过网络提供服务,用户可随时访问,且数据储存在云端,实时同步。

● 免费试用。可以在付款前,进行免费试用,进行多家对比,选择最合适的。

● 费用便宜。使用订阅模式,价格取决于用户数量,订阅者无需一次性支付大量费用,降低前期购置成本。

● 支付灵活。按月/年进行支付,此外,订阅者可根据业务发展,增加或升级套餐,减少或降低套餐,甚至随时停止使用。

● 良好支持。服务的好坏决定了客户的订阅,所以 SaaS 厂商会提供更加友好、高质量的客户服务。

●  开放集成。开放的接口(API)可以与其他产品进行数据打通。

● 立即使用。无需安装和部署,有网络的地方即可使用。

● 无需维护。SaaS 统一运行在厂商的服务器上,由厂商统一维护、更新。



缺点/风险


● 数据安全。所有数据储存在云端和软件厂商的服务器上,可能会引发泄露等安全问题。SaaS 软件厂商,通常非常注重数据的安全性,因为数据泄露对于 SaaS 厂商的企业经营而言是致命打击。有些 SaaS 厂商也提供混合云服务,将敏感性数据储存在客户自己的服务器上。

● 网络连接。没有网络,将无法使用 SaaS 产品。同时,网速深刻影响 SaaS 产品的运行速度。

● 服务中断。软件厂商的硬件故障、网络攻击等造成的服务中断,会致使产品无法使用。



三、SaaS 产品的销售模式


通常来说,SaaS 的销售模式分为三种:

1、非接触(no-touch):自助服务

1、低接触(low-touch):交易型销售

2、高接触(high-touch):顾问式销售


Image title



非接触(no-touch):自助服务


理想的 SaaS 销售模式是客户自助完成整个服务,没有销售人员的介入。


这需要产品简单、价值明显、支付容易甚至售价便宜。同时,产品本身提供良好的支持(操作引导、使用说明、帮助中心以及反馈入口),从而允许客户自助完成服务。


非接触的 SaaS 产品,通过省去销售团队和支持性投入,采用低价,获取大量客户。同时,也因为价格便宜,无法支持销售和支持性团队的组建。


例如,某 SaaS 产品,10 月/月,一个销售人员的底薪 4000 元/月 + 五险一金和办公等费用,那么至少需要销售 600 个客户才能抵消成本,这是很难完成的。



低接触(low-touch):交易型销售


低接触的 SaaS 产品,通常采用免费试用的方式,进行获客。然后,销售人员通过在线咨询服务(53KF 云客服)或者电话进行销售转化。


同时,产品在 onboarding 上需要投入大量的资源,从而降低用户使用摩擦,使得用户能够成功的上手并获取价值。


低接触的 SaaS 产品通常采用按月订阅的模式,其满意度决定了持续收入。因此,低接触的 SaaS 产品的销售,需要同时兼任“客户成功”的职能,提供良好的客户支持,从而保证客户持续的获取产品价值而不断续费。



高接触(high-touch):顾问式销售


高接触的 SaaS,通常需要大量的人力投入,招标、拜访、出解决方案、商务谈判等等。


高接触的 SaaS 更多采用年度收费的模式。强销售决定了年收入的上限。因此,高接触的 SaaS 产品几乎是围绕销售团队的,市场营销的主要工作是为销售团队获得足够多且合格的销售线索;产品、开发更多的配合销售团队满足客户需求;客户成功团队接收后期服务、产品支持、关系维护以保证客户续费。


从我个人接触到的,低接触、高接触对于产品设计而言,在于主导权方面。


低接触会考虑更多的价值面(通用的最大化价值),从而会拒接没有未来(可能性和想象力)的单体诉求。


而高接触,更多来自客户传导给销售,销售传导给公司,公司传导给产品的业绩压力。所以,高接触一定是高单价,低单价的高接触在一定层面挣得是辛苦钱,无竞争力的劳动输出,而不是方案输出。



四、SaaS 产品指标(SaaS Product Metrics)


PMF(Product-market fit) 产品市场匹配


SaaS 产品的早期,更多的是验证产品与市场的匹配(Product-market fit,PMF),直白的说就是生产的产品是否具有市场价值,是否有人愿意花钱购买。


所以 PMF 是不断确认这三点的过程:

1、目标客户是谁

2、目标客户的需求(痛点、爽点、痒点)

3、提供的解决方案是否能挣到钱


Image title


PMF 通过早期付费客户来确定有利可图的细分市场。和他们不断交谈,收集反馈来迭代产品。

并根据付费客户特征,寻找客户共性,从而更紧密的围绕最佳客户打造产品、从而更明确的找到目标客户接触途径、从而更有效的设计市场营销宣传策略。



NPS(net promoter score) 净推荐值


通过 NPS 进行客户满意度调查,衡量客户体验,预测未来业务增长以及预防客户流失风险。


NPS 采用 10 分制,让客户进行打分。


Image title


打分者分类:

● 推荐者(dpromoter):9-10 分,对服务非常满意,愿意持续使用并向他人推荐,从而推动产品增长

● 中立者(passive):7-8 分,对服务满意,但忠诚度低不会主动对产品宣传,容易受竞争对手影响

● 贬低者(detractor):0-6 分,对服务不满意,会对产品进行负面评价和传播,从而阻碍产品增长


NPS=(推荐者数/总样本数)×100%-(贬损者数/总样本数)×100%


例如,有 100 客户打了分,结果如下:

● 10 分:15 人

● 9 分:20 人

● 8 分:20 人

● 7 分:20 人

● 6 分:10 人

● 5 分: 10 人

● 4 分:5 人


忽略打 7-8 分的人数,9-10 分人数 35,6 分及以下 25 人,NPS=35%-25%=+10%


如果 NPS 是负值,那么业务收入可能将会减少,因为客户在不断流失。正值的 NPS,表明客户满意度高,未来具有可持续增长的潜力。



五、SaaS 业务指标(SaaS Sales Metrics)


单位经济收益:CAC:LTV


SaaS 产品的成功与 PMF 高度匹配之外,还需要一个切实可行的商业模式,即客户价值(LTV)大于获取成本(CAC),健康的增长意味有效平衡两者,从而确定这是一个有利可图的市场。


CAC(Customer Acquisition Cost)

获得客户的平均成本。

CAC= 销售和营销费用之和 ÷ 新增客户数量


LTV(Customer Lifetime Value)

客户生命周期内(从注册到流失)平均总价值。

LTV=(ARPA*毛利率%)÷ 客户流失率


ROI(Return on investment)
客户获取的投资回报率。

ROI=LTV:CAC



Months to recover CAC

CAC 通过 MRR 收回的平均月份。

Months to recover CAC=CAC÷(ARPA*毛利率%)

ARPA:每个帐户的平均收入,你的 MRR 除以客户数量,即所有客户的平均 MRR

毛利率=[(营收-成本)÷ 营收]×100%


David 在《SaaS Metrics 2.0–衡量和改进重要内容的指南》一文中指出,LTV:CAC ≥3,Months to recover CAC ≤12 月,通常被认为是良好的 SaaS 项目。同时也指出,很多健康 SaaS 在初期可能并不符合,但会在一段时间内通过改善业务逐渐接近这两条准则。


Image title


Image title


经常性收入:MRR 和 ARR


经常性收入(Recurring Revenue)是未来持续可获得的收入,就 SaaS 而言,经常性收入来自客户的订阅,具有稳定、可预测、高度确定的特点。


在 SaaS 业务中通常采用按月或按年合同:

● 主要按月合同及少量的年度合同,采用 MRR(Month Recurring Revenue 月度经常性收入)。MRR 用于衡量每月订阅收入,如果有一些年度订阅,除以 12,再分摊到每月来计算 MRR

● 按年合同及少量的多年合同 ,采用 ARR(Annual Recurring Revenue 年度经常性收入)。多年合同除以合同年限,再分摊到每年来计算 ARR


在 MRR/ARR 统计中,并不会计算一次性的收入。例如,定制功能费用。


经常性收入会不断推动这 SaaS 厂商的发展,也是验证产品是否具有可持续增长的指标。



流失(Churn)


SaaS 是订阅模式,在高留存率下,随着时间的推移,意味着更多的客户、更多的订阅,持续收入不断复合累积。所以,流失率对 SaaS 厂商是非常重要的指标。


在 SaaS 中有两种计算流失的角度:

● 客户流失(Customer Churn),取消订阅的客户数量

● 收入流失(MRR/ARR Churn),取消订阅的收入损失


Image title


那为什么会有两种计算方式?


例如,53KF 云客服的业务,是按照坐席收费,50 元/月。假如我们有 200 个客户,100 个大客户(每个大客户拥有 100 个坐席),100 个小客户(每个小客户拥有 10 个坐席)。


当月,我们流失了 10 个客户,那么月客户流失率为 5%。


如果,流失的客户中,有 8 个是大客户,2 个是小客户,那么 MRR 流失 45000 元,MRR 流失率为 7.45%。


如果,流失的客户中,有 2 个是大客户,8 个是小客户,那么 MRR 流失 14000 元,MRR 流失率为 2.55%。


所以,通过不同的计算方式,使得我们更加全面、准确的了解到业务中所发生的事情。


Customer Churn Rate

客户流失率,客户取消订阅的比率。

Customer Churn Rate= 期间流失客户数 ÷ 期初客户数    


MRR Churn Rate

月度经常性收入流失率,通过降级、取消而损失的 MRR 比率

MRR Churn Rate= 期间流失 MRR ÷ 期初 MRR 


Net MRR/ARR Churn

净 MRR/ARR 流失。

Net MRR/ARR=期间新增 MRR/ARR 之和 - 期间流失和收缩 MRR/ARR 之和


Net MRR/ARR Churn Rate

净 MRR/ARR 流失率。

Net MRR/ARR Churn Rate=(期间流失和收缩 MRR/ARR 之和-期间新增 MRR/ARR 之和)÷ 期初 MRR/ARR


当收入增长超过流失的损失,在这种情况下,净 MRR/ARR 流失则为负值,称之为负流失(Negative Churn),表现在财务表上的就是收入的不断增长。


记住,在计算流失时,总是在特定的时间范围内,例如上月客户流失率是 5%。



六、SaaS 收入计算


确认收入(revenue recognition)


对于 SaaS 而言,确认收入是非常重要的财务知识,确认收入与合同金额、收款金额有很大的区别。


例如,按年收费的 SaaS 产品,年费 1200 元,那么:

● 合同金额是 1200 元

● 客户一次性支付年费,收款金额是 1200 元

● 在合同期间的每个月的确认收入则为 100 元。剩下的 1100 元则为递延收益

● 从企业资产负债表而言,剩下的 1100 元均为负债。因为服务还未完成,还需要投入 11 个月资源履行服务义务,甚至合同可能发生中止等情况,所以还不是确定的收入,需要通过后期的确认收入(损益表中的利润)来减少资产负债表上的负债

 

* 递延收益:指尚待确认的收入或收益。凡在期间内完成的服务所产生的收入,则为确认收入;反之,即使款项提前预收,但未在期间内完成服务,则不作为确认收入。


* 资产负债表:反映企业经营在一定时期内(月份、年度)财务状况(两个方面,一方资产、另一方负债和权益)的报表。


* 损益表:反映企业经营在一定时期内(月份、年度)利润(收入)或亏损(支出)的报表



总结


通过梳理总结,谈了谈 SaaS,这是在我当前知识体系范围内的总结,SaaS 是的庞大的体系,关乎个个层面:产品、营销、销售、客户成功、增长、定价、渠道等等。


如何通过体验设计赋能产品增长—阅读产品案例分享

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

如何通过体验设计赋能产品增长,我这里为大家提供2个方法。

方法1:提高产品的界面转化和活动效果

AARRR 模型对应着用户生命周期的 5 个阶段,检验产品能否有效增长。

案例1: 兴趣选择页优化

设计助力增长的一个有效途径: 提高界面的转化效率。

  • A. 提出问题:
    激活阶段用户流失较高,为什么用户在这个界面流失?
  • B. 背景说明:
    新用户在首次打开 App 时需要选择阅读兴趣,这样系统能够根据用户兴趣推荐一批内置书,从而提升书籍的阅读和付费转化。早期页面用户只需要选择男频、女频分类。后来增加了原创小说和出版书选项。
  • C. 受众分析:
    基于前期用户角色画像分析,进入这一界面的用户是新用户,存在一定比例的”小白用户“。这类用户对于这类产品熟悉程度不高,对于复杂界面的感知程度较弱。
  • D. 体验分析:
    1)文案不够精炼、直接
    2)用户不清楚如何操作(需要操作三步,中间过程状态复杂)
    3)与用户预期不相符(用户希望看到丰富的书籍,但打开之后看到的是男女的性别选项)
  • E. 设计优化:

    基于体验问题,进行了多步迭代,最终在权衡用户场景和结果选择了最为合适的版本(弹窗形式)。

 

 

1.2 案例:运营活动的设计

设计助力: 设计简单有效的运营活动,快速提升特定的数据指标。

运营活动设计目标:简单、有效

  1. 明确活动目标,一切从活动目标出发: 促活、拉新、充值、消费
  2. 第一时间抓住用户的注意力:
    参与策划过程,一起脑暴吸引用户的利益点
    设计中清晰展示活动的利益点
  3. 连贯流畅的行动指引,提高界面行动转化
    尽可能简单,让用户一看就懂
    小技巧:让不了解的人(同事)体验,解决他们在使用中的困惑

 

 

方法2: 为目标用户提供更多的核心价值

提升价值比提高转化更难,需要满足用户的功能需求、体验需求、内容需求、关系需求。

2.1 用研和设计敏捷配合

2.2 案例: 阅读书城改版 (用研内容见下半场分享笔记)

  • A. 改版目标:
    提高书城推荐页的整体CTR(点击率)
  • B. 需求分析:
    设计可以直接解决的问题:内容不够丰富,缺少吸引力;空间利用率低,排版松散
    设计无法直接解决的问题:推荐内容(用户想看到什么内容、哪些内容该重点推荐或弱化甚至舍弃);推荐形式(用户更容易接受哪种形式);是否还有优化空间
  • C. 设计优化:
    为了快速解决需求中发现的问题,设计和用研采用了新的合作方式,通过多轮用研设计的迭代,聚焦设计目标,实现改版目标。
    阶段一: 分析书城首页的点击数据
    > 用研输出: 点击热图分布,将用户操作行为数据可视化
    a. 点击分布热图结果:1)各模块的性价比一目了然;2)位置是影响点击的首要因素;3)数据集中现象: 超过一半点击集中在 Tag 区,将近90%点击集中在前两屏;
    b. 用户体验和商业目标契合度分析:1)Tag、本期最火、免费专区点击率最高;2)免费入口点击占 Tag 区的50%以上;
    c. 存在问题挖掘:1)免费内容侵占了其他内容的点击转化: 免费内容商业价值低,对于产品不利;2)楼层区域的整体点击偏低;
    d. 输出初期设计方案。
    阶段二:针对找书场景进行深入访谈
    > 用研输出:用户体验地图
    a. 梳理用户找书关键流程:有目的找书操作路径;无目的找书操作路径;
    b. 存在问题挖掘:分类复杂;在楼层中可找到的书目不多;缺少相关内容推荐;
    c. 输出优化方案。
    阶段三:对发现、分类、搜索的扩展研究
    > 基于前期探索中的设计疑点,通过用研结果进行新的迭代优化。
  • D. 改版效果验证

小结

通过设计赋能产品增长有两种方法:

  1. 提高产品的界面转化和活动效果:
    1)通过设计手段提高界面的转化效率,平衡当前场景和后续影响 (如:兴趣选择页优化,提高新用户激活)。
    2)设计简单有效的运营活动:明确活动目标、快速吸引用户注意力、流畅的行为转化。
  2. 为目标用户提供更多的核心价值:
    1)提高价值比提高转化更难,需要满足用户的功能需求、体验需求、内容需求、关系需求。
    2)最大的难点在于精准找到用户需求,这时候用研的同学介入就会带来很大的帮助,通过用研和设计的敏捷合作地实现设计目标。蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

设计师正在参与的战争——争抢用户注意力

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

早些时候,在medium上看到了政府UX设计师,Cyd Harrell所写的以”尊重用户“为主题的文章,里面提到了尊重用户的时间,尊重用户的能力以及尊重用户价值。


阅读后使我脑海中一个一直以来都若隐若现的想法逐渐露出一角,从那开始我渐渐关注用户、时间、掌控力、注意力这一组词语所组成的一个模糊的概念,这个概念的核心就是产品如何侵扰用户,过度商业化然后导致用户的信息超载情况。 

这个观点一开始还是很模糊,我并没有获得足够的信息支持我阐述清楚这个主题,直到后面,我看到NNG(尼尔森诺曼集团官网)的一篇关于”注意力经济“的文章,终于把这一系列元素组织好,产出了今天这篇文章。(本来以为理清这一个主题要很久)


首先我要提出一个词语,"wicked problems”。在我学习国外的设计思维课程时,在前面几个章节中有提到一个“wicked problems”即棘手的问题这样一个概念,也可以翻译为抗解问题。指的是极为复杂,严重,上升到社会层面及人类层面的问题。如环境污染,农民工问题,教育问题等。而设计思维被发明出来一个重要目的或者说任务就是用于解决一些这样的问题,用系统思维和创新性的视角来挖掘潜藏的核心问题,以及探索对应的最佳解决方案。 

我提到这一点不是要对比国内国外环境,也不是要赞美国外的设计氛围,而是想提醒大家,我们设计师可以做更多,可以想得更多,可以用设计思维,结合理性和创意去解决很多问题。我一直以来翻译一些国外的系统理论,设计方法论,也是想用自己的力量让大家了解更多设计的可能,除了眼前的屏幕,我们的视野应该放的更长更远,去思考我们解决的问题,以及我们所设计的方案可能会衍生的一系列问题。


我接下来要讲的,就是在当下环境下一个很关键的问题,用户注意力。 

一:用户的注意力


注意力成为人类的限制因素

大家回忆一下,每天清晨,都有哪些内容吸引你的注意力?了解时间、看一下微信未读消息、早报新闻等等等等。到了公司食堂,你看一下周围有多少人一边吃东西一遍盯着手机屏幕?在去工位的路上,又有多少人低头玩着手机走路?这还没完,到了工位上,打开电脑,接收邮件,查看工作事项;打开网站阅读一些学习内容;微信突然跳出来一个红点,打开网易云音乐挑选一首歌,选着选着看到群聊里一条新鲜轶事,然后腾讯新闻弹出来,忍不住又去点开阅读下。


没错,这是我的日常生活,我是一个选择恐惧症患者,但我却总是忍不住把自己置于一个同时处理超多个事项的情况下。读这篇文章的你也应该一样。我曾经很多次想,这种情况应该怪我自己吗?还是别的什么问题?


OK,这确实并不单纯是人的问题,还有产品、服务的问题。注意力是当下时代最为宝贵的资源,而产品一直在争抢的所谓的时间,也只是注意力的一部分而已。在信息大爆炸甚至工业革命之前,人类的大部分历史中,知识、信息都是很宝贵的资源,只有很少部分人能够阅读,能够获取一定的信息。但在信息大爆炸的今天,我们可以轻易获得大部分我们想了解的或不想了解的信息,只需要动动手指,只需要睁开眼睛。 

我们获得了巨量的信息,但我们的信息处理能力并没有产生什么变化,是的我们现在处理信息的总量,和几百年前的人类祖先并没有什么区别。因此,几百年后的今天,信息资源已经不是限制因素了,注意力才是,用有限的注意力,去获取无限的信息,结果显而易见。你在浏览文章的时候是没有办法看动漫的,当然你在作图时也无法浏览新闻。 

分心导致低效

到这里,大家应该都清楚,人类的注意力有限,我们无法同时做很多事情,然而很多时候,我们却在同时进行很多事情,因为一次性完成多个任务,对于我们有着很强的吸引力,然而结果往往是错误百出或者是更低的效率。 

在《简约至上,交互设计四策略》中专门提到了分心对用户的影响,有时候,分心不是用户自发的,而是来自产品的错误引导。产品界面中过多干扰元素,或者诱导元素导致用户经常性的转移注意力,这些东西让原本简单的任务变得异常复杂。比如阅读。


如果你经常在medium阅读文章,你会发现一类文章读起来效率很低,且经常容易令你分心乃至焦虑。那就是在文内插入各种链接的文章。每一个链接仿佛都在勾引你,快来看一下吧,这里有好东西,然后读者就打开了一个、两个乃至四五个网页,因此读一篇文章附送了五篇文章,那么读者需要把这些附加内容浏览完毕再重新开始阅读最初的那篇文章吗?当然有些人会凭借顽强的毅力(或者根本不感兴趣)跳过那些链接并阅读完整篇文章,那你很厉害,但是大部分人都做不到,尤其是设计师,因为我们对知识始终保持饥渴。

(写到这里微信突然弹出来几条消息,然后youtube推了一个视频,最后我又想起来长安十二时辰最后一集我并没有看,再次回来已经是十分钟后了,这还是我强忍住去看视频和电视剧的结果)


这些链接分明可以放在文章的结尾,感兴趣的人自然会去择优而读。除了文内链接,文章左右两侧的广告、弹窗以各种形式挑战你的注意力,瞥一眼你就会浪费几秒,没忍住点进去则会浪费更多时间,是的我是谁我在哪我在干什么?我只是想阅读一篇文章而已,所以为什么现在逛淘宝。


各种设备也在不断地使我们分心,不仅限于屏幕,还包括听觉触觉,如手机的语音提醒、震动。持续的打断甚至会使人们上瘾,可能下一个消息很重要,我必须看一下,于是你又拿起手机解锁然后打开微信,你看个锤子肯定又是腾讯新闻。不停的打断会影响我们的正常任务,可能是学习也可能是工作。最终我们可能需要花费更多的时间来完成计划事项,且完成的质量堪忧。 
PS:打游戏应该很少分心 

在现实中,人类不会这样互相打断,如果我们想要请求某人帮忙,会根据对方所处的场景状态来决定是否打断对方,也会考虑事件的紧急程度。如果事情很重要比如你的手机在网吧被偷了(重要),而你在玩游戏(没那么重要),那我们会选择打断对方。


而机器的问题在于,它不会以人的方式思考,我们设计师经常提到要以人为中心,但机器本身只会执行指令,企业的指令,因此不管信息是否重要,它会按照设定推送给你。事实上,社交应用及各种产品都应该区分信息的重要程度,而不是各种信息不分主次不分场景一股脑推送出来。


我们都知道福格模型B=MAT,想要促成结果需要对应的需求,更确切的说是场景+时机+需求。当我在公司门口,打开滴滴准备打车时自动弹出了家的地址,我只需要点击就能填写完毕而没必要重复输入,这是一个很流畅且体验良好的提醒。


而我这样一个轻度视频用户,偶然打开爱奇艺瞬间收到40多条内容推送,要不是因为开了会员我会当场卸载!!


分心也是拖延症的一个罪魁祸首,我们拖延的一个重要原因是注意力被其他事物所吸引,有可能是游戏,有可能是新闻资讯。大部分人都不能按照自己的最初计划完美及时的去完成。总是一拖再拖,可能并不是我们想拖延,而是有太多内容在吸引我们的注意力。凯利教授的《自控力》中就提到所有人想要拥有自控力,都需要知道我想要、我不想和我要做这三部分内容。以便抵制来自生活中的各种吸引力或者说诱惑。


二:注意力经济的崛起

1997年,Michael H. Goldhaber写道,“全球经济正在从物质经济转向基于人类注意力的经济”。许多服务都是免费提供的,而用户为服务需要花费的货币就是注意力。用户不用付费,只需要支付注意力。


产品争抢用户注意力

注意力经济的最初概念竟然从1997年就被提出,我看到时相当震惊,在二十多年前,企业就开始低效的使用用户注意力来变现,国内是什么时候开始的呢,答案应该是从争抢用户使用时长的竞争策略开始,占领用户时间就等于占领用户注意力。 

我们已经沉溺于争抢注意力策略这个泥沼中,从各种花费巨量时间的游戏如王者荣耀,到风靡至今的各类直播平台,再到时下流行的短视频,我们在不停的花费时间、时间、时间,注意力被无意识的“窃取”。用户不需要花费一分钱也可以正常娱乐,而你的参与,你的注意力的参与却在帮助企业不断挣钱。


如果你还不清楚自己是如何被争抢乃至窃取注意力的话,你可以回忆一下你每天接收到各种推送信息,除了各类应用的Push,还有短信、电话、邮件等等。推送提醒你关注的主播上线了,提醒你的内容新闻,提醒你一切可以诱惑你的信息。购房后销售人员信誓旦旦说不会泄露业主信息,交房前一年就有各种装修家居的短信和电话轰炸。淘宝购物没有一周就各种五星好评的消息请求。这则是另一种层面的窃取用户注意力了。


如果给你推送的是你想要的内容你是应该开心呢还是担忧呢。因为你有时也会想,关于你的信息是不是已经被泄露到处都是。当然并不都是恶意泄露,随着技术进步我们有了大数据技术,但精准推荐虽好,用户隐私是否也应该划入考虑范围?


畸形的注意力变现策略

我们在上面提到了大数据、智能推荐广告技术的负面影响,即侵犯用户隐私,随着用户对这一技术的感知越发明显,抱怨声会接踵而来,企业不得不考虑倾听用户的声音,将保护用户隐私纳入考虑范围,当然这应当是个可选项,那些有意识想要摆脱这种隐私暴露问题的用户,可以选择关闭这项技术在它个人生活中的应用,而并不介意隐私问题的用户可以继续享受智能推荐带来的便利。


我们虽然一再强调它导致的隐私问题,但事实上智能推荐利用现代技术实现了精准投放广告这一的广告变现形式,相比其余的商业模式要委婉的多。


广告的本意即广而告之,其目的在于将产品推荐给有需要的用户,广告本身是没有任何贬义的词汇,但在信息爆炸的当下,广告对于用户甚至对于广告投放者本身都变成了一个带有贬义的词,产生这种意识变化的原因就是当下广告的性质产生了畸变,广告已经不是一个双赢的推荐行为,而是一个过于干扰用户的打扰行为。


更多情况下,广告投放者倾向于用巨量的投放数量来换取一定比率的转化,这是一种传统低效的广告变现手段,当然平台获得实实在在的收益,建立在展示付费模式下的广告不用考虑最终转化率,只需要无脑投放,这导致了广告信息的总量产生了巨幅的提升。除此之外,更多广告是建立在吸引注意力这一诱导行为上,更鲜艳的颜色,夸张的动效,让人血脉喷张的文案,H内容擦边球,不论用户当前在执行什么任务,只要他不是瞎子都会或多或少被转移注意力乃至引导到广告详情页面。


除此之外,我们还会利用设计思维,预测用户行为,根据用户习惯主动将干扰性内容放置在用户的核心路径,从而产生一些误操作的假象,比如将关闭按钮做的微小,比如将banner无限接近按钮从而引发误操作。结果就是用户的任务中断,不得不重复的返回修正操作,这样持续性的犯错使用户困扰且失落,却不知道这是设计人员的策略。吸引用户注意力的变现策略大多建立在牺牲用户体验的基础上,我们都能意识到这不是一种可持续发展的收益模式,它容易侵害用户价值,培养低质量用户,且会衍生一系列其他问题。


目前这种盗窃用户注意力的变现性质主要有以下几个方式。

1.引人注目的动画吸引注意力 
2.拥挤不堪的界面设计,一次性显示大量信息,期望一定比率的内容可以吸引一定数3量的用户 
3.强迫用户聚焦的广告行为,如不可关闭的视频 
4.网站或应用频繁发送服务通知和广告通知期望用户重新参与进产品


三:注意力争夺的负面结果


低效的广告效率

还是那个简单的逻辑,用户的注意力有限,同时各种产品和服务的广告通知铺天盖地而来,且数量不断增加,不仅引用户反感,更造成广告传达效率低下的现状,无论是PC还是移动端,人口红利已经消耗殆尽,用户自身更是形成抗拒广告的习惯,这种情况下,继续延续传统的粗放型广告投放收益只会持续下降,不同的广告商盲目的放量,最终造成的结果是用户全部忽略。


用户事实上都比较懒,能不去做任何行动,就会一直保持原状。例如邮箱订阅了几十家内容,每天都会收到数十封推广邮件,用户或许并不会因为厌烦而点开每封邮件逐一退订,但他会直接忽略所有内容,不论如何,造成的结果就是广告低效乃至无效。与之相反,我们看一个正面例子,Youtube的广告模式。Youtube提供一个五秒的试看期限,超过五秒后用户可以选择继续看广告或者直接跳过去浏览心仪的内容。若是用户对广告感兴趣,那他可以接受广告并转化为对应的消费者,广告投放者和消费者是一个双赢的状态,这样不仅考虑了企业利益,更考虑了用户价值,尊重用户的选择,使内容可控。

再来看国内的视频平台,体贴的为大家提供了一个关闭声音的按钮,我不否认这也是一个提升体验的地方,因为大部分用户都对长达一分钟的广告并不感冒,因此经常性的操作是关闭声音,然后在这一分钟去做一些其他的事情。这种情况下,广告的作用并没有发挥,而广告投放者仍然要为之付出对应的费用,因为广告确实被展示了,只是用户没有看。从用户的视角,则是我对这则广告(对应的商品)并不感兴趣,但我不得不为之浪费一分钟。


当然这就是国内产品的现状,当其他人都在使用粗放的竞争手段,你就很难与其划分界限。且企业往往会考虑到品牌曝光等策略,考虑长远投入而不是眼下的转化,那就是另一种情况了。


广告盲现象

广告盲现象是由广告现状培养出来的用户习惯,指的是人们会自动忽略一些常用的广告投放位置的内容,自动忽略看起来像是广告的内容。这种现象很广泛和常见,比如百度搜索顶部的前几条,带有广告标签的搜索结果,用户一般并不会去点击,而是选择下拉浏览其他选项,另外在PC两侧的信息往往容易被忽略,因为这里也是广告经常投放的位置。


若手机同时出现三行以上的推送,用户往往不会仔细阅读而是直接清空。甚至连最吸引注意力的弹窗广告也能第一时间被识别并关掉,在弹窗还未加载完毕前。 
广告通常为了争抢用户注意力而被刻意做的不一样,但用户忍耐力比想象中更好,这个情况可以参考适应性偏见原则,且用户主动屏蔽信息也越来越成为习惯性行为,尤其是那些看起来花哨、内容丰富理应很吸引人的banner,正因如此吸引人,用户能快速分辨并将其定义为广告然后自动忽略,例如我们在线阅读小说是中间插入的banner,往往只会短暂打断我们的阅读进程。 
与medium的阅读体验不同,medium的文内链接更多的是吸引力,用户能意识到这些链接是更具吸引力的内容,且是正向的有益的(往往属于知识性质的优质内容),而我们在线阅读小说中插入的广告则会使用户形成误解——推销类广告,没有任何意义。因此用户会立即忽略。我们都了解一个词即耐受性,事实上用户往往比他自己了解的更加能够忍受一些东西。虽然从商业角度考虑,各种产品服务都在争抢用户注意力,从而不断的打断用户的工作、思考、学习,但人们已经逐渐掌握了一定窍门,来主动屏蔽一些无益的广告内容,乃至形成广告盲的行为习惯。 
针对这种情况了,设计人员和广告投放者应该怎么办呢?你可以选择加大投放数量,这种做法必然会很快见效,但不是长远之计,更佳的方案是考虑用户场景、习惯,通过洞察用户来提高广告投放的效率质量,智能推荐是一种做法,针对自家产品制定个性化方案也是一种方法,创意推动广告自传播也是一种手法,总之,传统买量放量的投放方式应该重新被考虑,如何双赢来回归用户价值是每个企业应该认真考虑的问题。 
我把企业围绕注意力经济不断争抢用户注意力的现象定义为一场战争,企业与企业,企业与用户都被编织在这张罗网中。在这场战争中用户是一个什么状态,我的回答是被掌控、被投入以及被摧毁。


四:被控制的用户


产品掌控用户而不是用户掌控产品

这个时代,人仿佛是手机的奴隶。新技术的发展往往会给一批人带来恐惧,因为它即意味着更高的效率,更方便的生活,也意味着过去的消逝甚至迷失。从工业化在到信息化,变化一直在发生,我们迎接新生事物的同时也迎接来一批同样数量的问题。


我们实际上并没有被手机掌控,而是被手机里的一系列产品所掌控。当然,你不会被微信阅读这样的产品掌控,大部分人都不会阅读成瘾。但与之对应的,社交成瘾、游戏成瘾、八卦成瘾等现象却屡见不鲜。我们生活在大文娱时代,来自各方面的欲望、诱惑在不断地吸引注意力,不断的打断正常的任务目标。我们内心深处想要学习练习,想要更好的成绩,想要更好的工作,但这些从社会价值和个人价值角度更加正向的目标却往往被各种娱乐向产品打断,且往往过度沉溺,因为很少有产品会提醒你已经花了多少时间,他们只想占领你所有的注意力,然后把注意力货币转化为自己的收益。


“惯性”导致的持续投入 
关于用户持续投入进一个产品,而忽略时间、精力的现象,在当下已经是常态。我们都知道沉没成本和鸡蛋理论。但我认为这两个概念还不够,因此我引入了一个惯性的概念,同滚雪球效应异曲同工。持续投入产生惯性,最终导致难以逃离,与之对应的用户行为就是频繁的卸载又安装游戏,以及成瘾性的过度使用某个产品,好吧说到这大家都能猜到是什么游戏什么产品。事实上我没有针对性,而是讲的一个更普遍的现象。 
惯性投入导致的沉迷产品我们如何定义的,为何强调沉迷现象?因为沉迷造成的结果是用户时间和精力的消耗,从社会价值考虑过度娱乐而消耗时间是不被认可的行为。设计师经常考虑体验层,考虑商业价值,但的确很少考虑到用户价值,及与之对应的社会价值的实现。这里面一个重要因素就是时间,我之前分享的《用户体验设计基础》中提到的一套交互设计理论中,就把时间纳入考虑范围,事实上这是贯穿用户使用流程中的一个关键因素,但我们的确很少考虑到,不仅仅是完成任务的时间,更有使用产品的总时长,及会衍生的一系列问题。 
我们也曾体验过一些尊重用户时间的产品,如阅读超过2个小时会提醒用户进行休息,同时在沉浸式体验的界面设计中仍然保留时间的展示。 
所以现在,体验已经不仅限于交互、任务完成率、可用性易用性这些基础内容,体验还涉及到用户价值,尊重用户,你更可能会获得用户的尊重。 
越来越多的自控力挑战
自控力挑战来自两方面,一方面是用户自身,即用户自我控制能力,另一方面则来源于挑战,即海量的信息对注意力的争抢乃至盗窃。当然这些挑战不局限于好坏某个方面。因为我们既可能被游戏等娱乐项目吸引,也有可能被学习内容吸引,更有可能被同时完成多个任务的期望所吸引。 
个人的自我控制能力是天生的,但可以通过后期锻炼来进一步提升。问题在于生活中的诱惑,吸引力的来源变多了,用户沉迷于各种产品真的应当归咎于用户自身吗?这个问题就像是美国核事故操作失误应该完全归咎于操作人员一样可笑,毕竟控制开关的设计本身存在更多问题。外在信息的干扰的确在成倍的增加,网络小说、游戏、短视频不断增加的自控力挑战都是罪魁祸首。你期望七八岁的小孩子能有多强大的自控力呢?同理,青年群体就应该有很强大的自控力吗?(成年人很多都没有如此强大的自控力可以面对社会上的各种吸引力)。 
我们还经常陷入低效学习怪圈,以一个过于分心的状态去学习知识。比如同时收藏了UX体验书籍课程、插画设计课程、动效设计、C4D等等在学习UX时忍不住想到插画,学习插画时又想到C4D,无法掌握自控力的结果就是分心产生同时完成多个任务的欲望,最终结果就是注意分散导致的低效率学习,投入与产出完全不成正比。


五:设计师如何参与到这场战争

事实上我们已经参与到了这场战争中,当作为设计支持人员为商业目标而进行设计时,我们已经在争抢用户注意力。虽然存在用户注意力被过度经济化的问题,但这是行业现状,也不是个人能够解决的,它已经上升到wicked problem的层面。那么作为企业一份子的我们必然需要了解如何争抢用户注意力,这和企业盈利挂钩。这也是目前大部分设计师都正在做的事情。另一方面我们应该利用设计思维探索其他可能,即“戒瘾”的可能性。兼顾商业价值和体验,最终在保证收益的情况下避免过度争抢用户注意力。


打造上瘾产品
提到打造成瘾的产品,最为人熟知的就是上瘾模型,触发——行动——多变的酬劳——投入。不同于工具类产品,成瘾产品大部分发生在killtime的产品类型中。如游戏、短视频、直播、新社交产品等。上瘾模式最早来源于游戏设计,后来逐渐被应用于其他产品设计中。简单来说,设计师需要了解几个核心元素,动机、行为、触点,洞察用户需求与动机,创造对应的触发器,然后使用户按照预期的方案进行交互,最终将商业目标转化为用户行为。常见的用法如游戏中的排行榜,利用攀比心理引导用户付费。再如积分商城,利用持续的投入减少用户流失的比例,从而创造更多变现机会。


打造上瘾产品关键点在于对用户心理的把握,这需要一定的敏感度,以及对应的心理学知识如沉没成本、金发姑娘效应等。同时也需要对应的方法来帮助梳理可能的痛点机会点。较常用的是用户体验地图,我们通常用它来发掘体验向的问题,但事实上作为梳理用户体验流程和对应情绪节点的方法可以适用很多场景,比如上瘾点的挖掘。


关于用户体验地图(也叫用户旅程图)可以查阅梓暄的这篇文章https://mp.weixin.qq.com/s/SgQUbAhtjadrUqQS9SMI-A。 
我接下来提供另一个方法用来梳理用户与各种设计元素的关系。这是一种帮助我们系统思考的方法,具体分为五个步骤。


1.将信息分解为节点(信息块 如对象、概念)和链接(节点之间的链接和关系)


2.可视化信息(草绘或将它们摆在现实中,黑板上桌子上等等)
帮助了理解信息及关系。


3.与他人协作,包括利益相关者。分享你的思维模式可以帮助其他人在你的想法上继续思考,反之亦然。创建物理图和分组注释以生成不同的系统模型,允许团队综合多个观点。


4.快速发布解决方案以持续收集反馈,反馈有助于解决我们没有找到正确答案的问题,收集的反馈越多,下一步中有效指导信息就越多。


5.迭代,每次迭代都能利用反馈来解决一些新的问题,从而最终解决整个棘手的问题。 

能打造出一款真正让用户上瘾的产品固然很重要,但像我强调过好多遍的那样,我们应当考虑用户价值,考虑衍生问题。如果一定要争抢用户注意力,也请遵循一个总的设计原则,即下面要提到的总的设计价值,由Cyd Harrell提出,且Cyd Harrell一直致力于此。


总的设计价值

我们所服务的互联网企业不断争抢用户注意力,都期望用户停留更多时间为企业创造更多价值,但却忽略了尊重用户的时间、尊严、和能力。——Cyd Harrell 
这是我很赞同的一个总的设计原则,即尊重用户的时间尊严和能力。如果问你,有没有一个全世界通用的大家都认可的设计价值? 我想那就是尊重用户。 
很多时候,我们设计师都无意识的参与到了争抢用户注意力的战争中,从近些年的设计主题由视觉到体验再到商业,我们可以看出其实设计师仍然处于纯粹的为企业服务的状态,互联网设计围绕着企业机器运转,忽略用户价值,忽略用户注意力承载度,最终导致了广告盲及各种成瘾现象。从社会价值角度讲,用户应该把更多时间投入到工作学习与生活中,而不是在无意义的各种推广和猎奇信息中沉溺迷失。 
借用Cyd Harrell的话,如果不能够让一些企业采取这样的价值观,并将它们运用在产品中,仅在我们设计领域传播这种价值观是没有任何意义的。但相信有很多体验设计领域的设计师都在努力帮助企业做出正确的选择,去尊重用户价值。很高兴的是从王者荣耀的防沉迷策略,到抖音的青年保护计划,我们能看到一些企业对于这些产品衍生问题进行方案探索。 

无论是沉迷问题,还是低效率问题都是以用户注意力为核心的一个wicked problem,它没有清晰的解决方案,且会持续很久,我们无法知道哪种解决方案是最终方案,只有更好的方案和差一些的方案,这也是wicked problem的 一大特性。读到这文章也要结束了,我无法提供一个注意力问题的解决方案,因为它涵盖的领域,相关的利益者实在太庞杂,不是简单的处理某个节点的问题就能够解决的。写这篇文章的目的更多的是让大家了解到我们目前介入及面临的一个现实存在的问题——注意力问题。同时希望大家能开始意识到尊重用户这一设计原则的重要性,尊重用户,尊重用户的时间和尊严,这句话对我感触很大,希望也能触发你对于设计的另一种认识.


最后,我们可能不知道答案是什么,但我们知道我们必须不停的探索。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

21条超好用的创意技巧

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

大家可能听过很多关于想创意要靠灵感的说法,而在设计师的日常工作中并不是这样的,至少绝大多数的时候不是。你想想,灵感这个东西是不可控的,快的时候可能几分钟就有了,慢的时候可能得等上一两个月,如果随便一个创意都要靠灵感,那我们的效率得有多低啊。

所以,那些说有灵感才创作、没灵感就去游山玩水的大师,他们通常指的是大创意,而且他们肯定有比较多的创作时间。而对于日常的设计、创意工作,我们绝不能靠灵感出创意,靠什么呢?当然是靠方法。葱爷特意帮大家总结了 21 种商业广告设计想创意的方法,希望可以帮你们提高想创意的效率。

比喻

比喻在广告设计中一般的用法是,把产品或者能代表产品的元素比喻成具有某项功能的事物,这一手法成立的条件是两个元素在外形上要有一定的相似性。

△ 把产品(鸡块)比喻成代表热辣的火焰

△ 把布匹比喻成红酒

借代

借用某元素替代另一元素,或者借局部替代整体。

△ 用涂了口红的嘴唇代替女人

△ 用一只绿色的手代表绿巨人

拟人

即把产品或能代表产品的元素拟人化,拟人手法通常还具备幽默效果,其表现形式主要为以下两种。

1. 外表拟人

即给事物添加人的特征,如五官或动作。

2. 文案拟人

这一做法并不需要改变事物的外表,而是在文案上赋予人的特征,比如用形容人的话语形容某事物,或者让它说话等等。

双重曝光

即模拟摄影中的双重曝光效果,最常见的用法是在人或物的基础上叠加与其相关的场景,具有一定的艺术效果和视觉冲力。

△ 通过双重曝光的手法把大象与汽车巧妙结合起来。

发散

即把产品置于中央,往四周发散与其相关的元素,用来表现具有的功能,或包含的服务。

把与产品或主题相关的元素放在一个平台上

这种做法可以使视觉主体更集中,同时能增强画面的形式感和视觉冲击力。

把产品或与产品相关的事物做成平台

比如手机、银行卡、书本、手掌等都很适合做成摆放元素的平台,可以用于表达该元素上具有什么产品或服务等等。

把主题转化成一个画面感很强的概念

比如可以把包含了宽带、手机流量的全家共享套餐,包装成一个全家桶的概念。

再比如我们可以把一些主题活动包装成 XX 星球,代表一个新的世界。

△ 《奇葩说》的奇葩星球

异质同构

即用两个或两个以上结构相近,但质地不同的元素组合成一个新的整体,这种效果既统一又有对比。

用与产品或品牌相关的元素组成某个关键字

用产品及相关元素组成某一符号

同样,这个符号必须是跟主题相关的,而且该符号不宜太复杂。

置换

把正常事物或场景中的某个元素替换成其他元素,用来说明该元素也具有原事物的效果或特征。

△ 用快递员置换炮弹,来说明送货快的特点。

△ 用饮料包装置换树枝上的水果,以说明该饮料原汁原味。

把大场景从整体中抽离出来

比如说海洋、草地、房间,这些元素的边界感不明显,现实中不会以一个独立的状态出现,但我们可以给它制作一个边界,使其从整体中独立出来。

把符号场景化

比如把 Logo 图形,或者是能代表产品功能、传播主题的图形符号,打造成一个由相关元素组成的场景。

引用经典

西游、三国等典故,超级玛丽、俄罗斯方块等游戏经常被引用到广告创意中,可以有效增加消费者对广告的注意力。

把文字或符号当成实物融入场景

如果广告的核心诉求是某个数字,或者是符号,那么也可以把它当成核心元素融入到场景中,然后围绕它来添加相关元素。

夸张

如把功效夸大、把事物的大小比例夸大等等,或者改变事物原本的比例。

把能代表产品的元素与主题结合

这是很直接的一种广告设计形式,把常规的图加文结合为一个整体,可以增加图文的关联度,降低传播成本。

正负图形

正负图形除了在 Logo 设计中很常见之外,也是海报设计和广告设计的常用形式,正负图形一般比较简洁、创意巧妙,具有很强的视觉冲击力。

△ 可口可乐的海报很喜欢用这种手法

把产品场景化

在产品中添加场景,将其功能或特点视觉化。

混合

为了满足需求,很多广告设计中都融合了两种或者两种以上的创意手法。

△ 上图为置换加比喻

△ 上图为符号场景化和把文字融入场景

△ 上图为夸张加元素抽离

凡事都有方法和技巧,即使是艺术和创意这种看似不可控的事物。方法和技巧虽然不能保证带给你一个 big idea,但他能为你提供清晰的思路、提高你的效率,并能将你的创意水准维持在一条基线之上,希望这篇文章能够对你有所帮助。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

WEB端控件规范——导航类

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

标题文字如何处理更吸引人?

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们常说:设计就是在向用户传递信息,在设计的日常工作中,传递信息的方式大多都是图文相结合的形式,而文字作为信息传递中最直观的表现形式,对于整体而言是至关重要的一环。很多设计师一味强调追求图具有吸引力,而忽略了文字的重要性,最终导致图文无法结合、虎头蛇尾。说到文案吸引力,最佳的表现位置就是标题字,所以本期就和大家一起分析、总结一些比较实用的标题文字的处理方式,提升对读者的吸引力。

切割文字笔画

在文字排版中,想要提升标题文字的吸引力,就要与其他非标题性文字形成视觉上的反差、对比,进而让标题文字在整体排版中更加吸引用户眼球。这里说的第一个比较实用的处理手法就是切割文字笔画,即:以标题文字的笔画为切入点,在不影响其辨识度的前提下,通过一些特殊的处理手法,提升视觉比重。

切割文字笔画也可以理解为将文字的笔画分离字体的本身,然后再以文字笔画为切入点,进行处理,常用的笔画处理方式:变色、模糊、删除、阴影,下面我们逐一来看。

1. 分离笔画 – 变色处理

顾名思义就是有意将分离的字体笔画进行变色处理,提升标题文字本身字体上的变化强度,从而提升标题对于用户的吸引力。举例说明:

上图中,这两种标题形式在设计工作中都是可取的,只是对比而言,案例 1 给人的感觉更加平缓,属于比较常见、中规中矩。而案例 2 则更加新颖,在视觉上变化更强烈(主要体现在文字笔画与笔画之间),更加吸引用户眼球,也起到了提升作品设计感的作用。

2. 分离笔画 – 模糊处理

同样的理解方式,就是将分离的字体笔画进行模糊化处理,目的是通过笔画与笔画之间的虚实对比,营造出视觉上的前后关系,从而提升标题文字在整体文案中的视觉注意力。

上图案例中通过对比我们发现:案例 4 相较于案例 3 更吸引人,原因在于其笔画之间的虚实结合使得字体本身就形成了一定的反差感,形式上的多变造就了文字更吸引人,同时如果感觉文字笔画之间的变化强度不够,可以结合变色+模糊的处理形式,比如:

这样给人的感觉就更加强烈、也更诱人,但是这种笔画之间的变化多了,也就意味着掌握的难度提升了,一定要避免过多的效果导致出现凌乱的现象。

3. 分离笔画 – 阴影处理

可以理解为将文字笔画分开来看,通过添加阴影的方式,营造视觉上笔画的前后关系,从而增强其整体的视觉变化,举例说明:

上图中,案例 8 就是通过给文字笔画添加阴影的形式,使得笔画与笔画之间在视觉上形成了很明显的前后遮挡关系,将原本平面的文字变得更立体,也更易于吸引用户眼球。这种处理手法在平时工作中也很实用,只需要理清楚笔画的前后逻辑关系,通过画笔涂抹的方式慢慢调整即可。

4. 分离笔画 – 删除处理

删除笔画的处理形式相对来说在工作中运用较少,因为一旦处理不恰当,很容易影响字体本身的辨识度,适得其反,举例说明:

如上图所示,删除了一些笔画,给用户留下一些想象的空间,也是比较新颖的处理方式,比较适合一些平面海报标题的设计。

这种删除字体笔画的处理形式虽然很新颖,但是应用的局限性较大,属于比较难把控的一种。

注意:将文字笔画单独拆分出来进行处理的手法,一定不要过于追求变化强烈,否则很容易导致标题文字非但没有起到吸引用户的作用,反而最基本的辨识度都会被破坏,一定要把握好度。

添加辅助元素

在日常工作中,通过给标题文字添加辅助元素,从而突出标题的处理手法是非常实用的,这里所说的辅助元素可以分为很多种,比如:图形、肌理、光效等等,目的都是借助辅助元素与标题文字的相互结合,让文案标题的视觉形象更鲜明、更吸引用户。

添加图形是属于比较直观且应用广泛的一种处理方式,而这里的图形一般情况下会和标题文字在属性上有所反差,这样有利于最终效果的呈现更加明显,举例说明:

如上图所示,标题文字通过添加下划线、边框、形状等等辅助图形元素,较常规标题而言,其视觉变化更加强烈,整体丰富度提升了很多。但是这种辅助元素不能添加太多,否则很容易出现乱的现象,要让这些添加的元素与标题形成相辅相成的关系。

上图的设计案例,通过对比我们发现,右侧案例视觉更丰富,且标题文字添加下划线后,其在画面整体的视觉形象更加鲜明、更吸引用户眼球。

增强文字环境感

现实生活中一个物品如果置身于某一个环境内,它自身就会受到周围环境的影响,而如果我们假定环境,将标题文字看做物品,那么我们就可以给予标题文字在环境中的光影,比如:投影、倒影、发光、环境色等等,这样就间接地增强了标题文字的视觉变化,从而起到吸引用户眼球的作用。

如上图所示,把文字当做处于环境中的物体,通过投影、倒影、阴影的方式体现其环境,在视觉上有了更深的层次变化,也能起到强调、加深印象的作用。这种营造环境感的处理形式在平时工作中也很实用。

再说下发光的处理手法,这种形式大多用在暗色调的画面中,将文字看做一个发光体,即受周围环境的影响又影响着周围环境,举例说明:

上图中虽然说左右两种表现形式文字都比较清晰、明了,但是就视觉感受而言,右侧将文字作为发光体与周围环境相辅相成、融为一体的处理形式更容易吸引用户眼球,而且更加新颖、有创意。这种表现形式在一些电商海报中也很常见,比如:

发光的效果给人的感受很舒服,打破了常规的单纯平面编排文字的现象,将文字场景化,使其更诱人。

补充

还有一些在平时工作比较实用的,只不过或多或少在之前文章中都有提过,这里以补充说明的形式展开。

1. 标题文字 – 关键词变色

说到关键词变色算是比较常用的一种,就是将原本标题文字中一些关键词进行变色处理,目的是增加标题文字的视觉变化强度。

通过将案例中「免息」一词变色处理,使得标题在视觉感受上更加明显、有吸引力,而且给人的感觉也很舒服,这种处理手法是非常实用的,不妨多试试。

2. 标题文字 – 描边

描边文字在平时工作中用到的相对少一些,这种处理手法也间接地起到了打破常规的作用,当我们一直按照某一些常规形式工作时,偶尔做一些改变也许会得到意想不到的效果。

3. 标题文字 – 与主体遮挡

文字与主体营造遮挡关系也是在日常工作中很实用的一种,就是将主体与文字相互穿插排放,通过必要位置的阴影进行加深体现。虽然元素并不多,但是最终呈现的视觉效果却很舒服、有吸引力。

这种主体与标题穿插表现的形式使得两者更加整体,对于画面而言,主体和标题都起到了很好的强调作用。

总结

文章中提到了一些比较实用的提升标题文字吸引力的处理手法,但是需要注意不能过于追求效果而忽略了设计的本质,要根据需求选择恰当的方式,不管何种形式,都要保证文字本身的识别性。文章中提到的并非全部,主要还是为大家提供一个可以参考的方向,要学会举一反三、大胆尝试。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

如何更好的使用弹窗?

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

弹窗在设计中运用的非常广泛,基本上每个应用都会涉及到。恰好这段时间我也在整理公司设计组件这一块,所以就想总结分享一下。

设计师都会使用弹窗,但对于弹窗背后的分类及运用可能还不是特别了解,在写这篇文章之前,我查看了很多应用及资料,所以下面会有大量的案例,相信大家看完可以对弹窗的认识更明确,做设计规范的时候也能有自己的想法。


现在的弹窗分为两种,一种是模态弹窗(重提示),一种是非模态弹窗(轻提示)。

常见的模态弹窗:Dialog/Alert、Actionbar、Popover/Popup

常见的非模态弹窗:Toast/Hud、Tips、Snackbar

Image title

一、模态弹窗


Dialog/Alert  对话框

对话框是我们常用的弹窗,安卓开发语言是Dialog,iOS开发语言Alert,它通常出现在页面的中间,对话框/警示框的类别非常多,对用户的干扰比较大。前面之所以说模态弹窗是一种重提示,是因为它需要用户主动触发选择才可以继续当前的操作。


① 信息-选择确定

特点:这类弹窗通常是一些系统功能的授权、版本更新、消息通知、重要提示等,通常只有1~3个主按钮,只需要用户进行简单的选择。


下图举例分析:

iOS询问是否删除APP,就属于重要提示弹窗,它一般会用在像删除、确认提交...一些比较重要的功能操作中。

小红书的这个是否允许使用网络弹窗,大家一定在许多APP中都见过,这属于一个系统自带的授权弹窗。

马蜂窝与天猫的消息提醒弹窗,一个属于初次使用APP时,系统自带的弹窗,一个属于使用后期APP为了推送消息,主动提示你开启消息通知。

有钱花和爱奇艺的版本升级弹窗,都属于偏运营类的弹窗,这一类的弹窗通常会弱化暂不升级的按钮,突出升级主按钮。

Image title

Image title

Image title


② 信息-输入勾选

特点:这类弹窗通常是输入一些比较少的信息或者勾选信息,常用于备注输入、规格选择、分组选择等,通常只有确定和取消两个按钮。


下图举例分析:

微博对于已关注人的分组及备注,都属于信息输入及勾选类弹窗,操作通常都比较简单。

Image title


③ 信息-传达展示

特点:这类弹窗通常是一些广告、红包优惠、节日活动等一些运营类弹窗,主要是吸引用户点击及参加活动,这类运营弹窗通常会设计的比较吸引人,造型各异,会突出领取、查看等大按钮,弱化关闭按钮。


下图举例分析:

拼多多和饿了么这类的红包优惠弹窗,就不多说了,大家都懂,它们最主要的目的就是吸引用户点击,提升购买率。

美团的变黄送好礼弹窗,属于一次比较大的品牌升级,它主要目的是让用户更好的了解并接受品牌色升级。整体的元素及动效设计都非常清晰,视觉感很强。

支付宝的这个猜世界杯赢蚂蚁积分的弹窗,属于活动弹窗,它的整体设计非常贴合主题。

Image title

Image title


Actionbar操作栏

Actionbar主要分为Action Views和Action Sheets。它们通常是由底部弹出,它的操作及信息会比对话框类型的弹窗更多更复杂。这种当前页面的下拉弹窗好处就是,可以让用户清楚的感知当前的操作,比跳转到新页面更加有安全感。还有一个特殊的抽屉式弹窗也顺便说一下。


① Action Views操作视图

特点:这类视图弹窗通常占屏比较多,以文字、图标等形式展示各种功能,也可以说这类的弹窗是一个小型的页面。它一般从底部弹出,不太强调归属,大多出现在购买、支付、分享等场景。


下图举例分析:

百度云盘的这个+号扩展弹窗比较特殊,它也可以说是浮层,占满整个屏幕,它最吸引人的还是它的小动效。

京东购买时的弹窗和支付宝付款时的弹窗,都是比较典型的,在各种电商产品及付款页面用的非常多。

转转这个的键盘与输入为一体的弹窗,设计的非常人性化,让用户一次就可以输入多个价格。大大提高了用户的操作效率。

网易云音乐的分享弹窗就是典型的以文字与图标来展示功能的。

微信读书的底部阅读设置弹窗,比较特殊,为了使用户沉浸阅读,它是比较隐藏的,而且非常轻量化。

Image title

Image title

Image title


② Action Sheets 操作列表

特点:操作列表相对于操作视图,它更单一。主要是以文字展示功能按钮,重要敏感的功能操作一般会用主题颜色或红色显示,主要运用在一些日常控件、功能选择、删除、保存等场景。


下图举例分析:

Keep的选择日期,属于iOS原生控件,非常常见。

淘宝的选择地址弹窗,整个展示的非常清晰全面,而且用户每选择一项,就会有相应的显示。

支付宝和天猫超市的两种列表弹窗,就不多说了,简单的功能选择都会采用这种。

Image title

Image title


③ 抽屉式弹窗

特点:这种抽屉式弹窗一般从左右两边弹出,经常运用在一些导航扩展和目录展示中,它能承载比较多的信息,基本上都是用来放一些不太常用的功能。


下图举例分析:

微信读书及一些其他阅读类产品,由于目录很长,而且一般是从上到下浏览的,所以基本都采用了这种抽屉式弹窗。

小红书的这个抽屉式弹窗,以图标和文字的形式展示了一些不是很常用的功能,为我的页面节约了不少空间。

Image title


Popover/Popup 浮层

Popover是ios的开发语言,popup是安卓的开发语言,浮层是指,用户点击某个功能后浮出一个临时气泡对其作出补充,它通常会伴随着半透明的遮罩或者投影衬底,用户需要点击功能区域操作,或者点击空白处取消,才能进入下一步操作。它与上面操作栏的最大区别就在于,它更强调归属,可以出现在页面的任何地方,而操作栏一般只出现在底部,不强调归属。


① 指向浮层

特点:这类的浮层一般伴随有小三角指向,强调归属。气泡里面的功能通常以单一的文字或文字与图标结合的形式来展示,主要运用在顶部加号补充、复制、分享转发等场景。


下图举例分析:

支付宝和美团的顶部加号补充浮层,展示形式是差不多的,只是UI样式不一样,一个是白色气泡黑色半透明遮罩,一个是深灰色气泡。

微信读书和微信的选择文字气泡,在文字复制中很常见,通常会与其他转发收藏小功能一起出现。

Image title

Image title


② 导航筛选浮层

特点:所谓导航筛选,自然是与导航分不开的,再加上浮层是比较强调归属的,所以它通常会与导航连在一起,一般出现在顶部。


下图举例分析:

美团的导航筛选,因为选项及开关很多,所以它的底部会有两个主按钮,一个完成,一个重置。

饿了么的这个只有一个功能选项,所以它一般是直接选择就收起浮层了。

Image title


③ 引导浮层

特点:引导浮层的作用就是引导用户更好的使用产品及交互,降低用户的学习成本。它通常会出现在用户首次进入APP的时候,一般只会出现一次,点击空白位置或我知道了浮层就会消失。


下图举例分析:

QQ音乐与微医的引导浮层都是用户首次进入应用时,给出的功能搬家提醒浮层。

Image title



二、非模态弹窗


Toast/Hud 提示框

Hud是ios的控件名词,Toast是安卓的控件名词,它们都属于一种轻提示,给予用户及时反馈,让用户知道自己当前所处的状态。

Hud一般只出现在屏幕的中央,以毛玻璃的样式表现,内容展示比较富丰富。

Toast可以出现在屏幕任意位置,通常以黑色半透明的小框来表现,内容一般是纯文字提示或者文字与图标结合提示。


① 状态提示

特点:状态提示的Toast,它们一般都是反馈用户当前操作的状态,只出现1到2秒就会自动消失,场景一般是关注成功、密码错误、音量提示、静音、清除缓存等。


下图举例分析:

移动的属于操作遇阻提示。

京东的属于操作成功反馈。

iOS的音量控制属于毛玻璃Hud。

微信的清除缓存属于正在操作状态。

Image title

Image title


② 按键提示

特点:按键Toast提示与状态提示不同,它们一般自动出现或者点击触发才会出现,用于对功能点的补充说明,让用户对功能有更深的了解。


下图举例分析:

蚂蚁森林里点击树木就会出现相关信息,当然它也会自动出现,点击其他区域也会自动消失。 

知乎的消息标签不仅有小红点提示,还会在上方自动出现数字提示。

Image title


Snackbar

Snackbar是Android中的一个控件。它一般会在超时自动关闭或者在屏幕上滑动关闭,它没有Toast那么轻量,设置出现的时间会比Toast长,而且可以点击按钮进行交互。


下图举例分析:

UC浏览器的Snackbar,是在提示用户上滑,来查看更多内容,它需要滑动或者超时才能关闭。

京东的Snackbar,是在为用户推荐商品,提示用户点击箭头来查看喜欢的商品,它比UC浏览器多了一个关闭的按钮。

Image title


Tips提示

Tips与Snackbar最主要的区别就是:Tips它是内嵌在页面上的,而Snackbar则是浮在页面上的。Tips一般要让用户主动触发关闭按钮或点击进入下级页面才会消失,一般用于需要用户感知到的通知信息,或者植入广告。


下图举例分析:

百度云盘在下载视频时,就会出现一个Tips的提示,让用户观看广告来得到加速下载。这种提示虽说是广告,但它抓住了用户的场景及心理,观看广告的几率大大提升。

爱奇艺的Tips提示就属于重要通知提示了,提示用户VIP即将到期,续费可优惠,它们都有一个主按钮及关闭按钮,需要用户主动触发提示才会消失。

Image title


规范总结

目前的弹窗样式非常多,你能想到的,你想不到的基本都可以技术实现。但这同时也带来一个问题,那就是“不规范”。以上提到的弹窗种类,你只需要选择符合你产品要求的几个类型,最好不要在一个产品中运用多个同种类型的弹窗,否则后期会很难规范及组件化,当然运营广告类弹窗可以另当别论。

差不多就写完了...大家觉得有帮助的话,记得点在看和转发~

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


电商设计都应遵循的最佳实践

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在电子商务界,你的网站设计就是一张在线名片。

它能帮助你从拥挤不堪的海量信息中脱颖而出,同时也反映出你的可信度。这是你的用户通过初次访问来了解你品牌的地方。如果他们没有找到自己喜欢的,几乎80%的人都会选择离开你的网站。

这就是为什么在构建和设计网站时,永远不要低估用户满意度带来的影响。

接下来要讲的是如何设计一个无可挑剔的、以用户为中心的网站,来使你的网站转化率飞速上涨。

 

1. 提供直观的导航

如果不能引导用户完成最终购买,那么设计再精美的网站都是毫无意义的。用户没有选择在你这里购买的一个主要原因是复杂的网站导航。记住,用户不希望无休止的点击和滑动鼠标后才能找到他们想要的产品。如果他们发现自己正将时间浪费在不必要的操作上,就会弃你而去,到你的竞争对手那里。

这也是你想要阻止发生的事情。

  • 创建具有描述性的菜单标签
    使用“产品”或“解决方案”之类的通用选项,无法给用户带来任何价值。除了用户体验不佳,这样的标签也不利于你网站的SEO(搜索引擎排名优化)。在搜索电商品牌时,没人会搜“产品”或“我们能做什么”。
  • 简化导航菜单
    菜单项越少,你的潜在客户就越容易找到他们想要的东西。这也有利于你网站对于搜索引擎排名的优化工作,因为更简单的菜单,会将你主页的页面权威度(Page Authority,该指标由Moz软件公司开发出,用来预测单个页面在搜索引擎中排名的打分系统,分数为0-100。单个页面所获分数越高,则表示有越高能力在搜索引擎中获得靠前的排名)赋权给你网站中权威度稍低的页面。
  • 让用户在页面间的跳转更方便
    添加内链,强化行为召唤,最重要的是,确保从你的主页进入任意子页面均不超过4次点击。不管用户处在哪个页面,他们都需要知道自己在哪里,菜单栏或搜索栏在哪里,如何回到主页,以及如何筛选出想要的结果,等等。

 

2. 设计一个令人惊艳的主页

人们常说不能以貌取人,但我们却一直都在这么做。在电商的世界中,你的主页就是颜值。

研究表明,只需0.05秒,一个用户就能判断出你的网站是否能够满足他们的需求。而且,如果你不能让他们相信你的网站是可靠的、安全的或足够有价值的,他们就会在眨眼之间抛弃你的网站。

那么,一个令人惊艳的主页包含哪些要素呢?

  • 一个可靠的产品价值定义,而非只是一句简单的口号。
    它可以向用户表明选择你而非你的对手的主要原因。它由强有力的标题、子标题、功能列表和视觉要素组成。它传达了你的品牌优势,展示了用户将得到的收获,且简洁易懂。
  • 展示你的可信度。
    在主页底部展示用户评价、合作伙伴、核心产品的特点和优势,或者一些动向。
  • 网站页脚应是一个可以让用户找到所有你最重要网页页面的地方。
    请始终保持链接到公司信息页、用户帮助页、社交媒体帐户页、联系方式和社交媒体详细信息,以及核心产品和其余产品种类。
  • 让这一切链接通畅无阻。
    不论用户是想购买产品还是只想了解更多,他们都会想要和你进行直接交流。这也就是为什么你需要加一个聊天机器人、电子邮件地址、点击呼叫按钮和社交媒体链接,以便于这些潜在客户找到你。

 

3. 让产品详情页更易转化

主页是用来吸引用户并与他们建立关系的。但当你想把一位访客变成付费用户时,体现产品详情页重要价值的时刻就到了。它们需要为用户深度展示你的产品,激发他们的兴趣,并让他们产生点击“立即购买”按钮的欲望。那么,让我们来一起看看产品详情页中最重要的元素都有哪些吧。

  • 产品图片
    有的时候,即便是像“光线不好”这样的细微因素也会影响人们对你照片的感觉,并导致他们离开你的网站。确保你的图片和网站的色调很好地融合在一起,并保持合理。你拍摄的产品图片应增强你的品牌透明度和信任度,因此展示“正在使用中”的产品是个好主意。不管你卖的是衣服还是健身器材,你的用户都希望可以轻松想象他们使用产品的样子。
  • 产品信息
    告诉用户关于产品他想知的一切信息,以便帮助他做出明智的决定。例如,如果要卖衣服,请列出具体的尺寸、尺码、面料等。用简单易懂的语言来解释产品的特点,以及它是如何解决用户问题的。如果产品有不同的尺寸或颜色,应明确说明。
  • 个性化的用户体验
    这是所有大型电商品牌都会做的事情。他们会观察用户的偏好和购买记录,为他们提供一个流畅的购买旅程。例如,添加“相关产品”或“其他用户也购买了”这样的选项,可以帮助用户更快地找到理想产品,并完成购买。你还应为用户展示产品浏览历史,方便他们更便捷地加入购物车。
  • 关联销售
    简单地说,关联销售的意思就是说服用户从你这里购买更多的商品。一旦用户购买了某款产品,你的网站就展示与其相关的产品。举例来说,如果一位用户购买了无线鼠标,你也可以为其展示鼠标垫或电池产品。

 

4. 提供常见问题页面(FAQ)

如果有用户不确定是否要从你这里购买产品,那他很可能会在深思熟虑前就离开你的网站。你需要向他们证明这是一个错误的选择,而这正是“常见问题“的切入点。

创建一个页面去回答用户最常问的问题,会让用户感到高兴,将他们的购买焦虑降到,也能够更快引导他们完成购买。这就是为什么,你需要积极地构建FAQ页面,提供可操作和有用的技巧,甚至通过截图和图片的形式来让答案容易被更多人理解。

一个可靠的FAQ页面还可以提升SEO(搜索引擎排名优化),特别是在语音搜索SEO和本地化SEO盛行的时代。数据显示,22%的搜索者会使用语音搜索在网上查找本地企业。因此,综合考虑电商SEO实践与本地化SEO服务,对你的电商网站至关重要。

这就是FAQ页发挥首要作用的地方。也就是说,在不损害用户体验的情况下,它使你有机会针对搜索时高频出现,及具有地区特征的关键词,来优化FAQ页面的问题和答案。此外,这也有助于提升你的网站在语音搜索中的排名,因为谷歌经常使用FAQ页面作为语音搜索结果。

 

5. 让订单流程更友好

你已经通过种种努力让令人惊艳的主页赢得了用户的信任,用产品详情页页的优质文案提升了他们对产品的兴趣,现在是时候激发他们去完成最后的购买流程了。你千万不能搞砸了这个关键环节,因为购买流程是购物流程闭环的最后一步。

  • 不要强迫用户注册
    不是所有人都想出现在你的收件人列表中。那么,面对这些希望不注册就能从你这里购买的用户时,要怎么做呢?显然,你应该允许用户自由选择是否要跳过这一步。这也是你如何减少用户放弃后的流失,并激发他们完成购买的一个方法。
  • 精简注册表单
    如果用户决定注册,那么让他们的体验尽可能顺畅。请去掉所有无关紧要的表单字段,专注于那些对你来说真正重要的信息,例如手机号,电子邮件地址,信用卡信息以及收货地址。要测试表单在移动终端上填写的友好性,确保用户可以很容易地在这些设备上填写。
  • 运费透明
    用户并不喜欢讨人厌的“惊喜”,而运费就是其中一种。这就是为什么你需要在产品页上突出运费选项,并且告诉用户产品总价和运费,以及预期送达时间。
  • 建立用户信任
    用户早已对愈演愈烈的网络攻击有所防备。令人不快的购买经历,以及他们每天看到的关于数据泄露相关的消息,都迫使他们变得小心翼翼。所以,当用户在你网站下单之前,他们都想检验你到底有多值得信任。
    1)首先,你需要从HTTP切换到HTTPS(加密的网络传输协议)。Google用一个绿色挂锁和“安全”标签,来标记带有SSL证书的站点。而只有HTTP的站点会被标记为“不安全”。这也适用于那些拥有复杂的数据加密手段和存储用户数据的有效方式但仍未购买SSL证书电商网站。当用户看到“不安全”的警告时,他们可能会离开你的网站。
    2)在购买页面上,另一个重要元素就是安全徽章。这展示了你网站的权威性,并且告诉用户,他们的敏感数据将会被安全地保存在你这里。
    3)最后,写出一个详细的隐私政策,并为它提供一个方便用户找到的链接入口。

 

总结

对于电商而言,用户体验至关重要。她会为你积累忠实的老用户,激励新访客转换为付费用户,并有助于他们向亲朋好友传播关于你的正面口碑。Jeff Bezos对此有很好的诠释:

“如果你的确建立了很好的体验,用户就会口口相传。口碑的力量是无比强大的。”

我希望以上的这些秘诀将可以成为你的坚实基础,助力你在在电商领域取得成功。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

2020 年值得关注的 10 个UI 设计趋势

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

创意动画

1. 品牌加载

公众喜欢有趣,可塑的动画。Airbnb 和 Netfilx 将品牌 logo 动画应用到了启动页和加载页面。结合品牌特点、风格和符号,融合到产品设计中,从而提升视觉的一致性,创造富有特有性格的产品界面。

△ Netflix & Airbnb

2. 图标动画

微交互是建立在移动端上微妙视觉效果的小动画,而图标动画是微交互其中的一种。它的目的是吸引用户,让用户感觉顺畅、愉悦。

最近,让我印象深刻的一个图标动画是 Facebook 的新消息提醒界面,这些由产品所包含的一个个小细节,创造出了新颖而有趣的设计。

△ Facebook Website

留白分隔

在 UI 界面中,最常见的分隔方式是用细线对模块进行划分,但随着设计重心趋向简约,注重内容本身,传统的分隔线方式就略显多余。

根据格式塔亲密原则,通过留白控制间距大小,可以清晰地划分模块层级,同时界面看起来也更加透气、富有张力。可以看到 QQ、飞聊、Gmail、Messenger 等应用都采用了留白分隔。

△ Gmail & Messenger

融入插图

1. 品牌形象插画

一个好的插画作品可以为产品带来极佳的辨识度。Snapchat 的页面用了很多情感化设计和品牌形象,包括开启通知引导动画、查找好友 landing page、下拉刷新页、照片回忆等等。

从品牌的个性化设计,寻找一种基于插画的设计语言,把产品塑造成一个高辨识度的 ID。

△ Snapchat

2. 3D插画

随着软件技术的提升,3D 插画在这几年中大受欢迎,很多应用都使用 3D 渲染产品,如:星巴克、Keep、毒App 等等,因为它真实立体,有着更高的转化率。

△ Starbucks by Wojciech

△ Keep & 毒

圆角卡片

圆角代表友好、亲和力,而卡片模块化的布局更为清晰、有效、整洁。

在上周的微信改版《微信 7.0.5 发布:9个细节提升体验》的文章中,我讲到了订阅号的推送文章去掉了标题栏的背景,卡片变得更加简洁。另外,公众号详情页由原先的列表式,改成了圆角卡片式,弹窗也由直角改成圆角。

△ Broadcasting & 微信

视频背景

长期以来,图像在视觉设计中起着至关重要的作用,而视频能够更直观的吸引用户,传达主要的思想。

在移动端中,视频主要用于登录页背景,一般可以是几秒钟的循环剪辑视频,它可以带来一种身临其境的体验感受。

△ Lyft & Nike

轻提示

Toast 是一种轻量级的提示,作为用户操作后的反馈。UI 形态上从居中浮层,慢慢趋向于底部通栏样式。这样设计的好处是不会挡住当前界面的内容。

举一个反例,iOS 的调整音量提示,大范围的遮住了界面,特别是对正在玩游戏的用户非常不友好,直到 iOS 13 这个设计才被修改。

△ Google Earth & Spotify

色彩平铺

随着扁平化设计和 Material Design 进一步占据主流趋势,简约的界面,明亮,大胆的色彩一直都处于增长趋势。色彩平铺已经成为清新、酷炫、数字时代的代名词。

△ Snapchat & Spotify

注重内容

重内容、轻 UI,把注意力引导在重要内容和功能上。像 Facebook、Instagram 这种以图片社交为主的 App 都有一个特点,就是文字都是黑白灰,将彩色交给图片去传达,让用户关注内容即可。

△ Facebook for Android

AR

增强现实的技术,已经出现在很多 Web、App 等领域中。许多平台开发者也将增强现实技术纳入其开发工具里面,可预期到这种类型的 App 将会越来越多。

1. 地图导视界面

地图+AR,让你不再盯着二维平面上那个蓝色的点,而是现实世界中的箭头告诉你在哪个路口转向。

△ Google Map

2. 表情贴纸

Instagram、Snapchat、Messenger 等平台可用 AR 滤镜来创作,表情贴纸可以帮助用户更直白有效地自我表达、获取注意力。

△ Spark AR

车载系统界面

随着 5G、车联网、人工智能、自动驾驶的发展,车载界面也越来越受重视了。

在今年的 Google I/O 开发者大会上,针对车载系统 Android Auto,推出了新的设计语言,它有着更好的可拓展性。在 UI 上,完全重新设计了导航栏,能够更轻松地访问应用、通知,和你的 Google 智能助理,最大限度的帮助驾驶者减少分心,将注意力集中在道路上。

△ Android Auto UI

此外,还开发了新的系统小部件,在使用地图进行导航时,仍然可以一键控制音乐应用,或者正在进行的电话,同时在屏幕上保持地图的完整视图。

总结

UI 设计的趋势除了侧重内容和情感之外,还会根据不同设备载体、新的技术(3D、AR)而变化。但归根结底还是以人为本,借用 Adobe 设计副总裁 Jamie Myrold 的一句话:如今设计师要思考的,绝不仅仅是设计一款 App、网站或设计工具。我们要思考的是人类的需求,用户的需求,打造真正人性化,多元化与包容性的设计。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


如何用扭曲工具快速强化作品设计感?

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们在日常工作中几乎离不开扭曲和变形工具,它可以帮助一个设计师校正一个元素的透视关系,或者为设计好的标志贴效果图。除了这些日常的应用以外,扭曲工具还有哪些有趣的应用场景呢?我们今天的内容就会帮你找到答案。

风格特点

从宏观的角度来讲,这种扭曲的手法,它设计出的版面变化方式是非常多的,我们将比较熟悉的文字进行扭曲,是可以呈现出其它的表现形式的。

比如说,最左侧这个海报,我们不光能看出来它的文字信息,还具有楼梯的印象;中间的这个海报,它把文字变换成了晾衣绳的感觉;我们再看最右侧的这个海报,很明显它就是一把扇子对吧。

气质分析

这种表现形式它是比较抽象的,再加上它能够变异成其它的形状,所以,这种版面风格也会传递出一种趣味感。

原理解析

我们在现实生活当中扭曲的图像,它属于一种光学的现象,比方说哈哈镜,它就是利用了这个原理,表面凹凸不平的镜面,反映出人像或者是物体的扭曲面貌,进而产生了幽默感。

生活当中的望远镜放大镜显微镜,也都是利用了这种凹凸的透镜原理来实现的。

我们人类还处于原始的时期,就已经开始运用绘画来记录身边的事物,在经过不断的发展,艺术家它们的绘画技艺也变得越来越逼真,甚至达到了和照片难辨真假的程度。当写实的风格几乎走到的时候,艺术家为了寻找新的艺术发展方向,画风就开始变得扭曲起来,变得抽象起来,从而产生了超现实的艺术流派。

我们将本来是圆形的西瓜和篮球限定在一个圆角矩形的这种做法,也是一种抽象的思维方式。

技巧分类

在这里我们为大家划分了五种常用的表现技巧,这些都是我们日常工作当中经常用到的一个扭曲技巧,我们分别介绍给大家。首先第一个就是液化这个工具,液化这个滤镜应该算是非专业人员都会知道的美颜功能,这个 ps 滤镜被用在了各种美艳的 app 里,这种夸张的艺术创作在漫画里面是经常出现的。

我们来通过网格感受一下液化命令到底是出现了哪些变化,液化的好处就是能够根据实际情况手动调节画面的扭曲幅度。它的自由度比较高,但是它的缺点也是自由度比较高,所以难度会比较大一些。

在设计的过程当中,也可以运用这个功能来刻画主体,产生一种遮挡的效果。我们也可以通过扭曲让文字的部分结构变得不容易认读,这就能达到设置悬念的作用,我们也可以通过其它不同幅度的扭曲变形,达到自己想要的状态。我们看上图是日本TDC 的获奖作品之一,作者是村上雅士,它运用的就是液化功能,将原本很平淡的版面,通过扭曲的变化,达到了吸引眼球的艺术效果。

这个是台湾设计师聂永真,他为2017年金点概念设计奖制作的主视觉海报,这个海报它以不规则的曲线呈现,并且搭上充满想象的文案,有耳目一新的形象。

下面我们来看一下球面化的工具,我们大家都知道,杯子中的水具有扭曲光线的作用,我们插到水里的这个笔它就会产生扭曲的现象,这个就是光的折射。我们在设计当中进行简单的图像合成时,也需要遵守这个物理定律。

我们这里通过网格来看一下这种形态的具体表现,顾名思义球面化的命令就是能够将选区内的画面进行球面的扭曲。它适合用在图像合成或者是还原真实性的场景里面,我们通过调整不同的幅度,产生不同的鱼眼效果。

除了基本的球面化扭曲,我们这个选择里还提供了水平和垂直的变化,形成类似圆柱体的表面效果。我们在产品贴图图像和形象的领域是经常用到这个东西的,我们调整不同的扭曲幅度,能够完美的让图像贴合到柱状的弧形表面上。

这里给大家准备了一个案例,我们给它添加一个气泡,然后再产生一些光影的效果,如果说我想让这个画面变得更真实一些,我们在设计的时候就要考虑到物理定律,这个时候就可以用球面化的命令。我们让圆形下面的文字产生光线折射的感觉,调节选项中的滑块,找到那个最接近真实的反射效果。

这个案例是我们研习设之前教程里提供的一个案例,我们看图中这个玻璃球和文字的衔接部分,用的就是球面化的效果。我们只看右侧这个对比图,你可以明显感觉出来,底部这个经过修改后的细节是更真实的,文字经过玻璃的反射,它一定会产生扭曲的视觉印象。

下一个给大家介绍一下极坐标,极坐标这个词听上去会比较陌生一些,但是你会非常熟悉,比如说这个启动画面,这个是PS cc版本的启动插图,它就是运用极坐标的命令实现的效果。除了能够实现从内部向外旋转的这个洞穴效果,还可以表现成类似于球体的效果。

我们继续通过网格来看一下它的扭曲原理,这里给大家做了一个细节的变化,是为了方便大家观察它的扭曲方向,我们给这个网格添加了颜色,顶部是蓝色,底部是红色,接下来我们为它执行极坐标的命令。

执行极坐标这个命令后可以很明显地看出,原来底部的网格内容被扭曲到了圆形的外侧,就是红色部分,变成了这个球的外侧,内部这个蓝色,就是之前顶部的蓝色部分。

它也提供了另一个额外的扭曲选项,扭曲后的效果就是这样的,这个效果我们不常用。

我们选择这张图来作为演示,让大家明白极坐标是什么原理,我们为它添加极坐标的效果,这个时候需要确定什么?就是图像的朝向问题,因为这个直接决定了最终的扭曲效果。

顶部的区域会在圆的内部出现,底部的区域会在圆的外部,我们根据想要达到的最终效果,来判断图像的具体朝向。这里制作了两种朝向的扭曲画面,左边的是地面在内部的球体效果,右边是地面在外部类似于洞穴效果。

我们在扭曲命令之后,需要手动将画面这个衔接部分处理掉。你可以用图章工具处理掉,这个画面就做完了。

再举一个例子,这个画面我要做的是人物在球体表面的效果,我们要考虑到方向,所以我们要将它旋转180度,然后添加极坐标命令。

使用修补工具来完成这个衔接部分,这个画面就完成了。

我们再来看下一个,下一个就是文字扭曲,也是我们这节课比较重要的一个内容。这个命令跟其它命令不同的地方就在于它不是在滤镜菜单下面,它是在文字编辑栏的右侧,在样式选择里,它提供了很多不同的扭曲方法。

这种方法相对于液化或者是自由变换更方便一些,因为它的这个可操控性很强,顶部提供了两种扭曲方向,底部选择则是调整扭曲的幅度。

这里我们简单地制作了几种文字样式,就是这个命令,它会让文字变得更接近图形化。

下一个我们来给大家介绍一下置换的扭曲风格,它的扭曲原理就是将被置换的元素,再加上需要被扭曲的元素,它们二者相结合,从而达到被置换元素一样的扭曲效果。这个话有点绕,我们通过下面的例子就明白什么是置换了。置换的幅度不同,扭曲的大小也会发生相应的变化。

比方说我们这里被置换的元素可以是任何图像,烟雾、丝绸、水波纹、液态流体或者是火焰,它们都可以当成被置换的元素。

比如说这里我们想让鸽子图案和旗帜结合,这个时候就需要用到置换的扭曲命令。首先第一步要做到的就是确定好鸽子在旗帜里的比例大小,然后要调整透视和倾斜角度来适应旗帜的表面轮廓。

最后执行置换命令,让鸽子的图像加入旗帜的扭曲轮廓,这样就形成了两者的完美结合了。界面里水平与垂直的比例,都是可以用数值来调整的。

我们再看下一个,不光是图形,文字也是一样的,添加置换命令之后,文字就会置入到了这个场景里,它的原理和之前是一模一样的。

我们再来看一下其它使用置换手法设计出来的版面,它们都是在表现原有信息的基础之上,通过置换的扭曲为版面,加入了另一种形态。左侧的飘动丝绸中间的楼梯和右侧的这个有点类似于纸张扭曲的效果,这些都是用置换这个命令来表现出来的。

案例拆解

我们来看一下,同样都是这个扭曲,用扭曲的这个思维,它设计出来的画面应该是什么样的。这个版面里文字信息使用的就是扭曲的变换形式,主体文字周围围绕着不规则的扭曲文字,增加主体形象的形式感。这种手法虽然会减弱文字的识别性,但换来的是视觉吸引力。如果想让选择的文字扭曲的话,这个文字最好是比较大的标题性文字。如果是小文字扭曲之后,它的识别性基本就没有了。

我们再来看下一个版面,大家应该能看出来,它就是运用了我们前面讲到的液化扭曲命令,思路就是重复的文字,它能起到强调作用。但有的时候你每一个细节都完全一样,它就会有单调的感觉,我们通过液化工具在对角线上进行扭曲,这样就会产生变化。

我们再来看下一个,这个效果是比较有趣的,它是用什么方式制作的?它是拍摄的。这个设计有的时候就像拍电影一样,并不是所有场景都必须依赖电脑,有的时候实景拍摄也能够带来更好的真实感。

这个版面用的是置换手法,由于我们没有办法找到相同的幕布,这里我们找了一个类似的作为载体,我们在上方加入文字信息,然后用置换命令,这个就变成了跟海报类似的感觉了。

这个版面和上一个有一些类似,但是不同的是它没有背景,它没有载体。这是因为扭曲的材质背景直接镶嵌在文字的轮廓里了。给大家举一个例子,很简单的思路,我们选择一个具有扭曲表面的背景图片,然后将文字放到这个图片上方,应用置换命令,采用多重曝光的手法。我们将这个材质镶嵌到文字里面就完成了,这样就看不到材质了。

案例演示

那么最后,给大家做一个案例演示,用到的就是扭曲的命令,这是一个活动展览的项目,它的主题叫流动消融。

为了达到宣传的目的,这里寻找一个能够让文案中的概念实体化的载体,就是标题,它的标题很直接了,那么提取主标题作为版面里的视觉元素,让它变得很大,成为本案的主体。然后我们将文字稍微拉长一些,这个拉长是手动拉长的,所以它会出现横粗竖细的现象,这个时候就需要修改了,调整笔画的粗细统一,去掉一些不必要的细节,这样这个主标题就刻画完成了。

然后我们绘制版面的比例关系,这一步的目的就是确定主体在版面里的大小。然后主体的这四个字就放在画面里的上部区域,底部的这个红色区域,我们来安排其它的文字信息。

接下来把其余的文字信息编排到版面的下方,我们所有文字编排好以后,最后一步,为画面添加一个水波纹的细节部分。

采用置换命令让二者结合,然后把水波纹去掉,镶嵌到文字里。

这个版面到这里就完成了,我们来看一下它实际的应用效果。

今天我们一起学习了扭曲技巧在版面里的应用,也知道了这类风格它的五种常用表现技巧,扭曲的这个版面不但可以和其它形状结合,更能为版面带来丰富的形式感,它是我们做主形象非常好用的一个手法。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档