童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

APP工具栏如何用Axure画出来

11月15日 碧落盟投稿
  工具栏用来展示和方便用户完成当前页面的主要操作,俗称操作栏。
  典型应用场景
  原型画法(无交互)
  工具栏通常包含多个操作按钮。位于屏幕底部。
  先画工具栏背景,从默认元件库拖动“矩形2”到工作区位置(0,617),修改尺寸为(375,50)。
  再画操作,从默认元件库拖动“链接按钮”到工具栏,双击输入文字“操作”,移动到合适位置。
  再画2个操作按钮。
  生成原型HTML并在浏览器中查看效果。
  原型画法(有交互)
  工具栏的常见交互效果:
  固定位置不随着页面内容而移动。方法同状态栏。
  每个操作按钮有不同的交互,需要单独设置。
  高保真原型画法
  接下来以“淘宝APP商品详情工具栏”为案例,讲解高保真原型的详细画法。
  先画工具栏背景。从默认元件库拖动“矩形2”到工作区位置(0,617),修改尺寸为(375,50)。
  再画店铺文字。从默认元件库拖动“文本标签”到工具栏,双击输入文字“店铺”,修改字体尺寸为12。然后从默认元件库拖动“图片”到工具栏,缩放到2020,移动它们到合适位置。
  然后从阿里巴巴矢量图标库网站http:www。iconfont。cncollectionsindex搜索“店铺”,找到合适的图标,下载svg格式。再双击店铺图片,导入该svg图标。并尽量缩放到当时设置的尺寸2020。
  如:需修改图标的颜色,请选中并右键“转换SVG图片为形状”,然后设置它的填充色为红色ff0000。
  再画客服和收藏。方法同上。
  再画加入购物车。从默认元件库拖动“矩形3”到工具栏的合适位置,修改尺寸到合适大小,双击输入文字“加入购物车”。修改文字颜色为ffffff,修改填充色为橙色ffa501,设置圆角半径100并取消选中“应用到右边两个边框”。
  再画立即购买。修改文字颜色为ffffff,修改填充色为红色fc4537。设置圆角半径100并取消选中“应用到左边两个边框”。
  生成原型HTML并在浏览器中查看效果。
  添加到APP元件库
  不同场景下的工具栏功能,操作不一样,位置是一样,样式相对固定。
  作者根据多年PM经验,总结出2种常用的“工具栏”,添加到APP元件库。
  工具栏(文字)
  工具栏(图标)
  注意事项
  工具栏很少和标签栏共存于一个页面中。
  工具栏最好有单独的填充色,方便和页面其他内容区分。
  有时候很容易把工具栏误认为标签栏,两者的区别是标签栏是承载APP整体的功能模块,而工具栏只是用来承载某一页面的常见操作。
  提供源文件下载学习https:pan。baidu。coms1lOysRY59IOQN7Hhl7jrI3g
  相关阅读
  APP单选功能如何用Axure画出来
  APP开关功能怎么用Axure画出来
  APP九宫格如何用Axure画出来
  APP上导航如何用Axure画出来
  APP下导航如何通过Axure画出来
  常见的列表页如何用Axure画出来
投诉 评论 转载

Axure教程:按钮的启用和禁用设计原型中常要用到按钮的禁用和启用,比如常见的:输入手机号获取验证码的获取按钮,在未输入内容前按钮不可点,输入按钮后,可点击获取按钮获取验证码。那我们本文就一起来看看按钮的启用和禁……Axure:一分钟制作二级折叠菜单上一篇文章写的拖动列表,里面用了一些公式计算有朋友说有点复杂了,今天做一个二级折叠菜单,个人认为算是我看到的所有文章里步骤最简单的实现办法了,如有更简单的欢迎交流讨论效果……Axure案例:电商购物车购物车功能已经成为各类电商系商品的一个基础功能,那么关于购物车页面的一些交互功能,如何通过原型设计去完成呢?本文以京东购物车为实例,将重点讲述关于购物车页面的交互用例设计。……Axure:一个简单的进度条,了解“触发事件”动作本文通过制作一个简单的进度条,顺便来了解一下“触发事件”动作。先看效果:涉及知识点:“设置尺寸”动作;元件变量:T元件属性:heigh……Axure教程:用Axure进行简单界面设计及交互效果本次作业为根据TIM登录界面截图,画出一副一样的原型。以TIM登录界面为例。一、分析当我们手里仅有这一张截图时,怎样利用Axure做出和截图一样的原形界面呢?……Axure:菊花转(页面加载动画)如何制作本文分享了页面加载动画如何制作,希望对大家有所帮助。先看效果:以下是制作步骤:第一阶段,素材准备(1)拉入一个圆注意:调整圆的大小,示例中是505……APP工具栏如何用Axure画出来工具栏用来展示和方便用户完成当前页面的主要操作,俗称操作栏。典型应用场景原型画法(无交互)工具栏通常包含多个操作按钮。位于屏幕底部。先画工具栏背景,从默……Axure:中继器实现表单增删改查在用Axure的时候,怎么通过中继器实现表单的增删改查呢?本文分享了一个方法。使用中继器设计表单,如下:一、分析在文本框中输入学号,姓名,成绩,班级,点击“新……玩转Axure:如何制作验证码倒计时?注册模块是每个产品必不可少的一部分,也是大部分产品经理着手设计一个产品时遇到的基础部分,在这里通过这个教程分享如何使用Axure中的动态面板实现获取验证码倒计时功能。在开……如何设计规范的原型图?首先需要了解交互稿和原型图的联系与区别:按照常规的工作流程,交互设计师最终交付的产物包括任务流程图、信息架构图、页面原型图、页面交互说明、页面流程图,这些都可以归纳到交互设计文……Axure:巧用交互样式实现多tab切换效果本文分享了在Axure中巧用交互样式实现多tab切换效果的方法,希望对大家有帮助。先看效果:步骤:第1步,先准备三个矩形。1个内容(结果)展示区域……Axure中继器:实现“万能”数据表模板的方法看过很多关于中继器的文章,但如果想要自己做一个,就要东搞西搞的,为了给很多“懒人”带来方便,本文要介绍的是一款通过简单修改,就可以满足使用者需要的“万能”表格。先秀一下(……
为什么网站打不开,网站打不开的原因是什么SEO优化,SEO人的高考简单才是王道网站维护关键是为用户提供价值如何吸引百度蜘蛛?百度索引量下降了怎么办?技巧之打造高质量内容SEO优化思考SEO优化技术之新网站上线多久才会有好的排名重庆SEO优化技术之让搜索引擎喜欢你的网站网站关键词排名为什么消失不见了?什么是高质量内容

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界