本文转自百度MUX,一款手机小应用,却包罗万象,将这种复杂的信息内容或功能逻辑融为一体。为了让用户在使用中获得最佳体验,快速掌握应用的框架结构,其导航的设计是一个重要的环节。移动应用程序中的导航非常类似于现实世界中的路标或地图。它是应用软件的虚拟框架,具有指示和识别用户的功能。例如,导航可以像路标一样定位用户当前使用的位置,为用户突出显示当前视图的重要功能,告知用户可以去哪里,快速切换不同视图和区域的信息,记录操作轨迹用于防止用户迷路等。那么导航应该如何设计呢?APP导航设计的步骤主要有以下三个步骤:1.APP框架排列:信息架构或任务分析2.框架层级判断:平面vs树3.导航具体形式:控件形式和摆式为什么需要框架来组织地点?这与建造建筑物相同。在建造宏伟的建筑之前,需要预先规划建筑中的各个小房间,以确保建筑结构的正确规划和布置。这意味着在App设计的初始阶段,首先需要建立一个App蓝图,以保证在后续的软件导航设计过程中,设计者能够对功能产品的层次和需要的上下文关系进行宏观控制。被考虑。框架组织的方法在构建蓝图的过程中,需要根据App本身的特点选择合适的方法。目前的App应用主要可以分为两类,内容浏览应用和功能操作应用。对于内容浏览应用,需要通过信息架构的方法对信息数据进行整合和分类。对于功能运营应用,需要采用任务分析的方法,对功能进行分解和组织,形成闭环的网络运营模式。信息架构的定义和使用信息架构是一种对信息进行组织和分类,提高信息的可用性和可查找性,从而更高效、有序地被用户识别的方法。这种方法起源于图书馆的图书分类。图书管理员可以对相似的图书进行分类编号,方便读者在数以万计的图书中快速、方便地找到自己需要的图书。随着计算机科学技术的发展,信息量与日俱增,这种方法也被广泛应用于虚拟数据和信息的管理,如数据库、内容管理系统CMS(contentsmanagementsystem)和网站设计。大规模数据信息结构复杂,这类信息的结构需要专业的信息分析师从多个维度进行分析和整理。在实际的手机产品设计中,信息量比较简单,目前对这类信息采用的分析方法主要有信息结构、逻辑树和卡片分类三种方法。信息结构主要是从物理世界中人们普遍认同的信息基本结构来排列信息,比如歌曲的标题信息按照26个字母的顺序排列;逻辑树是根据人们心智模型中普遍认可的信息逻辑结构,按照树状逻辑对信息进行排序,如类别信息(颜色,材质等),从属信息(红色属于颜色,木头属于材质);卡片分类是针对一些不确定的信息,根据用户习惯,通过卡片分类和统计的方法对信息进行分类,广泛应用于电子商务商品分类和站点地图的设计中。任务分析的定义和用法(来源:约克大学,HCI课程讲义)任务分析是指分析用户为实现某个目标而执行的一系列动作或认知过程的行为。通过任务分析,设计者可以清楚地了解当前APP所要实现的功能层级顺序和系统中的信息传递状态,从而全面把握产品的结构和用户当前需要进行的操作在设计中。.任务分析的首要任务是了解用户的目标,然后拆解用户的操作以达到目标。这时,每一个操作都可以看作是一个原始任务。在原有任务的基础上,根据需要的深度,对任务进行更详细的拆解。在产品设计中,一般将拆卸终点视为一个可以独立设计分析的子单元。分析完App的框架结构,基本确定了产品功能的逻辑层级。建议可以使用一些框架绘图软件,将分析整理的框架记录下来,形成大蓝图。在后期的导航设计中,很多功能的排列布局可以直接从图中所示的位置关系来设计。在导航设计中,经常遇到的功能层级主要有两种:一种是平面层级,即在框架蓝图中功能属于同一层级。具有更多功能的视图,例如Dashboard和列表设计;另一种是树级的,即信息结构比较有层次或者任务之间存在从属关系,用户需要一层层深入视图,比如iOS中的单视图。进一出分层导航。仪表板是平面分层导航设计中经常使用的一种模式。系统首页和App入口被广泛用作全局导航方式。在手机操作系统中,一般采用图标和消息编号的组合方式,让用户可以在首页选择自己想要使用的软件功能。遵循这样的思路,在APP的设计上,APP首页呈现扁平化的信息层级供用户选择,让用户快速定位到自己关心的功能点。这种导航设计的好处是app的功能结构比较扁平,用户可以快速了解整体结构。同时,由于过多的功能选项集中在首页,单个功能的层级不宜过于复杂,提供快速返回首页的功能是很有必要的。设置,允许用户再次做出选择。列表设计适用于内容浏览类应用的扁平化信息层次设计,将同一层级的分类信息聚合成一个垂直列表。在操作系统中,这种导航设计主要用于通讯录、歌单、按项目名称排列的商店应用等扁平化区域。同样,在App的设计中,类目信息较多的电商应用、单项名称聚合的应用、信息订阅类新闻应用的导航方式都属于典型的扁平化信息层次结构,因此列表导航的设计也很适用。并且根据各自的特点,还存在一些细微的差别。比如淘宝的分类目录导航,按照用户的热度从上到下设计分类;而Eataly的菜单导航由于名称的聚合,在右侧提供了一个方便的字母索引;BBC的News导航类似于分类信息和条目信息的综合导航。因此,在列表导航的设计中,除了根据用户的关注度从上到下排列之外,分类栏目在浏览过程中也可以方便地收起或展开或悬停。页面顶部。(图片来源:http://www.androidpatterns.com/)树状层次结构设计被广泛应用于移动设备的设计中。不同于传统PC时代广泛采用的“面包屑”网格设计,树状层级结构只允许用户从唯一的入口进入,通过唯一的出口返回原处。这种设计模式非常适合具有非常复杂的功能层次或垂直信息架构的应用程序。用户可以在某个分支上清晰地前进和后退,而不用担心在App中丢失当前位置。App设计中树状导航有两种形式。一是iOS中的导航栏设计。用户从列表导航中选择一个项目进入下一级,通过导航栏左上方的“返回”按钮返回上一级。整个导航给用户一种在大树上垂直攀爬的感觉。另一个设计是WindowsPhone7上的MetroUI设计。如图所示,对应层级的下层内容以tile同维度展示,并以左右方式进行逐层导航。全球设计。通过前面两步的分析和设计,App的导航结构可以算是基本完成了。但是因为现在手机平台太多了,用户的使用习惯也不一样。因此,在产品的具体设计中,为了给产品提供最佳的用户体验,还需要把握平台的特点,选择合适的控件形式,根据用户的需求设计最方便的导航位置。到用户手持设备的操作系统。比如树状导航栏设计,iOS导航栏控件被安排在屏幕顶部,因为在使用触摸屏时,顶部区域是信息显示率最完整的区域。信息不易被手的运动轨迹遮挡。通过这个导航栏,用户可以实时定位自己的当前所在位置,以及可以返回的上层界面。整个导航栏控件由三个子控件组成:“返回按钮”、“页面标签”和“可选管理区”。“后退按钮”一般放置在左上角区域,让用户在浏览完树级信息后,可以通过该按钮逐层返回上一级。按钮本身的设计返回按钮只对应唯一的入口信息,不允许多级返回按钮。页面标签应显示当前视图信息的高级概览,并可相应显示视图标题、序号位置等。可选的管理块可以用来在屏幕上放置一些重要的操作,实现对屏幕内容的管理(如添加、编辑、翻页、删除、播放、详细内容等)。但是只能放置一种管理按钮。(图片来源:http://www.androidpatterns.com/)至于Android的树级导航,更多依赖于底层硬件实体导航控件。主流的Android硬件导航提供了四个功能:返回、菜单按钮、移动桌面和搜索。后退按钮允许用户返回到功能操作的上一步。菜单按钮可以显示当前视图中的相关操作,最多可以有6个,但与iOS的“可选管理区域”的设置方法略有不同。这个区域一般是全局函数操作,所以不一定每个view都一样。密切相关。手机桌面,用户点击后会快速回到安卓手机桌面,这是全局导航的一种体现。搜索按钮,如果执行的应用程序中有搜索设置,会打开软件的相关搜索部分;如果没有搜索,则调用系统默认的搜索引擎综上所述,手机产品的导航设计需要根据硬件的特点和用户的使用习惯,明确设计的整体框架和结构来设计。通过理性的架构分析、感性的体验设计、良好的导航结构,可以让你的App设计更有效。
