資訊專欄INFORMATION COLUMN
摘要：最近組件庫支持了，并且做了功能的升級，文檔看這里下文不談?wù)撨@門技術(shù)，我打算從組件的設(shè)計(jì)以及一些細(xì)節(jié)來談?wù)劷M件庫這件事。組件細(xì)節(jié)舉幾個(gè)例子來談?wù)劷M件設(shè)計(jì)和細(xì)節(jié)固釘當(dāng)滾動條滑動，固釘元素劃出視界時(shí)候，我們希望它能仍然釘在那里，展示在視界內(nèi)。
最近組件庫 N3 支持了 vue 2.0 ，并且做了功能的升級， 文檔看這里 https://n3-components.github....
下文不談?wù)?vue 這門技術(shù)，我打算從組件的設(shè)計(jì)以及一些細(xì)節(jié)來談?wù)劷M件庫這件事。
UI組件庫是什么？
瀏覽器的UI組件是 web 程序中離用戶最近的功能性部件，交互基本都通過它們實(shí)現(xiàn)。
由于瀏覽器提供的原生組件數(shù)量有限，又存在很多限制，所以我們需要更豐富的ui組件來幫助我們的應(yīng)用突破邊界，更好的與用戶溝通。
隨著 web 的崛起，大量的網(wǎng)頁程序出現(xiàn)，各種組件也被設(shè)計(jì)出來，好的，用戶接受的，喜歡的組件設(shè)計(jì)被留下來，用戶覺得難用的，變扭的組件設(shè)計(jì)就被淘汰。
這些被留下來的，使用場景比較廣泛，功能性強(qiáng)，比較實(shí)用的組件們被放到了一起組成一個(gè)組件庫，1.方便我們使用 2.統(tǒng)一界面風(fēng)格 3.統(tǒng)一管理(維護(hù)和升級)
基礎(chǔ)組件
我以為基礎(chǔ)組件的功能已經(jīng)比較明確了，應(yīng)該有個(gè)規(guī)范，包括所需要實(shí)現(xiàn)的功能，接口以及表現(xiàn)等，組件開發(fā)者都按照這個(gè)規(guī)范開發(fā)，提高效率。
基礎(chǔ)組件是只有很明確的功能，他只完成他的使命，不應(yīng)該有太多主張。
組件細(xì)節(jié)
舉幾個(gè)例子來談?wù)劷M件設(shè)計(jì)和細(xì)節(jié)
固釘: 當(dāng)滾動條滑動，固釘元素劃出視界時(shí)候，我們希望它能仍然釘在那里，展示在視界內(nèi)。實(shí)現(xiàn)可能就是監(jiān)聽滾動事件，然后設(shè)置元素的定位，當(dāng)元素設(shè)置為 position:fixed 的時(shí)候，由于其脫離文檔流，頁面的其它元素可能會上移，那在原來的位置放置一個(gè)同樣高寬的占位元素就能避免抖動。
按鈕：按鈕的設(shè)計(jì)是擬物而來，但是隨著扁平化設(shè)計(jì)流行已久，現(xiàn)在的按鈕基本已經(jīng)被拍扁，用戶也已經(jīng)習(xí)慣。N3 也是遵從扁平化的設(shè)計(jì)，但在按鈕上，我給他的按壓狀態(tài)添加了內(nèi)部陰影，試圖營造一種軟按鈕的按壓效果，看起來不那么扁平。
時(shí)間選擇: 在 N3 中，時(shí)間選擇器用了一個(gè)滑塊的設(shè)計(jì)，我承認(rèn)這是一個(gè)低效的設(shè)計(jì)，直接用數(shù)字的滾動能讓用戶更快達(dá)到目的。在鐘表中，轉(zhuǎn)動旋鈕來撥動指針，那是我會很仔細(xì)，因?yàn)椴蝗菀住r(shí)間選擇是個(gè)得出精確值的操作，希望借此提醒用戶慎重操作，也讓過程不那么無趣。
以上是我在寫 N3 過程中的一些想法, N3 還需要不斷完善， 也會繼續(xù)和大家一起交流分享。
感謝 @x-cold , @Dafrok ,@chanyying 三位對 N3 做出的貢獻(xiàn)
2017 大家一起加油: )
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116451.html
摘要：最近組件庫支持了，并且做了功能的升級，文檔看這里下文不談?wù)撨@門技術(shù)，我打算從組件的設(shè)計(jì)以及一些細(xì)節(jié)來談?wù)劷M件庫這件事。組件細(xì)節(jié)舉幾個(gè)例子來談?wù)劷M件設(shè)計(jì)和細(xì)節(jié)固釘當(dāng)滾動條滑動，固釘元素劃出視界時(shí)候，我們希望它能仍然釘在那里，展示在視界內(nèi)。 最近組件庫 N3 支持了 vue 2.0 ，并且做了功能的升級， 文檔看這里 https://n3-components.github.... 下文不...
摘要：最近組件庫支持了，并且做了功能的升級，文檔看這里下文不談?wù)撨@門技術(shù)，我打算從組件的設(shè)計(jì)以及一些細(xì)節(jié)來談?wù)劷M件庫這件事。組件細(xì)節(jié)舉幾個(gè)例子來談?wù)劷M件設(shè)計(jì)和細(xì)節(jié)固釘當(dāng)滾動條滑動，固釘元素劃出視界時(shí)候，我們希望它能仍然釘在那里，展示在視界內(nèi)。 最近組件庫 N3 支持了 vue 2.0 ，并且做了功能的升級， 文檔看這里 https://n3-components.github.... 下文不...
摘要：引言組件中有很多彈出式組件，常見的如，以及等。這樣一種層次結(jié)構(gòu)在實(shí)踐中大大降低了各類彈層組件的實(shí)現(xiàn)和維護(hù)成本。但是的組件實(shí)現(xiàn)了一個(gè)大多數(shù)組件庫都沒有實(shí)現(xiàn)的功能彈層的嵌套處理。 引言 UI 組件中有很多彈出式組件，常見的如 Dialog，Tooltip 以及 Select 等。這些組件都有一個(gè)特點(diǎn)，它們的彈出層通常不是渲染在當(dāng)前的 DOM 樹中，而是直接插入在 body （或者其它類似的...
摘要：按信息熵的觀點(diǎn)這種模式對熵的降低最大。但是，這將增加處理程序的復(fù)雜性，程序并不能輕松的自動處理，或者要將多對多關(guān)聯(lián)分解成純粹的和有其他數(shù)據(jù)的兩種模式。模式是普遍存在的，從到。 4月份遺漏了一篇，這篇算是補(bǔ)充。 此文并非對設(shè)計(jì)模式的總結(jié)，而是要談?wù)勔话愕木幋a風(fēng)格，找設(shè)計(jì)模式的朋友可以移步了。 什么是模式？我搜到一個(gè)簡短的解釋：模式是指從生產(chǎn)經(jīng)驗(yàn)和生活經(jīng)驗(yàn)中經(jīng)過抽象和升華提煉出來的核...
閱讀 1255·2023-04-25 18:57
閱讀 2142·2023-04-25 16:28
閱讀 3947·2021-11-24 09:39
閱讀 3641·2021-11-16 11:45
閱讀 1831·2021-10-13 09:40
閱讀 1272·2019-08-30 15:52
閱讀 1725·2019-08-30 10:57
閱讀 671·2019-08-29 16:55
