壹周速讀：UI 技巧 + AE 插件 + 字體秘訣 + 精選干貨

大家好，這里是最新一期的壹周速讀！在這里一次讀完上周的熱新聞、妙細(xì)節(jié)、好文章！

在新聞方面，Adobe 發(fā)布了網(wǎng)頁版Ps 和 Ai，F(xiàn)acebook 更名為 Meta，Google 發(fā)布針對(duì)折疊屏的新系統(tǒng)！上周涌現(xiàn)了一大波優(yōu)質(zhì)的 UI 的文章，同時(shí)還有 2 篇專攻 AE 動(dòng)效的文章，特別值得學(xué)習(xí)！下面具體看看吧：

Part 1：熱新聞

1、 Google 推出 Android 12L 系統(tǒng)

Google 公布了為大屏設(shè)備而設(shè)計(jì)的 Android 12L 系統(tǒng)，改進(jìn)了大屏上的 UI 界面顯示，包括通知、快速設(shè)置、鎖屏、概覽、主屏幕等。功能上主要針對(duì)大尺寸高分辨率屏幕（大于 600sp）作出應(yīng)用分屏和 Dock 欄的優(yōu)化。面向的是平板電腦、可折疊設(shè)備和 ChromeOS 設(shè)備。

2、 Facebook 將公司名更改為 Meta

Facebook 宣布將公司名字更改為 Meta，源自「metaverse（元宇宙）」，此次更名也意味著該公司將專注于轉(zhuǎn)向以虛擬現(xiàn)實(shí)為主的新興計(jì)算平臺(tái)，這件事情正在 。與此同時(shí)，全新 Logo 亮相，新品牌符號(hào)著重于動(dòng)態(tài)及 3D 形態(tài)進(jìn)行展現(xiàn)。

3、麥當(dāng)勞推出新字體：薯?xiàng)l體

馬上就是萬圣節(jié)了，麥當(dāng)勞順勢推出了萬圣節(jié)限定薯?xiàng)l字體。這是繼去年麥克雞塊體之后，推出的又一款免費(fèi)字體。麥當(dāng)勞這次以金黃的薯?xiàng)l和番茄醬為靈感，開放免費(fèi)下載也能商業(yè)使用！

4、Adobe 發(fā)布 Ps 及 Ai Web 網(wǎng)頁版

Adobe 宣布推出旗下的兩大最受歡迎的創(chuàng)意生產(chǎn)應(yīng)用的網(wǎng)頁版，即用于圖片編輯的 Photoshop 和用于矢量圖形創(chuàng)作的 illustrator，未來將可以直接在瀏覽器中訪問使用。值得注意的是，可以分享文件以邀請(qǐng)他人進(jìn)行編輯，或發(fā)送一個(gè)僅供查看的鏈接，以獲得評(píng)論、上下文標(biāo)記和注釋。

Part 2：好文章

UI | 內(nèi)容分割方式選取技巧

在瀏覽器的內(nèi)容體驗(yàn)上，各大廠商都有不少細(xì)致入微的優(yōu)化。近兩年，vivo 的設(shè)計(jì)團(tuán)隊(duì)在瀏覽器的設(shè)計(jì)上一直選擇的是留白分割的設(shè)計(jì)方式，但核心競品已經(jīng)逐漸都采用了線性分割，甚至卡片分割的設(shè)計(jì)，是要堅(jiān)守留白還是追隨「趨勢」，Vivo 的設(shè)計(jì)團(tuán)隊(duì)是這樣進(jìn)行探索和優(yōu)化的：

UI | 獨(dú)自創(chuàng)建設(shè)計(jì)系統(tǒng)的6個(gè)技巧

