1.遙望app

1.視覺設計

遙望app的設計在整體上的風格化很強，有自己的獨特性。為了讓用戶之間的粘性更好，更是在活動上、動效上花了很多心思，給用戶帶來很多有趣且良好的體驗，讓我帶你去體驗一下吧

2.設計語言

整個app的設計語言貫穿了星形、圓形和三角形 ，同時增加上面三種圖形的線性來點綴設計。tab圖標是圓形和三角形的排列組合，同時增加線的形式點綴其中，層次更加豐富。其他頁面的設計也是同理，通過將上面3種圖形排列組合，貫穿到整個頁面，設計語言十分統一。

3.空界面設計

空界面的設計運用手的動作將每個頁面的情緒感拉的滿滿的，在互動消息的版塊，從關注到@我，每一個頁面通過不同的情緒表達方式極大了緩解了用戶的焦慮，同時也增加了一些趣味性。

4.勛章設計

勛章是根據你的確幸值的多少，等級的高低，送禮物的多少，以及你在平臺的表現會給你發放不同的勛章，以此讓用戶享受到尊享和定制的感覺，增加用戶的參與感和在平臺的粘性。

2.動效設計

遙望app的動效設計也是十分的流暢和有趣，線性的風格特征的插畫、溫暖的文案和趣味的動效，帶來的絲滑體驗感十分強烈。

1.匹配器

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

2.下拉加載

加載的動態效果加入了遙望的IP形象，一個是像地球一樣的自轉，一個是像風箏一樣在天空飛的效果，動態十分流暢且有趣。

3.記錄心情

記錄心情這個是個很有趣的設計細節，在記錄心情發表后，在查看心情的小罐子里就能夠看到你的心情小表情，并且還有心情占比、情緒波動分析，最后在日歷上還能看到每日心情的狀態，可以很好的記錄每日的心情。

查看心情

3.彩蛋設計

1.放個氣球

放個氣球把心情寫進氣球發送出去，可以抒發自己的情緒。同時，你想自己接收就可以點收一個，出現氣球動效加載，就會接收到別人發出的信息，不想要了，可以點放飛消息就沒有了。

收氣球

2.發射泡泡

雖然泡泡這種形式很常見，但是遙望在細節處做的設計還是很用心，很容易觸動用戶。發射泡泡很容易讓然想到泡泡相機，加上“biubiu”的音效，有很強的場景感。

2. 配配app

1.視覺設計

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

2.文字字體

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

3.品牌融入

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

2.動效設計

1.點亮

點亮設計就是點擊后，寫下一個故事就可以和其他用戶打招呼了，點亮后燈泡會發出光，然后有星星散落下來，將表情運用在按鈕上也是很新穎的設計方法了。

2.發布動態

發布動態的功能IP會向你招招手，引導用戶參與發布動態。

3.動態背景

配配的動態背景很有意思，打call、吃蘋果、打盹，根據不同用戶展示不同的動態背景。

3.糖果app

糖果app的設計在于匹配器和其他的很與眾不同，像是在一起炫舞的樣子，看起來很有場景感。糖果app的整體視覺風格比較中規中矩，

不過有一些的功能設計和設計小細節值得體驗一下。

1.廣場匹配器

糖果的首頁的匹配器設計是一群人在廣場上一起炫舞，然后各自擺著不同的怪異的姿勢，設計上十分新穎。

2.戀愛上上簽

戀愛上上簽就像我們去寺廟里求姻緣一樣，通過搖晃簽子就可以找尋到好姻緣。罐子上的表情左看看右看看然后閉上眼睛，最后終于連接上一個十分匹配的好友。

3.解憂罐子

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

4.無聊嗶嗶雞

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

4.Blurrr app

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

引導頁的設計用多彩的圖形設計+表情+動效設計的方式，打造了靈動的引導頁設計，形成了自己很獨特的風格。

作者：章魚鋪里
來源：站酷

一、Photoshop(Beta)版本安裝

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

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

點擊「試用」按鈕，會調起電腦中的Creative Cloud應用，正常來說大家電腦里有Adobe軟件一般都會有Creative Cloud，沒下載的話按提示下載就可。

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

Beta版PS白色的logo和有趣的啟動頁面??

二、AI創意填充功能

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

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

「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]裁剪工具在畫布左邊拉一個空白。

② 切換到[M]選框工具，框選剛才拉出的空白畫布，下方會出現一個工具欄。

③ 點擊工具欄的第一個「創成式填充」按鈕，進入到AI創意填充功能。

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

·PS的輸入框沒有復雜的指令，只需要輸入關鍵詞描述，就能夠在選區內生成想要的內容；

·支持不輸入內容，直接點擊「生成」按鈕，AI會根據畫面周圍的內容智能填充選區。

三、不輸入內容直接生成

第一次體驗我沒有輸入任何內容，直接點擊PS的「生成」按鈕，一次能生成3張圖片。點擊左右箭頭可以切換查看3張圖，如果覺得不滿意可以再點擊「生成」，再生成3張填充圖。

效果圖1??

效果圖2??

效果圖3??

第一次測試生成的圖片效果遠超出預期，和原圖風格也很接近，唯一不足的地方是和原圖拼接處有一條白線，看起來有點礙眼。

經過多次嘗試后，終于發現了問題所在：如果框選時剛好只選取了空白畫布，生成出來的新圖和原圖之間就會產生明顯的接縫。簡單高效的解決方式是在框選畫布的時候多框一點點原圖。

這樣再點擊「生成」按鈕，運算出來就會有很完美的過渡，看不出破綻。

四、輸入關鍵詞描述

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

「Particle effect, sense of technology」

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

效果圖1??

效果圖2??

右側的屬性欄會記錄你剛輸入的關鍵詞，可以隨時修改關鍵詞，點擊再次生成3張圖，依次類推，生成的所有圖都會保留下來，方便選擇。

最后

通過這次體驗感覺PS的AI填充非常強大，而且效果很精準，誰能想到在PS中就能完成對一張圖的拉伸和智能填充。

作者：Clippp
來源：站酷

作者：餿面包
來源：站酷

在大數據盛行的今天，人們不僅僅講究以事實說話，更愿意以數據講話。數據作為結果的直接衡量指標，更真實、也更具有說服力，那如何直觀的展示數據，幫助決策者做出正確決策或行動，發揮數據最大的價值？可視化數據大屏應運而生，讓我們一起來談談吧

一、可視化數據大屏是什么？

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

我們人的大腦處理視覺信息的速度比文字快幾萬倍，將抽象的數據轉化成圖表、圖形能更快速幫助我們更快理解數據中的含義，趨勢以及相關性。

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

數據大屏可分為信息展示類、數據分析類、監控預警類，多展示酷炫的效果，數據之間有層次區分，好的數據大屏是布局、色彩、圖表、動效的綜合運用。

二、可視化數據優勢是什么？

數據可視化，讓很多員工從繁瑣復雜的數據工作中解脫過來，那它到底有什么優點呢？

優點一：解鎖大數據內容的關鍵

近幾年來，國家的相關法律政策相繼出臺，大數據企業的技術研發水平不斷提高，促使大數據行業市場規模從 2014 年的 212.5 億元增長至 2020 年的 548.5 億元，數據可視化對于公司發現解鎖數據潛在價值意義重大。

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

優點二：數據可視化加快了決策過程

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

比如當上圖科學決策平臺的網絡總數特別時多，決策者可以快速調取相關數據找出異常原因 —— 是上次活動運營推廣到位，故增加了很多用戶？也就是決策者可以通過異常數據快速鉆取數據，用來解釋正在發揮作用的運營條件或決策與所遇到的指標之間的關系。

優點三：可視化數據便于溝通及被關注

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

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

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

制作數據可視化的工具有很多，最常見的就是Excel工具，非常容易上手，基本人人都會，操作簡單，但它的缺點也很明顯，沒什么特色，靜態數據展示過于死板，樣式老舊。第二類是Python等編程類工具，這類優點是碼數據速度快，自動獲取，看起來很高端，但缺點也很明顯，如：學習成本高、學習比較困難、很難比較熟練的掌握等。

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

1.網易有數

網易有數大數據是一個企業級的大屏大數據可視化展示系統平臺，具有深度的交互式數據探索。它有豐富的使用場景，支持數據接入、數據導入處理、數據分析生成報告等，用戶無需編程，簡單拖拽即可生成可視化圖表。缺點是數據探索性分析能力有限。

網易有數可視化實戰案例——業務安全大屏。通過大屏進行業務安全監控，清晰的展示各業務分布要點的數據情況，頂部實時更新各重要區域數據情況，銷量對比、售后情況，產品產比，以及用戶分布也有清晰的直觀展示。

2.FineBI

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

帆軟可視化實戰案例——銀行大屏駕駛艙。通過大屏直觀展示銀行存款、貸款數據，業務辦理詳情等，圖表形式展示內部管理、外部管理情況，分行放貸統計情況等，便于數據管理查看及決策制定參考。

3.阿里Data V

Data V是阿里云內部的可視化大屏開發平臺，同時面向開發者和零基礎用戶，支持大屏圖形化編輯和在線編程開發，可幫助非專業的工程師通過圖形化的界面搭建專業水準的可視化應用。

它有海量行業模板，DataV數據可視化設計團隊會定期從大量真實項目中尋找優質場景，制作為模板，涵蓋媒體、零售、工業、電商、金融、防疫、氣象等多個行業，為用戶提供會議展覽、業務監控、風險預警、地理信息分析等各種設計參考。

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

DataV數據可視化實戰案例——智慧工廠生產控制大屏，綜合呈現了每個生產階段的生產狀態參數，將整個車間的情況匯總到一個調度控制中心，方便管理人員了解各階段的工作情況。

4.EasyV 數據平臺

袋鼠云數據可視化EAsyV，擁有業內領先的數據可視化大屏故事策劃、視覺設計、前端和數據開發技術實力，尤其擅長3D模型展示，基于GIS地理信息展示等。它里面有豐富的組件，樣式制作精美，支持多種不同類型的數據導入，還有動態面板和交互功能，讓大屏看起來更靈動。

EasyV數據可視化實戰案例——寧波圖書館可視化平臺。大屏包含人流分析監測、讀者畫像分析、借閱行為洞察等，從多角度全面的幫助用戶及時把握場館運營效果，為其提供館內建設與活動運營的監控分析服務。

四、如何設計出好的可視化大屏？

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

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

如上方的品牌銷售數據大屏，銷售額與門店數，數據明顯，與銷售額相關內容有季度線上線下銷售額，會員數、款式數量、爆款排行等，故這塊內容排在左側。右側就是區域訂單、毛利統計。中間放用戶關心的地圖區域分布、爆款分析等內容。

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

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

五、最后

設計可視化數據大屏時我們設計師要抓住問題的重點，即這樣設計出來的內容能不能真的讓數據產生價值，能否經得起業務部門推敲？是否為企業經營提供了幫助？思考完這些再去做的大屏更有價值，大屏做的酷炫是其次，能夠讓人一目了然的看見關鍵信息，聯想到業務實際，才是我們設計師最需要關注的方向。

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

一、費茨定律

