网页设计出现的误区

所有的图片尺寸都一样，所有的文本都一样大小，所有的按钮都一样的样式，这样的“一致”看起来不错，但是实际上会显得更加无聊。下面介绍网页设计出现的误区，希望可以帮到您。

1、谁都可以做好网页设计

如果你问隔壁小明他能否给自己做一个网站，他可能会说网页设计他手到擒来之类的话，但是他真正做出来的东西，可能并不是那么一回事。

他用Dreamweaver在1个小时内做出来个网页Demo，千万不要被那唬住。真正的的网页设计是一门综合学科，集合了信息架构设计，用户界面设计，排版设计，色彩搭配，字体设计等多门学科，只有真正将这些方面都正确兼顾到了才能做好网页的设计。

2、填满页面所有的空间

千万别这么干!留白(或者负空间)有着非常重要的作用，它与网页上的其他的视觉元素相互依托，是构建一个优秀网页的重要组成部分。有留白，才能创造出网页的视觉焦点，让网页的设计感更强，更易于浏览和使用。想知道留白是如何使用的?看看Apple的官方网站就知道了。当然，留白并不一定非要是白色的。永远不要填满你网页所有的角落，适当的留白永远比这样设计好看。

3、所有的细节都必须醒目

对于网页排版有种误解，认为网页中所有的东西都要要大，要粗，要闪，要亮。是的，我们将内容放到网站中是希望它们能被注意到，能脱颖而出。可问题在于，如果所有的内容和元素都加粗了，闪耀了，那么什么内容都不会突出来的。突出是需要通过合理的布局、差异和负空间烘托出来的。使用不同的字体，主次内容相互依托，图文混排，优质的内容才会被眼睛捕捉到。

4、大Logo综合征

是的，这就是广大设计师津津乐道的大Logo综合征，这是病，该吃药。Logo的确是用户进入网站最容易注意到的元素，但是用户更应该注意的东西是你网站的内容!当用户开始注意网站内容之后，它们不再会去看你的Logo，当你强行放大Logo无异于强迫用户去关注他们不想看的东西。

5、上网搜个图来用用吧

你永远无法预知搜索引擎给你扒来的图片都是从哪儿来的。有的图片是有版权的，如果你不小心碰到有版权所有的图片，那么你将面对的是对方的索赔了(国外很严格，国内对这一块也越来越苛刻了)。

如果你是为公司干活儿的设计师，不妨在合适的时候请公司购买图片库或者资料库之类的，再不济也有大把的免费图片网站供你挑选。

1、不合理的排版

排版设计出问题，首先是因为空间设计不合理。段间距和行间距是文本内容常见的空间控制变量，虽然有的排版会因为间隙过大而显得松散，但是更常见的问题其实是排布布局过于紧密，缺乏呼吸感，这可能会让设计看起来混乱，可读性低下。

一般而言，对于大段的文本内容，行间距最好是文字高度的120%到150%。对于较小的文本，考虑到移动端的用户使用场景，这个行间距可能还得在提高一些，这样 才能确保舒适的阅读体验。

但是，不论是怎样控制，核心始终在于确保阅读体验是愉悦而恰到好处的。拥有恰当而富有流动性的排版，视觉上才会令人舒适。间距太大太小都不合适。

另一方面，整个页面排版的行间距的比例要保持一致，这样能让视觉上更加统一，也能够强化同类、相关元素的关联性，增加可读性。

2、所有元素尺寸一样

所有的图片尺寸都一样，所有的文本都一样大小，所有的按钮都一样的样式，这样的“一致”看起来不错，但是实际上会显得更加无聊。

网页中的许多元素可以一致，但是不能完全一样，这是两个概念。基于不同的需求，不同的位置的按钮尺寸是不能完全一样的，但是它们可以沿用相同的样式，并且设计几个相对固定的尺寸比例，这样也可以更好的控制整个视觉和体验。

其实这当中，图片在网页框架中的使用就是一个最好的实例。不同页面的首图尺寸是一样，其中的图片如果要应用到不同整个布局其他的位置的时候，直接按比例缩小，其中的元素视觉重量会直接降低，信息传达的有效性也随之降低。最理想的状况，是根据整个网页框架布局的需求，基于原图有针对性地进行切图。

3、忽略层次

我们所看到的绝大多数的网页是需要通过精心组织的层次结构来呈现内容的，毕竟网页内容也是遵循 80/20 法则的，20%的内容常常能够拥有80%的重要性。这也使得网页的层次结构如此的重要。

网页中不同的内容是有轻重缓急的，而这种重要性不论是基于设计的需求还是用户的需求，都是能够进行判断和划分的。与此同时，用户在快速浏览内容的时候，重要的内容应当置于重要的、易于扫视查看的位置。在我们之前的《F式布局》的文章当中，对此有详细的陈述。

