点外卖时,三秒内找不到‘我的订单’;打开新 App,翻了两页才找到设置图标——这种体验,不是用户笨,是菜单太满。
为什么‘少’反而更有效
手机屏幕就那么大,手指一划就可能误触。把 8 个一级菜单全堆在底部导航栏,不如挑出 3–5 个真正高频的:首页、搜索、消息、个人中心。其余功能藏进‘更多’或侧滑抽屉里,不碍眼,但随时可调。
网页端也一样。很多企业官网顶部导航塞了‘关于我们、产品中心、解决方案、成功案例、新闻动态、加入我们、联系我们’七项,用户根本记不住。换成‘产品、方案、客户、支持’四个词,每个词背后用下拉菜单展开子项,视觉清爽,路径清晰。
几个真实可用的小技巧
• 字体别太花:思源黑体、HarmonyOS Sans 这类无衬线字体,比宋体、华文彩云更适合小字号菜单;
• 颜色克制:主色最多一种,选中态加个底色或下划线就够了,别又变色又加图标还闪动;
• 图标要通用:用放大镜代表搜索,人形图标代表个人,避免自创图形让用户猜。
代码里怎么落地
移动端底部导航常见结构,CSS 控制高度和间距即可,不用 JS 也能稳稳的:
<nav class="bottom-nav">
<a href="/home" class="nav-item active"><i class="icon-home"></i><span>首页</span></a>
<a href="/search" class="nav-item"><i class="icon-search"></i><span>搜索</span></a>
<a href="/messages" class="nav-item"><i class="icon-msg"></i><span>消息</span></a>
<a href="/profile" class="nav-item"><i class="icon-user"></i><span>我</span></a>
</nav>关键不在多写,而在删得准。删掉用户半年都不点一次的‘帮助中心入口’,换成一个悬浮问号按钮,需要时再弹,界面立刻呼吸感十足。
地铁上单手刷资讯 App,老人第一次用智能音箱配套页面——他们不需要炫技的交互动效,只需要一眼看懂、一指点中。菜单不是功能陈列柜,是引路牌。牌够小、字够大、方向够直,路自然就顺了。