守望先锋 UI 库

2019-03-15 08:39:50 +08:00
 Haixiang

缘起

去年 12 月玩守望等匹配的时候就无聊萌生出做一套守望 UI 的想法,因为觉得守望的 UI 比较简洁,而且对于那些小组件的实现都有个大概的思路。当时 Hey UI 的作者也在知乎上宣传自己的 UI 库,所以更加坚定了做这个 UI 库的想法。

调研了之后还真发现已经有人用 React 写了 4 个守望的组件了。

他是用 React.js 写的,不过他写不是很全,没有形成一个库。既然没有同类型的产品,那就我来用 Vue.js 搞一个吧。所以今年写完代码高亮插件后,在一些契机下开始动工。

文档

整个库所使用到的有 Vue.js + Karam, Mocha, Chai,可以从 npm 下载试试~

Overwatch UI 文档

Overwatch UI Github

后记

其实整个 UI 库真的有用么?做完之后其实不见得有用 :(,单从设计上来说这个库和网页开发的配合不是那么的好。

因为游戏一般是有鲜明的背影图的,所以它的很多组件都是有透明度的,而网页一般以白色为底,所以组件在网页上有点“看不清”。而且守望的组件 UI 逻辑和网页也不太一样,为了凸显游戏本身它的组件做得很“浅”,再用到网页上就不好看了,但是如果加背景图应该会好点。

虽然没啥用吧,但是收获还是很大的,不仅熟悉了市面上 UI 库的很多 API,也对自己的 Vue.js 有个提升,还有接触到了以前从没有用过的单元测试,当然也被 Vue-cli-3, Karam 等配置坑过几遍。

总之,3 个月的制作过程也是很有趣的,这个库的开发算是告一段落了,

7071 次点击
所在节点    分享创造
35 条回复
Haixiang
2019-03-15 11:39:03 +08:00
@celeron533 哈哈 gg
Haixiang
2019-03-15 11:39:32 +08:00
@hirasawayui 可以的 加油!
glaucus
2019-03-15 11:45:07 +08:00
守望玩家支持,只是不知道有没有版权问题?
Haixiang
2019-03-15 12:11:14 +08:00
@glaucus 那就 gg
Haixiang
2019-03-15 12:13:32 +08:00
@glaucus 没有盈利应该没事吧哈哈
Xxss
2019-03-15 12:22:07 +08:00
nice
YNaN
2019-03-15 13:09:57 +08:00
谷里人,点个赞
tao1991123
2019-03-15 13:10:41 +08:00
赞一个 O(∩_∩)O 哈哈~
bokchoys
2019-03-15 13:27:40 +08:00
赞赞赞
RyougiShiki
2019-03-15 14:16:29 +08:00
官网好看
leoleoasd
2019-03-15 18:32:04 +08:00
版权问题大概是有的吧 和是否盈利无关吧
加个免责声明吧...
leoleoasd
2019-03-15 18:33:24 +08:00

chrome 是支持用 css 定义滚动条的颜色的 可以改一下
eastlhu
2019-03-15 18:35:24 +08:00
这个是用来干嘛的啊
Haixiang
2019-03-16 00:05:48 +08:00
@leoleoasd 尝试改过 不过在别的浏览器好像不能滚动了
Haixiang
2019-03-16 00:07:58 +08:00
@leoleoasd 谢谢提醒 回去改一下否则真 gg 了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/544793

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX