首页

设计师高效工作的利器——思维导图到底应该怎么用?

涛涛


思维导图,英文名叫 The Mind Map,是一种用来开展、记录发散性思维的图形工具。可以说是目前职业办公中使用最广泛最基础的图形工具,无论是做故事大纲、头脑风暴、任务拆解,都会进行应用。



通常,思维导图会有一个到两个中心主题,然后中心会扩展出不同的子节点,并使用连线进行关联。每个子节点,都可以继续建立更下级的节点,依次类推。


通过这种方法,我们可以建立出比较结构化的信息层级,中心主题是宏观内核,越往下级拓展的,就是越细节的信息。


而随着思维导图软件的发展和完善,除中心主题、连线、节点外,我们还可以在这个图形中添加关联、备注、图标、待办、图片和附件等内容。创建思维导图的工具在今天随手可得,无论是桌面端还是网页端,想要创建思维导图,从下方选择一个即可。



思维导图存在的价值,并不仅仅是我们要做一个方便别人理解的架构图形,而是通过它本身包含的结构层级属性,来帮助我们梳理自己的思路、想法、灵感。比如你要搞清楚进阶设计师应该具备哪些能力,如何进行学习,那就可以通过思考,查找资料,以树状图的形式记录和整理。



它最大的价值,就是帮助我们在绘制的过程规范我们的思维形式,能针对不同节点实现聚焦和深入探索与思考。而不让想法特别离散一会儿插画,一会儿体验,过一会儿又是平面四要素般毫无章法。


在互联网团队中,使用思维导图输出除了日常工作内容计划外,最多应用于和产品需求相关的表述上,有一些专用的思维导图类型需要我们认识,包含下面三种:

- 产品功能结构图

- 产品页面结构图

- 产品信息结构图


下面我们将从这三个思维导图入手,了解如何实现它们的输出,以及如果应用思维导图工具来提升日常工作的效率,以及规划自己的职业技能发展。







功能、页面、信息结构图,都是产品经理输出的内容产物,通常会置入到 PRD 中供团队成员查看和理解。但是,这三种思维导图不仅看起来差别不大,而且很容易搞混。


2.1 产品功能结构图:


我们首先介绍的第一个结构图类型,叫产品功能结构图,用来解释产品本身功能的树状图。如果学习过用户体验五要素的同学,就可以把它理解成它决定的就是范围层的内容。



通常,产品再开始进行一个新产品功能规划的时候,第一件事就是启动思维导图工具,开始整理该产品会包含的具体功能,和对应的功能层级,这应该非常好理解。


比如我们用潮汐这个 APP 举例,如果我要规划一个这样的产品,我会先考虑它包含的核心功能白噪音,然后向后思考白噪音包含哪些种类,如专注、睡眠、小憩、呼吸。每个白噪音类型里,我再根据对应场景提供更细节的功能出来。



然后,我再想到,白噪音不是只有固定一种的,而是包含非常多种,是不是就该提供一个放不同白噪音的地方,于是就增加了探索的模块。在这个模块里,包含搜索、广告位推荐、分类推荐功能。每个独立的白噪音,还可以对它进行收藏、分享等功能。



再然后,就还有添加用户系统,增加会员功能,统计功能,个性化定制等,就可以进一步完善这个图表将所有想到的功能多罗列出来。



虽然产品需求的推导前面还有别的专业分析步骤,但落实到具体包含功能的制定上,过程和结果都如上方的一致。通过思维导图逐个模块添加和细化,明确它们的类型、层级。


一个修订完整的功能结构图,就能清晰的表示这款产品包含了哪些功能和服务。


2.2 产品页面结构图:


产品页面结构图,是一个和功能结构图非常容易搞混的图形。很多产品经理在 PRD 中会在做完功能结构图以后紧跟页面结构图,两张图形中会包含大量重复的名称和相似的结构,让新手一头雾水。


页面结构图等同于体验五要素中的结构层,用来诠释产品包含的页面、层级、分支。



首先明确一个概念,就是功能并不等于页面。


一个页面中可能包含多个功能,比如专注页面中,就包含了时间、开始、暂停、停止、模式、标签、场景设置的功能。



而一个功能模块,也可能包含多个页面,比如我们在功能结构图中可能会简单表示添加声音的功能,但这个管理需要比较多的操作步骤和页面来完成。



既然我们知道功能和页面不是一回事,那么页面的类型、结构有没有必要表现呢?答案必然是肯定的,页面也需要通过树状图做完整的梳理并展示。



一个产品有什么样的页面,层级如何制定,都是基于功能分析出来的,合理的情况,是先把功能定好,再想怎么做页面。功能是产品的内核,而页面涉及到具体的表现形式。


所以,外行在规划一个产品的时候,往往是从页面入手,告诉你整个产品包含了哪些页面,大概的层级,但对功能的具体规划却往往语焉不详。


页面结构图对于设计师来说至关重要,因为它决定了我们应该设计哪些页面,可以说是决定了我们的版本设计任务和工作量。不管产品有没有提供这个图形,我们都要自己梳理出来。



2.3 产品信息结构图:


功能和页面的问题解决了,就所有结构性问题都解决了嘛?显然还没有。


五要素中还包含一个框架层和视觉层,视觉层指具体页面的样式,那得用设计图来表示,显然不是思维导图工具能实现的。那么,就剩下框架层一个还需要我们注意了。



框架层的表现无外乎就是单个页面包含的内容、交互、布局。交互和布局都是由原型图来呈现的,但不管你有什么跨时代的交互思路还是殿堂级的排版能力,都要面对一个严肃的问题 —— 界面里要摆啥?


虽说功能地图有一定的描述,但显然还是比较宽泛模糊的,设计师是需要更具体的字段内容的。这就是信息结构图存在的价值,描述每个功能模块或页面下方,包含哪些信息字段内容。


比如在白噪音的详情页中,要放哪些信息?就一个音频文件,我们要往里塞什么好。如果作为产品我的出发点就会是丰富这个页面的一些信息,让用户更有欲望使用,或者进行识别。



仔细整理这些信息,你会发现不少页面虽然看起来简单,但是实际信息量一点都不少。而这些信息,不是设计师还是开发随手做的,都是经过产品规划才落地的。


每个具体的信息,类似开发环境中常说的 “字段”,它也确实是产品经理工作中后续和开发梳理字段表的雏形。


所以,到这里我们也就基本了解了项目中最常用的三个具体思维导图。它们包含一定的先后顺序,“功能 —— 页面 —— 信息” 依次推导,从核心到细节。


梳理这些内容,对后续我们展示、理解项目会起到非常积极的作用,也是 PRD 文档中必备的图形元素之一。即使项目环境中不需要设计师自己上手,你也要保证可以明白它们各自的作用,以及看懂它们在实际文档中表述的内容。







除了在产品说明中使用思维导图,它还可以应用在我们工作和学习领域中的方方面面。我们就分别从这两个领域切入来讲一下设计师如何利用思维导图,提升自身能效。



3.1 工作领域


在工作上,设计师可能也需要在竞品分析里输出上面这3种图形,但还有很多别的工作场景需要我们应用,最常见的莫过于工作待办事项的整理了。


比如我们对一整个项目的工作内容进行梳理和评估,那我们就可以根据时间线或者内容类型,将所有要做的事情梳理成树状图。



或者,做用户现场访谈这种调研,一个跨度接近一周的工作,我们也可以用思维导图将前后需要完成的工作和顺序解构记录下来。



任何复杂的工作流程,只要经过结构化的拆解,就可以细化成更容易理解和执行的步骤。也更能帮助我们判断工作量和制定时间计划。



3.2 学习领域


在学习领域上,思维导图最常用的在我看来有两个方向,一个是对自己知识体系的整理,另一个是对于学科、书本的知识点整理。


虽然我们可能在各个干货或者公开课里,看到很多有关职业技能树的说明,并伴随不同的通行类型。但它们都只是对内容讲解和输出的一种抽象图形解释,用来辅助作者意图的表达。


比如我们 B 端课程中使用的 B 端设计师技能掌握图形,采取圆的形式,这样讲解起来更方便,也更好展现流程(树状图会太长根本放不下去)。



但对于个人的实际学习来说,这种图形是没办法直接进行记忆的,而且显然可以整理得更细致,所以我们就可以通过思维导图的形式,对自己职业需要掌握的技能整理下来,作为自己的学习目标。



一个灵活的思维导图,会随着你对职业的认识加深和计划的调整始终处于一个更新的状态,辅助你对当前已经掌握的,和准备掌握的技能有更全面的认识。强烈建议所有同学都培养这种习惯。


再者,就是进入到更细节的领域,比如一个简单的技能,还是一本书,通过思维导图完成知识点的拆解和整理。这在网上是最常见的思维导图,就不在这里多做介绍了。








最后一点,就要简单解释思维导图的输出了。如果我们做的思维导图仅仅是给自己看的,那么就没有输出的需求,但如果思维导图是要展示给别人的呢?


对于一般的评审还是方案说明,我们只需要在导出思维导图前,根据展示的画布,调节方向、类型,以及精简展示内容的数量,让文字能被正常看见即可。



但如果我们要在作品集中展示呢?相信大家已经看过不少作品集中包含思维导图展示页面结构的案例了。



见过非常多新人在问这类思维导图要用什么软件制作,答案是本文罗列的那些工具都做不到上方案例的效果。要想在作品集的展示中获得良好的观感,就只能自己手动绘制。


也就是说,你们要自己用 PS/AI/Sketh/XD/Figma 等软件画一遍。你可以根据当前的场景和氛围去设计合适的树状图样式,我就不慢慢做怎么画树状图的软件教学了,只强调一个细节,就是连接的弧线应该要怎么画才准确。


不管你使用上下还是左右的布局,如果应用到弧线,就不能每个弧线全用肉眼预估来拖拽贝塞尔。最简单的做法,先确定出包含几个二级节点,画出等距离的横线,然后先拖出最上或者最下的弧线,确保控制端点都处于水平方向。然后复制这个弧线,将对应一侧的端点移动到对应横线上去即可。



切记要保证弧线的一致和稳定,而不是歪歪扭扭的。再之后,想要设计成什么样的风格,增加什么样式,就根据你们自己的想法决定了。






强烈建议大家日常多使用思维导图,因为它能很好的锻炼我们结构化思维能力。用的越多,你就会发现在你生活困扰你的问题就会越来越少。



 蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



作者:酸梅干超人    来源:站酷





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



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

这次把最近大热的数据可视化行业讲讲透

涛涛

这两年互联网行业在 C 端市场上的增长已经不足以吸引大众和投资者的视线,B 端作为一个新的热点开始被追捧。

但 B 端是一个泛指,它是由若干面向商业场景的不同细分行业组成。包括云服务、SAAS、PAAS、定制系统、数据可视化、智慧平台、商用 HMI 等等。

不同 B 端细分行业差距是非常大的,就像游戏 APP UI 和一般软件 APP UI 完全是两种职业一样。每当我们讨论 B 端行业前景,就一定要聚焦到具体的行业类型,否则就没有讨论下去的基础。

而我们今天重点聚焦的,就是目前声势极大的数据可视化行业。



这是最近很多同学咨询和关注的领域,也是各大显卡厂商、3D 引擎发布会上的常客。



各种让人眼花缭乱的图例和技术应用解说,很容易让我们产生未来已经加速向我们走来的 “幻觉”,此时不抓紧时代的机遇投身数字化界面的设计,更待何时?

但我还是要劝大家别光顾着鸡冻,冷静下来好好分析这些行业和市场状况,当你了解的越多,你就越会发现,这个职业方向和你们想的不太一样……

首先,数字可视化领域也是一个比较笼统的行业,它依旧可以拆分出若干细分领域。但我先简单根据视觉展示类型把它们分成两大类,平面展示型和3D展示型。为什么根据这个分而不是商业场景,下面会做进一步解释。

首先,数据可视化不是用了花哨的 3D 视觉才叫可视化,平面展示类型是绝对不能忽视的一个方向。它的主要应用场景集中在商业 BI ,统计分析工具等。

比如统计并查看网站、应用、店铺数据的平台。



这类产品有非常广泛的使用场景和需求,是现代企业和产品运营的基石,它存在的价值是毋庸置疑的。

而另一类 3D 展示型的细分发展方向,包含展示大屏、数字孪生、智慧项目、商用 HMI 等类型。



这类项目更多是由技术发展催生而来的 “新需求”,和 5G 的发展是高度相似的。我对这个行业的发展潜力是认可的,但对设计师从事这个行业的总体前景持悲观态度。

下面,针对真正的数据可视化设计师,我会从下面几个维度展开讨论(唱起反调):

- 知识门槛

- 行业特征

- 团队价值



数据可视化是对数据信息进行图形化设计的过程,这个行业不是这两年才出现的,而是由来已久。

从世界上第一个图表的诞生之后,就有无数统计学家和设计师投身到这个领域中,发明和设计出各种精妙绝伦的图形。



数据可视化的重要性不会比任何其它设计行业低,但是,数据可视化重要性的来源,是由数据本身的价值赋予的。因为诠释数据的方式精彩,所以有价值,而不是仅仅是因为你做得好看且花哨。

更进一步说,就是数据可视化的价值是被统计学赋予的,而统计学是被这个世界真实需要的。

但很可惜,极少有 B 端设计师会投入精力到统计学的基础知识和应用,这就导致很多设计稿中,连对数据的展示应该用折线还是柱状都分不清。

或许你依靠经验可以提升对一些基本图表使用的心得,但是,进阶的可视化设计需求就靠几个简单的折线、柱状、饼图就能解决嘛?那下面这些图形应用需要掌握什么?



复杂的可视化应用场景,不仅需要设计师对统计内容和数据应用有主动地分析,还需要对计算机图形学有一定的掌握。先不说门槛极高的 R 语言应用,但凡涉及到区级以上的地理信息可视化,就一定需要应用 GIS 工具的应用,导出并转化数据包。



除了 2D 以外,3D 可视化的项目,所需的知识储备就更进一大步。很多新人的认知以为设计师的工作只要用 3D 软件建模并输出就可以,学会 C4D 就可以做可视化项目。

这和以为掌握烤箱的功能就可以做出美味的蛋糕性质是一样的……

前面说过,3D 可视化是由技术发展催生出的行业,它的应用受到技术的影响非常大。因为 3D 应用实在是太复杂了,比 2D 图形复杂好几个量级,这就导致设计可以落地的限制远远超出新手的认知。

常规的 3D 项目,必然要借助相关的图形协议或者引擎。比如新手刚开始都以为的 3D 可视化就是网页中运行 3D 效果,而网页运行 3D 就是借助 WebGL 图形协议实现的。



由于各种技术和硬件限制,WebGL 的性能是奇差无比的,因为它的图形绘制渲染主要依靠 CPU 来完成,只要项目稍微复杂一点,多边形和图元数量一多,立马就会让电脑变卡(CPU占用量暴涨)。同时,它可以使用的渲染效果、着色器也必然不等同于 3D 软件的高阶渲染插件 OC 或 Redshift。

因为 WebGL 太弱,目前封闭的可视化项目就转而使用其它的技术解决方案,即虚幻 Unreal 和 Unity。没错,就是你们玩游戏启动画面中显示的那俩引擎。



换句话说,现在的高端 3D 可视化项目,就是用做游戏的方式做可视化应用,只要在指定设备里安装,就可以调用 GPU 资源,实现更高级复杂的效果。



但是,只要应用了对应的引擎,就必须使用配套软件来完成渲染、动画、交互事件。即通过 C4D 或者 Blender、犀牛等软件完成建模(不同可视化项目应该用的建模软件也不一样),再导入到虚幻或者 Unity 编辑器中进行下一步的操作,然后再和开发进行交付。



因为 3D 的复杂性,导致独立 3D 可视化项目的开发流程被大幅度拉长,从而让设计师需要掌握的知识面也大大增加。中间每个步骤都充斥着各种屎尿屁的限制,我就不继续展开了。

3D 可视化设计师,几乎就等同于游戏行业中的技术美术(Technical Artist),因为游戏开发更复杂,分工更明确,技术美术作为设计师和开发之间的桥梁,帮助项目的美术能尽量在技术上被实现。

而因为可视化项目的建模精度与视觉效果要求不高(对比游戏),这些工作就要由同一个岗位包揽,设计师就没办法回避这些让人绝望的知识信息。

