適用於偉大互動設計的 UI 原則

　　互動設計如今已是一個十分常見的問題，但許多設計者和開發者仍不知道它的具體意義。今天，我們將從不同於以往的方面：我們將會深入講解能使你的網站擁有良好互動性的使用者介面和設計原則。

　首先，何為IxD

　　互動設計（即IxD）是一塊發展迅速的新領域，大致出現於10-15年之前，源於一些體現設計問題的研究，後來被專業設計者鑑別和接受。

　　互動設計促進人與環境的交流，這裡我們指的是人和網站的交流，互動設計師只要考慮使用者和電腦的互動，毋須像UX設計者那樣思考軟體或系統所有涉及使用者的方面。你也許在不同大學裡聽說過人機互動度——這些度基本是在IxD領域中培養的。

　這樣的設計師要做什麼？

　　一個互動設計師會思考誰是產品的目標使用者以及誰會使用它。使用者研究者或是資訊架構師會提供這些資訊。在這些研究的基礎上，一個互動設計師為了使用者與軟體交流，要耗費很長時間但要儘快地創作出這種令人稱奇的互動方式。

　　設計師必須識別出關鍵互動並且畫出線框圖, 所以要不停地畫草圖。有的設計師會直接畫出來，有的設計師會用軟體來輔助（文末展示了一些不錯的例子），還有其他一些設計師會或單獨或合作地創作介面。

　　互動設計（IxD）不斷地展現出新的互動方式，因為使用者總是期望網站出現新的事物。但互動設計師需要意識到這些特性會如何影響使用者，然後在許多想法中選擇真正要實現的和可以放一段時間的。

　　下面我們將會看到一些驅動互動設計的概念。

　　目標驅動設計

　　儘管IxD不需要做，但為了獲得最好的設計反饋，使用者研究查至關重要。使用者使用軟體時，一般在心裡有一些目標，你的應用程式應當很好地滿足這些目標。為了成功地結合設計和功能，使用者研究恰恰是最重要的元素。

　　這是如此的重要，以至於許多使用者研究員也能找到做互動設計師的工作，就是因為他們在分析用於軟體的人類行為模式方面的技能。

　　簡單化

　　人們不知道使用者介面是什麼。事實上他們也不關心。他們不知道有人在網站的背後策劃著他們所見到的一切。他們只知道他們需要一個簡單的網站。他們要一個易用的系統，載入/響應速度快，不要讓使用者思考並且不給使用者傷痛的理由。

　　情景和模式

　　我們使用的一些產品通常功能設計的很明確，因此每一個人都知道怎麼使用它們。拿剪刀做例子吧。一個三歲的小孩都知道怎麼使用它，兩個手指伸到兩個環中，只有一個活動方式能使用它。沒有比這更簡單的了。你的網站應該向一把剪刀一樣簡單易用。

　　為什此處使用“情景”這個單詞呢？因為這個詞表達了一個網站或者系統背後一些列的功能。

　　關於模式，使用者介面應當由一系列使用者熟知的元件組成，如果使用者想提交一個表單，他們首先會找到提交按鈕。這個按鈕就是個常見元素，設計者沒必要在接受一個新專案時每次都重複早輪子。

　　有些人會說了仿照現有的模式，不重新造輪子會讓人感覺沒有創新性。在易用性沒得到保障時討論創新簡直就是白痴。記住，易用性和創新性是兩碼事。

　　如果你想創新，你仍然需要了解已知的模式。但是，如果你追求高易用性，沒有人鼓勵你去重複造輪子，因為使用者需要時間去適應你的輪子。

　　建立一個高易用的系統需要互動設計師對約定，情景和web易用性有較深的理解。

　　現在你瞭解了一些互動設計的原則，接下來讓我們看看一個偉大的互動設計是如何影響使用者的。

　　訪客定位

　　互動設計師需要了解他們的設計面向哪些使用者，因此他們能通過使用者給產品做好定位。

