有研究表明，人們會(huì)自然地認(rèn)為外表更漂亮的人擁有更加優(yōu)秀的品質(zhì)特質(zhì)。即我們對(duì)一個(gè)人的外表印象會(huì)影響對(duì)他品質(zhì)的感受和思考，心理學(xué)上將這種行為稱(chēng)為「光環(huán)效應(yīng)」。
同樣有人認(rèn)為，這樣的光環(huán)效應(yīng)作用于人機(jī)交互設(shè)計(jì)領(lǐng)域也一樣是奏效的。好看的設(shè)計(jì)，會(huì)讓用戶(hù)認(rèn)為產(chǎn)品更好用，外觀會(huì)影響用戶(hù)對(duì)產(chǎn)品可用性的感受，這就是所謂的「美即好用效應(yīng)」。
前面我在談「費(fèi)茨定律」或是「恐懼留白」的時(shí)候，大多數(shù)方法論都可以溯源到真實(shí)的科學(xué)實(shí)驗(yàn)或心理學(xué)文獻(xiàn)記錄。
但在查找「美即好用效應(yīng)」資料的時(shí)候，所有內(nèi)容對(duì)初始實(shí)驗(yàn)都是一筆帶過(guò)：
1995年，日立設(shè)計(jì)中心的研究員 Massaki Kurosu 和 Kaori Kashimura 通過(guò)26種不同的 ATM 交互界面對(duì) 252 位參與者進(jìn)行詳細(xì)的用戶(hù)體驗(yàn)測(cè)試。結(jié)果發(fā)現(xiàn)，這些因素中很大一部分對(duì)真實(shí)可用性的影響微乎其微，反而界面美觀度對(duì)真實(shí)可用性的影響出乎預(yù)料的大。
表現(xiàn)可用性的決定因素對(duì)真實(shí)可用性的影響系數(shù)大多在 0.000-0.310 之間，而界面美觀度這個(gè)數(shù)據(jù)達(dá)到了 0.589。
我試著到很多地方去搜索更多關(guān)于該實(shí)驗(yàn)的記錄，卻都沒(méi)有找到相關(guān)論文。所以對(duì)于這個(gè)實(shí)驗(yàn)的結(jié)果，我只能保持觀望態(tài)度。（也可能是我檢索資料的能力還有待提升...）
首先是我無(wú)法確定所有參與者在這個(gè)實(shí)驗(yàn)中的需求目標(biāo)是否發(fā)生變化，概述中既沒(méi)有闡明對(duì)照組，也沒(méi)有告知實(shí)驗(yàn)對(duì)比過(guò)程的細(xì)節(jié)。
其次在「美觀度對(duì)可用性的影響較大」的實(shí)驗(yàn)結(jié)論中，科研人員是如何定義「美觀度」的標(biāo)準(zhǔn)的？審美是一種主觀意識(shí)，那么「美觀度」應(yīng)該如何被定義，科研人員究竟是從配色、排版、統(tǒng)一性，還是動(dòng)態(tài)和諧的交互流程定義了實(shí)驗(yàn)界面的「美觀度」？我們也不得而知。
所以「美即好用效應(yīng)」在人機(jī)交互領(lǐng)域的可用性，究竟是一條科學(xué)實(shí)驗(yàn)結(jié)論，還是屬于用戶(hù)心理研究，抑或只是人傳人傳出來(lái)的自然規(guī)律，作為筆者，我本著對(duì)我讀者負(fù)責(zé)的前提下，也只能畫(huà)個(gè)問(wèn)號(hào)。
在人們追求基本生理需求的時(shí)代，「美即好用效應(yīng)」的作用力必然不會(huì)比溫飽時(shí)代的大。
為什么這么說(shuō)？從馬斯洛需求層次理論模型中就可以看到，對(duì)于用戶(hù)而言，“審美需求”是在保證了一系列缺失性基礎(chǔ)需求之后，才會(huì)追求的需求層次。
馬斯洛需求層次理論映射到用戶(hù)體驗(yàn)五層理論也是異曲同工，從戰(zhàn)略層到表現(xiàn)層，越是重要的層級(jí)掛靠的馬斯洛需求層次就越基礎(chǔ)。擁有巨大商業(yè)價(jià)值的產(chǎn)品，往往影響其在商業(yè)市場(chǎng)中走向的，都是基礎(chǔ)需求，而非高層級(jí)需求。
這就為什么我前文說(shuō)道，很多人抽離前提來(lái)談「美」的重要性。用戶(hù)對(duì)「美」的追求是在滿(mǎn)足了基礎(chǔ)需求的前提之下，如果一個(gè)產(chǎn)品的戰(zhàn)略、范圍層難以落地，空談「美即好用效應(yīng)」便是空中樓閣罷了。
表現(xiàn)層在沒(méi)有可靠的戰(zhàn)略前提之下，是毫無(wú)商業(yè)價(jià)值的個(gè)人狂歡。
UI是一項(xiàng)純藝術(shù)性創(chuàng)作的職業(yè)嗎？在我剛接觸UI行業(yè)的時(shí)候，我是這么單純地認(rèn)為的，但現(xiàn)在已經(jīng)不再是了。
我前一陣子看了像素范泡泡老師的直播，其觀點(diǎn)我非常贊同，也在社群里和大家進(jìn)行過(guò)了交流。在此我引用兩個(gè)泡泡老師舉到的 iOS UI 的案例，來(lái)闡述 UI 探索的「美」，究竟是在探索什么。
大概在去年，網(wǎng)傳蘋(píng)果將強(qiáng)制要求 APP Store 中的應(yīng)用程序要適配暗黑模式。暗黑模式也掀起了一輪新的視覺(jué)設(shè)計(jì)潮流，暗調(diào)的設(shè)計(jì)語(yǔ)言讓產(chǎn)品在視覺(jué)上看上去更酷更年輕。
但蘋(píng)果激勵(lì)大部分應(yīng)用程序適配暗黑模式，只是單純的為了視覺(jué)上的好看嗎？其實(shí)并不是。
是因?yàn)楹笃诘奶O(píng)果硬件設(shè)備多采用OLED屏幕技術(shù)，比起其他廠商的LCD屏幕技術(shù)，有其優(yōu)點(diǎn)，但也有其缺點(diǎn)。OLED采用低頻PWM調(diào)光模式，也就是通過(guò)低頻頻閃的方式控制屏幕亮度（一亮一暗、一亮一暗如此反復(fù)）。在調(diào)低屏幕白光亮度的情況下，頻閃很容易造成用戶(hù)視覺(jué)疲勞。這一點(diǎn)極可能成為蘋(píng)果設(shè)備的銷(xiāo)售弱點(diǎn)。
于是蘋(píng)果希望在用戶(hù)需要調(diào)低屏幕亮度的場(chǎng)景中，通過(guò)暗黑模式的視覺(jué)手法，大量運(yùn)用黑色，這樣OLED屏幕的光源就可以直接關(guān)閉，而不需要采用頻閃的方式來(lái)控制屏幕亮度，從而減輕用戶(hù)視覺(jué)疲勞的現(xiàn)象。
（ps.看不懂的朋友莫急，文末我放了B站up主硬件茶談的《全網(wǎng)最簡(jiǎn)潔易懂的OLED與LCD屏幕工作原理與優(yōu)劣科普》視頻，感興趣的小伙伴可以查看）
蘋(píng)果主動(dòng)落地暗黑模式的開(kāi)發(fā)，并且激勵(lì)在應(yīng)用市場(chǎng)上架的其他應(yīng)用也適配暗黑模式，實(shí)際上是與其商業(yè)目的掛鉤的一種行為，只是將解決方案落實(shí)到了表現(xiàn)層。
iOS7掀起的扁平設(shè)計(jì)風(fēng)潮，至今還在影響著UI設(shè)計(jì)趨勢(shì)以及用戶(hù)的審美。但你硬要從個(gè)人審美角度去評(píng)判曾經(jīng)的擬物風(fēng)格與現(xiàn)在的扁平風(fēng)格究竟哪個(gè)更好，只能說(shuō)仁者見(jiàn)仁。
泡泡老師認(rèn)為，iOS 擬物風(fēng)格向扁平風(fēng)格的轉(zhuǎn)換，也不僅僅是基于視覺(jué)「美」的考慮。因?yàn)樵?jīng)的蘋(píng)果在全球移動(dòng)品牌廠商中，擁有更加優(yōu)質(zhì)的屏幕硬件，他們的屏幕可以高清顯示更多的設(shè)計(jì)細(xì)節(jié)，于是仿真的擬物風(fēng)格在蘋(píng)果設(shè)備上通過(guò)其光影、陰影的展示，可以突出蘋(píng)果的屏幕優(yōu)勢(shì)，從而成為其商業(yè)賣(mài)點(diǎn)。
但后來(lái)隨著移動(dòng)設(shè)備品牌商的硬件差距不斷縮小，高清顯示已不再成為蘋(píng)果獨(dú)家的亮點(diǎn)，蘋(píng)果也就不需要再花費(fèi)更多的設(shè)計(jì)成本在擬物設(shè)計(jì)上了。此時(shí)的擬物設(shè)計(jì)成本并不能再持續(xù)帶來(lái)高效的商業(yè)回報(bào)，從而轉(zhuǎn)向扁平風(fēng)格，一方面可以提高設(shè)計(jì)效率、降低設(shè)計(jì)成本，同時(shí)對(duì)其周邊設(shè)計(jì)的延展性更高。
從這兩個(gè)案例中可以看到，UI雖然做的是表現(xiàn)層的工作，但實(shí)際上也是在為用戶(hù)、為商業(yè)、為戰(zhàn)略而服務(wù)。除了視覺(jué)的「美」，我們也應(yīng)該關(guān)注產(chǎn)品背后的數(shù)據(jù)、商業(yè)價(jià)值，我想這就是UI與純藝術(shù)性創(chuàng)作型設(shè)計(jì)崗位的區(qū)別吧。
說(shuō)了一堆，感覺(jué)我好像一個(gè)「美即好用效應(yīng)」的ANTI份子...其實(shí)也不全是。我清楚「美即好用」在一些商業(yè)案例中的運(yùn)用，我不否定該定律存在的價(jià)值，只是想表達(dá)一些看法。
首先我認(rèn)為不應(yīng)該在產(chǎn)品還沒(méi)有扎根市場(chǎng)，擁有產(chǎn)品自身的商業(yè)價(jià)值之前，過(guò)分拘泥于視覺(jué)表現(xiàn)層的內(nèi)容。在腥風(fēng)血雨的互聯(lián)網(wǎng)商業(yè)市場(chǎng)，迅速小跑迭代，做好用戶(hù)數(shù)據(jù)分析，增強(qiáng)產(chǎn)品自身留存實(shí)力、激活市場(chǎng)潛在用戶(hù)，比把目光放在視覺(jué)表現(xiàn)上可能更有價(jià)值。當(dāng)產(chǎn)品在一個(gè)領(lǐng)域或市場(chǎng)積累了一定忠實(shí)度較高的用戶(hù)之后，「美即好用效應(yīng)」可能才會(huì)發(fā)揮其功效。
其次我想對(duì)話同行的UI設(shè)計(jì)師，我一年前在《UI如何提升個(gè)人價(jià)值？UGD思維了解一下》中已經(jīng)說(shuō)到過(guò)，UI設(shè)計(jì)不應(yīng)只停留在視覺(jué)表現(xiàn)層，想提升自我價(jià)值，一定要培養(yǎng)超脫表現(xiàn)層的思維能力。
我們不應(yīng)該一味地信奉「美即好用」。作為UI設(shè)計(jì)師，我們要通過(guò)避免「美但不好用」或「不美但好用」的極端來(lái)平衡視覺(jué)表現(xiàn)與功能的體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
文章來(lái)源：站酷 作者：UCD耍家
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
有時(shí)候我們的標(biāo)簽都是從后臺(tái)獲取的數(shù)據(jù)，然后利用JS添加到頁(yè)面上，當(dāng)我們寫(xiě)生成的標(biāo)簽的點(diǎn)擊事件（click）時(shí)沒(méi)有效果。
例如：
<section> 測(cè)試動(dòng)態(tài)生成的DOM點(diǎn)擊事件 <br /> </section> <script src="jquery-1.11.2.min.js"></script> <script> $(function () { $.ajax({ type: "post", url: "Handler1.ashx", data: {}, success: function (data) { $("section").append(data); //把獲取的標(biāo)簽動(dòng)態(tài)添加到頁(yè)面中 } }) }); $("#test").click(function () { alert("Smile"); }) </script>
生成頁(yè)面，點(diǎn)擊A標(biāo)簽無(wú)效果。
這里只介紹兩種解決方法。
①把事件寫(xiě)在生成的字符串當(dāng)中，感覺(jué)很low
里面什么方法名外面就聲明一個(gè)（需要帶參就傳參）。
②我一般喜歡在JS里面直接寫(xiě)點(diǎn)擊事件，不喜歡在標(biāo)簽里面寫(xiě)事件
我們直接寫(xiě)這個(gè)標(biāo)簽的點(diǎn)擊事件是沒(méi)效果的，我們就換個(gè)寫(xiě)法，利用On來(lái)完成。
這樣也可以完成點(diǎn)擊事件。
另附：a標(biāo)簽的href也是可以執(zhí)行腳本的，點(diǎn)擊事件也會(huì)執(zhí)行腳本，點(diǎn)擊事件優(yōu)先，然后在執(zhí)行href鏈接。
下載一般都是把A標(biāo)簽的Href給個(gè)一般處理程序的鏈接（參數(shù)就用？傳值）。但我這個(gè)下載的參數(shù)是動(dòng)態(tài)生成的，在后臺(tái)生成字符串的時(shí)候沒(méi)有參數(shù)。需要在前臺(tái)根據(jù)用戶(hù)選擇的來(lái)進(jìn)行傳遞參數(shù)。所以需要我們動(dòng)態(tài)生成Href的鏈接
//下載 $("#uploadInfo").click(function () { var uids = ""; $(":checkbox[name='A']:checked").each(function (i, item) { uids += $(item).attr("data-id") + ","; }) if (uids === "") { NewAlertBox("warning","請(qǐng)最少選擇一項(xiàng)",2000); } else { var urls = "GroupTeamUserListDocUpload.ashx?CaseID=" + CaseID + "&UID=" + uids; $(this).attr("href", urls); //執(zhí)行完了點(diǎn)擊事件，把Href賦值，然后自動(dòng)跳轉(zhuǎn)href鏈接 } });
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
冒泡事件就是點(diǎn)擊子節(jié)點(diǎn)，會(huì)向上觸發(fā)父節(jié)點(diǎn)，祖先節(jié)點(diǎn)的點(diǎn)擊事件。
我們?cè)谄綍r(shí)的開(kāi)發(fā)過(guò)程中，肯定會(huì)遇到在一個(gè)div（這個(gè)div可以是元素）包裹一個(gè)div的情況，但是呢，在這兩個(gè)div上都添加了事件，如果點(diǎn)擊里面的div我們希望處理這個(gè)div的事件，但是呢，我們不希望外層的div的事件也執(zhí)行，這時(shí)候我們就要用到阻止冒泡。
通俗點(diǎn)來(lái)說(shuō)吧，你在家里看電視，躲在自己的小房間，但是你不希望聲音傳到隔壁父母的耳朵里，這時(shí)候，你可能躲在被窩里，或者墻壁的隔音效果很好，阻隔聲音可以理解為阻止冒泡。
<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">
內(nèi)層div
</div>
</div>
</body>
顯示結(jié)果
對(duì)應(yīng)的jQuery代碼如下：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 為內(nèi)層div綁定click事件 $("#msg").click(function(){ alert("我是小div"); }); // 為外層div元素綁定click事件 $("#content").click(function(){ alert("我是大div"); }); // 為body元素綁定click事件 $("body").click(function(){ alert("我是body"); }); }); </script>
當(dāng)點(diǎn)擊小div時(shí)，會(huì)觸發(fā)大div與body 的點(diǎn)擊事件。點(diǎn)擊大div時(shí)會(huì)觸發(fā)body的點(diǎn)擊事件。
如何防止這種冒泡事件發(fā)生呢？
修改如下：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 為內(nèi)層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(); // 阻止事件冒泡
有時(shí)候點(diǎn)擊提交按鈕會(huì)有一些默認(rèn)事件。比如跳轉(zhuǎn)到別的界面。但是如果沒(méi)有通過(guò)驗(yàn)證的話，就不應(yīng)該跳轉(zhuǎn)。這時(shí)候可以通過(guò)設(shè)置event.preventDefault(); //阻止默認(rèn)行為 ( 表單提交 )。
html部分
<body> <form action="test.html"> 用戶(hù)名：<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() 方法返回或設(shè)置被選元素的值。 var username = $("#username").val(); //判斷值是否為空 if(username==""){ //提示信息 //alert("文本框的值不能為空"); $("#msg").html("<p>文本框的值不能為空.</p>"); //阻止默認(rèn)行為 ( 表單提交 ) event.preventDefault(); } }); }); </script>
//阻止默認(rèn)行為 ( 表單提交 ) event.preventDefault();
還有一種防止默認(rèn)行為的方法就是return false。效果一樣。
代碼如下：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#sub").click(function(event){ //獲取元素的值，val() 方法返回或設(shè)置被選元素的值。 var username = $("#username").val(); //判斷值是否為空 if(username==""){ //提示信息 //alert("文本框的值不能為空"); $("#msg").html("<p>文本框的值不能為空.</p>"); //阻止默認(rèn)行為 ( 表單提交 ) //event.preventDefault(); return false; } }); }); </script>
同理，上面的冒泡事件也可以通過(guò)return false來(lái)處理。
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 為內(nèi)層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; }); });
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
在開(kāi)發(fā)中遇到這個(gè)問(wèn)題，就是第一次加載的時(shí)候會(huì)錯(cuò)位，出現(xiàn)窄很多的現(xiàn)象，在網(wǎng)上找了一番后，發(fā)現(xiàn)http://blog.csdn.net/bugscode/article/details/53432069這篇博客中給出的原因是清晰的，但是解決方法我沒(méi)怎么看明白，于是按照他所說(shuō)的原因，即
這種情況是因?yàn)镈atatables框架中使用到serverSide : true,// 服務(wù)器查詢(xún)數(shù)據(jù)屬性，它會(huì)使Table標(biāo)簽中多一個(gè)style=”width: xx px;”屬性，這就導(dǎo)致了變化大小時(shí)標(biāo)題對(duì)不齊現(xiàn)象。
然后在 datatable中加入了 serverSide 設(shè)置，
$('#charging_table').dataTable({
serverSide : false,
......})
既然是因?yàn)?serverSide 的原因，那我把它 設(shè)置為 false 結(jié)果問(wèn)題還真解決了！
文章來(lái)源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
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();
-
//這個(gè)位置寫(xiě)那個(gè)重新適應(yīng)寬度的代碼
-
});
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
不論是 toB 還是 toC 的移動(dòng)端設(shè)計(jì)中，都會(huì)遇到一些表單填寫(xiě)和上傳證件信息的情況。面對(duì)移動(dòng)端要手動(dòng)填寫(xiě)的表單，用戶(hù)通常期待有高效的解決辦法可以立即完成填寫(xiě)任務(wù)。本文為你總結(jié)出了幾種移動(dòng)端表單設(shè)計(jì)的實(shí)用原則，可以有效解決表單不夠友好、用戶(hù)填寫(xiě)錯(cuò)誤、費(fèi)時(shí)費(fèi)力的問(wèn)題，希望對(duì)你有幫助。
1 . 表單結(jié)構(gòu)分層
從表單結(jié)構(gòu)層面來(lái)看，內(nèi)容過(guò)長(zhǎng)的表單，信息可以分步驟、分頁(yè)面處理。
使用條件
案例分析
做企業(yè)認(rèn)證時(shí)，由于需要填寫(xiě)的項(xiàng)目較多，步驟繁雜，因此很多產(chǎn)品會(huì)采用分步驟的形式，提示用戶(hù)當(dāng)前進(jìn)度。
2 . 頁(yè)面內(nèi)容分層
每個(gè)頁(yè)面的信息內(nèi)容呈現(xiàn)，有層級(jí)，有重點(diǎn)
使用條件
案例分析
大眾點(diǎn)評(píng)在設(shè)置用戶(hù)信息時(shí)，雖然要填寫(xiě)的內(nèi)容都是“設(shè)置”，但是重點(diǎn)需要設(shè)置的信息使用了鏈接顏色處理，做了強(qiáng)調(diào)。
1 . 以選擇代替輸入
如果用戶(hù)可以做選項(xiàng)時(shí)，就不要使用輸入，可以充分利用移動(dòng)設(shè)備的性能，比如 GPRS 定位、通訊錄等，合理調(diào)用第三方或系統(tǒng)信息。
使用條件
案例分析
2 . 提供默認(rèn)選項(xiàng)，替用戶(hù)做選擇
選取最大概率事件作為默認(rèn)選項(xiàng)，減少用戶(hù)的手動(dòng)調(diào)整
使用條件
案例分析
螞蟻鏈實(shí)人認(rèn)證在上傳證件時(shí)會(huì)根據(jù)用戶(hù)所在國(guó)家和地區(qū)，幫助用戶(hù)默認(rèn)選擇概率最大的選項(xiàng)，不需要用戶(hù)自己操作。
根據(jù)調(diào)用內(nèi)容調(diào)動(dòng)不同的鍵盤(pán)類(lèi)型
根據(jù)表單輸入內(nèi)容的不同，調(diào)用出系統(tǒng)不同的鍵盤(pán)類(lèi)型。
使用條件
案例分析
航旅縱橫在航班查詢(xún)的時(shí)候，由于航班號(hào)都是大寫(xiě)字母和數(shù)字的組合，所以鍵盤(pán)會(huì)默認(rèn)調(diào)用出只有數(shù)字和字母的輸入法，同時(shí)默認(rèn)開(kāi)啟大寫(xiě)形式。螞蟻鏈實(shí)人認(rèn)證在用戶(hù)手動(dòng)填寫(xiě)身份證時(shí)也同理。
重要的信息要始終可以被看到
需要避免輸入項(xiàng)被鍵盤(pán)遮擋，也要避免將重要的輸入提示作為占位符，不要在用戶(hù)填寫(xiě)時(shí)被輸入的內(nèi)容遮擋。
使用條件
案例分析
大眾點(diǎn)評(píng)在寫(xiě)評(píng)論時(shí)，一些可以激勵(lì)用戶(hù)寫(xiě)點(diǎn)評(píng)的提示性文字，會(huì)在用戶(hù)輸入時(shí)始終存在。
重要的信息要始終可以被看到
當(dāng)輸入需要被判斷和檢驗(yàn)的信息時(shí)，系統(tǒng)最好可以針對(duì)信息做實(shí)時(shí)校驗(yàn)，避免用戶(hù)一直到最后提交表單時(shí)才發(fā)現(xiàn)填寫(xiě)問(wèn)題。
使用條件
案例分析
證件號(hào)碼輸入錯(cuò)誤時(shí)會(huì)給予相應(yīng)的提示。
原文鏈接：長(zhǎng)弓小子（公眾號(hào)）
作者：元堯
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》干貨｜移動(dòng)端·表單設(shè)計(jì)有方法！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
酷家樂(lè)的產(chǎn)品性質(zhì)決定了其增值付費(fèi)類(lèi)活動(dòng)的目標(biāo)用戶(hù)從根本上說(shuō)是真正意義上的b端用戶(hù)，這類(lèi)用戶(hù)群體的審美喜好一直以來(lái)很難與視覺(jué)流行的趨勢(shì)和酷家樂(lè)品牌調(diào)性找到平衡點(diǎn)，這類(lèi)視覺(jué)產(chǎn)出已經(jīng)遇到瓶頸；而此類(lèi)運(yùn)營(yíng)動(dòng)作越來(lái)越多，并且作為公司營(yíng)收的重要組成部分，在視覺(jué)側(cè)形成正確的指導(dǎo)方向具有非常重要的意義。
背景
目標(biāo)
用戶(hù)畫(huà)像
過(guò)半購(gòu)買(mǎi)角色具備設(shè)計(jì)屬性，對(duì)審美也有一定的要求，所以推廣視覺(jué)表現(xiàn)可以也需要具備一定的設(shè)計(jì)感
購(gòu)買(mǎi)角色年齡分布較廣，崗位屬性分布也比較平均，因此推廣視覺(jué)表現(xiàn)需要兼顧各年齡層，具有通用適配性
視覺(jué)現(xiàn)狀
設(shè)計(jì)過(guò)于“用力”，為了在營(yíng)銷(xiāo)活動(dòng)中體現(xiàn)酷家樂(lè)科技屬性，與D端視覺(jué)產(chǎn)生差異，一味采用深色/藍(lán)色，硬朗機(jī)械感；營(yíng)銷(xiāo)氛圍疊加后畫(huà)面過(guò)飽和，難以與傳統(tǒng)電商拉開(kāi)層次。
流行趨勢(shì)
根據(jù)用戶(hù)畫(huà)像，結(jié)合流行趨勢(shì)與酷家樂(lè)品牌調(diào)性，我們得出了視覺(jué)關(guān)鍵詞，我們將它概括為“輕炫彩”。
升級(jí)后的虛擬獎(jiǎng)品全部采用3D設(shè)計(jì)，強(qiáng)化獎(jiǎng)品的真實(shí)存在感，更容易吸引用戶(hù)注意；同時(shí)應(yīng)用“輕炫彩”的設(shè)計(jì)原則，能夠普適于大部分增值營(yíng)銷(xiāo)類(lèi)活動(dòng)頁(yè)面/海報(bào)中。
輸出的系列圖標(biāo)可以在不同場(chǎng)景下復(fù)用，提升了長(zhǎng)期的設(shè)計(jì)效率。
原文鏈接：酷家樂(lè)用戶(hù)體驗(yàn)設(shè)計(jì)（公眾號(hào)）
作者：柚子、阿九
團(tuán)隊(duì)：柚子、阿九、九州、白夜
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》酷家樂(lè)B端線上增值營(yíng)銷(xiāo)類(lèi)視覺(jué)原則
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
本文從什么是認(rèn)知偏差、認(rèn)知偏差與UX設(shè)計(jì)的關(guān)系兩方面，總結(jié)了13個(gè)實(shí)用的方法，幫你學(xué)會(huì)用設(shè)計(jì)消除偏差。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
文章來(lái)源：優(yōu)設(shè) 作者：vv醬?-?
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
今天鏡頭將再移到德國(guó)，德國(guó)在整個(gè)現(xiàn)代設(shè)計(jì)發(fā)展中其實(shí)戲份很重，上一次出現(xiàn)已經(jīng)是講述印刷術(shù)的時(shí)候。
同在 19 世紀(jì)末 20 世紀(jì)初，整個(gè)歐洲設(shè)計(jì)界都沉浸在新藝術(shù)運(yùn)動(dòng)期間，德國(guó)人也鼓搗出自己的民族設(shè)計(jì)風(fēng)格，史稱(chēng)“青年風(fēng)格”（Jugendstil）。
相比其它歐洲的新藝術(shù)風(fēng)格，“青年風(fēng)格”出現(xiàn)得比較晚，以 1896 年德國(guó)慕尼黑的《青年》（Jugend）雜志創(chuàng)刊為錨點(diǎn)，但很快成為統(tǒng)治德國(guó)設(shè)計(jì)界的主流風(fēng)格。
德國(guó)《青年》雜志
“青年風(fēng)格”劃分兩個(gè)階段，1900 年之前確實(shí)主要受英法新藝術(shù)風(fēng)格及日本浮世繪影響，而 1900 年之后就開(kāi)始走出自身特色，到底是什么特色呢？我們先按下不表。
“青年風(fēng)格“跟大部分新藝術(shù)風(fēng)格一樣（除了英國(guó)僅限平面設(shè)計(jì)），覆蓋了建筑、產(chǎn)品、家具與平面設(shè)計(jì)，史太濃過(guò)去的其它系列中（比如”世界現(xiàn)代設(shè)計(jì)史“、”大師列傳“等）對(duì)其也有過(guò)不同程度的系統(tǒng)解讀。
青年風(fēng)格建筑局部
所以在此我們除了以平面設(shè)計(jì)為核心之外，過(guò)去曾經(jīng)談得比較多的人物或者作品，在這里也只會(huì)簡(jiǎn)略帶過(guò)，本次跟大家談一些不同的故事。
《青年》是一本藝術(shù)雜志，剛開(kāi)始以“展示德國(guó)工藝藝術(shù)”來(lái)定位，但逐漸因?yàn)楠?dú)特的新藝術(shù)設(shè)計(jì)風(fēng)格而聞名。
雜志的創(chuàng)辦者叫喬治·赫斯（GeorgHirth），是名德國(guó)作家、曾經(jīng)做過(guò)記者，隨后成立出版社后變身出版家。
喬治·赫斯
他有意在德國(guó)推廣一種新的視覺(jué)設(shè)計(jì)風(fēng)格，所以《青年》雜志的聯(lián)合創(chuàng)始人中還有畫(huà)家里茨·厄爾勒（Fritz Erler）。
里茨·厄爾勒
里茨是個(gè)典型的設(shè)計(jì)全面手，除了平面繪畫(huà)，家具、室內(nèi)、產(chǎn)品都有涉獵，但他最大的貢獻(xiàn)其實(shí)是為《青年》雜志引入平面設(shè)計(jì)人才漢斯·克里斯提安森(Hans Christiansen)。
漢斯·克里斯提安森
《青年》雜志早期的風(fēng)格基本就是由漢斯奠定的，他為雜志設(shè)計(jì)了 logo、封面、插圖，還作為美編統(tǒng)籌雜志的排版布局。
漢斯 1895 年時(shí)候曾經(jīng)在法國(guó)巴黎學(xué)習(xí)，深受當(dāng)時(shí)流行的新藝術(shù)風(fēng)格影響，所以《青年》雜志早期的風(fēng)格就是比較典型的新藝術(shù)。
漢斯設(shè)計(jì)的《青年》雜志封面
德國(guó)因?yàn)槭菤W洲印刷術(shù)的發(fā)源地，自豪感一直難以消退，到了 19 世紀(jì)末德國(guó)是整個(gè)歐洲唯一還保留古騰堡時(shí)期流傳的中世紀(jì)字體與版面風(fēng)格的國(guó)家。
所以《青年》雜志問(wèn)世后帶來(lái)了一股新風(fēng)，很快廣受歡迎，發(fā)行量從最初的 3 萬(wàn)本增加到 20 萬(wàn)本，漢斯功不可沒(méi)。
而慢慢形成了“青年風(fēng)格”的稱(chēng)謂，并且這種風(fēng)格被當(dāng)時(shí)的年輕設(shè)計(jì)師從 2 維平面逐漸拓展到建筑與產(chǎn)品。
漢斯設(shè)計(jì)的《青年》雜志封面
“青年風(fēng)格”除了有法國(guó)新藝術(shù)的特征，還融合了德國(guó)民族的設(shè)計(jì)元素，當(dāng)中包含前面提及的古騰堡時(shí)期的古樸風(fēng)格，另外就是日耳曼民族的版畫(huà)風(fēng)格與巴伐利亞的一些傳統(tǒng)藝術(shù)元素。
日耳曼民族版畫(huà)
有了這些基因的融合，青年風(fēng)格顯得比歐洲其它新藝術(shù)風(fēng)格更加硬朗，厚重。
隨著時(shí)間推進(jìn)，《青年》雜志開(kāi)始向外廣泛征稿，這樣一來(lái)，“青年風(fēng)格”又變作開(kāi)源代碼，得以發(fā)展與演化，也因此誕生出更多平面設(shè)計(jì)人才。
當(dāng)時(shí)《青年》雜志培養(yǎng)出幾位聲名遠(yuǎn)播的平面設(shè)計(jì)師，首先登場(chǎng)的是奧托·艾克曼（Otto Eckmann）。
奧托·艾克曼
奧托 1865 年生于德國(guó)漢堡，所以當(dāng)時(shí)而言也屬于大齡成名設(shè)計(jì)師啦（相比同時(shí)期的其它大咖），最近這幾天才在關(guān)注 30 歲以上設(shè)計(jì)師難找工作的話題，年齡放在這個(gè)行業(yè)確實(shí)是讓人焦慮的話題。
1894 年之前的奧托其實(shí)是一名比較純粹的藝術(shù)從業(yè)者，專(zhuān)注于繪畫(huà)，風(fēng)格比較龐雜，因?yàn)槟菚r(shí)候的歐洲已經(jīng)有多種不同先鋒畫(huà)派在流行，比方印象派、象征主義跟現(xiàn)實(shí)主義等。
奧托的繪畫(huà)作品
如此群雄輩出的時(shí)代中，奧托感覺(jué)自己在藝術(shù)圈太難混出頭，決定曲線救國(guó)轉(zhuǎn)投設(shè)計(jì)，所以將自己的畫(huà)作一口氣賣(mài)光，其實(shí)也沒(méi)賣(mài)多少錢(qián)，首先開(kāi)始為一本叫《潘》的雜志進(jìn)行平面設(shè)計(jì)。
德國(guó)藝術(shù)雜志《潘》
《潘》也是當(dāng)時(shí)德國(guó)一本挺知名的藝術(shù)雜志，以文學(xué)、戲劇跟音樂(lè)內(nèi)容為主。
奧托的加盟為《潘》帶來(lái)一股新風(fēng)，他善于自然主義表現(xiàn)手法，喜歡采用女性跟花卉元素，曲線流暢，愛(ài)使用日本浮世繪的單線平涂手法，看起來(lái)屬于典型的新藝術(shù)風(fēng)格，奧托的風(fēng)格表現(xiàn)彈性很大。
同一時(shí)期他也承接一些商業(yè)廣告海報(bào)的設(shè)計(jì)，其設(shè)計(jì)風(fēng)格獨(dú)樹(shù)一幟，能做到基于新藝術(shù)框架發(fā)展自身特色，比方融合幾何圖形的規(guī)律，這種手法對(duì)“維也納分離派”產(chǎn)生很大的啟發(fā)。
奧托設(shè)計(jì)的商業(yè)海報(bào)
新藝術(shù)風(fēng)格在當(dāng)時(shí)的德國(guó)而言就是一種風(fēng)潮，可以理解為時(shí)尚，所以在商業(yè)市場(chǎng)中很吃香，《青年》雜志看中奧托出色而且可塑性強(qiáng)大的設(shè)計(jì)表現(xiàn)而邀請(qǐng)他加盟。
加盟《青年》之后的奧托不負(fù)所托，輸出了大量?jī)?yōu)秀的封面與插圖設(shè)計(jì)，這些設(shè)計(jì)居然又以浪漫柔和的平涂風(fēng)格居多，跟漢斯當(dāng)時(shí)的設(shè)計(jì)風(fēng)格相互補(bǔ)充。
奧托設(shè)計(jì)的《青年》雜志
除了平面設(shè)計(jì)，奧托也做首飾、家具跟服裝一類(lèi)的設(shè)計(jì)，跟當(dāng)時(shí)大部分設(shè)計(jì)師一樣，同屬全能，而且隨著名聲越來(lái)越大，德國(guó)最大的著名電器企業(yè)的“AEG 電器”也邀請(qǐng)他做工廠設(shè)計(jì)顧問(wèn)，可謂在設(shè)計(jì)事業(yè)上達(dá)到第一個(gè)巔峰。
奧托為 AEG 電器做的平面設(shè)計(jì)
德國(guó) AEG 公司在史太濃的設(shè)計(jì)史內(nèi)容中曾多次出現(xiàn)，非常重要，后面還有戲份。
在“第 9 回—東方主義在西方”的時(shí)候談到過(guò)第一位被稱(chēng)作“現(xiàn)代設(shè)計(jì)之父”的人，就是經(jīng)常會(huì)被各種主題或者人物“召喚”出來(lái)的威廉莫里斯（William Morris），相信大家已經(jīng)很熟悉。
而第二位獲此殊榮的人就是馬上要談及的彼得·貝倫斯（Peter Behrens），熟悉史太濃的朋友清楚，他也是老熟人，「大師列傳」里曾經(jīng)比較詳細(xì)談及他的故事。（可以移步檢索）。
他也被業(yè)界視為“現(xiàn)代設(shè)計(jì)之父”，有時(shí)候前面會(huì)加上“德國(guó)“做前綴，但史太濃認(rèn)為他有足夠資格不加，從歷史來(lái)看，他的地位來(lái)得有根有據(jù)。
貝倫斯精通繪畫(huà)、建筑、產(chǎn)品跟平面設(shè)計(jì)，還是德國(guó)設(shè)計(jì)協(xié)會(huì)（德國(guó)工業(yè)同盟）的創(chuàng)建人跟話事人之一，公認(rèn)完成了世界第一套 VI，也公認(rèn)設(shè)計(jì)出世界第一批有規(guī)模的現(xiàn)代工業(yè)產(chǎn)品。
彼得貝倫斯設(shè)計(jì)的現(xiàn)代電器
現(xiàn)代建筑界最重要的 4 位大神，有 3 位曾經(jīng)是他的員工，其中包含后來(lái)德國(guó)包豪斯的創(chuàng)始人格羅皮烏斯（WalterGropius）。
包豪斯對(duì)于現(xiàn)代設(shè)計(jì)意味著很多，所以培養(yǎng)出格羅皮烏斯的彼得貝倫斯就是“現(xiàn)代設(shè)計(jì)教父”一類(lèi)的存在。
這里多說(shuō)兩句格羅皮烏斯，他雖然以建筑設(shè)計(jì)為主，但因?yàn)閯?chuàng)立偉包豪斯也會(huì)是我們「平面設(shè)計(jì)史」系列的重要人物之一，在德國(guó)的“青年風(fēng)格“階段，他也不過(guò)是十多歲的孩童，但后面會(huì)有他的重要戲份。
話題回到貝倫斯，以上例舉的事情只為說(shuō)明他在現(xiàn)代設(shè)計(jì)歷史中舉足輕重，但每個(gè)人都有成長(zhǎng)過(guò)程，“青年風(fēng)格”時(shí)期正是貝倫斯“見(jiàn)龍?jiān)谔铮?jiàn)大人”的成長(zhǎng)時(shí)期。
彼得貝倫斯最著名的新藝術(shù)風(fēng)格作品《吻》
彼得·貝倫斯也生于 1868 年，這一年是個(gè)神奇好年份，如果大家有心留意，我們前面陸續(xù)聊過(guò)的大師，不少于 3 人是這一年出生，歡迎大家留言說(shuō)出你所知道的答案。
彼得貝倫斯也參與了青年風(fēng)格的發(fā)起，是重要的先鋒之一，1900 年之前，主要為兩份德國(guó)雜志做平面設(shè)計(jì)，分別是《彩色鳥(niǎo)》（Der Bunte Vogel）跟《島》（Die Insel）。
《彩色鳥(niǎo)》雜志
他分別為這兩本雜志提供插圖設(shè)計(jì)跟版面設(shè)計(jì)，風(fēng)格是比較典型的新藝術(shù)曲線風(fēng)格。
“青年風(fēng)格”時(shí)期的貝倫斯作品水平?jīng)]有很穩(wěn)定，好的特別好，有一些相較《青年》雜志的水準(zhǔn)而言還是有距離的。
《島》雜志
他真正的蛻變產(chǎn)生在 1900 年之后，因?yàn)樗S也納分離派玩在一起，我們?cè)诰S也納叛逆青年那一期談過(guò)，分離派（the Vienna secession）的風(fēng)格受過(guò)德國(guó)“青年風(fēng)格”的影響，其實(shí)兩者互有影響。
分離派的平面設(shè)計(jì)
彼得貝倫斯跟分離派的老大古斯塔夫·克里姆特（Gustave Klimt）私交甚好，而奧地利人跟德國(guó)人本身也是好哥們，所有經(jīng)常會(huì)有學(xué)術(shù)交流一類(lèi)的組織活動(dòng)。
分離派學(xué)習(xí)了青年風(fēng)格的版畫(huà)格調(diào)，而青年風(fēng)格則學(xué)習(xí)了分離派那種幾何抽象與象征主義，1900 年之后的青年風(fēng)格也因此走出自身特色，顯得更加具有裝飾韻味。
青年風(fēng)格平面設(shè)計(jì)
這種幾何抽象的變化，其實(shí)也跟與現(xiàn)代設(shè)計(jì)思潮銜接的重要階段，因?yàn)榈搅?1907 年，彼得貝倫斯就跟其它一些青年風(fēng)格設(shè)計(jì)師成立“德國(guó)工業(yè)同盟”，同盟成員中誕生出后來(lái)包豪斯的兩任校長(zhǎng)，可見(jiàn)彼此存在一脈相承的一些關(guān)系。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
注冊(cè)和登錄是進(jìn)入產(chǎn)品的首要操作，毫無(wú)疑問(wèn)好的用戶(hù)體驗(yàn)能為產(chǎn)品加分，同理好的注冊(cè)和登錄體驗(yàn)會(huì)讓用戶(hù)對(duì)產(chǎn)品留下更好的印象。
簡(jiǎn)單的注冊(cè)和登錄流程中也存在著很多交互細(xì)節(jié)，這里介紹 10 個(gè)平常經(jīng)常用得到的設(shè)計(jì)細(xì)節(jié)，一起來(lái)看看～
交互設(shè)計(jì)的基本原則之一是去除雜亂，去除每一次不必要的操作，避免用戶(hù)長(zhǎng)時(shí)間的等待或思考。
用戶(hù)進(jìn)入注冊(cè)頁(yè)面注冊(cè)賬號(hào)時(shí)，會(huì)第一時(shí)間填寫(xiě)郵箱，那么我們是不是可以考慮自動(dòng)對(duì)焦郵箱選項(xiàng)，省去用戶(hù)再次點(diǎn)擊的麻煩。
我們?cè)谳斎胱?cè)信息的時(shí)候，可能并沒(méi)有意識(shí)到錯(cuò)誤，通常會(huì)在賬號(hào)全部輸入完畢之后才會(huì)出現(xiàn)錯(cuò)誤提示，因此我們又要重新再輸入一遍冗長(zhǎng)的賬號(hào)信息，過(guò)程很繁瑣。
對(duì)于填寫(xiě)郵箱之類(lèi)的操作，進(jìn)行模糊驗(yàn)證是有意義的，避免了用戶(hù)信息全部填寫(xiě)完整后再驗(yàn)證，而是在系統(tǒng)發(fā)現(xiàn)錯(cuò)誤后盡快讓用戶(hù)知道。
盡可能讓創(chuàng)建的每個(gè)帶標(biāo)簽的文本輸入都有可單擊的標(biāo)簽，如密碼應(yīng)該是可點(diǎn)擊的，并將焦點(diǎn)放在密碼字段上。
輸入密碼總是讓人頭疼的一件事，尤其是當(dāng)密碼有大小寫(xiě)、數(shù)字、符號(hào)等要求時(shí)，往往需要輸入很多次后才能成功登錄。
不應(yīng)該讓用戶(hù)去猜測(cè)密碼有什么要求，相反應(yīng)該在用戶(hù)開(kāi)始輸入密碼時(shí)就給出明確的提示要求。
允許用戶(hù)查看輸入的密碼，這樣方便他們對(duì)密碼進(jìn)行二次校驗(yàn)和修改，同時(shí)這種方式比再次重新輸入密碼要簡(jiǎn)單。
清晰的按鈕文案既能吸引用戶(hù)點(diǎn)擊，也可以引導(dǎo)完成他們想要完成的操作。沒(méi)有用戶(hù)喜歡模棱兩可的文案提示，尤其是在做選擇的時(shí)候。
每個(gè)產(chǎn)品的注冊(cè)頁(yè)面都會(huì)有這樣的服務(wù)條款，在情況允許的條件下，盡可能提供默認(rèn)的選擇結(jié)果，避免用戶(hù)再次選擇和操作。
如果用戶(hù)不小心選擇了錯(cuò)誤的選項(xiàng)，要保證用戶(hù)能從注冊(cè)和登錄中快速地切換。最常見(jiàn)的形式是在底部添加一個(gè)鏈接。
當(dāng)用戶(hù)輸入密碼并顯示密碼錯(cuò)誤時(shí)，需要具體說(shuō)明密碼不符的原因，告訴用戶(hù)如何修改密碼。
如果用戶(hù)密碼輸入錯(cuò)誤，應(yīng)該保留賬號(hào)信息，不必再讓用戶(hù)重復(fù)輸入賬號(hào)，只需要輸入密碼即可。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
文章來(lái)源：優(yōu)設(shè) 作者：Clip設(shè)計(jì)夾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn