网页视觉设计原则关系到网站的用户体验。然而对于网页的设计原则，需要网页设计师充分了解设计原则才能设计出更好的网页。这里网站建设协策网络给大家介绍一下网页的视觉设计原则。

1、通过字体表达产品风格

视觉设计中，字体的选择对于产品风格的表现是作用明显的，同一段文字，用不同字体写出，感觉确实千差万别。

2、通过配色展示产品定位

通过配色来展示产品定位，也是设计师必用的方法。视觉设计前期调研阶段，常常通过情绪版提炼适合目标用户的颜色，形成一整套的配色方案。

紫色，关键词：优雅、高贵、女性、庄重、神圣、成熟、深度、神秘、时尚。

红色，关键词：艺术、热烈、开放、激情、积极、活力、喜庆、生命、成熟。

蓝色，关键词：理智、知性、公正、商务、科技、严格、细致、严谨、公式化。

橙色，关键词：阳光、辉煌、活动、温暖、记忆、家庭、健康、快乐。

绿色，关键词：成长、朴素、公益、生命、安全、新鲜、和平、春天、大自然。

3、营造统一的品牌形象

品牌形象是一个很大的领域，具体到某个产品的品牌感，更多的还是通过视觉形象来传达。这就需要视觉设计师制定一套系统的视觉体系，让用户看一眼，就能清晰地辨认。

4、造型让产品更有冲击力

视觉设计中，夸张的造型对用户的冲击力非常大，很容易一下抓住用户。

5、重要内容留在首屏

这是视觉和交互设计师中都要注意的，有时往往原型中放在了首屏，视觉设计时由于一些原因(加模块或是加高头图)又被挤到了下面，这点大家在视觉审核与测试中要格外注意。

6、让页面有层次有重点

交互设计师完成页面布局设计，突出页面重点，方便用户浏览信息、完成任务。视觉设计阶段，好的设计稿对于延续前期交互理念，引导用户操作是非常有帮助的。

7、模拟现实世界匹配用户心智模型

原型设计中常说，操作方式要符合用户的心智模型，其实视觉设计也一样。把一些现实元素拿来，模拟真实世界，会给用户身临其境的感觉。

8、插图让产品更有情感

插图在文章页面中很多，我这里只举错误页的例子。大家都有感触，错误的体验是非常不好的，但设计师却用一张张插图，让这种挫败和焦躁的感觉降到了最低，化解了用户的负面情绪，同时产品也更有味道了。

9、巧用Icon，页面更精彩

Icon设计是视觉设计非常重要的一部分，很多晦涩难懂的内容，配上Icon图形化解释，会更容易理解。相反，如果图标的设计元素不合适，或是将图标将背景乱用，也会干扰用户理解。

10、栅格化提升用户体验和开发成本

栅格化在视觉设计中，越来越受重视，究其原来，主要是三点：一是可以统一页面的布局，提升用户的浏览操作体验;二是将页面模块的尺寸标准化，降低开发和维护的成本;最后，栅格化也是网页设计专业度的体现。

至此，视觉设计原则讲完了。

说了这么多，最后简单谈谈作为交互设计师的我们该怎么做吧。思考这个问题之前，还请大家把以上的原则再复习一遍：

1. 通过字体表达产品风格

2. 通过配色展示产品定位

3. 营造统一的品牌形象

4. 造型让产品更有冲击力

5. 重要内容留在首屏

6. 让页面有层次有重点

7. 模拟现实世界匹配用户心智模型

8. 插图让产品更有情感

9. 巧用Icon页面更精彩

10. 栅格化提升用户体验和开发成本

总的来说，我们可以把这10个内容归成两类，一个完全是视觉设计师的领域，以沟通为主;另一个，交互可以和视觉设计配合完成，沟通以外注重交付物的传递。

第一类包括：通过字体表达产品风格、通过配色展示产品定位、营造统一的品牌形象、造型让产品更有冲击力、模拟现实世界匹配用户心智模型。

了解这些内容，了解视觉设计师能做哪些提升体验的事情，才能更好地和他们沟通。让视觉设计师提早了解需求，获得对等的产品信息，才能更好地发挥设计的力量。

第二类包括：重要内容留在首屏、让页面有层次有重点、插图让产品更有情感、巧用Icon页面更精彩、栅格化提升用户体验和开发成本。

这类原则，除了和视觉设计师有效沟通，最好在自己的交付物——原型以及讲解中有所体现。比如原型中通过不同灰度色块表现设计重点、注重各个组件的栅格化、为重点内容设置插图和Icon的占位符等等。通过这种对视觉设计的理解、交付物形式的传递，配合视觉设计师做出更符合产品需求以及用户体验的产品。

做设计也有一段时间了，虽然设计原则不离其宗，但经验下来的心得告诉自己，设计媒介的变化带来很多媒介自身的特殊性，下面总结下网站视觉设计的一些要点，有他人经验，也有自己的心得：  

　 1、logo：基本logo特征，符合logo设计基础（平面设计通用）显示器效果：清晰度，最小尺寸（因显示器分辨率而带来的，等同线下平面设计的印刷效果）  

　　2、文字：内容等级决定字体、字号大小、粗细；状态决定颜色（默认或者根据网站特殊统一）  

　　3、广告：内容图片：尺寸样式的定位，同一页面的和谐性，图片的优化，位置的节奏，大小对比。  

　　4、icon：品牌性，表达准确合理，设计手法（依据品牌性），一致性，作用：吸引，醒目，方便识别、理解、操作、记忆。

　　5、可点击（button)：区别（不可点击），根据人的生活经验：厚度，可按，质感（实体联想），色彩（品牌性、统一性、对比性）；统一的样式大小（依据里面文字的内边距统一）  

　　6、背景图片：氛围效果营造，同产品的统一性，优化（品质大小，色彩信息，实现方案），  

　　7、图文排版：主图次文，图文节奏，空隙，模块化。  

　　8、当前状态：放大（形状），变色（反色、对比色、明度纯度区别色），链进链出后指定内容提示。  

　　9、交互控件：样式合理准确性（人对系统默认的认知和生活常规认知），状态（视觉表现样式和动作过程优化），创意。

　　10、loading:内容关联性（loading前后的内容关联），无聊等待的乐趣，体积、面积优化，创意。

　　11、用户反馈_ 成功、出错、提示、无结果：文案（明确、合理、人性化、创意），图形（明确、醒目、色彩的心理认知准确度）。  

　　12、动画效果：过程合理（模拟真实环境的合理化），连续，节奏感，用户日常动作表现，音效配合，创意。  

　　13、首尾设计：首（品牌宣传、自身特点、明确内容、气氛表达、创意。尾：呼应、节奏（与首），创意。

　　14、适应屏设计（全屏设计）：最大最小屏幕的考虑（文字、图片的位置、折行效果）  

　　15、固定尺寸的栅格设计：合理的单元格（考虑黄金分割），单元格面积节奏，边距统一性  

　　16、demo设计样稿：对内容最多最少的考虑。  

　　17、页面：品牌性，基调元素一致性，复用性，节奏感、面积感，视觉第一吸引，引导浏览，点线面关系，素描原理（运用素描的基本规律来做页面）。  

　　18、阅读：背景对阅读（视力）的舒适度，内容与背景的对比舒适度。  

　　其实还有很多设计的点比如交互设计，比如代码设计，我们可以展示给用户看到的这些综上所述，构成了用户体验设计的一个大过程，自己在做的很多时候其实也不是都能估计到每个点的，总结出来以帮助随时审视！

备注：你所看到的本篇文章，出自【成功IT社区】原创， 网址： http://www.sucit.cn/,本文永久地址:http://www.sucit.cn/viewthread.php?tid=9201下载本文