UI 設計小技巧 – 電話號碼欄位－網路資訊

網站建置　網站改版　客製化網頁設計

相信大家都有在介面中被要求填入電話號碼的經驗吧！是不是有時會發生格式難以理解而輸入易錯亂？亦或修改困難 … 等體驗不佳的情境？此時可能還因無法順利完成簡單的任務而責怪自己！其實這些在設計上都能被優化，只要設計師與工程師能多點同理心，考量上更加周延，這些情況絕對能避免的。而在這篇文章中，大舌頭將與大家分享「表單（form）UI」中關於「電話欄位」的設計細節。

在我們討論設計的小技巧前，先來看看一些惡搞的輸入方式。在大笑之餘，其實大舌頭是要強調不良的設計，到底會帶給使用者多大的麻煩？

基本電話號碼格式介紹

如果是國內的服務，通常不會要求區碼（如高雄是 07）與電話號碼分開填寫，假使需要分開填寫，使用者也不太會搞混；但如果是需要填入國際電話號碼形式，情況就複雜許多，很多人也會搞不清楚。

常見的輸入格式如下（非撥打）：

國碼＋區域號碼（有些要去零）＋市話
ex：+886 7 123 4567
國碼＋手機號碼（有些要去零）
ex：+886 910 123456

另外，補充一點小知識，在台灣區碼分為 2 碼或 3 碼，後面的電話號碼分別為 8 碼與 7 碼。例如：(035) 是大新竹地區、(07) 是大高雄地區。

輸入欄位的樣式

基本上，電話欄位輸入樣式分為單欄與多欄式，以下簡單描述其操作方式與優缺點：

單欄設計

最普遍的電話號碼輸入樣式即單欄式，也就是在前面放置一說明文字（或有 icon 輔助），後方放置一欄位，讓使用者填寫。這樣的方式相較於多欄位，它能避免使用者在跳格輸入時點擊欄位的動作，以及較少的程式碼，但也會造成一些問題或不便，例如：當電話號碼過多時，使用者不易閱讀，或是使用者不知道該如何提供號碼格式 … 等（需不需要加國碼、區碼？）。