首页

超全面的社交电商App 详情页揭秘!

资深UI设计者

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

社交电商在2018年可谓风起云涌,拼多多、云集、有赞都在18年陆续宣布融资,并且融资金额都过亿。然而社交电商本身就是个伪命题,虽然人口红利大不如前,而且社交说白了就是一直被人所反感的微商,刷屏、商品质量差,传销即视感。

但是有需求就有市场,想一想为什么你讨厌拼多多,是假货、是山寨、还是其他什么,究其原因是饱汉不知饿汉饥。而饱汉只是很少一部分人群而已,我们自然不是他的目标用户,随你拉黑也无所谓,所以社交电商的崛起是必然,并且有他独特的优势:

  • 在移动场景下的购物场景更加丰富,势必为社交电商打下了更好的基础;
  • 社交电商在发展政策上逐步完善,将是一片潜力巨大的市场;
  • 获客成本低,下线城市发展空间大;
  • 电商巨头排兵布阵,准备构建社交电商生态。

目前社交电商的形式主要分为两种,一种是拼团,如拼多多,这种模式通常发起者是不收益的,只是所有拼团者可以享受更低的价格购买商品,算是一种利人利己,裂变质量更好的一种行为。另一种是微商,这种模式的裂变范围更广,但是裂变质量较差。微商被冠以恶名刷屏大家都明白,而经我们研究发现,其实发圈的推荐购物是效率的分销行为。还有这样的熟人卖货逻辑是否可行?

社交是最好做的,也是最难做的。购物从本质上来说都是发现有需求才购物,但逐渐的变成了逛/别人推荐想起来自己有需求,再购物的变化。前者我们可以通过广告、营销、产品的优化来让用户转化,而后者正是现阶段我们需要考虑的事情,如何让用户买单那些可能有需求的东西,满足用户其他更深层次的需求。

2017年艾瑞咨询的移动社交用户在应用内购物驱动因素分析,我们能发现社交关系链的价值还是非常值得挖掘的呢。

俗话说的好,详情页乃兵家必争之地,得详情页者得天下。首先我们来看看详情页的首屏。可谓是百花齐放了,业务、用户、场景决定了功能与信息架构。电商详情之所以复杂就是因为它需要承载很多复杂的场景,所以很多时候并不是所有的信息都是有用而你又无法简化。这显然不仅仅是普通的电商所呈现出来的商详,而是拥有「社交背景的商详页。」

那么下面我们分别从功能结构、以及细节来剖析这四款电商产品的商详。

一、拼多多

1. 功能结构

从信息结构上看页面信息层级还是比较清晰的,也确实很像3,4线城市大卖场的感觉,各种活动优惠的标签也是很排斥奥卡姆的剃刀了。但是各种活动标签依然让人有些眼花缭乱,视觉上页面缺少一些品牌特征。

其实我之前有做过物流的产品,当时也很纠结好用和好看的平衡点到底在哪里,后来我发现了如果为了要用而要舍弃好看,请不要犹豫,一定要选择好用。而你一旦绞尽脑汁想办法折中,对不起,那会变的既不好看又不好用。所以拼多多的视觉、图片风格我还是很能理解的。

然后首屏的上半部分依然是帮助用户建立认知的信息介绍区域,同样也是大图置顶的方式,但是细心的小伙伴在对比的时候能发现拼多多其实把全场包邮、假一赔十等特色信息放在了第一梯队的板块,很明显,它想告诉大家我们的服务是一流的,不会有假货,因为全是山寨。

2. 细节

比较特殊的地方是,在左下角有一个更多的按钮,收纳了历史浏览、回到首页和帮助3个功能,通常「更多」的按钮会放置在右上角,这里的设计和大部分用户的认知可能不太一致。还有一个比较有意思的是,价格最右侧显示的是已拼而不是已售,所以从细节能看出来拼多多是有多么强调拼团这个属性了。

然后我们熟悉的购物车功能没有,因为拼多多也是限时拼团电商,要拼团先支付,所以没有购物车的场景。而大家看到的单独购买这个锚定效应也是运用的很直接了,应该没有人会用更高的价格还死命的加购物车吧?

锚定效应(Anchoring effect)是指当人们需要对某个事件做定量估测时,会将某些特定数值作为起始值,起始值像锚一样制约着估测值。在做决策的时候,会不自觉地给予最初获得的信息过多的重视。

二、云集

1. 功能结构

云集首先是一家会员制电商,其次才以社交的手段来进行分销的电商。大部分以微商形式存在的电商都会面临店主同时可以买或者卖的场景。然而很有趣的是,这样的 s2b2c的模式,商详究竟要如何做呢?其实你能发现,优秀的电商产品总有自己的核心关键词,比如拼多多是拼团,云集是批发价。所以当我们要满足买的场景时告诉用户自购可以享受批发价,而卖的场景则可以赚利润。虽然买的场景多,但是为了业务考虑,我们依然要把卖的场景做足。

在商品详情中,和其他产品不同的是多了这几个功能:

  • 任务奖励,通过完成销售笔数和金额达成任务。
  • 品牌授权,对拥有被授权资格的商品透出品牌授权背书入口,增加用户的品牌信任度。
  • 发圈素材,不是自用推荐的商品,一般很难卖,别人的发圈素材能够帮助店主更快的卖货。
  • 大家都在卖,卖也要卖好卖赚得多的商品。

以上的功能都是刺激以及帮助这些小b去推荐及销售商品。从而整个商详页都是为了形成一种卖的氛围同时兼顾着买的功能。

其实我们都知道,社交电商(微商)都是有组织有纪律的,只有散户才会自己挑商品找素材去卖货,而拥有社群的店主只需要一个商品的二维码即可。

2. 细节

用过云集的买家都知道,云集和环球捕手一样是没有和其他电商一样的评价功能的,会有人问为什么那么重要的评价功能不放呢,别人如何建立信任呢?其实我们有在收集评论但并没有公开,而且我们侧重的是推荐购买,别人推荐你之后其实评论的意义就不大了。所以既然我们在收集评论那在供应商的选择上也会一直更新。

另一个原因就是评论这个功能在去中心化的小b店主为中心的产品中并不合适,可以想一想,社交电商和传统电商不同,传统电商会有商家入驻,商家和小b店主的区别在于商家除了需要销售商品时,还需要维持店铺的信誉和好评率,所以评论对于商家来说特别重要。但是以平台为背景的店主只需要分享商品卖货就行,评论的好坏并不是特别重要。

所以说到这里大家就会觉得社交电商真的是一个伪命题,你到底是为了别人好还是纯粹想赚钱。所以大家发现在这样的场景下,评论好那么都OK,如果出现大批量的差评,这个差评给的是商品,并不是某一个小b店主,在这里商品和服务就不像传统电商那样捆绑在一起而是区分开了。

三、环球捕手

1. 功能结构

信息整体强调了价格和限时特卖,弱化了标题和介绍。再早些时候所有 app 都还把标题放在价格的上面,并以大字体风格为骄傲。现在反而都把价格放在了标题上面,而环捕把价格元素做的更加明显。

2. 细节

标题和介绍字号变小我认为可以理解,在同样以推荐消费的背景下,我已经知道是什么商品了,不管是从别人推荐而来还是自己从列表点进来都已经对该物品有详细的了解,商品标题和介绍并不是特别重要。不过既然如此,介绍放一行也应该足够了,既要弱化为什么又要放多行。排名和最近销量笔数的视觉呈现有待改进,一个直角一个圆角不太和谐,最近销量不可点击却做成按钮的形状。

四、洋葱海外仓

1. 功能结构

大家可能对洋葱跨境电商比较陌生。它同样也是一个线上的分销平台。它的模式和其他两个稍有区别,用户如果想卖货可以选择两种方式,一种是成为代理商,代理商可以招募店主,同时可以获得下面店主销售利润的30%。而店主不可以招募店主。而另一种就是直接成为店主,可以获得销售额利润的70%。

说完模式,我们来看看它商详的信息展示。首先我们会发现在商品大图上方展示的是相关的8件好货,那么我们能想到的是:

  • 为了提高客单价,
  • 跨境电商的邮费国际物流和清关费较贵。

所以能一次性买足够的商品自然是比较划算,所以在这里更明显的位置放置了相关的商品供买家和卖家挑选。

你会发现洋葱在详情中加入了评价功能,但这里的评价并不是所有的用户的评价都能够被显示出来,而是经过官方审核以及店主上传的评价才能够被显示的。

2. 细节

洋葱将利益点和卖点放在了图片中沉底,这也能够让商品与文案的关联性更强,缺点是容易被忽略。

产品介绍上方会出现一个头像,但是新手用户会很疑惑这个头像到底是谁?官方还是店主不得而知。而该产品的介绍文案过多也会影响首屏的展示效率。

洋葱将返回首页、以及底部标签导航的功能集合在了一个 fab上,令人不太理解的是悬浮按钮中和底部均有购物车功能,然而二级页面也没有存在这个 fab,所以悬浮按钮中的购物车功能有点鸡肋。

所有的「社交电商」在应用内放置互动聊天的功能都特别鸡肋。店主与买家的社交纽带依然是微信,而平台对于买家来说只有在逛和买的时候才会使用,即使做了IM也无法在应用中植入社交场景,更不用说让用户养成习惯了。所以做社交要有背景。

底部只有加入购物车,没有立即购买按钮。一个是希望提高客单价,同时帮助用户节省物流费。另一个是 b2c电商的产品都由平台物流统一发货,他和 c2c 的淘宝不同的是淘宝购物都是根据不同的商家进行物流运输,所以不同的业务模式形成的功能也是不同的。

总结

