1. 關於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切圖方法（內附切圖神器）
2. dreamweaver中如何使圖片與文本左右對齊
使用css樣式定義文本對齊方式：text-align:left;text-align:center;text-align:right;分別是文本左對齊，居中對齊，右對齊。
一般水平對齊方式比較好操作，主要是垂直對齊方式，如：單行文本垂直居中，多行文本垂直居中，圖片與文字中線對齊等，根據情況來定，你的問題有點太籠統。
DW怎麼讓圖片上下左右居中？
1、打開Dreamweaver，點擊「文件」，點擊「新建」。
2、點擊「創建」，點擊「插入」，點擊「image」，找到目標圖片位置。
3、點擊目標圖片，點擊「確定」，點擊「窗口」。
4、點擊「屬性」，點擊空白位置，點擊「居中」符號即可。
Dreamweaver
Aobe Dreamweaver，簡稱「DW」，中文名稱"夢想編織者"，最初為美國MACROMEDIA公司開發，2005年被Adobe公司收購。
DW是集網頁製作和管理網站於一身的所見即所得網頁代碼編輯器。利用HTML、CSS、JavaScript等內容的支持，設計師和程序員可以在幾乎任何地方快速製作和進行網站建設。
Adobe Dreamweaver使用所見即所得的介面，亦有HTML（標准通用標記語言下的一個應用）編輯的功能，藉助經過簡化的智能編碼引擎，輕松地創建、編碼和管理動態網站。訪問代碼提示，即可快速了解HTML、CSS和其他Web標准。使用視覺輔助功能減少錯誤並提高網站開發速度。
3. Web排版中，左對齊和兩端對齊各有什麼優缺點
兩端對齊就是指一段文字（兩回車符之間）兩邊對齊，對微小間距自動調整，使右邊對齊成一條直線。左對齊則不進行自動調整，如果只剩半個字的位置就空在那兒，這樣右邊看起來就參差不齊。一般都用左端對齊吧，兩端對齊一般會導致字詞間距不均勻，造成難於接受的排版效果。對齊方式是段落內容在文檔的左右邊界之間的橫向排列方式。Word共有5種對齊方式：左對齊、右對齊、居中對齊、兩端對齊和分散對齊。 左對齊是將文欄位落的左邊邊緣對齊； 兩端對齊是將文欄位落的左右兩端的邊緣都對齊；分散對齊與兩端對齊的不同表現在字數不能達到正常一行的字數時分散對齊可擴大字距占滿整行使行首尾與其他整行對齊。 兩端對齊與左對齊區別在於左對齊比較簡單，左邊對齊即可，兩端對齊則必須右邊也對齊，比較美觀。