原文地址：黑馬家族（公眾號(hào)）

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》尋工鳥招聘APP項(xiàng)目設(shè)計(jì)總結(jié)

藍(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ì)( www.bouu.cn )是一家專注而深入的界面設(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ù)

三種加載狀態(tài)

頁(yè)面加載進(jìn)程會(huì)受多方面的影響，例如頁(yè)面里圖片、圖標(biāo)的數(shù)量，頁(yè)面中是否有三維場(chǎng)景或模型，是列表式設(shè)計(jì)還是卡片式設(shè)計(jì)…

逐一加載

對(duì)于可以同時(shí)進(jìn)行多個(gè)加載任務(wù)的產(chǎn)品，更適合應(yīng)用逐一加載的形式，這樣做能減少用戶對(duì)于等待的感知程度。任務(wù)列表逐一加載的過(guò)程會(huì)給用戶帶來(lái)一種秩序感。

完全加載

進(jìn)入一個(gè)網(wǎng)站或App，很多頁(yè)面都會(huì)一下就顯示出來(lái)所有內(nèi)容，這種頁(yè)面完全加載的形式對(duì)用戶來(lái)說(shuō)更熟悉。

同樣，頁(yè)面完全加載的形式會(huì)讓用戶的操作和瀏覽過(guò)程更流暢。

延遲加載

延遲加載是用戶主動(dòng)觸發(fā)的操作，根據(jù)操作系統(tǒng)反饋對(duì)應(yīng)的結(jié)果。延遲加載包括三種形式：

• 無(wú)限滾動(dòng)：當(dāng)檢測(cè)到用戶快要到達(dá)列表或頁(yè)面的末尾的時(shí)候，通過(guò)無(wú)限滾動(dòng)來(lái)作為觸發(fā)器，引導(dǎo)用戶獲取更多內(nèi)容。

• 加載更多：通過(guò)點(diǎn)擊“加載更多”按鈕來(lái)獲取更多內(nèi)容，這個(gè)過(guò)程由用戶主導(dǎo)決定，是否選擇點(diǎn)擊。

• 分頁(yè)加載：分頁(yè)是在不同頁(yè)面上進(jìn)行的延遲加載。這個(gè)過(guò)程也是由用戶主動(dòng)選擇，但和“加載更多”按鈕不同的地方在于，分頁(yè)是頁(yè)面間的切換，并且用戶能清楚地看到具體的頁(yè)面數(shù)量。

五種加載模式

加載模式需要依托場(chǎng)景去考慮。比如一個(gè)1秒就能加載的頁(yè)面和一個(gè)需要5秒才能加載出來(lái)的頁(yè)面，我們就需要考慮使用不同的加載模式設(shè)計(jì)，這樣才能做到差異化設(shè)計(jì)。

這里我做了一個(gè)表格，將頁(yè)面加載需要的時(shí)間以及對(duì)應(yīng)的加載模式進(jìn)行了整合。

0.1秒以內(nèi)

如果加載時(shí)長(zhǎng)低于0.1秒，用戶不需要等待加載過(guò)程，內(nèi)容就能即時(shí)呈現(xiàn)出來(lái)，有一種“還沒(méi)開始就已經(jīng)結(jié)束”的感覺(jué)。

0.1秒以內(nèi)的加載不需要在頁(yè)面中添加任何加載狀態(tài)，但要一個(gè)場(chǎng)景需要格外注意，如果用戶剛完成一系列復(fù)雜的操作，點(diǎn)擊提交之后，考慮為用戶提供撤消機(jī)制。

▲用谷歌郵箱發(fā)送郵件時(shí)，發(fā)送成功之后會(huì)彈出一個(gè)撤銷提示，允許用戶在5s內(nèi)撤銷剛才發(fā)送成功的郵件。

0.1-1秒間

大多數(shù)產(chǎn)品的頁(yè)面加載速度都在這個(gè)區(qū)間，用戶幾乎不會(huì)注意到這種加載延遲。所以我們不需要增加額外的加載動(dòng)效來(lái)填充這段加載時(shí)間，不然可能會(huì)起到畫蛇添足的反面效果。

試想一下，如果在每個(gè)頁(yè)面加載的過(guò)程中都加上加載動(dòng)效，不僅會(huì)分散用戶的注意力，并且屏幕上總出現(xiàn)不斷跳動(dòng)的內(nèi)容，會(huì)讓人感到很焦躁。

1-2秒間

如果加載時(shí)間超過(guò)1秒，用戶就會(huì)感知到這個(gè)加載過(guò)程，這個(gè)時(shí)候我們就可以考慮適當(dāng)添加加載動(dòng)畫，緩解用戶等待的焦急感。

• 微加載：1-2秒的加載時(shí)間對(duì)用戶來(lái)說(shuō)，說(shuō)長(zhǎng)不長(zhǎng)說(shuō)短也不短，優(yōu)先推薦輕量級(jí)的動(dòng)畫加載形式，為用戶提供一種進(jìn)度感。

▲在下載內(nèi)容的過(guò)程中，使用這種輕量級(jí)的環(huán)形動(dòng)畫來(lái)顯示加載進(jìn)度，簡(jiǎn)潔清晰，而且還能作為組件來(lái)復(fù)用，能夠極大提升工作效率。

• 骨架屏：用于整頁(yè)加載，這種加載形式在產(chǎn)品中的應(yīng)用也越來(lái)越頻繁。骨架屏可以讓用戶在等待加載的過(guò)程中，先了解頁(yè)面的架構(gòu)。

在骨架屏基礎(chǔ)上，可以“選裝”一些好看的效果，增加頁(yè)面加載時(shí)的視覺(jué)體驗(yàn)觀感：

• 微光效果：在骨架屏基礎(chǔ)上添加微光效果，光感的加入能將用戶的注意力從等待中轉(zhuǎn)移開，有效地減少等待感知。

• 脈沖效果：效果和微光效果很像，差異的地方在于脈沖效果用于單個(gè)的任務(wù)或卡片列表。

2-10秒

這個(gè)加載時(shí)間對(duì)于用戶來(lái)說(shuō)已經(jīng)很長(zhǎng)了，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，需要對(duì)這段加載時(shí)間進(jìn)行合理有效地設(shè)計(jì)，來(lái)提升用戶體驗(yàn)。

• 時(shí)間提示：在開發(fā)中很難以分和秒為單位來(lái)精確地估計(jì)加載時(shí)間。

如果在加載的過(guò)程中，想給用戶一個(gè)期望的時(shí)間值，告訴用戶整個(gè)加載過(guò)程需要多長(zhǎng)時(shí)間，我們可以用“這可能需要幾秒鐘”這種提示方法，既能展示加載需要的時(shí)間，又能給用戶一個(gè)時(shí)間預(yù)期。

• 進(jìn)度條：最常使用的加載形式，加載過(guò)程中使用緩入動(dòng)畫會(huì)讓整個(gè)過(guò)程看起來(lái)更像在加速。

• 分步提示：如果加載過(guò)程過(guò)長(zhǎng)，可以將整個(gè)過(guò)程分為幾個(gè)不同的步驟，幫助用戶預(yù)估操作完成需要的時(shí)間。如果系統(tǒng)正在處理多個(gè)項(xiàng)目，分步提示的設(shè)計(jì)能讓用戶明確了解已完成的操作。

10秒以上

• 百分比加載：使用百分比加載雖然不能告訴用戶加載完成需要多長(zhǎng)時(shí)間，但是能提供一種過(guò)程感，讓用戶自己來(lái)估計(jì)加載時(shí)間。圓形進(jìn)度條+百分比是最常見的加載形式。需要注意的是，不要在加載到99%的時(shí)候讓進(jìn)度條卡住不動(dòng)，這樣會(huì)讓用戶感到焦急。

• 后臺(tái)加載：如果一項(xiàng)任務(wù)需要加載很長(zhǎng)時(shí)間，我們不能讓用戶看著進(jìn)度條干等，其他什么都做不了，這種情況我們可以考慮將任務(wù)放到后臺(tái)去加載。

最后

把加載細(xì)分成這五種模式，可以覆蓋很多使用場(chǎng)景，這樣的對(duì)癥下藥既能保證用戶體驗(yàn)，還能讓產(chǎn)品豐富化，起到錦上添花的作用。

在對(duì)的時(shí)間和對(duì)的場(chǎng)景下做對(duì)的事，這句話用在什么地方都不為過(guò)，設(shè)計(jì)也是一樣。

