轉(zhuǎn)載一組追波上設(shè)計(jì)大師 Virgil Pana 的動(dòng)效作品

“儀表板”、“大數(shù)據(jù)”、“數(shù)據(jù)可視化”、“數(shù)據(jù)分析”——越來(lái)越多人和企業(yè)，開(kāi)始運(yùn)用他們的數(shù)據(jù)來(lái)做一些有趣的事情。在我的職業(yè)生涯中，有幸參與一大批數(shù)據(jù)為重的界面設(shè)計(jì)，我要在此分享一些觀點(diǎn)，講講如何造就這種特殊且有意義的產(chǎn)品。

藍(lán)藍(lán)寫(xiě)

不要匆忙著手設(shè)計(jì)，理解核心問(wèn)題需要時(shí)間。乍一看到某個(gè)問(wèn)題你會(huì)覺(jué)得很簡(jiǎn)單，其實(shí)你并沒(méi)有理解其復(fù)雜性，當(dāng)你把問(wèn)題搞清楚之后又會(huì)發(fā)現(xiàn)真的很復(fù)雜，于是你就拿出一套復(fù)雜的方案來(lái)，實(shí)際上你的工作只做了一半，大多數(shù)人也會(huì)到此為止，但是真正偉大的人還會(huì)繼續(xù)向前，直至找到問(wèn)題的關(guān)鍵和深層次原因，然后再拿出一個(gè)優(yōu)雅的堪稱(chēng)完美的有效方案。——喬布斯

簡(jiǎn)化的4個(gè)策略。

怎么判斷什么是不必要的復(fù)雜性，怎么簡(jiǎn)化這種復(fù)雜性。有時(shí)解決一個(gè)問(wèn)題會(huì)引出其他問(wèn)題來(lái)。

刪除：去掉所有不必要的按鈕，直到減到不能再減。

組織：按照有意義的標(biāo)準(zhǔn)將按鈕劃分成組。

隱藏：把那些不是最重要的按鈕，安排在活動(dòng)艙蓋之下，避免分散用戶(hù)的注意力。

轉(zhuǎn)移：只有遙控器上保留具備最基本功能的按鈕，將其他控制轉(zhuǎn)移到電視。

這本書(shū)內(nèi)容組織比較散，目錄條理不是太清晰，讀完一遍后，沒(méi)找到“交互式設(shè)計(jì)四策略”，看章節(jié)大概明白了，簡(jiǎn)約的四個(gè)策略是：刪除、組織、隱藏，轉(zhuǎn)移，圍繞這四點(diǎn)展開(kāi)了一段段小章節(jié)，書(shū)的前二章說(shuō)的是關(guān)于“簡(jiǎn)單”，明確認(rèn)識(shí)簡(jiǎn)單，最后一章是再叮囑，簡(jiǎn)單的不易和好處。

讀這書(shū)本思路需要宏觀跳躍，才能把一篇篇連接起來(lái)，讀明白。否則很容易陷入一小節(jié)一小節(jié)的細(xì)節(jié)中。如果能把目錄名稱(chēng)與書(shū)名呼應(yīng)，寫(xiě)的更明確，每個(gè)章節(jié)有重點(diǎn)總結(jié)，會(huì)更容易讓人記住和理解。

 話(huà)說(shuō)簡(jiǎn)單

寫(xiě)作者摸索中簡(jiǎn)單的切實(shí)可行的策略，并舉例說(shuō)明簡(jiǎn)單的威力，復(fù)雜的產(chǎn)品不可持續(xù)。

在做技術(shù)產(chǎn)品的設(shè)計(jì)時(shí)，至少有3個(gè)角度：管理人員、工程師和用戶(hù)。這本書(shū)討論的是怎么樣讓用戶(hù)感覺(jué)用起來(lái)簡(jiǎn)單，而非減少管理人員、工程師的工作量。

簡(jiǎn)單并不意味著最少化，樸素的設(shè)計(jì)仍然具有自身的特征和個(gè)性。簡(jiǎn)單的特征和個(gè)性應(yīng)該源自你使用的方法、所要表現(xiàn)的產(chǎn)品、以及用戶(hù)執(zhí)行的任務(wù)。

