中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：設(shè)計細節(jié)對于B端產(chǎn)品的設(shè)計來說十分重要，本篇文章作者結(jié)合自身工作經(jīng)驗分享了B端產(chǎn)品組件的設(shè)計細節(jié)以及經(jīng)驗的分享，講述了不同場景下組件設(shè)計的注意點等，感興趣的一起來看一下，希望對你有幫助。

本文源于讀者和粉絲的提問，以及我前段時間在做 Ant Design 設(shè)計與運營工作中的經(jīng)驗沉淀和總結(jié)，希望對你有幫助。

一、Question1 按鈕的狀態(tài)設(shè)計

有同學對我說，他看到有的平臺按鈕的狀態(tài)分為鼠標 “懸?！薄ⅰ包c擊” 和“按下”三個樣式。

有的平臺的按鈕 “點擊”和 “按下” 的狀態(tài)一致。所以按鈕的狀態(tài)是根據(jù)什么來做定義的呢？

其實關(guān)于按鈕的狀態(tài)分類，在能夠給用戶基本操作反饋的前提下，并沒有絕對的好壞之分。平臺之間出現(xiàn)這些差別的原因是由設(shè)計系統(tǒng)的設(shè)計理念和風格來決定。

舉個例子，下圖是一個比較夸張的案例：某個組件系統(tǒng)的設(shè)計理念是【盡可能模仿真實世界中的交互狀態(tài)】，圖中按鈕模仿的就是真實世界中的物理按鈕反饋狀態(tài)。

但由于頁面上的二維世界不具備三維世界中的“海拔/高度”的概念，所以更多是通過改變或增加顏色、動效、投影等，對按鈕進行“高度”的體現(xiàn)。

對于真實世界的按鈕，有一些關(guān)鍵的大按鈕，在按下去之后會有一種“咔嗒” 的碰觸感，意在告訴用戶你已經(jīng)成功按下了按鈕，這對應到二維世界，就是圖中按鈕的“點擊“的效果。

而物理世界的按鈕在按完之后雖然會彈回到原位，但很有可能是慢慢恢復到原位，也很有可能是不會回到 100% 的原位，比原位稍微矮一些。

所以圖中點擊后的狀態(tài)相比于默認狀態(tài)就缺少了按鈕下邊緣的厚度感，或者是顏色變得更淺 / 更深，以此來體現(xiàn)差異。

以上所說的組件設(shè)計風格，是一種擬真的設(shè)計風格。也有一些公司的設(shè)計語言，可能是扁平化，追求極簡主義，所以會省略這當中的過程，只傳達給用戶最干脆、直接的反饋。

因此組件的狀態(tài)效果，在能夠給用戶明確基本操作反饋的前提下，并不是 “對錯” 或“好壞”的問題，而是由根據(jù)產(chǎn)品定位、功能特性和產(chǎn)品用戶的行為偏好等因素來定的設(shè)計理念所決定的。

二、Question2 組件的更新需要經(jīng)歷哪些過程

很多同學問我，一款組件庫的更新流程是怎么樣的？其實組件庫的建設(shè)和優(yōu)化工作沒有絕對的標準，只有適合自己團隊的工作流程，才是真正有效和實用的。

就我個人經(jīng)驗來看，如果是目前已經(jīng)發(fā)展得比較穩(wěn)定的組件庫，小的修改和優(yōu)化可以周 / 月為單位進行迭代，大的優(yōu)化和升級則是以年為單位。

但具體到其中的每一個組件，其通用的優(yōu)化流程一般會被歸納成五個步驟：

1. STEP1. 搜集

「搜集」指的是發(fā)現(xiàn)組件的問題點和優(yōu)化需求，這些問題和需求可能來源于：

設(shè)計師 / 開發(fā)在使用組件做業(yè)務(wù)時發(fā)現(xiàn)的問題；

設(shè)計師 / 開發(fā)發(fā)現(xiàn)其他優(yōu)秀的組件庫案例中有值得借鑒之處；

產(chǎn)品的用戶反饋某些功能或局部模塊在使用時體驗不好；

如果你做的是公共使用的開源組件庫（比如 Ant Design），也會有組件庫的用戶（通常也是設(shè)計師/ 開發(fā)）反饋相關(guān)的優(yōu)化需求和問題。

如果你希望你的組件庫可以與時俱進、可以真的賦能產(chǎn)品，定期搜集這些問題是很有必要的。

2. STEP2. 探究

「探究」指的是對你上一步搜集到的問題進行定義和分析。你需要判斷這些需求的真?zhèn)魏洼p重緩急。

對于真正需要優(yōu)化的組件需求，就可以開始進入分析和調(diào)研階段，通過學習競品、研讀文章、與有經(jīng)驗的設(shè)計師交流討論、做 AB Test、用戶調(diào)研等方法，研究需求的解決方案。

3. STEP3. 設(shè)計

「設(shè)計」是先由設(shè)計師提出組件優(yōu)化的解決方案，產(chǎn)出優(yōu)化后的組件設(shè)計稿，組織團隊中的其他相關(guān)成員（包括開發(fā)）對方案進行驗證和評審。

評審一致通過后，就可以進入組件的代碼開發(fā)階段。