广告营销的电商模式未必能满足喜欢个性化需求的用户,我们购物或许会逐渐的变成你觉得我适合买什么而不是我看看你有什么。徐志斌老师在《社交红利》中提出社交红利能够从人与人之间的关系,互动中产出更多的价值,那么基于电商背景是否可以将电商价值最大化。

而我们今天讨论的社交电商商详,它能够帮助小b用户与c端用户更的链接,不同业务模式下的商详所呈现出来的功能、框架、视觉表现都是有很大区别的,而我们要做的是让买卖双方的关系链更结实。

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

研究了300个企业之后,他们发现了这4个设计关键点

资深UI设计者


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

麦肯锡咨询公司在调研了横跨5年时间的200万份财务数据和10万多个设计项目和举措之后,发现以设计为主导的企业收益提升了32%,而股东的总回报率提升了56%。


多年以来,设计领域一直在努力探索和发掘更加有商业价值的实战案例,而麦肯锡咨询公司(McKinsey&Company)的一项开创性的新研究终于开始将设计和业务之间的影响关系给勾勒了出来。

这些总计超过200万份财务数据和10万多个设计项目牵涉到了300多家上市公司,他们都试图让设计成为商业中最重要的组成部分,麦肯锡发现其中这些对于设计有强烈倾向且擅长将设计原则落实到实践当中的团队和企业,在收入上提升了32%,而股东的总回报率提升了56%,而呈现出这一特征的,主要涉及到三个行业:消费品、医疗技术和零售银行业。

「在过去的5年当中,商业领袖们开始越来越多地呼吁在产品和服务设计领域提升竞争力,」在英国领导产品研发和设计实践的麦肯锡咨询公司的合伙人 McKinsey 说道:「在如今的大环境之下,产品和服务越来越难以从激烈的竞争中脱颖而出了。」

Sheppard 和其他的研究人员使用回归算法来分析和评估不同的设计行为。在研究过程中,他们会试图将设计主管置于公司高层管理当中,或者将高管的奖金和可用性数值关联起来,看看这样会怎么影响这些企业的财务业绩,而这300多家企业基本都是自愿加入并配合机构的研究。当真正面对设计的时候,这些互相处于竞争位置的企业站在了一起,一同学习。研究者发现,即使身在不同的领域当中,但是影响并增加企业总收益的,主要源自于四个方面,并且他们将这四个方面的行为决策最终构成的综合指标称为麦肯锡设计指数(MDI),并且使用 MDI 来对这300多个企业进行排名。这4个关键领域分别是:

  1. 将设计所产生的影响作为衡量标准,就像跟踪成本和收入一样严格跟踪。麦肯锡在这个调研中引用了一家游戏公司的案例,他们通过对网站主页的功能进行小幅度可用性调整,从而将产品销售额提升25% 。
  2. 通过面对面的交谈和调研,将用户反馈和需求放在首位。这有助于团队在标准的用户体验之外进行思考。麦肯锡在报告中援引了一家连锁酒店的案例,酒店向用户展示了作为纪念品的橡皮小鸭,上面印有该酒店所在城市的形象,他们鼓励用户搜集不同城市的橡皮小鸭。这一设计项目是和用户沟通之后的产物,根据跟踪数据,单这一项目就将用户留存率提升了3%。
  3. 将设计师引入跨职能的团队,并且激励顶尖的设计人才。麦肯锡在这个环节引用的是 Spotify 的案例,Spotify 营造了一个多元化的企业环境,并且赋予设计师足够的自主权,创造足够优质的设计,这和同类的公司截然不同,后者的设计师通常需要花费大量的时间来给营销团队制造幻灯片。
  4. 鼓励进行调研、制作早期原型并且迭代。产品或者服务在发布之后并不是彻底结束了。麦肯锡的研究报告中援引了一家游艇公司的产品设计作为案例。这家公司的设计师通过和乘客进行交谈了解信息,借助支付数据来评估的活动,利用机器学习算法来分析,来发现游艇布局中低效、体验较差的部分,并且借助这些信息来不断的迭代和调整,提升产品和服务。

实际上,能够持续地在公司中执行这四件事的公司,MDI 得分会最高。MDI 指数最终也确实和公司的盈利和总回报率正相关,最有意思的地方在于,MDI 排名最靠前的25%的公司和后面75%的公司相比,在盈利和回报率上明显高出更多,而后75%的公司之间的平均回报率增长相互之间就没有那么明显的区别。换句话来说,如果想要让设计真正意义上发挥它点铁成金的效果,企业必须尽可能多地投入,甚至比麦肯锡所提出的标准还要苛刻,超出要求才行。对于负责调研的 Sheppard 而言,这个结果简直是个惊喜。根据他们的统计,这些 MDI 指数较高的企业,每投入一美元在设计上,所获得的收益要远高于他们的预期,但是,对于那些一开始就真正专精于设计的公司而言,再在MDI 上做提升影响相对就没有那么明显了。

「对于大家而言,需要作出合理的决策。」Sheppard 说道:「我们是否要认真对待设计,或者说,在目前这个局面之下,是否要投资?坦率的讲,如果想要用好设计,那么需要在设计这件事情上,做得恰到好处才行。」

在麦肯锡的调研过程中,他们发现许多公司压根就没有在这四个领域中认真尝试过。调研发现,40%的产品在研发过程中,根本不会同用户进行沟通交流,50%的人根本没有使用客观的方法来评判他们设计团队输出的产物。只有不到5%的受访者表示他们的领导能够让数据来驱动产品,或者使用客观的方法来作出设计相关的决策。有超过60%的受访公司则是在开发后期才使用原型,并且仅供内部使用。值得注意的是,这些问题全部都是自上而下的问题,公司的设计师是没有办法自行解决的。正如同报告当中所写的:

「由于没有明确的方法将设计和企业盈利联系到一起。企业的高层领导往往不愿意将稀缺的资源向设计部门倾斜。这个本身是有问题的,我们通过研究发现,强大而一致的设计环境牵涉到公司的许多关键驱动因素,而这些都是需要公司高层来决策和投资的。虽然许多设计师敏锐的意识到了涉及 MDI 的四个层面,或者其中的部分因素,但是不论是哪一个方面,都不是企业中的设计师能够单独解决的,往往需要领导层的支持才行。」

那么,一个从来都没有「以设计为中心的文化」的企业,到底要如何构建起公司的设计文化呢?这份研究报告的作者建议,选择一个项目作为试点,并且给予团队承诺以践行上述的4个方面都能够在此践行。由于有不少公司自愿参与到整个调研项目中,所以他们能够验证了麦肯锡资讯公司的一些想法。目前他们发现,如果从一个试点开始,而不是试图在全公司推行以设计为中心的计划,能够获得更好的效果和收益提升。举个例子,一家医疗设备公司,在设计新的手术设备的时候,通过组建跨职能的设计团队,在设计过程中创建了110多个原型和概念设计,在2年时间内进行测试和迭代,并且将公司高管的奖金和产品可用性挂钩,并且在设计过程中不断地和一线的外科医生沟通,并获得反馈。最终,这家公司的产品的可用性得分比竞争对手的产品高出12个百分点,而公司的市场份额更是上升了40%。

Sheppard 希望 MDI 能够扩展到更多的行业和领域,就目前而言,MDI 可以将设计师造就明白然而管理层依然不太了解的道理,最终反馈到企业收益上,这是必经的过程。「这份报告昭示着新时代的到来,」Sheppard 说道:「设计最终走到了管理层。」

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


老板让你做出能刷屏的创意?来看京东设计师的方法!

资深UI设计者


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

通过以目标用户为核心的3个要素——定方向、找切入点、埋分享因子,来谈谈创意传播类的项目该如何入手。希望你读完本文后能摆脱做创意如同盲人摸象的痛苦。


一、写在前面

前些日子被《互联网公司时尚穿搭指南》刷屏,平时办公室中各路高级冷淡的同事竟也不淡定地纷纷转发议论起来。

自网易各种视频类测试类H5 的爆红到麻痹,以及 GQ各种漫画类图文的惊艳到习以为常,鲜有冲出重围受到广泛追捧的好项目了。

这次让其出品方「吓老湿」赢很大的,自然就是「创意」。在平台系统化趋势的时代,常有唱衰创意内容产出的声音,其不稳定性让人望而却步。我们也应该清楚的明白,做创意这件事,做好了一定有能够超出预期的回报。

本文,我们就通过以目标用户为核心的3个要素来谈谈——创意传播类的项目如何入手。

如果你在互联网公司,并有着需要尝试做创意的需求,希望你读完本文后能摆脱做创意如同盲人摸象的痛苦,追溯根本强于把控。

二、什么是创意传播类项目

也许主题不限、表达方式不限,但它的需求描述中常常伴有「刷屏」二字。其目标是通过创意内容产出的方式达到「刷屏」传播的效果,并产生其业务价值。

所以,内容的产生,不仅要能打动人,还要求不能自嗨,要能服务于产品,有商业价值。

譬如之前刷屏的「世界再大大不过一碗番茄炒蛋」的招商银行短视频,有创意,打动人了,也有很好的传播效果了,但与本体「招商银行」业务本身并无太大的联系和益处,使之成为经典的无效项目。

一个好的创意,必须要清晰准确的划定目标受众圈层,以传播本体对他们的核心价值为依托去规划内容。以下我们就详细说明如何一步一步打好地基:

1. 定方向

定方向就像画骨。

你需要根据项目的目标,挖掘传播本体的核心价值,并把它摆在整个项目需要围绕的主心骨的位置上。骨就是项目核心,它界定了项目的范畴,不能萎缩也不宜过度拉伸。

2. 找切入点

切入点就像建立筋络。

你需要根据目标受众的圈层文化,借助一些社会热点现象,建立与项目方向的契合的切入点。有了切入点,你的项目才有了脉络,才能有了内容的基石。

