UI-网站首页轮播图、易拉宝、发布在微信公众号的宣传海报的图片设计信息

于 2021-09-02 10:17:36 发布
阅读量911 收藏
点赞数
文章标签： 微信 ui
本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45266979/article/details/120055248
版权
本文详细介绍了UI设计中颜色模式的应用，包括RGB模式用于网页和数字媒体，而CMYK模式适用于印刷。常见尺寸如网站首页轮播图（1920*360px，RGB，72dpi）、易拉宝（多种尺寸，CMYK，100dpi）和微信公众号宣传海报（600*275px，RGB，72dpi）。了解这些规范对于确保设计作品在不同媒介上的色彩准确性和视觉效果至关重要。
摘要由CSDN通过智能技术生成

UI交互设计

一、“新建”

常见的颜色模式：

颜色模式，是将某种颜色表现为数字形式的模型，或者说是一种记录图像颜色的方式。分为：RGB模式、CMYK模式、HSB模式、Lab颜色模式、位图模式、灰度模式、索引颜色模式、双色调模式和多通道模式。

1.网站首页轮播图

尺寸单位：像素

具体数值：1920*360px根据现有图片大小

分辨率：72dpi或者更大

颜色模式：RGB

2.易拉宝

印刷都是选择CMYK的颜色模式；不印刷的话通常是RGB

尺寸单位：厘米

具体数值：

常见的大小

60cm*160cm

80cm*200cm

85cm*200cm

90cm*200cm

100cm*200cm

120cm*200cm

150cm*200cm

分辨率：72dpi或者更大，但是我应该会选择100，打印出来会相对清楚

颜色模式：CMYK

3.发布在微信公众号的宣传海报

尺寸单位：像素

具体数值：最佳尺寸是600*275px,这个尺寸的图片内容不会被标题所遮挡

分辨率：72dpi或者更大

