首页

官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路

资深UI设计者

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

阿里巴巴副总裁、中国内贸事业部总经理汪海在对外分享时提出 1688 已经从信息平台时代进入数字化营销平台时代,让 1688 用户在平台内完成营销和销售一体化的整个商业闭环。1688 的使命也升级成「在数字化经济时代,让天下没有难做的生意!」在全新的业务态势下,为了更好的满足用户需求,阿里巴巴(1688)主客升级势在必行。

首页重要性

首页既是业务分流的中心场景,也是平台卖家判断平台打法,买卖家感知平台价值的重要「门面」。从 UED 专业视角来看,首页是定义 APP 内体验范式及视觉风格的核心场景。

如何改?

1. 盘点现象,定义问题

满足业务新的诉求:平台阶段性战略不同,1688 从曾经的信息平台过渡到交易平台,如今向数字营销平台转型,旧的内容框架难以承载业务的新发展。

提升分流质量:从过去的数据效果来看,需重新判断,在 For 特色采购需求和服务大面采购需求之前,如何平衡调优,提升首页的流量转化效能。

体验升级:移动端 APP 天然生长在手机系统上,系统的风格更迭也牵动着 APP 的变化和升级。在 8.0 升级前,1688APP 存在着 5.0、6.0、7.0 多个由不同设计师在不同时间点所设计的场景,到8.0,APP 趋待从框架层、表现层以及品牌等方面进行统一及升级。

改版策略

1. 聚焦用户价值,基于业务打法升级内容框架

APP 升级前与业务对焦,我们收到三点诉求:

  • 用算法的能力去承接首页买家的转化;
  • 搜索是 B 类买家找品、选商的核心工具,需要引导更多用户更高频地使用搜索;
  • 互联网流量红利到瓶颈期,需要进一步做好新用户的承接。

在内容框架制定上,我们聚焦用户价值,舍掉 7.0 时的内容版块个性化,聚焦做商品的个性化,仅保留For大面用户的营销、内容场景,提升算法推荐区的曝光率,以此区域的商品做首页的直接转化。

2. 弱化容器,突出内容,塑造心智

视觉容器升级

做平视觉框架,选择「大间距分隔」,为内容留出干净、简洁的视觉空间。

精简内容栅格,避免形式给用户阅读带来的负担。

提高留白率,提升页面整体的透气性,为内容留出更清爽、轻松的阅读空间。

拉大字体大小的梯度,加重字体颜色梯度,提升文字的清晰度和可读性。

强调版块特性,塑造买家心智感知,达成业务目标

强化搜索:7.0时,曾上线过将搜索做到「主观上觉得显眼」的测试方案,但相较于之前沉浸式搜索,数据几乎没变化。

8.0 阶段,从视觉表现层跳出看:「强化搜索」并不意味把搜索设计得更「显眼」,而是达成「让更多用户更高频地使用搜索」这一目标。如提升搜索底纹词、热搜词精准度和吸引力、增加搜索布点等,都可能助力达成业务目标。

基于用户单手操作时,拇指在屏幕不同区域的点击体验,选择将搜索组件移到更易于点击、视线更聚焦的屏幕位置,上线后数据提升非常明显。

Banner 升级:7.0 的 Banner 画面丰富度高,加之描述字段多,用户阅读有一定成本,较难在 3 秒内掌握全 Banner 的信息。此外,相比于 C 类用户,B 类用户会更偏理性,我们选择以更冷静、克制的「视觉语气」与 B 类商人对话,而非渲染氛围引导点击。(上线后,同样的活动内容,按新、老两版规范设计投放两套 Banner,新版较老版 UV CTR 约高出 48%)

For 新人:以差异化的利益、个性化秒杀、新人攻略做用户的承接。

营销场景心智差异化表达:营销由伙拼爆品、天天特卖两部分组成,我们判断爆品主打心智为「卖得火爆又便宜」,特卖主打心智是「限时限量抢便宜」,选择将两个区块最关键的特质做强化表达。

内容场景(直播)动态化、互动感、实时性传递:抽象出直播间的方形版面+内容叠加形式来设计,大坑位以动图传递给用户直播的动态感,以红包、个性化商品的多维实时轮播气泡传达直播的互动感、实时性。

3. 升级品牌,贯穿APP场景

为什么要做APP应用内的品牌设计?

品牌设计是将内容层(平台价值)与接收层(用户)做柔性链接的一环,譬如在 APP 场景中,由于有商品、商家、商机等「干货」,即使不特意做品牌设计,用户也能与平台保持刚性、稳定的连接。而反过来看,品牌做得很好,但平台没有「干货」,用户也不会单奔着品牌设计来平台。我们认为,做 APP 应用内的品牌设计,核心价值在于助力用户认知到平台特性,感知平台价值。从设计专业视角来看,APP 应用内的品牌设计,有利于定义并统一 APP 内体验范式及视觉风格,保障用户的体验。

怎么做?

每位设计师所处的业务环境不一样,解决问题策略和方式也千差万别,在 APP 应用内的品牌设计中,个人选择是通过厘清内容层(平台)多层次诉求及 For 用户的价值点,认知、感知接收层(用户)特质及内容倾向,基于内容层底料+接收层用户特质确定设计底层范式,塑造用户感知。

1. 图形范式

在阿里巴巴商业操作系统中,1688 聚焦做 B 类业务,直接服务对象是 B 类买卖家,业务细分出档口尖货、淘工厂、企业采购、淘货源、微商代发、工业品超级店、跨境专供等,这些都是具有一定 B 类特质及体量感的场景,故在 APP 业务门洞及常规图标的表达上,基于扁平 vs 写实、轻盈 vs 厚重、活泼 vs 稳重的维度,图形选定轻拟物、弱对比的设计范式,塑造 B 类场景 For 买家的沉稳、份量感。

此外,异常/空白场景也是平台与用户互动,塑造用户感知品牌的机会。在空态情感化插图部分的绘制上,力求塑形出有份量、易读、有意味的场景以示对应空态,并佐以轻微动效,增强空态的互动感。(在收藏夹、我的供应商等工具型场景,基于空态信息的价值考虑,将空态与工具新手引导相结合,并未做常规的插图。)

2. 色彩范式

标准色

随着业务的发展,我们基于新的业务态势,丰富了 1688 品牌色,以橙红色作营销、利益属性的表达,以商务蓝作服务、数字化属性的表达,以金色作权益属性的表达。

辅助色

在实际产品设计中,品牌色并不足以表达各类业务场景中的多层次的内容。因此,基于 VI 品牌色,裂变出不同重量、层次更丰富的品牌辅助色。

场景用色规则

基于买家角色及场景特征定义用色规则。

1688色域及选色示意

以 HSB 模式划定出偏沉稳的 1688 色域,在日常 banner 及业务场景中可灵活取用。

3. 动效范式及应用

动效是设计的重要手段,良好的动效表达能增强信息表达强度,清晰信息层级关系,提升用户体验的舒适度。做动效之前,将 APP 信息结构平整到三层,保障内容在页面简洁明畅地呈现。

在实际落地中,动效实现非常依赖技术资源,故动效设计之前,应考虑一个前提:动效设计增益内容表达,价值可论证,效果可衡量;同时,考虑接收层用户的商人特质,我们期望动效表达给用户以稳定感,并且在设计表达上能兼顾效率。

在动效呈现部分,主要以缓入、缓出、缓动结合曲线来调节,总的来说,内容入场时节奏稍慢,速度缓,分层加载,交代清信息在 Z 轴上的层次关系,内容出场时节奏快,速度快,内容层级不用再做分层消失。

APP 内典型场景的动效案例及演示:

4. 业务品牌的价值传递

此外,除以上在图形、色彩、动效等基础维度收口外,我们也需要将业务品牌放声给买卖家,以达成业务品牌的价值传递。在 1688 向数字营销平台转型的阶段,业务提出了「源头厂货通天下」的口号,我们通过设计手段,利用 APP 开机启动页及下拉刷新的空间,将「货通天下」的概念强化表达。

结语

以上便是此次首页改版阶段性的记录。在 8.0 的视觉体系里,为更好地突出内容,视觉容器选择尽可能做轻、做平,以冷静、克制的「视觉语气」与 B 类商人对话。当然,这是设计师和业务同学阶段性的选择。后续品牌的完善及产品的优化,仍需结合数据持续打磨。

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

QQ20周年展 | 策划与设计执行

资深UI设计者

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

即便QQ已经陪伴大家20周年,我们依旧怀揣初心,保持科技改变生活的热衷。应运而生我们设计了太空企鹅探索科技作为本次20周年的品牌理念,来寓意新的里程碑到来。

Image title

Image title

Image title

https://v.qq.com/x/page/l087071z1ua.html

01 概述 | Overview


QQ 20周年,是互联网产品长青的一个传说,也是家喻户晓企鹅IP形象的成长,同时也代表了鹅厂精神的坚韧与奋进。即便已经陪伴大家20周年,但我们依旧怀揣初心,保持科技改变生活的热衷。应运而生我们设计了太空企鹅探索科技作为本次20周年的品牌理念,来寓意新的里程碑到来。就像宇航员勇于探索未知宇宙知识一样,QQ带着初心不断保持变革与成长,为用户提供更具科技力与创新的服务!也寓意鹅厂不断探索未来与科技向善的愿景!

02 logo设计ㅣLogo Design


我们在设计的第一阶段,logo设计,就是围绕“有趣和科技”来展开发散设计。我们决定从数字“20”开始入手,把QQ和20不断结合,同时融入宇宙太空元素,寓意QQ不断的对外探索,从多个维度来看世界,寻找有趣的内容。我们为了贴合“宇宙探索”这风格,为这次展览设计了专属徽章,徽章设计沿用了太空的概念,结合星球,星空,宇航员等科幻元素。简约的几何形状和大胆的配色贴合“QQ更好玩”的年轻潮流气息。


Image title

03 概念设计ㅣConcept & Design


1. Space QQ


太空QQ的太空服设计指的是科幻电影如《星际穿越》和《火星救援》中的太空服,我们也将的时尚潮流,2018年以来运动鞋领域最为明显的趋势,将 ugly & oversize 的潮流风格注入到运动鞋的设计当中。这种将时尚潮流与太空服相结合的新型运动鞋,使整体设计看起来时尚而风趣。如果没有它,太空服可能只是一个浅显的概念。


Image title


太空QQ创意草图


Image title


运动鞋设计草图


Image title


3D原型


Image title


2. QQ X PUPU


本次设定,由两只企鹅背靠背组成,20周岁的QQ与1周岁的PUPU,鹅厂拥有着各种企鹅IP形象,除了经典的企鹅QQ,还有各种其他特色企鹅,包括PUPU,BabyQ等等,同时PUPU来自外太空也是企鹅FM产品的主形象,经典企鹅QQ携带了新生代PUPU共同探索科技太空,寓意企鹅在不断创新与拥抱新生代相互合力,为年轻用户提供更具科技力与社交娱乐化的服务。


Image title

Image title


04 最终设计ㅣFinal Design


Image title

Image title


05 8米QQ模型制作ㅣ8m QQ Model 


对于实际生产出这个巨型模型是个大挑战,我们先利用电脑三维模型生产出8米高的泡沫模型,反复检查生产的泡沫模型是否和设计模型一致,不断的打磨调整,待到确定泡沫模后开始翻模工作。


Image title


先给泡沫模喷上泥巴水,便于脱模,之后喷上石膏水,并加入麻丝增加石膏的牢固性,待石膏模晾干,把石膏里的泡沫模掏出后开始往里面涂一层泥巴水(便于后面玻璃钢脱模),然后涂上树脂和纤维布/毡,干了之后砸烂石膏模,里面的玻璃钢模型就出来了。


