--- title: 7个能够提升用户体验的交互设计 date: 2015-09-07T16:00:00Z modified: 2024-06-18T09:53:17Z permalink: "https://www.tmogroup.com.cn/insights/other-26165/" type: post status: publish excerpt: "" wpid: 100704 categories: - 其他资讯 - 电商开发 featured_image: "https://www.tmogroup.com.cn/wp-content/uploads/2024/06/交互设计.jpg" timestamp: 2024-06-18T09:53:17Z tags: - 其他资讯 - 电商开发 --- 很多时候，我们都是以外观来看待某项事物。这种“外貌主义”的思想对大部分的人来说是根深蒂固的。一个很典型的例子就是再有内涵的书籍也是需要封面设计的，这就是人们对这本书认识的第一道坎。 如果相对于网站来说，那么问题来了，怎么样可以让用户对你的移动应用有个很好的第一印象呢？如果用简单的一句话来说，就是用“以人为本”的设计。这句意味着你的网站要用亲民的语言和吸引人的设计等。同样一个好的[交互设计](https://www.tmogroup.com.cn/deve/20441/ "交互设计")效果同样可以让你的网站脱颖而出。那么什么样的交互设计可以说是“好”的设计呢？基本上包括一下三个特征： - 描述状态并给出反馈 - 有一定的引导效果 - 能告知读者行为的状态 在[用户体验设计](https://www.tmogroup.com.cn/xhtml5/21747/ "用户体验设计")中，最重要的是就是以用户为基础，并能够了解他们当时的感受。有时候尽管是一些小的细节，也会带来很大的帮助。今天我们一起来看看如下的7个能够提升用户体验的交互设计。 ### 1. 显示系统状态 用户通常都想知道他们行为的后续结果，而且是越快越好。例如刚打开一个应用，上传或下载一个文件，发送邮件状态的等等。这个时候用户就需要一个状态提示，来使他们能够耐心的等下去，让等待的画面不那么无聊。下面是一些有趣的例子。 ![显示系统状态](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/show-system-status.gif) ![显示下载状态](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/显示下载状态.gif) ### 2. 高亮显示一些改变 为了节约空间，手机端的应用通常会用一个按钮来代表多个功能。这有一个弊端就是有些用户并不知道这些，所以他们可能会需要一些提示。以下是一些很巧妙的设计： ![按钮cta](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/按钮cta.gif) ![按钮设计](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/按钮设计.gif) ![按钮设计1](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/按钮设计1.gif) ### 3. 保持上下文联系 鉴于手机端屏幕大小的限制，合理的在一个页面上展示大量的信息是有一定挑战的。其中一个聪明的方式就是从清晰的导航入手。如果页面有清晰地导航，其结构也会变得清晰明朗，用户也更容易知道怎么前进与后退。以下是一些此类设计的推荐: ![导航设计](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/导航设计.gif) ![导航设计1](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/导航设计1.gif) ### 4. 非标准的布局 正如前文提到的，一些小的互动元素可以帮助用户理解整个应用。如果我们想用一些创新的方式来展现滑动图片，表格或者切换人物等效果，不妨试试如下的几种方式： ![滑动图片](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/滑动图片.gif) ![滑动图表](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/滑动图标.gif) ![切换任务交互效果](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/切换任务交互效果.gif) ### 5. 行为召唤 一些好的行动召唤（CTA）可以让用户们流连忘返。其中包括浏览的展现效果，分享后的效果，点赞的效果等等都是可以抓住用户目光的元素。 ![行为召唤](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/行为召唤.gif) ![分享效果](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/分享效果.gif) ![点赞效果](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/点赞效果.gif) ### 6. 可视化输入 数据输入也是任何[移动应用开发](https://www.tmogroup.com.cn/mobile/ "移动应用开发")中相当重要的一环。其质量取决于用户输入数据时的感受。一般情况下这看起来是很单一枯燥的，但是如下的一些输入设计却使它生动起来： ![数据输入](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/数据输入.gif) ![日历查看](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/日历查看.gif) ![搜索框输入](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/搜索框输入.gif) ### 7. 生动的教程 最后，在大部分复杂的应用的启动阶段，都会有一些简单的教学引导。其实这一段也可以做的很有趣，让用户更好的享受你的应用带来的改变，而不是仅仅作为一个形式的存在。 ![应用教程](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/应用教程.gif) ![应用教程1](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/应用教程1.gif) ![应用教程2](https://www.tmogroup.com.cn/wp-content/uploads/2015/09/应用教程2.gif)