UI设计中的框架、栏、视图与控制器

一、app框架

在前期,我们要慎重考虑我们的app框架设计,在设计app框架时,产品经理和设计师需要着重从范围层(功能规划)、结构层(交互设计)、框架层(界面设计、信息设计)、表现层(感知设计)来分析(当然,战略层主要由老板来想了)。

常见的app框架有列表、网格、屏幕轮显、标签导航、tab导航、抽屉导航、卡片、泳道、堆叠组合。

792e59afb82ba801211d25433ad0.jpg

1、列表

列表(list),常见于功能比较单一的应用场景,是app中最常用的一种方式。列表内容常见形式有:文字列表、图标和文字的混合列表、标签和控件(复选框、按钮)列表、图片和视频缩略图与文字组合列表。遵循由上至下的阅读习惯方式,所以使用起来用户不会觉得困难。合理的应用列表,给自己的app加分。iOS和安卓的列表最小高度是不同的,安卓48dp,iOS的是44pt。

081159afb859a8012028a9d081d1.jpg

2、网格

网格(grid)就是把应用图标、缩略图、功能图标等内容根据水平方向和垂直方向划分所构成的辅助线进行布局。在界面设计中,九宫格这种类型的构图更为规范和常用,用户在使用过程中非常的方便,应用功能会显得格外的明确和突出。很明显的例子就是iPhone、安卓、windows phone主界面,均是采用的网格布局设计。

在应用中,网格布局通常用来展示媒体内容,比如照片、视频、音乐专辑等;或者是包含图像、文本、按钮、链接元素的卡片。和列表一样,点击网格时,会进入到下一级内容,展现出另一个网格、内容列表、空间列表、预览页面、详情页面等。也可能会在当前页面弹出模态页面,进行更多操作。

网格也可以进行有限或无限的滚动,通常条目过多的时候会把下面的条目展示部分到页面上,指导用户还有更多内容。

3a4c59afb886a801211d2556069e.jpg

164959afb8a2a8012028a963f733.jpg

3、屏幕轮显

屏幕轮显(screen carousels)也是一种常见的交互方式,使用者可以向左或者向右滑动进行快速切换页面,比较适合页面层级较低的交互,几乎不需要进一步的交互(也不需要像“堆叠模式”深入导航)。轮显通常在屏幕下方有一个页标(小圆点)来导航。

轮显的优点就是交互层级低,一般不需要用户更多的点击操作,适合层级简单的应用,一个页面基本就能满足需求。缺点就是不适合交互复杂的app。常见的有ios的天气应用、墨迹天气、常见的app引导页。

d0e559afb8c3a801211d2511c9fe.jpg

4、标签导航

标签栏(tab bar)通常以文字、图标、或者文字图标组合进行展示。点击标签,主内容区的页面会跟着切换,展示对应的内容。标签栏在iOS中一般在屏幕下方,经常使用图标,并在图标下方加上对应的文字。在安卓中,标签栏通常在屏幕上方。

由于手机的尺寸有限,通常建议标签栏中的标签数量不要超过5个。如果超过五个,iOS通常用“更多…”来收起更多的标签,点击展开。顶部标签则采用滑动标签方式,展示更多标签。或者采用其他方式,如抽屉。现在比较常见的是app中再嵌入一个app,通常是点击一个标签,直接进入到另外一个框架,展示更多内容。

025659afb8e2a801211d2534cd0b.jpg

cab459afb8f7a801211d2534f58f.jpg

5、抽屉导航

抽屉(drawer)熟称汉堡导航,是把更多标签集合在一起,隐藏在抽屉中,点击抽屉图标,展示出来。和标签栏一样,被选中的项目会高亮展示。抽屉里的栏目样式不限定,常见的是文字列表或者带图标的列表,当然还有其他更多形式。抽屉的样式有两种,一种直接覆盖在原页面上,另一种是将原页面挤过去并排展示。抽屉的图标一般是放在左上角,但也有次要的抽屉放在右上角。

抽屉的使用也一直备受争议,支持者认为,手机屏幕小,隐藏菜单,能展示更多的内容;反对者认为,抽屉将功能隐藏起来,需要多一步操作,很多功能不明显,影响了使用。当然,两方的说法都没有错,只是我们要合理使用。对于常用的功能应用,使用抽屉并没多大影响,用户会很快适应。如果你使用抽屉,建议首次进入时直接打开抽屉,或者采用首次引导。但是,本身应用就很少被用到,建议使用标签导航,主流应用也是以标签导航为主的。

0b3559afb918a8012028a9165a4c.jpg

6、泳道

泳道(swimlane)是一组垂直排列的轮显,每个轮显能独立水平滚动,互不影响。泳道结合了网格布局的方法,排列比较规整。泳道的交互形式主要是:水平滑动(展示单条泳道里面更多的内容)、垂直滑动(展示更多泳道)、点击(进入泳道的下一层级)

泳道需要注意的是,不能设置为自动滚动。在进行排版时,将泳道内的最后一个内容露出部分,引导用户进行水平滑动,垂直布局上也应该如此,减少用户的迷茫。使用泳道是要谨慎使用的,因为后面被隐藏的内容是不容易被发现的,所以使用泳道的时候要考虑到优先级的问题。

b86859afb936a801211d25b1dcce.jpg

7、卡片

卡片(cards)包含一组特定数据集的纸片,数据集含有各种相关信息,例如,关于单一主题的照片,文本,和链接。卡片常见的组织形式是列表,有时候也会以网格、轮显、泳道的形式出现。卡片有这些特点:一清晰直观,二简单易懂,三信息模块化。

显示这些内容时使用卡片布局:

  • 作为一个集合,包含多种数据类型,如图像,电影和文本
  • 不需要直接比较(用户不直接比较图像或文字)
  • 支持高度可变长度的内容,如注释
  • 包含交互式内容,例如+1按钮或评论
  • 否则将在网格列表中,但需要显示更多的内容来补充图像

029059afb955a8012028a9b33158.jpg

8、堆叠组合

在非游戏类移动应用中,堆叠组合是最多使用的app框架模式。堆叠是常以列表、网格的形式存在,顶端或底端会有一个控制导航或访问功能的条栏。app中一种导航模式基本很难满足业务和使用需求,都是多个形式组合在一块,展示更丰富的内容。

如下图,汽车之家首页采用了轮显、泳道、底部导航、顶部导航;淘宝也采用了轮显、网格、底部导航。

513159afb971a801211d25d4a580.jpg

二、栏

各种“栏”:状态栏、导航栏、标签栏、工具栏、搜索栏、范围栏。

内容视图:列表视图、卡片视图、集合视图、图片视图、文本视图。

控制元素:用于控制产品行为或显示的信息。

临时视图:警告视图、操作列表、toast、模态视图。

1、状态栏

状态栏:展示了设备及其周围环境的重要信息

(1)状态栏是透明的

(2)避免滚动内容直接透过状态栏

2、导航栏

导航栏能够实现应用不同信息层级间的导航

(1)避免过多的控件填满你的导航栏

(2)确保你自定义的导航栏在你的应用的每个视图中都有一致的外观与体验

注:微信读书导航栏

1490975993-7519-03

3、工具栏

工具栏中放置用户在当前情境下最常用的指令

注:微信阅读书籍阅读界面工具栏

(1)尽量避免在工具栏中放置偶尔用到的指令

(2)工具栏中的所有指令和操作是针对当前屏幕和视图的

注:pmcaff中内容详情页工具栏,包含针对当前内容的功能按钮

几种常见的工具栏形式:

1490975994-5933-03

注:淘宝购物车工具栏,用于编辑购物车中商品,位于标签栏之上

注:知乎日报内容详情页工具栏,包含针对当前内容的功能按钮以及导航按钮,位于屏幕底部

注:微博编辑消息页面的工具栏

工具栏常用在一下几种情境中:

(1)内容详情页中,放置针对当前内容的编辑操作按钮

(2)图文编辑页面中,放置编辑时用到的工具按钮

(3)针对列表项中的内容进行编辑,例如:购物车中的商品、

4、标签栏

标签栏让用户在不同的子视图、任务和模式中切换

1490975991-8945-03

(1)标签栏最多一次可承载5个标签

(2)标签栏常应用应用的的主界面中,来组织整个应用层面的信息结构,也就是我们常说的几种主导航方式之一

(1)标签栏常用来作主导航方式来布置产品结构

(2)标签栏标签超过5个后,视觉上略显拥挤,平行主任务过多,容易给用户造成困扰

注:口袋记账当前版本标签栏

5、搜索栏

用于搜索内容,帮组用户精准的找到自己所需的信息和功能。可位于导航栏下方,也可以放在导航栏上。高度可以自定义,一般设计为44pt。

1490975995-4558-03

注:Safari搜索栏

搜索栏中可出现一下可选元素:占位符文本(文案提示)、书签按钮、清除按钮等

注:在行搜索框

注:UC浏览器搜索栏

5、范围栏

只有和搜索栏一起时才会出现,用于定义用户的搜索范围。位于搜索栏下方,高度可自定义,一般为30pt~44pt。

