按钮设计

为了设计正确的交互，我们需要回顾一下物理按钮的历史和起源。物理按钮是UI组件的前身，当今的数字产品都还在大量使用它们。按钮很棒，即使用户不了解基本的机制或算法，只用手指触摸就可以让电器、汽车或系统运行/关闭。在《Power Button》中，作者Rachel Plotnick描述了当今按钮文化的起源，并解释了按钮是如何成为数字命令方式的。

“你按下按钮，剩下的我们来做。” ——柯达相机的醒目标语吸引了潜在消费者。

即使在今天，这也是吸引用户的地方——通过简单触摸就能让事情发生的即时满足感。尽管有大量新的家用电器和设备都变成了触摸屏，但物理按钮并不会消失，因为它们让人形成的行为习惯，会影响按钮设计的直观性和易用性，是一种永远存在的实物参考。

01 按钮 vs 链接

按钮向用户传递了操作的可执行性，在整个UI里很常见，例如：对话框、表单和工具栏等。按钮和链接之间的区别，请注意：

-链接是导航到另一个地方时应用的，例如：“查看全部”页面、“ Roger Wright”个人简介等；

-按钮是在执行动作时应用的，例如：“提交”、“合并”、“创建”、“上传”等。

02 让用户直观感受按钮状态

为按钮创建正确的交互和样式，是按钮设计过程中重要的组成部分之一。在不改变组件或产生视觉干扰的前提下，每个按钮的状态都必须有明确定义，以使其与周围布局区别开来。

正常—表示该组件已启用交互；

突出提示—用户使用键盘，进入编辑状态；

鼠标悬停—当用户将鼠标置于交互式元素上方时；

点击—按下状态表示用户已轻点按钮；

进度/加载—用户操作行为没有立即执行，表示正在完成操作中；

禁用—表示该组件当前处于非交互状态，但将来可以启用。

03 按钮的颜色、形状和大小

常见的是圆角矩形按钮，这些按钮即使在输入框旁，用户也能快速识别。按钮样式的选择取决于用途、平台和应用准则。以下是一些最受欢迎的样式变化：

04 建立按钮样式等级

样式主要用于区分重要和不重要的动作。创建动作层次结构，该层次结构将指导用户进行多种选择。通常，可以有一个突出的按钮（该样式通常称为“首要”按钮），剩下的按钮则依据重要程度建立不同的样式等级。

05 《Don’t Make Me Think》

这是可用性工程师Steve Krug撰写的书籍标题，其中讲到了一点：对用户而言，界面清晰明了非常重要，不要给用户制造难题。人们周围其实已经被电子产品包围了，多年使用各种设备、软件的经验，一定程度上固化了人们对按钮外观和功能的认知。如果与常见的“标准”存在较大偏差，也会给用户造成困惑。

避免对交互式和非交互式元素使用相同的颜色，否则用户不知道该点击哪里。

06 一致性的重要性

“一致性是最强大的可用性原则之一：当事物始终表现相同时，用户不必担心会发生什么。” —雅各布·尼尔森（Jakob Nielsen）

一致性提升了速度性和准确性，有助于避免错误。创建可预测性，帮助用户控制和实现产品中的目标。当创建主要、次要和第三种样式时，试着找找一致元素，如颜色、形状等。按钮设计不仅要在设计系统内部保持一致，在整体平台也要进行统一。

07 使按钮足够大以实现可靠交互

按下按钮应该是一个简单的操作任务，如果用户无法正常进行，或在过程中错误地按到了相邻元素，不但给用户造成了负面体验又浪费了时间。

对于大多数平台，请考虑被触摸的目标至少为48x48dp。无论屏幕大小，这种尺寸的触摸目标的物理尺寸应为9mm，触摸屏元件的目标尺寸至少是7-10mm。

对于图标按钮来说，请确保触摸目标超出元素的可视范围。这不仅适用于移动设备、平板电脑，同时也适用于网络上的指示设备，比如鼠标。

08 无障碍设计

所有组件都应推行无障碍设计。目标区域的大小是影响可访问性的因素之一，其他的则是字体大小、颜色和对比度，也有很多工具能检查组件的设计性能。

设计师应与开发团队紧密合作，确保按钮与屏幕阅读器协同工作。添加role =“ button”将使一个元素作为按钮控件出现在屏幕阅读器上。

09 手势应用

手势应用，让用户可以通过触摸与应用程序进行交互。使用触摸来完成任务，不仅提供了触觉控制还非常节约时间。某些手势（比如滑动以触发上下文动作、双击或长按来标记喜欢等）每天都被人们广泛使用，但对于普通用户而言，它们仍然不太明显，建议把它们替换给高级用户执行操作。

10 按钮标签信息易于理解

按钮传达的信息与其外观一样重要，错误的信息会让用户感到困惑，甚至是误导用户操作。正确的按钮标签会引导用户完成操作，最好使用动词，并在按钮上标记其实际功能。

就像按钮在问用户——“您要（添加到购物篮中）吗？” 或“您要（确认订单）吗？”，避免使用Yes/No或过于通用的标签，比如Submit。

11 确定/取消，还是取消/确定？

两者都是正确选择，但设计师可能会花几个小时来讨论哪个更合适。

-确定按钮在前，是自然流畅的阅读顺序。Windows把确定按钮放在了前面；

-确定按钮在后，可以帮助改善流程。这种顺序形式，帮助用户再采取行动前，对所有选项评估，有效地帮助人们避免错误。苹果则是把确定按钮放在最后的；

任何一种选择其实都没有错，也不会造成什么可用性灾难。

12 避免使用禁用按钮

每个人都遇到过这种情况：在屏幕上停留了几秒或几分钟，怎么操作都没反应，这才发现原来是禁用按钮使我们无法进行下一步。禁用控件让组件短暂处于非交互状态，但如果使用不当，则非常容易让用户产生负面情绪。

我建议尽量避免禁用按钮，最好始终启用它，如果用户未提供某些必需信息，则只需突出显示空白字段或显示通知可。

文章来源：UX辞典(站酷)

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

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

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

近一年来，Figma 可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在 Axure 9.0 和 Figma 中切换使用，深刻的感受到了设计细节带来的体验差异化。今天就通过一些细节亮点，总结下工具软件的体验设计的几个原则。

交互输出文档的作用

文档这个东西，我们又爱又恨，爱的是它能够记录并且在工作中让大家高效的协调合作，恨的就是很多人对文档嗤之以鼻非常敷衍，以至于文档不但没有起到它应有的作用，反而成为了一个不负责任的借口。所以一份合格或者优秀的交互输出文档对于一个项目的流转以及团队的配合来说是至关重要的。交互文档的主要利益相关者通常是以下几个角色：交互、产品、开发、UI

交互

首先优秀的交互文档必须在交互组内部进行过审核，包括一致的撰写标准和模式的使用，一个比较规范的交互设计组对于交互的撰写标准也是有严格的规范的，以及在什么情况使用什么交互模式还有组件库的调用都会有详细的说明，那么你的交互输出文档就必须满足团队设定的规范。

其次对于其他交互设计师来说，你的设计方案中是否会出现其他人负责的模块，那么在评审的时候需要同步，虽然交互输出文档对于其他交互来说不是直接受益人，但是在团队同步过程中也是非常重要的。

产品

每个公司对于文档的要求和规则不一样。小公司可能没有交互设计这个岗位，那么可能产品连prd文档也没有，仅仅只是一个简易的需求说明文档，就更不用说针对交互规则的说明文档了。

很多有完善规模和流程的团队不仅会有详细的需求说明文档也有很完善的交互说明文档。我们首先要明确的一点是那么多文档最后是给谁看的，一共在项目中会有多少文档产生。

通常产品经理会在项目初期做一份prd文档（Product-RequirementDocument，需求说明文档），这个prd文档主要是给业务方、交互和开发看的，在这个文档中需要包含一些业务规则以及交互规则，所以交互的输出文档是需要和产品的prd文档合并的。

当然如果你是一位很有自驱力的人，那么你可以自己推进需求并落地，一个人就可以完成prd文档的撰写和需求的落地了。

开发

特别想给各位提个醒，在开发需求评审的过程中，请一定记住你们评审的目的，开发同学也要注意，请把重点放在需求是否能实现以及开发相关的地方即可，请不要考虑为什么要这样做，或者你觉得应该怎么设计，一旦进入了开发对需求和设计的评头论足那么这个会议效率就相当低下。专业的事情就交给专业的人去做吧，可以私下讨论但不要在评审会上各抒己见。

交互输出文档对于开发的作用就是，开发可以更好的还原该功能中交互的跳转以及逻辑，所以我们尽量把交互规则写明白写详细，比如按钮在press和default时候是否样式会有变化，或者页面转场的方向，这都是一些细节，减少不必要的低效沟通。你会发现有些时候为什么开发总是来问一些规则，就是因为文档中没有描述准确，所以开发和交互都需要花时间去同步这个细节。

所以这个也非常考验交互设计师对需求文档撰写的功底，并不是图片文字随意摆放就可以的。和开发合作时也是一项内部的体验设计，你把文档写好了，开发看起来也舒服，满意度也高。如果是一堆文案，连基本的对齐都没做到的话，谁来看都会看不下去。

UI

交互输出文档对于UI来说，作用就非常简单了，但是这里也会碰到问题，那就是交互同学只需要把信息的层次表示出来即可，千万不要画到连视觉同学都没有发挥余地的程度。所以为什么现在UXD体验设计那么火，就是因为交互和UI其实重合度是很高的，只要有智能化组件库和工具做支撑，那么在交互和UI的设计流程中，时间就会大大降低。

交互输出文档的内容

在这里，我们就将整个prd文档的内容给大家分享一下，不仅仅是交互需要输出的部分。因为一个高阶的交互是需要能够独自产出prd文档的。然后不同的公司对与文档的要求也是不同，大家做参考即可。

一份基础的prd文档主要由这几部分组成（其实就是这个需求的来源以及推导过程和如何落地的说明）：

1.项目概要

a.需求背景

这个是一个项目最重要的部分，可以说背景没有搞清楚，后面都可以不用做。这个指的就是我们做这个需求的价值和原因。比如我们app中业务方（运营）需要做一个扫一扫功能，那么这个功能首先我们就从业务价值和用户价值两个方面去评估，根据对业务方的沟通之后我们发现扫一扫功能将会在周年庆的时候通过物流包裹上的二维码，让用户进行扫码参与活动这样的玩法。

所以这个需求对于业务方来说是一个转化手段，通过扫码参与活动-领券-消费，确实是一个不错的玩法，但是大家如果只盯着眼前的问题或许就不够了，比如当周年庆结束之后这个功能还有什么用，他在以后的规划中的存在是怎样的。在所有的包裹中印上活动的二维码这个时间周期和成本有多大。

其次，对于用户来说，扫一扫并不是帮助他们解决了某个问题，而是我做了一个东西，同时搭配着这个功能让你们去使用，对用户来说是一个很可有可无的功能，如果线下包裹上的二维码破损了也是非常影响体验并且是不可控的。那么综上所述，既然要做一个临时的活动用其他的方式会不会更好？

所以在这个文档中的第一步，首先就是要确定需求的背景、价值，也就是说，你这个需求是怎么来的，比如再来讲我们一个店铺的优化项目，在这个项目中，首先我们必须在评审的时候说清楚我们为什么要对其进行优化和改版，一定是出现了或者我们定义到了某个比较严重的问题，这边大家对我们app业务可能不是很了解我就简单说了，就是个人中心和店铺营销场景重合过多，并且卖家的同时可以买和卖两个场景存在，所以店铺页通过我们的数据分析和用户的访谈我们发现了一些机会点，以及我们必须突出一个核心场景让用户有明确的分辨。

另外就是背景的描述也可以带上你的调研结果和分析，比如之前我们做首页优化，我们观察了近5个月的数据，都呈现下降的趋势，所以之后有进行了一系列的访谈和用户体验地图分析才有了这个需求的背景产生。

b.需求目标

