两套风格各有优劣，“三维风格”细节丰富，但如果把控不好，容易使视觉显得“过重”，因而对视觉掌控力的要求较高。而“矢量风格”视觉较轻量，不容易对内容产生干扰，无论是绘制难度还是使用场景对设计师的要求都相对较低，因而泛用性更高。

决定使用何种风格，往往和团队成员配置相挂钩。比如在以前的公司，视觉部分的设计由外包团队负责，那么就会面临设计质量不好把控的风险。在这样的环境下，三鱼选择以“矢量风格”为主，并制定了一套视觉设计规范：

首先我沉淀了一批泛用性较高的素材，方便团队成员快速取用。

接下来，面向团队中一些更为“高阶”的设计玩家，三鱼制定了一套易于上手的创作规则，方便让他们加入进来一起创作，从而丰富素材库。于是我把矢量插图拆解为“模型”、“贴图”、“传输介质”，各沉淀出常见的基础物料(如下图)。

最终输出给团队一套包含了各种基础模型的psd、一套包含了贴图和介质的透明底逐帧动画。

最后，我只需要通过一段使用教程，就能够教会团队上手这套素材模板。它实在是太简单了，只需要以下两步：

1. 在PS中用“基础模型”绘制出静态的效果；

2. 在AE中将“贴纸”“介质”利用“边角定位”功能贴到图形上，即可完成动画的制作。

（当然，如果不需要做动画，步骤二里面的操作也完全可以放到PS中完成）

通过这套规范与教程，三鱼把矢量绘制的难度大幅度降低，其他设计同学也能顺利地在此基础上展开创作，设计效果遍地开花，设计师和业务方都很开心。

不知道大家有没有发现，虽然这套风格被称为“矢量”，但三鱼在其中虚虚实实地穿插了很多三维渲染。下图是以前的作品，二者灵活搭配在我的作品中很常见。

https://www.zcool.com.cn/work/ZMjkzMzUzOTY=.html

后来我还尝试加入人物规范。可惜哪怕我把规范做到了头、手、脚可以自由拼接组合，大家还是只愿意用我提供的那几个“范例素材”。这时“矢量风格”的缺点渐渐暴露出来：素材使用的灵活性较低，三鱼已经无法通过完善素材库来提升大家的工作效率了。

于是我尝试制作3D素材。3D素材有个特点：即制作过程虽然很繁琐，但制作完成后，素材使用起来很轻松。比如人体模型，虽然建模的过程很繁琐，但大家只需要拿到成品去摆Pose就成了。

果然，模型建好以后，摆Pose的难度就很低了，于是顺利产出了一系列B端常用的动画循环。(想玩玩的可以找我要人模源文件，你会发现模型一旦做出来，后续的创意空间是源源不断的)。

我们把这些小动画应用于业务场景中，顺利投入工作。

后续的创作成本已经变得可控，甚至还可以自由地切换质感，根据需要来决定它是“矢量”还是“三维”。(暴露了没有仔细观察生活，姿势不太自然，见笑了…)

咳咳… 越聊越远了。不过大家也发现了，不管是我还是我的团队，随着我们对质量与效率的进一步追求，视觉风格中融入“三维”的一环是迟早的事了。相比于PS绘制，“三维风格”需要在立体的空间内设定构图，然后是建模+材质+布光，制作的成本明显高了很多。

虽然制作成本较高，但模型的细节度也是PS绘制所达不到的，而且一旦建模完成，后续的扩展自由度会非常高。比如自由地变换角度/颜色。

3D更大的优势还在于丰富的动画演绎空间。

但就像前面说的，“三维风格”对设计师的要求明显高了很多，而三鱼面对的依然是一个没有3D基础的设计团队。但这一次三鱼选择了另一种方式——面向团队成员开展3D软件培训，而且是一场有别于常规课程的培训。

很久以前，在三鱼还是个美术老师的时候，在每届学生的第一堂课上，我都会讲这么一段话：“这节课我所讲的内容，就是你们学画画所需要掌握的所有理论知识。接下来的时间里，我会不断重复它们，并和你们一起反复练习，直到你们熟能生巧！”这就是三鱼对掌握一个视觉技能的经验：唯手熟尔。只有反复且高质量的练习才是掌握视觉技能的关键。

因此我对团队的培训方式很特别，开课的第一天我就坦言：“三鱼掌握的C4D功能不超过10个，所以各位不要有压力，我只教10个功能，傻子都能学会。而且三鱼能把这10个功能用到天花板，只要你们彻底掌握这10个功能，那么三鱼过往的99%的作品你们就都会做了。所以你们也看到了，三鱼并非一个“百科全书”式的老师，倘若你们对这10个以外的功能感兴趣，去网上搜教程会比问我效果更好… 当然，虽然我只教这不到10个功能，但我会用无数个高质量的案例来反复教这10个功能，直到你们彻底掌握它…”

这种培训方式效果还不错。课程进行没多久，已经有同学能将技能应用到业务中了。而且随着可复用的场景、材质、模型资源越来越丰富，如今我们团队的3D制作效率已远超PS绘制，当设计师可以灵活选择视觉表现形式时，手上功夫便不再是制约创意的瓶颈。

其实我团队有一位设计师之前曾学过3D，但因为“没有应用场景”，学会以后又渐渐忘光了。

诶？…这哪是说他啊，分明也是在说你对吧？哈哈哈哈！

在第一堂课前，三鱼临时让大家做了个小测试，内容很简单：“钢笔工具”人人都会吧？那好，我现在在网上随便搜一张“鱼”的图片，给大家5分钟的时间，用钢笔工具把它的外轮廓描下来。

你们猜测试结果怎么样？居然没人能在5分钟内熟练地把外轮廓描下来，可“钢笔工具”不应该是每个设计师都必须掌握的基本技能吗？其实这就是问题点：“会”和“掌握”是两码事，大部分设计师所谓的“会”，可能仅仅只是了解“两个卯点控制一段曲线”而已，很少有人思考过如何以最少的卯点绘制出想要的效果吧。熟练使用钢笔工具的人，往往可以很准确地放置卯点，不熟练的人，则需要反复试错，耗费了很多精力和时间成本。

讲到这里你可能已经意识到了：不同熟练度的人使用“钢笔工具”耗费的成本是不同的，熟练度越低，成本越不可控，而当我们面对有限的项目排期时，我们就更倾向于使用成本可控的自己熟悉的手法来解决问题，于是这个方案每次都被绕开，被其它解决方案替代，其熟练度永远练不上来。

明白三鱼要说什么了吗？不是没有应用场景，而是以你目前的熟练度，根本无法控制成本。这就是为什么我只教10个功能，却要求大家反复练习反复刷题的原因，熟练度才是最重要的。

噢对了，那套人模我后来又试着用来诠释音视频场景，比如直播(Live Brodcast)、视频会议(Video Conference)、连麦(Real-Time Communication)、主播PK(Anchor Player Killing)、视频发布(Video Posted)中。还挺有意思的的，大家可以拿去试着结合自己的场景玩玩。

今天就聊到这吧，来看看我都讲了啥：

一开始我分享了两套B段反馈页的风格，并分享了源文件，算是比较正经的设计技法交流；

接下来我站在管理者的角度，讲了讲我在把控团队视觉风格的经验，以及我做事方式的转变过程，穿插分享了人模的设计技法交流(感兴趣的可以问我要源文件)；

再后来，随着做事方式的转变，我也从一名管理者变成了一名人民教师… emm

看来管理的尽头，竟然是当老师… 也不知道今天三鱼讲的这些对大家有没有帮助。

原文地址：站酷

作者：三鱼先生

转载请注明：学UI网》干货虽然迟到了，但三鱼还有私货

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

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

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

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

 

一、利用手势交互实现自动跳转 

二、手势交互带来的切歌体验

 

三、拖动进度条实时预览画面

 

四、底部功能区的延伸设计

 

五、情感化的功能引导设计

 

六、推荐模块的轮播翻页设计

 

七、提高图文布局视野感的设计

 

八、微动效增强签到设计的关注度

 

九、辅助图形强化品牌感

 

十、悬浮动效式空状态设计

 

小结

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

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

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

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

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

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

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

阅读什么呢？我觉得可以针对性一些，比如：

a.大量看UI设计作品

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

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

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

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

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

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

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

3.学习一些理论

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

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

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

又或者：

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

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

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

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

4.推荐一些网站

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

a.savee

b.pinterest

https://www.pinterest.com/

c.designweek

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

https://designcollector.xyz/design

写在最后

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

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

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

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

原文地址：功夫体验设计 （公众号）

作者：Tony

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

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

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

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

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

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

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

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

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

一、日常积累

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

 

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

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

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

五、特色的签到展示设计

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

小结

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

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