Sketch内的新拟物风格探索
快速跳转目录
- 新拟态是什么
- 新拟态风格展示
- 新拟态怎么绘制
新拟态是什么
上图应该能解释“拟物”的意思，偏向写实，重视细节的刻画，用高光、阴影、纹理、颜色等各种方式来最大程度的还原物体的本来面貌，突出它的质感。
再来解释“轻拟物”似乎容易一些，介于写实和扁平之间的一种风格，其实以前也流行过类似的，我们称之为“轻质感“，虽然两者还是有着很多不同的地方。
概括来说，“新拟态”风格就是用阴影高光渐变等方式克制的刻画出微质感。
新拟态风格展示
展示一些追波和花瓣站酷上大佬们的作品会帮助大家更好的理解设计风格。
由于新拟态的风格能够使界面看上去更简洁统一，作为作品集内的设计展示和一些对外公开的项目展示的风格往往能收获更多的关注。这一点在追波上就一览无遗。
不过由于这种风格对于用户的引导性不强，在作为按钮使用时和其他风格比起来很难让用户第一眼就认为这是个按钮（虽然加上文字会好一些），仙女做个图来对比一下。
新拟态怎么绘制
好看的东西肯定得会做，大概讲解一下新拟态的绘制方式，仙女用的Sketch比较多，因为利用投影和渐变，所以和PS的操作本质上是一致的。
其实很简单，更多的还是在设计的过程中自己归纳总结，当然在这个智能化的时代，必然少不了一些工具。给大家介绍一款可以直接生成新拟态风格元素的工具——neumorphism，是一个会设计的前端工程师开发的（Adam Giebl）。
https://neumorphism.io
页面开启后长这样⬇️ 左边为预览图，四个角可以切换高光方向，右侧为具体的参数，可以通过调节达到想要的效果，也可以调节凸起和凹陷等风格，同样可以生成具体的代码。
下面讲解几个简单的新拟态风格绘制过程，方便大家做一个了解。（sketch）
1.新拟态icon，主要就是外部形状有个质感体现，因为只是为了说明呈现的比较单一。
2.新拟态风格按钮，按钮和控制器需要一些其他元素和色彩的辅助。因为我本身不是喜欢重阴影的感觉，做的质感还是比较弱的，绘制中需要不断调整哈。
基本介绍的差不多了，欢迎大家动手试一试吧～如果有疑问的话可以在公众号后台发送消息，会尽量解答的哈。
如果对为什么这个风格难以用于实际商业用途比较纠结的话，可以了解一下「可访问性障碍」。
Sketch内的新拟物风格探索相关推荐
- 前端例程20210510：新拟物风格（Neumorphism）设计与实现
文章目录 前言 基础说明 更多示例 新拟物风格按钮 暗色新拟物风格卡片 新拟物风格单选按钮 总结 前言 新拟物风格(Neumorphism)是前两年兴起的一种设计风格,这个风格虽然因为特征上的一些问题 ...
- 【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)图标按钮动效网页效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
- 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
- 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)动画特效图标网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [web前端特效源码]Html5+css3实现新拟态新拟物风格(Neumorphism)网页图标动画效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: <!DOCT ...
- 【前端实例代码】Html5+css3创建登录和注册表单~实现新拟态新拟物风格(Neumorphism)网页图标效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: [web前端特效源码]Html5+css3创建登录和注册表单2!实现新拟态新拟物风格(Neumorphism)网页图标效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: ...
- 【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)气泡图标泡泡网页效果~手把手教学~初学者进阶必会~超简单 ~
b站视频演示效果: [前端实例代码]Html5+css3创建登录和注册表单!实现新拟态新拟物风格(Neumorphism)气泡图标泡泡网页效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: ...
- 【web前端特效源码】Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果~手把手教学~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果!手把手教学! 效果图: 完整代码: & ...
- UI设计新趋势|拟物风格UI设计素材模板
拟物风格的设计 总显得精致有质感,高级感. 这基本上意味着他们使用了 "真实世界 "的元素,比如木质书架,笔记中缝制的皮革,以及你 翻阅的CD封面,让你感受到新的数字世界.通过使用 ...
- 拟物风格的小程序附源码
1. 前言 对于拟物风格这种UI研究良久,这里把我收集到的一些好用的组件.UI.源码发出来供大家使用.我个人也开源了一款拟物风格的小程序,欢迎借鉴. 各个风格简介 Material Design,物料 ...
最新文章
- [转] 先验概率and后验概率
- 浙大计算机知识基础,计算机基础知识题浙大远程
- 有没有插件_这 10 款插件让你的 GitHub 更好用、更有趣
- LB 负载均衡的层次结构
- Spark学习之路 （五）Spark伪分布式安装
- 轮廓检测_轮廓检测| Richer Convolutional Features | CVPR | 2017
- html中通过定位 实现下拉,JS+CSS相对定位实现的下拉菜单
- android studio -genymotion神奇错误
- mysql由浅入深_由浅入深—MySQL数据库
- Swift 3必看：新的访问控制fileprivate和open
- Django折腾日记(django2.0)
- 安川机器人如何注释化指令_安川机器人 命令介绍 内部版
- linux下安装yum命令
- 遍地是钱，为什么捡不到？
- 互联网日报 | 1月30日 星期六 | 苹果单季营收首破1000亿美元；特斯拉连续六个季度盈利；全球新冠肺炎确诊病例超1亿例...
- Elasticsearch语法知多少之Match query
- 离职，我应该做什么？
- 漫画的力量，你可能一无所知
- android studio编程时出现的错误：Cannot get property 'XXXX' on extra properties extension as it does not exis
- 海子 java,我把海子读给你听（二）