Peter Drucker 说过：「量化才能管理。」这个格言后来成为了我的信条。我决定将我的目标量化，将它分解成为最基础的习惯来执行，并且以每天一定量的执行，来实现最终的目标。

我们先构建了一个免费的 Chrome 插件 Confetti ，这是一个能够帮你追踪日常习惯的工具，每次完成一个任务，都会有五彩缤纷的纸屑效果出现，祝贺你守住了习惯，达成目标。

以下见解希望对你有所帮助!

1、一开始就要界定好产品特性

一开始，我和 Wilson 就决定使用3屏的主要功能，并构建了一个粗糙的原型。但是，我们没有足够的远见，无法设想我们的产品最终的方向，也没有对全部的想法进行深入的打磨。

最终，我们向后退了一步。我们回过头来，确定了最小可执行原型的发布日期，以及真正的核心功能。我们在 Notion 上创建了一个文档，并且开始梳理和管理哪些功能是「必需品」，哪些功能「如果有了会更好」。比如，登录、注册、新用户引导是必不可少的功能。但是，我们认为「重新排列习惯」是一个提升体验但是并不亟需的功能。

我们基于这一点，我们开始抓住核心功能，尽可能让它们足够易用，强化核心特性。通过确定核心功能的优先级，并且确定发布日期，借此缓解我们的精神压力，确定我们不会被成堆的功能所淹没。这也似地我们有足够的动力解决核心功能。

2、有很多流程和状态需要搞定

在设计产品的时候，我经常被提醒要处理好每一个边缘情况，填好每一个坑，确保体验的顺畅。从零开始构建产品是一把双刃剑：基于自己的构想来创造产品是令人兴奋的，但是相应的，我需要经常在舒适区以外处理问题。

我一直在 Skookum 从事产品设计的工作，而这些工作通常都是在一定的约束条件下进行的，但是现在所要处理的产品则不同。之前的产品都可以借助现成的设计系统，有早已搭建好的设计语言，有完整的组件，有明确的 UI 状态，有非常明确的基础架构，但是这次是我自己的产品，所有的这些都没有。而且，这个产品还可能会存在几种极端的情况、流程和状态。

比如，在注册流程中，按钮会有默认、禁用、激活、填充、错误、悬停等几种状态，但是除了这些之外，我还需要考虑诸如密码重置的流程和体验，这可能会涉及到 6 个高度相似的 UI 界面状态：

1. 输入 Email
2. 重新发送 Email
3. Email 通知设计
4. 输入新的密码
5. 错误界面
6. 成功界面

这个过程中，有很多东西都令我一度感到迷惑，这也引发出我下一个要说的要点……

3、创建用户流程

项目开始之后，我很快就遭遇了组织架构问题。因为我是在工作之余来创建这个产品，这导致我犯了一个非常严重的错误：我没有按照传统的产品流程来创建产品，这随后导致了一系列的问题。

按照标准的产品设计流程，我需要从用户流程开始创建，定义用户可能会执行的流程，并且针对主要的流程界面进行必要的总结说明。因为这个项目和之前的工作不一样，我一开始就忘记了遵循流程这件事情，我错误地将它视作为一个包含几个简单界面的简单项目（是不是听着特别耳熟？很多所谓的小项目翻车都是从这里开始的）。这样一来，当我开始处理诸多按钮的不同状态和界面变化的时候，整个用户流程变得混乱不堪，并且我很难确定其中的体验漏洞有哪些。

最终我停止了这种随性的设计方式，并且在 Whimsical 当中创建了完整的用户流程。于是我很快清楚了那些环节有所缺失，以及整个界面流程的走向。

按照用户流程来梳理界面的时候，可以对于整个产品的屏幕状态有所了解，并且随着产品的发展膨胀，用户流程的重要性会随之增长，成为至关重要的部分。

4、交互应该反馈到UI中

的确，在完成整个 UI 之前，不应该开始向着项目当中添加动画。但是，不添加并不意味着你无需考虑。实际上，不同的微交互和动画对于实际的体验影响是巨大的。你在思考 UI 设计的时候，就应该考虑到微交互和动画的使用，避免在后续动效和交互落地的时候，进行不必要的修改。

比如，当我在设计「达成成就」这一体验的时候，我就考虑到了需要用到的微交互的效果，所以在我设计 UI 的时候可以顺着我自己的喜好来进行设计，并且将可能会用到的动效拖到某个角落暂时记下来，避免在设计 UI 的阶段，影响了整体的流程和效果。而后续加入动效的时候，就会方便很多。

我认为，将 UI 和交互结合起来考虑是非常重要的，因为两者共通塑造了体验。如果在设计 UI 的环节直接加动效，会让整个设计过程变得复杂臃肿。

5、尽早获得反馈

其实这也是我在这个项目中犯的一个大错：等了太长时间才获得反馈。

我通常是在晚上回家和周末才有空推进这个项目，在很长的一段时间内，我没有真正告诉任何人。

当我终于同我的家人、朋友、用户以及网上乐于尝鲜的用户公布了这一产品之后，他们在使用过程中，开始注意到了很多细节上显而易见、但是我并没有发现的问题。我意识到我作为产品的设计者，是很容易陷入并沉迷用户体验当中比较孤立的一部分，反而会忽略很多显著的问题。

回想一下，如果我能尽早向用户和朋友展示设计和原型，那么我会在更早的时候发现问题，并且在获得反馈之后才进入开发阶段，弥补大量的损失。

6、在别处获得启发很重要

很多设计师会认为，所有的想法都必须是原创的才行，否则就是欺诈。但是稍微想想，其实彻底的原创其实很少的。当你看到一个优秀的产品，它优秀的配色和恰到好处的交互可能会让你觉得：「已经有人做出来了，我的想法在它面前完全没法比拟。」

这种思维方式其实有着极大的缺陷，并且抑制了你的创造力。

当我发现我的设计有缺陷的时候，我会竭尽全力去搜索和了解更多网上已有的设计。我会观察和思考别的公司和产品是如何设计新用户引导流程的，如何管理用户个人信息的。我从来都没有复制被人的体验，但是会隔三差五去钻研别人所创造出来的优秀细节，然后将这些细节借鉴到我的设计当中。

我最喜欢的一个范例，是从模态状态下，旋转退出的效果。这是我偶然在一个网站上看到的效果，因此我决定将它添加到 Confetti 当中，我还在着陆页的按钮中加入了类似的特效。

事实上，一切设计都是混搭创造出来的。你借鉴细节并不意味着抄袭，不要害怕去发掘和学习别人的优势和亮点，你要学会有机地拆解和借鉴，灵活地运用到自己的设计当中，它就像调制鸡尾酒一样有趣。

7、勇敢面对身份的变换

当我们开始设计的产品的时候，我和 Wilson 头顶上的身份就一直在变。我们是 UI设计师，要负责UX，要做交互，也制作动效，要进行平面设计，还要考虑市场营销，要管理产品，我们也要扮演其他的角色。

职责如此之多，以至于我们不可避免地遇到我们能力范围之外各种新问题。我们必须承认自己陷入了困境，寻求外部帮助成了必要的选择。

专注于自己专业的领域，其他不专业的方面来寻求外部帮助是非常合理的。比如在一个项目当中，一位艺术家负责了绝大多数的风景插画，另一位艺术家则完成了肖像画的部分，这很正常。

我希望产品的外观和功能能够保持高度的一致性，并且我确实做到了。但是不要误会我的意思，我并非是不敢走出舒适区去学习代码开发，而是在这样的项目当中，我并不适合从UI和UX领域延伸出去，毕竟完成项目的开发优先级比学习代码更高。

8、保持简单更重要

尽管给 MVP 安排好了发布时间，可以防止这个项目被无限膨胀的功能特性和工作量所淹没，但是这样依然无法防止我们基于已有的功能进行改进。

很多人都喜欢 Reid Hoffman 的一句话：「如果你对于产品的第一版感觉不尴尬，那你一定是发布晚了。」不过，我们正式发布的第一版的产品，并不会显得太尴尬，但是目前来看，当时那种简单直观的状态，比起再花费好几个月时间反复打磨之后再发布，来得更好。

在发布新产品之前，我们必须考虑2个问题：

1. 我们是否相信我们所构建的产品，能够为用户带来价值？
2. 我们是否竭尽全力了？

这些问题让我们最终能够达成目标，且按时发布，避免分心。专注交付最核心的功能，而不是被一堆冗余的次要特性所压倒。

9、良好的交接更加省事省时

从项目一开始我就一直在做项目的管理和组织设计素材，以便后面进行开发。不过，由于我一开始就使用了 Zeplin 这样的协同工具，确保了我可以轻松地将所有的素材都顺畅地交给负责开发的 Wilson。作为一款设计系统工具，Zeplin 让我无需浪费时间对素材进行分类，非常便捷。

在交接的过程中，我还做了一些优化：

1. 将所有的界面都组织到了 Zeplin 当中，并且进行了处理
2. 我给所有的画板进行了针对性的命名，方便检索
3. 我在 XD 中标注了需要导出的素材
4. 我保留了旧有的界面存档，并且确保交付的新版界面是最新的

10、一次写明所有的UX文案

在设计 UI 的时候，界面中的文案部分是临时编写的，这促使了一次设计完成之后，整体的文案是不一致、不协调的。

我很希望一开始就创建了一个单独的文档，一次性将文案部分全部重写，包括提醒、注释、标签、弹出框提醒等等。而实际上，我的文案都是在设计 UI 的时候附带着写下来的，导致整体的一致性严重缺乏。

这种文案本身在调性上的缺乏，导致了整个产品在语气和用词上是混搭式的，一致性很差。

所以，在产品上线发布之后，一直在对文案进行修修补补。

文章来源：优设(陈子木)   作者:Danny Sapio





分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

配色/图标什么的是基础吗？

之前一直没有太多关注过如何定义一个 APP 的配色，或者如何画一个漂亮的 icon。曾经的上级指示都是这些基础对商业的不可量化。于是我在思考一个问题，就是没有直观商业价值的设计要素都失去了意义变成了所谓基础的事情吗？

半年前面试字节的时候，面试官问了我有关配色的定义，细节到为什么是这个色值。当时十分震惊于这么细节的问题，之后我就想起了之前有位朋友给我发送过一份有关支付宝「蓝」的定义 pdf，洋洋洒洒几十页就是为了解释他们为啥用这个有点脏的蓝色#108ee9 当主色。

所以其实 APP 的配色/图标与主品牌是一脉相承的，它是品牌的延续与象征。它以最直观的态度传达给用户，这个产品以及品牌的调性，并以此建立最强有力的视觉识别性。所以我觉得它是可以有条件地展示在我们设计方案里的，但一定注意它的篇幅和表达的方式，维度在品牌传达这一层就对了。

至于如何展示和定义你的 APP 配色，一般 2 类情况。

1. 在品牌主视觉配色基础上的适配

这种情况一般适用品牌主视觉方案已经设计完毕，APP 端作为延续。这个时候一般注意配色从 CMYK 模式到 RGB 的转换，所以作为 APP 的配色，具体色值上可以稍作调整，使它更适配于 LED 屏的用户感知与舒适度。

另外可以使用透明度进行色彩分阶段，一般从 0-100% 分为 10 阶就足够我们日常界面设计使用了。

2. 0-1定义APP配色

这种情况下我们从感性和理性 2 个角度去定义颜色。

从感性的角度分析：情绪板应该大家都熟知的了，根据不同的行业和用户定位得到相应的关键词。对应不同的关键词再搜集对应的图片，从图片和自然感知中提炼出主色。

从理性的角度分析：我们把色彩分为对比色、近似色、复合色、单一色、三角对立色和渐变色六种。根据产品的类型和定位，我们决定使用什么样的配色。比如一个年轻大学生专用的社交型 APP，我们可能就倾向更多地使用对比色这样的撞色得到更多潮流与青春的味道。

至于图标的话我就更不用多说了，大家肯定都记得那些非常基础的绘制图标的法则。个人认为图标也不太需要放一个单独的篇幅去展示，除非它有一些新奇有趣的亮点。

界面框架，只是框架而已吗？

