CSS按钮体验提升技巧之:before/:after与自定义data-*的妙用

其实网上已经有很多各类效果的了，例如: http://tympanus.net/Developme... 神人太多了，我也找到了一种比较好的按钮制作方法，体验不错，演示动画截图如下： 一种不错的增进体验的效果噢~ 具体代码实现搓这里，http://output.jsbin.com/kepiqac 关键字：css, 按钮, #data-# 妙用

业界 2016年08月03日

交互细节！确定按钮到底该放在左边还是右边？

仔细想想，我们做交互设计，讲了那么多“高大上”的理念，竟然很多小细节都还没有弄清楚——比如，确定和取消按钮哪个该放左边哪个该放右边？今天这篇文章是作者在英国约克大学读研时做的一个课题作业。想知道哪个更好，这篇或许能给你启发。其实这个问题，连世界最大的IT公司都没有确切的答案。苹果说，不论移动或电脑设备，行动按钮（Action button）都放在右边，也就是说确定按钮放在右

产品 2016年08月30日

金融类 App 交互与视觉设计规范二

本编主要详解移动端UI组件的交互与视觉规范UI组件交互与视觉设计规范按钮 Button按钮由文字和/或图标组成。按钮文字必须预示点击后的内容，且符合使用者的预期。按钮的文案应该把该操作说清楚，且不啰嗦。包含语意的按钮，例如「确认提交」比「确定」要好1）常规按钮按钮的设计应当和应用的颜色主题保持一致。关键操作按钮Call To Action button（下称CTA）当页面中

产品 2016年10月17日

如何应对「为什么用这个颜色 / 字体 / 按钮」的问题？

作为一名设计师，被质疑简直是家常便饭。相信你们在日常工作中，一定被人问过：“对于这个点，你为什么这样做而不是那样？为什么选这个颜色而不是那个？”之类的问题。其实，这也是面试中的必问问题。乍看起来，确实有点难回答。但每一个问题，其实都有他的思考路线图。今天笔者就来谈谈，如何通过交互的四个维度来入手，巧妙地破解这个问题。来，我们举个例子。比如，在面试中，作品集中有这么一个界面，

产品经理 2016年10月24日

那么，一个高转化率的按钮应该如何设计？

编者按：聊到按钮的设计，我们有太多的话要说。确认按钮在左边还是右边，幽灵按钮到底可靠不可靠，阴影的存在到底合理不合理，等等等等。但是今天不聊这些，我们来聊一下，如何设计一个高转化率的按钮：我们常常会揪住某个设计细节不放，深入讨论直到透彻。这样的探究并非毫无意义，因为即使是最细小的细节也可能会让近乎完美的设计毁于一旦。所以，今天的文章我们继续深入到设计的细节当中，探讨按钮的设

产品 2016年10月25日

Sketch 基础 3- 按钮的形式与状态

本期教程里我们将介绍如何用Sketch快速的制作出按钮的不同状态。开场白 ...上一篇我们学习了如何制作一个简单的Sign Up页面，本次我们来学习一下页面中的按钮。你真的了解按钮么？按钮的各种形态都是什么？我们一起来学习吧！/// 现在开始 ...1.首先从形状上区分可以分为：直角、圆角、异形和幽灵按钮。每种按钮的作用不同：a）直角按钮是最常用的，因为棱角鲜明，所以按钮附

产品 2016年11月18日

Aure 技巧：按钮互斥效果的 3 个步骤

本文仅适用于具有一定Axure使用经验的用户阅读。Axure中经常会设计几个按钮或几个菜单的互斥选择效果，互斥效果有两种方式可以实现：1） 可以通过点击事件控制选中当前点击的按钮或菜单，并取消选中其它按钮或菜单； 但这种方式由明显的缺点，如果后续有增加了按钮或菜单，需要将之前每一个按钮或菜单的用例全部修改一遍，工作量很大而且很容易搞乱。2） 通过对按钮分组实现。 这种方式可

Axure教程 2016年11月28日

Sketch 基础教程 5- 对齐及分布工具详解

本期教程介绍对齐及分布工具的使用，并利用对齐元素制作一个简单页面。更多优质教程 请关注 “一稿过”/// 开场白 ...上一篇我们学习了如何用布尔运算制作一个微信Icon，本次我们来学习一下如何使用对齐工具快速制作一个页面。/// 现在开始 ...我们先来了解一下对齐工具在Sketch中的位置，具体见下图。这八个按钮的图示非常明显，大家一看就知道具体怎么用。但是有些细节如果

产品 2016年11月30日

App 设计：连接性或结束意味按钮的设计思考

连接性或结束意味的按钮即我们日常所用的【取消】【下一步】【完成】【保存】等功能性按钮。本文主要总结这几类按钮在产品设计中的使用方式。用户在日常使用App的过程中，会见到各种产品页面。用户在各个页面之间完成对应的交互和跳转，其中进入下一级页面是由用户主动操作或者页面逻辑跳转来实现的。下一级页面的入口，一般是各种操作按钮、缩略图、文字引导入口、tab或者导航切换，而想要将页面跳

产品经理 2016年12月06日

确定按钮该放在左边还是右边？

其实这个问题，连世界最大的IT公司都没有确切的答案。P.S. 这是我在英国约克大学读研时，一个关于 error 定量研究的课题作业。仔细想想，我们做交互设计，讲了那么多“高大上”的理念，竟然很多小细节都还没有弄清楚——比如，确定和取消按钮哪个该放左边哪个该放右边？其实这个问题，连世界最大的IT公司都没有确切的答案。苹果说，不论移动或电脑设备，行动按钮（Action butt

产品经理 2016年12月30日