SEARCH

夸米动态

网站的导航栏怎么设计比较好?

2018-08-10

     相比于直接搜索,用户更喜欢用导航,因为导航是让用户做选择题,而搜索是填空题(导航文案是现有的信息,不需要经过用户大脑的额外加工去进行搜索)。并且他解释道:如果链接的文案与用户寻找的内容相符,那他们直接点击链接的可能性更大。
尽管导航设计一直是一个有争议的话题,仍然有一些比较好的应用规则,是作为用户体验设计师的我们,在进行网站导航设计时值得注意的:
保持(导航结构的)连贯性和一致性;设计清晰易懂的交互方式;设计扁平的导航结构;考虑响应式设备的兼容性。
    一、保持(导航结构)的连贯性和一致性1-1 子页面与落地页
    连贯性的产生也需要经过内容的筛选,不是所有的导航项目都需要展示其子页面链接,亦或者全都不展示;而是要展示那些会让用户误以为不展示其子页面链接,就没有更多内容的导航项目。
    如果子页面链接没有在一级导航结构中展示,那么就要确保其在各个板块的次级导航结构中的使用始终保持一致(不要在这个版块是一级导航结构中展示,而到了另一个版块却是在二级导航结构中展示)。
    同样,所有的一级导航项目要么都是跳转到落地页的链接,要么都是作为二级导航链接的标题。如果一部分是跳转到落地页,另一部分则是二级导航链接的标题,那么用户就会在点击时产生疑惑。
    在视觉设计上,同样应该比较明显的示意处,一级导航项目到底是跳转到落地页的链接?还是二级导航机构的标题、字体的颜色和样式,鼠标指针的变化?
    此外,如果一级导航项目是一个链接,那么就要清楚地示意相关操作,或者通过文案措辞或者通过视觉设计。
    在Fairfax County Public School’s 官网的Full menu栏下,用户可以通过点击“Career”文案来链接到“Career”落地页,或者点击向右的箭头来展开查看次级导航项目的标题。
    这与前面讲的导航机构的一致性也是相符的:一级导航项目要么都调到次级落地页;要么都作为二级导航项目的标题入口。如果两者都有,那么就在样式上作区分。
    二、设计清晰易懂的交互方式2-1 功能的可视化
  视觉元素的变化,可以帮助用户搞清楚网站有哪些可能的交互形式。例如:把关闭状态的按钮滑至开启意味着某个设置改变了,并且知道如何反置。当icon没有改变,那么用户可能就无法预知操作结果。
    三、设计扁平的导航结构
  为了设计一个很好的导航结构,好的网站信息架构和层级才是关键。当网站的信息层级结构图已经出来时,此时就要尽力去设计一个扁平的导航结构,这种扁平的结构要能让用户只需要点击一两次就可以去到最底层的页面。
    尽管扁平的导航结构固然是最理想的,但是仅仅因为短时记忆的局限,而把菜单设计得很简短也是错的。
    菜单的意义是让用户辨识导航栏项目,而不是让用户去回忆(导航栏项目)。
    所以菜单必须设计的简短以方便用户浏览,但是信息必须表达明确。(菜单栏必须设计得简洁明了,表意准确)

丨夸米科技

咨询直线:186-2370-8562  官方网站:www.quamae.com

 

*请认真填写需求信息,我们会在24小时内与您取得联系。

LOGO

地址

重庆市渝北区金开大道西段106号创新科技园区3座4楼

郑州市中原区电厂西路西三环交叉口大学科技园东区15E

联系

400-966-3016
[email protected]
[email protected] 重庆夸米网络科技有限公司 版权所有 备案号:渝ICP备16002041号-2 站点已申请专利保护 盗版必究 法律支持:河南律师服务中心
多一份参考,总有益处
联系夸米,免费获得《策划方案》及报价
高端网站建设 | 响应式网站 | 企业官网 | 营销网站 | UI设计 | 小程序开发 | APP开发 | 品牌设计 | 网络营销推广
业务热线:400-966-3016
QQ咨询
稍后再说