当前位置:首页 » 图片素材 » app导航栏图片素材
扩展阅读
不合群男人图片 2025-02-10 07:41:46

app导航栏图片素材

发布时间: 2023-06-05 10:43:43

Ⅰ 有哪些堪称神器,却鲜为人知的网站

既然是鲜为人知的神器,那肯定是要选择知名度不是那么高的,但是使用体验却非常好的平台,当然这样的平台很多,但是太多了找起来是不是很不方便?所以我给大家推荐的都是实用性超高的导航网站,各种各样的有价值的干货导航!

1.科技网站大全-科技海-科技网址导航-产品经理网址

【这个网站几乎囊括了所有和科技相关的网站,无论是创业,投资,产品学习应有尽有】

Ⅱ 产品笔记一:使用axure8.1制作手机app底部导航栏效果

使用工具:Axure pr 8.1版本。
制作效果如下图:选中任意tab切换到对应界面,以及选中状态的改变。

作为一名初学者,元件的组合选中以及拖动,动态面板的使用,中间还是有几个细节需要注意的,笔者初学自己研究了好久,网络并没有用,也许是关键词不合适,总找不到合适的答案。好,废话不多说,下面开始操作步骤。

1.1、创建导航栏母版,axure界面左侧底部母版栏,点击加号创建一个母版并命名。
1.2、双击母版,进入母版编辑页面。在这里进行那些拖动等操作啦。

2.1、我们观察到导航栏总共5个tab组成,每个tab里有两个元素一张图片,一个文本标签。但是为了可以方便的设置宽高调整距离均分屏幕并且组合拖动设置点击状态等,我们将图片和文本放到一个矩形框里。

2.2、拖动一个矩形到界面上,拖动一张图片原件,一个文本标签元件。如下图,调整大小样式等。

2.3、要想整体拖动这三个元件,那么就要将这三个元件组合在一起。按住command键(我用的mac),选中矩形,图片,文本标签 右键-->点击组合,即可将是哪个元件组合在一起。

2.4、点击组合元件右键-->转换为动态面板。双击它,会弹出下面的弹窗,输入动态面板名称。添加状态:选中以及未选中两个状态。你可以先添加选中,然后双击选中状态进入编辑选中状态页面,添加选中时的图片,文字以及文字颜色等。然后回到动态面板点击加号旁边的复制可以复制选中的状态,并命名为未选中,双击未选中去修改里边的图片以及文字颜色等即可。这样间距之类的就不用去重复设置了。

2.5、其他四个tab只要复制第一个创建编辑好的动态面板去修改里边的状态的图片和文字就好了,就不用重复创建了。

2.6、拖动到底部导航栏矩形内部调整好间距均分屏幕。

3.1、给每个tab点击时要进入对应的页面,那么我们在下图中添加5个对应的页面。

3.2、选中第一个tab,在左侧首页属性,点击鼠标单击时。如下图:

点击链接,打开链接,当前窗口,点击首页,确定。

3.4、至此底部导航栏母版制作完毕。然后最后一步,将母版应用在各个页面上。点击右侧底部导航栏,右键-->选择将母版添加到页面中。选择全部全部页面即可。

点击首页Tab,选中首页时,其他tab的状态需要变成未选中。这个是如何改变呢?通过页面载入时,设置各个tab的状态
4.1、比如点击找车页面,右侧属性,点击页面载入时。如下图:

4.2、双击页面载入时,弹窗,选择设置面板状态,找车选择选中状态,其他选择未选中状态。其他tab相同设置。如下图:

至此,所有步骤完成。

发布预览一下就可以了。

Ⅲ app界面设计尺寸规范大全

原型设计尺寸

☆ 状态栏(status bar):就是电量条,其高度为:20px;
☆ 导航栏(navigation):就是顶部导航,有线其高度为:45px;没有线高度就是44px;
☆ 主菜单栏(submenu,tab):就是标签栏,底部导航,其高度为:46px;

☆ 信号格:5 * 5
☆ wifi 图片:11 * 9
☆ 锁:11 * 11
☆ 导航:8 * 8
☆ 电量:22 * 9
☆ 闪电:5 * 8
☆ 状态栏中的文字:10px

☆ 顶部导航栏的图标尺寸为16x16px左右,底部标签栏的图标尺寸为23 x 23px左右。

☆ 导航栏的文字大小最大值是14px,底部标签栏的图标下方的文字大小为10px。
☆ 内容区域的文字大小是:10px, 12px,14px,16px。锋者贺

① 文字黑色:#282828
② 文字深灰色:#656565
③ 文字浅灰色:#989898
④ 边框浅灰色:#C3C3C3
⑤ 背景淡灰色:#f2f2f2
⑥ 按钮背景纯白色:#ffffff

A、疏远距离:比如,所有元素距离手机屏幕最左边的距离。
B、亲密距离:比如,左边图标与右边文字之间的距离。

1、iPhone6手机模型尺寸:429x881px
2、界面尺寸布局:满屏银派尺寸375x667px
3、高度电量条高度20px,导航栏高度44px,标签栏高度46px;
4、各区域图标大小导航栏图标16px,底部标签栏图标23px;
5、各区域文字大小电量条-文字10px,导航栏-文字14px,标签栏-文字嫌闭10px;
6、常用的文字大小:16px,14px,12px,10px;
7、常用的颜色:背景浅灰色:#f2f2f2, 文字深黑色: #323232,边框色深灰:#CCCCCC;
8、常用可点击区域的高度(比如搜索区域):28px;
9、单行文字的背景框的高度:44px,双行则为:88px,三行则为:132px;
10、常用间距:亲密距离:10px;疏远距离:15px,其它距离:5px,22px等;