首页

如何做简单又高级的设计?这21个设计方法总结的太全面了,必须收藏!

seo达人


图片

现如今企业都在不断追求打造简单好用的产品,期望在产品中有更多的功能,更新的技术以及更强的能力但仍然能有一个非常轻量和简单使用体验。但通常情况下,做减法反而是最难的事情。

 

一、如何定义”简单“?

我们可以把简单定义为容易理解,不难做到的事情。然而简单是主观的,某些事情对某些人来说简单,但对另一些人来说又会很难。一般来讲,我们对任何简单或复杂的过程形成个人意见,大致分为三个阶段:

图片

为用户在实现他们目标的路上消除困难,帮助他们轻松的到达目的地。John Maeda在《简单法则》一书中提出了在商业、技术和设计中平衡简单与复杂的十条法则,核心思想就是希望做更少的动作但得到更多。

图片

《简单法则》 John Maeda: http://lawsofsimplicity.com/

Maeda是MIT媒体实验室教授,也是世界著名的图形设计师,他一直在探索如何重新定义”改进“的概念,使得这个概念不再人云亦云。这本书非常不错,所以推荐大家去看看。

 

二、什么是复杂的?

谈到简单的时候,需要考虑到它的反面范围。简单或是复杂是比较主观的感受。经过适当的培训,即使是造火箭都可能不会那么难。但有几个因素会使非常简单的任务复杂化。在产品设计中,应该尽可能地避免以下这些情况:

图片

我们应该如何应用到产品设计中?

1、建立产品的核心价值

有许多产品都希望尽可能地满足所有用户,然后成为行业中领头羊。如果你希望你的产品变得简单,就需要定义产品的核心价值,并且确定你真正想要服务好的用户群体。不是每一个产品都需要内置一个facebook。

图片

2、移除掉任何不必要的元素

变简单最直接的办法就是深思熟虑地做减法。当你犹豫这个元素要不要拿掉时,拿掉就好。次要信息,不经常使用的控件需要处理,把样式尽量弱化。就是这么简单,一旦你使用这个原则后,效果是立竿见影的。只是你需要考虑清楚,哪些需要移除掉。

图片

”简单不意味着没有复杂的功能,只是在结果上简单。简单是某种程度上描述一个物件和产品的目标及位置。不复杂是说产品本身的功能设计不是杂乱无章的,要做到这一点并不简单。“——Jonathan Ive(苹果的乔纳森)说。

3、数据转换为更直观的样式

我们日常设计的大多数产品都聚集在用户需要理解的大数据上,以便有效地执行他们的日常任务。当你知道用户对于趋势和变化更有兴趣,把数据可视化会比单纯的数字表格对用户来说更有帮助。在数据图表中,还可以根据需要显示更多有价值的信息,并将这些直观呈现在用户的面前。

图片

4、支持快速决策

用户被各种选择狂轰滥炸,不得不花时间去理解和决定,给他们增加了不必要的工作。这里可以用一个非常著名的希克定律来解释,选项增多会增加用户做决定的时间和精力。所以,如果你想提升用户体验,让用户感觉到简单,那么就尽可能地帮助用户更快地做出决定。尽可能地减少不必要的选择。

图片图片

5、太多的选择会吓跑用户

当前的心理学理论和研究肯定了个人选择对情感和动机的积极影响。这些发现导致了一种流行的观念,即选择越多越好——人类管理选择的能力和欲望是无限的。但在现实中,研究证明了相反的情况。

Jam实验是消费心理学中最著名的实验之一,减少消费者的选择有利于销售。重要的是,研究表明准确地提供较少的选择可能会提高你的销量。

图片

这个实验似乎证明了,与选择较多的顾客相比,选择较少的顾客购买的可能性是前者的10倍。它一直是选择过多的一个关键例子,即给顾客提供太多的选择实际上会抑制顾客购买。

图片

6、在有多个选择的时候提供建议

当多选不可避免时,试着增加一些建议。给选择增加推荐选项,或分享其他客户最喜欢的数据。通过设计清晰地向用户传达选项之间的关键区别。这种方法通过用于选择不同套餐的界面。

图片

7、将用户的注意力吸引到正确的区域

当你理解用户实现目标的过程时,每个步骤都有一些更相关的内容,这些内容将帮助你朝着最终目标前进。找到这些关键区域并让用户能聚集在这些区域上。(彩云注:给操作设定好清晰的优先级)

图片

8、使用颜色和排版来传达内容的层次结构

你应该经常能听到——”用户不喜欢阅读“。这没错,我们对能记住和对需要深入了解的东西是有选择性的。如果你曾经一个字都不愿意读就选择同意了用户协议,你肯定懂我的意思。有许多因素会影响传达:字体类型、尺寸、字间距、行距、大小写、颜色。用这些要素来组织内容的结构层次,使用正确的颜色和字体,将能够增强品牌感,使其更好地被识别,更有吸引力和记忆。

图片

9、合理的组织能够帮助系统看起来更简单好用

让我们做一个简单的测试。下面的2张图片,用秒表来记录下你大概花多久时间数完所有的黑点。

图片

结束了吗?就像你自己会看到的那样,计算不规则的圆点方块会花费更多的时间,除此之外,还会给你带来更多的认知负担。为什么我们会得到这个结果?因为正方形中有相同数量的点。

把这些点摆成一个特殊的矩阵,在视觉上可以帮助扫描,成组的非常好统计。在左边没有组织的方块中,我们必须逐个计算。另外,对于左图来说,有时候你还可能会统计错误,需要再次确认才能放心,太麻烦了。

图片

组织好的元素不仅仅好认,而且还非常好记。不论是操作什么样的产品,记住所有控件位置和功能非常重要。让我们做另一个小练习,一分钟前,你还在认真的数两张图中的点,现在请你回忆下两个正方形中的每个点的位置。对大多数人来说,回忆这种无序的结构几乎是不可能的。

图片

10、将内容分组

