云课堂作业留存1

题目：

从遵守设计规范的角度，请你在三个平台（iOS，安卓，web）各选一个最具有代表性的产品。

1）请详细分析此产品的页面结构和设计模式，

2）并分析这样设计的优缺点。

作业：

一、Web端

1.产品：豆瓣电影

2.页面结构及设计模式

布局分区图

2.1豆瓣社区导航

2.2用户中心

2.3 logo

2.4搜索栏

2.5豆瓣电影导航

2.6购票活动区（罗列式轮播面板）

2.7其他内容区

2.8选片活动区（标签式导航+网格列表）

3.关于设计上的优缺点

3.1豆瓣社区导航及用户中心：豆瓣作为一个综合类社区网站拥有许多产品，最上方的社区导航和用户中心便于用户去往豆瓣其他产品。位置放在网页最上方，并采用了深灰底色和浅灰字色产生低对比度，使其很好的与豆瓣电影导航产生区分，视觉上弱与网页上其他主要元素，既发挥了功能，又不抢眼。用户中心也没有放到其他内容区，也没有显示阅片量和发布影评数等内容，甚至连头像都没有，只有必要的用户名、信箱和系统提示，都是为突出核心内容区做的舍弃。

3.2搜索栏：位置靠上，面积较大，使有明确目的的用户更快找到想找的内容。浅灰色字标注了搜索框能搜索的内容，使用户明确可以搜索的内容，摆脱只能搜索影片名的刻板印象。

3.3购票活动区：采用了罗列式轮播面板的设计方式。此区域作为豆瓣电影最主要的盈利手段（存疑，也有可能是导流量）放在了黄金位置上，把所有近期上映影片的海报根据评分和热度4个一组按顺序横向罗列。轮播面板式设计可以在不占用过多空间的情况下使影片海报的面积更大更美观，充分利用了界面外的空间，并在右上角辅以页码，让用户时刻知道自己在哪；字体明显区别于选片活动区的字体，字号更大，对比度更高，视觉上更突出，图片和字体的设计使用户更直观就能找到想找的影片。4个一组的模式很有效率，而且将热度高评分高的影片排在前边，使大多数用户不用翻太多页就可以找到想看的影片，不必过多操作产生负反馈。

3.4选片活动区：此区域是为没有明确目标的用户准备的，采用了标签式导航的方法来将影片分类，并且不单有影片类型分类，还有如“豆瓣猜”、“豆瓣高分”等符合用户期望的标签，比较全面。标签分类并没有采用滚动式，不用二次操作，直观便捷。因为相比于购票区，此处没有过多的面积限制，所以采用了网格列表的模式。使用了和购票区相同尺寸的电影海报进行平铺，让网页看起来更加规整，更有感染力；文字部分字号和对比度相比于购票区有一定弱化，避免喧宾夺主；但展示信息较少，只有影片海报、影片名和评分，没有简介、短评、年份、演职员等信息。

3.5其他内容区：此区域基本没有使用图片，避免不同尺寸图片太多显得杂乱，文字和背景也是对比度较低，只为突出两个核心内容的区域。

二、iOS端

1.产品：腾讯新闻iOS V5.1.6.36

2.页面结构及设计模式

布局分布图

2.1一级导航（标签式导航）

2.2二级导航（滚动式标签导航）

2.3搜索栏

2.4内容区（垂直列表）

3.关于设计上的优缺点

3.1一级导航：采用标签式导航的设计，icon加文字的设计更易识别，入口较为扁平，控件占据的面积较大，易于点击操作和进行功能键的快速切换。

3.2二级导航：此处用于给新闻分类，因为标签较多，所以采用滚动式的标签导航，并且给出了提示，让用户知道在页面外也有标签存在。笔者以为，此处标签中的视频，并不平行于其他二级导航中的标签，其他标签都是作为文字新闻的分类存在，视频标签应与文字标签（也就是一级导航中的新闻）并列，建议二级导航中的视频标签和一级导航中的直播标签合并为视频标签加入一级导航，并在该页面中用分段式导航的形式对两者进行区分（如下图）。这样做也更符合应用场景，文字类新闻集中在一起，可以在流量环境中阅读，视频类新闻集中在一起，可以在wifi环境下查看。

修改前后对比

3.3搜索栏：进入APP时搜索栏是隐藏的，只有下拉内容区域的时候搜索栏才会显示出来。默认隐藏搜索栏可以避免双标签栏占用太多面积带来的问题，但是用户初次使用难以寻找，学习成本较高，并且在iOS中下拉内容区是刷新功能，和搜索功能不发生关系，不符合应用场景和用户习惯。此APP中一级导航的推荐页面是和其他APP中的发现页面是一样的内容，文案上写成“推荐”意味着让用户被动接受信息，而不同于“发现”一样主动寻找信息，虽然内容功能一样，但是给用户的心理感受有很大区别，而且不符合用户的使用习惯，可能会产生让用户既找不到搜索又找不到发现的情况，所以建议将一级导航中的“推荐”文字改成“发现”。

3.4内容区：采用垂直列表的方式，内容干净清晰。将广告以相同的格式夹杂在内容中，会使页面更佳整洁，但有可能让用户使用时产生误操操作，带来负面情绪。

三、Android端

1.产品：知乎Android 4.10.1（443）

2.页面结构及设计模式

布局分布图

2.1一级导航（标签式导航）

2.2常用功能快捷菜单（浮动操作按钮）

2.3搜索栏

2.4内容区（垂直列表）

2.5活动推广区（罗列式轮播面板）

3.关于设计上的优缺点

3.1一级导航：采用标签式导航，入口较为扁平，控件占据的面积较大，易于点击操作和进行功能键的快速切换。导航上的标签上只有icon没有文字，可能使新用户使用时产生困扰。

3.2常用功能快捷菜单：采用了Material Design中的浮动操作按钮，将“写文章”、“回答”、“提问”三个常用功能集合在此按钮中（如下图），相比于iOS版知乎将这三个标签平行置于搜索栏下，这样设计不但更加美观，还能给内容区腾出少量的空间。

点开浮动操作按钮后的三个标签

3.3搜索栏：采用常规设计置于屏幕最上方并用低对比度字提示用户可搜索的内容，降低了用户使用时的学习成本。

3.4内容区：采用了垂直列表的方式展示社区的内容，通过字号、粗细、对比度的差别展现内容的主次，让用户短时间内看到关键信息，提升效率。

3.5活动推广区：此处用于推广知乎自己的活动（知乎Live），因为内容区是采用Timeline的顺序展示内容，活动推广区始终默认在第一条内容下边，说明在知乎看来，最重要的内容还是问答和文章，说明知乎的本质还是以问答为主。把活动推广区始终放在Timeline第二条的位置能保证活动推广区始终在之后首页的第一屏，活动标题的文字和参与活动的按钮做的相对于其他元素都要更大，体现了知乎对知乎Live这项活动的大力支持，毕竟这是目前为止知乎尝试的各种盈利模式中最有前景的一个。