还有一点对比游戏行业更让人绝望的,就是 3D 可视化实际应用的技术方案是高度碎片化、没有体系的,而且技术迭代周期远比游戏行业短(WebGPU已经在路上了),这在客观上增加了设计师的从业压力(欢迎体验前端开发的压力?)。

一个专业的可视化设计师知识门槛,是远远高于一般 UI 设计师的。



当我们研究一个行业的前景时,就是研究它未来的趋势和潜力。数据可视化严格意义来讲并不是完全独立的一个行业或市场,而是其它多个大市场中的某个组成部分。

如前面提到的数字分析、物联网、工业物联,都是层次更高的商业化市场。这些都是近年来高速发展的热门行业,是带动可视化行业发展的客观依据,我就不一一找公开统计数据佐证了。

而可视化除了商业场景外,还有个在国内做可视化绕不开的话题 —— 政策。

如果具体关注过地产、5G、电动车产业的发展历程,就应该明白国家意志的贯彻可以怎样在短时间内催生出市场的高度繁荣(或者泡沫)。

而政策对于可视化的利好,就在于 “数字政府” 概念的规划中。从几年前开始就兴起的政务数字化转型,到最近国务院发布的 《关于加强数字政府建设的指导意见》,都是中央直接 “指导” 地方发展数字化的指标,是行政意志与力量的体现。

说更具体点,下面是指导意见中的目标说明,非常直白,大家可以自己体会:

到2025年,与政府治理能力现代化相适应的数字政府顶层设计更加完善、统筹协调机制更加健全,政府数字化履职能力、安全保障、制度规则、数据资源、平台支撑等数字政府体系框架基本形成,政府履职数字化、智能化水平显著提升,政府决策科学化、社会治理精准化、公共服务高效化取得重要进展,数字政府建设在服务党和国家重大战略、促进经济社会高质量发展、建设人民满意的服务型政府等方面发挥重要作用。
到2035年,与国家治理体系和治理能力现代化相适应的数字政府体系框架更加成熟完备,整体协同、敏捷高效、智能精准、开放透明、公平普惠的数字政府基本建成,为基本实现社会主义现代化提供有力支撑。

原文链接: http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm

正因国情在此,所以这些年 G 可视化项目才如雨后春笋一般涌现。智慧城市、智慧农村、智慧水利、智慧交通、智慧民政等等,都是借助这股东风蓬勃发展。



所以,商业和政务的迫切需求,催生出一大批可视化服务公司,如 EasyV、ThingJS、观远等。即使头部大厂也生怕错过这个机会,纷纷组建团队进行行业布局。如腾讯云的 Raya Data、阿里云的 DataV、网易的数帆等等,都已经小成气候,初现锋芒。

市场需求旺盛,规模快速增长,前景理应一片大好!但是……

市场总规模的扩张,带给个体的收益却不一定有表面看起来那么理想,尤其是设计师岗位。

这要先从常规 UI 设计行业说起,UI 设计师工资已经是国内设计行业工资最高的类型之一,从10年前的屌丝行业到今天能和老牌贵族建筑设计叫板,是非常了不起的成就。



而之所以有这种收入,除了移动互联网爆发以外,最重要的原因就是互联网产品的 “利润率”,可以用非常少量的职员撬动上亿甚至上百亿的利润。

如王者荣耀 2021 年全年盈利 28 亿美元,接近 200 亿人民币的利润。一款游戏的利润直接达到万科(2021年利润225亿)和中国人保(2021年利润216亿)的水平,他们都是在册员工超过 10W 人的大型企业,也是国内各自行业里的巨头,而王者的员工只是他们的几百近千份之一。

再如蚂蚁金服、微信、抖音之类的国民级互联网应用,都是用极少的员工达到让人难以置信的估值和利润,这在传统行业是无法想象的。

所以能盈利的公司会给员工开出满是行业红利的待遇,拔高行业上限的同时,也迫使那些有志于挑战巨头的新公司愿意抬高工资价码,吸引人才。

总结起来,UI 之所以平均收入远超平面、服装、工业、室内等老牌设计行业,并不是因为 UI 专业门槛更高,而是以行业规模、项目规模、利润率三个核心指标的共同作用形成。

其中,项目规模和利润率的重要性,其实远远大于行业规模,这是很多职场新人最想不通的地方。

例如广告行业已经是一个万亿市场了,除了分众这家互联网独角兽外,其它老牌广告营销公司每年财报的营收和利润大家感兴趣的可以去搜搜(下图为 21 年财报)。



看看他们的营收总额和净利润比例,以及员工总数,你自己就会得出,作为普通平面设计师的待遇,是绝对不可能超过头部互联网企业的,甚至能达到中游水平都是超常发挥的结论。

行业规模大,但是头部企业规模和利润却不高,除了行业本身的平均利润率因素外,还有一个原因就是业务是高度分散的,没有被集中在少数头部企业,供应商数量庞大,不像多数 C 端市场都由少数几家公司或者产品把持或直接垄断。

在可预见的未来,可视化行业也会处于这样的情况,竞争激烈,利润率低。而且作为 B 端服务商,不要看各家企业需求旺盛,政府各级单位招标不断,实际上每个项目的规模都不大,百万内的项目才占行业的绝大多数,这是不太符合满足我们收入期待的项目规模。

而单个项目规模在未来高速扩大在我看来也不太现实,有两个原因,一个是项目使用人数极少(通常也就几十上百人…),另一个就是对可视化项目实用性的质疑。

如果看过航天相关的报道,就会看到指挥室数据大屏相比我们网上看过的案例比起来,简陋得发指。这会是因为总局没有预算,请不起设计师和团队开发嘛?



为什么航天指挥中心没有用下面这种 “科技感” 满满,复杂的我坐下面保证除了标题一个字也看不见的 “高端设计”?



原因说出来让人沮丧,因为他们 —— 真的要看上面的信息啊!

真正能发挥可视化价值的场景并不多,很多项目出发的意义,就是为了表面工程(各级ZF单位需求,自行体会),装饰属性大于实用性。既然实用性不够高,很多甲方心里也清楚,是花钱装裱门面的,那么投入的预算就更不可能太高。

所以,我对可视化行业的整体的发展是认可的,但对单家公司或项目的预期,却是悲观的,它们没法达到我们已经习惯的 C 端和 SAAS 行业的高度。



最后,还要探讨下数据可视化中设计师的团队价值。

我们知道,一个完整的可视化项目设计与开发门槛都是非常高的,但因为高,创造的价值就高嘛?项目营收的成本占比就高吗?

答案依然是否定的!因为可视化行业的绝大多数项目都是 “传统” 的外包项目。

不管是商业是政务领域,外包最重要的任务,都是找到业务(中标)。朴素的价值观会认为,只要技术和服务够好,业务自然源源不断,其实不然。技术服务都是后验的,客户没有合作过之前是不知道的,在市场上挑选服务商,可不是打开淘宝买家评论查看分数和具体评价筛选。

所以,外行了解服务商的窗口,更多是通过熟悉的中间人介绍,或者销售的嘴。谁能拿到项目,谁就为公司创造了最大的价值。后面怎么做那是后面的事,换谁做不是做……

这就是最常见的外包企业思路,所以技术人员或者设计往往都是消耗品,没有那么强的依赖性。而在具体外包实践环节中,项目的执行决策也和一般 B 端、G 端项目不同。

我以前一直强调,B 端项目的存在价值,是用来解决业务问题,为企业 —— 降本增效。但是可视化项目往往不是用来解决问题,而是用来 —— 解决产生问题的人

尤其是面向政务的项目,在领导的需求面前,是没有体验这一说的,首先考虑的应该是 ”科技感“(结合前文理解),不然怎么展示自己贯彻上层指导意见……



这种环境对于创意类职业是非常不利的,一方面创造的价值并不显著,另一方面是由别人 “教你” 怎么做设计。长此以往,你会越来越缺失职业竞争力和发展可能。

问题二,则是因为可视化项目独立开发成本太高昂,做的视觉内容又非常固定。于是有实力的团队就纷纷投入可视化编辑工具的研发,解决最麻烦的底层图形方案。



这和 B 端的前端开源框架非常类似,把底层的代码、交互、动画、性能优化都帮你做好了,设计师和程序员可以用非常省事的完成项目的视觉内容落地。

但是,常规 B 端管理项目中,界面样式一直就不是最重要的事情,而是解决复杂页面流程和组件交互的问题。所以资深的 B 端设计师乐于应用第三方的框架来完成复杂的项目。



而在可视化领域中,多数项目并没有那么多和复杂的交互需要考虑,视觉展示效果才是第一位,绝大多数团队应用第三方框架是大势所趋。核心工作内容被影响,那才叫触及灵魂的打击。

所以,在我看来可视化设计师可以创造高价值的场景,只会出现在两种团队中。

第一种,是给其它可视化团队提供图形服务的 SAAS 工具,比如 Raydata、EasyV 这类。都需要团队有非常优秀的前端程序员和技术积累,换句话说,就是既要有技术实力又要有资金保障的团队。

第二种,则是走优质项目输出路线的小团队或公司。会有一些优秀的开发人员坐镇,再由设计师主导来推动业务发展,不会什么项目都做,会选有价值的用心交付。例如早年的 UI 外包团队 ARK、Eico、TangUX 等都是这种路线。

这两种对比目前海量的服务商来说都是凤毛麟角,第一种类型是可视化设计师发展最好的归宿,因为设计产出和图形技术发展高度捆绑,只有这样的团队才会最早最快接触新的专业技术方案。

除了这两类,不要对其它外包类公司有太多的期待。在整个互联网行业中,成熟产品团队非常不喜欢招外包设计师不是没有原因的。

至于未来是不是可视化内容会在 C 端领域打开局面,发展出一些新的应用场景,我就不过早下定论了。



最后,做个总结,给目前还没有进入可视化设计行业,或者是误打误撞进入这个行业的设计师一些职业方向的建议。

可视化设计行业和广告业非常类似,就是从业人员收入构成是沙漏状,而不是像 UI 这样呈金字塔状的,缺乏健康的增长梯度和充足的腰部岗位。



可视化设计师从菜鸟进入专业阶段所需的知识量更大,准备周期更长,技能门槛更高。在初中级阶段和一般 UI 行业对比起来 —— 毫无性价比

如果本身热爱可视化,想将 FUI 那些东西搬进真实的世界和项目里,也做好了艰苦学习的准备(说不定是你乐在其中的),那么这个的行业的头部岗位就是为你这种人准备的。

毕竟行业体量大,当然就会有真正优质的岗位出现,只是它的门槛高,没有那么多水分能挤。

如果不是异常热爱这个行业,具备较强的自学能力,或有一定的 3D 和图形技术知识积累,那么不太建议往这个职业深入发展,一般的 B 端和 SAAS 项目才会是更好的选择。



 蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



作者:酸梅干超人    来源:站酷





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



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

美工和设计师真正的差别究竟在哪?

涛涛

“做图”的人大致会有两种称呼,一种叫做美工,一种叫做设计师。

用着差不多的软件,在外人甚至很多设计从业者看来工作内容差别不大岗位,有人被称作设计师,有人却天天只能自嘲自己是个美工。

那么,都是做图的,美工和设计师的差别究竟在哪儿?


外人看来,美工是“技术工种”,而设计师属于“创作工种”

在电商,纸媒或是印刷领域里,上下游的工作内容相对固化和流程化,对设计而言可发挥的空间本身就不大。时间久了,美工可以用模块化的方式在固定的时间里产出固定的设计工作。在印刷企业中,很多设计工作者除了需要排版还需要负责打样甚至印刷器械的操控。所以设计在整个产品生产过程中的比重不大,自然就从“创作”变成了“工作”。“工”也就寓意成手工或是劳动工作的意思。

为什么很多人会吐槽,朋友找自己可以“随便”做个LOGO呢?因为在他们眼中,你的工作不是创作产生的,而是像其他非灵感类工作一样,“生产”出来的。既然生产出来的,最后出来的又不是“实物”就不存在什么成本,那当然应该是免费的。

知识结构单一,让美工只关注设计好不好看,而不是合不合理

自嘲美工的设计从业者,大多关注的是好看与不好看。

“这个好,因为这个好看。”

“那个不好,因为它很丑。”

“为什么领导选了那个不好看的,而没选我这个好看的…”

在其眼中,评判设计优劣很重要的一条标准就是好看与不好看。与别人提出自己设计方案的时候,也用好看与否的方式让别人做出选择。但审美本身就没有一条共识性的标准,所以很容易被领导挑战你的设计,很容易被客户“指点”你的作品。

设计师在设计过程中追求的不仅仅是好看这一层面。通过设计,对目标和结果有什么影响、合理性、易用性和可延续性都是在“好看”之外设计师该去思考和要去凝结在作品中的工作。

哪怕日常设计一个最基本按钮的位置、圆角的弧度、颜色,都会在设计确认之前反复的自我询问,这样做有什么理由?为何圆角的弧度是4而不是8?宽度和高度为何是目前这个尺寸?哪一个更符合大产品体系下的设计原则?

即便没有一个是与非的标准,“这样是否合理”都应该是设计师挂在嘴边最长自检的问题。

设计师定义规则,美工去执行规则

设计的初衷是解决问题。都是设计从业者,一类人在定义规则,一类人在执行规则。广告有调性的定义,产品有规范的定义,设计师会时刻的思考和优化什么样的定义,能够提升效率、能通统一识别性、能协同合作、能保证最小概率的出现错误。


在这样的规则下,另一类人在执行规则,即便是一些banner的设计,他们只做着规则之内的工作,至于为何这样规范,没有思考过,也不知道为何要这样。还有人会说,我做的banner没有规则都是自己说的算啊~但在建立这个banner的尺寸之初就是规则本身呀。

设计师的灵感来源与积累和总结,美工的灵感来源于素材

有些人喜欢积累素材,认为这样做可以为设计提升效率。很多人依靠素材来寻找设计方向,素材品质的好坏决定了他最后出品的好坏。没了网络,没了素材库也就没了思路和灵感,更没有什么创作可言。

设计师在接到需求之初考虑的不是在哪查找素材,而是在思考这个需求需要解决什么样的问题,这个设计如何执行才能满足这个需求。有些设计师喜欢整理,而且整理是设计师剥离表层干扰的一个基本能力,通过拨开表象,发现问题的本质,再去寻找解决之道。

很多设计从业者,尤其是新手,做设计都是凭着感觉,凭感觉做设计最大的问题是没有一个有效之道来保证每次设计的品质。运气好了,或是找到一个好素材,那么能做出80、90分的设计,运气不好,那就不知如何下手。

留心观察下身边的“大神”,看看他们在接到设计之后的思考路径是怎样。是忙着翻素材、找参考还是静下来画画草图,做做需求整理,这可能是美工和设计师遇到问题之后最大的行动差异。

软件思维,还是设计思维

同是看到一件惊艳的作品,美工考虑的是:

“卧槽,这么牛逼,这是用什么软件做出来的?”

设计师考虑的是:

“卧槽,这么牛逼的想法作者是怎样想到的”

思考的初衷不同,行动的路径也就不同。美工会觉得软件至上,努力学好软件之后就会成为大神。而设计师会尽可能多的去了解优秀作品背后的故事,去了解一切设计和设计之外的临界知识。积累好足够的“思维素材”再去运用到设计工作中去。

我经常听到一些年轻的设计师问我,你会哪些软件,这是个好奇且好学的问题。但软件真不是高阶或是低阶的区分壁垒。如果真是这样,那么大师们都应该是设计软件的熟练驾驭着。而恰恰相反,软件用的666的大多都是培训机构的培训老师,可能连设计师都算不上。摒弃软件思维吧,产生真正距离的一定是脑,不是手。

看到这里,有人会觉得这篇文章写的有些许的“激烈”,有些不是美工的问题,可能是年轻的问题,是新人必须经历的问题。跨越了年轻和初级,有些人的思维和眼界进阶了,但有些人还停留在上面说到的部分层面里,新手可能从美工进阶到设计,但美工却不一定都是新手。

有句话说的不是很好么:

“我有十年工作经验”

“不,你只是用一年的经验工作了十年而已。”



 蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



作者:大宝频道    来源:站酷





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



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

19大常用调性,160种配色方案

博博

