地图导航地图 查看地图导航( 二 )


6. 远程导航
所谓远程导航是指不包含在产品结构中,以独立的方式存在产品内,通常表现为网站地图、索引表(地址选择、品牌选择)等 。
7. 导航的常用UI表现形式
在从结构的层面了解了导航的基本类型之后,顺便给大家提一提导航的外观 。这里并不展开说,大家需要知道的是导航的外观使用遵循的是“同构异型”的准则,什么意思呢?
同样的结构(比如同一组数据集:商品、商品名称、商品价格)可以嵌套进入不同的外观如:卡片式、列表、详情……这个视具体的业务情况、使用场景而定 。
常用的导航外观基本分为以上七种外观即:菜单栏、树状表、顶栏、选项卡、面包屑、文字链接、步骤 。
二、导航小贴士
知道了导航的结构分类和使用场景,那么不妨来给大家一些关于导航本身的小贴士作为原则参考,解决大家在实战中的一些问题 。
1. 导航尽量扁平、保持稳定就算要多一次点击
对于B端产品来说稳定相当重要!因为B端产品对于用户来说使用和学习成本、门槛较大,如果你很频繁地对其路径进行修改调整,用户就会因为产品不符合操作的习惯、心智模型对产品很容易滋生负面情绪,对于产品本身来说这样的伤害是需要尽量避免的 。
2. 最好便于拓展
还是从稳定的方面来说,我们需要保证的是导航的变化不会因为产品的变化而发生很大的变化 。
举个很简单的例子,当我们的产品的功能增多时,尤其是二级导航的项目增多,导致原来如果是横向布局的导航不得不改成纵向布局的导航,这就是所谓的因为产品的变化发生很大的变化 。所以在选择导航布局的时候就需要打下一个很好的基础便于日后的拓展 。
3. 清晰可见,操作易懂
这是站在一个外观和交互共同的层面去看,导航的大小一定要足够,而且其位置一定要是用户认为足够清晰的,确保在视觉反馈的的层面对于用户来说是友好的 。
其次就是所有的可交互区域需要有积极的响应,与内容区要有对比,可以将其称为界面的热情度,这也是一个优秀界面的自我修养 。
4. 导航项可以重复
一个页面中允许出现两个主导航,同一个界面中允许出现两个同样的导航项,并不是说一个项在导航中只能够出现一次,并没有那么死板 。
5. 不要让用户有惊喜
这对于To B 的设计来说十分重要,不同于To C的产品,B端产品的一个重点就是要符合用户的预期,所以我们一定要避免“因为有趣所以这设计”这个思路 。
6. 导航的反馈需要保持一致
界面上面所有的界面编排,所有的组件、所有的控件、所有的模式都是可以找到隐喻的 。比如文字链和带“跳转”的文字链,它代表的隐喻是不一样的,所以我们就需要赋予其不同的外观和交互响应对应户进行反馈 。
7. 导航不一定是有层级关系的
回到最初导航的定义,它的本质是对信息进行分类,让用户快速完成任务,这也是导航的本职工作 。
很多时候不一定要拘泥于这个项目它应该严格存在于哪个层级之中这样的思路进行设计,而是根据用户的需求,如何将这个项目合理的分类于最适合的集合之中 。
8. 按权重布局的三种导航样式
这是一个立足于外观的点,根据大量的案例分析和眼动测试,目前市面上最为常见的按照信息权重布局的导航可分为:横向式、纵向式、纵横式 。由于这部分我们不展开说,所以直接在上图整理了每种布局的特征、优劣势和应用场景 。
三、六步导航设计法
知道了上面的分类和注意事项之后,下面我们用一个具体案例来对导航的交互层面设计进行一个深度体验(因为此内容十分精彩也涉及到机密,所以不在这里做具体展示,以示意的方式来叙述),总共分为六步,看看这是否也是你工作场景中比较头疼的呢 。


特别声明:本站内容均来自网友提供或互联网,仅供参考,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。