Image title


玻璃钢定型之后给内部焊接钢铁骨架,作为加固作用。刚脱模的玻璃钢是非常粗糙的,于是对玻璃钢的外观进行打磨,使得表面光滑和调整细节,打磨完成后开始批灰和上底色,前后三次,为的是填补空隙瑕疵使模型更逼真完整。接着我们便调模型身上的颜色,在不断尝试中调出最接近效果图的颜色,开始逐步上色。


Image title


上色完成后再喷保护漆防止褪色,待模型的漆干后清洗整个模型,为贴上专属贴纸做准备,接着确定贴纸位置并逐一贴上。最后开始搭建安装,因为在搭建过程中模型会有磨损,搭建完后再做最后的修补工作,最后巨型QQ模型完美地呈现出来。


Image title


Image title

Image title

Image title

Image title

Image title

Image title

06 贴纸设计ㅣSticker Design


配合QQ20周年庆,我们要给8m的巨型QQ模型搭配上了贴纸设计,以slogan “QQ更好玩” 为设计的出发点,希望把有趣好玩的态度注入各个品牌中,为品牌logo严肃的视觉带来玩味感和潮流感。同时配合巨型QQ宇航员的造型,我们在设计贴纸时参考了航天飞机,科幻机器等机械图案元素,每个品牌的设计方案除了有趣值得玩味外,同时需要贴合宇宙科技探险的风格。


Image title


我们针对这个大方向再进行了几轮细化,选出能代表各个品牌的最终的设计方案,并把贴纸模拟在太空QQ模型上反复测试贴纸最适合的位置,让贴纸和模型的整体风格可以完美契合。通过各个品牌的logo再设计贴纸和太空QQ的碰撞,把品牌推广做到最大化。


Image title

Image title

07 搪胶玩具设计ㅣFigure Design


作为QQ20周年庆的惊喜,我们制作了与巨型太空QQ同款的迷你搪胶玩具,在这次玩具设计上我们加入了小机关,在玩具内部放置了小磁铁,使得QQ和PUPU可以方便拆卸组合。


Image title

Image title


同时为其设计了专属包装盒,包装设计从“太空宇宙”的角度出发,以黑色为主基调,图案印花设计选用了太空QQ来进行设计,把太空QQ模型线体化,配合QQ20周年logo进行设计,利用烫金工艺与醒目的图形搭配,更有效的展现了QQ年轻化的品牌特点。同时为了减少后期生产制作之间的沟通误会,我们同期将几个较重要的角度的包装3D效果图快速渲染出来,有着非常直观的参考对照作用。


Image title

Image title


08 品牌物料设计ㅣProduct Design


1. 海报设计


设计QQ20周年展的宣传物料,我们采用了最能代表这次展览的太空QQIP为主体,作为本次展览的专属元素,太空QQ贴近科技,同时又具有趣味性和潮流感。我们结合了太空探索的特性,提炼出宇宙元素作为宣传的内容,让海报设计具有更多内容可看性和观赏性。


Image title

Image title


2. T恤设计


配合QQ20周年展,结合宇宙太空元素,并从QQ20周年logo图形中延展设计出各类代表图形,正面简洁直接地显示出本次主题,把醒目的图形放置于T恤背后,利用坐标轴和经纬度的信息图案配合各个抽象化的宇宙元素,增加T恤设计的科技感,更明确地展现了科技向善的愿景。


Image title

Image title


09 QQ20周年展览ㅣExhibition Design


QQ联合深圳福田星河COCO Park 举办了“QQ20周年主题展览”,展馆外形模拟宇宙太空站,以太空白灰色为主调,搭配简洁的立方体造型,白色灯条勾勒大门,并以QQ20周年专属徽章做门面,科技未来感扑面而来,就如大型QQ太空站坐落于地球。


Image title

Image title


展馆大门旁的墙上安置了颇具科幻气息的全息投影装置,上面展示着QQ在不同时期的形象以及20年关键大事记。代表着不同时期的QQ形象用全息投影的方式展现出来,从最开始的胖QQ到现在的新版QQ,让你一眼了解QQ演变史。中间放着QQ历届各个跨界Figure展示,总有一款捕获你的心!


Image title


Image title


同时本次展览还和% Arabica咖啡跨界合作,% Arabica咖啡展台设计简洁透气与QQ20周年展览风格完美融合。一边喝美味咖啡,一边畅游展馆,两全其美。


Image title

Image title


蓝色发光的隧道科幻神秘,一进去马上感受到了超强的氛围感,仿佛时光碎片擦肩而过。用QQ扫描墙上的二维码,立刻生成你的专属时光隧道“QQ个人轨迹”,各种瞬间涌上心头。


Image title

Image title


联合天天P图,用13个LED屏组成了“复古头像画廊”。走进互动装置小屋里,往镜头前一站,稍作等待后,以你的形象即时合成的13个复古头像就会出现在面前的13块屏幕上,体验即时“变脸”效果。让自己的头像和曾经用过的QQ经典头像合二为一,形成专属的复刻版头像海报。


结语


QQ20周年展不仅包含了展馆设计,还包含了市场营销,运营活动,周边商品等多个设计环节,环环相扣,缺一不可,一起构建了整个QQ20周年展的设计体系;展览设计了太空企鹅携带着新生代PUPU共同探索科技,寓意鹅厂不断创新探索与科技向善的愿景,为年轻用户提供更具科技力与社交娱乐化的服务,在打造“QQ更好玩”的路上奋力前行。

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


这是一篇不看会后悔的配色干货!

资深UI设计者

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

今天我们来讲一讲大家期待已久的配色方面的干货。

其实几年以前我就写过一篇关于配色的文章,早期的面粉估计还有印象,在那篇文章里我基本已经把设计师需要用的关于色彩构成的主要精华内容都汇总出来了(文末会附上文章链接的,别着急)。

但是因为不同设计行业的工作内容是有差别的,而且每个人的基础和理解能力也不一样,所以仅凭一篇文章是无法解决所有人的难题的,所以今天这篇文章算是关于那篇配色知识讲解文章的补充篇。

不过在讲解如何配色之前,我们还是先应该先记住一些关于色彩的理论知识,因为有了理论依据我们才能在做设计的时候有理有据,而不是胡乱配色和瞎试浪费时间。

所以这篇文章主要分为了以下几个部分:

  • 普遍意义上的色彩是指什么?
  • 设计流程和配色思路分享
  • 我的其他配色法宝
  • 总结

普遍意义上的色彩是指什么?

简单点来说,色彩即颜色,颜色可以分成有彩色和无彩色两大类,看有彩色主要看色相/纯度/明度三个方面的属性,无彩色也就是白色/黑色/各种深浅不同的灰色,也可以说无彩色是饱和度为零的色彩。

色相,即可以明确表示颜色色别的名称,比如红橙黄绿蓝靛紫:

色彩有冷暖之分,我大致用温度的概念标注一下,其中「0」是指中性色,「-0」是指中性偏冷,「+0」是指中性偏暖(当然,这里的温度是我自己为了具体化冷暖的概念而标记的,主要是方便大家理解,所以不用去纠结这个数值准不准确哈哈,你明白他们代表很冷/很热/一般冷/一般热就好了!~)

明度,就是指色彩的明亮程度(通俗点讲,在某种色彩里添加的白色越多就越明亮,添加的黑色越多就越暗)。

纯度(饱和度),就是指色彩的纯净度,我以红色举例,如下图所示:

如果大家想看更加详细的关于色彩构成原理的解说,可以看这个系列:《优设独家配色专题》

设计流程和配色思路分享

不管我们做什么方面的设计,设计练习也好,实际项目也好,在设计之前,我们最好是能先明确我们的设计目的是什么,然后确定一个主题,依据这个设计目的和主题,去构思创意,有了创意后再去去探讨具体的落地执行,其中包含了字体(标题文案)的设计排版配色、画面整体的构图和配色、细节优化、氛围渲染等等;

当然,这一次关于其他方面的内容我只会附带着讲一点,因为我们今天的主要内容是讲配色。

以我最近做的一张照片海报设计为例:

下面是我前几天用手机拍的一张照片,照片里的内容是我的手拿着一朵花。

1. 设计之前先确定主题

比如这一次我是确定了设计主题为:浪漫。

因为我看了下这张照片里面花是粉色的,我的手指甲油也是粉色系的,而我也是一个(年纪越大就越)喜欢粉色的女人~同时因为我喜欢尝试各种不同的风格主题,浪漫这个主题我之前是没有做过的,所以要不这一次就浪漫一回好咯。

那么说到浪漫,大家脑海里的第一反应会是什么呢?我不知道大家会想到什么,反正我会想到很多场景画面,比如2002年的韩剧《冬季恋歌》里,男女主角在雪地里相拥的画面,天上飘着雪花,同时背景音乐响起了《My memory》;

△ 《冬季恋歌》因为是2002年的韩剧,所以现在看海报是有点过时了,但剧是好剧的

再比如2017年的电影《爱乐之城》里,男女主角在繁星点点的绝妙夜空下翩翩起舞和拥吻的场景,同时背景音乐响起了《City Of Stars》;

△ 电影《爱乐之城》海报

再比如1995年上映的宫崎骏动漫《侧耳倾听》的结尾情节,时隔2个月才见面的男女主角一早就偷跑到一个可以俯瞰城市和日出的角落互相表白,微风轻拂着女主的短发,一栋栋高楼弥漫在朦胧的雾气当中,日出的余辉映射在波澜的水面,同时背景音乐响起了《Take Me Home, Country Roads》;

△ 宫崎骏动漫《侧耳倾听》剧照

等等等,还有很多浪漫有关的画面我就不多说啦。

总之,浪漫是有很多种表现形式和配色的,但是有一点是有共通性的,那就是要想打造出浪漫的感觉,背景音乐、色彩搭配和氛围渲染很重要。

比如除去听觉上的背景音乐渲染氛围以外,视觉上还有《冬季恋歌》里的白雪凯凯和雪花飘、《爱乐之城》的蓝紫色夜空和繁星点点、《侧耳倾听》里的暖黄色日出和微风波澜。

那么回到我自己拍的这张照片上面,这种大面积的灰白色背景只能让人感觉很性冷淡,一点都不浪漫,所以这张照片我肯定是要抠图才可以用的;从我自己的年龄、喜好、原照片内容限定等角度,可能走《爱乐之城》那种类型的浪漫色彩可能就更适合一点:用暗色调的紫色搭配我原本图片就有的粉色系。

ok,分析到这里先打住,我们先不要继续着急去细化到底该怎么去配色了这时候我们只需要有一个大概的色彩感觉就好了,因为配色之前,我们还有很重要的一步没有做,那就是构图。

2. 配色之前先构图

很多人之所以总是说自己不会配色或不管怎么配色都感觉不对劲,其实是因为,搭配颜色这个动作不能为时太早了,你得先把你整个画面的构图和基本框架先敲定了再去考虑配色。

先构图再配色,先构图再配色,先构图再配色,重要的事情说三遍!~

因为构图相当于化妆的时候先打好底子,底子不打好,你再怎么化妆都是徒劳的。同理,如果你的构图很乱或者基本型都没出来,你就去考虑配色,很有可能就是你磨半天都设计不出一个满意的结果,这就是很多人磨蹭半天,做出来的设计依旧不好看的很重要的一个原因。

因为你的设计步骤错了。

比如我今天要拿这朵花做一幅海报,我先不考虑配色和氛围渲染的事情,我就这样光溜溜的排个版出来再说,这里的排版方式和字体选择主要考虑乐个方面,一个是照片原本的条件限制,一个是围绕着浪漫这个主题去做,最终排版如下图所示:

一个浅色一个深色,大家可以对比看看效果。

这幅海报就这样随便看看其实也是可以看的,只是缺少细节和情感,也没有特别的吸引力罢了,最重要的是不够浪漫。

那么到这一步,我们就可以继续细化配色方案,分配色彩比例,优化细节,增加最重要的一些氛围渲染步骤了。

所以我继续优化海报,最终得到了下面这幅海报:

这张海报的背景是我用ps自带的笔刷刷出来的,顺着一个方向刷出一种坠感,这就是起到一种氛围渲染的作用。

然后,虽然粉色和紫色也算是同色系的颜色了,但是因为明亮的粉色与暗色调紫色在明度上有很大的落差,所以等他们组合在一起就会有一种碰撞的感觉,给人的视觉记忆力就会强一点,暗色也给人跟多神秘的感觉,让人琢磨不透。

毕竟,让人琢磨不透的人比一眼就能看穿的人给人更多联想和猜测,有插曲有意外的浪漫爱情给人的印象才会比较深刻一点,对吧~

同时,为了方便大家理解,我又做了以下几个版本,大家可以对比看看色彩的差异给人感觉上的变化。

比如,如果我改变画面的明度,提高画面的明度,如下图所示:

这样看,是不是画面给人的感觉要少女很多?而且给人一种很温柔的感觉,但是盯久了会觉得甜腻腻的。

如果前面第一版暗色调的是为20-40岁左右的女人而设计的浪漫,那么上面这一版则像是为20岁左右的小姑娘而设计的浪漫。

在这个基础上,如果我既改变明度,也改变配色,给画面加入非同色系的颜色,如下图所示:

这样看,其实感觉也很美对不对?美归美,但是却感觉比上面那一版还要腻,因为像是为儿童或小萝莉小公主而设计的浪漫了,适用的心理年龄段更小了。

ok,我们接着往下看。

如果我将背景随便换什么颜色,但是保持背景颜色是同色系不同明度的,画面里有明也有暗,如下图所示:

最后出来的感觉其实也是可以的,也很美,但就是少了一些抓眼球的感觉,觉得中规中矩的,没什么特别之处,就好比那种平平淡淡的感情,缺少激情的感情。

但是这种同色系的做法,却是平台和品牌为了统一形象方便视觉规范化管理最喜欢使用的一种配色方式,对此,大家可以去留意一下天猫或京东的一些频道页面或者大型活动各个分会场的页面配色。

ok,前面的配色技巧大家估计发现了,我要么是用同色系配色,要么是同色系改变明度和纯度,要么是用不同色系不同纯度但是保持明度一致,所以以这种方式去配色,无论你怎么配其实最后出来的感觉都是不会太差的,只是针对的受众不同罢了,可以各取所需。

所以如果你不会配色的话,那么就在这些基本的框架规则里去变化就好了。这是非常保险的一种配色方法。

但是如果你不遵守这种规则,而是胡乱瞎配色,则很有可能会出现下面这种情况,要么是画面显得脏,要么是画面显得艳俗、花哨和乱,如下图这些错误示范所示:

上面这几幅图虽然是一些错误的配色示范,但是很多对色彩不敏感的孩子可能也会觉得:「诶,其实也还行啊」,其实主要是因为有构图的基础在那里硬撑着,底子在那里,所以色彩即使配的不够好糊弄一下也还行。

拿化妆举个例子,为什么那些本身样貌底子就好的人,即使乱穿衣或乱化妆你也觉得看起来还行,一旦她好好的打扮画个妆,那简直就是神仙颜值了,可底子不好的人呢?可能你就算再会穿衣打扮,你也只能变成看起来还行,到达不了神仙颜值的地步。

所以我再强调一遍,配色之前先构好图,把底子打好,这很重要。

总结起来就是,做设计之前先确定主题,然后搭框架搞定排版样式,接下来再考虑配色,再然后氛围渲染,最后一步优化细节,over。

我的其他配色法宝

下面这些知识点都是我平时总结出来的一些配色小心得,是我屡试不爽的一些方法,分享给大家。

总结来说,我的配色技巧主要有以下几种:联想法、提取法、目的导向法则。

1. 联想法

所谓联想法就是,类似于头脑风暴那样,当拿到设计需求或确定设计主题后,我会提取一些关键词,根据关键词去联想很多相关的可能,然后再去筛选一些结果为我所用。

比如下面这张照片,原本照片的颜色是很简单单一的。

但因为我给他确定的主题是「野花的回忆」,所以我就会去联想:「野花都是什么样的颜色?」「回忆又是什么样的色调比较合适?」,后来我就确定了野花主要以比较艳丽的色彩居多,比如玫红色、亮黄色、白色等等,至于回忆嘛,可能就是有年代感了,所以大的基调是暗色调的。

于是下面这幅海报的色彩搭配就出来了。

其他用联想法配色的还有很多,比如下面这一组。

原照片:

做成海报后:

不过这里需要说明的是,联想法要求你会联想,所以大家平时最好是多留意身边的事物,多观察大自然什么的,还有适当去了解一下色彩心理学,你会明白每一种色彩都是可以代表不同的感情和事物的。

通过长时间的锻炼自己对于色彩的敏锐度,可以帮助你快速的配出自己想要的色彩。

2. 提取法

所谓提取法,就是当我们拿到某一个产品或模特需要围绕着它们做设计,我们就可以直接从它们身上吸取颜色,作为主色或点缀色都可以,这样搭配颜色的好处就是:省时省事不容易出错,而且还有呼应主题和画龙点睛的效果。

比如下面这张照片,原本照片的颜色就是绿色和淡粉紫色。

那我最后做出来的海报配色也是这些颜色咯,只是文字部分单独用了白色而已。

哦对了,一般白色和黑色这两种无彩色都是最适合用来作为标题或文字内容部分的颜色的,也是最不容易出错的,同时联想法和提取法其实是可以互相搭配使用的,不冲突。

但是,有时候我们如果希望画面可以更活泼一点,一般做那种比较卡哇伊风向的设计,标题也会用彩色,而不是黑白无彩色,至于标题用什么彩色,也是可以用联想法和提取法啦,如下图所示:

3. 目的导向法则

前面的联想法和提取法的配色方法是教大家如何选取颜色,但具体到哪里该用什么颜色,该用什么明度什么色相的颜色,则就取决于你的设计目的是什么了,所以我将它称之为目的导向法则。

比如,之前我给大家提到过,有的设计是走艺术路线(以传递情绪为主,重在情绪上的表达),而不是常人理解的一般的商业设计路线(以传递信息为主,重在信息产传达准确),前者适用于一切与艺术有关的设计或设计师个人的自由创作,后者适用于所有以卖货为目的的商业活动设计。

这2种类型的设计目的是不一样的,面向的受众群体也不一样,所以在色彩选择上就会有差异。

举个例子,当我们提到某某平台又做活动了打折了,他还做了一个卖场促销页面,你去看看,绝对基本是以红色、橙色等暖色系为主色,并且页面氛围做的非常热闹,就跟你去逛商场,映入眼帘的就是各种sale、大减价标牌,并且还有人拿着喇叭大喊:「进来看看进来瞧瞧啊!最后一天大减价买了不吃亏买了不上当啊!」的即视感。

并且,页面里一些特别希望消费者能注意到的信息,它一定会突出处理,不仅字号要够大,而且在色彩上也会突出。

拿我的书《这么设计能热卖》作为产品图做个示范,我做了一个促销海报,如下图所示:

但是,如果你去看一些比较性冷淡或大牌画风的店铺或官网看看,它完全就是一副我根本就不care你买不买的调调,倒不是因为他不想做生意,而是他的调性就那样,比较自我或端着。

好比人家的定位就是孤傲的,或则是你高攀不起的大小姐和公子哥类的,买ta东西的人本来也就是这种类型的,或者希望别人觉得自己就是这种类型的,毕竟要彰显自己的身价和品味,不能掉价撒。

所以,你看ta基本不会给你看大大的字号,也不会用一些很花里胡哨的颜色在标题上,而是以黑白灰这些无彩色居多,更不会特地用一些突出的颜色去醒目的区分一些字眼,总之页面看起来不会有太浓的促销氛围

虽然我的书籍封面设计本身其实就不是性冷淡和大牌的风格,但我依旧做个示范给大家看看,如下图所示:

而介于这之间的,也就是那些时尚类型的,或时尚里带点促销的,或放得下身段走点接地气路线的牌子,则是会在保持好看时尚的基础上,依旧会适当的用大点的字号或显眼的颜色去突出一些重要的信息,但色彩不会用的太花哨,如下图所示:

而像上面这种比大牌感亲切一点又比大卖场时尚一点这种介于之间的情况则是绝大多数的,毕竟小众的是少数,成为大牌是少数,虽然现在是大卖场但是不想走大牌路线路线的是少数,不想赚钱的商家也几乎没有,于是最终都沦为了不高不低的大多数。

总结来说,目的导向法则可以分为2种情况:

如果你想低调一点内敛一点,你在配色上就保守一点,尽量少一点颜色比如三种颜色以内,或者是用同色系或柔和点的颜色等。

就像一个性格很温和或者很内向的人一样,没有攻击性,安安静静的。

拿我之前做的一幅照片海报为例。

原先我是考虑让这幅海报看起来有视觉冲击力一点,但是我又不想画面太过于张扬,毕竟我那天穿的衣身衣服色彩是比较柔和的橘粉色,所以我用了对比色而没有用同色系,同时控制画面里的颜色不超过3种,并且这幅海报里色彩之间的明度是差不多的,如下图所示:

但如果我用同色系不同明度和纯度来配色,出来的感觉就是下面这样的,你会感觉画面更淑女安静一点,没有什么攻击性:

可是如果你想更加高调张扬一点,那么你在配色上就可以多用一些颜色,比如三种以上颜色,或则是用对比色或互补色而不是同色系配色,或则是纯度高一点明度高一点的颜色,然后不同明度纯度的颜色互相碰撞。

就像一个脾气火爆性格张扬的人,他们不愿意淹没在人群里,而是要做人群中最醒目的那一个。

我还是那上面那张海报改个颜色给大家看看,结果如下图所示:

如果我想继续突出大标题文案,那么我还可以将标题的无彩色白色换成亮黄色,画面里的颜色更多了,冲击更大了,甚至你会觉得有点花哨:

ok,上面这几张图,大家对比一下就会知道这其中的差异了。

所以记住啊,配色不是乱来的,它一定是有章可循的,也是要依据你的目的来配的。

当然,可能有人会说:「有时客户给的主题实在是太晦涩难懂了,我实在是联想不出来啊」,或者给到你的产品本身的配色就丑的不行了,如果你直接吸取颜色那做出来的设计肯定也是丑爆了,那么,这时候就要看你是不是有一颗灵活的脑袋能够随机应变咯!~

如果联想不出来说明你百度总可以吧,然后自己要多看多积累你的脑袋里才有货的。

如果原产品本身配色就丑那你就分析它丑在哪里加以改进不就行了嘛?比如它是因为纯度太高了很艳俗,那么用低一些纯度的同色系是不是就可以了?比如如果它是因为本身的色彩太多了很花哨,那么我们只选取一两种颜色用用是不是就可以了?

