[!--temp.gonggao--]
有事点这里,QQ号码:357710851  有事点这里,QQ号码:357710851
乐橙摄像头怎么在电脑上看?
定义页面模板是画APP原型的必备工作
不愁访客不联系外贸网站“联系我们”页
从股市大幅波动看如何强化投资者金融理
乐橙助力《闪亮的爸爸2》 携机器人小乐
Sim卡通讯录管理器 10
如何在琐碎的 UX 设计中做出显性价值?
大华乐橙云庭审互联网直播点播系统让正
湖北配镜老花镜女防疲劳一直戴行么
布局智能化产品 长安全新CS35 PLUS于
专业智能电销神器收费标准
智能家居智能产品选购技巧有哪些?
横渡大西洋
 

定义页面模板是画APP原型的必备工作


发布者: 来源:本站 更新日期:2018-10-05 03:50:19 人气:0

 

  页面模板是画APP原型的必备元素,使用它的PM不少,但是真正了解的不多,用它提升效率的更少。

  所谓的页面模板,是指APP原型中每个页面的相同部分,某种程度上可以理解为开发APP时候前端技术使用的viewcontroller模块。

  我们在用Axure画APP页面的时候,往往会套一个网上下载回来的页面模板,常见的有以下三种样式。还有其他少见的模板我就不赘述了。

  另外上图是自制的低保真版本,网上有提供高保真版本。建议使用前者,不要混淆PM和UI的工作。

  而不是每画一个APP页面,就重新从状态栏,上导航,内容区,下导航/工具栏一个一个画一遍。这样极大的浪费时间。

  所以我提炼出页面模板这个概念,并方便的运用到每个APP页面,以此来减少画原型时间。

  如果我们去拆分页面的内容结构,其实是这样的三个层次。只是往往我们看到的是第一层,不会深入去了解它的内核。

  如果具备立体思维来拆分,我们可以得出大部分时候页面包含上导航,内容区。小部分时候包含工具栏/下导航。

  根据上面的三种常见页面模板,以及页面的内容结构。聪明的PM应该就会自己制作适合自己APP的页面模板。

  不过画法是相似的,如果你会画第3种页面模板,那么第2种,第1种画起来也很快。

  具体的查看方法详见我的文章 《如何在手机上完美体验Axure生成的APP原型》。

  具体的查看方法详见我的文章《Axure如何生成适配手机屏幕的APP原型》。

  如果你的APP原型只需要在浏览器中查看,那么仅需固定页面模板在每个页面中的位置,比如(10,10)。

  如果你的APP原型想在手机上并体现交互,那么请固定页面模板的位置为(0,0)并且不能有手机边框。

  如果你的APP原型想在浏览器中预览APP原型交互,那么请固定页面模板的位置为(0,0)并且不能有手机边框。

  页面模板的尺寸来源于APP原型尺寸,而APP原型的尺寸要么选择375667,要么选择你手机屏幕的逻辑分辨率,注意有别于手机屏幕本身的物理分辨率。详见我的文章《为什么375×667是移动端原型的最佳分辨率》。

  按照iOS人机交互规范来说,状态栏的高度为40px,上导航的高度为88px,那么内容区的高度则为1334-40-88=1206。另外上导航左右按钮的高度是22px,宽度至少是22px。

  页面模板是为了方便我们在画APP原型的时候,快速去复制到每一个新页面。所以我们应该用Axure中的母版功能来使用页面模板。

  请右键该母版,然后设置拖放模式为“脱离母版”。然后我们每新建一个页面,拖一个母版进来。

  或者我们设置拖放模式为“固定位置”,然后每新建一个页面拖一个母版进来,然后右键脱离模板即可。

  但是我们还可以再优化一下,把上图中的所有文字“页面名称”“左按钮”“有按钮”“内容区”都删除,变成下图。

  当不需要填写文字的时候,就不显示左按钮右按钮,兼顾了部分页面不一定都有左右按钮的场景。当我们需要填写文字内容的时候,双击对应的区域即可编辑。互不耽误。

  页面模板并不是特别复杂,但是很少有人刻意讲解过它的来龙去脉以及如何高效的使用它,希望我的这篇文章可以让你们对页面模板有个很深的了解以及提升了你们画原型中不必要的时间浪费。

  如果你是滴滴打车的产品经理,你会为涉及骚扰/凶杀的问题提供怎样的解决方案?

  ofo小黄车开锁前5秒的广告,如果你是他们的产品经理有什么好idea吗?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、招聘、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上海广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。


打印此页】【返回
 

定义页面模板是画APP原型的必备工作芯片级专修学院 版权所有