萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 以新浪微博為案例:網站交互設計初體驗

以新浪微博為案例:網站交互設計初體驗

以新浪微博為案例:網站交互設計初體驗 三聯

  9月初,我來到新浪微博UDC部門交互設計崗位實習。在接近四個月的學習時間裡,我對交互設計行業有了深一步的了解,認識到了交互設計師的一些具體職責。鑒於之前接受的知識大多來自書本或網絡上的文章,在校期間參與項目的機會並不多,因此,我對此次實習做了一些總結:一方面,希望鞭策自己,在以後的工作中有所進步;另一方面,也希望能幫助剛步入交互設計行業的同學更快的適應工作,更好地學習交互設計。

  個人認為,對於剛步入交互設計行業的設計師而言,在工作和學習過程中行之有效的方法可分為以下四個部分:

  第一部分:了解自己的產品

  一個項目的細節,包括它是如何開始,如何結束,中間有哪些階段,以及在整個過程中,交互設計工作應該處於什麼樣的位置,應該發揮什麼樣的作用,都應該從了解產品入手。如何了解自己的產品呢?可以從以下幾個方面來做到:

  1.多身份,多角色使用產品

  譬如微吧,以新手的身份試玩微吧,得到的引導提示是最基礎的,也是最為全面的;以賬號注冊時間為3-6個月的用戶身份使用產品,得到的引導和文案提示就與新手有所區別,涉及到操作權限的提示層的區別更為明顯,吧主與專家身份的操作提示與普通用戶得到的引導與提示在內容和形式上都有差異,運用多種角色使用同一種產品,有助於我們快速了解產品。

  2.梳理產品邏輯,理解產品架構,宏觀的認識產品內部邏輯及產品與產品之間的聯系

  成熟的產品內容很多,層級豐富,新用戶容易在使用時,孤立地理解單一頁面的結構和組件的細節,缺乏對產品整體、深入地思考。完整地梳理產品的結構,有利於我們整體地理解和掌握產品,為提出優化方案做准備。

  微博幫助中心產品結構梳理

  在接觸微博幫助產品時,我對幫助中心產品的站內結構和產品邏輯進行了梳理,對服務向導的頁面層級的重要性提出了疑問——“服務向導產品的結構比較簡單,內容較少,可以考慮降低該產品層級性”,也許觀點並不一定准確,舉這個例子也只是說明通過梳理產品的結構,新手是可以做到較快速地掌握產品邏輯,宏觀地理解看似復雜的產品。

  3.歸納總結體驗不足之處

  互聯網產品的特點之一便是迭代迅速,每一期的產品上線都或多或少因為決策、時間等原因存在著體驗上的不足。經過之前兩個步驟,我們對產品本身已比較了解,在參與頁面的問題走查時,也能避免認識上的不足帶來的一些疑問,准確地找到產品體驗不足之處。此外,對線上的產品進行問題走查還需遵循相應的交互設計原則:一致性、簡潔性、流暢性、及時反饋等。以“體驗一致性”交互原則為例:產品良好的一致性能夠降低用戶學習成本,培養用戶良好的使用習慣。一方面,表現為產品內部的體驗一致,系統內的組件形式與其他組件形式部分保持一致,建立產品與用戶之間的信任;另一方面,表現為產品與產品之間體驗一致,把一致的體驗延伸到多個獨立系統中,遵循共同的設計標准,避免用戶出現不適或陌生。

  通過上述3點,我們能比較順利地理解產品定位及框架邏輯,找到可優化的點,進而完成對產品的體驗。經過適當地歸納和總結,我們還可以整理出一份完整的體驗報告,為產品的二次迭代做准備。

  第二部分:多參與需求的溝通

  與提需求的產品經理不同,交互設計師關注的是產品的易用性、流暢度和操作感受。從需求文檔上來看,產品方更像是從宏觀的角度去提出產品設計的理念;而交互設計師,則是從更多的細節出發,去提升產品的用戶體驗。兩種不同的出發點決定了只有產品經理和交互設計師較好配合,友善溝通,才能夠准確地將產品策略轉化為產品原型,從而為後面的工作提供准確的參考。因此,需求溝通是交互設計師必備的一項技能,作為新人在溝通需求時應注意以下幾點:

  1.積極參與項目(與自己相關)需求溝通與討論。對實習生而言,工作中的溝通應從理解需求開始,確保與產品經理對需求的理解一致,以避免原型圖、視覺方案反復修改,增加工作量。

  2.對需求必須有自己的判斷。除了能做到對需求有自己專業的理解外,還能夠幫助產品經理理清思路,確定不同的角色、場景,並准確地梳理信息架構和任務流程。譬如在產品策略或營銷方案上的需求與用戶體驗相沖突時,設計師有責任提出更好的設計方案。

  3.每一次的溝通必須有效並可行。需求溝通與方案溝通時,出現的意見分歧務必及時解決,這要求雙方都了解需求的真正目的,抓住溝通的問題本質——需求與用戶體驗,最終給出相應的解決方案。

  第三部分:給出“完整”的設計方案

  之所以提出“完整”,未提出“優秀”,是因為優秀交互設計方案的產出是一個漫長的過程,它需要我們不斷地積累設計理論,不斷地接觸優秀的設計案例,不斷地參與實際項目並一次次完成基本的需求。作為剛入行的實習生,給出完整的方案設計,是提出優秀的設計方案的基礎,培養良好的習慣,有事半功倍的效果。

  1.設計以解決需求為出發點

  作為交互設計新手,接到需求並制作方案後,為自己的方案添加了若干功能,尤其是想到競爭對手還未做時激動不已,卻忽略了需求的本質,設計出的方案不僅沒解決需求,還給需求本身帶來了不必要的繁瑣操作,猶如你在賣微波爐給別人時,別人想買的其實只是個熱饅頭。而且,經常會出現一種現象——你所認為的好功能,放在產品裡面,也許會帶來很糟的用戶體驗。

  2.養成正確書寫交互文檔說明規范的好習慣

  一份完整的交互文檔應包括:文檔的命名、文檔的內容、文檔的講解與交付。其中文檔的內容主要包括:更新記錄、網站地圖、關鍵任務流程、線框圖及說明文案、交互規范五個部分。交互文檔的准確書寫,強化了我們對設計的思考能力,既方便了需求方快速理解原型並參與討論,也方便了他人查看項目進度和最終的輸出結果。

  交互文檔說明規范

  3.注重細節,主要指交互層面的細節和線框圖繪制層面的細節

  舉個例子,在交互層面,當鼠標放在文字上的多種hover狀態,各種狀態是否匹配了應有的場景;某個地方的提示是用背景遮罩式彈層,還是氣泡型提醒層;按鈕的文案是應該用取消,還是用結束;鼠標懸浮出現的效果反饋,是否應單擊後出現等等,這些都是需要斟酌的交互細節。在線框圖層面,行間距是多大,字號是否統一,一、二級鏈接色是否被清晰地區分,模塊之間的間距是否合理,邊框顏色的深淺、邊框的粗細是否一致等等,都是體現設計師邏輯思維嚴謹的地方。不難看出,養成注重細節的良好習慣,是交互技能提升的基礎!

  按鈕hover狀態

  4.保持統一的使用體驗

  我們在對需求進行方案設計時,需注重線上產品體驗的一致性,如最初了解自己的產品一般,同一品牌子產品在體驗差異化上必須得到有效的控制,避免出現異類的情況發生。當然,需求也不僅僅是優化現有產品,如新增功能、調整產品的設計策略等,再結合需求進行創新的同時,我們還需注重設計過程中的組件樣式與已有產品體驗的一致性,如:提示層、按鈕形式、右側模塊樣式等應盡量保持一致。

  當然,隨著設計方案能力的提升,我們可以通過自己思考,用最合適、最高效的方式制作出合理、完整,甚至是優秀的設計方案。

  第四部分:跟進產品需求的一些環節

  一名合格的交互設計師,需要配合產品經理跟進產品需求的一些環節:在需求的輸入階段,設計師可與用戶研究人員配合,了解用戶的特征和使用行為;在需求的確認階段,設計師可以主動提出問題、對需求進行合理的重塑;在需求的設計階段,設計方案會經過不同職能設計師修改或完善,交互設計師需要跟進方案傳達和設計,保持與視覺、前端、結構工程師進行技術上的溝通,確保方案可行的同時,還需確保方案在使用體驗上達到最優,使方案被真實的還原;此外,產品上線後,設計師還需要參與線上產品的測試,准備好下一次的迭代……

  結語

  實習的時間並不長,想想自己在實習過程中走過的一些彎路,總結了這些內容,希望能借此更好地約束、引導自己做設計,也期待今後能做出完整、優秀的方案,解決更多實際性的問題。

  (微博UDC原創博文,轉載請注明出處,歡迎訂閱 )

copyright © 萬盛學電腦網 all rights reserved