酸性設計的由來

酸性風格來源于迷幻藝術Psychedelia，在英文中稱為Acid Graphics。其中（Acid）一詞原指一種致幻劑LSD。這也能側面說明為什么酸性風格常以反復出現的幾何圖形或高飽和度顏色呈現。

酸性設計至少有十幾年的歷史，但最早是由平面設計師David Rudnick來定義的，他不僅是平面設計師同時也是音樂雜志《Volume》的創始人。

正是因為他的創作在地下和主流市場中的大量露面，使這種設計風潮自然地流行起來，吸引了更多年輕設計師。

David Rudnick的作品

在2018年，Rudmer van Hulzen策劃了一場展示音樂俱樂部海報設計的展覽，Rudmer van Hulzen是荷蘭創意機構G2K的藝術總監，在這場展覽里，展示了一系列來自Studio Cryo、Studio Feixen、Anna Kulachek、Bráulio Amado和Jonathan Castro等設計師和工作室的作品，也是通過這次展覽讓更多人了解了酸性設計。

而Rudmer van Hulzen也重新定義了酸性設計，他定義其為 “挑戰傳統對美感和欲望的定義，是酸性平面的核心。盡管許多人可能會認為這些作品很丑陋，但是如果仔細研究它們的制作方式、創作目標和用戶群體，你會發現它們是特意如此，并且擁有自己的美學。另外，你不需要化學刺激就能看到它們的美?！?

日本的設計師GUCCIMAZE 則被定義為推動酸性設計風格趨勢發展的幕后主手之一。他擅長從不同語言獲取靈感，將字體、視覺元素和形狀重新融合，幻化成充滿神秘感的設計作品。音樂人Nicki Minaj、雜志《Tunica》等都曾邀請他操刀專輯或雜志的視覺。

GUCCIMAZE在設計中運用了大量的尖銳的字體，并且搭配重金屬等瘋狂字體。

酸性設計的風格特點

雖然說酸性設計沒有一個標準的模版，但是其表達形式通常是固定的。這種特征也決定了它多運用于時尚、音樂、潮流以及藝術圈。而且隨著C4D的流行，越來越多的設計師在酸性設計中加入3D元素。
酸性設計的表達形式通常概括為三種

1. 高飽和材質

通常為鐳射紋理，金屬玻璃材質，3D物體材質等,

通過特效感的顏色突出畫面的科技迷幻感.

2. 裝飾性文字

尖銳的字體，通常搭配重金屬美學瘋狂字體，流動金屬字體

3. 實驗性的排版

通常為復雜的構圖,豐富的內容制造出獨特的藝術氛圍,排版形式多為科幻未來主義、反烏托邦場景.

最近超火的 liquid bubble 也是酸性設計的一種

酸性風格的設計應用

1. 平面設計

通常為時尚、音樂、潮流以及藝術圈的設計海報

2. UI設計

UI設計中的酸性設計并不多，UI設計中加入酸性設計的元素會讓人眼前一亮,各種混搭的金屬材質讓界面煥然一新，同時也讓界面設計充滿各種可能性。

總結

有人說酸性風格是新的新丑風，有人把它定義為科幻未來主義，有人則認為它是Y2K風格的替代品，無論是哪一種，作為當代設計師的我們，更多的是以一種面向未來的想法，讓已經有了幾十年的酸味美學可以帶有“自由戀愛”的內涵。無論是霓虹色彩、液態金屬字還是歐普風格，都僅僅是酸性設計元素元素中的冰山一角，一種流行現象、美學觀念的遠遠不止如此。

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

文章來源：優設 作者：石小秋

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

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

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

1、iframe子頁面調用父頁面js函數



子頁面調用父頁面函數只需要寫上window.praent就可以了。比如調用a()函數，就寫成：

子頁面取父頁面中的標簽中的值，比如該標簽的id為“test”,則：

但是我在chrome瀏覽器下卻發現此方法無效了！查了半天才了解，在chrome 5+中，window.parent無法在file://協議中運行，但是發布了之后http://協議下是可以運行的。此方法支持ie、firefox瀏覽器。



2、iframe父頁面調用子頁面js函數

