无论是在生活场景、工作场景还是学习场景中，视频播放的普及度都已经非常之高，为我们的多元化场景带来便利。视频功能在产品中的体现也已经成为基础功能，在设计层面的不断优化对于产品设计师来说至关重要。

本文特意结合目前比较热门的产品，为大家梳理了涉及到视频功能的产品在设计上面的解决方案。希望这些优秀的设计思考可以带给产品设计师更多的灵感，不断探索和发现优秀的设计解决方案。

特殊场景下的后台播放

影视类产品在不断优化用户体验的时候，为了满足用户在一些特殊场景下的使用体验，推出了后台播放的附加功能。比如用户在步行中、骑行中，或者处于不便于观看视频的场景中，可以采用后台播放。视频将会以音频的形式后台播放，让用户从视听体验转为音频体验，也是一种变相的解决方案。

思考：考虑到用户的多场景需求，而不只是底层的需求。

人性化的定时关闭设置

很多用户在睡觉前都会习惯刷一下视频，有时候经常会忘记关闭视频就入睡了，第二天起来发现手机没电啦！定时关闭功能的出现解决了用户这一痛点，可以根据自己入睡的大致时间评估，设置定时关闭的时间段。人性化的功能设置在细微之处考虑到了用户痛点，图标设计也是结合场景化表现，提高用户对于产品的操作体验。

思考：帮助用户培养习惯和解决用户可能会出现的失误，以情感化的方式拉近与用户之间的亲和力。

特殊人群的色觉障碍优化

为了考虑到特殊人群的使用体验，让视频播放的效果符合不同用户的视觉感知，色觉障碍优化的功能设置人性化的呈现了解决方案。该功能针对色觉障碍用户的临床表现，优化视频色彩来提高画面辨识度。

思考：考虑到特殊人群的使用体验，才能把产品的体验延伸到更多的场景。

短视频的横屏观看体验升级

随着短视频的盛行，利用空余时间刷视频成为用户消磨时间的方式之一。对于视频上传用户来说，根据视频拍摄的题材会选择适合的比例，有些题材适合横屏比例。

抖音作为短视频平台积累了庞大的用户量，视频的种类和播放比例也是丰富多样。为了满足用户的播放需求，设计了“全屏观看”的切换按钮，方便用户观看宽屏视频的需求。观看体验的升级带给用户人性化的体验，也方便更多比例视频的完美呈现。

思考：为用户提供匹配当前内容的方式，而不要局限在内容创造本身的匹配度上。

刚刚看过的视频快速定位

在刷短视频的时候，刷到自己感兴趣的内容想要继续看完续集，以往的做法是进入作者主页挨个寻找，视频多了找起来很慢，用户体验很差。短视频平台提供了“刚刚看过”的快速定位操作，点击之后会直接定位到刚刚看过的视频位置，方便用户观看续集。人性化的功能设置节省了用户的操作成本，方便一些持续更新的视频内容更好的进行观看体验。

思考：节省用户的时间就是提高自己的认可度，培养用户的依赖度。

直观的预览增加点击欲望

在观看一些儿歌、短片视频合集的时候，右侧的视频目录区采用名称和视频截图预览呈现，直观的预览效果增加点击观看的欲望。小朋友在刷儿歌视频的时候，降低了学习成本，切换视频也更加便利。

思考：降低用户的理解成本，才能获得用户的青睐。

暂停播放的应景设计

情感化的设计可以拉进与用户之间的亲和力，体现产品人性化的一面。在特定的节假日或者特殊时间内，为了增强氛围，视频播放暂停的设计上面设计师也投入了很多小心思。比如在跨年期间，双击屏幕暂停时会出现绽放的烟花效果和 2021 年的绚丽文字，氛围的营造带动了跨年的氛围，带给用户更加温馨的感官体验。

思考：提高用户体验的设计，就存在于细微之处的变化中。

画中画，边看边浏览视频

有时候我们没有明确的观影目标，打开一个视频后还想继续寻找更好的影片，又怕当前影片有看点。“画中画”功能解决了这个痛点，观看视频时点击“画中画”当前播放视频缩小窗口显示在侧边，用户还可以继续浏览新的内容，筛选更多可能性。

