组件设计漫谈

最近组件库 N3 支持了 vue 2.0 ,而且作了功能的升级, 文档看这里 https://n3-components.github....vue

下文不谈论 vue 这门技术,我打算从组件的设计以及一些细节来谈谈组件库这件事。git

UI组件库是什么?
浏览器的UI组件是 web 程序中离用户最近的功能性部件,交互基本都经过它们实现。github

因为浏览器提供的原生组件数量有限,又存在不少限制,因此咱们须要更丰富的ui组件来帮助咱们的应用突破边界,更好的与用户沟通。web

随着 web 的崛起,大量的网页程序出现,各类组件也被设计出来,好的,用户接受的,喜欢的组件设计被留下来,用户以为难用的,变扭的组件设计就被淘汰。浏览器

这些被留下来的,使用场景比较普遍,功能性强,比较实用的组件们被放到了一块儿组成一个组件库,1.方便咱们使用 2.统一界面风格 3.统一管理(维护和升级)ui

基础组件设计

我觉得基础组件的功能已经比较明确了,应该有个规范,包括所须要实现的功能,接口以及表现等,组件开发者都按照这个规范开发,提升效率。指针

基础组件是只有很明确的功能,他只完成他的使命,不该该有太多主张。component

组件细节接口

举几个例子来谈谈组件设计和细节

固钉: 当滚动条滑动,固钉元素划出视界时候,咱们但愿它能仍然钉在那里,展现在视界内。实现可能就是监听滚动事件,而后设置元素的定位,当元素设置为 position:fixed 的时候,因为其脱离文档流,页面的其它元素可能会上移,那在原来的位置放置一个一样高宽的占位元素就能避免抖动。

按钮:按钮的设计是拟物而来,可是随着扁平化设计流行已久,如今的按钮基本已经被拍扁,用户也已经习惯。N3 也是听从扁平化的设计,但在按钮上,我给他的按压状态添加了内部阴影,试图营造一种软按钮的按压效果,看起来不那么扁平。

时间选择: 在 N3 中,时间选择器用了一个滑块的设计,我认可这是一个低效的设计,直接用数字的滚动能让用户更快达到目的。在钟表中,转动旋钮来拨动指针,那是我会很仔细,由于不容易。时间选择是个得出精确值的操做,但愿借此提醒用户慎重操做,也让过程不那么无趣。

以上是我在写 N3 过程当中的一些想法, N3 还须要不断完善, 也会继续和你们一块儿交流分享。

感谢 @x-cold , @Dafrok ,@chanyying 三位对 N3 作出的贡献

2017 你们一块儿加油: )

相关文章
相关标签/搜索