首页

好的设计不需要解释

雪涛

IP 形象一直维持着相当高的讨论热度,无论是国外的 Superfiction、linefriends;还是到国内的 qq family、Molly 等等。那些始终让你我耳目一新的品牌 IP,其实都具有自己独特的故事。每一个故事都在日常生活中有迹可循,恰恰是这种紧贴生活的故事切入点,能容易引起用户共鸣。具备性格色彩的角色,交织构建着属于自己的故事,以及故事中贯穿始终的精神信念,共同组成了一个完整饱满的 IP 形象。它可以为品牌带来更具象的感染力,在丰富 IP 的自身形象同时,也为用户的品牌感知提供了更多载体,进一步促使用户对品牌产生价值认同。

在 IP 多元化和传播渠道多面化的时代里,如何塑造出带有「温度」的角色形象?如何构思角色间的创意故事?创意,是否真的是我们刻板印象中的「天马行空」?

本期 SOAP Vol.02,我们将以「品牌IP设计创意」为主题,邀请到京东物流「快递小鸽」的 IP 创意主理人方宇宁MIMI,和大家分享「小鸽」的创意思路及为大厂创作 IP 的心路历程。通过多元的创意视角,深入介绍 IP 创作的要旨和秘方,刷新你对「创意」的认识,带你一同掌握创作 IP 的思路,吸收和萌生创意的创作方法。

完整采访视频链接:https://www.bilibili.com/video/av70731200?zw

以下,是 SOAP 与她的对话。

SOAP:

为什么京东物流的 IP 形象是四只鸽子呢?

MIMI:

大家可能接触到的快递员都是路上送货的小哥,但像我们内部的员工在 618,双十一这样的节日,我们也会去一线支援,会发现在整个车间里面,不管是快递员也好,分拣也好,站长等其实都很忙碌,都在为这份包裹去付出努力,所以我希望在这些维度,去设计一些能代表他们的东西,也正是他们这么一个完整的体系,才能代表整个京东物流所谓的 IP。(心里默默os:其实就是画了很多个不知道怎么挑啦~)

SOAP:

和我们介绍下它们吧。

MIMI:

快递小鸽,我选了一个灰色的赛鸽的形象,是我们日常最常见的一种鸽子,也是数量比较多的一个鸽种。其实这一点很匹配我们快递员群体的一个情况。我们的快递员是一群对生活充满希望、充满干劲的年轻人,所以小鸽这个设定也是一个很年轻、很正能量、积极阳光的角色。

分拣大哥,顾名思义是一个体力活的工种,所以他是一个比较健硕的形象,这种体力型的人格,性格上也会更加分明。

站长大哥是一个管理者的角色,所以也会比较聪明。在我狭隘的认知里面,我觉得高瘦的人都会给人一种聪明的感受,所以我设计了这么一个形象。

司机大哥的形象就比较有梗了,由于长期驾驶的缘故导致半边脸晒黑这么一个形象。

SOAP:

你是怎么塑造它们的性格的?

MIMI:

对于它们整个人物性格的张力,我希望他们是夸张的,能稍微突破常规去展现属于他们的性格,像货运大哥,它虽然晒黑了但也不放弃保养,这张图就是在画它在涂防晒霜。除了保养自己,它也会保养自己的货车。其实在一些细节上面也有去做一些功夫,像货车司机它们成天坐着,屁股有点下垂,所以有了这么一个它在做减臀操的动作。通过这么一系列的表达可以看出来,他们虽然是一群中年人,但它们并不油腻,而是很努力很积极地在生活。这也是我们的品牌希望传递给用户的一种感受和价值观。

SOAP:

你希望这个 IP 带来一个什么样的价值?

MIMI:

我希望能通过一些这样的内容,去让更多的用户除了喜欢他们之外,也能更理解他们,通过这部分的内容输出去改善快递员与用户之间的关系。类似很难避免的一些快递延误的情况,它们是否能通过自己的表达,去缓解这种情景所带来的不良情绪以及尴尬,我觉得这是小鸽这个 IP 对京东物流来说很大一部分的价值。

SOAP:

你在做其他 IP 项目的时候有遇到些什么坎吗?

MIMI:

17年京东的品牌更新算是我初次接触到的形象设计,和好几个同事一起出方案,我那时候入职不久,比较「不懂事」,没有像其他同事一样去考虑太多怎样的方案能通过,符不符合京东想要传达的形象之类的问题。只是凭自己的喜好去做整个方案,最后出来的效果大家都很惊喜,也在知道完全不可能的情况下依然去推动了这个方案,但结果你懂的……

到后面参与的一个品牌联盟的 H5 项目,给每个品牌商品去设计形象,有大概三四十个吧,然后 H5 就没落了……你懂的……

然后是 JOY Avatar 的设计的项目,主要是针对京东内部一些 JOY 形象应用不规范的问题,根据各部门职能做了相应的 Avatar 设计,整个过程中觉得很机械,没什么成就感,业务上的使用和推进也很乏力,当时做到都想离职了。

SOAP:

那后来怎么没走呢?

MIMI:

最后我冷静下来了,去认真审视 IP 这件事情。例如为 joy&doga 去设定它们的角色以及故事背景,背后也花了很大的工作量去创造整个世界观,反复推敲和验证,才得出最后呈现在大家面前的整套设定,包括后面根据它们的设定去创作内容等等。所以在设计小鸽的时候,虽然也是一种探索,但其实已经主动避开很多弯路和大坑了。

SOAP:

你有什么关于创意的心得和大家分享吗?

MIMI:

「创意需要着力点。 」

以往的理解可能觉得创意就是天马行空,所以也有去做过一些科技感、超能力的设定。但是其实我们如果无法在这个世界观里面做到完整的自洽,其实很空,其实就是一群设计师的自嗨,用户感知不到。所以这次的项目里面我一直去寻找现实中的一些着力点,我觉得小鸽这个形象落在物流上面其实是很好的一个着力点,也正是这个巧妙的结合,才能带给用户一个焕然一新的感受,再到形象的设计也是落地到现实生活中真实存在的鸽种上面来,以及后面的性格设定都是一个现实生活中立体人格的映射等等。当用户能够读懂并且感到熟悉的时候,我们的距离就拉近了。

「相信直觉也是一种逻辑。」

我也见过很多人他们去思考一个设计方案的时候都是推导出来的,这一个点那一个点写满了整张纸,如果这样去做设计的话,最后你会发现自己被限制在一个很小的交集里面,就好像如果你说话需要一直思考语法的话,那你根本无法交流。所以我觉得创作的过程更像是一个潜意识输出的过程,需要你用心去探索、去寻找一个更高层次的抽象,寻求那个能够萌生创意的最佳视角。

「好的设计需要做到不需要解释。」

其实日常生活中我不是一个能言善辩的人,嘴可能还比较笨,所以我会尽力做到不用解释就能让对方读懂我的创意,包括每一次开会汇报的时候我都能不说话就不说话,其实这个时候在场的同事或是我总监,其实他们也是一个用户的身份,如果他们没有第一反应去 get 到我这个 idea,或是没能给他们带来惊喜的感觉,那代表这个设计交付到用户手里也会是同样的感受,所以也会去通过这样一种方式去对自己的设计进行判断和优化吧。

