UI设计素材|底部导航设计的黄金法则_ui设计底部导航栏加底纹-程序员宅基地

技术标签: UI  

导航模式是提高可用性的捷径。当你查看近年来最成功的交互导航设计时,显而易见的赢家是那些完美执行基本原则的人。虽然跳出条条框框思考是一个非常好思维方式,但有些规则是你不能打破的。以下是创建出色的移动导航的四个重要原则:

简单首先,最重要的是,导航系统必须简单。良好的导航应该感觉像一只无形的手,引导用户。一种方法是根据移动用户最有可能执行的任务来确定移动应用程序的内容和导航的优先级。

可见正如雅各布·尼尔森( Jakob Nielsen)所说,识别物体比记忆更容易。这意味着你应该通过使操作和选项可见来最小化用户的记忆负担。导航应该始终可用,而不仅仅是在我们预期用户需要导航的时候。

明确导航功能必须是不言而喻的。你需要以简洁明了的方式传递信息。在没有任何外部指导的情况下用户应该一目了然的知道如何从A点转到B点。试想一下购物车图标,它作为一个标签或查看项目的标识符。用户无需考虑如何导航才能进行购买;此元素将指导他们执行适当的操作。

一致性所有视图的导航系统应相同。不要将导航控件放在不同页面上的新位置。不要欺骗你的用户,要始终保持言行一致。你的导航应该使用“最不意外的原则”。导航应该激励用户参与并与你所提供的内容互动。

大拇指设计法则史蒂文·霍伯在对移动设备使用情况的研究中发现,49%的人依靠一个拇指在手机上完成任务。在下面的图中,手机屏幕上的图表是近似可达图,其中颜色表示用户可以触及的屏幕区域,并与拇指交互。绿色表示用户可以轻松到达的区域;黄色表示需要伸展的区域;红色表示需要用户改变握住设备的方式的区域。

底部导航

底部导航材料设计 - FREEBIE FO

Twitter的重新设计(谷歌底部导航)

材料底部导航

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/awayaya1/article/details/109155162

智能推荐

lwip之ARP协议概念_lwip udp mac地址-程序员宅基地

文章浏览阅读4.1k次。什么是ARP协议ARP(Address Resolution Protocol)协议是地址转换协议。负责将IP地址转换为MAC地址。为什么需要ARP协议为什么要把IP地址转换为MAC地址,仅凭IP地址不能传输数据吗?我们平时不是说凭IP地址就能找到一台物理主机吗?在网络层以及更上层协议来说凭IP地址可以找到一台物理主机,而这是建立在有ARP协议的基础上。当应用层把数据传输到数据链路层时,如果没有MAC地址仅仅有IP地址,数据是不能在数据链路层传输的。好像陷入如下一个尴尬的局面:没有MAC地址就不能_lwip udp mac地址

JSP的7大动作_jsp7大-程序员宅基地

文章浏览阅读391次。jsp7大动作指令jsp:include用于动态引入一个 JSP 页面jsp:forward执行页面转向,将请求的处理转发到下一个页面jsp:param用于传递参数,必须与其他支持参数曲标签一起使用jsp:plugin用于下载 JavaBean 或 Applet 到客户端执行jsp:useBean使用 JavaBeanjsp:setProperty设置 JavaBean 实例的属性值jsp:get..._jsp7大

数组表示的二叉树_用数组表示二叉树-程序员宅基地

