在飞镖游戏中，红心非常难以命中，原因在于红心是整个镖盘上最小的目标。同样，推及到触控设备中时，我们的“目标”大小该如何设定呢？
小按钮比大按钮更难于操控。当设计移动界面时，最好把可点击目标的尺寸做大一点，这样更利于用户点击。但这个“大”究竟需要多“大”，才能方便大多数用户呢？很多移动开发者也非常想知道这个问题的答案，最后都在各平台的UI设计规范中找到了答案。
(Image credit: ogimogi)
移动平台设计指导规范告诉了我们什么？
在苹果的《iPhone人机界面设计规范》中指出，最小的点击目标尺寸是44 x 44像素。微软的《Windows手机用户界面设计和交互指南》中建议使用34 x 34像素的尺寸，最小也要26 x 26 像素。诺基亚开发指南中建议，目标尺寸应该不小于1cm x 1cm或者28 x 28 像素。
尽管这些指导规范给我们列举了各平台下可点击目标的尺寸标准，但是彼此的标准并不一致，更无法和人类手指的实际尺寸相一致，他们的建议尺寸比手指的平均尺寸要小，这会影响触摸屏下对于点击目标的精准度。
小的点击目标会导致大问题
可点击目标尺寸太小，对于用户体验来说就非常糟糕，因为如果要更精确的触控。用户需要调整手指的操作方式，从指心操作，变为指尖操作，这样才能操作尺寸较小的目标。使用指心操作通常会整个覆盖操作对象，让用户无法分辨他们所要操作的目标，也无法收到操作过程中的视觉反馈，也就无法知晓，他们的操作是否有效。当用户不得不用指尖进行操作时，又出现了一个新问题，这种操作方式非常的慢，而且很吃力，体验很差。
问题不仅这些，目标的尺寸过小还会导致失误的触摸操作。因为尺寸小，所以容易拥挤在一起，用户容易触碰到附近的目标，导致运行结果非用户所愿。手指太大，目标尺寸太小，一根手指的宽度大概能覆盖两个目标的宽度。如果不按压到错误的位置，就会导致错误的操作。食指容易出错，但是拇指更容易出错。因为拇指更大、更笨拙。有时候用户会倾斜拇指，使用拇指的侧边进行操作，但是目标尺寸过小，依然失误频繁。
在移动用户的日常操作中，拇指的使用非常频繁。有时用户无法腾开两只手操作，只能用一只手握住手机，用拇指和食指操作。在这种场景下，用户的操作精度有限，就需要提高目标尺寸来避免操作错误，这就是所谓的友好的触控体验。
食指操作下的平均像素宽度
MIT触摸实验室的做了一项研究，以手指指尖作为调查，分析其感觉机能。研究发现，成年人的食指宽度一般是1.6——2 cm。转换成像素就是45——57 px，这比那些指导书上建议的宽度都要宽。
45——57 px的目标尺寸非常够用，用户可以将整个手指紧贴在目标上。在操作的过程中，用户也能看到目标的边缘。这样用户与控制对象之间的反馈与信息传达变的非常清晰，用户也能知晓他们的操作是否有效。因为尺寸大，定位更快，拖移也更方便。费茨法则中提到过，目标越小，操作耗时就越长。小目标减慢了用户的操作速度，因为需要用户集中精力去精准定位。手指大小的目标则不一样，这种目标给予用户足够的空间操作，容错率也很高。
拇指操作情况下的像素宽度
也有很多用户用拇指敲击屏幕上的目标。拇指比食指要宽，平均宽度大概在2.5cm，转换成像素是72 px。
72像素的实际使用效果很棒，更容易定位、操作的舒适感更好。同样可以看到操作目标的边缘。这意味着用户不用费力的调整手指，使用指尖去操作了。也不用倾斜拇指，用拇指侧面点击目标。
在《小型触摸设备上单手操作研究：关于拇指操作的目标尺寸》这篇文章中发现，目标尺寸的增加会降低失误操作的次数。更多的空间提供了更高的容错率和更精确的操作，同时因为大型的尺寸，目标的表现力也变强。
另外一篇《移动端触摸设计：关于目标选择的关键》中也表达了同样的看法。
手指大小的目标尺寸很理想，但也有特殊情况
将目标尺寸的大小，设置为跟手指大小相近，其中的好处不再赘述。但并不是适合所有的设计场景。在移动设备上，空间有限。这就意味着，如果每个目标的大小都很大，那么屏幕空间根本不够，就需要不断的翻页，这在体验上很糟糕。你需要测量屏幕尺寸，然后计算比例，搞清楚“在这种尺寸的屏幕上，合适的、最大的目标尺寸是多少？”倘若你按照手指大小进行尺寸调整，整个界面的比例很糟糕；再次按照比例调整后，最大的目标尺寸效果也不假，那么就只能使用指导规范上的建议尺寸了。
对于平板设备来说，情况就没有手机那么复杂，因为平板的空间更多。不用害怕没有空间去放置点击目标，空间足够，你可以非常悠然的通过提高尺寸来提高操作适用性。手机是最麻烦的，点击目标的尺寸非常不好拿捏。但正是因为手机的空间有限，容易操作失误，所以才需要设置真实手指大小的目标尺寸。设计师的挑战就在于，要想办法，让屏幕上大多数的目标，尺寸都跟手指大小一致。但也有好处，这迫使设计师设计时更注重功能性、风格更加极简。
为游戏应用设计拇指大小的点击对象
我们无法推测的问题是，用户使用你的应用时，是用食指操作更多？还是用拇指更多？因此，针对这一点，我们要非常细致的做调研，然后设置合理的目标尺寸。 然而，如果你的应用是一款游戏的话，大多数用户会使用拇指。这就是为什么很多游戏应用中，一些控件的尺寸一般有拇指那么大，这样用户就能更稳固的双手持握，更精准的操作。
has larger touchscreen targets
通过调整目标尺寸的大小，结合实际的应用情况，能够有效的提高移动端的适用性，同时提高用户体验。不管你的应用是游戏还是别的什么。触摸屏上的目标就是用来让用户点击的。如果用户需要去想“我该怎样去点击，才能完成精确的操作”，需要再交互前思考方法，需要调整操作方法，使用多种方法才能完成交互。这说明这款产品的交互设计是糟糕的。在这篇文章里，我抛出了个人的一些观点，在触摸即将成为操作方式的一统时代，如何打造友好的触控体验？这是我们将要面临的问题。期待更多的想法，以及更规范的标准。
感谢阅读！
看完这篇你只要记住2点，食指点击目标尺寸是44 x 44像素，拇指是72 x72像素。所以在画界面的时候，要注意这2个尺寸。
小技巧：在导出ICON的时候，假如你的ICON实际尺寸是32×32，那么你可以导出50x50PNG透明背景的ICON，重点是加了透明区域。这样就更方便点击了。
原文地址：
翻译：优设番茄酱
转载请注明： &
学UI就上学UI网！越努力，越幸运！
“学UI网 ”最值得关注的UI学习平台！ 每天发布高质量的设计教程和分享设计经验，服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课（），给大家提供更多免费学习的机会。想成为设计师的你快来关注吧！
【特色推荐】
” 海量APP截图，让你灵感爆发！国内最好的APP截图站。
“” 每一个作业题都尽量配有教程，交作业就有大神免费帮你点评作业，爽歪歪！
“” 专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
你可能喜欢的：商城网站用户体验分析 – 购物按钮 | 设计达人
爱设计，爱分享。
商城网站用户体验分析 – 购物按钮
赞助商链接
今天主要分析一下商城网站的购物按钮，因为项目是做外贸的，所以我收集大部分都是外贸网站，虽然是普通的一个按钮，但也要注重它的用户体验，下面让我们来分析一下：
一、按钮风格
从上面例子可以看出，只有一部分购物按钮从颜色和设计外形上是比较一至，其它都很不重视，做得比较好的有otterbox,aliExpress,dhgate,wikirig，当然还有amazon，这里我忘了收集amazon的了-_-…
值得注意的还有，不知道大家有没有看出，BUY NOW 或 CHECKOUT的这类按钮都不会出现购物车或是$货币符号，为什么呢，原因应该是关系到心理学的问题，因为给钱对每个用户来说都是不喜欢的，我一点击就没了几百大洋，心理肯定很不爽吧，所以尽量避免带这种方式的设计。
二、风格统一
风格统一除了可以让用户容易识别按钮类型和加深用户感知度外，这样做更容易让用户记住你网站的按钮风格。典型案例:amazon
三、按钮唯一性
在制作购物按钮的时候，你应该收集大部份商城网站的按钮设计，不能做得太像，也不要做得太花哨，有些人把图片做得很大，没必要，不然下载会很慢，会让用户产生不良感，这点amazon做得很好，我想大部份人都对它的按钮都印象深刻，只要看图就知道它的来源就是amazon。还有你设计的时候也不要太过另异，比如做成一个实体化的按钮（我想不会有设计师这么做吧…）
另外还要说下TJPB,everythingicafe的按钮设计也是不错的，值得参考，它的小锁图标和文字，让用户产生一种安全感（国外用户很注重隐私），而lightinthdbox的Contiune就没有Secure好了。
作者: commy
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
艺术与审美入门之书
设计师必看
手机APP设计
新手推荐！
Web用户体验入门书籍
web前端&设计群CTA即call to action,行动呼吁按钮。本文从按钮的大小，样式，布局和颜色等一切按钮的相关因素出发，分析了怎样才能设计出一个体验良好的CTA按钮。
按钮是一种最重要的需要设计的要素，尤其是你要用它们去要求行动时。如果你等到最后的几分钟，你也许会冒着用户将跳转的风险。
在这篇文章中，我们将按按钮的大小，样式，布局和颜色----以及所有你需要知道的用以创建一个能提升用户体验的呼叫行动按钮。原文地址
按钮的重要性
在一个页面的错误区域放置的按钮，它使用了错误的颜色，可以阻止用户的行为路径。这个按钮是指直接引导用户采取一些你想让他们采取的行为
如果用户不采取行动，那么这个按钮失败的原因如下
1.这个按钮放在了用户并不熟悉的地方
2.按钮的颜色使用户丧失兴趣或者按钮在页面中并不足够突出
3.按钮的放置并不直接明显
根据用户体验的活动，我们可以把CTA按钮归纳为：
1.积极的--改变发送和接受信息。举个例子，一个伴随着新邮件注册的按钮将会发送信息。
2.中立的--不做改变，或者让用户回到频幕
3.负面的-减少或重置信息
考虑颜色和对比对度
UX Movement指出你要有明确的色彩对比，因为它可以帮助用户弄明白该采取什么行动。如果你的主要CTA按钮混杂在一起的背景太多，或者看起来像别的按钮，然后用户会感觉不确定。乐观估计，这会减慢他们的操作速度。最糟的情况是，他们完全不会点击。这点尤其重要尤其是你面对色盲用户的时候。颜色可以看起来非常相似对于色盲用户而言，即使在视力正常的用户看来颜色有明显区分时。
红色与绿色按钮的论点是一个很好的例证，为什么你应该考虑色盲用户
让我们简要回顾红色/绿色的讨论。在大多数人的心目中，红色通常意味着“停止”或“删除”。但也有一些用户更倾向于点击红色按钮超过一个绿色的按钮。所以问题就变成了--该选哪一个？让我们看一看上面的图片。在左边的是能看清两种颜色的人会看到的红色和绿色之间的区别。而右边，看看色盲用户视觉感受---两种颜色均出现非常相似的色调。正如我们在&中所描述的那样，这种差异是因为把红色和绿色放在颜色圈上（它们是互补的，而不是互相对比）。面对这种情况，一个色盲用户在处理和理解的颜色的过程中可能不会采取任何行动。
界面用色把红色和绿色放在一起肯定是一个错误。你也要考虑到按钮背后的背景色。例如，蓝色背景上放绿色按钮基本看不清消失，因为颜色太相似了。这很容易取消了用户有可能采取的任何行动，并导致分析错误。下面的快速彩色心理学指南可以帮助您做决策。这也取决于你的网站类型和你的品牌个性。你还应该考虑用户和任何可能会使用网站的人。
所以小心你选择的颜色的按钮不仅是必需的，而且重要的是，确保您为页面和页面上的按钮选择有对比的颜色将您的按钮放置在用户路径中页面按钮的位置和它的颜色包括上面的文本一样重要按钮应该在页面上突出显示。然而，考虑用户在页面上的操作路径。正如Jeremy Smith在里指出的，按钮需要符合逻辑的放置以致让用户知道下一步该去哪儿。你要考虑人们如何在实际过程中阅读页面。让我们简要的看看f-patterns和z-patterns。“F模式”“F模式”是有很多文本内容网站的标准版，如新闻网站或博客。用户的眼睛会从左至右地扫过页面，然后再到左边直到浏览完整个页面。在下面的例子中，你想让用户在从左至右浏览完成后采取行动。
“Z模式”你会发现这个在这个模式中，内容更宽敞用户的眼睛会会像扫描佐罗的画像一样呈Z字型，在下面的例子中，你要把CTA按钮沿着Z字型放置，最好靠近结束处。
这些模式可以让你在用户路径中放置按钮。毕竟，你并不想把按钮放在没有人会看和点击的页脚。最后，不要害怕使用网页规范--这是因为按钮一般都放在在工作的地方。
使按钮显得可点击有一些方法使按钮看起来友好和可点击让我们看看Gabrielle Gosha在她的文章里概述的一些注意事项：正如我们上面所说的，颜色是一个按钮的重要组成部分。在表达按钮可以点击时颜色也同样有用。如果按钮混在背景中，用户将无法意识到它可以点击。按钮还应该包含能为用户提供进一步的视觉线索的文本来指导用户行为，直接作用。文本可以用来清楚地指示用户，如“注册”、“正在连接”、“开始”。给这个按钮一些喘息的空间，当按钮放在一段文本下方时，我们建议增加一个大致 2/3 按钮高度的边缘。你要结合页面上其他元素来考虑这个按钮的大小。太小，它会被忽视。太大，它可能会淹没用户视线。
正如你所看到的，三个不同的调用不同的CTA按钮产生的不同影响。最左边的按钮小但很难 ；中心的最不显眼；右边的如此大以至于脱离了文本而存在它会从它上面的内容。颜色和大小使之产生了这些差异。创建按钮时我们要避免太过艺术，尽量保持按钮简单规整的形状。更换为一个有聪明的文字和动效的完美按钮会给用户很好的体验。Kamil Zieba在&中说明：“清晰排在聪明之前”。不要试图用一个按钮标签，比如“酷，让我们摇滚！“如果”提交“能更好地引导行为。
使按钮圆角矩形按钮应该是矩形的，因为我们已经习惯了。我们了解这些按钮的功能。
据保，研究表明这样的矩形按钮也应该有圆角才是最好的。这是因为圆角会让用户关注按钮内部。也正是因为我们已经进化了，学会了避免任何有尖角的事物，就像人学会去避开伤害一样。我们建议你阅读&，以了解更多的关于按钮设计的各方面，包括大小。
浮动操作按钮在我们提到按钮的放置之前，简要说一下近年来越来越流行的浮动操作按钮floating action buttons (简称FABs)。FABs通常是浮在用户界面上用于促进行动的圆形按钮。我们看到更多的网站使用它们“去示意用户在特定的页面上进行单一行为”&
一个FAB按钮浮在常规内容上能侵占其他元素，以及从其他内容上分散用户。设计师指出，虽然这看起来是个好想法，在理想情境也能提供好的用户体验，但事实上，FAB按钮广泛使用可能损害整体的用户体验。这是因为他们减少了身临其境的体验，当它们覆盖了屏幕上每一个UI元素。这在整体体验上会分散用户注意力，因此你在使用FABs按钮时要谨慎，否则可能适得其反。不仅如此，siang还说“Fab有效的内容区块会占用真实的页面位置。”这并不是建议你完全不使用FABs按钮，但你一定要小心他们的使用位置，以及可以降低用户采取动作的次数。
按钮教程创建一个有效的CTA按钮取决于几个因素，包括相对大小，颜色和文本。我们将创建一个简单的例子来说明我们刚才描述的那些最佳实践。1、人们最先看到主角最大的，最上面的元素得到了最多的关注。
2、他们的眼睛向下游走下面的副标题：文字放小一些，不用太突出，使之成为次一级的关注点。
3、内容沿着按钮移动有一个能让用户跳过副标题直到按钮的机会，但是通常用户需要知道每一个他能接触到的按钮。“销售间距”文本详细解释了为什么用户要点击每个CTA按钮。这些内容是一个承诺：你将点击到什么样的按钮？
4、CTA按钮CTA按钮占据了第三层。为什么？对比：在正文背景里按钮很突出。正文：干净、清晰，通常使用无衬线字体放置：放置在整齐的一排里。
它是如何工作的这种Z型模式利用了西方语言的“左至右”移动的规律：因为人们已经习惯于从左上角到有下家的阅读顺序，安排这些遵循传统的思维模式的元素会使体验更为自然——即使读者是在无意识的浏览。
原文链接：
可以记录推荐数据哦！
收录收藏夹
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
分享给微信好友
下次自动登录
没收到验证码?
下次自动登录
第三方帐号登录
微信二维码登录褰撳墠浣嶇疆:
闃呰?姝ｆ枃
缁х画涓婁竴绡囨枃绔犮