广告门户类网站盈利方式与Banner图设计尺寸详解
简而言之，在用户阅读自己喜欢的信息后，他们应该继续吸引用户阅读其他信息或返回频道。底页原型图
4。广告
门户网站如何获利？
广告是货币化方法之一。网站的广告通常是负责操作需求的设计师的责任，但频道设计师和产品方设计师也可以完成。网站上常见的广告图形形式是。通常，它的尺寸很大，在网站中非常明显。因此，它不一定是外部广告，而是内部事件，建议信息等。
那么图片的大小是否固定？
答案是否定的。
宽度有两种类型：一个是全屏（）;另一个是基于安全距离的全尺寸（或）。
注意高度。通常，据信，基准用户屏幕，加上浏览器本身与插件和底部工具栏相等，网站剩下的一个屏幕的高度约为900px，因此无法做到很高，否则否则第一个屏幕信息将不够显示。
您可能会说，让用户下拉。
但是，在访问该网站的用户中，第二个屏幕的触及用户将比第一个屏幕少得多。换句话说，单击网站后，许多用户可能会跳跃或关闭。第一个屏幕上的信息确实很重要，而且每一英寸的土地都是有价值的。因此，我们的地区不应占据太大的区域，例如：的面积是。
因此，除了主页上庞大的广告空间外，网站还有哪些其他广告表格？
（1）对联广告
在门户网站上，我们经常看到在网站左右的安全区域之外，将有诸如沿屏幕滚动的“对联”之类的广告。它通常是广告内容，HTML5技术或Flash 生产的弹出广告将弹出中心。
这种广告通常合并出售，这意味着一旦您进入网站，您将完全轰炸，您不能忽略此广告的存在。此类广告点击以输入“主题”页面进行合作，这表明有许多地方需要设计师合作。
对联广告格式
（2）信息流广告
信息流广告是埋在信息流中的一种广告形式。该表格使用格式塔原理，用户将不自觉地阅读广告的内容，因为其表单与其他信息相同。例如：时刻和Zhihu都使用信息流广告。信息流广告的效果非常强烈，但是它们会牺牲某些用户体验。信息流广告的大小与信息流的大小相同。
Zhihu应用中信息流中的广告
以上简短地从广告形式中介绍了三种常见的网站广告形式。如果阅读需要时，我们会看到诸如CPM，PV和其他单词之类的单词是什么意思？
它们是广告的收费模型。
CPM意味着根据广告PV充电，CPS表示根据用户消耗收取充电，CPA表示根据用户注册号进行充电，CPC意味着根据用户点击付款。不同的充电模型还将设计以增强广告需要实现的目的。
5。
在网站的特定页面设计中，底部有一个区域。通常，颜色将比上面的内容区域深，因为该信息在逻辑层面是次要的。该区域的主要功能是版权通知，联系信息，友好链接，注册号和其他信息。设计时，您必须降级，并且不要使其特别明显。
技术原则
在研究项目之前，网页设计人员必须了解网页背后的技术原理。技术决定了哪些设计和交互是可能的，哪些是不可能的。同时，技术原理还决定了我们如何与前端工程师合作以完成一些复杂的互动。
实际上，过去，网络前端工程师和设计师是同一位置，称为网络艺术家。该位置需要完成视觉设计，并将页面制作到静态网页中，然后移交给以下链接。随着劳动力划分变得越来越细致，产生了两个工作：网页设计师和前端工程师。但是，没有技术限制，网页设计师无法设计。
让我们了解网站的基本存储原则。在计算机的C驱动器上保存一个名为logo.jpg的图片，然后在浏览器中打开此URL：c：\ logo.jpg
你看过什么？
是的，这是这张照片，这是网站的原则。网站的资源和文件存储在类似于我们的计算机的东西中，这就是服务器。我们使用域名来检索网络中的不同页面和文件。如果服务器关闭，则将瘫痪。
每当我们通过浏览器访问网站时，我们都会点击URL，域名将转向IP地址，这是服务器所在的门号。找到它后，我们的浏览器将从服务器下载网站的代码，并将代码转换为我们可以理解的接口。例如，文本，边框，表等实际上是代码的形式。
浏览器还将在网站上单独下载图片，视频等。当我们通过表单输入用户名和密码时，我们的信息将上传到服务器。服务器处理后（例如成功登录的信息），然后将其发送到我们的浏览器。
因此，当我们访问网站时，我们的计算机和浏览器必须通过多次与服务器握手。当然，旧的“握手”会导致加载速度放慢速度，因此我们的智能浏览器将缓存已经下载的资源以避免浪费。
这种机制是“”。浏览器将自动存储URL，网站图片，视频，表单信息等。
基于鼠标的手势操作
1。基于鼠标的交互
在不久的将来，个人计算机可以通过多点触摸，语音交互等与我们互动，但是网站设计的最主流交互方法仍然是鼠标和键盘。
让我们看看鼠标的结构是什么！
我们对鼠标的使用无非是四种方法：移动，左键，右键和拖动。我们在页面上的大多数操作都是通过单击左鼠标按钮来完成的，因此网页也是单击的艺术。右键单击通常会唤起右键单击菜单，但是许多网站和Web应用程序还将自定义右键单击以设计某些操作和交互的右键。鼠标之间的主要交互是超链接和按钮。
因此，让我们了解超链接的四个状态：（前端术语是：超链接标签的四个伪级CSS）。
按钮和文字的不同状态
相同的链接样式也可以应用于图片，按钮和表单上。点击，悬停和鼠标按下可以设计成不同的样式，以便用户可以感觉到我通过鼠标按下我的对象。用户提示也称为“点击sense”。
当然，该按钮将与链接略有不同。除了正常和鼠标悬停状态外，该按钮还具有称为“不可锁定”的状态。此状态将按钮呈灰色，提示用户无法单击此功能，因为条件不符合它。
2。静态网页
了解基本的技术背景和鼠标互动后，让我们谈谈真实的事情。
我们通常看到的网页是静态网页。静态网页由HTML编辑。我们在服务器上存储的网页代码基本上以HTML格式为单位。
HTML的全名是超文本标记语言。 “超文本”是指该语言可以包含文本元素和非文本元素，例如调用图片，链接，音乐等。HTML语言可能是没有编程的人的头痛，但它已经是所有编程代码中最简单的一项他们。
不要紧张，您可以将其视为摩尔代码，它是服务器和浏览器之间的秘密语言，浏览器将这些秘密语言转化为我们可以理解的颜色和链接。
那么，如果我们在HTML中写了一段文字段落会是什么样？
模拟代码汇编过程
没错，该代码是一点编译的。在网站的任何空白空间中，右键单击查看网页源代码，您可以看到网页的HTML代码。
HTML此代码由国际组织W3C发布和维护。 W3C成立于1994年，是一个用于网站的国际中立技术标准组织。 W3C发布了许多版本的HTML，这是HTML4版本中最深远的角色，而HTML5（缩写为H5）可以说是一个划时的版本。
H5标签更接近现代，可以单独播放视频，这可以消除Flash插件。 （Flash插件带来了系统漏洞和加载速度缓慢等问题）同时，H5很好地支持了许多平台，因此它适应了当前移动终端为KING的时代。
H5甚至可以变成各种形式，例如游戏，例如Blue Lake等网页上的本地程序，例如Blue Lake等和多媒体。但是，由于不支持HTML5效果的IE浏览器之类的浏览器占用户比例很高，因此它对HTML5的开发产生了限制。
浏览器可以理解为代码读取器。由于它在翻译HTML5代码方面的运行不佳，因此会导致所谓的“兼容性”问题。例如：在HTML5中，您可以通过代码向DIV添加一个投影，因此无法在某些浏览器中显示此效果。
不难理解为什么程序员与我讨厌的IE一起穿T恤。每次完成网站项目时，测试工程师都会使用Opera，IE，Edge和其他浏览器来测试网站的兼容性。性行为，通常会给前端工程师头痛。
由于代码会移动并拉动整个身体，因此通常更好，这将行不通。但是，此问题也有一些解决方案，例如减少对用户共享低的浏览器的支持，并分别为不容易执行的浏览器加载特定的适应代码。高一英尺。
3。其他前端语言
借助HTML框架，图片和多媒体，网站的开发速度甚至更快。但是，服务器非常有损，所有用户都需要反复将代码和图像等资源下载到服务器上，以进行“握手”。此外，重复许多HTML代码，导致浪费资源。例如：如果我的网站的头为黄色并且链接是蓝色的，那么每个页面都会说这几个代码。
该问题通过全新的代码即将解决 -CSS技术。
CSS是指级联样式表，我们可以将其理解为网站样式（颜色，大小，位置和其他样式信息）。也就是说，CSS和网站的内容（文本，图片，链接等）。也就是说，如果HTML完全分开，并且网站可以下载CSS，然后在不同页面上检索CSS Cache，则可以节省服务器资源。
此外，由于网站需要一些交互式效果，例如点击效果和菜单效果，因此前端工程师需要使用Javas脚本代码进行配合。 Javas脚本是一种相对简短而简洁的语言，很容易构建一些基于浏览器的特殊效果。
因此，当前的主流网站配置是HTML5+CSS3+JS代码的组合。当然，为了与那些低端浏览器兼容，它也可以使用HTML4+CSS+JS软件包，这取决于我们的主要目标用户组使用了哪种浏览。用具。
当然，我并不是要您学习HTML，CSS，JS代码，然后进行前端开发，因为现代互联网公司已经有专业的前端工程师。我们理解这些主要是为了了解前端工程师的工作，以便更好地与他们合作。
主流形式：HTML + CSS + JS
4。动态网页
了解静态网页还不够，所以让我们谈谈网站如何移动。动态网页并不意味着它们具有疯狂的酷动画，但是动态网页会随着时间，内容和数据库调用生成动态网页。
例如：我今天看到的新闻网站肯定与昨天的新闻有所不同，但是主页上的HTML代码不需要人们的手动修改，但是让编辑器输入新闻并通过后台上传图片。上传背景过程时，编辑器将输入数据库，而动态网页是回忆数据库内容以显示给用户的一种形式。
动态网页会随时从数据库中检索信息，对于用户，静态网页和动态网页似乎看起来相同。然后，判断最愚蠢的方式是查看URL的结尾。静态网页以HTML或HTM结尾，而动态网页则使用高级Web编程技术，而结束是ASP，PHP，JSP，等。
ASP，PHP，JSP，ASPX和CGI都是动态的网页语言。当然，有时会使用伪静态结构来提高网站的效率。结局与静态网页一致，但实际上，它将在用户访问之前调用。获取数据库。
同时，动态网页的URL将具有一个特征，其中包含符号。最受欢迎的动态语言是PHP，较早和稀有的语言是ASP和CGI，最安全的是JSP，因此许多银行使用JSP来编译。
了解这些内容后，我们将基本上找出网站的运行原则。
主流背景编译语言：PHP ASP JSP CGI
5。精灵图片
我们经常在网站上看到动画，因此动画实现的原理通常如下：
那么，像主页这样的动画如何实现？
该技术称为：图片。 CSS 是CSS，也称为CSS精灵。这是CSS图像合并技术。它称为自己的图像自己支持多级透明的PNG格式，然后并排安排动画。
例如：如果卡通字符的宽度为每帧100px，则将其动作1，动作2，动作3，动作4并排放置在PNG图片中，宽度为400px。然后，该代码在100px宽度框中调用此png，然后我们看到了动作1，然后在第二秒钟后，代码将悄悄地移动100px，我们看到了动作2。由于速度，我们看到了连续动画的速度很快。
精灵图片也有自己的缺点。如果帧数太大，它将消耗大量内存，因此必须减少控制帧数。如果您的操作是使用12帧设计的，那么我建议您尝试删除2、4、6、8、10，并保留一半的动作。
精灵图片
6。视差滚动
视差滚动是一种设计效果，具有不同的移动速率，可以实现空间感。例如，密尔沃基警察局的官方网站已广泛使用视差滚动效果。
实现原则是代码确定网页滚动。滚动时，页面中三层图片的运动率和位移距离不同。这为人们创造的视觉体验就像我们在物理现实中看到的空间感一样。
视差滚动不再是高科技技术。如果您的网站更适合视差滚动，请大胆地设计并与前端工程师提出要求。我相信前端工程师可以满足您的要求。我们需要准备的是一个具有不同运动速率的分层静态PSD文件。 。
密尔沃基警察局的官方网站使用视差滚动效果（）
网页设计规范
最后，在经历了网站的原理和组件之后，我们将讨论网站设计的规格。网站设计没有特定平台的特定样式，也没有必须设计的系统级导航栏和工具栏。因此，网站设计更加灵活，但是由于它太灵活，它将使我们的设计师无法启动。
然后，我将介绍网站设计的规格，您可以在工作时参考。请注意，在设计之前，请确保与前端大小，字体，互动等进行通信。我们使用，以便在后期不会有误解。
1。图片板尺寸
由于网页的大小与用户的屏幕有关，因此很难计数用户屏幕的类型。因此，我们的设计草案只能集中在主流用户的分辨率上，而其他决议可以以适当的方式解决。
网站最新版本中的Web预设尺寸给了我们一些灵感： Sized（），大型网页（），最小尺寸（），pro13（），pro15（），imac 27（）等。这些都是主流尺寸，我们建议在构建网站时在主流分辨率上设计它们。
因此，当我们设计网站时，网站的宽度约为每个屏幕高度900％。
为什么要900px？
因为1080还需要减去浏览器头和底部高度，因此约为900px。内容安全区为（或/）。以这种尺寸设计的是相对标准的。当然，您需要在设计网页之前知道前端设计维度，因为它们在适应方法和随后的合作中有更多发言权。
网站的尺寸规格
2。文本规格
我们都知道，网站上的文本通过前端工程师在代码中重写。该文本在浏览器上的渲染与系统和浏览器有关，例如：在Apple计算机上看到的文本效果和系统您在计算机上看到的文本不同。苹果会呈现文本，文本几乎充满了像素粒子。
根据用户比例，用户无疑是主流，因此，尽管我们可以使用Apple计算机设计网页，但设计的网页的效果也应与显示器一致。否则，在设计精美的设计草案之后，程序员将无法将其恢复到我们设计的方式。
另外，字体的大小也非常重要。网页的显示区域确定文本不能太大。在网站设计中，我们的文本大小通常为12-20像素。
为什么不小于12px？
因为如果中文小于12像素，则不可能放置复杂的笔触，并且奇怪的文本表达式和适应性不容易做到，也就是说，我们必须使用偶数字体的大小来设计。
因此，总而言之，文本以歌曲字体为单位，大小为12px，并且渲染方法被选为无。稍大的字体使用Black，大小为14-20px，渲染方法是LCD或锋利的。此外，英语和数字需要ARIAL字体，并且它们都不用于渲染方法。
网站字体规格
3。图片规格
网站设计中常用的图片为4（宽度）：3（高度），16（宽度）：9（高度），1：1和其他比率。对于特定的图像大小没有固定的要求，但是整数甚至数字都更好，主要是考虑一些适应问题。作为内容中出现的图片，必须需要简介信息和排序信息。
图片有许多格式，例如支持多级透明的PNG格式，具有非常小的图像文件的JPG格式，支持透明/不透明度和动画的GIF格式等。确保图像清晰度，较小的图像文件大小越好。如何使网页上使用的图像较小？
因此，前端工程师可以将网页中使用的图片拼写成大型PNG。然后每个调用图片的元素调用图片，然后分别移动一点，并且显示的区域移动到大图中所需的图像。
在线压缩工具网站
4。按钮
在过去的十年中，按钮的样式发生了巨大的变化，从一开始就从“倾斜和浮雕”风格过渡到以后的“形而上学风格”，现在平坦的风格更加受欢迎。如果按钮在图片中，为了不影响图片的美学，将删除填充物，仅保留边框。此设计方法称为“幽灵”按钮。请注意使用鼠标悬停和紧迫状态设计按钮。
不同时代的不同按钮样式
5。形式
在网站设计中，我们通常需要使用一些输入框，下拉菜单，弹出窗口，无线电框，复选框，编辑器等。这些是系统级控件，通常是通过调用系统直接设计的。但是，系统设计有时无法满足我们的要求。内置表单不够高，单击不舒服，并且不符合网站整体设计的品牌感。
然后，我们可以通过CSS向这些表格添加样式，包括颜色，大小，内部和外边缘等，因此，当我们遇到涉及表单的需求时，我们还可以自定义设计。
设计不同样式的UIDE套件的设计
6。网格
我们将整个宽度定义为W，然后将整个宽度分为多个等单元A，每个单元A具有元素A和间距i。因此它们之间的关系是（a×n）-i = w。
当然，每个应用程序的大小可以分为一个网格，这取决于我们内容布局的密度。之后，我们添加了太多内容网格和另一个网格，以获得更大的布局空间。其他元素必须保存在自己的网格中，这将完成非常科学的布局设计。 。
例如：如果网页宽度为：我们可以使用：
如果网页宽度为990px，我们可以使用：
如果网页宽度为980px，我们可以使用：
网格系统具有以下优点，可以大大提高网页的标准化。
在网格系统下，页面上的所有组件都有常规的尺寸。此外，基于网格的设计可以使整个网站的每个页面的布局保持一致。这可以增加页面的相似性并改善用户体验。
网站的栅格化将使网站看起来更加有序
7。适应屏幕
2012年，苹果发布了专业人士，屏幕的计算机份额越来越高。简而言之，屏幕密度是传统屏幕的两倍，并且具有更大的清晰度。它甚至可以符合对我们的视网膜的最高认可，因此也称为视网膜屏幕。
这种设计的网站设计的屏幕下方约有1,000像素的安全距离看起来很粗糙，因此，如果我们现在在屏幕下显示一个区域，我们实际上需要在前端提供图片，因为屏幕是一个指向两个像素过去。
因此，我们的用户是视网膜中具有更多屏幕与体型比率的用户，例如：设计师，我们如何考虑高清屏幕和普通屏幕？
首先，我们需要将设计草案作为视网膜屏幕的大小完成，建议将其是传统设计草案的两倍。然后切出两组剪裁（如果非屏幕用户也加载了双尺寸资源，它将非常慢）。普通剪辑称为logo.jpg，剪切名为logo@2x.jpg。前端使用代码来识别它。如果屏幕为，它将加载双重大小，如果没有加载，它将加载正常大小。可以使用.js（）提供的技术来识别前端。
8。自适应和响应式网站
我们已经看到，在浏览计算机，手机甚至iPad时，有些网站具有非常好的经验，这要求我们为了使用用户体验来适应或响应性地布局。响应能力和适应原则相似。两者都通过代码检测设备屏幕宽度，并根据不同的设备加载不同的CSS。
（1）自适应网站
自适应网站的设计草案是一致的，但是设计草案需要考虑屏幕更改为较小屏幕的方式。例如，如果网站的内容具有5个块和4个间隔，那么如果宽度降低到900，则如何更改？这是自适应布局。例如：和其他网站采用自适应布局。 ：
（2）响应式网站
响应式网站需要设计不同版本的设计草案，然后根据不同的设备提供不同的CSS样式。例如：确定设备的宽度为750px，然后该网站知道您已经使用手机访问它，并将导入仅在手机中可用的样式。如果是计算机的宽度，请导入计算机的CSS样式。
对于设计师而言，改编需要考虑在不同设备宽度下网站的分隔和布局；响应性需要设计至少三组设计草案，例如计算机，平板电脑和手机（但这三组设计草案的内容是相同的）。
简而言之，自适应和响应能力是网站为适应用户体验的浏览设备所做的努力。
9。适应规格
手机：适应移动页面时，我们通常认为帆布标准。原因是显示相对清晰，要求很高。此外，用户拥有也很高。适应时，我们通常专注于尺寸，然后将网站导航更改为移动应用程序中经常使用的汉堡 +抽屉导航。
同时，网站中的按钮需要将其转换为我们在左和右应用中看到的按钮，并且每个按钮应大于88px，这对于手指单击很方便。在字体上，我们需要将网站的所有字体更改为Apple字体，并将字体大小设置为24px或更高版本，并将渲染方法设置为Sharp，用英语，我们需要使用SF-UI。
也就是说，将网站更改为应用程序的移动网页，以确保良好的移动用户体验。如果用户使用手机，则前端代码将根据设计草案的设计来适度增加图片和间距，以适应屏幕。
iPad：iPad的大小为1024×768，等等。无论它如何变化，它基本上都与计算机屏幕尺寸相似，因此iPad上的浏览网页基本上很舒适。因此，许多网站不具体适应iPad。如果我们希望iPad用户更轻松地使用它，则可以使用文本大小（以上24px或更高），按钮大小（约88px及以上），交互式形式（抽屉导航和导航的方式与与同一方式相同的方式不包括在内）。从屏幕滚动开始）和其他方法。
不同设备要注意的东西
总结
无论您面对的项目是C或B网站产品，我们都应首先建立设计样式>查找设计材料>创建情绪板>完整的视觉草稿>切割图标>创建视觉规格>进行项目检查。
如果您为一般网站设计页面，则可以以1920 x的尺寸设计它。每个屏幕高度为900px，字体使用Song 12px None和 Yahei 14-20 LCD。尝试充满屏幕，但是图片需要以4：3或16：9的比例进行设计。
构建网站时，您可以创建一个网格，以更好地自适应和响应式布局。我们还需要为超链接和按钮设计不同的相应鼠标状态。此外，我们还可以尝试在网站设计中添加有趣的互动，例如视差滚动和精灵动画。
如果您在手机上设计页面，则可以根据大小进行设计。该字体比Apple 24px更清晰，并且英文字体使用SF UI。按钮和点击区域必须大于88px，以促进手指点击。头部需要为微信或浏览器保留导航区。
页:
[1]