首页

从TikTok、Youtube、Pinterest等主流海外产品中,学习如何设计底部导航栏

seo达人




在开始之前,请大家先思考下面两个问题~

 

问题1:你的产品真的需要Tab Bar吗?

好像并不是。虽然淘宝、微信、微博、美团等大多数主流的产品都在使用Tab Bar,但这并不意味着所有产品都需要它。

图片

▲ 很多APP没有Tab Bar,比如日历、计算器、滴滴、Uber等。对于是否要在APP中使用Tab Bar,应该分不同的情况灵活考虑。

 

问题2:为什么产品要有Tab Bar?

答案是为了易于使用,意味着通过Tab Bar这种简单的设计可以轻松帮助用户导航到页面。

明白了上面的问题后,接下来就要考虑如何来设计Tab Bar,能更好的满足用户的需求和体验。

 

#1显示最重要的信息

导航栏应该只包含最有用的信息,不能添加过多无用的标签使导航栏混乱。许多App在导航栏上添加搜索功能,因为这有助于用户更快地导航和检索内容。

图片

▲ 在Spotify底部导航中,主页选项用于播放或收听所有内容,搜索选项用于搜索下一首歌曲和播客,音乐库选项用于播放列表中喜欢和保存的歌曲,单独的会员选项方便用户轻松点击并快速完成购买操作。

 

#2扩展导航的功能

主流App更喜欢在底部导航栏中使用4-5个标签,这样能保持导航栏的整洁,还避免了标签过多导致用户难以精确点击选项的情况。

图片

▲ Pinterest的导航栏上只有四个选项,这有助于用户轻松点击。消息选项会实时更新消息数量,对用户来说这样的提示很直观。另外搜索功能包含在导航栏中,方便轻松地在主页和搜索结果之间来回切换。

 

#3容纳多种标签形式

多数App底部导航栏会使用「图标+文字」的标签形式,这样能清楚地告知用户点击标签之后的结果。

有时候我们也会看到有些产品的导航栏只有图标没有文字,但这种形式并不会影响我们的操作,因为当导航栏的标签使用了用户特别熟悉的形状和内涵,完全可以省略文字

图片

▲ 宜家App的导航栏使用了大众都很熟悉的图标,所以即使不加文字,我们也能清楚地知道这3个图标分别代表了主页、分类、我的。

 

图片

▲ 相对于宜家,Youtube的导航栏就显得有点复杂,因为Youtube的图标含义用户可能并不是很熟悉,加上文字说明很有必要。

 

#4文字标签应该简短

文字标签应该简短而清晰,准确的文字说明能对用户使用正确导航起到关键作用。

图片

▲ TikTok导航所有的文字标签都简短,并且中间的添加图标还隐藏掉了文字,以此来引吸引用户的注意力。

 

#5避免隐藏导航栏

Tab Bar通常包含了最重要的导航信息,应该始终向用户展示,避免在用户滚动页面的情况下被隐藏掉。

图片

▲ Pinterest导航栏的设计是个例。当滚动页面时,底部的导航栏会隐藏,这么设计的原因可能是为了防止导航栏遮挡图像,保证用户看到更多的图像内容。

 

#6传达位置

Tab Bar帮助用户轻松导航,但如果用户不知道自己的位置,将会影响他们浏览和使用产品的体验。

图片

▲ 多邻国App通过改变导航图标的样式来让用户清晰的知道自己所有的板块。

 

图片

▲ Headspace在底部导航栏加上了线条装饰,每次切换选项,线条都会跟着一起切换,确保告知用户确切的位置。

 

#7从反馈中学习并不断改进

反馈是关键,如果想改善产品的导航栏设计,就要考虑并测试用户最喜欢哪个导航选项,不使用哪个导航,需要四个还是五个选项等等。

图片

▲ Pinterest通过收集用户的使用反馈情况来不断改进导航栏的设计,帮助用户更方便地使用产品,这些不断打磨的改进真是产品成功的关键。

 

#8在导航栏中显示更新

Tab Bar不仅仅起到导航的作用,很多时候还能通过状态变化告知用户更多的信息。

图片

▲ 在Twitter主页导航中,当有新内容推送时,主页就会出现更新的状态,提示用户查看新内容。这样的设计在Youtube、Pinterest等很多主流产品中都有使用。

 


原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》从TikTok、Youtube、Pinterest等主流海外产品中,学习如何设计底部导航栏

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

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


文章来源:csdn

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

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



UI动效设计之设计原则

seo达人



小编:动效已经成为UI行业里流行的趋势了,特别是游戏APP、短视频分享和直播类的APP或多或少都会有动效这样的元素。本文将来分享一些作者过往在动效设计过程中的基础知识沉淀,主要集中于探讨动效设计原则和运用的内容。

 

前言

前人已经总结了让动画生动的技巧,早在1981年由两位迪士尼动画师所撰写的《The illusion of life:Disney Animation》一书就提到了动画的12项基本法则,该法则也是受用至今。法则虽是针对传统动画而制定,但对于我们日常需求中所接触的动效/动画需求也同样受用。

 

目录

 

这次分享分为三个内容,第一个是介绍一下动画设计的“十二大原则”是什么?;第二部分是结合几个案例说明如何将这些原则运用到具体的项目中去的。最后就是动效设计流程的一个总结。

 

【1】动画设计技巧

如上图;动画的十二大原则又可以拆分为两类,动画设计技巧和动画表现技巧。

第一部分设计技巧是增添动画细节的方法,可以用这些原则让动画更有细节更生动。

第二部分表现技巧是提升整个动画在画面中全局表现力的,这个主要是多用在动画里。

