譯者序
本文圍繞勸導(dǎo)式設(shè)計(jì)(persuasive design)而展開，介紹了移動(dòng)終端上banner廣告、push信息等典型的勸服失敗案例，并從用戶與移動(dòng)設(shè)備之間的情感聯(lián)系出發(fā)，探討了移動(dòng)勸導(dǎo)策略的幾個(gè)切入點(diǎn)。所謂勸導(dǎo)式設(shè)計(jì)，是指通過(guò)說(shuō)服和社會(huì)影響，而非通過(guò)強(qiáng)制的方式，以達(dá)到改變和引導(dǎo)用戶態(tài)度或行為的技術(shù)。這種技術(shù)常被應(yīng)用于銷售、外交、政治、宗教、軍事訓(xùn)練、公共衛(wèi)生和管理等領(lǐng)域。近年來(lái)，大多數(shù)勸導(dǎo)式技術(shù)的研究主要集中在計(jì)算機(jī)交互領(lǐng)域，包括臺(tái)式電腦、互聯(lián)網(wǎng)服務(wù)、視屏游戲和移動(dòng)設(shè)備。勸導(dǎo)技術(shù)可以看成是對(duì)用戶意圖的設(shè)計(jì)。

作者： Amber Krishan 譯者：曉千 秦封
譯文

【Tips：消費(fèi)者不會(huì)僅僅因?yàn)閷?dǎo)航很容易而為你的產(chǎn)品買單?！?/p>

為移動(dòng)設(shè)備而設(shè)計(jì)時(shí),設(shè)計(jì)師要考慮移動(dòng)設(shè)備間的差異，努力提供統(tǒng)一的體驗(yàn)。他們致力于減少點(diǎn)擊的次數(shù)，使架構(gòu)更扁平；并根據(jù)觸摸屏的特點(diǎn)而設(shè)計(jì), 在較小屏上規(guī)劃合理的布局等。這些重點(diǎn)都在通過(guò)方便的使用、流暢的導(dǎo)航和簡(jiǎn)潔的呈現(xiàn)，來(lái)確保的最佳的產(chǎn)品可用性。

為確保你的用戶“可以做”你想讓他們做的事情，較高的可用性是一個(gè)很好的開始。但它并不能保證用戶“會(huì)來(lái)做”這些事情。因?yàn)椋脩舨粫?huì)僅僅因?yàn)閷?dǎo)航容易使用而來(lái)買你的產(chǎn)品。

我們對(duì)音樂(lè)的渴求，一刻都不曾減少?，F(xiàn)在無(wú)論上班途中、休息還是工作，我們總習(xí)慣先享受一下聽覺(jué)的盛宴。毫不夸張地說(shuō)，音樂(lè)已成為了我們生活的一部分。

有很多熱情澎湃的設(shè)計(jì)師也在努力地為音樂(lè)的移動(dòng)端界面創(chuàng)造一個(gè)富有創(chuàng)意的，吸引人的精致界面設(shè)計(jì)。比如這一系列，它們中既有仿古的設(shè)計(jì)風(fēng)格，也有現(xiàn)代簡(jiǎn)約優(yōu)雅的。你會(huì)欣賞到厚重感十足的黑膠唱機(jī)，可能也會(huì)驚嘆于用色大膽的視覺(jué)沖擊風(fēng)格。

希望今天的作品能帶給各位設(shè)計(jì)師們靈感！盡情享用吧：）

1. Music App UI (iPhone) by Piotr Kwiatkowski

UI（用戶界面）與UX（用戶體驗(yàn)）是密切聯(lián)系的，優(yōu)秀的UI界面首先就能從視覺(jué)上給用戶極好的體驗(yàn)，今天我們從Drrible和Behance上挑選了50套用戶體驗(yàn)超棒的UI界面，包括了睡眠APP、天氣APP等等，還有對(duì)Facebook、Instagram、Ebay等應(yīng)用的扁平化再設(shè)計(jì)，都非常棒呦！如果你正在設(shè)計(jì)UI界面，那么可得好好借鑒學(xué)習(xí)一下，希望能給你帶來(lái)靈感 : ）

以前的進(jìn)度條設(shè)計(jì)以擬物化為主，現(xiàn)在扁平化風(fēng)格流行，連進(jìn)度條也改變咯。藍(lán)藍(lán)設(shè)計(jì)推薦您看看40款收集的進(jìn)度條設(shè)計(jì)，很多是Dribble上的作品，應(yīng)潮流而生，想瞧瞧扁平化風(fēng)格的進(jìn)度條是怎樣的，就來(lái)看看吧。如果你對(duì)擬物化的創(chuàng)意進(jìn)度條更加有興趣，那么來(lái)這里瞧瞧《18個(gè)讀取進(jìn)度條的優(yōu)秀設(shè)計(jì)案例》

Loading 也是一門學(xué)問(wèn)，如何讓用戶等待加載時(shí)不煩還高興，藍(lán)藍(lán)設(shè)計(jì)推薦您可以看看這篇：《談?wù)劶虞d(LOADING)的那點(diǎn)事》，絕對(duì)從細(xì)節(jié)處提升用戶體驗(yàn) ^_^

Progress by yasir wadood

Circular progress bar by Alexandr Ivanov

界面設(shè)計(jì)包括哪些細(xì)節(jié)、如何深入？
我們常說(shuō)“細(xì)節(jié)決定成敗”，有些界面會(huì)讓人覺(jué)得不精致，缺細(xì)節(jié)，而這些細(xì)節(jié)又包括哪些呢？如何去深入呢？

不妨來(lái)看本文作者，百度用戶界面設(shè)計(jì)師@JJ-Ying 為您娓娓道來(lái)：

• 界面元素的對(duì)齊，我見過(guò)很多同學(xué)對(duì)齊是永遠(yuǎn)靠眼睛的。確實(shí)在布局的時(shí)候經(jīng)常需要做到視覺(jué)上的對(duì)齊，而不是機(jī)械的對(duì)齊，但這不是界面元素可以隨意擺放的借口，該對(duì)齊的內(nèi)容需要對(duì)齊，有時(shí)候只是舉手之勞，養(yǎng)成好習(xí)慣很重要，有點(diǎn)強(qiáng)迫癥也不是壞事情。
• 像素，雖然現(xiàn)在的分辨率越來(lái)越高，但是很多圖標(biāo)、按鈕的邊緣還是最好都檢查一遍保證垂直和水平邊緣不會(huì)被虛化。
• 界面光源的一致性，一致性是個(gè)很大的課題，應(yīng)該能寫一篇論文那么長(zhǎng)，細(xì)節(jié)方面的一致性應(yīng)該包括界面元素、文字陰影、圖標(biāo)等的光源。假設(shè)深色的標(biāo)題文字用了向下的淡色投影表現(xiàn)內(nèi)凹效果，那正文就應(yīng)該避免用深色的文字向上投深色的陰影
• 圖標(biāo)面積的一致性，這也是一個(gè)一直難以避免的問(wèn)題，而且有很多主觀成分，最好的方法是設(shè)計(jì)的時(shí)候放到實(shí)際屏幕上以較遠(yuǎn)的距離查看，是不是有哪些會(huì)特別輕或特別重，然后再去調(diào)整尺寸
• 文案，雖然這不是直接的界面設(shè)計(jì)元素，但是嚴(yán)謹(jǐn)、完整的文案也是給所有設(shè)計(jì)加分的。常見的問(wèn)題有中文錯(cuò)別字、英文該大寫的沒(méi)大寫、拼寫錯(cuò)誤等等
• 別直接使用 Windows 自帶宋體 / 黑體里的英文?。。∵@個(gè)不解釋
• 謹(jǐn)慎地使用高飽和度顏色、大差別漸變，我們 GUI 設(shè)計(jì)師總喜歡把自己當(dāng)做藝術(shù)家，即使 GUI 真算藝術(shù)那也是限制最大的一門藝術(shù)（天朝的電影、電視劇不算。。。），大家大部分情況下遇到的設(shè)計(jì)場(chǎng)景沒(méi)有非常大的顏色空間去發(fā)揮，所以一些醒目出跳的顏 色和漸變使用起來(lái)要比較小心，否則很容易產(chǎn)生“俗氣”的感覺(jué)

什么是扁平化設(shè)計(jì)？

簡(jiǎn)單的說(shuō)就是拋棄那些已經(jīng)流行多年的漸變、陰影、高光等擬真視覺(jué)效果，使用一些簡(jiǎn)單的純色塊，從而打造出一種看上去更“平”的界面設(shè)計(jì)。扁平風(fēng)格的一個(gè)優(yōu)勢(shì)就在于它可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來(lái)，減少認(rèn)知障礙的產(chǎn)生。

下面是列舉一些國(guó)外網(wǎng)站的例子：

Squarespace

新版的Squarespace幾乎完全采用了扁平化的視覺(jué)風(fēng)格，只在一些細(xì)節(jié)當(dāng)中使用了相對(duì)傳統(tǒng)的方式突出了重要的交互元素。試用一下你就會(huì)發(fā)現(xiàn)，其實(shí)他們的產(chǎn)品在功能邏輯上還是蠻復(fù)雜的，但這一切都隱含在簡(jiǎn)約直白的界面背后，你真的可以從中隱約感受到其設(shè)計(jì)團(tuán)隊(duì)付出的心血。

Facebook

Facebook是扁平化界面設(shè)計(jì)的絕佳案例。除了幾個(gè)主要的動(dòng)作按鈕當(dāng)中使用了輕微的斜面效果以外，其他界面元素全部采用扁平風(fēng)格。鑒于他們多年來(lái)在這方面一直保持著這樣的特色，至少我們可以說(shuō)這種設(shè)計(jì)風(fēng)格對(duì)于Facebook來(lái)說(shuō)是完全適用的。

