用户体验:从幽灵按钮到空心元素,它们一直在流行

幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比,吸引力也一般,它们的视觉效果主要取决于周围的对比度和环境本身,一句话,缺点很多。即便如此,它们并没有很快消失,相反依然活跃在设计的一线。它们能够如此,很大程度上是因为我们对于这些元素已经习以为常了。它们最初出现在 UI 界面上的时候,用户所感到的迷惑和混乱,已经逐步消失,我们都知道,它是一个按钮。现在的幽灵按钮和类似的元...

幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比,吸引力也一般,它们的视觉效果主要取决于周围的对比度和环境本身,一句话,缺点很多。即便如此,它们并没有很快消失,相反依然活跃在设计的一线。

它们能够如此,很大程度上是因为我们对于这些元素已经习以为常了。它们最初出现在 UI 界面上的时候,用户所感到的迷惑和混乱,已经逐步消失,我们都知道,它是一个按钮。

现在的幽灵按钮和类似的元素,已经被市场和用户所接受,在商业设计当中并不鲜见,甚至承担着行为召唤的功用,已经足够吸引用户的视线了。

用户体验:从幽灵按钮到空心元素,它们一直在流行

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Ignite Online

Ignite Online 网页中幽灵按钮的用法,在过去是一种非常典型的方式,现在它的使用策略得到了不小的改进,看看下面 Adidas 的 Climazone 页面。

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Climazone by Adidas

在这里,幽灵按钮有了更多的释放控件,不仅有良好的悬停效果,而且通过排版让组件之间关系更加明确、稳固,左侧的圆形元素则强化了设计上的一致性。

基于这几个案例,我们想要用好这一设计趋势,需要考虑下面的几个小点:

  • 确保它的周围要有足够的留白;

  • 确保它本身要足够大;

  • 幽灵按钮和背景要构成足够的对比;

  • 使用适当的图形来承载它;

  • 采用悬停特效,强化视觉上的指引性。

虽然这么说确实有点奇怪,但是幽灵按钮这种线性风格的按钮设计确实是能够提升用户体验的。看看下面 Pholc 这个网站,设计师采用了分屏式的设计,两个巨大但是不那么显著的幽灵按钮分别置于两个区块的中心,通过交叠带来沉浸式的体验。对于用户而言,整个设计是清晰而直观的,两种并行的探索方式,摆在他们面前。

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Pholc

线性艺术的回暖

幽灵按钮带有线性艺术的特征,但是它不是唯一的线性元素。在整个设计当中,运用中空的线性元素隐约成为了一个流行趋势。这种设计趋势所包含的内容是丰富而多样的。比如在标题周围加上一圈纤细的和背景有微妙对比的边框,不仅让整个设计显得更加优雅,而且让标题获得了额外的视觉关注度,就像下方的 Drawlight 和 Domaine Direct 两个网站的设计。

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Drawlight

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Domaine Direct

Feudi di San Gregorio 这个网站的设计也尤其值得注意,虽然同样是使用了细线边框来封装标题,但是它背后的设计团队通过优秀的视觉设计,让标题层拥有了真实的层次感,独特的设计更容易俘获用户的关注。

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Feudi di San Gregorio

只需要在视觉上做微妙的调整,就能达到突出的效果,这一点非常值得学习。接下来,看看 ContraryCon 这个网站。

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ ContraryCon

网站首屏中心的字体部分采用了相对比较夸张的故障效果,周围的边框仿佛将夸张的效果限制在这个范围以内,它巧妙的抑制了故障效果的范畴,又让用户注意到这个区块的关键信息,比如菜单、CTA 和 LOGO。

将空心元素作为装饰使用

当需要装饰的时候,空心的几何元素几乎是这个领域无可比拟的王者。它可以被应用到方方面面,下面的案例就是证明。

丰富背景,让它不显得沉闷单调,就像 Weslaco Economic Development Corp 和 The Artery 这两个网站一样。这两个网站都将网格元素运用到背景当中,看起来很棒。第一个案例当中,网格和背景图片结合到了一起使用,而另一个网站则是相对干净的画布,网格赋予了它良好的触感。

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Weslaco Economic Development Corp

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ The Artery

营造氛围,就像 Intours DMC 这个网站一样。大胆的蓝色方形和左侧的标题相互呼应,让芭蕾舞演员仿佛置身于聚光灯之下。

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Intours DMC

增加装饰和娱乐性,就像 Equal Parts 这个网站一样,各种空心图形当中,加入了笑脸。开发者还加入了一些有趣的功能,你能在网页上拖着这些图形到处溜达。

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Equal Parts

线性艺术

空心元素归根到底就是用线条勾勒出来的图形轮廓,它最终指向了风格微妙而个性十足的线性艺术。接下来我们看看两个颇为突出的案例:Viennese Modernism  和 Vos Besoins by the Buyer。

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Viennese Modernism

Viennese Modernism 这个网站的着陆页和它现代主义的内核保持着高度的一致。网格结构中充满了各式各样的装饰性线条与几何形状。看起来足够艺术,足够现代,也非常精巧。

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Vos Besoins by the Buyer

Vos Besoins 这个网站虽然也是围绕着线条来构建的,但是它和前面的案例非常相似,相对缺少艺术性,而技术性的味道更足。幽灵按钮和大量的互补的细线组合在一起,融入度极高。

如果前面两个现代主义风格的案例让你觉得略有一点不适应的话,那么你可以看看下面两个采用相对更传统手段的网站设计,Arcys 和 Festive Folks,它们同样展示出了线条的美感。

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Arcys

用户体验:从幽灵按钮到空心元素,它们一直在流行

△ Festive Folks

Arcys 借助素描线稿来呈现科技感,而 Festive Folks 则采用手绘图画进行艺术化的表达。

结语

空心元素,尤其是幽灵按钮,需要设计师对于细节和体验有足够的关注才能用好。想要将幽灵按钮和线性元素都充分运用好,你需要做到下面的三件事情:

  • 确定组件的目标:如果它是按钮,那么它应该具备行为召唤的特征,如果它是纯粹的装饰,那么它应该融入场景或者作为焦点。

  • 注意周围的环境:线性元素很容易在信息量密集的页面中迷失,最简单的办法是在它的周围留白。

  • 保持对比:如果做的好,能让微妙的细节成为视觉焦点,通过合理的对比配比,让关键的元素脱颖而出。

来源:优设     作者:Nataly Birch   译者:陈子木

用户体验:从幽灵按钮到空心元素,它们一直在流行

用户体验:从幽灵按钮到空心元素,它们一直在流行

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36829/

(0)
交互精选交互精选
上一篇 2018-05-04
下一篇 2018-05-04

