格式塔原理解釋了人們?nèi)绾我砸曈X方式感覺物體，以及圖像的結(jié)構(gòu)，視角，大小等要素是如何影響我們的視覺的。

在下面這篇文章中，我們首先會簡單介紹一下格式塔原理中的基本概念，然后再詳細(xì)探討一下如何將它們應(yīng)用于今日的UI設(shè)計中。

在設(shè)計網(wǎng)站的時候，圖片資源會在很大程度上幫助你設(shè)置站點，以及顏色，排版或者更多內(nèi)容的基調(diào)。如果圖片視覺元素沒有和設(shè)計正確的結(jié)合，他很可能會破壞你原本想呈現(xiàn)的感覺。

移動應(yīng)用的設(shè)計中，最容易被忽視的地方就是空白或者異常情況的設(shè)計。從傳統(tǒng)PC時代web的異常頁面如404，502等頁面的設(shè)計體驗遷移過來，移動應(yīng)用的空頁面，網(wǎng)絡(luò)故障頁面等展示也有相似的設(shè)計模式。從以前的純文本的排版設(shè)計，到后來404成為設(shè)計師們
展示圖形創(chuàng)意的舞臺，移動應(yīng)用的空白情況頁面的設(shè)計也從純文本提示到后來精彩紛呈。然而在移動應(yīng)用的設(shè)計中，空白頁面的的作用不僅僅在于給用戶以溫柔或者
精彩的提醒，安撫用戶焦急或是疑惑的情緒，更重要的是，空白情況頁面可以引導(dǎo)用戶去填補“空白”。人都是害怕空虛寂寞冷的，當(dāng)你面對一個空虛寂寞冷的頁面
的時候，善意的指點迷津的一些語言和畫面告訴你咱們還是可以有方法來填補你的寂寞空虛冷，這時候，用戶的操作行為就會被觸發(fā)，潛移默化中指引用戶完成填補
空白的工作，那么，無論從用戶個體的活躍度上還是整體的留存率，活躍度上，你設(shè)計的空白頁面做到了拉升的作用，對電商產(chǎn)品和社交產(chǎn)品等來說，這些頁面可謂
是自己展示產(chǎn)品調(diào)性，曝光功能，加深引導(dǎo)的黃金地段。

1. 用戶不同，數(shù)據(jù)不同

任何時候設(shè)計一套復(fù)雜的系統(tǒng)，都不可避免要為很多用戶和角色進(jìn)行設(shè)計?？偛?、經(jīng)理和分析師是幾個常見角色，每個都有自己的工作流程和對數(shù)據(jù)的需求。

定義好角色，產(chǎn)生不同視角，這本身就是一種藝術(shù)。我就不在此詳細(xì)解釋了。如果你對此有興趣，請看Cooper的這篇有用的文章。

關(guān)于角色，重要的一點是預(yù)先確定好，圍繞它們來組織信息結(jié)構(gòu)與線框圖。

下面是我們?nèi)ツ曜龅囊豢罱】祱蟾鎽?yīng)用的最終成品。這套系統(tǒng)有著不同的用戶群，他們各自都需要不同的數(shù)據(jù)管理。創(chuàng)建了關(guān)鍵角色后，我們每次評審會將它們放在旁邊。

4. All wireframe 全部界面線框圖

主要負(fù)責(zé)人：交互設(shè)計師

此環(huán)節(jié)交互設(shè)計師要完成全部界面的線框圖（1:1的）設(shè)計并且團隊確認(rèn)。

*做完全部的線框圖，一般會出一個總結(jié)構(gòu)圖。如果有足夠大的場地，也可以逐頁打印出來貼到一面墻上。方便團隊隨時參考。

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

---

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

遲早，動效將會應(yīng)用到線框圖原型中，這個時候，再去對設(shè)計做決定或者是解釋，將會變的難一些。例如一些這樣的理由：太狂拽酷炫了……太潮了……太雞凍了……這將是設(shè)計失去其力度的領(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è)計中，動效理應(yīng)占到更多的比重。我們應(yīng)該去定義動效，并且闡述他們的目的——像我們闡述一個設(shè)計中其他的元素一樣。

什么是功能動效？

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

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

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

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

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

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

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

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

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

  2. 嘗試用禮物代替直接銷售

前方高能，鑒于譯者是處女座，所以感覺本文的原作者也是處女座，文章沒有高深的策劃理論，但是把平常我們覺得很簡單的表單
設(shè)計思路挖得很深很透徹，將小小的最平常的一個選項設(shè)計應(yīng)該采用哪種方案一一列出，在理之余，也把用戶的一些思維模式放出來。很多時候感覺我們經(jīng)常在思考
一些大的華麗的東西，卻不知道其實每一個小的設(shè)計其實都可以鉆研、都可以有不同的設(shè)計方案。與喜歡鉆研交互設(shè)計的朋友們共勉~~英語能力有限，歡迎吐槽指
正

真正的用戶體驗設(shè)計師并不是由畫線框圖的能力所造就的，更重要的是，他們懂得怎樣處理回饋信息，怎樣驗證想法，他們懂得做調(diào)研和迭代。他們知道草圖和線框原型只是整個設(shè)計流程當(dāng)中的一小部分，它們是調(diào)研工作的結(jié)論產(chǎn)出，是用來做溝通的信息載體；它們有可能被放到演示文檔當(dāng)中供產(chǎn)品、設(shè)計、技術(shù)開發(fā)等相關(guān)人員進(jìn)行交流溝通，也有可能以高保真或紙面原型的形式被用作可用性測試。