桌面 · 索引加卡片流
左侧索引常驻,右侧卡片三列铺开。长页面滚动时索引不跟着走,随时可以横跳回某一组。
01 / 总览
点开任意一张卡片,看到的是三件事:它解决什么问题、适合哪类访客、从首页过去要几步。四组之间没有交叉——入门路径管第一次到达,账户与安全管身份和找回,设备适配管屏幕和触控,帮助与反馈管问题出口。分组标签在页面上用颜色区分,青色是路径、琥珀是版本、苔绿是设备、陶土是求助,扫一眼就知道自己在哪一层。
02 / G1 · 入门路径
这一组专门给第一次打开的人。三张卡片不用全看,按顺序走一遍,十分钟内就能对整站形成完整的空间感。
从首页第一栏起步,按编号走过六个主栏目,每一步写清页面上会出现什么、大概花多久。第一次来的人不用猜哪个入口更重要。
三十八个常用入口里回访频率最高的一批提到最前面,首屏直接扫到,不必翻到分组深处才找到每天要点的那个。
六个主栏目各管一件事,卡片里写清它们之间的先后关系。从任意页面最多两次点击就能回到首页,走错了也不至于迷路。
03 / G2 · 账户与安全
涉及身份的操作用琥珀色标出,是整份清单里被点得最频繁的一组。三张卡片对应三种处境,互相之间可以直接跳转。
电脑端第二步直接落在登录入口上,中间没有多余的确认页。已经在首页的人,点一次分组、点一次卡片,位置就到了。
新访客在同一个位置完成注册,账号信息填完就进入常用入口,不必先绕回导航再找一次。电脑端同样两步到位。
密码想不起来、收到异常提醒,先看这张:找回要走几步、需要准备哪些信息、大概多久生效,都写在卡片正文里。
04 / G3 · 设备适配
桌面、平板、手机三类屏幕各有各的读法。这一组卡片说明每种排布的用意,看完就知道自己手上那台设备该怎么用。
平板第一次打开时,设备须知和常用人群说明并排成两列:左边看要求,右边看自己属于哪一类,来回对比不用上下翻。
手机上所有内容收成一列,卡片和按钮之间留足触控间距,单手滑动时不容易点到隔壁那一项。
桌面端左侧常驻分组索引、右侧是卡片流。页面往下翻时索引跟着停在那儿,想跳哪一组点一下坐标编号就行。
05 / G4 · 帮助与反馈
这一组卡片直接把人送到三个去处:常见问题、反馈渠道、版本记录。颜色用陶土,是整份清单里最温和的一层。
06 / 两步路径
用电脑办事的人耐心有限。我们把这一段路上的中间页拿掉,只留两个动作:先在首页第一栏停住,再点你要的那张账户卡。
首页第一栏固定放着这张清单,分组编号和卡片一一对应。看到「账户与安全」这一组,就已经站在第二步门口了。
选登录入口卡或注册入口卡,位置就在这一层,不再经过确认页。改版时特意把这段路压短了。
07 / 三种屏幕
排布不是装饰。桌面要能一眼扫完、平板要能左右对照、手机要能单手滑到底,三种屏幕按各自的读法重新组织同样的内容。
桌面 · 索引加卡片流
左侧索引常驻,右侧卡片三列铺开。长页面滚动时索引不跟着走,随时可以横跳回某一组。
平板 · 双列并排
设备须知和人群说明并排成两列,左右对照着看。卡片流也收成两列,横向留白更从容。
手机 · 单列阅读
全部内容收成一列,圆角按钮和卡片之间留出触控间距,拇指滑动不会误触相邻项。
08 / 入口索引
回访时不必重读整页。记住编号,直接在下面这张表里定位它属于哪一组、在你的设备上怎么走。
| 编号 | 入口名称 | 所属分组 | 适用设备 | 到达方式 |
|---|---|---|---|---|
| G1-01 | 首次到达路径 | 入门路径 | 桌面 / 平板 / 手机 | 首页第一栏点到路径卡 |
| G1-02 | 常用入口速览 | 入门路径 | 桌面 / 平板 | 首屏直接可见 |
| G1-03 | 栏目导览 | 入门路径 | 全部设备 | 左侧索引选栏目 |
| G2-01 | 登录入口 | 账户与安全 | 桌面 / 手机 | 两步:首页第一栏 → 登录卡 |
| G2-02 | 注册入口 | 账户与安全 | 桌面 / 手机 | 两步:首页第一栏 → 注册卡 |
| G2-03 | 安全与找回 | 账户与安全 | 全部设备 | 分组内直接点开 |
| G3-01 | 平板双列说明 | 设备适配 | 平板 | 首次打开自动双列 |
| G3-02 | 手机单列阅读 | 设备适配 | 手机 | 首次打开自动单列 |
| G3-03 | 桌面索引 | 设备适配 | 桌面 | 左侧索引常驻可见 |
| G4-02 | 入口反馈 | 帮助与反馈 | 全部设备 | 反馈卡或联络页直达 |
表里先列出回访中最常被翻的十个入口,三十八个入口的完整序列在四组卡片里按编号排好。
09 / 反馈与版本
清单不是一次画完就不动。改动的来源多半很具体:某个入口点不通、某块说明看不懂、平板上两列挤在一起。
上一版定格在 4 月的第 3 版,主要动作是把常用入口的点击次数压下来,平均比旧版少一次。完整的改动序列在更新记录里按时间轴排开。
10 / 使用场景
清单再全,落到自己身上也只有那么两三张卡片用得上。按下面的处境挑,剩下的可以以后再说。
先花几分钟建立空间感,再动手。别急着注册,把主栏目过一遍会更省事。
G1-01 · G1-03 · G2-02
路线已经熟了,只需要最短的那条。直接扫速览,或者记住编号在索引表里定位。
G1-02 · G2-01 · G4-03
从电脑换到平板,或者路上用手机。先确认当前屏幕的排布,再回到自己常用的那张卡。
G3-01 · G3-02 · G3-03
把情况写过来,说清用的什么设备、点的是哪个编号,工作日内会有回复。也可以先去问答页碰碰运气,多半已经有人问过同一件事。