您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

成长值达到300分以上才可以发布哟!~

收集成长值 先看看别人的即刻>

UI设计师如何助力PM的原型图(第二篇)

原创文章 分类: 经验/观点 版权:
549 3 1 0
2019-05-14
2.9
普通推荐

如何避免判断对了业务,关心错了需求

                                                  

前言 


很多小伙伴们都说,从每期文章案例解析中学到了UI设计思维方法,每每听到这样的话很欣慰,确实如此,工作中的真实案例才会有更直接的设计体会。枯燥的理论大法确实很难吸收与运用,所以本期依旧带来三个UI设计助力PM原型图的案例解析。



案例解析  


案例一:优化交互流程


下面是原型图中的一个分享弹窗界面。

Image title


弹框作用是:分享产品的网页链接,可公开分享也可加密分享。


原型图的加密设置在弹窗底部,如果需要分享加密链接,就会有下图这样的操作:

Image title


选中“设置密码”在底部操作一番,回到上面点击复制,这样的页面布局会使用户从下往上操作,不符合逻辑,因为至上而下才是正常的操作习惯。


用户分享链接会有两个出发点,一是分享公开链接,二是分享加密链接两个出发点。明确了出发点后才会复制产品链接。所以修改后的设计稿是这样的:

Image title


把用户出发点的行为需求放到复制链接之上,这样就解决了操作不合理的问题,但这样的设计也未必是好方案!

Image title


选择“加密”设置好密码会有一个“确定”按钮,这样一来如果用户设置了密码,没点击“确定”按钮,那么最终复制的还是公开链接,而操作用户可能毫不知情,所以第一稿的防错机制设计的不够好。


为了避免用户会有操作失误的行为,做了交互上的优化:

Image title

Image title

Image title


优化后做了分页处理,交互上一步一步去引导用户,用户首先看到的页面是选择是否公开或加密选项,点击“创建链接”,跳到复制链接的页面。这两个页面都只有一个按钮可操作,所以不会出现操作失误的问题。


如果在此基础的操作上更加快捷方便,还能怎么设计呢?

Image title


就是上图这个样子,当点击“创建链接”来到第二页自动复制链接,而不是再去点击“复制链接”,虽然只是一个简简单单的交互优化,但对于一个高频业务的操作来讲,一个工作人员一天使用鼠标的点击量就会减少一半。


案例二:优化交互流程


配置选项的弹框设计,看下图原型图:

Image title

原型图


如果你来操作上图的原型图,会先点击左侧的选项,还是会先点击右侧的添加按钮,我想总会有人点击“添加”按钮,因为页面的布局上没有做好清晰的操作引导。

最可怕的体验是,用户配置完成一个人,给下一个人配置,还得清除第一个人中  下一个人不需要的选项,来来回回点击着实麻烦。

Image title

最终设计稿


用户点开这个弹框是要给某个人配置选项,所以用户首选要找到某个人。


根据人浏览页面的习惯,从左到右,从上到下,把人的选项放到弹框页面左侧,方便用户快速找到人且不受其他元素干扰,左侧功能可以邀请新人,也可以搜索某个人,都是协助更快的完成用户选项配置。


原型图中有邀请新人,但是没有移除人,应该是漏掉了,这时我们就要找PM去确认一下。确认后加上移除按钮,那应该怎么加呢?


移除某个人是个低频操作,所以设计成三个点图标,点击选择删除,并且需要再次确认要移除,防止误操作。


“清空”跟“保存”(原型图的添加)是控制选项列表的操作,所以优化后放到一起。


案例三:判断对了业务,关心错了需求


业务需求中常常伴随着伪需求,如果不能分析出什么是伪需求,那么这个产品的设计可能要遭殃了,下面分享的案例是因为一个伪需求导致的错误设计。

Image title

原图


上图是线上的一个产品,红框里面的上传图片的业务需求这样的:


1、最多可上传4张图片。

2、每个图片需要指定的位置。

3、删除某一张图片后面的图片不向前排列,保持删除图片的位置,方便替换新的图片。


通过这三条需求有了上面的线上设计,样子就像打麻将开杠一样,实际上2、3条都是伪需求,因为这样的设计造成了,每次传照片都是一张一张的传,也就是传四张照片需要点击四次上传。


传照片是每次都会有的行为;

删除照片,替换照片是不一定有的行为;


所以上传照片是高频行为;

删除,替换照片是低频行为;


结论:


为了满足一个低频的需求,影响了高频的体验,是不可取的,尤其是替换照片排列顺序完全可以全部删掉,重新去相册选择照片顺序上传,能够满足修改的需要。产品设计中,一般要优先考虑高频的操作体验,低频其次。Image title

改后


修改方案直接去掉后面三个上传按钮即可,用一句话总结就是:

判断对了业务,关心错了需求



最后 


我们UI设计师需要熟悉产品的业务同时,更要注重原型图中存在的细节问题,交互上多思考一下产品与用户关系、行为、目的等等,就可以避免很多问题,最重要的是不要被强势的伪需求压倒!


本期就这么多,我们下期见

 


吴星辰

64粉丝/0关注

老马识途一鸣惊人
APP设计的高级知识APP信息流内容属性如何主导UI设计?(UI进阶设计思维)

扫描二维码
去手机端查看海报

吴星辰

TA已经获得3枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN