元件設計漫談

最近元件庫 n3 支援了 vue 2.0 ，並且做了功能的公升級，文件看這裡

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

ui元件庫是什麼？

瀏覽器的ui元件是 web 程式中離使用者最近的功能性部件，互動基本都通過它們實現。

由於瀏覽器提供的原生元件數量有限，又存在很多限制，所以我們需要更豐富的ui元件來幫助我們的應用突破邊界，更好的與使用者溝通。

隨著 web 的崛起，大量的網頁程式出現，各種元件也被設計出來，好的，使用者接受的，喜歡的元件設計被留下來，使用者覺得難用的，變扭的元件設計就被淘汰。

這些被留下來的，使用場景比較廣泛，功能性強，比較實用的元件們被放到了一起組成乙個元件庫，1.方便我們使用 2.統一介面風格 3.統一管理(維護和公升級)

基礎元件

我以為基礎元件的功能已經比較明確了，應該有個規範，包括所需要實現的功能，介面以及表現等，元件開發者都按照這個規範開發，提高效率。

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

元件細節

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

固釘: 當滾動條滑動，固釘元素劃出視界時候，我們希望它能仍然釘在那裡，展示在視界內。實現可能就是監聽滾動事件，然後設定元素的定位，當元素設定為 position:fixed 的時候，由於其脫離文件流，頁面的其它元素可能會上移，那在原來的位置放置乙個同樣高寬的佔位元素就能避免抖動。

按鈕：按鈕的設計是擬物而來，但是隨著扁平化設計流行已久，現在的按鈕基本已經被拍扁，使用者也已經習慣。n3 也是遵從扁平化的設計，但在按鈕上，我給他的按壓狀態新增了內部陰影，試圖營造一種軟按鈕的按壓效果，看起來不那麼扁平。

時間選擇: 在 n3 中，時間選擇器用了乙個滑塊的設計，我承認這是乙個低效的設計，直接用數字的滾動能讓使用者更快達到目的。在鐘錶中，轉動旋鈕來撥動指標，那是我會很仔細，因為不容易。時間選擇是個得出精確值的操作，希望藉此提醒使用者慎重操作，也讓過程不那麼無趣。

以上是我在寫 n3 過程中的一些想法, n3 還需要不斷完善，也會繼續和大家一起交流分享。

感謝 @x-cold , @dafrok ,@chanyying 三位對 n3 做出的貢獻

2017 大家一起加油: )