在产品动效设计中还是常用到设计技巧,所以这次着重分享设计技巧这一部分。

 

 01 挤压和拉伸

【挤压和拉伸】是动效设计中最常用到的设计技巧。使用挤压和拉伸来强调物体的质感、重量、速度。我们可以根据物体的质感去决定挤压伸展的具体幅度。可以很好的表达出不同物体的不同质感。这里需要注意的是,物体挤压拉伸的面积尽可能保持视觉统一。以免动画前后造成不协调。

 

02 预期动作

【预期动作】可让用户感知到该物体即将发生运动,以及具体运动的方式和方向。让用户对动画效果有一个提前的预判不会太突兀。也可以根据预期动作去引导用户的视线。比如起跳时双腿先要弯曲,踢球向前射门时腿要向后摆动。所以在动效设计中我们运用好预期动作会让用户做好心理准备,让这个动画更加真实。

 

03 跟随与重叠动作

【跟随与重叠动作】这个技巧也是表达运动速度和物体质感的重要技巧之一。

跟随简单说举个例子就是挥棒球棒,棒球棒是手带动棒球棒转动,当手停止发力时,棒球棒不会立刻停止,会随着发力的方向摆动减幅,直到完全停止。摆动的幅度和持续时间会根据不同的力量及速度进行相应的调整。

重叠动作就是想象棒球棒如果是橡胶材质的,那么挥舞棒球的时候就会有一定程度的弯曲,所以速度越快,材质越软,弯曲程度也会越大。

 

04 缓动速度曲线

【缓动速度曲线】动效设计中最离不开的参数。不同的速度曲线也会给人不一样的感受,运动曲线较陡会感觉元素的质量更重冲击感更强,比如适用于我们竞争向的场景中。反之较平缓的曲线元素运动则较为轻盈。更适用于我们关系向的场景。

 

05 控制时间偏差

【控制时间偏差】运动物体的主要运动和附属运动不会同时发生,用时间偏差,会让动画更加真实自然。也可避免动效过程出现空档期,或者一次性出现过多的元素,增加认知负荷。信息离场时则需要快速高效,不需要人为的制造信息偏差。

 

06 弧形运动轨迹

【弧形运动轨迹】当自然运动的物体运动时都会受到引力的影响,简单解释就是速度越快弧线越平滑,移动距离越远。速度越慢弧线越弯曲,移动距离也越近。

 

【2】结合案例应用

下面就举几个案例,这些原则在具体工作中的应用。

 

01福袋:短触区引导动画 

 

这个是直播间福袋倒计时五秒开奖时播放的动画,目标是为了告诉用户福袋即将开奖,同时在这五秒内拉升福袋的价值感,提高福袋的参与率。

 

确定好动效的目标后,就要围绕这个目标对动画进行拆解。

  • 【第一步】是预备动作,在进行主要的动画之前需要有一个较强的视觉引导,让用户提前注意到福袋接下来会会有动作发生,这里采用的方式是抖动。
  • 【第二步】是体现价值感,这里采用的是金色粒子加发光的效果。
  • 【第三步】倒计时结束福袋准备离场。

 

动画步骤拆解完后就分析每一步动画需要用到的动画原则。比如第一步的抖动引起用户注意的同时下一步就需要喷出粒子,所以在抖动的这一步就要增加一个预期动作。在这里设计了两个预期动作:一个是粒子向右上角喷出,所以预期动作设计成向左下角提前移动收起,同时给下一步的粒子动画留出足够的空间出现。第二个是收紧口袋,为下一步的打开做准备。

然后福袋的绳子也会跟着福袋运动,这里用到了“跟随与重叠动作”“附属运动”,因为绳子材质比较软,所以抖动频率和幅度设计的时候都会相应的增加一些。

第二步动画当福袋打开时有一个“挤压和拉伸”的效果,一个是为了表现福袋的材质,再一个是为了体现福袋突然打开的速度感。

最后一步就是喷完粒子后的消失动画,这里加了一个位置移动的‘预期动作。然后在配合速率较快的缓动曲线最后完成  消失。

可以看一下运用动画原则之前和之后的对比,这个没有用动画原则的案例会有明显的顿挫感,整体动画不够自然,就会显得动画呆呆的。嗯。那这个用了动画原则之后整体动画会显得比较流畅,中间也没有空档期。这里说一下,基本上每个动画都会用到前面说的时间偏差控制来调整节奏,所以就没有在案例里单独列出来。

 

02. 盲盒:盲盒游戏引导入口动画

 

先拆解动画,再分析需要运用到的动画原则。这里主要说下不同点,第二步中用到了“弧形运动”的原则。‘盲盒喷出的彩带和星星会有‘不同的’速度,速度快的元素运动的路径会比速度慢的更平滑一些。

 

03. 拼图:拼图游戏引导入口动画

 

由于拼图本身造型比较单一,材质也相对偏硬。所以不好在拼图本身上去做动画。然后这里处理的方式是利用光感带出一个缩放的效果来进行视觉上的引导。这里同样控制了时间的偏差。先通过光感带动拼图礼物放大提供一个拍下去的预期动作。然后拍下去的同时扫光到边缘处立刻释放粒子,达到视觉上的同步。

 

04. 段位勋章 降段动画

 

这个案例是段位勋章的降段动画,前几个例子中动画的元素材质都偏软。所以这个案例主要是想对比一下材质比较硬的表现样式。

 

最后就简单总结一下动效设计的方法。一共拆解为四步,首先确定好需求方的目标和预期。然后再进行具体的脚本步骤的拆分,然后再聚焦到每一步需要用的的动画原则。最后再开始动效设计。设计前对需求进行充分的思考,让动效在助理业务发展的同时也能够做到有理有据。

 