SOAP编后记:

在采访 MIMI 之前,我怀抱着能听到一些概念性方法论的心态,毕竟现在的明确化的设计方法论非常受设计师的青睐,然而 MIMI 显然不在我们「以为」的道路上,而是比我们想象的更随性自由。无论是设计思维还是生活方式,她都崇尚真实和真切的体验感,不给自己的思维设限,不让纸张上看似有理有据的条理式「推导」束缚。她总是能从她独特的视角,看到看似普通事物背后的「玩味」,你永远猜不到她的脑袋瓜里到底装着多少宝藏。她看待 IP 设计更像是一次创意实现的过程,为每一个自己亲手捏造的角色人物构思它们的性格故事,并且绘制它们的「番外小故事」,在她看来也是 IP 设计中很有趣的部分。

文章来源:优设

B端产品设计的6大挑战

雪涛

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

B端产品设计的6大挑战

翻译: alina Wong  审校:华姐  |  UXRen翻译组 #297 译文

 

在VWO工作初期,我遇到的许多情况促使我想弄明白:企业类应用(B2B,后文中统称为B端应用)真的和消费类应用(B2C)不一样吗?对于设计师和设计流程来说,这种区别有多重要?

这篇文章是我在过去几年里的一些经验梳理,希望能够帮助那些想去或者已经在B端团队工作的设计师们。

 

什么是B端应用?

维基百科中的定义:B端应用是一种用来满足企业而非个人用户需求的计算机软件系统。

这是一些大家可能用过或者见过的B端应用。

在现代社会,大多数B端应用都是复杂的任务关键型应用,具有可拓展、分布式和模块化等特征。B端应用对大量复杂的数据进行展示、处理和存储,并利用这些数据实现对业务流程的支撑及其自动化。

B端工具可以帮助构件你的产品,从而帮助企业和员工更好地完成工作。

注:虽然B2B和B端应用在定义上略有不同,在目前的软件生态中,这些差别几乎无关紧要,所以本文将它们视为一类。

 

在设计方面,B2B与B2C有什么区别?

为B端设计并无特殊之处,优秀设计的一切准则,在这里都适用。不过,设计B2B产品和B2C产品,确实存在一些差别。

试想一下,汽车制造vs.商用飞机制造。它们都是非凡的工业设计,把人们从A点运输到B点。显而易见,它们有很多的不同之处,比如使用场景、制造时间、测试&安全规范、用户预期、购买以及所有权。所有这些不同之处都会影响设计及流程。

同样对于B2B应用来说,不同之处在于其独特挑战和应对方法。

 

六大设计挑战

声明:任何一款软件设计都会面临以下一些挑战,但为B端设计时,这些挑战更加突出。

1. 功能复杂

由于数据多态、可视化选项多、管理操作、多用户协作以及和其他软件集成等诸多因素,B2B应用的复杂度普遍高于B2C应用。为了满足一个需求而做出的一项设计决策,往往会影响其他许多需求,而其方式有时会难以预测。一项看似简单的功能添加,都要进行全面检查,考虑到各种极端情况。

Atlassian公司的Jira软件界面:功能复杂的软件案例。

解决方法:

解决复杂性的方法是什么?

当然是简化。不要将这误认为是简化界面,或者现下流行的极简UI。这是通过恰当的规划和流程达到的简化。无论项目周期多么紧张,都必须在设计开始之前投入时间思考,将收集到的需求和规范进行整理。实际上,这些是设计中非常重要的工作。

当你对设计方案确认无误时,会直接进入Sketch、Figma或者PS阶段,但这往往为时过早。抽点时间来厘清你将要设计的产品的背景和含义。通过研究和规划,找出所有的可能性,处理所有的极端情况。确保准备万无一失时,再进入界面设计阶段。

“如果我有60分钟来砍断一棵树,我会花40分钟先磨好斧子, 20分钟砍倒它。”——亚拉伯罕•林肯

恰当的规划和流程会在长期运行中展露优势,带来流畅无阻的产品体验。

 

2. 基于员工心理的设计

B端用户的心理和行为模式与B2C的用户的截然不同。B端用户除了要完成本职工作之外,还要兼顾在组织内的其他方面,如职业发展,职业学习,职业成功。为在职人士设计时,需要充分了解清楚他们的工作背景、流程、环境、期望、问题以及当前的解决方案。

如何做:

设计B端应用时,理解用户需求非常重要。不仅要了解产品相关的需求,还要了解用户工作和职业相关的需求。与最终用户深入交流,研究他们的领域,尝试用他们当前的方法,这些都非常有助于培养对用户的同理心。

此外,用户太过于习惯现有的工作流程,这导致他们很难想像自己真正想要什么。他们可能会告诉你功能和选项,但却无法提供产品创新之道。

用户可能认为自己想要的只是更多的功能。

B端产品设计团队的设计指导原则,是知道用户目前遇到的困难是什么,然后设计出方案来解决这些困难。一旦真正理解用户的长期目标是什么,设计师就可以有很多发挥的空间了。

“用户购买产品是希望变成更好的自己。”—— JTBD理论

与其关注用户说什么,不如关注他们实际做什么,并以此为创新的基点,构建精益原型,并与用户一起进行测试。

 

3. 降低软件切换成本

一般来说,B端用户习惯且满意现有的工作流程,并没有切换到另一种产品的需要。而且即便他们想换一个,也要层层审批。更不要说,现有数据的迁移对于公司和员工来说都是非常难的事情。所以同大众消费者应用不同,B端应用的切换成本显然要高得多。

解决方法:

说服企业换用你的软件的两大方法:

  1. 比竞品提供更多的功能。
  2. 重新定义现有工作流程,使其用户体验有明显的提升,更快,更好,更有效率。

第二点才是设计中真正闪光之处。生产效率、工作流程是企业最关注的事情。仔细研究它们现在的方案,找到需要提升的地方。考虑如何设计出更快的工作流程,如何提升效率并降低成本。在这几方面上创新,往往会带来可以说服企业作出改变的解决方案。

“衡量创新的唯一标准,就是看它是否改变了人们的行为”——Stewart Butterfield, Slack联合创始人

不断寻找机会,改变传统的方法,使之更有效,更。

 

4.  优先增加新功能

对于B端产品,新增功能几乎总是比提升现有功能的体验更优先。在产品启动时,通常会有专门的设计冲刺阶段。而一旦产品发布出去,用户需求就开始涌入进来。付费客户会不断要求增加新的功能,产品团队也制定繁忙的开发计划。在这种情况下,设计师尤其很难说服有关人士投入时间和资源来提升设计和用户体验。

避免方法:

尝试从这些相关人士的角度看待问题。他们经常认为,任何一段开发时间,无论是一周还是一个月,如果没有用来开发新功能就基本等于舍弃了潜在的收入。这时,让他们明白优化产品所带来的好处就很重要了,要让他们懂得优化远比增加新功能可以带来更多的收入。重点讲讲成功故事。直接和高管聊这件事,让他们接受这种观念。优化设计总是需要仔细分析痛点,检验新的想法,而这些都需要时间和创新。

“电灯不是通过不断优化蜡烛发明出来的。”—奥伦·哈拉里(Oren Harari)

一旦你获得了公司的信任,就要在有限的时间内取得一些小胜利,并且一直努力度量其影响。逐步建立起公司对设计团队的信心,继续尝试更大的改进方案。

让产品和开发团队成员承诺确保优秀的用户体验,并帮助他们主认识到这不仅仅是设计团队的任务。

 

5.体验的一致性

来源:B端用户体验行业报告 2017-2018

最近,一项对3000多名B端产品设计师的调查显示,对B端设计团队来说,最大的挑战是提高产品的用户体验一致性。不同于消费类应用,B2B产品通常有更长的产品周期且异步运行,很多时候都是分布式团队合作设计。

每一名设计师都面对着与其他团队类似的问题,很容易导致产品设计不一致,比如更改设计组件、更新样式,甚至像颜色这样的细节都会产生不同。这些问题随着团队的扩大或者产品的体量增加而变得更加严重。

解决方法:

许多公司开始建立设计规范来保持产品的一致性和可拓展性。设计规范包含可复用的组件集合、清晰的设计指导,可以帮助构建任何数量的产品。设计规范通常包括:

  • 设计指南(设计原则、范例、编辑指南)
  • 视觉元素(颜色、排版层级、图标等等)
  • UI组件(表格、按钮、页面样式)
  • 使用和维护方法

当B端设计团队被问到是否建立了设计规范时,约55%的团队回答是或正在创建中。这是很好的现象。需要指出的是,设计规范永远不会100%完成,它着眼于长期,会随着时间的推移不断更新。

“设计每个元素时都应该考虑到其是否易于制作和修复。” —Leo Fender

设计规范对于保证用户体验一致性具有里程碑意义。

以下是一些B端设计规范,可以给你一些灵感:Salesforce的Lightning设计规范, Intuit的Harmony设计规范。

 

6. 并非每一位设计师都喜欢B端产品设计

不少设计师在做过一段时间B端应用设计后,发现它无聊单调。许多来自咨询公司或者有B2C经验的设计师觉得B端设计缺乏激情和多样性。做那种酷炫的微交互和动画(就是会发在dribbble上那种)的机会并常有。这样,工作就变得乏味无趣,设计师们感受不到成就感,提不起劲来。

避免方法:

B端应用的用户体验旨在帮助用户更好地完成工作。设计一个迷人的界面来吸引用户,(尽管并无害处,却)总是在被排在低优先级。标准化的、可预知的、所见即所得的用户界面,最适合目标用户。

我们的目标是让用户发出“哇!”的感叹,不是因为绚丽的界面,而是因为产品能够帮助他地完成工作。

组建B端应用设计团队时,选择目的和动机一致的设计师最为关键。设计师的动机,应该大量来自于解决复杂的问题,看到自己的设计如何帮助用户完成他们的工作。

所以,在设计师加入团队之前,评估他们的想法并设定正确的期望是非常必要的。

 

B端设计的一般性建议

企业本身是在逐步发展的。B端应用不再是难用、无聊的产品,用户期望B端用户像消费类应用一样有着优秀的体验。他们喜欢漂亮的界面,不希望在使用前看说明文档。下一代技术,例如VR、AI和声音已经进入了我们的生活,也很快会应用到工作中。对B端应用来说,这令人兴奋,而设计师所能做的,则是无限的。

做B端应用设计的三个指导原则:

  1. 拥抱灵活性和模块化。
    设计任何东西的时候,都要考虑到它是会发展变化。不仅仅要为当前的需求定制设计组件,更要考虑它对未来需求的适应性和可扩展性。
  2. 建立条理和流程。
    优秀的合作,定期的用户调研,可执行的问题报告,有侧重点的设计迭代,这些往往都是我们所期待的,但却又难以每次都得以实现。最好建立一个可重复的流程,并在每一个周期都予以改进。
  3. 全局思考。
    时刻关注你的设计和添加会如何影响整个产品以及公司愿景。当你关注整体时,你设计出的产品,你所做的升级,增加的功能,都会自然而然地带来流畅一致的用户体验。

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

     

干货来袭!淘宝设计师谈动效的设计与交付

用心设计

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

 

在手机淘宝中,大至链路的衔接,小至一个按钮的点击响应,动效是体验无处不在的润滑剂,为用户每一步的操作提供了合理的预期与过渡。而通过动效衔接不同界面或不同响应状态,无论对流畅直观地表达流程意图,还是精雕细琢让体验更丝滑的微动效,动效设计都是淘宝设计师日常工作中非常重要的一环。

动效是体验链路散点间的“领路人”

针对项目不同阶段、不同使用需要,针对性地选用的工具,辅以便于理解的交付方式,是设计和落地环节沟通提效的关键。

相比提及动效首先都会想到的巨无霸AE而言,Flinto、Principle、Kite、Adobe XD等许多专门为体验设计量身打造的轻量级工具,更聚焦在互联网产品设计的高频功能上,多数工具都能快速输出视频或GIF,以及在移动端上进行实际的交互体验。

为体验设计量身打造的轻量级工具

这些工具在原型和动效快速表达方面独特的敏捷、的优势,让它们逐渐成为迭代频繁的国内互联网行业许多设计团队的新宠。

上述工具的核心功能都比较接近,各有千秋,差异多在于时间与属性之间关联的展现形式上,这里不做过多展开,也不做任何孰优孰劣的判断。毕竟工具只是兵器,提起趁手的兵器快刀斩乱麻,才是设计功力的体现。

本文将结合手机淘宝的动效设计实际案例,介绍淘宝设计师们在项目过程中进行动效设计、并与开发沟通的经验。

针对不同阶段,选把趁手的兵器

淘宝这样的大型应用中,任意提及一个细分链路都颇具复杂度,每个场景或大或小的版本迭代背后,都是设计师从交互流程设计、具体界面的视觉设计,再到最终交付落地,经历层层评审和修改完善的过程。

产品设计的2大不同阶段

那么在不同阶段,选用怎样的工具更符合我们对“”的追求?下面将按阶段拆分问题,分别进行分析:

1、广义的动效:流程Demo设计阶段

产品流程、交互行为的设计与串联,无论是作为可以实际体验的可交互原型,还是纯用作展示,实际上也是一种最基础的广义动效。

曾几何时,交互流程的设计输出物是用流程箭头清晰标注每个控件交互行为的交互稿。

但在淘宝内各子产品“小步快跑”的版本迭代极度频繁,每天提案、评审这类快速碰撞不断的情况下,即使经过了合理的流程拆解、耦合度不是非常高的交互稿,对设计师而言改动返工量依然巨大。

更何况无论业务方还是设计内部评审时,其实没有人有时间仔细阅读你精心撰写的交互说明。

只适合在交付开发阶段采用的静态交互文档

(鞋类测码功能为例)

因此,这类交互稿如今最大的用途只在交付开发的环节。在快速碰撞方案的阶段,通过轻量级的动效工具迅速产出可交互原型是目前团队内更同行的做法。在评审中直接演示,可以帮助团队成员更好地对方案实际效果有一个更直观的体验。

