网页设计师设计规范 第1篇
响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的 CSS 样式。比如判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式；如果是电脑的宽度就给你导入电脑的 CSS 样式。对于设计师来说，自适应需要考虑网站在不同设备宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿（但这三套设计稿的内容是一致的）。总之，自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力。
网页设计师设计规范 第2篇
① Banner 是什么呢？
② Banner 的作用是什么？
宣传、展示、广而告之，或者是能给企业、产品或者人带来相应的转化率。
③ Banner 由哪些部分组成呢？
主要是由文案、商品图或模特、背景图四项中的至少一项组成。
① 纯色背景
② 图案/渐变背景
③ 形状背景
④ 立体空间形状
⑤ 场景形式
⑥ 场景合成
构图：就是把各部分组合，配置并加以整理出一个艺术性比较高的画面
如果将一张脸比喻成一幅设计作品，五官便是其中的元素，而脸型则是构图之魂。
① 上下构图
② 左右构图
③ 文字居中
⑤ 三角构图
⑥ 斜线构图
① 左对齐
② 右对齐
③ 居中对齐
④ 矩形对齐
⑤ 圆形对齐
⑥ 三角对齐
网页设计师设计规范 第3篇
① 新建画布
② 页面尺寸：1000px * 768（内容区域）
1440 px 比较常用
1920 px 比较流行
2560 px 苹果 MAC 27 寸适用
③ 分辨率：72
④ 颜色：RGB 8 位
网页设计师设计规范 第4篇
下图显示了百度统计的主流分辨率的比例，我们可以获得主流PC的分辨率。
那么网页的设计尺寸规范之宽度应该如何选择呢？我们应该同时考虑固定宽度和自适应宽度。
定宽模式
定宽，内容区域的宽度固定。在定宽模式下，主流内容宽度为960px或1200px。根据不同的设计要求选择不同的宽度。有三种情况：
如果是针对特定显示屏设计的，例如仅针对1440*900px显示屏，则可以按照该宽度的设计标准进行设计。
如果你是为年轻人设计网站，基本上可以放弃低分辨率用户，按照1366px宽度的设计标准进行设计，内容宽度为1200px。
如果你想设计一个满足所有人需求的网站，你需要考虑1024px宽度的用户，内容宽度为960px。
自适应模式
自适应，内容区域宽度随浏览器变化。在这种模式下，可以使用1920px或更大的宽度进行设计，并且可以给出模块拉伸的方案。然后，给出了最小宽度效果及对策。
最小宽度效果：定义最小宽度并生成设计版本，以在极端情况下显示视觉效果。
超出对策：目前2k、4K显示屏越来越流行，应考虑超过1920px的对策，例如拉伸背景以填充屏幕。
首屏高度
为什么要确定第一个屏幕的高度？世界著名的网络可用性专家尼尔森曾报告称，第一屏的注意力为，第一屏下方的注意力仅为，这足以说明首屏的重要性。
综上所述，规范如下：
网页宽度应为1920px，高度不限。
有效可视区：960px~1200px宽度，具体尺寸根据项目，客户要求以及用户群决定；
首屏高约为700-750px；
主体内容区域1200px；
文档建立：文件宽度为1920px，高度不限，RGB颜色模式， 分辨率72。
Pixso提供基于设备（手机、平板电脑、Apple手表等）或画板（信纸、帖子、标题封面等）的帧尺寸预设，内置的三种网页尺寸也可以一键选用，在画布右侧的属性面板中可以找到所有这些设置。
Pixso的画板具有默认约束并且可以相互嵌套，它们更像是强大的组或div，而不仅仅是画板。Pixso的画板还有一些额外的属性，比如背景填充和多个矢量网格，它们还使你能够剪辑或取消剪辑嵌套内容。
在Pixso中创建画板也非常简单，使用快捷键“F”或位于移动工具栏的专用画板工具。
网页设计师设计规范 第5篇
① 页面布局：header、banner、main、footer
② 常用字体：宋体 - 无（12-14px），无版权，可以免费使用
微软雅黑 - 锐利（12-14px），有版权，商用要购买版权
③ 特殊字体：方正字体、汉仪字体（有版权，商用要购买版权）
④ 广告法禁用词汇：禁止使用 “国家级”、“最高级”、“最佳” 等用语
字体介绍
字体具有多种不同的风格，每种风格都适用于不同的场景和用途。以下是一些常见的字体风格及其适用场景的简要介绍：
① Regular（常规）：常规字体是字体家族中最基本和常见的风格。它适用于大多数正文文本和一般排版情况，也被称为普通字体或标准字体。
_Regular_ 字体风格通常具有中等的笔画粗细和一般的字形设计，没有特别的修饰或强调。它是字体家族中的默认样式，用于大部分正文文本和一般排版的情况。其他字体风格，如_bold_（粗体）、_italic_（斜体）和_light_（轻体），通常是基于 _regular_ 样式进行变化和扩展的。因此，当你选择一种 _regular_ 字体时，你会得到一种中等粗细的字体，适合在大多数正常文本场景中使用。
② Bold（粗体）：粗体字具有更加明显的笔画粗细，用于突出和强调文字内容。它通常用于标题、子标题、重要的关键词或需要引起注意的部分。
③ Italic（斜体）：斜体字具有文字向右倾斜的外观。它常用于强调特定文字、引述、书名、科学名称或外来语词汇。斜体字也可以用于添加一些倾斜和动态感觉。
④ Light（轻体）：轻体字较为细薄，通常用于辅助排版、注释、引用等较小的文字内容，或者在需要柔和、优雅的设计风格时使用。
⑤ Thin（细体）：细体字比轻体更加纤细，适用于特定的设计风格，如时尚、艺术或品牌标识等。
⑥ Black（黑体）：黑体字非常粗黑，用于需要极强视觉冲击力和醒目效果的场景，如大标题、标语、海报等。
⑦ Condensed（紧缩体）：紧缩字体具有较小的字符间距，用于在有限空间中显示更多文本内容，例如窄栏排版、标签、报纸标题等。
⑧ Extended（加宽体）：加宽字体具有较大的字符间距，用于强调宽敞、稳重或霸气的设计风格，例如大字标题、商标等。
⑨ Decorative（装饰性字体）：装饰性字体具有独特的造型和装饰元素，适用于特殊场合和创意设计，如节日活动、广告、标志等。
这些只是一些常见的字体风格示例，实际上还有许多其他独特的字体风格和变体可供选择，以满足不同的设计需求和品牌风格。选择合适的字体风格取决于文本内容、排版需求、品牌风格和目标受众等因素。
网页设计师设计规范 第6篇
中文常用字体：宋体-字体样式（无）、微软雅黑-字体样式（Windows LCD）、苹方（MAC）
英文常用字体：Times NewRoman、Arial、sans
中文字常用字号
导航文字大小：14px、16px、18px、20px；
正文内容：12px、14px；
标题：22px、24px、26px、28px、30px；
辅助信息：12px、14px；
英文字常用字号
标题和内容文字10-16px；中英文结合最小12px；全英文网站最小10px（比如底部信息）；
Pixso 内置了多个免费可商用的中文字体，例如思源黑体、站酷快乐体、江西拙楷体等，无需手动安装即可使用，应用到商业设计项目中无侵权风险。
如果Pixso的云端字体库不能满足你的需求，还可以安装「字体助手」，从本地导入电脑上安装的字体，给你的设计提供更多样化的选择。
网页设计师设计规范 第7篇
一个好的网页一定要有好的内容和布局形式，内容的设计一定要注意运用对称美、节奏美和留白等等。通过空间、文字、图形等之间的相互关系巧妙地建立整体的均衡状态，让之产生和谐的美感。
头部区域——top或header
Logo、主导航、搜索、注册、登录、版本等信息。
主视觉区——banner
展示公司品牌形象、新品宣传、主题活动等轮播大图。
主要内容区——main
新闻动态、产品与服务、公司介绍等。
底部信息区——footer
网站地图、联系我们、版权信息、ICP备案号等信息。
我们对Pixso社区中的主页进行拆分可得：
网页设计师设计规范 第8篇
网站设计中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳。主要是考虑到一些适配的问题。作为内容出现的图片一定需要有介绍信息和排序信息。图片的格式有很多，比如支持多级透明的 png 格式、图片文件很小的 jpg 格式、支持透明/不透明并且支持动画的 gif 格式等。
按钮的风格在过去的十几年发生了很大的变化，由一开始的「斜面与浮雕」风格过渡到后面的「拟物风格」，现在更流行的是扁平风格。如果按钮在一张图片中，为了不影响图片的美观性，会去掉填充只保留边框，这种设计方式叫做幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状态。
有些网站使用电脑端或者手机端甚至 iPad 去浏览时体验都非常好。这就需要为了用户体验而进行网站的自适应或响应式布局了。响应式与自适应的原理是相似的，都是通过代码检测设备屏幕宽度，根据不同的设备加载不同的 css。