加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

超详细解读:UI导航设计不仅仅指的是导航栏

发布时间:2017-10-25 08:52:23 所属栏目:建站 来源:优设网
导读:副标题#e# 编者按:其实网页或者App中的导航(Navigation)这个概念远不止我们熟悉的导航栏,而是一个更加广的交互概念:引导用户和产品进行有效的交互,实现用户的目标。本文将详细地介绍界面的导航设计。 一个网页或App产品要想有很好的可用性(usability

开关(Switch)

同样,这也是一个用户非常好理解的元素,在界面中用得也非常多。因为它很好地模仿了现实世界里人们熟悉的开关概念。关于这个元素的设计,特别要注意的是开和关的状态在视觉上要差别非常明显。这样能避免用户花时间去研究怎样是开怎样是关。很多种的形式对比或者切换动画都可以解决这个问题,从而设计出很好的用户体验。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 来源:Tubikstudio

这个案例是来自一款闹钟应用Toonie。动画效果让交互变得更流畅和自然,同时整个控件颜色的改变和滑动元素形态的变化让用户能够轻易地识别出开关的状态。如果你想了解整个App的案例研究,可以到来源查看。

选择器(Picker)

也很好理解,就是让用户在一些选项里选出目标选项。通常包含一个可滑动的列表,上面是一列数值,比如小时,分钟,日期,度量,币种等等。通过滑动列表,用户可以选定想要的数值。这个元素广泛地应用在有时间设定这个功能的界面设计上。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 来源:Tubikstudio

复选框(Checkbox)

复选框是可以用来同时标记多个特定的内容。同样的,也是借用了我们在现实世界里熟悉的概念。我们在考试的时候,或者填调查问卷的时候会在选项前的小方框里涂上颜色作为选中的标记。和开关一样,复选框同样用得很多,主要在设置页面设计里。不过,复选框还有另外一个用得比较多的地方,那就是含有任务管理,待办事项,时间记录等类似功能的App或者网页。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Tubik

上面这个是一个待办事项App的概念设计。用户点击复选框后,表示这个内容已经完成。字体变粗的同时颜色发生了改变,这样就非常明显地把这个已完成的任务和其他未完成的任务区分开来。

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读