譯者紀(jì)：本片文中包含大量的動(dòng)態(tài)頁(yè)面（原網(wǎng)站是視頻鏈接，本網(wǎng)站上傳視頻不能排序，故人工轉(zhuǎn)為動(dòng)圖），加載較緩慢，請(qǐng)各位多點(diǎn)耐心，么么噠

---

一個(gè)好的交互設(shè)計(jì)師可以很容易的解釋設(shè)計(jì)里面的決定背后的邏輯。這包含著信息架構(gòu)，頁(yè)面內(nèi)容的層次結(jié)構(gòu)，流程和所做的解釋。

遲早，動(dòng)效將會(huì)應(yīng)用到線(xiàn)框圖原型中，這個(gè)時(shí)候，再去對(duì)設(shè)計(jì)做決定或者是解釋?zhuān)瑢?huì)變的難一些。例如一些這樣的理由：太狂拽酷炫了……太潮了……太雞凍了……這將是設(shè)計(jì)失去其力度的領(lǐng)域（Reasons such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly the areas where a design starts to lose its strength.）在我們的設(shè)計(jì)中，動(dòng)效理應(yīng)占到更多的比重。我們應(yīng)該去定義動(dòng)效，并且闡述他們的目的——像我們闡述一個(gè)設(shè)計(jì)中其他的元素一樣。

什么是功能動(dòng)效？

一個(gè)好的用戶(hù)界面具有較高的轉(zhuǎn)化率和易用性。換句話(huà)說(shuō)，它既能滿(mǎn)足商業(yè)用途也便于使用。以下是我們發(fā)現(xiàn)的一些想法清單。

上一篇：交互設(shè)計(jì)技巧：創(chuàng)造好的用戶(hù)體驗(yàn)（1）(翻譯)

21. 嘗試平滑過(guò)渡而不是突兀呈現(xiàn)

當(dāng)用戶(hù)進(jìn)行操作的時(shí)候，界面元素經(jīng)常會(huì)有出現(xiàn)、隱藏、移動(dòng)、轉(zhuǎn)換以及大小調(diào)整的動(dòng)作。作為對(duì)操作的回應(yīng)，為元素變化適當(dāng)添加時(shí)間延遲有時(shí)候讓用戶(hù)更容易理解剛剛發(fā)生了什么。以動(dòng)畫(huà)或者過(guò)渡的形式刻意制造的延時(shí)，給了用戶(hù)理解元素大小或者位置變化的必要的反應(yīng)時(shí)間。當(dāng)然了，你也要記住，我們應(yīng)該將過(guò)渡的時(shí)間控制在0.5s之內(nèi)，時(shí)間太久的話(huà)，用戶(hù)可能就會(huì)感到不適。對(duì)于那些只想快點(diǎn)完成任務(wù)的用戶(hù)，太長(zhǎng)時(shí)間的延時(shí)當(dāng)然會(huì)成為一種負(fù)擔(dān)。

 22. 嘗試循序漸進(jìn)的引導(dǎo)而不是草率地讓用戶(hù)注冊(cè)

與其要求用戶(hù)立馬注冊(cè)，何不讓用戶(hù)先體驗(yàn)一些已示范的有價(jià)值的操作呢？在最初的交互過(guò)程中，不僅能展現(xiàn)產(chǎn)品的價(jià)值，也能顯示出產(chǎn)品的個(gè)性。一旦用戶(hù)開(kāi)始看到你的產(chǎn)品的價(jià)值，了解產(chǎn)品對(duì)自己的用處，他們將更樂(lè)于與你分享更多的信息。這種循序漸進(jìn)的引導(dǎo)是一種盡可能推遲注冊(cè)過(guò)程的方法，同時(shí)還可以讓用戶(hù)使用和自定義你的應(yīng)用或產(chǎn)品。

一個(gè)好的用戶(hù)界面具有較高的轉(zhuǎn)化率和易用性。換句話(huà)說(shuō)，它既能滿(mǎn)足商業(yè)用途也便于使用。以下是我們發(fā)現(xiàn)的一些想法清單。

  1. 嘗試使用一列布局代替多列

