PC端页面设计(B端页面设计规范)

编辑:语默 浏览: 5

导读:为帮助您更深入了解PC端页面设计(B端页面设计规范),小编撰写了PC端页面设计(B端页面设计规范),PC端页面设计(B端页面设计规范),WEB页面设计规范,PC端页面设计,手机页面设计尺寸规范,IPHONE6页面设计规范等6个相关主题的内容,以期从不同的视角,不同的观点深入阐释PC端页面设计(B端页面设计规范),希望能对您提供帮助。

hello大家好,今天小编来为大家解答以下的问题,PC端页面设计(B端页面设计规范),很多人还不知道,现在让我们一起来看看吧!

PC端页面设计(B端页面设计规范)

随着互联网的迅速发展,越来越多的企业开始意识到网站的重要性,而B端页面设计则是企业网站中至关重要的一环。B端页面设计是面向企业客户(商业用户)的网站设计,其目的是提供给客户一个高效、便捷的用户体验。

B端页面设计需要注重信息的呈现和导航的清晰。B端页面通常包含大量的信息,因此页面设计必须合理安排页面布局,确保重要信息能够直观明了地呈现给用户。导航栏的设置应该简洁明了,方便用户快速找到所需的信息,提高工作效率。

B端页面设计需要注重界面的整洁和美观。企业客户通常对页面设计的要求更高,因此设计师需要注重细节,避免页面过于拥挤和杂乱。色彩的运用也需要符合企业形象和氛围,通过色彩的搭配来提升页面的美感。

B端页面设计需要注重页面的响应式布局。不同的企业客户使用的设备和浏览器都有所不同,因此需要确保页面能够适应不同的屏幕尺寸和浏览器。响应式布局可以提供更好的用户体验,不论用户使用的是台式机、笔记本还是平板,页面都能够自适应屏幕尺寸,确保内容和布局的完整性。

B端页面设计需要注重交互的友好性。企业客户使用网站的目的通常是为了完成一些特定的任务,因此页面设计应该尽量简化操作流程,减少用户的操作次数。提供友好的错误提示和帮助文档也是必要的,方便用户在使用过程中遇到问题时能够快速得到解决。

B端页面设计是企业网站中非常重要的一部分,通过注重信息的呈现和导航的清晰、界面的整洁和美观、页面的响应式布局以及交互的友好性,可以提供给用户一个高效、便捷的用户体验。只有不断提升B端页面设计的质量,才能赢得企业客户的信任与支持,从而提升企业在市场竞争中的竞争力。

PC端页面设计(B端页面设计规范)

感谢作者 : Arche阿北 后台产品设计规范 以下数值为参考,请结合特定产品灵活运用。1. 页面布局统一尺寸 据统计,目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900,以 1440 来设计的话,向上适配或者向下适配误差会比较小。适配方案:面向多个客户,后台产品设计功能型页面的尺寸统一为 1440*900,按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主,同时设计出极端情况(宽度为 1280 以及宽度为 1920)的效果图,力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统,由于各个职工电脑屏幕是统一采购、统一尺寸,所以开发适配的分辨率可以统一尺寸进行设计,这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可(提前和前端沟通好)。页面框架 页面框架主要分为左右栏布局和上下栏布局,还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域,其中顶部菜单栏、左侧菜单栏为固定结构,右侧主体内容根据分辨率进行动态缩放;上下栏布局包括顶部菜单栏和主体内容两大区域,其中顶部菜单栏为固定结构,主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值;左右栏布局时,左侧菜单可收缩展开,收缩状态下固定宽度。栅格布局 栅格系统的使用是为了解决自适应和响应式问题,从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现,以满足 2,3,4,5,6 分比布局等多种情况。固定宽度 Column,将间隔 Gutter 进行动态缩放。需要栅格化处理的内容的总宽度=23列(1列=1宽度Column+1间隔Gutter)+1宽度Column=24宽度Column+23间隔Gutter。谷歌规定模块和结构之间要以 8px 为基准,布局间相对间距可采用 8px 以及 8 的倍数,但一些小组件(按钮、间隔、输入框)可以以 4 为基准。栅格布局是为了辅助设计,灵活运用,不要被它所局限。尺寸设定 一般在整体区域左上角放置产品 LOGO 及产品名称,大部分系统顶部栏高度 48+8n,侧边栏宽度 200+8n。我常用的是顶部栏高度 56px,侧边栏宽度 200px,侧边栏收缩状态宽度 56px,右侧的侧浮窗宽度 400px。相对间隔 定义主体内容的上下左右边距,定义主体区域内各模块的边距及安全宽度,超出内容区域的部分采用区域内滚动或整屏滚动,视情况固定导航栏。2. 标准色颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求,可能也会将统计图、标签等进行统一标准色设定。品牌色即产品主色,产品主色的设定直接影响产品气质和直观感受,也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取,尽量做好色彩的延伸性,可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。辅助色用于提示其他场景,比如成功、失败、警告、无效等。中性色常用于文本、背景、边框、分割线等,需要考虑深色背景和浅色背景的差异,可以选择同一色相控制透明度变化,用来表现不同的层级结构。其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。3. 标准字后台系统常用的字体:windows 系统,中文 Microsoft YaHei,英文 Arial;Mac 字体,中文 PingFang SC,英文 Helvetica;除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。行高设定,根据文字大小及使用场景设置行高,一般行高=文字大小+6px/8px。4. 图标图标是 UI 设计中重要组成部分,一般分为功能图标和应用图标,以图形的方式传达概念,可以降低理解成本,使得界面更加协调美观。在后台产品中,图标的功能则更偏向辅助性,辅助用户对功能的认识。除了某些常用的图标,有一些专业性的操作和词汇则需要设计师进行绘制,现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制,画板 1024*1024,提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展,绘制完成后生成 svg 格式文件,提交到阿里巴巴矢量图标库的项目组里,方便前端调用,调整大小和颜色更为方便,且能够优化系统内存和性能。5. 按钮按钮是后台产品进行交互设计是重要元素,提供给用户进行点击操作,是视觉上最引人注目的控件,具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。按钮的交互状态包括默认、悬停、点击和不可用。按钮根据需求分为不同尺寸,大中小三个级别用在不同的场景,一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。规范整理时要规定不同类型按钮的宽高、圆角及文字大小,同时还要将按钮的不同状态展现出来。填充按钮之间间距最小为 10px。6. 导航导航的类型有很多种,常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。各类导航中的字体大小可进行统一设定。顶栏菜单多为一级菜单,点击切换,或作为下拉菜单的父级,将子级菜单合理分类。侧栏菜单为垂直导航菜单,可以内嵌子菜单。下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。步骤条引导用户按照流程来完成任务,一般步骤不得少于两步。分页的高度设定为 24px、30px、32px,根据应用场景适当增减内容,比如设定每页展示数据的条数、跳转至指定页等。面包屑用于说明层级结构,使用户明确当前所在位置,并且可以回到任一上级页面。徽标数用来通知用户当前有未读消息,一般出现在图标的右上角或者跟在文字后面。7. 表单表单多由一条或多条列表项组成,单一列表项的类型有字段输入框、条件选择器。字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式,比较适合 PC 端的使用;上下分布增加了表单的整体高度,视情况选择使用;无标题经常应用在登录注册,虽然减少了面积,但是增加了理解难度。输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。输入框的尺寸可按照8的倍数进行设定,比如 24px、32px,也可根据系统实际情况进行设定,我常用的输入框高度为 30px,宽度视情况而定,无圆角。上下布局的多个输入框上下间距为 20px,有错误提示时候竖向增加 10px 或横向显示在输入框右侧(预留出位置)。表单中标题文字左对齐,输入框左对齐,标题文字距离输入框20px(多个长度不同的输入框算最长的);标题文字右对齐,输入框左对齐,也是常用的方式。输入框内正文字体 14px,文字和左右两边边框的边距 10px。选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形,复选框多为方形。搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定,通常和输入框保持一致。搜索框距离右侧按钮 4px,内部文字 14px。单选多选框尺寸 16*16px,多个选项横向排列间距 16px,纵向排列间距 8px。开关按钮外框 40*20px,内部圆形 16*16px。8. 表格表格在后台产品 UI 设计中占比非常大,用来展示数据、统一管理、作为详情入口,是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围,同时也包括表格中的按钮样式、标签样式。表格主要分为五大区域:选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框,为用户提供按需搜索,可以大大提高用户效率;操作区指各种对表格内容进行增删改查、批量处理、配置列的动作;表头展示列标题,一般具有排序功能;正文主要展示各种各样的数据,要注意行高、对齐、分割、信息层级等,要考虑是否提供行内操作;底栏显示分页、总数统计等。表格信息一般主要功能为增删改查,查看和编辑是最基本的功能,表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。行高 表格行高可设置为表格内字体高度的 2~3 倍,主表格会间隔显示不同颜色,用于区分不同行数据、加强视觉流引导,展开单行的内置表格可采用纯色,选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。行数 表格行数太多加载速度会降低,延长用户等待时间;行数太少会导致用户不断翻页,降低使用效率。比较合适的默认表格行数是 20 或 50,用户可以根据自己需求选择默认的行数。设定行数之后,如果每页行数多于每屏行数,可在表格内引入滚动条,这时可以固定表头滚动内容。列宽 列宽根据内容字段长短需要有不同且合理的默认值,使得表格字段有良好的展示效果。列内容的长度固定时,列宽应大于固定宽度(比如时间、MD5、SHA1);列内容不固定时,能预判最大宽度的按照最大宽度设定列宽(比如IP地址、MAC地址、姓名),不能预判最大宽度的设定列宽按照常用宽度,多于内容省略以「…」展示,鼠标悬停出现完整内容(比如详情、描述)。列数 表格列不应过多,列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列,用户可自定义展示必需列以外的其他列;只展示重要信息,下拉展开列查看完整信息;在表格中引入横向滚动条,根据实际情况选择是否要始终固定基本信息列(如第一列是文件名)和操作列(最后一列的操作)。对齐方式 表格内的文本应按照文本类型不同进行统一规范,如金额类数值保留相同位数小数,SHA1 虽然是一串数字但是其实那并不是数据而是一串编码,所以可以像文本一样左对齐。根据文本内容不同,对齐方式也应灵活调整,可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的,将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息,也可以根据产品需要在文本前面增加「复制」图标,方便用户调用。详情入口 表格内部数据的详情入口,将能点击下钻查看详情的内容以不同颜色表示,同时在表格行最后一列操作按钮部分放置一个查看按钮。9. 反馈包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框,区别是是否会打断用户工作流。弹框又称对话框,是叠加在应用主窗口上的弹出式窗口,以对话的方式使用户参与进来。弹框 弹框出现时,主题内容增加一层遮罩 #000,透明度 50%,避免使用双层弹框,可同时采用有关闭图标的弹框和无关闭图标的弹框,引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭, 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框,或者再次进行交互梳理。侧滑框 侧滑框又称抽屉,出现在右侧,固定宽度 400px,高度覆盖在主题内容之上,点击侧滑框以外的区域则收起侧滑框。骨架屏 为某些特定数据提供数据加载等待时的占位图形组合。全局提示 建议停留时间 3s,可根据文字字数调整停留时间,文字内容限制在 30 以内。警告提示 用不同颜色和样式展示需要关注的信息。通知提醒 消息通知和警告信息用通知提醒框,单个消息从页面右侧以抽屉的方式划出,用户可手动关闭,或停留 3s 后自动关闭。10. 缺省状态绘制不同类型的情感化插画表示缺省状态,如404、500、暂时没有数据、没有新消息等。页面需要一个默认的底色,错误文字使用 14px,与情感化插画间距 20px,与按钮间距 30px。11. 数据可视化数据可视化部分可能是后台产品中对视觉设计要求较高的部分,使用情境为各类统计图、大屏展示页面等。功能型页面的数据可视化可以引入图形化设计组件,Echarts、G2、d3等;展示型页面的数据可视化则可以做得更有趣,比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。考虑到数据可视化可能会需要深色浅色不同的背景,在数据可视化统计图的色彩搭配上要注意颜色的拓展性。

