这是我从2021年中旬开发到目前的一款WordPress新拟物主题(当前博客正在使用)。新拟物是2020年开始流行的,它尝试在纯色界面中使用阴影和高光来凸显元素的凸起和凹陷感。虽然有很多人已经做出了完美的新拟物设计,然而市面上却很难有这样的产品出现,很多开发人员没办法将它落地实现。
基于我这些年对前端的学习,在不断的和设计技能磨合和与自己的妥协中,最终将这一设计以WordPress博客主题的形式得以呈现。
主题设计介绍
微动设计
主题功能介绍
Neumorphism新拟物主题是博客主题,除了首页、分类列表页、博客内容页以外,还有友情链接、留言板等页面。
内容上,本主题为WordPress的原生编辑器额外扩展开发了多达31个专用区块,让你的内容更加丰富。部分区块展示如下:
提示框
方便的在文章中插入提示框,并允许选择蓝、绿、橙、红四种提示色彩
轮播图
在展示较多的图片时,在文章中插入一个轮播图是非常有用的
折叠面板
通过折叠面板收纳内容区域,用户点击即可展开阅读
标签页
分隔内容上有关联但属于不同类别的数据集合,点击可切换内容
进度条
用于展示操作进度,告知用户当前状态和预期
拥有蓝、绿、橙、红 多种颜色多种样式
神奇漂浮
用户可以通过鼠标抓动将这个模块悬停在页面的任意位置
交互式折线图
用于显示随时间或有序类别而变化的趋势。可通过点击显示/隐藏各数据
交互式柱形图
以长方形的长度为变量的统计图表。可通过点击显示/隐藏各数据
交互式饼图
在图表中表示各项的大小与各项总和的比例。可通过点击显示/隐藏各数据
交互式南丁格尔图
一种圆形的直方图。可通过点击显示/隐藏各数据
交互式混合柱线图
同时使用线、柱进行表示。可通过点击显示/隐藏各数据
井
用于显示凹陷、塌陷的UI效果
包含蓝、绿、橙、红多种可选色彩
面板
用于显示包含标题、且突出的UI效果
包含蓝、绿、橙、红多种可选色彩
块
在展示较多的图片时,在文章中插入一个轮播图是非常有用的
用于显示无凹凸效果且可以包含一个边框的UI效果
包含蓝、绿、橙、红多种可选色彩
列表
用于显示多条列表项目
包含蓝、绿、橙、红多种可选色彩
多链接按钮
一个主链接,多个辅助链接组成的下载按钮
常用于下载功能
虚拟滚动条
对于Windows用户而言,浏览器右侧的滚动条总是又粗又大。而在这个主题中,专门为此设计了虚拟滚动条,模拟Mac滚动条效果,让整个浏览过程美不胜收。
文章目录(Wiki模式)
当文章中存在多个“二级”、“三级”标题时,主题将自动启用“文章Wiki模式”。
“文章Wiki模式”将自动把文章内的“二级”、“三级”标题显示为文章导航并展示在边栏中,点击边栏标题可导航到文章中的指定位置。效果如下所示:
海报式分享
分享时生成带二维码的海报,右键保存至本地或手机端长按保存至本地后,方便上传到各类社交网站。
文章轮播图标题多样化
根据不同的标题格式,自动将标题进行“单行”、“双行”、“倾斜”、“带气泡”展示。并且使用了免费的“优设标题黑”字体,让整个效果更漂亮更有设计感: