外觀
概述
Atlassian 內部工作分得很細,還有個專門的系統做設計資源的分享。 所有的企業做到一定規模,不管是不是軟件,都會有專門的團隊來負責做,應用於企業各類音視頻,圖文物料輸出,包含但不限於:系統,公眾號,PPT,手冊。 說到外觀,會有一堆概念,UI,VI,UE。 既然選擇企業系統的實施,
VI 視覺很重要,配色,排版,圖形樣式,給用戶一目瞭然知道自己買的是什麼,比如 星巴克咖啡的綠色,法拉利的紅色跑車。
![](../__attachments/434765825/image-20230228-074756.png?inst-v=aaeeaf4e-ecea-4ee7-a3fe-a3b12ffc3fbc)
Atlassian ICON的演化
本文基於過往對於 UI 定製修改的經驗,分享如何在滿足系統穩定,成本可控情況下,滿足客戶需求,優化體驗,完成 Jira 外觀的修改。本文包含:原生外觀修改、插件介紹、定製開發的利弊
![](../__attachments/434765825/image-20230228-073235.png?inst-v=aaeeaf4e-ecea-4ee7-a3fe-a3b12ffc3fbc)
需求分析
如果做過外資,中資民營,國企,就會發現,除了外資偏向於使用標準功能,中國企業會提出更多定製化的需求。
類型 | 目的 | 示例 | 實現方式/建議 | |
---|---|---|---|---|
1 | 標準 | 展現企業的視覺風格 | 更換 LOGO 和 配色與企業一致 | 系統標準外觀功能,按官方文檔依葫蘆畫瓢操作 |
2 | 定製
| 改善用戶體驗 | 新增,隱藏部分按鈕,頂部導航分類,更換登錄界面 | 加錢,購買插件如 refined,stagil navigation |
3 | 幫助領導升職加薪 | 不明覺厲,圖形界面 | 加錢,外部 BI 系統,數據大屏 | |
4 | 領導 PUA,供應商砍價 | 對原生系統的佈局大刀闊斧修改 | 使用引導技術,告知可以做但成本高,委婉拒絕。 |
引導技術為不直接拒絕,控制情緒,保持尷尬而不失禮貌的微笑,站在對方的立場上告知一意孤行的負面後果,讓對方自己說出放棄瞎搞的想法,此方法可應用於 乙方對甲方,下級對上級,男友對女友,老公對老婆等等
什麼不能改
說什麼能改之前,先說什麼不能和不建議改。
由於 Atlassian 產品基於 java 產品開發,只要購買了授權,就能在點完一堆同意後下載幾乎所有源代碼,理論上說,什麼都能改,但實操起來,有些內容的修改是不符合法律條款的,比如 網頁底部的版權說明。
不僅不合規,而且因為屬於標準功能,系統不建議修改,還大概率引發系統實例無法啟動的錯誤。
![](../__attachments/434765825/image-20230228-084954.png?inst-v=aaeeaf4e-ecea-4ee7-a3fe-a3b12ffc3fbc)
什麼不建議改
技術上說,各種原生按鈕,比如創建,編輯,issue 佈局,原生報表樣式。可以修改,但成本高,而且修改後以後升級要注意兼容性
如果有特別多的定製修改,考慮到修改成本以及系統穩定性,建議更換中國國產,或純定製開發軟件
什麼能改
建議使用默認配色或系統建議的配色,Jira 會根據用戶上傳的LOGO自動調整相關參數的配色,如果沒有專業的 UI 設計師,建議不要自己修改。 系統默認的配色,不是拍腦袋的,而是經過海量用戶調研,AB-TEST,分析論證的。
Scriptrunner 可微調但別大調,比如增加/隱藏一些按鈕, 隱藏,添加按鈕,但注意,這是君子鎖,前端隱藏,不是系統級的。
![](../__attachments/434765825/image-20230228-091951.png?inst-v=aaeeaf4e-ecea-4ee7-a3fe-a3b12ffc3fbc)
隱藏菜單
![](../__attachments/434765825/image-20230228-092359.png?inst-v=aaeeaf4e-ecea-4ee7-a3fe-a3b12ffc3fbc)
新增快速跳轉按鈕
現在的鍵盤佈局實際上並不是最科學的,只不過因為有巨大的使用慣性,修改佈局不會提升效率反而會降低。 尊重習慣但不迷信,基於需求改進優化。鍵盤可以對用戶需求進行優化,比如對遊戲玩家和辦公玩家增加”宏“按鍵,打包組合連擊操作。
Jira 的界面佈局也於 鍵盤佈局同理,可以做輕量級的優化,但別改太多。
原生
主要配色
Jira 系統管理員 身份登錄後臺,【⚙管理】→【系統】→【用戶界面】→【外觀】
系統自動會根據標識的顏色調整頂部導航配色。
![](../__attachments/434765825/image-20230228-115814.png?inst-v=aaeeaf4e-ecea-4ee7-a3fe-a3b12ffc3fbc)
上傳標識
![](../__attachments/434765825/image-20230228-120004.png?inst-v=aaeeaf4e-ecea-4ee7-a3fe-a3b12ffc3fbc)
如果想要調整其他顏色項,可以在此界面底部做微調操作,小程序 = 儀表盤裡的 gadget 組件
頂部圖標
![](../__attachments/434765825/image-20230228-120030.png?inst-v=aaeeaf4e-ecea-4ee7-a3fe-a3b12ffc3fbc)
上傳圖標
![](../__attachments/434765825/image-20230228-120113.png?inst-v=aaeeaf4e-ecea-4ee7-a3fe-a3b12ffc3fbc)
瀏覽器標籤頁更新
插件
如果不想做深度定製開發,快速通過配置修改界面以及導航,推薦兩個插件,其中 Refined 功能最為強大,除了可以修改導航頁,對已有的 Jira Software ,JSM 的 問題編輯界面也有明顯優化,可以顯著降低非技術人員的上手使用難度。
![](../__attachments/434765825/image-20230228-120637.png?inst-v=aaeeaf4e-ecea-4ee7-a3fe-a3b12ffc3fbc)
![](../__attachments/434765825/image-20230228-120500.png?inst-v=aaeeaf4e-ecea-4ee7-a3fe-a3b12ffc3fbc)
![](../__attachments/434765825/image-20230228-123717.png?inst-v=aaeeaf4e-ecea-4ee7-a3fe-a3b12ffc3fbc)
外部系統
曾經的諾基亞手機=科技以換殼為本。
國內有不少公司,後端用 Jira,前端重新開發包一層,技術上當然完全可行,使用 Atlassian 原生的接口 ,也可以完全滿足企業對UI以及交互的需求。
然而除非公司特別有錢有閒,類似壟斷行業的國企,定製開發不僅耗費人力,而且穩定性不如原生,最要命的是,一旦使用定製開發,後續修改配置,字段,就無法實時發佈,需要前端代碼層做一些聯調測試才能發佈,這就間接喪失了 Jira 最大的優勢,通過靈活配置應對管理需求的快速變化