WEB页面设计规范

网站 首页页面宽度 px

Yahoo! 950

淘宝 950

MySpace 960

新浪 950

网易 960

Live Search 958

搜狐 950

优酷 960

AOL 960随着电脑的发展,显示器是越来越大,分辨率也是越来越高,为了照顾所有不同显示器的用户,把网站的制作尺寸规范就定在1024*768下,网页宽度保持在1002-1004以内,高度还是以根据需要制作的内容在定,如果只想网页只在一屏内显示,不要上下滚动条, 一般高度是600-635像素之间, 就不会出现垂直滚动条。在ps里面做网页可以在1003*600状态下显示全屏,页面的下方也不会出现滑动条,尺寸为1003*650像素左右 。1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成10053、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001网站页面大小其实并没有一个统一的标准,不过网站建设好之后要记得测试各浏览器的兼容性,很可能在IE没问题的情况下,其他浏览器出现错位的情况。

PC端页面设计

一.PC网页设计规范 固定的内容: 1.PS中设计分辨率为:72像素/英尺(图片质量的像素点) 2. 颜色模式RGB 8位(显示器的三原色红,绿,蓝为RGB)

不固定的内容: 1.网页背景 a.纯色背景平铺(自适应浏览器) b.渐变色或底纹平铺背景(自适应浏览器) 目前网页设计中都会做通栏大图,以方便吸引客户,增加网站整体美观 c.通栏大图

