首页

国外大佬总结的这20条B端图表设计原则!

丽洁

最近几年以来,大家能看到B端设计趋势已经越来越火热,在B端设计中关于图表的设计算是为数不多的视觉发挥点了。那么怎样才能做好图表设计,让设计出来的图表高大上,符合业务需求,让业务方和总监对你赞不绝口,本文就必须看完和收藏了,因为实在是太实用!

应用设计越来越依赖数据驱动,对高质量的数据可视化需求也越来越高。然而我们身边却充斥着令人困惑和误导的数据图表,但我们其实可以通过遵循一些简单的规则来改变这个情况。



1. 选择一个正确的图表可视化类型


选择错误的图表类型,或默认为最常见的数据可视化类型,可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容,可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。 

undefined



2. 根据正负值使用正确的绘图方向


当使用水平条时,在基线的左侧绘制负值,在右侧绘制正值。不要在基线的同一侧绘制负值和正值。 

undefined



3. 条形图总是以0基线开始


删数据起点会导致曲解。在下面的例子中,看左边的图表可以很快的得出结论,值B比D大3倍多,而实际上,两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。

undefined


4. 折线图应该要清晰体现y轴上的趋势变化


对于折线图,总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势,因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。 

undefined


5. 使用折线图时要考虑时间连贯性


折线图是由线连接的“标记”组成,通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的,并且对于较短的时间间隔非常有效,但当数据更新不频繁时,这可能会导致混淆。 

undefined

例如: 使用折线图来代表年度收入,如果数据是每月更新的,则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值,而在特定时间实际的收入数字是未知的,所以可能会产生误会。在这种情况下,使用垂直条形图可能是一个更好的选择。 


6. 不把折线图强行”平滑“


平滑的折线图可能在视觉上很好看,但它们错误地反映了背后的实际数据,而且过粗的线会模糊真正的“标记”位置。 

undefined


7. 避免使用比例不同的双轴折线图


通常,为了节省可视化空间,当有两个具有相同度量但大小不同的数据系列时,可能倾向于使用双轴图。但这些图表不仅难以阅读,而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例,只是浏览图表,然后就得出了错误的结论。 

undefined


8. 限制饼图中显示的切片数量


饼状图是最流行的也是经常被误用的图表之一。在大多数情况下,条形图是更好的选择。但如果你决定做一个饼状图,有2个比较好的建议:

1)不要超过5-7片,保持简单

2)可以将额外的最小段分组到“其他”切片 

undefined


9. 在图表上直接标注


如果没有适当的标签,无论你的图表有多好,它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。 

undefined


10. 不要在切片上贴数据


将数据放在切片上可能会导致多个问题,在可读性问题上和窄切片上都会有挑战。相反,添加黑色标签能清晰的链接到每个部分。 

undefined


11. 保持饼图切片秩序以提升阅读效率


在确定饼片秩序时,有几种常用的方法:

1)将最大的切片放在12点的位置,然后将下一片切片顺时针降序排列

2)把最大的切片放在12点的位置,第二大的放在顺时针相邻位置,第三大的放在11点的位置,其余的切片按顺时针降序排列 

undefined


12. 避免随机排列


同样的建议也适用于其他许多图表。不要默认采用字母排序,将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图),以确保最重要的数值占据最突出的空间,减少眼球运动和阅读图表所需的时间。 

undefined


13. 窄的饼图是难阅读的


饼图通常不是最容易阅读的图,因为比较相似的值非常困难。当我们把中间部分去掉,创建一个圆圈图表时,我们腾出了空间来显示额外的信息,但这样牺牲了清晰度,极端情况下,图表就会变得毫无用处。 

undefined


14. 视觉效果不要抢了数据风头


不必要的造型不仅会分散注意力,还可能导致对数据的误解和用户的错误印象。你应该避免:

1)3D元素,明暗面

2)阴影、渐变和其他扭曲的多彩色

3)斑马图案,过多的网格线

4)过度装饰,斜体,粗体或衬线字体 

undefined


15. 选择与数据性质相匹配的调色板


颜色是有效的数据可视化的组成部分,在设计时考虑以下3种颜色类型:一个定性调色板最适合显示分类变量。为确保易用性,所分配的颜色应该是不同的。连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合,可以创建一个连续的颜色集。

发散调色板是两个连续调色板的组合,中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。 

undefined

看看一个方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3,它可以帮助你生成各种调色板。 


16. 设计的可访问性


根据美国国家眼科研究所(National Eye Institute)的数据,大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。

1)在调色板中使用不同的饱和度和亮度

2)把现有配色去色然后检查对比度和可读性。 

undefined


17. 关注易读性


确保排版能够准确传达信息,帮助用户专注于数据,而不是分散用户的注意力。

1)选择易读的字体,避免衬线和装饰过度的字体

2)避免使用斜体、粗体和全部大写

3)确保与背景有高对比度

4)不要旋转文字

undefined

 

18. 使用水平条形图代替旋转标签


这个简单的技巧将确保用户能够更有效地阅读图表,而不会扭伤他们的脖子。 

undefined


19. 事先选择合适的图表库


如果你的任务是在web和移动项目中添加交互式图表,你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现,并能提供大量交互想法。 

undefined


20. 做成动态图表


帮助用户通过改变参数,可视化数据进行探索。然后得出结论,最大化价值和洞察力。在下面的示例中,你可以看到IOS Health应用使用了各种数据表示的组合。 

undefined

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


设计中的视觉不平衡

丽洁

用户本能地会对不平衡的设计感到厌烦,如何在画面中创造一个有吸引力的平衡?是本篇文章要分享的内容。

undefined

Illustration: Outcrowd


平衡是一个作品中最重要的元素之一。平衡中的对称关系能够创造平衡与和谐,这种平衡状态直观上能够让用户感到舒适。


人体是垂直对称的,我们的视觉接收也与之相对应。我们喜欢物体在垂直轴上保持平衡,直觉上总是倾向于平衡一种力量与另一种力量。


undefinedIllustration: Outcrowd


在设计环境中,平衡是基于元素的视觉重量,而视觉重量是用户对图像的注意力范围。如果画面是平衡的,用户会下意识地感到舒适。画面平衡被认为是其元素在视觉上的比例安排。


如何让一个页面看起来平衡?


1. 对称(静态)平衡

最常见的平衡例子就是使用对称。


在潜意识层面上,对称的视觉能让人愉悦,能让画面看起来和谐有条理。对称的平衡是通过在水平或垂直的中轴两侧均匀放置元素来创造的。也就是说,画面中间假想线的两边实际上是彼此的镜像。有些人认为对称的平衡是无聊和可预测的,但它经受住了时间的考验,到现在仍然是在页面上创造舒适和稳健感觉的最好方法之一。


undefined

Illustration: Outcrowd


2. 不对称(动态)平衡


两侧重量不相同的元素构成具有不对称平衡。


动态平衡通常会比静态平衡更有设计感,让画面不至于呆板。在缺乏平衡的情况下,我们的目光会条件反射性地开始寻找平衡点,这是一个很好的机会,可以将注意力吸引到页面上可能还没被注意到的部分。页面重点就应该放在这里——抓住用户的注意力,就像产品的生命线一样。 


undefined

Landing page — Asian Cuisine


比如一般这样去“配重”的元素会是一个按钮或者标题。


重要信息(或者是行动按钮)就是我们需要去配重的价值元素。


不对称的现象越严重,用户就越想找出其中的原因(检查配重)。人们本能地比平时更仔细地研究这样的画面。然而,这里需要注意分寸,过于古怪的构图并不总是能被很好的感知。



3. 径向平衡


undefined

Illustration: Outcrowd


平衡中的另一种类型,特点是视觉元素从一个共同的中心点放射出来。径向平衡在设计中不常用。它的优点是,注意力很容易找到并保持一个焦点——恰好就在它的中心,这通常是构图中最引人注目的部分。



4. 马赛克平衡


这是一种平衡中的混乱,就像 Jackson Pollock的画作一样。这样的组成没有突出的焦点,所有的元素都有同样的视觉重量。没有层次,乍一看,画面就像视觉噪音,但所有元素又相互匹配,形成一个连贯的整体。


(彩云注:这是一种比较高阶的设计平衡处理手法,用的好可以让画面非常具有设计感,但把握不好的话,就会非常凌乱。所以,我们平时能看到很多大师的作品看似一些简单图形的使用,但就是好看,轮到自己设计的时候就会发现,越简单的设计似乎越难设计好。) 


undefined

Illustration: Outcrowd



视觉平衡的秘密?

当谈到构图中的重量平衡时,他们经常将其与物理世界中的重量进行比较:重力、杠杆、重量和支点。我们的大脑和眼睛感知平衡的方式非常类似于力学定律。我们很容易把一幅画想象成一个在某一点上平衡的平面,就像一个天平。如果我们在图像的边缘添加一个元素,它就会失去平衡,有必要修复它。元素是否是一组色调、颜色还是点并不重要,目标是找到图像的视觉“重心”,即图像的重心。


不幸的是,没有精确的方法来确定一个物体的视觉质量。一般来说,设计师依赖于他们的直觉。不过,下面这些有用的观察可能会有所帮助:

  • 大小

大的物体总是更重

  • 形状

不规则形状比规则形状的元素轻

  • 颜色

暖色比冷色重 


undefined

  • 色调

    深色物体比浅色物体重


  • 图案

    带有图案的元素显得更重


  • 3D

    带有纹理贴图的元素显得更重 

undefined

  • 位置


物体离中心越远,其视觉重量越大 


  • 方向


垂直元素比水平元素更重 


  • 密度


