一、解剖移动应用
受限于手机、平板的尺寸,大部分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操作较多。
网友评论