標籤:

交互設計怎麼自學?

我是信息與計算科學專業的學生,一般畢業後都是程序員,但是我自己選擇了交互設計,所以在自學,但是要找到交互設計的工作卻不知道如何下手學習,希望各位多多給建議,萬分感謝


------------2015-07-07更新--------------

以下是我自己發表的一些看法:
如果你想做交互,我建議你首先要確定自己是否喜歡交互,適不適合做交互。你一年到頭都在上班加班做交互這個事情,所以喜不喜歡很重要。你可以先去了解交互是做什麼的,如何做,及未來的職業的發展方向,看看這個是否適合自己的未來職業規劃。我建議你可以添加一些交互群,或者產品群,去詳細問問大家,要問清楚,清楚後再衡量自己適不適合做這個。但是加群的時候要記住,得問一些有點經驗的交互設計師,他們的經驗多,應該能給到好的答案給你。還有我建議你可以先去看這本書:【破繭成碟—用戶體驗設計師之路】,第一次看你不用看得那麼細,你看個大概,裡邊的交互工作流程都寫得很清楚,看了之後你就大概了解交互是做什麼的,如何做了。

如果你認為你喜歡並適合做交互了,那麼接下來就要謀劃自己如何學習交互了:
當前做一個合計的交互設計師必須具備以下幾項能力,以前看到網上有一張交互所需能力分析圖,看到都覺得怕,現在我根據自己這兩年做交互的經驗總結出這四大項:
1. 邏輯能力,文字、語言表達能力。
2. 同理心,心裡分析能力。
3. 熟知基礎交互理論知識 。
4. 設計美感。

以上四項,覺得自己哪項不行就補哪項!缺哪項都不行!

1. 邏輯能力,文字、語言表達能力。交互設計師日常最多就是畫流程圖和做信息架構,所以邏輯能力很重要,畫流程時哪個地方需要加程序判斷;梳理信息時,哪些信息是可以組合在一塊的;跟產品人員討論時,論點是否有理有據。這些都是邏輯能力的體現。同時,邏輯能力還會影響到文字、語言能力。如果邏輯能力不好,跟產品人員討論的時候就會論點雜亂,說服不了別人,還容易一下被產品人員說蒙,這時候交互工作就很難很好地進行了,就會被產品人員牽著走。而且如果邏輯能力不好,寫交互說明的時候也很難做到語言清晰易懂,程序員就會看得雲里雲霧。
2. 同理心,心裡分析能力。因為做的是為人類服務的事情,所以要時常替別人思考。比如這個功能點,如何能夠讓用戶用得舒心。如果你神經大條不在乎用戶的使用感受,很多時認為操作步驟多幾步都是無所謂的,那麼你的產品體驗就會很糟糕了。還有當看到用戶反饋的時候更需要分析了解用戶究竟在想什麼,而不是你表面上看到的文字。所以很多時候你必須變成貼心小棉襖。
3. 熟知基礎交互理論知識。這個是很重要的,每個新人都必須要學習。這時候我們唯一能做的就是看書。書上的理論知識都是前人的總結,總比你做n個項目去探索出真理要更好。首先我們必須知道:尼爾森的十大可用性原則。這個對於我們做交互很有幫助。
4. 設計美感。交互設計師為什麼要懂得設計美感呢?因為我們工作中有一步要進行界面信息布局。俗稱:排版。如果你沒有美學精神,做出來的東西沒有美感可言,那麼你就會被視覺設計師罵得瘋。ta面對你醜陋的界面,要不ta幫你改掉界面的布局,要不你自己返工改掉。所以如果不想自己做出來的界面布局被別人怨恨及被改得面目全非,就一定得懂得設計美感。

前面鋪墊了很多,那麼應該如何一步步自學呢?我自己總結了一下:

1. 看書。看書看什麼書?你可以先去看【破繭成碟—用戶體驗設計師之路】了解整個交互的工作流程是怎麼樣的(前面已經說過)。然後看看【點石成金】【簡約至上】【用戶體驗要素】【設計師要懂的心理學】等等,先樹立起做交互基礎思維,千萬不要一開始去看【交互設計精髓】,裡邊講的東西比較深奧你會看不懂的,看了還傷學習的衝勁。至今我還在研究【交互設計精髓】上所說的東西。

2. 玩app 。手上應當準備兩部不同平台的手機,Android和ios,助你了解Android平台和ios平台設計規範的不同。你可以多下載一些蘋果商店推薦的app,各個類型的都下載幾個來玩玩,研究別人app上各個功能信息為什麼要這樣構架。比如知乎上添加回答頁面中,為什麼鍵盤頂上的那條欄要放置那幾個小功能?比如淘寶購物流程,為什麼點擊提交訂單按鈕直接彈出支付密碼輸入框?一定要帶著腦子去看和玩app 。而且新手要經常看,一有空就看就研究。主要研究:流程為什麼這樣子設計、信息為什麼這樣子架構、各個控制項的交互樣式。
還有我推薦可以動手用ps臨摹電商的詳情頁,和列表頁布局,看看人家是怎麼做的。臨摹的時候將頁面弄成黑白的。讓你更加容易了解別人如何做層級結構。

3. 學軟體。學習什麼軟體?繪製原型的axure ;信息構架的xmind;流程圖繪製的Visio 。這些都是比較主流的交互工作中使用到的軟體,也不給你推薦那麼多其他的,給你個唯一的你就不糾結到底選什麼了。還有附加軟體: Photoshop 。你起碼要學會這四個才能在工作中使用軟體得心應手。
對了,你也可以用axure來畫流程圖,不過就是沒那麼專業。
還有,學axure 一開始你可以不必那麼深入,因為一般自主研發產品的公司不會讓出動態的原型圖,只會做出靜態的。靜態的方便程序,UI,產品去查看。等你可以上手項目之後,你再慢慢研究axure的動態使用吧(以防將來要出動態圖)。

4. 記住並了解清楚可用性十大原則,熟讀ios設計規範、Android設計規範。做完這件事之後才去實踐項目吧!

5. 試著做項目。
準備得差不多了就要開始實踐了。實踐是檢驗真理的唯一標準。你在書上學到了多少東西就在你做的項目中體驗出來。你可以自己試著策劃一個小應用,自己提點小需求,然後自己試著把交互弄出來。弄出來後怎麼辦?當然找大神指導啦,一定要厚著臉皮去,不要怕發打大神的傲氣高揚。或者你也可以試著改進某些產品中你發現的交互問題。反正就是要嘗試做項目,因為你將要用這些項目來進行接下來的交互實習面試。

5. 反覆做項目並看書,總結自己的優缺。做項目不能停。需要不斷地做項目,才能驗證你學到哪些東西。邊做項目邊看書。然後總結自己在項目中的優缺。最後將自己認為做好的一個項目拿去面試。面試的項目不需要多,那一個精品就足夠了。


說了很多,結果是一切唯有靠你自己。別人只能給你指明方向,但是具體實操大家都幫不了你。你唯有靠自己努力。記住不能懶惰!不能懶惰!不能懶惰!


最後贈你我在做項目中的三個經驗:
1. 一切都圍繞這需求和場景出發。
2. 頁面中每一個元素的存在和擺放位置都應該有它的一定價值。
3. 遇到糾結的問題時,回到原點,想想用戶目標、業務需求,及可用性十大原則。

以上是我的一點點小經驗,最近看到好多新人問如何做交互,那麼就寫寫,不足之處請見諒。
先更新到這裡,如果以後想到新的,再更新吧!


推薦一些網站和工具吧,對初學者和有經驗的人來說都很有幫助。

首發於公眾號、次發於知乎專欄:作品集分享portfolio
歡迎關註:知乎專欄
HArt原創文章,轉載請聯繫我獲得授權,同行自覺,違者必究。
———————————————————————————————————————————

主要跟大家分享三部分,第一部分和介紹一些現在做的比較好的設計作品社區,包括一些藝術作品分享網站等。可以幫助大家尋找靈感,裡面的一些好的案例,也可以成為你們作品集中second research的一部分,也算是一種casestudy。