二.屏幕分辨率 1.标准分辨率:1024px*768px(目前10%-20%的用户在用) 主体设计内容宽度:1000px(常用宽度:960px,1170px,980px,1100px,1200px) 首屏高度大约在700px

2.常用分辨率:1280px*768px 主体设计内容宽度:1200px(常用宽度:1190px,1170px,1100px,1200px) 首屏高约:750px

三.设计文档大小 1.PS中新建文档宽要大于主体设计内容的宽度(目的为了表现设计意图,展示背景效果,左右宽度最少200px) 2.设计到通栏大图片新建文档的宽度:1920px,所有的设计文档宽1920px主体内容根据具体情况而定(主体内容要是想要适应所有用户必须低于1000px)

手机页面设计尺寸规范

从设计方面来看,做手机界面设计的尺寸一般分为iPhone和Android两种设备。

如果以iPhone为设计设备,尺寸一般是使用750x1334,1125 x 2436,1242 x 2208这三种尺寸设计都可以,750x1334是2倍图设计,1125x2346和1242x2208都是3倍图来进行设计。

如果是用PS做设计稿就用750*1334,如果是用SKetch或者XD来设计,常见是用1倍尺寸来说,也就是375*667或者375*812(iPhone X)。

如果以Android为设备进行设计,尺寸一般使用720x1280,1080x1920进行设计第一种是2倍图,第二种是3倍图。

近年来iPhone和Android的设备增多,各尺寸也逐渐变多,下面有一份安卓屏幕尺寸表:以及一份iOS屏幕分辨率和尺寸表:扩展资料:

1、UI界面设计的基本要素:

机界面层级: idle(待机界面) Mainmenu(主菜单) Submenu(二级菜单)Third level menu(三级菜单) 界面除了包括图标和文字外,比较重要的还有function animation(呼叫,发送信息等) 以及 function interface(计算器,日历界面等)