在之前的文章中有写过，匹配产品定位的界面框架一旦输出，对整个 APP 之后的迭代与功能设计都有很直接的影响。定义整体的UX 框架方案，是实践设计目标与策略的过程，基本围绕着这 3 个出发点：匹配产品定位、满足业务拓展性、符合舒适度美学 。

1. 定义整体框架

首先我们从宏观角度分析，一方面产品的业务线处于什么情况，是相对独立的业务主线产品（举例：拉勾）？还是平台级产品（里面包含了许多垂直的业务线，举例淘宝）？如果是平台级产品在整体框架设计时就需要考虑跨端跨业务的框架拓展型。

举个例子，就是在定义平台框架的时候要考虑这个框架与容器是不是同时适用于底下的子业务线，同时当这个框架到了 H5、小程序、PC 的时候需要做哪些适配调整，是否都可以很好地进行兼容适配。

另一方面，整体框架设计的类型是否符合设计目标。举个例子，无框式超大留白的框架设计虽然看上去很厉害，但在大部分商业产品中它的实用性却非常低的。假设说我们今天需要做一个电商类的 app，设计目标是希望能够提升业务转化以及购买效率，那么展示效率与功能分区就显得尤为重要，它就更适合一个相对紧凑的卡片式为主的框架设计。

其次从微观的角度来说，遍地就都是细节了。舒适度美学这一说，其实难免有些抽象，我们把它转为相对合理一些的落地原理就会清晰很多，像大家熟知的间距 4 倍数原理、对齐原则等等。但是这些微观的内容不建议大家放到方案展示里，因为它并没有针对单个方案的特殊性，更像一种大众共识。

△ 多说无益，直接上最终的效果图，方便大家参考

2. 具体容器解析

我们特地把单独的容器部分拿出来解析，是因为自定义容器是展示核心业务最主要思考呈现，同时还可以配合运营做很多提升业务效率的配置。在做具体设计的时候，我们需要区分「端上固定」模块和「运营配置」模块之间的差别。

「端上固定」模块

顾名思义就是开发端上需要写死的模块。写死的模块意味着，无论一个配图还是一句文案，也只有开发童鞋修改后通过发版才能实现内容变更。一般适用于相对固定的产品功能以及 UGC 用户生产内容。比如：拉勾上传简历功能、斗鱼的直播间列表。

「运营配置」模块

相对「端上固定」，「运营配置」就不需要跟着发版，可以随时后台上传替换模块内的内容，适用于需要 PGC 生产的内容。说到这里很多童鞋可能马上就联想到 banner，弹窗的运营位了，但其实除了这些之外还有很多容器模块是需要灵活配置为「运营配置」模块才能更有效地提升运营业务价值。

我们可以这样来区分「运营配置」模块类型。

一种是纯运营配置模块，即设计与开发输出框架、定好配置字段限制之后，运营可以独立完成后台配置的。比如：资讯 app 0-1 前期的资讯列表内容。

另一种是运营设计配合模块，即需要设计配合运营输出一定的设计图才可以进行后台配置的。比如：常见的 banner、弹窗、热门推荐专题等。

在 0-1 的设计方案中，更推荐大家展示「运营配置」模块的内容与解析，因为 0-1 是个以拉新为主的阶段，运营显得尤为重要，所以我们的设计需要侧重考虑整体的运营效率与转化。

如何展示亮点设计？

在我们概述完大部分的整体思考路径与设计方案后，我们需要由面到点，从全局提炼细节，突出自己的设计方案亮点。

而如何提炼这个亮点呢？是挑一个我设计的最好看的界面呢？还是直接放最复杂的那个流程？以下是推荐选择的亮点设计：

1. 完成理论实践，并可以量化价值的设计case

大家应该都了解，一些和设计息息相关的数据 UV/PV/GMV/ 相关业务指标等，以及一系列在实践中很好应用来解释设计方案的理论支撑比如 5W1H、GSM 与五度分析……这些数据和理论是支撑我们设计更饱满更有说服力的重要支点。

虽然在 0-1 的项目里，我们基本不太用得上优化数据比对（因为产品初期用户数量少，产品体验路径也是一直处于不断试错阶段），但是我们还是可以借用上文所述的一些方法论或者 A/B test 来完成我们的方案思考过程展示。

