有研究表明，人們會自然地認為外表更漂亮的人擁有更加優秀的品質特質。即我們對一個人的外表印象會影響對他品質的感受和思考，心理學上將這種行為稱為「光環效應」。

同樣有人認為，這樣的光環效應作用于人機交互設計領域也一樣是奏效的。好看的設計，會讓用戶認為產品更好用，外觀會影響用戶對產品可用性的感受，這就是所謂的「美即好用效應」。

一、關于該定律的實驗

前面我在談「費茨定律」或是「恐懼留白」的時候，大多數方法論都可以溯源到真實的科學實驗或心理學文獻記錄。

但在查找「美即好用效應」資料的時候，所有內容對初始實驗都是一筆帶過：

1995年，日立設計中心的研究員 Massaki Kurosu 和 Kaori Kashimura 通過26種不同的 ATM 交互界面對 252 位參與者進行詳細的用戶體驗測試。結果發現，這些因素中很大一部分對真實可用性的影響微乎其微，反而界面美觀度對真實可用性的影響出乎預料的大。

表現可用性的決定因素對真實可用性的影響系數大多在 0.000-0.310 之間，而界面美觀度這個數據達到了 0.589。

我試著到很多地方去搜索更多關于該實驗的記錄，卻都沒有找到相關論文。所以對于這個實驗的結果，我只能保持觀望態度。（也可能是我檢索資料的能力還有待提升...）

首先是我無法確定所有參與者在這個實驗中的需求目標是否發生變化，概述中既沒有闡明對照組，也沒有告知實驗對比過程的細節。

其次在「美觀度對可用性的影響較大」的實驗結論中，科研人員是如何定義「美觀度」的標準的？審美是一種主觀意識，那么「美觀度」應該如何被定義，科研人員究竟是從配色、排版、統一性，還是動態和諧的交互流程定義了實驗界面的「美觀度」？我們也不得而知。

所以「美即好用效應」在人機交互領域的可用性，究竟是一條科學實驗結論，還是屬于用戶心理研究，抑或只是人傳人傳出來的自然規律，作為筆者，我本著對我讀者負責的前提下，也只能畫個問號。

二、「美」在商業產品中的價值層級

在人們追求基本生理需求的時代，「美即好用效應」的作用力必然不會比溫飽時代的大。

為什么這么說？從馬斯洛需求層次理論模型中就可以看到，對于用戶而言，“審美需求”是在保證了一系列缺失性基礎需求之后，才會追求的需求層次。

馬斯洛需求層次理論映射到用戶體驗五層理論也是異曲同工，從戰略層到表現層，越是重要的層級掛靠的馬斯洛需求層次就越基礎。擁有巨大商業價值的產品，往往影響其在商業市場中走向的，都是基礎需求，而非高層級需求。

這就為什么我前文說道，很多人抽離前提來談「美」的重要性。用戶對「美」的追求是在滿足了基礎需求的前提之下，如果一個產品的戰略、范圍層難以落地，空談「美即好用效應」便是空中樓閣罷了。

表現層在沒有可靠的戰略前提之下，是毫無商業價值的個人狂歡。

三、UI到底該關注什么

UI是一項純藝術性創作的職業嗎？在我剛接觸UI行業的時候，我是這么單純地認為的，但現在已經不再是了。

我前一陣子看了像素范泡泡老師的直播，其觀點我非常贊同，也在社群里和大家進行過了交流。在此我引用兩個泡泡老師舉到的 iOS UI 的案例，來闡述 UI 探索的「美」，究竟是在探索什么。

  1.iOS為什么激勵大部分APP適配暗黑模式？  

大概在去年，網傳蘋果將強制要求 APP Store 中的應用程序要適配暗黑模式。暗黑模式也掀起了一輪新的視覺設計潮流，暗調的設計語言讓產品在視覺上看上去更酷更年輕。

但蘋果激勵大部分應用程序適配暗黑模式，只是單純的為了視覺上的好看嗎？其實并不是。

是因為后期的蘋果硬件設備多采用OLED屏幕技術，比起其他廠商的LCD屏幕技術，有其優點，但也有其缺點。OLED采用低頻PWM調光模式，也就是通過低頻頻閃的方式控制屏幕亮度（一亮一暗、一亮一暗如此反復）。在調低屏幕白光亮度的情況下，頻閃很容易造成用戶視覺疲勞。這一點極可能成為蘋果設備的銷售弱點。

