网页设计的主要问题

网页设计中，点缀元素很多都是起到视觉修饰作用，所以在视觉表达时要弱化它们的存在，很多初学者会忽略点缀元素的弱化调节。下面介绍网页设计的主要问题，希望可以为您带来帮助。

1、 网页图标的统一风格

图标统一性：

a、 风格统一：线条性、块状图标、手绘图标、扁平图标、拟物图标等(同时线条图标线条粗细一致)

b、 色彩上统一：图标可以采用相同颜色配色;如果是不同颜色配色方式在视觉上要做到色调统一。

c、 视觉上大小统一

2、弱化点缀元素

网页设计中，点缀元素很多都是起到视觉修饰作用，所以在视觉表达时要弱化它们的存在，很多初学者会忽略点缀元素的弱化调节。

3、让页面更简洁

页面简洁但不单调是我们的目标效果，但是很多设计师在设计师习惯用不必要元素过度修饰。

合理点缀修饰让设计更活，过多装饰让设计更做作，慎用修饰。

4、图片视觉平衡

网页设计中人物或产品图是常用的元素，在使用人物图像时，保持视觉平衡和协调，所以要控制视平线方向的一致

图片不平衡时用户会花时间去主动寻求平衡，会给用户阅读带来“难点”，平衡设计是设计师所需要掌握的设计点。

5、色彩合理使用

一般界面中使用2-3种颜色，更多颜色难以把控，也会让用户眼花缭乱，无法找到重点信息。其中主色选取更为重要。

定主色方法：品牌色(logo颜色)、图片色、情感色。

定辅色方法：同色系配色、同色调配色等

6、提高图片质量

影响图片质量原因有：

a、 素材不清楚：可以去高清素材网搜高清图(例如大作网、花瓣网、500px、、等)

b、 抠图不干净(有白边或锯齿)：不能懒得只用魔术棒抠图(钢笔通道才是抠图利器)

c、 图片使用变形：很多人为了符合比例就暴力压缩图片(找合适图片，也可适当修剪)

d、 未适当修饰图片(如调色、裁剪等)等原因。

7、按钮使用的合理性

按钮是网页重要组成元素，合理设计按钮能提高用户体验(如不可点击的按钮设置成灰色);其次按钮的统一性(如按钮的圆角度和风格)。

按钮的几种状态：普通可点击状态、不可点击状态(设置灰色)、点击后状态、聚焦状态(点击未松手)、划过状态。

8、文字的极差关系处理

文字的极差关系能够直接反应出文字的层级，突出重点文字内容;并且让整个设计不累赘，更有设计感。

极差关系可以从文字的大小、字体、颜色、是否加粗、倾斜、大小写、间距、图形结合等手法来解决

9、信息阅读符合用户习惯

不同的设计方式可能让用户有不同的体验感，正确的设计方式复合用户习惯，减少用户成本也是网页设计主题之一;反之会让用户感觉很别扭，不习惯。

比如我们阅读习惯是从上到下，从左到右，从重点到普通的顺序去阅读，所以在做设计时你的重点可以从用户阅读习惯开始。例如下图的交互点颜色设计。

10、控件元素的统一

有部分设计师，尤其是刚开始从事设计的设计师，他们在设计网页控件时都是现用现做，并没有在设计网页之前统一公共控件元素，这样会让控件元素很难达到统一，尤其是不同页面的控件元素。

所以为了更好统一，我们在设计页面之前要做好控件，以便后面的页面统一使用。

11、同类信息的亲密性

当没有明显的区域划分时，间距就是我们判断信息分类的直接依据，此时间距留白就显得格外重要;一般同类模块元素会间距比较小，不同模块元素会增大间距用以区分。

网页设计必须把握的问题

1、网站的主题规划

注意不让你的网站主题过于分散。因为主题性强的网站，内容更集中，网站所有者一般在这方面要投入的精力会更多，所以所提供的信息的质量会更高。我们知道，搜索引擎一直致力于提供高质量的信息搜索服务，因此它将提供有价值的信息，网站的排名提前，优先返回给用户。

如果网站覆盖范围广，它还需要保留了许多的主题，那怎么办?相同原理，只要你的网站信息被安排合理，会形成一个相对集中的主题，那么搜索引擎会给你的网站排名靠前。

2、flash

虽然FLASH有更好的网页的视觉效果，但搜索引擎不太喜欢，案例表明，这类网站很难被百度搜索引擎索引。提供Flash和非Flash网页两种选择是明智的，这增加了网页访问量，又照顾到了搜索引擎的情绪。

3、动态网页

任何地址带?”，“&”(和其他类似的符号)的网页将在门口挡住蜘蛛。这类网页通常是通过CGI，PHP，ASP和其他程序，更先进的技术，而不是搜索引擎的“蜘蛛”程序。虽然一些主要的搜索引擎(如谷歌)已检索的动态网页的能力。即使它是能够索引动态网页的谷歌，也明确表示，并不能保证所有的动态网页都搜索到，除非它是一个非常大的网站，建议还是多使用静态网页等。

