首页

UI设计师交互设计|谈谈产品细节体验

周周

用户体验是用户对产品价值的整体感受,其中包括用户感受到的产品价值以及用户感受到的操作体验。不要让用户思考,这是每个设计师所追求的。这篇文章举了大量的例子,来跟大家一起进行产品细节洞察分析。感兴趣的朋友一起来看看吧。

留白设计和UI设计准则

博博

接上一篇文章叙述留白设计准则以及UI设计的排版准则,希望在这个隔离的日子里,大家一起努力克服疫情,加油!






    • 文章来源:站酷   作者:赤鲸

      分享此文一切功德,皆悉回向给文章原作者及众读者.

      免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


UI设计中色彩理论和实用的调色板指南

博博

颜色是感知的问题。每种颜色代表不同的定义波长,但是我们每个人对颜色的感知都取决于我们的感知能力。

颜色是感知的问题。每种颜色代表不同的定义波长,但是我们每个人对颜色的感知都取决于我们的感知能力。此外,我们都有与颜色相关的不同文化或背景关联。

有很多很棒的文章和视频,介绍了色彩理论和色轮,还有许多用于生成调色板的工具。但是有时您会在实践中发现这些文章不太好用,颜色组合不完全匹配或所生成的调色板在您的项目环境中效果不佳。

所以你会怎么做?您如何开始思考和查看颜色,使它们更易于选择以及调整您的需求?

诸如互补和单色,饱和度和亮度之类的色彩理论术语并没有吸引他们。

因此,我开始以不同的方式分解色彩,方法是从绘画和室内设计等传统视觉和图形艺术中汲取灵感,并以对我们作为UI设计师所做的方式有意义的方式对其进行取景。

匹配调色板并平衡配色方案

也许您已经按照所有的色彩协调和颜色理论教程进行了准备,并生成了一个免费的调色板,但是您注意到这些颜色似乎不太匹配,也许它们看起来比较粗糙或不专业。

创建良好的配色方案就是与色调,阴影和温度匹配的平衡。要在设计应用程序中成功做到这一点,您需知道要拉动哪些杠杆。

色彩理论提供了一些公式,可用于启动调色板,这是理解调色板的重要基础。但是创建漂亮的调色板不仅与这些公式有关,还与平衡色调,阴影和温度有关。

这些是我们可以推拉的“杠杆”,可以为我们的UI设计实现更加平衡和独特的颜色组合。

因此,首先,回顾一下这些杠杆的作用。

色相是用于描述所见到的每种色调的通用术语。

饱和度指的是我们正在查看的特定颜色的主要颜色系列。白色,黑色和灰色通常被称为无彩色。

明度也指颜色的明暗程度。色调相同的颜色,明暗可能不同。例如,绛红色和粉红色都含有红色,但前者显暗,后者显亮。

色温-色温更多地是关于我们如何感知所看到的色相。并且我们倾向于将它们分为暖色和冷色。

暖色-通常是通过增加色调中的红色或黄色来获得的颜色。这些往往会唤起激情,舒适,活力和运动的感觉。他们使我们想起阳光和热量。

冷色-是增加蓝色和绿色的颜色。这些趋向于唤起,清新,冬天,静止,平静。他们使我们想起冰,雪和水。

色彩模型和色彩空间

要获得一些技术知识,您可能听说过3种不同的颜色模型,这将有助于我们更好地理解光和颜色的协同作用。

CMYK使用减法混色。它指的是光线反射物理白页的方式。颜色的重叠导致黑色。由于页面无法投射光线并向您发光,因此页面必须具有反射光。将这些颜色混合在一起就可以掩盖页面的白色,从而减少了可以反射的光量。

RGB称为光的加法混合。它指的是数字屏幕向我们投射光的方式。您在全亮度下的颜色会导致我们看到白色的重叠。有点像被明亮的泛光灯所蒙蔽。

HSB-代表色相,饱和度和明度

HSB颜色模型为我们提供了放射状的颜色,其中我们具有一定范围的色相,饱和度和明度值。

这就是我们的眼睛和大脑如何解释颜色HSB就是我们的眼睛所看到的一切,而与它是从屏幕还是在纸上投射的光线无关。

因此,出于为UI设计选择颜色的目的,我们将使用HSB颜色模型。

颜色属性

您经常会听到两种较大的颜色分组。暖色和冷色。

暖色通常被认为是主动色,这意味着它们会引起更多关注。

冷色通常被认为更被动且后退一些。

根据色彩的丰富程度和它们如何平衡,您可以使柔和的暖色充当被动元素,而更鲜艳的冷色则扮演主动角色。

现在,您了解了颜色如何在屏幕上显示以及如何设置我们的设计应用程序。让我们谈谈如何在我们的设计软件中使用和推动这些杠杆,并平衡我们的配色方案和调色板。

为了得出这些不同的颜色类别,我们将集中于推和拉色调,饱和度和亮度(HSB)的控制杆。

在数字屏幕上,我发现有一个公式和安全范围的饱和度和亮度,可以每次为每个类别创建一个完美的调色板。

为简化起见,我将主要颜色分为6种通常可以识别的主要颜色类别。这些反映了我们在日常生活中谈论颜色时通常倾向于指代颜色的方式:

1.宝石色调

S:83-73,B:76-56

这些颜色是饱和度很高的色调,以宝石命名,包括宝石蓝,宝石红,紫水晶紫色,柠檬黄和翠绿色。想一想红色宝石项链或皇家紫色的魅力。这些颜色富丽堂皇,深沉,并赋予豪华感。

2.粉彩

S:14-21,B:89-96

柔和的颜色属于浅色系。粉色,淡紫色和淡蓝色是常用的柔和色。这个家庭的颜色通常被描述为“舒缓”。我们通过降低饱和度和调整色彩来创建这些颜色。

3.大地色调

S:36-41,B:77-36

这些是自然界中常见的颜色。可以通过将纯色与白色,黑色或灰色相结合来创建它们。从广义上讲,这些是中性色。它们受到树木,森林,海洋和天空的色调的影响,被用以模仿自然色彩。我们通过增加饱和度和调整色调来创建大地色调。

4.中立

S:1-10,B:99-70

纯中性色包括黑色,白色,米色和所有灰色,而接近中性色则包括棕色,棕褐色和深色。这些是通过使色彩去饱和来创建的。它们可以与以上任何类别配对以创造平衡。我们通过降低饱和度并调整色调,色调和阴影来创建中性色。

5.荧光灯/霓虹灯

S:100-63,B:100-82

在物理世界中,这是由霓虹灯管或紫外线反应涂料的颜色创造的,但在数字世界中,我们可以通过将非常明亮和高度饱和的颜色应用于我们的设计来获得相同的效果。我们通过增加亮度和色调来创建它们。

6.阴影

S:0-0,B:0-100

两种主要的阴影是黑色和白色,其他阴影也包括不同程度的灰色。

UI颜色组合

最佳的用户界面设计结合使用一种颜色类别以及中性和阴影。

您实际上只需要这些类别中的1或2种颜色即可设计参与整个用户界面。

我们为什么不这样谈论颜色

作为数字设计师,我们倾向于避免给这些配色方案分类,因为术语似乎是为混合自然色彩的画家,印刷设计师和室内设计师保留的。但是从实际的角度来看,当我们仍在学习色彩理论并使我们的眼睛习惯于选择可以一起使用的色彩时,我发现以这种方式引用色彩在UI和数字屏幕设计中可以非常有用。

这不是一门精确的科学,但是您会看到如何以这种方式思考颜色并掌握一些杠杆和数字,以指导您帮助用户创建更令人愉悦和精致的调色板。

理解色彩理论的基础和原理很重要,特别是当涉及到实际应用时,它就显得尤为重要。引用不同的学科并找到对我们有用的类比可以带来很大的不同。

作为UI / UX设计师,最重要的是,无论您如何去实现,您都能够有效地使用颜色来传达信息并为用户创造最佳体验。


    • 文章来源:站酷   作者:对啊设计君

      分享此文一切功德,皆悉回向给文章原作者及众读者.

      免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


UI 设计:如何做到理性?

博博

有哪些理性,以及如何做到理性



UI 设计,是用理性方法,来满足需求,并带来美学享受。


本篇探讨 UI 设计如何做到理性。全文共有三部分:有哪些理性,如何做到理性,止步于理性吗。



01 UI 设计:有哪些理性?


UI 设计主要有四类理性:基本原则,基础知识,风格设定,风格把控。四类理性有一个共同核心:活学活用



1 基本原则


共有四个基本原则:对齐,对比,亲密,重复。



先说对齐


秩序产生美。对齐作为一种基本秩序,主要事关整齐美观阅读体验


对齐一般分左对齐、右对齐和居中对齐。


从阅读体验角度来讲,左对齐通常胜过居中对齐,所以绝大部分文章和 UI 界面都是左对齐为主。


从美感角度来讲,居中对齐往往胜过左对齐,所以一些强调美感胜过强调阅读效率、篇幅不长、同时需要细品的诗或歌往往采用居中对齐。



从空间利用率角度来讲,右对齐往往是左对齐的一种补充。比如微信的发现页面,最重要的图标和文字左对齐,次要的右箭头和其它信息右对齐。


UI 设计追求阅读体验、美感和高空间利用率,所以这三种对齐方式大部分时候都会同时出现。整体而言,是以左对齐为主,居中对齐和右对齐为辅。


再说对比


嘈嘈切切错杂弹,大珠小珠落玉盘。音乐讲究韵律和节奏,设计也追求错落有致的节奏感。这种节奏感,很大程度上靠对比实现


好的对比可以带来视觉张力,就是抓人眼球的吸引力,同时也能起到主次分明和视觉引导的作用,最终带来良好的阅读体验。


一定程度上,对比是无处不在的。只要存在不同,就存在对比。比如大小之间的对比,不同颜色之间的对比,文字与图标/图片之间的对比,不同对齐方式之间的对比,等等。


一般而言,对比需要果断:若不同,就彻底不同。因为一般情况下,充分的对比能带来更好的视觉张力和更好的阅读体验。


第三说亲密


设计就是分类,张小龙曾如是说。分类中最重要的原则是亲密,还有一个副产物是留白。


性质相同或相似的元素,我们会让它们看起来离的更近,关系更亲密。亲密成就分类,分类能化繁为简


最后说下重复


设计追求一致性,一致性主要靠重复来实现。被大量“重复”的元素,比如这篇文章里的字体大小和字体颜色,既保证了一致性,又提高了效率。


2 基础知识


基础知识主要包括:手绘、颜色、版式设计、字体设计、品牌设计、动效设计、插画设计等专业知识。


UI 设计师可能不用画卡通人物或插画,但一定会画图标和 logo,这些也会用到手绘。作为造型基本功,需要掌握一定手绘技能。


颜色方面,最重要的是能够很好感受和理解颜色传达出来的感觉,也即颜色的“精神之美”,这块主要依赖审美和练习。


配色方面,推荐软件里的 HSB(色相、饱和度和亮度) 模式,这种模式很好理解,也方便调色。另外还强烈推荐从照片中吸取颜色,因为照片往往会和“生活”、“自然”有一定关联,“生活”和“自然”是非常重要的素材和灵感来源。从色卡中选择颜色也是一个不错的选择。


版式设计就像是选秀节目中练习生的舞台表演,考验的是唱跳、表情管理、舞台魅力、临场应变等综合实力


“活学活用”环节,会结合例子分享版式设计。


字体设计、品牌设计、动效设计、插画设计等方面,个人经验不多,就不分享了。文末会附一份推荐书单,囊括基本原则和部分基础知识。


3 风格设定


风格设定,即上篇提到的“精确描述”,是在动手设计之前,先探索出合适的风格,并把它精确描述出来。


好的开始是成功的一半。风格设定是一个开始,极其重要。如果风格设定只做到 60 分,稍微打点折扣的执行结果就是不及格。所以,如果要把设计做到 85 分,风格设定一般要做到 90 分。


风格设定犹如在茫茫大海中行船,首要目标把握方向,核心诉求是精准。海上并无现成道路和导航可循,只能依靠繁琐而严谨的推理和计算。


风格设定的次要目标划一个既清晰界定风格、又清晰指明“发挥范围”的“圆圈”,核心诉求是周密。因为需要清楚知道“圆圈”以内代表什么,“圆圈”以外代表什么。


在“精准”和“周密”上同时做到优良,风格设定才能做到优良。


既精准又周密的风格设定,通常无法一蹴而就:“风格设定”阶段一般只能做到七成,剩下三成需要在设计过程中继续探索和打磨。下一大段会结合案例分享具体方法。


4 风格把控


风格把控有两层含义,一是实现当初设定的风格,二是在实现的基础上做到统一和规范


只要严格在“圆圈”里发挥,实现当初设定的风格并不难。那做到统一和规范难吗?往难了说就是需要做大量琐碎工作:以联系的眼光看待所有设计元素,并把它们分类规整好,注意分类不宜过多,同时分类逻辑上不能出现明显问题。往简单了说就是大量复用已有的设计样式。


风格把控就是在划定的“发挥范围”内,利用设计知识和经验,以规范的方式实现规划好的风格。


5 活学活用


活学活用作为四类理性的共同核心,最典型的应用场景是版式设计。


活学活用有两个要点:正反结合,风格第一



所谓正反结合,是指设计知识既能正着用,也能反着用。最常见的例子是对齐原则,大部分时候是正着用,但如果想要营造活泼的感觉,也会反着用:故意打破对齐原则。


除了对齐原则,其它设计知识,比如重复原则,也可以反着用。


本文配图就是一个例子:图片左上角、右上角和右下角分别散布着装饰元素(横线、圆环)和 logo,在装饰元素的出现次数上,没有用重复原则。过年家里挂灯笼一般至少挂两个,同一装饰元素一般至少出现两次,以达到一种和谐和较为热闹的装饰效果。



我在装饰元素的出现次数上没有用重复原则,而在出现位置(相似位置)、元素大小(相似大小)和元素颜色(相似颜色)上用了重复原则,同样达到了和谐效果。之所以没在装饰元素的出现次数上用重复原则,是想放一个隐喻在这里。


所谓风格第一,是指设计风格永远第一,设计知识永远第二。知识服务风格,切不可重知识轻风格。


《倚天屠龙记》中,张三丰教张无忌练习太极剑时,要他忘记剑招,只记剑意。某种程度上,版式设计也要将“剑意”放在第一位,“剑招”服务“剑意”


对比原则也有反着用的时候。有一条关于对比的知识:对比要果断,若不同,就彻底不同。这条知识能解释百事可乐 logo 里红色与蓝色的强烈对比,但解释不了山本耀司旗下大部分服装那千篇一律的黑色——单色,无对比。



设计最重要的是感染力,感染力主要来自个性、态度、价值观这些风格层面的东西,而非设计知识这些技法层面的东西。


当一个设计,技法高超而风格不足时,感染力和魅力就会不足,这也是设计师经常会犯的错误,大家需要注意。



02 UI 设计:如何做到理性?


可以简单分成三步:规划,成形,细化。下面结合微信 Redesign 这个案例来说明。



1 规划:用“红绿灯”法设定风格


设定风格,用到的方法姑且称之为“红绿灯”法。“红绿灯”法借鉴并改良了我在网上看到的一种“红黄绿卡片法”(在红、黄、绿三种颜色的卡片上写下不同的设计关键词),并和“情绪板”法有相似之处:都包含关键词定位图片参考两部分。


先说关键词定位,共有两步。


第一步类似头脑风暴,结合产品属性、用户属性、市场情况、个人喜好等因素,把能想到的设计关键词全部写下来。合适的不合适的都要写,只要想到了就写下来,确保有二三十个。如果关键词数量不够,这个步骤可以多重复几次,直到够了为止。这一步设计师和需求方都要参与进来,在提供关键词上双方是平等关系。


这个微信 Redesign 是个具有探索性质的小练习项目,基于微信 7.0,有两个目的:首先保留原有交互体验和品牌识别度,其次在视觉上更年轻、更流行。可以通俗理解成:一款微信“皮肤”,主要给年轻用户和赶新潮的中老年用户用。


结合产品属性(社交类、工具类、内容类)、用户属性(年轻用户为主)、市场情况、个人喜好这些因素,这一步想到的关键词如下图所示。



第二步是归类,就是把第一步产生的所有关键词归成“红黄绿”三类。如果关键词不够,还可以再补充。这一步依然是需求方和设计师共同参与,但需要设计师来主导。


红色关键词代表不能踩的红线:不能这样做黄色关键词代表黄灯警告:这样做不太合适绿色关键词代表畅通无阻:应该这样做


需要注意的是,绿色关键词最好控制在 3-4 个之间,如果超过 4 个,就需要分成主绿关键词和次绿关键词,主绿关键词依然要控制在 3-4 个之间。这样做有两个考量,一是确保简单和重点突出,二是也更容易实现。


回到第一步的关键词上来。设计中当然可以用“拟人”、“隐喻”等手法,所以“拟人”这个关键词显得意义不大,故删去。“温润”和“亲和”,“老少皆宜”和“大众”在语义上都存在一定的重复,所以删去后者。删除这类不合适的关键词后,剩余关键词就按“红绿灯”法归类,归类后情况如下。


(微信 Redesign 之按“红绿灯”法归类后的设计关键词)


关键词定位已就绪,再来找参考图片。


可供参考的图片有两大类:照片和 UI 界面。UI 界面也有两类:线上作品(真实项目、练习作品等)和上线作品。


做 UI 设计,参考什么样的图片?个人建议,做什么类型的设计,就重点参考什么类型的图片。比如 UI 界面就重点参考 UI 界面,banner 就重点参考 banner。


UI 界面的设计,个人喜欢重点参考知名产品的上线作品。单从视觉角度来说,上线作品的质量可能比不过一些线上练习作品。但是已经上线的知名产品的 UI 设计,其风格的形成往往都会经过很多推敲,会有很多比较成熟的设计思路在里面。


参考别人的设计,最重要的是参考设计思路,其次才是参考表现形式。这种设计思路,有时候能从网上找到,但更多时候靠自己推测


微信 Redesign,根据“很多年轻人在用,且风格比较流行”这条主线,找来了 QQ、抖音、B 站、小红书、陌陌、Soul、腾讯视频、爱奇艺等产品的截图。这些产品的截图,看完一圈后,就会面临一个问题:以图标为例,这几个产品的图标,风格各异,但基本都具备“年轻”和“流行”的特点,那应该参考哪一个?



这时就要求助关键词定位。除了“年轻”和“流行”,主绿关键词还有一个“轻微老少皆宜”。最符合“轻微老少皆宜”的是爱奇艺和腾讯视频:很多老人和小孩也会用这两个 App 看视频,网上公开的数据也能佐证这一点,所以它们的设计一定会照顾中老年用户的审美。


最后,出于个人偏好,我选择重点参考爱奇艺的图标风格,具体而言就是:深浅双色、较粗(1.5pt)描边、圆润风格。


2 成形:按照规划,实现风格


红黄绿三色关键词及重点参考图片就绪后,就可以动手设计。


我一般会把界面设计粗略分成三大部分:版式风格、元素风格、元素大小,元素为图标、图片、按钮等,然后去一一实现。


