首先上 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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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并且固定住（类：dataTables_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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

query操作复选框(checkbox)的12个小技巧。

1、获取单个checkbox选中项(三种写法)

或者

或者

2、 获取多个checkbox选中项

3、设置第一个checkbox 为选中值

或者

4、设置最后一个checkbox为选中值

或者

5、根据索引值设置任意一个checkbox为选中值

索引值=0,1,2....
或者

6、选中多个checkbox同时选中第1个和第2个的checkbox

7、根据Value值设置checkbox为选中值

8、删除Value=1的checkbox

9、删除第几个checkbox

索引值=0,1,2....
如删除第3个checkbox:

10、遍历checkbox

11、全部选中

12、全部取消选择

JQuery对CheckBox的一些相关操作

一、通过选择器选取CheckBox:

  1.给CheckBox设置一个id属性，通过id选择器选取：

    JQuery:

   2.给CheckBox设置一个class属性，通过类选择器选取：

    JQuery:

  3.通过标签选择器和属性选择器来选取：

   JQuery:

二、对CheckBox的操作：
   以这段checkBox代码为例：

   1.遍历checkbox用each()方法：

   2.设置checkbox被选中用attr();方法：

    在HTML中，如果一个复选框被选中，对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked"，所以判断 if("checked"==$("#id").attr("checked")) 是错误的，应该是 if(true == $("#id").attr("checked"))
 
  3.获取被选中的checkbox的值：

     或者：

   $("input[name='box']：checked")与 $("input[name='box']")有何区别没试过，我试了用 $("input[name='box']")能成功。
   4.获取未选中的checkbox的值：

   5.设置checkbox的value属性的值:

三、 一般都是创建一个js数组来存储遍历checkbox得到的值，创建js数组的方法：

     1.  var array= new Array();

     2. 往数组添加数据：

        array.push($(this).val());

     3.数组以“,”分隔输出：

         alert(array.join(','));

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

还是附上代码吧。不多说，方便日后查看

父页面代码：

 


    


        


            


            

        

        


            

                <!DOCTYPE html> 
            

        

    

    


        


            


            

        

        


            

                <html> 
            

        

    

    


        


            


            

        

        


            

                <head> 
            

        

    

    


        


            


            

        

        


            

                <title>parents</title> 
            

        

    

    


        


            


            

        

        


            

                <meta charset="UTF-8"> 
            

        

    

    


        


            


            

        

        


            

                </head> 
            

        

    

    


        


            


            

        

        


            

                <body> 
            

        

    

    


        


            


            

        

        


            

                <script language="javascript" type="text/javascript"> 
            

        

    

    


        


            


            

        

        


            

                function sayhello() {
            

        

    

    


        


            


            

        

        


            

                alert('Hello World!');
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                var value = 'value';
            

        

    

    


        


            


            

        

        


            

                </script> 
            

        

    

    


        


            


            

        

        


            

                <div id="default">div内容</div> 
            

        

    

    


        


            


            

        

        


            

                <iframe src="child.html"></iframe> 
            

        

    

    


        


            


            

        

        


            

                </body> 
            

        

    

    


        


            


            

        

        


            

                </html> 
            

        

    

子页面

 


    


        


            


            

        

        


            

                <!DOCTYPE html> 
            

        

    

    


        


            


            

        

        


            

                <html> 
            

        

    

    


        


            


            

        

        


            

                <head> 
            

        

    

    


        


            


            

        

        


            

                <title>child</title> 
            

        

    

    


        


            


            

        

        


            

                <meta charset="UTF-8"> 
            

        

    

    


        


            


            

        

        


            

                <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script> 
            

        

    

    


        


            


            

        

        


            

                <script language="javascript" type="text/javascript"> 
            

        

    

    


        


            


            

        

        


            

                $(function() {
            

        

    

    


        


            


            

        

        


            

                //在iframe子页面中查找父页面元素 
            

        

    

    


        


            


            

        

        


            

                alert($('#default', window.parent.document).html());
            

        

    

    


        


            


            

        

        


            

                //在iframe中调用父页面中定义的变量 
            

        

    

    


        


            


            

        

        


            

                alert(parent.value);
            

        

    

    


        


            


            

        

        


            

                //在iframe中调用父页面中定义的方法 
            

        

    

    


        


            


            

        

        


            

                parent.sayhello();
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                </script> 
            

        

    

    


        


            


            

        

        


            

                </head> 
            

        

    

    


        


            


            

        

        


            

                <body> 
            

        

    

    


        


            


            

        

        


            

                <div>iframe子页面内容</div> 
            

        

    

    


        


            


            

        

        


            

                </body> 
            

        

    

    


        


            


            

        

        


            

                </html> 
            

        

    

注意：

父页面的属性和方法必须在iframe标签之前

前言

消息和通知作为系统和用户之间交流的窗口，在用法上、表达上存在一定的规律，本文解答网页端界面消息系统设计的如下问题:

· 常见的消息通知设计

· 如何进行消息通知设计

· 触发通知的业务场景

常见的消息通知组件和模板

在 Ant design 的设计系统里，消息和反馈组件并为「反馈」栏，涉及消息的组件有如下的内容：

警告提示（Alert ）、 全局提示（Message）、对话框（Modal）、通知提醒框（Modal）、气泡确认框（Popcomfirm）、结果（Result）。

结合 TechUI 提供的业务模板，总结了以下常见的消息通知组件和模板：

以上的消息通知设计在设计的时遵循什么样的规律，以下用一张图来说明。 

消息通知设计指南图

根据消息反馈的强弱分为：高注意力、中注意力、低注意力；每个维度再从操作干预度 & 信息展示量作以下分类。

此图试图解答不同的通知设计组件/模板的使用场景，分为高注意力、中注意力和低注意力的场景，以及每个场景下不同组件信息量的大小和操作的干预度大小。 

通知的使用场景和强弱排序

高注意力的使用场景

【警报】需立即关注

【错误】需立即采取措施

【异常】系统等异常情况

【确认】需要用户确认才能进行

在需要高注意力的场景下用户必须对消息错处反映才能继续当前操作，操作干预度强。

使用页面级独占式布局的结果（Result）通知，告知用户操作结论以及引导后续的操作；使用对话框和气泡确认框让用户了解当前的系统情况，询问和引导后续操作；表单校验提示和全局提示告知用户当前的异常场景，帮助用户改正以继续当前操作。

使用示例:

中注意力的使用场景

【警告】无需立即采取措施

【讯息】用户操作的反馈及系统通知

在中注意力的场景下，当消息出现时，用户可以选择性地继续当前操作，也可以处理当前的消息，操作干预度中。

使用通知提示框，可以在页面中的边缘位置弹出消息提示，后台可以设置停留时长（当作为永久停留时并需要用户操作确认，功能等同于对话框）；页面的警告提示常用于在页面的全局进行通知的展示，用户可手动关闭。

使用示例:

低注意力的使用场景

【信息性消息】无需立即采取措施

【徽章】自上次互动后的新消息

在低注意力的场景下，消息出现后采用弱提示，对用户的当前操作几乎不产生干扰。

此时，全局提示常用于成功状态下的提示或跳转状态，几秒后自动消失；徽章用于更新消息的状态。

使用示例:

触发通知的业务场景

通知的触发场景存在于用户之间以及系统和用户之间。消息组件的设计选择需要根据具体的业务场景来定，以下是通用的推荐情境。

例如，在以请求审批作为核心功能的应用系统，成功和失败的通知可以采用「中注意力」的通知提示框和警告提示；若请求审批是附属的功能，如，请求某人加入某项目成为访客，则可以采用低注意力的通知方式，降低操作干扰度。又如，钉钉的会议通知，采用了较强操作干预度的对话框请求确认，钉钉的即时消息通知用户可以自定义设置是否在桌面展示消息，当不设置为桌面展示时，采用的是红点徽章的表达方式。 

通知设计原则

提供明确指引

· 在用户解决问题之前，错误消息不应消失

· 避免仅通过将字段变为红色来指示错误，色盲用户难以辨认

· 消息文本内容过多不建议采用悬浮通知中心

简单高效

· 需要明确限制通知的标题和文案的字段数量

· 避免无故打扰用户的通知设计

· 非持久性通知的持续时间不可过短，至少需要让用户阅读完文本内容，适当情况下提供关闭功能

· 通知文案简明易懂，无歧义

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷    作者：Ant_Design

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

动互联网时代，用户信息被孤岛化，用户生产的内容被隔离在自家产品，搜索引擎无法通过搜索抓取，例如微信公众号、小红书等。

在国内除百度搜索外，用户使用量最多的可能就是微信搜索。微信搜索可以同时搜索到来自微信公众号、微博、知乎、腾讯视频、快手、第三方网页、小程序等渠道的内容。

本文主要讲解微信搜索功能规则设计，大纲如下：

• 全局与局部搜索
• 搜索前置
• 本地与联网搜索
• 即时搜索
• 搜索排序

全局与局部搜索

搜索范围一般有两种，一种是全局搜索，搜索的内容为整个平台的内容；另一种是局部搜索，即搜索结果仅为规定的范围，其好处可以缩小搜索结果范围。

微信首页、通讯录和搜一搜均采用全局搜索，即搜索内容为整个微信平台和第三方的内容。

小程序和订阅号搜索，则是局部搜索，即只搜索规定范围内的搜索结果，避免搜索结果含有其他非想要的类型。

搜索前置

微信是为数不多的将搜索范围前置（搜一搜，搜索结果页也有搜索范围筛选），而其他的 app 大部分是将搜索范围后置。即搜索出现结果，通过 tab 展示不同的搜索结果，例如 b 站。

为什么微信将搜索范围前置呢？

我在网上找到了比较靠谱的回答，以下是来自纯银社群 Tony 的回答：

微信目前没有能力去做全搜索结果的后置分类。这里的“没有能力”是个中性词，因为和网页这种格式化标准化的内容组织形式不一样，微信内部的内容格式高度不统一，难以统一搜索。

比如现在微信的搜索结果是有分类的，分类是 1. 最常使用；2. 联系人；3. 群聊；4. 公众号；5. 聊天记录；6. 收藏；7. 内容搜索（搜一搜）。其中有可能还插入一个“游戏类别”。同时前置也有分类，分别是“朋友圈”，“文章”，“表情”，“小说”，“音乐”，“表情”。

可以看到这些分类对应的内容可能是通讯录的联系人，可能是群聊名称，也可能是公众号名称等等。这些格式不统一的内容之间，缺乏一种像网页 pagerank，社交媒体 feed 的 edgerank 的排名算法，这在技术上就形成了很大的挑战，微信很可能“没有能力”。因为内容形式不统一，就很难用同一个标准算法衡量每种内容的权重，即使是淘宝的商品，因为统一是商品，所以基于“好评”“购买量”“价格”等特征来做 rank 的技术挑战也比微信要在“联系人”“群聊”“公众号”“朋友圈”“表情”这些纷杂的内容形态之间做 rank 要简单的多。

简单说，如果只搜联系人，微信能做排名；只搜朋友圈，微信也能做排名；但是揉在一起，微信就不知道怎么做排名了：联系人应该排第一栏还是朋友圈内容应该排第一栏，或者说是表情包应该排第一栏？这个结论如何得出？

因为微信没有能力做这些不同格式内容的搜索排名，或者说控制不了把多种不同格式内容糅合在一起进行搜索的用户体验。他只能采取“后置分类倾向于 IM 产品的应用内搜索，如联系人，群聊，公众号”，“前置分类倾向于内容分类搜索，如表情，小说，音乐”。来达到一个虽然不如 google 百度这样流畅自然，但足够可控的，比较稳定的搜索体验。

微信搜索过程中，因为搜索内容都是本地，所以采用即时搜索机制，这一过程中体验很好，用户不需要点击键盘上的搜索按钮，因为当前页即代表结果页。

本地与网络搜索

搜索机制分为两种，一种是本地搜索，一种是网络搜索。

本地搜索，即不需要通过网络数据即可检索出本地信息内容，其特点是速度快，不需要加载。

网络搜索，即通过网络数据检索出非本地存储数据的内容，其特点是可以获得大量的数据。

联系人、群聊、使用过的小程序、收藏文件标题等均存在本地，不需要联网即可搜索，无需加载。

搜一搜为网络搜索，即搜索的主要为网络全平台信息。

即时搜索

输入搜索词即时出现搜索结果，则为即时搜索。用户不需要点击搜索按钮即可得到搜索结果。

如下图所示：淘宝搜索，搜索关键词，出现搜索词的联想匹配。用户只能点击搜索或点击匹配联想词进入搜索结果页

微信搜索，用户输入关键词，即时出现搜索结果。

两者差异化是因为：微信搜索结果页可以在当前页面呈现，而淘宝，关键词的搜索页是搜索词的全部的商品，搜索过程页，无法承载搜索结果。

两者搜索结果的内容形态差异，导致出现这两种完全不同的设计。

搜索排序

微信主要为即时通讯工具，所以搜索的主场景围绕着：搜索联系人、群组和聊天记录展开。其中权重最高的是最常使用。其次是联系人、群聊、使用过小程序、公众号以及聊天记录等

其排序顺序如下图所示：

其中搜一搜为网络搜索，其他为本地搜索。

搜索结果排序，反映出用户对类型的高低频，越排在前面，搜索的频率越高。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：优设 作者：Echo的设计笔记

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务