首页

这些不同类型的菜单图标和用法,我做了个总结分析!

seo达人


1.汉堡菜单

图片

关键词:横条、多个菜单选项

这个图标的样式简洁易懂,通常位于网页和App的上下角,用来告知用户这个按钮之外还有更多内容可以探索。

当产品有多个菜单选项时,考虑使用汉堡图标来显示,但尽可能避免在桌面视图中使用。

 

2.垂直三点式菜单

图片

关键词:垂直、内嵌菜单

通常位于屏幕或窗口的右上角或顶部,是用于打开带有附加选项的图标,打开的内容往往是一个较小的内嵌菜单而不是整个全新的页面。

 

3.水平三点式菜单

图片

关键词:水平、内嵌菜单、web

水平三点式菜单同样常位于屏幕或窗口的右上角,用于打开菜单或显示相关项的操作。

因为图标样式是水平的,所以更容易在web上或者在表格等水平方向中使用。

 

4.九宫格菜单 

图片

关键词:子分类、子功能

九宫格菜单通常用于打开同一产品中包含不同子产品或子功能,可以在它们之间快速切换,此图标常位于产品主页的右上角。

 

5.过滤式菜单

图片

关键词:过滤、排序

过滤式菜单由三行不同长度的线段水平叠放而成,是最广泛使用的过滤符号。可以将过滤式菜单与“排序方式”选项结合使用,或者与全局过滤器结合使用。

 

6.汉堡菜单变体

图片

关键词:样式特殊、时尚感更强

作为汉堡图标的替代品,与显示列表菜单的目的相同吗,但是这些样式我们平常见的可能会比较少,更常用在充满现代感、时尚感和艺术感的网站上。

图片

 

最后

不同的样式可能代表着截然不同的设计目的,常思考这些小而精的细节,是保证产品体验提升的关键。

 

参考:uxplanet.org/choose-correct-menu-icon-for-your-navigation-7ffc22df80ac

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》这些不同类型的菜单图标和用法,我做了个总结分析!

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

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

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

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



天呐,国外大佬总结的这20条B端图表设计原则,简直太实用了!

seo达人


图片

 

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

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

图片

 

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

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

图片

 

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

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

图片

 

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

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

图片

 

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

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

图片

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

 

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

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

图片

 

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

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

图片

 

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

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

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

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

图片

 

9. 在图表上直接标注

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

图片

 

10. 不要在切片上贴数据

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

图片

 

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

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

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

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

图片

 

12. 避免随机排列

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

图片

 

13. 窄的饼图是难阅读的

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

图片

 

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

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

1)3D元素,明暗面

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

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

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

图片

 

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

颜色是有效的数据可视化的组成部分,在设计时考虑以下3种颜色类型:

一个定性调色板最适合显示分类变量。为确保易用性,所分配的颜色应该是不同的。

连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合,可以创建一个连续的颜色集。

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

图片

看看一个方便的工具- [ColorBrewer],它可以帮助你生成各种调色板。

 

16. 设计的可访问性

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

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

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

图片

 

17. 关注易读性

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

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

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

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

4)不要旋转文字

图片

 

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

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

图片

 

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

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

图片

 

20. 做成动态图表

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

图片

 

本文翻译已获得作者的正式授权(授权截图如下)

图片

 

原文地址:medium

作者:Taras Bakusevych

译文地址:彩云译设计(公众号)

译者:彩云Sky


转载请注明:学UI网》天呐,国外大佬总结的这20条B端图表设计原则,简直太实用了!

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

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

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

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



苹果Google都在用的设计趋势,简直太绚丽了!

seo达人

图片

 

什么是色彩叠加?

图片

色彩叠加这种风格我们经常可以在很多大厂设计中看到。从它的名字我们就知道这是一种通过颜色混合的一种表现手法。色彩叠加在色彩构成学上叫色料混合, 也叫第二混合。两种或者多种颜色混合后所产生的新颜色,混合的色彩不但色相发生变化,明度和纯度都会产生变化。它是多个颜色通过不同模式进行混合,可以得到不同的颜色,通过色彩模式叠加的运用,让它的细节层次更丰富,色彩的饱和度也高。下面我来解刨一下它的特点,你也可以通过这些特点,轻松掌握这个设计技法哦!

 

 色彩叠加特点一:邻近/互补色搭配 

