首页

浅谈数据可视化及经验分享(上)

鹤鹤

结合学习的可视化知识以及自身的经验写下了这篇关于数据可视化的分享


转自:站酷-四喜sixi 

10部好片,评分9+,给你脑洞一个解释

鹤鹤

探索全球顶尖设计好物



大部分人今年过年基本的生活状态如下



如大家所知疫情紧急,

我们虽心系前线却无力支援,

尽量避开人群不出门也算为国家做了些许贡献。

但是宅家除了刷短视频玩游戏,

作为设计师的童鞋们,

咋能不趁此长假好好充实自己呢

(学技能估计太难了),

在此推荐几部经典的设计片,

娱乐的同时,也丰富下自己的设计知识。


01

《Abstract: The Art of Design》

《抽象:设计的艺术》



这是由Netflix公司出品的一部文化创意纪录片,

豆瓣评分高达9.4,纪录片总共8集,

每一集都探访一位全球顶尖的设计师,

涉及插画、建筑、汽车、摄影、平面、室内、场景、球鞋等领域,

用独特的拍摄叙述手法展示设计师的创作过程,

揭开世界设计师非凡创意的艺术理念。


此片由《连线》杂志的主编Scott Dadich 创作并担纲制片,并由奥斯卡最佳纪录片导演Morgan Neville和Elizabeth Chai Vasarhelyi执导,

每一集都可以欣赏到电影画面般的浸入感。


02

《The Genius of Design》

《设计天赋



此片是BBC英国广播公司

播出的一系列关于产品设计纪录片,

一共包括五集,每集60分钟,

通过采访各知名设计师及相关的设计评论者,

讲述产品设计的历史和未来。

不管你喜欢Dieter Rams的隐忍

还是Phillipe Stark的奔放,

每个从事产品设计工作的朋友都能从这部纪录片得到一些启发。


03

《Modern Masters》

《现代艺术大师



此片由BBC英国广播公司

推出的一档电视系列节目,

总共4集,分别介绍了20世纪四位重要的艺术大师:

安迪·沃霍尔(Andy Warhol)、马蒂斯(Henri Matisse)、毕加索(Pablo Picasso)和达利(Salvador Dali)的工作与生活。


通过走访四位艺术家们生前的居所、

艺廊及博物馆等地,

向观众展示了他们伟大的艺术贡献以及惊人的后世影响力。

你会发现,麦当娜的专辑封面、米菲兔的文具、

甚至是你家的沙发和电话,也许就来源于这四位大师的创作……


04

《Simon Schama's Power of Art》

《艺术的力量




此片是由BBC英国广播公司推出年度纪录片,

总共8集。

讲述卡拉瓦乔、贝尼尼、伦勃朗、雅克、透纳、梵高、毕加索以及罗斯科八位艺术家的生平。

该系列结合了戏剧化的重塑、壮观的摄影技术,

以及Simon Schama独特而富有个性化的叙事,

全面剖析艺术大师们孕育和诞生艺术品时扣人心弦的故事。


这部纪录片荣获国际艾美奖最佳艺术节目、

2007年第60届英国电影电视艺术学院奖最佳摄影纪实类等多项国际大奖。 



05

Design for Life

《创意生活



这是一档BBC真人秀设计师比赛节目,共6集。

国际知名设计师Phillipe Starck

寻找英国最有前途的新人设计师。

通过全国选拔,

12名怀抱热情与梦想的设计师来到到巴黎史塔克设计学院学习,

他们的目标是把自己的设计思路变成真实的产品。


Phillipe Starck设计了一系列任务,

挑战设计师们的才华创意,但最后的赢家只有一个,

走到最后的人将获得和世界顶尖设计师一起工作的机会,

准备面试的设计师们更要好好看一看喔。


06

Objectified

《设计面面观



这是一部以工业设计为主题的长篇独立纪录片。

展示了创造工业产品流程的实录片断,

并记录了与世界顶尖设计师们的交谈与讨论。

采访到的设计师们包括:

纽约现代艺术馆馆长Paola Antonelli,

慕尼黑BMW首席设计师Chris Bangle,

巴黎兄弟设计组合Ronan & Erwan Bouroullec,

美国明尼阿波利斯市Walker艺术中心平面设计师Andrew Blauvelt等世界最具影响力的设计师。


导演Gary Hustwit用洞察深切的镜头

记录了这些在我们身边随处可见的工业设计产品,

看似稀松平常的设计背后,

却是设计师们倾尽全力的良苦用心。 


作为从事工业设计的童鞋来说,

自己的专业领域能被拍成纪录片也是一件感到自豪的事。


07

《Urbanized》

《城市化



Gary Hustwit 纪录片设计三部曲的最后一部,

着重记录一座城市的规划与设计,

突出了致力于解决城市问题和提出对策的世界顶尖建筑师、规划师、决策者等人。


世界上一半以上的人口生活在城市地区,

到2050年这个比例将变为75%以上。

虽然一些城市正在经历爆炸式的增长,

但其他一些城市却处在正在压缩的过程中。

在住房、流动性、公共空间、民众参与、经济发展和环境政策之间取得平衡的挑战正迅速成为一个普遍关注的问题。

中国的城市化进程也是如此,

因此观看该片,会有更深刻的体会。


08

《我在故宫修文物



由中国中央电视台出品的一部三集文物修复类纪录片,纪录故宫里稀世珍奇文物的修复过程和修复者的生活故事,

把工匠精神这件严肃的事讲得细腻、

温软且富有人情味。


该片是一部内蕴优裕的纪录片,

在一个个对于文物修复师而言的稀松日常里,

我们能够看到比修复钟表、青铜器、木器、古琴更多的东西。


片中提到一句“修复文物是穿越古今与千百年前进行对话的特殊职业和生命体验”,

在故宫神秘的身影下,这似乎更令人感到惊艳。

作为中国设计师,更应好好观看,

正所谓,民族的,才是世界的。


09

《デザインあ》

《啊!设计



《啊!设计》是NHK一档经典设计节目,

每一集邀请重量级设计师讲述设计的秘诀,

深泽直人、仲条正义、祖父江慎、伊东丰雄,柴田文江……


虽是面向儿童,但视角独特、充满对思维的启发,

赞叹日本设计教育的同时也让我们反思。

这部片放到大学设计系的课程都不为过,

因为很多一些基本的设计常识,

即使已经就业的童鞋可能都不了解,

值得设计师好好观看。


10

《夢と狂気の王国》

《梦与狂想的王国



该片为日本的一部纪录片,

由砂田麻美执导,探秘吉卜力手绘动画创作过程,

展现了宫崎骏、高畑勋、铃木敏夫,

三位老人以及新时代年轻人对动画的执着与热爱。


关于宫崎骏、吉卜力的纪录片已经很多了。

《梦与狂想的王国》则是选取了宫崎骏创作封笔之作《起风了》和高畑勋创作《辉夜姬物语》的这段时间为记录对象,

着力表现了两人的友谊历史和之后的创作分歧。


宫崎骏乘坐火车去看自己的试片会。

看完后,他走上台只说了一句话,

“对不起,生平第一次看自己的电影哭了。”

相信看完后,大家都会想再刷一遍宫崎骏的电影。


这10部纪录片,都是设计片中的经典,

可以收藏起来反复的观看,

每个设计阶段都会有不一样的感悟。

片子通过搜索都可以找到片源,

找不到的可以在后台回复(纪录片),

会推送片源链接。


最后希望大家身体健健康康的,

祝福祖国早日抗疫胜利,加油!

转自:站酷-Hang5174

这个网站能猜出你最喜欢的配色组合!

涛涛

本文要介绍的「Palettable」是一个线上配色工具,Palettable 通过互动方式协助使用者找出最合适的色彩组合,开启网站后会先随机显示颜色,使用者可点选喜欢、不喜欢(或是使用快捷键)重新显示颜色或将颜色固定在页面中,最后就能得出五个搭配好的颜色组合。

依照说明,Palettable 收录数百万设计师的知识结晶,这些颜色可以协助我们产生漂亮的调色盘,利用控制选项亦可个别调整每个颜色,最后汇出带有色码的PNG 图片或固定网址。

Palettable

网站链接:https://www.palettable.io/

使用教学

开启Palettable 后会随机显示一个颜色,可点选下方的喜欢或不喜欢(快捷键为L 和D),喜欢会将颜色固定并开始选择下一个颜色,不喜欢就会继续演算其他颜色。

每个颜色中间会有HEX 色码,点选下方的设定选项会出现调色盘,可以更直觉选择你要的颜色。

点选喜欢后前一个颜色会被固定,接着就继续选下一个颜色。

在我十分钟的使用经验,重复几次不同的配色组合,发现Palettable 会随着使用者喜欢的颜色而选择更为贴近、可互相搭配且不重复的色彩,这部份相较于其他只能随机选色的服务来说应该更有优势。

持续重复到第五个颜色,Palettable会跳出最多只有5个颜色的提示讯息,点选「Export」汇出结果。

Palettable 支援汇出为固定网址(会带有你刚才选定的五个颜色组合)或是输出为PNG 格式,如果你想把颜色组合保存下来,储存为图片会更易于整理和使用。

下图就是我透过Palettable 建立的配色组合,每个颜色会有预览,下方带有HEX 色码。

值得一试的三个理由:

  • 透过互动方式协助使用者找出最合适的色彩组合
  • 利用使用者选择的颜色,计算出更贴近、可互相搭配的色彩
  • 汇出为带有色码PNG 图片格式,或是产生固定网址

文章来源:优设    作者:Pseric

耍好控件 | 了解图标落地,让前端再爱你一次

鹤鹤

文中涉及到的所有工具与插件,考虑到部分小伙伴可能下载外网资源太慢,我已将相关插件全部打包整理完毕,可在公众号中领取!

如期而至,这是标签栏控件总结的第二期

 

 

这一期我们来聊一聊标签栏中的关键元素——图标。在此之前,如果你还没有了解标签栏的平台规范,可以回顾:《没弄懂标签栏之前,先不谈用户体验》

 

图标其实存在于界面中的许多地方,但因为这一期主要分析标签栏,所以我会借标签栏中较主流的图标样式,总结一套图标制作与落地方法。这些方法在图标制作过程中都是相通的,大家可以举一反三。

 

 

一、标签栏图标规范

 

1.1 图标样式

 

图标具体样式风格的定义是非常主观的,网络上也流传着许多的教程教大家如何设计五花八门的图标,所以在这里我就不再赘述了。我主要来总结一下基础的标签栏图标一般有哪些样式变化。

 

我调研了诸多的应用程序,发现主流的APP标签栏样式变化,大致分为以下五种。其中最占比最多的是“由线型转面型”

 


 

调研的应用程序中,所有使用到线性图标的应用程序,都将描边粗细限制在1pt-2pt之间。

 

 

1.2 图标视觉大小

 

上一期我们讲到,iOS定义了一套标签栏图标的尺寸规范。

 

 


iOS在这里所定义的尺寸并不是图标文件最后输出的尺寸,而是给设计师作图时,针对不同图标形状的参考尺寸,目的是为了让图标的视觉大小看上去一致。

 

那么为什么iOS会根据不同的图标形状给出不同的图标尺寸呢?因为50px*50px的正方形比50px*50px的圆形面积更大,所以正方形的视觉大小也会大于圆形。为了统一图标的视觉大小,正方形要做适当的面积收缩处理。(矩形同理)

 

 

于是我们看到许多平台都推出了图标辅助网格规范。其实如果遵从“面积相等”原理,理论上所有的图标网格都应该由下面这一套推理公式得出(以Material Design 标准图标网格为例):

 

 

但实际情况是,不同平台的图标辅助网格规范建议尺寸都有一定的差异。原因就在于,虽然有时候我们参考“面积相等”原则对图标视觉尺寸进行了规范,但项目落地后发现视觉上可能还是有一些不协调,所以最终设计师还是会凭借自己的主观判断再进行微调

 
记住:好的设计作品是理性的设计理论与设计师本身感性的碰撞结果,二者缺一不可。

 

1.3 图标输出尺寸

 

iOS规定标签栏图标的输出尺寸统一为31pt*28pt;Material Design规定标签栏图标的输出尺寸统一为24dp*24dp。

 

但我们发现,在借助了图标网格解决了图标视觉大小的问题之后,每一个不同形状的图标,尺寸其实是不同的。为了方便前端落地,我们在输出切图文件时,要保持每一个图标文件的输出尺寸是相同的。该怎么办呢?

 

于是我们将一组图标都放置在一个比图标本身略大的相同尺寸容器中。而图标与这个容器之间的空白像素,正好也帮助我们规避了图标落地后,切图边缘像素可能被截断的现象发生,所以我们称这个区域为“安全边距”

 

 

对于安全边距的规定:Material Design全平台规定图标的安全间距统一2dp;iOS则根据不同的图标使用场景给出的不同的图标网格和图标安全间距


二、静态图标


标签栏的图标一般分为静态图标和动态图标两种。


静态图标的实现方法相对容易,可以与前端沟通确定本次项目交付的标签栏图标文件是采用位图还是矢量图。如果是位图建议交付.png格式文件;如果是矢量图建议交付.svg格式文件。


2.1 位图图标

 

使用位图时请注意以下两点:

 

1)不同项目环境输出的切图套数不同

 

· 交付iOS原生的标签栏图标切图需要 @1x/@2x/@3x 三种倍率的切图文件;


· 交付Android原生的标签栏图标切图需要 @1.5x/@2x/@3x/@4x 四种倍率的切图文件(@0.75x和@1x切图层分别用于ldpi和mdpi分辨率设备,但这些设备现在几乎已退出市场,所以可不考虑,但最终视项目真实需求确定。);


· 交付web项目的切图需要试情况而定,一般常用 @2x 切图,因为@2x向下适配@1x、向上适配@3x,都不会产生太大的图片失真。但有时候前端小哥会要求用到其他倍率切图,所以最终以具体需求而定。

 

请注意:这里我所提到的倍率全都是“绝对倍率”,这个概念非常关键。

 

“绝对倍率”指的是:以上所有的倍率都是针对 @1x 设计稿下的输出倍率尺寸。而当你使用@2x作图时,为了保证“绝对倍率”不变,你的切图输出倍率就应该设置为 @0.5x/@1x/@1.5x 。

 

如果你在@2x下作图,却依然保持输出 @1x/@2x/@3x 的切图,那你输出的文件尺寸最终其实是 @2x/@4x/@6x。

 

有一点绕的话,我们以Sketch导出位图切图为例:

 

 

所以如果你日常使用的是Sketch,也是用Sketch原生导出工具,那你的切图预设应该根据你的作图尺寸而定,见下表:

 

 

如果你日常使用的是PS,用Cutterman切图,那么Cutterman会自动识别你当前的画板,然后根据它的宽(横屏情况下是高)来设定它的基准分辨率。那么你在任何情况下输出 @1x/@2x/@3x 的切图,其实都是“绝对倍率”,不用像Sketch当中一样换算。前提是“设置当前画布为:Auto(自动识别)”。

 

 

假设你在@2x下作图,执意不管不顾“绝对倍率”,又忘了交代前端人员手动处理切图尺寸的话,那你所有的切图尺寸实际都是设计稿所需图标尺寸的2倍。就算前端小哥帮你手动处理了切图尺寸,每一张切图所包含的像素信息,都比项目真实所需的要多很多,完全就是在徒增所需切图文件的大小。

 

2)注意切图文件大小

 

切记,公司的线上项目中,用户从服务器下载的每一单位的流量都是要公司花钱的,所以许多项目管理者都是很在意控制线上文件大小的。于是压缩切图是UI必备的技能之一。

 

虽然图标的文件大小一般只有几KB,但是项目大了难免积少成多,所以在真实项目中,不管任何切图我都会手动压缩一次。

 

这里推荐一个压缩.png文件大小,但几乎不会产生失真的免费网站 tinypng

 

 

2.2 矢量图

 

位图切图会面临交付的倍率图过多、容易失真、文件大小难控制等问题,但对于矢量图,这些问题都得到了解决。目前.svg矢量图落地也在项目中越来越流行了。UI可以在Sketch或Ai中制作。

 

一般与前端人员对接有在线图标库对接与本地文件对接两种。

 

在线矢量图标库有很多,国内比较流行的是阿里巴巴矢量图标库-iconfont;本地对接就是直接将文件发送给前端人员,他们会自行进行项目文件的管理与调用。

 

如果.svg切图输出后,与设计稿中样式不符,请注意排查以下三点:

 

1、svg不支持渐变颜色填充;

2、svg不支持描边,请将所有的描边轮廓化。Sketch中可通过“图层-轮廓化”(快捷键⌥⌘O);Ai中可通过“对象-路径-轮廓化描边”;

3、要确保一组图标的文件尺寸一致,需在图标下方增加一个透明方形,和图标一同导出。


 

  

三、动态图标

 

为了提升用户体验和产品趣味性,动效微交互的标签栏图标也越来越流行了。

 

 

动效在前端落地的方法其实有很多:

 

· 前端代码直接实现:代码是很强大的,但通常用代码直接写复杂动效会很浪费项目时间。简单维度的动效如位移、透明度、大小变化等可以借助代码,但复杂动效就不要去打扰前端小哥了;

· 直接刚gif:这已经是老旧技术时代的动画解决方案了,文件大且请求文件也需要时间,有时候无法给用户及时的触控反馈。再者它是位图的原因,在高分辨率屏幕上缩放容易失真。

· png序列帧:我们知道,动画是一张一张的静态图交替变化形成的。如果将每一帧动画都拆分成一张图片,就有了png序列帧。所以一套动画的png序列帧往往非常多,文件大小自然就变大了。所以后来也有团队引进了雪碧图的方式,但文件大小依然不乐观。并且同样是位图的原因,高分辨率屏幕容易失真。

· Facebook Pop/Rebound/Keyframes:Facebook Pop/Rebound是Facebook给iOS和Android提供的常用动画预设,是较早将动效代码化的开源技术方案,但动画效果预设只有弹簧/衰减等一些简单样式。后来Facebook又推出了Keyframes,允许设计师自己在Ae中自定义动画并导出,然后交付给前端人员。

· Lottie动画:和Facebook Keyframes相同,都是结合Ae输出动画代码。但是Lottie更厉害的地方在于,它比起Facebook Keyframes来支持的Ae样式更多,例如蒙版、遮罩、修剪路径等等。

 

所以综上所述,落地标签栏动态图标,目前最可行的还是Lottie动画。

 

3.1 Lottie的背景

 

Lottie是Airbnb开源的一个跨平台动画库。表现层面它是一张图片,但实现的方式是通过代码,所以它是矢量的。很花式的动画也可以把文件大小做到非常小。

 

UI与前端对接是通过交付一个json代码文件。

 

如果这是你第一次接触Lottie,再好不过的体验方法就是玩一玩阿里提供的一站式动画平台:犸良动画 。它最底层采用的技术就是Lottie,只是被阿里二次封装了许多预设的动画效果,你可以自定义其中的元素与参数,然后试着导出你的第一个json文件~

 

3.2 Lottie如何上手

 

接下来是简单粗暴的UI与前端对接实现Lottie动画落地的全步骤参考。在此之前,想要全方位了解Lottie的相关信息,请参阅Lottie官方说明文档

 

· 步骤一:安装Ae和bodymovin

 

制作Lottie动画,首先你必需两个工具:Ae和bodymovin插件。

 

Ae版本要求为Ae CC2014。又因为据很多设计师反馈,目前bodymovin在汉化后的Ae中使用会出现诸多问题,所以后面的教程都是基于Ae英文版。如果你汉化了Ae,最好在需要制作Lottie动画时取消汉化。

 

然后获取bodymovin。bodymovin插件更新至今,版本已非常多,并不一定版就适用于你当前的项目,因为前端使用的bodymovin解析包可能无法解析你用版bodymovin插件输出的json文件。

 

 

一旦确定使用Lottie,前端人员会在GitHub查询Lottie相关文档的,所以UI只需要配合前端确定一下合适的bodymovin插件版本就可以了。最终走查时,一定要确保当前bodymovin输出的动画在项目所需要运行的所有环境中可运行,才说明UI使用的bodymovin插件和前端使用的bodymovin解析包版本是兼容的。

 

获取了bodymovin后,将bodymovin拖入到ZXP Installer中,ZXP Installer会自动识别插件安装到Ae。

 

 

安装完成后,就可以在AE的“窗口-扩展”中看到bodymovin啦~

 

 

· 步骤二:将Sketch或Ai中的文件导入Ae

 

如果你技术娴熟,当然也可以直接在Ae中绘制图案动画。但如果你还是习惯先在其他软件中绘制好基础图案,再到Ae中制作动画,那你需要了解如何将图案导入Ae。

 

Ai和Ae都是Adobe旗下的工具,所以Ae是可以完美解析.ai文件的,如果你是使用Ai作图,可直接存储为.ai文件,再在Ae中打开。

 

 

如果你使用的是Sketch,可以先导出为.svg,再用Ai打开该.svg文件,转换存储格式为.ai,最后到Ae中打开。

 

当然,Sketch还有直接和Ae对接的插件,AEUX(前身Sketch2AE)。需要在Sketch和Ae中同时安装AEUX插件,Sketch负责传送,Ae负责接收。具体的使用方法可以在官网教程中查看,我就不再赘述了。

 

 

·步骤三:制作动效并输出

 

和静态图标同理,为了保证落地时图标视觉大小一致,一组动效图标输出的文件尺寸应该是相同的。所以在你制作动画之前需要确定合成文件的尺寸。Lottie官方建议:因为Lottie输出的是矢量动画,所以建议以@1x输出动效,前端人员在任何屏幕上放大并不会失真。

 

 

在制作之前请务必详细阅读Lottie所支持的Ae参数文档,以免辛苦做出的动效,前端无法解析。特别提醒:原生环境中bodymovin是不支持解析Ae表达式的。

 

完成制作动效后,就可以通过bodymovin导出动效了。

 

  

·步骤四:预览与交付

 

导出完成后在你的目的地文件夹中将存在一个.json文档,如果你的动效中还使用了位图,系统还会自动生成一个images文件夹。这些都是你需要交付给与你对接的前端开发人员的文件。

 

 

.json文件中记录的动效代码UI不需要过多关心,但是其中两个信息你是一定要了解的。它们是你与前端对接沟通和获悉文件信息的一些关键参数。

 

 

UI自检动效或其他相关人员需要预览动效的时候,可以用LottieFiles,拖入.json文件即可预览。iOS和Android还可以下载LottieFiles APP,扫描预览页中的二维码即可在移动端预览。

 

四、总结

 

整个制作图标的流程我已经全部整理出来了。首先要注意图标的规范,然后制作位图、矢量、动效图标时的注意点,我几乎把我在真实项目中踩过的坑都告诉大家了。剩下的创造性的环节就交给你了!

 转自:站酷-UCD耍家 

有了这个神器,你也可以成为押韵王者

涛涛

「口罩还是呼吸机,您老看着二选一;带病回乡不孝儿郎,传染爹娘丧尽天良」

前段时间河南硬核横幅及喊话霸榜热搜,着实让全民在疫情笼罩的阴霾下得到了一丝放松。这些土味硬核横幅,话糙理不糙,用来劝诫家中长辈,做成表情包亲戚群里分享,应该会有很不错的效果!

别看这些话语简单粗暴,但却极其上头,可不就是 rap 里常说的单押,双押嘛,再来普及一下 rap 里的常用词:

  1. 单押:网络流行词,指在歌词中单字押韵。
  2. 双押:网络流行词,指在歌词中双字押韵。
  3. 韵脚:是韵文(诗、词、歌、赋等)句末押韵的字。
  4. Flow:抽象的概念,是指 Rapper 在说唱时通过押韵的编排、停顿的节奏、发音的轻重等技巧,来将歌词演唱变得富有自己的风格。
  5. ……

在土味文案的催化下,我除了研究押韵这门学问,偶尔也会来两句:

yo,喜欢唱歌刷剧看恐怖片,喜欢撸猫撸狗拍照片。

诶,我的flow就是这么的秀。

献丑了献丑了,说正经的,就在我研究这个单双押的时候发现了一个写词好帮手——押韵助手,网站简介说明了这是一个不简单的神器。

押韵助手是一个可以在线查询押韵的字、词、诗、歌的网站,支持单押多押;海量词库,保持更新;文案、金句、诗词、Rap歌词创作者的必备神器。

试玩地址:https://yayun.la/

值得一试的三个理由:

  • 智能搜索,词库丰富
  • 押韵助手,灵感来源
  • 在线查询,无需下载软件

或许你会认为这算是一个「智能枪手」,但其实不然,除了能查普通词汇的押韵之外,它还能检测出与你搜索词汇相押韵的唐诗、宋词、元曲、歌词,连英文单词也能搜索出来,写词的时候还能顺带学习一波,赞。

此外,你还可以进行默认查询设置,主要根据你个人的需求进行定制搜索设置,可以进行辅音和词库的选用(不过太苛刻的条件可能会影响搜索结果的可用性)。

押韵助手还有一个 AI 作词功能,是基于其神经网络作词,但是创造出来的句子可读性欠佳,而且还不押韵,仅是娱乐型的功能。在此,我输入了「敷衍」一词,搜索出来的结果……我是没看懂的,大家品品。

总体来说押韵助手用来查询词汇的押韵是非常不错的选择,大家在家也可以进行「rap 创作」、文案创作、诗词创作等。另外,押韵助手还有手机 APP,APP 体量非常小,仅 3.2 M,功能除了没有 AI 作词以外,其余功能和网页相差无几,所以大家择其一进行试玩就可以。

值得一试的三个理由:

  • 智能搜索,词库丰富
  • 押韵助手,灵感来源
  • 在线查询,无需下载软件

文章来源:优设   作

为什么整个亚洲的平面设计师都忽略了它? | 深度

前端达人

点击查看原图


平面设计师不可忽视的“数据”

短视频泛滥的今天,足以证明纯文字或者纯图像的输出已不能满足人们对信息的摄入。看图太单调,看文字太枯燥,所以不断有设计师开始思考怎么重新设计图文的形式让信息视觉化效果更佳。

信息设计区别于传统的平面设计,它更着重于数据的视觉化。目前,全球范围内的设计师们都在寻求以更创新、更独特、更有趣的方式来展示数据,信息图表就是信息设计中的一个子集,它能够使人们更好的读懂数据。越来越多的国家和企业已将信息图表设计运用于各领域的日常工作。

信息爆炸的时代正好缺少了这样一种整合信息的手段,信息图表的形式正好帮助人们解决了这样的一个难题。所以说信息图表设计不等于视觉设计,平面设计师通过扮演数据分析师获得锻炼,通过数据对比掌握最真实的情况,拉大平面设计师的思维范畴同时获得更多尊重与信任。

点击查看原图



信息图表早已出现

信息图表的历史早于网络,大约32,000年。公元前30,000年的洞穴绘画很容易被称为第一个信息图表,描绘了周边地区的动物和其他资源。作为数据的直观表示,它们绝对是信息图表。

点击查看原图埃及的象形文字也是如此。公元前3000年左右,古埃及人用这些信息图表来讲述生活,工作和宗教的故事。点击查看原图

更为现代的信息图表历史可能始于William Playfair,他是统计图形学的早期创新者。1786年,他出版了商业和政治地图集,其中显示了许多代表英格兰经济的条形图,折线图和直方图。他在1801年用第一张面积图和第一张饼图进行了跟踪。


点击查看原图


1857年,英国护士佛罗伦斯·南丁格尔使用信息图形,说服维多利亚女王改善军队医院的条件。她的图表显示了克里米亚战争每个月的死亡人数和原因:可预防的蓝色疾病,红色伤口和其他黑色病因。点击查看原图

说到英格兰,信息图表历史上的一大步是在1933年,当时哈里贝克创建了伦敦地铁的第一张地图,只显示了描绘公共交通路线和车站的线路。这是一个重要的发展,因为它将视觉图表移动到日常生活中。点击查看原图


信息图表的应用范围

因为日常生活中最常被我们接触到的信息图表就是地图,所以总有人认为信息图表就是地图。其实地图仅是信息图表的用途之一,信息图表不应该被局限地认为只能作为地图使用,下面为大家普及一些信息图表案例:

说明书

点击查看原图


点击查看原图


游戏设计


点击查看原图

点击查看原图



网页设计

点击查看原图点击查看原图


点击查看原图


APP界面设计

点击查看原图点击查看原图

指示系统

点击查看原图点击查看原图



信息图表设计覆盖的领域非常广泛,小到说明书、地图、各种场合PPT制作、书籍设计、游戏、UI、App、而完成一项信息图表设计需要经过数据采集、分析统计、对比采纳、最后通过平面设计师制作完成。

全球著名信息图表设计师

Jan Schwochow

Jan Schwochow是柏林Golden Section Graphics机构的所有者和创意主管,并且在柏林的KircherBurkhardt机构设立了一个信息图表部门。自2007年以来,他一直在管理Golden Section Graphics办公室,该办公室目前拥有多达16名员工。该团队的工作获得了众多国家和国际奖项。

作品:一个模型体育场

点击查看原图点击查看原图点击查看原图




启发性广告

点击查看原图点击查看原图



Alberto Lucas López

Alberto Lucas López是华盛顿高级地理图形编辑,他的作品在美国、亚洲和欧洲获得了无数奖项。Alberto的信息图表从其他领域脱颖而出,因为他的精致和反由他不断寻求创新所驱动的直观概念。仅在2015年,他就赢得了50多项国际奖项。

作品:Fender Stratocaster

点击查看原图点击查看原图

Antonio Farach

Antonio Farach是Muscat Media Group的信息图表编辑,也是阿曼时报和Al Shabiba的出版商。

作品:Crimean-Congo Fever

26.jpeg27.jpeg



SUNGHWAN JANG张圣焕/韩国

韩国弘益大学美术学院视觉设计系学士、弘益大学产业美术研究院硕士。现为203 X Design Studio代表、文化月刊《Street H》发行人,他在2013年开设了自己的“信息图表实验室”,研究和设计了不少优秀的信息图表作品。

作品:Self-Publishing

28.jpeg点击查看原图点击查看原图点击查看原图



作品:Understanding Cat Care

点击查看原图点击查看原图点击查看原图

作品:Burger

点击查看原图点击查看原图点击查看原图



作品:Korean SOJU

点击查看原图点击查看原图点击查看原图

为什么我们要学习信息图表设计?

信息图表我认为它始于阿尔塔米拉洞窟里的绘画。最开始仅仅是用于视觉交流。随着语言、文字的出现以及纸张的发明,信息得到了的传达,以文本为主的书籍也成为了交流的中心。辨别出好的信息以及如何精准传达显得尤其重要。

我们可以轻松地在世界上任意一个国家的机场里找到厕所,是因为有代表“厕所”的图片和图画文字。当然图画文字只是信息图表中一个很小的部分。现在,我们生活的世界已经成为一个,比起文字,更多地运用视觉信息打破地域和语言限制的时代。

— 张圣焕2018年Malofiej奖铜奖获得者

Malofiej奖是由新闻设计协会举办的。如今这个奖项被称为信息图表界的普利策奖,Malofiej奖一直以来表彰在出版和线上的最佳信息图表。

41.jpeg点击查看原图



Malofiej奖26届信息图表铜奖▲

为什么你的信息图表设计就是学不好?

渐渐地发现,信息图表设计已进入到国内视觉传达专业里,而事实上在国外信息图表设计早已是一门独立的专业学科,我们常常问为什么欧美国家做的UI那么漂亮?

这是有原因的,在国内师资相当缺乏的条件下,信息图表设计往往是走马观花,忽视制作方法上的有效性,导致作品要么拥有视觉冲击力却缺乏表达的准确性,要么就是由数据转化出的视觉效果平庸缺乏魅力。那么怎么样才可以制作出有魅力的信息图表设计?

经过深入的观察与分析,我们认为信息图表设计将改变平面设计的未来,由Helvetica 掀起的字体设计热蔓延全球,让字体设计意识得到重视与提高,而下一股推动这个信息时代发展的必定是信息图表设计,有魅力的信息图表设计记录时代的变迁,让世界越有魅力!

点击查看原图点击查看原图点击查看原图46.jpeg



BranD × 张圣焕


转自:搜狐

作者:BranD

链接:https://www.sohu.com/a/245081283_611151

来源:搜狐

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


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




什么样的设计才能荣获「包装界的奥斯卡奖」?

前端达人

1.png


伦敦当地时间9月12日,Pentawards官方公布了2019年的最终获奖名单。这个创立于2007年的全球首个也是唯一一个专注于产品包装类设计的大奖,被誉为「包装设计界的奥斯卡」。每年组委会会从全球顶尖的设计机构或公司邀请12位行业大咖组成评审团队,对来自世界各地的上千件包装设计作品进行严格的评选,有时甚至会出现奖项空缺的情况。

2.png
参赛作品被按照食品、饮品、身体相关产品、品以及其他市场5个门类进行分类评选,而奖项等级则设置了钻石奖、铂金奖、金奖、银奖和铜奖。2018年,Pentawards还专门为学生设计师设置了鼓励年轻一代的NXT—GEN AWARD。每年获得这个迄今为止最具权威与含金量的包装设计奖项的作品,无疑是当年包装趋势的缩影与风向标。

3.png

全场大奖 —— 钻石奖作品

作为Pentawards每年仅设置一个名额的全场大奖 「钻石奖」,今年被其他市场类的「微软」团队(Microsoft)捧得,获奖作品为Xbox自适应控制器包装。

4.png

Xbox自适应控制器的设计旨在为行动不便的游戏玩家提供同样能愉悦享受游戏的体验,全新的控制器完全颠覆了大家对传统手柄设计的认知,让残障人士也能轻松使用Xbox One和Windows 10 PC游戏。

5.png


Xbox自适应控制器的包装设计同样充分考虑到了使用人群的特殊性,设计团队将气囊集成到包装中,保护产品的同时也尽量保持包装的小尺寸。能轻松拆开的封胶、便于开箱的色带还有抽屉式的内包装盒,只要找到最显眼的抽拉部位,不需要任何说明书指导或复杂拆盒步骤,谁都能单手拆包装。

6.png

类别: 其他市场 – 电子

品牌: XBOX

参赛:Microsoft

设计: Mark Weiser,Kevin Marshall

国家: 英国

铂金奖作品

7.png




今年饮料类的「铂金奖」被来自英国爱丁堡的LIND & LIME GIN获得。包装设计由苏格兰的创意团队 Contagious 操刀,酒瓶设计的灵感源于品牌商The Port of Leith Distillery所在的Leith 地区海岸上具有历史意义的工业建筑以及老窑.

8.png


酒瓶封口上展示的是关于英国皇家海军外科医生James Lind的文案,从酒瓶包装的设计到这款酒的命名LIND & LIME GIN,都体现了对这位发起利用柑桔类水果预防与治疗坏血病的医生的致敬。优雅精致的外观设计搭配晶莹剔透的玻璃质感,让人一眼就能从众多酒瓶包装中被LIND & LIME GIN所吸引。

9.png

10.png

11.png


类别: 饮品类

品牌: LIND & LIME GIN

参赛: Contagious

设计: James Hartigan

国家:英国

12.png



身体与美容相关的「铂金奖」得主是来自韩国的彩妆品牌STONEBRICK,设计团队是来自美国的Established。包装与产品设计主打乐高与玩色的概念,唇膏、腮红、眼影等所有彩妆单品都可以互相吸引连接,像拼乐高砌积木的形式被收纳好。让顾客亲手搭建自己量身定做的彩妆积木王国,简直直击少女心。


13.png

14.png



这种集娱乐性、互动性与定制化为一体的包装设计,除了能满足产品对功能层面的基本诉求,更能与消费者产生情感情绪上的连接。利于强化品牌独特的形象,也能通过其趣味性刺激消费。此包装设计不仅获得了Pentawards的铂金奖,同时也获得了D&AD Awards 2019 (2019英国黄铅笔奖 )。


15.png

16.png

17.png


18.png


类别: 身体相关产品

品牌: STONEBRICK

参赛: Established

设计: Sam O’Donahue

国家:美国

19.png



亚美尼亚Backbone Branding设计公司为RICEMAN设计的大米品牌包装获得了食品类的「铂金奖」。

包装外形以亚洲稻农戴蓑帽的传统形象为原型,圆锥形帽子纸盒盖子内侧则巧妙与标记测量米量的米杯结合,实用又环保。两种不同尺寸的袋子分别装盛不同的大米类型:短粒米为小袋子,长粒米为高袋子。

20.png

21.png

图形与视觉书写风格选择了亚洲书法,以强调这种谷物的区域起源。整体的视觉设计展现了品牌向稻米产品背后的人类致敬的寓意与人文情怀。

22.png

23.png


类别: 食品类

品牌:RICEMAN

参赛:Backbone Branding

设计:Stepan Azaryan, Eliza Malkhasyan

国家:亚美尼亚

24.png



品类的「铂金奖」被西班牙设计师Roberto Núñez为PERFECCIONISTA葡萄酒设计的包装获得。这款限量版葡萄酒的包装设计以重视缺陷为概念。每一瓶酒的木盒包装都是手工切割的木材制造并带有墨水印章编号。

25.png


类别:品 – 香槟酒

品牌:PERFECCIONISTA

参赛:Roberto Núñez

设计:Roberto Núñez

国家:西班牙

26.png

其他品类的「铂金奖」获得者是一个来自西班牙的品牌AURIGA的自我推广设计。视觉语言独特,充满神秘感。

27.png

28.png

29.png

30.png


类别:其他市场 – 自我推广

品牌:AURIGA

参赛:AURIGA

国家:西班牙

更多获奖作品欣赏

31.png

32.png

33.png

34.png


类别: 饮品类

品牌:「宋」高山单丛茶

参赛:林韶斌设计机构

设计:林韶斌设计机构

国家:中国

35.png

36.png

37.png

38.png


类别: 食品类

品牌:BEE-FEE

参赛:Opus B Brand Design

设计:Zuzanna Sadlik, Beata Faron

国家:波兰

39.png

40.png

41.png


类别: 饮品类

品牌:Pearlfisher

参赛:Toyo Seikan Group Holdings,Ltd.

设计:Hamish Campbell 等

国家:美国

42.png

43.png


类别: 食品类

品牌:COLOREAT

参赛:Backbone Branding

设计:Stepan Azaryan, Gevorg Balyan

国家:亚美尼亚

44.png

45.png

46.png

47.png


类别: 饮品类

品牌:HANSHUIXIGU

参赛:凌云创意

设计:凌云创意团队

国家:中国

48.png

49.png

50.png


类别: 食品类

品牌:BOUDIN SAN FRANCISCO

参赛:Art Center College of Design

设计:Yi Mao

国家:美国

51.png

52.png

53.png


类别: 食品类

品牌:无(概念设计)

参赛:Toyo Seikan Group Holdings,Ltd.

设计:Sayaka Kawagoe

国家:日本

54.png

55.png

56.png

57.png

58.png


类别: 食品类

品牌:brand.new

参赛:Toyo Seikan Group Holdings,Ltd.

设计:Kostas Mentzos Cristina Seijas Fernández

国家:希腊


59.png

60.png

61.png

62.png



类别: 其他市场 – 自我推广

品牌:Stocks Taylor Benson

参赛:Toyo Seikan Group Holdings,Ltd.

设计:Stocks Taylor Benson Design Team

国家:英国

63.png

64.png

65.png


类别: 身体相关产品

品牌:Fengsheng Group

参赛:Shanghai Version Design Group

设计:Zhihua He

国家:中国

66.png

67.png

68.png


类别: 身体相关产品

品牌:SAIB INTIMATE COSMETIC

参赛:SAIB&Co

设计:Jungmin Choi, Eunchong Kim

国家:韩国

69.png

70.png

71.png


类别: 身体相关产品

品牌:COLOUR ZONE

参赛:Shanghai Nianxiang Brand Design & Consulting Co, Ltd.

国家:中国

72.png

73.png

74.png


类别: 身体相关产品

品牌:CODE 00-DESIGNED FOR POST-00S

参赛:YANG DESIGN

设计:Yang Ming Jie

国家:中国

75.png

76.png

77.png


类别: 身体相关产品

品牌:ART&FICT

参赛:British Higher School of Art and Design

设计:Evgeniia Zhuravleva

国家:俄罗斯

78.png

79.png

80.png


类别: 品

品牌:CINCO JOTAS

参赛:MORILLAS BRAND DESIGN, S.L.

国家:西班牙

转自:简书
作者:极创设计
链接:https://www.jianshu.com/p/de86f3028f18
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



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












触觉之美-如何进行触觉设计

鹤鹤

触觉给人类带来的情感体验是不可或缺的,如果没有它的存在,我们在日常生活中与现实物体互动的过程将变得索然无味。

内容概览

一.我们的触觉

二.什么是触觉反馈

三. iPhone 的振动模块

四.安卓手机的振动模块

五.触觉设计的用途

六.如何设计

七.结语

一.我们的触觉


“她滑滑的,明亮着,像涂了‘明油’一般,有鸡蛋清那样软,那样嫩”,这是朱自清的散文《绿》中对梅雨潭的一段描写。“滑”、“软”、“嫩”是对触觉赋予意蕴的独特表达,这些我们一旦听到就会在脑海里浮现画面的描述是来自于生活中无数次触觉带给我们的独特体验。


在人体的五种感觉中,触觉与其他感觉相比与我们身体的接触面更广,人体全身上下都是触觉信号的接收器。尽管如此,人类的触觉能够传递的信息是有限的,通常触觉传递的信息只有视觉信息的 1 %。不过,触觉给人类带来的情感体验又是不可或缺的,如果没有它的存在,我们在日常生活中与现实物体互动的过程将变得索然无味。科技产品也是如此,无论是 VR 体感游戏机还是日常使用的手机,通过振动带来的触觉反馈起到了画龙点睛的作用。


二.什么是触觉反馈


触觉反馈,通常是通过硬件的振动模拟人的真实触觉感受,通常应用于用户随身携带的手持、穿戴、触摸等设备上,现在也开始大规模应用于体感游戏、4D 视频内容、机器人、医疗等领域,可以补充视觉和音频反馈的不足,增强互动效果,提升用户体验。


根据触觉技术领域的创新公司意美森的用户反馈和调查显示,用户在使用带触觉体验的游戏后,给予了游戏更多的正面评价,并且活跃和分享意愿明显提高。随着硬件厂商对用户体验的愈发重视,触觉设计在产品设计中更多地得到应用。接下来会向大家介绍移动 App 产品如何配合硬件设计出优质的触觉体验。


三.iPhone 的振动模块


软件的体验升级需要依赖硬件的不断迭代。iPhone 的振动体验一直被用户赞叹不已,这源自于与苹果对用户体验的追求,即使在大多数用户看来无关痛痒的振动功能,苹果也一直进行不断升级迭代,提高振动模块的性能,带来更舒适的体验。


在 iPhone 振动模块的升级过程,苹果不断增大振动模块体积,从转子马达到线性马达的更新换代让震感越来越细腻,如下图所示。

(上图内硬件图片来自知乎用户「云子可信」)


直到后来, iPhone 7 / 7 plus 上全新线性马达 Tapitic Engine 问世,iOS 10 的振动接口向开发者开放,如此高配置的线性马达提供的细腻反馈不但使 iOS 系统 更具科技与艺术的融合之美,更是赋能大量第三方应用,调用此功能的第三方应用可以自定义地使用振动反馈来提高产品体验。


可能有些读者会疑惑,全新的 Tapitic Engine 振动模式和以往有什么不同之处呢?我们先回忆一下在以往各种手机的振动给我们带来的体验,基本都是嘈杂的声音加上酸麻的手感,体验非常拙劣。而 Tapitic Engine 实现了在不发出声音的情况下提供更细腻舒适的振动体验,如下图。


另外振动给我们另一个负面影响就是其干扰性太强,大多数其他手机提供的振动并没有进行时间和强度的分级,这带来的问题是无论在何种场景下,手机都会给我们同样的振动反馈,没有进行任何场景的细分。比如对于危险操作可能需要时长久强度大的反馈,而一些轻量化的提示只需要轻微的振动即可,但是由于硬件的限制,大部分安卓手机都是一视同仁。而拥有 Tapitic Engine 的 iPhone 则可以自定义三种不同的强度、不同次数和时间,还可以穿插强度使用模拟更多场景,后文会详细介绍相关应用。


四.安卓手机的振动模块


刚才提到,绝大多数的安卓机型不可以对振动的强度进行自定义,因此不管在系统软件还是第三方软件中,如果场景需要振动辅助,基本都是振动到手麻的一声“嗡”就不了了之了,手机如果在桌子上这种劣质的振动甚至能把手机震得掉到地上。只有少数有极客精神的安卓厂商会在振动体验上不遗余力,向苹果看齐,但由于大部分第三方应用开发者难以针对各个安卓机型不同的硬件振动模块进行适配,所以大部分安卓机型上的第三方 App 如果需要振动都是调用单一强度,仍然未对振动强度做场景细分,体验依然不尽人意。


五.触觉设计的用途


尽管触觉传递的信息远远少于视觉和听觉,但我们通常也不会将触觉作为传递信息的主要手段。我们只将其作为视觉反馈和听觉反馈的一种补充和配合部分。电子设备的振动模块产生的触觉反馈,可以有效提高交互的易感知性,并赋予产品生命力,增强用户的情感化体验。


( 1 )  交互反馈


a.更敏感的反馈方式


我们在使用电子设备时获得反馈的三种形式:视觉反馈,听觉反馈,触觉反馈。触觉比视觉和听觉的传达更迅速被用户感知,由于以人体为介质,触觉反馈会为对表皮以及对肌肉中感受器进行刺激,因此其要被视觉与听觉更加敏感和强烈。


我们可以将这种特性应用到相应的产品设计中,比如很多产品的下拉刷新都从之前的文字提示改为了振动提示,可以使用户更快速地获得反馈。当用户下拉的距离到达临界值并触发振动后,用户感受到振动后松手就刷新了,而不用再使用“继续下拉刷新、释放刷新”等冗余的文案来提示用户,如下图的下厨房应用。


b.强化物理动作


苹果手机从 iPhone 6s 升级到 iPhone 7 最大的变化之一就是经典的 Home 键从可以按下去的实体键变为了虚拟键。刚开始很多果粉还担心可能产生的体验下降问题,但是经过使用后才发现虚拟按键加上升级的线性马达提供的震感,逼真地模拟了真实的按压触感,乃至很多用户反馈说使用了 iPhone 7 很久时间都还以为 Home 键仍然是可以按压的实体键。


振动反馈还可以给输入法应用带来真实的敲击感,来自马萨诸塞大学的一份研究显示,虚拟键盘如果加入振动反馈,可以提升用户输入时的准确度。


c.弥补异常情况下的反馈


由于网络延迟,用户进行某些操作后可能需要等待一段时间才能收到反馈,如果时间过久,用户会怀疑是自己操作不当,但如果加入振动反馈,会在其他反馈信息出现前打消用户的顾虑。


如下图,知乎的鼓掌功能。用户点击鼓掌后,通常客户端会请求服务端的数据然后显示已点赞的状态,这个过程会收到用户网络状况的影响。如果网络状况较差,用户不能及时从屏幕获取视觉变化的反馈,就会怀疑自己是不是没有点击到正确的热区或者操作不当,因此用户可能进行重复点击从而影响体验。但若加入振动反馈,用户在点击鼓掌后,首先一定会收到振动反馈,因为振动反馈不会受到网络的影响而不会延迟,之后即使视觉反馈有些许延迟也不会让用户怀疑是自己点击失误了。


( 2 )  情感化设计


人们容易对自己熟悉的事物产生好感。在产品设计中,我们经常使用日常生活中常见的视觉形象和声音进行隐喻关联,与用户建立情感联结。触觉也不例外,日常生活中各种各样的现实物体都会给我们带来不同的触觉感受。电器按钮的阻尼感、节日烟花爆炸传递的震感、拨动齿轮带来的摩擦感等等都是我们与现实世界之间的触觉交互。iPhone 的线性马达提供的不同等级的振动反馈可以充分地模拟并给我们带来逼真的触觉体验。


下面就向大家介绍一些将触觉设计用于情感化设计中的一些精选案例。


a.单一强度


前文给大家提到,iPhone 手机自 iPhone 7 开始开放了振动接口,可供第三方应用开发者调用,其中有三种强度可供选择,分别是 Light、Medium 和 Heavy 。单一强度指的是,某个功能只使用了 其中一个振动强度来设计。

如下图的荔枝的私人 FM 功能,当我们拨动齿轮时,振动模块就会伴随着我们拨动的手指产生强度为 Medium 的振动反馈,模拟现实生活中的真实体验。


b.多强度组合


多强度组合指的是,某个功能使用了 Light、Medium 和 Heavy 三种强度进行组合使用,从而模拟出变化的振动效果。它比单一强度的体验更加丰富,而且通过设计者巧妙的构思出来的不同的组合形式,它可以模拟出各种独出心裁的表现效果。


为了研究不同产品上振动带来的反馈感受,我体验了很多产品,但论将振动反馈运用到的,不得不提 QQ 的戳一戳功能,它振动的时间节点、强度与每一帧的动画效果是匹配的,其设计团队的匠心独具,可见一斑。为了直观地让大家感受振动变化,以戳一戳中的「放大招」为例制作了效果图给大家展示大概的振动强度随时间变化过程。下图中,动画的过程可以拆解为 大招的能量收集、大招发射、大招撞墙、屏幕摇晃,分别对应不同的振动强度,使得体验极为真实和令人惊喜。


当我们使用 iMessage 发送短信时,如果选择了烟花,在短信发出的一瞬间,全屏幕就会布满骤然绽放的烟花。更令人惊喜的是,线性马达在此时进行大大小小的振动模拟出烟花的爆裂感,仿佛烟花就是在我们手里绽放一般。


不仅仅是上述案例,通过振动带来的触觉反馈在应用设计层面给我们带来了巨大的想象空间。枪击,抛硬币,鼓点,齿轮,等等等等,再加上视觉和听觉的配合,更是带给了用户身临其境的体验。


c.适配问题


由于之前提到过的安卓机型割裂严重,有些旗舰安卓机型的振动模块体验优质,但是大部分安卓手机的振动还是差强人意,因此大部分第三方应用开发者难以针对各个安卓机型不同的硬件振动模块进行适配,所以大部分安卓机型上的 App 如果需要振动都是调用最原始的振动模式,这种模式的体验感很差,与 iPhone 的 Tapitic Engine 分级振动体验不可同日而语,因此即使某个场景需要振动满足情感化需求,一般情况下在安卓端也是不会加入的,比如荔枝 FM 的私人 FM 功能中的振动、QQ 的戳一戳中的振动都只在 iOS 端做了适配,安卓端是没有的。


六.如何设计

( 1 )  iOS


在日常体验 App 产品时,我们可能会发现,在同样的 iPhone 机型上,有的 App 中某个功能的振动反馈细腻舒适,但有的 App 的振动反馈的强度很不合时宜且体验感差。这里可能存在设计师与开发人员的沟通问题,设计师并没有先主动搜集资料去了解 iPhone 的振动有多种强度选择,只是简单地让开发人员将某个功能加入振动反馈,于是开发人员任意选择了一个振动强度就草草上线。最终,导致设计出来的振动反而降低了体验。优秀的设计需要平稳的落地,在我们决定要为某个功能设计振动后,我们要完成以下步骤。


1.选择振动强度;

2.确定振动次数;

3.如果振动多次,确定每两次之间的间隔时间;

4.确定是否循环。


如果设计的振动是多强度组合,最好将上述参数确定后以可视化的形式(如表格)交接给开发人员,方便其理解。由于部分开发人员可能并未深入了解 iOS 的振动模块的调用实现方式,因此为了各位设计师朋友能够更加畅快地与开发沟通,我在文章后面附上了 iOS 调用振动的相关代码,大家可以将相关代码直接发给发给开发人员供参考使用。我在附录列举了三种震动方式,其中的「 UIImpactFeedbackGenerator 震感」就是上文提到的可以自定义三种强度的方式,推荐大家使用,附录里还列举了每种振动方式的支持机型和系统、优缺点和我的个人建议。


( 2 )  安卓


由于安卓自定义系统过多,且硬件之间差异过大,第三方应用开发者难以额外花费时间和精力去适配不同安卓手机硬件,因此通常只使用默认的振动调用方法。因此在与开发工程师交接时,一般我们只需要做后三步。


