首页

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

分享达人

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


转自:站酷-四喜sixi 

10天,5个百度Doodle,成千上万的抗“疫”英雄

分享达人

他们是“最美逆行者”

 

前几天,当大家打开百度首页时,可能发现了一些小变化:搜索框上方不再是熟悉的红蓝标志,而是展现出了一系列人物形象。


 


这些人物都是一直奋战在抗击新冠肺炎疫情一线的“最美逆行者”——我们想用这样的方式,向他们致敬。

 

 

2月9日-2月10日,致敬抗疫医护人员

 

 

2月11日-2月12日,致敬抗疫志愿者

 

 

2月13日-2月14日,致敬抗疫建设者

 

 

2月15日-2月16日,致敬抗疫专家组

 

 

2月17日-2月18日,致敬抗疫解放军

 

当大家点击这些 Doodle 图片时,会进入相关的战“疫”专题内容页,在这里可以实时了解抗疫英雄的资讯动态。



医护人员、志愿者、建设者、专家组、解放军,他们用坚定的信念和坚毅的身躯,为这场战斗筑起了最坚固的防线,守护着无数人的生命安全。我们向这些英雄致敬!


此前,我们向广大网友发起了“抗疫英雄系列 Doodle”征集活动,希望各界设计师用手中的画笔为抗疫英雄们创作特别的百度 Doodle,让更多人看见疫情中的勇气与希望。

 

最终,五组致敬 Doodle 在百度首页上线。除此之外,我们还收到了26幅来自百度网友投稿的设计作品。谢谢大家的用心创作!

 

一起来欣赏吧!


 

蔡依彤

 林文煌


刘昱


轻抚淡抹素人妆


 相超



 

蔡依彤

 

林文煌

 

麦芽



 董一孛

 

林文煌


刘昱

 

姚思思

 

赵会娟

 



 不将就


 李小兰


 李钰


 林文煌


 孙红花


 陶泽崧


 严安琪


 张晶




 冯胜方


高旭

 林文煌


 杨晓婧


张晶



在这场疫情狙击战中,不论是什么角色、什么岗位,都能贡献自己独特的力量。而这些精美的 Doodle 设计作品,正向人们传达了必胜的信心和能量。我们衷心感谢所有设计师的用心创作.


除了通过百度 Doodle 为抗疫工作鼓劲,我们还运用技术的力量,专为疫情防控研发了各种产品和服务,希望为大家带来实用有效的帮助,为战“疫”贡献一份力量。

 

我们成立了3亿元的疫情及公共卫生安全攻坚专项基金,用于支持新型冠状病毒等新疾病的治愈药物筛选、研发等一系列抗击疫情工作。


我们上线了“拒绝野味”的搜索提示,在百度 APP 搜索“蝙蝠”、“果子狸”、“穿山甲”、“豪猪”、“狍子”、“蛇”、“野猪”等关键词时,大家都能看到“不可食用”的警告。


从百度“问医生”免费在线咨询,到新冠肺炎智能自测工具;从“疫情小区”地图,到患者同乘查询;从免费开放智能外呼平台,到 AI 体温检测落地北京清河火车站……百度一直在行动。


当所有的决心、爱心和信心汇聚在一起,我们知道,阴霾和灰暗一定会被驱散,春暖花开的日子一定会到来。众志成城,我们共渡难关!

转自:站酷-百度BMD

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

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

分享达人

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

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

 

 

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

 

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

 

 

一、标签栏图标规范

 

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耍家 

交互设计:如何做到惊喜?

分享达人

保持好奇,巧妙融合,追求卓越,自然而然


上一篇,探讨了如何做到品质。这一篇,探讨下如何做到惊喜。

一家之言,未必全面,甚至未必正确。欢迎交流探讨。


01
交互设计的惊喜,是什么?

之前的文章,有简单定义过交互设计的“惊喜”,即为:超出用户预期,并让用户开心。

具体而言有两类,分别是:小惊喜、大惊喜。

1 小惊喜

所谓小惊喜,是指一些颇具趣味性或人文属性的交互设计小细节。


先说趣味性。常见的有两类,第一类是比较好玩的动效,第二类是一些小功能。第二类有时也会包含第一类。

动效这块,大家比较熟悉的,有 iPhone 上删除应用前图标的抖动,仿佛是吓的发抖,也可能是在摇头求饶;还有移动端登录 B 站、输入密码时,动画人物的捂眼捂脸动作。

(B 站登录页面)

小功能这块,也可以分成两类。一类是隐藏的小功能,一类是有趣的小功能


很多隐藏功能,头几次用的时候,多少会有一些惊喜之感。

比如在订阅号消息列表页,某个公众号你已经几个月没看过,对它失去了兴趣和信任。这时,尝试长按这个公众号的头像或名称,会呼出一个包含“删除消息”和“取关”功能的弹窗。

(订阅号消息列表)

还有些隐藏功能,既能让用户觉得惊喜和方便,又能引发用户思考。这种思考,可能会让用户感叹设计之妙,也可能也会给用户一种猜对谜语的欣喜之感。

比如用墨刀的时候,尝试按数字键 1,会呼出“内置组件”这个使用频率非常高的功能,会让人觉得墨刀很聪明。

如果再仔细看一下,会发现,“内置组件”的缩略图标,和其他 4 个诸如“我的组件”、“图标”等功能的缩略图标,并成一列。这 5 个缩略图标的排列顺序(上到下),和它们快捷键("、"键和数字键1、2、3、4)的排列顺序(左到右),是完全一致的。不得不说,这是一个简单又巧妙的设计。


再比如朋友圈里,某个不熟的好友每天都发集赞的小广告,搞的我们不胜其烦。长按其头像,会呼出设置权限(屏蔽等)的功能。

有意思的是,长按好友名字,则不会呼出这个功能。要知道点击头像或名字是都能进入好友主页的;另外刚才那个例子,长按公众号头像或名字,也都能呼出取关的弹窗。

个人的理解,生活中,我们用力长按一个人,通常是表达强烈不满,比如打架时。比起长按名字,长按头像更像是长按真人,所以也更能表达我们的不满。


