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

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

最近在做手机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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

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

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

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

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

用搜索的原因

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

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

城市大屏

在技术上，所有的媒体大屏都是基于web端技术实现的，这样的选择是因为数据大屏幕只是数据可视化在我们日常工作中的一个运用场景，我们需要能让数据可视化的技术能在日常工作中得到最广泛的落地运用，web端当然就是我们的主战场。当然。抛开这一点，我们认为web端的相关技术也是大家落地相关数据可视化开发的良好平台，为什么这么说呢？这基于以下几点：功能全，前端技术svg，canvas，webgl三者的相互补充，已经让我们在交互，2D&3D以及大规模数据量绘制有了充足的发挥空间，其次我们团队在以前开发数据产品的过程中已经用Nodejs建立了良好的中间件来连接各种数据源，这让目前接入各种数据库变得非常便捷。最后就是便于分享，在任何硬件设备上只要打开浏览器就能看到最终的数据可视化作品，在当今这个注重信息分享的时代，这一点非常关键。

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

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

在今天的文章中，你会看到许多关于表单设计的切实可行的建议，它们涉及到可用性测试、现场测试、眼动追踪以及用户反馈等多个不同的环节。

1、梳理逻辑，保留必需

表单是同用户进行沟通的语言。和任何对话一样，它应当以符合逻辑的方式帮助双方完成交流。所以，你需要这么做：

• 让问题保持直观的顺序。你应当站在用户的角度按照逻辑提问题，而非按照程序或者数据库的逻辑。如果问题之间没有逻辑存在，那么可以按照字母顺序来排布。
• 以直觉的顺序组织选项。比如选项为日期的时候，按照周一周二周三这样的顺序来排布，而非乱序。
• 时刻反思从用户那里获得的信息是否必要，如何使用。这样做是为了消除不必要的选项，提升完成率。

转场动效在UI界面中所起到的作用无疑是显著的。相比于静态的界面，动态的转场动效更符合人类的自然认知体系，有效地降低了用户的认知负载，屏幕上元素的变化过程，前后界面的变化逻辑，以及层次结构之间的变化关系，都在动效的加持之下，变得更加清晰自然。从这个角度上来说，动效不仅是界面的重要支持元素，也是用户交互的基础。

动效设计，尤其是协助交互的转场动效，如今日趋成熟。通过大量的案例分析和过来人的经验，我们逐步总结出优秀转场动效的5个核心的规则，今天的文章，我们就来分享这5个知识点。