先说版式风格


用的主要绿色关键词是“更流行”和“更年轻”。“更流行”包括:更大字号的页面标题、尽可能用留白代替分割线和卡片的“无界”风格、圆形头像、更多留白更多舒适、等等。“更年轻”包括:更圆润的搜索框、输入框和图标、更年轻更具活力的配色、等等。


再说元素风格之图标风格。


图标主要参考爱奇艺 App:其一,底部导航和发现页的图标都是深浅双色加较粗的描边;其二,除了更圆润以外,部分图标还变 Q 了。


最后说元素大小


以这个小项目为例,最主要的元素大小是图标大小和字体大小,它们会影响整个设计的感觉。通常情况,元素越小,给人感觉越精致、越高端,此其一;其二,可能是年轻人和老年人视力存在差别的原因,越小的元素往往代表年轻人的审美,反之则代表老年人的审美。


元素大小主要运用的绿色关键词是“轻微老少皆宜”。也就是说,需要在年轻人和中老年人的审美中找到一个平衡,所以元素大小基本直接参考了微信 7.0 的设计,个别地方做了微调。


最后,出来的效果如下图所示。



3 细化:打磨优化


这份设计我发在了网上,部分网友留言说看着不够好,不太舒服,有一个表达的比较具体——“虽然用了大面积留白,却让人感到紧迫...”。


基于网友的留言,我仔细审视了这个设计,最后发现问题主要出在页面(发现页为例)左右两侧:留白过小。



当初之所以这么设计,是想通过页面左右两侧较少的留白制造一种内容将要撑破屏幕的感觉,从而营造一种活泼的感觉。注意,彼时“活泼”还没出现在“黄色”关键词里,上文两张关于关键词的图都省略了中间探索和优化的过程。


很多网友之所以没有感受到活泼而只是觉得不太舒服,至少有两个原因:第一,整个设计的基调是简约、清爽,有一定的年轻感和流行感,但没有太明显的活泼感,硬往里面某个地方塞“活泼感”并不和谐,大家也难以感受到;第二,单纯就“活泼感”而言,做的依然不到位,比如图标与右侧文字的留白,可以比图标与左侧边界的留白大,方能更好彰显活泼与活力。


考虑到“轻微老少皆宜”这个绿色关键词及微信主要是工具型和内容型产品,“活泼感”用在这里并不十分合适,于是放弃,并将“活泼”归为“黄色”关键词。此处留白的目的就回归其本职工作:整体和谐与舒服。于是就把留白相应调大了。



另外一个优化的点是“眼睛”的形状:微信图标、看一看图标、表情图标、朋友圈里将点赞和评论折叠起来的图标都有一双“眼睛”,这双“眼睛”起初是竖着的椭圆形,很萌,也比较低龄化。为了尽可能的“轻微老少皆宜”,这里统一把“眼睛”由竖着的椭圆形改成了圆形,弱化了“萌”和“低龄化”的感觉。



还有一块是颜色上,拍摄视频动态的图标有用到蓝紫色。这个紫色基本符合“更年轻”、“更流行”,但不太符合“轻微老少皆宜”,所以最后放弃了紫色,保留了蓝色。



遵循主绿关键词里的“轻微老少皆宜”,其它优化的点有:微信图标尖角处的圆角调小,删除启动页与黑色"WeChat"字形成对比的绿色圆点。另外还有一些视觉层面美观、和谐、舒适度的优化,比如颜色、留白、圆角大小、字体大小方面的微调。


优化后的微信 Redesign,整体效果如下图所示。



凡事预则立,不预则废。UI 设计如何做到理性最核心的是设计风格,规划、成形和细化都紧密围绕设计风格展开。


最后,尝试总结下“红绿灯”法的优势,主要有四点:精确、周密、稳妥、高效



关于设计风格,传统规划方法一般只有三四个“绿色”关键词。


“红绿灯”法拥有“红灯”、“黄灯”和“绿灯”三种颜色的关键词,从而确保大方向更准确。“红绿灯”法会产生20个以上的红黄绿关键词,从而确保划出来的“发挥范围”更周密,极少有疏漏。


在“成形”这个设计环节,一旦踩到“红线”和“黄线”,规划好的红黄绿关键词都会马上发出警报,从而大大降低“违规踩线”行为的发生次数,确保设计执行环节的稳当可靠。


“红绿灯”法通俗易懂门槛低,需求方可以较为深度参与“规划”环节。需求方在“规划”环节的深度参与,理论上可以降低后期的返工和修改次数,从而确保整个设计过程的高效。同时理论上也能够提高设计师和需求方双方合作的愉快程度。



03 UI 设计:止步于理性吗?


UI 设计,始于理性,但无法止步于理性,还需要超越理性。注意,这里的理性,仅指设计知识的相关理性。


超越理性主要有两点:直觉,其它知识



1 直觉


直觉是指一种能够快速感受和评估设计优劣的感觉。良好的直觉往往快而准。


感知和评价别人的设计时,用到的几乎全部是直觉。审视自己的设计时,也离不开直觉。


在审视自己的 UI 设计时,直觉主要发挥两个作用:第一,囿于知识储备或表达能力,有些地方就是解释不清,这个时候就要靠直觉去感受去判断;第二,直觉往往会作为检视设计的最后一道关卡,也是最重要的一道关卡。


直觉来自哪里?


个人观察是,直觉往往和审美正相关。比如一个设计师,他掌握的设计知识有限,经验有限,对自我的要求也不高,最终的作品往往不出彩。但如果他审美好的话,往往能够分辨出不同设计方案之间孰优孰劣。


如果你想就设计稿征求别人的意见,请去找那些审美好的人。


2 其它知识


其它知识是指设计知识以外的所有其它知识。比如 iPhone 上删除应用前应用图标的抖动,其灵感应该来自生活中的摇头求饶或吓得发抖,抖动的幅度和频率则需要利用物理学和数学方面的知识。


优秀的设计,一定会从生活中汲取大量灵感,并广泛利用社会类、人文类和理工类学科的知识。就拿数学来说,在好的设计中,一定是个常客:因为你需要不停的按计算器,从而计算不同设计元素之间的比例关系和各自的大小。


汝欲学诗,功夫在诗外。遣词造句这些文字技巧只能是写诗的基础,而非关键。写诗的关键在于你对生活、对世事的积累和感悟,在于你的思想是否深刻,情怀是否充足。


写诗如此,做设计亦如此。设计知识只是做设计的基础,而非关键。做设计的关键在于“其它知识”。“其它知识”非本文重点,就不展开了。



结语


UI 设计里的理性,主要是各类设计知识。理性的核心在于活学活用各类设计知识


理性严谨的做 UI 设计,可以简单分成三步:规划,成形,细化。好的开始是成功的一半,一个高质量的规划显得尤为必要。


用“红绿灯”法做规划,并指导成形和细化工作,会更精准、周密、稳妥和高效。


UI 设计,是七分理性,三分直觉。审美越好,直觉越准


优秀的 UI 设计,一定会从生活中汲取大量灵感,并广泛利用设计以外学科的知识。








推荐书单  


[美]Robin Williams《写给大家看的设计书》

[日]佐佐木刚士《版式设计原理》

[日]伊达千代《色彩设计的原理》

[日]小林章《西文字体1、2》

左佐《设计师的自我修养》

左佐《治字百方》




原文链接:https://mp.weixin.qq.com/s/yZVBzTYJxWQ7fk-tjXG8Yg


    • 文章来源:站酷   作者:SnowDesign

      分享此文一切功德,皆悉回向给文章原作者及众读者.

      免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



12个PC网页的UI设计趋势(上)

博博

实际上所有的网页设计趋势都是由:大型化(Big UI)、较低的密度(Low Density)、长页面(Long Page)这三个设计思想所衍生出来的。而影响这些设计趋势的人,不是设计师,不是硬件制造商,而是用户的行为。


   因为智能手机的普及,用PC浏览的网站关注度正在下降。但是,托B2B数字营销的福。PC网站今后也变成战略中心。即使在B2C的领域,PC网站也是不可或缺。


   对于在硬件方面没有太大变化PC的网页设计来说,也有技术被固定化的印象,实际上现在也正在接受时代的潮流而发生着变化。特别是下面那样的环境变化,也给与PC网站的UI设计带来很大的影响。


•显示设备的多用化。

•智能手机应用的普及化

•电子设备触摸屏的普及


   如果迎合趋势将会取得成功不是吗?这个基础就是抓住用户动向的变化,有必要完全理解这一变化。因此这篇文章是PC网页 UI设计的最新动向,基于那些背景下的推测汇总。



1.Big UI / low Density / Long Page的潮流

   举例说曾经的PC网站有很多是在有限的空间内填入了大量元素的设计。但是现在UI部件变得有:大型化(Big UI)、较低的密度(Low Density)、长页面(Long Page)的倾向。



   以前是海外以创意型,初创型为中心网站所采用的设计,进入日本的海外企业和前卫的网页设计师,采用那些理念设计的企业网站,渐渐地在日本也被广泛应用,这个趋势也与扁平化设计相呼应。2013年以后以Big UI / Low Density / Long Page 为基础的设计理念在网站更新中使用增多了。



   这样的趋势,不能单单看起来时兴,其有合理的存在理由。在开发的立场,让响应式网站更容易实现。如果在用户的立场来看,更容易浏览、更容易理解、不再迷茫,除了所说的这些以外,让网站更好的利用触摸屏,作为其更大的优点。


   近些年不只手写板,笔记本电脑也安装了触屏。对于在没有准备手机网站的情况,在智能手机上,网站的页面也被要求需要有一定程度的浏览。


   触摸屏,因为用手指的点击,不能进行精准操作。因此用户界面会变大。元素之间的必需留出充分的空间。如果用户界面变大,密度变低,当然页面中表现元素要少,页面变长,以滚动为前提了。


   这篇文章之后要介绍很多趋势,都是从Big UI / Low Density / Long Page的潮流中派生出来的。这不是最时尚的流行,但是现在是最适合用户行为的设计思想。



2.1栏布局

   作为Big UI / Low Density / Long Page合适的布局,就是1栏布局。


   曾经左右两栏布局的PC网站是UI设计主流。在电子商务网站等有大量信息的网站中,3栏布局也很常见。但是现在去掉左右栏,只焦点于内容部分,1栏布局正在增加。



   对于用户,不再有不必要的杂音映入眼帘,集中真正必要的内容。文字更容易阅读,图片被展示的更大。


   另一方面,映入眼帘的信息量减少,广告等会变得有些分散。因此,对于用户活动线路的设计,必须要更加谨慎。


   另外,在侧边栏设置局部的导航条手法,与其他层级的网站相关,有让用户不再迷茫的突出优点。去掉侧边栏的导航条,让网站的层级降低,尽可能减少菜单,不止限于1页内的布局意味着网站全体的设计方法需要重新考虑。


   反过来说,多层级化的前提是与网站的庞大度有关。有很多的1栏布局不能让内容被准确的理解,据此判断需要谨慎使用。




3.中对齐

   1栏布局的一个问题是文字换行吧。文字充满整个宽度时候会显的很长,很难保持布局的美观。如果1行的文字数量超过40个字,人们就会觉得难以阅读。不能因为是1栏就什么也都不考虑,宽度被文字占满,是不可避免的。


   解决这个问题的一个思路就是中间对齐。说到宽度很宽1栏的布局,中对齐和左对齐如何很好的组合,变成设计的要点。



   中对齐的正确使用有一些值得注意的点。首先,必须避免用户的视线忽视中间。例如,如果长文本中对齐,文章的开始点就会因此改变,变得难以阅读。如果使用中对齐,短文章不必要换行,长文章必须左对齐。


   还有,接近元素宽度充满的时候,虽然用中对齐,也不能很好的解决。但是,宽度被占满的情况是不存在的,看到中对齐不完整的位置就像悬浮一样。为此,必须要在运用盒子和边缘等下功夫,中对齐才不会出现违和感。





4.固定的顶部和顶部的超薄化

   固定的顶部也很普遍。在很多的时候,这里搭载的是导航条。无论能进入页面内哪个位置,都能立即回到主要部分。固定顶部的UI没有侧边导航,当页面较长时,能确保使用的敏捷度。



   但是,固定的顶部没必要的时候,会有占据一些空间的缺点。因此,顶部只能加工的变薄。像曾经PC网站的外观那样,采用多段式并且较厚的顶部是很困难的。


   这就意味着必须在页面内限定元素。如果元素容纳的多,页面就会变厚,很难被固定化。菜单的数量应该被限定,相对于以前,这方面的意识必须要加强。



5.固定的左边导航

   近年可以看到一些布局将导航条设置在左侧。说起来也与曾经2栏布局为主流时代的左导航在构造和功能上有所不同。


   画面左边被固定,最近有很多追随滑动的按钮。另外,内容部分基本使用1栏布局,跟随画面宽度的进行伸缩的液态布局被使用的数量也很多。



   这样的设计会带来应用程序的操作感。另外,有容易应对多设备的特点。移动端优先的设计,响应式网站和液态布局即是使用PC也能对应多种情况,有采用这样的构造的倾向。


   但是,必须注意的是这样新式布局,对于一般的用户有很难留下第一印象的危险性。另外,对于菜单的多层级化的时候,连接和鼠标经过引出下一级菜单的操作是必要的,因此提高了操作的难易度。


从使用能力,全部的构造等固定左导航的缺点来看,有必要搞清导入的妥当性。



6.液态布局

   在设备多样化中,画面的分辨率呈现前所未有的变化。以前,宽度符合960~980px就可以解决问题的这个规律变得难以通用。对于分辨率多用化的一个回答就是,符合画面宽度的布局也就是液态布局。


   液态布局是,元素和图片不是用像素而是使用%。因此,无论看到什么样的尺寸,分辨率的画面,都会被布局成有一定的平衡。可以解决符合小画面的时候的缺点和符合大画面的时候的缺点。



   必须留意的是,对各个页面“最合适化”的布局是不存在的。设想一下各种各样的分辨率的画面,汇集了最少破绽并被认为是有共同的妥协点的布局手法。有些特定的尺寸会感到平衡被打破,有些程度是必须被允许的,意味着会布局成像网页的网页。


   未完待续...




出典:http://baigie.me/sogitani/2015/02/pc-site-trend-2015/

翻译:SISENdesign



原文链接:http://baigie.me/sogitani/2015/02/pc-site-trend-2015/

    分享此文一切功德,皆悉回向给文章原作者及众读者.

    免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

大屏数据可视化设计指南

seo达人



 

一、基础概念

1、什么是数据可视化

把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。

在当前新技术支持下,数据可视化除了“可视”,还可有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射,是抽象数据的具象表达。

数据可视化作品《launchit》  作者:Shane Mielke

作者写了本书,地图上显示了世界各地读者的分布情况及对应人数

 

数据可视化作品《world-drawn-by-travelers》 作者:TripHappy

国家之间相互连通的旅游路线,颜色越相近的国家,表明两国家的人们互动越频繁

 

 

2、什么是大屏数据可视化

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。

“大面积、炫酷动效、丰富色彩”,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。电商双11类大屏利用此特点打造了热烈、狂欢的节日氛围,原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。

利用面积大、可展示信息多的特点,通过关键信息大屏共享的方式可方便团队讨论、决策,故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。

数据分析类  图片来源:必应;图片作者:帆软软件有限公司

 

二、大屏数据可视化设计原则:设计服务需求、先总览后细节

  • 设计服务需求

大屏设计要避免为了展示而展示,排版布局、图表选用等应服务于业务,所以大屏设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢?业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标,是大屏数据可视化的价值所在。

  • 先总览后细节

大屏因为大,承载数据多,为了避免观者迷失,大屏信息呈现要有焦点、有主次。可以通过对比,先把核心数据抛给用户,待用户理解大屏主要内容与展示逻辑后,再逐级浏览二三级内容。部分细节数据可暂时隐藏,用户需要时可通过鼠标点击等交互方式唤起。

 

三、大屏可视化设计流程

规范的流程是好结果的保证。找到一个可参考的流程,然后步步为营,就能避免很多不必要的返工,保证设计质量和项目进度。

1、根据业务场景抽取关键指标

关键指标是一些概括性词语,是对一组或者一系列数据的统称。一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。以共享单车电子围栏监控系统为例,这里的关键指标有:企业停车时长、企业违停量、热点违停区域、车辆入栏率等。

确定关键指标后,根据业务需求拟定各个指标展示的优先级(主、次、辅)。

 

2、确立指标分析维度

“横看成岭侧成峰”。同一个指标的数据,从不同维度分析就有不同结果。很多小伙伴做完可视化设计,发现可视化图形并没有准确表达自己的意图,也没能向观者传达出应有的信息,可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。

上图向大家展示了数据分析常用的4个维度,我们在选定指标后,就需要跟项目组其他小伙伴讨论:我们的各个指标主要想给大家展示什么,更进一步的讲,是我们想通过可视化表达什么样的规律和信息。而上图,可以引导我们从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题。

  • 联系:数据之间的相关性
  • 分布:指标里的数据主要集中在什么范围、表现出怎样的规律
  • 比较:数据之间存在何种差异、差异主要体现在哪些方面
  • 构成:指标里的数据都由哪几部分组成、每部分占比如何

 

3、选定可视化图表类型

当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。

选定图表注意事项:易理解、可实现;

 

易理解

可视化设计要考虑大屏最终用户,可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形。

 

可实现

  1. 我们需要了解现有数据的信息、规模、特征、联系等,然后评估数据是否能够支撑相应的可视化表现
  2. 我们设计的图形图表,要开发能够实现。实际工作中,一些可视化效果开发用代码写很容易实现,效果也不错,但这些效果设计师用Ps/Ai/Ae这些工具模拟时会发现比较困难;同样的,某些效果设计师用设计工具可以轻易实现,但开发要用代码落地却非常困难,所以大屏设计中跟开发常沟通非常重要,我们需要明确哪些地方设计师可以尽情发挥,哪些地方需要谨慎设计!一个项目总有周期与预算限制,不会无限期的修改迭代,所以设计师在这里需要抓住重点,有取舍,不钻牛角尖、死磕不放。

 

4、了解物理大屏,确定设计稿尺寸

多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率。有多个信号源时,就会有多个设计稿,此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率

一般情况下设计稿的分辨率就是电脑的分辨率,当有多个信号源时,有时会通过显卡自定义电脑屏幕分辨率,从而使电脑显示分辨率不等于其物理分辨率,此时,对应设计稿的分辨率也就变成了设置后的分辨率;此外,当被投电脑分辨率长宽比与大屏物理长宽比不一致时(单信号源),也会对被投电脑屏幕分辨率做自定义调整,这种情况设计稿分辨率也会发生变化。所以设计开始前了解物理大屏长宽比很重要。

 

5、页面布局、划分

尺寸确立后,接下来要对设计稿进行布局和页面的划分。这里的划分,主要根据我们之前定好的业务指标进行,核心业务指标安排在中间位置、占较大面积;其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

 

6、定义设计风格

很多小伙伴也许没接触过大屏设计工作,但大多数人都应该有APP或者Web风格定义的经验。我们在定义一款APP或者Web页面设计风格时常用的方法是什么呢?情绪版!

