整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
信在學校的你都有這樣的體驗，臨近考試，必然要瘋狂的“背誦”、“速記”，否則成績單就要掛零，因為答題卡全部涂抹并不能得高分。
那么畢業多年的你，沒有了考試，有沒有一絲懷念涂答題卡的時候，有沒有好奇這個答題卡到底如何制作，成績表到底如何為每位同學定制動態生成的。
其實，這些都要歸功于“報表”工具。
學校每年都會打印很多的學生成績單，往往因為新增的課程和不同的教學體系，導致想要的結果復雜且多變。那么如何使用一個工具就可以靈活的制作各種各樣報表，面對多變的場景，十分重要。
（答題卡）
上圖就是我們制作出來的一個答題卡報表，而且它可以根據學生數量批量加載學生的信息數據，然后直接生成并且供我們打印。那它的優勢也就顯而易見了，自己設計的答題卡，題型和題量都可以自己來選擇，靈活多變，且可以根據不同題型自己隨意更新，也可以增加很多默認數據，畢竟自己設計打印的肯定也比購買的便宜。
有些人可能就想說，自己做是不是很麻煩，而且也不會用，學起來是不是還很吃力。小編就可以自信地說了，作為手殘黨的我也可以很快制作的，但是上限卻很高，隨著越發深入的使用，帶來的經驗肯定也是越多。當你熟練制作了后，還可以關注更多的功能，不僅僅是制作顯示出來，更美觀、更多的功能才是我們的追求。
就比如下面這個報表，只需要簡單的幾步就可以實現。而且效果還不錯。
（最終效果展示）
首先我們要設計對應的報表，下面是報表設計的整體界面：
在左側是我們需要使用的組件，也就是設計報表需要的元素，中間就是顯示，最右側可以控制一些屬性設置和指定數據。這么一看就很清晰了，我們其實簡單的拖拽就可以實現所需要的報表設計，簡單方便，設計好之后可以導出下載都可以。光說這些肯定還是不夠的，那么接下來就直接上實例：
當我們統計學校不同學院的畢業信息時，可能需要根據從系統中查到數據然后拿出來，之后在自己計算所需要的數據，然后在在Excel表中一點一點的去寫，特別時數據多點，我們的工作人員可能就會因為一張表而制作一整天。畢竟制作Excel表的痛苦大家應該都知道吧，那用wyn產品怎么實現的，手殘黨福利來了：
只需要簡單的綁定需要的數據，然后把要顯示的直接拖到頁面上，然后寫幾個表達式。完成，可能本來一天的工作量，現在幾個小時就OK了，是不是很誘惑啊。可以看下面兩個圖，第一個是設計界面，第二個是預覽成果。
（設計界面）
（表格展示）
沒錯，就是簡單的綁定這么幾列數據，然后他就會根據我們數據源有的數據進行自動計算，自動擴展行展示。是不是很簡單。
那么答題卡的樣子上面大家已經看到了，那有人問了，我們學生人很多啊，我不可能真的一個一個設計吧，就算只是一直復制粘貼，也很費時間。那在怎么解決呢，很簡單這里只要綁定好數據的話，設置按人的分組，那他就會自動加載所有學生的了，而且對應的信息也對對應過來，這個時候我們打印就可以批量打印，并且不同學生顯示不同信息。這種場景其實也可以應用在很多場景下，比如打印學生的準考證，學生的成績單等等，其實都是需要批量打印的，那用這個產品就可以實現相同模板的批量打印。
除了教師使用的，當然也有學生使用的啦，就比如我們最常見的成績單。
那么針對不同學生我們需要的是不同的成績單，那這里就有個需求就是不同學生看不同的信息，自己查詢自己的成績單，自己打印自己的成績單，那其實就像當于一個篩選。針對多變且不同的課程，往往很復雜，不同學生信息不同怎么辦，那么使用wyn產品的就可以設計統一的樣式，然后我們通過參數篩選，就可以篩選出來自己的信息。比如我們通過學號查詢自己的成績單，就可以實現如下圖：
（學號篩選）
接下來給大家來點干貨分享，如何使用前端報表控件ARJS通過拖拉拽實現大學成績績效表的設計。
1、 首先我們來解析下這張報表
該表主要分為三個部分:
表頭：也是就是學生基礎信息，包括學習：姓名、學院、專業、學號、班級、學歷、畢業證號
（學生信息）
明細部分：顯示大學四年的考試績效成績，包含學期、課程名稱、學分、成績
明細部分你自己看發現其實是三個相同的模塊
（模塊細分）
表尾部分：表尾部分主要是學分的統計、平均成績、平均績點
（表尾部分）
2、 拆分完這張表之后，那么就可以根據實際需求進行報表的設計
首先給報表添加頁眉和頁腳，頁眉中通過文本框來設置表頭需要顯示的信息表頭和頁腳通過文本框來進行表尾的顯示設計。
中間內容區域，首先使用表格控件，然后利用表格控件的分組，分組條件根據綁定數據的中的數據字段學年和學期進行分組。
（表設計）
明細內容是三個相同的模塊，也就是在一個內容區域顯三個相同區域，那么這可以使用報表字段的分欄屬性來設置。
（分欄屬性設置）
3、 最終設計好的報表設計樣式
（最終效果展示）
4、 最終預覽結果：
（預覽展示）
5、 報表模板
相信能看到這里的小伙伴肯定也已經躍躍欲試了，這里我們為大家提供了多模板可以嘗試，歡迎搜索并訪問葡萄城官網，了解更多。
個頁面內顯示多個iframe，一個變寬，另一個就變窄，一個變高，另一個就變矮的這種可自由伸縮的效果。它們之間有一個可多拽的分隔條。效果圖：
<?php defined('IN_WZ') or exit('No direct script access allowed');?>
<?php
include $this->template('header','core');
?>
<body class="body">
<section id="iframecontent">
<section class="treelistframe pull-left">
<iframe width="190px" name="treemain" id="treemain" frameborder="false" scrolling="auto" height="auto" style="" allowtransparency="true" frameborder="0" src="?m=content&f=content&v=left&modelid=<?php echo $modelid.'&type='.$type.$this->su();?>"></iframe>
</section>
<section class="treelistframe pull-left">
<div id="s" style="height:100%;position:absolute;z-index:3;cursor:move;">
<img style="height:100%;position:absolute;z-index:1;" src="res/images/arrow1.png" />
<div style="height:100%;width:100%;position:absolute;z-index:2;margin-left:0px;margin-top:0px;padding:0px;filter:alpha(opacity=0);opacity:0;background-color:#fee;" id="drag"></div>
</div>
</section>
<section id="iframecontent">
<iframe width="100%" name="iframeid" id="iframeid" frameborder="false" scrolling="auto" height="auto" allowtransparency="true" frameborder="0" src="?m=content&f=content&v=listing&<?php echo $modelid.$this->su();?>"></iframe>
</section>
</section>
<script type="text/javascript">
/***
*
* iframe橫向分隔條拖拽伸縮實例
*
***/
function init(){
//alert($("#treemain").contents().find("#tree").width());
var li = $("#treemain");//left iframe
var ri = $("#iframeid");//right iframe
var s = $("#s");//中間分割條
var img = s.children("img").eq(0);
var drag = $("#drag");//分隔條中的拖拽層.
var clientWidth = $(window).width();
var li_init_width=200;//上邊iframe要顯示的寬度,若需要調整默認寬度,請改此值即可.
var s_init_width=5;//分隔條寬度默認值
var ri_width=clientWidth-li_init_width-s_init_width;//底部iframe要顯示的寬度
//初始化
li.css("width",li_init_width+"px");
ri.css("width",ri_width+"px");
s.css("left",li_init_width+"px").css("width",s_init_width+"px");
img.css("width",s_init_width+"px").css("box-shadow","0 0 2px #666");
var is_drag = false;//是否點住并進行了拖拽
/***
* 分隔條事件處理,如果用戶執行了mousedown,mousemove,mouseup說明是拖拽,
* 如果只執行了mousedown,mouseup說明是點擊.
*/
drag.unbind("mousedown").mousedown(function () {
//獲得分隔條內拖拽層離頂邊的距離
var li_width = parseInt(li.css("width"));
var ri_width = parseInt(ri.css("width"));
//分隔條div寬度設為100%,撐滿屏,只有這樣才能在拖拽分隔條時,有效的控制mouseup事件.
s.css("width","100%").css("left","0px");
img.css("left",li_width);
var start_x = event.clientX;
drag.unbind("mousemove").mousemove(function (event) {
is_drag = true;
var current_x = event.clientX;
var cha = current_x - start_x;//算偏移差量
li.css("width",(li_width+cha)+"px");
ri.css("width",(ri_width-cha)+"px");
img.css("left",(li_width+cha)+"px");
});
drag.unbind("mouseup").mouseup(function (event) {
var left = parseInt(img.css("left"));
s.css("width",s_init_width+"px").css("left",left+"px");
img.css("left","0px");
//處理非拖拽的click情況
if(!is_drag){
//直接設定固定值
var src=img.attr("src");
if(src.indexOf("toleft")!=-1){
li.css("width","0px");
s.css("left","0px");
clientWidth = $(window).width();
ri.css("width",(clientWidth-s_init_width)+"px");
img.attr("src",src.replace("toleft","toright"));
}else{
li.css("width",li_init_width+"px");
s.css("left",li_init_width+"px");
clientWidth = $(window).width();
ri.css("width",(clientWidth-li_init_width-s_init_width)+"px");
img.attr("src",src.replace("toright","toleft"));
}
}
drag.unbind("mousemove");
is_drag = false;
});
});
//當窗口大小發生改變時,重新渲染頁面,以使各組件自適應高寬度.
$(window).resize(function() {
//頂部iframe保持高度不變,改變底部iframe高度
var clientWidth = $(window).width();
var li_width = parseInt(li.css("width"));
var new_ri_width = clientWidth - li_width - s_init_width;
ri.css("width",new_ri_width+"px");
});
}
/***
* 加載左邊頁面方法
* 當右邊頁面先加載完后再加載左邊頁面,因為左邊頁面需要控制右邊頁面里的iframe
* 如果右邊頁面還沒加載完,則會出錯,左邊頁面也會加載失敗.
*/
function loadLeft(){
$("#li").attr("src","exam/left.html");
}
$(document).ready(function(){
init();
});
</script>
<script src="<?php echo R;?>js/bootstrap.min.js"></script>
<script src="<?php echo R;?>js/contentiframe.js"></script>
</body>
</html>
輯導語：雖然國內軟件的iPad用戶占比不大，但依然存在著橫屏適配的需求。本文作者講述了自己做iPad橫屏適配的背景，并對競品的適配方式進行了分析研究，用自己的親身經歷提供了參考，推薦對ipad橫屏適配感興趣的童鞋閱讀。
在我參與的一款資料查詢 App 中，對 iPad 只支持豎屏以手機 UI 尺寸拉伸，每個季度都有用戶反饋希望適配 iPad 橫屏。經過詢問用戶發現，因為 iPad mini 尺寸剛好可以放在工作服口袋中，隨時拿出來使用，而 iPad 屏幕遠比手機大，瀏覽資料視野更大更舒服。
但另外一方面，后臺數據顯示當前 iPad 用戶占比只有 1%，用戶呼聲夠不上星星之火，不足以燎原。先別談說服團隊做 iPad 橫屏適配，連說服自己都難。本來以為這事就像水中投石，水波消散就沒有下文了。直到有一天，同樣是資深用戶的高管自己拿著 iPad 裝上我們的 App 用了幾天，終于忍不了，開始推動 iPad 橫屏適配。
我們肯定不是第一個做 iPad 橫屏適配的，但在網上搜了一圈，別說橫屏適配，連 iPad 界面設計的文章都很少，下面 3 篇算不錯的。這也是我決定寫下本文的原因，為后來者提供經驗，少踩坑。
沒得經驗參考就只能先從競品分析開始了。經過對 iOS 系統應用、微信、QQ、微信閱讀、得到、豆瓣、淘寶和有道詞典的分析，我和同事總結成 5 種橫屏適配模式。
典型 App：iOS 應用商店
特征：標題欄和 Tabbar 通欄拉伸，內容區根據寬度向右響應式布局。
適用場景：全部場景。
評價：靈活性和用戶體驗都很好，但設計和開發成本很大。
典型 App：iOS 設置、淘寶、微信、QQ
特征：左右分開顯示，左邊通常固定顯示首頁或者目錄導航。右側根據左側選擇顯示對應的詳情內容。
適用場景：頻繁需要使用導航切換內容。
評價：用戶體驗適中，合理的利用橫屏更大地展示更多的內容。設計成本小，需額外設計一個右側默認為空的情況。開發成本要看是否改程序架構，相當于把手機兩個手機界面合并成一個屏幕，可能有些程序架構很難這么修改。
典型 App：微信閱讀
特征：標題欄和 Tabbar 通欄拉伸，內容直接按豎屏的寬度顯示。
適用場景：全部場景。
評價：用戶體驗適中，設計與開發成本小，大多數產品采用此模式，但是沒有更好的展現橫屏寬屏的優勢。
典型 App：豆瓣
特征：橫屏為全屏通欄拉伸，所有元素與豎屏一致。
適用場景：全部場景。
評價：設計和開發成本最小，但是相當于沒有適配。用戶體驗較差，橫屏情況下內容集中，左側右側很空，或者被拉得很長，閱讀體驗較差。
當然也不是所有 App 都采用單一的模式。比如微信閱讀，在其他頁面是按豎屏寬度顯示。但到了圖書閱讀界面，則是左右分欄充分利用 iPad 大屏幕展現內容。
以上競品分析所有截圖我們都保存在 Figma 中，有需要的讀者可前往獲取。
鏈接：https://www.figma.com/community/file/1071850659054902697/iPad-橫屏適配競品分析
非常遺憾的是雖然高管牽頭做適配，但開發資源確實有限。不能為了設計師邀功拿業績就從頭把 iOS App 重構一遍，因此我們決定用最少的資源做最核心的優化。
適配計劃分為 2 期。第 1 期將所有頁面用按豎屏寬度顯示進行橫屏適配。第 2 期挑選核心頁面用內容響應式或左右分欄進行優化。
在第 1 期我們就踩坑了，按照原來的工作流程，我們將所有的 iPad 橫屏頁面做好線框圖、再輸出所有視覺效果圖。雖然都是線上頁面不用重新設計，只需要拉伸畫面或者調整間距，但所有線上頁面也是一個不小的工作量。
就在進行過程中，iOS 工程師就皺著眉頭來提議，由于代碼架構和資源所限，設計師如果調整的視覺效果圖未必能 100% 實現。不如反過來，讓他先把所有頁面強行橫屏，再由設計師走查發現問題進行修改，這樣節省時間效果也可控。
可見，不同的項目類型可以采取不同的工作流程。iPad 橫屏適配項目流程和常規工作流程剛好相反，以往是先設計再開發，改成先開發再走查，節省設計師產出效果圖時間，也保障最終實現效果。
在第 2 期挑選核心頁面時，我也犯了錯誤。最開始我覺得核心是臉面，因此挑選 Tabbar 導航的首頁、個人中心等用戶一打開 App 就看得到的頁面進行優化。但實際上用戶真正的核心使用場景是在詳情頁查閱資料，這才是真正的核心頁面。
在得到主管糾正后，我們轉而開始為資料閱讀頁面提供左內容右目錄的布局，便于用戶方便地在長文中精確定位想讀的內容。
2 期計劃并非適配的終結，隨著 App 功能的迭代，此后老界面修改和新界面設計需要考慮到 iPad 橫屏的適配問題，就成為了日常工作的內容了。
按照以往的項目總結，最后應該匯報項目數據結果。但由于 iPad 用戶本身可憐的占比，即使我們官方公眾號推文宣布適配 iPad 橫屏后，也沒有 iPad 用戶站出來點贊，而是又引發出使用華為、小米等安卓 Pad 的用戶，要求也適配。
考慮到不同的安卓品牌適配方式不一樣，而且安卓廠商自己又有平行世界等通用兼容方案，我們就沒再繼續參與了。
雖然沒有外部用戶反饋，但公司內部同事和開發團隊使用后確實感覺很棒。所以我覺得這次適配項目真正值得思考的是：如果一個需求用戶反饋很少，也沒有數據支撐，但對體驗影響很大，如何推動團隊進行優化呢？
作者：龍爪槐守望者，微信公眾號：龍爪槐守望者
本文由 @龍爪槐守望者 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
