B端AppUI設計項目的高效輸出思路分享
B端產(chǎn)品多數(shù)是用來完成公司業(yè)務的工具，是社畜們在工作時間中操作使用的對象。常規(guī)場景下，我們主要在辦公室的電腦上使用。
但隨著 B 端項目的發(fā)展和對工作場景的拓展，讓社畜們可以在其它場景直接用手機辦公的需求越來越重。比如下面這些場景，很多同學都應該深有體會。
B 端項目具備移動端是主要趨勢，但是，PC 端和移動端并不是完全一摸一樣，或者僅僅是用個響應式網(wǎng)頁來解決的。比如對比千牛、有贊、微店等平臺。
差異的產(chǎn)生，主要包含4個方面的因素：
功能的變化
結(jié)構(gòu)的調(diào)整
組件的轉(zhuǎn)化
信息的優(yōu)化
第1：功能的變化，即產(chǎn)品在遷移到移動端精簡原有的功能，并根據(jù)移動端特性增加新的小功能點。
第2：結(jié)構(gòu)的調(diào)整，主流移動端應用結(jié)構(gòu)和網(wǎng)頁不同，以底部 TAB 為一級導航所以需要做結(jié)構(gòu)調(diào)整。
第3：組件的轉(zhuǎn)化，根據(jù)移動端展示內(nèi)容的特性，將組件樣式、交互做對應的調(diào)整。
第4：信息的優(yōu)化，將字段做一定的精簡，以滿足移動端信息密度低的顯示特性。
B 端產(chǎn)品移動端化，就是一個對原產(chǎn)品項目做減法的適配過程。
設計 B 端移動端，還需要執(zhí)行下面的四個步驟：
產(chǎn)品地圖整理
交互流程設計
元素適配方案
視覺風格輸出
第一步：產(chǎn)品地圖就是產(chǎn)品的內(nèi)容結(jié)構(gòu)和層級，通過思維導圖繪制，建議設計師自己獨立去完成，通過這種過程了解產(chǎn)品的結(jié)構(gòu)，以及和原產(chǎn)品的關(guān)系。
第二步：設計對應的交互流程，B 端應用不像 C 端那么簡單，交互流程往往很長，需要我們獨立去制定交互的步驟，匹配原產(chǎn)品的流程。設計交互原型和流程演示是必要步驟。
第三步：進行元素組件的具體交互、樣式適配，前面的交互主要是長流程的處理，這步是細節(jié)組件調(diào)整。
第四步：視覺輸出，根據(jù)移動端的視覺設計要求，將內(nèi)容完整的樣式設計出來，也是相對來說難度最大的一步。
下面提供一些設計的思路：
案例1
APP 的結(jié)構(gòu)，往往會把首頁轉(zhuǎn)化成一個大型模塊入口，于是就變成了圖標排列的陣地。而這種快速入口圖標的設計，往往效果都做得非常差。
多圖標排列下，盡可能簡化圖標本身的設計復雜度，對圖標的分類進行色彩的統(tǒng)一。不要在圖標上應用過度復雜的圖形，保證它們的統(tǒng)一和識別性是第一要務。
原圖標：
調(diào)整后：
同時，快速入口并不是只有圖標一種表現(xiàn)形式，在實際設計中，我們可以根據(jù)模塊內(nèi)容、場景，豐富它們的表現(xiàn)形式。圖標強弱做對比，或者瓷片化設計，有目的性的豐富首頁視覺樣式。
案例2
對于表單頁面，一定要根據(jù)移動端的表單類型來重新整理操作流程，同時更改操作界面。比如下圖是千牛的案例。
手機端的單選、篩選、數(shù)量選擇往往通過彈窗或下級頁面來完成，我們就要在表單頁確認哪些是上級操作實現(xiàn)的，哪些是下級操作實現(xiàn)的。
同時，移動端操作中要非常注意信息類型的區(qū)分，我對原案例的層級進行了調(diào)整，通過分割線強化信息類型的區(qū)別，觀感會更好。
案例3
對于 WEB 端最常出現(xiàn)的表格來將，移動端都會盡可能的做改變，例如將每個表格數(shù)據(jù)組改成卡片樣式，不再使用表格模式，就可以完整顯示數(shù)據(jù)內(nèi)容。
如果純表格模式無法避免，那么設計表格的時候確保表格是一個獨立頁面。同時，優(yōu)先確定表格的框架和交互模式。
下圖是原表格案例：
移動端中，每個數(shù)據(jù)組內(nèi)的數(shù)據(jù)格，并不是只能放一行文字內(nèi)容，可以放多行來降低寬度。同時，對一些操作內(nèi)容可以做簡化，如文字按鈕改成圖標，或全部收縮成一個 “更多” 圖標。
比如下圖移動端化后的案例：
如果數(shù)據(jù)本身也有分頁的需求，可以將分頁欄懸浮在底部或做成 Tabbar 形式，保持持續(xù)存在，而不是滑倒底部才能切換。
如果表格本身包含二、三級子項，就盡量使用彈窗或新頁面來實現(xiàn)展開效果。在原圖表中展開過多層級不只是設計和交互的問題，會讓開發(fā)壓力大幅度增加，使用體驗極差。
想要變強么？新一期B端產(chǎn)品設計全能班開課在即，下方掃描二維碼，趕緊來聊~