许多小元素可以抵消一个大元素 



  • 内部复杂性

    物体内部越复杂,视觉重量更大

  • 填充空间关系

    正形空间比负形空间更重

  • 对重量的感知

    照片中的哑铃看起来会比一只钢笔更重 



总结

当使用对称时,作品看起来可以更加的专业和有科学性。其中,静态对称的作品显得更加有专业精神和严肃的;而动态对称的设计方法则能吸引用户的兴趣,表达出个性和创造力,能让用户集中注意力。 


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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


图标设计不专业?可能是这10个容易被忽视的细节没做好

丽洁

图标是任何设计系统不可或缺的一部分。使用图标的主要原因是帮助用户快速理解想法,实现快速导航,解决语言障碍,最终提升用户体验。


图标作为一种设计工具,在UI/UX和平面设计师中最受欢迎。这些微小的设计元素对每个人来说都是简单易懂的,这些特征赋予了它们通用数字语言的地位。


在这篇文章中,我整理了10个简单又重要的技巧帮你设计出更专业的图标。


1.尺寸规范 


最小的图标大小通常是12 x 12px。以这个尺寸为基础,行业标准中大多数其他尺寸只是通过将之前的尺寸翻倍而产生的。

  • 小尺寸图标,px: 12 x 12, 16 x 16, 24 x 24, 32 x 32, 48 x 48.
  • 中尺寸图标,px: 64 x 64, 96 x 96, 128 x 128, 256 x 256.
  • 大尺寸图标,px: 512 x 512, 1024 x 1024.

重要提示:当你设计图标时,重要的是要按100%显示的比例去设计,使图标完美像素并放大像素块查看准确性。 


2.保持像素完美 


完美像素图标在屏幕上能呈现尖锐和清晰的线条和形状。如今,高分辨率显示器和视网膜显示器正变得越来越好,所以在不久的将来,对像素完美图标的需求可能会减少。但就目前而言,让你的图标具有可伸缩性、响应性和适配更多设备是非常重要的。


1) 像素网格对齐.

使直线部分完全清晰,并增加曲线和边角的清晰度。


undefined



2)完美角度

有角度的线更模糊。创建图标的最佳角度是45°,因为形成一个角的像素彼此对称。



undefined



3)边缘清晰

直线必须占据其边缘上最暗的4个像素。这样线的边缘看起来更清晰。



undefined



3.注意粗细和间隙 


为了让图标看起来整洁一致,重要的是要记住线条宽度和间隙大小。这条规则我认为是必须遵循的:所有线条的宽度都是相同的。


理想情况下,线宽和间隙大小也应该相等。 


undefined




undefined


然而,有时候你必须打破这个规则。当你需要解释我们在日常生活中面对的一个具有非对称模式的物体时,它就会发生。比如条形码这个例子来说,我故意使图标内的线宽和间隙大小不均匀,以表示条码的特征。 



undefined



4.统一圆角 


在UI设计中,对象(包括图标)的角半径定义了项目的外观和感觉。当我们说到一个集合中的多个对象时,规则很简单:在正方形和圆角之间进行选择,并对所有的图标应用相同的属性。


为什么它如此重要?一致性是UI/UX设计的关键原则。一个可用和用户友好的设计总是提供一致的体验。在下面的例子中,你可以看到打破这个原则是如何影响视觉感知的。 



undefined




undefined



5.视觉平衡 


在电脑上看起来完美对齐和平衡的东西,在你的眼睛看来可能并不一样。

当我们把大小相等的正方形和圆放在一起时,我们会有一种不对劲的感觉,圆似乎比正方形小。为了使我们的形状在尺寸上看起来相同,我们应该使圆更大(或减少正方形的尺寸)。 


undefined




undefined




undefined


这个原则也适用于图标的设计和使用。有些图标的一侧可能较重。试着调整它们一两个点,直到整体对齐看起来正确。在下面的例子中,你可以看到突出显示的图标看起来很大,尽管它与其他部分的大小相同。为了平衡这个集合,我们需要通过缩小图标的大小来调整突出显示的图标。


(彩云注:这个原则很多人应该都知道,但我发现也是在整套图标的设计中最容易出现的问题,当把图标汇总在一起的时候,这个问题尤其需要重视。)



undefined




undefined



6.视觉对齐 


我们经常在设计软件中使用中心对齐,这种方法没有错。但当涉及到细节时,比如图标设计,我们需要相信自己的眼睛,打破数学法则,以增强元素的平衡。


让我们以播放按钮作为展示。这个例子很简单,但非常能说明问题,因为形状越不对称,需要改进的缺陷就越明显。 


undefined




undefined



7.保持简单和直接 

我打赌你已经猜到我们指的是KISS原则。这一原则背后的思想是,大多数系统在保持简单的情况下工作得最好。用户越容易理解某样东西并与之互动,它就越具有通用性。


(彩云注:KISS原则是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的缩写。篇幅有限,彩云帮大家找了一篇参考文献https://www.jianshu.com/p/7d58b96d0185#comments ,感兴趣的可以去学习下。)


它如何适用于图标设计?


1)别使用文字


文本和图标的绑定减少了图标的通用性。此外,小尺寸的文本是可读性很差。如果一定要文本作为支持元素,使用工具提示和图标旁边的标签。



undefined



2)不要过度设计

不必要的复杂性阻碍了合理的表达,应该避免。过载的设计会将用户体验变成一场噩梦。



undefined



3)避免不必要的元素 

只要确保每个图标在整体环境中是可理解和清晰的就行。(彩云注:比如已经是在邮件客户端中,就不需要再额外增加表示邮件的图标部分)


undefined


重要提示:在图标设计中合理地使用KISS原则,也不要把事情做得太简单,否则会影响功能。一个优秀的图标应清晰易懂。


8.图标规范框架 


图标规范框架通常是指组合在一起的圆形、正方形、纵向和横向矩形。它们创建了一个框架来设计图标。但是,这个规则非常灵活,只是作为参考,方便图标的设计在视觉上平衡。所以,如果你觉得你的图标不完全匹配这个框框,但看起来完全正确——相信你的眼睛! 


undefined




undefined




undefined



框架是设计的“容器”。框架规范了一个统一的范围来设计图标,这背后有一些原因:


1) 大小

由于其几何形状,所有图标都具有不同的高度和宽度。为了在我们的设计中统一图标尺寸,我们应该将它们放置在大小始终相同的框架中。


undefined


2)输出


框架内的图标与视觉中心对齐,这经常被开发人员忽略,因为他们经常根据实际的中心来调整图标,而没有注意到差异。这就是为什么用框架输出图标是至关重要的,当你按这个框架输出图标时,能保证视觉设计时想要的视觉中心。


undefined



3)效率

如果使用Figma,可以通过创建组件来节省时间。可以使用实例快速地将一个图标替换为另一个图标。


undefined



9.设置好图标的关键词 


如果你要打算做图标资源库的话。要想到当设计师在库中搜索图标时,会遇到哪些挑战?他们的痛点是什么?他们的需求是什么?要回答这些问题,请设身处地为用户着想。 


1)不要让用户思考

例如,如果他们不知道自己想要找到哪种花卉图标,那么就让他们看到一系列选择:鲜花项链,室内花卉,植物商店等。



undefined



2)展示关联图标

例如,如果用户想在相同的主题或类别中找到图标,他们可以快速地检查包含这个特定图标的完整集合。


undefined



3)使用标签

用户可能很难找到合适的词进行搜索,或者可能希望看到所有类似的补充选项,从中选择最合适的。例如,当一个图标的实际名称是“兰花花瓣”,你仍然可以找到它与以下关键词: #兰花#花瓣#花瓣#花#装饰#花#植物#花园#开花#植物#自然#热带#树枝#美丽#植物#美丽#自然#叶子#优雅#浪漫


undefined



10.SVG和PNG图标的区别 

最终应该导出SVG或PNG格式?这是一个关键问题。让我们来比较一下格式:

  • SVG的文件大小非常小,这意味着最终设计的加载速度非常快,而PNG则相当大。
  • SVG格式是无限可伸缩的,而PNG的分辨率则受创建的文件大小的限制。然而,将一个复杂的SVG图标缩小到随机大小可能会产生半像素的边缘,这可能会使图标看起来有虚边。这是因为当屏幕上的图标变得更小时,代表其来源的像素就会减少,从而导致清晰度下降。这并不意味着需要避免使用SVG文件。只需根据预期用途调整 SVG 图标即可。
  • SVG文件可以编辑和动画,PNG文件只能是静态的。
  • 对于PNG格式,你必须提供各种大小和颜色的资源,而在使用SVG时就不需要这些了。
  • Png与大多数浏览器兼容,而svg可能不被旧的浏览器支持。


我个人的选择是使用SVG图标,因为它可以节省很多时间。但是,一定要小心缩小复杂的形状,并记住旧的浏览器可能不支持SVG格式。

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

2022年你最需要抓住的UI/UX设计趋势

丽洁

在本文中,我们将发现:

  • 3D视觉设计师的内卷将会越来越严重

  • 数据可视化的工作将变得越来越重要

  • 服务的移动化还需要做出更多努力

  • scrollytelling 技术会越来越流行



1、滚动已死,滚动叙事兴起 


旧的滚动是无聊的。如果你想吸引注意力,你就需要实现滚动叙事(scrollytelling)。(彩云注:这个技术的核心在于边滚动页面边讲故事) 

undefined

《纽约时报》是第一批在他们的文章《雪花飘落》中使用滚动叙事手法的机构之一。


它是一种叙事形式,可以在网页和APP上呈现。想象一下,在一个网站中每个插图、文本和其他元素都开始变得生动起来。自然地,你会想看到这个故事的结局。它就像一个游戏,带你穿越迷宫。虽然你不能影响它的进程,但却让你感觉自己能参与其中。


2022年,Scrollytelling将会出现在你看到的每一个流行网站上。


另一方面,scrolllytelling让用户真正去阅读内容。你可以用动态文本让他们产生兴趣,比如谷歌的网站 (https://www.google.com/search/howsearchworks/)。他们的团队知道如何让信息看起来更好:

undefined

Scrollytelling在用户向下滚动时被激活,因此得名。没有点击,没有选择的麻烦,没有弹出窗口。你似乎停留在一个地方,但通过滚动,把屏幕上的故事慢慢展开。这不仅要求设计师创造出酷炫的视觉效果,还需要认真思考一个你想要讲述的故事情节。


所以,最好的网站不可能在2天内建成,需要更多的时间去打磨。

undefined

IAmBinadam令人惊艳的叙述设计


滚动叙事的项目通常需要大量的时间和精力。不过,这样做的结果是值得的。页面变成“活的”,每一秒都有新的事情发生,所以在阅读时很难感到无聊。


那么移动端APP呢? Pure是一款约会应用(彩云注,这个应用在app store可以搜到,推荐大家安装一个体验一下,非广告),它创造了一种我称之为“tappytelling”的故事(当你第一次点击并打开应用时,它就会被激活):


undefined


Scrollytelling是为用户而创建的,用户很喜欢它,不需要到其他页面去阅读整个故事。相反,网页设计的整个故事都是事先考虑好的,并尽可能以最有趣的方式设计出来。 


2、用户喜欢看数据,数据可视化越来越被重视 


如何在2022年做出一个还不错的企业网站?你不会想告诉用户你是“XX领域公认的领导者,该领域最好的之一”。这种标准的广告表达并不传达任何有价值的信息。


最好不要用形容词,而是用事实来说明:你有多少分支机构,在哪些城市,谁是你的客户,以及你是如何帮助他们的。抽象信息是不可靠的。但如果你有很多想要分享的数据,你需要让它不仅简单,而且有趣。 

undefined

数据可视化有助于以一种吸引人的方式传达正确的信息。它也可以与滚动叙事(Scrollytelling)紧密结合。以下是IAmBinadam展示数据的方式:


undefined

 通过去除数据集的复杂性,使信息更容易让读者感知。

undefined

不同级别的数据具有不同的大小,这样用户知道应该先从哪里查看


读者可以很快注意到作者试图通过图片引出的结论。考虑到如今人们消费的数据量巨大,那些干净整洁的数字带来的正面影响更大。 


undefined

有些图表乍一看甚至不像图表,这使得它们更加能被注意到


还有一种现象叫做“新冠后遗症”。这是Covid对公司及其员工的长期影响。根据英国国家统计局的数据,2018年,压力和焦虑的平均得分约为2.7/10。自新冠疫情发生以来,得分已升至4.0/10,很少低于这一水平。同样因为大流行,在过去两年里工作量增加了4个小时。


人们压力太大,卷的太辛苦,以至于不愿去看复杂的数据。


设计师做好数据可视化,以保持人们的注意力。记住,复杂的信息通常被忽略,因为读者试图节省他们的时间,更有可能使用滚动按钮。
undefined

Illustration by Mona Chalabi


以下是我们推荐的一些表示数据的方式

  • 1)图表和曲线图

  • 2)插图

  • 3)静态信息图

  • 4)互动信息图


undefined

Illustration by Ink Factory


如何让信息图表看起来更好?

一个好的图表,或者任何其他形式的数据可视化,都应该具有在Edward Tufte的“定量信息的可视化显示”中描述的特征。在他的书中,Tufte通过图表解释了好图表的3个原则:


1)展示数据的图形元素与数值总数的比值应趋向于1。简单地说,应该删除一切不必要的元素,保持整洁。 


undefined


2)充分利用好画面空间。也就是说,需要将数据编排的更紧密


undefined

Graph by Hootsuite


3)客观地描述数据。不要使用夸张的图表,可视化数据可以看起来很酷,但真实永远是更重要的。


3、2022年还有必要做APP吗?


根据We Are Social的数据,2021年有52.2亿人使用手机,约占世界人口的66%。自2020年1月以来,手机用户数量增长了1.8%(9300万),而手机联网总数量增长了7200万(0.9%),到2021年初达到80.2亿。


过去一年,社交媒体用户的数量增长了13%以上。到2021年初,社交网络上已有近5亿新用户注册。根据App Annie的数据,Android用户每天花在手机上的时间超过4小时。2020年,安卓用户上网时长超过3.5万亿小时。


令人印象深刻的数字,是吗?似乎到2022年,为产品做一个APP将成为必须拥有的东西。如何知道你的公司是否真的需要一款应用?有以下几点可供评估:

 

1)用户主要通过移动设备访问你的网站这是你应该了解的重要数据。

客户和你在一起的时间越长,你就有越多的机会去吸引他们,了解他们的习惯,并给他们想要的东西。(彩云注:这就是为什么各大厂之间都在拼命抢占用户的在线时长。)

2)帮助内部业务流程更加有效。

如果你想要提高员工的工作效率、改进工作流程或增加利润,那么就制作一个可以帮助管理业务流程的移动应用。

如今,像这样的手机应用使企业能够执行越来越复杂和多样化的任务,加快日常重复操作和文档管理。


3)实现一些网站上没有的新功能。

如果你认为APP能为用户打开新的触点,并让用户体验更加友好,那么它就值得考虑开发。问问自己的APP能提供什么新的商业机会?例如,随着疫情的蔓延,许多人开始用上健身APP在家里锻炼。


4)竞争对手做的情况。

要了解竞争对手在做什么,他们是否有APP,能做什么,以及他们是否真的对用户有用。


查看App Store和谷歌Play的统计数据。下载和评论的数量可以告诉你用户是如何使用竞争对手的应用的。如果他们的服务真的很方便而且很有必要,那么你就容易被甩在后面。


5)复购率。

一个应用可以帮助你留住那些习惯从你那里购买的人。如果想为老客户开展促销活动了,给他们发送一个通知就能完成,成本更低。


在正确的时间提供的报价越有吸引力,人们购买的可能性就越大。

undefined

6)促销工具。


有了应用,你就不需要花钱设计和制作实体卡,客户也不需要随身带卡。将促销计划整合到APP,并分享有用的促销信息。


做原生APP还是移动端网站?

开发手机网站比开发手机应用需要更少的工作量,这反过来可以降低整体推广成本。


这部分是由于响应式设计的出现,它允许你根据打开网站的设备屏幕来调整网站。至于APP,它们必须为许多移动平台单独编写:Android、IOS、Windows等。


一些设计师认为“前端驱动的网络体验”会是2022年的一个好机会,我非常同意!(彩云注:在国内,现在开发小程序的肯定越来越多了。) 


4、3D设计具备更强竞争力 


我们一开始并没有将其放在首位,因为这并不是一个新的趋势,在很久以前设计师们就已经设计了很多3D图像和动画了。 

undefined

Cardi B rhymes with 3D

3D技术已经在过去流行了很多年,但它不会很快消失。此外,我们预测3D图形将变得更加多样化和包容。


在过去的几年里,3D艺术和动画已经出现在各种UI设计趋势评论中。这意味着越来越多的设计师将它们整合到页面中。


3D当然应该成为2022年最热门的趋势和预测之一,因为与经典动画相比,逼真的3D形状结合动画总是引人注目的。


undefined


从技术上讲,通过3D更容易传达更多内容,因为它比平面图片更接近我们的感知。3D插图更有深度,信息量更大,也更具互动性。"


许多设计师将3D对象无缝地“安置”在2D空间中。它允许创建更有趣的组合,也作为一个优秀的工作方法蕴藏着巨大的潜力。


undefined

乌克兰政府网站用3D手模拟了黑客帝国


注意一点:在整合3D图形等重量级内容之前,确保你的应用性能是OK的,能够快速加载所有元素。 


5、元宇宙风潮  


Meta的logo既不是2D也不是3D。或者两者兼而有之?这就是即将到来的2022年的莫比乌斯带和薛定谔的猫。 

 undefined

undefined

Meta logo的变化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)


(彩云注:这个概念在去年简直不要太火,未来几年肯定还会是一个大的趋势,设计师也需要保持关注。跟着趋势走,易于放大自身价值。)


6、混合动画  


越来越多的公司在网站和移动应用中使用动画,以提高用户的沉浸感和体验,使内容更有趣。 

undefined


动画是2022年重要的网页设计趋势。2022年,如果没有它,你的产品很可能会看起来就像个半成品。混合风格的动画越来越受欢迎:定格动画和3D动画的结合,2D动画和3D动画的结合。设计师这样做是为了获得不同寻常的风格解决方案,以及提高最终产品的质量。


2022年,动画设计将是品牌市场定位的重要组成部分,想想一个公司新的视觉形象——动画形象。随着这个领域的专业设计师数量的增长,实现新想法的机会也在增加。


2022年如何使用网页动画?

1)讲故事动画。

可以通过在界面和用户之间建立情感联系来传达信息。 

undefined

加载动画Yoichi Kobayashi


2)更有趣的加载。


用户不愿意等待,除非载入画面很有趣。带有百分比的动画不仅可以分散用户的注意力,还可以告知他们加载页面需要多少时间。使用进度条或者任何你能想到的可以显示时间流逝的东西。

undefined


3)光标效果。

用户可以精确地观察光标所在的位置。通过添加智能互动动画,对这个光标作出反应来探索网站。这种效果在21世纪初非常流行。如你所知,流行趋势往往每20年就会重演一次


undefined 


4)动态排版

你有没有想过让字母跳舞? 

undefined



添加角色的动画插图