说完隐藏的小功能,再说下有趣的小功能。比如微信聊天里的扔骰子、石头剪刀布,微信给朋友发生日快乐后漫天飘落的蛋糕,拍照软件里的贴纸,等等。

最后说下带有人文属性的交互设计小细节。常见的有如下类型:帮助弱势、关照情绪、表达情感、保护隐私。


帮助弱势这块,比如 iPhone 的辅助功能,里面有针对视力障碍的放大镜功能、有针对不识字群体的旁白功能。

关照情绪这块,很重要的一点,就是避免引起用户的负面情绪。比如微信的删好友是单方面删除,被删时我们很难察觉到,而且微信也不会通知我们。个人觉得,微信之所以不通知我们,其中一点,就是不给我们添堵。类似的还有,微信消息没有“已读”功能,这就大大减轻了接收者的回复压力。

表达情感这块,比较为人所知的例子,5 月 20 号这天,微信红包的限额,从 200 元升到了 520 元。还有一个例子,在微信聊天里发一个“ohh”,长按并点翻译,结果也是一个惊喜。

保护隐私这块,比如借助 iPhone 的“引导式访问”功能,可以让小朋友只能访问你的某个视频应用来看动画片。再比如别人用你电脑的时候,如果你不想让对方看到你的微信,就可以通过手机微信来锁定或退出电脑版微信。

2 大惊喜

所谓大惊喜,是指那些系统性大创新,并且能够引领潮流、代表未来的交互设计。通常而言,这些大惊喜,最开始给用户的感觉,就是酷。

iPhone 就是典型例子之一 。

2007 年的初代 iPhone,带来了当时的大屏幕:3.5 寸屏幕,以及纯触摸屏,和极为灵敏的触控体验。

2011 年,Siri 同 iPhone 4S 一起问世,为我们带来了语音交互。如今,在 100 元就能买到品牌类智能音响的情况下,依靠语音交互的智能音响也在慢慢走入寻常百姓家。

也许后乔布斯时代的 iPhone 创新不如以前,但不可否认的是,时至今日,iPhone 依然在引领潮流,在给我们大惊喜。比如这几年流行的手机无线充电和以 AirPods 为代表的极简的无线耳机。

以上是比较广为人知的交互设计,还有一些不太为人所知的设计。比如在家里网购一条床单,但是不知道床的尺寸,家里又没有尺子。这时,打开 iPhone 里的测距仪这款 App,就可以量出床的尺寸,会不会觉得有点酷。

(测距仪 App)

微信在引领潮流方面也有一些建树,比如极大的普及了二维码和扫一扫。小程序作为一种体验接近原生 App、同时又不用下载的产品,也正在引领新一轮的潮流。

还有一个比较酷的功能,就是以图搜图。笔者最早用过百度和谷歌的相关功能,主要是在电脑上搜索相似的图片,使用频率极低。

假设一个场景,比如在路上看到一个陌生人的外套很好看,但又不好意思上前问,就可以拿起手机,利用淘宝的拍立淘功能,拍张照就能马上看到相同或相似的商品。

如果淘宝上没有搜到类似商品,还可以用微信的扫一扫识物。和拍立淘相比,区别之处有两点。第一,不用拍,直接能识别,不过通常得等 1-3 秒;第二,识物结果里面,除了商品,可能还会有百科词条和资讯。


02
交互设计:如何做到惊喜?

个人觉得,有 4 个要点:既要有好奇心,又要有卓越心;既要天马行空,又要保持自然。

听起来可能有点乱,且听笔者一一道来。


1 保持好奇心

笔者观察身边读小学的小孩,发现,当大人聊天时,特别是谈正事时,小孩特别喜欢坐在旁边听,而且听的很认真。小孩有时也会说两句,或是问问题,或是发表自己的看法。

看得出来,小孩对成年人的世界,怀有极大的好奇心。实际上,不止于成年人的世界,小孩对周遭世界都有比较强烈的好奇心。

整体而言,成年人对周遭世界的好奇心,远不如小孩。我们互联网从业者也不例外。

好奇心和交互设计,有什么关系?

交互设计,某种程度上,也是一种创作。好的创作,一定来自生活。这就需要我们去观察生活。

观察生活,非常重要的一点,就是好奇心,对周遭人、事、物要有足够的好奇心。

比如上文提到的例子,在 iPhone 上删除应用前,应用图标会抖。这种抖是一种趣味隐喻,既可以理解成吓的发抖,也可以理解成摇头求生。如果对生活没有足够的好奇心,是很难留意到这种生活细节,并把它们作为一种隐喻运用到交互设计中的。

以上是关于好奇心,还有一种特质,也是在小孩身上表现突出,同时也和本文主题有关,那就是:童趣。

还是上文的例子,在 B 站 App 上输入登录密码时,动画人物会捂眼睛。这个设计,可能不会打动所有用户,但至少一部分用户会觉得比较有趣。如果我们内心没有一点童趣,可能也会觉得,这个设计,没啥意思。

玩是人的天性。对于比较好玩的交互设计,大部分人是比较容易产生共鸣的。实际上,据笔者观察,我们大部分从业者是有童趣的。我们比较缺的,是好奇心。

那么,怎样判断自己是否拥有足够的好奇心,其标志是什么?

个人观点,有两个标志。第一,是对与个人利益无关的生活小事的关注,远多于对个人利益本身的关注。第二,观察和思考,远多于评价和自大;追本和溯源,远多于偏见和傲慢。

为什么会提到个人利益?

因为,通常而言,个人利益,尤其是短期利益(比如少花时间设计和修改原型),往往会和用户体验存在一个此消彼长的关系。

如果过于关注个人利益,不仅很难照顾到用户体验,甚至会伤害用户体验。至于给用户带来惊喜,就更无从谈起了。

回到现实当中。在时代洪流面前,好奇心的两个标志,显得很难,该如何实现?

关键在于找到背后的源动力。这个源动力,在笔者看来,有两点,分别是:求知若渴、淡泊宁静。


求知若渴,可以源源不断的驱动我们去观察、去思考万事万物的规律和联系。

淡泊宁静,正如诸葛亮在《诫子书》中所说,“非淡泊无以明志,非宁静无以致远”。人的心力和精力终归是有限的,如果我们沉迷名利、物欲、享乐,就难有兴趣和精力去琢磨万事万物了。

所以,只要找回自己童年的那种求知若渴,同时修身养性到淡泊宁静,这份好奇心,就会回来。

2 巧妙融合

某种程度上,很多带给我们惊喜的交互设计,都是一种巧妙融合。

笔者把这种巧妙融合,初步分成了三类,分别是:简单融合、直接融合、委婉融合


简单融合,最常见的就是隐藏功能。把一个较为简单的操作动作,比如长按、双击、下拉、左滑等,和一个合适的功能,融合在一起。用电脑时我们常说的快捷键,也属于这一类。

通常而言,操作对应什么功能,讲究的是合适,并无固定章法束缚。比如在微信朋友圈,发表文字的功能可以靠长按(相机图标)唤起,设置权限的功能也可以靠长按(好友头像)唤起。所以,简单融合这块,可供我们发挥的空间很大。

另外,简单融合最常见的形式——隐藏功能,既实现了界面的简洁,又带来了一定惊喜。

简单融合,既简单,又实用。建议大家充分开发这一块。

直接融合,是指将生活中的趣味性,直接搬到软件中,搬到交互设计中。比如微信聊天中的扔骰子、石头剪刀布,以及漂流瓶、抽奖等。

这一类融合,有点像商场里的电玩城,虽然我们不会经常去玩,但确实比较好玩。

委婉融合,是指用明喻或隐喻的手法,将生活中微不足道的一些细节,移植到交互设计中。

这种移植,有时是直白的。比如 Mac 上打开应用时,其图标会在 dock 栏里有规律的弹跳,这会让我们联想到皮球的弹跳。

这种移植,有时是隐晦的。比如 iPhone 上删除应用前,其图标会抖。这种抖,是害怕还是求饶,任凭我们想象。

这种移植,有时是无声的。比如在朋友圈,要想呼出隐藏的设置权限功能,只能长按头像,长按名字则不行。这个设计,不乏想象空间。如果不尝试长按名字,则不会发现这个细节。

委婉融合,有时会带一些趣味性。更为重要的是,它能够引发我们的思考和想象,所以是一种很出彩的融合。这种融合,也会赋予交互设计,一种禅的味道。

整体而言,笔者非常推荐委婉融合。

3 追求卓越

如果目标是小惊喜,则保持好奇心、并做到巧妙融合,基本足矣。

如果目标是大惊喜,则需要雄心壮志,需要舍我其谁,需要追求卓越。

日常工作中,可能会有这样的对话。“这个动效/功能,实现不了”。

大惊喜里的几个例子,比如初代 iPhone 的触控体验,iPhone 里的测距仪,微信的扫一扫识物。这种设计,意味着要修一条最好的长城,背后往往有很多技术难题要攻克,有很多脏活累活要做。

如果团队文化就是做出最优秀的交互设计,那么,“实现不了”这句话,估计就听不到了。取而代之的,可能是:“还在研究中”,“下个大版本能上”。

4 自然而然

提到惊喜,还有一款值得研究和学习的产品,那就是锤子手机的 Smartisan OS。

个人观点,在小惊喜方面,Smartisan OS 颇有建树。在大惊喜方面,Smartisan OS 也进行了一些值得学习的探索。

先说小惊喜,比如华丽而细腻的桌面翻页动画,比如四指横划桌面可以切换桌面背景。还有一些贴心的小功能,比如静音可以设置时间,比如方便的长截屏。

(静音可设置时间)

(长截屏)

再说大惊喜。2016 年 10 月发布的一步和大爆炸,是比较大比较系统的功能,在当时也很新。锤子公司也一直有宣传这两个功能。所以相对而言,这两个功能是 Smartisan OS 的大惊喜。

笔者的备用机是锤子手机,身边也有朋友在用锤子手机。以一步为例,这个功能,笔者体验过很多次。但平常很少用,身边朋友的情况也类似。

(一步)

根据使用情况和主观感受,个人觉得,一步这个大惊喜,还存在进步空间,主要有两个方面。

第一,宏观层面。一步作为新生事物,好比一颗新种子。种子破土而出时,是一颗嫩芽,而不是一棵大树。新生的一步功能繁多,犹如一棵破土而出的大树,一方面有违自然规律,另一面因为功能繁多,很多用户无法一下子看懂,看不懂可能就不想用了。

第二,微观层面。一步这棵新大树,结了很多不同的果子,比如拖拽图片到其他应用、切换后台应用、展示最近图片/文件等。这些果子,是用户真正需要的吗?这个是要存疑的。

比如拖拽图片到朋友圈就能发朋友圈这个设计。通常而言,我们发到朋友圈的图片都是精挑细选的,会占用一定量的时间,比如旅游或聚会结束后发的照片。一步解决的是效率问题。发朋友圈的时候,少点几下这种效率问题,优先级是比较靠后的,我们没那么在乎。

还有拖拽图片/文件这个交互动作,大家通常在电脑上用的比较多,在手机上是没有这个习惯的,实际上应用场景也少。在手机上,大家一般只习惯拖拽应用图标。

还有切换后台应用这块,大家第一个想到的,一定是系统自带的,已经用惯了。而且唤起速度比一步快,点击面积也比一步大。

总的来说,微观层面上,比较缺让大家能马上想到一步的功能点。

最后,总结一下。对于领先时代、引领潮流的交互设计,需要做到自然。

具体而言,就是,大惊喜是一种系统性的大功能,好比一棵大树。这棵大树,最好有一个从种子到果子的生长过程,这样最自然,生命力也会最旺盛。

因为,从破土而出的嫩芽阶段,就可以通过用户反馈和数据来检验,这种嫩芽,是不是真的对用户有价值。如果价值不大或没有价值,还可以再调整。如果长成大树结满果子,再去调整,就很难了。


结语

交互设计小细节,如果有一定的趣味性或人文属性,则是小惊喜。

系统性工程的交互设计,如果最初感觉很酷,而且能引领潮流、代表未来,则是大惊喜。

始终保持孩童身上那种非功利的好奇心,用心观察并思考生活中的小事;