4. STEP4. 開發(fā)

「開發(fā)」是由開發(fā)按照組件的設(shè)計優(yōu)化方案落實到代碼，制作完成通用組件。在這一過程中如果想要提效，也可以使用 Design Tokens 做為設(shè)計和開發(fā)的溝通方式。

5. STEP5.發(fā)布

「發(fā)布」包括兩部分內(nèi)容：補充和編寫組件更新后的使用規(guī)范，以及提醒相關(guān)成員更新事項。要做到所有成員的使用版本保持最新和統(tǒng)一。

組件庫的更新和迭代的時間不宜過于頻繁，小的修改和優(yōu)化，比如組件的局部細節(jié)調(diào)整、次要顏色的色號更新等可以以周 / 月為單位進行統(tǒng)一迭代。

大的優(yōu)化和升級，比如設(shè)計風格更新導致的主題色、圓角、交互形式的優(yōu)化則是以年為單位。

三、Question3「卡片」應該怎么使用

最近有同學問我，為什么有的 App 里有的頁面用卡片，有的頁面不用？團隊中的設(shè)計師在網(wǎng)上看了好多文章也沒有統(tǒng)一認識，到底什么時候應該用卡片、什么時候不用？

對于這類問題，我的回答是：形式追隨功能。要想知道這個組件什么時候使用，你就先要知道這個組件的定義和功能。

通常來說，卡片的定義為：一種最基礎(chǔ)的容器，可以承載文字、圖片、鏈接等多種元素?？ㄆ闹饕δ苡幸韵聨c：

1. 用于歸類和分類

相關(guān)的內(nèi)容，可以被一張卡片作為容器所承載，將圖片、文字、鏈接等多樣化的內(nèi)容封裝到一個容器中，用于歸攏內(nèi)容，優(yōu)化排版。

2. 用于突出和強調(diào)

由于卡片與背景不在同一個層級，在交互時可能會產(chǎn)生陰影、描邊、動效等形式上的變化，因此可突出強調(diào)其承載的內(nèi)容模塊。

3. 優(yōu)化界面空間和視覺效果

在排版上起到一些美觀、合理利用空間

的效果。比如我們常見到的瀑布流排版的形式，可以使內(nèi)容很好的鋪滿整個空間。所以在設(shè)計中什么時候應該用卡片，主要看你在做設(shè)計的過程中是否涉及到以上這幾類場景。如果你在設(shè)計的過程中發(fā)現(xiàn)：

有一些內(nèi)容是需要被強調(diào)出來的；

在排版的過程中使用列表的形式并不能有效的利用空間；

要放在一起的內(nèi)容樣式繁雜，既有圖又有按鈕和文字。

那就可以嘗試使用卡片這種形式。下圖中的左圖采用的就是卡片式布局。單獨看這個頁面，當然也可以使用列表完成，但使用列表后的視覺效果明前沒有卡片更清晰：

再說說如何應用卡片組件，并使團隊保持設(shè)計統(tǒng)一性的要點：

1. 根據(jù)卡片的功能，在組件的使用規(guī)范中增加一些規(guī)則，比如符合以上功能提到的場景需求的，就使用卡片來替代列表。
2. 如果遇到不好判斷是否使用卡片的情況，可以采用 A/B test 的方式，對其他部門的同事/ 真實的用戶進行測試。
3. 根據(jù)你產(chǎn)品的需求，整理出幾種不同樣式的卡片組件，供大家應對不同的設(shè)計需求，統(tǒng)一組件的樣式管理，有助于保證產(chǎn)品的一致性。

四、Question4 樹形選框和穿梭框的區(qū)別

有同學問我：樹形選框和穿梭框有什么區(qū)別？

其實這兩種組件方案都可以解決“處理多種選項”的問題，兩者的不同點如下：

1. 樹形選框

單一列表的樹形選框，其特點為：

• 通常適用于選項少的場景，不需要頻繁上下滾動鼠標查看，選擇后的選項結(jié)果一目了然。
• 在頁面中占的空間小，也可以放置在下拉菜單中使用。
• 一般更強調(diào)關(guān)聯(lián)性和層級性。比如權(quán)限與角色之間的關(guān)聯(lián)；角色與角色之間的上下級關(guān)系和權(quán)限包含關(guān)系。

2. 穿梭框

雙列列表的穿梭框，其特點為：

• 用直觀的方式在兩欄中移動元素，完成選擇行為。一列為源列表，一列最終被構(gòu)建的項目列表，用戶可以看到兩個列表中的項目并進行操作，“數(shù)據(jù)源”和 “結(jié)果”清晰可見。
• 占用更多空間，可以展示選項的更多信息，也可以包含更多結(jié)構(gòu)，但左右兩列的選項結(jié)構(gòu)須保持一致。
• 一般強調(diào)權(quán)限是用于“給予”而不是 “復制”，比如可以用于描述：一個權(quán)限從 A 手中轉(zhuǎn)到 B 手中，B 擁有權(quán)限的同時，A 不再具備權(quán)限。

大家可以對應業(yè)務(wù)場景，選擇更適合的組件。

作者：元堯；微信公眾號：長弓小子。

本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。