非設(shè)計專業(yè)的學(xué)生,如何系統(tǒng)的學(xué)習(xí)交互設(shè)計

4 評論 21559 瀏覽 160 收藏 16 分鐘

曾經(jīng)我也是一名非設(shè)計專業(yè)的學(xué)生,作為自動化專業(yè)的碩士希望自學(xué)做交互設(shè)計,有很長一段時間都抱有這樣的疑惑“如何系統(tǒng)的學(xué)習(xí)、提升交互設(shè)計能力”。所以多次翻出這個問題,反復(fù)咀嚼過@王閱微、@朱晨 的回答,從中找出我缺乏的、忽略的技能去繼續(xù)補足、努力。

現(xiàn)在從事交互設(shè)計工作已有三年時間,希望通過回答這個問題,來對以往獨自摸索、自學(xué)路上的一些經(jīng)驗、心得做個總結(jié)。如果能給當(dāng)前期待從事交互設(shè)計的新朋友些許指引,那就更圓滿了。

一、理論知識積累

理論書籍

《用戶體驗要素:以用戶為中心的產(chǎn)品設(shè)計》

講述了經(jīng)典的五層框架:戰(zhàn)略層(產(chǎn)品目標(biāo)和用戶需求)、范圍層(功能規(guī)格和內(nèi)容需求)、結(jié)構(gòu)層(交互設(shè)計和信息架構(gòu))、框架層(界面設(shè)計、導(dǎo)航設(shè)計和信息設(shè)計)、表現(xiàn)層(感知設(shè)計)??梢詫ヂ?lián)網(wǎng)產(chǎn)品經(jīng)理、交互設(shè)計師、視覺設(shè)計師之間的工作流程、職責(zé)有個初步的認(rèn)識,在后續(xù)學(xué)習(xí)中也大致明白重心該放在哪個環(huán)節(jié)。

《點石成金:訪客至上的網(wǎng)頁設(shè)計秘笈》

介紹了don’t make me think 的幾個指導(dǎo)原則 以及可用性測試,一本小書比較容易理解。

《認(rèn)知與設(shè)計:理解UI設(shè)計準(zhǔn)則》

介紹了一些用戶界面設(shè)計準(zhǔn)則。對于新人來說,常常不知道哪些設(shè)計是易用的、用戶容易接受的,所以了解一些設(shè)計原則可以有助于我們辯證的思考各種設(shè)計方案之間孰優(yōu)孰劣。

《About Face 3 交互設(shè)計精髓》

經(jīng)典書籍,厚厚一本很難讀完。對于新人來說,可以隨便翻翻,先看看目錄,找那些自己感興趣的、疑惑的章節(jié)讀一讀。

《設(shè)計師要懂心理學(xué)》

介紹人的一些習(xí)慣,如何觀察、閱讀、記憶、思考、集中注意力等等很多方面。了解與我們的設(shè)計方案交互操作的用戶,是設(shè)計師需要持續(xù)關(guān)注的。

實戰(zhàn)書籍

《寫給大家看的設(shè)計書(第三版)》

通過大量示例介紹了4大基本設(shè)計原則——親密性、對齊、重復(fù)、對比,這些原則在界面排版上非常實用。作為非設(shè)計專業(yè)的學(xué)生來說,學(xué)習(xí)一些基本的原則很有必要。

《設(shè)計之下:搜狐新聞客戶端的用戶體驗設(shè)計》

結(jié)合搜狐新聞客戶端的項目經(jīng)驗,總結(jié)了很多干貨,對于新手可以從中了解實際的設(shè)計流程。

《破繭成蝶:用戶體驗設(shè)計師的成長之路》

一本實用性非常高的書,強烈推薦。其中需求分析、設(shè)計規(guī)劃這兩章剛好解決了我的一些疑惑,反反復(fù)復(fù)讀了很多遍,非常有收獲。感謝@劉津、@李月 的辛苦撰寫、無私分享。

《移動應(yīng)用UI設(shè)計模式》

關(guān)于設(shè)計模式的一本書,我讀過之后寫了幾篇讀書筆記,對書中的設(shè)計模式配上平時搜集的例子以加深理解,比如這篇移動應(yīng)用UI設(shè)計模式——(1)導(dǎo)航

《觸動人心:設(shè)計優(yōu)秀的iPhone 應(yīng)用》

如果對iPhone設(shè)計感興趣,可以讀讀這本書,雖然現(xiàn)在看來例子有些舊,但是也不妨礙我們?nèi)ダ斫饽切﹥?yōu)秀的設(shè)計例子。

設(shè)計規(guī)范指南

iOS 8 人機界面指南

[ISUX轉(zhuǎn)譯]iOS 8人機界面指南(一):UI設(shè)計基礎(chǔ)

[ISUX轉(zhuǎn)譯]iOS 8人機界面指南(二):設(shè)計策略

[ISUX轉(zhuǎn)譯]iOS 8人機界面指南(三):iOS技術(shù)(上)

[ISUX轉(zhuǎn)譯]iOS 8人機界面指南(三):iOS技術(shù)(下)

Material design

Material design非官方中文指導(dǎo)手冊1.0

重磅教程!幫你全面徹底搞定MATERIAL DESIGN的學(xué)習(xí)筆記

Apple Watch人機交互指南

Apple Watch?人機交互指南UI設(shè)計基礎(chǔ)(1)

Apple Watch人機交互指南之UI設(shè)計基礎(chǔ)(2)

Apple Watch人機交互指南之圖標(biāo)與圖片設(shè)計

Apple Watch界面設(shè)計規(guī)范 – 模態(tài)表單

Apple Watch人機交互指南之UI元素設(shè)計

設(shè)計原則

易用性十大原則

《可用性工程》一書中有章節(jié)專門介紹,非常容易理解、也在設(shè)計中用的很多的十大原則。

移動端設(shè)計原則,文章推薦

很多前輩結(jié)合自己的項目經(jīng)驗,總結(jié)了一些設(shè)計原則,用于自查設(shè)計方案。也可以通過搜集一些實例,來理解設(shè)計原則是如何被應(yīng)用的。

手機客戶端交互設(shè)計原則及信息展現(xiàn)方式

交互設(shè)計原則有哪些?

需要時顯示——論App中的功能可見性

Chrome 瀏覽器的哪些設(shè)計符合「Don’t Make Me Think」原則?

二、實戰(zhàn)能力的積累

理論知識可以看做是修煉內(nèi)功,實戰(zhàn)技能則是轉(zhuǎn)化為招式——即 設(shè)計方案。作為新人,最基礎(chǔ)的是有輸出交互設(shè)計方案的能力。之后更多的是積累都在于如何提出易用性高、用戶滿意喜歡的設(shè)計方案。

交互設(shè)計輸出物知多少

流程圖

談?wù)勴撁媪鞒虉D

線框圖

同樣是來自heidi三篇文章:

聊聊線框圖:那些必要的理論和前提

為線框圖多留點時間

聊聊線框圖:UED和PD對于線框圖不同的定位

交互說明文檔

如何寫一份交互說明文檔(作者:heidixie)

如何編寫交互設(shè)計詳細(xì)說明文檔

如何制作實用美觀的設(shè)計文檔(作者:yoyo)

體驗優(yōu)秀的設(shè)計

想了解優(yōu)秀的設(shè)計,最靠譜的是去體驗、分拆、深挖優(yōu)秀的作品,包括設(shè)計模式(界面排版)、交互流程、操作反饋、特殊場景的細(xì)節(jié)設(shè)計等等。

總結(jié)設(shè)計模式

設(shè)計師通常如何發(fā)現(xiàn)靈感?這個問題中elya推薦了很多設(shè)計模式類的網(wǎng)站,這是業(yè)界搜集的設(shè)計模式庫。除了看他人搜集的,還推薦自己也按照類似的分類方式多搜集設(shè)計模式。

分任務(wù)體驗優(yōu)秀的產(chǎn)品

選擇特定的任務(wù),去體驗優(yōu)秀的產(chǎn)品是如何完成這些任務(wù)的(交互流程)。比如,注冊、登錄、發(fā)照片、發(fā)微博、發(fā)語音、評論/回復(fù) 等等。

總結(jié)設(shè)計亮點

這些設(shè)計亮點可能歸結(jié)不到上面任意兩個方面,但是恰恰是這些設(shè)計亮點最能體現(xiàn)一個設(shè)計師的水平。比如我之前寫過微信發(fā)語音功能的設(shè)計亮點 。為什么要記錄?對我來說是好記性不如爛筆頭,放在心里琢磨總沒有寫出來印象深刻。

最后推薦@曉生語錄 的一篇文章:交互設(shè)計師如何提高專業(yè)能力,這也是我在入行初期讀過很多遍的文章,感興趣的朋友可以看看。

三、提出交互設(shè)計解決方案的能力

從子任務(wù)開始鍛煉

對學(xué)生來說,作品很重要。但是對新手而言,完成一個整體的產(chǎn)品設(shè)計可能有些難度。推薦從子任務(wù)的設(shè)計開始鍛煉,比如前面提到的注冊、登錄、發(fā)照片等等。真正去設(shè)計的時候,會發(fā)現(xiàn)有很多細(xì)節(jié)設(shè)計是平時體驗他人產(chǎn)品過程中容易遺漏的。這個時候可以回頭再留意那些細(xì)節(jié),比較不同的產(chǎn)品設(shè)計,多問問自己為什么他們要這么設(shè)計,有何優(yōu)缺點、有何取舍,而自己又該如何設(shè)計、為什么這樣設(shè)計。

通過子任務(wù)的設(shè)計練習(xí),對如何做交互設(shè)計已經(jīng)有了一些提升之后,可以給自己布置一個完整的產(chǎn)品作業(yè)。比如實現(xiàn)某個idea解決用戶的某種需求,這個時候《用戶體驗五要素》的知識就可以派上用場了。嘗試從戰(zhàn)略層開始、一步步完成產(chǎn)品的需求分析、功能分析、原型設(shè)計,甚至視覺設(shè)計,最終輸出一份完整的作品。

設(shè)計完整的產(chǎn)品

這個階段涉及到需求分析、導(dǎo)航設(shè)計、任務(wù)分解、界面排版、交互操作流程等等,再次推薦《破繭成蝶:用戶體驗設(shè)計師的成長之路》這本書,實用性非常高。

主要任務(wù)的線框圖完成之后,別忘了還有很多操作反饋、特殊場景的細(xì)節(jié)設(shè)計,《設(shè)計之下:搜狐新聞客戶端的用戶體驗設(shè)計》一書對于反饋提示總結(jié)的非常棒。

設(shè)計定稿前,別忘了自查設(shè)計方案,看是否有遺漏異常情況的設(shè)計,推薦文章如何建立交互設(shè)計自查表

四、交互設(shè)計工具

工具的作用是用來表達自己的設(shè)計方案,初期討論、溝通想法時用紙幣來的最快最方便。軟件的好處則是利于存檔、多人協(xié)作、傳遞。

Axure

雖然交互設(shè)計工具幾年來層出不窮,但是實用性最強的個人覺得還是Axure ,學(xué)習(xí)成本低、簡單好用、多平臺通用。對于新手,前期可從排版開始練習(xí)畫線框圖,不用沉迷于做復(fù)雜的交互效果,因為工作中可能沒有時間做非常細(xì)膩的交互動效。當(dāng)然,如果是給大領(lǐng)導(dǎo)演示方案,一些點擊跳轉(zhuǎn)還是有必要做的。

Origami

制作交互動效的工具,感興趣的童鞋可以學(xué)一學(xué),前期的學(xué)習(xí)成本有點高。

Sketch

相比Photoshop,Sketch用來設(shè)計界面更輕便。

五、用研、視覺、前端、后臺開發(fā)的了解

用戶研究

可以看看《贏在用戶》,市面上貌似買不到了,學(xué)校圖書館大概能借到。百度商業(yè)UED團隊的用戶研究工程師總結(jié)的[14種經(jīng)典的用研方法] (http://ued.baidu.com/?p=3880),推薦看看。

審美與視覺設(shè)計能力

我相信的一點是,當(dāng)你看過足夠多的、優(yōu)秀的界面設(shè)計之后,審美、配色排版等能力會隨之提升。雖然我自己是學(xué)自動化——與設(shè)計完全不著邊的專業(yè),但是這幾年積累讓我對自己的審美還比較自信,至少得到了合作的視覺設(shè)計師的認(rèn)可。

為了鍛煉自己的視覺設(shè)計能力,我會做一些練習(xí)。比如我的個人網(wǎng)站(jinjuan.me)的界面設(shè)計就是自己完成。配色從Adobe Color CC挑選再微調(diào),最終的效果至少符合我的喜好。

對前端開發(fā)、后臺開發(fā)技術(shù)有一定理解

開發(fā)人員幫助我們實現(xiàn)設(shè)計方案,如何與他們高效溝通非常重要。雖然不需要會寫代碼,但是了解一些開發(fā)術(shù)語,知道前后臺、數(shù)據(jù)庫之間的關(guān)系是最基礎(chǔ)的。

我的經(jīng)歷是,畢業(yè)初期一年多的時間交互設(shè)計和前端開發(fā)都要做,對HTML、CSS比較熟悉,JavaScript有些了解。再加上自動化專業(yè)也有一些C編程經(jīng)驗,所以與開發(fā)同事溝通起來倒沒啥障礙。不過每個產(chǎn)品的業(yè)務(wù)特點不同,仍然需要實時更新對新技術(shù)的理解。

六、軟實力的提升

以下幾點是我個人認(rèn)為非常重要的幾個軟實力,早一點培養(yǎng)早一點受益。

時間管理

交互設(shè)計方面需要學(xué)習(xí)的知識非常多,如何評估優(yōu)先級、安排學(xué)習(xí)計劃非常關(guān)鍵。

知識管理

這幾年我是evernote的深度用戶,非常遺憾的是沒有更早使用它,所以推薦你選擇一款適合你的知識管理工具。關(guān)于知識管理,我的一點心得是別讓搜集的知識分散在各個角落(各個網(wǎng)盤、電腦硬盤、存儲工具),確保知識有統(tǒng)一存放入口,并有個統(tǒng)一的輸出存儲點。

如果沒有知識管理、沒有evernote,我可能也寫不出這篇文章。

善用搜索

你的很多疑問,前輩們可能已經(jīng)給出了很多經(jīng)典的回答,所以善用搜索。這里一并感謝在我入行初期,貢獻、分享知識的前輩們 @elya 、@heidixie 、@雅秋、@臭魚、@曉生語錄、@00、@王閱微、@朱晨 等等,非常感謝?。?!

多總結(jié),形成自己的一套知識體系和工作方法

@張佳瑋 說“世上萬事,不過是一懶二拖三不讀書”,如果要補充一條就是“四不總結(jié)” 。很多時候我們對知識的理解都是零散的存在于腦海中。如果不去總結(jié)、不記錄下來,腦容量不夠時可能就遺忘了。

所以多總結(jié)、形成自己的一套知識體系和工作方法,對于任何一個職業(yè)都至關(guān)重要。

七、寫在最后

這篇文章雖然是針對非設(shè)計專業(yè)的學(xué)生,但是很多方面同樣是對我自己說的。我也仍然在路上,還有很多技能需要提升,愿大家共同進步~~~全篇完。

#專欄作家#

青溪Joanna,微信公眾號-青溪札記(qingxizhaji),交互設(shè)計師一枚,喜歡體驗各種App,關(guān)注社交、在線旅游、O2O、工具類產(chǎn)品;擅長需求分析、交互設(shè)計,有一定前端開發(fā)經(jīng)驗;業(yè)余時間喜歡網(wǎng)球、ukulele、簡筆畫,正在努力攢技能。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 十分感謝po主做的分享!

    來自陜西 回復(fù)
  2. 請問一下,在哪里可以關(guān)注到上面提到的大神們呢?貌似在PM這里找不到呀,求指教~

    來自廣東 回復(fù)
  3. 看到好多人都說學(xué)習(xí)AXURE的學(xué)習(xí)成本低,就覺得還是初級的。但是往往又提到高保真原型,不知道是不是矛盾的呢?

    來自北京 回復(fù)
    1. 找UI設(shè)計啊

      來自浙江 回復(fù)