在流程设计阶段,Flinto是一个非常好用的工具。同为体验设计专属的轻量级设计软件,Flinto和Principle有很多共通之处,也经常被一起比较,但底层思路都是通过定义元素的各项属性变化来实现过渡。不过,两者在定义方式上却有比较大的不同,简单概括来说,Flinto是通过元素的附加事件,而Principle则是通过不同画板间的属性差。

Flinto更擅长流程级表达

这点上的不同,决定了Flinto优势在于流程级表达,而Principle更擅长界面级(或很短的流程级)交互细节表达。

以分享宝贝、邀请好友出主意的“帮我选”功能中的新建清单流程为例:

「帮我选」新建清单流程Demo

流程对应的Flinto实现方式如下:

「帮我选」新建清单流程对应的Flinto工程文件

产出流程Demo时,只需要表达基本的页面结构与跳转关系即可。转场无需表达得很准确,以不引起误解为原则即可,时间有限的情况下,最简单的处理方式就是统一用渐隐渐现。

各种与页面滚动位置有关的动效也暂时不用表达,例如下滑时顶栏的状态过渡。同样,也完全没有必要让每个元素都可点击,这些交互细节以及分支用例,都更建议在交付开发阶段通过交互说明表达,寥寥数语可能就足够准确传达了。

与页面滚动位置联动的动效,可以在界面级设计中细化

2、微交互动效:界面级设计阶段

当产品流程确定后,进入界面级设计阶段,就轮到对局部微动效逐一进行细化。

对不涉及位置联动的交互动效而言,在Flinto和Principle中的制作成本相差无几。例如纯粹由点击触发的事件:

不涉及位置联动的动效

但对于涉及位置联动的动效,Principle就比Flinto的表现优秀很多了。

Principle更擅长界面级动效表达

Principle中,时间轴和位置联动的设置比Flinto自由度更高,可以快速进行精细的设计和调整。例如在页面上滑过程中,导航栏跟随手指上滑动作而上移隐藏的动效:

导航栏随手指上滑动作而上移隐藏

下面是一些来自淘宝近年已上线项目有趣的动效示例:

案例一:手机淘宝导购产品“有好货”的商品列表中,会穿插视频及知识内容,在这些特殊内容滑动到用户视线中时会动态扩展,将内容自身特点完全呈现。注意,这些动效只能应用在特殊内容数量少、质量高的场景,否则会过于干扰。

视频形态扩展动效

知识形态扩展动效

案例二:用户在手淘中关注某个频道后,手淘首页会提供进入该频道的快捷入口,这个逻辑通过文案很难清晰的表达,因而采用了直观的动效呈现。

关注频道后的提示

实际项目中的动效产出方法

上文分别介绍了流程级和界面级动效的设计建议,那么在实际项目设计中,我们需要有什么样的产出呢?

依据设计稿所起的作用,大致分为3种:

3个阶段的不同产出物

1、用于实操的demo:根据自己所希望表达的侧重点(流程还是细节?)选用一种工具完成全部设计;

2、用于演示的视频:可以同时使用两种工具完成不同部分的设计,分别录制视频再合并;

3、用于开发的方案:对需要动态呈现的部分单独提供动效设计稿及说明等产出物,然后再将所有设计以Keynote等载体整合起来。

手淘在动效设计过程中,也摸索出了一套便于与开发同学沟通、最优最快实现设计效果的设计产出方法。产出物包括2部分:

1、效果演示demo和视频:使开发同学快速了解设计效果;以宝贝详情主图的扩容与评价联动气泡为例:

效果演示和视频

2、动效参数文档:将自己在设计动效时所设置的全部参数,翻译为开发可以轻松读懂的图形表达方式。对于比较复杂的动效,虽在撰写文档时会多花一些功夫,但能够让开发一次性还原出理想的设计效果,免去后期反复沟通修改的麻烦。

下面以手机淘宝首页的2018年双11主会场入口为例,说明动效设计的输出方式。

我们选用Principle制作了所有动效,整体效果如下:

手机淘宝首页的2018年双11主会场入口

可以看出,动效包含以下几个部分:

1、主会场入口背景图旋转

2、主会场商品图及按钮出现

3、“立即抢购”按钮文案切换

我们要分别输出以上3部分的视频示意以及具体的动效参数。以其中相对复杂的第2部分“主会场商品图的出现和切换”为例,提供给开发的视频如下。注意在这个案例中,因为开发是针对图形元素的容器来编写动效,所以我们需要将图形抽象为容器。

经抽象为图形元素容器的交付版本

同时需要提供给开发的是动效参数。下图是我们使用的参数图形化表达方式,纵向为各个元素,横向为动效时间轴。

动效参数产出物

实际上,各位同学也可以根据自己的实际情况来绘制,原则是清晰明确即可。

结语

从合理的工具选型,到严谨清晰的文档交付,技法层面的干货就写到这里。文章的最后,笔者想谈的是互联网产品中动效初心。

动效并非炫技的手段,而是实实在在用于衔接用户在各个体验散点之间的润滑剂,符合用户心理预期、不打扰用户,甚至让用户几乎无所察觉的动效,才是真正优秀的动效。

许多创意网站上初见确实惊艳的动效,如果在用户实际使用中过度使用,轻则有拖沓之感,重则引起焦躁。这一原则对于旨在让用户“买买买”更的淘宝而言,尤为重要。

动效技法只是基本功,在“不打扰”中体现同理心和精巧的构思,是动效设计更重要的导向。重剑无锋,大巧不工,与所有Motion designers共勉。

 

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

巧用Keynote,为你的演示锦上添花

用心设计

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

 

对于今天的设计师来说,无论是知识分享会,还是项目提案评审,甚至是求职面试等等,越来越多的场合需要考验我们的演讲表达能力了。那么对于设计师来说,除了口述表达能力,美观大方的幻灯片往往也是必不可少的。而Keynote因其酷炫的动效俨然已经成为演示界的神器,但是现状是很多设计师朋友对于Keynote的掌握还不是很熟练,特别是五花八门的动效以及复杂的构建顺序,在此作者就与大家分享总结一些个人的使用心得,希望对大家能有所帮助。


目录

1、认识keynote

2、制作准备

3、动效

4、构件顺序

5、演讲相关



下图即是Keynote的主界面,与我们熟悉的Sketch还是挺相似的。其中中间为舞台区域,当前页面的所有元素都会出现在此;顶部是工具栏,包含一些常用的功能,并且跟Sketch一样支持自定义;左侧是幻灯片的导航,可以快速在各个幻灯片之间切换;右侧是参数调整,可以分别针对幻灯片以及其中的某个元素进行参数调整。

其中,右侧的参数调整又分为“格式”、“动画效果”和“文稿”三个Tab。当选中左侧导航中的幻灯片或舞台中的某个元素时,对应的参数调整面板是不同的。


在开始动手之前,还有一些准备工作需要完成。首先就是整个幻灯片的尺寸,常见的尺寸比例有4:3和16:9,需要根据演示现场的幕布宽高比来确定选择哪一种。如果是在移动设备上演示,就根据移动设备的屏幕比例来选择,一般手机是16:9,Pad是4:3。当然,也可以自定义幻灯片的宽高尺寸。幻灯片尺寸在右侧的“文稿”Tab中调整。

