手机端网页设计注意事项 怎么用手机做网页设计

与计算机共享网页，指的是计算机用的网页完全不经修改、就直接给手机浏览，前提是网站本身的元素要够简单、版面不能太复杂。下面介绍手机端网页设计注意事项，希望可以帮助到大家。

一、与计算机共享同一套网页

这里的与计算机共享网页，指的是计算机用的网页完全不经修改、就直接给手机浏览。前提是网站本身的元素要够简单、版面不能太复杂。

二、制作手机专用网页

这个做法在90年代非常盛行，当时电信业者的GPRS/WAP广告打得正火热，手机能浏览的网站都是WAP网站，也就是用WML编写的手机网，WML是很简陋的HTML，内容通常只有文字跟选单。

用这个方法的好处是，WAP可以在所有的手机上正常显示，不过要同时维护手机版和桌面版的网页会很困难，使得信息常常无法同步。

三、用浏览器来判断装置

Opera有桌面版和手机版，同样的Chrome、Safari、Firefox也是。有的网站会使用浏览器嗅探机制(browsersniffing) 来判断你是用哪一种、什么装置的浏览器，不过browsersniffing的设定很繁琐，而且经常出差错。最快的方法是在网页上加入各种版本的连结，让 浏览者可以自由选择格式。

四、开发复合型网站

复合版网站就是能同时给桌面和手机使用的网站，它跟刚谈到的「与计算机共享」并不一样，复合版网站虽然内容相同，但是它会根据屏幕大小来呈现版面。要做复杂 合型网站其实并不难，只要用CSS与HTML标签来调整就行，比如HTML的viewport以及CSS的media queries。

什么是viewport

Viewport指的是「画面视图」，它是一堆数值的组合，白话一点的解释就是你可以在画面上看到的范围，可以分成显示画面视图(display viewport)以及实际画面视图(actual viewport)二种。对于计算机浏览器来说，viewport比较不重要，因为显示画面视图跟实际画面视图是一样的。

如果我们在CSS里写width=200px，表示在显示器上这个对象宽200px，但在手机上却不是。CSS规范中鼓励制造商可以自行决定硬件像素要对应到多少显示像素，比如手机业者可能因为屏幕比较小，会把比例设定成1:0.5，所以手机画面会比实际画面小了一半。

怎么调整呢?只要在HTML的语法中嵌入，把actual viewport的值给visual viewport，这样网页就可以完整放入手机的小屏幕。至于CSS的部分，Opera在今年的W3C CSS会议中提出了要把viewport标签加入CSS。如果最后顺利通过，以后viewport就可以直接在CSS语法里设定。

什么是media queries

Media queries是CSS3的新功能，它整合了media type和max min-width/max min-height media type这两个属性，可以在不同的装置下显示不同的CSS版面。比如给screen的版面是一般的显示画面，给print的就是打印机的输出格式。

以打印机为例，如果我们不想印出网站的选单列，可以在media type下选择不同的CSS呈现方式。

以下的范例里头有两种CSS media queries的显示版面，它们是根据屏幕的大小来提供显示内容，当宽度小于480px，网页版面就会改变，比如sidebar会移到画面下方而不是跟着 主画面浮在左边(float: left)。阅动动向同时也会改变成由上到下，比较适合手机的垂直式阅读，免得读者还要吃力地在小屏幕上左右移动。

1、明确自己想在手机网站上展示哪些信息：

在手机网站制作之前应该明确自己想在手机网站上展示什么，分析一下可能的浏览者会有哪些，然后有针对性地策划和设计网站上的相关内容，这样才能做到有的放矢，不至于手机网站制作好了却没人浏览，或者浏览了不感兴趣。如果能做到有针对性的进行手机网站制作，通常手机网站在推广之后都会为企业带来一定量的潜在用户。

2、在手机网站制作时要尽量符合滑动屏幕的方式：

一般的手机屏幕，画面都不如桌上电脑那么大，尤其是阅读文字时更需要加以放大。即使智能手机具有网页放大缩小功能，但是观看起来也较为麻烦，因为网页放大后，很可能还要左右滑动才能浏览网页，浏览后还要缩小回原大小。因此在设计手机网页时，应能够以滑动屏幕的方式来阅读网页，因为滑动网页操作比着放大网页观看来要简单得多。

3、不能参照PC端网站来设计手机网站上的导航功能：

手机网页与跟一般的PC端网页不同，由于受到手机屏幕大小和屏幕操作的限制，在设计导航功能时应该按照手机屏幕来设计，不能完全照搬PC端网站，该简单的地方简单化，该去掉的去掉，同时在当阅读文章到最后时，要方便于用户回到最前头，减少卷动画面的机会，让网页变得更容易于移动设备上阅读。

4、手机网站制作也要考虑多种浏览器的兼容：

现在的移动浏览器能够处理大多数网站，一般的浏览器都能够正常浏览网页。但由于手机上的浏览器也有多种，比如UC浏览器、360浏览器、搜狗浏览器、其他浏览器，如此多的浏览器在浏览网页的时候，如果手机网站的兼容性差，就很可能会出现在某些浏览器上出现网页变形、内容显示不全的情况。因此，手机网站制作必须考虑到兼容于多种浏览器。

5、在手机网站制作时一定要减少用户文字输入操作：

现在智能手机一般都没有实体的键盘，或仅只有12键的电话输入功能，因此在输入文字上会比起使用电脑键盘麻烦得多。因此，减少使用者输入文字的机会，例如用户名、密码等，都是手机网站制作时要尽力避免的。

6、在手机网站制作时就应该考虑到日后的推广和宣传：

在手机网站制作时，不要忽略了用户体验，否则在日后的网站推广时将会遇到麻烦。任何一个手机网站，都必须经过广策划、设计和推广的过程，在手机网站制作时需要考虑日后的推广，手机网站应该在丰富站内内容的同时，提供详尽的产品信息以及联系方式，并收集有关产品的用户满意度和顾客需求方面的反馈信息。这样的手机网站上线后，其推广工作也会非常有效果。

7、手机网站制作要兼顾非触摸屏幕的设计：

虽然大多数手机都是智能手机，但也有为数不少的传统手机，不具备触摸的功能，使用的是传统的控制方向键做为滑动的工具，这时候，手机网页的制作应兼顾到非触摸屏的手机浏览。比如减少画面中超链接的数量、加大文字以减少误点。

8、在手机网站制作时要记得要简化网页内容：

一般的手机、平板电脑等移动设备，由于屏幕大小的限制，不易容纳下个人电脑的大容量的网页资讯，因此手机网站制作的首要一点就是减少网页内容，最好不用图片或是影音视频等，文字也应该精简，但要保持网页内容的可读性。只需要将最重要的资讯放入移动版网页，不太重要的内容内容，可以略去，或者通过超链接链接到新网页上。

9、手机网站制作要注重网页产品和服务的展示：

企业在手机网站上，需要表现的重点仍然是产品和服务的展示。移动用户访问企业手机网站往往是有备而来，想了解某个产品或者服务的详细价格、服务内容和功能。所以企业在手机网站上的产品和服务展示，可选择企业的主要产品，对其各类参数或价格加以详细说明，对于企业的新产品，也可以适当的加以介绍，必要时可以采用图文并茂的方式，但图片的体积应尽量小。

一、导航的设计重点

1、只在首页的部份加入搜寻的功能;

2、建立导航功能键，其中以(回到首页)、(回到上一页)这两个最为重要;

3、最后，(回到上一页)的按键除了首页以外，其余的页面都需要放置。

二、企业名称的设置

手机网页的顶部没有标题栏或地址栏，相应地，也就没有网站标题和图标。所以企赢001认为你的设计应该让用户知道，他们现在所浏览的网站名称，这对塑造品牌也很重要。

三、使用视觉元素来完善文本元素

1、标题同时使用文字和图标。

2、使用图形元素日期代替文字日期。

3、使用小信息图标来加强解释的部分。

4、除了字体的大小变化，使用不同的文章/标题颜色。

5、使用不同的浅背景色来区别不同的内容。

6、使用高亮来强调重要部分。

7、使用padding和negative space来突出文本或区分文本。

8、使用不同的“视图”，将内容分解成较小的部分。

四、使用视觉反馈机制来与用户交流

1、用色彩来突出已选择的区域。

2、当用户切换时使用淡入淡出动画。

3、使用边框颜色和渐变来表示按钮触摸状态。

4、使用不同的按钮或文本颜色来显示状态的变化。

5、当选择下拉菜单时，使用正在转向/已经转向箭头。

6、在视图之间使用滑动或渐变动画以显示区域的改变。

五、减少文字输入部份设计

1、允许移动上网使用者储存输入的帐号密码资讯。

2、输入的区块尽量加以放大。

3、允许移动上网使用者，输入简易的密码，例如PIN数字密码。

六、内容呈现方式

从用户角度来说，他们希望阅读所有的内容，所以我们进行内容呈现，只是用隔断、重组或其他视觉方案来让这些内容更容易访问。

2016最新手机网页设计注意事项

七、利用手机的天生优势

手机有着许多传统电脑所没有的优势，其中最大的优势就是(移动力)，因此手机版网页应该要特别发挥这些特性，让手机网页具有一般网页更多的优势。举例来说：

1、移动定位：大部分的智能设备都有GPS或是定位的机制，可以让客户主动找到您的位置。

2、移动联系：如果客户使用的是移动电话，可以立即发话;如果是平板电脑，也可以使用短信或是E-mail的方式传递信息给客户。

3、邻近地点：如果您的事业有很多据点，请告诉您的客户，在他附近有哪一些地点是便于他能够抵达的。

一、WAP手机网LOGO

用户进去网站,一般比较看重的是logo,Logo顾名思义就是站点的标志图案,logo最重要的就是用图形化的方式传递网站的定位和经营理念、同时便于人们识别。网站logo的设计过程中一般有以下三种思路:

1、直接以网站网址作为logo。

2、根据网站提供的产品/服务特点展开logo设计。

3、以传递网站运营的经营理念为特色。

二、WAP网站风格和创意

风格是抽象的。是指WAP手机网站的整体形象给浏览者的综合感受。整体形象包括站点的版面布局,色彩,字体,浏览方式等。创意,所谓创意就是不拘一格?某些设计师在做创意的时候发费周章,做出来确实不可否认很有创意、很别致,但往往对于行业网站的客户为什么不能接受呢?

三、WAP手机网站网页框架与布局

网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、变化型,在这里就不做一一论述了。其实在我们在做设计的时候并没有过多的去考虑什么形式,比如我们在一张纸看到一个圆形的东西,很容易可以联想到它像太阳,而有些人则联想到月亮等等,这都是一种形式比喻,最重要的是抓住客户的需求,把握网站的定位做出合理的框架布局。

四、WAP手机网站视觉流程

人们在阅读某种信息时,视觉总有一种自然的流动习惯,先看什么,后看什么,再看什么。在心理学的研究表明,一般的浏览习惯是从上到下、从左到右,在一个平面上,上松下稳而压抑。同样,平面的左松右稳。所以平面的视觉影响力上方强于下方,左侧强于右侧。这样平面的上部和中上部被称为“最佳视域”,也就是最优选的地方。

五、WAP手机网站网站配色

1、用一中色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。

2、用两种色彩。先选定一种色彩,然后选择它的对比色,再进行微小的调整。整个页面色彩丰富但不花哨。