標(biāo)簽: ui 界面設(shè)計(jì) 設(shè)計(jì)流行趨勢(shì) 社交APP

1.遙望app

1.視覺設(shè)計(jì)

遙望app的設(shè)計(jì)在整體上的風(fēng)格化很強(qiáng)，有自己的獨(dú)特性。為了讓用戶之間的粘性更好，更是在活動(dòng)上、動(dòng)效上花了很多心思，給用戶帶來很多有趣且良好的體驗(yàn)，讓我?guī)闳ンw驗(yàn)一下吧

2.設(shè)計(jì)語(yǔ)言

整個(gè)app的設(shè)計(jì)語(yǔ)言貫穿了星形、圓形和三角形 ，同時(shí)增加上面三種圖形的線性來點(diǎn)綴設(shè)計(jì)。tab圖標(biāo)是圓形和三角形的排列組合，同時(shí)增加線的形式點(diǎn)綴其中，層次更加豐富。其他頁(yè)面的設(shè)計(jì)也是同理，通過將上面3種圖形排列組合，貫穿到整個(gè)頁(yè)面，設(shè)計(jì)語(yǔ)言十分統(tǒng)一。

3.空界面設(shè)計(jì)

空界面的設(shè)計(jì)運(yùn)用手的動(dòng)作將每個(gè)頁(yè)面的情緒感拉的滿滿的，在互動(dòng)消息的版塊，從關(guān)注到@我，每一個(gè)頁(yè)面通過不同的情緒表達(dá)方式極大了緩解了用戶的焦慮，同時(shí)也增加了一些趣味性。

4.勛章設(shè)計(jì)

勛章是根據(jù)你的確幸值的多少，等級(jí)的高低，送禮物的多少，以及你在平臺(tái)的表現(xiàn)會(huì)給你發(fā)放不同的勛章，以此讓用戶享受到尊享和定制的感覺，增加用戶的參與感和在平臺(tái)的粘性。

2.動(dòng)效設(shè)計(jì)

遙望app的動(dòng)效設(shè)計(jì)也是十分的流暢和有趣，線性的風(fēng)格特征的插畫、溫暖的文案和趣味的動(dòng)效，帶來的絲滑體驗(yàn)感十分強(qiáng)烈。

1.匹配器

遙望app首頁(yè)上面的頭像是匹配器，隨著頭像慢慢的流過,頭像旁邊還有對(duì)話框彈出介紹用戶的信息，點(diǎn)擊會(huì)有兩只手彼此召喚，再點(diǎn)擊幸會(huì)就可以和其他的朋友打招呼了。在匹配器下面的“遙望一下”點(diǎn)擊也可進(jìn)入到好友快速閃過的頁(yè)面，點(diǎn)擊可以同樣到打招呼頁(yè)面，多個(gè)入口引導(dǎo)用戶相互吸引從而形成社交動(dòng)機(jī)。

2.下拉加載

加載的動(dòng)態(tài)效果加入了遙望的IP形象，一個(gè)是像地球一樣的自轉(zhuǎn)，一個(gè)是像風(fēng)箏一樣在天空飛的效果，動(dòng)態(tài)十分流暢且有趣。

3.記錄心情

記錄心情這個(gè)是個(gè)很有趣的設(shè)計(jì)細(xì)節(jié)，在記錄心情發(fā)表后，在查看心情的小罐子里就能夠看到你的心情小表情，并且還有心情占比、情緒波動(dòng)分析，最后在日歷上還能看到每日心情的狀態(tài)，可以很好的記錄每日的心情。

查看心情

3.彩蛋設(shè)計(jì)

1.放個(gè)氣球

放個(gè)氣球把心情寫進(jìn)氣球發(fā)送出去，可以抒發(fā)自己的情緒。同時(shí)，你想自己接收就可以點(diǎn)收一個(gè)，出現(xiàn)氣球動(dòng)效加載，就會(huì)接收到別人發(fā)出的信息，不想要了，可以點(diǎn)放飛消息就沒有了。

收氣球

2.發(fā)射泡泡

雖然泡泡這種形式很常見，但是遙望在細(xì)節(jié)處做的設(shè)計(jì)還是很用心，很容易觸動(dòng)用戶。發(fā)射泡泡很容易讓然想到泡泡相機(jī)，加上“biubiu”的音效，有很強(qiáng)的場(chǎng)景感。

2. 配配app

1.視覺設(shè)計(jì)

配配app的設(shè)計(jì)可以說是以IP形象為切入的設(shè)計(jì)，app里面有著各種各樣的表情和動(dòng)勢(shì)，生動(dòng)且逗比。而且配配在設(shè)計(jì)的時(shí)候會(huì)融入很多小的細(xì)節(jié)，也能帶給我們很多不一樣的感受。整個(gè)ip融入可以說做的很徹底，能夠讓用戶的品牌感知十分深刻。

2.文字字體

貼貼功能用了一個(gè)超大的特殊的文字字體設(shè)計(jì)，十分醒目，在瀑布流的頁(yè)面對(duì)用戶的信息區(qū)分的比較清楚，但是對(duì)于用戶的照片也形成了遮擋，有的時(shí)候并不是很好。發(fā)布貼貼的超大字體的設(shè)計(jì)很少有人這么設(shè)計(jì)，雖然看起來粗糙，但是卻與眾不同。

3.品牌融入

配配app讓人印象比較深刻的就是這個(gè)IP的形象了，在頁(yè)面的各種地方都能看到他，無論是在催促你、還是在悠閑的吃東西，還是舉起手或是一起打call，哪里都少不了它。它的設(shè)定非常生活化，也很貼近我們的日常，所以這樣才更夠親近。

2.動(dòng)效設(shè)計(jì)

1.點(diǎn)亮

點(diǎn)亮設(shè)計(jì)就是點(diǎn)擊后，寫下一個(gè)故事就可以和其他用戶打招呼了，點(diǎn)亮后燈泡會(huì)發(fā)出光，然后有星星散落下來，將表情運(yùn)用在按鈕上也是很新穎的設(shè)計(jì)方法了。

2.發(fā)布動(dòng)態(tài)

發(fā)布動(dòng)態(tài)的功能IP會(huì)向你招招手，引導(dǎo)用戶參與發(fā)布動(dòng)態(tài)。

3.動(dòng)態(tài)背景

配配的動(dòng)態(tài)背景很有意思，打call、吃蘋果、打盹，根據(jù)不同用戶展示不同的動(dòng)態(tài)背景。

3.糖果app

糖果app的設(shè)計(jì)在于匹配器和其他的很與眾不同，像是在一起炫舞的樣子，看起來很有場(chǎng)景感。糖果app的整體視覺風(fēng)格比較中規(guī)中矩，

不過有一些的功能設(shè)計(jì)和設(shè)計(jì)小細(xì)節(jié)值得體驗(yàn)一下。

1.廣場(chǎng)匹配器

糖果的首頁(yè)的匹配器設(shè)計(jì)是一群人在廣場(chǎng)上一起炫舞，然后各自擺著不同的怪異的姿勢(shì)，設(shè)計(jì)上十分新穎。

2.戀愛上上簽

戀愛上上簽就像我們?nèi)ニ聫R里求姻緣一樣，通過搖晃簽子就可以找尋到好姻緣。罐子上的表情左看看右看看然后閉上眼睛，最后終于連接上一個(gè)十分匹配的好友。

3.解憂罐子

解憂罐子就是把心情放在罐子里，發(fā)送出去，別人可以看到你的罐子，然后你自己也可以做罐子發(fā)送給別人。

4.無聊嗶嗶雞

無聊嗶嗶雞就是一只雞不停的晃動(dòng)，可以發(fā)送一句消息直接可以連接到好友。

4.Blurrr app

Blurrr app是一款功能強(qiáng)大的視頻剪輯軟件，Blurrr雖然是一款工具軟件，但是在配色和設(shè)計(jì)上還是十分大膽，熒光綠的顏色和黑色的結(jié)合，十分亮眼，里面的動(dòng)效也十分細(xì)膩，非常吸引人的眼球。

引導(dǎo)頁(yè)的設(shè)計(jì)用多彩的圖形設(shè)計(jì)+表情+動(dòng)效設(shè)計(jì)的方式，打造了靈動(dòng)的引導(dǎo)頁(yè)設(shè)計(jì)，形成了自己很獨(dú)特的風(fēng)格。

一、Photoshop(Beta)版本安裝

PS的AI功能需要在Beta版本中才能使用，安裝過程很簡(jiǎn)單，可以從下列這個(gè)網(wǎng)址前往Adobe官網(wǎng)下載Photoshop(Beta)版本：

https://helpx.adobe.com/cn/photoshop/using/generative-fill.html

點(diǎn)擊「試用」按鈕，會(huì)調(diào)起電腦中的Creative Cloud應(yīng)用，正常來說大家電腦里有Adobe軟件一般都會(huì)有Creative Cloud，沒下載的話按提示下載就可。

在Creative Cloud中找到①Beta應(yīng)用程序，點(diǎn)擊②安裝按鈕，再點(diǎn)擊③打開按鈕，就可以啟動(dòng)Beta版PS啦！(我這里已經(jīng)安裝過，所以直接顯示了安裝按鈕)

Beta版PS白色的logo和有趣的啟動(dòng)頁(yè)面??

二、AI創(chuàng)意填充功能

Midjourney生成的圖默認(rèn)是方形，主體位于畫面的中央。如果我們想把主體的位置移到畫面左側(cè)或右側(cè)，需要花費(fèi)很大的精力，而PS(Beta)的AI創(chuàng)意填充功能可以很好解決這個(gè)痛點(diǎn)問題！

下圖是在Midjourney中生成的例圖，人物在畫面的正中間，關(guān)鍵詞描述：

「A portal to another dimension, with a blonde woman dressed as space girl, cyber punk style, hyperrealism, 4k, natural light. --v 5.1」

如果我想在不摳像、不變形拉伸的情況下，把圖片變成橫版尺寸，并把人物移到畫面右邊，需要在PS(Beta)中怎么操作呢？

① 先把例圖拖到PS中，用[C]裁剪工具在畫布左邊拉一個(gè)空白。

② 切換到[M]選框工具，框選剛才拉出的空白畫布，下方會(huì)出現(xiàn)一個(gè)工具欄。

③ 點(diǎn)擊工具欄的第一個(gè)「創(chuàng)成式填充」按鈕，進(jìn)入到AI創(chuàng)意填充功能。

PS的創(chuàng)意填充看起來很像把Midjourney的輸入框移植到PS中，但功能上又和Midjourney不太一樣：

·PS的輸入框沒有復(fù)雜的指令，只需要輸入關(guān)鍵詞描述，就能夠在選區(qū)內(nèi)生成想要的內(nèi)容；

·支持不輸入內(nèi)容，直接點(diǎn)擊「生成」按鈕，AI會(huì)根據(jù)畫面周圍的內(nèi)容智能填充選區(qū)。

三、不輸入內(nèi)容直接生成

第一次體驗(yàn)我沒有輸入任何內(nèi)容，直接點(diǎn)擊PS的「生成」按鈕，一次能生成3張圖片。點(diǎn)擊左右箭頭可以切換查看3張圖，如果覺得不滿意可以再點(diǎn)擊「生成」，再生成3張?zhí)畛鋱D。

效果圖1??

效果圖2??

效果圖3??

第一次測(cè)試生成的圖片效果遠(yuǎn)超出預(yù)期，和原圖風(fēng)格也很接近，唯一不足的地方是和原圖拼接處有一條白線，看起來有點(diǎn)礙眼。

經(jīng)過多次嘗試后，終于發(fā)現(xiàn)了問題所在：如果框選時(shí)剛好只選取了空白畫布，生成出來的新圖和原圖之間就會(huì)產(chǎn)生明顯的接縫。簡(jiǎn)單高效的解決方式是在框選畫布的時(shí)候多框一點(diǎn)點(diǎn)原圖。

這樣再點(diǎn)擊「生成」按鈕，運(yùn)算出來就會(huì)有很完美的過渡，看不出破綻。

四、輸入關(guān)鍵詞描述

體驗(yàn)完不輸入關(guān)鍵詞直接生成后，接下來體驗(yàn)一下輸入關(guān)鍵詞描述后生成的圖片效果如何～這次使用同樣的方法在例圖右側(cè)先拉出一個(gè)空白畫布，輸入關(guān)鍵詞描述：

「Particle effect, sense of technology」

生成的圖片效果很棒，和原圖完美地融合在一起，不得不服啊太厲害了！

效果圖1??

效果圖2??

右側(cè)的屬性欄會(huì)記錄你剛輸入的關(guān)鍵詞，可以隨時(shí)修改關(guān)鍵詞，點(diǎn)擊再次生成3張圖，依次類推，生成的所有圖都會(huì)保留下來，方便選擇。

最后

通過這次體驗(yàn)感覺PS的AI填充非常強(qiáng)大，而且效果很精準(zhǔn)，誰(shuí)能想到在PS中就能完成對(duì)一張圖的拉伸和智能填充。

在大數(shù)據(jù)盛行的今天，人們不僅僅講究以事實(shí)說話，更愿意以數(shù)據(jù)講話。數(shù)據(jù)作為結(jié)果的直接衡量指標(biāo)，更真實(shí)、也更具有說服力，那如何直觀的展示數(shù)據(jù)，幫助決策者做出正確決策或行動(dòng)，發(fā)揮數(shù)據(jù)最大的價(jià)值？可視化數(shù)據(jù)大屏應(yīng)運(yùn)而生，讓我們一起來談?wù)劙?

一、可視化數(shù)據(jù)大屏是什么？

說到數(shù)據(jù)大屏的時(shí)候，我們要先了解一下數(shù)據(jù)可視化，那什么叫做數(shù)據(jù)可視化呢？比較專業(yè)的解釋是利用計(jì)算機(jī)圖形學(xué)和圖像處理技術(shù)，將數(shù)據(jù)轉(zhuǎn)換成圖形或圖像在屏幕上顯示出來，并進(jìn)行交互處理的一種理論、方法和技術(shù)，它為我們研究、處理、分析數(shù)據(jù)提供了理論依據(jù)。

我們?nèi)说拇竽X處理視覺信息的速度比文字快幾萬(wàn)倍，將抽象的數(shù)據(jù)轉(zhuǎn)化成圖表、圖形能更快速幫助我們更快理解數(shù)據(jù)中的含義，趨勢(shì)以及相關(guān)性。

簡(jiǎn)單來說，可視化數(shù)據(jù)大屏，將我們難以理解的抽象的數(shù)據(jù)概念以圖形化的形式展現(xiàn)，方便我們快速理解這些數(shù)據(jù)的含義，也方便這些重要的信息在最短的時(shí)間內(nèi)傳給最重要的人。

數(shù)據(jù)大屏可分為信息展示類、數(shù)據(jù)分析類、監(jiān)控預(yù)警類，多展示酷炫的效果，數(shù)據(jù)之間有層次區(qū)分，好的數(shù)據(jù)大屏是布局、色彩、圖表、動(dòng)效的綜合運(yùn)用。

二、可視化數(shù)據(jù)優(yōu)勢(shì)是什么？

數(shù)據(jù)可視化，讓很多員工從繁瑣復(fù)雜的數(shù)據(jù)工作中解脫過來，那它到底有什么優(yōu)點(diǎn)呢？

優(yōu)點(diǎn)一：解鎖大數(shù)據(jù)內(nèi)容的關(guān)鍵

近幾年來，國(guó)家的相關(guān)法律政策相繼出臺(tái)，大數(shù)據(jù)企業(yè)的技術(shù)研發(fā)水平不斷提高，促使大數(shù)據(jù)行業(yè)市場(chǎng)規(guī)模從 2014 年的 212.5 億元增長(zhǎng)至 2020 年的 548.5 億元，數(shù)據(jù)可視化對(duì)于公司發(fā)現(xiàn)解鎖數(shù)據(jù)潛在價(jià)值意義重大。

有研究表明，人類可以用比處理文字快60000倍的速度來處理圖像，可視化能直觀呈現(xiàn)大量數(shù)據(jù)，以前企業(yè)員工檢測(cè)到數(shù)據(jù)進(jìn)行匯總分析需要數(shù)小時(shí)，可視化通過特定的格式來呈現(xiàn)大量數(shù)據(jù)幾乎不費(fèi)時(shí)間。

