選擇對(duì)于 B 端系統(tǒng)來說究竟意味著什么？

如果將下圖兩個(gè)組件擺在設(shè)計(jì)師面前，它們唯一的差別便是 一個(gè)有著右側(cè)的下拉箭頭、一個(gè)右側(cè)沒有下拉箭頭。

當(dāng)聽到了這種解釋時(shí)，我也就只能搖搖頭，一方面感覺很多設(shè)計(jì)師的基礎(chǔ)薄弱，同時(shí)又覺得需要和咱們讀者來講講，關(guān)于選擇這一大類，對(duì)于我們?cè)O(shè)計(jì)師究竟有什么意義？

首先，選擇類的組件對(duì)于我們來說已經(jīng)非常常見，比如簡單的：單選框、復(fù)選框，難一點(diǎn)的：級(jí)聯(lián)選擇、層級(jí)選擇、樹形選擇，這些都是我們選擇類組件的一個(gè)大的范圍。

同樣的輸入也是，輸入通常會(huì)包含有 輸入框、網(wǎng)址輸入、特定規(guī)則輸入 等多種輸入方式，這些都是我們輸入類組件的一個(gè)大的范圍。

那先來了解一下選擇和輸入當(dāng)中的差別。

往期B端設(shè)計(jì)干貨：

一、生活當(dāng)中 輸入與選擇 的差別

想要理解 輸入與選擇 的差別，我們先來理解生活當(dāng)中關(guān)于輸入選擇的差別。

舉一個(gè)生活當(dāng)中的例子，圖片當(dāng)中的這個(gè)物體是什么？

我相信大家給我的回答一定不會(huì)相同。比如：有的人可能會(huì)說是它是蘋果；而有些人則會(huì)說是紅蘋果、紅富士、大蘋果 等等...

也就導(dǎo)致雖然大家說的都是蘋果相關(guān)的詞匯，但是這些詞語往往都會(huì)存在細(xì)微的差別。

那假設(shè)同樣一張圖片，我們提問的方式是，圖片當(dāng)中的物體是下列四個(gè)選項(xiàng)當(dāng)中的哪一個(gè)？

A.香蕉 B.蘋果 C.西瓜 D.火龍果

這時(shí)候你會(huì)發(fā)現(xiàn)，得到的結(jié)果大多數(shù)都是選擇的「B.蘋果」

而上面講到的便是我們輸入和選擇的一個(gè)差異，從結(jié)果上來看我們就會(huì)發(fā)現(xiàn) 輸入要更難一些、選擇則會(huì)更加的容易。

這就像我們?cè)趯W(xué)生時(shí)代做的卷子，選擇題往往還能動(dòng)動(dòng)筆，而到了填空題完全就是一頭霧水。

二、實(shí)際項(xiàng)目當(dāng)中的例子

這種情況，在日常的工作當(dāng)中，有非常多的例子，比如在一個(gè) CRM 系統(tǒng)當(dāng)中，我們會(huì)有一個(gè)叫做客戶類型的字段。假設(shè)最開始把它設(shè)定輸入框，這時(shí)候銷售將二次購買的客戶錄入系統(tǒng)當(dāng)中，那不同的銷售錄入出來的結(jié)果完全不同。

銷售 A：二次客戶

銷售 B：復(fù)購客戶

銷售 C：老客戶

而數(shù)據(jù)在整個(gè)系統(tǒng)當(dāng)中非常重要，因?yàn)槲覀冧浫霐?shù)據(jù)的最終目的都是在各個(gè)地方使用數(shù)據(jù)。比如在數(shù)據(jù)分析頁面、數(shù)據(jù)篩選頁面，由于出現(xiàn)了上訴提到的混亂的結(jié)果，系統(tǒng)的數(shù)據(jù)無法正常使用，在管理上就會(huì)出現(xiàn)很多問題。

假設(shè)把客戶類型的字段換做是選擇，那這些數(shù)據(jù)就能夠正常使用，并且能夠在系統(tǒng)當(dāng)中我們就能夠合理的在各個(gè)頁面當(dāng)中利用。

三、輸入與選擇的定義