費茨定律(Fitts'sLw)是一個描述人類運行學的經驗公式，用于計算人們移動手指或鼠標等設備到某個目標的時間，以考慮目標大小和距離為主。 

費茨定律的公式是T=a+blog2(D/S+1)，其中T是時間，a和b是實驗測得的常數，D是目標的距離，S是目標的大小。說明了在給定目標情況下，目標距離越遠，需要的時間越長；在給定距離的情況下，目標越小，需要的時間越長。

費茨定律廣泛地用于人機交互界面設計中，例如在B端常用的設計按鈕上，可根據該定律來選擇適當的目標大小和間距，以使用戶更好地達到業務目標。 

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

二、米勒定律

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

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

三、格式塔原理

格式塔原理是心理學的一個概念，也廣泛應用于設計領域中。該原理認為人類大腦在處理感知信息時，會自動將信息組織成具有整體性、完整性和結構性的形態，即所謂的“格式塔”。

在設計中，格式塔原理有幾個常見應用： 

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

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

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

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

相似性原則的應用比如在B端的卡片設計中，所有的卡片樣式相似在人腦理解中默認會視為相同的一組數據。

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

對稱性原則常用在大屏與報表設計中，通過對稱性布局提高視覺美感，吸引用戶注意力。

閉合性原則常用于連續性表格或圖形等設計中，通過不連續性來讓用戶大腦形成封閉路徑強調后續可讀信息。

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

四、雅各布定律

雅各布定律(Jacob'sLaw)是一條常被引用的交互設計法則，它由美國心理學家Donald Norman提出。該定律指出，人們在使用任何新系統時，都會將他們以前所經驗過的類似系統的知識應用于新系統。

雅各布定律的核心思想是，在設計新系統時，應該考慮到用戶的現有經驗和期望，并盡量避免創造完全不同的界面模式。這樣可以使用戶更容易理解和掌握新系統，并減少學習成本。

比如在B端設計中常用到的圖表編輯快鍵可以延用用戶在其他系統常用到的快捷鍵，如win或mac系統都常用到的快捷指令可復用到B端產品的快捷操作中。

五、防錯原則

防錯原則(Principle of Fail--Safe or Fault-Tolerance)是一種設計思想，其目的是減少或避免因錯誤或故障而導致的不良后果。它通常被用于設計高度可靠的系統或設備，以確保在錯誤事故發生時，系統或設備仍然能夠繼續正常運行，或者能夠平穩地停止運行，以避免進一步的損害或危險。

在界面設計中如設計可撤銷操作，通過系統中允許用戶執行可撤銷操作，以避免因誤操作而導致的不良后果。

或在界面設計中常用到的反饋和提醒彈窗等操作，以幫助用戶及時發現錯誤或故障，并采取適當的措施。

六、泰思勒定律

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

該基本定律覺得：該定律認為每一個過程都有其固定的復雜性，存在一個臨界點，超過這個點過程就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。

可以通過簡約至上的隱藏、轉移、刪除等原則進行用戶體驗的提升。

七、奧卡姆剃刀原理

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

奧卡姆剃刀常用于兩種假說的取舍上：如果對于同一現象有兩種不同的假說，我們應該采取比較簡單的那一種。對于幾個功能相同的設計，在設計都可用的情況下，則選擇視覺干擾較少的設計。

在設計上則能夠指導我們對產品做減法，去減少不必要的元素，在進行設計的時候，先分析用戶的的主流程是什么，流程內的引導盡量弱化，沒有必要則不增加。

比如在B端產品設計中的登錄頁面以登錄流程為核心，不需要增加其它沒必要的流程。

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

文章來源：優設網    作者：麗創輕文

一、引言

中國互聯網公司的迅速發展正在推動著整個軟件行業的審美革命，在C端產品市場逐漸飽和的情況下，互聯網大廠正在將資本逐步轉移到B端市場的廣闊藍海中?！盉端C端化“的設計理念也應運而生，認為可以用C端的模式和思維來進行B端產品的設計。 

二、背景

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

并且不斷優化迭代的互聯網軟件產品也在無形中為用戶完成了底層認知的搭建，一些功能、操作、交互邏輯已經深入人心，用戶也已經被教育成了"高玩"。 

所以如今一些新型B端產品的設計理所應當的在用戶體驗五要素中最貼近用戶的結構層、框架層 和表現層中與一些C端產品在一定程度保持了一致，這種設計理念其實也很好的解決了傳統軟件的復雜、門檻高、難用等痛點，很大程度降低了用戶的認知成本和學習成本，把高效、簡單、易用的工具帶到大家的日常工作中。 

三、對B端C化的理解

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

但是也不能以偏概全的認為C端的設計思維可以完全復用過來。B端產品的場景其實比C端產品還是要復雜的多，應該說是各有各的側重點，思維和設計模式上不能完全照搬，下面我就先說說它們各自的不同處，再舉例帶你看看B端產品在哪些方面可以向C端產品借鑒學習。 

四、B端C端的不同

1.使用者不同

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

2.業務不同：

B端業務大多數會存在多重維度、場景，使用場景跟業務緊密相關，同一個系統不同角色使用時的業務處理和所關注的數據信息，側重點會有很大的不同，需要全局考慮。不同角色使用產品的流程差異大，需要不同業務上更專業的解決方案。而C端業務一般維度比較單一，業務邏輯相對固定，任務路徑和展示內容比較單一。 

 3.價值主張不同：

B端注重效率、成本、管控、數據分析等。追求產品的穩定性、業務的增長性，保證產品性能和技術上的安全性。而C端注重用戶的體驗、使用簡單、有樂趣。 

4.產品思維不同：

B端產品多數基于服務思維，工具化思維，更加理性；更多的是幫助B端用戶提高效率，完成業務目標。而C端多數為產品化思維，游戲化思維，更感性，更多的是娛樂和情感的滿足。 

5.產品形態不同：

B端產品注重業務的梳理，多數會用到圖表、表格、模型，多數產品形態偏向更垂直行業或更專業的面板形態。而C端更注重用戶的感受，會用到很多夸張的動效，炫彩的顏色。 

五、B端C化在產品中具體的表現

1.結構層 

結構層確定各個將要呈現給用戶的選項的模式和順序。結構層是用來設計用戶如何到達某個頁面，并且要考慮他們完成事情之后能夠去哪里。 

具體在B端產品的表單交付場景下可以體現出，以前的B端表單往往過于冗長，借鑒C端一些注冊場景的設計，把表單拆分成3步內的行為步驟，減少用戶的疲憊感提升體驗。 

2.框架層

產品的框架層包括：按鈕、控件、照片、文本區域的位置?？蚣軐邮怯糜趦灮撁嬖O計布局的。 

具體在B端產品的列表頁可以體現出，列表頁中整體的按鈕、文本區域的位置、搜索和篩選的布局設計其實與C端產品中的商品詳情頁是類似的，遵循用戶的閱讀順序和視覺焦點來進行設計。 

3.表現層

視覺、聽覺、（觸覺）的體驗設計。多體現在一些情感化的設計也被運用在了B端產品中。 

六、B端C化未來的設計方向

反觀現在C端產品的一些設計風格和流行趨勢，有哪些可以運用在B端產品的設計中呢？ 

1.3D化

B端因為對數據的展示有較強的需求，用戶在使用過程中提高效率的判斷緯度也包括信息數據的獲取效率，而3D的視覺在數據可視化層面有著天然的優勢，可以幫助用戶更快速的理解數據維度所表達的核心價值。近年來網速等硬件設施的升級也為3D化視覺帶來可落地的基礎，設計師也嘗試在產品設計中融入更多的3D化元素。 

2.情感化

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

3.個性化

B端產品的同質化嚴重，所以B端產品也需要從一些產品定位去定制更加富有個性的品牌基因，可以讓用戶產生對產品的感情，達到從同類產品中能夠脫穎而出的目標。 

七、總結：

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

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

文章來源：優設網    作者：酷家樂UED

前言：為什么要看懂B端基礎邏輯

相信很多設計師同學都接觸過B端產品，對于很多設計師而言，遇上B端產品是一件令人又愛又恨的事情，愛是因為目前市場上大多數的公司主要經營的都是B端系統，B端系統相對于C端來說UI界面顯得并沒有那么的重要，所以設計師的責任也相對沒有那么重，而恨是因為目前大多數B端系統頁面都是由前端UI框架搭建的，前端同學很多時候直接套用組件即可，所以UI設計師對于整個系統來講也顯得可有可無，導致設計師話語權也特別的低，甚至有些做B端系統的公司壓根不用UI設計師也能完成項目開發。

但是作為交互設計師(小公司一般是產品經理)在B端卻特別吃香，并且擁有主要的話語權，因為我們主導這整個系統的基礎邏輯與業務邏輯設計，所以無論是前端還是后端同學都需要根據我們的設計進行開發，最終完成整個系統。

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

一、B端產品有哪些基礎邏輯

B端產品和C端不同，C端產品大多數都是針對個人用戶，設計的關系結構相對來說比較簡單，每一個用戶擁有的權限都是一樣的，例如微信、淘寶等，我能看到的頁面你都能看得到，很少不存在權限差異問題。

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

看完上面文字的同學可能蒙了，又角色又權限的，能不能說點人話？

行！其實很簡單，B端系統無非三個邏輯（也是三個頁面）：用戶管理、角色管理以及菜單管理。（有些系統因為業務需求可能有部門管理，那么算上部門管理就四個）

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

（1）什么是菜單

為什么我把菜單放到最前面跟大家講？是因為菜單管理比前面兩個相對簡單，而什么是菜單也特別好解釋，大家可以直接認為系統左側的頁面列表就是菜單，系統中擁有多少個頁面那么就有多少個菜單，你的菜單越多就以為著你的權限就越多。

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

（2）什么是權限

在講解用戶之前我需要提前跟大家講一下什么是權限，準確來講應該是權限分為哪些？

在目前的后臺系統中，權限一共分為三種權限，分別是菜單權限（也就是上面介紹的）、數據權限以及操作權限。

菜單權限決定了用戶有沒有這個頁面，例如學校系統中，主任有看到所有教師的教學數據的界面，而教師卻沒有這個功能，那么在給主任新增賬號的時候就應該把對應菜單賦予進去?？瓷先ズ軓碗s，其實具體操作就是新增的時候把對應的菜單勾選上就可以了。

數據權限則決定用戶能不能看到對應的數據。還是學校系統的例子，初中部主任只能看到初中部所有教師的教學數據，而高中部主任也只能看到高中部教師的教學數據，不同用戶能看到的數據也是不同的，所以在新增的時候需要給用戶配置（一般配置就是勾選）好對應的數據權限。

但是這里有一個問題，配置數據權限時我們如果一個一個人去勾選配置的話會特別的麻煩，假如初中部主任只能看到初中部的老師，那么我在給他配置賬號的時候需要一個一個的初中老師勾選上，張三、李四、王五..等等，如果人多的話可能需要勾選成百上千次，用戶體驗就會變得特別差，因此現在的系統在配置數據權限時都是以部門為單位進行配置，也就是說，直接選擇部門就代表著擁有整個部門的數據權限。

最后操作權限即決定了用戶有沒有對數據進行操作（一般是增刪改查）的功能。還是上面的例子，初中部主任擁有查看教師的頁面以及數據，那么他能不能對教師們的數據進行增刪改查或者導入導出呢？這就取決于操作權限的配置了。目前很多的后臺系統在配置菜單權限的時候同時需要把操作權限進行配置（因為只能先有頁面才能進行操作），操作權限一般就是增加、刪除、修改以及查詢，當然如果頁面還有導入導出或者其他功能，這些也需要在操作權限中進行配置。

（3）系統中的用戶

用戶其實也很容易理解，B端系統的用戶其實就是需要登錄進系統的賬號，所以有一些系統的用戶管理也叫賬號管理。

因此用戶管理的作用就是對登錄進系統的賬號進行增刪改查等，當我們需要對別人提供一個賬號時，我們就新增一個用戶的賬號密碼給他們，直到他們用完了再把他們的賬號進行刪除。

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

例如在學校系統中：普通教師只負責自己班級學生的成績錄入，所以普通教師只有班級成績錄入的菜單，但是學校主任卻不一樣，他不僅僅能看到各班學生成績，還能根據各班成績進行對比分析，年級學生排名等等..

因此在剛開始的傳統權限系統中，我們會直接把相應的菜單權限、數據權限、操作權限賦予給用戶，每新增一個用戶我們就選擇好所有的權限都勾選上賦予給用戶，最后提供給用戶進行操作。

然而這種操作方式有一個弊端，就是如果每新增一個用戶，系統管理員就需要重復進行勾選相同的權限，那么就會耗費大量的精力（一個用戶要配置的權限特別多，如果用這個方式操作的話新增一個用戶可能就需要花費很長時間）。因此，為了解決這個問題，我們在用戶與權限之間建立了角色管理。

（4）角色的作用

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

有了角色，我們可以先把對應的權限集合賦予給角色，然后新增用戶時，再選擇用戶對應的角色即可。

這樣做的好處是什么呢？好處就是當我們新增用戶的時候，如果是相同角色的用戶，我們不再需要重復去大量勾選相應的權限了，只需選擇好該用戶是那個角色就可以間接對用戶賦予權限，并且后續要對用戶進行權限的修改也十分便捷。因此，在現在的后臺系統中，大多數都是采用權限賦予角色，然后新增用戶時再選擇用戶對應的角色的方式。

三、整體流程

如果看完上面的知識點還有點懵的話也沒關系，這部分給大家展示在后臺系統中菜單管理、角色管理與用戶管理的實際應用是怎樣的。

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

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

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

四、最后總結（特別重要）

用戶管理、角色管理以及菜單管理是B端系統最基礎的邏輯，也是同學們將來需要轉崗B端交互設計師或者產品設計師所必須掌握的知識，上面所介紹的僅僅是RBAC模型中最簡單的一種，現實設計中可能出現各種情況，因此關于這次的B端產品設計我想給大家幾點Tips：

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

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

    3、上面介紹的管理操作都是基于超級管理員賬號（admin）進行操作的，如果你拿一個普通賬號的話一般是沒有對應的菜單權限，我擔心有同學看完文章后馬上登錄自己的后臺系統進行操作，接著登錄進去找了半天都沒有找到對應的菜單在哪里。

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

文章來源：優設網    作者：北沐而川

作者：餿面包
來源：站酷

進入喜茶小程序的時候給我的感受是簡潔、時尚、極致的設計風格，截了兩張小程序內的兩個界面。 確實做的還挺不錯的，為什么給人感受不一樣？接下來我們分析分析

1.版式

1.首先從下面的頁面我們能發現，界面的排版只有卡片左邊距留了20的安全距離，而卡片右邊安全距離為0，這樣特別的版式設計給人不對稱的感覺，這樣的設計能讓用戶記住，同時又有一點時尚范的感覺，很符合喜茶目標用戶年輕人的審美。
2.同時產品的banner是3:2的比例，較為靠近黃金比例的尺寸。 

1.點單頁面，喜茶新增了新品推廣位，一些新上的產品都會在推廣位呈現，尺寸比例4:3，給人的感受像是線下海報一樣，同時第三個廣告位露出部分，讓用戶知道后面還可以左滑查看。同時推廣頁的右下角有個箭頭指引，告知用戶可點擊。 

2.看完這幾個頁面會發現，喜茶的基本上都是純直角的設計語言，推廣頁是直角、標簽是直角、按鈕微圓角，直角的設計語言給人的感受是時尚、極致、極簡的設計感受，個人非常喜歡。 

3.但是點單頁面的有點亂，標簽的顏色過多，不夠統一，圖標的也非常的多，這樣給人的感受就會比較凌亂，盡可能少的去表現，這樣更加能提高用戶的效率。

1.在點單頁面用戶上滑，推廣位漸漸的往上消失，這樣產品的展示會更多，利于用戶挑選和尋找。 

2.用戶在選口味界面，發現每一個標簽的內的文字左右的安全距離一致，依次排列，具有節奏感，頁面給人感受簡潔、易操作，同時用戶可以選自己的口味，可進行保存，下次點直接就可以選擇自己的口味。

在喜茶的百貨界面能清晰發現每一個模塊的都是不一樣的，很多產品的商場頁面都是一致的，而喜茶在產品的展示會以不一樣的形式出現，每一個模塊都有尺寸和排版的差異，這樣給用戶有種落錯感，更加有設計。

2.會員頁

1.喜茶的會員頁給我眼前一亮的感覺，會員的背景用色都是明度高、純度低的漸變給人的感受清新、淡雅的感覺。 

2.會員頁用戶在切換的同時圖標的顏色會跟著會員的顏色變化，特權的內容也會有不一樣的變化，讓用戶有明顯的等級感知。 

3.切換到“黑卡”的時候，會發現會員頁的“喜”字加上了質感。 

4.會員卡上“喜”字提取了“喜茶”中的“喜”，跟其他產品的會員做了區分的同時又加深了品牌印象。

3.圖標 

喜茶有兩種不同風格的圖標，一種是比較極簡，線性，差異性沒有那么強，而另一種則是插畫風格的圖標，給人感受比較有趣，更有差異，極簡則符合喜茶整體小程序的調性，而插畫又豐富了頁面的單調性。

4.動畫 

1.喜茶頂部的banner做非常不錯，例如跟FENDI合作的會在首屏加入視頻，用戶一進入小程序就能看到能很好的吸引用戶的注意。 

2.用戶在左右切換banner時，文字會先出現然后底部的圖片漸漸出現，給用戶感受自然、流暢的感受，好的動畫效果能給產品加分，給用戶留下好的感受。

5.字體

1.喜茶的數字字體是NeutraText-DemiAlt，每次進去喜茶看到他們的數字字體非常有獨特性，給人的感受時尚、極致、有設計。 

2.部分界面和海報喜茶會用上方正悠宋，有點中國風、古風的韻味在里面，而且也非常有獨特的設計美感，喜茶會應用在國風的海報以及會員頁的“喜”字上，突出風格化。

3.好的字體能很好的提高產品的品牌感和設計美感，更能傳達該品牌想傳達的東西。

6.更多界面欣賞

作者：黃小偉
來源：站酷

一、獲取原型圖

從產品經理處獲取項目原型圖，當獲取到原型圖后不要盲目的去進行設計，要先分析了解整個項目的功能、特性、用戶群體、項目的定位等等，特別是對功能的疑惑處一定要找產品經理溝通，只有做到對項目了熟于胸才能做出優秀的設計。

二、競品分析

當我們對項目的功能、特性、用戶群體、項目的定位都有所了解后，還是不能馬上進入設計環節。我們需要先對市面上同類型的產品進行分析和對比，包括設計風格、配色、排版、功能樣式等等，了解其優劣勢，做到取長補短，思考如何讓我們的產品更加的完善，這時候我們的腦海里面基本上對自己要設計的東西已經有了一個大概的雛形。

三、設計UI界面

1、界面設計規范

這篇文章內所有的數值均以2倍圖為例，使用1倍圖的同學請自行除以2。

現在UI設計通常使用的是全面屏的設計規范，全面屏的設計稿更加美觀，且做作品集的時候搭配全面屏樣機視覺效果也更加突出。通常只設計一套蘋果全面屏的設計稿，不需要另外設計安卓端設計稿，安卓端由安卓工程師自行適配。

界面尺寸：

界面：750px1624px

狀態欄：750x88px

導航欄：750x88px

菜單欄：750x98px

指示器：750x68px

左右邊距：32px或24px

*其中狀態欄和指示器不需要進行額外的設計，是系統默認控件，除顏色外不可改變。

常用圖標尺寸：

頂部功能：48x48px

底部菜單欄（有文字）：48x48px

底部菜單欄（無文字）：64x64px

文字：

尺寸：36px、32px、28px、24px

顏色：正常（#333333）、輔助（#999999）、未輸入提示（#CCCCCC）

*利用文字尺寸對比和顏色對比可以得到不錯的效果。也可以給文字顏色添加少量的藍色，讓顏色不那么呆板。

2、組件控件系統

組建控件系統可以讓我們的設計稿更加的規范，也便于修改，可以極大的提高我們的工作效率。

所有的圖標都需要做成控件，方便我們切圖。然后就是會重復使用的狀態欄、導航欄、菜單欄、指示器、列表、彈框、按鈕等控件。

除了我們常用的控件以外，顏色、投影等特殊效果、文字大小都可以保存樣式，把項目的配色、特殊效果、文字尺寸都保存下來，不同的設計工具有不同的保存方式，大家可以根據自己使用的設計工具進行設置。

3、設計風格

我們需要讓項目保持一個統一的設計風格，讓項目更加的整體、統一、協調。不同的風格有不同的優勢，選對與項目屬性相符的設計風格可以讓項目更加的出彩。

傳統UI風格：

這種風格沒找到合適的名稱，我個人一般叫它傳統風格。這種設計風格使用分割線分割小的模塊，用背景色塊分割大的模塊，特別適合列表信息。雖然給人感覺沒有特別強烈的設計感，但簡單實用、樸實無華，層級劃分清晰明了。

卡片式風格：

卡片式風格是借用現實世界中卡片的特征和概念，將一個模塊或同類型元素放到一個卡片容器類，可以增加內容的獨立性，讓模塊劃分關系變得非常的清晰，是現在非常常用的一種設計方式。

常用做法是采用淺灰的背景+白色卡片的方式，卡片都帶有一定的圓角，類似于將撲克牌一張張的放在桌子上，桌面是灰色背景，每一張撲克牌就是一個卡片。也不排除暗夜模式的卡片式設計，背景會更暗一些，卡片略亮。

大標題去線段化：

在傳統UI風格的基礎上去除背景色塊和分割線，單以間距來區分模塊和元素，對親密性的應用有較高的要求。有時候單以間距來區分模塊和元素時，可能會導致模塊層級不分明，所以會使用將標題加大的形式，讓模塊與模塊之間的區分更加明顯。因為去除了分割線，留白就更多，會顯得界面更加的干凈、清爽。

新擬態設計風格：

新擬態是19年底在追波開始出現的一種設計風格，特點是使用統一的光源做出立體的浮雕效果，元素有厚度但沒有紋理和材質的輕擬物風。

常規做法是假設一個統一的左上方光源，給元素分別添加一個左上角和右下角的投影，左上角（被光源照射的一側）投影使用亮色，右下角投影使用暗色，讓元素可以浮起來。而在按下或選中狀態時則使用兩個內陰影，左上角暗色右下角亮色讓元素凹下去。需要注意的是界面模塊和背景色一般是同一個顏色，所以顏色不能使用純白或純黑，否則有一側的投影就會看不見，通常是使用藍灰色或深灰色背景。

新擬態風格視覺效果新穎、柔和，對比度低，看得久了會產生一定的視覺疲勞，研發成本也較高，所以現在更多的還是處于概念稿，實際項目中應用較少。可以作為一種練習或部分功能的使用。

四、交付

1、切圖

設計稿完成之后我們需要將圖標等元素切圖導出交付給開發，IOS和安卓需要根據要求導出不同倍數的png格式切圖文件。

切圖套數

IOS：現在通常是輸出2套，以@2x、@3X為后綴，也就是2倍圖、3倍圖；

Android：現在通常是輸出3套，xhdpi（超清，對應IOS的2倍圖）、xxhdpi（超超清，對應IOS的3倍圖）、xxxhdpi（超超超清），安卓切圖不需要將倍數加到切圖命名內，而是每種尺寸單獨建立一個文件夾。

輸出格式

png：最常用的切圖文件格式，背景無底透明，所以在導出切圖文件時需要先去掉背景色（figma將畫板填充色隱藏，sketch畫板不要勾選“包含于導出項”）；

svg：矢量切圖，需要背景無底透明，部分網頁端項目可能需要svg格式的切圖文件；

bmp：部分硬件機器的項目需要使用的圖片格式，需要注意的是bmp無法實現背景透明，如果背景是透明的會自動帶上白色，需要切圖文件把背景帶上一起切，而且figma和sketch等UI設計軟件無法直接導出bmp格式，需要先導出為png或jpg格式，再使用ps或其他工具轉換一次。

切圖命名

只能使用英文、下滑線、數字進行命名，不要使用中文和特殊字符。命名方式一般是類別_位置_功能_狀態（有些切圖沒有多種狀態則不需要添加狀態命名）。

以蘋果端舉例：如底部菜單欄的首頁圖標命名則是ico_bottom_home_nor@2x（圖標_底部_首頁_未選中狀態）和ico_bottom_home_sel@2x（圖標_底部_首頁_選中狀態）。

頂部的搜索圖標沒有多個狀態，命名是ico_nav_search@2x（圖標_頂部_搜索）。

類別一般只有3種：圖標（icon）、圖片（image）、按鈕（button），我們通常會簡寫為ico、img、btn。

狀態一般只有4種：正常（normal）、按下（press）選中（selected）、禁用（disabled），我們通常會簡寫為nor、pre、sel、dis。pc端會多一種狀態：懸停（hover）。

sketch和figma等UI設計軟件可以同時導出多個尺寸的切圖文件和前綴/后綴，所以我們只需要設置圖標本身的命名如ico_bottom_home_sel，而不需要每個切圖都去手動的添加IOS后綴的@2x和@3X，以及安卓的前綴xhdpi等，在導出設置中設置好每個尺寸的文件夾名稱和后綴，再統一導出即可。

切圖輸出

軟件內部導出：現在的UI設計軟件Sketch、Figma、Mstergo等都可以直接導出切圖文件，只需要設置好相應的倍數和前綴、后綴，就可以快速的導出切圖文件；

上傳第三方：最常用的就是將設計文件上傳至藍湖，研發人員可以在藍湖上下載自己需要的切圖文件，但在上傳藍湖之前需要把設計稿中需要切圖的元素設置為切片。

2、標注

和切圖文件一起交付給開發的還有設計稿的標注文件，讓研發人員可以清楚地知道界面內元素的顏色、尺寸、對齊方式、距離、透明度，文字的字體、字號、行高等。

輸出到藍湖

很多設計文件都可以安裝藍湖插件，再通過插件將設計稿導出到藍湖，研發人員就可以便捷的查看界面的標注。

軟件內部標注

Figma、Mastergo等在線設計軟件都可以切換為開發者模式，只需要將研發人員邀請到自己的設計文件所在團隊內，研發人就可以查看到界面的標注；

插件導出

有部分公司有一定的保密措施，會禁止設計師使用第三方平臺或是聯網操作，這種情況設計也無法使用Figma、Mastergo等在線設計軟件，只能使用Sketch等客戶端，輸出標注就需要使用相應的插件，Sketch可以使用Sketch Measure導出HTML格式的標注文件。

五、上線

在項目上線的階段UI設計需要輔助研發提供上線應用商店需要的項目預覽圖、啟動LOGO，也需要設計補充出APP的啟動頁、閃屏頁等。

1、項目預覽頁

上線應用商店需要的預覽圖，通常是使用項目中比較有特色的幾個UI界面加以設計。

2、啟動LOGO

上線應用商店必須提供的LOGO，手機中啟動APP的入口，但不同的應用商店有不同的尺寸，華為、蘋果、小米、三星、應用寶等所需要的啟動LOGO都有所不同，所以輸出多個尺寸。以蘋果App Store為例，需要以下尺寸：

3、啟動頁、引導頁

啟動頁和引導頁一般是和UI界面一起設計，不過需要項目上線后才會有其價值，所以可以先設計完項目的界面，在研發開發的過程中再去設計啟動頁和引導頁，只要在項目上線前提供給研發就可以。

六、持續跟進和優化

當一個項目上線后，只能代表我們的現階段的工作已經全部完成。每個項目上線后都會收集用戶反饋，根據用戶反饋的信息優化功能和界面設計，通過持續不斷的優化、迭代讓我們的產品越來越好，這個過程中也需要我們UI設計不斷的去進行調整和優化。

作者：Mu姜子
鏈接：https://www.zcool.com.cn/article/ZMTQxMDY1Ng==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。