My iUROP Project in SUTD. 2018.12.15

可以在 http://www.innogps.com/innovelty/index.html 尝试使用。

GitHub Page and English Introduction: https://github.com/854605104/Patent-Novelty-Website

Demo Page

原始界面与网页介绍

原网站页面

这个网站旨在使用一种新型独特的测量方式来测量一个专利的潜在价值。这个测量方式是由SUTD-MIT国际设计中心(IDC)的Luo Jianxi教授与He Yuejun博士研究发现的,相关论文如下:

Yuejun He, Jianxi Luo (2017) The Novelty “Sweet Spot” of Invention. Design Science, 3, e21.
Yuejun He, Jianxi Luo (2018) Assess Novelty of An Invention Using the Central-Extreme Novelty Matrix: A Case Study of Juvo Lab’s Fibre-Optic Sensor Mat. ICDC, 2018, Bath, UK.

这种新型方法指出,使用文中所述的两个变量进行专利“坐标”的标定,专利价值的分布有规律可循,在一个“Sweet Spot”区域中的专利往往更具价值。用户可以输入专利的ID或者是关键词查询专利是否位于“Sweet Spot”区域(如截图中蓝色格子区域)中。

用户操作流程与界面逻辑

用户操作流程
用户界面逻辑

我将网站原本的单一界面重新规划,确定了三个主要界面:主页面Home Page,教导界面Demo Page和工作原理界面How it works。

界面设计

Home Page 是提供给熟练用户快速根据关键词和专利ID查询专利价值的。其重点是要能够让用户快速查询到专利并获得对应价值。

与原界面相比,最大的改变在于我与教授讨论后认为,规划出一个确定的“Sweet Spot”是意义不大的,因为论文指出只有不足2%的专利位于区域内。而如果能够提供用户潜在价值分布的“地图”,用户就可以根据专利所在区域颜色的深浅来判断潜在价值的高低。

因此,结果呈现由原本仅圈出Sweet Spot区域改为了呈现分布情况。同时,我也改善了信息呈现的方式,如Keywords搜索结果的呈现等。

ID Searching
Keywords Searching

Demo Page 的意图是通过一个示范性的测试,告诉新用户网站的使用方法。为此我查阅了大量的专利,选择了三个既分布在高价值区域,同时其市场价值也被证实极高的专利作为示范。

同时,我在代码中增加了浏览器Cookie的判断,首次浏览的用户会自动导向该界面。此外,我引用了particle.js的粒子动效,虽然已经是被用烂的懒人网页交互,但依然可以让网页不那么单调。

点击Assess后,用户将会导向该专利的细节,包括分布区域、专利现实价值等。

Demo Page
Demo Page

How it works Page 是一个尚未完成的Page。本来的意图是希望通过一个可视化的、简单的方式向用户解释论文中用于评估专利的方法。但由于能力有限,方法也非常复杂,自认为没有解释好,此处仅为了框架的完整性将草稿放在页面中。

How it works (draft)

相关代码

Particle.js

引入了particle.js的库,快速简单地为网页创造了小交互。

D3.js

使用了d3.js,主要涉及到了svg矩阵的绘制,对d3有了一定的了解。

同时,jQuery和HTTP方法也被大量使用。

不足

最大的不足之一是由于自学前端经验不足,所有页面没有使用框架,所以没有做移动端适配,在小尺寸的屏幕上会出现形变。

此外,由于前端实践的时间与精力需求对于我来说远高于设计的,在设计方面有很多细节没有做到位。在寻求了几个朋友的反馈意见后进行了一定的改善。

发表评论

电子邮件地址不会被公开。 必填项已用*标注