西安公司网站设计的规范和要求详解

<p> 不同网站设计，不同的类型，不要的要求，但是对于企业网站或者公司网站的设计制作来说，一般整理的规范和要求是一致的，除非始于一些不同行业，不同类型的公司的网站来说，在<a href="http://www.jiaruide.net" target="_blank"><strong>西安网站设计</strong></a>，网站制作层面有很大的差异的，另外作为网站来说，不同的网站制作公司对网站的理解和设计规划方面存在很大的差异，这就不同的网站制作公司制作出来的网站大大不同的，原因就在只此，接下来我们来听听<a href="http://www.jiaruide.net" target="_blank"><strong>西安网站设计公司</strong></a>的是怎么看待这个问题的 </p> <h3> <strong>公司网站设计制作全局规范和要求</strong> </h3> 一、页面布局<br /> 页面布局是企业网站设计的核心，需要进行有效的规划。一个好的页面布局不仅能提高用户的使用体验，还能使页面信息更加有序、易读。以下是一些页面布局要求：<br /> 1.简洁明了<br /> 企业网站页面应该尽量简洁，只保留必要的信息，而不是无谓的装饰和内容。页面布局应该符合人性化的习惯，让用户能够快速找到所需信息。<br /> 2.易于导航<br /> 企业网站应该具有简单的导航条，便于用户进行跳转。导航条不能过于复杂，需要明确的标注当前所在位置。<br /> 3.排版合理<br /> 企业网站的排版需要考虑字体、字号、颜色搭配等各方面因素。标题应该简洁明了、易于辨认，正文应该是简洁通俗易懂的语言，段落之间需要空行，以便增加空气感和阅读舒适度。<br /> 二、颜色搭配<br /> 颜色是构成网页的基本元素之一，恰当的使用能够增强网页的设计感和美感。对于企业网站而言，颜色的搭配更需注意以下几点：<br /> 1.以品牌色为主<br /> 企业网站的主色调应以品牌色为主，以便更好地传递企业形象。品牌色对企业影响很大，因此应注重品牌色的贯彻，以更好地展示企业形象。<br /> 2.不要使用太多颜色<br /> 企业网站不应使用过多的颜色，过多的颜色反而会对用户产生视觉疲劳，影响信息的传递。<br /> 3.保持统一<br /> 企业网站的颜色搭配应该保持统一，以保证整个网站的风格协调。这样可以使企业网站更加专业、稳重。<br /> 三、内容呈现<br /> 企业网站的内容呈现是影响用户访问体验的一个重要部分，需要遵循以下几个要求：<br /> 1.简洁明了<br /> 企业网站需要在内容呈现方面保持简单清晰的定位，讲述内容时不能太过花哨，过于华丽的语言或者过多的修饰会影响用户的阅读体验。<br /> 2.内容即王<br /> 内容是企业网站最重要的基础，企业网站所要展示的内容需要体现企业的文化氛围和品牌形象。企业网站的内容所涵盖的领域应该尽可能地广泛，从企业简介、产品介绍、新闻动态、服务文化、联系方式等方面进行呈现。<br /> 3.移动适配<br /> 当前，移动设备用户日益增多，因此企业网站的内容呈现还要考虑移动端适配。企业网站在做移动适配时要合理布局、保证简洁易读，让用户能够方便快捷地访问企业网站。<br /> <h3> <a href="http://www.jiaruide.net" target="_blank"><strong>西安公司网站设计</strong></a><strong>规划规范</strong> </h3> 1、每个页面上没有太多链接<br /> 确保每个网页上没有太多链接。太多的内容很容易分散网页的重量。 在链接数量的问题上，不要过度追求数量。 一切都基于网站推广的原则。<br /> 2、向用户提供一个站点地图文件，其中包含指向网站重要页面的链接<br /> 为确保站点促销具有站点地图文件，它包含两个xml格式和html格式的地图文件。 以xml格式创建地图文件时，请注意每个地图文件中的链接数不得超过50,000。 如果链接很多，则可以创建多个站点地图文件。 创建站点地图文件后，您可以将其提交给搜索引擎。 例如，您可以在百度网站管理员平台或Google管理员工具上提交它。<br /> 3、尽可能使用静态URL。 使用动态URL时，应将参数较小化<br /> 尽管搜索引擎可以正常爬网静态和动态URL，但是静态URL仍然具有某些优势。 当您要使用动态URL时，URL应该尽可能简短和描述性强，并且不包含太多参数。<br /> 4、网站应务实且内容丰富，网页文字应清晰准确地描述要交流的内容<br /> 搜索引擎越来越重视网页的促销内容。 可以提供丰富实用内容的网站越来越受到在线营销搜索引擎的青睐。 在网页中，图片和文字可用于丰富网页的内容。<br /> 5、考虑用户将使用哪些词来查找您的网页，并确保该站点实际上包含文本<br /> 在编写网页内容时，您应该从网站用户的角度出发编写更多内容，考虑用户将使用哪种语言，并尝试尽可能满足用户的需求，并且可以基于以下内容构建关键字词库 词库中的关键字。 推广网站的内容以组织网页的内容，并确保每个页面都有用户想要使用的潜在搜索词。<br /> 6、检查网页上是否有无效链接，以确保可以正常打开每个网页，并确保网页HMTL语言正确<br /> 我们可以使用W3C工具来检查网页的内容是否符合标准格式，例如是否存在打开的HTML标签。 我们要经常使用无效链接检查工具来检查网站。 例如，我们可以使用XENU工具检查网站上的无效链接。 由Google管理在该工具中，搜寻器还将提供搜寻错误信息。 一旦发现问题，就要立即解决网络营销中的死链接问题。<br /> 7、网站应具有清晰的层次结构和文本链接，以确保至少应通过静态文本链接打开每个网页。<br /> 在网站设计中，网站树结构的优化是重要的环节。 甚至许多大型网站都有SEO架构师之类的职位。 网站推广的层次结构应清晰，目录层次结构的设置不得超过三层，对于每个网页，至少应通过静态文本链接打开，并应放置网站的内部链接 以确保搜索引擎蜘蛛可以正常爬网。<br /> 8、尝试使用文本而不是图片来显示重要的名称，内容或链接<br /> 搜索引擎搜寻器无法识别图片中包含的文本。如果要将图像用于文本内容，请考虑使用“ ALT”属性来包含一些描述性的网站促销文本。 例如，许多网站管理员经常使用图片显示导航内容，以使导航非常令人眼花撩乱。 实际上，使用图片远比使用文本锚文本差。<br /> <h3> <a href="http://www.jiaruide.net" target="_blank"><strong>西安公司网页设计</strong></a><strong>时用色规范</strong> </h3> 1．色彩风格设计.<br /> 网站的色彩风格往往是给人的第眼感觉，因此尤为重要。在确保网站风格独特和排他性的同时，尽量向企业的特点和企业色靠拢。下图是一个绿色能源公司的网站，在用色上体现了公司的性质。<br /> 2．版面布局设计.<br /> 网站的版面布局是多种多样的，例如厂型布局、同型布局等等。设计师要把握网站的整体感，网站不能给人以零散的感觉，同时设计师还要把握板块之间的衔接，比如使用渐变和不同色块来联系和区分板块，同时给人以层次感。下图是lNG集团网站首页，版面布局简单大方。<br /> 3．图形与图像的使用.<br /> 图形和图像有双重的属性，是信息的传递元素又是页面的修饰元素。所以用好它们非常重要。图形的使用要注意统一性，比如使用同一体系的标识图案等。图像的选择首先要符合表现的内容，比如一张表示数据库服务的图像，我们要从图库里去寻找一些数字类的科技图像，其次图像的颜色方面要注意同页面风格和其他页面元素的搭配。下图所示的网站均使用了圆角图像，破除了版面均是直角的死板。<br /> 4．文字和标题.<br /> 尽量使网页易于阅读，除了分栏之外(将页面纵向分割)，也需要利用标题和副标题将文档分段。为所有标题和副标题设置同一字体，并将标题字体加大一号，所有标题和副标题都采用粗体，这样便于识别标题(字体加大加粗)和副标题(粗体，与正文字体大小相同)，使浏览者一眼就可以看到重点，以便找出感兴趣的内容并继续阅读。标题的重要性可见一斑，要认真写好每个标题。下图所示的网站在文字和标题上全部统一，界面显得整齐干净。<br /> 5．动画.<br /> 动画可以表达更多的内容，同时增加页面感染力，但是为了提高商务型网站打开速度，建议尽量少使用动画元素。<br /> <h3> <strong>公司网站设计制作具体细节规范和要求</strong> </h3> 1. 页面布局<br /> 统一尺寸<br /> 据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。<br /> 适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。<br /> 页面框架<br /> 页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。<br /> 栅格布局<br /> 栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。<br /> 需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。<br /> 谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。<br /> 尺寸设定<br /> 一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度&nbsp; 200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。<br /> 相对间隔<br /> 定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。<br /> 2. 标准色<br /> 颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。<br /> 品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。辅助色用于提示其他场景，比如成功、失败、警告、无效等。<br /> 中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。<br /> 其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。<br /> 3. 标准字<br /> 后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。<br /> 行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。<br /> 4. 图标<br /> 图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。<br /> 除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。<br /> 5. 按钮<br /> 按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。<br /> 按钮的交互状态包括默认、悬停、点击和不可用。<br /> 按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。<br /> 规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。<br /> 填充按钮之间间距最小为 10px。<br /> 6. 导航<br /> 导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。<br /> 各类导航中的字体大小可进行统一设定。<br /> 顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。<br /> 侧栏菜单为垂直导航菜单，可以内嵌子菜单。<br /> 下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。<br /> 步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。<br /> 分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。<br /> 面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。<br /> 徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。<br /> 7. 表单<br /> 表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。<br /> 字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合 PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。<br /> 输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。<br /> 输入框的尺寸可按照8的倍数进行设定，比如 24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为 30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为 20px，有错误提示时候竖向增加 10px 或横向显示在输入框右侧（预留出位置）。<br /> 表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体 14px，文字和左右两边边框的边距 10px。选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。<br /> 搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮 4px，内部文字 14px。<br /> 单选多选框尺寸 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。<br /> 开关按钮外框 40*20px，内部圆形 16*16px。<br /> 8. 表格<br /> 表格在后台产品 UI 设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。<br /> 表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。<br /> 表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。<br /> 行高<br /> 表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。<br /> 行数<br /> 表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。<br /> 列宽<br /> 列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「…」展示，鼠标悬停出现完整内容（比如详情、描述）。<br /> 列数<br /> 表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。<br /> 对齐方式<br /> 表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1 虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。<br /> 详情入口<br /> 表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。<br /> 9. 反馈<br /> 包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。<br /> 弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。<br /> 弹框<br /> 弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。<br /> 侧滑框<br /> 侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。<br /> 骨架屏<br /> 为某些特定数据提供数据加载等待时的占位图形组合。<br /> 全局提示<br /> 建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内。<br /> 警告提示<br /> 用不同颜色和样式展示需要关注的信息。<br /> 通知提醒<br /> 消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。<br /> 10. 缺省状态<br /> 绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。<br /> 11. 数据可视化<br /> 数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。<br /> 功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。<br />