据Statista统计,2020年全球动画市场达到了2700亿美元。趋势是视频,而不是静态信息。全球品牌在社交网络上使用动画制作广告。毫无疑问,动画插图的优势是它们非常灵活和多样化。 

undefined

宝马历史动画


这样的作品通常用于两种情况:

1)用于解释视频

2)电商广告

undefined

动画解说的趋势出现在几年前,解说视频清楚地显示点击的位置或公司的项目是关于什么的。


在招聘或商业视频中,用户更喜欢看画出来的人物,而不是抽象的形状或物品。画出来的人物可以唤起情感共鸣,就像活着的人一样。


7、微交互,大影响  


微交互是帮助用户浏览网站或应用的小界面变化。通常这些是作为提示用户的视觉或声音效果:它们显示发生了什么,将导致什么操作,下一步需要做什么。 

undefined

图片来源awwards


动画交互将为你的设计注入活力,并有助于保持用户粘性。关注每一个细节是设计师工作的关键,因为设计中的所有元素都可以带来积极的用户体验。


重要的是要达到元素的和谐,而不是把注意力分散到界面的各个方面。微交互作用的一个重要部分是颜色,它们为界面元素增强价值。


undefined


微交互有助于页面导航,解释它们的功能。最重要的方面之一是加快和简化以前冗长的功能,以实现特定的行为。 


8、动态logo,加深品牌印记  


2022年,在线品牌面临着新的挑战,需寻求新的解决方案,其中之一就是动画logo设计。 

undefined

图片来源Toridori


动画logo主要有以下几点营销优势:

1)吸引注意力。这意味着它们有助于提高品牌知名度。

2)有助于提高SEO。谷歌更倾向于动态内容,带有动态图形的页面更容易吸引用户。

3)在移动端看起来更好。丝滑的动画看起来比静态的logo更有趣。

4)最重要的是展示了历史。静态logo背后的想法正在动画中发展。由于这一点,在几秒钟内,你可以展示品牌的使命,甚至它的价值!


undefined

