首页

如何学习Yoga Style?

seo达人


一、分析Yoga Style

Yoga全名Yoga Perdana,是一名印度尼西亚的设计师,擅长插画和标志设计。玩追波的人应该一点都不陌生,他独特鲜明的风格得到很多人的关注。

 

 

分析作品

a.他的每个作品在造型上都很简洁、饱满,在结构线明暗关系上把握的非常好。

b.配色方面多用同色系或用近似色做渐变,看上去很和谐,但也有很突出的光影明暗变化,很好的结构布局,加上每一个曲线变化都很好体现结构变化,更加丰富饱满。

c. 在很多正负图形中,突出“正”空间给足空间,压缩负空间尽可能减少留白,让画面更丰满。

d.在具象的动物造型时,也遵循头小身子大的美感,可以发挥更大的施展空间。

 

二、如何尝试练习

先进行抽象的开始练习,可以自由的发挥。在造型能力方面要求不是很高。在具象的事物中对造型的能力要求很高。

先在一个圆里,丰富的发挥想象,可以跟水、山、云、海、花盆、气泡结构后大量绘制,让画面有一种看山不是山,看水不是水的感觉。从水中提炼小的元素进行装饰,从山、云中要分析层次远近的虚实关系。还有瓷器的里面的花盆上面的效果也很抽象。让人很多联想。然后就开始大量的去绘制,最后从手稿中找出有感觉的进行软件绘制。

 

 

 

三.软件基本工具

a. 钢笔工具+形状生产器工具

b. 钢笔工具+分割

 

 

 

四、黄金分割

黄金分割是指将整体一分为二,较大部分与整体部分的比值等于较小部分与较大部分的比值,其比值约为0.618。这个比例被公认为是最能引起美感的比例,因此被称为黄金分割。

黄金比例等于1:1.618,如何计算元素的长度?首先需要确定小元素的长度。然后乘以1.618的黄金比例就是大元素的长度。

 

 

黄金分割在LOGO中的应用

 

 

 

 

 

五、圆切法

本来要准备用手稿绘制好,来用圆切,但是像yoga那种造型很准备的手绘绘制难度还是很大,绘制的一点效果没有不能直接用,所以还是先找图片,用钢笔大体绘制出想要的效果,因为用钢笔绘制可以不用考虑细节,绘制出大体的轮廓,如果用圆直接切,很容易就扣细节,很快勾勒出简洁的轮廓。(理想和现实还是有差距的。)

圆切的时候绘制好所有的圆后,为什么不用形状生成器工具和分割呢?因为太多的圆一起快速生成后的形状上会生成很多锚点,正常一根线条锚点越少越柔美。

 

 

 

原文地址:站酷
作者:水手哥

转载请注明:学UI网》如何学习Yoga Style?

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


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


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



百度APP是如何进行视频沉浸式设计的?

seo达人



前言

沉浸式体验是让人专注在当前的目标,全身心投入并感到愉悦和满足,从而忽略时间的流逝。应用到界面上则是更强调聚焦内容,减少不必要的打扰。本次研究与实践针对视频场景中视频所呈现的画面,通过精细化的设计,在多样化的手机屏幕中呈现时,能够带给用户更为沉浸的视频观看体验。

 

百度APP是如何进行视频沉浸式设计的?

视频播放器中视频画面当然是最主要的内容,以此作为突破点进行思考:

  • 最大化画面视野:通过改变视频画面本身的大小,减少页面“留白”,让用户更聚焦视频画面,观看视频时更专注。
  • 最佳视线观看位置:将不同高度的视频按照页面结构去布局视频画面,通过画面避让状态栏、顶底bar结构的方式,使画面更加整洁,减少元素混乱带来的干扰,同时整体位置偏上展示,视线落点更加舒适。
  • 观看体验连续性:视频浏览过程中,非必要不打断视频浏览,在进行如查看评论、临时退出播放器等行为时,保证视频播放的连贯性,方便用户多操作。

图片

 

 

一、最大化视频画面视野

01、视频画面裁剪 

随着时代的发展,为提升消费者对手机的操作体验,智能手机逐渐多元化,手机屏幕尺寸迭代更快、更加丰富多样。手机作为视频很重要的生产端,手机屏幕尺寸的多样化影响到产出视频尺寸的多样化,同时用户可通过视频编辑工具任意编辑视频尺寸,最终生产的视频尺寸比例自由度非常高。据不完全统计视频平台中视频尺寸达22万多种,用户使用机型近300种,在视频尺寸多样性及视频展现媒介多样性的现状下需要兼容性更强的裁剪及展现规则才能带给用户更好的观看体验。我们要做的就是将不可控的视频资源和不可控的浏览视频设备设计为可控的视觉展示效果,并最大化视频画面。减少环境干扰,给用户带来沉浸式感官体验。

视频宽撑满手机屏宽后,将视频尺寸分为四类:

图片

1) 视频高度>手机屏高

视频画面宽度撑满屏幕后,视频整体居中于屏幕,居中裁剪视频多余画面。注:不允许画面高度撑满屏幕,宽度自适应导致画面左右留黑效果。

2) 视频高度=手机屏高视频居中于屏幕,刚好填满屏幕,不需要裁剪处理。

图片

3) 1:1<视频高度<手机屏高

此类尺寸较复杂、难处理,于是将限制裁剪面积和展示位置相结合,保证裁剪面积和位置可控。结合视频平台资源尺寸和业务目标来确认理想展示效果,反推定义最大裁剪面积,根据显示位置多次判断视频放大后是否符合既定裁剪面积,最终确定当前视频的显示方式。同时支持根据不同视频业务进行个性化定制,并且将裁剪面积云控处理,根据业务内不同时期的诉求限制比例来灵活调整展示效果,双端也可分端定义数值;横向协同及迭代成本极低,便于快速上线验证效果。

图片图片

4) 横版视频(高宽比≤1:1)

横版视频在手机屏幕中面积占比较小,画面可识别度和饱满度稍有欠缺,轻微扩大画面视野,画面浏览更加清晰有冲击力。以不影响内容理解为前提,根据自身平台视频尺寸占比及视频内容特点规定固定比例或比例范围适度放大。

图片

锦上添花,引入文字内容识别

为避免因裁剪规则而裁剪到视频关键文字对视频内容获取有障碍的问题,发挥百度强大的AI技术优势,引入文字识别技术及视觉展现规则,进一步提升视频展现样式的可控性,同时能够通过尽量少损失画面达到画面放大的效果,平衡画面沉浸感和完整性的关系。左右文字被裁剪情况:文字左右设置安全距离,保证安全距离在屏幕内。如果安全区超出屏幕,则按照上方描述的裁剪规则进行退档显示(满屏至不裁剪之间的档位),直至文字不被裁剪。极端情况退档至最后一档,视频画面不裁剪。

图片

横版资源文字左右被裁剪情况:按照固定尺寸退档

图片

上下文字被裁剪情况:文字上下设置安全距离,保证安全距离在屏幕内。如果安全区超出屏幕,则按照上方裁剪规则进行满屏至不裁剪之间的档位进行退档显示,此情况只会从全屏一档显示退至二档显示。

图片

裁剪面积、展示比例、文字安全距离等数据都通过云控的方式下发,灵活配置到不同业务中,保证裁剪规则一致的同时又能针对不同业务进行定制展现,也可快速调整并支持上线实验,来验证适合自己产品的展示效果。

 

02、智能满屏

通过裁剪方式放大画面视野之外,还通过让用户自主交互操作再次放大画面视野,调整到自己喜欢的观看视频的方式。相较于上方默认裁剪放大,满屏方式更加激进极致,画面放大更多。开启方式通过面板功能按钮开启智能满屏外,增加便捷交互开启手势,用户可双指放大快速开启。图片

由于满屏是用户主动操作放大行为,可以接受文字内容被裁剪,但也需要有节制的放大,避免带来画面裁剪过多视觉体验不佳的问题。为了保证95%以上资源撑满全屏,达到放大画面视野极致体验。同时最大画面裁剪面积不超过一定比例(根据自身业务视频资源判断),将视频资源细分为3类进行不同效果处理:1.可继续放大至满屏的视频,则进行满屏展现。2.不可继续放大的视频,如果继续放大会导致裁剪画面过多影响观看完整度与观看体验,则保持上方提到的裁剪规则,不做另外处理。3.横版视频统一放大至固定尺寸,可根据自身业务资源进行放大尺寸的定义。

图片

 

二、最佳视线观看位置

通过布局合理、舒适的画面位置,也能提升浏览过程中用户体验的沉浸感。人的视觉中心一般会在物理中心的偏上方,于是在设计中我们将视频画面放在屏幕偏上的位置,用户视线落点更加舒适,一般是用户在浏览页面时最先注意到的地方。同时视频在页面偏上的位置,能减少下方标题等信息过多对视频画面的遮挡。

为了精细化处理不同比例的视频资源,竖版视频和横版视频根据页面效果分别定义了最佳观看展示位置。

竖版视频:高于1:1的视频,按照页面结构布局视频画面,避让状态栏、顶底bar操作,避免与页面结构冲突带来画面凌乱不美观的问题,同时能减少画面参差带来的干扰,增加沉浸浏览感受。

图片

横版视频:等于矮于1:1的视频,画面按照屏幕高度比例展示在偏上的区域,高度比例可云控便于灵活调整。

图片

 

三、观看体验连续性 

01、视窗挤压

为了满足用户在视频场景多角度信息获取,在不打断用户视频浏览的基础上建设视窗挤压交互体验,提升观看视频的相对沉浸感。在视频场景观看评论时会弹起半屏面板,遮挡住视频内容,导致用户无法在浏览评论的同时观看视频内容。对短视频重度用户来说,对同时看评论和看视频习惯的用户有挑战。通过视窗上移动挤压功能,在浏览面板内容时不对视频内容打断,弱化面板内容给用户带来的影响。

视窗高度固定,画面宽高比越小画面内容越小,观看体验不友好,所以竖版视频对压缩后的显示尺寸进行干预,定义最小视频画面展示比例,尽量扩大画面视野,保证观看视频的舒适度。

图片

02、悬浮小窗 

在不打断用户视频浏览的基础上还建设了悬浮小窗交互体验,旨在为用户提供完善优质的视频消费体验。用户进行其它操作时仍保留视频后台播放,同时也能在屏幕角落观看到缩略图大小的视频播放窗口,可以从任何页面中观看视频,我们同时也保留了部分视频基础操作。观看体验连续性让用户对视频有绝对的主控感,提升用户使用体验的满意度。

图片

 

写在最后

沉浸式体验设计是帮助用户减少画面干扰,让用户专注于当前的视频浏览,忽略时间的流逝进入心流状态。我们通过放大画面视野,增强画面冲击力的方式减少干扰,并解决在视频画面尺寸、手机屏幕分辨率极多的复杂情况下,保证画面效果的稳定和可控,并且不会受阻于未来手机机型的扩充发展,普适性极强。同时通过视窗挤压、悬浮小窗的交互体验专注于当前的视频浏览不被打断,进一步提升视频看播沉浸式体验。后续我们将不断探索视频场景沉浸度提升方式,为用户带来更加舒适的观看使用体验。

作者:百度APP用户体验

转载请注明:学UI网》百度APP是如何进行视频沉浸式设计的?

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


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


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



做好这几处细节,你的排版才能更精致

seo达人

一、给标题搭配辅助文字

标题的字号通常会比较大,这时如果给它搭配一个字号比较小、字体不一样的副标题,或者是英文标题,那么就可以得到鲜明的大小对比和字体对比,甚至还可以有色彩对比、空间对比等。这么做可以增加标题的层级关系,使视觉更丰富,更生动。

图片

▲ 上图的标题只有四个字,如果单独排版会很单调,所以设计师把它与英文标题一起排版。如果你想要排版的效果比较时尚、活泼,可以将标题进行断行、错位处理,两行或三行的标题比单行标题的层级更丰富、对比关系更多。

图片

▲ 上图的标题搭配了一行字号更小、字重更细的副标题,由于上图海报想要表现出比较高端的品质感,所以标题和副标题采用了同一种字体,也没有加入太多的排版技巧。

图片

▲ 上图的标题与活动时间和装饰英文组合排列在一起,并且在排版时有明显的大小对比、字体对比、颜色对比、点线面的对比等,使整个标题看起来有丰富的细节。

 

 

二、卖点要有Icon

绝大部分的产品海报或宝贝详情页上都会展现产品的卖点(核心优势),这通常会是比较重要的信息,所以需要重点突出。不过突出的手法不一定要使用很大的的或者是对比很强的颜色,给卖点增加icon就是一个很常见、很有效的技巧,既可以通过icon把卖点信息与其他信息区别开,从而吸引读者的目光,也能使画面视觉更丰富、有更多细节。

当然,icon设计本身也很关键,首先,要尽量使用一些大家比较熟、能一看就懂的图形符号;其次,要尽量设计得细致一些,虽然会需要花一些时间,但这是值得的。

图片

图片

另外,风格的统一也很重要,一方面是每个icon的风格要一致,不要有些硬朗、有些柔和,也不要有些很复杂、有些很简单;另一方面是Icon的调性也要符合产品调性以及画面的风格,这样画面的整体视觉才能更统一、更美观。

图片

比如,在上图的儿童牙刷海报中,由于画面部分采用了剪纸风格,所以卖点的icon也使用了剪纸风格。

 

三、信息要分组

版面中的信息一定要分组,不要全部排成一堆或者四分五裂地排列,否则都会加大阅读和理解的难度,可以通过控制信息之间的间距来分组,也可以利用线、线框、色块来分组。并且,信息分组还需要注意以下两点:

❶ 视觉上要有主次,即每组信息版面空间占比不要太一致。

❷ 要符合阅读及信息传播的逻辑。有些设计师会为了好看而随意把信息的顺序打乱重组,这是本末倒置的行为。

例如在下图的海报中,设计师虽然将信息进行了分组,但是除了主体很突出以外,其他信息都太过平均了,再加上信息块(包含文字组和图片部分)特别多,所以导致排版很散。

图片

而在优化后的方案中,把版面信息进行了重新分组和排列,视觉更整体、层级关系更鲜明。

图片

下图海报的排版也有几个比较严重的问题:

图片

❶ 信息分组不合理。大部分文字信息都被圆形色块打包成一个组,但里面很多信息的意义并不相同,其实不适合组合在一起;

❷ 文案的排版不符合逻辑。比如把“只选直径…”这句文案放在最上面有点突然;再比如“首创一品黑蒜猪大蹄饭”其实是一句话,设计师却把它拆开排列,而且顺序是错乱的;

❸ 排版太乱。虽然用了圆形色块进行整合,但是在这一组新信息里,有的文字排成弧线、有的文字竖排、有的文字横排、有的文字对齐排、有的文字错位排,同一个信息块里采用了太多不同的排版形式,而且组合得不好。

修改过的方案则进行了合理的分组,信息排版也更符合阅读理解的逻辑。

图片

❶ 把标题和副标题分成一组排在左上角。在面积上是版面中的第二大视觉块,信息一目了然且主次分明;

 把价格、口感NO.1、“只选直径…”这三个信息分成一个组,排在标题和副标题下方、产品的上方,符合正确的视觉流程和阅读逻辑。而且该组文案与产品图片进行叠加或绕排处理,既加强了文字与图片的关联,也使得文案与产品形成了一个大的整体。

所以,设计师在做设计时,一定要阅读文案、理解文案,看哪些信息可以划分到一组排列,哪些信息应该要分开排列。

 

四、视觉层级要分明

只要不是同一句话或者同一类信息,那么都要区分它们的层级关系以及视觉呈现,哪怕这些信息被分在同一组。比如标题、副标题、小标题、正文、卖点、注解、价格等等,这些信息在视觉呈现上都要有所区分,并且区分得要尽量明显一些,如果只是把字号加大一点、改变文字的颜色,那么可能会比较难把信息进行有效区隔,视觉上也会比较单调。

所以,为了视觉上更美观、更易阅读,我们还可以通过改变字体、排版的方向、排列的位置,增加辅助元素(icon、色块、线条、线框等)、装饰效果(描边、立体效果、扭曲效果、裁剪效果等)等等,创造出比较鲜明的对比以及视觉层级。

图片

图片

另外需要注意的是,区隔信息的手法要与设计的风格和调性吻合,通常来说,高端、简约的版面,所用的排版技巧和装饰手法会比较少,视觉效果也不会太夸张;而如果是时尚类或者促销类的设计,其用于区隔信息层级的手法可以尽量丰富、夸张一点。

比如下图是苹果笔记本的banner设计,其每一行文字的视觉效果都有明显的区别,但并没有采用特别夸张的表现手法,字体和排版方向都是统一的。

图片

图片

而下面这则猫粮的海报,其文字表现手法则要丰富很多,对比要更强。

图片

图片

 

总结一下

想要版式更加精致、更便于信息的传播,我们需要处理好以下几处细节:❶ 给标题搭配辅助文字;❷ 卖点要有Icon;❸ 信息要分组;❹ 视觉层级要分明。


作者:葱爷

转载请注明:学UI网》做好这几处细节,你的排版才能更精致

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


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


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




AI & PS 夏日魔法篇

seo达人

话不多说,直接上手先吃瓜吧,哦不,做图吧!学会这几招,再也不要甲方爸爸提供渣渣图片素材了。

 

 

图片

这个案例我之前分享过小红书,相信我,我不是想偷懒,我只是想把这个实用好技巧让更多的小伙伴知道(一脸正经说的)。

看过的小伙伴也不要急,毕竟后面还有 5 个案例都是船新未公开的版本!走过路过不要错过!

 

我们在 AI 里画一个正方形选择【效果】→【3D】→【凸出和斜角】得到一个正方体,然后选择扩展,每个面填充白色透明→不透明的渐变。

图片

画一个蓝白渐变色的背景,给夏日里一抹清凉的感觉~

这个桃子是我用苹果电脑自带的【Apple Color Emoji】输入法打出来的,也不一定用桃子,也可以别的哟~

图片

(后面的步奏都是在 PS 里完成的哦~)把桃子放在立方体下面,合并【桃子】+【立方体】图层,选择【滤镜】→【滤镜库】→【扭曲】→【玻璃】数值参考如下。

图片

复制一个,调整大小节奏,再调整一下角度,按住【ctrl+alt+shift+E】键,得到一个合并可见图层的新图层。

再复制一层(留用),选择一个图层【滤镜】→【模糊】→【高斯模糊】,数值:【5】,选择【滤镜】→【滤镜库】→【扭曲】→【海洋玻璃】数值如下。