第二部分給大家介紹的一些網站是比較偏學術性的網站。這些網站會發表專業性、學術性很強的文章,大家在現在的階段讀這樣的文章,一方面可以增加自己對所要學習專業的專業性的了解,另一方面可以學習的最前沿,最系統的理論知識。

第三部分我會給大家介紹現在平台上可以利用的工具,現在有很多公司都將他們內部資源開放原始碼,像我們所熟知的Facebook,它開放了很多內部的設計資源素材,其實也是為我們所用,有針對性使用這些template。

一、設計作品社區

1、 uplabs

第一個給大家介紹的網站叫uplabs。如果同學們對behance或者dribbble很熟悉,我相信大家對uplabs也一定不陌生,它是一個很好地為設計師打造的資源推薦社區,上面彙集了很多前端設計作品,還有大量的android和ios UI這樣的資源。

另外uplabs也有很好地marketing功能,大家可以去免費或付費下載資源。


2、collect UI

第二個給大家介紹的是 collect UI。它是一個基於dribbble的每日資源推薦社區,同學們可能會感覺有點奇怪,因為如果它是僅僅是dribbble的「再分享社區」,那麼它和dribbble網站似乎就不會有很大的區別。

其實並不是這樣的,因為collect UI都是通過人工篩選的方式來保證這個社區有很高的質量,我們可以看到在左側列表欄劃分出了不同的頁面類別,比如sign up、landingpage、user profile,這樣我們在搜索不同類別時可以很清晰,尤其是同學們在做同學們在做app的項目時候。


3、site inspire

第三個網站是 site inspire ,一聽這個名字就知道這是一個尋找靈感比較好的網站。

這個網站收錄了很多的網站交互型比較優秀的作品,會分為不同的風格和類型,包括不同主題的網站,我會比較關注這個網站是因為很早看它上面有推薦的網站其實很有視覺衝擊力的,算是比較前沿特別是在排版上比較簡潔同時會有很高的格調,我覺得如果對板式很關注的同學可以多看一些這樣的作品。


4、 one page love

第四個網站叫做 one page love 。這個網站彙集了很多優秀單頁,也有很多模板和資源,有20多種基於行業的分類,你會發現它沒有像其他作品集網站的頁面,它會將大家的注意力集中於界面,模板主題很直觀,所以你可以很輕鬆地找到自己喜歡的不同行業的模板。


5、 resource cards

第五個網站是 resource cards,這個我覺得是一個特別給力的比較結合性的網站。

如果我們對設計還沒有很多了解,如果你的設計收藏夾還為零的話,僅僅這一個網站就可以解決很多問題,因為它的resource cards是一個專門為設計師提供豐富資源的網站,這上面有不同的卡片類別,每一個卡片類別下面都會有相應下一級的分類,每一個小小的卡片都是一個收藏夾。


6、 dribbble、behance

最後兩個網站,一個是dribbble另一個是behance。

對設計有一定了解的同學應該很熟悉這兩個現在做的已經很著名的設計創意社區,有很多包括全球的優秀設計師都會在上面進行作品的分享交流,也可以看到不同作品的反饋。

以上7個網站基本上就是第一部分和大家介紹的,可以幫助大家發展靈感,對大家做research有一些有幫助的平台。

二、學術性、概念性較強的網站

1、smashing magazine

第一個網站叫做smashing magazine(門檻會有一點高),這裡面的文章比較綜合包括整體的質量很高,很適合做用戶體驗的同學來關注。

比較適合美國留學的同學,因為其實美國會對交互有一些技術性要求,會需要你有coding的能力,需要你有交互的能力,其實這裡面也有涉及到這樣的分類,比如coding,mobile都會有偏向這樣的文章。smashing magazine裡面的文章總體的質量很高篇幅很長,我不知道現階段大家的英語能力怎麼樣,但是我覺得大家可以一篇一篇堅持讀下來我相信對大家這樣的專業辭彙的能力的提上還是很高的。


2、 ux booth

第二個網站是ux booth,它其實是個偏向於用戶體驗的文章的彙集網站,與上面的smashing magazine主要的區別的在於是更聚焦於用戶體驗這樣相關的方面,整體具有很系統很嚴謹的學術性,很系統很嚴謹三個功能都很棒,一個是交互,一個是acceptability,還有一個偏向於可用性測試也很不錯。


3、 ux magazine

第三個是ux magazine,這裡的文章和上面其他的網站上的相比更短小精悍一些。比較會用通俗的案列講解理論知識,分析得很有理有據,可以作為大家二手調研里的素材,同時會有一些結合心理學與設計的探討,與上面幾個相比會比較容易理解。


4、designmodo

第四個是designmodo,這個網站前一陣子很風行,上面會有很多關於webstyte的一些文章。

designmodo介紹了很多設計前沿與趨勢,這裡面有兩個元素很不錯,一個是inspiration(靈感),一個是resorts(訴諸)。inspiration裡面的內容很新穎,resorts有一些很實用的小工具和一些大家可以測試方法性的工具。我們在主菜單上面可以看到shop,這裡面是許多有想法的設計師分享的作品。


5、 web design

第五個是web design。我最初關注這個網站其實是被它的視覺設計所吸引,它的視覺設計確實做的很棒,關注一段時間你會發現這裡面的內容很新穎,很適合持續關注,這裡面會精選互聯網裡優質的文章,這上面的漫畫都是由職業的漫畫家親自手畫而成。

另外web design 在主菜單裡面有一個freebies的模塊。這裡面有很多優質的資源大家都可以去下載。


6、 Facebook design

第六個是Facebook design。這個頁面結合了Facebook的設計師所製作的免費設計資源,因為目前你可以看到很多互聯網公司它都有將公司內部資源開放出來再做開源,如果你想知道這些前沿的企業他們是如何做這些設計,你都可以下載這些素材看到這些原始的文檔。

如果同學們在做作品集中有APP這樣的項目,這裡面有很多模板,你不需要再去拍照就可以用你最後做的interface(介面)去植入到這樣的圖片裡面。因為這個網站上線的時間不是很久,所以上面的資源不是很多。

三、平台上可以利用的工具

1、 workMark

它是一個可以幫你快速比較不同字體、選擇字體的工具,你可以簡單輸入你想要測試的文字,設置它的字體大小,就會在下面實時的顯示出實時做一個比較。當大家在看英文書籍時你可能會發現一個非常好看的英文字體,但是因為它的紙質的,我也沒有辦法去得到這個字體是什麼,其實這個時候掃描一下把它植入到平台裡面會自動幫你識別出這個字體,來方便你日後的使用。


2、 LOL COLORS

這是一個設計師獨立設計、獨立coding 的網站。這上面提供了很多不同顏色的配色方案,每一組有四個顏色,大家如果看到這上面有合適的配色方案,可以簡化大家的設計流程。


3、 coolors

我們可以卡到這也是一個配色網站,相比於上一個它的功能會更豐富一些,可以微調每個顏色的亮度,飽和度與色相這裡有一個很好的功能,你會看到如果上傳一張圖片,它會幫你解析圖片的配色方案,最後你可以導出保存到調色板裡面。


④4、Icons for Everthing

這個網站可以簡化你的icons設計路徑,如果我們在做作品集排版的時候,我們經常會用icon做導引,在這樣的平台都可以找到合適的icon。


5、 Iconjar

這是一個偏向組織管理的搜索使用圖片的工具,大家可以在這上面下載不用的icon page,一方面是可以使用,另一方面是可以學習我們在做icon set的時候需要去遵循哪些規則。


6、 place it

在做用戶體驗,交互,服務設計的時候其實都會分4個部分,第一個部分是我們需要去發現一個實際問題;第二是定義一個核心的痛點;第三是去展示我們的設計結果;最好要把設計結果放入到一個真實的情景中去測試,從用戶的身上得到反饋。

這個place it其實就是幫助我們在最後在得到設計結果的時候自動生成最終場景的圖片,你只需準備好你的interface直接把它植入到這個環境里,不需要去修改,去ps。


⑦7、Pexels、 Adobe Stock、Shutterstock

最後給大家介紹的網站分別為Pexels、 Adobe Stock和 Shutterstock。

其實不用過多的描述,這三個都是屬於圖庫的性質,如果大家在排版在做作品集時候沒有合適的圖片又沒有辦法去拍照可以來這裡。

以上基本上都是一些平台,軟體工具類。無論這些平台還是工具,都只是我們設計的一環,更重要的是需要你在生活中學會發現Pain points,找到痛點,用設計去解決問題。尤其是交互與用戶體驗的同學,你需要去用你的設計結果去改變別人的行為,我覺得這是用戶體驗交互的核心。

———————————————————————————————————————————

首發於公眾號、次發於知乎專欄:作品集分享portfolio
歡迎關註:知乎專欄
有問題可私信我,或微信我sjie1029
HArt原創文章,轉載請私信我,同行自覺,違者必究。


正好最近也在自學交互設計,從0開始的狀態。那就先分享下如何自學的思路,然後再分析下自學的一些成果出來吧。思維永遠比獲得的知識點更重要。

自學思路:
這個不僅僅是針對自學交互設計了,其實是一套自學模式,適合自學任何領域知識了。以交互設計為例,說說我自學這塊的流程。
1、確定它是什麼what?
比如交互沒怎麼聽說過,從字面也不懂,先弄清楚是什麼,邊界在哪裡。
2、確定為了什麼why?
每一個東西都有存在的價值,那麼交互設計是為了什麼。理解它的價值所在,做起來才不會偏離目標。
3、前人怎麼做的how?
基本上沒有東西是完全全新的,都有前人的積澱。這時候需要借力,要懂得去利用已有知識和信息。網上查詢資料,查到一些工作流程,就可以洞察出來平時做什麼,用哪些知識,為什麼做那些事情。
4、前人經驗分析
查幾篇行業內大牛的一些分享,看他們怎麼理解這行,能獲得很多有用信息,肯定會知道關鍵點,常出問題點,怎樣解決等。
5、形成自己知識體系
根據前邊探索的東西,去對應的學習和了解。然後形成自己的知識體系。

前4步都可以靠網上搜索完成,第5步可以用腦圖完成。一般出了整體情況後,再看情況,對照著學習下一步細的內容。比如學習交互一定要懂設計指導規範,那再自己計划去學這一塊。要一層一層的來。

自學的一些交互知識:

阿里騰訊的工作流程樣例:

從牛逼公司的流程中可以洞察出來很多做事的關鍵點,有木有。因為流程的存在就是之前的一幫英雄,把做這項工作的要點提煉出來,指導以後的新人快速上手,能達到80分水平的。所以,洞察工作流程,是一個快速學習新領域的手段。圖中有很多價值點,太多了我就不解釋了自己看吧,值得收藏哦~

淘寶UED部門工作流程

阿里旺旺UED工作流程

騰訊CDC用戶體驗設計部

微軟研究院設計工作流程

好啦,第一次回答知乎。以前一直看不回答,紀念一下處女秀~哈哈


vanyanwen同學已經說的差不多了,我這裡就不贅述。作為計算機專業的學生,我想你在邏輯能力和技術實現能力方面應該有很大優勢,在保持優勢的前提下,可以努力提升自己的審美能力。

最快的學習方式還是去實踐。


自學交互過程中感覺對自己幫助比較大,適合小白學習的幾篇文章和一些資源路徑匯總(之前為一個想學習交互的學弟整理的,現在分享出來和大家一起進步)。比較零散,後面再細化補充!


———————— 讀了感覺有收穫的文章 ————————


- 工設為什麼轉交互

http://www.zhihu.com/question/19698223/answer/12703069


- 認識交互

http://mp.weixin.qq.com/s?__biz=MzA3MTAzMzkyNg==amp;amp;amp;mid=210285509amp;amp;amp;idx=1amp;amp;amp;sn=f2e8fa17ed5bb488bab350c883fad52famp;amp;amp;scene=0#rd

http://www.zhihu.com/question/22081835/answer/30573345

http://www.zhihu.com/question/19788122/answer/47015420


- 需求分析

http://uedc.163.com/13057.html


- 信息架構

http://mp.weixin.qq.com/s?__biz=MzAwNDM5MjE0NA==amp;amp;amp;mid=206358241amp;amp;amp;idx=1amp;amp;amp;sn=44ffa5c9ef35f5743477a3841380a308#rd

http://www.zhihu.com/question/19719820/answer/30997950


- 流程設計

http://mp.weixin.qq.com/s?__biz=MzAwNDM5MjE0NA==amp;amp;amp;mid=206890038amp;amp;amp;idx=1amp;amp;amp;sn=576b4b9a3f7d0576bd0cbb775b0110e5#rd

http://www.zhihu.com/question/19719820/answer/30997950

http://mp.weixin.qq.com/s?__biz=MzAwNDM5MjE0NA==amp;amp;amp;mid=206928340amp;amp;amp;idx=1amp;amp;amp;sn=a7defdd47855ee9bc445b1f58914eaa0#rd

http://mp.weixin.qq.com/s?__biz=MzAwNDM5MjE0NA==amp;amp;amp;mid=206928340amp;amp;amp;idx=2amp;amp;amp;sn=a403a47587d9d1552a427de995abd991#rd

http://mp.weixin.qq.com/s?__biz=MzAwNDM5MjE0NA==amp;amp;amp;mid=207020164amp;amp;amp;idx=1amp;amp;amp;sn=0c8b308cd7d6d849420492c10841c58c#rd


- 設計模式

https://ant.design/


設計指南

http://www.uisdc.com/ios9-interface-guideline-ui

http://designguidelines.co/


- 交互設計原則

http://www.zhihu.com/question/19812118/answer/15770038

http://www.zhihu.com/question/19812118/answer/22831910

http://mp.weixin.qq.com/s?__biz=MzA3MTAzMzkyNg==amp;amp;amp;mid=205480473amp;amp;amp;idx=1amp;amp;amp;sn=71af4355fbfd1e8e1a618410ffa3eae7#rd


- 交互設計規範

http://mp.weixin.qq.com/s?__biz=MjM5OTEwNjI2MA==amp;amp;amp;mid=209282406amp;amp;amp;idx=1amp;amp;amp;sn=b46802572c75a01fcd5a8618eff33702amp;amp;amp;scene=2amp;amp;amp;srcid=p6FIEtGOV9dEdcN5FYNAamp;amp;amp;from=timelineamp;amp;amp;isappinstalled=0#rd


- app redesign

http://mp.weixin.qq.com/s?__biz=MzAwMjAyNzMzMQ==amp;amp;amp;mid=402956029amp;amp;amp;idx=1amp;amp;amp;sn=ba90ae6ebb4790344a43530b6ce93015amp;amp;amp;scene=24amp;amp;amp;srcid=0314wlqH6aQWA5zS7cGnSa4x#rd

http://www.zhihu.com/question/40307199/answer/85887328

http://www.zhihu.com/question/40307199/answer/85887328


- 區分交互、視覺、ui

http://www.zhihu.com/question/21015732/answer/17565089

http://www.zhihu.com/question/21015732/answer/22517921


- 學習一個月找交互實習

http://www.zhihu.com/question/30986104/answer/51057820

http://www.zhihu.com/question/30986104/answer/50644564


- 交互簡歷

http://www.zhihu.com/question/19977449/answer/49526338


———————— 長期學習資源 ————————

- 有關交互自學的知乎問答

http://www.zhihu.com/question/29483824/answer/69635948

http://www.zhihu.com/question/20843559/answer/16375415


- 公眾號

  • 交互設計學堂
  • 創設空間
  • 鴻影的設計思考錄
  • 可能性與大設計
  • 集創堂
  • 產品設計研習社
  • ……

- 知乎

  • elya
  • 可風
  • 龔子儀
  • 王鎮雷
  • 尤文文
  • 張曉翔
  • 馬力
  • ……

- 簡書

  • truelie
  • 純銀
  • 劉英滕
  • ……

在此,也感謝原創作者的分享和幫助!歡迎支持和關注原創。違權請告知,立刪!


如何自學且達到職業UX設計師水平?

隨著移動互聯網的發展,產品的用戶體驗變得越來越重要,甚至一定程度上影響著產品的成功與否。對設計初學者來說,到底該如何入手並學習UX設計呢,需要準備什麼、或者具備哪些技能來踏入業界呢?相悖於很多人認為UX就等同於原型圖的認識,其實UX學習主要分為四點:理論+實踐+技術+人脈圈。具體內容有哪些呢,讓我們一起來看看吧。

(一)了解UX和UX設計理論

中國有句俗語叫做「知己知彼,百戰不殆」,作為一個新手從零開始學習UX設計,首先要弄明白的就是什麼是UX設計。測試是否入門的標準就是,你能否用自己的語言向他人解釋清楚什麼是UX。在此基礎上,還需要學習UX設計需要掌握哪些基本知識以及設計行業知識。

(二)明確UX學習內容

以下我們列舉出了,新手學習UX設計的幾個主要版塊的內容,分別是:

1). [必學] 設計基礎三大構(包含色彩構成、平面構成、立體構成)、素描基礎(掌握透視原理、光影關係)同時再專研一下色彩搭配、色彩心理學。

2). [掌握] 文案設計(需要一定的文化素養)掌握文案基本功,各行各業都能綜合運用,編寫個簡單的廣告語什麼的,都是要會的。

3). [必學] 版式布局、原理(畫冊、廣告、網頁設計用得多)掌握版式形成原理、網格設計理論、頁面的基本元素類型。

4). [軟體] 必備的UX設計軟體,Photoshop(PS點陣圖)、illustrator(AI矢量)、Mockplus(原型設計工具)

(三)UX設計實踐

實踐是檢驗真理的唯一標準,對於入門的設計師來講,還沒有任何的經驗積累,如果直接開始UX設計難度非常大,因此我們推薦按照以下的方式開始進行設計實踐。

1.分析熱門網站和APP的設計風格

熱門的網站和APP在UX設計方面必然尤其獨到之處,我們要做的第一步就是從產品的設計,頁面交互,到用戶體驗這些方面來進行產品的分析,從而達到學習UX設計的終極目的。

l分析他們的主要目標用戶群是哪些

l 分析他們的核心功能,功能的優先順序

l 分析各個場景下的交互方式,總結優勢和劣勢

l 思考如何優化和改進

2、模仿臨摹

模仿不等於抄襲,我們模仿的目的在於熟悉優秀設計的風格和流程。我們可以從全盤的複製開始,然後逐步實現融合自己的想法進行設計的改動,在此基礎上不斷創新,最後形成一個帶有個人設計風格的模仿作品。

3、從頭開始獨立設計

在這個階段,設計師們可以自己嘗試從頭開始設計一個網站或者APP。這就包括了,市場調研,目標用戶劃分,需求分析,需求確認,設計,測試等等。如果對於前期的市場調研不熟悉,一個簡單的方式就是到APPStore去選擇熱門的APP,然後根據下方的功能需求描述,來嘗試獨立設計產品。然後分享作品到各大社交平台。

(四)UX人脈圈

作為一個設計師,最好的學習方式就是不斷向周圍優秀的設計師學習。因此,建立屬於自己的UX人脈圈子,對於邁向專業級的設計師幫助極大。在這個過程中,可以通過社交平台(例如,facebook,twitter,Linkdin)來關注優秀UX設計師,以及加入類似於設計師聯盟等一系列相關的組織,並保持和同行進行積極的互動和交流,逐步形成屬於自己的UX人脈圈。


雖然LZ題目是自學,但對交互設計,還是強烈建議去互聯網公司實習。這並不是說自學不對,而是自學和實際情況差了很多。

交互設計的精華都在業界。

舉個例子,我最早在某博實習,在實習前我看了很多書,幾乎把市面上能找到的交互設計相關書籍都看了一遍,但去了之後才發現,很多東西書上,根,本,沒,有!書上有的,只有原理類的東西,大量重要的實踐的東西書上沒有。我也不知道到底是寫書的大神不會寫,還是大神不屑寫,總之就是讀書的成長很慢,但當時我不這麼認為,我覺得我看了這麼多材料,應該足夠牛逼了吧?

但事實是,雖然自己覺得自己懂了好多,能夠成為一個設計師了,但實際上還差了很遠。

面試時候,老大問我,為什麼按鈕上是「登陸」而不是「登錄」?我啞口無言,之前沒有考慮過。

遇到一個項目,設計出來老大說可用性有問題,我按照原理一對比,沒有問題啊?

有個地方要埋點,我想來想去,應該埋哪些點,不會。。。

有個表格我重新進行了設計,我覺得按我的做法體驗不錯,拿去給產品經理一看,產品經理:」呵呵,不做「

當然,我也不是說一定不要看書,但看書的效果實在很有限。

總而言之,交互設計一定要去業界,哪怕是小公司實習一下,也比看了幾百本書強,親身體會,希望大家都能少走彎路。


hi~

1.專業知識:可以去網上搜索一下交互設計的一些書籍,這裡不說了,百度一下很多,看一些心理學也很有幫助;

2.實踐:先找一款自己喜歡的或者常用的產品,剛開始做一款簡單點的,結構沒那麼複雜,容易上手,容易拆解,然後:從頭到尾過一遍,把所有能點擊的都點了,看看別人是怎麼做的。然後把功能記下來,自己樹立整款產品的結構,就跟你平時寫軟體的menu tree一樣,一級一級往下挖;

然後你肯定躍躍欲試,拿起紙張,把該款產品從頭到尾畫一遍,看自己思考得是否充分,把漏掉的補上,慢慢熟悉掌握。
一定要在犯錯中學會去總結,比如:你剛開始肯定會納悶,為什麼總是會漏,這些多做幾次就掌握了,一定要學會掌握其背後的規律,用自己的方式去掌握。要跳出用戶的位置去思考,逆向思維很重要。

3.占坑,後續想到補充。

我也是新人,以上就是我自學的方法,有好的方法記得回來分享。

祝好~


梨子看作者是計算機信息與計算科學專業,所以梨子想推薦一個互聯網交互設計的一個案列給大家參考。希望能對大家有所幫助。

關於互聯網產品設計的方法,在這裡我想挑了幾個講給大家聽。

第一個:不要讓我思考。


這是一個在交互設計中非常重要的原則,用戶是不願意思考的。用戶做每一個操作的時候,它的行為是唯一確定的,你不能給他太多選擇,或者讓中他有思考時間。因為只有當用戶不需要思考去操作,他才會感覺這個操作過程是流暢的。其實用戶體驗對用戶來說是一個非常難表達的東西,他沒有辦法告訴你什麼是好的用戶體驗,對他來說好的用戶體驗就是能夠很流暢的完成這個操作,在這個操作過程中沒有太多的顧慮和太多的困惑。

例如下面這個產品就是一個好的體驗:

這是一個我們常見的電商平台的購買流程,你會發現不同的電商平台會有一個共同的設計地方。他會在這個網頁的上方做一個支付流程的說明,然後用戶會知道我要完成這個支付需要幾步過程,我現在在哪步,還需要哪個步驟可以完成這個支付。這個行為可能對於現在的年輕人來說是多餘的。但是你要知道互聯網還要面對很多年齡很大的用戶,或者說每年會有很多新增用戶。這就是一個不需要讓用戶思考的設計。

第二個:減少用戶的操作


當這個操作行為能用兩步完成,就不要把他設置為三步。每多一次操作就會流失一半的用戶,所以好的產品在設計的時候它不會讓你做很多繁瑣的操作。

下面我們還是舉一個非常常見的「栗子」。

現階段,主要的第三方支付工具,一個是微信一個是支付寶。

