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

守望先锋 UI 库

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

    缘起

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

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