目标很好理解，就是我们希望通过这次需求迭代达到一个什么成果，比如我们之前做过一次整体的体验优化改版，那么我们的目标就是减少用户的流程跳失、提升整体体验满意度、提高用户的任务转化率，其中我们做了一个商品关注的功能，由于是限时特价商品所以是限量的，在规定时间进行抢购，为了让用户的使用场景统一我们打算在应用内做一个商品关注功能，所以在这个需求的初期，我们对这个功能的目标和预期是提升xx百分比的转化，提高x%比的gmv，提高用户对关注商品下单的效率和满意度，之前很多用户想要购买商品需要自己在手机端设置闹钟，不方便。所以这个功能的一个目标就是解决用户场景迁移的问题。设定目标之后，就是为了在上线后对其进行复盘和数据跟踪还有用户跟踪。

可以用一句话来描述：针对什么用户在什么场景下解决用户的什么问题，达到什么目的？

c.需求范围

需求范围也相当于范围层，指的就是在该需求中我们需要做哪些相关功能以及功能涉及面。举个例子，之前说的扫一扫功能，不同的产品定位对于扫一扫功能的要求也是不同的，比如说微信在扫一扫功能中承载了：扫一扫、相册、封面、街景、翻译、手电筒等诸多功能，再比如淘宝，有扫一扫（ar、拍立淘）、相册、历史、帮助、手电，这说明了不同产品对扫一扫功能有不一样的要求，所以在需求范围内我们需要把本次需要做的功能进行描述，并且该功能是否影响其他功能的使用和对整个产品的影响范围。并且我们也会讲所需要的功能进行拆解和优先级拆分，在表格中编辑。

d.调研分析

调研分析其实就是为我们第一步背景和价值做准备，由于汇报方案和评审，或者在项目推进时，我们需要有相应的论据来支撑我们方案的客观性，所以在这一板块中输出的结论就非常重要，比如之前的首页改版，经过用户研究小组的访谈和数据分析得出相关的结论，通过埋点找到相应板块的点击数据和异常点，然后再进行一系列的问卷和访谈研究，找到结果，都是为了辅助项目的背景以及在评审中大家对需求价值的灵魂拷问。由于数据和调研结果比较敏感就不过多放了。

e.版本日志

日志是一个非常重要的组成部分，做过开发的同学都知道log 的重要性，当我们跑不通的时候我们都会去检查log，然后多测试几遍可能就找到问题所在了，其实我们的版本日志的作用也是这样，但是一个是对自己来说可以记录自己的工作过程，还有思路的变化，第二就是对外，包括和需求方的讨论，会议的纪要等。

要注意的是会议纪要在备注中需要详细说明，以做证据。同时也要邮件通知相关人员和负责人。可能有些公司还会放一些评审记录，比如各部门负责人对方案和需求的建议，业务方和技术负责人的一些建议也会放在项目概要中，而这个prd文档也可通过内部服务器进行实时更新和保存，如svn。方便大家对需求的进度和迭代有一个直观的追踪。

f.项目成员

这个就不用多说了，产品、运营、交互、视觉、开发各司其职，照相馆人员即可，就不至于当项目开始进行了人员分配还没到位就尴尬了。

2.需求方案设计

a.业务、任务、界面流程图

有些同学不是特别明白业务流程图和任务流程图的区别，这边给大家简单介绍一下

业务流程图：

意思就是在这个需求系统中，相关利益者的业务关系，任务信息的流向的一个图标。比如这个简单的例子，用户在点外卖这个场景中，相关的利益者有用户、店家、外卖员三者，那么当用户开始触发流程后，这3者在这个流程中就会各司其职，而业务流程图也很明显的告诉大家所有联动者的指责和流程走向。

任务流程图：

用户在具体执行某一个任务时候的工作流程，以及其核心任务的操作步骤，比如在登录注册这个任务中，用户需要进行一系列的操作，在这个流程中用户的操作引发的系统判断需要详细说明。

界面流程图：

界面之间的跳转关系和路径，在这个流程图中，我们不需要吧详细的说明写上，只需要将需求中涉及到的页面跳转进行叙述即可。

b.相关说明和规则

接下来就要开始我们交互文档最为关键的部分了，如何书写交互说明，以及交互说明应该包含的内容。

1.全局思考

在做交互方案也就是我们画原型的时候会思考一些问题：

a.整体思考

1.信息架构是否容易理解，信息分类是否合理，比如我们的信息架构是否采用了用户容易理解的，市面上常用的信息架构。

2.信息层级和路径是否合理，不一定要最简，但是要高效，信息的优先级是否放置准确，信息组织是否具有相关性、逻辑性。

3.主题是否清晰，3秒内告诉“我”在哪里，并且可以做什么

4.方案的延展和后续功能规划的可扩展性

b.用户权限

根据不同用户的权限对该需求进行检查，比如普通用户、vip用户、内外网用户、游客用户，在登录未登录时候对需求内功能的使用是否有影响

c.登录方式

用户登录和注册、终端的兼容，不同方式注册的用户是否需要补填相关信息等等

d.流程

1.该需求中的功能流程是否和其他类似或者相同功能流程保持一致性；

2.逆向流程和非正常流程的思考有没有完全；

3.流程的闭环有没有做好；页面跳转的方式是否合理；

4.中断后的恢复状态如何呈现；

5是否保留原信息等等

2.内容、状态和显示

a.内容的获取来源

例如下方的图片为例，banner的图片来源和发现feed流的图片来源肯定是不同的，那么就要写清楚，图片或者数据的来源是来自于用户的上传还是系统后台的配置获取；并且获取的方式是如何的，是需要手动下啦刷新还是切换页面自动刷新，还是设定时间自动刷新。

字段、图标是从接口获取还是前端写死，以及气泡展示的规则等等。另外一张图片可能用在多个地方，而可能呈现的尺寸不同，所以在涉及到相关图片使用时要注意剪裁规则和图片的来源。

b.缓存机制

图片以及一些资源通常我们需要对其进行缓存，有些同学不清楚什么是缓存，缓存是在计算机上的一个原始数据的复制集，一般来说需要缓存的内容是通过浏览产生的，包括图片以及cookie等，浏览过的视频和广告也会被缓存。同时在不同的网络环境下缓存的时间标准也不同，无网络那肯定只能读取缓存文件，wifi环境下缓存时间可设置的短一些，而流量环境下时间就可以设置的偏长。

c.状态

状态大家都应该都会写，主要包含的就是初始状态（冷启动无缓存第一次进入）、空状态（无任何内容比如空的购物车）、常规状态、异常状态（网络中断、接口报错）还有过期状态等

d.显示

数据和内容的极限值，最大和最小，比如粉丝和关注的数量，小于1万人则显示完整的数量，大于等于1万小于11000则显示1万，大于11000小于12000则显示1.1万，这样的方式。另外包括标题极限为一行显示，超过部分的显示规则。敏感信息、错误提示以及超时的信息提示。金额的格式使用¥xxx还是xxx元，小数点保留的规则。日期的显示格式是xxxx年xx月xx日还是xxxx-xx-xx还是xxxx/xx/xx等等

3.反馈、提示、手势

反馈和提示的样式有很多种，一般反馈指的是用户对某一个控件进行触发后获得的反馈，比如按钮按下的反馈，以及之后收到的反馈，是进行跳转还是给用户提示，采用的是模态还是非模态的提示。比如点击关注某个人的按钮后会提示关注成功，比如退出某个图文编辑会二次确认是否退出，再比如抖音长按后出现的3个操作反馈，还有支付成功后的动效提示、恶意多次操作后的提示等等

如果有手势交互也需要说明，比如滑动后内容置顶、拖拽、左右轻扫的tab滑动、重按的3dtouch等等

4.加载

使用模态还是非模态，如果是模态加载请尽量使用情感化设计来减少用户焦虑。如果是非模态，根据信息呈现和体验采用分步加载还是预加载还是智能加载。如果是分布加载就选择先加载资源较小的内容，再加载图片，可以先将图片模糊化粗渲染给用户呈现，包括在浏览信息流的时候的分页加载也是可以的。如果更智能化一些也可以预判用户的行为进行内容加载，例如当用户在某个图文前停留时间达到某个值后就预先给用户加载里面的内容。

加载的全局方式在方案中需要考虑，页面加载、下啦刷新等等，需要统一。

5.环境、设备与场景

a.不同设备、厂商的不同版本

都会影响到方案的落地和用户体验这个要非常注意。比如一些交互控件我们在6、iphonex和大屏幕尺寸上使用起来效果很好，但是小屏幕的时候这个交互控件显得就很难受，所以需要仔细斟酌用户的使用情况。另外还有横竖凭情况的交互方案是否兼容、是否需要与其他硬件进行兼容。

b.白天和晚上是否需要做不同的风格设计，以及在是否需要给用户遮挡隐私的功能。

6.文案

文案这点很多设计师都忽略了，你们有没有听说过一个叫文案设计师的岗位。其实文案在我们产品设计中是非常重要的。首先一个产品的文案对应的语气和产品调性也是相关的，就好比我们说产品有它自己的性格一样，另外文案的使用直接就影响用户对该信息的理解，比如一个对话框的文案是：确定退出吗？下面会有两种不同的选择，一个确定，一个是退出，大家觉得哪个比较好？还有就是不加“吗”，就变成了：确定退出？这样描述出来的语言给人感觉很冰冷，甚至有一些威胁。

所以首先我们的文案是否有温度，和产品的个性是否相匹配。其次文案的表述是否准确和通俗易懂，比如你告诉程序员一句话，帮我去菜市场买西瓜，如果有西红柿，帮我买两个，你会带什么东西回家？程序员版：if（看到西红柿）西瓜等于2；else 西瓜=1。buy 西瓜。条件：看见西红柿 执行命令：买两个西瓜一语道破版：其实吧，看到西红柿呢是卖两个西瓜的触发条件…没看到就买一个西瓜，看到就买两个西瓜。所以这里出现的不仅仅是程序员的思维和我们的差异化，也说明了一句话没有表述清楚所带来的问题是很大的。

另外就是文案用语的一致性，在整个产品同样的场景中，我们需要统一文案用语。

7.常见控件

具体见下方列表

8.撰写方式

作为一个设计师，不管是否在做视觉，我们都需要对文档有一个美化意识，如果你的文档非常凌乱，那么在别人眼里就会觉得你是一个比较粗心大意，不够负责任的人，所以我们尽量在做交互输出文档的时候也画的美观一些。

目录

首先在目录的撰写时候要进行分类，通常我做的时候会对该需求以页面父子集关系进行创建，父集为核心页面，子集为其下的相关子页面，这样页面的流转和归属关系就不会搞错。

说明

在撰写规则与说明时可以通过标签法进行标签说明的撰写方式，同样在视觉上保持美观，对比与对齐的运用，具体该写什么东西上面已经说明就不赘述了。除了交互规则以外，高阶的交互设计或者产品经理还需要补充业务规则，比如排序、商品抓去规则、权重、算法、活动规则等等这里就不展开说了。

总结

文档的形式有非常多种，针对不同的公司和产品也需要作出相应的调整，能够满足需求和方便协作，目的就达到了，我们并不希望过多的时间花在文档的撰写上，而是希望大家在做设计时多思考业务，本次分享就到这里啦～

文章来源：站酷   作者：应骏

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



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



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

习惯性的去应用一些所谓的最好的设计模式，可能会让你觉得Google，Facebook，Instagram或者说其他的一些你最喜欢的APP总是做的非常棒，你会觉得，他们的设计目标和你自己的设计目标并没啥差别，但是，人家成功了，而你的作品却失败了。所以，这里推荐一些被公认为是(至少曾经被公认为)最好的设计模式，可能在你第一次看来，这些设计模式也就那样。

1、隐藏导航

关于汉堡图标，已经有不下于50万的文章来争论它了。如果你一篇都未曾读过，试着去读一两篇吧。其实，简单说来，这些文章讨论的主题更主要的是这个图标里所隐含的那些导航，而不是这个图标自身。

