首页

关于让设计工作流程更加高效的思考!

资深UI设计者

项目的运作是需要多人合作完成的,在这个过程中会遇到内部和外部的各种的问题,我们这里主要讨论的问题属于内部问题,分人和事。


一、沟通前,多站在对方角度思考


项目大小不同,投入资源会有所分别,但是项目成员专业构成上却都基本是一致的。大家的专业背景不同,相互并不了解各自的工作,思维方式也是不同的,大家在讨论工作的时候也是习惯用自己熟悉的方式进行沟通,相同的事物会存在认知的差异,在传递、执行的时候产生偏差,从而影响目标达成的效率。工作中各自的工作都有不同的专业目标和标准,大家讨论问题都是奔着解决自己的专业目标去的,目标不同,诉求肯定就不一样。


如下图,只有三方达成共识才能做出“好的产品体验”对用户有价值、高满意度的产品,缺少一方都无法完成这个目标。


举例:开发在实现一个页面的时候,他们首先要考虑的不是页面好不好看的问题,而是从实现角度考虑技术方案、难度、性能;设计则是考虑视觉上的美观性、易用性;产品需求方则是考虑是否能满足需求,达成目标数据;在这个项目执行过程中,如果大家都坚持自己目标不让步,这个项目就很难进行下去,然后就有了“妥协”,项目的执行其实就是成员之间相互妥协、博弈的过程。这个过程需要项目团队不断的“磨合”,然后形成共识、工作上的默契。


“妥协”这里不是退让和降低标准,而是需要站在对方的角度思考,他为什么会要这样做?他和自己的方案哪个更有利于项目,如果他的方案有利,自己需要做出那些改变和投入?(这里要考虑可行性);如果自己的方案更有利项目,那就需要阐述自己方案的优势,有理有据说服对方接纳;这个过程必然是顺畅的,提升在执行项目时候的效率。


二、项目过程中,及时同步信息并达成一致


项目常见问题:项目从开始到结束会有很多个项目节点,在过程中因成本和难度,不断修改设计导致的结果偏差;参与决策者较多,之间没有达成共识,在项目不同阶段完成决策,导致的结果偏差;因外部因数导致目标的变化等等问题…


每个项目的流程都有不同的差异,但是多多少少都有上面提到的沟通问题和信息传递的问题,工作中我一直在思考如何更加有效进行沟通和同步信息。这里和大家分享交流一些心得和看法。


1、优化流程中的沟通、信息同步

明确流程节点上需要参与的人员,确保信息的同步触达范围;明确流程节点上需要完成的任务,并且有统一的输出标准、评价标准,让每一个人都清楚自己在做什么、如何去做;明确每一个阶段所需要达成的目标,让项目成员在项目进行过程中也清晰自己的任务,同时让新加入、合作的同事快速了解项目,提升协作上的效率,完成一致的目标任务


2、根据项目大小对流程进行分类

项目流程模块化,针对不同内型项目,明确任务需求模板:小项目(A任务) 、中型项目(A+B任务)、大型项目(A+B+C任务),


3、加强目标在项目中的一致性,建立高效的决策机制

通过项目阶段任务评审,及时将信息同步给项目成员,建立由“项目核心成员”和“决策者”组成的“评审团”,有分歧和问题的时候快速决策,解决问题;避免只讨论不做决策的会议,因为永远都是没有结论的


项目经历和思考


再过往的项目经历中,不同公司在不同文化背景下对于项目的流程管控和要求有着比较大的区别。


  • 互联网公司文化是比较看中体验的,这种思想是从上至下的,所以再遇到有分歧问题的时候大家有一个共同的判断标准“这样做是否会伤害用户体验?”,在此基础上再去讨论我们应该这么做,相对比较容易达成共识;

  • 在手机厂商做项目时,对用新增用户的压力没有互联网公司那么大,用户量的增加主要看手机卖的好不好,怎么盘活现有用户,提升活跃增加转化才是目标。所以更加看中的是用户运营,在挖掘用户需求的同时,更多的是考虑如何吸引用户;

  • 放在制造企业里软件项目只是整个产品项目流程中的一部分,项目按时上市是优先级最高的目标,其他节点在此时间倒推,硬件的时间往往是很难压缩的,不然卖出的产品质量无法保证就是很大的问题,所以往往可能被压缩的就是软件和产品开发的时间了(硬件产品项目相比互联网产品其实已经提前很长时间规划了,但是市场的变化太快)这样的事情时常发生,也无法避免,所以只能尽早做好规划、储备才能从根本上解决硬件产品在软件流程上遇到的尴尬问题。


最后谈点个人的观点,现在科技发展迅速的大环境下,用户被培育的忠诚度不高且善变。从鹅厂开始新起“微创新快速迭代”并不适合制造行业,也可能不在适合现在互联网,因为现在的“爆点”事件都是发生在创新的产品上,微信不是QQ迭代出来的,大疆也是通过自己的不断创新赢得了市场。想要做出领跑市场的创新产品,就需要挖掘更深层的用户需求实现“创新产品的规划和储备”,想的更远才能更有效率的创造对用户有价值的产品。





文章来源:站酷 作者:Midea_IoT_UED
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

如何在企业官网刻入品牌DNA?

资深UI设计者

我们可以从哪些维度强化品牌特质?我们在保留天虹品牌DNA的同时,实现新业态的呈现升级,向市场展示一个崭新的天虹。

如果聊起中国的零售巨头,我们一定不会忽略天虹商场(现“天虹数科商业股份有限公司”)最初所占据的一席之地。天虹是国有控股的上市公司,自1984年天虹注册成立后一年,第一家天虹商场——天虹深南店开业,正式开启零售业的征程,成为全国零售业的先行者之一。


天虹成立的30余年来,历经了经济发展的巨大变化所带来的市场繁荣,这也使消费需求多元化成为不可逆的潮流,越来越多中国零售企业采取了多业态发展战略,零售市场从过去的百货商店、副食店一统天下的局面迅速发展成为多业态并存的市场格局。


目录


01  项目展示

02  天虹品牌分析

03  天虹品牌DNA及核心竞争力

04  天虹新业态的呈现升级

05  从多维度强化品牌特质



天虹品牌分析 


过去几年,天虹不断在全渠道方向转型,突破传统购物模式,践行数字化、体验式、供应链三大业务战略,大力发展线上线下一体化的智慧零售商业模式。如今,它更把自己定位为一家提供生活解决方案的服务商。


天虹零售行业数字化转型正在如火如荼的进行,产品线的扩张让目标客户发生了变化,反观消费人群对天虹的印象,仍然停留在天虹仅是一家老牌的实力零售国企的形象,天虹这次找到我们进行官网改版,目的就在于此——在保留品牌DNA的同时,实现新业态的呈现升级,向市场展示一个崭新的天虹。



天虹品牌DNA及核心竞争力 


天虹自2008年确定新的品牌战略以来,始终将“亲和、信赖、享受生活”的品牌核心价值贯彻到底,天虹从事零售行业,贴近生活的脉搏,与生活息息相关,更是以“分享生活之美”作为企业使命。


品牌DNA不可复制,我们率先从品牌的视觉资产切入,计划在天虹新官网具体的视觉设计元素上,例如图标、颜色、配图等,结合品牌强化天虹DNA记忆符号,让记忆符号给访客在视觉、“触觉”等感官上加深印象。


一进入天虹的新官网,首屏上,一句“天虹,分享生活之美”的slogan配合自动播放的短视频,点明了天虹十余年以来一直坚持的品牌使命,天虹对自己品牌核心价值的阐述,也穿插在新官网的各个版块中。



天虹的品牌Logo是一抹橙色极简的彩虹形状,同时也是一丝纽带,意在构建一座通往利益相关者之间的桥梁,营造和客户之间平等、亲和、互相信赖的客群关系。


在首屏接着往下,一句精简的文案充分阐述了“天虹,分享生活之美”的品牌使命,同时应用了天虹logo一抹橙色极简的“彩虹”元素,把品牌基因融进网站交互与视觉设计,能让用户自然地产生与品牌间的联想,加深品牌印象。



这样给访客加深品牌印象的设计不在少数,例如从“了解更多”进入到天虹企业简介的Banner以及每个页面的底部导航,都有从天虹Logo特征延展出来的图形设计。



色彩是一个非常重要的品牌基因。从品牌色延展的色彩方案贯穿应用到网站中,是最为常用的建立品牌印象的方法。


用品牌色作为组件和高亮色自然是不用多说的:



但是,色彩并非越丰富越好,过于丰富反而会干扰访客对网站内容的吸收,我们根据品牌调性控制好品牌色的应用数量,有时候单色或者双色的配色方案更能形成突出的风格和印象。



大面积的色彩虽然能刺激用户的视觉感知,但是也可能分散用户注意力,因此,如果网站有更多资讯阅读类的内容就不适合用过多的色彩,否则会破坏用户的沉浸体验。


“分享生活之美”的主旨在网站中更多的表现在配图上,除了刚刚展示的首页视频,我们还在各个版块穿插了不同生活场景中有温度的图片素材,这些图片素材流露出专注、有朝气和亲和力的氛围,一定会让访客对天虹的好感油然而生。



在各行各业竞争日益激烈的当下,企业历经单一的价格竞争、广告竞争和产品竞争等方面的竞争之后,企业的品牌具有区别和领先于其他竞争对手的独特能力,能在市场竞争中展示品牌的内在品质、技术、性能和完善服务,引起消费者的品牌联想,促进其购买行为,因此,品牌竞争力会逐渐成为企业的核心竞争力。


在现如今的新零售时代,顾客体验感的提升、用户和线上+线下移动端多渠道的互动影响,让企业核心竞争力不再是孤立的某一个因素。而天虹30余年以来,能够保持自身的核心竞争力——品质与服务,这是天虹站在顾客的立场角度,去思考自身企业真正能够带来的价值,我们专门为此设计了一个【品质与服务】页面。


在品质上,除了阐述天虹一直贯彻并强调的经营理念,以及一直以来的践行,我们通过呈现权威的认证证书、六项质量大数据以及天虹的质量管理规范,更强有力的证明天虹品质。



同时,加入时间轴的交互设计,更清晰明了地向访客展示天虹从1987年至今,为顾客保证商品品质所付诸的行动,以及所获得的品质认证奖项。



在服务上,我们分为顾客选择天虹的服务之前、天虹服务顾客时、完成服务之后这三个步骤,明确说明天虹可以向顾客保证的服务品质。


在顾客选择天虹之前,我们运用七种颜色的交互动效,展示天虹可以给顾客的七重品质保证,每项保证都有针对性的服务承诺。


这里还有一个在背后小小的设计想法,七种颜色正好对应彩虹的颜色,也正好和天虹的“虹”相呼应。



为顾客提供服务过程中,直接列出了天虹五项顾客服务的基本准则,体现了天虹为实现品质服务的切实行动。



天虹完成服务之后,分别展示四个场景、渠道保证顾客无忧售后。



天虹新业态的呈现升级 


天虹不同以往的是新业态的改变,要呈现具备科技力的天虹,我们在策划品牌网站时要确定这两大要素:


  • Who—天虹的目标访客群体?

  • What—天虹正在做什么?



Who 天虹的目标访客群体?


一个网站的诞生,是为了服务特定的用户,在网站设计阶段,产品经理通常需要把网站设计构想和思路提交给产品研发团队、视觉和交互设计团队进行网站的设计开发,我们的设计开发团队如何才能清晰理解访客的真实需求?


那么,除了网站需求文档、原型图为主,还要把用户画像作为辅助说明,让我们设计团队成员在设计网站的过程中,对网站目标访客群体有一个更形象化的认识。我们在这不做对访客基本人物属性的分析,而是主要分析访客的使用场景以及访客故事,从而对网站版块、访客体验、访客通过网站完成任务时的浏览路径进行设计。



经过一系列的访客画像分析,我们可以肯定的是,扩张了产品线之后的天虹,新官网的目标访客也会面向更多群体,因此我们将会从这四个应用场景来决定建站方向:



只有让这四个目标访客群体浏览了天虹的新官网,才能真正实现向市场展示出一个崭新的天虹。


What 天虹正在做什么?


我国社会数字化转型进程的不断加快,数字化转型是包括零售企业在内的所有企业,都绕不开的一个重大课题,它能够为企业带来新的发展机遇。


对于天虹这样的零售企业来说,便是借助数字化技术提升企业的运营效能、降低企业运营成本,构建新的数字化环境下新的商业模式是最终目的。在【智慧零售】版块,正式介绍天虹数字化转型发展的新业态。


在为顾客服务上,天虹零售形式的变革是以交付为主要方向的变革,重塑全渠道零售形式之后,【天虹APP】与【超市数字化】把到店与到家等零售形式相融合,实现了顾客“所想即所得”的交付需求,助力了消费升级。


我们在对应的展示版块,附上相对应的使用场景图片,以及天虹APP、天虹小程序的二维码,更有利于访客即刻体验由单一的到店交付,到到家等多场景的便捷交付。



天虹在进行数字化转型中,还瞄准了一个重点是以数据驱动购物百货运营模式的重塑,能够实现原先由人决策、执行、协同,转变为由数据决策、数据执行与数据协同。


天虹购物百货的运营模式在进行数字化重塑之前,仅是依靠商户品牌形象+店内交易才得以完成交易,在【购百数字化】的说明中,我们展示了天虹“Before+After" 的数字化运营模式,向访客充分说明天虹从智能方面寻求新的突破,通过智能设备与数据智能,从而提高了入驻天虹商户的运营效率、降低运营成本的重要措施。



我们明白,信息架构作为网站交互视觉最底层的支撑,只有骨架搭好,对于用户的使用体验才能够有本质上的提升。在商户服务上,天虹还做到服务产品化,我们分别从这两类业务入手为访客做好阐述:


  • 平台业务:天虹在自己构建的平台上为商户提供各种经营工具及服务管理方案;

  • 数据业务:天虹会提供海量数据集成展示的看板给商户。


天虹具体赋能商户的四项支持,我们遵循整站的简约风格来做展示:



【天虹科技子公司】则直接跳转到灵智数科的官网,这是由天虹数字化经营中心孵化的数字化零售SaaS产品,为零售企业提供数字化转型方案,这更能表明天虹未来在实体数字化深耕的决心。



天虹在购物中心&百货、超市、便利店的运营模式中迅速铺开数据化、信息化、智能化的建设道路。其中,我们将天虹超市数字化运营细分为四个方面,真正做到可触达、可交互、可洞察、可追溯。



天虹微喔便利店同样运用线上+线上双模式,从四个方面共同打造天虹微喔的品牌力。



在天虹新业态的展示中没有做花哨的视觉和交互设计,因为当我们对信息架构有足够的认知时,我们在设计页面时才能有合理的思考方向,做出正确的设计,一家老牌的实力零售国企的数字化转型,我们更倾向通过展示一些应用场景,将具象化的价值传递给访客,能简则简。



