[乾貨分享] AXURE-整套高保真UI框架和元件組(暗黑風格)

 

 

寫在前面

在咱們的開發團隊裏，通常在產品經過策劃和需求評審後，在還沒開始設計以前，產品經理和美工會一塊兒定一套UI規範。

一方面用於規範總體界面，防止界面開發過程當中出現UI不一致性的狀況（有時候標準並不能涉及到每一個細節，研發會偶爾跑偏）。

另外一方面用於後期其餘項目的複用，也就是當有了其餘項目的UI規範沉澱以後， 風格類似的項目，實際上是不須要美工的，產品經理直接按照規範和項目沉澱下來的元件作出高保真，研發只要按照此規範來實現便可，可適當省去美工出圖和原型標註部分的工做量。

團隊的演變流程

 

任何規範（設計，代碼規範等）都是團隊長期沉澱出來的，適合本身的團隊纔是最重要的。

本次共享模板的UI規範（暗黑風格）

注：因爲篇幅問題，截圖中省略了部分規範內容（好比語義規範，內容顯示規範，動效規範）。後期會整理出一份完整的規範文檔共享出來，敬請期待。

 

界面總體預覽

 

注：原本作了一個界面操做演示，因爲生成gif太大，有10M多，因此就不上傳了，下面分別截圖顯示，具體動效可在元件文件裏查看。

主要元件包括：輸入框、數值輸入框、下拉框，滑塊（silder）、時間控件、單選、多選、分頁、頁籤、彈框、提示信息等。

 

時間控件

 

頁籤（tab）

 

彈窗

 

下拉框

 

On/Off Switches

 

slider

 

表格

 

提示元件

 

氣泡

 

以上即是本次分享元件的主要部分，原始文件截圖以下：

 

經過axure的元件導入以後就能夠用啦

 

~以上即是本次分享的所有內容~

原件下載

爲防止失效，全部下載連接都在公衆號維護，請關注公衆號後，回覆「A034」便可下載本次分享的元件完整文件。

推薦閱讀：

AXURE-036-整套高保真UI框架和元件組(白色風格)

感謝閱讀和關注！