图片

在色相环上采用邻近色搭配,颜色多以明亮的高饱和度为主,使得页面更具时尚活泼感。

图片

邻近色是色环相邻的两种颜色,色相在60度以内,这样的颜色搭配色彩过度比较平和也会显得页面有层次。互补色是色环相对立的颜色,色相相距180度,这样的颜色搭配对比会非常强烈,视觉效果会鲜明。
 

邻近/互补色在网页的运用

图片

在视觉表现上运用互补色对比,搭配柔和的渐变过渡,给人一种年轻有活力的视觉感受。
 

邻近色在APP中的运用

图片

明亮的邻近色搭配作为页面的背景、卡片背景设计,页面年轻活泼,通过色彩的叠加,有空间感。

 

色彩叠加特点二:混合的质感 

图片

搭配混合模式的运用,营造一种空间感,给页面形成不一样的质感,通过明亮、色相形成一种空间感、层次感、通透,形成不一样的感觉。

 

混合质感图标中的运用

图片

邻近色色彩搭配作为背景,搭配简单的图形和色彩混合和不透明度运用,整个图形给人一种多彩、通透的视觉感受。

 

色彩叠加特点三:简单的几何图形 

图片通过简单的几何图形,主要是圆形、正方形、三角形等;加上混合模式的质感,给人一种高级感。加上透明度、叠加的光影,简单的几何图形背景呈现出空间感。图片上通过运用一个单色渐变,搭配方形的重复色彩叠加,给我的视觉感受是有层次的、立体的空间感。

图片

如图所示,饱和度高的背景搭配几何图形的运用,再运用颜色不透明的渐变,加上形状的重复和变化,使得这个设计给人通透、高级的视觉感受。
 

几何图形在海报中的运用

图片

很多变化丰富的设计都是通过简单的几何图形处理的,简单的几何图形也可以作为设计的抓手,在暗色背景上,通过几何图形的放大,搭配时尚的混合渐变,这样的效果很有科技感、洋气。图片
明亮的色彩搭配块面感的几何图形,这样的设计手法是不是很简单。

 

色彩叠加在APP上的运用 

图片

这样的几何图形我们在设计网站上经常可以看到,通过重复几何图形的组合加上混合模式的叠加,在设计上别具一格。同时让我们的设计多一种表现手法也增加我们的行业竞争力。

图片

通过邻近色/互补色搭配,运用几何图形作为背景装饰,这样的配色与布局会让设计很出彩,并且活泼舒适平和。这样的设计对色彩的搭配要求较高,我们可以通过配色网站进行多种组合搭配练习。图片
示例是菜鸟的首页,在 banner 入口它运用了色彩叠加的设计手法,同时金刚区的图标也是运用了色彩叠加的样式,整体给人一种年轻、时尚的感受。图片色彩叠加还可以运用在引导页、闪屏页面。通过叠加、柔和的过渡,整体呈现的视觉效果还是很时尚、符合主流的设计趋势。

 

色彩叠加在icon上的运用 

图片

明亮的颜色搭配混合模式和不透明度,出现出另外一种效果。

图片

图片

色彩叠加运用在icon上居多,饱和度高的色彩加上不透明度的叠加,整体的视觉效果都偏年轻、时尚,如果你的产品是面向年轻的用户,这样的设计手法你可以考虑运用上哦!图片
这个 app 中,金刚区位置上采用了色彩叠加的视觉手法,通过简单的几何图形,搭配混合模式,使整个页面具有全新的视觉感受,传递的是一种年轻时尚感。

 

色彩叠加在品牌上的运用 

图片

Apple 的今年官方宣传采用简单的正方形搭配明亮的色彩,加上不透明度、混合模式的运用,达到不一样的视觉效果。图片google 家的品牌升级,我们也看到了最新的趋势,运用 google 经典的颜色,搭配混合模式的渐变,同时具有品牌识别性。

 

色彩叠加-设计小教程 

图片

