产品经理的UX——移动端的输入操作设计

   <p><img src="https://simg.open-open.com/show/987385633ca31b91100aa05b8b185254.jpg" alt="产品经理的UX——移动端的输入操作设计" width="600" height="386"></p>    <p>UX是User experience的缩写，指用户体验，UX设计指以用户体验为中心的设计。UX Planet （uxplanet.org）上面讨论很多关于移动设计里做好UX的技巧，很多观点都非常具有指导意义。</p>    <p><strong>一.用户的输入</strong></p>    <p>在移动端的UX设计有很多挑战，你需要在一个什么有限的屏幕大小下去处理各种输入。因此在设计的时候要能够让用户可以通过非常简单直观的方式去完成输入，并提供给用户完整但简洁的提示。</p>    <h3><strong>1.文本输入框</strong></h3>    <p>文本输入框（Text Field）最常用的一种输入方式。一个体验好的文本输入，要能够让用户快速地完成输入，在用户输入时为用户提供帮助、在用户出错的时候要能够让用户明白错在那里。</p>    <p>用户输入时，要求输入的数据类型应该和当前的键盘相匹配。</p>    <p>比如要用户输入手机号码，那么焦点落到输入框时，弹出来</p>    <p>的应该数字键盘。这样减少了用户切换键盘的麻烦。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/93188ced4e9cb9a07e3505299fe36bf2.png" alt="产品经理的UX——移动端的输入操作设计" width="750" height="780"></p>    <p>还有一个提升输入速度的方式那就是自动切换大小写，即首字母为大小，第二个字母开始为小写。这个适用于在英文的输入中，比如输入英文名，或者英文句子的首行。</p>    <p><strong>提供缺省值和自动完成</strong></p>    <p>缺省值提示可以帮助用户快速完成输入，这个缺省值可以是用户之前输入过的文本，或者系统提供的一些热门词汇。</p>    <p>自动完成是在用户输入的过程里，根据用户的输入来给出建议。用户可以通过系统的建议来自动完成输入。当然这依赖于系统建议的精准度。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/967023afb8ec9d658aa1562bf7af5158.png" alt="产品经理的UX——移动端的输入操作设计" width="281" height="500"></p>    <p><strong>输入提示信息</strong></p>    <p>用户在输入过程中应该给予用户足够多的帮助。这种帮助包括对输入项的解析，以及对输入信息的提示。同时，任何一个标题（Label）都应该是简洁明了的。</p>    <p>除了常规的在输入框左上角写明Label外，有一种简洁的做法是使用Inline Label。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/d3ed56b76e7dbc42e88ea058d03fce40.gif" alt="产品经理的UX——移动端的输入操作设计" width="400" height="300"></p>    <p>当然这种做法虽然简洁，但不好的地方是当用户开始输入之后，就看不到这个提示内容了。甚至有些用户可能会误认为这已经填写内容了。</p>    <p>用户Floating Label的交互方式可以解决这个问题：</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/82002abfb54008cffbf92052f868a061.gif" alt="产品经理的UX——移动端的输入操作设计" width="800" height="600"></p>    <p><strong>输入验证</strong></p>    <p>用户是有可能输入出错的，系统应该给予用户及时的反馈——如果我做对了，请让我知道；如果我做错了，告诉我错在那里。</p>    <p>给予用户的提示不应该中断用户当前的操作。不要用弹出框让用确认的方式，在恰当地位置（比如输入框下面）给出说明即可。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/870b5e9ba982045afe79bbb00fb9a31b.png" alt="产品经理的UX——移动端的输入操作设计" width="550" height="600"></p>    <p>同时提示也应该有对提示的颜色区分。一般情况下，红色对应错误，绿色对应正确，黄色对应警告。</p>    <p>而对于有字符数限制的输入，当用户输入超过限制的字符时，还应该红色标记用户输入的字符数和限制字符数。有些系统在处理这个问题的时候，是直接不让用户继续输入，或者只提示用户输入的字符超出限制了，这都是不好的做法，前者让用户摸不着头脑，而后者则需要用户不断尝试减少多少才不超出。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/6d2f7308356e53512da7ccafb7a2e08e.png" alt="产品经理的UX——移动端的输入操作设计" width="281" height="500"></p>    <p><strong>2.Radio 按钮</strong></p>    <p> </p>    <p><img src="https://simg.open-open.com/show/ae391786a6e77e1640a23071430ae80e.jpg" alt="产品经理的UX——移动端的输入操作设计" width="592" height="209"></p>    <p>Radio按钮用于在用户有多个选项，但用户只能选择其中一个的时候。让用户进行有限选择，而非直接输入的方式，可以比较有效地减少用户输入错误的数据。</p>    <p>当需要用户进行设置的时候，使用Radio来让用户进行操作是一种比较好的做法。</p>    <p>在使用Radio的时候，需要注意的几个关键点是：</p>    <p>1.选项的排序应该按逻辑排列，不要简单地按字母顺序来排。当然有时候这个也有例外，比如在国家选择里，你要选择中国（China），在按字母顺序排列的选项了用户可以非常快捷地通过定位到“C”开头的选项来找到"China”。</p>    <p>2.选项的说明应该简短易懂，这个文案的功夫。</p>    <p>3.进行默认选择，以及None选项（在用户可以不选择的情况下）。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/912e2a594a33dfcbc94729d89266781c.jpg" alt="产品经理的UX——移动端的输入操作设计" width="800" height="367"></p>    <p>4.选项垂直排列，不要水平排列。下面这种是糟糕的做法。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/9ef6b9d275beacf8f6a197937e202652.png" alt="产品经理的UX——移动端的输入操作设计" width="800" height="84"></p>    <p>当然这个也不是绝对，但如果你要将选项水平排列的话，选项应该尽可能少，并且可点击的区域足够大，比如下面这种：</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/3578f60192efddd200e2261ae4a2929b.png" alt="产品经理的UX——移动端的输入操作设计" width="392" height="206"></p>    <p>5.Radio的点击区域要包含整个Radio区域（按键和标签），即右边这种方式：</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/f22c5c40e0eb8e882cb9472ac7fbac15.jpg" alt="产品经理的UX——移动端的输入操作设计" width="557" height="100"></p>    <p>6.不要在选项之下，还有选项。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/f28a29ab2718895d367565e66d0a9159.jpg" alt="产品经理的UX——移动端的输入操作设计" width="636" height="320"></p>    <p>7.你当然也可以用下拉列表做选择选项，但如果选项数量少的时候，用Radio是更好的做法。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/586d26deb5ceaa585ae3f9e39bd0655c.jpg" alt="产品经理的UX——移动端的输入操作设计" width="643" height="100"></p>    <p><strong>3.Slider 滑杆</strong></p>    <p> </p>    <p><img src="https://simg.open-open.com/show/bed8f0dff5404214fa1e8faaa19725a1.gif" alt="产品经理的UX——移动端的输入操作设计" width="750" height="400"></p>    <p>滑杆输入其实也是数值输入。当我们对输入精确的数值不那么在意的时候，采用滑杆的方式更加方便、体验更好。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/5d26d8dc75ba33a2dc31d2fa2e3b54cc.png" alt="产品经理的UX——移动端的输入操作设计" width="281" height="500"></p>    <p>比如音量的输入，我们当然不在意音量的精确数值是多少，我们在意的是现在的音量是高了还是低了，我们想要调高还是调低。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/3c22db7135b2eecdba46abdd0bf4f13d.png" alt="产品经理的UX——移动端的输入操作设计" width="281" height="317"></p>    <p>当然， 如果有时候还需要在调整完毕之后，查看下当前状态的数值，我们可以将对应的数值标示出来。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/5901031786709450a40f65e5bcdc5660.png" alt="产品经理的UX——移动端的输入操作设计" width="281" height="500"></p>    <p><br>  </p>    <p><br> 来自：http://www.jianshu.com/p/89f83a369901<br>  </p>    <p> </p>