大屏虽酷炫,但实际上也是运行在浏览器里的Web页面,所以大屏设计风格定义方法也同样可以是用情绪版来做,这种方法也是目前比较科学高效的风格定义手段

上图提供了情绪版应用的脑图,具体操作细节不做介绍,不太了解的小伙伴可以自己找找资料哈。情绪版的一套流程下来,我们定义的风格基本是科学准确的,可以指导我们执行设计。如果是给甲方爸爸做大屏,这个流程也可以让我们提出的方案更有说服力

 

7、可视化设计

根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来讲大屏可视化主要有指标类信息点和地理类信息点两大可视化数据。指标类信息点可视化效果相对简单易实现,而地理类信息点一般可视化效果酷炫,但是开发相对困难,需要设计师跟开发多沟通的。地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点,所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求,硬件配置不够的情况下可能出现卡顿甚至崩溃的情况,所以这点也是需要提前沟通评估的。

 

8、样图沟通确认

这里的沟通分三个层面:设计师对内沟通、设计师对外沟通、设计师与大屏的“沟通”。

样图沟通环节,最初的样图不需要十分精致,我们可以把它理解为一个“低保真”原型,然后通过不断沟通修改,让它逐步完善精致起来,也就是小步快跑,避免那种一下子走到终点,然后又大修大改的情况。

因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点,所以这一步我们需要用尽可能简单的方法 ,把之前几步的成果在页面上快速体现出来,然后根据样图效果尝试确定五方面内容:

  1. 之前确立的布局在放入设计内容后是否依然合适
  2. 确立的图表类型带入数据后是否仍然客观准确
  3. 根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受
  4. 已有的样式、数据内容、动效等在开发实现方面是否存在问题
  5. 大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象

跟大屏“沟通”是比较重要也是个特殊的环节,这也是我觉得大屏设计跟其它设计不一样的地方,大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境,这里的很多问题只有设计稿投到大屏上才能够被发现,所以这一步在样图沟通确认环节非常重要,有时候需要开发出demo,反复测试多次。

 

9、页面定稿、开发

事实上页面开发阶段并不是到了这一步才进行,这里说的页面开发仅指前端样式的实现,实际上后台数据准备工作在定义好分析指标后就已经开始进行了,而我们当前的工作是把数据接入到前端,然后用设计的样式呈现出来。

切图与标注

由于大屏实际就是一个web页面,所以开发阶段的切图与标注是少不了的。

切图:哪些元素需要切图,怎么切?

一般开发用代码写不出的样式或动效,都需要设计师切图作支持:比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。

标注

Web页面用什么插件做标注这个大家都很熟悉,我就不多说了。需要注意的是,如果大屏页面需要在不同比例的终端展示,那么此时的标注与开发可以使用rem作为基本单位来实现,这样实现的大屏页面在后期会有更好的扩展性与适应性。

 

10、整体细节调优与测试

这部分是指页面开发完成后,将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。

视觉方面的测试(有点像APP的UI走查):关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。

性能与数据方面的测试:图形图表动画是否流畅、数据加载、刷新有无异常;页面长时间展示是否存在奔溃、卡死等情况;后台控制系统能否正常切换前端页面显示。

 

四、大屏设计的注意事项

1、字体使用

字体优先使用系统默认字体,需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

如果页面是云端部署,需要嵌入字体包时,我们可以使用FontCreator这类的软件把那些用不到的字符从字体包中删掉,然后重新打包上传,减小字体包大小,可以优化页面加载体验,避免在替换默认字体的过程中出现页面文字跳动等现象。(一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符,对于大屏这个明确的场景,我们可以删掉其它使用不到的字符,仅保留中文、拼音和数字)

 

2、颜色搭配

  • 1、色彩明度与饱和度差异显著、对比鲜明, 尽量避免使用邻近色配色

  • 2、使用深色暗色背景深色暗色背景可减少拼缝带来的不适感。由于背景面积大,使用暗色背景还能够减少屏幕色差对整体表现的影响;同时暗色背景更能聚焦视觉,也方便突出内容、做出一些流光、粒子等酷炫的效果,
  • 3、渐变色慎重使用大屏普遍色域有偏差,显示偏色,因而使用渐变色需要根据大屏反馈确定是否调整,纯色最佳。
  • 3、页面布局: 主次分明、条理清晰、注意留白,合理利用大屏上各小的显示单元,并尽量避免关键数据被拼缝分割

 

五、Q&A

– 1、设计稿投到大屏上显示效果不佳怎么办?

大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下,我们应该在设计开始前,就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品,然后投上去查看实际效果。因为大多数时候大屏都会存在色彩偏差,这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现,如果不可以,那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面,样图沟通环节及时测试也很重要。

– 2、大屏设计定稿后,切图切几倍图?

由于是将我们电脑屏幕投射到了大屏,大屏上的内容是运行在我们电脑浏览器上的页面。所以切图根据我们电脑的分辨率,正常切1倍图就可以

– 3、1920*1080的设计稿,投到9000*4320的屏幕上,文字图片会发虚么?

看情况,视大屏系统硬件规格与观看距离来定。这块有四个概念需要跟大家交流下。

大屏逻辑分辨率(设计稿尺寸)——显卡输出分辨率——视频矩阵切换器(DVI)支持分辨率——大屏实际物理分辨率。

一般后两个是没问题的,大屏跟矩阵切换器是由大屏厂商提供,一般刚好配套大屏。容易问题的是显卡输出分辨率,我们电脑屏幕分辨率并不是最终显卡传递到DVI接口的分辨率,传递到DVI接口的分辨率是电脑显卡所能输出的最大分辨率(部分电脑可设置或自定义输出分辨率)。输出分辨率等于DVI支持分辨率时显示效果最佳。输出分辨率低于DVI支持分辨率,DVI会将信号放大后传递到大屏,放大的过程中就有图像信息丢失,虽然此过程中有各种算法支持去保证图像尽可能清晰,但算法再好,跟真实图形还是有差距的。此外,多信号源投射效果优于单个信号源投射。对于现场直播数据大屏,一般至少有两个信号源,一个投屏,另一个也投屏但是处于备用状态。

离大屏的距离也影响观感,一般离得近,颗粒感明显,距离稍远,会显的较为清晰

– 4、设计稿完成开发后,发现在大屏上页面有被拉伸或者压缩的情况,怎么补救?

一般来讲,开发只需要对设计图做还原即可。但特殊情况下,比如显示器扩展不正确导致页面被拉伸或压缩,这时就需做处理:我们可以先得到被拉伸/压缩的比例,然后对整体视图做压缩/拉伸处理,再由其拉伸/压缩,这样被拉伸/压缩的瑕疵就可以得到一定程度上的矫正。另外,了解被投电脑硬件特点,有的电脑可以通过自定义分辨率解决这部分问题。

– 5、除自行开发可视化大屏外,还可以通过哪些第三方服务来快速实现?

阿里云DataV、腾讯云图、百度Sugar等

– 6、数据可视化的图表样式可以在那些地方找到参考?

图表部分的二个库是我们设计师可以打开浏览产看的,这里面所有的图表样式都是基于代码实现的,可以作为我们设计图表的参考,也可以让开发拿代码去用,或者在这些图表的基础修改

工具类的需要有一定的代码基础,里面同样有丰富的图表,所以跟开发的沟通也很重要,因为他们可能会了解多一些更新的前沿的图表形式是我们设计师不知道的,所以彼此多沟通交流是在太重要了

 

总结

数据可视化是一门庞大系统的科学,本文所有讨论仅针对大屏数据可视化这一特定领域,管中窥豹,如有遗漏或不足之处欢迎大家讨论交流

 

原文地址:UX设计诗  (公众号)

作者:UXBoy

转载请注明:学UI网》大屏数据可视化设计指南

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

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

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

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

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



UI设计师交互设计-如何提升B端界面精致度

周周


对于B端,我想刚开始很多同学就直接拿Ant Design套套界面,因为公司要求并不高,随后字节Arco Design也推出了对应的模版和规范,能让我们快速作出一个不出错的方案。

但是随着公司对B端越来越重视,这些模版显然就太烂大街了。公司、市场的要求显然不止于此,我们的设计追求也不止于此。

那么我们如何才能摆脱套模版,提高界面的精致度,提升界面的交互体验呢?

其实很简单,王阳明先生告诉我们知行合一,知是行之始行是知之成。我们如何才能提升B端界面端精致度,第一需要知道什么是好的设计;第二需要不断的去实践去练习,缺一不可。

本文先和大家谈谈知的层面,提高我们的眼界,下面就和大家分享一些不错的B端产品,大家有时间可以去慢慢体验。

PS:作为B端设计师,一定要去多拆解竞品,多研究好的产品,别面试的时候,面试官问你研究的B端产品是什么,你只知道阿里云、腾讯云、百度云哦!


1、Hubspot


做B端的同学,尤其是做CRM的同学应该都知道Salesforce,他是全球最大的 CRM(客户关系管理) 工具公司。

Hubspot同样是提供客户管理相关的应用,虽然成立相对Salesforce晚,但是在市场上也占有一席之地。

从设计的角度来看,他的界面风格更加简洁舒适,从体验上来看和国内的CRM系统完全不同,其体验更加自然和舒适。


这种风格大家看了有没有觉得很熟悉呢?

大家在去看看 GoDoddy , Airbnb ,Zillow,是不是发现风格有一点类似,大家可以对比国内产品去拆解下他们的交互细节有什么不同,完成同样的任务他们采用的方案有何不同,相信你会有很多的收获。


国外的界面看着总让人觉得很舒适,仅仅是因为克制的设计、中性灰使用得好吗?当然不是,是因为英文本身就是图形化的文字。

如果翻译成中文,你会发现好像不是特别理想。


这个样子拿给领导过稿,怕是分分钟被拍死,因此我们还是需要多看看国内优秀的产品。


2、神策


神策的设计,我想B端的朋友不陌生吧,国内产品中他的设计一直是我们的参考对象。

不同于其他产品,他的体验门槛比较低,注册后就可以去体验他的demo,也没有试用期限,参考对象从可视化报表,到界面交互均能找到参考。


不过当你参考一次后发现,做出来的界面怎么还是少了一些灵魂,虽然界面风格上了一个台阶,但为什么用户还是觉得产品难用。




3、项目管理类


这里不得不和大家推荐项目管理类产品了,这类产品是专门给互联网公司的开发团队使用,他们都是专业用户,同时这些都是提高他们工作效率的工具,因此这些产品投入的成本更高,优化得更好,拆解他们的产品,就是直接观看高手的成长之路。


Jira

Jira是Atlassian公司出品的一款事务管理软件,JIRA的界面效果交互都非常不错。大型互联网公司如LinkedIn、Facebook、eBay等内部都在使用Jira。



同时他也是国内项目管理类产品的学习研究对象,因此大家可以通过文章、B站、界面截图,自己申请体验等方式全面的进行体验。

同时也可借助群的力量,调研下有使用Jira的小伙伴,看看他们在使用中有什么问题,下面是我收集Jira网页版和本地配置版的问题截图,这些都来自不同角色的真实体验,会更有分析的价值。(这部分截图涉及到公司的数据,同时数量多不太方便打码,就不分享给大家了。)



当然国内的项目管理类产品也得去看,我们要对比哪里做得好,哪里还需要改进。国内的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition,这些产品不管从视觉还是体验都非常不错,大家一定要去体验。




5、文档管理类产品

通过不断对竞品进行拆解,你已经不是当初那个小白了,你的行业认知,方案设计能力应该赶超了一大波人。

成长的同时,又发现你设计的界面,不太精致,少了些温度,这时候推荐你看文档管理类产品。


WPS

第一个和大家推荐的是WPS,界面简洁,配色舒适。




飞书


在管理类的软件中,不得不提飞书的管理界面,从设计到使用体验,他给我的感觉终于不是那么千遍一律,用组件库搭建起来的感觉。

他开始有了温度,开始注重品牌感的打造,用户的引导,符合品牌调性的插画。


对一些体验的细节进行优化,比如传统的编辑都是放在页面顶部,它采用了离光标更近的位置。


根据菲兹定律,光标当前的位置和目标位置的距离D越短,所用的时间越短,具体好不好用,欢迎大家在评论区留言哦。


6、概念稿


到这时候如果你觉得线上的产品太禁锢思维,那么推荐你看看dribbble、behance,搜索data、web、dashboard等关键词,去看看有没有新的灵感。


我的花瓣收集了一部分,如果不嫌弃,可以去看看,顺藤摸瓜应该可以找到很多不错的设计。

风筝KK的花瓣:https://huaban.com/boards/76913106


7、画重点


如何提升B端界面的精致度?

第一,要知道什么是好的设计,多拆解国内外优化的B端产品。

第二,多在工作中时间,有时间多做ABC方案,锻炼自己的方案设计能力,多踩一些坑,时刻保持学习能力,慢慢就成长了。


文章来源:站酷   作者:风筝KK

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

数据可视化为什么偏爱FUI

seo达人

1.FUI的定义

相信许多同学对与“FUI”并不陌生,可能一提到这个词大家首先想到就是漫威和 DC 科幻电影中主角的操作场景,例如漫威电影中钢铁侠的操作界面:


图片源自 HUDS+GUIS

由于大家长期受到科幻电影影响,一度认为 FUI 即为“科幻界面设计”,这个定义真的是正确的么?大家可以短暂思考一下,带着疑问继续阅读下面对 FUI 的定义,看是否和你想的一样。

 

A.定义

为了让大家更好的理解 “FUI” 的定义,我们将 “FUI” 这个词拆开分别进行简单解释。在 FUI 中:

“U”代表用户(User)

“I”代表界面(Interface)

“F”代表虚构的(Fiction)、未来的(Future)、幻想的(Fantasy)。

简单点来讲 FUI 就是:虚构的、未来的、幻想的用户界面。

相信读到这里大家已经对 FUI 有了初步的认识,“科幻界面”只是 FUI 中的分支,并不能完全解释 FUI 。对与“虚构、未来、幻想”三个词我们再做进一步分析解构:

 

a.虚构的

FUI 的专业术语是“虚构用户界面”,其中包含各种“虚构”的用户界面,即不真实,只是大胆的设想。例如人们大胆的设想宇宙飞船的界面设计,或者可穿戴的智能设备界面。


图片源自 Behance

 

b.未来的

我们再回忆我们看过的科幻电影,在电影中它通常作为故事的一部分而创建。故事可以在不同的时间段进行设定,例如将来、当前或者过去。所以我们并不将 FUI 限制在“未来”用户界面,它的时间线是相对的。不同时代的人们对于科幻电影的理解不一样,所以大家对于未来的定义也有所不同,例如早年的《星球大战》系列电影和《环太平洋》系列电影都属于科幻电影,但存在的时间线却有所不同,其中的界面设计风格也会因有所不同。


图片源自 HUDS+GUIS

 

c.幻想的

关于“幻想”的用户界面,人们脑袋可能首先闪过一些夸张虚幻、为人耸听的画面。就像《神奇博士》中的神奇博士进入多玛姆的世界当中一样。


图片源自百度

“幻想”这个词经常被用来描述哪些远离现实的事情,这些事情难以被实现。百度百科中对幻想的解释是“虚而不实的思想;没有道理的想象;无根据的看法或信念;以理想或愿望为依据,对还没有实现的事物有所象。”

关于“幻想”的用户界面也可以包括基于现实和真实技术的用户界面,因为人们在基于现实的基础幻想也属于幻想的范畴之内。例如宝马的概念设计中,我们依然能看到现代的汽车设计的雏形,但也突破了现有的汽车设计状态。


图片源自 HUDS+GUIS

相信到这里大家已经对 FUI 的定义有一个较为清晰的概念,FUI 是虚构的、未来的、幻想的用户界面设计,即进行大胆的假设虚构用户界面,且并不受时间的限制的,远离现实的幻想用户界面。

 

2.FUI的优势

相对于大众接受度更好的扁平化,数据可视化设计却对 FUI 的设计风格情有独钟,在笔者所接触得到的数据可视化的设计中,无论是实际的工作项目还是一些概念稿的设计都频繁用到 FUI 的设计风格。到底是什么原因让市场对 FUI 接受程度如此之高呢?接下来我们从心理学、视觉、思维以及硬件几个角度作为切入点来进行分析。

 

A.物以希为贵

罗马人说:“物以希为贵。”因为在平时生活中极为罕见,则显得十分珍贵。例如大家平时的在玩游戏的时候,游戏中“限定”的虚拟商品总是能够比其它虚拟商品更加吸引玩家去购买,因为“限定”预示珍贵、与众不同,即使价格高一点,玩家也能够接受。例如最近王者荣耀中的新年限定皮肤,因为是“限定”,所以总是不断的勾引用户的钱包。


图片源自 王者荣耀

同样 FUI 的设计风格在整个设计行业属于一个小众的形式,我们在日常生活中难以接触到,毕竟我们的日常生活中不可能出现宇宙飞船或者炫酷的机架。面对当今扁平化设计的主流趋势,FUI 的设计风格会让用户耳目一新,接受程度会更高一些。例如在商品的展示中,同样是 New Balance 的鞋子,你那种形式的展示会让顾客更加愿意买单?

 

B.视觉优势

相对于当前流行的扁平化设计,FUI 可谓是在 UI 设计中独树一帜,设计风格十分鲜明,极具未来感和科技感。


作为主流趋势的扁平化设计,无论是 Material Design 还是 iOS 都以深入人心,人们对扁平化的设计风格习以为常,已经很难在数据可视化的设计中进行视觉创新,而 FUI 的设计风格可以说是在数据可视化的设计中极具视觉优势。

FUI 区别于我们平时所接触的扁平化的设计,在视觉层面我们主要以色彩和图形两个方面进行分析。

 

色彩

a.背景

在背景的处理上常以深色的背景营造来营造强烈空间感,让用户感觉自己处在一个三维的空间当中,例如下图,我们能够感受到强烈的空间感,数据仪表盘处于一个具有纵深感的三维世界当中,视觉中心的数据显示器与背景形成了鲜明的对比。


图片源自 HUDS+GUIS

 

b.配色简洁

在颜色的选择上,借鉴了军事设备中的配色准则,在残酷的战争中“快速、准确、直接”是最重要的,所以在军事设备上多以单一的冷色调为主,尽量避免多种色彩的使用,这样对于操作者而言更加简单。所以 FUI 的配色设计大多以冷色调为主,对比色通常作为辅助色用以反馈重要信息,例如在 007系列电影中的界面都是使用对比色反馈重要信息,如下图中的坐标信息都使用了红色作为突出重要信息的设计手段。


图片源自 HUDS+GUIS

当然也有大量使用同类色的情况,例如 Sid Meier 中的飞船状态页面,着重表示当前的飞船的状态,这样在发生异常的状况下可以立马发现。


图片源自 HUDS+GUIS

 

c.对比强烈

FUI 中的配色对比强烈,首先因为背景多以深色为主,强烈的对比能够有效的拉开页面中的空间感,例如钢铁侠中的史塔克战役中头盔的界面。


图片源自 HUDS+GUIS

其次强烈的对比能够突出核心信息,更好的进行信息反馈。例如下图,强烈的对比能让我们一眼就能看到核心信息,以及当前的状态反馈


