响应式设计适合主题式设计吗？

如今，越来越多的移动设备出现在我们身边。作为设计师，网站主题的设计进入了一个新的阶段。需要考虑更多不同的因素，如用户访问环境、输入设备、分辨率等。响应式网页是目前流行的解决方案，就像一双男生的休闲鞋，可以搭配任何裤子。但对于主题式设计来说，响应式设计就不适合了。

专题网页的设计通常简短、快速，满足特定时间的一些操作需求。响应式设计通常需要考虑更多不同分辨率下的响应效果，设计和开发时间的成本可能会加倍。而且主题设计具有很强的形式感，响应式设计的流畅布局必然会带来视觉上的限制，所以对于主题设计来说，创建响应式网站需要慎重考虑。最有效的方法是传统上为移动版本创建单独的设计稿，以便移动版本网页能够满足通用移动设备的分辨率。

我应该先制作PC版页面还是移动版页面？

这取决于用户的访问数据。一般情况下，先制作PC版页面，再制作手机版页面。PC版页面可以呈现更丰富的内容，用户浏览网页时可以更加专注，达到最佳体验。但很多情况下，页面访问更多来自手机。例如，对于移动游戏主题，用户通过微信和手Q门户进入。如果我们从PC版的话题入手，那么移动版的内容将是移植的PC版网页，这将大大降低移动版的体验。世界上最遥远的距离不是我在你身边却不知道我爱你，而是我用手机打开你的网页你却不知道。

手机版专页注意事项

1.安全宽度与扩展区域让页面适应主流分辨率

就像PC上的网页一样，确定一个安全宽度，将重要信息控制在640PX的宽度内（使用iPhone分辨率作为安全宽度。手游特殊规格目前的数值如下，对于仅供参考：

目前iPhone4S下主要浏览器的首屏高度如下。第一屏高度可以根据具体的页面投放渠道进行调整。

2.控制图片的大小

主题的标题图像通常具有很强的视觉吸引力。对于手机用户来说，加载图像的等待时间比PC上要昂贵得多。如果一个页面加载时间超过5秒，70%的用户会选择关闭它。那么无论多么突出的话题，也不会呈现在用户面前，所以设计稿需要妥协。

在制作头部的扩展区域时（超出640px范围），建议使用纯色、渐变、平铺材质，以减小头部图片的尺寸，提高加载速度，并且扩展区域可以无缝连接。模糊的背景可以最大程度地压缩图像质量（无论如何模糊都是模糊的）。

3.字体

手机中的字体大小一般是电脑的两倍。一般电脑上使用的12px字体在手机网页上应该是24px。在设计过程中，还应该使用iOS和Android的默认渲染字体，以更真实地还原真实环境。

在规范手游移动版的课题中，主要字体大小控制在3种，范围有大、中、小。避免使用随机字体大小，并且字体大小必须是整数。

4.控件交互区域适合触控

手机主题主按钮高度大于80px，根据活动需要放置在首屏。文本链接上下间距大于80px，手指对屏幕热点的最小敏感度为44px。

5.移动端网页少用跳转

手机用户的网络环境不如PC用户。页面跳转会对用户产生较大的心理影响。如果能在手机页面合理地将信息展示在一页上那就最好了。如果一定要跳转的话，我们可以通过一些方法来假装不是跳转，比如展开、浮动等，减少用户的不安全感。