原文地址:站酷 

作者:HEBBEN轩 

 

转载请注明:学UI网》UI动效设计之设计原则

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


做好大平台忽略的细节,这购物网站连获三大设计奖

seo达人


不知道大家有没有听过 Aesop(伊索)这个澳洲护肤品牌子?以天然有机植物草本为卖点,大部分产品在小几百到大几百之间。产品的网站上线后连获三奖,网站做得好,我觉得是定位清晰,想清楚产品的战略层和范围层定位定位,并运用到结构层、框架层、表现层。下面我们从各个层面分析一下网站的有哪些可以学习借鉴的地方。

图片

Aesop 的天猫国际店截图

 

他们本来是特别注重线下体验店的,除了装潢考究之外,里面的护肤顾问也都是经过专门培训的。

这样一家原本挺传统的中高端护肤品牌,与知名设计公司 Work&Co 合作推出了自己的购物网站。

图片

这个网站确实做得很有特色,而且把护肤购物的体验细节打磨到位,做到了大型网购平台做不到的事情。

上线后连获三个奖,我们来看看有什么可以学习借鉴的地方。

图片

 

信息架构

由于 Aesop 注重商品在精不在多,所以网站在导航里就直接将商品目录列出了,当然还是根据用途和肤质进行了分类。

图片

这种商品名称列表的展示方式,还真不是什么电商都适用的。

但是 Aesop 的商品不多而且包装设计非常统一几乎没什么可预览的,而老顾客大多更需要快速补货或者找到新品,所以就不需要像普通电商那样一层一层地靠预览图寻找。

以及购物车的设计也非常简洁,没有图片只有文字,而且换成深色的背景以提醒用户注意。

图片

 

内容策略

护肤品这类产品非常特殊,不像服装或者日用品那样看着不错就买了,而是需要向用户提供很多辅助信息才能促使其下单。

一般在门店里,顾问都会询问顾客的肤质和需求,向他们推荐合适的商品,并介绍其功效、用法、成分等信息,并打开让顾客闻一闻、试一试。

图片

网上购物时,虽然闻一闻和试一试提供不了,但其它的部分还是要想办法提供。

Aesop 的官网的商品详情页里,第一屏图片旁边会提供的基本信息包括:标题+功效说明+适合肤质+皮肤触感+主要成分+容量+价格。

第二屏会提供一张使用商品的视频或者图片,并提供更多信息:用法+用量+材质+气味。

第三屏会告诉用户,做一套完整的护肤流程是怎样的,以及还可以购买哪些配套的商品。

图片

另外,回头客会收到基于购买记录的个性推荐,内容也会根据季节和地域气候量身定制。

图片

 

视觉语言

Aesop 的产品包装非常简洁,深棕色的瓶子上,贴着米黄色的包装纸,上面印着深灰色的字,除了一些矩形框之外,几乎毫无装饰。

图片

线下门店的也是在结构上规整干练,但因为多用木质材料,所以没有工业风格那种冷冰冰的感觉。

图片

Aesop 的网站设计使用了与包装纸类似的色调,把白底换成米黄色,上面无论是线条还是文字,都是统一的深灰色。

而且整个网站在布局上运用了很多大方框和抽拉效果,与线下门店的设计风格像呼应。

图片

对于商品展示的风格,设计团队也是给出了一套与网站设计匹配的范例,Aesop 未来如果要增加新品,也可以在此基础上进行拓展延伸。

图片

另外,配套的活动页也设计也挺有特色的。

图片

 

思考总结

虽然国内购物都是平台的天下,但是很多大品牌还是没有放弃做自己的网站。

Aesop 这个网站,不论是在视觉风格、内容策略还是信息架构上,都是为这个品牌量身定制的,在细致程度上有统一模板的电商平台难以企及的地方。

我想未来哪怕平台再强再大,小而美的电商如果能够把细分领域的体验做到极致,还是有自己的生存空间的。

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》做好大平台忽略的细节,这购物网站连获三大设计奖

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


UI设计细节连载系列① | 让设计细节更高级的12个实用小技巧

seo达人



大家好,我是彩云。在做UI界面设计时,有时候看着设计出来的界面总觉得不大好,但又不知道问题出在哪,这里其实考验的就是设计观察力。资深设计师之所以强,往往就是强在对设计细节的把握能力,他们总能找到你所看不到的细节问题。大的问题往往一眼就能看出来,但设计品质高低往往就藏在这些设计细节中。观察力的提升也是来自于平时项目中的经验积累,为此,彩云围绕设计细节计划出一个系列文章,今天这篇文章是第一期,感兴趣的同学保持关注,后续会有更多设计细节干货文章连载更新,保证看完就能用到自己的工作中。

 

图片

当你在设计一个高效、美观的UI界面时,有时只需要一些小的调整,就能快速提高设计的品质。有时候仅仅是简单的调整就能设计出让客户、用户和你自己真正满意的界面。

在这篇文章中,我整理了一些小的设计技巧,来帮助你快速改进自己的设计,提高用户体验。

 

1.适当使用文本装饰元素

图片

有些人会拿极简设计出来说事,认为不应该加多余的文字干扰 ,界面上的内容都应该遵循有意义这个原则,这没有问题。但有时候增加文本的目的只是简单的为了“装饰”,这样是可以的。我们不希望所有的设计都变得平平无奇。

纯粹出于装饰原因而加入一些比较特别的元素也完全没问题,它可以不遵循可访问性标准,比如颜色对比度特别浅,看不清都没关系。只要这些元素不影响用户体验就可以。

 

