联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

后台管理界面设计技巧有哪些?设计用什么工具好

Time: 2019-12-20

后台管理的设计,是非常重要的,设计的好,就吸引顾客,那么,后台管理界面设计技巧有哪些?设计用什么工具好,带着这些问题,接下来就让小编来给大家介绍一下这方面的内容吧。


界面设计工具有哪些?


  1.Kendo UI

  Kendo UI是Telerik开发的基于jQuery HTML5的UI框架,开发面向桌面、移动设备的应用程序,主要有Kendo UI Web,Kendo UI Mobile 和 Kendo UI DataViz三个版本。它包含了大量UI组件、丰富的数据可视化框架、一个自适应移动框架,以及HTML5 app开发所需的所有工具,如数据绑定、模板、拖放API等等。


  2.MOQUPS

  这个工具可创建出非常惊人的HTML5 app,具有高保真、独立分辨率的SVG模型和线框。


  3.Webflow

  Webflow可以让你直接在浏览器上创建交互式布局和像素完美的设计元素,并且不用编写一行代码!


  4.JetStrap

  这是一个完全基于Web的界面设计工具,JetStrap号称不仅仅是一个模型工具,它是针对BOOTSTRAP 3中最顶尖的界面开发工具。

  5.NetAdvantage ICONS

  这个图标库是著名界面控件开发商infragistics提供的,它分类齐全、系统,可以为用户界面添加各种专业的、充满艺术格调的图标,使用后为界面外观增色不少。难得的是这些图标即插即用,操作非常方便! 


2.png

(图片来自网络)


后台管理界面设计技巧有哪些?


  1.高级搜索

  当搜索条件超过一定数量,我们可以将不是首要的的搜索条件隐藏,将头部宝贵的空间释放出来展示列表重要搜索内容。高级搜索和普通搜索的切换就很好的实现相应需求。


  2.批量操作列表中多条信息

  对于表单页面,原始的excel表单可以做到批量选择和批量操作。许多后台对于表单的处理往往过于简单,只能基本满足增删改查。

  后台也可以用自定义勾选的方式对多个列表内容进行批量操作,如图可勾需多个列表或全选后进行批量删除、作废、更改负责人、发邮件、发信息、转移等等…


  3.单个表单抬头字段筛选

  一般的数字、时间、字母排序单个表单都有隐形的排序框,数字从小到大、时间从近到远或者26个字母排序。但是对于其余抬头筛选就只能做顶部选择或文字输入筛选,那样浪费的区域会增多。

  而如果直接隐藏在抬头下面作为一项列表内容,自定义筛选的灵活度会大很多,整个页面也会放出更大的空间展示列表内容。


  4.表头、确定表单页面和不操作页面局部固定/自定义筛选字段

  在浏览的众多网站中,由于某一部分内容都有高频的操作或查看,页面在设置的时候会有意识将这部分板块固定,不随其它内容上下和左右滑动。

  在后台也存在这样的需求,除了抬头部分还有特殊字段和对表单页面的保存、取消、审核等高频操作都可以设置为固定板块存在在页面中,使页面的重点更为突出,内容查看更有趣味性。


3.jpg

  (图片来自网络)


5.消息隐藏

  消息隐藏也是在做一个电商的项目,学习到的一种方法。因为消息分类较多,可操作和不可操作的消息类型叠加,并且消息的重要程度也是层次不齐,以至于消息列表点击进入查看还需要进行分类。

  但是在首页,将消息分类的同时,直接链接进入相应待办和查看页面进行操作,用更直观的方式转达给用户去查看或操作,也省去页面跳转间的频率和时间。


  6.抬头标题操作切换

  看过线下excel表单的抬头有几十个的情况,A4纸打印都得有好几页才能展示全面,网页的宽度最多也只能容纳15-20个抬头(抬头文字全部展示完的情况下),怎么解决数据量太大,抬头区域不够展示的情况呢?只能做隐藏。

  隐藏字段是否展示或者展示优先集的权利都交到用户手上,给他们一个最自由化的配置,只选择自己想要查看的字段,选择过多的字段导致文字省略用户也会理解而进行合理的分配。

  

7.切换当前内容的视图,突出角色主要内容

  在淘宝移动端的商品列表中,我们经常根据自己的喜好来切换展示方式。是单行显示单个商品,还是单行显示两个商品,切换方式能让用户更大限度的看到自己想看的商品信息。

  后台也可以切换视图使用户用更习惯的方式,展示列表内容。切换视图有许多表现方式来表现,如列表、地图、剖面图、折线图、扇型图。

  顾名思义,视图就是更换另一种表现形式。一定要选取与设计的产品相符合的表现形式,才能更加突出这是一种技巧,如果只为了炫酷的效果,而增加多种视图,没有需求人群,那这种转换也是没有意义的。


  好了,看了小编介绍了这么多,相信大家对后台管理界面设计技巧有哪些的相关内容有了更深一步的认识了,大家在设计时,可以参考一下这些技巧哦。


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开