作為APP狂熱分子，定期去App Store或者其他渠道找新鮮的產(chǎn)品來(lái)玩兒，已經(jīng)持續(xù)了很多年。但是光浮于表面的玩兒，還不夠。因?yàn)橹挥辛私猱a(chǎn)品背后的邏輯才能更全面的解讀為何會(huì)那么設(shè)計(jì)。

下面分享下我通過(guò)自問(wèn)自答的方式分析APP的方法，希望對(duì)你有幫助。

1. 產(chǎn)品層面

分析一款app，首先從產(chǎn)品層面入手，因?yàn)楫a(chǎn)品定位決定著后續(xù)的交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)、運(yùn)營(yíng)策略等等… 通?？梢詮娜齻€(gè)維度來(lái)分析產(chǎn)品定位：

良好的交互設(shè)計(jì)應(yīng)該確保用戶(hù)的每一次操作都能得到視覺(jué)反饋，無(wú)論成功與否，這會(huì)讓用戶(hù)體會(huì)到使用產(chǎn)品期間的一種安全感——一切盡在自己的掌控之中。視覺(jué)反饋的目的就是通過(guò)一種可視化、簡(jiǎn)潔的形式向用戶(hù)展示操作的結(jié)果以及當(dāng)前系統(tǒng)所處的狀態(tài)。

編者按：說(shuō)起usTwo 你可能沒(méi)聽(tīng)過(guò)，但《紀(jì)念碑谷》你肯定玩過(guò)。這個(gè)全球頂尖的設(shè)計(jì)工作室還做過(guò)哪些酷酷的產(chǎn)品？他們是如何幫助設(shè)計(jì)師和客戶(hù)合作的？想加入它們有哪些要求？這期直接讓usTwo 的設(shè)計(jì)師為大家揭秘。

我們請(qǐng)到了設(shè)計(jì)工作室 usTwo 的設(shè)計(jì)師 Avalon Hu。她曾先后就讀于臺(tái)灣大學(xué)生物產(chǎn)業(yè)機(jī)電工程系和密歇根大學(xué)人機(jī)交互專(zhuān)業(yè)，曾在 R/GA 和湯森路透任職。本期我們聊了聊她如何從迪士尼秀場(chǎng)后臺(tái)開(kāi)始，轉(zhuǎn)專(zhuān)業(yè)成為用戶(hù)體驗(yàn)設(shè)計(jì)師；設(shè)計(jì) Agency 的工作流程；usTwo 獨(dú)特的企業(yè)文化和公司結(jié)構(gòu)；最后她也與想加入設(shè)計(jì) agency 的同學(xué)分享了自己的建議。

動(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í)候，可讀性是我們最常提及的話(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ù)的眼球。

授人以魚(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)于去形式化的話(huà)題。在這個(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é)