2.UI界面中的不同元素要有区分度

图片

按钮、通知(文字链接)是用户界面中两个独立又重要的元素。如果可以的话,一定要确保用户在浏览你的网站或应用时能够快速且轻松地将它们区分开来。

按钮,在大多数情况下都是最重要的,所以在界面中一定要确保是最突出,并且很容易区分其他元素(例如:文本链接)。

 

3.使用更自然的投影

图片

设计过程中我们通常都会用到投影。投影的恰当使用,可以有效提高视觉品质。在设计界面时,避免使用比较重的投影,降低不透明度,让界面看着更加自然。

 

4.使用让视觉更加清晰的字体

图片

在设计中,字体适当都使用大写也是很不错的。它可以帮助你在设计中实现元素之间的多样性和对比度,提高视觉的整体效果。但要确保选择是合适的字体,行高和字重粗细,确保给用户呈现的内容清晰度。

 

5.面包屑导航设计要便于用户理解

图片

导航的设计无处不在,通常会应用在内容比较多的网站上,但有时很难理解它所表达的意思。如果将字体颜色和粗细稍微调整下, 就可以让用户快速确定自己所在站点中的位置,以及他们可能需要去的其他地方。

例如:如果他们通过搜索跳转到某个站点的某个位置,这就特别有用。像上图中的设计一样,始终让导航链接中的最后一项让它在视觉上与其他有明显区别,这样用户更加容易理解。

 

6.少用过高饱和度的颜色

图片

高饱和度的颜色(明亮的蓝色、红色、绿色等)在网站上是挺有视觉冲击力,并能吸引用户的注意的。但是如果过度使用它们可能会让用户的眼睛感到疲劳,尤其是结合文本内容一起使用的时候。

尽量少地使用高饱和的颜色,你可以尝试把饱和度降低,增加颜色中的灰度来使颜色变淡,这样不仅能避免用户视觉疲劳,还能更加突出重点内容,让用户阅读起来更加方便且不被视觉干扰。

 

7.使用用户熟悉便于识别的图标

图片

在设计中使用图标时,最好使用用户熟悉并便于识别的图标,让用户能快速理解使用它能做什么。使用不能传达正确含义的图标,只会变成视觉噪音,引起用户混淆,成为用户的认知障碍。

 

8.使用亲密性原则来表达元素之间的关系

图片

版式设计四大基本原则:对比,重复,对齐,亲密性,其中亲密性原则是把画面中相关元素进行分类,建立某种视觉上的关联,实现页面整体结构清晰度,加快用户在浏览网站或应用时的认知。

 

9. 使用4pt基线网格+8pt网格来做字体排版

图片

进行文字排版时,将 4pt 基础网格 与 8pt 网格 一起使用可以为设计带来更加和谐的垂直节奏。

你只需要使用 4 的倍数(16、20、24、28 等)的行高值将字体与 4 的基线网格对齐。为什么是 4? 好吧,就我个人而言,我发现在处理某些文本大小时,过去以 8 的倍数进行缩放并不是那么通用。

 

10. 减少标题的行高

图片

冗长的正文需要足够的行高来增加可读性,而标题通常要短得多,所以你可以稍微减少间距。

标题的推荐行高通常是文本大小的1 – 1.3倍,标题文字越大,需要的行高就越少。

 

11. 使用色轮上的邻近色不容易出错

图片

邻近色,是最和谐的配色方案之一,当你在挑选颜色遇到困难时,它能给你很大的帮助。

一组由“主”、“次”、“再次”组成的邻近色可以帮你快速构建一个简单的、不会出错的配色方案。

 

12. 在设计中最大化信噪比

图片

设计中的清晰度和可用性可以通过“最大化信号”和“最小化噪音”来实现,这反过来又产生了高信噪比。

你可以通过确保相关信息(信号)有效地呈现,而不相关的信息(噪声)被完全减少或删除来实现这一点。剪掉绒毛。使事情更加清晰,删减无关信息,强化重要信息,提高信噪比达到提高界面设计品质的目的。

 

彩云注:由于篇幅有限,今天是设计细节系列文章的第一期,下一篇会继续更新更多设计细节,感兴趣的同学保持关注,保证看完就能用到自己的工作中。如觉得有学到,一定要给彩云点个赞,我会更有动力,哈哈~

 

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

图片

 

原文地址:mediue

作者:Marc Andrew

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

译者:彩云Sky

转载请注明:学UI网》UI设计细节连载系列① | 让设计细节更高级的12个实用小技巧

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

干货|移动端·表单设计有方法!

seo达人



不论是 toB 还是 toC 的移动端设计中,都会遇到一些表单填写和上传证件信息的情况。面对移动端要手动填写的表单,用户通常期待有高效的解决办法可以立即完成填写任务。本文为你总结出了几种移动端表单设计的实用原则,可以有效解决表单不够友好、用户填写错误、费时费力的问题,希望对你有帮助。

 

一. 信息内容层级化——信息分层次、分步骤、分页面呈现

1 . 表单结构分层

从表单结构层面来看,内容过长的表单,信息可以分步骤、分页面处理。

使用条件

  • 表单内容过长,用户填写有压力
  • 操作步骤较多,需要给用户明确的步骤提示
  • 中途需要多次跳转,接入第三方服务的表单

 

案例分析

做企业认证时,由于需要填写的项目较多,步骤繁杂,因此很多产品会采用分步骤的形式,提示用户当前进度。

图片

 

2 . 页面内容分层

每个页面的信息内容呈现,有层级,有重点

