后台管理类界面浅析

UI / UI设计教程 /      

uimaker
UI设计师 / 江苏 南京

来源:iconfans   作者:722SPC

关键词

 导语:


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

    正文:

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

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

         先说说目前我们看到的绝大多数的后台管理界面吧,如下图:
 
 
123.jpg
 
这是我们能看到的最为常见的,也是最多的后台管理的界面布局方式了,很经典的方式,这种布局方式一般在头部区域会放置系统名称啊、各种针对系统的功能图标,诸如:退出系统、刷新系统、修改密码等等的东东;菜单栏在左侧或者右侧,其他的区域就是内容的显示了,有的系统中会以3栏的方式排布菜单及其子菜单和内容。这种排版方式已经深入人心成了最广泛的布局模式了。
 
    但是~!我认为在今天这种很经典的方式可能会在交互方面出现一些问题,主要的问题不是出现在功能上,而是人的情感和心理方面。我认为界面设计中图形、色彩和排版只是占据了一部分,我们不能提到界面设计就说它有多华丽,有多么炫动,我觉得这只是对界面设计的一个片面的理解,作为界面设计,我认为我们应该更多地去关注交互的效率和便捷,这才是重点~
 
    请大家先看看下图:
456.jpg 

    这是一种对于交互产品的分析方法,在上图中我们以产品为中心对于产品可能涉及到的4大要素进行了分析,行为、场景、技术和用户就是着4大要素。
 
    在行为分析中我们要分析用户在使用产品时可能会发生的交互动作,比如在一个后台管理界面中是点击浏览占大多数呢,还是输入信息占大多数;
    场景分析中主要分析产品使用时的场景,例如该管理系统是在一个喧嚣吵闹的服务大厅中使用呢,还是在一个相对安静的环境中使用,我认为不通的环境给用户带来的心里感受是完全不同的;
    技术分析就是分析我们的产品是用何种技术来实现的,这个技术在界面设计中比较统一的,都是HTMLCSSJavaScript及其衍生出的JS框架、数据库、.netPHPJSP等等一系列常见的网页制作技术;
    用户分析中主要针对用户的类型进行分析,比如当前系统的用户为政务人员或者是坐席客服等等;
 
    个人认为做这些分析的实际意义在于为我们的设计工作提供必要的指导,经过这些分析我们可能会得到一些交互方面的指导,比如通过分析我们能发现用户的操作习惯,从而指导我们设计出相适应的交互方式,通过用户的分析我们可能得知用户的群体,以及这部分群体的共性,这样我们就能在设计时加入一些情感因素,从而抓住用户的心。当用户对界面感觉很亲近很满意的时候,工作效率自然也就提高了。
 
    下面看看我设计的两个界面,较上面说到的那种经典界面类型有了很大的不通,都是我用刚才讲到的方法分析过后进行的设计。


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

main.jpg 

    当初在设计时觉得比较迷茫,分析了之后有了一些思路,但具体要怎么来实现还是比较模糊的,后来无意中打开了WEBQQ(感谢腾讯CDC的那些牛人们为我们的交互设计所做的贡献~!),看了之后我就在想能不能把这种设计思路搬到后台系统中呢?后来想了想,在纸上画了画觉得可以实现,(话说做设计前在纸上画画写写的真是一种很不错的方法啊,节省时间)于是就设计了上面这个界面。
 
    在这个界面中常用的功能被放置在了左侧的菜单栏,因为我们的眼睛总喜欢看屏幕的左侧,上边的工具栏中以产品的名称作为区分,左侧的功能都是和呼叫平台有关的,右侧的则为其他的相关功能。(领导看了后肯定了我的想法,说以后不光用这个叫呼叫平台的东东,还会有其他的平台,所以在平台名称的两侧加入了两个按钮,用于平台的切换,当点击后,平台的名称和上部左侧的功能按钮会发生变化,这样能很快速的达到切换的目的。)
 
    整个界面的大部分区域是留空的,用来放置功能图标,就和我们的电脑桌面一样了,点击后直接出现相应的功能,用完后就和关闭文件夹的方式一样,直接点右上角的XX,这样该功能就被关闭了,这样操作起来比较简单。
 
    背景图片是可换的,比如某人喜欢大美女,那你就放个美女没事了多看两眼也无妨(有报道称,每天看5分钟美女能长寿哟亲~!),小清新的妹纸可能喜欢花花草草的,那你就放个花花草草的背景呗,嘿嘿,总之,一切的改变都是为了改善亲在工作时的心情哦。。。
 
    案例二:三维数字社会管理系统

000.jpg 

    在这个设计中分析之后发现这是一个基于数字地图的管理软件,看了看现在的Google地图,百度地图啥的,发现界面依旧是那种很经典的布局方式,于是我就大胆的创新了一回~
通过分析我发现,作为此管理系统更多的操作时针对地图的,于是我进行了大篇幅的留空,让功能部分只占整个界面的很少一部分,上边的名称旁边的5个按钮是针对5种不同管理对象的选择,右侧的菜单栏呈现相应的内容,下面的整个操作是围绕地图来进行的。
 
    通过以上两个设计,我得出了一点启示,以下面这张图为例进行说明:
789.jpg 


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

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

 

 收藏