将生活小事和交互设计巧妙融合起来;

以上两点,可以帮我们做出小惊喜类的交互设计。

追求卓越,独立思考,做最酷最好的交互设计;

酷是结果也好,是目标也好,都不是最重要的。最重要的是,避免刻意和心切。酝酿大惊喜,犹如培养一个新生的孩子,需要投入极大耐心和精力,需要让孩子自然成长。没有家长会教半岁的孩子唱歌、把 3 岁的孩子送到高中念书。

再加上以上两点,可以帮我们做出大惊喜类的交互设计。

最后,用爱因斯坦的一句话来共勉。

想象力比知识更重要。


“抗击肺炎”数据产品体验分析报告

分享达人

站在设计师的角度去分析这场战疫下各大互联网公司快速响应产出的数据产品“抗击肺炎”专题。

转自:站酷-Yuki_yee

实战:如何利用栅格系统做响应式设计- 后台设计经验总结(2)

分享达人


左右布局响应策略动态演示。考虑到gif被压缩后效果不理想,所以做了一小段视频来帮助大家更好的理解响应策略。视频如果看着不清晰,选择清晰度为1080p蓝光观看即可

Image title

Image title

一、什么是响应式?

按照本人自己的理解,响应式就是通过合理的设计方案配合规范的技术实现策略,使同一个Web页面在各个终端(设备)不同分辨率屏幕上都能有最佳的用户体验。

Image title

这里说是用户体验而不是视觉效果是因为用户体验包含了性能、交互、效率等多方面内容,也就是说,对于一个线上的响应式页面,我们不仅要关注视觉上看到的,也要关注我们操作、使用时的感受,这些综合因素最终影响着用户使用后台系统时的效率与体验。而这里我提到的“合理的设计方案”就是本篇文章跟大家分享的重点:如何利用栅格系统完成后台页面的响应式设计。对于交互与性能方面内容,本篇文章不做介绍,因为两者涉及到我不太了解的技术相关知识。我提出这个观点主要希望大家在执行设计时,能有更全局的考虑,多跟交互与开发沟通,协力打造更好的用户体验



三、响应式的目的是什么?


后台系统做响应式设计的目的:提高屏幕利用率,最大化操作效率


1、提高屏幕利用率最简单的理解就是在大屏幕上显示更多内容,在小屏幕上通过数据筛选展示关键信息。一直以来大家普遍认为移动端碎片化严重,但实际上桌面端设备的分辨率也是有着不太均匀的分布,而随着新设备的更新,更多高分辨率屏幕不断加入,这种碎片化的趋势会更加明显,因而要想利用好每一块屏幕,让不同分辨率的用户都有好的体验,显然传统固定的布局是做不到了。

Image title


2、后台系统的应用特性,决定了响应式在后台设计中具有很高的实用价值。后台系统有两大主要功能:查看与操作。查看主要是各种数据,是系统自动生成的内容;操作是需人工干预、人工决策的任务,查看的数据为操作提供了依据,而操作支撑了公司或部门业务的正常运行。所以后台系统设计最基础的目标之一是如何通过良好的数据展示帮助用户提高操作、决策效率,而充足的展示空间显然是实现这一目标的基础,响应式设计通过为每个分辨率设定合理的版式布局,使数据在每块屏幕上都尽可能展示的最佳。优化后的数据展示,帮助用户更获取信息,从而提高了用户使用后台系统的效率与体验。

Image title



四、为何要利用栅格系统来进行响应式设计


响应式可以响应的前提有两点:1、页面布局具有规律性、2、元素宽高可用百分比代替固定数值,而这两点正是栅格系统本身就具有的典型特点,所以利用栅格系统进行响应式的设计是顺理成章的,也比较快捷,所以响应式与栅格化天生一对好搭档


栅格系统页面布局具有规律性、元素宽高可用百分比表示

Image title



五、利用栅格系统完成后台页面响应式设计的步骤


1、确立设计稿基准尺寸


设计稿基准尺寸是指我们从哪一个分辨率开始设计,也就是我们新建画板时画板的尺寸应该是多大。而这个尺寸确定的主要依据是我们后台系统所面向的主要用户的屏幕分辨率;我们分两大类情况来讨论这个问题。


(1)、如果我们的系统是给公司内部员工使用,由于公司批量采购设备的原因,公司内部员工的屏幕分辨率往往会比较统一,这种情况下我们需要拿到这个数据,然后以它作为基准尺寸开始设计。因为虽然响应式设计的目标是让页面在每个分辨率下都有最佳的体验,但实际开发中毕竟存在损坏,设计还原很难100%,因而大多数情况下还是基于基准尺寸的设计与开发,在用户端显示效果最佳、体验最好

(2)、如果我们的系统是平台级面向全网用户,或者虽然是公司内部使用,但是并不能统计到内部员工屏幕分辨率情况,就可以以1440*900作为基准尺寸开始设计。从统计数据来看,目前国内PC端用户屏幕分辨率排名前三的分别是1920*1080、1366*768、1400*900;1440的尺寸实际上是处于中间位置,如果以它为基准设计,最终向上向下响应适配后,相对误差最小,从而达成用户体验的最大公约数。

Image title



2、确定页面布局结构


页面的布局结构,是页面基本框架,后续的设计都是在这个大的框架下完成的,所以确定页面基准设计尺寸后,需要跟交互设计师或产品经理配合,根据实际业务情况讨论确定页面布局结构。一般来讲,后台系统有两种最典型的页面布局结构:左右布局与上下布局(这两种布局是最典型也是最基础的布局形式,其余布局,下期内容讲)


上下布局

Image title

上下布局的结构在传统网页中非常常见,而在后台系统中并不常用。这种布局的优点是符合用户认知,遵循用户从上而下浏览页面获取信息的习惯;贯穿全屏的导航栏设计也使页面显得正式稳重,除却导航栏之后相对较大的空间也为内容展示提供了比较充足的空间。缺点是顶部一级导航受页面宽度限制,数量会比较局限,同时导航层级较深时,交互效率也不够理想。所以该布局适合那些导航层级较少,内容展示充分的后台系统设计


左右布局

