UI 設(shè)計(jì)越來越重視排版了，傳統(tǒng)的排版設(shè)計(jì)在 UI 界面這個場景之下，也有了更多的講究。這周的速讀小專題是關(guān)于如何做好 UI 排版的好文合集~

UI 排版干貨合集

從人類進(jìn)化的結(jié)果看圖像比文字更受大腦的青睞，在沒有文字之前，人類靠的都是「看」出來的圖像，所以在APP界面設(shè)計(jì)中圖片比文字更容易讓人產(chǎn)生點(diǎn)擊欲望。所以，APP 中的圖文排版有著極大的發(fā)揮空間，而這篇給 UI 設(shè)計(jì)師的圖文設(shè)計(jì)指南，相當(dāng)詳盡了介紹了 UI 界面中常見的圖文排版套路：

不過，當(dāng)圖片和列表控件結(jié)合到一起，排版和布局交互的規(guī)則，和普通情形下，就有著不小的區(qū)別：

在更深層次的交互和體驗(yàn)上，界面排版還能幫助設(shè)計(jì)師帶來更多的提升，而很多高階的 UI 設(shè)計(jì)師就是靠這樣的排版技巧和普通設(shè)計(jì)師拉開距離的：

如果你想進(jìn)一步提升排版的高級感，那么不妨直接參考 Jeremiah Lam 的這套實(shí)用技巧來逐個排查，有效提升：

當(dāng)然，除了要了解排版布局，設(shè)計(jì)師還要對于字體的各種知識了然于胸，才能讓 UI 排版更上一層樓：

排版·視覺

宋體字可以說是我們現(xiàn)在最常用的字體之一，一方面他與黑體一樣，具有非常良好的可讀性和易辨性，另一方面，他又比黑體更具有歷史感和東方韻味，我們可以看到很多的教材、書籍內(nèi)文或者官方文件，都是用的宋體字，甚至許多設(shè)計(jì)都會用一些比較有表現(xiàn)力的宋體字作為標(biāo)題。那么在設(shè)計(jì)項(xiàng)目中，要怎么設(shè)計(jì)和運(yùn)用宋體字呢？這篇超長干貨送給你：

版式設(shè)計(jì)關(guān)注的是設(shè)計(jì)中文字和圖像的位置關(guān)系。 各種元素應(yīng)該如何擺放，它們彼此以及整體設(shè)計(jì)構(gòu)想的關(guān)系，都會影響到用戶對內(nèi)容的識別與接收，以及他們對內(nèi)容所產(chǎn)生的情緒反應(yīng)。可是，在實(shí)際應(yīng)用過程中，依然有很多排版設(shè)計(jì)，即時對齊了依然不夠好看，這是為什么？看這里：

交互·運(yùn)營

這篇文章同樣來自資深設(shè)計(jì)師 Jeremiah Lam，著重聊聊 UI 界面里，下拉菜單的設(shè)計(jì)注意事項(xiàng)，文章會加入大量的用例和最佳實(shí)踐來為你進(jìn)行說明。而在設(shè)計(jì)的規(guī)則和技巧上，有很多內(nèi)容是來自于體驗(yàn)設(shè)計(jì)領(lǐng)域內(nèi)最頂尖的 NN Group 和 Baymard Institute 兩大機(jī)構(gòu)：

有些人會覺得，作品「好」的設(shè)計(jì)師就一定是優(yōu)秀的設(shè)計(jì)師，其實(shí)并不完全是。對于一個商業(yè)設(shè)計(jì)師來說，綜合能力才是最重要的，作品的好壞只是眾多維度當(dāng)中的一個維度。那其他維度都有什么呢？來看看騰訊設(shè)計(jì)師「菜心設(shè)計(jì)鋪」給你拆解大廠設(shè)計(jì)師的9大能力：

相信對于做UI的同學(xué)來說，設(shè)計(jì)規(guī)范大家肯定都很熟悉了，那什么是設(shè)計(jì)系統(tǒng)呢？在實(shí)際項(xiàng)目中又該如何快速做好一套設(shè)計(jì)系統(tǒng)？一份優(yōu)秀的設(shè)計(jì)系統(tǒng)包含哪些內(nèi)容，需要整理到怎樣的顆粒度？這篇文章中分享的方法，和騰訊、360兩家公司做的設(shè)計(jì)系統(tǒng)流程步驟基本一致，有很高的實(shí)操性，一起來學(xué)習(xí)吧：

