轉(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è)計( www.yvirxh.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ū)域做成支持下拉的樣式，擴(kuò)展更多的功能全。

2) 用戶頭像

在社交類產(chǎn)品或?qū)υ捒蛑?，會在中間部分放置用戶的頭像和信息，用來展示用戶的詳細(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è)計( www.yvirxh.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è)計( www.yvirxh.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的縮寫，“人機(jī)接口”，也叫人機(jī)界面。

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

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

當(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)锫犚魳?，需要添加換歌/調(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ù)先考慮用戶在駕駛過程中可能遇到的問題，例如機(jī)艙溫度是多少？現(xiàn)在在聽什么音樂？怎么導(dǎo)航去商場？基于這些場景和問題進(jìn)行系統(tǒng)的設(shè)計，以此來解答用戶的問題。

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

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

減少不必要的分心

駕駛過程中，駕駛員沒有什么理由去看手機(jī)，因為HMI能夠做任何在手機(jī)上能夠做的事情。可能會有人說，現(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è)計( www.yvirxh.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è)計( www.yvirxh.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è)，隨著疫情的不斷擴(kuò)散、再加上了兩年時間的發(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è)計方法，有機(jī)會咱們重新梳理一下 導(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è)計的新機(jī)會。

行業(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é)從虛擬主機(jī)和數(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è)計( www.yvirxh.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è)計公司

01.

雖然里面的案例已經(jīng)有些歷史，但是其設(shè)計的方法和理念在今天仍然受用。 

 

02.

《超越Logo設(shè)計》

這是一本有超級多干貨的logo設(shè)計書，作者在書里不僅分享了31條logo設(shè)計的實用秘訣，還分享了如何談業(yè)務(wù)？如何與客戶合作？怎樣提高過稿率？如何做好前期的準(zhǔn)備工作？如何構(gòu)思？等問題，它能加深你對logo設(shè)計以及l(fā)ogo設(shè)計之外的知識的了解。

 

 

03.

《文字怡人》

這本書由日本著名平面設(shè)計師高橋善丸所寫，雖然設(shè)計的是日文，但由于日文中也有很多漢字，所以中國設(shè)計師也能從中學(xué)到很多東西，另外我推薦他的原因是，通常到達(dá)一定高度的設(shè)計大師，都不會放下身段去寫一些設(shè)計技能、設(shè)計方法的書，大多都在講理論，這也使得設(shè)計師們錯過了很多向大師學(xué)習(xí)設(shè)計執(zhí)行的機(jī)會。

而高橋善丸給了我們這樣一個機(jī)會，這本書主要是通過分享他的各種字體設(shè)計案例，來講述不同的字體設(shè)計技巧，并且這些字體設(shè)計案例并不是作為個人練習(xí)單獨存在的，而是作為真實案例運用在書籍封面設(shè)計和海報設(shè)計中。

 

 

04.

《設(shè)計中的設(shè)計》

這本書很多設(shè)計師應(yīng)該都熟悉，由日本當(dāng)代平面設(shè)計大師原研哉所著，出版至今已經(jīng)被加印了近二十次，足以證明這本書有多牛。

很多年輕的設(shè)計師認(rèn)識原研哉可能是通過小米的logo和KURASHICOM的logo這兩個案例，甚是還會因此對他的設(shè)計理念冷嘲熱諷，如果你讀了這本書，我相信你一定會對他有新的看法。在我看來，他對設(shè)計的認(rèn)識已經(jīng)超越了絕大多數(shù)人，也遠(yuǎn)遠(yuǎn)超出了技術(shù)層面，但他又不像很多大師把設(shè)計做成了藝術(shù)，而是始終圍繞設(shè)計的本質(zhì)：信息傳達(dá)，來做研究和深化。

什么是設(shè)計？什么是視覺傳達(dá)？設(shè)計的目的是什么？無印良品的地平線系列海報是怎么誕生的？等等問題，你都可以在這本書里面找到答案。

 

 

05.

《超級符號就是超級創(chuàng)意》

該書由華與華的創(chuàng)始人華杉所寫，華與華是一家知名的戰(zhàn)略咨詢公司，在設(shè)計圈里的爭議很大，他們的設(shè)計作品可能不太受設(shè)計師的認(rèn)可，但是華與華的方法確實影響了中國的整個策劃圈和設(shè)計圈。

初讀這本書時，其中的很多觀點也給了我一種醍醐灌頂?shù)母杏X，作者在書中分享了什么是超級符號？如何打造超級符號？現(xiàn)代商業(yè)設(shè)計中有哪些問題？如何建立企業(yè)戰(zhàn)略？等知識。

