文章目錄 [隱藏]
冒泡事件就是點擊子節點，會向上觸發父節點，祖先節點的點擊事件。
我們在平時的開發過程中，肯定會遇到在一個div（這個div可以是元素）包裹一個div的情況，但是呢，在這兩個div上都添加了事件，如果點擊里面的div我們希望處理這個div的事件，但是呢，我們不希望外層的div的事件也執行，這時候我們就要用到阻止冒泡。
通俗點來說吧，你在家里看電視，躲在自己的小房間，但是你不希望聲音傳到隔壁父母的耳朵里，這時候，你可能躲在被窩里，或者墻壁的隔音效果很好，阻隔聲音可以理解為阻止冒泡。
<style> #content{ width: 140px; border: 1px solid blue; } #msg{ width: 100px; height: 100px; margin: 20px; border: 1px solid red; } </style>
<body>
<div id="content">
外層div
<div id="msg">
內層div
</div>
</div>
</body>
顯示結果
對應的jQuery代碼如下：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 為內層div綁定click事件 $("#msg").click(function(){ alert("我是小div"); }); // 為外層div元素綁定click事件 $("#content").click(function(){ alert("我是大div"); }); // 為body元素綁定click事件 $("body").click(function(){ alert("我是body"); }); }); </script>
當點擊小div時，會觸發大div與body 的點擊事件。點擊大div時會觸發body的點擊事件。
如何防止這種冒泡事件發生呢？
修改如下：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 為內層div綁定click事件 $("#msg").click(function(event){ alert("我是小div"); event.stopPropagation(); // 阻止事件冒泡 }); // 為外層div元素綁定click事件 $("#content").click(function(event){ alert("我是大div"); event.stopPropagation(); // 阻止事件冒泡 }); // 為body元素綁定click事件 $("body").click(function(event){ alert("我是body"); event.stopPropagation(); // 阻止事件冒泡 }); });
event.stopPropagation(); // 阻止事件冒泡
有時候點擊提交按鈕會有一些默認事件。比如跳轉到別的界面。但是如果沒有通過驗證的話，就不應該跳轉。這時候可以通過設置event.preventDefault(); //阻止默認行為 ( 表單提交 )。
html部分
<body> <form action="test.html"> 用戶名：<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form> </body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#sub").click(function(event){ //獲取元素的值，val() 方法返回或設置被選元素的值。 var username = $("#username").val(); //判斷值是否為空 if(username==""){ //提示信息 //alert("文本框的值不能為空"); $("#msg").html("<p>文本框的值不能為空.</p>"); //阻止默認行為 ( 表單提交 ) event.preventDefault(); } }); }); </script>
//阻止默認行為 ( 表單提交 ) event.preventDefault();
還有一種防止默認行為的方法就是return false。效果一樣。
代碼如下：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#sub").click(function(event){ //獲取元素的值，val() 方法返回或設置被選元素的值。 var username = $("#username").val(); //判斷值是否為空 if(username==""){ //提示信息 //alert("文本框的值不能為空"); $("#msg").html("<p>文本框的值不能為空.</p>"); //阻止默認行為 ( 表單提交 ) //event.preventDefault(); return false; } }); }); </script>
同理，上面的冒泡事件也可以通過return false來處理。
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 為內層div綁定click事件 $("#msg").click(function(event){ alert("我是小div"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); // 為外層div元素綁定click事件 $("#content").click(function(event){ alert("我是大div"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); // 為body元素綁定click事件 $("body").click(function(event){ alert("我是body"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); });
在開發中遇到這個問題，就是第一次加載的時候會錯位，出現窄很多的現象，在網上找了一番后，發現http://blog.csdn.net/bugscode/article/details/53432069這篇博客中給出的原因是清晰的，但是解決方法我沒怎么看明白，于是按照他所說的原因，即
這種情況是因為Datatables框架中使用到serverSide : true,// 服務器查詢數據屬性，它會使Table標簽中多一個style=”width: xx px;”屬性，這就導致了變化大小時標題對不齊現象。
然后在 datatable中加入了 serverSide 設置，
$('#charging_table').dataTable({
serverSide : false,
......})
既然是因為 serverSide 的原因，那我把它 設置為 false 結果問題還真解決了！
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
-
$("#li_certificate").click(function () {
-
$(this).parent().addClass("selected").siblings().removeClass("selected");
-
$("#div_record").hide();
-
$("#div_certificate").show();
-
//這個位置寫那個重新適應寬度的代碼
-
});
不論是 toB 還是 toC 的移動端設計中，都會遇到一些表單填寫和上傳證件信息的情況。面對移動端要手動填寫的表單，用戶通常期待有高效的解決辦法可以立即完成填寫任務。本文為你總結出了幾種移動端表單設計的實用原則，可以有效解決表單不夠友好、用戶填寫錯誤、費時費力的問題，希望對你有幫助。
1 . 表單結構分層
從表單結構層面來看，內容過長的表單，信息可以分步驟、分頁面處理。
使用條件
案例分析
做企業認證時，由于需要填寫的項目較多，步驟繁雜，因此很多產品會采用分步驟的形式，提示用戶當前進度。
2 . 頁面內容分層
每個頁面的信息內容呈現，有層級，有重點
使用條件
案例分析
大眾點評在設置用戶信息時，雖然要填寫的內容都是“設置”，但是重點需要設置的信息使用了鏈接顏色處理，做了強調。
1 . 以選擇代替輸入
如果用戶可以做選項時，就不要使用輸入，可以充分利用移動設備的性能，比如 GPRS 定位、通訊錄等，合理調用第三方或系統信息。
使用條件
案例分析
2 . 提供默認選項，替用戶做選擇
選取最大概率事件作為默認選項，減少用戶的手動調整
使用條件
案例分析
螞蟻鏈實人認證在上傳證件時會根據用戶所在國家和地區，幫助用戶默認選擇概率最大的選項，不需要用戶自己操作。
根據調用內容調動不同的鍵盤類型
根據表單輸入內容的不同，調用出系統不同的鍵盤類型。
使用條件
案例分析
航旅縱橫在航班查詢的時候，由于航班號都是大寫字母和數字的組合，所以鍵盤會默認調用出只有數字和字母的輸入法，同時默認開啟大寫形式。螞蟻鏈實人認證在用戶手動填寫身份證時也同理。
重要的信息要始終可以被看到
需要避免輸入項被鍵盤遮擋，也要避免將重要的輸入提示作為占位符，不要在用戶填寫時被輸入的內容遮擋。
使用條件
案例分析
大眾點評在寫評論時，一些可以激勵用戶寫點評的提示性文字，會在用戶輸入時始終存在。
重要的信息要始終可以被看到
當輸入需要被判斷和檢驗的信息時，系統最好可以針對信息做實時校驗，避免用戶一直到最后提交表單時才發現填寫問題。
使用條件
案例分析
證件號碼輸入錯誤時會給予相應的提示。
原文鏈接：長弓小子（公眾號）
作者：元堯
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
酷家樂的產品性質決定了其增值付費類活動的目標用戶從根本上說是真正意義上的b端用戶，這類用戶群體的審美喜好一直以來很難與視覺流行的趨勢和酷家樂品牌調性找到平衡點，這類視覺產出已經遇到瓶頸；而此類運營動作越來越多，并且作為公司營收的重要組成部分，在視覺側形成正確的指導方向具有非常重要的意義。
背景
目標
用戶畫像
過半購買角色具備設計屬性，對審美也有一定的要求，所以推廣視覺表現可以也需要具備一定的設計感
購買角色年齡分布較廣，崗位屬性分布也比較平均，因此推廣視覺表現需要兼顧各年齡層，具有通用適配性
視覺現狀
設計過于“用力”，為了在營銷活動中體現酷家樂科技屬性，與D端視覺產生差異，一味采用深色/藍色，硬朗機械感；營銷氛圍疊加后畫面過飽和，難以與傳統電商拉開層次。
流行趨勢
根據用戶畫像，結合流行趨勢與酷家樂品牌調性，我們得出了視覺關鍵詞，我們將它概括為“輕炫彩”。
升級后的虛擬獎品全部采用3D設計，強化獎品的真實存在感，更容易吸引用戶注意；同時應用“輕炫彩”的設計原則，能夠普適于大部分增值營銷類活動頁面/海報中。
輸出的系列圖標可以在不同場景下復用，提升了長期的設計效率。
原文鏈接：酷家樂用戶體驗設計（公眾號）
作者：柚子、阿九
團隊：柚子、阿九、九州、白夜
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本文從什么是認知偏差、認知偏差與UX設計的關系兩方面，總結了13個實用的方法，幫你學會用設計消除偏差。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：vv醬?-?
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天鏡頭將再移到德國，德國在整個現代設計發展中其實戲份很重，上一次出現已經是講述印刷術的時候。
同在 19 世紀末 20 世紀初，整個歐洲設計界都沉浸在新藝術運動期間，德國人也鼓搗出自己的民族設計風格，史稱“青年風格”（Jugendstil）。
相比其它歐洲的新藝術風格，“青年風格”出現得比較晚，以 1896 年德國慕尼黑的《青年》（Jugend）雜志創刊為錨點，但很快成為統治德國設計界的主流風格。
德國《青年》雜志
“青年風格”劃分兩個階段，1900 年之前確實主要受英法新藝術風格及日本浮世繪影響，而 1900 年之后就開始走出自身特色，到底是什么特色呢？我們先按下不表。
“青年風格“跟大部分新藝術風格一樣（除了英國僅限平面設計），覆蓋了建筑、產品、家具與平面設計，史太濃過去的其它系列中（比如”世界現代設計史“、”大師列傳“等）對其也有過不同程度的系統解讀。
青年風格建筑局部
所以在此我們除了以平面設計為核心之外，過去曾經談得比較多的人物或者作品，在這里也只會簡略帶過，本次跟大家談一些不同的故事。
《青年》是一本藝術雜志，剛開始以“展示德國工藝藝術”來定位，但逐漸因為獨特的新藝術設計風格而聞名。
雜志的創辦者叫喬治·赫斯（GeorgHirth），是名德國作家、曾經做過記者，隨后成立出版社后變身出版家。
喬治·赫斯
他有意在德國推廣一種新的視覺設計風格，所以《青年》雜志的聯合創始人中還有畫家里茨·厄爾勒（Fritz Erler）。
里茨·厄爾勒
里茨是個典型的設計全面手，除了平面繪畫，家具、室內、產品都有涉獵，但他最大的貢獻其實是為《青年》雜志引入平面設計人才漢斯·克里斯提安森(Hans Christiansen)。
漢斯·克里斯提安森
《青年》雜志早期的風格基本就是由漢斯奠定的，他為雜志設計了 logo、封面、插圖，還作為美編統籌雜志的排版布局。
漢斯 1895 年時候曾經在法國巴黎學習，深受當時流行的新藝術風格影響，所以《青年》雜志早期的風格就是比較典型的新藝術。
漢斯設計的《青年》雜志封面
德國因為是歐洲印刷術的發源地，自豪感一直難以消退，到了 19 世紀末德國是整個歐洲唯一還保留古騰堡時期流傳的中世紀字體與版面風格的國家。
所以《青年》雜志問世后帶來了一股新風，很快廣受歡迎，發行量從最初的 3 萬本增加到 20 萬本，漢斯功不可沒。
而慢慢形成了“青年風格”的稱謂，并且這種風格被當時的年輕設計師從 2 維平面逐漸拓展到建筑與產品。
漢斯設計的《青年》雜志封面
“青年風格”除了有法國新藝術的特征，還融合了德國民族的設計元素，當中包含前面提及的古騰堡時期的古樸風格，另外就是日耳曼民族的版畫風格與巴伐利亞的一些傳統藝術元素。
日耳曼民族版畫
有了這些基因的融合，青年風格顯得比歐洲其它新藝術風格更加硬朗，厚重。
隨著時間推進，《青年》雜志開始向外廣泛征稿，這樣一來，“青年風格”又變作開源代碼，得以發展與演化，也因此誕生出更多平面設計人才。
當時《青年》雜志培養出幾位聲名遠播的平面設計師，首先登場的是奧托·艾克曼（Otto Eckmann）。
奧托·艾克曼
奧托 1865 年生于德國漢堡，所以當時而言也屬于大齡成名設計師啦（相比同時期的其它大咖），最近這幾天才在關注 30 歲以上設計師難找工作的話題，年齡放在這個行業確實是讓人焦慮的話題。
1894 年之前的奧托其實是一名比較純粹的藝術從業者，專注于繪畫，風格比較龐雜，因為那時候的歐洲已經有多種不同先鋒畫派在流行，比方印象派、象征主義跟現實主義等。
奧托的繪畫作品
如此群雄輩出的時代中，奧托感覺自己在藝術圈太難混出頭，決定曲線救國轉投設計，所以將自己的畫作一口氣賣光，其實也沒賣多少錢，首先開始為一本叫《潘》的雜志進行平面設計。
德國藝術雜志《潘》
《潘》也是當時德國一本挺知名的藝術雜志，以文學、戲劇跟音樂內容為主。
奧托的加盟為《潘》帶來一股新風，他善于自然主義表現手法，喜歡采用女性跟花卉元素，曲線流暢，愛使用日本浮世繪的單線平涂手法，看起來屬于典型的新藝術風格，奧托的風格表現彈性很大。
同一時期他也承接一些商業廣告海報的設計，其設計風格獨樹一幟，能做到基于新藝術框架發展自身特色，比方融合幾何圖形的規律，這種手法對“維也納分離派”產生很大的啟發。
奧托設計的商業海報
新藝術風格在當時的德國而言就是一種風潮，可以理解為時尚，所以在商業市場中很吃香，《青年》雜志看中奧托出色而且可塑性強大的設計表現而邀請他加盟。
加盟《青年》之后的奧托不負所托，輸出了大量優秀的封面與插圖設計，這些設計居然又以浪漫柔和的平涂風格居多，跟漢斯當時的設計風格相互補充。
奧托設計的《青年》雜志
除了平面設計，奧托也做首飾、家具跟服裝一類的設計，跟當時大部分設計師一樣，同屬全能，而且隨著名聲越來越大，德國最大的著名電器企業的“AEG 電器”也邀請他做工廠設計顧問，可謂在設計事業上達到第一個巔峰。
奧托為 AEG 電器做的平面設計
德國 AEG 公司在史太濃的設計史內容中曾多次出現，非常重要，后面還有戲份。
在“第 9 回—東方主義在西方”的時候談到過第一位被稱作“現代設計之父”的人，就是經常會被各種主題或者人物“召喚”出來的威廉莫里斯（William Morris），相信大家已經很熟悉。
而第二位獲此殊榮的人就是馬上要談及的彼得·貝倫斯（Peter Behrens），熟悉史太濃的朋友清楚，他也是老熟人，「大師列傳」里曾經比較詳細談及他的故事。（可以移步檢索）。
他也被業界視為“現代設計之父”，有時候前面會加上“德國“做前綴，但史太濃認為他有足夠資格不加，從歷史來看，他的地位來得有根有據。
貝倫斯精通繪畫、建筑、產品跟平面設計，還是德國設計協會（德國工業同盟）的創建人跟話事人之一，公認完成了世界第一套 VI，也公認設計出世界第一批有規模的現代工業產品。
彼得貝倫斯設計的現代電器
現代建筑界最重要的 4 位大神，有 3 位曾經是他的員工，其中包含后來德國包豪斯的創始人格羅皮烏斯（WalterGropius）。
包豪斯對于現代設計意味著很多，所以培養出格羅皮烏斯的彼得貝倫斯就是“現代設計教父”一類的存在。
這里多說兩句格羅皮烏斯，他雖然以建筑設計為主，但因為創立偉包豪斯也會是我們「平面設計史」系列的重要人物之一，在德國的“青年風格“階段，他也不過是十多歲的孩童，但后面會有他的重要戲份。
話題回到貝倫斯，以上例舉的事情只為說明他在現代設計歷史中舉足輕重，但每個人都有成長過程，“青年風格”時期正是貝倫斯“見龍在田，利見大人”的成長時期。
彼得貝倫斯最著名的新藝術風格作品《吻》
彼得·貝倫斯也生于 1868 年，這一年是個神奇好年份，如果大家有心留意，我們前面陸續聊過的大師，不少于 3 人是這一年出生，歡迎大家留言說出你所知道的答案。
彼得貝倫斯也參與了青年風格的發起，是重要的先鋒之一，1900 年之前，主要為兩份德國雜志做平面設計，分別是《彩色鳥》（Der Bunte Vogel）跟《島》（Die Insel）。
《彩色鳥》雜志
他分別為這兩本雜志提供插圖設計跟版面設計，風格是比較典型的新藝術曲線風格。
“青年風格”時期的貝倫斯作品水平沒有很穩定，好的特別好，有一些相較《青年》雜志的水準而言還是有距離的。
《島》雜志
他真正的蛻變產生在 1900 年之后，因為他跟維也納分離派玩在一起，我們在維也納叛逆青年那一期談過，分離派（the Vienna secession）的風格受過德國“青年風格”的影響，其實兩者互有影響。
分離派的平面設計
彼得貝倫斯跟分離派的老大古斯塔夫·克里姆特（Gustave Klimt）私交甚好，而奧地利人跟德國人本身也是好哥們，所有經常會有學術交流一類的組織活動。
分離派學習了青年風格的版畫格調，而青年風格則學習了分離派那種幾何抽象與象征主義，1900 年之后的青年風格也因此走出自身特色，顯得更加具有裝飾韻味。
青年風格平面設計
這種幾何抽象的變化，其實也跟與現代設計思潮銜接的重要階段，因為到了 1907 年，彼得貝倫斯就跟其它一些青年風格設計師成立“德國工業同盟”，同盟成員中誕生出后來包豪斯的兩任校長，可見彼此存在一脈相承的一些關系。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
注冊和登錄是進入產品的首要操作，毫無疑問好的用戶體驗能為產品加分，同理好的注冊和登錄體驗會讓用戶對產品留下更好的印象。
簡單的注冊和登錄流程中也存在著很多交互細節，這里介紹 10 個平常經常用得到的設計細節，一起來看看～
交互設計的基本原則之一是去除雜亂，去除每一次不必要的操作，避免用戶長時間的等待或思考。
用戶進入注冊頁面注冊賬號時，會第一時間填寫郵箱，那么我們是不是可以考慮自動對焦郵箱選項，省去用戶再次點擊的麻煩。
我們在輸入注冊信息的時候，可能并沒有意識到錯誤，通常會在賬號全部輸入完畢之后才會出現錯誤提示，因此我們又要重新再輸入一遍冗長的賬號信息，過程很繁瑣。
對于填寫郵箱之類的操作，進行模糊驗證是有意義的，避免了用戶信息全部填寫完整后再驗證，而是在系統發現錯誤后盡快讓用戶知道。
盡可能讓創建的每個帶標簽的文本輸入都有可單擊的標簽，如密碼應該是可點擊的，并將焦點放在密碼字段上。
輸入密碼總是讓人頭疼的一件事，尤其是當密碼有大小寫、數字、符號等要求時，往往需要輸入很多次后才能成功登錄。
不應該讓用戶去猜測密碼有什么要求，相反應該在用戶開始輸入密碼時就給出明確的提示要求。
允許用戶查看輸入的密碼，這樣方便他們對密碼進行二次校驗和修改，同時這種方式比再次重新輸入密碼要簡單。
清晰的按鈕文案既能吸引用戶點擊，也可以引導完成他們想要完成的操作。沒有用戶喜歡模棱兩可的文案提示，尤其是在做選擇的時候。
每個產品的注冊頁面都會有這樣的服務條款，在情況允許的條件下，盡可能提供默認的選擇結果，避免用戶再次選擇和操作。
如果用戶不小心選擇了錯誤的選項，要保證用戶能從注冊和登錄中快速地切換。最常見的形式是在底部添加一個鏈接。
當用戶輸入密碼并顯示密碼錯誤時，需要具體說明密碼不符的原因，告訴用戶如何修改密碼。
如果用戶密碼輸入錯誤，應該保留賬號信息，不必再讓用戶重復輸入賬號，只需要輸入密碼即可。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：Clip設計夾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當互聯網不斷的深入到我們的生活中，我們對安全感的需求也延續到了互聯網使用中，特別體現于互聯網金融產品。由于其具有風險性、收益性、流動性等特點，用戶對于資產安全的掌控感更為關注，產品使用體驗欠佳也直接影響客戶安全感。
以下將基于自身工作總結和行業經驗，聚焦互聯網金融產品分享和總結如何向用戶營造安全感。
目錄：
一、需要什么樣的安全感？
二、如何傳達出安全感？
三、怎樣體現出安全感？
安全感是人類最底層的需求，但不同類用戶群體需要的安全感也各有千秋，我們參考第一財經商業數據中心×螞蟻財富的2019線上理財人群報告，將線上理財的人群分為四類：
分別是初入職場的95后、職場新興力量的90后、理財中堅力量的80后和經歷風雨的70后。其中近一年的新增移動互聯網基民中超五層為90后、95后，成為金融移動互聯網的中堅力量。
這類型的投資者由于具有碎片化處理事務的習慣和金融知識不足、理財經驗不豐富、資金的抗風險能力不高的特點，當市場普遍行情下跌時，更容易產生焦慮的情緒而導致“割韭菜”，進而可能會影響到卸載APP的行為。根據Mob研究院的數據顯示，在2021年3月天天基金日均卸載用戶規模為前兩個月的6倍，而當時對應的市場行情正為基金普遍大跌。
因此從安全感的需求上他們更側重高效的信息降維、足夠的理財產品的風險提示、合理的預期收益宣傳以及投后虧損及時的內容陪伴。
而根據騰訊理財通×國家金融與發展實驗室出品的2021年互聯網理財行為與安全研究報告顯示，理財知識更充足，理財經驗更豐富的80后、70后在安全感的維護上則更關注理財產品的信息披露風險、信息不透明風險、市場政策風險、個人信息泄露風險此類問題。
安全感是一種感性的心理感受，而人類的情感由本能、行為、反思三個層面共同決定的。
這三個層次作為人類大腦的運作的規律，映射到設計當中，同樣是可供遵循、值得探究的。
先于意識和思維，它是外觀要素和第一印象形成的基礎，著重于產品的外觀、觸感等。“美觀即實用原則”人們會潛意識里認為好看的東西也是好用的，所以在界面設計當中，主要設計對象是視覺設計。
而金融產品中，常用藍、綠等冷色調的色彩，給人以冷靜，穩定的感覺，表現金融產品的科技感和可靠性；常用紅、黃、橙等暖色調，代表著熱情、溫暖與責任。
是人類身體日常行為的運作，行為層的設計與產品使用過程中的愉悅感和效率有關。好的行為層設計對應產品功能傳達、易學性與易用性，以及正面的心情感受。在界面設計當中，主要設計對象是交互設計。（將在下文通過投資場景詳細分析）
超越了本能層和行為層，存在意識和更高級的感覺、情緒及知覺。對應的是產品的情感溫度，主要的設計對象是正向情感的結果反饋以及品牌信任。
良好的企業品牌形象和口碑很大程度上會給用戶帶來認知上的安全感。用戶在初次選擇購買金融產品時，往往強大的品牌背書起到了關鍵作用，即使是同一只基金，用戶也會選擇在自己信賴的平臺里購買。
我們可以通過在頁面設計中加入更多的品牌元素，如品牌主題色、LOGO、品牌IP形象、品牌slogan等，來潛移默化地讓用戶感受企業的價值：
另一種常見于一些平臺利用強大的背書以及所獲的成就，清晰地向用戶展示可以提供的保障權益，責任條款及資質介紹等來傳達企業對用戶負責的態度，提升用戶對產品乃至對企業的信任感：
我們將金融的生命周期分為三個階段，分別可以概括為：投資前（產品選擇）、投資中（產品交易）、投資后（產品管理），不同階段的關注點不同，而對于安全感需求各不相同：
結合文章一開始對人群的分析，由于投前的行為特點更多聚焦于產品的選擇，因此從理財小白的角度對于安全感的缺乏更集中于“買了會不會虧錢？”、“產品買對了嗎”、“看不懂規則”、“這個適合我嗎”等，尤其存在于一些新形式的理財組合產品和策略智能投產品中。
在這個階段的安全感維護，除了相關頁面的信息降維、必要的投教啟蒙以外，還需要考慮用戶疑問的快速解答、合理的預期收益宣傳等。另外投錢的啟蒙教育更可以考慮結合一些運營活動，讓小白用戶通過更有趣的方法了解產品，了解自己適合的產品。
而對于較有經驗的理財“老司機”而言，安全感的缺乏更集中于“過往表現怎么樣，如最大回測率等”、“市場行情、政策是否利好”、“基金經理的資歷”等，而更需要考慮信息的多維度展示、信息披露、行情資訊的展示、甚至是產品的對比等來表達產品的未來盈收能力可期。
當投資者已經選擇好信任的理財產品時，在產品交易的各個界面也需要關注交易流程中安全感的反饋。
其中包括正向反饋和負向反饋。正向反饋是指用戶跟產品發生正確的交互時，系統給予用戶的正確引導，可以幫助用戶打消顧慮，建立信心，讓用戶感受到一切都在順利地進行著，這對那些在設備操作方面缺乏信心的用戶來說尤為重要，用戶不會對自己的操作或對平臺產生質疑，如：專屬的密碼輸入鍵盤、正向反饋如金額輸入時的金額提示、特別提出易誤解的交易規則等
而反向反饋是指用戶在操作過程中出現或疑似出現誤操作時，系統向用戶展示提示或二次確認以促進錯誤的糾正或確保此操作無誤。它能確保在第一時間告知用戶出現了不正確操作，及時更改，使流程順利進行，尤其是對于一些理財小白而言，合理的容錯設計更促進有效投資，提高未來的盈利體驗。如撤銷操作二次確認、購買超出風險承受能力的產品、輸入錯誤金額時的反饋。
引起思考：
雖然天天基金的撤單確認展示了退回帳戶，但是此彈窗的取消按鈕引導性過強，首次操作僅通過銀行卡的列表的箭頭較難聯想到是確認撤單的下一步操作（還以為是可選擇退的帳戶）。
產品交易成功后，投資者的關注會更集中于自己的資產的變化，產品的未來走勢等，因此在安全感的提供上，需要向投資者傳達準確的交易狀態、資產狀態、資產的保護等，甚至可以在產品購買的完成頁設置快捷加入自選和漲跌提醒等
引起思考：
在支付寶的基金總金額中，存在交易進行中的提示文案為“買入待確認*元”，但不少小白會產生疑問，當前展示的基金總金額是否包含提示的待確認金額，此時是否可將文案改為“含買入待確認*元”（畢竟也有部分直銷app并不會將待確認金額包含進產品的總金額中）
另一方面的更需要考慮當基金產品存在虧損時，及時向投資者傳達情感陪伴和合理的投資交易，以促進投資者優化持倉或保持中長期持有，避免頻繁的短期交易而導致不良的盈利體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
input輸入框在獲得或失去焦點時隱藏或顯示文字，這樣的焦點效果想必很多朋友在填寫form表格的時候都曾見識過吧，本文使用jquery實現以下，感興趣的朋友可以參考下哈
大家可以看效果圖的搜索輸入框，默認顯示著“用戶名/Email”的提示，當這個 input 輸入框獲得焦點時，就自動清空等待用戶輸入，當用戶啥也沒輸入就離開這個 input 輸入框時，輸入框內又再次顯示“用戶名/Email”的提示。是不是很常見？很多搜索、登錄、表單都會用到這個效果，但是我看了N多個網站，有90%以上是這么實現的：
<input type="text" value="搜索關鍵字" onfocus="if(this.value == '搜索關鍵字') this.value = ''" onblur="if(this.value =='') this.value = '搜索關鍵字'" />
我是非常反對把 javascript 寫在 html 標簽里的，這和 style 寫在 html 標簽里一樣，雖然不違反 W3C 標準，但也不推薦這么寫。因為：
1.完全沒有復用性可言，如果是個表單，輸入框很多，每個都需要這樣的效果，那就每個都這么處理嗎？
2.如果要修改其中的提示文字，費時費力又不好維護。
3.我們倡導結構（html）、表現（css）、行為（javascript）三者分離，這才是一個好的頁面。
那要怎么寫才能實現這個效果，而且既有復用性，又好維護，又不需要把 js 寫進 html 里呢？
具體方法如下:
首先肯定是引入jQuery
Html代碼:
<div><input type="text" value="提示測試" class="input_test" /></div> <div><input type="text" value="請輸入搜索關鍵" class="input_test" /></div>
jQuery代碼:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.input_test').bind({ focus:function(){ if (this.value == this.defaultValue){ this.value=""; } }, blur:function(){ if (this.value == ""){ this.value = this.defaultValue; } } }); }) </script>
只要在實現的input輸入框加上”input_test”這個class就可以輕松實現了
文章來源：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn