中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文介紹的關于如何打造高品質Axure組件的思路，希望能夠給大家帶來一些新的思路拓展和知識補給。

提高效率是節約時間成本的唯一途徑，產品組件庫地打造可以有效的幫助我們解決一部分問題。

為什么要建立組件庫？

減少重復性工作，讓產品整體風格更統一，提高原型效率。

組件概念由來已久，我們生活中的許多事物都應用了組件/模塊的概念。如樂高積木的概念，基礎小積木的多次組合，構建出完全不一樣的整體。不管是產品、設計、開發，在我們的工作中，如果合理運用了“組件庫”我們的工作將會事半功倍。

基礎元件

最終組合

最終效果：http://www.uedart.com/demo.html

實施目標

那只針對產品而言，如何構建一套適合產品設計的組件庫呢？本文通過web前端的組件打造的實際案例向各位介紹如何進行“組件庫”的搭建。

我們起初都會有很多計劃，立很多Flag，真正能做到的確是少之又少，如何保證自己的執行力，是我們收獲成功的重要手段。

不妨將產品常用的項目管理職能運用到本次的組件制作中，推動本次Web端的組件構建。

具體實施

1. 組件結構打造——基礎夯實

根據目標導向對6大模塊進行結構，細分如下：

2. 組件框架構建——外殼確定

確定好細分結構內容后，可以開始著手制作組件的框架，用以展示組件方便查看與制作，我會根據以下幾方面著重考慮 。

（1）適用性

瀏覽的適用性：支持筆記本1366*768、大屏1920*1080的顯示屏瀏覽。

結構的適用性：此結構具有通用性，不僅滿足本組件的展示，作為一個展示類的框架可以適用于很多場景，如：簡單官網的展示、文章瀏覽的展示。如果大家需要構建自己的組件，也可以活用此框架來構建自己全新的組件庫。

（2）便捷性

好的交互組件除了其內容，更主要的其易用便捷性，故此才有了此組件框架的構建，目的就是為了可以更加便捷的查看與查找，我按照大模塊進行了頻道切換，各自細節拆分的板塊也能看進行快速的切換查看。

這樣整體的交互切換就十分便捷，能夠快速的找到對應的板塊進行效果查看進行復制使用。為了更加方便的使用，后期迭代版本2.0正在考慮rplib的組件格式的整理輸出，更加方便大家的使用。

（3）拓展性

除了能夠適用于此六大模塊內容的展示外，如有新的模塊加入也能夠很好的拓展其內容，我在框架里加入了模塊這一頻道，為的就是后期的迭代版本擁有更多的可能性，拓展一些常用的流程性組件，如：登入/注冊、支付、設置、發布、列表流等常用組件流。

3. 組件設計規范——筋脈打通

確定好了組件框架，接下來就是內容的整合制作，在制作過程前可以優先確立設計的規范，這有助于我們統一各組件頁面的風格，讓整體組件更具品牌性。

（1）設計規范——色彩定調

定義色彩：確定主色、輔助色、點綴色、背景色。

字體顏色：深、中、淺。

如有需要還可以設定暗色模式的色彩風格，現在mac新系統的暗色模式十分流行，大家也可以嘗試一下，我這邊為了通用性，在設計顏色時就已經考慮到了暗色模式，字體顏色做了一些修改，主色、輔助色、點綴色可以兼容。

（2）設計規范——字體大小

在設計規范中，字體大小也是不能忽視的，大小的定義可以區分信息，讓內容排版更有層級，提高組件整體的可閱讀性。

（3）設計規范——元素定義

元素的定義，可能起初大家對這個不大明白，我這邊簡單描述下，所謂的元素即組件中的最小單元，很多組件大多是由這些最小單元組合而成的，一旦這些元素定義完成之后，后面的組件制作就相當容易。所以，在我們制作中，我們可以優先把這部分的元素制作完善細化，以方便后面復雜組件的組合。

4. 組件內容制作——肉體塑造

第1階段：低保真組件內容制作

按照組件結構為指導，初期制作低保真組件，豐富每個模塊的元件內容，這個階段不需要過度重視動效與顏色。

第2階段：確立組件規范

進行規劃的確立，用于指導后期高保真組件優化的方向，有的同學會問：“什么時候進行規劃確立最為合適？”

我的回答：

這要依據起初項目團隊的成員，以及各個成員的特點而定。

如果本身制作低保真的成員本身就有一套比較完善的低保真制作流程，這個高保真的規范確立大可在低保真進行到一大半的時候確立，用于指導后期高保真優化的方向。

如果制作低保真的成員本身就很疑惑不知道如何下手保證統一性，這個規范可以在起初幾個頁面制作完畢時進行制定，指導低保真同學的設計制作。

本項目的團隊屬于第一種情況，本身OMINI.BASS的制作水平很高，這樣我在后期的優化工作也減輕了不少負擔，更多的是色調統一、小細節處理、動效優化、排版優化的工作

第3階段：依據規劃進行組件優化

既然已經制定了規劃，所有的細節處理就必須按照既定的規范去實行，確保細節的統一，組件的品牌性。

本次高保真優化大家依然可以分幾個步驟去實行（這樣的分步處理方式可能是我做任何工作都喜歡采用的方式）把目標確立后，細化工作內容，拆分每個內容分配具體完成的時間，可以高效的預估完成任務的時長，這樣也能夠很順利的推動項目進展。

• 第1輪優化：顏色、字體、大小基礎定義規劃的調整；
• 第2輪優化：交互細節優化處理；
• 第3輪優化：這個階段我放在了排版的過程中。

第4階段：按照排版進行組件內容的重排版

當高保真第2輪優化進行完畢后，我就可以我的排版整合工作，這個過程主要干兩件事：查缺補漏、細節終審。

1. 查驗有沒有落掉的組件以及計劃初期定好的頁面內容；
2. 瀏覽一次所有的生成頁面的跳轉交互，確保細節的完整性。

內容梳理說明

1. 排版布局

我們在制作的過程中的流程是優先制作低保真，制作低保真的時候沒有太過注重排版性，這是基于時間效率的考量，后期高保真優化過程必然是需要重新調整相關的細節尺寸，這時候再進行更改細分板塊的內容排版更為合理，在時間效率上也不會造成時間的重復浪費。

本次排版主要是考慮到左右的閱讀格式，左側導航切換板塊，右側進行內容瀏覽。

2. 交互制作

（1）懸停交互

背景顏色變化的懸停效果：

字體顏色變化的懸停效果：

（2）彈窗交互

彈窗交互的動作統一，我的彈窗的交互參數基本保持一致，動畫模式：逐漸 時間：300ms。

（3）加載動效

加載動效分為兩類：一類背景層不受影響，這時候我們可以輸出帶背景的gif格式。

一類背景層受影響，這時候我們必須輸出透明背景的gif格式。

展示效果

最終展示效果瀏覽查看網址：http://www.uedart.com/demo.html

本文由 @時光若刻 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議