网视觉设计原则

1、网页视觉设计原那么网页視觉设计原則关系到网站的用户体验。 然而对于网页的设计原則， 需要网页设计师充分了解 设计原 則才能设计出史好的网页。这里网 站建设协策网络给大家介绍一下网页的视觉设计原則。A 1、通过字体表达产品风格视觉设计中，字体的选择对于产品风格的表现是作用明显的，同一段丈字，用不同字体写出，感觉 确实 千差万别。 2 必亠、通过配色展示产品定位通过配色来展示产品定位， 也是设计师必用的方法。 视觉设计前期调研阶段， 常常通过情绪版提 炼适合 目标用户的颜色，形成一整套的配色方案。八紫色关键词：优雅.高贵.女性.庄重、神圣.成熟.深度. 神秘 . 时尚。红色，关键词：艺术、热烈、开

2、放、激情、积极、活力、喜庆、生命、成熟。 蓝色，关键词：理智、知性、公正、商务、科技 .严格.细致、严谨.公式化。必橙色，关键词： 阳 光、辉煌.活动.温吸、记忆.家庭.健康.快乐。a绿色，关键词：成长、朴素、公益、生命、平安.新群. 和平 . 春天、大自然。心3、 营造统一的品牌形象 AA品牌形象是一个很大的领域，具体到某个产品的品牌感，更多的还是 通过 视觉形象来传达。这就需要視觉设计师制定一套系统的视觉体系，让用户看一眼，就能淸晰 地识别。心4、造型让产品史有冲击力必 4 视觉设计中，夸张的造型对用户的冲击力非常大， 很 容易一下狐住用户。5、重要内容留在首屛4 这是视觉和交互设计师中都

3、要注意的，有时往往原型中放在了首屛?，視觉设计时由于一些原因 加摸块或是加高头图又被挤到了下面，这点大家在视觉审核与测试中要格外注意。4 6 、让页面有展次有重点交互设计师完成页面布局设计，突出页面重点，方便用户浏览信息、完成任务。视觉设计阶段，好的设计稿对于延续前期交互理念，引导用户操作是非常有帮助的。必必 7、模拟现实世界匹配 用户心智 棧型 A 4 原型设计中常说，操作方式要符合用户的心智模型，其实視觉设计也一样。把一 些现实元素 拿来，模拟真实世界，会给用户身临其境的感觉。8、插图让产品更有情感插图在文章页面中很多，我这里只举错误页的例子。大家都有感触，错误的体脸是非常不好的，但设计师

4、却用一张张插图，让这种挫败和焦躁的感觉律到了最低，化解了用户的负面情绪，同时产品也史有味道了。亠9、巧用I con,页面更梢彩aIcon 设计是视觉设计非常重要的一局部，很多晦涩难懂的内容，配上 I con 图形化解释，会史容 易理 解。相反，如果图标的设计元素不适宜，或是将图标将背景乱用，也会干扰用户理解 。 a A 10、柵格 化提升用户体验和开发本钱必亠柵格化在視觉设计中，越来越受重视，究其原来，主要 是三点：一是 可以统一页面的布局，提升用户的浏览操作体脸；二是将页面模块的尺寸标准化，降低开发和维护的本钱；最后，柵格化也是网页设卄专业度的表达。必必至此，视觉设计原那么讲完了。八 说了这

5、么多，我后简单谈谈作为交互设计师的我们该怎么做吧。思考这个问题 Z 前， 还请大家把以上的原那么再 复习一遍沁1. 通过字体表达产品风格4 2. 通过配色展示产品定位4 3. 营造统一的品牌形象心 4? 造型让产品更有冲击力 A5? 重要内容留在首屏亠6?让页面有层次有重点必必7.模拟现实世界匹配用户心智模型 3亠?插图让产品史有情 感a 9?巧 用 I con 页面史粘彩 13 必. 柵格化提升用户体脸和开发本钱心总的来说，我们可以把这 10 个内容归成两类，一个完全是视觉设计师的领域，以沟通为主： 另一 个，交互可以和视觉设计配合完成，沟通以外注重交付物的传递。第一类包括：通过字体表达产晶

6、风格、通过配色展示产品定位、营造统一的品牌形象、造型让产品更有冲击力.模拟现实世界匹配用户心智模型。必了解这些内容，了解视觉设计师能做哪些提升体脸的爭情，才能史好地和他们沟通。让视觉设计师提早了解需求，获得对等的产品信息，才能更好地发挥设计的力量。亠第二类包括：重要内容留在首屏、让页面有展次有重点、插图让产品史有情感、巧用 I c on 页面更 精彩. 柵格化提升用户体验和开发本钱。 A 4这类原則，除了和视觉设计师有效沟通，我 好在自己的交 付物原型以及讲解中有所表达。比方原型中通过不同灰度色块表现设计重点、 注重各个组件的柵 格化.为重点内容设置插图和 I con 的占位符等等。通过这种对

7、视觉设计的理 解、交付物形式的传递， 配合视觉设计师做出史符合产品需求以及用户体脸的产品。做设计也有一段时间了， 虽然设计原那么不离其宗， 但经验下来的心得告诉自己， 设计媒介的变 化带来很 多媒介自身的特殊性，下面总结下网站视觉设计的一些要点，有他人经验，也有自己的心得： 1 4、log0：根本I ogo特征，符合I Og O设计根底平面设计通用显示器效 果：清晰度，最小尺寸因显示 器分辨率而带来的，等同线下平面设计的印刷效果 42、文字：内容等级决定字体、字号大小、粗细；状态决定颜色默认或者根据网站特殊统一丄3广告：内容图片：尺寸样式的定位，同一页面的和谐性，图片的优化，位置的节奏，大小比

8、照。4、icon :品牌性，表达准确合理，设计手法依据品牌性 ，一致性，作用：吸引，醒目，方便识别、理解、操作、记忆。a a 5 可点击but ton :区别不可点击，根据 人的生活经验：厚度， 可按，质感实体联想，邑彩品牌性、统一性、比照性；统一的样式 大小依据里面文字的内边 距统一 八 6、背景图片： 氣国效果营造， 同产品的统 一性，优化品质大小， 色彩信息， 实现方案 ， 47、图文排版：主图次文，图文节奏，空隙，模块化。48、当前状态：放大形状，变邑反色、比照色、明度纯度区别色 . 链进链出后指定内 容提 示。9、交互控件：样式合理准确性人对系统默认的认知和生活常规认知，状态视觉表现

9、样式和动作过程优化，创意。10、I oadi ng:内容关联性loadi n g前后的内容关联，无聊等待的乐趣？体积、面枳优化，创意。心11 用户反应成功 .出错、提示、无结果：文案明确、合理、人性化、创意，图 形明确、醒 目、色彩的心理认知准确皮。八 12、动画效果：过程合理模拟真网视觉设计原那么实环境的合理化人 连续，节奏感，用户日常动作表现，音效配合，创意13、首尾设计：首品牌宣传、自身特点、明确内容、气氣表达、创意。尾: 照应、节奏与首，创意。14、适应屏设计全屏设计：最大罠小屏幕的考虑文字、图片的位置、折行效果4 A1 5. 固定尺寸的栅格设计：合理的单元格考虑黃金分割，单元格面积节奏，边距统一性41 6、demo 设计样稿：对内容最多灵少的考虑。八 17 、页面：品牌性，基调元素一致性，复用性，节奏感、面积感，视觉第一吸引，引导浏览，点线面关系，素描原 理运 用素描的根本规律来做页面。? 18 、阅读：背景对阅读视力的舒适度，内容与背景的比