3. 埋分享因子

埋分享因子就像赋予血肉。

你需要清醒于自嗨之外,理性预设要靠什么吸引目标受众,刺激他们分享传播。血肉之躯最为表层,也最容易产生刺激,有了分享因子,你的项目才能传播起来。

具体怎么做,一个一个来说。

三、定方向

定方向首先要了解2个概念作为前提:

  • 「业务目标」。
  • 传播本体的「核心价值」。

比如为京东双11做创意传播,本体已为用户所熟知,它的项目目标就是宣传造势。

双11作为全民最期待的购物节,该传播本体的核心价值就是以特色福利和促销为主的核心利益点。反之为京东旅行这个知名度低的产品做创意传播,更注重曝光产品品牌,而最大价值在于京东嫡系的背书。

分析了这2个前提,我们就可以开始从不同的维度去找方向。

基于我在京东做的项目,基本可以把方向分为以下5个维度:

1. 围绕广义的产品核心竞争力

比如京东一直以来主打的「物流」,淘宝15年主打的「万能」,就是产品核心竞争力。

2. 基于目标用户的调性

比如京东从男性化到更重女性化的转变,比如网易严选主要切中的「白领小资」,就是基于目标用户的调性。

3. 表达主题态度

比如京东这2年屡屡强调的「好物」,天猫17年根据品牌升级所主打的「理想生活」,就是产品区别于其他人的主题态度。

4. 突出项目亮点

比如淘宝新势力周所突出的「独立设计师」,网易考拉Julia 所表现的黑五项目中的「KOL支持」,就是可以突出的项目亮点。

5. 针对利益点包装

比如京东18年618活动中厉害的「平分20亿京豆」,天猫双11曾经的口号「不止5折」,就是项目的利益点。

并不是一个项目都要表达这5个维度,也并不是一个项目只表达其中一个维度。

分析这些维度的目标是要从各个方面去梳理传播本体的子弹,挖掘到什么是可以并且值得拿出来出击的武器。

分析这五个维度不能只是设计师的自我YY,更需要与需求方一起做这件事。而后更要做的是与多方一起共同去根据前提,也就是传播的目标和传播本体的核心价值去界定项目的方向。

只有在项目之初,与需求方、决策拍板人、项目执行者多方确定并达成共识,才是有效的方向决策。

譬如在17年京东双十一的项目中,在梳理以上内容之后,我们与需求方达成一致的项目方向是:基于京东双十一本体的特殊福利优惠亮点去打。

定了这个方向之后,在后续的创作过程中,我们就能以终为始,拥有了对项目产出的预期管理,在模糊的创意没有谁对谁错的灰色地带建立了对错标准。有了标准才能团队上下协作齐心共力,不至于混乱。

四、找切入点

如果你的项目在设计阶段走心走肾,投放市场用户却冷漠相对,很有可能就是你的切入点没有找好。

切入点是什么?

就是你要通过什么概念去表现既定的方向,要通过什么角度和故事去表达要传播的重点。

比如 Julia系列的切入点就是入职新人各种被压榨的灵魂共鸣。比如 GQ深夜酒馆的切入点就是城市人群攀比炫富行为的洞察。一个好的切入点,必须要去洞察目标受众最真实的行为,因为只有真实,才能引发共鸣。那么如何去找这个点呢?

你可以尝试从以下3个维度去做分析和发散:

1. 目标受众的圈层人群文化

他们的痛点痒点是什么,他们关注什么,他们的行为模式是什么,他们有哪些经典场景?

比如 GQ 的软文曾以洞察各种人群切入:略带直男属性的大龄男青年、系统外的人、花钱如流水的00后、边缘青年、北上广的租房一族、深度快手用户等等。

通过洞察这些群体的特质,就能让人们迅速能找到共鸣。

2. 所处社会的热点和梗

分别包括社会焦点,就是社会广泛存在的问题;当下热点,就是一段时间内大家喜闻乐见的话题;时间节点,就是传播时会发生的社会性大事件。

好的热点和话题可以借势,比如国庆的支付宝「中国锦鲤」活动,在「锦鲤」赋能下,让它更具网红潜质和传播性。

3. 前文定出的方向发散

包括基于方向的本身的发散和业务价值的发散:切入点是不能脱离于既定方向而独立发展的,考虑这个维度能把握切入点的边界不跑偏。不能表达既定方向的切入点,就是不合适的切入点。

譬如在17年的京东双11的项目中,我们根据社会人群忙碌常说「改天」聚会;拖延症症候人群庞大常拖延「改天」做事;契合到京东双11各种玩法多样日期不可「改天」,得到的切入点是「改天就GG,京东不改天」的概念。

同样,这个概念,也必须与需求方、决策拍板人、项目执行者最终达成共识,一个无法共识的概念,就是孤掌难鸣,无法成为一个好切入点。

有了切入点,我们就有了表达的脉络,就能为内容的创作定下基调。

切入点所吻合的人群洞察,让项目避免陷入无法打动用户的自嗨;所融合的社会热点,让项目借势避免老生常谈;所恰合的方向,让创意拥有主张,而不是空洞的言之无物。

五、埋分享因子

切入点找的好,但是用不好,没有好的传播效果,其中一个很重的原因,就是没有埋入诱使用户分享的底层刺激。

比如同样切入:「人生苦短,陪伴父母的时间已经很少」。很多项目做的煽情无比,赚尽眼泪苦大仇深,仿佛把人群的洞察脱光了展现给你看,但是用户却在煽情之余感到压力山大,甚至感到情感绑架而不愿意分享。

而某些花店在设计用户为母亲节父亲节为父母买花的这种直白的活动却悄然在社交中渗透。其中的差别就是人性喜于炫耀,而恶于自苦。前者没有预设用户因为什么原因而分享,所以才不得好的效果。

以下这7个促进分享的点几乎涵盖了各种不同类型的分享传播背后所存在的底层逻辑:

  • 表达想法:就是你的内容能帮助用户说出他的想法,让他觉得「你说的真对,真好」,产生这就是我想表达的内容和态度。比如 PAPI酱对社会现象的各种吐槽。
  • 提供诱因:就是让你的内容能让用户在与他生活中的常见场景产生联系,从而觉得你的点说的很精准。比如互联网穿搭指南。
  • 提供谈资:就是你的内容出人意料能让用户建立于他人的聊天话题,从而为了社交而分享。比如百雀羚的长图广告。
    社会比较:就是你的内容可以给用户提供攀比和炫耀的原材料,从而刺激用户做社会比较而分享。比如支付宝的年度账单。
  • 利用情绪:就是你的内容能使用户达到一种激烈情绪,从而需要释放,被情绪支配则不需要任何理性地去分享。比如番茄炒蛋。
  • 展示形象:就是你的内容可以让用户建立或加强他的形象,让他可以从分享中展示自己的品味和个性。比如各种测试结果页或者高格调可以获得自我满足。
  • 实用价值:就是你的内容具备有用的有价值的信息,可以帮到他自己和他的朋友,让他为了在社交中提供价值而分享。比如实用贴扫盲贴攻略贴等。

总结以上基本可以分为这4个大的方面:展示表达、可以炫耀、情绪出口、实用价值。在项目中通过对这些分享因子是否可用,如何埋入的预设,可以在前期预设项目的效果。

譬如在去年京东双十一的项目中。为了表达「改天就GG,京东不改天」的概念,我们预设了熟悉的影视剧经典场景,强化了前后反差营造情绪,最后利用经典人物提供了实用的双11攻略信息,刺激用户分享。最后的效果也达到了33.13%的UV分享率(市场平均7%)。

分享因子,就是项目的血肉。分享因子就是能帮助你的故事刺激分享底层逻辑。他是用户去理解概念,进而接收传播信息的基础。没埋分享因子的创意,常常陷入不是内容干,就是广告硬的桎梏。

六、要点回顾

经过画骨建筋加血肉,定方向找切入点埋分享因子,有了这3个要素,其实不是做创意传播类项目的结束,而是开始。

同样,这个思路不是创意的内容,而是它的地基,地基不稳则建筑不固。它能帮你入手,能帮你把控要点走在正确的道路上,但不能帮你完成内容的产出。


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


大师都是如何用产品思维做设计

资深UI设计者


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

设计师的价值是什么?

我们在工作单位上是跟PM(产品经理)、TD(技术开发)等同事对接,可是本质上来说,我们的最终boss是用户本身。换句话来说,我们在单位工作换取的薪资其实是用户支付的,是他们觉得我们的产品服务好才付费。


从这个角度出发,设计师的工作就不是PM给了你原型你就依样画葫芦了,因为一部分PM会把重点偏重在商业价值上,交互体验层面就没有花更多时间去思考。


那么我们作为用户与产品之间的桥梁,就该担当起“工程师”的工作,保证桥梁在用户使用时不会发生崩塌或者颠簸,也就是崩溃、闪退,甚至回过头来说这桥真TM丑等问题。


所以设计师在明确和理解好产品功能形态后,以产品思维并站在用户角度去思考才会设计出更好的视觉效果和功能体验,设计师自身的价值才能最大的呈现出来,用户也能投资更多的资源在这款产品身上,公司业绩也会蹭蹭上涨,你的身价也随之提升(嘴里笑嘻嘻)


产品思维是什么?


产品思维是你在工作中至上而下贯彻始终的宗旨。

我们在设计前,首先梳理产品原型文档里的思路,搞清楚为什么会出现这个需求,这个过程不但能够让设计师了解业务发展,也能为设计提供背景参考。


