close
文、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」,更要特別注意設計。
文章提到的按鈕形式:
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)
▍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使用會降低表單的易用性。
▍form
W3school上關於form的介紹:form tag、forms、form elements
表單是使用者和你的網站/app的對話方式
► Designing More Efficient Forms: Structure, Inputs, Labels and Actions
作者提出表單的五個主要組成要素,以下擷取文章重點:
1. 表單結構(form structure)
− 問題的必要性。
− 問題的順序是否符合邏輯。
− 將相同性質的問題做群組化。
− 單欄式設計你的表單。
接下來繼續看看關於form作者有什麼樣的建議與想法呢?👉 我想觀看全文。
痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w
文章標籤
全站熱搜
留言列表