App这样设计才好卖 pdf下载

iOS/Android开发者必须熟记于心的UI设计模式

全彩图解99个App案例

有效提升用户体验

有些App一天能卖出成千上万；

有些App无人问津；

有些App操作起来流畅舒适；

有些App让人云里雾里……

是什么造成了如此大的不同？

怎样才能让用户喜欢并持续使用你的App？

遵循什么样的原则才能设计出友好的界面？

日本大食谱网站COOKPAD资深设计师来告诉你答案。

0.1　智能手机UI概要
　　智能手机是一个宽泛的概念，它包含各类运行于不同操作 系统之上的多种设备。此外，直接运行于智能手机上的应 用与针对智能手机设计的站点，通常在功能上存在差异。 本节将介绍智能手机UI 的特点及相关术语。在阅读本书 前，读者必须了解这些内容。
　　Android 手机与iPhone
　　目前，智能手机多采用Google 公司开发的Android 操作系统、 苹果公司开发的iOS 操作系统，或 Microsoft 公司的Windows Phone 操作系统。由于当前日本智能手 机市场几乎都被Android 手机与 iPhone 占据①，因此本书将仅讨 论Android 与iOS 系统的UI 设 计问题。
　　在讨论UI 设计时，我们必 须考虑到各个平台之间的差异， 其中包括硬件按钮的有无、屏幕 尺寸，及各平台具体设计规范等 的不同。接下来，让我们先了解 一下不同平台的典型特征，随后 的各个章节还将详细介绍它们之 间的差异。
　　Android
　　Android 是由Google 公司开 发的开源操作系统。很多日本公 司推出了基于该操作系统的智能 手机。这些设备的屏幕尺寸、 分辨率、dpi 等参数各不相同。 因此， 设计师在为Android 应 用设计界面时，必须考虑设计 的灵活性。
　　此外，与iPhone 不同，Android 手机具有硬件按钮和导航栏。
　　iPhone 只有一个位于正面的主屏 幕按钮（Home 按钮），能够在任 何界面下使用。而Android 手机 除了主屏幕按钮外， 还有“菜 单”“返回”和“正在运行的应用 程序列表”等硬件按钮。除了硬 件按钮，导航栏也是一种能在任 意界面下使用的UI。设计师在设 计Android 应用的UI 时，必须考 虑如何处理这些按钮。第2 章将 对此做详细说明。
　　iOS
　　iPhone 是苹果公司开发的智 能手机。运行于iPhone 和iPad 之上的操作系统称为iOS。“iOS 人机界面设计指南”同时涵盖 了这两种设备的设计规范。不过 本书仅讨论iPhone 的界面设计问题。
　　由于iPhone 仅由苹果公司销 售，因此不像Android 手机那样 存在各种不同规格的设备，这是 两者的一大不同。
　　操作系统版本
　　Android 与iOS 中都有操作 系统版本的概念。不同版本的系 统提供给用户的功能也不同。截 至2013 年2 月，iOS 的最新版为 6.1，Android 是4.2。②一般来讲， 新版本的系统会增加新功能。然 而，用户并不一定能接受开发者 在新版本中添加的新功能及新的 UI 设计。设计师应该对用户的使 用倾向进行调查并设定相应的范 围，以设计出大部分用户都能轻 松理解的UI。
　　笔者所属的CookPad 公司在 开发智能手机站点时，原则上仅 对用户比例高于2% 的系统版本 提供支持。截至2013 年2 月， 本公司支持以下这些系统版本：
　　●●Android：2.3 及以上
　　●● iOS：4 及以上
　　① 事实上，如今全世界的智能手机 市场都已经被Android 和iPhone 占据。——译者注
　　② 2013 年10 月，Android 系统正 式发布了4.4 版（KitKat）。iOS 7 于2013 年9 月正式推出。本书 根据最新的系统对内容作了更 新。——译者注
　　设计规范
　　图1 和图2 分别是各操作系
　　统的设计规范，它们明确描述了 各自提倡的界面布局及UI 组件。 这些文档的目标读者是设计师与 软件工程师。设计师在设计应用 界面时，原则上应遵循这些设计 规范。此外，Android 还提供了 可编辑的UI 及图标数据，笔者 建议大家在开发时充分利用这些 内容。
　　各操作系统的设计规范不仅 包含各平台的UI 设计习惯，还 介绍了该平台蕴含的UI 设计思 想。笔者建议所有要开发智能手 机应用及站点的设计师都去阅读 一下这些设计规范。
　　本书将介绍各平台的UI
　　特点及相应的设计规范。大家应当 在阅读本书的同时，参阅相关的 设计规范文档，进一步加深对UI 的理解。阅读设计规范还有助于 了解当前智能手机的功能。
　　本书基于2013 年2 月的设 计规范所写。①设计规范常会随操 作系统的版本升级而变化。尤其 是Android， 在版本升级之后， 其设计规范及基本组件都发生了 巨大的变化。不过在Android 4.0 （Ice Cream Sandwich） 之后， Android 平台的公开文档渐趋完 善，其设计规范也基本稳定。在 本书中，笔者将各平台的设计规 范文档简称为规范。
　　① 中文版根据最新的iOS 7 设计规 范对全书内容作了更新。 ——译者注
　　智能手机应用与智能手机站点
　　本书将分析并总结智能手机 应用与智能手机站点的UI 设计 问题（从应用程序的角度来看， 我们可以将其称为原生应用与 Web 应用）。
　　上述两者的开发方式和执行 环境各不相同，能够实现的功能 也有所差异。笔者建议设计师根 据不同的服务目的选择合适的类 型，发挥其优势。不过，如今越 来越多的服务开始为智能手机站 点及应用提供统一的UI。对用户 来讲，他们会在相同的情景中接 触这些UI，并不会觉得有什么区 别。因此，本书不会区分这两类 应用， 而以UI 组件为切入点， 对两者的特征进行讨论。
　　智能手机应用
　　用户可以从应用商店下载智 能手机应用，将其安装至自己的 智能手机中，以供今后使用。
　　本书将以智能手机应用、应 用、iOS 应用或Android 应用等 名称来称呼这些手机应用。 与智能手机站点相比，智能 手机应用在动作流畅性、画面 表现力和功能多样性上都更加 出色。
　　智能手机站点
　　与PC 站点一样，智能手机 站点也需要通过浏览器访问。 iOS 的默认浏览器是系统预装的 Safari。Android 手机没有规定默 认浏览器，不同设备可能会使用 不同的浏览器。但据说Android 今后将把Chrome for Android 定 为默认浏览器。
　　本书将以智能手机站点、站 点等名称来称呼这些网站。 与智能手机应用相比，智能 手机站点的表现力及功能略显逊 色，但它的即时性较高，且具有 较强的服务关联性。如图3 的 Google Map 和图4 的Instagram 所示，最近，越来越多的智能手 机应用和智能手机站点采用了相 近的界面设计。
　　智能手机UI 概览
　　在智能手机UI 设计领域， 人们定义了一些基本的界面区域 及用户操作行为。本章接下来将 介绍本书涉及的各种UI 组件的 基础元素。第2 章将详述它们的 主要特征及其用途。
　　1 页眉（Header）
　　页眉指的是智能手机应用或 针对智能手机设计的网站①的顶 部区域（对智能手机应用来讲， 页眉是位于状态栏下方的区域。 对手机站点来讲，页眉是位于地 址栏下方的区域）。智能手机应 用又可分为iOS 应用与Android 应用，两者的基本布局也有所不 同。手机站点的页眉通常都会在 向下滚动页面后隐藏，而手机应 用的页眉则不会如此，这进一步 增加了设计师的工作量。第2 章 将对页眉进行更详细的说明。
　　2 页脚（Footer）
　　页脚指的是界面底部的区 域。手机站点常以页脚的形式， 将整个站点公用的导航栏及版权 信息安放在页面底部。用户能轻 松触及该区域，对页脚进行操 作，因此，页脚通常会包含导航 栏或页面操作类UI 控件。第2 章将详细说明页脚的相关内容。
　　3 导航栏（Navigation）
　　导航栏用于页面跳转，或指 示用户当前所处位置。第3 章将 介绍导航栏的工作模式。
　　4 叠加层（Overlay）
　　在叠加层中配置的内容将会 与界面中已有元素重叠。叠加层 将显示一些临时的界面元素并遮 盖原界面，此时，原界面将保持 不变。在请求用户执行某些操作 时，叠加层是一种常用手段。
　　叠加层可以大致分为两种类 型。其中一种类型称为模态类型， 在使用该类型的叠加层时，用户无 法操作原有界面，只能对叠加的元 素执行操作。第2 章将介绍模态窗 口的相关内容，第6 章将介绍模态 消息，届时，笔者将再做具体说 明。另一种名为非模态的类型与模 态类型相反，在使用这种叠加层 时，用户依然能对原界面执行操 作。第3 章将介绍的下拉式菜单， 及第6 章将介绍的非模态消息， 都是该类型叠加层的典型应用。
　　5 控件（Control）
　　用户可以通过控件来操控界面 状态或设定状态。举例来说，第3 章将介绍的刷新控件可以将界面中 显示的信息更新至最新状态，分段 控件则能够更改正处于显示状态 的内容。它们都是常用的控件。
　　6 操作（Action）
　　操作可以指用户通过UI 执 行的任意行为。不过本书主要用 操作来指代保存、提交、删除及 编辑等重要行为。用户可以在服 务或应用程序中执行这些操作， 完成既定任务。
　　7 硬件按钮
　　大部分智能手机的控制UI 都 在界面内，位于界面外的UI（按 钮）称为硬件按钮。iPhone 在正 面设计了一个硬件按钮，Android 设备则通常具有多个硬件按钮②。
　　8 状态栏
　　状态栏是一种由系统控制并 显示的UI。它主要用于显示一些 设备信息或用户通知信息。与其 他UI 不同，状态栏不属于特定 的应用程序。在iOS 中，设计师 可以更改状态栏的颜色及透明 度，使其与应用程序风格一致。
　　① 以下简称手机站点。——译者注
　　② 从Android 4.0 起，Google 建议 设备制造商减少使用硬件按钮， 而使用虚拟屏幕按钮。如今，很 多Android 设备都不再使用正面 硬件按钮。——译者注
　　……

近年来，智能手机得到了迅速普及，成为了亲朋好友间沟通或管理日程安排不可或缺的工具。 同时，移动应用与服务的数量不断增加，种类也越来越多。
　　这其中真正为用户喜爱并长期使用的应用并不多。好的用户界面（UI）往往同时兼具易用性 与趣味性，这对开发高质量的应用或服务尤为重要。
　　用户通过用户界面操作智能手机。用户界面设计不仅应当为用户提供新的体验与价值，还要 让用户通过轻松自然的操作实现自己的目的。
　　然而，说来简单，实则很难。造成界面操作不便的原因有很多，如设计师没有使用与用途相 符的UI，或是没有遵循iOS 与Android 平台的设计标准，又或是同一服务中的同类操作采用了不 同的设计。
　　以用户熟悉的常见UI 为基础进行设计，是解决这些问题的一种有效手段。为此，设计师必 须熟悉各种常用的UI 类型及其特点。
　　本书介绍了智能手机应用与站点设计中基本的UI 组件，并将它们逐一做了模式化处理。不 但适合设计师阅读，团队主管或软件工程师等智能手机服务开发人员也可以参考。
　　第0 章与第1 章阐述了智能手机UI 设计过程中必须了解的基础知识。为了能从组件的观点 看待UI 设计问题，设计师还必须熟悉基本的界面模式与界面跳转方式。第2~7 章分别介绍了不 同用途的UI，第8~10 章介绍了图标与切换动画的设计模式，它们对设计智能手机应用与服务至 关重要。
　　本书介绍的各种UI 组件与设计模式的分类方法以及对它们的解释，都基于笔者迄今为止积 累的经验与实践，难免会有偏颇之处。如果本书的理念能够帮助大家设计出更加优秀的应用，我 将不胜荣幸。
　　池田拓司