當(dāng)前位置:首頁>ps入門教程>ps基礎(chǔ)教程>設(shè)計知識>教程內(nèi)容

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

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

 

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

什么是交互設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

交互設(shè)計案例

說完概念,該看案例。

Move Product by Barthelemy Chalvet (AgenceMe)

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

Weather App by Sergey Valiukh

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

Fiche by Barthelemy Chalvet

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

Material Design Animation

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

Mobile Animations & Interactions

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

Team Messages by Jan Losert

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

Float Label Form Interaction by Matt D. Smith

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

iOS New Gestures by Javi Perez

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

Qards Contact Form by Sergey Shmidt

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

Nike by Owi Sixseven

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

Android Wear by Ramotion

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

Apple Watch by Jakub Antalík

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

交互設(shè)計資源

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

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

結(jié)語

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

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

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

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

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

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