探究当前数据可视化的用户体验设计趋势

探究当前数据可视化的用户体验设计趋势

作者:Jake Rocheleau

译者:ITsCrystal

 

我们发现,对后台设计的技巧通常不会像普通网页布局设计那样公开分享。这是因为我们通常很难在网络上找到后台的一些样例。由于要进入后台界面都需要账户和密码,所以很多设计师只能从其他样例中探寻设计趋势。但是对于管理者来说,后台仪表板的界面布局已经形成一种通用的风格了。

在本文中,作者希望和大家一起探究dashboard的布局多样性及其设计理念。大多数典型网站的布局都是通过Html/CSS来搭建的。但网站管理者和用户不一样,他们只需要设置网页、套用模板或者更新内容页面。那相对特殊的管理后台设计是怎样呢?作者就打算对后台管理的设计进行讨论。

 

Tab标签导航

利用Tab标签作为网站导航一直是多年来的流行趋势。它在后台界面表现如此良好的原因是,我们通常会把相似的工具放置在一个区块下。使用同一水平或垂直线上的选项卡菜单可以容纳大量的相关的子菜单位置,以承载大量的链接。

探究当前数据可视化的用户体验设计趋势

图片1:Tab导航样例

任何形式的Tab链接都可以为导航服务。你不必过多地考虑标签的常用圆角或在界面上的视觉设计,通常运用的就是简单的文字链接或者运用一些背景和icon。这能够帮助用户决定某个链接将会链到管理界面的哪个模块池。Tab导航的呈现通常一闪而过,运用字体加粗或者放大,能够让选中的Tab标签在导航栏中脱颖而出。

探究当前数据可视化的用户体验设计趋势

图片二  tab样式的设计样例

并不是说控制板块的导航都是要用Tab标签的形式。当我们看WordPress的管理界面时,它看起来更像一个列表组,而不是Tab导航。而WordPress是一个非常出名的CMS管理系统,这就说明任何形式的导航都能发挥它的作用。一个比较好的思路,是先规划出一个站点地图及其链接的对象,再根据这个思路对链接项进行整合。

 

工具栏图标

作者之前简要地提到过关于icon的设计,其实在他看来icon是导航栏中非常重要且容易出彩的元素。icon能够对其链接或跳转的内容页进行图像化的表征。文本则需要大脑花费更多的时间去进行识别和加工其含义,而图形更直观和简洁。我认为icon应该被包含在界面元素诸如:按钮、表格、页头、输入区或者页面上任何可能引起人困惑的区域。

探究当前数据可视化的用户体验设计趋势

图片三  工具栏样例

现代设计师们更容易搭建页面,因为有很多免费开放的图标可供下载。有很多根据不同主题、不同技法和不同设计风格的收藏集,你能毫不费力地找到一套icon用于你的后台界面。你可以通过合理的icon摆放,让用户能够在繁杂的内容信息页面快速浏览,并且有益于视觉表现。

 

弹出悬停菜单

当你需要展示更多的输入内容或者明细介绍,而页面上又实在没有足够的空间。在初始加载时适当隐藏,当鼠标移入时以弹出菜单的形式来展示,不失为一个好办法。通常通过点击页面上的某个链接或按钮来触发。

探究当前数据可视化的用户体验设计趋势

你也可以在页面上运用弹出悬停菜单用来隐藏于输入字段相关的一些数据。网站管理员通常有大量的编辑页面或编写内容的工作,这就需要花很多耐心和心思把很多内容聚合在一起。很显然一个弹出框会包含很多内容,甚至包含一些流行的窗口样式和阴影效果。

探究当前数据可视化的用户体验设计趋势

我真的非常喜欢上面提到的这个被标记为芒果管理的。当你鼠标移入这个message链接按钮时,会展示几条具体的message概要。这还可以类似地运用在扩展诸如发送、草稿、用户评论和一些涵盖大量列表数据的功能。任何典型的CMS系统都需要一些内容管理功能,以确保一切正常运转顺利。将页面上这些内容重新组合,适时隐藏和展示,能够给拥挤的页面腾出很多位置。

 

内容样式显示

多种多样的后台管理系统,归根到底都有一个最基本的目的,就是信息的展示。其实像什么表单、列表、按钮、图形这些统统都可以称为“内容”。整个布局的设计一般都是为了将信息整合组装,以便于更好地阅读和编辑。

探究当前数据可视化的用户体验设计趋势

我喜欢那些表单中的小icon,它们能让你快速发现哪些是可访问的按钮。你可以快速添加、编辑或删除表的行中的内容。图形的特征和颜色,能够让用户一样明白他需要做什么。当然,这只是一个简单的例子,但很难找到这样的趋势。多去思考和创新,才能让你设计出来的后台更简洁易用。

探究当前数据可视化的用户体验设计趋势

值得一提是,并不是所有的管理界面都需要图形、图表或是统计数据。有时你只需直接处理信息。尽管有可能有些枯燥,但是你必须想好如何处理数据的交互。这时候你会发现考虑用户的认知是一个挑战。无论尝试多少次新的想法都是值得的,要知道没有人能进行最完美的界面设计,新的设计走向永远是即将到来的。

 