1.确定振动次数;

2.确定每两次之间的间隔时间;

3.确定是否循环。


七.结语


电子产品每一次的硬件迭代总是会给设计师带来巨大的想象空间,作为设计师,我们需要在技术日新月异的时代不断开拓视野,拓展设计的边界。同时也是由于技术的进步,可能本文的技术实现方案在未来的某个时间就被淘汰和抛弃,所以希望大家对本文持批判性态度,对文章内可能的疏漏予以指出,我将及时更新或更正。在这里也感谢公司的 iOS 开发小伙伴的支持,牺牲休息时间与我一起检验各种实现方案带来的不同震感,提高本文的严谨性。


(附) iOS 振动调用代码


( 1 )  UIImpactFeedbackGenerator 震感

代码

a.微弱短振-Light

UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleLight];

[generator prepare];

[generator impactOccurred];


b.中等短振-Medium

UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleMedium];

[generator prepare];

[generator impactOccurred];


c.明显短振-Heavy

UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleHeavy];

[generator prepare];

[generator impactOccurred];


( 2 ) 长振动震感

代码

AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);


( 3 ) 3D touch震感

代码


a. Peek 触感

AudioServicesPlaySystemSound(1519);


b. Pop 触感(比 Peek 震感强,且比「UIImpactFeedbackGenerator震感」中的 Heavy 还强烈)

AudioServicesPlaySystemSound(1520);


c.三次连续短振(三次 Peek 触感连续振动)

AudioServicesPlaySystemSound(1521);


参考书籍:

《微交互》 作者: 塞弗 (Dan Saffer)


转自:站酷-Ballen贝林

Lottie 动效设计

纯纯

动效设计,是 UI 设计当中不可或缺的一环。大家对动效的认知也从最初认为动效只是为了美观酷炫,到逐渐理解了动效对于提升用户体验和产品需求的重要作用。而导致这种认知的转变,相当一部分原因是因为硬件性能的发展和动效输出方式的优化。

因为动效实现的过程就是设计师和开发之间互相博弈的过程。设计师可能通过 AE 或者其他工具做出炫酷的效果,和开发对接就懵了。要么无法实现,要么极其复杂。毕竟开发工程师要通过代码把动效实现出来,设计师得用开发所能理解的语言来描述。就如同你能完美地解出一道数学题一样,让你把解题思路教给别人,你可能就没那么顺畅了。一方面取决于你的表述能力,而更重要的是对方的理解能力。过去所广泛采用的通过动效标注输出给开发的方式,都存在还原度的问题。很多时候还原度达到 80% 可能都算比较好的了。

而今天要说到的 Lottie 不仅可以 100% 还原动效,而且无需动效标注。直接通过 AE 输出动效文件给开发。开发人员直接调用,然后完美还原。

Lottie是什么?

Lottie 是 Airbnb 开源的一个动画渲染库,同时支持 Android、iOS、React Native 平台。Lottie 支持渲染播放 AE 动画。通过 AE 插件 bodymovie 导出 json 文件作为动画数据。


Lottie有什么用?

Lottie 可以应用在 UI 设计的很多场景中。以下举出几个常用例子。

1. 动态启动页


2. 动态图标/按钮

3. 空页面




以上仅列举了部分常用案例,其实 Lottie 的应用场景远不止这些。在 APP 的多个模块中都可以运用,那么我们要如何将 Lottie 运用在自己的工作项目中呢?那就要了解 Lottie 的原理了。


Lottie的原理是什么?

前面已经提过 Lottie 是 Airbnb 开源的一个动画渲染库。我们可以理解为它是一个多功能的视频播放器,开发人员需要将这个播放器部署到相应的环境中。然后设计人员提供视频(动效文件)给开发人员,让开发人员按照要求播放视频文件,即可完成动效的应用。


假设该按钮动效一共10帧,整个按钮切换分为两部分,第一部分:从菜单切换到关闭(1-10帧);第二部分:从关闭切换到菜单(10-1)。我们可以让开发通过以下控制方式,完成我们想要的效果。

按钮动效默认显示第1帧(菜单状态),点击按钮以后开始播放动效,动效播放到第10帧的时候停止,并停在第10帧(关闭状态)。当按钮为关闭状态(第10帧)时,点击按钮以后动效从第10帧倒放到第1帧(关闭状态),并停在第1帧(菜单状态)。

通过以上方式就完成了对一个动效按钮的控制。而日常工作中我们可以灵活地运用多种控制方式。

首先动效的触发,可以是一次交互事件,比如点击、滑动;也可以是监听到了广播,比如网络异常等。而触发以后的动效控制也多种多样,可以从开始播放到结束,也可以进行倒放;可以循环播放某一段动效;也可以从某一帧播放到另一帧,或者某一个时间点播放到另一个时间点;更多的控制方式需要大家在工作中慢慢挖掘。

Lottie支持的AE属性

Lottie虽然能够满足多种场景需要,但是并非支持所有的 AE 效果。设计制作时,需要考虑该效果是否支持。否则,会导致出错或者所用效果无法生效。



上图为 Lottie 支持的主要 AE 属性,此处有删减掉部分不常用的属性。可以打开以下链接查看完整版http://airbnb.io/lottie/#/supported-features

需要注意的是文档中虽然说支持渐变,但是会出错,所以大家在使用矢量图形时,请勿使用渐变效果。关于渐变效果的修复后续文章会提到,官网以后也会修复相关问题,但是没有确切时间。

通过上图我们可以了解到,Lottie 支持的 AE 属性基本包含以下几类:

  • 基础的形状比如圆形、矩形、星形等,也可以支持钢笔工具绘制的矢量形状和从 AI 中导入的矢量图形。
  • 支持位移、大小缩放、透明度、旋转、修剪路径、蒙版、遮罩这些基础动画属性。
  • 支持图层间建立父子级关系(只支持图层与图层之间建立,当图层的属性之间建立父子关系会失效,比如 A 图层可以和 B 图层建立父子关系,但是 A 图层的位移属性和 B 图层的位移属性单独建立父子关系则不生效)。
  • 支持速度贝塞尔插值,可以搭配 Flow 插件生成各种缓动效果。
  • 支持导入图片。
  • 支持时间拉伸和时间重映射来通知时间和速度。

