功能模块演示

九游j9官网首页进入j9:功能模块演示

按编号把首页从顶部入口区到底部说明区逐块展开,每张图卡标注所在位置与两项操作要点,进入之前先把布局看清楚。

9个首页模块分区
4步界面切换演示
3档方案并列对照
8条常见问题收拢
5块页脚信息分区
模块一览

首页九个分区,逐个对照

图卡按首页从上到下的实际排布编号。编号越小越靠近页面顶部,可以顺着编号浏览,也可以直接挑出自己关心的区域细看。

九游j9官网首页进入j9 功能模块演示之顶部入口导航区 模块 01

顶部入口导航区

导航条把首页与四个频道并列摆开,向下滚动时固定在页面顶端,随时可以切换。

当前所在频道用品牌色下划线标记,右侧固定放一枚主按钮,位置长期不变。

页面最上方固定显示
九游j9官网首页进入j9 功能模块演示之首屏状态提示区 模块 02

首屏状态提示区

首屏左侧是标题、简述与两枚按钮,右侧配一张主视觉图,并压着两枚数据浮层。

两枚按钮分工明确:一枚直接进入首页,另一枚跳到本页的演示分区,路径不绕。

导航下方首屏双栏
九游j9官网首页进入j9 功能模块演示之卖点分区 模块 03

卖点分区

卖点区采用两宽四窄的错位排列,宽卡讲整体服务范围,窄卡讲单项细节,密度有高低。

每张卡片底部带一条文字跳转,点开可继续查看对应说明,不用返回顶部重新找入口。

首屏之后两宽四窄
九游j9官网首页进入j9 功能模块演示之界面效果演示区 模块 04

界面效果演示区

演示区左侧竖排四步操作,右侧大卡展示界面效果,两步之间切换时画面与文字同步更新。

手机端把竖排步骤改成横向可滑动的胶囊条,左右滑动选择步骤,下方画面跟着变化。

卖点区之后四步切换
九游j9官网首页进入j9 功能模块演示之数据与口碑区 模块 05

数据与口碑区

顶部一条数据徽章可横向滚动,下方两张口碑卡与一张纵向数据卡并排摆放,高度参差有致。

所有数值与页面其它位置保持一致,看到相同数字可以互相核对,不会出现两种说法。

演示区之后深色分区
九游j9官网首页进入j9 功能模块演示之方案与权益对照区 模块 06

方案与权益对照区

三档方案横向并列,中间一档放大显示并挂推荐徽章,两侧方案保持同等信息量,便于横向比较。

每档列出适用对象、价格数字与要点条目,卡片右下角附一行说明小字,写清权限范围以哪页为准。

证据区之后三档并列
九游j9官网首页进入j9 功能模块演示之资讯更新列表区 模块 07

资讯更新列表区

桌面端三列两行共六张资讯卡,平板降到两列,手机改成单列,卡片比例保持一致不跳动。

每张卡包含封面、分类标签、标题、两行摘要与时间,整卡可点,标题在悬停时变为品牌色。

方案区之后六张卡片
九游j9官网首页进入j9 功能模块演示之常见问题展开区 模块 08

常见问题展开区

问题以手风琴形式收拢在一张卡片里,同一时间只展开一条,避免长页面被撑得过散。

标题右侧的圆形加号会旋转四十五度,展开状态一眼可辨;再次点击即可收起。

资讯区之后单开模式
九游j9官网首页进入j9 功能模块演示之页脚与说明区 模块 09

页脚与说明区

页脚分成五块:品牌简介、频道入口、分类导航、使用提示与版权行,信息按列靠左对齐。

链接悬停转为品牌色,版权行字号略小、透明度降低,与正文层级拉开距离。

页面最下方五块分区

说明:图卡中的描述对应页面稳定区域,按钮文案与配色以实际打开后的界面为准。若发现某个区域位置与编号不符,多为浏览器缓存导致的旧样式,刷新或清理缓存后即可恢复。

推进步骤

四步把演示内容走完

不必从头读到尾,按下面顺序推进,五分钟左右即可对首页布局形成完整印象。

01

先看页头简述

页头一句说明写清了本页讲什么,看完再决定是从头顺排还是直接跳到感兴趣的模块。

02

按编号对位置

九个编号从上到下对应首页区域,先看编号与区域名,建立一张位置地图。

03

打开对应分区

挑出关心的两三块细看说明文字,记下按钮与入口的大致落点。

04

回到首页核对

进入首页按记下的位置走一遍,若与说明有出入,再回到本页对应图卡复核。

常见疑问

关于功能模块演示的五个问题

下面几条是浏览本页时最常被问到的内容,展开后即可查看说明。

图卡按首页从上到下的实际排布编号,入口导航在最上方,页脚说明在最后。首页分区调整时,本页编号与说明会同步修改,阅读顺序与页面对照顺序保持一致。

桌面端为三列排布,平板降到两列,手机端改为单列竖向排列。图片保持十六比九比例,说明文字不截断,模块编号标签始终停留在图片左上角。

编号对应首页从上往下的区域位置,模块一在顶部,模块九在底部。按编号顺序查看,可以先把整体布局过一遍,再挑出自己关心的区域细看。

先刷新页面并清理浏览器缓存,多数显示差异来自旧缓存。若差异仍然存在,可对照资讯更新区的最新条目核对,那里会记录功能分区的调整说明。

如果只是第一次进入,建议先看模块一与模块二的入口位置,再回到首页操作;如果关心方案差别,可以先看模块六的方案对照,再决定后续查看顺序。

看清九个分区,再进入九游j9首页

入口位置、按钮分工与方案对照都已列明,随时可以回到首页按图索骥。若还想确认进入步骤,入口指引页按顺序写得更细。