毫無反應,就只是一張很陽春的表單

表單不單純—深究button&input&form

00nyrhtak
00nyrhtak
May 14, 2017 · 8 min read

前幾天幫朋友的研究專題做了小小的設計,他給了我一份html,我負責編寫一份css(必須說少了css的html就像素顏的女生啊)專題內容是一張表單,後來我發現即使只是一張表單,裡面也有不少元素。剛好利用這個機會來好好研究一下button、input、form。


button

W3school上關於button的介紹:button tagbutton CSS
Buttons Guidelines:
iOS Human Interface GuidelinesMaterial Design

按鈕在交互設計中具有舉足輕重的地位,它集結了三大要素—顏色(Color)、字體(Typography)、圖標(Iconography)。

作者在文章中介紹各種按鈕的形式和狀態。以下擷取文章重點:
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

使用者移入按鈕時獲得良好的視覺回饋參考網站

主要/次要按鈕

下列文章提出設計主要和次要(和其他按鈕時)應注意的要點和技巧。

在Sketch中靈活設計按鈕

下列文章提供很多在Sketch中設計按鈕的技巧,以及如何巧妙運用Symbol特性,製作出一套按鈕。

延伸閱讀:
Sketch symbol best practices

input

W3school上關於input的介紹:input taginput typesinput attributes

這篇文章著重於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 tagformsform elements

表單是使用者和你的網站/app的對話方式

作者提出表單的五個主要組成要素,以下擷取文章重點:

1. 表單結構(form structure)
− 問題的必要性。
− 問題的順序是否符合邏輯。
− 將相同性質的問題做群組化。
− 單欄式設計你的表單。

2. 輸入區域(input fields)
− 簡化輸入區域的數量。
− 清楚區分必填和選填問題。
− 注意設立的預設值是否為大多數人會選填的選項。
(電腦版限定)讓使用者可以只利用鍵盤的tab鍵就完成一份表單。
(電腦版限定)滑鼠點擊輸入區域時有提示性的視覺效果。
(手機版限定)鍵盤配合輸入區域性質做變化(輸入號碼時變換為數字鍵盤)。

滑鼠點擊輸入區域時,左側的圖標會變色參考網站

3. 區域標籤(field labels)
− 簡短敘述輸入區域的內容性質(「您的姓名是」可以簡化為「姓名」即可)。
− 不要都用大寫英文(「PASSWORD」跟「Password」相比,前者難以閱讀)。
− 區域標籤對齊方式(建議放置在輸入區域上方或是靠左側對齊)。
− 不要將所有的區域標籤以placeholder的方式呈現。

左側表單區域標籤放置在輸入區域上方。右側表單區域標籤在輸入區域左側靠左側對齊。參考網站
延伸閱讀:
Label Placement on Forms

4. 功能按鈕(action buttons)
− 請回到文章開頭參照button的部分。

5. 回饋(feedback)
− 向使用者說明表單有成功提交,或是提交失敗。

針對以上的五個主要組成要素,下列文章提供正確和錯誤的實例分享:

若表單有不少提示性文字或訊息(額外補充資訊),可以參照這篇文章:

若是要設計國際化表單,格式該如何做變換,可以參照這篇文章:


以上是我對button、input、form的相關資訊做的整理,希望可以幫助大家設計出一份能和使用者進行良好溝通的表單。有任何想法都歡迎跟我分享噢!

00nyrhtak

Written by

00nyrhtak

先好好過生活,才能好好做設計 ✨💜

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

More From Medium

More on UI Design from AAPD — As A Product Designer

More on UX from AAPD — As A Product Designer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade