首页

品牌广告创意测试方法论

纯纯

随着媒体发展,商业广告和产品运营活动设计中,五花八门的创意层出不穷,那么如何衡量商业广告和产品运营活动设计的创意质量,如何向受众准确的传播产品的理念,如何判断用户是否接收到了产品的理念,是设计中所面临的重要挑战。因此我们需要通过用户研究来对设计效果做出衡量,在广告传播领域,针对品牌创意广告,有相对成熟的方法论实践,MEUX用研将通过本篇文章聚焦广告前测用户模型,分享该模型的指标体系及应用方式,为设计和研究工作提供借鉴思路。


///

一、品牌广告前测的价值


一支广告片的诞生通常需要经过一个漫长的阶段,从创意产生到初版动画广告,再到成片拍摄及投放,这其中的成本动辄几百到几千万。进行广告前测会为品牌营销节约大量资金,对沟通和广告创意的研究可以有效提升传播效果,避免拍摄出来的广告“自说自话”,而且在越早的阶段介入其产生的收益越大。

所以很多品牌会在初版广告成型时,会在消费者端进行测试,通过消费者对于广告的反馈和建议,来进一步修改和调整方案,最终输出广告成片和投放市场。据凯度BrandZ统计,使用广告前测的品牌比未使用广告前测的品牌每500GRP(收视率)可多卖出180万单位,且长期品牌价值也在持续增长。

///

二、广告创意前测关键指标定义


既然广告前测对于品牌如此之重要,那么我们要如何衡量广告创意的好坏以及如何完善和修改呢?接下来跟大家介绍广告前测的用户研究框架:

通过三个关键维度可对广告进行诊断:信息传递、广告穿透力、说服力。

· 维度一:信息传递

衡量广告成功与否的一大基石就是创意需要与品牌以及所要传递的信息紧密联系在一起。消费者的思维容量是有限的,所以只有最显著的最相关的信息才会被记住,因此我们要确保信息是故事线的核心或者是整支广告中最有趣的部分,这样才能使品牌/产品信息感知及记忆程度更加深刻。

信息传递通常可以问卷或访谈的方式,向消费者在提示状态下(以及无提示状态下)对信息的回忆状况来进行评估:

无提示印象:请您把这个广告的所有内容从头至尾,包括您所看到的、听到的,以及整个故事情节是如何串连起来的,都详细地描述一遍好吗?

提示后印象:这个广告留给你的关于这个品牌的印象中最深刻的是哪一个?广告还留给您其他什么关于品牌的印象吗?

· 维度二:广告穿透力

广告穿透力指标是由品牌关联度、喜欢程度、投入程度三个细分指标组成。品牌关联度是这支广告是否具有穿透力的基础,喜欢程度和投入程度则是好的广告的区隔点。

品牌关联度通过广告是不是吸引人,品牌是否能够让人记住,是否与品牌很好的连接来判定强弱,较强的品牌关联度是造就广告强大穿透力的基石;具体的实践通常使用问卷打分方法计算。

喜欢程度是通过这个广告是否使人愉悦,是否能够带动消费者的情绪来判定;具体的实践通常使用问卷打分方法计算。

投入程度则通过是否激发了消费者的兴趣和投入感来判断,具体的实践通常使用面部编码(facial coding)方法计算,受访者越投入,面部表情对广告的反应就越多,可以直接通过受访者观看视频的面部表情来衡量他们的情感反应,针对不同的情绪(如惊讶、厌恶、微笑、傻笑等),会有各自的表达力曲线赋予不同的分值。

当我们得到品牌关联度、喜欢程度、投入程度三个维度分数之后,通过将分数拟合,得出广告穿透力指数(Brand impact Index)

· 维度三:广告说服力

广告说服力由短期购买意向长期品牌影响两个细分指标组成。

短期购买意向通过询问消费者广告对其考虑该产品的购买会产生怎样的影响来衡量,具体表现在价格考虑(Persuasion Price)、行动意愿(Call to Action)维度。长期品牌影响通过询问消费者看过广告后对于品牌的印象来衡量,具体表现在品牌吸引力(Brand Appeal)、品牌独特性(Distinctiveness)维度。

最后通过将分数拟合,得出综合的说服力指标(Persuasion Score)。


///

三、广告前测指标归属

当我们得出广告穿透力指数(Brand impact Index)和说服力指标(Persuasion Score)之后要如何衡量呢?如何知道广告是否能够投放的标准呢?这时我们会将两个指标放入九宫格中进行验证,通常落在“非常好“区域的广告对于传播效果和市场份额均有较大的正面影响。

更进一步,我们也可以通过不同的细分人群来确定这个广告是否更受我们的目标人群(Target Audience)喜爱。例如某广告分别测试了不同性别的用户对于广告创意的反应,发现该广告在男性数值落在了“非常好“,但是女性数值落在了一般,这说明广告目前的创意对于女性消费者来说接受度比较低,仍然需要进一步改进。

改进的方向可从各个细分维度当中寻找线索,比如在上述例子中分析发现,在投入程度的面部编码微笑曲线中(如左图),女性消费者对这支广告中产品的呈现方式不太能接受,会感到害羞,因此大部分微笑曲线低于男性消费者,而相对来说厌恶曲线(如右图)比较高,从而导致穿透力指数较低。

///

四、结语

以上是广告创意前测指标方面的一些分享,这套方法论既可以成套使用在品牌视频广告创意中,也可以在其他的设计创意中酌情提取部分指标单独使用,我们也将秉持探索精神,随着调研目的、用户需求和市场发展变化不断迭代更新模型和方法论,更科学有效的提升设计和研究价值。

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

作者:百度MEUX    来源:站酷

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

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



用设计诠释搜索热点

纯纯

刷刷手机看看今天又发生了什么热点大事,已经成为现代人茶余饭后消遣时间的主要方式,而搜索热点区别于其他社区类产品,最大的优势是能够把大家关注的事件始末及相关知识服务快速聚合起来,帮助用户更全面的掌握信息。设计师作为连接用户与信息之间的纽带,在项目实践中也进行了系列的设计探索,除助力平台高效聚合呈现信息外,并以更丰富的设计层次诠释热点,帮助用户更便捷的获取所需。

///

设计思考及诠释方法

我们先要去了解用户是如何消费热点内容的,基于用户情景认知链路分析用户在事件消费的链路,可以分为三个重要节点:1.热点环境的感知;2.热点事件的理解;3.事件观点的产生。

结合用户的消费路径,我们将设计逻辑框架拆分为三个层级:

1.氛围背景层:分层呈现热度氛围,辅助用户感知热点环境;

2.信息内容层:精细化拼装管理,帮助用户理解热点事件;

3.功能互动层:轻互动玩法设计,激发用户参与抒发事件观点。

1. 热点环境感知:分层呈现热度氛围

从氛围表现层面,助力用户更快速的辨别事件的热度及重要程度。设计师结合搜索热点使用场景以及业务时效性配置诉求,归类了两种设计表现层次:1.日常热度氛围 2. 大事件热度氛围

1)第一个层次:日常热度氛围

主要应用于热点新闻场景,时效性要求高,同时事件热度也会在:“发酵--爆发--消退” 间实时变化,设计根据热度“强弱”程度需求,划分两档视觉展现阶梯,以自动化的方式展现,满足热度的实时变化需求,辅助用户感知当前事件热度。“低热氛围”弱标签设计用以展现上升/今日热点,“高热氛围”色彩背景通顶效果+上榜标签用以展现上榜热点。

如,“马斯克收购推特”,搜索热度持续上升,以第一阶梯-标签方式展示低热氛围;在 “马斯克收购推特” 的事件热度不断增长,成为热榜事件后,以第二阶梯 - 高热氛围自动匹配 ,通过背景及榜单标签的呈现,明确告知用户当前事件的火热程度。

2)第二个层次:大事件热度氛围

主要应用于热点大事件或运营活动场景,个性化展现要求高,同时事件关注度及重要程度也不同,设计根据事件的关注度及重要程度划分为两档阶梯,以人工配置的方式展现,超强的运营氛围,可以让用户充分感知当前事件的重要程度,“A级氛围”头部叠加场景元素设计用以展现大事件,“S级氛围”整页沉浸式视觉设计用以展现重大事件。

如,冬奥会,重大事件,选用第二阶梯 S级氛围,打造超强的运营大事件会场认知。

///

前置突发大事件氛围设计

近几年我们不断的经历各类突发大事件,如:疫情/暴雨/名人逝世等等,每次突然发生的事件都让设计师措手不及,匆忙产出运营氛围设计方案紧急上线,保时效就很难保障质量,因此我们在想能不能总结事件类型提前储备设计,以备不时之需。

不同突发事件会牵动网友不同的情感情绪,比如河南暴雨,我们为受难同胞担心,为救助工作加油,为逝者哀悼;火箭发射成功,我们骄傲喝彩;名人结婚,我们送上温馨的祝福。不同事件带来不同的情感情绪,也要求设计师要用准确的视觉语言表达。

因此我们在前置设计时也充分考虑了事件情感因素,通过对近一年突发大事件的归类梳理,并推导不同细分场景下的用户情绪,通过情绪分类的方式,总结两种视觉设计表达形式:1.实景图合成效果满足严肃/庄重/权威场景情感需求;2.手绘效果满足积极/欢快/庆祝场景的情感需求。结合以上思路我们共储备6大类20个子分类场景的前置氛围+金刚位等运营物料设计,保障突发热点运营设计质效。

截至22年Q1,前置设计已在38个热点场景应用:

2. 热点事件理解:内容精细化拼装管理

为满足用户不同事件场景下的信息需求,设计结合百度搜索:主要内容区(主要需求满足)+ 延展内容区(延展需求满足)的综合聚合能力,通过组件分区布局+精细化规则管理,为热点场景内容的高效拼装打好体验基础。

1)主要内容区

主要内容区,能够帮助用户快速了解事件的主题、时间及主要内容,结合热点事件长期的需求沉淀,设计将主要内容区又细分为主题区域及内容区域。主题区域可承载拼装事件主题、事件倒计时、会场分发导航等主题类组件;内容区域可承载拼装图文/视频/直播等事件主体内容分发组件。通过不同区域内组件拼装规则的制定,业务可以快速选择所需组件进行页面组织拼装,达成分场景个性化满足用户主需求的目标。

如:元宵晚会,热点主要内容区 以“ 晚会直播时间倒计时+ 各卫视晚会分会场导航+图文内容 ” 组件支撑起重大晚会预热期的事件主需求满足。

因为有设计拼装规则,不同大事件活动,各场景内容可个性化满足需求,交互布局设计上又可兼顾横向一致性。

2)延展内容区

延展内容区,能够帮助用户了解事件相关知识信息或提供事件相关服务。业务可根据事件场景需求,选择多个延展内容模板与主要内容区进行拼装,搭建完整页面以呈现不同热点事件内容。

如:俄乌战争-战事场景,脉络卡帮助用户快速了解事件进展 ;冬奥会-赛事场景,数据卡帮助可视化呈现赛事进展;博鳌亚洲论坛-会议场景,百科卡帮助用户科普相关名词知识。

3. 事件观点产生-轻互动玩法强化参与感

通过氛围打造和内容组织,已经达成用户需求满足的目标,但到此截止,搜索结果的体验还是理智疏远单向的,搜索场景与用户、用户与用户间也无法产生对当前热点的讨论与态度表达。因此设计师对用户的互动行为认知习惯进行分析,并采取具体的设计策略逐步引导用户参与互动。

1)互动唤醒 - 吸引围观增强互动意愿

优化前的热搜结果页,用户的讨论内容都是隐藏在资讯落地页评论区内,需要点击进内容落地页内才能参与“围观”或“讨论”,除互动氛围已脱离当前场景外,也削弱了用户对此事件表态的参与积极性。

通过弹幕滚动+输入框组件组合外显的交互设计方式,将用户讨论外露,不仅丰富热点事件搜索场景的内容维度,同时基于从众心理,进一步刺激用户的参与欲望。弹幕结合事件类型配色来更好贴合热点事件整体环境氛围。

2)情绪抒发-轻互动玩法降低互动门槛

而投票表态+弹幕轻互动组合效果设计,能进一步降低用户交互心理门槛,让用户动一动手指就可以参与其中。在表态/投票抒发情感的同时也可以发弹幕聊聊对当前热点事件的看法,使用户互动情绪表达更充分。

3)惊喜反馈-强化视效打造记忆点

原有设计风格,无法在去世祭奠、颁发勋章等庄重严肃场景精准的表达视觉情感,无互动反馈状态仅有互动前后状态变化。

结合热点场景积极外放情绪及庄重内敛情绪,视觉主要从形/质两个维度进行优化升级,并增加互动反馈动效,同时运营可结合具体事件主题配置,综合提升互动惊喜效果,打造产品记忆点。

视觉层:通过更立体的形态和更丰富的层次质感,更精准的表达情感

动效反馈层:以主图形+辅助元素,通过符合场景氛围的动态效果设计,更充分的表达情感

运营主题配置:在日常反馈基础上,增加运营主题配置层级,为特定主题场景提供定制反馈效果

///

写在最后

通过热点环境感知分层呈现、内容组件合理布局拼装满足等设计手段,助力搜索平台以更高效丰富的内容展现形态应对全年3万+热点大事件运营。会场拼装呈现系统的应用场景也在不断扩展,如营销活动、品牌造节等。设计不会止步于此,我们将基于用户需求不断探索深耕,为用户呈现更快速、准确、全面、有温度的搜索热点体验。

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

作者:百度MEUX 来源:站酷

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

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



一个播放页,QQ音乐就设计了37个功能,11种分享方式,17种歌曲海报

纯纯

一个小小的播放页,虽然看上去那么的不起眼,但为了满足各类用户人群的特定需求,QQ音乐就设计了37个功能,11种分享方式...

你是否每天都在使用QQ音乐收听歌曲,但是你有没有观察到QQ音乐的播放页其实藏着很多功能。一个小小的播放页,虽然看上去那么的不起眼,仿佛它的功能只是用来切歌、看歌词和单曲循环,但随着QQ音乐社交化、娱乐化的发展,如今这个播放页已经成为了一个重要的聚合页入口。本期「设计大侦探」的「细节猎人」,为你解剖QQ音乐播放页的37个功能,11种分享方式以及17种歌曲海报。



一、歌曲
「歌曲」是播放页的默认分类,这个分类的功能比较多,所以我把它拆分为「个性化设置」、「听歌场景」、「音乐工具」和「分享方式」四种类型。「个性化设置」和「音乐工具」为用户提供多种音乐偏好的设置,满足各类用户需求,特别是音乐发烧友;「听歌场景」则是根据场景划分听歌需求,用户可以K歌、发起跟听,甚至邀请好友一起听,把听歌的行为社交娱乐化;「分享方式」则是利用腾讯强大的社交生态优势,为用户设计了丰富多样化的分享方式和个性化海报,吸引用户分享,传播,从而拉新引流。



1.1 个性化设置
1.1.1 银河音效
「银河音效」是为了满足各种耳机发烧友对音质的追求。「银河音效」按照重低音、环绕、曲风等类型进行分类,多达数十种,完美解决各类用户人群的需求。平台还推出独家定制音效,支持适配各类品牌耳机、音响和汽车,吸引用户购买VIP会员,激活变现。另外QQ音乐还推出一个「声音实验室」的栏目,包含了智能煲机(帮助耳机快速达到最佳状态)、4D震动和动感闪光,黑科技赋能,让音乐更有趣。



1.1.2 播放设置
「播放设置」是一个为用户提供对音乐播放进行个性化设置的功能,包括无缝播放、淡入/淡出、音量平衡、智能音质增强等功能,可以满足某部分有特定音乐需求的用户。



1.1.3 播放器样式
平台为用户提供了多种播放器样式,包含了黑胶唱机(深、浅)、静态方形、旋转圆形、静态圆形、歌手写真等样式,还支持智能光效和音乐影片的播放背景,满足各类用户对播放器样式个性化设置的需求。



1.1.4 个性主题
「个性主题」为用户提供了丰富多样的主题装扮和头像挂件,包含明星、星座、影视、文艺等各种主题,当用户使用以后,整个QQ音乐的界面风格都会随之改变,这就像以前的QQ空间装扮,一键换肤,个性又时尚,深受年轻用户喜欢。「个性主题」作为为QQ会员独家专享打造的板块,是实现商业变现的重要手段。



1.1.5 收藏和屏蔽
当你喜欢某首歌曲的时候,你可以点击收藏,自动添加到你的默认歌单,这样对用户建立自己的歌单非常有帮助,从而提高用户留存率。而如果你不喜欢它的曲风,或者特别讨厌,你只需要点击屏蔽,平台在播放时会自动跳过,非常方便。



1.2 听歌场景
1.2.1 唱歌
「唱歌」是直接跳转到腾讯的另外一款音乐产品全民K歌,当用户听歌的时候突然想唱歌,那么可以直接进入全民K歌,有效降低用户的流失率,满足用户多场景的需求。



1.2.2 跟听
「跟听」是一个非常有趣的功能,用户进入跟听模式以后,可以邀请朋友加入自己的播放列表,也可以跟听其他用户的歌单。「跟听」为听歌增加了社交互动的属性,目前功能还比较简单,但让听歌的场景变得有趣、好玩。



1.2.3 一起听
「一起听」是一个社交互动式的听歌功能,用户可以邀请好友一起听歌。当朋友进入后,还支持发表情,就像一个聊天室。这就像是专门为一些年轻小情侣量身定制的听歌场景一样,平台还会为用户生成听歌记录,比如一起听歌的时间,听过的歌曲等,甚至还会生成一个心动等级,激发用户为了更高等级使用这个功能。



1.2.4 驾驶模式
「驾驶模式」非常简洁,系统会自动检测用户听歌的环境自动切换。这个功能的设计充分考虑了用户驾车时候需要换歌的场景,提供了语音找歌、个性电台、我喜欢的歌单、最近播放和电台,省去了用户开车时候不方便换歌的痛点,用户体验非常友好。



1.2.5 评论
一边听歌一边看评论已经成为现在年轻用户非常喜欢的听歌方式,在评论里,可以找到这首歌很多感人的故事,引发共鸣,勾起回忆。用户进入评论后,除了可以看见其他用户的精彩评论,还可以进入歌手的扑通小组(类似贴吧),和其他歌迷一起交流,从而增加用户时间,提升用户留存率。



1.3 音乐工具


1.3.1 片段播放
「片段播放」提供按歌词选和按音轨选两种形式,用户可以自由裁取需要循环的片段反复收听。这有点像过去我们使用MP3或复读机收听歌曲那样,功能虽然简单,但可以满足某些特定场景使用。



1.3.2 倍速播放
用户可设置歌曲播放的倍速,支持0.5x到2.0x播放,这个功能在听书的时候特别实用,非常方便。



1.3.3 定时关闭
用户在音乐播放中可开启定时关闭功能,比如15分钟、60分钟等,这个功能在助眠的时候非常方便,当你慢慢睡着的时候,音乐也随之关闭。


1.3.4 设备投放
「设备投放」就是支持音乐投放到电视等其他电子设备,当一群朋友在家里为你过生日的时候,你可以把你的歌单直接投屏到电视,让大家一起陶醉在美好的音乐夜晚。



1.3.5 设置铃声
当你觉得某首歌曲特别好听,想把它设置为铃声的时候,你不用去应用市场搜寻其它工具,你只需要进入「设置铃声」,你可以自己截取喜欢的音乐片段,系统也会自动智能截选一段精彩的铃声。在右上角提供了详细的铃声设置流程,教程非常简单。其次QQ音乐还有一个铃声专区,里面提供了海量的铃声选择。



1.3.6 查看曲谱
查看曲谱是一个非常实用的功能,对于很多音乐爱好者来说,当在某个夜晚抱着吉他想弹奏某一首歌曲,你只需要打开「查看曲谱」,里面包含了智能吉他曲谱、智能尤克里里曲谱以及五线谱/六线谱/简谱。进入曲谱后,你还可进行自由编辑,比如编辑和弦、更改时值等。这种实用不起眼的小功能,对提升用户的满意度非常有帮助,可以抢夺用户时间,降低用户流失率。



1.4 分享方式
1.4.1 分享给好友
用户可以把歌曲分享给微信好友、QQ好友,还可以通过私信方式分享给QQ音乐好友。



1.4.2 设置听歌状态
利用腾讯强大的产品生态,用户还可以把听歌状态同步到微信和QQ,这不仅可以满足年轻用户个性化的追求,还能通过外部触发拉新引流。



1.4.3 分享到社区
用户可以把歌曲分享到朋友圈、QQ空间、扑通动态和新浪微博,吸引用户分享传播,拉新引流。



1.5 歌曲海报


1.5.1 音乐卡片
「音乐卡片」为用户提供了8种精美的风格,有复古怀旧的磁带、CD风格,有黑白胶唱机风格,还有专属的VIP会员专享风格。卡片内容包含歌曲的封面、歌名、歌手、音乐指数和过去24小时收听人数等信息,目的是为了吸引更多的用户扫码听歌,其次VIP会员卡片还加入了QQ音乐豪华绿钻音乐卡片标识,彰显VIP会员地位。



1.5.2 歌词海报
在以前磁带、CD时代,抄歌词是广大音乐爱好者最美丽的回忆之一,「歌词海报」就是利用这样的分享场景,支持用户选择任意歌词,然后生成个性化的海报。「歌词海报」不仅提供了海量的背景图片,还支持用户自己上传,甚至还提供歌词字体选择,吸引用户主动分享。



1.5.3 高光视频
「高光视频」就是一段30秒的音频,提供了6个精美的模版,用户保存到手机后,可以短视频的形式分享到视频号、朋友圈等平台,和静态的海报不同,这样的传播形式更能引起其他用户的关注,从而拉新引流。



1.5.4 微信状态卡片
「微信状态卡片」为QQ音乐绿钻会员专享,为会员提供了多种精美的状态卡片,用户需要选择两行歌词,然后才能生成。这样个性化的设置同步到微信状态后,更能引起追求个性的年轻用户关注。



1.5.5 歌词视频
「歌词视频」相比高光视频,功能更丰富,首先不限制用户选择歌词数量,其次提供了风景、科幻、自然等不同主题的视频模版,而且还支持用户自己拍摄。用户还可以选择音乐播放的起点,添加视频动效和滤镜。通过这样短视频的方式吸引用户分享到视频号以及更多的短视频平台,传播拉新。



二、歌词


3.2.1 弹幕
听歌弹幕就像视频弹幕,用户可以边听歌边发弹幕聊天,这是一个年轻用户非常喜欢的功能,用巴甫洛夫效应来解释,这就是用户对源源不断弹出的弹幕充满了期待,从而增加了听歌乐趣,提升用户使用时间。



3.2.2 歌词动效
「歌词动效」为用户提供了多种个性化模版,满足年轻用户的各种个性化需求,其次也是实现商业变现的方式之一,用户需要开通SVIP才能享受更多精美的动效模版。



3.2.3 歌词设置
用户可以调整歌词的字体大小、简繁转换、调整进度,还可以制作歌词海报进行分享。其中歌词海报支持静态图海报和视频海报制作,还提供了多种精美模版,吸引用户分享传播。



三、推荐
3.3.1 歌曲信息
用户可以查看歌曲详细信息,包括歌手、专辑、发布时间以及详细的制作详情。



3.3.2 音乐指数
「音乐指数」是一个非常创新的功能,QQ音乐根据用户听歌的次数、搜索的次数制定了一个官方的指数评级。用户可以从这个页面看到歌曲的实时数据,包括今日、昨日音乐指数、全站排名、上升趋势和歌曲成就等。



3.3.3 相关推荐
根据歌曲的曲风,平台会推荐相关歌曲,这有点像私人电台;其次平台还收录了歌曲的各种演绎版本,这真的非常方便,你可以轻松切换自己喜欢的版本;最后为用户推荐包含此歌曲的歌单、节目和视频,彻底抢占用户的时间。



四、总结
QQ音乐的播放页设计,可以说把腾讯系产品设计的风格发挥得淋漓尽致。为用户提供各种丰富多样的个性化设置和音乐工具,播放器样式、银河音效、个性主题、歌词动效、曲谱、铃声,只有你想不到的,没有QQ音乐无法提供的。然后当你想要享受更多特权,你就需要付费开通VIP,这简直就是腾讯系产品的杀手锏,准备了一千种方式和场景让你很自然的掏腰包。
其次把社交基因发挥到极致。跟听、一起听、弹幕这些都是为了活跃度最高、消费意愿最强的小情侣、小年轻用户准备的。也许有部分用户会质疑,我从来不使用这些功能,但作为一个月活超过2亿的平台型产品,QQ音乐拥有众多各年龄阶段的用户,这就像上期我们分享的《顺丰速运为用户准备了18种寄件方式》一样,看似多余复杂,但其实是为了满足各类用户人群的特定需求。


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

作者:廖尔摩斯  来源:站酷

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

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



医疗行业优秀设计分享之一:app设计界面欣赏

资深UI设计者

医疗小程序Redesign
医疗小程序Redesign
医疗小程序Redesign
医疗小程序Redesign

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

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

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

如何通过SEO、SEM和微信公众号运营获取精准用户,达到最大转化

蓝蓝设计的小编

一、把SEO当作网站运营推广的手段之一,而不是全部

SEO,即搜索引擎优化。可以简单理解为通过利用搜索引擎的算法规则来提升网站在搜索结果页面的排名。当你对某一产品产生兴趣时,想要进一步去了解时,你一般会这么做?

相信很多人会通过这两种方式去了解:

  • 直接找朋友去询问(涉及到品牌知名度)
  • 自己到网上去搜搜看(针对主流搜索引擎)

而SEO,就是让用户在网上搜索相关词语时,你的网站信息能够出现在搜索结果页面的前面,从而更容易的先被用户看到。

如何利用SEO技术做到零预算让网站的精准流量成倍增长?如何使用SEO技巧为其他媒体平台(如公众号、知乎等)有效引流?

(1)找对正确的关键词

A、与公司的业务相关

分析所在行业实际情况,通过公司的相关领导、市场部、销售部了解公司具体业务。根据公司的业务范围,目标用户分布情况、行业、产品专用词汇,以及公司对客户的了解,来选择关键词。

B、符合用户的真实搜索情况

  • 当用户知道你,想要通过网络进一步了解你时,一般会直接搜索公司,品牌词来查看。
  • 当用户只是有意向或有兴趣要查找某一行业的产品时,通常会搜索产品词,行业通用词以及相应的长尾词来查看。
  • 当用户并不知道你也无意向了解时,只是在上网搜索相关的行业资料或者浏览行业资讯时,会通过某些行业通用词和人群词搜索,也可能在无意中看到你,从而知道了你并引发兴趣。

这些词的词性不同,同样也代表着搜索用户的意向程度不同。一方面可以通过百度指数等数据,另一方面可以通过用户调研,了解用户搜索喜好。

C、能够竞争得过同行网站

通过竞争对手网站选择的关键词及实力,百度指数的高低,以及同行业关键词竞争度,来了解这个关键词优化的难易度。根据自己的资源和能力选择对应的关键词,才有可能获得良好的排名。

例如,“钢琴”,“钢琴培训”,“深圳钢琴培训”,“深圳钢琴初学者培训机构”,不同的词搜索量不同,竞争程度及优化难度也不同。

选择与公司的业务相关,符合用户的真实搜索情况,具备一定的搜索量,并且结合自己的资源和能力能够竞争得过同行网站,这样的词才是能给你网站带来精准有效流量的词,而不是靠自己的主观臆断。

来源:小马宋

从SEO的角度来讲,关键词可以分为核心关键词(品牌词,产品词)和长尾关键词(其他的词、长词及由关键词组合成的词)。核心关键词通常布局网站主页,是主要的优化词。而长尾词因为竞争小,搜索量小,但更加精准,同样是SEO必须重视和研究的。

(2)网站引流主要有两种方式

A、通过提升网站关键词排名来获取流量

SEO流量=站点的展现量x页面的点击率

虽然一般网站选择的核心关键词的搜索量会比较大,但因为竞争的关系,一个网站所能优化上去的核心关键词的数量是很有限的,其排名能够占据的首页位置数量也有限,所以除了依靠网站核心关键词的排名来获取流量,我们还应该利用大量长尾词的排名来收割流量。某些长尾关键词优势发挥的效果更佳明显。

例如,一个搜索“篮球鞋”和一个搜索“耐克2018年新款男士篮球鞋”的人,谁的了解和购买意向会更加强烈?

通过对网站专题页或内容页保持持续定期的优质内容建设,做好标题关键词及文章内容关键词的布局(四处一词),注重网站的内外链优化,注重权重的传递,让尽可能多的长尾词获得良好的排名,从而得到更多的展现和点击机会。

做SEO不能单纯的只为做排名而做排名。

传统的SEO往往只是利用搜索引擎算法规则来堆砌排名影响因素,唯一的目的就是把排名做上去就行,往往忽略了网站及内容运营的重要性。

在越来越重视用户体验的时代下,SEO同样要重视分析用户的搜索需求,了解用户搜索这个关键词时是希望得到什么,根据不同的关键词来制作不同的优质的着陆页内容,不然即使把排名做上去了,用户点击后发现不是自己想要的,页面内容也不能马上吸引到他,随即关掉了,又有什么意义。

优质的内容能够吸引用户的关注和兴趣,好的内容设计是可以直接达到特定的转化效果的。

所以,通过良好的核心关键词和大量的长尾关键词排名,在搜索结果页面占据更多的流量入口,来为网站获取到大量的浏览用户。

B、通过网站外部来获取流量

许多人会在知乎里面回答问题,而在个人签名和答案里面通常会提及自己的公众号,或者品牌、产品名字等。还有就是在答案中放置相关内容或者其他推荐内容的链接,如果这个链接同样是链到知乎内的,这种链接我们称为内链,而如果是链接到知乎外的,例如自己的网站,微信文章,这种链接我们称为外链。而这就是我们利用SEO外链技巧来为网站或其他媒体平台最精准有效的引流方式之一。

巧用账号名称及签名

巧用锚文本外链做诱饵

你可以用带有关键词,或者与你网站内容相关的标题,寻找与你行业相关或符合目标用户群体特性的网站平台上,通过放置锚文本外链的方式来为自己的网站或平台带来流量。当然也要注意遵守每个平台的规则,当有些平台不给放置链接时,则用植入某些关键词或软文方式来引流。

另外,通过第三方平台,例如自媒体,论坛,门户,百度产品类,新闻源等等,有意识的选择带有特定的关键词或长尾关键词文章标题进行优质文章的编写和发布,一来是借助这些平台本身的流量,二来是这些内容很可能同样被搜索引擎收录并获得好的排名;而针对今日头条,大鱼号,企鹅号等采用算法分发机制,针对不同人群,千人千面推荐不同内容的平台,我们则要注重平台规则及用户的喜好来设置好标题风格及内容,从而获得更多的曝光率。

就这样,通过尽可能多的第三方平台,利用大量关键词、长尾词及内容形成矩阵化布局。经过长时间积累,甚至可以达到全网覆盖的效果。从而抢占更多的排名和曝光,为网站带来大量源源不断精准流量。

例如我们当时因为同行业并不注重互联网宣传,关键词竞争力度小,无疑给我们很好的机会,最终当用户搜索行业内的某些相关行业关键词时,我们的产品信息占到了60%以上,为网站的自然流量带来数十倍的增长。

当网站开始有了固定的流量后,更深入的就是分析网站流量来源及用户的浏览行为路径,停留时间,转化等,来调整网站的内容规划以及进行不同渠道的筛选。

讲完网站引流的免费方法,现在我们接下来讲另一种付费的。

二、SEM的本质就是购买精准流量

魏泽西事件发生后,虽然对竞价行业造成了很大的影响,但通过对身边很多朋友,同事以及咨询过来的用户的了解,其实大部分人依旧不懂的区分竞价和自然排名,而在非医疗类的行业,对于真正有需求的人来说,并不会在意这些,能找到需要的东西,才是最重要的。

SEM广告与自然排名的区分

1、购买流量的本质是购买有效用户

相对于SEO,SEM在创意展现和页面内容创作上更加的自由,其排名与关键词设置及出价等有关,不受搜索引擎规则影响。

竞价投放除了推广技巧,同样考究对自身产品与竞品的了解,及对目标受众群体心理的把握,从关键词的挖掘,竞价账户的搭建,再到关键词出价策略,地域、时段的投放,创意文案的编写,营销着陆页的设计引导,以及客服/销售的沟通等都会影响最终的结果。整个过程从展现,点击,访问,咨询,订单(有些行业访问后直接就到注册或下单)等各个环节转化呈漏斗形态。

来源:百度

在讲SEO时,我们提到用户会多次搜索不同的关键词来了解我们,这些词的词性不同,也代表着搜索用户的购买意向程度不同。而由于信息的多样性,大部分用户在了解信息时往往会进行多次搜索了解对比后,才会产生购买或进一步行为。

简单来说,用户在搜索阶段的转化行为就是一个需求过度的阶段。

  • 第一阶段:有了兴趣,收集信息,了解相关产品介绍 —— 搜索量大,转化低
  • 第二阶段:产品对比,集合自己需求对比优势,价格等 —— 搜索量中等,转化中
  • 第三阶段:品牌选择,已产生明确意向,有一定信任度 —— 搜索量小,转化高

从知晓-熟悉-考虑-购买的过程

这对于SEM来说,如何把握好用户在每个环节的心态,要更为注重。因为涉及到广告费用的快速消耗,SEM要更加注重最终的转化效果,如何获取更多的精准流量,减少用户在每个环节的流失率,提高每个环节的转化率,最终获得有效用户促成订单,是降低CAC(获客成本),提高ROI(投产比)的重要手段。

推广转化漏斗及各环节影响转化的因素

2、SEM如何用更低的成本,做到最大的转化?

(1)账户优化要开源节流

SEM广告展现的范围和精准程度离不开关键词的选择和出价。从漏斗的思维上看,账户的优化要把握好四个字:开源节流,开源就是打开流量,节流就是阻止无效流量。提高预算,扩宽匹配模式,降低关键词出价等都是开源的办法,而缩窄匹配模式,做好否词等则是节流的办法。

在关键词的选择上,一方面我们要最大化的圈定潜在客户群体,另一方面则要精准锁定目标客户群体。

(2)精细化的账户搭建

我比较推崇对整个账户做精细化管理,在最初搭建账户时,就对账户结构做细致的分类,例如将同一个维度的关键词进行长尾和核心划分,便于高效管理。也可以根据不同的受众心态层次,消费能力等进行关键词的划分,以目标受众群体的特征来参照。

