如何设计手机网站

标签：ref   企业   src   tle   完成   习惯   视频   str   get   

由于智能手机的大量使用，使得浏览者通过手机几乎要办一切事情了，当然包括浏览手机网站。这导致企业甚至是个人掀起了一股手机网站建设的热潮，企业通过手机网站与微信公众号关联，实现企业的宣传和在线业务，个人则建手机网站玩一玩、炫一炫，显示一下自己的弄潮能力！那么，作为手机网站建设的第一个环节-手机网站设计，怎么做才能让用户愿意浏览，并且提高用户体验呢？这个问题非常重要，在网站、APP如海的互联网上，要想让您的手机网站能够独树一帜、给用户留下深刻印象，就必须在设计手机网站上下功夫，否则是很难实现的。

1. 手机网站设计的原则

相对于电脑版网站的设计，手机建站时，由于受浏览屏幕的限制，无法像电脑网站那样，在一个网页上展示太多的内容，否则用户都看不清网页上的文字，又何谈用户体验呢！因此，在设计手机网站时，要遵循一定的原则，才能够让用户感觉到您的手机网站不怪异并且易于浏览。

• 手机建站时，网站的设计要从PC版横向的二分、三分或四分的布局改为竖向一分布局，也就是内容要分块儿、竖向展示，而不是再在浏览屏幕上一分为二，更不能一分为三，否则每个展示区域过于狭小，网站的浏览用户看不清；
• 在设计手机网站时，要充分考虑到浏览用户点击的特点和习惯。在电脑网站上，用户基本都是通过点击鼠标来完成的，鼠标点击的精度很高，即使您在网站设计时留下的点击区域很小，鼠标也是能够点击上的。但手机建站则不同，用户是通过手指来点击的，各人的手指粗细不同，如果设计师将点击区域留得太小，用户往往点击不上，最后不得不离开您的手机网站。因此，在手机建站的设计阶段，设计师一定要将制作好的图片放到手机上浏览，并尝试点击区域留得是否足够大，如果不行的话那就需要尽快调整，否则就违背了手机网站浏览的最基本原则；
• 在设计手机网站时，尽量将特效的使用限定在最小的范围，不要满屏都动！在电脑版网站设计时，建站客户会想出很多的特效布置，目的是为了吸引浏览者的眼球，达到聚焦的效果。但手机网站设计上，过多地安排特效是不合适的，因为手机屏幕太小、可浏览的区域有限，如果再出现过多的动画乱动的话，浏览者不知道目光该聚焦到哪里，甚至连基础的内容都看不清，那这种特效的使用就变得适得其反了，这点是要非常明确才行。

2. 手机网站设计能够独树一帜的方法

• 手机网站设计的风格上要独特，特表相较于同行业竞争对手的网站；
• 手机网站设计的UI图标要一致，让用户感觉无论网站有多少个页面，都会是一个整体，这样看起来会非常的舒服；
• 手机网站设计的网页页面要有层次。在PC网站设计时，由于浏览区域很大，想展现的内容基本上都能够在一个网页的各个区域展示完。而手机网站设计则不同，用户可浏览的区域就那么大，要想在一个网页页面内展示全部的内容，就必须用不同的网页层来完成。当然，网页层级展示也不能太多，否则用户就看不清了。一般在3层以下为宜，这样既有了变化，又不影响用户体验，达到平衡的效果；
• 设计手机网站时，浏览层级要浅，让用户能以最快的速度找到要找的内容。不能用户点了三四下，还没找到，可能就离开了；
• 设计手机网站时，要注意细节上的雕琢和变化。因为手机屏幕的大小已定，大块儿的内容上想要做变化的潜力已经很小，但在细节上可以做变化，比如菜单中间按钮的设计上、小图标的设计上等等，这些地方的变化不会影响主体风格和用户浏览，同时能够起到画龙点睛的作用，能够给用户带来额外的惊喜！

3. 手机网站设计时需要注意的地方

在设计手机网站时，需要注意的细节太多了，别看一个小小的屏幕，在网页设计时需要考虑的问题比PC网站的设计还要多、也更耗时。这里只列出一些常见的犯错点，在设计手机网站时需要引起注意。

• 手机网站菜单的设计，如果是横向排布，按钮数量最大现在5个，再多手指就很难点上了；
• 如果需要几步能够才能完成的功能，手机站网页一定要分开完成，不要都设计在一个网页里，否则内容太多，用户容易烦；
• 由于手机网站是竖向浏览，因此网页内容的逻辑性要很强，用户浏览完一块儿后才有兴趣继续浏览，否则就会关掉。电脑网站设计这方面的要求就不高，毕竟一个网页页面内展示的内容多，用户不喜欢看左边的，还可能喜欢右边的，但在设计手机网站时必须特别注意，否则会出现跳出率过高的情况；
• 在手机网站设计与制作中，不要用FLASH，插件和视频都不要用这个，苹果手机操作系统不支持，如果是苹果手机用户，那么浏览效果会很差；
• 手机网站设计与制作过程中，如果需要与服务器交互的部分，要设计出等待时的状态。毕竟手机不想PC电脑，不会一直都用wifi链接，当用数据连接时，如果网络状况不好，当手机网站在与服务器有数据交互而没有任何变化时，用户还以为网站死掉了呢，就会容易离开。

如何设计手机网站

标签：ref   企业   src   tle   完成   习惯   视频   str   get   

原文地址：http://www.cnblogs.com/agapei/p/7413956.html