設計好文分享：表單不單純—深究

berylgobby

文、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


▍原來表單還有這麼多學問，接下來看看作者繼續整理有關input和form的研究吧！►我想觀看全文。




痞客邦Blog：http://lccnetvip.pixnet.net/blog
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w