其次,编辑母版。母版有点类似于Sketch中的Symbol,改变了其中的某个元素,所有使用这个母版的幻灯片都会出现相应的改变。不同的是,母版的对象是整张幻灯片,而不是其中的某几个元素组合,也就是说,一张幻灯片只能选择一种母版。如果你的所有幻灯片都需要加上logo或者水印,使用母版就很方便了。母版的编辑以及调用在右侧的“格式”Tab中(选中幻灯片的情况下)。

最后,将你需要用到的图片元素,按幻灯片顺序整理好命名,以便于在后续调整构件顺序时使用(命名混乱会对调整构件顺序造成很大的干扰,在稍后构件顺序的时候会讲到)。


Keynote中的动效分为幻灯片之间的过渡动效和单个元素的动效。


幻灯片之间的过渡动效有以下这些:

这里重点要介绍的是神奇移动。它的原理是为两张幻灯片中的同一个元素添加补间动画,通过这个元素在两张幻灯片中的位置、大小、形状、颜色、旋转角度、透明度这些属性差异来实现过渡动画。当然,还可以选择抹入抹出来使其过渡更自然。

单个元素的动效又分为三个阶段:出现、动作、消失。


出现,顾名思义就是从无到有的一个过程,主要有以下这些:

动作,主要是移动、缩放、透明度、旋转这些基本的属性变化。大部分的动效都是通过这些基本属性的变化组合来产生的。

消失,顾名思义与出现相反,是一个从有到无的过程。

其中,打字效果和跟踪这两个动效只针对文本才会有效果。

这么多的动效,其中有一些还是蛮有意思的,比如“解体掉落”、“碎屑”、“轰然坠落”,这里就不展开细讲了,大家有兴趣可以一一去尝试一番。


使用动效还有一个误区就是,不是所有的页面之间或者元素出现消失都是需要动效的,过多泛滥地使用动效反而会给观众造成视觉疲劳,让他们的关注点都集中在你的动效上,从而对本身的演示内容失去关注。


构件顺序是针对单张幻灯片内添加了动效的元素而设定的。可想而知,一张幻灯片内的所有元素,很少会有同时产生动作的情况,因此必然有个先后顺序,这个顺序就是构件顺序。通过构件顺序,可以组合出变化多端的动画效果来。


构件顺序分为三种:一起、之后、点按。如下图:

可以看到,通过构件顺序列表上两个构件之间的样式变化,我们就可以一眼区分出它们之间是什么顺序。一起,两个构件连在一起并且中间没有分隔线;之后,两个构件连在一起中间有分隔线;点按,两个构件不相连。


点按比较好理解,就是两个构件动作之间需要手动控制。下面重点来讲一下,“一起”与“之后”。我们通过时间轴的形式,来让大家更容易理解。

当然,我们还可以设置延迟时间,让构件交替动作。

前面我们提到过,要为图片元素整理命名,其目的就是在构件顺序列表中便于查看。如果我们没有整理命名,那一张幻灯片中的构件顺序列表可能就是如下图这样:

那么这时候,我们如果要调整其中一个元素的动作顺序就显得异常困难了。因为在舞台区域中,这些元素可能都是叠加在一起的,想要通过点选找到元素几乎是不可能的,而构件顺序列表中的命名也显得很混乱……


此外,即使是整理命名了这些元素,最好也不要把许多动效做在一张幻灯片中。原因同上,如果后期要修改,寻找起来也是非常困难。我们可以利用幻灯片之间的自动过渡效果来将它们拆分到不同的幻灯片中。

图中在第2张幻灯片与第3张幻灯片之间选择“无过渡效果”,且开始过渡设置为“自动”,延迟“0秒”,那么第2张幻灯片播放完,就自动无缝进入第3张幻灯片了。


做完了演示稿,那么就要开始准备演讲了。首先需要考虑的问题就是文件大小了,如果图片内容不多倒还好,一旦图片较多,整个.key文件就会变得很大。这时候我们可以先压缩图片再将其置于Keynote中,或者有一些元素或者文字可以通过Keynote直接绘制,就不要采用图片的形式了。这样可以将.key文件的体积大大缩小。


其次,Keynote的版本也是需要考虑的问题,最好可以拿到演示所用的电脑来演示一遍,作者就曾经因为软件版本问题导致一个动效无法展现,进而影响了那个片段的演讲。


此外,我们不可能讲所有要讲的内容全部呈现在幻灯片上,适当的注释是必不可少的。

添加完成的注释我们可以在演讲者模式中看到。

演讲者模式中,我们还可以看到当前幻灯片、下一张幻灯片以及还有多少个构件动效没有播放。在顶部,靠左的是当前时间,靠右的则是定时器,可以设置成计时器或者倒计时来帮助我们控制演讲时间。

最后,如果你不在电脑边上而又不想别人帮你控制幻灯片播放时,可以利用iPhone来遥控播放。打开iPhone上的Keynote,点击右上角的遥控模式进入如下图左侧的界面,然后前往Mac端的Keynote,进入偏好设置,选择遥控器,然后连接上你的iPhone(需要在同一WiFi下),iPhone上的界面就会提示你开始播放幻灯片。

这时,你的iPhone就变身为一个遥控器了,并且点击右上角的菜单还有激光笔功能,便于你在演讲过程中做临时批注。


这篇文章旨在帮助你更充分地运用Keynote来传播分享知识、展示设计作品,并不能美化你的幻灯片。想要做出美观大方的幻灯片其本质还是需要版式排列、色彩搭配这样的基础技能;同样,酷炫的动效也需要多欣赏临摹别人的作品才能运用得恰到好处。

 

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

2019广告营销案例抢先看

用心设计

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

 

2018年已过,转眼又到了2019,但营销圈中战火从未消停过……

2018年各大品牌营销玩出了新花样,优秀的营销案例层出不穷,揽获了众人的芳心。

面对2019新的一年到来,各大品牌当然也不会放过一个大好的借势营销黄金机会,都争先恐后搭上了这趟“借势营销”的顺风车,为打响2019年第一炮,自然是无可厚非的。

然而,迎来2019新年,各品牌纷纷借势“耍花招”,精彩不输往年,各种多元化新玩法碰撞在一起产生了巨大的火花,再次燃烧整个营销界。因此,在这个竞争激烈的营销战场上,频繁出现了众多品牌活跃的身影,各种刷屏级的案例也相继诞生。

下面为大家盘点的刷屏案例,看看这些品牌都是如何借助“新年”这个热点事件的势能,迅速抢占超级流量,赚足众人的眼球?

特仑苏

主题文案:更好的2019,做更好的自己!

点评:往年的特仑苏代言人只有陈道明、靳东,而今年又有两位新代言人加入特仑苏——张钧甯和邓伦。特仑苏邀请了这四大代言人共同拍摄了2019广告,又以一个全新的面孔面向用户。

广告中花式植入产品,将产品巧妙融入到画面情境中,以达到潜移默化的宣传效果,顺理成章地符合了产品植入讲究“随风潜入夜,润物细无声”的最高境界。