4、特效链接

经常看到有特殊效果的导航链接，一些网站，比如点击一个项目将扩大到较低层次的链接。这些效果通常通过Java脚本实现，这是一个新的视觉，但在“蜘蛛”程序的眼睛它却是不那么有吸引力，它不能解释这种联系。为了让搜索引擎顺利检索到你的网页，建议或牺牲了一些花哨的东西。

5、充实网站内容

网站内容和网站的受到欢迎程度两个是相辅相成的，有一个内容丰富的网站通常是很受登陆者的欢迎。请注意，这里有着丰富的内容，不涉及复杂的，但涉及内容和深度。在该网站的搜索引擎排名，不仅看到了网页信息的相关性，同时也会考虑网站的声望。因此一个内容充实的网站会排在前面。不要在网页设计中只注重外表美。

6、框架结构

有些搜索引擎(如FAST)是不支持框架结构的，他们的“蜘蛛”程序无法阅读这个网页。

7、图像块

除了，谷歌和北极光(现已解散的公共搜索服务)明确支持图像块连接，其他引擎不支持。当“蜘蛛”程序遇到这种结构时，往往觉得不知所措。所以不要设置图像链接。

响应式网页设计的误区

1.响应式网页设计 = 移动端优化

是的，当下确实移动互联网发展迅猛，所以响应式网页设计一直被当作重点，而且在概念上是主角。但它也不是唯一，因为你还要考虑到设备。如：平板和电视。响应式网页的真正目的是使网页适应任何屏幕，任意比例和宽度的互联网产品。这些远远超出了手机的范畴。

2.尽可能在多样的设备上测试

在设计领域，大多数设计师在设计他们的网站时，只会在少量的设备上测试，做响应式网站的时候也一样。要测试完所有设备是不可能的。其实应该根据自己的用户进行有针对性的测试，这样操作性更强。

3.字体不用优化

不幸的是，太多设计师觉得这点是对的。他们注重在设备和网页上的大小，却不注重用户实际看到的大小，一个网站必须有很强的可读性，而且响应式网站字体的考虑是非常重要的。

4.一种适配经验是不够用的

人们希望可以接入不同的设备，这让设计师抓狂。这也让设计师觉得网站必须适应用户的每个定制化的设备。其实这个不难，你可以很容易让你的网站适配各个设备。

5. 响应式网页因为加载内容太多，所以慢

人们在想象中时这样的，但是这不公平，有很多小规范的网站内容巨多，但是加载迅速，顺利，表明这些问题不是设计的问题，错在页面加载速度，这是代码优化问题。

6. 响应式网页不必让每个用例都可以用

这是极其错误的，因为用例是响应式网页的重点。设计者必须考虑到每一个用例，并且测试所有他们的设备。你的用户会希望在任何时候来使用你的网站。

7.响应式网页不适合电商

假的，虽然电商网站内容多，但是响应式网页是很适合零售业务的。实际上，这已经成为一种必然，由 公司进行的一项研究表明，到2018年，所有的线上交易中有30%会在移动设备上进行。此外2014年开始移动购物者人数已经从3.93亿发展到5.8亿，这可以说明响应式网页在电商方面的潜力。

8.响应式网页设计很费时间

这个是可能的，确实要多花一些时间去考虑响应式效果，但是也并不多。其实，你只要创建了共同的适配代码库和内容基础。而且越来越多的公司开发响应式框架，这使得我们不需要花太多时间去做同样的事情。

9.每个人和公司都需要“拥抱”响应式?

不是每个人都看到了响应式网页设计的价值。它意味着用最大的可能给用户提供信息，但是这也不是说一个公司要想成功就必须把自己的网站做成响应式的。因为这需要企业考虑自己的投入产出比，公司根据情况去觉得是否需要它。

10.响应式网页需要支持所有的浏览器?

负责响应式网页开发的部门将会持续优化网页，但是这并不意味着它要支持所有的手机浏览器。它一般只用支持以下浏览器：,和。你将很难让其支持IE的旧版本。这是蛮好的事情，因为用户发展不支持就会去升级自己的浏览器。

常见的网页设计布局有哪些

网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一副副精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢?色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素——网页的布局。下面，我们就有关网页布局谈论一下。

1、“国”字型

也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

2、拐角型

这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

3、标题正文型

这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

4、封面型

这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

5、“T”结构布局

所谓“T”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。

这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明、易于使用。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。

6、“口”型布局

这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。

这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。

7、“三”型布局

这种布局多用于国外网站，国内用得不多。其特点是页面上横向两条色块，将页面整体分割为4个部分，色块中大多放广告条。

8、 对称对比布局

顾名思义，它指采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型网站。其优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。

9、POP布局

POP源自广告术语，指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类网站，优点显而易见：漂亮吸引人，缺点是速度慢。