❶ 關於Web表單設計的經驗分享
表單在UI設計中的出現場景還是比較多的，尤其是在一些To B的產品設計中。最近自己有做大量web 表單設計，就想把自己學到的一些關於表單設計的知識點分享給大家～
一、什麼是表單？
表單在網頁中的主要功能是負責採集數據以及向伺服器傳送數據的。表單是採集用戶信息數據重要的途徑。好的表單設計能提升信息採集的效率與成功率。不好的表單設計會影響用戶心情，體驗差，導致信息採集不成功甚至帶來利益的損失。
二、表單的構成
表單通常由標簽、輸入域、操作按鈕、這三部分構成。
標簽
標簽我們可以把它理解為標題，告訴用戶該表單需要填寫什麼信息、該表單需要採集什麼內容。標簽通常出現在輸入域的左邊、頂部、或者輸入域內。
標簽按所填信息的必要性分為必填項和非必填項，一般我們會在必填項的標簽內容加上＊號。＊號的的擺放位置有下面兩種情況：
1.當標簽與輸入域居中對齊時，建議把＊號放在標簽左側。
因為＊號比較顯目，用戶往往第一眼會先看到它，然後按照用戶從左往右的閱讀習慣，視覺落點分別為文字標簽、輸入域。考慮到表單的填寫效率，＊號位於左側的表單閱讀起來會更加順暢。所以當標簽與輸入域居中對齊時，把＊號放在標簽左側會更好。
2.當標簽與輸入域左對齊時，建議把＊號放在標簽右側。
由於人們縱向的閱讀習慣，視線會成F型。＊號在左側還是在右側並不會對用戶視覺落腳點造成太多困擾，另外考慮到對齊的形式，＊號放在標簽右側會更好。
輸入域
輸入域是錄入用戶各種類型信息的重要交互區域。輸入域包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框、和文件上傳框等等。
不知道這些輸入域的區別的小夥伴可以去ant design官網學習一下，傳送門：
https://ant.design/components/overview-cn/
因為輸入域是錄入信息很重要的交互區域，在設計時我們應該考慮用戶輸入的多種場景去設計。我們可以將用戶的輸入過程分為輸入前、輸入中、輸入後。根據每一種場景中細化我們的設計。比如在輸入中：我們要考慮游標的設計、輸入文字信息的設計，信息提示等，在輸入後：我們要考慮信息輸入錯誤應該給予怎樣的視覺反饋等。總之考慮得越細致，越能提高信息錄入的成功率。
操作按鈕
操作按鈕是在用戶填寫完表單各項內容後，所要進行的操作動作，來完成或者結束當前操作流程。操作按鈕分為全局操作按鈕與局部操作按鈕。全局操作按鈕控制整個表單，比如提交、發送等操作按鈕。局部操作按鈕是對某一范圍的內容起作用，比如編輯、刪除操作。
三、表單設計常見問題
1.標簽採用哪種對齊方式更好？
在我們的實際項目中，通常會因為文案的長短不一，導致我們不知道該採用哪種對齊方式。標簽的處理原則就是要要盡量對齊，採用哪種對齊方式應考慮具體的制約因素和目標來定。
左對齊
當標簽採用左對齊的方式的時，因為文字標簽的長度不統一，導致標簽與輸入框的間距是不可控的。這就會造成設計的通用性不強，以及橫向空間的浪費。
如果採用左對齊的形式，就要盡量去保持文字標簽的長度一致，比如通過字距的調整讓文字標簽的長度保持一致或者通過留足留白空間，這樣設計上會更統一。以為例，採取左對齊形式，但是它留足了文字標簽與輸入域之間的距離，讓表單看上去更統一和諧，不足的就是造成了部分空間的浪費。
頂對齊
採用頂對齊的形式，會讓標簽和輸入域垂直顯示，縱向布局的信息呈現效果會更好，從而提高用戶填寫的效率。頂對齊因為垂直排布，會造成縱向空間的浪費，但在橫空間上比較節省，比較適用於橫向寬度較窄的頁面。
▵頂對齊
右對齊
右對齊跟左對齊一樣會因為標簽長度不可控。導致設計的通用性不強，以及橫向空間的浪費，但節約了縱向空間。
▵右對齊
在這幾種對齊方式中，用戶瀏覽信息的速率頂對齊>右對齊>左對齊。頂對齊形式適合簡易表單、右對齊與左對齊表單適合復雜表單。
2.操作按鈕應該用哪種設計形式比較好？
對於全局的操作按鈕會用常規的按鈕樣式，全局按鈕分為主按鈕與次按鈕。
主按鈕
主按鈕是界面中比較重要的功能操作按鈕，比如提交、保存等一些正向的操作。主按鈕在視覺層級上最高，能夠引導用戶很快的找到核心的操作並點擊。主按鈕通常是純文本或圖文結合的面性形式。圖文結合的形式能吸引用戶注意，也幫助用戶理解該按鈕的操作含義。
次按鈕
次按鈕的層級相對於主按鈕層級要弱一些，通常採用線性形式。在一個頁面中可以出現多個次按鈕。
對於局部操作按鈕的設計形式可以是文字按鈕、圖標按鈕，也可以是圖標＋文字的形式。至於應該應用哪種形式就要結合具體端場景去考慮。
圖標按鈕
圖標按鈕就是用圖標來代表該操作的含義，能夠直觀的表達按鈕的功能。在設計的時候我們需要注意圖標是易於理解的、是用戶熟悉的。圖標按鈕的設計通常都會配上懸浮框設計，也就是當用戶滑鼠停留在該圖標按鈕上會出現對該按鈕的文字釋義的懸浮框。以微信公眾號為例，當滑鼠停留在編輯圖標那時會出現黑色的懸浮框對其進行解釋，讓用戶理解此按鈕的意義，讓用戶放心操作。
在web設計中，由於按鈕的種類與使用場景比較多，建議局部的操作按鈕使用線性圖標，讓它的層級相對其他按鈕要弱化一些。
文字按鈕
文字按鈕通常出現在列表的操作項中。文字的顏色通常是品牌色或者藍色，因為藍色在用戶的認知中通常是可點擊的。
圖標＋文字 按鈕
圖文結合的按鈕相對於純文字按鈕會更加直觀，也能更吸引用戶注意。
3.輸入框應該設計幾種狀態？
考慮的狀態越多，設計就會越細，能夠及時的反饋信息給用戶，從而提高表單填寫效率。在考慮輸入框的設計狀態時，遵循及時反饋的設計原則去考慮。
為了避免用戶填寫完所有信息後，才反饋有錯誤，會造成時間浪費，表單填寫效率低。通常會把輸入框線變成紅色，同時出現紅色的說明文案，來引起用戶的注意。
▵及時反饋錯誤信息
在設計中我們還需要考慮自動校驗的成功與警告狀態。顏色通常為綠色與橙色。
輸入框到底應該設計幾種狀態我們也需要根據我們表單的復雜情況去考慮，對於簡單的表單設計過於細化的狀態是沒有必要的。
寫在最後的話
表單設計看起來簡單，但實際在設計過程中還是有大量的點值得我們去學習與研究的。在這次做表單的過程中，覺得作為設計師我們不應該去挑活，不要覺得表單設計是一個很小的設計就不動腦的照著別人的設計規范抄一遍。像這種看似枯燥但又很重要的模塊設計，我們在前期開始設計之前可以從交互層去考慮，再從視覺層面去考慮怎樣的表單設計能讓用戶填得舒心又高效。在看別人的設計規范比如ant design的組件規范時，我們可以去留意他們的設計細節，比如表單上下之間的間距留的是多少？有什麼規律嗎？按鈕的上下邊距與左右邊距有什麼關系嗎？通過這些思考，然後去觀察總結，並轉化為自己的小技巧，到下一次設計表單的時候，我們就會做得很好了。
往期解析
UI設計－首頁解析
詳情頁設計技法解析
輕松get文字標簽設計技法
Get點9切圖方法（內附切圖神器）
❷ 怎樣設計以用戶為中心的WEB表單
我們幾乎每天都會接觸形形色色的表單，登錄賬號、填寫信息以獲取服務、發布內容等。然而填寫表單的過程往往不是特別愉悅的，我們需要消耗時間輸入信息，點擊提交，可能還需要等待審核；尤其是碰到較為復雜、流程長的表單，如果用戶體驗較差，很容易讓人產生挫敗感，在中途選擇放棄。
那麼，如何提高用戶填寫表單的效率，防止他們出錯或中途流失，提升愉悅度及轉化率呢？本文就web表單設計，總結了以下的一些方法：
有效的說服用戶進行填寫
首先，告知用戶為什麼要填寫表單，他能獲得什麼，讓用戶看到把信息給你的好處。舉個例子，GitHub在其注冊表單的右側清晰的告訴你注冊使用它會得到的幫助：
參考：http://isux.tencent.com/web-form-design.html
❸ Web前端UI設計方法
UI設計不一定需要精通前端，但是如果UI設計了解前端可以減少和開發人員溝通的技術成本，讓團隊協作更加高效。那UI設計如何學習前端，需要學習到什麼程度呢？
我們分享一個前端教程-網頁鏈接，這裡面詳細講解了UI設計中的Web前端設計規則及工具，可以幫助大家深入理解Web前端UI設計方法。
1、HTLM基礎認知DIV框架及CSS樣式
首先要了解HTLM基礎、CIV框架以及CSS樣式， HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網路上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。DIV元素是用來為HTLM文檔內大塊的內容提供結構和背景的元素。 CSS不陪敗僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字型大小樣式，擁有對網頁對象和模型樣式編輯的能力。
2、浮動原理、Margin認知
Margin，是CSS的語法，這個簡寫屬性用於在一個聲明中設置所有當前或者指定元素所有外邊距的寬散昌度，或者設置各邊上外邊距的寬度。
3、框架應用搭建
框架很多，在這個教程中選擇一個主流框架帶大家看看前端框架如何搭建。
4、插入圖片、文字標簽和版頭、導航欄
編寫的網頁中插入圖片，可以使瀏覽網頁的用戶得到更好的體驗效果。在這一部分會講解插入圖片、文字標簽以及版頭和導航欄如何實現。
5、Banner塊插入、內容文字排版、內聯元素、A標簽和Banner鏈接定位
Banner是網路廣告最早採用的形式，也是目前最常見的形式。它是橫跨於網頁上的矩形公告牌，當用戶點擊這些橫幅的時候，通常可以鏈接到廣告主的網頁。而網頁中的文字內容排版也直接影響著網頁的美觀以及網頁的用戶體驗。
6、錨點標簽、超鏈接標簽、固定定位和絕對定位、相對定位
標簽用於定義超鏈接，用於從一張頁面鏈接到另一張頁蘆掘顫面。用於設置錨點，用於頁面定位。
7、導航二級菜單顯示隱藏
很多網頁中的二級菜單欄不直接顯示，需要滑鼠移動到一級菜單或者點擊一級菜單才會展開顯示二級菜單。
8、input表單
input表單可以獲取用戶的信息，做出對應的動作，教程中直觀的展示input表單的應用方法。
其實以上教程只是web前端很小的一部分，UI設計如果能夠了解前端知識，在設計中可以更好的考慮實現問題，也能夠更好的和開發人員交流，也能夠提高團隊協作的效率，加速項目的進度。
❹ FineReport進行表單設計方法教程
FineReport的報表操作功能是報表軟體中的佼佼者。下面未來小編就為大家介紹一下FineReport簡單的一些表單設計功能。
新建表單點擊文件>新建表單，如下圖：
拖入組件
如上圖所示的效果圖，我們可以看到該表單需要有1個下拉框控制項，一個文本控制項，以及對應的2個標簽控制項，還需要一個以表格形式顯示數據的報表塊，此時，我們確定了需要在表單中添加一個報表塊，4個控制項。
在組件介紹中，我們知道控制項即可依附於參數面板組件存在，也可以單獨以組件的形式存在，在這里可隨意使用哪種形式，效果都一樣，那麼使用依附於參數面板組件存在的形式。
參數組件
從工具欄中將參數組件拖拽至表單主體中，並將相應的四個控制項：下拉框、文本、2個標簽控制項拖拽至參數組件中，並設置標簽控制項的控制項值分別為：訂單ID和客戶ID，如下圖：
報表塊組件
從工具欄中將報表組件也拖拽至表單主體中，如下圖：
如果組件數量過多，在web端展示的時候自適應在一頁內顯示會比較擁擠，那麼此時可以可以再右側下方選中整體框架body，在右側上方的屬性表中將組件縮放修改為自適應原樣縮放，如下圖：
充滿展現區域：是指在web端展示的時候，所有組件自適應充滿整個瀏覽器頁面顯示，不出現滾動條；自適應原樣縮放：是指在web端展示的時候根據製作表單時候組件大小比例顯示，並不縮放充滿整個web頁面，如果超過頁面大小，會出現滾動條。
控制項綁定數據
定義數據集
效果圖中，新建數據集ds1：SELECT
*
FROM
訂單
where
訂單ID=${orderid}，參數orderid的默認值為10001,。
註：參數名字必須與訂單ID下拉框控制項名稱保持一致。
訂單ID下拉框
選中下拉框控制項拖拽到適當位置，下拉框控制項名設為「orderid」，數據字典來自FRDemo資料庫的訂單表（數據類型選擇資料庫表，資料庫選擇FRDemo），實際值和顯示值均為訂單ID，控制項值為空。
客戶ID文本框
選中文本框控制項拖拽到適當位置，文本框控制項名為customerid，控制項值選擇為綁定欄位，數據來源於ds1數據集中的客戶ID欄位，如下圖：
註：此處選擇ds1數據集是為了實現下拉框與文本框的聯動，下拉框控制項名稱為orderid，ds1數據集根據orderid參數對數據進行了過濾，也就是ds1數據集根據下拉框控制項的值對數據進行了過濾。
報表塊
參數面板與控制項都已經設置好之後，點開報表塊裡面的觸筆按鈕，進行報表塊編輯界面。
新建數據集
效果圖中，報表塊裡面要顯示訂單明細數據，根據訂單ID進行過濾，新建數據集ds2：select
*
from
訂單明細
where
訂單ID=${orderid}，orderid默認值為10001.
表樣設計
如下圖所示，設計表樣：
到此為止，表單就已經製作好了。
保存表單並預覽
保存表單，表單模板後綴名為.frm，點擊預覽按鈕進行預覽，即可看到效果。
❺ Web表單設計—點石成金的藝術（一）
最近在讀《 Web表單設計—點石成金的藝術 》一書，頗受啟發。而且該書目前已經買不到了，好像二手書也買不到，特意找了pdf掃描版來讀，讀書過程中的一些感悟跟大家分享。
一、表單的設計
大多數人都不喜歡填寫表單，這也就說明了應該關注優秀表單設計。
而很多的特定數據來源都提供了衡量表單設計影響的方式：
（1） 可用性測試 （觀察人們與表單如何交互）
（2） 實地測試 （從人種學角度觀察人們在家中或辦公室中與表單互動的情況；）
（3） 客戶支持 （了解客戶填寫表單時遇到的問題）
（4） 網站追蹤
（5） 眼動跟蹤 （記錄人們如何理解表單的表現形式）
（6） Web慣例 （即查看該問題的通用解決模式，可理解為分析競爭對手的解決方案）
二、表單的組織
類似標簽後面是否要防止冒號的問題，用戶真的不關心。用戶關心的是問題內容和所問的原因。
有些欄位需要告訴用戶填寫的原因（ 為什麼問這些問題，能為用戶帶來的好處 ），如果不能回答，就要考慮是否真的需要這個欄位。
表單所提的問題即 標簽要盡量的簡潔清晰 。
如果簡潔的標簽容易引起用戶的誤會，應該 嘗試使用自然語言的方式 。
表單較長或較復雜時應 考慮對表單內容進行分組 ，有助於瀏覽和快速完成填寫。
有些時候很多問題需要按順序回答，否則回答就沒有意義。這時候人們需要看到所有問題，一個較長的網頁是好的解決方案。通常這些問題會和一個主題相關。
有些 可選問題在表單填寫完成後再問比較好 ，如「您如何知道我們」或者「您想進一步了解我們嗎」。這樣會比初始表單就提問能獲得更多的答案。
可以通過Web慣例調查， 比較相似網站的設計方案 ，引導發現網上已經形成的常見表單組織結構，但是也要結合自身情況不要只停留在簡單復制競爭對手。
對表單進行分組時， 每個內容組都從視覺上區別於表單的其餘部分 ，但是對比太多也可能造成視覺污染，阻礙人們瀏覽表單。
信息設計專家愛德華,托佛特認為，信息由產生作用的差異構成，任何無助於布局的頁面元素都會損壞布局。 採用最好的必要視覺信息來區分內容組 。
英文網站， 標簽首字母應當大寫 ，使內容組更容易瀏覽。
最後，祝大家六一兒童節快樂！永葆童心~