米哈社平台特色
米哈社平台特色写在页面结构里:导航浅、卡片直给、标签成墙,手机端有独立的底部导航。这一页把几处值得留意的安排逐条说开。
层级浅,路径短
整站只有一排主导航,四块内容各占一格;首页内部再用快捷入口做一次分流,任何作品最多两次点击就能到达。
层级浅的好处是找东西不必先判断它在哪一层:想看游戏就点游戏,想看漫画就点漫画,不存在需要先想清楚的中间步骤。
对常来的访客来说,固定的位置会变成肌肉记忆,打开首页直接点,几乎不需要思考,这也是这类站点最实用的一点。新访客也受益:不用先研究结构,照着自己的目的点就行。
- 一排主导航
- 最多两次点击
- 位置固定成习惯
卡片信息直给
作品卡片把判断材料全部前置:封面占主要位置,作品名、题材标签、语言与版本写在下方,不点开也能知道大概。
标签用不同颜色区分方向,题材、画风与语言各有一套色彩,扫一眼就能分辨这条信息属于哪一类,辨识成本很低。
卡片密度适中,一屏能看到十来个作品;留白控制得住,既不会显得空,也不至于挤成一片文字。封面比例统一,横向扫过去对齐得整齐,视觉上更省力。
- 封面为主
- 标题与标签在下方
- 标签按方向分色
- 密度适中
标签墙做筛选入口
标签没有藏进筛选面板,而是直接铺在首页下方,按方向分组排列,竖着扫一遍就能把站内范围看个大概。
点标签即筛选,多个标签可以叠加,结果实时更新;这种把筛选项前置的做法,省掉了展开面板与逐项勾选的动作。
标签墙同时承担说明职能:新访客看一遍就知道站内有哪些题材与画风,比读一段介绍文字更直观。标签按使用频率排列,常点的几组基本都在第一屏之内。
- 铺在首页下方
- 支持叠加筛选
- 兼作内容说明
手机端的设计取舍
手机端把主导航收到底部,首页、漫画、回放、选项与关于各占一格,拇指顺着屏幕下沿就能切完四块内容。
作品卡片在窄屏下改为两列,封面与标签保持完整;搜索框留在页面上方,并附上常见的搜索词,不知道看什么的人可以直接借一个方向。
公告在手机上以弹层出现,把近期的更新与使用提示一次讲完,点按钮收起即可,不会在浏览过程中反复出现。竖屏下页面不放大字体,阅读密度与桌面端接近。
- 底部五格导航
- 卡片改双列
- 搜索带热门词
- 公告以弹层出现
排行榜与推荐入口
首页上方的快捷入口把免费游戏、排行榜与神作推荐摆在一起,三个入口对应三种心态:先试试、跟着热度走、直接看好东西。
排行榜的位置随站内情况缓慢变化,变动幅度不大,适合用来了解哪一批作品长期受到关注。
神作推荐更接近一份挑选名单,条目少而集中;不想自己筛标签的人,从这里进最省力。三个入口都摆在首页上方,滚动一屏之内就能全部看到。
- 免费游戏入口
- 排行榜看热度
- 神作推荐看挑选
四块内容共用一套结构
游戏、漫画、写真与动漫共用导航、卡片与详情页结构,切换内容类型时界面不会换一副面孔,记忆负担很小。
共用结构也让搜索能够跨块生效:同一个搜索框既能找游戏,也能找漫画与动漫,输入一次就覆盖全站。
对既玩游戏又看漫画的访客来说,这意味着一个站点解决两件事,不必在两套界面习惯之间来回调整。这是结构统一带来的直接好处,也是最容易被忽略的一处细节。
- 导航共用
- 卡片共用
- 搜索跨块
- 详情页结构一致