2015-3-24 周周
藍藍設計( www.miumiuwan.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
每一個扁平化界面設計，都是我們的心靈碰撞致力于最棒的 metro ui 設計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
本文全系列滿滿干貨，是從眾多交互設計前輩們分享的寶貴經(jīng)驗里挑選出的最實用的方法，不僅能讓你徹底了解交互設計，還能幫有志在這個領域發(fā)展，卻苦于沒有老師的童鞋，從零開始學習成為一名優(yōu)秀的交互設計師。
在校大學生、想轉(zhuǎn)行的設計師還能在這兒得到前輩的實用建議，想進階的交互也有職場系列經(jīng)驗分享，文末還有超贊的資源奉獻，干貨量大，推薦童鞋們收藏 ：）
超星網(wǎng)產(chǎn)品總監(jiān)@張淼程 ：交互這個說法來自于國外，交互的名詞形式是interaction，形容詞是interactive，交互設計的英文則是 Interaction Design。
問題是到底什么是交互？這里不給任何學院派高深的解釋。
在我看來”交互”其實很簡單。
“你來我往”謂之”交互”；這里的”你來”指的是”輸入（input）”，”我往”是”反饋（feedback）或輸出(output)”。
如果只有”你來”沒有”我往”就不能稱之為交互。
你點一下鼠標，電腦屏幕馬上告訴你”你二姑的菜就被你偷了2棵”——”點鼠標”是”你來”，電腦的那個提示是電腦給你回饋的”我往”。
這就是最簡單的一個交互。
交互可能存在于人與人之間，也可能存在于人于物之間。
對于交互設計師來說，這個物可以是電腦，或者手機，MP3播放器……一切需要你work on的產(chǎn)品。
2，交互設計師的一天是怎么度過的？
@可風f 檢查了一下我的谷歌日歷，才發(fā)現(xiàn)一天做的事情竟然這么雜，概括起來的話可以又這些吧：
一，計劃整理：
1，剛到公司第一件事就是整理一下昨天的事情，哪些完成了哪些沒完成，接下來要怎么跟進的；
2，檢查郵件，制定計劃表，今天可能會來什么需求，什么會議，什么問題，提前做好準備；
3，看看發(fā)出去的東西是否收到反饋，檢查一下項目進度表哪些可以去對效果了，加入計劃表；
4，約人，包括有PM要來提需求，以及約別人確認方案，都提前在QQ上說好，然后預定好會議室之類的；
大概早上要花半個小時都干這些吧！
二，對需求：
就是產(chǎn)品經(jīng)理來提需求，然后和他們對一遍，目標當然是能夠正確的理解并整理好這些需求，方便開展接下來的交互設計；
在對之前通常會大概了解一下相關方面的知識，看看競品，準備好材料。
對需求的時候，必須要搞明白的三個問題：
當然是和PM一起想這些問題，PM品可能有的只能回答到第一條。還有對需求的時候聚焦的核心是產(chǎn)品目標，其他不相關的比如PM說想做個轉(zhuǎn)場動畫，想分3步完成這種話都我一般都會主動過濾掉，這個應該自己交互自己獨立思考的，不能受PM的干擾。
三，思考交互方案：
其實對需求的時候往往大腦中就已經(jīng)有相應的方案了，但是要把方案細化，每一個步驟的走過去又會發(fā)現(xiàn)很多問題，然后一個問題又引出很多不確定的點。所以這之間還會有很多參考，溝通，反復的環(huán)節(jié)，需要畫花時間還挺多的，但最終想法清晰的落地時候只不過是畫一個線框草圖分分鐘的事情。
四，跟進：
1，設計方案出來之后找PM確定，征詢視覺和開發(fā)的建議。方案確定下來之后還要寫一個很好地交互文檔給領導，產(chǎn)品，設計，開發(fā)等人一個個講明白，確保他們都懂了；
2，上次設計的部分開發(fā)接近完成，要去和開發(fā)對一下效果，看看實現(xiàn)的如何，是否有偏差。在開發(fā)階段發(fā)現(xiàn)一些以前沒有想到的問題要酌情給出解決方案；
3，產(chǎn)品上線后的反饋如何？用戶反響怎么樣，喜歡還是罵？罵的都是哪些內(nèi)容？根據(jù)數(shù)據(jù)反饋，設計的流程轉(zhuǎn)化率如何，點擊量高嗎？問題都是出在哪里等；
其實最怕的就是看反饋，總擔心自己當時天花亂墜給產(chǎn)品經(jīng)理們的保證實際上上線了效果完全不一樣，好打擊權威性啊%>_<%~
五，參加各種會議：
參加產(chǎn)品經(jīng)理們的例會，參加視覺設計師的例會，還有自己的會議，各種分享會交流會等。其實有些人覺得無聊，但我都超認真的，尤其是產(chǎn)品經(jīng)理的會議，可以發(fā)現(xiàn)很多產(chǎn)品們的問題，接下來的產(chǎn)品戰(zhàn)略還有產(chǎn)品目標，方便前置的準備自己的工作。而且還可以學到很多他們的溝通和思考方法，方便到時候的PK！
六，充電：
1，看各種設計，一般是看花瓣，Dribbble – Popular，或者自己下載一些應用把玩一下；
2，看各種文章，也就是網(wǎng)站到處轉(zhuǎn)載的那些CDC，MUX的文章。不過現(xiàn)在覺得看多了大部分也就那樣，很少看到一些新穎的思想或方法，所以更加關注一些跨界的設計或生活中的書；
3，刷知乎，微博，朋友圈，你們懂的~
七：其他時間：
大部分都在想如何能讓自己做的更好一些！
本文作者愛奇藝無線UED負責人@愛奇藝_曉生，原文刊發(fā)在作者博客 daichuanqing
1，交互設計師需要怎樣的知識體系？
看過各種分析，交互設計師需要具備什么樣的能力 ，但個人始終專注于探索如何提高專業(yè)能力，一是興趣所在，二是學習知識能得到成就感。寫博客可以督促學習，動機非常單純，沒有關注過什么個人品牌和增加名氣，博客也不能成為評價設計師的標準，作品才是評價設計師的唯一標準。學習和提高個人工作能力都是以做出優(yōu)秀作品為目標。
設計師各個階段需要學習不同難度的知識和做不同的事情，正如我將學習資料劃為三個梯度，希望設計師能由淺到深的學習。一開始沒有項目經(jīng)驗，缺乏基礎知識，不宜硬啃高難度的資料。
適合剛?cè)胄胁㈤_始接觸項目的設計師學習 ：
1.設計的美學知識。
2.交互設計的基本原則，如一致性、減少輸入和減少操作步驟等等，這些原則容易理解，通過學習案例和閱讀通俗易懂的書籍迅速地掌握。此階段適合泛讀《交互設計精髓》等書籍，不宜精讀，沒有項目經(jīng)驗的話，讀完之后不知所云。
3.平臺特性及其設計規(guī)范，通過閱讀平臺的設計規(guī)范對設計思維的形成非常有幫助，特別是Microsoft和Apple的文檔。
4.做交互設計方案的方法，如繪制流程圖、原型圖和撰寫交互設計規(guī)范文檔，難度不大，只是需要多次的練習。但這種文檔很少會對外分享，學生很難學習到這部分內(nèi)容，這會影響到他們表達自己的設計想法。
適合有3個月以上項目經(jīng)驗的設計師學習：
1.特定控件設計，如標簽欄、標簽欄、列表界面和彈窗口等，匯總已有設計的優(yōu)缺點和設計規(guī)律。
2.特定界面設計，界面中如何呈現(xiàn)特定的信息，如應用程序首頁、個人資料或者數(shù)據(jù)流界面。
3.獨立常用功能設計，如注冊登錄、刷新和功能引導，需要了解功能背后的技術知識和產(chǎn)品策略，需要繪制流程圖，組織線性的操作流。你需要調(diào)研已有產(chǎn)品，并試圖區(qū)分它們的優(yōu)缺點。與技術人員溝通是學習技術的有效途徑，你可以有意為難產(chǎn)品經(jīng)理，讓他們講解各種產(chǎn)品策略，掌握更多的信息對于做出正確的設計決策和擴展眼界非常有幫助。
適合具有一個以上完整項目經(jīng)驗的設計師學習：
1.多項功能設計，一個界面融合單獨的功能，需要應用到設計方法和架構的思路。設計方法是挖掘用戶需求和推動設計優(yōu)先級的情景故事法、卡片分類、人物角色、訪談和問卷等。這些方法的學習不是必須的，你可能工作兩年從來沒有使用過它們，但也設計出了不錯的產(chǎn)品。這些方法可以作為了解性知識，當有需要時再深入學習，方法只能幫助設計師發(fā)現(xiàn)問題和避免問題，但不能對結(jié)果起到?jīng)Q定性作用。
2.方法和已有的設計風格研究，以總結(jié)為主，最好能應用到自己的設計當中去，千言萬語不如動手實踐。
3.競品和優(yōu)秀產(chǎn)品分析。這件事情看起來很普通，如果沒有相關的設計知識和分析能力，只能生搬硬套大概念，無法綜合多種因素分析，壓根找不到切入點。
4.的系統(tǒng)和產(chǎn)品分析。之前的學習都知識的深向發(fā)展，但是這一條需要設計師具備較為廣闊的知識面，不僅僅限于自己參與過的產(chǎn)品。如果每兩周專注研究一個方向，你將比八成的人更熟悉。
通過不定期下載多種同類應用程序，查閱資料，已經(jīng)研究過輸入法、LBS、個性推薦、語音輸入和閱讀類等產(chǎn)品，雖然從來沒有參與過這些項目，但從中可以加深對設計的理解，做好知識積累。
5.掌控技術。設計師需要對技術有掌控能力，就像工業(yè)設計師掌握各種材料的特性才能游刃有余，這也是嘗試彌補自身不足。web端交互設計師要求會寫html和 css，一是便于設計，二是鍛煉邏輯思維能力，而手機交互設計師對技術普遍缺乏了解。早期交互設計師是從程序員中分離出來的職位，用來彌補程序設計的不足。所以我更喜歡聽技術講座。
純粹的技術路線比較難，如果你對社交、搜索和電子商務等領域有深入的理解，這可以增加個人在職場的不可替代性。
個人還在探索，還是以能做出好產(chǎn)品為目標，主要方向是：
1.產(chǎn)品架構，web端已有架構的理念，手機端也會面臨這個問題。
2.設計趨勢研究，比如操作方式，做預測是最難的。
3.產(chǎn)品發(fā)展趨勢，如未來LBS產(chǎn)品在手機端如何設計 ，如何為用戶的生活帶來便利，這需要設計師具備預見能力和判斷力。
……
學習中需要注意以下幾點：
1.學習宜由淺入深，知識需深入淺出，早期可以挑一 些簡單的產(chǎn)品研究，如閱讀類產(chǎn)品，先形成適合自己的學習方法。題目不宜太難，有位學弟想研究手機支付，資料很少，無從下手，會打擊到自信心。
2.工作太忙，也要抽空學習，這影響到長期發(fā)展。挑選工作時，盡量加入學習型團隊。每家公司都會對你許諾發(fā)展空間，甚至是期權，你完全可以忽略。
3.給自己找個好老師，如果你的運氣足夠好的話。
4.少扯淡，這種忽悠外行人的伎倆對你沒有好處，純粹是浪費時間。
5.理論不是必須的，不要看到別人寫博客有心理壓力，貌似自己不這么做無法體現(xiàn)自己的專業(yè)能力。如果你能動手設計出優(yōu)秀的產(chǎn)品，理論完全可以忽略，實踐甚于理論。
6.不要迷信相信理論和從這博客中看到的，保持獨立思考。設計團隊中最可貴的人才是經(jīng)常提出自己不同見解的，合理地質(zhì)疑設計方案。
7.不要瞎編造和固執(zhí)，當你試圖以某種理論設計產(chǎn)品或者說服他人時，確保自己能舉三個以上的案例。
騰訊ISUX交互設計師@王閱微 ：現(xiàn)在這一代的交互設計師，除了留學回來，或者西安交大等幾所國內(nèi)大學科班出身的，基本都是從各種其他專業(yè)轉(zhuǎn)過來的，從相關設計專業(yè)轉(zhuǎn)過來的，也寥寥可數(shù)。
基本上每個人都有自己成長的不同路徑，不同方法，找到屬于自己的那條路是最重要的。
專業(yè)上的提升，其實我覺得不是問題，只寫寫我覺得對于“非設計專業(yè)”的同學進入“設計”領域可能比較重要的幾點。
1. 理解什么是設計
非常多的人入行后會關注”交互設計”前面的”交互”，卻容易忽略后面的”設計”。
但只有理解什么是”設計”，才能更好地理解什么是”交互設計”。
2. 學習關注人，而非僅僅是產(chǎn)品
我在工作了很久之后才反思到這點（就是因為對設計的理解不深）。
設計原本就是為人服務的，而交互設計尤其強調(diào)”交互”的過程。要學習不只關注產(chǎn)品，還要關注人。
3. 提升自己的品位，對美的感受力
品位有多重要？看看Jobs和Gates的差別就知道了。 不要忽略設計專業(yè)出身的人的優(yōu)勢：對美的鑒別和感受能力， 這會影響一個人的品位。
許多 非設計專業(yè)的人因為接觸相對較少，也沒有經(jīng)過系統(tǒng)的訓練，在感受力和鑒別力方面會顯得比較弱。表現(xiàn)在設計中就是缺乏美感。
有人可能不理解”交互設計師”為什么也需要。我想說，只要是設計師，就必須擁有好的品位。
4. 多讀書，完整地讀書
很多人覺得讀書沒有用，非常理論，無法實際運用……對于新人來說的確是這樣的。
但是，非科班出身的人面對的一個非常大的挑戰(zhàn)，就是缺乏完整的知識和思維體系。
所以，讀書不僅僅是為了關注具體的理論或內(nèi)容，更重要是去感受和了解作者的體系是怎么樣的。
5. 盡可能地擴展知識面
尤其是在互聯(lián)網(wǎng)產(chǎn)品設計流程中，現(xiàn)在的交互設計師扮演了一個承上啟下的關鍵角色。
IDEO設計師@chazeffect ：平面設計的理念這個詞有點廣。讓我啰嗦點解析一下思路，然后試者回答如何進行”轉(zhuǎn)換”理念…怕聽來有點理論，所以加上一些例子來比較。
邏輯上來說…
理念不變，變化的只是媒介與工具的角色
所以說如果一個海報傳達一個設計者的理念，那交互設計只是另一種手段，轉(zhuǎn)變的都是”閱讀”與”使用”體驗本質(zhì)跟媒體的差異?？梢钥匆恍┢矫嬖O計師涉足交互設計或互動藝術的案例。
比較極端但經(jīng)典的例子是Joshua Davis跟Processing的創(chuàng)始人。<- 被”媒介”轉(zhuǎn)化而啟發(fā)的設計經(jīng)典
設計元素的共通性
如果”理念”是像其他朋友提到的視覺、邏輯、流程…其實平面是有類似的元素。比方說報紙的導讀、字學跟”閱讀行為”為主的交互體驗是習習相關的。只是這個平面設計的項目性質(zhì)、成本是否與這些相關。
你看好的報紙、雜志設計，它的網(wǎng)站或iPad App也不會差到哪里去。FastCompany, NYTimes… Weird (遲疑中)
從兩個極端的角度來看，中間的轉(zhuǎn)換
影響力：（或許是共通卻無法比較的）
平面設計不見得只強調(diào)視覺上的愉悅。好的平面設計比任何非線性的交互設計更有效率的傳達情感、信息與發(fā)揮影響力。用戶體驗與情感真的能被設計嗎？really?
你看經(jīng)濟學人在最近日本大地震后做出的封面，沒有任何一個交互設計項目可以在這么短的時間發(fā)揮感染力。
有好的平面設計水平（sense）進入交互設計之后，能用更視覺化的方式”看見”體驗的痛點，并提出更人性的設計觀點。
說平面設計背景出身的只能做UI? 想想TED的創(chuàng)辦人–Richard Saul Wurman，他給這個世界帶來的TED體驗。
1，求職篇
創(chuàng)新工場用戶體驗總監(jiān)@uxworks ：有很多同學問我，學校沒有用戶體驗設計相關的課程，怎么才能把自己培養(yǎng)成一名合格的用戶體驗設計師。咱們不妨從了解和分析企業(yè)的要求入手，這里以創(chuàng)新工場為例：
具體可移步舊文：《怎樣才能成為一名用戶體驗設計師？上學OR工作》、《怎樣才能成為一名用戶體驗設計師？自我培養(yǎng)》
2，職業(yè)發(fā)展篇
如何從新人蛻變?yōu)榇笈＃?/p>
百度云UE負責人@elya妞 ：我還是個新兵，不是有所建樹的老鳥，不過受邀之下，也聊聊自己的看法。
首先，交互設計師要具有如下特質(zhì)
在欠缺的方面，需要去彌補，比如我就要彌補數(shù)據(jù)分析能力、溝通能力、觀察和傾聽能力。
其次，要有自己信仰的設計原則，最好自己去總結(jié)
比如我的原則就是縮減、隱藏、附加、組織，每次拿這個原則去套用，檢查我的手機產(chǎn)品設計是否足夠的簡單可依賴。
第三，掌握很好的流程和方法
有自己擅長的設計工具和設計方法。遇到問題可以先明確需求，了解角色、場景、任務，再細分去做流程。交付的東西足夠?qū)I(yè)，有說服力，有很強的表意能力和演示性。
第四，要用項目來證明自己
一切都是空談，唯有拿得出手的產(chǎn)品，才是你的能力證明。所以，在你有選擇權的時候，要去選擇合適的產(chǎn)品，可以為足夠多的人，提供有意義的服務，可以體現(xiàn)自己設計價值的產(chǎn)品。不要為了賺錢，做一些亂七八糟的事情。要懂得，自己的職業(yè)生涯需要有意義。怎么去譜寫，把握在你自己手里。
第五，要有積極總結(jié)和分享的精神
交互真的是一個要活到老學到了的職位了，你要持續(xù)關注產(chǎn)品，交互設計方法，保持自己的精力充沛和創(chuàng)業(yè)無窮是很難的。在每個階段性的時間里，都要沉淀自己的案例，積累自己的理論，樂于總結(jié)和分享，這對你自己來說是個莫大的促進作用，對比人來說也是好事情。
第六，要有自己的品牌意識
這個我沒什么發(fā)言權，但是我覺得這個最重要。包含了你的工作方式，設計理念，為人處世，等等，最高境界，也就不過如此。你的作品，可以被稱之為XX出品。
3，職場溝通篇
與產(chǎn)品經(jīng)理意見不一致怎么辦？
百度@王煜UX ：作為交互設計師，給你幾條建議：
1.不要認為意見不一是壞事，交互設計師從設計體驗的角度為你的產(chǎn)品把脈，你從產(chǎn)品未來規(guī)劃的角度為產(chǎn)品建模。有意見才能檢驗彼此的觀點是否正確。
2.如果按你所說，交互對產(chǎn)品沒有做分析，產(chǎn)品形態(tài)和通用規(guī)則他不了解，那他在公司就是混飯吃的，你可以不搭理他，找別的設計師合作，實在繞不過認命吧。
3.如果按你所說，交互不了解產(chǎn)品未來規(guī)劃，那就是你的不對。前期調(diào)研和產(chǎn)品規(guī)劃你不給他分享，不讓他參與，設計師只能憑經(jīng)驗和感官設計，這是不符合”以用戶為中心的設計”，交互設計必須盡早介入項目才對項目發(fā)展有推動作用。
4.對于A/B方案，最好的方式就是測試，讓用戶測。
5.交互設計是一門有嚴謹方法論的科學，希望你能多和設計師溝通，沒有設計師的支持，你的產(chǎn)品即使功能框架沒有偏差，糟糕的體驗也會害了你。繞過交互設計這個環(huán)節(jié)，未來再去重視體驗，是補不回來的。
交互設計行業(yè)起步晚，流程正在逐步完善，不要低估這個行業(yè)的價值。
阿里巴巴交互設計師盧藝方：
Mockup Builder：
殺手級的原型工具 MockupBuilder最近才發(fā)布，很值得期待。他有非常多的功能：UI模型，交互的線框圖，頁面布局，客戶端原型甚至站點地圖和屏幕導航。
Tiggr：
協(xié)作制作原型圖 Tiggr的思想是給你需要做成最終稿的所有資源。你可以設計很多的元素，然后分享，其他的協(xié)作用戶會幫你制作相應HTML/CSS代碼，以達到最快生成。
Frame Box：
輕量級原型在線制作 FrameBox并沒有多么特別的特色。你可以拖放、設置大小、復制粘貼這些UI組件，但是他的特色在于你可以非常輕松的通過它的拖拽很容易就完成你的原型制作。
SimpleDiagrams：
免費版(Adobe Air App) simplediagrams是一個非常小巧的Adobe Air程序，通過他你可以非常輕松的實現(xiàn)自己的想法。拖拽組件，添加圖片或者便簽，導出PNG圖都是他的特色，通過添加一些小功能就能實現(xiàn)一個非常不錯的原型圖。
iPhone Mockup：
iPhone原型制作，在iPhone Mockup里面你可以使用鉛筆模式，也可以使用圖表模式的編輯器。不管你選擇什么，功能都是一樣的，都可以很簡單很方便的生成iPhone上的應用原型。你也可以分享給別人，就算你更改了設計，別人通過那個鏈接也一樣可以看到。
FluidIA：
fluidIA是一個在線的但是可以下載的富用戶界面原型設計工具。它基于面向?qū)ο蟮睦砟?，可以讓你快速完善。它設計的基本思想是團隊中的任何成員，無論是設計師還是工程師都可以自由的設計自己的原型。最近fluidIA的更新稍微慢了點，但是它仍是一個非常優(yōu)秀的線框圖工具。.
Pencil Project：
FireFox插件 Pencil Project是一個原型界面設計的Firefox插件，通過它內(nèi)置的模板，你可以創(chuàng)建可鏈接的文檔，并輸出成為HTML文件、PNG、OpenOffice文檔、Word文檔、PDF。還有什么可說的呢？這么優(yōu)秀的插件，是每個設計師和開發(fā)人員必備啊。
CogToolWin MAC下應用程序 CogTool是一個強大原型生成工具，他與別的工具還有一些不同，他可以對你的設計自動根據(jù)人類認知模型進行評估。你可以通過一些圖標啊按鈕啊圖片，生成一個描述，然后點擊評估的按鈕，他就會對你的設計進行人類認知模型的評估，他會告訴你一般人需要多久才能理解你的意圖。
Prototype Composer：
Prototype Composer可以讓你在真正的代碼編寫之前就看到網(wǎng)站是如何運行的。以前的那些無數(shù)的文字入口，復雜的數(shù)據(jù)結(jié)構以及技術含量不低的UML圖，這個工具可以讓你很方便的協(xié)作完成一個看起來能運行的程序。
DUB – DENIM（跨平臺應用程序） DENIM是一個跨平臺的桌面程序。他自己的介紹是為早期網(wǎng)站設計提供幫助的非正式工具。
它有很多理念來自于紙筆設計原型。你可以快速的畫出草圖，保證重要的功能優(yōu)先。但是跟紙筆的草圖不同的是，他還可以有交互和動畫。
最近還有一篇好文《推薦移動UI/UX設計師和PM使用的原型工具》，同學們也可以借鑒一下。