「 B 端產品當中，是先有移動端還是桌面端？」
這個問題一直困擾著很多 B 端人。一方面在國內的產品當中，你會發(fā)現大家都有移動端，因此就會考慮自己是不是也需要做移動端；另一方面，移動端在國內的市場環(huán)境當中更為“重要”[1]。
[1]因為移動端在國內用戶基礎非常的大
而面對上面的問題，我的答案還是桌面端。那作為移動端是不夠重要？今天我們就來聊聊 「B 端產品的移動端設計」
既然要說移動端，我們必須得說說移動端的重要性。
如果我們去參考國外軟件的發(fā)展史，發(fā)現它們已經發(fā)展了非常多年，但是他們并不重視移動端，因為很多軟件即使到了現在，仍然沒有移動的版本出現。
而我們把目光聚焦到國內，為什么國內 B 端產品會如此在意移動端？主要有幾點原因：
在一家企業(yè)當中，肯定要為員工提供工作設備，現在一部手機的價格非常的低，便宜的功能機應該在 500 元左右，而采購一整套電腦的成本則需要 3000+ 元，因此企業(yè)的購機成本更低。
當然更有甚者，一些“聰明”的企業(yè)，會去詢問員工是否有備用機，還可以“白嫖” 員工的設備來降低成本。
比如 超市推銷人員、倉儲物流人員、快遞驛站配貨員，很多都是老板白嫖員工的設備，進而降低費用成本。
在國內，移動設備的普及率非常的高。從Newzoo《2021全球移動市場報告》中顯示，全球目前智能手機的用戶已經超過40億，中國以9.54億的智能手機用戶總量居首，普及率是66%。
上到幾歲的小孩，下到七八十歲的老年人，會使用的智能手機。
對于電腦的普及率，國內則在 27.4%-35.0% 之間，所以你會發(fā)現身邊有非常多的中老年人，他們會使用手機但不會用電腦。
這也就導致了不同用戶之間，學習難度會有非常大的差異。
舉一個例子，比如我父親是在最近兩年，因為工作的原因才慢慢學會如何編輯 excel 以及打印文件，對于他來說是非常有成就感的一件事，同時也從側面反映它的學習難度。
國內的移動互聯網生態(tài)已經非常成熟，我們日常的衣食住行都能夠在手機上解決，有很多人也想著能不能把工作也放在手機上完成，所以會出現大量的移動端的產品出現。甚至在很多時候，項目之初就要考慮移動端與桌面端的整個產品線。
關于移動端的設計，我們要去了解桌面端與移動端之間的差異。
設備形態(tài)上，由于桌面端與移動端的差距過大，也就導致了我們在設計的過程當中，需要考慮硬件的差異對設計造成的影響。那關于這一部分我們在之前的文章當中就已經講過，這里就只是進行簡單總結。
桌面端：鍵盤錄入、攝像頭模糊、橫屏，屏幕大、
移動端：軟鍵盤、攝像頭清晰、錄音清晰、豎屏，屏幕小
在設備形態(tài)當中，不同的設備方式都會為我們設計帶來非常大的差異，因此其實移動端與桌面端最大的差別便是由于設備形態(tài)差異過后，造成的影響，比如使用場景。
作為一個設計師，我們無時無刻都要去考慮場景，而這兩個設備的差異也造成使用場景上會發(fā)現變化。關于兩者區(qū)別，我們用兩句話來概括：
桌面端因為它設備沉重，所以只能在固定的場景當中；因為它擁有鍵鼠，所以能夠高效精準的操作；因為它支持多窗口，所以可以多線程、復雜的去處理任務，所以桌面端是更適合工作去使用的設備。
移動端因為它設備輕盈，所以我們能夠在移動的場景當中使用；因為它只能使用手指交互，所以無法精準操作；因為它只能展示單一窗口，所以只支持單一線程去處理任務，所以移動端更適合碎片化、娛樂的場景當中使用。
關于設備形態(tài)和使用場景上的差異，我們可以舉一個例子，現在幾乎所有的移動端軟件（涉及到信息閱讀的產品），都會提供浮窗的功能。
而這個功能最主要的目的就是優(yōu)化移動端單一窗口，滿足用戶的碎片化閱讀，拓寬其使用場景。
這里我們留了一下小小的作業(yè)，為了讓大家了解其差別，現在問你這樣一個問題：“語雀的移動端與桌面端到底存在什么差別？” ，大家可以掃碼提交一下自己的答案~由于上面的各種特性，因此使用移動端時，我們的目的主要有三個：閱讀數據、輕量操作、快速新建。閱讀數據：主要就是在手機上能夠快速進行簡略信息的查看，比如很多指標圖、條形圖，我能夠通過手機快速了解。并且在員工的工作當中，他還可以關注自己的當前任務，需要完成的內容 等等...移動端滑動查看信息會比桌面端滾動屏幕閱讀信息更為聚焦，因此閱讀數據是非常重要。輕量操作：因為閱讀數據完成后，肯定會存在數據不匹配的情況，因此數據當中我們需要對其進行輕量化的操作，簡單來說就是少量字段的編輯場景。 比如我在進入到一個頁面信息后，發(fā)現數據不太正確/有些數據需要補充，我就會將我知道的信息補充到頁面當中。這樣移動端就不是一個雞肋的產品形態(tài)，更多是一個輕量操作場景的補充。快速新建：在使用目的當中，我們最后會去考慮新建，因為新建使用的頻率本身不高。但是在系統(tǒng)當中，新建不能沒有，因為創(chuàng)建一個信息，最主要的內容是信息本身的字段數量會不會很多。如果比較少，那優(yōu)先移動端；不然反之。那對于移動端的設計，我們究竟要如何理解、如何下手？我們就必須得去理解 界面映射、架構調整、優(yōu)勢利用。簡單來說映射就是要去考慮不同設備間，相同功能究竟應該如何處理。可以簡單的將其理解為一致性，因為相同內容在同一頁面當中，同一元素的差別不能太大，因此可以通過映射的方式將其設計。在頁面當中，映射主要分為四類：圖形映射、字段映射、功能映射、頁面映射。圖形映射就是將頁面當中的圖形內容保持一致，這個看上去很簡單，但是能夠做到的人真的不多。究其原因，主要是圖形當中涉及到的元素實在太多。- 顏色一致：在頁面當中，假設出現相同的 標簽顏色，我們就要確保桌面端與移動端設計顏色的一致，這是設計當中的基礎底線。- 圖標一致：同樣的圖標但是在不同的設備上會存在較大差異。首先是桌面端，假設我們的圖標設計為下圖。那也就意味著即使在移動端，因為頁面風格需求，圖標設計存在些許差異，但是圖標的主圖形一定要保持一致，這樣才能夠擁有一致的圖形風格- 元素一致：元素的一致性主要是表達在設計內容上，我們要考慮通過的內容結構與形式。比如頁面的分割線、小的內容元素時，要盡可能的保持一致。在功能上，也出現了相應的映射關系，比如在表格頁當中，我們經常使用的，排序、篩選等等，在移動端的設計往往會更加復雜。首先是排序，你會發(fā)現，移動端的頁面狹小，所以排序通常只會給出默認規(guī)則，頁面的所有排序都是按照修改時間順序來。其次是篩選，篩選在我們桌面端會涉及到各種篩選形式（常駐、自定義、高級、表頭），而回歸到了移動端后，就無法做到同等交互。因此在形式上，只能選擇以移動端的頁面設計為基礎進行優(yōu)化。比如飛書在桌面端與移動端的篩選交互上就會盡量保持一致，即使采取抽屜的形式，在結構上依舊是一致的。當然關于功能映射還會有很多問題，以及不同功能的細節(jié)處理，這就放在我們 B 端交互設計訓練營進行講解。關于頁面映射，由于內容太多，因此將其放入【不同頁面之間應該如何設計】進行講解。關于移動端與桌面端的設計當中，不同產品會存在截然不同的平臺特性，因此在移動端當中，我們需要利用其優(yōu)勢，讓產品的使用更為高效。通話也就意味著手機能夠直接撥打用戶電話，這是桌面端所不具備的功能。聽上去有點離譜，但是桌面端想要撥打網絡電話，在國內的監(jiān)管下其實是比較困難的，因此在 塵鋒SCRM 產品當中，桌面端對于呼叫電話，提示需要綁定賬號，而在手機端當中，我們則可以直接呼叫。大家別小看了這個功能，只能說在很多產品里面，這個功能非常重要。因為在移動端文字錄入非常緩慢，因此我們可以通過語音的方式進行文字的快速錄入。并且現如今語音識別技術的成熟，導致這項功能在很多地方都被普及。比如在滴答清單當中，我們可以通過語音的方式快速新建任務，又或者是在飛書當中，我們可以快速發(fā)送文字+語音的消息，讓用戶能夠快速的錄入。在移動端，獲取圖片的難度和桌面端完全不同，移動端可以輕松實現拍照功能因此衍生出來很多新的交互。為了解決移動端文字錄入緩慢的問題，我們可以采取照片OCR的形式，讀取圖片當中的文字信息，進而實現表單的快速填寫。比如在銷售易CRM產品里面我們可以快速上傳用戶的名片，去新建客戶的信息。（大家可以自行去體驗體驗）對于很多B端系統(tǒng)來說，消息推送是一個非常嚴重的問題。因為常規(guī)的網頁端，我們只能夠通過聲音+標識的方式來提示用戶：「你有一條信息需要處理。」如果是緊急的任務，則需要短信的方式來提示用戶，這對于企業(yè)來說本身就是一件需要花費成本的事。因此為了解決這個問題，我們才會去考慮設計移動端，來達到消息的快速推送。那如果你們沒有移動端怎么辦？這里也提供一個小的解決辦法，我們可以考慮采取 微信訂閱號 的方式來推送企業(yè)的消息。這樣就能夠保證用戶能快速觸達他所關心的消息內容。
對于特殊的頁面，能夠通過重力感應，查看更多細節(jié)。比如在一個表格頁面當中，因為橫向的寬度限制導致內容無法正常查看，因此可以提示用戶，可以橫屏瀏覽，通過重力感應進而優(yōu)化用戶閱讀體驗。這是移動端設計的上半部分，覺得不錯也別忘了點贊轉發(fā)~如果想要系統(tǒng)性的學習 B 端設計，了解更多產品的使用特點，不妨嘗試我們的第七期 B 端課程，課程受到很多同學的一致好評，可以掃碼了解詳情。
