如何设计手机网页

在移动设备上获取信息实际上是有趣的体验，因此，令用户在使用过程中感到愉快很有必要，简单地删除屏幕上的链接(或taps)并不能达到用户友好体验的目的。下面介绍如何设计手机网页，希望可以帮助到各位。

1、Logo位置

每个公司或应用都有不同风格的品牌元素，塑造品牌的关键是设计元素比如logo、字体和颜色等等要能代表该品牌。对于手机网页设计来说，这一点至关重要。Logo的位置可能与电脑版本有所不同，甚至可能只在Web应用的主视图呈现，所以配色方案很重要。

2、导航设计

在移动设备上获取信息实际上是有趣的体验，因此，令用户在使用过程中感到愉快很有必要，简单地删除屏幕上的链接(或taps)并不能达到用户友好体验的目的。导航应该包含用户需要的内容，并提供明确的路径。如果用户知道跳转的具体页面，就会进行点击。

3、页面排版

手机网站页面排版有三个事项：一是为了易于用户阅读，要尽量避免使用大量的文字，将这些文本重新调整为小图标或小条目是不错的做法;二是不要简单地删除你认为“不重要”的内容，应该重新调整这些内容的布局;三是用引语、线条或其他设计元素隔开大段的文字，使这些板块显得更美观。

4、信息反馈

信息反馈是设计中很关键的一个部分，特别是手机网页，用户反馈显得尤为重要。移动设备不存在鼠标悬停和动画，而且大多数设备都是在被触摸时才有所显示，所以及时提供清晰的操作反馈信息是非常重要的。在移动设备上，视觉反馈最为关键。

1、“同”字型

人们对信息的需求量日益增大,简短的介绍已经无法充实越来越多的浏览者的思想,所以“同”字型的网页布局应运而生,在这里收纳了不同行业不同方面的大量信息,而为了方便在众多的信息中方便浏览者寻找自己需要的信息,这类网页上方也会设置分类的标题栏,其中既涵盖了自己本网站的主题设计,也有不同商家投资宣传的广告标语,而且为了进一步强调也会在下面辅助上小标题。人们习惯于浏览一个页面的中间位置,这也使得一个页面的两侧被人们所忽略,作为仅有的宣传信息的页面,网站设计人员自然不会放过这些边边角角的位置,这里多会被填充上一些不是很重要的广告或者站内的服务人员,多数为了吸引人还会以滚动、闪动的形式出现,当然,这些不重要的弹框是可以被关闭的。

2、标题正文型

和“同”字型的页面布局不同,在这里都是简单清晰的中央分布类型,去除了繁多动态的两边弹框信息,在其他方面却没有什么不一样。这种页面布局方式,将重要的事件和一些实时动态类信息放在中上的醒目位置,将一些浏览项目的分类放到中间位置,而在底部不会安排什么重要信息,有的也只是填充了一些设计者、设计事件等信息,而在一个页面的顶端多会附有实时天气,滚动的实时动态标题等。

3、综合框架型

讲述起来这种类型的设计无非就是给人以更多“规矩”的感觉,在内容方面也是将不同重点进行相应的排列,不同的上下位置分布相应的信息,唯一有区别的就是在设计页面时将原有的白纸式页面增添了边框而已。

4、封面型

从标题里就可以看出,这种设计类型就像是大家的课本页面一样,主要的信息很少,多数需要了解的信息都会以超链接的形式出现,中间配上动态图片或者变换颜色的文字,这种类型的设计多用于表现鲜明的个人特色,目的也仅仅是单纯地吸引浏览者的眼球。

1、图像的尺寸

图像的尺寸与网页设计目的相关，尺寸大的图像涵盖的内容丰富，能够更加细的传达图像信息，让浏览者注意图像中醒目的内容元素。尺寸小的图像简单，有个性，对于主题表达起到衬托的作用。网页设计中大小图像结合文字共同把设计主题展示出来，设计者根据设计需求分析网页设计的主标题和副标题，让主标题更突出，更惹眼，让附属图像与主图内容相得益彰，共同达到设计效果。

2、图像的外形

图像设计向多元化方向发展，不同类型的图像都有各自的特色，我们看到圆形的图像时就觉得不呆板、亲切可人;而不规则的图像动态十足，有活力;方型图像则给人中规中矩的感觉。网页设计目的不同，对各种类型的网站需要多种形状的图像烘托。

(1)方形图像。方型是最常见的，也是我们生活中使用最多的形状。在一些严肃的网站比如政务网等官方，适宜利用方型的图像或主图像来传递给浏览者正规、严肃的信息内容。方型的稳重带给浏览者可信度高、理性的思考，能把整体网页的风格衬托出来。

(2)菱形图像。菱形是方型的灵动，没有方型的凝重、严肃，使网页的美感增加。

(3)圆形图像。圆形图像有柔和曲线，让浏览者产生充实的感觉，圆满的外型把自由和随意传递给浏览者。

(4)三角形图像。三角形图像在网页中能够把动感有个性的内涵阐释给浏览者，网页变得生命力十足。

(5)个性化图像。此类图像不是自然界的常规图型，经过创造者技术加工和个性化处理，把图像加工成自由灵活的创意图像，图像没有规则的形状，没有统一的配色，自然而又随性。图像与文字自然规整的结合在网页页面上，将主题效果突出的显示出来。

响应式网页设计是以用户为中心的设计，关注特定情境下的用户体验，它既要适应设备的功能和限制又要适应用户的使用环境。响应式网页设计的方法主要包括以下几个方面。

(一)移动优先在网站策划与制作的初步阶段，响应式技术比常规方法费时耗力。一般来讲，开发人员需要了解用户设备及不同使用情境，优先从移动端开始设计，从创建具有一定可用性的基本体验开始，满足用户简洁、顺畅的情境需求。然后，渐进增强，布局显示内容，提高图片质素，增加必要的服务，提供恰当的交互，创造更丰富的体验。移动优先采用渐进增强原则，而非早期网站设计提倡的优雅降级原则。移动优先既可以为不支持媒介查询的移动设备提供适合的布局，聚焦当下最重要的事，也可以降低CSS代码复杂性，减少冗余代码。

(二)媒介查询媒介查询是指根据用户特定情境，查询设备各种属性来布局样式和内容。测试的属性包括:设备屏幕宽高;视窗显示区域的宽高，例如浏览器窗口的大小;屏幕方向媒体特性决定一个设备是处于横屏还是竖屏，即设备处于垂直或水平的状态，宽长比例等特性;设备屏幕分辨率，每平方英寸像素数，一般的屏幕为163ppi，视网膜屏为326ppi。这些属性可以通过“与或非”等逻辑运算符形成复杂的表达式，以此判断是否为特定目标设备类型，从而加载特殊样式、调整页面布局、提供适合的功能和交互。

(三)流式布局传统的固定宽度布局以像素为单位，是网页布局中最常见的方法，它简单粗暴地固定了页面的宽度，使用户在不同设备上浏览相同的页面。屏幕较大时，页面两侧出现大片的空白区域未加利用;屏幕较小时，页面内容位置不变，用户只能不断地通过手指滑动进行浏览和界面交互。