在这篇文章里，我想从遵守设计规范的角度，在三个平台（iOS，安卓，web）各选一个最具有代表性的产品来详细分析此产品的页面结构和设计模式，并分析这样设计的优缺点～
所选取的产品分别为小红书（iOS端）、支付宝（Android端）以及百度千千音乐（Web端），本文分析的页面主要包括三个产品的一级页面，二级及以上页面暂没有涉及
一、iOS产品选择——小红书
小红书 V6.27
1. 首页
首页 详情
iOS端的小红书的页眉部分是下划线式的标签导航，用户能够轻松进行点击操作，进行不同子界面快速切换（1）
iOS端的小红书也用到了iOS的经典搜索栏控件，给用户提供了搜索的接口
首页部分采用了瀑布流式的网格列表布局，能同时显示大量图片、提升界面的内容魅力（2）
iOS端的小红书底部是舵式标签导航，标签栏让用户在不同的界面和模式中进行切换（3）
2. 商城页
商城页 详情
商城页也集合了搜索框，便于用户进行商品的搜索
商城页的第一部分是轮播面板，使得用户可以浏览体验式推荐的产品，并且也给商品带来了很好的宣传（1）
商城页的第二部分采用了模块化的布局，每个模块下都采用宫格式的列表，罗列出活动包含的代表商品，并加上数据给予用户明显的优惠力度（2）
商城页 详情
当商城页往下拖动时，界面上的下划线标签栏将会一直固定在页眉位置，用户能够轻松进行点击操作，进行不同子类型商品界面快速切换（1）
商城页的主体部分为商品信息的网格列表，集合了图片与价格等数据，能同时显示大量图片、提升界面魅力，能充分利用界面，并在有限空间内罗列大量商品信息（2）
3. 消息页
消息页 详情
消息页的第一部分为三个并列的宫格模块，分别链接着三个不同的常用功能模块，能够充分的利用好顶部的区域，使得功能得以扁平化（1）
消息页的主体部分消息垂直列表，给人以一种冷静、清晰的感觉，简单清晰、易于理解、冷静高效、快速定位，并没有显示全部的消息内容，而是给予用户收到消息的前半部分，方便用户知道所收消息的整体状况，也方便用户的查看（2）
4. 个人页
个人页 详情
个人页中也包含着标签式导航栏，将与用户自身相关的信息进行划分分类别，用户通过点击能够轻松进行切换页面工作（1）
个人页中也整合了自己所发布的图文信息，采取网格列表的分布方式，能同时显示大量图片、提升界面魅力，并且能充分利用界面（2）
二、Android产品选择——支付宝
支付宝 V10.1
1. 首页
首页 详情
Android端支付宝首页的顶部是四个功能的宫格icon，链接至基本的功能页面，提高了界面利用率与便捷度（1）
首页第二部分也是由图标组成的宫格列表，链接至不同的功能模块，将功能扁平化，充分利用了整个界面（2）
首页惠支付部分采用的也是模块化的布局，模块内部是独立的垂直列表，紧扣惠支付的主题（3）
Android端支付宝底部是底部布局的标签导航，标签栏让用户在不同的界面和模式中进行切换（4）
首页 详情
当首页页面下滑时，第一部分的四个宫格icon以及搜索栏等会固定在页面顶部，面积会相应地进行缩小，但是仍然能起到类似导航的作用（1）
首页生活服务部分类似于惠支付部分，采用的也是模块化的布局，模块内部是独立的垂直列表加小图的形式，紧扣生活服务的主题（2）
首页的每日必抢部分采用的是宫格列表的排列方式，功能扁平化，显示了每日优惠的商品信息，直观且充分利用了页面（3）
2. 财富页
财富页 详情
财富页的顶部也有一排由icon组成的导航，类似于标签式导航栏，链接至相应的页面，并且能清晰地告诉用户此页面下包含了哪些关于“财富”的项目（1）
财富页的财富直通车部分采用了轮播面板的列表方式，横向滑动，通过大图为用户推荐了丰富多彩的理财活动，吸引用户的眼球（2）
财富页的稳健理财部分是由多个网格列表组成的数据信息展示，向用户详细地展示了理财的收益数据，从而起到刺激消费的作用（3）
3. 口碑页
口碑页 详情
口碑页的上部分是由不同的类别icon组成的宫格，链接至不同的二级功能页面，充分利用整个界面（1）
口碑页的下一个部分是由不同模块组成的活动及榜单跳转部分，加上炫彩的图片显示，能够强烈地吸引用户的眼球，并且通过下方三个标签模块，也能给用户起到导航作用（2）
口碑页也包含着标签导航，这个标签导航更像是宫格列表，导航控件占据面积较大，能够轻松进行点击操作，进行功能间快速切换（3）
口碑页 详情
口碑页下拉后，页面内的标签导航会固定住界面顶部形成顶部滚动式标签导航，方便用户进行切换分类（1）
口碑页的下一个部分是直播间专属秒杀，是直接一张大图显示，点击会自动跳转至直播界面，这样布局的目的是为了吸引用户点击，推测口碑直播也是目前商家主推的一项活动方式（2）
口碑页后半部分是口碑商品的介绍页，大体是采用的垂直列表进行排列整理，列表内部也有多张图片组成的网格，既简单清晰，又形象地描绘了商品的信息（3）
4. 朋友页
朋友页 详情
朋友页的上半部分也是由一排由icon组成的导航，类似于标签式导航栏，链接至相应的二级模块，这些icon的占比面积较大，紧扣生活与社交两大主题（1）
朋友页中的后半部分是消息列表，消息列表采用了垂直列表的布局方式，简单清晰，方便用户知道所收消息的整体状况，也方便用户的查看，做到了条目详细程度与页面展示条目数量之间的平衡（2）
5. 个人页
个人页 详情
个人页的上半部分个人信息的展示，以及会员系统，个人信息展示表现为一条横向列表，列表包含着用户的头像以及用户的姓名、昵称及绑定手机号（1）
个人页的后半部分是由垂直列表组成的功能模块，其中部分功能模块在之前几个页面也出现过，此处对其进行了二次集成，易于理解、冷静高效、快速定位（2）
千千静听
页面详情
Web端的千千静听的顶部是标签导航栏与搜索栏及用户头像信息，链接着不同的板块页面（1）
第二行也是一个标签导航栏，点击不同的标签会显示不同的音乐动态信息，用户能够轻松进行点击操作，进行模块的间快速切换（2）
热门歌单模块采用了网格列表的模式，大图罗列了推荐的歌单封面，给用户一种直观的感受，并且也能充分利用界面（3）
页面详情
分类听歌模块是将不同的标签按照网格排列的方式进行分布，通过这些文字，用户能直观地进行类别歌曲类别选择（1）
推荐电台模块则是采用了宫格列表，将多个icon结合文字进行排列，模块的区域被充分利用起来，直观形象（2）
页面详情
宣传板块采用了轮播图的形式，横向滑动，通过大图为用户推荐了音乐作品与平台活动，吸引用户的眼球（1）
新歌首发板块采用了网格列表的布局形式，图片统一裁剪为专辑的方形，排排罗列，给用户一种整齐感，但相较歌单模块而言，此版块占比较小（2）
页面详情
排行版模块含有三个子模块，且每一个模块包含有一个垂直列表，此列表按照一定的算法顺序记录排序着歌曲，且每一个列表包含着歌曲图片等相关信息，在冷静清晰中告知用户时下流行相关（1）
页面详情
热门歌手模块采用了网格列表的布局形式，图片统一裁剪为头像的圆形，排排罗列，给用户一种整齐感，用户可以点击相应歌手的头像跳转至相应的歌手作品页面（1）
精选MV模块采用的也是网格列表布局的形式，所选图片风格统一，排列整齐，同时与歌名相对，简单明了（2）
页面详情
热门活动模块采用的也是网格列表布局的形式，所选图片风格统一，排列整齐，同时与活动名相对应，简单明了（1）
网页说明模块也分为三个子模块，每个模块都采用网格排列的方式，充分利用了有限的界面，提供了客户端的下载，同时也显示了网站的相关信息（2）
四、思考与总结
对于移动APP而言，iOS与Android的整体设计趋于一致，有些iOS的基本控件也能在Android端见到，同样地，有些Android的基本控件也能在iOS端见到
对于移动APP而言，因为都是竖屏显示的原因，所以基本上所有的一级页面的排列都是从上而下的模块化排布，从整体上看都是垂直列表排布；在每一个模块内部都采用了不同的排列模式
对于一些功能化导航模块，其内部的排列大多为宫格列表；对于一些消息模块，其内部的排列大多为垂直列表
大部分社交性质的产品更多地注重图片，所以在首页等页面排布时会采用大图的网格列表；大部分偏功能性质的产品更多地注重产品功能的运用，所以在相关页面排布时会采用icon的宫格列表导航模式
Web类产品相较移动端界面更大，所以在页面布局上留白会更多，标签类导航也大多采用图片的形式，也不局限于从上而下的模块化排布，相反，Web端的模块排布更加的自由
完稿时间：2020年1月5日
閱讀更多 SlowStep 的文章
