1.网站地图&分类体系
下图是bilibili视频网站内各个模块的网站地图(图后附代码)
the sitemap of bilibili
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.box ul {
list-style-type: none;
margin:0px;
padding:0px;
}
.box li {
margin:7px;
padding:5px;
float:left;
width:150px;
}
</style>
<title>B站的网站地图</title>
</head>
<body>
<h1>网站地图</h1>
<h2><a href="https://www.bilibili.com/">bilibili主页</a></h2>
<h2>动画相关</h2>
<table>
<tr>
<td>
<h3><a href="https://www.bilibili.com/v/douga/?spm_id_from=333.45.primary_menu.2">动画</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/v/douga/mad/#/">MAD·AMV</a></li>
<li><a href="https://www.bilibili.com/v/douga/mmd/#/">MMD·3D</a></li>
<li><a href="https://www.bilibili.com/v/douga/voice/#/">短片·手书·配音</a></li>
<li><a href="https://www.bilibili.com/v/douga/other/#/">综合</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<h3><a href="https://bangumi.bilibili.com/22/?spm_id_from=333.5.primary_menu.7">番剧</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/v/anime/serial/#/">连载动画</a></li>
<li><a href="https://www.bilibili.com/v/anime/finish/#/">完结动画</a></li>
<li><a href="https://www.bilibili.com/v/anime/information/#/">资讯</a></li>
<li><a href="https://www.bilibili.com/v/anime/offical/#/">官方延伸</a></li>
<li><a href="https://bangumi.bilibili.com/anime/timeline">新番时间表</a></li>
<li><a href="https://bangumi.bilibili.com/anime/index">番剧索引</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<h3><a href="https://bangumi.bilibili.com/guochuang/">国创</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/v/guochuang/chinese/#/">国产动画</a></li>
<li><a href="https://www.bilibili.com/v/guochuang/original/#/">国产原创相关</a></li>
<li><a href="https://www.bilibili.com/v/guochuang/puppetry/#/">布袋戏</a></li>
<li><a href="https://www.bilibili.com/v/guochuang/information/#/">资讯</a></li>
<li><a href="https://bangumi.bilibili.com/guochuang/timeline">新番时间表</a></li>
<li><a href="https://bangumi.bilibili.com/guochuang/index">国产动画索引</a></li>
</td>
</tr>
</table>
<h2>影视娱乐</h2>
<table>
<tr>
<td>
<h3><a href="https://www.bilibili.com/cinema/?spm_id_from=333.6.primary_menu.81">放映厅</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/documentary/">纪录片</a></li>
<li><a href="https://www.bilibili.com/movie/">电影</a></li>
<li><a href="https://www.bilibili.com/tv/">电视剧</a></li>
</td>
</tr>
<tr>
<td>
<h3><a href="https://www.bilibili.com/v/cinephile/?spm_id_from=333.13.primary_menu.75">影视</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/v/cinephile/cinecism/#/">影视杂谈</a></li>
<li><a href="https://www.bilibili.com/v/cinephile/montage/#/">影视剪辑</a></li>
<li><a href="https://www.bilibili.com/v/cinephile/shortfilm/#/">短片</a></li>
<li><a href="https://www.bilibili.com/v/cinephile/trailer_info/#/">预告·资讯</a></li>
<li><a href="https://www.bilibili.com/v/cinephile/tokusatsu/#/">特摄</a></li>
</td>
</tr>
<tr>
<td>
<h3><a href="https://www.bilibili.com/v/ent/?spm_id_from=333.108.primary_menu.71">娱乐</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/v/ent/variety/#/">综艺</a></li>
<li><a href="https://www.bilibili.com/v/ent/star/#/">明星</a></li>
<li><a href="https://www.bilibili.com/v/ent/korea/#/">Korea相关</a></li>
</td>
</tr>
<tr>
<td>
<h3><a href="https://www.bilibili.com/v/music/?spm_id_from=333.103.primary_menu.21">音乐</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/v/music/original/#/">原创音乐</a></li>
<li><a href="https://www.bilibili.com/v/music/cover/#/">翻唱</a></li>
<li><a href="https://www.bilibili.com/v/music/vocaloid/#/">VOCAL OID·UTAU</a></li>
<li><a href="https://www.bilibili.com/v/music/perform/#/">演奏</a></li>
<li><a href="https://www.bilibili.com/v/music/coordinate/#/">三次元音乐</a></li>
<li><a href="https://www.bilibili.com/v/music/oped/#/">OP/ED/OST</a></li>
<li><a href="https://www.bilibili.com/v/music/collection/#/">音乐选集</a></li>
</td>
</tr>
<tr>
<td>
<h3><a href="https://www.bilibili.com/v/dance/?spm_id_from=333.64.primary_menu.29">舞蹈</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/v/dance/otaku/#/">宅舞</a></li>
<li><a href="https://www.bilibili.com/v/dance/three_d/#/">三次元舞蹈</a></li>
<li><a href="https://www.bilibili.com/v/dance/demo/#/">舞蹈教程</a></li>
</td>
</tr>
<tr>
<td>
<h3><a href="https://www.bilibili.com/v/game/?spm_id_from=333.334.primary_menu.33">游戏</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/v/game/stand_alone/#/">单机游戏</a></li>
<li><a href="https://www.bilibili.com/v/game/esports/#/">电子竞技</a></li>
<li><a href="https://www.bilibili.com/v/game/mobile/#/">手机游戏</a></li>
<li><a href="https://www.bilibili.com/v/game/online/#/">网络游戏</a></li>
<li><a href="https://www.bilibili.com/v/game/board/#/">桌游棋牌</a></li>
<li><a href="https://www.bilibili.com/v/game/gmv/#/">GMV</a></li>
<li><a href="https://www.bilibili.com/v/game/music/#/">音游</a></li>
<li><a href="https://www.bilibili.com/v/game/mugen/#/">Mugen</a></li>
</td>
</tr>
<tr>
<td>
<h3><a href="https://www.bilibili.com/v/kichiku/?spm_id_from=333.75.primary_menu.60">鬼畜</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/v/kichiku/guide/#/">鬼畜调教</a></li>
<li><a href="https://www.bilibili.com/v/kichiku/mad/#/">音MAD</a></li>
<li><a href="https://www.bilibili.com/v/kichiku/manual_vocaloid/#/">人力VOCALOID</a></li>
<li><a href="https://www.bilibili.com/v/kichiku/course/#/">教程演示</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<h3><a href="https://www.bilibili.com/v/ad/ad/?spm_id_from=333.67.primary_menu.70#/">广告</a></h3>
</td>
</tr>
</table>
<h2>生活相关</h2>
<table>
<tr>
<td>
<h3><a href="https://www.bilibili.com/v/life/?spm_id_from=333.95.primary_menu.50">生活</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/v/life/funny/#/">搞笑</a></li>
<li><a href="https://www.bilibili.com/v/life/daily/#/">日常</a></li>
<li><a href="https://www.bilibili.com/v/life/food/#/">美食圈</a></li>
<li><a href="https://www.bilibili.com/v/life/animal/#/">动物圈</a></li>
<li><a href="https://www.bilibili.com/v/life/handmake/#/">手工</a></li>
<li><a href="https://www.bilibili.com/v/life/painting/#/">绘画</a></li>
<li><a href="https://www.bilibili.com/v/life/asmr/#/">ASMR</a></li>
<li><a href="https://www.bilibili.com/v/life/sports/#/">运动</a></li>
<li><a href="https://www.bilibili.com/v/life/other/#/">其他</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<h3><a href="https://www.bilibili.com/v/fashion/?spm_id_from=333.91.primary_menu.65">时尚</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/v/fashion/makeup/">美妆</a></li>
<li><a href="https://www.bilibili.com/v/fashion/clothing/">服饰</a></li>
<li><a href="https://www.bilibili.com/v/fashion/aerobics/">健身</a></li>
<li><a href="https://www.bilibili.com/v/fashion/information/#/">资讯</a></li>
</td>
</tr>
<tr>
<td>
<h3><a href="https://www.bilibili.com/v/technology/?spm_id_from=333.99.primary_menu.42">科技</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/v/technology/fun/#/">趣味科普人文</a></li>
<li><a href="https://www.bilibili.com/v/technology/wild/#/">野生技术协会</a></li>
<li><a href="https://www.bilibili.com/v/technology/speech_course/#/">演讲·公开课</a></li>
<li><a href="https://www.bilibili.com/v/technology/military/#/">星海</a></li>
<li><a href="https://www.bilibili.com/v/technology/digital/#/">数码</a></li>
<li><a href="https://www.bilibili.com/v/technology/mechanical/#/">机械</a></li>
<li><a href="https://www.bilibili.com/v/technology/automobile/#/">汽车</a></li>
</td>
</tr>
</table>
<h2>社区</h2>
<table>
<tr>
<td>
<h3><a href="https://www.bilibili.com/read/home?from=category_0">bilibili文章专栏</a></h3>
<ul class="box">
<li><a href="https://www.bilibili.com/read/douga?from=category_1">动画</a></li>
<li><a href="https://www.bilibili.com/read/game?from=category_2">游戏</a></li>
<li><a href="https://www.bilibili.com/read/cinephile?from=category_1">影视</a></li>
<li><a href="https://www.bilibili.com/read/life?from=category_28">生活</a></li>
<li><a href="https://www.bilibili.com/read/interest?from=category_3">兴趣</a></li>
<li><a href="https://www.bilibili.com/read/lightnovel?from=category_29">轻小说</a></li>
<li><a href="https://www.bilibili.com/read/technology?from=category_16">科技</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<h3><a href="https://www.bilibili.com/square">广场</a></h3>
<ul class="box">
<li><a href="https://show.bilibili.com/platform/home.html">会员购</a></li>
<li><a href="https://activity.bilibili.com/">活动中心</a></li>
<li><a href="https://www.biligame.com/">游戏中心</a></li>
<li><a href="https://h.bilibili.com/">画友</a></li>
<li><a href="https://www.bilibili.com/mango">芒果TV合作专区</a></li>
<li><a href="https://news.bilibili.com/">新闻中心</a></li>
</td>
</tr>
<tr>
<td>
<h3><a href="https://live.bilibili.com/">直播</a></h3>
<ul class="box">
<li><a href="https://live.bilibili.com/pages/area/ent">生活娱乐</a></li>
<li><a href="https://live.bilibili.com/pages/area/draw.html">绘画专区</a></li>
<li><a href="https://live.bilibili.com/single">单机联机</a></li>
<li><a href="https://live.bilibili.com/online">网络游戏</a></li>
<li><a href="https://live.bilibili.com/e-sports">电子竞技</a></li>
<li><a href="https://live.bilibili.com/mobile-game">手游直播</a></li>
<li><a href="https://live.bilibili.com/subject">推荐主播</a></li>
<li><a href="https://live.bilibili.com/round">视频轮播</a></li>
<li><a href="https://live.bilibili.com/all">全部直播</a></li>
</td>
</tr>
<tr>
<td>
<h3><a href="https://bml.bilibili.com/2018/index.html#/">BML</a></h3>
</td>
</tr>
<tr>
<td>
<h3><a href="https://www.bilibili.com/blackroom/ban">小黑屋</a></h3>
</td>
</tr>
</table>
<h2>个性化服务</h2>
<table>
<tr>
<td>
<ul class="box">
<li><em>个人中心</em></li>
<li><em>个人空间</em></li>
<li><em>我的钱包</em></li>
<li><em>投稿管理</em></li>
<li><em>直播中心</em></li>
<li><em>收藏夹</em></li>
<li><em>个人中心</em></li>
<li><em>历史</em></li>
<li><em>消息</em></li>
<li><em>动态</em></li>
</ul>
</td>
</tr>
</table>
<h2>服务</h2>
<table>
<tr>
<td>
<h3>bilibili</h3>
<ul class="box">
<li><a href="https://www.bilibili.com/blackboard/aboutUs.html">关于我们</a></li>
<li><a href="https://www.bilibili.com/blackboard/contact.html">联系我们</a></li>
<li><a href="https://www.bilibili.com/blackboard/join.html">加入我们</a></li>
<li><a href="https://www.bilibili.com/blackboard/friends-links.html">友情链接</a></li>
<li><a href="https://account.bilibili.com/site/ident.html">官方认证</a></li>
<li><a href="http://ir.bilibili.com/phoenix.zhtml?c=254699&p=irol-irhome">Investor Relations</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<h3>传送门</h3>
<ul class="box">
<li><a href="https://www.bilibili.com/blackboard/help.html">帮助中心</a></li>
<li><a href="https://www.bilibili.com/blackboard/x/act_list#/">活动专题页</a></li>
<li><a href="https://www.bilibili.com/blackboard/copyright.html">侵权申诉</a></li>
<li><a href="https://account.bilibili.com/answer/addq/">分院帽计划</a></li>
<li><a href="http://link.acg.tv/forum.php">用户反馈论坛</a></li>
<li><a href="https://www.bilibili.com/blackboard/activity-S1jfy69Jz.html">名人堂</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
2.线框图
bilibili的线框图如下图所示,其中,“各主题视频”指的是右侧目录中涉及的各个视频主题,由于结构相近,故统一画为一个框。
the wireframe of bilibili
3.找寻定位(搜索、浏览、导航)
该部分将以截图形式展示bilibili主页各个部分的功能,由于bilibili的主页过长,而且中间各个主题的浏览结构相近,故将中间部分省略,只截取了头部和尾部
head of bilibili bottom of bilibili
以上即为本次对bilibili视频网站信息架构的分析。
网友评论