UI交互设计中有哪些细节设计

前言

评价一个产品的优劣单单从视觉层面评判往往是不够的，还要考量界面设计的细节是否到位。这也是大多数设计师可能会忽略的点，更何况现在的竞争日益激烈，设计差异正在逐渐缩小，此时的细节就显得尤为重要，举个例子：在设计页面弹窗时你有考虑过弹窗在页面中的位置吗？你为什么要这样做呢？如果在面试中你能回答上这个问题吗？还有在设计时我们也要考虑开发实现时以什么样的原则适配等诸多问题。

目录

一、“X“图标的前世今生

二、“取消”与“关闭”的区别及注意事项

三、“取消、关闭、返回”三者之间的区别及应用场景

     1.什么时候用取消？

     2.什么时候用关闭？

     3.什么时候用返回？

一、“X”图标的前世今生

很久以前，“X”图标是做为地图上的一种标记，它表示宝藏的藏身地点。是一种位置标记点。但如今“X”图标不在用来做位置标记了，而是代表“取消“或”关闭“临时弹窗和临时页面。

那如何来确定“X”图标代表的是“取消”还是“关闭”呢？

其实，主要问题在于“X”图标缺少相应的文本标签。当“X”出现时用户不知道它代表的是“取消”还是“关闭”。当同一个图标在不同的页面，却代表着不同的含义，此时图标的可用性就会受到影响，因为用户无法做出判断此时的图标代表的含义到底是什么。

二、“取消”与“关闭”的区别及注意事项

取消指放弃当前所编辑的内容，关闭是指关闭视图（可自动保存页面内容/操作）。在实际产品应用中“X”图标代表“关闭”和“取消”的使用场景非常多，例如在一些产品的发布页面当中“X”图标表示取消，弹出页面则表示“关闭”。值得注意的是，在页面设计中不可逆操作一定要出现二次确认，询问用户是否应用该操作，防止用户误操作导致内容丢失。如果缺少这一步骤，那一旦用户误操作导致内容丢失，可想而知他的心情是怎样的........,例如：在小陪伴APP中当用户关闭当前正在学习的内容时，当前页面会弹出一个确认对话框，向用户传达一种限制，确认则退出，取消则可以继续学习当前内容。

三、“取消、关闭、返回”三者之间的区别及应用场景

1、什么时候用取消？

用于临时调用的页面当中

当页面B上的操作是对页面A中的内容进行添加、编辑时，页面B采用底部弹出动效，左上角用取消。因为用户的主要注意力在A页面，在对页面A内容不满意时（信息不足或者展现形式上不符合自身要求），才会临时调用工具，进入B页面，但只会在临时页面B短暂停留，快速操作后又会重新回到信息内容本身上面，也就是A页面。

【例子1】微信-朋友圈-发帖页面

【例子2】知乎-发布-写想法页面

【例子3】转转-发布-发布闲置页面

在实际产品中我们可能会发现有时左上角是“X”图标，有时候是文本的取消。当然这样做都是没问题的，只是有一个页面之间的统一性问题。

例如：微信的发朋友圈页面左上角是取消，所以选择相片或视频的页面也是取消

例如：最右的发布页面左上角是“X”图标，所以选择相片或视频的页面也是“X”图标

当然没有绝对，具体是取消还是“X”图标还得具体问题具体分析。

2、什么时候用关闭？

用于调用的页面当中

当A页面的操作要作用于B页面，B非A的子页面，又非临时页面，B页面用底部弹出动效，左上角用关闭。

【例子1】微信-聊天界面-转发（长按）-微信

【例子2】QQ-聊天界面-转发（长按）-QQ

3、什么时候用返回？

用于父子层级关系中的子页面

当A、B页面在结构上是父子层级关系时，A为父，B为子。从A页面进入到B页面，这时B页面左上角用返回，并且使用侧滑转场动效。

【例子1】微信-发现页-朋友圈

【例子2】知乎-首页-详情页面

【例子3】转转-消息-通知助手

总结

用于临时调用的页面使用取消，调用非关联页面用关闭，页面属于父子集关系时用返回，善于发现产品中的细节，为你的设计加分！