简化一个页面,有一个简单的办法就是把内容进行分组。此时,用户在处理组信息时,精力耗费很少,而不是要看大量不相关的元素。在元素或元素组周围添加边框是创建与周围元素分离的一种简单方法。格式塔心理学中有多种分组原则可以帮助物品产生关联性:接近性、相似性、连续性、封闭性和连通性。

图片

11、把大任务分解成小步骤,尝试用一列来布局

现在几乎每个产品中都有不同的表单,为了收集你的资料。有时候即使去掉所有不必要的东西后,它依然会很复杂。这些表单会让用户失去完成的动力。所以我们能做的就是把这个大任务分解成一系列的小任务。眨眼间,把这个过程进行到底似乎变得容易多了。完成小的子任务会给用户带来一部分内啡肽和继续进行的满足感。

在设计这个表单时,用单列布局替代多列布局。单列布局更容易填写。这样用户就不大需要考虑下一步要填什么,只需要沿着直线向下移动填完就好了。

图片

12、及时告知进度和当前状态

不确定性让我们感到焦虑,在操作过程中应该尽可能地给用户确定的信息。用户需要知道他现在的位置,下一步要做什么。常驻一个信息进度摘要会是一个非常棒的做法,能让用户降低认知压力,并能方便退回前一步确认信息。

图片

13、帮用户自动计算

人类大脑不擅长涉及数字的原始计算。尝试让系统自动完成所有计算对用户来说会有更好的体验。

图片

14、采用渐进式呈现复杂信息

渐进呈现是UX设计中更容易让用户理解的一种用户界面设计模式。它涉及到在多个界面上排列信息和动作,这样就不会让用户淹没在无关信息中,直至优化到所有信息都强相关。渐进呈现属于从”抽象到具体“的典型概念,包括用户行为和交互顺序。一个非常好的渐进案例就是iOS的嵌套开关设置界面。

图片

15、设计普遍接受的模式和交互

用户将大部分时间花在其他产品上。这意味着用户喜欢用在其他产品上他已有习惯来使用你的产品,他们会对你的产品的外观和性能有特定的期望。

这句话适用于从互联网产品到你家冰箱的任何数字或实体产品,反映了用户心态。但这并不意味着你应该停止创新,更多的是评估背离传统的导航或控制方式是否能让用户改变他们的思维模式。

图片

16、设计一个精简的新手引导

设计的主要目标是为了将用户与产品提供的价值联系起来。任何阻挡在用户和他实际操作之间的东西都是障碍,除非它服务于功能性需求。首次体验对于产品来说非常重要,我们人类会很快形成对产品的看法,当我们不满意就会立即离开。

你在第一次操作时,即使是最简单的任务也可能是一项挑战。有时在我们操作产品之前需要额外的学习。在数字设计中,用户期望的是产品应该足够简单易懂,他们希望根据需求得到帮助,或者在出现问题时得到帮助。提供上下文帮助,而不是预先为用户提供学习材料,设计一堆引导页。

图片

17、牢记人体工程学和使用产品的环境

简单,正如我们已经定义的,你可以多么容易地使用产品。人体工程学是设计、产品和系统的考虑因素,以使它们适合操作它们的人。大多数人认为这与座位或汽车控制装置和仪表的设计有关,事实确实如此。但它的意义远不止于此。人体工程学适用于任何与人有关的设计,包括数字产品。

1954年,心理学家保罗·菲茨(Paul Fitts)对人体运动系统进行了研究,发现移动到一个目标所需的时间取决于它与目标的距离,与目标的大小成反比。因此,要确保常用元素的尺寸较大,并将它们放置在靠近用户的常用位置。

图片

18、支持内联编辑和自动建议值

删除每个流程中所有不必要的交互、视图和步骤。用户操作系统有一个最佳速度,它被称为“心流状态”。不要用弹出窗口打破这种流畅。对于以后可以更改的所有操作/值,尽可能支持内联编辑。当有大量值可用时,应当自动建议值。

图片

19、使用智能默认值来减少认知负荷

智能默认设置是给问题预先填入答案,让用户更快地完成表单。在定义相关的默认值时,设计师需要理解用户以及他们将在何种环境下使用产品。这只有通过深入的研究和测试才能实现,从用户身上学习,并根据用户的历史数据和使用模式调整默认值。如果需要明确的选择,就将默认选项设置为绝大多数用户(比如90 – 95%)会选择的选项。

图片

20、预防错误

错误消息会带来很大的压力,让用户觉得他们搞砸了或者不能胜任任务。确保自动检查输入的数据,并对不适当的数据输入提供警报或提醒,以减少错误。要么消除容易出错的条件,要么检查这些条件,并在用户提交操作之前向他们提供确认选项。应使用强制功能保护破坏性和不可恢复的操作,以确保用户意识到他们的选择将产生的影响。

图片

21、无障碍设计

作为一名设计师,你的目标是维护易用性,确保你的产品能够被更广泛的受众所访问。全世界有超过10亿人有残疾。不要把颜色作为传达信息的唯一视觉手段(彩云注:增加图标不仅仅是为了好看,也为了提升操作的识别性)。确保文本和背景之间有足够的对比度,支持键盘导航等。可访问性并不局限于具有某些不同能力的一组用户,当针对可访问性进行设计时,你将改善每个使用产品的人的体验。

图片

 

三、总结

设计出好用简单易于理解的产品不容易,但那是一个方向,这些快速的小技巧能够快速地让界面变得简单。如有学到,记得点赞分享给朋友们~


作者:彩云Sky


转载请注明:学UI网》如何做简单又高级的设计?这21个设计方法总结的太全面了,必须收藏!

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


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


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



数据可视化与信息可视化浅谈!

seo达人


1.柱状图

2

适用场景:它的适用场合是二维数据集(每个数据点包括两个值x和y),但只有一个维度需要比较。
优势:柱状图利用柱子的高度,反映数据的差异。肉眼对高度差异很敏感,辨识效果非常好。
劣势:柱状图的局限在于只适用中小规模的数据集。

2.折线图

