首页

用一篇文章,帮你了解什么是虚拟数字人?

seo达人



1.数字人的三方面特征

虚拟数字人是指具有数字化外形的虚拟人物。与具备实体的机器人不同,虚拟数字人依赖显示设备存在,我们所知的很多虚拟人都要通过手机、电脑或者智慧大屏等设备才能显示。

图片

虚拟数字人宜具备以下三方面特征:

  • 一是拥有人的外观,具有特定的相貌、性别和性格等人物特征;
  • 二是拥有人的行为,具有用语言、面部表情和肢体动作表达的能力;
  • 三是拥有人的思想,具有识别外界环境、并能与人交流互动的能力。

综合来看,就是具备四方面的能力,即形象能力、感知能力、表达能力和娱乐互动能力

如果我们下次再看到有公司推出数字人,就可以结合这些特征和能力来判断这个数字人的可信度,避免被借势营销的企业钻了空子。

 

2.数字人的运作原理

知道了什么是数字人,接下来就要搞清楚数字人到底是怎么说话、互动的,是背后有真人在操控,还是完全通过技术生成。

面对新兴的数字人,相信很多读者都存在类似的疑问。

数字人的诞生发展和AI人工智能可以说是密不可分,想了解数字人的运作原理,首先要知道数字人的通用系统框架

虚拟数字人系统一般情况下由人物形象、语音生成、动画生成、音视频合成显示、交互等5个模块构成。(资料参考: 2020年虚拟数字人发展白皮书)

图片

交互模块为扩展项,根据其有无,可将数字人分为交互型数字人和非交互型数字人。

首先看一下非交互型数字人:系统依据目标文本生成对应的人物语音及动画,并合成音视频呈现给用户。

图片

交互型数字人根据驱动方式的不同可分为智能驱动型和真人驱动型。

图片

 智能驱动型数字人:通过智能系统自动读取并解析识别外界输入信息,根据解析结果决策数字人后续的输出文本,驱动人物模型生成相应的语音与动作来使数字人跟用户互动。

这种人物模型是预先通过AI技术训练得到,可通过文本驱动生成语音和对应动画,业内将此模型称为TTSA(Text To Speech & Animation)人物模型

 

图片

 真人驱动型数字人:真人根据视频监控系统传来的用户视频,与用户实时语音,同时通过动作捕捉采集系统将真人的表情、动作呈现在虚拟数字人形象上,从而与用户进行交互。

 

3.数字人常见的类型

调研分析当前市场上的数字人,根据人物图形维度,分为2D和3D两大类,从外形上可分为卡通、写实等风格,综合来看可分为二次元、3D卡通、3D高写实、真人形象四种类型。

图片

接下来根据每种类型的特点,从外在形象、服饰装扮、表情动作等方面,结合典型案例来逐一分析虚拟数字人的设计。

 

二次元类型

虚拟歌手-洛天依

图片

洛天依的职业设定为虚拟歌姬,个性软萌可爱、温柔细腻,外貌特征上是灰发、绿瞳,头戴碧玉发饰。

图片

 除了独特的形象和性格,洛天依还能唱歌、跳舞、直播带货,多样的才艺加持让人物设定不单薄,受到很多用户的关注。

 

3D卡通类型

虚拟助理-度晓晓

度晓晓是基于虚拟人IP的陪伴型虚拟助理。在小度助手的能力基础上,度晓晓有虚拟人物形象和情感交互系统,具备视觉识别能力,支持自然的交流方式。

图片

 在外形装扮上,度晓晓是红色短发的甜美可爱风,五官比例偏向二次元风格。根据现有案例来看,度晓晓在眨眼、微笑等面部微动作以及肢体的造型,都很自然、生动,整体设计效果相对较好。

 

图片

 度晓晓定期更新身穿不同主题服装、摆着各种pose的形象,每套服装都有一个主题再带配上各种周边小配饰,营造出一种清新时尚的效果。

 

3D高写实类型

浦发银行数字员工-小浦

小浦作为银行的数字员工,主要进行风险评估、要闻播报、投资建议等在线服务。

图片

▲ 从外观上,小浦在形象上无论发型还是五官都足够拟人化、职业化,穿着银行职业装,属于比较典型的银行职员形象。

 

图片

▲ 小浦没有很夸张的面部表情,始终以面带微笑的状态面向用户,给人一种亲切感。肢体动作相对较少,没有特别夸张的动作设定,只有固定的几套动作。

 

虚拟偶像-AYAYI

AYAYI是使用Unreal引擎造出来的特别拟真的Metahuman形象。

图片

▲ 外在形象:写实程度更高,人物整体效果已经和真人十分接近,五官特别精致、眼睑微敛、银色短发,散发着一种清冷气质。

 

图片

▲ 从AYAYI社交账号的更新来看,目前主要是分享一些AYAYI的摆拍图片,穿着的服装、饰品都比较真实、时尚,拍照环境都是休闲、艺术类的场景。

 

图片

▲ AYAYI人物形象的时尚感和真实感,更容易切入商业化,比如穿着特定品牌的服装进行摆拍。

 

高保真数字人-Siren(塞壬)

图片

Siren是高保真、实时、可交互数字人,用到了实时渲染、表情捕捉、动作捕捉、高保真3D扫描等前沿技术,达到了目前业界最高的技术水平。

图片

▲ Siren的面貌细节更加真实,可以很清楚看到皮肤的细节眼睛的转动说话的神态、脸上各种各样的细纹。不管是毛孔、细纹等皮肤质感,还是神态上的表情,都很像真人。

 

图片

▲ Siren在说话时嘴唇动作自然,效果真实。

之所以有的数字人看起来不自然,很大一部分原因是因为数字人面部表情不生动,特别是在说话时嘴唇和脸部、牙齿甚至舌头的联动,很容易出现动作不联动、不真实的情况。

 

真人形象类型

新华社AI合成主播-新小浩

图片

“新小浩”是无论外在形象、面部表情、服装搭配、说话声音,还是肢体动作上,都是完全基于真实主持人生成。

图片

通过语音合成、唇形合成、表情合成以及深度学习等技术,克隆出具备和真人主播一样播报能力的“AI 合成主播”。

图片

▲ 我们每天都会遇见各种各样的人,即使脸上最细微的表情,我们都可以感知到,用计算机打造出来的表情,往往缺乏灵气

真人形象的虚拟主播的优势在于,他的特征都是来源于真人,呈现的面貌和状态更容易被用户了解。如果不仔细看,可能分辨不出是不是真人。

 

4.数字人的应用场景

目前国内市场上已经出现了非常多的虚拟数字人,在各行各业中有着广泛的应用。

虚拟数字人技术结合实际应用场景领域,切入各类,形成行业应用解决方案,赋能影视、传媒、游戏、金融、文旅等领域,根据需求为用户提供定制化服务

图片

按照应用场景或行业的不同,已经出现了娱乐型数字人,如虚拟偶像、歌手、网红、虚拟代言人等;

图片

助手型数字人,如虚拟客服、虚拟导游、智能助手。

图片

主播型数字人,如虚拟主播、虚拟支持人等。

图片

这里搜集的案例只是虚拟数字人的应用的一小部分,还有很多优秀的应用案例等待着大家去一起发现。

 

5.代表性的研发平台

国内有很多互联网平台在研发虚拟数字人,我也从中收获了大量的信息和资料,这次把这些平台分享给大家:

  • 搜狗AI开放平台
  • 网易伏羲、网易易现
  • 百度AI开放平台
  • 腾讯云、腾讯NEXT Studios
  • 讯飞开放平台…

 

设计夹把这些网站进行了汇总,如果大家想了解更多关于AI人工智能、数字人和最新科技的发展,可以去公众号后台获取网站链接~

