葡京网上娱乐场柜后台数据表格页面设计总结

设置型表格

用户采取设置型表格主要开展的操作是迅速扫视,搜索到要展开加、删、改、查的始末。签到后台受之所以到之设置型表格来(管理员对签证到规则与人口规则进行查和编辑)、签到管理员设置(管理员对签到管理员及其权限进行设置)。

~m POST 拦截所有POST请求

于筹划时应有注意什么

依据不同角色用户对表的以作为受到得以看到,在及时有限类似表格设计及无与伦比关键的便是易读性和频率。即只要以确保阅读舒适性的又突出要信息以便为找。

1.用户之逻辑是啊,而非是事情逻辑是什么

商店后台页面时会现出的一个问题便是数额展示的逻辑是依照作业逻辑来展示,而不用户的角度来显示的。当您质疑就一点经常,产品经理还见面讲的凿凿地游说“业务逻辑就是是这样的”,让人口哭笑不得。

例如签到记录表,对用户来说无比关键的凡「签到状态」这个消息,但是工作达到之逻辑是先行亮你的各种签到明细,最后才显示签到状态。因此依作业逻辑来规划的言辞虽会将无用信息固定于了左手,用户最关怀的音反而排在末一排列,大大降低了以效率。

2.报告用户「你自哪来」「你若到乌去」

用户在运用设置型表格和纯记录型表格时之第一目的都是检查页面、找到自己假如操作的起。因此于页面设计时一旦分明地告诉用户若本于羁押什么,以及你关心的数据以乌。

诸如签到记录表,由于表格自身性质原因,数据量大是心有余而力不足避免的,用户以翻看表格时于为难,容易不知底自己现在羁押之凡何,因此给这无异于行提供一个浮泛的状态显示。对于用户关注的异常信息,可以经标红等艺术去显得,让用户在扫描过程遭到就是能快找到对象。

3.针对性非必要展示的消息进行隐蔽或去

据悉简约至上的尺度来对页面被的诸一样宗进行检讨,看是否发好展开隐蔽或去的音讯,减少用户之选择与页面被的噪声。

例如顶部的标签,可以由网判断员工所属的签到组的记名规则来动生成,而无是任差异地用有着的选取项都停于顶部,降低了用户使用时的效率;另外为得以拿用户不常用之「异常」类选项折叠起来;再像作为员工个人采取签到记录表时,自己是孰与当哪个部门是还了解不了之,因此一定在左手的「部门」和「人名」这同排列占用了怪酷组成部分职务,完全无必要展示的。

4.差景象下用不同之处理方式

在和易读性相抵消的前提下好于不同的面貌被采取不同之行高。纯记录型的表可以紧凑一些,因为多数数据未待进行拍卖;数据量少、需要处理的数据类型多时可以留白多片,这样操作起来比不易于出错。

5.正式好重大

不以规矩,不化方圆。企业后台系统的筹划在早晚水准及是极端容易为规范以及量化的设计,建立平等份完整的设计规范,封装进组件库,前端建立代码库,这样之后能望去多繁琐的标,并且在办事对接的情形下能从及那个要命之意图。

如今自家于统筹被面临的很多题目多是因没一样卖标准化的设计规范造成的。因为于自接项目的新没有消费片工夫进行正式的梳理,现在自己要花数倍增于此的辰错开填这个坑,呜呼哀哉。

调节https请求稍微麻烦一点,需要装于定义之SSL证书。可以参见官网的立刻篇稿子:
https://mitmproxy.org/doc/certinstall/android.html

报表的型

报表是同样种植对数码开展集团整理的招。大体上可是分为四类,入口型表格、设置型表格、纯记录型表格和被动生成型表格。这四类表格对应提供的效用与用户作为是有着区分的。在本人所当的记名和工作汇报的军事管制后台页面中只是包含两接近表格:设置型表格和纯记录型表格。

参考:
http://greenrobot.me/devpost/how-to-debug-http-and-https-traffic-on-android/

纯记录型表格

纯记录型表格在多数情况下独自是作一个数量的存地使有的。签到后台受之所以到的纯粹记录表格来记名记录表(员工及领导查看或导出自己之记名记录)、各类明细报表(管理员及官员查看或导出员工的登录明细)。

每当请列表界面,输入i(代表Intercept filter)进入命令执行,输入cmd=200

日前对是问题关注长远,查阅了网上广大材料,也抽空整理了转网页端的设计规范,在斯归结起来针对号后台的数据表格页面发作一个简约的阶段性总结。

电脑端设置

临到一半年之办事着时接触到后台页面的计划性,企业后台数据的显示日常都是由大量底报表和表单组成的,初接手时设计上存不少迷惑的地方。因为这型的页面及平面的排版不同,没有印排版的阅历得以追溯,也无像一般移动端用户界面,在网上发出成百上千规划创作同文章好参考,很多底计划只能通过我自家的痛感与品味决定。再长平台自没有成熟的设计规范可供参考,所以最初于规划及难免缺乏有底气。接手一段时间后,开始研究有大厂如element、ant
design的设计规范,仿照着做了相同客设计规范,但到底是抄,知其然不知其所以然。

