发布时间：2021-7-17 分类： 行业资讯
空心元素，特别是鬼按钮，要求设计师对细节和使用体验给予足够的重视。
在许多设计趋势中，鬼按钮和类似的空心元素仍然很薄。他们的转换率似乎不够突出。与其他固定形状相比，吸引力也是一般的。它们的视觉效果主要取决于周围的对比度和环境本身。总之，有许多缺点。尽管如此，它们并没有很快消失，而是在设计中保持活跃。
他们可以做到这一点，很大程度上是因为我们已经习惯了这些元素。当他们第一次出现在UI界面上时，用户感到的困惑和困惑逐渐消失。我们都知道这是一个按钮。
目前的鬼按钮和类似元素已被市场和用户所接受。在商业设计中并不罕见，甚至行为召唤的功能也足以吸引用户的注意力。
△IgniteOnline
IgniteOnline网页中使用ghost按钮是过去非常典型的方式，其使用策略已得到改进。查看下面的Adidas Climazone页面。
△Climazone byAdidas
鬼魂按钮具有更多的释放控制，不仅具有良好的悬停效果，而且通过排版使组件之间的关系更清晰，更稳定，左侧的圆形元素增强了设计的一致性。
基于这几个案例，我们想要使用这种设计趋势，我们需要考虑以下几点：
确保周围有足够的空白区域;确保它足够大;鬼影按钮和背景足以对比;使用适当的图形来携带它;使用悬停效果来增强视觉指导。
虽然这有点奇怪，但鬼按钮的线性按钮设计确实增强了用户体验。看看下面的Pholc代购源码网站。设计师采用分屏设计。两个巨大但不太引人注意的鬼按钮放置在两个块的中央，通过重叠创造身临其境的体验。对于用户而言，整个设计清晰直观，并且在他们面前放置了两种平行的探索方式。
△Pholc
线性艺术的温暖
幽灵按钮具有线性艺术的特征，但它不是唯一的线性元素。在整个设计中，空心线性元件的使用已成为流行趋势。这种设计趋势的内容丰富多彩。例如，在标题周围添加一个细圆圈，与背景形成鲜明对比，不仅使整个设计更加优雅，而且还为标题提供了额外的视觉注意力，就像下面两个代购源码网站Drawlight和Domaine Direct的设计一样。 。
△Drawlight
△DomaineDirect
Feudi di San Gregorio本代购源码网站的设计也特别值得注意。虽然标题也用细线边框封装，但它背后的设计团队拥有良好的视觉设计，使标题层成为真正的分层和独特的设计。更容易吸引用户的注意力。
△Feudi di SanGregorio
它只需要在视觉上巧妙地调整，以获得出色的结果，这是非常值得学习的。接下来，看一下ContraryCon代购源码网站。
△ContraryCon
代购源码网站第一个屏幕中心的字体部分采用了相对夸张的故障效果。周围的边界似乎将夸大的效果限制在这个范围内。它巧妙地抑制了故障影响的范围，并允许用户注意到块的密钥。菜单，CTA和LOGO等信息。
使用空心元素作为装饰
在装饰方面，空心几何元素在这个领域几乎是无与伦比的。它可以应用于所有方面，以下案例就是证明。
丰富背景，使其看起来不显得单调乏味，就像Weslaco经济发展公司和The Artery这两个代购源码网站一样。两个站点都在后台使用网格元素，看起来很棒。在第一种情况下，网格和背景图像组合使用，而另一个代购源码网站是一个相对干净的画布，网格给它一个良好的触摸。
△Weslaco经济发展公司
△TheArtery
营造氛围，就像Intours DMC代购源码网站一样。大胆的蓝色方块和左边的标题相互呼应，让芭蕾舞女演员感觉像是在聚光灯下。
△IntoursDMC
添加装饰和娱乐，如Equal Parts代购源码网站，各种空心图形都会添加微笑。开发人员还添加了一些有趣的功能，您可以在网络上拖动。
△EqualParts
线性艺术
在最后的分析中，空心元素是用线条绘制的图形轮廓，最终指向一种微妙和个性的线性艺术。接下来我们来看两个相当突出的案例：维也纳现代主义和买方的Vos Besoins。
△VienneseModernism
维也纳现代主义的登陆页面与其现代主义核心高度一致。网格结构充满各种装饰线条和几何形状。它看起来很巧妙，足够现代，而且非常复杂。
△Vos Besoins by theBuyer
Vos Besoins这个代购源码网站是围绕线条建立的，但它与之前的案例非常相似，相对缺乏艺术性和技术品味。重影按钮与大量互补细线相结合，可实现极高的集成度。
如果前两种现代主义风格让你感觉有点不舒服，那么你可以看看下面两个传统设计的代购源码网站设计，Arcys和Festive Folks，它们也展示了线条的美感。
△Arcys
△FestiveFolks
Arcys使用草图线艺术来呈现技术感，而节日人使用手绘图纸进行艺术表达。
结论
空心元素，特别是鬼按钮，要求设计师对细节和使用体验给予足够的重视。要充分利用ghost按钮和线性元素，您需要执行以下三项操作：
确定组件的目标：如果它是一个按钮，那么它应该具有行为召唤的特征，如果它是纯粹的装饰，那么它应该被集成到场景中或作为焦点。注意周围环境：在信息密集型页面中容易丢失线性元素。最简单的方法是在它周围留空。保持对比：如果你做得好，你可以将细微的细节作为视觉焦点，并通过合理的比较使关键元素脱颖而出。
原作者: Nataly Birch
译者/编辑:陈子木
翻译地址：https://www.uisdc.com/ghost-buttons-hollow-objects
本文由@陈子木授权，未经作者许可，禁止转载。
该地图来自Pexels，基于CC0协议
