首页

竞品分析:抖音VS快手

资深UI设计者

随着用户体量的变化和短视频平台的规范化,抖音的产品定位也相应的变成了“抖音,记录美好生活”。在往后用户量不会再有大规模变化的增长,而外部竞争例如快手等依然不断增长的情况下,抖音是如何发展稳固自己的短视频“一哥”地位呢?

一、短视频行业发展现状

短视频行业在2016年之后呈井喷式增长,移动端时代加速了短视频行业的发展,近年短视频平台不断在商业模式上进行探索,一方面成为创新性新媒体营销平台,另一方面也结合直播带货迎来新的增长点,短视频营销的市场模式逐渐受到认可,也成为短视频媒体平台的主要收入来源。

数据显示,2020年中国短视频市场规模已达到1408.3亿元。

抖音、快手是目前短视频行业头部平台,但抖音在社交和移动端支付等业务发展加持下,规模优势逐渐抛开快手。关于短视频用户最常使用的产品调查结果显示,抖音以70.9%的占比排名第一,快手占比52.3%。

面对竞争,快手积极寻求资本化,但其营收快速增长的同时伴随着亏损持续扩大,高收入由高成本带来,商业转化能力并没有较大提升,长期来看发展模式存在风险。

抖音及快手在短视频领域头部优势明显,快手发展起步早,用户基础深厚,且积极发展电商和游戏直播等业务,成为头部典型代表;抖音虽然发展时间较短,但追赶势头明显,入驻KOL数量多,带货推广情况良好,也成为用户最多的短视频平台。

数据显示,受访用户最常使用短视频平台排名中,抖音以45.2%的占比排名第一,快手和哔哩哔哩分别占比17.9%及13.0%,排名第二及第三。

其他字节系短视频产品如西瓜视频、抖音火山版等占比也达到4.3%和1.6%。抖音凭借其内容分发机制优势成功俘获用户的青睐,成为用户最常使用的短视频应用;同时,快手用户黏度较低,逐渐被抖音拉开差距,并且受到其他平台追赶。

1. 政治因素

2014年8月,中央安排部署新措施,宣布大力实施创新驱动发展战略, 积极推动传统媒体数字化、网络化、智能化发展。2016年,为贯彻中央部署,各种创新型短视频app的上线了,短视频形式受到越来越多媒体和创作者的关注。这对于短视频app市场无疑提供了一个巨大的市场开发空间。

2. 经济环境

短视频的快速传播使其市场规模也实现了高速扩容,各大短视频在创造巨大流量的同时,其市场规模也在飞速增长。根据中国网络视听节目服务协会数据,2018年我国短视频行业市场规模达到467.1亿元,较2017年的55.3亿元增长744.7%。

数据显示,2020年中国短视频市场规模达到1408.3亿元,继续保持高增长态势,2021年预计接近2000亿元。近年短视频平台不断在商业模式上进行探索,一方面成为创新性新媒体营销平台,另一方面也结合直播带货迎来新的增长点,市场仍将进一步发展。

3. 文化环境

截至2018年12月底,我国短视频用户规模达6.48亿,同比增长58.05%,高出长视频用户0.36亿,网民使用比例达78.2%;2019年6月,中国短视频行业的用户规模达8.57亿人。

同时,短视频用户使用时长占总上网时长的11.4%,超过综合视频(8.3%),成为仅次于即时通讯的第二大应用类型。

2020年,短视频月总使用时长同比上涨1.7倍,全面超越在线视频,成为仅次于即时通讯的第二大行业。在移动互联网总使用时长增量中,短视频占了33.1%,即时通讯占了18.6%,综合资讯占了9.7%。2020年已超7亿人,预计2021年增至8.09亿人。

4. 科技支撑

  • 智能手机普及和网络环境的优化,提高了短视频用户的流畅体验,成为短视频用户规模增长的直接动力。
  • 基于人脸识别和AR等技术在短视频上的应用,提高了短视频用户体验的丰富性和趣味性,进而增加用户使用时长,强化用户粘性。
  • 大数据,图像识别等技术推动内容数据和用户数据更加精细化,进而试下内容和用户的精准匹配,极爱去哪个用户短视频内容获取的个性化体验,增加用户忠诚度。

二、竞品分析

1. 基础信息

2. 产品迭代

通过以上两个产品历史迭代情况可以看出来,双方在功能上都越来越相同,这也是基于用户体验改进和市场变化而衍生出来的:

抖音:可以明显的看到抖音的更新重点放在了用户体验和更新社交属性上,除了优化产品,修复问题,多次大量上架新增各种特效、道具、滤镜和活动,提供了工具辅助内容制作,大大提高了其创造性、便利性、娱乐性和用户生产内容的动力。

另外,抖音的“朋友”板块新增了产品的社交属性,让其定位多元化,不局限于单一的短视频功能,也提高了用户使用产品的可能性。基于互联网+的大数据时代,抖音也不断更新算法,根据用户日常体验,推出了智能搜索和发现优化。

快手:由于产品定位不同,所以快手并没有跟抖音一样更新丰富的滤镜、道具等功能,产品更新日志绝大多数都是“问题修复以及性能提升”和“优化用户体验”两条。

在8.0.0的版本是快手产品更新最为关键的一次,新增“多入口内容”、“沉浸式上下滑体验”、“瀑布流”,此次更新之后快手用户的日均使用app时间提高了30%。而在之后的更新中,上下滑体验也被应用于发现页和同城页,旨在留住用户,获取用户使用时间,开发新用户。

3. 产品用户

1)用户地域分布

抖音:

source:百度指数

快手:

source:百度指数

数据显示,两个产品的用户地域主要都是分布在华东、华南地区,呈现由东到西、由南到北、由沿海到内陆扩散的局势。

这很大一部分程度上是因为沿海地区的经济发展迅速、生活节奏快、工作压力大导致其居民易产生焦虑、焦躁、空虚等现象,表达轻松、搞笑、美好形象的短视频的出现可以让他们有短暂的放松时间和对自己的精神压力的部分释放,这极大地促使他们对短视频App有了更高频率的使用。

虽然两款产品的用户地域分布大相径庭,但是还是有一定的区别:快手相对于抖音其用户比例中北方用户占很大一部分,比如山东、河北等地。

而抖音则更偏向南方用户,这主要是因为用户性格跟产品定位的契合度的关系。北方人性格豪爽,重情重义,更多的偏爱生活化的东西,喜欢真情实感接地气的表达真善美;南方人追求精致、美好的生活的状态。差异化决定了两款产品有不同的适用人群。

2)年龄和性别分布

抖音:

source:百度指数

快手:

source:百度指数

数据显示,两款产品都具有明显的年轻化特点,用户人群年龄段主要分布在20~39岁之间,这一部分群体主要是90后、00后,新社会下成长起来的具有新思想的自由个体,接受新事物的能力强,富有创造性,他们可以快速获取并进行信息更替和传播。

就成长层面来看,这部分人群也处在人生拼搏的阶段,压力相对较大,更容易产生焦虑的心理状态,短视频可以暂时性在一定程度上减轻他们的焦虑感,也可以丰富他们的生活,满足他们足不出户在家里就可以了解热点资讯的需求。而该部分人群也逐渐走向社会经济舞台中央,客观上也有利于抖音带货等商业模式的开展。

3)用户兴趣

抖音:

source:百度指数

快手:

source:百度指数

可以看出来两款产品用户在兴趣爱好上基本一致,影视音乐、软件应用、资讯类的视频播放量较高,其他各分类项目的占比也比较稳定,影视音乐一直处于领先地位。

其中医疗健康的占比增速最大,这跟近几年的新冠疫情有直接的关系,也由于生活水平的提高和理念的进步,人们更加关心自己的身心健康。

总的来说,两款产品的用户差距在逐渐缩小。

抖音:最初的目标用户是潮流酷炫的年轻群体,平台最初的内容运营是往偏时尚方向布局,吸引高校年轻人进行创作,最早赞助的综艺是“中国有嘻哈”这类以“潮为特征的节目。年轻的一二线地区的时尚人群是抖音的种子用户。之后随着用户数的增长,平台内容逐渐丰富,用户群体(覆盖区域、年龄分布)等分布更加均匀。

快手:快手最初没有刻意进行内容引导,但是其普惠的流量分发方式对当时缺乏针对性的社交、娱乐产品的下沉市场用户有极大吸引力,因此快手的种子用户是由下沉市场(尤其是北方地区)的用户构成。但是由于快手之后在垂直领域的突破,目前快手的用户结构也比之前更为均衡。

4. 产品主要功能对比

左:抖音 右:快手

在快手8.0.0版本之后,首页视频也采用了沉浸式上下滑的模式,这一点也是借鉴了抖音的首页,可以更快速直接的提供给用户短视频体验,也更容易留住用户。

点赞方式都采取了双击点赞或图标点赞。

抖音的主页面除了推荐列表,还有“朋友”和“附近”,而快手却把“附近”这一模块放在了底部的标题栏里面。

抖音左上角有专属直播通道;快手放置了个人中心的入口,直播入口则放到了新建页面里。

抖音评论展开视频播放界面维持原状,一部分视频会被评论遮挡;而快手打开评论后,播放界面则会整体缩小至评论上方,虽然不会挡住视频,但是由于太小可能会导致观看效果不理想。

抖音在播放界面左滑会直接进入作者主页查看详细信息,而快手则会拉出作者其他的作品列表,如果要进入作者主页需要点击头像才能进入。

关注图标在弹出页面也会显示,但是抖音的更醒目。

抖音搜索界面有榜单排名可以直接查看热点,方便接触时尚资讯;而快手则放置了各项的分类条目,比较生活化。

抖音搜索栏有扫一扫功能,思维逻辑适合市面上很多app,用户容易适应。

抖音在最新版本里“附近”栏目里新增了“学习”栏目,两者可以切换;附近同城也新增了数据检测和类似“朋友圈”的功能;快手在同城新增了“校友”这一玩法,社交属性大大增加。

抖音在“消息”界面归类了粉丝新增、互动消息、系统消息和私信四种基本通知,“可能认识的人“被归类到了”粉丝‘中;快手直接在“消息”界面推荐了可能认识的人。

抖音群聊归类在“消息”;快手把群聊放在了个人主页。

抖音的辅助拍摄工具库(滤镜、特效等)相比于快手来说大很多,玩法也多样。

总的来说,在浏览方式上,快手已经借鉴了抖音的“沉浸式”上下滑动的模式,但仍然保留了一些自己的东西,但是就作者体验来看,产品形象为简洁、方便的快手,反而越来越有一些画蛇添足的味道:

  • 在体验过程中,左滑的新作品小界面和评论播放界面缩小都由于尺寸太小而造成观看效果不佳
  • 直播入口不能直接进入而需要多次点击不太方便
  • 消息界面太过冗杂

三、盈利情况

消费者提出需求,生产者根据需求研发产品、完善产品、更新产品,而产品必须要在满足消费者需求的同时给创作者带来利润,才能形成一个完整的闭环。其中产品质量决定了它所能带来的利润,而利润又反过来直接决定了产品的走向。

下载量对比:

source:七麦数据

数据显示,在去年11月到今年10月的时间里,抖音的下载量虽然处于波动状态但是一直领先于快手的下载量,平均保持在180000左右,而快手一直保持在100000左右起伏不大。

收入量对比:

source:七麦数据

可以很明显的看到,抖音的收入几乎是快手的3~4倍,而短视频平台的收入主要来自于广告收入、直播打赏收入和电商分成收入三个方面,而在其中,广告和直播打赏的收入占总体收入的89%,盈利模式和收入结构不同:抖音重仓广告VS快手重仓直播,这也反应了其商业变现成熟,但是多元化程度不够的弊端。

1. 广告变现

抖音广告收入占比80%:抖音中心化的分发机制,导致特别容易打造爆款,特别容易聚集流量打造名声,因此广告占有很大的优势,而广告的盈利模式有很大的利润率,所以抖音的80%的收入都来自广告。

抖音收入来源分配比重

2. 直播打赏

快手直播收入占比60%:快手倡导粉丝经济和社区文化,使得KOL与粉丝之间的粘性很大,因此做直播的利润空间就显得非常大,虽然没有广告收入的利润多,但是收益平稳,也是快手的主要盈利方式。

快手收入来源分配比重

3. 电商分成

短视频电商行业主要有三种运营模式:

  1. 电商平台向短视频平台荐物,商品短视频栏目等内容生产者开始发力。
  2. 电商平台和短视频平台合作,为电商平台引流。
  3. 综合垂直类短视频平台,实现内容分发和购买一体化。

1)产品电商发展历程

抖音:

快手:

可以看出抖音相比于快手更先于铺垫电商业务,而且在之后的产品上线、功能完善更替、迭代升级和营销上面更频繁也更为完善,这也是抖音充分发挥了大数据、大流量的作用。

在2020年10月抖音实现了电商业务的彻底闭环,也奠定了抖音在电商业务上超过快手的基础。

2)服务定位

3)具体分析

生产群体:

快手:头号主播、精通电商的主播达人、公会和线下个体卖家等。

快手的这些电商达人大多有一个共同的特点:粉丝数量在几十到百万不等,有一部分具有一定的带货经验,甚至很多人本身就是淘宝中小店家入驻快手。比起头部网红,她们在直播展示、销售技巧、促进成交等方面有着显著的专业性。

抖音:以网红达人为主.线下商家为辅。

目前在抖音上卖货的主要仍是以网红达人为主。据相关数据显示,抖音达人、网红主播带货的方式以拍摄短视频为主,在视频中放上同款衣服的链接,实现边看边买,但是这也对视频的内容质量有很高的要求。

商品类型:

快手:商品类型多样,涵盖日用品、化妆品、衣服、食品等。

快手主播、用户甚至商家卖的商品五花八门,其上架商品的属性实在跟快手的产品定位及其用户属性不谋而合。

抖音:注重“调性”,商品最多的类型为衣服,而且是潮流穿搭。

抖音仍是很讲究“调性”。相关报告显示,抖音目前卖得最多的商品是衣服。而且是潮流穿搭,配上长得好看的帅哥美女的视频带货,用户很容易被种草安利然后拔草,同时通过补贴和发放优惠券的形式,刺激用户下单。

大局来看两款产品的销售模式是基于其市场定位的:快手用户购买商品,可能更多地是出于对主播的爱和信任,也就是信任电商;而抖音用户购买商品,往往是由于视频的内容足够优质,也就是兴趣电商。

四、总结与建议

总的来看,抖音重分析,内容分发去中心化。抖音在生产内容签约了一批网红、达人,通过MCN机构,持续稳定的输出高质量内容,PGC覆盖范围广,但是如何保证普通用户不丢失掉自主生产内容的积极性,打造PGC+UGC完美结合的体系。

快手内容分发去中心化,重视普通用户的UGC生产力,轻运营。快手得益于三五线城市的下沉用户,而这部分用户在生活中缺少表达的机会,但是具有表达欲望,所以造就了快手的内容生产主力军。

由于当前的网络用户主力军仍是90后、00后,年轻张扬、个性活泼的调性符合抖音的产品定位,再加之其运营的力度、体系的成熟和产业链的完整,所以抖音在大数据、大流量基盘的加持下,牢牢站稳了短视频“一哥”的位置。

建议

  1. 注重内容属性,不论是抖音还是快手不论是视频内容本身的质量还是商品的质量,虽然在大IP的加持下行业异常火爆,但是从长远来看,只有产品本身具有高质量属性,才能获得用户认可;
  2. 未来在电商业务方面必定还会有新的发展,抖音已经有了更为完整的产业链闭环,快手应该加快建设完整体系;
  3. 短视频行业竞争强烈,在不断的迭代出现了很多增值服务,但是应该化繁为简,从用户的实用性和便捷性考虑,这样产品跟用户之间才能保持持续稳定的联系;
  4. 抖音应该促进普通用户的生产创造性,支持UGC内容的生产,避免同质化内容严重。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:人人都是产品经理  作者:Ryan_
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




腾讯公益小红花火爆全网,背后的设计思维是什么?

ui设计分享达人

今年是腾讯发起99公益日的第七个年头。腾讯公益不仅在配捐机制、产品体系、企业联动、公益基础建设上全面升级,还连接数亿网友、近万家慈善组织和爱心企业,为全民公益交出一张漂亮的成绩单:

数据显示,小红花互动人次超1.25亿,送小红花、答公益题目等行为公益实现破圈传播,亿万爱心网友共同领取了超9000万朵助力小红花,共计有超过6870万人次在99公益日期间捐出35.69亿元,加上腾讯公益慈善基金会的6亿元资金支持,共募得善款41.69亿元。

99 公益日为何能实现破圈传播,作为腾讯公益日和 99 公益日的品牌符号,小红花的设计背后又传达了怎样的思考?今天就来聊聊小红花那些事。



2015年9月9日,腾讯公益联合国内数百家公益组织、知名企业共同发起了中国第一个互联网公益日。

为了让用户了解互联网公益的核心特色与参与方式,让更多的人参与到互联网公益中,第一届 99 公益日的活动主题定调为“一起爱”,在logo的设计中也借用了“无限”符号表示“爱无止境”的含义。


在前三年的 99 公益日中,募款额度得到了广度上的增长,在用户已经了解到互联网公益低门槛、多形式、透明度、可记录的特点之后,如何留住用户,对互联网公益形成日常习惯和持久投入,就成为了设计亟需解决的问题。

“小红花”是腾讯公益平台在2018年给出的答案。因为小红花作为国人的集体回忆,关联着你我儿时从老师那里收获到的鼓励。每一朵小红花背后,是我们完成的一件“好事”。

延续小红花的记忆线索进行延展,在公益中,小红花是对用户的捐赠给予的最大肯定,是受助者正在发生的改变。在传播上,小红花是记录用户每一次公益行为的符号,通过「戴小红花,一块做好事」而得到成就感的有效激励。

于是,2018年99公益日的主视觉上,无数的爱心化为花瓣,汇聚成一朵小红花,这是小红花在腾讯公益平台的初次绽放。



为了让品牌有延续性,加深用户对小红花和99公益日的认知,小红花作为核心品牌元素开始贯穿在每一年99公益日的主视觉中,并通过不同的画面故事表达每一年的主题。

比如,2018年的主题是积小善,成大爱,于是在设计中,让很多爱心小花汇聚在一起,让小的爱心变成大爱;2019年的主题是一块做好事,通过每个人的善意汇聚成小红花……



在2019年,“小红花”正式成为腾讯公益与99公益日的品牌符号。



从2020年开始,小红花开始发力于传播,联动外部品牌 IP 如QQ、微信、Bilibili、狐妖小红娘等开启推广,在各种不同的场景,诠释“一块做好事”的内涵。

这一年,小红花之歌火了,同名神曲MV播放量超1亿次;在线下,小红花也开到喜茶等连锁品牌的店里。

而2021年,属于用户独特的小红花爱心账户上线了,用户在腾讯公益平台做好事打卡,向好友发起集小红花的自发传播,从而争取更大的配捐额,在增强用户捐款积极性的同时,撬动更多用户了解并参与到活动中来。


小红花爱心账户


用户还可将积累的小红花兑换周边礼品。在推广上则从创作入手,发起共绘小红花的活动。



可以说,小红花串联起了用户从感知、到行动、到反馈的全流程,保证了用户参与互联网公益的动机和动力。

在预热推广阶段,腾讯公益推出一支小红花为主角的宣传片,试图为小红花是什么,做出来自官方的定义。

不管是线上线下征集用户绘制的小红花,“每个人的小红花”画展,还是在感恩日随证书送出的小红花画作,都让用户全方位地感受到腾讯公益小红花的“玩法”,也为小红花元素赋予了丰富的内涵。

征集到的部分小红花作品


寄出公益荣誉证书


爱心用户的开箱视频


99公益日期间,小红花与腾讯新闻、微保、腾讯视频、腾讯会议等多产品的玩法联动,让小红花开遍“地球村”。


多款产品联动一块做好事


而在线下,小红花也伴随系列广告,落地在线上下,IP联盟、异业合作、核心城市灯光投影秀等,让小红花无处不在。


部分城市地标灯光投影秀


最后,小红花这一品牌形象的成功,不仅在公益设计这一领域上有借鉴的意义,在品牌IP的设计上同样有值得学习的地方。

文章来源:站酷  作者:零弟小武
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

为什么越简单的设计越说不出理由

ui设计分享达人

常见场景


设计师日常工作中,经常遇见的那些显而易见的设计逻辑,却难以给出设计理由的情况到底指的是什么呢?


以我自己近期的工作为例,不妨为大家举个简单的例子:


下图是一个补贴规则的设置流程,在用户未设置补贴规则之前,明确告知用户还未设置补贴规则,当用户设置了补贴规则后,可以对补贴规则进行修改。



