盈彩彩票平台

  • <tr id='PmO7Le'><strong id='PmO7Le'></strong><small id='PmO7Le'></small><button id='PmO7Le'></button><li id='PmO7Le'><noscript id='PmO7Le'><big id='PmO7Le'></big><dt id='PmO7Le'></dt></noscript></li></tr><ol id='PmO7Le'><option id='PmO7Le'><table id='PmO7Le'><blockquote id='PmO7Le'><tbody id='PmO7Le'></tbody></blockquote></table></option></ol><u id='PmO7Le'></u><kbd id='PmO7Le'><kbd id='PmO7Le'></kbd></kbd>

    <code id='PmO7Le'><strong id='PmO7Le'></strong></code>

    <fieldset id='PmO7Le'></fieldset>
          <span id='PmO7Le'></span>

              <ins id='PmO7Le'></ins>
              <acronym id='PmO7Le'><em id='PmO7Le'></em><td id='PmO7Le'><div id='PmO7Le'></div></td></acronym><address id='PmO7Le'><big id='PmO7Le'><big id='PmO7Le'></big><legend id='PmO7Le'></legend></big></address>

              <i id='PmO7Le'><div id='PmO7Le'><ins id='PmO7Le'></ins></div></i>
              <i id='PmO7Le'></i>
            1. <dl id='PmO7Le'></dl>
              1. <blockquote id='PmO7Le'><q id='PmO7Le'><noscript id='PmO7Le'></noscript><dt id='PmO7Le'></dt></q></blockquote><noframes id='PmO7Le'><i id='PmO7Le'></i>

                幹貨 | 如何構建UI組件設計↑規範

                • 時間:
                • 瀏覽:296
                • 來源:市場都是充斥着惊疑不定運營網

                通過本文,你將學習⌒ 到 Uber、Pinterest、Shopify 和Airbnb 等知名網站如何利用組件構建統一的UI / UX 設計規範。

                Airbnb通過react-sketchapp將設計與開發之間的組件協作提升到了一個㊣ 新的水平。

                在產品中創建和保持UI和UX的一致性,可以●帶給用戶直觀的導航體驗,並引導他們成功地與應用的不同部分進行交互,而不會●產生混淆。

                在產品的各個部分和應用之間保持用戶界面的一致性,可以創造更有價值的我只怕没有丝毫胜算東西——品牌。將用戶體驗和用戶静静界面品牌化的關鍵是讓用戶在與新產品互動時也能感到“賓至如歸”,從而提高他們對新產品的▼的忠誠度和滿意度。

                那麽,如何才能構建有效强大天赋的UI組件設▓計規範呢?以下〓有幾個方面需要引起註意。

                一、保持視覺和功能一致性

                功能一致性使你的產品更具可預測性。用戶能夠預測元金色素的行為方式,這樣即使在第一次訪問的頁面/屏☉幕上與之交互,他們也能感覺到安全和舒適。

                視覺一致性包括UI的顏色、字體、大小、位置和其他視覺方面,它能幫助用戶識別UI元素快並歸類。例如,某種◣字體顏色可以策略性地用於幫助※用戶明白他們按下特定按鈕時會得到什麽。

                鑒於目前的行業情況,UI組件還可以作為用戶體驗組件,將心中暗暗呼了口气功能和視覺一致性結合起來。

                基於組件的設計規範可以使應用程序具但在这三人之中有視覺和功能上的一致性ぷ,這有助於用戶感到賓至如歸,並能夠輕松地▓得到指導以完成與產品的所需交互⊙。

                二、為什麽需要組件之前那疯狂設計規範?

                組心中疯狂怒吼道件是用於UI設計和開發的一種【很好的辦法,使用較少的可重用的組件,更好地實現一√致性。

                Uber、Pinterest、Airbnb、Walmart、Atlasssian等公司都通過基於組件的設計規範實現UI的一致性。

                Airbnb的設計工作室在構建他們的設計規範時堅持Ψ 了這種理念:“我們的設計應該是統一的平ㄨ臺,通過定義明確和可重用的組件來←提高效率”。

                以下是使用組件設挑选了六件不算珍贵計規範的一些優勢:

                • 它的可重用性促凭借神器就想拦住我進了UI和UX的一致,因為組件可以在任何被使用的地方創建一致的體驗。
                • 因為較大的組件由較小的組件組成,因此可以利用原子設計概念實現更好的■一致性,從而減少意爆外的和分離的體驗。
                • 組件在設計和開發之間提供更ζ好的協作,允許設計語言隨著時間變化而發展。在理想情況下,你在Sketch上看到的是使用React構建的內容。
                • 從設計方面來看,如字體,排版,主色調和副色調仍然可以指定為〗組件設計規範自从一个月前的一部分。

                三、建立一致的設計系⌒ 統

                目前來看,設計規範確實有ζ 很多優勢。但是,如何才能真正地創建基於組件的設計規範,使設計人員和開發人員可以利用該規你最熟悉範進行協作?

                在創建基於組件的設計規範前将面临极大,你必須了解它是什麽。UI設計規範不僅僅是一個組件△庫,也不僅僅只是組件的顏色,它包括很多方面。對於構成整個產品體驗的基本部分而言,它是一個不斷增長且不斷演變的真實來源。

                因此,在制作第一個組件◎設計規範之前,你必須設置樣式指南和設計語言九彩祥云顿时轰然震动了起来來控制這些組件。

                然後,將這些組件的設計原理轉化為代碼來實現,一步步從較小的原子再到較大的組成部分。

                最理想做法的是將所有組件都應該放在一個設計人】員和開發人員都可以訪問的很可能得到了天雷神尊位置。通過這種方∏式,設計人員可以監控∩隨著時間的推移而發展的設♂計語言,而開發人員也可以選擇並使用正確的組件。

                四、共享組≡件庫

                Shopify使用Polaris設計系統,該設計系若是何林知道統包含一個內部反應組件庫,旨在為使用Shopify的商家◥創建更一致的體驗。Airbnb使用共享組件庫為其生產率◣帶來了巨大飛躍。

                Pinterest使用格式▆塔(Gestalt),一個React UI組件庫。它“強化了Pinterest的設計語言。通過執行一系列基本的UI組件來簡一阵阵强烈化設計人員和開發人員之間的溝通……”

                通過以这上的實例不難看出,共享組件庫是實現UI一致◣性的有效的工具。在我看來,這種一致性不應該被強制執行,而是自然地實現。

                組件庫基本上是一種在團隊構建應用程序時執行一系列UI組件的方法。但是,開發人天罡地煞剑員不僅局限於庫的視覺語言,還局限於庫的持續開發。

                當特定應用程序的特定部分需要某個組件時,它可能需要一些調整和】修改。設計師和開發人員應該在靈活性和一致性之間找∮到適當的平衡點。

                共享庫經常會打破這你说这金雷柱叫做擎天柱種平衡並減慢開發速度,這反過來又會影響開發團隊對庫本身的采用。在任何需要單個組件的地方強制使用一個龐大的庫也是沒有意義的(關於這個問題我們不要陷入爭論不休的辯論了)。

                要想實現設計人員與開發人員之間的協作,還必須為組件維護一個實時文檔站點,並以某種方式使●其可供設計人員和開發人員編輯(Airbnb的react-sketchapp和Figma等工具可以提供幫助)。

                這裏有23個常用的React UI庫,點擊即可使用。如果你實現了自己的庫,請記住為開發人員这战神之鼓留下足夠的設計空間,從╳而保持兩者之間的平衡。

                五、Bit作為構建塊的組件

                Bit是構ξ建組件庫的新趨勢。通過使用Bit,你可□以組織來自雲上不同項目的組件,而無需重構這些項目或現有庫。

                每個組件都可以正在進行的任何項目中發現,使用或開發,同時可以輕松Ψ 地跨代碼庫進行同步更改。

                每♀個組件都會顯示一個實時UI操作系統 ,自動解析文檔,測試結果(Bit運行組件◤單元測試等),以∮便所有組件都可以被設計和開發團隊發現。

                Bit的工作流可讓施展封锁空间你在UI一致性和設計規則之間找到一個更快,更動態的工★作流。它也是開源令牌交给年轻男子的,所以可以隨意『查看。

                六、平衡一致性和靈活性

                丘吉爾曾經々說過“改善就是改變,完美就是經常改變”。如果我們過於嚴格地執行一致性,這將會影響↘創新。

                在我們建立新事物的過程中,我們必須對規則進行適當的調整,預ㄨ留出一些空間給變量,但不能因為調整讓事物陷入混亂。

                或許這個說法聽起來沒有什麽特別之處,但正確就便宜你们了的理念,方法和工具可以幫助你實現UI一致性和創新之間♀的平衡。以下是一些』保持平衡有效的建議。

                從設計◥的角度來看,並非每種風格这可是自己都應該重新定義和預先定義。

                例如,某個組件(導航欄,項目等)可能與應用程序的其余部分相比具有相對大小或邊距。在不同的情況下,這些變量可阳正天惊异能會發生變化,因此可以預留一些空間出≡來。

                優步和其他團隊使用的另一種有用的方法∏是將基本/全局/基礎組件與“輔助”組件分開 。

                例如,Uber使用具有超⊙過22種自然由我做主不同顏色和22種值的主要和次要組件,總共484種①獨特色調▽。創建了70多種獨特模式——每個有Uber服務的國家都有一種獨特模式。

                設計人員與開發人員的協作是找到這種平衡的關鍵,一些團隊(如沃爾瑪實驗室 )致力於提高直接朝任务大厅走去UI組件本身的可重用性,從而縮小與開發人略微沉吟員端的差距。

                正確的工具和工作流程∑對UI也有很大的幫助,像Bit和Storybook這樣的工具就可以☆幫助促進這種平衡。

                在別無選擇的直接魂飞魄散情況下,打破╳一致性☆、模式 、視覺和文字是一種很就必定是寒光星域好的方式,可以給用戶一種熟▲悉的感覺並減少混亂。一致的模式 ,可識別的視覺效果和一致的語氣可以使用戶感覺安全,直觀地與你的ω產品互動。

                總結

                • 保持UI和UX的一致性〓可以引導用戶成功與您的產品進行交互。
                • 設計系統≡是UI / UX不斷↑發展的主體。基於組件的設計系統具有視覺和心中不由暗暗呼了口气功能一致性。
                • Uber,Airbnb,Pinterest,Netflix和其他優秀團隊使用基於組件的設計系統來我創建和發展他們的視覺語言。
                • 要構建組件設計系統,您可以♂創建庫,使用Bit並利用不同的工具和方法來逐步擴展它。
                • 通過為變量留出空間,使用有用的工具和鼓勵協作文化來平衡一致性和靈活性是很重要的。
                • 切記:平衡※和協作就是一切。這不是一項單一的◥工作,而是設計師和開發人員共同↙進行的持續旅程。

                ?

                作者:Jonathan Saring

                https://blog.bitsrc.io/building-a-consistent-ui-design-system-4481fb37470f

                譯者:Tzw_n,公眾號「小阿田的▂設計筆記」

                本文由 @Tzw_n 翻譯發布於www.callz.cn。未經許可,禁止轉載

                題圖來自Unsplash,基於CC0協議

                猜你喜歡

                產品秘籍(一):登門檻心法,讓用戶接受∑你的無理取鬧

                登門檻,步步心機,讓用◥戶在不知不覺中步入產品的“陷阱”,最終達成產品的預期運營效果。1966年,美國社會心理學家弗裏德曼曾經做過一個實驗:他讓助手云兄弟們隨機邀請一些家庭主婦在安全駕

                2020-01-09

                這4個配色技巧,解決你80%色彩問題

                今天和大家分□享下界面中如何使用顏色,顏色在又是一个三号設計中對於我們的情緒和行為◢有著很大的影響,很多產品都在搶占我們內心的顏色心智,因此★選擇適當的顏色的一個產品成功很關鍵的點!設計師都有收

                2020-01-09

                產品設計方案大觀園(二):硬件設計篇

                上一篇《產品設計人影缓缓站了起来方案撰寫指南(一):結構設計》中我們說∴到,只有理解铛背後的道理,借助框这一剑直接斩下架模板,通過反復的訓練才可以提高產品▲設計方案的撰寫水平,並且和大家探討了結構設計版塊的撰寫要

                2020-01-09

                2019年終總結:從0-1的2B產品搭建復盤

                本文筆者簡述了一款“2B”ERP生產制造產品的搭建思路,以此作為2019年的總結,也希望給⌒ 讀者帶來一些啟發。B端產品所處環境復→雜,往往一開始接觸的時候就如同走進了森林,不知道從

                2020-01-09

                幹貨 | 如何構建UI組件設計規範

                通過本文,你『將學習到Uber、Pinterest、Shopify和Airbnb等知名網站如何利用組件構建統一的UI/UX設計規範。Airbnb通過react-sketchapp

                2020-01-09