手机导航栏规范

最新推荐文章于 2024-03-12 17:19:47 发布
最新推荐文章于 2024-03-12 17:19:47 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： UI设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43324273/article/details/100867858
版权
旧爱学长
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android4.0设计规范优先导读十大改变
03-04
在拜读和翻译了Androiddesign设计指导后，对比Android4.0与Android2.3及之前版本的app设计指导，总结了Android4.0设计的10大改变：由之前的物理按键导航（返回、菜单、搜索、主页）变成了嵌入屏幕的虚拟按键（返回、主页、最近任务）。左侧为早期有4个物理按键的手机，右侧为新版只有3个虚拟按钮的手机把菜单项和搜索项从导航栏去掉，把之前通过长按主页键才出现的最近任务直接展示在导航栏中。把菜单收起的同时，在软件界面的操作栏上增加了“更多操作”（actionoverflow），如下图中的黄色圆点所示。黄色圈部分为“更多操作”（actionoverflow）的位置和点击后
Android UI规范
07-31
Android UI设计规范文档 1 设计原则 2 风格 2.1 设备和显示 Android 驱动了数百万的手机、平板和其它设备，兼容了各种屏幕宽度和比例。利用 Android 灵活的布局系统，您可以创造出从平板到手机都看起来很优雅的应用。 灵活 对您的布局进行放大、缩小或者裁减以适应不同的高度和宽度。 优化布局 在较大的设备上，善于利用大屏幕的优势。设计混合的视图以显示更多的内容，提供更简便的导航。 适用于各种设备 为不同的像素密度 (DPI) 提供不同资源 (比如drawable) ，使您的应用在任何设备上都看起来很棒。 策略 那么您应当如何开始为多种屏幕设计呢？一种方法是以一个基本的标准 (中等尺寸，MDPI) 开始，之后将其缩放到不同的尺寸。另一种方法是从最大的屏幕尺寸开始，之后为小屏幕去掉一些 UI 元素。 2.2 触摸响应 使用颜色和高亮效果来响应用户的触摸，突出显示手势的效果以及表明哪些操作是可用的。 任何时候，每当用户触摸您应用中的可操作区域，都应当给予视觉上的响应。这样可以使得用户了解他触摸了啥，并且表明您的应用一直在工作。 按钮的状态 大多数的 Android UI 元素都有内置的触摸反馈效果，包括表明元素是否可以操作的视觉效果。 交流 当您的对象需要对复杂的手势做出响应时，应当帮助用户了解该操作的结果将会是什么。例如，当您在 Android 系统“最近的应用”界面左右滑动一个缩略图的时候，它会开始变淡。这样做就使得用户明白滑动可以移除这条记录。 边界 当用户试图滑出可滑动区域的范围时，应当在边界提供视觉的反馈。例如，如果用户试图从主屏幕的第一屏向左滑动时，屏幕就会向右倾斜表明不能再往这边移动了。许多 Android 的可滑动 UI 类 (例如列表 lists 和网格列表 grid lists) 都已经内置了边界反馈。如果您需要自定义界面时，记住要提供边界反馈哦。 2.3 度量单位和网格 总的来说,可触摸控件都是以 48dp 为单位的。 为什么是 48dp？ 一般情况下，48dp 在设备上的物理大小是 9mm (会有一些浮动)。这是触摸控件的推荐大小 (范围7-10mm) ，用户用手指触摸起来比较容易、且准确。 如果您设计的 UI 元素都至少有 48dp 的高度和宽度，那么可以保证:  您设计的元素在任何屏幕上显示时，都不会小于推荐的最低值 7mm。  你可以在信息密度和界面的可操控性之间得到较好的平衡。 注意留白 界面元素之间的留白应当是 8dp。 一个例子 - Examples
uni-app实现自定义导航栏，兼容H5、App、微信小程序
最新发布
为技术而生
03-12 3709
uni-app实现自定义导航栏，兼容H5、App、微信小程序 很多情况下，系统自带的导航栏无法满足UI设计的要求，这时候就需要我们自定义导航栏来实现需求，要考虑跨端的多种情况，这里我们封装成一个组件来使用...
二级菜单小知识
weixin_74220994的博客
06-18 333
二级菜单实现的一些小问题
HTML导航栏二级菜单（垂直、水平方向）
weixin_48591974的博客
09-12 4011
二级菜单是指主菜单的子菜单。菜单栏实际是一种树型结构，子菜单是菜单栏的一个分支。简单分享主要的垂直和水平方向的CSS设计。
手把手教你制作手机底部导航栏，领导看完都说好
来自上海的这位朋友
09-19 5163
手把手教你制作手机底部导航栏，领导看完都说好
Web前端二级导航栏设计
IT OR 考公？
04-06 3254
初学web，220行代码，巨丑
二级导航栏（html、css)
热门推荐
leihao-lester
10-13 1万+
二级导航栏（html、css) 效果图： 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial
五中常用简洁后台导航菜单（一级导航，二级导航，手风琴式导航，左或右悬浮式导航，树状导航）...
weixin_30588675的博客
08-18 1187
首先附上源码，可以下载！ http://yunpan.cn/cd9ivPcL4ayQT （提取码：d8a5） 在建立导航菜单的时候，我们首先布局一个(" 头"+【左，右（自适应）】+”尾“）的HTML页面； 来看一下HTML页面的编写： <div id="container"> <div id="head"></div> ...
DEDE织梦 导航栏调用一级、二级、三级目录
树欲静而风不止
05-12 1678
后台栏目设置为3个顶级栏目，每个顶级栏目下分别有二级栏目和三级栏目 前台首页导航栏效果如下： 前台代码如下： <li> {dede:type typeid='1'}<span><a href='[field:typelink/]'>[field:typename/]</a></span>{/dede:type} <ul> {dede:channelartlist type.....
一个不错的tab效果的导航菜单（一级和二级为横向）
web开发自学
10-05 850
&lt;!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;htmlxmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;metahttp-eq
手机界面设计尺寸规范
03-29
导航栏高度 标签栏高度 (此图片来源于网络，如有侵权，请联系删除! )(此图片来源于网络，如有侵权，请联系删除! ) iPhone6P、6SP、7P 1242×2208 px 401PPI 60px 132px 146px (此图片来源于网络，如有侵权，请联系...
苹果页面设计规范
01-08
如iPhone678的状态栏40px，导航栏88px，导航栏下导航80px，列表卡片88px，按钮88px，小标题栏64px，标签栏98px，都是 8的倍数，最小距离也是8px。 ios最小点击区域尺寸为88x88px。 标签栏布局中的图标大小最好都是44...
＜CSS＞一级导航栏和二级导航栏
Snowyufly的博客
07-18 8808
二级导航栏的制作
关于js实现二级导航栏的总结
蓝猫爱睡觉
02-23 2682
标题 关于js实现二级导航栏的总结 此篇为个人实现后的个人总结 1.所谓二级导航栏，就是在ul li 标签中嵌套一个ul li标签 但是THML+CSS实现不了导航的隐藏与显示，因此要靠js来实现 当我点击的时候，二级导航才显示出来，当我点击另一个的时候，隐藏其他的，再把当前我点击的显示出来 因此用JavaScript中的onclick属性放在第一级的li标签中 然后通过js获取下一级ul的 id...
简单二级导航栏的写法
kodopy的博客
07-08 3674
二级导航栏主要就是要实现鼠标移动上去之后二级导航栏就出现的效果，现在的大部分网页都会用到这个导航栏。 HTML部分： <div class="nav"> <ul class="oneNav"> <li><a href="">首页</a></li> <li><a href="">购物车</a> </li>
android实现底部导航栏和顶部导航栏（相当于网页上的一级菜单和二级菜单）
u012361418的博客
05-25 4814
android 顶部菜单和底部导航栏
iOS iPhone各机型尺寸及导航栏高度
u013712343的博客
06-22 6448
引言 很多小伙伴，在开发过程中，经常遇到尺寸不明，无法呈现最好的结果，今天整理一下iPhone5到iPhone XS Max的尺寸及导航高度 设备型号 iPhone4,4s iPhone5,5s,5c,SE iPhone 6,6s iPhone 6Plus,6sPlus ,iPhone 8Plus,7Plus iPhone 7,8 iPhone X,iPhone XS iPhone Xs Max iPhone XR 尺寸 3.5 4英寸
html响应式手机导航栏菜单
06-06
可以使用HTML、CSS和JavaScript来创建响应式的手机导航栏菜单。以下是一个基本的例子： HTML代码： ``` <a class="navbar-brand" href="#">Logo <span class="icon-bar"></span> <span class="icon-bar">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值