面对企业级产品,由于系统复杂度和业务领域的专业壁垒,用户、产品、业务、技术的理解和分析难度都远远高于C 端。特别是进入业务深水区,技术术语层出不穷,角色链路错综交织,场景越来越复杂,在理解和分析业务上设计师需要耗费的精力越来越多,设计师如何高效且深入的分析业务,直接影响到设计解决问题的深入度。基于蚂蚁金服CTO 线的业务土壤,我们不断尝试打磨,探索出以JCD 为核心的企业级产品设计思维,助力设计师在深耕业务上有章可循,有方法可用。
做企业级产品 3 年多,刚从 C 端业务转过来时,最大感受是对业务理解起来很艰难。随着经验的增加,对 0 到 1 产品驾驭起来轻车熟路,可到业务深水区,还是感觉痛苦。技术术语层出不穷,用户角色多,一个用户身兼数个角色,系统之间的关联关系也很复杂,随着业务的深入设计师会感觉对产品逐渐失去掌控力。一个简单的芝麻信用分,需要 20-30 个中后台产品和各种角色一起协同支撑。然而复杂是守恒的,系统复杂性的总量是一个衡量,当前台的呈现更简单时,隐藏在幕后的复杂性就增加了。
我们面临系统的复杂性表现在三个方面:
多角色,重协同。
链路长、错综交杂。
技术术语多,业务难理解。
但企业级产品会有一个主线,是从「事情」的角度出发,关注一件又一件事情被完成。企业场景下我们再把事情描述的具体一些,就是一个又一个的 Job 。设计师要做的就是通过设计,包括参与的角色、使用的工具以及协作方式等,让 Job 被高效完成。
我们先对比一下,从「用户」视角和从「Job」视角出发,关注的维度有哪些差异呢?从用户视角出发我们需要关注用户的个人痛点、情绪、兴趣、人种志(年龄、性别、收入)等信息,会更关注人,核心是为了满足用户的需求。在Job 视角下,需要关注 Job 的目的、参与角色、协作方式、工具等信息,而且 Job 对角色是有要求的,比如航空公司飞行员,按岗位要求,他需要不断提升自己业务能力,每年要去复训两次,学习新的技能和知识来满足岗位对飞行员这个角色的要求。
基于我们的业务土壤,以及出发视角,我们探索出一套适合企业级产品的设计思维,JCD(Job - Centered Design )以 Job 为中心,设计完成 Job 所需要的一切,包括角色、工具、协作关系等。以 Job 被高效完成为决策依据的设计思维。它是一套适用于企业级产品设计的发现问题、解决问题的方法论。
在 JCD 设计思维下,将设计流程分为四个阶段,发现、构思、呈现、度量。每个阶段下有不同的方法、产出、资产。Ant Design 在「呈现」阶段帮设计师大大提升了效能,设计师才有更多的精力投入到「发现」阶段去更深入去理解业务和角色。接下来重点分享一下在发现阶段的两个方法,角色分析和业务分析。
常用的 C 端的用户画像,如下图,会关注用户人口统计学的信息,如名字、性别、年龄、所在地、家庭情况、用户的习惯、爱好等信息,这些信息在复杂的企业级产品中是不需要去关注的。
在JCD 的视角下,我们企业级产品的角色画像应该关注的三个维度:角色概览、工作能力、工作内容。而工作内容是最核心需要关注的信息,包括了工作的描述、工作的痛点、需求和使用的工具。
一个角色往往需要完成多个Job,描述一个Job 包含:
四要素:情景、角色、活动、目标。
一个句式:在什么情景下,角色需要完成什么样的活动,来达成一个目的。
举个例子,在飞行前 1.5 小时(情景),角色(飞行员)需要去查看飞机情况(活动 A )、气象情况(活动 B ),来判断能否起飞(目标)。
为了给设计提供具体的依据,我们需要进一步纵向解构Job,来构建 1 个完整 Job 场景,设计师可以阶梯式对一个 Job 进行拆分,Job 下面有多个 Activity,Activity 下面有多个 Task 组成,Task 下面有不同的 Action,到这种颗粒度可影响到设计界面中的具体元素。
看一个具体案例,如何拆解一个 Job,首先用我们的上面的四要素和句式描述。Job:飞行前 1.5 小时,飞行员需要查看飞机情况、查看气象情况,来判断能否起飞。在飞行员这个角色的 Job 里包含了两个 Activity :1. 查看飞机情况;2. 查看气象情况。查看气象情况这个 Activity 下包含了三个 Task:1.查看起飞地天气;2.查看降落地天气;3.查看备降地天气。
每个 Task 下面会有不同的 Action。除了 Job 的纵向拆解,我们还需要关注每个 Job 场景下的需求、痛点、费力度、成就感。
做好一件复杂的事情,往往需要多个角色在多个工作场景中协同配合。我们会以Job 场景为核心,梳理角色之间的协作关系,建立全局视角。比如,在飞机起飞前,机组飞行员查看飞机和飞行信息、查看起降地天气等;同时乘务组空姐们为此次飞行做相应准备工作。准备完毕,机长会通知机组和乘务组开始登机。上飞机后机组需要检查驾驶舱情况,乘务组检查客舱情况,检查完毕,会一起协同机场地勤人员安排乘客登机。完成登机后,飞行员需要联系机场管制申请起飞........ 设计师可以通过Job 场景去串联角色之间的协作关系,如下图。
以上是「角色分析」的方法,是从 Job 出发洞察角色的工作需求以及协作模式,帮助设计师构建角色协同的全局观。
业务分析的方法是借鉴面向实体的思路帮助设计师去深入分析复杂业务。企业级产品中会有各种技术术语、复杂的数据流转、业务逻辑等,我们需要一个系统的方法来分析和理解业务,为设计提供准确有深度的信息输入。我们的用户大部分是软件工程师,这个思路可以让设计师在理解和认知上对齐用户的心理模型。我们业务分析的有三个维度:
产品定义
实体建模
业务逻辑
通过以上三个维度,从纵向和横向去深入和全面的理解业务。
通过沟通交流、桌面研究的方法,去了解产品和用户相关信息,熟悉相关概念和技术背景、沉淀信息资料,来收集产品的信息,具体的产出有名词库、产品画布、产品的关系图、业务结构图、产品形态图等,这里不展开详述。
实体建模是本次分享的重点,实体建模按照面向实体的思想分析业务,围绕实体进行问题和内容抽象和分析,聚焦于产品内实体和实体间的关系,以及实体的生命周期的分析。
我们先看什么是实体,参考领域建模(此处感谢幻星给实体的定义)给实体一个定义:实体是产品中客观存在,具有唯一标识的并可以相互区分的业务载体,通常包含属性和行为。
企业级产品系统的实体,很多情况下都是熟悉的字母,陌生的单词,在设计之前设计师如何去准确、系统的去分析实体。
举个例子,现实世界中,「机票」是一个实体,在产品里,可以把「机票订单」看成一个实体。围绕着机票订单,我们梳理出它的基本属性信息,以及它具有的所有状态和对应操作,设计师可以进一步把这些状态和操作梳理出一个「机票订单」这个实体从产生到消失整个生命周期经历的过程。这些分析可以作为后续任务流程和设计细节的信息输入。
一个实体不能构成一个产品,一个系统会有很多实体存在,我们需要进一步去梳理「机票订单」与系统中其他实体的联系。在下图的案例中,机票订单与机票是聚合 n:1 关系, 一张机票订单会包含多张机票,机票订单与收支明细是关联 1:n 的关系,一张机票订单会关联到多个收支明细,比如会有支付成功、退款等明细。
以上是实体建模的过程,产品定义和实体建模都是对业务内容层进行理解和梳理。但是我们的业务除了内容外,还有很多复杂的业务规则、业务流程,我们也需要进行梳理和分析,这样设计师才能对业务有全面的理解。
所以我们需要把结合实体、业务规则、业务流程,进一步梳理业务逻辑。最终会得到一张业务逻辑图,不仅能够帮助设计师洞察到业务的本质,也能帮设计理解业务的全貌。
第二个方法业务分析,是通过面向对象分析思路去深入的理解业务,为设计提供更精准,更有逻辑的依据。
回顾以上三部分内容,JCD 是什么?Job - Centered Design 是以 Job 为中心的设计思维。JCD 的定义:以 Job 为中心,设计完成 Job 所需要的一切,包括角色、工具、协作关系等。以 Job 被高效完成为决策依据的设计思维。它包含了原则、流程、方法&工具、产出&资产,上面重点分享了其中两个方法「角色分析」和「业务分析」。
文章来源:站酷 作者:Ant_Design
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这是5月参加阿里设计周“智能与计算”分论坛后的感想小结,因为论坛大部分在讲算法和实现方式,所以在这里我就其中的AI与设计相关部分做一些深入分享。
我的思路大概分为三个部分:AI时代的来临;AI如何影响设计;未来的设计何去何从。
第一部分:聊聊AI时代来临,设计的世界发生了什么变化?
每个时代的设计都有不同的定义,农业和工业时代的设计更多是指设计师通过手工制作的方式阐释自己对美感和艺术的理解。
到了信息时代,设计除了要考虑美感,还要考虑是否实用和好用。设计的对象开始从真实世界转向数字世界,设计思想开始考虑以用户为中心的设计;设计方向也增加了很多领域,包括都多媒体艺术、游戏设计、网页设计、移动应用设计等。
在人工智能时代下,AR设计、智能硬件逐渐发展,设计的改革更多考虑的是如何将真实世界和数字世界进行融合,如何在自己产品上更好地阐释艺术、美感和实用性。
第二部分,AI如何影响设计,设计因为人工智能而产生了哪些改变呢?
结合论坛的内容,我觉得从以上五个方面产生了较为深远的影响。
人工智能帮助设计师解决在创意过程中面临的一系列问题,将重复劳动变得自动化 ,节省设计师大量的时间,减轻设计师的工作量。
数据驱动自动生成,取代人工建模,减少了设计的时间成本。通过组件标准化,来构建三维几何,然后geometry格式入库,最后由渲染引擎绘制。
再比如,双11期间有1.7 亿个BANNER,都来自阿里的“鹿班”AI设计系统。设计数据—机器学习、训练模型—生成设计结果并评估。如果这些工作量由人工来完成,那么设计师真的就成了“没有感情的作图机器”了。
当今社会,随着产业智能的发展,在这个变革中,挑战不单单来自技术,也来自客户对智能数字体验的极致追求。这给开发人员和设计师都提出了全新的难题,在可视化领域,通过技术和设计两个角色更紧密的捆绑,产生了让人欣喜的化学反应。
从原始数据到图表并不是直接的,它需要经过交互的分析,得到指标结果,最终以可视化图表呈现,而呈现的视觉方式是多样化的。
这就是所谓的两种数据,三层讲述:
第一步是原始数据的准确转译,工具需要数据对接能力,即对现状的讲述。
第二步是分析过程,从脚本模式跨入数据驱动,让数据的分析变得可知可信。
第三部是观点数据的表达,也就是创作强化,将结论以可视化的多样形式被表达。
这是根据地图的原始数据得到的多种可视化设计方案,同一份原始数据,却得到了不同的形式表达。
因为仅仅有准确的数据结论是不够的,因为数据需要更好地被讲述和表达,如果仅仅将数据呈现给用户,那么理解难度将会大大提高,而设计是为了让产品变得更加容易使被理解和使用。
第二点,体现在建筑的三维可视。
首先,在二维地图选取建模范围,通过智能化的处理,根据数据构建初始的三维地图。
然后通过数据联动,将城市建筑虚拟还原。
整个过程从数月—> 数周—> 数天,时间大大缩短,人力成本减少,释放更多的精力去进行创意工作。
建筑三维化的应用:比如车道级地图。
相比于传统地图,车道级地图导航在信息精细度、定位准确性、动态信息丰富度上有大幅提升。
车道级导航能清晰显示道路上的虚实标线、自己的车行驶在哪条车道上,还能在地图上看到车身摄像头和雷达检测到的周围车辆、锥桶、防撞桶等。
当设计对象从单个产品转变到用户的经历和当前环境时,设计师不能只考虑自己的产品体验,需要从大局出发,思考每个产品之间的联动,考虑不同场景下自己的产品如何服务用户以及如何与其他产品联动。产品设计从单体变成一块需要考虑兼容上下左右外部环境的拼图。
智能化的场景的改变对设计有哪些影响呢,我们来看这张图:设计的场景从有形—>无形、静态—>动态、永恒—>瞬间的转变。体验设计的趋势从GUI到TUI(实体交互),再到Radical Atoms,场景的改变对设计的影响维度不是单一的。
设计场景在AI时代不仅局限于手机,还涉及到实时场景的设计情况。
比如谷歌的实时翻译、语音翻译。输入与输出是同步进行的,这就对设计提出了新的要求。
此外,还有语音智能VUI,彻底打破了以往的交互体验,改变了人和工具之间的互动关系,反向塑造着人类的认知方式和学习行为。下面来看一个小爱5.0案例:
对话是人与人之间交换信息的普遍方式,语音交互设计涉及系统学、语言学和心理学,因此它比 GUI的交互设计更加复杂。
体验设计经历了PC时代、Mobile时代,现在进入IoT体验时代。设计的解决方案与技术的发展息息相关,设计和技术互相促进带来新的体验革命,设计师一直在探讨和实践在新技术环境下的新体验设计,并基于出行、医疗、社区、政务等行业持续挖掘服务聚合模式与场景体验的创新。
在新零售的场景下,购买和支付流程发生了改变,这就需要设计师重新思考消费者的心理地图。例如无人零售、Amazon Go、支付宝IOT支付等等。下面来看一下Amazon Go的案例:
如何让用户使用更便捷、体验更顺畅;要向用户提供什么样的服务,如何让用户注意到我们的产品,如何向他们传递企业的服务价值和特点,这是IOT新零售下需要设计深入研究的方面。
在云端实现企业产品的全区域管控,监控的设计视觉和交互又是不一样的,比如论坛上的案例:荷鲁斯之眼、全区域覆盖的云监控等等。
通过对多个实体空间中的数字设计探索,重新塑造人与空间的交互界面,提升人们对于空间的使用体验。下面举个例子:
AT&T discovery district是一个数字化的互动商业社区。
它从重新审视建筑本体开始。通过虚实和光影的变幻,营造出了实体空间体验,空间本体就是对话的那个界面。实体空间和数字内容的结合,构建出人与建筑之间新的交互界面。
广场的数字球体入口,人的位置和数量变动,球体内的灯光也会跟随变动。
人工智能促使了交叉学科的工种产生:数字体验设计师、创意工程师。这两种职业是做什么呢?面对正在到来的智能时代,体验设计师和创意工程师将共同面对“AI”这一全新的命题,在智慧工地、智慧教育、数字警务室、神经符号AI等应用中,提炼出智能感设计方法、利用图形技术能力自研产品并赋能业务。
数字世界中的设计师:横跨了艺术、文化、科学、商业多个学科;从传播学、心理学、应用科学和统计学进行用研,去解决用户遇到的问题。
它不仅涉及到需求分析和产品设计,还贯穿至产品运维、测试、发布、分析,从设计洞察中做出创新设计。
未来的设计师将融合人工智能和创意编程技术,在世界数智化的大潮中找到新的定位和新的机遇。
第三部分,在人工智能时代下,未来的设计会走向哪里?新时代的设计师怎样找准自己的定位呢?
人工智能的成熟对部分设计师来说简直是灾难性的打击,之前无论是通过技法还是数据分析才能完成的工作,人工智能一下子就可以完成,后续根本不需要这么多设计师来完成这些工作。那么设计师是否会被人工智能取代?我们先来看一张人类能力地图:
这张图中,海拔高度代表这项任务被计算机执行的难度,不断上涨的海平面代表计算机现在能做的事情。从图中可以看出,目前人工智能水平预警线距离代表艺术的山峰还很远。
人工智能没有人类的跨领域推理、抽象类比能力,也没有人类的主观能力如灵感、感觉和感受;更没有人类特有的灵魂、爱、意识、理想、意图、同理心、价值观、人生观等,这导致人工智能在未来很长一段时间内都无法很好理解人类的心理和行为是什么,在解决推理和情感问题时会不尽人意。
设计除了解决问题外,还涉及对美的理解和创作,美感是对美的体会和感受,它是复杂的,包含了历史、文化、环境、情感等客观因素和主观因素,所以在不同的时代、阶级、民族和环境中,有着不同文化文化修养和个性特征的人对美的定义也不同。
人工智能依赖数据和经验解决问题,它能解决大部分智力可解决的问题,但解决不了需要情感和美感才能解决的问题。而设计的擅长领域,是人工智能不擅长的:跨领域推理、抽象能力、常识、审美、自我意识与情感。那么AI与设计的关系怎样的呢?
设计是为了解决问题。人工智能使机器代替人类实现认知、识别、分析、决策等功能,其本质是为了让机器帮助人类解决问题,也就是说,人工智能在一定程度上也是一种设计,它会创作出与人类思维模式类似的解决方案。所以AI与设计师是一种共生关系。因此设计师不用杞人忧天,担心自己被人工智能取代。
随着AI 技术的成熟,设计必定会发生新一轮的变化,在未来,更多领域和行业需要用到界面设计、人机交互等技能,各行各业的设计师需要掌握以上技能才能更好地服务当前业务。那么未来的设计将走向哪里呢?
新一代的设计师是“与互联网共同成长的一代”,相信在未来几年里有更多的新晋设计师会掌握编程开发能力以及其他能力,综合素质会比目前的设计师更强,所以我们要保持终身学习,懂得如何将自己的能力和经验转换为优势,这样才能在设计道路上不被超越。
那设计师可以从哪些方面来应对智能时代的机遇和挑战呢?
每一代人都有被下一代人取代的风险,但有些很厉害的人就不容易被取代?因为他们在不断创造价值。无论在社会、行业还是在企业里,当具备一定的影响力后,他们能更容易积累人脉和资源,然后反哺自己的价值,就跟滚雪球一样,当雪球越大,他们越不容易被别人取代,设计师需要有这样的意识。
设计师需要懂得更多领域的知识和技术才能拓宽自己的视野,这些领域包括但不局限于传感技术、网络技术、智能仿真技术、虚拟技术、生物技术、纳米技术等。因此科学与艺术是可以并且很有必要相通与交融的,设计师一定要学会跨界思考。人工智能时代下,数字世界和物理世界会逐渐融合,大到城市建设、公共服务、衣食住行和医疗;小到智能家居、穿戴式设备,这些机会将会留给已准备好的挑战者,所以设计师一定要拓宽自己的视野,不要把自己的目光局限在界面设计上。
如果不想被人工智能领先,人类的设计应该是创新的(未成熟、未被发现规律的),包含更多元素的(更多复杂参数如历史、文化、环境、情感等),“设计”这个词语就涵盖了以上元素。人工智能在艺术设计上还远远达不到人类的水平,深耕艺术设计将会为设计师带来更多机会。
在人工智能时代下,当产品基本都能满足永不需求时,能为产品带来活力和差异的除了自身的底层技术基础,更多的是艺术型设计师的理念和风格,以及自身的品牌。就像时尚品牌优衣库和Gucci,单件商品两者的品牌和设计所带来的的利润差距巨大,相信未来的人工智能产品也会面临类似的问题,设计师应该考虑如何为产品赋予更多价值,如何彰显用户的个性。
既然AI是一个强大的工具,那么我们要思考如何运用它来创造更多的价值。AI能够快速便捷地获取大量信息,帮助设计师拓展自己的视野,不断更新自己的世界观,从新的视角看待问题和解决问题。除了快速获取信息外,设计师也应该考虑如何通过AI提高自己的工作效率,例如哪些纯劳动力工作交给AI去做效率会更高;哪些工作可以和AI一起协同完成更能激发创意。
最后,用一本科普书改编的话来结尾:一想到,还有95%的问题留给开发同学,我就放心了。
最后附上一张本文的脑图:
参考资料:
[1]阿里设计周.智能与计算.2021
[2]薛志荣.AI改变设计.2019
[3][美]詹姆斯·弗拉霍斯.智能语音时代.2019
[4][美]梅瑞狄斯·布鲁萨德.人工不智能.2018
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
智能家居越来越普及,智能化的生活是由一个个智能设备组成,这次通过近距离体验智能面板,来研究一下它们是如何提升产品体验的。
随着互联网的发展,生活智能化越来越普及,各类智能产品逐渐出现到人们面前,在体验的过程中,其实里面有很多细节需要深挖和思考。很多产品细节的背后都是为了提升用户操作效率、兼容用户使用场景、满足用户情感表达,以最终达到对用户体验的提升。作为智能产品的设计师只有充分了解市面上的智能产品,才能设计出更好的产品。
开关对于每个人都不陌生,它用来控制设备的状态,传统开关的数量和要控制的设备数量有关,设备越多,开关越多,为了简化人们的操作,智能面板孕育而出,它不仅可以操控家中单独的设备,还可以对一系列设备进行联动控制。
1. 使用场景
室内近场控制,满足用户家中近距离控制设备的场景。
2. 产品选择
Gira、ORVIBO、绿米
为什么选他们?
3. 研究方向
本文将从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。
Gira g1
TFT 屏、KNX 协议、定价 8000 元起
KNX 属于欧洲总线技术,稳定性最好,需要从设计阶段介入,高门槛的技术要求让 KNX 难以实现全民普及。
ORVIBO 智能开关
多点触控电容屏、Wifi、蓝牙、Zigbee、定价 899 元
Wifi、蓝牙、Zigbee 属于无线通信技术,稳定性不如 KNX,但免布线,易扩展,利于全民普及。
Aqara 智能开关 S1 触摸屏
IPS 屏、zigbee 协议、定价 899 左右
通过以上分析,Gira 的人群定位是有全屋定制需求的高消费人群,其他两个品牌的人群定位是面向尝鲜体验的广大普通消费群体。
1. 功能点对比
通过功能列表中的对比发现,三个品牌的产品都通过场景联动设备执行来提高人们的操控体验,通过左右滑动来快速切换功能模块类型;
Gira 和 ORVIBO 支持快速返回首页、面板内排序;
ORVIBO 的个性化体验最好,它具有语音控制、设备自动添加、设备自动归类功能,这些差异点让它比其他两个产品更加智能。
以 Gira G1 为例,从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。
界面整体用以黑白灰为主,搭配少量颜色,给人简洁干净的感觉;
思考:智能面板除了具有功能属性,还具有装饰属性,黑白灰为经典搭配,可以更好兼容各种家装风格,还可以更好的展现内容;少量的颜色用来强调正在运行的设备状态。
辅助色大方向上使用两对互补色,在色环上形成了一个矩形,通过调节亮度饱和度达到统一和谐多彩的效果。
主要分为 2 大层级:功能卡片列表、设置为第一层级,设备控制为第二层级;
对于 gira 这种全屋定制的产品,家中一般会有很多设备,功能卡片放置在第一层级的好处是,便于用户浏览锁定目标功能卡片。
区域 1 显示 KNX 协议类型,室内外温度,时间;这部分内容占比很小,说明这些内容用户不常用,但用户会偶尔还是会看一下;
区域 2 为房屋名称,返回上一级、返回首页、设置、展示形式切换,这一区域全局置顶显示,用户在多级操作后,可以很快速的返回到首页;
区域 3 显示设备、场景的数量,用户可以清楚的掌握家中设备场景的数量;
区域 4 为设备场景列表,用灰色背景来强调主操作区域。
一屏最多 6 个设备,通过左右滑动来展示更多设备
思考:为什么不是上下滑动,而是左右滑动
有 2 点猜测:
卡片内容从上到下依次为设备场景 icon、名称、状态及快捷操作;
用户可以通过 icon 快速锁定设备类型,通过名称确定目标设备,进行快速操作;
各功能模块独立划分,快捷操作区域可以很好的兼容不同设备的功能键。
操控界面划分为 2 部分,一部分为信息展示区,内容为设备名称、所属区域;
另一部分为控制区,这部分区域固定,可以让不同的设备控制看起来更统一;
大面积区域留给核心功能,辅助功能布局在四周,便于用户准确操控。
设备控制界面通过左右划动快速切换其他设备,不需要返回菜单界面。
手掌长按屏幕,可唤起提前设置好的开关功能,这时面板相当于简单的开关,可以很快速的关闭开启所在区域的灯。
Gira 这样做还原了开关的本质,当想要开启或关闭该房间内的灯时,就不需要到菜单界面找这个设备了。
灯
灯操控界面用刻度形式表现,每一度为一个刻度,并且还可以通过中间的加减号进行精确到 1 个百分比的亮度微调,品牌方想为用户打造成清晰准确调控的形象;
但在实际使用场景中,我们不大会对灯进行这么精确的调节。
温控器
温控界面同样可以精确调节,每 0.5 摄氏度为一个刻度;
温控的精准调节,就比较贴近我们日常的使用习惯,温控器控制界面是没有开关的,因为目标人群家中多数是中央空调,随便就可以关闭,对于大户型的用户来说是不友好的。
右下角的定时按钮可以让设备在特定时间内以某一状态运行。
窗帘
窗帘的状态值与操控条左右排列,这样的排布好处是可以让操控条长度最大化,便于用户控制;
窗帘控制界面只分为有调角度的和没有角度的;
窗帘操控条竖直排列,向上滑到顶部为窗帘全开,滑到底部为全关;
窗帘的行程和角度都用百分比的形式展现。
设计设备控制界面的思考方向一般有 2 种:
1. 界面控制方式要和设备的实际运行方式一致
这种思考方向要考虑实际窗帘有左右运行和上下运行之分,上下划动的操控方式来控制左右运行的窗帘会有认知上的偏差;
百叶帘的角度有正向和反向转动之分,如果只按最后的遮光百分比来做,会造成设备兼容问题。
也就是说为了模拟真实的操控方式,需要设计出若干不同种类窗帘控制界面。
2. 界面控制方式与设备运行结果关联
这种思考方式不需要考虑窗帘的种类及开合方向,将所有种类的窗帘行程及角度归为开、关两种结果状态,
就像 Gira 这样,只需要做两套界面就可以兼容几乎全部的窗帘设备。
Gira 竖排控制条的优势
如果横向布局,那么左右滑动切换设备时,会触发控制条左右手势,造成误操作。
背景音乐
设备列表中背景音乐卡片的快捷按钮很特别,由静音、播放、下一曲组成,我们设计的时候一般会做成对称的:上一曲、播放、下一曲,Gira 并没有这么做,因为在背景音乐的使用中,一般有几种需要快速响应的场景:用户在家中发起临时谈话,需要暂时安静一下;不想听了;这首歌的风格不喜欢;
背景音乐操控界面功能和音乐应用差不多,唯一不一样的是,底部可以快速切换歌单,可以很快速切换不同音乐风格。
文件夹功能
随着设备、场景的增多,用户可以根据自己的喜好将设备或场景归类放置,便于快速定位功能卡片;
点击文件夹卡片,进入到显示着众多功能名称的文件夹界面,点文件夹,才能进入功能卡片列表,为什么要多一个文件夹查看的界面。
我们想象一下有这样一种场景:面板中有几十个功能卡片,用户想开启娱乐场景,这个场景好像在客厅文件夹或走廊文件夹里,于是去客厅文件夹快速翻看这里面有没有,再点进去操作。
Gira 这样做符合用户在功能卡片多的情况下快速选择的习惯。
排序功能
可以通过拖动来调节设备卡片在菜单中的位置,省去了去后台设置的步骤;
定时功能
定时列表用具象的时钟来体现开始运行时间,还用黑白来区分夜晚和白天,对于用户来说扫一眼图片就可以知道运行时间,这种体验很好。
以 ORVIBO Mix Pad 为例,从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。
整体运用深色色调,使用几何图案作为背景;
用白色体现基础信息,用色彩强调设备场景的状态及天气信息;
运用圆角元素,更加生活化。
颜色运用比较丰富,以蓝、橙两互补色为主,其他颜色分别为它们的邻近色;既能保持强对比,还能让颜色变得柔和。
主要分为 2 大层级:首屏、设备控制界面、场景列表、闹钟为第一层级;设备类型、设置为第二层级;
智能面板一般装在墙面,用户站立操作,用户不可能花太长时间来操控;
欧瑞博的人群为广大普通消费群体,家中的设备不会太多,设备控制界面层级前移,可以方便用户直达控制区,用完即走。
首页主要分为 2 个区域:
日期天气区
时间、日期、天气状况信息,可以满足用户日常出门关注的内容,并且在这个区域有多种表现形式供用户选择,既保持个性化还不失统一感。
快捷控制区
可以将常用的功能置顶在首页展示,最多设置 2 个,用户在首屏既能看到日期天气还可以控制设备,大大提升了屏幕的利用率和用户的操作效率。
这样做的好处:
当用户准备出门时,看了一眼面板上的天气,点一下关玄关灯,就可以直接出门了,不需要滑到灯的菜单界面找到玄关灯然后再关闭它,真的很方便。
底部有向上滑动提示,告诉用户下面还有重要内容。
卡片内容左右排布,从左到右依次为 icon、名称及状态、快捷控制,这种排布的好处是可以缩小每个卡片的高度,从而提高屏幕利用率;
但有个问题就是,左右排布的方式,内容最多呈现 4 个文字,需要考虑这几个字能否清楚的定义该卡片功能。
上滑可以查看全部功能卡片,给用户在手机上浏览信息的熟悉感;
在新的操控设备运用用户熟悉的交互方式可以降低用户的学习成本;
移动端上常见的手势对应结果有:左右滑——代表切换,向下滑——代表唤起相关功能设置,向上滑动——浏览更多信息。
用户在首屏左右滑动就可以切换不同功能模块,不需要返回上一级,在设备类型少的情况下,这种盲操会比较方便。
下滑进入功能类型选择、系统设置界面,这一区域相当于导航,可以实现功能模块间的快速切换。
多种手势的组合可以在有限的屏幕内操作更加灵活,但手势太多会带来一些问题:
针对以上问题解决的方法可以是:
场景卡片分为未激活、运行中、运行结束三种状态;
场景运行状态变化在卡片 icon 区域体现,既传达了运行的过程,又不会打扰到用户。
点击卡片列表最底部的编辑按钮,可以选择将某一功能卡片置顶到首屏,方便用户快捷操作。
将普通灯、场景、门窗等操控方式相近的设备进行了归类显示,并且和空调、色温灯、背景音乐等设备放置在同一层级;
从交互体验层讲:由于家里的普通灯、场景、门窗的操控方式简单统一、数量多,按照类别整合在一起便于查找控制;
从视觉层讲:设备操控界面布局形式多,会给用户造成整体视觉上的不统一,增加学习成本。
空调
空调控制界面,只能通过左右滑动以整数的形式来调节温度,开启中的时候,背景会有对应模式的色彩氛围效果,给用户更直观的感受;
底部只保留用户最常用的模式、风速、风向三个功能。
色温灯
色温灯界面默认为用户推荐 6 种不同场景下使用的色温选项,底部提供亮度调节功能,用户只需要去选择,大大缩短了用户的操作路径。
个性推荐在电商类产品中很常见,推荐机制基于对用户行为习惯的分析,需要强大的后台数据支持,智能家居这一块通过穷举用户生活中的设备使用场景、目的从而提炼出对应的功能选项可以大大提升产品使用体验。
窗帘
窗帘控制界面采用半写实风格,给用户更加直观感受,学习成本低,拖动窗帘区域就可以进行行程的控制,由于没有微调按钮和行程状态百分比,所以无法做到窗帘精准控制;
选择这种写实的设计风格,需要考虑设备控制界面布局、样式对新增窗帘类型的兼容性。
背景音乐
背景音乐默认界面只保留了当前播放音乐封面元素,更多复杂操作被隐藏到了下一级界面,用户在当前界面可以进行暂停、播放、收藏等简单操作;
在小屏幕中做设计时,有时候会在一个层级界面中堆砌许多功能按钮,使界面变的臃肿,一来容易让用户误操作,二来让用户找不到重点功能,操作效率低下;
我们在处理这些信息时应该结合使用场景,按用户的使用频率进行权重划分,将权重低的进行隐藏处理,突出核心功能,减轻用户操作负担。
智能家居厂商大多都是靠卖硬件赚钱,欧瑞博巧妙的运用会员机制结合背景音乐功能来售卖音乐服务(49 元一年),更加具有互联网商业思维。
在语音设置中,可以选择是否开启语音控制,系统默认 2 组唤醒词激活语音控制;
欧瑞博为用户提供了更便捷的语音控制功能——快捷口令,说出指令就可以快速执行,由于没有房间、设备名称的限定,这个功能只能实现面板内所有同类型设备的开或关,适用于小户型简单的场景。
传统上添加一台新设备需要:选择要添加的设备——选择网关——输入正确Wifi密码——进入设备配网流程——配网成功——设备名称设置,操作流程繁琐,中间稍微有些环节没有操作对,最后就无法成功添加设备,欧瑞博通过简化中间过程,成功解决了这一痛点。
用户可以在面板中直接设置首屏的风格样式,系统一共有 3 种风格外和一个随机演示选项供用户选择,并且这三种风格的功能架构是一样的,只是对背景图、元素大小、布局做了设计区分。
以 AQARA S1 为例,从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。
整体使用黑色做背景,用白色体现基础信息,底部的色块元素貌似起装饰作用,和天气情况并没有联系;
首屏主要分为日期时间和环境状况 2 个区域,天气、温度、湿度、空气质量信息并行排列,个人认为用户对这 4 个信息的关注度是不一样的,看看我们手机上的天气 app 的信息排布就知道了,这样并列排布会让用户分不清主次。
颜色以蓝色及其邻近色为主,搭配少量的对比色,整体色调统一。
主要分为 2 大层级:首屏、设备控制界面、场景列表为第一层级;设置为第二层级;
形式和欧瑞博一致,都是为了让用户更便捷的操控;
但进入设置页面,设置主题类型的步数比欧瑞博的多一步,用户设置完成后还得一步步返回,这里可以将用户常用的“显示”内容上移一个层级,减少页面跳转次数;
AI 手势这种有特色的功能隐藏的太深,不便于用户的使用。
绿米同样运用左右滑动进行首屏、场景列表、设备间的快速切换,对于相同类型的窗帘设备,并没有整合成列表放置同一屏,而是另起一屏,设备多的时候就会存在操控效率低的问题。
下滑进入系统设置界面,这个区域只有一个设置功能,有点浪费空间,索性就把设置下一级的功能选项移到下拉页面,还能提高用户的操作效率。
场景运行过程以进度条的形式在卡片底部体现,对用户的干扰小,并且只传递出开始到结束的过程,没有成功提示,这种逻辑是正确的,因为面板只是传达出了一个命令出去,具体什么时候传出、接收设备是否正常运行,这些信息面板是获取不到的。
场景列表与设备控制界面一个层级,温控器、调光灯运用半圆的元素作为控制区域,新颖的设计风格是绿米智能面板的特色;
仔细看,会发现设备控制界面不统一,相同功能的开关按钮,在不同的设备中位置却不一样,还有就是普通灯是偏写实的 3 路开关样式,其他界面却是抽象的圆环几何样式,不统一的界面会增加用户的学习成本。
空调
空调控制界面,通过上下滑动以整数的形式来调节温度,新颖的操控方式让用户加深对品牌的印象;
底部开关、模式、风速同级展示,这里存在几个问题:1、用户在设置空调时很容易误点关闭按钮;2、缺少常用的风向调节,功能缺失造成较差使用体验。
灯
普通灯可以在 App 中设置 1、2、3 路开关样式,这种形式同样存在问题:一屏最多放三个开关,屏幕下方大片区域空置,利用率低。
窗帘
窗帘控制界面显示窗帘的名称及行程状态;窗帘的开、合,绿米给了 2 种方式:滑动控制、全开全关按钮;
增加暂停功能可以提升使用体验,因为用户在操控窗帘设备时,会以窗帘实际的运动行程为依据来决定窗帘需要开合到什么程度,而不是看界面上窗帘的位移,当用户觉着窗帘行程可以了,按暂停键就可以准确停留在用户想要的位置上。
调色灯
调色灯用户可以自定义或选择系统推荐的颜色;
为了涵盖大多数的用户偏好,调色灯的 4 个推荐色采用色环上差距大的颜色,并且根据用户使用场景筛选出常用的几种色调,排除了用户不常用的绿色、紫色、粉色。
用户可以根据自己的使用偏好,将最常用的功能模块页面放到第一屏,这个功能在一定程度上可以提升操作效率,当设备多,还是需要切换很多屏。
用户使用面板分为:紧急情况、常用情况,紧急情况不一定常用,就像出门需要关灯;常用情况不一定紧急,例如看时间
绿米为了让用户便捷,给出默认页自定义功能,存在的问题是:如果用户把灯作为开机第一页,那么日常中看时间要翻页;日期时间作为第一页,开关灯需要翻页,都不是特别便捷。实际上可以做成像 Gira 那样,通过增加手势唤起快捷开关功能,首屏留给日期时间,既满足了日常需要,又能满足紧急需求。
通过上述分析,我们得到了这些产品的共同点与差异点,以及背后的思考方式,了解共同点可以让我们弥补自己产品的不足,不被市场淘汰;学习它们差异化的思考方式可以帮助提升我们产品的竞争力。
作为一名合格的设计师,除了学习视觉技法和理论,还应该多玩、多看、多思考真实的线上产品,体验其核心操作流程,推敲和思考产品设计背后的原理和逻辑,才能不断提升体验设计思维。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
文章来源:优设 作者:Aaron杜斌
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
智能产品的设计过程中,常常用到动效设计,那么动效设计用在哪些地方及对提升智能设备体验带来什么帮助,是这篇文章要讲的。
上期回顾:
通过大小、位置和透明度的变化,使得界面与界面之间、界面上元素的出现和消失都有关联,让用户和产品的交互过程更流畅,给用户更好的体验。请看以下案例:
1. Nest 温控器控制界面
Nest 温控器从时钟转变到温控调节界面的过程中,时钟的指针向圆心收缩,周围的时间刻度生长并一起向中心收缩,指针收缩动效对应温控调节界面温度值的显现,时间刻度的生长收缩动效对应温度刻度的显现,由于元素之间进行有关联的变化,操控过程中会有丝滑流畅感。
2. Gira 窗帘设备
当用户调节行程时,中间的控制点跟随手指实时运动,而进度条会有延时拖拽效果。为什么会是这样呢?原因是:用户在控制面板上的操作是需要由面板向窗帘设备发送指令的,也就是说面板上控制窗帘到窗帘设备运行中间会有一小段时间间隔,用户会有延迟感,所以 Gira 在控制窗帘行程的过程中,进度条为了与窗帘设备运行同步,加入延时效果,让用户感觉操控响应快的错觉。
3. Nest 新款温控器
用户在滑动切换功能时,功能 icon 会按照先后顺序由大到小变化,由于连续性运动,每个元素运动都有衔接,会有流畅操控感受。
4. Nest 智能锁
用户输入密码后至锁打开这段时间,数字依次向下消失,锁 icon 逐渐出现并且打开,体现出柔缓的感觉;实际上动效有时候可以弥补设备执行缓慢的不足,当设备需要长时间才能执行时,这段时间加入动效,动效运行时间和设备实际执行时间一致,用户就会觉得很顺畅;也可以让动效运行时间小于设备执行时间,这时用户会觉得操控反应更快。
通过动效能够帮助用户使用功能,对功能的方向、位置、唤出操作、路径等进行暗示和指导,方便用户在最短的时间内来学会操作产品的一些功能。请看以下案例:
1. Amazon Echo
用户第一次设置好监控后,通过放射动效提示用户双击屏幕,通过上下扩张的箭头动效提示用户可以通过手指来进行监控画面的放大缩小。
2. Lenovo Smart Clock
当设备第一次配好网重新开启后,通过遮罩、圆点大小位置运动搭配文字告诉用户长按屏幕可以控制什么功能。
顶部弧形的上下变化,告知用户下拉可以控制什么功能。通过简单的元素既能起到提升用户的作用,还不打扰用户。
通过动效给用户展示需要的内容及产品侧想让用户了解的内容,让用户更乐意更易于理解,强化功能感知。请看以下案例:
1. B&O 触控音箱
双击音乐标题,进度条从左向右生长出现、操控点放大出现,既强调了进度条这个隐藏功能,还暗示用户可以拖动操控点从左向右拖动操作。
2. Google Nest Hub 调光灯界面
用户从列表进入调光灯界面时,调光条灰底从左向右弧度生长,随后当前亮度条生长出现、亮度值出现,先暗示了用户可以从左向右弧度操作,后强调了当前设备状态。
3. Google Nest Hub 睡眠质量检测界面
用户查看睡眠质量数据时,睡眠质量标题信息渐隐渐现,睡眠数据条、数字生长,让数据展示有主次之分,强调了用户想要看的内容据,更人性。
在产品设计里面有一个非常重要的原则:让用户有操纵感。这种操纵感不仅仅表现在对用户的操作有了反应、有了显示,还有一种方式是让用户知道当前产品运行的状态,是正在等待还是正在加载,还是正在下载或变化,那这种状态的告知也是增强用户操纵感的方式之一。请看以下案例:
1. LG 智能洗衣机
当用户往洗衣机里加入衣物后,出现量杯倒入洗衣液的动画,告知用户当前洗衣机正在进行哪一个环节,我们分析一下这里加入动效的用意,首先,一般的洗衣机没有屏幕,有的话也就显示当前的功能选项,LG 的这款洗衣机是液晶屏,那么它的定位就是高端人群,通过融入动效,打造差异化,提升使用体验,加深用户对 LG 品牌的印象。
2. Lenovo Smart Clock 起床闹钟功能
用户设置好起床时间后,系统会根据时间段自动进行背景颜色的过度,来模拟天色的变化,直观的告知用户当前的时间是白天还是晚上或是黄昏。
3. Orvibo 除湿界面
设备进行除湿的过程中,面板上圆形元素进行旋转,伴随粒子扩散效果,模拟水分子消失的过程,直观形象的告诉用户现在正在做什么。
4. Lenovo Smart Clock 猫眼通话界面
用户接通猫眼后,通话 icon 进行电播扩散动效,模拟声波扩散效果,准确的向用户告知当前通话中的状态。
5. Google Nest Hub 语音唤起
当用户说话唤起语音控制时,原先的全屏画面收缩,响应用户的指令,四周留白,为通话内容提供展示空间,然后彩色点元素起伏变化,通话内容出现,告知用户已接收到指令;随后彩色点元素旋转加载,体现正在执行中。在语音控制的每一个环节都加入动效反馈,会让用户觉得他不是在和一个冰冷的机器讲话,富有人情味。
6. Orvibo 窗帘控制界面
运用轻拟物效果和与实物一致的运动方式,用户可以直观的看到窗帘的行程位置与开合状况,大大的提升了产品易用性。
面对一款新的智能产品时,用户可能不知道怎么操作它,通过动效向用户交待页面内容之间的关系,让用户清楚的知道从哪里来,到哪里去,更易于理解从而可以快速上手使用。请看以下案例:
1. Nest 温控器设置界面
温控器的设置模块通过左右滚动以便在有限的屏幕中展现,那么模块的下一级页面跳转做成像 App 那样左滑切入是无法明确层级内容的,此时需要一个与左右滑动不一样的动效来区分模块的切换,Nest 运用翻转效果,强化了层级感,清楚交待了页面翻转后面的内容与页面前的关系。
2. Google Nest Hub 设备控制界面
用户从顶部导航中进入设备列表过程中,设备列表页面从右向左进入,暗示用户“当你想返回上一级,可以左滑离开哦”,用户上下滑动设备列表时,屏幕左边滑动条出现,更加明确了“左滑返回上一页”的功能;
当用户通过列表进入操控界面以及切换功能页时使用淡入淡出的效果,弱化它们之间的跳出感,来强调它们是一个层级的内容,从细微处可见 Google 的设计师在动效的使用、选择上非常克制,值得我们学习。
3. Google Nest Hub 日程提醒界面
用户发出查看日程安排的命令时,日历界面从左到右进入,告诉用户这是一个新的页面,接着日期数字 21 进行大小位移变化,月份不做变化,为了强调这是 21 号的日程,2 条日程信息按照时间先后从下向上运动,交代了日程处理的优先级。Google 设计师将信息展现的每一步都让用户看的清楚明白。
在可用性良好的前提下,通过一致性、趣味性的动效设计和创新的交互方式为产品增加亮点,带来更惊喜的体验,传达产品的气质与态度。请看以下案例:
1. Google 多端运行动效
在品牌塑造上,Google 已被证明做得极为成功,而且在视觉表现层面,Google 系产品具备着“一致性”和“连贯性”,这让 Google 获得了品牌识别上的利益。在不同设备的动效设计中,Google 都统一使用代表品牌的红、黄、蓝、绿颜色和几何图形,遵循化繁为简的设计准则,通过简洁贴近真实的运动方式,让产品更有人情味,让用户更加专注于内容。
2. 智能圆镜
用户在靠近圆镜设备时,镜面中心人脸识别 icon 缩放,周围点元素波动扩散,吸引用户的同时,传达出科技感。
3. Apple HomePod 命令反馈界面
当 HomePod 在执行一项指令时,顶部的屏幕会出现彩球融合翻转动画,多变朦胧的色彩可以唤起用户情绪,球体间的融合过程让产品生动有趣,让用户感受到品牌的人情味。
4. Apple Watch 洗手提示界面
Apple Watch 洗手功能开启后,会有一个 20 秒的倒计时,倒计时以肥皂泡沫消失扩散的形式展现,很贴合当前洗手的情景,让原本一个普通的倒计时变得生动且有趣味性,用户更加乐意使用,强化了用户对品牌的感知。
5. 智能温控器
这款温控器已经有一定年代了,当时那个年代,能用到温控器,那就很有科技感了,智能温控器还将流动的线条动效运用至透明背景上,向用户传达了超前的科技感,只要见了就会记住这款产品。
下面为大家整理了一份动效在产品中的应用场景以及设计思路:
实际上智能产品中的动效设计,并不是要向用户炫技,也不是做的越炫酷越好。动效是以解决问题为目的的一种手段。我们要去观察现有好产品的动效设计落地点及分析他们的小心思,从而运用至自己产品中,提升产品使用体验。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
文章来源:优设 作者:Aaron杜斌
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
相比于去年发布的 macOS 11 和 iOS 14 的 WWCD 2020,今年的 WWDC 确实是显得变化没有那么大,在系统视觉层面上,macOS 12,iOS 15,iPadOS 15,watchOS 8 似乎并没有那么多「革命性」的改变。老实说视作为一次日常的产品功能迭代就好了。
不过,iOS 15 当中有不少颇为不错的新功能,比如实况文本(Live Text),功能更强的 Spotlight,全新的 Safari 浏览器,全新的安全机制,等等等等,这些功能足以为用户提供更好更安全的使用体验,但是另外一方面,有很多功能对于设计师和开发者这边有着巨大的影响。
目前来看,Facetime 的多人通话的升级,共享当前界面和屏幕给他人的 Shareplay 很大程度是为了应对全球疫情之下,用户被封闭和隔离的使用场景,这些功能需要系统级的支持。
而从照片中获取文本信息的实况文本功能、超强的聚焦搜索功能,还有新的相册自动生成回忆视频的功能,则和苹果自身在机器学习领域的挖掘息息相关,对于想要在这一领域有所建树的团队,可以参考这些内置的功能,如何用好神经网络的软硬件,可以参考相关的开发文档。
关于 iOS 15 在我看来最值得聊且对于设计和运营有较大影响的部分,其实是全新的通知推送系统,以及 「专注模式」这一功能。在整个发布会结束之后,苹果的 HIG 页面当中,只有一小部分的内容随着新系统的发布而随之更新了,而这其中就包含信息推送和 「专注模式」的部分。
信息推送和当下用户日常内容和信息消费习惯紧密关联。越来越多的 APP 和越发频繁的信息推送给用户带来的信息压力已经成为一个广泛存在的问题,一直到今天,这个问题都没有一个足够完美的解决方案。
针对注意力管理的问题,iOS 15 所给出的解决方案算是一个比较折衷且比较合理的处理机制。
在基础的信息推送内容的视觉设计上,iOS 15 针对通知栏的小卡片的排版视觉进行了优化,放大了 APP 图标并置于卡片的左侧,对于通讯类 APP 当中用户发送的信息,则采用了用户大头像 + APP 小图标 的组合形态,增加信息来源的辨识度,并以这种形式更清晰地告知用户,所收到的信息的来源,以及它的属性。
iOS 15 还可以根据用户设置的时间表或者所处的模式,快速收集每天收到的的通知,构建成为一个较大的通知摘要大卡片,而摘要的内容呈现将会按优先级进行智能排序,位于顶部的卡片相关度最高。(所以 APP 通知推送会因为这种机制开始一轮新的内卷么?)
值得注意的是,新的推送摘要因为是按照优先级排列,所以各种 APP 当中优先级最高的通知将会被汇总到一起。
摘要信息的组织并不是借助单一算法来实现的,同样的,其中用到了机器学习的功能,借助神经网络芯片来更好地对信息进行针对性的筛选,并推送给用户,以图更好的体验。
在原本的 iOS 14 当中,对于单个 APP 的推送管理方式比较简单,除了「关闭」,就只能选择「隐式推送」,
在 iOS 15 当中,用户可以针对单个 APP 的推送进行更细致的选择和处理:
更多选项当中,可以选择让 APP 「静音一小时」或者「今天不再推送」以避免干扰。
整个 iOS 15 的通知处理的机制都是围绕着降低用户信息载荷的目标来进行的,除了管理层级的细化,专注模式更是之前 iOS 14 中「勿扰模式」的全面升级。
其中,为了对推送通知进行更加细致的处理,通知功能的类型也有了更为详细的分类,并且在 HIG 设计规范进行了更为详细的说明。相关详细内容在第四节。
「专注模式」是为了应对信息过载的问题,并且试图改善推送通知影响用户注意力的情况,希望借此来帮助用户更加专注于进行中的任务。
系统基于常见的几个使用场景,提供了「个人」「工作」「睡眠」三个场景,并且保留了之前的「勿扰」模式,单击底部「+」号还能添加更多模式,其中还包括「驾驶」和「游戏」等不同的预设场景模式。
除了「勿扰」模式之外,其他模式下,用户可能会收到与这些场景相关的应用,而用户可以在 iOS 15 的系统智能推荐之下,快速增删当前模式下可以推送通知的 APP。
在指定模式下,用户收到的推送通知的内容、类别都会高度相关,降低干扰性。
同样的,为了搭配不同的专注模式,还可以基于模式设置特定的主屏和桌面小插件,成为当前模式下的信息和管理中心,更加方便地管理当下的任务,达到「专注」的目标。
而「专注模式」更为智能的一点,是系统会根据地理位置信息,有意识地提醒用户是否要切换模式:
同时,当用户将手机设为特定模式之后,绑定同一帐号的其他设备也会自动切换到同一专注模式之下,达到统一管理的目的:
当然,除了基于位置进行「专注模式」的切换之外,用户可以通过右上角下拉的「控制中心」对「专注模式」进行手工的切换管理。
而无论是新的通知系统还是「专注模式」,在信息管理的颗粒度上都比以往更加细致,这很大程度上是基于新的推送通知的类别管理,这一部分内容在 HIG 设计规范上已经得到更新,并且有着非常详细的说明。
下面是关于推送通知章节更新的主要部分(考虑到篇幅,对部分非关键内容进行了精简)。
https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/notifications
用户希望收到他们关心的事情的通知提醒,但并不总是喜欢被打扰。为了帮助用户管理整体体验,需要在发送任何通知提醒之前获得用户的许可;系统允许用户在「设置」>「通知」中更改,并调整推送提醒样式,可以预览,并且可以和 Siri 交互。用户还可以在「设置」>「专注」中让所有通知都静音(某些地区的政府警报除外)。
相关开发人员说明,请参阅 UserNotifications。
在 iOS 15 及更高版本中,用户可以通过指定专注模式时间,设置专注模式下通知推送的具体行为,而进行细粒度的管理。专注模式可帮助用户在他们为睡眠、工作、阅读或驾驶等不同状态下,定义这一时间段内通知推送的具体行为。
用户可以筛选出哪些通知或者 APP 可以在特定专注模式下,被推送给用户。比如在工作专注模式下,用户可能希望收到来自同事、家人以及工作相关的 APP 推送的信息,用户可能还希望收到时效性较强的通知。
尽管专注模式下,可能会有一些通知被延迟推送给用户,但是通知信息在收到的时候即立刻发挥作用。
想要定制化地推送信息,那么你需要确保你的 APP 能够支持信息直接推送,就像电话或者短信样的通讯通知(communication notifications),而其他类型的弱时效性的推送则使用非通讯通知(noncommunication notifications) ,而想要支持通讯通知,你需要引入 SiriKit ,这也意味着用户可以使用 Siri 来进行自定义通知推送行为。具体的参阅INSendMessageIntent和UNNotificationContentProviding。
为了更好的方便用户针对推送通知进行管理,你需要对你的 APP 的推送通知的中断级别进行定义,不同级别的定义决定了通知何时推送,系统在不同状态下是否要推送,以及如何处理。目前,将推送通知的中断级别划分为4个等级:
具体的属性还可以参考下面的表单:
值得注意的是,这4个层级是逐渐递进的,因为后两种推送通知需要的优先级较高,所以最好获得用户的许可。
此外,在设计通知推送系统的时候,还有3个关键的注意事项:
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
文章来源:优设 作者:陈子木
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
我们都知道,数据是支撑决策的重要依据,于是我们可以看到,几乎所有的产品,都会具有数据统计分析的功能模块。往大了说,比如数据中台;往高端了说,比如数据大屏、数据看板、数据驾驶舱;往本质了说,其实就是数据的统计分析。作为一个非数据型产品经理,或者是初级产品经理,该怎样设计这个功能模块呢?
如果你刚好为此苦恼,不妨试一下我最近研究的这三步曲:统计+分析+可视化!
关于数据统计分析,首先表达一个我蛮认同的观点:
好的数据分析师,要像眼科医生一样:配眼镜可能有很多专业的方法,有很多专业的工具,可在配的过程中,医生纠结的不是自己的理论,而是关注用户看得清不清楚,不断问用户“这样可以吗?这样更清楚吗?再这样试试呢?”
—— 接地气的陈老师
相信在工作中,大家经常会碰到一些“孔乙己”式的数据统计分析,一开口就是“xx 指标体系”,再加上一大堆什么“权威的、标准的、BAT 认定的”这之类的修饰词汇。这特么就是典型的虚假数据分析啊,因为这些大多数时候,耗时费力,却没有解决实际问题。
并且这种虚假的数据统计分析,还有它遵循的理论模型:
而真正的数据统计分析,就像太极拳的精髓一样:“只重其义,不重其招,你忘记所有的招式,就练成太极拳了。”(以解决业务问题为根本)
要搞数据的统计分析,那第一步我们得先有数据,也就是数据的统计工作。提起数据统计,那自然绕不开数据埋点。如果你们公司从来没整过埋点这个事,那也不用大费周章,因为界内已经有很多成熟的埋点公司了,例如神策、友盟等等,直接花钱办事就完了,也不贵。
我们今天研究的,是通过埋点,能够获得哪些数据呢?总结下来,大概有这么五类:
埋点获取五类数据
来来来,我们逐个剖析一下,这几类数据,具体都包含什么,以及获取这些数据有啥用。
1. 整体概况
实时数据意义:可以获取到每个小时的产品实时数据,帮助你了解产品目前的实时情况。
使用概况意义:产品整体的使用情况,包括用户量、访问情况、留存等,帮助你对产品整体指标有一个大致的了解。
2. 用户获取
渠道访问意义:每个渠道的用户的使用情况,包括渠道中新用户的占比、留存等,帮助你了解产品在获客层面上的优势与不足。
版本数据意义:每个版本的使用情况,帮助你了解在产品升级的过程中,是否在活跃和留存方面有所改善。
3. 活跃与留存
访问流量意义:产品的每日访问数据,指标集中在新老用户的访问行为上,提供访问次数、时长、次数分布、访问时段高峰等指标,帮助了解新老用户在使用产品时的一些行为特征。
用户留存意义:提供用户 7 日,次日,次周,次月留存的数据,帮助你了解新老用户的使用粘性。
4. 事件转化
自定义事件意义:用户自定义关键事件,系统会自动生成该事件的发生次数、人数以及分布情况,也就是能够看到用户都在干啥。
收益类事件意义:用户自定义收益类事件,系统会自动生成该事件的发生次数、人数以及分布情况,会根据你选择的数值类型属性,计算该数值的总值、人均值以及次均值。也就是能够看到用户都咋花钱的。
5. 用户特征
用户特征意义:能够看到我们的用户,都是哪些牛鬼蛇神~
有了埋点的数据以后,那就是怎样利用这些数据,充分发掘这些数据的价值了。数据分析的套路就更多了,把下面这些学会,应该“二八原则”里面的“八”就能够搞定了~
1. 常见的数据分析指标
综合性指标:反映产品的整体情况。
流程性指标:反映用户的使用行为。
业务性指标:反映具体的业务情况。
2. 常见的数据分析维度
数据细分:通过不同的细分维度分析,往往可以追溯到问题发生的原因,还能为后续的一些动作提供参考依据。
数据对比:没有对比就没有伤害,一方面是横向比较,即自身和别人进行对比,如常见的同比、环比;另一方面是纵向比较,即自身和自身进行对比,比如行业竞品、全站数据、AB 测试等。
3. 常见的数据分析方法
HEART 模型:Google HEART 模型的提出,可以让大家反思自己的产品设计思维,同时运用相关设计工具去提高 HEART 五项指标来完善用户体验,打造更好的产品。
AARRR 模型:该模型出自于《增长黑客》,它是在 2007 提出,当年的获客成本还比较低廉,而这种模型很简单又很直观地突出了增长的所有重要元素,所以这个模型很长时间内都很受欢迎。
RARRA 模型:而现在获客的成本与日俱增,市场情况和 2007 年已经完全不同。现在黑客增长的真正关键在于用户留存,而不是获客。于是,一个突出了用户留存重要性的模型 RARRA 诞生了。
有了统计的数据以及分析的维度之后,最后一步工作就是可视化啦!
而想要完成这一步,又快又好的方法,那自然就是参考各种规范啦,首先我们可以去一个叫做「e-charts」的网站,去查看各种可视化图表,因为开发很多时候,就是依照这些开源的图表库进行撸代码的~
而我们设计的时候,就需要借助各种原型组件啦。数据可视化的内容有很多,我们来举几个典型例子:
1. 折线图
注意事项:选用的线型要相对粗些,线条一般不超过 5 条,不使用倾斜的标签,纵坐标轴一般刻度从 0 开始。预测值的线条线型改为虚线。
2. 柱形图
注意事项:同一数据序列使用相同的颜色。不使用倾斜的标签,纵坐标轴一般刻度从 0 开始。一般来说,柱形图最好添加数据标签,如果添加了数据标签,可以删除纵坐标刻度线和网格线。
3. 条形图
注意事项:同一数据序列使用相同的颜色。不使用倾斜的标签,最好添加数据标签,尽量让数据由大到小排列,方便阅读。
4. 饼图
注意事项:把数据从 12 点钟的位置开始排列,最重要的成分紧靠 12 点钟的位置。数据项不要太多,保持在 6 项以内,不使用爆炸式的饼图分离。不过可以将某一片的扇区分离出来,前提是你希望强调这片扇区。
饼图不使用图例,不使用 3D 效果,当扇区使用颜色填充时,推荐使用白色的边框线,具有较好的切割感。
5. 其他
这种数据可视化的图表还有很多,而它的意义就在于,用图表代替大量堆砌的数字,有助于阅读者更形象直观地看清楚问题和结论。我也在工作中搜集到了一些不错的数据可视化原型组件,有需要的同学可以自行下载啦~
好了,以上就是今天的所有内容了,正如前言所说的,我们今天只讨论武功招式,不讨论内功心法。
延伸一下:数据统计分析,最终还是要从业务中来,到业务中去,一切的形式,都是次要的,关键还是要以解决业务问题为根本、但对于我们这些“新手”来说,经验主义自然也是要借鉴的!相信今天总结的内容,也足够支撑大家比葫芦画瓢啦。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
文章来源:优设 作者:晓庄同学产品笔记
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
生活在地球上的我们,每时每刻其实都在感受着重力的存在。除了物理层面的影响,重力是否会改变我们对于视觉画面的认知呢?又或者说,物理学中经常听到的重力概念,和设计中的构图、排版又存在着怎样的关联呢?
我们或许能够从格式塔学派对认知心理学的研究里,寻找到一些蛛丝马迹。
人们的大脑总是会去脑补眼前看到的事物。就像我们看到的这三个被遮挡住的圆形图案,位于中心的倒三角虽然没有实际出现,但我们确实认为它是存在的对吧。
视觉本身是很容易被周围环境影响的,就像我们现在看到的这个画面。如果忽略掉空间和透视的话,你还会觉得右侧的竖线更高吗?
而实际上的情况是,左边的竖线高度要远远高于右边的竖线高度。
再看这个例子,两侧位于中央的白色球形,它们之间,谁看起来更大,谁又看起来更小?也许有的朋友会说左边更大,这个答案是没错的,但它也仅仅是看起来更大而已。
如果我们在画面中拉出两条辅助线,我们就会发现,原本右边看起来更小的圆球,要比左边的圆球更大。
通过刚刚的几个小测试,相信大家已经对于用眼睛的判断能力有了一些认识了,是不是有一种眼见不一定为实的感觉?视觉重力原则,其实就是建立在这样的认知基础之上的。我们大脑所认为的重心或平衡感,和真实的情况,往往并不相同。
在做版式设计的时候,我们的构图越接近重心的平稳状态,就越会激发和谐的美感。因为重力在自然界中是再平常不过的现象了,生活在这样环境中的我们,自然也会有这种审美上的倾向了。
我们来看这个例子,这张纸最稳定的位置在哪里呢?答案是它的正中心。
我们把信息添加在页面的中心位置,现在它看起来更平稳了吗?然而并没有,可问题出在哪?一定是我们没有把文字摆正吧?上方的区域(a),看起来要比下方的区域(b)面积更大一些,真的是这样么?
可实际上,文字确实是在页面的正中心位置上了,这同样我们的眼睛在作怪。
所以为了抵消视觉上的这种坠落感,我们需要将文字略微向上移动,这样我们看这段文字才是真正居中的。
正向
我们再举个例子,这是一个数字 8,我们来仔细观察一下它的造型,顶部与底部的负空间看起来是一样大的对吗?
垂直翻转
而事实上并不是这样的,通过将它倒置,我们就会更明显的看出来,其实为了抵消人眼的错觉,我们在做字的时候,需要将上面做的更小,底部做的更大一些。
这是两个完全等大的黑色圆形,但它在视觉上其实并不是平衡的,人们的眼睛会觉得右边更轻,这虽然没有顶部和底部那么明显,但也确实存在。那么解决的方法就是将左边的圆形略微缩小一些,现在这个页面看起来平衡多了。我们总是会下意识的认为左侧要更重要些。
⇧ 画作:The Creation of Adam
看这幅画,很明显左侧的内容要比右侧更少,可如果我们将它镜像翻转过来,它原版的平衡感就会被打破了。人们更多会认为左边看起来更重了。
同样的,在我们的汉字设计中,也会应用这种做法,比如林字的两个木字旁,就并不是左右等大的,因为这样在视觉上会显得不平衡。所以需要将左侧的偏旁削弱,才会在视觉上看起来更加和谐。
具有左右结构的汉字,基本上都遵循了这个原则。形成了左收右放的构成样式。
汉字“田”的中心十字笔画,为了看起来是居中的感觉,实际上也特地微调了文字的重心部分。利用辅助线,我们会更容易察觉到这其中的变化。可以看到,横笔部分,向上移动了很多。竖笔部分也相应向左做了位置上的调整。
人们常说,细节决定成败。也正是这些不起眼的细节,拉开了专业平面设计和业余设计师之间的距离。相信看到这里的小伙伴们,应该已经领略到了视觉重力原则在设计中的重要地位了。那么光知道有这么一回事儿可不行,我们更应该去了解它的特点,以及尝试着去掌握它。
我们看到的所有图像,无论抽象的还是具象的,其实都是具有重量感的。那么都有哪些因素会影响到视觉重力的大小呢?找到视觉重心之后,我们又要怎样去利用它们?接下来我们就一起去寻找相应的答案。
色彩对视觉重量有影响吗?我们看画面中的这两个图形,是不是很明显感觉到右边更重呢?黄色的色相本身的视觉明度就要比蓝色更浅,所以我们会感觉到右边更重。
为了抵消颜色对视觉重量的影响,我们需要降低蓝色的面积,这样才能让两个图形看起来是平衡的。
那么换成具象的物体呢?道理其实也是一样的。我们依然可以把它们看成是纯粹的色彩。经过这一步分析,我们是不是发现了左侧红色的苹果,显然会更深和更重呢?
所以,为了保持左右的平衡感,我们也需要把红色相应的缩小一些。
我们看这两个图形,它们谁更重?左侧的八边形,它的页面边缘更复杂,角度变化也更多,所以承载了更多的信息量,相比正方形更简洁的造型来说,左侧会更重。
那么换成大小相同的秤砣和棉花呢?谁更重?几乎没悬念了,棉花完败。当具象的物体出现时,结合以往的视觉经验后,谁更重谁更轻也就很显而易见了。
对齐也需要考虑到视觉重力吗?如果你也有这种疑问的话,接着往下看。这是两个马克杯,它们虽然造型类似,但是色彩却不同。很显然蓝色的版本会更重,而在位置上更靠近左边,也就显得更重了。
所以,为了抵消这种重量上的轻微不平稳,我们可以把颜色更浅的橙色放到左侧的位置上。这样虽然色彩上橙色更轻,可由于它的位置更重要,也就不会给人不平稳的感觉了。
那么构图基本确定之后,我们为这两个杯子搭配上一段文案信息。这样两个商品的展示也就做完了。你发现这两个组合出现什么问题了吗?当文字信息加入到页面之后,是不是觉得哪里不对呢?
电脑是看不懂图像的,所以用到对齐命令时,它们会围绕着像素的边缘去做对齐。可问题在于,并不是所有图片的视觉重心都刚好在方框的中间位置。
所以我们要去修改的地方,也正是这个视觉重心的对齐位置。现在再看这两个组合,是不是感觉和谐了很多。
当西文和汉字相互组合时,需不需要考虑到视觉重心的对齐呢?我们看,如果仅仅是依据边缘进行对齐的话,就会让西文部分看上去很小。而正确的做法是需要我们忽略掉一些文字边缘的。
分别找到两组文字的视觉大小。只有这样,才能让两组文字在视觉面积上达到相同的重量。当然,文字字重部分也是需要做出相应匹配。我们看,经过调整后,中西文的搭配明显要更加平稳了。
但也是有例外的,比如这个例子,明明是按照之前的调整方式,仅仅是更换了文字的内容。为什么它看上去依然没有对齐呢?这里的问题其实出现在西文部分,有些单词组合,字母并没有占据下伸部的空间。所以在整体上,就会显得有高低的错落感。
这种情况,当然就需要重新去匹配了。解决方法依然是对齐文字之间的视觉重心部分。所以,方法并不是死记硬背的。我们需要根据不同的情况去做出有针对性的调整。
接下来我们来做一个包装的案例。它是一个螃蟹口味的海鲜调味料。首先,我们选择这个手绘的螃蟹作为这个画面中的视觉焦点,把它放在版面的中心位置。经过前面的学习,我们知道了,选择对齐元素时,我们要忽略掉那些细枝末节的部分,才能找到真正的视觉中心位置。
找到了视觉重心后,我们把它安排到页面真正的中央部位。顶部和底部的空间,我们就继续调整其他的信息。首先从层级上来说,在页面顶部我们需要一个相对第二大面积的文字组合。
而其余的元素,围绕着底部的负空间去排列就可以了,到这里这个包装也就做完了。
无论是版式设计,还是绘画摄影,构图从来都是一个讲究的事情。想要做一版在视觉上平稳的版面,最简单的办法,就是把主体固定在页面的中心位置。可是这种对称的设计,由于太过完美,也多少会给人一种单调和乏味的印象。那么有没有一种既让页面保持平衡,又能在结构上做出变化的设计方法呢?这就引出了我们接下来的内容了。
这个案例,属于网页中会出现的广告页面。首先,如果我想要让版面达到平衡状态,就需要把主体的重心安排在页面的中央位置。
但是,为了让页面中加入更多信息,我们也不得不让主体向页面的一端靠拢,从而预留出足够的空间。
可这样就导致了页面的不平衡,左侧的文字重量并不能平衡整个版面。
其实,解决的办法也很简单,我们可以试着将主体略微移向页面的中心部分。这样一来,就实现了一种动态的平衡状态。
这背后的知识其实很简单,就是最基本的杠杆原理。如果天平两端并不平衡,那就让更重那个的靠近中心,更轻的远离中心。这样也就恢复到平衡状态了。
这同样是一个网页中会出现的广告页面。我们看,它都出现了哪些问题。版面中所有的元素都集中到了顶部,这就导致了页面底部重量过轻,顶部重量过重的极端对比。也就是我们俗称的头重脚轻。那么经过调整之后问题依然存在。过多的空白,会让人们感觉这个版面作品没有完成。所有的重量都集中到了版面的左侧,这依然是一个极端的构图。
正确的做法应该是怎样的呢?我们可以将重量最大的元素安排在中心位置。并且让其他元素以对称的样式排布。
当然,你也可以将信息放大,和原本的图像进行一个叠压组合,形成一个更重更大的整体。
又或者,采用顶部图像,底部文字的做法,让页面中的重量分配均等。
反过来也是一样的,顶部安排文字,底部安排图像。
再或者,我们可以将信息安排在页面的左侧,形成左字右图的配置。这样的构成,有助于人们第一眼发现你想传达的信息。
而反过来呢?图像就成为了更重要的那个。人们会先看到图,然后紧接着去阅读相应的文字信息。
到这里,我们分别从细节的刻画,再到元素的重心对齐;又从视觉重心的动态调整,一直讲解到了宏观页面的构建思路。我们可以看到,视觉重力原则几乎渗透了整个设计流程。很多时候我们其实并不缺乏理论知识的武装,可一到自己实际动手,就马上缴枪投降了。矛盾点还是出在对理论知识点灵活运用上,接下来我就带着大家再做几个案例。
打算做一套大米的包装设计。产品的名字就叫高山岩米。它长什么样子呢,就像我们现在看到的这样,类似葡萄干一样,和我们平时见到的大米颜色是有一些区别的,据说营养价值很高,也被誉为米中黄金。
我想利用图形的切割来表现这个岩米的部分。同时,在辅助一个篆书结构的山字,以这样的图形来体现这个主题内容。并且,我也希望这个大米的部分是镂空的,能够透过它看到真实的米。
主视觉的刻画差不多后,接下来我把它放到包装上,并且将其他信息也一并加入到版面里。不过这样一来,信息和主视觉相互叠压,对于内容来说可能会有些相互干扰了。所以我们来试着编排一下。到这里,好像出现了我们前面提到过的问题了,那就是,整个布局显得头重脚轻了。
接下来再试着调整一下。现在我们把底部和顶部的空间都占据了,同时也预留出了三分之一的留白,这该不会有什么问题了吧。相信看到这里的小伙伴应该都能看出问题了,那就是这样的配置确实有些左重右轻了。留白可以有,但绝对不是这样做的。
除了我们之前提到的上图下字,或者是左图右字之外。我们当然也可以综合的应用它们。我们现在这个构成,其实就是一种全包围的结构。
又或者,将一部分内容放在底部,而主要去刻画上方的文本样式。这就形成了类似半包围的结构。
如果说之前的版本是上下样式的半包围构成的话。那么接下来的这个构图,就是融合了重心动态布局的左右样式半包围构成了。
当我们不知道怎样去安排版式构成时,视觉重力原则就成为了一个很好的参考依据。
我们再做一版活动海报。画面中出现的各种电器,都是经过退底处理的。这样的处理,能够让它们毫无违和感的出现在同一个页面中。
在页面的部分,我加入了这个活动的具体内容。展览的主题叫《模块世界展》,是著名设计师迪特拉姆斯的个人展览。
拿到这样的内容时,最保险的做法就是让顶部的图片成为一个更大的组合。上图下字,很平稳,也很保守。
我们可以看到,图片部分,我尽量将它们还原成了现实中它们本来的比例关系。
或许,我们也可以再换一种思路,相对的更突破一些。将图片通过颜色划分成组。我们能够看到,其中有全黑的,也有彩色的,更有白色的。
除了像刚刚的堆积到角落,我们也可以把图片组合规划成对角线的样式,在这样的形式下,版面构图依然是平衡的。
我们当然也能让图片组合划分成一个更大的组合,以及一个更小的组合。
又或者,打乱图片的顺序,完全依据视觉重心去匹配其中的位置关系。
最终,我决定从展览的主题中寻找突破口,以“错位”的手法去呼应“模块化”这个概念。不仅仅是文字部分的错位和拆解,图片部分也通过硬边的投影,形成了一种嵌套于版面中的视觉印象。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
文章来源:优设 作者:研习社
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
关于车载交互(HMI)的一些探索,用一些试验和案例来进行探索与验证。
这次我们不聊视觉,也不畅想未来,只说说当下HMI产品设计与交互体验。
本文内容会涉及一些专业的汽车知识名词,因为篇幅有限,如有些知识名词不太明白可以百度一下。
说到HMI大多数设计师应该是既熟悉又陌生,HMI是Human Machine Interface 的缩写,“人机接口”,也叫人机界面,人机界面(又称用户界面或使用者界面)是系统和用户之间进行交互和信息交换的媒介, 它实现信息的内部形式与人类可以接受形式之间的转换,凡参与人机信息交流的领域都存在着人机界面。
听起来是不是觉得这不就是UI吗?有什么区别吗?emm......的确...似乎...差不多...几乎是没有区别的,只不过是在某些场合和设备上管他叫UI,比如移动端设备,而在另外某些场所和设备上管他就叫HMI,比如汽车车机和数控机床。所以这个概念也不用去特别较真,HMI就权当做是汽车上的UI界面吧。毕竟汽车是高科技与工业结合的完美产物,“HMI”念出这个词时候就感觉是蛮专业的!很般配!
刚才说HMI最早更应用于工业上,比如常见的各种机床、制造装备。
或者说让时间在向前推进一点!
而这里通常意义的HMI则更加聚焦点,基本特指汽车车机或者车载多媒体设备。
说到这里还是要从车载仪表盘说起,从德国人卡尔·本茨发明世界第一辆汽车,距今已经100多年的时间了,在那些还没有HMI这个名词的年代,那么他是以什么形态出现的?那就不得不提“仪表盘”了。
当然写这篇文章并不是去评测谁家HMI更优秀,而是希望通过一些假设、实验和推断,和大家一起来探讨一下如何更有效的设计HMI。
我们先从屏幕开始。
说到屏幕,设计师都是比较敏感的,因为我们最终的设计交互创意都是需要都是在屏幕上显示展示出来的,HMI当然也不例外。现在在车载屏幕上你能看到最大尺寸多大?
拿特斯拉为例,Model S和Model X车型都是17英寸,Model 3为15英尺。
当然他肯定不是最大的,熟悉汽车朋友你应该知道我想说谁了,没错就是他!拥有48寸可多段升降屏幕的BYTON新能源概念车M-Byte!48寸的确很夸张,难道屏幕越来越大就是未来HMI的方向吗?
当然这个问题肯定是否定的,为什么?那就要从车载屏幕的作用来说起。
首先我是作为一个曾经就职于汽车公司的设计师,并且是一名地道的汽车发烧友,凭借对汽车还算熟悉和热爱做出一些产品交互分析,以下如有不妥之处还望海涵。
按照功能场景总体可为三类:主行驶状态信息、附设备状态信息、多媒体&外设
不可缺少还需要与使用者与场景结合,我们先来做一个大概的用户画像
对应这些需求,汽车需要有仪表台(屏)控制和显示的区域有五个。
五个区域分别是:
1、主驾驶仪表屏
2、中控台控制(屏)
3、后排娱乐屏
4、副驾驶信息屏
5、扶手控制台(屏)
其中前三个是主流配置,后两个比较少见。
关于汽车设备这块我们不做深入展开了,毕竟这篇文章主要讨论的还是设计,直接看结果!
汽车是比较特殊的设备,基于安全性考虑,汽车内屏幕尺寸不易太大与太多。
屏幕总体为玻璃材质,但与车窗风挡玻璃的材质不同,当汽车遭遇碰撞的时候,车内屏幕极易破损并形成尖锐物,极大可能会乘坐人员造成二次伤害,所以车内屏幕不易太多,更不易太大。虽然车载屏幕变大变多已不可逆转,而且随着屏幕技术的提升,柔性OLED的应用也将会在一定范围解决安全问题。但也需要汽车相关设计者多在安全方面进行考虑,任何产品体验应该建立在安全基础之上的,特别是交通工具。
为什么大屏幕操控成为了当前的HMI主流了呢?那不不得不去提一下另外一个我们熟悉的设备--手机!
同样一个有限的区域,如果用物理按键那么这么区域只能是固定的功能,而屏幕就可以无限扩展。特别是在汽车中控屏上集成内容会很多,体现就更加突出。
但是在汽车上的全部使用屏幕真的是最佳选择吗?显然这是有待商榷的。
不可否认屏幕的确有很强的扩展性,但是缺点也是明显的:1.触控反馈缺乏 2.交互效率不高
对于这样的判断,我们可以通过两个实验来进行验证。
将类似于Surface Dial这种智能按钮交互装置引入汽车的屏幕控制中,每个按钮可以根据情景进行自定义,并且吸附到汽车屏幕的任何位置进行交互操作,相信这一定是一种全新的使用体验。当然这一定是需要解决比如吸附力、安全性等一系列问题。
屏幕触控反馈
虽然目前的屏幕还有无法做到完美触控反馈,但已经出现了一些新的硬件技术来试图解决这些问题,比如Tanvas Touch,其定义为 “手指与触摸界面之间的电子压力控制”。简单来说他们的产品就 “皮肤的磁铁” 一样,能够更加精准的感应手指的动作,最后结果就是比 Apple 的 3D Touch 更加具有压感的触摸操作表现。
原理是利用手指尖触摸显示屏时产生的静电引力来模拟触感,通过电磁脉冲把更精确的反馈发送到用户的指尖。
Tanvas 也正在与汽车制造商们合作把这项技术嵌入到汽车或屏幕上,让人们更容易感触受到不同物体的表面。
也许在未来我们真的会遇到他。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
文章来源:站酷 作者:残酷de乐章
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在2020 年的苹果全球开发者大会(WWDC),苹果发布了新的 macOS 11(又名 Big Sur)。其中在UI视觉方面macOS Big Sur 系统最大的变化就是图标上, Big Sur更新了很多新设计风格的应用图标。
关于 Big Sur 的新图标的讨论很多,很多都在激烈争论。人们对苹果公司没有将完全扁平设计引入 Mac 感到松了一口气,但分歧并未停止。有些人认为这引领一种新的图标表现方式,而有些人则认为这是丑到了天际。
但苹果的设计就是这样,不管你你喜不喜欢,过一段时间他总会流行起来。就像iPhone11刚面世时,背面的摄像头组被无数人吐槽一样,而现在这个设计已经成了高端机的标板。
大家还能想起来UI扁平化设计已经流行了多少年了吗?
从2013年6月11日苹果发布iOS7算起,现在已经将近8年了,这8年时间扁平化像飓风一般席卷了整个UI设计圈,一夜间几乎所有的APP UI都被拍扁了。
其中以Instagram的换标作为扁平盛行时代的里程碑
但扁平化设计的确已经一统江湖太久了,人们似乎已经有点厌倦了。其实设计风格就是这样,并没有绝对的好与不好,只要审美不疲劳,就可以继续流行下去,至于流行多久我们经常会用一个词去形容---耐看度。
扁平化带给我们的是画面的轻盈和设计的高效率,但是缺点也是明显的,场景表现过于单一的问题,设计感体现较为有限,于是很多设计师都在尝试用新的设计风格替代或者进化现在的扁平化设计风格,今天我们就来探讨一下新拟物背景下3D与平面的结合设计,能在UI中擦出什么样的火花。
2014年我的作品-Cache
https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html
现在这样的风格会被我们称之为重度拟物风格,他不好看了?技术落后了吗?当然不是!只是目前不流行了!
他的特点是强调光影对比与物理质感,色彩都会比较偏“暗”,而且伴随设计的往往是难和慢!刻画一个细节需要很久,在强调设计效率组件化的今天,这种费时又难学的设计方法必然不会成为主流。
当前的UI流行趋势是强调高饱和的色彩搭配(在没有光影细节之下也只有色彩可以玩了),这种风格明显也不符合趋势,被“淘汰”也就难免了。
从设计角度上解析,图标主要是由四方面构成:构图+光影+色彩+纹理
而拟物风格图标在这四方面更加强调构图、光影和纹理,而色彩则是更多去搭配纹理质感,所以你看到多数拟物风格图标在质感上很棒,但是色彩却没有那么丰富。
说到新的拟物风格,这只是一个概念,也有称之为轻拟物,轻偏平,这里并没有通用的称呼和预设的设计方法,一切的UI设计风格都是为产品本身服务,如果新的设计风格能让产品整体体验得到“提升”,哪怕这种提升只是成功获取到了用户的注意力,那这个设计就是有价值的。
所以当下如果你的产品中想要吸引目光就要有点与众不同的东西,要么是独门的功能,要么就是吸晴的设计。
显然扁平的彩色图标现在已经达不到这个效果了,而以前的拟物又显得有点过时,在这种时代背景下,新的风格必然就会被碰撞出来。
于是乎我们就会看到以下的一些大厂“创新”,你不止能看到轻拟物设计,还能看到“实物”设计......
不得不说,各位设计师们还真是拼了...
“哪怕这种提升只是成功获取到了用户的注意力,那这个设计就是有价值的。”没毛病!各位加油!
当然苹果BigSur带给我们的图标设计创新更加有趋势意义,这种3D+平面的设计组合方法更加能给我们一些设计启迪和思考,并且这种3D图标与之前的拟物风格有着明显的视觉区别
我用3D重构了一个计算器icon,以此为例来进行分解,如下:
与2D设计方法设计图标一致,都是先勾画图形(建模),然后填色、加材质和灯光,但不同的是在3D环境下,这一切都比2D环境下简单了,而且视觉效果更佳,整体画面感更佳立体,质感更加饱满,并且根据渲染器的参数调节和材质质感的不同,即使是在同一模型下,也能制造出很多种不同的视觉体验。
图标背板的选择上,由于选择了3D作为主体表现,3D背板过于抢视线,图标为了突出主体而非背景,建议使用2D平面背板与3D前景图标进行结合。
3D设计图标的确有一些天然的优势,特别是在质感和光感的表达准确度上,是绝对超过2D的。
但是2D图标在一些风格的设计也是很难替代的,比如线性图标和渐变风格图标。
3D设计的确可以提升UI整体的视觉氛围,并且现在在一些APP中已经可以看到小范围3D案例了(比如支付宝),但是多是以插画的形式出现,其实与产品UI还是有一定距离的。
未来3D设计一定会是UI中大展身手,但是目前的常见的3D设计软件实在是太庞大了,我与许多3D行业的同行聊天的时候,大家普遍的认知是现在的3D软件(包括C4D)的实际最佳场景依然是动画设计,UI的中的3D属于非常轻量级的,用现在主流的3D设计软件做UI应用案例,有点用巡航导弹打蚊子的感觉,而且这个蚊子还是距离一米以内。这有点像当年的PS来做UI,虽然可以完成但是效率不高,学习曲线也高,于是Sketch和Figma这样的产品顺理成章的取代了PS在UI界的地位。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
文章来源:站酷 作者:残酷de乐章
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这是5月参加阿里设计周“智能与计算”分论坛后的感想小结,因为论坛大部分在讲算法和实现方式,所以在这里我就其中的AI与设计相关部分做一些深入分享。
我的思路大概分为三个部分:AI时代的来临;AI如何影响设计;未来的设计何去何从。
第一部分:聊聊AI时代来临,设计的世界发生了什么变化?
每个时代的设计都有不同的定义,农业和工业时代的设计更多是指设计师通过手工制作的方式阐释自己对美感和艺术的理解。
到了信息时代,设计除了要考虑美感,还要考虑是否实用和好用。设计的对象开始从真实世界转向数字世界,设计思想开始考虑以用户为中心的设计;设计方向也增加了很多领域,包括都多媒体艺术、游戏设计、网页设计、移动应用设计等。
在人工智能时代下,AR设计、智能硬件逐渐发展,设计的改革更多考虑的是如何将真实世界和数字世界进行融合,如何在自己产品上更好地阐释艺术、美感和实用性。
第二部分,AI如何影响设计,设计因为人工智能而产生了哪些改变呢?
结合论坛的内容,我觉得从以上五个方面产生了较为深远的影响。
人工智能帮助设计师解决在创意过程中面临的一系列问题,将重复劳动变得自动化 ,节省设计师大量的时间,减轻设计师的工作量。
数据驱动自动生成,取代人工建模,减少了设计的时间成本。通过组件标准化,来构建三维几何,然后geometry格式入库,最后由渲染引擎绘制。
再比如,双11期间有1.7 亿个BANNER,都来自阿里的“鹿班”AI设计系统。设计数据—机器学习、训练模型—生成设计结果并评估。如果这些工作量由人工来完成,那么设计师真的就成了“没有感情的作图机器”了。
当今社会,随着产业智能的发展,在这个变革中,挑战不单单来自技术,也来自客户对智能数字体验的极致追求。这给开发人员和设计师都提出了全新的难题,在可视化领域,通过技术和设计两个角色更紧密的捆绑,产生了让人欣喜的化学反应。
从原始数据到图表并不是直接的,它需要经过交互的分析,得到指标结果,最终以可视化图表呈现,而呈现的视觉方式是多样化的。
这就是所谓的两种数据,三层讲述:
第一步是原始数据的准确转译,工具需要数据对接能力,即对现状的讲述。
第二步是分析过程,从脚本模式跨入数据驱动,让数据的分析变得可知可信。
第三部是观点数据的表达,也就是创作强化,将结论以可视化的多样形式被表达。
这是根据地图的原始数据得到的多种可视化设计方案,同一份原始数据,却得到了不同的形式表达。
因为仅仅有准确的数据结论是不够的,因为数据需要更好地被讲述和表达,如果仅仅将数据呈现给用户,那么理解难度将会大大提高,而设计是为了让产品变得更加容易使被理解和使用。
第二点,体现在建筑的三维可视。
首先,在二维地图选取建模范围,通过智能化的处理,根据数据构建初始的三维地图。
然后通过数据联动,将城市建筑虚拟还原。
整个过程从数月—> 数周—> 数天,时间大大缩短,人力成本减少,释放更多的精力去进行创意工作。
建筑三维化的应用:比如车道级地图。
相比于传统地图,车道级地图导航在信息精细度、定位准确性、动态信息丰富度上有大幅提升。
车道级导航能清晰显示道路上的虚实标线、自己的车行驶在哪条车道上,还能在地图上看到车身摄像头和雷达检测到的周围车辆、锥桶、防撞桶等。
当设计对象从单个产品转变到用户的经历和当前环境时,设计师不能只考虑自己的产品体验,需要从大局出发,思考每个产品之间的联动,考虑不同场景下自己的产品如何服务用户以及如何与其他产品联动。产品设计从单体变成一块需要考虑兼容上下左右外部环境的拼图。
智能化的场景的改变对设计有哪些影响呢,我们来看这张图:设计的场景从有形—>无形、静态—>动态、永恒—>瞬间的转变。体验设计的趋势从GUI到TUI(实体交互),再到Radical Atoms,场景的改变对设计的影响维度不是单一的。
设计场景在AI时代不仅局限于手机,还涉及到实时场景的设计情况。
比如谷歌的实时翻译、语音翻译。输入与输出是同步进行的,这就对设计提出了新的要求。
此外,还有语音智能VUI,彻底打破了以往的交互体验,改变了人和工具之间的互动关系,反向塑造着人类的认知方式和学习行为。下面来看一个小爱5.0案例:
对话是人与人之间交换信息的普遍方式,语音交互设计涉及系统学、语言学和心理学,因此它比 GUI的交互设计更加复杂。
体验设计经历了PC时代、Mobile时代,现在进入IoT体验时代。设计的解决方案与技术的发展息息相关,设计和技术互相促进带来新的体验革命,设计师一直在探讨和实践在新技术环境下的新体验设计,并基于出行、医疗、社区、政务等行业持续挖掘服务聚合模式与场景体验的创新。
在新零售的场景下,购买和支付流程发生了改变,这就需要设计师重新思考消费者的心理地图。例如无人零售、Amazon Go、支付宝IOT支付等等。下面来看一下Amazon Go的案例:
如何让用户使用更便捷、体验更顺畅;要向用户提供什么样的服务,如何让用户注意到我们的产品,如何向他们传递企业的服务价值和特点,这是IOT新零售下需要设计深入研究的方面。
在云端实现企业产品的全区域管控,监控的设计视觉和交互又是不一样的,比如论坛上的案例:荷鲁斯之眼、全区域覆盖的云监控等等。
通过对多个实体空间中的数字设计探索,重新塑造人与空间的交互界面,提升人们对于空间的使用体验。下面举个例子:
AT&T discovery district是一个数字化的互动商业社区。
它从重新审视建筑本体开始。通过虚实和光影的变幻,营造出了实体空间体验,空间本体就是对话的那个界面。实体空间和数字内容的结合,构建出人与建筑之间新的交互界面。
广场的数字球体入口,人的位置和数量变动,球体内的灯光也会跟随变动。
人工智能促使了交叉学科的工种产生:数字体验设计师、创意工程师。这两种职业是做什么呢?面对正在到来的智能时代,体验设计师和创意工程师将共同面对“AI”这一全新的命题,在智慧工地、智慧教育、数字警务室、神经符号AI等应用中,提炼出智能感设计方法、利用图形技术能力自研产品并赋能业务。
数字世界中的设计师:横跨了艺术、文化、科学、商业多个学科;从传播学、心理学、应用科学和统计学进行用研,去解决用户遇到的问题。
它不仅涉及到需求分析和产品设计,还贯穿至产品运维、测试、发布、分析,从设计洞察中做出创新设计。
未来的设计师将融合人工智能和创意编程技术,在世界数智化的大潮中找到新的定位和新的机遇。
第三部分,在人工智能时代下,未来的设计会走向哪里?新时代的设计师怎样找准自己的定位呢?
人工智能的成熟对部分设计师来说简直是灾难性的打击,之前无论是通过技法还是数据分析才能完成的工作,人工智能一下子就可以完成,后续根本不需要这么多设计师来完成这些工作。那么设计师是否会被人工智能取代?我们先来看一张人类能力地图:
这张图中,海拔高度代表这项任务被计算机执行的难度,不断上涨的海平面代表计算机现在能做的事情。从图中可以看出,目前人工智能水平预警线距离代表艺术的山峰还很远。
人工智能没有人类的跨领域推理、抽象类比能力,也没有人类的主观能力如灵感、感觉和感受;更没有人类特有的灵魂、爱、意识、理想、意图、同理心、价值观、人生观等,这导致人工智能在未来很长一段时间内都无法很好理解人类的心理和行为是什么,在解决推理和情感问题时会不尽人意。
设计除了解决问题外,还涉及对美的理解和创作,美感是对美的体会和感受,它是复杂的,包含了历史、文化、环境、情感等客观因素和主观因素,所以在不同的时代、阶级、民族和环境中,有着不同文化文化修养和个性特征的人对美的定义也不同。
人工智能依赖数据和经验解决问题,它能解决大部分智力可解决的问题,但解决不了需要情感和美感才能解决的问题。而设计的擅长领域,是人工智能不擅长的:跨领域推理、抽象能力、常识、审美、自我意识与情感。那么AI与设计的关系怎样的呢?
设计是为了解决问题。人工智能使机器代替人类实现认知、识别、分析、决策等功能,其本质是为了让机器帮助人类解决问题,也就是说,人工智能在一定程度上也是一种设计,它会创作出与人类思维模式类似的解决方案。所以AI与设计师是一种共生关系。因此设计师不用杞人忧天,担心自己被人工智能取代。
随着AI 技术的成熟,设计必定会发生新一轮的变化,在未来,更多领域和行业需要用到界面设计、人机交互等技能,各行各业的设计师需要掌握以上技能才能更好地服务当前业务。那么未来的设计将走向哪里呢?
新一代的设计师是“与互联网共同成长的一代”,相信在未来几年里有更多的新晋设计师会掌握编程开发能力以及其他能力,综合素质会比目前的设计师更强,所以我们要保持终身学习,懂得如何将自己的能力和经验转换为优势,这样才能在设计道路上不被超越。
那设计师可以从哪些方面来应对智能时代的机遇和挑战呢?
每一代人都有被下一代人取代的风险,但有些很厉害的人就不容易被取代?因为他们在不断创造价值。无论在社会、行业还是在企业里,当具备一定的影响力后,他们能更容易积累人脉和资源,然后反哺自己的价值,就跟滚雪球一样,当雪球越大,他们越不容易被别人取代,设计师需要有这样的意识。
设计师需要懂得更多领域的知识和技术才能拓宽自己的视野,这些领域包括但不局限于传感技术、网络技术、智能仿真技术、虚拟技术、生物技术、纳米技术等。因此科学与艺术是可以并且很有必要相通与交融的,设计师一定要学会跨界思考。人工智能时代下,数字世界和物理世界会逐渐融合,大到城市建设、公共服务、衣食住行和医疗;小到智能家居、穿戴式设备,这些机会将会留给已准备好的挑战者,所以设计师一定要拓宽自己的视野,不要把自己的目光局限在界面设计上。
如果不想被人工智能领先,人类的设计应该是创新的(未成熟、未被发现规律的),包含更多元素的(更多复杂参数如历史、文化、环境、情感等),“设计”这个词语就涵盖了以上元素。人工智能在艺术设计上还远远达不到人类的水平,深耕艺术设计将会为设计师带来更多机会。
在人工智能时代下,当产品基本都能满足永不需求时,能为产品带来活力和差异的除了自身的底层技术基础,更多的是艺术型设计师的理念和风格,以及自身的品牌。就像时尚品牌优衣库和Gucci,单件商品两者的品牌和设计所带来的的利润差距巨大,相信未来的人工智能产品也会面临类似的问题,设计师应该考虑如何为产品赋予更多价值,如何彰显用户的个性。
既然AI是一个强大的工具,那么我们要思考如何运用它来创造更多的价值。AI能够快速便捷地获取大量信息,帮助设计师拓展自己的视野,不断更新自己的世界观,从新的视角看待问题和解决问题。除了快速获取信息外,设计师也应该考虑如何通过AI提高自己的工作效率,例如哪些纯劳动力工作交给AI去做效率会更高;哪些工作可以和AI一起协同完成更能激发创意。
最后,用一本科普书改编的话来结尾:一想到,还有95%的问题留给开发同学,我就放心了。
最后附上一张本文的脑图:
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
文章来源:站酷 作者:西子zhulijuan
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com