首页 > 网页教程 > 设计分享 > 界面设计解读:UI导航设计不仅仅指的是导航栏

界面设计解读:UI导航设计不仅仅指的是导航栏

时间:2017-10-25    来源:优设网

编者按:其实网页或者App中的导航(Navigation)这个概念远不止我们熟悉的导航栏,而是一个更加广的交互概念:引导用户和产品进行有效的交互,实现用户的目标。本文将详细地介绍界面的导航设计。

一个网页或App产品要想有很好的可用性(usability),需要做好的最基本的一点是导航的设计或者说引导用户的设计。如果用户在使用一个网站或者App的时候找不到自己的处在什么位置或者该怎么去到想要的页面,那么视觉效果再怎么有创意或者抓人眼球都无法弥补产品的缺陷。无论你的产品想满足用户什么需求,让用户知道产品当下的状态和每一步操作之后的结果是对用户最基本的尊重。

导航

首先,让我们弄清楚导航这个概念。最基本的含义就是在我们的现实世界中,当我们从一个地方到另一个地方,需要一些引导和指示。英文中Navigation这个词来源于拉丁文,原意就是:操纵船只在海上航行。所以导航就是能够帮助我们到达目的地的行为。导航的其他意思都是建立在这个原意的基础上。

所以回到UX/UI设计上,导航毫无疑问是可用性的一个要点。它可以定义为一系列引导用户成功地与产品互动并且实现他们目标的动作组合或者技巧组合。 用户带着他们的期望和目标来使用你的网站或者产品,作为设计师的你需要给他们提供实现他们目标的最好操作流程。因此当你的导航设计得非常高效,用户体验能得到极大的提升。

在你刚开始设计你的界面时,就要思考怎么设计一个有效的无缝衔接的导航。通过一些可交互的元素,比如按钮(buttons),开关(switches),链接(links),标签(tabs),条(bas),菜单(menus),区域(fields),让用户在不同的界面之间进行切换。

我们工作室的设计思路是,在界面设计的早期就全面地思考导航的设计,包括界面的布局,页面间如何切换,导航元素的放置和具体功能。并且通过低保真原型来进行验证,保证用户能清楚地理解所有重要的操作。如果跳过这一步,设计将有巨大的风险,其他事情有可能到头来都白干了。所以无论,对用户还是客户还是设计团队来讲,做好这最基础的部分是非常有好处的。

菜单(Menu)

菜单是我们最熟悉的具备导航功能的元素,它向用户展示了界面的所有重要选项。基本上,它可以是用动词命名的一系列指令,用户可以用它来指示系统做出动作,像保存,删除等;它也可以是一个用名词命名的目录,用来代表不同内容的集合。

在界面设计中菜单可以放在不同的位置(侧边菜单,顶部菜单,底部菜单等),拥有不同的交互和视觉形式(下拉菜单,上拉菜单,滑动菜单等)。要想设计好菜单的位置、交互和视觉形式,设计师需要经过全面的用户调查,包括目标用户的预期和要求、接受能力和使用情境。好的菜单设计能让用户更快地实现他们的目标,为用户体验打下坚实的基础。

△ 作者:Tubik

这是一个博客APP的界面设计,采用了侧边菜单以及目录的形式,文字直接说明内容,再加上图标来做为辅助的视觉说明。

△ 作者:Ludmila Shevchenko

这个UI概念设计的例子很好的运用了颜色作为标记,这是一种很有效的导航技巧:每个分类的背景色使用了和目录相同的的颜色,这样目录和内容有着非常强的相关性,用户能自然地将他们联系起来。

行为召唤(CTA)

CTA是用户行为召唤的简称(call to action)。CTA简单来说就是指设计师通过设计,刺激用户去做出一些行动。相应的,CTA元素就是指那些能刺激用户做出行动的交互元素。典型的CTA元素是按钮,标签或者链接。

不管在什么界面,CTA元素都是高效的交互行为的核心,极大的关系到产品的可用性和导航有效性。如果CTA元素的设计不到位的话,用户会产生困惑并且得费劲地去尝试。产品的转化率和用户体验都会大打折扣。这就是为什么CTA元素特别值得注意。无论什么样的界面,它都必须是最瞩目的元素之一,用来直接地告诉用户怎么用这个产品。

△ 作者:Eugene Cameel

一些CTA元素直接用图标形式而没有任何文字说明,但只适用于大家都熟知其含义的图标,比如听筒图标和信封图标。上图这个例子中,这个听筒图标就是这个界面中一个焦点,是一个典型的CTA元素,引导用户快速地实现他们的目标。不需要任何文字说明,用户也能懂点击这个图标的结果。

但是,如果一个图标的含义不是那么明显或者可能造成误解,最好还是加上文字说明。

△ 作者:Tania Bashkatova

上面这个例子是一个关于制作海鲜的网站的着陆页(Landing page)。页面的标题let’s cook还有食材照片是一个CTA,但不是一个可交互的CTA。可交互的CTA是下面这个红色按钮,用户点击这个按钮能看到更多关于不同主题和菜谱的信息。 抓人眼球的颜色强调了页面的视觉层级关系,把用户的注意力拉到关键的交互区域中。

条(Bar)

条(Bar)指的是界面中一组用户可以点击的元素,用来快速与产品进行互动,或者还能让用户知道事件的进程。

标签条(Bar)

