恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
涨知识!5个简单直观的网页设计对比技巧
0.0°
2017-05-23 好文转载 经验/观点 原作者: 海淘科技 举报 1406 2 1 0

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

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

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

1. 大小对比

首先我们先看几个事例。

涨知识!5个简单直观的网页设计对比技巧

涨知识!5个简单直观的网页设计对比技巧



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

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

我们拿到的文字内容:

涨知识!5个简单直观的网页设计对比技巧


将内容进行打散:

涨知识!5个简单直观的网页设计对比技巧


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

涨知识!5个简单直观的网页设计对比技巧

涨知识!5个简单直观的网页设计对比技巧

涨知识!5个简单直观的网页设计对比技巧


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

2. 颜色对比

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

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

涨知识!5个简单直观的网页设计对比技巧


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

涨知识!5个简单直观的网页设计对比技巧


3. 前后对比

涨知识!5个简单直观的网页设计对比技巧


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

4. 聚散对比

涨知识!5个简单直观的网页设计对比技巧


5. 虚实对比

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

涨知识!5个简单直观的网页设计对比技巧

涨知识!5个简单直观的网页设计对比技巧

涨知识!5个简单直观的网页设计对比技巧


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

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

文章来源:http://www.haitaoit.com

更新:2017-05-23

收藏

2人已收藏

海淘科技公司

http://www.haitaoit.com

  • 33

    作品

  • 20

    粉丝

  • 0

    关注

  •  app数据驱动如何设计好产品
  • 网页按钮设计总结
  • UI插画设计如何提升用户体验
  • 知乎的赞同与感谢的精细化设计

猜你喜欢

    2017-05-23 好文转载 经验/观点 原作者: 海淘科技 举报 1406 2 1 0

    涨知识!5个简单直观的网页设计对比技巧

    0.0°

    你确定要举报涨知识!5个简单直观的网页设计对比技巧

    如果查出恶意举报,十天内禁止提交任何举报申请。

    0/200

    上传证据: 超过10M的附件请使用网盘地址

    点击上传附件

    对谁可见:

    全部设计师
    • 全部设计师
    • 推荐设计师和认证设计师

    您确认要推荐?

    该作品发布时间:2017年05月23日

    评分

    完整度

    启发性

    勤奋性

    排版布局

    推荐心得

    建议20-200字以内

    0/200

    1
    2
    0

    账号或密码错误,请重新输入

    账号或密码错误,请重新输入

    登录

    手机号

    发送验证码 120s 验证码错误

    登录
    第三方账号登录