首页

动效如何使用更吸引人

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

没有用户会拒绝任何产品的锦上添花,而功能性动效对于产品来讲,在满足功能效率的同时,能够带来更多额外的附加体验,是一种相对比较容易引发体验峰值的途径,下面和大家介绍 功能性动效的定义和类型。

移动端功能性动效的使用场景

一、功能性动效的定义

功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味,本文就来谈谈这四种功能性动效在移动端的使用。

定义:功能性动效是一种嵌入 UI 设计中微妙的动画,有着明确、合理的目标

功能性动效的主要类型:

页面空间转换;

视觉信息反馈;

功能操作引导;

品牌与趣味。

二、功能性动效的类型

类型 1 :页面空间转换动效

1.1 主要作用

页面空间转换的动效,主要是为了让用户通过理解页面中空间转换的动效,了解到界面和元素之间的空间关系,并随时感知到空间元素的变化。

告诉用户对象和窗口的状态是如何变化的,防止页面转换视盲,在空间上也能营造更好的印象。

1.2 使用场景

页面空间转换类动效,主要使用在轮播 banner/页面切换/导航菜单切换。

1.3 优秀案例赏析

案例 (1) :轮播 Banner 中的空间转换动效

案例 (2) :导航菜单切换

导航栏的的转换是指 App 中导航菜单状态的变换,有不同级菜单之间和同级菜单之间的转换,解释菜单之间的层级关系,让用户明白菜单转换的过程中到底发生了什么,下一步操作具体如何去做。

类型 2 :视觉信息反馈动效类型

具备良好用户体验的产品,都应该给用户的每一个操作都提供反馈,无论成功与否,反馈会使用户觉得自己与屏幕上的元素进行真实互动。即便隔着屏幕,也能让用户看起来是在直接操作,增加操作的可控性真实自然的体感。

2.1 主要作用

视觉信息反馈类动效主要是为了告诉用户目前操作到哪里了,时时状态怎么样,缓解用户对应用处理速度的量化感知。

具体表现为:

确认系统接收到用户的操作;

确认(或拒绝)用户的行为;

明确告知用户当前操作的进度/状态,缓解用户的紧张/焦虑感。

2.2 使用场景

系统信息提示/状态反馈/操作结果反馈/进度提示/加载提示。

2.3 优秀案例赏析

案例 (1):系统提示反馈

系统反馈,当系统状态发生重要的变化时,功能性动画也可以用来提醒用户,可以给用户一个快速而有简洁的一个反馈。例如:短信提示、来电提示。如下图:

案例 (2) :操作结果反馈

案例 (3) :进度提示反馈

在进度条设计中,明确告知用户当前的具体进度和状态,让用户随时随地知道还需要等待多久,对当前操作环境是可控的,而不是让用户去猜,让用户对当前的操作环境不可控。例如:他当下操作的步骤;目前数据下载/状态的具体执行进度等,让用户有心理预期。

类型 3 :功能操作引导

当用户第一次使用你的app的时候,如果没有帮助的话,他们可能会不知道如何操作。 我们应该给用户提供一些视觉提示来告诉他们哪些操作是可行的。

3.1 主要作用

功能性的动画可以提示用户去注意那些可以完成的操作,视觉提示可以给用户告知即将发生的事情。

3.2 使用场景

新手引导/功能操作引导。

3.3 优秀案例赏析

案例 1 :新手引导

案例 2 :功能操作中的引导

下图中的例子,是一个游戏里面的小例子,直接用动效完美诠释了“手把手教导”,这样用户理解的成本就非常低,根本不用思考,按照引导去做就能完成任务。是一种非常清晰的解决问题的方式。

类型 4 :品牌与趣味

4.1 主要作用

为了避免与市场上很多APP同质化,千篇一律的用户体验,品牌动画可以成为一个产品的营销工具,用来表现一家公司的品牌价值或者突出产品的优势,同时给用户一种愉快又难忘的用户体验。

4.1 使用场景

加载细节/动效速度感知/动效色彩的具体场景中使用。

4.3 优秀案例