来源:网络

(3)针对不同的关键词编写不同的创意

不同的关键词代表了不同用户的不同需求,针对不同的关键词及受众人群有针对性的编写不同的创意,多采用短句的形式,突出产品特点及目标受众的吸引点,同时注重关键词的飘红。从而获得更多目标用户的兴趣和点击。

例如奶茶加盟,有资本有投资经验的用户更注重的是投资回报率,创意中可以突出“年收入XX万”;而有些资金少,无经验的用户可能更关注的是如何用最少成本开店运营,这时创意里可以突出“0加盟费,0押金,全程培训指导”等。

(4)针对不同的创意设计不同的着陆页

可以把关键词及对应的创意做一个归类,针对不同的人群,及创意内容,来设计不同的着陆页内容。

着陆页是最直接涉及到是否能直接达到销售或转化的目的,所以着陆页的设计是整个推广环节中最为重要的转化环节之一。

做访谈,做调研。制作着陆页之前,一定要真正做到了解行业特点,站在用户的角度上去了解用户需求,挖掘用户真正的痛点,找到用户的不满,为用户消除不满,告诉他怎么解决,这样可以解决。即站在用户的角度上去思考问题,去帮他解决问题,帮他找出说服他自己的理由。(想起曾跟在商超大姐大妈身后学习了近一个月的售货技巧,产品思维和用户思维成交率差别真的很大)

例如:

针对品牌词,我们用的是品牌实力+产品特色+产品价值+用户信任感+咨询优惠的内容来设计着陆页内容;而针对产品词,我们用的是品牌实力+用户痛点+解决方案+产品对比+用户信任感+咨询优惠的内容来设计着陆页内容。

由此来提高页面的咨询(下单/注册)转化效果,也可通过A/B测试进行对比,逐渐调整页面,提高咨询(下单/注册)量。

同时做好账户数据积累,数据对比观察,分析数据之间的差别化,及时发现问题来源,根据数据信息来决定整个账户的优化方向。

运用这些方法调整,我们在预算不变的情况下,咨询量提升了2倍以上。

通过常用的渠道铺设,占据流量入口;而通过品牌传播,占据用户认知。公众号则是我们传播品牌,进行目标用户积累,培养和转化的其中一个重要方式。

三、微信公众号运营,价值决定成败

我们所在的是一个非常细分的ToB垂直行业,属于某个行业专用的管理类系统,具体是哪个的不说了。我们在全国的潜在目标用户,即有购买决策权的用户人数在2~3万左右,而属于该同行业的人群大约在7~8万左右。用户年龄在35~55岁之间。而产品具有高价,复购率低,项目实施周期长等特点……

To C和To B 用户的本质区别

2016年初的时候我们公司开始做微信公众号。当时小编负责运营公众号内容,后来我帮忙建立社群,做会议直播,创建微课堂邀请行业的大伽来线上讲课等等。再后来当竞价账户稳定了之后招了新的SEMer来负责,我开始专注研究起公众号的运营策划。通过学习其他行业公众号做粉丝裂变,做用户活动等,3个多月的时间,公众号粉丝人数翻了1倍,头条平均阅读量提高了3倍以上,通过公众号来的月有效咨询数量提高了数十倍。并在8千多粉丝时做出行业内第一篇阅读量10万+的文章。

1、微信的红利真的过去了吗?

从我们公众号上转化成我们的产品咨询用户的很少是靠我们的营销活动,绝大部分都是用户的主动咨询。

目前我们还仅仅是靠粉丝的拉新和促活,在几乎不主动营销的情况下,只是提供一个了解和咨询产品的诱导入口,自然就做到的粉丝转化。(其实我们并不提供软件试用,也没有任何优惠活动)

公众号菜单入口

而这些信息通过我们销售打电话联系后,确认有明确了解意向并进入下一步沟通的占到70%左右。而这些筛选后的信息我们才称为是有效咨询(信息)。

相对于微信刚出现的前几年,现在微信所起到的效果确实并不如从前,一是随着公众号的数量越来越多,内容上人们的可选择性太多了;二是各种平台,例如直播,头条等的出现,也在不断瓜分着人们的碎片化时间。但不管变的是新的内容承载形式,还是新的内容展现形式,内容价值本身的重要性却是一直是不变的。

如何利用公众号提供与众不同的内容,对用户真正有价值和被认可的东西,未来将会变得越来重要。相对于在内容越来越多和竞争越来越大的大众领域,垂直细分行业内容的稀缺性和专业性,则要更具有优势。

2、企业公众号除了写产品还能干什么?

从一开始我们所有的工作都坚持围绕精准粉丝来做,为了扩大品牌影响力,我们也仅是把目标放大到该行业里的人群里。因为行业特性的关系,我们很清楚非精准粉丝对我们的实际工作并不会有任何的帮助,而精准粉丝才是我们最终能够转化并获得收入的真正用户。

(1)以用户为中心,为用户提供有价值的东西

如何为用户提供有价值的东西?用户需要什么?所有的推广运营工作之前都需要先对你的用户做一个清晰的画像,从职业,年龄,城市,家庭,收入,兴趣,标签等等维度去分析用户的特征,真正去了解你的用户,知道他们想要什么,对什么感兴趣。

最开始时,我们自己准备了一张清单,列举了一些用户可能会关注的内容,以及微信的使用行为习惯等,并让市场部提供给我们一张已经购买过我们产品的用户名单,然后一个个打电话过去询问。通过这种方式来决定每天公众号要提供的内容类型,以及推送频率和时间。当时最尴尬的是遇到不少上了年纪的用户微信使用频率低,甚至不会基础的微信操作,也是靠很长的时间才把一部分用户习惯培养起来,这也是我们文章阅读率偏低于其他行业的原因。后面则通过社群及公众号后台的数据来判断用户的喜好,由此来测试和调整内容。

通过为粉丝用户提供行业内的政策资讯,知识干货,微课堂,学术会议直播,社群运营等不同形式的内容来留住用户和促活;通过后台文章的阅读量、转发分享量、点赞数等数据分析,判断文章价值和用户喜好,来筛选调整内容类型,通过提高内容转发分享来拉新。

另一方面,经过几种不同方式的测试,目前对于我们用户群体来说拉新最好的效果还是资料干货分享裂变。微课堂最近也开始尝试做裂变的分享,以前用的是填报名表收集用户信息。

也尝试过收费,但效果一般,我们一般都是以免费为主,因为我们也并不靠这个牟利,目的还是在于品牌的传播。但从最近一次课程裂变的效果来看同样并不如意,一方面是新增用户的抵触心理,也可能和用户特性(身份地位,岗位竞争压力低,学习动力不足)以及课程内容(只作为增长管理知识补充了解,而不是专业技能培训)有关系,导致裂变比率偏低。

所以我们也打算尝试改变方式,一方面可以让新增用户先听课,取得他们的信任感和对课程的认可,后面再采取裂变的方式;另一方面可以采用先关注公众号后进群,转发分享的人可以参与抽奖,通过这种方式来的吸引更多的人主动来转发裂变。在促活的前提下再考虑拉新和转化问题。

接下来也打算把一部分目标放在行业内即将及刚晋升管理层的用户身上,他们相对于老一任更为年轻,对新鲜事物的熟悉和接受程度更高,也对学习有较高的兴趣。

(2)帮助用户,你得到的会是用户的友谊和信任

  • 有用户打电话过来问我们出不出书,说一直看我们的公众号内容,对他的帮助很大。其实我们的内容大部分也都是从网上收集整理来的,有时会进行二次编辑,原创很少。
  • 有咨询我们产品的用户自己会这样说,觉得我们的每天发的内容写得好,微课堂的老师也讲得不错,我们的产品肯定也不差。
  • 还有在某个行业群上看到有人提及到我们的产品时说,产品不知道好不好用,但经常能看到他们的信息,说的还是挺好的。
  • 也有遇到过当别人有需求找熟人询问时,对方说自己用的其他家的产品不满意,觉得我们的应该不错,推荐他用我们的。

……

3、全国目标用户群体不到10万,粉丝只有8千多,如何能做到10万+文章?

后台文章数据

最初是受了某些垂直类公众号的启发,做的一次尝试,利用粉丝群体的特性,找到粉丝与群体大众的一个连接点,一开始也没想到真的就10万+了,确实也有些运气的存在。

我们当时利用的是行业的一个政策热点,其实我们在这之前的上一周也发布过一篇同样的政策资讯,但当时阅读量只有1千左右,而两篇文章的不同在于,第一篇完全是针对业内的政策资讯,而第二篇我们则把这个政策对民生的影响,以及网上对这一政策的反应被赞同较多的且有争议性的观点整理了出来,而通过我们的粉丝群体,无疑是在该领域比较有权威,以及比较接近事实真相的人转发扩散出去,就这样火来起来。

之所以能够突破目标群体总数的限制,除了内容本身具有传播性(价值或情感驱动),最主要还是粉丝群体里kol属性的发挥了作用。

例如某个针对医生的平台发布了一条疾病预防或健康保养信息,一开始可能只是会在医生的小圈子里扩散而已,而你发的信息首先引起医生们的赞同和重视,具有他们愿意去主动传播的价值或动力。医生在各自的圈子里的健康领域都有一定的影响力,通过一个医生的转发出去效果是有限的,但如果你平台的粉丝都是医生,当有100个,1000甚至更多的医生都在对外转发时,普通群众无疑会更相信由医生发出来的信息,再次转发相互告知,这样造成传播的量级就更加庞大了。

就像现在很多品牌做活动时都会去找符合自己目标群体的KOL合作一样,想想如果你的公众号粉丝其实天生就具备某些KOL属性呢?

这样会不会带来粉丝不精准?

总阅读量20万+的文章给我们带来了近2000的粉丝增长,从我们公众号后台的前后半个月数据来看,20万+前后几天取关人数只在100人左右,一个月内取关的人数和以前基本持平,并没有异常波动,而粉丝增长之后的文章阅读量都在明显增长。这可能也与我们文章头部和底部引导关注公众号时对自己有清晰的定位有关。

10w+前后取关数据

四、找准适合自己的渠道才重要

比较可惜的是,因为行业和产品,以及目标群体特性的原因,很多新的媒体平台的玩法都不适合我们,例如我们的用户很少有上微博的;投放神马几乎没有流量;通过今日头条投放得到的用户信息相比其他渠道信息质量太差,CAC太高等等。

不过,接下来还会继续研究尝试其他的渠道以及不同的运营方法。一方面是为了开拓渠道寻找业绩突破点,另一方面任何一个特定的方法和特定的渠道内能获取的总流量是有限的,随着时间的增长效果也会越来越差,成本越来越高。

好了,这次的分享就到这里了,希望以后有更多机会能够再次和大家一起学习交流。

 

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

作者:彦心

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

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


设计驱动!体验UP!高手设计师必备工具包

seo达人



图片

作为一名设计师,除了支持日常业务需求,对产品体验进行整体把控也是我们工作很重要的一部分。

即使体验再优秀的产品,也会不断出现各种各样的体验问题。这些问题累积到一定程度,就需要通过「驱动体验优化专项」来解决问题。

比如:新产品上线,以功能实现为主,缺少对体验细节的推敲,容易引起体验问题;产品竞争白热化,需要与竞品的体验拉齐;产品日常运营过程中,不断收到用户反馈、不断发现体验问题。

主导和推进体验优化专项是对设计师综合能力的考验,也是成为高手设计师必会的事情。

但业内相关文章并不多。

于是我们针对「设计师如何主导和推进体验优化专项」进行研究,从「定」—「找」—「解」—「推」四个环节进行总结,并为大家提供相关工具包和实际案例,以期可以开箱即用,并抛砖引玉、启发大家更多的思考。

