編者按：可以說(shuō)現(xiàn)如今的移動(dòng)端UI設(shè)計(jì)中，卡片式設(shè)計(jì)撐起了半壁江山，它隨性自由又充滿了邏輯和組織性，它不僅流行著，而且還正在變得更加流行。它長(zhǎng)盛不衰的秘密到底何在？讀下去~

個(gè)性化的用戶體驗(yàn)是目前網(wǎng)頁(yè)和APP設(shè)計(jì)的大趨勢(shì)。個(gè)性化的新體驗(yàn)大多建立在單獨(dú)內(nèi)容的聚合體之上，而多類型的內(nèi)容想要聚合起來(lái)，卡片式的界面則是最合適的載體。如今你所看到的UI界面設(shè)計(jì)，卡片式設(shè)計(jì)幾乎無(wú)處不在，從新聞?lì)愓军c(diǎn)到游戲界面，從物流APP到社交媒體，等等等等。今天的文章將會(huì)詳細(xì)解釋卡片式設(shè)計(jì)對(duì)于設(shè)計(jì)師的意義，以及常見(jiàn)的卡片式設(shè)計(jì)的功能與特性。

進(jìn)入2016年后，我們會(huì)發(fā)現(xiàn)行業(yè)在體驗(yàn)設(shè)計(jì)上出現(xiàn)了很多新的元素，從我們平時(shí)經(jīng)常瀏覽的設(shè)計(jì)社區(qū)中，這些新元素出現(xiàn)的頻率越來(lái)越高，比如彩色投影、雙色調(diào)漸變?cè)O(shè)計(jì)等，我們也慢慢開(kāi)始接受這些新變化，并且逐步應(yīng)用到我們的產(chǎn)品中。這篇文章的初衷是希望能更系統(tǒng)更全面地梳理出一份流行趨勢(shì)的分析，能對(duì)我們平時(shí)的工作能產(chǎn)生一定的指導(dǎo)作用。

一、使用模糊背景

模糊背景和iOS毛玻璃效果非常的相似，也符合時(shí)下流行的扁平化和現(xiàn)代風(fēng)的設(shè)計(jì)，設(shè)計(jì)效果十分的賞心悅目，可以很好的和幽靈按鈕以及時(shí)下流行的元素搭配起來(lái)，提升用戶體驗(yàn)。

以淘寶電影為例，采用的是虛化電影海報(bào)作為背景，這樣做的好處是每一個(gè)頁(yè)面的頭部效果都不一樣，這樣的排版視覺(jué)效果更佳，同樣也突出電影信息等主要內(nèi)容。從設(shè)計(jì)的角度來(lái)看，這也很容易實(shí)現(xiàn)，讓內(nèi)容模塊變的清晰，同時(shí)可以規(guī)避復(fù)雜的設(shè)計(jì)，還可以降低設(shè)計(jì)成本，花最少的時(shí)間達(dá)到最大的效果。

從今年4月份開(kāi)始，我被安排負(fù)責(zé)一個(gè)直播項(xiàng)目，設(shè)計(jì)之路可謂曲奇坎坷，難得的設(shè)計(jì)經(jīng)驗(yàn)讓我對(duì)交互設(shè)計(jì)本身有了一些新的認(rèn)識(shí)。結(jié)合自身的感悟，我自認(rèn)為交互設(shè)計(jì)師除了專業(yè)能力的要求外，還應(yīng)該具備以下素質(zhì)：

1，業(yè)務(wù)深度帶來(lái)業(yè)務(wù)驅(qū)動(dòng)力

在工作之初，我認(rèn)為無(wú)論負(fù)責(zé)什么項(xiàng)目，交互設(shè)計(jì)都是一種解決復(fù)雜問(wèn)題的能力，從設(shè)計(jì)分析到設(shè)計(jì)產(chǎn)出是具有絕對(duì)的普適應(yīng)；而且隨著設(shè)計(jì)能力的提升，經(jīng)驗(yàn)的積累，這種普適性更加凸顯；這一層我并不否認(rèn)，但交互設(shè)計(jì)師只聚焦于普適性可能永遠(yuǎn)都處于門外漢的水準(zhǔn)；有機(jī)會(huì)專門負(fù)責(zé)直播項(xiàng)目，讓我不得不接觸和使用各種直播App，不得不和很多專門做直播的人合作，在這過(guò)程中，讓我對(duì)于直播業(yè)務(wù)有了深入了解。

舉個(gè)栗子，比如設(shè)計(jì)一個(gè)直播的發(fā)布流程。

乍一看許多APP的布局并不復(fù)雜，感覺(jué)換成自己也能設(shè)計(jì)出來(lái)，但是當(dāng)你真的開(kāi)始著手設(shè)計(jì)這么一個(gè)APP的原型的時(shí)候，會(huì)發(fā)現(xiàn)事情并不是那么簡(jiǎn)單?？粗鴦e人已經(jīng)設(shè)計(jì)完成的設(shè)計(jì)可能覺(jué)得不難，可是當(dāng)自己動(dòng)手的時(shí)候，在特定的元素的選取和設(shè)計(jì)上很容易陷入困局，這個(gè)時(shí)候才明白它的難點(diǎn)并不在于工作量的多少，設(shè)計(jì)者常常深陷于細(xì)節(jié)構(gòu)建的囹圄，這才是它的困難之處。即使是元素與元素之間的分隔方式，都能隨隨便便用一整篇文章來(lái)進(jìn)行探討。

傳統(tǒng)的分隔方式

在UI界面中，最傳統(tǒng)也是最常見(jiàn)的分隔方式用的是線，將視覺(jué)上或者內(nèi)容上需要區(qū)分的內(nèi)容用橫向或者縱向的細(xì)線區(qū)分開(kāi)來(lái)，它幫助用戶了解頁(yè)面的層次結(jié)構(gòu)，賦予頁(yè)面內(nèi)容以組織性。