案例(1):Uber 启动页的打开加载动效

Uber 的打开动效不仅让用户体会到愉悦感,而且它的展开式动效还很好地“控制”了用户双眼的视觉焦点。如下图:

案例(2):输入操作中的动效

下图的例子是一个输入账号密码操作时的动效,是动效带来趣味体验的典型案例:

当用户输入密码的时候,这个动作其实是一个非常隐私的动作,所以现实生活中,自己输密码的时候,都会希望身边的陌生人转身/不要直接盯着看。

而下面的例子就把保护用户隐私作为一种生理的本能,把这种生活中的习惯延续到界面细节当中,当用户输入密码的时候,输入框上面的猫头鹰自觉的捂住了自己的眼睛,向用户传达系统的安全性之外,也和用户进行了一次无声的趣味互动,是一个很好的信息反馈的案例。

除了上面的账号输入案例,还有其他类似的动效例子。例如:很多结果输入的反馈里,如果结果输入错误,那么输入框和文字则会来回晃动,同时输入的文字/输入框同时变红。这个效果会让我们联想到日常生活中的摆手和摇头,而这些都代表着“no”,是一种非常自然的动效交互逻辑。而正是这些小细节的使用,是打造良好用户体验的关键。

结语

其实,用户比我们预想中更能注意到页面中的细节,动效除了要帮助用户快速找到他想要的东西,达到他想完成的任务,也是一种可以给用户传递情感的交互元素。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

 

高手总结的15个技巧,让你轻松玩转数据可视化!

涛涛


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

大数据时代,数据驱动决策。处理不好庞大、复杂的数据,其价值将大打折扣。

那如何缩短数据与用户的距离?让用户一眼抓到重点?让老板为你的汇报方案鼓掌?

本文通过连环15关,层层深入,传你数据匹配图形神功,让数据可视化更。

无论数据总量和复杂程度如何,数据间的关系大多可分为三类:比较/构成/分布&联系。

一、比较

基于分类/时间的数据对比,通常需用到比较型图表。用户通过图表轻松识别最大/最小值,查看当前和过去的数据变动情况。

常见场景:哪个地区的收件量最多?今年的收入和去年相比如何……

1. 条目少 – 柱状图

比较条目较少时,如5个地区收件量的对比,可选用柱状图表示。

△ 柱状图

2. 条目多 – 条形图

当条目较多,如大于12条,移动端上的柱状图会显得拥挤不堪,更适合用条形图。一般数据条目不超过30条,否则易带来视觉和记忆负担。

△ 条形图

3. 看趋势 – 折线图

当X轴为连续数值(如时间)且注重变化趋势时,则适用折线图。

△ 折线图

4. 扩大差异 – 南丁格尔玫瑰图

除柱状图外,有无更新颖的表现方式呢?那就属南丁格尔玫瑰图了。

△ 南丁格尔玫瑰图

由于扇形的半径和面积是平方的关系,南丁格尔玫瑰图会将数值之间的差异放大,适合对比大小相近的数值。它不适合对比差异较大的数值,因为数值过小的类目会难以观察。

此外,因为圆有周期性,玫瑰图也适于表示周期/时间概念,比如星期、月份。依然建议数据量不超过30条,超出可考虑条形图。

5. 双向 – 双向条形图

前面的例子都是单维度比较,当比较正反两类甚至更多维度的数据时,可尝试双向条形图,下图为各大区的重点地区的收派件量的对比。

△ 双向条形图

用颜色区分大区,空心/实心区分收件量和派件量,既能整体比较大区,又能详细对比地区的情况。

打怪升级,再加点难度。在双向图上再增加一个维度,如下表,比较5个地区的利润及相应的收入和成本。请先思考一下,再下滑看推荐图表。

△ 业务数据

△ 双向条形图(多维度)

通过图形一眼就能看出深圳区的利润低于广州区,即使它的收入高于广州区,但成本相对来说高于广州区。

6. 目标达成 – 子弹图

实际业务中,常要考察指标的达成情况,如收入达标情况及所处区间(优、良、差),如下表,你会怎么可视化呢?动手画一画吧!

△ 业务数据

△ 子弹图

子弹图,因为像子弹射后带出的轨道。相较于仪表盘,它能够在狭小的空间中表达丰富的数据信息,在信息传递上有更大的效能优势。

若还要比较4个季度的收入情况,只需用不同颜色区分。如下图,一眼便知第二季度表现较好,而第一季度则不佳。

△ 子弹图

7. 性能 – 雷达图

对于一些多维的性能数据,如综合评价,常用雷达图表示。指标得分接近圆心,说明处于较差状态,应分析改进;指标得分接近外边线,说明处于理想状态。

△ 雷达图

以上就是「比较」类的常用图表,可归纳如下。

此表并非一成不变的「铁表」,相互之间还会串联交叉,大家还需灵活应用。

二、构成

部分相较于整体,一个整体被分成几个部分。这类情况会用到构成型图表,如五大区的收件量占比、公司利润的来源构成等。

1. 单层 – 饼状图

第1关中,对比5个地区的收件量时用到了柱状图。若看占比情况,饼状图更合适。

△ 饼状图

如果变成17个地区,会怎样?

像不像彩色七星瓢虫?

所以饼图分类一般不超过9个,超过建议用条形图展示。

除饼图外,环形图(甜甜圈图)亦可表示占比,其差异是将饼图的中间区域挖空,在空心区域显示文本信息,比如标题,优势是其空间利用率更高。

△ 环形图

2. 分层 – 环形图、旭日图

对于管理层而言,需先把握大局和重点。比如大区负责人需一眼看到重点地区及重点分部的情况(如下图),如何展示?

△ 环形图

△ 旭日图

这个叫旭日图,逐层下钻看数据,大区的重点地区及相应分部的构成情况一目了然。

3. 累计趋势 – 堆叠面积图

接下来,看看数值构成随时间变化的案例:第一大区(包含四个重点地区)近四年收入构成的趋势要如何可视化?自己想一想,再下滑看推荐方案。

△ 业务数据

△ 堆叠面积图

推荐方案是堆叠面积图,可以展现分量(地区)对于总量(大区)的贡献,并显示总量(大区)的变化过程。需要说明的是,地区收入的起点并非从 y=0 开始,而是在下面的地区基础上逐层叠加,最后组成一个整体。

4. 累计比较 – 堆叠柱状图

如果将上图X轴的标签文字(即年份)和图例(即地区)互换(如下图A),用来看每个地区近四年的收入构成,用哪个图更合适?

△ 堆叠柱状图

是不是觉得都可以?那图中 X1 有何含义?堆叠面积图 A 方案和堆叠柱状图 B 方案都可以表现累加值。差别在于,堆叠面积图的 x 轴是连续数据(如时间),堆叠柱状图的 x 轴是分类数据。此案例中的 x 轴是非连续的分类数据,因此用 B 方案更适合。

5. 累计增减 – 瀑布图

若想表达两个数据点间数量的演变过程,可使用瀑布图。开始的一个值,在经过不断的加减后,得到一个值。瀑布图将这个过程图示化,常用来展现财务分析中的收支情况。

△ 瀑布图

以上就是「构成」类常用图表,可归纳如下。

三、分布&联系

通过分布&联系型图表能看到数据的分布情况,进而找到某些联系,如相关性、异常值和数据集群。

常见使用场景:客户的年龄段分布?单票成本与收件量的关系?

1. 两个变量 – 散点图

仍以业务为例,下图为全国网点的单票成本/收入分布情况。

△ 散点图

单单这样看,可能看不出什么,如果加两条平均线就不一样了。

加了平均线,就知道哪些网点高于平均线,哪些低于平均线。但网点那么多,总不能逐个点击查看是哪个大区的,给散点加上颜色后,就很有意义了。

通过此图,可以看出哪些大区单票利润较低,急需提升,比如广泛聚集于右下角的第四大区,单票收入低于平均线,单票成本却高于平均线。

2. 三个变量 – 气泡图

大家都知道,网点总利润除了和单票利润有关,还和体量(即收件量)有关,用散点的面积大小表示收件量,就变成了气泡图。