Image title

拥有侧边导航的左右布局页面结构,是在后台系统中更常见的页面布局形式。侧边导航栏可以固定也可以收起,相对比较灵活,同时文字横向排列的形式可以在竖向上展示更多内容,因此侧边导航比顶部导航能容纳更多一级内容,而层叠式的内容展示也使得一、二、三级导航内容关联更为顺畅,可扩展性也得到加强;由于侧边栏可以常驻在页面左侧,所以对于右侧内容的指示性也优于顶部导航,切换起来也更加方便。但同时,因为侧边栏的常驻,导致右侧内容区域空间被挤掉部分,所以相对上下布局的结构,左右布局的结构,内容区域空间会比较小;一般为了与页面其它区域做区分,导航部分会用更深的颜色、安排更多的图标和文字,这也导致了在视觉上左右布局的页面不够平衡,会有左边重右边轻的感觉。


3、对内容区域建立栅格系统


根据不同的布局类型,对页面内容区域建立栅格系统。对于一个利用栅格系统做响应式设计的页面来讲,主要有三大数值需要规范:Column、Gutter、Margin;对于Column、Gutter我们在上一期内容中已经有很详细的介绍,不再赘述,而Margin是页边距,主要确定了内容区域距离页面边缘的距离,它分布在内容区域的两侧,主要作用是通过留白把内容区域与周围环境隔离出来,从而突出内容区域的显示,此外还可通过Margin值来调整内容区域显示比例,使页面在视觉上有更好的呈现效果。所以一个用于响应式的栅格系统事实上由Columns、Gutters、Margins三部分组成。


上下布局结构与其对应的栅格系统

Image title


左右布局结构与其对应的栅格系统

Image title


4、根据实际业务内容确定盒子(Box)比例


上下布局结构的盒子

Image title


左右布局结构的盒子

Image title


5、确定响应策略


响应策略就是当视窗(Viewport)发生变化时,内容区域的元素如何去响应,具体到我们当前的栅格系统,就是Columns、Gutters、Margins以及由Columns跟Gutter组成的盒子(BOX)四者的值(主要是宽度)如何变化,以及在这种变化之下我们页面的布局如何调整。


为了方便直观的向开发工程师与团队里的其它小伙伴沟通,我们可以把这个响应策略制作成如下的表格,并在页面中标注说明相关元素的变化规律,供自己与开发参考。


由于带左侧导航的响应式规则相对复杂,所以我先以它为例跟大家交流下响应策略如何制定


左右布局响应策略表

Image title


如图,响应式是以视窗的最小宽度作为基本依据来制定每种宽度下Columns、Gutters、与Margins的响应策略,也就是说Viewport Min-width是做出响应的触发条件,视窗每达到一个最小宽度,就会触发该宽度下预设的页面布局方式,而每种布局都是在该宽度下的最佳布局,也是因此,响应式才会在各种复杂分辨率条件下都能给用户比较好的体验。


每个视窗宽度的最小值是触发响应的关键值,因此我们给这些用于触发的关键值起了个名字叫“Breakpoint”,每个Breakpoint触发一种响应策略,而每个策略持续(保持)的宽度范围就是图中绿色矩形的范围。以图中第二行矩形为例,该矩形代表的响应策略是:栏目数是8、水槽宽度16(SM)、页边距32、侧边栏收起且仅展示图标,当点击侧边栏展开图标时侧边栏以Push的方式展开,该策略触发的Breakpoint是768,保持范围是577~768。也就是当视窗宽度缩放至768时,栏目数量由上一级的12变为8,水槽宽度由24变为16,侧边导航由完全展开状态自动收起文字部分,仅保留图标,然后保持这些关键数值不变,直到视窗宽度达到另一个Breakpoint。需要特殊说明的是,第一行矩形中0~576(Min&Fixed)这个范围的视窗宽度是固定的,也就是在该套响应策略中,页面最小响应到576的页面宽度,当视窗到达这个宽度时,浏览器会限制视窗进一步缩小,因为当页面宽度比它还小时已经无法有效展示数据了,所以进一步的缩放是毫无意义的。


左右布局响应策略动态演示

考虑到gif被压缩后显示效果不理想,所以我做了一小段视频来帮助大家更好的理解上述响应策略在实际页面中如何发挥作用。视频如果看着不清晰,选择清晰度为1080p蓝光观看即可


左右布局响应策略标注

Image title


对于上下布局的后台系统我们根据内容区域(Container)宽度定义的不同方式,可以把它们分为两类:


1、内容区域定宽的后台系统( Fixed-width Container )


内容区域定宽是指内容区域在每一组视窗宽度区间内,都会设定一个最大值(Max-with),当内容区域宽度小于最大值时,区域内元素会响应视窗的变化;达到最大值后,内容区域不再响应视窗的变化,而是宽度保持该最大宽度值不变,此时我们通过增加页面两侧的margin值来响应视窗的变化。Flex Margin就是应对此情况的动态页边距。

Image title


 上下布局响应策略表(内容区域定宽( Fixed-width Container ))

Image title


2、内容区域宽度流式 (fluid-width Container) 


内容区域宽度流式 (fluid-width Container) 的后台系统,它的内容区域 (Container) 距离页面两侧的页边距Margin是定值,因此视窗有多大内容区域就展示多大。




Q&A


1、后台系统必须做成响应式么?


并不是必须的,是否要做响应式主要是根据后台产品面向的用户来定的。如果是公司内部使用的系统,且员工配备的桌面设备都是有统一的分辨率,就可以不做响应式;如果是面向全网用户的后台产品(比如淘宝商家的后台管理系统,阿里云的控制台)或公司(部门)内部的桌面设备并没有统一的分辨率规格,那么就需要做成响应式。当然了,更实际的环境中是否做响应式还有技术实现、时间、人员成本等各方面因素的考虑,有时为了尽快的让业务运营起来,后台系统会做的比较“简陋”



2、为什么栅格系统没有适配到移动端的分享?


因为后台管理系统的使用场景主要是工作时间在桌面设备上使用,由于庞杂的数据内容在移动设备上展示困难、操作不便,因而很少有公司会把后台系统响应到移动端使用,所以我们今天说的后台响应式仅针对桌面设备屏幕。



3、对于iMac4k、5K这类超高分辨率的屏幕如何做响应式设计?


对于左右布局的后台系统,实际上它是全屏展示的,也就是屏幕有多大就展示多大,因而iMac的响应策略也是按照左右布局响应策略表里的策略来响应对于上下布局,内容区域定宽的后台系统,iMac的响应策略使用上下布局响应策略表里的策略来响应即可;


对于内容区域宽度流式的后台系统,iMac的响应策略可以参考左右布局的响应策略表来处理栏目、水槽的变化,页边距保持定值即可。



4、在以8为原子单位的栅格中,Margin需要按8n的规律变化么?


能以8n的规律变化是最好的,如果无法做到也可以使用其它数值。Margin是页边距,主要作用是通过留白的方式将页面内容区域与周围环境隔离区分出来,从而突出内容;一般我们会优先考虑内容区域匹配8n的变化规律,安排完内容区域后剩余的空间自然成为页边距(margin)



5、响应策略制定的时机是什么?如何去制定?文中示例的策略表我可以借鉴套用么?


响应策略表一般是在主要页面设计完成,要交付开发实现的时候来跟开发一起商定。这块需要注意两点:


1、如果开始设计时就已确定页面是要具备响应式的能力,那么最好开始设计时就去跟开发沟通,看他们现有技术是如何来做响应式的,因为他们很有可能是在用Bootstrap、Foundation这类组件库来做开发,而这些组件库一般都有自己现成的响应规则,这种情况下我们需要了解开发他们的规则,让自己的设计匹配已有的策略。当然了,如果他们的规则并不能很好满足我们的业务需要,一般也是可以在这些组件的基础上让开发去修改调整的。


2、响应策略表只是对响应方式的结果的呈现,而这个策略的制定事实上是从设计开始执行时就要去考虑的,从我个人经验来讲,我一般会挑两类页面来做响应策略的研究与适配,一个是控制台(Dashboard)页面,另一个是表单(Form)页面。优先规划这两个页面的设计,考虑他们在各个Viewport下如何布局如何展示如何缩放变化,并且跟开发沟通想法,听取意见,制定初步的响应计划,当这两个页面设计完成,就可以更大范围的执行设计。


3、文中示例的策略表是基于我自己项目经验总结而来,具有实际应用价值,可以借鉴。但我更想做的是通过那个表希望跟大家分享一种与开发交流、沟通的方法和技巧。实际工作中我们并非一定要做出那么一个经过精心设计细致考虑的表,我们可能会找张纸画一画给开发看就可以了,这块的重点是如何把我们设计师的想法更可视化更直观准确的传达给开发工程师。所以那张表是启发而非标准。


控制台(Dashboard)页面示例(素材图片作者:Coderthemes)

Image title


表单(Form)页面示例

Image title

转自UI中国-BYMD



栅格系统及其在后台设计中的应用—后台设计经验总结01

分享达人

关于栅格系统文章不少,但鲜有专门针对栅格系统在后台设计中相关应用的介绍。本文抛砖引玉,希望引起更多同行的交流与讨论

Image title

Image title


栅格系统的目的


栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考,它让页面设计变得有规律,从而减少了设计决策成本;栅格化提高了页面布局的一致性跟复用性;避免了设计师与开发者在细节上的反复沟通确认,从而提升了整个设计开发流程的效率、并能帮助开发者实现较为理想的设计还原。

但实际应用中,由于对栅格系统理解的不充分,很多设计师在应用栅格系统的实践中产生了各种问题,本来帮助设计的工具现在反而成了设计中需要解决的问题。结合我自己后台设计的经验,本篇文章跟大家聊聊栅格系统在后台设计中如何应用。



建立栅格系统的方法与规则


1、第一步:确立栅格系统的原子单位(网格)


如图,一个比较完整的栅格系统是由许多规格一致的小网格组成,这些网格辅助我们更规范的排版、布局。

Image title

后台系统设计中,由于后台页面主要以Web形式呈现,而对于web,用户已习惯通过鼠标滚轮或滚动条(scrollbar)来纵向浏览页面内容,因此,在不考虑内容优先级的情况下,Web可以实现竖直方向的“无限”加载,即竖直方向可以无限延伸,因此基于Web的后台页面,它的栅格系统在水平方向的栅格可以不体现出来,我们在执行设计时只要在竖直方向保持规律的变化就可以了。标准的栅格系统简化为适用于Web后台的设计如下图所示

Image title

如上图,对于后台设计来讲,栅格系统是由栏目(Column)跟水槽(Gutter)交替分布形成的,栏目(Column)是接纳网页内容的容器,水槽(Gutter)用来调节相邻两个栏目间距,把控页面留白;由于栏目跟水槽的宽度是以网格作为基本单位来增加或者减小,所以栅格化的第一步需要先定义好栅格的原子单位“网格”的大小。根据本人的设计实践以及其它已有规范经验,目前后台栅格系统网格大小定义为8是最普适易用的。具体原因有以下几点:


(1)目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被8整除,使用8作为最小原子足够普适.


我们选取4、6、8、10、12为栅格的候选原子单位,然后用目前主流屏幕分辨率与其相除,判断各个分辨率在竖直(Y)与水平 (X)方向能否被候选原子整除,统计结果如图。

Image title

显然,对于目前市场桌面设备屏幕而言,4是整除率最高的一个原子,接下来依次是8、10、6、12。但4作为基本原子实在过于小了,太小的步进单位将导致我们决策成本的增加,因为我们将元素间间距增加4px或者减小4px视觉感受到的差异并不明显,这种情况下我们为了找到那个“合适、满意”的间距,就需要反复调试,这就造成了时间上的浪费,尤其对于没有经验的新人,这点会更为突出。但这种调整并不合适,原因是后台管理系统设计重点在于面向用户使用的效率与逻辑,其次才是视觉呈现,使用栅格系统的目的之一也是想减少设计师在“细节”上的纠结,希望设计师站在更全局的角度看待设计,合理安排时间,因此我们舍弃4。在剩下的6、8、10、12四个单位中,8的整除率最高(80%),以8像素作为一个步进单位的变化,我们视觉上也是能感受到较为明显的差异,因此选取整除率最高的8做为栅格系统的原子单位。



