• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 基础小技巧!5个简单直观的设计对比方法

基础小技巧!5个简单直观的设计对比方法

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含经验分享,设计方法等相关知识,希望在学习及工作中可以帮助到您

@谢思靖?:? 对比是视觉设计中非常常用以及常见的设计技巧之一,甚至我个人觉得对比是设计中最最重要的要点。

今天会给大家介绍5种直观简单的对比方法。

如果能熟练理解和掌握,相信会对大家的日常设计中起到非常大的作用和帮助。

作者:谢思靖

现任数美互动创意总监,曾任职于IM2.0 DDB 新意互动 等国际4A广告公司,担任互动美术指导,资深互动美术指导。

他的专访:《高手专访!资深网页设计师谢思靖的总监晋级之路》

他的课程:http://xue..com/wui/

1. ?大小对比

首先我们先看几个事例。

大小对比通过突出应该突出的信息和内容,在功能上可以更好的突出内容,在设计形式可以形成不同的版式结构,更佳绝有设计感。

实例演示,我们如何通过大小对比的方式进行排版。

我们拿到的文字内容:

将内容进行打散:

通过突出不同的内容进行大小对比,我们可以得到不同的版式结构。

大小对比在实际设计中运用的非常多,不仅仅局限于排版,这里只是拿排版进行举例。

2. ?颜色对比

颜色对比可以通过颜色去突出一些信息,也可以通过颜色的对比 增加信息的层级让用户更好的按照我们希望的阅读浏览顺序进行信息的阅读。而颜色对比对提升设计感和氛围也是很有帮助。

我们依然拿之前的案例进行举例,虽然下面两个排版一样,但是因为颜色对比,我们更容易被618这个信息点抓住眼球。

在没有加入颜色对比前,因为大小对比的关系618的视觉层级远高于“玩转” “苹果全场4折”,但是即便我们保证大小关系不变,加入颜色对比,“苹果全场4折”这个信息的视觉层级明显被提高了。

3. ?前后对比

通过建立形式,文字,视觉元素这几者的前后关系,形成空间以及前后对比。

4. ?聚散对比

5. ?虚实对比

通过透视远近关系,或者光影变化形成不同的虚实感受,形成虚实对比以及空间。.

这就是我们今天介绍的常见的设计的五种对比方法,希望大家在阅读设计,以及自己做设计的时候能够认真感悟这些不同的对比是如何应用在不同设计中的。

当你能够熟练掌握对比的设计方法之后,在实际设计中无论是区分阅读层级,构建画面时都会更加有想法和思路。

欢迎关注作者的微信号:

fq2016060124

看完这篇你绝对能用好「对比原则」:《设计基础功!帮你彻底掌握设计四大原则中的对比原则》

进阶版的对比方法:《实例教学!利用「对比原则」做出抢眼设计的20个方法》

设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

您可能想查找下面的文章:

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2018-08-23入门手册!帮你快速掌握15个常见的产品设计术语
  • 2018-08-23抢先来看!2018年UI设计的9个新趋势
  • 2018-08-23实战案例!「滴滴出行」的商家红包项目经验总结
  • 2017-08-06设置块元素居窗口中间的位置实现方法
  • 2018-08-23交互设计中如何求最优解?来看这篇超全面的分析!
  • 2017-08-06网页可读性提高的几个方法
  • 2018-08-23产品迭代中,如何做到视觉设计的继承和升级
  • 2018-08-23如何界定借鉴和抄袭?高手用一个插画案例让你轻松看懂!
  • 2018-08-23实战教程来咯!超实用的VR界面设计实践指南
  • 2018-08-23学会这20招PS操作技巧,提高80%的工作效率

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 设计规范官网汇总:iOS、Material Design、IBM、Fluent……(持续更新)
    • 超实用!如何制作统一可复用iOS/Material Design元件库?(附源文件)
    • ie6/7要逆天 text: empty text node 高度问题探讨
    • 超详细的《Design Systems》读书笔记
    • 正确的空链接写法 防止点击后页面会跳动问题 a href #号问题
    • 实战改版经验!我们是怎样设计Foursquare Swarm 5.0的?
    • 对于这5个UX设计迷思,你需要知道它们的答案
    • 网易资深设计师:ToB产品的6条交互设计经验
    • 如何在新用户引导流程中用好空状态界面?
    • AI教程!手把手教你绘制线条装饰风格海报

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有