△ 气泡图

3. 结合地图 – 热力图

气泡图与地图结合可演变为热力图。通过热力图,能看到哪些网点收派件量较多,需进行资源调配。

△ 热力图

以上是 「分布&联系」类的常用图表,可归纳如下:

小结

当我们拿到数据后,先提炼关键信息,明确数据关系及主题,再选择合适的图表进行可视化。希望下图能给各位一些参考(结合可视化专家 Andrew Abela 的图表选择指南,进行了简化调整)。

数据可视化设计只要多练习、多总结,总有一天会得心应手。

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

 

100部好电影,100组字体设计

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


PS: 这些网页设计作品截图均来自@dailywebdesign的ins列表,所有作品并非在Dribbble获取,所以没有对应的作品集页面链接。

设计师们,来一起欣赏的网页界面,从中获得新的设计灵感吧!

网页界面设计

Design by:@nomsedit

看了上面这张图,我想到一个同学的问题:

我可能缺乏创意,发现你发布的每个设计看起来都差不多。 例如作品中的大型字体,是用什么字体?如何让物体与字体穿插进去?

小编建议你不要过于在乎这些,这些都是软件使用操作,随着你工作时间长,慢慢就会懂了,当然也可以看看一些 PS 相关教程啦,作为初入门的设计师,建议你看作品的表现手法、配色,版式等等,并增加自己的审美能力。

网页界面设计

Design by:@outcrowdstudio

网页界面设计

Design by:@rathniley

网页界面设计

Design by: Robert Berki

这个跑车网页设计作品,布局排版都十分简约,仅仅采用很简单的宫格设计,但通过配色、字体层级、留白,便得整体感觉却非常好,所以不一定要做很复杂的效果,学好排版技巧也能做出不错的案例!

网页界面设计

Design by: Nick Taylor

网页界面设计

Design by:@vivekgetinstagram

网页界面设计

Design by: Kate Laguta

网页界面设计

Design by:@l_svl

网页界面设计

Design by:@gilhuybrecht

网页界面设计

Design by: Samuel Scalzo

网页界面设计

Design by:@rathniley

网页界面设计

Design by:@rob_robertson_design

网页界面设计

Design by:@arendstom

网页界面设计

Design by: Hippie Mao

网页界面设计

Design by:@christvizcarra (PS:这张图处理很赞!)

网页界面设计

Design by:@rrahian

网页界面设计

Design by:@dennis.design

网页界面设计

Design by:@brkrobert

网页界面设计

Design by:@artlemonstudio

网页界面设计

Design by:@vladimirbiondic

网页界面设计

Design by: @bobchadesign

网页界面设计

Design by: Nick Herasimenka

网页界面设计

Design by: @bobchadesign

网页界面设计

Design by: Jabel Ahmed

网页界面设计

Design by:@dawidmlynarz (像这种简约版式,再配合 CSS 动画,效果就更不错了)

网页界面设计

Design by: Ali Sayed (小编提醒你,这种网页,看似简单,但内容质量非常重要,不要乱试!)

网页界面设计

Design by:@aleksandrkotelevets (黑白配色)

网页界面设计

Design by:@im_abhishekp

网页界面设计

Design by:@im_abhishekp

网页界面设计

Design by: Samuel Scalzo (手机网页)

网页界面设计

Design by: Alexander Laguta

网页界面设计

Design by:@im_abhishekp

网页界面设计

Design by: Sarath

网页界面设计

Design by:@outcrowdstudio

网页界面设计

Design by:@realvjy

网页界面设计

Design by:@konstantinzhuck (星巴克专题页面设计)

网页界面设计

Design by: Mike | Creative Minds (美食网站设计)

网页界面设计

Design by:@rathniley

网页界面设计

Design by:@im_abhishekp

网页界面设计

Design by:@im_abhishekp

网页界面设计

Design by:@outcrowdstudio

网页界面设计

Design by: Cosmin Capitanu

网页界面设计

Design by:@zainjin

网页界面设计

Design by: Dragon Lee

网页界面设计

Design by: Rafal Staromlynski

网页界面设计

Design by:@trionndesign

网页界面设计

Design by: @trionndesign

网页界面设计

Design by:@hrvoja

网页界面设计

Design by: @netflayo

网页界面设计

Design by: @trionndesign

网页界面设计

Design by: Dimest

网页界面设计

Design by:@rtralrayhan

网页界面设计

Design by: Rob Robertson

网页界面设计

Design by: @sogaso

网页界面设计

Design by: Nick Taylor

网页界面设计

Design by: Nick Taylor

网页界面设计

Design by: Nick Taylor

网页界面设计

Design by: Nick Taylor

网页界面设计

Design by: @luovastudio7

网页界面设计

Design by: Ben Johnson

网页界面设计

Design by: Nick Taylor

若是网页设计已经很多年,但还是没什么进步的你,这样的话你要注意了,除了自己工作,小编建议你看一些书籍,设计导航推荐的100本设计书籍,里面有技能书,有理论书,都需要看一下。

今天的网页界面已分享完毕,你喜欢这些作品吗?欢迎在下文评论处留下你的建议。


 


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

《龙猫》公布中国版海报,设计师黄海12年作品全回顾!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

今年是宫崎骏电影《龙猫》上映的30周年,吉卜力工作室已经将电影原版胶片转换成了高清数码,进行了修复与重制,并将于12月14日在内地上映。

近日,龙猫中国版终极海报公布,由我们熟悉的著名设计师黄海设计:

小梅与小月在看似是稻田实则是龙猫毛茸茸的肚子上玩耍。

设计师黄海大家想必已经不再陌生,被称为「天才设计师」的他设计了包括《一代宗师》、《黄金时代》、《大鱼海棠》、《我不是药神》、《小偷家族》、《影》、《邪不压正》等电影海报,收获了外界的一致好评。

一、初出茅庐

黄海出身「广告界的黄埔军校」奥美,在这里他遇见了他的恩师——台湾著名的文案大师刘继武先生。

在奥美的经历为他打开了创意的大门,之后他加入了一家本土广告公司担任美术总监,2007年,一次偶然的机会接到姜文的电影《太阳照常升起》的海报设计任务。这是他第一次设计海报,却在戛纳电影节上一亮相就艳惊四座,从此声名鹊起。

△ 2007年《太阳照常升起》

在此之后,黄海受到大量知名导演青睐,包括陈凯歌、姜文、冯小刚、冯德伦、徐克、王家卫、陈可辛等,在此期间也设计了相当一部分的早期优秀电影海报,例如《让子弹飞》、《唐山大地震》、《太极》、《一代宗师》等等。

他的设计逐渐成熟,风格也十分多变,唯一不变的是让人惊叹的创意和构图。

△ 2008年《梅兰芳》

△ 2009年《花木兰》

△ 2009年《白银帝国》

△ 2010年《让子弹飞》

△ 2012年《白鹿原》

△ 2012年《太极》

△ 2013年《一代宗师》

△ 2013年《中国合伙人》

二、走进大众视野

时间来到2014年,一组《黄金时代》的电影海报,黄海从设计界走到了一般群众的视野中。

这组极具东方色彩和现代美学的海报在微博、微信上被疯狂转发,似乎就是以这为契机,所有人记住了这位天才设计大师的名字——黄海。

海报根据在不同上映国家的特点,制作的张张样式都不一样:

△ 中国大陆

△ 美国

△ 日本

△ 台湾

△ 韩国

△ 香港

相比于《黄金时代》,同为2014年的作品,《匆匆那年》和《黄飞鸿之英雄有梦》似乎就并不出名。

三、优秀作品井喷

2015年,有了之前《黄金时代》的出色表现,黄海更加引人瞩目,从这一年开始,他的优秀作品呈井喷式地出现在大众视野中。

△ 2015年《寻龙诀》

△ 2015年《山河故人》

△ 2015年《道士下山》

△ 2015年《念念》

△ 2015年《捉妖记》

