国家选择器，通出现在当你新注册一个网站账号，检查一个电子商务网店，或者报名参加一个会议。常规的设计是一个由所有国家组成的下拉列表。
然而，当我们组织一大批用户测试该设计的可用性时，我们发现针对多国家选择器的可用性问题。所以，我们决定重新设计国家选择器。这篇文章重在介绍我们最终方案前的四次迭代设计。
首先，让我们看一下传统的下拉列表式的国家选择器存在的诸多可用性问题：
1、缺乏概览
看到超过20多个未归类的选项时，就会令人眼花缭乱，更别说那些动不动就包含上百个选项的国家选择器（按照ISO 3166标准，有249个国家）。
2、排序规则不明晰
看到一个大数据量的列表时，用户关心的第一件事往往是搞明白列表项的排序逻辑。但是因为国家选择器列表中通常将3-5个热门选择放在最前面，就造成排序逻辑在咋一看下还不清楚。
3、滚动问题
这种滚动大的下拉列表会带来多个问题。如果用户将鼠标移出了列表下拉区，很大意图上他更想要滚动这个页面内容，应该讲下拉列表隐藏掉。然而，在其他浏览器中，只要有焦点，下拉就会是使列表滚动，这就可能给你带来错误的数据。
4、UI不一致
下拉列表的UI在不同的浏览器和不同的操作系统间会有所不同。但是它们不光会看起来不一样，使用方式可能也会不同。比如，在Mac端Safair浏览器中，用户必须将鼠标移至两个控制箭头上来上下滚动（亲测现在已经支持滚动列表内容，不显示滚动条），在Firefox中则使用传统的滚动条来滚动。而现在手机上，则会看到巨变的UI设计。
5、缺乏上下文
移动设备的屏幕空间非常有限，这就意味着你在页面上下滚动时仅能显示更少的内容，就导致你要找到选项需要花费更长的时间。
6、打破操作流
几乎所有用户，甚至那些原本在表单内容间切换的用户也需要在滚动列表的时候用到鼠标，这就减慢了这个过程。
这些可用性问题都是些小问题，它们并不会每次都出现在任何人使用下拉列表式国家选择器的时候。但是当这些问题都加在一起，连同其他一些小问题都出现在你的网站上，它们就会降低整体的用户体验，最终被用户遗弃。
在这些想法下，我们开始重新设计标准的下拉列表式国家选择器。以下是我们经历的四次迭代过程。
迭代1：打字Vs滚动
摆脱数以百计的选项和滚动的问题的最简单的方法是简单地替换下拉列表为一个文本框,让用户自己输入国家名称。但是这种情况只有在用户知道该输入什么的时候才有效，因为那里没有任何识别效果（这永远不会为航运选择工作,因为用户必须猜选项的名称）。但是一个国家选择器是一个文本域的好的候选者,因为它公平的假设每个用户知道他们居住的这个国家的名称。
因此，我们设计了一个文本域。虽然有很好的可用性，但是不利于快递员交付产品。下拉列表提供了数量有限的下拉选项,而文本域则提供了无限的输入（用户可以输入任何他们想输入的内容）。为了限制那些我们后台系统能够处理的输入值（如国家），文本字段需要自动补全并接受限制。这将使我们能够100%准确的将文本字段的输入映射到国家，这些则是我们的后端系统(快递员)能识别的。
迭代2：拼写错误和顺序
虽然用户可以知道自己国家的名字,他们不可能会知道我们的系统如何命名它。如果用户居住在US，但他遗漏了一些文本，比如输入成“nited states”，或者只输入名字的部分信息，比如输入“America”（取代“United States of America”），这样的结果是没有任何正确的结果出现。
这是因为一个典型的自动补全文本域寻找那些不仅是拼写正确而且输入顺序一致的结果。
很多的Web服务，尤其是电子商务商店会有地理限制，国际用户非常清楚这一点。即使那些很大的网站，诸Amazon,Hulu和Spotify，都会在他们的某项或全部服务上有严格的地理限制。虽然来自US的用户期望他们的国家被支持，但任何国家的用户都可能因为无法找到他们国家而在检查他们的错误输入之前放弃你的网站。
简而言之,国家选择器应该接受遗漏和顺序问题。为了实现这一目的，只需使用松散比较部分匹配的方法：
迭代3：当Netherlands不叫“Netherlands”
虽然我们现在意识到了遗漏和顺序的问题，但实际上还是有其他的问题。一些国家名称可能有几个拼写，比如Netherlands有时被称为Holland。就地理位置而言，它们是一样，但是一般人都会说它们在“Holland”度假，而荷兰人则一般会拼写自己国家名称为“Netherlands”。
当我们要求用户去输入一个国家名称，我们必须考虑到所有可能的拼写。这其中包括同义词，当地的拼法，常见缩写和国家代码。当使用所有这些拼写时，比如USA表示United States，或者Schweiz、Suisse、Svizzera和Svizra表示Switzerland，DE表示Germany，一个典型的自动补全文本域（下拉列表）就会出错。
从可用性的角度来说，这自然是不能接受的因为这都是普通的拼写，人们通常就会在文本域中输入它们。
在我们重新设计的选择器中，我们就把这种一对多的映射加了进来：
迭代4：当“United States”比“United Arab Emirates”更普遍时
在苹果网站自动补全文本域中输入“United”时，它给出以下结果：
下拉列表简单地按照字母表排序。但是因为我们不再需要滚动很长列表了，似乎也不再非得按照字母表排序。一个更自然的排序规则是按照热度排序。苹果应该是考虑优先把United States排在首位才对。就像一份英国报纸极可能想把United Kingdom放在首位。
为了适应这个问题，所有的值（国家）应该被给一个权重。默认情况下，它们是平等的，然而每个网站应该按照他们的国家选择热度给予相应的权重。
解决方案：国家选择器的重新设计
解决方案解决了下拉列表式国家选择器问题，是一个经过重新设计的选择器。它解决了遗漏，拼写顺序，同义词和优先级问题。
译自：：https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