一家洗衣机[公司]的标志(https://www.schulthess.ch/)

现在有很多设计模板,可以很容易地用字体制作一个动画logo:


undefined



undefined

图片来源Shabello, Bobby Voeten

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


魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



如何让用户始终有掌控感——信息架构

丽洁

信息架构是产品的骨架。具体而言,就是一款产品有几个一级页面,以及支撑起整个产品的一级页面、二级页面各有几种内容样式。所谓一级页面,微信的“发现”页就是一个一级页面;在“发现”页点“朋友圈”,进去的就是一个二级页面。所谓内容样式,Banner 是一种内容样式,九宫格是一种内容样式,设置页面那种列表也是一种内容样式。

 

这样的信息架构,有什么价值?

 

 

01 信息架构的价值:掌控感与健康迭代

 

对用户而言,信息架构的主要价值在于掌控感;对产品而言,信息架构的主要价值在于健康迭代。

 

1. 掌控感

 

如果房间里很乱,到处都堆满了东西,常穿的衣服也找不到了,我们就很容易变得烦躁不安。相反,如果混乱的房间被收拾得很整洁,我们的心情也会随之变得愉悦起来。

 

这中间的原因是什么?

 

个人觉得,从原始社会到 21 世纪,我们人类一直生活在竞争中,所以一直在追求一种对生活的掌控感。这种掌控感,会让我们找到一种存在感和价值感,从而给身处竞争中的我们一种安全感。一个收拾得井然有序的房间,会让我们觉得一切尽在掌握中;一个胡乱塞满东西的房间,则会让我们觉得这个房间处于失控状态,从而引发烦躁不安。

 

一款 App,如果主要的几个一级页面也都塞满了各式各样的内容,那么用户通常也会感到烦躁不安。这是因为用户不能马上理出头绪,不能马上获得那种掌控感。另外,如果大的改版经常让用户体会到这种烦躁不安,用户就会对这款 App 感到不满和失望,甚至失去信心和期待。

 

所以说,信息架构的第一个价值,就是让用户始终有掌控感。

 

2. 健康迭代

 

产品的更新迭代,有时会出现“发福”和“微整形”的情况。这都属于不健康的迭代。

 

所谓发福,就是变得臃肿了,比如一级页面突然增加了很多内容样式。所谓微整形,就是和之前比有点乱套了,比如有的一级页面突然消失了、有的一级页面突然出现了、有些常用的功能突然找不到了,诸如此类。

 

一款产品,如果大的改版总是通过发福、甚至微整形的方式实现,用户就很难获得掌控感。

 

反过来,一个优秀的信息架构,是接近“冻龄”的。也就是说,不管产品怎么更新、怎么加新功能,都能简单如初,都能让用户马上获得掌控感。典型的例子是微信:微信已经加了很多功能,但整体给人的感觉依然是简单的。

 

这样的信息架构,很少发福,也几乎不做微整形,所以能让用户永远有掌控感,从而确保产品能够健康迭代。

 

 

02 怎样实现信息架构的价值

 

什么样的信息架构,能够实现“掌控感”和“健康迭代”?

 

其实参考答案刚才已经出现了,那就是接近冻龄的信息架构。或者更确切地说,是一种“以不变应万变”的信息架构。

 

这里的不变,是指信息架构看起来永远没有明显变化,永远都很简单。万变,是指不断新增的功能,不断变化的功能。

 

如何做到以不变应万变?一级页面和二级页面都很关键,其中最核心的是一级页面。这里也顺便抛一个问题:一级页面,用来干啥?

 

一级页面主要用来干三件事,分别是:提供掌控感、提供常用功能、提供小入口。也就是说,一级页面尤其要把掌控感给到用户,要让用户快速找到常用功能,同时还要为不常用的功能提供一个小入口。需要说明的是,这个理念可能不太适合一些商店类产品,比如淘宝这样的电商产品,所以仅供参考。

 

那如何完成这三件事?主要有以下四个要点。

 

1. 不要超过 4 个一级页面

 

4 个和 5 个,它俩之间存在微妙的区别。比如我们给手机号或银行卡号分段时,更喜欢每段最多分 4 个数字,而不是 5 个,直观对比见下图。


4 个还是 5 个

 

很多 App 的底部导航栏,也是只有 4 个Tab,即 4 个一级页面。受生活经验等因素影响,当我们看到 App 有 4 个一级页面时,内心或潜意识里可能会觉得:哦,4 个,还算简单,基本能记住;而当看到有 5 个一级页面时,可能会感到一丝压力:5 个啊,有点多了。

 

总的来说,我们更偏爱只有 4 个一级页面的产品,因为 4 个仍在简洁的范畴内,5 个就已经开始走向复杂。在《微信背后的产品观》这场分享中,张小龙也提到过:“微信保证只有 4 个底部 Tab。”

 

2. 不要超过 3 种内容样式

 

Keep 6.0 系列的“探索”页面有 5 种内容样式,显得很复杂。微信的 4 个一级页面中,“发现”和“我”页面只有 1 种内容样式,“微信”和“通讯录”页面只有 2 种内容样式(加上顶部的搜索框),显得非常简单,和 Keep 的对比如下图所示。

 

Keep 6.0 系列与微信的内容样式数量

 

像微信这种内容样式数量上的极简,可能很多产品难以做到。那么,我们不妨退而求其次,早期先从 1 种、2 种内容样式开始。后期加功能了,可以考虑第 3 种,谨慎考虑第 4 种,尽量不要增加第 5 种,因为一定会变得复杂。

 

大家可能会说,产品的功能很多,3 种内容样式不够用。

 

针对这种情况,只要逻辑上不存在大的问题(比如把“支付”放到“通讯录”页面),就可以尝试把不同内容合并成一种样式。微信在这方面就做得很好,大家可以参考它的设计。比如下图的“通讯录”页面,联系人上方那些内容,和联系人不是同一类内容,但它们共用一种内容样式——一个简单的图文列表。

 

微信“通讯录”页面:不同内容合并成一种样式

 

3. 不为二成需求,去打扰八成用户

 

产品设计里存在一个比较常见的问题,就是往一级页面塞很多内容或功能,其中有相当一部分是用户日常用不到的,这种设计容易让人觉得臃肿。比如 Keep 6.0 系列的“运动”页面,就用了较大空间来推荐付费计划和运营活动,如下图所示。

 

用较大空间来推荐付费计划和运营活动的 Keep 页面

 

相信有相当一部分用户是不需要这些内容的,所以这其实也是一种打扰。这种打扰会影响到这些用户对这个界面的掌控感。

 

这种现象有两个可能的原因。一是企业担心用户不用这些功能,所以就在一级页面用很多空间来展示它们,Keep 的例子应该属于此类。二是有部分用户提建议,所以企业就加了这些功能。

 

关于第一个原因,个人观点,有些功能本身就属于二成需求,在一级页面占用太多空间不仅改变不了这个现实,还会对用户形成打扰。

 

关于第二个原因,个人看法,用户的建议通常只代表个人立场,而企业至少要代表大部分用户的立场。比如,网上就有人建议微信在朋友圈加一个屏蔽别人的功能,实际上微信有这个功能,只是一直隐藏,没有放出来——因为用的人少,它属于二成需求,放出来的话会对八成用户形成打扰。

 

总的来说,理想情况是接受现实、尊重规律:是八成需求就提供八成空间,是二成需求就提供二成空间。具体参考如下图所示。

 

是八成需求就提供八成空间,是二成需求就提供二成空间

 

4. 尽量不在标题栏使用 Tab 或下拉框,增加维度

 

这其实是张小龙分享过的一个观点,我个人很赞同,就直接引用一下。下面直接看两个例子。Keep 6.0 系列的前三个一级页面,标题栏都使用了 Tab,就显得内容很多,有点复杂,如下图所示(仅展示前两个)。

 

使用了 Tab 的标题栏

 

微信中拥有标题栏的前三个一级页面,其标题栏都没有使用 Tab 或下拉框,就显得简单、内容少,如下图所示(仅展示前两个)。这也是微信保持简单的一个重要原因。

 

没有使用 Tab 的标题栏

 

 

结语

 

一般情况下,产品都需要更新迭代:增加新功能,完善旧功能。

 

用户则是一个矛盾体:一方面对新功能和新事物怀有好奇心;另一方面又希望每次打开常用的产品时,都有一种回到家一样的熟悉感和一种家里井然有序的掌控感。

 

好的做法,就是类似微信那样:尽管加了新功能,但是看起来没有明显变化。也就是说,以“不变”的信息架构,来应对万变的功能。

原文地址:站酷    作者:SnowDesign


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

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

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

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

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




交互设计:如何做到善意?

丽洁

我们来探讨下交互设计的善意。


善良常常被用来形容人,偶尔被用来形容产品,很少被用来形容交互设计。


就像人们会说,iPhone 有人文关怀,而很少会说,iPhone 的交互设计有人文关怀。在笔者看来,原因之一,是交互设计很难将人文关怀囊括完,而产品本身则基本可以。


类似的道理,本文探讨的善意,始于交互设计,但不局限于交互设计,还包括产品和企业的善意。


一家之言,欢迎交流探讨。



01 为什么选择善意?


一个 3 岁小孩流落街头,无家可归,会让无数人起恻隐之心。我们普通人的微小善意,有时可能是一种本能反应,或者说是一种感性反应。


“他内心是有时邪恶,还是对人们始终良善”,这是李宇春《年轻气盛》里的一句歌词。


恶是否为本能,笔者不知道。科学家的解释是,有些基因中会带有恶。可以肯定的是,善恶皆为人性,共存于人类当中。


感性和理性是会此消彼长的,林黛玉和薛宝钗就是两个极致的例子。同理,人类体内的善恶,也会此消彼长。


一款产品,在做决策时,很大程度上是基于理性。


这种理性决策,很多时候是无意为善,也无意为恶。但遗憾的是,那个非善非恶的中间地带不会一直存在,有些无意为善和无意为恶,最终会成为非善即恶,比如开屏页是否放广告这件小事(下文有详述)。


既然善恶会此消彼长,而且产品的有些理性决策会导致非善即恶,那么不可避免的,有时候,善恶会变成一道二选一的选择题。


接下来,我们就从理性的角度探讨下,为什么选择善意。



1 长期主义


最近几年,互联网从业者有个共识:创业是件九死一生的事儿。因为据数据统计,90% 的创业公司活不过三年。


这是一个值得深思的社会现象,背后的原因究竟是什么?直接原因,往往是资金断裂。深层原因,会有很多,比如产品不够好、方向不够准,等等。


那么,核心原因呢?笔者认为,和创始人的执念有关。


有两类执念可以避免此类悲剧。第一类是做出优秀产品;第二类是长期主义。



做出优秀产品这块,有很多例子,最典型之一是特斯拉。特斯拉曾面临多次危机(资金、产能等),但都挺过来了,这肯定和产品深受车主喜爱有关。


笔者也见过两个普通创业公司的例子。他们都有一颗做出好产品的心,都很重视 UI、交互、用户体验这些基础的东西,而且把 UI 做的比较优秀,交互和用户体验做的还不错。其中一家靠着用户的付费在平稳发展,另一家连产品带团队被大厂收购了。


长期主义这块,典型例子之一是巴菲特。巴菲特信仰并践行价值投资,价值投资依赖长期主义。最近几年,长期主义在国内也被越来越多的提及。


个人的理解,长期主义至少包含两个要点,分别是:积累、多赢。因为,没有积累就不会有成就,没有多赢成就就不会长久。



中国女排,世界冠军。排球界有个说法,叫三年成型,五年成才,八年成器。互联网行业,也大致如此。这是积累。


用户,员工,投资人,三方利益都兼顾好,才是多赢。


俗话说,顾客是上帝,大家都知道对用户好;投资人作为强势一方,利益也往往有保障;员工的利益是否有保障,往往取决于创始人,所以存在很大变数。


回到主题,长期主义和善意,有什么关系?


通常而言,多赢能否实现,关键在于员工的利益能否得到保障。


笔者在网上看过一个有意思的评论,说当下的年轻人,如果收入、成就感、高兴这三点有两点达不到,就会辞职。


所以,员工利益得到保障的标准,可以简单定义为“三中二“,即收入、成就感和愉悦这三点满足两点。



再来分析一下现状:相比员工,公司是强势一方;人们仍受最大程度剥削剩余价值、官僚思想等观念影响;恶性加班等风气存在;僧多粥少的就业行情。


在这样的大环境下,如果公司对员工没有爱和善意,员工的利益是很难得到保障的。


最后,总结一下:公司有善意,员工利益就有保障,就能实现多赢,从而有望实现长期主义。


2 美好生活


前段时间,因为给武汉捐款 5000 万、并且疫情期间蔬菜按成本价销售,一些网友被胖东来这个商超刷屏了。


胖东来来自河南许昌,一个三四线城市,也是笔者的家乡。目前仅在许昌和新乡有店。


在一些关于胖东来文章的评论区,很多网友在喊胖东来去自己的城市开店。


为什么有这么多呼声?简单分享几个例子。


顾客方面,胖东来有 6 类购物车,包含婴儿手推车、儿童购物车和老年人购物车。老年人购物车自带凳子,可供休息,同时还配有放大镜。


员工方面,有高薪、高福利和利润分红等。胖东来比较为业界称道的高福利有:每周二闭店,春节闭店 5 天,工龄满 1 年即有 30 天带薪年假,一天最多工作 7 个小时。


从网上的报道、评论以及公布于网上的企业文化来看,胖东来一方面主张工作和生活(爱情、家庭、休假等)的平衡,一方面在践行和传播幸福、快乐、尊重等很多积极的文化价值观。



看新闻的时候,笔者注意到,老板于东来经常会提到“美好”这个词儿。实际上,在笔者看来,胖东来本身就代表了一种美好生活,一种物质和精神双丰盛的美好生活。


对于这样的美好生活,用户和员工自然喜欢。可这对企业有什么好处?


胖东来曾经意欲退出新乡市场,新乡合作商家和市民纷纷请愿,政府也多次出面挽留,最终胖东来留下来了。可见,胖东来在新乡已经深入人心,顾客自然会大力支持它的发展。


胖东来有一句 slogon,能够很好的解释这一切,那就是:爱在胖东来。


同样,既提供体面的收入,又关注员工和用户的精神需求,给他们带去美好生活,当然需要更大更多的善意。


在当下中国,能提供高薪的互联网公司已经很多了,但是能在精神层面让员工感觉良好、感觉愉悦、感觉幸福和快乐的公司却为数不多。


对于所有企业而言,这又何尝不是一种机会?



02 交互设计里,有哪些善意?


现实中,像胖东来给顾客和员工提供的这种美好生活不常有。但是退一步讲,还是有很多产品对用户展现了很多微小善意,值得我们学习。


这种微小善意主要有三类,分别是:不打扰,护尊严,人为先



1 不打扰


我们生活在一个信息爆炸的时代,不被手机上的信息过度打扰,是一个刚需。有三类信息,如果把握不好度,就会对用户形成打扰。它们分别是:广告、推送、推荐



广告这块,主要有两类会形成打扰,分别是:时机不佳的广告,过长的广告。


这方面,微信是个榜样,值得学习。比如开屏页广告,就是时机不佳的广告,因为大家不想在这里看到广告,微信就没有放。朋友圈里也有较长的视频广告,微信的常见做法有两类,要么先展示一张图片,要么先是无声播放。是否看完整的视频广告,选择权在用户手里。


推送这块,常见的有手机系统的通知和 App 内的红点消息。


系统通知,目前也有被滥用的趋势。根据使用情况和感受,个人的建议是这类推送控制在 1-2 类。第 1 类是关于核心功能,比如微信推送新消息,搜狐新闻推送新闻;第 2 类可保留一定的弹性,核心原则是对用户有价值,比如偶尔的活动通知。


目前有两种情况会对用户形成打扰和困扰,第一种是过于频繁的活动通知;第二种是推送和核心功能相差甚远的信息,比如金融类产品推送新闻。


红点消息,有一类会对用户形成打扰,那就是来自官方的过于频繁的各类活动、促销等信息。


推荐这块,主要指 App 内的 Banner 和专题。目前对用户形成打扰的主要是一级频道的一些专题。


一种是过多,比如网易云音乐的首页,就有 9 个专题;一种是位置不佳,比如 Keep 的“探索”频道就包含了课程的推荐,但是在“运动”频道还有两个专题来推荐课程。


2 护尊严


护尊严,就是尽最大可能,维护用户的形象和尊严。


最近几年,常有产品花巨资撒红包给用户抢。产品的初衷自然是好的,而且看起来也是一件皆大欢喜的事情。但是这件事很难提升产品的美誉度,也就无法增加用户对它的喜爱和忠诚程度。


为什么会这样?


让用户抢自己撒的红包,这件事能维护用户的形象和尊严吗?非但不能,可能还会对此造成伤害。因为可能会显得用户爱占小便宜,也可能会使用户处于被施舍的一方。总之这种事对用户来说,并不酷。


一款产品,要想赢得用户更多的喜欢、尊敬乃至忠诚,就最好不做哪怕仅是微弱伤害用户形象和尊严的事情,同时多做一些相反的事情。


3 人为先


人为先,是当用户利益和企业利益发生尖锐矛盾时,去追求一种用户利益在先的双赢局面。


大家都知道,吸烟是有害健康的,但是烟草公司又是要赚钱的。泰国香烟那种既触目惊心又恶心吓人的包装,就尽他们最大的可能诠释了“吸烟有害健康”,是真正的用户为本,让人心生敬意。



泰国香烟的这种做法,值得一些极易让人上瘾的游戏厂商借鉴和学习。



03 交互设计:如何做到善意?


上一大段,是善意的三类表现。这一大段,再探讨下做到善意的一个原则。


以社区型内容型产品为例,这个原则就是:先服务后管理


这里的服务,是指以服务者的心态做好用户体验,并不局限于交互设计。这里的管理,指的是一些必要的管理,一般是用户的行为规范和用户违规时的处理,比如评论里骂脏话、发布侵权文章等。


所有用户都是需要被服务的,只有少数行为不当的用户才是需要被管理的,所以我们要先服务后管理,以免误伤了不需要被管理的用户。


服务本身就是一种善意,笔者把它分成了两个阶段,分别是:体验的初始阶段,体验的完整过程


初始阶段对应的是:初始服务;完整过程对应两类服务,分别是:家常服务,极致服务



1 初始服务


初始服务,是当用户刚开始用这款产品时,能给他们留下良好印象的服务。


如何做到?不出现任何轻微恶意和管理倾向即可,再提供一些便利和帮助则更好。


下面分享一个反面例子。


在个别城镇的卫生死角,有时会看到这样的标语,“此处禁止倒垃圾!违者罚款 200!“。结果那个地方往往有很多垃圾。


为什么会这样?


这个标语,有两层意思:第一,你很可能会在这里倒垃圾;第二,禁止你这么做,做了要罚钱。


也就是说,某种程度上,这个标语在用恶意揣度别人,同时也在很严的管理别人。


看到这个标语的人很可能会这样想:既然认为我会在这倒垃圾,那我索性就倒了;禁止我?凭什么?还罚我钱,吓唬谁呢,况且你有证据吗?


下面再分享一个很好的正面例子。


笔者有一个宜家的退货经历。把一个已经拆过的桌子打包送到了宜家,宜家没有检查里面的零配件(很多螺丝之类的),直接退了。这样宽松的退货条件,宜家可能会蒙受一定损失,比如小概率的零件丢失,但宜家还是把这种服务提供给了顾客。笔者当时的感受是宜家挺信任我们的,对宜家就多了几分好感。


2 家常服务


家常服务,是指一种稀松平常,但又让用户感到舒服自在的服务。


举个例子,你去好朋友家里玩,朋友给你倒了一杯水,并端出一盘削好切好的苹果,你们一边吃一边聊。你和朋友是平等的关系,他这种简单的招待并不会使你感动,但却使你有一种接近在自己家的那种舒服自在。


笔者在用微信公众号(后台)时会有这种感受。在星巴克和肯德基时也会有类似感受。


家常服务,如何实现?第一,要有良好的初始服务,这是基础;第二,要有周到且较高品质的交互设计,这是关键。


以微信公众号为例,和微信一样,它的交互设计也做到了周到和较高品质。下面看看微信公众号的初始服务。


面向大众的资讯平台大多都有一个发文规范,多是关于禁止的行为,通常都会用一个单独网页来展示,有 1-2 页纸那么多。


通常情况下,多数作者是不会违反发文规范的。对于这部分作者,当他们首次看到 1-2 页密密麻麻的发文规范时,可能会产生抵触心理,即便自己不会违规。就好像高中开学第一天,班主任二话没说,直接就立了 20 条班规,同学们会是什么心情。


微信公众号的做法就很巧妙,它把这些规范分割成了三部分。


第一部分是严禁的红线行为,以高度概括的一行文字呈现,所有人都能看到,但是得仔细留意才能注意到。这是规范性质。



第二部分和竞品一样,也是链接出来的一个单独网页。链接入口也和竞品一样,在关联性最强的发文页面右上角。不同的是,这一页展示的是规则,主要以问答的形式呈现,给人感觉是有帮助的信息。这是服务性质。



而竞品的这个页面,通常都是禁三禁四的规范,给人的感觉可能是紧张、压抑甚至抵触。


第三部分是次于红线的禁止行为,比如侵权、低俗内容等。这部分内容的管理办法被以公告的形式分散在公告列表里。而且公告列表里内容多样,还有很多一般的通知,所以这个公告列表也不会像竞品的那一页规范一样,给人紧张、压抑的感觉。性质上是中性。


另外,这部分的入口在后台首页右上角,和发文模块是分开的。所以不会违法规范的作者一般不会去公告列表里翻这些内容,也就看不到。




微信公众号就是这么巧妙的让多数作者看不到“班主任”的“20 条班规”,同时还让他们看到了“班主任”的“常见问题回答”。


这就是微信公众号在发文规范方面的初始服务。另外还有一个加分的细节,就是检测疑似错别字的功能,很贴心,虽然目前还不是很准。


3 极致服务


极致服务,是指让用户感动的服务,比如海底捞和胖东来的服务。


这种服务,一般是由许多细节积累而来,是一种做加法的服务,而且背后往往依赖人力。


好的交互设计,一般都是在做减法,而且纯粹是界面、机器在和用户打交道。所以极致服务难以复制到交互设计上。


不过,一款互联网产品,除了交互设计,还有其它方面的内容。


B 站就是一个例子,它以不走寻常路的方式,在两个方面做到了较为极致的服务。那就是:视频无广告,比较积极、欢乐的弹幕氛围。



结语


以用户利益为先,不打扰用户,维护用户的尊严,这是交互设计里的三种善意,值得我们学习。


先服务后管理。服务作为一种善意,也能够引来用户的善意,最终形成良性循环。


杜绝任何轻微恶意和管理倾向,再提供一些便利和帮助,便能做到良好的初始服务;


在初始服务的基础上,提供周到、高品质的交互设计,就能做到良好的家常服务;


交互设计难以做到极致服务,但是其它方面有机会。


最后,用刘备的一句话来结束本文。


勿以善小而不为。


原文地址:站酷    作者:SnowDesign


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

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

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

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

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



中后台没啥可设计的?试试这样拓展设计价值

丽洁

B类领域设计师必然会面对譬如CRM、ERP等诸多类型的中后台类产品。大多就是做做表单设计,年底考核时想争取涨薪证明自己,但老板要问的“设计价值”是个啥?在这些业务主导下的中后台产品又该如何定位设计机会及价值?



本文就以比较典型且系统化的中后台企采SaaS服务产品为例,来聊聊在这个领域中,是如何进行机会的挖掘,探索并付诸实践的。

01. 业务先赢 完成体验助力是基础

-

在过往数年里,阿里Ant Design,Alibaba Fusion为代表的中台团队进行了大量基础组件设计体系的积累,也沉淀了一些可直接复用的工程化解决方案。如果说有就行,的确产品经理和技术人员自己拼拼凑凑,就可以极低成本的获得一个较为套路化,但无需设计师介入费脑的中后台产品。



但作为用户工作环境中和风险、钱打交道为主,被强制使用的工具载体,在全球数字化经济转型推进趋势下,越来越多的中后台B端产品需要具备更高效,更细腻的体验,以改善千千万万使用者的数字化工作方式.

初步接触业务,我们即发现沿用基础通用设计组件库,“拼组件”的方式没办法满足垂直业务模块比如供应链询价、采购、财务核账履约领域高强度信息承载密度下精细化的用户体验诉求。

因此,为了增强SaaS产品及服务的不可替代性,提升售卖价值亮点以及产品续约率,我重点对业务场景下特有的行为组件、模板及方案链路进行抽象归纳改良设计。



这样做最直观的好处就是不浪费时间重复造轮子,站在巨人的肩膀上来完善组件库,提升设计效能,1位设计师就能通过业务场景组件,高效承接密集的产品需求。 

另一方面,收拢特定场景下核心差异点,只聚焦最小范围来打磨组件及流程,可敏捷实现差异化设计的最佳实践。 

精细化的场景多欠缺合适的线上化解法,作为你深度挖掘,充分思考下的设计方案,相对更容易获取某些领域的设计奖项甚至专利,证明你有在设计上做出了壁垒,创造了价值。 

除此之外,由于该敏捷的体验设计过程是以抽象核心差异为契机,对应领域的设计师亦能更高效的构建出业务特定场景下的独有的“Design System",在后续过程中放大设计价值。

02. 中后台产品 效率是关键

-

多数中后台产品(尤其是企业级应用系统)会出现 "功能、页面多"、“流程长”的臃肿现象。 

受打工人身份禁锢下的实操用户大多也是迫于工作合规要求,不得不从原本习惯的线下作业流程,转变为在中后台线上了解信息,以及多角色协同决策处理事务。甚至可以说有了中后台的存在,反而增加了他们日常工作操作成本,故无论是新用户还是老用户,都难有意愿于中后台完成事务处理的体验闭环。



为提高采购流程的效率,让中后台线上作业更轻松,更提升企业收益/价值。

我们基于用户行为能力动机,从“替ta完成”,“催ta处理”,“助ta做快”这三个维度,通过协同引导提效的方式来促进线上事务处理完成并流转。简单说,机器能做的就自动处理推进,不能的则及时触达引导,力求做到中后台事务处理过程去人工化,以及主动精准有效的引导。



设计师在这个环节内除了结合新技术,和业务团队共同打造一些智能化服务替代原本高重复性操作以形成新体验外,还可以深刻研究并理解人性本质,在相关待办或服务内容触达上精细化设计。

01、让待办任务更有效的被触达并解决

与业务一起分层提醒内容,及对应内容的可读性、可视化设计;

02、基于用户行为动机下的推送规则设计

不打扰用户工作前提下,及时引导助其理解更促使用户启用自动化提效服务,譬如处理受阻失败、或用户刚完成一项任务时,引导其配置自动处理规则,提高整体效率;

03、打造激励机制和场景

定期进行实操人员处理任务完成度/时长的同团队数据分析比较及外显方案,结合数据可视化呈现手段,在行业内外部团队相互制约下,促使用户自我驱动警示,保障事务推进流转。



最终目标即是推进业务中后台的用户数字化体验从最早的帮助Q&A被动唤起自助化服务,变为主动承接服务告知可处理,半自动化分发,及自动处理,甚至社会智能化数据自驱的演变进阶。



总体来说,在中后台产品给用户提供更简单、更集成的方案,大量消减操作步骤,突出真正重要的信息就是设计最大的价值。

03. 构建数字化管控的新体验

-

除一线实操用户外,我们还要关注管理者,有时更是一号位的老板这一类关键角色,他们在线上各个子环节都有较为强烈的可控,可管理的诉求在,以证明其付钱购买的中后台“在线数字化”工作方式真的能降本增效,或作为企业内部管理优化的量化指标依据。

在企业按年续费产品服务的商业化增长目标下,让管理者能真切意识并实际体会到数字化工作方式的价值就变得尤为重要。因此,设计的关键是增强管理决策者对数字化平台服务的感知度以及满意度。

01、智能化决策辅助的设计

和一线操作员侧的提效类似,只不过对于管理者,我们需更多着重于“替ta完成”和“助ta做快”这两部分去打造智能化服务的管控新体验。

为确保机器智能化处理逻辑更接近人的自然思维,设计师在这个环节中可主动补位,制定相应类型下数据的机器思维处理分析规则以及内容维度。



在过往采购SaaS中后台业务设计中,设计亦抽象了事务型进展以及综合决策分析决策两类数据模块新场景,通过直观结果呈现以及判断要点佐证,在管理行为及流程上促进管控手段的数字化升级,帮助管理者高效获取/查看/分析数据要点。



02、多维度的数据关怀提醒

有了对应的分析数据结果和要点,我们还要将数字时代下的管理数据,团队事务整体进度、风险预判结论有效触达管理角色,更放大其体感。



给老板用的数据大屏/中后台数据看板,及数字孪生可视化即是一种可以充分发挥设计表现力并擅长的领域,即便你所在的中后台团队没有相应技术资源,设计依旧可以通过“电子邮件” “长图”等通用载体,以轻量化的方式来完成价值传递。 

在这个环节,设计的价值就是让管理者读懂数据,受惠数据驱动的决策方式。

03、形成体验质量监测评估体系

以设计体验度量量化为起点,深度关联管理决策者关心的企业运营数据“健康度”,及商业化营收续签强相关的“续签意向”,来评定并监测用户对SaaS产品服务的整体接受度及体验满意度。



我们基于HEART、PULSE、UES、五度模型等已有模型,选择业务目标和场景核心指标来调整衡量维度并推导演变,从业务、产品、技术、服务等多维视角构成适合企业采购SaaS产品的体验度量模型,推动运营/算法/后端共建机制及产品将体验监测工具化,以形成业务中多角色都能有效应用起来的体验质量评估体系。



最终,管理决策者较过往能更实时的掌握一线人员工作使用中后台的健康度情况,有效数字化管理。

对我们的合作伙伴业务运营团队而言,全新的客户续签意向管理预测方式,可提早发现风险,更能联合内部预警及平台触达运营服务有效规避客户流失。

而对于我们自身设计职能,通过这种度量维度方法和工具,不但能定期便携的获取核心指标变化作为设计价值量化凭证,体验监测所获得的相关结论还可以指出中后台产品当前业务阶段问题方向,结合设计目标锁定问题范围,定位后续设计着力点。

中后台领域心得技巧

-

上述即是企采SaaS中后台产品中的设计实践。我们也总结了几个定位设计机会及价值的心得或方法。



01、学徒式调研实操,同理映射用户 

具有出众同理心的设计洞察以及解法是体验价值的基础。(常说要站在用户视角做设计,但不像消费端,设计师多不是中后台实际用户,也很难换位思考理解用户工作行为特征和痛点。) 

因此,中后台领域的设计角色迫切的需要与更多的实际用户去交谈、调研。 

为提升该过程的质量及效率,我们尝试在用户定性调研访谈之前,多通过学徒式调研的方法,来熟悉其工作行为特征,定性的挖掘用户痛点。 

即是以单任务为维度,先请教我们的实际用户他们是如何做的,并依此自己上手完整实操,直到确保能按时保质完成目标任务。 

设身处地还原目标用户情景,理解各方案的优劣势,及如何在他人身上起作用的目的,在该环节之后再去和用户交谈,即可更高效的获得真实的用户洞察以及理想方案假设。



02、用设计擅长的可视化手段,呈现体验痛点

天马行空的设计创新方案总是在决策时受各种技术、资源为由被Pass,推进创新智能的体验方案在中后台领域是个尤为费事的过程。 

面对这一难题,我们可以通过体现设计思维的一些工具模型调整应用,来增强表现说服力,进而建立信任以及方案推进的成功率。



譬如设计侧常用的决策工具用户体验地图,在B类中后台领域中可以将原本情绪体验波浪线替换为效率数据来调整应用,梳理并呈现产品的全流程效率数据曲线,同理“峰终定律”来快速界定并洞察全链路中短板模块,以及低效待设计优化关键点。

借此数据可视化手段,呈现出来体验关键问题严重性,亦可让项目组各职能伙伴共情,获得设计策略及方案的认同。

03、和业务方向紧密结合,跟业务匹配的设计创新

设计创新提案难免会出现两类问题:

首先是创新提案推不下去,甚至被说是设计自high。

这多是因为没有想着结合业务方向,光想着创新或新颖的方式去设计方案。

我们擅长也希望通过酷炫的动效,创新的交互,智能化体验的畅想及解法来表现设计手段的精深。固然,这些事情的探索尝试或练习都有其意义价值,但作为商业设计师不能光纸上谈兵,只有结合业务顺势而为,我们耗时做的方案才有可能提案成功,更推进技术还原落地,从而带给用户更好的用户体验。

再者就是方案有结合业务,也被认可有价值了,但优先级往后走?

这说明设计结合的点不大对,并非业务最关心的。

中后台产品,多和前台核心战略有着强逻辑关系,或有广泛的、潜在的商业化潜力。而了解业务核心关注点,最简单快速的方法就是找到对的人——业务一号位,并快速抄作业。

勇敢点的可直接约业务一号位聊聊,含蓄的设计师亦可尝试借美化一号位汇报PPT等手段,巧妙的获取并理解业务核心目标,布局以及关键利益,在此基础上再从上至下梳理了解各子业务线规划,设计就能更好的取舍。

原文地址:站酷    作者:阿里巴巴CBU设计


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


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

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

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




如何合理使用大标题设计风格?

丽洁

一、什么是大标题设计风格?


大标题导航栏是从iOS11发布后,开始在中国的UI设计师中急速流行的一种设计风格。其实这种风格最早在2016年就在硅谷盛行了起来,源自一位叫Michael Horton的设计师发表的一篇《Complexion Reduction: A New Trend In Mobile Design 》的文章,这篇文章提到的Complexion Reduction这种设计风格(下文简称CR)就是大标题导航栏的起源,即大、黑、粗的标题。

 

CR这种风格有四个明显的特征:

 

1.删除多余的颜色;

2.又大、又黑、又粗的标题;

3.简单、可识别的图标,也不要使用颜色(常用黑灰色);

4.留白留白留白,更多的留白。

 

下图是比较典型的使用CR风格的APP(分别是爱彼迎、ENJOY、火球买手、MOO音乐),大家可以结合CR风格的4大特征感受一下:

 不知道小伙伴们有没有发现,这几个APP的功能会比较单一或是某一垂直领域,且视觉上都给人一种高品质,超极简的感觉,人们会更多的关注界面中内容本身,对内容的要求也会更高。



二、中西方的差异


那么问题来了,为什么这种CR风格鲜少出现在中国特有的淘宝类电商APP中呢?

 

国外的APP大都是小而精致的,一般一个APP只能做一件事,功能比较单一,而国内的淘宝类电商APP,携程类的综合旅游APP所包含的业务与功能都非常广泛,在狭小的手机屏幕上展示更多的商品就显得尤其重要,CR风格提倡的大标题大留白无疑不是在挑战老板的底线。

 

实际上即便使用大标题风格也不要盲目采用iOS11官方的大标题导航,其原因在于中英文的差异。

 

英文大标题一个单词有大小写的变化,富有一定的层级变化,而中文如果使用iOS11给定的68px(二倍图下)的字号,那真是大到闪瞎我的眼。中文一个词语每一个字都是差不多的大小,没有层级上的变化,太大的字体在整个界面中看起来会很奇怪,如下图:



三、合理使用大标题


虽说iOS11那么大的标题不适合大部分的APP,但并不是说大标题风格就不适合大部分APP了,实际上目前大多数的APP依然使用了大标题的风格,不过进行了一定的改良。

以下参考尺寸均是二倍图下的尺寸


1.大标题导航栏


大标题导航栏大致有两种样式,一种是延用iOS11的大标题导航栏,一种是稍微改良使用的大标题导航栏。


1)iOS11大大大标题导航栏


iOS11的大标题导航栏标题字号约为68px、栏高192px(二倍图),大标题对齐导航栏左边,页面滑动时转换为常规的导航栏。

 

国内使用这种大大大标题的APP比较少,标题文字实在太大,若只作为导航标题占位,会极其浪费屏幕空间。

 

使用这种大大大标题时,导航标题一般都有一定的意义,如下图:

饿了么的订单页详情页使用了这种大大大标题,但是标题赋予了订单状态的意义,比起单纯的“订单详情”,这样有一定意义的标题文字则可考虑使用iOS11的大大大标题。


2)改良大标题导航栏

某些APP在使用大标题导航栏时,在iOS11的大标题导航栏上进行了一定的改良,最常见的就是一定程度缩小了标题的字号,如下图:

这三个APP的标题字号都没有到68px,常用40px~48px的字号,陌陌与天猫是固定在顶部导航栏的,而Kepp会随页面上滑变为常规标题导航。

 

一般这种固定的较大标题都会隐去导航栏的分割线,显得导航栏更高,更有呼吸感。像是天猫的大标题导航栏使用的色块,与下方模块又比较近,就显得很拥挤。



2.Tab栏大标题

Tab栏的文字标题切换样式最常见的就是颜色变化,加小短线等,随着大标题风格的流行,Tab栏的切换样式也出现了大标题的选中样式,选中字号通常采用40~48px(甚至更大,如虾米音乐的72px),而非选中标题通常则是采用的28~32px,如下图:

