「手机网页设计要学什么」如何做好手机网页设计

手机网页设计要学什么,怎么用手机做网页设计

内容导航：

设计手机网站网页需要用到什么技术

手机端网页设计

如何做好手机网页设计

网页设计该怎么学呢

一、设计手机网站网页需要用到什么技术

手机网站开发其实不难,本手机网站开发教程主要介绍:手机网页设计和制作的七个方面的知识,让你避免走一些现在的手机网页的弯路,学完本教程后,你就能对手机网页的制作和设计有大概的了解,然后有针对性地学相应知识。1.手机网页的标记语言WMLWML,早期的手机上网只能通过wap网站,而WML是用来制作手机wap网站的主要标记语言,它能够比html消耗更少内存和cpu。因为WML大部分针对早期和低端的手机,现在已经逐步被其他的技术取代了,现在学习手机网页设计制作完全可以忽略WML。但是仍然有一部分手机,如诺基亚1100这种超便宜和低端的手机,有着200万左右的用户,假如手机网页的受众是这部分人,还是应该用WML。XHTML未来智能手机的市场份额会越来越大,考虑到这点,现在进行手机网页设计制作时,我们会用到更加熟悉的标记语言Xhtml。现在大部分智能手机的浏览器都能正确处理Xhtml,它会识别两种类型的Html。①
Xhtml:基础的,和桌面浏览器相同的Xhtml② Xhtml-MP:针对智能手机的Xhtml这两种类型的不同之处,Xhtml-
MP包含比较少的要素和相对宽松的限制,能适合手机平台的渲染,现在很多手机网页设计制作直接用Xhtml,也没什么大问题。2.手机类型手机市场上既有非常高端的iPhone手机和谷歌的Android手机,也有诺基亚一些单色点阵显示的低端机。这些低端机在浏览手机网页时有很多的限制,如屏幕分辨率、渲染Xhtml的性能等,因此如果你的手机网页是针对这部分用户,最好还是用WML。另一方面,类似于iPhone和Nexus
One这种高端智能机,拥有可以和桌面浏览器相媲美的渲染网页的性能。对这部分用户而言,良好的用户体验是很重要的,受限于手机的传输速度,如果直接用一般的电脑上浏览的网页来代替手机网页,对手机网页的目标客户来说,并非明智之举。在手机网页的设计制作中,这个问题更加棘手,不仅要考虑分辨率、尺寸大小的兼容,而且设计制作还要考虑不同的手机屏幕的形状,下图显示了手机的不同分辨率,屏幕形状从接近正方形到长方形都有,这在设计制作手机网页时,几乎令人抓狂。可以把手机根据屏幕尺寸分成几种常见的类型,如:128
x 160 pixels176 x 220 pixels240 x 320 pixels320 x 480
pixels这样在设计制作手机网页时,就可以比较有针对性。注意要尽量把手机网页制作成简洁的风格,因为手机没有鼠标,只能向上和向下,用户不能方便地切换页面。3.手机网页的目标群体任何网站设计网页时都应该明白自己的目标群体,以便向他们传输最合适的信息。这点在进行手机网页设计制作时更为重要。因为你不仅要知道你的目标群体,还要知道他们浏览手机网页时的情景。浏览传统的网站,访客会坐在桌上,有着大分辨率的屏幕。手机网页的访客则有可能是在排队、等交车、坐在地铁等。手机网页的目标群体,谷歌的开发者将看手机网页人群分为三大类,这对我们进行手机网页的设计和制作,很有参考意义。A:一般手机用户一般用户访问手机网页时和用电脑访问网页差不多,他们没有特别热衷于哪个领域,他们只是利用空闲时间浏览网页。对于电脑浏览网页的用户而言,这些空闲时间可能是休息时间。但是对用手机浏览网页的用户而言,则可能是在等待朋友或上下班路程,这意味这他们随时可能中断网页的浏览。如果你的目标群体是这些人,在制作设计手机网页时要特别注意这些手机用户的屏幕尺寸和时间上的限制。因此设计制作手机网页要“记住”用户看的内容的位置,以便他们随时返回浏览。最好不要使用大段的内容,相反,要把手机网页的内容制作成几个小的部分,引起他们的关注。记住,这些手机用户没有时间去浏览大段的内容。B:回访者回访者是一些会时常回访网页,以便获取他们感兴趣的内容的人群。如果你的手机网页提供的是一些诸如天气预报、股票资讯、比赛运动的信息,那么目标群体就会有相当多这部分的人。因为手机屏幕提供的信息是有限的,所以针对这部分手机用户设计制作网页,要考虑到这些人需要哪些信息,将这些信息放在手机网页的重要位置,避免这些人在手机执行了很多操作才在网页上找到需要的内容。另一点是关于为手机网页用户提供定制服务的问题,如制作手机网页论坛。因为手机用户登录不是那么方便,所以如能避免则尽量避免。有一些专业的网站允许手机用户通过电脑访问他们的网站,然后定制相应的手机网页的页面,这样会生成一个专门适用该用户的网址,下次这个用户用手机访问时,就能直接适用自己定制的界面。C:特殊手机用户根据你的手机网页所要提供服务的不同,这部分用户也会不同。比如电子商务用户可能会通过手机网页向你发送一些比如“未收到货物”的通知,或者一些航班公司会收到用户从手机发送的“搭机迟到