图片

共分为方法和案例两篇。本篇为方法篇。

 

图片

无论是发现了问题进行集中地优化,还是作为一种优化制度持续优化,优化专项持续的时间都不会太短。为保证顺利进行,在前期需要作出明确的规划。

规划需要结合产品的目标与规划,与产品侧形成合力。所以规划要与产品、技术共同制定。

制定体验规划的五个要素

一般需要明确以下内容:优化范围、问题获取、优化目标、参与人员、时间节点。

图片

体验专项的五个阶段

需要注意的是,规划要清晰、明确、可执行。

可以将整个项目划分为前期启动、问题获取、方案产出、需求落地、项目复盘五个阶段。

每个阶段均需明确:「时间」、「人物」、「任务」、「产出」。

图片

 

图片

在这个环节,我们需要整理已有的体验问题,并在必要时进行补充调研,对问题有更全面、更细节的认识。

如何获得体验问题?

体验问题通常来自五个方面:用户挖掘、设计走查、竞品参考、老板反馈和产品提供。

图片

如何使用这些方法?

以上方法可以综合使用,例如用户反馈某个功能有问题,可以设计自查看问题是否清晰,可以做用户观察看实际使用情况,可以通过数据分析获取操作细节,也可以参考竞品了解不同的解决方案。

将方法按照使用场景、问题的指向性和结论类型进行分类,大家可以根据具体情况灵活选择:

图片

 

图片

区分坏点、优化点和需求点

首先我们来明确三个概念:

坏点:有明显体验问题的问题点,体验层面。

优化点:针对一个或多个坏点的解决方案,设计层面。

需求点:一个或多个相关优化点组成的需求点,或目前没有满足的需求,产品层面。

从问题解决角度来说,它们不仅仅是不同阶段的产物:

我们获得问题的最初,坏点、优化点、需求点可能同时出现在各种信息源中,混杂在一起。后续需要把坏点转化为优化点,成为问题解决方案。解决方案再拆分整合成为一个个需求点,进入产品计划,推动落地。

而且对于把握问题的本质,也至关重要:

优化点、需求点,如果追根溯源,都可以对应到体验上的坏点。我们收集到的优化点和需求点,可能并不是当前最好的解决方案,需要挖掘出对应的坏点,制定最优方案。

如何还原为坏点——追问法

只要不断地追问,就可以挖掘出坏点。

例如在审批流程中:

用户:我想要个点一下系统就能发通知给处理人提醒TA审批的功能。(这显然是个需求,需要还原为坏点)

追问:什么情况下要提醒TA审批?

用户:有时候时间紧迫,不审批就耽误事了;有时候虽然不耽误事,可领导没批感觉心里不踏实。

追问:什么时候比较紧迫?

用户:比如考勤,我今天请假,但明天就是考勤截止日了,必须立即批才行。

追问:为什么想要系统发通知?

用户:因为如果我直接提醒老板,我不太好意思,感觉系统提醒能好一些。

图片

ok,至此,我们基本明确了用户的体验坏点:部分紧急流程需要及时去提醒审批,部分流程审批人想尽快结束,但申请人又不想以个人身份去提醒。

这个坏点需要深入洞察审批人未及时审批的原因,再给出解决方案很多,且不一定要采用用户提出的解决方案,而应该综合考虑,选用最佳方案。

归类—推导—转化

1.将问题点归类

分组是为了把同类或者相关的问题点聚合,寻找系统性的解决方案,而不是「头疼医头,脚疼医脚」。

举个例子:

可按照不同页面、控件、功能、流程、系统来进行归类,如:申请表(页面)、目录树(控件)、收藏(功能)、审批单(流程)、导航(系统)。

2.推导出优化方案

这个也是设计师最拿手的议题——「如何解决问题」,即针对一个/组用户痛点去设计方案。这里可以应用平时方案产出的各种推导方法,包括创意方法。

同时应该注意到,问题也许不能仅通过设计手段解决,所以此过程需要产研同学参与,确保方案有效且可实现。

3.转化为具体需求

方案只有转化为具体需求,才能进入产品规划、落地上线。这也是重要的一步。

优化方案和需求的粒度不同:有时候需要把优化方案拆成不同的需求分拆上线,有时候一个需求又能同时涵盖多个优化方案。这需要根据优先价值,结合产品侧的规划进行。

如何判断优化价值

每个问题优化价值是不同的,我们可以从产品侧、用户侧、数据侧三个方面去衡量:

产品侧:看可行性。是否契合产品的中长期目标?是否符合产品的发展节奏?是否易于技术实现?时间资源成本如何?

用户侧:看影响力。是否是用户使用的核心流程、关键页面?影响的用户范围多大?用户角色的权重(主要指B端)是否较大?

设计侧:看价值感。设计的ROI如何?能否体现设计的专业度?能否提升设计的话语权?

图片

 

图片

设计师虽然主导了体验优化专项,但又不掌握开发资源,如何更好地推动落地呢?需要掌握一些技巧。

推动落地中的四个对齐

对齐是为了及时对齐信息,减少团队中的信息差,使团队成员互通有无。不但可以提升协作效率,还能使大家感到被尊重和需要,使大家拧成一股绳。

四个对齐包括目标对齐、进度对齐、方案对齐和效果对齐。

图片

目标对齐:确保在项目启动和各个阶段产品、设计、技术各方达成统一的目标。可以通过启动会和重要节点会议进行对齐。

进度对齐:项目周期比较长时,需要注意各阶段的进度对齐,掌握进度和风险。方式有排期进度表、定期例会、定期邮件等。

方案对齐:这是比较容易忽略的一点。需要产品、设计、技术甚至用户做方案对齐。我们目标明确,是为了切实解决用户的体验问题的,方案一定要有效,且可以实现。所以要关注方案是否能解决用户问题(方案评估、测试)、是否能够技术实现(方案评审)、方案实现效果(方案验收)。这点做得不好,优化效果就要大打折扣。

效果对齐:上线后需要针对两个效果进行对齐:一是优化效果如何、是否达成了目标(效果评估)。二是项目运行得如何,有什么经验和教训(复盘总结)。及时的团队复盘,有利于大家扬长避短、取得更好的成绩。

形成长期的体验优化机制

对于体验问题,我们不能寄希望于体验优化专项「毕其功于一役」,而是要建立长期的体验优化机制。

包括:定期整理用户反馈、定期走查、定期与产品技术沟通优化计划、阶段性复盘等,建立良好的体验优化通路。

 

图片

相信看完文章后,大家对「主导和推进体验优化专项」的方法有了一定了解。后续我们将会发布实战篇,分享具体实例。

 

原文地址: 58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网 » 设计驱动!体验UP!高手设计师必备工具包

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



用色块打开排版的思路,简单好用!

seo达人


❶ 色块要有明显的主次,要有大小对比、色彩对比、轮廓对比等。

图片

图片

❷ 色块的数量要适当控制,太少了显得单调,太多了会很碎。

图片

▲比如上图的色块就过于零碎了。

图片

▲上图就要好很多。

❸ 不要把所有色块都严格对齐,否则会很死板。

图片

图片

❹ 由于几何色块本身比较单调、生硬,所以色块内的信息和图形可以灵活一点,可以增加一些细节,比如装饰元素。

图片

❺ 不一定要把所有的信息都放进色块里,把个别信息、元素放出来,可以使版面看起来更灵活。

图片

图片

下面葱爷给大家分享几个案例,来看看色块排版具体是怎么操作的。

 

案例一:服装画册目录设计

下图是某服装画册的目录页设计,其实也是用了色块来排版,但是整体很混乱,信息分组不明确,而且很不精致,所以需要对它进行调整。

图片

❶ 原稿几乎把所有信息都放在一个大色块一中,这么做色块就没起到区隔信息的作用,所以我把背景分成了三块(颜色全来自图片),最上面的放标题,下面两块分别放两组内容并对齐排版,使信息更清晰、更易读。配图保留原稿把图片放入方形色块的方式,只是去掉了多余的描边。

图片

❷ 重新设计标题。黑色太过突兀,所以我把它改成了粉色,并给副标题也加了一个绿色块,副标题与标题以及下方的绿色块叠加,既增加了画面的层次感和设计感,也加强了上下两个空间的联系。

图片

❸ 将内文的排得更精致一点。首先,选了一个欧式风格的字体,给内文中的四组信息分别加上序号,在风格与排版上与其他元素形成鲜明的对比。其次,把内文的颜色从黑色改成与对应色块的深色,融合性更好。最后,在小标题和正文之间加入短线条,做区隔和装饰的作用,并适当调整正文的行距。

图片

图片

❹ 用网格系统稍作规范就完成了。

图片

图片

 

方案二:儿童蛋白粉单张设计

下图是该版面需要展示的主要内容,文字较多,而且基本上是大段大段的,但信息组别并不多,大概可以分为四五个部分。

图片

❶ 将属于不同组别的信息和元素分别放入色块中进行区隔,色块颜色来自于品牌logo和包装。

图片

❷ 这样划分色块层级太少,而且矩形色块太硬,不太适合儿童产品,所以把标题和小标题都单独拿出来了,并把色块做了圆角处理。色块缩小后,产品图片有一半露在外面,正好起到打破方块的作用。

图片

❸ 标题需要突出设计一下,但由于左上角有Logo,所以如果把标题拉大,那么左边就会有点拥挤,右边则会比较空,所以把产品图片和产品介绍的文字左右调换一下更好。功效证明的文字太多,句子也很长,所以我把它分成了两栏,提高文字的易读性。

图片

❹ 把标题字体改成宋体和衬线体,并把产品图片下方的色块改成圆形,加强视觉上的对比效果和灵活性。

图片

❺ 把标题的文字改成右对齐,并跟与下边功效证明文字的右栏对齐,这样左上角的留白会更舒服一些,平衡性也更好。

图片

两个正文的大色块里全是文字所以略显单调,于是我在文字上下加了一组波浪线,细节上会更精致一点,到这里这个单张就排完了。

图片

 

方案三:移动宽带海报设计

下图是移动宽带的一则促销海报,也是用了色块排版,该画面中的信息其实挺清晰的,主次分明,也有一定的视觉冲击力。问题在于美观性不够、形式过于普通不时尚、排版很呆板,下面我们来对它进行优化:

图片

❶ 将该画面中的信息一一用色块框起来,原方案把“100M宽带优惠用”放在一个大色块里,层级关系太少,视觉变化不够丰富,所以我把它分成了三个色块(由于移动的调性还是比较年轻的,所以我打算用孟菲斯风格来做)。另外,原方案中的优惠套餐被处理成三个很平均的色块,看起来既分散又缺少变化,所以我把他们组合在了一起。

图片

❷ 将“100M宽带优惠用”这几个色块进行适当错位排版,并在其下面增加一个大的色块(可以看作是电视机的屏幕),以使版面变得灵活且主次分明。

图片

❸ 给文字色块加上立体效果,加强版面的空间感和信息之间的层次感。

图片

❹ 只有文字和矩形色块的画面太过单调和生硬,所以我加了一些与宽带相关的图形元素进来,比如代表视频的播放器符号、代表网速快的闪电符号、代表互联网的箭头、代表网线的曲线。整个版面变得生动、活泼了很多。

图片

❺ 在背景中加入网格底纹,使背景与主体形成呼应,视觉上也没那么单调,并把活动时间和办理方式从最下面的色块中调出来放在视觉主体的下方,与其他的文字色块形成对比,

图片

❻ 再调整一点细节就做完了。

图片

图片

色块排版的用法还有很多,通过改变色块的风格、造型、组合方式等等,可以创造出非常多样的效果,所以用色块排版也不一定会很死板、很粗暴,比较适合表现时尚、冲击力强的设计需求,但确实不太适合用于表现高端、高级的视觉,这点需要注意一下。

 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网》用色块打开排版的思路,简单好用!

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



想把表单设计做到极致,居然有这么多细节需要注意,学到了!

seo达人



图片

比如以登录为例,当你把密码输错后,网站清空你刚刚才填好的表单,是不是非常让你崩溃?删除所有数据对用户来说很烦人,这会让你必须重新输入用户名和密码,即便只是拼错了密码而已。

因此,任何专业的用户体验设计师不仅应该考虑顺利的流程情况,还应该考虑失败时应该怎么办。

 

一、错误提示

错误提示应该让用户容易找到原因并方便理解。否则,他们可能没办法解决这些错误。所以对于设计师来说,一个非常重要的目标是要设计出一个易于解决错误的流程。一个错误信息应该能清晰的解释到底发生了什么,如果可能的话,最好也提供解决方案。

图片

左边的错误信息很清晰的解释了发生的问题,右边的错误信息对用户来说非常困惑。

1.1什么时候告知用户发生了错误比较好?

当用户出错后,首先要考虑的事情就是应该在用户填表时提醒还是最后通知用户。错误预警中有三种常见模式:

  • 内联/实时:在输入时或移开焦点后立即提供反馈。
  • 提交后/客户端:当用户点击提交按钮之后
  • 服务器端:当请求发送到服务器后再返回反馈给用户

这些方法中的每一种都有其优点和缺点。

1.2内联验证

一般来说,当表单非常短小时用内联验证,因为它允许在内存中的数据仍然最新时更正错误。

图片

你可以用内联验证立即告诉用户哪里错了。

”尽可能的进行内联验证“”这种类型的错误消息很容易被察觉“,此外,输入完成后立即告知错误,对用户的交互成本最低——UX专家Rachel Krause

另一位专家Luke Wroblewski建议,当问题的答案不明显时,可以使用内联验证。例如,在选择用户名时,用户可能不知道哪些用户名可用。在这种情况下,在用户输入数据时立即告知错误可能会有所帮助。

1.3提交后验证

另一方面,当表单很大且需要保持关注时,你希望帮助用户保持专注,而不是通过不断显示错误来打断他们。

“使用内联验证,用户必须在两种截然不同的思维模式之间反复切换:填写表单和纠正错误。这减慢了用户的速度,增加了认知努力,通常会降低用户的满意度。”Jessica Enders在她的书《设计UX:表单》中写道

1.4服务器端验证

服务器端验证是最不友好的方式,但却为网站提供了很高的稳定性。当需要二次检查用户的数据时,这种方法最有效。

1.5如何提示用户错误?

错误提示告诉用户他们做错了,但是他们究竟做错了什么,要如何修复它?很显然,清楚地说明错误,而不仅仅是显示Error:90803,对用户有很大帮助。

图片

使用用户能理解的话,而不是用专业术语

1.6使用积极语言而不是消极语言

错误提示措辞要使用积极语言而不是消极语言。例如,如果用户遗漏了一个字段,与其说”该字段不应该是空的“,不如说”请填写此字段“。当使用积极语言时,用户不会因为一个错误而受到责备,这能减少用户的焦虑感,减少流失。

1.7必要时提供帮助

在某些情况下,用户无法自己修复错误,他需要额外的帮助。例如,当用户无法登录时,大多数应用只提供找回密码,而没有找回用户名。但事实上,用户名和密码都可能会忘记。因此,在这种情况下,尝试提供所有必要的操作和信息资源来帮助用户解决问题。

 

二、标签

标签是表单可用性最关键的组成部分。如果标签不清晰,那么其他元素就算把可用性做得再好也没意义。所以,不要让用户来猜测这里面到底要填什么内容。

图片

不要用一些模棱两可的词,比如”数字“可能会让人感到困惑,一定要明确意思。

2.1将标签放在输入字段的顶部

许多研究表明,将标签放置在输入字段的顶部可以帮助用户更快地填写表单,因为它允许用户遵循一条垂直线而不是Z模式。但是,如果它占用太多的垂直空间,您也可以使用浮动标签。因此,如果你希望用户更快地填充表单,请将他们放置在字段的顶部。

图片

将标签放置在字段的顶部和使用浮动标签,这两种方式都很有效

2.2将标签放在输入字段的左侧

另一方面,当你询问用户比较复杂的问题,用户需要更多时间思考问题答案的时候,研究表明将标签放在输入框的左侧会比较好。

图片

当用户需要思考答案时,将标签放在输入框的左侧会更好

2.3标签应该是可见的,无论什么输入状态

无论你用什么方式,确保当用户填完内容后,标签是可见的。因为,当用户需要再次确认表单内容的时候,他们不用删除填好的数据来查看系统需要他们填什么。

图片

不管输入状态如何,标签都应该是可见的

2.4减少不必要的输入项

要填的表单越多,用户就不愿意填完它。所以尽可能地为用户减少不必要的输入项。如果实在做不到,可以将必填和非必填的字段区分开,减少用户的负担。

2.5可见性

不管状态如何,字段都应该是清晰可辨的。此外,活动字段和非活动字段之间的区别应该要明显。

图片

输入字段应该有高对比度,在所有状态下都是可见的。

2.6自动激活PC端表单的第一个字段

自动激活表单的第一个字段,这可以提高处理效率,避免用户额外点击。

2.7帮用户预先填好

在某些情况下,你可以帮用户预先填好字段。例如,可以很容易地检测到邮政编码,或者某些数值可能是频繁的。在这些情况下,为用户填充字段。

2.8格式

含有大量小数的数字很难读懂。因此,当要求较大的数字时,需要考虑添加格式以支持可读性。例如,在询问卡号时,使用自动格式化:读取5678-9876-9738-8394比读取5678987697388394容易得多。

此外,当请求需要特定格式化数据时,要包含一个实例,让用户准确理解要填什么。

图片

帮助用户了解如何格式化数据

2.9表单区域大小

输入框的大小应该要与所填的内容长度相匹配。比如,当要用户填写用户名时,如果显示的填写区域是一个长段输入框会让用户感到困惑。另一方面,如果你希望用户写一些反馈,但只能看到所写内容的最后一小段,那就很难用了。(彩云注:我就经常在一些体验不好的产品上碰到过这种情况,简直太难受了。)

如果你不能准确预测信息的长短,比如留言反馈,建议表单区域最好是能在用户填写内容触碰边界时,自动变高。

图片

输入字段的大小应该与它预期的数据大小相对应

2.10为桌面系统设计灵活的表单

在键盘和鼠标之间切换很烦人。在理想的情况下,用户应该只使用一种媒介来填写表单,但有时,这是不可能实现的。因此,如果用户需要多种媒介来填写表单,至少要尽量减少切换。为此,将需要同一种工具的输入组合在一起。

另外,当创建一个网页表单时,要确保用户可以只使用键盘来浏览表单——使用TAB和方向键。

2.11为移动端系统设计灵活的表单

当在移动设备上时,将你显示的键盘与用户必须输入的数据相匹配。我们经常看到需要数字键盘的输入可以很好地实现这一点,但几乎很少有APP显示支持输入电子邮件地址的键盘。

图片

支持通过显示正确的键盘输入电子邮件

 

三、下拉菜单vs单选按钮

下拉框的使用比单选按钮更有挑战性,因为它需要额外的点击来打开它们。此外,用户无法提前看到选项,这可能会让他们感到困惑。因此,如果你只有少量的选项,使用单选按钮。如果选项的数量超过4个,下拉菜单的效果会更好。

3.1复选框

通过勾选复选框,用户应该是同意某些内容。我的意思是,他们应该说,“是的,我想要这个”,而不是,“是的,我不想要这个”。不幸的是,我经常看到有误导性的复选框试图在创建账户时欺骗人们订阅他们的产品。当你不想订阅他们的通讯时,你又必须勾选复选框,像这样的伎俩对信誉是不合适的,所以不要动心使用它们。

图片

通过勾选复选框,用户应该同意某些内容,而不是确认他们不同意。

 

四、结构

一个结构充分的表单就像一个与用户的良好对话。所以记住这一点,仔细规划结构。

4.1从简单的问题开始

从简单的问题开始,从用户已经很清楚知道答案的问题开始,像名字、邮件这类。然后再循序渐进问稍微复杂的问题,像账户信息之类的。

首先,一个很自然的顺序,当你第一次见某些人的时候,你会找一些比较好切入的问题,比如叫什么名字啊之类的。其次,当用户已经填了一些字段之后,那么之后会增加他填完表单的机会。

4.2创建逻辑信息块

将不相关的信息按逻辑分组。例如,你可以将结帐表单分为“个人信息”和“帐户信息”组,将信息分组可以帮助用户一次只考虑一个主题。

图片

通过对相关信息进行分组,使表单可被快速扫描

4.3单步VS多步表单

当你有很多问题要问的时候,你可能想知道哪一个最有效:单步流程还是多步流程。一般来说,单步表单的转化率更高,因为它看起来更小,而且不会劝退用户。如果你询问基本信息并希望用户快速填写表单,单步表单就非常不错。

当用户被要求必须填写更多复杂信息时,多步表单会更好。为了帮助用户在进行多步骤填写时不至于失去耐心,可以给到进度条,提示还剩多少步。

4.4单列vs多列布局

一般来说,用单列布局会更好,因为可以帮助用户更好地扫描,也可以尽量减少用户遗漏填写。

但当用户多次填写同一个表单时,他们更喜欢多列表单,因为这样不会浪费时间滚动。一般来说,在B端应用中这种多列表单会比较合适。

 

五、按钮

设计可用的按钮对提高转化率至关重要。如果按钮上的文字内容比较模糊,会容易劝退新手用户。

图片

根据用户按下按钮会发生什么来命名按钮

5.1提高用户的容错率

对于更复杂的表单来说,按钮最重要的一点是,应该有提交和取消表单的单一方法。用户应该至少有补救的机会。举个例子,如果用户点了在线帮助时,他已经填好的数据不应该被丢失。或者,如果用户由于意外点击了按钮,请求不应该被提交。

5.2主要按钮和次要按钮应该很容易区分

为了避免点击错误的按钮,用户应该能比较容易地区分主要和次要按钮。另外,最好不要只依赖颜色,样式上最好有比较大的差异。

图片

让主要和次要的按钮样式上有比较大的区分度

5.3正确的标签按钮

按功能明确地标注按钮。例如,如果按一个按钮可以创建一个账户,在按钮上的文案叫”创建账户”要好过“提交”

 

总结

当用户打开表单时,他首先肯定是想要填完它的。尝试帮助他们而不是用糟糕的设计给他们设置障碍。

不幸的是,这里面提到的许多错误,并不需要多么高级的技巧,而是因为设计没有同理心。仔细思考你的设计流程,检查是否能让所有内容对不同背景和专业知识的人都是清晰的。

通常来说,一般要达到以下目的,大多数指导原则都来自这些规则:

  • 用户应该只输入一次数据
  • 用户应该填尽可能少的信息
  • 用户应该只需要记住少量的信息
  • 用户检查和恢复错误内容应该要很容易

 

原文地址:彩云译设计(公众号)

作者:彩云Sky

转载请注明:学UI网》想把表单设计做到极致,居然有这么多细节需要注意,学到了!

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



探索优秀LOGO背后的技法与思路!

seo达人


话说自从著名资本家胡晓波先生对训练营的同学下达坚持打卡两年送一台苹果手机的许诺之后,同学们纷纷战意满满,激情四设,每天就是手机碎片+1,手机碎片+1 的做练习…而本意是激励大家好好练习的波哥,整日忧心忡忡,省吃俭用…好怕自己两年后被原地榨干…

