表单设计中，各种设计模式和技巧已经越来越成熟了。在诸多设计技巧当中，悬浮标签这一设计手法，应该是对于用户体验提升最明显的一种。早在2013年8月的时候，我第一次考虑在自己设计的表单中运用悬浮标签，这个想法很简单，在占位符文本中，借助动画加入一个图标显示，确保用户不会在填写过程中迷失。

不知道大家有没有这样的情况发生，自己设计的作品，“乍一看不怎么样，仔细一看，还不如乍一看”！

其实不耐看，或者不敢放大看的原因都是细节做的不到位。

最近在做手机OS的主题图标，对细节的感触很大，今天结合主题图标来和大家聊聊，我们可以从哪些方面注意自己的设计细节，大纲如下：

• 给造型加点细节
• 多加点质感的细节
• 不要让图标看着灰灰的
• 风格特点的运用

1. 给造型加点细节

造型是所有设计执行的第一步，造型做不好，说别的都没用。

那如何能给造型加点细节呢？

打个比方，我们要画一个圆角矩形：

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

很多设计中，我们付出20%的精力就可以应付80%的 Normal Case，而剩下20%的 Special Case 却会花费我们80%的精力。换言之，普通情况谁都会处理，而为了应对一些少数派，我们将要付出更多。

Loading 失败时的错误提醒、搜索无少结果时的空白页面、打了车却没车接单……除了这正常流程下的失败反馈以外，最耗时间的是那些特殊流程或所有情况同时在一个页面堆砌出现的情况。

在设计前期，我们就应该尽可能地罗列特殊情况，即便它们出现的概率很低，也应留足设计时间。而应对非常规 Case 时，有一条原则帮了我很多次：

确保多数人体验的前提下，才去解决少数人的问题。

这不是说要为了多数人放弃少数人，还是造例子来说吧。

案例一：重复利用的物流单号

如果你在天猫有过退货经验就会知道，申请退货并得到商家确认后，需要填写退货的物流单号，当商家收货后才会把钱退给你。这里有个奇妙的问题，设计上是否允许多个用户填写同一个退货单号？

先来看看如果允许，会出现什么非常规情况：消费者AB两人各自在同一个商家C处购买了两台 iPhone，并且商量好分别发起七天无理由退货流程，商家C均同意。然后，消费者A先将手机按要求寄出，获取物流单号一个后填写到退货系统；同时，消费者B直接使用消费者A的退货单号填入系统，但不寄送自己的手机。

极端情况体现在，许多商家的店铺与仓储是分开的，当仓库收到A寄来的手机并确认收货后，店铺工作人员收到系统通知两个退货流程都已收货（其实是同一个单号），若不进行额外确认，就会把钱都退回去了。

再来看不允许重复填写同一个物流单号的情况：很简单，AB两个消费者是好人，但希望节省快递费，就商量好把两个手机放在一个包裹里寄回。此时若规则只允许一个单号只能填写一次，这种做法就无法实现。

错误的设计方法是这样的：用户填写退货单号时，新增一个流程询问用户该单号是否只关联了一个订单，订单号是多少；或者在原有基础上新增一个联合退货的功能，让多个用户合伙拼单退货。

正确的设计方法是这样的：消费者端流程全部不变，允许重复填写物流单号，但必须在后台记录一条单号被使用的次数。对于被多次填写的单号，在商家端告知商家须额外注意，一定与仓库确认好包裹内物品再进行退款操作。

错误方法的错误原因很简单，我们不能为了一些极端情况就去修改主流程，也不能为了少数人的需求就影响所有正常用户。

案例二：互相冲突的 Toast 提醒

天猫客户端的商品详情页中，当点击“收藏”按钮会有一个 Toast 告诉用户“收藏成功”，同样当点击“加入购物车”后，也会有 Toast 告诉用户“加入成功”。这样看好像没什么问题，但若用户点完“收藏”后马上点击“加入购物车”，就会出现两个 Toast 相互冲突的情况——视觉上互相重叠，或后一个 Toast 无法出现。再极端一点，如果出现了一个脑残用户，为了测试反复快速点击两个按钮，甚至会导致代码错误。

为了追求设计和代码逻辑的严密，我和开发同学花费了不少时间讨论对于这种极端情况，要如何设置 Toast 的出现和冲突机制。甚至为了应对极端情况，还需要调整 Toast 出现消失的动画过程与逻辑。但最后，我只设置了2个 Toast 在极短时间内前后触发的交互，也就是新的 Toast 慢慢把旧的推上去，并各自做淡入淡出动画——毕竟两次短促的操作是比较可能会发生的。

什么？你问我那个脑残用户怎么办？不好意思，为了满足所有正常用户的诉求，脑残用户的体验就只好先放一放了……

案例三：神出鬼没的 Loading