3

适用场景: 折线图适合二维的大数据集,尤其是那些趋势比单个数据点更重要的场合。它还适合多个二维数据集的比较。
优势:容易反应出数据变化的趋势。

3.饼图

4

适用场景:适用简单的占比图,在不要求数据精细的情况下可以适用。
劣势:饼图是一种应该避免使用的图表,因为肉眼对面积大小不敏感。

4.漏斗图

5

适用场景:漏斗图适用于业务流程比较规范、周期长、环节多的流程分析,通过漏斗各环节业务数据的比较,能够直观地发现和说明问题所在。
优势:能够直观地发现和说明问题所在。在网站分析中,通常用于转化率比较,它不仅能展示用户从进入网站到实现购买的最终转化率,还可以展示每个步骤的转化率。
劣势:单一漏斗图无法评价网站某个关键流程中各步骤转化率的好坏。

5.地图

7

适用场景:适用于有空间位置的数据集。
优劣势:特殊状况下使用。

6.雷达图

8适用场景:雷达图适用于多维数据(四维以上),且每个维度必须可以排序。但是,它有一个局限,就是数据点最多6个,否则无法辨别,因此适用场合有限。
劣势:需要注意的时候,用户不熟悉雷达图,解读有困难。使用时尽量加上说明,减轻解读负担。

数据可视化使用小贴士
饼图顺序不当

9

(最好的做法是将份额最大的那部分放在12点方向,顺时针放置第二大份额的部分,以此类推。)

2.在线状图中使用虚线

10

(虚线会让人分心,用实线搭配合适的颜色更容易区分。)

3.数据被遮盖

11

(确保数据不会因为设计而丢失或被覆盖。例如在面积图中使用透明效果来确保用户可以看到全部数据。)

4. 耗费用户更多的精力

12

(通过辅助的图形元素来使数据更易于理解,比如在散点图中增加趋势线。)

5.柱状过宽或过窄
13

(经过调研,柱子的间隔最好调整为宽的1/2。)

6.数据对比困难

14

(选择合适的图表,让数据对比更明显直接。上图的数据作用是为了比较,显然,柱状图比饼图在视觉上更易于比较。)

7.错误呈现数据

15

(确保任何呈现都是准确的,比如,上图气泡图的面积大小应该跟数值一样。)

8.不要过分设计

16

(清楚标明各个图形表示的数据,避免用与主要数据不相关的颜色,形状干扰视觉。)

9. 数据没有很好归类,没有重点区分

17

(将同类数据归类,简化色彩,帮助用户更快理解数据。上图的第一张没有属于同类型手机中不同系统进行颜色上的归类,从而减少了比较的作用。下图就通过蓝色系很好的把iPhone,Android,WP版归为一类,很好的与iPad版,其他比较。)

10.误导用户的图表

18

(要客观反映真实数据,纵坐标不能被截断,否则视觉感受和实际数据相差很大。左图的数据起始点被截断从50开始。)

信息可视化案例
信息可视化囊括了数据可视化,信息图形,知识可视化,科学可视化,以及视觉设计方面的所有发展与进步。下面是信息可视化的案例分享。
19
(上图为关系网——基于60000封电子邮件存档数据,用不同颜色深度的线条呈现了地址簿中用户和个体之间的关系,比如回复、发送、抄送。)

20
(上图通过数据化的比较,用变形的柱状图等图形,形象的展示了不同国家老师的收入水平,社会包括学生和公众对其的尊重度。)

如何制作信息可视化?
第一步:确定表意正确明确信息图表达内容,确定最主要的表现内容。
第二步:优化展现形式内容正确还不够,还要易懂。我们需要在这个步骤里寻找信息图最优表现形式,让读者 一目了然,降低理解难度。
第三步:探索视觉风格在探索视觉风格时要注意抓大放小,先定下来最主要模块的风格,再做延展。
第四步:完善细节视觉风格确定后,可根据需要添加、完善细节。
第五步:风格延展“一致”的视觉设定有助于用户理解,也能更好的提升品牌形象。所以主风格确定后,我们需要把它延展到其它有需要的页面上。

以上是分享了数据可视化和信息可视化相关内容,不过信息可视化和数据可视化是两个容易混淆的概念,基于数据生成的数据可视化和信息可视化这两者在现实应用中非常接近,并且有时能够互相替换使用。但是这两者其实是不同的,数据可视化是指那些用程序生成的图形图像,这个程序可以被应用到很多不同的数据上。信息可视化是指为某一数据定制的图形图像,它往往是设计者手工定制的,只能应用在那个数据中。信息可视化的代表特征:具体化的,自解释性的和独立的。为了满足这些特征,这个图是需要手工定制的。 并没有任何一个可视化程序能够基于任一数据生成这样具体化的图片并在上面标注所有的解释性文字。
数据可视化则是普适的,比如平行坐标图并不因为数据的不同而改变自己的可视化设计。可视化的强大的普适性能够使用户快速应用某种可视化技术在一些新的数据上,并且通过可视化结果图像理解新数据,与针对已知特定数据进行信息可视化设计绘制相比,用户更像是通过对数据进行可视化的应用来学习和挖掘数据,而普适性的数据可视化技术本身并没有解释数据的功能。

(感谢数据平台组同仁们对此文章的贡献,感谢魏茜璐的视觉配图。)

文章来源:京东设计中心

转载请注明:学UI网》数据可视化与信息可视化浅谈!

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


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


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



数据可视化设计浅析与研究(一)

seo达人

一. 数据可视化历史渊源

从人类诞生之日起,便有了信息的呈现形式,并伴随着人类发展足迹不断变迁。如今出现的任何信息可视化类型,并非一夜之前突现的新物种,几乎都是从过去经典的表达式中发展而来。

17000 年前

如果你问最早的信息图表设计师是谁,很多学者认为是远古时代的洞穴人,他们是最早用图像描绘成日常生活比如战斗,野生动物、死亡和庆祝活动等等。