使用这样的Tab栏,能够迅速帮助用户辨识自己所在的位置,就差指着自己说“这儿”了。需要注意的是一个屏幕内尽量只在一级Tab使用大标题切换,与二级Tab做出区分。



3.模块化大标题

大标题的风格除了应用在界面顶部导航,在模块化标题上应用的也非常多,有些APP即便顶部导航不使用大标题,却会在模块化标题上使用较大的字号,如下图:

这种模块化大标题常配合留白分割的界面使用(这也符合了CR风格的特征),模块化大标题在留白分割的界面上能够更好地帮助上下模块做到层级区分的作用。



4.文字变大变粗变黑

抛开大标题不谈,不知大家有没有发现,现在越来越多的APP的内容标题、正文内容的字体也在逐渐变得更黑更粗,甚至更大,毕竟我们的手机变得越来越大了。如下图:

即便是拥有复杂业务的淘宝与飞猪,在某些内容标题上也变得更粗更黑,一眼看过去用户能更容易找到自己想看的内容。


四、划重点


· 大标题设计风格源自Complexion Reduction这种设计风格,CR这种风格的特征就在于颜色少、标题大黑粗、图标通用简单、大留白;


· 由于中英文字体的差异,中文使用超大字号没有英文富有变化;


· 合理使用大标题,做一些适当的改良。常见用于导航栏、一级Tab选中标题、模块化大标题以及内容标题。

