相信很多讀者是帶著好奇點(diǎn)開這篇文章的，對于什么是SaaS，SaaS產(chǎn)品有哪些并不是很了解，可能僅局限于聽過。包括很多正在從事相關(guān)工作的童鞋，可能也沒有一個(gè)比較清晰的認(rèn)識。

一、關(guān)于SaaS

定義：SaaS是Software-as-a-Service（軟件即服務(wù)）的簡稱。廠商將軟件部署在自己的服務(wù)器上，客戶根據(jù)自己的需求來租用軟件，無需購買和維護(hù)，廠商會全權(quán)管理和維護(hù)軟件。百度百科

分類：根據(jù)SaaS產(chǎn)品種類，可分為 通用型 和 垂直型 兩類。

SaaS產(chǎn)品分類

二、為什么要移動(dòng)化

• 隨著移動(dòng)互聯(lián)網(wǎng)的迅猛發(fā)展，用戶花費(fèi)在移動(dòng)設(shè)備上的時(shí)間越來越多，SaaS產(chǎn)品移動(dòng)化成為一種趨勢。
• 互聯(lián)網(wǎng)浪潮下長期培養(yǎng)的用戶習(xí)慣，讓用戶更傾向于通過移動(dòng)設(shè)備來解決問題。
• 移動(dòng)化辦公，信息傳遞更快更及時(shí)，加快工作節(jié)奏，提高工作效率。

三、如何移動(dòng)化

1.需求分析

SaaS產(chǎn)品移動(dòng)化，并不是簡單的將PC端的內(nèi)容照搬到移動(dòng)端，需要根據(jù)實(shí)際情況，多方面的進(jìn)行分析、評估。

需求分析--->產(chǎn)品內(nèi)容

• 用戶的實(shí)際需求。哪些內(nèi)容需要移動(dòng)化，哪些沒必要，需要進(jìn)行逐一的篩選，最好有調(diào)研數(shù)據(jù)的支持。
• 移動(dòng)端的局限性。一些復(fù)雜功能，例如報(bào)表渲染出圖，因配置的問題，出圖時(shí)間很長。可以考慮適當(dāng)?shù)暮喕a(chǎn)品功能，或做一些提醒、限制性操作等。
• 開發(fā)成本。對于一些開發(fā)成本過高的功能，前期可以考慮不上，等App上線后，再根據(jù)市場反饋，做進(jìn)一步?jīng)Q策。

2.信息架構(gòu)

根據(jù)上一步需求分析確定的“產(chǎn)品內(nèi)容”，進(jìn)行導(dǎo)航、框架的構(gòu)建與設(shè)計(jì)，最終輸出移動(dòng)app的信息架構(gòu)圖。

App信息架構(gòu)圖

3.關(guān)于平臺

• 平臺選擇
  PC端的產(chǎn)品，一套設(shè)計(jì)方案可以通吃全部。但移動(dòng)端產(chǎn)品，有多個(gè)系統(tǒng)平臺，首先要考慮的是在哪些系統(tǒng)平臺投放產(chǎn)品？
  

  從上圖可以得出，目前兩個(gè)主流的系統(tǒng)平臺是 Android 和 iOS，Windows Phone 已被市場淘汰，值得注意的是 iOS 的市場份額也在下滑。

• 市場現(xiàn)狀
  一般來說，一個(gè)移動(dòng)應(yīng)用應(yīng)該根據(jù)不同平臺的設(shè)計(jì)規(guī)范，分別展開設(shè)計(jì)。但是目前市場上，很多移動(dòng)應(yīng)用在不同的平臺上基本上都很相似，包括大廠的一些應(yīng)用（QQ、微信等），并沒有較好的遵守平臺的設(shè)計(jì)規(guī)范。
  有以下幾種可能：
  ①，學(xué)習(xí)成本。像QQ/微信是屬于裝機(jī)必備類產(chǎn)品，用戶量、用戶粘度都很大。我們的大部分社交都是在這上面進(jìn)行的，長期高頻的使用，讓我們對其功能、結(jié)構(gòu)都非常熟悉。常見的一個(gè)情景：你換手機(jī)了（另一種系統(tǒng)機(jī)型），如果新手機(jī)上的QQ/微信與之前用的差異較大，在使用時(shí)你會覺得難用、別扭，需要花時(shí)間去熟悉、適應(yīng)，增加了學(xué)習(xí)成本。
  ②，平臺規(guī)范。iOS剛推出的時(shí)候，就有比較完善的平臺規(guī)范。Android相對完整的規(guī)范則推出的比較晚，加之它的SDK版本很多，開發(fā)周期長，所以在移動(dòng)互聯(lián)網(wǎng)初期開發(fā)一款A(yù)pp，一般都是先進(jìn)iOS的開發(fā)，然后再復(fù)制到Android上。隨著用戶認(rèn)知的不斷建立，用戶習(xí)慣的持續(xù)培養(yǎng)，現(xiàn)在想改過來也很難。
  但是也有一些在遵循平臺規(guī)范上做的比較好的移動(dòng)App，像網(wǎng)易云音樂、知乎等。

• 工作現(xiàn)狀
  工作中進(jìn)行移動(dòng)應(yīng)用設(shè)計(jì)時(shí)，理想的狀態(tài)：有足夠的時(shí)間，分別Android和iOS出一套設(shè)計(jì)方案進(jìn)行開發(fā)。但現(xiàn)實(shí)往往是：時(shí)間緊，預(yù)算少，人力資源短缺，要求同時(shí)開發(fā)運(yùn)行Android和iOS設(shè)備上的App。
  此時(shí)可以考慮：
  ①，統(tǒng)一設(shè)計(jì)風(fēng)格。Android和iOS一套設(shè)計(jì)方案，節(jié)省時(shí)間，降低開發(fā)成本。
  ②，微調(diào)設(shè)計(jì)方案。設(shè)計(jì)方案出來后，根據(jù)Android和iOS平臺規(guī)范的特點(diǎn)進(jìn)行一些微調(diào)，例如一些控件可以直接用原生的（日期彈層，提示框，分享彈層等），一方面減少開發(fā)人員重新“造輪子”，另一方面也能使得App在不同的平臺上顯得自然些。

四、頁面樣式

SaaS產(chǎn)品移動(dòng)化，關(guān)于前期的準(zhǔn)備工作“東拉西扯”了很多，可能有人已經(jīng)開始頭暈了，下面開始上干貨。
關(guān)于SaaS產(chǎn)品，接觸比較多的是ERP、采購管理軟件這一塊，所以接下來會更多的拿這方面的內(nèi)容來舉例，但是方法與技巧是共通的。

1.表格

點(diǎn)擊看大圖

嘗試方案

a. 刪減字段，挑幾個(gè)重要的字段進(jìn)行展示，其它字段刪除。這樣雖然能夠較好的在移動(dòng)端展示，但卻無法滿足業(yè)務(wù)需求。
b. 加滾動(dòng)條，該方案在滿足業(yè)務(wù)功能上沒有問題。但在操作體驗(yàn)上，首先這是PC端的交互方式，不適合用在移動(dòng)端；其次，“可拖動(dòng)”的區(qū)域比較小，當(dāng)縱向數(shù)據(jù)較多時(shí)，滾動(dòng)條可能出現(xiàn)在下一屏。再者，左右拖動(dòng)是一個(gè)動(dòng)態(tài)的過程，用戶需要刻意的對拖動(dòng)前后的信息建立連系。
c. 表格顯示在一塊固定的區(qū)域。
當(dāng)左右滑動(dòng)時(shí)，最左側(cè)的一列固定且懸浮，其它列整體左右滑動(dòng)；
當(dāng)上下滑動(dòng)時(shí)，最上面的一行固定且懸浮，其它行整體上下滑動(dòng)。
該方案把表格移動(dòng)化遇到的大部分問題都解決了。但它的缺點(diǎn)是，開發(fā)成本很高，且對移動(dòng)設(shè)備的硬件也有一定的要求，特別是滑動(dòng)時(shí)可能會出現(xiàn)卡頓。

