文、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使用會降低表單的易用性。

 

 

 

 


 

 

 

form

 

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

 

文章標籤

創作者介紹
創作者 lccnetvip 的頭像
lccnetvip

聯成電腦--在成長的路上彼此相伴

lccnetvip 發表在 痞客邦 留言(0) 人氣()