电话输入和你:设计师的基本用户界面指南
Telephone number inputs are a pretty common UI feature for tons of websites and applications. Seems simple enough to implement, right? Well, actually we need to account for a lot of different factors: What format will users input the number? Will we support international numbers? In this article, we’ll explore some background information, leaving no stone unturned, to help us effectively make these decisions, and we’ll share practical UI design tips.
电话号码输入是大量网站和应用程序的一个相当普遍的用户界面特征。实现起来似乎很简单,对吗?嗯,实际上我们需要考虑很多不同的因素。用户将以何种格式输入号码?我们会支持国际号码吗?在这篇文章中,我们将探讨一些背景信息,不遗余力地帮助我们有效地做出这些决定,并且我们将分享实用的UI设计技巧。
With any input, the form of data we ultimately expect to receive is an important consideration. But, since this is a phone number we’re talking about, this should be totally simple! But, it’s not quite so cut and dry. The problem quickly becomes apparent when you consider just a few of the variations a user might try to input the US-based number “888-400-5485”:
对于任何输入,我们最终期望收到的数据的形式是一个重要的考虑因素。但是,既然我们讨论的是一个电话号码,这应该是完全简单的!但是,这并不是那么简单。但是,这并不是那么简单的事情。当你考虑到用户可能尝试输入美国号码 "888-400-5485 "时,这个问题很快就变得很明显。
![](data:image/svg+xml;charset=utf-8,%3Csvg height='893' width='1000' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E)
![](数据:image/svg+xml;charset=utf-8,%3Csvg height='893' width='1000' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E)
And this list could go on, and on, and on. But hold the phone! Further still, we’re just talking about US-based numbers right now—the level of complexity grows when we add international concerns into the mix. That can be a lot to digest, so let’s briefly examine some of the factors that can influence this wide range of variation.
这个名单可以继续下去,继续下去,继续下去。但是,请拿着电话!此外,我们现在只是在谈论基于美国的数字--当我们把国际关注的问题加到一起时,其复杂程度会增加。这可能是一个很大的消化,所以让我们简要地检查一些可以影响这种广泛的变化的因素。
If you’re in the United States, you’ve probably been exposed to the “+1” at the beginning of numbers. This is the country code for the USA. Internationally, countries can have their own code, and some are shared between nations. For inst...