从多维度强化品牌特质


消费升级时代的到来,数字化技术已经与传统的产品和服务产生了紧密相连的联系,正因有天虹这样的企业率先进行改变,我们早已能在日常生活中切实感受到服务的优化和改变。


我们团队通过品牌梳理进行本次天虹官网的改版,从天虹的品牌DNA、核心竞争力以及升级新业态的呈现等多个维度来强化品牌特质和传递品牌价值。我们在新官网做到对三个方面的升级,真正做到向市场展示一个亲和力与科技力并存的新天虹:


a.更温暖

天虹从事零售行业,以“亲和、信赖、享受生活”作为品牌核心价值,更是以“分享生活之美”作为企业使命,与我们的生活息息相关。在天虹新官网里,我们呈现了更多有温度的生活化应用场景,让天虹的形象更贴近用户,更贴近生活的脉搏。


b.更清晰

天虹的数字化新业态转型、品牌符号和视觉形象在新官网更清晰有力的传达给各个访客群体。天虹作为一家成立至今已有30余年的老牌零售国企,我们更倾向于谦虚地阐述天虹的营销理念,保持良好的信息层级可以让整体的浏览体验感更好,而不是对品牌展示的过度包装。


c.更立体

网站设计的过程是先发散后收敛,我们在动手画原型、写文档之前,需要进行大量的思考和调研访客实际的浏览逻辑究竟是怎样的,也就是回归应用场景。在天虹新官网的建设中,我们确定四个目标访客群体来指导网站布局设计的方向,其中【洽谈合作】、【投资者关系】与【人才发展】版块的设计,让天虹诚信、分享、创新和开放的形象更加立体,访客或许会因此对天虹多一份信赖。


文章来源:站酷 作者:增长超人
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


B端两大设计系统哪家强?

资深UI设计者

编辑导语:有效地利用 B 端设计系统,产品设计师将可以更高效地做出更好的交互设计。那么前段时间发布的 Arco Design 设计系统,和已有的阿里 Ant Design 系统,二者有什么区别呢?本文作者对两大设计系统典型页面发表了他的看法,一起来看一下。

简介

前两周字节发布了自己的中后台设计系统 Arco Design,在仔细阅读官网文档了过后,想和大家聊聊我自己对于 Arco Design 设计系统的与阿里的 Ant design 的一些对比和差异分析。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

ArcoDesign 是一套设计系统的简称,是基于字节跳动所有的中后台产品。ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现,主要由 UED 设计和开发同学共同构建及维护。

Ant Design 是阿里打磨出的一个服务于企业级产品的设计体系, 通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验

B端两大设计系统哪家强?来看这篇超全面的对比!

总览

Ant 和 Arco 两者的前端框架都是基于 React 和 Vue,设计价值观和设计原则也有所不同。Arco Design 基于「清晰」、「一致」、「韵律」和「开放」的设计价值观,试图建立务实而浪漫的工作方式。在「设计价值观」的坚持上,Ant Design 有四点与众不同:「自然」、「确定性」、「意义感」、「生长性」。

我的个人理解 Arco Design 是站在设计规范的基础出发点考虑,希望给用户传递出来的价值出发,让用户深刻感受到系统是「清晰」、「一致」、「韵律」和「开放」的,而 Ant Design 所传递出来的价值观似乎更加玄学或者说格局更高,上升到更高的思维境界,即大自然思想和社会责任。

当然这部分的内容相对比较虚,每个人侧重点想法都不同,大家可以自己去理解一下这部分内容。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

B 端典型页面分析

接下来会从工作台、表格、表单几个典型高频的 B 端界面进行分析,看看两者的差别。

1. 工作台

1)布局

Arco 的卡片列布局灵活,基于 24 栅格进行布局,将整个栅格区域 2:2:1 的比例进行分割,信息卡片的宽度根据栅格宽度进行自适应,这样的工作台页面既灵活也能够满足业务需求。

Ant 的卡片列布局采用 3:2 比例进行布局,同样是基于 24 栅格。目前主流的 B 端页面都是以 24 栅格为基础进行设计。3:2 还是 2:2:1 这两种卡片布局方式没有绝对的优劣,主要是根据我们页面的信息量以及行业属性去确定。如果工作台所展示的单个信息量较多可采用少列大宽度进行布局,满足信息展示的最优布局。

作为 B 端的工作台页面,核心诉求是能够清晰找到用户想要的信息,想要做的内容,所以我们设计师要优先保证用户能够快速定位到核心的信息,快速到达要到达的功能。

2)信息展示

Arco 针对同系列的模块设计了两种尺寸的间距,例如欢迎问候信息与下方的数据信息之间是大间距,数据信息与下方的团队动态最近项目之间是小间距。

格式塔心理学的接近原则指出:接近的事物会被认为是同一个整体,拥有相似的功能或特征。所以在这里设计师通过两种间距的留白对我们视觉进行暗示,强调信息之间的关联程度,便于区分信息层级。

Ant 在卡片方面没有为卡片间距设置两种尺寸,从上下到左右都是一种尺寸,这样做的好处可以让视觉更加对齐,显得页面更加规整,不好的一点就是内容区域外间距与卡片之间的间距一样宽视觉上并没有聚焦,显得内容区域很散。标题方面没有进行加粗重色强调,将内容进行突出,使用户更加聚焦于内容。

B端两大设计系统哪家强?来看这篇超全面的对比!

3)导航方式

两个系统默认都采用侧边栏导航方式,侧边导航在国内的 B 端产品当中最为常见的。将菜单栏放置在左侧,页面布局上基本为左右结构,将导航菜单放置左侧固定。侧边栏导航扩展性强、展示灵活、能够快速定位,缺点是不易阅读、阅读沉浸感低。

B端两大设计系统哪家强?来看这篇超全面的对比!

Arco 导航区域与内容区域都使用同类浅色,采用线的方式进行分割,整体视觉比较清爽。Ant 导航区域使用了传统的重色与内容区进行区分。

目前的设计趋势流行浅色导航,有几个产品的 WEB 端进行了一系列的大改,YouTube、Twitch、Twitter 都进行了重新设计,他们不约而同地将块面去除,去掉多余的的灰色,通过留白和空间将页面拉开。这否是下一个 WEB 端所要追寻的趋势,我还不得而知,但是对于导航层级多的侧边栏导航,我仍然建议使用深色背景区分导航栏。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

有一个细节,在页面背景有一个以登录的用户名形成的一个背景水印,在 B 端的页面中,对信息的保密程度要求很高,这里是为了防止公司核心数据资料泄露,在截图的时候会有水印的存在,增强了信息的保密级别,这是一个很好的设计洞察点。

B端两大设计系统哪家强?来看这篇超全面的对比!

2. 表格

1)表格样式

表格作为组织整理数据的手段,可以有效地向用户展示数据信息,是 B 端产品中出现最高频的模块之一。

用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化(关联和区别)。好的表格信息展示设计,应当是能够辅助用户高效便捷地实现以上场景中的诉求。

Arco 和 Ant 的表格设计样式与市面上多数产品都类似,采用表格列无分割线条、表头与内容左对齐、数字右对齐的方式。

B端两大设计系统哪家强?来看这篇超全面的对比!

合格的表格设计要定义合理的表格行高,在具体设定表格行高时,由于表格中以文字信息为主,我认为可以参考文字排版的常用做法,将整个表格的行高分成文字行高、文字与分割线间距离,即上下间距两部分来考虑。

文字行高可以设定为字号的 1.2~1.8 倍,文字与分割线间距离可以设定为字号的 1~1.5 倍。

B端两大设计系统哪家强?来看这篇超全面的对比!

2)信息展示

表格行高决定屏幕内能呈现的行数,即用户在一屏内能获取信息的数量,主要影响用户纵向对比数据的效率。

在 B 端用户使用场景中,数据量极大的表格的展示问题是体验优劣的关键因素。对于 1920*1020(包含该分辨率)以上的大屏用户,对于一屏显示行数的感知不强,但对于 1366×768、1280*720 等这类小屏,显示行数有限,用户进行纵向数据对比的效率就会有所降低。在设计前,应当充分了解目标用户的行为诉求,了解目标用户设备屏幕分辨率的占比分布情况,有针对性的设置行高。

B 端产品的特点之一是通用化,覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。产品为了让不同用户都能获得较好的体验,可以考虑把表格疏密度的设置开放给用户,建议不是完全开放给用户去调整尺寸,而是给出一定阶梯度的快速选项,例如舒适、标准、紧凑三种高度来满足用户需求。

Ant 的表格功能很齐全,很多功能都是 B 端产品的痛点,例如表格可以通过调整单元格行高来调整密度,紧凑模式下可以显示更多的数据。

B端两大设计系统哪家强?来看这篇超全面的对比!

3)操作路径

作为一个查询表格,我不是很理解为什么 Arco 将查询条件放置在表格右上角这么隐秘的位置,而将明显的左上角放一个添加按钮,如果存在多个查询条件是不是要从右往左放置呢?这里我不是很理解,大家也可以说一下自己的想法,相互探讨一下。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

Ant 的表格使用路径符合 F 型视觉动线布局,在 B 端的市场中这种表格的设计方式已经符合用户的操作习惯了。

B端两大设计系统哪家强?来看这篇超全面的对比!

在 2006 年时候,尼尔森诺曼发表了一篇人们如何扫描和阅读网站习惯的分享,他们通过研究发现,用户倾向于一种 F 模式去查看网站。F 模式,能很好地帮我们创建好的视觉层次结构设计,因为这是人们可以轻松扫描设计一种布局,它能让大多数用户感到舒适,因为我们用户一直从上到下,从左到右阅读。

在设计之前,我们先要去确定哪些内容最重要,明确信息的优先级,只有清楚知道你希望用户看到什么,才能将它们放在用户视线热点中。

个人认为在表格设计的完整度和设计的合理性方面来看,阿里的 Ant 系统做得比字节的 Arco 更好。

3. 表单

表单在界面中主要负责数据采集的功能,任何一个表单都可以被拆解成三个最基本要素:

标签(标题)、输入框和按钮。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

1)表单布局

Arco 的表单属于复杂表单,当表单条目数在 7 个以上,可归类到复杂表单,这时候就需要根据表单的复杂度、逻辑性、关联性进行判断,选择合适的分组方式,进行归纳简化,降低表单填写负荷。采用 3 列布局,便签与文本框上下左对齐,这样的对齐方式有利于用户浏览的效率、对齐的美观以及国际化拓展页面的对齐问题。

Ant 的表单也是较为常规的布局方式,有一点差异就是文本框并没有右对齐,这里阿里自己也做出了解释:文本框是根据需要填写的字段进行长度展示的,需要填写内容比较长的文本框就会比较长。实际业务中,大部分 input 所需填写内容都存在理想长度,input 的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。

2)标签对齐方式

Arco 和 Ant 都使用了顶标签的形式对齐。

标签分为左标签、右标签、顶标签三种,不同的对齐方式,使用场景不同。

B端两大设计系统哪家强?来看这篇超全面的对比!

该如何选择呢?我们需要从 3 个方面进行考虑:操作效率、标签长度、屏效、视觉对齐。

① 操作效率

根据 Matteo Penzo 的研究总结得到的浏览时间表发现,标签移动到输入框的时间,顶部对齐最快只要 50ms,其次是右对齐 240ms,左对齐耗费时间最长 500ms。

因此当以操作效率为主时,推荐使用顶对齐的方式。

B端两大设计系统哪家强?来看这篇超全面的对比!

② 标签长度

当标签长度超过 8 个字,或者需要考虑中英文双版本时,推荐使用顶对齐的方式,其容纳的标签文字更多,拓展性更好,比如 Ones 的建任务的标签,就采用标签顶对齐的方式:

B端两大设计系统哪家强?来看这篇超全面的对比!

③ 屏效

如果只考虑屏效,那么标签左对齐右对齐均可,但是如果还考虑表单录入效率,那么推荐使用标签右对齐的方式,比如蜂鸟汇报:

B端两大设计系统哪家强?来看这篇超全面的对比!

颜色主题配置

Arco 的颜色主题配置可以说是让人眼前一亮了,可调整的范围非常广非常牛逼。可以编辑的维度从基础的颜色、字体、阴影、 到组件的按钮、导航、分类、表格 一共有接近 40 款组件的样式,并且都是可以进行可视化编辑与实时预览的。

如果你用了 Arco 过后,或许不用苦苦地站在前端后面,让他帮忙调整页面,作为设计师自己就能够搞定,并且每一个组件可以调整的粒度是非常之细,包含各种宽度、图标大小、颜色、投影,等等…在这里可以编辑自己的主题,也可以在商城社区查看到别人发布的主题,真的是很方便啊。

真的有些 amazing!假如你需要去设计一套官方的设计系统,完全可以通过 Arco 进行设计和预览、落地。

B端两大设计系统哪家强?来看这篇超全面的对比!

Ant 并没有做这方面的功能,颜色主题配置这一块确实是 Arco 很大的亮点。

B端两大设计系统哪家强?来看这篇超全面的对比!

总结

无论是 Arco Design 还是 Ant Design 设计系统,都代表了字节跳动和阿里两家互联网巨头公司在 B 端领域的沉淀和竞争。对于 B 端交互设计师来说,两个设计系统都值得我们去研究和学习,建议大家都去看看设计规范里面的内容,对于我们认识和熟悉控件以及和开发对接都很有帮助。

文章来源:优设 作者:哄哄
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



如何去做好响应式设计?

资深UI设计者

对于大多数网页设计师来说,你的成品需要在各种类型和尺寸的设备上进行外观和工作,这是显而易见的。创建多个设计来实现同一目标的日子已经一去不复返了。


这一切都归结为选择响应式或自适应设计模型,以实现任何规模的一致网站设计。


但是响应式和自适应之间有什么区别?它们真的只是一回事吗?让我们来看看并解释你需要知道的一切。喜欢记得关注UI范,每天更新,打造你的知识武器库!




1.与设备无关的设计的两种方法



就其核心而言,响应式和自适应技术在最终用户看来可能是一样的。创建设计和开发方法都是为了使网站在所有设备类型上都具有良好的外观和功能。
主要区别在你如何使用响应式或自适应技术创建网站。




2.响应式设计



响应式设计是任何使用网站的人的“家庭”术语。也许几乎令人惊讶的是,它并没有那么老。它是由Ethan Marcotte在 2010 年创造的:

现在比以往任何时候都更重要的是,我们正在设计旨在沿着不同体验的梯度观看的作品。响应式网页设计为我们提供了一条前进的道路,最终让我们能够“为事物的潮起潮落而设计”。


而这正是我们目前关于响应式网站的思想学派的起点。




