設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。(3)

來(lái)源:優(yōu)設(shè)網(wǎng) 作者:陳子木 學(xué)習(xí):2841人次

 

最近幾年,交互設(shè)計(jì)這個(gè)詞被提得非常頻繁?墒,UI設(shè)計(jì)見(jiàn)了一大把,你卻很少能見(jiàn)到真正的交互設(shè)計(jì)師。那么到底什么才是真正的交互設(shè)計(jì)呢?怎樣才能成為真正的交互設(shè)計(jì)師呢?今天,就讓我們圍繞著這兩個(gè)問(wèn)題來(lái)聊聊交互設(shè)計(jì)。

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

交互設(shè)計(jì)的過(guò)程中,設(shè)計(jì)師會(huì)將富有邏輯操作和深思熟慮的動(dòng)作引入界面中,打造出引人入勝的網(wǎng)頁(yè)和UI。成功的交互設(shè)計(jì)師善于使用技術(shù)和良好的交互規(guī)則來(lái)打造理想的用戶(hù)體驗(yàn)。

近10年來(lái)涉及到網(wǎng)頁(yè)和APP的交互設(shè)計(jì)是談?wù)摰谋容^多的,但是更廣泛意義上的交互設(shè)計(jì)則提及較少。在探討交互設(shè)計(jì)的時(shí)候,被引用的最多的其實(shí)是Bob Baxley于2002年所寫(xiě)的系列文章,這組由12篇組成的系列文章詳細(xì)界定了網(wǎng)頁(yè)交互設(shè)計(jì)。

這個(gè)名為“交互設(shè)計(jì)簡(jiǎn)介”的系列文章將交互設(shè)計(jì)分割為5個(gè)主要的部分,這種劃分方式延續(xù)至今:

·人機(jī)溝通:設(shè)備和用戶(hù)之間信息的傳遞和翻譯。
·操作與反饋:當(dāng)交互發(fā)生時(shí)一切是如何發(fā)生和展開(kāi)的。
·狀態(tài):不同的狀態(tài)的存在,確保用戶(hù)了解正在發(fā)生什么,以及應(yīng)用為何進(jìn)入這種狀態(tài)。
·工作流:讓用戶(hù)明白誰(shuí)可以做什么,以及接下來(lái)會(huì)發(fā)生什么。
·故障:故障是必然會(huì)發(fā)生的,必須納入考慮范疇以?xún)?nèi)。

除此之外,在進(jìn)行交互設(shè)計(jì)的過(guò)程中,還有一些其他的問(wèn)題需要牢記。Usability.gov 這個(gè)網(wǎng)站中總結(jié)了基本的6大類(lèi)總計(jì)14個(gè)不同的問(wèn)題,它們可以幫你在設(shè)計(jì)過(guò)程中搭建起整個(gè)交互的體系。

·用戶(hù)是如何用鼠標(biāo)、手指和手寫(xiě)筆同界面進(jìn)行交互的呢?
·用戶(hù)會(huì)向界面發(fā)出什么樣的交互指令(操作)?
·界面會(huì)用什么樣的提示來(lái)告知用戶(hù)它的功用?
·在用戶(hù)進(jìn)行操作之前,作為交互設(shè)計(jì)師的你會(huì)如何讓用戶(hù)明白操作之后會(huì)發(fā)生什么?
·為了防止出錯(cuò)你會(huì)提供怎樣的限制?
·報(bào)錯(cuò)信息是否能告知用戶(hù)解決問(wèn)題的方法?
·當(dāng)一個(gè)操作發(fā)生的時(shí)候,用戶(hù)會(huì)得到怎樣的反饋?
·在用戶(hù)操作和界面反饋之間有多長(zhǎng)的響應(yīng)時(shí)間?
·界面元素的尺寸是否與交互方式相事宜?
·邊緣和角落是否被有意識(shí)有策略地放置交互元素?
·你是否遵循了設(shè)計(jì)標(biāo)準(zhǔn)?
·信息是否被(合理地)分割為幾個(gè)不同的條目?
·用戶(hù)終端是否盡可能簡(jiǎn)單?
·你是否使用了(用戶(hù))熟悉的格式?

交互設(shè)計(jì)師所扮演的角色

如果你發(fā)現(xiàn)自己經(jīng)常考慮以上的問(wèn)題,或者經(jīng)常被問(wèn)及上述問(wèn)題,那就意味著你正在做著交互設(shè)計(jì)師的工作。

交互設(shè)計(jì)師是一個(gè)橫跨設(shè)計(jì)、開(kāi)發(fā)、創(chuàng)意和營(yíng)銷(xiāo)團(tuán)隊(duì)的職位,你會(huì)幫助這些團(tuán)隊(duì)來(lái)構(gòu)建設(shè)計(jì)策略,確立產(chǎn)品的關(guān)鍵性交互,創(chuàng)建概念測(cè)試原型,保持技術(shù)更新,并確保產(chǎn)品緊跟趨勢(shì)。

