【读书摘记】移动应用UI设计模式

摘自大豆瓣
耗时:两天

读后感:基础性知识,很多适合新手的干货,读起来很轻松。书内提供的案例有一定年代感,拟物化确实比扁平化的认知难度要高。

第一章 导航

主要导航模式:跳板式(Springboard)、列表菜单式(List Menu)、选项卡菜单式(Tab Menu)、陈列馆式(Gallery)、仪表式(Dashboard)、隐喻式(Metaphor)、超级菜单式(Mega Menu)。

次级导航模式:页面轮盘式(Page Carousel)、图片轮盘式(Image Carousel)、扩展列表式(Expanding List)

1.1主要导航模式

完美的导航设计能让用户根据直觉使用应用程序,也能让用户非常容易地完成所有任务。

1.1.1跳板式

跳板式导航的特征是——登录界面中的菜单选项就是进入各个应用的起点。

常见的布局形式是3×3、2×3、2×2和1×2的网格(见图1-6)。但跳板式导航不一定非要拘泥于网格布局,你可以成比例地放大某些选项,以彰显其重要性。个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能,允许用户改变跳板式导航的布局。

为同等重要的内容项使用网格布局,为相比之下更为重要的内容项使用不规则布局形式。视情况使用个性化设置和自定义选项。

1.1.2列表菜单式

列表菜单式导航与跳板式导航的共同点在于,每个菜单项都是进入应用各项功能的入口点。这种导航有很多种变化形式,包括个性化列表菜单(Personalized List Menu)、分组列表(Grouped List)和增强列表(Enhanced List)等。

列表菜单很适合用来显示较长或拥有次级文字内容的标题。使用列表菜单的应用要在所有次级屏幕内提供一个选项,用来返回菜单列表。通常的做法是在标题栏上显示一个带有列表图标或“菜单”字样的按钮。

1.1.3选项卡式

选项卡式导航在不同的操作系统上有不同表现,对于选项卡的定位和设计,不同操作系统有不同的规则。

为已选择的菜单项设置不同的视觉效果,用户就能清晰地知道自己选择了哪一项。使用易于识别或带有标签的图标。

1.1.4陈列馆式

陈列馆式的设计通过在平面上显示各个内容项来实现导航,主要用来显示一些文章、菜谱、照片、产品等,可以布局成轮盘、网格或用幻灯片演示。

陈列馆式导航能很好地应用于用户需要经常浏览,频繁更新的内容。

1.1.5仪表式

仪表式导航提供了一种度量关键绩效指标(Key Performance Indicators,KPI)是否达到要求的方法。经过设计以后,每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用。

不要使用过多的仪表式导航。你需要开展研究才能决定应该对哪些关键量度采用仪表式导航。

1.1.6隐喻式

这种导航的特点是用页面模仿应用的隐喻对象。

一定要谨慎地使用隐喻式导航,蹩脚的模仿很可能造成10.1节出现的反模式 (anti-Pattern)。

1.1.7超级菜单式

移动设备上的超级菜单式导航与网站所用的超级菜单导航类似,它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。

在选择导航模式之前,首先要确定信息架构。如果要导航的对象仅仅是应用中少数主要内容,就可以使用选项卡之类的导航模式。

1.2次级导航模式

所谓的次级导航(Secondary Navigation)是指那些位于某个页面或是模块内的导航。所有的主要导航模式都可以用作次级导航。还有一些其他的导航模式也可作为次级导航,但不太适合用作主要导航:页面轮盘式、图片轮盘式、行内扩展式。

1.2.1页面轮盘式

操作者可利用“滑动”操作快速浏览一系列离散的页面。页面指示器(Page Indicator,iOS中的术语,指用来表示页面数量的小点)可以显示出导航中的页面数量;执行“滑动”操作可以显示下一页。(例:banner)但数量不可过多。

页面轮盘式导航可以很好地实现少量页面的导航。利用直观的指示器来表明总屏数和当前所处的位置。页面轮盘式导航通常用“滑动”动作实现操作。

1.2.2图片轮盘式

图片轮盘式导航能很好地显示清新悦目内容,如艺术品、产品或照片等。无论是使用箭头、部分图片内容或是页面指示器(点),它都能提供良好的视觉化功能可见性,以此告知用户有更多的内容可以访问。

1.2.3扩展列表式

扩展列表式导航通过下拉屏幕显示更多的信息。这种导航模式多见于网站的移动版本,移动应用中使用较少,但在这两种情况下都能很好地工作。

扩展列表式导航能很好地逐步显示某个内容项的更多细节或选项。

第二章 表单

常见表单模式:登录表单(Sign In)、注册表单(Registration)、核对表单(Checkout)、计算表单(Calculate)、搜索表单(Search Criteria)、多步骤表单(Multi-step)、长表单(Long Form)。

2.1登录表单

登录表单应该只包括少量的信息输入:用户名、密码、操作按钮、密码帮助、注册选项等。a.有些应用将这些信息输入框设计在一屏内显示。b.另外一些应用,则首先显示“登录”或“注册”选项,然后根据用户的选择将其导向相应的表单。c.有一种登录表单直接抛弃了用户名输入框,只要求用户输入密码。在安装应用时,用户就已经具备了使用权限,只要再输入密码就可以访问敏感数据了。这种形式多见于金融领域的应用,

不要自己“独创”登录表单,采用常见的设计方案,这样更易于用户登录。提供取回已忘记密码的方式。

2.2注册表单

a.注册表单与登录表单一样,应该只包括少量的信息输入。(如果注册步骤太繁琐,会降低表单填写的成功率)b.注册表单有可能是你为应用设计的第一个表单,所以设计的标签应当易于阅读。不要把标签和输入框水平排列,而应该采用垂直排列的方式。(此点有待商榷)c.适当的时候,以内联(Inline)的形式显示反馈信息。

注册界面应该简洁明了,最好在一屏内显示完所有要填的信息,注册按钮应该显示在同一屏幕内。确保已注册用户能很容易地登录。

2.3核对表单

a.与使用应用程序核对信息相比,更常见的方式是通过专门为移动设备优化后的网站核对信息,但两者的设计原则是相通的。b.在核对表单中使用设备的标准控制方法。c.把多屏信息合并到一个核对表单中。d.提供快速核对机制,比如核对已存储的名片信息,或通过登录核对信息。e.在标题处显示安全锁来向用户表明当前连接是安全的。f.使用信息核对向导。

把提升速度、效率和让用户放心作为设计目标。去掉不必要的输入域,减少页面和操作步骤。

2.4计算表单

计算器类的应用,例如体重跟踪、税款预估以及贷款计算器,需要输入信息。虽然这些表单可以采用常见的操作和布局方式,但也不能忽视可读性方面的基本设计原则。——对齐方式、标签、字体、按钮位置、数据比较方式、色彩搭配等所有方面都影响着移动表单的可用性。

使用标准的表单设计和布局原则。如果可以,在同一页面内显示计算结果,位置尽量明显。

2.5搜索表单

某些搜索功能要求用户输入多个约束条件或标准,才能找出搜索结果。与其他表单模式一样,搜索表单也应该只包括必要的输入项,并提供合理的默认值。

不要让太多的搜索选项吓到用户,把搜索条件控制在一页之内。采用能够通过手指,方便且快速操作的控制方式。

2.6多步骤表单

移动设备的屏幕较小,没有足够的物理空间,无法像网络应用那样显示臃肿的多步骤表单操作向导,所以需要显示当前操作步骤和总步骤数,遵循导航设计的基本可用性原则:让用户知道自己在哪里,将要往哪里去(也就是位于第x步,总步数为y步)。如果操作流程很长,就多加几个步骤表单。清晰的导航对移动表单尤为重要,因为用户使用移动设备时被打断或走神的概率更高。

告知用户当前所在的位置和将要去的地方。去掉不必要的输入域,最小化页面和操作步骤的数量。

2.7长表单

某些表单可能会需要滚动屏幕才能浏览完。长表单的最精妙之处在于,它用命令取代了按钮。设计时要注意沿用最好的表单设计经验,遵循特定操作系统的按钮排列顺序和排列准则。

不要人为地把表单划分成一些步骤来避免屏幕的滚动。坚决要去掉那些不必要的输入域。遵循特定操作系统中按钮布局的标准。

第三章 表格和列表