领取方式:关注公众号,后台回复【数字人】领取虚拟数字人网址链接汇总

图片

慢慢来比较快,希望对你有所帮助!

 

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

作者:Clippp

转载请注明:学UI网》用一篇文章,帮你了解什么是虚拟数字人?

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

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

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

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


如何系统化的思考设计改版?

seo达人



1.为什么要改版?

如果你已经开始工作了,那么对于设计改版你应该不陌生。改版目的是为了优化产品体验,增加品牌粘性,提升数据转化。

一般情况下,产品在一年中至少会有一次大改版。其他情况下不会特别大的变动,毕竟每次改版都是会影响数据的变化,领导也不敢随便冒险。

那么到底什么情况下会改版?下面看一张图,就一目了然。

图片

从上图看出,通常在这些条件下,公司业务层、用研侧、设计侧驱动、年久未迭代、产品需求出发,企业基本就会做设计改版。

这里简要说下用研报告,用研团队和设计配合完成一份研究报告。那么这份报告里面就会有用户对产品主观评价,和测试过程中发现的一些体验问题或者产品问题,这些关键结论可作为设计改版的依据。

如果你在的团队有会每年都去改版,那么恭喜你,要好好把握每次机会,改版最能锻炼设计师的时候,也是设计师价值体现,平时小迭代版本真的就像小修小补一样。

 

2.改版中常出现的问题

  • 目标不清晰或者说不知道如何推导

在启动改版过程中,很多设计师不清晰设计目标,要达成什么要的效果。从大家作品集逻辑推导中就能看出,比如,很多设计师的目标关键词常出现的情况是:简洁、清晰、高级等等,我们可以想象下这样的词汇,是不是对任何产品都能用,没有体现出产品要真正解决的问题。

那么对于设计目标来说,我们应该从哪几个维度思考?

图片

在一般情况下,可从以上四个大维度去挖掘设计目标。设计师首先就需要对每个目标充分理解,最好能和老板、产品、领导对齐各方向目标后,开始去拆解可量化的设计目标。

这里补充说明下,如果只是单纯的视觉层面的改版,是很难得到多方协同支持,而且价值意义不是很大。所以,改版一定要挖掘出对产品产生明显影响的问题。

  • 不知所云的用户画像

在包装过程中,如果你只懂皮毛的用户画像,还是尽量不要把用户画像东西放进去,没有多大意义。放进去反让人觉得你是套模板,大家可以看看大厂公众号中改版文章,几乎很少看到用户画像。

那么用户画像一般什么情况下会出现?比如是0~1设计启动,这时候是需要细分人群定位,但是在设计侧角度来说,建议别放,除非你对这块非常懂。

 

3.设计改版流程

虽然网上流传出很多各种经典设计思维模型,比如斯坦福大学设计学院设计流程、尼尔森诺曼集团设计流程等,这些都大同小异。在真正做的过程中,还会有很多问题出现,我们还需从实际情况出发,遇到问题解问题。

图片

上图就是一个大致的改版设计方法,从洞察问题、目标确定、发散收拢、方案探索、结果汇报、推动落地等6个步骤,每个步骤都有很多事情要做,所以设计改版真的是一个很庞大的工程。

除了我们日常工作中这样去推进,在包装作品集思路时,也是可以使用这样的流程去思考,只是可以去掉最后两个步骤。

 

4.写在最后

前面有说到,我们真正在改版过程中可能并没有很顺,会出现很多突发状况,这也是考验设计师是否会灵活变通。最重要的一点是在启动项目的时候,不要单点去看产品的问题,最好能系统的思考和业务方对齐关键目标,找准发力点,循序渐进,这样也是为了减少设计过程中的返工问题,或者考虑不周的情况,不然会有失专业水准。

设计师路还很长,我们都需要在过程中学习成长,通过实战提高思维应变和设计能力,通过设计驱动价值体现。

 

原文地址:功夫UX(公众号)
作者: Tony
转载请注明:学UI网》如何系统化的思考设计改版?

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

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

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

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

干货预警 | 什么样的设计是潮设计?

seo达人


图片

 

这个主题其实我很早就想讲了,因为我发现很多设计师的惯性,经常会去X瓣X站里面找找当下流行的风格直接拿来使用,但却并不了解这些风格的本质和设计含义,抄到最后就是四不像,它不能成为你思维和能力提升,反而会让你对很多设计的见解处在表面停滞不前。

所以这次用时代来切分所有关于潮的风格,一次性全部讲给你们。今天的文章内容较多,记得点赞收藏本篇文章,以后你们会感谢我的。

 

图片

图片图片

 


我们先来讲第一阶段,国风与民族文化

图片

图片

 

其实国风不仅仅是我们中国人对本国民族文化的一种解释,每个国家都有着自己的国风,比如希腊文化、罗马文化、玛雅文化等等。国风我们分为传统、古典、现代。传统对应的是水墨丹青类型,古典对应的是中国历代的朝代与民俗类文化,现代对应的是线条描边和色块涂抹等方式的画面展现。

图片

 

中国传统绘画以笔法为主导,充分发挥墨法的功能。墨的浓淡变化就是色的层次变化,其泼墨与挥洒的笔墨之间流淌着豪迈和情绪化的特质,并且百试不爽,你可以把今年电影海报拿出来看下,10张有5张都是毛笔字体或者水墨类型的。

而丹青,在现代设计时可以使用颜色的透明度的变化来增加画面层次,让整个作品清淡、素雅,更适合展现出一个画面的优雅和细节特质。相比之下水墨粗狂豪迈,丹青更显雅致飘逸。这点你在众多古装剧里看画风、看服饰颜色很容易能感受到其中的意思。

图片

水墨丹青所需组成的部分,毛笔字、水墨、山水、彩绘等。

 

图片

 

在中国传统文化中,国风也是有很多不同领域的范畴,比如中国传统文化+古典+唯美=古风,武侠剧风格和服饰居中,也有江湖快意恩仇!

而中国传统文化+古典+小雅=雅致,更突出中国特有很多元素,被现在大量用到电商和产品包装的设计中。

中国传统文化+古典+大气=国风,大气磅礴,雄浑有力,电影或者大画面毛笔字使用,张艺谋之前的很多古装电影就大量使用的这种。

图片

 

朝代组成的部分,如壁画、宫廷建筑、服侍、花鸟、动物(比如龙、凤、鹤)、祥云等等。这里我要补充的是很多人一说这个宫廷风,就联想到了清朝的紫禁城,这其实不是完全的,只是说清朝整个建筑和图案性的颜色比较鲜艳,更适合现代化的融合,但其实如果你想展现不一样国风的话,应该是将朝代的特质多去了解。

图片

比如我们为什么不用唐朝的元素来做一个唐朝的风格呢,例如还有汉朝的、明朝的、宋朝的等等,这些都是代表着中国不同时期的朝代。

图片

 

当你去设计不同朝代的风格时,搜集他们朝代的服饰、建筑、器具上的图案花纹,然后临摹出来,这些就是最好的素材和设计参考图。

比如我们看上张唐朝图的左右对比下,色彩、服饰上的元素几乎就是直接挪用的。当你参考这些图案时,最好先去了解下这些本身图案的意思,古代的设计图案时就跟我们现在设计LOGO是有故事和含意的。

图片

比如上面的清代文官官服九品练雀,下面的是清代武官九品海马,代表着不同的官品阶位。

 

 

图片

 

除了朝代其实还有各民族的文化都可以为我们的设计吸收出更好的创意来源,而这些图案的设计大部分都是来自于他们的民族象征的图腾、服饰图案、头冠花纹等等,比如之前花西子就有一款产品就是用的民族的文化去设计的,就非常有特征性。

这里我补了小知识,其实这些民族在很早的时候都是国家,只是后来衰落经过迁徙后变成了民族部落,比如傣族,公元1180年左右,现今西双版纳一带的傣族领袖建立了景龙金殿国,简称景龙国, 比如苗族的历史可以追溯到5000年前的蚩尤九黎部落。光一个图案有的时候就能追溯到很多的故事和历史文化中,可见中华民族的瑰宝是一个可以可以源源不断发掘的历史。

图片

 

国风的现代风是舍弃了其他风格中烦琐的图案和形式,因为注重线条和色块拼合的使用,勾描形象而不藻修饰与渲染烘托的画法,配以古朴配色和纹理,呈现出最具中国传统特色的国潮,大量被用到插画与设计融合的海报中。

图片

当然国风里面还有一些民俗文化,比如戏剧、剪纸等等丰富的民俗带来了大量独特的文化象征:中国红、灯笼、福字、年画、锦鲤、红包等等。

图片

新现代是将国风其中的某单个元素放大化,表现极为现代手法,国风中商用化的最常用的风格。

图片

有没有发现国风比你想象中更复杂,也比你想象中有更多文化和元素的挖掘,这些随便融合到现在的设计中都是潮的代表。

 

第二阶段黄金年代

图片

 

黄金年代,其实就是对过去一种怀旧情节与形式主义运动的一种复古文化。但可别小看这个黄金年代,你去各大设计网站上搜索下,就知道没有黄金年代,就没有我们现在的市面上那么多的先锋设计。

图片

 

赛博朋克早80年代中期发展成为的亚文化,甚至一跃成为了主流文化的一部分,包括现在X音经常教调色赛博朋克、或者AE后期做成赛博朋克街道,前段时间赛博朋克2077游戏的流行等。

图片

赛博朋克给人一种虚拟、科技、扭曲、智能的感觉,是因为在上世纪60、70年代,二战后期的冷战和中东战争集中爆发加上工业后科技时代的带来,导致整个世界处在一个黑暗压抑,科技爆炸,环保污染严重、人情社会冷漠的时候,所以这个时候人们渴望科技未来的发展,又对整个世界恐惧,当矛盾和冲突不断是创作科幻艺术绝佳的一个形成因素。

你看到的很多风格,就像每一幅艺术家留下来的遗作,都有着代表那个时代的悲凉和无奈,人们只能通过某种形式是展现出来,于是绘画,音乐、电影成为了人们最主要的情绪宣泄方式。

 

图片

 

赛博朋克在设计上的表现形式往往以蓝紫的暗冷色调为主,搭配霓虹光感的对比色,用错位,拉伸,扭曲等故障感图形体现电子科技的未来感,加街道大厦建筑等,很符合现在年轻人标榜自我的价值观。

图片

 

蒸汽波是赛博朋克文化的一种衍生,风格中充满了故障、古典雕塑、80年代动画形象、马赛克、电子、光碟拼合的一种无实物感形式、蒸汽波平面设计风格,是在网络诞生的流派。

图片

 

蒸汽波的图像,在2010年代初在分享网站已经普遍散播。它宣扬对复古文化,怀旧文物和批量生产的怀念,当然还有对消费资本主义和流行文化的技术,上世纪80年代嬉皮士文化的批评和讽刺。

图片

在商用上,娱乐性产业在这种风格上的使用上尤为明显。

图片

 

Y2K 就是 2000年,俗称千禧风。人们在当时把未来的世界幻想成了一个信息科技极为发达的梦中乌托邦。

图片

 

风格经常出现技术不成熟的科幻场景、复古与未来感。围绕未来元素、夸张亮色、金属、科技、透明、PVC。但是你可以找找2000年的画风,纯画风放到现在其实是不够商业化的,需要我们用现代化的设计和其他风格进行一定的融合才可以。

图片

设计是艺术化的商用呈现,所以涉及领域不能片面化,应该广泛化和吸取百家之长,任何设计的成功都不是一个领域造成的,一定是融合。

图片

 

哥特式(Goth)最早是文艺复兴时期被用来区分中世纪时期(公元5-15世纪)的艺术风格。

图片

 

以死亡、颓废、古堡、吸血鬼、蝙蝠、红玫瑰、十字架、建筑、哥特式等为标志性元素,由于本身存在的黑暗特质,色彩及元素不便于商业化,但其哥特的字体却被大量使用。

图片

哥特式的来源在于禁欲与死亡。人类认为以自由精神来超越对死亡的恐惧和困扰,通过艺术的表现可以将死亡的恐怖转化为美感。蝙蝠侠三部曲就是典型的哥特式风格代表,重金属摇滚人最爱的风格。

 

图片

 

像素风格属于一种形式的数码艺术 ,像素是组成电脑数位影像的最小单位。放大后的这些小方块称之为像素(Pixel),核心在于早期游戏机的画面,是一种图标风格的图像,更强调清晰的轮廓、明快的色彩,几乎不用混叠方法来绘制光滑的线条,同时它的造型比较卡通。

图片

组成部分:像素化,轮廓清晰,卡通,刚结束不久的创造营综艺节目就是用的这样的风格。

图片

 

波普风格是发源于反对高端艺术和精英主义阶层的艺术运动,采用大众更容易接触的信息和画面体现,招贴画风格的一种。

图片

 

比如波点元素、漫画风格、重复图像、手写体、夸张明亮的色块碰撞等。

图片

 

早期奇葩说就是用的这个风格,顺便推荐几个综艺节目的视觉设计,一定要去看看里面不管节目场景还有一些物料和展示的设计,对你真的有帮助《热血街舞团》《奇葩说》《即刻电音》《乐队的夏天》《哈哈哈哈哈哈》等。

图片

 

拼贴风格的英文其实就是胶水的意思,艺术的起源是立体主义绘画运动的创作。

图片

 

模糊了艺术中真实与幻象的区别,企图打破二度平面的绘画,制造空间虚实的视觉效果。拼贴是一种比较随性的一种表现,它可以是不具任何意义的,自己觉得不错就行了。

图片

 

民国风格,20世纪30年代是民国设计最辉煌的时代,商业与文化剧烈碰撞,汉文化与西方文化融汇,创意、美学表现极其丰富。

图片

 

品牌名和产品比例最大,信息类文字较小,文字包围在图案四周;也有一些广告将文字置于画面四周的框框里,色彩不会使用亮色和过饱和性,其版式编排与维多利亚风格非常相似。

图片

第三阶段黄金年代。

图片

 

时代驱使现代,时代变化最大的特征是在于审美与认知的改变,还有一个更重要的原因就是,越来越商业化。

图片

 

极简化平面设计风格的核心是围绕信息内容本身而呈现的,去风格化设计。

图片

 

设计不再作为独立于内容之外的元素存在,而将着眼于内容本身,为用户打造直观的视觉体验。

图片

 

减少干扰,让信息有效传达给用户正是极简化设计所推崇的,负空间、增加留白,极简线条、减少颜色以及不必要的装饰等手段在设计中体现。

图片

 

孟菲斯风格打破正常的配色规律,使用多种鲜艳明亮的色彩,构图上大量运用集合线条图案,运用黑色的描边结合直线、波浪、3D图形。

图片

草莓音乐节连续好几年都是用的这样的风格,其实跟更重要的原因是轻量化,因为现代碎片化的信息,人们越来越没有时间或者不想再去看太复杂太有深度的东西,导致了当下轻量化设计的流行。

 

图片

 

还有关于倍速播放、轻量化设计、图像设计更娱乐化更是折射了当下经济结构、年轻人生活方式、高速互联的普遍、碎片信息,躺平原因等社会时代因素的缩影。

图片

 

MBE风格,标志性的人物就是来自法国巴黎的设计师MBE。

图片

一般是以粗而圆的线条勾勒轮廓,这一点类似于简笔画,也类似于单线条画。越粗的线条在表现力方面会越接近可爱感,线条的转折过渡很圆润,几乎看不到尖锐的直角。

图片

 

填色方面的特点非常明显,填色的色块要偏移原有轮廓一些,以此来塑造高光和阴影效果,其实这个风格跟孟菲斯的手法是非常接近的。

图片

 

立体主义,将物体以不同角度置于同一个画面之中,表现出对象完整的形象。

图片

立体主义创作的主要特征,即在画面上将一切物体形象破坏和肢解,然后再加以主观的拼凑、组合,以求所谓立体地表现出物体的不同侧面。就是在平面上表现出二度和三度空间。

图片

 

毕加索和布拉克就是立体主义的代表性人物。

图片

 

欧普艺术是利用人类视觉上的错视所绘制而成的绘画艺术。因此欧普艺术又被称作“视觉效应艺术”或者“光效应艺术”。

图片

 

是利用人类视觉上的错视所绘制而成的绘画艺术。它主要采用黑白或者彩色几何形体的复杂排列、对比、交错和重叠等手法造成各种形状和色彩的骚动,有节奏的或变化不定的活动的感觉,给人以视觉错乱的印象。

图片

 

欧普平面设计风格就是要通过设计达到一种视知觉的运动感和闪烁感,使视神经在与画面图形的接触过程中产生令人眩晕的光效应现象与视幻效果。

图片

 

极繁主义,平面设计风格繁琐、华丽的设计风格,运用大胆的颜色,尝试各种复杂的图案,构建迷幻主题。

图片

“有序的混乱”是一个绝妙的极繁设计手法。各种色彩和图案的重复组合能够有效吸引观众注意并传达设计信息。但由于极繁设计的前期整理、耗时过长,画面极其杂,商业操作复杂一些,很多设计师都不愿意去做这样的设计。

 

图片

 

新丑风,能在当今浮躁的社会还能坚持去打破设计规则的设计师高田唯。

图片有冲突感的颜色、强制变形的字体,还有故意的印刷偏差和奇怪的排版。

 

图片

这个现在被广泛以及大量的使用,内行看门道,与其他设计技法和设计模式相比,其省时省事的设计方法也迎合这个更加浮躁求速的时代。

 

图片

第四阶段,多样跨界和未来

图片

 

以萨尔瓦多·达利为超现实主义代表,将现实观念与潜意识及梦的经验相融合展现人类深层心理中的形象世界。

图片

可以说梦中的世界,也可以说是一种他认为的心理真实的彼岸世界。这个正是最近想做的一件事情,把梦中的场景绘制或者通过合成的方式放到海报展现出来,生活应该是让设计变得有趣。

 

图片

随着计算机技术的发展推动,C4D的普及带给了广大设计师新的思路,无论是色彩、光影还是质感都更加丝滑。

 

图片酸性视觉的特征就是大杂烩风格,混合了蒸汽波、赛博朋克、超现实主义、科幻未来主义、电子复古、欧普艺术等等的一种融合性设计,组合部分就是镭射金属、霓虹色彩、玻璃质感、哥特字体、锋利的几何图形。

 

图片

由复古迷幻融合到超现实主义的风格,融入了更多“虚无缥缈”和“先进新潮”的超现实主义元素,也是一个在现实中得不到追求的,从梦中获取精神安慰的风格。

 

我们将所有关于潮的时代和风格特征全部讲完,目的不是讲历史和展现风格技巧,而是要明白我们需要学习的其实有很多,未来的设计一定是集风格与领域精华所长融合下的就是潮的设计。

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》干货预警 | 什么样的设计是潮设计?

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

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

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

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


撕开B端封印,数字时代下的可视化构建

seo达人


图片

接下来我会从三个方面来讲解如何构建可视化:

  • 灵感需要迸发,更需要积累
  • 从零到一设计驱动
  • 设计度量

图片

 

一、灵感需要迸发,更需要积累

1.1  数字时代下,99%的问题都是旧问题

数字时代下仍有信息不对称的情况,尤其是关键技术和设计上的问题,但是如果你用心寻找,就会发现你的新问题则是别人很久之前的旧问题了。所以要做个有心人。

图片

但是问题又来了,有时候真的不知道该怎么找、去哪找?这是个很常见的问题。因为可视化不比插画、平面等这些成熟的领域,他是比较小众的,所以灵感以及素材的搜寻是一个令新手设计师头疼的事情,再加上对关键词的熟悉程度不够,导致很多设计师只停留在【可视化】这个关键词里,最后感觉搜来搜去都是见过的图,没有新意。

图片

 

1.2  明确目标,知道自己想要找什么
互联网信息太多了,漫无目的的找灵感,只会浪费时间,一会看到这张图好看,一会看到那张图好看。不知不觉几个小时就过去了。

 

1.3  建立关键词词库

确定目标后,就要细化关键词了。怎么建立关键词词库呢?

关键词词库由3部分组成:终端、设计类型、业务类型。

图片

  • 终端:大屏、移动端、web 等等。
  • 设计类型:每个细分的数据可视化类别都是有一些专有名词的,比如最近比较热门的车载HMI系统,那他的类型关键词就是 HMI。通过这些关键词,你会搜到更精准的结果。设计类型关键词比如:AR/VR、HUD、HMI、FUI等等,你要了解你们公司相关类型的关键词,记录下来。以及跟你们有关联的,都记下来,补充自己的词库。
  • 业务类型:智慧城市、生物医疗、监控部署等等。

这三类单独或组合进行搜索,就会看到更多可视化产品了。把关键词词库建立起来后,就可以去常用的网站上搜索了,最好用的还是 behance 和 Pinterest。

 

1.4  除了常用的设计网站,还有哪里可以看?

企业官网:很多做数据可视化的公司,会在官网展示一些能体现自己业务特点、业务实力的案例,而这些案例就是这些企业最好的数据可视化设计作品了, 所以但凡有案例展示的官网,案列基本都是最典型最好的设计,所以从这些案例中找灵感,也是一个有意思且有效的方法和途径。

 

1.5  你看到了别人看不到的,设计才能有所不同

总结一句话:你看到了别人看不到的,设计才能有所不同。如果你和别人看到的是一样的,你怎么比别人做的更优秀?

图片

 

1.6  兴趣推送

经常刷短视频/新闻网站的应该知道,系统会根据你的点赞、收藏、浏览等数据来给你安排后面的内容推送,以保证给你推送更精准的内容。设计网站亦是如此,behance 等网站上也都是千人千面,它会根据你的点赞收藏等来读取你的喜好,进而推送更精准的作品。所以假设你是一个B端数据可视化方向的,你就经常搜、点赞收藏相关作品,之后你的首页出现相关内容的几率也会变大。

图片

 

1.7  定期清理,更新迭代

最后一点,这个也是好多设计师的通病,收藏即学到。

图片

灵感库要求精而不是多,每隔一段时间,回来翻一翻自己之前收藏的作品,会发现有些作品自己已经看不上了,因为在做灵感收集的过程中,我们的审美会自然有所提高,当输入的作品样本越来越多,我们对作品评价的维度也会更多,之前那些觉得好的作品,现在看来也就会有缺陷和不满,这是一个很正向的结果,成长就是一个不断剔除的过程。删掉那些自己觉得不满意的作品,添加更符合自己当前审美的作品到灵感库里。

这样慢慢完善你的地基,才能更高的向上走。

 

二、从零到一  设计驱动

讲完第一部分,我们开始搭建产品。

我负责从零到一的项目大大小小的得有10来个了,我认为在产品整个产品周期中设计师的话语权最高的时候就是项目初期,是可以做到设计驱动的。既然设计可以有足够的的话语权,你就得规划好未来的设计走向。

产品初期,经常会有几个争议比较大的问题,我们来聊一下。

 

2.1  设计先行还是调研先行?

这是新项目必须要做的选择题,再讲之前你先想一下,如果是你,你会如何选择?

图片

我的观点是设计先行。(当然设计先行是建立在你至少对这个项目的行业有个简单的了解之后,先设计再用户调研),为什么呢?因为如果用户调研先行的话,用户只会反馈当下最想要的东西,从而有可能给你带来误导。就比如我们经常举的一个例子:汽车出来之前,人们只想要一匹更快的马。

我们要解决的不是用户当下想要的东西,而是痛点背后用户真正需要的东西是什么。在 0-1 的这种创造性的项目,往往设计者才是当下最懂产品的人,你把决策权交给一些不懂产品的人,做到最后只能是迷失了方向,锅还是设计来背。所以一开始设计师要把决策权拿在手中,掌握航向。

 

2.2  设计先行还是规范先行?

这个问题在现在看来相对比较统一,但有的同学还是有疑惑,所以我拿出来再跟大家聊一下。

图片

首先我的观点是设计先行,在设计之前就定好规范的基本都是自己YY的,返工率极高。等你在做具体设计的时候就知道之前做的规范都是白费力气了。一般都会选用在项目完成之后或者主风格及主要页面完成后再输出规范,这样既可以减少规范的改动,也可以保证后面功能延用规范,一举两得。

当然了,设计规范不是所有项目都要有的,它是为了减少工作而不是增加工作,如果是一次性项目,就不需要再额外花费精力去输出规范了,浪费资源~

 

2.3  完成和完美那个更重要?

现在都是争分夺秒的时代,任务是无止境的,没有做完的时候。造成这个局面的无非就是一个问题:时间不够用。通常的做法就是先完成再迭代,做产品久了你就会发现,完成比完美更重要,不完美你还可以再迭代,完不成就有可能错过一个风口,从而失去了变完美的可能~

图片

聊完这三个问题,我们在设计的时候也要有一些注意项,真正的做到设计驱动。

 

2.4  把复杂变得清晰简单而且美

对于设计师来说,我们的任务就是把复杂问题变得清晰简单而且美,所以我们应该成为企业和客户之间沟通的“架桥人”。通过设计的方法,把无形的、复杂的技术,通过有形的、可视化的方式展示出来,让客户更直观、清晰的感受到产品的功能,看得懂其在业务场景中产生的价值。

 

2.5  转换视角,建立共鸣

站在客户视角,聚焦客户关注的核心问题,通过情景把内容有序组织起来,快速与客户建立共鸣,有效降低内容理解难度。

 

2.6  产品架构可以不那么复杂

把复杂的业务/功能简单化、傻瓜化,最大的降低学习成本,能帮用户操作的绝不让用户亲自去操作。你要让用户在1分钟之内了解你的产品是做什么的、有什么功能,你就成功了。

图片

 

2.7  大胆隐藏冗余内容

B 端项目中内容量是巨大的,面对庞杂的信息,去粗取精,提炼各场景的核心内容,避免冗余信息阻碍内容有效传达。话术语言不单要简单易懂,还要严格控制文字长度,保证内容可以被快速扫描和理解。

 

2.8  尊重用户习惯

不要妄想改变用户养成的惯性思维,你要记住惯性思维大于设计思维,他的阅读习惯、操作习惯都是不易改变的,不要为了个性化而尝试去改变,大部分情况下结果不会是那么的理想,除非你有极大的把握。

图片

 

2.9  选用合适的图表

这个是常提到的,我就在这里简单给大家提个醒。比如做数据对比,柱状图更能清晰表达出用户想要的结果,你却非要放个酷炫的雷达图,他的本质目的都没达到,要美观有何用?

每个图表都适合哪些场景使用,像 antv、hicharts 等都有介绍,我就不一一赘述了,我之前也写过一篇关于如何合理利用图表的文章,大家有兴趣的可以去看一下。

 

三、设计度量

产品设计的好与坏我们需要去验证、去度量。我们怎么去验证可视化的好与坏呢?

美与丑也是主观的,没有绝对的美,也没有绝对的丑。一个产品,总会有人喜欢有人不喜欢,但是我们要迎合大多数人的审美。

所以就需要一个方法论来验证产品的好与坏,现在各大厂都在做自己的一套产品验证的方法论,阿里在这方便算是国内做的不错的,我举几个常用的度量模型。

  • 阿里云:UES
  • 蚂蚁金服:PTECH与易用度
  • 1688:五度模型
  • 优酷:DES

图片

UES 目前是国内最好的,在 5 月份的阿里设计周上也正式对外讲解了 UES 模型。我拿阿里云的 UES 简单讲一下吧,这么多度量模型,无论他的方法、维度有多不同,但他们的目的是相同的:通过模型来度量设计成果。

  • 易用性:易操作性、易学性、易见性 …
  • 一致性:整体样式、通用框架、常用场景及组件 …
  • 任务效率:任务完成率、任务完成时间、功能使用率 …
  • 性能:首屏渲染时间、API 请求响应时间、页面请求响应时间 …
  • 满意度:产品满意度 …

UES 分为 5 个模块,这 5 项是整个产品生命周期需要验证的。

关于 UES 我就介绍到这里吧,UES 模型要是展开讲的话,半天都讲不完,感兴趣的话可以去阿里云官方发布的 UES 模型的相关资料中深度研究一下,看看适不适合自己的产品。

上面是度量产品的模型,接下来针对我们 B 端设计师,我们也要有一些指标来度量自己是否合格。

 

3.1  设计效率

现在内卷盛行的时代,各大厂都在讲人效,毕竟时间才是最珍贵的,所以现在都在想方设法的提高人效。而且 B 端相对 C 端来说,可以有更多自动化的工具。

举个我公司的例子,我刚去的时候基本没有自动化工具,每个设计师每天也都在忙碌,谁也没偷懒闲着。但是我发现有很多重复性的体力劳动是不需要多少思考就能完成的,但是却耗费了将近 1/3 的时间。所以我就在想如何提高人效,把一些体力劳动用一些工具来代替,这样就能释放设计资产,去做更重要的事情。

当时就做了第一个自动化的工具:设计系统,现在大家对这个词应该不陌生,但是我们刚开始做的时候比较早,还没有一些比较完善的设计系统供我们参考,所以我们也算是前几批摸索设计系统的团队。设计系统做好后是可以把这1/3 的设计时间节省了下来,而且团队的规范性更加统一。

后面的话我们也是做了一些其他的自动化工具,比如结合一些插件做到 icon、组件等发布的自动化,并且与研发同学打通,有相应的自动化提醒工具,这样也节省了与研发的沟通成本。

在工作中,流程上能减少一步就是成功,慢慢来,万里长征就是一步一步走出来的。

 

3.2  增长设计

增长这个词来源于【增长黑客】这本书,顾名思义这个词的就是通过设计来促进产品增长。

这个词用在 C 端上比较多,因为 C 端可验证的方法比较多,见效快,所以我们常见的一些增长设计的案例都是关于 C 端的,而 B 端的话,受限制的因素较多,设计只是影响增长的一部分,而且见效慢。

但是虽说影响因素多、见效慢,我们还是可以抓住机会、多去尝试一些方法来做到设计增长。我这个方法不行,我就换一种尝试。大家都是在摸索中过河~

 

3.3  为业务赋能

所有的设计都是要为业务赋能、为商业买单。我们设计的本质就是为用户解决问题,让用户以最直观的方式理解产品。不要为了所谓“我认为很美”而与业务背道而驰。

 

3.4  体验创新

用户体验设计师会越来越重要,近两年逐步被重视,而且未来几年会越来越重视。行业内需要更多动脑的人而不是仅仅会动手的人。

现在到了互联网下半场,拼的不仅是功能,用户体验的重视程度已经被提升了上来,在工作中的占比也越来越重。

再加上现在这个超级内卷的时代,你不提升,你的竞争对手就把你干掉了。而且你如果只是一成不变的维护老版本,你去下家面试的时候都没有拿得出手的产品。

 

3.5  善用工具

现在各种办公类工具、软件层出不穷,而且很多工具是比较类似的,有的设计师再选工具的时候就很纠结,我认为完全没必要纠结,首先你要明确我想要达到什么目的,只要某个软件满足着你的需求就可以用。

工具是为人服务的,我们的设计软件从 PS – Sketch – Figma,无论怎么变化总要围绕一个目的:更高效的完成工作。

尤其是一些自动化工具,现在人工智能升级很快,要多关注设计自动化方面的工具,让他来解放我们的双手。

 

总结

最后送给大家一句话:

这时代唯一不变的,就是变化。

图片

无论你现在多么厉害,不变就被淘汰。

 

原文地址:友设青年(公众号)

作者:Luckgg

转载请注明:学UI网》撕开B端封印,数字时代下的可视化构建

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

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

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

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


配色驿站-粉色灵感海报

seo达人


谁心里还没有那一抹粉红呢!

粉红色是暖色系,温暖没有攻击力,比正红稚嫩青涩,比黄橘绿更具女人味,又没有蓝紫的冷峻,是这么多颜色中最温和友好的。对小女孩来说是童真娇柔的,对少女是温婉可爱,情人之间也是一种甜蜜蜜最放松最舒适的状态。
马里兰大学的社会学家Philip Cohen调查了1974个人,男女比例均衡。结果发现,男性和女性都很偏爱蓝色,紫红色系,尤其是粉红色,女性则更偏爱。粉色的确是女性偏爱的颜色。  
 
图片  
 
粉色在中世纪是男人的专属颜色,就像高跟鞋本来是给矮个子国王穿的一样。之前认为红色是血的颜色,而粉色便是稀释的血的颜色,所以粉色在曾经是受男人喜欢的,并且认为粉色高贵。  
 

图片

图片

图片

图片

图片

图片

图片

 

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》配色驿站-粉色灵感海报

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

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

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

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



轻奢格调|构建百度直播平台设计语言系统

seo达人


什么是设计语言?

设计语言是把设计作为一种“沟通的方式”,在特定的场景中进行内容与信息的传达。设计是介于科学与美学之间的一种艺术,是需要理性的去解决感性的问题。它和艺术之间的差别就在于“解决问题”。

 

设计语言有哪些?

设计语言最底层是项目设计语言,具有典型特征和主题,比如医疗项目凸显专业冷静,节日项目凸显热闹氛围。往上一层是产品设计语言,强调个性品牌,比如小视频的设计深色更沉浸,电商从结构到色彩都凸显热闹。很多产品随着发展,形成一些系列平台服务,平台设计语言确保服务“统一规范”。最顶层是生态设计语言,跨设备跨平台和硬件呈现的设计语言。

 

百度直播业务,从单一业务形成系列平台服务,囊括的不只是B端和C端用户产品,还有8大垂类蓬勃发展,以及跨业务多宿主的呈现。庞大的平台业务,特别需要建设平台设计语言。

图片

 

如何构建设计语言?

所有的设计语言,都是服务于业务顶层战略发展。制定设计策略前,需对业务所在的行业背景、品牌战略、用户群体、流行趋势有充足的认知。当返工无数次还是没方向时,说明以下前四点需要再深入明确。

图片

 

建立设计原则时(设计语言的标准),不妨尝试把品牌战略人格化,由所有人解决所有人问题的愿景,得出产品是一个解决问题的行业专家的身份,Ta传达的气质是简洁大方的仪表,亲和有力的仪态,和专业权威的素养。

图片

 

设计语言以现代轻奢风格为基调,它大简至美、配色和谐、材质考究,以独具特色的现代格调,构筑起一个充满质感又十分舒适的直播间,给用户一致、友好、有品的体验。

图片

 

设计动手前,按照风格基调具象化拆解分析必不可少,每一个元素的表达手法都要定位清晰。

 

图片

 

01 至简 光影艺术图标体系

在图标的设计中,我们基于专业亲和的品牌理念延展出2个不同的方向。方案一以直线折纸与光影为视觉元素,呈现一个用心专业的态度。方案二以曲线雕刻艺术展现专业亲和的魅力。

图片

 

图标体系化,多场景验证一致性,发现方案一不够极致,造型复杂;方案二具备良好的一致性,但破坏了物体固有的结构,影响识别度。

图片

 

在一致性的前提下,尝试简化、提高识别度。巧妙的将光影和结构交汇,极简到2个图层呈现主体;语义清晰识别度高;角度渐变光影带来舒适亲和感,15°x角度的精准把控传达专业的品牌特性。因此总结出图标绘制要遵循的法则为识别性、品牌性、愉悦性、一致性。

图片

图片

图片

图片

图片

 

 

02 和谐 家族感的色彩体系 

 

a)标准色

初期直播品牌色继承百度App品牌色,随着业务逐渐中台化,需要专属直播色。运用色彩心理学传递给人不同的情绪及心理感受,寻找直播的专属色相,而活力、温暖的红色色调,更能体现亲和有力的产品气质。

图片

红色也有冷暖之分,此时提高色相、饱和度的颗粒度,H色相以350°为起点,以2°递增或递减,S饱和度以5°为阶梯,生成更多色阶(保持相同B明度100),在多界面和真机验证,得出直播专属红(H350 S80 B100),冷暖适中符合平台属性。

 

图片

图片

 

b)协调的辅助色
同时,运用色环建立辅助色彩体系。H色相以350°为起点,以15°递增或递减标准,创建24色相色板(保持相同B明度100、S饱和度80);选取柔和与协调的类似色和邻近色作为家族色彩主体,调和互补色与对比色,平衡整体色调。因为不同色相的感官明度并不相同,校正每一个辅助色的HSB,达到色彩感官上一致。

图片

 

C)调色版
一般会有2种方法,一种是使用明度差获得统一性佳的调色板,优点是落地成本低,代码可直接实现;另一种则是微调饱和度和色相,获得鲜明的色板,可使用在插图绘制上。

 

图片

图片

 

03 考究 新颖独特材质

亚克力,这种具有透明质感、光学品质的材质,在设计领域最早应用在家居设计上,被互联网设计师熟知是在微软的概念视频里,随之逐渐应用到icon绘制上,亚克力1.0版本背景和主体层次没拉开,2.0版本更趋向加大不透明度和模糊值,达到清晰舒适又兼具艺术美感。

图片

 

这种量身打造的稀缺材质运用在运营玩法上,如红包雨玩法,即能凸显平台专业用心的态度,又能强化用户消费行为转化,助力变现增长。 

图片

 

用户激励体系,采用3D玉石润泽质感+动态折射光影,体现有内涵不张扬的泛知识调性,凸显用户独特身份感 
图片 

[优化输出图像]

 

写在最后

在每一个小元素的创作中,我们都时刻谨记,无论是项目的主题语言、还是产品的设计语言、甚至是生态的,终点都是传达企业文化以及价值观。从战略层重构业务的认知体系,再将品牌战略人格化,才能够在茫然期产生真正的笃定感,逐步拆解设计目标和构建符合业务气质的设计语言,达到最愉悦的体验。

 

原文地址:百度MEUX(公众号)

作者:文娱平台用户体验

转载请注明:学UI网》轻奢格调|构建百度直播平台设计语言系统

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

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

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

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


2021趋势,Behance大神都在用的弥散光感教程来了!

seo达人


弥散光感也是今年突然间兴起一种流行趋势,国内外很多设计师在项目上运用这种处理手法,下面我们先来回顾一些网上案例。
图片

