07.UI團隊文件及版本管理規范.pptx
UI團隊文件及版本管理規范,2014.5.16胥冥,工作前提說明,設計團隊軟件工具AdobePhotoShop(PCMac)不解釋AdobeIllustrator(PCMac)不解釋Sketch3(Mac)矢量UI設計工具(做快速布局方便,逼格高,BUG多)PsPlay(iOSAndroid)用于手機實時預覽PS設計內容MarkMan(PCMac)設計圖標注工具TortoiseSVN(PC)Cornerstone(Mac)SVN同步軟件插件補充PSRounded_Rectangle_Radius_Resizer(矩形圓角半徑調節)方便,穩定,四個角PSCornerEditor(多邊形圓角半徑調節)支持多邊形,多種角,不穩定,BUG較多PSGuideGuide(輔助線插件)支持設置數值、分欄等,可存預設PSKuler(色板插件)輔助配色方案,可搜索、自定,素材管理設計中用到的素材,如UI示例、Icon參考、字體等文檔資料設計相關的書籍文檔資料等軟件工具設計相關的軟件工具等識別規范公司級VI(logo、名片)設計內容應用資源應用內使用到的附加資源,角色形象,等不適合放在UI設計中的資源UI設計應用UI設計文件,以項目名加版本整理運營推廣線上或線下運營推廣所需的活動圖片設計網頁設計公司網站或其他最終結果為網頁的設計,團隊文件整理規范,UI設計文件整理規范,主文件夾命名應用名稱版本號增量標記例(喵喵2.0)(喵喵2.1)版本后無為完整版本,帶為增量版本,增量版本只保存對前一個完整版本有修改的內容版本號(例2.1.1)首位變化新建完整版本,二位變化新建增量版本,第三位變化時僅新建修改版本文件新建完整版本(2.0)時,先前的完整版本及其增量版本可進行首位歸檔,及(喵喵1.0、喵喵1.1)歸入(喵喵1)中首位歸檔文件夾達到3個后可進行項目歸檔,即(喵喵1、喵喵2、喵喵3)歸入(喵喵)中,后續依次添加版本歸檔操作由組長執行子文件夾一級命名模塊名稱文件以各自所屬模塊整理,全局文件視為一個模板單獨存放,有子模塊內容較多且相對獨立時可提高文件夾層級文件夾內頁面文件平級放置PSD源文件、JPG效果圖、PNG標注圖、mkm標注源文件頁面文件名當頁面無平級頁面且層級較淺時直接用頁面名稱,否則使用“上級模塊-本頁名稱”子文件夾二級命名[切圖][Android][切圖]切圖PSD文件平級置于此文件夾下,生成的切圖置于PSD同名文件夾下[Android]以iOS為主導時,Android平臺適配版本置于此文件夾下,管理規則同iOS(獨立時可提高層級),UI設計文件命名規范,切圖PSD文件命名控件類型_位置功能描述v版本.后綴例(Btn_TabbarDiyBgv2.1.1.psd)版本號(v2.1.1)只用在PSD和文件夾中,切圖資源文件不加[控件類型]參照常用字規范,首字母大寫[位置功能描述]在保證唯一性與表意明確的前提下可適當放寬書寫,如無合適翻譯,可用拼音描述切圖資源文件命名控件類型_位置功能描述部件類型_狀態.寬高.后綴例(Btn_TabbarDiyBg_normal.160 x98.png)[控件類型]參照常用字規范,首字母大寫[位置功能描述部件類型]在保證唯一性與表意明確的前提下可適當放寬書寫,如無合適翻譯,可用拼音描述寬高在切圖控件尺寸唯一情況下可不寫,寬高相等時可省略為標一個數,附錄UI文件命名規范常用字(初訂),常用狀態normal(正常)pressed(按下)selected(選中)disabled(禁用)visited(已訪問)hover(懸停)控件部件(控件較獨立的可操作界面元素)(部件描述屬于某控件一部分)Btn(按鈕可點)Icon(圖標不可點、非點擊主體、圖案部件)Sign(標記)List(列表)Menu(菜單)View(視圖)Panel(面板)Sheet(薄板底部彈出菜單)Bar(欄)StatusBar(狀態欄)NaviBar(導航欄)TabBar(標簽欄)ToolBar(工具欄)Switch(切換開關)Slider(滑動器)Radio(單選框)CheckBox(復選框)Bg(背景部件)Mask(蒙版/遮罩)常用補充描述上中下排序Top(頂部)Middle(中間)Bottom(底部)次數排序First(第一)Second(第二)Last(最后)位置排布Header(頁頭)Footer(頁腳),UI設計PSD圖層命名規范(待定),PSD圖層命名依頁面框架整理頂層圖層組,例XX-Bar、Sheet_功能描述.寬高v版本、View_視圖描述.寬高v版本、BG(整體背景)子圖層組以所在框架內具體控件命名,例Btn_功能描述_狀態.寬高v版本、bg(所在框架或控件背景)控件子圖層/組以所在控件的各個子控件或部件相應名稱命名,規則參照控件,上層組有狀態時下屬無需狀態此命名規則在層級明確、描述清楚的前提下可適當調整書寫,最終目標為僅依靠圖層/組名稱即可準確識別內容PSD文件避免有空圖層、連續未命名圖層、未命名組,測試過程中的無用圖層及時刪除或歸檔到廢棄或測試組參考文檔精準像素完美使用手冊http//www.ustwo.co.uk/blog/the-ustwo-pixel-perfect-precision-handbook/(待學習),素材管理文件整理規范,子文件夾前綴規范[模板]有源文件的整體套用設計方案,可直接使用[示例]有源文件的獨立設計方案,可參考部分使用[收集]有源文件的設計元素,可參考部分使用[參考]無源文件的圖片展示,可做設計參考[其他]待完善子文件夾命名[前綴]素材類別內容例[參考]手機截屏、[模板]UI套件、[模板]VI展示、[模板]界面展示、[示例]UI、[收集]共享圖庫,運營推廣文件整理規范(待定),子文件夾命名日期活動名稱設計內容例(2014-05-12XX網站推廣_Banner),運營推廣圖片需求提交規范(待定),任務需求總概任務名稱簡要描述任務或活動主題任務平臺應用市場/微博/線下/第三方應用或網站/任務簡介活動具體實現方案截止時間圖片需求最后截止日期時間圖片需求規范圖片內容各級文案及相應重要級別圖片用途網頁/手機應用/印刷圖片屬性寬高尺寸(px像素/mm毫米)、分辨率(ppi尺寸單位為mm時必需)、格式(PSD/PNG/JPG)參考示例類似場景圖片(用于效果預估)、任務方中意圖片(用于風格把握)需求備注需要注意的地方,風格描述,特殊使用限制等可用素材可以使用于設計中的人物元素等素材,附件發送,識別規范文件整理規范(待定),子文件夾命名品牌公司/應用設計內容v定版版號例(喵喵Logov2),應用資源文件整理規范(待定),子文件夾命名資源名稱待定,網頁設計文件整理規范(待定),主文件夾命名WEB子文件夾一級命名網站網頁名稱例(FN-Tech),