在确定了重要性优先级之后，层次结构的设计思路就可以基本确定了。首图、标题等元素是承载重要信息的载体，而能够引导用户行为的CTA按钮、输入框等元素，则能在交互的层面上，强化内容的效力。所有的这些东西，在设计网页的层次结构的时候，应该系统的考虑。

4、忽视基础功能

网页的可用性始终是摆在易用性之前的。我想你也有过这样的经验：打开网页之后经过漫长的等待而网页无法加载;点击一个按钮而没有相应的反馈;想找到网页背后所有者的联系方式，但是在About Us 的页面中一无所获。

这些基础的工作都需要设计师用心做好。确保网页的基础功能都能够顺畅的使用，正确的反馈，而这些基本的可用性问题，常常出现在搜索框、导航、页脚甚至业务逻辑当中。

在网页当中，不同类型的元素涉及到不同类型的内容，即使文本和图片也常常带有链接，或者牵涉到特定的功能或者交互，而用户对于这些功能是有预期的。可用的按钮、链接等基础功能，确保了信息的完整性和功能的完整性，只有这样，用户才能信任网页本身。

5、不够简练的文案

网页中的文案是需要反复推敲的。

许多网页在使用文案的时候，不够简练，用户很容易在浏览过程中迷失。人集中注意力的时间始终是有限的，所以，尽量在交互和UI中使用明确、精准的描述性的语言，直接地指引用户，清晰地阐明交互的结果。

清晰简练的语言文案是维持用户兴趣、推动交互继续的动力。

6、低分辨率

清晰度不足的图片绝对是设计的硬伤。现如今的高清的屏幕无处不在，低分辨率的图片在如今的屏幕上无所遁形。

随着网络的覆盖和带宽的拓展，大尺寸的图片和文件已经慢慢成为标准了。当你需要精准地控制图片尺寸和屏幕分辨率完全对应起来，也可以参考响应式设计，借助断点来控制显示的尺寸。

当然，最重要的一点在于，使用低分辨率的图片，还不如干脆不使用。

7、太多机巧

过多的插画，繁复的特效，太多的设计趋势，当常见的设计机巧和效果在网页上堆积起来的时候，会很容易稀释网页中真正重要内容。不同寻常的色彩，奇特的动画，巨幅的图片，这些真正抓人眼球的元素应该有针对性、有计划地使用。

它们确实是提升趣味性、吸引用户注意力的重要手段，但是同样需要谨慎使用。

当你想要使用特定的设计元素、采用流行的设计趋势或技巧的时候，选择一个思路，尽量主次分明。很多时候，一个设计趋势，比三个趋势叠起来更有用。

结语

如果你的设计当中出现了这些问题，请不要担心。它们的解决方案并不复杂，通常也不需要经过复杂的重设计来完善，只需要进行适当的调整即可。

近几年移动互联网也开始如雨后春笋般迅速成长，是继互联网之后又一新力军，这个新力军本身是互联网的延续。移动互联网的快速发展，也使对移动互联网页面设计的要求越来越高，本文主要主要探讨移动互联网的特点、页面设计中存在的问题及页面设计原则。

一、移动互联网网页设计特点

移动互联网载体是手机，从界面角度来看，桌面网页设计的分辨率大都是1024以上，而手机的分辨率因型号不同各异，一般只有320，最多也就是800的分辨率，从物理角度来看，这基本上是移动互联网页的最高值。要在足够小的屏幕里让你看到想要的东西，是一件非常难的事。基于这个出发点，大部分移动互联网网页设计的比较简单和实用。移动互联网比起传统的网页具备较强的实时性。我们可以第一时间把身边发生的事情通过手机发布到互联网上，在此基础上推动了诸如手机人人网、手机微博等社区化移动互联网站的加速发展。

二、移动互联网网页设计中现存问题

1.移动互联网网页分辨率难以衡量目前市场是的手机型号各式各样，屏幕种类令郎满目，规格不等，分辨率从320—800像素都有，这些因素给移动互联网网页设计带来不同程度的难度，设计师很难针对一种或几种手机型号进行设计，只能通过对主流手机进行界面设计，这种设计完全依赖于UC浏览器来自动转换分辨率的设计导致了网页文字错位，页面杂乱，严重降低了用户满意度。

2.网页设计缺乏规划性由于目前移动互联网页面设计受到移动终端的条件限制，设计师设计出的页面往往过于简单，甚至出现文字堆积的状态，整个页面毫无设计感。于此同时，由于移动互联网处于刚起步阶段，很多设计师还不够成熟，设计出的页面缺乏色彩规划，要么颜色过于单调，要么花里胡哨。移动互联网站同时也有电脑桌面网站，由于受到手机条件限制，很多移动互联页面趋于简单，移动互联网站与桌面网站缺乏统一性。

