这是我从2021年中旬开发到目前的一款WordPress新拟物主题(当前博客正在使用)。新拟物是2020年开始流行的,它尝试在纯色界面中使用阴影和高光来凸显元素的凸起和凹陷感。虽然有很多人已经做出了完美的新拟物设计,然而市面上却很难有这样的产品出现,很多开发人员没办法将它落地实现。

基于我这些年对前端的学习,在不断的和设计技能磨合和与自己的妥协中,最终将这一设计以WordPress博客主题的形式得以呈现。

主题设计介绍

微动效设计

在正式开发前,为了能将基础UI效果落地,并且实现出想要的动画,因此在设计阶段就编写了一些简单Demo,用HTML和CSS来尝试这些动效。虽然最终上线时不一定都用到了正式效果上,但做这些工作对UI设计的落地是行之有效的。

主题功能介绍

Neumorphism新拟物主题是博客主题,除了首页、分类列表页、博客内容页以外,还有友情链接、留言板等页面。

内容上,本主题为WordPress的原生编辑器额外扩展开发了多达31个专用区块,让你的内容更加丰富。部分区块展示如下:

提示框

方便的在文章中插入提示框,并允许选择蓝、绿、橙、红四种提示色彩

提示效果:信息

提示效果:成功

提示效果:警告

提示效果:错误

轮播图

在展示较多的图片时,在文章中插入一个轮播图是非常有用的

折叠面板

通过折叠面板收纳内容区域,用户点击即可展开阅读

示例面板1

与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念

在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等

示例面板2

控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作

页面反馈:操作后,通过页面元素的变化清晰地展现当前状态

示例面板3

简化流程:设计简洁直观的操作流程

清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策

帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担

示例面板4

用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策

结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等

示例1

控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作

页面反馈:操作后,通过页面元素的变化清晰地展现当前状态

示例2

简化流程:设计简洁直观的操作流程

清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策

帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担

标签页

分隔内容上有关联但属于不同类别的数据集合,点击可切换内容

进度条

用于展示操作进度,告知用户当前状态和预期

拥有蓝、绿、橙、红 多种颜色多种样式

示例1
78%
78%
示例2
30%
30%
示例3
47%
47%
示例3
47%
47%
示例3
66%
66%
示例3
82%
82%
已完成 80%

环形进度条

进度条的另一种表现形式

神奇漂浮

用户可以通过鼠标抓动将这个模块悬停在页面的任意位置

Hi,鼠标拖动上方的黑色区域试试?您可以把我拖拽到任何位置~

点击右上角的撤销按钮可复原

交互式折线图

用于显示随时间或有序类别而变化的趋势。可通过点击显示/隐藏各数据

交互式柱状图

以长方形的长度为变量的统计图表。可通过点击显示/隐藏各数据

交互式饼图

在图表中表示各项的大小与各项总和的比例。可通过点击显示/隐藏各数据

交互式南丁格尔图

一种圆形的直方图。可通过点击显示/隐藏各数据

交互式混合柱线图

同时使用线、柱进行表示。可通过点击显示/隐藏各数据

评分

用于显示评分,可包含多种样式

凹陷效果示例

凹陷效果示例,内部可以插入其它模块内容:

用于显示凹陷、塌陷的UI效果

包含蓝、绿、橙、红多种可选色彩

面板

用于显示包含标题、且突出的UI效果

包含蓝、绿、橙、红多种可选色彩

面板标题示例

内部可以插入文本或其它模块内容:

Content_value_not_string_or_array
50%
50%

边框在左示例

无边框示例

用于显示无凹凸效果且可以包含一个边框的UI效果

包含蓝、绿、橙、红多种可选色彩

列表

用于显示多条列表项目

包含蓝、绿、橙、红多种可选色彩

购物清单
蔬菜,千万别忘了
水果
其他项目

多链接按钮

一个主链接,多个辅助链接组成的下载按钮

常用于下载功能

数字跳动

设定起始、结束数字。在页面滚动到该位置时显示跳跃的数字

包含蓝、绿、橙、红多种可选色彩

888

虚拟滚动条

对于Windows用户而言,浏览器右侧的滚动条总是又粗又大。而在这个主题中,专门为此设计了虚拟滚动条,模拟Mac滚动条效果,让整个浏览过程美不胜收。

文章目录(Wiki模式)

当文章中存在多个“二级”、“三级”标题时,主题将自动启用“文章Wiki模式”。

“文章Wiki模式”将自动把文章内的“二级”、“三级”标题显示为文章导航并展示在边栏中,点击边栏标题可导航到文章中的指定位置。效果如下所示:

海报式分享

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

文章轮播图标题多样化

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

博客版购买

售价:¥350元(购买后加入售后群,提供售后交流与BUG修复),联系博主QQ 448981533 即可购买。(注明“新拟物主题购买”,通过开发者QQ是唯一正版购买途径)

注1:主题需要授权后才可使用,购买时提供根域名给开发者,将生成对应的序列号。使用该序列号可以在对应的根域名、二级域名、子文件夹中无限制安装。域名不可变更。

注2:代码不加密,只混淆,购买后您可以任意修改,仅限自己使用,但开发者不会为您的修改负责。

注3:拒绝任何形式的有偿或无偿分享,开发者具有对此行为的最终决策权,因此导致的损失,不予补偿。