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

喜欢中国风的 V 友可以进来看看...

  •  6
     
  •   TristanYang ·
    zerosoul · 2019-09-15 21:41:21 +08:00 · 13963 次点击
    这是一个创建于 1894 天前的主题,其中的信息可能已经有所发展或是发生改变。
    偶然间看到一个日本人在 2010 年的一个作品( http://nipponcolors.com/),非常喜欢,用 react 重构了中国风界面,并做了许多改进:

    1. 颜色做了分类,更方便查找
    2. 可收藏喜欢的颜色
    3. 可生成壁纸,用来当手机壁纸,效果还可以
    4. 重写 UI,并改进了许多细节

    访问地址: https://works.yangerxiao.com/chinese-colors/
    代码开源: https://github.com/zerosoul/chinese-colors

    还在迭代中,有问题欢迎反馈。
    第 1 条附言  ·  2019-09-15 22:20:19 +08:00
    还有一个改进:支持 PWA
    第 2 条附言  ·  2019-09-15 22:53:47 +08:00
    不太会发图,附上截图:

    Mobile 界面:
    https://imgur.com/mipmQGt
    PC 界面:
    https://imgur.com/hY9IPMw
    第 3 条附言  ·  2019-09-15 22:58:57 +08:00
    没预览图,再发一遍:
    Mobile 截图:


    PC 截图:
    第 4 条附言  ·  2019-09-17 15:28:44 +08:00
    搭车推荐我的另一个作品: https://www.v2ex.com/t/601535
    第 5 条附言  ·  2019-09-21 19:57:49 +08:00
    最近的迭代:

    使用 svg 重构了 cmyk 百分比圈
    完善了 README 文档,中英文版本
    新增诗词
    新增了一些壁纸配图
    微调各种样式
    第 6 条附言  ·  2019-09-24 22:41:54 +08:00
    新起域名: https://colors.ichuantong.cn/ 原地址会做 301 跳转
    163 条回复    2019-10-14 12:13:07 +08:00
    1  2  
    dodo2012
        1
    dodo2012  
       2019-09-15 21:45:52 +08:00
    不错不错,关注下
    benyur
        2
    benyur  
       2019-09-15 21:46:12 +08:00 via Android
    真不错,顶
    TristanYang
        3
    TristanYang  
    OP
       2019-09-15 21:53:38 +08:00
    @benyur 谢谢,喜欢的话,欢迎 star,😆
    TristanYang
        4
    TristanYang  
    OP
       2019-09-15 21:53:44 +08:00
    @dodo2012 谢谢,喜欢的话,欢迎 star,😆
    TristanYang
        5
    TristanYang  
    OP
       2019-09-15 21:56:11 +08:00
    忘了加一条改进: 优化了移动端显示,Mobile First
    Ultraman
        6
    Ultraman  
       2019-09-15 21:58:09 +08:00 via Android
    壁纸下载失败
    Android + Firefox Preview 2.0.0-rc.2
    下载时提示 Can't download this file type
    Ettup
        7
    Ettup  
       2019-09-15 21:58:29 +08:00 via iPhone
    很不错,已收藏
    TristanYang
        8
    TristanYang  
    OP
       2019-09-15 22:02:27 +08:00
    @vcinex 嗯 这个壁纸下载功能不太稳定,我再搞搞,兼容性搞好点。不要在应用内打开,使用手机自带浏览器,或者 android chrome 应该没问题。
    icekingcy
        9
    icekingcy  
       2019-09-15 22:08:15 +08:00 via iPhone
    mark fork 一份
    winterbells
        10
    winterbells  
       2019-09-15 22:08:43 +08:00 via Android
    网站叫 nippon colers =。=
    winterbells
        11
    winterbells  
       2019-09-15 22:09:10 +08:00 via Android
    @winterbells colors
    Ultraman
        12
    Ultraman  
       2019-09-15 22:12:56 +08:00 via Android
    @TristanYang 还有就是手机壁纸的话能否根据访问设备屏幕调整图片长宽比例?还要二次裁剪影响美观。
    TristanYang
        13
    TristanYang  
    OP
       2019-09-15 22:19:47 +08:00
    @vcinex 裁剪?是不是生成的顶部有白边?这在某些机型下是个 bug,我还在看。 壁纸功能现在是简单做了下,还需要许多细节优化。
    Pillowl
        14
    Pillowl  
       2019-09-15 22:21:07 +08:00 via Android
    今晚和朋友聊了两个多小时的中国色,结果打开 v2 你这个就出来了,真不错!还有,推荐一个叫做“几枝”的 Chrome 标签页扩展,将中国色和古诗词结合在一起了。
    artandlol
        15
    artandlol  
       2019-09-15 22:26:47 +08:00 via Android
    怎么感觉没有日本风格的色卡好看
    TristanYang
        16
    TristanYang  
    OP
       2019-09-15 22:27:15 +08:00
    @Pillowl 啊 巧了 下一步迭代计划,正想把古诗词融入进来。
    TristanYang
        17
    TristanYang  
    OP
       2019-09-15 22:28:32 +08:00
    @artandlol 毕竟那位日本朋友有设计背景,设计专业我是门外汉,只是单纯喜欢美的东西,😃。也可能是先入为主 🤣
    keith1126
        18
    keith1126  
       2019-09-15 22:31:13 +08:00
    很精致,收藏了~
    TangMonk
        19
    TangMonk  
       2019-09-15 22:32:31 +08:00
    日本哪个鼠标放在哪里都可以向下滑动,你这个要鼠标放在 colors 里面才能滑
    TristanYang
        20
    TristanYang  
    OP
       2019-09-15 22:32:58 +08:00
    @keith1126 谢谢 欢迎 star
    gavindexu
        21
    gavindexu  
       2019-09-15 23:02:31 +08:00 via iPhone
    0.0 选择色调(红黄绿…)时,
    背景不会跟着变色儿的吗?
    刷新以后才会有看到颜色、壁纸变更了。
    在 Chrome、Duckduck GO 里都没有变。

    加油~!
    TristanYang
        22
    TristanYang  
    OP
       2019-09-15 23:06:25 +08:00
    @TangMonk 这个交互见仁见智...
    TristanYang
        23
    TristanYang  
    OP
       2019-09-15 23:09:03 +08:00
    @gavindexu 额,这个是有意做成这样的,考虑到只是切换色系看看,并不想换具体哪个颜色,换色系时,左边的颜色集合也跟着变了,但上一个选中的还在,只有选中左侧具体哪个颜色,才会变。
    muayang
        24
    muayang  
       2019-09-15 23:15:45 +08:00 via iPhone   ❤️ 1
    已 star
    artandlol
        25
    artandlol  
       2019-09-15 23:22:21 +08:00 via Android   ❤️ 1
    @TristanYang 网上有那种颜色搭配的 摄影 画画正常都需要先搭配下颜色的 可以试下那些颜色
    TristanYang
        26
    TristanYang  
    OP
       2019-09-15 23:23:25 +08:00
    @muayang 谢谢 已发送铜币感谢
    FEDT
        27
    FEDT  
       2019-09-15 23:58:48 +08:00 via iPhone
    挺好看的
    Danswerme
        28
    Danswerme  
       2019-09-16 01:10:55 +08:00 via Android   ❤️ 1
    挺棒的,另外我记得上次有人在 v 站也发了个中国传统色,地址在这里。

    http://zhongguose.com/
    Ultraman
        29
    Ultraman  
       2019-09-16 06:49:54 +08:00 via Android
    @TristanYang https://i.loli.net/2019/09/16/85kXgms2Q7fTA4n.jpg
    就是这样,因为图片长宽比例和屏幕不一致,设置为壁纸时需要再次缩放裁剪,右下角的字这些就显示不完整了
    yazoox
        30
    yazoox  
       2019-09-16 08:24:52 +08:00 via Android
    点进去看,好像都是红色
    TristanYang
        31
    TristanYang  
    OP
       2019-09-16 08:49:45 +08:00 via iPhone
    @yazoox 右下角是切换色系的 有其他色系 😅
    levon
        32
    levon  
       2019-09-16 08:50:15 +08:00
    原站居然被重置,我 d 是不是有点太敏感了
    TristanYang
        33
    TristanYang  
    OP
       2019-09-16 08:55:14 +08:00 via iPhone
    @levon 好像确实需要翻墙 但是对程序员来说不算啥啦😅
    talen666
        34
    talen666  
       2019-09-16 09:01:29 +08:00
    日本网站打不开。。翻墙也打不开。。
    mingyuexin
        35
    mingyuexin  
       2019-09-16 09:01:47 +08:00   ❤️ 1
    不错,挺好的。 不过我觉得这个页面更好看些 http://zhongguose.com/
    zohar727
        36
    zohar727  
       2019-09-16 09:14:59 +08:00
    感觉可选的颜色没有日本那个多唉
    TristanYang
        37
    TristanYang  
    OP
       2019-09-16 09:21:55 +08:00 via iPhone
    @zohar727 数据做了分类,总量差不多。
    xh520630
        38
    xh520630  
       2019-09-16 09:37:58 +08:00
    真的好看 各种颜色 不过他是干嘛用的...就是查颜色吗
    godgc
        39
    godgc  
       2019-09-16 09:39:55 +08:00
    老哥复制功能是用什么做的?兼容性咋样?
    TristanYang
        40
    TristanYang  
    OP
       2019-09-16 09:41:10 +08:00
    @xh520630 哈哈 对于设计师来说 可能有点用 可以复制颜色 hex。普通用户来讲,美即功能,好像还有点用的地方是可以生成壁纸。右上角的下载那个按钮。
    star7th
        41
    star7th  
       2019-09-16 09:46:24 +08:00
    棒。做 app 或者网页的时候可以参考配色了
    TristanYang
        42
    TristanYang  
    OP
       2019-09-16 09:52:17 +08:00
    karnaugh
        43
    karnaugh  
       2019-09-16 09:52:31 +08:00
    做的真不错,棒棒哒
    richzhu
        44
    richzhu  
       2019-09-16 10:00:28 +08:00
    已 fork
    santom
        45
    santom  
       2019-09-16 10:07:47 +08:00
    已 star
    TristanYang
        46
    TristanYang  
    OP
       2019-09-16 10:15:06 +08:00 via iPhone
    @richzhu 谢谢
    TristanYang
        47
    TristanYang  
    OP
       2019-09-16 10:15:19 +08:00 via iPhone
    @santom 谢谢
    as94boy
        48
    as94boy  
       2019-09-16 10:15:56 +08:00
    可以,颜色蛮全的,可以使用。
    TristanYang
        49
    TristanYang  
    OP
       2019-09-16 10:16:16 +08:00 via iPhone
    @karnaugh 谢谢
    TristanYang
        50
    TristanYang  
    OP
       2019-09-16 10:16:47 +08:00 via iPhone
    @as94boy 谢谢 我的目标就是对设计师有一定的实用性
    TristanYang
        51
    TristanYang  
    OP
       2019-09-16 10:17:16 +08:00 via iPhone
    @star7th 谢谢 能帮到你我也很开心
    XiaoWangZhanzz
        52
    XiaoWangZhanzz  
       2019-09-16 10:29:49 +08:00
    支持下!!!!
    TristanYang
        53
    TristanYang  
    OP
       2019-09-16 10:35:30 +08:00 via iPhone
    jay3zhang
        54
    jay3zhang  
       2019-09-16 10:38:29 +08:00
    很漂亮,支持
    TristanYang
        55
    TristanYang  
    OP
       2019-09-16 10:51:35 +08:00 via iPhone
    @jay3zhang 谢谢 欢迎 star 支持
    Pillowl
        56
    Pillowl  
       2019-09-16 10:55:03 +08:00 via Android
    @TristanYang 如果后续能直接做一个壁纸软件我想是极好的,能自动更换壁纸那种~。
    marcong95
        57
    marcong95  
       2019-09-16 11:04:22 +08:00
    @TristanYang #22 但是我在 PC 端( Chrome 76.0.3809.132 )在颜色 list 外面滚动可以把整个页面滚动 20px 左右,这个应该是个 bug ?我审查元素点开看,好像没发现那个多出来地方有什么元素

    https://i.loli.net/2019/09/16/FTfjyv6z47nKYIB.png
    styang
        58
    styang  
       2019-09-16 11:10:54 +08:00
    挺好看的
    yongyang599
        59
    yongyang599  
       2019-09-16 11:18:02 +08:00
    中国色( http://zhongguose.com/) 很久之前发现的
    TristanYang
        60
    TristanYang  
    OP
       2019-09-16 11:29:28 +08:00
    @yongyang599 嗯 这个也是从日本那个网站得到的灵感 只是技术栈比较老旧了
    TristanYang
        61
    TristanYang  
    OP
       2019-09-16 11:29:48 +08:00
    @Danswerme 嗯 这个也是从日本那个网站得到的灵感 只是技术栈比较老旧了
    RockShake
        62
    RockShake  
       2019-09-16 11:50:03 +08:00
    确实挺漂亮的,赞一个
    E1n
        63
    E1n  
       2019-09-16 12:10:13 +08:00
    赞! star 一波
    E1n
        64
    E1n  
       2019-09-16 12:25:19 +08:00
    @TristanYang 老哥是服务器在国外,套了国内的 CDN 吗
    jdhao
        65
    jdhao  
       2019-09-16 12:29:09 +08:00 via Android
    Seaball0022
        66
    Seaball0022  
       2019-09-16 12:43:37 +08:00
    很好看,加油!
    LeeSeoung
        67
    LeeSeoung  
       2019-09-16 12:50:43 +08:00
    很好看 有心了
    TristanYang
        68
    TristanYang  
    OP
       2019-09-16 13:12:12 +08:00
    @E1n 阿里云的服务器
    TristanYang
        69
    TristanYang  
    OP
       2019-09-16 13:12:39 +08:00
    @LeeSeoung 谢谢 这几天的辛苦没白费 😋
    TristanYang
        70
    TristanYang  
    OP
       2019-09-16 13:12:50 +08:00
    @Seaball0022 谢谢 这几天的辛苦没白费 😋
    TristanYang
        71
    TristanYang  
    OP
       2019-09-16 13:13:04 +08:00
    @jdhao 谢谢 这几天的辛苦没白费 😋
    belin520
        72
    belin520  
       2019-09-16 13:13:17 +08:00   ❤️ 1
    建议:切换主色系的时候,可以默认切换到改色系的第一个颜色中。
    这样让用户得到对应的操作反馈
    TristanYang
        73
    TristanYang  
    OP
       2019-09-16 13:20:41 +08:00
    @belin520 谢谢,建议已采纳,修改部署了,已发铜币表示感谢。
    meetocean
        74
    meetocean  
       2019-09-16 13:26:16 +08:00
    切换颜色的功能很有意思。
    1una
        75
    1una  
       2019-09-16 13:50:27 +08:00 via Android
    还有一个 zhingguose.com 也可以考虑
    1una
        76
    1una  
       2019-09-16 13:50:48 +08:00 via Android
    zgw0
        77
    zgw0  
       2019-09-16 13:51:17 +08:00
    我也看到过那个项目, 很不错, 已 star
    Peikon
        78
    Peikon  
       2019-09-16 14:17:46 +08:00
    挺好奇不同颜色对应的色号是在哪查的?
    xuanli
        79
    xuanli  
       2019-09-16 14:20:00 +08:00
    之前就收藏过,star
    Pho3nix
        80
    Pho3nix  
       2019-09-16 14:21:50 +08:00
    原站我也特别喜欢,新站总感觉比原站厚重了一些
    TristanYang
        81
    TristanYang  
    OP
       2019-09-16 14:30:36 +08:00 via iPhone
    @Peikon 右上角的感叹号弹窗有备注数据来源
    TristanYang
        82
    TristanYang  
    OP
       2019-09-16 14:36:48 +08:00
    @Pho3nix 是的,UI 重构了,也加入了一些自己的想法
    zhangH258
        83
    zhangH258  
       2019-09-16 14:38:15 +08:00
    这个设计的是真的棒
    Exia
        84
    Exia  
       2019-09-16 14:41:39 +08:00
    感觉不错啊,突然有种自己想修改一波的感觉,加上自定义语句什么的。
    zhouyg
        85
    zhouyg  
       2019-09-16 14:44:46 +08:00
    好看!
    TristanYang
        86
    TristanYang  
    OP
       2019-09-16 14:45:03 +08:00   ❤️ 1
    @Exia Pull Request,或者 fork 自己改,都可以哈~
    TristanYang
        87
    TristanYang  
    OP
       2019-09-16 14:45:30 +08:00
    @zhangH258 谢谢,UI 是站在了别人的肩膀上优化了下,😀
    TristanYang
        88
    TristanYang  
    OP
       2019-09-16 14:45:42 +08:00
    @zhouyg 谢谢!
    Exia
        89
    Exia  
       2019-09-16 14:49:04 +08:00
    @TristanYang 哈,谢谢,后来又看了一下楼主你的博客,有点启发,先收藏了。
    yehuzi
        90
    yehuzi  
       2019-09-16 15:35:34 +08:00
    很漂亮
    TristanYang
        91
    TristanYang  
    OP
       2019-09-16 16:04:04 +08:00
    @yehuzi 谢谢 欢迎 star
    nodeny
        92
    nodeny  
       2019-09-16 16:16:12 +08:00
    哇,为啥玄色在我这里显示成暗红色
    Hermann
        93
    Hermann  
       2019-09-16 16:16:21 +08:00
    很好看,支持
    xuanbg
        94
    xuanbg  
       2019-09-16 16:28:42 +08:00
    金色不够深,银色不够亮
    samaxu
        95
    samaxu  
       2019-09-16 16:33:06 +08:00
    求加个改文字的功能,不知道有没有这种文字库
    TristanYang
        96
    TristanYang  
    OP
       2019-09-16 16:39:04 +08:00 via iPhone
    @samaxu 改文字?是指改文字的字体吗?还是文字的内容?
    lizz666
        97
    lizz666  
       2019-09-16 16:42:22 +08:00
    小米 pro。14 寸屏?反正下面有部分看不到,滚动条滚动距离不够
    lizz666
        98
    lizz666  
       2019-09-16 16:43:34 +08:00
    刷新下,底部那些看不到的文字又没有了
    Bairrfhoinn
        99
    Bairrfhoinn  
       2019-09-16 17:08:47 +08:00
    没有五彩斑斓的黑,哈哈,玩笑,勿怪......
    est
        100
    est  
       2019-09-16 17:10:28 +08:00
    老哥厉害了。看上去不错
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2764 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 13:35 · PVG 21:35 · LAX 05:35 · JFK 08:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.