收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 5043|回复: 19

[分享] 讨论下后台管理界面的未来~!

[复制链接]
发表于 2012-9-28 13:47:38 | 显示全部楼层 |阅读模式
本帖最后由 722SPC 于 2012-9-28 13:48 编辑

     导语:

    我们的界面设计行业从无到有也发展了有好多年了,在过去的这么多年中整个行业从无到有,从亦步亦趋的模仿老外的东西到现在很多有思想有赶脚的东西出现,很多人为此在努力着,在此对那些默默付出的前辈们表示感谢~!(大家鼓掌~!!!)

    正文:

    做了也好几年的界面设计了,刚开始很难,曾经也几次想专业,但还是无法抹去对界面设计的热爱,所以一直在坚持着。(他娘的,你废话真多,说点有用的。。。)从最初的观摩别人的网页作品,到后来自己做网页,再到现在做的基本都是B/S结构的管理系统的界面,有了很多的体会。

    今天我结合自己做的两个管理系统的的界面来说说我对后台管理界面设计的想法吧,也希望大家能说说自己的看法,让我们共同进步啊~!

    先说说目前我们看到的绝大多数的后台管理界面吧,如下图:

123.jpg


       这是我们能看到的最为常见的,也是最多的后台管理的界面布局方式了,很经典的方式,这种布局方式一般在头部区域会放置系统名称啊、各种针对系统的功能图标,诸如:退出系统、刷新系统、修改密码等等的东东;菜单栏在左侧或者右侧,其他的区域就是内容的显示了,有的系统中会以3栏的方式排布菜单及其子菜单和内容。这种排版方式已经深入人心成了最广泛的布局模式了。

    但是~!我认为在今天这种很经典的方式可能会在交互方面出现一些问题,主要的问题不是出现在功能上,而是人的情感和心理方面。我认为界面设计中图形、色彩和排版只是占据了一部分,我们不能提到界面设计就说它有多华丽,有多么炫动,我觉得这只是对界面设计的一个片面的理解,作为界面设计,我认为我们应该更多地去关注交互的效率和便捷,这才是重点~!

    请大家先看看下图:

456.jpg


      这是一种对于交互产品的分析方法,在上图中我们以产品为中心对于产品可能涉及到的4大要素进行了分析,行为、场景、技术和用户就是着4大要素。

    在行为分析中我们要分析用户在使用产品时可能会发生的交互动作,比如在一个后台管理界面中是点击浏览占大多数呢,还是输入信息占大多数;

    场景分析中主要分析产品使用时的场景,例如该管理系统是在一个喧嚣吵闹的服务大厅中使用呢,还是在一个相对安静的环境中使用,我认为不通的环境给用户带来的心里感受是完全不同的;

    技术分析就是分析我们的产品是用何种技术来实现的,这个技术在界面设计中比较统一的,都是HTML、CSS、JavaScript及其衍生出的JS框架、数据库、.net、PHP、JSP等等一系列常见的网页制作技术;

    用户分析中主要针对用户的类型进行分析,比如当前系统的用户为政务人员或者是坐席客服等等;

    个人认为做这些分析的实际意义在于为我们的设计工作提供必要的指导,经过这些分析我们可能会得到一些交互方面的指导,比如通过分析我们能发现用户的操作习惯,从而指导我们设计出相适应的交互方式,通过用户的分析我们可能得知用户的群体,以及这部分群体的共性,这样我们就能在设计时加入一些情感因素,从而抓住用户的心。当用户对界面感觉很亲近很满意的时候,工作效率自然也就提高了。

    下面看看我设计的两个界面,较上面说到的那种经典界面类型有了很大的不通,都是我用刚才讲到的方法分析过后进行的设计。

    案例一:民情通呼叫服务中心


