header_v0.7.32

让扁平的网页更出彩-师哥做设计第9期

333天前发布

原创文章 / 多领域 / 观点
写代码的平面师 原创,如需商业用途或转载请与写代码的平面师联系,谢谢配合。

这篇文章断断续续写了一个多月,总算写完了,希望能够通过这篇文章能够帮助到你,能够让你的脑洞大开。
图片来源于互联网,如有侵权请联系作者,对图片署名或删除。

1be8580e2e51a84a0d304fec07d0.jpg4e9c580e2e79a84a0e282b9a28c4.jpg

leagueoflegends


helmade


剑侠世界

cdca580e2fd7a84a0e282bd45fc2.jpg

尼桑汽车


秒传互动

8933580e3043a84a0d304fa66ea5.jpg

 

穿越火线(片段)


5690580e3126a84a0e282be928ef.jpg


 43ef580e31aaa84a0e282b9e5668.jpg

电商活动广告

026f580f4f47a84a0d304f3439a9.jpg

  

各公司LOGO+活动


2bd9580f4fa3a84a0d304f525c57.jpg

 

GIF加载图+动态二维码

56dc580f4ff2a84a0e282b6dcbd0.jpgfe19580f501ca84a0d304f2cc349.jpg

QQ浏览器


7717580f50e1a84a0e282b46bcf4.jpg

安踏活动页


bf80580f508fa84a0e282be284ca.jpg 9807580f50b5a84a0d304f241d75.jpg

3D可以实现的功能



1343580f5125a84a0e282b570d3c.jpg

a41a580f5225a84a0d304f023b71.jpg

网站404动画


1c22580f5243a84a0d304f100f8a.jpg

360浏览器



bb08580f5256a84a0d304f254659.jpg

百度浏览器


43d4580f518ea84a0d304f855753.jpg

国外酷站


国外酷站


18f5580f535da84a0e282b7e6980.jpga2a2580f5394a84a0d304fc1cdce.jpg

复杂图形:在AI中绘制的复杂图像可以直接应用到网页中



绘制产品轮廓

绘制轮廓:工业产品非常适合用这种方式表现,比单纯的放置一张静态图出彩的太多



0b0e580f545da84a0d304f98680e.jpg

文字特效:其实原理都是一样的,但是为文字添加这种效果的话,还是非常酷炫的


169b580f55c9a84a0e282bb775ff.jpgc3e3580f5738a84a0d304f209c84.jpg

阴影:当用户光标选择元素时,为该元素添加阴影效果,为用户提供更明确的指示,而且添加阴影后增加了层次感,让扁平化页面不再干瘪。



4bfb580f5941a84a0d304fc3eb31.jpg

阴影+位移:让元素上下或左右偏移,这种效果比单纯的添加阴影效果更明显,在网站中这种效果出现的非常多。




改变初始宽高:改变选中元素的宽高,可以让选择的元素立即脱颖而出

f5e0580f57b4a84a0d304f19db5d.jpg

增大宽高

3c17580f5805a84a0e282b737a73.jpg

减小宽高


1b4b580f5853a84a0e282bcc308d.jpg

改变宽度


cb39580f58a0a84a0d304f01341f.jpg

选中的元素本身不改变,改变子元素的宽高


9442580f5afea84a0d304f865de3.jpg

maziri


站酷十周年活动

上面两个网页都是根据鼠标位移改变元素的位置



kikk



bersiserlini


tioluchin

根据滚动条的滚动而改变元素的位置


在国内的网站中应用的也比较多,在扁平化设计中,视觉差特效不会让扁平化页面太枯燥

有的视觉差可能是根据用户鼠标指针做变化,有的可以根据滚轮的位置来改变相应的元素,当然设计师做做设计的时候就应该考虑哪些元素要动,因此可以把这些元素单独拆分出来处理


15db580f6371a84a0d304ffdf0e5.jpg

bulan


魅族手机


很多时候想要好好的认真做一个网站,结果设计表现后,达到的效果却出奇的和之前做过的作品类似,没有创新和新意,久而久之将会把自己封闭在一个狭隘的怪圈中,每次作品都是重复同样的做法,做不出好的作品


其实这都是你对设计的认知不够,这要求我们去多看多总结,能多去认知新领域、新技术,这样才能使得你的作品更多样,思想不被禁锢,脑洞可以开的更大。



c34a580f66ffa84a0e282b91b4de.jpg


144
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功