B端界面设计(C端界面设计)

编辑:南翔 浏览: 2

导读:为帮助您更深入了解B端界面设计(C端界面设计),小编撰写了B端界面设计(C端界面设计),B端界面设计(C端界面设计),C端界面设计包含什么,网页端界面设计,移动端界面设计,B端界面设计等6个相关主题的内容,以期从不同的视角,不同的观点深入阐释B端界面设计(C端界面设计),希望能对您提供帮助。

B端界面设计(C端界面设计),老铁们想知道有关这个问题的分析和解答吗,相信你通过以下的文章内容就会有更深入的了解,那么接下来就跟着我们的小编一起看看吧。

B端界面设计(C端界面设计)

随着互联网的快速发展,B端和C端用户正在成为越来越多企业注意的对象。无论是B端还是C端,用户体验和界面设计都是至关重要的。在这篇文章中,我们将重点讨论B端界面设计和C端界面设计的重要性和差异。

B端界面设计是为企业和组织的商业用户而设计的。它注重实用性和功能性,以满足专业用户的需求。B端界面设计需要考虑用户的工作流程和操作习惯,提供高效、直观和易用的界面。相比之下,C端界面设计更加注重用户体验和视觉效果,以吸引和留住普通消费者。

B端界面设计的特点是简洁、直观和功能明确。它们通常包含了大量的数据和信息,需要通过清晰的排版和良好的信息架构来展示。与之相比,C端界面设计更加注重情感共鸣和视觉冲击力。它们通常具有更加丰富多样的交互效果和动画效果,以提升用户的参与感和乐趣。

B端界面设计和C端界面设计也有一些共同之处。它们都需要关注用户的需求和反馈。无论是企业用户还是普通消费者,都希望能够在使用产品或服务时得到良好的体验。它们都需要考虑不同平台和设备的兼容性。无论是在电脑、手机还是平板上使用,界面设计都应该能够适应不同的屏幕尺寸和操作方式。它们都需要持续优化和改进。随着用户需求的变化和技术的发展,界面设计也需要不断更新和改进,以保持竞争力。

B端界面设计和C端界面设计在目标用户、设计重点和特点方面存在差异。它们都需要关注用户体验和界面设计的重要性,以提供更好的用户体验和满足用户的需求。无论是B端还是C端,优秀的界面设计都是企业成功的关键之一。

B端界面设计(C端界面设计)

g端代表政府端government,代表的是政府、事业单位群体;b端代表企业用户商家Business;c端代表消费者个人用户Consumer,一般情况常见于描述产品所面对用户群体。

1、G端产品指的就是为政府、包括事业单位开发的产品。服务于政府或企业的软件,大部分要帮助其解决实际问题,对效率、利润产生贡献,通过智能化信息化帮助工作人员在具体的流程环节中提升效率从而达到节约成本和高效产出的目的。G端产品要注重业务流程和业务场景,做合理且专业的产品;要兼顾用户体验和业务需求之间的平衡,而且这类产品受国家政策影响较大,产品功能紧贴政策需求。

2、B端产品的用户是多角色群体、多维度,一般是3个维度,决策者(老板)、管理者(财务、业务部门负责人)和执行者(使用的用户)。由于用户角色多,所以它的业务场景也多,而且流程差异大,不同的行业不同的客户,需要不同的专业解决方案。

3、C端产品对应的群体相对单一,一般是单一维度。它的业务场景、逻辑简单、流程相对标准化,用户群体比较固定,场景相对简单,产品要求简单,流程要求相对统一标准化。

C端界面设计包含什么

只有PC端没有P和C分开的端。PC端是和移动终端相对应的名词,就是指网络世界里可以连接到电脑主机的那个端口,是基于电脑的界面体系,它有别于移动端的手机界面体系。

PC的英文全称是:PersonalComputer(个人电脑)。PC是一个含义广泛的词,也是计算机的总称。个人电脑种类繁多,如传统台式电脑、DIY电脑、笔记本电脑等,而平板电脑、一体机、超极本、手持式电脑。

嵌入式电脑等都属于个人电脑范畴。也就是说PC是一个广义的名词,属于计算机的总称。扩展资料:

PC端与移动端区别

1.操作方式

PC端的操作方式与移动端已经有了明显的差别,PC端使用鼠标操作,操作包含滑动、左击、右击、双击操作,操作相对来说单一,交互效果相对较少,而对于手机端来说,包含手指操作点击、滑动、双击、双指放大、双指缩小、五指收缩和苹果最新的3Dtouch按压力度。

除了手指操作外还可以配合传感器完成摇一摇、陀悬仪感应灯操作方式,操作方式更加的丰富,通过这些丰富的操作可设计不同新颖吸引人的交互互动设计。

2.屏幕尺寸

随着时间的推移,移动端的设备屏幕逐渐增大,但是你再大也是大不过PC电脑屏幕的,这是毋庸置疑的。PC端屏幕大,所以他的视觉范围更广,可设计的地方更多,设计性更强,相对来说容错度更高一些有一些小的纰漏不容易被发现。

