反饋已提交

網絡繁忙

如何用App的思路設計行動端報表

1. 概述

行動端報表有着隨時隨地、迅速獲取的特點,然而大部分報表工程師只接觸過 PC 端報表的製作,面對行動端報表的設計卻無從下手。

2. PC端和行動端的差別

1)交談模式:

  • PC 端:PC 端使用鍵盤、滑鼠進行互動。

  • 行動端:透過按鈕、手勢完成互動,交談模式多為點選、滑動,表現形式簡單,但是使用者感知性強。

2)顯示方式:

  • PC 端:螢幕大、內容豐富,視覺化效果好。

  • 行動端:螢幕小、可承載的內容少。

3. 行動端展現的要求

  • 手機螢幕小,如何避繁就簡,層次清晰的展現出內容。

  • 如何讓高層管理人員在手機上快速查看到關鍵資訊。

  • 千篇一律的流式佈局,想要擁有更多佈局互動模式。

  • 使用者對視覺化的要求也越來越高,更多地是追求高顏值的視覺化。

4. 解決方案

本文將簡單介紹下如何藉助 FineReport ,運用 App 的設計思路,製作一張可隨時隨地查看資料、分析資料的行動端報表。

行動端報表設計思維如下圖所示:

行動端各種佈局的介紹如下表所示:

類型

佈局

範例

頂部Tab:

導航一直存在,具有選中狀態,可快速切換另一個導航

點選上方的 Tab 實現檢視表間的切換,滿足沉浸式閱讀需求

優點:

1. 直接展示最重要API內容資訊

2. 分類位置固定,清楚當前所在入口位置

3. 減少介面跳轉的層級,輕鬆在各入口間頻繁跳轉

缺點:

功能入口過多時,該模式顯得笨重不實用



底部Tab:

相比於頂部 Tab,底部 Tab 導航更接近拇指操作熱區,更符合人機交互

優點:

1. 可見性非常好,底部 Tab 非常明顯,易於發現

2. 同時由於是在底部,操作性也非常好



Tab滑動標題:

左右滑動切換檢視表,不需要點選 Tab

優點:

單頁面內容整體性強,聚焦度高

缺點:

不能跳躍性地查看間隔的頁面


       




輪播導航(Tab點點滑動樣式):

相比於 Tab 標題滑動標題,這種方式最大程度保證了頁面的簡潔性和內容的完整性,操作方便,左右滑動切換

優點:
1. 單頁面內容整體性強
2. 線性瀏覽方式有順暢感、方向感
缺點:
1. 不適合展示過多頁面
2. 不能跳躍性地查看間隔的頁面,只能按順序查看相鄰的頁面



宮格導航:

九宮格是一種常見的功能型導航,它把功能排布出來,供使用者選擇。

優點:

清晰展現各入口,方便使用者快速查詢

缺點:

1. 選單之間的跳轉要回到初始點

2. 標題不易過長



陳列館式導航:

陳列館式導航設計差別於宮格式,在於可用來呈現實時內容(經常更新、視覺效果直覺的內容)

優點:

1. 與列表式、宮格式相比較,陳列館式表現形式、視覺效果更加豐富

2. 展示直覺,且方便瀏覽經常更新的內容

缺點:

容易形成介面內容過多,顯得雜亂



卡片式導航:

卡片以濃縮的形式提供了快速並且相關的資訊

卡片是含有圖片和文字在內的小矩形模組,它是使用者瞭解更多細節資訊的入口

優點:

每個部分的操作比較獨立,不會受到其他部分的干擾資訊,不擁擠,瀏覽體驗較好

缺點:

無法承載過多的資訊



列表導航:

當介面資訊的種類比較單一,或者只是作為資訊的連結入口時,我們可以使用列表式結構。這種結構可以高效、清晰地展示資訊,可以容納的資訊比較多

優點:

1. list列表縱向長度沒有限制,上下滑動可以查看無限內容

2. list列表在視覺上整齊美觀,使用者接受度很高

3. list列表可以展示內容長和次級文字的標題

缺點:

1. 頁面跳轉後總是從頭開始

2. 一頁展示內容過多,使用者疲勞度增加

3. 頁面重點內容不突出




摺疊式導航(又稱手風琴式):

能在一螢幕內顯示更多的細節,無需頁面跳轉

優點:

1. 兩級結構可承載較多資訊,同時保持介面簡潔

2. 減少介面跳轉,提高操作效率

缺點:

分類位置不固定,當展開的內容較多時,容易將頁面布置打亂




輪盤佈局:

半隱藏部分內容,指引使用者左右滑動察看



下拉選單式:

是一種瞬時的導航方式,即只有在我們需要的時候才會顯示出來。能讓使用者在有限的螢幕空間上做更多的動作,可以用來篩選同一資訊列表下不同類別的資訊



這裏的導航佈局模式只是一種參考,這些模式其實還有各種各樣的漸變,這裏就不逐個展開了。

當然上述的範本裏也不是只是用到單一的佈局模式,很多都是混合使用的,把一些基礎佈局進行結合做成複合形式的佈局,一般的組合會在2-3個之間。

以上是以 App 設計的思路角度對行動端範本的設計進行一些指導。在實際落地程式中,需要全局把控,從報表結構、資料選擇、主頁設計,元素搭配組合等方面着手設計。

5. 製作第一張行動端報表

介紹完運用 App 的思路打造一款行動端報表的概念後,希望您可以根據以下材料自己動手製作一張行動端報表。

  • 設計器、App: 下載地址

  • 文中使用到的範本,請前往「帆軟市場>範本」自行搜尋,下載範本: 下載地址

附件列表


主題: 行動端應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