详解重复与突变在产品设计中的应用

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:站酷   作者:水手哥

关键词

详解重复与突变在产品设计中的应用,PS教程,思缘教程网

设计中的重复是什么?

在平面设计中,重复构成是常用的一种构成方法,通过重复可以使画面达到和谐、统一的视觉效果,并能加强给人的印象,也可以达到一种有规律的节奏感和形式美感。

详解重复与突变在产品设计中的应用,PS教程,思缘教程网

排版的四大原则:对比、对齐、亲密性、重复,重复在排版中也占据了一席之地,可见它在设计中分量是不可小觑的。

详解重复与突变在产品设计中的应用,PS教程,思缘教程网

格式塔原理:接近性、相似性、连续性、封闭性、对称性、主体/背景、共同运动,格式塔原理中的对称性就是重复的一种表现方式;格式塔原理中的相似性算是重复中自带的一种突变。

详解重复与突变在产品设计中的应用,PS教程,思缘教程网

01、重复

重复是设计中最基本的形式。在同一设计中,相同的形象出现过两次或两次以上就形成了重复。

产品设计中重复的元素有大小、形状、配色、间距、组件、圆角值;在交互层面重复的元素有位移(方向)、旋转、缩放、不透明度、相同属性交互要一致。

产品设计的前期设计师需要输出界面设计,为了方便下游前端工程师更好的规范和适配,也要保重产品后期上线产品视觉稿的高度还原,这就要求设计师输出一整套产品的视觉和交互规范。

重复配色

详解重复与突变在产品设计中的应用,PS教程,思缘教程网

在app store 的页面中使用了相同的颜色进行提醒,方便用户快速查找和点击,整体的蓝色又给人理性的感觉,看到付费app的好评数可以看出是因为产品好才推荐你进行理性消费。

重复大小

详解重复与突变在产品设计中的应用,PS教程,思缘教程网

INS主页第一排头像相同大小进行重复排列,与内容的人物头像有大小对比之分;INS搜索页采用了九宫格布局,为了重复中有变化它把右边的四个方格合并成一个内容展示区域,推荐好的热门视频。

重复间距

详解重复与突变在产品设计中的应用,PS教程,思缘教程网

 收藏