
这是我从2021年中旬开发到目前的一款WordPress新拟物主题(当前博客正在使用)。新拟物是2020年开始流行的,它尝试在纯色界面中使用阴影和高光来凸显元素的凸起和凹陷感。虽然有很多人已经做出了完美的新拟物设计,然而市面上却很难有这样的产品出现,很多开发人员没办法将它落地实现。
基于我这些年对前端的学习,在不断的和设计技能磨合和与自己的妥协中,最终将这一设计以WordPress博客主题的形式得以呈现。
主题设计介绍
微动效设计
在正式开发前,为了能将基础UI效果落地,并且实现出想要的动画,因此在设计阶段就编写了一些简单Demo,用HTML和CSS来尝试这些动效。虽然最终上线时不一定都用到了正式效果上,但做这些工作对UI设计的落地是行之有效的。

主题功能介绍
Neumorphism新拟物主题是博客主题,除了首页、分类列表页、博客内容页以外,还有友情链接、留言板等页面。
内容上,本主题为WordPress的原生编辑器额外扩展开发了多达31个专用区块,让你的内容更加丰富。部分区块展示如下:
提示框
方便的在文章中插入提示框,并允许选择蓝、绿、橙、红四种提示色彩
提示效果:信息
提示效果:成功
提示效果:警告
提示效果:错误





轮播图
在展示较多的图片时,在文章中插入一个轮播图是非常有用的
折叠面板
通过折叠面板收纳内容区域,用户点击即可展开阅读
与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态
简化流程:设计简洁直观的操作流程
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担
用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态
简化流程:设计简洁直观的操作流程
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担
标签页
分隔内容上有关联但属于不同类别的数据集合,点击可切换内容
进度条
用于展示操作进度,告知用户当前状态和预期
拥有蓝、绿、橙、红 多种颜色多种样式
环形进度条
进度条的另一种表现形式
神奇漂浮
用户可以通过鼠标抓动将这个模块悬停在页面的任意位置
Hi,鼠标拖动上方的黑色区域试试?您可以把我拖拽到任何位置~
点击右上角的撤销按钮可复原
交互式折线图
用于显示随时间或有序类别而变化的趋势。可通过点击显示/隐藏各数据
交互式柱状图
以长方形的长度为变量的统计图表。可通过点击显示/隐藏各数据
交互式饼图
在图表中表示各项的大小与各项总和的比例。可通过点击显示/隐藏各数据
交互式南丁格尔图
一种圆形的直方图。可通过点击显示/隐藏各数据
交互式混合柱线图
同时使用线、柱进行表示。可通过点击显示/隐藏各数据
评分
用于显示评分,可包含多种样式
凹陷效果示例
凹陷效果示例,内部可以插入其它模块内容:
井
用于显示凹陷、塌陷的UI效果
包含蓝、绿、橙、红多种可选色彩
面板
用于显示包含标题、且突出的UI效果
包含蓝、绿、橙、红多种可选色彩
内部可以插入文本或其它模块内容:
边框在左示例
无边框示例
块
用于显示无凹凸效果且可以包含一个边框的UI效果
包含蓝、绿、橙、红多种可选色彩
列表
用于显示多条列表项目
包含蓝、绿、橙、红多种可选色彩
数字跳动
设定起始、结束数字。在页面滚动到该位置时显示跳跃的数字
包含蓝、绿、橙、红多种可选色彩
虚拟滚动条
对于Windows用户而言,浏览器右侧的滚动条总是又粗又大。而在这个主题中,专门为此设计了虚拟滚动条,模拟Mac滚动条效果,让整个浏览过程美不胜收。
文章目录(Wiki模式)
当文章中存在多个“二级”、“三级”标题时,主题将自动启用“文章Wiki模式”。
“文章Wiki模式”将自动把文章内的“二级”、“三级”标题显示为文章导航并展示在边栏中,点击边栏标题可导航到文章中的指定位置。效果如下所示:

海报式分享
分享时生成带二维码的海报,右键保存至本地或手机端长按保存至本地后,方便上传到各类社交网站。

文章轮播图标题多样化
根据不同的标题格式,自动将标题进行“单行”、“双行”、“倾斜”、“带气泡”展示。并且使用了免费的“优设标题黑”字体,让整个效果更漂亮更有设计感:

博客版购买
售价:¥350元(购买后加入售后群,提供售后交流与BUG修复),联系博主QQ 448981533 即可购买。(注明“新拟物主题购买”,通过开发者QQ是唯一正版购买途径)
注1:主题需要授权后才可使用,购买时提供根域名给开发者,将生成对应的序列号。使用该序列号可以在对应的根域名、二级域名、子文件夹中无限制安装。域名不可变更。
注2:代码不加密,只混淆,购买后您可以任意修改,仅限自己使用,但开发者不会为您的修改负责。
注3:拒绝任何形式的有偿或无偿分享,开发者具有对此行为的最终决策权,因此导致的损失,不予补偿。