您现在的位置: 首页 > 新闻 > 建站常识

高品质手机网站设计必备如下5个特点

来源:网络公司发布时间:2020-05-07热度:5363

手机网站主要指运行在手机等移动设备的网站,手机网站通常使用H5+CSS3以及JS做出效果非常绚丽的展示效果,手机网站还有另一个特点是会判断屏幕尺寸和手机机型来调整显示网站布局和内容。但并不能适应PC端浏览。我们将移动端适配网页是一种特殊尺寸的网页设计。

随着大屏幕手机的普及,手机网站越来越有传播价值和份量,通常占据流量的大部分,流量远远超过PC端网站,特别是手机网站可以非常方便的分享到朋友圈,要知道微信朋友圈占了中国70%的移动端上网时长,如果内容好,手机网站在朋友圈疯传,对于企业宣传来说是非常划算的。

一、手机网站引爆朋友圈

我们就经常在微信朋友圈分享一些小游戏,某些有趣的网站页面,转发率都非常高,移动端网站大抵分为两种,一种如上图中的NAVER手机适配版,是为了让用户从PC使用平移到手机使用开发的适配手机网站。手机网站的目标就是形成病毒传播,从而扩大内容对用户的影响,所以在设计上追求更加酷炫的效果和动效。加上优质的网站内容,在朋友圈宣传企业是非常适合的。

二、手机网站需要适配主流分辨率手机

通常手机品牌不同,型号不同,导致分辨率各异,我们在开发手机网站时,应该注重手机网站的自适应,保证手机网站能在各种分辨率和不同品牌手机有很好的显示效果。

三、手机网站要不要导航

移动端网站的入口和呈现都是特定的。这与原生APP不同,原生APP提供了一个全屏的区域,包括可订制的信息与状态栏。而移动适配网站必须在浏览器或微信内使用。所以尽量不要为移动端网站设计单独的Navigation bar,否则就会和微信或者浏览器的Navi重合,用户看到的就变成了一个“三明治”。并且如浏览器或微信本身已经提供了一个返回按钮,无需单独设计。如果还有一些必要的功能性入口,可以尝试摆放在其它位置。记住,你所设计的页面并非全屏,而是某个应用场景的一部分。以下是两个我常用的模板,我把原来的截图处理成活的区域,标题和图标都可以隐藏和修改。也方便更好地想象出实际用户看到的效果。

四、移动端选用什么字体好

移动端网站应该选用什么字体呢?我们知道,尽管安卓的市场份额很大,但是安卓机是一个开放的底层系统,不易统一。所以设计师通常会选择以苹果手机iPhone上的显示效果为准。那么在模拟iPhone浏览器默认的文字时设计师就拿不准应该选用什么字体了。在WINDOWS平台下设计IOS产品是一个很严重的问题。那就是WINDOWS下暂时无法完整渲染出苹果系统的效果。在上图中我們可以看到,在MAC机上模拟IOS默认字体时可以直接使用苹果原生的字体:黑体-简(HEITI-SC)。渲染模式选为苹果渲染模式即可。如果是PC机需要模拟IOS默认字体那么用黑体简会有比较大的出入,反而使用华文细黑-浑厚模式能比较接近默认字体。

首先需要说明的是,由于我们设计图像时的屏幕并不是Retina的屏幕,所以我们需要设计看起来是12像素大小的文字时,我们需要在PS里建立一个24像素的文本框。这就让我们无法直接看到真实手机上显示的效果了。所以我们需要不断地存成图片然后导入到真机里测试效果。那么如果我们需要设计的移动端网站里有很多文字文本,那么多大尺寸的文字才是适合阅读的呢?那么我认为小于22PX是基本难以阅读的。

五、手机网站应减少服务器请求

虽然4G网络已经普及,但是手机网站要面向所有客户,当网站有大量的js,图片需要加载,网站打开速度势必会变慢,而一般只要等待时间超过3秒,访客就会关闭网站,不会继续等待下去。所以减少服务器请求,提高手机网站打开速度至关重要。

如何提高手机网站打开速度呢?使用雪碧图,CSS雪碧即CSSSprite,雪碧图是一种图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。雪碧图将很多歌小图片合并成一张大的图片,减少加载网页图片时对服务器的请求次数,方便在任何位置使用I这样不同位置的请求只需要调用一个图片,从而减少对服务器的请求次数,降低服务器压力,同时提高了页面的加载速度,节约服务器的流量。

手机网站弥补了PC网站不能提供的对手机端的兼容性,手机端流量现在已经反超PC端,通过制作高品质手机网站获取移动端客户是传统企业当下最需要做的。

本文来源:http://www.ycwebs.com/news/show-390.html