聯成電腦設計好文分享：表單不單純—深究
文、00nyrhtak
前幾天幫朋友的研究專題做了小小的設計，他給了我一份html，我負責編寫一份css（必須說少了css的html就像素顏的女生啊）專題內容是一張表單，後來我發現即使只是一張表單，裡面也有不少元素。剛好利用這個機會來好好研究一下button、input、form。
毫無反應，就只是一張很陽春的表單
▍button
W3school上關於button的介紹：button tag、button CSS
Buttons Guidelines：iOS Human Interface Guidelines、Material Design
按鈕在交互設計中具有舉足輕重的地位，它集結了三大要素顏色（Color）、字體（Typography）、圖標（Iconography）。
► Button UX Design: Best Practices, Types and States
作者在文章中介紹各種按鈕的形式和狀態。以下擷取文章重點：
1. 把按鈕做得像個按鈕（妥善運用尺寸、形狀、顏色）。
2. 注意按鈕的位置和順序。
3. 為按鈕選擇一個適當的標籤（label），說明這個按鈕按下去之後會執行的動作（刪除、送出⋯⋯），或者指向的頁面（更多商品⋯⋯）。
錯用標籤（label）的範例。使用者無法預期點下「你可靠的戰略夥伴」按鈕時會發生的事（參考網站）
4. 若要將按鈕作為「Call to Action」，更要特別注意設計。
延伸閱讀：
什麼是 Call To Action？優化轉換率的基礎知識。
如何提高 Call to Action的效能？
Call to Action 按鈕的最佳實踐與技巧。
文章提到的按鈕形式：
1. Raised Button
2. Flat Button
3. Toggle Button
4. Ghost Button
5. Floating Action Button
作者建議將Ghost Button作為次要按鈕，以凸顯作為CTA的主要按鈕（參考網站）
延伸閱讀：
Ghost Buttons in UX Design
Radio Buttons in UX Design
Icons as Part of an Awesome User Experience
文章提到的按鈕狀態：
1. Normal State
2. Focused State
3. Pressed State
4. Inactive State
使用者移入按鈕時獲得良好的視覺回饋（參考網站）
主要/次要按鈕
下列文章提出設計主要和次要（和其他按鈕時）應注意的要點和技巧。
► Primary Secondary Action Buttons
► Buttons in Design Systems
在Sketch中靈活設計按鈕
下列文章提供很多在Sketch中設計按鈕的技巧，以及如何巧妙運用Symbol特性，製作出一套按鈕。
► A Better Way to Make Buttons in Sketch
► The anatomy of a button in Sketch
► More Flexibility with Buttons in Sketch
►Sketch Hacks Series 01：打造一應萬變的神奇按鈕(Magic Button)
延伸閱讀：
Sketch symbol best practices
▍input
W3school上關於input的介紹：input tag、input types、input attributes
►Design Better Input Fields
這篇文章著重於input的樣式設計，以下擷取文章重點：
1. input需要有清楚的輸入區域。
2. input的寬度要配合內容做調整。
3. input的結構要配合內容做調整。
作者另外特別提到placeholder的使用。為了不要造成使用者混淆，要避免以下三種情況：
1. 把placeholder作為標籤。
2. 把placeholder作為輸入範例。
3. 把placeholder作為提示文字。
作者最後的結論是希望大家在表單設計中可以減少placeholder的使用，文中的參考文章也早在2014年就提到，錯誤的placeholder使用會降低表單的易用性。
錯用placeholder的範例。若使用者需再次確認輸入內容性質必須先刪除輸入的資訊（參考網站）
延伸閱讀：
Alternatives to Placeholder Text
▍form
W3school上關於form的介紹：form tag、forms、form elements
表單是使用者和你的網站/app的對話方式
►Designing More Efficient Forms: Structure, Inputs, Labels and Actions
作者提出表單的五個主要組成要素，以下擷取文章重點：
1. 表單結構（form structure）
問題的必要性。
問題的順序是否符合邏輯。
將相同性質的問題做群組化。
單欄式設計你的表單。
2. 輸入區域（input fields）
簡化輸入區域的數量。
清楚區分必填和選填問題。
注意設立的預設值是否為大多數人會選填的選項。
（電腦版限定）讓使用者可以只利用鍵盤的tab鍵就完成一份表單。
（電腦版限定）滑鼠點擊輸入區域時有提示性的視覺效果。
（手機版限定）鍵盤配合輸入區域性質做變化（輸入號碼時變換為數字鍵盤）。
滑鼠點擊輸入區域時，左側的圖標會變色（參考網站）
3. 區域標籤（field labels）
簡短敘述輸入區域的內容性質（「您的姓名是」可以簡化為「姓名」即可）。
不要都用大寫英文（「PASSWORD」跟「Password」相比，前者難以閱讀）。
區域標籤對齊方式（建議放置在輸入區域上方或是靠左側對齊）。
不要將所有的區域標籤以placeholder的方式呈現。
左側表單區域標籤放置在輸入區域上方。右側表單區域標籤在輸入區域左側靠左側對齊。（參考網站）
延伸閱讀：
Label Placement on Forms
4. 功能按鈕（action buttons）
請回到文章開頭參照button的部分。
5. 回饋（feedback）
向使用者說明表單有成功提交，或是提交失敗。
針對以上的五個主要組成要素，下列文章提供正確和錯誤的實例分享：
►Design Better Forms
若表單有不少提示性文字或訊息（額外補充資訊），可以參照這篇文章：
► Designing More Efficient Forms: Assistance and Validation
若是要設計國際化表單，格式該如何做變換，可以參照這篇文章：
► Form Internationalization Techniques
以上是我對button、input、form的相關資訊做的整理，希望可以幫助大家設計出一份能和使用者進行良好溝通的表單。有任何想法都歡迎跟我分享噢！
文章轉載自「Medium」，已取得作者授權同意，原文為：表單不單純深究
痞客邦Blog：http://lccnetvip.pixnet.net/blog
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w