最后考慮到大家經(jīng)常使用卡片式UI排版，為大家整理了90+個(gè)iOS卡片模板，源文件已經(jīng)打包好，大家可后臺(tái)領(lǐng)取。

領(lǐng)取方式：關(guān)注公眾號(hào)，后臺(tái)回復(fù)【小組件】獲取源文件。

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

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

作者：Clippp

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》3種狀態(tài)+5種模式，從UX角度分析加載設(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ì)( www.bouu.cn )是一家專注而深入的界面設(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ù)

以這款Helvetica字體為例，我們可以把字體名稱分為5個(gè)部分。

我們先看第一部分，第一部分包括了兩個(gè)詞，前半部分是字體名字，而“Neue”可以理解為升級(jí)版。

“HelveticaNeue”是Linotype公司在1983年更新的新版字體。在原有的基礎(chǔ)上，對(duì)許多字符進(jìn)行了精細(xì)的修改，還增加了更多不同的粗細(xì)與寬度的選擇。

2019年4月，Monotype公司正式發(fā)布了全新的字體“Helvetica Now”，共有三種形體，分別為：Micro、Display和Text。

Micro版本將專門為移動(dòng)設(shè)備等小屏幕而設(shè)計(jì)，可以解決目前Helvetica字體在小屏幕中難以辨認(rèn)等非常多的問(wèn)題。

Display版主要針對(duì)較大的標(biāo)題，如廣告和橫幅的字體使用。

Text版本則針對(duì)標(biāo)準(zhǔn)尺寸的書面文字所使用。

Helvetica Now更趨近完美，如需使用此Helvetica，可以優(yōu)先考慮這個(gè)版本。（文末有下載）

第二部分代表的是字體公司名稱，如此款字體“LT”則是“Linotype”萊諾字體公司的縮寫。

當(dāng)然，不同公司出版字體，顯示的公司簡(jiǎn)稱也不一樣。如著名的襯線體“Bodoni”則是由“MT-蒙納字體”公司出版。

比較常見的還有“MS-微軟字體”、“ITC-國(guó)際字體”等。

第三部分，“Std”是英文單詞“Standard”的縮寫，代表著這個(gè)字體只支持基礎(chǔ)的字符集。與其相對(duì)應(yīng)的“Pro”是英文單詞“Professional”，代表具有更多的字符集。

第四部分為字重（線幅），是指字母筆畫的粗細(xì)級(jí)別，以：“Helvetica Now Display”為例，共有以下10種字重：

漢字因筆比較復(fù)雜，粗細(xì)變化比較少，遠(yuǎn)不及英文字體豐富，以思源字體為例，共有以下7種字重：

第五部分為字體的格式，目前主流的格式為OTF和TTF。

那該選哪個(gè)格式呢?這主要取決于用戶的場(chǎng)景。

如果你需要使用MS Office進(jìn)行大量工作，建議使用.ttf字體，因?yàn)樗怯葾pple和Microsoft所開發(fā)，與Microsoft軟件兼容性更佳，例如:只能將.ttf字體嵌入到Word和PPt中，而不能嵌入.otf字體。

如果你是一名設(shè)計(jì)師，需要使用Adobe軟件進(jìn)行大量的印刷設(shè)計(jì)工作，建議使用.otf字體。因?yàn)樗怯葾dobe和Microsoft所開發(fā)。OTF格式還提供了更多風(fēng)格的替代方案和字距調(diào)整選項(xiàng)，對(duì)于設(shè)計(jì)師更實(shí)用。

通過(guò)本期講解，相信大家對(duì)于字體名字中的英文含義有了一定程度的了解，下一期我們繼續(xù)講解更多冷知識(shí)，下期見！

“Helvetica Now”全套字體 ，可以在公眾號(hào)對(duì)話框回復(fù)【HE】獲取。（如需商用請(qǐng)購(gòu)買正版字體）

原文地址：藝海拾貝Design（公眾號(hào)）

作者：鄧海貝

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》不懂就問(wèn)！為什么英文字體名字這么長(zhǎ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ì)( www.bouu.cn )是一家專注而深入的界面設(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ù)

 

 

 

 

 

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》這是一份匯集全球優(yōu)秀APP截圖的資源

藍(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ì)( www.bouu.cn )是一家專注而深入的界面設(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ù)

背景介紹

百度健康發(fā)揮搜索入口直達(dá)服務(wù)的優(yōu)勢(shì)，通過(guò)搜索快速連接人與信息、人與服務(wù)，形成了健康科普、在線咨詢服務(wù)、商城購(gòu)藥服務(wù)、慢病管理服務(wù)以及互聯(lián)網(wǎng)醫(yī)院服務(wù)五大服務(wù)體系。同時(shí)，基于百度強(qiáng)大的AI和技術(shù)實(shí)力，在海量搜索數(shù)據(jù)中直接地獲取用戶真實(shí)意圖，智慧化連接服務(wù)。通過(guò)大數(shù)據(jù)對(duì)患者和醫(yī)生進(jìn)行有價(jià)值的匹配引導(dǎo)，提供從健康科普到在線醫(yī)療的一站式服務(wù)中心，全面覆蓋用戶個(gè)人及家庭健康需求，形成完整服務(wù)鏈條。在設(shè)計(jì)理念上，我們致力于用智慧化方式給病患提供更加可及性和便捷性的互動(dòng)體驗(yàn)，并圍繞多端場(chǎng)景提供多元化體驗(yàn)服務(wù)設(shè)計(jì)。

多場(chǎng)景滿足用戶需求

1.醫(yī)學(xué)可視化圖形，提升用戶閱讀體驗(yàn)

用戶在閱讀醫(yī)療相關(guān)知識(shí)內(nèi)容時(shí)，內(nèi)容的表現(xiàn)形式較單一，文字的描述晦澀難懂，用戶很難真正的理解內(nèi)容。醫(yī)學(xué)可視化圖形，能夠明確有效的補(bǔ)充用戶對(duì)詞條的理解，形成對(duì)內(nèi)容的權(quán)威認(rèn)知。

我們結(jié)合科學(xué)+美學(xué)雙線標(biāo)準(zhǔn)，從醫(yī)學(xué)、解刨、瀏覽舒適度等多維度視角繪制插圖，通過(guò)更直觀、舒適、生動(dòng)形象的方式傳達(dá)內(nèi)容，解決了日常大眾對(duì)疾病知識(shí)感到晦澀難懂的痛點(diǎn)。這也成為了醫(yī)療搜索體驗(yàn)中一個(gè)獨(dú)具匠心的創(chuàng)新，是百度健康打造產(chǎn)品醫(yī)療權(quán)威感知的重要基礎(chǔ)。截止目前已經(jīng)應(yīng)用一千多幅插圖，覆蓋32科室共計(jì)3000個(gè)疾病詞條。

2.Ai交互+互動(dòng)模板，高效在線問(wèn)診

AI智能交互互動(dòng)模板，實(shí)現(xiàn)智能診療對(duì)話模型，智能分析預(yù)診導(dǎo)診，通過(guò)AI學(xué)習(xí)構(gòu)建適合臨床輔助診斷的體驗(yàn)流程，深度將篩查、自測(cè)、診斷等多環(huán)節(jié)嵌入到診療流程中，自然、及時(shí)、流暢的應(yīng)答患者提問(wèn)，極大的提升了診療效率。

疫情期間，百度健康和政府合作打造智能診療系統(tǒng)解決方案，幫助人們快速獲得智能化診斷、在線診療和心理疏導(dǎo)等幫助，幫助無(wú)癥狀用戶進(jìn)行預(yù)防，高?；颊呒皶r(shí)獲得診療建議。

單新冠肺炎AI自測(cè)在疫情初期高發(fā)時(shí)段累計(jì)服務(wù)用戶超千萬(wàn)人。其余自測(cè)分型也已覆蓋四百多種。

3、線下場(chǎng)景線上映射，模擬真實(shí)場(chǎng)景

1）「線上處方藥單」的設(shè)計(jì)樣式，模擬現(xiàn)實(shí)中去醫(yī)院開藥的「線下打印處方單」樣式，將無(wú)情感的界面轉(zhuǎn)化成用戶熟悉的可感知形態(tài)，緩解在線的疏離感，充分體現(xiàn)情感化設(shè)計(jì)，使溝通更具沉浸感。最大程度的降低用戶的理解成本，加深用戶對(duì)產(chǎn)品的信賴感，使用戶有更真實(shí)的服務(wù)體驗(yàn)。