图片源自 HUDS+GUIS

 

图形

FUI 的图形装饰元素可以说是极其丰富,形式感很强。在设计的细节当中使用大量的“异形”的图形元素,并辅以一定的装饰元素。例如下图:


图片来自于 Grey Goo

 

a.军事风格

FUI 的设计大量借鉴了军事风格,其中也大量借鉴军事操控的平台的界面图形设计,这里借鉴军事风格的原因很简单,因为在众多的科幻、动作的故事题材中都是以军队或者其他超级团队来去对抗恶势力或者外星人入侵者,在界面设计上自然要延续其中军事风格。


图片源自Behance

细节上例如战斗机上的 HUD 瞄准界面中的图形多次被引用到飞船的操作界面上等等。


图片源自 HUDS+GUIS

 

b.机甲元素的运用

大量异形元素的机架风格源于对机甲设计的灵感,并且在细节上使用大量的装饰元素。


在细节上例如边框和环形图的设计,相对于扁平化的设计,FUI 的设计风格显然更具视觉冲击力。


图片源自 HUDS+GUIS

 

C.突破思维限制

FUI 是一个非常有趣的 UI 设计领域,是我们在日常现实生活之中无法探索的用户界面设计方式。在我们的日常工作中,通常普通设计师很难有机会为宇宙飞船、时间旅行设备,或者感知型人工智能和外星人使用的用户界面做设计。


图片源自 HUDS+GUIS

FUI 使设计师有机会去突破现有的用户体验和用户界面的限制,探索一个新的领域。通过虚幻界面设计,我们可以大胆的设想以及寻找新的解决方案。例如我们可以大胆的设想 AR 技术的应用,地图可以采用全息投影技术、人与智能硬件的环境交互等等。

虚幻界面设计甚至可以是新的发明,它们可以作为一种概念的验证,它们可以启发我们,提出问题,探索什么可行,什么不可行。正如科幻小说可以激励人们登上月球或建造自动驾驶汽车一样。虚幻用户界面可以激励人们为未来创造技术。

 

D.硬件载体

在我们之前提到影视故事中设定的使用场景多为宇宙飞船的指挥舱或者驾驶舱、可穿戴式AR设备等等,但在现实生活现在多以配备“大屏”的指挥厅为主,相对于我们平时使用的移动设备和 PC 台式机,大屏的物理渲染尺寸更大,在比例上的差异也更大。如下图:


由于硬件设施的变更,扁平化的设计无法满足用户的需求,主要原因有:扁平化设计力求干净整洁,而在大屏中物理渲染尺寸的变大会显得画面格外空和呆板;其次是缺乏细节。而 FUI 的设计风格设计细节丰富,恰好可以补充其细节缺失的问题。

 

3.总结

数据可视化设计选择 FUI 的设计风格有着必然的原因,首先是 FUI 的设计风格属于一个小众的设计风格,在这个扁平化当道的时代更容易吸引用户的目光,接受程度高;其次是视觉冲击力强,设计细节丰富,军事风格和机甲风格的图形在视觉上更加新颖;再者是“大屏”作为视觉载体,物理渲染尺寸比例的变更使得扁平化设计在大屏上显得画面不饱满,缺乏细节,而 FUI 则恰好能够补充这些空白;最后 FUI 可以帮助我们突破思维限制,寻求更好的解决方案。

 

借鉴参考:

《FUI-How-to-design-User-Interfaces-for-Film-and-Games》

图片来源:

https://www.hudsandguis.com

https://scifiinterfaces.com

 

原文地址:海盐社(公众号)

作者: 姜正

转载请注明:学UI网》数据可视化为什么偏爱FUI

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

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

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

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

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



Material Design Data Visualization 数据可视化

seo达人


原则

数据可视化是一种用图形形式来描述密集和复杂信息的通讯方式。由此产生的视觉视觉效果使得数据比较和用数据讲来故事都变得更加容易——这两种方法都有助于用户做出决策。

数据可视化可以表示不同类型和大小的数据:从少量数据点到大型多元数据集都可以表示。

 

类型

数据可视化可以用不同的形式来传达。图表是一种常用的数据传达方法,因为它们不仅描述了不同的数据类型,还能进行数据比较。

图表类型的使用主要取决于两个方面:想要传达的数据,以及想要传达的数据有关的内容。以下指南提供并描述了各种不同类型的图表及其用例。

 

图表类型

随时间变化

随时间变化的图表显示一段时间内的数据,如多个类别的变化趋势及其对比。

使用情况包括:

  1. 股票价格表现
  2. 健康统计
  3. 年度报表

 

随时间变化的图表包括

  1. 折线图
  2. 柱状图
  3. 堆积柱状图
  4. 烛台图
  5. 面积图
  6. 时间轴
  7. 地平线图
  8. 瀑布流图

 

类别比较

类别比较图比较多个不同类别之间的数据。

使用情况包括:

  1. 不同国家间的收入对比
  2. 热门场次对比
  3. 团队分配

 

类别比较图包括:

  1. 柱状图
  2. 分组柱状图
  3. 气泡图
  4. 平行线图
  5. 多条折线图
  6. 子弹图

 

排序

排序图表示一个项目在有序列表中的位置。

使用情况包括:

  1. 选举结果
  2. 表现统计

 

排序图包括:

  1. 排序条形图
  2. 排序柱状图
  3. 平行线图

 

部分-整体

部分-整体图表示部分元素是如何加总为整体的。

使用情况包括:

  1. 产品类别综合收益
  2. 预算

 

部分-整体图包括:

  1. 堆积柱状图
  2. 饼状图
  3. 堆积面积图
  4. 矩阵树图
  5. 太阳辐射图

 

相关

相关图展示两个或多个变量之间的相关性。

使用情况包括:

  1. 收入和预期寿命

 

相关图包括:

  1. 散点图
  2. 气泡图
  3. 柱状和折线图
  4. 热力图

 

分布

分布图展示每个值在数据集中出现的频率。

使用情况有:

  1. 人口分布
  2. 收入分布

 

分布图包括:

  1. 直方图
  2. 线箱图
  3. 小提琴图
  4. 密度图

 

流图显示数据在多种状态之间的流动。

使用情况包括:

  1. 资金转移
  2. 投票统计和选举结果

 

流图包括:

  1. 桑基图
  2. 甘特图
  3. 和弦图
  4. 网状图

 

关系

关系图显示多个项目之间是如何彼此关联的。

使用情况有:

  1. 社交网络
  2. 文字图

 

关系图包括:

  1. 网状图
  2. 维恩图(或译Venn图、文氏图、韦恩图、范氏图)
  3. 和弦图
  4. 太阳辐射图

 

选择图表

许多类型的图表都可以用于描述数据。下面的指导方针提供了如何选择图表的见解。

 

显示随时间产生的变化

随时间产生的变化可以用时间序列图来表示,这是一种按照时间顺序来表示数据点的图表。

可以表示随时间变化的图表包括:折线图、条形图和面积图。

图表类型 用法 基线值 时间系列的数量 数据类型
线性图 传达数据中的细微变化 任何值 任何时间序列(适用于8个及以上的时间列) 连续型
条形图 传达数据中较大的差异,单个数据点如何与整体数据关联、比较和排序 0 4个或以下 离散型或类别数据
面积图 总结数据集之间的关系,单个数据点是如何与整体数据关联的 0(当有多个时间列时) 8个或更少 连续型

*基线值是指y轴上的起始值。

 

条形图和饼状图

条形图和饼状图都可以用于显示比例,表示部分值与整体值之间的比较。

  1. 条形图使用一条共同的基线,通过条柱的长度表达数量
  2. 饼状图使用圆内的圆弧或圆角表示整体的一部分

条形图、折线图和堆积面积图比饼状图更能够表达随时间产生的变化。因为这三种类型的图表中,可能的值共享同一条基线,所以比基于条柱长度的条形图更容易比较值之间的差异。

 

面积图

面积图有多种类型,包括堆积面积图和重叠面积图:

  1. 堆积面积图表示(在同一时间段内)多个时间序列堆积在一起
  2. 重叠面积图表示(在同一时间段内)多个时间序列重叠在一起

重叠面积图中不建议包含两个以上的时间序列,以免模糊数据。相反,可以使用堆积面积图在一个时间间隔内比较多个值(横轴表示时间)。

 

样式

数据可视化使用自定义的样式和形状,以适应用户需求和上下文的方式使得数据一目了然。

下列有益于图表自定义:

  1. 图形元素
  2. 排版
  3. 图标
  4. 轴和标签
  5. 说明和注释

 

设置不同类型数据的样式

视觉编码是将数据转换成视觉形式的过程。独特的图形属性可以应用于定量数据(如温度,价格或速度)和定性数据(如类别,风味和表达式)。

这些图形属性包括:

  1. 形状
  2. 颜色
  3. 尺寸
  4. 面积
  5. 体积(容积/量)
  6. 长度
  7. 角度
  8. 位置
  9. 方向
  10. 密度

 

表达不同属性

多种视觉处理方式可以应用于数据点的多个方面。例如,条柱的色彩可以表示一个类别,与此同时条柱的长度可以表示一个值(如人口大小)。

形状可以用来表示定性数据。在该图表中,每个类别由一种特定形状代替(圆形,方形和三角形),这使得比较特定范围内的数据或与其他类别数据进行比较都很容易。

 

形状

图表可以通过形状来以多种不同的方式表达数据。形状可以被设计为一条有趣的曲线,或一个精确的高保真图形,以及介于二者之间的其他方式。

 

形状的精确程度

图表可以以不同的精度来表示数据。用于深入研究的数据应该(根据触摸目标的尺寸和相关可视化要求)使用适合交互的形状来表示。而用于表达大致想法或趋势的数据可以使用细节较少的形状。

 