四大代言人共同拍摄广告,无疑是突破了传统的广告模式,强大阵容助阵,可大大体现出明星在营销中的号召力与影响力,明星背后带着庞大的粉丝群体,推动这次广告更广泛地覆盖目标受众。加大了此次广告营销的宣传力度,从中也表达了特仑苏坚持“从更好的开始”的品牌主张。其次,对于用户而言,特仑苏这波新年广告带给大家更多的是惊喜与新年的美好祝愿:更好的2019,努力做更好的自己。

京东白条

主题文案:“一点当典行”网红店横空出世

点评:就在2018年尾声已敲响时,京东白条又出来“搞事情”了,竟然在京城“四大凶宅之首”—— 朝内81号开了快闪店,使得拥有百年历史的“京城第一鬼宅”, 摇身一变,成为了一家网红店,吸引众多时尚潮人前来打卡,深夜排队的壮观场面实在令人惊叹。

京东白条精准洞察年轻人现实痛点和情感需求,以及抓住了他们的猎奇心理,将无数传说的冒险胜地——朝内81号,首次改造成京东白条“一点当典行”,为大众提供了全新的刺激潮玩体验。让年轻人通过【当与换】的仪式感,把负能量、情绪、杂念统统“分期”丢掉,切身感受“一点改变,好过一成不变”,告别社畜、废青的过去,获得新生,在2019开始更好的人生。

京东白条“一点当典行”网红店的问世,可谓打破传统印象中的金融理财玩法和当铺玩法,从一点事务局到一点当典行,京东金融始终在突破体系和行业的限定,持续打造坐拥“潮人”人设的品牌。同时也彰显出一个拥有年轻人的潮玩精神、有温度的品牌,更有效建立了品牌与用户深度沟通的情感纽带。不得不说,这一反常态玩起时尚新潮,简直是颠覆了人们对京东白条的印象,京东白条这波营销实在是妙!

据悉,2019年将会有5期系列活动陆续落地全国,既佛系又丧的年轻人,不可错过!

OLAY

主题文案:下一站,无惧年龄

点评:新的一年里,BBDO广州携手OLAY,带来无惧年龄的《下一站》,OLAY这支反逼婚广告,戳中了多少人的心窝?相信,给了你不少启发。

广告中讲述的是一个发生在“年龄列车”上的故事,女主手握一张名为“年龄”的车票,正在寻找着自己的位置,突然惊奇发现这里的车厢都是按照年龄划分的。通过这极为扎心的故事情节激发更多“大龄剩女”的思考,但也引发了更多女性产生坚定的想法,不应该因为年龄而仓促步入婚姻的殿堂。

其实,这一广告刷屏朋友圈,那是因为这广告基于对女性的心理洞察,找准众多女性的痛点,让人产生强烈的代入感,更能给予女性启发,正确面对自己的每一个年龄阶段。由始至终,OLAY给人传达了一种“不畏年龄,勇敢做最真实的自己”的精神,无形中体现了OLAY对用户的最切实的关怀,使得其品牌深得人心。

迪士尼

主题文案:“梦想成真”

点评:迎来新的一年,这支由迪士尼推出的暖心广告正式上线后,获得众多网友的一致好评,都称这已被故事中的“小白鸭”所吸引。

广告片讲述了一只小白鸭费尽千辛万苦,终于和偶像唐老鸭见面的故事。以呆萌的“小白鸭”形象,然后制造感人的故事,直击用户的内心深处的情感,从而引起用户的共鸣,加强了用户对品牌的认同感。

这次广告贴合了现实生活,从用户的情感出发,唤醒人们的梦想,不忘初心,勇往直前,因此,迪士尼给人传递的不只是对美好生活的向往,更多的是对梦想的追求与执着。还有向用户表达了:尽管我们都长大了,迪士尼还在守护我们最童真的梦想。所以,迪士尼通过这一波触动人心的情感营销,为品牌与用户之间架起了一座真正的情感桥梁。

荣耀手机

手机性能测试

(扫描二维码观看视频)

点评:说到手机的耐摔性,很多人都会想到诺基亚,但诺基亚在现如今的手机市场普及性明显不如其他品牌。而在今年,荣耀手机开始耍出了新招——推出一创意广告,铁证荣耀手机才是“坚强者”。

这是一支荣耀测试手机性能的宣传片,让手机历经各种考验,包括油烟考验、零下40度的超低温测试、高达55度的超高温测试、残酷的刮擦实验等,最后用结果彰显:荣耀手机的性能强大。

所以,荣耀手机通过展示这优质的手机性能来加强用户对其产品的认知,刷新用户的荣耀手机原有的印象。从用户的角度考虑,用实验证明,体现产品的最大价值,从而满足用户对手机产品的各种需求,也引导用户对荣耀手机产生正面的认识。最后也突显了“生活中1%的可能,也要100%的做到”的品牌理念,然而,既有可看性,又“用实力说话”的产品广告,自然会把人征服得心服口服。

网易云音乐

主题文案:“遇见你真好”年度听歌报告

点评:2018年的网易云音乐的年度报告,居然在2019年的第四天才迟到出现,网易云音乐的“遇见你真好”年度听歌报告,又双叒叕刷屏了……

众所周知,网易云音乐于2013年4月23日正式发布,也是国内首个以“歌单”作为核心架构的音乐APP,每次网易云音乐的营销与“走心”产生了密不可分的关系,大众千呼万唤始出来的网易云音乐年度总结报告终于出来了,虽然QQ音乐、酷狗音乐也在年前亮出了年度音乐总结,但偏偏是网易云音乐的年度听歌报告刷屏了。

这次的年度总结,满足了用户对音乐的需求,也满足了一些有情怀的用户,而且其歌单给予用户满满的成就感,轻易地完成了一次阶段总结。吸引更多用户参与其中,纷纷晒出自己的年度歌单报告,使得这次网易云的年度听歌报告,引发了广泛的传播。

屈臣氏

主题文案:“做自己,美有道理”

(扫描二维码观看视频)

点评:就在2019年到来的钟声一响起,大家便纷纷立了新的flag,而屈臣氏上线的H5,彰显着“做自己,美有道理”的品牌主张,刚好迎合了各大女性在新的年“追求更完美的自己”的美好愿望。

视频中的“四位小姐姐”show出了“不跟随、不妥协、不伪装”的模样,还有人的语言配合动感的画面,折射出现实生活中年轻女生渴望表达自我,追求个性与态度。呼唤大家在新的一年,立起了2019新flag。同样也展现了屈臣氏就是一个有态度的品牌。

只想说,在这2019新年之际,屈臣氏推出了这一波满满正能量的广告,能俘获用户的芳心也是毋庸置疑的了。

纵观以上品牌营销案例,可谓各有千秋,但共同点旨在使得品牌深入人心。

然而,众多品牌营销过程中需要从用户角度出发,都说,一个成功的营销,是因为“走心”,在传达品牌产品信息的同时,也能使得受众与品牌成功产生情感的共鸣,让用户更深刻地记住其品牌。

当然,我们也更期待2019,品牌主们能推出更多刷屏级的好案例。

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

别只顾着升级主机了!设计不顺利,可能是显示器的问题