移动端设备相对来说屏幕较小,操作局限性大,在设计上可用空间显得尤为珍贵,在小小的屏幕上使用粗大的手指操作也需要在设计中避免原件过小过近。

3.网络环境

当下不管是移动端还是PC端都离不开网络,PC端设备连接网络更加稳定,而移动端可能遇到信号问题导致网络环境不佳,出现网速差甚至断网的问题,这就需要产品经理在设计中充分考虑网络问题,更好的设计相应的解决方案。

4.传感器重型武器攻击移动终端设备,声音传感器灰尘,电脑设备压力、方向,重力,GPS,NFC,指纹识别,3dtouch陀螺仪等等等等,因为这些传感器的存在使我们的生活更丰富多彩,他们还可以玩赛车游戏可以滚了多少步姐姐可以去每一天,产品的设计巧妙地使用传感器可以使产品外观和颜色。5.软件迭代时间和更新频率你没更新你的电脑软件,但你的手机软件总是保持最新的状态,这是两者的区别,他们移动终端软件的迭代时间较短,用户更新率较高和PC软件迭代时间更长,除非用户的必要性一般不会主动更新软件,软件更新率很低。6.生活除了笔记本电脑、个人电脑和台式电脑,他从未考虑过移动设备。

网页端界面设计

UI界面设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI,互联网说的UI设计是虚拟UI,UI即User Interface(用户界面)的简称。

好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。国内大部分UI工作者都是从事这个行业,是了解软件产品、致力于提高软件用户体验的产品外形设计师。

这些设计师大多是美术院校毕业的,其中大部分是有美术设计教育背景,例如工业外形设计,装潢设计,信息多媒体设计等。扩展资料

UI即用户界面设计行业刚刚在全球软件业兴起,属于高薪技术设计产业,与国外在同步发展水平。其次国内外众多大型IT企业(例如:百度、腾讯、Yahoo、中国移动、Nokia、联想、网易、微软、盛大、淘宝等众多企业)均已成立专业的UI设计部门,但专业人才稀缺,人才资源争夺激烈。

就业市场供不应求。国内的UI设计日益发展,有了专门的职业分工也开始出现一些较高水准的一线设计师与UI设计交流组织。但在这一领域,我们与西方发达国家间的差距仍是显而易见的。

软件领域不像物质产品那样,存在工艺、材料上的限制,其核心问题恰在于人。提高软件UI设计师的个人能力,真正提升软件产品的人性化程度,已成为中国UI发展的重中之重。

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

移动端界面设计

移动端导航UI 设计5种常见方式

用户使用一款新的移动端APP 软件时,借助导航是其最快了解这款APP 的途径。导航的设计是设计师们在整个移动端UI

界面设计中最关键的点,也是用户判断一个APP

是否“好用”的关键。试想,如果一款软件的导航功能非常复杂,无法给用户的日常生活带来便捷,这款软件迟早是会被市场淘汰的。

本期我们整理了5种现有移动端导航的设计方式,每种方式都有其自身的优势和劣势,设计师们可以针对具体APP

的功能,及用户群体的实际需求,选择其中的一种或者两种搭配使用。

1. APP 标签式导航——最常见、最保险

标签导航位于页面底部,通常包含5个标签是比较合适的数量。这种导航是非常常见的,如果你的应用需要用户频繁的在不同分页切换,可以采用这种导航。它的缺点是会占用一定高度的空间。

2. APP 抽屉式导航——适合信息层级多的界面设计

抽屉式导航常常与标签导航结合使用。如果一款产品的信息层级非常多,一屏无法将所有内容全部展示,这是便可选择抽屉式导航,将部分菜单隐藏,突出核心功能,节省页面展示空间。同时需要注意,这款导航的设计一定要提供菜单画出的过渡动画。

3. APP宫格式导航——不适于APP 的主导航

宫格式导航是将主要的菜单入口全部集中在同一个页面,每个宫格相互独立,相互的信息间也没有任何交集,无法跳转互通。也因宫格式导航不建议使用在APP

的主导航设计中,可以用在二级页作为内容列表的一种图形化形式呈现。

4. APP悬浮式导航——适于大屏的导航模式

APP 中的悬浮式导航,是将导航页面分层,无论APP

的哪个页面,悬浮导航键永远悬浮在页面之上,你依靠悬浮导航随时可以使用想用的软件。但不可让悬浮式导航遮挡住原本界面的应用。

5. APP列表式导航——必不可少的应用

列表式导航通常用于APP 设计的二级页,这种导航结构清晰,易于理解,能够帮助用户快速定位去到对应的页面。

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等;展示型页面的数据可视化则可以做得更有趣,比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。考虑到数据可视化可能会需要深色浅色不同的背景,在数据可视化统计图的色彩搭配上要注意颜色的拓展性。

文章到此结束,如果本次分享的B端界面设计(C端界面设计)的问题解决了您的问题,那么我们由衷的感到高兴!