main.jpg


       当初在设计时觉得比较迷茫,分析了之后有了一些思路,但具体要怎么来实现还是比较模糊的,后来无意中打开了WEBQQ(感谢腾讯CDC的那些牛人们为我们的交互设计所做的贡献~!),看了之后我就在想能不能把这种设计思路搬到后台系统中呢?后来想了想,在纸上画了画觉得可以实现,(话说做设计前在纸上画画写写的真是一种很不错的方法啊,节省时间)于是就设计了上面这个界面。

    在这个界面中常用的功能被放置在了左侧的菜单栏,因为我们的眼睛总喜欢看屏幕的左侧,上边的工具栏中以产品的名称作为区分,左侧的功能都是和呼叫平台有关的,右侧的则为其他的相关功能。(领导看了后肯定了我的想法,说以后不光用这个叫呼叫平台的东东,还会有其他的平台,所以在平台名称的两侧加入了两个按钮,用于平台的切换,当点击后,平台的名称和上部左侧的功能按钮会发生变化,这样能很快速的达到切换的目的。)

    整个界面的大部分区域是留空的,用来放置功能图标,就和我们的电脑桌面一样了,点击后直接出现相应的功能,用完后就和关闭文件夹的方式一样,直接点右上角的XX,这样该功能就被关闭了,这样操作起来比较简单。

    背景图片是可换的,比如某人喜欢大美女,那你就放个美女没事了多看两眼也无妨(有报道称,每天看5分钟美女能长寿哟亲~!),小清新的妹纸可能喜欢花花草草的,那你就放个花花草草的背景呗,嘿嘿,总之,一切的改变都是为了改善亲在工作时的心情哦。。。

   案例二:三维数字社会管理系统

000.jpg

      在这个设计中分析之后发现这是一个基于数字地图的管理软件,看了看现在的Google地图,百度地图啥的,发现界面依旧是那种很经典的布局方式,于是我就大胆的创新了一回~!

    通过分析我发现,作为此管理系统更多的操作时针对地图的,于是我进行了大篇幅的留空,让功能部分只占整个界面的很少一部分,上边的名称旁边的5个按钮是针对5种不同管理对象的选择,右侧的菜单栏呈现相应的内容,下面的整个操作是围绕地图来进行的。

    通过以上两个设计,我得出了一点启示,以下面这张图为例进行说明:

789.jpg


      以上这个图中的逻辑关系是我自己做界面以来的体会,当一个产品出来之前,我们需要收集用户需求,这些需求决定了最初的产品功能,产品功能又会决定该产品的交互方式,这些交互方式又会影响到产品界面,而最终的产品界面将会直接影响到用户体验,当产品使用过程中,随着用户体验的深入又会影响到产品的某些功能,最终就形成了这么一个循环。

    当然了,这也只是我个人的体会而已啊,分享出来,大家可以交流交流啊~!

   结语:

         以上这些就是我平时在工作中的一些体会和总结啊,结合我对管理系统界面的思考,所以今天写了这个啊,水平有限啊,可能会有很多不全面和以偏概全的地方啊,有什么不对的地方也希望大家说说自己的看法。更多的是分享分享自己的体会,也希望大家共同讨论讨论,就让我们在讨论声中走向更远的远方吧~哈哈。。。

评分

参与人数 1威望 +1 收起 理由
蓝色 + 1 原创内容

查看全部评分

发表于 2012-9-28 15:32:36 | 显示全部楼层
楼主说的不错,后台是得有些创新了。。但不知QQ的后台是个什么样的。。。
回复 支持 反对

使用道具 举报

发表于 2012-9-29 00:30:55 | 显示全部楼层
后台管理和前台操作实际上都一样,都是一个人机界面,只是因为应用场景的不同,而使用不同的倾向。
管理界面更多的是易用,需要使用的功能烦多,界面的美观与色彩已经不是必要的了。
所以设计师在经常去操作管理后台,才会设计出好的管理界面。
否则只是好看的操作界面。

我觉得你去民情呼叫中心坐坐班,工作一个月后,开始熟悉工作流程,然后再来改进界面和操作才更有力。
小按钮和不能一目了然我需要的信息,这是我比较郁闷的。啥都得点,还点不准。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-9-29 08:38:56 | 显示全部楼层
蓝色 发表于 2012-9-29 00:30
后台管理和前台操作实际上都一样,都是一个人机界面,只是因为应用场景的不同,而使用不同的倾向。
管理界 ...

矮油喂~!惊动管理员了啊。。。
嗯,谢谢你的意见啊,我也是在摸索啊。。。呵呵。。。
回复 支持 反对

使用道具 举报

发表于 2012-9-29 11:10:23 | 显示全部楼层
现在愿意思考,并愿意分享的人已经不多了,要鼓励。
身体力行的去执行的就更少了。要多想多做多测试
回复 支持 反对

使用道具 举报

发表于 2012-10-1 04:53:30 | 显示全部楼层
支持LZ。赞一个
回复 支持 反对

使用道具 举报

发表于 2012-10-9 22:38:29 | 显示全部楼层
有所启发,感谢。
回复 支持 反对

使用道具 举报

