设计做到极致注重的就是对于细节的把控力，大厂的设计师之所以比较优秀，就是他们具备很好的细节把控力。想要提高产品设计的能力，发现设计细节和思考设计深入的能力至关重要。
最近在体验产品的时候，发现了一些设计细节做得比较好的优秀案例，分享给大家学习一下。
分享目录
一、Banner 轮播转场的品牌化
二、情感化的弹窗设计
三、最小化显示提高空间利用率
四、动态化的设置引导
五、沉浸式的活动氛围设计
六、人性化的提示设置
七、动态感知的温度设计
八、无处不在的广告位开发
九、主题化的图标设计
十、新颖的卡片式设计
一、Banner 轮播转场的品牌化
立足于品牌做设计，才能强化自身产品的差异化。如何在更多设计场景中融入品牌基因，是设计师需要深入思考的关键。
最近在使用腾讯视频 APP 时，发现首页 Banner 图在轮播的转场过程中，以品牌 LOGO 造型作为转场过度。一个小小的细节强化了用户对于品牌的记忆度，也体现出专属的设计差异。
二、情感化的弹窗设计
通过弹窗设计可以提高用户操作效率，也是传播信息（活动/广告）最直观的形式。但是体验多了用户便会开始排斥，提高弹窗的情感化设计变得尤为重要，降低用户的排斥感才能提高弹窗的作用。
很多娱乐影视等 APP 都会有“青少年模式”弹窗提示，抖音将弹窗视觉表达融入了精美的国风插画。也通过针对性的内容作为设置的引导，提高了用户对“青少年模式”的深入理解，增强了体验的积极性。
插画的形式在弹窗设计中表现比较突出，比如嘀嗒出行 APP 将“推送通知”的弹窗设计运用插画增强情感化表达。相较于生硬的表达方式用户更能接受，通过营销的文案引导用户授权，提高了产品的感官体验。
三、最小化显示提高空间利用率
对于工具型产品不同用户的操作焦点不同，更多定制化的体验才能提高用户的操作效率。
钉钉 APP 在协作栏目中，默认展示的各类工具可以进行收起，实现最小化显示。用户可以根据使用习惯和操作方式选择收起/展开，提高了当前空间的利用率，自定义的功能设计可以提高用户的操作体验。
四、动态化的设置引导
为了提高用户隐私权益，手机系统针对产品调用权限进行了阻力设计，需要用户的授权操作。提高用户的各类功能授权就需要设计师探索，降低用户的排斥感和提高授权的利好政策才能获得授权。
抖音在引导用户开启通知权限的设计中，采用了动态画面的表达来强调开启通知的利好政策，以此来攻破用户的心理防备。相较于生硬的弹窗提示，动态的表达和引导性的文案更能拉近与用户的距离感。
五、沉浸式的活动氛围设计
沉浸式的体验可以带给用户更好的场景感，提高用户的参与度。在活动的设计中，不断向游戏化和沉浸式方向加强体验，提高活动的趣味性和强化用户参与的积极性。
腾讯视频在情人节的互动活动设计中，就将抢红包的活动融入到当前的界面中，红包雨铺满整个屏幕，以趣味性的形式满足用户心理。不隔断与界面之间的联系，降低活动对用户的干扰，进而提高活动氛围感和参与度。
六、人性化的提示设置
短视频近些年改变了大家的生活方式和娱乐形式，也有用户容易过度依赖进而影响休息质量。
抖音作为短视频领域的头部产品之一，在增强用户体验的同时也要起到良性的引导作用。当用户刷短视频一定时间后会弹窗提示休息，而提示时间用户可以根据自己的实际情况进行设置，灵活的设置可以让用户合理分配时间。健康使用的引导可以让用户感受到产品的温度，提高用户体验的认可度。
七、动态感知的温度设计
天气预报是用户关注度较高的信息，对于温度的感知可以让我们出行更容易把控。在产品中显示天气情况也是一种情感化的升级，可以带给用户更有温度的体验。
利用饿了么 APP 点餐之后，首页会显示配送情况和当前的天气温度，背景以动态的天气画面增强视觉感知。也希望用户可以根据天气情况对外卖员多一份理解，加强人与人之间的宽容心，带给用户更强的情感化体验。
最近在使用爱奇艺 APP 时，发现左上角的品牌位置也结合了天气情况，结合顶部视觉区域的流体渐变，新增的天气预报和品牌 LOGO 完美的通过动效过度。整个设计表达流畅自然，感官体验也是非常值得学习的。
八、无处不在的广告位开发
广告是众多产品实现流量变现的方式之一，广告位的开发也是见缝插针，如何在仅有的空间增加更多广告位，产品设计师也在不断探索。
最近在使用腾讯视频 APP 时，进入到个人中心时会默认有个下拉广告。这个见缝插针的广告位新增，对于设计师来说让我感受到了广告的无处不在，不过对于用户来说是否会心生排斥感得通过数据去验证。但是作为产品设计师这也是一个启发，将有限的空间进行深度开发，还不会影响已有的结构布局，这也是一个启发性的案例。
九、主题化的图标设计
图标是产品中不可或缺的存在，图标设计的研究也是设计师需要重点对待的技能范围。精美的图标不仅可以提高产品的感官体验，也能吸引用户的关注度，进而提高业务模块的点击欲。
最近在使用顺丰速运小程序时，寄快递栏目的各业务入口图标设计非常引人注目，结合主题化的图标设计突出了活动传播力度。对于工具型产品而言，强化氛围感可以打破用户原有的认知，不仅可以突出活动主题，也能强化用户对产品的视觉感知。
十、新颖的卡片式设计
卡片式设计已经流行好几年了，目前依然是非常普及的 UI 设计趋势之一。如何进一步强化卡片式设计的创新度，我们需要不断的尝试和总结。
哗哩哗哩 APP 的创作中心设计也许是一个不错的启发，卡片内部右上角的视觉强化使得原本普通的表达变得更有视觉感。突出的设计也成功的吸引了 UP 主的注意力，强化了该入口的点击欲。这样的设计表达在保留卡片式设计的基础上，也是一种新颖的视觉表现，可以作为突出业务入口的表现方式进行探索。
作者：黑马青年 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
背景：项目中通过摄像机提供的rtsp流来显示画面，但是在编写项目中，需要将rtsp实时流画面传输到web前端页面中。于是找了很多方法，都是后台转码转成rtmp来播放，现在大部分插件和浏览器都是支持使用rtmp播放视频流。而rtsp随着flash的退出而被复杂化了。网上都是1、通过ffmpeg转码后输出，2、通过摄像机指定的web插件转码辅助播放，如海康，大华摄像机；3、还有个猿大师播放器基于猿大师中间件提供的内嵌网页播放（没用过，不知道行不行，原本想用现在这个方法行不行的，若不行就用这个猿大师了的）
安装成功以后，你重新打开一个命令行终端，输入：ffmpeg -h，如果能输出 ffmpeg 的相关信息出来，则证明你的电脑安装 ffmpeg 成功。
创建了一个vuecli（vue2）项目，名称不要起rtsp2web，与src文件夹同级
下创建一个serve文件夹
-|public
|-favicon.ico
|-index.html
-|src
-|serve
-|.gittignore
-.....
npm init --yes
npm install rtsp2web
//index.js
const RTSP2web = require('rtsp2web')
//服务端的端口号，端口号可以自定义
const port = 8033
new RTSP2web({
port
)}
运行命令：node index.js
在public的index.html中
其中jsmpeg.min.js通过src引入，可以用jsmpeg.js或者jsmpeg.min.js都行
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--v jsmpeg.min.js文件用在这 v-->
<script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
var rtsp = 'rtsp://username:password@ip:port/live'
window.onload = () => {
//这里的port要与index.js的port保持一致
new JSMpeg.Player("ws://localhost:8033/rtsp?url="+btoa(rtsp), {
canvas: document.getElementById("canvas")
})
}
</script>
</html>
#####在vue页面中用canvas中播放视频
如 在App.vue中这样用：
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
<canvas id="canvas" style="width: 600px; height: 600px;"></canvas>
</div>
</template>
为什么node index.js之后没反应？
—检查端口号是否填写对应，index.js中的端口要与script里的端口保持一致
|
为什么长时间未显示图像？
—需要等待大概1-2分钟，就会显示画面。至于这么长时间未显示，小弟也不知道啊。。希望大佬指点。。
完事了就，这是我历经千辛万苦找到的方法，弄这个vue中播放rtsp搞了好久，技术太拉了我，只能用这些小玩意来搞。原本打算用java或者python通过拉rtsp流解析成rtmp的，奈何能力不足，也懒得思考懒得搞懒得弄，所以摆烂了QAQ
若哪里有讲的不妥和使用不当的地方还请您告知一下，万分感谢大佬指点，小弟深表感谢<抱拳>
-----------------------------------------------------------------------------------------------------------
https://zhuanlan.zhihu.com/p/531899593 ↩︎
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
搜索“视频传输协议”，一般会搜出来RTP，RTSP，UDP等等。光看这些协议，可能有些人会觉得奇怪为什么要把udp也往上放一起，rtp不是可以基于udp？！同时，很多文章主要去讲解各个协议之间的差异，而没有从更为宏观的角度来考虑。本文将结合OSI的分层思路，将不同协议之间的关系都梳理清楚；同时也从视频传输与组网角度进行介绍。
再者，视频有很多封装格式，比如m3u8，mp4等；也有很多音视频编码格式，比如h264，h265等，那为何有这么多的封装格式类型和音视频编码格式类型呢？一方面是解决存储的问题；另一方面是支持不同播放器的解析；但更重要的是不同的传输协议可以支持的音视频编码格式有差异，这也是由于不同的应用场景下形成的历史原因。
流媒体（streaming media），是指将一连串的媒体数据包从服务器端发送到客户端，可以实现边下边播，此技术使得数据包可以像流水一样发送。传统的方式需要在使用前下载整个文件，存储到本地后才能进行播放；而流媒体只允许下载一小部分（存在视频关键帧）就能进行播放。
流媒体技术不是一种单一的技术，它将网络技术、音视频技术还有终端缓存技术等有机地结合。也就是说，在网络上要实现流媒体技术，必须要先制作、发布、传输和播放等，这需要服务器端、终端以及网络都要能支持。当前很多的视频软件或者网站都是用到了这种技术。归结下来是：
1.内容的产生。这里是指将视频源制作成为可以对外发布的视频格式，以及适合在网络上传播的分辨率和码率。这主要用到了视频的编解码技术。考虑的输出参数，如分辨率、码率、音视频编码格式、封装格式等都需要结合应用场景和传输方式统一考虑。
2.对外发布。这里主要是指能够支撑服务器对外输出视频资源的技术，常见的有各种流媒体网络传输协议技术及其需要服务器端支撑的技术。这里的流媒体网络传输协议比如：
3.组网和传输。
这里的传输还得考虑一个概念，是服务器对外主动推数据，还是等待终端到服务器端拉数据，这是两个完全相反的处理方式。对于组播或者广播的组网方式，往往采用的是服务器主动对外推送数据；而对于单播来说主要是终端向服务器端主动拉数据。
这里涉及到的IP组网方式中的传输类型有：广播、单播、组播。
不管是什么类型的组网方式，在传输层就有UDP和TCP。下面也将从OSI等层面讲讲这些底层传输协议之间的关系。
4.视频播放。这里主要是从终端侧角度说，在不同操作系统中能够进行播放视频的播放器，比如vlc等，不同的播放器支持对不同类型的视频数据进行播放。
从图中也可以看到IP层（网络层）的上层是传输层，通过TCP和UDP等方式进行数据包的传输。
（PS：下图为网络中所找https://blog.csdn.net/yaopeng_2005/article/details/7064869）
结合上图，再补一个wiki上的互联网协议套组图，一看就更明白了。
从上面两个图中也可以很清楚地看到，TCP和UDP在接下去的内容有很重要的地位，这里也简单介绍下，深度知识请自行搜索。
组播（multicast）
又称为多点广播或群播，或多播，主要是指将信息同时传递给一组目的地址。消息在每个网络链路上只需传递一次，而且只有在链路分叉时，消息才会被复制，使用的效率是最高的。也正是因为这个原因，以前的广电网络中，针对直播多采用组播方式，流量的传输成本明显降低很多。
单播：
其实是组播的一种特殊方式，即常规的点到点信息传递。如果所有传输中是以单播的方式传递给多个接收方，必须向每个接收者都发送一份数据副本这么多。
广播
其实也算是组播的一种特殊方式，就是一对所有的通信方式，对每一台主机发出的信号都进行无条件复制并转发，所有的接收点都可以收到所有信息。
注意，组播一般指的是IP组播，常与RTP等音视频协议相结合。虽然组播的设计理念很好，但是它需要对网络内部的状态比单播要多得多。实际商用中，组播主要应用在较为简单的、只有单个源断的情况，如之前提到广电网络内部用到的组播方式，UDP组播。
以上是不同类型的IP组播方式，实际在采用中要结合具体情况进行调整。比如，如果非要使用广播，但是采用的场景不合适，也有可能产生广播风暴。
组播、广播、单播也介绍了基本的概念，但是他们与视频传输有什么关系呢？
文章上面也提到了，组播是从IP层面的传输策略，而所有的视频传输协议其数据包大部分都经过UDP和TCP，经由IP层进行传输到目的地。因此不同的IP传输策略与传输协议进行结合，就能够落地到具体的应用场景。
同时需要注意的是，采用组播方式可以通过设置网卡为混杂模式或为多播模式，具体也是根据网卡的特性进行差异处理。如果处理方式不当，比如设置成了广播，可能会导致在同网络下，你在播放视频，然后其他相同网络下接收端也将有相应的流量，而导致他们的对外服务网口的流量被占满。
从下图中可以看到，标红色的就是大家经常说的视频传输协议。但是从图中可以看到他们其实是有基于的关系，比如HLS都是基于HTTP进行传输，而HTTP在传输层都是依赖tcp数据包，再经由ip层进行分发。
1）UDP
基于UDP传输的视频数据，比如udp://238.123.45.1:3001，在网络可达的情况下，即可进行播放。可以采用vlc等播放器进行播放。
UDP视频数据传输可以采用单播，组播或广播的方式，具体采用哪种方式根据具体的组网情况进行控制。
上面也有提到过，广电网络中多采用组播的方式进行直播数据传输，这也是得益于广电网络的专网特性以及视频源输出可以控制到单一等特性。
UDP的组播大部分是采用MPEG TS流，广电网络中很多视频，其视频编码格式也大部分是mepg2
2）RTP
整个RTP协议包括RTP数据协议和RTP控制协议（RTCP）。此外，这里也将经常一起提的RTSP介绍下。
RTP（实时传输协议，Real-time Transport Protocol），是一种网络传输协议
RTP协议说明了传递音频和视频的标准数据包的格式。最早是作为多播协议的，后来主要应用在单播中。RTP是创建在UDP协议之上的，主要应用于流媒体、视频会议等系统业务上。
RTP为端到端的数据传输提供了时间信息和流同步，但不保证服务质量，而是由服务质量由RTCP。
在RTP的数据包封装中，包含了时间戳、标记位、同步源标识等信息。
RTP从上层接收到流媒体的数据（如H264），封装成RTP数据包，并将其发往UDP端口中的偶数端口。
RTCP（实时传输控制协议，Real-time Transport Control Protocol或RTP Control Protocol）
RTP的姐妹协议。RTP使用的是偶数UDP端口，RTCP采用的是RTP下一个端口，也就是下一个奇数的端口。RTCP也是基于UDP进行传输的。
RTCP本身不做数据传输，主要与RTP协作，将视频媒体数据打包和发送，并定期在流媒体会话参与者之间传输控制数据，并为RTP提供QoS反馈，简单点说是主要保证音视频的同步。
RTCP接收到控制信息后，封装为RTCP控制包，并发往RTP端口下一个偶数端口。
RTSP（实时流协议，Real Time Streaming Protocol）
RTSP是一种网络应用协议，主要来创建和控制流媒体服务器与终端之间的会话。控制类的请求主要走TCP协议。
通过RTSP对流媒体数据进行控制和播放，比如进行播放、暂停、快进等操作，它定义了具体的控制消息、操作方法和状态码等。
与RTP、RTCP配合，在广电网络内部主要应用在点播场景比较多，而直播主要走UDP组播。在互联网场景下，也有用于直播和点播的，但是相对来说使用较少。
请求的url为：rtsp://testdomain/test.mp4/streamid=0
需要服务器端和客户端都能够支持RTSP的控制。一般客户端采用vlc即可，而服务器端采用Darwin Streaming Server，ffmpeg等建立流媒体服务。
3）RTMP（实时消息协议，Real-Time Messaging Protocol）
包括RTMP、RTMPT等一系列的协议，Adobe为flash播放器和服务器之间音视频数据传输的协议。
4）HTTP
而基于HTTP协议的就更多了，如上图。如果服务器部署了流媒体的服务，如Nginx等，就可以对外提供视频播放服务了。
这里也需要说明，视频的播放一般分为点播和直播，有些协议作为直播的传输协议反而是更好的，比如RTMP，时延就比较低，但RTMP做CDN成本相对较高。CDN支持很好的HTTP如果能支持直播，当前也有很多协议能支持通过HTTP的方式实现直播流媒体。
自适性流媒体（adaptive bitrate streaming，ABS）也叫码流自适应，是流媒体服务器准备各种码流的视频流，所有的视频码流都是相同时段完全统一图像的音视频数据，客户端根据网络情况和CPU使用情况等进行动态调整。
主要有MPEG-DASH、HLS、HDS、MSS等技术方案，这几个也是上图中最上层的流媒体传输协议技术。通过这些传输协议封装的视频源，可以支持有多种码率，并支持播放器客户端在播放时，根据带宽情况自动调整码率以适应用户的最佳观看效果——不卡顿，不重新加载等。
这里也仅仅对码流自适应技术做了简单介绍，由于现在这种技术应用相当广泛，后面将详细介绍这种技术。
【说明】
文章转自，华为云社区，作者Higeeon，相关版权解释权归原作者所有。https://bbs.huaweicloud.com/blogs/fed3df04b1e011e9b759fa163e330718
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。它基于 ECMAScript（European Computer Manufacturers Association, 欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
JSON源自于JavaScript，是一种轻量级（Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。
在现在的开发中，能够进行数据交换格式的，包括两个JSON XML。
JSON是存储和交换文本信息的语法，类似 XML，JSON比 XML更小、更快，更易解析。
那么，简而言之，对JSON的说明总结如下：
- JSON是独立于任何编程语言的数据格式
- 是一种用于存储和传输数据的轻量级格式
- 语法是自描述的，便于人类阅读和理解
- 数组（Array）用方括号 "[]" 表示
- 对象（0bject）用大括号 "{}" 表示
- 名称 / 值 对(name/value）组合成数组和对象
- 名称( name ）置于双引号中，值（value）有字符串、数值、布尔值、null、对象和数组
- 并列的数据之间用逗号 "," 分隔
- 名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值
需要注意的是：
JSON不支持注释。向 JSON添加注释无效
JSON文件的文件类型是
.jsonJSON文本的
MIME类型是application/json
json是以对象的形式存在的，直接获取JSON数据可通过如下方法：
1. json对象.键名
2. json对象["键名"]
3. 数组对象[索引]
4. 遍历
代码示例：
-
//定义基本格式
-
var person = { name: "张三", age: 23, gender: true };
-
var persons = [
-
{ name: "张三", age: 23, gender: true },
-
{ name: "李四", age: 24, gender: true },
-
{ name: "王五", age: 25, gender: false },
-
];
-
-
//获取person对象中所有的键和值
-
//for in 循环
-
/* for(var key in person){
-
//这样的方式获取不行。因为相当于 person."name"
-
//alert(key + ":" + person.key);
-
alert(key+":"+person[key]);
-
}*/
-
-
//获取persons中的所有值
-
for (var i = 0; i < persons.length; i++) {
-
var p = persons[i];
-
for (var key in p) {
-
console.log(key + ":" + p[key]);
-
}
-
}
输出结果为：
先在控制台中打印一下JSON对象，看看有什么，如图：
显而易见，在JavaScript中JSON对象仅有两个方法：parse和stringify。后面会详细介绍一下这两个方法
序列化的概念：序列化是将对象转化为字节序列的过程。对象序列化后可以在网络上传输，或者保存到硬盘上。
将对象序列化成json字符串： JSON.stringify(json对象)；
反序列化：将json字符串反序列化为对象: JSON.parse(str)
API介绍：用来解析 JSON字符串，构造由字符串描述的 JavaScript 值或对象，传入的字符串不符合 JSON规范会报错
语法：
JSON.parse(str, reviver);
str：要解析的 JSON字符串reviver：可选的函数function(key,value)，该函数的第一个参数和第二个参数分别代表键值对的键和值，并可以对值进行转换（函数返回值当做处理后的value）
代码示例：
-
// JSON.parse() 解析JSON字符串， 将JSON转换为对象
-
let json = '{"name": ["js", "webpack"], "age": 22, "gridFriend": "ljj"}';
-
console.log(JSON.parse(json));
-
// {name: Array(2), age: 22, gridFriend: 'ljj'}
-
-
// 第二个参数是一个函数，key和value代表每个key/value对
-
let result = JSON.parse(json, (key, value) => {
-
if (key == "age") {
-
return `年龄：${value}`;
-
}
-
return value;
-
});
-
console.log(result);
-
//{name: Array(2), age: '年龄：22', gridFriend: 'ljj'}
API介绍：将一个 JavaScript 对象或值转换为 JSON字符串
如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性
语法：
JSON.stringify(value, replacer, space)value：将要序列化成 一个 JSON 字符串的值
replacer：
- 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理
- 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中
- 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化
space：指定缩进用的空白字符串，用于美化输出
- 如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格
- 如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格
- 如果该参数没有提供（或者为 null），将没有空格
代码示例：
-
let obj = {
-
name: "jsx",
-
age: 22,
-
lesson: ["html", "css", "js"],
-
};
-
let json = JSON.stringify(obj);
-
console.log(json);
-
// {"name":"jsx","age":22,"lesson":["html","css","js"]}
-
-
// 第二个参数replacer 为函数时，被序列化的值得属性都会经过该函数转换处理
-
function replacer(key, value) {
-
if (typeof value === "string") {
-
return undefined;
-
}
-
return value;
-
}
-
let result = JSON.stringify(obj, replacer);
-
console.log(result);
-
// {"age":22,"lesson":[null,null,null]}
-
-
// 当replacer参数为数组，数组的值代表将被序列化成 JSON 字符串的属性名
-
let result1 = JSON.stringify(obj, ["name", "lesson"]);
-
// 只保留 “name” 和 “lesson” 属性值
-
console.log(result1);
-
// {"name":"jsx","lesson":["html","css","js"]}
-
-
// 第三个参数spcae,用来控制结果字符串里面的间距
-
let result2 = JSON.stringify(obj, null, 4);
-
console.log(result2);
-
/*{
-
"name": "jsx",
-
"age": 22,
-
"lesson": [
-
"html",
-
"css",
-
"js"
-
]
-
}*/
注意：如果replacer是一个函数，则该函数会进行深处理，即如果键值对的值也是一个数组，则也会执行该函数
- 转换值如果有
toJSON()方法，该方法定义什么值将被序列化- 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中
- 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值，undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。函数、undefined 被单独转换时，会返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined)
- 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误
- 所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们
- Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理
- NaN 和 Infinity 格式的数值及 null 都会被当做 null
- 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
1.get请求一般是去取获取数据（其实也可以提交，但常见的是获取数据）；
post请求一般是去提交数据。
2.get因为参数会放在url中，所以隐私性，安全性较差，请求的数据长度是有限制的，
不同的浏览器和服务器不同，一般限制在 2~8K 之间，更加常见的是 1k 以内；
post请求是没有的长度限制，请求数据是放在body中；
3.get请求刷新服务器或者回退没有影响，post请求回退时会重新提交数据请求。
4.get请求可以被缓存，post请求不会被缓存。
5.get请求会被保存在浏览器历史记录当中，post不会。get请求可以被收藏为书签，因为参数就是url中，但post不能。它的参数不在url中。
6.get请求只能进行url编码（appliacation-x-www-form-urlencoded）,post请求支持多种（multipart/form-data等）。
深入理解
1…GET 和 POST都是http请求方式， 底层都是 TCP/IP协议；通常GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包（但firefox是发送一个数据包），
2.对于 GET 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200
（返回数据）表示成功；
而对于 POST，浏览器先发送 header，服务器响应 100， 浏览器再继续发送 data，服
务器响应 200 （返回数据）。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
rpx是响应式px
rpx是一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx正好是屏幕的宽度。屏幕变宽，rpx实际显示效果会等比放大，但在App端和h5端，屏幕宽度达到960px时，默认将按照375px的屏幕宽度进行计算。在开发移动端项目时选择rpx作为尺寸单位。
uni-app在App端，H5端和小程序都支持rpx，并且可以配置不同屏幕宽度的计算方式。
页面元素在uni-app的宽度计算公式如下：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度
举例说明：
但是要注意的是
拓展：在设置文件mainfest.json里开启px转rpx（默认关闭），所有的px可一键转换为rpx
“transformPx”:false
rpx直接支持动态绑定
<view class="test" :style="{width:winWidth + 'rpx;'}"></view>
vue项目中，前端与后台进行数据请求或者提交的时候，如果后台没有设置跨域，前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。
要想本地正常的调试，解决的办法有三个：
一、后台更改header
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
这样就可以跨域请求数据了
二、使用JQuery提供的jsonp (注：vue中引入jquery，自行百度)
methods: {
getData () {
var self = this
$.ajax({
url: 'http://f.apiplus.cn/bj11x5.json',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(',')
}
})
}
}
通过这种方法也可以解决跨域的问题。
三、使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）
例如请求的url:“/business/remind/user”
1、打开vue.config.js.js,在proxy中添写如下代码：
// 运行配置
devServer: {
port: '9527', //代理端口
open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
proxy: {
'/api': {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: { //重写路径
'^/api': '/' // 或 者 'http://localhost:8080/api'
}
// 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢
// 因此这里的意义在于， 以 /api开头的url请求，代理都会知道实际上应该请求那里，
// ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是
// https://我是服务器/api/test/test
}
}
},
附带vue.config.js下的代码
const chalk = require('chalk')
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 没有书写outputDir属性 默认'dist' 对应dev.assetsSubDirectory
outputDir: 'dist',
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
// compiler: false,
//在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath ( 资源地址 )
publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : '/' ,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {}
// 启用 CSS modules for all css / pre-processor files.
// modules: false
},
// 运行配置
devServer: {
port: '8222', //代理端口
open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
proxy: {
'/api': {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: { //重写路径
'^/api': '/' // 或 者 'http://localhost:8080/api'
}
// 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢
// 因此这里的意义在于， 以 /api开头的url请求，代理都会知道实际上应该请求那里，
// ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是
// https://我是服务器/api/test/test
}
}
},
chainWebpack: config => {
// 提示输出的哪个地址
console.log(chalk.blueBright('\n\n running ' + process.env.VUE_APP_PROJ_NAME + ' : ') +
chalk.yellowBright(process.env.VUE_APP_HTTP_URL + ' please wait... \n'));
// 判断不同环境 做相应处理
if(process.env.NODE_ENV === 'production') {
// 测试生产环境, 不压缩js代码
if (process.env.VUE_APP_TITLE === 'alpha') {
config.optimization.minimize(false)
}
}
//set第一个参数：设置的别名，第二个参数：设置的路径
config.resolve.alias
.set('@',resolve('./src'))
.set('components',resolve('./src/components'))
.set('assets',resolve('./src/assets'))
.set('views',resolve('./src/views'))
.set('network',resolve('./src/network'))
//注意 store 和 router 没必要配置
config.plugin('html')
.tap(args => {
args[0].title = '公募综合业务平台'
return args
})
}
}
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
我使用命令 npm run dev 启动项目 报了下面的错。
'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\lara\AppData\Roaming\npm-cache\_logs\2018-06-12T09_40_42_892Z-debug.log
什么环境都是好的，刚使用npm run dev 启动了一个前端项目都是好的，但是现在这个项目就不行了。
删除项目的node_modules文件夹（当前运行的项目中没有node_modules 文件夹的直接运行第二步）
在项目目录里运行 npm install 命令
在项目目录里运行npm run build 命令
在项目目录里运行npm run dev 命令
这样我就可以成功运行项目了。
众所周知，「用户体验五要素」出自Jesse James Garrett 的《用户体验要素》一书：战略层、范围层、结构层、框架层、表现层。
产品设计者和开发者的角度可以对应理解为：为什么做、做到什么程度、这些东西如何组成、规划用户操作行为、如何呈现这些东西。
「Live Activities设计规范」由苹果出品，原文为英文，上一篇已翻译https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了个人对其内容的叙述方式存在一点意见。为了更好的记住&理解「Live Activities设计规范」，使用比较熟悉的「用户体验五要素」对内容进行整理。
原文提供的Live Activity定义如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
从原文可以提炼出Live Activity显示特点：
1. 内容是频繁更新的、有进度/状态显示的、用户关心的。
2. 内容的信息量是一眼就能看完的程度。
但上述仍是表象，并非实质，接下来思考这几个问题：
1. 为什么显示的是进度/状态频繁更新的内容？
2. 为什么要强调用户关心的？
3. 为什么信息量是一眼就能看完的程度？
没有Live Activity时，频繁更新主要靠push推送。但push容易被其他APP的push覆盖，且随着各种APP的频繁使用，用户获取关键信息的效率和通过push打开APP的次数反而在下降。
进度/状态频繁更新的内容，说明每个状态存在的时间短，如果被覆盖/忽略，同一状态就不再复现，用户所关心的，或APP所希望用户关心的，就看不到了。比如：什么时候取外卖、待付款、上传成功等等。
当下我们所处的时代是信息泛滥的时代，需要对信息作精简，但用户的操作是可以多条线进行的，比如比如边看剧边吃饭、上班摸鱼/等外卖、比如听音乐的时候写作。
信息内容和量是官网一直在强调的，需要精简，只展示用户需要的，基本达到一眼看完的程度，目的就是知道变化的是什么，当前状态是什么。
分析了这么多，大胆推测一下Live Activity的设计初衷是：快&准确&轻。而终极目的是打动用户，形成好体验，进而推动口碑和销售；为各APP提供新的通知形式，互惠互利。当然Live Activity在一定程度上也弥补了硬件上的缺憾。
关于这个层次相当于规定功能范围&信息边界限制，就是什么要，什么不能要。这部分的信息官网给出许多，在此将其分类梳理如下，为避免大家不好查找官网/译文对应出处，在句未已标注。
1. 仅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平台注意事项）
2. 非iPhone14的仅针对iOS16有锁屏Live Activity展示。（源自：什么是Live Activity-锁屏）
3. 支持用户手动清除锁屏状态下的Live Activity。（源自：实际操作）
4. 支持用户直接关闭对应APP的Live Activity。（源自：最佳实践方式第3/c条）
5. 支持Live Activity自动开始&结束。（源自：最佳实践方式第6/f条）
6. 限制跟踪活动/状态时长不超过8小时。（源自：最佳实践方式第1/a条）
7. 限制活动/进程结束后展示时长不超过4小时。（源自：最佳实践方式第8/h条）
8. 支持更改背景颜色&不透明度。（源自：设计有用的Live Activity第5/e条）
9. 限制内容布局。（源自：设计有用的Live Activity第5/e条）
10. 限制不同设备的展示尺寸。（源自：规范）
1. 避免在Live Activity中显示敏感信息。（源自：最佳实践方式第4/d条）
2. 避免在Live Activity中显示广告和促销活动。（源自：最佳实践方式第5/e条）
3. 只提供正在进行的任务/事件的关键摘要。（源自：最佳实践方式第2/b条）
4. 在任务/活动结束前，给用户提供关闭Live Activity按钮。（源自：最佳实践方式第6/f条）
5. 点击Live Activity直接定位到对应页面，无需用户二次导航。（源自：最佳实践方式第7/g条）
6. 考虑在活动结束后，锁屏上在合理时段后自动删除Live Activity。（源自：最佳实践方式第8/g条）
（个人猜测）由于是提供一个展示区域，且展示区域有限，所以对于层级架构，一级展示什么，二级展示什么，各阶段展示什么，这些都没有做明确规定&建议。各家APP可以根据自身实际情况进行设计。
通过Live Activity的展示形式，可以总结为2点：吸引、查看（摘要&详情）。
1. 一般是在原深感摄像头两侧展示（电话会直接展示扩展型），分为紧凑型和最小化。
2. 紧凑型在仅有一个活动/事件的时候展示，虽被原深感摄像头分割两端，但仅作为一条信息展示，为了视觉上的统一，这里的颜色不支持开发设置，使用的是系统默认色值。
3. 最小化在存在多个活动的时候展现，左侧和原深感摄像头粘连，右侧独立成岛。
4. 不管是紧凑型，还是最小化，都可以通过点击原深感摄像头区域，进入APP内页，或者长按唤出扩展型。
1. 进入内页的查看基本就是各家显神通了，这里主要讲扩展型和锁屏。
2. 原则上是不支持在扩展型和锁屏做复杂操作的，基本点击是进入APP。
3. 扩展型是用户长按紧凑型/最小化唤起的展示区域，内容是可以自定义的，当然官方也给了相应的建议，具体如下。内容信息种类多的可以采用这种信息左中右排布，底部预留大按钮。内容信息少的可以采用左内容右操作的方式。
4. 根据一致性原则，锁屏展示的布局框架应该与扩展型差不多，同样可以点击打开APP。只是在锁屏状态如果有多个任务同时进行，是会全部展示的，所以要注意品牌的传递，避免用户混淆服务方。
对于如何呈现这些东西，苹果还是写了很多建议，确保视觉上的一致性和美观。
1. 紧凑型状态下，为了保证两侧信息的连贯，除了语句阅读连贯，还需要在图形和颜色上具有一致性，视觉上连贯。
2. 锁屏状态下的背景是可以自定义颜色、图像、不透明度的，当然文字的色值和不透明度也是可以定义的。这就涉及到两者间的对比度对信息阅读的影响。
3. 设计师不仅要考虑最佳状态，还有深色&浅色模式下的，以及不同环境光、设备亮度下的显示。还有一点很容易忽视的，就是在用户自定义的墙纸下显示的效果。不仅要注意信息获取，还需要考虑美感问题。
1. 紧凑型和扩展型之间的布局要保持一致，两者间的变化过渡效果是可以预测的。
2. 一般来说，扩展型和锁屏状态下的信息间标准间距是20pt。
3. 在某些情况下，例如图形和按钮，您可能需要使用更紧凑的边距，以避免挤满边缘或形成混乱的外观。
1. 内容和Live Activity边缘之间的边距需要保持一致，请遵循SwiftUI规则。
1内容和Live Activity边缘之间的边距需要保持一致，，发现以圆角边界为测距点得到的间距关系较为舒适。即：圆形/大致为圆形的图形保持上下，3. 以及左侧或者右侧间距一致即可；方形/大致为方形的图形保持圆角边界与容器圆角边界垂直对齐即可。同一位置的多个图形圆角需要相对统一，才能确保间距的一致性。
需要适应不同机型的尺寸。具体的尺寸规范如下。
动态岛使用44个点的角半径，其圆角形状与原深感摄像头相匹配。
下表中列出的所有值均以pt为单位。
ps：左侧为宽度，右侧为高度。
以上就是整理分析的全部。
在整理分析过程中加强了对「用户体验5要素」各个层划分的理解，也对Live Activity在各个层次上的要求更加明确。
写一期大热的AIGC的设计师必备的生图软件，文章详细讲解Midjourney如何使用，增强我们工作的效率，现在很多大厂都已经对AIGC开始制定详细的工作流程，所以你还在犹豫什么，为什么还不赶紧学起来。
交流群分享AIGC辅助网站
Midjourney是搭载在Discord（Discord 是一个功能丰富且方便使用的通讯工具，还允许用户创建自己的服务器以便和他人协作）上的，因此要想使用Midjourney需要先注册一个Discord账号。
打开Midjourney官网 http://www.midjourney.com
点击【Join the Beta】，根据提示完成Discord账号注册
没有账户，点击注册。此app可以下载电脑的
注册页面，按需填写
登录刚刚注册的邮箱，找到验证邮件，点击邮件里面的按钮进行验证
注册完成后，登录Discord账号，在左侧找到“Midjourney图标”，即Midjourney官方服务器，然后就可以看到各种小群组。新用户只能加入新人群组【NEWCOMER ROOMS】，选择一个加入，可以看到群组里有网友绘制的各种图片。
由于新手群人数较多，自己生成的图片很快会淹没在网友生成的图片中。为避免干扰，可以在Discord中创建自己的服务器，安静的创作。
首先在左侧菜单栏中点击加号图表，根据流程依次选择，输入服务器名称，完成服务器的创建。
输入自己的服务器名称
然后，返回Midjourney 的服务器，进入房间，点击机器人的头像就可以选择添加至刚创建的服务器中
然后进入自己创建的服务器中，在下方输入框中输入一些指令就可以使用Midjourney创作图片了。
新注册的用户有25次免费生成图像的机会，如果经常使用建议订阅会员 按年费订阅为8折，订阅会员需要支持外币支付的信用卡，有外币信用卡的可以自行订阅会员，没有的可以去某宝或某鱼代订阅会员或租共享账号 相关命令：查看剩余会员资源“/info”，切换快速模式“/fast”，切换放松模式“relax”
订阅官网： https://www.yuque.com/r/goto?url=https%3A%2F%2Fwww.midjourney.com%2Faccount%2F
在对话框中，输入/imagine 指令后，输入框会变成以下样式，即可输入一些图像描述词汇（prompt），大约一分钟的时间Midjourney Bot 会根据prompt生成四张图片。 一个基本的Prompt可以是简单的一个词、短语或表情符号。 更高级的提示可以包括一个或多个图像URL，多个文本短语，以及一个或多个参数。
图片URL会影响最终结果图像的风格和内容，地址必须以 .png、.gif 或 .jpg 等扩展名结尾
也可以在网站上扒图片地址
可以复制多个图片（建议输入同类型的图片） 在图片地址后直接输入关键词或参数即可
输入参数时，记得加空格。ps：--no+空格+你需要的提词
改变生成图形的长宽比，默认为1:1，支持的长宽比如下图所示。
用于添加不希望图片中出现的内容。例如，--no plants，会尝试从图像中去除植物。
图像渲染时间。默认值是1，数值越高，消耗的时间越多，图像质量越好，反之亦然。例如，--q 2 差不多会消耗两倍的时间额度。更高的 --quality 设置并不总是更好，有时较低的 --quality 设置可以产生更好的结果——这取决于您尝试创建的图像。较低的 设置可能最适合生成抽象的图像。需要许多细节可以设置更高的值。
这可以使得生成的图像之间保持更稳定或可重复性，可选任何正整数。例如，--seed 100。
用于选择使用的模型版本，默认为V4，可以选择 <1 2, or 3>。因为V4版本生成的图像比较写实，因此有时可能需要选择之前的版本。--video用于保存生成的初始图像的进度视频。
详细的参数情况请前往官方文档查看： https://docs.midjourney.com/docs/parameter-list
输入prompts后，在生成的初始图像网格下方会出现两行按钮，其中： U 按钮用于放大图像，生成所选图像的更大版本并添加更多细节。 V 按钮用于创建变体，会生成与所选图像的整体风格和构图相似的新图像（4张在1图）。
（四张图片顺时针排序：V1、V2、V3、V4；U1、U2、U3、U4）
MJ version 1,MJ version 2,
MJ version 3：偏抽象
MJ version 4：风格多样
MJ version 5：真实图片
Niji mode：二次元
模型测试算法： MJ test , MJ test photo
模型只能使用一个，点击切换模型，每个模型侧重点不同
Half quality：图片质量低 (相当于--q 0.5)
Base quality：图片质量中等 (相当于--q 1 )
Base quality：图片质量高 (相当于--q 2 )
--stylize或-s 参数影响了这种训练的强度。低风格化值 产生的图像与提示密切相关，但艺术性较差。高风格化值产生的图像非常有艺术性，但与提示的联系较少。
Style Low = --s 50
Style Med = --s 100
Style High = --s 250
Style Very High = --s 750
--stylize的默认值为 100，并且在使用 默认【V4模型】时接受 0-1000的整数值。
public mode：公共模式，出的图会在官网社区显示
Stealth mode:隐私模式，出图仅自己可见（需要会员）
生成图片，点击(v)的时候可更改提示词
fast mode：快速模式，该速度下生图没有限制，会根据你生图占用的 CPU排队，生图量越大，排队时间越长
relax mode :轻松模式，会优先生成你的图（需要会员）
获取全部关键词，添加群主微信获取
用相同的“seed种子”产生相同的结果，然后可以微调画面细节 选择邮件表情发给机器人，这样就会收到一个机器人的私信。发“E”可以快捷搜索出图标
发送后，底部会出小邮件图标，点击等待机器人回复
收到消息，复制种子
在输入新的关键词后，结尾输入-- seed指令，复制上你的种子
3、复制图片地址，利用垫图来保持创作的关联性
蓝蓝设计的小编 http://www.lanlanwork.com