国产成在线人视频免费视频-国产成综合-国产床上视频-国产大臿蕉香蕉大视频女-国产大尺度pr社18福利在线

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》線條是新開始

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.z1277.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

 一、導(dǎo)航欄的構(gòu)成 

整個導(dǎo)航欄通常分為左、中、右三部分，左側(cè)和右側(cè)主要用來放置功能控件，中間部分主要用來放置文字標(biāo)題，接下里展開分析左中右三部分的構(gòu)成。

左側(cè)導(dǎo)航

放置在APP頂部導(dǎo)航欄左側(cè)的控件很多都跟動作相關(guān)，例如執(zhí)行返回動作、關(guān)閉動作或者點擊漢堡菜單進(jìn)行展開動作等。

除了在左側(cè)放置表示動作的控件，還可以在放置頭像框、消息提示等優(yōu)先級較高的內(nèi)容，用來引起用戶的注意。

在網(wǎng)頁端的頂部導(dǎo)航欄中，左側(cè)都會放置品牌logo，因為網(wǎng)頁端頂部的空間更大，所以還可以在LOGO周圍結(jié)合徽標(biāo)、搜索框、下拉菜單等空間。

中間部分

APP頂部導(dǎo)航欄的中間部分主要用于放置標(biāo)題，當(dāng)然根據(jù)使用場景的不同，還可以放置頭像、搜索框、下拉框、導(dǎo)航等控件。

1) 標(biāo)題

最常見的是在中間使用加粗的文字作為標(biāo)題，也可以使用主標(biāo)題+副標(biāo)題的形式來展示更多的信息。

還可以把標(biāo)題區(qū)域做成支持下拉的樣式，擴展更多的功能全。

2) 用戶頭像

在社交類產(chǎn)品或?qū)υ捒蛑校瑫谥虚g部分放置用戶的頭像和信息，用來展示用戶的詳細(xì)信息。

3) 產(chǎn)品Logo

有些產(chǎn)品還會將Logo放在導(dǎo)航欄的中心位置用來展示品牌形象，在APP的首頁可以考慮這樣設(shè)計，起到強調(diào)作用。

4) 分段控件

在移動端產(chǎn)品中，還可以在中間部分放置分段控件，通常2-3個標(biāo)簽，在早期的網(wǎng)易云音樂APP中就用到了這樣的設(shè)計，通過點擊標(biāo)簽或者左右滑動頁面完成內(nèi)容切換。

5) 搜索框

導(dǎo)航欄中間經(jīng)常能看到搜索框，然后搜索框左右兩邊放置其他的控件。當(dāng)導(dǎo)航欄的內(nèi)容太多，比如有文字標(biāo)題、頭像、按鈕等控件，搜索欄和這些控件可能無法并排放置時，可以將搜索欄橫向拉長，放在下一行單獨展示。

現(xiàn)在淘寶APP首頁的導(dǎo)航欄就做成了兩行，上一行用來放置文字標(biāo)題和功能圖標(biāo)，搜素欄集合掃碼、拍照等功能單獨作為一行。

6) 導(dǎo)航選項

在網(wǎng)頁中，標(biāo)簽、按鈕、面包屑導(dǎo)航等常見的導(dǎo)航組件，通常會固定在網(wǎng)頁導(dǎo)航的中心位置。當(dāng)頁面縮小到移動端時，考慮到移動端尺寸較小，如果頂部導(dǎo)航內(nèi)容太多，可以嘗試把功能組件放到第二層級。

右側(cè)導(dǎo)航

相對于左側(cè)和中間，APP導(dǎo)航欄的右側(cè)部分更加靈活，沒有固定的要求說必須放哪些內(nèi)容，根據(jù)需求放置各種類型的功能控件。

1) 頭像

如果想調(diào)用與用戶屬性相關(guān)的功能，就可以將頭像放在導(dǎo)航欄的右側(cè)區(qū)域，點擊彈出相關(guān)的選項。

2) 圖標(biāo)

