首页

这些高级UI设计趋势,我不允许你还不知道!

ui设计分享达人

正文


如果移动应用程序不符合最新的设计趋势,那用户可能会放弃你设计的产品。 

考虑到趋势永远不会保持不变,而且总会有新的趋势出现,让应用看起来既现代又漂亮是一项挑战,但遵循设计趋势对于每个产品设计师来说都是必须的。 

我们了解到,跟踪行业中的所有趋势和趋势并不总是可能的。总是有新的指南、动画内容、视频、新的插图方法以及许多其他概念,您需要先抽出时间学习和测试。 


这是我们总结出的 2022 年移动应用 UI 设计趋势

1、运动和动画 
2、手势和滑动体验 
3、90年代风格 
4、图形深度 
5、黑暗模式 
6、排版 
7、增强现实和虚拟现实 
8、渐变和透明元素 
9、舒适的视觉效果 



1、动效和动画

我们都喜欢看视频,并在 TikTok 或 YouTube 上花费大量时间。视频内容和动画更具吸引力和互动性。统计数据显示,大多数人在使用应用程序之前都会观看说明视频。动画和动作设计使内容更具吸引力。 

与具有长描述的静态内容不同,动画可以保留用户的注意力并使应用程序更具吸引力。用动画突出重要的东西是一个好主意。例如,您可以为应用程序中的按钮设置动画,以使用户与应用程序的交互更好、更直接。像图标动画这样的微动可以显著改变您的应用程序的体验。 

借助动画,您可以强调应用功能、提高转化率甚至销售数据。 




2、手势和滑动体验

与电脑上的网页端相反,手势和滑动体验使移动设备更具吸引力。我们每天花费数小时滚动和滑动操作。按钮和其他动作可能会刺激和分散注意力。这种设计趋势成为现代应用程序设计的最高优先事项之一。一些应用程序创建者甚至根本不支持按钮的使用。按钮会造成混乱并占用过多的屏幕空间。 

建议用滑动功能替换按钮。尝试滑动动作的动画会很有帮助。例如,图书应用程序通常使用动画来翻页。 




3、90年代怀旧风格

90 年代的风格影响了所有领域,甚至是移动应用程序的设计。 

设计师使用类似于 90 年代流行的 PlayStation 游戏(例如,马里奥或吃豆人)的复古字体、图像、图形。拥有 90 年代的氛围,您有机会获得两代人的兴趣:年轻人喜欢复古的东西,而老年人则喜欢怀旧。 

这种趋势并不适合所有产品,但如果复古风格适合您的应用程序,尝试一下也不错。 



4、赋予图形深度

扁平化设计看多了用户会觉得很沉闷。人们喜欢看到更真实和互动的内容。图形中的阴影和图层赋予它们 3D 效果、体积和深度,使人们可以享受更逼真的图像。 

这种趋势可以与任何元素一起使用,在屏幕上创建对象层次结构并帮助用户更轻松地浏览应用程序。 

然后,关于3D效果,我们来聊聊。3D 是一项革命性的技术。3D 图形几乎可以在任何应用程序中使用。例如,开发人员可以使用 3D 成像技术来构建存储建筑物和房间内部地图的应用程序。它可以非常适用于游戏并改变玩家的整体体验。因此,在您的应用程序中为图形添加深度时,请考虑 3D 趋势。 




5、黑暗模式

暗模式是已在许多应用程序中高度使用的最大设计趋势之一。最近,设计师也提供了在应用程序中在标准模式和暗模式之间切换的机会。所以用户可以选择他们最喜欢的任何模式。 

深色主题设计将背景变为深色模式,并使字体和其他元素变为浅色/白色。 

例如,现在在 Facebook 等最受欢迎的应用程序中都可以使用深色模式。切换到深色模式有助于人们减轻眼睛疲劳并更方便地浏览。 




6、排版

选择正确的字体是移动应用程序设计中必不可少的一步。用户在浏览页面的时候不是一个字一个字的读的,而是成行的“扫描”方式来浏览。因此,使用能够正确设置重点的字体非常重要。 

设计师已经开始使用不寻常的字体。文字不再看起来那么无聊,也不会迷失在背景中。其目的是使设计更明亮、更新颖。 

正确选择的字体将有助于:
1、定下产品调性; 
2、提高品牌知名度; 
3、提供更好的视觉体验; 
4、提高可读性。 

通过组织排版为您的用户提供愉悦且可读的用户体验:设置点大小、行距和层次结构。 

请记住,不寻常的“疯狂”排版并不适合所有产品。定义文本在您的应用程序中的具体功能。如果它提供了额外的信息功能,请不要对字体进行太多实验。但是,例如,在在线杂志中,您可以使用各种版式,使布局更有趣。 



7、增强现实和虚拟现实

虚拟现实和增强现实为用户提供了一个难得的机会,让您只需通过手机即可获得互动体验。 

在新一年中,这种神奇的 UI 移动设计趋势趋于增长和传播。这种设计趋势的关键在于应用程序的界面让您感觉自己置身于应用程序中。引人入胜的设计元素和游戏化是这种体验的关键。 

这是一个结合我们之前讨论过的趋势的绝佳机会,例如动画和 3D 效果。首先,精心制作的动画和 3D 触摸可以在您的应用设计中支持 VR。 

你还记得那些来自 Instagram 的功能吗?让我们可以通过应用程序和移动相机将不同的角色放置在我们想要的任何地方吗?然后你就知道这有多有趣了。此外,它不仅有趣而且高效。例如,宜家使用 AR 来展示一件家具在您家中不同位置的外观。 




8、渐变和透明元素

这个UI设计趋势是关于渐变和透明度的。设计师通常在按钮和应用程序的背景上使用渐变。移动渐变趋势突出了应用程序的基本部分,并使人们专注于特定方面,从而赋予他们层次感。 

移动应用程序设计中的透明元素表达了对某些应用程序部分的深度和驱动力,使设计更清晰、更具吸引力。 

您可以使用从浅色到深色主题的过渡,从而将屏幕分成两个逻辑部分。此外,您可以在按钮上使用渐变主题,使它们在屏幕上弹出。 

玻璃拟态的概念也值得一提。glassmorphism 背后的想法是柔化明暗设计元素之间的对比。设计理念使用类似于磨砂玻璃表面的透明模糊背景。 

玻璃态的主要特点:
1、透明度和背景模糊; 
2、透明物体上的细光边框; 
3、分层; 
4、鲜艳的色彩。 




9、舒适的视觉效果

舒适的视觉效果是大部分用户都喜欢的。用户和应用程序开发人员都喜欢这种最近的移动应用程序设计趋势。 

移动应用程序设计不应该只是美观。它应该让我们的眼睛看起来更舒适。因为一整天,我们可能都会盯着屏幕看,但看多了,我们会感到疲劳和眼睛疲劳。为了减少这种不利影响,应用程序开发人员创建了一种我们可以舒适使用的设计。 

舒适视觉设计趋势的概念是为您的应用程序使用自然的色彩、舒缓的图像和简单的布局。这些技巧通常可以在冥想应用程序中找到。它们包括自然的真实照片,具有平静的色彩和结构简单的轻元素,很少有深色主题设计。 




如果让你的UI设计更好呢?

这里有一些建议: 

1. 多看别人的优秀设计
分析它们的优缺点,从他们的经验中学习。 

2. 使用标准导航
不要使用异型的导航栏,这会让你的用户迷失在应用中。 

3. 使用优质的配图
抽象艺术、插图、真实照片趋势——一切都有助于吸引用户的注意力。 

4. 多看前瞻设计趋势
实时更新自己的设计知识库,使设计水平使用保持一流。 

5. 擅于总结与回顾
可以计划,三个月或半年总结回顾之前设计,总结不足之处。 

6. 多于他人分享
做设计不要怕被人看,或许有时候别人顺口一说,就点开了难题。 

7. 保持良好的心情
遇到事不要慌,掌握好自己心情,才能掌握好你的设计。
文章来源:站酷   作者:UI范
分享此文一切功德,皆悉回向给文章原作者及众读者.


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

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


浅谈B端设计系统

ui设计分享达人

什么是设计系统?



设计系统 = 设计价值观和原则+设计规范+场景定义+工具包

是在设计价值观和原则、设计标准指导下的各种共享的设计模式和组件资产,,是将产品设计团队联合在一起共同打造的一套质量和效率上都有所保障的可行性解决方案,能够解决产品视觉、交互体验一致性的问题、帮助传达统一的品牌认知。帮助团队快速完成产品迭代和功能开发! 

为什么要构建设计系统?


问题1:

随着业务的拓展,产品和项目数量不断增加,发展中期设计和交互上不一致性的问题浮出水面,需要采取措施确保产品或产品线之间保持统一的品牌传达、外观和体验,以满足用户预期并向其传达统一的品牌认知。

问题2:

无统一的设计规范和交互原则,没有统一的UI组件库和代码库,各团队设计和前端需花费大量资源陷于低质量沟通协作和重复造轮子,拖慢产品和项目设计和开发节奏。

问题3:

产品项目数量 vs 产品设计师,人员配比严重不足的情况下,团队的设计师们无法从杂/乱/急的日常需求中剥离出来,影响构建产品壁垒的质量和速度。

设计系统的价值


产品侧:

保证可复用模块的交互体验的一致性。如同一个产品类型不同分支多个团队完成的时候,可以保证产品团队使用同一份设计规范快速完成产品原型设计。 

设计侧:

把设计师逐渐从不必要、重复性劳动中解放出来,节约出来的时间和精力放到更多有价值的工作上去。更多去关注对用户需求和业务逻辑的深入挖掘,如果每个设计师都具备产品用研、交互、组件化等一条龙能力,才能体现tob产品设计师的价值,才不会被别人称作是拖拽组件的“工具人”。 

开发侧:

形成开发资产,可以提升研发效率,降低维护成本。开发工程师无需再重复开发同一个组件,只需要去组件库里调用即可,配合业务逻辑,高效完成界面开发。做到开箱即用。 

测试侧:

标准化的设计规范,是测试人员最喜欢看到的。1是1,2是2的设计准则,提升了测试效率。例如,设计规范规定弹窗footer区按钮组居右,那么测试人员只要测到不居右,就可以给产品提优化建议了。 

主流设计系统-他山之石可以攻玉!


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

设计系统的打造不必从0-1构建, 例如:Ant Design业界优秀的开源设计系统,我们完全可以站在前人的肩膀,最终生产出符合达观品牌、业务特性的设计系统。


阿里Ant design:https://ant.design/docs/spec/introduce-cn 
阿里的teambition:https://design.teambition.com/ 
华为devui:https://devui.design/design-cn/design-value 
饿了么elemnt:https://element.eleme.io/#/zh-CN 
有赞:https://design.youzan.com/index.html 

字节跳动 Semi Design:https://semi.design/zh-CN/

字节跳动 Arco Design :https://arco.design/

Material Design:https://material.io/ 
Lightning Design System:https://www.lightningdesignsystem.com/ 
Microsoft fluent :https://www.microsoft.com/design/fluent/#/ 
eva.design:https://eva.design/ 
Atlassian design:https://atlassian.design/ 

以原子理论构建设计系统


原子理论设计介绍

首先原子设计理论并不是什么高大上的规则。最早是由国外前端开发工程师 Brad Frost提出的,他从化学元素周期表中得到启发,发现在化学世界中,所有的物体都是由原子构成,原子组合构成分子,分子组合构成有机物,最终形成了宇宙万物。根据他的理论,设计体系主要包含 5 个层面:原子、分子、组织、模板、页面。


原子理论设计不是一个线性的过程, 它更像是一个心理模型,来帮助我们把用户界面看作是一个连贯的整体,同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面,让我们更深入的了解每一个概念哦~


原子层(Atoms):

原子是物质的基础组成部分,是构成设计系统的最基础元素。

在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线、间距、圆角、间距、阴影等。

简单概述下来就五个字:色、形、质、构、质;



分子(Molecules)层

在界面中,分子就像是一个由UI元素组成的相对简单的组织。如:按钮、弹窗、搜索框等。

以按钮为例,它的组成元素包含了文字、色块、图标和间距。这些抽象的原子从毫无关联原则组合成一个分子,图标和文字互相配合传达意义,颜色定义了按钮的特性,间距为按钮定义了一个尺寸和规范。


 组织(Organisms)层

分子+原子组合成更复杂和可扩展性的模块,这个称之为组织(区块组件),如:列表操作区块、列表展示区块、表单区块、数据统计卡片区块。

以表单为例,一个表单我们可以通过数量的组合,以及间距的调整,元素的增减,在界面中表达不同的场景和含义。



模板(Templates)层

由原子+分子+组织构成的更复杂更具拓展性的模块,如:分组表单页、页面级表单、详情页、列表页、异常页、dashborad。本质就是线框图,模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。专注于页面的底层的内容结构,页面中的信息是占位作用,而不是页面的最终内容。


页面(Pages)层

带业务逻辑的场景案例如:标注详情场景、抽取详情场景、权限管理场景。页面将真实内容应用于模板;

页面是模板的具体实例,填充了真实的内容(图片、文字等)后形成页面,也就是常说的带交互逻辑的「视觉稿」即为高保真原型图,将占位符替换为有代表性的真实内容,使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案。



关于设计系统的常见认知误区



误区1:设计体系就是设计规范或者组件库吗?

许多人认为设计系统就是单个代码库、组件库、设计规范,但实际上他们不是一个层次的东西,准确度的来说设计体系包含设计规范,组件库也是建立在设计体系内的,组件库是记录和共享设计模式的工具,就是设计体系工具化和表现层的部分;


误区2:设计体系的存在扼制了组织内创造力,会替代掉设计师?

抛出这个问题,是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点,我个人是很难以认同这个的,对design system的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合,需要调动整个团队的想象力和创造力,最终达到一个统一共识才有可能被实施和执行;

好的设计系统可以通过流程和机制促进创造力的,而且好的设计资产可以帮助大家从不必要的、重复的劳动时间内节省出来,当然也不能过度依赖过往的沉淀资产,把自己定位为设计系统的创造者,而不是使用的工具人,不断的创造和贡献好的解决方案被整个组织采用,就不必再担心那些即将沦为沉没成本的过往设计与技术资产的限制。不会替代掉设计师,反而是一个企业内部尊重设计师价值的开始!是企业对设计文化的认可!


误区3:设计系统是一劳永逸的吗?

设计体系是动态的,永远是随着组织需求和用户需求而变化的,一切说自己已经完成了设计体系的建设的人都是错误的,都是将将静态的设计规范曲解成了设计体系。


误区4:设计系统由少数人员生产,我们负责用就行了?

正确管理机制:少数人负责管理,多数人参与贡献;避免你做、我用模式,这种生产消费模式非常内卷;避免如:我一个设计师为啥要用你的规范;这规范做的太垃圾用处不大,我才不用,用你做的规范;我苦逼做业务,你晋升拿结果的负面心态;

然设计系统也不是简单的靠少数的人1-2个月用爱发电就能完成的,设计系统是一群人,对一种做设计文化的认可,每个与之相关的人都应该是设计体系的贡献者与布道者!


需要克服的潜在难题


当然设计体系也容易出现一些缺点,这些问题需要设计体系的构建者们去摸索去克服; 
  • 产品业务复杂性提升,提升建设难度

  • 难以控制创造与控制间的平衡;

  • 复用与定制间的平衡,刻意追求复用率而容易丢失整体观,为特定业务目标服务时不如灵活集中化式方法等

  • 资源问题,容易被当成是辅助项目而缺乏预算等资源….

  • 缺乏良性有效的组件库更新迭代机制,虎头蛇尾….

  • 收益短期不明显,搭建体系的长期收益难以被组织短期内察觉;


尽管有一系列潜在的问题,但总的来说设计体系的带来的收益是大于这些投入的,总的来说方向是没错的,下一个关键问题是:我们如何去建立一个更优秀的设计体系。

文章来源:站酷   作者:从你的世界经过



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


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

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


深入聊聊“用户体验设计”那些事

周周

我们创建用户体验的设计方法为“以用户为中心的设计”。

产品需求管理与设计

ui设计分享达人

1. 需求定义

需求是用户对于自己碰到的困难从而提出的问题,是用户对于已有产品的反馈和建议,是老板提出的商业诉求,就是运营人员减少工作麻烦的想法。需求和产品是一种问题导向与目标导向的结合,是用户碰到了什么样的问题,从行业属性、用户群体、业务场景、工作目标、商业利益等方面从而产出的输出物,也就是所谓的产品。

需要:是解决问题或者满足欲望,达到最终的目的。

需求:是需要付出一定成本来满足,主要体现在解决方案中的具体产品和功能。

2. 名词解释

产品需求文档(PRD)是将商业需求文档(BRD)和市场需求文档(MRD)用更加专业的语言进行描述。

3. 面向对象

开发、设计师、测试、老板、项目经理、产品经理、运营、市场、销售、客户、财务等其他角色。

4. 输出物

文档:Word、ppt

交互或者原型稿件:Axure、UI界面

5. 产品需求文档结构

命名和编号

修订记录

背景分析(产品背景、行业背景、国家政策)

需求分析

用户定位

产品目标

总体架构(技术架构、功能架构)

业务流程

功能设计(功能总表、用户角色、功能详情)

产品特色

产品模块清单

产品适配清单(支持的浏览器、数据库、中间件、操作系统)

6. 需求分析原则及方法

6.1. 产品需求的三个层次

基础性需求、期望性需求、兴奋性需求

6.2. 马斯洛需求五个层次

生理需求、安全需求、社交需求、尊重需求、自我实现

6.3. 需求管理的四个环节

采集需求、分析需求、筛选需求、处理需求

6.4. 需求分析四象限

重要并紧急、重要不紧急、不重要但紧急、不重要不紧急

7. 需求分析及产出

WWH法:是什么?为什么?怎么做 ?

需求分析贯穿整个产品全生命周期,包括产品概念期、产品设计开发期、上线后-成长期、成熟运营期、产品衰退期。

 

 

7.1. 明确问题

7.1.1. 需求收集渠道

 

明确需求收集渠道,确定用户群体和需求调研的方法,比如问卷调查、访谈、名义小组会议、头脑风暴法、观察法、亲和图、蒙特卡洛技术、鱼骨图、提示清单等方法。

提出需要解决的问题,明确需求带来的价值。利用目标用户、场景、问题三个思考维度,去定义真正意义上的产品需求,示例如下:

 

通过用户针对不同的场景,明确了主要问题需求,怎么思考产品需求怎么体现到产品设计上面,从而体现产品价值,包括产品设计成型后的市场推广方式至关重要。产品问题产生的产品价值示例如下:

 

7.1.2. 拆解需求

拆解需求指的是把已经明确的问题,从多个维度进行拆解,目的就是为了找到更合适的解决方案。

拆解问题的五个维度分别是积极层面、否定层面、转移层面、拆解、脑洞。

Ø 积极层面:通常可以拆解出怎么做对用户来讲可以产生更积极的情感。

Ø 否定层面:通常可以拆解,即使不做什么,依然可以产生好的结果。

Ø 转移层面:转移指的是不直接单独解决当前用户的问题,通过转移法,用户转移、问题转移等。

Ø 拆解:把当前问题刨根问底的拆,挖掘更多的可能性、找到问题本质。

Ø 脑洞:这个更多的靠灵感、经验等进行头脑风暴,补充其他维度考虑不到的地方。

7.1.3. 需求管理

7.1.3.1. Kano模型

 

Kano模型是对用户需求分类和优先排序的工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。

Kano模型把需求分为五类:基本型需求、期望型需求、 兴奋型需求、无差异性需求、反向型需求。怎么通过模型知道用户的需求类型,示例如下:

 

7.1.3.2. 时间管理四象限法

时间管理四象限法分别按照紧急程度和重要程度分为重要且紧急、紧急不重要、重要但不紧急、不紧急不重要。具体示例如下:

本方法的优势可以评估产品开发的时间优先级,对于一些重要且紧急的功能开发能够做到心中有数。

7.1.3.3. ICE排序法

ICE排序法是一种比较严谨科学的分析需求的方法,通过几个几个维度给需求进行相应的打分,以总分的高低去排序。

I(Impact):影响范围。

C(confidence):对上线效果的自信程度评估。

E(ease):开发难易程度(工作量+技术难易程度)评估。

7.1.4. 需求输出

7.1.4.1. 输出内容

思维导图、业务流程图、原型图、需求说明文档、功能说明文档等

7.1.4.2. 输出角色

业务人员、技术经理、后端技术人员、前端技术人员、UI、UE人员

7.1.4.3. 沟通样例

(一)业务人员

面对业务人员,主要是讲产品功能实现和重点业务流程,主要依靠思维导图或者原型图去讲解产品可带来的价值和解决了什么样的问题。

(二)后端开发人员

面对后端开发人员需要给技术经理协调和沟通,确定的项有数据库怎么写,字段(数据结构)怎么定义,最后生成什么样的表,当用户进行相关业务操作时(增删改查),怎么去设计接口,接口设计对应数据库,先调用什么样的接口,传输什么样的参数,返回什么样的结果。进行前端解析,后台数据图形化,最后呈现给业务用户。

(三)UI、UE人员

面试UI、UE人员从行业特征、用户群体特征、用户习惯等方面来确定产品视觉和交互形式。

(四)前端开发人员

通过评审后的UI设计稿交付给前端人员,进行前端页面的开发。

(五)测试人员

面对测试人员,跟进产品测试情况,提供产品需求文档和原型图及UI设计图,编写测试用例,把控测试时间,协调相关资源,保证产品顺利产出。

8. 产品迭代规划与需求跟进

8.1. 产品全生命周期规划

根据产品规划的全生命周期,确实不同阶段需求的落地情况,根据用户对于需求的满足情况。

8.2. 业务流程分析

根据已开发上线的所涉及的业务流程,先分析完整性,基于本流程从专业角度提出改进方案,不断优化该流程,确定流程的可用性。特别是一些核心业务流程,要做到简洁高效,提高效率。

8.3. 新需求管理

通过产品的不断使用,收集和接收不同的新需求,并定期开展新需求评审,逐步完善到产品里面,以最小调整为基线确定新需求的开发计划,保证产品总规划的稳步实施。

8.4. 里程碑管理

把控整体产品里程碑管理,确保产品迭代重大节点变化能够有理有据,为产品的营销工作,提供支持。总结产品优势和产品亮点,对产品的销售情况负责。

原文地址:站酷
作者:Lyion

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

如何运用情绪板定义视觉风格?

ui设计分享达人

前言 

相信每个设计师,平日里都会去关注各种各样的视觉风格、设计趋势,如杂志风格/3D风格/简笔插画/晶白风格/赛博朋克/国潮/新拟态/孟菲斯等等各种各样的视觉风格。但是在了解这么多视觉风格的同时,又不知道什么样的风格适合是自己产品的,做设计时仅仅凭借着直觉跟过往的经验来进行设计,最终导致设计稿禁不起业务方的推敲,并且被贴上设计不专业的标签。 

其实,每一个产品设计都需要设计师花费大量的时间精力去推倒出属于自己产品的视觉风格。而不是仅仅参考当下流行什么设计趋势、设计风格,就开始进行设计。流行的视觉风格大多不会一直流行,只有符合平台调性的视觉风格,才能更好的为产品赋能。 

因此,学会如何定义视觉风格,是每个设计师都需要去学习并且加以运用的。 

什么是情绪板? 

情绪板(英文Mood Board),通常是指一系列图像、文字、样品的拼贴,是设计中最常用的定义设计和视觉方向的设计方法论。 

情绪板的本质在于: 将情绪可视化,将较为抽象的词语转化为可视化的图形等,比如:“安全”这个词可映射出盾牌/锁/警察等等给人们感觉到安全的人事物。 




情绪板的作用?


情绪板能够更加帮助设计师与业务方达成设计共识,并且能够帮助设计师定义视觉风格与找到设计方向,使设计更加合理,为产品赋能。


如何运用情绪板定义视觉风格


情绪板的制作流程


情绪板的制作流程大致分为5步:


1、明确原生关键词


了解项目背景或需求本身的方向,通过内部讨论,用户研究和品牌等方式定出3-5个原生关键词,通常定出的词都比较抽象。


2、挖掘衍生关键词


在原生关键词的基础上让参与者发散得到更精准的二级词语,能够更加准确的定位到图形传达方向,最好是一些情绪和视觉表达的形容词。

可通过视觉映射、心境映射、物化映射,得到用户理解的“抽象关键词”所对应的“具象定义”。


3、搜索关键词图片


确定完关键词后,可在pinterest、花瓣等设计网站上建立情绪板图库,按照人,事,物,形、色、字、构、质等方向收集大量的对应图片素材来匹配关键词。


4、建立情绪板


对应每个关键词,从情绪板图库中提取高质量能够代表关键词意思的人,事,物,形、色、字、构、质去展示,以此唤醒用户对关键词情绪体验。


5、提取视觉风格准则


根据情绪板图库中的图片提取出视觉风格准则,包含:图形、颜色、质感、构成、字体等视觉风格准则。



举个案例说明:


明确原生关键词


讨论原生关键词


了解项目背景或需求本身的方向,通过内部讨论(可叫上产品、运营、老板等进行讨论),用户研究和品牌等方式定出3-5个原生关键词,通常定出的词都比较抽象。



确定原生关键词


从讨论的关键词中提取3-5个最适合的关键词。



2、挖掘衍生关键词


在原生关键词的基础上让参与者通过视觉映射、心境映射、物化映射,发散得到更精准的二级词语,能够更加准确的定位到图形传达方向,最好是一些情绪和视觉表达的形容词。



3、搜索关键词图片


确定完关键词后,可在pinterest、花瓣等设计网站上建立情绪板图库,按照人,事,物,形、色、字、构、质等方向收集大量的对应图片素材来匹配关键词。



4、建立情绪板


对应每个关键词,从情绪板图库中提取高质量能够代表关键词意思的人,事,物,形、色、字、构、质去展示,以此唤醒用户对关键词情绪体验。


5、提取视觉风格准则


根据情绪板图库中的图片提取出视觉风格准则,包含:图形、颜色、质感、构成、字体等视觉风格准则。




总结


情绪板作为一种常用的设计方法论,能够帮助设计师更加合理的总结出合适的视觉风格。设计不仅仅是只是跟随着设计趋势,怎样找到适合产品的视觉风格,是每个设计师更需要去掌握的内容。


以上内容,是学习如何定义视觉风格的其中一种方法,希望对大家有所帮助,如有不同意见,欢迎指正!


图片版权归原作者所有

原文地址:站酷
作者:船长的成长日记

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


提高视觉和交互逼格,UI动效之SVG动画教程

ui设计分享达人

最近几年不管是WEB端页面还是APP,使用交互动效越来越多,加了动效的UI页面看上去不再那么枯燥无味,能很好的抓住用户眼球,既提升了用户交互体验同时也更好的展示了产品。通常我们会在哪些场景下使用动画呢?例如菜单图标、载入动画,空白页,产品介绍等都可以使用动画,下面是一些示例:


今天给大家讲解一下如何制作一个svg格式的动画,开始之前先和大家说一下svg是什么,目前web或者app中的动画大多使用svg格式,svg英语全称是Scalable Vector Graphics,它是一种可缩放的矢量图像图形文件格式,这种格式的文件具有边缘清晰、文件体积小、传输方便的特点,因此在网页设计以及APP中比较常用。可以使用Illustrator软件或使用

专业的svg编辑器进行设计输出,svg支持浏览器及任何文字处理工具打开。因此svg格式是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的图形页面。

如果你具有一些代码能力,还可以直接用代码来描绘图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器或编译器来观看。


综合起来SVG优势如下:


  1. 可被非常多的工具读取和修改

  2. 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。

  3. SVG 可随意缩放

  4. SVG 图像可在任何的分辨率下被高质量地打印

  5. SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

  6. SVG 可以与 JavaScript 技术一起运行

  7. SVG 是开放的标准

  8. SVG 文件是纯粹的 XML

目前制作SVG动画的软件主要使用AE(需要插件加持)或者在线的SVG动画工具,如svgjson.com等,如果使用AE需要安装bodymovie插件,我平时大部分动画都是使用svgjson工具完成的,所以今天给大家分享的svg动画教程主要也是使用在线工具svgjson来完成(完全免费),它支持导出svg或json格式动画,可以满足不同的需求,目前该软件虽然是英文版的,但是上手还是比较容易,为了更好让英语不是特别好的同学快速上手,我下面做了一个关键功能的中英对比说明。



软件地址:https://www.svgjson.com/editor-page/


如制作一个loading动画

制作要点:

  1. 创建2个圆形,一个底色(浅灰色)一个旋转的圆圈(蓝色)

  2. 在Store中设置Stroke Dash Array的圆圈长度,圆圈长度可以从Information中获取

3. 设置Stroke Dash Array后,开始旋转圆圈的长度,我设置了400,大家可以根据自己的需要进行个性化设置

4. 第四步我们来设置动画,先选择蓝色的圆圈,然后在Transform中设置旋转动画,第0秒为0,第10秒为3600
度(记住别忘记按关键帧动画按钮,第一帧设置了动画,后面更改参数会自动生成动画关键帧)

5. 按空格键或者点击时间条上的播放按钮看看效果,如果没有问题选择导出SVG动画,一个loading动画就完成
了。

完成后效果

上面的动画是通过Angle(角度)来实现的旋转动画,接下来我们可以通过Stroke Dash Offset来设置旋转动画


loading动画进阶教程

先看最终效果

由于svgjson的绘制能力相对较弱,所以我在其他软件中先画了如下图这个动画的基本元素(需要保存为svg格式),然后通过svgjson中的导入svg方式导入。

  1. 首先把“按钮左”和“”放在一起拼凑成一个圆,然后把“按钮中间部分”也放在圆中间,并且把它的Scale X值设为0.

  2. 把载入的圆圈放在刚刚的红色圆中,并设置Stroke Dash Array值和Stroke Dash Offset动画(具体参照上面的动画教程)

  3. 把载入成功的勾号放在载入圆圈中,然后设置动画Stroke Dash Array值和Stroke Dash Offset动画

  4. 再设置按钮左和按钮右位移动画,同时也需要“按钮中间部分”的Scale X的动画