　　頁面上顯示出使用者停留的地方，這樣的體驗不會讓使用者在瀏覽時感到困惑。使用者也能知道如何從一個頁面跳轉到另一個想去的頁面。讓使用者知道當前所在的位置這是非常重要的，不要讓他們陷入死衚衕中。當搜尋沒有查詢出結果，沒有告訴使用者下一步操作的選擇，這樣的互動體驗是很糟糕的。

　　持續對話

　　互動設計把大量精力專注於給予使用者持續的反饋。告訴使用者他們做的是對還是錯，即使在無意識的層面上，這也是一個受使用者歡迎的元素。 你只須在使用者完成動作的時候，告訴他們已經成功了。

　　當你在亞馬遜上買一件東西時，你會在瀏覽器上和你的郵箱裡獲得一份確認書。當你通過聯絡表單提交郵件時，你會在頁面中獲得一份確認書。

　　這使得互動不僅僅停留於網站的瀏覽和特性使用，更是把互動帶到了一個新的層面：它幫助使用者更好地理解他們當前的狀態，並把疑惑和問題減到最少，同時也去除了使用者的挫敗感。

　　思考工作流

　　IxD還要考慮工作流。如果你有一張登錄檔單，使用者用它提交資訊是會有什麼事發生？頁面會重新整理嗎，會跳轉到首頁嗎，會顯示確認資訊嗎，會跳轉到登陸頁面，或者同時跳轉到上兩個頁面嗎？

　　It’s about having many choices and choosing the one that will fit your users expectancies best. 提及的所有元素都是網站工作流的一部分。每次互動後應該緊跟下一個符合邏輯的步驟，並且與你網站之前所創造的體驗相符。

　　視覺層次

　　為了讓使用者照你的意思操作，你可以使用視覺層次來幫助他們。你可以使用佈局、元素大小和顏色組合達到視覺突出的效果，以此來引導使用者的雙眼。

　　你也可以使用視覺層次使使用者找到他們想要的東西。你想租車嗎？保證你能使用視覺層次來引導使用者來到“租賃”頁面。

　良好的線框化工具

　　繪製草稿和線框圖是如此重要，因此我願意向你展示一些好用的工具，這樣你就能馬上開始互動設計工作了。

　　Mockingbird

　　Mockingbird是一個基於web的應用，在這個網站上使用者可以建立、連線、預覽和分享站點或應用的框圖。它的介面簡潔友好，使用者可以拖放元素，調整大小，甚至可以通過一個連結與同事方便共享。

　　因為Mockingbird是一個基於Web的應用程式，這意味著你從任何一臺計算機無處不在地建立和修改你的構思。

　　Lovely Charts

　　Lovely Charts是一個線上的圖表應用，它允許使用者建立流程圖、組織架構圖、站點地圖和流程框圖。

　　該應用程式的主要特色功能是依據你所繪製的內容進行推測建議–這有助於繪圖過程的簡化，返回老版本和撤消更改也很容易。

　　Mockflow

　　MockFlow也是一個很好的Web應用程式，它有乾淨簡單的組織介面和一系列廣泛的功能特性。

　　使用起來也使用拖放，有從圖表到選單，廣告和下拉選單等內建元件。你可以上傳自己的圖片或選擇網站提供的通用素材，所以構建框圖的過程是很快的。

　　SimpleDiagrams

　　simplediagrams是另一個幫助使用者通過建立框圖表達自己的想法的桌面應用程式，它和上面提到的應用一樣使用相同的拖放技術來實現。

　　儘管較其他應用沒那麼多的功能，但simplediagrams提供了能幫助使用者建立框圖更快速的基本工具。

　　介紹完simplediagrams今天的文章該結尾了。別忘了使用者測試的重要性，記住創新和可用性通常會走向不通的方向。當創造神奇的互動介面的時候不斷創新，專注於如何讓使用它的人更加方便。

　　將這些牢記在心裡，你會成為一個偉大的網站或應用程式互動設計師。

　　你怎麼認為這個偉大的互動設計領域？你之前嘗試過設計一個類似的介面元素沒有，或是知道這些原則之後它是否為你所向往呢？

　　英文來源：http://designmodo.com/ui-principles-interaction-design/