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

幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比,吸引力也一般,它们的视觉效果主要取决于周围的对比度和环境本身,一句话,缺点很多。即便如此,它们并没有很快消失,相反依然活跃在设计的一线。它们能够如此,很大程度上是因为我们对于这些元素已经习以为常了。它们最初出现在 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

相关推荐

  • 用户体验至上 三星Pay与苹果Pay谁更胜一筹?

    文\孟永辉如今,移动支付市场早已过百家争鸣时代,深耕细作成为当下移动支付市场的主旋律,阿里和腾讯便是这主旋律的代表。虽然两大巨鳄占据移动支付市场大部分份额,但终端市场的支付竞争依然存在。苹果与腾讯就因为App端微信赞赏功能抽成的事情闹出矛盾,原因是两家公司对赞赏抽成的比例及支付渠道存在分歧。由此也不难看出,移动支付市场潜力巨大,想要成为移动支付大潮的弄潮儿,领略潮流之下的无限风光不仅需要强大的研发实力,还要有对市场运行趋势和规律的精准把...

    2018-03-30
  • Axure8.0展开收起

    设置菜单展开收起效果,且联动箭头朝上朝下动效。收起状态:箭头朝下,内容收起。展开状态:箭头朝上,内容展开。【步骤】1)设置展开内容与箭头为两个动态面板,命名2)点击事件设在点击菜单栏,同一个事件下控制两个面板状态。内容面板:箭头面板:设置旋转效果。点击菜单栏:点击运行即可。

    2018-03-15
  • 【用户体验】机器人教练:第三季!

    【本文转自:哈尔滨腾达集团驾校】WELCOME TO TENGDA我们的腾达欢迎来到腾达驾校机器人教学活动已经举办了两期,机器人教学俨然已经成为了一种时尚热潮,同时也在学员中树立了良好的口碑,学员反响热烈,有越来越多的学员通过此次活动认识了机器人教练,并且想来体验一下机器人教练的庐山真面目。近一周的科二学习,可累坏了学员们、也累坏了教练。在此对大家说一句:大家辛苦了!经过几天风吹日晒,我们的科二学习已经正式接近尾声,本周最后一个科目的练...

    2018-04-23
  • 文娱寄卖 | 京东用户体验部喊你来填调研问卷啦!

    全文字数:  1800阅读时间:   6分钟嗨,收藏大咖们你们好!我是来自京东集团电子文娱技术研发部的一名用户体验师。刚接触京东文娱寄卖业务的时候,我并不太熟悉邮币卡、书画等市场,只是经常听朋友和亲戚讨论文玩藏品。当与很多邮币卡商、书画商沟通之后,我看到的是20多年的坚守、30年不变的初衷以及因线下市场低迷导致的生活压力。顷刻间我明白了,京东文娱寄卖商城的人文情怀,这其中是对行业的挚爱以及解决用户需求痛点的执着。用户体验部钱币溯源,追忆...

    2018-04-25
  • 【干货】关于交互设计那点事儿

    交互设计作为现在的热门行业之一就业前景和薪资待遇都很好今天我们就来聊聊交互设计那点事儿先来看一下关于交互行业概览和工作机会。金融公司(Bloomberg,CapitalOne)科技公司(Google,Facebook,Microsoft,Tencent)设计公司(NASN,government,NGO)我们所了解以上这些大名鼎鼎的公司,都是需要很多交互设计师的。那么用户体验设计师、交互设计师、UI设计师有什么区别用户体验设计师,就是我们...

    2018-04-21
  • 每个用户体验设计师都要懂的UX移情图

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cnEmpathy,同理心,或者说移情,是UX设计师在为产品进行用户体验设计的时候,最强的能力和工具之一。移情是人类情绪和心智中最重要的功能之一,在很多时候,它是产生情感共鸣和理解的基石,它也是改善用户体验的重要途径。通常我们所说的换位思考,就是移情。借助移情,设计师站在用户的角度来看待问题,了解用户的需求,理解用户的心态,这是改善用户体验的第一步。在...

    2018-02-01
  • Axure实践第二讲

    Axure实践第二讲---如何有效的在工作中引入原型·页面枝干·添枝加叶·画龙点睛在近期的产品需求开发过程中,我们产品小组正式且大量的将原型开发工作投入常规的需求分析工作中,原型的开发对于我们在产品初期的调研、构建都提供了很好的指导。接下来就让本文带你领略:产品与原型的一节课。一、功能结构图(页面枝干)1.切入点是功能结构图(自顶向下)从大的方向上去划分几个大的模块类型,适用于业务功能较为单一且业务逻辑处理流程较为简单,如在做市商系统构...

    2018-03-16
  • 想快速玩转Axure,同时提升产品和交互能力,试试这个秘密武器

    腾讯课堂&起点学院联合打造的给产品经理的Axure课程如果你想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?1、没人监督指导,自学还没到一个周,就想放弃2、按教程操作,却出不了效果,又不知错在哪里3、难的知识内容看着费劲,不会技巧,效率低浪费时间那么这个课程很适合你,2280位同学已经通过这个课程摆脱了Axure困扰。这个课程能带给你什么如果你是产品新人,还没有很好的产品作品,axure实战班里做的原型作品,学到的axu...

    2018-04-30
  • 用户体验必读:将用户需求转成产品需求

    如何挖掘需求,来和大家聊聊如何全面分析收集好的需求,如何判断需求真伪。通常收集到的需求,绝大部分都是“用户需求”,所谓用户需求,是指听到用户说想要的东西,以及用户以为自己想要的东西,而产品经理要做的,就是思考如下三个问题:1、这个需求靠谱么?(需求的判断)2、这个需求真的是需求么?(需求的挖掘)3、怎么向别人讲清楚这个需求?(需求的描述)需求的判断产品经理先要判断这个需求是否靠谱,判断的标准就是需求是否有“价值”,这个价值,具体包括:用...

    2018-03-03
  • 美的苏宁智能+计划解读:供给侧改革用户体验升级

    丁道师ID:dingdaoshi123资深互联网观察家,长期致力于中国互联网产业和企业研究。苏宁与美的空调宣布联合共建用户研究实验室,通过云服务、大数据等技术基础,让用户全方位的参与到美的产品研发、交互、营销等环节中来,未来美的、用户、渠道商共同携手,构建一个可循环的新消费升级商业体系。随着一股实力派冷空气登场,2016年的初冬比以往更冷一些。这几日,北方多地现初雪,大风吹、降温猛。伴随着天气的转凉,围绕“智能空调”为核心的“寒冬保卫战...

    2018-03-10