通过上面的2个教程,相信大家对svgjson这个软件有了一个基本的使用能力,svgjson中的Stroke属性下的Stroke Dash Array和Stroke Dash Offset功能还是蛮强大的,可以通过这2个参数设置很多丰富的动画效果。

下面的动画主要使用x轴缩放功能实现的交互,当然也可以使用Stroke Dash Offset参数实现动画效果。

这个动画的核心点在设置对象的中心锚点位置,默认对象的中心点在中心,这个教程是把对象中心点移到了左侧

接下来给大家演示如何制作一个变形动画,变形动画也是一个非常常见的交互

这个教程重点是对象的缩放,缩放前需要设置锚点位置,然后就是设置x轴和y轴的偏移值。


总体来说,svgjson网站提供的动画能力还是很强的下面是我制作的项目样例:



原文地址:站酷
作者:Snmendala

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

如何通过实验来验证设计结果?关于B端产品「屏效提升」的实验研究

ui设计分享达人

屏幕有效利用率这个话题想必大家并不陌生,在B端产品中,越来越多的产品和用户把目光聚焦到屏效上来。站在体验设计的角度,立足交互和视觉的设计手法,挖掘屏效提升的设计价值,让屏效最大化是提升用户体验的合理方法。





在此文中,对于整个设计(交互、视觉)的手段方法不做过多的详细探讨,我们重点阐述如何利用实验研究的手法验证屏效提升。以某B端项目为例,利用科学的实验研究方法,通过设计实验假设、提炼任务场景、准备实验物料、进行控制变量等完整的实验方法,来验证该项目中屏效提升的设计方法(提高信息密度、缩短操作路径以及信息重组)最终是否提升屏效。



原文地址:站酷
作者:自传一周的鹿

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

简单实用!系统化总结「地图标签」设计

seo达人


一、地图组件的四种类型

1、图标
地图上只标记图标,这种呈现方式能最大程度地显示地图上的信息,减少内容遮挡,也是在设计中首先要考虑的类型。

2、文本
如果地图上标记的内容没有合适的图标能展示出来,可以直接利用文本来描述。

3、图标和文本
随着地图的放大缩小,气泡信息的详细程度也会发生变化。地图放大时将图标和文本相结合可以显示更多的信息,而缩小时只显示图标。

4、图标、文本和注释
图标,文本和注释相结合的形式虽然能显示更多的信息但是需要谨慎使用,因为气泡的尺寸太大会遮挡地图的内容,反而影响使用。

只有当气泡内容能显著提升用户体验时,才使用这种类型。

 

二、地图组件的视觉样式

大多数场景中,地图组件的底部会有一个突出的箭头,用来标记确切的信息或地址。
考虑到后期开发的难度,箭头的位置应始终位于组件的中间。另外如果一个页面中有多个地图组件,可以将箭头调整到顶部,防止发生重叠。

 

1、颜色

组件的颜色比较灵活,默认情况下是白色,但可以通过改变背景色来匹配品牌色。
颜色通常出现在图标后面用来强调信息,如果没有图标可以把整个气泡组件都填充上颜色。

根据背景色的不同,文本和图标尽可能使用黑色或白色,减少对内容的干扰。
2、状态
地图气泡尺寸的大小根据点击需求确定。白色轮廓加上胶囊形状让用户能够快速识别出可点击的对象,选定后气泡颜色会反转。

3、内容缩放
组件基于地图缩放级别和缩放速度展示不一样的动画效果。

 

三、组件可用性指南

如何判断设计出来的组件是否适合用户使用?组件需要怎样设计才能适用于不同的使用场景中,有没有统一的规范?
1、组件状态
面对不同场景中的组件,提供多种状态:重叠、可见、收缩、聚类、分离

 

2、密度

地图中至少要保持40%的内容是始终可见的,这样用户可以明确位置信息,防止产生误操作行为。

利用聚类功能将相邻的气泡组件合并在一起,通过数字显示包含的内容,这种形式利于用户理解和操作。

 

3、易读性
易读性在地图中很重要,例如用户手持使用手机时组件中的字体为15pt,当用户驾驶导航时组件的字体会变为24pt。

另外还要考虑语言的选择对组件的影响,最好避免在气泡组件中使用长串字符,以防止地图中的信息被遮挡。

如果必须要显示长串字符,需要把气泡组件的尺寸水平拉长至地图尺寸的75%,然后换行且最多只能显示两行文本。

 

四、总结–点击即导航

在开始设计地图UI界面之前,有必要花费时间了解地图组件的样式、类型和可用性指南。
通过这些信息可以帮助设计师更快地确定方向,从而设计出清晰美观的地图界面。

 

原文地址:Medium

译文地址:Clip设计夹(公众号)

作者:Linzi Berry

译者:Clippp

 

转载请注明:学UI网》简单实用!系统化总结「地图标签」设计

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



这7个小技巧快速帮你改善UI界面

seo达人


1.为了更好的字体组合,选择「超大字体家族」吧!

在成千上万的字体当中寻找合适的组合是一件非常艰难的事情。如果你也为之苦恼,那么试试「超大字体家族」吧!

通常所说的「超大字体家族」(SuperFamily)其实指的是一组被打包到一起可以互相搭配的衬线和非衬线体,它们风格和细节不一样,但是互相搭配效果是颇为不错的。

我个人强力推荐的是 Merriweather 和 Merriweather Sans、Roboto 以及 Roboto Slab 这样的搭配。

「超大字体家族」最大的优势在于,它是已经被验证过的优质组合,用的时候不用担心~

 

 2.减小标题文本字间距,视觉平衡更好

在标题文本中使用较大的字间距,是排版设计中最常见的禁忌之一!

在放大文本的时候,常规比例下的字间距会显得更加明显,视觉上会显得有点「稀疏」,减小字间距能够让标题文本更加紧凑,在视觉上更加平衡,通常会让人更加愉悦。

 

 3.注意纵向行间距和段落间距的节奏感

当你想让整体排版的节奏感足够好的时候,有必要针对性地重新调整行间距和段间距。

你需要根据靠近原则,让相互关联的标题和正文之间的段间距更加靠近一点,让不相关的内容块互相之间分开,间距拉远,从而自然而然地进行区分。

通常而言,你可以让标题上方的留白更大一些,标题下方的留白更小一些,这样就可以了。

 

4.如果标题很短,可以试着使用全部大写

在英文为主的页面当中,全大写的文本辨识度其实相对更低的一些,较长的标题文本使用大写字母更是难于辨认。不过对于仅有一两个单词的短标题而言,就容易识别多了。

另一方面,短标题使用小写字母会显得不够饱满,这个时候使用大写字母能够让它在视觉上更加突出。

相应的,在使用全大写的短标题当中,适当地拉开字间距,能够增加呼吸感,降低压迫感。

 

5.如果能让你的标题更加简短明了……那么就这么做吧!

如果可以的话,标题尽量简短有力一些。

比如「It’s your style, and your way」这样的标题可以直接浓缩为「Your style. Your way.」。

这样的标题更容易阅读,也更加有力,更容易被消化和感知到。

当然,这样的文案设计技巧是需要根据行业和领域进行优化的,这个方法并不适用于全部领域。

 

6.选字体的时候,尽量选择有很多不同字重的

你所下载或者购买的字体,是否有很多不同的粗细/字重/样式供你选择?

如果你有的选,尽量购买或者选择那种有很多不同字重的字体族。如果这款字体只有一种字重,建议你尽量避开它。

在很多不同的设计项目当中,不同的场合可能会用到不同的字重,如果它只有一种字重,那么你要么只能选择别的字体,要么就需要额外购买,很麻烦。

即使这款字体包含两三种不同的样式或者字重,也足以应对很多不同的需求,创造出有韵律感的设计了。

 

7.选择贴合设计风格和气质的字体

不同的字体有不同的风格。有的字体粗壮有力,有的柔和自然,有的现代而规整,有的友好而舒适,有的则有趣且俏皮,等等等等。

每种字体都有不同的气质,你需要把握字体的气质特征,有意识地总结这些属性,当你在应对不同的设计项目的时候,能够快速找到气质贴合的字体。

这似乎是一项艰巨的任务,但是从长远来看,能够帮你更快地搞定各种设计问题。

 

结语

很多技巧都不复杂,甚至称得上是微不足道。但是如果用好这些小技巧,能够让你的设计事半功倍。

 

原文地址:marcandrew.me

译文地址:追波范儿(公众号)

作者:Marc Andrew

译者:terechen

转载请注明:学UI网》这7个小技巧快速帮你改善UI界面

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



智慧工地上的阿里云数字设计

seo达人


为什么是工地?

此时的笔者,站在阿里云EFC的落地窗前,目力所及的城市,只由两部分构成:高耸的楼宇,和楼宇间的工地。

为什么是工地?

因为如果建筑里有城市的现在,那工地里有城市的未来;

过去数十年,让整个中国变成一个大工地,而现在这个大工地,正一步步完成数字化转型。

工地的数字化,是产业数字化转型的重要一环,这一环所联结上的,是数十年的高速发展中粗放的建筑开发模式带来的诸多问题:工地安全事故、建筑质量问题、管理信息化缺失等等。而物联网的硬件基底、云计算的弹性资源、人工智能的智慧技术相结合下,正孕育着新一代的智慧化工地信息管理解决方案。

阿里云智慧工地AI服务平台,便是阿里云A组空间智能面向在建工地的一款智慧施工和验收的产品,结合视觉、语音、文字等AI技术,对项目现场采集到的传感器数据进实时分析和预警,智慧度量施工品质、智能识别项目进度、多维数据评估工地风险等级,让工地少出事,管理更轻松。
设计上,我们结合阿里云AI LAB(阿里云人工智能实验室)的BIM模型智能生成技术,以及阿里云设计中心自研的GDS WebGL图形技术,实现了实时、三维、全景的数字工地可视化,为智慧工地产品赋予了更震撼的视效和更高效的信息展示。
这时,熟悉可视化设计领域的朋友会说了,这不就是个大屏吗?
是的,你可以说这就是个大屏。
但在阿里云设计中心GDS的能力加持下,我们既达到了高定制项目级大屏的视效效果,却也保留了浏览器端的高性能渲染和高复用性,从而形成和同类产品的代差优势。

什么是GDS?全称Generative Design Studios,取意生成式设计。它是一个 WebGL图形技术基础能力,是由阿里云设计中心自研的一个JS代码库,可高效复用与迭代于多种实时计算的特效。它用算法思维去做设计,专注在解决渲染层的图形技术与视觉效果问题,通过参数、配置接口化去反应设计、逻辑、功能之间的响应关系,对基于WebGL的图形开发做中台能力支撑。

简单的说,GDS生成的3D场景:
它不是那种建模一星期渲染三小时、在专业的一体化软硬件下勉强达到30帧/秒的“游戏级”大屏;
它是那种建筑BIM模型智能生成、大屏级视效实时渲染、同时在消费级电脑上流畅运行60帧/秒的“产品级”大屏;
而为了达到这一点,我们做了三件事情:

 

从智能生成的BIM模型,到高性能的glTF模型

传统的建筑模型生产严重依赖人工建模,高成本且难以规模化。而BIM建筑信息模型(Building Information Modeling),通过人工智能与计算机算法将CAD施工文件进行解析,并智能生成1:1高还原度的3D建筑模型, 为智慧城市等创新与数字管理产品提供更智能的模型来源。
在智慧工地中我们率先使用阿里云AI LAB的BIM技术生成工地的主楼宇模型。

同时,由于智慧工地的客户端最终是一款在浏览器里运行的SaaS级产品,3D可视化部分全部由WebGL技术实现的实时渲染(Real-time Rendering)。在浏览器端,为了出色性能表现,需要专业的设计手段对于模型的Mesh(3D多边形面体),Vertices(节点)以及Faces(面数)进行极高要求的优化与减面,才能使产品能够高性能地应对庞大的3D场景实时渲染,并达到生产标准。

