動(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)效

編者按：什么是模塊化設(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í)候，可讀性是我們最常提及的話題。良好的設(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ù)的眼球。

授人以魚(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)題，都能夠迎刃而解。

編者按：什么是無(wú)框界面？憑什么斷言它能成為2017年的主流UI 設(shè)計(jì)風(fēng)格？雨涵_Zoe 這篇干貨文章為你揭秘。

什么是無(wú)框界面？

縱使幾大設(shè)計(jì)風(fēng)格已形成寡頭壟斷（如蘋(píng)果的圓角玻璃、谷歌的層級(jí)、微軟的方塊…），但界面設(shè)計(jì)的進(jìn)化歷程才剛剛開(kāi)始。

寫(xiě)過(guò)關(guān)于去形式化的話題。在這個(gè)新趨勢(shì)中，界面上的內(nèi)容越來(lái)越重要，相對(duì)的，一切與內(nèi)容無(wú)關(guān)的都被大大削減。

去形式化是一張非常模糊的全景圖，在演化中一些新的設(shè)計(jì)風(fēng)格逐漸清晰起來(lái)，例如——無(wú)框界面。

也許你已經(jīng)發(fā)現(xiàn)了，今年來(lái)越來(lái)越多的網(wǎng)站和應(yīng)用，尤其是那些注重設(shè)計(jì)的，都有這樣的趨勢(shì)。曾經(jīng)用來(lái)劃分區(qū)域的邊框和邊線逐漸消失，然而在干凈的界面上，通過(guò)距離分割，各區(qū)域的差別依舊清晰可辨。

圖標(biāo)是設(shè)計(jì)項(xiàng)目中幾乎必不可少的一個(gè)組成部分，但是在圖標(biāo)的具體使用上，講究并不少。 如果你曾仔細(xì)瀏覽優(yōu)設(shè)的網(wǎng)站，應(yīng)該已經(jīng)看過(guò)不少圖標(biāo)設(shè)計(jì)的實(shí)戰(zhàn)案例。

1、強(qiáng)化視覺(jué)

我們的世界正在快速的數(shù)字化，這也是為什么UI界面在近10年來(lái)一直都是熱門(mén)話題，同時(shí)，這也意味著，作為設(shè)計(jì)師的我們比以往任何時(shí)候都要專(zhuān)注打造高素質(zhì)的UI，以及讓用戶(hù)欲罷不能的用戶(hù)體驗(yàn)。我們需要好的UI和優(yōu)秀的設(shè)計(jì)。

我們一直在追求好設(shè)計(jì)，優(yōu)秀的設(shè)計(jì)，讓人難忘的設(shè)計(jì)，能夠脫穎而出的設(shè)計(jì)。我們相信設(shè)計(jì)是有跡可循的，有成熟的、可考量的標(biāo)準(zhǔn)來(lái)衡量，它甚至可以作為我們?cè)O(shè)計(jì)的方向而存在。

從網(wǎng)站到手機(jī)，從家用的恒溫控制器到汽車(chē)的控制面板，所有的這些UI構(gòu)成了我們的日常數(shù)字體驗(yàn)。越來(lái)越多的屏幕和日漸龐大的數(shù)字化內(nèi)容，使得我們對(duì)于優(yōu)質(zhì)的UI設(shè)計(jì)越來(lái)越渴望。

雖然好設(shè)計(jì)的原則是老生常談，但是我們還是要經(jīng)常總結(jié)，結(jié)合自己的設(shè)計(jì)，三省吾身。

1、簡(jiǎn)單

編者按：制作UI 設(shè)計(jì)規(guī)范的大體思路應(yīng)該是怎樣的？制作規(guī)范時(shí)容易遇到哪些瓶頸？今天這篇好文是華為設(shè)計(jì)師總結(jié)的經(jīng)驗(yàn)，幫你一次性搞定這兩個(gè)問(wèn)題！

2016已經(jīng)接近尾聲，上兩天剛參加完比賽，利用這幾天空閑時(shí)間，把最近沉淀下來(lái)的東西分享出來(lái)。

上個(gè)月團(tuán)隊(duì)幾個(gè)小組進(jìn)行友誼比賽，命題是“郵件”。規(guī)定大家以產(chǎn)品思維去設(shè)計(jì)一款全新的產(chǎn)品，形式不限。很難得的是所有人都參加了產(chǎn)品設(shè)計(jì)的每一個(gè)環(huán)節(jié)。我們秉著發(fā)現(xiàn)問(wèn)題、解決問(wèn)題的態(tài)度開(kāi)始了這次友誼比賽。

雨涵_Zoe：最近為了設(shè)計(jì)提率和質(zhì)量，我開(kāi)始研究如何做規(guī)范?？戳艘蝗e人做的設(shè)計(jì)規(guī)范，又回想了一下自己以前做的，總結(jié)了以下幾個(gè)經(jīng)驗(yàn)。

說(shuō)到設(shè)計(jì)規(guī)范，這里有一篇絕對(duì)不能錯(cuò)過(guò)的：《內(nèi)部教程！超實(shí)用6步透視網(wǎng)易設(shè)計(jì)規(guī)范（附完整PDF下載）》

設(shè)計(jì)規(guī)范的共性

不同的規(guī)范雖然內(nèi)容差別很大，但是對(duì)比一下它們的目錄，卻又很多相似之處，通常包含：布局、組件、配色、圖標(biāo)這四部分。組件里的分類(lèi)無(wú)非是導(dǎo)航、菜單、表單、列表、表格、按鈕、彈出框諸如此類(lèi)，我就不一一列出了。