20 个交互非常棒的按钮代码 - 简书
20 个交互非常棒的按钮代码
你能想象网页中没有按钮吗？我打赌你不会。在网页中，拥有按钮并不奇怪，这些看似很小、主要以矩形表现（如导航栏，版权信息）的东西，其实是网页 UI 中基础之一。它们不仅使链接看起来更有分量、吸引人和鲜明，而且他们还能提高跳转率和用户体验，使之更方便和直观。这些 CTA （Call-to-action：行为召唤）能帮你获得更多的潜在客户和促进业务的扩展。
按钮的开发需要注意它的形状、颜色、空间、排版和前景，这些都很重要。前四个主要是依赖于网页的主题，而最后一个则是取决于你需要达成的目标。例如，你可以在用户点击后，等待的时间里在按钮上加入转轮点亮的动画；又或是，加入一些更吸引眼球的动画效果。如此一来，添加动画效果可以使按钮产生的效果最大化。那么，接下来为你介绍这 20 个很棒的按钮代码，它们能使按钮更加丰富，且用户体验超好。
作者：Nikolay Talanov
作者：Ignacio Correia
作者：Fran?ois Lesenne
作者：Ashley Nolan
作者：Jon Brennecke
作者：drus unlimited
作者：Jonas Badalic
作者：Ashley Nolan
作者：Overly Engineered
作者：Deep
作者：ayamflow
作者：James Power
作者：kaigth
作者：Vincent Durand
作者：Hakim El Hattab
作者：Timo Hausmann
作者：Volusion Services
作者：Mary Lou
作者：Mary Lou
作者：Zachary Minner
「 心有猛虎，细嗅蔷薇 」游戏类型：枪战射击
游戏制作：Lace Mamba Global
游戏发行：Lace Mamba Global
游戏平台：pc
发行时间：
　　由Lace Mamba Global发行的策略游戏新作《战争召唤》(Call to Arms)将于明年第一季度登陆PC。本作展现的是现代战争，可以说是《战争之人》的现代版。提供2个可选派系、20种根据现实世界而来的载具和重型武器，以及超过60种枪械和定制选项。本作也提供了类似于《战争之人：突击小队》的那种“直接控制”功能，让玩家以第三人称模式控制某个单位的瞄准射击和移动。不管是乘坐悍马推进、带着狙击步枪渗透，还是开着M1A2坦克碾过一栋房子，玩家可以控制每个单位的任何动作!
暂时没有相关补丁！
　　微软的打枪大作《战争机器：审判》将于4月23日(VIP季票用户优先获得，4月30日全球发布)推出一个名叫“战争召唤”(The Call to Arms)的地图包，提供3张新的多人游戏地图、一个全新的“战争大师”(Masters at Arms)模式，以及6个新的人物、武器护甲和皮肤。
04-2004-19
暂时没有相关攻略秘籍！
请文明参与评论，禁止谩骂攻击！游戏问题点击留言。
　　由Lace Mamba Global发行的策略游戏新作《战争召唤》(Call to Arms)将于明年第一季度登陆PC。
3234单机网 版权所有
沪ICP备号-3浅谈如何设计优秀的移动端页面
浅谈如何设计优秀的移动端页面
　　最近谷歌的研究发现，那些针对移动端优化过的网站更容易赢得回头客。这意味着网站针对移动端优化之后有着现实可见的好处。那么我们常说的&对移动端友好&到底是怎么样的概念呢?实际上，这个概念包含了一系列关键的特性，当你在进行移动端网页设计的时候应当将它们纳入考虑的范畴。
　　如果你希望自己的网站能够轻松的在移动端设备上访问，那么应当消除所有移动端上可能存在的可用性的问题，下面有12条提升移动端网页设计的建议，确保你的页面能够通过 可用性测试，并提供良好的用户体验。
　　1、针对移动端进行全面优化
　　桌面端网页在移动端设备上首要的障碍就是导航的使用。看看下面Domino批萨的案例，它的桌面端和移动端网页的对比就相当明显，移动端页面经过优化之后的体验就完全不同。简单说来，优化后的移动端页面更加干净，有着更容易导航的CTA按钮
　　下面是优化移动端页面的几个实用技巧：
　　&仅使用垂直滚动。不要使用水平滚动，让用户只需单方向滚动就能浏览主要的内容。尽量通过CSS来控制页面宽度、位置和图片的缩放。
　　&将你的内容置于首位，避免其他的元素让用户分心。
　　&控制分栏的数目，尽量使用一栏单列式的布局。
　　&不要将移动端页面和桌面端页面混用。
　　2、让行为召唤按钮在移动端上友好易用
　　用户经常会忽略移动端页面上的一些元素，所以尽量使用CTA按钮，确保用户不会错过它们。和桌面端的情况不同，你需要将CTA按钮置于主要、显眼的位置，确保他们容易发现，容易点击触发。
　　CTA按钮应该易于点击，并且不会同页面中其他的元素形成干扰或者干涉。
　　3、让菜单简短且易用
　　详细而全面的菜单设计在桌面端上能够良好运行，但是当它出现在移动端上的时候，菜单就显得过长了，要在其中找到想要的内容就相当难了。所以，你需要考虑使用精简的菜单，仅保留最重要的、必须的条目。根据以往的，尽量不要让菜单超过7个条目。
　　同时你还要保持你的菜单目录足够的易用：
　　&它应当基于根据重要性和价值来进行排序
　　&它不应当包含用户不理解的术语，菜单要使用通俗易懂的表述方式。
　　4、让搜索框显眼
　　如果在你的网站中，搜索是主要的功能，那么你在做移动端页面优化的时候应该突出这一功能，因为它是高转化率的功能，确保它足够显眼是很有必要的。当用户想要获取特定功能的时候，倾向于使用搜索功能来实现，所以，搜索应当是用户一打开页面就能看到的控件。通常应当让搜索框置于页面顶部，以文本输入框的形式存在。
　　5、让网站正好合适，无需缩放
　　桌面端网页出现在移动端设备上，最令人沮丧的地方就是它需要缩放。不放大页面，不仅难于阅读，而且用户容易错过重要的细节，而放大来浏览，需要来回拖放。而针对移动端优化后的页面则不存在这个问题。图片、字体和页面宽度都正好合适，用户能够完整地获取信息，确保了最基本的可用性和易用性。
　　6、使用高素质的素材
　　你的网站中所有的图片、视频和UI元素都是你的产品的一部分，当你针对移动端优化页面的时候，它们都是重要的组成部分，它们素质的优劣直接影响到用户的观感。
　　7、设计便于触摸交互的页面
　　如果你的页面是针对移动端设计的，那么网页中按钮的尺寸应当和手指的大小相匹配。MIT的Touch Lab 通过研究发现，指面的触摸尺寸平均大小为 10-14mm，而指尖的平均尺寸是8-10mm，也就是说10mmx10mm的控件尺寸设计是比较合理的大小。
　　另外一个需要考虑的是就是可触摸控件指尖的距离。如果两个按钮比较靠近，那么用户在移动端上就很容易出现误触的情况了。如果想要解决这个问题，就需要根据实际情况重新调整尺寸和按钮之间的距离，以适应用户手指交互的需求。
　　8、让用户在决定之前先行探索
　　让用户在对你的网站毫无了解的情况下就要求他们去注册，其实是违反互惠互利原则的。曾有数据表明，让用户过早注册导致超过85%的用户选择了放弃和离开。
　　NetFlix 曾经给予用户一个月的免费试用，不过用户需要注册之后才能使用这一福利。
　　一般说来，用户在提供个人信息注册之前，会浏览一下网站内容，了解这个网站是什么样的类型、提供什么样的服务，再做决策，对于从未听过的品牌尤其是如此。想要打破转化率的壁垒，你在设计网站的时候应该做到下面几点：
　　&提供无需登录就能完成的体验流程
　　&让用户可以作为访客进行购买
　　&只有当需要用户提供相关信息的时候才要求注册，并且尽可能少的让用户提供数据
　　9、告知用户选择更合理的屏幕方向
　　不同的屏幕方向下，用户的浏览体验会完全不同的。用户惯于在同一屏幕方向下完成全部的操作，所以提醒他们切换方向可以提升网站浏览的用户体验。所以，当你的网站偏向展示性，并且使用横屏时浏览体验更佳的话，不妨使用行为召唤设计来提示用户。
　　10、让产品图片可以放大扩展
　　当用户在网上购物的时候，总希望能看到产品的高清无码大图(尤其是服装)，如果无法放大查看，用户的沮丧会直接影响产品销量。所以，应当提供高素质的产品图，并添加放大的功能，让用户足以看清细节。
　　11、方便设备之间的切换
　　并非所有的用户都习惯于在移动端上浏览、购买，有些用户仅仅是习惯于在移动端上搜索信息。所以，你应该提供一个简单的方法来保存信息，让它们能够跨设备使用，当用户离开移动端设备的时候，同样可以在桌面端上浏览、查看、购买。
　　&确保用户能够通过分享或者发送电子邮件/社交媒体，来保存信息。
　　&同步Wishlist，以收藏的形式保存条目。
　　12、让用户在一个浏览器窗口中完成操作
　　智能手机的窗口间切换终归比桌面端麻烦，用户找不到原来的页面的风险是现实存在的。尽量让用户在一个窗口中完成全部的浏览和操作，简化流程和复杂的交互，让用户一直待在一个地方。
　　其实移动端的网页设计并不只是这么简单，这十二个技巧也相当的基础，但是它们提供了一个不错的入门指引。每一个网站都有其独特的地方，具体问题具体对待。但是无论如何，要记住，你的受众不是设计师，而是用户，你的设计应当承载用户的期待，实现它们的目标，而非成为负担。
下页更精彩：1
本文已影响人
浅谈如何设计优秀的移动端页面相关推荐用户行为号召CTA（Call to Action）解读
用户行为号召CTA（Call to Action）解读
围观5310次
编辑日期： 字体：
这个里把它翻译为：行为召唤，或者说是用户行为号召。
那么什么是行为召唤呢？先看下面的几个例子：
在商场超市里，我们经常会看见一些新品上市，会推出免费试用以及低价促销的活动，用以刺激、吸引用户的购买行为。这就是行为召唤中的一种。
下面两幅图为宜家商场里的产品销售模式，通过柔和而体贴的语言“请躺下试试”、“打开抽屉看看”来召唤用户的行为。用户在试用体验之后，才可能转化为你真正的客户。
而在迪卡侬商场里，使用了“请试穿 Try Me”来召唤用户。
在现实生活中，一个箭头、一个图标或者一句话，都可能召唤用户的一种行为。
而在互联网中也会有同样的效果，它存在于按钮、链接文字、图标等等很多元素之中，正确合理的使用行为召唤，可以给你带来更高的转化率和收益。
这里先以按钮为例：
按钮，具有不同的形状和表现形式。如果一个按钮能够强迫或者激励用户采取行动，那么它就是一个有效的按钮。你的按钮点击的越多，就会获得越多的机会将用户变为客户。
如何设计才能一个具有行为召唤能力的按钮呢？
1、使用渐变、阴影、圆角让你的按钮看起来更加逼真
渐变、阴影、圆角让你的按钮看起来像立体按钮，用户可以更好的感知并去按压。用户在现实生活中也需要经常按按钮，比如开关灯、开电脑、敲键盘等等。所以当用户看到这种立体感的按钮时，就知道如何去做了。
下图看看付费频道的“用户登录”和“购买包月套餐”按钮、过于平面的设计，似乎并不易发现和认知，引发用户的点击欲望，它的行为召唤能力就会比较弱。
2、使用高反差的颜色
一个强迫或激励用户点击的按钮能够被立即识别、认出。然而容易识别的关键就是按钮的颜色和按钮上文本的颜色具有很高的反差和对比。
下图是迅雷精简版下载，按钮上的“立即免费下载”和按钮背景都使用了深色的文字、对比不够强烈，使得按钮看起来并不是那么清爽。
3、使按钮大些，但不要太大
按钮和按钮的文字要适当的大些，以便更好的认识。但不宜过大，太大的按钮也会使用户从他的任务中分散。
下图左侧为腾讯微博发布，右侧为新浪微博发布。
4、使用有紧迫感和即时性的文字
立即、立刻、现在、马上等具有紧迫感和即时性的文字，会更好的强迫用户行动。这些会给你的用户创建了一种紧张、兴奋、激动的感觉。情感在市场和设计上都扮演着一个很重要的角色。
如下图中的应用，淘宝的立刻购买和迅雷的立即下载：
5、柔和行为词语
对于不是很了解的产品，用户在没有试用的情况下是不一定会购买的。很多网站在用户还没了解他的产品的时候，就在首页要求用户去购买它的产品。不要立刻把所有的赌注下在一个地方。在问用户是否购买前，使用柔和的行为词语并允许用户试用或浏览他的功能。
如优酷院线的应用，用户可以“免费试看”，再决定是否要购买：
6、增加功能可预见性（affordance）的箭头或图标
增加一个可见性箭头，会感觉更像是一个动作。按钮上的箭头可以传达给用户，这个按钮将带他去另外一个地方。使用一个描述性的图标在按钮上，可以和行为相匹配，这样会感觉到我所点击的就是我想要得到的内容。
如下图的qq开通会员按钮，向右的箭头传达给用户带你去开通会员；右侧京东商城购物时，将商品加入购物车按钮，按钮上图标和行为相匹配，更能很好的吸引和展示给用户当前的操作。
7、增加鼠标移上去的效果
当用户鼠标移动到按钮上出现视觉改变也能够激励用户点击。改变颜色的渐变是一个很好的方式。但是至少鼠标光标应该由通常的箭头变成手型。这是一个标准的光标，让用户知道它是可点击的，给用户更好的反馈。
8、按钮放在第一屏分割线的上面和下面
如果页面有滚动条，在第一屏分割线上面和下面出现按钮是一个很好的方式。绝大多数用花费大量的时间在第一屏分割线上，然而大多数用户会在分在浏览下文后结束。当用户在阅读下文后，无需滚动到第一屏，任然可以进行操作。
如下链接的应用，在第一屏和网页的底部都出现操作按钮：
/ （财务管理应用）
http://inst.ag/ （Instagram 图片分享）
链接 文字连接和按钮相似，不同在于缺少了背景的衬托，通过下划线来展示它的可点击性。在按钮上的行为召唤特性同样也适用于文字上，如下图点点网内容的底部链接“未完，继续阅读→”，通过文字和图标召唤用户继续阅读。
用户的行为召唤还存在于很多元素及交互中，如iphone的滑动解锁，半遮盖效果等等。
具有很强行为召唤的按钮、文字连接及动态的行为交互，还需要更多的思考，这里所讲的仅作为参考。此外，如果你想要做更多事情来增加你的按钮的转化率,可以使用A / B测试来测试你的按钮或连接的效果。
本文固定链接:
转载请注明:
分享知识，分享快乐，运营路上你我他，携手共谈运营事！
专栏作者：爱运营
在爱运营交流各自运营知识，让我们的运营能力在沟通中得到提升。官方微信账号：iyunyingorg。欢迎关注微信。
您可能还会对这些运营文章感兴趣！从行为召唤（call&to&action&）到按钮文案设计
“行为召唤”是近期讨论比较多的一个词语。虽然众说纷纭，但大家都不否认它的重要性。什么是行为召唤？行为召唤按钮又是何物？行为召唤按钮的文案如何设计才能更加有效？推及到所有按钮的文案设计有哪些规范可以借鉴呢？我想结合最近的讨论热点谈谈我的看法
什么是Call to
&&首先，我们从定义说起说起。“Call to action”通常被译为行为召唤，行动号召等，其本身是一个广告（advertising）和市场营销（marketing）范畴的概念，它往往请求或引导人们去“做一件事”——而接下来很有可能伴随着顾客为你的产品或服务买单。
&& Business Dictionary把它定义为：敦促读者、听众、促销信息浏览者立刻采取行动的的言辞（words），例如“Write Now”，“Call Now”，或者在网站上的“Click Here”。BD认为一个没有行为召唤信息的零售广告或商业广告是不完整的也是无效的。
Wikipedi中对“Call to action”的描述更倾向于互联网领域,它说Call to action或CTA指的是网站中用于提示用户点击并且进入下一个转化流程（conversion funnel，如支付、继续阅读等）的横幅、按钮、或某些类型的图形和文字。它是入站营销和许可营销的必要组成部分，致力于吸引用户进入引导流程，继而将用户转化为顾客。CTA的主要目标是形成点击或者完成QR码扫描。（QR码，二维码的一种，来自于英文Quick Response，笔者注）它的成功与否可通过转化率来评估。
不是所有按钮都叫CTA
说完什么是CTA，不难看出，CTA指代的是一类具有特殊使命的控件。是用户访问某个页面后立刻引导用户去做某件事的控件（通常位于比较明显的位置，优先级高于其他按钮）。同理,CTA按钮也具有不同于其他种类按钮的特性。接下来就开始谈谈如何设计CTA按钮。(当然，你也可以把所有的按钮都设计成CTA，当所有按钮都喊着“点我吧”的时候，实际效果可想而知)关于CTA按钮视觉呈现的文章有很多，（如：
）不做赘述，接下来主要从文案设计的角度说说最近的见闻和我的理解。写本文的动机之一来自于一篇最近讨论比较多的文章The Grammer of Interactivity
，其中一个中文版本为《从语言学角度来看按钮文案设计》。原文作者对如何设计CTA按钮的文案有独到的见解，并提出了一种行之有效的检验方法。但在和一些本文读者交流的过程中我发现有人误以为所有按钮都需要做成CTA或者认为文中的方法适合所有的按钮设计（这种方法是适应于CTA的，并不是放之四海而皆准）。概括如下：
一、以动词开头（It start with a
用动词、动宾短语等作为按钮的标签文字。
二、设定语气（setting the
微软的风格指南建议用第一人称（I&Me&My）告诉用户程序会做什么，用第二人称（you&your）告诉用户自己应该做什么。而作者认为应该用同一种格式表达出两种不同的语气。所以他别出心裁的想到了下面的测试方法。
三、Wilty-Wilt测试
作者提出用“你想。。。吗？”（Would you
like to...？）和“我想。。。”(I would like to...)来检测按钮上的文字是否符合两种语气。例如：想引导用户购买的按钮。可以这样检测：我想“立刻购买”。你想“立刻购买”吗？因此，立刻购买（Buy now）就是合适的CTA按钮文案。（要注意引文文法不同于中文文法，领会精神就好）因此，动词开头成了比较合理的选择（指的是在英文文法中）。
(如有兴趣可看译文：
关注按钮性质更重要
文中主要说了CTA按钮文案设计的方法，并不是说所有按钮都要如此设计。为了不引起误解我觉得有必要将按钮分一下类。根据功能简单可以分为两类：行为召唤（CTA）类和指示类（Directive）。如果按钮属于前者，那重点就是Action，当然最好是专注于动作本身（文法以动词、动宾短语为上）而不是动作的指向性（“你想。。。吗？or”“我想。。。”），对此，文中的检测方法也就行之有效。例如如果属于后者，那就没必要以动词开头了，文法以名词、名词性短语、都是可以的。
由于英文文法和中文文法存在很大差异，所以不能把英文环境下按钮文案设计的方法套用到中文环境中来。关注按钮本身的性质，根据性质制定文案的文法可能会更加有效。&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}