再比如还有人说,给我的产品根本就没有颜色,纯白、纯黑、纯灰色,那我该怎么吸颜色啊?

天哪!~这种类型最好搞定了,因为无彩色就是万能色,无彩色无论是搭配无彩色或者其他任意有彩色都可以的,这就又回到我前面提到的目的法则了,不懂的可以回头再仔细看看~

写在最后

平时也经常会有人问我到底该看什么书来提高配色能力,其实我想说只要你掌握了我前面提到的基本的色彩构成原理这些基础知识,剩下的其实都不需要你继续去看其他的色彩书籍了。

因为看其他书籍无非就是要扩充你的知识面罢了,它只是其中一种增加知识储备的途径而已,但现实是很多人写的书一看就让人犯困,而且晦涩难懂,你买了也是浪费钱,倒不如通过看设计网站、看时尚杂志、看电影、多观察大自然等有意思的途径去培养自己对于色彩的敏锐度,然后看看我的干货文章勤加练习,多实践多思考来的有用。

尤其是大自然的色彩,那真的是一个超级大的配色宝藏啊,你随便看看那些花花草草、蓝天白云、日出日落、海底和大地,哪个配色不是美的让人惊叹?就连那些恶心的毛毛虫都有一身好看的不行的颜色。

我们做的很多设计,不管是什么行业的设计有关颜色的,电影也好,三维也好,平面的也好,其实基本都是来源于大自然的。

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

优设轻访谈!拿到需求无从下手?来看这7位设计大咖的私藏搜索技巧

资深UI设计者


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

信息时代,每个人都需要具备基本的「搜索」技能,尤其是设计师,你有没有灵感枯竭不知所措的时候呢?今天我们召集了7位优秀设计师,对他们的设计灵感来源进行揭秘,希望这一期的轻访谈能够让你轻松Get设计大佬的搜索技巧!


优设轻访谈第八期,我们的话题是——不信息时代,能与我们分享一下你的搜索技巧么?平时的素材积累是如何进行的?

Dribbble 人气最高:Mike

Dribbble:https://dribbble.com/creativemints

实际上,现在寻找灵感或资源变得非常容易。去Pinterest,你会获取到任何你能想到的灵感!查看stock网站,获取所有你需要的资源!

△ AGE / Online courses

尽管如此,我仍然建议从外部世界获得灵感——请几天假,去一个新的城镇或国家旅行,逛逛博物馆,你会发现真实生活会成为你最重要的灵感来源。

产品视觉设计总监:Gleb Kuznetsov✈

Dribbble: https://dribbble.com/glebich

是的,你是对的,搜索技巧对产品设计师来说是必不可少的。我在一家公司做了很长时间的分析师和研究部门工作,在那里我负责用户体验,这些经历帮助我理解如何搜索有意义的数据和信息,并使用它来定义一个产品的关键指标。

但是搜索不仅仅是关于用户分析和信息,也是关于设计语言——理解什么是可能的。最好的设计只有当你跨越了可能和不可能之间的界限时才会出现。这种平衡基本上是一种新的设计语言或产品的品牌。

我使用Pinterest进行图像搜索。这个网站帮助我创建情绪板,并找到一些更具体更具象的东西,Dribbble的作品帮助我研究UI布局。然而,我不会使用Dribbble来作为我的色彩搭配灵感库。

对于颜色,我使用自己的灵感素材库,在我的职业生涯中,我花了大量的时间从互联网上搜集素材,并进行创作和整理。我也有自己的平面设计素材库,我创建并管理这些素材库大约有10年了。我几乎每天都在捕捉的设计灵感素材。问题不仅在于你如何搜索,还在于你如何将这个搜索结果应用到你的工作中。

△ Water waves simulation for 3d icon

那如何应用呢?例如,当我看到好的设计时,我将视觉图像结构分离开来——有时我在情绪板中添加新图像仅仅是因为我喜欢形状,有时是因为我喜欢颜色,有时是因为图形效果等。在将该引用添加到库之前,设计人员需要了解在何处可以使用以及如何使用。对于设计师来说,搜索绝对是一项必不可少的技能,我通过创建情绪板促进了我的搜索。

顶尖设计团队:Ramotion

我们相信灵感无处不在,当然也会取决于我们进行的项目类型。

我们在互联网上会搜索很多,比如Behance和Dribbble。然而,我们周围也有很多灵感。

△ Cellebrite Pictograms

例如,如果进行的是一个品牌项目,那么我们周围的自然环境就是我们获得灵感之所在。颜色、动效、形状和所有这些的组合使一切都在一个愉快的和谐场景中工作,这就是我们努力传递的。

对于UI/UX项目、网站和App设计,我们也是这样做的,但我们主要目的是理解用户的最终目标和每个行动背后的动机。我们不仅在数字世界中研究类似的解决方案,在现实世界中也会寻找类似的解决方案。

顶尖设计团队 FΛNTΛSY 总监:Minh-Pham-✪

Dribbble:https://dribbble.com/phamduyminh

我不在本地存储灵感资源,因为想要方便浏览必须对其进行分类,而这对于本地存储来说比较困难,所以我非常依赖于在线资源,它们有很好的搜索引擎,所以,为什么不呢?

基于不同的目的,我更喜欢从多种来源获得灵感:

  • Dribbble:是最好的互动、动效和插画资源网站。它是快速获得灵感的好地方,尤其是针对大项目中的某一个小部分。
  • Behance:主要是为项目展示,所以如果你想要找一个地方寻找大的概念、设计系统、演示,那这绝对是最理想的。
  • Pinterest:是一个丰富得多的资源,在这里你可以从中找到任何灵感。因此,当我需要寻找高层次的概时我会来这儿念(例如情绪板)。关于Pinterest,我最喜欢的是它能够显示我正在寻找的相关图片。它真的帮助我驱动我的思维,形成概念,事半功倍。

服务设计机构:Zajno Crew

说到寻找灵感,我认为有两种人:使用Dribbble的人和使用Behance的人。Dribbble更像快餐,在这里你可以迅速的饱腹,Behance更像一家高档餐厅,你可以在那里度过整个晚上。

我个人喜欢吃快餐。我喜欢每天早上上班前查看Dribbble,当我发现好东西的时候,我就把它存起来以后用。

△ Promo Website Animation for Pocket Multilingual Assistant

如果你正在寻找真正的案例,而不仅仅是概念稿,你可以在Awwwards上找到一些主流的东西,也可以在这里找到一些更奇怪的东西。

哦,还有Pinterest,它的优势是推荐你可能喜欢的东西。我经常用它来做情绪板和寻找参考素材。

如果是插画资料,没有比Dribbble和Behance更好的地方了。只要滚动鼠标,所有的好东西和你喜欢的艺术家都会一步添加到你喜欢的作品中,简单!

△ Tempers Flare

Pinterest有利于发现新的想法、主题、不寻常的元素和灵感。每天浏览这些平台也会让你培养出一双训练有素的眼睛,这对提高你自己作品的质量和风格至关重要。」

Dribbble 人气插画师:Febin Raj

Dribbble: https://dribbble.com/febinraj

我每天都想更新!我认为这是件大事。因为这个世界瞬息万变。

△ Evening From Kerala

通常,我的主要搜索源是Behance和Dribbble,同时我从其他来源获取了更多的数据,比如文章,博客。

Behance 人气设计师:李宜轩

Behance: www.behance.net/yihsuanli

信息时代,每个人都必备一个「搜索」技能,尤其是设计师,很多人在接单后,可能会第一时间在网络中或者日常的资料扩中搜索素材、参考、灵感等。

我还记得刚开始接触设计时因为没有太多经验,常常因为资料整理太久,压缩了执行时间,最后反而虎头蛇尾的完成作品。虽然创作作品时资料搜集、调查很重要,但其实整体过程有更有效率的方法。其实收集资料也是需要练习的,通过经验累积,可以渐渐增加效率与快速找到最精准的讯息,避免漫无目的搜寻。

△ ZENWATER

Work hard 不如 Work smart, 有了较有系统的资料搜寻方式后,可以将时间留给创作和尝试。随着经验累积,我开始养成了一些小技巧帮助自己更有效率的搜集资料,大家可以酌量参考:

1. 先用树状图整理出关键字

在开始找资料前我会先把设计关键字整理出来,先从Google或百度等网站去搜寻相关的话题或图片,以此方式让思考可以更突破。例如,我要做一张音乐会的海报,开始前,我会先写下关键字,例如:乐器、钢琴、音乐、琴键、流动、弹奏….,接着利用这些关键字进行中英文查询,随着找到越来越多资料,可以从其中找到更多可能性的延伸。这个阶段搜寻目的是从抽象方向出发,避免找到与别人相似的元素。一个一个关键字搜寻后,就可以把其中好的图片整理再一起,收敛成更明确的设计方向。

2. 擅用IG的#hashtag功能

除了使用搜寻网站寻找资料,我觉得IG(instagram )也是一个不错的选择。我会用IG 的hushtag去找大家对于某一个单字不同的想像,例如找#music,在其中除了可以找到音乐相关的画面,有时候也可以找到不同场域里的音乐元素。除了找灵感外,我也会利用hushtag搜集的设计作品,例如找#logo#graphicdesign时,可以看到大家正在进行中的作品,或是还未整理好放上Behance的作品。

△ One Team One Goal / IBM Taiwan Sport Day

3. 以pinterest分类整理资料库

我平常就有整理pinterest的习惯,建立资料库的习惯除了为了特定专案外,我也会以设计种类分类作品,例如以CI、packaging、poster…分类。除此之外,以风格分类的资料库也是必要的,例如:东方风格、美式、日本风格、欧式….。这些平常就累积好的资料库能够让我搜寻作品资料时,有一个快速的开始。 Pinterest会依据风格推荐更多的作品给使用者,因此当平常有了足够的累积,寻找资料就会有效率很多,能够快速找到很多需要的作品风格。

4. Behance搜集不同风格的设计师

Follow特定设计师的IG或是Behance也是我搜集资料的一个方法。我会搜集一群在每个领域最具代表性的设计师。在找不到灵感时,我会不断浏览他们的作品集,试着从他们角度出发,思考如果是他们遇见这个题目,他们可能怎么发展。除此之外,他们也是一个完整的风格库,每个作品都是该领域的标竿,当客户有特定风格的需求时,能够快速给自己一个明确的目标,期许自己能够达到他们作品的高度。


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


大陆19届毕业展海报实力平平,港澳台能不能扳回一局?

资深UI设计者

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

前天看完大陆毕业展海报合集,不少小伙伴大呼看得不够过瘾。为了满足大家炙热的求知欲与上进心,美丫姐又花足工夫找来了今年港澳台、日本、欧美等地毕业展海报。

依旧干货十足,依旧吐槽猛烈,希望优秀如你,能够看得开心。

港澳台地区-眼前一亮系列

首先我们来看看让人印象最为深刻的优秀作品。

1. 岭东科技大学视觉传达设计系

渴望自由的金鱼

鱼缸中的生活再怎么无忧无虑,也拦不住金鱼一跃而出的渴望,就像喷薄欲出的创意,就像按捺不住跑出校园的毕业生。

2. 台湾科技大学毕业展

架着一个歪斜的棚子,支撑着我们的二十二

猛然撞上了即将踏入社会的迷茫与不安,台科大的莘莘学子鼓起勇气,向老师询问着最后一个问题「老师您看这展厅,供电是不是不太够?」

3. 台南应用科技大学多媒体动画系

伏流

有时候你以为自己发现了一股清泉,其实全是大佬手里玩剩下的,人外有人,天外有天。

