MockingBot
Sorry, your browser is not supported. Please download MockingBot for Windows.
Online prototyping & real-time preview
We also provide versions for ，，， and .您所在的位置： &
微信小程序新手教程设置底部导航栏
编辑：xwgod
来源：下载吧
　　微信小程序新手教程设置底部导航栏，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧　　小程序的头部标题 设置好了，我们来说说底部导航栏是如何实现的。　　我们先来看个效果图　　这里，我们添加了三个导航图标，因为我们有三个页面，微信 小程序最多能加5个。　　那他们是怎么出现怎么着色的呢?两步就搞定!　　1. 图标准备　　阿里图标库 /collections/show/29　　我们进入该网站，鼠标滑到一个喜欢的图标上面 点击下方的 下载按钮　　在弹出框中 选择了 俩个不同颜色的 图标 选择64px大小即可，我选择的是png 然后下载下来 起上别名　　将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中，准备工作就做好了　　2. 更改配置文件　　我们找到项目根目录中的配置文件 app.json 加入如下配置信息　　&tabBar&: {　　&color&: &#a9b7b7&,　　&selectedColor&: &#11cd6e&,　　&borderStyle&:&white&,　　&list&: [{　　&selectedIconPath&: &images/111.png&,　　&iconPath&: &images/11.png&,　　&pagePath&: &pages/index/index&,　　&text&: &首页&　　}, {　　&selectedIconPath&: &images/221.png&,　　&iconPath&: &images/22.png&,　　&pagePath&: &pages/logs/logs&,　　&text&: &日志&　　}, {　　&selectedIconPath&: &images/331.png&,　　&iconPath&: &images/33.png&,　　&pagePath&: &pages/test/test&,　　&text&: &开心测试&　　}]　　},　　解释一下 对应的属性信息　　tabBar 指底部的 导航配置属性　　color 未选择时 底部导航文字的颜色　　selectedColor 选择时 底部导航文字的颜色　　borderStyle 底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)　　list 导航配置数组　　selectedIconPath 选中时 图标路径　　iconPath 未选择时 图标路径　　pagePath 页面访问地址　　text 导航图标下方文字　　如果要改变更详细的样式 请参看　　https://mp./debug/wxadoc/dev/framework/config.html#tabBar　　好了，保存 编译 就可以看到上面的效果了。
微信小程序相关软件
微信小程序相关教程
微信小程序相关新闻
微信小程序问题汇总
微信小程序使用教程
微信小程序开发教程
热门关键字中国领先的IT技术网站
51CTO旗下网站
为了让iPhone X更好浏览网页，我给网页加了个导航按钮
iPhoneX 发布之后，全新的屏幕和为之适配的iOS系统，为我们呈现出全新的交互。之前我们习惯了的交互，在这块带着刘海的屏幕上，不再完全相同，之前恰到好处的设计，在这块屏幕上似乎也没法完美的运作了。产品设计师Daniel Korpai 发现了在iPhoneX移动端网页导航上存在的交互上的问题，并撰写此文。
作者：佚名来源：| 14:11
编者按：iPhoneX
发布之后，全新的屏幕和为之适配的iOS系统，为我们呈现出全新的交互。之前我们习惯了的交互，在这块带着刘海的屏幕上，不再完全相同，之前恰到好处的设计，在这块屏幕上似乎也没法完美的运作了。产品设计师Daniel
Korpai 发现了在iPhoneX移动端网页导航上存在的交互上的问题，并撰写此文。
使用汉堡菜单还是使用标签式导航，是移动端UI设计师常常会纠结的问题。就目前来看，随着手机屏幕尺寸不可控制的逐步膨胀，标签式导航似乎越来越受欢迎。
不过值得注意的是，在移动端上APP会更加倾向于使用标签页导航，而绝大多数的移动端网站仍然会使用汉堡菜单作为主要的导航工具。值得注意的是，汉堡菜单这种设计在目前越来越大的手机屏幕上，可用性正在逐渐降低。
关键的痛点
绝大多数的时候，我们会在行进中使用手机，在地铁上，超市里，在下班路上，这个时候我们常常无法双手操作，手上提着袋子，或者拿着一杯咖啡，或者握着地铁上的扶手。但是往往这个时候，我们更需要同界面进行快速的交互。
多数传统的移动端网站导航，要么在页面的最顶端，要么在最底端，可是问题在于，手机屏幕太大了。网页的汉堡菜单图标却常常位于手机的左上角或者右上角，恰好是距离拇指最远的位置。
面对的挑战
面对这种痛点，UI和UX设计师们并没有忽略。有不少设计师会和开发者协同，在网站界面的底部放置一个小尺寸的固定导航栏。在桌面端上浏览的时候，它看起来是悬浮在页头的导航，在移动端上，它是悬浮固定在页面底部的快速访问式的小的导航按钮组合。
随后，这种尝试逐步演变成了靠近汉堡图标的一系列快速访问功能按钮，这些按钮代表着这个网站的重要、常用的功能元素，可能是导航、电话、特定页面的链接等等。
可问题在于，在iPhone
X上，即使是这样设计的导航，可用性依然存在问题，承载浏览器主要交互的按钮又需要从界面顶部触发。同时，网页底部内置的菜单其实是会让人分心，整个体验是支离破碎的。
落地的设计
所以，我琢磨着设计出一套能够尽量兼顾到包括iPhoneX在内的所有设备的移动端网页导航，尽可能让它易用且解决各种痛点。我的方法不复杂，就是在移动端网页靠近底部的位置上增加一个悬浮的菜单按钮。
这个固定位置的悬浮按钮居中靠下，无论是左手握持还是右手握持都能正好点击得到。为了不受到iPhoneX
屏幕边缘圆角的影响，也尽量不影响内置的导航工具栏，我决定让这个按钮点击触发之后，展开是一个横跨屏幕的菜单栏。按钮的位置靠近底部但是不靠近边缘，不会遮盖到iPhoneX
的Home键。位置的选取并不难。
点击悬浮按钮之后，网页菜单展开，也会触发并调用系统内置的浏览器导航菜单，两者合而唯一。用户不仅可以在上面的网页菜单中调用各种针对当前网页的操作，还能点击下面的浏览器菜单，针对不同网页进行操作。
不过，这个解决方案还不是完美的。在iOS的 Safari 浏览器上，点击屏幕底部的任何元素，第一次点击会触发Safari
浏览器内置的菜单栏，第二下才会真正触发这个悬浮的网站导航栏。不过开发者可以有针对性地进行调整，欺骗iOS Safari
浏览器，让它在第一下点击的时候就触发这个网页导航。
可用的原型
在设计原型的时候，我的目标是创造一个响应快速而简短、可交互的原型，确保它在开发人员那边看起来也是可行的：
/shots/3851367-iPhone-X-Web-Navigation-Idea
最终的思考
这并不是一个太复杂的设计项目，但是在实际需求上，却是实实在在地解决了令人纠结的痛点。这个概念设计在大型的移动端设备上其实也能够轻松实现。不过，它还能继续深入地探索下去，比如，它在iPad
Pro 的浏览器当中，这个导航按钮放置在哪个位置更合适呢?设计师还可以仔细衡量这个按钮是否要在滚动浏览的时候隐藏起来，怎么隐藏，何时触发。
我想，这才是UI/UX设计师需要思考的问题吧。
【编辑推荐】
【责任编辑： TEL：（010）】
大家都在看猜你喜欢
头条关注热点热点热点
24H热文一周话题本月最赞
讲师：51698人学习过
讲师：92419人学习过
讲师：36954人学习过
精选博文论坛热帖下载排行
在开始学习WAN资料时，我经常面对资料深度不够或者为电气工程师编写的书。另外，在看了几本书，并且对Internet进行了研究以后，我觉得应当...
订阅51CTO邮刊25个适用于手机网站的菜单插件 | 设计达人
爱设计，爱分享。
25个适用于手机网站的菜单插件
赞助商链接
制作在桌面平台使用的网站菜单并不复杂，因为已经有很多案例给我们参考了，但是如果我要在手机网站制作呢？它的菜单要是怎么样显示？手机或平板电脑的分辨率比桌面电脑要小，一般菜单都不够位置展示，当然分行显示也是可以的，但是作为一个，分行你不觉得很丑陋么，下面我给大家一些方案吧。
现在绝大部分人都使用了智能手机，而这些设备主要用Android、iOS、Winphone等系统，所以内置的浏览器一般也支持CSS和jQuery，下面我们精选25个适用于手机网站的菜单插件，这些插件设计以及交互很不错，也适用在，所以推荐使用它们，当然你也可以参考这些菜单重新设计样式，对于Web设计师来说并不是难事。
jQuery.mmenu
jPanelMenu
Slide and Push Menus
Google Nexus Website Menu
Transitions for Off-Canvas Navigations
Pure CSS Responsive Nav
Multi-Level Push Menu
Responsive-Menu
SmartMenus
jQuery Navobile
jQuery ReSmenu
Flaunt.js for stylish responsive navigations with nested click-to-reveal
Drop-Down Navigation: Responsive and Touch-Friendly
CSS3 Responsive menu
Responsive Retina-Ready Menu
TinyNav.js
Responsive Navigation
HorizontalNav
Easy Responsive Tabs to Accordion
从上面的插件可以看到手机菜单主要使用侧边栏来展示，和一些APP的UI设计十分相似，其次使用下拉框或响应式设计，这些都是很好解决网站菜单的显示问题，通过这些插件，手机网站已经是未来需求，这些插件确实很有用处，记得收藏或分享，以备一时之需，最后希望你能设计出更多更棒的移动设备界面！
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
艺术与审美入门之书
设计师必看
手机APP设计
新手推荐！
Web用户体验入门书籍
web前端&设计群&&完大家做web网页页面导航菜单设计，怎么把菜单模板加入到各个页面之前做项目一直使用iframe，有次看到篇文章，说国外完全不用iframe，最近有想法把页面重新学一下，但不知道菜单有哪几种加载方式，希望大神们能给个方式，或者思路就比如这个，我说的导航模板就指这一部分。2个牛币所有回答列表(4)&LV4给你分享下最代码的页面结构吧。页面间复用避免用iframe，除非后台管理那样的很多菜单的。seo方面对iframe也不推荐。最代码页面自上而下有4种页面：header.htmnav.htm业务.htmfooter.htm其中header是全局的header和css，js导入的代码nav是整站导航代码业务是相对应的每个业务的代码，分别通过freemarker include的语法导入header,nav,footer，实现页面的复用footer是整站的底部代码另外其实还有个特殊的类型需要强调些，就是那种公用的模块，最代码是通过freemarker的macro实现的。比如所有的分享列表就可以抽象为share_macro最佳答案sitemesh 。用起来不错& &ui:include src=&MainNav.xhtml& /&d等等等完等等等完等完完等相关问答完完等等完完等完完完完等最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友