图片

选择之前复出来留用的那层置于顶层,图层模式选择【颜色加深】,透明度【30%】。

图片

继续细化,用图案建立→填充的方式,加点细节,用混合方式做一个线条背景再加像素字点缀,其他文字环绕编排即可。

图片

图片

 

 

图片

不知不觉来到了中午,夏日炎炎,我买了一根雪糕,这次的技巧可以说相当简单,我速战速决,毕竟我的雪糕是会融的……

在 Ai 里画一个矩形,调整圆角,选择【效果】→【3D】→【凸出和斜角】数值如下:

图片

扩展图形,然后调整角度,除顶部部分的形状合并,然后填充渐变色,复制多一个形状,添加描边。

图片

把顶部的形状复制两个,排好填充颜色,然后选择三个形状【对象】→【混合】→【建立】,如果步数不够,就选择混合工具,按住【ALT】键,输入合适步数即可。

图片

同样的方法做一个雪糕棒吧,然后把这几个形状组合在一起,就得到这根可口的雪糕啦!赶快吃起来,哦不,做起来吧!

图片

根据文字的大小加入色块编排可以增加版面的色彩层次,再来点路径文字,活跃一下版面,加上其他文案,这张海报就完成啦!

图片 图片

 

 

这次技法以文字为主体,做一个夏日冻感的文字,选择一个圆体的文字,在 PS 里转成智能对象,选择【滤镜】→【模糊画廊】→【路径模糊】数值路径如下:

图片

添加一个蒙版,用画笔把边缘擦得虚一些。

图片

然后新建一个文字图层,改成描边效果,然后转成智能对象,复制上面智能滤镜的效果到这个图层,加入渐变,这个冰块字就做好啦!

图片

接着我们来做文字编排部分,倾斜的文字能够增强画面动感,丰富版面,再用【!】增强情绪张力,其他文字环绕编排即可。

图片 图片

 

 

图片

万物皆可卷……而我选择躺平,哦不,我选择让纸张自己卷,这次做一个简单上手的纸张卷曲效果。

先做两组简单的文字编排,调出符号面板,直接往里面拖即可。

图片

选择螺旋线工具,画出线条,然后选择【效果】→【3D】→【凸出和斜角】,数值如下:

图片

先别点【确定】哦,点击左边的【贴图】按钮,进入贴图页面,选择其中三个表面,选择前面做好的符号图样,并调整大小,即可得到这个卷曲纸张的效果啦!

图片

因为文字做了卷曲的效果后,阅读性会降低,所以我们还是要重复排一遍文字,然后我们再加入背景渐变色丰富一下,再来点质感会更好,于是我打开了 PS,找了张褶皱的纸张纹理进行叠加,最后再加点杂色即可!

图片

 

 

图片

卷完纸张,我们来卷文字吧!,天长地久有时尽,此卷绵绵无绝期……

选择一个高挑的字体,然后再画一根线进行分割,得到如下图四组图形,并依次拖入符号面板:

图片

画一个矩形,调整圆角,然后选择【效果】→【3D】→【凸出和斜角】,数值如下,点击左边的【贴图】按钮,进入贴图页面,选择其中三个表面,选择前面做好的符号图样,并调整大小,如图所示,即可得到这个卷曲的文字效果。

图片

得到图形后,选择扩展,可以看到有些锚点没有完全吻合,手动调整一下即可,另一个图形也用同样的方法即可得到。

图片

选择图形其中两面替换颜色,再添加一些有趣的图形,增强画面的趣味。

图片

加入趣味标题,与其他文字编排,这张海报也完成啦!

图片

这次的案例到这也就告一段落了,说时迟那时快,萌萌又来一句:要不再来一张?此刻的我当然是欢(mian)天(wu)喜(biao)地(qing)说:好!

 

 

图片

于是,我打开刚刚关闭的 PS,打出文字,栅格化后,选择【滤镜】→【模糊画廊】→【移轴模糊】,调整路径,让文字上下边缘有模糊的效果。

图片

复制一层,然后选择【涂抹工具】,用柔边画笔,强度选择【70%】,沿着文字边缘涂抹出想要的形状即可。

图片

新建一个渐变映射图层,添加渐变色,就可以得到这个字体流动效果啦!

图片

接着,同样的秘方,我们来加点质感,找一张做旧纹理的背景,调整合适的图层样式效果即可。

继续添加细节,画一些简单的图形丰富版面,用网格工具画一个小网格,再加入一个酸性的手写字装饰一下

图片

再加入简单的文字编排,这个版面也就完成啦!


作者:大熊

转载请注明:学UI网》AI & PS 夏日魔法篇

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


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


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



UI 中国首页推荐作品集

seo达人


图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
 
 


作者:黑马青年

转载请注明:学UI网》UI 中国首页推荐作品集


这12个常用动效方法,很适合用到你的界面里

seo达人

图片

有段时间没有写UI动效相关的文章了,之前写过一篇超全面!动效设计标准与规范的动画文章,里面会讲到一些更具体的参数范围,实用性拉满,看完就可以用到你的动效调优里,干到拧不出水。今天的这篇更偏方法一些,强烈推荐你把2篇结合一起看,效果更佳!

如今对用户来说,好的体验是界面一致、易读和简单。设计师要如何才能让UI更加符合用户的自然直觉呢?

动效,可以让界面变得更加自然,填补部分体验上的隔阂。今天这篇文章会讲到常用的12个UI/UX动画原则,帮你做出富有乐趣的界面设计。

 

一、缓动

”缓动“指的是在一个动作在过渡中进行的方式。你可以把缓动理解为加速或减速。一个物体可以从界面的一侧缓慢启动,然后加速,最后到另一侧突然停止。或者,物体可以快速启动,然后逐渐减速到停止。关键帧表示了动画的开始和结束,缓动决定了中间过程。

将缓动应用于补间动画的一种简单方法是使用“属性”面板(彩云注:这里彩云还专门去查了下资料,这个功能是AE的一个Beta版本的功能,叫 Properties panel,可以很方便的修改属性) 。缓动值的范围从 –100 到 100。负值会从起始位置产生更平缓的变化(称为缓入), 正值会导致逐渐减速(称为缓出)。

(彩云注:在我们现在用的AE正式版中,可以直接修改缓动属性然后配合曲线也可以修改缓动幅度,如果有体验过Beta版本的同学欢迎文末留言交流呀)。

Saptarshi Prakash

 

二、偏移和延迟

当多个UI元素同时移动时,用户倾向于将它们分组在一起,而忽略了每个元素都可能有自己的功能。

偏移和延迟在同时移动的UI元素之间创建了层次结构,并说明它们是相关的,但又是不同的。不同于完全的同步,元素的时间、速度和间隔是交错的,从而产生了微妙的“一个接一个”的效果。(彩云注:动效本质上也是为了打造层次感,其实这又是上2期讲的底层设计原则的应用之一了。所以,我们在看一个知识点的时候,要学会系统性地去思考)

当用户在屏幕之间切换时,偏移和延迟表明存在多个交互元素。

图片

 

三、父子关系

”父子关系“意思是将一个UI元素的属性链接到其他元素的属性。当父元素中的属性发生变化时,子元素的链接属性也会发生变化。所有元素属性都可以相互链接。

例如,父元素的位置可以绑定到子元素的比例。当父元素移动时,子元素的大小会增大或减少。

父子级创建了UI元素之间的关系,建立了层次结构,这样方便用户同时与多个元素互动。在实际交互中,这种形式非常有影响力。

图片

Ayoub Kada

 

四、变换

变换发生在一个UI元素过渡到另一个UI元素时。例如,一个下载按钮变换到一个进度条,进度条完成后转换成完成图标。

从用户的角度来看,变换是显示用户与目标相关状态的有效方法(保证系统状态的可见性)。特别是对于UI元素有从开始到结束状态变换时,这种变换动效尤其有用。比如说这里的文件下载动效。(彩云注:做这样的动效是有效的,对于用户体验的ROI很高)

图片

Y.J.Y

 

五、数值变化

数值变化动效(数字、文本或图形)在界面中非常常见,比如在银行APP,日历,电商网站等等各类产品中。这些变化与现实中用户的需求产生关联,所以可以随时被调整变化。

这种数值变化表明了数据的动态性质,动效告诉用户数据是可交互的。如果没有这些动态变化时,用户的参与意愿会降低。

图片

Creative jeff

 

六、滑动和变焦

滑动和变焦这样的动效可以让用户在界面的UI元素中”旅行“,能增加画面的层次细节。

  • 滑动: 当用户的视角接近(或远离)一个UI元素时,就会产生滑动。想象一个人拿着相机走到一朵花前想要近距离拍摄。
  • 变焦:通过变焦,用户的视角和UI元素保持不变,但元素在用户屏幕中的大小会增加(或减少)。现在想象这个人呆在原地,用相机的变焦功能让花看起来更大。

 

七、维度

维度使UI元素看起来好像有多个交互面,就像物理世界中的对象一样。这种行为是通过使元素看起来像是可折叠的、可翻转的、浮动的,或赋予现实的深度属性来实现的。

作为一种叙事手段,维度意味着UI元素的不同侧面是连接的,并有助于无缝的屏幕转换。

图片

Sang Nguyen

 

八、视差

当两个(或更多)UI 元素同时移动但速度不同时,会产生视差,其目的是建立层次结构。

  • 交互元素在前景中出现的更快
  • 非交互元素在背景中出现的更慢

视差将用户引向交互UI元素,同时允许非交互元素留在屏幕上,并保持设计的统一性。

Netrix

 

九、模糊

想象一扇磨砂玻璃门, 它需要互动才能打开,但也可以隐约看到门后面的东西。

模糊效果也是如此。它为用户提供了一个需要交互的界面,同时显示屏幕提示,引导用户聚集。导航菜单、锁屏和文件夹/文件窗口中都有经常被使用到。

magazineduwebdesign

 

 

十、克隆

克隆是一种动态行为,把一个 UI 元素分裂成其他元素。这是一种突出重要信息或交互选项的聪明方法。

当UI元素在界面中具体化时,它们需要一个清晰的原点,用来链接到已经在界面上的元素。如果元素突然出现或消失,用户就很难清楚地记住上下文。

图片

Interface Market

 

十一、叠加

在2D空间中,没有所谓的深度,UI元素只能在X和Y轴上移动。叠加在UI的2D空间中创造出前景/背景区分的错觉。通过模拟深度,叠加可以根据用户需要隐藏和显示元素。

在使用叠加时,信息层次结构是一个重要的考虑因素。例如,用户在笔记应用中首先看到的应该是他们的笔记列表。然后,叠加可以用来为每条消息提供次要选项——比如删除或保存。

 

十二、蒙版

蒙版是对UI元素的部分进行显示和隐藏。通过改变元素的显示区域,蒙版区域产生变化,同时允许元素本身保持可识别。因此,照片和插图等视觉元素非常适合用在这种动效上。

从可用性的角度来看,设计师可以使用蒙版,给用户反馈,让用户知道每一步操作的反馈和进度。

By Min-Sang Choi

 

原文:https://bootcamp.uxdesign.cc/12-principles-of-ui-ux-animation-you-should-know-75cf41e49e62

作者:Ayoub ┃Marhouse

译者:彩云Sky

本文翻译已获得作者的正式授权(授权截图如下)

图片

 


作者:彩云Sky

转载请注明:学UI网》这12个常用动效方法,很适合用到你的界面里

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


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


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




排版不必花里胡哨 | 设计技巧

seo达人


排版的难点在于,如果完全不用技巧,很容易显得单调;而如果大量地堆砌技巧,就会导致版面花里胡哨,降低了传播和阅读的效率,如何去把握好这个度,达到事半功倍的效果,是设计师需要长期学习、研究的事情,下面葱爷给大家推荐一波优秀的日式商业海报,排版虽然简简单单,但是很好看,且层级分明,视觉感受和阅读体验都很轻松。

图片

图片图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 


作者:葱爷

转载请注明:学UI网》排版不必花里胡哨 | 设计技巧

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


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


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




加了手机传感器后,这些产品/设计变得有多牛?

seo达人


图片

在APP设计中,对页面的某些元素、内容也加上手机传感器,不仅可以使得这个功能/设计更加有趣,对于业务上的相关指标也是有积极作用的。

本次帮大家盘点一下,手机传感器在APP设计中的体现与案例。

 

一、提供更加沉浸的临场式体验

