適用于偉大交互設(shè)計的 UI 原則

2014-6-17    藍(lán)藍(lán)設(shè)計的小編

  交互設(shè)計如今已是一個十分常見的問題,但許多設(shè)計者和開發(fā)者仍不知道它的具體意義。今天,我們將從不同于以往的方面:我們將會深入講解能使你的網(wǎng)站擁有良好交互性的用戶界面和設(shè)計原則。

  首先,何為IxD

  交互設(shè)計(即IxD)是一塊發(fā)展迅速的新領(lǐng)域,大致出現(xiàn)于10-15年之前,源于一些體現(xiàn)設(shè)計問題的研究,后來被專業(yè)設(shè)計者鑒別和接受。

  交互設(shè)計促進(jìn)人與環(huán)境的交流,這里我們指的是人和網(wǎng)站的交流,交互設(shè)計師只要考慮用戶和電腦的交互,毋須像UX設(shè)計者那樣思考軟件或系統(tǒng)所有涉及用戶的方面。你也許在不同大學(xué)里聽說過人機交互度——這些度基本是在IxD領(lǐng)域中培養(yǎng)的。

  這樣的設(shè)計師要做什么?

  一個交互設(shè)計師會思考誰是產(chǎn)品的目標(biāo)用戶以及誰會使用它。用戶研究者或是信息架構(gòu)師會提供這些信息。在這些研究的基礎(chǔ)上,一個交互設(shè)計師為了用戶與軟件交流,要耗費很長時間但要盡快地創(chuàng)作出這種令人稱奇的交互方式。

  設(shè)計師必須識別出關(guān)鍵交互并且畫出線框圖, 所以要不停地畫草圖。有的設(shè)計師會直接畫出來,有的設(shè)計師會用軟件來輔助(文末展示了一些不錯的例子),還有其他一些設(shè)計師會或單獨或合作地創(chuàng)作界面。

Wireframe

  交互設(shè)計(IxD)不斷地展現(xiàn)出新的交互方式,因為用戶總是期望網(wǎng)站出現(xiàn)新的事物。但交互設(shè)計師需要意識到這些特性會如何影響用戶,然后在許多想法中選擇真正要實現(xiàn)的和可以放一段時間的。

  下面我們將會看到一些驅(qū)動交互設(shè)計的概念。

  目標(biāo)驅(qū)動設(shè)計

  盡管IxD不需要做,但為了獲得最好的設(shè)計反饋,用戶研究查至關(guān)重要。用戶使用軟件時,一般在心里有一些目標(biāo),你的應(yīng)用程序應(yīng)當(dāng)很好地滿足這些目標(biāo)。為了成功地結(jié)合設(shè)計和功能,用戶研究恰恰是最重要的元素。

  這是如此的重要,以至于許多用戶研究員也能找到做交互設(shè)計師的工作,就是因為他們在分析用于軟件的人類行為模式方面的技能。

  簡單化

  人們不知道用戶界面是什么。事實上他們也不關(guān)心。他們不知道有人在網(wǎng)站的背后策劃著他們所見到的一切。他們只知道他們需要一個簡單的網(wǎng)站。他們要一個易用的系統(tǒng),加載/響應(yīng)速度快,不要讓用戶思考并且不給用戶傷痛的理由。

  情景和模式

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

  為什此處使用“情景”這個單詞呢?因為這個詞表達(dá)了一個網(wǎng)站或者系統(tǒng)背后一些列的功能。

  關(guān)于模式,用戶界面應(yīng)當(dāng)由一系列用戶熟知的組件組成,如果用戶想提交一個表單,他們首先會找到提交按鈕。這個按鈕就是個常見元素,設(shè)計者沒必要在接受一個新項目時每次都重復(fù)早輪子。

App

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

  如果你想創(chuàng)新,你仍然需要了解已知的模式。但是,如果你追求高易用性,沒有人鼓勵你去重復(fù)造輪子,因為用戶需要時間去適應(yīng)你的輪子。

  創(chuàng)建一個高易用的系統(tǒng)需要交互設(shè)計師對約定,情景和web易用性有較深的理解。

  現(xiàn)在你了解了一些交互設(shè)計的原則,接下來讓我們看看一個優(yōu)秀的交互設(shè)計是如何影響用戶的。

