作者：Hindy

原文地址：zhuanlan.zhihu.com/p/24582466

转载无限欢迎，但请注明「作者」和「原文地址」。感谢您对作者版权的尊重。

前言

在做交互或界面设计过程中，我们面临的难题之一就是一不小心以自己的喜好来做设计，而忽略了前期所做的研究。那么如何在做设计执行的过程中，依然能够不忘背景，做出符合用户预期的好产品呢？这篇文章也许能够帮助到你。

一、什么是「桥梁设计思维」？

虽然听着很厉害的样子，其实并不是什么大理论。「桥梁设计」一词只是取自我以前文章的一句话。

Hindy 曰：

UI 是架接机器与人沟通的桥梁。

哈哈，我这么说是因为咱们做交互、界面设计的本质就在于设计人机对话的过程。我们既可以向机器发出指令，也能够了解机器的状态、收到机器的反馈，从而进行高效的工作。

所以，所谓「桥梁设计思维」其实就是将 UI 设计工作中简单的图形设计思维转变为信息交互设计的思维。

二、如何应用它？

这个想法看起来很简单，但真正落实到工作中其实非常困难。因为我们难免会专注在设计的细节上，而常常忽略了真正的用户需求，亦或忽略了产品或某功能的整体体验。

对此，我自己的办法是：

动手设计前先退一步，再次确认「用户需求」与用户的「行为流程」。

设计稿出来后再进一步，验证三项：①设计是否有效满足功能；②界面是否清晰易懂；③反馈是否明确。

三、实例一则

我用前段时间做的一个小概念来阐述下自己的设计过程罢。

这是我自己脑洞的一个用来设置壁纸的软件，用户的核心需求就是【换】【壁】【纸】！

基于此，我将换壁纸这一任务拆分成几个步骤：浏览图片 → 选中图片 → 设为壁纸。

对应到软件的话只需要这两个功能：「图片展示」和「设为壁纸」。

接下来，根据上述用户「使用流程」与软件「功能」，绘制草图。请原谅我这放荡不羁爱自由的草图。

草图过后，便胸有成竹。在 unsplash 上找几张美美的图片后，就可以开始绘制界面了。几分钟后……

这就是完成的图。我还在大图页面放入了时间信息，方便用户感受最终效果。

最后，让我们梳理一遍用户和机器各要执行的步骤以验证设计。

用户：

进入图片浏览页面 → 选中某一张图 → 设置为壁纸

机器：

加载浏览页的小图 → 被用户选中后直接放大小图至全屏，与此同时获取高清大图并显示「时间信息」以供预览 → 点击设置后，下载图片并利用权限设为手机壁纸，并提示「设置成功」

总结

这个实例所述是最简单的一个设计流程，并且从始至终都未离开用户需求和行为。

我认为要想设计好人机交互界面，保持这种「桥梁设计思维」，不断思考人与电脑间的相互作用是非常重要的。

全文完，感谢阅读~

微信公众号：UIcircle

会同步推送文章，欢迎关注哦 :)