响应式设计是一种技术,其中网站在任何给定尺寸下“响应”浏览器的尺寸,以便针对屏幕优化设计。理想情况下,用户应该从单个网站获得相同的体验,无论他们是在只有几百像素宽的移动设备上手持它还是在超宽屏幕显示器上观看它。

响应式网站使用了许多你可能熟悉的元素:媒体查询、灵活的网格和响应式图像。它可能是针对多种屏幕尺寸进行设计的最流行方法。(纯粹主义者会注意到响应式设计与设备本身无关,只与大小有关,而不是自适应,它在完美渲染的道路上检测设备类型等。)

根据交互设计基金会的说法,响应式设计更容易,实现的工作更少。这可能是它被更广泛使用的原因。


响应式设计师创建一个单一的设计,用于所有屏幕,通常会从分辨率的中间开始,并使用媒体查询来确定将对分辨率标度的低端和高端进行哪些调整。这往往会让用户感到高兴,因为熟悉的网页设计似乎保证可以转换到任何设备的屏幕上。均匀性和无缝性是提供良好用户体验的关键考虑因素。

此外,由于涉及开发时间,响应式设计通常是大型网站的选择。响应式设计植根于网格系统,响应式测量(考虑百分比或最小值和最大值)可帮助设计以不同的尺寸扩展、收缩和堆叠。
这种设计技术是新开发的规范。



3.响应式设计的优点

  • 无论设备或浏览器如何,该设计都适用于任何视口尺寸。

  • 响应式设计对搜索引擎友好(谷歌甚至推荐它)。

  • 允许设计中的很多精确度,以便设计师可以调整任何或每一个细节。

  • 高度移动友好的设计选项。

  • 与你可能用于网站项目的大量主题、网站构建器和工具兼容的常见设计实践。

  • 该设计将具有统一和无缝的外观,这将提升整体用户体验。





3.响应式设计的缺点

  • 确保响应式元素在不同尺寸(尤其是较小尺寸)下仍保持可读性和可访问性非常重要。
  • 通常需要比其他网站更多的编码,这可能需要时间或导致重量。重要的是要注意并注意这里。
  • 你无法控制所有设备尺寸,最终可能会设计出与旧尺寸或更模糊尺寸不符的设计。
  • 元素可能会在你身上四处移动,并不时以奇怪的位置结束,甚至由于核心内容管理系统或网站框架更新,因此重要的是要随时了解变化。



4.适应性设计


自适应设计几乎与响应式设计一样古老。该技术于 2011 年首次使用,涉及针对特定设备尺寸和类型进行设计,以获得更加个性化的体验。
这是来自MDN Web Docs 档案的一个很好的解释:“自适应设计更像是渐进增强的现代定义。自适应设计不是一种灵活的设计,而是检测设备和其他特征,然后根据一组预定义的视口大小和其他特征提供适当的特征和布局。”

设计植根于六种固定变化(宽度):

  • 320 像素

  • 480 像素

  • 760 像素

  • 960 像素

  • 1,200 像素

  • 1,600 像素


自适应设计最常见的用途是将旧设计转换为更适合移动设备的设计。这并不是说它不会发生在新的开发中。




5.自适应设计的优点


  • 移动设备会告诉设计它们是什么,以便设计非常适合该设备和浏览器类型。
  • 自适应设计在事物的设计方面提供了几乎精确的控制。
  • 智能广告是一种可能性,允许来自智能设备的链接。
  • 自适应设计在速度测试中的得分往往高于响应式设计。
  • 该设计可以使用更多的个性化功能,连接到智能设备的使用选项和适配。
  • 对于需要刷新的小型网站来说是不错的选择,因为你只需“设计”较小的尺寸。



6.自适应设计的缺点

  • 由于配置错误,您在设计时可能会遇到一些不太常见的设备(例如平板电脑)的问题。

  • 自适应设计可能是劳动密集型的,需要更多的开发时间和成本。

  • 由于内容重复,搜索引擎在使用自适应网站时会遇到更多困难。

  • 有一个偷偷摸摸的现实,你设计同一个网站六次。

文章来源:站酷 作者:UI范

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


创建设计系统前,6 件必须知道的事情

资深UI设计者

编者按:资深产品设计师 Taras Savytskyi 将自己在初创团队中的设计经验浓缩成为今天的这篇文章,如果你也是设计团队中唯一或者主要的设计负责人,需要考虑到设计系统的问题,那么这篇文章的6个总结,应该能够给你不少帮助:

创建设计系统前,6 件必须知道的事情

成为公司当中唯一负责产品设计的设计师,其实并不是一件容易的事情。你可能会非常忙碌,因为你需要处理很多事情。你需要考虑产品的设计,交付物料,和研发人员协作,在沟通会上做QA,做用户访谈等等。

此外,你可能还需要保持你的设计技能持续精进。比如 Figma 或者 Sketch 更新了新的功能,推出了新的插件,你可能需要持续关注。我们通常会使用 Figma 来作为主要的设计和协同工具,所有的设计、探索、头脑风暴都在其中完成。

我加入 Statflo 之后不久,作为公司唯一的设计师,我需要设计一个全新的 APP,在这个过程中我需要设计一个全新的设计系统,帮我足够快速地创建后续的原型。

1、无需犹豫,直接基于现有的开源设计系统

创建设计系统前,6 件必须知道的事情

刚开始的时候,你不需要太多的素材。你可以直接调用绝大多数的原子组件,比如按钮、下拉菜单、表单、字体、配色,等等。默认初始状态的样式无关紧要,因为后续点击几下就能够快速调整样式。

但是这也意味着,你需要在第三方设计系统当中,找到重要的、足够灵活的、合适的组件来套用。你可以从下面几个设计系统开始着手:

免费: Ant Design Open Source, Lexicon DSL

付费:Tetrisly , Venus Design System73px

2、主要关注基础组件、颜色和排版

创建设计系统前,6 件必须知道的事情

在此之后,你如果要继续推进你的设计系统,你需要首先关注几件简单的事情:配色、排版和基础组件。

完成这几个部分能够帮你更快地完成整个体系的搭建。比如你预设了不同状态的配色,那么当你完成某个UI组件的默认状态的设计之后,可以快速添加其他状态的样式。

又比如,如果你不确定在输入字段当中使用什么图标,那么你只需要创建一个 16×16 的正方形,使用灰色填充,作为占位符,等后续图标素材确定之后,再填充进去就好了。

3、总是从一个组件开始设计

创建设计系统前,6 件必须知道的事情

当你是初创团队中唯一的设计师的时候,你有很大概率需要自己构建一套设计系统。如果你想在这件事情上节省时间,那么最好的方法,就从你当前正在做的这一个 UI 组件开始,将其中所有的元素转化为固定的组件,逐步拓展出设计系统。

以这种方式来执行,可以节省大量的时间,并且这种方式能够帮你更快明确哪些元素在一开始可能就是重要的。

在理想情况下,你的设计流程是绘制小元素,然后逐步组件成为你所需要的组件,这样的处理机制让你无需花费时间来反复更新组件的设计。

4、使用 Figma 当中的「Master」插件

创建设计系统前,6 件必须知道的事情

不过,以这种方式来创建设计系统的时候,你可能会碰到一个问题:你可能会忙于设计,而忘记将创建特定的组件,相反可能会复制一堆完全相同的画板。这个时候,手动撤销操作可能是一件极度麻烦和无聊的事情。这个时候,你就需要一个专门解决这种问题,这个插件名为 Master,创建者是 Gleb Sabirzyanov,它可以帮你将这些重复的画板转化成为一个固定的组件。

但是这还不够。如果你执行的操作足够多,这些你所复制的元素可能已经应用多个画板和页面当中,这个时候,你需要借助名为 The Similayer 的插件,来帮你搞定相似组件的识别问题:它可以一键识别出分散在各处相同的元素,然后你可以将他们转化成你所指定的 UI 组件了。

创建设计系统前,6 件必须知道的事情

5、利用项目间歇来完善设计系统

有时候项目和项目之间是有间隔时间的,这个时间段就特别适合你去覆盘之前设计的组件,将其逐步改进融合成为一个系统。相信我,你在这件事情上所花费的时间,将会在你下一次创建新的功能和组件或者原型的时候,得到回报。

我一直试图在自己每周的日程表当中,腾出几个小时的时间专门来做这件事情,帮我完成我的设计系统的增量更新和迭代。

创建设计系统前,6 件必须知道的事情

6、一开始不要纠结于正确命名

在创建设计系统的过程中,尤其是当你在不同的项目过程中,各种组件总是没法正确的命名。根据我的经验,在设计的时候,怎么命名方便怎么来其实是很合理的,一开始一定不要纠结,留着在后面的阶段再行解决都好,之后单独梳理命名、路径、结构、嵌套等等关系,比起你一开始做某个小组件的时候就纠结这些事情要更加合理,也更加方便。


文章来源:优设 作者:VMIC UED

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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





最新 UI 设计趋势及应用

资深UI设计者


字体图标,完善字体系统


图标在 UI 中扮演着重要的角色,并且已被证明是过去几十年 UI 设计趋势的象征。在图形用户界面的发展早期,图标在计算机的显示技术限制内尽可能仔细地模仿现实世界的物体;它们旨在将用户体验从现实世界链接到计算机世界。这可以从苏珊·卡尔 (Susan Kare)为第一台麦金塔 (Macintosh) 设计的图标和微软 (Microsoft) 在 Windows Vista 和 7 中的拟物图标设计中看到。

当用户界面从这种拟物风格转变为 Windows 8 和 iOS 7 的“扁平”风格时,图标设计也转变为单色、线性风格。随着 Android 12 的发布和谷歌新版设计系统—— Material You (或 Material Design 3) , 所有主要操作系统现在都使用这种风格。



但是为什么各大设计系统都使用这种风格的图标呢?设计师意识到图标不仅仅是风格统一、为功能补充说明的辅助图形——设计师制作的图标等同于印刷师制作的字体。 这让设计师意识到图标对于用户体验来说和字体一样重要。


图标的设计考虑与字体类似,并且经常出现在文本旁边。
— Material Design 3 指南

Iconography [旨在] 与 San Francisco 系统字体无缝集成。
— Apple 人机界面指南


Apple 的 SF Symbols 就是最好的例子:它的图标与系统字体具有相同的九种权重,并与文本的大写高度对齐。这也意味着图标可以遵从用户对更粗的 UI 文本的可访问性设置。


Apple 的 SF Symbols 图标集设计为与系统字体相同的九种权重。资料来源:苹果



它们还与系统字体的大写高度对齐,以更好地补充文本。资料来源:苹果



Uber 的设计团队也绘制了字体图标来完善他们的 UI 字体 Uber Move,设置了三种不同的强调程度。


资料来源:优步



字体图标旨在模仿书写系统

因此,为什么字体图标是单色的并用轮廓绘制的原因就很清楚了:它们不是模仿物理对象,而是模仿我们的书写系统。现代字母,尤其是拉丁字母,基本上是由线条而不是填充形状组成的。他们从类似物理对象(如埃及象形文字)的象形文字到更抽象的物理对象表示进行了类似的转变。例如,你不需要画一只鸟来谈论一只鸟;您只需写一组表示“鸟”的字母或符号即可。

通过设计类似于字体的图标,设计师认识到图标是向用户传达信息的重要媒介。图标可以打破语言障碍,而文本对于那些不熟悉图标的人来说仍然是必不可少的。将两者设计为看起来相似可以减少在阅读文本旁边的图标时的认知负担。

默认为字体图标的另一个好处是填充的图标现在可用于表示状态或强调,如粗体文本。例如,Material Design 3 中的“活动状态用填充图标表示” ,Apple 在他们的人机界面指南中建议“使用填充变体来表示选择”或“赋予符号更多视觉强调” 。Twitter 2021 年的重新设计更进一步,活动页面仅通过填充图标和粗体文本进行区分,没有任何颜色变化。


Twitter 仅使用填充图标和粗体文本来区分当前页面。陪审团仍然不确定这是否足够容易访问。



未来不一定能够被准确预测,但是看看字体系统的历史,已经有了明确的关于什么图形代表什么意思的规范:符号“a”总是表示“a”,字母“ant”表示蚂蚁。这些符号的绘制方式仍然存在差异(大写字母 A 可以有衬线或没有衬线),但它们在不同字体中的外观基本相同。

图标似乎也朝着这个方向发展——上面的“添加文件夹”图标在苹果、谷歌和微软的图标集上具基本相同的设计:一个带有“+”符号的文件夹。随着图标在 GUI 中变得越来越普遍,用户对于什么符号代表什么意思的认知越来越趋同,就像字体一样。



如何才能使用字体图标?在您的应用程序中使用图标时,您应该使用使用您正在使用的字体设计的图标集:如果您使用的是系统字体,这很简单,现在系统字体都具有系统图标字体。但是,如果您使用另一种 UI 字体,则可能没有专门为该字体设计的图标集。使用普通的线性图标集就足够了,例如开源Feather 图标Iconic.app「1」。如果你像我们一样使用 Material 图标,你可以轻松切换到字体图标。(似乎 Google 现在已将此样式作为 Material Design 3 的默认样式。)


基于壁纸的个性化

个性化正在成为 UI 设计中越来越重要的元素。虽然自 20 世纪 90 年代以来就存在自定义壁纸和主题,但设计人员现在正在寻找更多方法来个性化整个系统的 UI,主要是用户选择的壁纸。谷歌的 Material Design 博客说得最好:“用户在物理和数字世界中使用个性化的图像定制他们的桌面,并提供舒适和快乐。” 壁纸是用户首先看到的东西,并作为 UI 的背景。因此,让 UI 的其余部分适应此元素是轻而易举的事。



将壁纸融入 UI 的技术已经存在一段时间了,从 Mac OS X 的 Aqua 界面中的半透明 Dock 和菜单到 Windows Vista 中的半透明窗口标题栏和 7 的 Aero Glass 主题。众所周知,iOS 7 为其 UI 的许多部分带来了模糊的背景,整个屏幕(如通知中心和控制中心)都使用了可以透出用户壁纸的毛玻璃效果。

最近,墙纸开始影响几乎整个 UI。当 Apple 在 macOS Mojave 中引入暗模式时,他们在基于壁纸的窗口背景中加入了一种色调,称为桌面色调。根据人机界面指南,它“帮助窗口与其周围的内容更和谐地融合在一起。”



后来他们在 Big Sur 的主要重新设计中扩展了这一点,将桌面着色也应用于光照模式:



Windows 11 在其 Mica material 设计系统中引入了类似的元素,他们的设计指南将其描述为“一种不透明的材料,它结合了用户的主题和桌面壁纸,以创建其高度个性化的外观。” 它还使用此色调作为当前活动窗口的标志。

将它提升到一个新的水平是 Android 12 中的 Material You,它为应用程序的背景、按钮和其他控件的明亮强调色以及更中性的文本颜色着色。整个调色板由每个用户的独特壁纸生成。

这是他们新设计理念的一个关键元素,“如果形式跟随感觉而不是形式跟随功能呢?” 这是对 UI 设计现状的彻底拒绝,它寻求一种“通用”设计,具有技术上最先进的界面来满足用户需求。看看其他人是否效仿这种哲学会很有趣。



Material Design 构建了一个颜色系统

Material Design 团队在他们的公告中遗漏的是他们如何做到了这一点,尤其是因为他们说他们“必须找到一种方法,让任何颜色组合都具有可访问的对比度 [...],而无需对每一种颜色进行测试。”深入了解 GitHub 上最近发布的Material color 实用程序存储库,揭开所有谜团:

  1. Material 团队基于CAM16CIELAB(或 LAB)颜色外观模型构建了自己的颜色系统:“色调、色度、色调”或“HCT” 。CAM16 是 LAB 的继任者,旨在匹配人类对颜色的感知方式

  2. 这些模型的关键是“色调”或 L* 值,它描述了颜色的感知亮度或亮度,L* 值 0 表示黑色,100 表示白色。这在创建可访问的调色板时非常有用,可确保颜色根据感知亮度具有足够的对比度。

  3. 在网络上,WCAG 2 指南规定正文的最小对比度为 4.5:1。直接使用感知亮度作为描述颜色的值使这变得更加直接,正如材料团队解释的那样:“与对比度不同,测量 L* 中的对比度是线性的,并且计算简单 [...] 50 的差异保证了对比度比率 >= 4.5。”

  4. 有了这些知识,剩下的就是生成具有不同色调或 L* 值的颜色调色板,并对其应用任何色调。然后为 UI 元素使用足够对比的对。例如,一个按钮可以有一个 L* = 40 的背景色和白色文本 (L* = 100),它很容易通过最低对比度要求(L* 差异 > 50)。




我们其他人的 LCH

这是一种轻松生成可访问颜色的强大技术,但它不需要材质颜色实用程序。LAB 可以表示为 LCH(亮度、色度、色调),类似于 Material 的 HCT,其中 L 值可以用来计算对比度。(这比现有的 HSL 等表示更好,即使亮度相同,HSL 的感知亮度也会有所不同。)您可以在本文中了解有关 LCH 的更多信息。

(此外,LCH 正在作为 CSS Color Level 4 的 一部分进入 Web 标准!因此您可以 lch (40% 44 49) 在 CSS 中编写而无需将其转换为 HSL 或 RGB,但目前仅在 Safari 中支持。Lea Verou,他编写了上面链接的文章是 W3C CSS 工作组的一部分,正在开发这个非常标准。)

因此,您只需要一个起始颜色,将其转换为 LCH,然后修改 L 值以制作调色板。然后使用一对亮度差为 50 或更多的颜色,以确保可获得的对比度。

我们可以在下面的材质颜色系统中看到这种技术是如何使用的:调色板中的色调与 LCH 亮度值相匹配。(他们还修改色度(类似于饱和度)和色调略微跨色调。)我制作了一个小型网络应用程序,显示由材料颜色实用程序生成的调色板,以获得下面的 LCH 值。



在 Material 的 HCT 之前,LyftStripe的设计团队探索了同样的问题,Stripe 也最终使用了 LCH。我已经将他们的两个探索联系起来,这是极好的阅读。


我怎样才能做到这一点?

有一些工具可以在 LCH 之间进行转换:



我使用这种技术为Rowy添加主题,允许用户选择自己的强调色,同时保持可访问性并为关键 UI 元素着色。源代码具有我使用的确切 LCH 值。



圆角很和谐

当你想要设计一个带圆角的“卡片套卡片” UI 时,内部的卡片应该具有较小的半径,区别在于间距的大小。如果使两者的角半径相等,则内部卡片看起来不合适。这种技术在数字设计中已经有一段时间了,甚至是 CSS3 规范的一部分。



这也存在于硬件设计中:屏幕的圆角与iPad Pro和 iPhone X 设计上的设备框架相匹配。在带有圆形屏幕的 iPhone 上,底座与屏幕的曲率相匹配——Apple 甚至在软件中提供了精确的点大小。您还可以在视频播放器中看到与屏幕曲率匹配的其他元素。



奇怪的是,这个原则不适用于使用单个圆角半径的 UI 元素。在 Material Design 2 中,对话框和内部按钮的圆角半径都是 4dp,尽管它们之间有 8dp间隙。macOS 在优胜美地时代的设计中类似,Windows 10 几乎所有 UI 元素都使用方角。

但是,对于 Big Sur 和 Windows 11,通过增加较大 UI 元素的角半径来近似这种效果。在 macOS 中,按钮的圆角半径现在为 5pt,对话框窗口的圆角半径为 10pt,而且它们都使用“平滑角”来匹配 Apple 硬件的角。与此同时,Windows 11 以圆角以前的尖角而闻名,按钮为 4 像素,窗口为 8 像素。



总体而言,用户界面似乎也变得更加圆润:


  • Big Sur 增加了圆角半径,使用了平滑的圆角,看起来更圆润;

  • iOS 15 引入了带有全圆角的按钮样式

  • Windows 11 移除了大多数 UI 元素上的尖角;和

  • 与之前所有版本的 Material Design 形成鲜明对比的是,Android 12 增加了对话框导航抽屉和完全圆角按钮的半径。


我怎样才能做到这一点?


将最小的 UI 元素设置为某个基本圆角半径,然后将较大的包含元素(如对话框)设置为更大的圆角半径。尝试使它们与较小元素之间的距离成比例,或将较小的角半径加倍以进行简化。这是它在我们的应用程序中的外观,角半径加倍:



OpenType可变字体

最初开发字体时,它们是用金属蚀刻的物理设计,具有固定的字体大小。当排版师为不同的尺寸设计相同的字体时,他们通过改变间距和比例等方面来将设计修改为最佳:这被称为光学尺寸。您可以在本文中了解有关光学尺寸的更多信息。

可变字体是一种基于 OpenType 的新字体格式,允许设计人员自定义字体设计的特定“变化轴”(或变量),例如非固定粗细、倾斜和光学尺寸。您可以在这个优秀的可变字体入门 中了解有关可变字体的更多信息,它使用Roboto Flex,这是谷歌 Roboto 字体的可变字体扩展。



2021 年,所有主要操作系统现在都使用这种可变字体技术来实现 UI 排版中的光学大小:


  • Apple 的系统字体 San Francisco于 2015年发布具有两种光学尺寸:“显示”适用于 20 磅及更大的尺寸,“文本”适用于所有更小的尺寸。2020 年,Apple 将这些字体发布为单一可变字体 SF Pro,以光学尺寸作为变化轴。Apple 的系统图标 SF Symbols也使用可变字体技术

  • 对于 Windows 11,微软将其系统字体 Segoe UI 重新设计为Segoe UI Variable,具有自己的光学大小轴。

  • 作为 Material Design 3 的一部分,Google 引入了GS Text 和 GS Variable,这是其企业字体 Google Sans 的演变。


另外值得注意的是:这些字体都是不同风格的无衬线字体。旧金山是新怪诞的,Segoe是人文主义者,而Google Sans是几何的。

我怎样才能做到这一点?

可变字体是一项相对较新的技术,生产它们的成本很高,所以资源没有那么多,尤其是在免费和开源领域。到目前为止,我发现的唯一具有光学尺寸的开源可变字体是Roboto Flex,但它似乎还没有完成。Rasmus Andersson 被广泛使用的 Inter 字体正在进行 OpenType 的 Bata测试。同时,为突出的标题使用更具表现力的字体可以提升您的设计。对于Rowy,我在小文本中使用 Inter 作为字体,在品牌表达的标题中使用 Space Grotesk。



专注于内容

扁平化设计已经存在了十多年,它的主要目标是通过剥离 UI 元素的杂乱和装饰来专注于内容。在iOS的15设计指南状态,“明快,漂亮的界面帮助用户了解内容以及互动。”

最新的操作系统版本通过更少的层级来迭代这个概念。导航栏在iOS 15Android 12 中是透明的,并在您滚动之前融入背景。



在桌面上,macOS Big Sur 混合了标题栏和工具栏,直到您滚动或悬停在栏上几秒钟。Windows 11 中的一些应用程序根本不区分标题栏,而是将内容放在一个独特的卡片式层中。




这些元素都实现了相同的目标:减少周围的视觉混乱并提升内容的视觉突出度。


我怎样才能做到这一点?


如果您有一个停靠在边缘的导航栏,请在不需要区分时将其混合到背景中,例如当用户尚未滚动时。如果您有主要内容,请将其放置在与背景不同的微妙层中。我们使用了一个 React UI 库 MUI,它使我们可以轻松实现导航栏仅在滚动时区分的效果



插入一切

同样,更多的 UI 元素被插入,不再占据其容器的整个宽度。当 iPhone X 引入屏幕上的主页指示器代替主页按钮时,Apple 更改了他们的指导方针,规定带有圆角的嵌入式按钮,避开iOS 7 中引入的全角按钮许多其他固定到的元素的最佳实践已更改屏幕底部适应新的 iPhone 设计。



在 iOS 15 中,Apple 正在更多应用程序(如“设置”和“邮件”)中插入“表格视图”。这似乎是为了应对 iPhone 屏幕尺寸不断增长的情况,指南指出,“在紧凑的环境中,插入的分组表格可能会导致文本换行,尤其是在内容本地化时。”

在 macOS Big Sur 中,他们将此设计扩展到邮件中的列表,与iPadOS 设计一致。它也出现在整个系统的菜单中,包括菜单栏。请注意,点击目标延伸到菜单的边缘,就像之前的全角设计一样。Windows 11 在其菜单和导航项中共享相同的样式。Android 12 的系统 UI 和应用程序通常也遵循这种风格。

这种风格可以提高可访问性,因为元素和它们的容器之间的分离现在扩展到所有四个方面,但我还没有发现任何支持这一点的研究。当搭配和谐的圆角时,它可以使菜单看起来更现代。



超越颜色的状态变化

设计师们正在添加更多的方式来显示状态,而不依赖于颜色,这对于色盲的人来说是无法实现的。以下是我注意到的一些例子:

  • Spotify 在 shuffle 和 repeat 按钮下方添加了点,而不是在 2017 年仅仅依靠改变它们的颜色。

  • Material Design 3 显示一个药丸状指示器,并在导航栏中为活动页面使用填充图标。

  • Windows 11 向列表和导航窗格中的选定项目添加了一致、独特的行。



这决定了重新设计Rowy 的切换按钮:



以及标准的开关设计


在 Android 12 中,开关现在在主要操作系统中具有相同的基本设计。这使用户可以更轻松地在这些平台之间切换并减少认知负担。

UI设计走向何方?

我在所有这些设计决策中注意到的首要主题是设计师将用户界面设计置于透视之中。他们敏锐地意识到数字界面在哪些方面适合人类体验并与物理世界互动。


  • 轮廓图标模仿文本的融合认识到图标在通信中的重要性。

  • 越来越个性化的界面元素——尤其是你所采用的材料方向——承认人们喜欢用自己的方式制作东西,包括他们每天使用的技术。

  • 和谐的圆角和插入元素的灵感来自实物和工业设计,因此我们的软件与硬件更紧密地匹配。

  • 使用具有光学尺寸的可变字体可以追溯到排版的起源,并且与颜色以外的差异化元素一起,它们提高了所有人的可用性,尤其是残障人士。

  • 更小的事情也有帮助:减少视觉混乱以提升内容使用户能够专注于他们想做的事情。并且使用标准的开关设计消除了确定 UI 元素功能所需的任何认知负担。


这种思维背后的UI设计使我们很好地起来为下一代对AR / VR计算为中心的虚拟实境,在虚拟实境一经验将不得不回答他们是如何改善人类的经验和交互与物理世界。设计人员已经在研究如何使设计系统适应这种变化。看看上面的决定,应用色彩科学(Material 的 HCT 考虑到观看条件)和提升内容的插入元素有助于这些 UI 元素从 2D 世界过渡到 3D 元世界。

文章来源:优设 作者:Bearv5 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

iOS 15 发布后,看看这3个值得关注的设计细节!

资深UI设计者

相比于去年 iOS 14 带来的小组件和 APP 资源库的功能,今年 iOS 15 的升级幅度似乎确实没有那么大。

接下来就从设计师的角度来看看 iOS 15 带来的视觉和体验的变化。

iOS 15 发布后,看看这3个值得关注的设计细节!

通知中心的重新设计

iOS 15 对通知中心进行了视觉排版上的优化,放大了 APP 图标并置于卡片的左侧,让用户可以通过图标更轻松的区分和查看消息。

消息小卡片的圆角也更加圆滑,圆角接近于与控制中心按钮的大小,这种圆角更大的设计也更容易将用户的视线过渡到内容中心,同时也使得 iOS 系统设计风格能够更加一致。

在通讯类 APP 的推送中,采用了联系人照片 + APP 小图标的组合形态,增加信息来源的辨识度,以这种形式更清晰地告知用户,所收到的信息的来源和属性。(目前国内的 APP 例如微信、飞书的消息通知等都还没有完全适配)

iOS 15 发布后,看看这3个值得关注的设计细节!

值得注意的是,iOS 15 还可以根据用户设置的时间来定时推送,这些定时推送会构成一个较大的通知摘要卡片,而摘要的内容会进行智能排序,这种机制将会对设计和运营有较大的影响(所以 APP 通知推送会因为这种机制形成新一轮的内卷么?)

随着营销推送的内容越来越密集,用户承受的信息压力也越来越大,苹果也在尝试构建更多细分场景下的推送管理,在 iOS 15 中用户可以选择让 APP「静音一小时」或者「今天不再推送」来避免干扰。

iOS 15 发布后,看看这3个值得关注的设计细节!

更好用的 Safari 浏览器

新版 Safari 有较大的改进,iOS 15 将顶部的地址栏和底部的工具融合到了屏幕底部,成为了一个悬浮的交互控件,并在视觉上进行了简化,右滑动地址栏可以在不同的页面中快速切换,向上轻扫地址栏,则可查看所有打开的标签页,这种在底部操作的交互方式也更符合大屏化的趋势。

这种左右滑动和向上轻滑也明显能感觉到是从 iOS 整个系统的手势操作中迁移而来,而这种手势可以极大的降低用户的学习成本。

iOS 15 发布后,看看这3个值得关注的设计细节!

在页面向下滚动时,悬浮的地址栏和工具栏会自动隐藏到底部,界面看起来沉浸感也更强。

iOS 15 发布后,看看这3个值得关注的设计细节!

这种交互方式的变化逻辑也符合交互设计中的费茨定律

费茨定律

任意一点移动到目标中心位置所需要的时间,与目标距离正相关,与目标大小负相关

iOS 15 发布后,看看这3个值得关注的设计细节!

这里举个例子来简单理解一下,手指当前的位置与按钮的距离 D 越长,所需时间越长;按钮的宽度 W 越大,所需时间越短。应用到产品设计中就是将按钮放置在离手指较近的地方,比如屏幕底部易操作区域,完成任务的时间也就会越短。

iOS 15 发布后,看看这3个值得关注的设计细节!

夸克浏览器同样是将输入框以及一些常用操作置于底部,这是因为我们正常握持手机时,大拇指离底部更近,所以需要进行点击操作的时底部的输入框操作起来更方便,也更快。

iOS 15 发布后,看看这3个值得关注的设计细节!

Safari 的这种交互方式在移动操作系统已经有了一些案例,三星的 one UI 以及安卓阵营中的众多产品也都逐渐往这种大屏化的交互逻辑发展。

iOS 15 发布后,看看这3个值得关注的设计细节!

此外,Safari 采用了新的标签栏设计,同时可以对繁杂的标签页进行整理和保存,标签组支持多设备间的无缝同步,在任一设备上的改动,都能及时同步到所有设备上。

iOS 15 发布后,看看这3个值得关注的设计细节!

卡片化的设计

在使用 iOS 15 的过程中能清晰的感知到,iOS 整很多界面卡片设计更加和谐了,我们最常用的设置页就整体卡片设计上做了区块化和圆角化的处理。要比之前系统直线分割的界面柔和许多。

这种通过使用大留白、两侧缩进的卡片设计使得界面所呈现的功能更加清晰,也更能够突显内容,同时和苹果自家产品 App Store、Apple Music 等产品的设计风格更加靠近。

iOS 15 发布后,看看这3个值得关注的设计细节!

同样天气 APP 主界面也做了布局的改动,增加了卡片化的设计,信息组织也更加直观清晰。天气 APP 头部的天气背景也进行了重新设计,动画背景更加真实,能够准确地反映出太阳的位置和降雨情况,相比之前会美观很多。天气 APP 也增加空气质量、温度、降水强度,空气质量地图等诸多功能。

iOS 15 发布后,看看这3个值得关注的设计细节!

更多新功能

除了通知、Safari 浏览器、天气、钱包、地图等常用功能的更新外,iOS 15 新版本在其他方面也做了更多功能性的升级,这里就来简单看下有哪些重要的更新。

1. Live Text

首先就是 iOS 15 中为照片带来了「实况文本」功能,在这个功能的帮助下,在相册里长按图片,就会弹出复制、查询、翻译和学习等选项,这个新功能估计也是 iOS 15 更新最实用的功能之一了~(这个功能在锤子手机的“大爆炸”中也有)

Live Text 还可以识别照片的各种元素,比如地标、动植物和花卉种类等等。配合 iPhone 自带的系统搜索——聚焦搜索(Spotlight),根据文字元素来搜索图片。

iOS 15 发布后,看看这3个值得关注的设计细节!

2. 专注模式

iOS 15 加入了「专注模式」,能助你更好地专注重要信息,由之前的「勿扰模式」升级而来,包括勿扰模式、工作模式、个人模式以及睡眠模式。每个状态可以设置不同的显示通知,并可与其他设备同步。

iOS 15 发布后,看看这3个值得关注的设计细节!

3. 大闹钟回来了

在此前的 iOS 14 中,设定闹钟的控件改为了数字输入,在随后的迭代中又改为了很小的滚轮输入,这种过小的交互空间受到了很多用户的吐槽。

iOS 15 中苹果又将闹钟设置改为 iOS 13 的大滚轮,随手上下拖动拨盘就轻松的设定好闹钟了。

iOS 15 发布后,看看这3个值得关注的设计细节!

4. 桌面小组件

不知道小伙伴有没有发现,在 iOS 14 中桌面重叠的小组件没法拖动出来,只能手动删除再重新添加。在 iOS 15 苹果就解决了这个问题,小组件现在可以从堆叠状态移出,同时可以选择智能轮换和小组件建议是否打开。

桌面还有一项大的变化就是可以整页移动了,相比 iOS 14 只能一个一个拖动 APP,整页的切换和隐藏大幅缩短了 APP 布局困难者的“编辑”时间。

iOS 15 发布后,看看这3个值得关注的设计细节!

此外,iOS 15 相机和天气的图标也进行了一些细微调整。“健康” APP 中新加入了健康趋势,其中包括静息心率、睡眠和有氧适能,持续观测健康状况的变化。FaceTime 中也增加了空间音频、人像模式、语音隔离、同播共享等功能。相册增加了 EXIF 参数显示等。

除了系统及界面以外,iOS 在 Human Interface Guidelines(界面设计指南)的内容上也有了一些更新,比如新增了包容性的设计原则,SF Symbols 3.0 图标的新增,以及新的空间交互的设计。更多关于 iOS 人机界面设计指南可参考 :https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

iOS 15 发布后,看看这3个值得关注的设计细节!

总的来说,虽然修修补补又一年,但 iOS15 系统在细节设计以及新功能上确实提升了用户体验。

文章来源:优设 作者:姜佳欣


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


2021-2022设计趋势报告·动态篇

资深UI设计者

动态设计有助于创建令人愉悦且直观的用户界面。好的动态设计,不仅能引导用户对数字产品的体验,还可传达有关产品的品牌信息

动态设计(Motion Design)有助于创建令人愉悦且直观的用户界面。好的动态设计,不仅能引导用户对数字产品的体验,还可传达有关产品的品牌信息。本文将介绍近来最流行的动态设计趋势,这些令人惊艳的动效表现手法,在不久的将来势必席卷所有人的目光。


1.1 动态在UI/UX扮演的角色


动态能激发用户的情绪,为静态的视觉设计注入活力与生命力。有趣、奇妙、吸引人的动态,能让你的产品展现与众不同的魅力。另一方面,动态有助于支持可用性,通过自然流畅的物理运动,突显元素在过渡时的关联性与状态变化,增强用户对产品功能的感知。

因此,动态设计必须是有意义的,同时兼具可用性与美感,UX行业也将动态设计视为多学科的交集,细分成一个专业的设计门类。作为UI和UX设计中重要的组成部分,动态设计从三个层面发挥影响力:

1. 提高连贯性(Increase Continuity)


让界面元素在用户流程中顺畅地转变与过渡,将用户操作导向期望的任务结果。



2. 连接场景(Connect Scenes)


在转换场景的过程中扮演润滑剂的角色,阐明场景之间的位置、层级与空间的关系。



3. 视觉吸引(Visually Appealing)


聚焦用户视线,将其注意力放在重要的事情上,从而起到信息传达、提升识别度的作用。


1.2 动态设计趋势


植基于UI和UX设计而发展的第三维度,动态设计的趋势自然与两者密不可分。综观近年,多数作品巧妙地运用绚丽的动态图像(Motion Graphics)与动效设计,让新的视觉手法得以表现更为出彩。再者,随着移动端芯片性能提升,跳脱二维平面的表现形式不再难以实现,让设计师能够解开束缚,发挥无限的想像空间。2021年的动态设计可归纳为三个趋势:

1. 增强表达(Enhance Expression)


运用引人注目的表现手法将信息传递给用户,包括变形、动态文字和背景动画。



2. 创造层次(Create Hierarchy)


在视觉平面中创建空间层次结构,遮罩与视差是常用的表现手法。



3. 扩展维度(Expand Dimensions)


突破二维限制,将界面元素多维化营造空间感,例如3D动态图形和摄像机运动。


2.1 变形 Morphing


变形创造了一种连续的叙事状态,告知用户元素的状态或作用发生变化,是一种最引人注目的表现手法,能将形状、图像、色彩无缝地融合与过渡。

| 动画插图 Animated Illustrations


2021年看到许多有趣、吸引人的插图,而更多的设计师开始为静态图像添加动态,也让GIF和动画插图越来越受欢迎。



动画插图看起来更生动,并带有叙事性质。在示例中,运用动画插图来呈现这杯果汁是由哪些水果打成,比起文字描述更能吸引观众的注意力。


by Lobster



通过动画插图来呈现同一系列的转变,有利于延续外形上的特徵,让不同的物体具有连结性。比如从桌子、衣柜到灯具的连续变化,同样风格的系列家具利用动画来体现一致性。


by Graceful illustrations ™



| 流体动态 Liquid Motion


动态的有机形状,包括流体、烟雾和火焰等粒子效果,能够极大地增强视觉效果。流体动态并非明确的过渡与场景转换,而是颜色在流动的液体中扩散,进而创造出抽象或真实的视觉形状。这种风格能实现无缝过渡,并为设计增添有机感,也是2021年最引人注目的动画趋势之一。



运用流体动态来展现抽象的有机体,除了轻易地攫取受众目光,还让人不自觉地伫足在画面上,感受流体变化的韵律与美感。这类动态设计可作为烘托主题的背景动画,或是吸引目光焦点的主角。


by ✞anton mishin✞



流体动态运用到网站设计所营造的视觉冲击力更为惊艳,能为用户带来独特、新鲜的视觉感受, 使得流体动态深受风格前卫的设计师喜爱。网站还能利用鼠标悬停与流体进行互动,因此会在许多特效网站见到流体动态的踪迹。


by Gilles Tossoukpé



| 动态渐变 Dynamic Gradients


扁平化设计缺少现实质感的元素,搭配渐变色能有效缓解不足,为设计创造深度与层次。变化中的渐变色同时带有动感与舒缓,充满活力却又平静。使用动态渐变能让设计师展示一系列不断变化的情绪,许多内容创作者和品牌已经注意到这一点,开始在广告活动、识别设计和数字内容使用动态渐变。

by Pixelz Studio



| 微交互 Micro Interactions


在用户体验设计中微交互变得日益重要,而动态设计正是微交互的灵魂所在,即使只是微小的视觉提示或反馈,都是人机交互易于使用的关键。从经典案例来看,微交互的动画细节必须带有明确的目的性,让用户获得实时反馈,指导用户进行下一步。从近几年的设计趋势来看,微交互已成为不可或缺的存在。

by Илья Бабушкин


by Google



| 动画商标 Animated Logos


过去几年动画商标是最流行的动画趋势之一,通过各种视觉效果,设计师能创造出不同类型的动画商标,许多企业开始采用动画商标作为吸引注意力的手段。多数情况下,商标是进入网站时最先看到的东西,因此商标应该令人难忘、引人入胜,并使用符号或排版来揭示品牌个性。结合动画的优势,设计师可以运用一些动态或效果来讲述简短的故事以强调品牌特征,并为静态排版和商标注入一股活力。

by Yulia K.


by Meta



2.2 动态文字 Kinetic Typography


动态文字是使用移动文本来吸引注意力的动画技术,许多卓越的品牌在网页设计中使用动态文字,为网站外观增添动感和视觉冲击力,是近年UI动画的趋势之一。



设计师使用动态文字为单词或句子添加生动的元素,借此定下情绪氛围与设计基调,吸引用户的注意力。几种常见的表现手法,挤压和拉伸一个词能会唤起一种俏皮感,而连续重复这个词则具有催眠感和前卫感。另外,使用大号和粗体字体来增强份量以强调某些信息,也是动态文字的特徵之一。

无论在电商网站、电视广告或音乐视频,动态文字都占有举足轻重的地位,有利于加深用户对品牌的关注与印象。


by HOLOGRAPHIK®


by Hrvoje Grubisic



2.3 背景动画 Background Animation


通过背景动画来强化叙事,成为许多行业常用的品牌传播手段。你可以创建动态的品牌故事,展示有趣的制造过程、产品的使用场景。背景动画深获大众喜爱,它能让用户在进入登录页或网站首页时,轻易地了解更多有关公司或产品的信息。调研显示,从银行、医疗保健公司、电商零售商、餐馆到B2B供应商,这些跨越不同细分市场和行业的网站都开始使用背景动画。

by Carlo Soleri


by Kirill Zhukovsky



3.1 遮罩 Masking

遮罩过渡是将几何或有机形状作为衔接下个场景的遮挡物,等同于舞台幕布设计,能在界面元素进场或退场时创造连续性效果。这种表现手法简洁高效,是最常见的过渡动画之一。



| 切换场景 Scene-Switching


其中一种遮罩过渡,是将当前场景完全置换,如同揭开蒙在上层的布,逐渐展露叠在下方的景,并利用景物相似性和动作延续性,让两个场景能够顺畅地衔接,不致于差异过大,造成用户心理负担。

by intent


by Minh Pham ✪



| 状态变换 State Transformation


另一种遮罩的表现形式,较无明显的场景过渡,而是利用遮罩来表现景物的状态变化,界面元素和布局基本保持一致,以此塑造无缝过渡的视觉效果,这种手法被广泛地使用,例如气候变化、人物换装、产品组合等。

by Daniel Tan


by Outcrowd



3.2 视差 Parallax


视差是利用不同的界面元素以不同的速率移动,创造前后景深的分离效果,借此在平面中塑造空间层次,已成为网站首页最为普遍的表现形式。



视差之所以能形成一股风潮,广为各个行业所接受,一方面是信息层级更加清晰,明确定义各种元素的关系,让用户专注于主要操作和内容,将背景或非交互元素往后退,同时保持设计的完整性。另一方面是丰富的层次变化,当用户滚动或滑动时,能在扁平化界面拉开空间关系,利用不同的速率和纵深,塑造多层次的感官体验。


by Studio VØR



4.1 3D动态图形 3D Motion Graphics

近年来,结合3D动态图形的界面设计呈现爆炸式增长,虽然创建3D动画需要更多的时间、技巧与协作,但不可否认的,3D动画比2D图形更加逼真,从而提供更具吸引力和互



动性的用户体验,并有效地展示品牌的活力。

| 更生动的表情 Lively Emoji


动画的吸引力在于能够创建各种角色,并为无生命物体注入生命力,表情符号就是一个很好的例子。作为独特的网络语言,表情符号生动地描摹日常面对面交流的非言语信息,随着图形界面的设计趋势逐渐结合2D与3D,运用3D动态图形来创造更加动感、拟人化的表情,能让这些非言语信息更加丰富,有机会引领下一波风潮。

by Outcrowd



| 营造空间感 Spatial Awareness


3D动态图形为平面设计建构了空间叙事框架,在扁平化界面中展现立体感,从而表达空间中元素的位置与层级关系。多维化的发展趋势,推动了视觉表达形式的演变,空间感让界面设计更符合人类的认知逻辑,运用各种3D运动特效,包括旋转、翻转、折叠、透视、Z轴位移等,打造令人难忘的感官冲击。

by UI8


by Bruno Ortolland



| 拟人动画 Anthropomorphic Animations


拟人化能让物体、植物、动物等非人类事物,表现出人类属性的行为与状态。动画片运用拟人的手法是最普遍的,1927年迪士尼第一部系列动画《幸运兔子奥斯华》的主角便是拟人的兔子形象。由于人们容易被以人类行事的事物所吸引,越来越多设计师在界面中添加拟人元素,利用这种效果让画面更加生动有趣,增强用户体验的愉悦感。

by Gregory Riaguzov



4.2 摄像机运动 Camera Movements


在动态设计中,摄像机运动是最自由、灵活的一种表现形式,能让画面过渡更有张力,突破2D平面在视角上的限制,创造一个无界线的立体空间。常见于影视、动画和广告的摄像机运动,包括推近、拉出、平移、跟拍等方式,备受动态设计师青睐,让用户以多变的视野探索数字产品。



| 推近/拉出 Dolly In/Dolly Out


推镜头是指被拍摄的对象不动,摄像机由远而近,朝着对象不断推进, 用来突出人或物的主体。镜头推近的运动方式,用来呈现从整体到局部、由分散到集中的变化,引领用户进入故事情景,给人一种身临其境的感受。



相反地,拉镜头则是将摄像机后退,使画面逐渐远离被摄主体,侧重的是从局部到整体、由点到面的转变,强调主体所处的空间环境。随镜拉出的景象,能激起人们无限的想像。


by Michael Crawford


by Ali Zafar Iqbal



| 水平/垂直移动 Truck/Pedestal


水平向左或向右,垂直向上或向下移动摄像机,使画面不断变化,让用户跟随镜头视角一起移动,产生一种置身其中的感觉。这种运镜方式,通常用于具体的场景,利用角色或景物的延续性来消除场景过渡时的边界,表现出一种流动感,无论是手势滑动或鼠标滚动都能有顺畅的操作体验。

by Netguru


by Minh Pham



| 结合多种运镜 Multiple Camera Movements


运用多种摄像机运动相当普遍,既能扩大视野,又有很强的空间感,可以更加自由与多样地展示不同视角和情景。比方说结合横摇(Pan)、直搖(Tilt)和跟随(Tracking)镜头,连续而详尽地展示一个产品,由于画面始终跟随一个主体,有利于突出产品特徵,并让用户从不同的角度和距离观看产品,是一种增强临场感和参与感的有效方法。

by Gregory Riaguzov


by Paul Ilnitski



| 一镜到底 One Shot


在电影中为了不将观众的情感和注意力割裂,使用一个镜头来完成全片的场景刻画和叙事,这种拍摄手法被称作一镜到底或长镜头。连续镜头逐渐被运用到界面过渡,以此增强操作过程的流畅性,例如一气呵成的购物体验,或是贯穿全场的人物角色,其特点是给用户最沉浸的感官体验,无间断地体验整个流程。

by Orizon: UI/UX Design Agency


by Minh Pham ✪


动态设计作为近年热门的创作形式,广泛应用到各个领域,逐渐成为设计的主流趋势。受益于技术演进与发展,从创意生产到落地实现,动态设计的门槛不再遥不可及。设计师得以将想法转化为生动、有趣的作品,并有机会创造新的表现手法,玩出许多新花样,成为2021年动态设计的特色。



文章来源:站酷 作者:大魔V

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


2022年网页和UI设计趋势

资深UI设计者


设计趋势可以塑造一切,从设计师的创作方式到用户界面设计,再从网站到包装设计的未来迭代方向。因此关注现在的流行趋势很重要,这样您的设计就不会很快过时。


让我们深入探讨2022年的一些顶级网页设计趋势。我们将着眼于 2021 年末开始出现的趋势,这些趋势将为来年即将流行的设计趋势奠定基础。


阅读更多以前的趋势文章:2021 年网页设计趋势


目录:

有趣、积极乐观的设计

黑白配色方案

大胆和实验性排版布局

超大鼠标指针

三维设计元素的应用

近乎野蛮

滚动文本元素

玻璃拟物风格

更多渐变

无图片主页

图层效果

分屏美学

交互式字体

巨型页脚

包容性设计

非凡的想象力

结论

有趣、积极乐观的设计

时髦的形状、颜色,甚至面孔可以带来很多的乐趣。设计师们正在使用这一网页设计趋势,应用到公司机构、电商或个人展示类网站内容,提供趣味、乐观的设计(如上面的示例),这些设计的共同点是它们为世界注入了一点额外的快乐。


没有什么比笑脸更能表达乐观了。恰当的配图是描绘这种氛围和利用这一趋势最简单方法。注意拍摄技巧和被拍对象的整体形象,寻找与内容契合角度,例如上面来自 LegalSuper 的示例。


在经历了全球肺炎大流行的几年之后,设计师们正在为设计的项目增添一些额外的乐趣和温度。这就是我们现在都需要的感觉。


趣味和乐观的情绪被注入以面孔为载体的配图上、较细的字体、有趣的搭配,以及散发出积极情绪的颜色。为了充分利用这一趋势,请考虑较细的元素并避免选择使用较粗的字体或厚重的配色。

FOFSO用鲜艳的衣服、模特紧张但带着快乐的面孔紧盯镜头来做到这一点。


黑白配色方案

黑白配色方案是今年最鲜明的设计趋势。不使用彩色,你真的必须在限制范围内思考和设计。虽然这听起来有点吓人,但它可以释放并激发你的创造力。结果绝对是惊人的。


从另外一个角度来说,黑白配色的设计几乎无处不在。这种对比鲜明审美表明有很多设计师会关注简单和直接。

使黑白配色方案既清新又现代的关键在于应用恰当的效果和表现技巧。


在上面的例子中,悬停时有一个微妙的、流动的动画以及超大的鼠标反色指针来增强交互性。


大胆和实验性排版布局

在2022年,没有错误的字体排版方式。大、黑、粗——甚至是衬线字体——无处不在。他们看起来棒极了。在使用这种网站设计趋势时,请考虑文字将如何动态响应(在手机屏幕上一切看起来都将不同)以及如何最大限度地对访问者产生影响。许多实验性字体不仅设计有天赋,还包括动画或 flex(CSS响应字体布局) 选项等元素。


从轮廓到彩色字体,再到不断变化的形状和填充,大胆和实验性字体应用在网站设计中占据主导地位。谈到今天的网络排版,真的没有规则,设计师们在打破束缚重建一切可能。


Garcia Salmeron在主页的设计上使用了多种字体效果来体现这一趋势:混合和匹配主标题中的字符、带有实验性的字体选择以及带有图像和背景的彩色填充层。


超大鼠标指针

这是一种新的设计趋势,点击上图链接,您会看到许多超大光标的应用示例,在参与设计过程中,在网站前端交互完成之前根本看不到超大指针或鼠标悬停的实际效果,这属于页面交互效果的一种。


这个用户交互界面的应用无处不在。最常见的例子和用法是 Jade Sheng 的例子,它的圆形指针在屏幕上移动,甚至可以在穿过可点击元素时改变颜色。


这种 UI 设计趋势的伟大之处在于,它为网站访问者提供了有价值的可用性信息,并帮助他们更好地参与改进设计,提升用户体验。


三维设计元素的应用

虽然在2020和2021年有很多设计师为网站进行全面的3D化设计,但新兴趋势是将扁平的元素通过3D控制与整体有美感结合起来。


具有3D风格的元素属性包括用于创建深度和维度的阴影、动画以及拉伸和变形等图层效果。

Sennep 在上面的例子中使用一个手指插图引导用户发现来做到这一点,伸出手指扶正标题。插图使用手部动作配合阴影来完成这种好玩的设计。


Skolkovo Park


是时候思考在3D三维界面中完成所有事情了。从真实的网络模型到具有深度的视频或照片插图,三维元素有助于为设计提供更好更直观的理解,例如上面的建筑渲染,或者增强视觉刺激兴趣点。


Zoox


三维设计也延伸到视觉叙事。考虑如何以突出景深和阴影的方式讲好您的故事或产品展示。例如上面的示例使用视频,是有效传达这种风格的最可靠和最真实的方式之一。


近乎野蛮

野蛮主义是最近比较瞩目的网站设计趋势,但它对于大多数项目来说过于苛刻和尖锐。于是进入这一趋势的最新迭代——“近乎野蛮” 的出现也就不足为奇了。


这些设计沿用了许多相同的鲜明效果,但边缘处理更柔软。即使有一些明显的边界和线条,元素之间也有足够的空间,而不是锐利的硬边缘。


没有太多的装饰或其他视觉效果,留下颜色和文字来真正承载这些。其结果更引人注目,不至于太苛刻把用户拒之门外,是野蛮主义和可用性的结合体。


滚动文本元素

虽然我们总是希望文本元素可读,但它们也可以是动态的。滚动文本元素——通常使用超大字体,只有几个字,在同一个位置循环出现——可以强调关键词并激发用户的兴趣。


文本滚动通常往屏幕左侧位置缓慢移动。空心描边字体是一种流行的选择,保持可读性的关键是使用简短的常用词或短语。


引导用户关键行为召唤用语和其他消息应与滚动文本分开,以确保网站访问者可以轻松阅读它们。


Peppa Sauce


滚动文本选项不仅仅是网站设计趋势或技巧,它们实际上可以帮助鼓励用户互动增加参与度。在上面来自 Mama Joyce Peppa Sauce 的示例中,超大鼠标光标内包含滚动文本,该文本显示的是更大的滚动文本。(您甚至可能想重复观看这个互动内容。)


玻璃拟物风格

玻璃拟态风格(Glassmorphism)的最初始于2020年末和 2021 年初的新拟态风格(Neumorphism),并演变进化成现在流行的玻璃拟物效果。


Glassmorphism设计外观让人联想到玻璃。有透明、折射或光泽等元素构成。

很多设计师在追波(Dirbbble) 上展示使用这种设计风格的作品,也可以在大量已发布的网站设计中找到这种设计方法的设计。


更多渐变

渐变的应用一直很广泛。在2021年之前的设计中的大部分渐变都出现在背景中。

2022年,渐变将会增加两种新的形式:

l  文本颜色渐变填充(如上面的例子)来增加影响和突出强调

l  填充矢量插图或图标以创建渐变纹理效果


无图片主页

没照片?没问题!无需图像也可设计,让我们在2022年紧跟潮流吧。


使用不同类型的UI或设计技巧,来充分美化没有图像的主页。在此处的示例中,Kirifuda 使用了漂亮的黑白配色方案,在文本元素之间增加叠印效果。超大字体和手写风格的字体有助于将它们整合在一起。(请注意将其他设计趋势与这一趋势相结合以获得出色的效果。)


没有图片的设计也是尝试其他技术的好机会,例如动画、鼠标指针悬停状态或其他交互元素。



主页上没有图像的设计通常会导致美感缺失。但这完全没问题。使用另一种设计方法来激发用户兴趣吧,例如使用有趣的大文本字体元素。


图层叠加效果

图层堆叠、元素间距和图形重叠可以在设计元素中产生景深错位效果,彼此之间建立连接。分层效果展示明显又直接,也可以简单一点。这两个选项可以一起使用或单独使用以产生整体影响。


State Creative 使用多个图层——背景、中景、前景——以视觉上有趣且有意义的方式将各种元素组合在一起。


分屏美学

分屏美学重新流行。几年前的趋势是出于可用性和响应性的原因,现在它更像是一种细分设计。

这些视觉效果可以包括水平或垂直分割的屏幕,每一侧具有相同或不同的功能或点击动作。

最好的分屏设计可以同时做两件事:

l  提供了强烈的视觉冲剂体验

l  他们使用多个入口点来深入挖掘内容


交互式字体

可变粗细的交互字体在大多数情况下,这种效果需要使用悬停状态才有效,尽管您可以尝试其他一些更复杂的效果。(带有流体字体动画也越来越受欢迎。)


在考虑交互式文本元素时,请优先考虑内容的可读性和易于理解性。文本的效果仅在其中的文字可读和可理解时才有效。(否则设计的意义就会丢失。)


当设计展示相对简单时,这种设计才最有效。这个技巧在单独使用时是最好的。


巨型页脚

谁能想到网站页脚——尤其是那些包含大量信息的页脚——会成为流行的网站设计元素?


对于包含大量信息、大量页面或多个节点入口的网站,超级页脚是 2022 年必备的设计元素之一。

世界自然基金会有一个双层页脚:

l  在粗黑条中,有三列菜单选项,便于导航,按用户可能想要在站点上执行的操作(发现、支持、联系)分组

l  黑条中还有一个完整的注册表单,用于了解订阅有关该组织的更多信息

在底部较细的白色页脚栏中是组织信息、社交媒体链接、非营利免责声明、版权声明和服务条款链接(隐私政策、披露信息和相关条款)


当存在明显具有不同目的的元素分组时,超级页脚效果很好。带有标题的列格式以及水平底部锚点帮助, Wild Souls的这个页脚看起来很棒。

巨型页脚甚至可以呈现出“近乎野蛮”的风格。诀窍是使用元素来创建独特的组织感,以便用户知道如何轻松找到他们正在寻找的信息。

包容性设计

设计师正在努力打造一个更具包容性的网络,它几乎体现在所有已发布的内容中。从图像到语言再到替代文本,没有理由不尝试让您的项目更加包容所有人。


包容性延伸到种族、性别中立、文化、可及性和能力上。共同的主题是您的网站应该以这样的方式组合在一起,以便任何想要访问内容的人都可以访问到内容,并且人们也可以在屏幕上看到他们可以与之相关的其他人。


这里的要点是,你不需要用大喊“我们具有包容性”的图像和语言。这是展示比讲述更重要,真实比蛮力更重要的设计。


非凡的想象力

真实和想象之间的界线从哪里开始?当您查看大量网站时,可能无法100%确定。没关系。


享受这种想象力带来的乐趣,融合真实和想象,创造出非凡的图像。你的想象力是这里唯一的限制。


在 K Plus Film 的示例中,人物位于屏幕周围飞舞的水果顶部。颜色和比例创造了一种引人入胜的视觉效果,这真是太棒了。

文章来源:站酷 作者:mrdoing 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



万字解析元宇宙及对设计的影响

资深UI设计者

hi,朋友,你听说过“元宇宙”吗?你或许在网上听过或者在视频听过讲解,也许它只是昙花一现的概念,但是随着越来越多的大厂开始下场执行和站台,所以很多人开始重视和关注。

2021年,一个新奇的概念名词在网络上迅速蹿红,引发科技界和投资界的广泛关注。这个概念名词,就是“元宇宙”。


1.10  元宇宙的起源


1981年,一本名叫《真名实姓》的科幻小说,描绘了一个未来世界的样子。在这里,人类可以通过脑机接口登录虚拟数字世界,不仅可以有真实的生存体验,而且可以按照自己的喜好幻化成不同的形象。