疫情期間，線上購(gòu)藥的需求猛增。線上開處方項(xiàng)目，實(shí)現(xiàn)了用戶可以足不出戶，從問(wèn)診到開處方再到藥品到家一站式的服務(wù)體驗(yàn)。

2）互聯(lián)網(wǎng)醫(yī)院一站式線上線下診療閉環(huán)

針對(duì)公立醫(yī)院百度健康搭建了全套互聯(lián)網(wǎng)醫(yī)院服務(wù)場(chǎng)景解決方案，提供一站式線上線下診療閉環(huán)，診前、診中、診后建立整套服務(wù)體系，無(wú)縫銜接線上線下場(chǎng)景，立體式給用戶提供服務(wù)。通過(guò)對(duì)醫(yī)院線下就醫(yī)的全流程的觀察，將線下體驗(yàn)流程還原至線上，從掛號(hào)、繳費(fèi)、查詢到復(fù)診、復(fù)查再到診后慢病管理，打通‘醫(yī)-方-藥’閉環(huán)，全面提交就診效率，形成患者、醫(yī)院、醫(yī)生完整的三端服務(wù)閉環(huán)。同時(shí)，成為國(guó)家分級(jí)診療工作的有利補(bǔ)充。

結(jié)語(yǔ)

百度健康做為全網(wǎng)領(lǐng)先的醫(yī)療科普服務(wù)平臺(tái)。為用戶打造無(wú)障礙智能化健康管理服務(wù)中心，做到靈活、共享、及時(shí)、關(guān)懷。未來(lái)還將不斷優(yōu)化深耕，推動(dòng)健康產(chǎn)業(yè)建設(shè)智慧化進(jìn)程，為全面構(gòu)筑以人為本的健康生態(tài)而努力，為早日實(shí)現(xiàn)“健康中國(guó)”的國(guó)家戰(zhàn)略助力，成為中國(guó)百姓首選的“健康管家”。

原文地址：百度MEUX（公眾號(hào)）

作者：做你健康管家的

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》百度健康服務(wù)化體驗(yà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ì)( www.bouu.cn )是一家專注而深入的界面設(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ù)

1. 自動(dòng)布局快捷鍵

Mac OS 系統(tǒng)快捷鍵

• 開啟自動(dòng)布局：Shift + A
• 關(guān)閉自動(dòng)布局：Shift + Option + A（圖上漏掉了）
• 關(guān)閉自動(dòng)布局并刪除 Frame：Command + Shift + G
• 重制（復(fù)制并粘貼，包含自動(dòng)布局設(shè)置）：Command + D

Windows 快捷鍵

• 開啟自動(dòng)布局：Shift + A
• 關(guān)閉自動(dòng)布局：Shift + Alt + A（圖上漏掉了）
• 關(guān)閉自動(dòng)布局并刪除 Frame：Ctrl + Shift + G
• 重制（復(fù)制并粘貼，包含自動(dòng)布局設(shè)置）：Ctrl + D

2. 樣式復(fù)制粘貼

Mac OS 系統(tǒng)快捷鍵

• 樣式復(fù)制：Option + Command + C
• 樣式粘貼：Option + Command + V

Windows 快捷鍵

• 樣式復(fù)制：Option + Ctrl + C
• 樣式粘貼：Option + Ctrl + V

3. 調(diào)準(zhǔn)順序

其實(shí)就算不用快捷鍵，也可以通過(guò)鼠標(biāo)調(diào)準(zhǔn)順序。

但是畢竟中心哪個(gè)圓圈面積太小不好找，數(shù)量不多的話，用快捷鍵會(huì)更快一些。

Mac OS 系統(tǒng)快捷鍵

• 往左調(diào)整：Command + [
• 往右調(diào)整：Command + ]

Windows 快捷鍵

• 往左調(diào)整：Ctrl + [
• 往右調(diào)整：Ctrl + ]

4. 調(diào)整間距

通過(guò)自動(dòng)布局設(shè)置，可以讓元素的尺寸根據(jù)間距大小自動(dòng)調(diào)整寬度。

利用這一點(diǎn)，可以用來(lái)做很多東西，例如滑動(dòng)條。

5. 自動(dòng)間距

把間距數(shù)值改成 auto， 會(huì)自動(dòng)均分 Frame 內(nèi)元素的間距。

