Heocan 09 | 通过阴影和留白构造干净的设计
文章摘要
HeoGPT
这篇文章介绍了如何通过阴影和留白来构造干净的设计,以及卡片式设计中如何运用阴影和留白来增加三维留白的控件,提高设计感和档次感。同时,文章展示了几种常见的设计方式和增加阴影和留白后的对比效果。文章强调,使用阴影和留白的设计方法可以提高界面的认知度、逻辑清晰、易于操作。
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
投诉逛追波的人都会知道,很多人在评论UI设计作品的时候经常用clean(干净)来给予评价。UI作品干净会拉高设计感和档次感(所谓的‘高大上’)。
干净的设计主要用两种方法配合优秀的选图来完成。两种方法分别是阴影、留白。阴影和留白为卡片式APP设计带来了更多发挥的空间,过渡较好较浅的阴影给人干净的印象。
让我们来对比一下几种常见的设计方式
很普通的简约风格设计,将底部tabbar移到侧边的实验设计。页面有横划手势方便切换顶部tab。
如果配合了阴影+留白呢?
仅仅增加了阴影,整个页面就有了空间感,相当于【三维留白】
留白过少会显得更加单调和拥挤,利用之前期刊提到的单侧大圆角和侧边导航来增加二维和三维的留白。
几乎所有的卡片式设计都运用了阴影感觉,增加三维留白的控件。注意,阴影边缘离卡片越近、不透明度高,说明卡片与底面越近。为了增加三维留白的控件,一般将阴影的不透明度调低、阴影模糊值调高、距离卡片的距离增大来保证三维留白的空间。但是注意不要留的太远,不透明度和距离之间的关系应接近现实。如果实在把握不了,Google的materialdesign可能会帮到你。
留白+阴影会给人乳化的感觉,对于食品类、高端人群APP、文章资讯、非营销类、音乐类都比较适用。让人保持冷静的界面。
甚至高端奢饰品品牌也可以使用卡片设计,卡片设计的好处是逻辑清晰、方便操作、界面认知度较高、易于区分feed等。所有用到卡片设计的时候都可以适当增加阴影,三维留白一定会让你更加震撼。
(图片来自于互联网,版权归原作者所有。作者信息详见我的 Pinterest,仅供学习使用,请勿转载和商用。Hoocan 仅提供作品的展示,Hoocan 未通过任何渠道进行盈利。)
- 感谢你赐予我前进的力量
打赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 张洪Heo
评论
生成评论
匿名评论
违规举报
✅ 你无需删除空行,直接评论以获取最佳展示效果