使用条件

  • 表单填写内容较多
  • 页面内文字内容较多
  • 产品对于用户填写的内容有倾向(如对平台来说更有意义、更希望用户填写的信息)

 

案例分析

大众点评在设置用户信息时,虽然要填写的内容都是“设置”,但是重点需要设置的信息使用了链接颜色处理,做了强调。

图片

 

二. 减少用户输入——用其他方式代替用户手动输入

1 . 以选择代替输入

如果用户可以做选项时,就不要使用输入,可以充分利用移动设备的性能,比如 GPRS 定位、通讯录等,合理调用第三方或系统信息。

使用条件

  • 填写的内容边界较为模糊,词语不确定性较高
  • 选项数量控制在 3-5 个之间
  • 可以调用第三方或系统信息

 

案例分析  

  • 案例一:知乎 App 博主认证 和 爱康国宾 App 个人信息都使用了部分选项替代填写:

图片

 

  • 案例二:淘宝 App 可以调动系统定位,并提供几个最有可能的选项,让用户选择最佳定位。

图片

 

2 . 提供默认选项,替用户做选择

选取最大概率事件作为默认选项,减少用户的手动调整

使用条件

  • 系统能够确定出符合用户的较大概率选项
  • 选项数量控制在 3-5 个之间

 

案例分析  

蚂蚁链实人认证在上传证件时会根据用户所在国家和地区,帮助用户默认选择概率最大的选项,不需要用户自己操作。

图片

 

三. 定义键盘类型

根据调用内容调动不同的键盘类型

根据表单输入内容的不同,调用出系统不同的键盘类型。

使用条件

  • 填写的内容有明确的输入语言要求

 

案例分析  

航旅纵横在航班查询的时候,由于航班号都是大写字母和数字的组合,所以键盘会默认调用出只有数字和字母的输入法,同时默认开启大写形式。蚂蚁链实人认证在用户手动填写身份证时也同理。

图片

 

四. 避免重要信息被遮挡

重要的信息要始终可以被看到

需要避免输入项被键盘遮挡,也要避免将重要的输入提示作为占位符,不要在用户填写时被输入的内容遮挡。

使用条件

  • 表单的填写位置刚好会被弹出的键盘挡住
  • 输入提示很重要,需要用户在输入时随时注意
  • 输入提示很长,用户短时间内记不住

 

案例分析  

大众点评在写评论时,一些可以激励用户写点评的提示性文字,会在用户输入时始终存在。

图片

 

五. 实时校验

重要的信息要始终可以被看到

当输入需要被判断和检验的信息时,系统最好可以针对信息做实时校验,避免用户一直到最后提交表单时才发现填写问题。

使用条件

  • 输入的信息需要判断,并会影响最终的表单填写通过率
  • 输入内容的质量需要用户知晓,如密码的强度

 

案例分析  

证件号码输入错误时会给予相应的提示。

图片

 

原文链接:长弓小子(公众号)

作者:元尧

 转载请注明:学UI网》干货|移动端·表单设计有方法!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


酷家乐B端线上增值营销类视觉原则

seo达人


酷家乐的产品性质决定了其增值付费类活动的目标用户从根本上说是真正意义上的b端用户,这类用户群体的审美喜好一直以来很难与视觉流行的趋势和酷家乐品牌调性找到平衡点,这类视觉产出已经遇到瓶颈;而此类运营动作越来越多,并且作为公司营收的重要组成部分,在视觉侧形成正确的指导方向具有非常重要的意义。

 

背景与目标:

背景

  • B端增值付费类用户群体具有特殊性
  • 低成本的线上运营活动推广逐渐增多
  • 在线增长是公司营收的重要部分,尚未形成视觉侧的品牌形象

目标

  • 符合用户层且体现时下趋势的视觉形象
  • 品牌刻板印象扭转
  • 具有贯穿各类运营活动的可识别特性,形成视觉指导

 

调研阶段:

用户画像

图片

过半购买角色具备设计属性,对审美也有一定的要求,所以推广视觉表现可以也需要具备一定的设计感

图片

购买角色年龄分布较广,岗位属性分布也比较平均,因此推广视觉表现需要兼顾各年龄层,具有通用适配性

 

视觉现状

图片

设计过于“用力”,为了在营销活动中体现酷家乐科技属性,与D端视觉产生差异,一味采用深色/蓝色,硬朗机械感;营销氛围叠加后画面过饱和,难以与传统电商拉开层次。

 

流行趋势

图片

 

关键词提取:

图片

根据用户画像,结合流行趋势与酷家乐品牌调性,我们得出了视觉关键词,我们将它概括为“轻炫彩”。

 

情绪板:

图片

 

实战案例:

图片

图片

升级后的虚拟奖品全部采用3D设计,强化奖品的真实存在感,更容易吸引用户注意;同时应用“轻炫彩”的设计原则,能够普适于大部分增值营销类活动页面/海报中。

输出的系列图标可以在不同场景下复用,提升了长期的设计效率。

 

原文链接:酷家乐用户体验设计(公众号)

作者:柚子、阿九

团队:柚子、阿九、九州、白夜

转载请注明:学UI网》酷家乐B端线上增值营销类视觉原则

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


做了5年设计,还是这个设计技巧实用!!

seo达人



终于迎来了一年中最热的时候,整个人都感觉热膨胀了,似乎空调也变弱了许多,每天只想着一头扎进冰箱,可能这才是夏天的最优解。今天就以大暑为主题设计一款字体,看看如何让一个字看起来非常热。

 

首先将文字整理好。

图片

 

STEP 01 > 分析属性

接着我们分析字体属性,上次小暑是想体现凉爽,那么这次我们来表现特别热的感觉。

图片

根据分析出的属性,我们先构思好风格方向,胖胖的字体,要体现热的感觉。

图片

 

STEP 02 > 设计字体

下面将编排形式以图框形式画出来,这里可以看出是烈日和主题字结合的形式,笔画风格就是比较胖的设定。

图片

我们开始具体操作,这里我们用画笔先画出大概的草图,接着细化文字。

图片

做好字形之后,我们将两个字靠近,很挤的感觉,中间可以加上一些连接特征,减去部分笔画线条,使层次叠压更明显。

图片

然后我们再继续增加特征,加一些汗珠和流汗的感觉。

图片

接着我们需要对字体进行编排,按照之前画出的图框,画好烈日与文字叠压。

图片

最后我们可以用褶皱工具做出抖动的效果,热浪的感觉就有了。

图片

 

STEP 03 > 搭配颜色

最后就是搭配颜色,这里底色我用了深蓝色,可以更好的突出设计效果。

图片

OK,字体做完了,学会提取属性的特征,会使你的设计更有意思,技法只是其中一个环节,想法是非常关键的一步。

 

原文地址:趣投记(公众号)

作者:趣趣熊

转载请注明:学UI网》做了5年设计,还是这个设计技巧实用!!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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



一招让你的作品集脱颖而出!

seo达人


转眼2021已经过半了,不知道大家今年都有哪些进步呢?设计作为需要随时补充新鲜养分的行业就要求设计师们随时走在最前端,时刻防止被时代抛下!年中我回顾了这半年一堆国内外设计师的作品,总结了一招可以让你的作品集在千篇一律的作品集中脱颖而出的方法 —— 2D转3D

图片

看到这你会不会觉得:就这?先别急。现在大家都知道为自己充电,大多会在作品集放一些C4D作品,这已经不是什么新鲜事了。然而怎么样才能凸显你的不同呢?如果单单放几张作品图可能还不够,你可以考虑把它结合在其它作品当中,这样不仅可以展现你的能力,还能凸显你的运用整合能力,整体的作品集质感立马提升一个档次!具体怎么结合?一起来看!

 

01.APP页面

首先你可以在APP页面当中穿插C4D的配图,如果实际项目当中不好结合就可以多做些概念稿。如果页面当中你实在结合不好,还可以在页面包装展示上面下功夫,巧妙地建一个手拿手机的模型,你的展示就会比别人的更加分。总之想尽办法提升含金量吧!

图片

图片

图片

图片

图片

图片

图片

图片

q

02.网页

为了展示全能型,很多设计师也会在作品集当中加入一些网页设计。之前流行的大多都是网页和插画的结合形式,然而现在大多设计师已经开始和C4D作品结合起来!

图片

图片

图片

图片

图片

图片

图片

 

03.插画

之前很流行的办公系列插画,现在国内外大神已经升级到3D系列了,整体风格没有太大变化,整体质感却提升了很多!

图片

图片

图片

图片

 

04.图标

图标作品展示也是作品集当中常见的一部分内容,除了常规的图标展示外,你还可以做一些3D图标。

图片

图片

 

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

作者:设计师深海

转载请注明:学UIw网》一招让你的作品集脱颖而出!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


5个技巧,让你的做图效率翻10倍!

seo达人



相信很多设计师都会觉得每天时间不够用,没有效率,没有收获,那么今天分享5个时间管理的方法,帮助你提升效率的同时,个人也能得到成长。请看今天的分享,enjoy it。

 

如何做好时间管理?

图片

网上流传一张王健林的行程单,可以看得出时间分配相当满,于是我就特别好奇,专门问了一些我们公司的高P,他们每天那么多工作,是如何去平衡生活和工作的,其中有一个很重要的点就是做好时间管理且自律

比如今天晚上8点要和孩子去看一个音乐会,就会在8点之前把所有的工作全部搞定,然后去陪孩子!是呀,厉害的人,能在某一个点把事情全部搞定,本身就是超强的能力,那么作为职场人,我们该怎么合理管理时间呢,今天分享6个小方法给大家。

 

方法一:番茄工作法 

番茄工作法是由弗朗西斯科·西里洛于1992年创立的一种相对于GTD更微观的时间管理方法。因为创始人使用番茄定时器,所以叫番茄工作法。

图片

 

如何使用?

选择一个待完成的任务,将番茄时间设为25分钟,专注工作,中途不允许做任何与该任务无关的事,直到番茄时钟响起,然后在短暂休息一会(5分钟就行),每4个番茄时段多休息一会儿。

这个方法为什么好用呢?我相信很多设计师和我一样,每次工作几分钟后就会玩玩手机,看看微信,一边听歌,刷着网站,同时做着几件事情。

这个就是明显的一心多用,不够聚焦,番茄时钟好处就是督促你在这个25分钟内,专心只做一件事情。充分利用大脑的集中注意力去高效完成一件事,然后休息5分钟,再开始下一个番茄时间。

图片

当然你也可以根据你个人习惯来调整时间,我将番茄时间的25分钟改成了45分钟,这样有助于我更好的聚焦。比如我有一个需求时,我会花45分钟看完交互流程,45分钟去和开发还原开发细节,45分钟去收集设计灵感,45分钟去把页面框架搭建好,或者设计好一个局部等等,然后休息5分钟,让自己短暂休息下。

图片

 

合理拆解需求