如果你是公司團(tuán)隊(duì)中唯一的設(shè)計(jì)師，工作內(nèi)容龐雜，需要為現(xiàn)有產(chǎn)品設(shè)計(jì)一套設(shè)計(jì)系統(tǒng)，那么你要注意哪些問題？資深產(chǎn)品設(shè)計(jì)師 Taras Savytskyi 將自己在初創(chuàng)團(tuán)隊(duì)中的設(shè)計(jì)經(jīng)驗(yàn)濃縮成為這篇文章，梳理成為這篇文章的6個(gè)要點(diǎn)，應(yīng)該能夠給你不少幫助：

UI | UI 版式設(shè)計(jì)4原則

說到版式，就必須先提 4 條基本原則，這些原則一直都是版式教程的必講知識(shí)點(diǎn)，有大量文章和書籍都做過詳細(xì)介紹，不過根據(jù)設(shè)計(jì)類型的不同會(huì)有出入，這篇文章結(jié)合手機(jī)端的瀏覽體驗(yàn)，來講講版式設(shè)計(jì) 4 原則（對(duì)齊、親密性、對(duì)比和重復(fù)）的運(yùn)用：

UI | 提升UI細(xì)節(jié)的6個(gè)排版要點(diǎn)

在設(shè)計(jì)手機(jī)詳情頁時(shí)，會(huì)經(jīng)常用到的一些排版小細(xì)節(jié)。由于手機(jī)版面受限，用戶瀏覽時(shí)間也短，所以圖文排版不宜太過復(fù)雜，要以清晰呈現(xiàn)為主，簡潔明了是當(dāng)下主流。但是排版越是簡潔，對(duì)細(xì)節(jié)的要求就越高，產(chǎn)生的影響也會(huì)越直觀。那么要怎么處理呢？掌握這6個(gè)細(xì)節(jié)，可以最大程度幫你做好細(xì)節(jié)：

UI | 5個(gè)必知的表單設(shè)計(jì)冷知識(shí)

當(dāng)我們?cè)O(shè)計(jì) Web 表單時(shí)，往往用最直覺的設(shè)計(jì)經(jīng)驗(yàn)本能驅(qū)動(dòng)我們?nèi)ソ鉀Q一些看似在界面設(shè)計(jì)中最簡單的問題，但每每到細(xì)微之處，又會(huì)有無數(shù)疑問從細(xì)節(jié)中冒出來給我們的設(shè)計(jì)造成困擾，所以這些看似偏門、細(xì)碎的內(nèi)容，實(shí)際上是特別值得留意和思考的，這篇來自百度MEUX 團(tuán)隊(duì)的文章，將這些問題給你一網(wǎng)打盡：

字體 | 字體優(yōu)化的7個(gè)技巧

很多同學(xué)做字體的時(shí)候，總感覺差點(diǎn)意思，但又不知道問題出在哪里，就覺得沒有網(wǎng)上看到的字體那么專業(yè)，其實(shí)仔細(xì)觀察就會(huì)發(fā)現(xiàn)，主要的問題大都是沒有細(xì)節(jié)、缺少變化，所以顯得有點(diǎn)粗糙。蔥爺?shù)倪@篇文章分享了幾個(gè)非常有用的字體優(yōu)化技巧：

字體 | 字體特效優(yōu)化的4個(gè)技巧

當(dāng)字體設(shè)計(jì)好后，我們就要給字體添上合適效果，如果說字體設(shè)計(jì)是創(chuàng)造，那字效呈現(xiàn)就是美化，對(duì)于更追求促銷感和氛圍感的電商設(shè)計(jì)，有時(shí)字效會(huì)比字體設(shè)計(jì)更加重要，通過添加合適效果能使字體更具美感和吸引力，同時(shí)也更利于信息和情感傳達(dá)，也算是錦上添花。盧維賢的這篇文章從4個(gè)方面入手總結(jié)了字體特效的優(yōu)化方向：

配色 | 騰訊色彩系統(tǒng)高效應(yīng)用指南

單純的創(chuàng)建設(shè)計(jì)系統(tǒng)和色彩系統(tǒng)并不足以完全應(yīng)用到實(shí)戰(zhàn)項(xiàng)目中，涉及到協(xié)同合作的時(shí)候，還需要制定一套對(duì)應(yīng)的顏色使用規(guī)則，團(tuán)隊(duì)協(xié)作流程。那么騰訊的設(shè)計(jì)團(tuán)隊(duì)是怎么來解決這個(gè)問題的？來看看他們?cè)隍v訊文檔這個(gè)項(xiàng)目中是怎么操作的吧：

職場 | 設(shè)計(jì)師年底總結(jié)技巧

2021年已經(jīng)快過去了，作為設(shè)計(jì)師來說總結(jié)并分析問題才能獲取經(jīng)驗(yàn)，這篇來自京東JellyDesign 團(tuán)隊(duì)的文章，將會(huì)為大家分享設(shè)計(jì)師做年底總結(jié)的經(jīng)驗(yàn)。這篇文章從經(jīng)驗(yàn)總結(jié)的方式、凸顯自己經(jīng)驗(yàn)的方法、分析問題的策略、制定未來計(jì)劃等4個(gè)關(guān)鍵維度來進(jìn)行分享，實(shí)用性極強(qiáng)：

資源 | 10月干貨第三波

這是 10 月第三波精選設(shè)計(jì)干貨，這次挑選的設(shè)計(jì)工具和素材的合集中，有不錯(cuò)的插畫和3D圖庫，還有2款可以搭配起來使用的AI修圖工具，以及面向設(shè)計(jì)師和開發(fā)者的 UI 組件以及 CSS 工具，實(shí)用性都非常強(qiáng)，具體逐個(gè)看看吧：

資源 | 日本免費(fèi)圖標(biāo)網(wǎng)站

IFN 無料アイコン是一個(gè)日本的免費(fèi)圖標(biāo)網(wǎng)站，一共收錄超過 900 個(gè)圖標(biāo)圖案，依照不同主題分門別類，包括因特網(wǎng)、計(jì)算機(jī)、商務(wù)、電器制品、生活用品、動(dòng)物等等，這些圖標(biāo)設(shè)計(jì)都很細(xì)膩精美，提供三種常見圖片格式：SVG、EPS 和 PNG，使用者可以從網(wǎng)站免費(fèi)下載：

AE | 實(shí)用AE動(dòng)效設(shè)計(jì)技巧

After Effects 作為動(dòng)效軟件的鼻祖，以其強(qiáng)大的兼容性、效果豐富性和清晰明了的圖層操作邏輯深得設(shè)計(jì)師們喜愛，騰訊 ISUX 團(tuán)隊(duì)在這篇文章當(dāng)中，從 AE 的插件、操作以及落地三個(gè)方面，為大家整理了一波實(shí)用技巧，希望能幫助大家在工作中更加得心應(yīng)手：

AE | 炫酷AE動(dòng)效的實(shí)現(xiàn)方法

「58 同城超級(jí)福利日」視頻的上線，精致的界面、絲滑的動(dòng)效展示給整個(gè)項(xiàng)目帶來了更好的視覺觀賞性與生動(dòng)性。也讓越來越多的設(shè)計(jì)師意識(shí)到單一的圖形展示已無法滿足一些特殊場景的情感化設(shè)計(jì)表達(dá)。這篇文章結(jié)合了「58 同城超級(jí)福利日」項(xiàng)目案例，用幾個(gè)簡單的插件與腳本，帶你實(shí)現(xiàn)炫酷的動(dòng)效：

Part 3：妙細(xì)節(jié)

1、「小宇宙」的前進(jìn)后退快捷鍵為什么是30s和15s？

2、醒圖：放大畫面，讓馬賽克不涂錯(cuò)位置

3、你會(huì)自覺降低音量避免外放「抖音」視頻影響他人嗎？

4、「螢石云視頻」電子門鈴的人臉識(shí)別技術(shù)太牛了