上面这种是单色弥散效果,而且还带有一些噪点纹理。

图片

这种思路是通过一边往外延伸,然后慢慢消失的过程。

图片
这种是弥散渐变上面叠加点阵纹理,效果细节也很丰富。
图片
多色混色弥散光感,细节非常丰富,不过对色彩把控要求高,稍不留神就会显脏。
图片
杂志卡片应用弥散光感,起到点缀作用,还能形成亮点设计。好了,下面到了案例实操部分,为大家准备了3个案例,尤其是最后一个,我个人最喜欢。

 

案例实操#1

这里快速给大家演示几种思路,基本上实操一次就会了。

第1步:先准备一个基础的版式,因为弥散光感一般都是以背景的形式出现在画面中,能起到氛围渲染作用。

图片

第2步:准备制作弥散渐变,这里以单色来举例。首先制作第一层渐变,具体参数值,大家领取源文件慢慢查看。

图片

第3步:制作第二层泛白渐变效果,目的起到综合的作用,颜色过渡自然。

图片
第4步:基本两层就OK了,最后再叠加一层噪点纹理,效果看起来会更丰富细腻。这里的噪点肌理我在sketch 里面完成的,也是非常方便简单(大家可以拿着源文件去研究下,一看就会)。
图片

 

案例实操#2

第1步:先准备一个基础的版式

图片
第2步:开始制作弥散渐变
图片

由于这里所需要的弥散效果较大一些,因此这里模糊值需要在ps里面处理,首先画一个圆形,然后使用高斯模糊;然后将其复制一层,然后添加杂色,最后两层叠加起来,就得到如下效果。

图片

 

案例实操#3

第1步:先在ps里面绘制两个基础的圆形,一个大圆和一个小圆。

图片

第2步:然后分别将大圆和小圆使用ps模糊画廊里面的移轴模糊效果,再将两者叠加起来,就得到如下效果。

图片

当然还可以叠加很多层,效果也很细腻。

图片

除了圆形,我们还可以玩出其他花样。

图片

今天分享就先到这里,大家下去可以拿着源文件 自己在玩一下 弥散光感,可以研究出不同的效果。


原文地址:功夫UX(公众号)
作者: 功夫UX
转载请注明:学UI网》2021趋势,Behance大神都在用的弥散光感教程来了!

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

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

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

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

这套圣诞节字体,写得实在太好看了

seo达人


01.  字体素材 

图片

图片

图片

@叁月适合圣诞使用的手写英文字体

f

02.  圣诞素材 

图片

图片

图片

@叁月圣诞节设计素材大合集

f

03.  样机素材 

图片

图片

图片

@是莹莹啊~海报拍摄场景样机

w

04.  样机素材 

图片

图片

图片

@耳東VI场景样机

e

05.  字体素材 

图片

图片

图片

@耳東圣诞节字体素材

t

06.  海报素材 

图片

图片

图片

@素笺书酸性渐变元旦跨年3天倒计时海报

e


原文地址:我们的设计日记(公众号)

作者:叮当猫

转载请注明:学UI网》这套圣诞节字体,写得实在太好看了

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

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

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

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


B端设计指南 – 栅格的使用

seo达人



其实在说栅格的使用,我们就在讨论网页当中的布局方式,以及他们之间的不同点:

 

0.网页的布局方式:

布局方式,本质上就是去处理窗口宽度网页内容的关系。

图片

用户会使用浏览器打开不同尺寸的窗口宽度,而网页内容究竟应该如何去适应这些窗口尺寸?

通常会分为:固定布局、流式布局、自适应布局、响应式布局。

 

1.固定布局(Static Layout)

固定布局是一种最为简单的方式,它的设计逻辑是将页面当中的内容 “写死固定” 在屏幕上,内容不会随着本身窗口宽度进行改变,所有元素都使用 px 作为基础单位。

图片

当然在固定布局当中,窗口大小与页面内容会存在两种基本关系:窗口过大则将页面元素进行居中,窗口过小则展示横向滚动条。

图片

固定布局的好处是这种方式相对简单,只需将页面设计好即可,不会存在太多兼容性的问题(因为也压根没有考虑兼容性的相关问题)。

固定布局通常出现在 老旧的政府项目、网页的登录注册中。

图片

 

2.流式布局(Liquid Layout)

流式布局是最基础的变化布局,它的设计逻辑是将页面当中的元素设计成可以流动的 “水” ,通过在页面,设计不同的“杯子”容器来装下页面内容。

这里的“水”一般指的是 文字、图标、以及一些页面重复出现的元素。而杯子通常是我们设计的容器,它高度固定,只会变化其宽度,比如卡片、外层容器控制宽度 等等…

因为“杯子”的限制,也就导致水会根据杯子的宽度进行延展流动,进而形成流式布局。

图片

使用流式布局可以通过较低的开发成本,来实现一个页面当中多尺寸的小范围适配,如果屏幕尺寸跨度较大,则会比较困难。

而流式布局最常使用的方式就是通过栅格系统,来确定整个“杯子”的宽度,进而让“水”能够在页面当中实时滚动展示。

图片

 

这里有两个需要注意的点:

  1. 在研发层面,杯子的大小是需要进行限制的,通常会去设定它的最大值与最小值,当它超过最大值则居中对齐,当他在流式布局当中,窗口超过其最大值则固定左侧,右侧空白补充;窗口小于其最小值则展示横向滚动条。比如与上方同样的案例,将页面当中内容的文字实现成流式布局,并且将其流体布局的宽度限制为 200px – 120px ,这时则会形成页面的宽度变化,会导致内容发生直接的变化
  2. 流动的“水” 需要去考虑它漫出的情况,即在“水杯”高度固定的情况下,整个宽度无法装下如此多“水”的情况,通常我们可以使用 “…” 进行标注。这个思路后续在响应式布局当中也会体现

 

3.自适应布局(Adaptive Layout)

自适应布局是将差别较大的屏幕尺寸,去创建多个不同的设计稿,每一个设计稿去对应 一个用户实际的尺寸范围。改变屏幕分辨率就可以去切换不同的设计方案。

图片

通俗一点来说,自适应就是去单独设计桌面端、平板端、移动端的页面,并且将它们三者进行独立,而系统通过不同尺寸间的 屏幕断点/浏览器UA等…(实际前端判断远比这个更加复杂,但是为了方便理解可以暂且这么认为),进而适应出不同的设计页面。

而通俗一点来说,自适应是使用多套代码去对应多个页面,并且都是在业务非常复杂的情况下进行使用,在国内当中最常使用便是 桌面端与移动端 的产品。

比如 语雀 当中的 桌面端与移动端就是一个典型案例,他通过判断用户的使用设备,将页面拆分为了,桌面端、移动设备端、小程序(单独设计适配的)。因此只需要将每种设备的设计思路分析清楚即可。

图片

 

自适应布局与栅格

自适应主要是表达多个设备尺寸下进行切换的 布局方式,在不同的设备之间,也是需要去使用流式布局以及其他布局方式。

而不同的设备之间,屏幕分辨率的差异就会涉及到一个关键点,屏幕断点。

 

屏幕断点

屏幕断点,又叫媒体查询 @media,因为在整个设计当中,屏幕尺寸是极其复杂的,除了我们常见的尺寸:1920*1080、1440*765、1366。

图片

用户还可以通过调整窗口的大小,进而改变网页尺寸。而屏幕断点,最主要是判断屏幕的宽度,来确定 目前的尺寸究竟应该采取什么设计方案。

比如在设计一款成熟的B端产品时,因为商业的缘故我们作为各大平台(钉钉、企微、飞书)的ISV(合作上架),产品上架到不同平台时,需要对不同平台尺寸进行调整,比如钉钉为1024px、企微为980px、飞书为1280px,这时为了满足用户的实际场景,会将这几类特殊的尺寸作为屏幕断点进行对应的布局设计,以满足不同产品当中的最佳实践。