常见表格模式:基本表格(Basic Table)、无表头表格(Headerless Table)、行分组表格(Grouped Row)、固定列表格(Fixed Column)、级联式列表(CascadingList)、可编辑表格(Editable Table)、带有视觉指示器的表格(Tables with VisualIndicator)、带有内容总览和数据的表格(Overview plus Data)等。

3.1基本表格

这是表格的标准模式,其中的列数据有固定的表头,表格呈网格式布局。为表内的行设定不同的颜色(这种形式也称为斑马纹),或者在各行之间用细线分割,都能提升表格的可读性。

不要使用暗色的网格线和垂直分割方式。文字左对齐,数字右对齐。一屏幕内显示的表格内容不宜过多。如果要在单个屏幕内显示大量信息,请采用其他方式。

3.2无表头表格

无表头表格的特征是——没有列标签,用较宽的行显示某一对象的多项信息。通常的做法是,用较大的字号显示行标记,用较小的字号显示细节内容。这种表格模式非常适合用来显示项目集合(如存货清单、食谱、相册等)和这些项的搜索结果。与列表类似,这种形式能方便用户快速浏览和选择。

每一宽行内最多显示三行信息。不太重要的细节内容使用较小、浅色的字体。不要自己猜测什么信息最重要,而要询问客户的意见,然后作出行之有效的设计。

3.3固定列表格的表格

对于较大的表格,固定某一列或某几列是个可行的做法。例:最左边的一列固定,其他列滚动显示。或同时固定屏幕左边和右边的列,在中间区域滚动显示内容,要注意用户可以执行滑动操作的区域不要过小。

为固定的列设计比较醒目的样式,以提示用户,滑动操作能浏览更多的数据。

3.4带有内容总览和数据的表格

带有内容总览和数据的表格模式指在表格各数据行上方显示表格内容的总览。

表格内容总览应该显示在数据上方,且要一目了然。

3.5行分组表格

对表格的行进行分组能让用户更容易地了解表格内的数据。行分组的作用类似于各个部分的标题。

在表格中为内容总结行设定与其他行不同的视觉效果。

3.6级联式列表

iOS将这种表格模式称为表格视图,它是一个在多行单列内显示数据的UI元素。

使用较为宽泛的信息结构可以避免在应用内产生较深的层次(多于3层)。如果用级联式列表来导航用户自定义的信息结构,则可能无法避免产生很多界面层次。

3.7带有视觉指示器的表格

火花谱线(Sparkline)和图标能提升表格的信息显示效果,可以让用户更容易地找到自己所关注的内容。

使用那些用户能够迅速识别的视觉化指示器,去掉那些不必要的图标。

3.8可编辑表格

网络应用中可编辑表格的很多设计原则都可用于移动终端的界面设计:

•清晰地显示出当前所选择的单元格和/或行;

•如果单元格有特定的格式,提供对应的编辑器(选择器、微调控制项、颜色选择器、数据选择器......);

•在用户执行保存操作时显示反馈和错误信息,而不是在更改表格时显示。

与网络应用不同的是,移动设备上的可编辑表格不适合用来输入大量数据,因为大部分移动设备的键盘都不支持键盘导航(尤其是基于Tab键的切换操作)。

网络程序和桌面应用程序设计之间的权衡为可编辑表格提供了丰富的可参考经验。不要为大量数据输入使用可编辑表格,当需要有大量可编辑元素时,也不要使用这种表格模式。

第四章 搜索、分类和过滤

常见模式:显性搜索(Explicit Search)、自动补全搜索(Auto-complete)、范围搜索(Scoped Search)、保存搜索记录并显示最近搜索内容(Saved & Recent)、搜索标准(表单)(Search Criteria (form))、搜索结果(Search Result)、屏内分类(OnscreenSort)、分类排序选择器(Sort Order Selector)、分类表单(Sort Form)、屏内过滤(Onscreen filter)、过滤容器(Filter Drawer)、过滤对话框(Filter Dialog)、过滤表单(Filter Form)。

未完待续....

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,757评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,478评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,540评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,593评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,903评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,329评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,659评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,383评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,055评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,337评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,864评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,227评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,820评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,999评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,750评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,365评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,260评论 2 258

推荐阅读更多精彩内容