学会拆解任务,设计师的需求有大有小,大的比如一个首页改版,一个设计语言的建立,小的有一个弹窗设计,一个图标绘制等等,那么运用番茄时间的第一步就是你需要对工作任务进行合理的拆解,才能用多个番茄时间段来覆盖整个项目,比如需要做一个首页改版,那么我就需要进行拆解任务。

图片

首页改版可以分成四个大的关键节点,需求讨论,设计风格探索,视觉设计,交付开发,然后每个大的模块下再细分小的任务,然后进行番茄时钟的评估,比如色彩收集我可能需要2个45分钟,那么就2个番茄时钟去完成它。

所以我们要学会合理的去拆分你的需求任务!明确到可执行的番茄时钟。

 

及时提醒

图片

每个25分钟或者45分钟的时间点提醒一定要及时,闹钟响了,停下手上工作,短暂的休息调整下,切忌继续一直工作下去,因为只有适当休息,我们才能更加高效,高质量的完成接下来任务。

 

听听白噪音

图片

很多同学在工作时,喜欢戴着耳机听着音乐,但是在使用番茄时钟时,我不太建议这样做,原因在于音乐会干扰我们思考,有时候音乐还会影响你的情绪,所以这个时候建议大家听听舒缓的白噪音,比如海浪声音、风声、雨声,我个人比较喜欢听海浪拍打的声音,能够让自己静下心来。

这里推荐一个番茄时钟的MAC工具,叫番茄钟,里面除了设置番茄钟外,还自带很多白噪音,非常好用!

图片

 

方法二:四象限时间法 

美国的管理学家科维提出的一个时间管理的理论,把工作按照重要和紧急两个不同的程度进行了划分,基本上可以分为四个“象限”:

1.既紧急又重要:

如同事投诉、即将到期的任务、上线危机等

2.重要但不紧急:

建立人际关系、设计培训、制定设计规范等

3.紧急但不重要:

如取快递、部门会议等

4.既不紧急也不重要:

如网购、闲谈、邮件、发朋友圈等

我们需要把每天工作任务,按处理顺序划分:先是既紧急又重要的,接着是重要但不紧急的,再到紧急但不重要的,最后才是既不紧急也不重要的。我们具体来看看设计工作中的一些场景。

图片

 

既紧急又重要

设计师工作场景:比如项目上线前的设计更改,明天和主管汇报的PPT,需求设计评审,这是我们每天工作的核心,大多数设计师在公司中日常任务就是产品的迭代,那么重要的事都是不能一拖再拖,都是迫在眉睫。

因为整个产品是赶时间点的,比如双11那天必须上线,那么无论如何都要按时保质量的完成,所以这时候是考验我们经验、判断力的时刻,如果没有做好,很有可能影响你的考核和晋升。

我自己的方法是每晚睡前给自己列出明天最重要的必须完成的3件事情,并用工具软件记录下来!

图片

 

重要但不紧急

这里主要是和你个人成长发展有关,比如学习英语、提升动效技能、掌握C4D、理财等等,这些很重要,但是很多时候我们每天都在处理重要又紧急的事情,特别是互联网公司,每天都在做需求,对于自己的个人规划,根本没有时间处理,就会导致你个人的提升这些事情完全没有时间做,多把精力放在这个领域去提升自己,必须主动去做,这是对于你个人成长最有帮助的。

比如你未来3年希望去大厂工作,那么你就要列出来大厂设计师的技能有哪些,比如科学设计方法、设计思维、动效、数据能力,然后都放在你重要不紧急事情里。在精力有限的基础上多做投入和提升,慢慢才能达到目标,否则就一直成为流水线设计,或者项目里面一个资源方,个人成长永远没有!

图片

 

紧急但不重要

比如PM找你聊需求,当然正常需求该聊还是聊,但是工作中经常有的聊,真的只是陪聊,很多时候真的在没有必要,没有结果的开会,聊需求真的是浪费时间,表面看似第一象限紧急事情里,因为迫切的呼声会让我们产生“这件事很重要”的错觉——实际上就算重要也是对别人而言。我们花很多时间在这个里面打转,其实不过是在满足别人的期望与标准。

设计师经常遇见的,改文案啊,产品会议,开发排期这种会议在我看来,出来关键节点有结果的需要参加,更多事情能少参与就少参与。

图片

 

既不紧急也不重要

这里的既不紧急也不重要就是每天你花费时间最多的地方,比如群里聊天,刷朋友圈,抖音,看八卦新闻,当然人都是需要一些无聊消遣的,但不值得花很多时间在这个象限。刚开始时也许有滋有味,到后来你就会发现其实是很空虚的。

我经常给大家说,你怎么比别人进步更快,就是设计之外的8小时你在做什么。别人工作时间外8小时都在学设计,学各种课程,而你在做些无聊事情,一年下去差别就出来了,不是说我们不应该去娱乐,而是需要注意时间分配。

总之,关于时间的4象限,需要大家多多的关注,多把精力放在重要又紧急,然后允许情况下,多提升重要不紧急事情的投入,长期坚持下去,你会有巨大的改变。

 

方法三:先思考再动手 

图片

在接到需求时候,多问自己几个为什么,这个页面为什么要改版?改版是为了提升用户留存,还是活跃度?还是提升页面转化?还是优化了什么?了解清楚,梳理清楚逻辑、流程关系以后再动手,这才是一个正确的做事方式,同时也需要思考,你在这中间做了哪些有价值的事!

这个道理很简单,但是很多人都没有做到,我也有很多时候,做着做着掉进一个坑里,所以做之前想清楚,想好了再做会更好!

 

方法四:避免重复造轮子 

图片

 

避免重复,经常总结积累