啟動(dòng)頁(yè)、空狀態(tài)、動(dòng)畫反饋、框架界面… 今天提到的這4種狀態(tài)，都是容易被忽視，而又能讓移動(dòng)App 脫穎而出的細(xì)節(jié)。如何做好這4個(gè)細(xì)節(jié)的用戶體驗(yàn)設(shè)計(jì)？今天這篇好文總結(jié)了關(guān)鍵的幾個(gè)原則。

啟動(dòng)頁(yè)

當(dāng)用戶打開(kāi) app 時(shí)，最不能做的事情就是讓他們等待。但是如果 app 的初始設(shè)置非常耗時(shí)，又不可能優(yōu)化該怎么辦？你不得不讓用戶等。如果他們?cè)敢獾龋愕弥廊绾?nbsp;吸引他們。啟動(dòng)頁(yè)解決了等待的問(wèn)題，讓你有一個(gè)簡(jiǎn)潔有力的窗口來(lái)吸引用戶。

文本框是設(shè)計(jì)工作中常見(jiàn)的組件之一，無(wú)論是PC還是無(wú)線，大多僅是樣式上的不同，它們的交互行為上是可以相互參照的。本文想從這一簡(jiǎn)單的組件出發(fā)，讓大家看到交互設(shè)計(jì)師在工作中的邏輯思考方法，從而達(dá)到見(jiàn)微知著的直觀感受。

先來(lái)做個(gè)設(shè)計(jì)需求吧！

這個(gè)設(shè)計(jì)需求是：我們需要用戶填寫活動(dòng)的名稱。

第一反應(yīng)，這個(gè)是用來(lái)收集信息的，需要用戶填寫內(nèi)容，并提交給系統(tǒng)，應(yīng)該使用文本框。

然后大筆一揮，設(shè)計(jì)如下圖：

嗯，我是作家，靠寫字糊口。但你也許不信：我討厭閱讀。

但別誤會(huì)——我還是會(huì)花大量時(shí)間閱讀。我努力并艱難地讀書，讀 Blog，讀雜志，報(bào)紙上的信息?？梢坏┳髡唛_(kāi)始啰嗦，我眼睛就發(fā)花，只想葛優(yōu)躺。

嗯，我是作家，靠寫字糊口。但你也許不信：我討厭閱讀。

但別誤會(huì)——我還是會(huì)花大量時(shí)間閱讀。我努力并艱難地讀書，讀 Blog，讀雜志，報(bào)紙上的信息。可一旦作者開(kāi)始啰嗦，我眼睛就發(fā)花，只想葛優(yōu)躺。

新版Instagram 的UI去掉了圖標(biāo)下面的文字，但去掉文字的圖標(biāo)真的能帶來(lái)更好的用戶體驗(yàn)么？今天這篇好文通過(guò)一個(gè)簡(jiǎn)單的小實(shí)驗(yàn)（附測(cè)試網(wǎng)址），幫這個(gè)一直爭(zhēng)議不休的話題蓋棺定論，順便聊聊圖標(biāo)的作用以及未來(lái)圖標(biāo)的發(fā)展，干貨豐富，建議閱讀。

設(shè)計(jì)師在工作中除了要完成產(chǎn)品經(jīng)理或者業(yè)務(wù)方的需求，往往還希望在設(shè)計(jì)產(chǎn)出上能有更多的創(chuàng)新來(lái)體現(xiàn)自身的價(jià)值。但是我們有時(shí)冥思苦想也無(wú)法有所創(chuàng)新，我在這里整理了一些方法，希望可以對(duì)大家有一點(diǎn)點(diǎn)啟發(fā)。

我將設(shè)計(jì)師所需要的設(shè)計(jì)創(chuàng)新能力劃分為兩種：發(fā)現(xiàn)問(wèn)題和解決問(wèn)題。如何提升這兩種能力呢？

張小龍?jiān)隍v訊內(nèi)部長(zhǎng)達(dá)8小時(shí)的演講

 

一、產(chǎn)品經(jīng)理要求

1、了解人性

2、了解群體心理

3、產(chǎn)品經(jīng)理像上帝一樣，可建造系統(tǒng)，制定規(guī)則，讓群體在系統(tǒng)中演化

4、提高自己的藝術(shù)品位、質(zhì)量要求品位/細(xì)節(jié)體驗(yàn)品位；作品而非產(chǎn)品；工匠而非設(shè)計(jì)師

 

二、了解人性

1、人是懶惰的

2、人是跟風(fēng)的、別人都在用，群體智商低于個(gè)體智商

3、人沒(méi)有耐心

4、人不愛(ài)學(xué)習(xí)

5、人們對(duì)隨機(jī)好奇

6、偉大產(chǎn)品應(yīng)該滿足人的情感需求、滿足人性貪嗔癡

7、不要改變?nèi)藗兊某ＷR(shí)習(xí)慣，要設(shè)計(jì)時(shí)順應(yīng)日常習(xí)慣

 

三、了解群體心理

1、重視屌絲用戶群，他們有存在感的渴望

2、為群體效應(yīng)而做，容易傳播放大

3、沒(méi)有設(shè)計(jì)，只有解決問(wèn)題；避免戰(zhàn)略行為代替真實(shí)需求：打通、整合、拉動(dòng)、導(dǎo)入、多平臺(tái)、全面

4、需求不來(lái)自調(diào)研，用戶群大部分都是中庸普通的，他們的反饋只是幫助你了解他們是怎么想怎么看的；需求不來(lái)自競(jìng)爭(zhēng)對(duì)手，大部分產(chǎn)品特性都是沒(méi)有什么價(jià)值意義的；