交互設計應該學的軟體有哪些?
不同軟體的特點是什麼,從基礎學起的話有什麼比較好的教程?
任意一款線框圖繪製工具,如:
Visio,Mac 上的 OG,PowerPoint,Axure,BalsamiqMockups 等任意一款線框圖+視覺設計工具,矢量工具優先,如:
Fireworks, AI,Sketch 等任意一款原型工具,如:
Axure,Flash,HTML+Javascript 等目前仍然在有大量的用戶界面輔助工具湧現出來,特別是 Mac 上,但大多還不是很成熟。其實工具只是工具,用 Excel 一樣可以寫交互文檔。
—— 2017年9月更新 ——
學習 UI/UX 和產品設計
1、UI 和 UX 設計師的課程表
2、UI、UX交流QQ群:633293003,會定時舉行公開課和答疑。歡迎大家加入。
交互的工具總在不斷的更新,學什麼軟體不重要啦,只要能表達想法就好,推薦幾個現階段我覺得還不錯的:
1.推薦sketch,我所在的團隊,交互和視覺都在用這個,大家用同一個軟體,也比較容易互相調整管理文件。個人覺得比axure好用太多太多倍...但好像國內互聯網公司還沒有大面積普及。
畫交互稿很好對齊,也支持很強大的顏色、形狀編輯。
視覺設計師也基本拋棄了PS,用這個做視覺輸出,操作更人性化。Sketch中文網2.pop,移動端創建快速原型的應用,直接把草圖排下來,快速在屏幕上拉出相應熱區,設定跳轉,非常方便!適合個人測試原型。
POP - Prototyping on Paper3.PS還是要會的,做高保真的概念原型,也需要處理一些圖片之類的效果,離不了
4.AE,做動畫,會這個還是有很大優勢
5.keynote,hold不住AE的時候,用keynote做交互動畫也是妥妥的,連蘋果內部也是專門有一個團隊在用這個支持交互原型製作。
6.teambition,團隊協作工具,功能強大,交互也很流暢。
7.快速手繪原型的能力...工作中能快速畫出草圖表達想法,是軟體不能代替的sketch invisionapp axure adobexd principle
用sketch做UI,PS輔助一下,invisionapp 、adobexd、principle做原型, invisionapp 做的是和PPT一樣的原型 ,axure做信息架構。
這些軟體從axure開始學,掌握信息架構之後,再用invisionapp學做一個簡單的交互軟體,sketch做U I,這種軟體大概3天可以全部上手,非常非常簡單。
更多相關內容在
JinCao 曹金的live
JinCao 曹金 - 知乎專欄
善用紙和筆。最後你會發現,大部分軟體1天上手足以(對於工作所需要的功能),所以多玩玩軟體,哪個順手用哪個。
首發於公眾號、次發於知乎專欄:作品集分享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
歡迎關註:知乎專欄有問題可私信我,或微信我sjie1029HArt原創文章,轉載請私信我,同行自覺,違者必究。Mac系統:
Sketch:交互原型以及部分產品視覺
Mindnode:歸納框架圖以及梳理思路時使用
Hype4/Principle等:製作一些交互動態原型,方便與開發溝通一些轉場效果及動效
Pages/Keynote:交互文檔的撰寫以及交互評審時的展示
Win系統:
Axure/Ai : 交互原型的繪製
XMind:頭腦風暴總結及思路歸納
AE:製作基於時間線的交互demo
Word/PPT:交互文檔的撰寫以及交互評審時的展示
以上是我在工作中較為常用到的軟體,除了以上者系軟體以外,也會偶爾使用一些市面上較新和較火的軟體,保持自己專業領域的新鮮度。正如很多人所說,對於交互設計師來講,軟體其實是最不重要的部分,我大多數的時候都是用A4紙和水性筆完成設計之後才轉化為電子檔與團隊的同事分享,軟體只是讓自己的概念更具有通用性語言和方便團隊工作的。
作者簡介:符要瘋,前阿里巴巴交互設計師,現任職騰訊音樂娛樂集團。公眾號:@符要瘋。
僅針對現有企業交互設計師常見設計範圍(網頁,桌面app,移動端app)作答。1-7為交互設計師必備,8-10有興趣的可以花時間探索。
1. 紙和筆。一個優秀產品設計師應該有一筐滿滿的廢紙簍。這種最自然的方式讓人在輕鬆的狀態下激發想像力,畫草圖,勾勒流程,視覺化你的想法,及時與人溝通並迅速得到反饋。練慣用sketch noting (第一次「塗鴉筆記」練習(Sketchnotes)) 的方法記筆記讓你在設計講座上不再瞌睡;而你大概也希望在和團隊溝通的時候,可以在白板上簡明整潔地表達你的設計,或者總結團隊的意見吧。
2. Balsamiq。 適用於產品迭代最初期做低保真原型。所有的界面元素都模塊化,拖動使用很方便。最關鍵的是,無論與你交流的人懂不懂設計,也能一眼看出Balsamiq的原型不是最終的產品設計,這樣你就不用浪費時間聽他們提問為什麼你的設計都是灰白的,或者某個icon不好看。。。
3. Sketch 及相關插件。專門用來做UI的輕量級軟體,已逐漸成為交互設計師主流工具,配合各種插件使用方便而強大(http://www.sketchappsources.com/ 請配合第6項使用)。從線框圖到高保真圖都可以實現,常用插件可以快速生成內容,紅線標註,為界面加設計文檔,導出到Zeplin直接交給工程師等等。Sketch學習起來非常方便,只有Mac端,跟mac系列產品如keynote等使用習慣非常相似。
4. KeyNote。實在是太簡單易用,也曾被Keynote可實現的動畫效果驚呆了。(當然也曾被別人用PPT做的動畫震驚到。。)
5. Invision/Marvel App / Flinto 三款產品類似,都是導入圖片到app里,通過鏈接區域模仿可交互的界面效果。 Invision 在大陸太慢幾乎不能用, marvel效果還好, Flinto主要針對移動設備。也都是幾乎不用學,可直接上手的工具。
6. User testing tools 不談專業的用戶研究員那些高端的工具, 一般的問卷工具survey monkey, google form,還有http://usabilityhub.com 等在線測試的工具,google anlaytics數據分析工具等等,還是需要了解和使用一下的。
7. Axure/Ominigraffle/UX Pin 大公司普遍在用,omnigraffle只有mac端,可做高保真交互原型,並可直接在上面寫文檔。
8. Adobe 系列產品 上手較sketch慢但功能強大,Photoshop, Illustrator, After Effects, Edge... 最近新出了Experience design, 類似Sketch和Invision的結合體,可以體驗一下。不過怎麼說呢,我有99%的交互和視覺稿都用Sketch就完成了。
9. Principle, FramerJS, Origami 用來做交互動畫效果。個人比較常用Principle, 簡單易學,一般想要的效果都能做出來。最近也在嘗試用FramerJS,需要一點點編程基礎。
10. Html, Css, Javascript 極少數的公司還要求交互設計師實現界面 (http://Quora.com倒是要每個設計師需要實現他們的作品),關於設計師是否需要編程的爭論已經太多了。個人拙見,學習這些不是為了自己實現你的設計,而是為了懂工程師並更好地溝通。對技術層面理解也許會限制你的想像力,但或許也忽然給你一個「wow原來還可以實現這種功能」的可能。。
當然未來的設計會跟今天很不一樣,很多現有平面UI元素包括交互模式都在不斷的實踐中縷出了一套現階段的最佳方案,而material design,和ios 規範又將常用UI模塊化了,人工智慧發展那麼快,或許在將來,計算機會為你的產品自動組合出最合適的交互模型及視覺風格,那時候以上的幾個工具就遠遠不夠用了。但在新設備的交互體驗中,還有很長的一段路要走,眼動儀,做硬體原型的arduino,玩聲音和圖像的processing, 做遊戲的unity,包括不知道用什麼來prototype的VR... 類似這樣的設備可能才是未來設計師的工具。
上大學的時候,汽車系有一個教授自我介紹,「我本科是拖拉機系的」。
在設計界里,今天我們用的sketch, axure, 甚至js framer,沒準就是00後10後設計師眼中的拖拉機呢。
工具不在多,在與滿足你的真實需求。很多軟體大家也就是嘗試一下,真正的使用價值寥寥,以我的自身經歷來說一下幾款是經得起時間考驗的:
- 一款線框圖繪製工具——Sketch
- 一款視覺化繪圖軟體——PS+AI
- 一款原型工具——Origami Studio
- 一款動效軟體——AE
- 一款展示軟體——Keynote
隨著移動互聯網發展,更多從業人員進入這個行業。原型設計軟體也是雨後春筍,不過身邊經常聽到設計師朋友說交互設計對於這種技能的掌握可有可無,對於這種想法我不能評價,但是放眼美國矽谷,編程已經成為一項設計師的基礎技能了,Google等大公司對於設計部門的職能劃分越來越趨向於統一而不是細分,而且操作過實際項目的設計師應該了解視覺稿和可用原型之間體驗的差別還是很大的,這種原型軟體或者說視覺化編程已經為設計師參與到更廣泛更便捷的互聯網產品開發全流程中提供了途徑,何樂不為?
至於在紛繁的原型軟體中用哪一個,每個人需求不同會有所差異。這次我把我用的OrigamiStudio做一個介紹和一個快速上手的教程,以供你在選擇時參考。
使用邏輯/設計師最熟悉的圖層
Origami Studio刻意追求與Sketch一致的使用邏輯,在畫面的右邊你的每個設計元素都是一個Layer(圖層),所有的交互動作在這些layer的基礎上開展。Origami Studio準備了非常實用的iOS和Material Design預置圖層,可以調用幾乎所有的基礎組件如甚至包括攝像頭、高斯模糊!也就是說你可輕易的實現一個具有錄像功能的交互原型,聽起來是不是很cool!
如果你們團隊都在使用Origami Studio,它也支持你在上面儲存自己產品的組件庫。
Origami Studio中最基本的元素就是Patch(模塊),通過連接不同功能的patch使你的設計可以交互。Layer本身也是一種Patch,首先你要把你的視覺稿切片也就是layer放到畫布上,如果你使用sketch,那麼你就可以很方便的複製元素到Origami Studio中,它會自動變成一個整體的切片。
接下來你就可以開始對layer進行交互操作了,在Patch Editor(模塊編輯器)中,你可以挑選你想要的interaction(交互動作)、animation(動畫效果)、behavior(反饋行為)連接到你的layer上。下面做一個簡單的示例,企鵝FM上線的新功能——「跟我跑」跑步電台,點擊開始後有倒計時的動效,如下(gif圖請點開觀看)——
第一步-導入素材這一步如果你用sketch的話就很簡單,在sketch裡面複製,再到Origami Studio裡面粘貼就自動在。如果你是用別的軟體做的,你需要先倒出切片,然後拖進來就可以了。
第二步-設定動作在每個layer上都有一個「touch」,這個代表的是你將要用什麼手勢操作,裡面有點擊/向上滑動/向下滑動/雙擊/長按······在我們這個案例里,只需要點擊操作——tab。
選擇之後就會自動生成一個interaction patch,這也是所有的動作的第一步。第三步-設定變換數值並連接到變化的因素
在我們的操作里,點按卡片之後,應該出現高斯模糊頁,那麼高斯模糊頁的 透明度 應該 從0到1 。所以在畫布中添加一個transtion patch(數值變化組件)——
然後設定start為0,end為1,然後把連接到「高斯模糊頁」的透明度上去——
這樣,點按卡片就會出現高斯模糊效果了。第四步-添加動畫效果
單純的圖層變化十分生硬,我們的app在設計的時候一定會加入緩衝和動畫效果。在Origami Studio中有Pop Animation(流行動效)與Classic Animation(經典動效)等6種動畫patch可以選擇。只要把動畫patch加在interaction和transtion之間就可以了。
這裡要提醒大家,如果希望點按之後只有一次效果即可那麼你需要在interaction之後加上switch開關,不然的話每次點按,效果都會重複一次,但往往我們的App都是線性操作,需要加入switch來進行控制。
接下來的素材,按照這個流程一一設定就可以了。
至於你想要實現的效果需要使用哪些patch,你可以在他們的官方文檔中查看,在patch editor中,也都有注釋。大的分類有動畫/色彩/功能(包括調用攝像頭、麥克、瀏覽器···)/反饋效果/函數/邏輯/循環/數學/形狀/效用。
不要害怕,雖然他提供了很多patch,但你常用的比較固定,多用幾次就很熟練了,遇到什麼不會的你也不用著急看文檔,可以先看看官方示例庫裡面有沒有,實在不行到fb的群組裡面或者私信我也可以。
動態演示/與原生App無差別交互
當你在搭建你的原型時,你可以實時在你的手機上查看並進行交互,當你製作完成準備給leader與開發人員展示你設計的應用時,你可以發送到你手機上,你就可以很輕便的帶著ta去與所有人交流。這些操作只需手機中下載一個Origam Live。
忘了說一句,Origami Studio所有的相關應用都是全免費的(親親??FB??爸爸)。
超實用的輔助功能
- 錄屏:可以錄製並剪輯操作視頻
- 分享:你可以分享Oriagmi文件給朋友,這樣無需你在場ta也可以自行體驗原型
- Origami Community:Origami Community是Origami Studio在Facebook上面的官方群組,你的所有問題都有工作人員為你解答,你也可以與其他使用者交流。
- 教程:官方網站上有許多實用教程,都是基於facebook和instagram的真實案例
取消了代碼導出功能
新版本發布後,Community中很多用戶在問為什麼之前備受關注的code export功能取消了,facebook design的設計師是這樣回復的:
在實際使用過程中我們自己用的次數也很少,同時本身他們導出的代碼能夠適用的範圍有限。我們相信真正能實現一個好產品的途徑並不是一鍵代碼,而是設計師與開發人員真誠的交流。同時我們並不是放棄這個功能,這一期沒有上線是因為我們在尋求更好的方式。
在之前的版本裡面,Origami是可以導出代碼的,但是需要開發人員裝Facebook的動效庫,推動這件事並不是只靠我一個設計師能夠推動的,所以我們要靠「真誠的交流」,以後還原的時候請彼此真誠一點。 其實我有給他們提意見,他們可以生成一張以時間軸為坐標的可視化圖表,感覺這樣開發人員看得更明白,希望他們可以早日開發出新的功能來幫助我們設計師與開發交流。
結語
很感謝FacebookDesign勇於在設計師的工具領域嘗試,我也始終相信彼此的初衷,工具對於效率的提升只是表象,珍貴的本質在於它能讓設計師的思維更新換代,而Origami Studio就是這樣一款讓設計師具有更加動態與縱深感思維的優質原型軟體。
我自己的案例涉及公司產品就不放出來了,結尾準備了一份官方教學視頻送給不能翻牆的同學們
Getting Started!Origami Studio - 騰訊視頻 https://v.qq.com/x/page/k0350157dnd.html
不能翻牆的請下載我的這份 微雲文件 ,任何問題請在評論留言統一回復
為什麼沒有人推薦有趣的BalsamiqMockups呢?Axure一比就顯得太呆板了。
補充一個:Affinity Designer在站酷上看到一篇不錯的回答,題主可以參考下:原文地址:交互設計自我發展三部曲——「器、勢、人」交互設計師(或稱UI設計師)發展的三部曲——器、勢、人,這三部曲基本會貫穿你的職業生涯。本文專門為交互新人和轉行者指明學習方向。
交互設計師(或者稱UI設計師)發展的三部曲——器、勢、人。這三部曲基本會貫穿你的職業生涯。
先普及一些常見的崗位術語。GUI指視覺設計,PM指產品經理,這兩個詞的含義是公認的。UI則非常有歧義,在中國的大公司(譬如華為、聯想、三星、騰訊、百度等)指交互設計,小團隊指視覺設計,很多中小團隊甚至沒有交互這個詞。
UE對應的是交互設計和用戶研究,在百度交互設計、用戶研究和視覺設計(GUI)都稱為UE,是一個團隊稱呼。騰訊乾脆把「UI」這個詞撤了,崗位設定就是視覺設計師和交互設計師。
交互設計其實是一種方法論,這種方法論可以用在工業造型上,讓用戶感覺更好用;可以用在互聯網設計上,比如今天的互聯網產品;也可以用在服務上,比如義大利米蘭理工很早就搞了服務設計……設計師通過交互設計的方法論讓UI設計的產品更好用,讓產品最終的實現原型接近用戶期待的原型。
既然講到UI,下面我要和你們討論一個殘酷的話題——為什麼很多設計師被老闆叫做美工?
每次被老闆稱為美工,很多設計師心裡就很不爽。我作為設計師里最懂老闆的人,也作為老闆里最懂設計師的人,不得不告訴你們一個很殘酷的現實——在很多老闆眼裡,設計師真的不如銷售,知道為什麼嗎?
傳統設計是設計圖片把用戶吸引過來,如果用項目類比飯店,它在整個銷售流程里就相當於設計了飯店的招牌,用非常好看的招牌把用戶吸引進來。
而用戶在飯店的所有活動——包括消費、服務、吃飯點菜等各類流程——都和設計沒有關係。所以設計師可能覺得自己的設計能改變世界,但是在老闆眼裡你只幹了外觀修飾的活,所以傳統設計的工資不高,因為你做的事情對企業的價值是有限的。
大家要記住,互聯網設計一定要和商業價值綁定在一起,如果你只是設計一個招牌讓人看到的話,其實你的商業價值是很低的。
為什麼今天互聯網設計師這麼貴?互聯網設計師我在這裡給你報個價,比如百度,剛進去的本科應屆生工資也有8000到10000,基本上工作兩年的人都能到20000以上。其實BAT給的錢還算少的,他們那裡收人基本要的都是螺絲釘,創業公司給的錢才多,往往一個創業團隊里只有一個設計師,那裡給的年薪是很高的。
為什麼互聯網設計師這麼貴?你們要看出互聯網設計師和傳統美工本質的區別,弄明白對老闆來說哪種設計師價值更高,才好理清自己的發展方向。
傳統設計就是吸引人看過來,裡面的所有服務和你無關,所以傳統設計師不值錢,而互聯網時代企業所有的營銷、投入、物流、店面、服務用戶都是看不見的,他只能通過一個小小的界面來購買產品,傳統時代一系列的轉化過程全部濃縮在界面里,用戶了解產品、增強信任、轉化購買都是通過設計來完成的,這就是互聯網設計師值錢的原因,因為他的商業價值更高。
為什麼今天很多人在談交互設計,就是因為互聯網產品通過交互設計來捕捉人的行為,捕捉的好用戶就會使用你的產品,捕捉的不好用戶就會放棄你,所以交互設計才會這麼有地位。
剛才我講了交互設計是一種方法論,那麼什麼是UI設計?大部分人對UI設計的理解就是漂亮的界面,很多老闆把界面丟過來「給我做的美一點」就完了。我不否認視覺是UI設計的一部分,UI設計其實分為兩部分,一部分是視覺設計,產品做的好看確實能提升轉化率,但是你們平時看到的大牛產品比如微信、58同城、QQ之類,感受到過它們的「美麗」嗎?這就是另外一部分更重要的,交互設計。
實際上,用戶在使用微信、58的時候只是在完成自己的目的,這些應用提升了他的做事效率,視覺其實只是整個設計流程的最後一步。大公司的視覺設計師比交互設計師的薪酬要低一些,不同公司還不一樣,百度的只是工資低一些,騰訊的可能要低一個級別,基本都是交互設計師帶著視覺設計師工作。
講了UI設計為什麼這麼重要,還有人問我交互設計有沒有前途,我告訴你交互太有前途了。你要了解行業的變化,過去人們接觸信息是通過現實的各種聯繫,比如你想聽鬼故事就要附近的朋友給你講,現在就通過手機或電腦上的界面——人接觸大量數據是一種本能,今天的UI就是人和大量信息的介面。
所以設計師要將大量的企業服務、商機、信息整合到界面里,將大量有價值的信息通過UI展示給用戶。現在很多人購物都不願意出家門了,通過1號店、唯品會、淘寶這些互聯網產品進行購物,這一套服務和商品他們都是通過UI進行購買的。
中國的發展太快了,這帶來了一個很大的問題,就是公司里做老大的人往往是外行,他活躍的年代根本沒有這麼先進的設計思想,而新進來的設計師可能是內行,這就會頻繁出現外行領導內行的情況,即使是一流互聯網企業也是一樣的。時代在飛速變化,UI不是界面設計,經過最近數年的發展,界面設計已經退縮為UI很小的一部分了。
今天來聽課的很多人可能都是想自學交互設計的,我們下面就講一下今天的核心內容——器、勢、人。
【第一段:器】
設計師學習的第一階段其實都是從「器」開始的,器指的就是工具。這分為兩種,第一種是有形工具,比如PS、AI、Axure之類的軟體;另一種是無形工具,就是設計時用到的思維方式。
先說第一種有形工具。很多同學在學習UI時很容易陷到工具的盲海里去,覺得工具學的越多能力就越強,其實根本不是這麼一回事,軟體對交互來說是非常基礎的一部分,保底就足夠了,學的太多反而會本末倒置。
怎麼提升自己有形的「器」呢?從UI視覺方面來考慮,PS就足夠了,AI都顯得略有多餘,不需要其他軟體。PS其實是一款非常強大的視覺軟體,切圖也比較方便,BAT等公司也是用的PS。
還有輸出交互文檔的工具,一種是PPT,一種是Axure,這兩款軟體就足夠覆蓋絕大多數交互文檔了,當然還有其他軟體,如果是快速迭代的原型直接在紙上畫也可以。
我們集創堂有一個新手群,很多人在群里不斷問「我要不要學XX軟體啊」「學軟體要不要報班啊」,軟體其實和鉛筆、白紙一樣就是設計的工具,它的操作越複雜說明它設計的越差勁,PS和Axure跟著一些免費視頻學一學就夠了,拿過來就可以用的,千萬不要花費太多精力在有形的「器」的提升上,當然你PS連臨摹都不會就要多練練了。
Axure和PPT很簡單,直接拿過來就能用的……QC?這是什麼東西,你搞這麼多複雜的軟體幹嘛呀,交互需要快速溝通,你要拿著設計反覆和其他人對接,要是搞了個很生僻的軟體給別人,結果別人打不開,老闆就會罵你。你要記住自己是設計的一環,能快速傳遞自己的設計思路才是最重要的,不要搞一些生僻的軟體、格式、字體,這都是門外漢乾的事。
像AE、Flash面試時可能會給你加分,因為公司可能有一些高保真的動畫展示要做,其實在真實工作中用到的機會非常少。
我推薦一個icon,如果你們PS功底不好的話,去臨摹它:
能把這個臨摹出來,我就覺得你視覺的基本能力是有了,但是設計的功力還不好說,一定要把軟體和思維分開。
第二種「器」是無形的思考工具。思維的「器」其實最不好培養,說的殘酷點,你可能看五年的書都出不來思維,最好能有人指點一下,這個就是我現在乾的事,當然這個你們隨意。集創堂一直在培養的就是思維的「器」,不是軟體的「器」,軟體的「器」你可以通過大量臨摹自己練出來。
【第二段:勢】
「勢」是很多設計師容易忽略的,也就是前沿的設計意識。
這個怎麼練呢?每天一定要抽出三十分鐘的時間看新產品和新思路,這是今天的互聯網設計師必須要乾的一件事。很多一線團隊每天都會分享各種各樣的新聞,百度有自己的分享機制,三星喜歡每個月讓設計師找最新的交互、用研、技術信息,收集起來專門搞一個月報。
設計師有很多渠道可以看前沿信息,比如互聯網一些事,愛范,36kr,癮科技之類的網站。你現在不知道,說明你沒有養成這方面的意識,這種前沿意識非常重要,它決定了你能在二流公司還是一流公司,這是排在第二位的。
上面這三條每天都要堅持,你們堅持了三個月以後,自然而然就會飛躍,不需要怎麼特意去學,但這個不是培訓可以給大家的,養成一個好的習慣,每天看半小時其實就是最好的學習。
我最怕的是公司的一些老設計師工作了十年還是小兵,每天從來不看最新的東西,我給他們說現在很多90後每天都會自拍50次,他們說打死我也不信,這就完了。包括百度、騰訊等大公司面試的時候,也會問你些最新資訊。這個真的很重要,說白了,別人都在搞飛毛腿導彈了,你還在研究十八般武器的舞法,這就不行。
比如支付寶加了社交的功能,這就是最新趨勢,支付寶為什麼要做社交?你應該多了解這樣的軟體變化,去思考它背後的含義。
【第三段:人】
絕大多數設計師在工作的第一年解決的都是「器」和「勢」的問題,這兩個問題比較好解決,最難解決的問題其實是「人」的問題。可能很多設計師一輩子都解決不了「人」的問題,而它對企業的影響又是最大的,交互設計最重要的就是解決「人」的問題。
記住了,這一點甚至能決定一款千萬級甚至上億級產品的生死。
剛才我們講的東西太理論性了,可能有點空泛,下面我給大家一個案例,比如說淘寶這個界面,你們看到它的時候看到了什麼?從自己的專業角度分析一下:
說「看到美女」的人很正常,除了美女還看到了什麼?銷量、排版、價格?典型的淘寶界面實際是一個非常人性化的界面,這一張界面里很多地方存在著人性設計。
在分析這個界面之前,先給你們分析一下傳統商品的銷售模式:
比如說我要買一瓶果汁,來到一家商店,看到了這家店的門面、精美的果汁、美麗的店員,然後我詳細詢問店員果汁的價格、口味,店員慢慢給我解釋,最後我購買了。這整個購物過程我們用八個字來解釋就是——了解、信任、價值、轉化。「了解」通過各種現實交流來探知這款產品,「信任」你買這瓶果汁不怕上當,因為店和人都在可以回去找它,「價值」你可以自己感受值不值得買,「轉化」就是購買——這是傳統產品的銷售過程。
在這個過程里,還有四種用戶:
紅色性格的人比較感性,他可能因為店員長的漂亮態度好就購買果汁。藍色性格的人比較重實際,會糾結性價比,可能會反覆考慮很多細節再做決定。黃色性格的人注重結果,比較乾脆,他就是渴了想喝果汁,無所謂這瓶多少錢。綠色性格的人是與世無爭的,你都不知道他看上了什麼東西,可能他覺得這個瓶蓋看起來萌萌噠就去買。
優秀的銷售人員能感受自己的客戶分別是什麼人,可以很靈活的銷售。現在產品搬到線上去做,出現了一個新的問題,就是之前你看到的店鋪、果汁、店員等所有的東西都不見了,所有的過程都要靠一個個界面來解決,這就出現了難度。
這個界面要解決什麼問題呢?就是剛才談的「了解、信任、價值、轉化」,現在我們回到淘寶的界面:
看到了嗎?「了解」的信息、「信任」的信息、「價值」的信息,如何「轉化」,它是按照這一套流程來設計的。剛剛我講到了四種性格的用戶,紅色性格的用戶很感性,她真的是看美女——很多女孩子買衣服「哎,這件衣服穿在這個美女身上好漂亮啊」,她就會去買。黃色性格的人重結果,覺得自己應該買件新衣服,看到289元衣服也還不錯就買了。
藍色性格的人在下面,他看的是數據細節,各種各樣的參數各種各樣的對比。綠色性格的人不好覆蓋,這個比較隨性。
一個界面覆蓋了三種性格的用戶,你能看到的信息幾乎全部都是經過精心設計的,這就是今天的互聯網設計,針對人的設計。用戶看到他想要的信息就會購買,放一個好看的圖片可能會激發紅色性格的用戶,但是這只是其中的一部分,互聯網設計只有視覺是絕對不夠的,這就是「人」的問題。
我們在做產品的時候如果不了解你的用戶,通常都要做建模,就是因為「人」的問題不好把握。比如白領用戶多就做白領的建模,當然建模做准也是需要訓練的,現在就是告訴大家有這麼一個東西,用建模來找准目標用戶。
如果目標用戶找不準產品是沒有任何價值的——這叫「槍型思維」,就是要把更多時間和精力用在瞄準上,如果瞄不準開槍是沒有意義的。
「人」的問題沒有解決,這就是很多創業團隊死掉的原因。我去很多團隊做過診斷,比如有的團隊做政府項目,我問他們找過政府的工作人員做調研嗎?他們說沒做過,我接著問那你們從哪裡找的需求和功能呢?他們說從競品裡面找的。那個競品其實根本不是他們的項目,他們直接抄著做了,結果可想而知死掉了。
做建模很難,大部分設計師能做的只是通過分析調研數據、結合產品的策略來建模。還有一種是比較難的,靠的是閱歷,比如我們之前建一個賭徒心理的模型,很多人沒見過賭徒,結果建模真的就不準,需求點找的很差。
我有個朋友在做國外項目,給阿拉伯人建模,痛苦死了,在國內連人種都找不到,項目做了五個月還是很不準,沒辦法只好真的到阿拉伯調研去了,因為很多當地人英語不好,溝通障礙很多,弄的非常困難。
「人」的問題是最重要的,如果人找不準,你的需求就找不準,那麼之後包括信息構架、視覺設計都是沒有價值的,極有可能項目會因為這個死掉,下面我再給你們一個手機的案例:
這些手機都是當年的經典系列,htc、索尼、三星、諾基亞什麼的,你們查一查就能知道喜歡這些手機的都是什麼用戶,那這款手機呢?你們猜一猜這款手機多少錢,就憑自己的感覺,這款手機你打算出多少錢去買:
打500、1000的算比較實在,有次我拿這款手機給九個設計師看,大多數人第一反應是山寨機,第二反應是這款手機打死不會超過一千,還有說狠話的「如果超過一千我就吃下去」。八個人沒有猜出來,全都是年輕的設計師,只有一個銷售人員猜對了。
朋友們,這款手機狂貴,在剛出來的時候賣16000,它不是給你們這些年輕人用的,是給四十歲的傳統企業老闆用的。
這款手機的高保真原型出來時,所有設計師都投反對票,因為那時蘋果已經出現了,大家覺得流線型、簡約設計才是潮流,但是我們看完調研的結果真的就服氣了。
它的建模是這樣的:一個四十歲的土老闆,每天最多的事就是接打電話。老闆每天可能會打幾百個電話,這個頻率是你們想像不到的,他可能隨時隨地都在打電話,而很少用微信、QQ。傳統手機接打電話非常方便,按下按鈕或翻蓋閉眼都能接電話,用智能機反而不方便,所以他希望自己用的還是傳統手機。但是傳統手機太低端了,老闆擔心同行和下屬嘲笑他,就很糾結——於是我們的手機就誕生了。
這款手機是兩屏的,看起來是智能機,其實還是一個翻蓋打電話的手機。這款手機出來之後在山西大賣,被稱為智能手機界的大哥大,非常受老闆歡迎——所以每次我講這個案例的時候,有些學生比較天真,我一講他們就說「我爸用的不就是這款手機么」,這就暴露了他們土豪的本質,父輩用這種手機的人都是土豪。
這就是「人」,作為一個年輕的設計師你可能很難理解一位四十歲的用戶心裡在想什麼。如果產品的目標用戶是四十歲,很多大企業就會真的找一些四十歲的用戶做調研,但是用戶調研也有比較困難的地方,比如你的產品從未在市場上出現過,你找這些用戶做調研他們也說不出到底喜不喜歡這類產品,很多時候用戶調研也有很多局限性。
關於人物建模和調研的重要性,再給你們一個我們當年做的關於手機顏色的案例:
這是我們對顏色的劃分。我們覺得10歲到20歲的女性喜歡很鮮艷的顏色,青春甜美嘛,25歲之後的成熟女性喜歡這種偏成熟的顏色,成熟冷艷嘛——問你們一個問題,女生在購買手機時只注重兩點,是哪兩點呢?男生請回答。
女性買手機,最看重的一個是自拍,另一個是外觀,很多男生都想不到的。我們這個是針對外觀的新款手機,顏色是彩虹色,看起來很萌很Q,大概就和這張圖裡的差不多:
我們覺得20歲的女大學生應該喜歡這種綻放的色彩、青春的顏色,這是我們男人的判斷。
結果我們到大學做調研,女大學生告訴我們這太幼稚了,她們不喜歡這種顏色,建議我們去高中做。高中女生也說我們太幼稚了,建議我們去小學做,我們就說那看看你的手機是什麼樣子吧,結果她拿出來一個黑色的非常成熟系的手機。
當時我們所有人都震驚了,因為當時初中生和小學生是沒有購買力的,我們沮喪回來的時候,偶然遇到公司一個28歲的女員工,她興緻勃勃地叫住了我們,問手機哪裡弄來的——這種顏色就是她想要的。
於是我們繼續調研,發現喜歡這款顏色的是28歲到32歲的人群。青春期的女生往往不甘被人說幼稚,更喜歡成熟一些,而28歲以上的女生青春流逝,她們會覺得再不用這種顏色就真的老了。你想想,如果手機做出後按我們想像的去大學做推廣,會不會有人買呢?
這是關於人的問題,你要知道你的一切設計行為都是為商業負責的,所以你們前期對交互不甚了解,可以先從PS開始,後期就是「勢」和「人」,這兩個東西是比較難的。
【研發流程】
下面是研發的一些流程,大體的給大家看一看,很多人感興趣交互在互聯網產品線中處於什麼位置:
產品經理和交互設計師容易混淆。產品經理的最終目標是保證項目完成,比如六個月達到一百萬用戶量,這個是他的kpi,用戶研究只是其中的一部分。
一般產品經理定大的需求,小的細節是交互設計師做,但是很多公司產品經理和交互設計師是一個人.產品經理保證項目落地達成目標,交互設計師對用戶體驗負責,細化需求。在前期對需求進行挖掘和理解的時候,交互設計師和產品經理是一起的,包括人物建模、競品分析。
定好需求和功能就要上框架,所謂的框架就是它的線框圖,這階段在大公司里統一是線框圖,不會出視覺稿的。
線框圖就是UI的0.5版本,把需求做成信息羅列出來,就是你們之前看到的淘寶那種信息,絕對不會用PS啊同志們,我說過的一句話你們很多人都會漏掉——任何項目第一保證的都是效率。PS在前期會影響效率,一定是用線框或者手繪的方式畫出來,然後和各方面溝通,大家確認之後才開始上視覺,視覺是非常往後的東西。
然後是低保真原型的測試或者迭代,這個涉及到可用性測試、AB測試,這兩個測試用的最多,百度現在可能還在用卡片分析之類的。
再之後出視覺稿,然後是高保真測試。但是用戶測試也分產品,有的產品不太需要做,有的產品要狂做,這個和產品自身的形態有關。之後開發人員開始介入,大概就是這個過程。
【交互能力】
現在的很多招聘也這麼寫——心理學、視覺、計算機出身。中國大部分交互設計師都是從工業設計轉過來的,平面相對少些但也有,計算機和心理學的偏少。心理學做用戶研究的多,華為特別喜歡收計算機出身的。
其實業內有各種行業轉成功的人,有學商業的、攝影的、數學的、英語的、生物的、服裝的、廣告的等等,其實我覺得互聯網設計應該歡迎商業的人轉行,商業對交互很重要,而這恰恰是被忽略的。
第一種是視覺能力,80%的事情是做信息構架和繪製界面,視覺能力往往是基礎能力,你要能把界面做出來,可能你的分析不靠譜,但是起碼可以幫著切圖吧,也能找到工作,這是基本能力。
第二種是心理學能力,這是「人」的範疇,你的一條信息正好打對了這個點,就會形成很強的轉化,這是對心理的研究。
第三種是邏輯能力,UI其實不是在設計一個界面,而是在設計一個系統,你的設計和用戶的邏輯是綁定在一起的。另外互聯網是一個變化的過程,今天可能五十個功能,明天可能一百個功能,這就需要你的系統有很強的包容性。
這三大能力,視覺的能力是最容易達到的,心理學和邏輯學有點困難。有些人平面轉UI公司不收,那是因為你的美工思維已經定型,懂行的一看就不會要你,你要從美工思維轉到UI的思維、互聯網的思維,我今天給你們講的就是UI的思維。
我給你們一個薪酬標準:
年收入6萬以下的,基本會切圖就可以了,技術含量不高,切個圖做個guideline之類的基礎的活,企業需要這種螺絲釘型的人。
6萬到12萬的設計師,做調研報告可能相對難一些,但是競品分析是一定要熟練掌握的,還要參與信息構架的工作。
12萬到24萬的,這時候調研報告、分析需求、信息構架都需要熟練掌握了,還要學會處理細節、文案等。
24萬到40萬就一定要結合商業了,比如我講的三大市場,有形無形,向心力差別化,這些都是商業的東西,我的很多交互理論都是從商業演化來的。
這個工資標準是一線城市的,現在可能比這個還要高一些,我們有個工業設計從未做過交互的人,初次找工作稅後一萬三,還有一個深圳學攝影的,轉行拿到的是一萬一。基本上最少的也有八千吧,一線城市很缺人,你可以查查IXDC的調研報告,裡面有寫一線城市交互的工資水平。
現在高校基本沒開UI課,社會上很多地方所謂的UI其實還是傳統美術的變型,比如傳統美工用PS做海報,他們是用PS做圖標。有人甚至能用PS把遊戲人物很精美地畫出來,心想我PS技術這麼好,把icon畫出來不就是UI了么,其實根本就不是。
【新人答疑】
答:前兩天我和蕭蕭一起和辛向陽吃飯,我也在問他這個問題,現在很多數據說交互有一百萬的缺口,結果辛向陽說有一千萬的缺口。現在我們接觸到的交互設計可能只局限在網頁或者APP這種,他指的交互設計是個很廣泛的概念,前景肯定是有的。
互聯網是人和服務的對接,如果你們觀察現在我們做的很多事,很多嶄新的設計和商業模式一旦出來,那就是新的商機。
答:剛才說了器勢人。視覺基礎不好的就學PS去臨摹,現在很多開源的信息,比如學UI網。如果你臨摹到一定程度,可以看一看dribbble,其實視覺非常好解決,思維的提升才困難。
答:PPT和axure足夠了,這兩個東西都不需要學。隨便來個人學兩三天都能拿著軟體畫出漂亮的線框圖,關鍵是你的線框圖從哪裡來、為什麼要這麼畫。
答:交互設計師不需要學代碼。我在很多公司都指導過工作,像聯想、騰訊、三星,還有多如牛毛的創業團隊,其實我做設計師之前本科是學計算機的,很多代碼我都會寫,但是工作多年一條代碼都沒寫過。
知道為什麼企業招聘要求你們懂代碼嗎?因為很多企業希望你做了設計做前端,節省人力成本,正式公司都不會有這個要求。
寫代碼這個要求最開始是網頁設計師,這是需要懂前端知識的,但是hr不懂,他只是把設計師的招聘到處貼,後來就貼到交互設計師里去了,因為很多hr心裡網頁設計就是交互設計,結果很多人覺得交互需要學代碼。
就算你覺得設計師應該學代碼,我建議你還是先把本行的設計能力學好。當兩件事你都要做的時候意味著哪件事你都做不好,這是自我管理的問題。
答:你們可以查一下IXDC的行業報告,目前30%—40%的交互崗位薪酬在10到15萬之間,但是也不排除高級的會更高,平均水平是這樣。
答:這個是完全不一樣的,大公司我們拿BAT為例子,它比較注重專項的能力,比如你做交互設計的人不需要視覺設計很好,只要交互設計能力過關就可以,所以給大公司投簡歷,視覺就是視覺,交互就是交互。
答:創業團隊追求的是快准狠,大公司可能研究型做的比較多。我建議最好在大公司和創業團隊都做過,這樣看事情更全面。新手能去大公司就去大公司吧,可以很好的磨鍊你們的專項能力。
答:簡歷必須要有交互設計相關的案例,如果沒有hr那關就會把你刷掉。我知道你們很多新手沒作品,這個才是最愁人的。新手可以積累視覺類作品,從視覺開始慢慢就有交互的東西了。
學校里的學生好些,實習生沒太高要求。項目經驗非常重要,你去面試十道題里可能七八道都是根據你的項目案例問的,如果你打算轉交互一定要積累相關的案例。
答:大公司對學歷都有要求,不行就去創業團隊吧。當然不排除能力特彆強的,如果你進來之後很多東西都能給它切實搞掉,擺出你的實力給它們看,學歷不夠進大公司的還是大有人在,但是這些人的經歷基本不可複製。
答:一萬並不高,還是有很多人能拿到的……這個問題我可以回答歡迎來到集創堂嗎,哈哈。其實新人拿到這個數還是要有一點運氣的,當然你實力強也可以穩拿。
大公司的要求死板些,反而是一些小公司對能力要求很高。大公司不缺人,所以比較挑剔,你去了也是一枚維繫公司運轉的螺絲釘……當然你長的特別美機會也大,確實美女容易進大公司,比如老大是男的往往喜歡找一些好看的女生進來,這也是人性啊。
答:越是老大開會越頻繁,後期可能一個禮拜全是會議,不同公司也不一樣。交互設計師非常注重溝通,你的工作十分可能有四分在溝通,有五分在思考怎麼做,最後一分才是呈遞交互文檔。
答:這個分市場。現有市場的產品如果和其他產品沒什麼區別,就不太需要用戶訪談,投入越多的錢就有越多的量;突圍產品就要頻繁接觸用戶;創新產品就更要頻繁接觸。如果你做這類產品,一定要和真實用戶溝通,不然全是自己猜測非常容易出問題。
答:這個是產品的問題,如果市場上暫時沒有成熟的產品,說明這個東西的核心功能有問題,在做這類產品的時候,不要做它們的優點,而要吸取它們的缺點進行改進。核心功能是產品最初步的問題,其次才是用戶基數。
答:手繪功底?有或者沒有都可以,交互不需要你造型能力多強,你只要能把邏輯關係畫出來就行了,不需要搞什麼素描陰影。你不是要做畫家,朋友們,畫家和設計師是有區別的。
轉載:《設置交互要多久?最快只需三秒!》
原型設計分為兩種,一種是靜態的線框圖,我們一般叫wireframing;另一種是動態的原型,一般叫作prototyping。目前在prototyping設計中涉及到的交互主要分為三種:頁鏈接、交互狀態和組件之間的交互。而動態原型的設計工具中比較常見的能夠包括這三種交互設置功能的也有很多,比如:Axure、Justinmind、Mockplus和Proto.io等等,種類之多,數不勝數。
但是,這些工具無一例外,都在宣傳自己的過程中說自己是快捷迅速的。我們平時說的Axure,全名叫做Axure RP,而RP代表的意思恰恰就是Rapid Prototyping(快速設計原型);Mockplus也說自己是更快更簡單的原型設計工具。既然都說自己是快速簡單,我們今天就來比較實際操作一下,你們到底有多快。
頁鏈接設置:速度平分秋色,可視化體現差異
在Axure所有的交互設置中,頁面鏈接是最簡單的一種了,只需要點擊右側屬性面板中的創建鏈接,並在下拉菜單中選中需要跳轉的頁面就可以了。但是Axure在這一過程中有一個明顯的不足,就是對於可視化的缺失。如果在這個項目中各個頁面的名稱比較相近,那麼這樣使很發生鏈接錯的情況的。
而Justinmind應該是也體會到了Axure的這一問題,它採用的是一種拖拽的方式來實現頁鏈接的設置。但是這似乎並沒有真正的解決可視化的問題。因為,這個表示拖拽的圖標實在太小了。
如果說Axure和Justinmind比較相似,那麼http://Proto.io和Mockplus也應該是一見如故了。兩者都採用了拖拽鏈接點的方式來進行頁鏈接設置的操作,而且這個拖拽的過程是有明顯的鏈接線顯示的。這就大大提高了可視化,從而降低了操作的難度。更加可貴的是,Mockplus中組件的鏈接點在停留在頁面上的時候還會顯示該頁面的縮略圖,這使得錯誤鏈接的可能性降到了最低。
組件交互設置:速度差異開始變得明顯
這裡的設置中,四款工具的在交互設置上的速度差別就體現出來一些了。Axure在這裡採用的方法是點擊添加用例,然後彈出一個設置的面板,在面板中選擇對應的命令,交互動作,和動效。Justinmind還是察覺到了Axure這裡設置的不方便,但是,就像頁鏈接的設置一樣,Justinmind也還是沒有拿出更好的解決辦法。設置中Justinmind沿用了Axure的模式,只是在選擇的過程中採用了下拉菜單。雖然在選擇目標時使用了可視化的窗口,但並沒有從根本上解決操作繁瑣的問題。
反觀兩個年輕人,Mockplus和Proto.io在組件交互設置的模式上使用了更加簡單快捷的拖拽,也就是在各種工具中流行的Drag-and-Drop。只是簡單的對鏈接點的拖動就可以實現組件之間的交互。Mockplus的命令選擇相對更加直接,Proto.io的交互命令可能還需要在進一步的進行調整。這種在交互設置上的拖拽模式和高度的可視化,使得操作中目標更加明確,動作更加清晰,Proto.io的組件大綱的功能也使得組件之間的關係更加有條理。Mockplus也在計劃推出相應的功能,這裡我們一起期待一下吧。
組件交互狀態設置:Mockplus只需三秒。
作為一款新興的原型設計工具,Mockplus不斷強調自己快速和敏捷。在大部分原型設計工具軟體沒有為組件的交互狀態單獨設置功能選項的時候,Mockplus已經有了相對完善的組件交互狀態設置的體系。主要的操作體現在屬性面板中,這個閃電一樣的標誌就是交互狀態設置的按鈕,在彈出的面板中,可以設置滑鼠經過和滑鼠落下兩種狀態。而並不是像Axure、Justinmind或者Proto.io那樣把交互狀態作為一種組件之間的交互來設置。這個功能看似簡單,但是它從這一個方向推動著原型設計向著更簡單、更快速靠攏。像這樣改變顏色的交互狀態設置,三秒足夠了!
我們不可否認,Axure和Justinmind在功能的全面性上確實佔有優勢,但是我們也一樣能夠像Mockplus這種新興的力量的崛起。隨著行業發展,大家對原型設計工具需求和要求不斷提高,希望這樣的新力量會帶給我們更多的驚喜。交互設計的工具相對比較多,根據工作中的重要性排個優先順序的話,我們可以這麼看,第一個先是原型製作,在原型製作中很流行的軟體有幾個,一個是sketch,這個有個比較麻煩的地方就是他只是用於Microsoft系統,也就是說蘋果電腦才能用,windows電腦的同學有點吃虧,但sketch真的是一個特別好用的工具,我現在也是在用這個軟體。
然後下一個是axure,axure其實是特別適合去做動效的,因為它本身的功能特別龐大,它本身特別適合去做PRD,axure用起來需要懂一些函數知識,但是這些函數知識並不難,很快上手。
還有一個國產軟體是墨刀,這是一個快速生成原型的產品,有web端,也有客戶端;還有就是principle,這個也是一個做動效的軟體。這就是四個比較常用的軟體。
下一個是做思維導圖的工具,process on,這個也是一個很強大的在線軟體,它很棒的一個地方在於每次你在做了編輯和修改之後,你可以傳到雲端,下一次你換了機器,你就可以直接下載下來直接用,此外還有mind manager,還有X mind等。
那關於用戶研究,用戶研究不僅僅是產品經理的事情,交互設計也是要去了解的,這是一個跟人打交道的職業,充分了解了用戶, 對你工作特別有幫助,那麼在做用戶研究的時候推薦用問卷星和EXCEL,問卷星做問卷,EXCEL來整理。
除了上面這些,還有經常用到簡單的ps、ai,還有一個重點要提到的,就是紙跟筆,很多同學覺得要用軟體才顯得高大上,其實並不是。因為交互設計的產出在一個項目中很多時候是中間輸出,對精美度沒有那麼高的要求,其實紙筆是一個很快能實現你的想法的工具。
至於怎麼學習和應用工具,在網路上有很多學習網站,大家可以在學習網站上搜索一下,專註一兩個工具進行學習,很快就能上手。另外,這些軟體下載下來如果長時間不用的話很快就生疏了,所以希望大家下下來之後能夠經常地去使用它,多去進行案例實踐,例如可以用這些軟體去仿製微信這樣的產品,仿製它的原型界面,仿製它的動態效果,這個對大家去熟悉這些工具是非常有幫助的。
謝謝!
交互沒有「應該」學這個說法。是廣撒網,挑最適合自己工作方式的軟體組合。
- axureRP,交互設計和快速原型。有個網站,教程和案例比較多:http://www.axure.org
- MSvisio,流程圖的最佳設計軟體。
3. 建議裝個firefox4.0,並安裝firebug1.7的插件,具體好處,隨便百度一下都知道。
4. 如果做軟體界面的話,用騰訊的UIdesigner5. 要學習和參考你中意站點的設計,「Dorado標註」是個不錯的軟體6. fireworks,老牌網頁製作軟體,圖片的大小和質量控制,和強大的批處理功能,簡單的網頁輸出和交互功能,都會讓你事半功倍。7. notepad++,一個輕巧的編程和記事本軟體,可以有插件,用起來非常爽。8. UEstudio10.30,也是個不錯的編譯器9. 下個PDF閱讀器,推薦adobe的。或者google瀏覽器也可以。10. chm製作工具—Easy CHM,可以把你看到的好的網頁內容,製作成chm文件,方便攜帶和閱讀。11. office文檔閱讀器和office軟體,具體的,我上個連接給了你下載地址,那個版本很全的。希望對你有用。以上,不管你多牛,不管你多菜,這些工具,充分發揮潛能,絕對能勝任任何工作。而且性價比超高!強烈~
強烈~強烈建議學:Axure問這個問題的應該是一個學生,或者很新的新手。看到樓上的朋友們說了那麼多軟體,首先他們說的都是對的,但新手的話,一下子學那麼多是學不過來的。不如就給一個答案,就學Axure就頂用了。我以做交互一年多的實際工作經驗,負責任的告訴你:Axure可以解決80%的問題了。包括:思維導圖、流程圖、概念模型。。。我都是用Axure來做的,習慣了,速度不比其他軟體差然後,Axure很好上手,非常簡單。我都是拿著軟體就用,摸索幾下就會了,遇到不會的,就問度娘,一般都會找到答案。也有看過什麼「Axure教程」視頻,但看一會就看不下去。。。Mindnode: 畫腦圖用的;
Sketch:畫原型線框圖;Protopie:製作帶交互的高保真原型,驗證交互,說明方案用。以上均 for Mac.2017年,如果你還想在設計領域尤其是交互設計領域從容前行,請學好編程和開源硬體吧,與其紙上談兵不如親自動手操作,及時測試與迭代~對於初學者,小編還是要再次科普一下開源平台的代表——Arduino。Arduino是一款對設計師非常友好的工具,它是一個便捷靈活、方便上手的開源電子原型平台,包含硬體(各種型號的Arduino板)和軟體(Arduino IDE)。Arduino能通過各種各樣的感測器來感知環境,通過控制燈光、馬達和其他的裝置來反饋、影響環境。
下面就讓我們走進同濟大學設計創意學院的剛剛結束的"開源硬體與編程"期末作業展。
為了讓大家能夠更為清晰地一睹這些作品的全貌,小編實地採集了一些近景,大家可以結合院方製作的炫酷動效圖以及文字解釋綜合體會~
SOL
陳茂爍,許可,高茜瑩,蔡旻皓,袁嘉偉
這是一個燈光音樂結合的演奏裝置。由四個樂器、四台射燈和中間一個由多個稜鏡組成的光束折射台組成。四個樂器有不同的演奏方式,演奏時射燈會隨著各自連接的樂器的節奏而閃動,射燈的光束照射到中央的折射台上,變幻出絢麗的燈光效果。
Ebru
劉琳,邱夢實,陳岩平,張益翔
Ebru是一種傳統的土耳其繪畫,將特別的顏料倒在水中,通過勾勒形成美麗的花紋。作者讓人手的運動和這樣的繪畫方式結合起來,利用針管、滴管和傾倒三種不同的方式,將顏料滴入水中;又利用萬花尺的形式,在水面上勾勒出花紋。從而,生成了一幅幅美麗的畫面。
靈動桌面
徐醍,陳芝羽,余宗歷,張麗莎,尹少映
作品由一系列可與人互動的桌面物品組成:茶壺、茶杯、檯燈等等。作者希望通過應用開源課的知識賦予日常物品自己的個性。比如,茶壺就像裡面住了人一樣,敲壺蓋時有東西會走來「開門」;茶杯對茶壺有依戀感,壺一靠近它倒水,茶杯就「開心」,檯燈像人一樣會無聊犯困,亮著亮著就睡過去了,需要人把它敲醒;筆筒似乎不甘只做一個盛筆的器具,筆裝多了就會把筆全倒出來。
Timing
李佳雯,岳正一,葉心怡,邢雨辰,楊惠琪,周晨曦
該裝置選取了10個世界代表城市,以直觀的時鐘和音樂的形式表現時差及其特色城市風貌。當有人靠近,呼吸燈亮起,當人繼續向前靠近其中一個時,該鐘亮起更奪目的燈,照亮鐘面的城市地標圖;每當人觸碰它一下,就變化一種特色音樂;人也可隨意開啟不同的鐘,聆聽音樂大合奏。
旋轉世界
林靈,徐文薏,賈雨薇,吳劍芬,邵晨霏
作品由五個大小不一,高低錯落的木圓盤組成。每個圓盤上的小物品都會以不同的速度,不同的方向旋轉運作。物品包含鋼管舞的兔子、小火車、跳芭蕾舞的女孩、玩單杠的熊和摩天輪,是一個觀賞性十足的裝置。
lego echo
易天雅,林俊燁,肖雨晴,王柏寒,王詩雯
由八音盒的音筒和老式打字機的造型出發,通過按下不同的音樂按鈕和放上不同位置的積木,作者想讓使用者能自助創造出專屬於自己的音樂。積木與音樂結合會有什麼化學反應呢?快來製作屬於你的音樂吧。
FYR
林超,連子宜,劉鈺,馬嘉欣,陳小溪
F.Y.R——「Find your rhythm」 這一次,作者用自由節奏打動玩家。充滿機械氣息的齒輪觸發以鼓點為主的節奏型,而節奏又由齒輪上規則排布的孔洞決定。加之手搖桿的觸動方式,節奏彷彿玩家搖出了一段屬於自己的節奏。然而只有節奏難免單調,這也無妨,只需輕觸Minion背部,便有音樂響起。搭配音樂「搖動」節奏使之契合,在挑戰中收穫樂趣。
Taste Color
劉雨晴,蔡妍妮,張言,韋明明
使用者挑取一個顏色,通過顏色的RGB值,調一杯屬於該顏色獨一無二的飲品。每個容器中液體味道不同,根據RGB值所調製飲品味道也不同。「品嘗」不同的顏色。
自然之聲
章雨晨,寧莉,成思旖,駱周妍,馬睿鈺,鄧可兒
整個裝置以微景觀為主,由五個塑料球組成,分別代表著波濤、鳥鳴、雷雨、風雪和火焰這五種自然界中常見的聲效,通過各種不同的互動方式觸發,使人感覺自己彷彿擁有了操控自然的能力。
DJINNI
王敏萱,胡可兒,傅文睿,庄明昱,楊睿文
裝置由掛滿鎢絲燈泡的許願樹和許願池組成,用懸掛式的原木框架結合為一個整體。呈現不同速度閃滅的鎢絲燈燈效結合語音和音樂音效,營造一種將投幣許願和許願簽許願兩種形式結合音樂燈光的特定許願情景。將許願具象化,轉化為可視化的燈光和柔和的音樂。
蒲
謝冰潔,姚瑤,帥夢瑩,廖春楠,丁泳文
線的纏繞,面的拼接,在多變的光影下組成蒲公英幻美的身影。在明亮的公共空間中,它以幾何與線段的隨機組合展現簡約優雅的現代美感,黑暗中,它又能將調皮的音效穿插在不斷變幻的光影中,帶來出乎意料的驚喜。「蒲」的靜與動中,蘊含的是自然的無與有,生命的起與落。
可控時間
朱倍佳,袁一薇,郭思哲,沈曦哲
為什麼12永遠在上?6又永遠居下?如果有那樣一個鍾,它的數盤不循規蹈矩,隨你心情擺放。今天令你最為期待的時刻是幾時,那你便可以把這一時刻擺於最顯眼的高位,這並不影響時間的準確,鐘錶仍然會告訴你正確的時間,而這又會是你獨一無二的可控時間。
puzzling box
康景元,杜木瑞,尹佳麗,呂欣,冷榃茜,陳澤世
這是一個解謎的盒子。每一層有不同的玩法。從下往上層層遞進。當你通到最後一關時,小箭頭會發光一下下,[這時你投入一元,有驚喜等你。]
據了解,在國內,絕大多數院校目前還沒有像同濟這樣完善的開源硬體教學。但是真正聰明且上進的小夥伴並不會受制於學校的教學局限,而是在課餘時間認真思考自己的設計師成長之路,努力補全作為優秀設計師所必備的技能。幾年前的問題,不過現在市面上的軟體界面開發工具也多起來了!我就說說幾個必要的學習界面開發的技巧和工具的推薦!1交付設計(界面開發)要滿足審美條件和行業習慣2響應式設計滿足各種平台需求(電腦、PAD、手機等)3回歸測試(使用者的感受反應,及以後修正升級)4習慣開發者的孤單與快樂各種工具:Axure原型設計工具,dev界面多重設計工具(視頻學習地址:DevExpress ASP.NET在線視頻課程),bcg界面設計工具,bootstrap響應式設計。新手學習首先是要掌握html最基本的代碼和bootstrap響應式設計與Axure原型設計工具。有基本以後,可以工具掌握的語言如c/c++、c#、java等等選擇界面設計工具。很多視頻學習網站,如:專業的ios程序開發視頻教程https://developer.apple.com/library/ios/navigation/bootstrap響應式設計:http://ninghao.net/video/461界面開發視頻教程:DevExpress WinForms在線視頻課程
上邊的答案都是怎麼回事?一個正二八經的軟體都沒說!竟然還有office和pdf、AI這種推薦!這些軟體和交互有什麼關係?如果這樣,你們為何不推薦:滑鼠和顯示器呢?!不是更必要嗎?
交互(先不說交互設計了)是個非常跨界的事情,現在大眾對它的需求一般是要不同專業的人協同創作的,從實際操作來說,中間任何一個人都是不可或缺的,但是作為交互中樞的純粹意義上的交互設計師,至少是會一點:MAX/MSP,PROCESSING,UNITY,PUREDATA,OPENFRAMEWORK之類的軟體,它們各有優勢和側重點,max和puredata等的教程就在軟體中,以案例形式娓娓道來,每個不明白的object都可以直接呼叫help檔,可惜沒有完整中文翻譯,不過字面意思並不難。
交互本來是個樸素的事情,但是現在說到它都是要通電,都要有電腦,都要有計算,基本狹窄到人機交互的小範圍里。其實交互主要是一種邏輯上的創造,但是這個邏輯是要從人腦出發再翻譯成軟體語言的(比如代碼、比如max里的objects和線條)。
不過只會軟體(至少2、3種)還是不太全面,除了最常用的各種感應器、燈光、音響、投影、LED屏、kinect之外還有每個作品、項目會獨自用到的硬體設備,它們怎麼接上電腦,數據怎麼進入軟體,又怎麼從電腦出去驅動某個東西,都是軟體之外的事情。
寫的亂,以後再補充。通宵沒睡覺。。。我做用戶體驗這些年用過的就有balsamiq,omnigraffle,sketch,invision,最終現在用得最多的居然是AI和keynote,然而最方便的還是白板和馬克筆。工具不重要,重要的是設計思維。
交互設計主要在於設計軟體的操作流程、樹狀結構、操作規範等。一個軟體產品在編碼之前需要做的就是交互設計,並且確立交互模型,交互規範。
學習交互設計的話,需要學習:
1.掌握交互原型設計原理,了解交互設計準則,熟悉常見的互動式設計規範Axure
2.Axure軟體界面及功能介紹、Axure元件的介紹、Axure事件的觸發、Axure條件的設置、Axure變數的介紹與使用、Axure函數的使用交互設計項目實訓 3.利用Axure RP軟體進行交互原型設計,通過全真項目實訓掌握企業需求學習的軟體很多,相對來說也是較為複雜的,零基礎的人一般就會去培訓一下,有基礎的人開始學的時候會自學,或者遇到不會再去請教別人,了解清楚自己適合學設計的程度再選擇學習方式很重要,分享一個之前試過的鏈接:http://t.cn/RIEKQHD,共享,如果有更好的也可以分享給我喔
推薦閱讀:
※產品設計中,如何理解「軟體只是一個表現的工具,重要的是你的思考過程」?
※有什麼好軟體可以讓交互設計師在手機上實現移動應用的可交互原型?
※互聯網設計可以轉行到傳統行業設計嘛?
※如何量化 UE、UI 績效標準?