扁平化风格下链接组件如何设计

  • A+
所属分类:图像处理培训

对于链接,图南计算机培训班反复说过静态文字和链接文字应使用不同的视觉设计。

  文字常成为链接元件之一,因此文字形态的链接应注意:

  1.1色彩

  静态文字的颜色不应与超链接颜色一样,不可点击项目请避免使用蓝色。由于近年设计的多样化,你也可以使用其他颜色,但必须确保两者有清楚的区隔;若没有特别的理由需要使用其他颜色,蓝色仍然是链接色的最佳选择。

  1.2 底线

  不可点击项目请勿使用底线。文字链接是否需要底线可藉由所在位置决定,例如使用者已习惯将导航栏(Navigation Bar)和侧边列表位置视为链接区域,其上的文字就不需要底线。

扁平化风格下链接组件如何设计
按钮的设计

  2. 始终在可点击的元件上使用适量的视觉暗示

  2.1 按钮

  至少将按钮设计得接近物理按钮,可保留矩形(最好带圆角)以看起来类似传统按钮。在扁平化设计中若不使用较重的效果,按钮也可透过使用阴影和渐变使之看起来能被点击。

  Google的Material Design是flat 2.0的经典范例之一。设计师巧妙使用微妙的阴影和图层以突显元件深度,这种设计方式也被称为“semi flat”,或“flat 2.0”。透过图层概念暗示元件的前后顺序,并借用物理学的隐喻和原理,来帮助使用者理解介面,并解释内容中的视觉层次结构。

  2.2 图片

  点击时图片应有变化或反馈(图片放大、模煳、或角度旋转等效果)。图片范围内的相关元素(例如图片上的图标或文字)应都能被点击。换句话说就是可以增加点击范围,并提高被点击的可能性。除非图片中的选项被明确呈现,应避免一个图片却有多个操作行为。

  2.3 符号(Symbols)和图标(Icon)

  使用图标(Icon)链接时,图标应能被立即识别。除非单一图标够直觉(例如:垃圾桶代表删除),图标最好能与文字链接组合,以指示其可点击性。当没有其他可点击线索存在时,箭头图标可能有助于暗示点击性,但必须谨慎使用,因为它们有时会破坏介面的简单一致。

  3. 提供反馈(Feedback)

  即时、明显的反馈对于使用者经验始终是重要的,在扁平化设计下的使用者更依赖它来确认该元素是否可被点击。大部分即时反馈应在0.1秒内回应,若有任何延迟使用者将开始怀疑刚才是否误点,并可能放弃搜寻其他的潜在链接线索。常见的反馈包括:

  3.1 视觉变化

  透过显眼的视觉变化凸显反馈。

  3.2 进度指标

  点击后给予使用者明显的进度回馈,能帮助其理解系统的各种状态(例如下载、上传、储存等..)。

  3.3 状态更新

  例如用户网购的购物车数量变化,或确认操作完成后的立即反馈。

  3.4 微互动

  微互动在 2016 年于网路间引起广泛的关注,而它亦将会是 2019年的趋势。微互动通常以细微的动画形式出现,在用户体验设计中发挥着至关重要的作用,特别是在行动装置上,我们每次使用应用程式都会接触到数以千计的微互动。微互动透过传达状态和变化、引导注意力到某些区域,以及为动作提供反馈来协助创造难忘的体验。

  4.元素位置与上下文线索

  有时使用者也透过元素所在位置,与周围上下文来确认可点击性。在缺少可点击暗示的环境中,他们会寻找其他线索来协助识别可能的交互元素,这些线索包括:

  4.1 元件放置的位置

  例如页面顶部( Page top) 或导航栏 ( Navigation Bar)

扁平化风格下链接组件如何设计
导航栏要使用正确

  4.2 元件中使用的语言

  例如「立即购买」或「查询」

  4.3 周围元素

  元素本身可能不建议点击,但通常会被放在Link to..类似样式的单词前,或是其他例子如: 联络我们Contact us 或 所在地 Location。

  5. 所在位置的前后对比

  大幅形象图片搭配简约文字的排版,在近年各大官网首页设计频频出现,这种趋势下更须确保图片、文字和元素间需能清晰易读,且能被辨识。

  笔记到此,若一时之间还无法记住,贴心提供了清单帮助设计师快速检视自己的设计有没有问题:

  (1) 可点击线索的设计在整个网站上是一致的。

  (2) 链接元素是显着的,且具有适当的对比度。

  (3) 链接元素位于用户期望的位置。

  (4) 没有虚构的目标,看起来可点击,但实际上无法点击的物件。

  (5) 与同一内容相关联的所有元素(图标、图像、文本)都指向同一页面。

  (6) 当点击和结果动作之间出现时间停滞时,提供足够强烈的反馈。

  结论

  与任何设计趋势一样,平衡和适度才是最佳解。

  扁平化设计能够成为强大的设计美学,但运用不好也可能成为压垮骆驼的最后一根稻草。设计师们得记住,点击的不确定性不仅仅只是用户正面临的问题,也意味着他们很有可能放弃原本来这儿的目的而转往他处。

  请勿因为追求趋势,或认为年轻用户可以更快适应设计不良的介面,而忽略这些易用性设计的细节。除了大方向的视觉一致性外,「微互动」也将会愈来愈流行。虽然它们是应用程式的小功能,甚至有时候还不被列为功能,但善用微互动,它们往往能为扁平化设计提供优秀的用户体验。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: