以下内容由摹客团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。
在Web和移动用户界面中,对内容呈现进行周到的设计,对于扩大产品的实用性和可用性来说意义重大。本文将重点介绍用于视觉板块划分的技巧:分隔符和布局。和小摹一起来看看都有哪些常见的视觉分隔符吧~
什么是视觉分隔符?
视觉分隔符是一种布局元素,有助于将内容分成清晰的组、部分或区域。并且,可以帮助设计师根据典型的视觉感知模式来组织页面,并使布局更清晰,更易于用户理解。
分隔符与其它页面元素在建立坚实的视觉层次结构中发挥了重要作用。例如,用户可以更轻松地定义相同、相似或相关的内容;或每个页面板块之间的从属关系等。
分隔符也有助于塑造产品可用性:在大部分情况下,分隔符有助于创建可点击的可视容器。这对于移动设备界面尤其重要。
视觉分隔符种类
分隔符可根据其外观和功能分为两大类。
根据分隔符外观分类,有五种比较常见的分隔元素:
线条
颜色
负空间
阴影/体积
图片
线条
无论是在印刷品还是数字产品中,线条历来都是用来分隔内容的最佳方法,简单、直观,用户不需过多思考。
另一方面,单纯的线条分隔符似乎看起来有点过于单调。因此,设计师也开始尝试寻找其他分离内容的方法。此外,建议仅在无法以其他方式分