雖然右上角的布局圖標(biāo)也能起到同樣的作用，但是那樣操作的步驟更多：需要先調(diào)整好兩邊的元素的位置，不能根據(jù)所在 Frame 自動(dòng)調(diào)整。

6. 輸入 0.001 設(shè)置 0 高度

Figma 不允許輸入 0 高度，如果你嘗試這么做，按下回車后數(shù)值會(huì)變成 1。

但是有個(gè)小漏洞，那就是如果你輸入 0.001，按下回車后就會(huì)發(fā)現(xiàn)數(shù)值變成 0 了。

一定要小數(shù)點(diǎn)后三位，如果只輸入小數(shù)點(diǎn)后一位或兩位，就不會(huì)有這個(gè)效果。

7. 快速選擇內(nèi)部元素

如果分組或 Frame 層級(jí)過(guò)多，想要選擇下層的元素，通常是雙擊。

但是層次多了，也還是很麻煩。

還可以按下 Command 的同時(shí)用鼠標(biāo)點(diǎn)擊，這樣可以直接選擇最里層的元素。

可是，如果想要選擇的不是最里層，而是倒數(shù)第 N 層呢？

這種情況，用快捷鍵會(huì)更方便一些：

• 選擇下層：回車鍵
• 選擇上層：Shift + 回車鍵
• 選擇下一個(gè)：Tab
• 取消選擇：Esc

8. 避免將元素放入自動(dòng)布局

往自動(dòng)布局里放東西，很容易打亂布局，一下子就變化很大。

如果想要避免這種“手誤”，可以在拖動(dòng)元素的同時(shí)按下空格鍵，這樣元素就不會(huì)被放到任何自動(dòng)布局里。

9. 利用透明度快速自動(dòng)布局

上面卡片的自動(dòng)布局，其實(shí)可以用 Space Between 一鍵設(shè)置出來(lái)。

其實(shí)中間的圖標(biāo)和卡片同寬，只是背景透明所以看起來(lái)是居中對(duì)齊的。

標(biāo)題其實(shí)不止左上角那一個(gè)，卡片左下方還有一個(gè)一模一樣的，只是可見度設(shè)置為 0%，所以看不出來(lái)。

10. 利用自動(dòng)布局設(shè)置最小寬度

很多組件（如上圖文本框）有個(gè)最小寬度，如果簡(jiǎn)單地使用自動(dòng)布局是無(wú)法滿足的。

方法也不難，就是文本框的 Frame 里加一條不可見的線段，而這個(gè)線段的寬度就確定了文本框的最小寬度。

沒(méi)想到 Figma 的自動(dòng)布局有這么多門道，使用起來(lái)多做些組件，肯定能大大提高設(shè)計(jì)效率～

原文地址：體驗(yàn)進(jìn)階（公眾號(hào)）

作者：設(shè)計(jì)師ZoeYZ

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng) ?Figma的自動(dò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ì)( www.bouu.cn )是一家專注而深入的界面設(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ù)

大家看到這張圖的第一感受是什么？是不是覺(jué)得大氣，高級(jí)、簡(jiǎn)約，而且不會(huì)覺(jué)得不精致。

再來(lái)看這張圖，是不是同樣的感受，給人高級(jí)感。那么有沒(méi)有想過(guò)是什么影響了這些高級(jí)感？是不是我們?nèi)庋勰芸吹降念伾?、留白、陰影、大小、圖片、排版、質(zhì)感等細(xì)節(jié)。就是這些元素的和諧處理，才使得整體看上去同一個(gè)世界，讓我們感官愉悅。

因此我們做設(shè)計(jì)時(shí)候，也需要和諧的處理這些元素關(guān)系。把這些關(guān)系處理好了，設(shè)計(jì)細(xì)節(jié)自然豐富，精致度自然也就上來(lái)了。

下面我們看看間距節(jié)奏、投影質(zhì)感、高級(jí)圖片等在設(shè)計(jì)中如何處理。

1.間距節(jié)奏

我們常說(shuō)的間距節(jié)奏，其實(shí)就是留白或者負(fù)空間的應(yīng)用。那么在UI版式中，這些負(fù)空間就是間距網(wǎng)格的應(yīng)用，間距節(jié)奏的把控，下面看這張圖。

上圖，就是一張基礎(chǔ)的版式間距節(jié)奏。好的版式節(jié)奏，就像音樂(lè)一樣，它通過(guò)變化的節(jié)奏來(lái)表達(dá)動(dòng)聽的音樂(lè)。