優(yōu)點(diǎn)二：數(shù)據(jù)可視化加快了決策過程

視覺形式的數(shù)據(jù)更易理解，數(shù)據(jù)可視化能快速顯示操作、運(yùn)營(yíng)與結(jié)果之間的關(guān)系。企業(yè)管理不是憑空作決定，正確的方式應(yīng)該是，依據(jù)所獲得的數(shù)據(jù)信息來做輔助分析，數(shù)據(jù)可視化內(nèi)容能讓管理人員和決策者清楚看清數(shù)據(jù)趨勢(shì)，快速制定及消化關(guān)鍵指標(biāo)。

比如當(dāng)上圖科學(xué)決策平臺(tái)的網(wǎng)絡(luò)總數(shù)特別時(shí)多，決策者可以快速調(diào)取相關(guān)數(shù)據(jù)找出異常原因 —— 是上次活動(dòng)運(yùn)營(yíng)推廣到位，故增加了很多用戶？也就是決策者可以通過異常數(shù)據(jù)快速鉆取數(shù)據(jù)，用來解釋正在發(fā)揮作用的運(yùn)營(yíng)條件或決策與所遇到的指標(biāo)之間的關(guān)系。

優(yōu)點(diǎn)三：可視化數(shù)據(jù)便于溝通及被關(guān)注

根據(jù)Aberdeen報(bào)告收集的信息，利用數(shù)據(jù)可視化的組織能夠及時(shí)訪問信息的可能性比其他組織高28％。數(shù)據(jù)可視化有助于我們以客戶和投資者能理解的方式向他們提供信息，它比PPT更容易讓人理解，也能吸引那些對(duì)企業(yè)內(nèi)容運(yùn)作了解甚少的人。

比如上方的區(qū)域經(jīng)濟(jì)地圖，通過地圖與定位街道區(qū)域內(nèi)容、顏色結(jié)合的展示樣式，很容易看出各街道產(chǎn)值、稅收等，也更有場(chǎng)景感；居民可支配收入版塊，通過顏色區(qū)分、大小圓形、時(shí)間線來直觀展示居民收入變化內(nèi)容，形象且清晰。

三、制作可視化數(shù)據(jù)大屏的常用工具有哪些？

制作數(shù)據(jù)可視化的工具有很多，最常見的就是Excel工具，非常容易上手，基本人人都會(huì)，操作簡(jiǎn)單，但它的缺點(diǎn)也很明顯，沒什么特色，靜態(tài)數(shù)據(jù)展示過于死板，樣式老舊。第二類是Python等編程類工具，這類優(yōu)點(diǎn)是碼數(shù)據(jù)速度快，自動(dòng)獲取，看起來很高端，但缺點(diǎn)也很明顯，如：學(xué)習(xí)成本高、學(xué)習(xí)比較困難、很難比較熟練的掌握等。

第三類就是SAAS類可視化工具，這類工具容易上手，操作簡(jiǎn)單、動(dòng)態(tài)數(shù)據(jù)自動(dòng)獲取、動(dòng)態(tài)效果無敵炫酷，不需要下載安裝，缺點(diǎn)就是部分渲染組件比較耗費(fèi)電腦配置。那我們今天就來推薦幾款常用的SAAS工具。

1.網(wǎng)易有數(shù)

網(wǎng)易有數(shù)大數(shù)據(jù)是一個(gè)企業(yè)級(jí)的大屏大數(shù)據(jù)可視化展示系統(tǒng)平臺(tái)，具有深度的交互式數(shù)據(jù)探索。它有豐富的使用場(chǎng)景，支持?jǐn)?shù)據(jù)接入、數(shù)據(jù)導(dǎo)入處理、數(shù)據(jù)分析生成報(bào)告等，用戶無需編程，簡(jiǎn)單拖拽即可生成可視化圖表。缺點(diǎn)是數(shù)據(jù)探索性分析能力有限。

網(wǎng)易有數(shù)可視化實(shí)戰(zhàn)案例——業(yè)務(wù)安全大屏。通過大屏進(jìn)行業(yè)務(wù)安全監(jiān)控，清晰的展示各業(yè)務(wù)分布要點(diǎn)的數(shù)據(jù)情況，頂部實(shí)時(shí)更新各重要區(qū)域數(shù)據(jù)情況，銷量對(duì)比、售后情況，產(chǎn)品產(chǎn)比，以及用戶分布也有清晰的直觀展示。

2.FineBI

FineBI作為一款商業(yè)智能（BI）軟件，擁有豐富的報(bào)表編輯和數(shù)據(jù)分析功能，同時(shí)它也支持可視化大屏的編輯。決策報(bào)表采用了畫布式操作界面，通過拖拉拽可以想成一個(gè)強(qiáng)大的、全面的可視化大屏，能實(shí)現(xiàn)在一個(gè)頁(yè)面整合不同的數(shù)據(jù)，完美的展示各類業(yè)務(wù)指標(biāo)，實(shí)現(xiàn)數(shù)據(jù)多維度分析。缺點(diǎn)是大屏組件不夠豐富，開發(fā)拓展性不強(qiáng)，不支持云端托管等。

帆軟可視化實(shí)戰(zhàn)案例——銀行大屏駕駛艙。通過大屏直觀展示銀行存款、貸款數(shù)據(jù)，業(yè)務(wù)辦理詳情等，圖表形式展示內(nèi)部管理、外部管理情況，分行放貸統(tǒng)計(jì)情況等，便于數(shù)據(jù)管理查看及決策制定參考。

3.阿里Data V

Data V是阿里云內(nèi)部的可視化大屏開發(fā)平臺(tái)，同時(shí)面向開發(fā)者和零基礎(chǔ)用戶，支持大屏圖形化編輯和在線編程開發(fā)，可幫助非專業(yè)的工程師通過圖形化的界面搭建專業(yè)水準(zhǔn)的可視化應(yīng)用。

它有海量行業(yè)模板，DataV數(shù)據(jù)可視化設(shè)計(jì)團(tuán)隊(duì)會(huì)定期從大量真實(shí)項(xiàng)目中尋找優(yōu)質(zhì)場(chǎng)景，制作為模板，涵蓋媒體、零售、工業(yè)、電商、金融、防疫、氣象等多個(gè)行業(yè)，為用戶提供會(huì)議展覽、業(yè)務(wù)監(jiān)控、風(fēng)險(xiǎn)預(yù)警、地理信息分析等各種設(shè)計(jì)參考。

產(chǎn)品功能方面，它有豐富的可視化編輯工具，提供多種業(yè)務(wù)模塊級(jí)的非圖表組件，只要通過拖拉拽便可創(chuàng)造出專業(yè)的可視化應(yīng)用，另外豐富的組件庫(kù)與模板庫(kù)包含多種場(chǎng)景模板，簡(jiǎn)單修改即可快速投入使用。智能化工具擁有主題配色，一鍵美化、大屏智能生成等工具，快速解決在搭建可視化應(yīng)用時(shí)遇到的整體樣式配置困難。專業(yè)的地理信息可視化，支持地理軌跡、飛線、熱力分布、3D地球等效果，同時(shí)數(shù)據(jù)驅(qū)動(dòng)三維世界生成，低代碼交互配置將復(fù)雜邏輯可視化呈現(xiàn)，整體效果更炫酷。它還有靈活開放的部署方式，支持多種發(fā)布方式，如：鏈接分享、二維碼發(fā)布；支持自定義組件接入；支持云上部署，也支持線上開發(fā)。

DataV數(shù)據(jù)可視化實(shí)戰(zhàn)案例——智慧工廠生產(chǎn)控制大屏，綜合呈現(xiàn)了每個(gè)生產(chǎn)階段的生產(chǎn)狀態(tài)參數(shù)，將整個(gè)車間的情況匯總到一個(gè)調(diào)度控制中心，方便管理人員了解各階段的工作情況。

4.EasyV 數(shù)據(jù)平臺(tái)

袋鼠云數(shù)據(jù)可視化EAsyV，擁有業(yè)內(nèi)領(lǐng)先的數(shù)據(jù)可視化大屏故事策劃、視覺設(shè)計(jì)、前端和數(shù)據(jù)開發(fā)技術(shù)實(shí)力，尤其擅長(zhǎng)3D模型展示，基于GIS地理信息展示等。它里面有豐富的組件，樣式制作精美，支持多種不同類型的數(shù)據(jù)導(dǎo)入，還有動(dòng)態(tài)面板和交互功能，讓大屏看起來更靈動(dòng)。

EasyV數(shù)據(jù)可視化實(shí)戰(zhàn)案例——寧波圖書館可視化平臺(tái)。大屏包含人流分析監(jiān)測(cè)、讀者畫像分析、借閱行為洞察等，從多角度全面的幫助用戶及時(shí)把握?qǐng)鲳^運(yùn)營(yíng)效果，為其提供館內(nèi)建設(shè)與活動(dòng)運(yùn)營(yíng)的監(jiān)控分析服務(wù)。

四、如何設(shè)計(jì)出好的可視化大屏？

深色的大屏設(shè)計(jì)能讓其數(shù)據(jù)顯示更明顯，也方便營(yíng)造科技感，另外大屏設(shè)計(jì)圖表文字的顏色要統(tǒng)一，避免出挑的內(nèi)容分散用戶注意力，使用圖片或者是動(dòng)態(tài)的背景，也可以讓大屏更有氛圍感。那除了這些，好的大屏還有哪些特質(zhì)呢？

首先是策劃有故事。從客戶的真實(shí)需求去梳理數(shù)據(jù)可視化內(nèi)部的視覺傳達(dá)，確保內(nèi)容傳達(dá)克制有條理，有重點(diǎn)、有故事。盡可能讓用戶花費(fèi)更少的時(shí)間獲取更多信息，完成數(shù)據(jù)空間到圖形空間的映射，讓數(shù)據(jù)的價(jià)值被看見。

如上方的品牌銷售數(shù)據(jù)大屏，銷售額與門店數(shù)，數(shù)據(jù)明顯，與銷售額相關(guān)內(nèi)容有季度線上線下銷售額，會(huì)員數(shù)、款式數(shù)量、爆款排行等，故這塊內(nèi)容排在左側(cè)。右側(cè)就是區(qū)域訂單、毛利統(tǒng)計(jì)。中間放用戶關(guān)心的地圖區(qū)域分布、爆款分析等內(nèi)容。

其次是可視化要有效率。通過工具軟件，數(shù)據(jù)可視化變得更簡(jiǎn)單高效，變得靈活易實(shí)現(xiàn)，多端適配，加入組件化的拖拉拽操作，加入了多種交互和遠(yuǎn)程控制，能有效率的實(shí)現(xiàn)海量數(shù)據(jù)實(shí)時(shí)同步，實(shí)現(xiàn)高效率、高質(zhì)量大屏交付。

最后是大屏要有數(shù)據(jù)價(jià)值。數(shù)據(jù)可視化最重要的還是要落實(shí)到數(shù)據(jù)上，脫離數(shù)據(jù)談美觀是不切實(shí)際的空想，數(shù)據(jù)可視化就是要充分利用并方大數(shù)據(jù)的價(jià)值，保證數(shù)據(jù)實(shí)時(shí)、全域、精準(zhǔn)、讓數(shù)據(jù)講話。

五、最后

設(shè)計(jì)可視化數(shù)據(jù)大屏?xí)r我們?cè)O(shè)計(jì)師要抓住問題的重點(diǎn)，即這樣設(shè)計(jì)出來的內(nèi)容能不能真的讓數(shù)據(jù)產(chǎn)生價(jià)值，能否經(jīng)得起業(yè)務(wù)部門推敲？是否為企業(yè)經(jīng)營(yíng)提供了幫助？思考完這些再去做的大屏更有價(jià)值，大屏做的酷炫是其次，能夠讓人一目了然的看見關(guān)鍵信息，聯(lián)想到業(yè)務(wù)實(shí)際，才是我們?cè)O(shè)計(jì)師最需要關(guān)注的方向。

文章來源：站酷   作者：知果日記YRrui

一、費(fèi)茨定律

費(fèi)茨定律(Fitts'sLw)是一個(gè)描述人類運(yùn)行學(xué)的經(jīng)驗(yàn)公式，用于計(jì)算人們移動(dòng)手指或鼠標(biāo)等設(shè)備到某個(gè)目標(biāo)的時(shí)間，以考慮目標(biāo)大小和距離為主。 

費(fèi)茨定律的公式是T=a+blog2(D/S+1)，其中T是時(shí)間，a和b是實(shí)驗(yàn)測(cè)得的常數(shù)，D是目標(biāo)的距離，S是目標(biāo)的大小。說明了在給定目標(biāo)情況下，目標(biāo)距離越遠(yuǎn)，需要的時(shí)間越長(zhǎng)；在給定距離的情況下，目標(biāo)越小，需要的時(shí)間越長(zhǎng)。

費(fèi)茨定律廣泛地用于人機(jī)交互界面設(shè)計(jì)中，例如在B端常用的設(shè)計(jì)按鈕上，可根據(jù)該定律來選擇適當(dāng)?shù)哪繕?biāo)大小和間距，以使用戶更好地達(dá)到業(yè)務(wù)目標(biāo)。 

比如在B端產(chǎn)品彈窗界面設(shè)計(jì)中，確定和取消按鈕都會(huì)放在右下角，使得用戶更容易點(diǎn)擊。確定按鈕更高頻故放在最右邊，視覺表現(xiàn)更明顯，使其更容易一眼點(diǎn)擊。此外，兩個(gè)按鈕之間的距離也很重要，因?yàn)樗鼤?huì)影響到用戶的點(diǎn)擊時(shí)間，為了讓用戶更容易進(jìn)行選擇，按 鈕間保持12px距離，避免用戶誤觸。

二、米勒定律

1956年美國(guó)心理學(xué)家喬治·米勒對(duì)短時(shí)記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人的短時(shí)記憶能力廣度為7±2個(gè)信息塊，記憶信息超過了該范圍就容易出錯(cuò)。因此心理學(xué)家把這個(gè)神奇的記憶容量規(guī)律稱為“7±2法則”。 在人機(jī)交互設(shè)計(jì)界面中，如果要引入新的元素或操作，應(yīng)該盡可能地減少其數(shù)量和復(fù)雜性，以便用戶更容易理解和記憶。

比如在B端卡片設(shè)計(jì)中的操作按鈕一般會(huì)控制在7-2法則即5個(gè)操作按鈕，若有其它操作會(huì)隱藏在更多按鈕里面，把頻次較高的按鈕放在一級(jí)展示中，頻次較少的按鈕放在二級(jí)浮窗展示中。通過分解復(fù)雜的任務(wù)和信息，減少冗余內(nèi)容使得用戶更容易理解且更快完成業(yè)務(wù)過程。

三、格式塔原理

格式塔原理是心理學(xué)的一個(gè)概念，也廣泛應(yīng)用于設(shè)計(jì)領(lǐng)域中。該原理認(rèn)為人類大腦在處理感知信息時(shí)，會(huì)自動(dòng)將信息組織成具有整體性、完整性和結(jié)構(gòu)性的形態(tài)，即所謂的“格式塔”。

在設(shè)計(jì)中，格式塔原理有幾個(gè)常見應(yīng)用： 

1.相似性原則：相似的事物更容易被視為一組，與不同的事物分離。因此，設(shè)計(jì)師可以使用相似的顏色、形狀、大小等元素來將相關(guān)的信息組織在一起，提高信息的可讀性和易用性。

2.接近性原則：接近的事物更容易被視為一組，與遠(yuǎn)離的事物分離。因此，設(shè)計(jì)師可以使用空間布局來將相關(guān)的信息組織在一起，提高信息的可讀性和易用性。 

3.對(duì)稱性原則：人類大腦喜歡對(duì)稱和平衡的形態(tài)。因此，設(shè)計(jì)師可以使用對(duì)稱的布局來吸引用戶的注意力，提高視覺吸引力和美感。 

4.閉合性原則：人類大腦傾向于將不完整的形狀視為完整的形狀。因此，設(shè)計(jì)師可以使用封閉的形狀來強(qiáng)調(diào)信息，使用戶更容易理解和記憶。