颜色

颜色有四种主要的区分数据的方式:

  1. 区分不同的类别
  2. 表示数量
  3. 突出特定数据
  4. 表达意义

 

颜色区分类别

在环形图中颜色被用于定义类别。

 

颜色表示数量

在地图中颜色被用于表示数据值。

 

颜色突出数据

在散点图中颜色被用于突出特殊数据。

 

焦点区域

当颜色被少量使用时,它可以突出焦点区域。不建议使用大量的高光颜色,因为它们会分散用户的注意力。

 

颜色表示意义

 

无障碍

为了适应无法区别色彩差异的用户,可以使用其他的方法来强调数据,例如高对比度着色、形状或纹理。

将文本标签应用于数据也有助于澄清其含义,同时消除了对说明的需要。

 

线条

图表中的线条可以传达数据的质量,例如层次结构、突出强调和对比。线条的样式可以采用不同方式,如使用虚线或不同的不透明度。

 

线条可以应用于特定的元素中,包括:

  1. 注释
  2. 预测元素
  3. 比较工具
  4. 置信区间
  5. 异常

 

排版

文本可以用于标记不同的图表元素,包括:

  1. 图表标题
  2. 数据标签
  3. 轴标签
  4. 说明

层次结构中级别最高的文本通常是图表标题,最低的是轴标签和说明。

范围类型 字体 字型 大小
1.图表标题 Roboto 常规 18pt
图表副标题 Roboto 常规 14pt
2.数据标签 Roboto 常规 22pt
子标签 Roboto 常规 14pt
3.轴标签 Roboto 常规 12pt
4.说明标签 Roboto 常规 12pt

 

文本粗细

标题和不同的字体粗细在层次结构中可以传达哪些内容比另一些更重要(或更不重要)。然而这种处理方式应该有节制地使用,即采用数量有限的字体样式。

图标

图标可以表示图表中不同类型的数据,以提高图表的整体可用性。

 

图标可以被用于:

  1. 分类数据,以区分组或类别
  2. UI控件及操作,如筛选,缩放,保存和下载
  3. 状态,例如错误状态,无数据状态,完成状态和危险状态

当在图表中使用图标时,建议使用普遍可识别的图标,尤其是在表示操作或状态时,例如:保存,下载,完成,错误和危险。

 

在传达意义时图标补充了颜色的意义。

 

有标记的轴

有标记的轴或多个轴能够指示数据所展示的规模或范围。例如,折线图展示的是沿水平和竖直方向标记的轴的范围内的值。

 

条形图基线

条形图应该从基线(y轴上的起始值)上的0开始。从不为0的基线开始可能会导致数据被错误地感知。

 

轴标签

标签的使用应该反映图表中最重要的数据细节。轴的标签应该根据需要,并在用户界面中以一致的方式使用。它们的存在不应该妨碍图表的阅读。

 

文本方向

在图表中文本标签应该按水平方向放置,以保证其易于阅读。

文本标签不应该:

  1. 被旋转
  2. 垂直堆叠

 

说明和注释

说明和注释描述图表的信息。注释应该突出显示数据点、数据异常值和任何值得注意的内容。

  1. 注释
  2. 说明

 

在桌面设备上,建议在图表下方放置说明。而在移动设备中,建议将说明放置在图表上方,以便在交互过程中保持说明可见。

 

标签和说明

在简单的图表中,图表元素可以被直接标记。但是,密集的图表(或较大图表组中的部分)可以在说明中显示标签。

 

小型显示器

在可穿戴设备(或其他小型显示屏)上显示的图表应该是桌面端或移动端图表的简化版。

行为

图表为用户提供了可以控制所展示数据的交互模式。这些模式让用户关注图表中的特定值或特定范围。

以下推荐的交互模式、样式和效果(如触觉反馈)可以提高用户对图表数据的理解:

  1. 逐级展开 提供了一种清晰的途径来揭示细节,可按需展示。
  2. 直接操作允许用户直接对UI元素进行操作,以减少屏幕上所需的操作步数,直接操作包括:缩放和平移,分页,数据控件。
  3. 改变透视图可以使一项设计服务于不同的用户和数据类型,例如数据控件和移动。

 

逐级展开

使用逐级展开的方式显示图表细节,能够允许用户根据需要查看特定的数据点。

 

缩放和平移

缩放和平移是图表中流行的交互方式,它们影响用户研究数据和探索图表UI的密切程度。

 

缩放

缩放改变了UI显示的距离。而设备类型则决定缩放的执行方式。

  1. 在桌面端,通过点击并拖动或滚动的方式实现缩放
  2. 在移动端,使用双指捏放的手势来实现缩放

当缩放不是主要操作时,(在桌面端)可以通过单击并拖动或(在移动端)通过双击来实现相同效果。

 

平移

平移能够让用户探索超出屏幕之外的UI。应该以对显示数据有意义的方式对其进行约束。例如,如果一张图表的一个维度比另一个维度更重要,那么平移的方向可以仅限于更重要的维度方向上。

平移操作通常与缩放配合使用。

在移动端,通常通过手势进行平移,例如单指滑动。

 

分页

在移动端上,分页是一种常见的模式,允许用户通过左右滑动查看上一张或下一张图表。

视频播放器
00:00
00:09

在移动端,用户可以向右滑动查看前一天的内容。

 

数据控件

可以使用切换控件、选项卡和下拉列表筛选或更改数据。

当用户调整控件时,这些控件也可以显示度量。

视频播放器
00:00
00:05

切换控件、选项卡和下拉列表意味着可以筛选或更改数据。

 

动效

动效可以加强并巩固数据间的关系以及用户和数据的交互方式。动效应该有目的地(而不是装饰性地)被使用,以表达不同状态和空间之间的关系。

动效应该合乎逻辑,平稳且能够快速响应,不妨碍用户的体验旅程。

 

视频播放器
00:00
00:06

在这一案例中,数据的动效设置在切换按天显示和按周显示的时候。在切换的过程中不显示所选日期范围之外的数据,从而降低了图表复杂性。

视频播放器
00:00
00:06

此处的动效显示了两张不同图表之间的联系。

 

空状态

空白的图片和表格可以显示一些表明在数据可用时期望发生的内容。

在适用的情况下,角色动画能够带来愉悦感和激励。

 

视频播放器
00:00
00:17

角色动画丰富了空白图片。

 

仪表盘

数据可视化可以在一系列的多个图表中展现,这在UI中被称为仪表盘。多个单独的图表有时比一个复杂的图表能够更好地传达一个故事。

 

仪表盘设计

仪表盘的目的应反映在其布局、样式和交互模式中。仪表盘的设计应该适应它的使用方式,无论它是一个演示工具还是一个深入研究数据的工具。

一个仪表盘应该:

  1. (通过布局)优先考虑最重要的信息
  2. 显示根据层次结构(使用颜色、位置、大小和视觉权重)排序的信息焦点

 

应该根据数据提出的问题对信息进行优先级排序。在本案例所示的操作仪表盘中,考虑了以下的用户问题:

  1. 需要被注意的问题
  2. 问题发生的时间
  3. 问题发生的位置
  4. 受问题影响的其他变量

 

分析型仪表盘

分析型仪表盘能够让用户探索多个数据集并发现趋势。通常这些仪表盘包括复杂的图表,这些图表能够发现数据细节。

使用情况包括:

  1. 强调随时间变化的趋势
  2. 回答“为什么”和“如果……怎样”的问题
  3. 预测
  4. 创建深入的报告

 

分析型仪表盘的案例有:

  1. 跟踪随时间变化的广告活动表现
  2. 跟踪产品在整个生命周期中的销售和收益
  3. 显示城市人口随时间改变的趋势
  4. 跟踪随时间变化的气候数据

 

操作型仪表盘

操作型仪表板旨在回答一组预定义的问题。它们通常用于完成与监视相关的任务。

在大多数情况下,这种类型的仪表盘会把当前信息安排在一组简单的图表中。

使用情况包括:

  1. 根据目标跟踪当前进度
  2. 实时跟踪系统表现

 

操作型仪表盘的案例有:

  1. 跟踪呼叫中心活动,如呼叫量、等待时间、呼叫长度或呼叫类型
  2. 监视云端应用程序的运行情况
  3. 显示股票市场表现
  4. 监视赛车的遥测数据

 

演示型仪表盘

演示型仪表板提供了关于感兴趣主题的详细快照。

这些仪表板通常包括一些小图表或记分卡,通过动态标题来解释每个支持图表中提供的趋势和见解。

使用情况包括:

  1. 提供关键绩效的指标概述
  2. 创建高级执行摘要

 

展示型仪表盘的案例有:

  1. 提供投资帐户表现的概述
  2. 提供产品销售和市场份额数据摘要

 

原文地址:Material Design

译者:杜雅黎

 转载请注明:学UI网》Material Design Data Visualization 数据可视化

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

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

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

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

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



UI设计师交互设计-知识图谱的信息可视化设计方法

周周

知识图谱作为语义网络,其技术算法研究被广泛应用在人工智能和大数据等领域。通常,知识图谱的运转过程是由数据模型完成,用户可见的只是计算后的结果,其数据的可视化也仅停留在对结果的可读性展示上。但其实,图谱之间的关系、数据计算的过程,也具备分析价值和潜在的机会信息。将知识图谱转化为可视化信息图,能帮助用户更好的理解和利用数据及其关系,但对于没有技术背景的界面设计师来讲,从技术架构、计算函数等技术视角去理解知识图谱概念和应用相对困难。本文分享一种设计思路,帮助大家在实际工作中,完成知识图谱向可视化交互界面的转化。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档