2 平台设计规范与模式分析

1 iOS平台——APP store

1.1 体验环境

体验产品： App Store

设备型号： iPhone 6

系统环境： iOS 9.3.2

体验时间： 2017.8.2

1.2 APP store页面结构

APP store页面组织架构图：

备注：APP store的“探索”标签页刷不出来，因此在网上找了别人的图片代替。

1.3 App Store设计模式分析

1.3.1 一级导航设计模式

一级导航采用底部标签栏。

优点：五个标签页面的主要任务都重要，切换频繁。入口扁平，控件面积大，方便快速切换。各标签采用图标icon+文字标识，清晰易懂。对于当前位置有清晰标识。

缺点：占据空间，因空间限制，文字标识字号很小。

五个标签页面截图：

1.3.2 精品推荐页面

打开APP store后的首页为“精品推荐”页面，从用户角度，目的是想找到有趣好玩的应用，类别多；从业务角度，持续向用户推荐应用产品、促进充值业务、折扣信息等，需要吸引用户注意。因此精品推荐页面采用多图的展示方式。

导航设计

页面顶部导航栏中间显示当前页面标题，右上角放置两个操作入口——“类别”和“预购清单”。进入“类别”后，可以选择游戏、儿童、教育等详细类别的精品推荐。选择“预购清单”可查看清单。

优点： 在顶部导航栏设置使用频次不高的操作入口，提高页面空间利用率。类别和预购清单页面采用列表导航，展示尽可能多的条目信息。

缺点： 右上角的操作入口不易被用户注意到。

“精品推荐”页面有“本周心游”、“新鲜APP”、“夏日火热节拍”等多个专题，进入某个专题后的页面顶部导航栏中间是当前页面标题，左上角是返回按钮及返回后界面的标题，右上角是预购清单。在导航栏下方采用分段式导航，可以切换到按名称、发布日期、精品推荐的排列方式。

优点： iOS的标准控件。在尽量小的空间内设置导航。

缺点： 这里的分段导航控件和顶部导航栏的返回控件距离太近，有误操作的风险。

点开某个应用、进入其详情页面，左上角是返回到“精品推荐”的按钮，右上角是转发和预购清单操作按钮。在应用简介信息下是一个分段式导航控件，可以选择详情、评论、相关。

优点： 分段式导航在不影响当前应用简介信息展示的情况下切换页面内容。清晰的标明当前位置。

缺点： 牺牲了部分页面空间。

列表设计

主要采用轮播面板，包括大图展示式的形式和小图横向罗列形式。

优点： 页面上从上到下有不同类别的轮播面板，大图展示的轮播面板能有效抓住眼球，提高点击率。小图轮播导航能充分利用页面，展现丰富的视觉信息，提高吸引力。

缺点： 在由大量图片组成的页面中浏览，会迷失在信息中。页面上的轮播小图标造成视觉焦点分散。

1.3.3 排行榜页面

页面顶部导航栏中间是当前排行榜标题，左上角是类别选择按钮，右上角是预购清单。在导航栏下方的分段式导航控件可以切换到按付费、免费、畅销排行榜单。

优点： iOS的标准控件。在尽量小的空间内设置导航。可以清晰的让用户知道当前位置。

缺点： 分段导航控件中的付费按钮和顶部导航栏的类别按钮太近，有误操作的风险。

1.3.4 探索页面

分组列表导航模式，导航栏中间是当前页面标题。点开列表中的一个分组，又拉出一个子列表，此时页面的右上角出现一个“收起”按钮（没有找到其标准名称），可以折叠当前子列表。

优点： 节省空间，展示更多信息条目，冷静清晰。

缺点： 在当前页面下没有直接显示的应用，层级深。

1.3.5 搜索页面

搜索结果为垂直列表。每个条目包含APP logo、简介、获取按钮、硬件支持信息、截图。第一个条目占据了大部分页面。第二个条目只显示了APP logo、简介一栏，提示用户还有信息。

优点： 用户一般是带着比较明确的目标来搜索，因此在搜索结果页面给出详细的图文展示有利于对于搜索结果进行确认。列表展示方式让条目信息清晰罗列。

缺点： 如果排在前面的搜索结果不是用户的目标，冗长的信息流会消耗用户耐心。

1.3.6 更新页面