没有任何设计或者功能是能够单独脱离产品本身而存在,譬如不存在想要点外卖却没有点外卖的途径,不存在想要看时间却没有可以计算时间的方式。设计与功能都是依附于产品本身,这也是我们为什么得用产品思维去设计的原因,总不能想都不想就拿着淘宝那套UI直接搬过来放在微信上面吧。



为什么需要产品思维?


那么产品思维到底能够带给设计师怎样的提升?答案是,它能够让设计师匹配目标用户,结合场景需要,为他们定制出正确的视觉交互与功能体验。


可能有些设计师会过于执着于界面好不好看,确实视觉设计可以使产品更加美丽动人,确保其在众多竞品中脱颖而出,可是本质上它不会使产品本身更有价值,譬如为什么现在绝大多数用户用微信聊天而不用QQ?这是因为微信刚推出时比QQ更加简单,轻量,符合移动化趋势,更能针对社交痛点。人们不会因为QQ更好看甚至可以换主题而用QQ取代微信。(QQ:怪我咯???)

这就是为什么一个有效针对痛点的产品能够成功的原因。就算真的有同学朋友说你设计的东西不好看,你也不要沮丧,每个人看问题的角度,深度都不同。外行看设计,才会看好不好看,内行看设计,看视觉体验舒不舒适,业务功能需求有没有合理呈现,商业价值有没有实现。所以当你是以产品思维作为宗旨去设计,那么无论你怎么设计,都不会出现太大的纰漏,因为你已经用正确的方式为目标用户探索出一条能够真正解决问题的道路了。



如何培养产品思维?


可以从以下5个方面培养。1. 体验思维 - 2. 逻辑思维 - 3. 数据思维 - 4. 商业思维 - 5. 结构化思维。下面简单说明一下,后期有机会再每一点单独细讲。


1.体验思维


这是身为设计师最基础的部分,很多设计师拿到需求后就直接找素材上手做,这样的工作方式是错误的。设计师是需要做用研,构建用户模型,洞悉行为习惯,兴趣爱好的。为某个人进行设计,才能针对性地设计出好的方案。就像你给女朋友过生日,你清楚她喜欢的东西才能用最小的成本让她情绪最大化地释放,她喜欢蝙蝠侠你却送了它一个小丑手办,她能不发脾气吗….. 你还想指望她说小丑很帅吗(两个都喜欢的当我没说过...)所以当你了解了目标人群,那么为他定制产品的时候,才会事半功倍。什么?你问我怎么做?方法其实很简单,三点:a. 用户画像 - b. 使用场景 - c. 闭环设计

这里介绍一个”5W2H“法则,来帮助大家快速应到到实际场景里。


a. 用户画像

这是有效让设计师避免自我yy,以客观的态度代入目标用户的身份去了解他们人群的特性、喜好、痛点、作息、手机使用情况的方法。建立模型后,才能更有效针性地为他们定制服务,决不能因为我是一个站在潮流尖端的cool designer就把目标用户都当做是有这方面追求的人是吧(滑稽脸)


这里根据这个法则做出的一张用户画像的模型给大家参考一下


b. 使用场景

有两层意思,第1点:是用户使用产品时的真实场景,譬如大多数人会习惯夜晚看新闻、贴吧或者资讯类软件,所以才会有黑暗模式的出现。第2点:同样是评论,会出现在公共场景和个人场景,那么就必然会有样式不同的情况。但这些情况都有个共同属性,就是我在什么样的场景下去使用产品。设计师如果不能定位这种场景,就很可能被投诉用户体验差,用得懵逼自然就会卸载拜拜。


c.闭环设计

用户在使用产品时,会不会出现断层的情况,例如我在注册流程,获取验证码超时了,却没有重新获取的途径,那么这里的流失率可想而知是多么恐怖。闭环设计就是产品使用过程,或者具体到某一功能上,我都能实现下一步,我无论怎么操作,我都能在主流程上面继续畅游。

这种体验思维下的产品,能够让用户更容易理解如何操作,因为多数情况下用户不会意识到是自己犯错,都会认为是产品的锅,所以啊,不换位思考地去做设计,都是耍流氓(那个外星人榨汁机,excuse me?你是希望我通过运动才能换取果汁??)


2.逻辑思维


这点很好理解,我们设计界面时要做到承上启下,符合用户习惯操作,让用户在产品中航行时不会触礁。例子1:放大显示的交互,返回的时候就缩小回去,而不是变成左右切换;例子2:有一个活动的文案,”免费课10选2,3天后结束”,那么用户就会疑惑,你是3天后没有这个活动呢?还是课还可以买,只是不能免费10选2呢?所以自己设计时要每个方面都要去思考,不是PM或者运营给了你文案你就复制粘贴,你作为产品与用户之间的桥梁,想要传达的思想,都要按照逻辑有序地清晰地输出给用户,这样才会显得逻辑清晰,明明白白,整整有序。


3.数据思维


解释一下,数据是产品上线后,通过对想要看数据的页面、按钮、icon等元素预先埋入统计点,观察它们数字的变化,曲线的走势,来找问题出现的原因,从而思考迭代的优化方案。常用的页面访问率、停留时长,点击率,购买转化率,加载时长等,都是作为我们迭代的数据参考,有助于产品和设计研究出更好的解决方案。

虽然数据给我们带来很多实际依据,但它不是检验真理的唯一标准,不要看见数字低就觉得这功能要砍掉、详情页要重做,不一定是设计问题导致的啊,也不一定是用户不需要这个功能啊,具体情况还是得具体分析。就譬如ios淘宝上,你刷宝贝列表,刷到第6、7屏了,你想回到顶部,线上有两种方案,第一是点击手机状态栏的位置,会自动回到第一屏,你点击右下角的“回顶部”也是回到第一屏,如果你看到右下角的点击率低下,你会砍掉这个功能吗?我想不会吧,毕竟不是每个ios用户都知道状态栏可以回顶,也不是每个用户都只划一两屏,提供给你的数字不是唯一标准,只是个指数参考,切记不要反过来被数据控制了你。


4.商业思维(运营思维)


增长需求就是一个很好的商业思维例子。我们最终还是要面对用户,然后让用户为我们创造收益,所以可能期间很多产品需求,都是为了增加公司盈利。世间万物都是一把双刃剑,有时候为了拉新,为了促销真的不一定都有良好的体验,这时候如果不能完美地解决增长的同时又能照顾好舒适体验,那么我们就得权衡利弊和权重。

可能你会觉得购买页首屏明明很舒适,可是加了个会员栏,又加了个砍价按钮,又加了广告链接,变得乱七八糟,一直钻牛角尖跟PM说你这样伤害用户体验啊,可事实上,你导致了项目延期,功能被其他竞品抢先推出,损失的可能就是一个天文数字了。如果你不去了解商业,那又怎么能让自己的设计创造出商业价值呢?


还有一点可能大家会意想不到,那就是把自己看成一件商品,我这件商品要怎么做才能体现出更高的价值,也就是我值多少钱。实际项目与自己YY的练习不一样,充满各种沟通、时间、约束条件等问题。如果我能抓住优先级,把过多的需求拆分好几期,熟悉同类竞品状况,了解其他产品优势之处,每一个步骤想得透彻,就算老板来质问,你都能迎刃而解,那么你的专业度就体现出来了,即使可能你内心觉得这并不是你想要的设计,但我相信肯定是当下需求的合适解决方案。


5.结构化思维(项目思维)


结构化思维,是需要一定经验才能培养出来的,简单的来说就是要有统筹大局的思维。不是叫你开发,运营,产品,审核,商务都去熟悉,而是说要去了解与配合。


有些设计师觉得,接到需求,按时交付就行了,对于何时上线,开发过程中遇到什么问题,是否需要设计方案得及时作出调整,实际上线后又出现什么问题…如果通通都不去了解,那这样你就真的仅仅是设计产出的工具而已,因为你没有担当起设计师该有的体面与责任。如果你想提高设计在公司中的重要性和话语权,如果你想在老板眼中占有一席之地,那你就要积极推动项目,在别人眼中大发光彩。


另外一点是设计中的技巧,当你遇到一个需求点觉得模棱两可,比较尴尬的时候,你可以用结构化思维帮助你理清思路,这是我常用的手段,举一个关于首页是否加入听课进度的例子。

答案显然而见,方法其实很简单,你把需求点以定论的方式摆在至高点,然后层层递进地列出用户会遇到的所有情况,然后在每一种情况下的最后写出到底该不该实现这个需求。结构出来后,答案也就一目了然(拿去给PM看,嘿嘿估计又得夸我是小能手~)



总结


通篇下来看,如果你还被人说你就是画个icon而已嘛,那你就把这篇文章丢过去给他看!(转发就是最好的支持...怪不好意思的嘿嘿)你会发现我们其实通过图形,色彩,排版来开发我们的思维,不断实现自我提升来为公司创造更庞大的财富。

我们是设计师不是美工,继续做着“好看”的设计已经不是当下互联网时代需要的了,正如著名设计师菲利普·史塔克说过“我们是设计师,不是艺术家”(我也说得出啊…..)


我们利用互联网为用户设计产品,本质上就是了解他们的生活、习惯,痛点和人性本身,收好自己的“固执美”并且用着产品思维去设计检验,那么最终带来商业价值的设计才是我们要做的正确设计。

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

用一篇干货,让设计师了解今年很火的「用户下沉」

资深UI设计者


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

身为设计师,我们习惯性的埋头专攻自己的专业,思考着像素级的细节,拿捏着细微的交互体验,讨论着新的动效方式,却常常忽略着我们所处的大环境,产品所面临的新困境。


就像,目前流量红利逐渐消失的互联网行业,各大产品想要获取新用户的成本越来越高,而且很多产品在获取一二线城市用户时,遇到了天花板。