明确意义的图标,风格鲜明的版面设计是手机界面设计的重要工作,较为流行的是以Motorola,Nokia等为代表的欧洲简单风格,以及韩国的时尚绚丽的风格。

2、设计注意事项:

尺寸问题: 480X800,540X960,720X1280,1080X1920象素尺寸是较常见的手机屏幕尺寸,在设计时可以根据实际产品要求进行设计,更大的屏幕可以有更多的交互表现和视觉元素的支持,较为自由。

色彩问题: 由于手机lcd本身的限制,在色彩的还原程度上没有pc如此完善,因此在选用色彩时要根据使用的屏幕进行调节。

可实现性问题: 受到硬件运算速度和内存的影响,以及不可预计的后台程序开发难度,过于复杂的效果将很难进行实现,与程序工程师和ui工程师,硬件工程师的沟通显得尤为重要。

参考资料来源:百度百科-手机UI设计

IPHONE6页面设计规范

现在iOS app 的尺寸也变多了,要适配到各种尺寸需要选择一个折中的尺寸来向上向下适配,以前一般用的是iphone5的尺寸,iPhone6 plus出现后,iPhone6尺寸成了大多数设计师的选择。 一、iPhone6的界面布局是:屏幕是4.7英寸的,设计稿的大小750x1334px ☆ 状态栏(status bar):就是电量条,其高度为:40px;☆ 导航栏(navigation):就是顶部条,其高度为:88px;☆ 主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px;☆ 内容区域(content):就是屏幕中间的区域,其高度为:1334px-40px-88px-98px=1108px 二、关于iPhone6的图标的尺寸是: ☆导航栏的图标高度为44px(绝大部分功能按钮)左右,标签栏的图标尺寸为50x50px左右,最大为96x64px。☆关闭按钮34px*34px,返回按钮26px,简单笔画图标40px。 三、常用的可点击高度-登陆框、密码框、功能列表等,统一设成88px。 四、搜索栏、输入框、评论框、地址框的高度,在iPhone6的原型图上,统一设成58px或60px。 五、在iPhone6设计稿中,界面元素之间的常用距离。 常用间距-亲密距离:20px(与边缘距离);疏远距离:30px;其它距离-10px,44px等;区块间隔:30-40px。A、疏远距离:改图标距离手机屏幕最左边的距离;B、亲密距离:左边图标与右边文字之间的距离。 六、黑白灰颜色常用的数值是: ① 文字黑色#333② 文字深灰色#666③ 文字浅灰色#999④ 边框浅灰色#e5e5e5⑤ 背景淡灰色#f2f2f2⑥ 按钮背景纯白色#ffffff 一、注意事项 1、在每个项目设计中只使用1-2个字体样式,而在品牌字有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文案。字体用的太多,越显得不够专业。2、不同的样式的字体,形状或系列最好相同,保证字体风格的一致性。3、字体与背景的层次要分明,确保字体样式与色调气氛相匹配 二、界面中文字选用的规则 在不同平台的界面设计中规范的字体会有不同,像移动界面的设计就会有固定的字体样式,网页中会有常用的几个字体。以下是在72像素/英寸下的规范 移动端常规字体IOS:常选择华文黑体或者冬青黑体,尤其是冬青黑体效果最好, 方正兰亭黑和方正黑体简 、方正中等线也运用的比较多。 三、字体的大小 1、导航栏的文字大小是36-38px;2、标题字号:32px ,34px;3、内容区域的正文文字大小是:28px,30px;4、辅助性文字:20px , 24px,26px;5、标签栏(或主菜单栏)的图标下方的文字大小为20px;6、终极原则:不大于所在要件高度的一半;7、行间距:字号的1.2-1.5倍。下图是百度用户体验做过的一个小调查,可以看出用户可接受的文字大小:

PC端页面设计(B端页面设计规范)的介绍,今天就讲到这里吧,感谢你花时间阅读本篇文章,更多关于PC端页面设计(B端页面设计规范)的相关知识,我们还会随时更新,敬请收藏本站。