首页

上亿人使用的百度网盘是如何做品牌升级的?

涛涛

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

文章包括品牌理念、品牌识别、APP大改版、品牌延伸。

△ 点击查看完整视频

一、项目背景

百度网盘是百度提供的个人云存储服务,自2012年上线至今,通过强大的技术能力以及承担高额的带宽成本,为7亿用户提供文件存储、备份、分享、共享等服务,成为行业领先位置。

这6年里,我们从满足基础存储需求的一款工具,到现在越来越意识到高品质和情感化的体验对于用户的重要性。

因此,团队希望通过本次的品牌升级,能够从视觉识别、产品体验、线上线下推广等多维度来传递品牌核心价值,同时遵从极简克制的百度「高级感」设计理念,形成一套完整统一的设计语言,真正的做到像 slogan 所传递的:「让美好永远陪伴」。

二、品牌升级目标

本次品牌升级希望传递用户3个核心点:更有温度、更便捷、更年轻。

1. 为什么要「更有温度」?

网盘一直以来存储着用户的美好回忆,比如:每一次难忘旅途的照片,宝宝成长记录,家人团圆时的合影,激情工作时的陪伴。因此,它不仅仅是一款冰冷的工具,而是一个懂你的、有情感、有温度的生活助手。

2. 为什么要「更便捷」?

过去几年,网盘一直主打的品牌核心点是「安全」、「免费」、「大空间」,不可否认之前的品牌传递是成功的,因为通过这些核心点,在同行业的用户占有率达到80%以上。

但是,未来除了最基础的「安全」以外,还需要传递什么感受呢?我们深知产品体验还有很大的提升空间,比如:如何让产品更易用、存储更便捷、查找更方便、浏览更沉浸等等。因此,「便捷」是接下来品牌需要传达给用户的核心价值。

3. 为什么要「更年轻」?

通过数据分析,网盘的用户24岁左右占大多数,也就意味着我们的主流群体是年轻人。除此之外,保持品牌的年轻化,也是每一个公司都希望做到的。

因此,本次品牌升级,我们希望不管是从视觉层面,还是文案互动,以及运营手法,都更加年轻化及趣味性。

三、品牌理念渗透

品牌升级不是虚喊口号,而是应该通过各个设计触点的配合给用户传达融合、一致的感受和体验。因此,我们从以下几个场景进行渗透:品牌识别、APP设计、品牌延伸。

1. 品牌识别

在品牌识别渗透环节,涉及到以下几个方面进行优化设计:品牌色、品牌标识、品牌字体。

品牌色

品牌色是用户感知品牌最直观的方式,比如:想到可口可乐就想到红色,想到百事可乐就是蓝色,想零度可乐就是黑色。对,好的品牌色能够占领用户心智,从而产生联想,这就是品牌色的重要性。

那么百度网盘呢?网盘的品牌不是从0到1的小而美的创新设计,需要兼顾7亿用户量对品牌的已有认知,这是一个令人头疼的挑战。

因此在品牌色的选择上,考虑到较大改动带来的用户认知成本的增加,所以经过多轮尝试和讨论后,决定延续用户已有认知的「红蓝」配色,在此基础上,进行调整并渗透新品牌的理念。

同时,在品牌色上希望传递「更年轻」的品牌理念。我们大量收集体现「年轻」的场景进行多轮讨论筛选,提取色调,结合情绪板,最终提炼并定义了我们的品牌色。

品牌标识

在做品牌标识(LOGO)阶段,大家发散了很多想法,尝试了很多方案。

通过多维度思考以及利弊权衡,最后选择在延续原有 logo 特征上,体现新品牌理念——「更有温度」的感受。

那么,现实生活中什么场景,会给人「有温度的」感受呢?我们想到了拥抱、爱心、阳光、火焰等等。最终觉得「微笑」更符合我们所传递的感受,同时也能更好的跟原有 LOGO 特征进行结合。

以下是 LOGO 的设计思路,用颜色体现「年轻」,微笑体现「温度」。

LOGO的最终造型:

品牌字体

LOGO 确定后,还需要设计与之搭配的品牌文字,这个阶段最主要是找到跟品牌性格以及图形风格相契合的字体骨架。同时兼顾原有字体的认知,在此基础上进行微调。比如:统一字体的粗细,以及切角的角度,使整体视觉更加协调。

LOGO和字体组合的最终版本:

2. APP设计—NA端9.0全新升级

不可否认,传递品牌理念最直接的方式,就是在用户使用它时。因此,我们对产品 NA端进行9.0全新升级(这是自上线以来第一次大改版)。

品牌基因

在互联网产品越来越同质化的今天,做出有差异性和符合品牌调性的设计是我们面临的挑战。因此,在品牌基因方面,做了大量的尝试。

经过多轮讨论,我们选择以「积木」作为网盘的品牌基因。因为「积木」陪伴着我们成长,代表着我们的童年,给人温暖的感受,同时,不同几何形的积木看似单一,组合起来又有很多可能性,体现了年轻和趣味。

在图形设计(ICON)时,提取「积木」中的几何元素进行叠加处理,用色上更加鲜亮,突显年轻化,形成网盘自己的图形体系。

相比「尖锐」的直角,圆角给人柔和的视觉感受,同时经过多轮的尝试,最终确定圆角大小为8px。

同时在空白页上延续图形风格,能够更好的统一视觉语言,传递更加一致的品牌感。

动效上,采用了符合「积木」运动特征的物理属性。因此,运动节奏上利落的不拖泥带水。比如,积木受到一个力,由于摩擦力会快速停止,而并非很Q 的弹性动效。

下图中,「蓝球」代表目前网盘中元素的运动方式,「红球」代表了市面上常见的弹性运动方式。

下图,是将这种运动规则使用在产品界面中时:

同时底部 tab 在运动节奏上,也采用相同的运动规律,赋予产品年轻活力的视觉感受,同时又不会喧宾夺主过度抢戏。

下拉刷新,是增强品牌记忆的最好体现。本次提取 logo 基本元素,同时强调「微笑」,加深用户对品牌的印象。

功能设计

前面有提到,百度网盘保存着用户非常多美好回忆的照片,或许那些回忆,用户都已经忘记,但往往这些才是最大的惊喜和感动。

因此,9.0版本新增「故事」模块,让美好回忆与你不期而遇。通过技术对优质、精彩照片的筛选,生成故事卡片,推送给你,给你带来温暖。

为了节省用户时间,传递品牌「更便捷」的理念,本次改版我们优化「分类」模块,将「分类」外置于首页顶部,减少用户操作步长,轻松查找自己的文件。

同时在首页新增「最近」功能,方便用户便捷查找历史操作,而不是像以前,反复点击层层相套的文件夹去浏览与查找。

排版布局

文件列表是用户使用网盘最高频的路径,针对这个场景,我们遵循视觉服从功能,极简克制的百度「高级感」设计理念,通过视觉手段区分信息层级,让用户浏览时「更便捷」。

因此,本次对文件列表排版布局,从以下几个维度进行优化:大小、重量、间距。

大小

改版前,用户打开文件列表,首先看到的是满屏黄色的文件夹,而这些并不能帮助用户进行浏览或筛选,反而会造成视觉干扰。

因此,本次对文件图标大小,缩略图尺寸,以及标题信息大小,进行整体调整,从而提升浏览效率。

重量

对于文件列表,信息层级重要性依次为:名称>图标>时间,因此,本次优化了视觉重量对比。

通过视觉重量的处理(对标题字号加粗、颜色增强),让用户更加便捷的获取有效信息。

间距

以下是旧版安卓端和改版后对比,去除顶部蓝色双导航的同时,通过缩小文件图标,进而缩小列表间距。

同时,调研行业内有代表性产品的列表行间距,综合分析对比,最终确定列表行间距为「180px」,平衡体验的同时,让用户在首屏看到更多内容。

还对 NA端进行统一的栅格化布局,让页面富有统一的秩序感和韵律。让元素、模块、页面间距有规律可循。

栅格化布局落地全部界面:

以上,是品牌理念渗透到 APP 设计中,进行9.0大改版的相关设计,从品牌基因、功能设计到排版布局,统一的传递全新品牌理念。

3. 品牌延伸

线上线下的活动和物料设计,也是品牌和用户的触点,在设计的时候需要延续整体的品牌调性,传递出统一的品牌感。

总结

以上,是百度网盘本次品牌升级背后的原因,以及相关体验设计优化。从前期定义品牌核心理念(更有温度、更便捷、更年轻),到通过不同场景及接触点进行渗透(品牌识别、APP设计、品牌延伸),线上线下多维度的传达统一的品牌理念。所做的这一切,都是希望能为用户提供更好的服务。

本次品牌升级,是百度网盘所有同学努力的结果,我们深知还有很多体验需要提升,这次升级只是开始,会持续让用户感受到「让美好永远陪伴」。

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

动效如何使用更吸引人

用心设计

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

 

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

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

一、功能性动效的定义

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

定义:功能性动效是一种嵌入 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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

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

存档