4. 国立台湾艺术大学设计学院

喜欢做,肝愿受

其实大家刚毕业头几年也是这么想的,几年之后肝还好,头很冷。

5. 国立台南大学视觉艺术与设计学系

后浪

长江后浪推前浪,后浪还有后后浪。大家都是被时代的洪流裹挟着前进,显然这届毕业生还没毕业,已经被学弟学妹们震得神志不清了。

6. 国立台中科技大学商业设计系

超人请回答

整个童年,大人都忙着策划一个玩笑,让孩子天真的相信世界上真的有超人,等到成年之后他们再哈哈大笑「哈哈哈她真的信有超人」,偶有不愿从童真中醒来的人继续寻找,你们等着,迟早给你们找来真的超人。

7. 朝阳视觉传达设计系

青浪

用各式纹理堆叠表现出了「浪潮」的韵味,既能联想到青出于蓝胜于蓝,又有长江后浪推前浪的语境,画面动感,锐意十足,就是不知道早就毕业的学长们会怎么看。

8. 朝阳科技大学工业设计系

那个967呢?

找了很久只找到「967=很想你」的说法,但想来不至于借毕业海报,发出「凭什么就我四年没有恋爱」的呐喊,越不知道就让人越想知道,竟有一丝等待戈多的意味。

9. 佛光大学产品与媒体设计学系

非想非非想

到底是佛光普照大学毕业的学生,还没出校门,就已经参透了甲方的真谛,非想,问他想要什么,说不出来;非非想,却总能提出一大堆意见。

10. 国立台中教育大学文创系

泛流意识

总说要把意识汇聚成一道洪流,变成一道铁流,细想也没什么不对,毕竟钢铁、石头、血红细胞里都含有铁元素。

11. 义守大学创意商品设计学系

灵光乍现

灵光就像这一坨奇妙的东西,摸不着更说不清,出现的时候总让人欣喜若狂,定睛一看,可真不是个东西。

12. 明志科技大学工业设计系

明志科技大学旗下有两大门派,一派工业设计,一个视觉传达,两大派的关系想必是剑拔弩张,一派冷静沉稳,舍我其谁。

13. 明志科技大学视觉传达设计系

眼波

一派浮夸前卫,闪瞎人眼。

14. 台南应用科技大学美术系

画语者

老猎人除了酷爱炫耀猎物,更爱炫耀不离身的老猎枪,情人眼里出西施,用心爱的工具们铺满整张海报,还能有谁比他们更爱这个行业。

15. 昆山科技大学视觉传达设计系

形象组无能

「海报做成这样,都怪老师举棋不定」,多少年后才突然醒悟,原来老师的犹豫不决,是为让我享受最后一次任性的机会。

16. 环球科技大学视觉传达设计系

轮迴

「谁TM把灯打开了?」。不,是天又亮了。多少优秀的作品背后,都是无数个日日夜夜的轮回

17. 世新大学数位多媒体设计学系

今宵霓烂

在陈列室打碟,在毕业展上蹦迪,如果连想都不敢想,那你凭什么认为你能改变这世界?

港澳台地区-成绩优秀系列

其次是第二梯队,虽然不算突出,但也算优秀作品。

1. 岭东科技大学数位媒体设计系

淘色风波

龌龊的语意,来自成人龌龊的内心,让家长面红耳赤的「淘色风波」,不过只是毕业生们翘课逛展打游戏。

2. 国立台北科技大学工业设计系

新一代设计展

废掉的第一稿千万别撕,不然最后出街时就是这个鬼样子。

3. 国立台中科技大学创意商品设计系

被……的那五年

科大的毕业展为什么延期了五年?估计是地图画得太烂,大家花了五年才找到举办的地址。

4. 国立云林科技大学视觉传达设计系

发声关系

「喔」「啊」「曰」,奇了,大家都是纸打印出来的作品,凭什么就你们家海报有声音?

5. 东南科技大学数位媒体设计系

生长轮

树木的年轮记录着时光,每当有大事发声,从年轮中就能看出一二,你看今年新的圈圈它又白又圆。就像学生们毕业一样,脚踏实地、悄无声息。

6. 国立清华大学艺术与设计学系

升温计画

温室效应?冰川融化?这些都远远不够,沉默四年平淡如水,如果一生一次的毕业大展再不燥起来,那可就真的毕业了。

7. 国立云林科技大学数位媒体设计系

外出取材中

闷在家里一时爽,一直闷着一直爽?活像躺在盒子里的量产玩具,该出去走走,看下绚丽多彩的世界了。

8. 岭东科技大学创意产品设计系

三角关系

创意、媒介、受众,所谓传媒,正是一场相爱相杀的三角游戏。

9. 南华大学视觉艺术与设计学系

零睡时间

你以为躺在床上就是不思进取?不,我是在梦里收集创意,一时的休憩,是为了更好的前进。

10. 国立云林科技大学工业设计系

问HOW

寒窗十数载,大人都说不懂就问,步入社会才知道大家都只能强撑,明明面对奇葩需求,想要大声反问一句「HOW?」看看瘪掉的钱包,只能脱口而出,说一个「好」。

11. 铭传大学数位媒体设计学系

蹦起来

设计水平还没那么高的时候,一定记得猥琐发育不要太跳。不然,甲方连头都给你锤爆。

港澳台地区-迷惑不解系列

最后是第三梯队,先不论好坏,总之看得人迷惑得很。

1. 亚洲大学数位媒体设计学系

复燃

想让葬爱家族设计风潮死灰复燃,甚至风靡世界也不是问题,只需简单一步,把地球表面刷成 QQ 空间那么黑。

2. 高雄师范大学美术系

扔出去的,头也不回

扔出去的飞机稿就别再捡回来了,即使马粪风干后看着像块巧克力,但只要你一舔就会发现,呸,果然还是那堆马粪。

3. 义守大学传播与设计原住民专班

是生活

怀疑是在暗示黄色比生活更吸引人,但手上又没啥证据。

4. 中国科技大学视觉传达设计系

一体两面

思维定势是一件很可怕的事情,比如甲方经常让把大象换个面,觉得不是正面就是反面,可换来换去还是不满意,就没想过,甲方要的是横切面。

5. 义守大学电影与电视学系

艺眼瞬间

好设计让人瞠目结舌,觉得语言乏力,丑的设计也能让人瞬间语塞,根本说不出丑在哪里。

6. 大叶大学工业设计系

DNA

看完台湾大叶大学官网上的师生风采,就能明白这确实是一所连空气都飘着直男审美的理工科大学。

也就不难理解为什么连设计系学生们的毕业海报都会有这么大一股子消毒水味。

7. 大叶大学视觉传达设计学系

记得呼吸

比起上一张工业设计系海报的冷静,视觉传达系海报走向了另一个极端,线条凌乱,张牙舞爪,若不用文字提醒「记得呼吸」,不少观众会因为过于震撼憋死在原地。

8. 澳门科技大学

跨越

连着领导的修改意见以及删除线,一齐打印出来的终级作品。

「香港的呢?」抱歉,一张都没找到。

日本

日本,设计强国近邻日本。今年毕业展海报也是颇有看头,他山之石可以攻玉。

1. 多摩美术大学

能顺利毕业的,都是怪物。

2. 武蔵野美术大学

感受扑面而来的乡土气息。

3. 东京艺术大学

这就是设计师通宵后倒下的身影。

4. 东京造型大学

综合各位老师意见之后的海报作品。

5. 东京五艺术大学联合展

「我用图画工具都比你画得好!」「好好好你行你来。」

6. 仓敷艺术科学大学

「快从楼顶下来,这次真的不改了!」「你们签字画押」。

7. 京都精华大学

学习四年,设计使我面目扭曲。

8. 京都造型艺术大学

套用学长给的模板,但忘了改日期。

9. 金泽艺术工业大学

金泽大学深造多年,最拿手的就是往产品上喷金漆。

10. 冈山县立大学

让我看看,谁还没交毕设作品。

11.日本桑泽设计研究所

我们的展区在山顶上,请大家参展时做好御寒准备。

12. 名古屋艺术大学

为了让画面更丰富,我放了 267 顶帐篷。

13. 奈良艺术短期大学

毕业考试第一题,画出任课老师的脸。

14. 文化学院大学

反正到时候大家都是要哭的。

欧美地区

欧美地区毕业展海报内容更加现代,但因为文化差异较大,消化起来相对比较困难,这里就不一一吐槽了,大家自由学习。

1. 路易斯安纳州艺术与设计学院

2. 伦敦都会大学

3. 美国Art Center

4. 英属哥伦比亚大学

5. 美国马里兰艺术学院

6. 英国皇家艺术学院

想不到你这帮浓眉大眼的英国人,也玩「爱滴魔力转圈圈」。

好了,以上就是今天的全部内容,谁要是还觉得不过瘾,只能老老实实等明年新生毕业了。

总体说来,亚洲地区文化的多样化性,还是完胜欧美,这点非常值得欣慰,但是回头看看大陆毕业展海报,又千篇一律到让人完全开心不起来。总之还是那句老话,革命尚未成功,同志,仍须努力啊。

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

参与多个项目后,我总结了这份可能是网上最全的小程序设计规范

资深UI设计者

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

最近设计群里经常有人问起小程序设计规范的问题,虽然官方有提供样式库的下载,但是停留在 16 年版,不是的。而设计经验这部分网络上也没有比较全面的分享,这促使我停下手上的计划,加快输出本篇文章。正好近期刚结束几个小程序项目,总结下经验,并结合微信小程序的官方设计指南,一起分享给大家,希望帮助大家更快速地上手。

随着 2018 年小程序的迅猛发展,小程序现已被各大企业广泛采用,「触手可及、用完即走」的用户体验备受青睐,随之小程序设计也成为设计师的必备技能,那在进行小程序界面设计时,应该如何快速做设计?过程中又要注意哪些问题呢?

对于已经开发了 App 的产品,在进行小程序设计时需遵守小程序的规范,同时要保持小程序界面设计与 App 的风格统一性。

小程序设计区域

小程序的「所有页面」右上角位置,都固定放置了小程序的菜单,在设计界面时需预留出该区域空间。

Nav Bar设计

1. 小程序菜单固定样式

微信提供了深浅两种配色样式,以便更好地融合到各种风格的页面中,需注意保持小程序菜单清晰的辨识度。

线上案例:

2. 交互注意事项

如果要在小程序菜单附近放置交互元素,要考虑是否有交互冲突,应尽量避免误触的可能。

建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异,以便区分。

如上图,小红书的自有导航样式个人不推崇,理由如下:

  • 样式与官方菜单样式未区分开,容易产生疑惑;
  • Nav Bar 栏两端对称在顶部,视觉上显得过于呆板。

微信读书既有微信线条外框的 DNA,又区别于官方样式,是不错的综合。以上仅限个人观点,还需用户数据来客观验证。

3. 搜索框常见的几种表现形式

Tool Bar设计

1. 小程序设计规范

顶部标签分页栏颜色可自定义,一般会沿用 App 的设计风格,以保证两个平台的视觉统一性。

2. 常见的几种表现形式

Tab Bar设计

1. 小程序设计规范

微信有提供小程序的底部标签样式,建议标签数量在 2-4 个适宜。

也可根据产品需要选择或者去掉底部标签栏功能。

2. 常见的几种表现形式

启动页图标

启动页除品牌 Logo 外,其他元素都由微信统一提供,且不能更改,设计师仅需提供 2 倍和 3 倍尺寸的 Logo 即可。

加载样式

1. 小程序设计规范

全局加载是小程序名称左侧的加载图标。模态的加载样式将覆盖整个页面,由于无法明确告知具体加载的位置或内容,可能会引起用户的焦虑感,建议谨慎使用。

2. 常用的加载样式

需告知用户具体加载的位置形状,减轻用户焦虑情绪。

对于没有开发App来说,可依据官方推出的《微信小程序设计指南》来设计,以确保快速设计出符合规范的小程序。

小程序设计应遵循友好、、一致的设计原则,每个页面都应有明确的重点,清晰明确地告知用户身在何处,又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路。

平台设计网站推荐

最后,推荐几个常用的平台设计网站。

1. BAT各平台小程序设计规范网站

微信小程序设计指南:https://developers.weixin.qq.com/miniprogram/design/

支付宝小程序设计规范:https://docs.alipay.com/mini/design

百度-智能小程序设计规范:
https://smartprogram.baidu.com/docs/design/overview/introduction/

2. 其他常用的设计规范网站

苹果-人机界面指南:https://developer.apple.com/design/human-interface-guidelines/

详细介绍了 iOS 设计规范,同时还提供了 UI 设计资源下载。

安卓-MD设计指南:https://material.io/design/

蚂蚁设计:https://design.alipay.com/#ds

提供移动和 Web 端的设计组件,还有设计案例和心得的文章供学习。

微信样式库:https://weui.io/

提供微信内的网页和小程序设计规范。


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

让设计更有说服力的20条经典原则:帕累托原则

资深UI设计者

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

简介说明

1. 理论表述

对于许多事件,大约 80% 的影响来自 20% 的原因。

2. 理论背景

1896 年,意大利经济学家帕累托出版了《经济政治学课程》(Cours d’economie Politique),其中描述了他所观察到的一些现象,比如意大利 80% 的土地掌握在 20% 的人手中;比如花园里 20% 的豌豆荚产出了 80% 的豌豆。

上世纪 40 年代,美国一位管理顾问 Joseph M Juran 观察到一个在商业以及生活中普遍存在的现象:在某一过程中,80% 的影响来自于 20% 的投入。他将这一现象以帕累托为名,称为「帕累托原则」。

80/20 虽然只是一个相当不的数字,在很多具体情况之下,这个数字会有细微的波动,但这个数字背后所蕴含的思想或是规律却是不变的:更集中的投入将产出大于预期的结果。

设计案例

1. 将时间投入到用户常用的页面

一般来说,一个 APP 大多拥有几十上百个页面,但是这些页面并不是用户都能用到的,有时候大多数用户只会常用那么几个页面,所以将有限的时间和精力投入到这些页面将给你带来更大的收益。

案例1:网易云音乐的 UI 迭代

最近网易云音乐和虾米音乐都迎来了大版本更新,UI 也几乎重新设计了一遍,但我们所看到的重设计,只局限在那些关键的页面上,一些次要的页面基本没改。比如网易云音乐,首页这种重中之重的页面不仅风格、排版大改,连产品逻辑都改了(比如快速入口由四个变为五个,改变了私人 FM 的位置等),但是等级页这种无关紧要的页面,除了头部的全局性改动外,其他地方一点没变。

2. 奥卡姆剃刀的另一种诠释

那我换个角度想,如果我们的应用已经存在了这么多需要花费时间和精力的页面,现在产品经理希望增加另一项需求量小但确实存在的功能,我们应该怎么办?奥卡姆剃刀指出「如无必要,勿增实体」,这是我们对此欲增加的功能的终极评判标准。

要知道,页面中每增加一个元素,对于用户体验的影响是巨大的,这意味用户着需要花费额外的时间去理解新增加的元素是什么;在所有元素中寻找特定的一项又多了一些备选;浏览页面时的视觉噪声又多了一些。

所以到底要不要增加这个功能,关键在于能否很好地控制上述的用户体验成本,以及后续的迭代成本。从帕累托原则的语境来看,小众但是确实存在的需求大概率不足以产生能够克服用户体验损失的收益,哪怕我们投入了一定的精力去做,日常依然无法给它百分之二十以上的关注去修改,去完善,去迭代,所以这个功能也大概率不需要增加。

3. 长尾模型与帕累托原则的对抗

说起帕累托原则就不得不提到长尾模型,长尾模型的分布曲线与帕累托长得很像,但是结论却完全相反,长尾模型提醒我们无法忽略那条长长的尾巴的影响,虽然它收益低,但架不住数量多,比例高。所以我们可以看到「尾巴」所占据的面积几乎和「大头」相当。

04 年长尾模型被提出来的时候,很多人认为长尾模型是对帕累托原则的颠覆,诸多例子都侧面佐证了长尾模型的正确性,比如 Google 目前约有一半的生意来自小网站,比如亚马逊图书的总盈利中少数畅销书占一半,绝大多数的冷门书占另一半。

听起来好像很有道理,长尾模型好似在控诉着开发者不去关注那些小众而众多的琐碎需求。事实真的如此吗?

长尾模型本身隐藏了两点不可或缺的前置条件,一是尾巴真的要足够长(小众需求真的有这么多),二是这么长的尾巴能被用户发现。无论哪一点,都建立在海量的用户资源之上,所以中小型 APP 大多望尘莫及。能够有余力去关注长尾模型的大多是用户量达到一定规模的产品,比如之前例子中所举的 Google、亚马逊,国内的微信、QQ、淘宝、支付宝、京东,这些产品的用户量足够多,用户类型足够广,尾巴足够长,哪怕再隐蔽的功能入口也能拥有不错的曝光度(总会有用户发现它),所以才能发挥长尾模型的作用。

所以在用户量达到 QQ、淘宝的级别之前,长尾模型看看就好,帕累托依然是主要的指导原则。

注意事项

注意点1:不得不做的需求

虽然我们要将精力放在重要的事情上,但有些功能和标识即使对于用户意义不大,和产品的增长也没有实际联系,但我们也依旧需要花费大量精力投入。最常见的就属于法律规定和平台规则相关的需求了。

比如 18 年的大事件,欧盟推行《一般数据保护条例》俗称「GDPR」,所有国际版的应用都需要针对这个条例对注册流程做出大改,比如这篇文章介绍的:《GDPR合规下的 App 产品设计——启动页面和账号注册》

注意点2:最重要的「少数人」

满足大多数用户的需求是一个必要条件,但不代表在任何情况下少数人就是可以被忽略的群体。对于工具化的应用而言,真正为应用带来收入和传播的,恰恰是占比较低的付费用户,可能连 20% 都不到。

在这类应用开发的周期中,前期完成了满足大多数用户的基础功能,之后更多的精力会被分配在满足少数付费用户的需求上。产品的方向和目标都可能随着不同的时期发生变化,帕累托原则是一个决策工具,但决策方向是需要经过我们充分思考以后得到的,切勿盲目地服从一个指标。

总结

让设计更有说服力的20条经典原则:冯·雷斯托夫效应、蔡格尼克记忆效应

资深UI设计者

冯·雷斯托夫效应 Von Restorff Effect

1. 简介说明

理论表述

当存在多个相似的物体时,与众不同的那个更容易被记住。

理论背景

冯·雷斯托夫效应(Von Restorff Effect),也称为隔离效应(Isolation Effect)。1933 年,德国精神病学家、儿科医生 Hedwig Von Restorff 在研究中发现,对被测试者提供一系列相似的项,而只有一项显得特别、孤立、与众不同的时候,这一项往往更容易被记住。

在此之后,对冯·雷斯托夫效应的研究也有进一步的进展,比如从生理学上,大脑对特异点有着更加明显的 ERP(事件相关电位),这或许可以解释特异点更容易回忆的原因;再比如冯·雷斯托夫效应与年龄有着密不可分的联系,老年人对特异点的记忆就没那么深刻。

不管如何,我们还是在频繁地应用着冯·雷斯托夫效应,并能够看到它在视觉设计中卓著的效果。

2. 设计案例

冯·雷斯托夫效应可以应用的场景分成两种:环境差异和经验差异。环境差异是指在空间尺度上做出的差异(同一平面内),而经验差异是指在时间尺度上做出的差异(不同时间点的同一平面),我们来详细聊一聊这两个尺度。

环境差异──获取视觉焦点

也有的文章中会表达为「背景差异」或「情景差异」,这不重要,我们只需要知道这个差异产生的原因:即在相似的周围环境中出现差异。参考百度百科我们来进行一个简单易懂的小实验。

案例1:环境差异小实验

请试图去记住上面那几串字符串。好吧,我放弃了,但如果努力一下,我们就会发现最容易记住的是与周围环境最不一样的那个。第一行是数字「5」,第二行是星号,第三行是红色的字母「F」。

这就是环境差异所带来的识别度与记忆度的提升,也是我们经常能在 UI 设计中所看到的一种有效吸引用户点击的手段。

案例2:起点、大众点评

比如起点希望用户在个人页时去点击「版本测试」按钮,比如大众点评希望强化「订单」按钮的视觉特征以便用户能够更快速地找到,所以在列表中这两者都会长得不太一样。这种区别于环境中的其余功能按钮,为了吸引或暗示用户点击的按钮有一个专门的名字,叫做「Call-to-Action 按钮」(CTA 按钮/行为召唤按钮)。一般来说,CTA 按钮大多会利用冯·雷斯托夫效应的环境差异来达到 Call to action 的目的。

经验差异──强化时间特征

与用户过往的经验或记忆做出差异,叫做经验差异。这种差异可以放大时间点的特征,使用户对差异所在的时间点记忆更深。

案例3:google doodles

我们都知道 google 会在一些比较特殊的日子改变 logo 的设计,给 logo 加上一些非常有趣的涂鸦,与平时的 logo 做出差异,就是为了利用经验差异使用户在记忆中强化时间特征,更好地记住这个时间点。

记住时间点有什么好处呢?比如 Google 可能是为了传播世界上那么多有意义的节日,也带给公司一种具备着人文关怀的气质。再比如淘宝、京东和 Steam,在「双11」、「618」、「圣诞特卖」一定会改变主页的设计,就是为了让用户记住这几个被创造出来的节日,好让大家每年这个时候都心甘情愿地剁手。

3. 注意事项

注意点1:所有都不一样 = 所有都一样

页面中的特异点终归只能属于少数,如果整个页面所有元素都想做得不一样,都想突出,那不仅没办法突出任何一项,页面的整体视觉都将崩溃。

反面案例1:新手常常会陷入什么都想突出,但什么都不能突出的境地

注意点2:把差异放在该放的地方

当用户被特异的那一个点吸引的时候,对其他的注意力就将下降,这是冯·雷斯托夫效应天然的副作用。我们能做的就是把特异点放在最关键的地方,而不是次要的地方,这样副作用就不会太过影响体验。

反面案例2:闲鱼、虎课的退出登录按钮

前几年我们经常能看到这样的退出登录按钮,使用高饱和红色的背景,成为了这一页最亮的那个按钮。之前我们基于「警示用户谨慎按下」的理由,将退出登录按钮做成最具警示意义的红色,但是你看,一旦我们这么做了,这个按钮就成了页面中最不一样的那个,强势地拿下「Call to action」的大旗,时时刻刻都在散发着快来按我的气息,这显然与我们「不希望用户随意退出登录」的意愿相违背。所以,我们现在去看微信、QQ 这些巨头应用,都已经把退出登录按钮的差异做到最小,甚至没有差异,就是基于上述的考量。

4. 小结
  • 利用环境差异让元素快速获得视觉焦点;
  • 利用经验差异使用户记住特殊的时间点;
  • 一页中不能做太多差异化设计,得做到关键的元素上。