1.选择深色的颜色(#0A00BC),画一个圆角,填充蓝色渐变背景。

图片

2.画一个圆,填充红色的渐变,模式选择提亮的效果,剪贴蒙板在圆角背景上。

图片

图片

3.画第二个大圆,填充红色的渐变,模式选择提亮,透明度调到70%,剪贴蒙板在圆角背景上。

图片

4.画第三个圆,填充红色-黄色的渐变,模式选择正常,透明度调到85%,剪贴蒙板在圆角背景上

图片

5.画第四个圆,填充蓝色的渐变,模式选择提亮,透明度调到90%(可以自己试着调整),剪贴蒙板在圆角背景上。图片6.我们看到示例图交叉处是黄色渐变,把第三个和四个圆进行复制,选择交集,生成一个交叉的图形,把这个交叉的图形改为黄色渐变,模式改为加暗。图片

7.最后一步,右下角的高亮,通过蓝色径向渐变,调整到我们满意的效果即可,模式选择变亮,透明度90%。

图片

8.加上文字效果,这个图标就完成了,是不是很简单,通过不同模式的叠加,出现不同的效果,你也快点试一下吧!图片
 

最后 

图片

色彩叠加这种设计手法经常出现在海报/icon。包括 apple 在品牌宣传上也运用了这种视觉手法,重复运用简单的几何图形,加上混合模式的叠加,构成页面色彩空间感、通透;视觉感受上也有冲击力。我们做设计的也知道往往具有高级感的设计就是通过简单的几何图形加上色彩的混合渐变,也会让我们的设计具有层次感、简约。

 

原文地址:我们的设计日记(公众号)

作者:sky

转载请注明:学UI网》苹果Google都在用的设计趋势,简直太绚丽了!

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

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

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

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


B 类产品设计细节:文本缩略

seo达人


缩略方式

末端截断

  • 内容超过列宽时超出的用‘…’省略;
  • 标签内文案超出由‘…’省略。
  • 长文本截断的通用模式。

 

中间截断

  • 设置开头、末端保留的字符数,在末端保留字符前显示 ‘…’;
  • 开头保留字符数根据列宽以「显示尽量多的字符」的原则来确定(极端情况为开头不保留字符,即为「开头截断」;若空间十分有限,则尽量多地保留末端字符)。
  • 中间截断在文本的开头相同、末尾字符对区别字段起到关键作用时使用。

 

场景举例 1:实例名

包括任务名、文件名、表名、系统名等等。

典型案例:完整字段如下:

company_sales_record_20150116

company_sales_record_20150117

缩略结果:

 

场景举例 2:系列名称

开头统一的系列长名称,通过后半部分来区分的字段。

典型案例:阿里集团的 BU 完整名称如下:

口碑-本地生活事业部-北方大区-北方运营

口碑-本地生活事业部-七星大区-东南运营

缩略结果:

 

设计要点

  • 重要数字、时间不建议缩略。
  • 名称列缩略可结合表头的拖拉控制显示与缩略,内容完全显示时‘…’消失。
  • 单行文本省略使用 tooltip,多行文本省略使用展开与收起。

  • 描述‘…’支持 hover,标签整个支持 hover。
  • 标签数量多时建议通过折行全部展示,不建议通过‘…’隐藏后面的标签。

  • tooltip 不承载复杂文本和操作。
  • 根据使用场景为字段设置合理的字数上限和展示空间,避免隐藏过多的内容。
  • tooltip 的尺寸不应过大,建议最大尺寸不超过长 320px、宽 160px。

 

原文地址:Ant_Design(站酷)

作者: 林叶

转载请注明:学UI网》B 类产品设计细节:文本缩略

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

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

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

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


3C Design-618项目复盘总结家电篇

seo达人



PART 1 业务诉求-焕新你的生活

用家电创造生活价值,把对的家电与消费者的核心需求联系在一起。针对于我们全新的品牌主张与不断年轻化的核心购买用户,在整个画面的视觉层面上表达出我们的设计语言:生活焕新,家庭,时尚有态度。

 

PART 2 项目目标

本次618项目在营销层面上,希望借助618购物狂欢这一节点,挖掘各圈层用户对家电618的期待,激活焕新需求,激发用户兴趣,刺激下单的目的。

在设计层面上,首先实现营销方向的焕新、高端及年轻化。在营销方面侧重多元化创新营销助力焕新生活和跨界营销合作线。其次在集团模板的基础上做贴合家电品类的差异化设计,第三通过场景化影响用户心智,做用户看得懂的设计。

图片

 

PART 3 视觉概念

消费者人群-Z世代

Z世代的审美从小受到信息浪潮的洗礼,“颜值即正义”他们更加追求个人幸福感,拥有鲜明的个性,勇于表达自己的观点,从这些性格特征映射到消费特征,所以他们更加喜欢有文化、有故事、有性格的品牌,非常愿意为品牌买单、为兴趣买单,追求及时行乐;个性化、多元化成为他们的主要人设标签;

图片

 

概念脑暴

为了进一步提升家电品牌焕新理念在Z世代中的好感度与传播度,根据不同的家电用户群体(中高端用户、家装用户、女性用户、男性用户、年轻粉丝用户),代入主人公居家场景切换视频的设计理念,通过分析群体共性 场景故事包装、动效印象加成让互动变的更有趣、更有温度。

图片

 

PART 4 系列视觉展示

图片

 

PART 5 设计过程

主会场

家电618主会场针对于我们Z世代的用户群体,创造了一个年轻化的人物形象,此形象也是搭在我们整体视觉创意的心智锚点;视觉创意设定了客厅,厨房,卫生间,三大日常展现家电商品家居场景,结合我们的人物形象,通过三段分镜动效的表现形式,希望能够给我们的用户带来沉浸式的环境共鸣,从而给用户带来全新的购物体验。

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

分会场——IP联盟

IP会场是通过小鸡彩虹为载体,号召百大家电萌物联合传播,在大促期间建立高颜值萌物的活动心智,视觉上打造萌趣味性风格。通过站内外联动传播,整体视觉风格统一。促成IP联盟活动的前期流量铺垫与品牌心智的认知。整体视觉创意采用了IP形象彩虹小鸡,整个视觉结合618视觉模板组成引导视觉中心点,萌趣小鸡的形象吸引视觉,以此激发(女性、颜值爱好者、Z时代)三类人群的关注,渗透萌物圈,表达出家电也可以很萌的态度。

图片

图片

 

分会场——星推官

以集团主风格为核心,保证整体品牌一致性,以明星作为流量会场,背景星星设计元素,渐变质感呈现,突出星推官主题。此次活动初期分析了去年1.0的不足,进行视觉上的优化,整体综艺视觉感更强,页面重点模块进行了交互上的创新,再用户学习零成本的情况下,体验感得到了提升。

图片

 

分会场——极速焕新家

焕新家是家电第一次与综艺合作的项目,由京东家电独家冠名与东方卫视的强强合作,挖掘各圈层用户对家电618的期待,激活焕新你的生活需求。焕新家的活动视觉不同于618其他的会场,是剪辑整合了综艺的宣传片视频,与综艺节目高度契合,传递用户心智。

图片

 

PART 6 项目总结

家电今年618整体的视觉设计相较之前,技术上应用了当前一些比较流行的软件工具与设计技法,从用户圈层维度划分,打造了5大全方位覆盖家电用户人群的会场。

从故事场景代入,再到情感化心智打造,设计表现力有过之而无不及,通过多场景,多维度,多样式的玩法,引发用户参与刺激抢购共鸣,最终达成618“焕新你的生活”的创意心智情感表达,后续我们会从大促的体系化建设与模块持续的AB测试入手,通过数据驱动设计,不断深挖家电用户对于我们整个618活动的价值体验。

图片

 

原文地址:京东设计中心JDC(公众号)

作者:吴晓菊 等

转载请注明:学UI网》3C Design-618项目复盘总结家电篇

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

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

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

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


10个让用户一眼就爱上的设计心理学知识

ui设计分享达人

一个优秀的设计不仅要解决正确的问题,同时也是给用户创造积极的情感。在过去,实体产品可以通过人类的五感来创造情感体验,但对于如今的数字化产品来说,这似乎很难达到,因为只是在屏幕上进行枯燥的交互来获取服务。


所以,数字化产品设计师们需要更深入的理解每种类型的情感,以及创造它们的心理学原则。


根据唐.诺曼(Don Norman)的研究,人们对一个物体产生情感有三个层次:本能、行为和反思。


undefined

  • 本能层: “用户想要的感觉是什么”

  • 行为层: “用户想要做什么”

  • 反思层: “用户想成为什么样的人”


在第一层,用户将通过视觉和与产品的交互设计中产生情绪。因此,这是UI设计师擅长发挥的地方。除了美学和基本的平面设计原则外,下面是我在工作中经常应用到设计中的心理学原则。


格式塔原理


相似律

人类的眼睛倾向于将相似的元素连接成一个组,而大脑会认为这些元素都有相同的目的。 


undefined


因此,在设计具有相同功能和内容的界面元素时,就应该要保持一致性。(彩云注:这也是为什么要保持一致性的理论解释)


应用场景: 导航、控件、卡片、banner、内容、分页


连续律

人眼会将连续的元素视为一组。这一定律与对称性和相似性非常相关,通过在一个序列上设计相似和重复的元素,我们可以将用户的视线引导到我们想要的方向,它能使得阅读信息更加连贯和清晰。

 

undefined


一点点的切割是在暗示用户,这里还有更多的内容等待你去查看。


应用场景: 菜单、列表、排序、轮播、服务进度


封闭律

当看到一幅不完整的图像时,大脑会依赖之前的经验进行填充。 


undefined


这是图形和logo设计中常用的规则,但是在产品设计中,我们也经常把它用在图标和Loading设计中。


应用: 图标、loading、数据可视化


相近律

这是UI设计中的一个基本规则,因为人眼会将任何相邻元素视为一个组。 


undefined


在设计的时候,我非常注重使用间距来将元素组合在一起。我通常使用大空间来分隔大内容组,然后使用小空间来分隔大内容组中的小内容组。


应用场景: 导航、控件、卡片、banner、内容、分页


对称律

我们的大脑喜欢看到对称和平衡的东西。它是所有设计领域中使用最频繁、最安全的法则。它帮助我们创造一种稳定和秩序的感觉。 


undefined


当设计需要简单和谐可视化的产品时,我经常使用对称律。当用户需要关注重要的事情时,它也能让他们感到更舒服。缺点是,如果过度使用,产品会变得乏味和单调。通常,我用标题或CTA按钮来更好地强调和号召行动,打破画面的单调格局。(彩云注:CTA是call to action的缩写,中文通常翻译为行为号召。可以理解为引导用户点击的行为都算是行为号召)


应用场景:控件,banner,强调内容,产品显示,清单,导航。


背景分割

这个定律是关于人眼倾向于注意脱离背景或组合的事物。 


undefined


我使用这个规则引导用户的眼睛看到重要信息。它通常是一个卡片设计与一个轻投影在背景之上的层。此外,构建整体也是应用这一规则的一种方式。


应用场景:卡片、内容、列表、服务、摘要


共同命运法则

在同一方向上移动的元素被认为比固定的元素或在另一个方向上移动的元素更相关。这个规则应用帮助我们建立组和状态之间的关系。 


undefined


在制作动画时,我经常更明确地使用这个规则。然而,我们仍然可以适用于许多不同的因素。


应用场景:导航/下拉菜单,折叠,手风琴,工具提示,产品滑块,视差滚动和指示器。


2. 焦点原则


当我们看东西时,我们的眼睛倾向于首先关注最突出的元素。理解这种行为将帮助我们在设计中创建一个“锚点”,从而推动用户查看我们的场景之后的内容。


undefined

应用场景:内容、落地页、价格、产品页、banner 


3. 雷斯多夫效应


(彩云注:维基百科解释为指个人对学习材料或所见所闻的资讯,容易记住最特殊的部分的现象。例如:有一些参考书将重要的资料,以不同颜色或特殊的字体标示出来,就是利用雷斯多夫效应来加深读者的印象。)


这也被称为隔离效应,它表明人们倾向于注意并记住与其他部分不同的部分。这条规则很容易与焦点定律混淆。不同的是,应用此规则的元素通常是独立的,没有为用户导航更多信息的额外功能。 


undefined

应用场景:定价表、促销banner、不同会员介绍 


4. 本能反应


基于现实世界打造的视觉体验。比如,当我们看一个视频,每个高潮笑话时都有旁白跟着一起笑时,我们会更容易发笑(彩云注:想想《快乐大本营》)。用户会喜欢我们的设计,如果它让他们感觉良好和舒适。


(彩云注:这个理论的意思是说尽可能让用户产生沉浸感,把产品用到真实的环境上,比如大家平时使用的手机样机,把设计的界面放到这些样机中就能够给人直观的感受到应用后的效果,也是这个理论的运用)。 


undefined

应用场景:产品配图、插图、摄影 


5. 色彩心理学


有很多研究表明颜色对我们的潜意识有特别的影响。对颜色的看法也因性别、宗教和文化而异。这张彩色心理学海报就足够了(彩云注:感兴趣的可以自行翻译研究下)。


undefined


此外,我们不要忘记从早期到现在一直在广泛使用的颜色,这些颜色的使用更符合用户习惯:

红色:错误

绿色:成功

蓝色:进行中

黄色:警告


6. 形状心理学


undefined


就像颜色一样,人类的潜意识对不同的形状也有不同的反应。例如:

圆形、椭圆形:传递积极的信息,通常与社区或关系有关。

方形和三角形:带有强烈的信息,通常与力量和稳定联系在一起。

竖线:代表强度、力量或攻击性。

横线:表示平静、相等、安静。


7. 双码理论


这一理论解释了人类需要视觉和语言信息来尽可能快地处理信息。此外,人类是视觉动物,我们的大脑处理图像的速度是处理文本的6万倍。为了最大化设计的有效性,我们不应该去掉解释性的文字。


(彩云注:根据这个理论,在做作品集时,就应该尽可能的多用视觉化语言,文字作为辅助,对于视觉设计师来说,能用图表达的就尽量减少文字的比重。) 


undefined


 一个很明显的例子就是导航栏。大多数新的应用或具有复杂功能的应用都同时设计了图标和文字标签。 


undefined



8. 并行设计


人类的眼睛倾向于看到平行因素比其他因素更相关。我经常使用这一原则对同一屏幕内的两组不同内容进行分类。最容易看到的例子可能是Facebook messenger界面,当帖子并排排列时,消息是平行的。 


undefined


9. 共同区域


这一原则类似于格式塔原则中的相似定律,但它并不是完全相似。共同区域原则是通过我们使用分隔线、形状或颜色的方式创建的。 


undefined


如果一个界面需要用户滚动更多来查看内容,我们应该有一些方法来更清楚地划分它,而不仅仅是使用间距。


应用场景:列表清单、信息流

 

10.扫描图形


根据NNGroup UXPin等组织或团体的各种研究,两种最常用的扫描模式是“F”和“Z”。

  • F的使用最为广泛,尤其是对于内容量大的网站。

  • Z用于不太注重文本的网站,通常强调在最后的号召行动。

一旦我们理解了如何使用这些模式,我们就可以选择布局并有效地安排元素来实现我们的设计目标。 


总结


第一印象是最令人难忘的,积极的体验可以在用户和产品之间创造持久的关系。如果能让用户在一开始就喜欢上我们的设计,就能为我们的产品创造了一个很好的优势。

文章来源:站酷   作者:彩云Sky

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

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

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

遇到知乎改版的笔试题,我是这么应对…

seo达人



知乎消息页有什么问题吗?

首先,我自己并不是一个典型用户,虽然只有三万多关注,但也算是个 KOL 了。

所以我们还是先看看对于互动较少的普通用户来说,消息页长什么样。

 

普通用户

图片

页面大部分地方是私信列表,然而很多普通用户唯一的私信也许就是系统消息了,所以这个列表意义并不大。

那四个图标——邀请回答、赞同和喜欢、关注、评论和转发,对普通用户来说,数据会有但不会太多。

原本就不多的数据,被分散到四个图标入口的四个页面里,每次查看起来估计挺麻烦的。

 

KOL 用户

图片

上面是我自己知乎账号的消息页截图。

私信我用得不多,而且陌生人发的消息我也不一定有时间回复,所以我觉得这个功能真的没那么重要。

那四个图标——邀请回答、赞同和喜欢、关注、评论和转发,经常会显示一个特别大的数字,尤其 99+ 那种看上去没啥意义。

而且我很奇怪为啥赞同和喜欢、评论和转发要合并到一起,这让 99+ 这个数字看起来更没意义了。

我虽然很关心这些互动数据,但是每次得要一个个点开看,就觉得麻烦了。

 

问题总结

  • 太过强调使用率较低的私信功能
  • 将重要的数据放到二级页面展示,查看不便
  • 普通用户:数据不多却要分别点开查看
  • KOL 用户:显示一堆 99+,没有帮助

以上这些问题主要来自我的观察分析,顶多再问了问身边的朋友。

如果是工作中的真实项目,最好是搞些问卷和访谈才能更加细致准确一些。

 

私信和互动哪个更重要?

分析来分析去,我发现上面这个问题才是关键。

知乎目前的消息页是强调私信的,然而我个人认为互动更重要,所以这个方案是有问题的。

观察了一下其它 APP 的消息页,我发现有的是私信>互动,有的是私信=互动,有的是私信<互动。

图片

我发现腾讯视频的结构不错,可以解决掉前面分析出来的知乎消息页面问题:

  • 将互动和私信分成两个 tab
  • 优先展示互动数据
  • 将不同类型的互动数据合并展示,并可以通过 tab 快速切换查看

于是我决定主要以腾讯视频为参考,对知乎消息也进行优化。

 

优化方案

 

图片
图片

 

 

不论是普通用户还是 KOL 用户,都能一眼看到最新数据变化,评论还可以直接点赞回复。

KOL 用户想要单独查看某种类型的数据,也可以很方便地切换二级 tab。

私信虽然不是默认展示的,但有重要消息的时候,还是可以自动定位到那里,避免用户错过重要信息。

其实原版方案里,还有一些其它问题,例如:动态 tab 是否有必要、私信发送图标是否可以藏在消息私信 tab 里等…

不过由于文章篇幅有限,这些边边角角的问题都不在这里过多讨论了。

 


 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》遇到知乎改版的笔试题,我是这么应对…

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

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

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

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

用户体验|我研究的三招,应对用户的回避小心思

seo达人



00.【前言】

图片

现在我们在目标导向流程的第一个部分:研究

我是从0开始、系统讲解用户体验设计方法的CC~

 

01.【为什么会得到错误的反馈】

用户做出错误反馈的原因:

大概会分为这几类情况。

从心理学角度举几个例子来分析一下:

 

举例一:

当别人穿着新买的衣服,兴高采烈的询问你,“你觉得我这身衣服好看吗?”

通常出于作为一个自认为情商还可以的社交人类而言,哪怕这件衣服在自己看来并不是很喜欢,我们依然会表达出赞赏。

不论是出于礼貌,还是为了促进关系良好的发展,我想很少有人会直接坦荡的说,你这件衣服真丑吧。

有些非常的善良的用户,在调研过程当中,也会出于考虑到我们产品开发者的面子而忽视自己真实的想法。

 

举例二:

我们在学生时代,老师提出一个问题,“大家都理解了吗?”有些人明明似懂非懂,但依然会逞强的说出“我理解了”这四个字,也是为了掩饰自己的想法,维护自己的面子工程。

用户也一样,他们有可能为了维护自己的形象或不好意思表达自己的想法,说出违心的结论。

 

举例三:

参加过教师资格证的小伙伴应该都知道,在教师面试的时候,有一个试讲的环节。需要当场对抽到的考题进行备课和试讲。

通常我们在家里准备考题的时候都可以非常流利的进行演练,但到了考试当天,进到考场当中我们又总会紧张到不知道该说什么。

【在陌生环境下,我们经常会觉得不知所措。】

同时面对陌生的人,很多人也很难真实的表达自己的想法。

我们的用户也一样。

 

02.【我们应该怎么做?】

我自己总结了三种应对问题的方法。

 

方法一:关系培养法

善良的用户是最好沟通的。

想象一下,对我们的真心朋友,在他真心想得到我们认真的反馈的时候,我们是否可以说出逆耳的忠言?

尝试把用户当作我们的朋友,以一个向好友真心询问意见的语气和用户交流,整个过程不用很正式,告诉他我们只是单纯的朋友间的闲聊和吐槽,真诚的去访谈。

善良的用户更能说出发自内心的想法。

 

方法二:路人观察法

对于不愿意谈论他们难以理解产品行为的用户,我们不必过分强调访谈的重要性。

通常急切的追问对这类用户而言,更容易产生逆反心理。

我们可以采用路人观察的方法,在公开场合不着痕迹的观察这类用户的具体行为。

有人会疑惑,这说的很轻松,怎么才能不着痕迹的观察呢?

提供一个小的思路,我们可以收集用户页面停留的时间,点击的次数,甚至眼动的频率,又或者观察用户的微表情,来分析用户对于当下产品的理解情况。

当然这是B端产品,如果是适合公共场合使用的产品,可以直接将自己作为一个周边的普通用户,轻松的观察身边其他用户的行为。

 

方法三:情景营造法

选择用户熟悉的场景,最好是每天办公的办公场所,让周围充斥着熟悉的日常用品,在自己把控范围内的环境来进行访谈,更能够让用户有把握感,主动的表达出想法。

就像我们在自己家里接待客人,远比去别人家做客感觉来的轻松。

如果用户工作场地有限制,必须选在陌生的环境,那我们也注意不要选择看起来就很严谨,很正式的实验室场所,容易增加用户的焦虑感。

 

小思考  提一个小思考:【你知道怎么样准确的定位自己的访谈目标吗?】下节我们聊这个。

 

原文地址:达芬奇的火柴盒(公众号)

作者:CC本人

转载请注明:学UI网》用户体验|我研究的三招,应对用户的回避小心思

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

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

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

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



为你解密设计中的节奏感!

资深UI设计者


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

文章来源:站酷   作者:美工美邦

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

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

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

设计师必备的Chrome插件,超好用!!!

seo达人



01.Go Full Page

设计师在网上冲浪时,看到一些排版精美、设计优秀的界面总想要保存下来,以便日后寻找灵感。

不知道大家都是怎样保存整个网页的。

我之前的笨办法是这样的:先是一屏一屏地截图,然后再拼接起来,特别是拼连接处时需要小心翼翼地对齐,简直是太麻烦了。

现在的高效方法就是使用Go Full Page,它是整个网页的截图工具,可以轻松松松地保存整个页面。

轻轻动一下手指

图片

便生成了一个长图

图片

 

02.WhatFont

如果我们想查看网页中的字体,这就是神器WhatFont。仅仅通过鼠标停留在字体上就可以查看Web字体,简单又优雅。

图片

 

03.ColorPick EyeDropper

我经常有一种苦恼,比如同样是蓝色,为什么别人家的颜色这么干净清透,令人愉快?这时候就不得不舔屏了……

ColorPick EyeDropper就是一款吸色工具,能够直接从网页中选取颜色值。

图片

 

04.Window Resizer

当想对各屏幕的尺寸测试设计稿时,可以使用Window Resizer快速调节,了解设计稿在不同屏幕上的兼容性。

图片

 

05.CSS Peeper

如果想更加全面的获得网站上的一些信息,比如图标、svg、图片、字体样式、元素间距等等,CSS Peeper便是一个完美工具。

可以查看字体样式,可以查看元素之间的间距

图片

可以查看网页中使用的颜色

图片

可以查看网页中出现的图片或图标

图片

 

Chrome拓展程序的安装也是超简单,在拓展程序中搜索,然后点击应用就可以啦。

拓展程序地址:https://chrome.google.com/webstore/category/extensions

 

原文地址:栗子设计喵 (公众号)

作者:栗子

转载请注明:学UI网》设计师必备的Chrome插件,超好用!!!

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

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

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

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



日历

链接

个人资料

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

存档