2020年進(jìn)入后半段，運(yùn)營要怎么做？這篇來自騰訊 ISUX 團(tuán)隊(duì)的文章，將運(yùn)營體驗(yàn)設(shè)計(jì)歸納為3個大層面：基礎(chǔ)層、風(fēng)格層、策略層，拆解各個層面的模塊內(nèi)容、元素、玩法，從字體、圖形、色彩、動效、空間等多個維度出發(fā)，同時考慮技術(shù)趨勢等影響因素，總結(jié)了11個值得注意的運(yùn)營體驗(yàn)設(shè)計(jì)趨勢，希望這些內(nèi)容可以讓運(yùn)營創(chuàng)意飛起來，輕松抓住用戶心理并吸引用戶，從而在商業(yè)設(shè)計(jì)中發(fā)揮設(shè)計(jì)價值和影響：

神器·干貨

如今越來越多的設(shè)計(jì)工具開始向著遠(yuǎn)程協(xié)作的使用場景靠攏，無論是最新的設(shè)計(jì)資源合集 Webdesign Toolbox 還是 新晉的開發(fā)協(xié)同代碼工具 Code Stream，都體現(xiàn)出這樣的特點(diǎn)。除此之外，在這一期的設(shè)計(jì)圈干貨大合集當(dāng)中，還有很多有用、實(shí)用的設(shè)計(jì)工具，比如色彩管理工具 Litur，超強(qiáng)大的網(wǎng)頁主題編輯器 Blocksy Theme，最新的字體，等等等等。接下來，我們就一起來看看吧 ：

「Free illustrations」是一個整理網(wǎng)絡(luò)上免費(fèi)插圖素材的網(wǎng)站，如果你覺得免費(fèi)資源太過零散，不容易使用分類或標(biāo)簽找到可用的插圖，可以考慮瀏覽該網(wǎng)站，它已經(jīng)將幾個常用的素材圖庫列在網(wǎng)站上，使用者可通過文件類型找到合適素材。收錄在 Free illustrations 絕大多數(shù)素材都可以免費(fèi)使用于個人或商業(yè)用途，快來了解一下吧：

「Pixelmob」是一個免費(fèi)圖片搜索引擎，它將一些常見常用的圖片收錄在同一網(wǎng)站，利用搜尋方式就能快速查找不同的圖庫相片，用戶不用一個一個打開網(wǎng)站搜尋，透過 Pixelmob 一次列出不同圖庫來源、相同的關(guān)鍵詞搜尋結(jié)果，方便我們在找圖時能順便比較差異性，最終獲得更適合自己需要的相片素材：

新視野

但是如果你認(rèn)為日本設(shè)計(jì)只是極簡？那就大錯特錯了，日本設(shè)計(jì)才不止極簡呢，例如今天要給大家介紹的這位近年來日本設(shè)計(jì)界炙手可熱的新銳設(shè)計(jì)師——吉田ユニ/ Yuni Yoshida。吉田ユニ利善于用大膽?yīng)毺氐纳屎统F(xiàn)實(shí)的表現(xiàn)形式，呈現(xiàn)出不一樣的日本設(shè)計(jì)風(fēng)格，而這種超現(xiàn)實(shí)的風(fēng)格便成為了吉田ユニ的標(biāo)簽：

可能極少有人會注意到，電影大佬王家衛(wèi)，竟然是正兒八經(jīng)的平面設(shè)計(jì)專業(yè)科班出身！這個「夭折」的設(shè)計(jì)界人才，一轉(zhuǎn)身，成了電影界的大佬，而且他的電影作品當(dāng)中處處都藏著設(shè)計(jì)美學(xué)，這篇文章為你揭秘王家衛(wèi)：

工程師法爾曼創(chuàng)造了第一個表情符號，使文字信息更準(zhǔn)確的傳達(dá)情緒，表情現(xiàn)已經(jīng)成為了互聯(lián)網(wǎng)溝通中不可或缺的元素。百度APP用戶正趨于年輕化，表達(dá)的訴求也日益增加。線上表情已不能滿足用戶需求，于是設(shè)計(jì)師自發(fā)開啟了 BAIDU EMOJI 2.0的設(shè)計(jì)歷程，而這篇文章，就記錄了改版的思路和具體過程：

設(shè)計(jì)師職場

一些轉(zhuǎn)行UI的新手設(shè)計(jì)師時常陷入迷茫和瓶頸，深入挖掘會發(fā)現(xiàn)，這種無力感和大學(xué)課程的缺失有很大關(guān)系，而培訓(xùn)機(jī)構(gòu)也不會覆蓋這些內(nèi)容，只能靠自己彌補(bǔ)、領(lǐng)悟和沉淀。這篇文章，就深入探討了可能缺乏的知識有哪些，這些底層知識重要的原因，并解析工作中需要的應(yīng)用知識如何和這些底層知識建立對應(yīng)關(guān)系：