1490975996-5125-03

三、内容视图

1、列表形式(List style)

每条列表可以是单挑的图片形式或文本形式,也可以是图文结合的方式。每条列表之间会用分割线进行区分,利用“紧密、对比、重复、对齐”的原则设计每条列表的信息,使得信息清晰有力的传达给用户。

1490975996-7757-032、卡片形式(Card style)

将同类信息归纳到一个矩形或者圆角矩形当中。卡片可以被堆叠、覆盖、移动,这样极大的扩展了一个内容块的视觉深度和可操作性。卡片在设计形式上可以增加边缘、阴影,使得卡片具有立体感。

1490975997-2411-033、集合视图形式(Collision style)

将同类信息用平铺的形式展现,一般以图片为主题,文字为辅助信息。多用于展示商品、照片、音乐等富媒体信息。

1490975998-5958-034、图片形式(Image style)、文本形式(Text style)

图片和文本视图比较好理解,所以放在一起,图片形式多见于图片社交类APP,文本形式常见于内容类APP。

1490975999-6925-03  内容视图是整个APP信息展示的主要形式,上述的五种常见视图形式很多时候并不是独立出现的,它们常常混合出现,例如有些内容视图即属于卡片、又属于列表形式,需要在透彻理解的基础上灵活运用。

四、控制元素

控制元素控制元素用于控制产品行为或显示信息,常见的控制元素有包括页面控制器,分段式控件,开关,选择器,文本框,按钮,进度条,刷新视图,滑块。

见下图:

1490976000-7130-03

1490976001-5622-03

1490976002-7865-03

五、临时视图

临时向用户提供重要信息,或提供额外的功能和选项。常见的有警告视图、操作列表、toast、模态视图。

警告视图(Alert View):必须包含标题,或者标题加正文,有一个或者多个按钮。

操作列表(Action Sheet):由用户某个操作行为触发,包含两个或以上的按钮。

toast:在用户触发某个操作时,弹出toast来对该操作进行反馈。

模态视图:占据整个屏幕或者大部分屏幕,包含完成当前任务所需的文字和控件,通常也会一个完成任务的按钮(点击后即可完成任务,当前模态视图也会消失),和一个取消按钮(点击后即放弃当前任务,同时当前模态视图消失)

1490976003-4226-03

1490976004-7016-03

1、警告框

警告框用于告知用户一些会影响到他们使用APP或设备的重要信息

(1)严格限制app中警告框的个数,并且保证每一个保证框,都能提供重要的信息或者游泳的选项

(2)警告框应简明扼要的告诉用户当前所处的情景,并且告诉用户他们可以做什么

(3)尽可能地避免使用“你”、“你的”、“我”、“我的”等字眼出现

(4)避免在文案中详细描述“该按那个按钮”而导致文本过长

2、操作列表

操作列表展示了与用户触发的操作直接相关的一些列选项

注:下厨房上传作品操作列表

(1)提供完成一项任务的不同方法,这样多种操作方式不会永久的占用UI 的空间

注:探探上传照片或者视频

(2)在完成一项可能有风险的操作前获得用户的确认

注:腾讯新闻删除评论

(3)避免让用户滚动操作列表

3、模态视图

模态视图为当前的任务或当前工作流程提供了一种独立的功能,为用户提供了一种不脱离主任务的方式去完成一个任务或者获得信息

注:腾讯微云添加笔记

(1)模态视图通常会包含一个完成按钮和一个取消按钮(可根据实际功能/情景来进行调整)

注:简书编辑文章

(2)能占据整个屏幕,也可能占据屏幕的一部分

(3)选择一个适当的动画来展示模态视图

垂直出现:模态视图从底部边缘滑入屏幕,也同样从屏幕底部滑出

弹出:当前视图从右往左水平滑动,显示模态视图,离开模态视图时,原先的父视图从左滑回屏幕右边

PS:

(1)模态模型就像是导航模型中死胡同,它暂时覆盖应用正常的操作页面,让你去完成和父页面内容相关的一些任务

(2)通常模态视图都是由屏幕底部滑出,覆盖原有页面

(3)模态视图通常被用来添加或编辑内容

(4)模态视图属于正常流程上的一个临时支路

 

部分内容来源:
https://www.jianshu.com/p/97a085841145
https://mobile.zcool.com.cn/article/ZNTUxMTg0.html
http://www.yixieshi.com/77835.html

我要分享

huhu

作者: huhu

胡胡是我的女票,她以前有个网站,运行两年多后停掉了。她写了一百多篇设计心得,现在全部导入到了我的网站,如此,她称之为“强强联手”。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据