原文：Character count design: some guidelines
作者：Jimmy Breck-McKye (2012-05-30)
阅读时间：7m22s
字符数限制在互联网产品中无处不在，尤其是在依赖于用户产生内容的应用中。尽管如此常见，字符数限制却总被设计得很糟糕。值得庆幸的是，通过遵循以下 6 个关于输入长度限制设计与字符计数器显示的简单原则，就可以使输入受字符数限制的文本变得简单方便。
总的来说，我有以下 6 个设计字符有限的文本域的主要准则。
1. 避免对文本输入作字数限制；
2. 为字符数限制增加视觉提示；
3. 在字数到达限制之前显示字符计数器；
4. 允许用户在达到字数限制之后继续编辑文字；
5. 允许用户方便地查看所有文本内容，以决定哪些内容需要被删减；
6. 为用户的内容提供其他渠道
现在，我们依次来看这些原则。
首先，要避免对文本输入作字数限制。
由于技术或体系结构上的限制，我们经常被迫需要对输入字数作出限制，因此导致输入变得非常不方便。但除此之外，这些限制毫无必要。有时我们本可以重新设计界面来满足更长长度的文本输入，有时我们草率地对用户是如何构建他们的文本的作出假设，有时我们并未作深入思考就对字数作了限制。我们要多思考与探寻是否有限制用户之外的其他替代方案。
第二， 为字符数限制增加视觉提示。
200 个字符有多长？你能想象得出来吗？300 个字符呢？40 个呢？抽象的数字对于人们来说并不重要，我们很难猜出一个特定的字符限制对于文本输入意味着什么。所以，我们需要为用户提供其他的提示以帮助他们更好的理解内容的最大输入长度，以及他们当前已输入的长度。
有一种方法是，设计尺寸合适的输入区域，以便粗略地表示允许输入的最长文本长度。虽然这很难做到绝对准确（因为 140 个字母「i」将比140 个字母「w」显示的行数更少），但这种方式可为用户提供一个直观的字符限制的感受。例如 Twitter，发帖输入框的尺寸就大致等于输入最大限制字数时的尺寸。
Twitter 的发帖输入框
另一个方法是，当用户的输入接近最大限制字数时，改变字符计数器的颜色。例如 Stack-exchange 网站的评论输入框，当评论字数逐渐增加，计数器从灰色变成金色，最后变成红色。
Stack-exchange 网站的评论输入框
第三，在达到最大字数限制之前，显示字符计数器。
你一定不希望用户在提交内容时才发现字数超出限制了，因为这将迫使用户不得不重新思考他们已经输入的内容，甚至是其他他们已经计划好提交的内容的结构。从认知上来说，这将耗费非常大的成本。你一定也不希望用超出字数限制的错误提示来打扰用户，所以，最好从一开始就显示字符计数器。如果计数器使你的设计变得凌乱，可以考虑给它设置一个不显眼的样式，比如灰色，当用户输入更多文字时，逐渐增强它的显眼程度。
第四，允许用户超出字符限制，并且在超出之后进行编辑。
有一些字符数限制的设计是，一旦用户输入的文字达到最大限制，就禁止输入更多的文字。这是一个非常糟糕的设计，原因有两个。第一，它打断了用户复制和粘贴的操作；第二，提炼和修改文字内容比在输入完整文字前进行编辑来得更容易。允许用户输入完整的文字内容可帮助用户记住页面上的主要概念，然后开始编辑他们的材料。
第五，方便用户清楚了解哪部分内容是需要被删减的。
正如以上第 2 点所提到的，对于用户来说，一定数量的字符数在字数层面上究竟意味着什么是难以理解的。这就是为什么以其他的方式提示用户当前已超出限制的程度是非常重要的。调整输入区域的尺寸，以暗示可输入的内容数量，这是一种不错的方式。但另一种更好的方式是，高亮用户已输入的文字中超出字数限制的那部分。
例如下图的例子中，超出字数限制的文字为红色，所以用户可以一目了然哪些内容是需要被删减的。同时，这里还将红色的错误提示信息与触发它的文本联系起来了。
超出字数限制的文字为红色
第六，为用户的内容提供其他的渠道。
如果用户正在打破字符限制，那么很有可能他正在以一种不恰当的方式使用你的输入区域。因此，你可以使用字数限制的错误提示引导用户使用更适合他们的内容长度的渠道或者输入区域。
比如，在 Facebook 中，当用户发布过长的 Status 更新时，将会弹出错误对话框，建议用户使用长度不限制的 Notes 功能。这促使用户使用适合冗长日志的 Statuses 功能，而不是专用的日志系统。如果你的用户正在打破字符限制，仅仅因为他们误解了某一功能的使用目的，那这个方法将会有所帮助。
用自己的话总结一下，就是：
1. 在对文本输入作字数限制前先考虑是不是有其他方案。
作字数限制，并不是一种很好的方式，你有可能并未对用户的这个输入作深入了解，就草率决定了这个最大限制字数。
2. 为这个「最大限制字数」增加一些视觉提示。
单纯地放一个数字「200」对用户来说是比较难理解的，他们并不知道 200 个字是什么概念。
增加提示的方式：比如，将输入框的初始高度设置为刚好可以输入最大限制字数的高度；或者，当用户的输入逐渐接近最大限制字数时，逐步改变字符计数器的颜色。
3. 一开始就显示字符计数器，而不是等到用户的输入超过最大限制字数时才显示。
当用户的输入超过最大限制字数时才显示字符计数器的话，用户可能需要重新思考和安排他们已经填好的内容，甚至可能因为这一个修改影响其他本来就已经准备好录入的内容。
如果担心你的界面设计因为字符计数器显得杂乱，可以给它设置一个比较不显眼的颜色 (比如灰色)，当用户输入更多字数时，再慢慢提高字符计数器的显眼程度。
4. 在用户的输入达到最大限制字数后，也要允许用户继续输入。
有一些字符计数器是，当用户达到最大字数限制后，就禁止用户输入了。这是很糟糕的一种设计方式，首先，这样可能使用户复制粘贴的内容被截断；另外，在原本完整的文本内容上进行修改总是比在被截断所以不完整的内容上修改来得容易。
5. 当用户的输入超出最大限制字数时，让用户清晰地知道哪些内容是超出的。
比如，第 2 点中，将输入框的初始高度设置为刚好可以输入最大限制字数的高度，这样，用户就知道超出这个输入框的部分就是超出的，需要把内容删减到能在这个输入框内完整显示；另一个更好的方式是，将超出最大字数限制的那部分文字变为红色。
6. 如果用户输入的内容超出你限定的最大字数，说明他们很可能正在以一种不适合的方式使用你的这个输入区域，你可以使用错误信息引导用户改用更适合他们想输入的内容的途径或文本框。
其他相关讨论：What is the best placement of character counter relative to the text field?
以上翻译包含个人理解，仅作为个人学习笔记使用。如有错误，求指正呀，非常感谢 ^^
感谢原文作者及所有分享想法与经验的人 ^^
网友评论