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

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

作者: 瓦力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.总结

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

相关文章

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

    最近在设计一个服务平台的界面,也是首次接受这种后台类型的设计,难免有不少问题是之前没有遇到过的,因此这里把设计中遇...

  • [信息集合]卡片式&列表设计

    如何解决信息集合的问题? 在交互设计中,信息集合的方式往往采用卡片式设计和列表设计。列表针对的集合主要是信息栏的“...

  • 12_《交互设计沉思录》

    1,背景 该书讲的是交互设计在工作/生活中的状态展现,不是一本指导该如何进行设计的工具书 2,内容 A:交互设计师...

  • 社交产品方法论(七):交互设计的二三事

    一个完整的交互稿该考虑哪些因素?如何评判一个交互设计是否优秀?带着这2个疑问,请听我为您慢慢分享。 交互设计稿作为...

  • APP的六种loading加载样式,全在这...

    关于App特殊状态下的交互设计,前面《App临时框的设计,全在这了...》、《网络异常时,App该如何设计?》两篇...

  • 程序猿学习UE交互设计

    本文结构 什么是交互 一些交互设计原则 交互文档该怎么写 交互设计的责任边界 学习路径 延伸阅读 什么是交互 1....

  • 交互文档封面该如何设计?

    2017年的第21篇文章。 1.DRD 互联网团队几乎每个岗位都要有输出物,产品经理要输出PRD,视觉设计师要输出...

  • 产品 目标导向的设计过程,你知道吗?

    数字产品的设计过程 交互设计基础知识 交互设计的焦点 :如何设计行为 交互设计借鉴了传统设计,可用性及工程学科的理...

  • 理解交互设计

    阅读前,思考以下三个问题:1,什么是交互设计?2,互联网APP的交互设计如何做?3,WEB软件交互设计如何做? 设...

  • 《交互设计沉思录》读书笔记与思考(二)

    ▲交互设计师如何管理复杂性?(面对实际设计过程中的复杂情况该如何处理,以下这些方法在于将想法外化,用来理清头绪,帮...

网友评论

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

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