于是蘋果希望在用戶需要調低屏幕亮度的場景中，通過暗黑模式的視覺手法，大量運用黑色，這樣OLED屏幕的光源就可以直接關閉，而不需要采用頻閃的方式來控制屏幕亮度，從而減輕用戶視覺疲勞的現象。

（ps.看不懂的朋友莫急，文末我放了B站up主硬件茶談的《全網最簡潔易懂的OLED與LCD屏幕工作原理與優劣科普》視頻，感興趣的小伙伴可以查看）

蘋果主動落地暗黑模式的開發，并且激勵在應用市場上架的其他應用也適配暗黑模式，實際上是與其商業目的掛鉤的一種行為，只是將解決方案落實到了表現層。

  2.iOS從擬物風格向扁平風格的轉換  

iOS7掀起的扁平設計風潮，至今還在影響著UI設計趨勢以及用戶的審美。但你硬要從個人審美角度去評判曾經的擬物風格與現在的扁平風格究竟哪個更好，只能說仁者見仁。

泡泡老師認為，iOS 擬物風格向扁平風格的轉換，也不僅僅是基于視覺「美」的考慮。因為曾經的蘋果在全球移動品牌廠商中，擁有更加優質的屏幕硬件，他們的屏幕可以高清顯示更多的設計細節，于是仿真的擬物風格在蘋果設備上通過其光影、陰影的展示，可以突出蘋果的屏幕優勢，從而成為其商業賣點。

但后來隨著移動設備品牌商的硬件差距不斷縮小，高清顯示已不再成為蘋果獨家的亮點，蘋果也就不需要再花費更多的設計成本在擬物設計上了。此時的擬物設計成本并不能再持續帶來高效的商業回報，從而轉向扁平風格，一方面可以提高設計效率、降低設計成本，同時對其周邊設計的延展性更高。

從這兩個案例中可以看到，UI雖然做的是表現層的工作，但實際上也是在為用戶、為商業、為戰略而服務。除了視覺的「美」，我們也應該關注產品背后的數據、商業價值，我想這就是UI與純藝術性創作型設計崗位的區別吧。

四、總結

說了一堆，感覺我好像一個「美即好用效應」的ANTI份子...其實也不全是。我清楚「美即好用」在一些商業案例中的運用，我不否定該定律存在的價值，只是想表達一些看法。

首先我認為不應該在產品還沒有扎根市場，擁有產品自身的商業價值之前，過分拘泥于視覺表現層的內容。在腥風血雨的互聯網商業市場，迅速小跑迭代，做好用戶數據分析，增強產品自身留存實力、激活市場潛在用戶，比把目光放在視覺表現上可能更有價值。當產品在一個領域或市場積累了一定忠實度較高的用戶之后，「美即好用效應」可能才會發揮其功效。

其次我想對話同行的UI設計師，我一年前在《UI如何提升個人價值？UGD思維了解一下》中已經說到過，UI設計不應只停留在視覺表現層，想提升自我價值，一定要培養超脫表現層的思維能力。

我們不應該一味地信奉「美即好用」。作為UI設計師，我們要通過避免「美但不好用」或「不美但好用」的極端來平衡視覺表現與功能的體驗。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷  作者：UCD耍家

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

有時候我們的標簽都是從后臺獲取的數據，然后利用JS添加到頁面上，當我們寫生成的標簽的點擊事件（click）時沒有效果。

例如：

<section> 測試動態生成的DOM點擊事件 <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); //把獲取的標簽動態添加到頁面中 }
                })
            });
            $("#test").click(function () {
                alert("Smile");
            }) </script>

生成頁面，點擊A標簽無效果。

這里只介紹兩種解決方法。

①把事件寫在生成的字符串當中，感覺很low

里面什么方法名外面就聲明一個（需要帶參就傳參）。

②我一般喜歡在JS里面直接寫點擊事件，不喜歡在標簽里面寫事件

 我們直接寫這個標簽的點擊事件是沒效果的，我們就換個寫法，利用On來完成。

 這樣也可以完成點擊事件。

另附：a標簽的href也是可以執行腳本的，點擊事件也會執行腳本，點擊事件優先，然后在執行href鏈接。

 下載一般都是把A標簽的Href給個一般處理程序的鏈接（參數就用？傳值）。但我這個下載的參數是動態生成的，在后臺生成字符串的時候沒有參數。需要在前臺根據用戶選擇的來進行傳遞參數。所以需要我們動態生成Href的鏈接

  //下載 $("#uploadInfo").click(function () { var uids = "";
            $(":checkbox[name='A']:checked").each(function (i, item) {
                uids += $(item).attr("data-id") + ",";
            }) if (uids === "") {
                NewAlertBox("warning","請最少選擇一項",2000);
            } else { var urls = "GroupTeamUserListDocUpload.ashx?CaseID=" + CaseID + "&UID=" + uids;
                $(this).attr("href", urls);  //執行完了點擊事件，把Href賦值，然后自動跳轉href鏈接 }

        });

冒泡事件就是點擊子節點，會向上觸發父節點，祖先節點的點擊事件。

我們在平時的開發過程中，肯定會遇到在一個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,
    ......}) 


    

        1
    

    

        2
    

    

        3
    

既然是因為 serverSide 的原因，那我把它 設置為 false 結果問題還真解決了！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

本文從什么是認知偏差、認知偏差與UX設計的關系兩方面，總結了13個實用的方法，幫你學會用設計消除偏差。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：優設 作者：vv醬?-? 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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 年，彼得貝倫斯就跟其它一些青年風格設計師成立“德國工業同盟”，同盟成員中誕生出后來包豪斯的兩任校長，可見彼此存在一脈相承的一些關系。

注冊和登錄是進入產品的首要操作，毫無疑問好的用戶體驗能為產品加分，同理好的注冊和登錄體驗會讓用戶對產品留下更好的印象。

簡單的注冊和登錄流程中也存在著很多交互細節，這里介紹 10 個平常經常用得到的設計細節，一起來看看～

自動對焦首選項

交互設計的基本原則之一是去除雜亂，去除每一次不必要的操作，避免用戶長時間的等待或思考。

用戶進入注冊頁面注冊賬號時，會第一時間填寫郵箱，那么我們是不是可以考慮自動對焦郵箱選項，省去用戶再次點擊的麻煩。

實時驗證內容

我們在輸入注冊信息的時候，可能并沒有意識到錯誤，通常會在賬號全部輸入完畢之后才會出現錯誤提示，因此我們又要重新再輸入一遍冗長的賬號信息，過程很繁瑣。

對于填寫郵箱之類的操作，進行模糊驗證是有意義的，避免了用戶信息全部填寫完整后再驗證，而是在系統發現錯誤后盡快讓用戶知道。

使標簽可點擊

盡可能讓創建的每個帶標簽的文本輸入都有可單擊的標簽，如密碼應該是可點擊的，并將焦點放在密碼字段上。

輸入密碼時顯示要求

輸入密碼總是讓人頭疼的一件事，尤其是當密碼有大小寫、數字、符號等要求時，往往需要輸入很多次后才能成功登錄。

不應該讓用戶去猜測密碼有什么要求，相反應該在用戶開始輸入密碼時就給出明確的提示要求。

允許用戶查看密碼

允許用戶查看輸入的密碼，這樣方便他們對密碼進行二次校驗和修改，同時這種方式比再次重新輸入密碼要簡單。

使用清晰的文案

清晰的按鈕文案既能吸引用戶點擊，也可以引導完成他們想要完成的操作。沒有用戶喜歡模棱兩可的文案提示，尤其是在做選擇的時候。

讓用戶明確服務條款

每個產品的注冊頁面都會有這樣的服務條款，在情況允許的條件下，盡可能提供默認的選擇結果，避免用戶再次選擇和操作。

允許在登錄和注冊之間切換

如果用戶不小心選擇了錯誤的選項，要保證用戶能從注冊和登錄中快速地切換。最常見的形式是在底部添加一個鏈接。

說明密碼錯誤的具體原因

當用戶輸入密碼并顯示密碼錯誤時，需要具體說明密碼不符的原因，告訴用戶如何修改密碼。

保留賬號信息

如果用戶密碼輸入錯誤，應該保留賬號信息，不必再讓用戶重復輸入賬號，只需要輸入密碼即可。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：優設 作者：Clip設計夾

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務