图片+文字的垂直列表按时间顺序展示应用更新信息，每个条目除了应用icon、名称、版本号、大小，还有打开按钮和新功能下拉菜单，在有限空间内展示尽可能多的信息，做到条目数量和详细程度的平衡。

##2 Android平台——最美应用

2.1 体验环境

体验产品： 最美应用 3.3.1

设备型号： HUAWEI P9

系统环境： Android 7.0

体验时间： 2017.8.4

2.2 产品定位

slogan：一起发现好用、好看、好玩的应用。

用户群体：

• 产品经理、设计师等互联网从业者，对于应用的品质有要求，在意产品设计细节，留意国内外的优质内容，获得灵感，把握趋势；
• 发烧友、爱好者，爱尝鲜，想了解新的、好玩的应用；
• 学生、年轻上班族，熟悉互联网、对于生活品质和产品体验有要求。

2.3 最美应用页面结构

最美应用页面组织架构图：

2.4 最美应用设计模式分析

2.4.1 导航设计

顶层导航

最美应用APP一级导航下有“发现应用”、“每日最美”、“精选分类”、“游戏推荐”、“应用排行”共五个页面，采用抽屉式导航。抽屉式导航是material design中的标准规范，从屏幕左侧滑出。抽屉导航打开后占据了屏幕的全部高度，位于状态栏下方。与MD标准不同的是，最美应用的抽屉导航滑出时，会将原页面的内容推向屏幕右侧，而不是覆盖一层阴影而变暗。

与MD标准规范中遵循列表的关键设计线不同，最美应用的抽提导航页面顶部的用户登录信息及编辑操作入口，下方是五个列表项，一个类似于微信摇一摇的APP操作按钮，导航页底部从左到右三个操作入口：搜索、查看最美团队新作和更多。

当抽屉导航列表中的一项被选择后，该条目左边出现一个圆点表示当前状态。MD标准规范中采用程序主色调或者#000000黑色来凸显被选中。

优点： 抽屉式导航隐藏了不常用的操作，减少页面中导航控件数量，突出常用功能，节省页面空间，使用户专注于核心功能。

缺点： 被隐藏的功能不易被找到，操作比较复杂，对于新用户学习成本高。

二级导航

在手机和平板上，导航抽屉只支持单层级别的导航。在发现应用主页面下采用基于文本的标签式导航，标签栏位于页面顶端、应用栏下，带有下划线。页面右下角是浮动操作按钮，点击进入分享应用的编辑页面。

优点： 各个标签页面间可以方便切换，对于当前位置有清晰指示。标签采用文字标识，节省空间、指示明确。

缺点： 最多只能包含五个标签。标签栏占据了页面展示空间。

2.4.2 列表设计

横向罗列卡片

“今日最美”主页面和“游戏推荐”主页面采用横向罗列卡片的列表方式。卡片是MD规范里的标准组件，包含图片、文本等信息，是通往更详细复杂信息的入口。可以左右滑动来看上一张/下一张卡片。页面底部是一列类似于dock的icon图标，当前应用图标弹起，其他icon向页面底部隐藏，但还露出一部分，提示用户旁边还有内容。按下当前icon，旁边隐藏的icon也会弹起。可以点击icon直接跳转到目标页面。应用栏的右侧是当前应用的推荐日期，距离今日最美应用有两个卡片以上距离时，在推荐日期左侧出现火箭图标，点击直接跳转到今日最美应用页面。

优点： 针对最美应用每日推荐一款精选应用的目标，采用横向罗列的卡片将最大的空间留给待推荐应用，让用户专注于当前内容。内容展示方式和交互设计具有趣味性，用户了解操作方法后，倾向于多往后浏览卡片。

缺点： 页面空间利用率低。卡片间浏览有两种方式：左右滑动；点击底部icon图标。浏览效率低。

网格列表

“发现应用”主页面下的合辑标签页采用图文结合的网格列表。

优点： 展示图片为主。合辑信息较多，采用图文结合的展示方式，借助于图片吸引用户注意力。采用网格列表在图片表现和信息数量之间做平衡，展示数量尽可能多的项目，让用户在当前页面可以对信息有鸟瞰式的把握。

图文结合的垂直列表

精选、最新、周边标签页采用图文结合的垂直列表模式，每个卡片组件包含一个条目的图文信息。其中周边标签页包含一个轮播面板。

优点： 对于精选、最新、周边这三个主题，用户的浏览习惯是探索发现为主，不带有明确的目标。因此卡片通过图片、文字描述、点赞数据等信息展示内容，吸引用户注意。页面上也给出信息，提示用户下面还有内容。

缺点： 展示详细信息牺牲了空间利用。

分组垂直列表

“发现应用”主页面下的“美友”标签页、“应用排行”主页面、“精选分类”主页面采用了分组的垂直列表。列表条目信息图文结合。

优点： 分组列表归纳了不同类别的信息条目。垂直列表模式展示更多数量的条目，清晰有条理。

缺点： 没有提示分组信息的导航。

控制模式的垂直列表

“更多”页面包含与应用有关的外链、设置、信息。

优点： 垂直列表展示清晰冷静。在列表中加入控制模块，操作方便直观，符合用户习惯。

##3 Web平台——活动行

3.1 体验环境

体验平台： MacBook Pro 13寸

系统环境： OS X EI Capitan 10.11.6

浏览器： Safari 10.1.2

网址： http://www.huodongxing.com

体验时间： 2017.8.6

3.2 产品定位

活动行是一个活动报名与售票平台。

slogan： 精彩城市生活 尽在活动行。

用户角色：

• 发布者：举办发布会、讲座、演出等活动的企业、组织、团体、个人；
• 参与者：已经了解活动，在活动行网站上查找活动、进行报名；
• 潜在参与者：没有明确的目标，但发现感兴趣的活动会考虑参加。

3.3 活动行网站站点地图

网站首页承载展示功能。

3.4 网页设计

一级导航固定在页面顶部，方便用户在不同页面之间跳转。

“发现活动”标签采用二级导航，点击后，罗列出时间、兴趣、城市三个分类，为方便用户选择，将三个分类的详细条目在二级导航中列出来，减少跳转次数。

3.5 页面布局

活动行网站首页采用了图文结合的展示方式，直观清晰，展示宣传活动内容，吸引用户点击。根据活动分类，采用多种列表模式，包括轮播面板、横向罗列的小图轮播、图文垂直列表、图文网格列表。

“主办方”页面采用图文结合的网格布局，页面右侧是推荐广告位。网格布局用图标、文字结合的方式生动展示信息条目，便于用户总览列表。大部分最受欢迎主办方和近期活跃主办方都是具有较大影响力的机构、组织、媒体，其logo也为用户熟知。因此“主办方”页面的网格列表中，主办方的图标很醒目，文字字号较小，作为补充。这和人浏览习惯相符合，通过图像快速识别，不确定的借助文字来理解。

“发现活动”页面采用图文垂直列表方式展示信息。每一条信息所占空间更大，也涵盖了更多信息：活动主题、时间、地点、主办方以及参与人和感兴趣人的数量，页面上有“我要报名”的链接，方便用户操作。这样设计的缺点是每页展示的信息条目数少，优点是通过对每个条目详细的展示使用户不必点击就能对活动内容有了解，页面更加简洁，使用户能专注于当前页面。垂直的信息流使用户的阅读体验很流畅。

3.6 自适应设计

3.6.1 浏览器尺寸不同状态下的自适应设计

下图分别是浏览器为2550像素宽度、1440像素宽度时的活动行网站。

当浏览器尺寸变化时，一级导航条会横向拉伸/挤压，轮播面板会成比例的放大/缩小，与浏览器窗口相匹配。网站主体内容排列不会变化，当窗口小时可通过滚动条浏览内容。体验过程中也发现了活动行网站的bug，在缩小浏览器窗口时，导航栏的标签出现重叠。

3.6.2 不同平台下的自适应设计

体验平台： HUAWEI P9

浏览器： 华为浏览器 10.7.3.4056

系统环境： Android 7.0

体验时间： 2017.8.6

手机浏览器中打开活动行网站，其页面架构、导航都与电脑端不同。一级导航被折叠起来，位于页面右上角，首页之外的其他功能使用频率不高，这样设计简化了页面。首页采用两行网格列表导航，指向不同分类。页面底部是一个推荐活动的信息条目，提示用户下面还有内容。网页主体采用图文结合的垂直列表形式，遵循从上往下的阅读流顺序。