在右側(cè)區(qū)域放置功能圖標(biāo)是最常見的設(shè)計，把用戶最常使用的功能，例如消息圖標(biāo)、搜索圖標(biāo)，都可以集中到導(dǎo)航欄的右側(cè)區(qū)域。

如果右側(cè)需要展示的圖標(biāo)太多，可以把這些圖標(biāo)聚合在一起，處理成類似微信首頁右上角的設(shè)計，點擊之后出現(xiàn)更多功能。

3) 按鈕

按鈕也可以放在右側(cè)區(qū)域來引導(dǎo)用戶操作。當(dāng)出現(xiàn)多個按鈕時，要使用樣式和顏色來靈活區(qū)分按鈕的主次關(guān)系。

按鈕的形狀包括圓形、方形、圓角矩形等，按鈕樣式包括顏色填充、描邊、圖標(biāo)和文字結(jié)合等多種風(fēng)格，通過靈活的設(shè)計抓住用戶的注意力。

4) 搜索框

在網(wǎng)頁端中會看到搜索框放在右側(cè)的設(shè)計，將搜索框作為單獨的控件或者和其他控件組合使用放在右側(cè)，方便用戶快速訪問。

5) 下拉菜單

在Pad端和網(wǎng)頁端中，可以使用嵌套在應(yīng)用欄右側(cè)的下拉菜單進(jìn)行切換帳戶、語言等操作。

 二、導(dǎo)航欄的5種設(shè)計風(fēng)格 

頂部導(dǎo)航欄設(shè)計風(fēng)格需要與與整個產(chǎn)品的UI相匹配，常見的導(dǎo)航欄設(shè)計樣式有

扁平風(fēng)格、陰影懸浮效果、顏色填充效果、使用半透明導(dǎo)航等。

扁平風(fēng)格

頂部導(dǎo)航區(qū)域完全融入到背景中，和整個頁面融為一個整體，頁面看起來比較簡約。

陰影懸浮風(fēng)格

通過在導(dǎo)航欄下方增加一層陰影效果，讓導(dǎo)航欄有懸浮在頁面上的感覺，同時便于和頁面其他內(nèi)容作區(qū)分。

顏色填充風(fēng)格

將導(dǎo)航欄背景進(jìn)行色彩填充，不透明度降低到8-12%，使用一些簡約而高級的色彩來增加頁面的豐富度，體現(xiàn)品牌特點。

深色風(fēng)格

APP頁面的背景大多都是淺色，這個時候如果使用深色的導(dǎo)航，能夠產(chǎn)生很強烈的對比效果，用來突出導(dǎo)航中的內(nèi)容。比如早期的微信APP頁面，頂部就是采用深色的導(dǎo)航，和淺色的頁面作對比。

透明風(fēng)格

圖片詳情頁的UI設(shè)計中常用到透明的導(dǎo)航風(fēng)格，既能避免導(dǎo)航欄將圖片內(nèi)容遮擋，還能突出頁面的高級感。

三、導(dǎo)航欄交互狀態(tài)分析 

選中狀態(tài)

當(dāng)用戶與導(dǎo)航欄交互時，導(dǎo)航欄上的控件要能夠動態(tài)切換來為用戶提供即時反饋，比如當(dāng)選中頁面中的內(nèi)容時，導(dǎo)航欄要出對應(yīng)的操作提示，是否刪除、分享等。

滾動狀態(tài)

當(dāng)頁面上下滾動時，原本扁平的APP導(dǎo)航欄出現(xiàn)陰影懸浮的升高效果，狀態(tài)的改變會讓操作看起來更自然。

背景模糊

當(dāng)頁面滾動時，頂部導(dǎo)航出現(xiàn)毛玻璃的模糊效果，這是現(xiàn)在很流行的視覺效果，會讓整體的用戶體驗更流程。

尺寸調(diào)整

當(dāng)頁面尺寸變小時，要考慮將多余的導(dǎo)航選項折疊并隱藏在“更多”圖標(biāo)里面，這樣才會讓設(shè)計更合理。

最后 

以上就是導(dǎo)航欄(App Bar)設(shè)計中能用到的知識點和設(shè)計細(xì)節(jié)，希望通過這些內(nèi)容能幫助你對導(dǎo)航欄有更多的設(shè)計想法和思考。

「組件系列」的其他文章，近期也會不斷更新，歡迎大家關(guān)注??

設(shè)計夾將近期分享的設(shè)計資源整理成了一份清單合集，如果其中有大家需要的資源，直接在公眾號后臺回復(fù)對應(yīng)的關(guān)鍵詞即可免費領(lǐng)取，這份清單也會不斷更新更多的資源，建議大家收藏起來隨時查看。

慢慢來比較快，希望對你有幫助！

領(lǐng)取方式：關(guān)注公眾號，后臺回復(fù)【資源】獲取高清素材清單

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》APP導(dǎo)航欄設(shè)計分析：5種設(shè)計樣式+4種交互狀態(tài)

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.z1277.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

原文地址：站酷

作者：君小陽

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》一組復(fù)古風(fēng)格logo嘗試

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.z1277.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

什么是汽車HMI？

什么是汽車HMI呢？咱們先把這個概念拆分成兩個關(guān)鍵詞：汽車+HMI。

先來說一下HMI，HMI是Human Machine Interface的縮寫，“人機接口”，也叫人機界面。

HMI(人機界面)是系統(tǒng)和用戶之間進(jìn)行交互和信息交換的媒介，它實現(xiàn)信息的內(nèi)部形式與人類可以接受形式之間的轉(zhuǎn)換。

知道了HMI的定義后，我們把“汽車”這個前綴加上，汽車HMI是指用戶與汽車系統(tǒng)之間進(jìn)行人機交互的媒介。

當(dāng)然汽車HMI并不局限于界面中，而是作為功能的集合，例如汽車儀表盤、HUD抬頭顯示器、交互媒介(語音、觸覺)等，都是汽車HMI設(shè)計包含的內(nèi)容。

聊聊汽車HMI的發(fā)展

目前我們說到的汽車HMI最早是在80年代初推出的。

在當(dāng)時，普通汽車需要實現(xiàn)的功能在迅速增加，設(shè)計師的任務(wù)之一就是為駕駛員提供控制，保證駕駛員能夠使用和管理這些新功能。

對于新功能的增加，主要遵循兩種方法：

• 一是添加模擬控件，為新功能添加物理按鈕。例如想在車內(nèi)開空調(diào)，需要空調(diào)開關(guān)控制按鈕；想在車?yán)锫犚魳罚枰砑訐Q歌/調(diào)節(jié)音量按鈕。
• 二是添加具有動態(tài)內(nèi)容的汽車屏幕系統(tǒng)。例如展示車速的動態(tài)儀表、可以導(dǎo)航的動態(tài)地圖。

第一種方法在德系車中比較流行，而第二種方法在美系和日系車中比較流行。

現(xiàn)在看來也是這樣，雖然現(xiàn)在汽車都在用車載大屏來代替物理按鍵，但德系車的物理按鍵仍然要比日系車多。

別克汽車在1986年最早推出了車載屏幕系統(tǒng)，用戶可以在單色觸摸顯示屏中控制電臺和天氣。

另一個典型的案例是日產(chǎn)推出的CUE-X概念車，具備可觸摸和彩色圖形的車載系統(tǒng)。能夠看出來，當(dāng)時車內(nèi)功能控件的位置和設(shè)計跟現(xiàn)在的車內(nèi)飾已經(jīng)很像了。

現(xiàn)在的汽車HMI更像是汽車控制中心與娛樂系統(tǒng)混合的數(shù)字座艙，提供的功能更多更強大，同時兼?zhèn)鋳蕵穼傩浴?/span>

汽車HMI設(shè)計重點關(guān)注這些原則

設(shè)計美觀有效的HMI，需要將藝術(shù)性與功能性合為一體。藝術(shù)性和功能性應(yīng)該是平等和諧地協(xié)同工作，讓用戶沉浸在體驗中。以下是一些基本的設(shè)計原則：

給用戶控制感

汽車HMI應(yīng)該始終在合理的時間內(nèi)，通過適當(dāng)?shù)姆答仯嬷脩舢?dāng)前的狀態(tài)。

這一點在用戶開車時尤為重要。如果系統(tǒng)在沒有通知駕駛員的情況下就采取某個行為，很可能會對駕駛員造成干擾，產(chǎn)生不好的后果。

駕駛員駕駛汽車，實際上就是在控制汽車做出各種行為。這既是一種控制，也是一種反饋，控制的是汽車的功能，反饋的功能帶來的結(jié)果。例如利用指示燈、速度儀表等各種動態(tài)化信息，隨時告知駕駛員當(dāng)前的狀態(tài)。

遵循“安全第一”法則

HMI系統(tǒng)主要的好處是可以幫助我們避免事故。現(xiàn)代汽車配備了許多傳感器，傳感器可以收集信息，再利用這些信息跟蹤駕駛狀況。

HMI系統(tǒng)可以實時監(jiān)控情況，防止交通碰撞和事故的發(fā)生。系統(tǒng)對條件的響應(yīng)包括：

反應(yīng)型：系統(tǒng)會通知駕駛員剛剛發(fā)生的事，例如胎壓過低或疲勞駕駛，并向駕駛員發(fā)出警告。

主動型：系統(tǒng)分析狀況，預(yù)測可能發(fā)生的情況，并基于潛在的不良情況向駕駛員發(fā)出警告。例如系統(tǒng)分析天氣狀況，并建議用戶避免在道路結(jié)冰的日子開車。

在設(shè)計系統(tǒng)響應(yīng)時，重要的不是用大量信息淹沒用戶，而是要制定可靠的通知策略。發(fā)送給用戶的反饋應(yīng)該是：

• 有價值的：用戶只看到他們關(guān)心的反饋。
• 及時的：反饋應(yīng)該在需要時準(zhǔn)確發(fā)送給用戶。
• 清楚的：在設(shè)計信息反饋時，依據(jù)模塊化和格式塔原則很重要，確保用戶能夠快速理解反饋表達(dá)的含義。這些信息越容易理解，安全性就會越好。

認(rèn)知負(fù)荷最小化

認(rèn)知負(fù)荷是使用系統(tǒng)需要付出的腦力成本、思考成本。用戶在使用產(chǎn)品時付出的成本越小，說明這個產(chǎn)品至少是簡單易用的。

話說回來，如果一個車載系統(tǒng)要求用戶承擔(dān)大量認(rèn)知負(fù)荷時，說明這個系統(tǒng)存在很大的改進(jìn)空間。

首先，不要去強迫用戶記住汽車駕駛相關(guān)的信息。大家都知道，用戶在短期記憶中不能記住太多信息，特別是多個容易混淆的功能或抽象的概念。

預(yù)先考慮用戶在駕駛過程中可能遇到的問題，例如機艙溫度是多少？現(xiàn)在在聽什么音樂？怎么導(dǎo)航去商場？基于這些場景和問題進(jìn)行系統(tǒng)的設(shè)計，以此來解答用戶的問題。

其次，基于現(xiàn)有的心智模型構(gòu)建HMI至關(guān)重要。為什么大多數(shù)汽車的儀表、中控的分布位置都很相似呢？

實際上這些都是在用戶與汽車的交互行為中建立起來的使用習(xí)慣，遵循熟悉的設(shè)計方式，能最大限度減少學(xué)習(xí)使用系統(tǒng)所需的工作量。

減少不必要的分心

駕駛過程中，駕駛員沒有什么理由去看手機，因為HMI能夠做任何在手機上能夠做的事情。可能會有人說，現(xiàn)在車載大屏尺寸那么大，會吸引用戶的注意力，對駕駛造成一定影響。

所以現(xiàn)在越來越多的智能汽車推出各種車載語音助手，將聲音——而不是觸摸，作為用戶與系統(tǒng)交互的主要媒介，通過語音來控制場景，例如切歌、撥打電話、調(diào)節(jié)溫度等。

不言自明的導(dǎo)航體驗

可發(fā)現(xiàn)性(在系統(tǒng)中找到特定功能)和導(dǎo)航體驗應(yīng)該在設(shè)計中處于最高級別。

現(xiàn)在很多車載系統(tǒng)面臨著操作層級過多/過深的情況：用戶需要點擊很多次才能找到他們想要做的功能。

通過仔細(xì)規(guī)劃系統(tǒng)的信息架構(gòu)，將常用的功能放置在第一層級，可以避免這種情況。

改進(jìn)視覺效果

在美即適用效應(yīng)的影響下，用戶更傾向于認(rèn)為好看的、有吸引力的產(chǎn)品更實用。

設(shè)計師可以通過改進(jìn)系統(tǒng)的視覺效果，改善用戶對系統(tǒng)的感知態(tài)度。例如為導(dǎo)航渲染逼真的3D模型，能幫助用戶更快地理解他們現(xiàn)在所在的位置和要去的地方，并獲得很好的體驗。

驗證HMI是否合理，不僅要衡量操作完成的時間和發(fā)生錯誤的數(shù)量，還要注重用戶滿意度。

最后

用戶對汽車HMI的期望很高，有時候甚至?xí)罁?jù)汽車HMI體驗的好壞來決定是否購買汽車。

如果你下次設(shè)計HMI系統(tǒng)，可以將這些要求作為基準(zhǔn)：

• 給用戶一種控制感；
• 提供良好的學(xué)習(xí)能力；
• 避免分散注意力；
• 不斷了解用戶偏好并提出更改建議；
• 激發(fā)用戶積極的情緒反應(yīng)。 

原文地址：Clip設(shè)計夾（公眾號）

作者：Clippp

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》還不知道什么是汽車HMI設(shè)計？進(jìn)來帶你快速了解

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.z1277.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

色彩趨勢 

輕量漸變
首先值得一說的是輕量漸變，輕量漸變屬于弱漸變范疇，其特點為漸變色彩鄰近，幅度輕柔，節(jié)奏緩慢，融合感和細(xì)膩感較強。

因為輕量漸變多會選擇那些明度高、飽和度低的鄰近色，所以能很好地表達(dá)出設(shè)計中的“呼吸感”。這種呼吸感和通透感給人的感覺非常清新，所以在2022年應(yīng)該還會持續(xù)地流行下去。

高飽和度撞色
高飽和度色系的應(yīng)用在2020年就已經(jīng)成為了重要趨勢之一，因為高飽和度的色彩更能吸引人的注意力，從而有效的吸引用戶的視覺落點。

可盡管“吸睛”對品牌來說非常重要，但我們在使用時仍需克制，因為過高飽和度的搭配，往往會給頁面的一體性造成一定程度上的背離，且非常容易帶來視覺疲勞。

所以設(shè)計師在使用這類顏色時，也通常會對其飽和度和明度進(jìn)行一定程度的降低，讓顏色“豐盈卻不擁擠”，從而保證我們視覺上的舒適性。

另外，從高飽和的UI案例中我們也能夠看到，在搭配色彩時，選用大量的鄰近色營造氛圍，再用一兩個對比色產(chǎn)生沖突，就會使得整個頁面輕重相平衡，帶來不錯的視覺體驗。

糖果色
糖果色以粉色、粉藍(lán)色、粉綠色、粉黃色、明艷紫、檸檬黃、寶石藍(lán)和芥末綠等甜蜜的女性色彩為主色調(diào)，它能帶來一種纖細(xì),柔軟的感覺。所以哪怕一個畫面中出現(xiàn)過多的色彩，也不會讓人覺得很沖突和背離！

圖形趨勢 

emoji表情
表情符號在現(xiàn)如今是一個超越文本并且能夠得到廣泛認(rèn)知、跨越文化和多領(lǐng)域的一種視覺語言，在文字段落的末尾加上 Emoji 能夠更好傳達(dá)情緒，這使得表情符號不僅在網(wǎng)頁、文本甚至在海報中作為主視覺，都能帶來非常不錯的氛圍感。

在2021年，emoji不僅被廣泛應(yīng)用起來，還被廣泛3D化。加上陰影效果的emoji，其情緒的傳達(dá)也變得更加豐富。

2022，emoji的表達(dá)依舊會持續(xù)進(jìn)行，只是其形式會更加豐富，例如這種“假3D”效果等

3D化
說到了emoji的3D表達(dá)，就不得不說2021最為流行的一個設(shè)計趨勢，那就是大量的平面內(nèi)容通過增加了陰影的效果而被立體的表達(dá)了出來。

像我們熟悉的蘋果應(yīng)用程序icon等，其設(shè)計細(xì)節(jié)都因此變得更加的豐富而有層次。

而2022，3D設(shè)計趨勢也會通過不斷的發(fā)展進(jìn)一步明確了其自身的地位。它能夠為設(shè)計師提供無限的可能性，為任何你能想象的東西提供更多可發(fā)揮的空間。

2022年我們也會看到更多關(guān)于2D和3D之間完美結(jié)合的設(shè)計，像下圖的案例，手繪線條的手指和球體表情之間的互動，不僅讓整個頁面顯得更加有趣生動，還能使2D3D這兩種設(shè)計方式的優(yōu)點都能得到更充分的展現(xiàn)。

玻璃擬態(tài)
同樣，在2021年超級流行的毛玻璃效果，我們也會在2022年看見更加豐富的表達(dá)~

比如最近在dribble上很火的這組效果圖，就是在平面的基礎(chǔ)上，將毛玻璃的效果運用在3D的物體上，讓整體的虛實感更加的生動，也會給設(shè)計增加一點與眾不同的活力。

除此以外，我們還可以看到的，這一趨勢已經(jīng)明顯轉(zhuǎn)移到了玻璃和水晶質(zhì)感上，而且以令人難以置信的用立體擬真度將圖形設(shè)計提升到了一個全新的高度。所以，2022我們也將看到更多與全息和3D趨勢相輔相成的透明質(zhì)感和逼真的玻璃背景等元素的設(shè)計。

幾何抽象
完全不同于寫實的3D風(fēng)格，2022年的設(shè)計風(fēng)格可能也會開始往抽象發(fā)展。用幾何圖形來表達(dá)意象，用色彩傳達(dá)情感。少了繁瑣的裝飾，用更簡潔有力的方式去傳達(dá)設(shè)計理念。

當(dāng)分形形狀與色彩完美結(jié)合時，就可以創(chuàng)建出極具吸引力的視覺效果。

結(jié)語 

的確，每年的設(shè)計趨勢似乎總有相似的地方，2022年的設(shè)計風(fēng)格也是在2021的基礎(chǔ)上進(jìn)行演變和發(fā)展的。所以更重要的是，我們要學(xué)會持續(xù)地積累這些設(shè)計素材，并不斷地審視自己的設(shè)計作品，學(xué)會將他人的設(shè)計思路結(jié)合在自己的設(shè)計靈感上，才能成為一個一直擁有輸出能力的設(shè)計師~

原文地址：CSDN

作者：摹客

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》2022最新盤點，這些設(shè)計趨勢今年會怎樣？

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.z1277.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

視覺趨勢

1. 3D設(shè)計風(fēng)格

雖然 3D化 的視覺風(fēng)格早已到來，但是在B端市場上，3D風(fēng)格在此之前依舊表現(xiàn)的十分克制。

隨著 C4D、Blender 這些 3D 建模軟件的不斷普及，再加上互聯(lián)網(wǎng)上關(guān)于 3D 建模教程的增多，你會發(fā)現(xiàn) 3D 風(fēng)格的視覺表現(xiàn)，是一個 B端視覺設(shè)計師 的基本要求。

而3D風(fēng)格用在B端軟件當(dāng)中，會有兩個使用場景：

圖標(biāo)

因為在B端產(chǎn)品當(dāng)中，圖標(biāo)本身就是非常難以去表現(xiàn)，比如“物聯(lián)網(wǎng)，大數(shù)據(jù)”。

許多的抽象詞匯，很難通過一個具象的事物進(jìn)行表達(dá)，而在企業(yè)官網(wǎng)當(dāng)中，在視覺表現(xiàn)上的要求又十分的高。因此你會發(fā)現(xiàn)，在視覺風(fēng)格上的選擇，往往只有 3D 圖標(biāo) + 插畫 這一條路。

并且 3D 圖標(biāo)的使用場景不會太過于局限，也可以用于產(chǎn)品的工作臺、運營營銷工具箱 等頁面，因此 3D 圖標(biāo)的出現(xiàn)，它的應(yīng)用場景也會相比之前 要更加的廣闊。

可視化大屏

大屏設(shè)計 也在不斷的“內(nèi)卷”，因為傳統(tǒng)的 2D 可視化大屏 所搭建出來的大屏已經(jīng)滿足不了企業(yè)的野心， 像DataV 騰訊云圖 ，大家都在朝著 3D風(fēng)格 炫酷的方向進(jìn)行延展，因此也就會導(dǎo)致 3D 的視覺風(fēng)格需求 激增，而 3D 建模仿佛就是大勢所趨。

2.新擬態(tài)

雖然新擬態(tài)是在前兩年的產(chǎn)物。這個設(shè)計風(fēng)格背后，遭到了很多設(shè)計師的質(zhì)疑與排擠。

但是隨著這個風(fēng)格的不斷成熟，感覺它在B端視覺領(lǐng)域（特指的是 官網(wǎng) ），是非常受到歡迎的，因為整體的風(fēng)格，與官網(wǎng)的設(shè)計形式趨同。

同時作為B端產(chǎn)品的官網(wǎng)，其實是更需要新擬態(tài)這種風(fēng)格。因為電腦場景下鼠標(biāo)光標(biāo)對頁面進(jìn)行 Hover 操作 給出的真實反饋，而使用了新擬態(tài)的官網(wǎng)按鈕，給你的反饋非常真實。

這里安利一下騰訊云的首頁官網(wǎng)，大家就會發(fā)現(xiàn)在設(shè)計風(fēng)格上，大量的采取了新擬態(tài)元素，并且配合 3D 風(fēng)格的圖標(biāo)，以及毛玻璃材質(zhì)的設(shè)計，讓它的設(shè)計瞬間加分不少。

3.開源的設(shè)計系統(tǒng)

在去年，設(shè)計系統(tǒng)迎來了一波發(fā)展的高峰期，隨著字節(jié)、騰訊，三大設(shè)計系統(tǒng)（Arco Design、TDesign、Semi Design）的開源，其實是給我們很多B端設(shè)計初學(xué)者，有了更加完整仔細(xì)的B端入門教程。

比如 Arco Design 的組件用法 https://arco.design/docs/spec/link

就清晰的講清楚了每一個組件的使用方式，以及注意事項，仔細(xì)閱讀這里面的內(nèi)容，其實就是B端設(shè)計的入門學(xué)習(xí)。

而未來，國內(nèi)的環(huán)境，開源的系統(tǒng)也會越來越多，大家可以針對這幾大類不同的設(shè)計系統(tǒng)，進(jìn)行對比，或許會有一番收獲。

產(chǎn)品趨勢

超級app

這里的 超級app 可能和大家潛意識里的 支付寶、微信 這些軟件不太一樣。

在B端行業(yè)，隨著疫情的不斷擴散、再加上了兩年時間的發(fā)展，很多B端產(chǎn)品的功能架構(gòu)都出現(xiàn)了一個現(xiàn)象，產(chǎn)品的功能開始變得非常擁擠。因為B端軟件的核心價值其實就是靠著一個又一個功能去累積，也就意味著隨著B端產(chǎn)品的發(fā)展，功能模塊在不斷的累積，導(dǎo)致在設(shè)計層面，這樣的現(xiàn)象變得更加嚴(yán)峻。

你會發(fā)現(xiàn)左側(cè)的導(dǎo)航菜單已經(jīng)完全沒有辦法裝下這些導(dǎo)航內(nèi)容，而這一現(xiàn)象也反映在很多產(chǎn)品當(dāng)中，比如我了解的 飛書管理后臺、薪人薪事 等等諸多B端產(chǎn)品，它們在整個導(dǎo)航內(nèi)容上，已經(jīng)增加到一級導(dǎo)航 15+  、二級導(dǎo)航 40+ ，這無疑會開始對設(shè)計師的能力造成巨大考驗。

