原文地址：黑馬家族（公眾號）

作者：黑馬青年

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

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

三種加載狀態(tài)

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

逐一加載

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

完全加載

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

同樣，頁面完全加載的形式會讓用戶的操作和瀏覽過程更流暢。

延遲加載

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

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

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

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

五種加載模式

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

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

0.1秒以內(nèi)

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

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

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

0.1-1秒間

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

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

1-2秒間

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

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

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

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

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

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

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

2-10秒

這個加載時間對于用戶來說已經(jīng)很長了，對于設(shè)計師來說，需要對這段加載時間進(jìn)行合理有效地設(shè)計，來提升用戶體驗。

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

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

• 進(jìn)度條：最常使用的加載形式，加載過程中使用緩入動畫會讓整個過程看起來更像在加速。

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

10秒以上

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

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

最后

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

在對的時間和對的場景下做對的事，這句話用在什么地方都不為過，設(shè)計也是一樣。

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

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

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

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

作者：Clippp

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》3種狀態(tài)+5種模式，從UX角度分析加載設(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.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

那該選哪個格式呢?這主要取決于用戶的場景。

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

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

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

“Helvetica Now”全套字體 ，可以在公眾號對話框回復(fù)【HE】獲取。（如需商用請購買正版字體）

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

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

 

 

 

 

 

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

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

背景介紹

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

多場景滿足用戶需求

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

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

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

2.Ai交互+互動模板，高效在線問診

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

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

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

3、線下場景線上映射，模擬真實場景

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

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

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

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

結(jié)語

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

原文地址：百度MEUX（公眾號）

作者：做你健康管家的

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》百度健康服務(wù)化體驗

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

1. 自動布局快捷鍵

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

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

Windows 快捷鍵

• 開啟自動布局：Shift + A
• 關(guān)閉自動布局：Shift + Alt + A（圖上漏掉了）
• 關(guān)閉自動布局并刪除 Frame：Ctrl + Shift + G
• 重制（復(fù)制并粘貼，包含自動布局設(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)順序

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

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

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

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

Windows 快捷鍵

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

4. 調(diào)整間距

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

利用這一點，可以用來做很多東西，例如滑動條。

5. 自動間距

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

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

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

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

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

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

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

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

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

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

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

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

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

8. 避免將元素放入自動布局

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

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

9. 利用透明度快速自動布局

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

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

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

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

很多組件（如上圖文本框）有個最小寬度，如果簡單地使用自動布局是無法滿足的。

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

沒想到 Figma 的自動布局有這么多門道，使用起來多做些組件，肯定能大大提高設(shè)計效率～

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

作者：設(shè)計師ZoeYZ

轉(zhuǎn)載請注明：學(xué)UI網(wǎng) ?Figma的自動布局也太好用了吧！

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

大家看到這張圖的第一感受是什么？是不是覺得大氣，高級、簡約，而且不會覺得不精致。

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

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

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

1.間距節(jié)奏

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

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

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

2.投影質(zhì)感

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

Dribbble@Gleb Kuznetsov?

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

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

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

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

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

3.高級圖片

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

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

29cm官網(wǎng)

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

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

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

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

Behance

 

 

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

 

 

開眼

 

instagram

 

 

Pantone Connect

 

 

國家地理

 

 

ZCOOL 站酷

 

 

花瓣

 

 

TOPYS

 

 

VART

 

 

小結(jié)

  

  

  

 

 

重點 01

 

重點 02

 

 

  

重點 03

  

重點 04

  

  

  

 

 

 

重點 05

 

 

 

 

 

重點 06

 

 

重點 07

 

 

 

 

 

 

 

 

 

重點 08

 

總結(jié) Tips：

原文地址：胡曉波工作室（公眾號）

作者：小章魚

轉(zhuǎn)載請注明：學(xué)UI網(wǎ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.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)