交互 2018年02月8日
0 收藏 140 点赞 325 浏览 1798 个字
摘要 :

怎样的交互设计才算清晰完整,下面是从实际项目中总结出来的一些经验,分享给大家,共同学习进步。 产品交互设计稿和研发结果不一致 从毕业到工作,作为一名交互设计师……

做好这个交互文档细节,让你和工程师的合作效率提高50%

怎样的交互设计才算清晰完整,下面是从实际项目中总结出来的一些经验,分享给大家,共同学习进步。

产品交互设计稿和研发结果不一致

从毕业到工作,作为一名交互设计师,经手的项目也不算少数了,时间久了,会发现一个问题:无论设计书中的内容架构多么清晰,理论多么详细,我们在实际的项目中还是无法做出完美的产品设计,还是会容易忽略一些问题。这让我想到了我们念书时,虽然教科书上的知识我们都学习了,老师也给划重点了,但是考试的时候,也不会全是满分。在学校的时候,我们会整理错题集,把错题的原因和需要注意的知识点记录下来便于后期复习。同样,今天我也把自己在实际工作中遇到的一些问题整理出来,和大家一起学习进步。

让研发工程师苦恼的交互设计文档

产品需求:用户可以将文件重命名。

交互设计第一版:

做好这个交互文档细节,让你和工程师的合作效率提高50%

iOS研发工程师看了设计稿后,QQ发来信息:

  • 研发工程师A:从一个文件点击重命名进来,是否保留原来的文件名字还是自动清空?
  • 研发工程师B:支持的字符数有限制吗?

Android研发工程师看了设计稿后,微信发来信息:

  • 研发工程师A:文件名称可以是空的吗?
  • 研发工程师B:是否支持特殊符号?
  • 研发工程师C:特殊符号有哪些啊?

为什么会遇到这样的问题?

分析原因:交互设计文档只给出了一种情况,就是重命名文件的过程中。但是没有给出重命名文件的初始前,空值、极值、默认值和异常状态是什么样子。

研发人员在编写程序的时候会遇到以上问题的,但是交互设计文档上没有说明,所以他们当然要追问了。追问的研发工程师其实还算好的工程师,有些研发人员遇到交互设计文档中没有标注的情况会按照自己的想法做,这样就会导致同一份设计文档,iOS和Android会研发出两种不同的交互方式。

有时候交互设计师在做设计的时候,脑子里会想到这个动作的开始,过程和结束,但是没有落实到纸上。以为研发工程师也会和你有同样的解决方案,但是万万没想到,研发做出来的效果是截然不同的。

不同的职业,背景不同,思考问题的思维也不同,所以如果想让对方和你有同样的想法,最好的方式就是把你的想法说清楚,说详细,越详细越好。

解决问题

分析了原因之后,我们就要想办法解决问题。细化交互设计,把异常情况和动作的开始及结束会遇到的各种状态都详细的说明出来,保证产品设计的一致性。这样无论是哪位研发工程师,拿到交互设计文档之后,都会做出同样的产品,这样用户的体验就有保证了。

补充后的设计文档如下:

做好这个交互文档细节,让你和工程师的合作效率提高50%

怎样才能考虑周全

那么问题来了,有一些刚接触交互设计的朋友会问:我也知道交互设计文档需要细化,但是有时候不清楚需要细化哪些地方。产品经理在给需求的时候也没有给的那么详细,有时候一个需求仅仅就是一句话。说到这里,可以分享给大家一个方法,我在做设计的时候是这样用的,而且效果还不错。

拿到需求后,我们通常会想到最常见的情况,那就先把这个常见的情况画出来,然后心里暗示自己,「应该还有其他情况」,「总感觉好像少点什么」,然后就转变自己身份为「测试」,给自己的设计提问题:

  • 是否有空值情况,如果有怎样处理?
  • 是否有默认值,默认值是什么?
  • 功能是否有范围?如果有,最大值和最小值是什么?如果超过了此范围应该怎样处理?
  • 这个操作的上一步是什么?它是怎么过来的?
  • 这个操作的下一步是什么?还有其他情况吗?
  • ……

我们再来看一个类似的功能设计,需求是用户可以自定义房间名称,用上面的方法设计后,文档内容如下:

做好这个交互文档细节,让你和工程师的合作效率提高50%

按照以上的方法训练自己,不出很长时间就会设计出很标准的交互设计文档。。当UI设计师、研发工程师、测试拿到你做的交互设计文档后,也会被你的专业震撼到的。平时工作中就注重细节,规范设计文档,这样到了你想跳槽的时候也不会花太多时间和精力准备作品集,机会总是留给有准备的人。

「新人要知道的交互文档

  • 《超全面!教你打造美观清晰易使用的交互文档》
  • 《专业的交互输出文档应该怎么写?高级设计师来教你!》
  • 《专业干货!如何写一份全面易读的交互说明文档?》

================明星栏目推荐================

极致设计教程网: UiiiUiii.com 是极致设计旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.jizhisheji.com/51885.html

相关推荐
佳选
B端决策类产品设计指南:任务中断回溯设计
在 B 端产品线特别是在决策类产品中,针对在较长时间段内任务中断回溯的场景的设计方法 在 B 端产品线中,特别是在决策类产品中,经常会出现因…
日期:2022-02-26 点赞:281 阅读:617
优秀
零基础如何成为交互设计师?聊聊我的学习三步法!
背景介绍 我是从测试被动转交互的(转岗原因不是这次的重点,就不在这里描述了),以前工作的公司是家小公司,没有所谓的交互设计岗位,所有我对交互…
日期:2022-02-23 点赞:260 阅读:569
优质
如何做好搜索设计?我总结了3个原则!
搜索设计看似简单,展现形式上只有一个输入框和搜索按钮就可以了,但是里面隐藏了很多交互细节。最近工作中刚好有搜索相关的设计需求,今天就来总结下…
日期:2022-02-22 点赞:234 阅读:880
必看
如何做好B端产品的适老化设计?来看猫眼演出的实战案例!
老龄化社会已经到来,如何让中老年群体更好地使用互联网产品是当今的热门话题。猫眼演出设计团队负责的一个 B 端项目的使用人群需覆盖到中老年用户…
日期:2022-02-21 点赞:161 阅读:861
精选
设计自驱是伪命题?这4步让你从零开始做到设计驱动项目!
想象这样一个场景:在晋升答辩会上,你从方案 1 讲到方案 49,终于讲完所有的 PPT,此时沉默良久的老板徐徐问出这样一个问题: “OK,我…
日期:2022-02-17 点赞:119 阅读:661
推荐
从4个部分,聊聊B端产品中的浮层组件的设计思考
浮层是在页面上方展示的浮层容器,可展示文本、按钮、列表、标签、表单项等内容,在 B 端产品中有着非常广泛的应用。根据内容和作用,可以分为不同…
日期:2022-02-15 点赞:46 阅读:301
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站