一、选用合适的字体。

手机网页设计成功离不开排版，排版应该获得和图片同样的重视。虽然可供选择的字体很多，设计师要考虑的方面很多，比如说，目标客户和客户公司的性质。为手机网站页眉和内容选用合适的字体是必不可少的，无衬线字体和有衬线字体通常会为设计带来良好的效果。除此之外，你还可以结合其它字体，专为孩子和女性打造网站。

二、选择合适的配色方案。

任何手机网站的设计都离不了合适的配色方案，这对创建一个整洁干净的网站同样适用。坚持使用淡色和非彩色的投影对成功设计一个简洁网站大有裨益。浅色的投影可以帮助用户把焦点转向网站内容。标志使用黑色和较深的投影，手机网页中的页眉和导航元素使用浅色背景，这些都是不错的案例，并没有规定在简洁网页设计中不能使用大胆的颜色，但是这样的颜色要小心，克制地使用。有时候，手机网站有必要使用深色背景色来吸引某些目标用户。比起渐变色，有些手机网站更钟爱纯色。如果你的手机网站非得要使用纹理和渐变色，也不要用得太过火。

三、提高页面加载速度，手机网站以简洁为主。

一般来说，手机网站在用户下载和浏览时要比PC端网站的速度慢得多，页面东西太复杂，会耗掉用户等待网站加载的耐心，尤其是导航栏要简短清晰，能够快速地指引用户浏览网站的深层信息。对于网站内容来说，简洁突出重点就好，所谓的内容越丰富越好已不适用于手机网站了。

四、避免使用弹窗。

无论是出于方便用户联系网站客服还是做些小广告的目的，都要尽可能避免弹出窗口的应用，手机网站本来加载速度就慢，再添加这些窗口，必然会影响用户体验，阻碍用户浏览网站的视线，进而占用用户流量，引起反感而放弃对网站的继续访问。

五、手机网站图片要适配设置。

从手机上浏览网站必然没有那么方便，操作也不如PC端灵活自如，前面也说到了使用网站设计技术可以解决网站适应屏幕的问题，网站图片也不例外，但为了用户能将页面使用图片的地方看得更加清晰，可采用整站缩放的模式，而不是用户点击单张图片的缩放模式，当然，手机网站能少用图片是最好的。六、网站操作简单化。关于新页面的打开方式，最好采用当前页面显示的方式来设计，以免新窗口造成网站资源占用的负担，同时对于出现网站错误的现象最好设置提醒，让用户快速找到页面出口进行跳转，而不是不断地进行返回操作。

七、交互式的互动行为。

用户在移动客户端都喜欢进行留言，分享功能。特别是看到一篇很棒的帖子都会选择分享到朋友圈或者空间中，让朋友也参与里面。例如现在比较流行的做就是做微信公众号大咖们，往往一篇帖子都会造成几千人的持续浏览、点赞或者分享内容，粉丝喜欢中这种参与行为，因为这种圈子拉动粉丝在持续发酵中，用户慢慢都会舍不得离开。

怎么制作网站的手机版？想要建设自己的手机网站，不妨参考以下步骤：

一、手机网站定位

找准公司手机网站的定位是非常重要的，这也是手机网站建设的核心主题。考虑清楚自己想要建一个怎么样的手机网站？是为了吸引人气互动交流的展示型手机网站？还是为了销售商品拓展渠道的营销型手机网站？面对的服务人群又是哪些？目标客户的具体特征是什么？等等。

二、手机网站内容

根据手机网站建设的定位，确定好手机网站需要包含的具体内容。例如需要包含哪些标题、文案、图片、视频、栏目、页面等等。与此同时，我们还要确定好手机网站内容更新和完善的后续计划，比如定期更新定量的文章、及时分析热门关键词的走向等。

三、手机网站设计

我们需要先按照前面准备好的资料，设计出手机网站框线图，清晰的表达出手机网站整体的架构和交互逻辑。然后我们还需要对手机网站界面进行具体设计，包括对手机网站风格、组件框架、背景配色、字体尺寸等方面的设计。手机网站设计时要遵循实用性和美观性的标准，跟具目标用户的喜好来进行。

四、项目人员

确定好手机网站建设总体项目的管理人是谁？手机网站设计师、程序开发师、手机网站测试师是哪些？手机网站维护和后勤工作者如何安排？做一个清晰的分工计划。

五、建站预算

对公司手机网站搭建做一个预算，计算一下手机网站域名、服务器、设计、程序、素材分别都需要多少的费用，合理的安排出预算资金。

六、手机网站开发

根据上述总体计划，落实公司手机网站建设的开发工作。

七、手机网站测试

手机网站测试为的是在手机网站正式上线前，尽可能的排除掉手机网站建设中存在的漏洞和问题。例如浏览器和终端是否适配、功能按钮链接能否正常使用、显示界面是否完整等。我们需要提前确定好需要测试的方向和内容，以及测试的具体步骤和工具。

八、手机网站维护

手机网站上线后维护的具体措施。比如新内容的发布时间频率、手机网站推广的方法计划、系统安全的保障措施、意见反馈的收集处理等等。

当然，如果大家想要更好的简化上述的步骤，可以选择这个>>自助式建站平台

iPhone手机网页的设计尺寸

iPhone5尺寸是640x1136px分辨率是326PPI

iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI

iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI

安卓网页的设计尺寸

320dp：一个普通的手机屏幕(240X320，320×480，480X800)

480dp：一个中间平板电脑像(480×800)

600dp：7寸平板电脑(600×1024)

720dp：10寸平板电脑(720×1280，800×1280)

ipad网页的设计尺寸

iPad第三代第四代尺寸是2048x1536px分辨率是264PPI

iPad第一代第二代尺寸是1024x768px分辨率是132PPI

iPad Mini尺寸是1024x768px分辨率是163PPI

网站设计尺寸标准

1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。(在dw里面有设定好的标准值, 1024*768页面的标准大小是955*600,照着它的尺寸做就行了)

3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右

4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象.

页面标准按800*600分辨率制作，实际尺寸为778*434px

页面长度原则上不超过3屏，宽度不超过1屏

每个标准页面为A4幅面大小，即8.5X11英寸

全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px

另外120*90，120*60也是小图标的标准尺寸

每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K

网页广告标准尺寸规格

1、120*120，这种广告规格适用于产品或新闻照片展示。

2、120*60，这种广告规格主要用于做LOGO使用。

3、120*90，主要应用于产品演示或大型LOGO。

4、125*125，这种规格适于表现照片效果的图像广告。

5、234*60，这种规格适用于框架或左右形式主页的广告链接。

6、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。

7、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。

8、88*31，主要用于网页链接，或网站小型LOGO。

转载请注明：片头模版 » 手机 网页 设计(怎么制作网站的手机版)