掌握这2个关键点，让你的设计跨越一大步

在界面设计中，运用好大小和重复这两个关键点对区分层级和打造品牌基因有着至关重要的作用。

我们做界面排版设计都离不开大小与重复的运用，每一个属性里面都包含很多细小的分支，如果想要熟练使用起来是需要多做练习来掌握的。

那如何更加理性与科学运用它们，今天和大家一起来探讨下如何在产品界面设计中巧妙的运用这个方法。

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

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

如上图所示：我们沿用刚才的图片，然后只把a的透明度改变下，视觉重量是不是发生了变化？WHY？

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

如上图所示：如果两个球大小一样呢？还是b球会更吸引我们眼睛去关注，因为b球有色光会第一时间进入我们眼球。

二、如何运用这些原理

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

下图实际案例展示：

根据我们产品策略，内容重要程度，来决定哪个元素视觉重量需要大一些。

三、重复在界面设计中的运用

重复的合理运用能够让界面布局更加有节奏，为什么这样说？

因为在设计语言中，我们能重复的基础元素有很多；品牌符号、颜色、间距、大小、分子组件、圆角值，光与角度等等，角度在图标绘制中运用比较多。

下面我会通过几个案例讲解如何重复运用这些元素。

1. 重复间距

上图设计我一共就用了 3 个间距。一致的间距节奏能够让画面更稳，同事之间协同方便，便于开发还原。

线上案例优化演示：

字里行间在首页的板块设计比较松散，虽然也重复运用了间距，但是间距缺乏有规律的节奏。

调整后图如下：

2. 重复组件样式

应用：Pinterest

Pinterest设计中，控件有一致的圆形符号，形成一个显性的视觉基因，大家注意观察他们的各种按钮控件（备注：可能有些人问，为啥圆角大小不一致呢？这个就涉及到参数化圆角值定义！如果还是不懂，后续的文章都会逐步讲解）

应用：Facebook

同样我们可以在Facebook里面看到一致的视觉基因，圆角的大范围重复运用。这里我就不圈出来了。我们可以思考，重复能让设计更整体，重复能让界面更具品牌感！

3. 重复颜色

它是什么？相同功能操作，所表达的视觉含义要一致。

应用：appstore和备忘录

相同属性颜色一致，比如上面 IOS 系统软件界面截图，功能性图标颜色一致（可操作性），可点击按钮文字颜色一致。

当然有些设计也有例外，这个需要根据场景去分析。IOS在这方面的设计确实是非常人性化，值得去研究学习。

4. 重复符号

符号重复一般是在图标绘制运用比较多，大家看下案例。

GM / OPEL的自适应（响应）图标系统。上图我们可以看到图标绘制在某些细节保持一致的基因。

（编辑：通化站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!