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

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

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

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

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

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

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

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

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

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

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

中間部分

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

1) 標(biāo)題

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

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

2) 用戶頭像

在社交類產(chǎn)品或?qū)υ捒蛑?，?huì)在中間部分放置用戶的頭像和信息，用來(lái)展示用戶的詳細(xì)信息。

3) 產(chǎn)品Logo

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

4) 分段控件

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

5) 搜索框

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

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

6) 導(dǎo)航選項(xiàng)

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

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

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

1) 頭像

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

2) 圖標(biāo)

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

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

3) 按鈕

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

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

4) 搜索框

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

5) 下拉菜單

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

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

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

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

扁平風(fēng)格

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

陰影懸浮風(fēng)格

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

顏色填充風(fēng)格

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

深色風(fēng)格

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

透明風(fēng)格

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

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

選中狀態(tài)

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

滾動(dòng)狀態(tài)

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

背景模糊

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

尺寸調(diào)整

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

最后 

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

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

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

慢慢來(lái)比較快，希望對(duì)你有幫助！

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

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

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

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

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

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

原文地址：站酷

作者：君小陽(yáng)

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

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

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

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

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

什么是汽車HMI？

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

先來(lái)說(shuō)一下HMI，HMI是Human Machine Interface的縮寫，“人機(jī)接口”，也叫人機(jī)界面。

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

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

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

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

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

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

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

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

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

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

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

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

現(xiàn)在的汽車HMI更像是汽車控制中心與娛樂(lè)系統(tǒng)混合的數(shù)字座艙，提供的功能更多更強(qiáng)大，同時(shí)兼?zhèn)鋳蕵?lè)屬性。

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

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

給用戶控制感

汽車HMI應(yīng)該始終在合理的時(shí)間內(nèi)，通過(guò)適當(dāng)?shù)姆答?，告知用戶?dāng)前的狀態(tài)。

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

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

遵循“安全第一”法則

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

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

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

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

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

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

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

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

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

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

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

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

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

減少不必要的分心

駕駛過(guò)程中，駕駛員沒(méi)有什么理由去看手機(jī)，因?yàn)镠MI能夠做任何在手機(jī)上能夠做的事情。可能會(huì)有人說(shuō)，現(xiàn)在車載大屏尺寸那么大，會(huì)吸引用戶的注意力，對(duì)駕駛造成一定影響。

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

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

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

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

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

改進(jìn)視覺(jué)效果

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

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

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

最后

用戶對(duì)汽車HMI的期望很高，有時(shí)候甚至?xí)罁?jù)汽車HMI體驗(yàn)的好壞來(lái)決定是否購(gòu)買汽車。

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

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

原文地址：Clip設(shè)計(jì)夾（公眾號(hào)）

作者：Clippp

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

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

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

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

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

色彩趨勢(shì) 

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

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

高飽和度撞色
高飽和度色系的應(yīng)用在2020年就已經(jīng)成為了重要趨勢(shì)之一，因?yàn)楦唢柡投鹊纳矢芪说淖⒁饬?，從而有效的吸引用戶的視覺(jué)落點(diǎn)。

可盡管“吸睛”對(duì)品牌來(lái)說(shuō)非常重要，但我們?cè)谑褂脮r(shí)仍需克制，因?yàn)檫^(guò)高飽和度的搭配，往往會(huì)給頁(yè)面的一體性造成一定程度上的背離，且非常容易帶來(lái)視覺(jué)疲勞。

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

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

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

圖形趨勢(shì) 

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語(yǔ) 

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

原文地址：CSDN

作者：摹客

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

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

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

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

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

視覺(jué)趨勢(shì)

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

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

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

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

圖標(biāo)

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

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

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

可視化大屏

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

2.新擬態(tài)

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

但是隨著這個(gè)風(fēng)格的不斷成熟，感覺(jué)它在B端視覺(jué)領(lǐng)域（特指的是 官網(wǎng) ），是非常受到歡迎的，因?yàn)檎w的風(fēng)格，與官網(wǎng)的設(shè)計(jì)形式趨同。

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

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

3.開(kāi)源的設(shè)計(jì)系統(tǒng)

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

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

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

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

產(chǎn)品趨勢(shì)

超級(jí)app

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

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

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

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

低代碼定制化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

原文鏈接：CE青年（公眾號(hào)）

作者：CE青年

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

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

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

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

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

01.

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

 

02.

《超越Logo設(shè)計(jì)》

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

 

 

03.

《文字怡人》

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

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

 

 

04.

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

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

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

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

 

 

05.

《超級(jí)符號(hào)就是超級(jí)創(chuàng)意》

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

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

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

 

 

06.

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

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

 

 

07.

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

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

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

 

 

08.

《田中一光自傳》

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

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

 

 

09.

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

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

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

 

 

10.

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

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

 

 

11.

《design360雜志》

 

 

 

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

 

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

 

 

原文地址：蔥爺（公眾號(hào)）

作者：蔥爺

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》11本值得一讀的設(shè)計(jì)書

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

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

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

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

1.從大量閱讀開(kāi)始

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

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

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

閱讀什么呢？我覺(jué)得可以針對(duì)性一些，比如：

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

