利用axure进行响应式自适应网站的设计 (利用Axure软件制作猫眼电影App低保原型)

本文目录导航：

• 利用axure进行响应式自适应网站的设计
• 响应式和自适应如何区分?
• 移动端的屏幕适配问题

利用axure进行响应式自适应网站的设计

在axure 8发布以后，可以利用几项技术（axure自动生成自适应html、前后端分离、响应式网站设计、restful接口、json或xml等）进一步简化网站的开发，该设计模式的主要流程如下： 1. 产品经理利用axure设计原型。

2. 原型讨论定型后由UI人员设计图标，更新到axure原型中。

3. 由axure生成自适应的响应式网站设计的html文件。

参考：注意：axure发布项目生成html时，在左侧的“ 移动设备 ”这个设置页，需要 勾选“包含视口标签”，不勾选“禁止页面垂直滚动”，宽度设置为“device-width”， 高度留空不设置，初始缩放倍数绝对不能设置 ，最小缩放倍数设置为“0.1”，最大缩放倍数设置为10，允许用户缩放留空不设置 ，ios部分可以不理默认即可。

另外需要 axure 8以上版本才能普遍适配手机 屏幕。

4a. 前端开发人员全盘使用上面生成的html文件、资源文件、axure的js文件，在各个页面上以前后端分离方式添加业务逻辑的实现（比如在html中加入jquery的ajax，和后端交互数据）。

4b. 后端开发人员设计和实现业务逻辑和前后端接口（4b可以和3、4a步骤同步进行），比如前后端使用restful的json封装作为前后端接口的数据交互。

5. 单元测试、集成测试、灰度测试，bug修复，发布上线。

该模式问题 ： 一旦axure原型有修改，前端怎么能更快适配该修改（现在是文件比较方式，类似git的merge）。

响应式和自适应如何区分?

响应式与自适应之间的区别常常让人感到困惑，其实它们并非并列的概念，而是存在从属关系。

简单来说，自适应是一个更广泛的概念，它涵盖了响应式和代码适配两种策略。

无论是网站采用响应式设计还是代码适配，都可以被归类为自适应。

响应式设计的特点是，设计一套模板即可适应不同设备，如PC、手机和平板，而模板的代码结构保持不变。

这种方法确保了一个统一的URL，内容会根据用户设备自动调整。

另一方面，代码适配则更为灵活，通过服务器分析用户浏览器的标识（ua），根据客户端设备类型返回不同模板的HTML。

这种方法同样保持了URL的一致性，但内容的展现形式会根据用户的设备差异而变化。

总结来说，自适应的核心在于适应性，而实现途径有响应式和代码适配两种。

无论哪种方式，目标都是确保用户无论使用何种设备，都能以最佳体验访问网站。

希望这段解释有助于理解响应式与自适应的差异。

移动端的屏幕适配问题

移动端的屏幕适配问题主要通过响应式设计、适配不同屏幕尺寸和分辨率、以及考虑设备特性等方式来解决。

首先，响应式设计是解决移动端屏幕适配问题的关键。

它基于流式布局的思想，通过CSS媒体查询来根据设备屏幕的宽度调整布局和样式。

例如，在较宽的屏幕上，内容可能以多栏形式展示，而在较窄的屏幕上则自动调整为单栏布局。

这种方法确保了用户无论使用何种尺寸的设备，都能获得良好的浏览体验。

其次，适配不同屏幕尺寸和分辨率也是重要的一环。

由于移动设备的屏幕尺寸和分辨率多种多样，开发者需要确保应用或网站在各种情况下都能正常显示。

这通常涉及到使用可伸缩的图片和图标、避免使用绝对尺寸、以及测试在不同设备上的显示效果。

例如，使用SVG格式的图片可以确保在不同分辨率下都能保持清晰。

最后，考虑设备特性也是屏幕适配不可忽视的方面。

移动设备与桌面设备在交互方式、性能、电池续航等方面存在差异。

因此，在开发移动应用或优化移动网站时，需要充分考虑这些特性。

例如，针对触摸操作进行优化，确保按钮和链接的大小足够易于点击；同时，也要关注性能优化，以减少加载时间和资源消耗，提升用户体验。

综上所述，移动端的屏幕适配问题涉及多个方面，包括响应式设计、适配不同屏幕尺寸和分辨率、以及考虑设备特性等。

通过综合运用这些方法，开发者可以创建出在各种移动设备上都能良好运行的应用或网站，从而满足广大用户的需求。