交互设计中的导航设计如何成为亮点?

用户头像
上海/UI设计师/5年前/352浏览
交互设计中的导航设计如何成为亮点?

因为导航和页面布局使人们意识到信息的存在,可以帮助用户理解产品功能,更有利于用户更快地获得所需内容。

交互设计中的导航设计如何成为亮点?

如果将应用看作是一个页面集合,那么导航描述的是在页面之间和页面内的移动行为 。它是用户体验的起点,也是用户查找感兴趣的内容和功能的方式。

— Windows 设计基础知识

 

01

导航设计的原则

 

导航元素是互联网设计中的关键构建块,因为导航和页面布局使人们意识到信息的存在,可以帮助用户理解产品功能,更有利于用户更快地获得所需内容。

 

想要设计出优秀的导航设计,就要遵循简单、可见、清晰、一致这几个关键点。因为一旦用户找到了他们需要的页面,他们就不想花时间费力地浏览一页页的文字,所以导航设计要尽可能的做到界面清晰,整洁。

比如在以前,实用工具导航中的项目被嵌入到内容区域中、放在侧边栏中或粘在导航栏中。

 

但是在近年来,很多工具都迁移到了页面的右上角。我们经常看到用户在该区域寻找工具,特别是像日志进去,搜查,和我的账户等等,这样的改变让用户使用起来更加简捷清晰,体验感更好。

 

02

导航元素在互联网交互设计中的应用

 

导航元素在互联网交互设计中应用广泛,逐渐成为系统的知识,甚至已经被归纳成书了。大家可以多查阅学习,构建自己的知识体系。

拿比较有代表性的《Intranetusability guidelines》来说,知识点基本分为:

 

·         内部网导航概览

·表示内部网导航需要工作的行为

·内部用户不是内网专家

·了解用户如何探索和使用内部网

·实施一个 IA 并使用最适合员工的术语

 

·         内部网导航和布局

·简易内网导航设计

·用简单的导航来激励员工

·简易内网导航设计

·导航计划不良的指标

 

·         内联网战略

·与组织有关的问题

·设计相关问题

 

·         信息架构

·基于部门、主题、任务和需求的 IA

·基于任务的主导航的起点

·基于字母表的 IA

·你的投资顾问评估框架

 

·         导航元素

·菜单和链接术语

·一致性和持久性

·打开新的浏览器窗口

 

·         内联网内容

·为网络写作

·文本和页面布局

·语气和风格

·缩略语和首字母

·图像

·帮助和提示

 

 

03

交互设计中导航设计新思路

 

·         设置实用导航。

这是由二级操作和工具组成的,如联系人、订阅、保存、登录、共享、更改视图、打印。这些活动对网站访问者的满意度、用户体验和参与度影响非常大。

通常要把重要功能放在人们所期望和需要的地方。


比如在网购界面中购物车是电子商务网站的核心功能,就要求在实用程序导航中轻易找到购物车图标。

 

 

·         将导航放置在页面不同区域。

信息类网站经常会将实用工具分开:

放页面右上方的一般是全站工具;在内容区域的顶部中心是文章工具;往往被放置在底部导航区域的是订阅工具。在页面的开头和结尾设置的就是分享工具,方便用户轻松转载分享内容。

 

一开始,将实用导航放在四个不同的区域可能会让人感到困惑。但是对一般用户来说,不同用途的工具在页面里相关联的地方找到,反而不容易引起混淆。

 

 

 

04

导航设计中的一点建议

 

·         选择使用带有文本标签的图标。

因为比起文字,人们更喜欢图标,但有时候只有图标,用户不一定能够在第一时间很好地理解。通常来说在图标下面加文字或同时使用文字和图标,可以第一时间传递明确信息。

 

·         不必将关键任务工具隐藏在导航图标下。

因为人们往往不会点击他们不了解的东西,如果这样做了的话人们就根本不会去注意到了。

 

·         把用户的视线引到实用的区域。

使用不同颜色和增添按钮来强调重点都是实践有效的方法。

有一个例子就是在餐厅菜单上的汉堡标签被更改成了有一个边框的选项,使它看起来更像一个按钮,这样一来被吸引住并且选择的人确实变多了。

今天的分享就到这里啦,希望大家都有所收获,后续还会持续更新更多的精彩内容,请持续关注哦~

 


1
举报
|
4
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
空的平台平面和自然景观
牛奶乳液层次平面平铺平面
金色颗粒质地的平面
玄关入门地毯印花图案红地毯
城市园林平面布局航拍
平面男孩喝咖啡插画设计
平面设计 吊牌设计
金色颗粒质地的平面
古风平面仕女与瓷器
金色颗粒质地的平面
平面花卉图案扁平简约无缝拼接插画
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
空的平台平面和自然景观
水蜜桃和李子的平面水果图案
“知识宅急送”外卖,快递,平面,海报,素材,教育
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
平面插画情侣/矢量
课程海报,平面素材
城市园林平面布局航拍
倒计时,海报,平面
城阙凡花
平面插画设计女孩喝咖啡
中国传统纹样创新图案设计
平面书法字手写
金色颗粒质地的平面
你可能喜欢
相关收藏夹
大家都在看
登录注册