二、手机端网页设计

什么意思meta标签是位于标签中的一个设定网页的重要元素标签，第一个meta标签代码一般用于手机端，因为每个手机型号的屏幕不一样，所以这个代码可以让网页自己适应手机端的屏幕大小显示。
第二个meta标签代码代表电话号码，手机号码，并检测手机号码的格式，手机可以识别点击然后自动拨号。
iphone手机网页的设计尺寸iphone5尺寸是640x1136px分辨率是326ppiiphone4和iphone4s尺寸是640x960px分辨率是326ppiiphone和ipodtouch第一代、第二代、第三代尺寸是320x480px分辨率是163ppi安卓网页的设计尺寸320dp：一个普通的手机屏幕（240×320，320×480，480×800）480dp：一个中间平板电脑像（480×800）600dp：7寸平板电脑（600×1024）720dp：10寸平板电脑（720×1280，800×1280）ipad网页的设计尺寸ipad第三代第四代尺寸是2048x1536px分辨率是264ppiipad第一代第二代尺寸是1024x768px分辨率是132ppiipad
mini尺寸是1024x768px分辨率是163ppi分辨率不一样，内容更简单些，排版紧蹙些。

三、如何做好手机网页设计

随着互联网科技的发展以及人们生活方式的改变，手机网站逐渐赶上PC网站，成为企业宣传推广以及用户阅读的的主要平台，因此也有越来越多的企业开始制作手机网站。不过，手机网页设计必须遵循移动端的设计原则，而不是盲目沿用电脑网站的设计规律，毕竟两者还是有很大区别的。

首先，移动端网页设计都需要考虑网络的问题。虽然现在的网络普及程度高，但是大部分用户还是利用手机流量来上网的，因此对手机网页的访问加载速度要求较高。如果用户在流量网页时遇到页面迟滞、视觉错位、信息不全等问题，用户体验就会大打折扣，因此要求网页内容尽量简洁明了，同时展现精准、有用、易用的菜单栏。

还有，因为手机端屏幕大小不一，如果想要保证所有人正常访问页面，维持内容的可读性，那么就需要我们在进行相关设计的时候，尽量控制文本的间距、颜色，着重突出页面的重点内容，让用户更容易看到自己想看到的内容,另外，一般手机中的电话、短信、推送等信息是无处不在的，用户在浏览网站时，注意力很容易就被这些弹出来的信息所吸引，因此网页的图标设计一定要高效，让用户在短时间内就知道网页的导航信息是什么、主要内容是什么，节省用户时间的同时，还为网站争取了成交的机会。

手机网站布局设计方法

1、手机网站的单页

手机网站建设的单页这个是存在于很多企业网站的内容，单页优化有着一定的好处，首先网站的单页是用HTML书写，并且完全静态化，这个是符合搜索引擎的，有利于优化，对搜索引擎友好。

这种页面的布局往往需要的是大气，简洁，直入主题。一般可以用来介绍公司以及公司的主要核心内容。

2、首页布局

手机网站建设的首页是一个网站的核心部分，浏览者首先看到的就是首页，然后才会看到内页，才会了解你的公司，只有首页有吸引力，才能留住浏览者浏览你网站的内容，那么首页的布局就很重要了。

首页需要突出网站的核心，展示公司的优势，尽显企业的特色，而且需要有主次之分，上下之分，因为浏览者的习惯是从上而下，从左而右浏览的。

3、内容页布局

手机网站建设的内容页就是网站的内容详细展示页面了，有的网站建设者没有太多注意的问题，手机网站建设者认为内容页根本不重要或是不是很重要，只要在后台把文章内容上传上去让其显示就可以了。

其实一些大网站的权重流量都是靠这些内容页撑起来的，我们每天更新文章显示的一个界面，这个页面的一个好的内容页能够给网站带来某一特定词的排名。

4、列表页布局

手机网站建设的列表页分为图片列表和文章列表页。图片列表页一般展示的是公司的案例或产品，一般图文布局展示就可以了。文章列表页展示的是公司的新闻或行业动态之类的文章，一般是新闻标题显示布局就可以了。

四、网页设计该怎么学呢

答：要是想让你的网页多一些炫目的效果，建议你学一下Flash，难度并不大，而且要是前面的JavaScript基础打得好的话，学到Flash中ActionScript时，你会有一种似曾相识的感觉，因为这两种语法几乎是一模一样的