发表于 2012-10-10 08:46:31 | 显示全部楼层
楼主神人也,终于自己现在也有思路改变自己程序后台一尘不变的界面啦,感谢
回复 支持 反对

使用道具 举报

发表于 2012-10-10 09:50:20 | 显示全部楼层
后台其实应该更倾向于使用的快捷和方便,尽量减少点击,特别是涉及到内容更新录入的部份,能够通过TAB直接切换最好,因为操作鼠标会让手离开键盘,点击然后再回到键盘。
回复 支持 反对

使用道具 举报

发表于 2012-10-10 10:33:41 | 显示全部楼层
我总觉得,后台界面布局基本上都是千篇一律的格式,然后换换颜色换换图片什么的,要找个突破点很难,过分革新式的创新对于习惯操作大多数简单布局的用户来说又不能一下接受,太平凡的又没新鲜感,后台管理界面和网站界面比起来,就是布局容易创新难。
回复 支持 反对

使用道具 举报

发表于 2012-10-11 13:50:02 | 显示全部楼层
我觉得小按钮用得好还是很好的,关键是按钮图片能否表达它所展现的功能,还有就是在鼠标移上去是否给予有情的操作提示(这点还是很重要)
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-10-11 17:50:00 | 显示全部楼层
yajore 发表于 2012-10-11 13:50
我觉得小按钮用得好还是很好的,关键是按钮图片能否表达它所展现的功能,还有就是在鼠标移上去是否给予有情 ...

这个有的啊,呵呵,鼠标放上去的时候有提示的,例如那个摄像头的图标放上去,会提示视频监控,截图的时候没反应出来。。。
回复 支持 反对

使用道具 举报

发表于 2012-10-11 21:12:24 | 显示全部楼层
嗯,感谢分享
回复 支持 反对

使用道具 举报

发表于 2012-10-14 00:34:16 | 显示全部楼层
简洁易用。为主要原则。。
回复 支持 反对

使用道具 举报

发表于 2012-10-26 15:31:45 | 显示全部楼层
我认为在今天这种很经典的方式可能会在交互方面出现一些问题,主要的问题不是出现在功能上,而是人的情感和心理方面。我认为界面设计中图形、
回复 支持 反对

使用道具 举报

发表于 2012-10-29 10:54:24 | 显示全部楼层
JaceyXu 发表于 2012-10-10 10:33
我总觉得,后台界面布局基本上都是千篇一律的格式,然后换换颜色换换图片什么的,要找个突破点很难,过分革 ...

说的有道理 创新又怕客户习惯于原来的模式不适应 存在一定的风险
回复 支持 反对

使用道具 举报

发表于 2012-10-29 10:59:47 | 显示全部楼层
谢谢楼主的总结 自己一直在做后台管理这块 也困惑于它的布局怎么创新 感觉突破现在的经典布局很难 看了您的观点 备受启发
但是还有许多的问题,比如
1、按钮透明 会不会不兼容低版本的ie  
2、在本页面打开独立的小窗口,并可以关闭的js技术怎么写
3、第一案例的背景图是可以全屏显示的吗,那背景图片的大小怎么根据客户不同分辨率的大小而设定呢
还望楼主帮我解答困惑 感激不尽
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-10-29 15:07:00 | 显示全部楼层
491441699 发表于 2012-10-29 10:59
谢谢楼主的总结 自己一直在做后台管理这块 也困惑于它的布局怎么创新 感觉突破现在的经典布局很难 看了您的 ...

第一个问题通过插件已经解决了,并且已经测试,可以在百度上找IE6中PNG透明的解决方案;
第二个问题通过JQuery插件也已经解决,可以找相关的教程看看;
第三个问题的解决方案是先通过JS来探测客户端屏幕分辨率的大小,然后通过文字来提示用户上传图片的尺寸;
回复 支持 反对

使用道具 举报

发表于 2012-10-29 15:27:49 | 显示全部楼层
722SPC 发表于 2012-10-29 15:07
第一个问题通过插件已经解决了,并且已经测试,可以在百度上找IE6中PNG透明的解决方案;
第二个问题通过 ...

哦哦 都是通过js和插件来解决了 俺仍需努力啊  谢谢详细的解答
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-10-29 15:58:00 | 显示全部楼层
491441699 发表于 2012-10-29 15:27
哦哦 都是通过js和插件来解决了 俺仍需努力啊  谢谢详细的解答

共同努力啊,一起进步哦。。。呵呵
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-8-18 02:54 , Processed in 0.124687 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表