界面的品質要靠所有環節的人員來保證是以制作人員一定要了解整個部門工作内容和項目流
程清楚自己所處位置這樣才能減少問題找到好的解決方案進一步提高界面的品質。
此文檔描述了制作人員的定位所需技能及自身的職業發展。
UE員工
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiN3UTM1IjMzEDMyQDM1EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
以下是文字說明
1. 第一步互動設計
互動人員根據需求規格說明書(需求人員提供)的内容進行界面互動稿的制作。
互動人員參與視覺圖和HTML界面的檢查工作以保證界面的品質。
互動人員會參與項目工作中的規劃需求策劃和測試共4個階段的工作。
2. 第二步視覺設計
視覺設計師根據互動稿(互動人員提供)或需求規格說明書(需求人員提供)進行界面視覺設計。
視覺設計師參與HTML的檢查工作以保證界面的視覺品質。
視覺設計師會參與項目工作中的規劃需求和測試共3個階段的工作。
3. 第三步界面制作
制作工程師根據互動稿(互動人員提供)、視覺圖(視覺設計師提供)或需求規格說明書(需求人員提
供)進行HTML界面制作。成果HTML頁面
制作工程師與互動人員、視覺設計師一道進行HTML的檢查工作以保證HTML界面的品質。
制作工程師會參與項目工作中的需求和測試共2個階段的工作。
4. 第四步規範檢查
可用性工程師對完成的互動稿(互動人員提供)、視覺圖(視覺設計師提供)、HMTL界面(制作人員提
供)進行規範化檢查工作以保證界面的品質。
可用性工程師參與項目工作的規劃需求測試共3個階段的工作。
5. 第四步可用性評估
可用性工程師對完成的互動稿、視覺圖、HMTL界面進行評估檢查以保證界面的易用性。
1. 規劃階段
參與人員可用性工程師 成果互動稿\模闆_界面可用性評估報告yymmdd.dot
視覺設計師 成果首頁+二級界面的風格設計圖1-2張
2. 需求分析階段
參與人員可用性工程師 成果
互動稿\界面互動說明\
視覺設計師 成果二級頁面設計圖\模闆_某項目界面視覺設計說明yymmdd.doc
3. 策劃階段
參與人員可用性工程師 成果UE工作計劃的制定
4. 編碼階段
參與人員可用性工程師、視覺設計師、制作工程師進行界面檢查和修改支援。
5. 測試階段
對發現的界面問題在系統測試階段可送出BUG。
成果模闆_某項目界面走查記錄表yymmdd.doc
6. 傳遞
無
原型工具Axure RP Pro 5.6
視覺工具Adobe Photoshop CS4
制作工具Adobe Dreamweaver CS4
Zen.Coding-Dreamweaver.v0.6.zip 快速編寫代碼的插件
調式工具fire bug (火狐浏覽器使用)
IEDevToolBar (IE浏覽器使用)
互動知識
參看書籍《
人機互動以使用者為中的設計和評估第2版
》
《
GUI設計禁忌2.0
視覺知識
參看書籍
《導向系統設計
<a href="http://www.sj63.com/">http://www.sj63.com/</a>
<a href="http://www.mymxp.cn/">http://www.mymxp.cn/</a>
可用性知識
使用者體驗的要素以使用者為中心的Web的設計
《就這麼簡單——Web開發中的可用性和使用者體驗
《UCD火花集——有效的網際網路産品設計
前端開發知識
jQuery
《鋒利的jQuery
FLEX
《Flex 第一步——基于ActionScript3.0的Flex 2應用開發含盤
良好的Web産品開發團隊在團隊成員基礎能力上一定要下功夫。結合自己的團隊配備特此羅
列了Web前端産品工程師所涉及的技能清單如下
一個完備的前端産品開發團隊必須擁有如下的人才配備才能達到項目任務要求
團隊全體成員達到所有技能中的A級标準
團隊全體成員必須掌握兩項技能中的B級标準并保證所有的b級标準在該團隊中有50%以
上成員能達到
團隊全體成員必須掌握一項技能中的C級标準并保證所有的c級标準在該團隊中有25%以
1. XHTML/CSS制作工程師
A - 基本的layout實作
B - 嚴格跨平台的layout實作以
C - 優雅的HTML code盡可能符合标準并有SEO的考慮因素。在任何平台、浏覽器下基本
保持一緻。不要求了解各種CSS的hacks但要求知道遇到問題應該如何查閱資料以在第一
時間内解決。能夠為JavaScript開發人員提供最好操作的DOM結構讓JS開發人員在開發
的時候認為”一切都已經準備就緒了”而不是”捉襟見肘”。
2. PhotoShop/Fireworks Design制作工程師
A - 配合美工将草圖形成具體的符合WebPage的設計
B - 有快速制作分層高品質PSD、PNG的能力
C - 能迅速将PSD、PNG的内容構思成div+css或者table等HTML代碼
3. Flash Design制作工程師
A - 基本動畫效果
B - 複雜的互動體系設計了解第三方swf輔助設計軟體
C - 複雜的互動體系設計以及較強的對各類外埠資源PNG、JPG、MP3、WAV等的整合
能力。精通部分第三方輔助設計軟體AE、SwishMax、Swift3D等
4. JavaScript/Ajax/DOM前端工程師
A - 基本的DOM操作了解AJAX可以實作資料通信
B - 基本的DOM操作能寫高效率的OOP代碼以降低維護成本
C - 基于需求進行不同的開發選擇合适的架構做到代碼效率最高使用者體驗最好代碼
下載下傳量最小并且可以在單獨甚至更多産品線中最大限度重用代碼
5. Flash Development前端工程師
A - 基于Timeline的ActionScript操作能實作簡單互動
B - 掌握a外能實作資料層通信與伺服器以及本地SharedObject
C - 精通AS1-3能根據需求進行各類RIA開發。無論是要求支援FlashPlayer8的還是FlashPlayer9的都能做到開發效率最高、靈活性最大比如對HTML層的接口設計等等。