整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導語：B端表單若設計不好，則容易導致不佳的用戶體驗，無法給用戶有效的信息反饋。那么，應該如何優化B端表單設計、提高B端表單的操作效率呢？也許你需要在交互形式、表單頁面、輸入框等方面做好優化。本文作者總結了提高B端表單操作效率的7個技巧，不妨來看一下。
一些同學在設計B端表單時，不知道需要考慮哪些問題，直接使用Ant Design提供的表單模版，或者參考競品，上線后用戶反饋難用，產品反饋拓展性低。
那么該如何提高B端表單操作效率呢？這里有7個技巧分享給大家。
目錄
表單的交互設計，有時候往往會被設計所忽略，或者所有交互都采用彈窗，本可以氣泡卡片一步解決，使用彈窗卻要兩步完成，本需要界面跳轉承載復雜表單，卻使用彈窗不停滾動。
在表單設計時，該如何選擇合適的交互形式呢？首先我們需要了解常用的交互形式有哪些。
常用的交互形式主要有：原位編輯、氣泡卡片、彈窗、抽屜、全屏彈窗、頁面跳轉等。
表單交互方式的選擇，我們可以參考 Ant Design 表單設計規范，從關聯性和復雜度進行判斷，在選擇時，我們優先考慮信息的復雜度，其次在考慮相關性。
1）當信息復雜度低，同時相關性高時，我們可以選擇原位編輯/氣泡卡片、彈窗的交互方式。
比如釘釘任務詳情頁面的數據編輯，相關度極高，同時信息不復雜，那么就可選擇原位編輯，在使用原位編輯時，需要根據業務進行判斷，是否有必要進行原位編輯。
而Ones的篩選，其數據量相對較多，但是相關性極高，那么就可以選擇氣泡的形式；有贊教育綁定銷售員，采用了彈窗的形式，這里也可采取氣泡的形式。
2）當信息復雜度高，但關聯性也較高時，我們可以使用抽屜、全屏彈窗的交互方式。
比如神策數據，信息量較為復雜，同時有一定相關性，數據創建后即可在列表中查看；但是當數據特別復雜，同時新增入口位置較多時，可采用全屏彈窗的方式，在CRM行業較常見，比如銷幫幫。
其優勢是，當從詳情頁進行新增或編輯時，編輯完成后，詳情頁數據即可展示當前新增的信息，如果是頁面表單，需要刷新數據才可以查看到，體驗感較低。
3）當信息復雜度高或信息獨立時，我們可以使用頁面的交互方式。
比如有贊的新增報名，其關聯性就不像CRM那么強，因此直接采用頁面的交互方式就可以；而阿里巴巴的創建網絡信息復雜度較高，同時相對獨立，因此也適合采用頁面進行交互。
對于復雜表單，在設計時需要對其進行合理的歸納簡化，降低表單填寫負荷。
一般來說，表單可分為基礎表單、分步表單、錨點定位、標簽頁這幾類。
1）當表單條目數在7個內，表單較為簡單，這時候我們一般直接采用基礎表單，比如有贊更換負責人頁面：
2）當表單條目數在7個以上，可歸類到復雜表單，這時候就需要根據表單的復雜度、邏輯性、關聯性進行判斷，選擇合適的分組方式，進行歸納簡化，降低表單填寫負荷。具體該如何選擇呢？
① 如果每個組之間有邏輯先后順序，那么推薦使用分步表單，比如阿里云的購買。
② 如果每個組之間關聯性較強，就不適合分開，推薦使用錨點定位，比如銷幫幫的編輯銷售機會、新建客戶等表單都是采用錨點定位。
③ 如果每個組既沒有邏輯先后順序，也沒有關聯性時，推薦使用標簽分組，比如飛書的發票管理，都是相對獨立的表單。
上面提到了為復雜表單進行合理的歸納簡化，但是歸納簡化后采用什么布局方式更合適呢？
表單頁面的布局方式，綜合起來可分為普通布局、弱分組、區域內分組、卡片分組這四種。
在選擇時，和表單的交互方式選擇一樣，可參考 Ant Design 表單設計規范，從關聯性和復雜度進行判斷，在選擇時，我們優先考慮信息的復雜度，其次再考慮相關性。
1）當條目數在7個內時，仍然使用基礎布局，比如網易互客的企業信息資料新增：
2）當表單條目數在7個以上，可歸類到復雜表單，這時候仍然根據表單的復雜度、邏輯性、關聯性進行判斷，選擇合適的布局方式，提高表單的瀏覽效率和屏效需求。
① 當表單空間有限，且相關性較強時，推薦使用弱分組，將多個組合在一行中，形成分組的暗示。
PS：弱分組也可和區域內分組和卡片分組組合使用，從而提高屏效。
② 當條目數在7-15個內時，相關性較強時，使用區域內分組較為適合，比如網易七魚的新建在線質檢模版：
③ 當條目數在15個以上，推薦使用卡片布局較為合適，比如阿里云服務購買表單：
在設計表單時，我們總覺得視覺重心偏左，因此在設計時我們總想讓視覺變得更平衡。
比如京東云，使用大屏電腦看，信息全集中在左邊，感覺視覺有點失衡。而類似飛書的居中設計，視覺會更平衡。
于是我在設計時也在考慮要不要用居中設計的方式呢？但是當我繼續查找資料時發現，其實在表單的設計中我們不用過度的追求視覺平衡，首先人的視覺動線遵循F模型，同時根據行業相關信息可讀性研究，眼動舒適角度為30度。
因此當表單信息較少，不考慮屏效時，采用從上往下的方式，據研究這是能夠最高效完成任務的布局方式。
為了印證這個結論，我收集了近50個B端后臺，共507個表單，竟然發現只有2個產品用了視覺重心居中的設計。
這個結果讓我挺詫異的，但又在情理之中。一個是飛書設置類表單、一個是百度云購買表單。
設置類表單，數據項較少，相對比較簡單，使用居中設計可以讓用戶更聚焦。
而百度云的表單，雖然也是視覺居中，但是將側邊欄進行收起，在設計上和我們普通網頁設計方式類似，從而承載更多的信息。
而其他的CRM、ERP、云產品、OA、項目研發、文檔產品、在線教育、HR、BI等系統產品的錄入類表單均采用的視覺偏左的設計方式，不管表單拓展多復雜的信息，都不會影響整體的一致性。
所以，在設計表單時不用過度追求視覺平衡，而是需要優先考慮信息操作效率，信息閱讀效率。
標簽分為左標簽、右標簽、頂標簽三種，不同的對齊方式，使用場景不同。
具體該如何選擇呢？我們需要從3個方面進行考慮：操作效率、標簽長度、屏效、視覺對齊。
根據Matteo Penzo的研究總結得到的瀏覽時間表發現，標簽移動到輸入框的時間，頂部對齊最快只要50ms，其次是右對齊240ms，左對齊耗費時間最長500ms。
因此當以操作效率為主時，推薦使用頂對齊的方式。
當標簽長度超過8個字，或者需要考慮中英文雙版本時，推薦使用頂對齊的方式，其容納的標簽文字更多，拓展性更好，比如Ones的建任務的標簽，就采用標簽頂對齊的方式：
如果只考慮屏效，那么標簽左對齊右對齊均可，但是如果還考慮表單錄入效率，那么推薦使用標簽右對齊的方式，比如蜂鳥匯報：
一般情況我們在設計表單，優先考慮效率和屏效，但在競品分析中發現，竟然有50%的表單采用了標簽左對齊的方式，因為這樣可以讓標簽和其他內容保持對齊，比如神策網：
因此，在進行標簽對齊方式的選擇時，我們首先要清楚以什么為主，什么是可以犧牲的，比如神策網選擇了視覺對齊，而犧牲的是操作效率。
設計時如果不考慮適配方式，那么前端可能不考慮，可能用他覺得合理的方式，在實際使用時就會導致體驗不好，后面想在調整就得重新等排期了，因此在設計時就需要把適配方式定好。
表單在設計時一般有2種適配方式，一種是固定適配，一種是間距適配。
設計時，需要保證最小分辨率能夠正常顯示，表單中信息寬度固定，不隨分辨率變化而變化。該方式適合用于表單頁面的適配中。
當采用弱分組布局時，隨分辨率變小，數據項自動掉下來，其他保持不變。
這里最小分辨率大家根據自己公司情況而定，我在設計時設定1366X768為最小分辨率。
下圖是百度統計流量研究所，大家可以看看數據，具體以自身公司而定，因為一些單位可能還在使用1280X720的分辨率，那么就設定1280為最小兼容的分辨率。
該適應方式在彈窗、抽屜中較為使用，表單頁中不太推薦使用該方式，因為當分辨率變大，眼動的視覺變大，不利于信息瀏覽。
表單頁在設計時，我們總是糾結到底整齊排列好，還是錯落排列好，錯落排列又該遵循什么規則呢，這里推薦大家閱讀Ant_Design的文章《整齊劃一？不如錯落有致》。
文章提到，如果表單跟隨空間自適應會造成不穩定的情況，線上效果會呈現以下效果。
同時輸入框的寬度不應該自適應，而需要根據填寫內容的長度來定，減輕判斷負擔。
最后，錯落有致更舒適，整齊劃一在視線上有隱性的截斷，會感覺缺了一塊內容。
如何錯落有致呢？有什么規則嗎？
Ant_Design設定104px 為原子級寬度尺碼 XS，通過倍數+間距疊加的方式（此處計算間距的原因是為了兼顧組合 input 和單個 input 對齊問題）從小到大去依次推導出更大的四種寬度來擬合前面劃分的尺碼。最終得到如下5種寬度尺碼和對齊關系。
通過對比，我們可以明顯地看到，錯落有致的排列方式更加舒適。
當然，你在設計時，最小原子的寬度不一定設置為104，也可根據業務情況將最小原子XS設置為可容納6個中文漢字，然后在通過如下規則進行換算。
本文針對如何提高B端表單操作效率，整理了7個技巧：
希望通過本文的分享，讓大家有一個更清晰的認知，從而提高表單操作效率。
參考引文：
《且曼B端產品設計之表單設計》
人眼的視角
http://t.hk.uy/Chp
Label Placement in Forms
http://t.hk.uy/Chr
淺談B端表單設計
https://mp.weixin.qq.com/s/L1bB3qlzstK6T4LkLEPtKQ
Ant Design 表單設計規范
https://ant.design/docs/spec/research-form-cn
Ant Design ProForm 高級表單
https://procomponents.ant.design/components/form
QueryFilter / LightFilter 篩選表單
https://procomponents.ant.design/components/query-filter
整齊劃一，不如錯落有致
https://www.zcool.com.cn/article/ZMTIxMzA2OA==.html
作者：風箏KK，公眾號：海鹽社
本文由 @風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
我們在瀏覽網頁的時候，經常需要向服務器提交信息，并讓后臺程序處理。瀏覽器中使用 GET 和 POST 方法向服務器提交數據。
GET 方法
GET方法將請求的編碼信息添加在網址后面，網址與編碼信息通過"?"號分隔。如下所示：
http://www.runoob.com/hello?key1=value1&key2=value2
GET方法是瀏覽器默認傳遞參數的方法，一些敏感信息，如密碼等建議不使用GET方法。
用get時，傳輸數據的大小有限制 （注意不是參數的個數有限制），最大為1024字節。
POST 方法
一些敏感信息，如密碼等我們可以通過POST方法傳遞，POST提交數據是隱式的。
POST提交數據是不可見的，GET是通過在url里面傳遞的（可以看一下你瀏覽器的地址欄）。
JSP使用getParameter()來獲得傳遞的參數，getInputStream()方法用來處理客戶端的二進制數據流的請求。
JSP 讀取表單數據
getParameter(): 使用 request.getParameter() 方法來獲取表單參數的值。
getParameterValues(): 獲得如checkbox類（名字相同，但值有多個）的數據。 接收數組變量 ，如checkbox類型
getParameterNames():該方法可以取得所有變量的名稱，該方法返回一個Emumeration。
getInputStream():調用此方法來讀取來自客戶端的二進制數據流。
使用URL的 GET 方法實例
以下是一個簡單的URL,并使用GET方法來傳遞URL中的參數：
http://localhost:8080/testjsp/main.jsp?name=菜鳥教程&url=http://ww.runoob.com
testjsp 為項目地址。
以下是 main.jsp 文件的JSP程序用于處理客戶端提交的表單數據，我們使用getParameter()方法來獲取提交的數據：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>使用 GET 方法讀取數據</h1>
<ul>
<li><p><b>站點名:</b>
<%= request.getParameter("name")%>
</p></li>
<li><p><b>網址:</b>
<%= request.getParameter("url")%>
</p></li>
</ul>
</body>
</html>
接下來我們通過瀏覽器訪問 http://localhost:8080/testjsp/main.jsp?name=菜鳥教程&url=http://ww.runoob.com 輸出結果如下所示：
使用表單的 GET 方法實例
以下是一個簡單的 HTML 表單，該表單通過GET方法將客戶端數據提交 到 main.jsp 文件中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="main.jsp" method="GET">
站點名: <input type="text" name="name">
<br />
網址: <input type="text" name="url" />
<input type="submit" value="提交" />
</form>
</body>
</html>
將以上HTML代碼保存到test.htm文件中。 將該文件放置于當前jsp項目的 WebContent 目錄下（與 main.jsp 同一個目錄）。
通過訪問 http://localhost:8080/testjsp/test.html 提交表單數據到 main.jsp 文件，演示 Gif 圖如下所示：
在 "站點名" 與 "網址" 兩個表單中填入信息，并點擊 "提交" 按鈕，它將輸出結果。
使用表單的 POST 方法實例
接下來讓我們使用POST方法來傳遞表單數據，修改main.jsp與Hello.htm文件代碼，如下所示：
main.jsp文件代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>使用 POST 方法讀取數據</h1>
<ul>
<li><p><b>站點名:</b>
<%
// 解決中文亂碼的問題
String name = new String((request.getParameter("name")).getBytes("ISO-8859-1"),"UTF-8");
%>
<%=name%>
</p></li>
<li><p><b>網址:</b>
<%= request.getParameter("url")%>
</p></li>
</ul>
</body>
</html>
代碼中我們使用 new String((request.getParameter("name")).getBytes("ISO-8859-1"),"UTF-8")來轉換編碼，防止中文亂碼的發生。
以下是test.htm修改后的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="main.jsp" method="POST">
站點名: <input type="text" name="name">
<br />
網址: <input type="text" name="url" />
<input type="submit" value="提交" />
</form>
</body>
</html>
通過訪問 http://localhost:8080/testjsp/test.html 提交表單數據到 main.jsp 文件，演示 Gif 圖如下所示：
傳遞 Checkbox 數據到JSP程序
復選框 checkbox 可以傳遞一個甚至多個數據。
以下是一個簡單的HTML代碼，并將代碼保存在test.htm文件中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="main.jsp" method="POST" target="_blank">
<input type="checkbox" name="google" checked="checked" /> Google
<input type="checkbox" name="runoob" /> 菜鳥教程
<input type="checkbox" name="taobao" checked="checked" />
淘寶
<input type="submit" value="選擇網站" />
</form>
</body>
</html>
以上代碼在瀏覽器訪問如下所示：
以下為main.jsp文件代碼，用于處理復選框數據：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>從復選框中讀取數據</h1>
<ul>
<li><p><b>Google 是否選中:</b>
<%= request.getParameter("google")%>
</p></li>
<li><p><b>菜鳥教程是否選中:</b>
<%= request.getParameter("runoob")%>
</p></li>
<li><p><b>淘寶是否選中:</b>
<%= request.getParameter("taobao")%>
</p></li>
</ul>
</body>
</html>
通過訪問 http://localhost:8080/testjsp/test.html 提交表單數據到 main.jsp 文件，演示 Gif 圖如下所示：
讀取所有表單參數
以下我們將使用 HttpServletRequest 的 getParameterNames() 來讀取所有表單參數,該方法可以取得所有變量的名稱，該方法返回一個枚舉。
一旦我們有了一個 Enumeration（枚舉），我們就可以調用 hasMoreElements() 方法來確定是否還有元素，以及使用nextElement（）方法來獲得每個參數的名稱。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>讀取所有表單參數</h1>
<table width="100%" border="1" align="center">
<tr bgcolor="#949494">
<th>參數名</th><th>參數值</th>
</tr>
<%
Enumeration paramNames = request.getParameterNames();
while(paramNames.hasMoreElements()) {
String paramName = (String)paramNames.nextElement();
out.print("<tr><td>" + paramName + "</td>\n");
String paramValue = request.getParameter(paramName);
out.println("<td> " + paramValue + "</td></tr>\n");
}
%>
</table>
</body>
</html>
以下是test.htm文件的內容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="main.jsp" method="POST" target="_blank">
<input type="checkbox" name="google" checked="checked" /> Google
<input type="checkbox" name="runoob" /> 菜鳥教程
<input type="checkbox" name="taobao" checked="checked" />
淘寶
<input type="submit" value="選擇網站" />
</form>
</body>
</html>
現在我們通過瀏覽器訪問 test.htm 文件提交數據，輸出結果如下：
通過訪問 http://localhost:8080/testjsp/test.html 提交表單數據到 main.jsp 文件，演示 Gif 圖如下所示：
你可以嘗試使用以上的JSP代碼讀取其它對象，如文本框，單選按鈕或下拉框等等其他形式的數據。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
要收集和錄入數據時，表單必不可少，而表單，也是B端設計師的必備能力之一。對此，本文從表單是什么，為什么重要？表單的主要應用場景、表單的主要結構和類型三個方面做了介紹和分析，一起來看看吧。
之前我們已經分享過成套的表格設計思路，接下來我們就聚焦在表單部分的干貨整理和分享中，幫助大家更好的理解和設計表單。
表單這個詞匯雖然很常見，但相信不少同學對這個詞匯本身的理解是很陌生的、一知半解的。所以我們首要目標就是認識它是什么，以及它在B端項目中的作用、使用場景。
和表格類似，表單也是現代電子計算機系統中最重要的組成部分之一，但和表格不同的是，從我們9年義務教育開學的第一天，甚至更早，就已經在接觸和使用表單了。
表單就是用來收集和錄入數據的列表清單，是我們過去填寫的試卷、個人資料、業務辦理等紙質清單的數字化應用方式。
比如登陸流程的賬號密碼填寫，注冊流程的郵箱、用戶名等信息填寫，都是表單應用的常見案例，計算機需要通過它來收集用戶指定的數據信息。
輸入框、選擇控件等都是表單的一部分，但要注意的是，表單是一個合集概念，是一個整體的 “清單”，而不是單一的功能控件、組件。比如上圖的登陸表單、注冊表單，都包含了若干的輸入控件。
在軟件編程中，通常也需要先定義出表單的整體對象，再去創建下級的控件。比如 HTML 需要先添加 <Form> 表單標簽，再在它的下級定義相關的輸入框、下拉菜單、選項、按鈕等元素。
<form value=”注冊表單”>
<input type=”text”>用戶名br>
<input type=”password”>密碼br>
<button type=”button”>注冊按鈕</button>
</form>
這和現實邏輯是高度一致的，也就是每個表單都會有相關的頂級目標，不管是收集個人信息、健康狀況、工作經驗亦或消費記錄。然后再根據這個目標所需的具體明細羅列出相關的數據清單，例如個人信息收集所需的姓名、性別、年齡、身高、體重等等。
表單設計，就是根據收集目標，設計若干數據收集控件的合集。
而它之所以重要，就是因為除了使用表格、圖表等模塊查看信息之外，還包含大量的數據錄入需求。有相當一部分項目中所產生的數據，都是通過系統內的表單輸入的，它們會占用用戶大量的精力和時間。
所以優秀的表單設計除了提升基礎的視覺效果外，還可以非常好的提升表單操作過程的體驗和效率，是 B 端設計師的必備能力之一。
表單是用來收集數據的前面我們已經解釋了，但收集數據這個目標并不是只有把你填的內容記錄到數據庫中這一個而已，還包含執行特定程序時的必要數據收集。
所以，我把表單應用的主要場景拆分成4個大類：
就是最基礎的用來將數據收集并保存到數據庫的場景，主要應用在對特定數據對象的創建和編輯上。
即通過若干的條件來篩選出指定的對象和數據內容，常見于表格和列表數據的篩選。
通過若干的條件設置來實現對應的功能或服務，比如在 CMS 系統設置推送消息條件，或設置相關的程序、機器的運作執行條件。
即針對特定數據信息進行驗證的場景，例如賬號登陸，非機器人驗證，財務、刪除的二次確認等等。
這4個場景的目標不同，自然在設計的樣式和交互上會有一定的差異，后面我們會分別對它們展開講解，先能理解并分辨它們即可。
一個完整的表單通常會包含3個要素，標題、數據項、按鈕。
標題就是這個表單的名稱，讓用戶理解填寫數據的目的。數據項則是該表單內每一條要收集的數據對象，根據數據類型和特征會有不同的控件類型和交互形式。按鈕則是針對整個表單的操作（不是針對某個數據項），例如發布、重制、恢復默認等。
數據項是我們要重點探討的對象，每一個數據項都包含三個基礎的要素，數據名稱、數據內容、操作對象。
數據名稱就是該項的命名，讓用戶識別操作的數據是什么，它可以獨立顯示在畫布中，也可以置入到輸入框等操作對象內。
數據內容，則是該數據項中要收集的數據特征，這是最核心的設計需求來源。數據特征是個總稱，里面包含很多要素，比如最基礎的一環 —— 數據類型。
這是一個開發術語，任何數據要被記錄，都會定義它的類型再進行存儲和使用。常見的數據類型包含數值（Number）、字符串（String）、日期（data）三個大類，且每個大類根據具體使用場景還會拆分出細分類型，比如下面的案例：
技術上的概念并不需要太深入理解，只要知道它從屬于哪個大類即可。更進一步，技術上的數據類型劃分在實際應用上仍是有局限性的，比如用戶名和密碼，本質上它們都以字符串的形式保存，但它們從工作中的稱呼、樣式的設計都是全然不同的。
除了數據類型，還有一個特別重要的就是數據內容，每個數據項都會明確想要獲取的數據結果是什么樣的。有可能是用戶手動輸入的，也可能是在已經存在的選項中挑選出來。還有對數據內容的長度、格式、數量、遞進、范圍、過濾的要求等。
在稍微復雜點的項目中，產品經理都會根據業務需要對數據類型進行定義，并在設計表單需求的時候，具體的規劃每個數據項的數據類型，比如創建一個下面的表格來描述。
之所以這個要講這個，因為對數據內容的整理決定了最終應該設計什么樣的——操作對象。
操作對象就是該數據項的具體表現形式，包括了視覺樣式和交互方法。比如上方的商品名，就是一個簡單的輸入框，但是因為商品名動輒字數非常多，這個輸入框的設計肯定不會像用戶名一樣短。
商品分類中，要從既定的選項中選擇，而商品分類庫本身是樹狀結構的，那么這個選擇必然要支持層級的表現，同時還要支持多選，所以應該使用下拉的樹狀選擇菜單。
如果光看上面這個案例，可能覺得太簡單根本不用想那么多背后的需求。但在一些專業性更高，包含數十條復雜數據項的表單中，是必然要做出充分理解和分析，才能確保設計的有效性。
后面我們會從常規表單的控件和組件類型入手，掌握基礎的知識后再學習如何結合數據需求進行有效的設計。
作者：酸梅干超人；公眾號：超人的電話亭（ID：Superman_Call）
本文由 @超人的電話亭 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash ，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
