手機版網頁設計按鈕、文字和間距UP! UP!
文章發佈時間：2013-06-11
現在越來越多人是用小螢幕的手持裝置上網瀏覽網頁，以前設計的重點是如何讓一個網頁能讓三種尺寸的螢幕(手機、平板、PC)都能有相同的視覺，
所以有可變式網頁架構出現，設計師不用一個網頁要做三次。
當手持裝置的解析度開始追上PC的時候，設計師不用煩惱版面大小的問題，但是另個問題就來了，小螢幕的裝置幾乎都是用手指在操作，而這個比重是越來越重，讓視覺設計也必須認真考慮到這點如何增進從滑鼠變成手指在使用上的便利性，也就是”點擊”的便利性。以後可能也要以這為出發點作為視覺設計重點，因為不好使用可是會直接影響網站的瀏覽量。
而UX Magazine 在 Mashable 刊登了一篇文章〈 6 Easy Ways to Make Your Website Tablet-Friendly 〉，特地提出六點改進方法。
1.加大按鈕的尺寸、margin（邊界）
對大部分使用者的食指來說，平均寬度大約是 45-57 像素，所以至少要讓你的「buy」或是「OK」按鍵長大點吧。
2.確保連結的明顯
不需要將游標移動至目標上方也能讓使用者知道「那可以點擊」。為你的文字超連結設計更顯眼的顏色，而且別害怕使用底線作為預設的超連結樣式。
3. 請增加字體大小
3. 請增加字體大小
為了讓網站內容更好讀，將字體稍微調大一點，造成的效果就很可觀。
4. 適當的留白
如果版面設計上允許的話，為網站導覽選單上的東西增加 padding（留白），增加個 5-10 像素。
5. 增加頁面與內容區塊的 magin
這可以增進可讀性並降低視覺上的複雜度。畫面上「留白」的空間可以讓使用者有種印象，感覺網站上的內容是比較容易消化的，尤其跟一般內容多到滿出來的網站比起來。
6. 加大輸入框
讓網站的訪客更容易輸入資訊。改善你的表單後，很有可能會因此讓網站的轉換率提高。
以上6點其實好幾點都是以前在網頁設計上要避免的，因為太大的button、文字或是間距在PC上看其實比較不美觀，但是在這幾年用手指觸控趨勢不變的前提之下，該是讓你的button、文字還有間距UP!UP!長大了。
來源：http://blog.indecplus.com/
