首页

如何培养设计美感,这个方法掌握了,想不进步都难!!

seo达人

1.从大量阅读开始

为什么我们读小学时候,每天很早去学校晨读,目的通过这样刻意练习加深学习记忆。

长久以往,我们对文字理解,对写作文就会构建起丰富的背景知识。

那么在设计中也是一样的,在前期,一定要每天坚持大量的阅读,培养你的眼界。

阅读什么呢?我觉得可以针对性一些,比如:

 

a.大量看UI设计作品

网上因为作品有好有坏,如果你早期无法判定好的作品,可以去看一些获奖的作品,比如kdesignaward、Adobe设计大奖,IF设计大奖等。

图片
图片
Bomapp(kdesignaward)
图片
DuerOS(百度车联网)kdesignaward

 

b.创意性网页UI作品
图片
图片
图片

 

c.品牌设计作品
图片
图片

 

d.插画设计作品
图片
图片

 

e.版式设计作品
图片
图片
图片
当然不止这些,比如你还可以看看一些装置艺术、科幻艺术、三维作品、摄影作品、文化类作品,总之早期一定要坚持大量阅读。
我们大量阅读是为了建立丰富的背景知识库,积累越多,你的审美自然也会跟随提高,当然做设计的想法就会有更多。

 

2.什么情况下知道,我的审美提高了?

前期大量阅读了很多作品,这时候你需要把牛逼的作品收集起来,等半个月后,再去看看之前搜集的作品,如果发现有部分很丑,那么恭喜你又往前走了一步。

成长是需要一个过程,切忌操之过急,关键是需要自己动手去执行,不能等着被改变。

图片
https://www.pinterest.com/Tonyrosie666/_saved/

我们可以去建立一个图板,虽然很多人有这样做,但是真正做到复盘,然后去删除之前采集的人很少。

如果不去复盘,不去思考,进步当然会缓慢,抱怨也是没用的。

低头赶路,也不要忘了抬头路,我们要随时知道是朝着正确的方向努力。

 

3.学习一些理论

当看了大量的作品,对美有些认知,但是你还是不知道怎么表达美?这时候,你需要学习一些理论的支撑。

我们通过阅读大量作品构建审美认知,通过阅读书籍、文章理论构建审美体系。

比如,德国工业设计师迪特·拉姆斯提出好设计十项原则:

好的设计是创新的
好的设计让产品更加实用
好的设计是美观的
好的设计使产品更易理解
好的设计师谨慎克制的
好的设计是诚实的
好的设计是经典永恒的
好的设计是细致的
好的设计是保护环境的
好的设计要尽可能简单

又或者:

我们可以从形、色、质、字、构、动等6个维度去拆解,又或者可以利用格式塔心理学来进行设计质量的评估,比如我们常说的相似性、亲密性、连续性、焦点归一等。

再比如,当你看到一个吸引你的设计作品,你可以这样思考吸引你的点在哪?

比如:是图形运用很巧妙还是质感表达很新潮?又或者色彩创意很棒,一般一个好的设计都会满足形、色、质、字、构等,至少要3个以上维度。

当然还可以通过看书积累对设计美的表达,总之就是要大量输入,构建丰富的知识库。

 

4.推荐一些网站

提升审美必须每天坚持看,这个是毋庸置疑的事情。这里,推荐一些我常常去看的网站。

a.savee

图片
https://savee.it/

 

b.pinterest

图片

https://www.pinterest.com/

 

c.designweek

图片

https://www.designweek.co.uk/

 

d.designcollector
图片

https://designcollector.xyz/design

 

写在最后

提升设计审美,前期大量阅读只是一个开始,我们还需要做的是不断思考总结。

同时还需要学习设计理论,这些我们可以通过看书或者和别人交流,在讨论过程中,你自然知道他们是怎么评价这个设计的。

路漫漫其修远兮,学习是一个长期的过程,培养审美也是。

积小步,成大步,没有一蹴而就的成功,一切都是量变的积累。

 

原文地址:功夫体验设计 (公众号)

作者:Tony

转载请注明:学UI网》如何培养设计美感,这个方法掌握了,想不进步都难!!

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

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

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

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

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



知识图谱的信息可视化设计方法

seo达人

一、什么是知识图谱

1.1 基本概念

2012年,Google公司为实现更智能的搜索引擎,提出知识图谱的概念,2013年后在行业内和学术界开始普及。

知识图谱的定义:是结构化的语义知识库,本质上是一个语义网络(Semantic Network),用于描述物理世界中的概念及其相互关系。在技术层面,通过对错综复杂数据的有效加工、处理、整合,转化为数据关系来聚合大量知识,从而实现知识的快速响应和推理;在可视化的应用中,知识图谱表现为多关系图(Multi-relational Graph),在图形化界面中可让用户查看和互动(如图1)。

图片

图1(引用自企查查app截图)

 

1.2 知识图谱的特点:

其特点主要包含以下两方面内容:

1. 它是由“节点”和“边”构成的三元组

三元组是知识图谱的基本单位, 由节点和边构成(图2)。其中节点代表实体,是指具有区别性且独立存在的客观事物,如:图1中的马云、华谊兄弟传媒有限公司,图3中的美国、平方公里数等;边代表两个实体间的关系,是指客观存在或推理得到的实体间的联系,如图1中的董事、监视、投资,图3中的面积、人口、首都等。

图片

图2(作者依据知识图谱相关概念绘制)

 

图片

图3(引用自网络图片)

2. 它的数据以知识的角度呈现。

知识是一种人类对于客观世界的认知,包括事实、信息描述或教育实践中获得的结果的综合。三元组也被称为“一条语句”,或知识图谱中的一条知识。在图4的国家信息关系三元组中,我们就可以读出一条语句(或是知识)为:“中国的土地面积有9,634,057平方公理”。知识图谱可以集成Web上大量的数据及数据关系,通过有效的加工、整合和处理,将其转化为易于计算和理解的语义知识库,可用于描述客观世界中的概念及相互关系。

 

1.3 知识图谱的作用

1. 信息筛选,精确检索范围。

2. 信息拓展,提供更丰富的信息内容。

3. 信息连接,构建有深度和广度的知识系统。

 

1.4 为什么需要对知识图谱进行可视化

1. 知识图谱的技术架构-侧重在数据关系模型和机器学习,普通用户很难读取和理解。

知识图谱的核心技术逻辑,是由整体的“数据输入-数据处理-知识图谱生成”三个大环节构成。数据输入环节包含“结构化数据、半结构化数据、非结构化数据”;数据构建环节包含“信息抽取、知识融合、知识加工”;知识图谱系统的生成环节,是整个技术架构往复迭代、不断更新和积累,慢慢形成的结果。数据输入是对数据源的挖掘,数据构建是底层的模型算法应用,知识图谱生成是数据处理结果的呈现(如图4)。

图片

图4(作者依据知识图谱相关概念绘制)

这个过程在底层数据模型中运转,对用户可见的往往是最终的结果。比如:搜索引擎中,用户看不到搜索过程,但可得到最匹配的搜索结果;在音乐平台中,看不到内容匹配逻辑,但可以被推荐感兴趣的歌曲。如果想利用过程数据为用户提供服务,就需要进行可视化处理。

2. 传统的信息可视化-侧重在数据结果的展示和筛选,较少涉及数据关系的干预。

传统信息可视化的方法,在设计侧更多强调数据信息与图像、色彩的信息传达上。其方法通常集中在“如何对已经确定的数据进行图形映射”和“如何处理信息层级”的视觉表现上,较少参与设计数据关系或影响数据结构。然而,这让用户知道数据“是什么”,却不能呈现数据“为什么”。知识图谱的可视化,可以让数据处理过程被用户可见、可用,从而更好的分析和使用数据。

图片

图5(作者依据传统信息可视化方法相关概念绘制)

3. 知识图谱的可视化-侧重在数据关系构建和处理过程的可视化

知识图谱技术广泛应用在情报学、检索引擎、自动问答、金融反欺诈等领域。目前已扩展到智能医疗、证券投资、大数据风控、聊天机器人、个性化推荐系统等更多方向[1]。这种关系语义网络也逐渐从技术底层应用向可视化用户界面上发展,各行各业也在探索如何时其在终端界面中被用户可读和可用。比如:在文化研究领域,图谱呈现更有助于用户对于文化知识的理解和再创造;在商品市场领域,视觉化的图谱可让商家洞察更多“人-货-场”之间的内在联系。

对知识图谱信息的可视化,重心落在数据信息的提取和关系构建上,将数据信息的编译过程呈现给用户。知识图谱信息可视化和传统信息可视化方法之间的关系,如图6。

图片

图6(作者依据信息可视化方法相关概念绘制)

 

 

二、知识图谱的可视化设计方法

知识图谱在底层算法和数据模型上提供有效的技术逻辑,进而构建丰富庞大的语义网络,但如果要在具体应用场景中给用户可见的模式,则需要图形化界面的呈现。在实际工作中,设计侧的核心任务是“多关系图”的信息可视化。结合知识图谱的特征、技术原理和传统信息可视化方法,可以将知识图谱可视化的过程,归纳为“确定知识主题(主题层)-处理与分析数据(数据层)-构建数据三元组(关系层)-进行可视化映射(可视层)”四个步骤。

 

2.1 【主题层】确定知识主题/可视化目标

