爱意满满的作品展示区。
Haixiang

守望先锋 UI 库

  •  1
     
  •   Haixiang ·
    haixiangyan · Mar 15, 2019 · 8511 views
    This topic created in 2795 days ago, the information mentioned may be changed or developed.

    缘起

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

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

    chrome 是支持用 css 定义滚动条的颜色的 可以改一下
    eastlhu
    eastlhu
    Mar 15, 2019 via iPhone
    33
    这个是用来干嘛的啊
    Haixiang
    Haixiang
    OP
    Mar 16, 2019 via iPhone
    34
    @leoleoasd 尝试改过 不过在别的浏览器好像不能滚动了
    Haixiang
    Haixiang
    OP
    Mar 16, 2019 via iPhone
    35
    @leoleoasd 谢谢提醒 回去改一下否则真 gg 了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   624 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 67ms · UTC 18:48 · PVG 02:48 · LAX 10:48 · JFK 13:48
    ♥ Do have faith in what you're doing.