入门:移动APP中的各种导航

即使是移动应用界面的原型设计,导航的形式也可以多种多样。尽管尺寸小,又必须紧凑排列大量数据,它们似乎受到了紧密的约束,但依然有着形形色色的选择。

人们曾经一度只会考虑一种形式——流行且广泛使用的垂直导航,即侧边栏。尽管如此,还有其他可以提升用户体验的形式,会让用户浏览你的APP变成小菜一碟。

列表型菜单

让我们从一种基于列表的标准型导航开始论述,它在移动APP作者中得到广泛使用。这种解决方式建议逐一展示链接,让用户遵循从上到下的常规流程。

Sergey
Valiukh的GIF动画设计只是一件概念设计,却完美地反映出列表型导航的实用性。结合了多种色彩和精细的线形图标,还有稍显粗重的字体,让用户轻松浏览APP,并且不会感到屏幕局限导致的不适。

Fueled的Elevatr是一个时尚的APP,帮助企业家管理和跟进商业会议。主屏的特点是彩虹色的菜单,清晰地逐行展现出控制面板的各个项目。背景图受到坐标纸的启发,与这种菜单完美搭配。

Kutan URAL 的HabitClock
App是个简洁且有视觉感染力的APP,帮助你管理早晨的闹钟。尽管屏幕上的重点是顶部和底部的控制面板,但列表型导航(同时也是非常棒的通知工具)才是吸引注意力的核心。

横条状的布局方式,用来展现简易侧滑菜单上的一系列链接,这是多数设计师的人气选择,也是Davis
Yeung设计的iOS版Instagrab主要组成。通常每一项都配有一枚易懂的小图标,很好地区分每个链接。

矩阵或网格型菜单

占据全屏的网格型导航有助于强调导航,使它清晰易懂、显而易见。当你需要展示很多链接时,这种方式也很管用,一系列同样的网格,有效地将每一项与其他区分开来。

Michal Galubinskiand thoke
design的Vectra,有着不容忽视的导航。设计师不仅把菜单的6个项目伸展至全屏,还利用了巨大的扁平风格图标,很明显是为了大部分在线用户考虑。

Marco La Mantia & Simone
Lippolis的移动APP设计,Arrivo,巧妙地在严格的方形网格中组织大量数据。每个格子都扮演着功能性的作用;因为它不仅仅是显示数据,也让你通过底部滑出的一个小型控制面板调整它。颜色选择也非常明智,因为热烈的背景色调有助于有效地分配内容和区分网格。

Abracadabra,这个APP肯定是依照Sergey
Valiukh心中的复古风格来设计的,让这个APP有种明显的年代感。在此,设计师干练地将屏幕划分成6个相等的网格,非常易于浏览。扁平风格图标结合粗重的非正式字体,有助于提升易用性。

手绘风贯穿了Willis设计的T R A V E R S
E的每一个界面。这个APP基于明亮的单色背景和线形图标,因此主菜单看不到任何分隔线,却做到了井然有序,使得用户相当轻松顺手地浏览这款APP。

底部菜单

底部菜单主要是作为导航的辅助,用来区分内部的功能区块或独立组件。

Jakub Antalík的Badoo概念设计有着位于屏幕底部的导航。它也包含了一组扩展菜单,每一项都有它自己的控制面板。

Virgil
Pana设计的动态滑动标签,为重度信息展示型应用提出了一个完美的解决方法,能够包含大量统计数据,或者通过图表展现数据,并仍然保持简洁。常规大小的菜单从屏幕底部滑出,显示出一个小型控制中心。

顶部菜单

既然我们习惯于从上到下浏览手机屏幕,放在屏幕顶部自然有一定优势。标签页和每个控制中心独有的图标,是这种布局最重要的代表。

Cüneyt ?EN的Horner包含了可隐藏菜单,不过它能很妙地从顶部出现。由于明亮的颜色和有关联性的巨大图标,它与整个界面内容形成了鲜明对比。

Enes Dan??设计的Discovery Channel将所有的基本导航和二级导航放在顶部,通过固定的位置来打消用户的困惑。

HAMZAQUE
Designs为Bettertec设计的气流计算APP,巧妙地运用了占据顶部的标签页。此外,它们被设计成黑白对比的色调,和屏幕中其余部分相同。

MING Labs&Pierrick Calvez的Shario APP,透露着简洁的矢量风格概念。整个导航通过顶部的几个按钮运转起来。

展开式菜单

对于处理大信息量APP和喜欢创作简洁紧凑界面的设计师而言,展开式菜单确实是一项至宝。这种方案允许你把菜单图标放在任何地方,不过它通常是在左上角。

Al
Powerd的MuSeek是个音乐APP,需要为用户提供大量可视化信息:专辑封面、描述、歌曲名称、曲目列表等等,所以没有空间来放置全屏菜单。在这个例子中,左上角的小图标就是一根救命稻草,平滑地展现出一列相当巨大的菜单。

Mohammed Alyousfi & àlex Casabò的Univit
UI设计,这是一款优雅的扁平风格APP,使用了一个标准的滑出菜单,通过简单的滑动操作触发。菜单采用了易懂且时尚的轮廓型图标,比各自的标题都大许多。这种方式使得菜单可以很自然地在设计中发挥作用,同时也提供更好的用户体验。

Alexandre Efimov设计的SVOY
APP基于一套艳丽的配色方案,与深色的背景有效搭配。设计师让菜单从左侧展开。吸引眼球且逼真的折叠动画,也给设计增添了一些趣味。

Attila Szabó的Id?kép又是展开式菜单的一个变种设计,利用几乎占据满屏的梦幻般“拉窗帘”效果来显示菜单本身。

