服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

设计师必看 | 背景处理的深入浅出

日期: 来源:UI黑客收集编辑:等待周末的

在内容化消费的今天,越来越多的应用开始强调针对内容的沉浸式设计,虽然只是很小的细节,但却可以让你的界面愈发的活力,甚至充满情绪。


我们都知道iOS在一些诸如背景设计的处理上做得非常到位,那苹果是怎么做到的呢?今天就简单为大家介绍下你之前可能不太熟悉的手段:混沌分形。

 

▲ 混沌动态系统 dynamical system

    

#01

混沌分形理论



不论混沌还是分型,其实都是对自然界某种运动形态的映射和描述,他们在数学、物理学、生物学、地质学乃至股票波动、基金涨落等许多自然与社会科学领域中都有广泛应用。


例如从上世纪后半叶开始,混沌理论已经逐渐渗透到音乐等相关创作领域中,慢慢的到近现代分型算法也开始被广泛地用于各类艺术形式的创作和灵感表达等方面。


▲ 分形与混沌艺术-马丁迭代&玫瑰线


#02

生成式艺术



上面我们提到过,混沌和分型在设计和艺术创作也被深入运用了,我们一般称其为生成式艺术,特别是近些年计算机高度发展的当下,随着计算能力的提高,越来越多的生成式艺术作品出现在我们生活中。


让我们一起看下iOS的播放器,同一张封面如果对比其他应用来看,你是不是会发现背景设计的好像哪里有点不一样?好像更模糊更虚化,伴随着一种流动感。


▲ iOS播放器背景有种说不出的朦胧美


如果按照常规思路来处理这种背景效果,我们首先会把图片放大填充到背景层,随后给一个模糊参数,但是我们可以发现出来的效果跟iOS的背景并不一样~


因此iOS的背景效果并不是直接把图片放大处理后的效果,那这种是怎么实现的呢?笔者猜测极大概率是混沌分型的生成式艺术。


▲ 简单的放大模糊并没发实现左侧的效果


下面我们运用混沌分形思路,简单尝试复刻一下,如何把一张封面图处理成类似iOS的这种背景充满不规则流动形状的效果。


第一步,我们通过对素材进行取色逻辑处理,从而得到一个阵列范围内的色值集合。


▲ 针对封面图进行取色处理


接下来我们借助某种算法工具,比如这里我使用的是阿里云的呼吸工具B-Design Tool,在刚刚的色值集合中取出所需数量的色值,并填入其中,适当调整一下算法的动态参数,借助其生成我们最终所需要的分形纹理。

▲ B-Design Tool


通过对比两种不同手段实现出来的背景效果,可以很明显发现右侧的更符合iOS的播放器效果,也侧面证明苹果的实现理论大致应该如此。


▲ 右侧的效果明显是我们想要的预期结果


运用这套模式我们继续随机找个素材,通过测试发现最后生成的背景设计几乎是契合原版效果的!


当然这种纹理其实是动态的,也就是说我们可以在其基础上将背景设计进一步提升表现形态,这里就不再具体展开了。




#03

算法创作



抛开混沌分形的技巧之外,回到应用设计上,我们现在看到的关于背景的处理手法,通常可以总结为两种手段,一种是算法取主色填充,另外一种是素材背景模糊处理。


算法取主色填充


通过将三维空间中的点进行聚类,进而寻找到图像的主色,这种方式相比较于固定色值,灵活性更高,感官上更为顺畅。


某些应用会提前根据自己品牌的色彩体系,批量拓展出一系列契合自身品牌表达的辅色,并将这些颜色随机的应用在各种背景设计上。


▲ 豆瓣对角线双色渐变的运用


▲ 抖音长渐变的运用


▲ Pinterest 延迟加载取图主色


素材背景模糊处理


顾名思义把图片放在背景上放大,并给一定的模糊和其他处理,就可以让背景呈现出类似毛玻璃的虚化效果,从而使其看起来有一种朦胧美,这种手段在正逐渐成为主流。


例如网易音乐播放封面、淘宝详情主图封面等,均是运用这种思路保证整个界面等沉浸和整体感。


▲ 淘宝详情页背景放大模糊处理


▲ 网易音乐封面背景放大模糊处理


写在最后

笔者也只是主观分析,不代表其原本的实现方案也是这样;
欢迎大家一起探讨下思路,
或者你有什么想法也可以发表在评论里哟~


相关阅读

  • 应用过于优秀,安装就是VIP

  • 分享说明 本号主要分享好用、好玩、有趣、有料的互联网软件、资源、美图、教程、网站等内容。小盒子会持续更新,记得每天来打开支持呀!内容收集整合于互联网公开资料,如果
  • 教程 | 一文讲透Origin分组、子组、堆积柱图!

  • 【做计算 找华算】理论计算助攻顶刊,10000+成功案例,全职海归技术团队、正版商业软件版权!经费预存选华算,高至15%预存增值!来源丨编辑之谭导 读武汉纺织大学的Z博士提问:怎样
  • Compose 动画艺术探索之瞅下 Compose 的动画

  • 本文为稀土掘金技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!文章起因本篇文章为我新专栏《Compose开发艺术探索》的第一篇文章,那么为什么要写这个专
  • 10个Ai字体效果

  • 大家都知道,Ai是个非常强大的矢量做图软件,不管是做Logo还是海报都可以用其中工具提高效率,节省时间,本期就提供10个这些工具在字体效果上的使用小技巧。先打出文字,选一款字面率

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

  • 设计师必看 | 背景处理的深入浅出

  • 在内容化消费的今天,越来越多的应用开始强调针对内容的沉浸式设计,虽然只是很小的细节,但却可以让你的界面愈发的活力,甚至充满情绪。我们都知道iOS在一些诸如背景设计的处理上
  • 甲流来袭?快跟姗姗一起学习如何辨别和预防~

  • 甲流是由甲型流感病毒引起的急性呼吸道传染病常发生在冬春季 当前,各地疾控机构流感监测结果显示我国流感病毒活动水平有所增强以甲型流感为主 面对来势汹汹的甲流我们有哪
  • CRM工作台设计录-以世界杯的精神做设计

  • 作为一名互联网产品设计师,我们经常会被问到一个问题:你的设计价值体现在哪儿?就比如最近在世界杯创造历史的 C 罗,虽然成就了近 5 届世界杯都有进球的纪录,但他的实际价值在于作
  • 端午 | 美好,接粽而至

  • 端DUANWU午当暑著来清每逢端午,一闻粽叶清香便憧憬期望,温馨情暖生活有很多口味选择无论甜咸,不如相见团圆是最好的馅!时光不变,一念安康愿你收获仲夏时节的美好!恩尼特克祝大家端
  • 女人胸部是体相财库位,男女胸部痣相命理详解!

  • ​痣想必几乎所有人都有,每个人身上的痣位置都不同,有的长在手臂上、腿上、腰部或者面部,那么胸口有痣好不好呢,胸口正中间有痣有代表着什么,胸口有痣的人是否有什么吉相或者凶相