我认为这是一个非常简单且合理的页面路径跳转,并且在很多现有的产品中都有类似这样的逻辑存在。然而在与上下游同学对接的过程中,却遇到了不同的意见:有人认为没有必要区分用户是否设置了规则,用户未设置规则可以直接展示系统默认的补贴条件和补贴范围,如果用户认为不合理,自行修改便是。

不知道大家看到这里是什么感觉,我在听到「方案二」时的反应是:能够理解却并不认同,说不出来哪里不对,就是觉得这事它不应该这样。


以上,就是在我工作中发生的一次非常具体的案例。


直觉真的不如推理靠谱吗?


那么为什么我会产生“感觉哪里不对,却又说不出为什么”的强烈感受呢?


最直接的原因是,这样的设计方案(方案一)是用直觉做出来的,缺少了对方案本身的思考。


直觉,指的是那些没有经过分析推理的观点,因此常常给人一种不靠谱的感觉。


可是有时候我们依赖「直觉」做事真的就完全不靠谱吗?带着这样的疑惑,我去查阅了一些相关的资料来辅助我更好理解这种直觉性思考,恰好找到了一个真实的实验案例:


1997年,Bechara, Antoine et在一个赌博游戏实验中发现:「直觉」比「意识」更能指引正常人做出有利的的选择。

该实验先后邀请了10名正常人和6名前额叶损伤的决策缺陷患者,以探究人们做出正确选择是在对相关知识进行推理之前还是之后。在游戏开始前,工作人员给予每位参与者2000美金、发放4副牌,要求参与者在游戏过程中翻出100张卡片,并尽可能的多赢钱,但他们不会告知参与者每副牌中的卡片价值:从A、B两副牌中翻出正常的卡片能赚100美金,C、D两副牌中的正常卡片值50美金,同时每副牌中也隐藏着罚款,A、B两副牌中的罚款比C、D两副牌的罚款重,参与者很可能会输光所有的钱。

实验结果显示:正常人在意识到哪副牌赢面更大之前就开始选择有利的卡牌,而决策缺陷患者即使知道了正确的策略,却仍然继续选择对自己不利的卡牌。


根据上述实验,我们起码能发现直觉未见得不可靠,也就是说,凭借直觉出的设计方案,并不意味着不是一个正确的方案


可是在日常沟通协作的过程中,「直觉设计」一旦遇到不同的意见,就会缺少理论支撑。决策者无法判断设计师的直觉是否可靠,从而觉得方案本身也不可靠。


遇到这种看似「死胡同」的情况,我们应该怎么去思考呢?


很简单,直觉在前,策略性推理在后


乔纳森•海特(Jonathan Haidt),著名社会心理学家,在《正义之心》中有提到:


判断和论证是两个相互分离的过程,直觉与推理的关系就像大象与骑象人,骑象人(推理)骑在大象(直觉)上,骑象人不断发展以服务于大象。


拿上述的方案来说,当我面对这类的质疑时,我也会有愣住,但我知道我不能惊慌,而是该让骑象人(推理)表演了。


其实仔细分析一下上述案例就会发现,方案一和方案二最本质的区别在于:


是否需要区分用户(商家)自行设置过「补贴规则 」?


百度百科对规则的定义是:


规则,一般指由群众共同制定、公认或由代表人统一制定并通过的,由群体里的所有成员一起遵守的条例和章程。


规则本身是属于利益相关者之间的约定。按照这个逻辑,「补贴规则」可以理解为用户(商家)与消费者形成的基本约定


用户(商家)未设置规则,如果系统直接展示默认的补贴条件和补贴范围,就会给用户(商家)一种平台借以商家的名义与消费者形成了约定的印象,这与现实不符,甚至可能给用户(商家)的业务带来不必要的纷争。因此,区分用户是否设置过补贴规则是非常有必要的。


为什么要为自己的设计辩护?


在上述场景中,虽然我的直觉先于理性给我发送了信号,但设计师如果光依靠直觉却给不出任何说明,同样会带来一系列麻烦。


汤姆·格里弗(Tom Greever)在一篇文章提到,伟大的设计往往取决于你怎么说


描述设计不是一件容易的事情,但每个设计师都不得不向很多没有设计经验的人讲述自己的设计,并且要让他们信服自己是对的,这群人很可能是方案的决策者。决策者通常会选择那个听上去最合理的方案,所以方案的表述对于最终方案的确立至关重要。


普通设计师和顶级设计师之间的差距不仅仅是他们解决问题的能力,还在于他们能否用一种让人心服口服、并促使人们同意的方式来阐述他们是怎么解决问题的。理论上,最好的设计应该胜出,然而事实并非如此,设计评审很容易变成设计批判会,每个人都在告诉设计师要怎么设计。


最终,那些能够说服别人“我是对的”的人会胜出。设计师如果没有办法说服别人为什么他们要这么做,就不得不按照他们不同意的方式去修改设计,原因仅仅是因为他们没有办法简要的为自己的设计辩护


听起来似乎这些决策有失公允,甚至成了设计师的辩护大会,那么对于一些有着出色能力却不善言辞的设计师而言,就真的没有任何方法了吗?


如何突破直觉,能言善辩?


设计师要想守卫自己的设计,就要警惕那些单凭设计直觉做出来的方案。


设计直觉的形成与个人经历、阅读经历相关。遇到相似的问题,设计师如果有这方面的经验固然是好的,直接复用之前的做法可以大大提升设计效率。但我们完成设计后,最好想想哪些地方存在路径依赖,以确保自己的方案能经得住质疑。


一个最实用的可以判断自己的设计方案,是不是由直觉得来的,就是多向自己提问


同样,我们来用实际的案例做个说明:


想想下图中「智能上传」「更多操作」按钮放在表格的左下方行不行?


很明显不行,但重点是支持这么做不行的理由是什么?


如果你的理由是:


“别的页面是将按钮放在了列表左上角的”

“放在左下角不好看呀”

“没见过有产品这么放啊”

“......”


那这个方案就是直觉设计的产物了。


想要突破直觉设计,设计师需要尽可能在每个设计点上多思考几步,比如:


为什么别的页面会将按钮放在左上角?


根据2006年NNGroup 在眼动实验中的发现,人们在网络中的阅读成F型,即用户进入页面中的第一眼,通常会落在页面的左上角,也就是说左上方的区域是页面的黄金区。「智能上传」「更多操作」属于页面的核心操作,那么放在列表左上方是非常合理的。


此外,我们可以看到页面的翻页器是可以筛选列表展示的条数,假设用户设置的条数,超出了屏幕显示范围,也就意味用户进入到页面会看不到操作选项,所以按钮放在表格的左下方也是不合理的。


为什么别的页面按钮放在左上角这个页面也要这么做?


因为我们需要保障产品的一致性,产品的核心操作方式保持一致,可以有效地降低用户的学习成本,避免不必要的思考。


总结