那些你在完成践行设计策略完成设计目标时获得的数据指标要提前预知，养成习惯之后，你就可以快速轻松地察觉到哪里有可以做 A/B test、进行埋点数据比对的地方了。

2. 影响上中下游环节的设计case

除了对业务提升价值的项目外，我们有时候也需要注意对品牌设计、产品、运营、技术等上中下游造成影响力的设计项目。通常这类设计大部分也都是设计自驱发起的，能起到提升各方人效和业务效率的作用。

举例的话，我能马上联想到的就是多方协作的大型线上组件库，可以参考阿里的 Ant design、滴滴的魔方，在之后的版本拓展中甚至可以延展成功能更加强大的多方协作 UX 设计资源中心。

规范与组件库的定义真的备受关注？

感觉近期面过的 80% 的公司都对组件库的定义非常关注，所以我们要做的不仅仅只是放一个视觉规范或者组件库的全景图，而需要对组件库进行拆解。

文章来源：优设(土拨鼠)   作者:Nana的设计锦囊



分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

一.  什么是界面交互动效？

界面交互动效是展现界面间的转换和界面内元素变化的交互反馈。而效果就表现在触发与结束的过程中，表现清晰的层级关系，自然的引出与结束。交互动效有着承上启下的重要作用。

二. 界面交互动效是用来干什么的？

• 让用户清晰地感受到当前所处场景和层级关系。
• 多种UI元素之间的相互转换。
• 给用户制造惊喜感使用户愉悦。

三. 界面交互动效五大注意点

• 避免动效过于花哨、酷炫、标新立。
• 在效率型应用中，过度、无意义的动画只会阻塞任务流程。
• 动作动效不超过1秒。
• 用户专注内容时，不要用吸引注意的动画去打扰。
• 出现频率高的操作动效，避免用户反感，延迟操作时间。

四. 如何设置缓动曲线与时间让动效更加自然，可以看下面的一些总结

• linear曲线（匀速运动）除了一些特殊场景如加载、很少被使用。
• easeIn（先缓后快）使用场景较少，主要在掉落、中使用。
• easeInOut（头尾缓、中间快）通常在轮转切换的动画中使用，这类动画的触发对象与运动对象并不是同一个元素。
• easeOut（先快后缓）最常见的效果，其触发对象与运动对象往往是同一个。主要用在展开、收起、出现、移动等动画中。当不知道用哪个缓动曲线时，用这个一般不会错。
• 曲度主要表现运动过程的力的大小，曲度越大，启示力或阻力越大。
• 回弹则表现的是运动的剧烈程度及对象的质地。
• 运动时间一般都控制在0.3s-0.8s之间，过长的时间会让人感觉拖沓，不自然。

五. 界面交互动效如果以动效的表现属性来分可以分为两种

第一种：为衔接类型动画

主要针对不同界面直接的衔接，为带来更流畅的操作观感所做的设计，弥补两个界面直接的差异所带来的用户感知落差。

第二种：特效类动画

特效的核心目的是为了吸引用户的注意力，提高信息敏感度，在游戏界面设计当中使用更为广泛，能够带来更加绚丽的动态画面。

六.界面交互动效如果以界面的维度来说可以分为以下两类

第一类：界面内的交互动效

在一个界面内的交互动效特别多，例如点击加号出现下拉菜单，出现浮层动画提示，点击舵式导航出现选择类型和遮罩，点击按钮出现评论点赞，当前页面的展开收起，加载等等。如下图所示：

第二类：界面间的交互动效

几个界面之间的的交互动效通常是平缓过渡到下一页。常见的有以下几类：

△ 硬切到下一页

△ 下一页从右往左推入（上一页从左往右推出）

△  下一页从下往上弹出

△  上一页的元素过渡到下一页

总结：

• 动效创意方面的创新要依据用户的认知模型。单纯很炫很酷的动效如果脱离了用户的认知模型，那么这样的交互动效对于整个产品来说是有害的。
• 做界面交互动效的目的是为了更好地落地。如何更好地高效地表现我们设计的动效。同时使得我们制作的动效可以很好的运用到实现落地中，这是很重要的，不然所有的一切都是海市蜃楼。

在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候，我们大多只需要进行有限度的微调，即可达到颇为不错的效果。在之前，我已经撰写了很多实用的 UI & UX 优化小贴士（看完文章在文末获取），这篇文章继续增加 7 条实用的建议，一起来看看吧！

B端设计基础指南：网格系统

背景

“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现，关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的，这是出于怎样的考虑呢？今天我们就来聊一聊，如何在产品设计中把握“时间”显示的诀窍，让其在页面中发挥最大的作用。

“时间”元素的分类

按照“时间”元素在页面中的出现场景和所起到的作用，可以大致归为以下几类：

A. 事件的关键构成要素

时间作为描述整个事件的重要组成部分，缺失后会对原本所要传达的内容产生严重的影响，进而影响用户的使用预期和结果，比方说用户可能不能以一个较低的价格完成商品购买，或错过了产品发布会的时间。

B. 行为的时间标记

指用户本人作为行为主体或行为的接收对象，在某一动作发生后为其所打上的时间标记，比方说“我”购买商品下单的时间或收到一封邮件的时间。

C. 内容的附属信息

用户在使用产品进行内容消费时，时间作为该条内容的附属信息，起到补充说明的作用，比方说一条短视频或新闻的发布时间。

在上面的案例中，我们会发现“时间”在对应场景里所发挥的作用不同，用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时，要根据具体场景和用户诉求判断“时间”元素的重要性和优先级，通常情况下：时间作为事件的关键构成要素＞行为的时间标记＞内容的附属信息，之后再思考用什么样的设计形式去展示来达到我们的目标。

“时间”的呈现方式和运用技巧

在讨论“时间”元素的设计之前，我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度，类似我们高中物理时学过的“时刻”和”时间间隔“的概念。

拿开会举例子：“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点，而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段；但是，我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。

通过上面的例子我们可以发下，同样是描述一件事情，运用不同的时间点、时间段的方式去表达，意思一样但却传递出不一样的情感，并且两者存在如下的“换算”关系：

1）时间段加上定语会变成时间点（但同样是时间点，“下午 6:00”是绝对时间，而“1.5 小时后”是相对时间，刚好对应到我们设计时两种时间戳类型）；

2）两个时间点之间则表示时间段。

所以，我们在平时表达或设计时，要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点？还是想描述其所持续的时间过程？之后我们再针对不同语境去选取合适的文案和呈现方式。

时间的呈现方式离不开：时间戳类型、时间显示格式、时间颗粒度。其中，时间颗粒度指的是描述时间的最小单位，往往颗粒度越细，给用户传达的确定感越强（如转账时间是 12 日 15:15:20），对用户的激励作用越明显（如距抢购结束仅剩 00 时 01 分 23.6 秒）。

1. 绝对时间戳

绝对时间可理解为事物发生时的确切时间，由具体日期（年、月、日）和时间（时、分、秒）组成。使用绝对时间戳的优势是信息传达精准，显得正式，给人确定感和安全感，同时排布规整，便于形成认知习惯；但缺点是内容显示过长不利于阅读，并且占用空间较大。

在时间显示格式的选择上，为了避免混淆，推荐使用文字格式或“-”分隔符来分隔日期，而“/”分隔符在不同国家有不同的展示顺序习惯，容易造成误解，尽量少用。

时间颗粒度的选择依情况而定，一般场景总结如下：

2. 相对时间戳

相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时，距当前时间点的时间差值，多用于 push 通知、信息流产品，侧重强调内容的时效性；而“倒计时”也算相对时间的一种，侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是不够精确、正式，并很难衡量两个时间点的临近性。

在使用相对时间时，要注意格式友好。时间单位可随着时间的推移自动改变；数字不要过多，尽量取整；并且可设置其与绝对时间转换的临界点。

总结

在设计界面中的“时间”元素时，要遵循场景贴合、便于阅读理解的总体原则；之后根据场景和目标，再选取合适的“时间”呈现方式（包括时间戳类型、时间显示格式、时间颗粒度）。

当时间作为“A.事件的关键构成要素”时

一般情况下使用绝对时间，并且要看是为了强调某一关键时间节点，还是侧重表达整个持续过程。此外，选用关联场景的文案或者运用倒计时（相对时间）的形式，可一定程度上促进用户更加集中注意力，提升对信息的关注度，并达到特殊的激励作用和转化效果。

当时间作为“B.行为的时间标记”时

该场景通常是为了追求确定感，通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点（段）去查找、回顾相应内容，因此大多数采用绝对时间，时间颗粒度依具体情况而定。

当时间作为“C.内容的附属信息”时

如果所设计的产品供给内容的更新速度快，用户活跃度高，并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性，那么通常会使用相对时间。部分信息流产品（比如新闻资讯类、社区类）会在列表页使用相对时间，在详情页使用绝对时间，时间颗粒度也是依情况而定；并且会随着时间推移，在某一时间节点前把相对时间转换为绝对时间。

文章来源：优设 (VMIC UED)

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

复杂应用大多情况下是偏专业和B端的一些UI界面，它们大多出现在桌面端使用环境，并且终端用户类型多样，涉及流程、链条、业务也大多呈现出多变复杂的特征。这篇文章，来自UX设计领域的顶级存在NNGroup，作者为凯特·卡普兰。

到底什么是复杂应用？

我们之前将「复杂应用」界定为特定专业领域当中，需要经过广泛培训之后使用的，有着非结构化目标、非线性工作流程的任何应用程序。这个概念可能听起来有点抽象，不过这么说你可能会 更容易理解：从科学研究到专业人员，诸如金融分析师，它们常用的那些专业软件应用。这类应用通常有着这些特点：

• 为有专业知识和训练有素的用户提供支持
• 帮助用户浏览、管理大型数据库，并提供高级的数据分析和处理的功能
• 通过可变和多样的基础任务功能来解决问题或者达成目标
• 需要在多个角色、工具、平台之间进行协作或者切换
• 可以用来减轻高影响力/高价值任务的风险，降低损失

尽管不同的复杂应用之间差异很大，但是他们的共同点是，专业的从业人员对于这类工具有着极强的依赖性。

考虑到设计师和开发者在面对这类工具的时候的挑战，我梳理总结了 8 个复杂应用的设计原则和指南。

1、采用边做边学的用户流程

很多研究表明，对于复杂的应用和工具，用户更加青睐可以立刻上手开始使用而不受它复杂度影响的那类工具。

与大量的教程、文档、帮助和设置说明相比，能够立刻开始的任务和项目，对于用户有着莫大的吸引力。这种现象被称为「活跃用户悖论」。

虽然在专业领域当中，倚靠摸索和试错学习是不恰当也不安全的，但是一定程度的边做边学是必须的，因为不可能在培训和手册当中涵盖所有的使用场景。

所以，在设计的时候应该提供「跳过教程」的直接上手的偏好设置，同时进行相应的安全性设置，避免新手的莽撞操作导致损失。比如可以限制这个阶段的用户执行长流程多任务的操作，让控制面板实时显示操作结果或者预览结果，这样用户无需执行全部操作就可以知道大概的结果。

在 Salesforce 控制面板当中，就可以实时预览面板编辑的效果。

2、为用户提供有效的方法和建议

绝大多数用户都不是进阶的专家级用户，他们在绝大多数时候会使用基础但是效率没那么高的操作和执行方案。很多用户形成习惯之后，通常不会主动做出改变，而这在日积月累之后导致大量的时间浪费，效率低下。

值得一提的是，这个时候依赖冗长的文档和教程其实很难达成效果，更合理的方式是结合用户所处的上下文环境，通过界面工具提示的方式，适时地告知用户「有更高效方便的方法」。

通常，可以使用悬停提示，或者是弹出式工具提示来实现这一功能。

ArcMap 是一款地理信息系统类工具，它通常会通过上下文环境下的信息引导，来帮助用户了解技巧。

3、提供灵活而流畅的功能路径

复杂的应用程序，通常会有很多功能是分散的而非线性的，不同的功能组合起来可以实现特定的功能。在这类工具当中，用户日常可能也不是很确切知道最终的目标是什么，而需要通过数据分析来逐步推进，同时，在知道确切目标的情况下，也应该可以遵循不同的路径灵活地达成目标。

设计师这些应用的时候，设计师应该避免使用固定、唯一、 僵化的实现路径，迫使用户必循严格按照某一固定路径来做事情。一方面，允许用户跳过某个步骤，或者回滚到更早的路径，另一方面，允许用户遵循不同的方式和路径来达成目标。

比如万事达卡的自助服务就可以通过交互式的图表来引导用户完成不同的任务。

4、 帮助用户跟踪行为和思考过程

复杂的任务，通常意味着它需要很多步骤，不同的环节，而在实际的应用场景中，某个分析步骤耗费几个小时甚至几天，都是有可能的。在高度复杂的现实生活中，某个步骤可能会换人接手，可能会因为硬件、 网络等问题而暂停甚至丢失，这也意味着「可追溯性」是很重要的。

所以，在这样的复杂应用当中，应该允许用户在使用过程中，可以便捷清晰地记录、保存、 导出内容和记录，允许用户中断，中断后可以恢复特定的任务。在任务进行过程中可以进行注释、保存相关的说明。

在决策建模软件TreeAge 当中，用户可以在分析和建模过程中进行开放式的注释，可以后续在底部快速访问这些笔记。

5、可以协调多工具并且在工作空间之间转换

复杂的应用通常还会面临一个状况，就是工具本身的不足，用户需要在多个工作空间上使用工具和内容的时候，它需要具备切换的功能。对于不具备的功能，应用程序应该允许使用第三方的应用来作为补充。

比如当软件不支持某个操作的时候，应该允许用户从线上的其他数据库中获取并导出数据来使用，可以依托外部文档作为支持，允许用户在应用中做注释和评论。

减轻工作负担的一个要点，是尽量使用通用的API、接口和标准，尽量兼容行业标准软件，比如 Excel、Powerpoint ，尽量使用标准格式，等等。

微软的商业分析软件 PowerBI 就提供了标准化的导出和复制功能，非常方便

6、减少混乱而不影响功能

复杂应用通常旨在保持泛用性。使用场景多样，多种不同的功能，一家汽车生产厂家，可能会和蜜蜂养殖机构采用同样的工具和软件来监测机器故障。但是，这种泛用性的另外一面，就是混乱性。复杂的应用可能会同时兼顾到基础型的小白用户和进阶型的专家用户，而后者用到的功能很小概率会被基础用户用到。

所以，设计者需要在不降低功能性的情况下，基于应用场景、 用户需求来进行简化和优化，在保持功能完整易用的前提之下，降低复杂度和混乱度。

分阶段和层级展现就是一种降低混乱度但是不影响功能性的一种常见策略。当用户进行到特定任务、特定阶段、特等级别之后，再呈现特定功能，是有效的设计方法。

7、主次信息之间要能平稳过渡

即使降低了混乱度，在复杂应用当中，信息量可能依然是过载的。通常，对于这种情况可以通过区分信息层级的主次来进行快速的区分，不过，从交互上来说，这可能依然不够。

对于诸如控制面板一样的界面，用户可能需要时刻查看面板上的信息，需要了解次级信息但是又不能离开界面，这就体现出主次信息之间的过渡呈现的重要性了。

一般而言，使用类似与悬停显示的方式，能够比较柔和地将次级信息呈现出来，允许用户查看详细的定量数据。下面这个案例当中就是，悬停显示更多次级信息。

8、在视觉上突出关键信息

复杂应用通常在界面上包含由大量的信息，而这个时候关键性的数据如果不在视觉上做突出显示，会被用户错过。通过视觉区分、提示警报的方式，让用户及时注意到，才有可能规避可能存在的问题。

值得注意的是，让关键信息和元素凸显的方式，并不一定非得是使用鲜艳的色彩和较粗的字体，简单的放大呈现，使用图形化的元素辅助提示，或者是提供足够的留白都可以达到目的，就像下面的案例一样：

结论

复杂的应用多种多样，支持的服务和功能也千差万别，但是无论如何呈现，此类复杂应用的设计都是非常挑战设计师的设计功底的，需要设计师了解业务，了解用户，并且能够通过设计更好地提供服务。

文章来源：优设(陈子木)   作者：Kate Kaplan

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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