最开发的小伙伴们在与客户进行需求沟通的时候，往往会被要求尽快出一个系统界面的草图供用户进行需求确认。那么这个时候如果在去找美工用PS去一点点的画，估计黄花菜都凉了，优漫教育小编以AxureRP8为例，讲解如何绘画兼顾不同平台的原型？

  一、以产品的主平台为基础来设计原型

  当你主营Web网站，想移植核心功能到h5环境中。那么你应该以Web原型为主，然后创建h5的自适应视图。同理其他场景也是如此。详见上篇文章的“哪些情况下需要适配”章节。

  接下来我们以“知乎web版本，然后增加手机网页访问h5版本”来作为案例讲解如何操作Axure。

  注意：适配多个平台的原型本质上是给每一个平台定义分辨率然后分别设计原型。

  二、定义2种平台的原型分辨率

  拿知乎来说，知乎Web版建议用当今主流的浏览器分辨率1200px作为Web平台的分辨率，高度自适应。

  知乎h5版建议用375px作为h5版本的原型分辨率来设计，以方便用户在各种手机网页查看h5版本的知乎，最后技术实现的时候利用网页前端JS来适配不同分辨率。

  当设计好主平台的原型之后，此时我们需要配置一下自定义视图的规则。

  注意：Axure默认是没有自定义视图，只有默认视图，并且没限定原型的分辨率。虽然这方便了PM可以无限制无拘束的在画布上设计页面。但是也增加了UI和技术理解原型的成本。

  三、配置自适应视图

  点击Axure菜单栏“项目-自定义视图”，弹出设置框。

  按照下图设置一下即可。

  由于我之前在其他页面中启用了iPhone7plus的414×736视图，所以上面的截图中有3个视图。你们在设计的时候无需如此。

  四、先完成主平台原型

  这个和设计其他Web网站原型一样操作，我就不赘述了。我做了一下知乎首页的原型，包含知乎首页、话题页、发现页、消息页、我的页面、搜索页。效果如下图。或者点击查看知乎原型。

  五、后完成副平台原型

  5.1启用自定义视图

  默认每一个页面都是只使用默认视图，如果你需要让这个页面拥有多个平台的原型。请在页面属性中启用自适应视图。

  5.2修改副平台原型

  点击画布左上角的自定义视图切换按钮到第二个视图414，此时你会在该视图下看到主平台的内容被继承到这里。但是这里有一根红色竖线，位于x坐标414。代表该视图下的内容不应该超出该宽度。

  然后，你根据此要求，调整该原型下面的内容大小以适应此要求即可，

  我们按照知乎在手机网页上的呈现调整一下原型。效果如下图。

  六、生成原型效果

  生成原型，将地址发给技术。推荐发布到服务器，这样只需把网址发给UI设计师、前端工程师，后端工程师。具体的方法不讲解了，

  给你们看下我生成的原型网址，一个网址兼容了知乎web原型和知乎h5原型，显示哪种效果取决于你用web浏览器还是手机浏览器打开。

  七、检查主副平台的视觉和交互

  检查主副平台的视觉和交互，是否和知乎web和知乎h5保持一致。

  比如知乎web有侧边栏，知乎h5是没有的。

  比如知乎web的导航栏是4个，知乎h5是5个。

  以上就是优漫教育小编为大家介绍的“【UI设计培训分享】：如何绘画兼顾不同平台的原型？”相关内容，学习ui设计培训，可以参考优漫教育提供的ui学习路线，该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等，根据优漫提供的ui学习路线图，可以让你对学好ui需要掌握的知识有个清晰的了解！