設(shè)計(jì)風(fēng)格是一種很虛的東西，對(duì)于大部分的 UI 設(shè)計(jì)師來(lái)說(shuō)，都是如此。

相信很多人都是在一家小型的互聯(lián)網(wǎng)公司做設(shè)計(jì)，估計(jì)還是公司唯一的設(shè)計(jì)師，同時(shí)對(duì)設(shè)計(jì)風(fēng)格又拿捏不定，總感覺(jué)是跟著產(chǎn)品經(jīng)理或老板的思路去做設(shè)計(jì)。比如老板的要求是“大氣”，誰(shuí) TM 知道這“大氣”指的什么鬼？

即使花了不少時(shí)間去研究其他公司的產(chǎn)品，依然做不出領(lǐng)導(dǎo)滿(mǎn)意的視覺(jué)稿，最后還被各個(gè)崗位的同事指點(diǎn)著去修改你一把屎一把尿喂大的稿子。

我上面也說(shuō)了，其實(shí)這種事情（講述設(shè)計(jì)風(fēng)格）對(duì)于視覺(jué)設(shè)計(jì)師而言是一種很常見(jiàn)的現(xiàn)象。我身邊也同樣有很多設(shè)計(jì)師出現(xiàn)這個(gè)問(wèn)題，不知道如何向領(lǐng)導(dǎo)或客戶(hù)講述自己的設(shè)計(jì)風(fēng)格。

說(shuō)個(gè)現(xiàn)象，仔細(xì)想想自己是不是這樣的：我們?cè)谧鲆曈X(jué)評(píng)審的時(shí)候，設(shè)計(jì)師講述的常常是文字對(duì)齊、線(xiàn)條、高斯模糊、圖片大小等視覺(jué)表現(xiàn)，有時(shí)候甚至沉醉于 icon 的角度及尺寸的問(wèn)題。面對(duì)于產(chǎn)品經(jīng)理與程序員的質(zhì)疑只能說(shuō)：我覺(jué)得這樣更好看、這樣比較適合我們產(chǎn)品的風(fēng)格…之類(lèi)的話(huà)。要知道，這些理由在如今這個(gè)以顯性數(shù)字指標(biāo)為衡量標(biāo)準(zhǔn)的互聯(lián)網(wǎng)時(shí)代已顯得蒼白無(wú)力。

實(shí)話(huà)實(shí)話(huà)，想要把設(shè)計(jì)風(fēng)格講清楚，的確不是一件容易的事。但絕對(duì)要避免從感性的角度來(lái)闡述事實(shí)的這種習(xí)慣，畢竟現(xiàn)在的移動(dòng)產(chǎn)品從視覺(jué)表現(xiàn)力方面正在逐步降低要求，這種環(huán)境的變化也是要求視覺(jué)設(shè)計(jì)師應(yīng)該主動(dòng)去加強(qiáng)設(shè)計(jì)思路的原因。

為什么要用這個(gè)顏色，為什么要用線(xiàn)條、模糊、留白、卡片、陰影…說(shuō)這么多干嘛？別人能懂？即使聽(tīng)懂了，他也會(huì)從他的角度來(lái)告訴你：那我覺(jué)得這個(gè)陰影不要會(huì)更好。你怎么回復(fù)？

動(dòng)效是如今UI設(shè)計(jì)中的重要組成部分，也是目前最熱門(mén)的設(shè)計(jì)趨勢(shì)之一。在之前的《在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，動(dòng)效有哪些常見(jiàn)的用法》這篇文章中，我們探討了動(dòng)效對(duì)于交互和用戶(hù)的重要意義，動(dòng)效在不同的環(huán)節(jié)發(fā)揮的作用越越來(lái)越大。而今天我們要聊的是光標(biāo)懸停，這也是近年動(dòng)效設(shè)計(jì)的熱點(diǎn)之一。

正是由于Material Design 和蘋(píng)果所引領(lǐng)的動(dòng)效設(shè)計(jì)風(fēng)潮，許多曾經(jīng)有過(guò)的設(shè)計(jì)技巧和元素正在逐步回歸，而懸停就是其中之一。但是相比于曾經(jīng)那些閃爍彈跳的，現(xiàn)如今的光標(biāo)懸停來(lái)的更加微妙，更加強(qiáng)調(diào)功能性和體驗(yàn)。

和其他動(dòng)效相似，光標(biāo)懸停讓交互的引導(dǎo)性更強(qiáng)，有的還帶有預(yù)覽的作用，它的使用范圍非常廣，大到全屏，小到提示和導(dǎo)航元素，不一而足。

接下來(lái)，我們通過(guò)實(shí)戰(zhàn)案例看看，光標(biāo)懸停目前有哪些創(chuàng)新的玩法。

首頁(yè)動(dòng)效

模塊大家應(yīng)該都不陌生，任何一個(gè)完整的界面，都會(huì)有多個(gè)功能模塊，而每個(gè)模塊內(nèi)有相應(yīng)的組件，每個(gè)組件中又有相應(yīng)的元素，其中任何一點(diǎn)的變化，都會(huì)使用戶(hù)對(duì)產(chǎn)品的認(rèn)知發(fā)生改變。

編者按：什么是模塊化設(shè)計(jì)？它有哪些優(yōu)勢(shì)？該如何運(yùn)用模塊化設(shè)計(jì)？本文騰訊CDC 的高手帶你一窺模塊化設(shè)計(jì)的奧妙。

在看組件和元素之前，我們先了解在他們之上的一個(gè)概念

模塊

模塊大家應(yīng)該都不陌生，任何一個(gè)完整的界面，都會(huì)有多個(gè)功能模塊，而每個(gè)模塊內(nèi)有相應(yīng)的組件，每個(gè)組件中又有相應(yīng)的元素，其中任何一點(diǎn)的變化，都會(huì)使用戶(hù)對(duì)產(chǎn)品的認(rèn)知發(fā)生改變。

什么是設(shè)計(jì)規(guī)范，設(shè)計(jì)規(guī)范到底有什么用？如何看懂設(shè)計(jì)規(guī)范？今天@Jaret_杰瑞特 結(jié)合實(shí)際工作中的體驗(yàn)，幫你快速上手設(shè)計(jì)規(guī)范。

當(dāng)我們聊設(shè)計(jì)的時(shí)候，可讀性是我們最常提及的話(huà)題。良好的設(shè)計(jì)應(yīng)該都是可讀的設(shè)計(jì)，如果信息都無(wú)法正常而清晰的傳達(dá)，那么設(shè)計(jì)就失去了意義。

設(shè)計(jì)的可讀性和排版設(shè)計(jì)息息相關(guān)，與此同時(shí)，對(duì)比度的控制也是其中的核心。想要提升內(nèi)容的可讀性，讓內(nèi)容以更加順暢、更符合邏輯的形式呈現(xiàn)在用戶(hù)面前，你需要借助對(duì)比度來(lái)表達(dá)，讓用戶(hù)真正順暢的理解。

色彩對(duì)比

前景的文字需要和背景有著明顯的對(duì)比，它需要能夠吸引用戶(hù)的眼球。

編者按：什么是內(nèi)容化設(shè)計(jì)？設(shè)計(jì)師為什么要關(guān)注內(nèi)容？如何通過(guò)設(shè)計(jì)的手段提高內(nèi)容體驗(yàn)？阿里設(shè)計(jì)師用一個(gè)手淘的實(shí)戰(zhàn)案例，幫你掌握內(nèi)容化設(shè)計(jì)的精髓！

前言

如果說(shuō)好的產(chǎn)品是運(yùn)營(yíng)出來(lái)的，那么內(nèi)容作為用戶(hù)體驗(yàn)中的重要部分不容忽視。然而我們?cè)谠O(shè)計(jì)中經(jīng)常缺乏內(nèi)容體驗(yàn)的意識(shí)。借著第十三屆用戶(hù)體驗(yàn)大會(huì)User Friendly 2016的分享，手淘的設(shè)計(jì)師和業(yè)內(nèi)的同學(xué)們一起做workshop，探索如何進(jìn)行行之有效的內(nèi)容策略腦爆，以及思考內(nèi)容產(chǎn)生、組織到流轉(zhuǎn)分發(fā)的設(shè)計(jì)策略和用戶(hù)行為數(shù)據(jù)驗(yàn)證。希望能讓大家對(duì)無(wú)線(xiàn)端導(dǎo)購(gòu)的內(nèi)容化設(shè)計(jì)有所啟發(fā)。以下是對(duì)大會(huì)相關(guān)內(nèi)容的整理。

在探討內(nèi)容化設(shè)計(jì)是什么之前，或許有人奇怪：設(shè)計(jì)為什么要關(guān)注內(nèi)容呢？

表單是網(wǎng)頁(yè)設(shè)計(jì)中最常見(jiàn)的元素，幾乎每個(gè)網(wǎng)站都會(huì)包含一種甚至幾種不同類(lèi)型的表單。從簡(jiǎn)單的電子郵件搜集和訂閱，到注冊(cè)、下單、購(gòu)買(mǎi)，表單一直伴隨著網(wǎng)頁(yè)而存在。所以，設(shè)計(jì)出好看易用的表單是非常有必要的。

也正是因?yàn)楸韱我恢卑殡S這網(wǎng)頁(yè)存在，在過(guò)去的20多年間，表單的設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)也一直在逐步發(fā)展。雖然許多網(wǎng)頁(yè)中的表單涵蓋了大量的信息也數(shù)量可觀的欄目，但是絕大多數(shù)的優(yōu)秀設(shè)計(jì)和最佳實(shí)踐都是以簡(jiǎn)單而著稱(chēng)。好的表單一目了然，用戶(hù)不需要輸入太多信息，條目標(biāo)識(shí)明確，格式清晰，讓用戶(hù)盡可能一次就能正確填寫(xiě)。

授人以魚(yú)不如授人以漁，我寫(xiě)文章的目的并不是讓大家完全按照我的方法來(lái)做，而是希望我們都能提高自己的思維方式，因?yàn)楝F(xiàn)在網(wǎng)上的方法與經(jīng)驗(yàn)實(shí)在太多（又不能確定都是正確的），你的大腦永遠(yuǎn)無(wú)法承載整個(gè)互聯(lián)網(wǎng)的信息容量，所以與其看那多內(nèi)容，不如從根源上提高自己拆解、分析、總結(jié)的能力，這樣無(wú)論以后你遇到什么樣的問(wèn)題，都能夠迎刃而解。

時(shí)下一種流行的設(shè)計(jì)方式是在頁(yè)面頂部使用配有簡(jiǎn)潔文字的大幅圖片或者視頻，以此吸引用戶(hù)進(jìn)入網(wǎng)站。這種設(shè)計(jì)方式最頭疼的就是如何為這些文字選擇合適的字體。

從樣式繁多的字體庫(kù)中找到一個(gè)合適的字體，往往會(huì)讓設(shè)計(jì)師感到舉步維艱。但是我們可以使用一些小技巧，就能找到我們需要的字體。讓我們通過(guò)下面幾個(gè)精彩的案列來(lái)分享這5條建議。

什么是特排字體（Display Type）