然而,对于商业公司来说,如果用户停止增长,就很容易面临产品一路下滑的小下坡儿。因此,各大公司也都呈现出焦虑到头秃的状态。

这就是为什么今年我们经常会看到跟「用户增长」相关的一些资讯或分享。同时,「用户下沉带来高速增长」这件事儿,也随着拼多多和趣头条等产品通过「下沉」尝到甜头后,被大家激烈讨论。

今天,我也来跟大家分享一下,自己的一些相关思考。

一、什么是用户下沉?

用户下沉指的是,企业为了给产品带来更多的新增用户、扩大自己的规模,产品功能或者运营方式从满足一二线城市用户需求,到拓展或者专注于三四线城市、乃至农村用户的需求。

用「说人话」的方式解释就是:从以前的高格调,到慢慢的接地气儿。

二、为什么需要下沉?

一直以来,互联网的主流人群都是集中在一线城市,他们最早接触互联网,有着互联网的话语权,他们精致、高知,是主流产品的目标群体,也是大多数互联网产品的第一波目标用户。

但不可否认,目前这波用户的渗透率,到达了天花板。

然而,还有另外一群人往往被互联网所忽视,他们生活在非一二线城市,受教育程度低,收入低。这个群体,还是一片蓝海,有很大的撬动(下沉)空间。

有的同学会好奇,那些非一二线城市的人,生活中需要这些互联网产品么,下沉后他们会买账么?

下面我们就从2个维度来分析,现阶段「下沉」的可行性:需求、潜力。

1. 需求

从今年年初,宣布 GMV 突破千亿的拼多多、到短短18个月内,从0成长为一家估值18亿美元的趣头条,再到注册用户7亿,闷声发大财的快手,就可以明显的反映出,非一二线城市人群,对互联网产品所呈现出的强烈需求。

难道用户的需求是随着这些互联网产品才开始有的么?

并不是。比如:在没有拼多多之前,城镇的人们就有购买低价商品的需求,他们会一般通过集市购买、2元超市等等的渠道。

而在拼多多上,很容易看到3元的抹胸、8块的加绒打底裤、49元的冬季羽绒服……

可能你会认为,这种价格的我才不会买,质量肯定不好。

但是,我们不得不承认,不同层次的人有不一样的需求,并不是大家在谈论消费升级了,便宜商品就没人要了。

同时,对他们来说能通过互联网获得更多品类的选择,通过更低价格买到跟之前使用的产品质量基本相同,甚至稍稍优于以前的产品,本来就是一种消费升级。

再比如:没有糖豆广场舞APP 以前,大家只能跟着领舞大姐学,现在有了这个 APP,大妈们可以自己在家好好练,不蒸馒头争口气,努力成为广场上的C位女王,人群中独领风骚。

年轻时可以学习不好,工作时可以不如别人,成为大妈后在舞场上还不勇得第一,就得好好反思反思了。

总的来说,非一二线城市用户对互联网产品有较大的需求量,所谓的「下沉」并不是创造出新的需求形式,而是对既有需求在既有方式上某种程度的替代,或提供更优解决方案。

2. 潜力

除了满足需求以外,企业还需要关注下沉市场未来的前景如何,潜力怎么样,这个盘子能不能越做越大。

通过分析发现,目前「下沉用户」正处在中国整体经济增长、城市化以及消费升级的大进程中,未来会成为这个国家最为庞大的基石人群,也就是说,现在的「下沉用户」会成为未来「中坚用户」。

今天美国的农业人口只占整体人口的2%,日本农业人口也只有9.7%,中国很显然在短期内还很难达到这样的水平,但历史的趋势和方向不会变化。

因此,可以看出,不管是从需求方面,还是未来的潜力方面,互联网产品中「用户下沉」这件事儿上,在现阶段都是一个可行的方案。

三、如何下沉?

当我们确定了自己产品有下沉的需求和潜力时,接下来就要开干了。那么「下沉」时哪些事情,需要针对三四五线城市进行差异化处理呢?

我觉得可以分为3个维度:运营层面、产品层面、设计层面。

1. 运营层面

运营的目的,一般是为了给产品拉新和促活。那么想要扎了四五六线城市的父老乡亲们的心,我们的运营活动需要注意:要有利可图、要通俗易懂。

要有利可图

下沉用户有个明显特征就是时间充足、价格敏感。如果有一些小便宜可以占,哪怕多浪费一些时间,他们还是愿意接受的。因此针对「下沉用户」的运营活动,要格外放大利益点。

比如:受五六线用户喜爱的拼多多,打开APP,满屏的「1元秒杀」,「6.6元秒杀」,「只抢1天」,「新人1元购」……这种紧迫的氛围,让人感觉不买就亏了。

映射到线下场景,就是「最后1天大甩卖」的商店,每天都是「最后一天」,一甩就是十年(微笑脸)。

再比如:趣头条,当你刚打开 APP 时,直接弹出一个红包(很懂用户占便宜的小心思)。不像有些产品的活动写的是「优惠券」或「代金券」,写多少元这种很人民币的感觉对他们来说,才是最大的诱惑。

有同学会说,上来就给18块钱,公司不亏死嘛!所以亲爱的朋友们,你们睁大眼睛看一下「18元」右面的小字「最多」,套路深啊。

然后,通过用红包的方式,吸引用户提现,但是这个时候会弹出来手机号登录页面。(用红包吊着用户去登录。)

对于一二线用户,或许对这种运营方式比较反感,感觉在耍人,浪费时间,觉得这就是套路我嘛。

但是针对五六线的用户,他们对互联网的东西存在距离感,敬畏心,会下意识的认为存在即合理。同时他们很闲,感觉点一点也并没有什么,而且占了些小便宜。这就是他们跟一二线城市用户差异的地方。

同时,趣头条通过邀好友、收徒弟、徒收徒的裂变方式获得金币/现金的运营手段,不断的吸引用户的好奇心和金钱的诱惑,以及阅读就能赚钱的卖点,给产品带来了迅猛的新增。

总的来说,下沉用户,对有利可图的运营活动,是愿意花大量的时间成本,从而间接的为产品做贡献的。

要通俗易懂

不像一二线城市用户,觉得产品的运营文案写的高级、有格调、很杜蕾斯、挺网易云音乐的,觉得符合自己独特的气质,恨不得立马翻它的牌子。

三四五六线城市的用户,受教育程度有限,对一件事情的分析耐心有限,文案上要尽可能通俗易懂、直白,才能使他们短时间get到你的点。

比如:趣头条,被邀请的朋友看到的页面。

没有拐弯抹角的诗和远方,直接就是「教你轻松赚现金」,而且底下有一排小字「不会的可以来问我,大家一起赚」。

多么直接、易懂、质朴的语言,但这些就够了,因为只有让对方明白了这是干嘛的,且有吸引力,参与度(转化率)才比较高。

再比如,针对下沉城镇的一些线下刷墙的运营宣传。

知道用户关注什么、在意什么,并以合理的表达出来,让他们看懂才是最重要的,整些虚的都没用。

以上可以看出,针对非一二线城市用户的运营,要放大占小便宜的利益点,同时还要更通俗易懂,才能让用户更快理解、吸引从而参与。

2. 产品层面

如果把运营活动,理解为塞门缝里的「包小姐」小卡片(运营banner),进行拉新(拉客),那么产品层面就是要看「包小姐本人」的服务了,影响着用户的体验,关乎着用户的留存。

那么,针对三四五六线城市的用户,产品层面应该做到哪些呢?我觉得最重要的一点就是:简单易用,避免懵逼。

比如:前段时间在朋友圈刷屏的「她face+」,只有简单的几个功能,而且很土嗨,就能在小程序排行榜上名列前茅。

打开应用你只需要做两个选择:要么拍照,要么从相册中选择照片。

我抱着试一试的心态,去体验了一波产品,然后我被变成这样了。

嗯,看到这样的自己,说实话还是有点小兴奋的。然后,我膨胀了,我开始想探索更多可能性了……

这个时候,我只需要点右下角的「我变」,就可以换不同的风格。

可以看出,这款产品戳中用户痛点的同时,将功能操作做的如此简单易用,因此,在「下沉市场」中非常火爆(当然运营做的也不错)。

再比如:悟空问答,可以称它为「下沉」版的知乎,这款产品是今日头条做的针对四五六线用户的问答社区。

从产品的功能层面来看,针对下沉用户的「悟空问答」,明显的更加简单易操作,没有像知乎一样的「想法」,「大学」等功能,上来看到的就是「推荐」的 feed。

同时在产品内容层面,也针对下沉用户做了跟知乎差异化推荐。

因为针对四五六线用户,「有用」只是他网络生活中一部分,更大的部分是「有趣」,也就是「杀时间」的产品。因此,产品推荐的问题大多是「你见过最美的女人是什么样?」,「如何不被传销组织骗?」之类更符合他们认知层面的内容。

不过,知乎目前也从早起努力经营,且引以为傲的精英氛围,明显意识到这一策略在用户增长方面的短板,所以能从近期产品推荐给用户的更接地气的内容来看,他们也在做「用户下沉」的事情。

以上可以看出,针对非一二线用户产品方面,功能要尽可能的简单易用,避免懵逼;内容层面,也要更符合下沉用户的认知,更有趣,帮助他们消磨时间。

3. 设计层面

在这个时候,设计师们会说,难道我们的设计也要做成土嗨+乡村迪斯科风,来迎合五六线城市用户的审美嘛?

不可否认,下沉用户的审美还停留在,「多就是好,颜色丰富就是好」的阶段。因此,他们往往会被「拼多多」所代表的那种复杂,信息高度密集的设计风格所吸引。

你可能会说:这不符合设计师们所推崇的「极简,留白」的高格调设计追求。但是,这正是身为设计师的我们,需要平衡的客观存在的问题。

比如:下面的案例,就可以看出信息密集,颜色丰富,但是,也可以做出高品质的设计。

再比如:抖音目前已经下沉到农村用户,但是 UI设计上也不是非要土嗨风,依然不输给一二线主流产品,然而五六线用户也没有因此而无法接受。

所以,我们不能因为个别针对五六线产品的设计做的 LOW,而故意做出葬爱家族般的设计。

我们应该平衡他们审美的同时,兼顾着设计美学,从而肩负着提升国民审美水平的使命。

因为,人人都有享受高品质设计的权利,这需要一代又一代设计师去努力的。这一点,我们需要像日本设计学习。

总结

总的来说,生活在一二线城市、过着快节奏的生活、用着新颖的产品、从事着互联网的我们,时常觉得自己的感受就能代表所有人,感觉我们都将进入并将长期处于人工智能时代了,怎么还有人不懂互联网呢。这就如黄峥(拼多多创始人)所说「五环内的人」无法理解「五环外」的世界。

通过最近思考发现,不管从「用户需求」还是「增长潜力」方面,「用户下沉」都是互联网产品可行的事儿,但是,我们需要针对「下沉用户」在运营、产品、设计层面做差异化处理,使它更容易被非一二线用户接受并使用。

同时,深处互联网行业的我们,应该在低头琢磨小功能的时候,抬头看一下大环境,多研究下用户真实处境及场景,避免沉浸在自嗨的方案中。

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


上亿人使用的腾讯微视,是如何做品牌体验设计的?

资深UI设计者

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

编者按:微视作为今年腾讯对抗抖音的核心产品,其重要性不言而喻。在短视频App 百花齐放的今天,腾讯微视该如何做品牌设计才能避免同质化,给产品带来价值呢?本文来自腾讯设计师的复盘回顾,你可以看到大厂的完整设计流程是怎样的。

一、项目背景

2017年是整个短视频大爆发的时期,内容产业逐渐成为移动互联网新的生力军。短视频产品同质化,用户体验趋同,团队希望运用品牌体验的全局设计思维,从视觉识别,用户体验,线上线下推广及产品礼品等多个维度来凸显产品核心价值,搭建一套完整统一的产品设计语言。

二、目标

微视目标很清晰,需要在短时间内快速进入短视频第一集团,切入短视频社交领域,挖掘更多机会点,也希望借这个机会能成为像微信这样的腾讯战略级产品。

三、设计挑战

设计的挑战点,短视频无论是产品形态还是设计体验都已成熟,如何避免同质化,在设计上寻求自己的核心竞争力;另外短视频产品强调内容运营,设计如何能够给产品带来价值,也是微视设计在这次的最大挑战。

微视在刚起步阶段,品牌团队曾经给微视做过1.0版本的设计,当时微视的设计思路没有太清晰,最终设计偏向于简洁专注的方向;但随着短视频逐步上升为腾讯的战略方向,微视单一的设计风格已经不能满足本身需求了,微视需要一个更丰富的设计语言,这给微视的新设计重新提供了一次机会。

我们梳理了微视的设计流程,整个微视品牌设计分为三大块内容,策略,设计和体验;设计前期需要明确微视的整体品牌定位以及挖掘产品的核心价值,推导出一套符合产品气质的设计原则,品牌设计上,应该是整个产品的设计语言素材库,其中包括了标志的设计,字体库的建立,色彩系统的搭建,图形延展设计,插画风格的提炼,动效概念等核心设计元素;在最后一环的品牌体验,代表了微视所有的场景媒介,都需要从设计语言素材库内提取设计元素并适配对应的设计,保证所有媒介场景的高度统一。

「做年轻人的潮流分享社区」是整个微视的品牌定位,让年轻人感知玩微视是一种潮流,在微视里能够挖掘更多很酷的事情和有趣内容,成为年轻人分享潮流和趣味的平台;微视的 slogan 是「发现更有趣」,发现更多有趣的人,和事,或者说是一种生活态度;基于整个品牌定位,我们挖掘微视的三大核心价值:保持好奇,寻找生活趣事;微视展现与众不同的自我;打造微视达人的潮流文化。三个核心价值,我们构建出微视的基础设计原则:微视是具备丰富内容和玩法多变的产品;它应该有个性化的标签来彰显自己的态度;微视是一个自带潮流属性的平台,在潮流圈中有很好的认可度,通过它来传播自己的态度和生活方式。

四、微视slogan:发现更有趣

通过整体的品牌策略与其它短视频拉开差异化,当下主要竞品的品牌定位都是强调记录生活,记录美好时刻;微视则强调用户自己,主动去挖掘更多有趣的人,有趣的玩法,生活趣事,探索世界,发现更多精彩。

我们在设计的第一阶段,logo设计,就是围绕「有趣」来展开发散设计。设计方案是否有趣,是我们的第一标准;它可能是一个实际存在的事物,它也有可能是一个抽象的造型,但它必须是有趣值得玩味的,也可能是别的概念会引起你的兴趣点。最终我们决定使用一个特别的播放键来代表微视,播放键的造型能让用户感受它是拥有多个维度的,2D,3D甚至是异度空间等,寓意着用户可以从多个维度来看世界,寻找有趣的内容。

我们针对这个大方向再进行了几轮细化,右边是最终的设计方案,这个 logo 希望它在多数的 app 当中表现的足够抢眼,所以色彩纯度足够高,渐变四色的搭配能让它从众多 app 中跳跃出来。

logo设计确定后,接下来补充 logo 在各使用场景中的基础设计规范,另外会增加一个不带 app底的场景,微视不只是单纯的应用在 app 上,它还需要有很好的扩展性。

四色渐变是微视的品牌色,确定了微视红是它的主品牌色,紫色,蓝色和桃红则是它的子品牌色。

另外在品牌字体的选择上,我们选择了三款原生字体作为微视的标准品牌字体。Fugaz-One 是一款能够广泛用于各种书刊画册的艺术字体,它的大写字体具有强烈的视觉冲击力,选择它作为微视标准英文字体;汉仪雅酷黑也是一款用于艺术设计方面的简体中文字体,字体线条粗壮,字形端正大方,并且字库相对其它艺术字体更完整;汉仪旗黑系列则作为微视信息类字体的补充,汉仪旗黑是汉仪字库推出的一款非常庞大而完整的家族字体,字体的各类粗细度都很齐全,并且能完美的实现各类终端环境的呈现。

微视的 pattern 是从 logo 的造型延展出来的纹理设计,这套 pattern会 应用在许多应用场景上,包括广告,内容模版,周边产品等需要辅助设计的场景中。

△ 微视网站

△ 微视内容模板

△ 品牌视频结束页

Pattern 也会结合激光动效的理念运用到微视的场景中,例如官网设计,内容模版,视频结束页等,Pattern 会作为底层展现品牌形象,在整个过程中会有品牌色激光动效,让整个场景丰富立体起来。

微视logo 具备多维度的特性,将这种特性运用到 UI场景的 loading 和微视水印效果上,增强品牌的独特性和趣味性;另外我们也会将 logo 做成霓虹灯的立体装置在线下活动中展出,让用户感受 logo 的丰富多变。

△ 点击查看完整视频

品牌视频通过多个几何维度来诠释 logo 理念,强调微视品牌趣味性。

结合 logo 的造型特征,我们打造了一套完整的图形系统素材库,里面包含了完整的字母与数字,还有结合短视频特性的图标体系;目前这套素材库仍在不断完善中,所有的图形设计都会运用到后期微视的广告和运营活动当中,霓虹灯的实体效果会结合线下的活动装置中使用,这套图形系统素材库,不但具备很好的品牌识别度,而且强调了微视有趣的设计理念。

品牌体验模块把我们确定的这套设计语言结合到与用户面对面的场景中来。品牌体验主要阐述微视的广告,活动和礼品三大块内容上。

在整体的微视广告设计中,我们把微视达人的个性拆成六大类别,每一类型都会拥有一个抽象的图形来代表这一类人群,向往美好生活和生活趣事的人;作风个性炸裂,酷炫的人;有才华的人;潮流网红;二次元;甚至是闷骚奇葩的人等。

每类个性标签的人群都有与之对应的风格与设计手法匹配,例如美趣标签的设计风格偏向暖色氛围与立体化图形的搭配;炸裂标签的达人,风格酷炫,广告整体运用撞色叠加的手法+霓虹灯的视觉效果;每种标签的设定都会有不一样的定义,让微视的广告语言更丰富和多元化。

微视官方品牌广告采用微视的标准品牌风格,对比其它标签的设计,它需要更加微视的风格。在首波微视推广中都采用了标准风格。我们给每套风格设定一套设计规范,方便后期CP 和其他设计师介入制作广告提供一套标准。

另外在微视的 IP形象微视狗的推广上,也采用微视的品牌风格来宣传。

微视中期的推广投放量非常巨大,所以也是微视广告语言需要多元化的原因,只有一套风格设定,不能满足微视的推广需求,美趣风格也是专门为101打造的微视广告,设定的糖果色氛围和3d设计很符合101女团的风格。

酷炫风强调撞色对比来体现氛围感,搭配品牌霓虹灯的视觉效果来呈现,霓虹灯设计也是运用微视图标素材库里提取出来的元素设计。在 NBA总决赛推广期,微视狗与 nba 合作的广告采用了这套风格设定。

微视广告在后期陆续补充了未来概念,街头时尚等风格,都是围绕大量不同个性的明星设定。

二次元作为近几年影响力逐渐壮大的群体,微视也打造了一套插画风格的设计,风格抽象,色彩纯度高,画质的细节多,适用于年轻搞怪的明星使用。

