2014年移动手机版APP专题页面设计的相关规范

根据国外某调查机构表述:在针对100个旅游品牌的移动端表现进行数据分析和追踪,影响在移动端网站首页的7个可视元素,如下7点:

1、网页加载时间

2、网站格式(网站设计、响应能力)

3、搜索功能(在页面上可见)

4、点击呼叫

5、登录(在页面上可见)

6、社交媒体功能

7、APP展示(在页首或页尾显示链接)

所以 ,我们在设计和开发移动手机版APP专题页面的时候,需要注意上面7大方面,同时也要看看人家给出的一些移动端设计经验。

同时我们在设计移动手机版APP专题页面设计的时候,也要注意下APP所处在的行业,

因为移动APP行业化,仅仅对行业了解是不够的,还要将对行业的理解融入到开发过程当中,从细节入手,从而将APP行业化落实到产品上。我们设计的APP要不断去与企业所需的东西碰撞,满足客户的不同需求,逐步优化APP,使得该APP核心竞争力更为突出,充分适应市场所需。

 

移动手机版APP专题页面设计规范1、安全宽度与扩展区域让页面适应主流分辨率

 

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

 

移动手机版APP专题页面设计规范2、控制图片的大小

 

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

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

2

移动手机版APP专题页面设计3、字体

 

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

 

移动手机版APP专题页面设计4、控件交互区域适合触控

 

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

 

移动手机版APP专题页面设计5、移动端网页少用跳转

 

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

 

注意了以上5点,移动手机专题页面也可以设计的很出彩,很漂亮!赶快动手吧!

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

相关的移动手机版的知识和干货分享:

1、2014国外html5手机网站欣赏及手机网站模板

2、webAPP或手机网站开发设计实用小技巧分享

3、手机移动端APP界面设计之引导设计篇

每天更新,
全站高品质素材免费下载!