似乎聽(tīng)起來(lái)交互設(shè)計(jì)師這個(gè)職位是一個(gè)包含太多概念的模糊職位。簡(jiǎn)單說(shuō)起來(lái),交互設(shè)計(jì)師就是確保數(shù)字產(chǎn)品能被用戶(hù)輕松玩轉(zhuǎn)的那個(gè)人。

而交互設(shè)計(jì)師的職業(yè)走向是多變的。有些正式的設(shè)計(jì)院校和培訓(xùn)機(jī)構(gòu)會(huì)教授交互設(shè)計(jì),但是更多的交互設(shè)計(jì)知識(shí)是來(lái)自于項(xiàng)目實(shí)踐。不過(guò)交互設(shè)計(jì)師有個(gè)共性:他們對(duì)事物運(yùn)作的規(guī)律有著極大的好奇心,不懼問(wèn)題,善于視覺(jué)化的表達(dá),善于將視覺(jué)元素和概念以新的型態(tài)呈現(xiàn)出來(lái)。

交互設(shè)計(jì)的概念和原則

那么,真正推動(dòng)交互設(shè)計(jì)領(lǐng)域發(fā)展的是什么?有是什么讓交互設(shè)計(jì)區(qū)別于其他的設(shè)計(jì)?其實(shí),界限很模糊。我們常常談及交互設(shè)計(jì),是因?yàn)榻换コ休d了許多東西,容易被關(guān)注到。事實(shí)上,要成就一個(gè)好的數(shù)字產(chǎn)品、網(wǎng)頁(yè)或者應(yīng)用,交互設(shè)計(jì)只是成就它們的一個(gè)方面。

2009年UX Booth所出版的《Complete Beginner’s Guide to Interaction Design》(交互設(shè)計(jì)新手完全指南)仍然是一本很好的參考書(shū)。那些真正推動(dòng)交互設(shè)計(jì)概念發(fā)展的工具和因素其實(shí)一直沒(méi)變。

接下來(lái)看一些有關(guān)交互設(shè)計(jì)的概念吧。

·目標(biāo)驅(qū)動(dòng)設(shè)計(jì):為什么你的設(shè)計(jì)和交互會(huì)存在?它們的存在,是確保你的網(wǎng)站或者應(yīng)用能做好要做的事情。
·界面的魔法:“最好的交互設(shè)計(jì)是不存在的,它們不會(huì)在加載和響應(yīng)上耗時(shí),不會(huì)令用戶(hù)思考,也不會(huì)給用戶(hù)糾結(jié)和悲傷的理由。”
·易用性:“界面能讓底層的系統(tǒng)易于被理解并且被用戶(hù)所青睞。”
·可供性:“最佳的工業(yè)設(shè)計(jì)和交互設(shè)計(jì)都能自圓其說(shuō),形式服務(wù)于功能。”
·易學(xué)性:“許多構(gòu)成實(shí)用的交互界面的元素都頗為相似。……面對(duì)相似的問(wèn)題,最好的交互設(shè)計(jì)師不會(huì)重復(fù)設(shè)計(jì)輪子,相反他們會(huì)遵循一些模式來(lái)設(shè)計(jì)。”

交互設(shè)計(jì)案例

說(shuō)完概念,該看案例。

Move Product by Barthelemy Chalvet (AgenceMe)

設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。

Weather App by Sergey Valiukh

設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。

Fiche by Barthelemy Chalvet

設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。

Material Design Animation

設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。

Mobile Animations & Interactions

設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。

Team Messages by Jan Losert

設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。

Float Label Form Interaction by Matt D. Smith

設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。

iOS New Gestures by Javi Perez

設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。

Qards Contact Form by Sergey Shmidt

設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。

Nike by Owi Sixseven

設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。

Android Wear by Ramotion

設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。

Apple Watch by Jakub Antalík

設(shè)計(jì)知識(shí),聊聊交互設(shè)計(jì)的相關(guān)事。

交互設(shè)計(jì)資源

有許多優(yōu)秀的交互設(shè)計(jì)類(lèi)的資源,下面的幾個(gè)網(wǎng)站是學(xué)習(xí)交互設(shè)計(jì)的好地方:

·Interaction Design Foundation
·“Interaction Design: Beyond Human-Computer Interaction” textbook
·Interaction Design Association
·Interaction Design Checklist for designers

結(jié)語(yǔ)

對(duì)于現(xiàn)代的網(wǎng)站,用戶(hù)對(duì)于交互設(shè)計(jì)還是有所期盼的。你無(wú)法回避。為了吸引更多的用戶(hù),你需要?jiǎng)?chuàng)建必要且令人愉悅交互設(shè)計(jì)。

每個(gè)團(tuán)隊(duì)其實(shí)都需要一個(gè)人來(lái)創(chuàng)建并管理交互設(shè)計(jì),這很重要。為什么不是你呢?

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!