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