矩形色块为背景色,圆形色块为画面中图片元素或文字使用的颜色。根据需要可以把其中的某些纯色转变为单色渐变,或者也可以把某些单色渐变转化为纯色。另外,在不包含黑白灰的色彩组合里,仍可以根据需要自行加入黑白灰,比如用于填充文字的颜色。


1. 高端


视觉调性高端的色彩,通常具有明度低、饱和度低、颜色数量少等特点,所以很多高端的设计都会以深色作为背景色,因为深色更显低调、更具神秘感,所以给人的感觉更高贵。然后以亚金色、银色、桔红色、白色等作为辅助色。


2.科技


想要表现科技感,色彩的整体调性通常会偏冷色系,明暗对比要强,且通常会使用渐变色。比如以深蓝色到蓝色的渐变作为背景色,然后用高饱和度、高亮度的青色和紫色作为辅助色,这时这些辅助色就会非常的跳跃,具有一种发光的效果。


3.时尚

其实所有调性的配色都应该要尽量时尚一点,即使是想表现复古,也不能太土,所以这里所说的时尚特指偏向年轻、潮流的时尚。这种色彩通常具有饱和度高、明度适中、色相对比较大等特点。葱爷这里概括了两类,一类是以纯色作为背景,这种色彩比较适合于品牌设计、网页设计、画册设计等;一类是以渐变色作为背景,这种色彩比较适合于电商设计、广告设计等。


4.酷炫

酷炫是指那种视觉效果特别张扬、甚至是极具个性的色彩搭配,比如近几年比较火的蒸汽波风格、酸性风格、赛博朋克风格、故障风格,其色彩就属于酷炫类的。该类设计通常也是以深色作为背景,图片元素会使用高饱和度且对比很强的渐变色,色彩相对较多。


5.好吃


即让人感觉很有食欲的色彩搭配,这种色彩通常以暖色为主,比如红色、橙色、黄色。饱和度较高、明度较低的组合方式通常用于餐饮行业;而饱和度较低、明度较高的色彩组合通常用于甜点、饮料等行业。


6.夏天


目前正值火热的夏季,所以葱爷专门整理了一些适合表现夏季的好看色彩,该类色彩通常会以蓝色、青色、绿色这种冷色系最为主要颜色,然后以黄色或红色、白色作为辅助色,这种色彩组合会给人清凉、快乐的感觉。


7.清新


小清新的视觉感受为轻松、柔和、淡雅,要达到这样的效果,颜色的明度通常是比较高的,饱和度偏低,常用的颜色有浅青色、浅绿色、浅黄色、粉红色等,在奶茶、女性护肤品的相关设计中比较常见。


8.快乐

快乐是张扬的、是活泼的,所以快乐的色彩饱和度较高、明度不会太低、色彩的种类会比较多,通常也是以暖色为主,但是会搭配冷色一起使用。黄色具有很强的快乐、阳光属性,所以想要表达快乐,黄色通常是少不了的。

9.可爱


跟儿童、年轻女性相关的设计,通常需要表现出可爱的调性,这类色彩通常是用冷色和暖色相互组合,颜色的明度同样不会太低,否则会有压抑的感觉,另外饱和度也不要过高,饱和度稍低一点效果会更柔和一些。


10.健康


想到健康我们立马就会想蓝天白云、青山、绿色的草地和树叶,还有黄色的小野花等等,所以蓝色、绿色、青色、黄色、白色都是常用于表现健康的色彩,红色也可以偶尔作为点缀色加进来。由于健康的调性也是要给人一种舒适、轻松的感觉,所以整体的颜色明度不要太低。


11.运动


要想让色彩动起来,对比一定要强,可以是色相对比、也可以是明度对比和饱和度对比。橙色和黄色是两个很具活力的的颜色,所以常用于表现运动的设计里。

12.科幻


这是一些科幻电影、机动游戏的海报设计常用的色彩搭配组合,给人的视觉感受是稳重而大气,科技感和神秘感并存,所以背景色通常也比较暗,喜欢用青色和黄色这种比较亮的颜色作为点缀。

13.喜庆



在设计节日海报或促销海报时,通常需要表现出喜庆的调性,有些设计师会局限在大红色、黄色、和橙色里,这样搭配出来的色彩容易土,而想要解决这个问题,一方面可以加入冷色搭配使用,另一方面颜色的饱和度和亮度也不要过高。


14.复古


这类色彩的特点是颜色的饱和度会相对低一点,而且大多数情况下,整体的明度通常也不会太高,常用类比色搭配和对比色搭配。

15.中国风


具有中国风特色的颜色和色彩组合有很多,葱爷这里仅列举了8个组合。这类色彩同样饱和度不会达到最高,有点复古和充满文化气息的感觉。胭脂(暗红色)、缃色(中黄)、绀青(深蓝色)、黛(褐色)等是中国风常用的颜色。


16.梦幻


梦幻具有奇妙和神秘的感觉,好像在黑暗中找到了一点曙光,奇遇了惊喜一般,所以大多数情况下,背景色会使用从深色到亮色的渐变。颜色相对会比较丰富,而且以渐变色居多。


17.女性


女性是温柔的,是感性的,所以该类色彩组合通常为类比色,偶尔会用一点对比色作为点缀,以增加画面的活泼气息,颜色的明度和饱和度都不能太低,当然饱和度最好也不要过高,粉色、紫色是常用于表现女性的色彩。

18.优雅


优雅可以理解为低调、高级、温和、安静,所以这类色彩的对比通常不会太强,饱和度也会比较低,整体的色彩调性会偏中性,常用卡其色、麻色,还有单色组合及类比色组合。


19.经典色彩组合

除了以上十八大调性,葱爷还给大家推荐一些经典的配色,很难把它们具体归为哪一类,但是我们在做很多设计时,用上这种配色总能得到不错的效果,比如红黄黑、红白蓝、黄绿黑、等等,在很多平面海报设计中经常能看到。



作者:葱爷      来源:站酷

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

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

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

有了这个插画库,作品亮点暴涨呀!

seo达人


一、数量非常多

我翻了好一会儿一直没有翻到底~O(∩_∩)O~,只能用数量众多来形容啦!各种小场景的插画无论是独立使用,还是组合使用,肯定可以满足很多场景需求了。

图片

 

二、颜色可以任意调节

这绝对是一个非常优秀且人性化的功能,里面提供的插画作品不像一些平台属于图片格式,只能下载固定配色的版本。这里提供的作品可以在平台自定义颜色,展开拾色器随便发挥,简直是要逆天啦!!!

图片

 

三、人性化的格式选择

该平台提供了 SVG 格式,方便下载之后进行二次编辑。如果你觉得已经很完美了,也可以选择下载 PNG 格式,也是非常人性化的。

图片

 

四、免费使用

这里提供的资源是可以免费使用到个人或者商业场景中,关于这一点也是值得推荐的理由。大家可以在平台的相关规则说明中了解到,注意时刻关注规则说明的变动。

图片

 

五、其他优势

平台还提供了一些别的风格,如果感兴趣的同学可以自行体验一下,也可以指定内容搜索,整体使用下来还是蛮不错的。

图片

 

六、欣赏一些插画作品

黑马哥为大家复制了一些插画作品,大家可以感受一下作品的风格和质量,如果感兴趣的话可以访问体验一下。

图片

 

七、获取网站链接

关注黑马家族微信公众号,后台回复关键词“插画库”即可获取链接。

unDraw 插画素材库网址:https://undraw.co/illustrations

 

八、创作一下吧!

黑马哥也运用这个插画素材库的资源完成了一组作品,以此给大家做一个案例示范,感兴趣的同学也可以尝试一下。

图片

图片

图片

 

九、布置一个作业

根据黑马哥完成的案例,大家可以举一反三。根据以下提供的高保真原型,完成一组小作业,

 


作者:黑马青年


转载请注明:学UI网》有了这个插画库,作品亮点暴涨呀!

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


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

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

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


那些要打马赛克的设计…

seo达人



提到马赛克,大家会想到什么呢?是不是爷爷家那台黑白电视没信号的时候出现的画面,还是小时候玩的街机格斗游戏里的人物(那……似乎是看小猪佩奇长大的我们不懂的世界)

图片

马赛克像素风格的诞生源于早期 8 位/16 位计算机有限的存储空间和图像表达能力。都说时尚是一个轮回,现在我们能看到很多海报设计采用马赛克的形式,以营造更强的趣味感的形式来吸引人的注意力。

图片

这次就给大家演示简单容易上手的这 4 种马赛克形式的海报案例展示:

图片

 

 

图片

夏天到了,大家一起来吃瓜吧!先画一个简单的西瓜图标,在 Ai 里执行【对象】→【栅格化】。

图片

继续在 Ai 里选择【对象】→【创建对象马赛克】,就可以得到下面这个马赛克西瓜,是不是灰常简单!拼贴数量这里跟本身图的大小有关,大家可以多尝试~

图片

这个马赛克西瓜现在都是一个个方块组成,把边缘的色块规整一下,就可以啦!

图片

用同样的方法再画一个笑脸跟对话框增强趣味:

图片

然后我们再来做一下背景,一组夏天的清凉配色送给大家,这里我用的是 Ai 里的网格工具用锚点来添加渐变色。

图片

最后环绕图形排文字,这张图形马赛克海报就完成啦!

图片

 

 

图片

我这里选用粗细笔画变化比较大的一款宋体,后面马赛克的效果处理会更明显些。

图片

打开 PS 建一个新的画板【1200×1600】,背景色改黑色,文字白色,然后把文字图层转换成→【智能对象】,选择【滤镜】→【像素化】→【马赛克】,数值如下。

图片

新建一个【阈值】图层,数值如下:

图片

就可以得到这个马赛克字体的效果啦!

图片

在 PS 里盖印一个图层然后把图拉进 Ai 里进行【图像描摹】,然后【扩展】,就可以得到矢量的马赛克字啦!然后可以更改颜色,这次我想做一个更潮流电子的感觉,所以选用了绿色,然后再加入一些装饰线条增强画面感。

图片

这里我还选了一个像素的英文字体来增强画面形式感,再加入其他文字信息跟装饰图案。

图片

然后再加入一些渐变色块,增强颜色层级,丰富画面。

图片

图片

 

 

图片

本来这里也只打算做一张案例的,萌萌心血来潮说,要不再试试?这不就又多做了一张,真是欢(要)天(了)喜(老)地(命)了。

第一张把人物拉进 PS 里处理,选择→【图像】→【模式】→【灰度】处理成黑白的,然后再选择→【图像】→【模式】→【位图】数值如下(半调网屏数值越大,方块就越小,反之亦然)。

图片

然后再选择→【图像】→【模式】→【灰度】,在灰度的模式下再选择【RGB】模式即可,把人物抠出来,我是提前在有颜色的情况下先扣了图,半调效果做了之后,按之前扣好图的人物轮廓再取一个半调的人物轮廓即可。

接着我们再来做背景半调的处理,我直接用的 PS 透明背景截图然后用处理人物的方法同样处理了一个半调背景,再叠加颜色即可(偷了个小懒)。

图片

继续丰富画面,选一个高挑的英文,在 Ai 里先扩展一下,然后再选择【对象】→【封套扭曲】→【用网格建立】。

图片

用选择工具,分别选中上中下三行的锚点,进行移动,中间的往右移动,上下两边往左边移动,即可得到:

图片

最后环绕人物摆上文字信息就可以啦!

图片

不要停,继续做第二个案例,其实第二个案例用到的方法会更简单,一秒出图不夸张,第二个想做复古一些乐队的的感觉,于是找了一张人比较多的图,拉进 PS 里,新建一个阈值图层,这不,效果就出来了!

图片

跟上面一样的方法,我先在有底色的那张上把人物扣好,然后再用这个轮廓把阈值图层的人物抠出来,好像差点什么?哦,乐队的吉他!然后我赶紧找了把吉他放上去!

图片

我觉得还可以再丰富一下画面,于是我用 Ai 填充图案的方法,加了点马赛克的纹理,再找了张斑驳的纹理叠在上面,这样复古感就更强烈了!

图片

 

 

 

图片

最近疫情又反复了,这不今天下着雨也收到了社区让我们去做核酸的通知,于是我随手拍了张图,不得不说,拍出了我的辛酸,于是我决定,这次的案例就用它了!谁手机里还没有几张街拍呢!

图片

熟悉的套路,在 PS 里做效果,选择→【图像】→【模式】→【灰度】处理成黑白的,然后再选择→【图像】→【模式】→【位图】→【图案仿色】。

图片

得到这个画面后,再选择→【图像】→【模式】→【灰度】,在灰度模式上再选择【RGB】模式,再选择→【图像】→【调整】→【渐变映射】,这个背景就处理好啦~

图片

最后配上我辛酸的文案,最后这张海报就做好啦!大家可以试试这种简单方法拯救一下你相册里的照片哦。

图片

本次教程就结束啦!快带我去你的收藏夹吃灰吧!


作者:大熊

转载请注明:学UI网》那些要打马赛克的设计…

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


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

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

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


私货来了|分享两个宝藏作品源文件 !!【移动端UI】

seo达人


图片

先看看这套数据可视化的吧。这套文件里面的数据组建跟配色都非常的丰富,而且耐看,光是吸一吸里面的颜色,都会让自己的稿子精致不少。

图片

图片

图片

 

篇幅原因截图就不一一展开了,这套素材规范严谨、组建丰富、色彩配套较多,层次分明,比较适合从事Web端、产品工具型、Saas后台、偏向于B端的同学。

亲测用起来还是有效果的,推荐大家使用。

图片 

 

接着给大家看看第二套素材,这套素材主要是移动端的APP设计,适合于从事C端、偏向于业务设计的同学。

图片

整体风格很简洁,颜色很高级,看着就很舒服。

所以如果这套素材下载下来,直接拷贝图层的颜色、阴影、还有风格化样式,可以让自己的稿子高级不少。

图片

反正我特别喜欢这套素材里面的弥散投影,右键直接拷贝图层样式参数,就能让我自己的稿子,一样拥有这么高级的投影样式啦。

图片

图片

图片

案例很多,就不展开一一给大家看了,确实好用。


原文地址:UI小学(公众号)


作者:素材干货

转载请注明:学UI网》私货来了|分享两个宝藏作品源文件 !!【移动端UI】

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


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

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

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


不会画图标,这些源文件拿去用吧!

seo达人

正文

图标设计对于UI设计师来说属于非常基础的技能要求,甚至很多入门级设计师都会画,只是画得不一定规范,或者缺少创意和质感。不过也有一些刚入行的新人设计师,图标设计的能力还比较薄弱,在项目中效率比较低。

因此图标素材成为了提高工作效率的途径,为了帮助这部分同学获得更多图标资源,黑马哥为大家整理了十余个优质的图标素材库,希望可以带给大家更多帮助。

 

1. 善用图标库

我们可以运用图标素材库的资源来提高我们的工作效率,但是不适宜过度依赖,仅限于入行前期的经验过度。

针对已经具备一定经验的设计师来说,不适合过度使用素材解决工作需求,可以将图标素材库作为灵感来源。参考别人的风格和技法表现形式,以此来创作出属于具备自己思考的作品。

图片

 

2. 图标素材库推荐

为了方便初入行业的同学掌握更多资源,为大家整理了如下图标设计网站,大家在使用的时候自行阅读相关平台的规则说明。

2.1 Flaticon

Flaticon 拥有超过 780 万多个矢量图标和贴纸等素材,提供 PNG、SVG、EPS、PSD 和 CSS 等格式。该图标素材库包含界面图标、动效图标、标志和贴纸等,作品的质量还是比较高的,可以满足很多设计场景的需求。

图片图片

2.2 Noun Project

Noun Project 提供了超过 300 万个艺术品质的免费图标,可以下载 PNG 或者 SVG 等文件以便于编辑。

图片

2.3 ICONS8

ICONS8 对于一些设计师来说比较熟悉,提供了几十款样式的免费图标素材,还有设计工具和插件的推荐等。除了图标素材以外,还有插画素材和一些不错的照片素材,种类丰富且质量都还不错,值得没事的时候逛一逛。

图片

2.4 Iconfinder

Iconfinder 拥有图标、插图、3D 插图、贴纸等素材,里面提供了非常多的图标素材,还可以通过内置的色彩编辑器进行调整。只需要简单的操作就可以对图标和插图进行重新着色,下载 SVG、PNG 格式或者复制参数等。

图片

2.5 IconPark

IconPark 图标库已被字节众多产品线使用,拥有 2600+ 基础图标,29 种图标分类,为你的设计提供更多的选择。

图片

2.6 Freepik

Freepik 提供的素材不只是图标,还有字体、插图、漫画、海报、样机、标志等等内容,种类比较丰富。图标的分类也比较丰富,素材资源众多,可以满足我们多样化的设计需求。

图片

2.7 Iconfont

Iconfont 对于大家来说非常熟悉了,相信很多设计师都去下载过图标素材,是由阿里妈妈 MUX 倾力打造的矢量图标管理和交流平台。设计师将图标上传到 iconfont 平台,用户可以自定义下载多种格式的 icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

图片

2.8 Ionicons

Ionicons 提供了完全开源的图标设计素材,用于 Web、iOS、Android 和桌面应用程序,支持 SVG 和代码文件下载。

图片

2.9 Flat Icon Design

来自日本设计师团队创办的提供免费图标素材下载的网站,和别的图标素材网站不同,该网站收录了众多扁平设计风格的图标,带给各位设计师更多样化的选择。

图片

2.10 Fontello

图标字体生成器,将你的图标拖进网站自动生成。网站也提供了众多图标可以下载。图标大小可以自动调节,然后批量选择好一次性下载,非常方便实用的一个网站。

图片

2.11 Logobook

Logobook 提供了很多黑白的创意图形,可以作为我们设计灵感的参考来源。通过对基础图形的创意灵感,探索出图标设计的想法,是一个灵感来源不错的平台之一。

图片

2.12 Iconsfeed

Iconsfeed 展示了很多的应用图标设计案例,分类也是非常的丰富,可以根据自己的需求寻找对应的设计灵感。

图片

 

小结

为大家选择了 12 个图标素材网站,大家使用时记得仔细阅读各平台的条款说明,本分享仅为参考。

3. 温馨提示

通过图标素材库虽然可以让我们偷懒一些,但是并非长久之计,一旦遇到更高要求的设计需求时,过度依赖素材容易让我们提前步入瓶颈期。要掌握图标设计的规范、风格趋势、表现技法、深入质感的方向等等,只有具备优秀的图标设计能力,才能在项目中随意发挥。

图片

4. 图标设计能力提升

图标设计入门很简单,但是从“会画”到“画好”之间却存在一定的差距。图标设计的能力属于动手能力的提升,没有捷径可走,唯有掌握方法并反复磨练。

4.1 临摹起步

临摹是图标设计训练的起步,大量的临摹可以提高软件操作的熟练度和造型设计的把控,也能不断提高简化图形的思路。临摹的量不能太低,临摹几个几十个是没有作用的,起码也得上百个起步,只有量变才能引起质变。

图片

4.2 拆解图标素材

从运用素材到拆解素材,是依赖素材到探索技法的转变。拆解图标素材的造型结构、规范参数、表现技法、配色关系、细节和一些比例关系等,掌握并还原素材的能力,这样才能不断掌握各类图标风格的设计能力。

图片

4.3 图标案例分析

具备技法层面的能力是基础,培养灵感需要积累大量案例并分析总结。体验线上的各类产品,分析图标设计的风格趋势,并形成经验总结,只有不断体验和总结才能把控图标设计的运用趋势。

图片

4.4 强化日常输出

除了完成项目需求以外,日常的探索和磨练也是至关重要的,只有经历过千锤百炼之后才能随心所欲。看到优秀的作品要去研究并转换成自己的作品,掌握技法并形成自己独特的理解。定期输出作品是为了不断强化自己的动手能力,也是持续激活脑细胞的过程,让我们的灵感源源不断的成长。

图片

 有人带好进步 

如果你通过自学无法更快的提升自己图标设计的能力,专业能力依然处于入门级或者初级阶段,那就找黑马哥带一下吧!有人带进步更快,才能在短时间内从入门级进阶到高级以上能力。

图片

黑马哥会带你分析设计思路、拆解技术难点和掌握设计原则,通过案例实战的形式让你更快的掌握。再配合日常作业的一对一指导,发现你作品中的问题并逐个修改,达到较高质量的输出。

图片

也会指点工作项目中的设计,让你在工作中更快的提高效率和发挥更高的价值,实现专业能力的落地和职场路径的晋升。

图片

 

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

作者:黑马青年

转载请注明:学UI网》不会画图标,这些源文件拿去用吧!

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


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

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

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



这回做网页不可能没思路了!

seo达人

一、图片类

图片类的网页头图是非常常见的,比如像全屏图片类的:

图片

图片

当然,这种全屏图片也是可以增加一些设计感的, 像下面这个国外摄影网站:

图片

看起来就非常的高级!

除了全屏图片的方式,还有半屏的,比如像下面这种:

图片

图片

这种基本都是一半图片,一半文字排版,很多都用在知识类网站,看起来相对中规中矩一下。

图片类型的头图还有一些图片拼接型的,比如像下面这种,三个图片拼接在一起:

图片

或者还有这种不规则拼接:

图片

图片类的网页头图还是比较常见的,上面这些形式,大家都可以多多参考!

 

二、插画类

插画类的头图就会比较有设计感了,比如像这样充满全屏的,沉浸感十足:

图片

图片

还有这种一半插画,一半文字排版的:

图片

图片

当然,随着3d的崛起,3d插画也渐渐成为了一种网页头图的设计风格,很有冲击力:

图片

如果你的网页使用用户年龄比较低,需要一定的亲和力,不妨尝试一下插图的设计方式。

 

三、图形类

图形类的头图,如果做的好,可以非常有设计感,比如一些nft类平台:

图片

图片

再比如这种:

图片

还有一些比较常见的形式,就是图形加人物,让人物从图形里破出:

图片

图片

这些都是图形的一些用法,大家可以多多尝试!

 

四、排版类

除了上面这些类别,还有一种就是信息排版类类,大部分都是文字信息内容:

图片

图片

图片

相对来说会比较素一点点,但是如果排版排的好看,依然可以出来好看的效果,大家也可以多多尝试!

 


 

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

作者:菜心

转载请注明:学UI网》这回做网页不可能没思路了!

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


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

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

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



UI元素的尺寸到底该怎么定?(下)

纯纯

因为文章实在太长,所以会分为上下两篇发布,本篇为下篇,主要内容为:

    

    - 02. 字体字号

    - 03. 图标大小

    - 04. 组件尺寸





本小节要开始介绍前面没有说的文字了,文字的尺寸至关重要,但首先理解了前面所讲的控件之后,再去思考文字尺寸的用法,会相对更容易一些,它们之间也有一些有趣的联系。

而在对控件和文字都掌握熟练以后,才能进入后面的组件设计,这是我认为的一个比较合理的学习过程。

首先我们知道,安卓和 iOS 应用的中英文字体各不相同,苹果是用苹方和 San Francisco,安卓使用思源黑体和 Roboto。


如果不知道该去哪里下载这些字的同学,可以在我公众号里回复“字体”下载对应的字体源文件。

在后面我们主要以 iOS 作为说明的对象,安卓则同理,可以直接参照 iOS 的字体尺寸设置。



一、英文的字号


在苹果的官方建议中,有罗列出比较完整的文字字号建议,但大家一定要谨记,那些就是建议,并不需要在非官方的组件中应用那些字号。下图是苹果默认字体尺寸,详见我们翻译的 iOS 规范第 124 页 (公众号中回复“iOS”可获得下载链接)。

首先我们要先划分出一个文字字号的取用范围,之后所有字体的字号设置就在那里面挑选。

在 UI 中,最小字号的依据一般有两个,一个是人眼的可见度,另一个是屏幕的显示极限,综合两者最小的字号应该在 9pt 。而最大的字号,以 iOS11 的标题字号 34pt 为准即可。



从 9-34,理论上其中每一个整数都可以使用,但我还是建议要应用一定的习惯。下面,就是我在英文应用设计中会使用的字体字号列表,为了便于记忆,我就只拆分成三种类型,初学者在使用时直接套用就可以。


    • 标题:34、28、24、22、20
    • 阅读:18、16、14、12
    • 注释:11、10、9


    注:单位均为pt

在英文应用中,我们应用的字号大小随项目复杂度决定,通常,尺寸会在五种以上,两种标题、两种正文、一种注释类字号,当然,我们还会通过字重和色彩进一步划分,不过那不在这里的讨论范围中。例如下面我使用五种字号尺寸设计出来的原型案例:



另外,在 iOS 中,字号小于 20pt 使用 SF Pro Text,大于等于 20pt 时则使用 SF Pro Display 字体,这点大家需要牢记。



数字字体则可以等同于英文,但如果有需要展示数据的需求,那么最大尺寸就要靠自己的判断了。




二、中文字体


中文字体和英文字体的最大差异在于笔画数,很多中文的笔画和结构都异常复杂,如 “嚷”、“饕”、“餐”等,所以,最小的尺寸不可能和英文相等。建议最小中文字号使用 11pt。

至于最大的中文,因为苹方并没有 SF pro 字体那么丰富的字重,字号过大会有正负形失衡的违和感,所以,最大字号的尺寸也应比英文小。



下面是我在中文应用中建议使用的字号:


    • 标题:28、24、22、20
    • 正文:18、16、14
    • 注释:12、11


    注:单位均为pt

前面做过的原型,应用的就是这些字号。



中文的字号选择范围是比英文小的,并且,中文字重数远少于英文,我们在做中文应用的排版远远比英文应用的容易。很多新手误以为英文更容易设计,那都是源自对英文的陌生,只是将字符纯粹的当成有节奏变化的几何形状而不是用来阅读的文本,而如果涉及到需要阅读的英文文本设计时,字体、字号、字间距以及行高的选择就会变得异常复杂。


三、文字的边距

讲完了字号的选择范围,这里我们就要再来讨论下一个问题,就是如何更细化地去选择字号。

首先,合理的字号是和环境息息相关的,而这种联系最多的体现在文本区域的边距上。能被合理阅读的文本段落,是需要留白的,过于拥挤的文字排列只会造成阅读的不适。

因为前面我们已经说过控件的尺寸如何设置,所以当我们在设置文字时,很多时候是根据所定义的控件的高度,结合边距来选择文字的字号,下面通过一些控件来举例。

例如我们定义了一个 40pt 高的按钮,在设置文字时,尝试将多种文字字号置入,过多的间距和过小的间距都会让按钮看起来不精致。合适的字体大小应该是 16pt。



而如果设置了一个 24pt 按钮,那么得到的结论应该是 12pt。



输入框的文字应用和按钮相同,也以上下间距作为主要参考。



字号的选择,除了本身的定位(如标题或正文)以外,是可以通过比较的方式得出最优结果的。只要稍微花一点点时间,像上方案例演示的一样将设计元素复制排列出来,就可以很快选出最适合的数值。

最后,前面说到的关于文字字号的设定,结合控件的尺寸规范,就能在下面决定组件的设计尺寸,缺一不可。

多做针对性练习,以提升对控件和文字的掌握熟练度是很有必要的。建议多做一些简单界面的临摹,并套用前面提到的元素尺寸,这样很快就能适应这种高效规范的方式了。



这一节要讲讲关于图标的尺寸,应该是最容易的地方,因为前面的内容中,我们已经规范并习惯了使用 4 的倍数作为尺寸的最小量度,那么在图标中只需要同样遵循这样的原则。从相关的图标素材下载网站就可以发现这种规律,如 iconfont、iconsearch 等等。



一、图标的权重


在设置具体的尺寸前,我们还是要谈谈权重的问题。正常的 APP,通常会包含大量的图标,而这些图标,大小并不会完全一样。如下面的案例:



之所以这些图标的大小不一样,和它们代表的功能和权重分不开关系。我们可以简单将应用内会出现的图标分成 3 类,代表不同级别的权重。


最高:页面中重要的功能入口


中等:底部导航栏用的图标



最低:一般的工具类图标



当然,这是我简化过的逻辑,类似淘宝、京东、携程这类大型应用,就还可以划分出更细致的权重类型。而不同的权重实际上就对应了不同尺寸的图标,如果有 3 种权重,那么我们在设计的过程里就会设计三种尺寸的图标。


二、图标的尺寸


首先划重点:图标的尺寸,主要指的是图标在应用中占据的矩形区域,而不是图标本身图形的区域。



我们在设计具体图形前,是先通过确定矩形区域的尺寸,再制作参考线然后进行设计的。而不是随意设计了图标再对应缩放到指定的位置。


例如,设计快速入口时,一开始我们定义出的这个组件为分割成两行四列的矩形块,即每个入口的实际大小。



所以,下面就是我对矩形尺寸定义的建议:


    • 最大:64、56、48
    • 中等:44、36、32
    • 最小:28、24、20


    注:单位均为pt


根据图标所处区域的上下间距,从上方挑选合理尺寸即可,过程与字号设置是一样的,这里就不多做演示了。


还需要注意,在一套 App 中,图标出现的尺寸数尽可能减少,尤其对于新手,只需要应用 2-4 套不同的尺寸即可,否则也会对视觉体验带来明显的破坏。


最后,就要说说组件的尺寸是怎么设置了。

首先我们要知道组件是什么,它是一个包含了控件、文字、图标的功能合集。可以是一个独立的信息展示单元,也可以完成一个复杂的操作流,是学习 App 设计中最重要的环节。




一、组件的尺寸原则


定义组件的长和宽,方式有两种,一种是根据外部环境制定,一种是根据内容调节。


第一种,即通过外部的元素来确定组件的尺寸。例如我们要设计一个头部的 banner 轮播图组件,以左右可以滚动的形式展现。那么首先要确定我们希望轮播图在屏幕中占多少比例,再确定高度。例如我们觉得大致要有屏幕 1/3 高,那么可以设定高度为 220pt(664/3),而根据上下对齐的原则,左右就由屏幕宽减去左右内边距 16pt 即可。



第二种,是根据我们里面添加的内容元素来确定宽和高。例如在首页轮播图下方,添加左右滚动的卡片,那么我们先设定里面的控件和文字尺寸,然后再通过添加内边距的形式确定组件的尺寸。



当然,也有混合的定义方式,如一开始定好宽,根据内容设定高,像花瓣瀑布流的卡片,或者定义好高来调节宽。具体使用什么形式,就要因地制宜了。


下面会通过几个常见的组件案例,来演示如何定义它们的尺寸。



二、动态卡片


动态卡片是很常用的组件,通常以卡片的形式展现。每条动态通常占据内容区域的整列,即左右减去制定好的内边距 16pt,那么就是 375-32 = 343 pt 的宽。而高度,就要根据里面所包含的元素了,如下图所示。




三、设置列表


设置列表中,由高度相同的列表项组成,它们的高和宽应该是根据设计的风格一开始就制定好,如比较紧凑的风格我们采用 48pt 的高,比较宽松的风格就采用 64pt 的高。然后我们再排列内部的元素,进行垂直居中。




四、班次信息


常见的班次信息,我们在定义它尺寸时,也是根据内容来考虑的。首先确认它是一个撑满屏幕的组件即 375pt 宽,再填入对应的字段内容。

这时候可以将上下的内容拆分成3个不同的子模块:班次、时间、更多操作,班次和更多操作采用固定高度 44pt 的方式,时间则根据内容设置边距的方式,最后得到的高度的和,就是班次信息组件的高度。




五、瓷片区


主流的瓷片区,其实也由若干子模块组合而成,而如淘宝这类会有很多瓷片区并列的状态,我们优先要考虑的,是每个瓷片区在屏幕中的占比,也就是先定义好瓷片区的高度,再拆分内容的子模块。


例如划分为两行的瓷片区,总高度为 280pt,上方的模块高度为 180pt,下方的模块高度为 100pt,里面的元素,再根据这个内容区域进行排版。



完成一个完整的组件,是根据它的内容和周围的环境决定,我们只要感觉前面几个部分所说的参数设置进行分解,就可以很轻松的定义出组件的实际尺寸。而无论任何组件,它们都没有固定的尺寸值,需要大家不断的练习掌握制定的思路。之后再设计完整的页面,或整套应用时,就能大大提升效率和设计质量。

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

作者:酸梅干超人。 来源:站酷

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

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



日历

链接

个人资料

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

存档