微视官网也采用插画作为主要设计的风格,这套推广插画偏向潮流感科技感,服装特地设计成 wesee 出品,让用户看到微视和其它竞品不一样的设计定位。

微视设计原则的第二条是微视拥有很强烈的个性标签,代表微视自身的态度。

我们采用了警示带的概念,作为微视品牌的专属元素,警示带能够彰显一个人的态度,同时又有趣味性和潮流感。我们结合了微视达人的特性,提炼出6段个性的词语作为警示带内容(拒绝雷同,发现有趣,忠于态度,潮流支配,躁动时代,极度爆炸)让警示带的设计更多选择和多样化。

在 vans 和微视的联名活动中,微视采用了警示带概念来对整个活动场馆进行铺装。

警示带概念还运用到微视线下潮流商品的设计中,背包,帽子,tee,手机壳等单品。

微视的最后一条设计原则,阐述微视的潮流文化。最主要的场景是在微视的达人商品设计上。

我们不希望只把微视当作是一个短视频的产品来做,设计师希望把它打造成一个新生的潮流生活品牌,无论是在选择产品的类型,到设计,打样,还有拍摄推广,都和普通的公司文化衫,或者纪念品拉开差距。

微视的潮流贴纸,除了作为线下达人活动的礼品,也作为线上APP 贴纸库的内容资源,提供给用户使用。

微视后续会继续生产更多的周边商品,比如拖鞋,背包,卫衣,毛巾等,这些都属于生产周期短,没有复杂工艺,性价比极高,属于潮流圈的基础单品,人手一件。这些单品都拿到能够触达用户的官方线下活动和品牌联名活动中,手递手传播微视的潮流品牌影响力。

总结

微视设计不仅包含了APP的体验设计,还包含了市场营销,运营活动,达人推广,周边商品等多个设计环节,环环相扣,缺一不可,一起构建了整个大微视的设计体系;互联网品牌体验在这几年逐渐显得重要,在如何设计同质化严重的产品上,如何打造竞品差异化的设计上,整体规划清晰的品牌设计能够让产品有更好的唯一性和专属感。

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

高手私藏的 UI 细节设计,这篇全都给你整理好了!

资深UI设计者

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

这篇文章渗透进页面中的每一个 Kit控件,深入的分析每一个控件所能带给用户的视觉以及心理感受。

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

用一个案例,告诉你我是如何把工作效率提高30%的!

资深UI设计者

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

最近刚做完一个项目,我发现我的设计效率相比之前竟然提升了30%以上。今天用「个人中心页面从思考到设计全过程」这个案例给大家分享一下。

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

甲方竟敢说你的配色丑! 我来教你怼回去

资深UI设计者


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

当我们看到一件设计作品的时候,映入眼帘的先是配色,然后才是其他的内容,配色的好坏,直接决定了我们对这个作品的第一印象。


当然,选中一个合适的配色绝不是一个偶然的事儿,这其实是一项系统的工作,只有知己知彼,把色彩研究透了,才能运用的得心应手。

以下几个方面也许就是经常困扰你的点:

  • 想要表达的设计思想不知道怎么去选取合适的色彩;
  • 缺少对色彩全面的认识;
  • 对配色没有一个系统的搭配方法;
  • 不懂得如何提高对色彩的敏感度。

接下来,我会分几个部分,来聊一聊色彩及配色。

一、认识色彩

1. 色彩理论

开始理解色彩,必然要提到色彩三要素,色相、纯度、明度,这是最基本的概念,我就简单的以三张图概括下:

色相:指的就是红色、绿色这些色调的称呼。

纯度:指色彩的鲜明程度。

明度:指色彩的明亮程度。

而色相又大体上可以分为冷色系和暖色系。

二、色彩印象

在进行配色实践之前,关于色彩本身的理解十分重要,在理解色彩独特的性质之后,才能进一步学习更有效的配色设计技巧。

点缀我们生活的各种色彩,都具有影响人类心理、情绪、感觉的力量,下面展开介绍一些代表性的色彩印象。

1. 红色

红色既有积极的一面,也有消极的一面,在考虑如何用其他颜色去搭配红色之前,先想想想要红色在整个作品中表现什么?

属于红色的关键词有:热情、兴奋、能量、爱、华丽的、辉煌的、生命力、主动性、活力、激情、辛辣的、炙热的;愤怒、危险、攻击性的、暴力性的、嫉妒、压力、压迫感、刺激的等等。

如果想要表现红色积极性的一面,最好使用泛黄的大红色或者明度较高的粉红色系的颜色。泛黄的红色比100%红色更能够表达温暖的感觉,而在粉红色系中,泛黄的暖粉红色比泛紫的冷粉红色更能传达出积极的印象。

相反,如果想要表现红色消极性的一面,使用泛紫的红色比较好。红色和紫红色中间的色系给人冷淡、不自然的感觉。这些色彩的明度越低,越给人不自然的和消极的形象。

下面举几个红色配色的案例。

上面这幅作品,设计师想要传达出「危险」「压迫感」的情感信息,塑造一个难民的形象,整个配色以红黑搭配,更显深沉。

红色也有着「华丽感」和「刺激感」,大面积的红色做为底色,凸显出画面中的人物形象,很好的诠释优雅和成熟。

2. 橙色

每种颜色都会有某种情感偏向,而橙色的情感是非常暧昧的,这种暧昧感使得它比红色更加温和,比黄色更加老练,即它有一种中性的魅力。

属于橙色的关键词有:活跃、温暖的、喜悦、开朗的、朝气蓬勃的、明快的、跃动的、亲近的、丰收、健康的、轻快的、明朗的、朴素的、安心的、温和的;任性的、歇斯底里的、嘈杂的、廉价的等等。

同属于橙色系的色彩,实际上给人的印象是完全不同的。鲜明的橙色富于年轻感,而偏褐色的橙色更具有复古感。

下面举几个橙色配色的案例。

以大面积的橙色做为底色,搭配高饱和度的黄色,这些色彩的「温度」都很高,很好的表现出了橙色「朝气蓬勃」的感觉。

将橙色的明度适当降低,搭配上「厚重」的红褐色,很好的展现除了橙色鲜明的个性。

饱和度高的色彩难免会表现出「廉价」的气息,画面中的橙色、黄色、蓝色、紫色,饱和度都偏高,很好的展现了作品的「销售属性」。

3. 黄色

谁都无法否定黄色带来的温暖,因为它就是太阳发出的光,黄色就是光,它也被称为「光之色彩」。而作为光的颜色,黄色可以作为挽救黯淡色调的救世主,赋予画面更多活力。

属于黄色的关键词有:明亮的、集中精神的、健康的、幽默的、希望、开放感、未来、宽厚的、轻快的、幸福、纯洁、明快、知识、权威、非正式的、可爱的、繁华的;幼稚、不成熟、警戒等等。

泛橙色的黄色比原色黄更能营造柔和温暖的氛围,这种平和积极的印象更能表现亲切多情的感觉。

泛绿的黄色偏冷,给人感觉冷漠。在原黄中加入白色和黑色的话,黄色本身的明亮的光感和暖意就会消失,变成偏冷的色彩。

下面举几个黄色配色的案例。

黄色的最「暖」的颜色,它很好的体现了色彩的「轻快感」,采用黄色为主色调,使得整个画面都「明亮起来」了。

这是一个以黄色为主,黑色为点睛色的配色,使用黄色超强的表现力,和黑色这种冷色搭配表现出「强烈刺激」的对比。

黄色同时也是小朋友最喜爱的颜色之一,高明度的配色,整体呈现出「可爱」和「童稚」的感觉。

4. 绿色

绿色作为大自然的主旋律,能带给人安宁舒适、生机勃勃的感觉。同时,绿色也是一种存在感极强的颜色,虽然是最为普遍的存在,但也是很难和其他的颜色搭配。

属于绿色的关键词有:自然、和谐、平衡、健康的、和平、治疗、新鲜、安逸、安心、安定、和煦的、诚实的、朴素的、放松的、年轻的、平等、公平、安全;不成熟、带有乡土气息的等等。

自然界的绿色是多种多样的,虽然看上去都是绿色,却可以有青葱的嫩绿,松针的草绿,清亮深邃的青绿色,落叶的橄榄绿等。这些颜色各有各的感觉。

下面举几个绿色配色的案例。

绿色是最「自然」的颜色,会让人不禁想起田园和植物,绿色和蓝色的搭配,没有强烈的对比感,倒显得画面更加「朴素」。

绿色搭配黑白灰,毫无异议的显得干净利落,上图中的绿色作为点睛色,平衡了黑白的单调,而这里的白色和绿色都趋向于轻薄,因此需要用深黑,以加强色彩的力量感。

绿色与偏暖的黄色搭配时,重要的是要强调两者之中的一个,在上图中的主色为绿色,点睛色为黄色,突出强调作品中的画面感。绿色的饱和度较低,与部分黄色相得益彰地变为了背景,辅助突出了点睛色。

5. 蓝色

在很多最爱颜色的民意调查中,蓝色都是最受大家喜欢的颜色。蓝色的原始记忆来自天空的广阔和大海的深邃。它有凉爽、神秘和寂静的感觉,同时又能塑造出特别的亲和力。

属于蓝色的关键词有:稳重、镇静、冷静、爽快、清爽、清凉感、信赖感、沉着、知识性、清洁的、成功的、男性的、理性、诚实;忧郁、孤独、荒凉、悲伤的、保守的、消极的等等。

如果要强调蓝色的积极印象,越贴近绿色的蓝色越好。但是,即便纯度较低,明度高的蓝色也能表现出明朗和积极的氛围。

下面举几个蓝色配色的案例。

提起夏天,我猜你想到的肯定是蓝天、大海,明度稍高的天蓝色,搭配深蓝色,充分体现了夏天的「爽快」与「清凉感」。

同时,蓝色也是极具商务个性的颜色,很多企业都选择蓝色做为品牌色,它也代表着「信赖感」和「成功」。

「蓝色是忧郁的」,静谧的夜晚,带来「孤独」与「荒凉」。

6. 紫色

在商业设计中,紫色被认为是一种优雅高档的色彩,常用于表现商品的奢华和高贵,同时也是很多艺术家喜爱的颜色。

属于紫色的关键词有:高贵、典雅、高尚、优美、风度、尊严、干练、神秘、秘密、心性、性感的、豪华的、华丽的、改观的;不安的、悲伤、孤独、嫉妒、自负、不健康、病弱等等。

紫色带有暗色的特质,所以明度稍微低一点就容易给人以沉闷的感觉。因此,紫色在与其他色彩配色时,尽量选择明度较高的紫色。

下面举几个紫色配色的案例。

紫色是「神秘」的,紫色本身是「冷暗」的颜色,所以与纯度高的色彩配色会强化紫色的冷暗感。

要用紫色来表现优雅、高贵等积极印象时,要特别注意纯度的把握。这种情况下,低纯度的暗紫色比高纯度的亮紫色更能传达积极的印象。

紫色靠近蓝色,所以紫色也有带有「孤独」和「悲伤」的调性,蓝紫色系的紫色更容易传达消极的感觉。

7. 白色

提起白色首先想到的纯洁,给人干净的感觉,它不会有强烈的个性,但是白色是永远的流行色。

属于白色的关键词有:清洁、纯净、清澈、正义、善良、和平、净化、诚实、胜利、真实、简约;空虚、变幻无常的、孤独、失败、离别、死亡、寒冷。

无印良品的产品一直注重「纯朴」、「简洁」、「环保」、以人为本等理念,在包装与产品设计上皆无品牌标注,但是却让人牢牢的记住了它。

大面积的白色显得「空虚」,加上蓝色的点缀,画面更显得「孤独」和「寒冷」,将白色的负面情绪表现的更淋漓尽致。

8. 黑色

当所有的光线都被吸收了,感觉就是黑色, 是一种具有多种不同文化意义的颜色,和白色一样也是永不过时的颜色。

属于黑色的关键词有:严肃、厚重、威严、神秘、高级感、充实、富裕、正式的、时髦的、硬的、重的;收缩、黑暗的、阴郁、邪恶、黑夜、恐怖、压抑、绝望、死亡、自卑、不安。

在画面中以黑灰色为底色,加上磨砂质感,突出了自行车的「高级感」。

黑色的背景加上压暗的人物形象,一种「力量感」油然而生,人物的形象也是凸显了整体画面的氛围。

总结

颜色无所谓美丑,我们对于颜色的判断完全是一种主观的经验,这个作品配色的好坏,并不是取决于这个颜色的好不好看,而是这个颜色适合不适合这个作品要传达的意境。

我们必须摒弃旧有的对颜色的判断,排除自身受到的社会文化的观念影响,从一个全新的眼光来研究色彩。只有在充分了解每一种颜色的色彩印象,才能消除你对配色的迷惑与不安。

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


可能是最全面的表单设计完全手册!

资深UI设计者


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

表单设计可以说是设计界一个老生常谈的话题,针对它的重要性自不必多言。本文结合自身经验和所看所学所得总结,希望能帮助到大家。


从「因子(构成要件)」的角度,将表单逐一拆分,从而能够全面的看待。

如下,大卸八块,一一道来:

  • 结构
  • 标签
  • 输入字段
  • 占位符
  • 帮助
  • 操作
  • 验证
  • 反馈

一、结构 Structure

字段的顺序、节奏、外观和组织。

1. 只问所需

必要而不是全部,简化表单,或许是优化表单的最大建议。简化的办法之一就是追溯每个字段为什么需要,是否是当前最相关的信息,如果它是可选的,最好不要显示。

2. 有理排序

先问什么,再问什么,前后字段根据相关性循循渐进。

3. 从易到难

从用户相对无抵触的信息开始逐渐到隐私的信息,而不是一开始就让用户萌生退意。

4. 组织相关

在繁多字段的情况下,将相关字段按照顺序进行分类组合,并通过增加一些额外的空间或者主标题将它们分成语义组,增加了页面呼吸和节奏感,从而帮助用户更加轻松完成表单。

5. 单列呈现

单列,只需眼睛沿着自然的方向从上至下,便于用户理解操作。多列,眼睛需要按照「之」形进行浏览,从而增加浏览和理解认知的时间。

当然单列呈现还是多列,并非绝对,需根据页面空间,表单内容及性质共同决定。

6. 提高对比度

提高颜色的对比度,你的用户群体可不是高清屏,飞行员。

二、标签 label

标签告诉用户需要输入什么。

1. 名词标签

名词具有很好的描述性且简洁明了。常用的字段可以使用大家熟悉的图标代替文本。

2. 标签位置

左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。

多数情况下,谨慎使用内联标签,在用户输入后,内联标签会消失,用户无法判断输入的内容是否符合,当然在用户熟悉且简单的字段下可采用(例如登录中只有账号和密码)。针对以上问题,你可以采用内联浮动标签解决内联标签在输入后标签消失的弊端。

三、输入字段 Input

承载用户输入的区域。

1. 自动对焦(PC端)

进行表单页面,自动对焦第一个输入字段可以引导用户开始进行输入。

2. 提供默认值

可根据已知信息,帮助用户预判内容。例如可以通过 IP 检测出用户的地理位置。

3. 保存输入的数据

记住用户已经填写的内容,以防万一(例如页面刷新),从而避免用户需要再次输入而放弃。

4. 字段约束

为有要求的字段设置限制。例如,最大字符数,电话中数字、字母符号等要求,从而有效的避免脏数据。

5. 格式化(掩码)输入

提供输入格式,帮助用户理解所填内容且减少错误发生。常用于手机号码、日期、银行卡和邮编等。

6. 匹配键盘(移动端)

提供合适的键盘,帮助用户快速完成。

7. 区分可填

如上所述,尽量避免可填字段。如果不可避免,应该做明确区分。根据经验,可填和必填的数量少的做标记说明。

常规做法:必填,使用「*」星号符;可填,使用「(选填)」。

四、占位符 Placeholder

标签的额外描述,帮助用户了解可输入的数据类型和格式提示。

1. 颜色区分

它是内容提示,而不是内容。

2. 不是所有输入框都需要占位符

占位符是对输入内容有特殊要求的提示或提醒,也可理解为对标签的补充,并不是所有的输入框都需要占位符。

3. 输入后消失

不要在鼠标键入后消失,而是在输入内容后消失,这样可以在用户还未输入的时候,依然帮助到用户。

如果提示特别复杂或者重要,请使用帮助,它会一直显示在那里。

五、帮助提示 Tips

说明要求,解释原因,甚至帮助回忆。

1. 三种方式

常驻、按需提供、偶尔需要。

2. 给予解释

当前需要用户填写相对隐私的信息时,请给予解释这么做的原因及目的。

六、操作 Submit

对当前用户输入数据的提交等动作。

1. 区分主次

主操作,是我们期望用户的使用途径,应该在视觉上与次操作做出明显的区分,以突显号召用户点击。

2. 合理放置

合理放置操作的位置,可根据表单的排列方式合理摆放,避免居中。例如表单采用的是顶部对齐,你可以将操作与输入字段左对齐,这样用户在完成输入的时候,轻松地看到操作按钮。

3. 准确命名

清晰可预测。应该准确地描述用户点击按钮后会发生什么。

4. 行动号召

按钮应始终带有强烈的动词,鼓励用户行动。

为了给用户提供足够的上下文,在按钮上使用「动词」 +「名词」格式,除了保存,关闭,取消或确定等常用操作。

5. 禁用操作

在未完成必填字段,禁用操作按钮,通过直观的视觉上告诉用户是否完成了要求,并在恰当的时刻(表单填写完成,按钮被激活)将用户的视线吸引到按钮上。

七、验证 Required

对用户输入数据的验证反馈。

1. 前端验证和后端验证

前端验证不需要服务器上传验证的数据,就可以判断,例如手机格式等;但是要记住在用户输入后才进行验证,为空不验证;

后端验证,例如手机注册输入效验码,通过后才注册成功,需要通过服务器判断,才知道用户输入的是否正确。

2. 错在哪里,显示在哪里

就近原则,方便用户发现并修改操作。

3. 结合颜色、图标和文字

我们不仅仅需要视觉上的区别(请考虑色盲用户),还需要文字说明并告知原因和解决办法,而不是简单的「输入错误」。

4. 请勿清除

错误的字段,请勿在键入后直接清除,请给用户在此基础上修改的机会,记住用户才是决定者。

八、反馈 Feedback

对用户行为的反馈,告知当前状态。

1. 操作前:光标状态

鼠标在屏幕上的映射,我们称之为光标(指针),它会随着操作对象及系统状态而呈现出不同形状,让用户对操作的行为及结果有预先的心理感知。

2. 操作中:操作反馈

如 default,disabled,hover,fouce,pressed,active,error,success 等。例如输入框的悬停和键入的视觉反馈,从而帮助用户聚焦。

3. 操作后:按钮加载

呈现按钮的加载过程,而不是禁止不动,用户会以为系统没有执行操作,从而进行多次点击,呈现加载并禁止用户的后续点击操作。

总结

以上便是对表单设计的一些总结,更多的是提供一种分析问题的框架,从结构化的思维分析设计问题,从而能够全面的认识一个事物并进行了解掌握,愿对你有所帮助。

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


日历

链接

个人资料

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

存档