020-28170311 piven@foxmail.com 【广州新际网络科技】网站建设 第一品牌 主营:网站建设 网站设计 网站开发 网站制作

手机网站制作标准

2017.04.19 新际网络
      手机网站制作可能会让很多设计师感到头痛,尤其是前端,只会更加头痛。但是我们都知道,随着智能手机的普及,手机正迅速的成为人们最常用的上网方式,所以,移动网站也成为广大站长和设计师的首先目标。那么您知道手机网站制作标准么,我们都知道,手机的型号、尺寸、比例等都不一致,尤其是还需要兼容屏蔽的流量,所以手机网站制作标准非常重要。

在尺寸方面,新际网络的手机网站制作标准是

   iphone  
1.尺寸以及分辨率  320*480,640*960,640*1136网页和移动的UI用72px  
2.界面基本组成元素    
iPhone的APP界面一般由状态栏、导航栏、主菜单栏和中间的内容区域组成。因为宽度是固定的,所以设计开发起来很方便。
3.字体  
32~36px32px,注释等提示文本28px。

   Android  
1.尺寸以及分辨率  提到Android的尺寸,480*800、720*1280。点9切图所有手机的适配。
 Android界面尺寸:480*800、720*1280、1080*1920
2.界面基本组成元素  
与ios的一样,还是有状态栏、导航栏和主菜单栏,以720*1280的尺寸,状态栏的高度应为50px,导航栏的高度96px,主菜单栏的高度96px。
3.字体
采用android原生的字体,与微软雅黑很像。字体大小范围为16px~32px

   ipad  
iPad界面尺寸:1024*768、2048*1536
  单位:像素72dpi,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计。

在结构方面,新际网络的手机网站制作标准是:
   1.整体形象设计
在程序员进行详细设计的同时,网页设计师开始设计网站的整体形象和首页。
整体形象设计包括标准字,Logo,标准色彩,广告语等。 首页设计包括版面,色彩,图像,动态效果,图标等风格设计,也包括banner,菜单,标题,版权等模块设计。首页一般设计1-3个不同风格。
   2.手机网站开发制作
手机网站规划设计采用软件工程的设计方法,设计小组在系统分析和总体设计的基础上,将设计任务分解,分配到设计组的每个成员,各模块有设计组成员单独承担设计和调试,既有分工,又有协作,最后将各模块上载到服务器上,做链接和整体的调试。
   3.手机网站制作调试完善
各模块初步完成后,上传到服务器,对网站进行全范围的测试。包括速度,兼容性,交互性,链接正确性,程序健壮性,超流量测试等,发现问题及时解决并记录下来。
   4.手机网站制作宣传推广
我们新际网络具有专业SEO人员,在架构之前会经过SEO人员评估和调整,可以让您的手机网站更受搜索引擎的亲睐,也更加符合后期的宣传推广工作的开展。

当然,在新际网络除了手机网站制作标准之外,我们还具有手机网站制作的25个设计要点,确保设计页面的完整和整体形象的提升。
   1、“行为召唤”内容要靠前或居中
对于移动用户来说,往往很容易忘记菜单选项,因此,你应该把自己最关键的“行为召唤”内容放置在一个醒目的位置上,这样用户就能轻松看到。所以,你需要让最重要的“行为召唤”内容占据到网站的主体部分上,用户就能够快速完成相关任务。
   2、让菜单看起来既简洁又亲切
一个范围较广的菜单可能非常适用于桌面网站,但是移动用户可能没有足够的耐心来回滑动自己的手机,他们不喜欢在查看一长串菜单选项之后才找到自己想要的东西。
   3、要让用户便于回到主页
当移动用户在你的网站上面导航浏览时,他们会希望可以快速回到之前的主页上面。马海祥博客在研究中发现,用户往往喜欢点击页面上的公司Logo,因为他们觉得这种方式可以直接回到主页上去,所以你的网站必须也要支持这个功能,否则,如果用户点击了Logo,却毫无反应,他们肯定会觉得非常失望。
   4、别让促销广告抢了你网站的风头
促销活动和广告会影响你的网站内容,也会影响用户在网站上的体验。
   5、保持搜索功能可见
如果用户需要寻找一些特殊信息,那么他们就会使用网站的搜索功能,因此,搜索必须是移动网站上最重要的功能之一。
   6、确保网站搜索结果符合用户预期
