19-为移动设备和其他设备而设计

一、解剖移动应用

受限于手机、平板的尺寸，大部分app都是暂态的，交互特点是短暂、临时、关注特定任务的，因而信息量和信息密度都不能过大。

根据尺寸分类：智能手机和平板电脑。

智能手机

大部分手机都能检测手机是竖直方向还是水平方向，因而需要旋转手机的app最好使用图标控件，方便随屏幕一起转动。例如拍照icon的变化。

平板电脑

相比智能手机有更大的屏幕，可以添加索引窗格，可用于导航、列出条目，如果用户需要全屏查看内容，则可以关闭左侧索引。可放置弹出窗格来设置一些选项，沿用了电脑软件的设计，由于没有离开原页面，方便用户理解页面之间的逻辑关系，往往与某个控件或按钮相关联，一般会使用一个小三角明确关联关系。

平板电脑上的app不用考虑竖屏，只用考虑横屏？

而手机端的app要考虑横屏和竖屏。

一些要考虑横竖屏的app来说，水平变竖直的时候，要添加按钮，调出覆盖式的索引窗格，垂直变水平的时候要把这种覆盖改成相邻的形式。

二、关于移动导航、内容、控制的习惯用法

1、浏览控件

社交媒体、新闻、购买、 听音乐、视频，主要提供看、点击的操作，尽量避免输入操作，内容列表很重要，内容列表分为：垂直列表、水平列表、网格。

垂直列表

列表通常和标签栏一起。一行项目、一段文字、图片、卡片，列表的长度可以是有限也可以是无限加载的，建议每次加载的时间不超过1s。

内容轮显（自动滚动）

扩展到屏幕的水平方向，banner也是一种水平列表（内容轮显），通常可以循环，浏览到最后一页可以回到第一页，适合展示数量不多的内容，一般的水平列表不支持回到第一页。

水平轮显不只局限于页面的一个部分，整个页面都可以水平轮显，比如天气app，但这种情况下就不支持从最后一张滑倒第一张，避免用户迷失。

不管是水平列表还是垂直列表都要做好暗示：如显示遮挡部分的卡片，使用页面控制器（小圆点）。

垂直轮显：比较少见，如iphone的safari的浏览历史记录。

泳道

mac的app store 应用的是内容轮显(banner轮播）＋ 泳道

网格列表

用来展示纯图片（ins、相册）、音乐专辑、视频，也可以进行有限或者无限的滚动。

卡片

能在有限的屏幕上有效的展示让用户易于阅读和吸收的富媒体信息。媒体＋文本＋链接＋社交动作。最常见的形式是列表，但也会以网格、轮显、泳道的形式出现。

二、导航和工具栏

1、标签栏 tab bar：

ios的标签栏通常在页面底部，通常标签栏的数量不超过5个（5加减2）。安卓通常在页面的上部。windows在顶部使用纯文本标签。

ios使用更多标签放置多于4个标签的情况。安卓上更多出现在动作栏的右侧，出现全屏的模态界面或功能菜单。

2、导航栏nav bar 动作栏action bar

ios的导航栏位于页面顶部，放置当前页面的名称，返回按钮，右侧会放一些操作按钮／菜单，安卓将放置这些动作的区域叫action bar，因为安卓的导航栏被系统里面占用。

ios通常将一个或两个动作按钮放在导航栏的右侧，如果有更多：采用安卓的形式三个小圆点竖或横、将文字移到左侧、右侧放3个按钮、微信主页右侧+号下拉4个、标签轮显的方式。

安卓下拉弹框可以放置比3个更多。不用严格遵守各自的规范，关键看如何帮助用户快速的实现目标。

3、工具栏工具板

当需要更多的操作则可以设置单独的工作区域，而不是跟导航栏抢占位置。如一些美化图片类的app、音频剪辑类的app。这些工作区域通常放在页面的底部，方便用户切换和预览效果，预览通常会使用水平列表的方式，通过滑动手势来预览。

垂直的工具栏和工具版：对于平板电脑来说，会采用与电脑软件一样的方式放在屏幕的两侧。

工具轮显：如p图app中的滤镜。

三、抽屉

抽屉和ios的标签栏是一样的，是安卓里用来担任主导航任务的控件，通常通过汉堡包按钮打开列表。

抽屉的好处：可以放很多项的内容，页面有更多的区域可以展示内容。页面干净整洁。去电：用户转到其他区域需要先展开导航，适合用在最重要的内容只有一类的app，如果重要的内容有多个，则适合用ios式的导航。不常使用的的app不要使用抽屉。

抽屉可以用在导航上，也可以用在app中次要对象的交互上，这种情况通常会使用屏幕右侧的抽屉，如slick。

工具类app也可以使用抽屉，如内容发布类app，path／微博。

条目级抽屉：隐藏在条目的右侧，需要右滑才能显示，缺点是没有明显的视觉提示，需要用户学习，另外就是占用了屏幕的水平滑动操作，其他地方不能使用这个操作。例如ios中右滑删除短信、微信信息删除标为未读。

四、点击显示以及其他直接操作

轻拍显示控件

点击屏幕显示控件的操作在视频app上很常见，用户在观看视频的时候一些暂停／播放／进度条等内容都不显示，需要点击才会出现控件。

直接操作控件

捏合、旋转等会出现在图片编辑的软件上，需要用户学习，尽量使用一些初级的操作。in贴图工具在旋转图片的同时还能显示其他操作。

五、搜索、排序、筛选

1、隐式排序、显式搜索

手机app最适合做的事情就是浏览，聪明的应用会追踪用户的历史浏览痕迹，根据追踪的数据显示用户可能感兴趣的内容，将搜索结果的内容提前准备好。例如netflix。

搜索框依旧会在界面上摆放出来。

2、构建搜索需求

语音搜索、自动填充、预加载、最近／频繁搜索建议、自动推荐（模糊匹配技术）、分类推荐（豆瓣搜索）

输入并不是app最擅长的，通过上述方法减轻输入负担。还可根据app自身的特点，如淘宝提供拍照搜索，微博热门标签搜索。

3、排序、筛选（搜索结果页面）

当搜索结果比较多的时候，可以提供搜索排序＋筛选功能，排序和搜索一般是一起出现在搜索结果页的最上面，结果较多的时候要提供重置功能。

六、欢迎和帮助界面

欢迎界面一般分为导览和覆盖层。导览一般由带有文本和图片的卡片轮显组成，卡片中主要描述app的主要功能，首次使用、重大改版的时候会出现导览页面，应提供跳过的按钮，控制在3-5页较为合适。可随时从帮助／设置菜单中调用。

覆盖层是一种简单明了的帮助手段，通过半透明遮罩的方式告诉用户主要的功能操作，通常使用手写字体加箭头／手势图来引导。轻拍或关闭按钮关闭覆盖层，可随时从帮助／设置菜单中调用。

三、多点触摸手势

常见的触摸手势不宜过多，点击、滑动最为常用，另外还有手指张和、旋转、双击（回到顶部）、长按、重按、多指滑动。

轻拍：选择、激活控件，高亮状态

拖滚：用来滚动列表。pc端较多。

拖移：移动或复制对象。

多指滑动：mac操作较多。