导航与资料库

入口排在拇指边上,找内容不用翻三层

BEPLAY 把常用入口固定在下沿,把资料按编号排成一条清楚的序列。你在哪一层、下一步点哪里,扫一眼就能定下来,不用在菜单里来回折返。

01

六个一级入口,刚好排满底部一行

单手持机时,拇指的活动范围就那么一块。入口一多,最常用的那个反而被挤到边角。BEPLAY导航栏目在移动端只留六个一级入口,是从拇指的活动范围往回推的结果——等宽铺满底部一行,从左到右依次是首页、品牌主张、导航与资料库、更新与说明、知识索引、联系与反馈。

这个顺序跟着使用频率走:先看整体,再看品牌与结构,接着查更新、查具体条目,最后才是找我们说事。切换栏目时页面不重置位置,你从哪一段离开,回来还在哪一段。

左右拖动 · 六个站点

  1. 01 首页 起点,先看清整体走法
  2. 02 品牌主张 团队怎么做事、多久迭代一次
  3. 03 导航与资料库 栏目结构与你正在看的这一层
  4. 04 更新与说明 改了什么、现在跑到哪一版
  5. 05 知识索引 带着问题来,直接落到条目
  6. 06 联系与反馈 说清问题,我们接住
手机底部导航栏放大示意,六个等宽入口排列在屏幕下沿,图标与文字同时显示
入口不做纯图标模式,文字与图形同时给出,第一次用的人也能直接读出来。
02

点开之后,怎么回来

在底部栏点一下当前栏目,上方升起二级面板,把这一栏下面更细的几项一次列清。点空白处、再点一次栏目名,或者按返回键,面板都会落回去,页面停在你离开时的位置。展开与收起都不需要先登录。

  • 展开状态在同一台设备上记住,下次打开还是你离开时的样子。
  • 面板升起时内容区整体上移,正文不会被压在面板底下。
  • 二级项最多铺到两层,再往下就是正文本身,不会出现更深的套娃。

底部栏 · 展开态

导航与资料库

点一下标题即可收起,再点一次重新升起。

底部栏上方升起多层抽屉面板的抽象示意,层与层之间用细线分隔
面板从下沿升起,层级用留白和细线区分,不靠阴影堆叠。
03

资料库分成十二段,每段一个编号

从入门到联系,资料库一共十二个分类,编号从 01 排到 12,顺序是固定的。你记住“术语在 10 号”这种位置就够了,换一栏、换一台设备,看到的编号和名称都一样。

夜间城市俯瞰中的网格状街区纹理,冷色底上有零星暖色光点
十二段像街区一样挨着排开,编号就是门牌,扫一遍就知道自己要拐进哪一格。
  • 01

    入门指引

    第一次来的整体走法,先看哪一栏、怎么回到起点。

  • 02

    导航栏目

    六个一级入口各自的用途,以及切换时页面怎么动。

  • 03

    站内索引

    帮助文档、常见说明与资料库入口集中在一屏之内。

  • 04

    帮助文档

    按操作场景整理的长文,累计 380 余篇。

  • 05

    常见说明

    高频问题的短条目,先给结论,再给理由。

  • 06

    版本更新

    按 V1、V2、V3 三个系列记录每次结构改动。

  • 07

    移动端操作

    手势、滚动、面板展开收起这些机上细节。

  • 08

    换设备与登录

    在新设备上重新登录后,找回常看的那一类。

  • 09

    资料库检索

    按分类编号或关键词两种方式查条目。

  • 10

    术语对照

    160 条常用表述的统一说法,看着不眼生。

  • 11

    服务与支持

    服务范围、响应时段与三组人之间的协作节奏。

  • 12

    联系与反馈

    来信与来电的渠道,以及说清问题要带的信息。

按主题筛选时,编号不会跟着挪动位置——筛掉的只是暂时不看的那些,剩下的还待在自己原来那一段里。

04

一条条目里,先给什么后给什么

资料库累计 1,200 余条内容,逐条读不现实。所以每条都按同一个顺序排:左边是分类编号,接着是标题,再往下是一句摘要,右端挂上所属分类。扫编号和标题就能判断要不要点开,摘要用来确认判断对不对。

  • 04

    底部栏二级面板升起后挡住正文,怎么处理

    帮助文档

    先收起面板,再看内容区是否已避让——两种情况下的处理方式不一样,照着做一般一次就好。

  • 07

    横向栏目轨道用键盘怎么切换

    移动端操作

    焦点落在轨道上后,左右方向键依次移动站点,回车进入当前项,Esc 退回上一层。

  • 08

    换了手机,从哪一步回到上次看的那一类

    换设备与登录

    重新登录后先看索引页首屏,按分类编号找到对应位置,通常三步之内落回原处。

  • 10

    “栏目”和“分类”在站内分别指什么

    术语对照

    两个词各指一层结构,弄清之后再回去看底部栏和资料库,位置关系会清楚很多。

多条平行细线与短文本块构成的抽象排版示意,表现列表扫读的节奏
长列表按段落往下续,滚动时当前阅读位置不会被新内容顶走。
05

换一台设备,接着上次那一类往下看

换了手机或者临时借用别人的设备,最烦的是从头再找一遍。在新设备上重新登录后,先看底部栏,再看索引页首屏——按分类编号排开的入口就在那里,落回原来那一类通常不超过三步。

  1. 底部栏切到知识索引。六个入口在同一行,不用先展开再找。
  2. 看索引页首屏。帮助文档、常见说明与资料库入口按编号列开,你常看的那一类就在里面。
  3. 点开对应条目。正文从头开始,上一台设备上读到哪里不受影响。
两部手机并置的特写,屏幕内容不可辨识,表现跨设备继续浏览
换设备之后,底部栏和索引页的位置关系完全一样,手感不用重新适应。
06

360px 的屏幕、弱网,还有单手那点事

窄屏设备从 360px 起适配。六个入口在最小宽度下仍保持等宽,文字不缩到看不清;资料库的编号阵列从四列收到两列,编号字号保持不变,编号与名称照样左对齐。

  • 文字优先。内容先以文字呈现,配图设为懒加载,网络慢时正文照样读得完整。
  • 触控区够大。每个可点击元素的可触面积不小于 44×44px,拇指不必精确对准。
  • 单手够得到。常用操作都压在屏幕下三分之一,切换栏目不需要换手或拉伸。
  • 图片不顶内容。配图未加载时保留占位高度,补图之后页面不会突然跳动。