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

2022-6-25    纯纯

设计中的重复是什么?


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


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



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



01、重复

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


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


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


重复配色

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


重复大小

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


重复间距

Airbnb界面中的间距非常规范,首页大体采用了谷歌里面的8px原则,每个间距之间的规范很多1:2的比例关系。好的比例规范会给界面带来简洁大气的感觉。


重复组件

(如图标注)INS界面中用了统一组件,相同的圆角和高度规范又给画面增加了统一性和连贯性。



02、突变

在相同的形象重复出现时,尝试去改变某一形象的形状、颜色、大小、不透明度等来丰富画面时我们称之为突变。

格式塔原理中的相似性也是重复中突变的一种形式。


在产品设计中我们运用的突变的目的很简单就是为了让其更加突出,多用于区分当前状态、选中状态和默认状态。


banner轮播

banner轮播图上面的提示状态会根据当前状态和默认状态进行区分,把当前状态进行变化从而进行凸显出来。


导航栏分类

导航栏分类上面的提示状态也是根据当前状态和默认状态进行区分,把当前状态进行变化从而进行凸显出来。


按钮

在登录注册页面中,我们会通过大的色块凸显登录按钮,引导用户快速登录进入到app里面。也减少了用户的思考过程,符合大脑的惰性。

但是在很多windows系统中,卸载软件时会跟你玩文字游戏,会用非、否、不是等诱导你作出错误的判断。


feed流

feed流是产品中持续更新并呈现给用户内容的信息流。feed流在产品展现形式有列表、瀑布流、卡片形式。

站酷首页feed流里面会把内容分为作品和文章,之前版本中的作品和文章的样式是一样的,新版本中重点是推作品,当文章出现时通过改变文章的排版进行区分,重复里面又带有变化。



03、节奏感

多少元素排列可以形成节奏感,一般来说是3个或3个以上,两个你不能说是节奏感只能说它是重复。当3个或3个以上整齐的排列就会形成一种节奏感。


左右滑动

(如图来自uistar)界面中三个书籍整齐的排列在一起,可以通过左右滑动来获取更多的书籍。在使用左右滑动效果时,应考虑元素的数量,尽量不要超过10个以上。


列表页

(如图来自uistar)列表页面整齐的排列在一起有一定的节奏感,通过改变icon的配色来丰富画面。



04、韵律

元素在排列的过程中有形状、颜色、大小、不透明度等有规律的变化就形成了一种韵律感。在动效上主要还是通过位移、放大缩小、旋转、不透明等变化来制作界面动画。


最美有物

最美有物app中的画报界面中,通过改变每个界面的大小比例有序的排列在一起,通过上下滑动可以快速浏览标题,进行查找翻阅,整个过程很流畅,整个界面有流动性和韵律感。


图表

图表在设计的时候通过不同颜色来区分不同的时间段,线条错落有致的排列增加了界面的韵律感。


配色

(如图来自Prakhar Neel Sharma和crisssamson)这俩个作品都是通过色彩按照红橙黄绿青蓝紫规律运用到界面中的背景和列表中,增加了画面的丰富感和韵律感。


重复在动效中如何运用才会有韵律感?

界面动效中主要分成当前状态动效变化和转场动效变化,界面中的元素a1对b1、a2对b2、a3对b3信息对等,能帮助界面做出很有韵律感的动效。



总结:

重复可以使画面秩序化、整齐化,形成和谐、富有节奏感的视觉效果,更加有利于人们加强对画面的记忆。


重复、突变、节奏感、韵律几种不同的方式都是存在于产品当中的,几种不同的美感可以同时存在的,只不过它适应不同人群的审美能力,审美能力高一点的更喜欢一些变化,审美能力相对基础更喜欢简单的重复。


所以画面中不断出现同样的元素这叫重复,而在很多重复里面突然出现一个变化这叫突变,相同元素整齐的排列在一起这叫节奏感,而这些元素在排列的过程中有形状、颜色、大小、不透明度等变化就形成了一种韵律感。


作者:水手哥    来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计(  www.lanlanwork.com )是一家专注而深入的 界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、 BS界面设计 、  cs界面设计 、 
ipad界面设计  、  包装设计 、  图标定制 、  用户体验 、交互设计、  网站建设  、 平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


分享本文至:
« 黄金分割在界面设计中的应用 UI新视角-界面三重构 »

分类

  • 图标设计文章及欣赏(108)
  • 大屏界面设计文章及欣赏(84)
  • 网站设计文章及欣赏(472)
  • B端界面设计文章及欣赏(430)
  • APP界面设计文章及欣赏(646)
  • 行业趋势(445)
  • 设计资源(947)
  • 交互设计及用户体验(867)
  • 前端及开发文章及欣赏(1031)
  • seo优化(146)
  • 平面设计(247)
  • 随笔的一些文章(59)
  • 设计思维(1900)
  • 用户研究(235)
  • 设计管理与成长(266)
  • cs界面设计文章及欣赏(56)