法国发现的洞穴绘画遗址-拉斯科壁画,距今约17000年

 

公元前 3000 年

古埃及象形文字,作为那时的正式书写系统,开始使用符号来代表字母和概念,可追溯到公元前3000年。

 

公元前 550 年

希腊哲学家阿那克西曼德创造了第一个出版的世界地图,这可以说是最早的可视化地图了。

 

公元 950 年

欧洲人画出了基于时间变化的折线图,用于展示太阳,月亮等行星的位置变化趋势,开始出现如今的数据图表的雏形。

 

17 世纪

统计图形之父威廉·普莱费尔,发明了我们今天经常使用的折线图和条形图,也被认为创建了面积和饼图。普莱费尔是苏格兰工程师和政治经济学家,并在1786年出版了商业和政治地图集。

智能时代

随着时代的发展,智能时代AR、VR 技术的兴起,我们开始看多更多新颖的的数据可视化形式。

1992-2010年内世界小型武器和弹药的进出口贸易数据展示

 

“里约+20”地球峰会期间的Twitter话题汇集成一颗颗大树

 

二. 认识主流可视化图表

如今随着科学技术的发展,已经沉淀出丰富且经典耐用的信息可视化表达。无论在传统的纸质媒体,还是如今手机、电脑,电视等各类终端的电子媒体都得以大放异彩。目前,各大可视化工具中有非常详尽的图表类型介绍,比如 Excel2010 的版本里面,提供了 10 类共 53 个图表。AntV 平台则提供了 15 类近 200 个数据图表,现在我们就来普及一下基本知识。

常用可视化图表分类

目前主流的可视化平台把常用图表分成九大类(来自 AntV ),分别是:比较、分布、关联、占比、区间、流程、趋势、时间、地图。

1. 比较

显示值与值之间的不同和相似之处。使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小,通常用于展示不同分类间的数值对比,不同时间点的数据对比。

典型图表:柱状图、条形图、直方图、K 线图、矩形树图等

 

2. 分布

显示频率,数据分散在一个区间或分组。使用图形的位置、大小、颜色的渐变程度来表现数据的分布,通常用于展示连续数据上数值的分布情况。

典型图表:散点图、气泡图、热力图、箱型图

 

3. 占比

显示同一维度上占比关系

典型图表:饼图、环形图、堆叠面积图、堆叠柱状图

 

4. 关联

显示数据之间相互关系。 使用图形的嵌套和位置表示数据之间的关系,通常用于表示数据之间的前后顺序、父子关系以及相关性。

典型图表:和弦图、桑基图(我有点读不懂)

 

5. 区间

显示同一维度上值的上限和下限之间的差异。 使用图形的大小和位置表示数值的上限和下限,通常用于表示数据在某一个分类(时间点)上的最大值和最小值。

典型图表:仪表盘、堆叠图

 

6. 流程

显示流程流转和流程流量。一般流程都会呈现出多个环节,每个环节之间会有相应的流量关系,这类图形可以很好的表示这些关系。

典型图表:漏斗图、桑基图

 

7. 趋势

分析数据的变化趋势。使用图形的位置表现出数据在连续区域上的分布,通常展示数据在连续区域上的大小变化的规律。

典型图表:折线图、K 线图、堆叠面积图

 

8. 时间(个人认为时间可以放在各大类型中作为一个维度)

显示以时间为特定维度的数据。使用图形的位置表现出数据在时间上的分布,通常用于表现数据在时间维度上的趋势和变化。

 

9. 地图

显示地理区域上的数据。使用地图作为背景,通过图形的位置来表现数据的地理位置,通常来展示数据在不同地理区域上的分布情况。

典型图表:地图

 

常用可视化图表举例分析

1) 柱状图

条形图

展示多个分类的数据变化和同类别各变量之间的比较情况。使用垂直或水平的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度,另一个轴代表相应的数值。

优点:对比分类数据。

缺点:分类过多则无法展示数据特点。

 

# 相似图表

堆积柱状图:比较同类别各变量和不同类别变量总和差异。

百分比堆积柱状图:适合展示同类别的每个变量的比例。

 

2) 条形图(也可归到柱状图大类中)

类似柱状图,只不过两根轴对调了一下。

优点:类别名称过长,将有大量空白位置标示每个类别的名称。

缺点:分类过多则无法展示数据特点 。

 

#相似图表

堆积条形图:比较同类别各变量和不同类别变量总和差异。

百分比堆积条形图:适合展示同类别的每个变量的比例。

双向柱状图:比较同类别的正反向数值差异。

 

3) 折线图

折线图

堆积面积图

展示数据随时间或有序类别的波动情况的趋势变化。

优点:有序的类别,比如时间。

缺点:无序的类别无法展示数据特点。

 

# 相似图表

面积图:用面积展示数值大小,展示数量随时间变化的趋势。

堆积面积图:同类别各变量和不同类别变量总和差异。

百分比堆积面积图:比较同类别的各个变量的比例差异。

 

4) 散点图(以及气泡图)

散点图

 

气泡图

 

用于发现各变量之间的关系。

优点:存在大量数据点,结果更精准,比如回归分析。

缺点:数据量小的时候会比较混乱。

 

# 相似图表

气泡图:用气泡代替散点图的数值点,面积大小代表数值大小。

 

5) 饼图

饼图

玫瑰图

饼图可以很好地帮助用户快速了解数据的占比分配。

优点:了解数据的分布情况。

缺点:分类过多,则扇形越小,无法展现图表。

 

# 相似图表

环形图:挖空的饼图,中间区域可以展现数据或者文本信息。

玫瑰饼图:对比不同类别的数值大小。

旭日图:展示父子层级的不同类别数据的占比。

 

6) 词云

词云

 

7) 箱型图

箱型图

以上只是部分常用图表样式,更多详细的图标样式及其介绍,可前往阿里数据可视化平台 AntV 学习。

 

数据图表使用指南

数据图表如此繁杂多样,到底该如何灵活运用呢?

数据图表专家 Andrew abela 设计了一张汇总图,从全局出发,帮助我们快速确定图表样式

Andrew abela 绘制的图表选择指南被广泛运用

 

这其实为我们提供了一种快速选择数据图表类型的思考流程,四步走:

1.分析数据源

2.确定展示的类型

3.选择的变量类型及数量

4.选择对应的数据图表

 

三. 实用的学习通道

介绍这些基本知识是远远不够的,网络上有非常多的平台、工具和团队可以供我们深入学习和研究数据可视化设计,以下列举了我平时经常光顾的学习资源。

1. 了解数据可视化设计的历史渊源(完整版):

数据可视化图表发展史:http://www.datavis.ca/milestones/index.php?group=Pre-1600&mid=ms9

 

2. 各类可视化图表的概念及用法(超详细):

蚂蚁金服可视化解决方案 AntV:https://antv.alipay.com/zh-cn/index.html

图表示例:https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

图表用法:https://antv.alipay.com/zh-cn/vis/chart/index.html

 

3. 前端可视化图表库(前端可直接调用):

ECharts:http://echarts.baidu.com/index.html

AntV:https://antv.alipay.com/index.html

Google Chat:https://google-developers.appspot.com/chart/

 

4.数据分析工具:

Google Analytics: https://analytics.google.com

百度统计:https://tongji.baidu.com/

 

5.运用可视化工具搭建自己的可视化图表(可以建立自己的可视化图表):

BDP个人版:https://me.bdp.cn/home.html

平时还可以使用 Excel 或 Numbers 整理和输出可视化图表

 

写在最后

除了学习巩固数据相关的基础知识以外,更需要在日常工作学习中培养习惯,养成数据化的思维方式。

  • 1.保持对数据的敏感度
  • 2.尝试利用可视化工具创建图表,锻炼分析整理的能力
  • 3.密切关注自家产品线的用户行为数据,解读各类数据指标,培养分析的习惯
  • 4.关注前沿技术和可视化新形式,保持开放包容的心态

好了,文章就介绍到这里,大家一起学来吧。

预告:下一篇系列文章着重介绍可视化设计的具体方法,譬如从色彩、布局、交互等方面如何设计数据图表,欢迎持续关注。


作者:又彬

转载请注明:学UI网》数据可视化设计浅析与研究(一)

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


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


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



数据可视化设计浅析与研究(二)

seo达人

第一部分: 图表布局 

图表的基本构成(来源网易 UEDC)

 

图表标题

标题一般居中或居左对齐,但是布局时,需要综合考虑副标题、图例甚至筛选器控件等元素的位置。

 

坐标轴

坐标轴包括 X 坐标轴和 Y 坐标轴,有时还会出现次坐标轴。

1. X 轴刻度方向的改变,如果维度过多,则横向刻度的展示范围会非常有限,为了展示更多内容,通常会用其他替代图表(比如横向柱状图),不能替代的情况下,可以考虑将标注文案进行倾斜(不鼓励)。

2. 数据类刻度值尽量转化为千位分隔符(如 K,M,B),保持简洁,以节省空间。坐标轴上的最大值取值要恰当,保证图表占据 2/3 以上,画面更饱满。

3. 还需考虑坐标轴上的极值。

坐标轴

 

图例

离散型数据包括横向排列和纵向排列,连续型数据包括连续图例。

1. 所有图表类型的排列方式要统一,所以要考虑整体的图表空间是适合横向排列,还是纵向排列。

2. 所有形式总长度超过内容区换行或换列。

3. 双轴图包含了 2 种图表类型,不同类型的图例样式要有所区分。

4. 连续型数据通过渐变色来展示数据大小的变化,具体渐变颜色定义在下文中有详细介绍。

图例

 

背景栅格

背景栅格主要用来帮助用户快速读取数据值,方便参考和对比。背景栅格一般有网格线、虚线、点阵、斑马纹等。在设计栅格时,应该尽可能减少对数据的干扰,在合适的场景下,甚至可以去掉背景栅格。

栅格

 

Hover 态(或点击态)

用户在查看某一项数据指标时,给出明确的反馈和提示。数据详情多时,还会通过浮窗的形式展现。此时该状态下数据可以突出显示,可以变化颜色、增加背景元素(线/面)、或者增加动态变化等。

 

字体

数据图表的字体一般采用无衬线体,另外需要考虑字体的辨识度,防止在显示上产生歧义。多数情况下,数据图表会运行在不同分辨率的大小屏中,所以在文字排版上。

做到以上几条,我们在设计图表时就可以避免掉绝大多数的坑,不过毕竟图表类型这么多,在实际场景中也会遇到各种情况。总之有这么几条总的原则

1. 保持数据图表简洁、清晰、易读

2. 强调用户关注的数据,帮助用户快速聚焦

3. 弱化次要元素,如栅格、图例等

4. 删除不必要的元素,阴影效果、酷炫动画

5. 合理布局图表的间距、留白等

6. 充分考虑页面的适配效果

7. 最好使用真实的数据进行设计排版

 

 第二部分: 图表配色 

考虑到图表颜色在设计中至关重要,我把它单独分出来讨论。由于数据的复杂性和趋势变化,配色方案需要考虑非常多的因素,比如可辨识度、舒适性,还需要考虑特殊人群(色盲色弱人士等)对颜色的可读性等等。在配色过程中我们需要区分背景色和图表配色。

 

背景配色

背景色一般分为深色、浅色、彩色。在很多 LED 大屏上展现数据时,多采用深色背景,比如即将到来的天猫双十一活动,官方数据展示基本上会用深蓝色作为背景,这样可以减少屏幕拖尾,观看时也不会过于刺眼。深色背景中的图表配色一般不会采用太多的色彩,且图表也不会设计得过于复杂。

中小屏幕的背景选择性更大,中小屏幕背景色选择范围就比较广,浅色、彩色、深色均可以做出很好的设计。在 Web 端,大多数场景下,我们会采用浅色甚至白色作为背景,浅色背景更适合展示大量的数据信息,而且识别度更高。

 

图表配色

图表配色最关键的一点,就是要有辨识度。

我们可以通过明度上的变化增加辨识度,也可以采用大跨度的不同色相来增加辨识度,另外这两者也可以有机结合,常用于色彩较多的图表中。

 

明度变化

当我们需要使用单一色相配色时,势必要用明度差来进行设计,明度的跨度也要尽可能大才能更清晰。我们可以通过在灰度模式下配色的辨识度来判断明度差是或否合适。

(Google Material Colors 中的 Light Blue 色卡)

需要注意的是,采用单一色相的配色种类不宜太多,建议不超过 6 种。一旦种类过多,色彩之间的明度差异势必会变小,因而影响辨识度。

 

色相跨度变化

通过色相跨度来增加颜色辨识度也是我们常用的方式。

色环

需要的颜色较少时,我们尽量避免使用相近的色相,比如同类色和相近色。尽量选择对比色或互补色,这样可以使不同属性数据在图表中展示更加清晰。

 

 

美国大选图

 

所需颜色较多时,建议最多不超过 12 种色相。

通常情况下人在不连续的区域内可以分辨 6〜12 种不同色相。过多的颜色对传达数据是没有作用的,反而会让人产生迷惑。

 

三种常用的取色方法

01. 色环提取

可以采用色环中同一明度下的不同色调作为图表颜色。前面提到的单色相内取色,也可以在这个色环中进行采集,此外 Google Material Colors 是一个不错的色板,可以结合使用。

 

02. 借鉴自然界中的色彩

自然界中有非常丰富的渐变色彩,而且被大家所熟知,这些色彩更容易给人们带来愉悦感。

自然界中的色彩

 

在借鉴过程中,我们需要注意,比如天空经常会出现红、蓝、紫的渐变色,但这颜色的明度会有其规律,通常是浅黄到深紫,但绝对不会出现浅紫到深黄色。还有一些自然界其他的经验配色,比如浅绿色到紫蓝色,浅黄色到深绿色,橙棕色到冷灰色。

 

03. 渐变与明度叠加取色

在正常渐变色的基础上叠加一层只有明度变化的灰色渐变,形成既有明度差异也有色相跨度变化的配色。

 

渐变与明度叠加取色

 

渐变色应用案例

好了,配色部分就探讨到这里。除了以上关键内容以外,我们平时还需要注意数据图表的适配效果、交互细节、以及动画设计方面的问题,由于篇幅的关系暂不展开,以后有机会进一步探讨。

 

说在最后

我们在参与此类项目设计时,通常会通过以下的流程去思考:

1. 为谁设计,用户想要什么

2. 明确设计目标和价值

3. 明确数据指标

4. 选择最合适的数据图表

5. 规划设计,输出方案

前三步更多会由产品经理、运营人员去思考并输出结果,最后两步则由我们设计师来完成,这两步也正是这两篇系列文章的主题所在。

在学习过程中,我们每个人可有不同的思考方式和侧重点,以我个人的角度出发:能够读懂常见的数据可视化图表,并从图表中能获取到关键信息。当有一堆数据摆在面前,能根据业务目标选择合适的数据展示类型,并运用设计手段完整的表达给用户。有了这些沉淀,我就能更好的和产品、运营打交道,更多的关注链路上游的信息,从而进一步提升设计的产出质量。

欢迎交流、批评和指正。


作者:又彬

转载请注明:学UI网》数据可视化设计浅析与研究(二)

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


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


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



提升数据可视化的7个实用技巧

seo达人


1、避免使用鲜艳的颜色

明亮鲜艳的颜色就像是把所有的字母都大写想要强调一样,你的听众感觉你在对他们大声推销。而当有很多人在大喊大叫时,通常是很难集中注意力听他在说什么。单调的颜色,反而能很好地用于数据可视化,因为它们可以让你的读者理解你的数据,而不至于被数据淹没。

当你想要强调数据时,可以使用更亮的颜色。比如你的公司与竞争对手相比较时,或者你可以在现有颜色基础上加深颜色。

多彩的颜色效果就像把文字全部大写一样

 

2、避免使用饼图

尽管它们很受欢迎,但饼图并不是一种可视化数据的有效方法。 为什么? 因为你的大脑很难确定每块馅饼的相对大小

Stephen Few详细介绍了这个问题 链接在:

https://www.perceptualedge.com/articles/visual_business_intelligence/save_the_pies_for_dessert.pdf

多使用条形图, 它能使受众更容易理解和比较数据的相对大小。

Tip:按降序或升序对数据进行排序,能更轻松地比较数据。

饼图不是可视化数据的有效方式, 请尝试使用条形图。

 

3、避免数据噪音

正如“数据界的达芬奇”Edward Tufte 所说,图表上的每一点信息都应该有存在的理由。

把不重要的东西减到最少或者去掉。这包括减弱或移除图形线,改变轴线、图形线的颜色,以及用浅灰色描绘电子表格行。使得“数据比率”可以达到一个很高的水平,听众会更容易明白其中的数据情况。

Tip: 如果有人评价你的图表华而不实,你只需要优化数据比率就好了。

隐藏或减弱非数据项能使数据脱颖而出

 

4、使用简单易读的字体

有些时候,排版可以提升视觉效果,增加额外的情感和洞察力。但数据可视化不包括在内。坚持使用简单的无衬线字体(通常是Excel等程序中的默认字体)。无衬线字体即是那些文字边缘没有小脚的字体。

不用使用手写体,以及其他会分散数据可视化注意力的字体

 

5、使用表格数字字体

表格间距赋予所有的数字相同的宽度,使它们排列时能彼此对齐,使比较更容易。大多数流行字体都内置了表格。不确定字体是否正确?就看小数点(或任何数字)是否对齐就行。

使用一个表格数字字体,这样每个数字间都保持对齐(像右边的那个),比较起来更容易

 

6、使用相同细节和精度的数字