文章浏览阅读3.3k次。面试某厂的时候面试官问了二叉树最长路径的算法题,给定一个数组找出最长路径的值,第一反应就是动态规划,结果手写代码的时候懵逼想不起怎么通过子节点推算父节点的下标,特此记录警世自己。 fun main(args: Array<String>) { val t = Tree() t.printParentNode(1) t.printParentNode(2..._用数组表示二叉树

Osmocombb项目编译GnuArmToolchain中的GCC4.5.2时遇到recipe for target 'doc/cpp.info' failed(texinfo)错误的解决方法_gcc/doc/cppopts.texi:763: @itemx must follow @item-程序员宅基地

文章浏览阅读3.6k次。Osmocombb项目编译GnuArmToolchain中的GCC4.5.2时遇到recipe for target 'doc/cpp.info' failed(texinfo)错误的解决方法_gcc/doc/cppopts.texi:763: @itemx must follow @item

matlab的矩阵转置问题_reshape会打乱顺序吗-程序员宅基地

文章浏览阅读1k次。matlab中一个矩阵为1000行、2列数据的数据A,需要变为2行,1000列的数据B,这是一个矩阵的转置问题解决办法:B = A'注意:不要使用reshape,reshape时会出现重排数组的情况,这样会打乱数据的顺序。..._reshape会打乱顺序吗

typec扩展坞hdmi没反应_手机通过扩展坞连笔记本HDMI接口,笔记本屏幕为啥没反应?...-程序员宅基地

文章浏览阅读6.7k次。飚王出品,必属精品!最近安卓阵营新机发布不断,前有三星S20,后有华为Mate Xs,Vivo的iQOO 3等,各种酷炫卖点狂轰滥炸,狠狠地激起了网友们的选择困难症。不过他们都有一个共同特点,就是带Type-C接口(里边的协议各不相同)。如果Type-C接口是USB3.0以上且带DP功能,那就可以视频输出,接上扩展坞小屏手机秒变大屏。手机通过扩展坞小屏变大屏因此就有网友将手机接Type-C扩展坞后..._笔记本自带hdmi,扩展坞的hdmi不能用?

随便推点

@在 centos7 下安装 oracle 12c_在设置specify recovery options 时报磁盘空间不足-程序员宅基地

文章浏览阅读1.1k次。@在 centos7 下安装 oracle 12c文章目录@在 centos7 下安装 oracle 12c环境安装必须的软件包前期准备修改 hostname配置 SSH 和 X11 转发安装 Oracle 12c创建目录和部署安装文件创建安装用目录(按照OFA标准)修改 ulimit 值:最大文件描述符数为4096修改 ulimit 值:最大用户进程数为16384增大 tmpfs 到4GB若 ..._在设置specify recovery options 时报磁盘空间不足

程序员的那些反模式-程序员宅基地

文章浏览阅读2.2k次,点赞4次,收藏7次。有鸡汤就有反鸡汤,有模式就有反模式。今天,我们来谈一谈程序员的行为中的那些反模式,涉及程序员的日常工作和学习的各个方面。这些反行为模式,并不针对某些特定的个人。如果你不幸中招,千万不要懊恼,因为这实在太正常不过了,很多反模式的坑我也是亲身踩过的^-^稍微修改几行代码就调试对所有程序员来说,这个行为有一点心理上的原因:工程师都喜欢在做完一点修改之后,立即看到它的效..._反模式开发

人工智能、机器学习和模式识别以及神经网络_智能控制,智能检测,模式识别,神经网络,模糊逻辑,机器学习,人工智能,深度学习,优化-程序员宅基地

文章浏览阅读2.8k次。梯度下降的定义梯度下降问题就是沿着导数下降的地方移动,直到某点梯度最小,这个时候就达到了最优解多变量的梯度下降问题神经网络中遇到的问题是多变量的最优解,即多变量的梯度为零的解局部最优和全局最优问题通常,我们求得的最优解不一定是全局最优解,其可能只是局部最优解。..._智能控制,智能检测,模式识别,神经网络,模糊逻辑,机器学习,人工智能,深度学习,优化

每个人在职场上都不是一帆风顺的,总是会在工作中遇到各种各样的困难_工作没有一帆风顺总有坎坷不平-程序员宅基地

文章浏览阅读2.4k次。每个人在职场上都不是一帆风顺的,总是会在工作中遇到各种各样的困难,这时候有些职场人就会坚持不住,产生消极的情绪,这对我们在职场上的发展是很不利的。为了我们能在职场上更好的发展,一定要学会控制好自己的情绪,要有一定的心理承受能力。有一些人,因为自身性格的原因,喜欢比较与别人在习惯或者生活中的不同,通常会表现出一种自卑的心理。那你一定不要有这样的想法,每个人从小的生活经历不同,做事习惯肯定也不相同,因此我们要在职场上中养成这四个好习惯,让我们在职场上更加自信。要勇于认识自己的缺点在工作中,我们通常会对自己_工作没有一帆风顺总有坎坷不平

Eigen notes_eigen::matrix4f转eigen::affine3f-程序员宅基地

文章浏览阅读193次。Eigen::Affine3与Eigen::Matrix4的转换// Matrix4f to Affine3fEigen::Matrix4f matrixTrans;Eigen::Transform<float, 3, Eigen::Affine> affineTrans (matrixTrans);// Affine3f to Matrix4fEigen::Transf..._eigen::matrix4f转eigen::affine3f

ubuntu顶部栏的图标隐藏办法_ubuntu20.04隐藏顶部状态栏-程序员宅基地

文章浏览阅读1.4k次。前言我使用的是ubuntu20.04版本,最近安装的应用多了以后顶部图标栏的图标太多了,就找了些方法,终于让我找到了一个插件解决这个问题。教程1、打开网址https://extensions.gnome.org/2、搜索Icon Hider3、下载安装即可..._ubuntu20.04隐藏顶部状态栏

推荐文章

热门文章

相关标签