2016年,国产电影《大鱼海棠》崛起,而黄海和插画师@sheep卍 共同合作为其设计的海报再次惊艳四座。

跌落水中的椿,和大鱼的一眼凝望,开启了这场奇幻的故事。2016年7月8日,赴你十二年之约。

△ 定档海报

当海洋与火焰相融,7月8日,我们终将重聚。

△ 终极海报

同年,中国中央电视台出品的一部三集文物修复类纪录片《我在故宫修文物》上映。

海报分别以6件国宝级珍贵文物为背景,分别是:元代「剔红水仙花纹图盘」、明代「边景昭 竹鹤图轴」、清代「黑色绸绣菊花双蝶图竹柄团扇」、清晚期「掐丝珐琅万寿无疆中碗」、明代「自在观音像」、宋代「汝窑天青釉弦纹三足樽」。

当然这一年还有喜剧之王周星驰的大爆电影《美人鱼》:

黄海更是在这一年操刀第53届金马奖海报,他以杨德昌《牯岭街少年杀人事件》为灵感,设计出男主角拿手电筒探照暗处的身影,除了向经典致敬,也带出「回看来时,照亮前行」的期许。

△ 2016年 第53届金马奖

四、作品赏析

时间推进到2018年,今年黄海更是收割了整年大半的优秀电影。而他的惊艳的设计风格也逐渐变得让大众看到海报的同时就能反应过来「这是黄海老师设计的吧」。

△ 2018年《我不是药神》

△ 2018年《江湖儿女》

△ 2018年《少年的你》

△ 2018年《犬之岛》

△ 2018年《小偷家族》

有人说,黄海把中国电影海报设计拉至了国际水平,他将艺术、灵魂和故事完美地结合在一起,他的魅力在于很多人仅仅因为他设计的海报而去看相关的电影。

如今黄海设计的电影海报作品越来越多,我们不妨开始期待,他的下一份作品会带来什么样的惊喜。

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

 

网页设计 & 灵感 » 当扁平化UI转拟物化设计后

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


在设计领域,设计风格总是多变的,也有很多随着流行趋势而不断变化,但是存在着N多的争议。

当扁平化UI转拟物化设计后

对于扁平化和拟物化,说白了,只是风格的不同,最终的设计目的是一样的,但是,却还是会有很多的朋友会纠结于是扁平还是拟物化设计,争论是扁平好还是拟物好,怎么说呢,各有各的优点,各有各的不足,这是今天,我们要带大家看的!

当扁平化UI转拟物化设计后

Michael Fugoso,一位来自圣地亚哥,加利福尼亚的插画家和设计师,帅小伙!

他说,关于他自己,就各像其他人一样,他喜欢旅行,他喜欢吃比萨和海鲜,他非常的重视家庭,家庭总是以他的第一位!他也喜欢分享,因为分享会让别人的生活更容易,帮助别人成功,他觉得,这有助于他成为一个好的设计师。同时,他也喜欢自私地做自己想做的事情,因为他觉得,这有助于他成为一个好的艺术家。

今天,带大家看一组他的作品,在他的这些作品中,很好的反映了扁平与拟物的关系,扁平的背景,搭配上拟物的元素,其视觉效果非常棒,冲击力十足,震撼性十足!

扁平与拟物,数不清的恩怨情仇!道不尽的爱恨纠缠!

这是一张扁平化的插画!

当扁平化UI转拟物化设计后

当它变成拟物后

当扁平化UI转拟物化设计后

你觉得哪个的视觉冲击力更强一些?

我们接着看!

这是一张扁平化作品!

当扁平化UI转拟物化设计后

他开始在矢量程序上呈现

当扁平化UI转拟物化设计后

开始色彩的调整与细节的完善

当扁平化UI转拟物化设计后

最终的效果呈现

当扁平化UI转拟物化设计后

这是一台扁平化的车

当扁平化UI转拟物化设计后

添加装饰元素

当扁平化UI转拟物化设计后

调整颜色后,得到一个扁平化的结果

当扁平化UI转拟物化设计后

把车元素单独提取出来

当扁平化UI转拟物化设计后

在矢量程序上呈现

当扁平化UI转拟物化设计后

上色,添加细节

当扁平化UI转拟物化设计后

对细节的刻画简直不能再棒

当扁平化UI转拟物化设计后

调整色调

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

最终的对比

当扁平化UI转拟物化设计后

再往下看,你可能会被美哭

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

扁平与拟物的碰撞

不一样的花火

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

这些火箭,看得人热血澎湃阿

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

看了感觉效果如何


 


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

优秀用户体验设计师的12个特质

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

要怎样才能算上一个优秀的设计师呢?优秀的设计师意味着要在大公司里工作?还是要打造了一个意义非凡的世界?抑或是因为写了本设计领域热销的著作?…

一个优秀的设计师可能会满足以上的所有条件,也可能一条都不符合,这其实都不重要。当你和优秀的设计师一起共事的时候,你就会从他们工作和为人处世的方式——独处方式、思维方式、设计方式——来感受优秀的设计师到底是什么样子的。其实他们都有自己独特的处事风格,并且各自有着不同的特长和个性。我有幸和一些非常棒的用户体验设计师和产品设计师一起共事过,他们有一长串无法数尽的本领。但我观察到一些他们共有的特质:

“成为一个优秀的设计师的秘诀,就是热爱设计。”—— Onur Cobanli

 

1、他们善于提问(They‘re interrogators)

“有效的提问带了来洞察力,洞察力滋养了好奇心,好奇心浇灌了智慧”

在设计师的眼里,世界是千变万化的。优秀的设计师经常会对事物进行质问。如果有什么是难以理解的,他们就会去问个明白。

 

2、他们不会“走直线”(They avoid the straight line)

“‘走直线’是走不了太远的”

探索者将“永远不去走直线”视作自己的信条。探索的过程中总会伴随着未知。探索者不知道他们不知道的事情有哪些,他们的目标也不是去寻找有哪些事他们不知道,而是去理解事情的本质是什么。在我看来,优秀的设计师会用一种开放的思维来探索他们的项目,因为他们自己也不确定他们最终会发现什么。

 

3、他们是“双重性格者”(They’re ambiverts)

“双重性格者(同时具有内向和外向性格的人),往往更有创意,因为他们更能适应新环境”

双重性格者能很好地应付团体活动和社交场合,当然他们也喜欢有独处的空间做点自己的事。优秀的设计师既需要与团队通力合作,也要喜欢独立地想点子。

 

4、他们是很棒的废话探测仪(They’re great bullshit detectors)

“开发一个内置的废话探测仪”——Ernest Hemingway

当你跟形形色色的人一起共事时,你必须学会把他人的废话扼杀在摇篮里。优秀的设计师知道什么样的人废话多,并在工作中杜绝他们说废话的机会。

 

5、他们在“累积变化”中工作(They work in ‘cumulative change’)

“聚沙成塔 ”(“Small changes eventually add up to huge results”)

在会计学里,“累积变化”是指所有差异的总和。革命性的变化往往是累积而来的。优秀的设计师会抓住让他们不爽的东西,并且试着去做改善。他们善于把眼光放远来观察事物的全貌,并且明白微小变化会引起巨大的转变。

 

6、他们善于自我批判(They have a strong disbelief system)

“不要一开始就对自己设计方案的抱有自信,开始的时候应该持有一种好奇和质疑的态度”——Simon Pan

这条黄金法则是Simon Pan在读了Marty Neumeier 的《创造力提升的46条天才法则》后提炼出来的。在这本书中, Marty 强调说人的意识形态对学习新知识是有害的,我们要抛开先入为主的观念,并思考为什么我们相信我们所做的事情。

 

7、他们不怕犯错(They like to be wrong)

“掌声固然动听,但禁得起批判更难能可贵””——Paul Arden

优秀的设计师并不会特别在意自己的观点能否成为解决方案,他们更想要的是完美的结果,自尊心被他们扔在一边。他们的终极目标是:在使用它的用户和创造它的公司眼中,这款产品是最棒的。

 