样例展示

本文中展示的所有设计样例都是只为了给设计师们抛砖引玉。但我相信大家能够从大量的案例中获得一些后台界面设计的通用知识。这里一些整理过的精美后台设计模板 供大家自取。从中您可能会发现一些和我所说的一样设计走向,又或者您能从中发现新的点子用在您自己的设计中。

 

 

 

 

 

文章来源:https://speckyboy.com/user-experience-trends-for-admin-dashboards/

译文来源:一个像素设计

头图来源:http://www.psd-dude.com

 

推荐阅读

【经验】为可视化数据寻找适合的配色
【案例】腾讯游戏流程规范信息可视化项目实战
【技能】PPT讲解:数据可视化,到底该用什么软件来展示数据?
交互设计中的视觉可视化精髓!
【笔记】唤醒信息可视化之美
 

UXRen公众账号
关注UXRen微信公众号(cnUXRen)

UXRen社区欢迎各界用户体验从业者及学生投稿优质原创文章。投稿请关注UXRen社区公众账cnUXRen(上面有二维码)留言“我要投稿”,小编会及时与您取得联系。

版权声明:除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区,并保留本站原文链接地址。本站部分文章来自互联网及公开渠道,如有侵权请及时联系我们。邮箱:contact@13tech.com.cn

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/21065/

(0)
震天下震天下
上一篇 2017-08-07
下一篇 2017-08-07

相关推荐

  • 从产品到交互·2015同济设计学考研经验

    【写在前面】 我叫徐晨,来自陕西西安,毕业于兰州理工大学工业设计专业。2015年我参加了研究生入学考试,也如愿考上了同济大学创意学院的研究生。想想当初独自备战,其实都是在黑暗中摸索,曾经也担心自己的复习方…

    2015-11-08
  • 未来全新的用户界面将重塑设计师的工作【UXRen译#156】

    副标题:图形用户界面更进一步的思考 作者:Paul Boag  |  翻译:文松,校审:林有九   我们目前的生活已经离不开图形用户界面,它萌芽于施乐帕克研究中心(PARC),目前已经成为PC很重要的部分。不光这样,随着网页…

    交互专题 2017-08-07
  • 【笔记】从活泼的C端产品到严肃的B端产品设计,我是如何自如切换的——交互篇

    2016年11月5日,UXRen社区联合网易杭州主办“用户体验者的自我提升”主题讲座,本文网易资深交互设计师大饼的现场分享:《 从人性到人文的设计思维转变》整理而成。   嘉宾介绍: 杨杰(大饼,资深交互设计师,UEDC交…

    交互专题 2017-08-07
  • 13毫米:触屏按钮的完美尺寸【UXRen译#170】

    作者:Scott Hurff   |  翻译:taitai,校审:天蛙   有种感觉你无以言表但却了然于心——当你在触屏上不能正确操作时,当你不得不小心翼翼地点屏幕上的一个小按钮来触发某个指令时,那种挫败混杂着气恼的滋味。 但假…

    交互专题 2017-08-07
  • 算法驱动设计趋势已来,产品设计如何与算法进行创新合作?

    译者:舒舟,阿里巴巴/1688事业部/无线交互   过去的一年,BBC UED团队(原1688UED团队)花费了巨大的资源和精力投入阿里巴巴集团中台DPL(Design Pattern Library)项目,旨在通过设计模式的提炼及抽象,由规则和…

    交互专题 2017-08-07
  • 用微妙动效改善用户体验的简单方法

    译者:zyl0127     应用程序中的动效具有新的改良性的意义。跟过去的华丽、混乱的网站动画不同,新的动画干净、流畅,并且易于导航。忘掉你所知的GIF、令人不愉快的广告和Flash网站吧, 这些都是过去的事情了。 当…

    交互专题 2017-08-07
  • 减少认知过载的6个案例分析和解决方案

    作者:Danny Halarewich(译者:Iris_Uu)   导读: 文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌…

    交互专题 2017-08-07
  • 交互设计师的60日计划之第二天

    此次分享的[button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    交互专题 2015-08-20
  • 用户行为的“及时”理论 【UXRen译#184】

    作者:Jeff Atwood   |  翻译:露露,校审:Chen Jing   我一直认为软件设计对用户在使用该软件时的行为有着深远的影响。 从两方面来讲: 有意地让“正确”的操作容易操作。 有意地让 “错误”的操作不容易操作。 无论…

    交互专题 2017-11-01
  • 交互设计师的60日计划第十二天

    周五在会议室被吹感冒了,周六又因为之前约了牙医所以跑出去一整天,晚上回来就发烧了,昏昏沉沉睡整夜整日。然后发现我果然劳碌命,生病都挑周末,工作日一到立马恢复了…不过这几天就都没写总结,想想心里还有点慌…

    交互专题 2015-08-20