蔥爺當(dāng)時讀的是左邊黃色這本，現(xiàn)在最新的是右邊藍(lán)色這本，據(jù)介紹是新增了50頁，包含華與華最新的案例和跨年演講等內(nèi)容。

 

 

06.

《香港新生代平面設(shè)計訪談》

這本書是我去年才讀的，書中收集了港澳地區(qū)共12位新生代知名設(shè)計師，他們來自平面設(shè)計、品牌設(shè)計、網(wǎng)頁設(shè)計、字體設(shè)計、服裝設(shè)計、IP設(shè)計等多個不同領(lǐng)域，年齡跨越了70后到90后，每個人都有許多經(jīng)典的代表作，每個人都拿過很多榮譽，他們的故事和發(fā)展經(jīng)歷也很精彩。

 

 

07.

《設(shè)計工作室生存手冊》

幾乎每一個設(shè)計師都有成為自由設(shè)計師，或者是創(chuàng)建設(shè)計工作室的夢想，所以這本書值得每一個設(shè)計師讀一讀。讀完這本書你將會了解設(shè)計師的工作和職責(zé)是什么？如何獲取客戶、篩選客戶？如何收費？如何與客戶簽訂合同？如何管理團(tuán)隊？如何與人合作？等多個很實際、很實用的問題。

這一本薄薄的小書，原本是作者寫給他兒子的，文風(fēng)幽默風(fēng)趣，言辭犀利，快人快語，讀起來很帶勁?？赐暌院笥浀靡潇o冷靜，別立馬急匆匆跑去辭職創(chuàng)業(yè)。

 

 

08.

《田中一光自傳》

田中一光是日本平面設(shè)計領(lǐng)域國寶級的人物，也被譽為無印良品之父、日本設(shè)計中心之父，創(chuàng)作過很多經(jīng)典的案例，獲獎無數(shù)。這本書詳細(xì)講述了他從小到大的經(jīng)歷，以及怎樣一步一步成為了享譽全球的設(shè)計大師。

老實說，讀自傳通常不能讓你學(xué)到什么具體的技能，所以這不是一本教你怎么做設(shè)計的書，讀名人自傳的主要作用是讓你對某些事情、某些行業(yè)產(chǎn)生興趣，并可以把對方作為學(xué)習(xí)的榜樣。讀完田中一光自傳這本書，我深深地“愛”上了他，他的人品和設(shè)計才華都深深的吸引了我，讓我一度想去買他的其他書籍，并把它作為我人生的榜樣。

 

 

09.

《日本版式設(shè)計原理》

這本書的內(nèi)容形式應(yīng)該是很多設(shè)計師都會喜歡的，即：改稿，作者通過展示50個設(shè)計案例修改前和修改后的對比效果，從而向大家解釋了如何正確的布局？如何正確地使用文字？如何進(jìn)行正確的色彩搭配？如何正確地使用圖片？這四大塊內(nèi)容。

另外，這本書里展示的案例也是非常接地氣的商業(yè)作品，而不是自嗨稿，所以其中的設(shè)計思路和設(shè)計技巧可以很容易用到你的設(shè)計工作中去。

 

 

10.

《平面設(shè)計中的網(wǎng)格系統(tǒng)》

這本書是瑞士知名設(shè)計師約瑟夫·米勒-布羅克曼所著，他是第一批把網(wǎng)格系統(tǒng)運用到平面設(shè)計中的設(shè)計師，網(wǎng)格系統(tǒng)是版式設(shè)計中很重要的一個工具，可以使排版更加有章可循、更嚴(yán)謹(jǐn)，在這本書中，作者不但介紹了網(wǎng)格的繪制、網(wǎng)格的分類、網(wǎng)格的使用，甚至還把網(wǎng)格延伸到了建筑設(shè)計中，想了解網(wǎng)格系統(tǒng)的人可以讀一讀。

 

 

11.

《design360雜志》

 

 

 

這個年代還會看雜志的人應(yīng)該已經(jīng)不多了，看設(shè)計雜志的那就更少，然而這本2005年誕生于廣州的《design360》卻能夠存活至今，并且有超過3萬忠實的讀者，可以說是亞洲最優(yōu)秀的設(shè)計雜志之一了。你既可以購買它的某一期，也可以按年訂閱，一年共6期，每一期的內(nèi)容都不同，包含了平面設(shè)計、插畫、產(chǎn)品設(shè)計、建筑設(shè)計、景觀設(shè)計、設(shè)計組織、工作室訪談等內(nèi)容，這本雜志除了可以拓寬你的知識面、加深你對設(shè)計的認(rèn)知以外，你還可以從中認(rèn)識到很多國內(nèi)外的優(yōu)秀設(shè)計師和設(shè)計工作室。  

 