注：ifrtest是iframe框架的id，b()為子頁面js函數。contentWindow屬性是指定的frame或者iframe所在的window對象，IE下可以省略。

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

文章來源：csdn

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

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

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

文章來源：博客園

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

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

首先上 html代碼

    


        


            


            

        

        


            

                <!--為防止一個頁面出現多個id 我們改用class 
            

        

    

    


        


            


            

        

        


            

                 為防止手工填寫格式出錯 我們設置屬性為 readonly
            

        

    

    


        


            


            

        

        


            

                 只能選 ，不能填 ok
            

        

    

    


        


            


            

        

        


            

                -->
            

        

    

    


        


            


            

        

        


            

                <input type="text" class="datepicker" readonly="readonly"/>
            

        

    

然后是jquery ui 初始化部分代碼

    


        


            


            

        

        


            

                //日期格式改變
            

        

    

    


        


            


            

        

        


            

                $( ".datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
            

        

    

    


        


            


            

        

        


            

                //星期格式漢化
            

        

    

    


        


            


            

        

        


            

                $( ".datepicker" ).datepicker( "option", "dayNamesMin",[ "日", "一", "二", "三", "四", "五", "六" ] );
            

        

    

    


        


            


            

        

        


            

                //月份格式漢化
            

        

    

    


        


            


            

        

        


            

                $( ".datepicker" ).datepicker( "option", "monthNames", [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] );
            

        

    

注：jquery ui 的設置有兩種，一種是在初始化的時候就填入參數

另一種是在初始化之后，在設置參數。這里為了說明參數選項，我們選擇的第二種方式來講解。



效果圖： 



官方說明地址: http://api.jqueryui.com/datepicker/#option-altFormat

下載地址：http://download.jqueryui.com/download

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

文章來源：csdn

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

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

本篇博客所用到的技術也是從別的博客學習到的，但目前找不到那篇博客的鏈接了。

1.普通表格實現拖動列寬

var tabSize = tabSize || {}; tabSize.init = function (id) { //用來存儲當前更改寬度的Table Cell,避免快速移動鼠標的問題 var tTD; // 獲取需要修改列寬的表格 var table = document.getElementById(id); var headTh = table.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //記錄單元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //結束寬度調整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠標樣式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暫存的Table Cell if (tTD == undefined) tTD = this; //調整寬度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //調整列寬 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 調整滾動表格的每個cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 調用 // 鼠標拖動列寬 setTimeout(function () { // 1.html代碼里就是一個普通的table元素 // 2.傳入table元素的id tabSize.init('documentList'); }, 600); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

2.datatable實現鼠標拖動列寬

1. 項目中用到datatable插件的地方，都是需要上下滾動的；而datatable插件實現上下滾動，是生成了兩個div各包含了一個table，一個表格里只包含thead并且固定?。悾篸ataTables_scrollHead），另一個實現table內容滾動（類：dataTables_scrollBody） 。
2. 那么，若要實現鼠標拖動列寬的話，則需要：表頭綁定鼠標事件→事件觸發時兩個表格的對應列的寬度都要改變
3. 若這個datatable表格原本沒有滾動條的話，在鼠標拖動列寬的時候，會出現滾動條，其中，datatable定義時，“scrollX”: true。
   

var tabSize = tabSize || {}; tabSize.init = function (id,headTableWrapperId) { //用來存儲當前更改寬度的Table Cell,避免快速移動鼠標的問題 var tTD; // 獲取需要修改列寬的表格 var table = document.getElementById(id); // 獲取固定頭部的表格 var tableHead = $('#'+ headTableWrapperId + ' .dataTables_scrollHeadInner table')[0]; // 獲取表格頭部th var headTh = tableHead.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //記錄單元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //結束寬度調整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠標樣式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暫存的Table Cell if (tTD == undefined) tTD = this; //調整寬度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //調整列寬 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 調整滾動表格的每個cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 鼠標拖動列寬 setTimeout(function () { // 參數：1.table元素的id， // 2.datatable插件生成的最外層div的id，F12可查看到 tabSize.init('cfcPlanListIn','cfcPlanListIn_wrapper'); }, 2000); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

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

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

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