关于屏幕断点的媒体查询,是在前端 CSS3 代码当中,提供给用户校验整个屏幕的宽度,比如在下图前端代码当中,则代表在屏幕尺寸小于480px 时,使用 字体大小为16px。

图片

而确定断点才是这其核心,这里给大家提供两个思路,实际设计当中还会更为复杂:

  • 物理断点:也就是屏幕当中,已经划分好的断点方式,比如显示器的全宽大小、不同设备之间的屏幕分辨率差异
  • 设计断点:在设计过程当中,一些必要的屏幕尺寸。比如上方讲到不同平台的设计问题

其实屏幕断点不是最终目的,最终还是想通过屏幕断点,将页面当中不同的不同元素的处理方式实现在设计稿中,如果不需要,完全可以不考虑增加屏幕断点。

 

4.响应式布局(Responsive Layout)

这里先多聊一句,其实响应式的大规模普及,是源自 2015年 Google 的倡导(可以看到Google旗下的很多产品都采取的响应式布局,例如 YouTube),它最初的目的非常简单,就是为了提高响应式在移动终端上的运行效率。因为在2015年时,安卓 生态下的屏幕尺寸多到可怕,以至于需要有一套解决办法来让用户运行并使用。

响应式布局是确保一个页面当中所有的设备(桌面端、平板端、移动端)都能够展示出非常满意的效果,进行产生的一种技术方案。它更像是 流式布局与自适应布局 的结合,它能够通过对屏幕尺寸的快速响应,进而对页面的内容进行更为细致的变化。

通俗一点来说就是通过一套代码去实现多个页面,并且将多个页面的内容进行细化,进而能够快速适配多个设备。

图片

对于多个设备,最主要是调整页面栅格数量、水槽宽度、页面距进行适应,比如在YouTube当中,就是通过响应式布局,让页面实时响应进行处理。

 

响应式布局与栅格

比如以 Ant Design Pro的页面进行拆解,你会发现它在 575、767、991 的尺寸中,页面布局发生变化,然后根据屏幕断点之间的页面布局,采用向下兼容的适配方式,Ant design Pro 屏幕断点可以划分为320、576、768、992、1200,响应策略如下图:

图片

图片

 

布局与栅格的关系

你会发现布局其实是依赖于栅格,而栅格的使用,正是由于不同的布局所导致。只有通过栅格,才能够确定流式布局的比例、响应式布局的变化方式,但是在B端产品当中,并不是所有页面都需要使用栅格,经常看到一些作品集其实是为了栅格而栅格。

在B端产品当中在,真正使用栅格的地方更多是工作台、官网,而其他相对复杂的页面是没办法使用栅格,而对我们每一个产品而言,可以优化的点就是在屏幕尺寸较小的情况下,默认让整个产品导航菜单收起,以提供给用户更多展示内容。

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》B端设计指南 – 栅格的使用

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

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

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

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


音磁APP-电磁风说唱社区

seo达人



音磁是中国首个说唱音乐AI创新产品,面向18-25岁年轻用户群体的潮酷嘻哈兴趣社区。作为一个从0到1的产品,设计师通过电磁视觉风格和典型嘻哈的故事化IP角色,来缔造说唱文化深度,快速孵化APP。

设计思路

本次设计目标,聚焦说唱文化,对说唱文化进行深入的探索思考,通过风格化的设计语言赋予产品个性、确定产品调性。创建故事化IP角色,引起嘻哈用户共情,帮助音磁打造年轻化、记忆点和竞争力的品牌形象。

1、风格化视觉语言 提炼视觉符号

2、故事化IP角色 树立品牌形象

图片

 

 

风格化设计语言

电磁风

a.前期调研

项目启动前期,我们对说唱文化、竞品App、综艺节目品牌、声音可视化品牌运营等案例调研分析,说唱文化凸显个性,极具潮流特色,结合项目立项资料。得出以下结论:

图片

 

b.情绪版表达

从调研分析中寻找共性,归纳总结符合产品调性的视觉调性,扩展出一些说唱圈情绪关键词:潮酷、大胆、个性,并且分方向进行设计风格探索。推演出音磁产品的设计语言,简洁平面电磁风+潮酷涂鸦个性化。

图片

图片

 

 

c.电磁风视觉符号

基于产品情绪版关键词:潮酷、大胆、个性,探索视觉符号。结合产品名称音[磁],以电磁为视觉符号语言贯穿整个产品以及品牌设计中,凸显潮酷的气质。

图片

 

d.视觉设计语言

将简洁平面电磁风与潮酷涂鸦个性气质融合是音磁视觉语言的重要视觉呈现方式。倡导“简洁、易用、潮酷”的设计理念,通过电磁风的视觉风格,来缔造说唱文化,拉近与核心用户的距离。

图片

图片

 

① 品牌LOGO

LOGO的设计从多个方向:音符、图形、文字、字母等进行多方案的探索以及评审,最后和业务&设计团队达成一致确定了最终的品牌标示,以字母“CI”为主进行图形化设计,好记易识别。

图片

图片

 

标准图形:形状来源于音磁中“磁”的拼音『CI』,利用类似「过电」「故障」「重叠」的图形处理,视觉化了“磁”的感受。我们把『CI』字形往前倾斜了10度带来一种速度感,绿黑白的颜色搭配让它在众多logo中有较强的识别度和记忆点。

标准字:延续LOGO的速度感,如倾斜度、尖角、笔画粗细,提炼加入电磁符号,呼应logo图形,强化超级符号并应用在界面中。LOGO整体传达出年轻、时尚、不羁的感觉,符合音磁嘻哈社区的产品定位。

图片

 

 

② 品牌色

黑+绿大胆配色,酷炫十足,释放潮流激情,绿色-年轻有生命力。

图片

 

 

③ Icon

功能性图标在一致性的前提下,圆角化处理,提高识别度、亲和度,保证易用性,结合品牌色,夯实品牌调性。

图片

 

 

④ 图形

个性化磁力礼物的设计采用涂鸦贴纸风,满足说唱圈文化圈层喜好,凸显说唱应用产品的个性。

图片

 

 

故事化IP角色-磁哥

IP形象能让用户快速建立品牌联想与品牌识别,IP的融入可以增加产品的情绪温度,使其产生共情,共情力才是IP能成功的最关键属性。产品中增加一些代入性、趣味性的情感元素,让用户在使用的过程中更愉悦。

我们深入研究说唱文化圈层,挖掘用户喜好,用故事化角色拉近距离,提炼可视化关键词:涂鸦贴纸、脏辫、说唱、潮流、个性等。赋予角色性格、喜好、身份。设定了一个异于常人的个性化小绿人角色(初代版本)。

图片

图片

 

IP在产品应用中,关注用户使用情绪,缓解焦虑、等待的情绪,结合趣味性的潮流话术,引导积极正向情绪,来制造生动有趣的气氛。

图片

 

升级版IP角色,头部结合品牌图形加入电磁超级符号,使其更超酷灵动。下图为音磁专属特色表情。

图片

图片

图片

 

总结

在用户调研报告中,音磁的设计风格满意度为4.23分(满分5分),得到了说唱圈用户的认可。作为一个从 0 到1的品牌,音磁的设计语言依然在不断的打磨、优化。极具特色的品牌调性能够确保产品、运营各环节的视觉设计更加统一,助力业务的发展。做一款新产品-风格化的设计语言,可以快速吸引目标用户;故事化IP角色,引发用户共情。

 

 

原文地址:百度MEUX(公众号)

作者:文娱平台用户体验

转载请注明:学UI网》音磁APP-电磁风说唱社区

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

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

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

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档