确定主题的过程,也是定义核心概念或目标的过程,这一环节是是知识图谱可视化的出发点和落脚点。传统可视化为了可视而可视,只是让用户更好的读取数据,而较少考虑读到后有什么用,怎么用。没有主题的数据是无意义的,任何一类知识的描述,都需要围绕某一特定主题展开。在项目实践角度,也可以将其视为梳理业务核心诉求或定义设计目标的过程,如确定要阐述什么类型的知识、最终的可视化效果对目标用户有什么价值、业务要利用数据达到什么目的,所有数据的设计都将围绕着主题展开。

确定主题的方法有很多,包括传统的用户需求分析方法、文献综述、行业研究等,可根据不同的项目诉求,选择合适的方法和工具。如,要做电商行业的知识图谱,通过行业研究、对用户特征和行为动机的分析,发现电商领域用户最关心人货场的知识,人和货特征及其关系就是核心要表达的主题。再如,老师想了解网络时代的大学生都具备怎样的社交特征,通过对学生学习、娱乐、社交等不同生活要素分类调研,选择“学生使用社交软件的行为特征”作为主题。

同时,主题要清晰明确,避免模糊和过于宏大。以文化领域为例,如想呈现京剧之美,这个概念就大而泛,很难去组织数据,就有创作者将其主题拆分为:历史之美、剧目之美、舞台意向之美、传承之美等几个主题。然后再逐一分析每个主题的数据。

 

2.2 【数据层】对数据进行提取与加工

在未经处理前,与主题相关的可用数据是多样且庞杂的。由知识图谱的技术框架可知,技术模型经过信息提取、知识融合和知识加工后,才使原始数据变得有用和有效,同样在可视化的过程中,也离不开信息提取与数据加工。

1. 数据提取-围绕知识主题进行数据信息的提取。

信息提取,也就是先罗列可能有用的相关数据类型。每个主题都是一大类目的知识领域,需要经过收集、归纳、拆解后再能够清晰的进行解释和传播。如,围绕“学生使用社交软件的行为特征”这一主题,可归纳出“好友关系、互动行为、在线状态、信息发布”等特征。进一步,好友关系又可拆分为:好友量、关注量、粉丝量;互动行为又可拆分为:聊天次数/频率、点赞数、评论数等。数据收集一般通过桌面研究的手工收集、数据爬虫两种方式。归纳和拆解数据可以使用卡片分类、思维导图的方式。

2. 数据加工-进行知识语义加工。

数据加工的过程,就是将罗列出的数据进行分类和筛选,确定最能够表现知识主题的描述纬度或数据类型。如图7,通过分析影响因素的关联程度,选择具备直接影响因素的数据,或划定数据范围后,再进行细分。可以利用卡诺模型、波士顿矩阵等方法找到数据对主题影响程度的优先级,具体的挑选方法无定式,只要能整理出适合的数据类型。

图片

图7(作者依据相关案例绘制)

3. 数据清洗-进行数据筛选和最终确认

定义出有用的数据类型后,并不是所有数据都能完美符合我们的诉求,比如数据挖掘能力限制,不能挖到更精准的数据或有数据缺失;比如数据解析能力不足,数据类型混杂,或有错误数据等。排除不足量、精准度差、错误率高等不可用的数据,盘点出能够被应用于可视化的最终数据。在实际工作中,需要跟团队的数据挖掘工程师、或业务产品负责人明确数据能力和质量。例如,“京剧传承之美”的数据选择过程中,作者对京剧艺术传承上存在的“流派师承、艺学家传、科班教育等”多种方式进行进行分类和筛选,最终提取了京剧51个流派的创始人数据、师徒数据、家族成员数据。

 

2.3 【关系层】构建数据关系三元组

在知识图谱的技术架构中,这一环节体现在本体构建上,本体是个专业概念,本体构建也有多种可用的成熟模型,属于技术侧内容,本文不展开论述,仅阐述设计层面的思路。技术是让数据更精准,而面向用户的设计是让数据更有用和好用。

设计数据的关系层,也就是给不同数据类型建立关系的过程,通过确定节点和边的内容来构建能够解释主题和符合其逻辑关系的三元组。数据关系的建立一般主要围绕两个层面,一是能够阐述知识主题,二是通过关系三元组可推理得到更多的知识内容。比如,在“学生使用社交软件的行为特征”这个主题中,可定义“学生(实体)-网络社交特征(属性)-具体行为(属性值)“是一组关系结构,体现在数据为“张三-在线时长-5小时/天”,描述成知识语意为:张三同学社交软件每天会在线亮起5个小时;又如,围绕“商品销售信息”这一主题,“产品(实体)-集合(关系)-商品(实体)”是一组关系结构,体现在具体数据为“手机-包含-华为手机”,描述成知识语义为:华为手机是众多手机中的一种。

当我们定义了这种数据关系,独立的数据就变成了可描述的知识语意,当这些语义联系在一起,用户通过一段段知识洞察到不同的现象,或解读出不同的结论。这种知识语义的可视化,或者说这种数据关系结构的可视化,能够帮助用户了解业务现象,或产品底层看不到但却有用的信息。比如京剧文化中师承的演变,可以通过不同人物之间的关系脉络,构建出“师承关系、家族关系、联姻关系”几种三元组模式,从相同节点中解读到某个京剧演员擅长某个角色的师承因素。再比如,将某班级每个学生的聊天频率、好友数量、QQ在线时长等网络社交行为关系一一对应,就会勾画出集中在某个学生身上的不同特征,把这些学生再放在一起,就呈现出一个班级学生在网络世界的不同社交特点。(如图8)

图片

图8: 由数据构建的三元组关系图(作者依据相关案例绘制)

 

2.4 【可视层】可视化图形语义转换/可视化映射

当关系构建好以后,简单的三元组是容易读取的,但众多三元组集成在一起,也会涉及到信息读取效率的问题,就需要将关系结构图形化,这一步骤也是传统信息可视化方法中的必然环节。根据已经构建好的数据关系结构,可通过“图表映射”和“视图设计”两种方式,进行可视化的语义转换。

1. 可视化图表映射

可视化图表,是指具备通用性的标准化图表。总体分为统计类图表和关系类图表,本文主要阐述关系类图表。关系类图表又可分为网状关系和层次关系。网状关系图包括:关系图、弦图、弧长链接图等;层次关系图包括:树图、旭日图、矩形树图等。详细的标准化图表,可以借助E-chart、Tableau Public、Smartbi等软件进行参考选择(如图9)。

图片

图9:网状关系图(引用自E-chart网站截图)

图片

图9:层次关系图(引用自E-chart网站截图)

如果数据关系比较清晰简单,能够被这两类标准化图表所覆盖,则可以直接选择把节点和关系直接映射其中。如果你的数据关系比较复杂,或个性化,则可对标准化图标进行组合或变化,或设计个性化视图。

例如,在北京邮电大学彭国雁的论文《面向京剧知识图谱的信息可视化研究与设计》的案例中,“京剧传承之美”这一主题,“师承关系、家族关系、联姻关系”的三元组关系较复杂,如果直接用可视化图表映射来展示,会产生易读性差和页面布局难以控制的问题。于是论文作者采用不同图表相结合的方式,并将图形的视觉元素进行改造:1 主体采用和弦图,人物点构成和弦图的圆,人物关系类别采用不同颜色线条进行连接(图10)。2 根据人物出生时间的向性特点,将人物按照某一方向进行排列,即可隐喻师徒或者亲属关系的有向性。3 采用树形图形式的线条表达主次人物的关系(图11)。4 将几种基础关系做好映射后,再把相关节点整合在一起,就表达了整体的师承关系结构图,最终形成“传承之美”整体的可视化知识图谱(图12)。

图片

图10: 人物师承、亲属、联姻关系和弦图(引用自论文《面向京剧知识图谱的信息可视化研究与设计》截图)

图片

图11: 京剧流派师承树形关系表(引用自论文《面向京剧知识图谱的信息可视化研究与设计》截图)

图片

图12:最终映射后的 “京剧传承之美”可视化知识图谱(引用自论文《面向京剧知识图谱的信息可视化研究与设计》截图)

2. 可视化视图设计

本文所述的可视化视图,是指能表达标准化图表以外的,不同类型数据特征的语义图形,由设计师根据与主题相关的数据类型进行构思,并关联其不同类型数据间的关系语境,最终形成的信息图。比如(图13),清华大学副教授向帆老师在对“学生互联网社交行为”这一主题的研究中,作者选择QQ使用状态的相关数据,将每个学生用QQ企鹅的轮廓图形表示,在线时长为企鹅形状大小、聊天次数为圆形嘴巴、好友数量为头发多少,呈现出“学生-网络社交特征-具体行为”的可视化关系图,在最终的视图中,可直观的看到完全不同的每个人。

图片

图13:同班级不同的学生网络社交行为图谱(引用自演讲《秘密的设计》截图)

这类自定义的可视化视图具有独特性和意向性的特征。独特性是指图形针对具体的主题和数据关系,而不能够广泛的为其他主题复用;意向性是指一个视图内的图形有一定的意向概念传达,比如圆形代表聊天次数,也是象征嘴巴,嘴巴跟聊天相关(尽管网络聊天用文字,但却表达出了这种交流意向)。同时个性化图形元素相关联来表达数据关系,也可以直观、高效的洞察出用单纯的标准化图表看不到的现象,比如说图14的三个学生,一个在线时间很长但聊天很少、好友也很少;一个在线时间很短,但好友和交流时间却很多;另一个基本不说话,但是却有很多好朋友。这样的现象更容易触发同理心,从而启发老师在教学中因材施教。

