首页

怎样设计转化页?重点关注这2个方面!

资深UI设计者

今天我们来聊聊,交互设计师在做这种转化页面出发点是什么?可以采取什么手段去承载流量,提高转化。

怎样设计转化页?重点关注这2个方面!

从上图可以看出在未增加新功能、新页面的情况下,设计师对页面信息、结构进行了重整,你会发现更注重用户价值的传递,整个页面更加高效,用户关注的信息点都很突出,并且有这么多优惠,让用户心理感觉更省钱了。以上这些都是为了去传递用户价值,不断的刺挠用户心防,让用户破防!今天从交互设计师的角度阐述下如何去做转化页。

怎样设计转化页?重点关注这2个方面!

凸显价值

在这个信息爆炸的时代,人都不愿意在无意义的事情上浪费一秒钟,而面对产品界面也是一样,看一眼没有看到自己从中能得到什么可能就划走了。所以在转化页这种承流量的页面,凸显用户价值非常重要。

我们首先应该明确你目标用户想要的到底是什么?是优惠?是承诺?还是被认可?如:购物类产品,用户在平台上可以获得什么价值?除了可以不用去实体店在家就可以下单(满足惰性)外,在使用 APP 过程中还能获得什么价值?购物的爽感、有优惠便宜感觉自己赚到了?所以具体设计转化页的时候就是要抓住这些最关键点,然后进行放大,不断刺挠用户心防。

1. 让用户感觉省钱

其实绝大多数用户都不是理性消费者,因为人性原因,我们的思考方式大多都是被系统 (无意识且快速,不费脑力)占据的,让消费者失去了理性的诱因有很多,比如:占便宜、错过、恐惧、好奇、亏欠、虚荣、逆反等等。其中便宜和错过是最常用于设计中的。

直接 | 通过优惠标签、对比、简单粗暴告知省了多少钱

怎样设计转化页?重点关注这2个方面!

便宜并不是真的便宜,而是让消费者感觉到占了小便宜。相比较拼团特惠标签,直接将用户可以省多少钱展示出来,对用户的冲击会更强。

间接 | 营造一种错过就亏了、就没有了的感觉

这在心理学叫:损失厌恶,它指的是人们对已经拥有的事物会习惯性地视若无睹,只有在失去或即将失去的时候才会产生加倍的珍惜感。对应到收益与损失上在人们心理敏感程度上来看,比起收益,人们对于损失更加敏感,这就是为什么在双十一期间,各大商家都打着:“全年最低价,再不买就涨价、不买你就亏了、抢光了…”的标语,但是这种只是感觉上给人们造成好像真的“亏大了”,但是就算买到其实也未必赚到。所以,我们在具体界面上也可以适当采用这个原理技巧,增加紧迫感和稀缺性元素,营造一种错过就亏了的感觉,让用户在犹豫时,能够斩钉截铁的按下 “转化按钮”!

怎样设计转化页?重点关注这2个方面!

上图 VUE、脉脉都是采用“限时”的这个手法来因遭稀缺性与紧迫感,从而增加用户购买欲望,而京东则采用“仅剩 1 件”“一年历史最低价”的方式来营造紧迫感。

2. 强化产品卖点打消用户疑虑

你可以看到现在各大电商上的物品的展示图都从原来的静态图向动态图及视频化方向演变,这这种手段就是为了更加高效,直观的展示产品本身的特质,让用户看了一目了然。在通过分析得出产品最终卖点后,在呈现形式上交互设计师也需要多多考虑。以下重点在展示产品卖点方式上进行阐述。

动态化展示

淘宝上的商品动图,非常直观的展示产品核心特性,帮助消除用户疑虑。

怎样设计转化页?重点关注这2个方面!

对比型展示

通过列表直接展示普通用户和会员用户间的差异,这样的方式直观,代入感强,能够很好体现产品本身的服务价值,更容易打消用户购买疑虑。

怎样设计转化页?重点关注这2个方面!

平铺直述

直接将用户可以获得特权展示,告知用户可获得哪些权益与服务,一般通过 icon+文案的方式直接呈现给用户。

怎样设计转化页?重点关注这2个方面!

这样的方式虽然没什么大问题,但是在权限比较多的时候,细看其实会不知所云,不知道具体是干嘛用的,所以如果要采用这样的方式建议搭配辅助说明。

怎样设计转化页?重点关注这2个方面!

亮数据(权威性)

将产品的数据直接展示出来,通过多维度数据权威展示产品亮点。

怎样设计转化页?重点关注这2个方面!

所以在凸显价值感知上我们可以怎么做:

  • 建立标签体系,通过标签优惠让用户感觉省钱
  • 营造稀缺与紧迫感,让用户感觉再不行动就亏了
  • 强调产品核心卖点且直观展示
  • 数据化阐述可信度更高,更有权威性

提供清晰交互动线

交互本身是一个动态的过程,转化页有时需要承载比较多的关键信息,而如何让这些信息清晰,有序的展示在用户面前并引发用户互动是交互设计师需要思考的。可以从页面框架、操作引导上去思考与用户的关系。

1. 页面框架

转化页面上的信息需要非常高效的传达给用户,应采用最高效的方式展示给用户。因为不同于购物类、视频类 APP 用户以“逛一逛、刷一刷”看看有啥好看的心态,漫无目的的浏览,而是会集中精力寻找价值从而说服自己去买,所以我们框架尽量线性,符合自上而下,自左往右的阅读习惯,所以放到页面上建议直接大模块化从上至下排布,这样能让页面更加规整,也符合与用户的视线。

怎样设计转化页?重点关注这2个方面!

以上是我在各大应用会员转化页的框架,可以发现,抛开内容信息,整体框架前两个会让人感觉更舒服,这样的搭配更加流畅性,比例更好,不会太分割,其实在设计模块化卡片大小时也可以考虑下黄金比例。

怎样设计转化页?重点关注这2个方面!

2. 操作引导

说到引导我们可以来看一看下方案例,仅仅增加了很小的一个细节就达到质的效果。

怎样设计转化页?重点关注这2个方面!

所以在做转化页面时,对关键按钮我们也需要采取一些方式让用户注意到,并吸引用户点击。主要可以从按钮的位置、大小颜色,动效、文案 4 个方面来思考。

位置

由于转化页需要展示较多信息给到用户充分思考,所以一般根据用户的浏览习惯,按钮一般放下右下角视觉落点处,这样能比较好的组织页面内容,突出又不抢页面主要视线。

怎样设计转化页?重点关注这2个方面!

大小和颜色

重要的转化按钮大小绝对不能太小,但也不宜过大。记得 UI 中有关于按钮大小的计算公式,可以在这个公式基础上进行灵活调整。有些宽度很宽是为了加大用户点击热区,让用户更容易点到。

怎样设计转化页?重点关注这2个方面!

颜色一般使用应用主题色,如果有多个按钮,主按钮颜色尽量有一定对比,这样才能将我们想要让用户点击的那个跳出来。

怎样设计转化页?重点关注这2个方面!

动效

动效一般在按钮上增加一些扫光、光效、按钮本身轻微动效即可,只要很微小的效果就可以,因为人眼在一堆静态内容中很容易注意到动的东西,如果做的很强烈就本末倒置了。

怎样设计转化页?重点关注这2个方面!

文案

按钮上的文案一定程度上也能够促进转化,所以在文案上表意的基础上可结合我上面讲述的第一部分进行文案的设定,加强用户感知!

怎样设计转化页?重点关注这2个方面!

写在最后

以上讲述了交互设计师在面对重要的转化页时应该要着重将价值简单高效的传达给用户,加强用户的感知,可以通过贴标签、紧迫感文案、动态化、对比化、平铺直述、亮数据内容展示,更好的将产品价值传达给到用户,在具体内容布局上建议准寻线性的框架搭配颜色、动效、引导性文案的方式引导用户操作。以上是我个人的思考与总结,有问题可以共同探讨~ 感恩

文章来源:优设   作者:小发的设计笔记


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

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

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


腾讯文档-色彩系统应用篇

ui设计分享达人

《腾讯文档-构建科学有效的色彩系统》这篇文章中,我们阐述了腾讯文档如何升级了新的品牌色,为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和品牌认知,以及如何构建一个科学有效的调色板。


在设计系统的实际运行中,我们也需要着眼于如何应用调色板,建设协同工作流,并给各个角色提供有关色彩的扩展指导,以达到在腾讯文档中构建一致且有品牌感的数字界面并有效提升效率的目的。

在建设腾讯文档色彩系统的工作中,我们首先构建了一个包含品牌色、灰色、辅助色的调色板,但仅有这个调色板不足以支撑我们流畅、无障碍的协同工作。日常工作中,“这里我用哪个蓝色?”“这里我用哪个灰色?”“开发同学能否快速的变更某些元素的颜色?”等等问题层出不穷,建设系统的协同工作流迫在眉睫。



Chapter 1

——————————

如何建设?

HIG强调不要在APP中使用“硬代码”,即十六进制色值进行编码,但前期我们构建的调色板仅有色值,这种硬代码应用到app中导致项目效率低下,维护也会成本激增。


于是在腾讯文档中,我们开始采用颜色变量(color token)和主题(theme)来管理颜色,颜色变量(color token)基于任务(role)、主题(theme),为UI中的任务指定十六进制代码的色值(hex value),以弭平设计师之间、开发与设计师之间的沟壑,将颜色变量(color token)嵌入设计组件中与开发代码形成联动,便于开发利用程序中的变量来做全局修改,横向提升团队的协作效率。


所谓颜色变量,通俗的意思就是可以将一个颜色按任务用途去抽象,抽象成一个有命名的颜色样式,这个颜色样式就是颜色变量。


在设计或者代码中,可以通过修改这个颜色变量的值来进行全局颜色的更新。例如,我们现在需要给button一个颜色,不要将其写为 #1E6FFF这样的色值,而是将button的颜色指定为命名是Fill-01的颜色变量, 如果有重大版本更新,仅需将颜色变量Fill-01的色值更新,即可实现全局颜色的高效更新。如果在不同的主题下(例如浅色/深色模式)button有不同的颜色表现,颜色变量Fill-01可以在不同主题下,映射不同的十六进制色值。这就是我们建设协同工作流的的基础逻辑。



Chapter 2

——————————

为调色板的基础色值命名


调色板的各个色值(hex value)是最底层的基础样式,我们将色板上的颜色进行规则化命名,以方便后期将其引用到颜色变量中。


腾讯文档包含核心蓝色、蓝灰色、中性灰色及其他辅助色,按照颜色属性,将其命名为:Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red,并在命名中加入色阶后缀。

*腾讯文档调色板命名图表



Chapter 3

——————————

定义颜色使用规则


1、 从调色板中选择合适的颜色并测试

从调色板中根据UI中的任务挑选合适的颜色并进行可用性测试,做具体任务中颜色选择的最优解。


例如,我们需要选择一个蓝色作为链接色,作为文本,对比度必须达到4.5:1以上才符合WCAG2.0的可用性标准。经过测试我们选择了primayblue-02作为链接色。


腾讯文档的界面中,灰色系列占主导地位,起着至关重要的作用,为产品界面创造结构、表达边界、建立信息层次。在调色板中,我们选择了两种灰色:中性灰色和蓝灰色,来支撑系统的设计。蓝色系列是腾讯文档产品和体验的主要动作颜色。



同时我们也使用了其他颜色以满足一些冲突性任务(警示等)的颜色使用,这些颜色需要谨慎、有目的地使用。



2 、根据任务定义颜色的使用规则

经常会有设计师问,“这里我能用这个灰色吗?”出现这种问题,根本上还是颜色使用规则定义的不够清晰,含混的口口相传的规则会导致更多的混乱。于是,需要我们根据任务和使用场景把颜色的使用规则清晰的定义。


首先定义在界面中占主导地位的灰色、蓝色的使用规则。


蓝灰色_Grayblue:

在腾讯文档中,蓝灰色与品牌蓝共同建立品牌印象,由此,蓝灰色主要应用于与风格相关的场景。包括:图标色、填充底色及大面积的背景色等。



中性灰色_Gray:

中性灰色主要应用于一些全局系统行为。如:文本、分割线及交互反馈hover、press等场景。



品牌蓝色_Primayblue:

品牌蓝色主要应用于系统中的各种行为,如蓝色图标、button、文本链接等。



其次定义在界面中用于警示、状态提醒的其他颜色的使用规则。


红色_Red:

红色主要应用于系统中需要警示的场景,如红色警示图形、错误文本、红色tag等。



其他颜色:

在腾讯文档中,会针对不同的任务应用不同的颜色,如左滑操作、成功提示、高亮显示等。



品类图标基准色:

在腾讯文档中,不同的品类有不同的基准色。



Chapter 4

——————————

颜色变量的语义化命名

定义了颜色在系统设计中的使用规则后,我们需要根据颜色变量的使用用途对其进行语义化命名。一套好的语义化命名规则需要易于维护且具备可拓展性,如果只是将调色板的色值命名为 blue-01、blue-02... ,语义化的收益并不明显。哪天设计团队需要调整品牌风格,或是苹果又掀起什么新潮流,把所有命名为 blue_x 的变量改为 gradient_serenity, 对于开发来说也是巨大的灾难。


根据 HIG 的建议,语义化命名不应该描述外观或者色值,而是指明这个颜色的任务用途——标签 Labels,分割线 Sepatators 或者填充 Fill。


在思考如何赋予颜色语义化的命名时,设计师也需要用更概括和结构化的视角来看待界面设计,同时也需与开发同学达成一致,使用同样的命名,满足以更好地维护一套收敛和统一的设计语言。


在腾讯文档中,颜色的任务用途定义为为以下几种:背景色 Background、文本色Text、图标色Icon、分割线 Border、透明填充 Transparent fill 、实色填充 Opaque fill 、默认交互反馈 Feedback、语义 Intent。统一使用ultrastrong、strong、medium、weak、ultraweak作为后缀来表达颜色强度。在需要更明确的用途说明的任务中,直接描述其用途,例如:hover,pressed、disabled等。





Chapter 5

——————————

建设团队协同工作流


以上种种,最终目的在于建设团队的协同工作流,将颜色变量(color token)嵌入设计组件中与开发代码形成联动,便于设计利用变量及组件、开发利用程序中的变量来做全局修改,横向提升团队的协作效率。


1、 设计内协同:在Figma中生成颜色变量

在设计系统中,颜色变量属于底层的设计原子,需要将其生成为颜色变量并嵌入到设计组件中,便于设计内部使用。我们将已根据任务用途命名的色值,生成figma中的颜色样式(color style),后续无论是进行组件的设计,还是项目的设计,都可以直接赋予设计元素明确的颜色样式。


2、 设计组件与开发代码联动:利用颜色变量表进行信息同步

我们生成了一个面向内部、外部的颜色变量表,进行颜色变量的说明和信息的同步,沉淀落到实处的资料文档。(此处推荐使用腾讯文档,多人协作实时沟通~)



最终形成了设计组件库与开发组件库的联动,构建了一个协同工作流,横向提升工作效率。



结束语

上篇的调色板设计后,一直在酝酿这篇调色板的实际应用。在设计一个较为复杂、庞大的产品时,提效是永恒的课题。痛过、踩过坑的设计师应该深有感触,沟通的无力、推动的困难都推动着我们发动自己的能量去想办法提效。




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

文章来源:站酷 作者:腾讯ISUX
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


UI设计师如何避免用户不满与困惑

ui设计分享达人

案例1.用户操作时的困惑


相信大家在做设计的时候都遇到过这种情况,一个产品内有多个入口指向同一个界面,这是产品的投机取巧还是另有深意,很多人都对这样的设计有不同的看法。


这样的设计就好像是狡兔三窟,在产品中流量可以从不同的入口进来,到多个不同的出口,也可以从不同的入口进入同一个地方。



有人会觉得如果一个界面中有多个入口指向同一个界面会出现问题:


1.违反了效率、用户预期的原则,会认为页面空间有限,在同一个界面中有多个入口指向一个界面效率变低,而且用户知道后往往就会只从一个入口进入。


2.多个选择会让用户拉高转化的成本,用户在选择的时候会花更多的时间思考有什么区别。


我们来看一个例子,下面德邦app之前的一个版本,目前已经优化了。从截图中我们发现页面上方的查询和寄件都和底部标签单独出来的界面功能重复了,并且我的快件也直接可以展示在首页的下方,我的快件目前可以从首页顶部、首页下方和个人中心3个入口进入查看。



通过这个案例我们发现确实这些板块和功能重复度太高,并且没有区分出场景,这样的设计证实了以上的两个说法,降低用户使用效率和提高选择成本。而且从业务角度看也并没有目标的差别。


但是我们分析问题也要多角度去观察,多个入口进入同一个界面只有缺点没有优点吗?


显然不是,我们再来看几个案例


下方是一个商品评价的卡片,经过我小手的实际测试,发现无论点击这个卡片任何有内容的区域,都会跳转到全部评价的界面,那这样的设计逻辑是否会造成和上面的案例一样的问题呢?答案是,不会。



这里的设计逻辑并不是和沙面那里的场景那么单一,而是用户在面临不同需求场景的时候可以有选择。


不知道大家有没有发现一个问题,在上面德邦案例的时候,你会对两个入口有疑问,但是在评价卡片的时候并没有,这个卡片包含了4种不同的场景:

1.我想看看有哪些好评、哪些差评 

2.几个不同标签的用户都是怎么说 

3.下面用户的实拍到底是不是真实的 

4.还有没有更多类似真实用户的使用评价。


所以即便最终到了一个界面,对于用户来说也是从独立的出发点开始的,而再回过头看上面案例,你会发现,我就是要寄东西,这里有两个入口,怎么选。


而且,考拉这里其实还做了从不同内容点进去的一个区分。



再来看个案例,贝壳的地图找房,在首页中有两个入口,导航栏一个,分类中一个,这里出现重复会造成一开始说的问题吗?首先我们看到贝壳的业务很多,以至于在这个分类中居然还需要通过滚动指示器来展示剩余内容,大家也可以思考一下,在这个界面中,会不会出现两个地图找房不同的场景出发点呢?我个人觉得其实是可以商榷的,首先地图找房在房产app中是很核心高频的一个功能,他的属性是“工具”



所以我觉得他之所以在卡片中再放一个地图找房是3个原因


第一个是导航栏的找房肯定不能动,他是一个全局的入口,即使页面滚动也可以随时点击到,即便要撤一个,也肯定要撤下方卡片分类中的。


第二个是卡片分类中的图标入口是都具备工具属性的,那首页上面部分就分为了:搜索、业务分类、工具这三块。所以用户看到这些工具属性也会联想到通过地图去找房。而且这些多色彩的图标对于新进入的用户是比较吸引注意力的,所以很有可能用户看不到右上角的地图找房(可以参考古腾堡图表的原则)。


第三点是可能右上角的地图不太能清晰表达这个图标的具体功能,所以将“地图找房”四个字显示全。


但这些都有一些主观因素在里面,如果真的去掉卡片中的,我觉得可能影响也并不是很大。有小伙伴可能想说是为了分流,但是分流的目前主要是让流量流到他应该去的地方产生实际价值,除了以上的3个原因,好像确实有点重复了。


再来看一个例子,小鹿茶app。



首页的现在下单和底部菜单标签都是到同一个界面,那为什么要重复呢?这里其实考虑更多的他并不想让用户进来就直接去购买,为什么不直接购买呢?应该是想要建立自己的品牌人设、满足更多的消费场景和增值业务,比如给别人点奶茶、周边的杯子跟合作商品推销、最新的奶茶的推荐。


如果只有菜单,产品也会显得更工具化,很难突出自己的品牌,对业务增长没有太大的帮助。有同学要说,那这个界面只是产品的“一厢情愿”,我就只要点奶茶就可以了,多个入口只会给我带来困扰。所以他这里的设计逻辑是在用户打开app的时候首先定位的是菜单,而不是首页。


所以,到底多个入入口进入同一目标我们还是要看不同的场景和目标的。如果既没有业务目标做支撑,又没有用户场景的变化,那么这个重复的入口就是鸡肋的。


最后留一个小思考题:网易云音乐的“歌单”在首页上也重复了,大家知道这里为什么他要做成重复入口吗? 




案例2.用户使用中的不满


一个优秀的产品或者说一个合格的产品,能给用户带来愉悦的体验。何为体验,用大白话来说就是用的舒服、自然、高效率。


再有一个底线就是不要让用户产生由产品带来的负面情绪,例如产品出错了却不告知用户解决方法、用户出错了没有办法及时帮助纠正、高危操作没有二次确认等等,根据负面情绪的严重程度几乎就可以直接让部分用户流失。


很不幸的是我就遇到了这样的体验,当时正在给同学们布置一些作业练习,体验一些产品的优缺点并给出解决方法。我也下载了这款文玩类的App,体验了极速捡漏这个功能模块。


捡漏:在文玩圈的一句行话,意思就是用很便宜的价格买到很值钱的古玩,而卖家却不知情,是一种可遇不可求的行为,所以寓意就是比较难得、走好运了。


进入直播间,商家在卖力吆喝,页面底部有加一手的按钮,就是类似于拍卖,价高者得。于是我就抱着试一试的心态点了加一手按钮,因为我预期是产品会再次向我确认是否要加价,结果是居然加价成功了,发生了什么?最后竞拍结束也没有人继续加价了。




实际场景中用户可能误操作不小心点了按钮,这样的场景和情况是非常多的,即便不是误操作,给一个二次确认的对话框也可以避免这样的尴尬状况,因为用户就喜欢在产品中点来点去,然而你在这里就像埋了一颗地雷。


如果到这里就结束了,那其实我也感觉没必要去吐槽,问题在于当我拍下还没付款,直播间的商家就开始喊我的名字:xx大哥恭喜你拍到了我们的产品,可以去付款了。连续播报了几十遍,我尴尬的直接退出了后台,这种感觉就像是一群观众看着一个被骗的小白一样,当我过10分钟后打开系统提示商品流拍了,并且累积了违约积分。


???


到这里,可能会有人说,你自己拍了的又不付款,当然要惩罚你了。


于是我还是认真的去研究了一下,发现极速捡漏和竞拍并不是同样的规则。该产品和竞品其实都有竞拍板块,在竞拍板块都会有需要用户确认的操作,并在操作下方给出拍卖规则,显示出价即表示同意拍卖规则。




但是该产品极速捡漏的板块并没有这样的说明,既然没有提前展示这样的说明和约定,用户就不知道有这样的规则,我拿了竞品一对比,其实在直播带货的场景下,这个出价流程还是不同的,双方其实都没有给规则说明但竞品还是给了一个出价选择后再出价的步骤。