對(duì)于間距節(jié)奏，我們?cè)谠O(shè)計(jì)中盡量體現(xiàn)倍數(shù)關(guān)系，這樣的節(jié)奏是最明顯的，而且設(shè)版式節(jié)奏感也會(huì)更強(qiáng)，比如看下面這個(gè)案例。

2.投影質(zhì)感

在UI的設(shè)計(jì)語(yǔ)言中，投影是其中一個(gè)基礎(chǔ)層風(fēng)格樣式，它處理好壞也會(huì)直接影響到界面品質(zhì)感。

Dribbble@Gleb Kuznetsov?

上圖是Gleb Kuznetsov的作品，雖然界面設(shè)計(jì)中沒(méi)有過(guò)多復(fù)雜的設(shè)計(jì)，但是整個(gè)界面品質(zhì)感和細(xì)節(jié)處理還是挺值得學(xué)習(xí)的。

我們可以注意以下幾個(gè)細(xì)節(jié)，紅圈的地方。底部語(yǔ)音是輕擬態(tài)質(zhì)感，其他部分的卡片設(shè)計(jì)和按鈕均用了細(xì)膩的投影，而且按鈕的投影還有帶有色相。

所以對(duì)于投影的處理，我們可以看出可以存在兩種思路，按鈕的使用帶有色相的，卡片類的統(tǒng)一灰色投影。

對(duì)于這種投影的處理思路，大家可以看上圖，以按鈕為例，首先將按鈕基本形態(tài)做好。其次復(fù)制一個(gè)上層按鈕，然后將其長(zhǎng)度左右縮小一些，降低透明度50%，第三步就直接將這個(gè)按鈕模糊處理，模糊值大小可以調(diào)節(jié)到合適的范圍即可。

其實(shí)我們看一些優(yōu)秀的Web端設(shè)計(jì)，投影出現(xiàn)的概率也是比較大的。通過(guò)投影可以增加細(xì)節(jié)，豐富質(zhì)感，而且還可以有多種顏色漸變模糊。

3.高級(jí)圖片

圖片在整個(gè)設(shè)計(jì)中可以說(shuō)是重中之重，因?yàn)閳D片占比也是非常大。特別是以圖片為主的產(chǎn)品，一定要注意圖片的品質(zhì)感。

29cm的官網(wǎng)，整體版式質(zhì)感看著就會(huì)很高級(jí)。大家可以去看看蘋果官網(wǎng)，圖片又高級(jí)，又大，產(chǎn)品質(zhì)感精致，對(duì)于用戶來(lái)說(shuō)，只要進(jìn)入官網(wǎng)就會(huì)有想購(gòu)買的沖動(dòng)。

29cm官網(wǎng)

選擇圖片需注意的陷阱，比如上圖，右側(cè)的圖其實(shí)作為生活中的照片是很溫馨的，也適合發(fā)朋友圈。但是如果在設(shè)計(jì)中，就會(huì)顯得元素多，而且不夠聚焦，左側(cè)的就會(huì)更聚焦有力量，有質(zhì)感。

好了，今天的內(nèi)容就先講到這里，我們下期見。

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》3個(gè)好用到尖叫的設(shè)計(jì)細(xì)節(jié)，再不知道就晚了！

藍(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ì)( www.bouu.cn )是一家專注而深入的界面設(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ù)

Behance

 

 

iMuseum 每日環(huán)球展覽

 

 

開眼

 

instagram

 

 

Pantone Connect

 

 

國(guó)家地理

 

 

ZCOOL 站酷

 

 

花瓣

 

 

TOPYS

 

 

VART

 

 

小結(jié)

  

  

  

 

 

重點(diǎn) 01

 

重點(diǎn) 02

 

 

  

重點(diǎn) 03

  

重點(diǎn) 04

  

  

  

 

 

 

重點(diǎn) 05

 

 

 

 

 

重點(diǎn) 06

 

 

重點(diǎn) 07

 

 

 

 

 

 

 

 

 

重點(diǎn) 08

 

總結(jié) Tips：

原文地址：胡曉波工作室（公眾號(hào)）

作者：小章魚

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》五個(gè)案例教會(huì)你怎么做卡通 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ì)( www.bouu.cn )是一家專注而深入的界面設(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ù)