实际上,用户似乎并不讨厌一页一页的翻阅搜索结果,但是他们更加看重网站返回的搜索结果是否符合他们的预期。
   7、使用过滤功能提升网站搜索易用性
用户会使用搜索过滤功能,这样可以缩小搜索范围,返回的搜索结果也更精准。不过,你需要确保用户使用过滤搜索之后,不会一无所获。
   8、指导用户去访问较好的网站搜索结果
对于一个网站而言,用户有各种各样的类型,所以,在用户进行搜索的时候,可以先询问几个相关问题,这样可以确保他们的搜索结果与预期一致。
   9、不要一上来就让用户在网站上注册
如果你的移动网站一上来就让用户注册,那么体验一定非常糟糕。马海祥博客的研究人员发现,最让用户难以接受的就是必须注册之后才能访问网站内容。
   10、让用户能以访客的身份在你的网站上购物
即便用户想在你的零售网站上购买商品,但其实,他们仍然不希望注册一个账户。用户会觉得,如果能够以访客的身份购买商品,那么真的是非常方便,简单,而且快捷。
   11、使用已有信息,最大程度为用户提供便利
对于那些网站注册用户而言,你需要记住他们的偏好。而对于新用户而言,你可以提供一个他们习惯使用的第三方支付服务。
   12、对于复杂任务,使用“点击拨打电话”功能
如果用户需要进入一个较为复杂或是较为敏感的任务时,你需要提供一个“点击拨打电话”的服务功能。
   13、当用户更换不同的移动设备时,确保能够便捷的完成交易
用户可能会在不同的移动设备上访问你的移动网站,因为你需要提供一个简单的方法,让他们在不同设备上分享信息。
   14、信息输入时做到流线作业
如果网站能够预先判断出一些信息,用户体验就会非常棒。比如预先判断出用户所在的邮政编码,或是出生日期等等。在输入一些信息时,如果能够做到自动输入,那么体验将会更加流畅。
   15、为每一个任务选择最简单的输入方法
如果用户需要在有限的选择项内做选择时,最简单的方式就是点击选择,而不是使用文本输入,或是在下拉框内选择。
   16、在需要选择日期的时候,提供一个可视化日历
当用户在移动网站上预定航班时,很难确定“下周的某一天”是几月几号,所以你需要提供一个可视化日历供用户勾选日期。
   17、通过标签和实时确认,第一时间解决输入错误
在你的表格框内,要有提示标签功能,而且在用户实际输入时,可以看见必要且准确的提示信息。
   18、设计高效的表格
你要确保自己设计的表格不会出现重复操作,只提供必输信息即可,另外你还需要利用自动填写功能。当用户在填写表格的时候,最好在屏幕顶部显示一个进度条,这样人们就可以知道自己的进展。
   19、针对移动终端,整体优化你的网站
如果你有一个专门针对移动终端的网站,那么当用户使用移动设备访问时,肯定比纯桌面网站要简单的多,这点毋庸置疑。
   20、不要让用户用手捏放屏幕,去放大或缩小图片
如果用户需要用手捏放屏幕,去放大或缩小图片时,有时会看不到一些重要信息或相关的“行为召唤”内容,这会让用户感到很失望。
   21、你的产品图像需要支持大图显示
顾客想要看看自己买的产品。在零售网站上,用户希望可以看到分辨率更高的产品图片,这样可以看到更多细节,如果网站不支持产品大图显示,肯定会让用户觉得非常失望。
   22、告知用户在哪种屏幕方向上访问网站最舒服
用户往往会在一个固定的屏幕方向上访问网站,除非有提示告诉他们切换屏幕方向(比如在观看视频的时候)。
   23、让用户保持在单独一个浏览器窗口里访问你的网站
在智能手机上频繁切换窗口是一件非常麻烦的事儿,而且用户还有可能找不到如何回到你的网站上去。
   24、避免“全网站”标签
用户一旦看到“全王权”这个选项,就会觉得是不是“移动网站”是被压缩的精简版网站,最终纷纷选择点击进入“全网站”。
   25、你必须要清楚自己为什么需要用户的地址信息

用户一般都希望了解,为什么你会向他们要地理位置信息。比如某用户在一家旅游网站上面订其他城市的酒店,但是他就感到很奇怪,因为这个网站会要求该用户提供目前所在的地理位置信息。所以,你需要把网站上地理位置这一栏默认为空,然后让用户自己选择,或是为用户提供一个清晰的“行为召唤”操作,比如“在我附近查找”,等等。


手机网站制作标准

 

查看项目案例