上面图片这样的设计对于设计师来说其实是很有吸引力的，而且简直太方便了。根本不用担心屏幕大小的限制，只需要这样一个图标，然后，把所有的导航全部塞进这个可以上下滚动的东西里，然后，让他默认隐藏。就这样，就这么简单。

但是，实验证明，与完全隐藏导航相比，适当的展示出一些导航能够更多的增加用户的依赖度和满意程度，甚至为你带来更多的收入。所以说，现在的好多大公司的播放器都抛弃了以前的汉堡图标，将最常用的一些导航一直显示给了用户。

如果说你的导航比较复杂，那么，请在考虑优先级的基础上适当地隐藏导航。

2、图标，随处可见的图标

由于移动端的屏幕大小限制，许多无脑的设计师为了节省空间，在任何只要能够使用图标替换的文本域，都使用了图标。大家都这样想，象形文字或者图标占的空间又少，不需要额外的转换，而且，人们都很熟悉这些图标，难道不是这样吗？所以，每一个APP都这样做了。

设计师们将上面的那种假设放在脑海里，于是，有的时候，他们将实用性的功能蕴含在了图标里面，但事实上，那个图标是难以识别的。比如，你能猜到在下图的Instagram里的这个图标点击之后能够发送什么信息吗？

或者说，假如你从来没用过谷歌翻译，那么，你会期待下图的这个图标实现什么样的功能呢？

你总是假设你的用户们非常熟悉那些抽象的图标，或者说，你总以为用户们会花大量的时间去研究和学习你的这个图标的含义。这是一个很普遍性的错误，很多设计师都会犯这个错误。

Bloom.fm上让人觉得迷糊的标签栏

如果说你曾经设计过一个需要一个弹出框来解释从而提高可用性的图标，那么，即使你的用户们会不管怎么样都能了解它，你的这个做法也是错误的。

当然，并不是说你在设计中就一点都不使用图标。你的用户们熟悉大量的图标，这些图标中，有很大一部分都是能够代表普通的功能的，比如搜索，播放视频，邮件，设置等等。(但是，用户们可能不会很确定当他们点击一个心形图标的时候，会发生什么。)

一些能够被大多数用户所识别的图标并且被认为是通用的

对于复杂的和抽象的图标，在显示的时候，应该总是在旁边加上一个文本来进行说明。这样，你的图标才是真正有用的。同时，还能够提高菜单的可发现性，也能够为你的APP添加漂亮的触感和个性。

Pixelmator的导航

对于基本的功能，可以使用图标来展现；但是，对于复杂的功能，就需要使用文本来说明了。(如果你要使用图标的话，要时常性的做可用性测试)

3、基于手势的导航操作

当苹果公司在2007年发布了iPhone的时候，多指触控技术就成为了人们关注的主流技术，用户们发现他们不仅可以在屏幕上进行点击，还可以进行放大，缩小和左右轻扫。

手势在设计们的圈子中流行了起来，许多的APP都围绕着手势操作来进行设计。

Clear里的手势操作

就像隐藏的导航栏和使用图标代替文本一样，手势看起来似乎能够为设计师节约一些屏幕空间。(“屏幕上不应该有删除按钮的存在，人们只需要向左或者向右轻扫就可以进行删除了。我们会决定怎么操作的。”)

关于手势，你首先需要知道的是，手势是不可见的。人们需要记住它们，就像汉堡菜单的例子一样。如果你隐藏了一个选项，那么，用到那个选项的人就会越少。

另外，手势存在着与图标相同的问题：众所周知的手势有点击，放大，上下滚动，同时，每个APP也有那些需要慢慢发现和学习的手势。

不幸的是，触屏界面的设计仍然是一个新的领域，在各个APP中，大多数手势还不标准和统一。一个很简单的手势，比如左右轻扫，在各种各样的邮件APP中可能都会大相径庭。

在Apple的Mail APP中，向右轻扫，显示出了“标记为未读”的选项

同样的手势，在Mail Box中，就表示将邮件存档

或者说，想一想，摇晃你的手机，在两个APP中，也会有两种不同的含义。在iOS中表示撤销，在Google Maps中表示发送反馈信息。

永远都要记住，手势是隐藏的操作，人们不得不去记住它们。对于你的用户，这需要大量的努力。如果你是一个发起人，也许你可以让全世界的向右轻扫的含义都一样——但是，只有当它是你APP的概念设计里必不可少的一个部分的时候。

4、新手引导

新手引导，最近很火的一个话题，适用于用户第一次与APP打交道的时候。在很多情况下，这个简单的方式能够在一个透明的覆盖层上为用户展示一些标记来解释界面元素。

dcovery APP里的新手引导

为什么说这是一个很烂的解决方案呢？因为许多用户都会跳过你的介绍，他们想做的就是赶紧使用这个APP。即使他们注意到了你的这些标记，当他们把这个关掉的时候，这些所谓的教程也被他们忘得一干二净了(尤其是当屏幕上挤满了信息的时候)。最后说一句重要的，在你的屏幕上添加这些引导的标记，并不会提高APP的易用性，记住下面这句话：

原图翻译：用户界面就和讲笑话一样，如果这个笑话还需要解释才能明白的话，那么，这也不是一个好笑话。

对于你的用户来说，新手引导也许可以使用其他的方式来设计的更加有用。比如Slack这个APP，使用第一屏来创建一个用户场景。简单的介绍一下他们自己，着重于利益而不是屏幕上的功能。

留住你的第一批用户的一个更有效的方法就是逐步的引导。比如Duolingo，他没有向用户们解释这个APP是如何工作的，而是促使人们做一个指定语言的快速测试(甚至不需要登录)，因为用户们可以在做测试的过程中了解到这个APP是如何使用的。同时，这也是展示这个APP的价值的一个更有影响力的方法。

记得住左右轻扫的手势在Apple的Mail APP里和在MailBox里的不同吗？看看他们的逐步引导是如何做的：用户们在开始使用APP之前，必须在APP所提供的一个练习场景里尝试使用这个APP里的每一个手势。

在你准备在一个半透明的覆盖层上设计你的引导标记的时候，停下来好好想想第一次使用你的APP的用户会有写什么样的经历。关注一下使用环境，通常情况下，有更好的方法来欢迎你的用户们。