结论

每种方案都有自己的优势与劣势,这就是为什么每个项目都提倡它独有的导航类型,可以有效地应对任务,并对用户体验有帮助。

转自:http://select.yeeyan.org/view/418335/408007

时间: 2024-10-17 02:01:52

入门:移动APP中的各种导航的相关文章

【iOS开发】在 App 中加入 AdMob 广告 - 入门介绍与编程技巧

前言 虽然在App中加入广告来盈利是比较低级的商业化方式,但对于个人开发者或者小团队开发者来说,做出一个简单易用的免费小工具(举个栗子),在里面加入一些广告,如果用的人多,也是可以带来一些可观的收入的.用户没有掏钱,得到了方便,开发者也得到了回报:) 我个人出于对金钱的考虑和对Google的信任,选择了AdMob这个平台来在App中投放广告(https://apps.admob.com 访问需要搭梯子,梯子为SS的用户最好全局代理,自动代理的话访问起来会很卡). 就目前来看,我果还是不太擅长移动

在 C# App 中嵌入 Chrome 浏览器使用 CefSharp

介绍 以前曾试过在app中整合一个可靠又快速的web浏览器吗? 在本文中,你会学到如何轻松地将奇妙的CefSharp网页浏览器组件(基于Chromium)集成到你的C# app中. 然后,你可以使用此web浏览器: 给用户提供一个集成的浏览体验 用HTML / JavaScript编程添加嵌入式界面 用于web自动化 CefSharp可靠,快速,完全开源,不需要任何额外的依赖就可以安装到最终用户(除VC ++ Runtime 2013以外). 在本指南中,我们将使用WinForms项目,但Cef

构建基于WinRT的WP8.1 App 01:页面导航及页面缓存模式

本篇博文主要阐述基于Windows Runtime的Windows Phone 应用页面间导航相关知识,主要分为以下几个方面: Window.Frame和Page概览 页面间实现跳转 处理物理后退键 页面的缓存 Window.Frame和Page概览 基于WinRT的Windows Phone 8.1,每个App只有一个Window. 每个Window都有自己的Frame和导航栈, 以及自己的Page. Window中有一个Frame,并且100%撑满可视区域,通常Frame也是100%撑满Wi

用户体验:移动 APP UI 的底部导航设计

设计师都知道,设计不只是为了好看.设计也决定用户如何融入一个产品,无论是网站还是app.这是一种交谈.导航菜单就是一种交谈.因为如果用户不明白使用方式,你的网站或app再漂亮都没用. 图片来源:Behance 为什么底部导航如此重要? Steven Hoober在他的关于移动设备使用状况的研究中发现,49%的人依靠一根手指完成手机上的操作.在下图中,手机屏幕上的画面表示大致的触摸范围,不同颜色表示用户能用拇指在屏幕上触及的区域.绿色表示轻易触及:黄色表示需要伸长手指:红色表示需要用户改变持握方式

AppleWatch开发入门七——watchOS中通知的应用

AppleWatch开发入门七--watchOS中通知的应用 一.引言 在iOS系统中,支持的通知有两种类型:本地通知和远程通知.本地通知多用于计时类通知,远程的又称推送,多用于一些提示动态的提示信息.这里有相关通知的一些知识总结: 本地推送:http://my.oschina.net/u/2340880/blog/405491. 远程推送:http://my.oschina.net/u/2340880/blog/413584. 在watch中,通知是和iphone同步的,在iphone上的Ap

JSPatch来更新已上线的App中出现的BUG(超级详细)

JSPatch来更新已上线的App中出现的BUG(超级详细) 字数2858 阅读422 评论15 喜欢29 JSPatch的作用是什么呢? 简单来说:(后面有具体的操作步骤以及在操作过程中会出现的错误) 1.iOS应用程序上架到AppStore需要等待苹果公司的审核,一般审核时间需要1到2周.虽然程序在上架前会经过测试人员的测试,但有时候还是不免会发生新版本上线后出现严重的bug,导致用户刚升级到新版本就出现crash,严重影响用户体验. 2.这时能做的只是赶紧修复bug然后提交等待漫长的App

Android 应用中十大导航设计错误

原文网址链接:http://www.geekpark.net/topics/199244 1. 将导航项放在 Action Overflow 里 我应该已经不止一次在各种 App 上看到有人把导航项放在 Action Overflow 中了.经常被放进 Action Overflow 的导航有"主页","商店","我的信息 (微信,twitter 中枪)",甚至一些分类.但是 Action Overflow 真的不是导航项该去的地方,别忘了这地方

Windows Store App 中挂起时,程序奔溃的问题

昨天在开发windows phone 8.1程序时,发现程序在挂起的时候,会自动退出.通过调试发现错误信息是 System.Runtime.InteropServices.COMException (0x80004005): Unspecified error GetNavigationState doesn't support serialization of a parameter type which was passed to Frame.Navigate. at Windows.UI.

自己动手去除app中谷歌广告

最近想去研究一下去除app中的谷歌广告,由于换了手机,且使用安卓6.0系统,暂时不能root安装辅助软件. 前言: 查看了很多网络文章,一般都是两种方法:把显示广告大小的参数改为0,或是修改广告访问的连接为无效连接,前一种比较通用且简单,后一种比较费功夫,但是更节省流量和系统资源 ,然后发现网络上的文章大多是转载的,且转载文章的人没有检测实际效果和实验环境,没有备注实验时间,这样很多转载的文章只是提供一个思路,但已经达不到效果了,所以只好重新研究一下,因为我没有系统学习java语言,只能看到什么