手机版专题页面的注意事项

手机本身有局限，会让我们做手机网页的时候唯唯诺诺，但手机的功能确实越来越强，可以预见在不久的未来，手机可以全部实现目前PC中的功能。网络环境也会越来越好，加载速度的加快也有利于设计师发挥更大的空间。

　　响应式设计是否适合于专题设计

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

　　专题网页的设计通常是短平快，在特定时间达到一些运营需求。而响应式设计通常需要考虑更多不同分辨率下的响应效果，花费的设计和开发时间成本可能是double。而且专题设计具有很强的形式感，响应式设计的流体布局，必然会对视觉造成限制，所以对于专题来说做成响应式的网站需要慎重考虑。最高效的办法就是传统的为手机版单独做一版设计稿，让手机版网页满足通用的移动设备分辨率。

　　先做PC版的页面还是手机版页面

　　看用户的访问数据来定。一般情况下都是先做PC版的页面再做手机页面，PC端网页可以呈现更丰富的内容，用户浏览网页时更专注，达到最好的体验。但有很多情况下，页面的访问更多的来自手机端，比如手游的专题，用户通过微信、手Q入口进入。如果开始就先做PC版的专题，想必手机版的内容将是一个移植的PC版网页，让移动版的体验大打折扣。举两个例子，twitter与instagram的PC页面都是从手机端的延展，继承了手机端的交互，保持了一个很好的一致性体验。

　　手机版专题页面的注意事项

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

　　与PC上网页的做法一样，确定一个安全宽度，把重要信息控制在640PX宽度内(以iphone分辨率为安全宽度。目前主要浏览器在iphone4S下的首屏高度如下,可以根据具体页面投放的渠道做响应的首屏高度

　　2.控制图片的大小

　　专题的头图一般有很强的视觉，对于手机用户来说，加载一张图片的等待时间比PC上成本大很多，如果一个页面加载时间超过5秒，70%的用户会选择关闭，那么再出彩的专题也没办法呈现再用户面前了,所以需要对设计稿做折中的处理。

　　在做头部的延展区域(超出640px范围)，推荐使用纯色，渐变，可以平铺的素材，以便于减少头图的大小，提高加载速度，并且延展区域可以无缝连接。模糊的背景可以最大限度的压缩图片质量。

　　3.字体

　　手机中的字号一般上电脑中的两倍，一般在电脑中用的12px的字体在手机网页中就该使用24px。在设计的过程中，也要使用iOS和安卓默认渲染的字体，以便更真实的还原真实环境。在规范手游移动版专题中，主要字号控制在3个，大中小都有一个区间。避免随意用字体字号，并且字号必须上整数。

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

　　手机专题的主按钮高度大于80px，并且根据活动的需求放在首屏内。文字链接上下的间距大于80px，手指在屏幕上热区最小感应是44px。

　　5.移动端网页少用跳转

　　手机用户的网络环境不如PC用户，页面的跳转会对用户产生更大的心理效力，如果在手机页面中能吧信息合理的展示在一个页面中最佳。如果非要跳转，咱们可以用些假装不是跳转的方式，比如展开，浮出等。减少用户产生的不安全感。

　　移动专题也可以很出彩

　　虽然手机因为性能，网络等限制因素，不能达到PC专题那么优秀的效果。但手机网页还是有他独有的优势。手机网页也是可以动起来的，而且还可以通过手机特有的重力感应功能做视差滚动效果的交互，看起来很优雅。通过手机控制PC页面的浏览也是一种新体验，不妨试试挖掘更多可能性。

手机版专题页面的注意事项相关推荐

discuz手机版帖子页面支持表格添加边框及边框颜色
discuz帖子支持插入表格,如下图,电脑版也能正常显示表格: 然而,在电脑版看着正常的表格到了手机页面就不再显示边框线,这样的体验很不好!如下图: 这和任何手机模板都没有关系,是因为discuz的系 ...
织梦dedecms手机上,自动跳转到/m目录mobile手机版h5页面
织梦的m文件夹为手机版,里面有list.php,view.php等文件. 如果需要手机上浏览电脑版页面,自动跳转到对应的手机页面,需要通过js实现一,把下面代码放在文件uaredirect.js中并 ...
手机版html页面左右滑动切换页面,移动端手指左右滑动切换内容demo
说在开头最近移动端做了一个手指左右滑动切换内容的效果demo; 为了表示我的无私,决定分享给诸位:(详细代码见附件) 正文先上html代码html> 穿衣助理完成整个页面ul部分是需要切 ...
Nginx学习总结（2）——Nginx手机版和PC电脑版网站配置
考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...
360安全浏览器android,360安全浏览器手机版
360安全浏览器是一款安全便捷的浏览器内容,可以帮助用户们进行各式各样的生活服务搜索需求,确保电脑浏览器的一切正常实际操作.根据设定还能够享受到无广告.感兴趣的小伙伴快来下载360安全浏览器手机版体验 ...
(二) Nginx手机版和PC电脑版网站配置
考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...
手机计算机游戏攻略,迫击炮计算器手机版 | 手游网游页游攻略大全
发布时间:2016-07-28 我的世界手机版游戏中电路需要通过甘蔗.沙子.仙人掌等物品合成,电路的制作方法也很多,如果有王佳不太了解我的世界手机版电路的制作合成方法,可以看看下面99安卓网分享的我的 ...
织梦手机版list.php,织梦手机静态页生成插件
织梦手机静态页生成插件是一个安装后,可以生成手机版静态页,提高手机版网页的访问速度,更加有利于SEO. 最新版本:V1.4 版本功能对比: 客户案例: http://www.handancpa.com ...
成语答题小程序手机版后台开发
成语答题小程序手机版后台页面开发成语答题小程序后台设置页面成语答题小程序固定红包页面成语答题小程序添加固定红包页面成语答题小程序添加奖品页面成语答题小程序删除内容提示页面成语答题小程序添加 ...

手机版专题页面的注意事项

手机版专题页面的注意事项相关推荐

最新文章

热门文章