相关推荐

  • 产品经理神器 Axure 安装、激活和汉化教程

    摘要:Axure 是产品经理必会的一个工具,本文详细讲解 Axure 的下载、安装、激活和汉化等流程,方便大家学习 Axure 。作为一个合格的产品经理,几乎没有人不会使用 Axure 的,事实上,熟练使用 Axure 也成为了一个产品经理的基本功。为方便新手产品经理部署 Axure 环境,方便学习和使用,下面我来详细说明涉及部署 Axure 软件的各个步骤。下载关于 Axure 软件的下载,这里不多说,建议大家去官方网站进行下载,不要...

    2018-04-25
  • 做你家孩子,用户体验真差

    静静的读书,岁月不会骗你回复“晚安”,告诉你一个真相上周末去一个前辈家做客,她儿子才八岁。我去的时候他坐在书房写作业。看到我来了,前辈立马把他召唤出来,让他弹钢琴给我看。他缩着脖子在钢琴前坐下,小心翼翼的弹完了整首曲子,然后在前辈的示意下,回房间继续做作业。哪有一点八岁孩子的蓬勃朝气!前辈却非常得意,说:“我这个儿子,非常争气听话。他每周末要学钢琴、学画画,上两个少儿英语培训班。虽然他不乐意,但我不能让他输在起跑线上。”“我知道比起别的...

    2018-04-18
  • 用户体验促进销售,因为专业,所以放心!

    在激烈的市场竞争中,如何突破胶着的态势,是每一个经销商必须面对的考验,过去的数年我们迎来了婴幼儿纪念产品行业大发展,同时伴随着发展也出现了许多行业的问题,如粗制仿冒产品、过度的市场开发、价格战等,在多年的市场摸索中,我们认为只有坚持品质领先、积聚品牌内涵才能构筑核心竞争能力,才能在激烈的竞争中赢得用户长久的信赖。好的品牌形象与产品如何能让用户充分感知呢?增强用户体验是重要的方法。面临市场上如此多的商家和产品,用户的取舍关键因素在哪里呢?...

    2018-04-18
  • 交互设计专业排名最高的大学有哪些

    上周四,康石石在《珠宝设计专业排名最高的大学有哪些》中,为同学们于世界范围(英、比利时、美、意大利、荷兰、挪威、瑞典、德国、爱沙尼亚)内梳理了22所顶级珠宝名校,并在文末许诺阅读量达1000,即为最热情的上墙读者解答艺术留学问题。本周四,康石石兑现承诺,继续为大家推荐货真价实的全球顶级院校,供所有希望出国深造交互设计专业的同学们,提供一份足以信赖的院校清单。写在前面的话交互设计,对于90%同学而言,其实都是一个未知的概念,这直接导致了各...

    2018-02-02
  • 用户体验:网页设计中错误提示的五种设计方法

    每个系统软件在运行的过程中都会出错,可能是用户操作造成的也可能是系统错误。基于这两种情况,如何正确的提示错误信息就显得尤为重要,它直接决定了用户体验的好与坏。一个好的错误提示必备的3条重要法则:清晰地文本提示语放置在正确的位置良好的视觉设计清晰的文本信息1. 错误提示信息应该简明易懂提示信息应该明确的表明发生了什么错误、发生的原因以及解决方法。将你的错误提示信息看作是一次对话,跟用户说人话。确保你的文案是礼貌性的、易于理解的、友好的并且...

    2018-04-07
  • Sketch 49 新增交互原型能力

    看到更新弹窗蛮讶异的,完全没有见到相关消息或Beta版本,官方博客与Medium也毫无动静,太过突然,总之就是这样:“Prototyping: You can now connect Artboards with Links and Hotspot layers to create prototypes of your designs that can be viewed in Sketch Preview,Sketch Cloud,a...

    2018-03-02
  • 骁龙835助力VR交互新体验,自由就要6DOF!

    今天,Pico 在北京举办新品发布会上,发布了旗下全球首款同时实现头部和手部 6DOF 追踪及交互的量产 VR 一体机 Pico Neo——搭载Qualcomm® 骁龙™835 移动 VR 平台,带来更加自由、沉浸的 VR 交互体验。Pico Neo 是 Pico 旗下最新一代 VR 一体机产品,搭载了Qualcomm骁龙835移动VR平台,采用一体式 ID 设计,更轻更透气的全包布材料,配备 3K 高清显示屏,4GB 高速 RAM,6...

    2018-01-30
  • UI设计师最该考虑微交互的设计

    前言什么是微交互?微交互是用户在完成某个小任务时产生的交互体验。例如,解锁手机就是一个微交互,手机调成震动模式时会震一下也是一个微交互。为什么称为“微交互”呢?所谓的“微”其实就是指的产品的细节设计。微交互正在成为产品设计中越来越重要的部分。正如同Charles Eames曾经所说,“细节并不只是细节,它是构建起整个设计的基本元素。”你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘...

    2018-04-20
  • 【用户体验】和路通X1真实详细评测——智能车时代的钥匙

    点击蓝字关注这个神奇的公众号~中国移动和路通智能后视镜的项目已经开展了一段时间,这期间收到了多位客户的体验反馈,今天,小编整理了一些产品体验测评分享给大家,从使用者的角度,让大家对中移动智能后视镜有更加深刻的了解!用户体验和路通X1真实详细评测——智能车时代的钥匙很荣幸从天津蜂享信息技术有限公司,购买了一台和路通X1智能后视镜,并进行装车体验。感谢中国移动对智能出行的重视与执着。目前智能后视镜的市场方兴未艾,市场上智能后视镜产品如雨后春...

    2018-02-05
  • 对话式交互设计

    关注一下,更多精彩等着你1. 轮流表达在对话中我们基于互相来回传递的微妙信号进行轮流表达。如果会话中缺少这种有效的轮流互换,我们就有可能难以保持信息的同步或无法跟上对方的节奏。2. 对话串联在自然语言中,对话的所有元素通常会被连贯地串联起来,包括上下文以及随时间演进的对话方式。这种串联帮助我们跟进会话过程。能够理解欣赏笑话幽默的人都知道,在交流中的每个回合都要注意上下文的关联性,并加强整体的交流。3. 潜在效率人们经常会用简略的口语交流...

    2018-03-21