偷偷吐槽:为什么表格结构不是移动优先(Why datatable is not mobile first style)
来源:互联网 发布:附加数据库失败 编辑:程序博客网 时间:2024/05/22 22:25
最近花了很大的力气把一个表格的第三方控件整合到了以Ionic3为基础平台的混合式移动开发项目中,从心底说我是很反对这样做的,因为我从来不认为表结构属于移动开发世界。也许我说的不对,但至少目前我是这样认为的。但是身处美国的老大的老大说了,客户希望看到web端花花绿绿的表格可以平移到手机端。什么?手机屏幕太小,整个上下左右的滚动条拖呀!!好吧,client is god,翻译成中文就是顾客是玉帝。我们客户大部分是国外客户,我也不care,但是领导的领导就是领导的平方呀,再说领导自掏腰包买了价值500美刀的这个第三方表格框架,在这个诚意面前,我也只好勉为其难了。
交代完背景,可以开始专业一点的吐槽了:
1. 在很多mobile-first的前端框架中,比方说bootstrap,在html页面中都有很著名的一段代码:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
将布局的宽度定死,就是移动设备的宽度,在这个基础上根据不同的设备屏幕大小用media query做一些适配,比如在稍大的屏幕上一排放5个图标,小屏幕可以一排放三个诸如此类。对于表格结构,在我们项目中一个表理论上可以设置无限个列,当然老大为了表示诚意,特意说我们在mobile端最多允许客户放15个。移动端屏幕就那么大,比如像Iphone6s,375✖️667, 就算怎么挪移设置,15列也要挤作一团。如果想要显示的好看,按照老板说的整个滚动条,意味着上面那条viewport的代码肯定不能用了,就是生生的将web端的机构搬上来了,这么一来当然不是mobile-first了。
2. 我们项目有很优秀的desinger射鸡狮,对的我是攻城狮。我们经常在一起聊一些关于移动设计的事,其实设计师比工程师还要郁闷,他们的看法和我们完全一致,表结构直接整到移动端的确很奇葩,显得他们非常不专业以及非常不用户友好,但是老大坚持,这个职业生涯的污点(某位设计师原话)估计也是要污下去了。
言归正传,设计师在做移动设计特别是将已有web版本移动化时,对于一些不mobile-first的组件,比如说这个坑爹的表结构,是有办法解决的。其实在我们开发用的ionic中就有ion-card。非常好看以及符合用户的使用习惯,一个表格中的title, description, comment...通过合理的设计完全可以卡片化。
3. 老大甚至设想过是不是可以把web的这种分页方式也搬上来,有点小?没关系,手机屏幕也是可以缩放的嘛。我想用我外甥刚学英语时的一个口头禅: No No No来表达我的态度。我宁愿自己写一个适合这个框架用的infinite scroll来做这件事,毕竟这样看着更mobile style!!
4. 老大的一个顾虑我其实也get到了,也许他认为卡片结构并不能把web表格中的那些花花绿绿的style体现出来,我认为首先可以通过合理的设计以适合于移动端的方式来呈现这些style想要表达的内容。其次,毕竟给一个坦克加上一个翅膀让他看起来像飞机本身就有点不伦不类。
好了,说了这么多,我要继续去研究这个第三方表格框架了,和ionic3兼容以及和我们项目业务整合还有一点小问题
BTW, Ionic3中也有Grid,但是这个Grid并不是我所说的表,我说的表结构用英文表达应该是datatable更准确。Ionic中的grid其实按照我的理解更偏向于一种table layout,中文应该叫栅格,它并不提供一些真正表格的api,比如说分页,行列固定,过滤,排序等等。。这也是为什么我们不得不另找框架的原因。
- 偷偷吐槽:为什么表格结构不是移动优先(Why datatable is not mobile first style)
- 如何创建mobile-first(移动设备优先)的响应式的网站
- MOBILE FIRST: HOW TO APPROACH MOBILE WEBSITE TESTING? 移动优先:如何处理移动网站测试?
- Why RequestContext is not working?
- Why echo is not portable
- Why C++ Is Not “Back”
- Expression is not assignable (OC为什么不能直接修改结构体属性)!
- Why Schduler function is not called?
- Why is .innerText not working in Firefox?
- unity mobile First Person Controls not work
- 移动优先》作者:为什么移动如此重要?
- Why Cloud Computing is the Future of Mobile
- 14-scale is not infinite(扩展不是无限的)
- boost compressed_matrix retrieve style is not random
- Why The Future Of Digital Security Is Open(为什么数字安全的未来是开放)
- 推荐TED演讲:20岁光阴不再来(Why 30 is not the new 20)
- UVa 839 Not so Mobile (树的深度优先搜索)
- 为什么有时候 LD_LIBRARY_PATH 不起作用(Why LD_LIBRARY_PATH is bad)
- 插入排序法:ALDS1_1_A:Insertion Sort
- 使用 traceback 获取详细的异常信息
- jQuery插件Cloud Zoom放大镜效果
- java字符集
- c语言高级指针理解及应用(上)
- 偷偷吐槽:为什么表格结构不是移动优先(Why datatable is not mobile first style)
- MS sqlserver数据库恢复出错 database is in use can not be restored
- C++面试题 sizeof
- int *pa(指针)和int *&pa(指针的引用)的区别
- Linux基本命令
- 【机房】问题-子窗体被覆盖
- 3DEC用户手册-关于稳定性系数-翻译
- 01-大话程序猿眼里的高并发
- html5 制作游戏