做一件事情,学会举一反三,学会从点到面,在很多公司面试晋升过程中,比如阿里,P6资深设计师和P7专家设计师,很重要的一个技能点就是,如何从点做到面。

我们在做很多需求时候,需要思考,这次做的这个需求后续如果遇见类似的,能不能快速解决,而不至于浪费时间和精力投入进去没有成长!比如说按钮设计,我们随便抓一个市场上的按钮,你会发现按钮的样式、大小颜色就是各种不统一,浪费开发资源和设计资源!如果你每天的工作都是做这种浪费精力没有存在感的事情,对于个人是很不利的,平时做项目多留心下,比如我做一个专题页面是不是可以去思考下,这个页面做完哪些控件我可以沉淀下来,复用到其他的场景中,赋能给其他设计师呢,这个是很重要的!

同样的,比如我们最近在研究一个弹窗,那么是不是我做这次弹窗,我就把弹窗彻底研究透彻,弹窗尺寸大小、颜色、按钮、状态都研究彻底,彻底掌握了这个知识点,后面再做弹窗信手拈来,深刻搞定一个任务,避免反复,经常总结和积累,也是提升效率很重要的方法。

图片

 

当你觉得很难的时候其实是在上坡

这是我很有感触的一句话,人的成长体现在同样的事情上,万事开头难,但后面会越来越顺手,因为在这个过程中你已经掌握了方法,我们需要做的就是不要半途而废,要学就学透学完整,后面工作效率就上来了。

图片

我们的专业知识就像这4个空杯子,一个代表AE,一个是C4D,一个是UI,一个是插画,很多东西都想掌握,于是每天学习一次就往这个杯子浇水一点,但是坚持10天就坚持不下去了,要么学别的,要么没有动力了,然后导致最后什么都没学到。

图片

正确做法是把一件事情学透了,学彻底了再去学下一件事情,你学AE就彻底把AE掌握了,再去学下一个,这样避免反复,彻底掌握不仅能加速你的成长,更能让你专业更深!

 

方法五:放下手机,定时间点 

最后这个方法对我来说很有效,学会放下手机,放下干扰,中国口香糖的营业额持续下降,大家知道为什么吗?口香糖一般都会摆在收银台的旁边,因为用户在超市收银台排队的时候,都在玩手机,没有人去看前面的货台!可见手机对我们影响有多大,所以当你准备学习时候,或者去完成一个任务时候,最有效就是手机放起来,至少一个番茄时间不要去看,这样保证你的效率变高。

另外一个方法就是定时间点,定结束时间点很重要,人对于时间点都是有天然遵守的,比如地铁错过末班车就回不了家,火车飞机晚点你也回不去,所以我们做事情时候可以立一个最晚完成时间,然后去做,比如我写作,定的时间就是每周末必须写完,所以我周末再忙,都会去抽空写完。

 

最后 

今天分享的这些经验,都是我实践过并有效的方法,希望可以帮助到大家一同实践起来,照着做下去,你会发现能压缩至少1/3的时间出来,让我们都把时间花在正确的事情,和正确的人身上,快乐工作,快乐成长,快乐生活!

 

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

转载请注明:学UI网》5个技巧,让你的做图效率翻10倍!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


没想到过程稿这么丑,结果用了两招就把效果改好了!

seo达人



上次我们分享了左面的等级相关的,今天我们接着来分享第二张任务相关的。本文会从引导页的3个方面讲解:一个好的创意非常重要、元素一定要有细节、搞一些灵动的小亮点,做好这3点能给作品加不少分。

最近做的引导页,效果如下:

图片

 

1.一个好的创意非常重要

很多时候,一个好的创意非常关键,可以让设计产生亮点,等级这个页面,我个人还蛮喜欢这个创意的。

因为这个页面讲的是每周任务,我从“周”这个字眼想到了时间又想到了日历,所以我想用一个大的日历作为整体外轮廓,然后日历里面的结构是一些相关的礼物元素。

但是最开始的效果并不理想:

图片

看不太出来是日历,那怎么样才能一眼就看出来是日历呢?

那就是有一种翻页的感觉,比如下面这种:

图片

这样就可以看出来是日历了。

除了日历,刚才也说了,还要有一些相关元素,礼物呀、升级的火箭呀、直播的小电视呀等等:

图片

这样有大的框架,再加上修饰的元素,整体的创意就差不多了。

 

2.元素一定要有细节

每一个元素都会影响画面精致度,比如之前说的那个礼盒,之前没倒角,倒角之后,和整个更搭一些:

图片

再比如,我之前画的电视有点太简单粗暴了:

图片

于是找了几个电视的参考:

图片

加了一些细节和优化,优化后效果如下:

图片

这样就比之前精致一些。

当每一个单体做到位了,组合起来就不会差太多,否则就会影响整体质量。

 

3.搞一些灵动的小亮点

其实让画面变灵动的方法有很多种,我个人特别喜欢使用一些可爱的表情、或者小形象。

比如之前在做任务头图的时候,字体上加了一个小微笑的表情:

图片

再比如这次,在日历外面加了一个黑子,偷偷看里面礼物的细节:

图片

让用户感觉里面确实有很多好东西。

再比如日历里面的星星也加入了表情:

图片

让其更加有生命力。

这些都是我喜欢使用的小技巧。

 

总结

今天就先分享这么多啦,每次做引导页都是比较开心的,因为可发挥空间会比较大一点,也可以使用自己比较喜欢的3D手法,希望过程中的小感悟可以给大家来点灵感!

下期见,么么扔!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺

转载请注明:学UI网》没想到过程稿这么丑,结果用了两招就把效果改好了!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


日历

链接

个人资料

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

存档