作者:Hindy
原文地址:zhuanlan.zhihu.com/p/24582466
转载无限欢迎,但请注明「作者」和「原文地址」。感谢您对作者版权的尊重。
前言
在做交互或界面设计过程中,我们面临的难题之一就是一不小心以自己的喜好来做设计,而忽略了前期所做的研究。那么如何在做设计执行的过程中,依然能够不忘背景,做出符合用户预期的好产品呢?这篇文章也许能够帮助到你。
一、什么是「桥梁设计思维」?
虽然听着很厉害的样子,其实并不是什么大理论。「桥梁设计」一词只是取自我以前文章的一句话。
Hindy 曰:
UI 是架接机器与人沟通的桥梁。
哈哈,我这么说是因为咱们做交互、界面设计的本质就在于设计人机对话的过程。我们既可以向机器发出指令,也能够了解机器的状态、收到机器的反馈,从而进行高效的工作。
所以,所谓「桥梁设计思维」其实就是将 UI 设计工作中简单的图形设计思维转变为信息交互设计的思维。
二、如何应用它?
这个想法看起来很简单,但真正落实到工作中其实非常困难。因为我们难免会专注在设计的细节上,而常常忽略了真正的用户需求,亦或忽略了产品或某功能的整体体验。
对此,我自己的办法是:
动手设计前先退一步,再次确认「用户需求」与用户的「行为流程」。
设计稿出来后再进一步,验证三项:①设计是否有效满足功能;②界面是否清晰易懂;③反馈是否明确。
三、实例一则
我用前段时间做的一个小概念来阐述下自己的设计过程罢。
这是我自己脑洞的一个用来设置壁纸的软件,用户的核心需求就是【换】【壁】【纸】!
基于此,我将换壁纸这一任务拆分成几个步骤:浏览图片 → 选中图片 → 设为壁纸。
对应到软件的话只需要这两个功能:「图片展示」和「设为壁纸」。
接下来,根据上述用户「使用流程」与软件「功能」,绘制草图。请原谅我这放荡不羁爱自由的草图。
草图过后,便胸有成竹。在 unsplash 上找几张美美的图片后,就可以开始绘制界面了。几分钟后……
这就是完成的图。我还在大图页面放入了时间信息,方便用户感受最终效果。
最后,让我们梳理一遍用户和机器各要执行的步骤以验证设计。
用户:
进入图片浏览页面 → 选中某一张图 → 设置为壁纸
机器:
加载浏览页的小图 → 被用户选中后直接放大小图至全屏,与此同时获取高清大图并显示「时间信息」以供预览 → 点击设置后,下载图片并利用权限设为手机壁纸,并提示「设置成功」
总结
这个实例所述是最简单的一个设计流程,并且从始至终都未离开用户需求和行为。
我认为要想设计好人机交互界面,保持这种「桥梁设计思维」,不断思考人与电脑间的相互作用是非常重要的。
全文完,感谢阅读~
微信公众号:UIcircle
会同步推送文章,欢迎关注哦 :)