思考：在用户没有明确目标的时候，带给用户多种选择性。

投屏观影双向体验

将影片投到电视观看是家庭观影的最佳选择，让观影体验不局限于方寸之间的设备上，还能与家人朋友一起观看影片。如果家里有小孩子需要看动画片之类的，除了投屏电视给他们观看以外，自己还能继续在 App 上观看别的影片，双向选择提高了用户的多场景需求体验。

思考：特殊场景下不仅需要满足用户的需求，也要考虑用户可能会出现的周边困境。

手势交互曝光作者更多作品

各种手势的研究是产品设计师探索的方向，在刷短视频的时候，向左滑动除了进入作者主页以外，也有产品选择曝光作者更多视频作品。更多视频的曝光不仅方便用户观看续集，还能通过更多视频的观看建立对作者的好感度，让用户充分的判断是否需要关注作者。该交互形式给用户提供了更多的判断权，也提高了作者更多视频作品的曝光度。

思考：通过交互形式的改变给用户带来便利，也给作者带来曝光度，平台也提高了使用体验，这是最稳固的体验三角形。

单手操作的手势交互

在视频播放中的手势交互为用户的操作提供了便利，短视频中的单击暂停/播放、双击点赞、长按浮层、左右滑动也有对应的内容变化。目前运用比较多的是单手操作的手势，同样的手势在不同的产品中也激活不一样的功能操作，比如影视 App 中通常是双击暂停/播放。作为产品设计师我们在交互设计的时候，手势的变化在视频功能中的运用可以深入探索。

思考：手势交互的运用可以在原本的基础上实现更多可能性。

短视频 GIF 一键生成

在很多自媒体上大家经常会看到很多影视片段的 GIF 动画，不仅增加了趣味性，也间接的传播了视频内容。很多视频类产品为了给用户提供自动生成短视频和 GIF 动画的便利，提供了一键生成的操作，不仅可以选择内容区间，还可以自由控制时间。便利的操作降低了用户的学习成本，还增加了用户分享的趣味性。

思考：帮助用户降低在外部平台上分享内容的制作成本，也是提高自身内容被分享的概率。

视频快照分享更便利

截图属于手机系统自带的功能，通过交互路径操作或者设备按键快捷操作完成。而视频播放器自带的快照功能更便利，一键操作随时定格画面，还能快捷分享或者制作表情，非常的便利。

思考：只有把操作的时间和难度降低到临界值，才能让用户逐渐形成依赖。

个性化追求的片段观影

在观看影片的时候，针对一些故事情节比较长的影片，我们可以选择观看指定角色的片段，或者选择倍速播放等来实现个性化的观影选择。忙碌的生活让我们少了一些观影耐心，这也是短视频备受喜欢的因素之一，片段的播放需求满足了这部分用户的需求。

思考：个性化的功能服务可以培养用户对产品的忠诚度，这是形成种子用户的关键。

方寸之间的分屏设计

由于移动端设备的大小限制，如何在有限的屏幕内进行延展设计，是产品设计师探索的方向。分屏设计是在保持当前视频播放的前提下将屏幕划分为更多模块，不影响内容进展的情况下进行更多功能操作。

比如爱奇艺观看视频时的夸夸功能操作，在操作功能的同时不影响用户的观影体验，增加用户观影时的互动性。

思考：有限空间内的更多可能性设计，是设计师不断探索的过程，尽显方寸之间的设计能力。

还有更多关于视频功能在 UI 场景中的运用案例，这里仅抛砖引玉的列举了部分设计分析，更多分析我们下期继续。

小结

针对单一功能的体验总结，是分析和积累同一功能不同设计解决方案的形式，辅助增加设计需求中的效率发挥。产品体验日记总结的不同维度带来不同的深度思考，希望这个维度的总结起到抛砖引玉的作用，带给大家更多的思考方向和总结思路。

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

文章来源：优设   作者：黑马青年

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

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

需要对应的js代码和css样式，大家可以通过www.htmldrive.net平台下载，也可以在我文章的底部下载。对应的资源如下，将资源引入页面（别忘了JQuery）：

注意：jQuery最好使用1.3版本的，有些版本行不通，亲测1.8版本不行

