LCCNET 聯成電腦

菜鳥救星

m_nav_line m_nav_line

HOT影片

m_nav_line m_nav_line

聯成電腦設計好文分享:表單不單純—深究

icon_fb icon_twitter icon_google LINE it!
article_main_img

文、00nyrhtak

 

 

 

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

 

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

 

 


 

 

 

button

 

W3school上關於button的介紹:button tagbutton CSS
Buttons Guidelines:iOS Human Interface GuidelinesMaterial 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的主要按鈕(參考網站

 

 

 

 

文章提到的按鈕狀態:
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 taginput typesinput attributes

 

 

► Design Better Input Fields

 

這篇文章著重於input的樣式設計,以下擷取文章重點:

1. input需要有清楚的輸入區域。
2. input的寬度要配合內容做調整。
3. input的結構要配合內容做調整。

 

 

作者另外特別提到placeholder的使用。為了不要造成使用者混淆,要避免以下三種情況:

1. 把placeholder作為標籤。
2. 把placeholder作為輸入範例。
3. 把placeholder作為提示文字。

 

 

作者最後的結論是希望大家在表單設計中可以減少placeholder的使用,文中的參考文章也早在2014年就提到,錯誤的placeholder使用會降低表單的易用性。

 

錯用placeholder的範例。若使用者需再次確認輸入內容性質必須先刪除輸入的資訊(參考網站

 

 

 

 


 

 

 

form

 

W3school上關於form的介紹:form tagformsform 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

A

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策