技术编程|Axure原型设计:移动端标签和菜单原型的应用
编辑导语:无论我们使用什么APP或者网站 , 往往都会下意识地去寻找菜单栏和标签栏 , 方便我们更快捷的查找到想要的信息 。 尤其是在使用移动端时 , 屏幕的大小让我们更需要菜单的指引 。 那么在Axure原型设计中 , 移动端标签和菜单原型是如何应用的呢?本文作者为我们进行了详细地解答 。
本文插图
标签和菜单好比是一个分类器 , 将不同的内容分门别类 , 用户能够通过标签和菜单快速找到对应的内容 , 所以标签和菜单在系统原型设计中是非常重要且常用的 。
相比web端而言 , 移动端的屏幕更小 , 所以标签和才的应用的场景就更广阔了 。
本文梳理了移动端常用的标签和菜单的原型 , 其中包括页面菜单、侧栏菜单、弹窗菜单、锚点菜单、顶部标签菜单和底部标签菜单 。
一、页面菜单
现在一些综合型的app(微信、qq等)由于功能太多 , 都会有专门的菜单页面 , 方面展示不同的内容 , 使用页面菜单页方便用户快速寻找到需要的内容 。
我们在画这种页面菜单的时候 , 一般是使用中继器制作 , 由图标+文字的方式展示 , 点击菜单内容时跳转至对应的动态面板或对应的页面 。
使用中继器制作的优点维护简单 , 不需要重新设置交互 , 新增菜单列的时候 , 只需要更新中继器表格即可 。
本文插图
二、侧栏菜单
侧栏菜单和页面菜单很像 , 只不过是把页面菜单变成在左侧弹出的菜单 , 可以自由显示和隐藏菜单 , 菜单显示时不会离开原来的页面 , 这种菜单即实用又美观 。
同样的侧栏菜单同样是用中继器制作 , 所以维护成为也低 。
本文插图
三、弹窗菜单
弹窗菜单和前两者最大的区别是:弹窗菜单的菜单内容少 , 他不会像前两个菜单一样把大多数或者全部的内容页面展示出来 , 弹窗菜单只是对当前页面内容的补充或者是放一些常用的功能(例如扫码、搜索等) , 一般菜单行数为3-6行 。
我们设计的时候 , 也是使用中继器来制作 , 方便维护 。
本文插图
四、锚点菜单
锚点菜单和上面3个菜单不同 , 上面三种菜单 , 点击菜单内容后都是跳转到对应的页面 , 但是锚点菜单点击后不跳转至其他页面 , 只是滑动至页面的对应位置 , 可以说是对本页内容的快速搜索 。 锚点菜单经常应用于购物、外卖等app 。
我们使用Axure设计的时候 , 一般会用锚点或者移动的事件 , 点击菜单不同的内容移动到对应位置 , 由于每个菜单移动的位置不一致 , 所以用中继器制作反而不太方便 , 我们就用形状文字添加移动的交互即可 。
本文插图
五、顶部标签菜单
顶部标签菜单 , 这种标签菜单的优点是不暂用很多位置 , 不需要专门的页面 , 也不需要弹窗 , 只需要在顶部预留一行文字的位置即可 , 用户通过点击不同标签切换内容 , 方便快捷 。 我们同样用中继器制作 , 维护时更改表格文字即可 。
本文插图
六、底部标签菜单
底部标签菜单 , 和顶部标签菜单不一样 , 顶部标签菜单会把所有的页面标签显示出来 。
但是底部的标签菜单一般只显示重要或者用户常用的页面 , 一般而言是4-5个标签 。
推荐阅读
- 技术编程|后台权限管理设计思路:三种模型分析
- 技术编程|如何利用数据库进行世界史研究
- 青年|西安邮电大学与安康汉滨区深度合作,研发适合毛绒玩具全产业链实用技术
- 无人科技,电池技术|盘点几种常见的无人机电池
- 行业互联网|让青少年爱上科学 核桃编程AI人机双师模式受关注
- 技术编程|无服务器调研,部署REST API是最普遍用例
- 京东,折叠屏手机|围绕柔性屏的技术、特性、应用、产业化进行了非常专业的解读
- 云计算|腾讯云小微首次技术开放日,揭秘AI语音背后的奥秘
- iQOO手机|“快稳双全”!120W超快闪充技术炫技,十五分钟充满电量
- 驱动中国|国内首次应用!支付宝开放宠物鼻纹识别技术:猫狗都能买保险