用心设计

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

 

很多设计师为在配置装备时,往往只考虑到主机的性能,然而却忽略了显示器,只有工作了一段时间,才知道显示器的重要性。比如有时候显示器的色彩不够准确,辛辛苦苦做的图,还可能被客户投诉。

如果说性能好的主机是设计工作的主心骨,那一个性能好的显示器更是锦上添花~

特别是我们这些Web/UI设计师,不管是设计阶段还是产出成品的效果,都和显示器息息相关的。

那么WEB/UI设计师要从那些方面来选择显示器呢?

小编认为主要从以下四个方面考虑:

1. 分辨率
2. 色彩
3. 健康
4. 性价比

一. 分辨率

现在做天猫电商之类的首页设计,最常用的宽度已经去到 1680 – 1920 像素,而 APP UI 界面也要从 @2X 的尺寸做起,如果还在用低分辨率显示器,会有着各种不爽。

举个例子,设计一个电商首页,默认新建一个1920*1080像素的画板,原图如下:

原图 1920p*1080

下面我们来比较一下同样尺寸、不同分辨率的显示器来展示在PS设计时的效果。可以着重看看网页页面和PS工具栏的大小~

图1: 1366*768PX(通常是普通笔记本的分辨率)

和原图对比,在PS画板的可见区域十分有限,设计元素时,会非常频繁地移动画板,我想你移动画板的次数比设计的操作还要多……所以用这分辨率的显示器就不要用来做设计了,只会受气,直接淘汰。

图1

图2:1680*1080PX(普通显示器)

基本上可以看到网页“安全”区域操作,但不能以100%方式查看全貌,所以这种分辨率也可以淘汰了。

图2

图3: 1920*1080PX(普通宽屏显示器)

嘿,这个比上面2个好一点了,几乎可以看到全貌,但必备要在PS全屏模式下才能看到。所以这种显示器嘛,还能凑合使用吧。

图3

图4: 2560*1440PX(高分屏)

嘿,我想大家也看到了,在这个分辨率下,不需要缩放、不需要全屏PS就能看到作品全貌,极大提升操作效率。所以 2560*1440 像素是目前WEB/UI设计师们的使用分辨率。

图4

大家会发现同样大的界面,分辨率越高,画面越精细,这个从网页页面和PS工具栏的大小就可以明显看出来~

来个对比,只有高分辨率才是正确的设计方式^_^

宽屏还有其它优点的,比如双屏操作,这对于写代码时可非常方便,一边写前端代码,另一边可以预览网页效果。

说到写代码,就不得不说到显示器的旋转功能了。旋转显示设计,比如小编最近在使用的明基BL2420PT显示器就有这个强大功能,可以把屏幕90度旋转,一次可以看几百行代码也不是问题……

有时候要做一些天猫详情页,横屏设计时两侧的空白会浪费空间,并且不方便把控页面的整体情况。但是竖屏操作的话就会很方便了~

二、色彩

几乎每个设计师都会遇到“色差”问题,而小编觉得要彻底地解决色差问题,最最好的方法还是提高设计师的能力啦。

但是磨刀不误砍柴工,无论是新手还是经验丰富的设计师们,一台色彩准确的显示器一定可以帮助设计师们事半功倍。毕竟色彩好的显示器才能显示出作品的效果!

更何况像我们做Web设计或者UI设计,设计成品一般会在其他显示器上显示,所以对显示器色彩的还原度要求还是比较高的~

这是同一张图片在专业显示器和普通显示器上显示的对比图:

这张图片可以明显看出,与专业显示器相比,普通显示器的色差真的很明显。

因为当设计师自己显示器的色彩不精准时,如果客户显示器色彩精准,那就很尴尬了;而如果客户显示器色彩也不精准,那色差就会更大了!!!

色彩方面,设计达人网小编用 Retina 屏的 Macbook 和最近在使用的明基BL2420PT对比了下,肉眼是无法看出偏色问题。一般来看,虽然苹果笔记本并不如艺卓的显示器那么专业,但是色彩显示在业内也算口碑标杆,由此可见在色彩表现方面,明基这款显示器的确不错。

同时,我特地参考了一些考量显示器色彩的重要参数,BL2420PT的色彩的确达到了专业级别:

色域:100%sRGB。参考下图,一般显示器的色域是96%~98%sRGB。假如色域无法达到100%,那这个显示器就不能完全显示所有颜色。

而BL2420PT的色域达到100%,色彩就足够丰富了。

色深:8bits色深,最大色彩达1670万,色彩过渡均匀。

参照下图,色深值越高,图像表现的色彩也越多,由此一来,色彩的过渡会更加均匀,图像就不会出现颜色断层的问题了。

色准: △E<3,色彩更加精准,最大限度降低偏色问题。

△E是一个衡量色准的值,显示器△E值越低,色彩的精准度越高。可以参考下面的图片,△E越高,色差就越明显。

另外,这款显示器还有好多专业的画面模式,例如“M-Book”模式可以一键还原苹果色,因为这款显示器本身采用的是标准的sRGB色彩,苹果电脑的色彩与之相比会稍微偏艳丽,因此”M-Book”模式能让显示器更适合苹果用户~

三、健康

设计师工作时需要长时间坐在屏幕前,颈椎、腰椎有时候会不舒服,长时间盯着显示器看作图,有时候还会加班到深夜,眼睛疲劳酸涩那是经常的事情。

所以选择显示器的时候,最好还要考虑“健康”的问题。毕竟设计真是一个“高危”行业,新闻动不动就报导年轻设计师猝死……所以不仅要给自己买保险,更要选择一个有益健康的显示器给自己续命啊~

颈椎、腰椎保护:建议选择可以大范围旋转升降的显示器。

比如小编的明基BL2420PT显示器可以升这么高

也可以这么矮……

建议最佳调整高度是屏幕中心与眼睛能够平视。

眼睛保护:长时间盯着屏幕,甚至忘记工作环境的光线变化,眼睛疲劳,视力易受损。

建议选择能减少闪屏及有蓝光模式的功能显示器。

小编使用的显示器目前还有一个护眼功能,可以根据当前环境光自动调节屏幕亮度。开启这个功能也是超级简单的,只要和上图那样,按屏幕边框上的触摸按键,开启“眼睛保护”,就可以智能调光了~

但有个缺点就是,每次开机,屏幕都是最亮的,然后再慢慢变暗……

不过瑕不掩瑜,显示器能自动调节亮度,也算是帮了一个大忙~毕竟每次工作都废寝忘食的,天黑都不知道,屏幕太亮好怕眼瞎QAQ

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

汽车UI界面怎么做?来看特斯拉和Apple Carplay等高手的案例!

用心设计

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


现在市面上的汽车大部分都是过时的,没有吸引力的用户界面,正因为如此,很多设计师都在思考未来的汽车用户界面将会如何改善我们的驾驶体验。今天这篇译文,一起来学习特斯拉和Apple Carplay 是怎么设计的!

汽车行业似乎每天都有着新的发展。很多证据都表明在接下来的20年里我们将会看到比上个世纪都要剧烈的变革。因此,顶尖的数字设计师们应该把重点放在对这个行业的关注。那么,到底什么才是车辆用户界面的未来?它能从根本上改变我们和汽车之间的关系么?

