首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Haixiang
V2EX  ›  分享创造

守望先锋 UI 库

  •  1
     
  •   Haixiang · 319 天前 · 4724 次点击
    这是一个创建于 319 天前的主题,其中的信息可能已经有所发展或是发生改变。

    缘起

    去年 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 个月的制作过程也是很有趣的,这个库的开发算是告一段落了,

    第 1 条附言  ·  318 天前
    35 回复  |  直到 2019-03-16 00:07:58 +08:00
    eric1202
        1
    eric1202   318 天前
    是一个不错的实践
    mritd
        2
    mritd   318 天前 via iPhone
    后端狗,but 还是点个赞
    Haixiang
        3
    Haixiang   318 天前
    @mritd 嘿嘿 谢谢
    iwfan
        4
    iwfan   318 天前
    发现了一个 bug, 路由切换后,popover 没有关闭。
    ![]( https://i.loli.net/2019/03/15/5c8afdaeb69d2.png)
    Haixiang
        5
    Haixiang   318 天前
    @iwfan 好的 等期末考完修一下 哈哈
    celeron533
        6
    celeron533   318 天前 via Android
    暴雪律师团预备
    mgso
        7
    mgso   318 天前
    @celeron533 #6 噗哈哈哈哈哈哈
    haogefeifei
        8
    haogefeifei   318 天前
    6666666666
    hirasawayui
        9
    hirasawayui   318 天前
    我正打算做一个轻音少女 UI 库。
    qinxi
        10
    qinxi   318 天前
    文档界面左边背景太花了
    Mac
        11
    Mac   318 天前
    你好,自我介绍一下,我是源氏必须死环太平洋组织大中华区上海分区浦东分部南码头支部第三小队副队长。
    fan123199
        12
    fan123199   318 天前
    666,先 star 一波,再慢慢看代码
    wispx
        13
    wispx   318 天前
    赞一个
    elfive
        14
    elfive   318 天前 via iPhone
    @Mac 你好我是天使和尚要加强,安娜奶奶接着送,源氏睡死你,湖南电信一区第三中队大队长手下的小喽啰旁边的消防支队长。
    agdhole
        15
    agdhole   318 天前
    好看
    jeffchen328
        16
    jeffchen328   318 天前
    I need healing.
    Kilerd
        17
    Kilerd   318 天前
    第一张图有 4K 的版本吗?
    Kilerd
        18
    Kilerd   318 天前
    从 google 找到了。
    fucker
        19
    fucker   318 天前
    👍
    Haixiang
        20
    Haixiang   318 天前 via iPhone
    @qinxi 当时背景确实选得比较随意,后面文档背景色和文字颜色选了半天
    Haixiang
        21
    Haixiang   318 天前 via iPhone
    @celeron533 哈哈 gg
    Haixiang
        22
    Haixiang   318 天前 via iPhone
    @hirasawayui 可以的 加油!
    glaucus
        23
    glaucus   318 天前 via iPhone
    守望玩家支持,只是不知道有没有版权问题?
    Haixiang
        24
    Haixiang   318 天前 via iPhone
    @glaucus 那就 gg
    Haixiang
        25
    Haixiang   318 天前 via iPhone
    @glaucus 没有盈利应该没事吧哈哈
    Xxss
        26
    Xxss   318 天前
    nice
    YNaN
        27
    YNaN   318 天前
    谷里人,点个赞
    tao1991123
        28
    tao1991123   318 天前
    赞一个 O(∩_∩)O 哈哈~
    bokchoys
        29
    bokchoys   318 天前 via iPhone
    赞赞赞
    RyougiShiki
        30
    RyougiShiki   318 天前
    官网好看
    leoleoasd
        31
    leoleoasd   318 天前
    版权问题大概是有的吧 和是否盈利无关吧
    加个免责声明吧...
    leoleoasd
        32
    leoleoasd   318 天前

    chrome 是支持用 css 定义滚动条的颜色的 可以改一下
    eastlhu
        33
    eastlhu   318 天前 via iPhone
    这个是用来干嘛的啊
    Haixiang
        34
    Haixiang   318 天前 via iPhone
    @leoleoasd 尝试改过 不过在别的浏览器好像不能滚动了
    Haixiang
        35
    Haixiang   318 天前 via iPhone
    @leoleoasd 谢谢提醒 回去改一下否则真 gg 了
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1253 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 31ms · UTC 00:53 · PVG 08:53 · LAX 16:53 · JFK 19:53
    ♥ Do have faith in what you're doing.