組件設計漫談

最近組件庫 N3 支持了 vue 2.0 ，而且作了功能的升級， 文檔看這裏 https://n3-components.github....

下文不談論 vue 這門技術，我打算從組件的設計以及一些細節來談談組件庫這件事。

UI組件庫是什麼？
瀏覽器的UI組件是 web 程序中離用戶最近的功能性部件，交互基本都經過它們實現。

因爲瀏覽器提供的原生組件數量有限，又存在不少限制，因此咱們須要更豐富的ui組件來幫助咱們的應用突破邊界，更好的與用戶溝通。

隨着 web 的崛起，大量的網頁程序出現，各類組件也被設計出來，好的，用戶接受的，喜歡的組件設計被留下來，用戶以爲難用的，變扭的組件設計就被淘汰。

這些被留下來的，使用場景比較普遍，功能性強，比較實用的組件們被放到了一塊兒組成一個組件庫，1.方便咱們使用 2.統一界面風格 3.統一管理(維護和升級)

基礎組件

我覺得基礎組件的功能已經比較明確了，應該有個規範，包括所須要實現的功能，接口以及表現等，組件開發者都按照這個規範開發，提升效率。

基礎組件是隻有很明確的功能，他只完成他的使命，不該該有太多主張。

組件細節

舉幾個例子來談談組件設計和細節

固釘: 當滾動條滑動，固釘元素劃出視界時候，咱們但願它能仍然釘在那裏，展現在視界內。實現可能就是監聽滾動事件，而後設置元素的定位，當元素設置爲 position:fixed 的時候，因爲其脫離文檔流，頁面的其它元素可能會上移，那在原來的位置放置一個一樣高寬的佔位元素就能避免抖動。

按鈕：按鈕的設計是擬物而來，可是隨着扁平化設計流行已久，如今的按鈕基本已經被拍扁，用戶也已經習慣。N3 也是聽從扁平化的設計，但在按鈕上，我給他的按壓狀態添加了內部陰影，試圖營造一種軟按鈕的按壓效果，看起來不那麼扁平。

時間選擇: 在 N3 中，時間選擇器用了一個滑塊的設計，我認可這是一個低效的設計，直接用數字的滾動能讓用戶更快達到目的。在鐘錶中，轉動旋鈕來撥動指針，那是我會很仔細，由於不容易。時間選擇是個得出精確值的操做，但願藉此提醒用戶慎重操做，也讓過程不那麼無趣。

以上是我在寫 N3 過程當中的一些想法, N3 還須要不斷完善， 也會繼續和你們一塊兒交流分享。

感謝 @x-cold , @Dafrok ,@chanyying 三位對 N3 作出的貢獻

2017 你們一塊兒加油: )