日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档

  • 2024年6月(36)
  • 2024年5月(80)
  • 2024年4月(44)
  • 2024年3月(50)
  • 2024年2月(58)
  • 2024年1月(44)
  • 2023年12月(47)
  • 2023年11月(41)
  • 2023年10月(15)
  • 2023年9月(27)
  • 2023年8月(88)
  • 2023年7月(62)
  • 2023年6月(58)
  • 2023年5月(28)
  • 2023年4月(47)
  • 2023年3月(37)
  • 2023年2月(90)
  • 2023年1月(78)
  • 2022年12月(45)
  • 2022年11月(69)
  • 2022年10月(51)
  • 2022年9月(135)
  • 2022年8月(60)
  • 2022年7月(111)
  • 2022年6月(162)
  • 2022年5月(143)
  • 2022年4月(86)
  • 2022年3月(119)
  • 2022年2月(53)
  • 2022年1月(99)
  • 2021年12月(105)
  • 2021年11月(83)
  • 2021年10月(101)
  • 2021年9月(153)
  • 2021年8月(147)
  • 2021年7月(149)
  • 2021年6月(157)
  • 2021年5月(124)
  • 2021年4月(185)
  • 2021年3月(144)
  • 2021年2月(35)
  • 2021年1月(103)
  • 2020年12月(95)
  • 2020年11月(76)
  • 2020年10月(31)
  • 2020年9月(45)
  • 2020年8月(50)
  • 2020年7月(46)
  • 2020年6月(33)
  • 2020年5月(78)
  • 2020年4月(69)
  • 2020年3月(100)
  • 2020年2月(59)
  • 2020年1月(31)
  • 2019年12月(50)
  • 2019年11月(57)
  • 2019年10月(48)
  • 2019年9月(48)
  • 2019年8月(57)
  • 2019年7月(58)
  • 2019年6月(58)
  • 2019年5月(31)
  • 2019年4月(37)
  • 2019年3月(43)
  • 2019年2月(25)
  • 2019年1月(45)
  • 2018年12月(41)
  • 2018年11月(40)
  • 2018年10月(29)
  • 2018年9月(40)
  • 2018年8月(87)
  • 2018年7月(107)
  • 2018年6月(86)
  • 2018年5月(109)
  • 2018年4月(40)
  • 2018年3月(35)
  • 2017年8月(35)
  • 2017年7月(45)
  • 2017年6月(7)
  • 2017年5月(27)
  • 2017年4月(51)
  • 2017年3月(69)
  • 2017年2月(65)
  • 2017年1月(69)
  • 2016年12月(55)
  • 2016年11月(111)
  • 2016年10月(92)
  • 2016年9月(53)
  • 2016年8月(9)
  • 2016年7月(4)
  • 2016年6月(9)
  • 2016年3月(19)
  • 2016年2月(26)
  • 2016年1月(29)
  • 2015年12月(34)
  • 2015年11月(35)
  • 2015年10月(46)
  • 2015年9月(43)
  • 2015年8月(40)
  • 2015年7月(33)
  • 2015年6月(46)
  • 2015年5月(58)
  • 2015年4月(70)
  • 2015年3月(55)
  • 2015年2月(17)
  • 2015年1月(33)
  • 2014年12月(21)
  • 2014年11月(83)
  • 2014年10月(94)
  • 2014年9月(6)
  • 2014年8月(1)
  • 2014年7月(13)
  • 2014年6月(66)
  • 2014年5月(99)
  • 2014年4月(88)
  • 2014年3月(101)
  • 2014年2月(67)
  • 2014年1月(83)
  • 2013年12月(106)
  • 2013年11月(111)
  • 2013年10月(61)
  • 2013年9月(20)
  • 2013年7月(13)
  • 2013年6月(27)
  • 2013年5月(48)
  • 2013年4月(39)
  • 2013年3月(8)
  • 2013年2月(20)
  • 2013年1月(31)
  • 2012年12月(33)
  • 2012年11月(31)
  • 2012年10月(22)
  • 2012年9月(8)
  • 2012年7月(14)
  • 2012年6月(15)
  • 2012年5月(31)
  • 2012年4月(24)
  • 2012年2月(4)
  • 2012年1月(8)
  • 2011年12月(35)
  • 2011年11月(32)
  • 2011年10月(13)
  • 2011年8月(1)
  • 2011年6月(1)

4617作文网淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻让美丽中国“从细节出发”清明节放假3天调休1天男子给前妻转账 现任妻子起诉要回网友建议重庆地铁不准乘客携带菜筐月嫂回应掌掴婴儿是在赶虫子重庆警方辟谣“男子杀人焚尸”国产伟哥去年销售近13亿新的一天从800个哈欠开始男孩疑遭霸凌 家长讨说法被踢出群高中生被打伤下体休学 邯郸通报男子持台球杆殴打2名女店员被抓19岁小伙救下5人后溺亡 多方发声单亲妈妈陷入热恋 14岁儿子报警两大学生合买彩票中奖一人不认账德国打算提及普京时仅用姓名山西省委原副书记商黎光被逮捕武汉大学樱花即将进入盛花期今日春分张家界的山上“长”满了韩国人?特朗普谈“凯特王妃P图照”王树国3次鞠躬告别西交大师生白宫:哈马斯三号人物被杀代拍被何赛飞拿着魔杖追着打315晚会后胖东来又人满为患了房客欠租失踪 房东直发愁倪萍分享减重40斤方法“重生之我在北大当嫡校长”槽头肉企业被曝光前生意红火手机成瘾是影响睡眠质量重要因素考生莫言也上北大硕士复试名单了妈妈回应孩子在校撞护栏坠楼网友洛杉矶偶遇贾玲呼北高速交通事故已致14人死亡西双版纳热带植物园回应蜉蝣大爆发男孩8年未见母亲被告知被遗忘张立群任西安交通大学校长恒大被罚41.75亿到底怎么缴沈阳一轿车冲入人行道致3死2伤奥运男篮美国塞尔维亚同组周杰伦一审败诉网易国标起草人:淀粉肠是低配版火腿肠外国人感慨凌晨的中国很安全男子被流浪猫绊倒 投喂者赔24万杨倩无缘巴黎奥运男子被猫抓伤后确诊“猫抓病”春分“立蛋”成功率更高?记者:伊万改变了国足氛围奥巴马现身唐宁街 黑色着装引猜测

4617作文网 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化