相似性原則的應(yīng)用比如在B端的卡片設(shè)計(jì)中，所有的卡片樣式相似在人腦理解中默認(rèn)會(huì)視為相同的一組數(shù)據(jù)。

接近性原則比如在B端的表單設(shè)計(jì)中，常常會(huì)將一組數(shù)據(jù)通過接近性原則組織在一起，提高信息易讀性。

對(duì)稱性原則常用在大屏與報(bào)表設(shè)計(jì)中，通過對(duì)稱性布局提高視覺美感，吸引用戶注意力。

閉合性原則常用于連續(xù)性表格或圖形等設(shè)計(jì)中，通過不連續(xù)性來讓用戶大腦形成封閉路徑強(qiáng)調(diào)后續(xù)可讀信息。

比如在下面的表格中通過形狀的不連續(xù)性反而讓用戶大腦更快感知到還有信息可以滾動(dòng)查看。

四、雅各布定律

雅各布定律(Jacob'sLaw)是一條常被引用的交互設(shè)計(jì)法則，它由美國(guó)心理學(xué)家Donald Norman提出。該定律指出，人們?cè)谑褂萌魏涡孪到y(tǒng)時(shí)，都會(huì)將他們以前所經(jīng)驗(yàn)過的類似系統(tǒng)的知識(shí)應(yīng)用于新系統(tǒng)。

雅各布定律的核心思想是，在設(shè)計(jì)新系統(tǒng)時(shí)，應(yīng)該考慮到用戶的現(xiàn)有經(jīng)驗(yàn)和期望，并盡量避免創(chuàng)造完全不同的界面模式。這樣可以使用戶更容易理解和掌握新系統(tǒng)，并減少學(xué)習(xí)成本。

比如在B端設(shè)計(jì)中常用到的圖表編輯快鍵可以延用用戶在其他系統(tǒng)常用到的快捷鍵，如win或mac系統(tǒng)都常用到的快捷指令可復(fù)用到B端產(chǎn)品的快捷操作中。

五、防錯(cuò)原則

防錯(cuò)原則(Principle of Fail--Safe or Fault-Tolerance)是一種設(shè)計(jì)思想，其目的是減少或避免因錯(cuò)誤或故障而導(dǎo)致的不良后果。它通常被用于設(shè)計(jì)高度可靠的系統(tǒng)或設(shè)備，以確保在錯(cuò)誤事故發(fā)生時(shí)，系統(tǒng)或設(shè)備仍然能夠繼續(xù)正常運(yùn)行，或者能夠平穩(wěn)地停止運(yùn)行，以避免進(jìn)一步的損害或危險(xiǎn)。

在界面設(shè)計(jì)中如設(shè)計(jì)可撤銷操作，通過系統(tǒng)中允許用戶執(zhí)行可撤銷操作，以避免因誤操作而導(dǎo)致的不良后果。

或在界面設(shè)計(jì)中常用到的反饋和提醒彈窗等操作，以幫助用戶及時(shí)發(fā)現(xiàn)錯(cuò)誤或故障，并采取適當(dāng)?shù)拇胧?

六、泰思勒定律

泰思勒基本定律(Tesler’sLaw)由Larry Tesler于l984年明確提出，也稱 「復(fù)雜性質(zhì)量守恒」。

該基本定律覺得：該定律認(rèn)為每一個(gè)過程都有其固定的復(fù)雜性，存在一個(gè)臨界點(diǎn)，超過這個(gè)點(diǎn)過程就不能再簡(jiǎn)化了，你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。

可以通過簡(jiǎn)約至上的隱藏、轉(zhuǎn)移、刪除等原則進(jìn)行用戶體驗(yàn)的提升。

七、奧卡姆剃刀原理

早在14世紀(jì)，哲學(xué)家、圣方濟(jì)各會(huì)修士奧卡姆的威廉提出來了奧卡姆剃刀原理，這個(gè)原理說的是“切勿浪費(fèi)較多東西去做較少的東西同樣可以做好的事情”，后來以一種更為廣泛的形式被人們知曉“如無必要，勿增實(shí)體”。 

奧卡姆剃刀常用于兩種假說的取舍上：如果對(duì)于同一現(xiàn)象有兩種不同的假說，我們應(yīng)該采取比較簡(jiǎn)單的那一種。對(duì)于幾個(gè)功能相同的設(shè)計(jì)，在設(shè)計(jì)都可用的情況下，則選擇視覺干擾較少的設(shè)計(jì)。

在設(shè)計(jì)上則能夠指導(dǎo)我們對(duì)產(chǎn)品做減法，去減少不必要的元素，在進(jìn)行設(shè)計(jì)的時(shí)候，先分析用戶的的主流程是什么，流程內(nèi)的引導(dǎo)盡量弱化，沒有必要?jiǎng)t不增加。

比如在B端產(chǎn)品設(shè)計(jì)中的登錄頁(yè)面以登錄流程為核心，不需要增加其它沒必要的流程。

除了以上七大定律外，也有尼爾森的10大設(shè)計(jì)原則，與以上定律基本一致?？偠灾?，交互設(shè)計(jì)規(guī)律的宗旨都是幫助設(shè)計(jì)師創(chuàng)造易用、高效、愉悅的用戶體驗(yàn)。在B端產(chǎn)品設(shè)計(jì)中，將交互定律貫穿于產(chǎn)品設(shè)計(jì)中可以提升產(chǎn)品易用性，降低學(xué)習(xí)成本，使產(chǎn)品更規(guī)范，對(duì)企業(yè)用戶的工作效率與商業(yè)價(jià)值都有積極的影響

文章來源：優(yōu)設(shè)網(wǎng)    作者：麗創(chuàng)輕文

中國(guó)互聯(lián)網(wǎng)公司的迅速發(fā)展正在推動(dòng)著整個(gè)軟件行業(yè)的審美革命，在C端產(chǎn)品市場(chǎng)逐漸飽和的情況下，互聯(lián)網(wǎng)大廠正在將資本逐步轉(zhuǎn)移到B端市場(chǎng)的廣闊藍(lán)海中?！盉端C端化“的設(shè)計(jì)理念也應(yīng)運(yùn)而生，認(rèn)為可以用C端的模式和思維來進(jìn)行B端產(chǎn)品的設(shè)計(jì)。 

二、背景

除了剛剛有說到的資本慢慢向B端市場(chǎng)的藍(lán)海轉(zhuǎn)移，還有一點(diǎn)就是中國(guó)互聯(lián)網(wǎng)環(huán)境的迅速發(fā)展，智能手機(jī)的大范圍普及，工作人群的年輕化，使得人們已經(jīng)熟練的掌握了各種軟件的使用，并且在快速迭代的產(chǎn)品中慢慢變得挑剔、謹(jǐn)慎。 

并且不斷優(yōu)化迭代的互聯(lián)網(wǎng)軟件產(chǎn)品也在無形中為用戶完成了底層認(rèn)知的搭建，一些功能、操作、交互邏輯已經(jīng)深入人心，用戶也已經(jīng)被教育成了"高玩"。 

所以如今一些新型B端產(chǎn)品的設(shè)計(jì)理所應(yīng)當(dāng)?shù)脑谟脩趔w驗(yàn)五要素中最貼近用戶的結(jié)構(gòu)層、框架層 和表現(xiàn)層中與一些C端產(chǎn)品在一定程度保持了一致，這種設(shè)計(jì)理念其實(shí)也很好的解決了傳統(tǒng)軟件的復(fù)雜、門檻高、難用等痛點(diǎn)，很大程度降低了用戶的認(rèn)知成本和學(xué)習(xí)成本，把高效、簡(jiǎn)單、易用的工具帶到大家的日常工作中。 

三、對(duì)B端C化的理解

對(duì)這個(gè)概念的理解我認(rèn)為是："B端產(chǎn)品在使用體驗(yàn)和視覺感受這兩個(gè)方面和C端產(chǎn)品接近"。這是我們?cè)O(shè)計(jì)師需要特別關(guān)注的，傳統(tǒng)的思維中，大多數(shù)設(shè)計(jì)師會(huì)認(rèn)為B端是給公司內(nèi)部人員或者商家使用的，只是一個(gè)管理系統(tǒng)，并不需要太過于精細(xì)，至于體驗(yàn)也是停留在“能用就行”的程度。但是在我看來不管是C端還是B端，其實(shí)它的使用對(duì)象都是“人”，應(yīng)該要遵循人們對(duì)于事物的認(rèn)知和一系列復(fù)雜的人體工程學(xué)操作習(xí)慣。兩者都需要關(guān)注用戶在使用時(shí)的體驗(yàn)感受，順暢的使用流程、清晰的信息展示和高效的行為效率，以及有效的引導(dǎo)都能夠快速的幫助用戶完成目標(biāo)任務(wù)。無論是C端設(shè)計(jì)還是B端設(shè)計(jì)，滿足這些條件無疑可以給用戶帶來更好的體驗(yàn)。 

但是也不能以偏概全的認(rèn)為C端的設(shè)計(jì)思維可以完全復(fù)用過來。B端產(chǎn)品的場(chǎng)景其實(shí)比C端產(chǎn)品還是要復(fù)雜的多，應(yīng)該說是各有各的側(cè)重點(diǎn)，思維和設(shè)計(jì)模式上不能完全照搬，下面我就先說說它們各自的不同處，再舉例帶你看看B端產(chǎn)品在哪些方面可以向C端產(chǎn)品借鑒學(xué)習(xí)。 

四、B端C端的不同

1.使用者不同

B端使用者多是同一個(gè)組織集體，以群體為單位進(jìn)行協(xié)同。比如：老板、部門主管、員工或商戶。而C端使用者相對(duì)比較單一，目標(biāo)用戶群體即是主要使用人群，使用目標(biāo)、偏好、個(gè)性比較明確。 

2.業(yè)務(wù)不同：

B端業(yè)務(wù)大多數(shù)會(huì)存在多重維度、場(chǎng)景，使用場(chǎng)景跟業(yè)務(wù)緊密相關(guān)，同一個(gè)系統(tǒng)不同角色使用時(shí)的業(yè)務(wù)處理和所關(guān)注的數(shù)據(jù)信息，側(cè)重點(diǎn)會(huì)有很大的不同，需要全局考慮。不同角色使用產(chǎn)品的流程差異大，需要不同業(yè)務(wù)上更專業(yè)的解決方案。而C端業(yè)務(wù)一般維度比較單一，業(yè)務(wù)邏輯相對(duì)固定，任務(wù)路徑和展示內(nèi)容比較單一。 

 3.價(jià)值主張不同：

B端注重效率、成本、管控、數(shù)據(jù)分析等。追求產(chǎn)品的穩(wěn)定性、業(yè)務(wù)的增長(zhǎng)性，保證產(chǎn)品性能和技術(shù)上的安全性。而C端注重用戶的體驗(yàn)、使用簡(jiǎn)單、有樂趣。 

4.產(chǎn)品思維不同：

B端產(chǎn)品多數(shù)基于服務(wù)思維，工具化思維，更加理性；更多的是幫助B端用戶提高效率，完成業(yè)務(wù)目標(biāo)。而C端多數(shù)為產(chǎn)品化思維，游戲化思維，更感性，更多的是娛樂和情感的滿足。 

5.產(chǎn)品形態(tài)不同：

B端產(chǎn)品注重業(yè)務(wù)的梳理，多數(shù)會(huì)用到圖表、表格、模型，多數(shù)產(chǎn)品形態(tài)偏向更垂直行業(yè)或更專業(yè)的面板形態(tài)。而C端更注重用戶的感受，會(huì)用到很多夸張的動(dòng)效，炫彩的顏色。 

五、B端C化在產(chǎn)品中具體的表現(xiàn)

1.結(jié)構(gòu)層 

結(jié)構(gòu)層確定各個(gè)將要呈現(xiàn)給用戶的選項(xiàng)的模式和順序。結(jié)構(gòu)層是用來設(shè)計(jì)用戶如何到達(dá)某個(gè)頁(yè)面，并且要考慮他們完成事情之后能夠去哪里。 

具體在B端產(chǎn)品的表單交付場(chǎng)景下可以體現(xiàn)出，以前的B端表單往往過于冗長(zhǎng)，借鑒C端一些注冊(cè)場(chǎng)景的設(shè)計(jì)，把表單拆分成3步內(nèi)的行為步驟，減少用戶的疲憊感提升體驗(yàn)。 

2.框架層

產(chǎn)品的框架層包括：按鈕、控件、照片、文本區(qū)域的位置?？蚣軐邮怯糜趦?yōu)化頁(yè)面設(shè)計(jì)布局的。 

具體在B端產(chǎn)品的列表頁(yè)可以體現(xiàn)出，列表頁(yè)中整體的按鈕、文本區(qū)域的位置、搜索和篩選的布局設(shè)計(jì)其實(shí)與C端產(chǎn)品中的商品詳情頁(yè)是類似的，遵循用戶的閱讀順序和視覺焦點(diǎn)來進(jìn)行設(shè)計(jì)。 

3.表現(xiàn)層

視覺、聽覺、（觸覺）的體驗(yàn)設(shè)計(jì)。多體現(xiàn)在一些情感化的設(shè)計(jì)也被運(yùn)用在了B端產(chǎn)品中。 

六、B端C化未來的設(shè)計(jì)方向

反觀現(xiàn)在C端產(chǎn)品的一些設(shè)計(jì)風(fēng)格和流行趨勢(shì)，有哪些可以運(yùn)用在B端產(chǎn)品的設(shè)計(jì)中呢？ 

1.3D化

B端因?yàn)閷?duì)數(shù)據(jù)的展示有較強(qiáng)的需求，用戶在使用過程中提高效率的判斷緯度也包括信息數(shù)據(jù)的獲取效率，而3D的視覺在數(shù)據(jù)可視化層面有著天然的優(yōu)勢(shì)，可以幫助用戶更快速的理解數(shù)據(jù)維度所表達(dá)的核心價(jià)值。近年來網(wǎng)速等硬件設(shè)施的升級(jí)也為3D化視覺帶來可落地的基礎(chǔ)，設(shè)計(jì)師也嘗試在產(chǎn)品設(shè)計(jì)中融入更多的3D化元素。 

2.情感化

人們對(duì)傳統(tǒng)B端產(chǎn)品的印象往往是覺得它們比較枯燥、呆板的，如今一些新型的B端產(chǎn)品的設(shè)計(jì)理念也試圖在拋開用戶對(duì)于產(chǎn)品的這種既定印象，所以很多產(chǎn)品在往一些娛樂化、IP化的方向嘗試，并且都達(dá)到了一些比較好的效果，未來在這方面的思考和嘗試只會(huì)越來越多。 

3.個(gè)性化

B端產(chǎn)品的同質(zhì)化嚴(yán)重，所以B端產(chǎn)品也需要從一些產(chǎn)品定位去定制更加富有個(gè)性的品牌基因，可以讓用戶產(chǎn)生對(duì)產(chǎn)品的感情，達(dá)到從同類產(chǎn)品中能夠脫穎而出的目標(biāo)。 

七、總結(jié)：

不管是B端還是C端，目的都是為了解決業(yè)務(wù)場(chǎng)景中遇到的問題，使用對(duì)象都是人，都應(yīng)該站在“人性”的角度考慮問題，有人說B端產(chǎn)品一般都不注重設(shè)計(jì)，C端產(chǎn)品的設(shè)計(jì)更能滿足設(shè)計(jì)師對(duì)美的追求，我只能說它們的側(cè)重點(diǎn)不同，C端更注重視覺感受，要做到在視覺表現(xiàn)的感性層面吸引用戶，而B端其實(shí)更為復(fù)雜，需要做到底層的強(qiáng)大數(shù)據(jù)處理能力，產(chǎn)品的專業(yè)性包括交互、視覺的吸引力，這樣才能從眾多產(chǎn)品中得到用戶的認(rèn)可并脫穎而出。設(shè)計(jì)師還需要不斷打磨細(xì)節(jié)和優(yōu)化體驗(yàn)來吸引和留住用戶。 

所以說“B端C端化”也只是在某些方面通用，但核心側(cè)重點(diǎn)不同，不能以偏概全、一概而論，但可以借鑒與參考，B端產(chǎn)品也可以做的很精彩。 

文章來源：優(yōu)設(shè)網(wǎng)    作者：酷家樂UED

前言：為什么要看懂B端基礎(chǔ)邏輯

相信很多設(shè)計(jì)師同學(xué)都接觸過B端產(chǎn)品，對(duì)于很多設(shè)計(jì)師而言，遇上B端產(chǎn)品是一件令人又愛又恨的事情，愛是因?yàn)槟壳笆袌?chǎng)上大多數(shù)的公司主要經(jīng)營(yíng)的都是B端系統(tǒng)，B端系統(tǒng)相對(duì)于C端來說UI界面顯得并沒有那么的重要，所以設(shè)計(jì)師的責(zé)任也相對(duì)沒有那么重，而恨是因?yàn)槟壳按蠖鄶?shù)B端系統(tǒng)頁(yè)面都是由前端UI框架搭建的，前端同學(xué)很多時(shí)候直接套用組件即可，所以UI設(shè)計(jì)師對(duì)于整個(gè)系統(tǒng)來講也顯得可有可無，導(dǎo)致設(shè)計(jì)師話語(yǔ)權(quán)也特別的低，甚至有些做B端系統(tǒng)的公司壓根不用UI設(shè)計(jì)師也能完成項(xiàng)目開發(fā)。

但是作為交互設(shè)計(jì)師(小公司一般是產(chǎn)品經(jīng)理)在B端卻特別吃香，并且擁有主要的話語(yǔ)權(quán)，因?yàn)槲覀冎鲗?dǎo)這整個(gè)系統(tǒng)的基礎(chǔ)邏輯與業(yè)務(wù)邏輯設(shè)計(jì)，所以無論是前端還是后端同學(xué)都需要根據(jù)我們的設(shè)計(jì)進(jìn)行開發(fā)，最終完成整個(gè)系統(tǒng)。

因此，今天這篇文章并不是告訴大家有哪些前端UI框架或后臺(tái)組件等..（相信這些大家也看得太多了，工作中都是套框架，能用得上的沒幾個(gè)），而是從交互上如何去看懂B端后臺(tái)的基礎(chǔ)邏輯以及以后自己晉升成產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師時(shí)，怎樣去設(shè)計(jì)一個(gè)完整閉環(huán)的系統(tǒng)。

一、B端產(chǎn)品有哪些基礎(chǔ)邏輯

B端產(chǎn)品和C端不同，C端產(chǎn)品大多數(shù)都是針對(duì)個(gè)人用戶，設(shè)計(jì)的關(guān)系結(jié)構(gòu)相對(duì)來說比較簡(jiǎn)單，每一個(gè)用戶擁有的權(quán)限都是一樣的，例如微信、淘寶等，我能看到的頁(yè)面你都能看得到，很少不存在權(quán)限差異問題。

而B端產(chǎn)品的用戶一般都是企業(yè)，企業(yè)用戶一般會(huì)管理著多個(gè)角色，也就是角色多元化（例如一些校園系統(tǒng)角色就分為：普通教師、級(jí)長(zhǎng)、主任等角色），不同的角色對(duì)系統(tǒng)的需求和職能也不一樣，我們需要根據(jù)角色的需求去劃分不同的權(quán)限，讓他們互不干擾但又滿足他們的需求問題，因此B端產(chǎn)品的基礎(chǔ)邏輯比C端產(chǎn)品相對(duì)復(fù)雜。

看完上面文字的同學(xué)可能蒙了，又角色又權(quán)限的，能不能說點(diǎn)人話？

行！其實(shí)很簡(jiǎn)單，B端系統(tǒng)無非三個(gè)邏輯（也是三個(gè)頁(yè)面）：用戶管理、角色管理以及菜單管理。（有些系統(tǒng)因?yàn)闃I(yè)務(wù)需求可能有部門管理，那么算上部門管理就四個(gè)）

二、什么是用戶、角色跟菜單

（1）什么是菜單

為什么我把菜單放到最前面跟大家講？是因?yàn)椴藛喂芾肀惹懊鎯蓚€(gè)相對(duì)簡(jiǎn)單，而什么是菜單也特別好解釋，大家可以直接認(rèn)為系統(tǒng)左側(cè)的頁(yè)面列表就是菜單，系統(tǒng)中擁有多少個(gè)頁(yè)面那么就有多少個(gè)菜單，你的菜單越多就以為著你的權(quán)限就越多。

菜單管理的作用就是用于管理員對(duì)整個(gè)系統(tǒng)頁(yè)面的管理（管理最主要就是增刪改查），而有一些公司為了減少開發(fā)工作量會(huì)直接不要菜單管理，有多少個(gè)頁(yè)面都由代碼直接寫死，管理員不能通過頁(yè)面進(jìn)行人工配置，這樣會(huì)導(dǎo)致以后擴(kuò)展會(huì)非常麻煩，當(dāng)然了，有一些系統(tǒng)的菜單幾乎不改的話，代碼寫死也沒問題。

（2）什么是權(quán)限

在講解用戶之前我需要提前跟大家講一下什么是權(quán)限，準(zhǔn)確來講應(yīng)該是權(quán)限分為哪些？

在目前的后臺(tái)系統(tǒng)中，權(quán)限一共分為三種權(quán)限，分別是菜單權(quán)限（也就是上面介紹的）、數(shù)據(jù)權(quán)限以及操作權(quán)限。

菜單權(quán)限決定了用戶有沒有這個(gè)頁(yè)面，例如學(xué)校系統(tǒng)中，主任有看到所有教師的教學(xué)數(shù)據(jù)的界面，而教師卻沒有這個(gè)功能，那么在給主任新增賬號(hào)的時(shí)候就應(yīng)該把對(duì)應(yīng)菜單賦予進(jìn)去?？瓷先ズ軓?fù)雜，其實(shí)具體操作就是新增的時(shí)候把對(duì)應(yīng)的菜單勾選上就可以了。

數(shù)據(jù)權(quán)限則決定用戶能不能看到對(duì)應(yīng)的數(shù)據(jù)。還是學(xué)校系統(tǒng)的例子，初中部主任只能看到初中部所有教師的教學(xué)數(shù)據(jù)，而高中部主任也只能看到高中部教師的教學(xué)數(shù)據(jù)，不同用戶能看到的數(shù)據(jù)也是不同的，所以在新增的時(shí)候需要給用戶配置（一般配置就是勾選）好對(duì)應(yīng)的數(shù)據(jù)權(quán)限。

但是這里有一個(gè)問題，配置數(shù)據(jù)權(quán)限時(shí)我們?nèi)绻粋€(gè)一個(gè)人去勾選配置的話會(huì)特別的麻煩，假如初中部主任只能看到初中部的老師，那么我在給他配置賬號(hào)的時(shí)候需要一個(gè)一個(gè)的初中老師勾選上，張三、李四、王五..等等，如果人多的話可能需要勾選成百上千次，用戶體驗(yàn)就會(huì)變得特別差，因此現(xiàn)在的系統(tǒng)在配置數(shù)據(jù)權(quán)限時(shí)都是以部門為單位進(jìn)行配置，也就是說，直接選擇部門就代表著擁有整個(gè)部門的數(shù)據(jù)權(quán)限。

最后操作權(quán)限即決定了用戶有沒有對(duì)數(shù)據(jù)進(jìn)行操作（一般是增刪改查）的功能。還是上面的例子，初中部主任擁有查看教師的頁(yè)面以及數(shù)據(jù)，那么他能不能對(duì)教師們的數(shù)據(jù)進(jìn)行增刪改查或者導(dǎo)入導(dǎo)出呢？這就取決于操作權(quán)限的配置了。目前很多的后臺(tái)系統(tǒng)在配置菜單權(quán)限的時(shí)候同時(shí)需要把操作權(quán)限進(jìn)行配置（因?yàn)橹荒芟扔许?yè)面才能進(jìn)行操作），操作權(quán)限一般就是增加、刪除、修改以及查詢，當(dāng)然如果頁(yè)面還有導(dǎo)入導(dǎo)出或者其他功能，這些也需要在操作權(quán)限中進(jìn)行配置。

（3）系統(tǒng)中的用戶

用戶其實(shí)也很容易理解，B端系統(tǒng)的用戶其實(shí)就是需要登錄進(jìn)系統(tǒng)的賬號(hào)，所以有一些系統(tǒng)的用戶管理也叫賬號(hào)管理。