最后我甚至被商家拉黑了,不过还给我一个投诉商家的入口


我当时的想法:


1.如果因为误操作让用户付出这么大代价的话成本就太高了。让用户点击是否就等于用户同意?


2.请先告知我约定与协议的内容,单方面在我不知情的情况下对产品进行操作后,通知扣我违约积分,这样就有点“霸道”了。


3.平台对商家和消费者的权益是如何平衡的,文玩行业和互联网结合的难点在哪里。


3.线下文玩圈的一些不成文行规,导致新人入圈后产生的冲突。


于是我就想对此说说我的看法



1.交易是产品平台其中的一个功能属性


交易是产品平台其中的一个功能属性,需要优先满足产品对用户价值,其次再谈交易的合理性。在这个流程中,面对用户很有可能遇到的误操作行为以及需要让用户去下单支付成本,我们必须提前告知用户。在尼尔森可用性原则中我们也发现了,如果用户不小心操作失误,那么我们尽可能减少这些因为用户犯错带来的成本,同时在用户犯错之前就要明显告知用户,将风险控制、前置。


所以,你在注册的时候、登录的时候,产品一定会让你同意一份用户协议,告知你我们要保存你的数据和一些跟你相关的信息,如果你不同意,那就无法继续体验产品。


这是一种契约。


同理,如果你想让用户在这个产品中去参与拍卖,在进入这个板块之前或者用户点击按钮之后,也需要让用户明确这个操作带来的风险是什么,取得用户的同意。而不是直接让用户加价成功,导致用户不明所以的被扣违约积分、被商家拉黑,这就和你去泰国,在街头你朋友拍了一张你和一个抱着蜥蜴的人的照片,结果别人来问你收钱是一个道理。


对于正常线下拍卖的流程,举办方也会对参与拍卖的人员进行相关规则、流程的告知,并且将风险、问题都提前让客户进行协议确认。


所以,在产品中的交易,必须先满足用户与产品信息之间的对称关系,保持信息的透明和契约公正,规则、约束、条件是用户使用你产品的前提和体验反馈的衡量标准之一。



2.对于商家和产品的价值


商家希望有更多的流量来曝光商品,捡漏商品的低价可以快速吸引一大批用户,比如8块钱的一个木头核桃的雕刻挂件等,产品通过营造抢购、限时的氛围,吸引用户下单,并且降低用户参与的门槛。


那么,直接加价成功是一个好的降低门槛的策略吗?我觉得并不是,降低门槛并不意味着就是直接拍到,而是需要提高用户对产品的信任度,这个极速捡漏的模块的目标用户几乎都是小白用户,因为资深的玩家看不上、更不会买,有一定经验的玩家也看的出好坏,明白它的价值。所以面对这些没有了解过文玩产品的小白玩家来说,内心是谨慎的


可能有人会想,这几块钱、十几块钱的东西还需要考虑吗?当然在这个场景中,从众心理是很明显的,大家都觉得很便宜,但就是没人拍。这都几块钱捡漏了怎么都没人要,大部分人都觉得这么便宜东西肯定不咋样,运费是不是贵的离谱、有没有托在背后跟你抬价呢?大家都不拍我也观望。越多人围观,越难促成交易。


还有一种可能就是我卖不卖的出去东西,并不重要,重要的是有人来看了,这些边角料都是用来回馈直播间粉丝的,就是一个窗口,真正有利润的东西在橱窗里。所以这里的捡漏只是一个引流的噱头。


人总是对太轻易得到的东西不珍惜,更何况是几块钱的小玩意儿。所以针对直接拍下这个交互,个人认为是不妥的,无论是上面任何一种情况,都没有办法让降低门槛,甚至通过这种“小聪明”反而会让用户更加不信任产品和用户。


不信任产品是大。尤其是作为一家平台来说,虚假交易、以次充好、滥竽充数等等行为是致命的。



3.文玩的价值


我其实有玩过一段时间文玩,受我老丈人的影响,有一段时间喜欢玩手串、玉什么的。经常也会在某音去刷一些鉴宝类的视频,很有意思。


文玩它的价值在于品相、稀有度、盘玩程度、大众接受度、历史背景还有工艺等等。所以它并不是一个在每个人心中同等效用的商品,同样一块玉,他的种水一般,但是花纹很独特,买卖双方其实心理的价值预期会相差非常多,它就不像买电子产品一样价格那么透明容易计算。


有的人玩这些就是觉得命里该有它,它能给我带来财、运,帮我辟邪,看的是眼缘。而不是路边上一块无用的石头,可以随意拾取丢弃。那么换句话说,如果在用户下单的时候,我们利用一些情感化的文案,让用户喜欢上这款文玩,是不是也可以大概率的促进交易呢?



4.文玩圈的行规


我相信很多玩文玩的小伙伴都知道,在文玩圈有一些不成文的行规。也或许就是因为这些行规出现到了线上产品中。


1.还价意味着出价,出价意味着买下

在文玩圈,你不想买就不要还价。如果卖家同意了你的还价,那你就必须买。这代表着你个人的信誉和道德品质。


所以文玩圈和互联网的用户之前有许多的鸿沟需要一步一步建设桥梁,不能单纯的以线下圈子内的行规来要求刚接触这个圈子的互联网用户,这需要大家一起努力和营造起一个良好的文玩圈的文化和规则,而不是直接生搬硬套,提高这个门槛。


2.不要打听别人的成本

文玩没有实际的成本,可能别人花10块钱淘到的价值1万块的东西,也可能别人花了巨资看走了眼。所以你知道了成本对谁都没好处,别人也不会告诉你。


3.别人在交易的时候保持沉默

文玩在每个人心中的价值不同,所以货币价值也不同,当别人在询价还价的时候,不管怎样我们都不要去表明自己的看法和想法。


当然还有其他的规则就不一一叙述了,针对这3条,其实在互联网的产品中是会有冲突存在的。例如你买了某个文玩,你一拍下,别人就说这个根本不值这个价钱。还有你出价了但是又不想买了,这些原本在文玩圈子中不允许的规则,在互联网上去要求用户着实有点困难,因为互联网上的交易并不一定所见即所得,可能展示的是这样,收到货又是另一个东西。

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

文章来源:站酷 作者:应骏
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


HSB色彩模式,让配色有理有据

ui设计分享达人


念起

 

 

作为一名UI设计师,不免每天都会和色彩打交道,但有时总会苦恼于色感把握不准,让我们配的色彩,总是“不对味儿”。我结合在近期的一些项目中对于HSB色彩模式的应用,与大家分享一些结合HSBHSV)色彩模式帮助我们进行配色的理论和技巧。也欢迎大家一起讨论,共同进步。


 

 

色彩模式有哪些?

 

 

我们生活中借助观看而感觉到的“色彩”,可分为光加上颜色之后所透出的“透出色”,以及光照射到物体上反射出的“反射色”。


透过色是以“加色混合”的方式,由红、绿、蓝,共三色混合,表现出各种的颜色,我们的计算机屏幕就使用这种方式表现颜色。这种色彩表现方式,称为RGB色彩。


 

▲图《设计入门教室-色彩设计的原理》

 

物体色彩的反射色,是用画具或染料、油墨等“色材”来表现颜色,印刷品基本是由青、洋红、黄、黑四种油墨相互组合而成,所有的颜色皆以“减色混合”的方式表现,这种方式称为CMYK色彩。


RGBCMYK两大色彩模式是最重要和最基础的。RGB更是与我们的工作密不可分。可是,在实际工作中我们往往很少直接通过RGB模式进行调色。



简单聊聊HSB色彩模式

 

 

1.HSB是什么?

「这是什么颜色?鲜不鲜艳?很亮还是很暗?」当我们看到一个颜色时,往往心中都会闪现这三个问题。

事实上,人类对于色彩的第一个感知往往是从色相(Hue)开始,即红色橙黄色绿色青色蓝色紫中的一个,然后是它的深浅度。

HSB模式对应的媒介是人眼,在选择色彩这件事上,HSB使用了更贴近人类感官直觉的方式来描述色彩,它把颜色分为色相、饱和度、明度三个因素(将我们人脑的“深浅”概念扩展为饱和度和明度)。

 

H—色相/色调:颜色的相貌,颜色的调性,在标准色轮上,色相是按位置度量的,取值在0360度之间(黑色与白色无色相)。

 

▲图网络图片-圆形色相环


S—表示饱和度/纯度:颜色的纯度,取值在0100之间,饱和度高色彩较艳丽。饱和度低色彩就接近灰色。


B—表示明度/亮度:颜色的明暗程度。取值也是在0100之间。亮度高色彩明亮,亮度低色彩暗淡,亮度最高得到纯白,最低得到纯黑。

 

工作中,我们常用的设计软件ps Sketch都是通过拾色器帮助我们选择需要的颜色。

▲图软件拾色器截图


HSB模式,可以完美固定HSB中的某一个参数,只对其他两个参数做改变或者只改动其中的一个参数,这一点,完全符合人的色彩直觉,也只有HSB能做到,而RGBCMYK都是牵一发动全身的节奏。


通过HSB模式,我们可以在已有颜色的基础上,进行饱和度、明度的微调。以及选定主体色之后,根据需要,通过数值的加减改变色相,选取合适的颜色(互补色为180°、对比色为120°到150°、类似色为90°、邻近色为60°、同位色为15°。)

 

 

2.在设计中如何运用HSB色彩模式

通过上述对HSB的原理、特点简单介绍后,相信大家对其都有了基本的了解。以下我结合在工作中的几个案例来说明HSB在设计中是如何实际应用。


举个例子:如果我们在设计一个页面时,除主色之外我们需要一个近似色,就可以运用HSB色彩模式。

 

通过图片我们可以看出右侧的颜色整体视觉效果感觉更加和谐、舒适。在界面设计中我们常会遇到以颜色对同一种类型的不同状态进行区分,比如背景,按钮等。

 

 

结合上述的例子,以及饱和度与明度的变化规律:

(在不改变色相的情况下)

 

 

 

HSB色彩模式在项目中的实际应用

 

 

1.爆款、预约详情页色卡库

在去年的vivo游戏中心爆款、预约详情页的改版优化中,都运用了HSB色彩模式。使不同游戏可以根据头部氛围图配置出3个相同色相值的近似色并运用到页面中。保证色彩搭配有规律可行,并且展示效果在基准线之上。


系统统一从头部氛围图吸取、确定颜色后,通过调整饱和度和明度值(色值不变),即可得到一套色卡。

▲图4 vivo游戏中心预约详情页设计规范


2.联运深色模式中的应用

在双系统的深色模式适配要点中有提到“高饱和的颜色在深色的背景下容易产生视觉抖动,从而导致人眼疲劳”,在深色模式下我们应当选择更浅的颜色以达到更好的可读性。

 

我通过结合Material Design以及Developer深色模式适配规范中的色彩示例来简单说明,怎样借助HSB,来达到深色模式色彩科学合理的适配。

▲图5 Material Design深色模式适配规范

 

▲图6 Developer深色模式适配规范


通过对两种规范的学习以及对比,可以看出Material Design的规范相对而言更加直观和系统(手把手教你),Developer的适配则比较微妙(只可意会),没有明确的说明方法或者规律。但Developer示例中的适配则更加注重视觉表达以及色彩的一致性,带给人的视觉感受更加的舒适和谐。       


重点分析Developer深色适配中的配色示例中,通过将Developer给出的深色模式适配示例的色值转换为HSB之后,发现其HSB的数值变化是有一定规律的,规律基本符合:

 

BUT

在根据Developer的深色模式颜色适配的示例总结其规律的过程中,对于数值的变化,产生了一些疑惑:

 

直到了解到:「每个颜色都有其专属的“感知明度”,也就是亮度」

 

将色相环去色后,可以明显看出:

 

每一种颜色(色相),都有着独特的“感知明度”,在SB相同的情况下,黄,青,洋红的颜色会让人感觉比较亮,结合这点再结合Developer深色模式的适配示例以及得到的基础规律后。可以得出:

 

将上述我们所得的“HSB配色一般规律”运用在vivo游戏中心联运深色模式主色的推导,以及vivo游戏中心爆款详情页自动吸色系统优化中,使得页面的阅读体验更加良好,整体配色和谐舒适。

▲图7 vivo游戏中心、联运游戏爆款详情页

 

 

写在最后的话

 

 

HSB在设计工作中的应用当然不止上面讲的这些,比如我们经常碰到的页面中为了区分不同层级的文字,会给予文字不同灰度的颜色(最常见的#000000#333333#666666#999999)也是应用了HSB模式,当我们所要区分的层级多于四种时,就不需要在色板里纠结了,只要按照上述的规律,以不同明度的变化就可以了。


在我寻找资料的过程中,也看到很多通过色相,饱和度,明度的一致或者对比等方式得到协调优秀配色的方法。这些都可以通过方法和HSB模式的结合,快速方便准确帮我们找到合适的颜色。

▲图网络图片-色相环配色图


在日常设计中,可以通过个人对色彩的感知与把握选取一个颜色,再通过HSB快速的选择相应的色板,运用在页面配色中。到这里关于HSB色彩模式在设计中的应用就全部介绍完成了,如果你阅读完也有所收获,不要忘了点赞哟~

 

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

文章来源:站酷 作者:vivo互联网UED
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


 

从原子设计理论角度解密AI智能设计-神秘的AI智能设计到底怎么实现的?

资深UI设计者


文章来源:站酷 作者:SPECHEN 

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

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

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

多级菜单设计最佳实践

ui设计分享达人

导航和可查找性是用户体验设计的核心方面。如果用户无法找到他们需要的东西,他们就会感到沮丧并可能决定去别处寻找。在信息架构特别复杂的网站上,多级菜单是提高导航和可查找性的有效方式,从而提供有效的网络体验,促进产品信任和促进转化。

由于产品和使用它们的设备千差万别,因此没有一刀切的解决方案。但是,有一些经验法则可以帮助您构建多级菜单,从而增强在不同屏幕尺寸上的导航和可查找性。

不同尺寸屏幕的设计技巧

一个好的多级菜单应该通过以清晰、直观的方式呈现信息,让用户快速找到他们需要的信息。在我们进入特定于尺寸的指南之前,让我们看看一些适用于所有菜单的做法。

使用不超过两级的子菜单。任何多于两级的子菜单都可能使用户感到困惑。保持导航相对平坦可以提高用户的可查找性,并减少记住他们所在位置所需的认知负担。如果站点的页面结构很深,请考虑在密切相关的页面顶部添加本地导航菜单。例如,设计复杂业务支持产品的 Zoho 在每个产品页面的顶部放置了一个特定于产品的本地菜单,就在主菜单的下方。虽然顶部的主菜单列举了 Zoho 的核心产品,但本地菜单提供了对包含更详细信息的页面的访问,例如用例和定价。

用图标标记子菜单。通过始终明确何时有可用的子菜单来管理用户的期望。熟悉的选项包括一个小的下角图标或三角形图标。此外,请考虑在子菜单打开时翻转指针图标。

直观地组织信息。确保信息的层次结构与用户的心智模型一致。例如,在电子商务网站上,考虑购物者是否更有可能期望按品牌或商品类型组织商品。如果用户单击“鞋子”类别,他们是否希望子菜单显示运动鞋、凉鞋和靴子的选项?或者他们是否希望看到一个子菜单列出商店出售的每个品牌的鞋子?

确保用户始终知道他们在哪里。始终突出显示主菜单上与用户所在页面相对应的链接。如果当前页面在子菜单中,则在主菜单上也突出显示子菜单链接。

保持简单。菜单不是进行巧妙文字游戏的地方;确保链接标签具有强烈的信息气息。这意味着保持标签名称简单明了和描述性,以便用户在点击时立即知道他们会找到什么。文案越清晰,用户就越快找到他们需要的东西。

优先考虑可读性。使用简单的无衬线字体并确保项目周围有足够的间距以避免混乱。确保背景足够不透明以遮挡菜单后面的任何内容。但不要忽视网站的整体品牌。虽然可读性是第一位的,但要确保菜单的样式与网站的其他外观和感觉相得益彰。

使点击变得可访问。为了让有精细运动控制障碍的用户可以访问菜单,请遵循 Google 的Material Design指南,并将可点击元素的大小设置为至少 48 x 48 像素。

网站菜单设计技巧

即使移动趋势日益增长,客户可能需要功能齐全的网站的原因仍然很多。例如,他们可能需要在网上提供比移动网站可行的更多信息。或者他们的研究可能表明他们的用户只是更多地依赖台式机。

网站菜单应该易于浏览,提供清晰的交互,当然还有响应性。它还应尽可能与移动网站保持一致,以便为回访者提供直观的体验。

菜单应该在点击时打开,而不是悬停。您需要做出的最基本的决定之一是用户将如何访问站点的菜单。将指针悬停在菜单上是否足以触发菜单的外观,还是用户需要单击它?

悬停方法很流行,但点击打开是确保菜单在所有设备上可靠、直观地工作的最佳方式。单击方法使网站能够在传统的计算机显示器和类似的触摸屏上更一致地工作,并避免悬停方法出现的许多问题,包括:

a) 狭窄的悬停空间。悬停空间是鼠标在保持菜单打开的同时进行导航的路径。如果它太窄,菜单可能会在用户到达他们想要的链接之前消失。

b) 意外打开。如果用户在前往页面上的另一个位置的途中尝试浏览悬停菜单,则很容易无意中打开悬停菜单。设置一个短暂的延迟可以解决这个问题,但当用户确实想要打开菜单时可能会导致不适。

c) 触摸屏上的用户体验不一致。悬停菜单在触摸屏上不起作用。他们需要一个代码来检测触摸屏并切换到点击打开;随着笔记本电脑和平板电脑之间的界限越来越模糊,这些变通办法可能会过时。

d) 关于什么是可点击的问题。使用悬停菜单,用户在尝试单击之前并不总是知道父链接是否可单击。这与直觉相反。

e) 可访问性。悬停菜单可能会给使用屏幕阅读器或通过键盘导航的用户带来问题。

选择正确的布局:下拉菜单与超级菜单。如果网站使用传统的菜单布局(位于页面顶部的水平菜单栏),您可以考虑两种类型的子菜单:标准的单栏下拉菜单或多栏超级菜单。

如果父类别包含的链接少于八个,请考虑使用下拉菜单。如果下拉菜单足够长,需要垂直滚动,您应该考虑以不同的方式组织信息——也许作为一个大菜单或通过细化父类别。

超级菜单是一种嵌套菜单,通常使用可以扩展浏览器宽度的宽布局。如果子菜单包含许多可以按列分组的不同链接,您应该使用这种类型的菜单。通常,您会在大型电子商务网站上看到这样的菜单。

设计大型菜单时,请考虑以下事项:

a) 添加图像或图标,使信息更易于浏览。

b) 添加标题以对相关页面进行分组。

c) 如果类别名称不言自明,请添加说明。

大型菜单在移动设备上可能难以阅读和导航,但有时在更大屏幕上用户体验的改进使得为移动设备重新配置信息而做额外的工作是值得的。

添加清晰的悬停状态。使用点击打开菜单,包括所有可点击元素的清晰悬停状态,会使户确信链接处于活动状态。您可以使可点击区域的背景稍微变暗以指示悬停状态。只要确保悬停区域与可点击区域匹配。如果测试表明用户需要更多指导或上下文,请考虑添加更多描述性标签名称或工具提示,只要它不会阻止任何重要的内容。

单击以关闭子菜单。当用户点击别处或打开另一个子菜单时,通过关闭菜单来保持直观。这就是下拉输入字段在表单中的工作方式,因此大多数用户会觉得这很熟悉。

在桌面上启用键盘导航。并非每个人都使用鼠标进行导航,因此菜单应允许用户使用键盘进行导航。这意味着所有链接都应该具有不同的焦点状态,以便用户可以一目了然地看到它们的位置。通常,深色框可以很好地指示聚焦状态。

移动屏幕的设计技巧

如果您尚未设计移动优先,则需要优化手持设备的菜单。传统的菜单布局在非常小的屏幕上很少能很好地操作——如果你只是缩小桌面菜单栏,没有人能够阅读它。

简化主菜单。由于智能手机屏幕很小,您在桌面菜单中找到的大部分信息最初都必须隐藏。主菜单栏必须非常简单,但最好显示最重要的链接以提高可查找性。您可以将菜单栏固定在屏幕底部或顶部。

添加菜单触发器。由于移动菜单的全部或部分可能被隐藏,用户需要一种方法来找到它。在菜单栏或易于触及的浮动按钮中添加汉堡图标是一种流行的解决方案,许多用户都会认可。然而,汉堡菜单并不是唯一的选择。例如,如果您正在为年长的用户设计,则最好使用带有“菜单”一词的框。或者,如果您想让网站的功能更加突出,您可能希望将它们显示在顶部或底部的选项卡式菜单中。

将菜单放在侧边栏中。您可以通过多种不同的方式设计移动菜单。您可以使用全宽布局,适用于任何情况;底部抽屉,最好只有几个链接;或圆形菜单。一个不错的选择是使用带有深色半透明背景的侧边栏来遮挡页面内容,从而消除干扰,并允许用户轻松点击它以将其关闭。还可以考虑使用从左滑动的动画来避免不和谐的体验。对于侧边栏和底部抽屉菜单,请确保菜单可垂直滚动,以便在较小的屏幕或横向模式下不会有任何内容被遮挡。

允许用户轻松关闭菜单。用户可以直观地点击菜单来关闭它,但也可以考虑添加一个关闭按钮。您可以将汉堡图标变成 X 或在菜单的右上角添加一个。

对单个子菜单使用扩展部分。如果菜单只有一级子菜单,请考虑使用扩展部分。您可以将它们展开到父项下方,并使用不同的背景颜色来清晰显示。您还可以允许用户同时展开多个子菜单。考虑使用父项右侧的下角或三角形图标来指示子菜单可用。

用重叠菜单替换大型菜单和多个子菜单。如果您需要展开多个子菜单或重新配置大型菜单,请选择重叠方法:不要在父菜单下方或旁边展开子菜单,而是让子菜单替换父菜单。使用这种方法,您必须在除第一级之外的所有面板上都包含一个“返回”链接。对于顶级菜单,请考虑为父项使用直角图标或右箭头。

预打开子菜单。在小屏幕上,如果用户点击打开主菜单并且他们当前所在的页面在子菜单中,请考虑自动打开子菜单,以便用户了解它们相对于其余菜单项的位置。