通過對a、b、c三種設(shè)計(jì)方案的利弊分析，發(fā)現(xiàn)都不是很理想?！癙C端的表格”、“移動(dòng)端的表格”、“表格很寬”、“表格字段多”、“表格信息量大”……我們的思維已經(jīng)深陷在表格的“泥潭”中再難前進(jìn)。此時(shí)需要將思維從這泥潭中“抽”出來，放下所有的包袱，重新開始。

表格是什么？表格是展示和傳遞數(shù)據(jù)信息的載體?？蓞⒁?a href="http://www.lxweimin.com/p/74283d574e95" target="_blank">《一個(gè)表格的自我修養(yǎng)》

既然是載體，也就是說在移動(dòng)端的數(shù)據(jù)信息可以采用其它更合適的載體來承載。換句話說，就是可以嘗試在移動(dòng)端采用其它的形式來展示PC端的表格信息。（在意識上突破了表格）

表格炸裂（點(diǎn)擊看大圖）

最終方案（點(diǎn)擊看大圖）

2.多字段顯示

移動(dòng)端單據(jù)詳情頁對于多字段的展示，主要有以下幾種形式：

• A類：適用于字段個(gè)數(shù)比較多的情況。使用要求：字段名長度在2~4個(gè)字之間。
• B類：適合直接展示在“首屏”的重要字段。使用要求：字段名長度在2~4個(gè)字之間。
• C類：屬于通用型的，比較適合于字段值為數(shù)字類的字段，也適合字段名長度相差比較大，在2-8個(gè)字之間的字段。
  
  多字段顯示

3.屏幕尺寸

相對于PC端的屏幕，移動(dòng)端就顯得小的多，加之SaaS產(chǎn)品的信息量也比較多，所以在設(shè)計(jì)的過程中，要特別注意“首屏”所承載的信息量，要把握好度。內(nèi)容過多，增加了用戶獲取信息的難度，內(nèi)容過少，頻繁操作，也不合適。

對于一個(gè)頁面內(nèi)的信息量（可能有多屏），也需要進(jìn)行控制。最重要的信息要第一時(shí)間呈現(xiàn)在用戶眼前，一些重要程度不高的信息，可以進(jìn)行“隱藏”（折疊）。

點(diǎn)擊看大圖

4.網(wǎng)絡(luò)狀態(tài)

網(wǎng)絡(luò)狀態(tài)，每個(gè)移動(dòng)App都需要處理的問題，主要內(nèi)容就是在不同網(wǎng)絡(luò)情況下，進(jìn)行相應(yīng)的提示與告知。主要有這幾種情況：

• 無網(wǎng)絡(luò) — 進(jìn)行網(wǎng)絡(luò)未連接或網(wǎng)絡(luò)異常提示
• 有網(wǎng)
  a. wifi — 隨意high，不用管它。
  b. 4G/3G/2G — 在下載（加載）一些比較大的內(nèi)容時(shí)，進(jìn)行告知：你這在用流量！
  c. 加載中 — 加載狀態(tài)的提示（轉(zhuǎn)動(dòng)的小圈圈、進(jìn)度條等）
  d. 加載失敗 — 失敗告知（可能是玩手機(jī)的姿勢不對哦）

結(jié)尾：

不知不覺已經(jīng)寫了這么多，還是無法將SaaS產(chǎn)品移動(dòng)化過程中的方方面面都照顧到，更多的是在傳遞思想與方法，遇到問題了，該怎么去分析問題，拿出設(shè)計(jì)方案，最后解決問題。在工作中，一定會遇到各種各樣的難題，希望本文能對你有所啟發(fā)與幫助。