整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
輯導(dǎo)讀：B類產(chǎn)品設(shè)計(jì)時(shí)一定要注意產(chǎn)品細(xì)節(jié)，即使是對話框這樣容易被忽略的產(chǎn)品設(shè)計(jì)細(xì)節(jié)也不要放過。本文從“對話框 vs 抽屜”的設(shè)計(jì)細(xì)節(jié)出發(fā)，給出不同的設(shè)計(jì)細(xì)節(jié)及展示，一起來看看。
說在前面：對話框和抽屜都是在當(dāng)前頁面之上覆蓋出現(xiàn)的組件，讓用戶在不離開主路徑的情況下，查看信息/提示/反饋，或快速執(zhí)行某些的操作。兩者的交互模式有類似之處，使用場景也有所重疊。本文對兩個(gè)組件的主要差別進(jìn)行了對比，并提供方法幫助大家快速判斷應(yīng)該選擇哪一個(gè)。
對話框和抽屜均可分為模態(tài)、非模態(tài)，有遮罩、無遮罩；通常有遮罩的為模態(tài)，無遮罩的為非模態(tài)。
1）在重要的警告時(shí)使用，避免出現(xiàn)嚴(yán)重問題、或修正已出現(xiàn)的問題。
例如：用戶未保存就要關(guān)閉時(shí)，彈出模態(tài)對話框提示用戶保存。
2） 在需要用戶輸入信息或進(jìn)行某操作，才能繼續(xù)當(dāng)前流程的時(shí)候使用。
例如：某些資源網(wǎng)站會(huì)在用戶瀏覽一段時(shí)間后彈出模態(tài)化的登錄/注冊/試用窗口，引導(dǎo)注冊。
3）用來將復(fù)雜流程拆分成簡單步驟。
例如：分步驟的模態(tài)對話框式的新手引導(dǎo)。
4）用來獲取信息，該信息可大大減輕用戶的后續(xù)操作/精力。
例如：在房地產(chǎn)網(wǎng)站 Zillow 中，用戶可以在沒有賬號(hào)或房產(chǎn)代理的情況下瀏覽房源列表，當(dāng)用戶圖聯(lián)系某代理以獲取房源信息時(shí)，站點(diǎn)會(huì)通過一個(gè)模式對話框詢問他們是否已經(jīng)有代理。
1）不要在獲取與當(dāng)前流程不相關(guān)、不必要信息的時(shí)候使用。
2）不要在會(huì)打斷高風(fēng)險(xiǎn)流程中使用。
例如：付款為高風(fēng)險(xiǎn)流程，避免在用戶付款過程中彈出模態(tài)彈窗打斷用戶，可能會(huì)讓用戶改變主意放棄購買。
3）不要讓用戶在模態(tài)組件上進(jìn)行需要額外信息（這些信息不在上面）的復(fù)雜決策。
例如：Frontier Airlines 使用模態(tài)對話框來追加銷售機(jī)票之外的更多服務(wù)，該對話框顯示現(xiàn)在購買可以省162 美元，但卻找不到為什么會(huì)省這個(gè)額度的錢：
文檔工具語雀中的模態(tài)對話框：登錄狀態(tài)失敗提醒。
語雀中的進(jìn)行關(guān)聯(lián)操作的非模態(tài)對話框，一個(gè)短小的表單：文字鏈設(shè)置（這里也可以使用氣泡卡片組件）
Gmail 中點(diǎn)擊「寫郵件」按鈕，在右下角打開非模態(tài)小對話框，讓用戶參考下面的郵件撰寫新郵件：
點(diǎn)擊上圖對話框右上角表示「放大」的 icon 后，擴(kuò)展為模態(tài)大對話框，轉(zhuǎn)化為沉浸式的體驗(yàn)：
項(xiàng)目管理工具 Jira 的幫助文檔入口在頁面右側(cè)，點(diǎn)開后從右側(cè)劃入非模態(tài)抽屜展示內(nèi)容，這樣便于用戶進(jìn)行對照查看和操作：
搜索功能入口在頁面左側(cè)中的導(dǎo)航中，點(diǎn)開后從左側(cè)劃入模態(tài)抽屜進(jìn)行交互，用戶可以更加專注于當(dāng)前操作：
上一案例來自之前的 Jira，當(dāng)前版本的 Jira 對導(dǎo)航和交互模式進(jìn)行了調(diào)整，例如通知模塊由模態(tài)抽屜改為了非模態(tài)對話框，出現(xiàn)的位置均遵循就近原則，體驗(yàn)上非模態(tài)對話框更加輕量。
原來由左側(cè)劃入的模態(tài)抽屜，點(diǎn)擊左側(cè)導(dǎo)航后從左側(cè)劃入：
當(dāng)前版本使用非模態(tài)對話框，點(diǎn)擊頂部導(dǎo)航后在 icon 下方出現(xiàn)：
研發(fā)效能工具 Aone 中用非模態(tài)抽屜來展示項(xiàng)目的需求/任務(wù)/bug 的具體內(nèi)容：
與上圖 Aone 的類似場景下，同類產(chǎn)品 Teambition 則采用了模態(tài)對話框：
相比之下，非模態(tài)抽屜的優(yōu)點(diǎn)是，用戶可以同時(shí)查看下面的父級(jí)頁面中其他任務(wù)的標(biāo)題，并快速點(diǎn)擊切換到其他需求；而模態(tài)對話框的優(yōu)點(diǎn)是用戶可以完全沉浸在當(dāng)前的任務(wù)中，同時(shí)頂部也增加了「上一條」、「下一條」按鈕，支持上下條快速切換。
兩者對比可以看出，兩種組件自身的優(yōu)點(diǎn)也是對方的不足，沒有百分百的十全十美。選擇哪一個(gè)，要看具體用戶的需求和產(chǎn)品的定位。
文檔工具 Gitbook 中，產(chǎn)品功能和交互都很簡潔輕量，沒有出現(xiàn)對話框組件，在文檔中插入圖片或文件、編輯導(dǎo)航、導(dǎo)入文檔等稍重的操作使用抽屜，而插入表情、標(biāo)簽等位置指向明確、操作很輕的使用氣泡卡片，這些氣泡卡片和非模態(tài)的對話框類似：
按下圖從應(yīng)用場景、交互需求、信息長度三個(gè)維度來判斷使用對話框還是抽屜。
例如：為一個(gè)表單選擇組件，從應(yīng)用場景來看，對話框和抽屜皆可；從交互維度，該表單的填寫需要參考表單的父級(jí)頁面中的內(nèi)容，則確定選擇非模態(tài)抽屜，不需要再從長短考慮。
必要的情況下，在抽屜上疊放對話框也是可以的，例如在抽屜操作過程中有非常重要的信息要即刻告知用戶，可以通過對話框展示。
參考：
作者：林葉，螞蟻集團(tuán)設(shè)計(jì)師
本文由 @Ant Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議
們在瀏覽網(wǎng)頁時(shí)或者翻轉(zhuǎn)頁面時(shí)，經(jīng)常會(huì)看到很多精美的效果的效果。其中，抽屜式網(wǎng)頁效果比較常見，它主要由圖片和文字通過添加浪js 來實(shí)現(xiàn)。抽屜式網(wǎng)頁通過移動(dòng)鼠標(biāo)來實(shí)現(xiàn)頁面的切換，通過改變文字和圖片而展現(xiàn)不同的界面，它非常實(shí)用而且實(shí)現(xiàn)簡單。
解決方案
制作抽屜式頁面時(shí)，主要會(huì)用倒忙HTML ， CSS 和 JavaScript 。
（1）通過 div 來規(guī)定主要內(nèi)容部分占據(jù)的大小，并通過 CSS 來修正。
（2）使用 overflow 標(biāo)簽，使得多余的圖片部分隱藏。
（3）通過 js 來實(shí)現(xiàn)圖片的移動(dòng)。
制作過程：
（ 1 ）為網(wǎng)頁添加背景圖片，并定義一個(gè)容器 wrap 來規(guī)定網(wǎng)頁主要內(nèi)容的大小和它占據(jù)的位置，如圖 1 所示。
<div id="wrap">
</div>
*{
margin: 0;
padding: 0;
}
body{
background: url(img/sfq4.jpg) center top no-repeat;
}
#wrap{
width: 1090px;
height: 429px;
margin: 150px auto;
border: 1px solid red;
}
（ 2 ）在 wrap 里面添加 ul 列表，在列表中添加主要內(nèi)容的圖片和文字，并為之設(shè)置 CSS 效果。使用 overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。在這里可以使用 overflow:hidden ，它一般用在固定寬高的 div 里面，目的是隱藏溢出使內(nèi)部元素高度即使超過父元素也能夠被隱藏；此外， overflow:hidden 另一個(gè)流行的用途是用在沒有寬高的 div 里，其目的是清除浮動(dòng)。
<div id="wrap">
<ul>
<li style="background-image: url(img/ 手風(fēng)琴 5.jpg);">
<div>
<p> 我的個(gè)人浪漫之旅 || 美麗之約 </p>
</div>
</li>
<li style="background-image: url(img/sfq1.jpg);">
<div>
<p> 我的個(gè)人浪漫之旅 || 美麗之約 </p>
</div>
</li>
<li style="background-image: url(img/sfq6.jpg);">
<div>
<p> 我的個(gè)人浪漫之旅 || 美麗之約 </p>
</div>
</li>
<li style="background-image: url(img/sfq2.jpg); width: 789px;">
<div>
<p> 我的個(gè)人浪漫之旅 || 美麗之約 </p>
</div>
</li>
</ul>
</div>
#wrap{
width: 1090px;
height: 429px;
margin: 150px auto;
overflow: hidden;// 保障圖片在隨鼠標(biāo)移動(dòng)時(shí)不會(huì)發(fā)生錯(cuò)位
}
#wrap ul{
width: 120%;
}
#wrap ul li{
list-style: none;
width: 100px;
height: 429px;
float: left;
}
#wrap ul li .txt{
width: 100px;
height: 429px;
background: rgba(0,0,0,0.5);
overflow: hidden;
}
#wrap ul li p{
padding: 0.5px 42px;
background: rgba(0,0,0,0.5);
color: white;
font-family: " 楷體 ";
font-size: 14px;
}
為了使圖片和文字在同一水平面上，用 float 屬性來清除浮動(dòng)，并且用 rgba 屬性來為文字改變顏色和透明度。 rgba 是代表 Red （紅色） Green （綠色） Blue （藍(lán)色）和 Alpha （不透明度）三個(gè)單詞的縮寫，顏色值取 0 至 250 ；透明度取值在 0 倒忙1 之間，數(shù)值越小則越透明。
（ 3 ）引入 jquery 文件，并添加 js 效果。
<script src="shoufq.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('@wrap ul li').hover(function(){
$(this).stop().animate({
width : '789px'
},500).siblings().stop().animate({
width : '100px'
},500);
});
</script>
添加的 js 代碼中， $('@wrap ul li').hover 表示鼠標(biāo)移上圖片時(shí)，被選中的圖片寬度變?yōu)?789px ，用時(shí) 500 毫秒。其他的圖片則用 siblings 來表示，它們的寬度在鼠標(biāo)以上時(shí)變?yōu)?100px ，用時(shí)也是 500 毫秒。
效果圖：
如果這篇文章對你有幫助,你現(xiàn)在也想學(xué)習(xí)前端開發(fā)技術(shù)的話，可以關(guān)注私信我免費(fèi)領(lǐng)取前端學(xué)習(xí)資料，觀看直播課噢！（私信方法：點(diǎn)擊我頭像進(jìn)我主頁右上面有個(gè)私信按鈕）
條APP上有個(gè)截圖分享功能，就是把文章轉(zhuǎn)成一張圖片，然后分享到各渠道中去，如微信、QQ等，非常實(shí)用，因此，打算就這項(xiàng)功能自己封裝為一個(gè)組件ImageGenerator，后期專門進(jìn)行圖片生成，html是其中的一個(gè)源。
頭條截圖分享的實(shí)際效果圖
目前前端使用較多的html轉(zhuǎn)圖片的工具是Html2Canvas，考慮技術(shù)儲(chǔ)備和問題討論的充裕性，決定封裝一下這個(gè)工具。步驟如下：
按照官方要求，做安裝操作：
npm
npm install html2canvas我當(dāng)時(shí)下載的是1.4.1的版本。
這個(gè)工具有自身的一些限制，使用時(shí)要注意：
[1] 并非真正的截圖軟件，而是根據(jù)DOM繪制出來的，其繪制能力，完全依賴于工具對DOM和對應(yīng)屬性的支持和理解;
[2] 因?yàn)槭褂昧薈anvas支持，生成圖片的區(qū)域不能再有Canvas應(yīng)用，否則會(huì)干擾工具的生成，不能保證生成預(yù)期，因此，如果使用了Canvas圖表的應(yīng)用這個(gè)工具不推薦使用
這個(gè)很簡單，這里就是封裝一個(gè)組件，用于后期引入html之外的源生成圖片，同時(shí)也做一下圖片的統(tǒng)一顯示，從而和系統(tǒng)整體的設(shè)計(jì)進(jìn)行配合。大致的實(shí)現(xiàn)思路如下：
上圖，我們引入了工具本身，并設(shè)置的結(jié)果的顯示區(qū)。生成的結(jié)果將以節(jié)點(diǎn)的方式注入 #image-box 中。
上圖，封裝了一個(gè)方法，用途是利用Html2Canvas工具獲得圖片，這里我們引入了一個(gè)組件的數(shù)據(jù)imageData用以存儲(chǔ)和干預(yù)生成結(jié)果。在這里，我把ImageGenerator封裝為全局組件。
我們在文章的尾部加入一個(gè)share功能，點(diǎn)擊彈出分享設(shè)置的彈窗，實(shí)際效果如下圖所示：
以上技術(shù)實(shí)現(xiàn)比較簡單，這里就不進(jìn)行贅述了。上圖中，我們設(shè)置了一個(gè)生成圖像按鈕，點(diǎn)擊該按鈕則可以觸發(fā)我們組件中的對應(yīng)操作。關(guān)鍵思路包括：
【1】這里設(shè)置了一個(gè)封裝組件shareHandler，封裝了前導(dǎo)模塊和imageGenerator，這兩個(gè)模塊的顯示通過一個(gè)開關(guān)進(jìn)行控制，該開關(guān)則通過圖像生成成功事件進(jìn)行賦值，這樣的話，我們可以實(shí)現(xiàn)圖片生成后，不再顯示前導(dǎo)模塊，而是顯示圖片結(jié)果，即ImageGenerator。
【2】這里有一個(gè)比較關(guān)鍵的操作是shareHandler通過觸發(fā)事件將轉(zhuǎn)換器發(fā)射到文章轉(zhuǎn)換現(xiàn)場，為什么用事件，還是那句話，事件對于解耦和消除組件依賴是最自然的實(shí)現(xiàn)。注意，這里我把imageGenerator通過引用的方式作為參數(shù)傳出了，這樣的好處是事件將轉(zhuǎn)換器代入了轉(zhuǎn)換現(xiàn)場，并可以攜帶回現(xiàn)場轉(zhuǎn)換結(jié)果。
【3】在文章查看器，solutionViewer中，自然會(huì)訂閱事件、事件處理和取消訂閱。注意這里的事件處理，實(shí)際上是調(diào)用了轉(zhuǎn)換器中我們封裝的函數(shù)，參數(shù)則是現(xiàn)場取得的，這里的機(jī)制很簡單，定義要轉(zhuǎn)換div的id，作為參數(shù)傳入函數(shù)。
那么，點(diǎn)擊圖像后，我們可以看到效果圖：
點(diǎn)擊右鍵另存圖像，我們可以獲得一張png格式的圖片，至于后續(xù)對下載和到粘貼板的支持，大家可以自行研究和實(shí)現(xiàn)。
實(shí)現(xiàn)過程中有幾個(gè)注意事項(xiàng)：
【1】Canvas返回時(shí)，其長寬都是按照實(shí)際大小生成的，而我們的例子中，則要根據(jù)右抽屜式的彈窗做width=100%，height=auto的處理，這個(gè)要如何實(shí)現(xiàn)，就是要通過我們在imageGenerator中引入的imageData。
【2】我們的文章顯示中，引入了文件管理的微服務(wù)，因此，文章中圖片的鏈接都是跨域的，所以，必須打開html2Canvas的跨域選項(xiàng)，在封裝的組件里，我是通過一共一個(gè)defaultOptions來實(shí)現(xiàn)這一點(diǎn)的。
這個(gè)選項(xiàng)可以在轉(zhuǎn)換場景提供，也可提供一系列的默認(rèn)值，最常用的除跨域外，還有是否允許log輸出等開關(guān)，大家感興趣可以自行查閱html2Canvas的官網(wǎng)。
內(nèi)容比較簡單，大家如果有這個(gè)應(yīng)用場景，可以參考實(shí)現(xiàn)一下，有問題歡迎大家隨時(shí)交流。謝謝大家的支持。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