爱奇艺进入全屏播放模式下,用户只需旋转手机,就可以360°任意角度看视频,通过左右滑动屏幕调整观看区域。

减少单一视角下给用户带来的限制,对于沉浸式、可随便更换观看视角的用户是一大利点(特别是观看爱豆的MV、演唱会时)

 

B站的一些特定的音乐视频,如热门/有趣的音乐、播放量特高如100万、纯音乐视频没有旁白之类的干扰等等。

播放时手机会识别音乐的旋律而进行震动,临场体验感极强!

图片

通过设置手机的‘震感交互’来提升视频的消费性/娱乐性,这个‘跟随震动’是可关闭的,而且听说苹果手机至少在8以上(安卓未知)

 

还有微信的朋友圈广告:可以进行360度全景观看广告内容,

利用手机重力感应器,摇动手机则转动封面内容,点击封面则进入更加沉浸式的全景页面页。

图片

 

二、提供更加便捷的使用效率

在线下使用支付宝的收款码时,把手机倾斜对着别人,收款码和下方的文字「支付宝扫一扫,向我付钱」会自动进行翻转。

让文字正对着付款方,对方看起来不那么别扭,特别是对于首次扫码付款的人来说,大大减少操作成本。

图片

 

打开QQ音乐的「听歌识曲」功能,不仅能识别外部环境的声音,还能检测其他带有音乐or视频的第三方APP中的歌曲,特别方便。

用户听到喜欢的歌曲又不知歌名、没有多余设备帮助识别的情况下,既不用麻烦别人又能快速识别,极大提升操作效率

图片

 

三、减少业务侧的漏斗与流失

某阅读APP(忘记叫啥了),在’我的’页面会默认开启手机陀螺仪,里面的的’签到’图标会根据用户手机的摆动进行旋转。

通过重力感应吸引用户注意力进行签到,减少签出漏斗和用户流失。

图片

 

emmo的【登录与注册】页上被设置了重力感应,页面中的表情球会会跟随手机摇摆方向进行滚动。

通过表情球的滚动吸引用户,降低退出【登录/注册】的页面漏斗,也提升了产品整体的趣味性、登录/注册成功率。

图片

 

四、促进产品趣味程度的增加

腾讯手机管家的充电界面,不仅会显示水位随着电量的上升或下降,还可以利用手机的【重力感应】改变小黄鸭的游行方向,特别有意思。

用户在充电状态下也可以使用手机打发时间,给用户带来惊喜。同时突显产品的个性化服务与对用户的重视程度

图片

 

喵喵记账有个设计挺有意思的,按下相机拍照后,需要晃动手机来使相片成像,才能看到影像慢慢显现,很有仪式感又有趣的互动体验。

通过连接现实生活感受,使成像过程具备仪式感与趣味性

图片

 

进入好好住的个人中心,在个人主页上会掉落用户获得过的勋章, 并可跟随手机陀螺仪的晃动而左右滚动。

通过重力感应增加个人中心的可玩性,引导用户获得更多的勋章并带来惊喜。

 

– END

作者:和出此严

转载请注明:学UI网》加了手机传感器后,这些产品/设计变得有多牛?

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


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


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



关于“薅羊毛”那些事儿——百度果园长线活动设计思考

seo达人


一、长线运营活动的价值

百度APP作为移动生态的搜索信息服务产品,用户会在什么场景想到百度APP并使用它呢?

十几年前,精力有限睡眠有限的打工人不惜牺牲睡眠时间,也要设置凌晨3点的闹钟;上网时间被严格控制的学生党也要注册五六个QQ小号,目的很明确:到点“收菜”,蹲点“偷菜”。十几年后每天早上睁眼先去蚂蚁森林收收自己的“能量”,再顺路去蚂蚁庄园喂喂小鸡,安排很多手机号码来种水果……各家产品通过带有游戏氛围的运营活动把产品的服务和功能以趣味化的方式传递给用户,让用户“薅羊毛”拿福利的同时也给产品带来增长价值。

图片

 

二、百度果园设计打法

本文以百度果园为例,从长线运营增长视角分3个方面分享运营活动玩法如何设计,如何帮助百度APP持续提升用户活跃和用户留存:

1.建立心智:让用户相信百度果园的真实性,愿意参加活动,安全的“薅羊毛”;

2.养成习惯:根据用户不同的属性,设计玩法让用户养成来百度果园浇水的习惯,实现百度APP的长期留存同时把“羊毛”薅到手;

3.平衡:种植真实性+趣味化的方式传递给用户,实现产品增长和用户福利的双重价值,“羊毛”薅不停。

图片

 

1、心智建立:让用户相信百度果园的真实性,愿意参加活动,安全的“薅羊毛”;

A 从新用户视角打造真实性:新用户上我们区分两个用户角度进行设计:

  • “薅羊毛”心理用户:了解各类平台的运营活动,酷爱“薅各个平台的羊毛”,对福利性质的运营活动非常敏感;进入百度果园最先看到Loading页面,从Loading页面开始就在文案上告知用户“免费水果包邮到家” 的福利性信息,图片内容也是倾向于真实水果,利益点明确从而让用户继续往下进行;利益文案和真实水果图片继续延续到“选种子”页面上,明确的福利信息与行动点来打造百度果园的真实性。
  • “从众心理”的用户,这类用户会被「TA人已经获得免费福利」的信息所打动,所以我们在“选种子”页面下方增加了动态弹幕,就像耳边有个声音在和你说:“隔壁已经领了3斤免费水果了,快来一起!”动态弹幕不仅是在信息上吸引用户参与活动,也是侧面描述了百度果园活动的真实性,与用户建立信任。

图片

B 精细设计果树成长阶段,与真实场景贴合:

为了营造更加真实的种植体验,我们在百度果园视觉呈现上也进行了升级,整体视觉效果与真实果树成长的6个阶段(种子→幼苗→大树→开花→果实→成熟)更加匹配,建立更加真实的果树成长过程,追求合理性和沉浸感,并且细化每一个不同水果对应的树、花朵、果实形态,让用户在参与活动的过程中体验果树成长到成熟的真实感受,也是在视觉效果上形成百度果园的特色。

图片

C 贯穿全流程的浇水动画增加真实性:

  • 我们在浇水动画上进行了体验升级,浇水动画分前中后3步设计来增加浇水的真实感受:
  • 尝试通过动画模拟生活中水壶浇水的行动动线,点击浇水后水壶移动至树的位置并倾斜至浇水方向,倾斜的同时水开始从水壶里露出水滴,整条浇水动作一气呵成;
  • 在浇水过程中,水滴分层陆续从水壶中浇水至树下土壤,下落时水滴逐渐变弱,就像真的滴落进土壤一样;
  • 明确的浇水反馈,浇水动画完成后,我们在树木和土壤上同时增加了光感反馈动画,就像是树木真实的吸收到了水分一样,生动轻松的反馈给用户,让每一次浇水都有视觉上的满足。

图片

 

2、习惯养成:根据用户不同的属性,设计不同玩法让用户养成来百度果园浇水的习惯,实现百度APP长期留存的同时让用户把“羊毛”薅到手。我们参考百度果园线上老用户数据,把用户分成3类,分别根据他们不同特点进行针对性的玩法设计:

  • 沉默用户:这类用户很少来果园玩,活跃的时间也较少,很难长期坚持浇水;对于这类用户,我们尝试设计快速领水果的玩法吸引他们,把领水果当成一个完整的大目标,直接明确出领水果的时间周期,同时也把难完成大目标切割成每天要做的简单小目标,每天召回用户完成当日任务,从而抓住用户回流。
  • 忠实用户:对于留存稳定的忠实用户,我们给这类用户增添游戏趣味,来百度果园做任务浇水时给到用户游戏感受,我们设计了“瓜分”玩法,给到用户一些惊喜感受。
  • 召回用户:“来帮大姨浇个水”,是不是经常在微信群里看到这样的消息,对于帮助好友达成目标,我们设计了“合种”玩法给到用户,由一人玩百度果园到带动身边亲朋好友一起玩,帮助用户更快一步达成领水果的目标。

图片

A  沉默用户唤醒:

「浇水挑战领水果」玩法参考上瘾模型进行设计,从push渗透入口到用户,基于「稀缺」核心驱动力让用户产生兴趣,引导用户进入活动;当用户进入果园后,通过大转盘抽奖的方式继续抓住用户的注意力,持续利用「稀缺」「紧迫」心智让用户进入活动开始体验玩法。开启浇水挑战后果园首页上方增加明确的浇水进度提示,让用户了解整体玩法进度,从而建立收获奖励的信心。

图片

B 忠实用户-丰富游戏玩法:

百度果园是一个长线养成类运营活动,为了让老用户持续保持新鲜感,我们在果园里增加具有趣味性的「瓜分水滴」玩法,是参与两日就可获得奖励的轻量化的玩法。第一天用户进入「瓜分水滴」活动,通过大额水滴奖池吸引用户的注意力,提起用户的参与兴趣,在行动操作上弱化付出成本突出行为动作,引导用户点击;用户报名后及时提醒用户打开订阅增加触达场景;并在弹窗上对付出成本与收获回报进行对比,吸引用户第二日再次打开百度果园参与领奖;在领奖的同时直接引导报名下一期活动,持续拉动用户回流。

图片

C 召回用户-好友之间的互动玩法:

为百度果园赋予情感与故事性,好友社交上分两步探索,第一步引导用户去“偷”好友的水滴,在好友之间持续互动,水滴是贯穿百度果园整体玩法的重要代币,好友的水滴被“偷”,就降低了好友“薅羊毛”的速度,但对用户自己来说,“偷”水也需要“偷”的高效,我们在果园里增加了连续“偷”水动作,边“偷”水边把好友喊回来;为了丰富用户的体验感受,在好友果园跳转之间增加了树叶遮挡的动画效果,动画转场同时也是替代小程序白屏转场的好思路,营造了好朋友在果园之间串门的感受。

图片

第二步好友互动持续升级,通过家庭合种的概念加强用户之间的联系,情感化的方式来提升用户主动参与意愿,拉动身边亲朋好友一起加入“薅羊毛”的队伍,一方面帮助用户提升领水果的速度,另一方面也帮助百度果园在用户上实现破圈。在玩法设计上我们区分3个视角进行设计:

  • 合种的发起者:突出快速收获,激励用户分享拉好友来帮忙种植水果,通过仪式感转场和主视觉的变化营造家庭故事氛围;
  • 帮种者视角:通过弹窗上操作确认加入合种小队,加入合种后在每次浇水时增加『谢谢你帮我浇水』的情感动画反馈,烘托帮种氛围;
  • 共同利益视角:阶段式的奖励激励用户召回和拉新的好友,把共同“薅羊毛”的氛围拉满。

图片

 

3、平衡:种植真实性+趣味化的方式传递给用户,实现产品增长和用户福利的双重价值,“羊毛”薅不停。

百度果园在上线一段时间后,我们思考如何能进一步丰富果园玩法,要帮助业务稳定ROI,同时也要在用户角度上玩的更加有趣。我们从体验、用户、增长3个角度进行分析,为百度果园增加“道具”玩法:

  • 从体验角度上打造更加真实的种植体验趣味性,让用户感知更丰富的活动玩法,并与用户的核心诉求相匹配,通过浇水道具来帮助提升用户的浇水效率、降低浇水难度;利用互动道具增加自身收益,再留出其它能够持续扩展的方向让百度果园的玩法更加丰富有趣;
  • 用户角度上,帮助用户更快实现自身领水果的目标;以及种树人的路上永远不能孤单的互动方式;
  • 业务增长角度上,后续可以持续扩展百度果园自身特色,持续把百度APP的服务、功能推荐给用户,持续体验产品,增加百度APP的粘性。

结合百度果园自身可落实上,我们优先在可以提升用户浇水效率,帮助用户快速拿水果的道具进行试水,结合线下实际生活中的种植场景去思考,所以我们将道具名称与玩法设定为「化肥」,在种植中增加化肥收益,提升果树的种植进度,让百度果园在玩法上更加生活化。

图片

新玩法上线后,通过上线提示引导用户去使用道具,用户进入百度果园后先给到用户一袋「化肥」来体验玩法,让用户快速感受到道具带来的实际价值,从而建立信任。用户使用道具后,果园主页直接破壳「化肥」道具的状态,我们给到「化肥」道具3种状态来描述使用情况;健康有活力的绿色状态代表化肥的养分非常充足,果树的成长速度加倍;橙黄色代表果树的生长进度欠佳,需要用户关注;红色状态代表果树缺少养分,需要用户去使用新的「化肥」,并在红色状态下我们直接破壳使用引导,直接提示用户点击。

图片

 

三、后续发散

随着百度果园的进一步成长,能够带给用户的不仅是“薅羊毛”类活动的概念,百度果园也会继续向带有社会价值与故事性活动内容延伸,更多的去赋予精神意义与社会意义;我们后续也会持续打磨、持续平衡产品收益与用户情绪的价值,不仅仅是在“薅羊毛”,更会让每一次的浇水、施肥和每收到的一箱水果都有自己的含义。

图片

 

写在最后

增长是产品商业化持续的目标,有了百度果园的经验和设计思路,也为我们后续探索新的长线活动玩法提供了基础和经验,我们的工作也将持续充满着挑战和更多乐趣。

 

作者:百度APP用户体验

转载请注明:学UI网》关于“薅羊毛”那些事儿——百度果园长线活动设计思考


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


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


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




设计灵感不应该被一个网站而限制

seo达人


不能被一个网站而限制

最近 Behance 封停了国内账号,导致很多设计师无法访问,因此也流传了很多解决方案。今天黑马哥就不和大家讨论这个解决方案了,其实有很多同学就算在能访问的时候也没看几次~O(∩_∩)O~。

图片

这个事件告诉我们,设计师的习惯是多么的重要,我们的设计灵感不能因为一个网站平台而局限。退出账号依然可以访问,只是很多同学纠结的是自己的收藏没有了,如果平时养成本地化采集的习惯,你就不会出现这个问题。我们不要把希望寄托在云端,只是买一个硬盘就能解决的事情,也不要觉得不方便,其实很多作品我们也不会经常看,存储只是为了不时之需。每年都对采集的作品进行一次整理,近两年的放在电脑里面,时间过长的存储在硬盘里面就可以了。主要还是要对作品进行分析,掌握作品的技法经验和设计思维才是关键。

除了存储习惯以外,我们也不要只是固定访问一个网站获取灵感,优秀的设计类平台是很多的,我们要发现更多新大陆。下面黑马哥为大家精选几个访问频次较高的国外平台,国内的大家都比较熟悉这里就不列举了。

 

设计/插画等灵感网站推荐

以下推荐一些个人比较常用的几个网站,排名不分先后,属于随机性排序。

1、notefolio

https://notefolio.net/

notefolio 是韩国的一个设计交流网站,很多设计师都会在这里分享自己的设计作品和进行设计交流。和国内很多设计作品分享平台类似,是一个综合型设计师交流社区,有平面设计、UI/UX 设计、插画、产品包装设计、摄影、版式设计、数字艺术、美术、工艺等等。

图片

 

2、Mobbin

https://mobbin.com/

这是一个汇集全球优秀 APP 截图的网站,有超过 50000 个优秀 APP,节省了下载应用的时间,对于 UI 设计师来说非常实用。

同样的应用还提供了 iOS 和 Android 两个不同版本的截图,简直非常的人性化。这是一个使用起来非常简单的网站,海量的设计必将开启你的灵感脑洞。

图片

 

3、Pinterest

https://www.pinterest.com/

这绝对是一个灵感采集的绝佳网站,经过众多用户的长期积累,已经汇集了全球大量的优质图片资源,其中设计作品也是非常丰富,且质量都普遍偏高。

你可以通过关键词搜索、画板关注、以图搜图等操作获得灵感,而且相似推荐还能延伸出更多类似构图、配色、主题等图片资源。点击作品还能跳转到原始出处,顺藤摸瓜找到更多优质资源,真的是非常便利。

图片

 

4、Designspiration

https://www.designspiration.com/

该网站除了通过关键词搜索图片内容以外,在搜索栏有⼀个调色板的图标,点击可以通过指定的颜色进行搜索相关配色的图片或者设计。在选择颜色的时候不是单一的色彩选择,可以选择几个配⾊组合进行搜索,对于设计师来说⾮常实用。

图片

 

5、Abduzeedo

https://abduzeedo.com/

Abduzeedo 是一个优秀的设计博客,提供给设计师创意和灵感的社区,这里有设计、摄影和 UX 等相关的文章提供给那些想寻找灵感的设计师。这是一个开放的设计社区,它是设计师日常的灵感来源。

图片

 

6、UI Garage

https://uigarage.net/

UI Garage 提供了很多应用设计的截图和模板,专业细分的类别和精挑细选的设计截图,还有很多设计工具推荐,是一个非常实用的网站。在这里不仅可以获得设计灵感,还能获得优秀的设计工具或者插件来提高我们的工作效率。

图片

 

7、Dribbble

https://dribbble.com/

Dribbble 相信很多喜欢 UI 设计打卡的同学比较熟悉,汇集了大量设计师的一些日常创意作品。该网站不同之处是发布作品需要邀请码,就是需要有邀请码的设计师邀请加入才能发布作品,获得邀请码也相当于设计能力获得认可。

整体作品的质量还是不错的,如果当你设计时没有想法,这是一个不错的灵感采集地。

图片

 

8、ndc

https://www.ndc.co.jp/works/

这个网站展示了很多非常不错的设计作品,偏向于简约风。相信这些项目设计的灵感,可以带给我们更多的设计思考。

图片

 

9、FolioArt

https://folioart.co.uk/

FolioArt 是一个插画艺术作品展示网站,拥有高质量的插画作品,形式也多种多样。就像一个插画家的资源库,让有商业需求的客户通过这个平台,和世界顶尖的插画师进行合作。

图片

 

10、unDraw

https://undraw.co/illustrations

这里提供的插画作品数量众多,各种小场景的插画无论是独立使用,还是组合使用,肯定可以满足很多场景需求了。平台内置的编辑器还可以对插画进行调色,导出格式也是支持后期编辑,非常的实用和便利。

图片

 

小结

设计的灵感来源途径是很多的,不局限于某一个单一路径,以上的推荐仅为抛砖引玉,还有很多优秀的网站给我们带来设计灵感和经验学习。每个人的关注焦点和选择角度不同,以上仅为个人推荐,不足之处欢迎大家留言补充。


作者:黑马青年

转载请注明:学UI网》设计灵感不应该被一个网站而限制

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


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


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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档