iOS說：“清晰度，咱倆分手吧”

以往的iOS鎖屏界面非常簡單直接，但是來到今年的iOS10，情況發(fā)生非常大的變化，在開始認(rèn)真嚴(yán)肅地為大家分析（tucao）之前我想先說明一些東西：

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

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

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

一、使用模糊背景

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

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

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

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

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

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

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

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

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

啟動(dòng)頁、空狀態(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)頁

當(dāng)用戶打開 app 時(shí)，最不能做的事情就是讓他們等待。但是如果 app 的初始設(shè)置非常耗時(shí)，又不可能優(yōu)化該怎么辦？你不得不讓用戶等。如果他們愿意等，你得知道如何 吸引他們。啟動(dòng)頁解決了等待的問題，讓你有一個(gè)簡潔有力的窗口來吸引用戶。

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

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

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

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

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

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

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

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

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

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

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

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