以上11本書是我個人覺得不錯，值得一讀的設(shè)計書，當(dāng)然并不是設(shè)計師必讀，也不是適合所有人，因為我覺得根本就不存在哪一本書是必讀的，但如果你想對設(shè)計有更深入的了解，想提升自己的設(shè)計認(rèn)知，選擇一兩本自己感興趣的書讀一讀，肯定是有好處的。沒必要買太多，不然肯定避免不了吃灰的命運。 

 

 

原文地址：蔥爺（公眾號）

作者：蔥爺

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》11本值得一讀的設(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è)計( www.yvirxh.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.從大量閱讀開始

為什么我們讀小學(xué)時候，每天很早去學(xué)校晨讀，目的通過這樣刻意練習(xí)加深學(xué)習(xí)記憶。

長久以往，我們對文字理解，對寫作文就會構(gòu)建起豐富的背景知識。

那么在設(shè)計中也是一樣的，在前期，一定要每天堅持大量的閱讀，培養(yǎng)你的眼界。

閱讀什么呢？我覺得可以針對性一些，比如：

a.大量看UI設(shè)計作品

網(wǎng)上因為作品有好有壞，如果你早期無法判定好的作品，可以去看一些獲獎的作品，比如kdesignaward、Adobe設(shè)計大獎，IF設(shè)計大獎等。

2.什么情況下知道，我的審美提高了？

前期大量閱讀了很多作品，這時候你需要把牛逼的作品收集起來，等半個月后，再去看看之前搜集的作品，如果發(fā)現(xiàn)有部分很丑，那么恭喜你又往前走了一步。

成長是需要一個過程，切忌操之過急，關(guān)鍵是需要自己動手去執(zhí)行，不能等著被改變。

我們可以去建立一個圖板，雖然很多人有這樣做，但是真正做到復(fù)盤，然后去刪除之前采集的人很少。

如果不去復(fù)盤，不去思考，進(jìn)步當(dāng)然會緩慢，抱怨也是沒用的。

低頭趕路，也不要忘了抬頭路，我們要隨時知道是朝著正確的方向努力。

3.學(xué)習(xí)一些理論

當(dāng)看了大量的作品，對美有些認(rèn)知，但是你還是不知道怎么表達(dá)美？這時候，你需要學(xué)習(xí)一些理論的支撐。

我們通過閱讀大量作品構(gòu)建審美認(rèn)知，通過閱讀書籍、文章理論構(gòu)建審美體系。

比如，德國工業(yè)設(shè)計師迪特·拉姆斯提出好設(shè)計十項原則：

又或者：

我們可以從形、色、質(zhì)、字、構(gòu)、動等6個維度去拆解，又或者可以利用格式塔心理學(xué)來進(jìn)行設(shè)計質(zhì)量的評估，比如我們常說的相似性、親密性、連續(xù)性、焦點歸一等。

再比如，當(dāng)你看到一個吸引你的設(shè)計作品，你可以這樣思考吸引你的點在哪？

比如：是圖形運用很巧妙還是質(zhì)感表達(dá)很新潮？又或者色彩創(chuàng)意很棒，一般一個好的設(shè)計都會滿足形、色、質(zhì)、字、構(gòu)等，至少要3個以上維度。

當(dāng)然還可以通過看書積累對設(shè)計美的表達(dá)，總之就是要大量輸入，構(gòu)建豐富的知識庫。

4.推薦一些網(wǎng)站

提升審美必須每天堅持看，這個是毋庸置疑的事情。這里，推薦一些我常常去看的網(wǎng)站。

a.savee

b.pinterest

https://www.pinterest.com/

c.designweek

https://www.designweek.co.uk/

https://designcollector.xyz/design

寫在最后

提升設(shè)計審美，前期大量閱讀只是一個開始，我們還需要做的是不斷思考總結(jié)。

同時還需要學(xué)習(xí)設(shè)計理論，這些我們可以通過看書或者和別人交流，在討論過程中，你自然知道他們是怎么評價這個設(shè)計的。

路漫漫其修遠(yuǎn)兮，學(xué)習(xí)是一個長期的過程，培養(yǎng)審美也是。

積小步，成大步，沒有一蹴而就的成功，一切都是量變的積累。

原文地址：功夫體驗設(shè)計（公眾號）

作者：Tony

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》如何培養(yǎng)設(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è)計( www.yvirxh.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è)計公司

一、特殊場景下的差異化設(shè)計

根據(jù)用戶使用場景和特殊情況出現(xiàn)時，產(chǎn)品會結(jié)合變化呈現(xiàn)不同的功能或者服務(wù)，這種差異化的設(shè)計更能體現(xiàn)情感化設(shè)計的一面，提高用戶對于產(chǎn)品的認(rèn)可度。

騰訊新聞 APP 在東航事故出現(xiàn)時，在底部操作欄新增了祈禱的圖標(biāo)，方便用戶表達(dá)祈禱的心情。特殊情況下的差異化設(shè)計滿足了用戶的情感需求，也體現(xiàn)出了產(chǎn)品的溫度，帶給用戶更強的粘性。

二、優(yōu)化指引路徑提高操作效率

通過提取本機(jī)號碼一鍵登錄減少了繁瑣的注冊流程，提高了登錄的效率，減少用戶的操作路徑。在登錄時都需要用戶同意一些條款協(xié)議等內(nèi)容，當(dāng)用戶未勾選時通常都是提示用戶，指引用戶選擇后操作。這樣的設(shè)計增加了用戶的操作路徑，使用體驗不是很好。

網(wǎng)易云音樂 APP 在同樣問題出現(xiàn)時，提供了一個彈窗進(jìn)行指引，用戶無需重復(fù)操作，直接點擊“同意并繼續(xù)”即可完成登錄。在用戶誤操作出現(xiàn)時，無需用戶過多的操作路徑，給出了更高效的操作解決方案，提高了用戶使用體驗。

三、溫馨提示降低用戶的過度依賴

隨著互聯(lián)網(wǎng)時代的到來，太多的娛樂產(chǎn)品占據(jù)了我們的時間，過度依賴和使用耗費了大量時間。特別是短視頻的走熱，刷視頻容易帶來過度依賴，影響用戶的視力等健康問題。

抖音 APP 作為用戶量龐大的短視頻產(chǎn)品，提高用戶體驗至關(guān)重要。為了降低用戶的過度依賴，提示用戶注意休息，特意設(shè)計了溫馨提示。用戶可以設(shè)置提示時間和進(jìn)行管理，APP 也會定期提示用戶。溫馨的設(shè)計提高了用戶對產(chǎn)品的好感度，也能輔助用戶做好時間管理，以免過度依賴而影響休息時間。

四、隱藏式設(shè)計提高版面利用率

對于用戶來說希望內(nèi)容具有較高的可見性，提高內(nèi)容的曝光度才能被關(guān)注。在控制內(nèi)容的優(yōu)先級時，通過隱藏式設(shè)計可以滿足更多內(nèi)容的呈現(xiàn)，不過需要做好隱藏內(nèi)容的引導(dǎo)，提高隱藏內(nèi)容被發(fā)現(xiàn)的概率。

網(wǎng)易云音樂 APP 在云貝中心簽到設(shè)計中使用了隱藏式設(shè)計，將簽到相關(guān)的附屬內(nèi)容隱藏在展開卡片中，為更多主要內(nèi)容提供了展示空間。為了提高展開的交互設(shè)計，在每天初次訪問時會默認(rèn)展開，然后再收起隱藏，這個動態(tài)的指引提高了這個交互動作的曝光度。利用隱藏式設(shè)計滿足了產(chǎn)品需求，通過動作引導(dǎo)提高了用戶知曉度，是一個具備較好體驗的設(shè)計解決方案。

五、更人性化的模式設(shè)計

隨著用戶群體的跨度增加，為了帶給不同年齡段用戶更好的體驗，眾多產(chǎn)品都針對不同用戶提供了定制化模式。特別是針對老年用戶而進(jìn)行適老化設(shè)計，還有針對青少年兒童設(shè)計的時間管理等，不同模式滿足了更多不同年齡段的用戶需求。

比如優(yōu)酷 APP 在個人中心設(shè)計了“模式切換”，點擊可以設(shè)置長輩模式、青少年守護(hù)、兒童守護(hù)。針對不同年齡段對于產(chǎn)品的使用需求進(jìn)行定制化，帶給用戶更加人性化的使用體驗。

六、定制化的播放頁模式設(shè)計

不同用戶對于產(chǎn)品的使用需求有所差異，固定的模式雖然可以減少產(chǎn)品的開發(fā)成本，但是單一的體驗不夠人性化。針對不同用戶提供更多選擇，可以帶給用戶更加人性化的體驗。

MOO 音樂 APP 為了滿足不同用戶對于播放頁的體驗差異，設(shè)計了播放頁模式定制化切換，用戶可以選擇以專輯封面或者背景大圖進(jìn)行展示。為了直觀的方便用戶做出選擇，模式設(shè)計以可視化的圖形展示，便于用戶更快的做出選擇。定制化的模式雖然把繁瑣的事情留給了產(chǎn)品開發(fā)者，卻把更好的體驗帶給了用戶。

七、縮放預(yù)覽滿足對細(xì)節(jié)的體驗

隨著短視頻走進(jìn)更多用戶的視野中，短視頻的形式也是越來越豐富，滿足不同用戶的使用體驗至關(guān)重要。特別是圖片形式引入短視頻平臺，對于細(xì)節(jié)的體驗因人而異，縮放畫面滿足對于細(xì)節(jié)的體驗才能更加人性化。

抖音 APP 無論是針對視頻還是圖片形式作品都可以縮放預(yù)覽，配合縮放的手勢交互帶給用戶放大細(xì)節(jié)查看的體驗，滿足了不同用戶對于細(xì)節(jié)的需求。手勢交互也是產(chǎn)品設(shè)計師需要多多探索的方向，更加便捷的操作有助于提升用戶對于產(chǎn)品的使用體驗。

八、滿足用戶好奇心的設(shè)計

用戶從小白到依賴是一個逐步探索的過程，好奇心的用戶會點擊嘗試任何的功能，甚至連一個圖標(biāo)或者 LOGO 都希望獲得彩蛋。作為設(shè)計師來說設(shè)計出來的每一個元素都需要考慮用戶體驗，給予反饋式的設(shè)計才能滿足好奇心的驅(qū)使。

愛奇藝 APP 首頁左上角的 LOGO 展示你有注意到嗎？有沒有嘗試去點擊體驗，作為好奇心驅(qū)使特意嘗試了一下。點擊之后會跳轉(zhuǎn)到皮膚等設(shè)置的頁面，為該功能的曝光新增了首頁入口，用戶也可以通過個人中心“裝扮”進(jìn)行設(shè)置。該設(shè)計解決方案不僅滿足了用戶點擊的好奇心，也賦予了 LOGO 展示功能化的作用。

九、可以標(biāo)記和疊加的點贊設(shè)計

點贊設(shè)計在眾多產(chǎn)品中均有體現(xiàn)，這是用戶表達(dá)對于內(nèi)容的喜歡，以此來增加作者和用戶之間的互動性。為了吸引用戶點擊和帶來差異化的體驗，點贊設(shè)計也被腦洞大開，在表情化、疊加點贊、點贊標(biāo)記、微動效等方向不斷探索。

小宇宙 APP 在播放頁中對音頻進(jìn)行點贊時，可以多次疊加點贊，點擊之后會針對音頻播放進(jìn)度條進(jìn)行點贊標(biāo)記，反復(fù)點擊也會使得進(jìn)度條紋增高，以此來強化點贊的程度。該設(shè)計解決方案不僅豐富了點贊的設(shè)計，也能通過標(biāo)記和進(jìn)度條紋的高度讓用戶記住關(guān)鍵的部分，方便后續(xù)回顧的時候知道哪些時間段是重要內(nèi)容，提高用戶對于產(chǎn)品的使用體驗。

十、差異化的短視頻推薦設(shè)計

作為新聞資訊類產(chǎn)品來說，大部分用戶的習(xí)慣還是圖文結(jié)合的閱讀形式，不過隨著短視頻的出現(xiàn)，改變了一部分用戶的閱讀習(xí)慣。通過短視頻獲取新聞資訊、搜索指定內(nèi)容、學(xué)習(xí)生活技巧或者專業(yè)技巧等均可實現(xiàn)，改變了用戶的閱讀習(xí)慣和獲取內(nèi)容的形式。

央視新聞 APP 作為新聞資訊類的專業(yè)平臺，在滿足用戶閱讀新聞的同時，也跟進(jìn)了短視頻觀看新聞的體驗。在底部標(biāo)簽欄以舵式導(dǎo)航的形式作為短視頻新聞入口，點擊之后會有推薦視頻展示，差異化的推薦設(shè)計不僅提高了內(nèi)容的曝光度，也吸引了用戶的關(guān)注度。

小結(jié)

本期為大家總結(jié)了提高用戶體驗的十個優(yōu)秀設(shè)計解決方案，體驗、分析、總結(jié)是為了掌握別人的設(shè)計經(jīng)驗，積累設(shè)計靈感并運用到項目設(shè)計中。靈感的積累離不開總結(jié)，探索細(xì)微之處的差異化對于 UX 設(shè)計師而言至關(guān)重要。

本期分享到此結(jié)束，僅為個人角度的體驗總結(jié)，希望可以帶給大家更多靈感啟發(fā)。