[用戶體驗] 交互、視覺、前端做什麽？如何做？

項目經理說：“今天我們要實現壹個新聞管理功能，用戶是編輯人員”。<–新聞管理是壹個大目標。 接著說：“用戶可以發布、編輯、刪除、復制、轉移”。<–發布、編輯、刪除、復制、轉移這些是壹個個小目標。…………那麽大家都關註些什麽？怎麽做？產物是什麽？交流對象是誰？ 壹、Web交互設計師關註點：數據、操作、業務流程、產品遠景、目標市場、期望值、可用性、易用性等。 思路：可用->易用->喜歡用->品牌度數據：數據分析、整理、提煉到信息架構。精簡、可讀、語義化、表達壹致、少即是多。操作：制定用戶目標，操作功能點細化。流程：精簡、順暢、愉悅、邏輯嚴謹。操作流程：擬定用戶角色（市場調查）、需求分析（提煉數據轉化為信息架構）、功能設計（功能規格文檔）、任務分析（根據數據和功能，制定任務，通過多任務的完成最終實現用戶目標）、流程設計（制定操作流程）、情景分析、導航設計（導航是壹個站點的路標，迷路後的逃生門，壹個好的導航能第壹時間讓用戶知道這個網站的用途，都有哪些內容等）、結構設計（把數據和功能點轉換為可操作界面）、產品原型設計（線框圖原型和HTML+CSS靜態文本原型）、故事板設計（模擬界面的交互，把自己想象成虛擬的用戶角色去完成整個交互情景，體驗整個流程是否順暢，數據是否簡潔、是否對目標用戶有用、數據表達是否明確）、改進用戶體驗、提升產品品質。產物：sitemap（網站地圖即信息架構）、功能規格文檔、流程圖、usecase、中低精度的線框圖、故事板。主要交流對象：視覺設計師、軟件開發工程師。怎麽做？會議中：必需品兩件：筆、本子。用途：記筆記。好記性不如爛筆頭。怎麽記？記用戶的期望值、目標，與及為了達到某個目標要涉及到的相關操作與數據。（當然，記關鍵詞）會議後：分析整理、討論。 二、Web視覺設計師關註點：產品類型？用戶？ 產品類型與用戶，直接關系到產品設計的色（顏色）、型（形狀）、神（靈魂）、意（意圖）等。01 顏色色彩，情感傳達的第壹要素，感性，每個人對色彩的感知度不壹樣。眾口難調，我們只能去迎合大眾的口味而放棄小眾。表達的主題：冷酷？激情？安靜？……於是學會了去選擇冷色、暖色或者中性色系。小竅門：找壹張自然風景圖，馬賽克，然後提煉其中的顏色。大自然的顏色永遠是最和諧的。品牌：碳酸飲料，提起紅色，我們想到了可口可樂。提起藍色，我們想到了百事可樂。02 形狀點：點的大小、點與點的距離、點與點的對比。線：直線（莊嚴正直）、橫線（安逸平靜）、曲線（飄逸動感）。面：矩形（剛硬）、橢圓（溫柔）、圓（稚嫩）點->線->面品牌：快餐，提起白發爺爺，我們想到肯德基。提起紅毛小醜，我們想到麥當勞。03 靈魂每個設計都有自己的靈魂。04 意圖這個設計想給用戶表達什麽？購物？新聞？交友…… 操作流程：用戶明細->主題定義->顏色定義->形狀定義->選圖->取圖->Icon設計->優化細節->Styleguide編寫。產物：視覺稿PSD源文件、Styleguide文檔。主要交流對象：交互設計師、前端開發工程師。 三、Web前端開發工程師關註點：結構層（HTML）、表現層（CSS）、行為層（JS或者AS）。傳統意義上的視覺設計師和開發工程師在界面互動和實現上都不可能有更專業、更獨到的認識。結構層：專註於HTML的架構，追求代碼語義化、復用性、模塊化、規範化。命名語義化、規範化。表現層：專註於CSS的渲染，追求視覺的壹致性（兼容多種主流瀏覽器跨平臺、測試DEMO的可用性、可訪問性）。 行為層：專註於JS或者AS，實現與用戶互動。追求行為的壹致性、優化代碼加快下載速度、減少請求數加速服務器的反應周期、規範整個代碼層面的SEO提高搜索引擎的收錄程度等。整個產品的體驗過程應該是愉悅的，無障礙的。 操作流程：分析設計稿->制定命名規則->定義公用樣式和私有樣式->定義文件的分布->切圖(優圖片大小，確保圖片質量)->合並相關圖片(減少請求數，減輕服務器負擔)->寫HTLM和CSS並進行多瀏覽器測試->有必要是寫CSS hack->寫JS產物：HTML+CSS+JS/AS、切片主要交流對象：視覺設計師、軟件開發工程師。 互聯網是個平臺，用戶研究和交互設計是理論方法，視覺設計和前端技術開發是手段。服務提供商借助互聯網這個大平臺，利用用戶研究和交互設計提供的分析數據、理論方法，視覺設計和前端技術開發做為手段去實現用戶的目標，達到用戶的期望。這個是我對用戶體驗流程的理解。