最基本的条是标签条(Tab bars),常出现在APP界面的底部,让用户能在APP的不同模块间快速切换。

△ 作者:Sergey Valiukh

载入条(Loading bar)

载入条是用来告知某个动作的进展,用户可以通过时间、百分比或者其他信息了解整个过程。

△ 作者:Sergey Valiukh

进度条(Progress bar)

给用户提供反馈,让他们了解事件的进度,比如说计划的事情完成了多少。

△ 作者:Valentyn Khenkin

按钮(Button)

按钮应该是用得最多的元素了。按钮能让用户在对系统发出指令后得到恰当的反馈。用户通过按钮对系统下命令,跟系统进行交互从而实现他们某个目标,比如发送邮件,买一个东西,下载文件,播放音乐等等这样的指令。按钮之所以那么的常用和对用户那么友好,是因为按钮很好地模仿了人和真实世界里跟物品的交互。

现如今的UI按钮有不计其数的设计样式,能满足很多的设计需求。按钮典型的用途是表明这个地方是可点击,因此需要具有非常高的视觉识别,有着特定的形状还有文字说明它能实现什么动作。设计师通常需要花不少时间好好考虑怎么让按钮很好地融合界面的风格,同时又能在视觉上跳脱出来。

△ 作者:Ernest Asanov

以下是在APP和网页设计中常用的几种具备附加功能的按钮。

汉堡按钮

汉堡按钮隐藏着一个菜单。当用户点击他们的时候,能把菜单调出来。有这个名字是因为它是由三条水平线组成的,看起来就像是汉堡的形式。它是一个典型的交互元素,也是颇具争议的元素。

大多数用户知道点击这个按钮能展开一个菜单,所以不需要额外的说明。汉堡菜单极大地节省了界面的空间,能让界面看起来更简洁,也为其他重要的界面元素腾出了必要的空间。它同时非常适合响应式设计,通过隐藏菜单让整个设计更统一,界面能在不同设备间保持一致。尽管它因为一些缺点而饱受争议,但因为这极大的好处,它目前仍然被广泛的使用。关于这个元素的主要诟病是,对于一些对界面不太熟悉的用户来说,这个比较抽象的设计元素可能会让他们产生困惑。所以,在决定使用汉堡菜单前,应该调查一下目标用户的接受程度和他们的需求。

△ 作者:Ernest Asanov

上图这个概念设计就是用了汉堡按钮把菜单隐藏了起来,从而实现一个简洁的页面布局和视觉效果。

加号按钮(Plus button)

一般通过这个按钮,用户可以实现添加某个内容的动作,比如添加新的联系人,状态,笔记,位置等所有用户在产品里能做的基本动作。有时候,点击这个按钮会出现新的窗口。有时候还会出现一些选项供用户进行选择添加什么内容,这取决于是什么产品。

△ 作者:Sergey Valiukh

上面这个例子就是用户在点击加号按钮后出现了可以选择添加的内容(图片,视频,文字),在选择了之后才会弹出添加内容的窗口。尽管这个操作可能增加一些额外的交互动作,但因为给予了用户选择空间,所以还是对用户很友好的一种设计。

分享按钮(Share Button)

分享按钮顾名思义就是能让用户把内容分享到他们的社交平台账号上。大多数情况下,这个按钮都是用社交平台的Logo作为视觉形象,这样非常易于识别和认知。

开关(Switch)

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

△ 来源:Tubikstudio

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

选择器(Picker)

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

△ 来源:Tubikstudio

相关推荐
网站导航设计、架构与信息的探讨
电子商务网站如何设计高效易用的网站左侧导航树
10个优美精致简约风格的导航菜单欣赏及点评
50款漂亮有趣的导航菜单设计欣赏
如何创建出色的web导航设计?
优秀网站设计之页面导航原则
10个国外创新的垂直网页菜单设计案例赏析
19个简洁风格创意的网页侧边栏菜单设计欣赏
Android应用开发教程:最常见的十大导航设计错误!
移动应用导航设计如何用魅力来征服用户?
20个创意极佳设计独特的网站导航条赏析
APP导航设计:不要在移动端菜单设计犯这些错误
网站导航设计指南:如何做有吸引力的网站?
最新创意网页导航设计趋势和案例大搜罗
底部导航设计、Box元素、竖线元素3种最新网页设计趋势
20个精致漂亮的视频播放器界面设计欣赏及点评
视觉设计:页面构建的审图与细节
15个超棒的无线移动终端UI设计案例赏析
响应式网页设计正成为移动互联网大势所趋
浅谈界面设计中的结构设计
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
国外精彩网页界面设计案例赏析
Photoshop教程:提高IOS设计效率的30个要诀分享
网站专题页面的视觉设计及结构布局要点分享
另眼观看用户界面扁平化设计的不足之外
产品视觉设计与用户心理的有趣现象
10个漂亮实用并附带源码的Web设计教程分享
优秀移动APP应用图标设计指南
在视觉设计中对像素的深度解析
什么是扁平设计?如何创建扁平化设计风格?
色彩情感对用户体验设计的影响
换汤不换药?看应用们如何“为iOS 7设计”
高效UI设计秘笈 Photoshop CC使用技巧图文教程
界面设计教程:如何做好扁平化设计之交互篇
移动应用图标配色诀窍 APP界面配色设计教程

精彩推荐

热门教程