easyui datagrid b表格中的内容显示null_扫盲 | 实际工作中,B 端设计都在做什么?...
上篇:扫盲 | 当说起B端设计时,我们在聊什么
接下来,我们就要谈谈有关设计的问题了,因为 B 端产品服务的对象不同,所以它和 C 端的设计有一定的差异,下面来分析一下它们之间的区别。
需求特点:
对于 B 端的产品来说,要解决的问题通常都是比较明确、显性的。比如前面提到的零售公司在日常运营中需要记录产品从买入到卖出的流程和数据,产品制定功能时就会紧紧围绕这个目标展开。
可以说,B 端和 C 端产品在需求上最大的不同,就是为了解决问题的主体对象不同,C 端产品是为了解决用户的需求,从功能的制定到交互和设计都围绕目标用户展开。而 B 端产品要解决的是企业运营的问题,以可以完整的实现目标功能为核心,往往是要用户牺牲体验去适应功能,而不会为了体验去删改功能。
不同于一些简单的 C 端项目,即使对需求内容没有什么理解,只要拿到了产品的原型也能轻松完成设计。而 B 端的需求往往非常的复杂,一个界面或者组件会有非常多不同的状态和细节变化,且操作内容相互交叉,在我们对需求缺乏理解的时候,作出来的设计只会漏洞百出。
交互特点:
对于一般的 C 端产品来说,产品通常只是用来获取信息的载体,我们通过操作界面来获取商品、视频、动态、新闻等内容。很多时候,会将部分操作状态、交互方式进行隐藏,以更好的展示内容。
但在 B 端产品中,虽然信息的展示也很重要,但更重要的目的是通过一系列的操作去筛选或者处理信息。因为这些操作往往步骤比较多,且可操作的选项也多,所以产品对于交互要有更清晰明确的反馈。
例如,可操作的功能都要罗列展示出来,鼠标悬停,跳转,状态变更等等也要有对应样式,并且许多操作步骤需要通过文字提示告知用户结果。和 C 端的交互比起来,虽然 B 端产品会显得 “啰嗦”,原因就是为了给用户带来更准确的操作感受,不让用户去 “猜” 或者刻意 “探索” 小细节。
设计特点:
当我们面向 C 端用户设计的时候,往往需要增加一些额外的视觉元素来呈现品牌和情感化的表达,并且也要去满足目标用户的个性化需要,所以多数 C 端产品看起来会显得 “花哨”。
而 B 端产品是为了解决企业的问题,是需要用户长时间操作并完成工作任务的,对于操作和展示内容无关的元素,越少越好。很多新人会热衷于下方这类以 C 端视觉标准进行设计的管理界面,但它们对于真实的使用体验来说显得过于冗余。
优秀的 B 端界面设计在视觉的表现上一定是克制、简洁、干练的,因为超出操作需要的视觉元素越多,对于用户认知的负担就越重。
技术特点:
和手机客户端不同的是,网页可以随意的更改宽度,显示内容区域差距极大。往往我们既要考虑 1024px 的正常显示,也要考虑在 2560px 宽下的显示效果。那么,这就需要设计师对于前端的知识和框架有深刻的理解,因为没有这方面的知识,那么页面的自适应布局设计将无从谈起。
所以,设计师在进行 B 端设计前,要能熟练掌握 HTML5 和 CSS3 的内容,并能理解 JS 对于页面布局的计算方法。
并且,除了完全独立设计开发的项目以外,还有大量的 B 端项目是采用第三方框架开发而成的,如 Ant、SBadmin、Element 等等。这是因为这些第三方程序可以帮助团队节省大量的开发时间和精力,避免重复造轮子。
而设计师需要根据这些第三方框架的特性对页面进行设计 (类似换肤),掌握前端的知识知识越扎实,那么设计的过程也就会越顺利。
实际上,B 端的设计内容是可以拆分成若干模块的,每个模块都有特定的知识点和理论需要掌握。所以最后,就来分享以下做 B 端设计时我们具体在设计什么内容。
布局设计
B 端产品,就是一套商业系统,在这个系统需要包含众多的信息和操作功能,而设计的任务之一,就是定义一套布局框架,将信息和操作功能整合进去,实现有序、统一的操作体验。
通常,管理界面的布局会包含以下几种固定的内容:
导航
状态栏
内容区域
弹窗/边栏
比如常见的几种布局类型。
当然,布局的设计远不是到这里就结束了,除了部分具体的字段、链接以外,我们还要将自适应的前端技术考虑进去,如何在拉伸浏览器的同时保证这套布局的正常使用。
比如在今天最主流的适配方式就是通过 CSS 删格等分体系,但这是一个非常复杂的话题,我们以后讨论。
控件设计
作为 UI 设计的一部分,控件的设计自然也少不了。多数控件的设计和一般网页设计所需的控件差不多,类似按钮、菜单栏、分页栏、面包屑、通知栏、下拉菜单等等。
这部分内容设计起来没有技术难点,但我们前面讲过,B 端产品在交互反馈上的需求,使得我们对控件进行设计时要充分考虑它们的状态。
例如,一个按钮可以包含默认、鼠标悬浮、点击、已点击、不可点、加载中等多种状态,这些状态设计得越全面,则操作的体验就越好。
表单设计
表单是一个接触频率非常高,但对新人来说很陌生的词汇。简单点理解,它就是用来在界面中键入信息的控件的合集。比如输入框、复选框、单选框、下拉选框等等。
在 B 端设计中经常需要用一系列的表单控件组成一个完整的业务操作,比如在后台创建一个用户账号,可能就需要通过输入框输入用户名、密码,然后用单选框选择性别,复选框选择爱好,日期下拉菜单选择生日等等。
或者,我们还会使用表单的内容进行高级的筛选操作,通过不同的表单控件来设置筛选条件,缩小结果的范畴。
表格设计
在 B 端产品中,数据主要通过表格的形式展现。而多数设计师对于表格的理解一无所知,甚至连 Excel 都没有用过。
表格是 B 端产品呈现信息和数据最重要的组件之一,无论是用户、产品、订单或者记录,我们都需要依靠表格的展现形式进行梳理。
但是,表格的设计并不只是枯燥的画好线条方格,而是要根据业务的属性、字段的类型和显示数量灵活的调整,以及还要考虑如果对每一条数据进行编辑、选中、移动等操作的交互方式。
图表设计
最后,就要讲讲图表的设计了!在大数据概念大热的今天,人们对数据的重视度越来越高,无论是在新闻还是在会议的 PPT 上,我们都会看见各种个样的数据内容。而这些数据,通常都以图表的形式呈现。
常见的图表包含折线图、扇形图、柱状图、曲线图等等,比较常见。但是,有一个普遍的谬误是,很多新手错误的将图表的设计理解成数据可视化设计。数据可视化是将数据以更复杂、多样的方式表现出来,不仅在设计上难度更高,且需要极其高昂的开发成本,我们会在后续的内容里说明。
所以,在 B 端设计中,我们对数据的展示只要专注于了解主流的图表类型,并明白如何根据数据的展示的需要对它们进行运用即可。
结尾
以上就是关于 B 端设计扫盲的第一篇内容,简单的对管理平台的设计进行扫盲,让大家有一个初步的认识,并对一些错误的想法进行纠正。
之后,我们会逐一更新后续的内容,如果有想要提的问题或者遇到的疑问可以写在留言里!
PS:后续可能会计划做和 B 端有关的课程,如果感兴趣的同学也可以加下方微信!
easyui datagrid b表格中的内容显示null_扫盲 | 实际工作中,B 端设计都在做什么?...相关推荐
- html5div输入内容,将input框中输入内容显示在相应的div中【三种方法可选】
例题一枚:在input框中输入内容,会相应的显示在下面的div中的不同做法: #div{ width: 175px; height: 100px; margin: 20px 84px; border: ...
- 文件读写操作:把文件a.txt中的内容复制到文件b.txt中
文件读写操作:把文件a.txt中的内容复制到文件b.txt中 package com.io.reader;import java.io.File; import java.io.FileNotFoun ...
- list申请java,java把一个list中的内容添加到另一个list中 FPGA编程问题:有多个.v文件与module,把他们加到......
导航:网站首页 > java把一个list中的内容添加到另一个list中 FPGA编程问题:有多个.v文件与module,把他们加到... java把一个list中的内容添加到另一个list中 ...
- python在日常工作中的具体应用_python在实际工作中的应用有哪些
python在实际工作的应用程序是什么无论是工作还是生活,python是一种实用和有趣的技能.Python已经广泛应用,下面的图可以概括:从工作:Python开发,Python爬虫,大数据;从生活中, ...
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> < ...
- 电脑桌面显示悬浮文字_工作中记录每天做事的软件选择什么电脑桌面便签软件?...
现代人办公,电脑是工作中常用的工具,在记录每天工作中要做的事情时,不仅可以将每天的工作记录在本子上,也可以借助一些记录每天做事的软件,不少职场人会选择使用电脑桌面便签软件记录工作备忘事项,其一方便查看 ...
- 清空div中的内容而不刷新整个页面_Vue中的$nextTick机制
nextTick 出现的前提 因为Vue是异步驱动视图更新数据的,即当我们在事件中修改数据时,视图并不会即时的更新,而是等在同一事件循环的所有数据变化完成后,再进行视图更新.类似于Event Loop ...
- linux中替换文件中的内容,linux下批量替换文件中的内容linux操作系统 -电脑资料...
对于单个文件,使用sed命令很容易做到, grep命令可以查找单个文件或文件夹下文件中的内容,使用参数"r"或"-R"可以递归查找指定文件夹下的所有文件:参数& ...
- 浏览器中的音视频知识总结(工作中需要和视频打交道必看!)
前端瓶子君,关注公众号 回复算法,加入前端编程面试算法每日一题群 视频是什么 视频,其实就是一系列连续播放的图片,如果1s钟播放24张图片,那么人眼看到的就不再是一张张独立的图片,而是动起来的画面.其 ...
最新文章
- Numpy入门教程:12. 线性代数
- h5如何动态获取键盘高度_动态获取键盘高度
- 网站前中期外链优化少不了这三点!
- [力扣leetcode319]灯泡问题
- kafka 集群_10分钟搭建单机Kafka集群
- 深度学习pytorch--softmax回归(二)
- Spring框架的事务管理的基本概念
- SpringMVC请求参数乱码问题
- 快速轻巧的CQRS和事件源解决方案
- 显示器与服务器连接线叫什么,连接显示器和主机的线叫什么
- MUI开发指南(二) webview对象
- 如何成功清理重建CloudStack环境
- 西门子系统C语言编程,SINUMERIK西门子系统加工中心编程各代码.doc
- 最新正版win7系统下载
- 惠普扫描应用程序当前正由此计算机上的其,惠普打印机 打印扫描的时候显示“由于另一个程序或另一台计算机正在使用联网的HP成像设备因此无法执行”...
- 留学Assignment写作要注意逻辑谬误
- 阿里云服务器常用配置价格表
- g5500服务器装系统,联想G50笔记本U盘重装win10系统教程
- 银行卡号正则表达式(严格匹配,2020年)已更新
- 我国第一部机载脉冲火控雷达研制历程
热门文章
- java 发送邮件 菜鸟_Java发送邮件的方法
- php mysql购物车_php mysql购物车实现程序
- SpringMVC中的拦截器
- MyISAM与InnoDB区别
- linux下git的HEAD,Git工具详解以及与GitHub的配合使用
- oracle跨库 导库,Oracle 用dblink 跨库导数据
- audio标签控制音量_html中audio标签的使用
- 与smart_Smart超纯水系统及原理
- 定义一个有参宏SWAP(t,x,y),用以交换t类型的两个参数的值
- 【c语言】蓝桥杯算法提高 填充蛋糕