一列布局會(huì)讓你對(duì)全局有更好的掌控。它也能讓你的用戶(hù)預(yù)先對(duì)整體的內(nèi)容從上到下有一個(gè)大致的了解。然而多列布局則會(huì)讓用戶(hù)從頁(yè)面的核心內(nèi)容上分散注意力從而增加額外的風(fēng)險(xiǎn)。最好的方法是用一個(gè)有邏輯的敘述然后在文末加上一個(gè)行動(dòng)的口號(hào)來(lái)引導(dǎo)用戶(hù)。 

  2. 嘗試用禮物代替直接銷(xiāo)售

在互聯(lián)網(wǎng)時(shí)代，誰(shuí)有互聯(lián)網(wǎng)思維?馬化騰，雷軍，周鴻祎他們有。他們?yōu)槭裁从谢ヂ?lián)網(wǎng)思維?因?yàn)樗麄兌际钱a(chǎn)品經(jīng)理!所謂的“互聯(lián)網(wǎng)思維”其實(shí)就是產(chǎn)品經(jīng)理的日常工作方法。這篇文章是一位資深產(chǎn)品經(jīng)理寫(xiě)的故事，看過(guò)后，就算不是IT人，你也一定會(huì)有所收獲。

一家軟件公司接到了一個(gè)項(xiàng)目：開(kāi)發(fā)某報(bào)業(yè)集團(tuán)的圖片管理系統(tǒng)，老板決定成立一個(gè)跨部門(mén)的項(xiàng)目組來(lái)負(fù)責(zé)這個(gè)圖片系統(tǒng)。任務(wù)由產(chǎn)品經(jīng)理張曉龍負(fù)責(zé)，韓冰配合張曉龍的工作。

他們商量了一下，決定盡快開(kāi)一個(gè)項(xiàng)目啟動(dòng)會(huì)。會(huì)議的目的有兩個(gè)，一個(gè)是大家互相認(rèn)識(shí)一下，另外一個(gè)就是一起討論一下對(duì)于這個(gè)項(xiàng)目的看法，以及下一步的工作安排。

各位已經(jīng)工作了的小伙伴們，你們?cè)诟绢I(lǐng)導(dǎo)或是開(kāi)發(fā)、銷(xiāo)售等其他人討論產(chǎn)品的設(shè)計(jì)問(wèn)題是不是經(jīng)常聽(tīng)到這么兩個(gè)問(wèn)題:“我也是用戶(hù)啊，我就覺(jué)得xxx功能提好的啊”，“如果用戶(hù)需要xxx功能怎么辦”？

通常這個(gè)時(shí)候你是怎么回答的呢？是不是覺(jué)的他們好不講道理但又卻無(wú)法反駁？那今天老D給你講一個(gè)案例，一個(gè)故事講什么為什么需要用戶(hù)角色模型。

一家汽車(chē)公司準(zhǔn)備設(shè)計(jì)一款新車(chē)，他們的產(chǎn)品種類(lèi)廣泛，一直以來(lái)的主要銷(xiāo)售對(duì)象是如下幾類(lèi)人：

 A是個(gè)富二代，喜歡跑車(chē)，因?yàn)轳R力足、外形酷、好玩；

B是個(gè)家庭主婦，希望自己的車(chē)能安全、舒適、空間大；

C是個(gè)零售店主，經(jīng)常拉貨，所以希望自己的車(chē)解釋耐用；

D是個(gè)上班族，希望停車(chē)方便、省油；

E是個(gè)農(nóng)民，希望能夠結(jié)實(shí)耐用動(dòng)力強(qiáng)勁；

F..；

G...；

還有很多小眾的用戶(hù)需求

如果你看了很多優(yōu)秀的設(shè)計(jì)，但是自己卻仍然還覺(jué)得有所欠缺。來(lái)看看作者梳理的掌握交互設(shè)計(jì)的方法吧。

最近兩個(gè)月給公司的伙伴們做交互設(shè)計(jì)的分享，這是第一期分享的內(nèi)容。在這次分享中，我認(rèn)真梳理了交互設(shè)計(jì)師掌握和精通這門(mén)技藝的方法。我認(rèn)為，如果想成為拔尖的設(shè)計(jì)師，只有這條路可走。

什么是交互設(shè)計(jì)

用戶(hù)界面有兩部分的設(shè)計(jì)：交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)。在下圖中，左邊和右邊分別是微信的交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)。

交互設(shè)計(jì) vs. 視覺(jué)設(shè)計(jì)