我们在客户端上做了一个比较酷的动画，对一个模块长按后可以弹出一张卡片，并在卡片中阅读一些详情（有点像 3D Touch）。问题在于，弹出卡片中的信息是触发卡片后才向服务器请求数据并加载的，正常情况下没有问题，但是弱网条件下，数据加载可能会花费不少时间。为此，第一版我们为这个数据请求设计了一个 Loading 的小动画（好吧，你就当是转菊花）。

这样做的结果是，对于网络非常流畅的用户，他们唤起这张卡片时，会看到一个菊花飞快地闪过，然后才看到数据加载——再流畅的网络下，数据也需要加载时间，哪怕是1ms，都会让菊花快速闪烁。

当然，不要 Loading 也明显不合理。弱网条件下，必须避免用户盯着空白的卡片发呆而不知道系统正在干什么。

所以，合理的做法是，为 Loading 动画的出现时间设置一个延迟：在卡片弹出的200ms内（卡片不可能突然闪烁出现在用户面前，必须有一个进场过程），如果数据加载完毕，则不显示 Loading 动画，直接显示数据。如果卡片进场完毕（200ms后）数据还没回来，则开始显示 Loading 动画。

这样，我们保证了正常用户的正常体验，避免他们每一次操作都为弱网这一极端情况买单。同时，也保障了弱网用户的体验。

最后，再总结一下我们的设计原则：确保多数人体验的前提下，才去解决少数人的问题。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

即使你远离设计领域，对于用户体验这一词也不会陌生。用户和产品之间进行交互过程中，产生的一般态度和情感反馈就是我们常说的用户体验。在用户体验设计中，有几个关键性的因素的是设计师所关注的，比如可用性（usability）、工具性（utility）、合意性（desirability）、吸引度（attractiveness）等。如今，用户体验设计和视觉设计几乎达到了同等重要的程度。虽然仍有一些企业和团队在怀疑用户体验设计是否有必要，但是总体上，大家对于它的认可度还是非常高的。

用户体验设计为何重要？

许多公司为了让产品产品的体验和效率更高，而花费更多的时间和金钱。现代商业竞争背景下，事实已经证明，产品和服务的成功很大程度上是取决于用户对于产品的喜爱程度。UX设计旨在通过让产品更易于使用而提高用户的满意度。

有些人可能还认为用户体验设计的核心是视觉设计，其实它的范畴远不止于此。UX设计是一个复杂的过程，涵盖了用户研究，线框图、原型、视觉稿、动画、开发、测试等许多不同的环节和阶段，其中许多环节甚至是并发和交叉的。真正有效的用户体验需要时间来开发，也需要足够的知识来作为支撑，这种复杂的开发体系使得它或多或少地需要超出预期的额外投资。然而，UX设计对于初创和非初创公司而言，同样有益，它确确实实从不同的方面帮助企业创造成功的产品，无论是参与度、可用性还是转化率。

如果你拥有一个复杂的电商网站系统，那么用户体验一定是影响它实际效用的重要因素。内容组织是否系统，导航是否清晰，都会影响到产品的销售，用户的黏度。太复杂、不便捷的产品会让用户流失，这是肯定的。

有数据表明，近年来95%的移动端APP 在上线一个月内就宣告失败而退出。这很大程度上是因为激烈竞争之下，没有足够优秀的用户体验来留住用户所造成的结果。结合现有的研究和我们自己的经验，我们在今天的文章中总结出了优秀产品的7个关键的用户体验设计要素。

1、有效的可用性设计

现如今，“简单”一词和无聊的设计并无关系，而是成功产品设计的关键性要素。在Don Norman 的《设计心理学》系列教材中指出，良好的设计通常都会具有易于发现和易于理解两个特性。用户期望他们所使用的产品是简单明了的，能够让他们不花费太多精力就可以搞定，也可以从中获得自信。而这些都是用户体验设计的工作范畴以内。

用户体验设计师的目标是为数字产品创造一致的体验，让用户能够安心使用。有效的用户体验设计能够通过网站和APP为用户循序渐进、有效地展示内容。而UX设计人员则可以通过数据分析和案例研究，消除不必要的设计、搞定问题、去除隐患，提升产品的可用性。UX设计师还能通过不同环节的引导服务来帮助用户更加快速的熟悉产品，让用户感到贴心而不会紧张。

2、驱动用户深度参与

参与度是衡量用户有效行为的度量，而它也是产品价值的重要体现之一。每个企业都希望有高素质的用户参与到产品建设当中来，而他们也知道，最终还是要通过创造优秀的用户体验来解决这一问题。

UX设计有一个热门的解决方案是游戏化设计。将游戏化的元素应用到非游戏类的使用场景中来。游戏化设计让网站和APP拥有更多有趣的元素，吸引用户，提升参与度。游戏化设计的具体方法和策略有很多，设置任务、发放奖励都是很常见的手法了。挑起用户的好奇心和激情，他们会坚持不懈地执行任务，在你的网站和APP中花费更多的时间。