颜色模式：RGB
Coisini_甜柚か
关注
java微信公众号自动回复文字加图片
m0_37605129的博客
06-29 3103
java微信公众号自动回复文字加图片开发流程详细流程，附上代码：第一步服务器（url）接口配置服务器（url）接口配置，此步骤就是微信授权接口的过程，如果域名都不改变，微信只会校验一次。此请求微信文档中说明了是get请求。第二步发送文字我这边的需求是发送的文字中要带上微信名称，所以还需要调用微信的获取accessToken接口跟获取用户信息接口。获取用户信息接口中需要openId,在用户点击关注微...
微信公众号里边的图片轮播以及页面的九宫格分布
09-17
微信公众号里边的图片轮播，以及页面的九宫格分布，适用于初次接触微信公众号的伙伴参考。
banner信息是什么_企业网站建设为什么要设置banner图
weixin_39775577的博客
11-27 447
企业网站建设为什么要设置精美漂亮的banner图，企业网站建设中banner图的设置非常重要，一张优秀的banner图可以支撑起一个网站的流量，一般来说企业有新品或者有重大新闻都会通过banner图展示。企业网站banner图当一个新用户打开一个网站时首先看到的就是网站banner图，有些还不止一张，也许是三四张的轮播图，这个banner图决定了用户的第一印象，甚至决定了用户的去留，人都有审美疲劳...
轮播图尺寸大小_【学院干货】年前再不优化网店，生意就被隔壁抢走了！（3分钟免费制作网店宣传图）...
weixin_29001683的博客
01-12 1416
随着新年假期的到来，很多有装修需求的朋友都会闲下来刷刷手机上上网，看看装企的网店信息为装修做好考察工作。各位装企伙伴们可要抓紧年前的这波流量福利哦！但是如何在众多的网店中打造差异化，体现自身的价值和独特性也成为了许多商家头疼的事情。今天小编特意为大家找到了简单低成本打造网店差异性优势的小诀窍。在土巴兔的商家网店展示上，列表头图以及轮播图无疑是商家最能体现自身特色和建立业主第一好眼缘的重要...
小程序中间放大轮播图_小程序轮播图该怎么设计？
weixin_39802132的博客
11-27 346
当你要做一个微信小程序商城，如何把它做得尽量美观吸睛，是个很重要的问题。通常来说，小程序主页顶部一般是几张轮播图，展示重要产品、店铺信息、新活动等等。要想让小程序吸引人，你就需要好好设计小程序轮播图。如何实现轮播图功能？在「上线了」sxl.cn小程序制作平台，套用一个小程序模板，在“小程序设计-页面设计”里，你可以添加图片banner版块，选择轮播图类型，上传自己的轮播图图片。小程序轮播...
app轮播图尺寸大小_APP设计规范，图标尺寸大小，分辨率
weixin_33321740的博客
02-06 5110
还算有点全，继续收集。请翻到页面底部，surprise[1]各设备所对应的状态栏、导航栏、标签栏的高度下面两张图相对应：此图来源如图水印所示iOS iPhone各机型尺寸及导航栏高度​www.jianshu.com参考^蓝桥软件学院著...
ASP.NET微信公众号平台系统源码
03-12
1、本系统是微信公众平台系统，系统立意不在于完全开发完成，而是将微信核心的开发全部无保留的设计并编写完成。 2、对于开发者而言这套后台系统UI也是非常不错的一款，在二次开发扩展的时候只要将自己做的页面指向...
elementUI+froalaEditor实现仿微信公众号文章富文本编辑器
06-30
使用elementUI框架和froalaEditor编辑器，实现仿微信公众平台中公众号文章编辑功能，主要包括左侧文章列表和右侧内容编辑，使用时需要安装vue-froala-wysiwyg、jquery和font-awesome，安装方法见...
.NET微信公众号获取OpenID和用户信息
01-01
本文实例为大家分享了微信公众平台实现获取用户OpenID的方法，供大家参考，具体内容如下 Index.aspx.cs代码: public partial class Index : System.Web.UI.Page { //用户id public string openid = ; //公众号...
wechatDown 微信公众号文章下载-V20210120
01-20
- 自动获取微信公众号的参数 - 获取公众号所有历史文章列表 - 只获取公众号原创的文章列表 - 获取指定日期范围的公众号文章列表 - 批量下载获取的公众号文章，支持HTML和PDF格式 - 支持断点续传功能，增量下载 - ...
轮播图js怎么设置图片自适应大小
梁同学与Android
03-04 6871
单独的图片控制，用这个： 代码如下: <script> var abc=document.getElementById("abc"); var imgs=abc.getElementsByTagName("img"); for (var i=0,g;g=imgs[i];i++) { g.onload=function() { if (this.width>300) { t...
轮播图尺寸大小_拼多多开店主图和详情页尺寸多少，全面讲解
weixin_32228727的博客
01-12 6869
最近有很多朋友在问一个问题，那就是拼多多开店主图和详情页尺寸多少？大家在做主图的时候，可能还不太清楚这个主图和详情页的尺寸，针对大家的这个问题，圣多小编现在就给大家进行一个全面的讲解，希望可以帮助大家，解决大家的问题。　　一、主图尺寸　　拼多多主图尺寸是750*352px，图片大小在100KB以内，如果大小超过100KB，就无法上传。在设计主图的时候，质量一定要好，高清，不能出现模糊，主图的质量直...
bootstrap 轮播图实现大小自适应
baidu1023737029的博客
11-20 2万+
当轮播图的大小不统一时，此方法能保持图片原来的宽高比例，但是会出现留白， 代码如下： 1、引入所需的css 文件和js文件 2、                                      其中：.banner{          background-size:contain;  
bootstrap轮播图大小_这样运营轮播图可以增加订单
weixin_29603489的博客
12-18 522
我们都说脸面代表个人名片，那么在小程序中，轮播图就是店铺的脸面，当我们打开网站、APP、小程序等应用的首页，首先映入眼帘的就是轮播图。那么作为店铺脸面的轮播图有什么作用呢？本周我们一起来看看。轮播图是什么轮播图，或称banner图、广告图、焦点图、滑片。它是一个模块或者说窗口，当我们打开网站、APP、小程序等应用的首页，首先映入眼帘的就是轮播图。网站轮播图APP轮播图小程序轮播图通过电脑上鼠标点击...
公众号推送长图最佳尺寸_微信公众平台图片尺寸是多少
热门推荐
weixin_42395171的博客
12-30 3万+
展开全部微信公众平台图片尺寸要求为：e68a8432313133353236313431303231363533313333656663301、封面图片:一级为900像素x500像素(宽x高)，二级图片为200x200像素，格式为jpg,png,gif，文件大小5M以内。上传后会自动压缩到宽640像素。2、正文里图片：官方没具体尺寸限制，一般宽度设为900像素，高度任意，格式和文件大小同封面图片，...
网页常见百分百自适应宽度轮播图的一种做法解析！
weixin_41993525的博客
06-18 5123
网页大屏轮播图随处可见，使用非常广泛，并且分各种不同类型，有的是居于页面中间固定宽度；有的是百分比宽，能够自适应各种媒介设备。从观感级别上看，毋庸置疑是百分比宽的轮播屏更耐看高级。 这里讲一种百分百自适应宽度轮播平的代码案例。 如图所示，轮播图是从右向左滑动过去，带有一定过渡效果，并且无论如何缩放浏览器，轮播图始终百分百宽占满屏幕。 let index = 0; let imgItem = document.getElementsByClassName('swiper-item');
轮播图 宽度自适应，可视区域小于1920时，图片水平居中
turbman的博客
09-22 6585
img100%宽度，最小宽度1920，浏览器可视宽度小于1920时让图片水平居中涉及的知识点：jq 获得可视区域宽度：$(window).width()， jq窗口检测事件：$(window).resize(function(){/*要修改的代码*/}) css部分 *{margin:0;padding:0} img{ vertical-align:middle; }
element-ui轮播图片
最新发布
03-28
Element-UI是一套基于Vue.js的组件库，其中包含了丰富的UI组件，包括轮播图组件。Element-UI的轮播图组件可以用于展示多张图片，并支持自动播放和手动切换图片等功能。 要使用Element-UI的轮播图组件，首先需要在项目中引入Element-UI库，并按照官方文档的指引进行安装和配置。然后，在需要使用轮播图的页面中，可以通过以下代码来创建一个简单的轮播图： ``` <template> <el-carousel :interval="4000"> <el-carousel-item v-for="(item, index) in carouselItems" :key="index"> <img :src="item.imageUrl" alt=""> </el-carousel-item> </el-carousel> </template> <script> export default { data() { return { carouselItems: [ { imageUrl: '图片1的URL' }, { imageUrl: '图片2的URL' }, { imageUrl: '图片3的URL' }, ] }; } }; </script> ``` 在上述代码中，`el-carousel`是轮播图的容器，通过设置`:interval`属性可以控制轮播图的切换间隔时间（单位为毫秒）。`el-carousel-item`是每个轮播项，通过`v-for`指令遍历`carouselItems`数组来生成多个轮播项。在每个轮播项中，可以使用`<img>`标签来展示图片，通过`:src`属性绑定图片的URL。 以上是一个简单的Element-UI轮播图的示例，你可以根据自己的需求进行进一步的定制和样式调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Coisini_甜柚か

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值