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

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

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

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

首頁動效

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

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

模塊

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

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

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

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

色彩對比

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

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

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

什么是無框界面？

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

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

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

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

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

1、強(qiáng)化視覺

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

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

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

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

1、簡單

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

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

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

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

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

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

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