实时渲染是指屏幕上呈现的图形是一直在不断计算,100%通过代码成像,它能达到60帧/秒代表性能卓越与流畅。实时渲染的动画并非3D软件渲染输出的视频动画,因为它是通过代码在实时运行,所以对于参数化、动态生成、样式切换、互动事件与操控绑定,以及联动实时数据方面有着视频动画不可替代的优势与价值;

实时渲染,每一个模型的节点都会牵涉到性能。我们亦使用Blender 3D软件进行BIM模型的进一步优化,以及对于UV、贴图等3D开发的前期设计工作进行处理。最终模型质量优化率达到95%+,产出WebGL开发渲染所需的高性能 glTF(Graphics Library Transmission Format)模型。

— 智慧工地通过GDS生成的3D场景线框与高性能表现的低面节点数

 

三维地理场景自动化代码生成

要搭建一个真实的工地场景,只有主施工楼宇模型还不够,还需要还原工地周边的城市场景,让空间更加真实和立体。通过GDS的内置能力,除智慧工地的施工楼宇模型之外,周边所有地理和城市场景,都是100%通过代码直接生成的。简单来说,整个城市的三维建筑,不再依赖于人工建模与贴图,通过图形的计算,就能把3D场景、样式用代码生成出来,这大大提高了生产力。

— GDS 全参数化100%代码生成的城市楼宇元件与地形元件,实现去人工、零手工模型贴图

传统的大屏工作流中,真实的城市环境生成,强依赖于城市GIS地图卫星数据,这有着很高的采购和接入门槛。而在GDS的图形能力中,我们需要的只是一张简单的公共地图图片:施工中的工地是没有GIS地图卫星数据来源的,我们从公共数据(e.g 高德地图)获取到工地的片区图,用设计工具勾勒出地理位置概貌,将其转换为SVG色块,再通过GDS的解析脚本算法,把SVG形状换算为3D空间的相对位置坐标,用于3D场景的几何生成。

— GDS解析地理场景,把SVG点位换算为3D生成所需的分层几何数据

 

— GDS解析不同数据,对应生成不同3D场景。无需人工建模、大量提效

 

在消费级电脑上实时渲染大屏级视效

所有人都喜欢酷炫的视效,但酷炫的视效总是需要价格不菲的硬件支撑。在智慧工地项目中,同样基于GDS针对城市场景的高度优化和高性能,代码生成的大屏级的视觉效果得以实时运行在更多更广泛的设备平台上。
在设计智慧工地的可视化中,为了达到更好的视觉特效,我们所有的材质都来自GDS的多种Shader(图形着色器),包括实时计算的环境映射模拟(HDRI Refelection)、车流道路模拟、根据深度计算的漫反射阴影(Depth-based Soft Shadow)、SSAO、极光聚焦特效和进度指示器等等,通过自研的Shader等技术方式,最大化与最灵活的达到理想的设计效果。

— 实时数据联动施工进度演示

代码生成的设计,原生也让我们有了更多设计上的可能性,比如:参数化样式可秒级切换;
智慧工地可视化原生集成了参数化配置,且拥有极高的复用性与易于迭代。目前GDS提供了数套不同风格的样式配置预设,在样板间中我们可以看到整个3D场景的风格无缝切换在秒级速度中智能完成。利用参数化风格的原理,我们也可以联动实时数据,零成本、智能地实现深色、浅色、日夜的不同风格切换。

除了基础的建筑模型展示之外,还有诸多业务信息也要进行可视化呈现,例如施工进度、施工现场传感器状态、天气信息、报警信息等。这些数据并不是生硬地以二维图表传统的数字呈现,而是通过不同视效的表达融合在三维场景中。这样一个基于“真实业务场景”的三维工地,才是一个与现实同步运转,实现视觉表达、数据流转和人机互动统一的数字平行世界。
基于传感器数据的计算机视觉智能识别是智慧工地产品的核心能力,我们通过上文提到的GDS地理位置解析与计算,可以映射出施工现场传感器设备的相对坐标,实现在可视化中联动设备的挂载。结合阿里巴巴达摩院的视觉智能识别等多重技术能力,工地中每一个传感器设备的状态,报警等信息都可以在三维场景里一键点击获取。

— 传感器设备在3D场景中通过坐标换算进行挂载

THE SMART

CONSTRUCTION SITE

BY ALIBABA CLOUD

TECHNOLOGY

 

— 阿里云智慧工地样板间演示

 

如果说以上还更多是视觉和技术的展示,那接下来的问题是:

 

我们为什么从设计出发,却要不断突破边界,去追求技术、性能和设计表达上的极限平衡呢?

因为海和山就在那里。
〇 海是蓝海。
2018年,我国智慧工地行业市场规模就达到99.1亿元,同比增长24.03%;与此同时,全国95%以上的工地仍处于原始状态。粗略估算,国内整个智慧工地市场规模容量可达上千亿元。

市场的规模只是一部分,建筑业的务工人员,数以亿计。国务院安委办通报显示,建筑业事故总量已连续9年排在工矿商贸事故第一位,事故起数和死亡人数自2016年起连续“双上升”。解决工地数字化的问题,也是在解决施工安全和施工质量的问题。

 

〇 山是高山。
智慧工地的普及,难点之一是效率。市场中常规的智慧工地产品往往以定制化项目的形式进行交付,每覆盖一个新的工地场景,都需要针对性的从头进行三维场景的设计和搭建,时间和人力成本巨大。

而智慧工地借助BIM模型自动生成及GDS的代码生成能力,最大程度节约了人工环节的耗时。参数化配置的视觉样式,也能无缝在任何一个项目中使用。

目前阿里云A组空间智能智慧工地AI服务平台已经成功落地阿里内外多个项目,并被10家以上智慧工地集成服务商集成,正面向全国各地的工地进行全面应用,驱动传统行业数智化。我们希望设计能力的植入,能为行业提供一套标准化的三维场景搭建方案,缩短项目开发时间,保证高复用性,并借助生态伙伴的力量,真正实现规模化的智慧工地产品。

所以,为什么是工地?

仔细看,那一片片智慧工地中的,是襁褓中的智慧城市。

 

原文地址:阿里云设计中心(公众号)

作者:阿里云设计中心


转载请注明:学UI网》智慧工地上的阿里云数字设计

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

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

存档