老板说你的设计没有视觉冲击力?你肯定没用这2个技巧

我们做任何设计都离不开大小与重复的运用,这样能使我们的设计更加理性和科学,经得起推敲,那么我们一起来探讨下如何在产品设计中运用这一方法。

为什么大的物体更吸引眼球

▲如上图所示,a球会比右边b球更吸引我们去阅读,大的物体视觉重量会比较大,我们眼球的视觉方向就自动转向它。

▲如上图所示,我们保持刚的大小,把a的透明度改变下,视觉重量是不是发生了变化?WHY?当我们把 a 球的视觉重量降低后,那么即使 b球很小,他也会很吸引我们眼球,这是因为 b球视觉重量比较大。

▲如上图所示,如果两个球大小一样呢?还是b球会更吸引我们的眼球,因为b球有色光辉第一进入我们眼球。

在产品设计中如何运用

▲ 如上图数字所示他们的视觉重量依次排下来,最大的是序列 1  最小的是4,不重要的元素我们可以通过把它们缩小或者降低透明度来弱化。

看个例子

重复在产品设计中的运用

重复?有没有人打了个问号,看到这个标题,之前我写了一篇文章叫一致性原则,当中有顺带提了下重复,当时说的不太详细,今天再来仔细重温下。

重复的重要性,能使产品的设计更加有节奏和高品质,为什么这样说,我们能重复的原子单位有很多,颜色,间距,大小,组件,圆角值,功能属性等等,交互层面能重复交互操作多页面间相同属性交互要一致。

1 – 重复间距

▲ 上图设计我一共就用了 3 个间距

2 – 特殊例子验证

▲ 字里行间在首页的板块设计比较松散,虽然也重复运用了间距,但是没有节奏。图片比例也比较奇怪,多行段落文字显得比较松散。

3 – 结果

4 – 重复组件样式

▲ 上面截图标注出来的地方,控件倒角一致,形成一个隐形的视觉基因。

5 – 反面例子

▲ UC头条的底部图标设计非常圆润,图标设计师延续了品牌 LOGO 鹿的圆润线条。这里里面的设计语言就和底部图标有冲突,大部分按钮设计无圆角,尖锐的轮廓(1、3),极少数按钮带有圆角即图上标出来的 2、4和5栏目图文样式的圆角值也是不一致的,整体设计不知道想要传达什么样的设计语言。

在仔细去观察下某蜗牛读书的产品设计,设计语言从图片圆角到按钮,标签,图标设计都是带有圆角幅度和他们产品logo气息性格相符合。

6 – 重复颜色

它是什么?就是表示相同操作的功能所表达的视觉含义要一致

▲ 相同属性颜色一致,比如上面来至 iOS 系统软件界面截图,可点击地方颜色一致,iOS在这方面的设计确实是非常棒的,控制的比较好。

总结

在做界面设计时候需要注意的点:

  • 学会运用大小来区分层级,在大小一致的情况下通过其他方式来区分信息层级,如颜色,降低透明度,加粗等等。
  • 重复在产品设计中的运用可以延伸到颜色,间距,大小,组件,圆角值,功能属性等等。

我们的设计日记 (公众号)

作者:Tony

(0)

相关推荐

  • 设计华丽的用户体验的6个热门技巧

    你是否曾经下载了一个应用,却发现它"很难使用"?对于大多数智能手机用户来说,答案是肯定的. 有趣的是,每四个手机应用中就有一个应用在下载后被"打入冷宫". 如果 ...

  • 让设计细节更高级的10个实用小技巧

    本文记录了国外大神在工作中对于一些UI细节的总结,仔细阅读,相信会有一些收获! 本文共计3029词,阅读大约需要10分钟. 以下是译文全文: 我猜想我们大多数人都是从了解一点UI,或者根本不了解的情况 ...

  • 不论是海报、PPT还是杂志封面设计,都离不开的图文排版技巧

    网站落地页面和在线广告设计,无论从广告牌到名片,我们每天遇到的许多设计都有一些共同之处.我说的是什么呢?平面设计的最基本的组成部分之一--图文排版.虽然在一张漂亮的照片上写上一句引人入胜的短语,可能看 ...

  • SolidWorks怎么设计散热孔? sw创建边角散热孔的技巧

    今天我们就来看看SolidWorks通过钣金展开折叠命令创建机箱边角处散热孔的方法,很简单的实例教程,请看下文详细介绍. 1.打开SolidWorks,新建一个零件模型.在前视基准面上绘制草图,创建基 ...

  • 如何准确描述自己的设计?

    @姑娘贩子(手机淘宝设计师):如何准确描述自己的设计,这个问题困扰了我很久.这篇文章希望通过回溯淘小铺2.1项目的整个设计过程,从另一个角度,尝试解答这个问题. 这篇文章原本的标题是"小铺2 ...

  • 为什么说在设计中融入产品思维非常重要?

    @-朱宇軒:生命太短,别设计一些实际上压根没人用的功能.如果想成为一名更加成熟的设计师,我们就不能只会在这些小的痒点上面抖几个机灵.我们要开始在自己的设计中融入产品思维,多试图去对用户问题的解决更具意 ...

  • 将来是要自主创业还是当设计总监,你拿offer的时候有考虑过这个问题吗?

    貌似最近蛮多人找工作找到犯愁吧?但有的人犯愁是因为找不到工作,而有的人犯愁呢?却是因为Offer太多不知道如何选择,还有人犯愁是因为感觉被骗了,入职的情况跟预先谈好的不一样.所以,我们今天好好来聊一聊 ...

  • Ps改进UI设计的一些技巧

    UI设计不像平面设计那样随性,期间可以用点技巧来减少痛苦. 1. 设置网格线 保持像素完美 不在1:1分辨率下也能保持像素完美,可以通过创建网格线来避免虚边的出现.编辑> 首选项 >参考线 ...

  • 120个PHOTOSHOP技巧帮你加速设计(上)(PS技巧)

    Photoshop越来越强大了!试图掌控它的全部特性是不现实的(更何况有那么多隐藏的功能!),那么我们不妨一下大神们总结的这120个PS技巧,偶尔翻看一下,让自己的设计更强大更高效! 这120款技巧覆 ...