为了更好的协助大家吸资本家的血,丰富自己的武器库。本次教程整理了八个由易到难的 LOGO 设计方向与相应的 Ai 技法,大家可以用闯关的方式一各一个的逐个攻破,体验感会更好哦!话不多说,我们开始吧!

文章末尾另附视频版本,对步骤有疑惑的同学可以跟着一起实操一遍,嗯,是真的想教会你呢。

PS:本文所有案例均来源于网络,只用作分析技法。

 

 

图片

首先出场的是一个雪花造型的 logo,复杂的线条纹路让它看起来既神秘又迷人,虽然看起来很麻烦,但其实我们很容易就能发现它的规律性:

1. 由六个相同的单一元素旋转复制得到;

2. 线条倾斜角度均为 60 度。

OK,掌握了这个规律,我们用网格大法很轻易就可以将它绘制出来,来,上步骤!

图片

首先我们先画出网格,用几条等距的直线,然后群组整体旋转 60 度复制左右两组,即可得到。

想要做这种倾斜角度相同的线条,网格可以帮助你更好的进行规范。

图片

然后我们沿着网格将单一元素的路径用钢笔工具绘制出来,这里需要注意两点:一是每一个端点处最好对齐网格的点;二是有转折的地方要一笔连过来,方便后面加圆角处理。

图片

画好路径后我们将它转曲,然后添加圆角,注意添加圆角的规律,一般外圆角会比内圆角大一些,而且相同的角度一定要设定相同大小的圆角。

图片

单一元素处理好之后,我们把它沿着中心点旋转复制 60 度绕一圈,就可以得到我们想要的图形了,一般操作就是复制一个然后 CTRL+D 进行重复即可。

图片

最后添加颜色和排版就可以了。

一般越复杂的 logo 想要做的出彩,往往都需要一些规则性在里面,而网格能够很好的帮助我们去实现这种规则性。

 

 

图片

这是今年意大利申办 2030 年世博会的 LOGO,整体造型由罗马古城门向内进行线条发散组合而成,寓意各国文化的友好交流。这种线条混合发散的 LOGO 既简单又出效果,用混合工具即可轻松完成,下面我们来看一下在制作过程中有哪些需要注意的点。

图片

首先我们将需要混合的部件准备好,也就是建筑的外轮廓以及大门的外轮廓。注意一定要保证左右对称,否则混合起来会十分混乱,然后下面的底部先不要连接上。

图片

这一步需要注意下面连接处不要合并,不然会出 bug。

图片

选择混合工具,分别点击城堡和大门,将指定步数改为一定的数值,数值越大,越密集,这里设定为 35。然后就得到了向内混合发散的感觉了!

图片

混合完成之后我们扩展出来,将最外圈轮廓直接向外扩大复制出轮廓线即可。

图片

最后我们整体进行转曲,然后添加颜色就搞定了!可能有的同学会觉得这种多线混合的 logo 过于复杂,会不会不太好应用,但其实这种属于活动型 logo,并不需要用个五年十载,活动型 logo 更着重考虑当下,可以做得更个性,一切以视觉为出发点!

 

 

图片

看完了国外的,再来欣赏一下这个极具中国风的湖州城市 LOGO。这个 LOGO 的亮点在于它的正形背景部分是由不规则的水墨感条纹组合而成的,文化气息拉满的同时让图形更加活力生动,我们来看看这种非对称条纹该怎么绘制。

图片

首先我们将椭圆部分的线画出来,第一步找到最高点和最低点,然后用混合工具进行混合,得到由曲线逐渐变成直线的过程线段。

图片

然后手动的将各个线条扩大到椭圆轮廓的位置,并调整好粗细和间距。

图片

到了最关键的一步了!我们将每条线的描边配置改为这个不规则的样式,在描边窗口最下面就可以找到,记得适当调整粗细保持过渡自然。

图片

然后我们把每一条线都改成这个描边样式,并将下半部分水波纹的地方也绘制出来,注意下面的地方描边可以调的细一些。

图片

画好背景后,我们将负形部分的塔形建筑放到条纹的中间,并居中对齐,改为白色。

图片

光变成白色肯定不行!我们要的是镂空!这里直接选择所有图形,然后用路径查找器里面的分割,可以将所有图形分隔开,然后用魔棒工具选择白色部分,直接 Del 删除即可。

图片

最后加入渐变色!效果就拉满了!这种非对称式的线条相较于普通的线条,更加灵活生动,也天生自带中式笔触的感觉,以后大家碰到中式 logo 的命题,可以考虑尝试一下这个风格。

 

 

图片

这个 LOGO 在 2D 平面的基础上,融入了褶皱感 3D 立体的感觉,同时它的组合结构是类似于飘带这种飘逸柔和的造型,比普通的方形更加优美。下面我们来看看如何做这种飘逸的结构以及如何进行视觉 3D 化的实现。

图片

其实如果你的钢笔工具玩的 6 的话,直接画也是可以的,但是相信在座的各位钢笔都不太行,甚至很多同学经常被只会 Flash 的胡晓波嘲讽,那能忍吗?这里教大家一个曲线救国之路,先画一条直线,然后选择扭曲和变换里的波纹效果,大小设为 100,隆起数改为 1,就得到了一个…emmmm,优美又不太对劲的曲线。

图片

将这个波纹线砍掉一半,嗯,总算正常一些了。

图片

把它向下复制为六个,并适当调整一下间距。

图片

将组合好的图形向右镜像复制一个,然后放到它的下面,对齐左边的端点并连接,形成一个翅膀的感觉。

图片

然后再次左右镜像复制一遍,基本的造型就出来了。

图片

选择实时上色工具,分别按路径填充黑色部分。

图片

最后删除掉多余的描边,并合并黑色部分,效果就出来啦!用这个方法可以做出来很多种曲折线,大家可以尝试一下,肯定可以组合出各种好玩的样式出来。

 

 

图片

像素化风格的 LOGO 也是常年比较流行的,不光光是游戏行业,其实很多企业类的 LOGO 也可以非常好的利用像素化进行视觉呈现,很多同学只闻其名,不懂其法。下面我们用这个案例来看一下像素化 LOGO 的设计步骤。

图片

由于是企业类的 logo,在造型上就相对严谨一些,除了正常的方形,这里再给大家介绍几个常用的比例(如上图),经过比较,发现青铜比较接近于原 logo…那我们就用青铜的比例,做出王者的效果。

图片

绘制网格有两种方法,一个是画好矩形之后,选择对象→路径→分割为网格,二是直接用矩形网格工具绘制。这里因为我们提前画好了矩形,所以直接用第一种方法,行数和列数分别设为 52 和 11。

图片

画好网格之后,就可以请出我们的老朋友实时上色工具,在网格中挥洒你的创意。

图片

用实时上色工具画好之后,需要扩展一下,才能提取出画出来的部分。

图片

最后我们将网格线删除,就可以得到我们画好的图形了!纯纯矢量的像素化就这么搞出来了!这个方法是通用的,你可以通过改变不同的网格数量,来绘制不同像素块造型的图案,比如你想绘制常规的正方形像素块,那行数和列数设为相同的即可,之后就在里面进行填充色块,真真正正体验到画画的快乐!

 

 

图片

平面构成作为设计学的基础学科,通过点、线、面三者规则或不规则的编排和组合,形成极强的抽象性和形式感,它在 LOGO 的实际应用中也非常容易出效果。这个 LOGO 就是通过线与面的结合来进行抽象创作,下面我们来看一下具体的实操过程。

图片

第一步我们先把六边形轮廓和中间的三角形画出来,其实就相当于我们新建一张画板,在里面进行设计是一个道理。

图片

第二步我们画三条辅助线来方便后续的操作,注意这里的线都是有规律的,比如最下面的线是与三角形形成 90 度相交,而另外两条线都是沿着三角形的边进行延伸。

图片

第三步我们将下半部分的线绘制出来,具体操作如下:

1. 沿中心画一条直线,再沿六边形边画一条直线;

2. 两者进行混合,步数设为 24;

3. 左右进行镜像对称复制;

PS:这一步其实也是在画辅助线。

图片

第四步我们接着用实时上色工具,将我们需要的部分提取出来,这里实时上色工具其实就是充当了马克笔的作用,大家可以想象一下,这样比较好理解。

图片

画好其中一个部分了,剩下的我们直接旋转 120 度复制出来就可以,这里也是软件操作的方便之处,比在纸上快多了,容错率也高。

图片

旋转之后我们发现左半边部分黑色会大出来一块,所以我们需要取消编组后,将这个部分单独置于底层,就可以了。

绘制这类 LOGO 的核心要素就是画好辅助线,同时特别锻炼人的思维和创意能力,它更像一件数学与美术结合的艺术品,当你成功完成之后,一定会成就感满满。

 

 

图片

这一趴给大家带来的是苹果 2022 发布会 LOGO 中多层彩色混合渐变设计小技巧。既然大家都是即将拥有 iphone16 的人,那实时掌握自己手机的未来动向也是必须要做的事情。来吧!学起!

图片

第一步肯定是要先画好基本造型,不管是苹果也好,是梨也好,造型画不好,再好看的渐变也救不了你啊!

图片

然后我们先给它添加渐变色,这个大家应该都会。

图片

接着我们需要给它添加一个描边,这里要把透明度模式由正常改为柔光,并适当降低透明度,这样外轮廓不会过于生硬,能够更好的与图形渐变进行过渡。

图片

到了最关键的一步,我们将图形向内缩小复制一个,给它填充上黑色,然后用混合工具将两者进行混合,就可以得到一个由外向内逐渐消失的渐变效果了。

图片

然后我们选择比例缩放工具,向内缩小 80% 并复制出来,接着按 CTRL+D 重复复制即可。

图片

其他几个苹果只需要更改相应的渐变配色就可以啦。

图片

身体做完了,上面的小叶子也是用同样的方法就可以搞定了,右下角另一个版本的用相同的做法也同样能够实现,但是想要完全还原它的投影效果可能要用到 AE 插件来完成,这里挖个小坑,感兴趣的同学可以尝试一下。

 

 

图片

东京奥运会作为史上极具争议的一届奥运,带来了不少热点和话题。相较于它鬼畜的开幕式和一些莫名其妙的的比赛细节,它的 logo 却实实在在的堪称顶尖硬货。由很多很多不规则的小方块堆积而成,看似琐碎无章法,但其实拥有极强的数学逻辑和艺术美感,下面我们就来看一下它的设计过程。

图片

看到这个图,是不是就能瞬间明白一些东西了?原来确确实实是有规律的,所以我们只需尝试画出其中一个部分,剩下的重复复制即可。

图片

先画出一个十二边形,然后复制一个旋转 90 度,将它们进行居中对齐,这里需要手动调整一下大小,保证里面的顶点对齐到外面的边上,中间我们画一个小圆,方便后面找到中心点。

图片

这一步我们先在最上面画出三个菱形,具体操作如图。

图片

然后再找到中间部分,一样通过已经存在的三角形来进行旋转 180 度复制,之后合并出新的菱形。

图片

和之前一样的手法,一样的配方,继续画菱形…

图片

继续拼贴菱形,不过新加入的红色部分和之前的黄色部分是重复的,所以我们直接复制过来就可以了。

图片

继续增加红色部分菱形,具体操作步骤如图。

图片

右边再添加最后一块菱形,这一部分就算完成了!

图片

下一步我们需要找到各个边的中心点,将它们进行连接,这里给大家安利一个比较常见的小插件(百度搜索 Ai 插件很多下载地点,由于版权问题就不直接分享了)里面的等分路径可以快速帮你定位到线段的中心点。另外里面还有很多其他的野路子,大家可以自己慢慢玩。

图片

找到中心点之后(如上图左)就可以将它们分别连接起来,画出方块!如果说之前的几步完全不知道在干嘛的话,那么到这一步是不是有种豁然开朗的感觉?

图片

后将画好的部分绕中心旋转一圈,再删除掉外轮廓线,终于完成了…头发掉了好多…向大师们致敬,salute!这个方法其实也是平面构成中的一种,大家可以跟着自己做一遍,一定会有自己的收获。

Okkkkk,那么今天的教程到这里也就结束了,不知道你们能攻克到第几关呢?临摹不是目的,学会举一反三才是最重要的。觉得意犹未尽的朋友抓紧跟着下方视频版本再来温习一遍!!总之,是很感谢今晚的相伴,感谢三连支持,朋友们,giao 辞!

 

▼ 点击图片前往原文观看视频版

 

原文地址:胡晓波工作室(公众号)

作者:告白天

转载请注明:学UI网》探索优秀LOGO背后的技法与思路!

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



刷新设计的千奇百态(UI设计)

seo达人


前言

刷新在产品中属于基础功能,方便用户获取最新动态,是普及度较高的基础功能之一。在设计表达时有系统级表达、自定义设计、多功能结合等,设计发挥的可控性较大。

今天黑马哥就结合一些优秀的线上案例,和大家聊一下关于产品刷新设计的千奇百态,希望抛砖引玉,和大家一起进步。

 

分享目录

一、关于刷新设计

二、刷新的设计形式

三、线上优秀案例分析

四、总结

 

一、关于刷新设计

在产品中刷新对于用户来说并不陌生,是经常使用的基础功能,便于用户获取新动态。在一些可以提供内容更新的产品中,刷新获取内容变动是较为常见的形式。

大家都习惯将刷新称呼为下拉刷新,其实刷新的动作不仅限于下拉手势交互,也有产品采用单击和上滑等手势交互实现刷新动作。比如一些产品在滑动浏览内容时,底部标签栏首页图标会变为刷新的操作,通过点击实现页面内容的刷新;也有产品在上滑页面时实时加载完成刷新,就像很多影视类产品或者瀑布流设计的产品。

 

图片

 

刷新动作不仅可以满足用户的求知欲,也能通过源源不断的内容增加用户黏性,提高用户的使用体验。

 

 

二、刷新的设计形式

简单的刷新动作已经不是简单的设计了,在产品设计师的创新中呈现出了众多的优秀案例,下面为大家梳理一下不同的设计表达形式。

2.1、系统级表达

系统级表达是采用系统默认的一些处理形式,类似于花瓣循环的动态形式,属于比较常规的表达。也有很多产品采用系统级形式,用户理解度较高,设计创新的角度来说欠缺一些,表现形式比较生硬。

图片

 

2.2、情感化文案表达

为了带给用户更有温度的设计,除了在图形层面进行情感化设计发挥,在文案上面也可以更加情感化。有产品使用俏皮可爱的话术,每次用户刷新都呈现不同的文案,与用户产生情感共鸣。

图片

 

2.3、动态形式结合

刷新的动态表达形式非常普遍,图形动效和动作演变等,能够体现出加载的动作。动态形式结合可以使得趣味性更强,动画演变的过程也能降低加载等待过程中的焦虑感。

图片

 

2.4、IP 形象结合

IP 形象结合到 UI 场景中不仅可以强化品牌感,也能带来更加情感化的体验。IP 形象结合到刷新设计中,伴随着动态演变,以此来体现加载的过程。设计形式动感化,趣味性强且感官体验较佳。

图片

 

2.5、品牌基因结合

立足于品牌做设计,品牌感可以带来差异化的设计表达,也能提高用户对品牌的记忆度。很多产品将品牌 LOGO 图形、辅助图形、品牌字体、品牌风格特征等融入到刷新设计中,带来差异化的刷新体验。

图片

 

2.6、业务属性结合

根据业务特征设计刷新图形,让用户在刷新的过程中感知产品的业务属性,也是强化记忆点的有效形式。

图片

 

2.7、多功能结合

刷新设计更多的还是为了给用户提供更多动态内容,除了这个底层需求以外,也有产品结合了多功能设计。比如下拉刷新到一定距离可以激活“二层楼”,进入活动空间或者其他功能模块,也有结合浏览记录等展示。多功能结合赋予了刷新更多玩法,在有限的资源空间发挥更多操作价值。

图片

 

2.8、其他设计形式

随着体验的重要性升级,产品设计师会在更细微之处探索出更优的解决方案,做出差异化的体验设计。而刷新功能也将会呈现更丰富的设计,从感官层面带来更多视觉感的表现,从体验层面结合更多辅助功能或者业务,发挥更多使用价值。

 

 

三、线上优秀案例分析

通过以上的梳理我们对刷新设计有了深入的了解,下面通过一些优秀的线上案例来进行分析,辅助大家掌握更多差异化的设计表达。

3.1、情感化的文案设计

刷新除了在图形设计和动效层面发挥以外,多功能结合和文案设计也是差异化表达的方向。文案提示的设计相对比较特殊,通过不同的文案来打动用户的体验。

喜马拉雅 APP 每次下拉刷新时,都会显示不同的文案内容,有功能引导的提示文案,也有与用户共鸣的温馨提示等。情感化的文案设计让刷新更有温度,不失为一种差异化的功能设计探索。

图片

 

3.2、动态化 IP 形象

针对下拉刷新这一常规操作,设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作,被很多产品设计师所采纳。

美团外卖就将品牌 IP 形象结合得恰到好处,下拉刷新时两只耳朵摇摆非常俏皮可爱,松开后 IP 形象露出,还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现,拉近与用户之间的亲和力,带给用户更人性化的使用体验。

图片

 

3.3、刷新带来美食诱惑

在完成刷新功能属性的同时,还能将产品的属性或者服务卖点强化出来,赋予了常规操作更多的功能价值。

麦当劳在麦麦商城栏目的下拉刷新设计中,采用汉堡形象结合层级动效进行表达,让人眼前一亮。动效拉长的汉堡不仅体现出份量感,激发用户的食欲;汉堡形象就十分麦当劳,展现出品牌关联性。

[优化输出图像]

 

3.4、趣味化 IP 形象

IP 形象结合到刷新设计中的案例非常多,不仅可以带来情感化的体验,也能增加功能操作的趣味性。半次元在下拉刷新时不仅结合 IP 形象,还通过下拉的程度将形象拉长,最后再配合表情和动态营造出趣味性。

[优化输出图像]

 

3.5、动态 IP 完美结合

转转的 IP 形象头部的转动条是其特征所在,在下拉刷新过程中完美的结合了转动条,还伴随着装饰符号散开的效果。不仅贴切的结合了 IP 形象的特点,装饰元素的动态效果也强化了氛围感,非常符合产品的属性,是一个不错的刷新设计案例。

图片

 

3.6、品牌化路径动效

刷新设计中采用路径动效的表现形式比较多,主要集中在图形路径动效和品牌文字路径动效,图形通常是品牌 LOGO 为主,这一类比较适合图形趋近于线性的表达中。链家 APP 的下拉刷新就是 LOGO 图形进行路径动效,完美的匹配了图形轮廓,动效的流畅度也比较自然。

图片

 

从品牌层面着手于刷新设计,如果放弃图形层面的元素选择,品牌字体的选择也是一个思路。得物 APP 将品牌名称的字体直接运用到刷新设计中,以路径动效的形式进行表达,最终将笔画打散散开。设计表达依然延续了品牌感,也区别于其他产品的刷新设计,在差异化方面呈现出了自身的品牌特征。

[优化输出图像]

 

3.7、一路骑行的芒果崽

芒果 TV 的下拉刷新设计结合了吉祥物芒果崽,下拉刷新的过程就是一路骑行的芒果崽。骑行的沿途中有众多地标建筑的剪影,下拉不松手就会一直处于骑行状态,下拉的反馈体验度做得很好。

图片

 

3.8、漫步的卡通形象

利用动态卡通形象作为刷新设计案例较多,特别是行走和跑步,这一类都比较贴合刷新这一动态表达。比如在少年得到 APP 中,在下拉刷新过程中以一个背着书包漫步的卡通形象进行表达,流畅的动效完美的呈现了学生放学或者上学时,背着书包漫步的场景。这样的呈现方式不仅贴合功能含义,也能与用户产生更好的情感共鸣。

图片

 

3.9、业务化的 3D 图标

友啥 APP 利用 3D 图标进行循环切换代表刷新过程,带有业务属性的图标不仅可以直观的突出产品特性,3D 图标化之后视觉感十足。图标切换带来的动效流畅自然,匹配刷新动作的差异化也非常明显。

图片

 

3.10、刷新动作下的多功能结合

刷新已经不局限于内容更新这一单一需求,一些电商类产品也赋予了刷新多功能的属性,带来更多样化的操作体验。

比如淘宝 APP 首页下拉刷新时,短距离下拉依然属于刷新范围,继续下拉则会提示释放进入淘宝二楼。在保持刷新基础功能的前提下,融入了多功能场景,开发出功能或者活动的全新曝光入口。

图片

 

在商品详情页时下拉则无法提供刷新服务,为了给予更好的反馈设计,下拉动作便会显示我的足迹。不仅可以在用户习惯性操作时给予反馈,足迹的提供也更方便用户做出选择。

图片

 

同一个产品也并非只能呈现出一种刷新设计方案,不同的业务场景可以使用不同的表达。淘宝 APP 里面便根据场景的不同提供了多种刷新方案。常规界面的刷新便以品牌字“淘”作为设计出发点,刷新的过程以动态形式表达品牌字,简单粗暴的传递出品牌感。

图片

 

3.11、结合 Slogan 完成刷新

刷新不仅只是内容的更新,产品设计中呈现出更丰富的表达,比如辅助传播活动、宣传品牌形象和 Slogan 等。产品设计师都在赋予单一功能多重使命,带来丰富多样的使用体验。

58 同城首页在下拉刷新时,除了体现刷新动态以外,也展示了 Slogan “让生活简单美好”。借助刷新入口的曝光度,更快的将产品的定位传递给用户,增加用户对产品的好感度。

图片

 

3.12、保持格调一致的设计

很多小众的产品在设计上面呈现出比较有格调的设计,区别于常规的氛围营造,设计风格更加简约大气。

屋颜 APP 整体的设计风格就属于比较简约文艺,在下拉刷新的设计中也保持了这个风格特征。以生活物品演变出的线形图标体现刷新的过程,整体的过度和衔接也恰到好处。

图片

图片

 

3.13、探索式的刷新设计

刷新设计除了图形、动效、文案等层面发挥以外,背景层发挥的案例相对较少,除了配合传播性质的设计。

AcFun 在下拉刷新时,背景层设计成类似于宇宙空间的插画场景,刷新的过程就像探索一样。配合卡通形象左顾右盼的动效,带来的感官效果也是非常不错的。

图片

 

关于刷新设计的优秀案例很多,这里就不一一例举了,以上案例仅作为抛砖引玉形式的引导。大家根据这个框架多多体验产品,总结更多的优秀案例。

 

 

四、总结

刷新设计作为产品中使用较为频繁的基础功能,与用户的接触也是非常密切的,设计的重要性因此不言而喻。无论是突出品牌感、趣味性、差异化还是强化感官层面的体验,或者是多功能结合等,都是产品设计师重点发挥的模块之一。

本文以案例分析为引导,为大家梳理了刷新设计的形式与思路,希望可以抛砖引玉,带给大家更多的设计灵感。总结观点属于个人理解后的呈现,如有欠缺大家选择性吸收和修正补全。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》刷新设计的千奇百态(UI设计)

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

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

存档