8、他们会有一点点“魔怔”(They’re slightly obsessive)

“用不寻常的眼光来观察寻常的事物”——Vico Magistretti

“我喜欢和那些有创造力(雄心壮志)并且’魔怔’ (专注)的人一起共事”——Nicole Kidman

设计师在解决问题时会变得非常专注。我见过一些优秀的设计师,他们对自己的项目抱有极大的热枕,并且被它们牢牢地吸引着。当事情不顺利的时候就会令他们相当的苦恼。

 

9、他们是善于合作的独行侠(They’re collaborative loners)

“成为一个独行侠吧,这样你就有时间去思考,去探索真理。保持神圣的好奇心,让自己的人生变得有意义。”——Albert Einstein

优秀的设计师既能自得其乐地独自关在小黑屋里工作,也可以和团队一起合作,达成他们想要的目标。

 

10、过程是一切的关键

“把你最爱的东西都干掉,从你的想法中走出来,投入到过程中去”——Chirryl-Lee Ryan

过程是一切的关键。我们要对过程报以信任。这个过程是带领设计师通向最终目标的引路牌。在这个错综复杂的世界中,过程就是设计的关键。

 

11、他们善于倾听和观察(They’re great listeners and watchers)

“要想成为与人交流的大师,首先要学会闭上嘴来倾听”——Rick Warren

人都有两个耳朵,两只眼睛和一张嘴。优秀的设计师会遵照这个比例来使用它们(即两分听,两分看,一分说)。大多数人倾听是为了做出回应,优秀设计师的倾听则是为了试图去理解人们的所思所想背后的本质。

 

12、他们富有同理心(They give a shit)

“即便是简单的关心也是值得敬重的”——Edward Albert

好的设计师潜意识里是富有同理心的,他们关心人本身,喜欢问“为什么”,同时他们关注人的技能和本质。

“与普世观点不同的是,设计师并不是艺术家。我们通过艺术的手段将我们的思维和工序可视化,但与艺术家不同的是,我们致力于解决客户的问题,而不是展示我们自己对世界的看法。”——Erik Spiekermann

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


40张网页排版设计案例,总有一款你会用得上

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


即使现在很多 WordPress 网站模板、H5 在线编辑器等等,但网页设计需求依然非常多,线上编辑器尽管如何智能,但终究也是「模板式」,想完全符合用户需求的产品还是靠有经验的设计师来完成。即使是有经验的设计师,依然是需要不停的找新的设计灵感。

事隔一个月,@dailywebdesign已更新了30+精品网页截图,小编今天再次为大家整理出来,方便大家欣赏,同时也推荐大家看上一期的《26张很棒网页首屏设计作品欣赏》。

PS:这些网页设计案例均来自 Ins 的用户,并非 Dribbble 网站,所以没有对应的作品集页面链接。

40张网页排版设计案例,总有一款你会用得上

Design by: @vladimirbiondic

Design by: @capouska

Design by: @gtamarashvili

Design by: @abaygulov

Design by: Samuel Scalzo

Design by: @ui_ux_joy

Design by: Rono

Design by @rathniley

Design by: @brkrobert

Design by: @kreativa.studio

Design by: @fireart_studio

Design by: Oliwia Przybyla

Design by: @outcrowdstudio

Design by: @tintinsupp

Design by: @ihrvoje

Design by: Catalin Blanaru

Design by: Craig Gittins

Design by: @dannpetty

Design by: @halolabteam

Design by: Chalar Tintin S

Design by: Samuel Scalzo

Design by: @dogstudio_be

Design by: @divan_raj

Design by: @divan_raj

Design by: @outcrowdstudio

Design by: @jan.teschner

Design by: Abhishek Biswas

Design by: Michael Brewer

Design by: Cosmin Capitanu

Design by: @janravendeklerk

Design by: @arendstom

Design by: @capouska

Design by: M S Brar

Design by: @divan_raj

Design by: @syedraju01724

Design by: Yu Long

Design by: @marcocoppeto

Design by: @bestservedbold

Design by: @akasharun4161


 


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

日历

链接

个人资料

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

存档