总结

导航是客户体验的重要组成部分。用户不想进行寻宝游戏,也不想花更多的时间浏览菜单。如果他们无法轻松找到他们需要的东西,他们可能会放弃网站或界面,将他们的注意点转移到其他地方。

精心设计的多级菜单是具有复杂信息架构网站的关键组成部分。希望这些方法在各种用例中为您提供良好的帮助。

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

文章来源:站酷 作者:对啊设计君
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


2021年都过去一大半了,我才知道这个流行趋势,可以这样用!

seo达人


1.图标

对于UI设计师,最早被我们发现的场景应该就是图标了,比如像这种:

图片

也有一些产品有落地使用,比如喜马拉雅:

图片

当然,我觉得结合效果最好的还是韩国这款app——naver的底部图标:

图片

效果非常棒!

图标结合毛玻璃效果是ok的,但是玻璃如果太透明,很容易导致识别度产生问题,所以这也是我们需要特别注意的点。

 

2.卡片

最近逛了很多be上的ui作品,发现有一个界面元素经常结合毛玻璃效果使用,而且还挺好看,这个元素就是卡片,比如什么银行卡啊、会员卡之类的,我们看看效果:

图片

图片

这里需要注意一点,毛玻璃的卡片还是需要和色块去配合使用的,比如后面还有一张普通卡片,或者后面有一些色块,这样效果才会比较理想。

 

3.壁纸

以前我做过手机os,经常需要制作壁纸,做壁纸是最需要时刻关注流行趋势的,而且壁纸可发挥空间非常大,没有太多规则和限制,只需要把好看的效果制作出来就可以了,比如像小米的壁纸就很好的把毛玻璃效果给融进去了:

图片

效果还是非常不错的。

 

4.启动图

因为是流行趋势,所以现在有一些产品的启动图也结合了毛玻璃效果,比如像钉钉啊:

图片

腾讯文档啊:

图片

等等吧,这也是一个非常棒的视觉触点,尤其是在和数字结合使用的时候,简单又出效果,有机会大家可以尝试一下。

 

5.活动图

当然,什么风格那都少不了活动图啊,那效果也是杠杠滴,看下往上的一些优秀组品:

图片

一般都是用在屏幕啊、板子啊等等地方,上面再加点信息,显得画面材质丰富,耐看度也会比较高一些。

视频

除此之外,视频多媒体领域夜也经常使用毛玻璃风格,其中最早还是应该在微软的Fluent Design System兴起的:

图片

图片

现在已经在很多产品宣传视频上都有用到多了。

 

总结

除了以上这些地方,我们平时做一些排版包装,比如封面图啥的:

图片

图片

咔咔一结合,那也是很出效果滴。

特殊材质一会还会流行很长一段时间,大家可以多多尝试,做出自己理想的效果,震惊自己!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》2021年都过去一大半了,我才知道这个流行趋势,可以这样用!

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

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

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

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


搜集了50多款产品,发现启动页原来有这么多做法,远比我想象中多呀!

seo达人


图片

后来自己做启动页的时候,也只放了一个图标,客户说看看能不能用别的方式,然后我就去研究了一下,看看到底启动图有多少种做法。

 

1.图标 

第一种就是我们最常见的,也是启动图成本最小的一种方式,图标直接往上面咔咔一放,就像下面这种:

图片

但并不是所有的都是白色底哦,有一些会使用全屏色块的形式,比如这些:

图片

这样的冲击力会比较强,但也需要注意,颜色别整太刺眼了,那样会看着很难受的。

 

2.solan

有一些平台会宣传自己的使命、价值等等,比如最常见:

知乎: 有问题就会有答案

猫眼: 娱乐看猫眼

糗事百科:快乐你就不孤单

效果图如下:

图片

这其中,有些修了字体,有些做了排版等等,当然他们并不是只放solan,页面下方还是会放上图标。

这种突出价值、使命的方式也是非常不错的,也是启动图常用的一种表现形式。

 

3.插画

接下来的方式是突出插画,用自己的形象延展一些好看的插画,比如咸鱼:

图片

再比如躺平:

图片

再比如唱吧:

图片

等等,这种方式会让品牌更加生动、丰富,一张好看的插图会让用户印象深刻。

 

4.图形

图形是在app设计体系内非常重要的一个元素,比如我们图标本身就是一个图形,像qq这种,让其图形外轮廓与一些效果相互结合:

图片

达到一种冲击较强的效果,以此来凸显图形本身。

再比如,我们还可以利用图标来延展图形,就像uc头条鹿角延展出的图形:

图片

或者像moo music延展出两个圆形,表达星球的含义:

图片

用图形延展做启动图,有一个很重要的优势,那就是设计感很强,让用户感觉很高级很舒服!

 

 5.图片 

还有一种方式就是利用图标来做启动图,一般会使用这种方式的,基本都是产品本身比较注重“图片“这个元素,比如像健身啊、交友啊、设计类产品啊等等,希望通过图片(比如异性图片,高质量作品)来吸引用户。

比如ui中国的启动图:

图片

再比如陌陌的启动图:

图片

都是使用图片作为主要元素制作的!

 

6.3D

现在3d这么火,3d的设计表现形式肯定是少不了的,比如下面这些:

图片

都是用了3d的表现手法,而且我觉得以后可能会有越来越多的产品选择这种形式,来增加冲击力和独特性!

 

总结

当然,不论启动图的侧重点是什么形式,插画也好、图片也好,都还是会放上自己的品牌图标,这是铁律,剩下的都还是有一定的发挥空间。
好了,以上就是看了很多产品之后,关于启动图表现形式的小总结,希望能给大家一点启发和灵感,做出适合自己产品的启动图,么么扔!

 

原文地址:心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》搜集了50多款产品,发现启动页原来有这么多做法,远比我想象中多呀!

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

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

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

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


高级设计师最关键的能力是什么?

seo达人


 
   
 
这张海报最终被弃用了,因为它连客户最基本的显性需求都没有满足。 
 
二、客户的隐性需求通常有下面这些:   
 
1.好看。
即要有吸引力,能够吸引别人的注意,甚至是让他对宣传的内容感兴趣,比如一张食品类的海报,首要的功能就是要让看到他的人,产生想吃的欲望。这个需求客户一般不会说出来,因为这是他们默认的,毋庸置疑的。所以无论你的设计多有创意、有多少细节,先扪心自问,它好看吗?能让你产生兴趣吗?

 

  
 
有人可能又会说,好看和是否吸引人这个太主观了吧,每个人的审美都不一样,萝卜白菜各有所爱。我觉得这句话适用于层级比较接近但是风格或表现手法不一样的作品,相差很悬殊的作品不存在这个问题。 
 
 
2.层级分明
即画面要有主次、要有对比、要有合理的阅读逻辑,不能太乱、太拥挤。这算是比较专业一点的设计需求,很多客户提不出来,但是当你把一件看起来很乱、没有重点的设计给到他们时,他们也能感受到,因为他们其实看过很多同类型的作品,他们也能感受到视觉上的不舒适。

 

 

3.时尚
其实并不是非要与娱乐、服装、运动、年轻人相关的设计才需要时尚,我们可以看到现在各行各业的设计都在变得越来越时尚,比如餐饮业、母婴品牌、饮料品牌,甚至是医药和保健品牌。因为互联网已经全民化,大家的生活方式和审美都发生了很大变化,而且几乎各个行业都会有年轻人参与进去。

 

 

 

