· 葉子
· 蓮蓬
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/01/ezgif-6-3d877ca29e.gif)
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/01/ezgif-6-5550561596.gif)
· 花朵
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/01/ezgif-6-d731e300d5.gif)
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/01/ezgif-6-4fb58e7c7a.gif)
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/01/ezgif-6-c995e82cd4.gif)
原文地址：胡曉波工作室（公眾號）
作者：藍貴蓮
轉載請注明：學UI網》彩鉛肌理扁平插畫教程（附筆刷）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
頁面加載進程會受多方面的影響，例如頁面里圖片、圖標的數量，頁面中是否有三維場景或模型，是列表式設計還是卡片式設計…
逐一加載
對于可以同時進行多個加載任務的產品，更適合應用逐一加載的形式，這樣做能減少用戶對于等待的感知程度。任務列表逐一加載的過程會給用戶帶來一種秩序感。
完全加載
進入一個網站或App，很多頁面都會一下就顯示出來所有內容，這種頁面完全加載的形式對用戶來說更熟悉。
同樣，頁面完全加載的形式會讓用戶的操作和瀏覽過程更流暢。
延遲加載
延遲加載是用戶主動觸發的操作，根據操作系統反饋對應的結果。延遲加載包括三種形式：
加載模式需要依托場景去考慮。比如一個1秒就能加載的頁面和一個需要5秒才能加載出來的頁面，我們就需要考慮使用不同的加載模式設計，這樣才能做到差異化設計。
這里我做了一個表格，將頁面加載需要的時間以及對應的加載模式進行了整合。
0.1秒以內
如果加載時長低于0.1秒，用戶不需要等待加載過程，內容就能即時呈現出來，有一種“還沒開始就已經結束”的感覺。
0.1秒以內的加載不需要在頁面中添加任何加載狀態，但要一個場景需要格外注意，如果用戶剛完成一系列復雜的操作，點擊提交之后，考慮為用戶提供撤消機制。
▲用谷歌郵箱發送郵件時，發送成功之后會彈出一個撤銷提示，允許用戶在5s內撤銷剛才發送成功的郵件。
0.1-1秒間
大多數產品的頁面加載速度都在這個區間，用戶幾乎不會注意到這種加載延遲。所以我們不需要增加額外的加載動效來填充這段加載時間，不然可能會起到畫蛇添足的反面效果。
試想一下，如果在每個頁面加載的過程中都加上加載動效，不僅會分散用戶的注意力，并且屏幕上總出現不斷跳動的內容，會讓人感到很焦躁。
1-2秒間
如果加載時間超過1秒，用戶就會感知到這個加載過程，這個時候我們就可以考慮適當添加加載動畫，緩解用戶等待的焦急感。
▲在下載內容的過程中，使用這種輕量級的環形動畫來顯示加載進度，簡潔清晰，而且還能作為組件來復用，能夠極大提升工作效率。
在骨架屏基礎上，可以“選裝”一些好看的效果，增加頁面加載時的視覺體驗觀感：
2-10秒
這個加載時間對于用戶來說已經很長了，對于設計師來說，需要對這段加載時間進行合理有效地設計，來提升用戶體驗。
如果在加載的過程中，想給用戶一個期望的時間值，告訴用戶整個加載過程需要多長時間，我們可以用“這可能需要幾秒鐘”這種提示方法，既能展示加載需要的時間，又能給用戶一個時間預期。
10秒以上
把加載細分成這五種模式，可以覆蓋很多使用場景，這樣的對癥下藥既能保證用戶體驗，還能讓產品豐富化，起到錦上添花的作用。
在對的時間和對的場景下做對的事，這句話用在什么地方都不為過，設計也是一樣。
最后考慮到大家經常使用卡片式UI排版，為大家整理了90+個iOS卡片模板，源文件已經打包好，大家可后臺領取。
領取方式：關注公眾號，后臺回復【小組件】獲取源文件。
慢慢來比較快，希望對你有幫助！
原文地址：Clip設計夾（公眾號）
作者：Clippp
轉載請注明：學UI網》3種狀態+5種模式，從UX角度分析加載設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
以這款Helvetica字體為例，我們可以把字體名稱分為5個部分。
我們先看第一部分，第一部分包括了兩個詞，前半部分是字體名字，而“Neue”可以理解為升級版。
“HelveticaNeue”是Linotype公司在1983年更新的新版字體。在原有的基礎上，對許多字符進行了精細的修改，還增加了更多不同的粗細與寬度的選擇。
2019年4月，Monotype公司正式發布了全新的字體“Helvetica Now”，共有三種形體，分別為：Micro、Display和Text。
Micro版本將專門為移動設備等小屏幕而設計，可以解決目前Helvetica字體在小屏幕中難以辨認等非常多的問題。
Display版主要針對較大的標題，如廣告和橫幅的字體使用。
Text版本則針對標準尺寸的書面文字所使用。
Helvetica Now更趨近完美，如需使用此Helvetica，可以優先考慮這個版本。（文末有下載）
第二部分代表的是字體公司名稱，如此款字體“LT”則是“Linotype”萊諾字體公司的縮寫。
當然，不同公司出版字體，顯示的公司簡稱也不一樣。如著名的襯線體“Bodoni”則是由“MT-蒙納字體”公司出版。
比較常見的還有“MS-微軟字體”、“ITC-國際字體”等。
第三部分，“Std”是英文單詞“Standard”的縮寫，代表著這個字體只支持基礎的字符集。與其相對應的“Pro”是英文單詞“Professional”，代表具有更多的字符集。
第四部分為字重（線幅），是指字母筆畫的粗細級別，以：“Helvetica Now Display”為例，共有以下10種字重：
漢字因筆比較復雜，粗細變化比較少，遠不及英文字體豐富，以思源字體為例，共有以下7種字重：
第五部分為字體的格式，目前主流的格式為OTF和TTF。
那該選哪個格式呢?這主要取決于用戶的場景。
如果你需要使用MS Office進行大量工作，建議使用.ttf字體，因為它是由Apple和Microsoft所開發，與Microsoft軟件兼容性更佳，例如:只能將.ttf字體嵌入到Word和PPt中，而不能嵌入.otf字體。
如果你是一名設計師，需要使用Adobe軟件進行大量的印刷設計工作，建議使用.otf字體。因為它是由Adobe和Microsoft所開發。OTF格式還提供了更多風格的替代方案和字距調整選項，對于設計師更實用。
通過本期講解，相信大家對于字體名字中的英文含義有了一定程度的了解，下一期我們繼續講解更多冷知識，下期見！
“Helvetica Now”全套字體 ，可以在公眾號對話框回復【HE】獲取。（如需商用請購買正版字體）
原文地址：藝海拾貝Design（公眾號）
作者：鄧海貝
轉載請注明：學UI網》不懂就問！為什么英文字體名字這么長？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
轉載請注明：學UI網》這是一份匯集全球優秀APP截圖的資源
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
百度健康發揮搜索入口直達服務的優勢，通過搜索快速連接人與信息、人與服務，形成了健康科普、在線咨詢服務、商城購藥服務、慢病管理服務以及互聯網醫院服務五大服務體系。同時，基于百度強大的AI和技術實力，在海量搜索數據中直接地獲取用戶真實意圖，智慧化連接服務。通過大數據對患者和醫生進行有價值的匹配引導，提供從健康科普到在線醫療的一站式服務中心，全面覆蓋用戶個人及家庭健康需求，形成完整服務鏈條。在設計理念上，我們致力于用智慧化方式給病患提供更加可及性和便捷性的互動體驗，并圍繞多端場景提供多元化體驗服務設計。
1.醫學可視化圖形，提升用戶閱讀體驗
用戶在閱讀醫療相關知識內容時，內容的表現形式較單一，文字的描述晦澀難懂，用戶很難真正的理解內容。醫學可視化圖形，能夠明確有效的補充用戶對詞條的理解，形成對內容的權威認知。
我們結合科學+美學雙線標準，從醫學、解刨、瀏覽舒適度等多維度視角繪制插圖，通過更直觀、舒適、生動形象的方式傳達內容，解決了日常大眾對疾病知識感到晦澀難懂的痛點。這也成為了醫療搜索體驗中一個獨具匠心的創新，是百度健康打造產品醫療權威感知的重要基礎。截止目前已經應用一千多幅插圖，覆蓋32科室共計3000個疾病詞條。
2.Ai交互+互動模板，高效在線問診
AI智能交互互動模板，實現智能診療對話模型，智能分析預診導診，通過AI學習構建適合臨床輔助診斷的體驗流程，深度將篩查、自測、診斷等多環節嵌入到診療流程中，自然、及時、流暢的應答患者提問，極大的提升了診療效率。
疫情期間，百度健康和政府合作打造智能診療系統解決方案，幫助人們快速獲得智能化診斷、在線診療和心理疏導等幫助，幫助無癥狀用戶進行預防，高?；颊呒皶r獲得診療建議。
單新冠肺炎AI自測在疫情初期高發時段累計服務用戶超千萬人。其余自測分型也已覆蓋四百多種。
3、線下場景線上映射，模擬真實場景
1）「線上處方藥單」的設計樣式，模擬現實中去醫院開藥的「線下打印處方單」樣式，將無情感的界面轉化成用戶熟悉的可感知形態，緩解在線的疏離感，充分體現情感化設計，使溝通更具沉浸感。最大程度的降低用戶的理解成本，加深用戶對產品的信賴感，使用戶有更真實的服務體驗。
疫情期間，線上購藥的需求猛增。線上開處方項目，實現了用戶可以足不出戶，從問診到開處方再到藥品到家一站式的服務體驗。
2）互聯網醫院一站式線上線下診療閉環
針對公立醫院百度健康搭建了全套互聯網醫院服務場景解決方案，提供一站式線上線下診療閉環，診前、診中、診后建立整套服務體系，無縫銜接線上線下場景，立體式給用戶提供服務。通過對醫院線下就醫的全流程的觀察，將線下體驗流程還原至線上，從掛號、繳費、查詢到復診、復查再到診后慢病管理，打通‘醫-方-藥’閉環，全面提交就診效率，形成患者、醫院、醫生完整的三端服務閉環。同時，成為國家分級診療工作的有利補充。
百度健康做為全網領先的醫療科普服務平臺。為用戶打造無障礙智能化健康管理服務中心，做到靈活、共享、及時、關懷。未來還將不斷優化深耕，推動健康產業建設智慧化進程，為全面構筑以人為本的健康生態而努力，為早日實現“健康中國”的國家戰略助力，成為中國百姓首選的“健康管家”。
原文地址：百度MEUX（公眾號）
作者：做你健康管家的
轉載請注明：學UI網》百度健康服務化體驗
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Mac OS 系統快捷鍵
Windows 快捷鍵
Mac OS 系統快捷鍵
Windows 快捷鍵
其實就算不用快捷鍵，也可以通過鼠標調準順序。
但是畢竟中心哪個圓圈面積太小不好找，數量不多的話，用快捷鍵會更快一些。
Mac OS 系統快捷鍵
Windows 快捷鍵
通過自動布局設置，可以讓元素的尺寸根據間距大小自動調整寬度。
利用這一點，可以用來做很多東西，例如滑動條。
把間距數值改成 auto， 會自動均分 Frame 內元素的間距。
雖然右上角的布局圖標也能起到同樣的作用，但是那樣操作的步驟更多：需要先調整好兩邊的元素的位置，不能根據所在 Frame 自動調整。
Figma 不允許輸入 0 高度，如果你嘗試這么做，按下回車后數值會變成 1。
但是有個小漏洞，那就是如果你輸入 0.001，按下回車后就會發現數值變成 0 了。
一定要小數點后三位，如果只輸入小數點后一位或兩位，就不會有這個效果。
如果分組或 Frame 層級過多，想要選擇下層的元素，通常是雙擊。
但是層次多了，也還是很麻煩。
還可以按下 Command 的同時用鼠標點擊，這樣可以直接選擇最里層的元素。
可是，如果想要選擇的不是最里層，而是倒數第 N 層呢？
這種情況，用快捷鍵會更方便一些：
往自動布局里放東西，很容易打亂布局，一下子就變化很大。
如果想要避免這種“手誤”，可以在拖動元素的同時按下空格鍵，這樣元素就不會被放到任何自動布局里。
上面卡片的自動布局，其實可以用 Space Between 一鍵設置出來。
其實中間的圖標和卡片同寬，只是背景透明所以看起來是居中對齊的。
標題其實不止左上角那一個，卡片左下方還有一個一模一樣的，只是可見度設置為 0%，所以看不出來。
很多組件（如上圖文本框）有個最小寬度，如果簡單地使用自動布局是無法滿足的。
方法也不難，就是文本框的 Frame 里加一條不可見的線段，而這個線段的寬度就確定了文本框的最小寬度。
沒想到 Figma 的自動布局有這么多門道，使用起來多做些組件，肯定能大大提高設計效率～
原文地址：體驗進階（公眾號）
作者：設計師ZoeYZ
轉載請注明：學UI網 ?Figma的自動布局也太好用了吧！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
大家看到這張圖的第一感受是什么？是不是覺得大氣，高級、簡約，而且不會覺得不精致。
再來看這張圖，是不是同樣的感受，給人高級感。那么有沒有想過是什么影響了這些高級感？是不是我們肉眼能看到的顏色、留白、陰影、大小、圖片、排版、質感等細節。就是這些元素的和諧處理，才使得整體看上去同一個世界，讓我們感官愉悅。
因此我們做設計時候，也需要和諧的處理這些元素關系。把這些關系處理好了，設計細節自然豐富，精致度自然也就上來了。
下面我們看看間距節奏、投影質感、高級圖片等在設計中如何處理。
我們常說的間距節奏，其實就是留白或者負空間的應用。那么在UI版式中，這些負空間就是間距網格的應用，間距節奏的把控，下面看這張圖。
上圖，就是一張基礎的版式間距節奏。好的版式節奏，就像音樂一樣，它通過變化的節奏來表達動聽的音樂。
對于間距節奏，我們在設計中盡量體現倍數關系，這樣的節奏是最明顯的，而且設版式節奏感也會更強，比如看下面這個案例。
在UI的設計語言中，投影是其中一個基礎層風格樣式，它處理好壞也會直接影響到界面品質感。
Dribbble@Gleb Kuznetsov?
上圖是Gleb Kuznetsov的作品，雖然界面設計中沒有過多復雜的設計，但是整個界面品質感和細節處理還是挺值得學習的。
我們可以注意以下幾個細節，紅圈的地方。底部語音是輕擬態質感，其他部分的卡片設計和按鈕均用了細膩的投影，而且按鈕的投影還有帶有色相。
所以對于投影的處理，我們可以看出可以存在兩種思路，按鈕的使用帶有色相的，卡片類的統一灰色投影。
對于這種投影的處理思路，大家可以看上圖，以按鈕為例，首先將按鈕基本形態做好。其次復制一個上層按鈕，然后將其長度左右縮小一些，降低透明度50%，第三步就直接將這個按鈕模糊處理，模糊值大小可以調節到合適的范圍即可。
其實我們看一些優秀的Web端設計，投影出現的概率也是比較大的。通過投影可以增加細節，豐富質感，而且還可以有多種顏色漸變模糊。
圖片在整個設計中可以說是重中之重，因為圖片占比也是非常大。特別是以圖片為主的產品，一定要注意圖片的品質感。
29cm的官網，整體版式質感看著就會很高級。大家可以去看看蘋果官網，圖片又高級，又大，產品質感精致，對于用戶來說，只要進入官網就會有想購買的沖動。
29cm官網
選擇圖片需注意的陷阱，比如上圖，右側的圖其實作為生活中的照片是很溫馨的，也適合發朋友圈。但是如果在設計中，就會顯得元素多，而且不夠聚焦，左側的就會更聚焦有力量，有質感。
好了，今天的內容就先講到這里，我們下期見。
轉載請注明：學UI網》3個好用到尖叫的設計細節，再不知道就晚了！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
原文地址：胡曉波工作室（公眾號）
作者：小章魚
轉載請注明：學UI網》五個案例教會你怎么做卡通 LOGO （二）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
