交互設計的 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/