所以如果做设计还只是停留在把必要的元素放上去,把重点信息清晰的展现出来,把版面排得干净整洁,把颜色搭配得舒适这些层面,那么离成为一个高级设计师还有一些距离。 设计也需要与时俱进,要不断尝试新的构图、新的字体、新的设计风格、新的排版方式、新的配色等等。

 

 

4.精致的细节
同样,大多数客户都不会明确提出这个需求,因为他们最看重的是大方向、大感觉,而且他们不知道细节应该怎么处理才是好的,但是如果你的作品细节很粗糙他们是能感觉到的,他们能看出你的设计品质感不够,特别是在有对比的情况下时。

 

  
 
所以,在字体选择、字体设计、素材质感、文字行距、色彩搭配、图形轮廓、背景的处理、排版的平衡性和灵活性等方面,我们都要尽量做好一点。
下图是开头列举的游戏海报设计方案二,这个方案增加了视觉图形部分,从而加强了海报的游戏属性和视觉冲击力;内文部分进行了归纳整理,使之更清晰、更易阅读,基本上完成了客户的显性需求,但是仍没有得到客户的认可,因为还有很多隐性的需求没有表现出来。

 

 

下图是调整后的方案三:

 

相比方案二,该方案的做了如下优化:  
 
1、层级关系更加分明、视觉更聚焦。
让主视觉和主题占据更大的空间,以提升画面的视觉冲击力、加强主次对比,核心内容虽然也重要,但是并不能让它成为视觉上的核心,保证他有足够高的可读性就好。

 

 

 

方案二的主视觉部分,人物元素分布在左右两侧,标题在中间,视觉很分散,方案三则把人物移到了中间,标题放在人物下方,视觉变得更集中了。

 

 
 
2、细节更加丰富、精致。
比如主视觉部分元素做了精简和美化,看起来比之前更干净、更好看,“招募令”这几个字重新做了设计,使之变得更突出、更有设计感。

 

  
 
内文方面也重新调整了排版的方式,从上下结构变成了左右结构,使其显得没那么单薄,同时也增加了很多细节,使之看起来更美观、逻辑更清晰、更灵活。

 

 

另外,背景的处理也做了优化,重新找了素材使其变得比之前更丰富、更细腻。

 

 

 
3、整体更美观、更能打动人。
因为主视觉部分更突出,让人很快感受到游戏的氛围、以及清楚具体上什么游戏,还增加了更多游戏元素,所以海报的代入感更强了。
另外配色也变得更舒适、更时尚,再加上各种细节的增加、排版版更加有趣、整洁,所以海报也变得美观了不少。
在答谢礼部分还增加了图片,不仅更有打动力,也比单纯的文字更美观、更丰富。

 

 

– 结语 –  
 
当然,不是所有客户的显性需求和隐性需求都是照我这么划分的,这不重要,重要在是, 我们要知道,便不是客户说啥就是啥,你一定要想得比客户多,要走在客户前面,挖掘出他们的隐性需求,你要知道优秀的设计该具备哪些特质。
 
想成为一个高级设计师,你必须具备正确理解设计需求以及准确表现设计需求的能力。 
 
 
原文链接:站酷
 
作者:葱爷  
 

转载请注明:学UI网》高级设计师最关键的能力是什么?

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

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

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

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




仪表盘(Dashboard)设计的6个要点,都帮你总结好了!

seo达人


仪表盘的3种类型

1、操作型Dashboard

操作仪表盘用于显示当前用户在产品中的状态,显示与时间相关的关键信息。

例如后台数据分析中,操作仪表盘包含:网站的活跃用户、热门社交推荐和每分钟浏览量等数据。

图片

▲ 在谷歌分析的实时仪表盘中,用户能一目了然地查看所有用户、新增用户等一系列数据。操作型仪表盘中通常包含一些简单的条形图、折线图等基本图表。

 

2、分析型Dashboard

分析型仪表盘用于向用户展示关键的数据信息,以数据为中心,并尽可能多地显示相关联的数据图表。

分析型仪表盘应该以关键的数据为中心,并尽量减少图形元素。

图片

▲ 在Manson Yarnell的仪表盘中,更注重数据前后的对比和关联性,并将这种关系通过图表的形式展示出来,通过对比,我们能更容易看到产品的数据情况,比如浏览量是比上个月涨了还是降了、涨了多少。

 

3、平台型Dashboard

平台型仪表盘用于让用户访问社交平台上与帐户相关的控件、工具和分析。

图片

▲ 在YouTube的后台页面中,通过简单的初始视图就能显示用户的最新视频以及每个视频的播放量等数据信息。

在侧边栏,用户还可以访问大量的工具和帐户控件,包括视频管理器、频道状态等,YouTube让操作变得简单,用户能完全控制。

 

仪表盘的6个设计要点

1、确定用户需要什么

首先要了解受众。因为只有了解用户,才能够回答一个关键的问题:用户希望从这个仪表盘中得到什么?

要先明确用户希望在仪表盘上想到看到的几个要点,然后应用F型和Z型阅读模式,构建相应的页面。如果仪表盘上的信息太多,有可能会让访问后台的用户不知所措。

通过将所有的信息和数据合理地组合到一个页面上,再使用适当的留白来平衡画面,为数据创造呼吸空间。

 

2、在仪表盘中添加互动

在仪表板上添加响应性互动,可以让用户自己决定去关注哪些数据。让用户能够控制仪表盘,很大程度上更符合用户差异化的需求。

▲ Cuberto将后台仪表盘设计成可以左右滑动的样式,这个设计有点像可以左右滑动的两块黑板,既可以看到两部分不一样的内容,也能通过滑动展开看到更多的细节内容。

 

3、以关键数据作为先导

有的仪表盘设计得很简洁,用大尺寸且加粗的字体来展示数据,让用户更清晰地明确信息。

图片

▲ 这个Dashboard版式时尚,风格上很简洁,有很多留白和加粗的数据。这样呈现数据可以帮助用户快速看到哪些内容是重要的,节省用户时间。

 

图片

▲ 整个页面通过清晰的图表形式呈现信息,我们能明确看到数据的变化情况,虽然没有使用太多的文字信息,但主次分明的数据做到了很好的透视。

 

4、规划仪表盘信息架构

在设计仪表盘时,考虑信息架构和层级结构,来确定需要哪些内容卡片以及这些卡片要放在什么位置。

图片

▲ 深色背景的使用在组件之间形成很酷的对比,关键数据占据中心位置。左侧导航栏和右侧卡片式信息在设计上遵循了标准的格式塔原则。

 

图片

▲ 这个加密货币仪表盘以账户余额为线索,将最重要的信息放在用户第一眼就能看到的地方,其他信息会根据内容重要程度,合理调整在页面的位置。

 

5、使用多样的视图样式

仪表盘设计也需要变化,通过使用不同的视图布局来保持整体的简洁。

图片

▲ 在这个仪表盘中,用户可以按日期筛选数据、在餐厅之间切换,还能看到关于预订、付款、员工轮班和外部供应商等很多种信息,同时整个页面仍然能保持很干净、简洁。

 

6、使用一致的设计方案

通常仪表盘中包含各种数据图表,设计样式上很难做到统一,但这并不意味着仪表盘不需要考虑视觉美观。

图片

▲ 协调的配色和多样的图表样式让整个页面看起来很有设计感,环形图、饼图和地图的搭配让数据呈现更丰富。

 

图片

▲ 这个仪表盘通过明亮、统一的配色,让数据图表更加清晰、整洁,导航更加明确。

 


图片

慢慢来比较快,希望对你有所帮助!

 

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

作者:Clippp

转载请注明:学UI网》仪表盘(Dashboard)设计的6个要点,都帮你总结好了!

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

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

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

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



日历

链接

个人资料

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

存档