图片

图14:发现网络社交行为最为奇特的三个学生(引用自演讲《秘密的设计》截图)

经过以上四个步骤,就完成了对知识图谱数据进行可视化。它不是单纯的以视觉效果展示数据信息,而是从数据关系提取到关系呈现为一体的设计过程。

 

 

三、结语

综上所述,基于知识图谱的技术架构、传统数据可视化的方法和交互设计的工作流程,本文分享了一种可在工作中易于操作的知识图谱可视化方法。与传统数据信息可视化相比,知识图谱可视化更倾向于数据之间三元组关系的视觉表达,所谓“整体大于局部之和”,有了关系的建立,则更能够发现单一数据之外的延展信息和潜在机会。希望能够通过设计的力量,让普通用户也能更好的使用数据和洞察数据。

参考文献:

  1. 彭国雁,《面向京剧知识图谱的信息可视化研究与设计》
  2. 1. 通俗易懂解释知识图谱(Knowledge Graph) – hyc339408769 – 博客园
  3. 领域本体的构建方法研究_u013263092的专栏-CSDN博客_本体构建
  4. 王昊奋,《知识图谱技术原理介绍》
  5. 刘知远 ,《面向大规模知识图谱的表示学习技术》
  6. 【干货】最全知识图谱综述#1: 概念以及构建技术
  7. 【干货】最全知识图谱综述#2: 构建技术与典型应用
  8. 向帆,一席演讲《秘密的设计》

转载请注明:学UI网》知识图谱的信息可视化设计方法

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

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

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

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

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



设计效率工具趋势 | 综述篇

seo达人


一、日常积累

设计师日常除了应对当下的需求,每天可以拿出一定时间保持学习的习惯。不仅可以让我们紧跟最近的设计趋势、设计潮流、设计方法,也可以让我们潜移默化中得到提升。

Panda|全而美的设计订阅平台

图片

Panda帮助设计师不错过每天的设计灵感和资讯,包括新的设计方法理念、流行潮流、也有一些新产品推出。我们可以把Panda替换Chrome主页,每次打开浏览器页面都可以随时看到最新的设计资讯。一些英文的订阅也可以用chrome浏览器的翻译功能可以粗略查看。

地址:https://app.usepanda.com/#

 

Topys|创意内容平台

图片

全球顶尖创意内容平台,作为中国成立最早、最受欢迎的创意垂直网站,以 “Open Your Mind” 为宗旨,始终专注在全球创意、艺术、灵感、人文领域寻找最有质感的声音。

地址:https://www.topys.cn

 

Voicer|分享生活和设计的美学

图片

我们总在生活中与「一瞬间的感动」相遇。Voicer的理念即是发现这「感动」, 将它传递给更多热爱生活的人们。内容包括创意内容品牌、在线杂志等。致力于分享生活和设计之美。

地址:https://www.voicer.me

 

Design better|优质设计读物网站

 

涵盖设计商业思维、产品设计原则、设计系统等关于推动设计团队前进的实践读物,同时提供PDF和有声格式。

地址:https://www.designbetter.co

 

二、研究分析

设计师在调研过程会研究用户、记录用户的行为和需求,会使用一些高效的记录工具。同时繁多的调研的信息需要汇总整理,协作整理,这里会推荐一些记录和整理的工具给大家。

Noted|录音笔记好工具

图片

Noted 是一款将录音和笔记相机相结合的软件。我们做访谈用户或做会议纪要的时候,经常错过记录的内容,如果通过一些软件录音的话,后期回听需要比较多时间成本。Noted可以在记录笔记的同时记录输入文字的时间点所对应的录音,输入的每个字的时间点都会对应到。当内容没记录下来时可以随时跳到对应时间的录音进行回听,方便在漫长的录音文件中快速检索。

 

Marginnote|文献收集箱

图片

重塑学习方式的阅读笔记工具,更加高效阅读书籍和学习,可以在阅读时摘录笔记,制作学习卡,提取关键词,根据笔记生成思维导图,梳理知识框架。非常适合阅读专业书籍,阅读论文以及复习。

地址:https://www.marginnote.com/chinese/home

 

GoodNotes|手写笔记

图片

一款功能强大的手写笔记软件,拥有多种笔记封面和纸张模板可以选择,支持自定义模板,可以简单处理图片,可以导入pdf、ppt等文稿并做标记,也适合做电子手账。

地址:https://www.goodnotes.com/zh-cn

 

腾讯文档|在线协作

图片

调研阶段方便多人一起搜集资料和汇总,多人同时在线编辑,内容实时同步。随时随地高效协作,轻松创作。

地址:https://docs.qq.com/home

 

Xmind|思维导图

图片

功能强大的思维导图软件,极简设计,流畅体验,多种结构图风格选择,方便资料的汇集和思路的整理。

地址:https://www.xmind.cn

 

三、设计创作

当设计目标确定时,接下来进行具体的创意设计。设计师除了通过脑暴进行发散方案以外,一些高效的设计工具可以让我们事半工倍。

3.1 灵感搜集

Collect UI|界面灵感

图片

UI设计灵感库,基于dribbble平台精心挑选优质内容,提高效率便捷,为设计师提供专项更好的灵感。同时支持邮件订阅推送。

地址:https://collectui.com

 

Adobe Color|配色灵感

图片

Adobe color不仅从各个维度解决了我们的配色需求,同时也提供找图需求。其中包含 9 种智能调色模式可以选择。拾取主题色、拾取图片中的渐变色、协助工具可以合理帮助检查不同颜色的对比、探索behance趋势。

地址:https://color.adobe.com/zh/create

 

Useanimations|图标动效灵感

图片

图标动态效果库,当绘制的图标需要一些巧妙的微动态效果时可以参考。

地址:https://useanimations.com/index.html

 

3.2 设计打磨

FigmaEX|插件可视化

图片

当插件特别多时候,FigmaEX极大的改善了Figma中使用插件的体验,将插件可视化。可以进行展开,同时显示插件的名称与图标。可以通过拖拽调整插件的顺序,调节高度。

 

Autoflow|流程图插件

图片

输出交互设计稿的时候,方便快捷的在不同画板之间连线,提升输出效率。

地址:https://www.figma.com/community/plugin/733902567457592893/Autoflow

 

Skewdat|倾斜插

图片

这是一个非常简单实用的 Figma 插件,它可以帮你将任何形状元素倾斜过来。

地址:https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio

 

Undraw|插画素材

图片

最棒最全的插画库,支持快速搜索,一键调整颜色。

地址:https://undraw.co/illustrations

 

Magic Eraser|轻松移除杂物

图片

一款免费的在线服务,它通过 AI 自动去除图片中不需要的部分,只需要上传图片,等待几秒钟即可。用鼠标把不要的部分划掉,松开鼠标就会闪几下,被划掉的部分就消失了,比如去水印之类的小东西,如果用 PS 的图章,估计要十来分钟,而用 Magic Eraser 就几秒钟,简单易用,推荐使用。

地址:https://www.magiceraser.io

 

3.3 设计验证

Checklist Design|设计清单

图片

设计输出后可以通过这个清单去做最后的检查。网站列举了一些通用场景(页面、元素、流程、主题、品牌)下的基本设计要素。可以检查你的设计在这些场景下是否符合规范。样式、颜色、命名、易用性等是否合适。

地址:https://www.checklist.design/?ref=prototyprio

 

四、测试评估

好的方案不是一蹴而就的,设计方案需要不断的打磨和迭代。方案需要持续和用户进行沟通和测试,才能得到完善的方案。也需要和开发工程师不断沟通,以达到最佳的实现效果。

4.1 用户测试

腾讯文档|在线收集表

图片

用户测试阶段方便高效的收集用户反馈,一般用于定量的用户测试。

地址:https://docs.qq.com/

 

Hawkeye|眼动追踪工具

图片

一般的眼动跟踪设备比较昂贵,使用繁琐。这个名为鹰眼的眼动追踪APP,可以通过手机前置摄像头捕捉用户在使用产品时的视觉动向。

地址:https://www.usehawkeye.com/?ref=prototyprio

 

4.2 评估还原

CoDesign|腾讯自研设计协作平台

图片

覆盖产品经理、设计师、工程师协作需求。设计交付更轻松,有效管理和使用设计资产。

地址:https://codesign.qq.com/

 

Pixel Eye|高效视觉还原

图片

在项目上线前设计师都会对最终的产品实现效果进行走查,以保证设计还原的准确性,体验的流畅性。这是一款视觉还原工具,帮助前端工程师在页面重构阶段就能快速发现开发稿与视觉稿的差异,实时对比、实时修改,减少工程师与设计师的沟通成本,提升整体开发效率。

地址:pixeleye.暂未对外开放敬请期待

 

五、对外宣传

设计完成后汇报展示、产品的宣传包装等,提供更便捷优秀的展示形式。

5.1 效果展示

Mockup World

图片

样机的类型全面而且免费,综合质量很高。

地址:https://www.mockupworld.co

 

ls.graphics

图片

素材非常优质精美,有免费和付费的资源。

地址:https://www.ls.graphics/#UI

 

5.2 在线作品集制作

Adobe Portfolio

图片

主要面向设计师群体,帮助设计师建立个人在线作品集。几分钟就可以建好一个作品集网站,提供精美模板选择。最大的特点是易于操作,无需懂网页程式,都能在建立一个网站。最重要的是你可以使用自己的域名。Adobe Portfolio需要收费。已订阅用户可免费使用。

地址:https://portfolio.adobe.com/start

 

Portfoliobox

图片

针对设计师或者创意人员的作品展示工具,可以直接在网页浏览器中搭建属于你的作品展示平台。

地址:https://www.portfoliobox.net/cn/

 

结语

此综述篇大家有了比较整体的了解,在设计流程中每个环节,介绍了一些比较好用的工具,后续的设计工具系列文章会针对某一环节进行更深入的探索。

图片

感谢阅读,以上文章由腾讯ISUX团队创作,版权归腾讯ISUX所有,转载请注明出处,违者必究,谢谢您的合作。 

 

原文地址:腾讯ISUX

作者:ISUX设计

转载请注明:学UI网》设计效率工具趋势 | 综述篇

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

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

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

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

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



10个优秀的UI/UX设计技巧

seo达人


一、利用手势辅助实现快捷操作

利用手势交互辅助隐藏式功能操作,可以在不改变当前结构的基础上实现快捷操作,带给用户更加便捷化的体验。

夸克 APP 在访问了多层级页面之后,如果想要快速回到浏览器主页,点击返回按钮一级一级返回过于繁琐。通过底部导航栏向上进行滑动,可以快速激活返回主页的操作,手势辅助实现自动跳转。该设计解决方案通过手势辅助隐藏功能操作,提高了用户对于产品的使用体验。

图片

图片

    

二、点赞设计的情感化探索

点赞在阅读类场景中随处可见,用于表达用户对内容的认可度而产生的情感共鸣,通过点赞给予赞同。点赞设计的创新已逐步在探索,通过更加情感化的设计表达提高用户体验,借助手势的变化呈现出更有趣味性的点赞设计。

今日头条 APP 单击点赞图标会随机性弹出表情化符号,多次点击会持续弹出更为丰富密集的表情符号,长按则会像模拟持续发射的特效,伴随着音效和震动带来“视听触”等多重体验。点赞设计的情感化探索不仅带给用户多重感官体验,也是用户释放阅读压力的一种情感共鸣。

图片 
 

三、情感化的点赞文案设计

除了从点赞视觉感官层面进行设计探索以外,众多产品也在文案提示设计上面进行情感化探索。

AcFun APP 在对话题等内容点赞时,会弹出温馨的文案提示,每次点赞都会出现不同的文案。情感化的文案设计提高了话题互动的活跃度,带给用户更好的社交互动体验。

图片 
 
 

四、突破常规的模式切换设计

设计都在探索差异化的感官表达,如何突破常规至关重要。无论是在布局结构层面还是元素情感化表达层面,设计师都在尝试更有创新的表达,带给用户不一样的使用体验。

Wonder APP 在模式切换上做出了一个新颖的设计解决方案,通过环形卡片设计进行模式切换,可以单击和滑动进行切换。动态的卡通形象增加了感官体验,流畅的卡片切换也带来了不错的操作体验,是一个在布局层、视觉感官层、互动层等方面的不错探索。

图片

[优化输出图像]

 

 

五、特色的签到展示设计

签到设计对于大家来说并不陌生,提高用户签到的参与度是大家都在不断思考和探索的方向。

AcFun APP 将签到设计成日历展示形式,点击签到之后弹出,配合日历运势的概念来设计,提高用户的签到兴趣。内容却不是正式的日历运势相关内容,配合趣味化的文案设计,让用户会心一笑。视觉感和情感化文案设计的融入,提高了签到设计的感官体验,进而提高用户的参与度。

图片 
 

六、自定义字号提高阅读体验

通过公众号等自媒体进行阅读已经成为大家的习惯,不同公众号编辑内容都会有所不同,字体大小和行间距等没有特定的规范。官方虽然会有默认设置,但是无法兼顾不同的内容需求。提高小编的编辑体验和满足用户的阅读体验,自定义的阅读调整至关重要。

在公众号阅读文章时,可以通过右上角的功能入口进入“调整字体”。用户可以根据自己的阅读习惯设置字体大小,在标准和自定义大小之间切换,提高用户的阅读体验。

图片 
 

七、自选色实现更灵活的个性换肤

个性化的皮肤主题在众多产品中已经运用普遍,当用户体量增加之后,个性化的设置才能满足不同用户的体验需求。

酷我音乐 APP 在个性换肤模块中,除了设置多个主题皮肤供选择以外,用户还可以通过自选色设置更加灵活的配色风格。可以选择更多推荐的配色风格,也可以通过色环自己调节任意颜色,满足不同用户对于感官体验的需求。

图片 
 

八、自定义图满足用户的创作欲

对于一些追寻个性化较强的用户,预装的自定义设计已经无法满足他们的体验需求,激发用户创作欲的设计迎面而来。

酷我音乐 APP 在个性换肤模块中,用户可以通过“自定义图”实现更加个性化的皮肤。用户可以选择任意拍摄的照片,然后通过透明度和模糊度来调节照片效果,满足自己对背景效果的要求。针对按钮的颜色也提供了几个配色选择,用户可以根据自己调节后的背景效果进行搭配。基于更加个性化的需求满足用户的创作欲,才能带给用户更加人性化的使用体验。

图片 
 

九、关联功能叠加设计提高使用率

为了提高功能的曝光度,直接展示在用户的视野中是很多设计师的处理形式,但是却增加了感官层面的视觉负担。

幸识 APP 把关联功能进行合并式的叠加设计,不仅对视觉进行降噪,由于属于关联性的操作,用户更容易通过功能联想进行使用。当用户点击观看“时间戳”时,底部功能会被替换为“发起”,发起时间戳和观看本身就是一个流程的体验。当我们遇到关联性功能设计时,不一定选择各自展示,相互叠加或者切换式的交互设计也是不错的解决方案。

图片 
 

十、趣味性爆满的点赞设计

点赞是用户情绪化表达的关键,表示对于内容的认可度和作者的支持度。普通的点赞设计已经无法满足一些情绪爆满的用户,更加趣味夸张的设计在逐步被探索。

微博 APP 针对点赞设计单击时,出现表情化的符号弹出,持续点击或者长按点赞图标则会出现色彩丰富、表情符号四处爆发的视觉效果。一场趣味性爆满的视觉盛宴,满足用户释放情绪的最大化需求。

图片

源图像

 

小结

在用户使用体验和感官体验层面探索了这些优秀的案例,希望可以抛砖引玉,带给大家更多启发。发现设计背后的思路,总结设计表达的经验,运用优秀案例的技巧,提高我们的设计解决能力。

以上总结仅代表个人观点,如有不足欢迎大家留言补充,我们互相进步。

 
原文地址:黑马家族(公众号)

作者:黑马青年
转载请注明:学UI网》10个优秀的UI/UX设计技巧

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

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

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

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

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



太简单了!别人要做一小时的页面,我用这些效率插件一键生成

seo达人


01 替代重复繁琐操作的效率插件

• 智能填充

做设计时,同学们一定遇到过这种情况,某些模块需要用图片或文字进行展示

用单调的图形和随意的文字占位不够真实美观,手动添加图片编辑文本又太麻烦,能不能有工具帮我一键随机生成并填充?

当然可以,「智能填充」插件就是专门解决这类问题的。

选中任意文本,即可选择智能填充人名、时间、日期、段落及对话等 9 种不同的预设内容;选中非文本图层、分组或画板,就可以智能填充人物头像、风景、美食等 8 种类型的无版权图片。

 

• 快速复制

做设计时,很多同学会遇到一个页面中需要出现多个相同模块的情况,比如商品列表、视频页、相册等等。

处理起来也不难,多按几次 Ctrl+C 和 Ctrl+V 就行。但复制出来的模块经常重叠在一起,还需要逐个拖拽排版……时间就是被这样浪费的。

但其实,这些繁琐的步骤完全可以用「快速复制」插件一键搞定。

只需做好第一个,选中全部图层,打开插件,设定好横向与纵向的复制数量及间距,点下按钮就能一键复制。

像我演示用的这个即时设计的插件,复制完成后,还预留了按钮,点一下就能打开「智能填充」,很贴心。

 

• 文本拆分

还有专门用于处理大段文字的「文本拆分」插件,能将一个文本图层拆分为多个,方便分别设计排版;也可以将多个文本图层组合为一个重新编辑。

类似的提高设计效率的插件还有很多,例如:

「图标尺寸调整」——可以批量调整不同 icon 及其外框大小;

「字体替换」——批量替换设计稿中使用到的所有字体,并保持原有文本样式属性;

「查找替换」——能搜索定位文本内容并替换,且不改变原有文本样式。

 

02 整合图标字体的资源插件

各种各样的免费或付费的素材库给我们提供了很多便利,但也不是所有类型的资源,都适合下载文件,再导入使用的。

比如图标和字体这两类,使用频率非常高,如果每次都需要下载导入安装,无形中就增加了很多重复工作。

所以,很需要有一些工具,来让这两类资源的取用更加便捷,比如,图标插件和字体插件。

 

• 海量图标—— iconify、iconfont & IconPark

现在的图标库都能直接下载 SVG 格式,所以不用太考虑颜色尺寸的问题。

但做设计久了,就会在电脑里存下许多图标文件,整理起来属实麻烦,都删掉了又可惜,万一哪个还能用到呢?

这时候,如果安装几个图标插件,就没有这些问题了。

点开插件,搜索想要的图标,选中图标并修改尺寸和颜色,直接拖拽使用。

国内常用的 iconify、iconfont 和 IconPark 都已有插件接入。

 

• 字体方案——字由插件

做海报、封面、banner 图的时候,同学们应该经常会用到很多不同风格的字体。

但经常会遇到精挑细选并下载安装了好几款字体后,发现用在作品里视觉效果并没有那么好,还得重新找字体并安装……

面对这种情况,最省事的方式应该用类似「字由」的第三方字体插件来管理字体

安装字由客户端后,里面的字体方便查找,点一下就能激活,然后直接在设计时使用,帮我们省去了很多检索和下载安装字体的步骤

这里需要提出的是,Sketch 和 XD、PS 这些本地软件应该都是支持字由的,在线工具的话,目前只有「即时设计」支持字由,Figma 也是完全没办法用的。

当然,即时设计的字体方案还是值得一说的,其实之前也提过挺多次了,“本地+云端”的多种方案,最大的亮点是:

1. 个人设计师不止可以使用本地安装的字体和「字由」的字体,还能免费上传自己的字体文件到云端和其他人一起使用。

2. 团队的版权字体还可以直接上传到团队共享库,所有团队成员都能随时在线使用,完全不用下载安装。

 

03 提供图形配色方案的插件

• 图形生成——不规则图形

我经常给星球的同学们布置一些作业,而在设计过程中最常用的装饰元素之一,就是不规则图形,看起来简约又高级。

需要不规则图形时,最常见的做法是用钢笔工具自己画一个,但还有更快捷的方法,用「不规则图形」插件随机生成斑点或者波浪

这类插件一般包含很多预设方案,点一下就能随机生成。

如果觉得随机“摇”出来的图形不合心意,还可以自己调节修改。斑点的锚点和曲率,波浪的高度、层数、峰数都支持自定义。

双击生成的不规则图形,还能继续拖拽修改形状。这么一通修改下来,只有复制粘贴才能得到两个完全相同的图形了。

 

• 色彩使用——渐变色

同学们在设计作品中,经常会用到渐变色,但是很多同学不擅长调出好看的渐变色,做出来的图看起来很脏,尤其是颜色跨度较大的时候。

这种情况下,一个收录若干经典配色的「渐变色」插件就能帮上大忙。

如图我用的这个渐变色插件,就收录了来自 WebGradients 的 180 种线型渐变配色,可以一键快速填充;给出的渐变色方案,也都很具备学习参考的价值。

 

 色彩搭配——图片取色

我还找到了一个非常适合用来参考和使用色彩搭配的插件——「图片取色」。

优秀的摄影或设计作品中都具有极为丰富且和谐的色彩搭配,而「图片取色」这个插件可以识别图片中 5 种主要颜色,方便我们学习配色、汲取灵感。

用起来也很方便,选中图片,再点一下「图片取色」,就能精准识别图片中配色,并按照颜色占比依次展示。

 

04 点一下秒安装/卸载

今天的插件就先分享这些了,上面的演示我都是用「即时设计」做的,Sketch、Figma 应该也都可以找到不少类似的插件。

如果想要快速感受一下的话,可以直接打开即时设计,插件广场里还有很多,安装卸载也很方便,点一下就行。

安装完回到编辑页面就能直接使用,展开的列表里,每个插件在名字旁边还配有简单易懂的图标,一眼看过去就能更快地定位自己想要的插件。


总结

提高效率减少重复操作,到整合常用资源让取用更顺手,再到图形色彩的方案提供

即时设计充分照顾到设计过程中最常见的一些问题,已经能满足我大部分的需求了。

除了已有的这些,即时设计还在持续上新,官方还表示之后也会像 Sketch、Figma 一样开放第三方插件

现在只想喊他们快点开放,我已经迫不及待想看看,国内的大神能做出什么样更好用的插件工具了!

链接我放在下面了,对这些插件感兴趣的同学们,可以去体验一下~

即时设计插件广场:

https://js.design/pluginSquare

 

原文地址:菜心设计铺(公众号)

作者:菜心

转载请注明:学UI网》太简单了!别人要做一小时的页面,我用这些效率插件一键生成

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

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

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

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

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



金刚区图标设计的 10 大风格

seo达人


图片

 

目录

一、晶白风格的扁平突破

二、磨砂玻璃质感的运用

三、强化图标微质感的深入

四、2.5D 风格的巧妙结合

五、三维的立体感强化

六、插画风格的简化融入

七、立足于品牌的图标设计

八、造型叠加丰富色彩搭配

九、动效图标强化局部差异

十、主题化图标风格普及

 

一、晶白风格的扁平突破

晶白风格是通过白色质感来实现的,通过对图标元素进行透明度变化、投影、内阴影、外发光等进行设计,使得更有层次感。

相较于扁平化的图标设计来说,晶白风格更有层次感和质感,作为金刚区图标设计运用非常普遍。除了通过白色不透明度渐变来实现以外,也会随着背景或者环境色的变化融入色彩渲染,呈现出更丰富的设计细节。

晶白风格图标就是通过两端白色渐变,配合两端颜色不透明度来进行深浅控制,也可以通过内阴影和外发光等来增强质感。众多设计软件都可以实现,灵活性非常高。

图片

 

二、磨砂玻璃质感的运用

磨砂玻璃质感的设计表现是近些年较为流行的设计趋势,被广泛运用到视觉设计的众多领域。在 UI场景中作为视觉感强化被普遍应用,其中在图标设计上的表现尤为突出,呈现出了众多的优秀案例。

金刚区作为产品架构中的重要组成部分,也是更新较为活跃的部分,对于视觉感的要求非常重要。磨砂玻璃质感的图标很多产品都会阶段性使用,也是因为这一类风格具有典型的特点和视觉张力,能够形成比较大的视觉差异,带给用户不错的感官体验。

磨砂玻璃质感图标可以通过 Sketch、Figma 等软件的背景模糊功能实现;如果是 PS 和 AI 等没有背景模糊功能的软件,则可以通过模糊度结合剪切蒙版来实现。实现的方法很多,大家可以多多尝试,这是一类比较容易掌握的图标风格。

图片

 

三、强化图标微质感的深入

图标设计从写实到扁平,再到微质感,都在不同的时期进行改变,通过风格的优化避免用户的视觉疲劳。写实类图标视觉疲劳度较大,在年轻化的趋势中显得过于繁琐,而介于写实和扁平之间的微质感被深入探索。

微质感的深入可以使得图标风格突出,质感和层次感强化了图标的立体空间感,在整个界面中可以形成视觉差异。可以体现出模块的重要性,也是图标设计感体现的一种方向。

通过渐变色、不透明度渐变、投影、内阴影等形成层次变化和光影效果,多图层刻画来强化图标质感和层次感。

图片

 

四、2.5D 风格的巧妙结合

2.5D 也称之为伪三维,在前两年非常流行,作为插画风格延伸出来的,当时 2.5D 插画被普遍运用到众多领域。把一个独立元素作为原子,通过原子的数量分布形成 2.5D 场景。

将 2.5D 风格结合到图标设计中,可以使得图标更容易形成立体感,设计师不会受制于透视基础的薄弱。无论是 C 端还是 B 端场景中的金刚区图标都比较适合,很容易基于简单的立体造型上设计出丰富的变化。比如结合玻璃质感、微动效或者其他设计趋势均可,设计的驾驭度很高。

2.5D 风格的图标很容易掌握,只要绘制好基础原子部分,就可以演变形成各式各样的 2.5D 造型。可以通过 AI 软件的 3D 功能轻松绘制,大部分场景都是基于立方体、圆柱体等基础造型进行变形。

图片

 

五、三维的立体感强化

三维类的图标设计相较于 2.5D 风格来说,空间感和透视角度更加深入,光影的变化更加丰富。图标设计中的三维立体感强化,对于设计师的要求更高,掌握一个三维软件需要一定的学习成本。

随着 C4D 等三维软件的走热,掀起了一股学习热潮,被运用到金刚区图标设计中,带来的视觉效果也是非常不错的。较强的空间立体感和光影效果,在界面中的视觉呈现尤为突出,也能带给用户更好的感官体验。

图片

 

六、插画风格的简化融入

随着用户对于感官体验的升级,风格特征的差异化体验至关重要,而插画风格的融入可以提升图标设计的特征感。

插画风格运用到图标设计中,需要做简化处理,可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中,不仅可以使得图标具备差异化的视觉效果,也能烘托出整体设计的质量。

通常矢量风格的插画类图标比较常用,由于图标占比限制,不合适表现特别繁琐的插画风格。可以是微场景的插画表现,或者是局部元素的插画表达,这一类图标风格将会在未来被广泛运用,以此来提高图标设计的视觉差异化表达。

图片

 

七、立足于品牌的图标设计

立足于品牌做设计,这是设计师需要深入探索的方向,而金刚区图标设计亦是如此。品牌基因融入到图标设计中,可以辅助突出产品的品牌感,也能形成设计表达的差异化。

品牌基因化的图标设计具备一定的特征性,也是视觉差异化的一种形式。通常的做法有将品牌色全部融入图标中,或者品牌色作为图标配色点缀;也可以提取品牌 LOGO 辅助图形形成基因图形,融入到图标造型设计中;也有结合吉祥物来突出品牌感的,融入吉祥物造型、局部图形、轮廓图形等;如果图形角度无法提炼,也有提取品牌文化、服务特征、用户群体特征、行业特征等,从中提炼关联性的图形融入图标设计中,以此来强化品牌感。

品牌作为设计的思考起点,不仅可以输出差异化的设计作品,也能串联起整个项目设计的规范。

图片

 

八、造型叠加丰富色彩搭配

如果觉得质感一类图标表现力比较繁琐,但是又不想只是简单的线性或者面性图标,造型叠加和配色叠加形成的图标风格算是介于两者之间的存在。

通过图形之间叠加丰富图标造型,叠加部分配色的调节丰富图标色彩搭配,形成的图标风格比较年轻化。视觉效果也是深受年轻用户的喜欢,带来不错的感官体验。

这一类风格的图标可以通过布尔运算设计图形部分,颜色的叠加效果可以通过图层样式实现,也有一些是图形分割之后进行分别着色的。通常叠加部分的颜色会往更深的方向延伸,大家可以尝试不同的形式去进行配色,选择符合主题的图标配色效果。

图片

 

九、动效图标强化局部差异

微动效运用到图标设计中尤为普及,特别是在金刚区模块,可以作为突出功能的强化。动效图标已经成为一种独特的表现力,相较于静态来说更有吸引力,也能带给用户更加趣味性的感官体验。

在金刚区模块中,动效图标通常是用于区别特殊功能,或者需要重点突出的服务或者主题活动等。不改变整体图标的风格,只是动态和静态的区分,需要个别做动效,形成表现力的差异才能达到重点突出的目的。

作为设计师来说,动效也是需要掌握的基础技能,可以提高我们的设计表现力,也能将交互动作表达得更清楚。

图片

图片

 

十、主题化图标风格普及

随着情感化设计的普及,金刚区图标在特定主题节日也会进行氛围强化,主题化图标设计越来越多。

比如在春节、中秋节、国庆节、端午节等场景中,根据主题设计图标更能体现我们是有温度的产品。可以是主题元素的融入,或者主题氛围感的渲染,要嘛就是主题文案的融入,形式已经是非常丰富了。虽然不同节日主题效果各有差异,不过这一类主题化的图标设计,已经成为非常普及的风格特征。

除了节日主题以外,根据运营需求也会进行主题化强化,众多自定义主题活动也会结合到金刚区图标设计中。这一类视觉表现力比重较大,视觉感统一性较强,带来的视觉张力和感官体验都非常不错。

图片

 

小结

金刚区在产品中就像百变金刚一样,随着众多因素而变化,是更新迭代较为活跃的。图标设计的风格也是丰富多样,本文仅是抛砖引玉,总结了 10 个较为流行的图标设计风格或者趋势。

希望这些案例总结可以加深大家对于金刚区图标的风格认知,大家也要继续体验探索,总结出更多风格特征,强化我们的图标设计能力。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》金刚区图标设计的 10 大风格

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

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

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

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

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



构图太常规?教你一个过稿率超高的构图技巧

seo达人

很多平面设计作品都喜欢用几何图形来进行构图,比如把画面布局在一个几何图形内,或者用一个几何图形与画面主体元素进行组合。

图片

图片

图片

 

一、这种构图有几大优点:

1.能使画面更整体、更聚焦。

把画面控制在一个几何图形内,就好比用栅栏把羊群围了起来,各元素可活动的范围缩小了,外轮廓变得更简单了,画面自然会更整体、更聚焦。

图片

 

2.加强画面视觉冲击力

几何图形内的图形集中区域,与几何图形外的留白可以形成强烈的虚实对比、轮廓对比、色彩对比等,故视觉冲击力可以进一步加强。

图片

 

3.增强形式感

如果画面的元素比较单一,而且也不是很有创意和特色,那么形式感和设计感往往会比较弱,而如果用几何图形进行构图,通常会对原有的图形进行裁切或规范,画面就会变得没有之前那么普通。

图片

 

4.减少创作时间

这一点在插画作品中尤为明显,如果采用全屏式构图,那么设计师就得把整个矩形画布都画满素材,但是如果用几何图形构图,那么重点展示主体区域就好,没有足够的空间展示太多辅助的元素和场景,所以可以省去很多创作时间。

图片

 

5.便于文案排版

对于一些文案比较多的画面,如果画面布局太慢,那么文案的排版就会比较麻烦,如果把文案压在画面上排版,既会破坏画面的美观性,也会影响文字的识别性。

图片

 

二、常用的几何图形

1.圆形

圆形是最常用于构图的几何图形,因为圆形本身就是一个很完美的图形,美观、平衡且聚焦性强,圆形与矩形的版面也能形成鲜明对比。

图片

图片

 

2.圆环形

圆环的内部空间比较小,所以适合素材比较多的情况,也常常会配合圆形一同使用。

图片

 

3.半圆形

半圆虽然没有圆形那么好看,但是更特别、更平稳。

图片

图片

 

4.椭圆形

由于正圆在很多时候并不适合展现某些画面,这时候椭圆也是一个不错的选择。

图片

图片

 

5.圆角矩形

圆角矩形融合了矩形和圆形的一些优点,既不会像矩形那么硬朗和常规,也比圆形更灵活,更能适应不同的画面需求。

图片

图片

 

6.菱形

菱形的感觉比较尖锐,适合一些科技属性比较强的风格和品牌。

图片

图片

 

7.三角形

三角形与菱形一样,也具有较强的科技属性,且通常会用到三角形而不是正三角形,因为正三角形过于平稳,缺少动感。

图片

图片

图片

 

8.其他图形

图片

图片

图片

 

三、注意事项:

1.根据画面特点选择合适的几何图形

首先,每一类几何图形都有一定的调性偏向,所以要根据自己的产品调性和主体调性来选择一些气质合适的图形,例如母亲节、清明节的海报用三角形来构图就不太合适。

图片

 

其次,如果想把现有的画面用一个几何图形进行剪切,那么这个图形最好能够比较完美地保留画面的主体部分,同时也要保证该几何图形内的构图是饱满的、平衡的。

图片

 

2.关于“破”的处理要节制

用几何图形进行构图时,大多数情况下都可以使用“破”的处理方式,即让图形内的部分元素打破图形限制,这可以使画面看起来更活泼。但也要节制。

❶ 避免过多元素使用“破”的处理,否则画面容易变得凌乱、不聚焦。

图片

 

 

❷ 不是所有采用几何图形构图的画面都要使用“破”技巧。对于一些很简约、调性比较高级、画面是摄影图片的设计,通常不太适合使用该技巧。

图片

图片

 

3.排版可以呼应几何图形

为了避免文字排版与图形完全是割裂的,我们可以在排版时与几何图形形成呼应,比如用文字绕着图形排版。

图片

图片

 

或者是把文字与图形交叉排版。

图片

图片

图片

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网》构图太常规?教你一个过稿率超高的构图技巧

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

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

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

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

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



近期输出的一些UI设计探索作品

seo达人

软件:Sketch & Adobe Illustrator

图片  

以下作品主要是练习通过 Sketch & Adobe Illustrator 软件配合实现立体图标设计,掌握通过色彩的变化营造质感和光感。 

图片
图片 

以下作品主要是练习圆柱体的绘制和光影的处理,以此来表现排行榜。配色比较趋向于年轻化,青春活泼的风格探索年轻化的设计趋势。

图片
图片 

这一组作品主要是研究极光风的配色和磨砂玻璃效果的结合,用磨砂玻璃层作为图标的保护罩,带来朦胧美的感官体验。

图片
图片
图片
图片 

随着网民年轻化的趋势,UI设计也逐渐趋近于更加青春活泼的风格。探索了一组低饱和度高明度的图标配色,利用不透明度渐变实现晶白风格图标。

图片
图片 

这是在五一假期前绘制的一个相机 APP LOGO,探索多色环形组合来进行色感营造,利用简单的内阴影和蒙版工具刻画效果。

图片 

一组带给大家好心情的 IP 表情设计作品,超椭圆的造型和青春可爱的风格结合,练习表情设计的能力和光影把控的技巧。情感化设计的技能被逐步放大,也是提高作品亮点和视觉感的一个不错的方向。

图片
图片 

想要休息的时候来了一个灵感,大家都喜欢喝咖啡,我还是比较喜欢喝茶~O(∩_∩)O哈哈~有感而发绘制了一个关于茶的 APP LOGO。

图片 

带有纹理的球体绘制,你可以想象这是一个瑜伽球。利用 AI 软件的 3D 功能进行造型绘制,然后利用 Sketch 软件进行质感细节的刻画完成。

图片 

这组作品主要是研究 B 端设计的栅格化系统,以及配色风格的尝试。随着 B 端 C 化的趋势,在 UI设计层面的风格探索中,将会变得更为大胆,突破风格定义的束缚。

图片
图片
图片
图片
图片
图片 

以上是近期输出的一些 UI设计探索作品,后期将会继续探索更多设计风格和细节的刻画。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》近期输出的一些UI设计探索作品

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

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

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

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

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



数字盲盒|在虚拟世界探索「盒」的边界

纯纯

“生活就像是一颗巧克力,你永远不知道下一颗是什么滋味。”盲盒的诞生,给“box”的意象又增加了一份神秘。2020年作为大众广为人知的盲盒元年,随着12月第一支“盲盒股”在港交所挂牌上市,盲盒零售店和自动盲盒机都如雨后春笋一般席卷了大小消费集散地。抽盲盒、买盲盒、再到次级市场交易盲盒,一个百亿盲盒市场被快速“拆”了出来。