下面是我收集的一些由全世界不同的设计师设计的美丽和未来的汽车抬头显示器、用户界面交互、第三方app控制器。这些设计想法,有一些是真实存在的,有一些还正在发展中。

特斯拉移动控制中心原型

uisdc-car-201610133

它为什么会让人震惊?

当你想确定你是否已经锁好车,关上灯,或者把你的车钥匙交给刚考完驾照的小屁孩的时候,你是否觉得自己是个偏执狂?

这个移动app可以让你在不离开座位的时候检查这一切,有一个柴油混合动力车?你甚至可以在你吃早餐的时候启动引擎。直观的动画会反馈你这个动作是否已经完成。

车载控制面板用户界面

uisdc-car-201610134

它为什么会让人震惊?

这个用户界面看起来是一个用肌肉记忆和手势驱动的通用控制模型,不同数目的手指可以触发不同事件,你可以通过iPad面板,无线鼠标等控制它。你可以通过动作来控制数值的大小等等。

这个用户界面去掉了所有需要用户记忆的小控件和视觉元素,从而你可以使用相同的手势或者它的变体,来完成多个不同种类的任务。

你可以在这里查看整个案例研究:A New Car UI

特斯拉仪表界面概念版

uisdc-car-201610135

它为什么会让人震惊?

汽车将会变得更加的智能,为我们的公共场所腾出更多的空间,并且汽车的功能也将变得越来越互相关联起来。随着这些发展,数据在我们面前将会变得势不可挡,试想一下不久之前,我们的手机和其它东西一样还是一个单一功能的设备。我们在我们看到什么和如何看上有我们的控制权,它应该变得更加自然和方便使用。人工智能和机器学习将会采取直觉控制。这个由Bureau Oberhaeuser制作的原型让我们提前看到了这一切的到来。

你可以在这里查看整个案例研究:Behance

远程车辆健康测试与控制

uisdc-car-201610139

它为什么会让人震惊?

当汽车所有的零部件都变成电子系统时,你想拿起扳手就能发现问题变得越来越不可能了。这个移动app原型试图用一种你能理解的语言去描述汽车当前的健康状况,让你知道你是否有必要在开启你的海岸线之旅前修一下它。

轮胎压力和气候的用户界面

uisdc-car-201610131

它为什么会让人震惊?

当进行轮胎检查时,这个界面将会告诉你每个轮胎的压力范围并且告诉你它们的极限在哪里。这个用户界面提供了如此重要的反馈,我觉得它应该被纳入常用标准中去。

Hudway增强现实显示器

uisdc-car-201610138

它为什么会让人震惊?

不用说大家都知道司机应该保持视线在路上,但是现在的手机导航都需要司机把注意力来回切换在手机屏幕和路面之间,这个叫Hudway的app把你的第二块屏幕跟挡风玻璃很好的结合了起来。你面前的那块挡风玻璃很有可能就是未来的显示界面。

你可以在这里查看整个案例研究:Augmented Reality Projections Turn Windshield Into A Navigation Screen [Video]

城市导览汽车应用

uisdc-car-201610132

它为什么会让人震惊?

这个用户界面对于勇敢的探险家来说非常完美,如果你想快速的知道你周围有什么,这个用户界面可以让你在有限的路线里来一段自发的旅行。

Apple Carplay

uisdc-car-2016101310

它为什么会让人震惊?

每个人都在关注它的到来,想都不要想,如果你已经有了一堆苹果的产品,你也会在你的汽车上装上它的。Apple Carplay将会是下一代的第二块屏幕。

数字仪表板集群显示器

uisdc-car-201610136

它为什么会让人震惊?

没有什么能和发动引擎点亮仪表,汽车轰鸣犹如巡游乐队组成的和旋一样。身边的一切,声音和延迟的视觉互动,都给与你感官的反馈。仪表会通过动画直观的告诉你,合适讲切入下个转弯,油量是否变低,以及胎压是否过低。

然而,用数字型号在方方面面代替模拟型号也会开始令人担忧,因为无法人工手动介入账款车子,当保险丝熔断,或者电子仪器故障时,汽车很快会失控。

特斯拉 iWatch UI 原型

uisdc-car-201610137

它为什么会让人震惊?

当可穿戴设备成为我们设备的一部分时,它很明显会帮助我们的手持设备分担掉一部分的操作功能。这个原型很好的说明了它是如何将这一切展示到手腕上来的。



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

筛选功能设计的思考总结

分享达人

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

 

需求描述

目前主要负责了好几个公务系统类的应用设计。这类应用功能繁杂,数据繁多,尤其是查看统计数据的时候,如果查看数据的时候需要不能通过特定条件快速筛查,查看具体某些的数据,那会耗费非常多的时间在浏览寻找上。比如,数据筛查如果按照道路地点进行筛选,每个地市的道路有很多,全部罗列出来很难找到想要的那个选项,于是就需要能搜索或是快速定位到那个选项。


常见的筛选方式参考

现在应用常用的筛选方式大致可以分成三类:1.tab式;2.列表式;3.标签按钮类。

1.tab式

这种筛选方式比较适合纬度比较单一的筛选,用户只需要左右滑动(或者上下选择),就可以快速浏览该分类下的内容,简单快捷无需复杂的操作。

2.列表式

列表式比较常见于某个大条件分类下有多个子分类选项时。比如,在排列方式选择下,有多种不同的排列方式提供给用户选择。

undefined

3.标签按钮类

标签按钮可以在用户已经筛选了某些条件时,通过“贴标签”的方式进行更的筛选,将筛选范围逐步缩小,让筛选结果更准确接近自己所求。

调整筛选方式

原本的筛选方式是tab+列表,多条件组合筛选。在这一部分条件复杂,并不适用标签类的筛选。在构思的途中,可以多与开发小伙伴们沟通,了解什么样的效果是能实现的,什么样的效果能实现但是需要花费比较多时间,什么样的效果是不能实现或是需要耗费大量时间研究如何实现的。许多开发小伙伴也会研究各种各样的应用,偶尔自己构思没考虑到的东西,他们也能通过自己的体验经验帮忙点出来。

undefined

undefined

总结

虽然现在各行各业都趋于互联网化,但是公务系统类的产品相对于面向大众的互联网产品还是有点区别。这类产品比起追求视觉更注重功能,功能好不好用直接影响到他们工作的效率。这类产品在设计上不仅要顾及使用这类产品的用户是哪一类人、处于什么年龄段、一般要处理什么类型的工作,还要了解他们平常是如何处理这些工作,如果工作流程复杂能不能简化、该如何简化等。所以在设计上,会有非常多的限制,不能有过于花俏的设计在。页面看起来美观的设计有时候会牺牲掉一部分信息的展示,这并不适合在这一类应用里过多出现。由于功能多,页面也会随之增加,一定要制定并及时更新设计文档,保证各页面之间风格统一,迭代更新也得慢慢来。

 

 


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

 

设计大师眼中的设计

蓝蓝

为了创作出独特的东西,你的所有大脑神经必须集中在微小的细节上。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档