原文地址:站酷    作者:人类君


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

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

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

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

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



用户心理定律及优秀案例分析

丽洁

将普遍存在的人性用户心理规律运用于设计,增加设计的温度。

近来对用户心理比较感兴趣,去看相关设计资料的时候发现相关内容重复性较高,多方搜集资料结合自己的一些分析总结出一篇补充。

定律是钥匙,在遇到让我们上瘾,持续付出或获得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能为我们的后续的设计吸收。










undefined

undefined

undefined

undefined

undefined



原文地址:站酷    作者:唐小葱


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

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

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

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

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


如何选择确定B端后台设计风格及细节优化

丽洁


1.B端后台分类:

根据服务对象划分:

一类支持有C端前台,支持前台产品管理各种资源。第二类服务企业,提高企业工作效率和营收。


根据后台功能:

1.监控运营:时效性强,旨在实时反馈异常情况,快速判断下达命令,回复信息、多用于数据控制中心。

2.数据分析:数据结果的对比和分析趋势,时效性要求并不高,了解整体和各部分数据水平,助力决策。

3.记录管理类:主要用于人员、设备、资产等增删改查,文本信息容量大,频繁便捷的操作。

4.系统配置:权限配置、设备功能配置,操作为主。


2.后台深浅两大风格分类:

浅色:

适合文本信息多密集的表单列表类后台,浅色更符合人眼白底黑字的阅读习惯,浏览速度更快,信息获取效率更高。


深色:

图像信息密集的后台适合图片、数据可视化图表等;深色对彩色的图像信息衬托更强。信息获取速度较慢,长时间可能视疲劳。




3.作者常向产品方提供的风格参考

较常见


1.经典商务风(导航深、内容浅)——专业、高效、成熟、可信赖(对照深色西装人物形象)

      优点:市面最常见的风格,普世性高,大多数用户可快速接受,层次分明

      缺点:视觉缺乏记忆点


 2.轻量科技感(导航浅、内容浅)——简洁、明快、轻量、年轻(对照白衬衫打领带男性)

      优点:视觉清新明快更年轻化更轻量,对其他文本及图形展示包容性高,就像A4白纸一样容器存在感弱

      缺点:纯白色导航+页面层次略暧昧。


 3.蓝色科技风(导航中、内容中)

      适合:适合科技属性强的产品界面,图像图形展示

      缺点:对其他色彩信息有干扰,持续性长时间观看易视觉疲劳


 4.暗黑科技风(导航深、内容深)

      优点:对色彩表现力强

      缺点:密集文本信息获取速度会下降,持续性长时间观看易视觉疲劳




4.精准选择风格时可以进一步的考虑:

1.整体行业风格

比如美妆和科技行业的整体设计基调就不太相同。


2.产品想要传达的气质:

理性可靠 or  简洁轻松轻量 or 关怀普世 or 酷炫吸睛….这个可以和相关产品经理、销售共同商讨


3.目标用户的群体特点及喜好。

根据目标用户的性别、年龄层、受教育水平,审美水平考量(可能包含多种角色,选取1.2个核心角色为参考)带入目标用户工作场景及爱用物常用物品味,去判断基调。

如主要用户群:40+男性用户,本科以上受教育水平,使用windows电脑进行专业管理操作,审美倾向明确内敛。

如主要用户群:20-40岁,男女比例约6:4;大专;操作水平参差


4.使用场景及高频的操作。

例如:最常使用数据分析管理,需要快速阅览多条数据,对数据进行比对,更适合浅色风格展示表单数据。


5.判断独立的平台是否为独立开发

独立开发的,可以采取更独特设计。若平台很大需要不同外包公司的合作属于整合类平台则更注重设计的包容性。



5.如何让后台设计更具特色:

1.重点色的使用

“731配色比例”70%的面板色,30%的导航面板色,10%的强调色。(这里的用色比例可以根据内容具体再去调节只是大概比例)品牌色或重点色:强调行动关键点、重要信息高亮、图形化说明等。强调色用就要用的像蛋糕上的樱桃。起到画龙点睛作用即可。

2.图标的优化

后台高频出现的图标,值得我们花时间去统一设计打磨,调整圆角粗细疏密,符合整体界面气质。从图标库里拖出的图标很多在线条粗细上是不统一的,好的设计在细节处也要动人。

B端工具类图标识别性第一,美观性第二。B端导航图标更多是在基础造型上打磨,不需要加花里胡哨的渐变、投影,导航图标一般在24px-16px大小,太复杂反而看不清。在区分状态的时候可以考虑加点品牌色


3.空状态小插画

空状态插画是B端设计师少有能发挥自己绘画天赋小巧思的地方。

图形化状态语言,辅助用户理解内容。可以将产品机械苍白的文案设计表现的更加具有温度,具有引导性。让乏味的工作出现一些共情小彩蛋,有趣的插图动画可以缓解等待的焦虑。



4.登录注册页

纯色背景卡片式:简单大方更聚焦登录操作

插画背景:场景化展示产品的功能及亮点,让用户更有心理预期

几何图形背景:最后和品牌图形相关,加深用户对产品的品牌印象。

照片背景:相关场景或产品类型,具象图片信息更直观


5.圆角的大小

不同大小的圆角传达产品不同的气质,大圆角亲和、小圆角精致、中等圆角大众中庸。



6.优化信息层级

优化信息层级,区分信息主次可以使阅读更快,操作更快,界面更有节奏感。

这时候你就是那个考前画重点的老师

判断一个页面里最重要的是那些信息或操作,强化它!并弱化辅助信息;

判断一个模块里那些是重要信息,强化它!



6.新人需要避免的雷点:


1.追求炫酷的视觉效果舍弃操作效率。比如追波风满屏花里胡哨的卡片及面板,满屏大投影及高饱和色彩。对于B端界面来说信息噪音太多,反而干扰信息获取效率。


2.反常规用户习惯的操作。尊重用户习惯,不要为了个性化去尝试改变,不要妄图改变用户的操作和认知的惯性。惯性思维大于设计思维,曾经遇到过产品因为右手操作所以要把导航放在右边的离谱例子。


3.数量多,动静大的夸张的动效。B端与C端不同的地方在于希望操作者沉浸式工作,遵循非必要不打扰。之前看过一个反面例子后台,在每一步操作后都出现大的场景动效鼓励完成,如果作为一个长期使用的工作者,我会觉得每次完成任务都需要等待动画完成可能只需要2-3s也很浪费我的时间。


4.新人建议多看Antdesign和Element等成熟的组件,创新类组件样式,最好和和开发商量是否能够实现。


5.在确定主要风格及2-5张主要页面后,就应该着手基础规范(色彩字体等,不然后面越做越乱)。


6.一段时间一个审美,同一界面中的元素风格不统一。


7.避免大面积使用高饱和高明度的色彩,及暧昧含糊的临近色彩。长时间使用眼睛会累,产生不耐烦焦躁的负面情绪。



最后推荐几个官方组件库:




原文地址:站酷    作者:唐小葱 

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

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

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

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

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


日历

链接

个人资料

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

存档