脚坐android为例做牵线,iOS的调节类似,关键是设置好代理。

今天叫大家介绍一舒缓强大的支撑手机端抓包的家伙:mitmproxy。官网地址:http://mitmproxy.org/
。这是mitmproxy官网的自述:

下键盘的光景箭头移动黄色的>>,到被阻的请那一行,回车上详情,使用tab键切换Request和Response,现在求还不曾作出去。输入e,按提示可以编写相应的请求体。编辑了后回车,然后输入a(accept)发送给服务器。

手机端设置

私家死喜欢Fiddler,功能强大,而且还支持替换文件,对于调试线上之js/css文件特别便宜。可惜,没有MAC版本。于是我只能另外寻利器。

6.pic_hd.jpg

mitmproxy是一个支持SSL的HTTP中间人代办工具,它同意你检查HTTP和HTTPS流量并支持直接改写请求。它置身客户端与Server端之间,它可落客户端的Request,然后修改再发送给Server端;Server端得到Request之后再度产生相应的Response,又见面吃mitmproxy拦截,如果您想修改response,便只是改后再也关客户端。

C 清空控制台
tab 请求/响应切换
q 返回上一个界面
m 于应结果被,输入m可以选body的展现方式,比如json,xml等
e 编辑请求、响应
a 发送编辑后的乞求、响应

脚我要做的饶是拦截android的http请求,然后修改要url,等待服务器返回后重新修改响应体。

Screenshot_2015-02-03-17-35-53.jpeg

服务器响应后,会发出Response,此时,响应还不曾发放android客户端,可以看出是Response
intercepted,代表是于拦了。假如想编辑应,一样是输入e编辑,进入编辑模式后,就是和vi的操作一样了,编辑完后需要wq保存退出。然后再度输入a,这时android客户端就会见接响应了。

HTTP抓包分析工具发出于多,如Fiddler,FireBug,HttpWatch,Tcpdump,PAW(mac)等。在召开运动支付时,找到同样缓慢合适自己的能够进行移动装备HTTP抓包之家伙为是非常关键之。正所谓,工欲善其事必先利其器。

每当默认情况下mitmproxy是过滤抓包之URL,例如我想拦截所有url中含有cmd=200底恳求,操作如下:

它们是开源的,托管在github上,使用python开发,跨平台。
https://github.com/mitmproxy/mitmproxy

an interactive, SSL-capable man-in-the-middle proxy for HTTP with a console interface

嗜折腾之足协调编译安装。

http://mitmproxy.org/download/osx-mitmproxy-0.11.3.tar.gz

~c 404 拦截特定的响应码404

详见操作以此间可以找到:http://mitmproxy.org/doc/mitmproxy.html
。我于此只排有部分常采取的一声令下。

官尚未让起解决方案,在网上搜了转,有人经过手机的走热点来促成,需要为此到少光安卓手机,假如为A和B,电脑啊C。现在要对A手机的HTTP进行抓包。
①每当B中启用WLAN热点功能
②A和C连接到B
③于A中设置代理IP(A的IP地址,通常是192.168.43.xxx )

/Applications/ProgramFiles/mitmproxy-0.11.3/mitmproxy -b 10.0.1.6 -p 2386

再多拦截命令看这里:
https://mitmproxy.org/doc/features/filters.html

3.pic_hd.jpg

3G/4G抓包

5.pic.jpg

是强大的职能都于一部分关于iOS应用的苦衷丑闻中都冒出过,包括Path的地址簿上污染丑闻。它的直白改写请求的力吗让用来针对iOS平台,其动包括于GameCenter中伪造一个假的高分数值。感兴趣的可以翻阅:

实则命令基本和vi一致。

下载地址:

拦截HTTP请求

8.pic.jpg

重新详实的抓包过程吧得扣押这里:
http://greenrobot.me/devpost/how-to-debug-android-http-get-started/

7.pic_hd.jpg

点击访问原文
乃还得加入全栈技术交流群(QQ群号:254842154)

这时,手机端的拥有http请求都见面吃mitmproxy检测及,并出示在控制台中。键盘的上下键可以操纵黄色箭头
>> 的运动,回车直接上伸手详情。

下载

http://mitmproxy.org/doc/tutorials/gamecenter.html


任何拦截命令:
~q 拦截所有的求

然后以android客户端发起呼吁,我们可见到给阻的乞求于标红高亮了


mitmproxy基本操作

手机及电脑连续和一个wifi,然后设置代理。进入WLAN,找到时连续的wifi,长论,弹出的框中选择“修改网络”,进入后,选择“显示高级选项”,代理选择也“手动”,代理服务器主机名设置也mac端的ip地址,端口号是同刚刚安装的2386,设好后保存。如下图:

计算机与手机总是至与一个wifi环境下。运转时,需要指定电脑的ip地址,并预定一个端口号:

HTTPS抓包