首页

消息通知 | 提升消息推送转化率的必备知识!

资深UI设计者

前言

通知是产品中极其重要的一部分,它能快速将内容的状态及变化通过不同的方式传达给用户,以便用户在收到信息后根据所传递的内容及时做出应对策略。
在这里,有一个很现实的问题,很多产品喜欢一股脑的把有效的/无效的、重要的/不重要的、用户想知道的/不想知道的等所有信息通通推送给用户。那么,你的推送渠道真的用对了吗?是否做了信息优先级区分?推送时间段是否有效?站在用户角度,下面这些场景你肯定碰到过:

◇ 手机屏幕总是频繁弹出信息,接二连三的震动、提示音让你一怒之下卸载了一些不太常用的APP;

◇ 桌面图标99+、主页的消息入口99+、进入消息分类还是99+,清理起来非常麻烦,还不如关闭几个分类通知,少一个也能缓口气;

◇ 一天少看了几个小视频,好不容易节省出来的流量被通知无情的消耗,还不如关闭系统通知权限来得快;

◇ 每隔一段时间,都要在手机短信中回复一大堆TD(退订),想吐的感觉;

◇ ......


在频繁地打扰下,用户关闭了一个个通知权限、甚至一度卸载APP。不难看出,好的消息通知能巧妙的将用户求留住(部分用户利用通知就能保持对微信、QQ的控制欲),做的不好就会起到负面作用、失去了消息通知的初衷,这里面最需要把控就是推送的一个“度”。
用户可能因为一条走心的推送而转化、也可能因为被打扰而放弃使用,站在设计角度,需尽可能打造让用户更喜欢的通知系统。那么,对于不同的业务需求及使用场景,又该如何差异化的进行消息推送,笔者通过本文进行分析总结,与大家一起了解。



分享目录

一、消息推送的基本知识
二、消息通知渠道
三、让用户再次开启通知权限
四、提高触达率的小技巧
五、结语


一、消息通知的基本知识

1.什么是消息通知

消息通知是产品提供的一项服务,能够及时将产品的期待或内容的变化、根据其等级权重合理的通过不同渠道及时同步给用户,常见的如互动提醒、老用户召回、活动拉新、产品更新或帮助提醒等,通过站内红点、弹窗、短信、邮件等方式与用户进行信息交换。


2.消息推送的目的

用户层面,方便及时获取到想要知道的信息、以及对信息交换的控制权。例如:用户发布一条新的短视频想要对评论/点赞及时掌控、给心上人发了信息想在第一时间看到回复...等,产品也是借此用户对内容的控制欲,利用消息推送提升用户的使用体验。
产品层面,通过主动推送想让用户知道的信息,以达到新/老用户转化的目的。例如:通过手机短信形式发放优惠券对老用户召回、应用内通知或桌面推送对用户拉新...等,以此提高产品收益,获取更大的商业价值。

3.通知设计的基本原则

首先,一个好的消息系统首先需要将消息内容设计的全面,以便用户通过消息通知能准确无误的了解到对应内容;
其次,消息的触达方式需合理有效,必须提供便捷的操作入口以供用户及时反馈;
另外,为了避免过于打扰用户,需选择合理的推送渠道,提高用户触达概率及反馈效率。


二、消息通知渠道

消息通知渠道分为应用内通知应用外通知。应用内通知主要来源于消息中心或系统主动触发的弹窗来体现,而应用外通知包括桌面图标红点、手机短信、电子邮件、push、公众号信息(需绑定)等渠道推送。

1.应用内通知

1)消息功能入口
消息功能入口提示也称为红点提示,主要有底部Tad栏、首页右上角、个人中心右上角三种形式。当有新的通知出现时,对应图标的右上角会出现小红点提示,清晰明了,关于小红点设计,之前《小红点篇 | 用好这招,让用户的触达率大幅度提升!》这篇文章有详细说明。
红点提示的用户触达率较高,但需要用户在登录状态下才能查看,比如订单状态变化、用户与用户/产品之间的互动消息、产品活动通知等。

2)消息列表

当产品的消息类型较多时,点击消息功能入口即可跳转至二级分类列表。与上述相比,消息列表的内容则更加清晰,通过第一次消息入口功能的引导触发,这里的用户触达率将成倍增加。

3)弹窗通知

以弹窗的形式覆盖在页面内容顶层,阻碍用户的当前操作并迫使用户对弹窗做出决策,可以是系统主动弹出或用户手动触发,对用户的干扰极大。
弹窗通知最大的优势在于会100%被用户看到,无法忽略,否则将不能进行其他操作,很适合产品的一些重要事件提醒,例如应用升级、活动通知、优惠券引流等。


4)Toast 通知

Toast通知是用户在操作之后给出的即时反馈,与当前页面内容关联性极强,但不会中断用户的操作,出现的时间很短,一般持续3秒后自动消失,对用户的干扰也比较小。
需要注意的是,Toast容易在用户不注意的情况下被遗漏,所以适合用于操作后不影响大局、且不可二次操作、不可逆转的轻量提示,例如删除成功、提交成功等。


2.应用外推送

1)桌面小红点

小红点通常以圆点+数字的形式出现在图标右上角,用来提示应用内的未读消息数量,进入应用查看或清除后小红点则会消失。桌面小红点有一个必备前提,需要同时开启设备和应用内的通知权限方能接收提醒通知。
在部分应用中,桌面小红点具有较大的价值,能对用户产生积极的影响,使用频率得到进一定的提升。例如:社交类应用中的私信、评论、点赞等;商家端的咨询信息、下单提醒等,用户在看到后都会有强烈的点击欲望,对一些数据的提升起到推动作用。


2)PUSH推送

PUSH推送通知常见于设备顶部横幅(几秒后消失)、通知中心以及锁屏后的中部区域,用户可从卡片中的内容获取信息类型及重要程度,用以决策是否需要立即打开。
这种推送方式,用户几乎很难忽略,不处理的话会长时间浮于屏幕之上,非常适合价值及时效性较高的消息通知。除视觉提醒之外,还可通过听觉触达用户,例如支付号、微信的收款信息等,不过依然要同时开启设备和应用内的通知权限。


3)手机短信

短信推送是大家很熟悉的通知渠道了,毕竟现在都是用手机注册账号,手机号获取难度几乎为“0”,常见的有验证码短信(用户请求)、营销短信(产品推送)两种:
验证码类似“一问一答”的互动,没有什么特别的玩法;
营销类短信对于拉取新用户、老用户召回、节日/活动促销能起到不可替代作用,产品可通过短信发送图片、文字以及超链接,内容的时效性、用户的触达率都相对较高。
着重说明一点,因为短信通知的成本较高,在使用之前需要足够的思考分析,细分用户群体做到精准投放,避免所花费的成本与产生的价值不成正比。另外,如果需要放超链接,那么短信内容一定要有足够的说服力及吸引力,总是被用户当做诈骗短信删除、举报的话还不如不放。
为了减少对用户的打扰,让产品更人性化,一般会在短信结尾提供TD(退订)提示,用户回复即可取消后续的推送,但是否真的取消成功,这就得看产品了(¬◡¬)...

4)电子邮件

电子邮件推送方式使用的并不多,一方面需要产品有web端服务,纯粹的移动端APP邮件推送不会有什么效果;另一方面,绝大多数的用户登录电子邮箱并不频繁,还容易被用户一键清理或误删。
电子邮件唯一的好处就是用户可通过超链接直达内容出处,相比APP应用,免去了下载等一系列操作,还可以长时间滞留,便于用户随时查看或添加星标,处理时间段选择较为灵活,很适合web端服务。针对一些商业化的邮件推送,也需要花费一定的经济成本。


产品获取用户邮箱地址的难度较大(邮箱账号除外),不难理解,使用手机号一键登录、验证码登录、第三方账号登录远比邮箱地址登录要方便的多。除此之外,还可以通过个人设置的添加邮箱、问卷调查的邮箱地址预留来获取,不过这就要看用户的主动意愿了。

5)公众号消息

公众号背靠社交应用,普及程度及用户触达率是极高的,不过这需要产品利用部分业务、活动为导向,引导用户关注公众号后方能接收到消息通知。
目前公众号只能向用户发送符合部分场景要求的服务通知,例如刷卡通知、物流轨迹变化、商品购买等。如果预算足够的话,还可以购买公众号列表、内容详情页、朋友圈等产品广告位进行特定用户群体推送,无需用户关注也可以看到并进行转化。


三、让用户再开启通知权限

用户一旦关闭通知权限,对产品来说无疑是一个损失,这意味着没有消息通知的推动,用户的使用频率以及与产品之间的互动显然会减少(就连夫妻之间都需要时常互动与沟通交流,何况对于有选择余地的产品),时间长了,用户转投其他产品的“怀抱”也不是不可能。
有没有想过,用户只是关闭通知权限而已,并没有卸载APP,真的就没办法了吗?是不是该做点什么...


1.寻找关闭原因

用户之所以还未卸载APP,说明还有价值,归根结底,关闭通知权限的原因都是因为消息的“狂轰乱炸”带来的无尽骚扰,几乎没有例外,而产品还会添上一把火,用户再次打开APP时无底线的催促用户再度开启,耗尽用户最后一点耐心后,或许再也没有机会了。
这个时候,设计师考虑的不是频繁提醒用户开启,而是用户关闭通知的真正原因(“狂轰乱炸”只是概括),细化各种可能性,然后从中找出机会点,但凡有所改进都值得试一试,毕竟相比什么都不做不会更糟。这么解释似乎毫无说服力,下面举个例子:
当产品中的某项免费服务突然有一天开始收费了,但受到了大多数用户的抵触,这个时候你该怎么做,是无视用户诉求继续收费、还是恢复到之前的免费?这并不是一个选择题,继续收费会导致大量用户流失、恢复免费可能连维持运营成本都难,所以不经思索的选择草草收场、连下下策都算不上。用户抵触的原因可能收费过高或是与实际价值不符,有没有想过利用限时折扣、附加其他增值服务(成本较小)或者组合捆绑销售也不失为一种策略。
那么,到底该如何做既能愉快的发送消息通知、还能能挽回用户的心呢?

2.引导二次开启

用户关闭通知权限,并非没有需求,最典型的就是在某宝、某东加了满满一“车”商品等待降价,然后抱怨消息通知太吵关掉了通知权限,最后就是无法收到折扣通知、还把问题怪在了APP身上,着实太冤。用户只要还有需求,通知权限就还有被重新开启的机会。

1)损失厌恶/利益引诱

首先,我们需要找出对应的价值点,利用优秀的文案给予用户思考的余地,用户每多思考一会,结果都有可能发生改变。
人们都讨厌失去,对于损失的不可控很难接受,在引导用户开启通知权限时,需要强调不开启会失去什么,毕竟面对“得到”和“失去”时,损失更加让人难以忍受,例如物流产品告诉用户“未开启通知,将错过重要的快递信息”。还可以通过激励等进行利益引诱,如“开启后能及时获取红包卡券、折扣通知”等,并提供快捷通道,促使用户重新开启通知权限。

2)消息分类/分别处理

每种类型的通知都不可能符合所有用户的“胃口”,针对社交、电商类产品,可将通知类型分类处理,用户希望接收哪种类型的消息单独开启即可。
例如支付宝将消息拆分为多个类型;京东还增加了午休免打扰设置,开启后在12:30-13:30不会收到任何消息提醒;微信群过多、消息太吵时,开启免打扰又担心错过重要人的信息,于是微信在去年上线了开启群消息免打扰后、可设置群内4个人的消息正常通知,算是比较人性化的设计了。

3)提供关闭/关不彻底

部分产品提供了关闭消息通知功能,但又关不彻底,这是产品基于妥协的基础上,依然在低频推送消息的“流氓”玩法,与用户完全关闭相比,已经算是不错的结果了。
常见于PC客户端,就像很多软件的插件一样,不管怎么关,总是无法彻底关闭,甚至还将开启操作伪装成其他内容引导用户误触;手机短信推送也会有这种情况,用户回复过“退订”后依然会收到相关短信。


这种方式需谨慎使用,在用户关闭通知后,需通过后续推送内容的质量、频率试探用户底线,然后逐渐提升,切不可无视用户操作。


四、提高消息触达率的小技巧

1.减少重复通知

反复推送相同的内容只会让用户更加反感,回复退订、卸载应用都可能在这一刻发生。
很明显,消息发出后,如果用户的触达率较高就没必要再次推送。反之触达率较低,重复推送会让用户有种被催促、胁迫的感觉,适得其反,触达率低有没有可能是文案不够友好、表达不够清晰或者吸引力不够?即便同一件事情,也尽量使用不同的表达方式,如何想办法重新引起用户的关注才是关键点。


2.言语得当、避免误会

中华文字博大精深,且有56个民族,其性格习惯各异,特别在利用当前社会热点、媒介进行的营销推送时,尽可能规避掉敏感信息,如地域/民族歧视、性暗示等。


3.细分受众群体

很多时候,消息推送太少无法满足产品目标、太多则会惹恼用户导致通知权限被彻底关闭,所以不仅要考虑消息推送频率,更重要的是对受众群体进行分类、分别推送,不要每次都一股脑的将消息发给所有用户,当然,能做到千人千面(成本大)则会更好。


4.内容清晰简洁

没有用户愿意在不明所以的情况下来看长篇大论的内容,需确保消息内容简单直接、清晰易懂,并符合用户认知习惯,还得保持友好的语气以及富有创造力的品牌形象。
处于营销目的时,可利用感兴趣的事件/事物勾起用户的点击欲望,例如网络热词、时下热点等,笔者虽然并不提倡“标题党”,但不得不说,很多标题党都能起到不错的效果。


5.提供“下一步”入口

消息通知需要一个有效操作入口,并且在消息内容中有对应的指向,点击应用内通知切换APP界面、应用外推送链接跳转至web页,从始至终都需要为用户提供一个查看更多内容或参与的有效途径。


五、结语

消息通知设计的主要目的是在正确的时间、以正确的方式将内容呈现给用户,并提高产品的转化率,不管用户愿不愿意接受,这始终都是一个呈现信息的不错途径。
本文主要总结了消息的通知渠道、常见问题处理、提升用户触达率的方法,以帮助新手设计师快速掌握完整的消息系统。或许最终的结果事与愿违,但不能否认其魔力,需要做好的是确保消息内容质量、对应的受众群体及合理的推送渠道,相信总有一种方式适合你产品。


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

文章来源:站酷       作者:大漠飞鹰CYSJ

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

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


2022 PANTONE 最美色彩来啦!

seo达人

一、全新Post-It®Notes

Post-it 与彩通色彩研究所共同开发,推出 11 种全新 Post-it Notes 系列,以令人耳目一新的色调展现色彩的力量。激发创意生产力!

图片

 Post-it Notes 

Post-it 始终提供缤纷的画布,为人们的想法增添些许鲜艳的色彩,而在七年没有重大的视觉转变之后,彩通色彩研究所获选成为 3M 的合作伙伴,在全球推出重新打造的 Post-it Notes 和 Post-it Super Sticky 系列。

 

三种精选调色板包括:

1、花卉幻想

这个调色板充满新鲜芬芳的春季花卉,阳光正面的气息能带来活力与好心情。

2、能量激发

图片

这个系列中活力四射的色彩能点亮您的心情,让讯息清晰透彻。

鲜艳色彩混搭成组,振奋人心的色调以充满活力的配色之姿自然呈现。这些动感活泼的色调使人留下大胆鲜明的印象,传达生气蓬勃的欢乐讯息,以急迫感和力量激励使用者采取实际行动。

3、单纯静谧

图片

透过干净现代的单纯静谧系列,为提醒事项便利贴注入一丝禅意。

和谐混搭干净俐落的经典颜色,呈现简洁外观和平静状态,突显人们对简化、清理和整理的渴望。这几种独特色调稳定可靠且历久不衰,使用温柔且老少咸宜的粉红色来达到强调的目的,传递直接而单纯的讯息,让轻柔的氛围静静地抚慰人心。

 

二、多彩的元宇宙

元宇宙中的色彩:探索色彩在虚拟与现实之间的关系。

图片

1、视觉语言

许多人几乎无法想像生活在眼睛所见只有黑白灰、没有其他色彩的世界;我们已经习惯被色彩包围,色彩更是定义世界的视觉讯号,让我们感知与周遭环境和所爱事物的连结。约有 80% 的人生体验会经过双眼吸收,因此视觉讯号对于传达讯息至关重要。

图片

色彩在元宇宙的使用方式与实体世界大致无异,唯一的差别在于:

实体世界中的色彩有其局限。物体自然会是一种色彩,可以改变,不过需要资源、时间和精力。此外数码光谱中的某些色彩无法在实体世界重现。在元宇宙中,色彩可以立即视需求调整。

图片

元宇宙中的色彩没有任何限制。从你在 Web 3.0 中的外貌到衣着,或者是你拥有的产品,这些色彩都可以随你的心情以及你希望在数码世界呈现的方式改变,不论它们在实体世界呈现的色彩为何。元宇宙将会带来自由。

图片

三、提契诺的色彩

Ticino Turismo 了解色彩会唤起我们对旅游地点的珍藏回忆,并激发未来的旅游计画。因此他们与彩通色彩研究所 (Pantone Color Institute) 的全球色彩专家团队合作,透过各种色彩描述造访瑞士著名提契诺地区的体验。

(点击图片前往原文查看视频)

icino Turismo 与彩通色彩研究所合作精选出五种最能代表提契诺的色彩,用来传达春夏两季访客在当地所见识到的美景与快乐体验。

图片

彩通色彩研究所以这些色彩为基础创造出 Ticino Camellia Pink (提契诺山茶花粉红),用来代表点缀这片地区的艳粉色花朵;Bellinzona Fortress Grey (贝林佐纳城堡灰),这种带有灰色调的暖褐灰色正是当地中世纪城堡呈现的色彩;Brissago Blue (布利萨戈蓝),这是布利萨戈岛周围澄澈湖水的色彩;Lugano Sunset Orange (卢加诺日落橘),呈现当地日落的迷人光彩;以及 Valle di Muggio Green (穆吉奥山谷绿),展现郁郁葱葱的山谷色彩。

 

四、周大福的色彩

彩通色彩研究所最近与周大福集团合作,透过提供包含三种新色调的时尚调色盘,结合中国传统风格和现代审美,借以衬托周大福集团标志性的招牌红色。

图片

全新周大福调色盘体现了融合传统色彩与现代风格的故事。呈现出精致感触、完美品质和现代雅趣,全新周大福调色盘既融合了传统的优雅,也继承了现代风格的美感和精神。

图片

全新调色板:融合中国传统风格和现代审美

为强调大福红 (Tai Fook Red) 浓郁而充满活力的强大吸引力,我们透过暖金色突显出一系列相容的色调,打造和谐的色彩故事。

图片

这个全新调色板展现了对传承、幸福和信念的现代诠释,衬托出大福红 (Tai Fook Red) 优雅、现代且具备宁静力量的特点,透过现代化且积极的态度展现集团对品质的承诺。

 

五、西派金铜  City Park Golden Brass

彩通色彩研究所最近与中国铁建房地产集团有限公司 (CRCCRE) 合作,提供宏观色彩趋势指引并建立招牌色彩,做为该公司的主要品牌视觉形象,用于公司旗下不同的重庆西派城住宅。

图片

这个全新色彩能够向潜在买主传达出重庆西派城的居住环境和生活风格,以及CRCCRE 的愿景:成为具价值的房产开发、工程设计及资产管理商,借此提升中国生活水准,同时解决人们日益增长的需求,满足他们追求自然景观环绕,以及求取身心灵平衡的愿望。

图片

在考量中国生活风格趋势的美学,以及中国居民未来的追求后,我们创造出「西派金铜 (City Park Golden Brass) 」来代表重庆西派城的品牌定位:拘谨、优雅、稳定发展、现代化、年轻且时尚,同时仍支持及推广积极进取的哲学。


作者:刘涛

转载请注明:学UI网》2022 PANTONE 最美色彩来啦!

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


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


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



这样拆解1件作品比看100件都有用

seo达人

案例一:乐乐茶产品海报

图片

 

01.案例名称

品牌:乐乐茶     项目:产品促销海报设计     

产品:草莓桃子超萌杯

 

02.案例目的

宣传88品牌日活动期间,购买草莓桃子超萌杯只要8.8元,以此作为噱头吸引消费者进店下单。

 

03.案例标签

调性:年轻、时尚     色彩:荧光色、渐变色、对比色     设计风格:扁平风、几何色块

 

04.案例亮点

❶ 采用新颖的设计形式,高饱和度的对比色搭配,觉冲击力很强,可以很快吸引人的注意,同时也把时尚、个性的品牌调性展现得淋漓尽致。

❷ 标题的字体设计很好看,与主题内容以及品牌的调性也十分吻合。

 

05.执行细节

❶ 标题的字体设计属于手写风格的等线体,这种字体设计通常是在等线体的基础上,融合一些手写风格的笔画,效果时尚且现代,是近来比较流行的一种风格;

❷ 主要颜色为玫红、蓝色、绿色,其中玫红面积最大,蓝色次之,绿色作为点缀色;海报中的渐变色都会在两个颜色之间加入白色来过渡,这样会避免颜色出现太脏、太花的情况,另外白色还可以使画面更加透气和明亮,食品海报的颜色不能太过压抑和沉闷。

图片

❸ 除了包裹文字的大色块,画面中还有一些小色块和几何图形,这些元素是从产品包装中提取出来的,有了它们的辅助,版面更加平衡、细节更加丰富,增强了点与面的对比。

 

06.还可以优化的地方

❶ 两行中文标题之间的空白有点太大了,中间的英文可以往左边再一点,英文的字间距可以大一点点。

图片

❷ 左下角价格区域的排版不够精致,矩形色块与右边倾斜的产品直线条在视觉上有点冲突,个人觉得8.8可以不放在色块里,或者把色块右边的透明度降低,“元/杯”与“原价15元”调换一下位置更合适。

图片

❸ 产品的食欲还差了一点点。

 

07.启发与思考

❶ 一件海报作品的调性是由多方面的因素决定的,比如色彩、字体、版式、图形等等,要综合运用这些因素才能达到理想的效果。

❷ 如果品牌的目标消费群是年轻人,那么其设计可以用非常时尚、酷炫,甚至是个性的设计风格。

❸ 在食品海报中,产品本身的食欲永远是重中之重。

 

 

案例二:认养一头牛包装设计

图片

图片

图片

这款包装由知名设计公司喜鹊包装实验室设计。

 

01.案例名称

品牌:认养一头牛      项目:产品包装设计     产品:娟姗牛纯牛奶

 

02.案例目的

❶ 通过包装设计让消费者感受到这是一款进口的、高端的纯牛奶。

❷ 打造一个具有高识别性和销售力的视觉形象,带动销售。

 

03.案例标签

调性:高端、尊贵、健康       主色:欧洲皇室蓝            设计风格:彩铅插画

 

04.案例亮点

❶ 通过打造一个拟人的贵族娟姗牛形象,把认养一头牛IP化,比较直观地展现了产品的高品质;同时也增加了产品的记忆点。

❷ 包装的整体形象简单、高端、且独具特色。

❸ 包装中的IP形象画得很精致、很传神。

 

05.执行细节

❶ “纯牛奶”的字体使用长宋、并弱化了笔画的衬线部份,使字体更具高端、现代的调性,且识别性很高;

❷ 主色为欧洲皇室蓝、既与市面上的高度牛奶产品进行了有效区隔,同时在调性上也满足了高端、优雅、健康的需求。

图片

❸ 把牛的形象设计成拟人的贵族牛而不是普通牧场里的牛形象视觉上更特别、也更容易被记住。

❹ 包装正面的形象非常简单只突出品牌logo、餐品名、ip形象。

❺ 侧面通过icon和文字的方式简单展示产品的卖点,进一步促进人们购买。

图片

❻ 烫金和烫银工艺的恰当使用,进一步提升了包装的品质感。

 

06.还可以优化的地方

❶ 侧面icon的设计不够精致和直观;

❷ 纯牛奶的字体设计仍有优化的空间,比如纯字的“纟”偏旁和竖弯勾笔画稍微粗了一点。

图片

 

07.启发与思考

❶ 打造iP形象仍包装设计中行之有效的一个方法,特别是对于快销品,但也不是盲目为之,该款包装这么做是因为“认养一头牛”这个品牌名就自带ip属性。

❷ 减少干扰、让你的包装有且只有一个焦点。

经葱爷这么一分析,是不是对这些作品的理解加深了不少,像以上这种拆解案例的思路,葱爷会很频繁地分享在葱爷知识星球里,以供大家参考和学习,并且葱爷还会组织星球里的成员一起做案例拆解的打开,帮助大家学习如何正确拆解设计案例、养成拆解案例的习惯。


作者:葱爷

转载请注明:学UI网》这样拆解1件作品比看100件都有用

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


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


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



在UX/UI设计中使用网格系统的5个技巧

seo达人

一、六种网格类型

每种类型的网格都有不同的用途,通过了解不同的网格类型帮助我们在设计的时候匹配最合适的网格。

 

1、 基线网格

图片

基线网格是由等距水平线组成的密集网格,用于确定文本的位置。基线网格通常与分栏网格结合使用,以确保每列中的文本在界面上均匀对齐。

基线网格最简单的示例是一张划线纸,准确清晰地展示设计元素的位置。

图片

 

2、单栏网格

图片

单栏网格是最基础的形式,用来确定文本在页面中的位置,多用于书籍、杂志等以文字为主的版面设计中。 

 

3、分栏网格

图片

图片

这是日常设计中最常使用的网格类型,将一个页面拆分成多个垂直区域,然后将对象与之对齐。

报纸和杂志的排版设计、网页和APP的设计都会广泛使用分栏网格。

图片

 

4、模块化网格

图片

模块化网格是柱状网格的扩展,采用垂直方向的列并添加水平的行。相交的行和列创建“模块”,可用于管理内容较为复杂的界面或者海报设计。 

 

5、像素网格

图片

在用Photoshop作图时,不断放大画布,会看到画布上有密集的像素网格出现。

数字屏幕是由数百万像素的微观网格组成的,为了设计的准确性,设计师需要逐个像素地编辑图像,同时也练就了“像素眼”。小到一个icon,大到整个网页,都可以借助像素网格来完成。

图片

 

6、层级网格

图片

层级网格是指按照内容的重要性来组织界面元素,让用户能够按照主次的层级顺序浏览界面。层级网格主要用在网页设计中,形式比较自由形式,大多数是结合网页的内容来确定。

将界面中的内容进行优先级排序,按照层级结构清晰展示内容的优先级,为产品提效。

图片

 

 

二、在UX/UI中使用网格的5个技巧

在工作中尝试使用网格系统时,下面的关键要点能帮助我们实现有效、灵活的设计:

 

1、规划网格与页面的关系

图片

在《平面设计网格系统》这本书中,作者强调网格在页面中的位置以及页边距的设置对网格的功能和美感有很大影响。合适的页间距和留白会让页面看起来更舒服。 

 

2、不要只使用网格设计

图片

当接到一个全新的需求时,很多设计师习惯以常用的网格和栏宽作为标准开始设计。

虽然常用的网格系统设计起来更熟悉,但花时间弄清楚当前的项目实际需要什么样的网格,以及是否有其他需要考虑的因素也同样重要。这样做能够避免我们被困在一套网格标准中,限制设计的发挥。 
 
 

3、保持设计元素在网格内

图片

网格中每一栏之间都会有间距作为分隔,当页面中的文本和图形跨越多栏时,需要保持内容在网格每一栏的边缘,避免将元素放到间距的边缘。

图片

 

4、不要忘记基线对齐

图片

确保基于列的设计中的所有文本遵循一致的基线,这样可以大大改善页面的和谐感和组织感。

在数字设计项目中,基线对齐很容易被忽视,但它可以很好地平衡设计,对齐后页面会有更舒服的视觉效果。 

 

5、考虑使用8pt网格进行设计

图片

我们的设计必须能保证在各种设备和屏幕分辨率下都能工作并且看起来很清晰。使用基数的倍数的尺寸和间距有助于使设计过渡清晰和系统化。

现在通常使用8pt网格,这样无论是矢量设计还是基于像素的设计,都可以在视网膜屏幕上完美缩放。 
 
 
 

最后

以上是在UX/UI设计中常见的6种网格类型和5个技,希望通过这些内容能让你对网格系统的应用有更深的认识。


作者:Clippp

转载请注明:学UI网》在UX/UI设计中使用网格系统的5个技巧

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


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


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



如何通过设计语言手册来传递品牌理念!

seo达人


图片

本次以3.0时代加入以人文中心主义的设计,人文感官品牌情怀社区为方向发起升级!58到家作为一款为消费者提供家政服务的产品,致力于为消费者带来品质生活!设计语言的存在需要将用户、产品、服务进行结合,并在不同服务中保持统一的展现,从而对体验和商业上带来价值。

我们将产品划分为三个阶段:

1.0:满足了以产品为中心的设计,达成生产售卖通顺闭环;

2.0:满足了以消费者为中心的设计,考虑更多用户体验;

 3.0:加入以人文中心主义的设计,人文感官品牌情怀社区。

图片

那么明确了我们本次升级的方向后,制定了整个产品的框架,底层加入了人文感官品牌情怀的相关因素,再应用到我们现有的业务上,在协同上进行高效的链接,产品到设计,设计与设计,设计到开发。最终形成了我们的前台展现页面。

 

 

图片

最适合用户的设计语言手册,才是合理的,那么在3.0阶段的人文感官品牌情怀,核心即为人,也就是我们的用户,首先我们要了解用户的情感诉求。

图片

根据我们的用户画像以及多轮访谈调研, 得知用户的相关正负情绪。生活当中家务工作的角色分配问题,一直是经常出现的一个场景。用户希望通过我们的产品服务,来提升生活的幸福指数!

在以此为前提的背景下,用户希望我们是专业标准化的省心高效的温暖温馨的舒适的具有亲和力的等等。最终都会期望以更有品质的生活而结尾,那么“品质生活”即为我们需要来传递给用户的情感。

 那么品质生活是什么呢?

图片

其实用户对我们的要求是一款提升生活品质及愉悦感的产品,而非工具。

 

 

图片

综上所述,我们确定了以品质生活成为我们的本次设计语言升级的slogan,再结合业务的自身特性,我们进行了详细的拆分后提炼出了以下相关关键词,来满足用户更多的情感诉求。

干净明亮 

居住环境的洁净会带给人更多舒适惬意的感受。首先对品牌色进行了升级,使其更鲜明。也延展与其相匹配的辅助色来打造出完善的色彩体系。

图片

 

阳光照射在屋子里,用户惬意地躺在沙发上,光总是能给人温馨温暖的感觉。针对光束进行了深度剖析,过滤掉了光源生硬的进入以及具象光源的展示方案,最终确定使用相对适中的渐变色。

专业 

专业是线上线下综合诉求的结合体,那么在线上加强品牌背书、有迹可循的一致性来达到满足所的情感诉求。

高效 

用户携带诉求而来,那么减少用户感到麻烦的情绪,对产品的识别清晰、操作便捷提升是最直接影响的。

亲和力 

服务行业需必备的能力,微笑服务也成为了我们的业务情感透传标准。提炼出微笑符号结合我们的实际场景进行运用!

慢生活… 

在对用户的相关情感诉求结合业务进行了落地后,对效率类设计原则也进行了相应的升级。

 

 整体架构 

应用整体架构也是一个应用对外呈现的基础结构,是系统风格的体现形式之一,除了特殊设计诉求,通常情况下,应用需要使用通用的应用架构来保持系统的一致性和用户操作的易用性。

图片

 栅格系统 

布局不是静态固定的,栅格系统在一个应用内的重要程度不言而喻。我们设定了以4dp / 4pt为基数的栅格系统。

图片

 文本原则  

文本作为产品中用户获取信息的主要信息载体,字号大小和字重决定了信息的层级和主次关系。对字号、字重、行高以及组合字体进行了设定,为不同的场景创造了层级分明以及清晰的信息读取体验。

图片

 间距参数  

针对页面内容区域的通用元素间距进行了分类。设计师结合具体场景的情况,来调用间距参数的适配逻辑。以此来结合栅格系统进行更好的适应相关视觉元素符号的对应变化。

图片

 圆角参数  

结合业务属性保证亲和力的透传,在产品尽量避免出现锐角图形的设计表达手法。故此针对圆角的大小也进行了系统级别的定义,进行深度统一管理!

图片

语意原则及动效等,并依据相关设计原则产出了组件库。

 

 

图片

在多元化的产品时代,时刻关注并满足用户的情绪,是产品能脱颖而出的关键!在建立设计语言手册时从提升用户体验和满足商业价值整体考虑,挖掘流程当中线上线下的触点,多维度思考并总结落地,深度传递品牌理念。

设计语言手册更多时候是一个相对宽泛的阈值,并非组件的固定值,在某些业务场景下能为用户带来增值体验或较高商业价值时,可以被打破。最后,核心就是在搭建语言手册时应思考更多“为什么”这么做!


作者:58UXD

转载请注明:学UI网》如何通过设计语言手册来传递品牌理念!

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


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


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



中后台产品的产研协同提效调研

seo达人

一、目前有哪些提升设计与前端生产力的方案

1、D2C(Design To Code)

D2C(Design to code)这个模式我们非常熟悉,其本质是将设计师的设计资产转化为代码,让前端工程师可以快速的复用,在这个成熟的领域主要分成两大类:「设计资产类」和「设计对接类」

a. 设计资产类

设计资产类是完整系统的规范和代码进行沉淀形成设计类的资产,这一类的产品在市面上目前是属于主流,产品有网易的Fish Design(网易自研)、Ant Design、Arco Design、Element 等,这些产品都是将组件化的设计资产转化为代码资产,方便前端工程师在开发 B 端产品页面时可以快速引用,提升开发的效率。

图片

b. 设计对接类

设计对接类又分成「设计稿查看类」「设计稿代码生成类」两种类型:

设计稿查看类:主要是 D-box(网易自研)、figma、蓝湖等可以让前端工程师在线查看设计师的设计稿并提供一定的转化代码方案,主要是为了保障产品的还原度。

图片

设计稿代码生成类:最近两年为了彻底的解决还原度的问题,让前端工程师专注的解决代码问题「设计稿代码生成类」也开始在市场崭露头角。

比如:Imgcook、Codefun,直接复制设计稿地址进入软件内部转为代码文件,直接导出完整的静态页面代码,减少开发过程中的样式调整问题。

直接导出整页代码模式的小缺陷是无法满足开发中:代码精简(ai 智能生成的代码对目前还达不到开发人员喜欢的程度,较为冗余)、控件交互、绑定数据等几方面的需求,但是比如在一次性的静态页面的实现中还是能够达到提效的目的。

图片

结论:D2C模式的产品相对独立,从定义还原度「设计资产类」、保障还原度「设计稿查看类」、解决还原度「设计稿代码生成类」层层递进,可以有效提升设计师和前端工程师的生产效率和协同效率。

但在目前竞争激烈的大环境中,优秀团队的效率提升已经达到瓶颈,而提效的本质是为了比竞争对手更快更好,当所有人都有了相同的东西时,提效的目标可能就需要从别的地方打开缺口。

 

2、C2D(Code To Design)

C2D(Code To Design)「前端代码转设计稿」这个模式对于设计师相对模糊,不过国外的企业已经做出了探索。

比如:2017 年Airbnb 发布的前端开源模块 React Sketch.app,其核心理念是用代码做设计。第一次看到的时候感觉真的很酷,通过 React Sketch.app 直接在 Sketch 设计软件中编译出设计界面,代码也可以直接在项目中使用。

图片

还有另外一个产品叫 html-sketchapp,通过在输入框中输入网页地址就可以直接在 Sketch 中生成可编辑的设计界面「网页转设计文件」,通过任何前端代码都可以转为设计资产的文件,甚至直白一些说就是参考成熟产品做设计,适度借鉴吧。

图片

结论:目前的 C2D 的市场方案对于设计师而言不够友好,无法让设计师可以直接使用,都需要工程师来完成转换,同样也会遏制设计创新,陷入同质化的泥潭中。

但这个模式,却非常适合“有意”借鉴参考成熟或者竞争对手的项目团队,可以快速达到同类型产品的基准水平。

 

 

二、针对目前现状,什么样的方式可以实现提效?

从我们当前的工作流程来看

图片

在这个流程中设计最在乎的就是设计阶段的表现需求和前端的设计还原,为了保障精准的表现需求,在设计阶段需要大量的沟通和风格尝试。

在前端还原阶段需要和前端不断的扣细节,输出几百条信息的走查文档,那应该如何解决这些问题?

图片

答案就是「 C2D2C」的模式

 

1、C2D2C(Code To Design To Code)

C2D2C(Design to code to design)的模式,将流程中的设计表现和前端还原阶段的通过设计标准化和研发工业化的方式进行流程优化,减少设计和前端开发的参与,实现中后台研发流程的整体提效。

图片

在十几年的发展里互联网行业积累了大量的设计资产。

这些设计资产的沉淀是设计标准化的基础,将设计资产转为封装好的代码组件也就是 D2C 的过程。将封装好的组件通过低代码平台进行属性配置、搭建页面、布局调整实现页面的设计就是 C2D 的过程。

通过平台设定交互行为和绑定后台数据,完成整个系统,最后在进行站点发布,就实现了 C2D2C 的完整流程。

图片

C2D2C 的模式是设计资产与线上智能化布局的代码方案(低代码平台)以及后台数据绑定的结合,将以前的人工分工通过智能化方案综合一体去解决。

但这个过程不是僵化死板的模式,在C2D环节实现“设计->前端”的高还原度下快速落地,在D2C环节下实现“低代码平台->自有产品”的灵活调整下快速复制。

结论:随着社会的发展,标准化和智能化的产品线都将会被人工智能取代,互联网行业也正在向这个方向发展,所以设计的标准化和开发的工业化就像手工业向工业化的转型,这是一个大的趋势,未来可能一天的时间就可以生产数套后台产品,这样的生产效率才能跟上中国的数字化转型浪潮。

 

2.、C2D2C 的市场化

低代码平台 是 C2D2C 模式得以实现的核心平台,从2018 年开始海外投资开始关注低代码平台,OutSystem 平台获得 KKR 和高盛的 3.6 亿美元的融资,成为了低代码赛道的独角兽,另一家低代码创业公司 Mendix 被西门子以 7 亿美元的价格收购,资本市场的关注让低代码赛道开始火热起。

而国内的低代码平台是从 2020 年疫情肆掠开始,疫情助推了在线办公的发展,国家也在大力支持数字化经济,更多的企业开始数字化转型,这也让低代码在国内有了飞速发展的土壤。

目前海外比较成熟的平台主要是 OutSystem和 Mendix,而国内也有很多已经商业化的低代码产品,像网易轻舟等,已经开始投入商业化的使用,可以从网易轻舟的低代码产品架构,清晰完整的看到C2D2C模式的所需要具备的能力。

图片

网易轻舟从业务角度出发,具备持续迭代能力、组件具备可扩展性,并且可以为企业进行私有化部署,部署完成后可以和存量系统进行集成,交付后具备非常好的可运维性,是一个成熟的商业化平台。

网易轻舟目前已经服务了包括工商银行、吉利汽车、申万宏源证券、泰康人寿、台州银行等包括政府产业平台30家,从服务的客户我们也可以看的出来,低代码产品在大型企业中落地更有优势。

结论:C2D2C 的模式已经得到市场的验证,研发工业化可以更加高效的提升中后台产品的研发效率,设计标准化也可以减少中后台设计师大量的重复性劳动,对于中后台的业务产品,可以大胆地选择一个富有实力低代码产品。

 

 

最后

低代码平台的使用需要同时具备一定的代码能力和设计能力,这不管是对开发还是设计师都具备一定的门槛。目前的低代码平台使用角色应该是前端工程师,复杂的后台交互平台还是需要设计师的深度介入。

低代码平台的诞生减少了中后台设计师大量的重复性工作,可以让中后台设计师将更多的精力投入到用户研究和提升用户体验上。拖拽式的 UI 和智能化的布局以及良好的用户体验和以前的开发相比较,在中后台的开发上更加的高效也更加的智能。

在最初调研到低代码平台的时候,行业的快速发展和成熟,让我下意识的反应是中后台的设计师可能要失业了,但是在调研了平台的使用和深入的思考后,我觉得这是中后台设计师的机会。C2D2C 模式的最优解应该是 0 代码方案,而使用 0 代码平台最好的角色就是设计师。设计师专业的审美和对于用户体验理解的深度都是其他职业所不具备的,未来的中后台设计师更应该将自己的精力投入到平台流程的优化和用户体验的研究中去,这也在未来 0 代码平台到来后,我们才能更快更好的投入到新的生产中。


作者:程鑫

转载请注明:学UI网》中后台产品的产研协同提效调研

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


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


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



5000字,作品集中的推理部分该怎么写!

seo达人

图片

现在很多公司面试UI都会面试交互能力,问你设计方案的推导、怎么量化、怎么分析、怎么做深度的设计思考等等,所以呢大部分设计师在本身视觉能力没那么强的情况下,无奈在作品包装中加入了推导分析的文字部分,结果,问题又来了,这些分析过程和推导其实是经不起推敲的,因为往往在实际工作中,大部分设计师没有真的运用过这些方法、数据,靠的是参考市面上的作品集从而包装出来,也就经不起面试官的深问。最后作品集也成为了四不像的结果。

那么如果我们的设计基本功没那么强,但又想展示自己的思维能力该怎么做呢?我在这里并不是教大家怎么去编和套设计流程的框架和理论,而是希望大家能明白,如果要放你的思维过程,应该怎么正确的去放,如果真的没做过,我建议不要去硬套,很容易漏洞百出。

 

设计师的定位和价值

一个项目的推导过程首先要明确,你在项目中扮演的是什么角色,你在整个项目中的价值是什么,是独立负责?还是某一个环节的执行者?我相信很多同学都想把自己包装成一个独立负责人,恨不得整个产品从立项到调研到分析到执行都一个人包揽,但你越这样去包装,作品集内容就越零散。

作品集主要展示的是你个人的能力,而不是让你去描述和介绍你的产品。很多同学都变成了后者,比如先描述项目背景、产品的用户群体是什么、每个功能模块分别是什么功能…..这样的方式去包装作品真的味同嚼蜡,没体现能力不说,还很枯燥。

图片

 

 

一、讲故事

其实我们可以用讲故事的框架,来整理项目流程以及展示你在项目中的价值。在上学的时候老师会跟我们说,要讲清楚一件事,需要分别理清楚三个阶段,分别是:起因、经过、结果。所以我们现在要讲一件什么事呢?我们要讲的是,你是如何通过设计手段帮助产品/用户解决问题的。

那么我们就可以用起因、经过、结果三个阶段来阐述我们是怎么解决问题的,把这个逻辑给梳理出来。

 

1、起因

起因包含了

1.有哪些问题/机会

2.你是怎么发现问题的(为什么要做这个项目)

3.导致问题出现的原因是什么

图片

比如我举个例子,我发现我家厕所外墙开始掉粉脱落,甚至时不时的浴室柜下方会流出一些水,所以我怀疑是不是哪里漏水了,在这里我用的是观察法,用观察法很直观的看到了问题。接下来我要去找到问题的原因,到底是什么原因导致了外墙掉粉脱落以及渗水的问题。于是我先自己做了一个假设,是不是埋在地下的水管破了?因为之前有用过腐蚀性很强的通下水道的药剂,但是这个原因被我排除了,因为如果水管漏水那么就会一直漏,而不是间歇性的出水。那还有可能是什么原因呢?浴室柜中下水管堵塞导致水流到了没做美缝的缝隙中吗?还是楼上漏水渗下来了?

图片

最后经过多个原因的排除,问题找到了,是由于楼上确实漏水以及淋浴间下水不畅长期积水导致水从下水管口子边上的缝隙流了过去,两个原因。

 

所以我们再回过头来看,作品包装中起因应该说明哪些事项:

1.1和2可以合并在一起写,比如通过xx方法我们找到了目前产品中存在的问题,也可以写我们找到了xxx问题,是由于我们用了xxx方法。

 

2、你是怎么发现你产品中存在的问题的?

是自我经验的观察判断?还是通过数据分析找到的某个现象(比如一个板块的点击率在逐月下降)还是通过对用户访谈或者体验地图找到了某些体验问题?你得采用一些方法,越客观越好,比如很多同学在找问题的时候总会用一些比较宽泛的修辞来描述:首页结构不合理、层次不清晰、体验较差,所以看到这样的描述,我就想问,那么具体不合理、不清晰、体验较差的点在哪里呢?为什么你觉得不合理、不清晰、体验较差?是你的主观感受?还是数据表现?还是客户的体验?你得证明出来。所以问题的来源是很多的,有的是你专业经验的判断,有的是用户的反馈,有的是数据的表现,都不一样。

图片

 

3、导致问题出现的原因是什么?比如很多同学做改版,改版原因他们就写:结构不合理、层次不清晰、体验较差…..这个是不对的,改版原因应该是,由什么具体事件,导致的结构不合理、层次不清晰、体验较差,比如通过对用户在支付任务流程中的数据表现,我发现经常有用户在支付流程中跳失,导致转化率下降,因此我们调研访谈了10个在支付流程中跳失的用户,其中8个用户在准备支付的时候找不到编辑收货地址的功能,于是他们放弃了这次支付,这个问题凸显的就是核心功能没有满足用户预期,有效性差。至于样本量的问题我就不展开了。

很多同学在第一阶段会放很多产品的一些市场研究、定位,这些其实一点用也没有,雷声大雨点小,一开始切入点很大,结果这些点对描述你的设计能力没有任何帮助,并且在后面的设计方案和策略中也完全不能体现出来有什么关联。不如聚焦一点,针对问题直接进行展开。

 

小结一下,起因包含了3个问题,这三个问题可以通过几种方法来解答:

1.你是怎么发现问题的(经验判断法、渠道反馈法、用户调研法、数据分析法、可用性测试…..)

2.有哪些问题(卡片分类法、kano模型、价值分析法……)

3.导致问题出现的原因是什么(经验判断法、用户访谈、观察推测……)

 

 

二、经过

这个阶段就是用来体现你是怎么解决问题的,这里我们就要来讲到解决问题的策略和逻辑了。诸葛亮草船借箭大家都听说过吧,这个事件的问题在于缺箭,为什么会缺箭呢?原因是没有足够的时间和材料来制作那么多箭矢,要解决这个问题怎么办呢?招募更多的士兵?收集更多的材料?采用缓和之计争取时间?显然这些策略是无效的,那怎么办?内部不行,只能靠外部来解决,于是就有了草船借箭。

再举个例子,这两天有点头痛(问题),医生说头痛可能有多种因素造成的,例如睡眠不好、颈椎有问题、受凉、压力大等等(原因),所以为了解决这个问题,我就可以有几个不同的策略,如果是睡眠导致的,那么我就通过改善睡眠质量来解决,如果是颈椎导致的,那么我可以去找中医做一下推拿,这些都是解决问题的策略。

所以在经过阶段你必须讲明白你是怎么选择一种合适的策略的。举个例子,比如有一个新的电商产品上线了,并合作了一些大品牌,但是我们发现这个品牌的销量还不如一些不知名的品牌来的高(问题),于是我们通过第一步的研究起因,发现用户之所以不买单,是因为他们觉得这些大品牌在你们平台卖的是不是假货(原因)。那么为了解决这个问题,我们就要研究一下具体的策略,怎么样能够让用户对该品牌产生信赖,而我们又如何才能让用户知道这个品牌是正品呢?

图片

策略1:透出品牌资质和曝光度:告知用户我们有品牌授权的资质

策略2:给予用户更多保障:给用户产品质量的售后保障和检测权利

策略3:让用户提前进行体验:可以给部分用户试用

经过分析以及成本权衡,策略2和3实施起来较为困难,成本高,于是策略1是一个比较好的选择。那么具体的方案就要到第三阶段来呈现了。

 

再举个例子,抖音大家都有用过吧,在之前的老本版中,有用户想查看当前视频的上下集,非常不方便(问题),因为需要点击或者侧滑进入作者首页,然后经过滑动才能找到当前视频的位置(原因)。所以为了解决这个问题,如果你是抖音的设计师,你会有哪些策略呢?

策略1.提高用户查看视频的效率:直接给用户定位到当前视频

策略2.提高作者制作系列视频的便捷性:可以让用户不用进入主页也能看到上下集

 

所以,小结一下,“经过”这个阶段中找策略我们依然也可以用到一些方法:上瘾模型、aarrr模型…..但是这些模型我是不建议大家在作品集里写的,太形式化了,在大厂的设计流程中,设计策略基本上是通过产品和设计的经验判断给出的,不会真的说是靠这个模型工具而产生输出的策略,比如像我们说“给用户一种温暖的感觉”,这是一个设计目标也可以是一个策略,但它很难说是由哪个方法论或者工具提炼出来的。

 

 

三、结果

结果,也就是我们通过设计目标和策略,选择具体的设计方案。在作品集中,设计方案给面试官展示,这其实没那么重要。面试官想看的是什么呢?是你虽然最后给出了a方案,但是在设计过程中,有没有b方案和c方案,最后让你选择a方案的理由是什么,你是怎么思考的,也就是方案的由来。

这个才是我们展示能力的最好表现。以上面的抖音为例,通过策略1,用户点击主页可以直接定位到当前视频的区域以便用户查看上下集,如果直接根据这个策略设计方案是很简单和直观的,只要定好位,并给用户一个当前正在播放哪个视频的状态,做个标签即可。

但是最终方案并不是这样的,而是当用户侧滑或者点击头像后先定位到的是用户主页的头部区域,而在右下方给了一个“刚刚看过”的按钮,点击按钮才会定位到刚刚正在看的视频。

 

图片

 

这两个方案显然是有区别的,为什么不直接定位,而要多给出一个“按钮”呢?原因就在于抖音更希望观看者和作者能够更多的产生互动和链接,提高作者的关注率,让观看者先看到作者的主页,再去查看刚才的视频,因为只有你关注了作者,作者才有更多动力去制作视频,同时关注作者也会为你个人的偏好附上一个大的权重,以便于做更精准的推荐。 

这是对于两种方案的解读,所以方案a和方案b,为什么选b不选a,这就是理由。当你的方案呈现在作品集中,面试官就会这么问。

通常在做方案的时候,大家也总会用到竞品分析,竞品分析是一把双刃剑,它可以让你的方案至少不会出大错,也可以让你的方案没有特点,所以这也很考验设计师是怎么将产品业务的定位、用户属性、业务目标的差异化结合到方案中去的。竞品分析大家也很喜欢单独拿出一个板块放在作品集里,咱先不论有没有真实操作过,放在作品集里的内容,一定要有目的性,大家仔细品一下这句话。你想要通过放这块内容告诉面试官什么?是你拿了一堆竞品做了比较和描述,还是说你能够结合自己业务和用户的特性,找到和其他竞品设计差异化的点,最后应用或指导到你的设计方案中去?

 

结果阶段除了方案的探索、权衡外,还需要进行验证和复盘。虽然咱们花了很大的力气,从发现问题到找到原因,再到定义目标和策略,最后选择方案,但并不意味着最后的结果是好的,因为我们不知道我们的方案到底有没有解决最一开始的问题,你原来头痛,最后选择了吃药,结果吃了一个月,还是没好,那就说明:1.问题原因不对 2.策略有问题 3.药吃错了。所以如果你要以结果为导向,那么最后的验证和复盘不可缺少。那有同学说,我们公司没有数据,没有用户,那我要怎么验证呢?那我劝你好好跟产品或者老板去谈一谈,虽然你想操这个心,但是老板都不在意那也没有办法,但是你在面试的时候需要表达出这样的思维。

 

  

总结一下 

再说一下,分析推理部分,不是UI/UX作品集必备,你想做纯视觉包装作品集也可以,但我们要清楚,你应聘的岗位要求是什么,而你的作品集和岗位要求是否能对应起来。现在的一些公司要求都很高,UI和UX都成为了标配要求,所以我们尽可能要把这两块都在作品集里展示出来。有人说,我实在没做过这些东西,让我编也编不出来怎么办?那就从今天起试着开始主动找找产品存在什么问题,然后去解决它,试着走一遍:起因、经过、结果三个阶段,我相信你一定会有收获。 


作者: 应骏

转载请注明:学UI网》5000字,作品集中的推理部分该怎么写!

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


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


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



卡片式设计 | 掌握这些技法,快速提升界面效果!

seo达人

一、卡片式设计的定义

1、什么是卡片?

早在互联网时代之前,卡片就出现在了我们生活中的方方面面,如名片、不干胶标签、便利贴、会员卡…等,不管是何种类型的卡片,它都将代表着我们现实生活中的某个特定信息。

图片

卡片指的是含有图片或文本信息的容器,它将我们需要的信息归纳在一起、并形成独立的个体,以至于后续被引用到线上界面中,同样具有非常不错的信息归纳效果。

 

2、互联网中的卡片式设计

卡片本身就是一个完整的信息区块、并同时承载丰富的互动方式。在UI设计中,个性化和美感兼备的卡片式设计具有很强的易用性,它是一个UI设计组件,将标题、文本内容、图形/图片进行整合并模块化,让信息的表达更加直观、操作也更便捷。

卡片式设计之所以能成为当今比较流行的趋势,是因为它能让界面信息更有层次感,从设计、交互、视觉以及用户体验等各方面来看,都有不错的优点。站在用户角度,即便不太理解卡片的概念(也不需要理解),但能快速知道如何使用它,相对来说,学习成本也是极低的。

图片

 

 

二、卡片式设计价值

1、结构清晰

卡片在占用屏幕空间较少的情况下能够将不同大小、不同类型的信息内容按逻辑进行分组呈现,使界面结构更加清晰。相比纯粹的留白或分割线,卡片不仅对信息作出了分割,其本身还是一个独立的容器,让归纳组合后的信息能快速突出重点,将复杂内容简单化处理。

卡片式布局整齐简练,清晰的信息结构有助于用户浏览,方便快速找到自己感兴趣的内容,避免用户产生一种费时或感觉内容超长的恐惧感,还能节省更多的时间成本。最常见的就是信息列表、图文混排等,不仅做到了视觉上的美观,也达到了平衡文字及图片强弱的效果。

图片

 

2、场景拓展

卡片式设计有利于场景拓展,他能在信息不断增/减的情况下、页面依然能组成一个连贯的整体,在视觉上毫无违和感。例如支付宝在头部插入的广告引流入口、淘宝在节假日增加二层楼…等。

图片

 

3、空间扩展

卡片式设计一度打破了移动端多为纵向操作、原有传统的列表式布局,在空间有限的移动端设备中,还能很好的利用横向空间。将横向滑动区域的最后一个卡片漏出一小部分(若隐若现才是诱惑),不仅能给予用户更多选择与期待,其空间利用率也得到了很好的扩展,在展示更多内容的情况下依然能保持模块的整体性。

图片

 

4、突出重点

卡片式设计能很好的通过边界衬托出内容的整体性,特别是在电商类产品中的首页头部、瓷片区、营销引流区将其应用到了极致,即便在卡片数量较多的情况下,用户依然能清晰的感知到内容的归属层级以及重要信息。

图片

 

5、兼容多端

卡片作为一个容器,它可以自由无限的等比缩放,非常适合响应式设计。在手机、iPad、电脑等屏幕尺寸复杂的情况下,通过放大缩小或增减纵向排列数量的方式配合响应式的断点设计,让同一界面在不同设备之间轻易的创造出一致性的视觉体验。

图片

 

6、易于操作

卡片给人最直观的感觉就是可以操作,它不用箭头、按钮或超链接等引导性的视觉元素提醒,节省了一定的页面空间,还有着更大的操作热区,无需做到精准点击。卡片式设计很容易融入各种交出手势,如单击、双击、长按、拖动、滑动等,为用户提供更多便捷的操作。

 

7、跳转流畅

卡片可通过缩放的形式充分利用动画进行页面跳转,例如App Store“Today”频道,点击卡片后直接等比放大至全屏,给用户一种还停留在当前页面的错觉,避免了传统的跳转页面而造成的信息割裂感,流畅丝滑的过渡,给用户更自然的交互体验。

 

 

三、常见的卡片式设计样式

1、四周留白

这种类型的卡片在UI设计中最为常见,柔和的圆角、边缘阴影以及四周很自然的留白,让内容模块的存在感更加强烈,整个页面信息的层级也更加清晰。

图片

 

2、悬浮内容之上

悬浮型卡片并非模态弹窗,与其相比,悬浮卡片不需要主动操作触发,可作为临时控件或长期固定显示,并且比模态弹窗能承载更多信息内容,可通过伸缩来定义卡片中的信息数量,或多、或少、或展示、或隐藏,在页面中非常灵活。

例如高德地图首页,搜索框及右侧的功能入口长期悬浮在地图之上,而下方卡片中的内容会随着高度的伸缩自动调节可展示的数量,非常实用。

图片

 

3、通栏类型

通栏类型的卡片具有更强的视觉阻断,对区分不同的功能模块有不错的效果,不过这种类型只通过页面背景色保留上下边间、且不会过多,不然页面会显得零散、杂乱。

图片

 

 

四、卡片适用场景介绍

1、瀑布流

瀑布流主要正针对图片较多、或以图片为主的内容设计,它最大的优点是无需过于在意图片的高度,最大限度的还原原始图片效果。

卡片式设计的瀑布流对信息的组合、包容性更强,不仅能在单屏区域内显示更多内容,同时又将每组信息组合作出了明确的划分,在不破坏页面整体性的基础上也做到了相对独立,如花瓣、Pinterest就是最好的例子。

图片

 

2、信息流

信息流的展现方式主要以文字、图片或视频内容为主,是一种较长内容的媒介,不管哪种展现方式,其都需要用户耗费较长时间的滑动、浏览来筛查对自己有用的信息。

卡片式设计将信息进行分块处理,通过阻隔的方式快速告知用户每个卡片的核心内容,便于用户在长时间的滑动过程中也能快速识别重要信息。

图片

 

3、左/右滑动

卡片式左右滑动组合在音乐、视频类产品中用最为广泛,因内容本身就图片居多,也更适合卡片式设计,相比平铺具有更强的层次感,对用户的吸引力较强,尤其最右侧漏出的一小部分内容营造出神秘的感觉,用户会不由自主的想去滑动以求获取更多信息。

图片

 

4、优惠卡/券

卡/券设计实际是把生活中的实物映射到了UI设计中,通过模拟实物造型设计成卡片样式,有效降低用户的理解成本,并对其有了更直观的感知,真实感尤为强烈。

图片

 

5、突发事件/临时提醒

对于用户主动触发或系统临时发起的非固定性内容,利用卡片式设计会让信息布局更灵活、视觉更突出,在不影响用户使用的前提下,可出现在任何位置。

图片

 

6、部分页面头图

卡片式设计可以将个人中心、个人主页、会员等页面中的关键信息进行概括,并在头部位置进行重点突出,不仅让原本单个的内容形成整体,还能营造出沉浸式的氛围。

图片

 

 

五、卡片式设计原则及小技巧

1、一致性原则

为了保持界面设计的一致性,需要将卡片样式纳入设计规范,例如卡片是否通栏、是否需要设定圆角半径、不同场景中卡片大小的划分界限以及圆角数值的确定等,大部分情况下都需要遵循设计规范。

图片

 

2、功能定位决定卡片形式

在同一产品中,虽然要遵循设计规范以确保一致性的视觉效果,但并非所有页面都适合卡片式设计。

那么,到底是否需要采用卡片形式、使用哪种卡片类型?这还得根据页面内容属性及目标定位来决定。例如社交产品中的临时会话列表、动态圈子使用卡片形式,很浪费纵向空间、甚至会显得很“鸡肋”,用分隔线或间距留白来区分信息组显然更合适;但对于电商类型的产品,利用卡片将不同的商品分隔后又进行归纳,会更容易识别,信息的可读性也会更强。

图片

 

3、避免过多卡片嵌套

卡片式设计本身就包含了容器与背景的层级表现,为了保持内容的正常展示与用户浏览体验,避免在卡片中嵌套多层卡片,以免信息层级杂/乱而增加用户的视觉负担。

如果再同一卡片中需要再次区分多个信息组,可利用间距留白、分割线或浅色背景等元素属性来区分,依然能达到想要的效果。

图片

 

4、合理利用横向空间

因为卡片内、外的双向间距留白,在空间有限的移动端设备中,横向空间利用率较低,因此除了合理的减小左右间距外,还可以适当利用左右滑动来扩充横向隐性空间。

例如淘票票首页,在1.5屏的范围内,几乎每个模块都能横向滑动查看更多内容,从用户体验角度出发,这是纵向空间无法比拟的。

图片

 

5、降低纵向空间的浪费

卡片式设计不是目的,其主要是用来更好的区分信息层级、提升用户浏览体验,因为卡片要作为独立空间的存在,必定会增加上下间距而导致页面拉长,因此,如无必要,不必盲目采用卡片式设计。

例如美团APP的「首页、电商、购物车、我的」4大主功能页面都使用了卡片形式,而「消息」页则采用分割线进行信息分组,试想一下,如果为了统一规范而使用卡片,不仅造成很强的割裂感、还会极大的浪费纵向空间。

图片

 

6、长文表达不适合卡片

这点不用多说,新闻资讯类产品的内容详情页就是最好的证明,不管其他页面是否采用卡片形式,但详情页并不会跟随形式,一方面可以让同屏展示更多内容、增加空间利用率,另一方面可减少无关元素对用户产生的干扰、给予沉浸式的浏览体验。

图片

 

7、突出一个核心内容

很多时候,我们总会听到PM说这个很重要、那个也很重要,都需要突出一点,殊不知当什么都突出了也说明什么都没有突出。在单个卡片中,组始终牢记这个准则:一次只突出一个核心信息,以便于用户快速、精准捕捉,切记不可贪多。

 

六、结语

卡片式设计之所有能快速流行起来且经久不衰, 其主要得益于自身的灵活性,尤其是在跨设备、跨屏幕上有着纯天然的优势,能忽略设备的差异给用户提供更好的服务。卡片并不是简单的样式设计,它是一种自由布局的设计语言,通过多种方式的信息组合、结合丰富的交互操作,给用户创造出极致的使用体验。

信息的呈现方式虽有不同,但最终的目的都是为了服务于内容,卡片式设计只是其中的一种形式而已,在设计过程中,我们需要根据内容结合实际情况作出合理的判断,切勿拘泥于形式而忽略内容本身的重要性。

任何设计风格及展现形式都有可能成为历史,卡片式设计也不会例外,但绝对不是这么快就结束,它依然值得我们去深究,力求打造更好的信息布局、更舒适的用户体验。

 

原文地址:能量眼球

作者:大漠飞鹰CYSJ

转载请注明:学UI网》卡片式设计 | 掌握这些技法,快速提升界面效果!

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


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


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



2023 年全新视觉设计趋势来啦!趋势7把我萌翻了!

seo达人


近日,2023年度视觉设计趋势报告发出出来了,总共有11个大的趋势,那么23年又流行哪些趋势呢?下面跟着菲尔刚哥的一起逛这场视觉盛宴吧!记得收藏噢!

2023年平面设计趋势概览:

1、粘土风格

2、3D孟菲斯风格

3、简洁风格

4、迷幻设计

5、霓虹灯和抽象卡通贴纸

6、70年代复古平面设计

7、简化3D风格

8、抽象线条艺术人物

9、艺术衬线字体

10、彩虹色调色板

11、受自然启发的设计

1、粘土风格(The Clay Look)

Example by Ramy Wafaa

2023年橡皮泥设计趋势的关键要素

  • 介绍由数字技术或真正的橡皮泥制成的不完美的凹凸表面。
  • 提醒您在不完美中寻找完美。
  • 鼓励不断蜕变,塑造自己的未来。

2、3D孟菲斯风格(The 3D Memphis Style)

2023 年 3D 孟菲斯设计的关键要素

  • 通过 3D 现实的棱镜重生的著名 80 年代风格。
  • 基于 3D 几何图形和鲜艳色彩的大胆组合。
  • 鼓励在平凡中寻找不平凡。

3、简洁风格(The Clean Style)

2023 年清洁风格设计的关键要素

  • 一个整洁的设计,将所有图案、装饰品和装饰都排除在外。
  • 可以通过 3D 设计技术或平面简约主义来呈现。
  • 调色板由流行的白色或白色色调组成。

4、迷幻设计(Trippy Design)

2023 年 Trippy 设计趋势的关键要素

  • 在设计美学方面可能不符合逻辑的风格混杂。
  • 创造一种超现实的体验,类似于产生幻觉的效果。
  • 挑战设计师将他们的想象力超越所有既定的设计规则和限制。

5、霓虹灯和抽象卡通贴纸(Neon & Abstract)

2023年霓虹灯和抽象卡通贴纸趋势的关键要素

  • 霓虹灯和抽象卡通贴纸风格流行。
  • 虽然有些类似于平面物理贴纸,但有些则呈现出运动和体积。
  • 抽象卡通贴纸风格传达了艺术绘画的感觉。

6、70年代复古平面设计(70s Retro Flat Designs)

2023 年 70 年代复古平面设计的关键要素

  • 大胆、华丽、饱和的颜色,看起来很美。
  • 所有设计元素都由黑色细边框勾勒出来。
  • 具有 3D 效果或简单黑色轮廓的大块圆形字母类型。

7、简化3D风格(Simplified 3D Style)

2023 年简化 3D 设计的关键要素

  • 将细节减少到最低限度,同时在简单中寻求完美。
  • 基于简单、平滑的几何形状,如球体、立方体、圆柱体等。
  • 易于理解、熟悉和吸引人,因为它类似于幼儿简单的玩具。

8、抽象线条艺术人物(Abstract Line Art )

2023年抽象线条艺术人物设计的关键要素

  • 扁平的线性风格,结合明亮的色彩,传达复古的氛围。
  • 扭曲的比例和动物、物体和人类特征的奇怪混合。
  • 与您所见过的任何东西都不相似的角色。

9、艺术衬线字体(Artistic Serif Fonts)

2023年艺术衬线字体趋势的关键元素

  • 笔画创意操控:不同字母的交织、扭曲、液化、延伸等。
  • 超大衬线字体可以是作品中唯一或主要的设计元素。
  • 衬线字体仍然传达复杂性,但变得更加有趣和不可预测。

10、彩虹色调色板(Rainbow Palette Colors)

2023年彩虹调色板颜色设计的关键元素

  • 灵感来自彩虹的颜色。
  • 与其他流行的设计风格相结合。
  • 代表各种形式的多样性。

11、受自然启发的设计(Nature-Inspired Designs)

2023 年自然灵感设计趋势的关键要素

  • 柔和的泥土色调、天然材料、纹理和形状。
  • 平衡感官,因为它传达宁静、内心的平静和和谐。
  • 一些设计呈现出真实自然和虚构现实之间的混合。

写在最后的话

2023年度最新的视觉设计趋势预测报告将设计师的想象力推向了全新的高度。这11个设计趋势也为设计师们打造了一个超乎现实、梦幻般的场景,唤醒观众的好奇心,激发人们探索的自然欲望。

好了,2023年最新视觉设计确实介绍完毕,你有什么看法呢?

本文 由「菲尔.刚哥」编辑整理,仅供分享交流

图源 Graphicmama网站| 版权归原作者所有

-END-

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


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


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



UI 场景中常见的 3 个主题化区域

seo达人


图片

 

 

一、底部标签栏主题化设计

1、底部标签栏图标主题

在不改动结构的情况下,替换底部标签栏图标是最方便的形式。通过主题化的图标也非常容易传递氛围,无论是在节日庆典、购物季、主题活动等场景中,这个形式都是最直观的表达之一。

比如优酷 APP 在中秋节的时候,就将底部标签栏图标替换为各式各样的月饼造型,主题营造也是非常的明显。将原本的图标造型融入到月饼图案中,镶嵌图案的设计非常巧妙,不仅保留原本的识别特征,也强化了主题氛围感。

图片

除了在图标造型上面发挥以外,也可以将主题文案融入到设计中,这也是较为直接的表现形式。作为特定主题来说一目了然,需要把控主题文案数量。

图片

 

2、底部标签栏背景层

底部标签栏的设计中,除了通过图标设计附和主题之外,也可以在背景层进行主题氛围营造。由于底部属于操作频繁区,背景层的设计不能过于抢眼,容易干扰功能的识别与操作。比如前段时间抖音 APP 将底部标签栏背景层进行主题营造的时候,在黑色层上面运用的色调比较深一些,与原本黑色的沉浸式体验有差异,在白底上面呈现效果还可以。

图片

没过多久抖音设计团队便进行了更新,压暗了背景元素的色调,弱化了视觉感。更符合原本的感官体验习惯,也能强化主题感。

图片

除了抖音以外,小红书 APP 前段时间也在底部标签栏背景层上面进行了营造。如果营造面积比较大的话,在无图标形式(纯文字版底部标签栏)上面比较适合。如果带有图标的话,适合做局部强化。

图片

 

 

二、顶部视觉区强化主题感

顶部视觉区包含状态栏、导航栏和顶部内容区域,通常是白底、灰底、品牌色底和运营主题背景等为主。也是强化视觉感的常见区域,作为营造主题氛围来说也是非常好的选择。

图片

该区域不仅可以作为功能性活动入口,也能在特殊时间段作为氛围营造。很多产品都会在顶部视觉区域做应变处理,满足多场景的需求发挥。

图片

顶部视觉区的强化也是增强页面感官体验的方式之一,除了静态背景的营造以外,也可以使用动态或者流体渐变等形式。

图片

 

 

三、金刚区图标设计主题化

金刚区也是作为主题化设计最常见的区域,由于该区域像百变金刚一样,较强的灵活性方便元素替换和重组。

 

1、图标主题化

在一些特定主题日活动中,可以将金刚区图标替换为带有主题元素的设计,以此增强活动氛围。通常是阶段性时间内展示,可以是图标造型层面主题化,也可以是主题文案镶嵌在图标造型中,灵活性相对比较高。

图片

 

2、局部动效化表达

除了整体金刚区变动以外,也可以在局部图标上进行设计发挥,这样带来的干扰性比较低。通常是以图标微动效为主,以此来突出个别功能和活动主题等。不适合过度动效,容易互相干扰,适合局部动效化表达,突出局部内容的关注度。

金刚区作为曝光度较高的区域,经常作为流量分发的关键场景,主题化发挥也是非常具备灵活性的。

 

 

小结

产品设计除了常规性的视觉升级和功能优化以外,主题化设计也是至关重要的,可以让用户时刻感受产品的变动。一成不变的体验使用时间长了也会麻木,结合节日庆典和一些主题活动进行视觉呈现,可以在感官体验层面得到提升。

本文观点属于个人经验总结,不足之处欢迎大家补充,我们互相进步。


作者:黑马青年

转载请注明:学UI网》UI 场景中常见的 3 个主题化区域

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


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


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



日历

链接

个人资料

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

存档