首页 技术 正文
技术 2022年11月19日
0 收藏 738 点赞 3,722 浏览 1128 个字

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

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

UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口

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

UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口

▲如上图所示,我们保持刚的大小,把a的透明度改变下,视觉重量是不是发生了变化?WHY?

当我们把 a 球的视觉重量降低后,那么即使 b球很小,他也会很吸引我们眼球,这是因为 b球视觉重量比较大。

UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口

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

在产品设计中如何运用   

UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口

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

看个例子

UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口

重复在产品设计中的运用

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

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

1 – 重复间距

UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口

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

2 – 特殊例子验证

UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口

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

3 – 结果

UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口

4 – 重复组件样式

UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口

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

5 – 反面例子

UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口

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

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

6 – 重复颜色

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

UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口

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

  • 学会运用大小来区分层级,在大小一致的情况下通过其他方式来区分信息层级,如颜色,降低透明度,加粗等等。

  • 重复在产品设计中的运用可以延伸到颜色,间距,大小,组件,圆角值,功能属性等等。

​总结 

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

编辑:千锋UI设计

作者: Tony

UI中国主页:http://i.ui.cn/ucenter/36814.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,085
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,560
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,409
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,182
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,819
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,902