时间来到 1991年,美国著名科幻作家尼尔·斯蒂芬森(Neal Stephenson)推出了自己的小说《雪崩(Snow Crash)》。


在书中,尼尔·斯蒂芬森描述了一个平行于现实世界的网络世界,并将其命名为“元界”。所有现实世界中的人,在元界中都有一个“网络分身”。


这个“元界”,英文原著中叫“Metaverse”。它由Meta和Verse两个词根组成,Meta表示“超越”、“元”, verse表示“宇宙universe”。


没错,Meta Verse就是我们今天文章的主角——元宇宙。



值得一提的是,书中所说的“网络分身”,英文单词叫做Avatar。大家有没有很眼熟?


是的,Avatar就是“阿凡达”。2009年,美国著名导演詹姆斯·卡梅隆的那部经典电影,就是以它命名。


在现在众多的讨论声中,元宇宙并不是一个真实存在的世界,而是一个虚拟的世界,是一个人们对未来定义的虚拟世界。


说到虚拟世界,相信大家马上又想2018年美国大导演史蒂文·斯皮尔伯格执导的——《头号玩家》。在头号玩家里描叙的的元宇宙:它是下一代互联网,是虚拟时空,是全真互联网。



但是不管怎么说,现在大家默认尼尔·斯蒂芬森仍被公认为是元宇宙的正式提出者。



1.20  元宇宙是什么?


元宇宙到底是什么呢?我看过很多解释,基本都是将“Meta(超越)”与“universe(宇宙)”相互结合,这个理解过于片面,那么直译过来不就是“超越宇宙”,这肯定是不符合情理的,要搞清楚这个问题,我们需要弄清楚“Meta”是什么意思,Facebook将公司名字改名为Meta,在侧面可以说明,在扎克伯克看来,元宇宙中的元才是核心,在我们中文中,想要找到一个完全与“Meta”对应的词是比较困难的,所以我们只能意会,“Meta”来自于古希腊语,比起元或者超越,我觉得翻译成”关于XX的XX“是更为合理的,例如“Meta Date”就是关于数据的数据,这个概念用于文艺作品中就是,“元戏剧”和“元小说”,比较有代表的就是卡尔维诺的“寒冬夜行人”,在心理学上,还有一个概念,叫元认知,这样去理解,就可以理解“Meta”为什么被翻译成“元”了,“宇宙”,我们可以理解它与物理的宇宙是不一样的意思,比如,我们都知道“漫威宇宙”,指的是漫威及一系列作品和角色组成的世界,还有国内比较火的IP“唐探宇宙”,都是指的是一个公司旗下多个IP所组成的世界观,所以“宇宙”的理解应该是“一个领域多个IP的合集”。


按照“元宇宙第一公司”Roblox公司的说法,一个真正的元宇宙产品应该具备八大要素,分别是:身份、朋友、沉浸感、低延迟、多元化、随地、经济系统、文明。



身份:需要一个能代表的你身份,无论是打工人还是老板或者是总统都行,它与现实世界的身份是完全不一样的。


朋友:在可以在拥有自由的社交和谈恋爱,无论他和你在现实世界里是否有交集(也就是社交)。


沉浸感:可以让你有在现实世界一样的真实体验,让你可以忘记这是虚拟的世界。


低延迟:一个合格的元宇宙需要在整个空间范围上进行时间统一,不能让人感受到延迟。


多元化:元宇宙可以提供多种世界场景,供玩家有多种身份而已选择。


随地:元宇宙的入口需要可以随时随地的方便登录,不受任何限制。


经济系统:像现实世界一样,无论是用BTC和ETH还是什么别的货币,元宇宙需要都自己的交易系统和规则


文明:元宇宙里所有人们在一起,一起努力,创造虚拟且先进的文明。


我们按照现在的技术水平对比一样,发现很多东西都是无法去完成的,就例如文明来说吧,我们无论是哪一个虚拟的社区还是游戏里,基本这么多年的发展都无法形成自己的文明,最多是有自己的游戏文化或者社区文化。


当然,按照现在的研究和技术可以实现的,我们对于元宇宙的规划可以总结成一句话:人以自由独立的数字身份自由的参与可能存在的数字世界。


1.21  元宇宙的数字身份


我们将它拆分出来理解:元宇宙是一个数字世界,这个是没错的,它不是现实的世界,也不是物理的世界,而是一个虚拟的数字世界。

然后我们再来看看另外一个词:“数字身份”,我们现在在上网的时候大多数都是实名的,但是在平台上,我们会有自己虚拟的ID和昵称,这些虚拟的ID和昵称会遍布整个互联网,可能是在淘宝京东买买买的你,也有可能是在腾讯视频或者爱奇艺为某个明星疯狂打call的你。


所以,这些虚拟的ID不拥有权力,也不会承担义务,他们不是一个独立的身份,他们都需要依附在线下那个拥有独立身份的你。


那么,我们现在在想理解那句话:元宇宙是人以数字化身份参与一个虚拟的数字世界。并不是单单用数字账号参与,是一个独立、不受干预的数字账号。

不同的是,在现实世界你只有一个身份一个你,而在元宇宙里,你可以拥有多个不一样的数字身份。


1.22  元宇宙的参与性


上面那句话还有另外一个关键词,数字化身份参与,如果想要更准确一点,我觉得应该是“自由参与”。我们在这个互联网上,现在是可以自由的去访问,去发表自己的看法,但是很多互联网产品的规则制定和产品的细节定制和我们却没有任何关系。

比如,微信每次新出一个功能,都可以引起全民的热度,甚至可以上热搜,是因为用户期待那个功能太久了,所以才会有这样的讨论热度,但是微信也有很多用户想要的功能没有去实现,所以我们才说,互联网产品的规则制定和产品细节的开发,我们并没有“自由的参与”。

但是在元宇宙的设定里,你可以自由的参与规则的制定,每一个该元宇宙世界的玩家都可以参与到游戏规则的制定,让每一个都有会有参与感。

这个就像,几个朋友一起参与剧本杀剧情的编写,玩法的设计,我们每个人都会讨论角度与角色的关系,

讨论这个细节怎么演比较好,需要一个什么样的场景,如果有人觉得这个方案或者设定不满意,他可以提出否定细节,然后大家在针对讨论,如果大家都统一了,这句剧本杀就可以开始玩了。



1.30  元宇宙的分类


如果我们按照现在有的资料,我们想要将元宇宙去归类,我们可以把元宇宙分为两类,一类是传统型元宇宙,另外一类是开放型元宇宙。



1.31 传统型元宇宙


传统型元宇宙,一般指的是将线下的生活直接映射到元宇宙中,最后线下线上融为一体,其实这个事情在我们的生活中也是一种在重演。

我们现在通过不同设备(手机、PC、物联网),我们在线下搬到线上,最后回归到线下生活,传统型元宇宙是一个比现在网络环境更完善、体验更沉浸,具备生活、社交、工作、娱乐的虚拟数字的世界,也有可能有一天,我们在虚拟世界体验比较好的方案会成为推动我们现实世界的助力器,会落地在现实的生活中。



1.32 开放型元宇宙


与传统型元宇宙对立的,便是开放型元宇宙,它与现实的物理世界的是没有什么关系的,他是一个独立是虚拟的数字世界,比如,我们现实的生活是一个地球OL,那么我们在开放型元宇宙所建立的世界可能是土球OL或者是绿洲OL,是与现在世界平行存在的一个世界。

开放型的元宇宙在理论上是可以有无数个的,只要是符合建立条件的人都是可以建立的广义元宇宙,可能有的开放型元宇宙是因为是某些KOL建立的,人气会比较高,有的可能会无人问津,只有创建者一个人,每天“采菊东临下,悠然见南山”。



传统型元宇宙是需要有现实社会的映射才能存在的,现实世界才是主要的,虚拟世界只是现实世界是依附品。而开放型元宇宙则和现实世界是分开的,甚至有些开放型元宇宙的拥护者觉得开放型元宇宙研发出来之后,物理世界里的身体都不需要存在了,人的意识作为了一个代码字符或者程序活在广义元宇宙中,个人的荣誉感、社交、幸福感全部来自于开放型元宇宙,当然,这是一些非常极端的拥护者。



现在能看到元宇宙与元宇宙相关的新闻,基本都是和游戏相关的。例如,目前第一个将元宇宙写进招股书的Roblox,它现在已经在纽交所上市了,而且投资名单里还有我们国内做游戏比较出名的腾讯,这家公司主要是提供一个让玩家可以自由建立内容的游戏平台。



所以很多人会认为游戏就是元宇宙,或者元宇宙就是进阶版的元宇宙。


我们前面说“开放型元宇宙”的时候说过,开放型元宇宙是可以自由切换的,上一秒我可能是在为大家出谋划策的军事智囊,下一秒我便可以切换到一个充满斗气和斗皇满天飞的世界,来履行我的“三年之约”。

正因为有这样的特性,所以很多人认为游戏它和元宇宙是一样的,比如,我在“王者荣耀”里连着跪了几把之后,非常的沮丧,我便打开了“哈利波特”在里面骑着扫把自由自在的飞。我们可以在“王者荣耀”里和自己室友或者陌生的人一起组团玩游戏,一起推搭,是不是有点元宇宙的意思了。


其实我们体验到了游戏和VR设备所营造的氛围来说,它们都只是元宇宙构成组成。硬件设备和技术都是只是构成了元宇宙的一部分。而还有另外两个组成元宇宙的基础部分,是游戏所不具备的,一个是身份系统,另外一个经济系统。



2.01  身份系统


我们前面说过,我们现在以账号的形式参与互联网上的任何活动,都是需要与现实世界中的个体是密不可分的,我们是需要现实中的个人有需求才会去选择登录账号,比如,我们需要中午想吃饭,才会打开外卖软件点外卖,都是有目的的才会去建立这个身份。


而元宇宙真正的价值就是要隔离和现实世界的身份,让数字身份作为一个长期独立的个体存在,不同身份之间产生各种关系和联系,这才会让整个元宇宙运转起来,就如同我们现实的物理世界一样,这便是元宇宙的身份系统。



2.02  经济系统


经济系统,它是维系整个元宇宙经济正常运转的规则。就像我们们在元宇宙里创造什么价值,都可以和别人进行交易,且整个经济系统不会突然崩溃,例如货币会突然的归零或者突然的飙涨,我们可以自由的拿着货币去任何地方放心的交易,都是受到保护的。



2.10  元宇宙和游戏的根本区别

说到这里,大家肯定会有疑问,我们平时所玩的游戏也有身份系统和经济系统,那他们和元宇宙有什么区别吗?虽然游戏里也具备这两个基础的条件,但是,他们和元宇宙的这两个系统是完全无关的事情,他们最大的区别就是游戏里的身份系统和经济系统是“中心化”的。

就拿最经济系统来说吧,一些道具的价值和商店上架什么新品道具,完全都是在游戏厂家的掌握中,而且他们只许在游戏中用指定的交易方式交易,玩家只是按照游戏厂家制定的规则去完成任务而已。

另外,“中心化”就会存在一个问题,我们在游戏里有所的产品最终都是归游戏厂家所有,游戏厂家会拥有“超级权限”,如果我们不按照游戏厂家的规则进行交易,有极大可能会被封号,那么我们在那个账号里的经济价值并会瞬间湮灭,所有,在本质上来说,游戏里的财产属不属于自己,是由游戏厂家说了算。


身份系统也是同样的道理,每款游戏有什么角色,有什么装备可以选择,都是由游戏厂家制定好了,另外在换一个角度来说,拥有“超级权限”的厂家随时可以决定你这个号存不存在,所以游戏里的身份不是你的。


所以中心化的游戏根本不会是元宇宙的进阶版。而去中心化的元宇宙,是不会有编辑好的剧本,也没有现成的角色供你选择。从早起元宇宙建立的一片荒芜,到后期的人气如潮,这些由元宇宙所有人来参与制定和修改,该元宇宙所有的玩家都会享受极大的自由度。


我们在前面说到的Roblox能在元宇宙这个概念中这么火是有原因的。虽然它仅仅是一款普通的开放性世界的游戏,但是他采用了去中心的运营和发展形式,所以大家会公认Roblox是一款基于元宇宙原理的游戏,也有可能是元宇宙的初级形态。而我们现在无论玩的什么种类的游戏,基本都是中心化的,游戏规则和进度都是在游戏厂家规定好了的。


在去中心化的元宇宙里,我们都会以新的身份和新的权力去过一种全新的生活,在这里,我们会有新的朋友,新的家园,全新的社交关系。



我们前面说过,元宇宙要存在需要有两个基础条件,一个是身份系统。另外一个是经济系统,它们构成了元宇宙存在的基础保障。

元宇宙的经济系统,主要是引导元宇宙的用户或玩家一起进行经济创造、市场交易的系统,那经济系统是怎么运行的?它的基本运行原理和现实物理世界也是一样的,靠的是稀缺性。

比如,石油,产量少且只有部分国家掌握石油资源,那它的价值就高,因为它具有稀缺性和不可替代性,只有稀缺性的物品才能产生交易价值和交换价值,但是我们需要明白的是,数字世界是不利用经济系统的建立的,原因是数字世界的物品都是由代码构成的,它可以限制的复制和无限制的拥有,如果不考虑版权问题,它是可以有无数个的。

那我们元宇宙是怎么去解决这个问题的呢?要想知道怎么解决这个问题,我们需要知道底层的技术逻辑。说到这里,我们需要也要引入最近比较火的方案,这个方案也是最近比较公认的,Non-Fungible Tokens(简称NFT),

简单地说,NFT是元宇宙里的数字版权、数字物权的一个合约。因为NFT不可替代的特性,这意味着它可以用来代表独一无二的东西,比如博物馆里的蒙娜丽莎原画,或者一块土地的所有权。


3.10  NFT助力设计版权增值


我们平时在网上冲浪的时候基本都知道一个道理,在数字世界的所有东西都可以低成本的复制,并可以在短时间内无限制的拷贝,是没法声明版权和唯一性的。但是这个一切的顾虑NFT都可以解决,它给数字世界的所有物品包裹一层数字代码的合约,有了NFT合约的包裹,数字世界的物品就有了不可分割、不可复制的特性,这样便解决了数字世界物品容易被盗版的问题,也就具有交易和交换的价值。

我们都知道早期腾讯赚的第一桶金就是靠的是QQ秀,经历过QQ秀疯狂的年代的人都知道,一个绝版的太阳神的QQ秀可以卖到1万块,然后到现在王者荣耀皮肤让腾讯赚的盆满钵满,说明人们对好看形象的热爱。


那我们跳出元宇宙回到现实来看一个最近的一个现象,就是NFT的头像。好多人都不明白,一个糊的不行的头像,为啥可以卖的那么贵,我喜欢我知道截图,我直接自己用不可以吗?现在我们也许明白了,截图或者拷贝出来的是赝品,是没有任何价值的,是不具备交易价值的。


当然。数字世界的物品能不能作为商用,还需要看作者在NFT商用合约里规定了了什么,可以做什么用途,NFT合约一般会分为两个部分,一个是标准化的,另外一个是非标准化的。



3.11  NFT标准化合约


标准化合约就是我们前面说的那两个特性,不可以分割和不可以复制性,这是我们用户无法改变的,交割时只是交割了版权给你。



3.12  NFT非标准化合约


非标准化的合约部分就是由作者去制定的。例如,我们设计了一个LOGO,我们可以要求别人在公司盈利了10万之后,在支付LOGO的设计费用,也可以要求别人的使用场景,比如,只能用于APP上,用在其他上面需要支付另外的版权费,然后在给他开通权限,不同的作者会根据环境时间和他自己的性格,来撰写不同的NFT合约和调整合约内容。


3.20  元宇宙有哪些就业机会

以前,我读凯文·凯利的《必然》这本书中曾经说过,“人们会在新的生产力水平上找到新工作”,在以前读到这句话的时候,我不太理解,现在我在想起这句话,我可能读出了新的领悟,那不就是现在说的元宇宙吗?在元宇宙里我们会有新的雇佣模式和就业模式。人们也有可能在元宇宙里衍生出全新的职业,创造全新的价值。

现在我们越来越多提到的是人工智能将要来到,大部分重复的工作将要被取代,尤其在《人类简史》这本书中提到了“,“未来20到30年之间,超过50%的工作机会被人工智能取代。”这件事已经在发生了,无人超市、无人货架、无人驾驶,都正在成为现实。不只是重复性劳动,还有像医生、律师、文字工作者,在人工智能发展越来越强大的未来,也有被替代的风险。”


所有,对我们来说,元宇宙因为创造和关系,为我们创造了更多在的强烈的存在感。更重要的是,它提供了我们去应对人工智能对人替代的策略。


前面我们说过,当身份系统和经济系统这两个基础条件满足的时候,一个元宇宙就基本成立了,而且随着元宇宙的热度越来越高,全球的头部企业都开始布局元宇宙,比如,国内外的社交巨头Facebook和腾讯,都已经公开自己已经开始慢慢的转型做元宇宙,而且都开始慢慢的开始研发元宇宙相关的应用和技术。

老话说过,早起的鸟儿有虫吃,彭博社预测说,到2030年,元宇宙的市场规模可能会达到2.5万亿美元。但随之而来的一个问题是,元宇宙所带来的机会是不是还是像现在一样,被几家巨头垄断,还是我们普通人也可以参与元宇宙的建设中去。


这个我们需要分析元宇宙的构成,除了身份系统和经济系统外,元宇宙的最终的形态肯定还是需要很多其他的资源来支持,比如,最基础的底层基础设施,是不是需要足够的电力资源、算力和高速网络,其次,我们需要进入到元宇宙,是不是需要一个引导的设备?我们想在元宇宙里生活工作,那是不是需要各种场景的布局,是不是也需要提供各种各样的工作岗位,这意味着元宇宙有需要非常多的第三方的技术支持,有些风口,也是很多其他企业和普通人能够去参与的。


元宇宙的建设,是一个庞大的工程,绝对不是一家两家公司能搞定的,那么这个庞大的工程在建设的过程中,会遇到什么样的机会和挑战呢?在元宇宙的建设过程中,我们先来梳理下元宇宙需要的生命周期



4.10  元宇宙的准备期


准备期,这阶段主要涉及元宇宙的基础设施供应商的准备工作,我们知道,元宇宙的基础设施主要包括通讯网络、云计算和新的开放的网络协议。理想中的元宇宙,能同时容纳百万级、千万级甚至亿级的人,所以它对网络和算力的需求会有指数级的增长。

举个简单的例子,我们国内现在比较火热的大逃杀游戏“和平精英”,目前一个房间能容纳100人同时一起在线,而元宇宙需要的算力支持可能是“和平精英”的千倍万倍。另外就是不同元宇宙直接如果需要联系的话,还有需要支持统一的协议接口,这些都是需要一个统一的协会来制定,就像W3C来制定hTML代码规范一样,这些比较基础的问题都要解决了才能算是度过的准备期。当然实际上在实施过程中可能会遇到更加棘手的问题需要解决。



4.20  元宇宙的启动期


启动期,需要解决元宇宙运行期的一些规则性的问题,比如,经济系统的正常运转和NFT的交易系统。经济系统,按照我们现在能想到的技术,就是通过区块链形式的记账系统去解决。

比如我们在某个元宇宙空间的数字身份买了一包纸巾,那么元宇宙的账本会记录一笔,然后把这瓶的所有的权转给我,然后并向整个区块链去广播这一笔交易。

目前在为元宇宙做记账系统的公司已经有很多都开始进入行动阶段了,比如,阿里的蚂蚁链、腾讯的至信链,国外为元宇宙做准备也就更多了,比较比较知名的就是以太坊。NFT交易系统就更多了,比如,OpenSea(开放海)、

SuperRare(超级稀有),国内的NFT交易系统还属于刚刚起步的阶段,我相信明年会有很多实力雄厚的厂家崛起。



4.30  元宇宙的爆发期


爆发期,是元宇宙设备供应商百家争鸣的时候,有两类目的厂家应该会大有作为,元宇宙的设备供应商和场景应用的开发商。

元宇宙相关的设备我们在电影上也看过不少,像眼睛、手表手环、脑机接口之类的,场景应用的开发商可能就更多了,比如娱乐设施、工作场景和模式、教育场景、购物场景,这些都可以构成元宇宙的丰富的场景,这都是场景应用开发商的机会。当然另外做出创新的厂家可能会成为某个单独类目的龙头,例如,让脑机接口变的更小巧携带更方便,以方便随时随地的可以进入到元宇宙的空间里。



我们前面说到,要想迎来元宇宙需要经历三个阶段,分别是准备期、启动期和爆发期。我们现在处于元宇宙的什么阶段呢?距离元宇宙的开始正式商用还需要多久呢?正式进入爆发期我们需要做好哪些准备呢?我一个个来解决这些问题吧!

关于我们目前处于元宇宙什么阶段,就目前技术的发展,我们应该处于元宇宙的启动阶段,为什么这么判断呢?因为在经过过去几年技术的沉淀,我们有成熟的区块链的记账系统,NFT系统已经得到了市场的认证,并已经开始大量启动商用阶段,在2020上半年,全球NFT的市场交易额只有1370万美元,而到了2021年上半年,这个数字飙升25亿美金。


5.10 元宇宙来临标志


我们知道在元宇宙的产品生命周期有一个启动期和爆发期,但是,在爆发期之前肯定有一个临界点,当这个临界点到来的时候,就代表我们即将迎来元宇宙的时代,那我们怎么判断什么时间是元宇宙的临界点呢?我们还是需要从两个基础条件开始判断。

首先是身份系统。要想达到这个临界点,必须有一个全民级作为元宇宙的入口能接入元宇宙,就像现在FacebooK一样 ,全球使用的人数超过了一半,这便是我们现实世界互联网的全民级的应用。


第二个标志,当然是经济系统,衡量经济系统的一个关键指标是NFT的交易规模。。现在我们全球的GDP超过了80万亿美元,而NFT市场规模仅有约200亿美元,如果要达到临界点的标准,这个NFT市场的规模,也就是元宇宙的GDP,肯定要达到万亿美元的水平。这样估算,距离元宇宙的临界点,至少还有五年。



5.10 元宇宙临界点会遭遇哪些挑战?


在我们向元宇宙的慢慢过渡的时候,我们整个社会会遇到哪些挑战和需要做好哪些准备呢?我认为比较重要的两点比较关键,一是建立共识,二是文化和伦理的冲击



(1) 建立共识


为什么说建立共识比较重要呢?我们都了解,创造是元宇宙最大的优势,但是也是有风险的。比如,在元宇宙里,我们每个人都有编写剧本和玩法的权力,这样就会产生很多矛盾,每个编写的元宇宙的剧本不一样,这个是可以的,但是不同的剧本的矛盾是,元宇宙空间里可能是一个美好的元宇宙,也有可能是充满杀戮和暴力的元宇宙,也有可能是劳动最光荣的元宇宙,也有可能是不劳而获的元宇宙。

所以我们需要在法律、文化、价值观等等层面,让社会各个阶级都可以参与讨论,提前达成一个符合大家正能量共识的价值共识。


(2) 文化和伦理的冲击


第二个需要解决的问题可能是面的文化和伦理的冲击,我们可以想想,如果某一个元宇宙充满打打杀杀的事情,在里面的玩家回到现实也是不是会有暴力倾向。比较严重的是,在数字世界中,暴力和杀戮它的成本会比较低,所以在里面的犯罪成本也会更低。但是,在现实世界中,发生暴力冲突,无论在哪个国家都要付出比较重的代价,可能是需要接受法律的制裁,也可能是经济上的损失。但是在元宇宙的数字世界中,可能一个屏幕上的一个角色消失而已。

再往深一层的看,在元宇宙的世界中,我们说的自由是绝对的还是相对的呢?我觉得应该是相对的,在元宇宙世界里,还是需要法律和规则的,甚至要相对的比较严格,而这种规则和法律的制定恰恰是因为元宇宙不是一个开发商,不能通过监管一家公司、一个机构就可以解决的,而是要回到共识的层面,通过建立个人、社会和国家之间的公约,创建文明的元宇宙。

5.20 元宇宙技术层的挑战


元宇宙的虚拟现实是什么呢?我觉得是欺骗大脑的感官,它光有视觉的呈现是不够的,触觉也需要跟的上,例如,我们在元宇宙里看到一个菠萝,我们闻起来是菠萝味,摸起来也是尖尖刺刺的,可能我们认为它只是元宇宙里的一串代码,但是我们的大脑会通过感官来告诉我们,这就是菠萝,所以除了戴在设备,可穿戴设备也是极为重要的,它会给我们一个真实的力作用的反馈,但其实,欺骗五感并不是最大的难题,最难解决的应该是移动和交互问题,我们可以想象下,我们戴好设备,来到了元宇宙,一切的听觉视觉触觉都非常逼真,这时候我们街道一个任务,要去野外去打BOSS,问题来了,我们该怎么过去,在真实的物理世界里,我们是需要移动的,但是,我们的房间只有20平方米,所以虚拟空间再大,我们物理空间是有限的,大部分的方案是通过传送门直接过去,所以,元宇宙的开放世界就很难实现了。

但是即使是传送,也不能解决所有的问题,我们都听过3D眩晕症,这个原理是我们生理在视觉上感觉到了移动,但是身体没有移动,如果大脑足够敏感或者第一次接触,那么就是产生眩晕感,这种情况在第一个玩穿越火线的时候会比较常见,通常这种情况是视觉上越真实,眩晕感就越严重,在头号玩家里,主角之所以可以在小小的车厢里可以移动,是因为他在跑步机上,现在的虚拟现实游戏的移动也是靠这种方案解决的。


交互方面就更加复杂了,这里包括了人与物、人与环境、人与人直接的问题,比如,扎克伯格演示的开会场景,我们实际上还行需要椅子和桌子,不然,我们的感官虽然可以给椅子的反馈,但是坐下来确实空气,当开会玩了,需要互相给实体文件怎么办,需要握手怎么办,这都是一些交互逻辑上需要解决的问题,是不是每次开会我们都需要先把场景和东西搭建好,才可以使用,这样的话,实用的成本也显得太高了。每多一个步骤,用户的体验都是坠崖式的下跌。

所以,在现在目前看来,我们需要解决体验层方便的东西还是太多了。

5.30 元宇宙能带来哪些改变

前面我们对元宇宙的概念及需要的条件进行了结构,那么我们来落到实处,谈谈元宇宙能给生活带来哪些便利,首先,在扎克伯克发布的关于元宇宙的视频中,我们可以发现,元宇宙最先落地的可能是现场感,例如现在疫情比较严重,我们可以通过虚拟会议室来开会,还有我们很多现有的商业模式都可以借助现场感来进行重构和升级,比如,我们现在去购物,一般是自己打开APP购物,或者分享自己的购物车给朋友,未来我们可以一起在虚拟世界中逛街,足不出户,可以一起试衣服,帮对方挑漂亮的首饰,现在看任何直播赛事,都需要通过屏幕去看,最多有人气和在线人数,未来我们可以身临其境,感受到四面八方的欢呼,现在我们看网红都是隔着手机刷视频,未来我们可以更加直接,走到小姐姐身边,更加近距离的接触和交谈。


关于元宇宙是否有未来,是很多人一直争论的话题,但是我们可以肯定的是,随着全球科技水平和人民精神物质的逐步提高,人的精神层面和娱乐层面的阈值时被不断提升的,肯定会有企业做去做能满足人更高维度精神层次的工作,因为人对精神层面的追求的欲望时没有顶峰的,而我们现实能满足的条件时有限的,而虚拟现实则可以极大成本的去满足这个条件,我们现在人平时周末的娱乐时什么,无非是玩游戏逛街和看电影,而这些在虚拟世界里也可以实现,甚至可以不用出门,但是,有人可能会说,虚拟世界的东西终究是虚拟的,怎么可以和现实的相比呢?我们所能感受到了娱乐带来的精神满足无非是眼、手感知到了,在传输给大脑,如果我们技术足够发达,在虚拟世界中的东西反馈足够真实,骗过大脑就不是问题。

说到这里,我想起我以前读书的时候,我特别爱一款名叫冒险岛的网络游戏,刚好在那天,我们那个工会要去打里面的一个BOSS“扎昆”,打完BOSS会掉落一个专属的BOSS装备,扎昆头盔,但是那天,我刚开团,我表姐要去买鞋,她问我,游戏里的东西有那么重要吗?我没有回答,但是我心里已经有答案了,当打完BOSS掉落的扎昆头盔,队友的兴奋是真实的,当这款游戏没落时,大家在QT里面的告别的落寞是真的,现在想到大家一起组队刷本互相帮助的温暖是真的,我珍惜我在冒险岛的每一件橙装还有一起和我打副本的朋友,所以,世界上哪有那么多的真真假假,当有一天,你在元宇宙花的时候比你在现实里要多,你的元宇宙的身份比你现在的身份要重要的时候,你那时候觉得那边是虚拟哪边是现实的,当你有一天想去现实中买鞋和衣服的时候,会有人问你,现实中的鞋子和衣服不就是一堆垃圾吗?为什么要那么认真呢?

文章来源:站酷 作者:Endings 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

日历

链接

个人资料

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

存档