訪客定位

  交互設(shè)計師需要了解他們的設(shè)計面向哪些用戶,因此他們能通過用戶給產(chǎn)品做好定位。

  頁面上顯示出用戶停留的地方,這樣的體驗不會讓用戶在瀏覽時感到困惑。用戶也能知道如何從一個頁面跳轉(zhuǎn)到另一個想去的頁面。讓用戶知道當(dāng)前所在的位 置這是非常重要的,不要讓他們陷入死胡同中。當(dāng)搜索沒有查詢出結(jié)果,沒有告訴用戶下一步操作的選擇,這樣的交互體驗是很糟糕的。

  持續(xù)對話

  交互設(shè)計把大量精力專注于給予用戶持續(xù)的反饋。告訴用戶他們做的是對還是錯,即使在無意識的層面上,這也是一個受用戶歡迎的元素。 你只須在用戶完成動作的時候,告訴他們已經(jīng)成功了。

  當(dāng)你在亞馬遜上買一件東西時,你會在瀏覽器上和你的郵箱里獲得一份確認(rèn)書。當(dāng)你通過聯(lián)系表單提交郵件時,你會在頁面中獲得一份確認(rèn)書。

Confirmation

  這使得交互不僅僅停留于網(wǎng)站的瀏覽和特性使用,更是把交互帶到了一個新的層面:它幫助用戶更好地理解他們當(dāng)前的狀態(tài),并把疑惑和問題減到最少,同時也去除了用戶的挫敗感。

  思考工作流

  IxD還要考慮工作流。如果你有一張注冊表單,用戶用它提交信息是會有什么事發(fā)生?頁面會刷新嗎,會跳轉(zhuǎn)到首頁嗎,會顯示確認(rèn)信息嗎,會跳轉(zhuǎn)到登陸頁面,或者同時跳轉(zhuǎn)到上兩個頁面嗎?

  It’s about having many choices and choosing the one that will fit your users expectancies best. 提及的所有元素都是網(wǎng)站工作流的一部分。每次交互后應(yīng)該緊跟下一個符合邏輯的步驟,并且與你網(wǎng)站之前所創(chuàng)造的體驗相符。

  視覺層次

  為了讓用戶照你的意思操作,你可以使用視覺層次來幫助他們。你可以使用布局、元素大小和顏色組合達(dá)到視覺突出的效果,以此來引導(dǎo)用戶的雙眼。

  你也可以使用視覺層次使用戶找到他們想要的東西。你想租車嗎?保證你能使用視覺層次來引導(dǎo)用戶來到“租賃”頁面。

  良好的線框化工具

  繪制草稿和線框圖是如此重要,因此我愿意向你展示一些好用的工具,這樣你就能馬上開始交互設(shè)計工作了。

  Mockingbird

  Mockingbird是一個基于web的應(yīng)用,在這個網(wǎng)站上用戶可以創(chuàng)建、連接、預(yù)覽和分享站點或應(yīng)用的框圖。它的界面簡潔友好,用戶可以拖放元素,調(diào)整大小,甚至可以通過一個鏈接與同事方便共享。

  因為Mockingbird是一個基于Web的應(yīng)用程序,這意味著你從任何一臺計算機無處不在地創(chuàng)建和修改你的構(gòu)思。

  Lovely Charts

  Lovely Charts是一個在線的圖表應(yīng)用,它允許用戶創(chuàng)建流程圖、組織架構(gòu)圖、站點地圖和流程框圖。

  該應(yīng)用程序的主要特色功能是依據(jù)你所繪制的內(nèi)容進(jìn)行推測建議–這有助于繪圖過程的簡化,返回老版本和撤消更改也很容易。

  Mockflow

  MockFlow也是一個很好的Web應(yīng)用程序,它有干凈簡單的組織界面和一系列廣泛的功能特性。

  使用起來也使用拖放,有從圖表到菜單,廣告和下拉菜單等內(nèi)置組件。你可以上傳自己的圖片或選擇網(wǎng)站提供的通用素材,所以構(gòu)建框圖的過程是很快的。

  SimpleDiagrams

  simplediagrams是另一個幫助用戶通過創(chuàng)建框圖表達(dá)自己的想法的桌面應(yīng)用程序,它和上面提到的應(yīng)用一樣使用相同的拖放技術(shù)來實現(xiàn)。

  盡管較其他應(yīng)用沒那么多的功能,但simplediagrams提供了能幫助用戶創(chuàng)建框圖更快速的基本工具。

  介紹完simplediagrams今天的文章該結(jié)尾了。別忘了用戶測試的重要性,記住創(chuàng)新和可用性通常會走向不通的方向。當(dāng)創(chuàng)造神奇的交互界面的時候不斷創(chuàng)新,專注于如何讓使用它的人更加方便。

  將這些牢記在心里,你會成為一個優(yōu)秀的網(wǎng)站或應(yīng)用程序交互設(shè)計師。

  你怎么認(rèn)為這個優(yōu)秀的交互設(shè)計領(lǐng)域?你之前嘗試過設(shè)計一個類似的接口元素沒有,或是知道這些原則之后它是否為你所向往呢?

日歷

鏈接

個人資料

存檔