扁平化設(shè)計(jì)是指舍棄漸變、陰影、高光等擬物化的視覺(jué)效果，從而打造出一種看上去更加平面的界面設(shè)計(jì)風(fēng)格。扁平化的網(wǎng)頁(yè)設(shè)計(jì)更適合用于需要同時(shí)支持多種屏幕尺寸的響應(yīng)式設(shè)計(jì)技術(shù)中。今天，我給大家?guī)?lái)35套用于扁平化設(shè)計(jì)的圖標(biāo)設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)元素，記得分享和推薦?。?/p>

Flat Free UI Kit

我要下載

Apple devices – Flat icons (PSD)

我要下載

Mobile Flagships with PSD

本帖收集了50套設(shè)計(jì)精美，并可設(shè)計(jì)師自行編輯的界面PSD源文件。內(nèi)容大致包含banner切換，MP3/視頻播放器，日歷，表單（登錄，注冊(cè)，搜索…），進(jìn)度條，提示框，按鈕，導(dǎo)航，面包屑等等…不管是應(yīng)用在小需求還是大項(xiàng)目，相信都可為你帶來(lái)幫助。

Simple UI Elements

Apple Styled UI Elements

Grayness UI Kit

一個(gè)干貨推薦啦：25個(gè)定價(jià)界面網(wǎng)頁(yè)欣賞！沒(méi)錯(cuò)！你沒(méi)有看錯(cuò)，足足25個(gè)哦！??？你問(wèn)我有木有酬勞，呃！藍(lán)藍(lán)設(shè)計(jì)說(shuō)是要給，但我肯定不會(huì)要的，雖然很想要，呃，出來(lái)混，后來(lái)還是木有要。。。）

價(jià)格界面是網(wǎng)頁(yè)中常見的，但容易被忽視的一個(gè)部分。想想看，你什么時(shí)候見過(guò)這些界面呢？本工第一反應(yīng)就是迅雷、QQ之類的會(huì)員充值界面。這種不是經(jīng)?？梢钥匆?，但是又具有明確目的性的界面，如何讓它和主題頁(yè)面匹配、同時(shí)又突出重點(diǎn)信息呢？這是個(gè)問(wèn)題！今天就讓我們欣賞25個(gè)外國(guó)網(wǎng)站的定價(jià)界面，從中學(xué)習(xí)經(jīng)驗(yàn)吧；）

1. Freshdesk

成為dA（deviantart）的忠實(shí)用戶有很多理由——dA是最大的藝術(shù)社區(qū)；成為dA用戶簡(jiǎn)直是設(shè)計(jì)新手的必經(jīng)之路。但是，這些都不妨礙你加入其他專業(yè)的網(wǎng)站來(lái)展現(xiàn)你的才華。

創(chuàng)立于12年前的dA現(xiàn)在擁有最多的藝術(shù)愛(ài)好者受眾。然而，最近有人說(shuō)dA有太多的作品只有在你腦補(bǔ)能力超強(qiáng)的時(shí)候才能稱之為”藝術(shù)”。用戶太多了，所以各種批評(píng)的聲音也紛至沓來(lái)！不管怎樣，不管你喜歡與否，dA是一個(gè)很棒的藝術(shù)社區(qū)，不過(guò)，加入其他藝術(shù)網(wǎng)站也會(huì)讓你受益良多。

今天，我們來(lái)了解七個(gè)主要的可作為dA替補(bǔ)的藝術(shù)社區(qū)來(lái)激勵(lì)設(shè)計(jì)師和有創(chuàng)意的藝術(shù)家。

1.Behance

與dA不同，Behance是為那些專業(yè)藝術(shù)家，那些以藝術(shù)謀生或者將藝術(shù)作為一個(gè)非常嚴(yán)肅的愛(ài)好的人建立的。由于嚴(yán)格規(guī)定和高標(biāo)準(zhǔn)，Behance正在成為一個(gè)高級(jí)的專業(yè)網(wǎng)站。

Behance的網(wǎng)站看上去很直觀，很有條理：作品按小組，類別，甚至國(guó)家來(lái)分類。用戶可以根據(jù)愛(ài)好，專業(yè)水平或者正在一起做的項(xiàng)目來(lái)建立朋友圈或合作伙伴圈。如果你想找這個(gè)網(wǎng)站的亮點(diǎn)，那就看看招聘版塊和交互系統(tǒng)吧。在Behance，藝術(shù)家們能得到一致的作品集系統(tǒng)來(lái)按照步驟展示工作流程和項(xiàng)目進(jìn)度。雖然一堆大手的名字會(huì)嚇到新手，但是Behance可能是唯一能與藝術(shù)家和設(shè)計(jì)師分享你的經(jīng)驗(yàn)和知識(shí)并且獲得專業(yè)反饋的地方。