通過上面兩個(gè)例子，我們會(huì)發(fā)現(xiàn)輸入與選擇的意義是完全不同的。我們就來看看，輸入與選擇究竟存在什么定義上的差別。

1. 錄入方式上的差異

輸入就是提供給用戶進(jìn)行無規(guī)則的信息錄入，也就是用戶想輸入什么就可以進(jìn)行填寫。而在輸入的過程當(dāng)中，通常都是通過鍵盤的方式進(jìn)行進(jìn)行的數(shù)據(jù)提交，這也就意味著輸入的難度較大。

選擇則是系統(tǒng)預(yù)設(shè)好的條件提供給用戶進(jìn)行規(guī)則的錄入，并且在組件的展示當(dāng)中，都是以鼠標(biāo)點(diǎn)擊的方式來進(jìn)行的信息錄入，它的難度更低，但是選擇在系統(tǒng)當(dāng)中是預(yù)設(shè)好的情況，也就意味著需要提前預(yù)設(shè)。如果是一個(gè)靈活的 B 端系統(tǒng)，就一定需要在管理后臺(tái)對(duì)于預(yù)設(shè)的系統(tǒng)進(jìn)行配置，否則整個(gè)系統(tǒng)就缺乏靈活性。

這就是在 飛書 的管理后臺(tái)系統(tǒng)當(dāng)中，我們需要單獨(dú)的配置一些自定義的信息，其中就可以定義選擇錄入的選項(xiàng)。

當(dāng)然為了保證系統(tǒng)的靈活性，我們還會(huì)為組件去設(shè)定一些小心思，就是選擇錄入時(shí)，底部會(huì)有自定義選擇項(xiàng)的功能，這就叫能夠保證用戶都有自己想要的選項(xiàng)。

2. 字段屬性上的差異

關(guān)于兩個(gè)字段，其實(shí)在字段屬性上也會(huì)存在不同。

首先是輸入類型的字段，在整個(gè)系統(tǒng)當(dāng)中，主要針對(duì)的是：名稱、手機(jī)號(hào)、地址、郵箱 等，系統(tǒng)本身無法規(guī)則化的字段，這時(shí)候只能采取輸入的形式。

而選擇字段，主要是針對(duì)的字段是：類型、屬性、狀態(tài) 等，用戶能夠快速選擇的字段，兩者在字段設(shè)定上存在差異，因此并不相同。

四、選擇與輸入的作用

關(guān)于作用，問大家這樣一個(gè)問題，你們認(rèn)為在 B 端系統(tǒng)當(dāng)中是輸入更多，還是選擇更多？

我想看完文章過后大家都會(huì)覺得輸入的限制過多、過于麻煩，因此輸入在整個(gè) B 端系統(tǒng)里 錄入難度高、規(guī)則復(fù)雜，只會(huì)使用在少數(shù)位置來進(jìn)行使用。同樣的邏輯選擇則會(huì)更為高頻使用。

字段，其實(shí)是涉及到 前臺(tái)、后臺(tái)的頁面信息，也就造成關(guān)于字段的影響，我們不能單純從表單一個(gè)頁面來進(jìn)行看待。

而表單、表格、詳情頁本身是一個(gè)整體，這些字段的差別，會(huì)影響到后面的頁面的展示。

比如在表格頁面當(dāng)中，會(huì)什么要采取 搜索 而非 篩選？

其實(shí)這就是在表單頁面當(dāng)中，如果選擇了輸入，那在檢索的時(shí)候一定是 搜索的方式。那如果是選擇，那在檢索的時(shí)候一定是 篩選的方式。

那在其他頁面呢？詳情頁？這個(gè)咱們就不多說了。

這其實(shí)就是字段的對(duì)應(yīng)關(guān)系，在整個(gè)系統(tǒng)當(dāng)中是一個(gè)鏈接的整體，我們?cè)谌タ创M件的時(shí)候，要關(guān)注的并不只是組件的樣式，而更應(yīng)該在乎的是組件背后之間的關(guān)系。

如果覺得文章還不錯(cuò)，也別忘了點(diǎn)贊轉(zhuǎn)發(fā)~

我們下篇文章，再聊~

歡迎關(guān)注作者的微信公眾號(hào)： CE青年Youthce