美文网首页产品交互设计
交互日记 | 列表该如何设计?

交互日记 | 列表该如何设计?

作者: 瓦力UX | 来源:发表于2016-06-01 16:14 被阅读200次

    最近在设计一个服务平台的界面,也是首次接受这种后台类型的设计,难免有不少问题是之前没有遇到过的,因此这里把设计中遇到的问题、自己的思考、最后的解决方法记录下来。一是为了方便自己以后回顾,另外也和简书上的好友交流一下,希望能得到提高。

    1.问题

    列表原型

    这是产品给的列表页面原型,每个条目后边都跟有相应的操作选项,基本的查看,修改,删除和用户权限的设置,结构很简单。

    2.设计过程

    拿到手后没有想太多,直接开始进行设计。

    设计稿v1.0

    第一版的设计直接沿用了产品的原型,只是把操作的文字变成了图标,从而显得有一些设计感。删除操作具有不可逆的属性,属于重要操作,用了橙色进行区分,提醒用户注意。

    完成之后想了想,发现图标虽然在视觉上比文字要好看的多,但是没有文字显得直观,用户在操作时可能会产生一定的疑惑,并不清楚知道每个图标所代表的准确含义。于是,进行了改进设计。

    设计稿v1.1

    改进后的设计加入了鼠标移入的文字提示,当用户把鼠标放在图标上时,会出现相关的文字,告诉用户这个操作到底是用来做什么的。这样不仅保持了视觉的美观,而且在可用性方面也有了很大的改进。

    然而自己并不满意,还是觉得这几个图标摆在这里显得元素很多,整个界面显得冗余,不是那么的简洁,于是继续进行改进。在查看了大量的相关设计稿之后,终于设计出了自己认为又简洁又方便的设计,如下图

    设计稿v2.0-1 设计稿v2.0-2

    新版设计把整个操作放进了一个下拉框中,当用户需要对当前选项进行操作时,可以点开下拉框,从而出现具体的操作选项,所有的选项均采用文字加图标的设计,语义清晰。整个界面非常简洁,用户可以清楚的找到自己需要的操作。

    但是最后拿给产品的时候,却立马被否定了。

    产品给出的结论是:这样的设计界面是非常简洁,但是用户在操作的时候,原先只需要一次点击就可以完成操作,而现在却需要两次点击,产品的操作变得繁琐。

    3.问题思考

    那么问题来了,我们在设计列表页面时,到底是要保持整个界面的简洁清晰,还是要保证所有的元素方便操作?

    其实答案在于这个列表的具体用途是什么。

    如果一个列表的作用是显示,用户的主要操作是看,主要目标是为了获取信息,那么我们在设计的时候就应该保持界面的简洁清晰,从而用户可以很方便的获取自己想要的信息。

    如果一个列表的作用是操作,用户的主要操作的点击,主要目标是为了完成特定的任务,那么我们在设计的时候就应该注重可用性,保证用户可以方便完成操作。

    基于以上的思考,再来看我们的原型。这是一个管理员的列表,主要是为了增加,修改或者删除相应的管理员,或者给某个管理员赋予一定的权限,那么这里的重点就是操作,这个列表是用来完成任务的,那么在设计的时候就应该以方便用户的操作为目的。

    接下来我又对自己的设计进行了修改,结果如下

    设计稿v3.0

    最终设计采用了设计稿v1.0的思路,只是对配色等细节进行了优化,使得整个界面显得更加和谐,同时满足了用户方便操作的需求。

    4.总结

    任何一个元素的设计,都是建立在它的最终目的之上的。在设计的过程中,我们首先要深刻理解自己是为什么而设计,通过设计需要达到的最终目的是什么。设计是用来解决问题的,只有我们的设计很好的解决了最终的问题,才能算合适的设计。

    相关文章

      网友评论

        本文标题:交互日记 | 列表该如何设计?

        本文链接:https://www.haomeiwen.com/subject/ctofrttx.html