因此用戶管理的作用就是對(duì)登錄進(jìn)系統(tǒng)的賬號(hào)進(jìn)行增刪改查等，當(dāng)我們需要對(duì)別人提供一個(gè)賬號(hào)時(shí)，我們就新增一個(gè)用戶的賬號(hào)密碼給他們，直到他們用完了再把他們的賬號(hào)進(jìn)行刪除。

那么問題來了，上面我們說到，不同的用戶可能有不同的需求問題，那么就意味著我們每一個(gè)用戶給要他們分配不同的菜單去做他們的事情。

例如在學(xué)校系統(tǒng)中：普通教師只負(fù)責(zé)自己班級(jí)學(xué)生的成績(jī)錄入，所以普通教師只有班級(jí)成績(jī)錄入的菜單，但是學(xué)校主任卻不一樣，他不僅僅能看到各班學(xué)生成績(jī)，還能根據(jù)各班成績(jī)進(jìn)行對(duì)比分析，年級(jí)學(xué)生排名等等..

因此在剛開始的傳統(tǒng)權(quán)限系統(tǒng)中，我們會(huì)直接把相應(yīng)的菜單權(quán)限、數(shù)據(jù)權(quán)限、操作權(quán)限賦予給用戶，每新增一個(gè)用戶我們就選擇好所有的權(quán)限都勾選上賦予給用戶，最后提供給用戶進(jìn)行操作。

然而這種操作方式有一個(gè)弊端，就是如果每新增一個(gè)用戶，系統(tǒng)管理員就需要重復(fù)進(jìn)行勾選相同的權(quán)限，那么就會(huì)耗費(fèi)大量的精力（一個(gè)用戶要配置的權(quán)限特別多，如果用這個(gè)方式操作的話新增一個(gè)用戶可能就需要花費(fèi)很長(zhǎng)時(shí)間）。因此，為了解決這個(gè)問題，我們?cè)谟脩襞c權(quán)限之間建立了角色管理。

（4）角色的作用

系統(tǒng)中角色的定義其實(shí)跟生活中是一樣的，我們把固定的權(quán)限集合到一起從而形成了角色。例如，生活中UI角色就負(fù)責(zé)頁(yè)面的視覺設(shè)計(jì)，而交互設(shè)計(jì)師則負(fù)責(zé)了產(chǎn)品的邏輯或者用戶體驗(yàn)設(shè)計(jì)，這些角色擁有的權(quán)限一般很少變化，也幾乎不會(huì)進(jìn)行刪除或者修改，就好像UI設(shè)計(jì)師或者交互設(shè)計(jì)師這些角色不會(huì)一時(shí)半刻就被完全消滅一樣。

有了角色，我們可以先把對(duì)應(yīng)的權(quán)限集合賦予給角色，然后新增用戶時(shí)，再選擇用戶對(duì)應(yīng)的角色即可。

這樣做的好處是什么呢？好處就是當(dāng)我們新增用戶的時(shí)候，如果是相同角色的用戶，我們不再需要重復(fù)去大量勾選相應(yīng)的權(quán)限了，只需選擇好該用戶是那個(gè)角色就可以間接對(duì)用戶賦予權(quán)限，并且后續(xù)要對(duì)用戶進(jìn)行權(quán)限的修改也十分便捷。因此，在現(xiàn)在的后臺(tái)系統(tǒng)中，大多數(shù)都是采用權(quán)限賦予角色，然后新增用戶時(shí)再選擇用戶對(duì)應(yīng)的角色的方式。

三、整體流程

如果看完上面的知識(shí)點(diǎn)還有點(diǎn)懵的話也沒關(guān)系，這部分給大家展示在后臺(tái)系統(tǒng)中菜單管理、角色管理與用戶管理的實(shí)際應(yīng)用是怎樣的。

第一步先查看菜單管理有哪些內(nèi)容，一般情況下，一個(gè)成熟系統(tǒng)的菜單頁(yè)面幾乎是已經(jīng)固定不變的，那么也就是說菜單管理列表中所擁有的菜單都不需要怎么操作，列表中有多少數(shù)據(jù)就代表著系統(tǒng)總體有多少菜單。

第二步進(jìn)行角色管理，如果是成熟系統(tǒng)的話，角色管理的角色也早已經(jīng)分配好了，我們并不需要過多的進(jìn)行操作，但如果是剛研發(fā)完成的系統(tǒng)，那么我們就需要根據(jù)現(xiàn)實(shí)的用戶需求進(jìn)行角色的設(shè)置，具體添加角色的主要參數(shù)包括角色名稱、菜單權(quán)限、數(shù)據(jù)權(quán)限以及操作權(quán)限（其實(shí)也就是上文介紹的三種權(quán)限），其他的參數(shù)都是根據(jù)自身業(yè)務(wù)進(jìn)行添加。

最后一步就是用戶管理，配置好角色后，我們就可以根據(jù)需求進(jìn)行用戶的新增操作，例如現(xiàn)在我們需要新增一個(gè)賬號(hào)進(jìn)行登錄系統(tǒng)，那么在用戶管理頁(yè)面中點(diǎn)擊新增按鈕，隨后填寫用戶名稱與密碼，最后選擇用戶角色，點(diǎn)擊確定按鈕即可完成（因此，新增用戶的三個(gè)必要參數(shù)是用戶名、密碼以及角色，有部門的需要填寫所屬部門，其他參數(shù)根據(jù)系統(tǒng)業(yè)務(wù)進(jìn)行添加）。添加完成后你們可以試一試使用自己所填寫的用戶名密碼登錄后臺(tái)系統(tǒng)，隨后體驗(yàn)一下作為其他角色是否能完成自身需要的業(yè)務(wù)。

四、最后總結(jié)（特別重要）

用戶管理、角色管理以及菜單管理是B端系統(tǒng)最基礎(chǔ)的邏輯，也是同學(xué)們將來需要轉(zhuǎn)崗B端交互設(shè)計(jì)師或者產(chǎn)品設(shè)計(jì)師所必須掌握的知識(shí)，上面所介紹的僅僅是RBAC模型中最簡(jiǎn)單的一種，現(xiàn)實(shí)設(shè)計(jì)中可能出現(xiàn)各種情況，因此關(guān)于這次的B端產(chǎn)品設(shè)計(jì)我想給大家?guī)c(diǎn)Tips：

    1、在現(xiàn)實(shí)開發(fā)中，后臺(tái)系統(tǒng)并不一定像我上面所說的那么完善，有些系統(tǒng)并不需要菜單管理，老板要求直接代碼寫死就好了，又或者有些系統(tǒng)就只有一個(gè)角色，那么角色管理也不需要了，這些情況都是有可能發(fā)生的，所有我們做設(shè)計(jì)的時(shí)候除了運(yùn)用自己的知識(shí)以外，更多的是工作經(jīng)驗(yàn)，知識(shí)是死的，人是活的，永遠(yuǎn)別忘了設(shè)計(jì)的本質(zhì)是解決用戶需求問題。

    2、很多時(shí)候后臺(tái)的邏輯管理會(huì)比我上面說的要復(fù)雜的多，例如一個(gè)用戶可以擁有多個(gè)角色嗎？不同角色能不能有相同的權(quán)限？如果有角色被刪除了，那么該角色關(guān)聯(lián)的所有用戶應(yīng)該怎么處理？可能你認(rèn)為這些并不是自己目前需要考慮的問題，但是除非你以后并不想晉升到更高的位置，不然這些問題以后肯定會(huì)遇到的。

    3、上面介紹的管理操作都是基于超級(jí)管理員賬號(hào)（admin）進(jìn)行操作的，如果你拿一個(gè)普通賬號(hào)的話一般是沒有對(duì)應(yīng)的菜單權(quán)限，我擔(dān)心有同學(xué)看完文章后馬上登錄自己的后臺(tái)系統(tǒng)進(jìn)行操作，接著登錄進(jìn)去找了半天都沒有找到對(duì)應(yīng)的菜單在哪里。

好了，最后希望文章能讓大家有所收獲，如果大家有不明白或者其他想法的話，歡迎大家一起探討，共勉。

文章來源：優(yōu)設(shè)網(wǎng)    作者：北沐而川