网页视觉设计原则

网页视觉设计原则网页视觉设计原则 网页视觉设计原则关系到网站的用户体验 然而对于网页的设计原则 需要网页设计师充分了 解设计原则才能设计出更好的网页 这里网站建设协策网络给大家介绍一下网页的视觉设计原 则 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 阅读 背景对阅读 视力 的舒适度 内容与