整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
何在Axure中實(shí)現(xiàn)不同元件的單選選中效果？教程詳解在此，請看~~
同一選填內(nèi)容的不同選項(xiàng)，我們可以通過拖動元件庫已有的“單選按鈕”，編輯選項(xiàng)對應(yīng)需要展示的文字；然后全選所有的“單選按鈕”，將他們組合并取名為某一名稱；最后將此名稱復(fù)制到“設(shè)置單選按鈕組名稱”中，即可實(shí)現(xiàn)效果。
以我們填寫個(gè)人信息中很常見的性別選擇為例。
但如果你所需要呈現(xiàn)的原型不是單選按鈕，而是類似于菜單選中或者頁碼切換的展示效果，那“單選按鈕”就滿足不了你了
這時(shí)候我們需要自定義不同元件的單選選中效果，具體的Axure操作步驟可分解為：
拖入一個(gè)矩形元件到頁面中，將其調(diào)整為你想要的形狀和大小，并對其進(jìn)行命名
我拖入了一個(gè)矩形，將其圓角半徑設(shè)置為8，將該元件名稱修改為“性別”，并在該矩形內(nèi)輸入想要展示的文字“男性”。
設(shè)置矩形元件的交互事件（設(shè)置鼠標(biāo)單擊該元件時(shí)，它的選中狀態(tài)為“true”）。
設(shè)置矩形元件的交互樣式（點(diǎn)擊選中，設(shè)置選中的交互樣式為白色字體，填充藍(lán)色）。
復(fù)制剛剛設(shè)置好的矩形元件，粘貼出你所需數(shù)量的單選元件，并一一修改輸入你需要元件上展示的文字內(nèi)容（需要保證這些元件的命名都是統(tǒng)一的）。
全選中這些元件，在“設(shè)置選項(xiàng)組名稱”中輸入他們（一樣的）名稱后，點(diǎn)擊F5就可以看到效果了。
原型效果：http://www.wulihub.com.cn/go/Wy3R9J/start.html（附帶頁碼單選的原型效果）
本文由 @素小白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
頁設(shè)計(jì)圖
1.設(shè)計(jì)圖分析和HTML模塊化結(jié)構(gòu)：https://www.ixigua.com/i6903745684596326915/
2.HTML模塊化和CSS模塊化示例：https://www.ixigua.com/i6904203127541465611/
核心知識點(diǎn)
為UI設(shè)計(jì)師，整理設(shè)計(jì)規(guī)范也是設(shè)計(jì)能力的一種體現(xiàn)。所以，無論是自己設(shè)計(jì)創(chuàng)作的階段還是和程序員溝通推動產(chǎn)品開發(fā)階段，你的設(shè)計(jì)規(guī)范是否完善，對產(chǎn)品的質(zhì)量起著決定性的關(guān)鍵作用。
在UI設(shè)計(jì)的過程中，設(shè)計(jì)規(guī)范是一個(gè)關(guān)鍵步驟。如何通過設(shè)計(jì)規(guī)范提高品牌一致性和推動開發(fā)高度還原設(shè)計(jì)？
這里，為大家整理了設(shè)計(jì)精細(xì)并且優(yōu)質(zhì)的設(shè)計(jì)規(guī)范模板，干貨多多，有助于你整理設(shè)計(jì)規(guī)范的時(shí)候理清思路，完善細(xì)節(jié)。
先為大家整理了設(shè)計(jì)規(guī)范中的分類情況，UI設(shè)計(jì)規(guī)范有幾大分類組成，分別是：Logo、標(biāo)準(zhǔn)色、字號、段落設(shè)置、圖標(biāo)、圖片、間距、圓角值、大小、陰影、組件等。
品牌印象的直接感受，根據(jù)頁面不同背景所使用的Logo圖也不同。將產(chǎn)品中所使用到的Logo統(tǒng)一分類，以下引用Moby’s Petshop UI Style Guide的Logo資源例舉說明。
Moby’s Petshop UI 的Logo由圖形和文字組合而成，而品牌色為藍(lán)色，Logo的使用也需要考慮到Footer黑色背景下的Logo。所以用Logo的橫豎向排版和單個(gè)Logo圖形來分類更好。
分類里面則展現(xiàn)品牌色的Logo、品牌色背景的Logo、Footer黑色背景的Logo。
顏色是設(shè)計(jì)最重要的部分，沒有之一。細(xì)節(jié)決定品質(zhì)，所以對顏色的運(yùn)用格外細(xì)致，顏色的搭配直接決定產(chǎn)品的品質(zhì)感。顏色大致可分為品牌色、文本顏色、背景色、線框色等。給顏色添加關(guān)鍵詞，明確用于什么界面。
以下引用real-pixels UI Style Guide的顏色規(guī)范，可以借鑒的是每個(gè)顏色不僅標(biāo)注了顏色值，而且右側(cè)給出了顏色使用的場景，值得借鑒的是按鈕Normal狀態(tài)和Hover狀態(tài)的顏色值放在一起，這樣，對不同狀態(tài)顯示的顏色感受更直觀。
對顏色值統(tǒng)一規(guī)范命名變量，提高開發(fā)效率的同時(shí)更好的維護(hù)設(shè)計(jì)規(guī)范。
在前端開發(fā)中，對顏色值進(jìn)行編號，這樣對代碼也有著極大的優(yōu)化。定義一個(gè)設(shè)計(jì)規(guī)范的CSS樣式庫，開發(fā)過程中就不用重復(fù)修改CSS參數(shù)值，直接引用定義好的變量名就可以，這樣修改設(shè)計(jì)規(guī)范的成本大大降低。
字體是設(shè)計(jì)中必不可少的考慮因素，不同的字體氣質(zhì)不一樣，并且不同場景下帶給人的感受也不一樣。所以需要在設(shè)計(jì)的時(shí)候考慮到字體的設(shè)計(jì)效果，然后在設(shè)計(jì)規(guī)范中注明。
以下引用的是Retail Banking Service UI Style Guide中的字體規(guī)范，在定義字體名稱的同時(shí)也定義了字體的風(fēng)格，并且添加了不同字體風(fēng)格的預(yù)覽效果，常見的字體風(fēng)格有：Light、Regular、Italic、Semibold、Bold。
在實(shí)際的產(chǎn)品設(shè)計(jì)中，段落有很多種樣式，不同場景下的段落要求也不一樣。比如：閱讀內(nèi)容的段落要求文本可閱讀性強(qiáng)，所以對字體、字號、顏色、行間距等要求簡單易讀。而帶有裝飾性的段落文本則不需要那么嚴(yán)謹(jǐn)，裝飾性強(qiáng)就可以。
需要注意的是：在定義段落默認(rèn)字體的時(shí)候還需要定義一個(gè)后備字體，即默認(rèn)字體不能正常顯示情況下顯示的字體。設(shè)計(jì)的水平層次就在于對細(xì)節(jié)的打磨，這也就是段落規(guī)范在設(shè)計(jì)中存在的意義。
圖標(biāo)是重要的軟件標(biāo)識，在設(shè)計(jì)資源中是最重要的模塊之一。在軟件產(chǎn)品中甚至可能每個(gè)頁面都存在圖標(biāo)，圖標(biāo)除了美化的作用以外，還有著明確指代含義的計(jì)算機(jī)圖形。
具體分為以下三個(gè)作用：
圖片也是屬于設(shè)計(jì)規(guī)范最重要的部分之一，按照用途分類整理圖片資源，設(shè)計(jì)風(fēng)格系統(tǒng)化。
在設(shè)計(jì)的過程中，我們經(jīng)常會使用一套規(guī)范的度量標(biāo)準(zhǔn)，來保持產(chǎn)品的一致性，分別為圓角值、間距、大小。
對度量解釋最好的是設(shè)計(jì)中經(jīng)常使用到的柵格系統(tǒng)（Grid Systems），運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡潔。這就是我們在網(wǎng)頁和APP設(shè)計(jì)的過程中經(jīng)常使用到柵格系統(tǒng)的原因。
陰影風(fēng)格及參數(shù)也是設(shè)計(jì)規(guī)范中的一部分，在整理設(shè)計(jì)規(guī)范的時(shí)候，需要注意的是陰影的參數(shù)值是網(wǎng)頁中控制陰影的參數(shù)值，而不是設(shè)計(jì)軟件中的參數(shù)值。
舉個(gè)例子：網(wǎng)頁中陰影對應(yīng)的參數(shù)值為：box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 ，不透明度：10%，這才是程序員需要的陰影參數(shù)值，否則最終開發(fā)出來的陰影會出現(xiàn)不一致的情況，無法達(dá)到規(guī)范的目的。
常用的UI組件（Component）：Button控件、下拉框、選擇框（單選\復(fù)選框）、時(shí)間選擇器、輸入框、搜索框、進(jìn)度條、分頁器、提示框、警告框、表格、彈出面板、數(shù)字步進(jìn)器、選項(xiàng)卡等。
Button控件
按鈕是最常見的組件之一，按鈕有5個(gè)狀態(tài)：Normal、Hover、Active、Disabled 、Loading。
需要在規(guī)范中分別羅列出這五個(gè)狀態(tài)，標(biāo)注上對應(yīng)的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值。如果是圖標(biāo)按鈕的話，除了上述參數(shù)值以外還需要標(biāo)注icon和按鈕文本之間的間距和icon圖標(biāo)的大小。
下拉框是為用戶提供多個(gè)選擇的單選組件，優(yōu)點(diǎn)是用最簡單的界面布局方式收納了很多的選項(xiàng)，需要注意定義下拉選擇框彈出的時(shí)候，鼠標(biāo)移動上去的Normal、Hover、Active狀態(tài)。
顧名思義，單選框是眾多選擇里面選一個(gè)，而復(fù)選框是眾多選擇里面可以無限制選擇。單選框和復(fù)選框都需要三個(gè)狀態(tài)，即未選中狀態(tài)、選中狀態(tài)和不可點(diǎn)擊狀態(tài)。
時(shí)間選擇器：
時(shí)間選擇器是選擇年月日的組件，分別對應(yīng)年月日星期的信息，在設(shè)計(jì)的時(shí)候需要考慮到4個(gè)狀態(tài)，分別是：Select、Not_Select、Hover和Disable，并且寫進(jìn)設(shè)計(jì)規(guī)范。
輸入框：
輸入文本框是我們軟件產(chǎn)品設(shè)計(jì)必不可少的組件，文本輸入框有4個(gè)狀態(tài)：Normal、Active、Disable和Error。
搜索框：
和輸入框相同的地方是都需要聚焦然后輸入內(nèi)容完成操作，應(yīng)該有為Normal、Active、搜索下拉狀態(tài)、Error狀態(tài)。
進(jìn)度條：
這個(gè)需要在規(guī)范中注明上傳進(jìn)度條的整個(gè)交互操作流程，對Normal狀態(tài)、點(diǎn)擊上傳/拖拽上傳狀態(tài)、上傳中、上傳成功、上傳失敗，整個(gè)流程狀態(tài)的整理。在上傳過程中，任何用戶操作都應(yīng)該有及時(shí)響應(yīng)的動作，這樣用戶在使用的過程中才不會迷茫。
分頁器：
分頁器是用于切換內(nèi)容頁面的復(fù)合組件，常規(guī)的分頁器有上下頁操作按鈕、分頁頁碼按鈕、輸入頁碼手動查找的搜索框，以及分頁器的4個(gè)狀態(tài)：Normal、Hover 、Active、Disabled。
提示框：
提示框是一個(gè)事件觸發(fā)彈出面板顯示的組件，經(jīng)常使用提示框的地方是，刪除按鈕、疑難問題點(diǎn)、提示類彈出信息等。這個(gè)風(fēng)格設(shè)計(jì)就比較多了，設(shè)計(jì)風(fēng)格各不相同，定義底板樣式、文字樣式和陰影參數(shù)。
警告框：
頁面報(bào)錯(cuò)時(shí)的顯示樣式，常用的警告類信息是：操作成功、提醒用戶注意、警告用戶注意等。
表格：
表格類信息居多，應(yīng)重點(diǎn)整理表格樣式以及文本顏色大小。
彈出面板：
彈出面板主要由4個(gè)部分組成，分別是面板內(nèi)的文本信息、按鈕、面板大小樣式、蒙版顏色和透明度。
數(shù)字步進(jìn)器：
數(shù)字步進(jìn)器屬于復(fù)合類型的組件，可以理解為按鈕和輸入框聯(lián)動的組件，所以輸入框和按鈕擁有的屬性狀態(tài)，步進(jìn)器都有。
選項(xiàng)卡：
切換選項(xiàng)卡即切換內(nèi)容，和下拉選擇框不同的是，選項(xiàng)卡是將多個(gè)選項(xiàng)都排列出來的單選組件，需要考慮4個(gè)狀態(tài)：Normal 、Hover 、Active 、Disabled 。
設(shè)計(jì)規(guī)范對整個(gè)項(xiàng)目的規(guī)范性推動很強(qiáng)大，但是需要花時(shí)間和耐心細(xì)心打磨，所以需要花費(fèi)很多時(shí)間和精力去整理資料、編輯素材、分類整合，最后還要在設(shè)計(jì)軟件中將整個(gè)規(guī)范重新排列設(shè)計(jì)。
本文由 @ jongde 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Pixabay，基于 CC0 協(xié)議
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
