本套原型是一個(gè)我在組件計(jì)劃中的階段性成果，分享出來希望能對(duì)大家有一定的幫助。

初衷&目的

• 做得聰明人，花得笨功夫；
• 本套原型是一個(gè)我的一業(yè)余項(xiàng)目《組件計(jì)劃》的階段性的成果，分享出來希望能對(duì)大家有一定的幫助。
• 說明：組件庫只是整個(gè)項(xiàng)目的副產(chǎn)品，后期更多的產(chǎn)出物會(huì)放到 單一模塊的流程設(shè)計(jì)，詳細(xì)規(guī)則，細(xì)節(jié)設(shè)計(jì)等方面。

設(shè)計(jì)中遵從的思路

• 在設(shè)計(jì)這份組件時(shí)，由于組件的層次很多，故而將大量的類似的按鈕放到一個(gè)頁面內(nèi)；使用時(shí)需要先拖入到編輯區(qū)選中一個(gè)即可；
• 在細(xì)節(jié)的處理中，盡量讓使用者只用編輯一個(gè)地方，其他地方會(huì)聯(lián)動(dòng)（如banner圖只需調(diào)整動(dòng)態(tài)面板的尺寸，其中的圖片會(huì)自動(dòng)縮放填充）
• 在部分的地方使用了中繼器，如列表，宮格，使用者只需添加圖片與文字即可自動(dòng)生成特定格式；（注意部分中繼器性能可能會(huì)較慢）

使用時(shí)注意：

因?yàn)橄抻诒救瞬⒉幌脒^多的去講解，組件庫中的每一個(gè)組件的具體的功能，和如何使用；同時(shí)在某些組件中設(shè)計(jì)的規(guī)則比較繁復(fù)，故而對(duì)于使用者對(duì)Axure的熟練度有較高的要求。如果對(duì)Axure不是太熟練的同學(xué)建議不要隨意隨意去修改組件中的規(guī)則（若要修改請備好份）。

全套組件皆在640*1137 下設(shè)計(jì)完成。

組件說明

整體說明

• 說明部分：對(duì)于該原型文件的概要性說明
• 基礎(chǔ)：最為基礎(chǔ)的組件，如色彩，間距，按鈕等
• 作用：較為常見，為基礎(chǔ)組件拼接而成，如列表，宮格等
• 互動(dòng)效果：常用的有交互效果的組件，如：banner，滑塊，進(jìn)度條，折線等
• 模塊：以具體的功能未整理依據(jù)的組件，如：搜索，文字編輯，聊天，個(gè)人中心，實(shí)名認(rèn)證，積分等

詳細(xì)說明

挑選組件庫中部分組件的組件進(jìn)行簡要的說明與展示。

基礎(chǔ)-色彩

為增加該模塊的通用性，故均采用黑白灰來表述顏色。

基礎(chǔ)-間距塊

說明：含10(豎)，10（橫），20，30，40，50，100 （單位:px）

使用方法：將需要的間隔放到特定位置作為間距即可，使用完刪除掉

基礎(chǔ)-頁頭/頁尾/鍵盤

說明：共計(jì)8種主流頭部

基礎(chǔ)-彈窗

說明：共計(jì)7類彈窗，（30+彈窗）

常用-異常/空態(tài)圖

說明：單獨(dú)作為一個(gè)組件放出來，是由于該模塊是較容易遺忘的一個(gè)模塊

常用-列表

說明：共4中類型，10余組列表樣式；其中含一組中繼器控制的列表

中繼器列表使用說明：

• Lei：1為一條數(shù)據(jù)；0位一行間隔20px
• Tu：為具體的圖標(biāo)
• Wen：為該條數(shù)據(jù)的名稱
• Ti：表示該行的提示文字
• Ztai：1為有提示，0為無提示

交互&動(dòng)效-banner

說明：

• 點(diǎn)擊會(huì)更具值的大小有左切換右切換
• 圖片大小會(huì)根據(jù)動(dòng)態(tài)面板大小而縮放

交互&動(dòng)效-倒計(jì)時(shí)

說明：通過動(dòng)態(tài)面板的循環(huán)切換來觸發(fā)倒計(jì)時(shí)行為，若使用該組件，需將右側(cè)動(dòng)態(tài)面板同時(shí)使用（可影藏該組件）

交互&動(dòng)效-日歷

說明：

• 該日歷通過中繼器完整了模擬了時(shí)間輸入框，可以完成自由切換年月
• 采用了中繼器實(shí)現(xiàn)，性能不是特別好

交互&動(dòng)效-折疊菜單

說明：通過中繼器實(shí)現(xiàn)的菜單

中繼器操作說明：

1. a1：同一個(gè)類型放到一起且用同一個(gè)字母
2. b：0，表示為一級(jí) 展開樣式；-1，表示為一級(jí) 折疊樣式；其他：為子菜單
3. wenzhi: 該行數(shù)據(jù)顯示的文字信息

交互&動(dòng)效-橫向拖動(dòng)

說明：結(jié)構(gòu)為 動(dòng)態(tài)面板-動(dòng)態(tài)面板（拖動(dòng)）-中繼器（內(nèi)容）

交互&動(dòng)效-頂部標(biāo)簽

說明：

• 實(shí)現(xiàn)了選中項(xiàng)自動(dòng)居中
• 操作時(shí)僅需配置最內(nèi)部的數(shù)據(jù)接口，其他數(shù)據(jù)根據(jù)文字信息而變動(dòng)（請通過復(fù)制原有模塊新增文字 ）

交互&動(dòng)效-折線&條狀圖

• 條狀圖：僅顯示中間區(qū)域的數(shù)據(jù)，數(shù)據(jù)超出特定范圍自動(dòng)隱藏?cái)?shù)據(jù)
• 折線圖：通過數(shù)中繼器實(shí)現(xiàn)（目前未做特別細(xì)致，數(shù)值超過100可能會(huì)出現(xiàn)問題）

中繼器使用說明：

• xulie:無意義
• zhi1:數(shù)值建議在1-100間
• zhi2: 等于上一個(gè)序列的zhi1

模塊-登錄

說明：內(nèi)含兩套最常見的登錄注冊原型

模塊-搜索

• 搜索：為一個(gè)有完成交互的搜索
• 頭部：為幾種常見的搜索頭部的樣式
• 城市切換：一個(gè)切換城市的功能頁
• 信息整合：一般為放在搜索入口前的反思（用戶真的是要搜索嗎）

搜索前：

• 定位當(dāng)前位置
• 搜索歷史功能
• 熱門搜索功能
• 關(guān)鍵詞關(guān)聯(lián)關(guān)鍵詞

搜索時(shí)：

推薦：

• 推薦+結(jié)果數(shù)量提示：
• 其他搜索方式引導(dǎo)
• 無搜索結(jié)果提示
• 關(guān)鍵詞詢問
• 關(guān)聯(lián)關(guān)鍵詞（淘寶搜索）

搜索：

頭部：

切換城市：

信息整合：

搜索前：

搜索時(shí)：

模塊-實(shí)名認(rèn)證

說明：共兩套實(shí)名認(rèn)證（身份證驗(yàn)證）的界面

源文件地址：

官方源：https://pan.baidu.com/s/1bpF0OuN?密碼:?4ugj

作者源：http://pan.baidu.com/s/1slbI9Oh 密碼：81s0

本文由 @ytw?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。