在這兩個產品設計中有所不同,微信它的所有操作都是輸入密碼這個過程,但支付寶需要有一個付款,這個設計是有經歷討論,它到底有沒這個必要的,而大部分人認為是多餘的,現在這個操作已經不需要了。

然後你會發現支付密碼這個行為是很複雜的,特別是小額支付。

所以微信和支付寶推出一個功能叫指紋支付,當然前提是你的手機必須有指紋支付這個功能,通過指紋支付完成輸密碼這個過程,這就是在減少用戶操作。你會發現支付寶在這個過程中做的更加巧妙,它可以小額免支付,它讓這個支付的行為變得越加簡潔。

第三個:超出用戶預期


一個基本產品是達到用戶預期,一個好的產品是超出用戶預期,當你的產品超出用戶預期的時候,用戶會有一種很舒服的感覺。


我們來看這麼一個設計,就是滴滴打車和快滴打車,當然現在已經合併了。在兩三年前,他們還在白熱化的競爭的時候,它們在產品設計上面是有高低的。

例如這個場景,用戶在打車的時候會遇到打不到車的情況,滴滴和快滴都推出了他們的新的產品——專車。在用戶打不到車的時候,他們會推送一個信息,「你要不要試一下專車服務?」。

快滴會彈出這麼一個彈窗,彈窗會告訴你要不要試一下專車,他就是一個很簡單的文字。這算是一個中規中矩的設計,它沒有超出用戶預期。

滴滴會彈出,「打不到車,試試專車」。下面附上三條信息,第一條信息是本次行程車費預估為多少錢?這個信息非常貼心,因為專車對你來說是一個新事物,你會考慮到會不會花你很多錢,這個時候你就會猶豫,那在這個時候他已經給你一個明確的信息你大概要花多少錢。第二條信息是你還有多少錢的專車卷可用。他會告訴你你可以享受這麼一個折扣,你要不要用?第三條信息是附近有多少輛專車正在等待為你服務。他會告訴你打不到車不要擔心,你附近有很多專車。

這幾條信息其實都超出了用戶預期,當用戶了解到這些信息的時候,他明顯會感覺到我應該試一試。所以底部的文字是「取消打車」和「去看看」。去看看是一個很輕鬆的用詞,他會讓你覺得為什麼我不去看看呢。所以這樣的設計會讓用戶轉化率明顯增加。

......


1、了解產品從0到1的整個過程

2、了解交互設計師在產品開發過程中所處的位置與輸出的內容

3、查看交互設計書籍

4、按照應用類型,學習其設計

5、根據自己前面所積累的知識設計一款應用

6、參與真實項目,在項目中運用與反思前面所學的知識

下面展開說明:

1、產品從誕生到上線經歷了:

A、產品概念的提出

B、市場調研

C、用戶調研(定量/定性)

D、競品分析

E、頭腦風暴(在每個階段都有,提出產品的創新點/產品方向等,然後收斂篩選信息)

F、提出產品的功能點與創新點

G、定義產品(針對哪一類人群的一款什麼樣的產品,主要解決這類人群什麼樣痛點)

H、 明確商業目標與用戶目標

I、產品框架設計

J、產品原型設計(低保真)

K、視覺風格設計(高保真)

L、前端開發

M、後台開發

N、測試(A/B測試等)

O、1.0上線

ps.從設計到開發是一個循環往複的過程,會經過多次修改

2、交互設計師在產品團隊中所處的位置與輸出的內容

位置:

處於產品的上游階段,參與產品的前期討論(不同的公司這點有所不同)ps.交互設計師應該是除了產品經理外最了解產品的人,後面會解釋

大致位置關係–––a.產品經理(大公司一般在產品經理與交互設計師之間會有 用研人員)/b.交互設計師/c.視覺設計師/d.前端工程師/d.後台工程師/e.測試人員

輸出:

根據產品經理的需求文檔設計產品頁面與功能,給視覺設計師輸出標準的低保真交互原型(頁面的跳轉,特殊情況的考慮,主要按鈕的突出等等都要標註說明,小公司的話可以面對面去說,會減少溝通成本,也便於視覺設計師理解你的原型)

所以說前面說交互設計師是除了產品經理外最了解產品的人,因為你不但要自己弄清楚產品的各種頁面跳轉與功能主次的區分等,還要給其他開發人員講清楚說明白;除了輸出交互原型外,還要跟進開發,看開發出來的產品是否跟你設計的產品有無偏差

如:前端開發出來的動效、頁面的跳轉方式、內容的展開方式等,是否跟你設計出來的一樣(ps.這裡需要在設計的過程中考慮到開發的難易程度,因為前期需要快速上線,你前期設計盡量簡單/直接的解決用戶的問題,這樣也便於開發的快速完成)

3、看交互設計書籍

這裡只推薦我看過的(沒看過太多 ——!)

推薦書籍有:

前期可以看:《破繭成蝶》、《簡約至上》這兩本主要特點:簡單、易懂適合初學人員

中期可以看:《交互設計沉思錄》、《用戶體驗要素》、《點石成金》、《方寸之間》

後期可以看:《交互設計精髓4》(這本就比較難了,看著比較吃力)

4、按照應用類型,學習其設計

學習其他應用設計有一個前提就是:搞清楚這個應用主要針對哪類人群,這個應用的使用場景是什麼樣的(ps.因為我知道在交互設計師的前期階段,一般會參考現有產品的設計來做,但是這樣做的結果是換湯不換藥,因為你沒有搞明白別人為什麼要這樣設計,是基於什麼樣的使用場景?是針對什麼樣的人群?)

所以在學習一個產品的設計前,要先搞清楚這個產品的定義是什麼?針對的用戶是什麼?用戶的痛點是什麼?解決的問題是什麼?產品的商業目標是什麼?它的持續盈利點是什麼?

之後再來學習其產品的設計,交互的邏輯,用戶的體驗點等等

5、根據自己前面所積累的知識設計一款應用

這點我就不展開說了,因為 @ 寺主人如何成為交互設計師?在這個問題下答的非常好了,我去年就是跟著她的方法學的,心存感激

6、參與真實項目,在項目中運用與反思前面所學的知識

經過前面的學習,你應該接觸一些真實的項目了(同樣也可在真實項目中學習,不要等到啥子都準備充分了才去,因為這樣會效率低下)

在項目進行的過程中你會遇到各種各樣的問題,如各種特殊情況下的交互設計(斷網、網路的切換等等)/彈窗設計(模態、非模態)/交互手勢設計/選擇按鈕中的單選與複選設計/按鈕的大小與位置設計等等,你全部要考慮清楚

頁面上的每一按鈕,每一個文字甚至每一個符號都要有存在的道理(原則:能少則少),當你遇到這些問題之後,你針對某一個問題在網上搜索基本都有相關的解答;在解決了一個又一個的問題後,我相信你輸出的原型會更加完善,更加富有邏輯與道理。

第一次正式回答問題,其中不足之處請海涵,希望能幫助到想學習交互設計的朋友,謝謝。


1.系統性:從頭到尾完整地參與整個產品生命周期,從項目組各個角色身上都能學到你所欠缺的知識;
2.同理心:the user is not like me,明確用戶是誰,要做什麼,我們能為他解決什麼,如何解決;
3.知識面:設計來源於生活,並不局限於「設計」學科本身,天文地理歷史政治生活……一切都可以成為靈感的來源,擴大知識面,同時可以學點心理學,強烈推薦戴維邁爾斯的《社會心理學》,畢竟人機交互學,我們服務的對象是「人」。


交互設計,除了自學,還有其他有效的方式嗎?


自學交互設計的小白嘗試答一下~

在看過了一些專業書籍和設計方法、分析思路之後,自己做了點設計的小嘗試,發現進步會更快一點,主要從自己感興趣的問題出發,思考解決方案,形成設計思路,輸出設計成果

設計成果首載於專欄:

受不了各大音樂播放app紛繁複雜的首頁推薦,我給網易雲音樂設計了情緒模式

