常用页面切图的设计与开发
在一些大的前端团队中，前端工程师这个职位会出现一个分支，叫做重构工程师。重构工程师主要负责 HTML 和 CSS 的制作，也就是把设计稿转换成 HTML 和 CSS 代码。重构工作完成以后，把制作好的 HTML 和 CSS 交给 JS 工程师来完成 JS 逻辑的部分。
一、首页的制作
首页整个网站的核心，也是主要功能的入口位置。所以在设计这个页面的时候，我们会把最重要的内容安排进去。这个应用的首页会有搜索功能来直达各个模块，然后会使用网格组件来制作网站的导航，再下面会是一些推荐的文章，从这里可以直达文章详情，或者通过“发现更多”的引导，到达列表页。
二、发现页面的制作
发现页面，实际上就是文章的列表页，这个页面可以通过搜索而来，也可以由首页的“发现更多”或者导航的“发现”标签引导进入。这个页面里会有一个排序的按钮，排序的下面就是一个复杂列表用来呈现文章。此外，还要有列表的加载提示组件，用来提示列表的加载状态。
三、文章详情页的制作
文章详情页就要用到我们之前实现的文本组件的样式了。在这个页面中，我们还会加入相关文章的推荐，所以要用使用到文本的展开功能，在文本的下面再放上推荐文章的列表。
四、个人中心页面的制作
个人中心页面包含了个人信息展示和一些菜单功能，这个页面中用到的组件会比较多，最基本的是要用到菜单组件，包括带开关功能的菜单。另外在菜单中需要做一些操作，就会用到模态框、弹出式菜单等这些组件。
五、结果提示页的制作
最后一个要制作的页面是结果提示页。这个页面是在完成一些比较重要的操作后，对结果进行展示的。比如商品的购买，订单的提交和支付等完成后，就会用单独的页面提示用户操作成功，或者操作失败。我们这个结果提示页会分成操作成功和操作失败两种情况来处理。
结语
这里取的是比较典型的几种页面，每个页面都会用到多个样式组件。我们制作页面的过程就可以发现这些组件之间配合时会出现的问题，可以进一步完善这个 UI 样式库。我们这章制作的最终页面基本就是重构工程师的产出结果，每个页面需要的样式都会堆叠在一起，虽然不是很美观，但 JS 工程师在使用的时候是最方便的。
首页的设计与开发
我们先来制作首页的切图。首页一般是用来展示网站最核心内容的，可以从首页直达各个核心模块。我们要做的这个网站是内容导购类网站，也就是发布一些实用的文章，例如游记、攻略、商品体验报告等，然后在文章中会包含一些推荐的商品，和蚂蜂窝有点类似。在这种网站中，最核心的就是文章，应该从各个角度来让用户找到感兴趣的内容。
这个网页的最顶端是一个搜索框，可以直接使用样式库里的搜索组件，用户可以通过关键字搜索自己需要的内容。接下来是各种文章的分类，用户能通过分类直达各个分类对应的文章列表。再下面是猜你喜欢，这个地方的内容通常根据用户以前浏览的内容做的相关推荐，或者是官方想重点推广的文章，从这个模块的“查看更多”可以到达列表页，也可以点击每一个文章直达文章详情页。最底下是一个公共的网站导航条，这里我们放三个内容，“首页”就是我们这个页面，“发现”是官方推荐的文章列表页，“我的”栏目就是个人中心。
文件的建立
我们把这些页面相关的文件还放在原来“my-ui”这个项目里，在项目根目录下建立page目录，然后再建立 /page/index.html 作为这个首页的HTML页面，建立 /page/index.css 作为首页的 CSS 文件。
这个文件里引入了两个样式，一个是/dist目录下的样式库文件，当切图制作完成后，交付给 JS 工程师的时候一定要说明项目依赖外部文件的位置，至于用哪种方式引入依赖，就和 JS 的技术栈有关了。在 HTML 文件还要注意一个地方，就是给 body 元素加上了“page-index”这个类，用来隔离不同页面间的样式，这个页面自定义的样式里都用这个类限制住，这样就不会产生样式冲突了。
这个页面还需要的另外一个样式就是 index.css，用来放页面里比较个性化的样式，也可以是对 UI 样式库的覆盖。
导航条的实现
<!-- 底部导航条 -->
<div class="tt-navbar">
<a class="navbar-item active">
<i class="fa fa-home icon"></i>
<span class="name">首页</span>
</a>
<a class="navbar-item" href="./list.html">
<i class="fa fa-search icon"></i>
<span class="name">发现</span>
</a>
<a class="navbar-item" href="./mine.html">
<i class="fa fa-user-o icon"></i>
<span class="name">我的</span>
</a>
</div>
搜索组件的实现
<div class="tt-content">
<!-- 带suggest的搜索框 -->
<div class="tt-search">
<!-- 搜索中的状态 -->
<!-- <div class="tt-search on-focus"> -->
<!-- 搜索框 -->
<form class="tt-search-form" action="#">
<div class="tt-search-input-wrap">
<i class="fa fa-search tt-search-icon"></i>
<input type="text" class="tt-search-input" placeholder="搜索" autocomplete="off" required/>
<i class="fa fa-close tt-search-clear"></i>
</div>
<span class="tt-search-cancel">取消</span>
</form>
<!-- 搜索建议 -->
<ul class="tt-search-suggest">
<li class="tt-suggest-item">手机</li>
<li class="tt-suggest-item">iPhone XS Max</li>
<li class="tt-suggest-item">华为P30</li>
<li class="tt-suggest-item">小米 MIX3</li>
<li class="tt-suggest-item">诺基亚1110</li>
</ul>
</div>
</div>
这段代码放上以后，搜索框的样式就出来了。这里要注意下，我们在制作切图的时候，会把有状态切换的组件的切换方式都给出来，这样 JS 工程师才知道这个组件样式怎么转换，这里我们就用下面的代码标出了搜索组件在搜索状态中的 class 结构：
分类导航的实现
<!-- 文章分类 -->
<div class="tt-grid tt-grid-4 no-border yp-category">
<a href="./list.html" class="tt-grid-item item-1">
<i class="fa fa-female tt-grid-icon"></i>
<p class="tt-grid-label">女装</p>
</a>
<a href="./list.html" class="tt-grid-item item-2">
<i class="fa fa-book tt-grid-icon"></i>
<p class="tt-grid-label">图书</p>
</a>
<a href="./list.html" class="tt-grid-item item-3">
<i class="fa fa-briefcase tt-grid-icon"></i>
<p class="tt-grid-label">箱包</p>
</a>
<a href="./list.html" class="tt-grid-item item-4">
<i class="fa fa-diamond tt-grid-icon"></i>
<p class="tt-grid-label">珠宝首饰</p>
</a>
<a href="./list.html" class="tt-grid-item item-5">
<i class="fa fa-soccer-ball-o tt-grid-icon"></i>
<p class="tt-grid-label">体育用品</p>
</a>
<a href="./list.html" class="tt-grid-item item-6">
<i class="fa fa-tv tt-grid-icon"></i>
<p class="tt-grid-label">电视</p>
</a>
<a href="./list.html" class="tt-grid-item item-7">
<i class="fa fa-mobile-phone tt-grid-icon"></i>
<p class="tt-grid-label">手机</p>
</a>
<a href="./list.html" class="tt-grid-item item-8">
<i class="fa fa-print tt-grid-icon"></i>
<p class="tt-grid-label">打印设备</p>
</a>
</div>
猜你喜欢列表的实现
="./article.html" class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="旅行必不可少">
</div>
<div class="item-content-wrap">
<h1 class="item-title">大美新疆 | 玩遍这片大好山河，这些装备必不可少</h1>
<p class="item-desc">发布时间：2019-8-18</p>
<p class="item-desc">阅读1923次 | 收藏398次</p>
</div>
</a>
<a href="./article.html" class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="旅行必不可少">
</div>
<div class="item-content-wrap">
<h1 class="item-title">大美新疆 | 玩遍这片大好山河，这些装备必不可少</h1>
<p class="item-desc">发布时间：2019-8-18</p>
<p class="item-desc">阅读1923次 | 收藏398次</p>
</div>
</a>
</div>
</div>
这里面我们用到了一张图片，可以在page下建立img目录，然后把图片放进新建的目录里。
上面的 HMTL 中在 tt-panel-title 元素里放了一个“查看更多”的链接，但是 Panel 组件里没有实现“查看更多”这个功能，这又是一个比较常见的使用场景，所以我们准备在样式库中源码中加入这个样式。首先在 /src/content.css 的 tt-panel-title 样式的下面添加上下列代码：
/* 标题导航 */
.tt-content .tt-panel-title > .tt-panel-link{
float: right;
margin-right: 1rem;
color: #aaa;
}
因为之前已经发过一次版，所以在修改源文件的时候，要把组件升级一个版本。我们先在 README.md 文件中加入变更记录，最后这一章完结的时候再重新发一个版本。在 README.md 文件中追加下面的说明：
列表页的设计与开发
列表页，这个页面的作用就是对同一类的多个信息进行展示。以我们这个网站用到的列表页为例，他就是从某一个角度来展示一系列文章用的。这个角度可以是通过关键词搜索的相关文章，也可能是官方推荐的一系列文章，还可以是某个专题分类下的文章。虽然划分的角度不一样，但对于列表页来说需要做的是没有太大差异的。
排序按钮的实现
<!-- 排序功能区 -->
<div class="sort-wrap">
<a class="tt-btn sort-btn active">
收藏次数
<!-- 没有排序时使用的图标 -->
<!-- <i class="fa fa-sort"></i> -->
<!-- 升序排列时使用的图标 -->
<!-- <i class="fa fa-sort-asc"></i> -->
<!-- 降序排列时使用的图标 -->
<i class="fa fa-sort-desc"></i>
</a>
<a class="tt-btn sort-btn">
发布时间
<i class="fa fa-sort"></i>
</a>
</div>
这里的结构实际上就是一个容器里装了两个按钮，每个按钮里有个表示排序方式的图标。这里在第一个按钮里把三种排序方式要用到的图标都给了出来，这样 JS 工程师在修改按钮状态的时候，就会更方便了。另外最外层会有一个 active 类，用来控制按钮是不是在激活状态。这些样式也都比较简单了，应该可以直接写代码了：
/* 排序按钮的容器 */
.page-list .sort-wrap{
display: flex;
}
/* 排序按钮 */
.page-list .sort-wrap > .sort-btn{
flex: 1;
border-radius: 0;
border: none;
border-top: 1px solid #ddd;
background: #fff;
}
/* 激活状态下的排序按钮 */
.page-list .sort-wrap > .sort-btn.active{
color: #09bb07;
}
.page-list .sort-wrap > .sort-btn + .sort-btn{
border-left: 1px solid #ddd;
}
列表的实现
这里的列表会用到复杂列表组件，和首页里的复杂列表是一样的。不过在列表页，是会有分页的，所以要在这个列表里加上加载相关的提示信息。这里我们就还会用到加载提示的组件，包括加载中提示、下拉加载更多提示和没有更多数据的提示。这里把两种组件的代码直接放在刚完成的排序功能区的后面即可，在 tt-content 的最后添加下列代码
<!-- 列表内容 -->
<div class="tt-panel-body no-padding">
<div class="tt-loading-inline">
<span class="tt-loading-info">
<i class="fa fa-circle-o-notch fa-spin tt-loading-icon"></i>
用力加载中
</span>
</div>
<!-- 文章列表 -->
<div class="tt-list">
<a href="./article.html" class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="旅行必不可少">
</div>
<div class="item-content-wrap">
<h1 class="item-title">大美新疆 | 玩遍这片大好山河，这些装备必不可少</h1>
<p class="item-desc">发布时间：2019-8-18</p>
<p class="item-desc">阅读1923次 | 收藏398次</p>
</div>
</a>
<a href="./article.html" class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="旅行必不可少">
</div>
<div class="item-content-wrap">
<h1 class="item-title">大美新疆 | 玩遍这片大好山河，这些装备必不可少</h1>
<p class="item-desc">发布时间：2019-8-18</p>
<p class="item-desc">阅读1923次 | 收藏398次</p>
</div>
</a>
<a href="./article.html" class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="旅行必不可少">
</div>
<div class="item-content-wrap">
<h1 class="item-title">大美新疆 | 玩遍这片大好山河，这些装备必不可少</h1>
<p class="item-desc">发布时间：2019-8-18</p>
<p class="item-desc">阅读1923次 | 收藏398次</p>
</div>
</a>
</div>
<div class="tt-loading-inline">
<span class="tt-loading-info">
上拉加载更多
<i class="fa fa-long-arrow-up fa-vibrate-y tt-loading-icon"></i>
</span>
</div>
<div class="tt-loading-inline">
<span class="tt-loading-info">
我可是有底线的
</span>
</div>
</div>
文章页的设计与开发
这个页面包括两部分内容，一部分是文章的内容区，可以直接使用文本组件来实现；另一部分是相关文章的推荐，可以和主页里的“猜你喜欢”一样，使用复杂列表来实现。在详情页里，通常不再使用导航条，所以这个页面也就去掉了底部导航的部分。
文章详情的实现
<!-- 文章详情 -->
<div class="tt-article fold">
<!-- 可以去掉fold类，文章就会展开，展开按钮会消失 -->
<!-- <div class="tt-article"> -->
<h1 class="tt-article-title">大美新疆 | 玩遍这片大好山河，这些装备必不可少</h1>
<p class="tt-article-info">
作者：Rosen
<!-- 喜欢功能的操作 -->
<span class="like">
<!-- 点击喜欢后，在.like上添加“active”类即可 -->
<!-- <span class="like active"> -->
<i class="fa fa-heart like-icon"></i>
<i class="fa fa-heart-o dislike-icon"></i>
喜欢
</span>
</p>
<div class="tt-article-content">
<h2 class="tt-article-subtitle">大美新疆</h2>
<p class="tt-article-paragraph">新疆维吾尔自治区，简称新疆，位于中国西北边陲，首府乌鲁木齐，是中国五个少数民族自治区之一，也是中国陆地面积最大的省级行政区，面积166万平方公里，占中国国土总面积六分之一。</p>
<img class="tt-article-img" src="img/list-img.jpg" alt="测试图片">
<p class="tt-article-paragraph">全疆共有景点一千一百余处，居全国首位，在这广阔大地上，冰川雪岭与戈壁瀚海共生，高原山水景观蕴含在天山、阿尔泰山、昆仑山等世界名山之中，有着众多的雪域冰川、叠嶂雄峰、飞泉瀑布、珍奇异兽。这里有海拔8600米的世界第二高峰，又有低于海平面154米的中国最低洼地，既有一泻千里的河流、万顷碧波的草原，又有光怪陆离的戈壁幻境，神秘莫测的沙漠奇观。保存完好的原始动植物种群，更显出得天独厚的大自然的本色。</p>
<p class="tt-article-paragraph">2017年的八月，我们两车六人耗时一个月，完成了对北疆的探寻。现在分享一下自驾新疆必不可少的装备。</p>
<h2 class="tt-article-subtitle">衣物篇</h2>
<p class="tt-article-paragraph">不要以为八月的新疆在一个炎热的夏季，这里昼夜温差很大，在晚上气温会很低。但是也别忘记带上短袖，中午的时候阳光还是很充足，气温升高的很快。特别要带好防晒用品，这里的紫外线强度大，一定要做好防晒的工作。还要带好补水去火的东西，新疆还是一个比较干燥的地方。对于不同的地方八月新疆旅游适合穿什么衣服也是不一样的。</p>
<p class="tt-article-paragraph">新疆局部地区还是挺冷的，所以去新疆要准备的衣物很多，除了夏天的要准备，拍照穿的美美的衣服也要准备。防晒衣啊，披肩啊，还有要带上抗冻的冲锋衣和厚一些的鞋子。</p>
<p class="tt-article-paragraph">……</p>
</div>
<div class="tt-article-unfold-btn" id="js-unfold">
<i class="fa fa-angle-double-down fa-vibrate-y"></i>
</div>
</div>
这个文章详情里我们也使用了文本组件的折叠功能，以便可以更容易看到后面推荐的文章和商品。在存放文章信息的 tt- article-info 元素中，放入了一个类为“like”的元素，这个元素就是“喜欢”功能的 HMTL。在这个元素里，我们使用“active”类来控制元素是不是在激活状态。这里也会用到两个图标，我们可以像上一节那样直接给出几个图标的 HTML 结构，但这里我们准备用 CSS 控制两个图标的显示或隐藏。
相关推荐的实现
<div class="tt-panel">
<div class="tt-panel-title">相关推荐</div>
<div class="tt-panel-body no-padding">
<div class="tt-list">
<a href="./article.html" class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="旅行必不可少">
</div>
<div class="item-content-wrap">
<h1 class="item-title">大美新疆 | 玩遍这片大好山河，这些装备必不可少</h1>
<p class="item-desc">发布时间：2019-8-18</p>
<p class="item-desc">阅读1923次 | 收藏398次</p>
</div>
</a>
<a href="./article.html" class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="旅行必不可少">
</div>
<div class="item-content-wrap">
<h1 class="item-title">大美新疆 | 玩遍这片大好山河，这些装备必不可少</h1>
<p class="item-desc">发布时间：2019-8-18</p>
<p class="item-desc">阅读1923次 | 收藏398次</p>
</div>
</a>
<a href="./article.html" class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="旅行必不可少">
</div>
<div class="item-content-wrap">
<h1 class="item-title">大美新疆 | 玩遍这片大好山河，这些装备必不可少</h1>
<p class="item-desc">发布时间：2019-8-18</p>
<p class="item-desc">阅读1923次 | 收藏398次</p>
</div>
</a>
</div>
</div>
</div>
个人中心页面的设计与开发
个人中心的页面，这个页面通常是用来展示用户信息，同时存放一些非核心功能。
在最上面是用户的个人信息，里面还包含了关注和收藏两个内容。关注和收藏都是对应页面的入口，可以跳转到对应的列表页。再下面是一些菜单，可以引导到对应的页面或者做相关的操作。页面的最底部就是一个已经用过好几次的导航栏了。
另外这个页面中还有两个隐藏的样式，“我的推广码” 这个菜单点击后会直接在当页弹出对应的二维码图片，方便用户获取
“接收新消息” 这个开关在关闭的时候，会使用弹出提示菜单让用户再次确认是否关闭，以避免误触
用户信息的实现
<!-- 用户个人信息 -->
<div class="tt-panel-body user">
<img class="portrait" src="./img/list-img.jpg" alt="用户头像">
<div class="info">
<h2 class="nick-name">Rosen</h2>
<p class="detail">
<a href="#" class="detail-item">关注 99999</a>
<a href="#" class="detail-item">收藏 9999万</a>
</p>
</div>
</div>
/* 用户信息 */
.page-mine .user{
display: flex;
padding: 1rem .8rem;
}
/* 头像 */
.page-mine .user > .portrait{
display: block;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
}
/* 用户信息 */
.page-mine .user > .info{
flex: 1;
display: flex;
justify-content: space-around;
flex-direction: column;
margin-left: 1rem;
}
/* 昵称 */
.page-mine .user > .info > .nick-name{
font-size: 1.2rem;
font-weight: normal;
}
/* 关注和收藏 */
.page-mine .user .detail-item{
color: #aaa;
font-size: .7rem;
}
.page-mine .user .detail-item + .detail-item{
margin-left: .5rem;
padding-left: .5rem;
border-left: 1px solid #ddd;
}
菜单部分的实现
<!-- 菜单区域 -->
<div class="tt-panel-body no-padding">
<div class="tt-menu">
<a href="#" class="tt-menu-item">
<p class="tt-menu-name">我的钱包</p>
<i class="fa fa-chevron-right tt-menu-icon"></i>
</a>
<a href="#" class="tt-menu-item">
<p class="tt-menu-name">我的文章</p>
<i class="fa fa-chevron-right tt-menu-icon"></i>
</a>
<a href="#" class="tt-menu-item">
<p class="tt-menu-name">访问统计</p>
<i class="fa fa-chevron-right tt-menu-icon"></i>
</a>
<a class="tt-menu-item">
<p class="tt-menu-name">我的推广码</p>
<i class="fa fa-qrcode tt-menu-value"></i>
<i class="fa fa-chevron-right tt-menu-icon"></i>
</a>
<a class="tt-menu-item">
<p class="tt-menu-name">接收新消息</p>
<input class="tt-switch" type="checkbox" checked>
</a>
</div>
</div>
<div class="tt-panel-body no-padding">
<div class="tt-menu">
<a href="#" class="tt-menu-item">
<p class="tt-menu-name">设置</p>
<i class="fa fa-chevron-right tt-menu-icon"></i>
</a>
<a href="#" class="tt-menu-item">
<p class="tt-menu-name">意见反馈</p>
<i class="fa fa-chevron-right tt-menu-icon"></i>
</a>
</div>
</div>
<div class="tt-panel-body no-padding">
<span class="tt-btn tt-btn-large logout-btn">退出登录</span>
</div>
我的推广码弹窗的实现
<!-- 显示我的推广二维码 -->
<div class="tt-modal">
<!-- 需要打开二维码时，在tt-modal上添加“show”这个类即可 -->
<!-- <div class="tt-modal show"> -->
<div class="tt-mask"></div>
<div class="tt-modal-wrap">
<div class="tt-modal-body no-padding">
<img class="tt-modal-img" src="./img/qrcode.jpg" alt="">
</div>
<i class="fa fa-close tt-modal-close"></i>
</div>
</div>
操作确认的实现
<!-- 确认关闭新消息提醒 -->
<div class="tt-action-sheet">
<!-- 需要打开弹窗时，添加“show”这个类即可 -->
<!-- <div class="tt-action-sheet show"> -->
<div class="tt-mask"></div>
<div class="tt-action-sheet-wrap">
<div class="tt-action-sheet-header">
<h1 class="tt-action-sheet-title">关闭该功能后，您将不再收到新消息的通知，确定要这样做吗？</h1>
</div>
<div class="tt-action-sheet-body">
<a class="tt-action-sheet-menu">关闭新消息提醒</a>
</div>
<div class="tt-action-sheet-footer">
<a class="tt-action-sheet-menu">取消</a>
</div>
</div>
</div>
结果提示页的设计与开发
结果提示的实现
这个页面有两种结果提示信息，默认情况下我们使用成功提示。如果在外层容器上添加 “result-error” 这个类，就会变成出错的结果提示。
<div class="tt-panel-body">
<i class="fa fa-check result-icon"></i>
<p class="result-info">提交成功</p>
<p class="result-detail">您的反馈已提交，感谢支持！</p>
<a class="tt-btn result-btn">完成</a>
</div>
<div class="tt-panel-body result-error">
<i class="fa fa-exclamation result-icon"></i>
<p class="result-info">提交失败</p>
<p class="result-detail">请返回重试！</p>
<a class="tt-btn result-btn">返回</a>
</div>
/* 结果提示图标 */
.page-result .result-icon{
display: block;
margin: 2rem auto 1rem;
width: 4rem;
height: 4rem;
line-height: 4rem;
font-size: 2.5rem;
background: #09BB07;
border-radius: 50%;
color: #fff;
}
/* 操作结果 */
.page-result .result-info{
text-align: center;
font-size: 1rem;
color: #555;
}
/* 结果详细信息 */
.page-result .result-detail{
margin-top: .5rem;
text-align: center;
font-size: .8rem;
color: #aaa;
}
/* 跳转按钮 */
.page-result .result-btn{
display: block;
width: 5rem;
margin: 1rem auto;
padding: .3rem 0;
color: #09BB07;
border-color: #09BB07;
}
下来再实现操作失败的样式。操作失败的提示中，图标颜色变成了红色，最后的操作按钮变成了灰色，所以直接修改这两个样式就可以了。
总结
首页的设计与开发
首页是一个网站的门面，通常是核心功能的展示区或者入口。在一个项目里，改动最频繁的应该就是首页了，开发和设计人员会变着法的来提高首页的转化率。在我们演示项目的首页中，放置了三个入口，分别是搜索、分类入口和推荐入口。这个页面中使用到了 Search 搜索组件、Grid 网格组件、Panel 面板组件、List 复杂列表等组件。
列表页的设计与开发
列表页是某一类内容的集合，展示多个内容最主要的信息，并且也是到内容详情的入口。这个页面里我们用到了 Search 组件来满足搜索的需求，然后自己实现了列表排序用的两个按钮，最后就是一个带加载提示功能的复杂列表。
文章详情页的设计与开发
文章详情页展示的是文章的具体内容。在这里我们用到文本组件来展示文章的内容，并在文章详情中加入了 “喜欢” 的功能。在页面的最后，还是用 Panel 面板组件和 List 复杂列表组件做了一个相关推荐的模块。
个人中心页的设计与开发
个人中心页面通常用来展示用户信息，另外一些不太重要的页面或者设置，也会把入口放在这里。这个页面里有两部分内容，一个是用户信息部分，包括用户的头像、信息和收藏关注数量；另外一部分就是使用 Menu 菜单组件实现的各种功能的引导，这其中还包括用来在当前页面展示信息的 Modal 模态框组件和操作确认用的 Action Sheet 弹出式菜单组件。
结果提示页的设计与开发
结果提示页用来展示一些重要操作的结果，例如下单、支付和提交反馈这些。这个页面的内容很简单，就是图标、文本和按钮的组合。在这个页面里我们实现了操作成功提示和操作失败提示，用到的组件也就是最基础的图标组件和按钮组件。