5、充满了创造力，但是并不直观的空白状态

很多没有经验的设计师很容易忽略APP的空白状态。但是，从一个APP的整体用户体验上来说，这是一个很重要的方面。

有的时候，设计师们把错误信息和空白状态的界面当作一块展示他们创造力的画布。

比如下面这张Google Photo的空白状态界面：

第一眼看去，简直太棒了不是吗？一个漂亮的矢量图加上完全符合设计规范的布局。

但是，再看一下，就会觉得有写奇怪的东西了：

・这块屏幕里什么收藏也没有，但为什么这里会有一个那么显眼的搜索按钮呢？难道是想让用户在什么都没有的界面里搜索什么？

・第二个很显眼的元素就是这个矢量图，很明显不可以点击(虽说会有很多人去尝试点击)。

・屏幕上的提示说，我应该找到在顶部的那个超级不起眼的“＋”标志。为什么这个提示自己不包含一个添加按钮呢？就像是在说“点击继续按钮来继续”

总而言之，上面这个空白屏幕没有能够帮助用户理解用户所在的这个环境：

・什么是收藏？他们为什么有用呢？

・为什么我什么都没有呢？

・我可以做些什么吗？(我应该做什么？)

当需要创造力时，越少有时会越有用。下面这个空白状态屏在可用性上就做的十分完美。(先让我们忽略那个“现在就点击下面这歌按钮吧”的引导提示)

在Lootsy里的空白状态屏

记住，空白状态(类似于网页里的404页面)并不只是美感和品牌特色。在可用性上，他们更为重要。要让空白状态更为直观。

多问多想

不要说我是错的：设计模式和最佳的实践仍然是你的好伙伴。但是要知道，APP和用户是不一样的：在一个APP里能够适用的方案，在你自己的APP里，也许就一点不适用。这不是一个通用方案就能解决的事情。另外，你永远不可能知道为什么一个APP会以某种方式来设计。

自己要多想想，多设计，多研究。

文章来源：站酷   作者：郑小小壮

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

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

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

目前为止，我发现大部分市面上的文章都在告诉大家，竞品分析怎么做、场景分析怎么做、体验地图怎么做、访谈怎么做、度量模型怎么做，但唯独少了最后落地方案怎么做。

我曾经试着利用迪士尼和环球影城的两个案例来优化他们的产品，但是很多人开始无脑喷，因为没有业务做背景，别人想怎么说怎么说，都是“我觉得”。正因为这样，市面上你几乎看不到有什么文章教大家实际的交互解决方案，因为怕被喷子喷，反正没有业务背景你也无法论证自己方案的合理性，靠经验？别人不认同，你也没有数据来说服别人，所以这事大家都不敢去做。

但是没有业务背景的交互方案就不能做了吗？当然不是，有了业务背景你可以更针对性的选择你自己知识库里的方案和页面结构来解决业务和用户的问题，那么前提是你的知识库里有那么多案例才行，否则有再多再清晰的业务背景，你掏不出来，没有用。

所以从今天开始，我会陆续提供一些咱们小伙伴在做练习时候遇到的一些交互问题，大家一起来探讨一下。业务背景会适当的提到，但是还是以交互方案的多样性为主去讨论，再强调一遍，不要揪着业务去框住自己的思维。

学习交互也好，学习UI也罢，如果你完全不懂理论是行不通的，所以很多刚入行的小伙伴基础不够扎实，觉得理论没用，这是不对的，理论有用但是也配合实践，利用更多的实际案例去加深理论的印象，做到举一反三，这样的效果比较好。所以在做案例之前大家务必也要多去了解一下交互的设计理论和基础指南。

今天练习的主题是：篮球馆预定流程和原型

其实以前有文章聊到过，但是大家都有不同的声音，那么我们就继续来探讨一下有哪些不同的方案。既然业务背景不确定，那么我们的交互方案就不存在最优解。

案例

下文描述以图片顺序做记号，例如第一张界面即为p1。

产品功能为什么这么布局、为什么用这个控件、为什么用这个交互形式，取决于业务目标和设计目标，还有用户的心智模型，以及该单元本身的属性。那么首先来看案例1-p1，该练习的背景没有描述业务特征，所以这个布局说明，该产品是一个平台型的产品，有各种球馆的列表，除了细节不完整以外没啥大的问题。

再看p2和p3这两个页面是这个练习的核心页面，我们总说产品形态取决于产品本身的定位，平台型产品的球馆详情大致是可以这样的，如果产品是自我品牌的产品，那么形态就会发生很大的变化。例如你可以在美团上点星巴克，你也可以在星巴克小程序上下单，但是这两个应用中的星巴克，是不一样的内容呈现。

我们从p2依次往下看，从业务和用户两个角度来看这个方案，首先从业务的角度看，有问题的点在于场地说明，平台型的产品一般都会给商家做管理后台和营销工具，但是场地说明这个板块就有点鸡肋了，

原因1: 大部分球馆的标准都是统一的，不可能一块木地板一块pvc这样错开，很难看，也不可能。如果有区别那么只有尺寸规格的区别。

原因2：场地类型展示并不是核心用户需求，只是一种辅助决策，并且是“一次性”决策，该流程的核心任务还是要让用户可以去预定场地，但是目前整个页面只有底部一个预定的按钮（等会说这个按钮）

原因3: 页面顶部有场馆的图片及环境介绍了，所以场地图片展示可以集中在顶部的图片区域展示，例如大众点评，点开后会有更多分类的图片和视频标签。

所以中间这块区域可以展示快捷预定的入口，比单纯展示场地类型性价比高的多。

那么底部是否需要有一个立即预定的按钮呢？如果这个产品是一个专门用来给篮球馆做推广的平台，我觉得可以放。但如果是类似大众点评这样的平台的话，就要继续思考了。

而我们看到大众点评为什么底部不做成一个大按钮的形式，岂不是会更加强化这个任务的核心目标吗？平台类型的产品对接商家的种类非常多，同时类似这样的平台产品核心的产品定位是给帮助用户去找到好吃、好玩、好看的地方，侧重的是真实用户反馈，所以说到真实用户反馈这里再举个小例子，大众点评在评价的时候当点击第五颗星的时候是显示4.5星，而不会直接显示5星，要再次点击后才会变成5星。

产品认为为了快速点击5星好评的行为并不是真实反馈，当真实想要给5星的时候才会再操作一步（题外话）。

回正题，平台型的产品定位是为了把所有商家和用户进行高效的匹配（花钱匹配度、曝光更高），而不是为某一个商家去做转化。并且使用该产品的用户场景和需求比较丰富，大部分用户都只是来看看这些场所的评分、口碑和详情。

所以底部就不会只放一个预定/买单的大按钮，而改成了用户反馈的相关功能。为了帮助商家做销售，营销管理工具做的还是很成熟的，什么拼团啦、套餐啦、代金券的工具啦等等。

有同学会问，那不就是大众点评嘛，有什么区别。首先不要为了不同而不同，为了创新而创新，如果有更优秀的解决方案当然是最好了，但在当下的环境中，没有什么必要。如果一定要做差异化，一定是业务诉求出现了。比如这个产品变成了自有品牌做的一个app/小程序，而不再是靠平台帮我去宣传篮球场地，那么会变成什么样呢？

那我们可以想到的时候在预约入口的地方就会发生了变化（同星巴克），平台通过列表进入，而自有产品则是在产品首页中放一个入口，形态也完全改变，首页不仅仅有场地预定，还会有私教培训、课程套餐、活动组织等等，围绕着这个场地衍生出很多的业务。并且像用户评价这个东西，在自有产品中也变得不那么透明，表现形式肯定也会更加弱化。

所以在本身是平台的属性下，这个页面正常就是这样，p2缺少了用户侧的一些支线场景和功能的补充，例如咨询入口、举报入口等支线的功能。

再看p3，点击预约入口后开始进行选择场地的交互，选择场地需要几个关键要素：1.日期 2.时间 3.场地号 4.场地规格 5.价格，那么这里又涉及到业务背景了，场地号是什么？场地规格又是什么？商家如果要让别人预定场地，是按照全场预定还是可以半场预定，场地的类型是否有多样，都会影响到我们这整个预约的交互流程。

p3的这个方案的问题在于：

1.信息关联度没做好，这里的日期和时间要更紧密，和买电影票不一样。

2.时间的交互效率低，并且没有展示全，可扩展性不好，如果场馆早上8点开门怎么办？商家要求最低2小时起订或者1小时起订怎么办？

3.半场和全场的选择不够简单，全场其实等于两个半场，而现在的展示形式变成了一个切换按钮，虽然加了一个箭头，但是这样的交互形式和控件的用法是不符合常规的，并且指向性很差，当切换到3/4号场地的时候箭头就指向了半场，这样就会产生歧义，所以是不可行的。

所以我们这里就会发现这些信息是需要联动的，联动表单最常见的就是横纵联合。一般最初级的做法就是一个行为管一个信息，就比如这样：把选项放入picker中

这种交互方式一般不单独用，因为其实算是一种树状结构，这种结构一般运用在添加收货地址等完全独立的信息填写或者一些多行表单中。

而这里的选择日期、时间、类型、编号并不完全独立，而且需要实时查看。

所以这样也不够直观，picker挡住了价格，无法实时查看。更何况在这个页面中所有内容都收起来版面利用率大幅下降，交互层级更深了。

再看一些其他的方案，难道就一定要选场地吗？我只需要时间、日期行不行。不行，为什么？

那我们再来看下面这个方案：

这个方案中，同学把图片加入进来，希望帮助用户去辅助决策，其实没必要，之前也说过，图片属于认知信息的一部分，在外面认知完了解过就可以了，里面就不需要再展示一遍了，可能也是为了不让页面这么空，因为底部用了一个卡片的块选择日期时间。但是少了场地类型的选择（半/全）长，为什么说半全场和场地号一定要选呢？因为有很多场景缺失了，比如你要帮朋友订另一个场地怎么办？我要订两个半场打全场怎么办？每次预定只定了时间，老板还要手动标记哪些场地在哪些时间没有预定，非常的麻烦。所以不选择场地是不行的。

再来看一个方案：

这个方案的选项和操作过于分散，而一般也不会将需要交互的选项放在左侧，有个原则就是内容在上/左，操作在下/右，虽然不能一概而论但大部分情况都要遵循。参考古腾堡图标原则，左侧的日期不经意看以为是一个标题。大部分第一次做交互原型的同学可能都会这样，一些按钮和控件的用法和该放、可以放的位置不太清楚，在做交互的时候还有一件事要清楚，就是谁控制谁，控制器怎么触发。

而这个方案和p3也是一样，触点顺序乱了：选择日期-选择场地类型-选择场地号-选择时间。因为预约场地的场景是，今天小王想约朋友去打球，他问了一下朋友哪天有空，朋友说下周六都可以，最好是下午，于是小王打开应用软件，选择了下周六的日期和下午的时间，看看还有哪些场地可以预约。

同样也是顺序乱了：场地编号-日期-时间。为什么顺序很重要，这就和我们买电影票的习惯一样，大部分情况是我们想要看某一本电影，然后再考虑自己的时间和去哪个电影院，有人说，我就不一样，我会先选择电影院，比如我逛街途中突然想看电影了，再看看电影院最近有什么电影。我只能说，满足大部分、大概率的用户需求和场景才是正事，产品是无法满足全部用户的。

抛开日期和时间的关联性，这个方案还有一个问题就是如果要预定多个场地就会比较复杂，例如只有1号场地和9号场地的某一个时间段可以预约，那么就需要用户在几个场地中展开收起进行操作，非常繁琐。

再来看一个案例

这位同学将步骤分为了先通过picker选择日期和时间，确定后再选择场地。这个流程问题就在于：

1.picker用的不对，picker虽然叫做选择器，但往往不会作为一个中间任务承载的模块去用，而是对于一个页面中需要选择一些选项的时候才会用到，选择完后依然停留在该页面。否则进入下一个页面后，再返回，就看不到picker了，还要再选择一次。

