hana-ui - 一个清新二次元风格的 React-UIKit

[dtysky]

hana-ui(官网，Github)是一个二次元清新风格的 React-UIKit，使用 ES6+SASS+Typescript 开发，拥有丰富的组件用以构建复杂前端界面系统，目前已在 Bilibili 管理后台和一些前端页面进行了应用。

有兴趣的来点个Star吧 www

初心

这个项目是在 B 站完成的，完成者是我和另外两个同事，其名字源于我和其中一位同事的一次饭后讨论，死宅嘛，总想要搞出一些东西为二次元啊业界啊做出些贡献，于是便有了这个 UIKit，懂行的人一看hana-ui这个名字大概也就明白这个库是什么风格了。

其实不严格来说，这个项目在去年五月份差不多就完全完成并投入使用了，但由于公司等原因一直没有开发出来，而在这空闲的几个月我们将其升级到了 React16，并添加了一些新的特性，并进一步完善了官网和文档。

定位

定位方面，由于我们团队都比较务实，比较讨厌现在吹来吹去的所谓“ Design Language ”，所以定位也就是一个单纯的 React 用 UIKit，一个 UI 组件库。

设计

基本 UIKit 应该有组件的都有了。组件分为种子（ seeds ）、芽（ burgeon ）和花（ flower ）三部分，复合性层层递增。

风格方面，主题可配置，默认走清新风格。

代码方面。主代码走一套 ES6 加上一套 Eslint （项目开始的时候还没上 Typescript ），不过补上了一套 ts 头可以和 Typescript 兼容。

测试暂时没有，但在复杂工程中过了很久了所以也算是得到了最好的测试。关于纯前端视图层的单元测试必要性问题这个见仁见智，我的观点是模型可以测，视图方面测试纯属吃力不讨好。

请帮助我们！

不过想必大家也发现了，现在 UIKit 整体的设计有些地方还有些糙，这个我们也很无奈。我不知道公司如何定位我们这个组件库，当时（现在也是）处于弱势的我们部门并没有为这个组件库争取到设计资源，所以设计也是我们三个自己操刀的。

让前端来做设计嘛，和让设计来写前端差不多，做到这样我们已经尽力了，所以在这里如果有专业的设计师死宅同学给出帮助我们是再欢迎不过了。

不过由于不被重视，所以这个库的开源和 B 站毫无关系，完全是hana-group自行维护，自由度也高一些。

二次元本就是一个去中心化的创作集群，由无数有爱人士共同贡献，在这一点上 hana-ui 也是一样的。
个人力量毕竟有限，所以希望大家能积极参与！

[iyour]

看了一下还是很不错的，支持！

[xmsz]

说真的 小弟真的不是很懂这样的风格
不过加油
还有是 TypeScript 不是 Typescript

[sw0rd3n]

赞一个 已 star

[shisya]

想不到能在这边看到 kf 的大佬 233
已 star

[AX5N]

感觉好粗糙，就像是我的粗糙审美的升级版。
我们的区别在于我不写前端，而你把它给写出来了。

[frozenthrone]

不懂欣赏这种风格

[u14e]

B 站不是主用 vue 吗？

[keller]

这就二次元了？

[longaiwp]

二次元，二次元.jpg

[oliviazhang]

你好，首先交互的地方有点问题哦~
比如说首页的四叶草后面其实还有好几块内容，如果不是偶尔滑动了鼠标，其实很难发现。如果做一个小箭头之类的图标提示，可能会更好。“文档”模块里的展开按钮是雪花的图形，可能不具备太多的指示性，可以小字标注一下。无法保证内容被看到，花费了很多心血就没有意义啦

然后字体排版方面也可以优化一下。
首页的正文文字小一点，行间距高一点会更精致。其他页面里文字的字号有点多，显得凌乱，其实标题和副标题用粗体或者改颜色都能很好强调出来。正文内容的行字符数少掉 1/4 左右读起来会更省力，左边的留白再松一点更整齐。文本背景的透明度有点高啦，影响阅读。

配色方面
首页的几块内容可以尝试调高颜色的饱和度，降低明度，说白了就粉嫩一点，不过不一定有用因为背景色相。文字的投影不建议直接用黑色，使用比背景颜色略深的颜色即可。

暂时这样，希望能帮到你一点~

[dtysky]

@oliviazhang 多谢建议 www 我参照着修改看看