(2)以8为单位符合“偶数原则”。偶数原则可以在页面缩放中的避免类似于0.5、0.75、1.25等次像素的出现,从而使页面各类元素在大多数场景下都能有比较精致的细节表现


虽然对于后台设计而言,通常设计师是直接在目标尺寸下进行设计,并在此基础上标注、切图给开发实现,并不存在像移动端那样需要对各种尺寸、各种像素密度的设备进行适配的情况,但对于Web页面来讲,仍存在向上向下适配的可能,因而从页面的兼容性、可扩展性及可维护性层面来讲,我们设计师还是有必要考虑的更加长远,遵循“偶数原则”可以上避免各种潜在的问题。

Image title


(3)开发工程师使用的前端开源组件库比如Metronic、Antdesign等也是基于8的原子单位来设计,因此如果设计师也使用以8为基本单位的栅格系统,开发与设计师相互对接就会更加方便,开发实现页面时也能更高品质的去还原我们设计师的稿件



2、第二步:建立基于原子单位的栅格系统


经过第一步讨论,我们现已确定后台设计的原子单位为8,而我们也知道栅格系统是由栏目(Column)跟水槽(Gutter)交替分布形成的,所以接下来我们要利用原子单位确定栏目跟水槽在具体的页面中如何分布以及它们各自的宽度。


通常,在一套后台设计系统中,水槽宽度会是几个比较固定的数值(因为后台系统的页面相对于其它类型的Web页面,表现的更加整齐、规律,所以留白的方式比较固定,加之后台往往有大量的数据、内容需要呈现,所以要尽可能提高页面利用率,可以留白的空间也比较有限);而栏目宽度更加灵活,它可以根据页面水平方向尺寸的改变而增大或减小以响应页面的变化(遵循8n的变化规律,此处变化规律在下期文章《栅格化与响应式》里会详细介绍)。


当我们做后台设计的时候首先需要确定在什么样的分辨率下做设计,也就是首先需要确定设计稿的尺寸,当设计稿尺寸确定后,便可建立基于该尺寸的栅格系统。假设页面内容区域宽度为W,栏目个数为A,水槽个数为B,栏目(Column)宽度为C,水槽(Gutter)宽度为G,则W=A*C+B*G。栅格系统建立初期,由于我们并不确定之后会有什么样的内容呈现我们的页面上,所以为了让栅格更加灵活、普适,我们先假定单个栏目与水槽的宽度是相同的,即C=8n(n=1、2、3、4...)=G,然后以此将页面内容区域等分,形成初步的栅格,之后再按实际内容需要,按比例调整两者宽度或者按比例对两者进行组合,形成承载业务内容的盒子。目前有两种比较主流的等分方式:12等分与24等分。


12等分的栅格系统在流行的前端开发开源工具库Bootstrap与Foundation中广泛使用,适用于业务信息分组较少,单个盒子内信息体积较大的中后台页面设计;

Image title


24等分的栅格系统适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计;相对12栅格系统,24栅格系统变化更加灵活,更适合内容比较多样复杂的场景。

Image title



栅格系统的应用


1、页面布局与版式设计


(1)、了解承载业务内容的盒子模型(Box Model)


建立好栅格系统后,就可以根据自己的实际业务,在栅格系统上安排内容了。页面上最终承载内容的其实是一个个“盒子(Box)”,这个盒子的高度由盒子要容纳的内容与页面版式设计决定,按8n规律变化;宽度则由栏目与水槽按比例组合得到。


在栅格系统上容纳业务内容的容器我们把它称之为盒子(Box),栅格系统上的盒子其实跟前端工程师写页面时用到的盒子是一致的。如图所示,当我们浏览任何一个网页时,右键>检查元素(审查元素),然后在style菜单下就可以看到这个盒子结构了。其中Padding就是主体内容(Element)距离盒子外侧的距离,我把它称之为内边距,(Element可以是一个按钮,一段文本、一张图片或者一个表格等;)而Margin就是相邻两个盒子间的距离,对应在后台栅格系统中其实就是水槽的大小。了解完栅格系统的盒子模型之后,下一步我们需要根据具体业务内容来确定盒子的宽度,也就是如何利用栅格系统做实际内容的布局与版式设计

Image title


(2)、根据业务内容分配页面比例,确定盒子宽度


以24栅格系统为例,一个24栅格系统可以根据业务需要被2等分、3等分、4等分、6等分、8等分、12等分,还可以被1:1:1、1:2:1、1:3:2、2:3:3、1:2、1:3、1:5、3:5等不对称分割,具体采用哪种比例的组合需要我们根据自己业务需求来定,我们此处所说的比例实际上就是盒子的宽度。

Image title

上图展示了盒子在24栅格系统上的分布情况,图中只列举了部分比例,实际业务中,同一个页面上使用一到两组比例值的组合来布局是比较合适的(如下图),组合形式过多页面就会显得琐碎、杂乱,不利于阅读和使用。因为盒子的高度根据内容来定,故下图中没有体现高度这一维度的变化规律。

Image title

当我们完成上图规划后,需要做的便是根据实际内容往每个盒子里安排内容,做视觉与交互的落地了。



2、元素对齐与间距设定


栅格系统大的层面可以帮助设计者更好的进行版式设计与内容布局,而小的方面可以辅助设计师规范页面内各种元素的对齐与间距的设定。从用户体验角度来讲,这两者同等重要,从执行层面来讲,我们一般先做版式设计与布局,然后再填充内容、调整细节。


栅格系统辅助对齐的作用类似于各种设计软件中的参考线,它能让我们更直观的安排、调整内容的位置及对齐方式,可以使内容变得规律、有序,方便用户浏览阅读,帮助用户提高获取信息的效率。


栅格系统对于元素间间距设定的帮助是直观的,当我们定义了栅格原子单位为8时,这意味页面上各元素间距的变化也应遵循8n的规律,一致的变化规律让页面富有节奏感跟韵律感,在提高页面一致性的同时也减少了设计决策成本。我们知道,栅格系统中水槽与栏目的变化也遵循8n的变化规律,此处n为大于0的正整数,即n=1、2、3...;但是用于规范元素间距的8n,n可以是0.5、1.5这类包含二分之一8的情况,原因是实际工作中,我们面临的情况是复杂的,这样处理可以让间距的设定适应一些特殊的场景,从而使其更灵活普适。

Image title



注意事项


1、水槽宽度的设定


确定好内容模块比例后,我们会发现由于之前等分的缘故,此时水槽较宽,我们需要调整水槽宽度到一个合适的值。


水槽的宽度是8n,也就是水槽可以以8为基本单位去增加或减小。为了减少设计决策成本,我们会事先设定好一系列水槽宽度,并定义好每个宽度对应的使用场景,然后设计中根据每个场景使用对应数值就可以了。我定义了一组水槽的值是8、16、 24、32 、40,为了区分它们的使用场景我们依次为其命名为XS、SM、MD、LG、XL。根据实践经验,正常情况下,两个盒子间距(水槽)的值为24(MD)时,视觉上是最为舒适。

Image title


栅格化工具推荐(插件请在附件中下载)


Ps栅格系统工具


1、PS自带栅格系统设定:新建参考线版面(重点推荐)


Ps有个功能叫做“新建参考线版面”,打开这个面板后,在预设这里可以看到Ps已经预设了8列、12列、16列、24列的栅格系统,选择对应列数就可以看到页面上参考线的变化。预设中“装订线”的宽度即栅格系统中水槽的宽度。默认均为20px,我们可以根据之前讨论的8的倍数原则,将其手动更改为24;


如果预设的栅格系统无法满足我们工作需要,我们也可以自定义栅格系统,并能将栅格参数保存为预设,这样就可以重复利用自定义的栅格系统了;栅格系统还可以选择将其应用在当前画板或者所有画板,十分方便易用。由于是Ps自带的参考线,所以它可以通过快捷键灵活的控制显示或隐藏

Image title

Image title



2、利用Ps标注工具Assistor Ps 进行栅格系统的建立


Assistor Ps在之前主要是一款页面标注工具,但是随着蓝湖等自动标注工具的流行,这个小软件基本没人用了,但我发现它设置参考线的功能还是很强大的,可以媲美大名鼎鼎的guideguid(这款插件目前对Ps cc 2017及以上版本貌似已经不支持,软件本身安装也挺麻烦),所以就介绍给大家。(安装包在文末下载,Win&Mac,解压后跟常规装软件一样,正常安装就行)。但是这个插件由于很多数值都要自己算,实际上没有Ps自带的新建参考线面板的功能好用。算是一个工具的补充吧

Image title



Sketch栅格系统工具


1、Sketch自带栅格系统设定:Layout Settings

Image title

Sketch端利用sketch自带的栅格工具Layout Settings即可完成栅格系统的设置,由于sketch的栅格工具是自带的,与Ps类似,它也可以通过快捷键快速显示或隐藏,点击左下角“Make Default”还可以将自定义的栅格系统设置为默认的栅格系统,方便以后重复调用,但sketch貌似只能储存一组栅格系统的数值,而Ps可以储存多组。



2、Sketch栅格系统插件:BootstrapGrid-maste


BootstrapGrid是一个专门用于建立栅格系统的插件(插件在文末附件中下载),插件可以对栅格系统的基本数据做个性化的设定,可以对多个形状同时建立栅格系统,还可以通过快捷键快速调用。具体用法:先选中要建立栅格的画板或者画板里的形状(可以多选),然后:插件>Bootstrap Grid(Plugins -> Bootstrap Grid)


栅格系统参数设计

Image title



单个形状(画板)建立栅格系统动图演示

Image title



多个形状(画板)建立栅格系统动图演示

Image title



跨平台的web端栅格工具 http://grid.guide/


GridGuide 最大优点是可以针对一种栅格系统生成4组不同水槽宽度的栅格化方案,能比较直观的比较不同水槽宽度下各个栅格系统的视觉感受。使用方法:在右上角设置好页面宽度以及栏目数量,页面内就会自动生成可以下载为png图片的栅格。


Image title


QAQ(常见问题解答)


(1)当栅格系统中奇数不可避免的出现时,如何处理?


理想状态下,我们应该调整内容区域的大小,使其尽可能成为可以被8整除的尺寸,但实际应用中,有时会出现无法整除的情况。基于对盒子模型的理解,此时我们保持padding、margin的值不变,改变盒子的大小去适应奇数的页面(元素)即可,因为一致性跟效率才是栅格化要达成的首要目的,偶尔有一些不“完美”的尺寸是完全允许的,因为用户在实际使用页面时,并不能看到我们使用的栅格系统,也很难注意到那几像素的变化,他们能感受到的是页面整体呈现出来的节奏与韵律感,以及持续、一致的视觉语言带给他们的严谨、可靠的心里感受。



(2)栅格系统必须以8作为原子单位?使用其它数值是否可以


首先需要指出的是使用其它数值当然也可以,栅格系统只是手段,提升设计效率、减少沟通成本、提高页面一致性才是最终目的,所以如果你所在团队有其它栅格化习惯,且一直以来效果良好,那么继续使用它也是没问题的。但是对于设计新人来讲,如果能理解前人的经验,并能较好的运用,对于他们来讲,是会少一些弯路,更好的完成设计工作。



(3)栅格系统建立初期是否必须使栏目宽度与水槽宽相等,并等分内容区域?


建立栅格系统时并不是必须使栏目宽度与水槽宽相等,并等分内容区域。本篇文章介绍栅格系统时采用这种处理方式是为了让大家更好的理解栅格系统建立的原理与过程,事实上,栏目的宽度在实际应用中往往大于水槽宽度,我们通常会先计划好水槽的宽度、内容区域总宽度与栏目的数量,这时候栏目的宽度通过计算可得到,对于响应式页面,栏目的宽度可以是百分比而不是具体的数值(关于响应式的内容下期文章跟大家分享)。

转自UI中国-BYMD


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

分享达人

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

内容概览

一.我们的触觉

二.什么是触觉反馈

三. 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贝林

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档