2.场地可能会出现被人预定的情况，所以当选择日期和时间后再选择场地，如果被预定了，那么用户就会比较抓狂。

所以在这个页面中我们会选择将其全部展开，怎么展开呢，有人觉的日期时间可以不动，把场地和类型展开。有人觉得全部展开才更直观，那我们来看这两个方案

如果日期和时间不展开，会有一个问题，那就是无法选择多个时间段的场地，只能选择某个时间段的多个场地，无法满足这部分用户需求，并且在信息展示上也会比较拥挤。那么我再看看全部展开，全部展开之后将时间和日期也做一个横纵形式，然后将半/全场和编号进行结合，默认选择一个块即为半场，但是在场地命名上还是需要做一个小心思，那就是如果有人要包全场，如果我们单纯给场地编号1、2、3、4….就会让用户不知道哪个半场和哪个半场是一体的，所以命名就可以改成1号场A、1号场B…...

当然如果不要编号问题也不大，主要是场地还有些特殊情况，比如不同场地的通风、灯光的区别，所以会有场地编号。

在之前的留言中，也有小伙伴会问，即便是自有产品，用户在选择场地的时候到底是否需要再看场地的图片，直接从入口进来不显示图片就让用户去定场地合理吗？这里主要就是分针对老用户还是新用户，只要去过一次的用户基本上也就不需要再看场地图片了，新用户的话就需要，他们还需要知道场馆的地址、联系方式等等，所以这些内容会聚合在选择场馆的上一步，也就是首页，具体首页可以怎么放这些内容留给大家思考。

我们讲到这里，还有一些抬杠冠军又要说了，一个页面这么多信息太复杂了，我选择第一个方案，多简单，就两个选项。如果我们知道复杂性守恒定律，那么不管怎么压缩信息复杂度是不变的，把那么多场地选择压缩在一个picker中会更加复杂和难操作。

其实当大家看到这些原型的时候，都明白问题出在哪里，真实情况是，如果让你们从0开始，一下子就懵逼了。比如预定篮球场地的这个流程，从无到有，如果让你自己来设计一遍，你可以完整的做下来吗？每一个细节是否到位。大家产生了一种幻觉，看懂了，等于自己会做。一定一定要脚踏实地去做一遍才知道自己哪里搞懂哪里没有搞懂。

什么是设计？简而言之，就是用逻辑和美来解决人们的问题，满足他们的愿望。在本文中，我们将讨论美在用户体验设计中的作用：让我们看看它如何让用户和企业都感到高兴。

为什么美对设计很重要

网站或移动应用程序应该有效、轻松、直观地解决他们的问题。但是接下来会发生什么，当产品不再是唯一的，不再是独家的东西，自然竞争开始发挥作用时？人们开始看得更深，争取更多。他们将审美愉悦和情感吸引力添加到他们的愿望清单中。而在两款功能同样出色的产品之间，绝大多数情况下，用户会选择美观的一款。

基于需求层次，人们获得的越多，他们的选择就越复杂。教育和收入水平让他们思考超越功能：除此之外，用户追求和谐与美感。所以，美的作用越来越高。

以下是美在用户体验设计中以这种方式起作用的一系列原因：

1) 它使设计充满情感，也就是人性化

2) 它使数字事物与现实世界保持联系

3) 它支持可用性

4) 满足审美需求

5) 它将不同的事物与一种风格结合在一起

6) 它让产品在竞争中脱颖而出。

美与美学是连接设计的过去、现在和未来的坚实桥梁。今天，新的布局和图形基于数百年来收集的丰富的世界文化遗产。现代设计师和艺术家通过一些趋势和创新对其进行改造：建立一个新的文化历史圈，他们保留了历代最优秀艺术家的作品。这就是艺术和美学吸引力在设计中发挥作用的时候。我们不是在重新发明——我们是让它变得现代化，让它解决人们的问题。

审美-可用性效应

用户体验设计大师尼尔森诺曼集团将其描述为审美可用性效应现象。它指的是用户倾向于认为有吸引力的产品更有用。人们倾向于相信看起来更好的东西会更好地工作——即使它们实际上并没有更有效率。这种效果是为什么良好的用户体验不能只是功能性UI的一个重要原因——设计一个既有吸引力又实用的界面是值得付出努力的。

基于此，让我们考虑一下美感对UX 目标的影响。UX设计有 4 个基本方面，外观视觉和谐呈现出赋予所有要点的因素。

可用性意味着产品可以工作并且用户了解如何工作。

可访问性则允许界面适用于具有不同能力和跨各种设备的不同人。

实用性意味着它可以解决问题。

可取性意味着它是令人愉快的，并使用户感到高兴。

业务目标

但是，启动新产品或改进知名产品的公司也必须从另一个角度思考。它通过各种财务因素、转换、销售和所有其他业务来运作。

银幕上的美会影响他们的商业目标吗？确实会。色彩理论和心理学、屏幕上的和谐、可读的文本内容和有吸引力的图像不仅是让用户开心的关键。

用户体验美学元素

不同的元素可以让美融入用户界面并构建其美学，其中包括：

a) 排版

b) 布局

c) 照片

d) 插图

e) 3D图形

f) 动画片

g) 视频

h) 人物

所有这些元素构成了交互的美感，并直接影响积极的用户体验。

一致性

从美学可用性效应考虑的另一个核心点在于用户体验和业务的十字路口——一致性。正如雅各布尼尔森所说，“一致性是最强大的可用性原则之一：当事情总是表现相同时，用户不必担心会发生什么。”

事实上，它比交互更进一步。它还有助于建立强大的品牌。标志和品牌商品、网站、应用程序、电子邮件和社交网络——产品与其用户的每个接触点都应遵循一个总体理念和一组价值观，并以一致和完整的风格包装。

最后

在全球范围内，所有的设计解决方案都应该回答一个问题——Why？我们做出的所有决定都应该从“Why”开始，这将形成如何与用户交谈，无论沟通的来源是什么。无论与品牌的连接点是什么，您都应该确定与您交流的是什么。这会建立信任感并使品牌更强大，而这正是美有助于使用户体验更加稳固和有用的地方。

背景

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

“时间”元素的分类

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

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