axure 画小程序效果图_APP详情页如何用Axure画出来
详情页是App原型中比较复杂的页面类型,熟悉它的常用套路有助于快速画出。
之前的文章已经讲解了APP常见功能中的页面模板、下导航、上导航、列表页怎么画出来,请继续关注浪子教你画APP原型后续的其他功能模块。
APP详情页往往包含上导航,内容区,工具栏三大部分,内容区会因为业务画起来很复杂。所以我们重点来聊聊内容区的画法。
常见的详情页类型
我们经常遇到的详情页有电商类的商品详情、团购详情、订单详情、活动详情,专题详情,以及社交类的聊天详情、主页详情、动态详情等。
常见的详情页组件
相信大家很容易分析得出,它们都包含很多相似的元件,比如通栏Banner,图片轮播,文字列表项,图标列表项。限于文章篇幅有限,下面是我经常用到的详情页组件:
图片轮播
图文卡片
通栏banner
文字列表项&图标列表项
圆形按钮&直角按钮
创建元件库并使用
所谓的画线框图,本质上就是堆砌各种组件。请根据自己项目的特点,将APP详情页常见的这些组件制作成Axure元件库。
元件库的制作方法并不复杂,点击Axure左方元件库-创建元件库即可。
需要注意的是:创建元件的时候,尽量以375×667的框架来建立,当然也可以以360×640来建立比较通用。具体原因参见《为什么375×667是移动端原型的最佳分辨率》。
之所以大家从网上下载回来的元件库,放到自己项目中感觉大小不太合适。主要就是尺寸不是遵循一个标准。
引用过去的rp源文件
每次画APP详情页的时候,我们可能会画一些以前画过的功能组件。所以我们应该养成保存过往项目RP源文件的习惯,
需要用到的时候除了可以打开过去的的rp源文件,复制所需的内容到当前rp源文件。
如果需要用到整个页面或者多个页面,更建议使用“文件-导入RP源文件”批量导入更快捷,以及能够继承原先页面的注释,母版等功能。
其他技巧
讲几个经常需要用到的技巧,供大家参考。
如果该详情页的部分内容其他页面也会用到,请使用母版。
如果需要复制当前详情页,请使用页面快照功能。
如果需要使用地图,请使用内联框架功能。
如果需要播放视频,请使用内联框架功能。
总结
希望这些踩过坑总结出来的经验,能够让大家画APP详情页的时候少走一些弯路。
相关阅读
#专栏作家#
浪子,业务型PM,浪子PRD系列51prd.com,公众号langzisay,个人微信nuanai88。
本文由 @浪子 原创发布于人人都是产品经理。未经许可,禁止转载。
题图来源于网络
给作者打赏,鼓励TA抓紧创作!赞赏
axure 画小程序效果图_APP详情页如何用Axure画出来相关推荐
- 微信小程序新闻列表详情页
微信小程序新闻列表详情页 不忘初心,方得始终.初心易得,始终难守 首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
- axure 画小程序效果图_【附源文件】5款精美小程序原型设计模板,触手可得
微信小程序于2017年1月9日凌晨正式上线.经过一年多的发展,小程序的用户规模已突破4.7亿(数据来源于QuestMobile微信小程序洞察报告),其商业价值也是日益凸显.因此,越来越多的开发者投入到 ...
- 小程序 微信位置详情页打开小程序
为了让用户更便捷地使用小程序的打车服务,在位置消息详情页的菜单中,新增了打车小程序入口.打开聊天中的位置消息,点击详情页右下角绿色按钮,菜单中会展示符合条件的打车小程序,用户可以直接发起目的地为该位置 ...
- 新闻小程序4——新闻详情页设计
参考书:微信小程序开发实战--周文洁 还没有设定跳转的逻辑,只是为了设计页面,在顶栏添加编译模式,选择启动页面是detail detail.wxml文件 <!--pages/detail/det ...
- axure 画小程序效果图_Axure案例:如何制作微信原型?
笔者作为小白,将自己画的第一份原型铺出来,目的是为了和大家一起交流学习.本文是基于最新版本的微信来写的,将在最大程度上还原微信原型的交互效果. 先铺上效果给大家看:点击体验 PS:笔者用Google浏 ...
- 微信小程序之书籍详情页
上期我们写了静态分类的普通界面了,现在我们需要写跳转进入书籍详细信息页的静态页面了. 如果你想设置顶部导航标题栏的话,可以在json里设置 这样点进去的话就导航栏就会显示出书本详情的标题了. 好了,言 ...
- 小程序实现商品详情页的tap标签与页面滚动联动效果
实现原理:利用scroll-view标签,注意:scroll-into-view属性要想实现滚动需在scroll-view标签内部盒子里,即scroll-view大小可以等于屏幕的高,内容非屏幕滚动 ...
- axure form列表_常见的列表页如何用Axure画出来
列表页是PM画原型的时候最容易碰到的页面类型,那么如何快速画出并且展现交互呢? 我们从具体的例子开始讲解其中的技巧,和各种不同的演变场景.希望初级PM可以通过这篇文章改进下自己的画法. 列表页基本是由 ...
- 微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果 效果图: 源码: <view class="mainFra ...
最新文章
- jspider java运行_Web Spider 网络蜘蛛爬虫
- 说一说ffmpeg到处都在使用的ff_thread_once函数
- 为什么人们常说“十个创业九个死”?
- 20145324 20145325《信息安全系统设计基础》实验二 固件设计
- 使用rsyslog+loganalzey收集日志显示客户端ip
- html 二级菜单 鼠标移动消失,鼠标一离开导航菜单,二级菜单就隐藏,移不到二级菜单...
- 零代码实现接口自动化测试-RF框架实践
- 数据库服务器信息填写,数据库服务器是怎么填写
- svn使用 BCompare比较工具
- 南科大计算机系:将开源和企业引入计算机课程教学
- 最详细教学--实现win10 多用户同时远程登录内网机--win10+frp+rdpwrap+阿里云服务器
- Attiny48单片机编程经验总结
- 新爹手记-分娩篇-出生前一天(原汁原味流水版)
- 如何优雅地使用 Sublime Text
- 基于arduino +机智云物联网平台的阳台生态控制系统的设计
- 50个BA分析工具第四个-Business Case
- 9 循环神经网络——具有记忆功能的网络(2)
- SemEval-2022 Task 6 有意讽刺检测
- 【JAVA】8.5.1内部购物券
- 计算机基础——操作系统
热门文章
- ZTree的全选 反选 全不选 取消 清空
- 工具类集和_gblfy版本
- IEDA 配置Git_04
- 前端_网页编程 HTTP协议(进阶)
- 牛客网SQL篇刷题篇(16-23)
- java hashmap读,java – ConcurrentHashmap – 读取和删除
- vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
- Python type函数和isinstance函数区别 - Python零基础入门教程
- android判断usb已连接,android 判断是否有网络连接(usb连接电脑问题)
- cad设计院常用字体_趣谈 | 那些年我们看过的电气图纸(附CAD/EPLAN区别)