添加的细节(和数字)越多,大脑处理的时间就越长。想想你想要用你的数据传达什么,以及最有效的方式是什么。

每一个额外的数字都需要大脑去理解

 

7、使用基础图形

一个很好的经验法则是,如果你不能高效理解,你的读者或听众可能也难理解。因此,坚持使用基础图形:直方图、条形图、维恩图、散点图和线形图。

译者注:关于这些数据图的区别以及使用方法,我这里就不作展开说了,有兴趣的可以自己去网上翻翻。每种图形都用它的特点和使用场景,还蛮有意思的。以下是我在网上搜集的图形示例:

直方图

 

条形图

 

维恩图

 

散点图

 

线形图


作者:Becca Selah

译者:彩云Sky

转载请注明:学UI网》提升数据可视化的7个实用技巧

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


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


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




真没想到做一个分享页,用了我一个星期的时间

资深UI设计者

今天来改一个海报分享页的设计,这是最初的设计:

修改后:

我们分成两大块说说本次改稿思路:

1. 海报设计

2. 海报分享页的整体设计

第一部分 海报的设计

现在海报上的内容排版看着挺随便的,没有啥设计感。

海报上要放的内容不多:用户头像、名称、日期、文字、品牌信息(logo)

一开始我也没有太多的修改灵感,但是在看了许多参考图后,发现几个共通点,这几点完全能够运用在类似的设计上,让海报更有设计感。

第一点:数字/日期的特殊处理

特征总结下来就是这三点:

1.对某个数字单独用不同的字体

2.数字用更大的字号

3.与其他文字结合而出的特殊排版

用以上的思路,改一下我们的稿子:

这样是不是好一点?

第二点:海报采用实景的照片,那文字最好用白色

观察类似的参考,几乎99.99%的实景图上的文字都是采用白色。

不排除有的分享卡片用的浅色图、黑色字。

观察得知:

浅图黑色字,重在强调文字内容,对比更强烈,而深图浅色字,文字更融入画面,更温和一些.

这里我们更想采用浅色的文字:不用那么强调文字,重在让画面更和谐。

第二部分 海报分享页面的设计

第一点:遮罩用什么方式?

除了海报本身之外,整个分享页面也是要设计。

大多以背景图叠一层毛玻璃遮罩,看起来更有质感。

这种设计相比于纯黑色透明度的遮罩方式要更有层次感,不至于那么平,也让页面更聚焦在海报本身。

第二点:分享弹窗的几种形式

a. 将分享方式一屏全摆出来

适用于用户可分享的方式 不是那么多的情况,否则会占据画面太多高度。

b. 侧滑

用户可分享的方式很多的话,可以采用侧滑。缺点是需要用户滑动才能看到后面的功能。

在这里我们只有五个分享平台,用不着再侧滑,直接都摆出来就行。

第三点:取消按钮的形式

a. 底部按钮:更容易操作关闭

b. 海报上部的“阴暗角落”:更不容易点击,相较也不那么容易被发现。

究其原因可能是,产品想让用户去分享,不想让用户很快就离开这个页面。

取消按钮也用不着那么强调,修改后:

c. 分享弹窗的右上角:不如a更易点击,但比b好点

最后一点:除非是分享长图,否则海报最好一屏就展示完。

这也是我之前忽略了的一点,导致做出来的海报展示不全。

总结

很多的 APP 都有海报分享功能,这次看了许许多多的类似设计,并且把通用的点,总结分享给大家,我总结的这些,希望能对你有帮助!~


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

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



作者:花菜    来源:站酷





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



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

                           

花了三天扣的设计细节,回头看真的值了!

资深UI设计者

今天来分享几个设计案例,主要聊聊以下四个话题:

· 信息处理

· 装饰元素的摆放

· 长页面设计 模块间要有差异

· 空间利用率

01 信息的处理

首先看这个弹窗需求,产品经理给我们提供的原型图是这样的:



先不要急着开始画,理解需求是最重要的一步。

这个弹窗最想要传达给用户什么信息?

「小窝准备完成,宠物到家了」显然是最重要的信息。排的时候就要使劲凸显。

在经过一些尝试后,我们挑选出了以下两版:



对于这个弹窗,版本 2 的层级会更舒服。

于是对版本 2 进一步优化。

1. 同样的字号下,英文看着会比中文小。这上面用英文的「TA」不如直接写中文,看着也会更加整齐:



2. 字体也是有性格的,它能够影响页面的风格。所以将字体换成圆体,让页面更活泼可爱。



3. 尽量使上下两段文字长短不一,看着会更有节奏感。



4. 标点符号的细节很重要:有的字体标点符号与文字看着不在一条线上,记得一定要对齐!



5. 标题有点单调,我们再增加设计样式,让页面更精致!



这样就完成了,但是还是差了点什么:



是整个页面太安静了,少了一些热闹庆祝的氛围,那就加一些彩带装饰吧。

02 装饰元素的摆放

在添加时,需注意大小对比、前后层次、造型差异化,才能加的自然好看。

1. 大小对比,有的彩带大些长些,有些则小点短点。



2. 前后层次,有的在卡片前面,有的在卡片后方。



3. 造型差异化,除了彩带再来点其他元素。



03 长页面设计 模块间要有差异

在一个长长长页面里,相同的排版会没有新鲜感,容易产生视觉疲劳。

我们可以通过两种方式,让设计模块有差异。

1.排版不一

2.视觉不一

比如这个例子,同样都是听音乐,但是会用不同的排版穿插展示。



就算是同样的排版,我们也可以在其中用不同的视觉。

比如以下这个案例:一开始它从头到尾都是运用的一种视觉,排版也十分相似,页面整体结构也没有主次。



在我们对不同模块的卡片处理后,就好很多。



04 空间利用率

页面的空间可以站在三维的角度去看,分为 x 轴、y轴、z 轴。



页面的空间是十分宝贵的,当页面承载的内容越来越多,我们不能只在 y 轴(高度)上一直增加页面的高度。学会利用 x 轴(宽度)和 z 轴(深度)的空间能有效减短 y 轴(高度)。

4.1 利用 x 轴的空间

我们来看下面这个例子,他一开始采用的竖排方式:



如果我们将它改成横排、滑动查看后,页面就能够展示更多的内容,就越可能捕捉到用户想看的信息。



这就是减少了 y 轴的空间,利用了 x 轴的空间。

4.2 利用 z 轴空间

z 轴空间就是利用深度、前后的空间,就像我们经常看到的「页面二楼」,下拉页面后,在页面的后面出现一些内容:



这个 banner 的滑动也是利用了 z 轴空间:



以上就是我在空间利用率上面的收获,大家心里留个印象,说不定之后就能解决一些相关的问题~

总结

不知道今天分享的大家get到了吗?总结一下~

1.信息处理:明确信息的层级关系,有助于信息处理。

2.装饰元素:有大有小、有前有后、造型不同,会让装饰元素更自然

3.长页面设计:模块与模块间要排版或视觉不一

4.空间利用率:把页面当成三维空间,除了 y 轴,也要考虑到 x 轴和 z 轴的空间利用。


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

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



作者:花菜    来源:站酷





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



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

为什么总感觉我的设计比较土?

资深UI设计者

这些天遇到了些问题,在进行视觉设计的时候,老是觉得自己设计上差点意思,总觉的哪里不太满意。

也不是不好看,就是觉得还能够设计得更加深入些,不管是从板式、字体、图形、颜色等方面。

为了找到解决的办法,我不断的去欣赏别人的作品,从站酷到behance,从behance到各类获奖作品。

嗯...为什么别人能够有这么新颖的设计想法?我总结来几点大家。

借用大师的元素

这是世界三大平面设计之一冈特·兰堡的作品。

这是不是会给你一些灵感?我第一眼感觉这有点熟悉,似乎在别人的作品中运用过这种版式、元素。

在这版设计中,与冈特·兰堡的作品相似之处就有:黄底黑字的横条和蓝色调的背景,再结合一些设计图形,就能产生出一种新颖的设计风格。

就是在大师的视觉中提取元素灵感进行转化,运用在我们的设计中会有不一样的视觉体验。

我们接着看他的其他作品。

这张作品就能给我很不错的灵感,把想要突出的地方用强烈的对比手法进行设计。或者将想要突出的元素进行特殊化处理。

类似于这样的作品。

当灵感有限的时候,我们就可以静下心来分析一下其他大师的作品,认真观察大师的作品,有哪些地方是可以提取灵感出来。

再结合自己的设计让其提高升华,让自己的作品耳目一新,使作品获得新生。

保持这种发掘思维去分析作品,久而久之你就会有源源不断的灵感浮现脑海里。

尝试做出差异化

你走你的阳关道,我过我的独木桥,反其道而行,虽然在国内市场不太友好,但是尝试一下走独木桥的感觉,是否会带给你不一样的反馈。

特立独行的视觉,做出差异化会给人们一种新颖的视觉观感,就会吸引用户,就比如乔布斯手下的苹果产品,打破了当时对电子产品的认知,且对细节的把控极致到位。

人们其实都有视觉疲劳,长时间的保持这种风格,难免会让人觉得平庸,突然出现的新颖视觉或想法,就能够打破这种局面。

好比这个官网,首页第一屏在我们印象中就是一个banner,在我们做网站的时候就认为第一屏就是应该放个banner在那里!

我们就好像思维固化了,第一屏就非得是个banner吗?我们可以根据企业的属性进行判断,我们是否还有更优的方案,尽可能的赋予设计灵魂。

类似于这样的首页是否就是反其道而行呢?与同行就拉开差别了呢?自己品牌更加深入人心呢?

比如一个正常的首页,在开始设计时,最顶部的是导航栏,导航栏中最左边是一个logo,其次在右边是产品介绍等等...

我们有没有想过为什么会这么布局?我们可以反问自己:这种布局是最合适的吗?最好看的吗?还有没有更加合适的方式?

这种方式把logo放中间突出品牌就挺不错的。还有一些把导航栏折叠起来的。

刚开始我们是这样布局的,这就很普通没有做出差异化。

我们是不是可以把文案进行精细处理,提取重要的词句,把他们放大,要有视觉冲击力,重要的元素再次放大!

这样布局方式就新颖很多,突出了主要文案,加强了视觉冲击,又加深了品牌印象。

扩大搜索范围

没有新颖的想法往往是自己的思路、思维还没有打开,开始进行视觉设计的时候:选择这类行业自己认为还不错的视觉方向,开始进行视觉输出。

那就错了,假如开始设计APP,只找一些APP的视觉稿那肯定是不够的,风格就比较单一,你的视觉参考都不够丰富,怎么能够做出让人眼前一亮的风格!

我们不妨跳出圈子出来观察!

可以去看别人品牌设计的、数字艺术设计的、图形设计的、包装设计的、服装设计的甚至产品设计的都可以。有可能是某一个小地方让你有所启发。

大量的看,觉得很好的视觉就思考:我们的视觉是这样的会不会更好!

就比如这张视觉稿,色彩很艳丽,颜色跨度很大,有黑色的粗线,如果把这风格运用在APP视觉上会是怎样的效果?

看到一张足够吸引你的视觉稿,就想想如何转化到工作中去,那可能就会有不一样的视觉风格。

所以在设定风格时,

不局限于同行。

不局限于风格。

打开搜索范围,让头脑风暴更猛一些。

总结

做设计不是完成任务,所思考的是多方面的,好的设计是得花很多心思的;得保持冷静,让自己放松,着急或者有压力的心境下你的思绪是乱的,根本就做不了设计。

所以有时候做设计得脸皮厚一些。

再者平时的审美积累是非常重要的,这个就相当于你的底子,有底子往上爬的速度也会快一些。

做到这些你就离大师不远了!

最后,设计是永无止境的探索!加油共勉。


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

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



作者:橙汁    来源:站酷





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



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

日历

链接

个人资料

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

存档