在设计协作的过程中,设计师不可避免地会接收到来自四面八方的声音,而我自己也曾在设计沟通中陷入过类似困境,因此我越发明白只有清晰地表述出自己的设计思考,才可能赢得每个人的支持。


  • 凭借直觉出的设计方案,并不意味着不是一个正确的方案。

  • 直觉在前,策略性推理在后。

  • 顶尖的设计师,也是顶尖的交流者。

  • 要想守卫自己的设计,就要警惕那些单凭设计直觉做出来的方案。

  • 多向自己提问,以确保自己的方案能经得住质疑。


以上是关于这篇文章的关键思考总结,回到设计师个体而言,我认为我们需要对直觉设计保持警惕,因为看似简单的设计背后往往蕴含着复杂的设计原理,而一个好的设计师除了拥有过硬的设计能力,强大的设计思考力和表达能力以外,我相信同样在跨学科的研究和学习上会远强于普通设计师,否则根本无法支撑起背后的设计思考。

文章来源:站酷  作者:范思蜀
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


全面总结图表设计的思路和方法

资深UI设计者

数据成为了日常工作的一大重要角色,越来越多的公司以数据驱动产品进行迭代。但令人困惑的是可视化图表无处不矮,但却给大家带来了误导。作者分享了一些简单的思路与方法,以此来改善这些问题,希望对你有所帮助。


越来越多的公司以数据驱动产品进行迭代,从中我们能看出数据的重要性。

日常工作中,无论是汇报还是设计,都离不开图表的使用。但令人困惑的可视化图表无处不在,往往给人带来误导性,通过遵循下面这些简单的思路和方法可以有效改善这些问题。

一、选择正确的图表类型

选择错误的图表类型,或默认使用最常见的类型,可能会混淆用户对数据产生误解。

一组数据可以有多种表示方式,具体类型取决于用户希望看到的内容。

二、根据正负值确定方向

当数据中出现正负值时,要先确定基线的位置,再确定数据位置,将正值分布在基线上侧(X轴)或右侧(Y轴),负值分布在下侧(X轴)或左侧(Y轴)。

避免在基线的同一侧同时添加正值和负值,造成用户对图表信息理解错误。

三、始终从零开始绘制条形图

单看左侧的条形图,能发现B的值比D的值要多3倍以上,但在右侧从零开始的条形图中,实际差异要小得多。从零开始可确保用户获得更准确的数据展示。

四、折线图使用自适应Y轴

对折线图来说,如果始终将Y轴的比例限制为从零开始,一旦数据波动幅度很小,那整个折线图会看起来很平坦,效果不明显。

折线图主要用来表现趋势,根据给定时间的数据调整比例,并保持折线区域能占到Y轴范围的三分之二。

五、使用折线图时考虑时间间隔

折线图是由一条条小线段连接组成,这些线段展示了在短时间内数据是如何变化的。当时间间隔很大或数据更新不频繁时,就要慎重考虑是否使用折线图。

例如想表示年收入,左侧的两个折线图样式都不太合适,每个月的收入是固定的数字,而折线图展现的数据更像是收入的变化,相反右侧的条形图更适合来展示每月具体的收入。

六、不要使用平滑的折线

平滑的折线图可能看着很舒服,但它们歪曲了背后的实际数据,而且过粗的线条掩盖了真正的节点。

七、谨慎使用双轴折线图

当两组数据出现X轴代表的信息相同但Y轴不同时,为节省空间我们可能会考虑用双轴图。

但大部分双轴图难以阅读,只是感觉图表上有很多数据,但远远没有单个图表展示的清晰。

八、限制饼图的切片数量

饼图是最受欢迎但经常被误用的图表之一。在使用饼图时,首先要注意切片的数量最好保持在5-7片。

如果还有很多占比很小的切片,可以将这些全部归到“其他”切片中。

九、直接在图表上标注

如果没有正确的标注,无论图表设计的多好看都没有意义。

直接在图表上标注数据或信息对使用者来说更直观,更节省时间和精力。

十、不要在切片上标注

将数值放在切片上虽然很直观,但可能会导致很多问题,例如左侧饼图数值的可读性问题、切片太薄无法添加数值等,对比来看,右侧饼图添加标注的方式更合适。

十一、饼图切片的排序

饼图切片的排序是一个很容易忽略的问题,将饼图切片只是一个开始,通过合理的排序保证用户清晰观看图表才是关键。

常见的排序方法是将面积最大的切片放在12点钟位置,然后按顺时针降序放置第二大的切片,以此类推。

十二、避免随机性

同样的建议适用于其他类型的图表。尽量不要默认按字母顺序排序,将最大值放在顶部(水平条形图)或左侧(对于垂直条形图),以确保最重要的值占据最突出的空间,减少视线运动和阅读图表所需的时间。

十三、避免极端的环形图

环形图,又称为甜甜圈图,是饼图的一种变体,本质是饼图将中间区域挖空,用在多样品间的多种数据的比较中。

虽然环形图腾出中间区域来显示额外的信息,但牺牲清晰度走极端会让图表变得毫无用处。

十四、让数据自己说话

不必要的设计样式不仅会分散注意力,还可能导致用户对数据误解并产生错误印象,图表在设计上应避免:

  • 3D元素、阴影、渐变;
  • 斑马纹、过多的网格线;
  • 装饰性过强的斜体、粗体或衬线字体。

十五、选择与数据性质匹配的调色板

颜色是保持数据可视化有效的组成部分,在设计时考虑3种调色板类型:

  • 分类色板(左)适合显示分类数据,当你想区别不连续且内在没有顺序关系的数据时可以使用这种类型;
  • 连续色板(中)适用于需要按特定顺序放置的变量中,使用色调/亮度或两者组合创建色板。
  • 离散色板(右)是两个连续色板的组合,中间有一个中心值(通常为零)。不同的调色板会传达正值和负值。

十六、无障碍设计

根据眼科研究中心的数据,大约每12个人中就有1个色盲,图表只有在广泛受众可以访问的情况下才是成功的:

  • 在调色板中使用不同的饱和度、亮度;
  • 黑白打印可视化图表,检查对比度和可读性。

十七、注重易读性

确保图表排版在传达信息并帮助用户专注于数据,而不是分散注意力:

  • 选择字迹清晰的字体,避免使用衬线和装饰性很强的字体;
  • 避免使用斜体、粗体和全部大写;
  • 确保文本与背景形成高对比度;
  • 不要旋转文本。

十八、使用水平条形图代替旋转标注

这个简单的技巧可以确保用户能够更有效地浏览图表,而不会使他们感到紧张。

十九、建立图表库

如果你的任务是将交互式图表添加到Web和移动项目中,那么首要考虑问题是将使用什么样的图表?

基于定义的库(Highcharts)进行设计将确保易于实现,并为我们提供大量的交互想法。

二十、超越静态报告

通过更改参数、可视化类型、时间线帮助用户进行探索,得出最大价值化的结论。例如IOS Health结合使用了各种数据表示来发挥优势。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:人人都是产品经理  作者:Clippp
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



2021 必备的超赞神器,用上它,效率都要提升三倍!!

seo达人


图片
上图就是这个神器制作出来的一些效果,之前看Dribble上面有很多类似的设计,现在终于知道它们大部分来源于这个神器。
下面我也找了一些案例,大家一起来看看。
图片
图片
图片
这样看,效果还是真的不错,它支持颜色修改、样式修改,目前一共有11种几何样式。
图片
好了,现在下面正式介绍这个传说中的神器,我相信大家一定会喜欢上的。
图片
上图就是这个神器的基本外貌,一共11种基础类型,当点击其中一个进去后,可以进行编辑。
这里我点击上图中的第二个模式(MIXTAPE)进去。
图片
如果大家英文不好,可以将整个页面翻译成中文,Google自带的翻译
进入这个页面,大家可以根据自己喜欢的风格调整样式,同时还可以修改颜色。
图片

比如我可以选择8X12列和行的几何布局。

图片
对颜色、列和行、开启阴影调整,得到如上效果。
图片

最终可以导出一张高清大图(3240X4860),尺寸是完全够用的。

图片

随便调整下又是一张不错的几何背景,还可以作为作品集封面。好了,关键时刻来了神器的网址已经打包好,大家可以拿去使用。

领取方式如下:添加小编微信,备注:神器699,小编会将下载地址发给你(小编不是机器人,回复会慢一些,大家稍等)。

 

原文地址:功夫UX (公众号)
作者: 功夫UX
转载请注明:学UI网》2021 必备的超赞神器,用上它,效率都要提升三倍!!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


配色不协调?来看看“邻近色”搭配

seo达人


01 邻近色的定义

顾名思义邻近色是色相环中色相相邻的颜色,相对单色对比,邻近色对比增加了色相对比,因此视觉效果更丰富。

图片

邻近色在色相上比较接近,色彩的冷暖属性,还有情感特性上都比较类似,所以邻近色搭配能很好的保持画面的协调与统一,是设计中使用频率最高的配色方案之一。

 

 

图片

黄色与橙色相配具有很和谐的过渡感,由于橙色和黄色都非常明亮鲜艳,很容易营造出轻松快乐的氛围,充满活力,让人兴奋愉悦。

图片

图片

图片

 

 

图片

橙色和红色是充满活力和激情的颜色,经常使用在促销等表现出热闹、愉快氛围的设计中。

图片

图片

 

 

图片

红色和紫色搭配是高彩度、但明度相当低的色彩搭配,在使用上注意不宜让画面过度暗沉。最好适度地提高色彩的明度和搭配高明度的色彩来增加画面上的层次感。具有浪漫、华丽、高贵感。

图片

图片

图片

 

 

图片

蓝色和紫色明度很接近,对比比较柔和。神秘梦幻的紫色搭配上和科技感十足的蓝色,显得十分前卫时尚。是蒸汽波、波普艺术、赛博朋克等前卫时尚风格常用的配色。

图片

图片

图片

 

 

图片

蓝色明度低,绿色明度高,所以蓝绿配色即协调统一又有很强的对比。让人联想到蓝天绿水之美,感到平静,放松,给人清爽舒适感。

图片

图片

图片

 

 

图片

黄绿色是调和性相当高的色彩组合,黄色搭配清新的绿色,是自然界中很常见的色彩组合,具有自然的呼唤感,新鲜而又清澈,显得朝气有活力。

图片

图片

图片

图片

 

02 邻近色配色的方法

接下来使用在线配色工具:Adobe Color来进行配色示范色。(网址:color.adobe.com

在调色规则中选择“类比”。使用橙色为基础颜色,会自动生成四个关联颜色,筛选适合的颜色配置到画面中,就能很快完成配色方案:

图片

和单色系相比,邻近色在色相方面会稍微丰富一些,但仍然存在色调过于单一、对比不够的问题。一般会拉开颜色之间的明度或纯度,形成明暗对比,衬托出主体。

图片

邻近色还可以结合不同明度和纯度来使用,让画面呈现出层次变化,展现出不同的气质和视觉效果。

图片

图片

图片

 

03 总结

邻近色在色相上比较接近,色彩的冷暖属性,还有情感特性上都比较类似,所以邻近色搭配能很好的保持画面的协调与统一,是设计中使用频率最高的配色方案之一。

邻近色存在色调过于单一、对比不够的问题。一般会拉开颜色之间的明度或纯度,形成明暗对比,衬托出主体。

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》配色不协调?来看看“邻近色”搭配

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



学会“邻近色”配色,搞定配色难题(实操篇)

seo达人



图片

 

邻近色配色实操-案例1

在PS中新建文件,背景选择红色,英文放大铺满背景,颜色选择红色的邻近色橙色。

图片

画出白色圆角矩形,给矩形添加图层样式“描边”和“投影”。描边的填充类型选择“渐变”,颜色选择白色和浅橙色的渐变,模拟玻璃边缘的厚度。

图片

图片

接下来制作毛玻璃效果。复制背景和文字图层,合并为一个图层。分别给此图层添加三个滤镜“模糊-高斯模糊”、“滤镜库-扭曲-玻璃”、杂色-添加杂色“,效果如下图:

图片

把图层移动到矩形图层上方,按快捷键“ctrl+alt+g”建立剪切蒙版,使毛玻璃效果只在矩形范围显示。

图片

最后加上文案排版,设计完成。

此案例使用了红色和橙色的邻近色配色,橙色和红色是充满活力和激情的颜色,能呈现出热闹、愉快的氛围。

图片

 

邻近色配色实操-案例2

方案二,在PS中新建文件,在背景上用绿色和黄色的柔和画笔随机画出颜色。

图片

使用“模糊-高斯模糊”让背景颜色更好的融合在一起,再执行“杂色-添加杂色”给背景增添质感。

图片

图片

图片

最后加入文案,颜色采用绿色和黄色,明亮的黄色搭配清新的绿色,新鲜而又清澈,显得朝气有活力。

图片

 

邻近色配色实操-案例3

方案三,在AI中输入英文,字体选择一款设计感较强的“Current”做为主体。使用蓝绿色搭配,蓝色明度低,绿色明度高,所以蓝绿配色即协调统一又有很强的对比。

图片

把英文转换为轮廓,给每个字母加上不同角度的渐变色,颜色沿用蓝绿色。

图片

最后加上文案,进行排版,设计完成:

此案例使用了蓝绿色的邻近色配色,让人联想到蓝天绿水之美,感到平静,放松,给人清爽舒适感。

图片

尝试新的配色,使用蓝色和紫色搭配。蓝色和紫色明度很接近,对比比较柔和,具有神秘梦幻感。

图片

红色和紫色搭配显得浪漫、华丽、高贵。

图片

 

优秀作业展示

以下是从本期投稿中选取的11份优秀作品:

01 『聪_cong』

图片

 

02 Anna

图片

 

03 NIAN廿七

图片

 

04 NoctilucaGladys

图片

 

05 Trista~Z

图片

 

06 蛋蛋DAN

图片

 

07 金角设计

图片

 

08 孔艳茹

图片

 

09 龙娟

图片

 

10 珞影随行

图片

 

11 咪奥mao

图片

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》学会“邻近色”配色,搞定配色难题(实操篇)

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



资源分享|两款B端设计走查神器

seo达人

Copiexl

图片

这是一款 字节跳动 出品的高效走查插件,它的原理十分简单,首先打开需要校验的线上项目;接着上传你的设计稿图片;然后通过降低设计稿的透明度,达到项目快速走查的目的。开发哪里有问题,一眼便知。简单教大家如何 安装使用 这样一款插件:

图片

 

1.安装方法:

首先打开软件的官方网站(https://copixel.bytedance.com/),点击免费下载(这里只支持Chrome浏览器,如果你是Safari 、Firefox、Opera等浏览器,在官网往下滚动,同样也是提供了下载入口)。

点击下载过后,就会跳转到 Google 的应用商店当中,点击安装即可,与浏览器插件的安装方式类似(这里需要科学网络,如果你访问不了 Google应用商店,可以直接在公众号后台回复“设计走查”,提供了另一种安装方式)。

 

2.使用教程

01.选择合适的页面设计尺寸

建议按照主流窗口尺寸的宽度设计,如:1366px、1440px、1920px;推荐最小设计尺寸使用1366px、1440px,最大设计尺寸1920px(宽)。目的是按照 1:1 导出设计图,与开发页面显示效果一致。

图片

02.该如何输出设计稿?

Copiexl 浏览器插件的原理是将你的设计稿 悬浮在前端还原的页面当中进行对比,这样就能快速知道自己的设计页面有何问题。

因此我们需要将设计稿进行一次性导出成 PNG 文件。这样可以批量导入到插件当中,直接切换设计稿提高走查效率。

03.如何使用

打开前端实现好的页面,使用你刚刚安装好的浏览器插件“Copixel”,添加UI设计图。

通过调整设计图位置、大小和透明度使其与开发页面高度重合,配合 有截图标注功能的软件(比如:Xinp)进行找茬标记。使用 走查文档 标记存在问题的地方并说明问题,这样就能高效完成项目走查。

然后将有问题的走查内容直接分享给开发即可。

 

插件使用的视频方法:

转载至Copiexl帮助文档

 

CSS Peeper

这是一个 设计走查 / 样式复制 / 资源下载 的效率神器,它能够轻松查看网页端当中所有元素的CSS属性,并且不需要像Chrome浏览器那样 “右键” – “检查” 浏览器元素,然后在许许多多的代码当中寻找你需要的CSS代码。我们只需要点击插件,选择元素就能够快速检查样式。

图片

 

场景一、设计走查

比如当前端工程师完成页面过后,需要设计师进行一个页面的走查,这个时候很多同学往往就会靠着自己的像素眼进行一一的比对,如果稍微有点经验的B端设计师会打开浏览器自带的检查,进行元素的核对。
然而浏览器自带的检查其实更多是面向程序员进行设计的,对于我们设计师而言,能够看懂的却只有一小部分内容,显然检查的效率并不会太高效。

图片

这时候使用CSS Peeper,就可以轻松对网页当中的CSS样式进行检查,我们不仅可以看到元素的常规属性,比如颜色、背景、间距;还可以看到元素的盒子模型,可以看到元素的 Padding、Margin…

通过这个插件,就能清晰的看见开发究竟是在哪一部分还原出现问题,并且能够很“欠揍”的在他面前秀一下~

图片

 

场景二、样式复制

对于设计师来说,就不用再去纠结竞品究竟是如何设计?如何还原出来,因为任何网页上的元素,你都可以通过这个插件,去查看他的还原思路,并且知道它的设计样式以及属性
同时可以点击颜色或者图片,将该页面用到的所有颜色或者图片总结出来进行汇总,可以导出,方便在设计风格上进行分析。

图片

 

场景三:资源下载

使用CSS Peeper 能够快速查看在该页面当中,所用到哪些图标、图片。并且可以将这些资源快速下载到本地进行保存。这样你就可以成为资源小能手。

图片

这也就是我工作当中最常使用的插件,你最常使用什么插件?一起来分享聊聊!!

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》资源分享|两款B端设计走查神器

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



火爆全网的酸性设计,你看懂了吗?

seo达人


毕竟这种风格的核心就是挑战传统的美感和欲望的定义。整个风格迷幻抽象、打破常规、高度失真或者超现实的视觉风格,完完全全地向观者展现着一种潮流先锋的态度。今天我们要聊一下酸性设计的主要特点,方便大家快速掌握!

图片

 

01.特殊质感

酸性设计中一个很重要的特点就是往往包含大量的特殊质感,例如液态金属、镭射、铝箔、玻璃、塑料或折射等等质感。这些特殊质感都给我们一个共同的感官,那就是科技感和未来感。这也是酸性设计之所以能代表潮流和先锋很重要的原因之一。

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

02.高饱和色彩

酸性设计往往充斥着大量鲜艳、高饱和的色彩,包括各种高饱和度的渐变色、迷幻绚烂的霓虹色、让人眩晕的荧光色等等。还常常配上暗黑的背景,画面混乱又统一,充满矛盾的迷幻感。这种让人眩晕、充满感官刺激、打破传统美感标准的色彩,也充分体现了这种风格的调性,充满了探索的先锋精神。

图片

图片

图片

图片

图片

图片

图片

图片

q

03.打破常规的排版

酸性设计的排版看起来很难找到固定的规律,充满了随机性,似乎毫无章法,同时画面饱满丰富。但是仔细观察就会发现,它的构图方式其实是高度几何化的,通过几何图形的不断重复、剪切,形成看起来复杂无序的组合方式,从而体现酸性设计的流动感。

酸性设计就是这样通过破坏性的方式打破传统对美感的定义,引领了潮流的定义、创造一种新奇又让人欲罢不能的风格。

图片

图片

图片

图片

图片

图片

图片

d

04.装饰性字体

酸性设计所采用的文字特点也十分鲜明,通常都十分具有装饰性,造型或尖锐或富有流动性,例如哥特风字体等。搭配上如同被强酸腐蚀过后液态金属的质感,充斥着危机感和刺激感。

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片


 

原文地址:设计师深海(公众号)

作者:设计师深海

转载请注明:学UI网》火爆全网的酸性设计,你看懂了吗?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



腾讯设计了一朵小红花,也太好看了吧!

seo达人


在腾讯公司滨海总部的公益文创市集上,看到一组设计,这些都是来自腾讯的设计师与WABC无障碍艺途的“小朋友”们一起创作的小红花。这些对小红花丰富的场景想象里,充满了爱,充满了温度。提到设计,大家这几年聊的比较多的UX设计、UI设计,但是对于公益设计却关注不多,公益设计相对于产品设计不同,它的每个设计背后都有一个动人的故事,今天我们一起来聊一聊公益设计。看看有哪些不一样的地方?今天我拿业内做的比较好的,腾讯公益的99公益日为案例,和大家聊聊公益设计如何去做?
图片

 

01.  通过跨团队合作保证一致性 

图片

 图片来源:腾讯CDC公众号

d

公益设计是一个大的系统设计,和做产品不一样,产品流程大家都知道,产品立项、交互设计、视觉设计、前端走查等等环节,但是公益设计,需要很多团队一起去推动,除了产品设计,还需要有市场团队、公关团队,包括整个的设计策略都有不同,相对于产品设计只需要和开发、产品、运营对接不同,公益设计需要对接的角色非常多,需要设计师有非常强的项目把控能力,以及对于项目落地后结果的把控能力。所以设计师在做公益这样的项目的时候,一定要做好项目管理,包括各个对接方时间排期规划等等,都要求较高。

·

02.  通过全局联动形成品牌感 

图片

除了对接人多以外,在设计落地上,产品设计更多在线上移动端或者H5,但是公益设计的落地场景却很广,包括电梯广告、地标广告、直播物料等等。

整体的设计链路线上到线下更为立体,所以在做公益设计的时候,需要考虑更多的一致性,如何让设计联动起来,如何让用户更有体感是非常重要的。

图片

图片

图片

图片

 图片来源:腾讯公益

a

公益设计的联动一定是多维度的,得让用户充分的感知,因此除线上直播、H5以外在用户能触达的各个场景都要覆盖到,比如机场、地铁等等。

在做线下推广时,每一张海报、每一次传播都有它的设计规范,腾讯也公开了这些设计规范,可以用来参考和学习.

图片

图片

图片

 小红花联动

e

除了线下运用,线上也需要联动,公益设计需要线上线下一起发力,如何让线上设计做的有趣好玩,让用户用参与感,是设计师需要思考的。如上图的H5场景,通过趣味化设计,答题得小红花场景,让用户参与进去,体现出更多的温暖和温度。

于一个产品,其实最难的是,这个产品如何和其它产品进行联动,同时也不违和,非常考验设计师的整体把控性。比如最近比较流行跨界玩法,很多品牌都会和一些时尚品牌进行合作,让产品有更多和年轻人交流的机会,让年轻人感觉到公益的魅力。

 图片来源:腾讯CDC公众号

a

腾讯公益这块是做的比较不错的,我仔细看了看2020年与2021年的IP连萌行动的一些IP形象,可以看到不论是腾讯的QQ企鹅、微信汽泡狗,还是腾讯动漫的狐妖小红娘、海尔兄弟、敦煌神鹿等,尽管画风差别不少,但小红花人与他们的联合却一点也不违和。

图片

 图片来源:腾讯公益

k

另外,小红花人的出现某种程度上还代表了腾讯公益俘获年轻群体的诉求。公益对于年轻群体关注度虽高,但参与度低,腾讯公益也一直在寻求解决的办法。而小红花人走到B站,去到了奈雪、喜茶的店里,与更多的年轻人沟通交流,正是把他们带回腾讯公益的平台上。 

图片

我当时看见这个广告的时候就深深被吸引,一起做好事这个主题也很轻松,在我喝一杯奶茶时候,还可以做一件公益好事,让我觉得这个设计非常有温度,公益设计一定要结合场景,让用户舒服的同时,品牌的温度和鲜活的形象也会更深刻。 

a

03.  通过IP符号打造形成记忆点 

图片

 图片来源:腾讯公益

d

在推出小红花IP后,怎么保证这些设计的一致性,打造出高度一致性的传播矩阵。别看这张海报看着很简单,其实一点不简单,首选图形上,大家第一眼记住的是什么?是不是和我一样,一朵小红花。的确如此,用户能记住的除了画面,就是符号。

图片

 图片来源:腾讯CDC公众号

a

就比如今天我们提到苹果你能想到什么?是不是苹果的LOGO,提到NIKE你会想到什么,是不是那个对勾,能看得出腾讯设计团队,也是想把品牌打造成符号,上图是他们的标志每年变化过程,我们能看见字体的变化、构图变化,但是唯一不变的就是这朵小红花。 

图片

图片

图片

 2019-2021年99公益日主视觉

w

这么多年的设计,品牌的延续感非常的强,始终围绕着这个小红花的超级符号打造整体风格,让我想起了以前上学时候,表现好,老师会给我们发一朵小红花的场景。虽然每年小红花有一些变化,但是对于温暖情感的传递,都没有变。比如18年主视觉,围绕汇聚概念做整个设计,很多爱心小花凝聚在一起,小的爱心变成大爱,和主题非常贴切。 

d

04.  赋予品牌温度和情感 

图片

图片

 图片来源:designforgood.qq.com

w

腾讯的设计团队不仅针对小红花设计了表情包,同时还在很多地方,立体地打造了小红花的形象。而这些小红花,就是用户参与到互联网公益最大的理由,在告诉用户“做好事得小红花”的同时,用户累计的小红花又给予产品体验的有效反馈,用户参与互联网公益的动机和动力得以确定。这一朵小红花,串联起了用户从感知、到行动、到反馈的全流程。  

图片

小红花通过这些年的打造,主视觉将手绘的花作为重点元素,根据不同公益活动类型去设计不同的KV,搭配一些手写的字体,让用户第一感受就是温暖,通过我们的公益行动绘制出一朵朵有爱的小红花,这些小红花背后都是一个个暖心故事。好的品牌一定是要不断曝光,才能在用户心中形成心智,那些伟大的品牌都是如此。 

图片

在2018年99公益日的主视觉上,可以看到无数爱心化为花瓣,汇聚成一朵小红花。这是小红花形象第一次登上腾讯公益的平台。

图片

欢迎围观小红花的首支散装舞蹈。#99公益日 热情似火,遇到我就别错过我!攒小红花能赢更多配捐,还可以兑换福利哟!

2019年的99公益日,不仅小红花之歌出现了,节日期间用户向好友发起集小红花的自发传播,从而为自己的捐赠争取更大配捐额,形成腾讯公益全新的社交玩法。

图片

图片

2021年,随着99公益日扩展为10天,配捐额也随之放大,用户可以每天到腾讯公益平台做好事打卡。同时,小红花“积分”也可以兑换公益农产品和小红花相关纪念品…… 

图片

小红花表面上的成长背后,离不开产品策略与设计的支撑。更轻量与丰富的“玩法”注入,如捐赠会议时间,捐赠腾讯视频积分等,拓宽了用户获取小红花的方式;而公益节日的时间点也同步延伸至每年的春节、“520”等时间段,拓宽了用户“一块”做好事的活跃次数。

在用户体验与设计的推动下,腾讯公益用了4年时间,种出一朵朵开满地球的小红花。现在,小红花不仅是腾讯公益的品牌符号,也是用户每一次公益行为的印记,还是用户获取反馈的“积分”,它甚至成为用户新的“社交货币”——没有小红花不足以谈爱心。

d

05.  最后 

图片

随着社会的发展,人们对于公益的关注也越来越多,那么作为设计师如何通过我们的设计力量,将我们平时的创意和有温度的设计结合起来,是我们每个设计师要思考的。希望今天这篇文章对大家有所帮助。 


图片


g

原文地址:我们的设计日记(公众号)

作者:sky

转载请注明:学UI网》腾讯设计了一朵小红花,也太好看了吧!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



日历

链接

个人资料

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

存档