(原文章来源于:https://www.uisdc.com/lottie-dynamic-design-guide





如何通过竞品分析来解决问题

鹤鹤



1.竞品分析的定义


从专业的角度来讲,竞品分析是通过系统的分析方法去全面了解市场上位于前列的竞争对手的产品,能够让设计师快速了解自家产品所处的位置,从而来针对性的改进自身产品的一个方法。简而言之,就是要站在巨人的肩膀上去思考,以竞品分析的形式去学习其他优秀的产品,从而解决自身产品所存在的问题。



2.为什么要去做竞品分析


做一件事情之前一定要思考做这件事的价值和意义,只有你明白其重要和必要性,你才会知道该怎样去做这件事情,而不是一提起竞品分析就找一大堆专业框架和术语然后去填内容,这样虽然产出了很多,但是关键性的内容点其实还是不清楚。


说直白点,你需要通过这篇竞品分析去解决你工作或者创作中遇到的什么问题,带着疑惑和目的去分析在我看来是更有效率的。因此特分为以下几种情况:



因此我们要学会根据自己的不同需求,去制定不同的竞品分析方案,让分析的内容更聚焦。作为UI设计师来讲,通过竞品分析为自己的设计方案提供科学的理论依据,为自己赢得话语权,能够更好地科学产出内容。



3. 如何寻找竞品:


竞品的选择非常重要,如果找到错误的竞品,那么你所分析的一切结论可能都引向了一个错误的方向。从而让自己的努力都白费。那么怎样才能找到合适的竞品呢?分为以下三类情况


A.核心服务与目标用户相同的产品(直接竞品)


这一点是广大设计师都能想到的范畴,也称为直接竞品。即提供的核心服务、市场目标方向、客户群体等与我们的产品基本一致,产品功能和用户需求相似度极高的产品 。往往是通过业务关键词就能直接搜索到的竞品,比如音乐类产品,那么直接在应用商店,或者通过专业网站(易观千帆等)搜索关键词“音乐”即可搜索出排行前列的竞品。



B.目标人群不同,但功能模块和服务接近的产品(间接竞品):


这类竞品可以找起来并不那么直接,可以通过对应功能去逆推拥有此功能的产品,并进行相关搜索。


如果想不到,可以通过“人人都是产品经理” “36氪“等关于产品资讯的网站进行查询,甚至可以通过百度指数来进行发散思维,看一下跟你关键功能相接近的都有哪些。比如你研究外卖产品,除去饿了么和美团等直接竞品,你还可以在分析用户下单和购买流程中,去分析淘宝和京东等购物产品,也能得到一定的帮助。



C.目标人群和服务都不同,但交互或者视觉有可以参考的产品(关联竞品):


这里所选择的产品,定位和领域可以都完全不同,但是你要从这款产品中得到启发,从而让你的产品能够拥有其他竞品不同的特点或者功能模块。有一个很典型也熟知的的案例,就是卫龙辣条的设计案例,在卫龙推出之前,可以说是没人会想到辣条会和高端扯上关系,但是卫龙就是借鉴与其领域完全不同的苹果设计去做,从而在包装上独树一帜,从而吸引人们注意取得成功。因此通过不同领域跨行业的产品有时候也可以找到不错的思维方向。



4.如何进行商业分析:


进行商业分析,这里只提及到三个基本选项:商业背景、产品盈利模式以及用户人群。通过这三个基本要素,你能对所研究的竞品有一个大概的了解。当然深入了解还需要其他平台(官网网站、36Kr等)来查阅更多的相关性资料,下列是对QQ音乐商业背景的简要分析。




5. 如何进行交互分析:


我们在做交互分析时,我们需要进行必要的两点分析:用户路径和交互维度。


用户路径:指用户从某个开始行为事件直到结束事件的行为路径,即用户在使用某个功能的完整流程称之为用户路径。我们需要去观察和体验在这一个完整路径中涉及到的页面、动效、视觉到底是怎样的。就拿登录页来说,我们看看排行前列的竞品是怎么做的。通过相应的体验和对比分析,我们就可以找出这其中符合我们产品性质的最优解,从而提高我们的登录注册效率。



交互维度:交互维度和用户路径有所区别。这一层需要弄清楚产品的核心路径,从而能够更好的解析产品各个层面的逻辑关系,这就需要我们以用户的角度去逐个体验,整体联系,随后记录下来。使用过程中我们也要去观察APP中的交互小细节,怎样分享的,怎样展示的,比如音乐软件进行截屏后和点击喜欢按钮后的反馈是怎样的。




6. 如何进行视觉设计:


在进行视觉分析时,有一点需要注意,如果你需要详细分析某一模块,请用手机尺寸截图后拿到设计软件中进行测量,不要光靠眼睛观察,很多时候的小细节我们只有在手动测量后才能感受到,比如控件的尺寸大小,间距的大小,以及颜色的取值,都需要精准测量后才能得出靠谱的结论。


怎样进行视觉分析呢,我比较推荐从一个app 视觉语言最基本的五个维度去分析,即“形色字构质”



最近以音乐APP进行了一次竞品分析,以QQ音乐APP来举例进行分析(当然竞品分析并不能只分析一个,而应该根据你需要的功能找多个竞品进行对比分析,才能看到更多的维度,这里只拿一个举例):




6.1 图形元素的分析


首先我们以形进行分析,形即图形元素,具体来讲即LOGO和图标。LOGO的更新在2018年10月以后已完成更新。新版的主要图标整理归纳如下:



可以看到整体的图标色调更加清新,造型设计更加圆润,未选中状态的线形图标则采用4px的描边,粗线形描边让整体界面风格显得更加稳重的同时对用户的干扰也较小。新版的图标界面让界面保持稳重的同时又富有活力。



6.2 色彩体系的分析


其次则是对色这一类别进行分析,颜色其实是对于品牌调性有很大的影响,比如一想起QQ音乐就知道主色是绿,一想起网易云音乐就知道主色是红,对用户的记忆点更深刻。通过截屏测量进行分析,得出整体的颜色如下(由于手机屏幕的色差原因,不可避免会有些许误差)


从局部来看,分析颜色最重要的一点就是能够弄清楚一个页面中哪些元素用的是同一种颜色,观察成熟的产品是怎样用颜色(和字重)去区分层级关系的。



可以看到,用主色和三种辅色即可区分界面的整个层级关系,由此思考我们在制作自己的界面时也避免用太多的颜色,造成界面太过花哨。(颜色的具体色值可能有些许误差,更重要的是看颜色层级关系)



6.3 字体体系的分析


接下来是字的分析,字即字体体系,可具体到字体和字号。设计中字体一般来讲是苹方,字号则根据设计师的定义来进行相应的规范。通过页面的测量分析,可以拿到其具体的字号大小层级分析。(以下定义基于750的设计尺寸)



对于单个界面的分析,个人觉得要带有思考的眼光去看待,比如在首页中字号其实分配过多,像“更多”这种按钮就不应该再分一个字号,字号太多整体就显得有一点点乱了。虽然大厂的设计能在一定程度上给予我们参考,但并不是说他的每一个设计都是正确的,我们要学会用审视的眼光去看待出现在身边的设计。



6.4 界面构成分析


界面构成即界面的元素大小以及他们的布局,例如有时候我们不知道一个标准的搜索框的长宽具体多少才是合适的,这就需要我们去分析其他成熟的商业产品,通过测量来知道具体的数值,从而督促自己进行正确的设计。这里选取了一个默认的首页进行分析。



将一个页面用右边的形式进行原型化,去掉干扰可以把结构看得更清楚。间距之类的也可以通过软件进行测量。可以看到QQ9.0版本的去线化设计,利用大间距来区分各个模块,去掉了其他的干扰元素,整体的界面模块看起来非常整洁轻盈以及富有呼吸感。统一的圆角化设计也让整体设计符合流行趋势,显得更活泼。



6.5 质感与风格分析


关于界面的质感则是不同于扁平化的一个设计,即有的页面在你看来细节会更丰富,层级会更深。界面质感通过渐变,叠加,透明度等不同方式来呈现,比如在QQ音乐中的会员界面卡片,则体现了微质感:



上方的会员卡片就加入了渐变和图案叠加的方式来为卡片增加质感,让整个界面显得更精致。当然,叠加的图案都是与内容相关的,不能为了叠加而叠加。包括下方的权益图标,也采用了渐变的方式来让整个图标显得更精致和有质感。我们再处理质感的时候也可以用这种方式来进行。


以上通过“形色字构质”来分析是属于单个分析,相当于去拆解一个成熟产品中的每一个细节点,从而去学习和吸收。我们还要学会进行对比分析。把单独某一个功能模块拎出来,通过不同类型的对比从而归纳出这一类的设计方法和样式,进而总结相应规律。


比如某一天你需要设计一个歌单列表,你此时就需要分析所有TOP排行的歌单列表,看看分别都有什么,从而总结归纳出结构来,再进行分类。



通过分析提炼,形成以下结论并进行相应的概念风格展示设计:



这样,我们最后制作出来的方案才能涵盖比较全的解决方案,从而能够更好的助力设计产出。上图的产出可能稍显简陋,但只是做一个简单的示例,真正的产出应该更加有细节和落地,也要结合自己的工作需求做相应调整。



7.关注竞品的版本迭代和用户评价:



关注版本更迭,阅读竞品版本更新的详细说明,你可以从中得出版解决了什么问题,提升了哪些体验,添加了哪些功能,融合了什么流行的设计趋势。产品迭代就是团队通过用户需求对某个产品不断完善的一个过程。迭代对于一个产品来说是至关重要的,一个产品如果不想被对手超越,就必须不断的对版本进行更新迭代。


除了关注具体的内容,你还可以观察版本更新的提示信息,例如夸克浏览器在每次更新时总会用富有趣味的文案来打动你,从而让你更加情愿去更新,提升新版的使用率。


用户评价则更不用说,产品的最终服务对象就是用户,用户评价的重要性自然不言而言。不过我们要客观辩证地去看待用户的评价,吸收好的建议,屏蔽无脑的意见,从而能够正确地迭代版本。用户评价的查看可以使用App Store或者用户评价网站(https://appbot.co/)去查询。



总结


以上的篇幅较长,看下来可能会有一些累,那么此篇文章提及到的点在这里回顾一次:


1.竞品分析的定义-站在巨人的肩膀上去学习;

2.为什么做-基于自己的目的去进行对应的竞品分析,分析的最终目的是解决自己在设计过程中遇到的问题;

3.竞品分析分为三个层面:视觉分析、交互分析以及商业分析;

4.怎样进行商业分析(商业背景、盈利模式、用户人群);

5.怎样进行交互分析 (用户路径、核心路径、交互细节);

6.怎样进行视觉分析 (从“形色字构质”五个维度去分析以及如何对比分析应用);

7.竞品的迭代和用户评价的重要性。


自己有一个小习惯,看完每一篇文章,总会告诉自己一定要在脑海里回顾一遍,思考一下这一篇文章到底有什么观点是自己之前没有想到的,哪怕只有一点是没触及到的知识盲区,那么这篇文章之于自己就是有意义的。所以希望大家看完能有些许收获那便是最好的了。


写这篇文章的目的是给自己的竞品练习做一个总结,以输出倒逼输入是一种比较有效的学习方法。但基于自己的水平有限,在某些分析的地方仍然存在不足和疏漏之处,希望大家谅解并及时交流。感谢大家看到这里,希望大家每天都进步~


转自:站酷-进击的M 

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


日历

链接

个人资料

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

存档