3.网页载入速度慢受到移动互联网速度的影响，再加上很多网站并非是专门设计的WAP站点，在访问一个网站时，大量的图片和视觉效果加载缓慢，使用户丧失耐心，用户体验度大打折扣。

三、基于用户体验的移动互联网页设计原则

1.简洁、易操作、避免输入

鉴于手机屏幕狭小，要做好页面设计，简洁便成了必然的要求。简洁并不单指设计的不拥挤，同时还包括页面板式和图形图像的简练概括。就现行的手机屏幕而言，页面上一行的字数最多能容纳14个中文字符，所以，移动互联网页面的板式结构要相对简单，呈现形式最好单列布局。由于屏幕太小，不足以观察到页面中细微的设计，所以图像的设计要以简洁为主，要让用户对页面内容一目了然，而花里胡哨的设计只会干扰用户的视觉。良好的用户体验下的设计应当遵循少即是多的原则，简单的交互、清晰的提示和反馈，少而精确的用户请求，从简单、易操作中准确的满足用户需求。另外，还应尽可能的减少用户输入，避免给用户增加负担。

2.信息扁平化原则

所谓信息扁平化原则，就是指减少信息层次关系，用户用最少的页面跳转操作找到想要的东西。现在大多数移动互联网页面设计信息结构都以深度为主，整个信息结构的链接呈现树状结构，用户想找到自己想要的信息，要一层一层的点击链接，这样导致用户操作的复杂性，在每一次页面跳转是，都会损失掉用户的流量，严重影响到用户使用。在这种情况下信息的扁平化显得尤为重要。我们可以通过增加Tab将并列的信息显示在同一个界面内，以减少页面的跳转;增加流程的便捷通道，如图(1)，在页面A中增加到达C的快捷方式，虽然在程序上讲C还是第4层，但对于用户而言C却变成了第3层，这样无疑就增强了用户体验度。3.增强交互性和通用性移动互联网页面设计要加强交互性的设计。使用手机浏览网页的过程实际上就是用户与页面进行交流的过程，因此良好的交互设计是提升用户体验的重要因素。另外，移动互联网页设计师应充分考虑各种型号手机屏幕大小，不能单单依靠UC浏览器来自动调整页面布局和大小，要增强页面设计的通用性。

4.重视色彩搭配，少用图

移动互联网页面色彩要和桌面网站色调统一、搭配协调。在此，我建议：(1)在同一个页面中，颜色种类不易过多。颜色太多会使用户觉得页面太杂乱，混淆视觉，用户难以分清主次关系;(2)颜色搭配分清主次，色调要统一;(3)尽量使用同色系颜色，同色系的颜色容易使页面色调统一，但需要注意的是，在一些小的元素上可以适当搭配小面积的其他颜色，避免呆板。另外，尽量减少用图，使用图片能美化页面，但同时也会使加载速度变慢，增加用户流量。结束语：移动互联网发展势头日渐凶猛，其页面设计也越来越重视用户体验和人性化，越来越多的设计师将设计重心转移到用户体验上，现实证明，基于用户体验的移动互联网页面设计可以更好的提高用户满意度，以用户为中心的页面设计正在为移动互联网开拓一个崭新的人机交流局面。

网页设计是艺术和技术的组合表现。新时期对网页设计师的技术要求近乎“苛刻”,在考虑配色、设计、交互性和响应速度的同时,还要考虑笔记本、台式电脑、智能手机、上网本和平板电脑等客户端设备以及各种各样的浏览器兼容性问题。产品一定要适应时代,艺术设计、功能技术、设备环境、浏览平台等诸多问题似乎对于网页设计人员来说都展示着“让子弹飞”的局面。随着响应设计、持续联系和虚拟现实等新名词的出现,未来网页设计已经呈现出新的发展趋势,对于一名出色网页设计师来说,了解网页设计发展的热点趋势非常重要,下面,我们一起谈谈这些新趋势。

1、CSS3+HTML5技术广泛应用

CSS3+HTML5技术将会得到更广泛的应用。网页设计师滥用Flash的现象会慢慢减少,很少设计师会在整个网站内都应用Flash设计,他们会在可用的地方使用HTML5替代Flash,使网站变得运行更快速。但目前HTML5还不能够完全取代Flash,Flash的某些效果HTML5暂时还不能够实现。但CSS3的应用范围越来越广,在某些地方上甚至超越PS,操作简单,维护方便。

2、移动互联网时代