以下為複製的原文(具體功能的gif動效無法查看,可移步專欄查看):

【受不了各大音樂播放app紛繁複雜的首頁推薦,我給網易雲音樂設計了情緒模式】

在開始設計之前我想弄清楚問題到底是什麼:

為什麼App Store上主流音樂播放App的首頁推薦都如此複雜?

1.產品的目標。

首先,從音樂播放器的發展來看,自傳統純粹的PC端音樂播放器發展到現在,產品人對於移動端的音樂播放器已經不是純粹的播放器,而是集線上聽歌、評論、分享、電台、社群組織運營、線下演唱會和私人音樂服務為一體的綜合平台。其次,每一款app都是商業目標和用戶目標的平衡,誠然用戶似乎更喜歡用完就走的「工具」,但是好的產品不能僅僅是「工具」。

2.滿足更多樣的用戶。

首頁上有「推薦MV」、「推薦專欄」、「精選專欄」、「推薦歌單」、「獨家放送」、「最新音樂」、「主播電台」等欄目。多樣的欄目設置理論上能夠提供足夠的內容來「消費」。

3.頁面組織。

會不會不是信息的量出了問題,而是信息的組織方式呢?不同欄目都採取類似的圖文結合方式,彼此之間區分度不大,用戶憑藉文字來區分不同的欄目。這是我想到的可能問題。

&<網易雲音樂的首頁截圖&>

目前的做法有什麼問題?

1. 把大量的內容集合到一起就能滿足大量的用戶嗎?這是否充分考慮到了用戶的使用場景?什麼時候哪些用戶會使用有這麼多推薦內容的首頁?能不能分類考慮不同用戶使用首頁的場景?

2. 假設仍需要這麼多的內容(如業務需要),有沒有別的信息組織方式來簡化用戶的行為路徑。

用戶的任務流程

假設大多數用戶使用音樂播放App的目標是聽到一首心儀的歌曲。那麼大多數用戶可以分為有明確目標的用戶和無明確目標的用戶,針對有明確目標的用戶,其行為邏輯是根據歌曲的名稱、歌詞、歌手、旋律等相關線索查找歌曲;而針對無明確目標的用戶,他需要通過瀏覽一些選項來尋找,這是首頁推薦存在的一部分意義,但是尋找的過程是有一定邏輯的,很多App會基於場景來讓用戶選擇可能適合的歌曲,我相當贊同這樣的邏輯,但是場景的篩選是否還有更深層次的邏輯呢?

&<用戶使用時的任務流程&>

為什麼要做情緒模式?

從前文的分析來看,我認為首頁對於用戶的價值在於提供給無目標用戶以選擇。但是如何引導用戶的選擇?如何讓用戶更「自然」的選擇是我的一個設計出發點。

因而,我開始思考關於音樂為什麼存在?從音樂的發展來看,在人類還沒有產生語言時,就已經知道利用聲音的高低、強弱等來表達自己的意思和感情。而最原始的音樂雛形是,隨著人類勞動的發展,逐漸產生的統一勞動節奏的號子和相互間傳遞信息的呼喊,以及當人們慶賀收穫和分享勞動成果時,往往敲打石器、木器以表達喜悅、歡樂之情。而至今,我們在聽一首歌曲或音樂會時,我們想要獲得的難道不也是情感上的共鳴嗎?無論是放大我們的一種情緒還是緩和一種情緒。因而,在想清楚人們聽一首歌的預期後,打算以情緒作為我分類歌曲的標準,方便無目標的用戶尋找符合此刻心情的歌曲。

什麼樣的情緒模式?

1.情緒模式只是針對網易雲音樂的一個備選模式。

因為該模式針對的使用人群僅僅是一小部分人群,即以獲取情感共鳴為目的的無明確目標人群(好拗口23333)。具體的任務流程見下圖:

2.長按「聽歌識曲」按鈕切換

理由是目前該按鈕的使用率不高,但是確實是相當重要的一個功能,將切換入口預知合理的結合,可以充分利用這一個按鈕,需要注意的是最初的操作需要合理的用戶引導。

3.界面設計的思考

最新的心理學研究表明人類的基本情緒只有快樂、悲傷、恐懼和憤怒四種(英國格拉斯哥大學,2014年),基於這四種情緒,分別用紅、藍、紫、黃四種顏色對這四種情緒進行表徵(因為從認知心理學的角度而言,色彩對於視覺的影響先於形狀)。並採用這四種顏色對歌單和單曲進行圖片處理,以表達出歌曲的情緒。

導航欄仍保留搜索欄、播放器按鈕、新增返回按鈕;上部分採用頭圖的形式推薦編輯精選的歌單;下部分是可選單曲;底部為工具欄,提供篩選工具和查看播放列表的按鈕。(借鑒了Apple Music強化專輯封面圖的組織方式)

4. 搜索功能

利用網易雲音樂強大的用戶評論,通過描述你此刻的心情,可以「搜一搜有多少人和你一樣難過」,點擊查看別人的故事,聽聽他正在聽的歌,會不會感覺你的悲傷並不孤單呢?

5.左右滑動查看歌單

頭圖的位置上提供編輯精選的情緒歌單,左右滑動可查看,提供給用戶更簡單的選擇方式。

6.15s單曲試聽

用戶在選擇歌曲的過程中不期望被打斷,以往的試聽都是點擊後至播放器中播放,如不滿意還得返回上一頁面,增加了用戶的「挑選成本」。採用長按15s試聽的方式,覺得滿意後再添加至播放列表,使得用戶的篩選過程更加簡單順暢。

7.篩選工具

採用色彩滑塊的方式,可以迅速篩選符合自己情緒的單曲,方便用戶快速選擇,同時方便用戶定製多元的情緒歌單。

ps.本身對於網易雲音樂還是很滿意的,只是想嘗試下更多的可能性。

pps.知乎的GIF大了之後各種糊掉,只能犧牲清晰度了,不知道表達清楚沒。


交互設計起源於網站設計和圖形設計,但現在已經成長為一個獨立的領域。現在的交互設計師遠非僅僅負責文字和圖片,而是負責創建在屏幕上的所有元素,所有用戶可能會觸摸,點按或者輸入的東西:簡而言之,產品體驗中的所有交互。

這篇文章對有興趣學習更多關於交互設計的知識的人來說是一個很好的起點。我們將會簡要討論交互設計的歷史,相關的指導原則,值得關注的貢獻者,以及有關這個迷人學科的工具。

一、什麼是交互設計?

交互設計(IxD)定義了交互系統的結構和行為。交互設計師努力在用戶和用戶使用的產品或者服務間創建有意義的關聯,不管是從電腦到移動設備,家用電器或者其他。我們的實踐會與世界一同不斷發展。」——交互設計協會(IxDA)

從第一台用來容納靜態副本以外的信息的屏幕被設計出來的那天開始,交互設計就開始了。從按鈕,鏈接到表單的一切都是交互設計的一部分。在過去的幾十年里,有許多相關的書已經出版了,這些書解釋了交互設計的方方面面,並探索了交互設計與體驗設計間交叉和重疊的多種方式.

交互設計的發展幫助和促進了人和他們所在的環境之間的相互作用。不像用戶體驗設計那樣佔據所有面向用戶的系統,交互設計師只關心用戶和屏幕之間的特定相互作用。當然,在實際中從來不會如此清楚地劃分開來。

二、常見的交互設計方法

儘管交互設計跨越了無數類型的web和移動應用程序和網站,有一些固定的方法是所有設計師都可以依賴的。我們將探討一些比較常見的方法:目標驅動設計,可用性,五個維度理論,認知心理學和人機界面指南。

1.目標驅動的設計

目標驅動的設計是由艾倫·庫珀在他的著作《囚犯正在逃出庇護:為什麼高科技產品讓我們瘋狂,如何恢復理智》(出版於1999年)中推廣的。艾倫定義了目標驅動的設計是指把解決問題作為最高優先順序的設計過程。換句話說,目標驅動設計首先關注滿足終端用戶的具體需求和慾望,而不同於舊的設計方法只是專註於技術側上的能力。

今天來看,艾倫提出的一些觀點是顯而易見的,因為設計師很少會選擇設計完全受制於技術發展約束的交互。然而,其核心的方法是滿足最終用戶的需要並想要的,也就是說就這一點對現在和曾經都是一樣必要的。

根據艾倫所說的,目標驅動的設計過程,需要作為交互設計師的我們進行五個思維方式的轉變。

1)先設計,再編程。換句話說,目標驅動的設計首先要考慮用戶如何與產品交互,而不是以技術因素開始。

2)獨立開設計和編程的負責。這其中的必要性是,這樣可以使交互設計師可以盡量擁護用戶,而不去擔心技術限制。一個設計師應該信任他或她的開發人員來處理技術方面的問題,事實上艾倫建議如此,否則會把設計師放在利益衝突的位置。

3)設計師要對產品質量和用戶滿意度負責。雖然利益相關者或客戶會有各自的目標,交互設計師出也對任何在屏幕的另一邊的人有責任。

4)為你的產品定義某個特定的用戶。這個想法已經發展成為現在用戶研究最通常的東西:角色模型。然而艾倫依舊不斷提醒我們要把角色模型關聯回產品,不斷問自己:這個用戶會在哪裡使用這個產品?他或她是誰?他或她想要完成什麼目標?

5)結對工作。最後一點是,交互設計師不應該獨自完成工作,而應該與他人協作,艾倫稱其為關鍵的「設計溝通者」。雖然作為設計溝通者的艾倫,在1999年時的設想不過是一個典型的旨在提供營銷產品副本的廣告文字撰稿人,但到今天已經設計溝通者擴展到了包括項目經理、內容策略師、信息架構師等在內的許多其他人。

2.可用性

可用性感覺起來可能是一個模糊的概念,但其核心只是設計師的一個簡單問題——「是不是誰都可以輕鬆使用這個產品呢?「。這個概念在無數的書籍和網路文章上解釋過,我們將回顧一些不同的定義來發現一些共同的主題和細微的差別:

在艾倫迪克斯,珍妮特芬利,拉塞爾比爾,格里高利阿柏德幾個全著的書《人機交互》中,可用性被劃分成三個原則:

易學性:新用戶學會在系統中導航的容易程度如何?

靈活性:有多少種方法可以實現用戶和系統的交互?

魯棒性:我們對用戶面對他們的操作錯誤時的支持做得怎麼樣?

與此同時,由尼爾森和施耐德曼所解釋的可用性是由五項原則構成的:

易學性:新用戶學會在系統中導航的容易程度如何?

有效性:用戶執行任務的速度如何?

記憶性:如果一個用戶一段時間沒有訪問系統,他們對界面的記憶程度如何?

錯誤度:用戶一共犯了多少錯誤,從錯誤中恢復的速度如何?

滿意度:用戶是否喜歡他們所使用的界面,以及他們是否對結果滿意?

最後,國際標準(ISO 9241)也把可用性這個詞也分解成五項原則:

易學性:新用戶學會在系統中導航的容易程度如何?

可理解性:用戶對他們所看到的界面的理解程度如何?

可操作性:用戶對界面的控制程度如何?

吸引度:界面在視覺上的吸引程度如何?

易用性的依從性:界面是否遵循了標準?

顯然,在這些解釋中,我們能看出構成可用的界面是有一些共同的主題的,無論一個設計師依據的是哪條原則,在設計任何界面的時候可用性都是一個重要的考慮方面。

3.五維度理論

在比爾莫格里奇的訪談書籍《設計交互》中,吉莉安史密斯,一位交互設計學者,介紹了關於「交互設計語言「的四維空間的概念,。換句話說,這些維度能夠構成交互本身,因此它們最後形成了用戶和屏幕之間的溝通。原來的四個維度是這樣的:話語,視覺表徵,物體或空間,以及時間。最近,凱文西爾韋,一位IDEXX實驗室的資深交互設計師,增加了第五個維度,行為。

一維:話語應該盡量易於用戶理解,用這樣一種方式表達使信息能夠輕鬆傳達給最終用戶。

二維:視覺表徵一般都是圖形或圖像,基本上就是指一切非文本的東西。他們應該適量地被使用,而不是壓倒。

三維:物理對象或空間指的是物理硬體,無論是滑鼠和鍵盤,或者任何用戶能與之交互的移動設備。

四維:時間是指用戶與前三個維度交互所花費的時間長度。它也包括用戶可能的用來衡量進展的方式,包括聲音和動畫。

五維:凱文西爾韋在他的文章《交互設計中的設計》中增加了行為這個維度。這是指用戶與系統交互時產生的情緒和反應。

通過使用這五個維度,交互設計師可以非常專註於用戶與系統通信和連接時的體驗。

4.認知心理學

認知心理學是關於大腦如何工作,以其發生的心理過程的研究。根據美國心理協會的定義,這些過程包括了「注意力、語言的使用、記憶、感知、解決問題,創造力和思考」。

雖然心理學是一個非常廣泛的領域,認知心理學尤為重視其中的某些關鍵的元素,實際上,這可能幫助了交互設計領域的形成。唐諾曼在他的書《日常生活的設計》中提到了其中的很多概念。以下只是那些概念中的一部分:

1)心理模型是指的在用戶心中的一幅景像,使他們產生了對特定的交互或系統的期望。通過學慣用戶的心智模型,交互設計師可以創建出使用戶有直觀感覺的系統。

2)界面隱喻是指利用已知的行為來引導用戶產生新的行動。例如,大多數計算機上的垃圾桶圖標都類似於現實中的垃圾桶,這是為了提醒用戶做出預期的行動。

3)功能可見性是指界面元素不僅是為了達到功能而設計出來的,而且也是為了讓它們看起來像是可以達成功能而設計出來的。例如,按鈕看起來像一個可以按的物體,這就是一個功能可見性的設計,使得不熟悉按鈕的人仍能理解如何與之交互。

5.人機界面指南

這部分內容其實有點不恰當,實際上是沒有一整套完整的人機界面指南的。然而,創建人機界面指南背後的理念本身就是一種方法論。準則是由主要的技術設計企業,包括蘋果和安卓、Java和微軟等構建的。他們的目標都是一樣的:用這些建議和推薦來提醒未來的設計師和開發者,這將幫助他們創建普遍意義上直觀的界面和程序。

三、日常任務和可交付成果

在整個開發過程中交互設計師是一名關鍵的球員。他或她從事的一系列的活動都是項目團隊的關鍵。這些活動通常包括形成設計策略、將關鍵交互做成線框圖,以及將所有交互建立為產品原型。

1.設計策略

雖然這個將會物的界限比較模糊,但有一點是肯定的:一個交互設計師需要知道自己在為誰設計,以及用戶的目標是什麼。通常情況下,這些信息會用戶研究員提供。然後,交互設計師在獨立或者受到團隊中其他設計師的幫助的情況下,將會評估目標並形成設計策略。好的設計策略將幫助團隊成員對在哪些需要的地方應該發生什麼樣的交互有一個共同的理解,以方便用戶目標。

2.關鍵交互的線框圖

交互設計師在用於激勵其設計的設計策略上有了好主意之後,就可以開始畫草圖,畫出那些可以促進必要交互的界面。交互的妙門藏在細節中:在這個過程中,有一些專家會直接在紙板上素描,而有些則使用在線應用程序來幫助他們,而有的則會使用兩者的組合。有一些專家會協同工作來創建這些界面,而有的則獨自創建。這一切都取決於交互設計師自己的特定工作流。

3.原型

根據項目的需要,交互設計師的下一個合乎邏輯的步驟可能涉及到創建原型。團隊製作交互原型有許多不同的方法,比如html/css原型,或紙上原型,在這裡,我們不會覆蓋廣泛的細節。

4.保持流行性