蔡格尼克记忆效应

1. 简介说明

理论表述

人们对未完成任务的记忆比已完成的更深刻。

理论背景

Bluma Wulfovna Zeigarnik,前苏联心理学家和精神病理学家。她的导师首先注意到了餐厅服务员能够很好地记住未付账单,但是却无法记住已付账单的更多细节,针对这种现象,她进行了更加深入的研究。在研究中,她发现了人存在一种天生的,做事有始有终的驱动力,这种驱动力使得人们对还没有完成的任务念念不忘,而对已经做完的任务印象不深。

蔡格尼克效应被用于证明格式塔现象不仅在感知中普遍存在,在认知中也是如此。勒温的场论给出了一种解释:一项任务被启动之后人会形成一种处于紧张状态的场,这会增强对所有与该任务相关信息的认知;任务完成后紧张的状态就会得到缓解。

注:勒温的场论(Lewin’s Field Theory)是格式塔心理学的一条分支,该理论受现代物理学场论的影响颇深,认为人在认知过程中大脑会形成一种场,这个场影响着人的感官信息的处理。

2. 设计案例

对未显示完全的信息设置「悬念」

在文字较多的组件中我们时常能看到这样的一个符号出现:「…」,这个符号用于表示文字信息未显示完全,点开可以看到完整的信息。

案例1:新草、bilibili

就是这个小小的符号,时刻提醒着我们当前所显示的信息并不完整,吸引着我们点开它继续看下去,旁边还伴随着「全部」、「展开」等词都是为了强化这一特征。

当然,不止如此,Web 端也会出现文章显示不完全的情况。

案例2:知乎、简书 web 版

通过这种方式,激发用户继续往后看,产生把文章完整看结束的驱动力。

提醒用户任务还未完成

如果一个任务存在多个步骤,那么在任务结束之前应该用某种形式(比如进度条)提醒用户任务还没完成,这能够激发用户完成任务的欲望。

案例3:多邻国

在选择和测试过程中,顶部都会出现一条进度条清晰地表达着目前任务还没完成,进行到了哪一步。在这样的提示之下,用户会有更大的动力去完成整个任务流程。

有效的任务激励

越来越多的应用(尤其是技能学习类应用)开始对学习进程进行更细致的任务分解,然后利用蔡格尼克效应的影响对用户的学习进程进行激励。

案例4:Drops

在任务进行中始终展示任务的完成进度,任务完成之后会有对应的完成提示,并且可以获得勋章/成就之类的小物件儿。也包括很多番茄类应用、习惯养成类应用,都会有类似的设计,比如 Eggzy、Forest、美妙激励等等,都是通过这种方式激励用户完成自己的目标的。我们可以从中看到蔡格尼克记忆效应发挥着不可或缺的作用,正是我们追求有始有终的驱动力,在进度条的提醒下才能一步步完成目标任务。

3. 注意事项

注意点1:任务已完成同样需要提醒

另一方面,已完成的任务同样需要给予用户相应的提示,不然用户会感到压力,会困惑自己到底有没有做完这件事,这样紧张的情绪将会一直存在,而紧张过后就是不安和不信任。

反面案例1:起点任务结束没有反馈

起点的新手任务是我最近遇到的一件特糟心的事儿。我明明已经完成了「添加一部作品到书架」的操作却没有任何完成的提示,甚至我不知道自己究竟有没有完成。明明做完了,却依然显示着「去完成」,是还有隐藏条件没做到?还是我加的那本书不算?还是必须要两个任务一起做完才算完成?还是我没氪金不让我完成?还是纯粹的 bug?我不知道,用户不知道,或许只有产品团队的人才知道。

所以,如果已完成的任务没有给予用户合理的提示或者反馈,这样的体验是很差的。

注意点2:避免过分强迫

过长的进度条会给人形成压迫,进度极其缓慢的任务,或者长时间完不成一项任务会让用户产生挫败感,对完成整个任务来说尤为不利。

反面案例2:百词斩让人绝望的进度条

192/6270,相信这个进度不仅仅是让我,让所有看到的人都感到窒息和绝望。我并不是在为我的拖延症找借口。我想表达的是,这种超长的进度条和超缓慢的任务进度,每天 50 个单词也就是进度条每天推进 0.8%,不足 1%,对用户形成的压力是巨大的,过长的任务周期也会让用户快速失去信心。

4. 小结
  • 利用「未完成」的可视化意象对用户形成激励;
  • 已完成的任务同样需要提示;
  • 拆分任务进度,避免形成过分强迫。

腾讯顶尖设计团队总结的 2019 – 2020 设计趋势:图形篇

资深UI设计者

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

为了和大家分享关于设计趋势的见解,ISUX 研究了 2019 年至 2020 年的设计趋势。没有必要去遵循年度设计趋势报告,但是否意识到这一趋势,对设计师来讲却非常重要。首先,我们总结了平面设计的总体趋势,同时也研究了从 Zepeto app 和 Memoji 开始的,最近扩展出来的 IP 形象设计和角色设计趋势。

在本文中,我们想分享 ISUX 设计趋势报告的第一部分「图形设计趋势」。在这一部分里,我们展示了当下各种品牌和动态图形的案例,总结了 12 个值得注意的平面设计趋势。

强大和可变的排版

排版一直是设计的重要元素,也是传达品牌强烈信息的手段。从去年开始,粗大的无衬线字体和强有力的排版被应用到许多品牌设计当中,这使得它成为平面设计趋势的一部分。此外,也有越来越多的品牌采用动态和反映了 3D 趋势的三维字体版式设计。

1. 动力学排版海报

△ @Andrei Robu

这张动态排版海报不是简单地放置图形和文字,而是将移动的 3D 文字放在固定的图形上,传达新的视觉印象。这些图形主要通过 SNS 以短循环视频的形式共享。

2. Uber 品牌识别

△ @Wolffolins

Uber 开发了一种无衬线字体用于品牌 logo 的再设计,并将其贯穿于整个品牌系统。采用了这些品牌字体的动态海报,更为有力地传达出 Uber 的品牌信息。

3. Squarespace 品牌识别

△ @Dia studio

Dia studio 常将动态文字应⽤于品牌项⽬,「Squarespace」是其代表作品之一。

4. FAD 视觉图形

△ @Practica Studio

以 3D 形态传递活动信息的版面设计,就像礼品包装一样。这种循环的 GIF 图也作为品牌主图形被运用。

5. 韩国女性耐克运动广告

△ @Wieden&Kennedy Tokyo

韩国艺人支持女性主观活动的耐克运动广告,也采用了大胆的哥特式字体。这些由 Guteform 设计工作室设计的字体有基本的延展形式,同时有一个系统能延展成更为宽大的形式以适配媒体的比例。这种动态化的强烈的排版传递了活动信息,和其他设计元素的互动,最大限度地发挥了图形效果。

鲜明的颜色和渐变

随着 Instagram 用彩色渐变作为品牌色,渐变趋势已经持续好几年。最近品牌,UI 和包装的图形设计都采用明亮而强烈的对比色,这种趋势不仅应用于设计,也应用于摄影。强烈的色彩组合,梦幻的色调和彩色渐变有望应用于 2019 年的整体设计。

1. APP 图标设计

△ 越来越多的手机 APP 图标使用渐变色

最近,许多移动应用程序在其图标设计上应用了彩色渐变。

2. 欧洲体育 – 2018 平昌冬奥会品牌识别

△ @DixonBaxi

欧洲体育台 2018 年平昌冬奥会的转播也将强对比和渐变色运用于多数场景中,包括标志、图形和摄影。荧光图形和深⾊背景的对比,尤为深刻地凸显了冬季运动的感觉。

3. 篮球永远品牌识别

△ @Notreal

NBA 新闻广播公司品牌重塑项目所使用的,诸如彩色渐变和大胆排版的设计方法,也反映了的趋势。他们创作了一个系统,通过各种颜色,字体和布局的应用,可以产生各种图形输出。

4. 明日之子品牌识别

△ @Plus X

腾讯视频和哇唧唧哇联合出品的选秀节目明日之子,用多种渐变色圆形表达不同选手的才华。随着节目的进行,图形主题也会随选手的变化而变化。

不对称布局

与过去基于固定网格系统的布局相比,最近越来越趋于使用仅显示图像一部分的非对称布局。虽然好像只显示整个图像的一部分,设计师却可以在大系统中无限延展每个图形。你可以认为平衡被打破了,设计师却可以更加自由地应用图形元素,呈现更强烈的视觉印象,还可以有很酷的图形组成。

1. 平面海报设计

△ @Vasjen Katro

设计了各种各样图形的 Vasjen Katro,不断尝试的形状,颜色和布局也反映了的趋势,特别是不对称和开放式布局。

2. Easy Peasy 品牌识别

△ @CFC

Easy Peasy 是韩国著名化妆品公司 Amore 推出的独立化妆品品牌,以品牌关键词轻松、活跃、有趣和大胆为基础,尝试给用户更加简单和亲切的感觉。品牌用看似自由的手绘波浪线贯穿于整个图形设计,打造不对称之美,展现了自由和亲近的形象。

不断演化的识别度

移动图标已成为趋势很多年了,现在应用交互元素的品牌案例也很多。比起强而有力,灵活而简单,能随内容做出响应和更改的交互图标俨然已成为一种新的趋势。

1. 国际光影艺术节品牌识别

△ @George&Harrison

这是交互图标的其中一个案例,用简单的方形作为基础,延展出各种各样的形状和图案。这些基本元素保持了简单和最大化的交互式图像效果。

2. SM 娱乐品牌识别

△ @CFC

韩国最大娱乐公司之⼀,SM 娱乐开发了一种新的品牌标识来反映其不断扩展的业务。它将基本圆形改变成了不同形状与小号和中号产生关联。灵活的符号和各种颜色的圆形图案是 SM 娱乐视觉识别的核心。

3. 第 59 届塞萨洛尼基国际电影节品牌识别

△ @Beetroot Design

这是电影节一个有趣的识别案例,用卷轴缠绕的图像代替寻常的电影节标志。它不是固定的,而是复杂紊乱的,以复杂的方式排列各种不同的颜⾊和图形,表达了电影节的目的──通过电影传达多种多样的故事和情感。

4. 第 6 届广州三年展品牌识别

△ @Another Design

传递展览核心信息,反复复制到三维空间的基本矩形,显示了展览的特征。在整个展厅中,你可以看到它以多种变动的形态被应用,同时也以不同的形状被运用到各式各样的场景中。

3D 中的高端纹理

3D 趋势如此流行,以至于在平面设计趋势中也不得不讨论它。当下有很多的 3D 图像尝试用复杂的纹理给大众展示生动逼真和新鲜感十足的印象。通过在三维几何形态中,添加逼真的纹理,创造在现实中不可能存在的图形,人们正在定义一种新的现实主义。

1. 3D 插画

△ @George Stoyanov

George Stoyanov 通过组合各种几何形态来表达形状之美。这种视觉尝试很有意思,因为它很难在现实中制作。

2. Adobe Think Tank 视觉图形

△ @Omar aqil design

这张图像由不同形状,纹理和颜色的几何物体设计而成,表达了 Adobe Think Tank 包含各种主题论坛的品牌特征。

3. 现代「超级消费者」品牌视频

△ @Universal everything

将各种各样的材料和颜色运用到人类行走的形状当中,传递出一种非现实和新鲜感十足的视觉印象。

4. 耐克PG3「舒适体验」广告

△ @GRIF

用柔软的毛皮材料营造耐克的主要感觉──舒适感,非现实的图形里有着生动的质感,让人耳目一新。

流体和液体形状

使用有机图形并不是一种新的潮流,但我们发现今年也有大量的图形使用水和油等液体来表达效果。它有时被用作品牌的主图形,你可以在 3D 短动态图形中明显地感受到这种倾向。这种具有强烈色彩和渐变的有机形状,传达出一种精致而梦幻的感觉。

1. 有机形态的 3D 视频

△ @cmttat

有机形态通常以 3D 形式被应用,并且广泛应用于 SNS 共享的短视频作品中。今年尤其有很多透明质感的案例,这些透明材质运用各种颜色,使色彩搭配产生变化,营造出神秘的气氛。

2. 孔雀学会 2018 品牌识别

△ @Irradie

将明亮多彩的渐变色应用于有机形态,这些图像表达了巴黎电子音乐节的特征。

定制插画和角色设计

各式各样的平面插画曾经退出过潮流,但现在已经成为一种强烈的设计趋势。很多品牌都通过聘请知名插画家的方式,用平面插画给大众新的印象。去年以来,除了 2D,3D 角色插画也成为一种趋势被应用到越来越多的品牌设计当中。

1. Uber 品牌插画

△ @Leo Natsume

运用于尤伯杯品牌新形象的插画,是其简洁有序品牌系统中有趣的一部分。

2. Spotify「音乐与你同在」插画

△ @Circus

这是 Spotify 运用了 2D 插画的品牌视频。手绘质感,色彩简单,人形的四肢都很大是最近的插画趋势。

3. Belif 品牌插图

△ @Superfiction

这是基于三维角色的 2D 图案设计示例,运用于包装设计和品牌视频。

等距

等距设计是一种将二维图形绘制成三维的方法,最近已成为一种趋势,在图形和动画视频中被广泛应用。许多设计师通过运用这种技术,在一个框架中显示整个图形,创造有趣和独特的氛围,呈现出一种全新的视觉印象。和去年一样,等距设计在今年似乎也会越来越流行。

1. 等距插画

△ @Mohamed Samir

经常使用等距技术和彩色渐变的插画家 Mohamed Samir 设计了一系列富有趣味性的海报。

2. 等距视频

△ @Matthieu BRACCINI@Panic Studio

将大物体变成微小模型的等距设计方法能给人留下印象,最近可以看到很多运用了这种方法后,屏幕变得更加特别和有趣的案例。

混合媒介

结合不同媒介的各种图形,创建有趣的效果是过去常见的一种方式。最近,结合大胆色彩,逼真照片和 3D 图像给大众新鲜感受的案例也很多。含有扁平化元素的真实图片和视频是 2019 的主要趋势之一。

1. 3D视频+2D图形

△ @Sergio Fuego@giantantstagram

当 2D 和 3D 图像组合在一起,立体效果可以更加独特和突出。这是使用了此方法的优秀视频案例。

2. 真人实拍视频+2D插画

△ @+CRUZ

匡威活动视频是一个很好地混合了拍摄视频和 2D 图形的案例。

3. 真人实拍视频+发光涂鸦动画

△ @blottermedia@jamiethraves

在真人视频中添加发光的涂鸦动画,可以使视频更具动态性和趣味性。当下,SNS 平台上越来越多舞者和歌手的视频都使用这种效果。

4. 运动 3D 的 2D 插画视频

△ @phellaz@blublustudios

有很多作品很难知道它是 2D 还是 3D。用 3D 表达物体运动,而不是简单地使用 2D 图形,这种视频能传达一种新的视觉感受。

短而无缝的动画

当通过 SNS 共享图形图像变得非常普遍时,短小和重复的动态图形也变得很易见。logo、2D 插画、3D 图像和各种各样的图形都以短循环动画的形式共享。

1. 2D 短动画

△ @motionmarkus

这些短视频通过在简单的扁平插画里重复使用短动作,传达了一种独特而有趣的形象。

2. 3D 短视频

△ @arbenl1berateme

由于 3D 是主要趋势,小而重复的 3D 图像也值得注意。添加 3D 真实纹理和效果,可以带来独特的视觉感受。

AR/VR

AR 和 VR 技术的发展,对平面和多媒体的设计趋势产生了很大的影响。这些新技术使人们对品牌有更加立体的体验。

1. Le Graphisme Augmente 图形海报

△ @Laura Normand

尽管是印刷海报,它也允许人们通过印刷材料使得 3D、AR 技术获得交互式体验。印刷海报只包含简单的几何图形和极小的信息,但当你通过手机查看时,将获得更多的信息和看到立体的形状。

2. Apple Music x Memoji 广告

△ @Apple

Apple 使用基于 AR 技术的 memoji 来推广 Apple 音乐。著名艺术家如 Ariana Grande 推出了他们的歌曲,通过这支广告,Apple 一起宣传了 Apple Music 和 memoji。

3. Nike:上海 Never Done 运动店铺网站

△ @AKQA

上海耐克通过 AR 技术实现 360° 网上零售的项目,可以让消费者根据运动的出汗量来进行购买和体验服务。

4. 奥迪 Quattro Coaster 广告

△ @POL

这是奥迪利用 AR 技术的项目,它能让消费者将汽车从银幕上带到自己的位置,从而积极体验开车的感觉。

5. 2018 年英雄联盟全球总决赛开幕式

△ @League of Legends

2018 年英雄联盟的开幕舞台利用 AR 技术,使演唱 POP/Stars 的真人歌手和游戏里 K/DA 角色一起同台演出。这些被实时跟踪的角色,在实际舞台上带来了真实的表演效果。

新复古

新复古,用现代感觉诠释复古,已成为一种新趋势。新复古是一个结合了「新」和「复古」的词,是对过去怀旧的现代诠释,不仅是设计,在时尚、建筑、流行文化等各领域都是一种新趋势。

1. 复古风格视频

△ @dennybusyet  @thekidzzzzz

流行于 80 年代和 90 年代的电子游戏,和好莱坞电影的复古图像与视频,被重新诠释后,再一次流行起来。

2. Fritz Coffee Company 公司品牌识别

△ @Jo In Hyuk

韩国著名咖啡品牌,Firtz Coffee 创造了的,具有复古 logo 和图形的品牌标识。

结语

趋势不会朝一个方向发展,它可以扩展成各种各样的方式,就像我们看到的反映了趋势的 3D,AR/VR 技术也包含了复古风格一样。我们希望这些不同的趋势能以新的方式被应用,从而创造出新颖而有趣的设计。

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

让设计更有说服力的20条经典原则:多尔蒂门槛

资深UI设计者

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

简介说明

1. 原理表述

系统需要在 400ms 内对使用者的操作做出响应,这样才能够让使用者保持专注,并提高生产效率。

2. 实验背景

上世纪 70 年代后期,计算机研究人员依然认为计算机可以花费两秒的时间对使用者的操作做出反馈,因为他们认为人们大概正好需要两秒时间来决定下一步的操作,所以 2s(2000ms)一度成为了当年计算机响应时间的标准值。直到 1979 年计算机的算力开始大幅提升,也有了足够的能力在 2000ms 内做出响应,这时 IBM 的研究员 Walter Doherty 进行了一系列研究来评估算力的增长对生产力的影响。

研究结果表明,计算机的响应速度直接影响了使用者做出下一个决定所要花费的时间(这个时间被称为用户响应时间),换句话说,计算机相应的时间越长,用户就要花费越多的时间来思考和决定下一步的操作。

上面这张表格充分说明了这一观点,横纵坐标分别为用户响应时间和系统响应时间,我们可以看到系统响应时间如果从之前的 2000ms 降低到 300ms ,使用者作出下一步指令所需要的时间就能够缩短 5s 以上。Doherty 认为人们会将工作需要的一系列操作步骤存储在短时记忆之内,如果系统响应时间太长,就会打断人们的短时记忆,换句话说,思路都不连贯了。

不仅如此,Doherty 还认为响应速度低于 400ms 的系统或者程序,会让人上瘾。放在当下的环境来看,这当然只是一句比较夸张的话,但是结论是需要我们重视的,程序的响应时间,务必在 400ms 之内。

设计案例

1. 响应时间的多尔蒂阈值

要说「多尔蒂门槛」带给我们的启示,上一节最后一句已经表达得足够清楚:系统或程序的响应时间小于 400ms 。为了让读者有更加直观得感受,我们先来一组小动画感受一下高响应延迟有多让人抓狂,快速响应又多么让人舒服:

应用案例 1:模拟延迟效果

注:请务必挨个观察,不要看整体,看单个的效果。

从动画中可以感受到,50ms、200ms 还算可以让人接受,当响应时间达到 600ms 时已经让人有些不耐烦,而达到 1000ms 时会让人不自觉多点几下,2000ms 时我手机已经被我砸了。

2. 另一个因素不能忽视

在如今的计算机算力之下,响应时间轻轻松松便能够达到多尔蒂门槛的阈值,甚至能够远比 400ms 更小,但是这就够了吗?「多尔蒂门槛」说到底只是给出了响应时间的上限,400ms 的响应时间或许在多尔蒂那个时代确实能够大幅提升操作员的操作效率从而产出更大的经济效益(比如银行系统),但是现在互联网已经越发成熟,不少公司的用户体验研究者都已经意识到,系统响应时间已然不是影响用户响应时间的唯一因素了,另一个因素是过渡动画的持续时间。

就像谷歌在 Material Design 中明确规定了过渡动画的 Speed 这一项,这是为什么呢?用户体验是一门关于情感和逻辑的学问,而不仅仅是一个统计数字就能解释的,让程序对某一操作的反馈时间(包括响应+动画)符合用户对该操作的预期才是让用户「上瘾」的关键。

应用案例 2:iOS 中的动画

所以,哪怕我们的手机、电脑已经可以做到在 100ms 之内做出响应,快到完全有能力在用户反应不过来的情况下给出反馈和结果,但是这样是不够的,我们依然需要「合适时长的」动画作为计算机反馈和大脑反应之间的润滑剂,而不至于让程序使用起来太「干涩」,也不至于让大脑一直处于应激反应的阶段而感到疲劳。

3. 有时不可避免高延迟

在真实世界中我们使用应用时会发现,有时候响应速度没办法做到如此迅捷快速,比如 APP 启动时;还有时候即便系统可以响应,网络却不行。网络并不能在用户操作的一瞬间就把所有需要的资源都下载好,用户必须等待几秒的时间,那么这时候就需要考虑如何减少用户等待的焦灼感,优化等待的体验。

比如有趣的加载动画、闪屏页等,都算是解决办法。

应用案例 3:Netflix 的启动动画以及新草的加载动画

注意事项

动画的持续时间应当在适当的区间中取到最短,而不能太突然或太缓慢。

反面案例 1:过快或过慢的动画

在现实的上线 APP 中,也会有故意把动画做得很慢的例子,这比较影响操作的流畅性。

反面案例 2:Eggzy

左右滑动的时候动画效果在实际体验中非常慢,对于想要进行连续滑动操作的用户(即便这样的使用场景不多),已经慢得无法忍受,有一种「不跟手」的感觉,这么慢的动画已经很轻易就能让用户感受到自己在等它了。

仔细浏览 Material Design 中给出的案例便可以发现,动画的持续时间大致可以参照以下几条规律去尝试:

  • 动画元素越小、动画幅度越小,持续时间就越短。
  • 复杂的动画比简单的动画持续时间更长。
  • 一个页面出现的动画总是比消失的稍稍长一点(相差大致50ms)。

总结







日历

链接

个人资料

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

存档