智能手机、iPad和上网本销量的不断攀升,意味着你的设计需要考虑更多的移动设备。创建适合移动设备的网站不是简单地在原有的设计上去掉华丽的元素,也绝对不是在原有的设计再设计一个支持移动设备专属的网站,相信那个网站不久还是要改版的。在使用CSS3的情况下,设计移动网页方便多了,最重要的是你可以只修改一个CSS文件来完成整个网站修改,以符合用户使用不同设备浏览网页。如果你不提供移动网站或者没有针对移动网络标准优化,那说明你还并未准备好迎接移动互联网时代的到来。

3、触屏设备

触屏技术应用越来越广泛,触屏设备随处可见。这意味着,你的导航设计不再只是鼠标导航,你必须要考虑你的设计适合触屏设备。请问你的设计做到指尖导航了吗?作为设计师,我们更喜欢鼠标。当鼠标悬停的时候链接会变得高亮,然而触屏没有所谓的悬停。你将会在设计中如何向触屏设备访客展示链接?同样,如何才能做到方便你的游客仔细阅读您的网站?这可能在浏览器标准上存在争议,或者水平滚动触屏可能更加合适。将网站设计类似于杂志的布局更有利于游客浏览你的网站。最后,你必须考虑在你的网页设计中使用流体布局,你需要处理的重点不再是屏幕分辨率问题,而是如何做到使访客从垂直到水平阅读你的网站都会清晰。你的设计必须做到灵活,以应付任何挑战。

4、域名的更新

.com域名的吸引力越来越少了,主要是现在我们很难再找到一个比较短的.com域名了。未来将出现更多创造性的域名,人们开始将视线慢慢转移到.me、.co和.cc上。想想域名的发展,抢先一步,不然,错失先机。

5、QR:QuickResponse

方形的条形码被称为QR:为QuickResponse,它跟网页设计有什么关系呢?你可以试试使用手机拍摄一张QR照片,像变魔术一样,手机上读取QR的软件就会打开条形码相关的网站。你可以将QR应用到你的网站上,目的是让浏览者拥有你的移动网页的快捷方式。还可以在你的网址上放置一个特殊的推介代码QR追踪你的访客。或者可以使用QR作为你的头像,然后到别人的网站评论、留言。利用QR这点优势的网页设计是最睿智的选择。

6、持续联系/LifeStream

Lifestreaming是一种在线记录个人日常活动的网络传播应用,比如在线视频、博客、日志、在线相册、聊天内容甚至是一些喜欢的网站的链接等等。将来人们还会加强lifestreaming的形式进行人与人之间的交流互动和持续联系,并且,个人博客在Twitter上更加活跃,并通过Foursquare互相传递即时信息。毋庸置疑,作为网页设计师,你必须了解这个趋势和应对这个趋势。

7、简洁的配色方案

网页配色方案是设计师永远值得讨论和探索的话题,纯色不但直观和简洁,更有很多种表现手法。当然,颜色最好保持使用2到3种,调整颜色的透明度,或许会给你意想不到的视觉冲击效果。更最重要的是——这些颜色不是PS出来的,而是应用了XHTML/CSS和JavaScript技术。

8、大背景图

大背景图的网页设计应用将会更加明显。这些背景图像一般是高分辨率,覆盖整个网页。高清图片是迅速抓住读者的好方式,可以产生极具冲击力的视觉效果。当然背景图的色彩、内容等都十分讲究,任何情况下都不要破坏用户的体验。图片类型趋向于一些比较柔和、略带透明的一类,不要影响到网站文字的阅读。

9、ParallaxScrolling

Parallaxscrolling是让多层背景以不同的速度移动,形成运动视差3D效果,虽然纯属视觉效果,但在内容滚动时形成的视觉体验仍然非常出色。ParallaxScrolling可以通过简单的CSS技巧或jQuery插件来实现。Parallaxscrolling运用于网页设计的次要元素如header、footer或者背景可以起到很好的效果。

10、深度判析

深度判析是关于在网页设计使用维数,这样可以使你的网页变得更加真实。如果运用得恰当,那将会是一个虚拟的3D效果,就像3D电影阿凡达那样。尽管3D技术还没有去到网站设计,你仍然尝试使用维数进行设计。

11、缩略图设计

Google已向浏览用户推出浏览预览技术。过去我们只能通过点击链接才能看到网页内容,现在你只需点击放大镜然后将鼠标悬停在链接上就可以预览该链接的网页内容。如果你的设计是基于Flash,预览将无法显示你的设计元素。现如今互联网用户变得更加精明,他们往往希望以更便捷的方式看到更多人性化的导航设计。互联网本身是原始的,枯燥无味的,是人类通过这个开放的平台分享他们的一切才变得多姿多彩。网页设计技术发展的速度和趋势,对网页设计人员是严峻的考验,如果把这些技术理解为一种程度,那么你达不到这个程度,就不能深刻理解你所做的工作,也就无法设计制作出适应时代的产品。