面對這一情況，許多導(dǎo)航菜單都將會迎來前所未有的挑戰(zhàn)，最近也在深入研究導(dǎo)航菜單過多時的解決辦法，發(fā)現(xiàn)了一些新的 導(dǎo)航菜單 設(shè)計方法，有機會咱們重新梳理一下 導(dǎo)航菜單 的內(nèi)容，將B端設(shè)計指南 文章進(jìn)行更新。

低代碼定制化

低代碼一直是我關(guān)注的一個領(lǐng)域，先給不明白低代碼的同學(xué)簡單科普一下。

低代碼，一種快速開發(fā)應(yīng)用的軟件，將通用、可重復(fù)利用的代碼形成組件化的模塊，通過圖形化的界面來拖拽組件并形成應(yīng)用。低代碼能夠?qū)崿F(xiàn)只寫少量代碼或不寫代碼，類似用“樂高積木”的方式來開發(fā)。

在國外有很多著名的低代碼成功案例。Outsystems（國外非常出名的低代碼平臺）幫助施耐德電氣在20個月內(nèi)推出了60款應(yīng)用程序，開發(fā)過程加速了兩倍，僅在第一年就節(jié)省了650人天的工作量；在2012年即將推出Model S之際，特斯拉放棄了SAP的ERP產(chǎn)品（可以思考一下為什么），改用低代碼開發(fā)平臺Mendix，用25個人四個月時間自建ERP系統(tǒng)。

去年，低代碼平臺，也有很多新產(chǎn)品面世，其中就包含：

因此你會發(fā)現(xiàn)，其實低代碼就是在解決一件事，圍繞著某一個業(yè)務(wù)場景，通過平臺的持續(xù)完善優(yōu)化。

讓所有的功能都能圍繞這個業(yè)務(wù)展開，其中包括：權(quán)限、時間軸、流程、表單、公式等等，能夠解決很多特殊的業(yè)務(wù)場景。

而低代碼會涉及到設(shè)計思路上的轉(zhuǎn)變，以及低代碼編輯器的出現(xiàn)，如何去設(shè)計如此復(fù)雜的配置流程，如何能夠讓用戶能夠快速上手，如果你能夠有比較完整的思路，這些都會成為我們設(shè)計的新機會。

行業(yè)細(xì)分

隨著互聯(lián)網(wǎng)市場的不斷發(fā)展，用戶會越來越關(guān)注產(chǎn)品在自己行業(yè)的應(yīng)用，比如CRM，其實只是一個籠統(tǒng)的稱呼，現(xiàn)在CRM市場又會分為 SCRM、運營CRM，等諸多產(chǎn)品。

PaaS類的平臺也出現(xiàn)了 負(fù)責(zé)從虛擬主機和數(shù)據(jù)庫層面入手的 iPaaS 以及 從應(yīng)用和數(shù)據(jù)層面入手的 aPaaS。

即使是大家經(jīng)常使用的 釘釘、企微、飛書，它們也在各自的領(lǐng)域有所擅長。

因為B端產(chǎn)品，在底層邏輯上是不能允許趨同的產(chǎn)品出現(xiàn)，如果你和別人的產(chǎn)品一樣，其實是沒有辦法在目前的市場上立足。

因此你會發(fā)現(xiàn)，雖然產(chǎn)品形式都會比較相同，但是B端市場十分廣闊，大家都在去尋找自己產(chǎn)品的差異化。

當(dāng)然市場是瞬息萬變的，這里也只是簡單聊聊我自己的看法，希望對你有所幫助。最近拖更確實比較厲害，準(zhǔn)備之后幾天給大家抽些書，可以多留意留意公眾號的文章。

原文鏈接：CE青年（公眾號）

作者：CE青年

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》2022年，B端設(shè)計的趨勢有哪些？

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.z1277.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司