从潘多拉的墨盒、薛定谔的猫,再到盲盒的隐藏款,“抽盒”在搭上潮玩这趟商业快车的同时,也在不断试探年轻的好奇心和为此豪掷千金的底线。根据《95一样玩家剁手力榜单》显示,收藏盲盒手办从最开始的“亚文化”消费,已经成为当下95后热度最高的收藏爱好。也不难理解,盲盒低至50-80元的单价,和Z世代年轻人群体逐渐下沉的消费趋势一拍即合。而搭载了游戏及商业IP的盲盒,除了有得天独厚的爆款产出特性,也在更多方面和更高层次上满足Z世代年轻人的好奇心、收集欲并拓展了线下社交的可能性。


那么同样备受年轻人喜爱的社交产品手Q,在这趟“万物皆可盲盒”的浪潮中,又可以扮演怎样的角色呢?我们给出的答案是:数字盲盒。借助平台已有的大量IP,数字盲盒相比线下实体盲盒搭乘IP红利的成本更低,推陈出新,以速度和“量”取胜是一大优势。同时,我们也希望以日签打卡的方式,在满足手Q、Z世代用户收集欲望的同时,打造一种基于线下盲盒收集但同时潜在拓展数字“盲盒”社交的新玩法。




01

——————————

从线下到线上


在传承线下玩法的同时打造线上盲盒新玩法,则需要考虑到许多问题。我们留意到,线下盲盒有许多优势是无法照搬的,比如实体盲盒的触感,购买、拆开实体盲盒所获得的即时心理反馈等。但盲盒的核心特点,就在于它给普通的商品增加了游戏属性。


因此,我们也尝试通过挖掘虚拟盲盒的独特之处,保留并增添整个抽盒过程的娱乐性和惊喜。从设计层面而言,我们从一下三个角度切入构思:


1) IP:筛选线下盲盒成功案例,敲定以Q萌的盲盒为主推IP;并且线上盲盒可以实现短平快上架IP,结合时效热点,孵化出更出圈的虚拟IP。

2) 包装:趋同于线下盲盒包装,继承实体盲盒的视觉审美体验;线下盲盒受包装成本所限,线上盲盒可以打磨出更新颖的盲盒包装。

3) 隐藏玩法:同步线下盲盒玩法逻辑,采用N+1的种类形式,在每套盲盒系列中设定一个隐藏款。在用户抽盒过程中,整套盲盒以动画轮播的方式呈现,隐藏款则用问号代替,驱动玩家好奇心。并且依附QQ关系链,引导用户交换已经拥有的重复盲盒,从而收集整套端盒。




02

————————

IP|重中之重


主打IP对品牌形象的构造有至关重要的作用。这种重要性不外乎企鹅之与手Q,因此敲定、完善头部IP,是设计手Q虚拟盲盒的首要考虑。在设计的首个阶段,我们选定了四类优质虚拟盲盒IP:


1) 自有潮玩IP:选择现有ISUX体系下已孵化成熟的精品潮玩IP,比如PUPU&蓝莓之夜,UPUP牛&牛年大吉等;

2) 自有虚拟IP:在手Q用户群中知名度高、在礼物系统中受到粉丝热捧的IP。比如多肉植物、Alice梦游仙境系列等;

3) 外部虚拟IP:联名外部爆款IP。手Q以95后年轻用户为主,也是外部各大爆款IP的目标消费者聚集地。因此我们挖掘了包括超人气虚拟偶像洛天依,迪士尼的达菲熊&星黛露春节系列在内的外部IP合作;

4) 外部潮玩IP:拥抱主流盲盒潮玩IP,将消费者粉丝与盲盒的情感从线下延续至线上。知名IP包括star moly萌力星球、迷萌假日派对、达么吉发财者联盟系列等。


敲定IP方向后,我们综合了几个方面考虑虚拟盲盒的IP设计和上架思路:


1) 目标匹配度:IP是否和手Q用户群体产生足够的共鸣;

2) 品牌定位:IP是否和虚拟盲盒平台的风格、氛围及调性协调一致;

3) 制作成本:在估算虚拟盲盒IP生命周期的基础上,是否能以较低的设计、生产及修改成本进行批量生产。




03

——————————

「盒」再一次定义视觉边界


“从Box出发”这一理念,也淋漓尽致地体现在数字盲盒视觉设定的方方面面。


03-1 LOGO

在logo设定上,我们将“盒”的意象与字母Q的形态相结合,并充分考虑移动端设备屏幕的呈现空间,以30度的轴测图视角构建出一个正方形的盒子。这样既突显了logo的存在感,又给整个视觉界面留出了充足的展示空间。同时,logo三维六边形的框架设计,也突出了产品的格调和设计感。




03-2 色彩&字体

在配色设定方面,我们提取传统线下盲盒品牌中核心玩家广泛认可的粉色,也从QQ品牌色中提取出蓝色,调和出一种明度更深的蓝色作为互补色。字体设定上,我们选择了造字工房元黑体搭配DIN的家族字体作为虚拟盲盒平台的运营字体。这款字体字形较为硬朗粗壮,但同时又兼顾圆角的设定,符合虚拟盲盒品牌“活泼,潮流,可爱”的气质定位。





03-3 Pattern

同时,我们在平台界面的视觉方面也延续logo的设计思路,通过使用30度轴测图的空间正方形,衍生为基础图形并在不同页面中配合主题品牌色使用。同时,该基础图形也在虚拟盲盒的其他页面结合产品形态灵活变形,强化虚拟盲盒品牌形象。


“盒”的涉及理念也延展到页面的涉及思路中。在抽盒延展上,我们基于30度平行透视的设计理念进行了一系列构思。首先在抽盒页面,我们将页面简单分割为上下两个部分。盒内产品放置在一个通过透视视角构建出的“桌面”上,并通过动画进行进行系列产品展示。页面下半部分则用于信息及其他相关操作。



03-4 界面应用

在ARK传播、用户赠送虚拟盲盒的界面,我们也利用30度平行透视的涉及思路,在分享卡片中对虚拟盲盒及相关产品进行了空间视觉处理。此外,贯穿始终的纯色背景在突出盲盒产品本身的前提下,也保证了整体风格的一致性。




03-5 盲盒包装


在包装设定上,我们延续线下盲盒常规的视觉惯例,以“盒”的形式进行产品包装,并以logo的30度侧轴图作为基础预览视角。众所周知,虽然线下盲盒的包装五花八门,比如浮雕、专色印刷,但最终还是落脚到“纸本”这一包装形式。相比之下,虚拟盲盒包装不受制作成本限制,发挥空间就更为广阔。在此基础上,我们将虚拟盲盒的包装设计成具有磨砂质感的毛玻璃材质。这一设计不仅让虚拟盲盒更有视觉冲击力和格调,同时雾化的透明磨砂表面也可以隐隐透露出盒内产品的轮廓和颜色,勾起用户抽盒过程中的紧张好奇情绪。


在此基础上,每个盲盒配合各系列的IP字体、规范化的系列编号、品牌LOGO和IP色,则可以高效统一IP形象,规范化输出系列盲盒包装。





04

——————————

让「盒」动起来


完成了盲盒静态视觉的构思后,就进入了动画设定的阶段。我们将抽盒UI中的动画种类大致分为三种:


一、 辅助型循环动画:限制较少的页面动画,主要目的是烘托抽盒界面的氛围。


二、 辅助操作的反馈型动画:主要为用户抽盒后唤醒的交互动画,增强抽盒结果的用户心理反馈。由于此类动画基于用户操作触发,因此时长限制较为严格。动画过长会直接减缓载入速度,消耗用户等待时长,适得其反。


三、 载入动画:动画形式简单,主要目的是在等待的过程中加入趣味的细节,动画资源要保证尽可能小。界面设计继承品牌图形设计思路,风格统一。



抽盒页面的设计是整个虚拟盲盒设计的重中之重。这就要求设计师既突出展示盲盒产品本身,又保证抽盒界面的趣味性。在底层动画中,我们继续延续30度平行透视视角的设计逻辑,使用After Effects的摄像机工具以Y轴旋转的方式做成Fake 3D的效果。在制作Fake 3D动画时,我们也使用了Lottie组件。Lottie组件的优势在于在实现动画高保真还原的同时,也可以通过在AE内替换对应素材即可在统一标准下实现量化输出,规范后续动画生产标准,提高生产效率,降低设计成本。


在底层动画上,我们也加入了四层动画进行功能和效果的区分。在叠加的首层动画上,我们对每套虚拟盲盒的所有产品进行了展示,进一步加深用户对可能拆出的盲盒产品的期待心理。在第二层和第三层动画上,我们以Z轴旋转的动画特效,将虚拟盲盒进行一种立体的空间感展示,并使用粒子效果配合光环旋转的动画特效环绕虚拟盲盒,引导用户的点击路径。同时在最顶层,也就是第四层动画,我们还加入了手Q具有代表性的大黄脸表情,并赋予它弹跳和位移的效果,增添抽盒界面的趣味性。



但在盲盒抽取结果动画设计方面,我们在项目前期的尝试中就遇到一个难题——拆盒动画最重要的部分就是盒子打开并告知用户抽中了哪款盲盒。如果每一个抽盒结果都配置不同的动画,那么单独一套盲盒“UPUP牛&牛年限定鹅”,将至少需要设计六种盲盒结果动画,不同系列的盲盒的动画设计成本也将成几何倍数增加。


因此我们需要找到一种尽可能控制开发资源和成本,同时又不拘泥于盲盒IP类型和风格的通用方案。我们设计了一款拆盒动画作为底层素材,并且搭配放大效果和粒子碎花下落的“撒花”庆祝的氛围特效,最终制作出一段不超过800ms的物品从盒子“蹦出”的效果动画,流畅处理了抽盒结果的过场动画,也完善了整个虚拟盲盒的抽取逻辑。



畅想:未来|无限延伸的「盒」

本次虚拟盲盒的设计项目时间紧,需要赶在年前新版本发布之前敲定设计细节。因此设计的重点和难点,就是需要找出一个和品牌强关联的视觉元素,提纲挈领地引导整个视觉设计方案。而我们给出的30度轴测图视角,就成功给予了虚拟盲盒空间的概念,并将这一设计细节灵活贯穿项目始终。此外,一些视觉类设计比如盲盒Z轴旋转,也需要从视觉设计师的视角出发,提前通过和包括开发在内的相关项目团队进行对接,给予解决方案。这在很大程度上也节约了人力成本,推动了项目的快速落地。


而在整个虚拟盲盒的设计过程中我们也反复思考,如何通过打磨虚拟盲盒的特点和亮点,实现超过线下抽盒的体验。比如在一开始就提到,线下盲盒从项目创立、建模、工厂生产打样、后期形态修正再经过一系列生产运输到达消费者面前,时间长、成本高。而相比之下,虚拟盲盒则在抓热点、做爆款上具备得天独厚的优势。通过和潮流IP快节奏展开合作,在短期内提升影响力及曝光度,触达大批潜在受众。


与此同时,我们也体现出虚拟盲盒的亮点.在一些特性上做到超过线下抽盲盒体验


盲盒IP选择,在线下盲盒运营策略中,从项目立项到设计师创意建模再到工厂生产打样,反复修正盲盒最终的形态,下线生产物流到消费者面前,是一个非常冗长的过程。相比线上盲盒的节奏则会轻盈很多,我们在线上虚拟盲盒中发挥特点,筛选出一些时效性强,热度高的IP,快速制作素材上架虚拟盲盒平台。以「创造营2021」为例,线上盲盒可以在最短时间内响应热点,制作出短时间内出团成员的IP素材并且上架虚拟盲盒平台,这些都是线下盲盒所无法触及的。


盲盒潮玩是z世代身边最热门的话题之一,消费主义浪潮过后,人们从新审视「盲盒」的价值意义,未尝不是一件好事。虚拟盲盒固然无法代替真实盲盒带来的重量和触摸手感,但是现实盲盒潮玩逃不开工业化的生产成本,虚拟盲盒平台通过有低成本扁平化的策略,有温度的情感化设计,和用户建立起来另一种连接。

原文地址:站酷
作者:腾讯ISUX

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

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

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

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

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


高效动画解决方案

纯纯

在终端APP中,动画非常常见,它可以辅助视觉制造焦点,同时也可以让用户交互更加顺滑,但动画的实现却是设计师和研发群体的一个痛点。如何辅助设计师设计高性能炫酷的动画、如何将设计师设计的动画准确无误的还原到终端APP上是业界不断探索和解决的问题。


图1 传统动画实现流程图


当前最好的动画设计软件是Adobe After Effects(简称AE),从AE动画制作到终端APP呈现,传统的实现方式如图1所示,有三大痛点:实现成本高、沟通成本高和性能难以保证。


近几年,业界诞生了像Lottie、SVGA这样的动画工作流解决方案,虽然在一定程度上提升了生产效率,但存在AE支持能力有限、动画性能难以保证、配套工具支持有限的问题。


1 :PAG解决的问题

——————————

PAG(Portable Animated Graphics)是腾讯PCG发布器中台自主研发的一套完整的动画工作流解决方案,助力于将AE动画方便快捷的应用于各平台终端。PAG的流程图如图2所示,设计师在AE上设计出动画后,可以通过导出插件导出pag文件,同时PAG提供了桌面端预览工具,支持实时预览效果,在确认效果后,通过运行配置上线,各平台终端可以通过PAG SDK加载渲染pag动画。


图2 PAG动画工作流流程图



与Lottie、SVGA相比,PAG增加支持了服务端。除此之外,如图3所示,PAG动画方案在导出动画文件大小、AE特性支持和可编辑性方面具有较大的优势。


图3 PAG和Lottie对比图


2: PAG支持的AE特性能力

——————————

2.1 矢量特性能力的支持

和Lottie、SVGA实现不同的是,PAG不依赖平台端渲染接口,可以实现各平台的渲染一致性。PAG与Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。


2.2 BMP预合成--全AE特性支持

无论是PAG还是Lottie、SVGA,所支持的AE特性仅仅是AE众多特性中的很少的一部分,这在一定程度上限制了设计师的创造力。针对这个问题,PAG新增了BMP预合成的导出方式,支持导出所有AE特性,适用于不可编辑的场景。其原理如图4所示,在合成的层面将渲染结果截取成图片,然后进行视频编码。

图 4 BMP预合成原理图



针对视频不支持透明通道而动画需要包含透明通道的问题,在编码的层面扩展了透明通道的支持,如图5所示。


图6 PAG矢量和BMP预合成混合导出




3: PAG导出插件

——————————

3.1 不支持AE特性提示

针对导出动画和AE设计动画存在偏差的问题,PAG导出插件增加了使用了不支持AE特性提醒功能,如下图7所示。

图7 PAG导出面板


在预览界面,同样有不支持特性的提示,如图8所示。

图8 PAG导出面板预览窗口


在使用AE设计动画的过程中,设计师可以方便快捷的提前查看使用了那些不支持直接导出的AE特性,换种实现方式或者导出成BMP预合成,有效的解决了设计动画和导出动画存在偏差的问题。


3.2 BMP预合成一键设置

在AE动画设计的过程中,PAG导出面板提供了一键设置BMP预合成的方法,如下图9所示。需要提示的是,一旦设置了BMP预合成,该合成中的文本和图片将不能再被用户编辑。


图9 BMP 预合成设置


由于BMP预合成可能会影响到可替换图片的数量,PAG同时会实时更新可替换图片的数量给设计以提示。


3.3 图片填充模式设置

在用pag设置的素材中,经常会遇到用户填充的图片与默认占位图尺寸不一致的情况,在导出面板中PAG增加图片填充的四个规则,如图10所示:


图10 可替换图片填充设置



其中:


不缩放:画面不缩放,从左上角位置开始裁剪


黑边:在保持高宽比的情况下缩放到设备的可用屏幕大小,图像不发生变形,如果图片尺寸和填充区域比例不一致,会出现黑边,为默认填充模式


拉伸:不保持宽高比填充,会发生失变形


裁剪:在保持高宽比的情况下缩放到完全填满可用的屏幕大小


具体效果如图11所示。


图11 图片填充效果图


4桌面预览工具PAGViewer

——————————

4.1 效果预览

PAGViewer支持桌面端预览PAG文件动画效果,如下图所示。支持查看动画文件中包含有多少个可编辑文本和可编辑图片,且支持设计师本地填充素材,实时预览填充效果,无需等待上线后才能确认真实效果。图片占位图支持填充图片或视频,如果PAG文件内置了音频文件,支持播放音频效果。具体效果如图12所示。

图12 PAG效果预览



4.2 性能检测

在pag动画实际使用的过程中,PAG经常遇到的问题是设计师辛辛苦苦设计的动画在终端上性能表现不佳,需要进行返工优化,同样的问题在使用Lottie方案时候也会存在。


除了效果预览,PAGViewer还增加了性能展示面板,可以很方便的看到pag动画的基本信息,如时长、帧率、尺寸、bmp预合成的数量,图层总数等,还有量化的性能指标,定量的评估pag文件的性能,如图13所示,方便设计师进行针对性的优化,而不需要等到上线前才会暴露性能问题。具体效果如图13所示。


图13 PAG性能展示面板




5: PAG的应用场景

目前PAG方案已经广泛应用于腾讯公司内外几十款产品中,涵盖了众多的国民级应用。



总结下来,PAG目前主要使用在以下几大场景:


5.1 UI动画

图15 UI动画场景


设计师设计出动画文件后,研发只需要替换预设的文本内容即可,并且文件体积非常小。


5.2 贴纸动画

图16 贴纸动画场景


5.3 照片/视频模板

图17 照片/视频模板场景


PAG支持将内置的图片作为占位图替换,并保留所有动画效果。因此可以将整个PAG动画设计成一个模板,把预设的占位图替换成用户选取的照片,自动套用效果生成视频。全程可以让设计师自由批量生产模板,无需研发介入。


仍然基于图片替换原理,PAG也支持将占位图替换为视频,实现视频模板功能。



5.4 智能剪辑

图18 智能剪辑场景


智能剪辑是围绕用户上传的视频内容,生成定制化的模板,模板本身是不固定的,可以从多个PAG文件组合而成,类似活字印刷。设计师可以利用这个特性,构建自己的特效组件库,然后对接AI的识别能力,根据一定规则组合得到无限数量的模板效果,可以做到一键出片。这块目前的典型应用场景是王者荣耀的周战报功能,随机生成游戏高光时刻视频。

原文地址:站酷
作者:腾讯ISUX

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

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

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

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

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


日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档