對一個現實中的交互設計師來說,最難的部分是適應工業發展變化的速度。每一天,新的設計師都可能要在不同的方向上看待媒介。結果便是,用戶也會預期這些新類型的交互會出現在你的網站上。謹慎的交互設計師會響應這種演變,不斷探索在線交互以及利用新技術,但是我們總是要記住正確的交互或技術是最好地滿足角色用戶的需要的那些,而不只是最新穎或最令人興奮的那些。交互設計師還通過在推特上跟隨交互設計的思想領袖(比如下列的著名設計師)並主動推動媒介本身的發展,以保持流行性。

四、著名的設計師

從左到右,從上到下分別是:

ALAN COOPER,BILL SCOTT,BRAD FROST,BRENDA LAUREL,BRENDA SANDERSON,

DAN SAFFER,DON NORMAN,KAREN MCGRANE,KIM GOODWIN,MAT MARQUIS,

MIKE MONTEIRO,THERESA NEIL,WHITNEY HESS

譯者註:此處篇幅過長,因而對設計師作了聚合,可在原文中查看詳細個人說明。

五、工具

交互設計師使用許多不同的工具來完成他們的工作。無論是在一張餐巾紙上畫交互草圖,還是向客戶展示原型,他們的目標都是一樣的:通過對話來溝通。交互設計師最需要的就是溝通。下面的列表裡是一系列用於促進對話的工具。記住,最終創建的web界面,通常與面向用戶的(前端)技術完成的,比如CSS / HTML。

1.BALSAMIQ MOCKUPS

Balsamiq的界面簡單,使用手繪風格元素和comic sans字體,使得製作交互線框圖的過程變得簡單,可以認為它是一個在線版的紙上原型!

2.INVISION

InVision是一個免費的網站和移動app的原型工具。InVision旨在通過結合Photoshop,Sketch等其他應用促進溝通。設計師可以上傳線框圖,並通過熱區來連接它們。客戶、利益相關者和他的同事設計可以直接添加評論,並有實時演示工具LiveShare。

3.OMNIGRAFFLE

Omnigraffle是OSX上的交互設計師可以利用的圖表軟體,用單調的審美創造的圖表軟體Omnigraffle更關注背後的交互設計而不是設計本身,同時其也具備許多優秀的模擬功能。

4.PATTERNRY

沒有人願意浪費時間重新發明輪子。良好的交互設計或代碼聚合在一起更能節省時間和精力,並確保設計的一致性。Patternry是一種允許團隊交互設計師分享並將其設計和代碼資產存儲在一個中央位置的工具。

5.SKETCH

Sketch是一種設計工具(Mac),最好用於圖標的中高級保真度模型,是一個Adobe Photoshop的一個輕量級替代。

6.AXURE

Axure RP可以說是市場上最好的交互設計工具。比Balsamiq擁有更強大的功能,內置的協作和共享功能,並且能夠輕鬆地實現線框原型。缺點是,它可能提供了太多,這意味著它有一個緩慢的學習曲線。

7.UXPIN

UXPin是一個協同設計平台,支持低保真的線框圖和高保真的動畫原型。設計師使用Photoshop或Sketch製作的分層原型可以直接導入,然後從利益相關者處得到反饋。該工具還包括可用性測試和現場演示功能。

六、協會和組織

不管交互設計師是否屬於任何特定的組織,其仍然是一個交互設計者。不過,找到其他設計師的網路是向他人學習的好方法。這些協會在美國都有,有一些則是國際性組織。

1)IXDA-Interaction Design Association

交互設計協會,其提供了一個討論交互設計問題的在線論壇。

2)AGIA-American Institute of Graphic Arts

美國平面藝術學院,組織中的平面設計師更經常地為新媒體設計作品,交互設計在其中扮演了重要組成部分。

3)MEETUP-http://meetup.com

在Meetup界面搜索「交互設計」和你的城市,你會發現一定數量的網路群體,教育組織和社會團體。

七、書籍

其實相關的交互設計書籍列表可以佔掉好多頁。在這裡,我們縮小成幾本標誌性的圖書的列表。如果你真的渴望擴大你的圖書收藏,可以看看我們網站搜索用戶體驗的推薦書集。

從左到右依次是

《交互設計:創建創新應用和設備(第二版)》,

《設計數字時代:如何創建以人為本的產品和服務》,

《設計界面》,

《交互設計:超越人機交互》,

《日常生活的設計》,

此外還推薦《點石成金》。


個人的微信公眾號,經常會在上面上傳分享自己平時寫的產品交互設計方面的心得和感悟,歡迎關注


我是從今年年初開始學習交互設計的,作為一名菜鳥,也談談下感受。

首先要感興趣。

我平時喜歡下載各種手機APP研究,看有沒有比較好的軟體。

其次,學交互設計是否考慮換行。或者不換行是否在平時工作中能用到。我是因為在工作中能用得到才學習。

第三,如果以上兩點都滿足,那就系統的學習吧。

我最早在優設網上報了一個零基礎交互設計師培訓班,對交互設計及這個崗位有了個大致的了解。

最近發現網易上也有一個交互設計師的培訓班,也不錯,培訓時間比較長。

入門之後就是熟練掌握了,提升技能。

軟技能:同理心,溝通能力。

硬技能:會使用原型設計工具,我用的是Axure和MockPlus,所處行業特殊,也不是專業做交互設計,平時用MockPlus就夠了。軟體做的效果達不到Axure那麼好,但一直在更新中,能導出各種形式的文件便於分享。平時多看寫設計類的網站,下載一些APP體驗。

交互設計一般輸出低保真原型圖,如果能再有時間學習下視覺設計,最終可以做出高保真原型圖就完美了,找工作你會更有優勢。


1.每天下載2到3個app,分析其組織架構和業務流程圖,並整體分析優缺點,提高自己的洞察和總結能力。必要的時候看別人的分析。
2.看經典的規範,熟悉到閉上眼就能記住每一條,並在各種app找出經典案例,可包括正面和反面例子。
3.找到實際的交互工作,反覆鍛煉驗證總結,帶著問題去看書和教程,這樣更有深刻的印象。


自己做了一個專欄,然後寫了一些關於交互設計的文章。感興趣的話,可以看一看。


首先,考慮清楚你是否對交互設計感興趣,如果真的非常喜歡你可以參考各大招聘網站對交互設計師的要求,按照這些信息補充個人能力

1溝通能力,交互設計更多時候需要和不同崗位同事溝通協助,良好溝通是前提。

2專業技能,這個其實可以通過書籍,論壇,一些資深前輩博客學習(這些順便一搜很多就不推薦),然後平時躲觀察,收集你認為好的設計,分析其背後思考的要點。

3同理心,交互設計需要分析用戶的心理,多揣摩目標用戶使用時的心理和場景,最好能夠多和真實用戶交流。

4嘗試練習,例如可以將你非常喜歡的app進行拆解,繪製流程圖,然後思考別人為什麼這麼設計,如果是你會怎麼做?(切記結合場景和用戶目標)

5找相關公司實習,實踐才是最快成長途徑,多和pm,技術,測試同事溝通。你也可以先從交互設計或產品助理之類職務慢慢嘗試,有一定經驗在找合適的交互設計崗位。


其實各樓發的很多原型設計,思維導圖都是表達輸出方式之一,這個都不是難事,半年專研你就可以很熟練,網路教程多如米。

首先您必須具備良好的溝通能力和非常不錯的理解能力這是其一。

另外在中小公司交互對接PM和UI以及程序員,很強的邏輯性和較高的情商則有助於提升您做交互設計時候所花費的時間和精力,這是其二。

最後交互設計並非只是特指的互聯網產業的設計。很多行業比如汽車、服務體驗,也均有交互設計崗位的存在。


推薦閱讀:

作為一名交互設計師應該如何學習 Processing?
為什麼 Mac (OS X) 沒有剪切文件和右鍵新建文件功能?
微軟、谷歌、蘋果的設計語言分別有何優劣?
從交互設計的角度為一座1000層的大樓設計電梯按鈕?

TAG:交互設計 |