網(wǎng)上因?yàn)樽髌酚泻糜袎?，如果你早期無(wú)法判定好的作品，可以去看一些獲獎(jiǎng)的作品，比如kdesignaward、Adobe設(shè)計(jì)大獎(jiǎng)，IF設(shè)計(jì)大獎(jiǎng)等。

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

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

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

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

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

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

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

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

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

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

又或者：

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

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

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

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

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

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

a.savee

b.pinterest

https://www.pinterest.com/

c.designweek

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

https://designcollector.xyz/design

寫在最后

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

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

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

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

原文地址：功夫體驗(yàn)設(shè)計(jì)（公眾號(hào)）

作者：Tony

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》如何培養(yǎng)設(shè)計(jì)美感，這個(gè)方法掌握了，想不進(jìn)步都難！！

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

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

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

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

一、特殊場(chǎng)景下的差異化設(shè)計(jì)

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

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

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

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

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

三、溫馨提示降低用戶的過(guò)度依賴

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

小結(jié)

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

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

1.圓的線性語(yǔ)言

線性圓形，它的粗細(xì)可自由變化，根據(jù)當(dāng)前設(shè)計(jì)語(yǔ)言的風(fēng)格調(diào)性特征決定的。線性圓形的作用絕大部分都是裝飾，豐富畫面視覺(jué)感官，它們大多情況下都是以單色或者黑白灰出現(xiàn)。

如果我們把上圖的圓形線條去掉，設(shè)計(jì)感自然就弱幾分。當(dāng)然如果非要去掉也不會(huì)影響閱讀，有了圓形形式感自然增強(qiáng)許多。

LOGO符號(hào)應(yīng)用，變?yōu)榇志€條

UI界面中應(yīng)用圓形

2.圓形的漸變語(yǔ)言

漸變圓形基本都是以粗塊面為主，它可以呈現(xiàn)出豐富細(xì)膩的質(zhì)感、厚度、虛實(shí)變化的光影。

Sedigas

西班牙天然氣協(xié)會(huì)Sedigas的品牌LOGO更新，通過(guò)圓形設(shè)計(jì)語(yǔ)言提取，在多場(chǎng)景下貫穿圓形的應(yīng)用。

Sedigas（可點(diǎn)擊圖片查看視頻或 點(diǎn)擊Sedigas查看原文中內(nèi)視頻）

在品牌視覺(jué)語(yǔ)言動(dòng)態(tài)介紹過(guò)程中，我們可以看到圓形的應(yīng)用和豐富的變化，圓形與物理世界萬(wàn)物連接。

來(lái)看看其他案例

3.圓形面的特征

當(dāng)圓形以塊面的姿態(tài)出現(xiàn)時(shí)，它更隨和，更加溫潤(rùn)。塊面的圓形和線性的不一樣，塊面圓形更加厚實(shí)，整體性，更聚焦。大部分情況下作為背景或者承載內(nèi)容的容器。

在UI界面中，有時(shí)候圓形也可作為功能承載，操作區(qū)域更直觀可視化。

當(dāng)以時(shí)裝飾元素使用， 圓形一般都會(huì)用作強(qiáng)調(diào)一些重要信息，同時(shí)也增加設(shè)計(jì)形式感，張力，可玩性。

4.圓形參數(shù)化特征

參數(shù)化圓形，它簡(jiǎn)單純粹，以一種單一形態(tài)不斷重復(fù)幾個(gè)甚至幾十個(gè)上百個(gè)的相同的形態(tài)，這些重復(fù)出現(xiàn)的圓形，大部分都是以裝飾視覺(jué)效果呈現(xiàn)。

我們可以看到大部分圓形以線性姿態(tài)不斷重復(fù)，而且重復(fù)中帶有規(guī)律可循，比如朝著某個(gè)方向拓展開(kāi)，這個(gè)方向可以是斜方向、水平或者垂直。

以同心圓的方式向外計(jì)算擴(kuò)散開(kāi)。

5.圓形的肌理

上面我們講到了圓的線，塊面圓、參數(shù)化形態(tài)和漸變特征，那么在最后這個(gè)模塊，我們可以看到圓形還有一種特殊的存在，那就是肌理，這里說(shuō)的肌理不是貼圖的那種材質(zhì)，而是通過(guò)幾何演變來(lái)實(shí)現(xiàn)的，比如通過(guò)多條線的組合而形成，下面來(lái)看看。

上圖的圓形，由多個(gè)長(zhǎng)條幾何形狀不斷重復(fù)形成，這些重復(fù)幾何條狀物就形成了一個(gè)大圓形的肌理視覺(jué)特征。

右上角圓形線性陣列，通過(guò)重復(fù)小短線條而形成，在一些特殊場(chǎng)景下，這種陣列圓形圖還可以用來(lái)打造視覺(jué)記憶點(diǎn)或者品牌DNA序列。

圓形應(yīng)用遠(yuǎn)遠(yuǎn)不止這些，比如還有立體、真實(shí)物理質(zhì)感，還有多形態(tài)、空間感營(yíng)造等等。

今天列舉出來(lái)的這5種形態(tài)是我們?cè)O(shè)計(jì)中常用，不過(guò)在使用時(shí)候還是需要依據(jù)產(chǎn)品視覺(jué)調(diào)性合理應(yīng)用，形式要追隨功能。

原文地址：友設(shè)青年（公眾號(hào)）

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》沒(méi)想到用上圓形后，設(shè)計(jì)感瞬間強(qiáng)了很多！

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

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

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

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