最近在网盘里找到几篇旧文，可能有些图片已经是旧版的了，分析也比较浅显。但是不重要，重要的是对我的启发，同时也督促自己养成研究和总结的习惯~
选择理由：新浪微博页眉页脚部分是经典的ios风格，在复杂的结构里也穿插着标签式导航的变体等其他形式，还有复杂多样的列表模式，在社交类APP里比较典型。
使用平台：iphone7
1.首页
1.1.页眉
下图（左图）是新浪微博的首页，页眉是ios典型的导航栏，标题在中间，按钮分布在左右两边，因为是首页，不需要返回按钮。微博在这里放置了一个叫做“好友关注动态”的页面入口，用更多元的方式为用户推荐好友。
1.2.页脚
用的是舵式导航，置于中间突出位置的是发布按钮，点击后从底部飞出6个按钮，用户可以选择需要的发布方式。而原来的发布按钮“+”号，顺时针旋转变成了X号，点击X号又逆时针变回“+”号，同时页面回到动态列表。在这个用户最顺手的位置做了这样的交互，方便用户快速地在发布和浏览之间快速切换。这两个行为方式在社交类APP里是最核心的行为。
1.3.内嵌式的搜索框
如上图所示的首页，有一个ios风格的内嵌式搜索框。刚进入首页时候是没有的，当页面刷新或下拉之后就会出现。因为用户无论是刷新或者下拉之后再返回，都是因为没有找到或者错过了自己想要的内容，这个时候提供搜索给用户，可以让用户自己检索想要的内容。
1.4.下拉框
左边这个是经典的ios风格下拉框——带小三角的圆角矩形。右边这个做了一些改变：(1)当分组很多的时候，下拉框可以上下滚动，显示更多的内容。如果用tab导航的话，由于分组的名字是由用户起的，字段长度差异可能会比较大，会显得比较凌乱，而且首页的元素已经够多了，再用tab导航的话内容区域就更小了。下拉框则可以在不需要时候收起，节约空间。(2)在下拉框的底部有一个“编辑我的分组”按钮。这样做的优点在于不需要频繁地跳转到另一个页面，可以直接快速的切换分组，只有在要对分组进行编辑时，才会跳转到新的页面，在新的页面用户可以更专注于编辑分组，而不用担心误操作，毕竟下拉框空间有限，不方便直接编辑。再说回左图，有个小问题，就是图标用了雷达的图标。用户点开会发现除了雷达还有其他的2个功能，所以用雷达的图标代表所有的功能会有歧义，它正确的意思不是“雷达”而是“雷达等功能”。不喜欢用“雷达”的用户，也会比较难发现“扫一扫”和“打车”的功能。（现在最新版本的微博里右上角只有“扫一扫”和“打车”，并且默认显示扫一扫这个比较常用的功能）
1.5.刷新方式
微博中，下拉刷新和页面加载用的都是这样的菊花形加载，这种加载方式只表示状态，没有进度显示，如果用户长时间的等待的话，会感到不耐烦，不知何时才会加载完。但下拉刷新和页面加载都属于短时间的加载。在网络正常的情况下几秒之内就能完成加载。所以不需要显示进度，只需让用户明白正在加载即可。
1.6.微博列表
微博的列表从整体的结构来说是以垂直列表为主，穿插着小图轮播式的“好友关注”和“相关文章”。但是往细了说，根据微博内容的不同，呈现的结构也稍有区别，这些设计模式同样也出现在其他社交类应用里：
1）纯文字微博
下图左图这是一个标准的列表单元格，但是在微博里不常见，因为在快节奏的读图时代比较没有吸引力。但是从它可以看出微博的基本结构：如下图右图所示，由于大多数中国网民的阅读习惯是从上到下，从左到右，所以左上是最重要的地方，放置用户头像。这是社交APP，发布者还是比较重要的。头像右侧是用户名，如果有VIP之类的身份标识的话，会显示在用户名后。下面是小字显示的发布时间和发布客户端，用来显示发布当时的状态。再往下是内容正文区，这部分面积最大，微博的话最多可显示7行，超过的话用“全文”来收纳超出的内容，点开可以进详情页看全文。最下方是互动操作区，用户从上到下浏览完后就可以选择互动的方式——转载或评论或点个赞，它放置在这里也是因浏览顺序而决定的，用户不可能光看到谁发的就去评论。但这三个要比其他的互动方式要重要，因为作为一个社交类的APP，它需要引导用户去互动、发布。而右上角的向下小箭头里收纳的是对该用户或正文的一些其他操作，如收藏、举报等个人角度的操作。从使用频率和业务需求的角度来说，都弱于底下的三个互动操作，因此将它们收纳起来，用户需要时可以自己去展开。
除此以外微博还有很多类型的单元格，都是在文字后插入其他的内容，例如图片、视频、链接等。
2）图片微博
文字后插入图片的形式是微博乃至大部分的社交APP里最常见的一种模式。如下图所示的是插有图片的微博。根据图片的数量不同，布局上会有些变化。只有一张图片时，按实际比例展示成缩略图，优点是展示出图片最真实的比例效果，缺点是当图片是竖图的时候布局不是特别好看。图片大于一张时会变成网格的布局，优点是在有限的空间里罗列尽可能多的内容，尺寸统一的方形图片和较小的间距，看起来比较有品质。有些爱玩的网友会利用这个特点进行自定义的设计，例如把9张局部的图拼成一张大图，更有趣味性和视觉冲击力。
值得一提的是，当图片为4张时，正好形成一个四宫格。这样就不会导致第二行只有一张图片了。不过在有些app里还做了更好的处理，就是把4宫格单张缩略图的尺寸比9宫格的单张尺寸做得略大一点。这样排版上会看起来更饱满。
3）视频微博
除了图片以外，插入视频也是非常常见的一种模式。如下图左图所示，微博的视频用一个相同的大图比例呈现，图片上会有一个播放按钮。但其实当视频拖动到页面中间时，视频会自动以无声的方式播放并显示进度。优点是可以让用户实时地看到视频内容，比较生动。
4）文章微博
上图右图所示的是发布文章所生成的微博，会以一张较大的封面图加上一行标题（图下方）的形式呈现。这种形式在一些电商的社区也是常常会看到，例如淘宝微淘里的“热文”。单张大图以统一的比例呈现，与单图微博（左上图）不同的是，它更有感染力，看起来更有档次，让人产生一种内容很专业的感觉。因为在信息量如此之大的微博（包括其他社区），用户往往是匆匆的浏览，如果不增强感染力，很难让用户驻足，甚至去浏览较长的内容。标题都在图片之下，可见图片才是吸引用户的首要元素。不过微博这里的设计，标题的存在感似乎太弱了一些。和图片的整体性有点欠缺，这样容易让用户产生只有一张大图的错觉而错过文章。
5）其他链接
除了以上所述的几种主流的单元格模式以外，有些微博在文末也会插入如下图所示的其他链接，可以是文章，也可以是商品、音乐等其他内容。以图片+标题等内容的形式呈现。比起纯文字来更生动，还可以知道链接的属性，例如音乐的话上面会有一个播放的图标之类的，缺点是感染力不够，优点是不会占太多空间，在有限的空间里给用途提供足够多的信息。
6）小图轮播的推荐列表
下图是微信的好友关注，其实不止是好友关注，还有推荐的文章等，都会以这种形式穿插在微博列表里，目的是向用户推荐好友或文章，以促进活跃度及强化社交。同时又不能影响用户正常浏览微博，所以用这种形式可以在有限的空间里推荐足够多的好友或文章，或其他信息给用户。缺点是在用户快速浏览时容易忽略。
2.“消息”和“我”——垂直列表
1）下图左图是微博一级导航下的第二个tab——消息。同首页一样，标准的ios风格导航栏和内嵌式搜索，一进来的时候搜索是隐藏的，下拉才会显示。
页面内是标准的垂直列表。这种形式的优点是简洁清晰，冷静高效。用户到这里来往往是主动寻找一些内容，不像在首页常常是浏览的。所以这里不需要像首页那么复杂详细的列表，只需要简洁清晰的列表即可。根据用户从左至右、从上至下的阅读习惯，左边一排呈现的是图标或头像，用户可以一目了然。而“@我的”、“评论”、“赞”三个核心的社交功能图标置顶，之后的内容按时间由近及远排序，让用户可以随时见到最新的消息。
上图消息列表有2种单元格。一种是带箭头的二级列表，进去以后是子列表。这种形式的列表缺点是中间空白太多，有点浪费空间，而且不适用于层级太深，容易造成用户的厌倦。所以微博在这里只用作二级列表，再进去就是最后一层列表——微博列表，层级很浅。
另一种是没有箭头的列表，进去以后是对话框列表。优点是显示了一部分内容信息，用户可以快速的做出判断是否有兴趣查看，提高了使用效率。根据ios的操作习惯，左滑可以进行删除。缺点是呈现的内容太多不能再放置其他操作，比如箭头、控件等。所以这种形式最适合用于这种消息列表。
2）上图（右图）是“我”的界面。“我”与“消息”的界面一样，是一个标准的垂直列表页。由于这里只是功能的陈列，不像消息列表所要显示时间等信息，所以这里每个单元格的高度都不高，刚刚好容纳一行标题。“新的好友”、“我的相册”、“草稿箱”这些原始的功能层级都不深，而“微博钱包”、“微博运动”、“粉丝服务”、“粉丝头条”这些扩展的功能进去以后都是一个独立功能的首页。所以这里的内容层级都比较浅，适合这种带箭头的列表，可以直达目标页面；四个扩展功能后面还有灰色的小字用来引导用户；根据具体页面的类型还进行了分隔。所以整个页面看起来简洁清晰，冷静高效。
最后，这两个页面时都有一个共通的缺点，就是只有标题的单元格和有补充信息的单元格放在一起，布局上疏密明显，只有标题的单元格看起来很单薄，标题右边空荡荡的。而与其他信息的单元格对比之下就觉得密密麻麻的。
3.发现
3.1.页面内的标签式导航与分段导航的切换
下图（左起第一张）是微博的“发现”页面。头部是ios经典的导航栏搜索。下面是轮播banner，这里用了轮播是为了在有限的空间里多呈现一些广告内容。再往下有两行入口图标，然后是微博列表。
微博列表模块的开头部分有个导航标签式的导航。如果页面上滑到了微博列表头部的位置，或者点击某个标签，这条标签式导航就会吸到页面顶部，变成标签式导航样式的分段式导航，见缝插针插进了导航栏。这是因为每个标签下面的内容信息量很大，还要分出第二层级，也就是吸到顶部以后
该导航下面出现的一行标签(见右图)。但是分段式导航的标签不宜太多，最好2-3个，微博用了4个，但所幸都是2个字的，看起来不算太拥挤，因为还有返回按钮，如果太拥挤的话，第一个标签离返回太近也会有歧议。布局上也会显得头部太重。
3.2.滚动式标签和“更多”
如右上图所示，“热门”、“榜单”、“视频”这三个板块都是微博内容，标签多于5个，所以做成了滚动式标签。
这个设计的优点在于灵活的运用了标签式导航的变化，让用户在没有明显的跳转的情况下，顺利的切换，不影响用户阅读的同时，承载了更大的内容量。缺点在于标签不宜太多，例如“热门”下的标签
有三十多个，后面的标签点击率会很低。并且如果不是根据用户的偏好进行排序的话，很有可能用户并不喜欢前面的内容，而喜欢在最后面，但他未必知道后面会有，也未必有耐心浏览到最后。
而最后的“头条”是用户可以自己定制的新闻内容，所以只放了4个优先级最高的，最后一个“更多”点击后进入“全部频道”（见上图右图），可以调整优先级，或者选择想去的频道。与底部导航栏一样的是，关闭按钮还是在底部，这样方便用户快速地回到头条页面。缺点同样也是标签过多容易造成用户的困惑。还有，不是在原标签下直接展开的，而是滑出一个浮层，所以可能会有点跳出感。但比起滚动式标签还是好一点，因为这种网格式布局的标签列表，把每一个标签都平等清晰的呈现给用户，便于用户快速的选择，而不用反复操作滑动去找不确定是否会有的标签。
4.标准的标签式导航和“更多”
1）下图是“我”里的“我的赞”。页眉也是典型的ios风格。标题在中间，右边是ios风格的“更多”（安卓是竖着的，之后分析安卓的app时候会有图），左侧是返回，并且带有上一级的标签，即“我”。这页的标签式导航是一个典型的标签式导航，并且一直置顶。无论页面如何滚动，它一直都在，用户可以便捷的再不同类目之间切换。
2）点击三个点的“更多”按钮从底部浮现选项，可以选择“刷新”或“返回首页”。这里只有2项，其实也可以做成2个按钮放在右上角。之所以这样做，好处首先是给用户更大的点击空间，避免误操作。还有就是页眉的布局不至于太挤。缺点就是需要多点一步。并且在上面点击后从底部浮出浮层的话用户的操作幅度有点大。但这和首页的下拉框是有区别的，下拉框主要是同级页面间的切换或者功能的切换。而这里是显示更多操作，所以也不适合用下拉框。