3、产品的独特性

很难说市场上到底有多少APP存在，但是绝大多数的应用和网站在起步的时候，就已经失败了。当你要开始投放一个APP到市场的时候，可能已经有好几十个同类的产品已经存在了。所以，企业和开发团队一直在寻求让用户选择他们产品的原因和方法。UX设计师能够通过分析目标受众的需求和实际市场状况，来判断和预测用户对于自己产品的反应。如果你想给别人带来愉悦的体验，满足用户的需求，并且力图让自己的产品拥有足够的特性从竞争中脱颖而出，那么你的产品就具有了同其他产品区分开来的独特性。

4、省钱

UX设计的成本并不低，但是相比于修复可用性的问题，它的花费依然很低。基于用户研究，UX设计师能够准确地挑选出功能组合，并且规划用户的交互过程，排除可能存在的问题。通过对目标受众的研究和测试，分析和改进整个产品的流程与细节，而这些过程对于产品开发和运营的补充，相比于在产品上线过再根据反馈进行调整，要省钱省心得多。

5、用户忠诚度

用户的口味越来越刁钻了。令人不快的体验会让他们很快不耐烦，然后迅速和你的APP说拜拜，然后再也不会回来了。用户的忠诚度要维持起来并不容易，你需要创造足够优秀的产品，要让人喜爱、沉迷，还得足够快速地帮用户排查问题。这种局面下，用户体验设计的价值无疑是不可估量的。如果你的产品能够始终保持令人舒服愉悦的体验，用户习惯了就很难转向别家了。另外，别忘了，快乐的用户更喜欢向朋友推荐你的产品。

6、高转化率

采取设计者预期行为的用户所占总人数的百分比就是我们常说的转化率。最典型的转化率就是购买产品的用户数所占打开电商网站的用户总人数的百分比。用户体验设计师通常会掌握一系列的分析技术，来帮助产品提高转化率。通过深入分析用户行为和用户离开产品的原因，找到痛点，解决问题，从而提高转化率。

7、积极的品牌体验

品牌识别不仅仅取决于视觉形象设计，还和体验息息相关。许多用户在第一次使用产品的时候，会记住品牌给他们的感觉。这种第一次的体验对于用户和品牌本身都至关重要，如果处理不好，可能会失去不少潜在用户。良好的UX设计可以保证品牌拥有积极而良好的用户体验。提供用户喜欢的产品，可以提升品牌的认知度，因为用户不会忘记他们喜欢的东西。

结语

优秀的用户体验设计对于企业无疑是有利的。很多时候，它的价值并非是一眼可以看出来的，但是事实上，优秀的用户体验是成功产品中不可剥离的组成部分。令人信服的UX设计能够节省资金和精力，这比起投资解决低质量的产品要来得有效得多。更重要的是，现代产品一旦初次互动不利，后面想要扭转过来就很难了。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

Facebook 设计副总裁有个问答栏目，今天的问题是：对于设计师来说，什么才代表着成功？在这篇译文里，她分享了自己的观点。

每个设计师多少都有一点强迫症，有时候会为一个像素的间距而纠结，有时候又会割舍不下自己做的元素，满屏的信息都想突出，导致画面混乱。设计师培养自己对画面的全局观是很重要的，所以我们的脑子里时刻都需要有一把“尺子”在，这把尺子，就是“点线面”。在使用这把“尺子”的时候，抛开那些装饰和颜色还有材质，将画面抽象成点线面来把控你的设计，也许会有不一样的启发和看到画面不和谐的原因所在。

设计师对版面的全局观，就是“点线面”的处理。“点线面”是所有视觉画面的基本结构，点线面可以把不同的部分或者元素组合成一个整体，进而打造一个视觉舒适平衡的版面。

搜索几乎是现在所有网站，APP甚至操作系统的标配，不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道，起到了一个引导用户走向的重要作用。在不同的系统，不同用途的网站上搜索呈现的方式都有所不同。

用搜索的原因

使用搜索时，用户可以自己掌握浏览该网站的路径，从哪一页进入到哪一页，自己控制如何使用这个网站。没有必要根据网站的页面设计来决定浏览页面的先后顺序。这也是为什么很多网站用户一进入就直接使用搜索功能的原因。

另一个原因是，当用户浏览网页到一半不知道接下去该干什么的时候，往往会使用搜索直接去找到自己想找的内容。

一个完整的后台，由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成，下面跟大家分享后台中的表格和表单的设计细节。

当接到一个全新的网页后台项目时，首先确定设计风格，然后考虑这个后台尺寸是做居中固定式，还是全屏响应式。全屏响应式的网页设计，除非有规定，否则你可以选择任意主流尺寸作为基尺寸来设计网页。当然，不管选择什么尺寸，都得基于做好一个后台而开展工作。

随着移动优先的趋势，APP的设计也越来越受到公司重视，不断地提高APP的设计质量是每个设计师的追求，有哪些设计中的细节被你忽略了呢？让我们一起来看看这些细节你都把握住了吗。

视觉表现型问题

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在过去的几年当中，网络上所流传的各种设计和开发资源，在素质上有明显的提升。其中有一些已经几乎成为了设计师和开发者必备的工具，但是其中绝大多数由于其应用范畴的局限，或者传播不够广，导致它们大多并广为人知。将这些素材集中到一起，很大程度上是希望它们的目标用户能够明白，需要这些工具的时候，上哪儿找。

这次的前端干货合集内容也很齐全，仔细看看，总能找到几款你所需要的。

MuzzleApp

Muzzle 是之前 CodeKit 的开发者的新产品，是一款应用在macOS 平台的应用，当你和别人共享屏幕的时候，它可以帮你关闭通知和其他的私密信息，避免尴尬。无论你共享屏幕时候的平台是Skype、Google Hangouts 还是 Slack，它都能让macOS 进入“免打扰”模式。

Fractures

Fractures 是一个CSS类 合集，可以帮你快速创建网页原型。Fractures 是基于原子设计模式来构建的，样式表被分割为小段。

CSS DB

CSS DB 能为你列举出还在不断开发中的CSS特性列表以及目前的状态，让你可以更好地使用CSS选择器。

Preact

Apache 最近宣布禁止将 BSD+专利许可证分发给 ReactJS 和类似的项目，如果你的产品受到类似的专利许可证的影响，可以考虑 Preact 这样的 ReactJS替代品。

Pell

Pell 是一款用来构建所见即所得编辑器的JavaScript 库，默认情况下，它会带有常见的富文本编辑器的按钮。Pell 是使用ES6来构建，它不会像jQuery 那样需要大量的依赖库，体积小巧，可维护性强，还兼容 IE9。

Markvis

Markdown 在语法和功能上是有限制的，而Markvis 在它的基础上增加了图表的功能。

Moment PHP

Moment 是一款 PHP 库，用来处理日期和时间，类似于 Moment.js 之于 JavaScript。这个库的使用也很简单，可以快速设置时区、时间和显示方式。

Tonik

这是一款使用现代PHP来构建的Wordpress 新手主题，它充分利用了命名空间，自定义模板，自动加载器，WebPack 以及一大堆现代Web开发的优点。

Awesome Guidelines

这是一个包含了许多编程语言标准的列表，其中包含了C语言，JS，PHP，Ruby，甚至包括Visual Basic。这些标准能够帮你的代码保持简洁、干净。

BotUI

聊天机器人已经逐渐成为主流。这款 JS 库能够帮你构建对话式UI，这个库比起传统的“表单”体验更加优秀。

Reaction Commerce

开源的内容管理系统这些年变化并不大，其中绝大多数都是基于PHP来构建的。

TinyReset

这是一款非常小巧的 CSS resetter，它可以作为 Eric Meyer 所创建的reset.css的替代品。

Martinet

Martinet 是一款用来构建静态网站的命令行工具，其中包含了诸如 Webpack、TypeScript、Pug for templating、LESS和 NPM 这样的现代工具。它的存在让设计者不用担心网站配置，只需要正常使用 Martinet 就能对网站进行调整。

Billboard

BillboardJS 是一款基于 D3.js 来构建的交互式数据可视化数据库工具，它可以用来创建可视化的柱状图，饼图，折线图等。

SVGI

SVGI 是一款用来查找SVG元素和文件的命令行工具，安装它之后，你可以采用svgi 命令来检索 SVG 文档的大小、元素、层次结构和节点列表。

TimeStrap

TimeStrap 是另外一个非常实用的开源平台，它可以像 WordPress 一样可以在任何地方运行和访问的发票系统。对于喜欢自己控制而不希望使用外部服务来管理发票的用户而言，这是一个很好的选择。

Slate

Slate 是一款为API 文档创建静态网页的工具，诸如 WooCommerce、Travis-、CoinBase甚至 NASA 都采用了这一工具。

FontJoy

FontJoy 是一款能够生成大量有效字体组合的工具，点击“Generate”按钮就能生成许多新的字体组合。有趣的地方在于，这款工具还有具备深度学习的功能。

CoolHue

毫无疑问渐变色再一次回归主流，而CoolHue 是另外一款非常优秀的渐变色生成工具。

FrontPress

FrontPress 是一款前端框架，可用来控制 WP-API 和 AngularJS。如果你想创建一款用于 WordPress 的内容管理系统，可以从 FrontPress 着手。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务