HTML代码：

js代码：

    


        


            


                


                

            

            


                

                    $(".test").imgbox({
                

            

        

        


            


                


                

            

            


                

                    'speedIn': 500,
                

            

        

        


            


                


                

            

            


                

                    'speedOut': 500,
                

            

        

        


            


                


                

            

            


                

                    'alignment': 'center',
                

            

        

        


            


                


                

            

            


                

                    'overlayShow': true,
                

            

        

        


            


                


                

            

            


                

                    'allowMultiple': false,
                

            

        

        


            


                


                

            

            


                

                    'autoScale': true
                

            

        

        


            


                


                

            

            


                

                    });
                

            

        

    

效果：

讲解：

以上例子中，我们只用了一行js代码“$(".test").imgbox();”，就实现了图片弹出放大效果。这是因为在jquery.imgbox.js中imgbox()函数有默认的参数。当我们调用函数但没有传递参数时，会加载默认的参数，显示默认效果和样式。

如果觉得默认样式不合适，有两种方式进行修改：1、修改jquery.imgbox.js中imgbox()函数的默认参数；2、调用imgbox()函数时，给参数赋值。

    


        


            


                


                

            

            


                

                    //在jquery.imgbox.js中，默认参数如下，可以修改：
                

            

        

        


            


                


                

            

            


                

                    $.fn.imgbox.defaults = {
                

            

        

        


            


                


                

            

            


                

                    padding : 10,
                

            

        

        


            


                


                

            

            


                

                    alignment : 'auto', // auto OR center
                

            

        

        


            


                


                

            

            


                

                    allowMultiple : true,
                

            

        

        


            


                


                

            

            


                

                    autoScale : true,
                

            

        

        


            


                


                

            

            


                

                    speedIn : 500,
                

            

        

        


            


                


                

            

            


                

                    speedOut : 500,
                

            

        

        


            


                


                

            

            


                

                    easingIn : 'swing',
                

            

        

        


            


                


                

            

            


                

                    easingOut : 'swing',
                

            

        

        


            


                


                

            

            


                

                    zoomOpacity : false,
                

            

        

        


            


                


                

            

            


                

                    overlayShow : false,
                

            

        

        


            


                


                

            

            


                

                    overlayOpacity : 0.5,
                

            

        

        


            


                


                

            

            


                

                    hideOnOverlayClick : true,
                

            

        

        


            


                


                

            

            


                

                    hideOnContentClick : true
                

            

        

        


            


                


                

            

            


                

                    };
                

            

        

    

参数的含义：

padding：弹窗中图片的边框，0为没有边框。
alignment：弹窗的位置，“auto”或“center”，默认情况下，它从缩略图所在方向扩展弹窗
allowMultiple：如果选true，允许多个弹出窗口同时打开
autoScale：如果为true，弹窗会自适应窗口的大小
speedIn、speedOut:打开弹窗和关闭弹窗的速度，单位：毫秒
zoomOpacity：如果为true，会在弹窗缩放时改变透明度
overlayShow：如果为true，会有遮罩层（默认为false；遮罩层的颜色在css中设置）
overlayOpacity:遮罩层的透明度（取值范围0~1）
hideOnOverlayClick：当点击遮罩层时，关闭弹窗
hideOnContentClick：当点击图片时，关闭弹窗

转载自：https://blog.csdn.net/kangnan00/article/details/72518352

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

文章来源：csdn   

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

App界面设计对于设计师而言一直是盛久不衰的话题，尤其是如今越来越多的流量转移到了移动平台，使得更多的UI设计师涌入移动端领域，甚至出现了市场饱和的言论，对于从事移动端的UI设计师来讲，充满压力的同时又面临无限机遇，唯有不断的学习才能滋生出源源不断的设计灵感，站稳脚跟。

摹客想在这方面给各位设计师朋友做点什么，除了提供简单好用的设计工具，我们也整理了非常多的优秀设计案例，希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题，我们以月为单位，整理了国内外设计师的优秀APP界面设计案例，我们是搬运工，更是好设计的传达者，希望你会喜欢。

接下来为大家分享精美的app UI设计案例：

--手机appUI设计--

  更多精彩文章：

      手机appUI界面设计赏析（一）

       手机appUI界面设计赏析（二）

       手机appUI界面设计赏析（三）

       手机appUI界面设计赏析（四）

       手机appUI界面设计赏析（五）

       手机appUI界面设计赏析（六）

       手机appUI界面设计赏析（七）

       手机appUI界面设计赏析（八）

       手机appUI界面设计赏析（九）

        手机appUI界面设计赏析（十）

       手机appUI界面设计赏析（十一）

      手机appUI界面设计赏析（十二）

      手机appUI界面设计赏析（十三）

      手机appUI界面设计赏析（十四）

      手机appUI界面设计赏析（十五）

      手机appUI界面设计赏析（十六）

      手机appUI界面设计赏析（十七）

      手机appUI界面设计赏析（十八）

      手机appUI界面设计赏析（十九）

      手机appUI界面设计赏析（二十）

      手机appUI界面设计赏析（二十一）

     手机appUI界面设计赏析（二十二）

     手机appUI界面设计赏析（二十三）

最近，我花了一些时间观察UI设计的发展方向。我偶然发现了一些非常有创意的趋势，我认为这些趋势将在不久的将来将重新塑造UI设计。

以下是根据我的观察得出的10种趋势：

1.新Neuomorphism

新形态在不断发展，我想它会一直存在（无论你喜欢与否）。它最初的形式并没有持续很长时间，但是它正在朝着更加复杂和易于访问的方向发展。这几乎就像拟物象，但有一种新鲜、现代、更美学的氛围。

2.软渐变

渐变无处不在！实际上，我在背景和UI元素（例如按钮，卡片和图形）上看到了很多。

混合两种以上的颜色以创建一个彩色模糊的背景也是一件事！

3.几何元素

无论是作为主要的背景或主题，还是只是让设计看起来更有趣的一个细节——几何元素越来越受到关注。通常将它们混合在一起以创建马赛克——结果看起来非常酷！

4.柔和的背景

不得不说我喜欢这种趋势，我见过许多令人惊艳的、轻量级的、美观的设计，其具有非常精致、明亮柔和的配色方案。

它使设计看起来非常现代、没有干扰、清新而令人愉悦，其中内容扮演主要角色，其他一切只是一个微妙的背景。

5.插图和3D

插图仍然很流行，不同的样式、配色方案、或多或少的抽象，所以它们符合产品的特点。不仅是平面的，而且还模仿了3D的外观。我相信这是一个很好的改变，在地球上的每一个数字项目使用了这么多年的库存图片之后，我在这里给出了一些有关如何创建简单插图的提示：

6.抽象的形状

用于背景和不同的UI元素，它们使界面看起来更“有机”和好玩，我认为这是一件好事。使用钢笔工具编辑最简单的形状（正方形，椭圆形），使用不同的边框半径，尝试使用不同的颜色/渐变，你可能会得到一个非常有趣的结果。在这里吗，我们或许可以尝试一下这个简单却神奇的工具Blobmaker。

7.暗模式

暗模式是界面的颜色反转版本，以使其在晚上更易于访问。由于我是典型的夜猫子，因此我经常在晚上使用深色模式。创建暗模式时，记住要在不同元素和版式之间保持正确的对比。

8.角度元素

不仅用于Dribbble shots，而且还用作以非标准方式在网站上呈现不同内容的方式。它使内容看起来更有趣和吸引眼球。那么，如何快速实现这一效果呢？首先，对0度的角度拼贴元素。把他们分成一组。然后，更改组角度（从30°到50°），瞧！这样，你就不必手动更改每个元素的角度了。

9.柔和的阴影

这是另一个我最喜欢的趋势，柔和的阴影使UI看起来更深入。这种效果通常非常微妙，但在美学上令人愉悦。一般来说，阴影使某些UI元素变得“可单击”，并且它们有助于区分内容之间的层次结构。你可以在此处了解如何进行操作：

10.简单、thick字体

我从不喜欢比较薄的字体（在iOS7时代），所以我很高兴看到这种趋势消失了。现在，我正在观察使用更粗、更简单的形式（几乎为方形）的可读字体。它们使界面看起来更加现代和优美。如果你要搜索类似的产品，可以试试Poppins、Montserrat（免费）、Gilroy、Sofia Pro、Proxima Nova（付费）。

来源：Diana Malewicz：10 Newest and promising UI design trends

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

                                                            

 

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

 

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

uni-app 代码

选择图片代码（uniapp 代码示例）

选择图片代码以及文档

uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths; } }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

上传图片以及文档

tempFilePaths 为选择图片res 里面的其中一个对象
注意：uniapp 上传图片不能上传选中的File 文件（tempFiles这个数组的东西不能够上传） 要上传（tempFilePaths）读取图片后数组的 此数组可以用来浏览，上传
选择图片加上传图片代码

*多图上传注意 files 数组 对象不能直接传 tempFilePaths这个数组 必须要更改

 let img = []; for (let i = 0; i < tempFilePaths.length; i++) { let obj = new Object(); obj.name = `file` + i; obj.uri = tempFilePaths[i]; img.push(obj); obj = null; } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

uniapp 全部代码

 uni.chooseImage({ count: 9, success: (res) => { //上传文件的临时路径 const tempFilePaths = res.tempFilePaths; let img = []; for (let i = 0; i < tempFilePaths.length; i++) { let obj = new Object(); obj.name = `file` + i; obj.uri = tempFilePaths[i]; img.push(obj); obj = null; } const tempFilePaths = res.tempFilePaths; console.log(res); uni.uploadFile({ url:'http://192.168.88.15:8978/Mailbox/'+that.api.pudatefiles, filePath: tempFilePaths[0], files: img , name: 'file', success: (uploadFileRes) => { console.log(uploadFileRes) uni.hideLoading(); if (back.status == "0") { console.log(that.host + back.filepath[0]) that.editorCtx.insertImage({ src: that.host + back.filepath[0], alt: '图像', success: function() {} }) } else { console.log(back.msg); } }, fail: () => { uni.hideLoading(); console.log('图片上传失败，请联系开发'); } }); } }) 


    

        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
    

Node后端

1. npm install multer
2. npm i express

var express = require("express"); //Express框架 const multer = require("multer"); // multer中间件上传图片 接收文件post数据 // 设置文件上传的地方 let storage = multer.diskStorage({ destination: (req: any, file: any, cb: Function) => { cb(null, "./StaticResource/pudate/"); }, filename: (req: any, file: any, cb: Function) => { cb(null, Date.now() + "-" + file.originalname); }, }); let multerObj = multer({ dest: "./StaticResource/pudate/", storage }); //存放上传的文件 app.use(multerObj.any()); // 存放所有的类型文件 //设置跨域访问 app.all("*", (req: any, res: any, next: Function) => { res.header("Access-Control-Allow-Origin", "*"); res.header( "Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild" ); res.header( "Access-Control-Allow-Headers", "content-type,SelfSummerHeader,Authorization" ); //自定义请求头 res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By", "3.2.1"); res.header("Content-Type", "application/json;charset=UTF-8"); res.header("Content-Type", "text/xml"); if (req.method === "OPTIONS" || req.url === "/favicon.ico") { // 拦截请求 return res.send(); } next(); }); app.listen(COMPort, (err: Error) => { if (err) { console.log('启动错误', err) } console.table({ 端口: COMPort, IP: systemOs.IP(), 服务地址: `http://${systemOs.IP()}:${COMPort}/Mailbox`, 静态资源: `IP端口地址加上文件名`, 描述: `Node服务已启动成功`, "swagger-ui": `http://${systemOs.IP()}:${COMPort}/api (ts代码转为js代码可以正常使用)`, }); // 挂载自定义中间件 app.use(middleware_router.bodyData); }); router.all( "/pudatefiles", (req: { files: { path: string }[] }, res: any, next: any) => { let data: Array<string> = []; console.log(req.files); req.files?.forEach((item: any) => { let url = item?.path.replace(/\\/g, "/"); data.push(url?.replace("StaticResource", "")); }); res.sendSuccess(data, "上传成功"); } );

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

本文出自 “旋木的技术博客” 博客，请务必保留此出处http://mrxiong.blog.51cto.com/287318/1651098

一.数值类型

Mysql支持所有标准SQL中的数值类型，其中包括严格数据类型(INTEGER,SMALLINT,DECIMAL,NUMBERIC)，以及近似数值数据类型(FLOAT,REAL,DOUBLE PRESISION),并在此基础上进行扩展。

扩展后增加了TINYINT,MEDIUMINT,BIGINT这3种长度不同的整形，并增加了BIT类型，用来存放位数据。

整数类型        字节       范围（有符号）      范围（无符号）          用途 

TINYINT        1字节        (-128，127)          (0，255)            极小整数值 

SMALLINT       2字节     (-32 768，32 767)       (0，65 535)         小整数值 

MEDIUMINT      3字节    (-8 388 608，8 388 607) (0，16 777 215)      中整数值 

INT或INTEGER   4字节   (-2 147 483 648，2 147 483 647) (0，4 294 967 295) 大整数值 

BIGINT         8字节   (-9 233 372 036 854 775 808，9 223 372 036 854 775 807) (0，18 446 744 073 709 551 615) 极大整数值 

FLOAT          4字节   (-3.402 823 466 E+38，1.175 494 351 E-38)，0，(1.175 494 351 E-38，3.402 823 466 351 E+38) 0，(1.175 494 351 E-38，3.402 823 466 E+38) 单精度浮点数值 

DOUBLE         8字节 (1.797 693 134 862 315 7 E+308，2.225 073 858 507 201 4 E-308)，0，(2.225 073 858 507 201 4 E-308，1.797 693 134 862 315 7 E+308) 0，(2.225 073 858 507 201 4 E-308，1.797 693 134 862 315 7 E+308) 双精度浮点数值 

DECIMAL 对DECIMAL(M,D) ，如果M>D，为M+2否则为D+2 依赖于M和D的值 依赖于M和D的值 小数值

INT 类型:

在 MySQL 中支持的 5 个主要整数类型是 TINYINT，SMALLINT，MEDIUMINT，INT 和 BIGINT。这些类型在很大程度上是相同的，只有它们存储的值的大小是不相同的。

MySQL 以一个可选的显示宽度指示器的形式对 SQL 标准进行扩展，这样当从数据库检索一个值时，可以把这个值加长到指定的长度。例如，指定一个字段的类型为 INT(6)，

就可以保证所包含数字少于 6 个的值从数据库中检索出来时能够自动地用空格填充。需要注意的是，使用一个宽度指示器不会影响字段的大小和它可以存储的值的范围。

万一我们需要对一个字段存储一个超出许可范围的数字，MySQL 会根据允许范围最接近它的一端截短后再进行存储。还有一个比较特别的地方是，

MySQL 会在不合规定的值插入表前自动修改为 0。

UNSIGNED 修饰符规定字段只保存正值。因为不需要保存数字的正、负符号，可以在储时节约一个“位”的空间。从而增大这个字段可以存储的值的范围。

ZEROFILL 修饰符规定 0（不是空格）可以用来真补输出的值。使用这个修饰符可以阻止 MySQL 数据库存储负值。

FLOAT、DOUBLE 和 DECIMAL 类型

MySQL 支持的三个浮点类型是 FLOAT、DOUBLE 和 DECIMAL 类型。FLOAT 数值类型用于表示单精度浮点数值，而 DOUBLE 数值类型用于表示双精度浮点数值。

与整数一样，这些类型也带有附加参数：一个显示宽度指示器和一个小数点指示器。比如语句 FLOAT(7,3) 规定显示的值不会超过 7 位数字，小数点后面带有 3 位数字。

对于小数点后面的位数超过允许范围的值，MySQL 会自动将它四舍五入为最接近它的值，再插入它。

DECIMAL 数据类型用于精度要求非常高的计算中，这种类型允许指定数值的精度和计数方法作为选择参数。精度在这里指为这个值保存的有效数字的总个数，

而计数方法表示小数点后数字的位数。比如语句 DECIMAL(7,3) 规定了存储的值不会超过 7 位数字，并且小数点后不超过 3 位。

忽略 DECIMAL 数据类型的精度和计数方法修饰符将会使 MySQL 数据库把所有标识为这个数据类型的字段精度设置为 10，计算方法设置为 0。

UNSIGNED 和 ZEROFILL 修饰符也可以被 FLOAT、DOUBLE 和 DECIMAL 数据类型使用。并且效果与 INT 数据类型相同。

二.字符串类型

MySQL 提供了8个基本的字符串类型,分别:CHAR、VARCHAR、BINARY、VARBINARY、BLOB、TEXT、ENUM 各SET等多种字符串类型。

可以存储的范围从简单的一个字符到巨大的文本块或二进制字符串数据。

  字符串类型     字节大小         描述及存储需求

    CHAR         0-255字节          定长字符串 

    VARCHAR      0-255字节          变长字符串 

    TINYBLOB     0-255字节        不超过 255 个字符的二进制字符串 

    TINYTEXT     0-255字节        短文本字符串 

    BLOB         0-65535字节      二进制形式的长文本数据 

    TEXT         0-65535字节      长文本数据 

    MEDIUMBLOB   0-16 777 215字节 二进制形式的中等长度文本数据 

    MEDIUMTEXT   0-16 777 215字节 中等长度文本数据 

    LOGNGBLOB    0-4 294 967 295字节 二进制形式的极大文本数据 

    LONGTEXT     0-4 294 967 295字节 极大文本数据

    VARBINARY(M)                   允许长度0-M个字节的定长字节符串，值的长度+1个字节

    BINARY(M)    M                 允许长度0-M个字节的定长字节符串

CHAR 和 VARCHAR 类型

CHAR 类型用于定长字符串，并且必须在圆括号内用一个大小修饰符来定义。这个大小修饰符的范围从 0-255。比指定长度大的值将被截短，而比指定长度小的值将会用空格作填补。

CHAR 类型可以使用 BINARY 修饰符。当用于比较运算时，这个修饰符使 CHAR 以二进制方式参于运算，而不是以传统的区分大小写的方式。

   CHAR 类型的一个变体是 VARCHAR 类型。它是一种可变长度的字符串类型，并且也必须带有一个范围在 0-255 之间的指示器。CHAR 和 VARCHGAR 不同之处在于 MYSQL 数据库处理

这个指示器的方式：CHAR 把这个大小视为值的大小，不长度不足的情况下就用空格补足。而 VARCHAR 类型把它视为最大值并且只使用存储字符串实际需要的长度

(增加一个额外字节来存储字符串本身的长度)来存储值。所以短于指示器长度的 VARCHAR 类型不会被空格填补，但长于指示器的值仍然会被截短。

因为 VARCHAR 类型可以根据实际内容动态改变存储值的长度，所以在不能确定字段需要多少字符时使用 VARCHAR 类型可以大大地节约磁盘空间、提高存储效率。

VARCHAR 类型在使用 BINARY 修饰符时与 CHAR 类型完全相同。

TEXT 和 BLOB 类型

对于字段长度要求超过 255 个的情况下，MySQL 提供了 TEXT 和 BLOB 两种类型。根据存储数据的大小，它们都有不同的子类型。这些大型的数据用于存储文本块或图像、

声音文件等二进制数据类型。

TEXT 和 BLOB 类型在分类和比较上存在区别。BLOB 类型区分大小写，而 TEXT 不区分大小写。大小修饰符不用于各种 BLOB 和 TEXT 子类型。

比指定类型支持的最大范围大的值将被自动截短。

三.日期和时间类型

在处理日期和时间类型的值时，MySQL 带有 5 个不同的数据类型可供选择。它们可以被分成简单的日期、时间类型，和混合日期、时间类型。

根据要求的精度，子类型在每个分类型中都可以使用，并且 MySQL 带有内置功能可以把多样化的输入格式变为一个标准格式。

 类型     大小(字节)     范围               格式          用途 

 DATE       4        1000-01-01/9999-12-31 YYYY-MM-DD    日期值 

 TIME       3        '-838:59:59'/'838:59:59' HH:MM:SS    时间值或持续时间 

 YEAR       1         1901/2155               YYYY       年份值 

 DATETIME   8       1000-01-01 00:00:00/9999-12-31 23:59:59 YYYY-MM-DD HH:MM:SS 混合日期和时间值 

 TIMESTAMP  4       1970-01-01 00:00:00/2037 年某时 YYYYMMDD HHMMSS 混合日期和时间值，时间戳

DATE、TIME 和 TEAR 类型

MySQL 用 DATE 和 YEAR 类型存储简单的日期值，使用 TIME 类型存储时间值。这些类型可以描述为字符串或不带分隔符的整数序列。如果描述为字符串,

DATE 类型的值应该使用连字号作为分隔符分开，而 TIME 类型的值应该使用冒号作为分隔符分开。

需要注意的是，没有冒号分隔符的 TIME 类型值，将会被 MySQL 理解为持续的时间，而不是时间戳。

MySQL 还对日期的年份中的两个数字的值，或是 SQL 语句中为 TEAR 类型输入的两个数字进行最大限度的通译。因为所有 TEAR 类型的值必须用 4 个数字存储。

MySQL 试图将 2 个数字的年份转换为 4 个数字的值。把在 00-69 范围内的值转换到 2000-2069 范围内。把 70-99 范围内的值转换到 1970-1979 之内。

如果 MySQL 自动转换后的值并不符合我们的需要，请输入 4 个数字表示的年份。

DATETIME 和 TIMESTAMP 类型

除了日期和时间数据类型，MySQL 还支持 DATETIME 和 TIMESTAMP 这两种混合类型。它们可以把日期和时间作为单个的值进行存储。

这两种类型通常用于自动存储包含当前日期和时间的时间戳，并可在需要执行大量数据库事务和需要建立一个调试和审查用途的审计跟踪的应用程序中发挥良好作用。

如果我们对 TIMESTAMP 类型的字段没有明确赋值，或是被赋与了 null 值。MySQL 会自动使用系统当前的日期和时间来填充它。

复合类型

MySQL 还支持两种复合数据类型 ENUM 和 SET，它们扩展了 SQL 规范。虽然这些类型在技术上是字符串类型，但是可以被视为不同的数据类型。

一个 ENUM 类型只允许从一个集合中取得一个值；而 SET 类型允许从一个集合中取得任意多个值。

ENUM 类型

ENUM 类型因为只允许在集合中取得一个值，有点类似于单选项。在处理相互排拆的数据时容易让人理解，比如人类的性别。ENUM 类型字段可以从集合中取得一个值或使用 null 值，

除此之外的输入将会使 MySQL 在这个字段中插入一个空字符串。另外如果插入值的大小写与集合中值的大小写不匹配，MySQL 会自动使用插入值的大小写转换成与集合中大小写一致的值。

   ENUM 类型在系统内部可以存储为数字，并且从 1 开始用数字做索引。一个 ENUM 类型最多可以包含 65536 个元素，其中一个元素被 MySQL 保留，用来存储错误信息，

这个错误值用索引 0 或者一个空字符串表示。

MySQL 认为 ENUM 类型集合中出现的值是合法输入，除此之外其它任何输入都将失败。这说明通过搜索包含空字符串或对应数字索引为 0 的行就可以很容易地找到错误记录的位置。

SET 类型

SET 类型与 ENUM 类型相似但不相同。SET 类型可以从预定义的集合中取得任意数量的值。并且与 ENUM 类型相同的是任何试图在 SET 类型字段中插入非预定义的值都会使 

MySQL 插入一个空字符串。如果插入一个即有合法的元素又有非法的元素的记录，MySQL 将会保留合法的元素，除去非法的元素。

一个 SET 类型最多可以包含 64 项元素。在 SET 元素中值被存储为一个分离的“位”序列，这些“位”表示与它相对应的元素。“位”是创建有序元素集合的一种简单而有效的方式。

并且它还去除了重复的元素，所以 SET 类型中不可能包含两个相同的元素。

希望从 SET 类型字段中找出非法的记录只需查找包含空字符串或二进制值为 0 的行。

通过对每种数据类型的用途，物理存储，表示范围等有一个概要的了解。这样在面对具体应用时，就可以根据相应的特来来选择合适的数据类型，使得我们能够争取在满足应用的基础上，

用较小的存储代价换来较高的数据库性能。

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

文章来源：csdn    

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