首页

B端Dashboard设计指南系列

涛涛

Dashboard的含义

前言

Dashboard在B端设计的工作中是一个绕不开的话题,在此我根据自己工作中实际的一些经验总结给大家归纳出一篇更符合工作场景中Web端的Dashboard设计内容。


什么是Dashboard?

Dashboard的中文直译是仪表盘,最初与dashboard相关在界面出现的是苹果电脑系统Mac OS X v10.4 Tiger操作系统中的应用程序,用作称为“widget”的小型应用程序之运行基础。



B端常见Dashboard

2013年Stephen Few写的《Information Dashboard Design》中指出“仪表盘是为了实现某些特定目标而对重要信息进行的视觉传达,对一屏上的内容进行组织呈现使人一瞥便能掌握其所传达的信息。简单点来说就是:为用户提供全局概览,让用户快速掌握工作进展及进入工作状态并可以访问最重要的数据,功能和控件。



Dashboard设计案例

以下是Dashboard常见4点设计不是很好的案例,现在带大家一个个看下怎么才是更为合理。


案例一:右边Dashboard上的信息做了层级的区分,相对左边更加直观。


案例二:左边Dashboard颜色偏荧光色,色彩语言相对右边不适合长期工作使用。


案例三:设计方案时没有采用格栅格化解决适配对不齐等等问题


案例四:dashboard模块之间间距没有呼吸感。



B端Dashboard的功能分类

设计师需要了解的功能分类

B端设计中,设计师要实时了解哪些是重要内容以及核心数据。Dashboard可以直接传递出:“业务整体状况如何?有哪些关键指标?各指标的运行情况分别如何?哪些指标出现异常?需要用户做些什么?”。由此可知,B端Dashboard产品中大多数都以看为主,辅以功能控制。主要分为监控操作、分析处理两大场景。当业务较为复杂时,可以用战略概览场景提供快速入口。



1.监控操作:

使用户可以一目了然地检查其状态,提供关键指标实时监测并且告知异常状态。更重视实时观看状态。


2.分析处理:

通过数据图表,配合控件进行不同维度的数据分析。以数据为中心,并显示尽可能多的相关数据视图。


数据性Dashboard。数据概览可视化展示为主。帮助用户提供较为直观数据维度,更好分析决策。


综合性Dashboard,既有提供数据全局概览可视化,同时也能快速在页面进行操作完成工作。国内B端产品最常出现的Dashboard功能模式。本篇文章也是着重介绍如何完成这个类型需求


3.战略概览:

在复杂的业务中,可以呈现业务分散的重点信息,用户可以通过提供入口快速跳转至相关模块。



设计前分析

了解Dashboard的用户

B端设计过程中每多了解一个维度分析就更有利于下一步Dashboard框架搭建。因此在对Dashboard有了一些简单了解之后,我们再来了解下用户场景。例如:用户是财务人员审批商户充值申请。工作人员进入dashboard之后先是进行充值打款申请。那么设计时可以考虑在Dashboard中加入常用功能:充值。并且需要给到相应充值数据概览:账户余额。每个B端产品都有自己特定工作场景。因此从用户、场景和任务这三方面考虑,可以做到帮助设计师更清晰设计dashboard布局以及设计自查。

因此以上这些信息都是需要在设计Dashboard时弄清楚的内容。



信息处理

当弄清楚需要呈现信息内容后,需要进一步对信息做处理。从用户的角度,举个例子在FMS财务系统记账中,财务需要查看季度报表。那么数据的单位以默认季度呈现会更为符合使用用户需求,准确且高效。具体可以从以下四个维度来做进一步处理:覆盖范围、时间跨度、粒度、个性定制。一般核心指标不超过7个,确定核心指标的联系及优先级。

合理的信息结构能够帮助用户高效阅读,理解内容。如何将信息碎片有逻辑地组合在一起,合理呈现和布局,选择使用什么结构视内容而定。


举个例子:

对于管理者的角色来说使用Dashboard的诉求是:及时把控业务情况

信息处理内容:

1.掌握重要业务数据:经营数据,订单数据,客户数据;

2.了解员工工作进度;

3.处理急需解决的工作任务。

对于执行者的角色来说使用Dashboard的诉求是:高效完成工作任务

信息处理内容:

1.急需解决的工作任务:待发货订单,待退款,待跟进客户

2.了解自己的工作进度

3.经常使用的功能:发布商品,添加客户,开单

4.查看重要通知公告:公司发布的公告


了解Dashboard的表现设计类型

Dashboard表现结构常见两种类型:卡片型、流程型。


卡片型

最常见就是卡片型。即将有相关联的内容进行分组呈现,让Dashboard内容归类而不杂乱无章。


流程型

内容相互之间具有一定的逻辑关系,如地理位置关系、数字包含关系、对象父子关系等,这种结构可以让对象之间的逻辑关系十分直观。很直观的呈现了资源对象之间的相互关系。



Dashboard的设计

Dashboard的表现构成

国内B端产品一般是由以下这几个部分组成的。全局导航、数据概览、待办事项、常用功能、任务进展、平台推送、数据图表。下面带大家仔细看下具体每个部分具体如何设计。


1.全局导航

在B端Dashboard中,全局导航一般由三个部分组成。平台LOGO、功能入口导航、快捷功能导航。


1.1平台LOGO

一般这里都会放LOGO,对于一些壁垒标准化B端服务,这里通常是给好标准规则,后台自动配不同客户的LOGO。因此要考虑到区域的色彩是否适用各种不同LOGO。如果是OA或是定制化B端服务,那么就可以直接定制设计。


1.2功能入口导航

就是菜单导航,在B端Dashboard一般都是在侧边。建议最多不要超过9个,遵循7±2原则。尽量将同类型归类,好好利用下二级分类。另外入口不要太深,用户容易找不到入口。尽量设计优化合并来减少用户使用负担。


在国内B端产品中,最常就是将功能入口导航放在侧边。适用于更专注功能和快速操作的系统

优点:

拓展性,一级导航的数目可以展示更多;

层级清晰,一二三级导航都可以流畅展示;

操作效率高,用户在操作和浏览中可以快速定位和切换当前位置。

缺点:

视觉动线左右折回,比顶部导航更易疲劳,

内容区的排版空间更小,需要考虑适配问题。


在国内B端结构比较庞大的后台中,通常会将功能入口导航设计为混合模式。混合模式就是将功能入口分为顶部与侧边两边都有。这是因为侧边模式已经无法层级扩展性已经无法很好的满足产品架构了。

优点:

层级拓展性强,可达四、五级导航。

缺点:

操作难度上升、视觉动线更复杂。



还有一种模式:顶部模式,这种模式在国外产品中较多,在国内的B端产品中较为少应用。原因之一是起初最早的国内B端产品就采用这种排版模式,在国内形成了一种用户操作习惯。国外最常见的B端顶部导航:saleforces、hubspot、zoho。

优点:

沉浸感比侧边以及混合都要强,几乎不会对于用户的阅读行为有干扰,因为Web也有顶部浏览器菜单。

缺点:

一级导航栏的栏数及字段内容受限严重。国内B端产品会有很多快捷功能就更不利用采用这种模式



1.3快捷功能导航

一般包含:消息通知、账号信息、帮助中心、设置。在国内B端产品中基本上都是在右上角







2.数据概览

在B端Dashboard中,数据概览通常都是选取最关注的数据指标来展示,而不是全部数据;选取最关注的时间段,而非全部时间段。

构成:数据名称+数字

这个模块在设计表现上最重要就是信息层级的设计处理。如何能够让用户一眼就看到最关注的数据内容指标。设计时注意突出数据才是关键。设计时关键数字上就要字号大一点,甚至可以采用特殊的数字字体,例如DIN系列,来加强对比。



3.待办事项

待办事项模块通常是应用在执行角色的Dashboard中。节省工作人员寻找任务的时间,避免遗漏任务。

构成:待办事项名称+数字+可点击跳转的链接

待办事项的展示方式可以是数据可视化也可以是数据概览。但是有一点,数据必须是要能够点击的,因为待办事项就是要有入口去操作。同时也可以把待办事项平铺出来,平铺几个可以根据具体情况定。如果待办样式本身很多的情况下,可以采用tap切换的样式全部展示出来。



4.常用功能

用户高频操作快捷入口,点击跳转相应操作页面。这个模块每个b端产品都不一样,需要仔细反复斟酌是否是用户需要的高频功能。



5.任务进展

用户当前最关心的任务,常用进度条或者时间轴的形式表示。



6.平台推送

平台用来触达企业的信息,一般有产品更新动态,学习培训,客服,广告推送,活动消息(这个一般比较常出现在平台类的b端产品中)



7.卡片式数据图表

卡片式数据图表可以拆分成图表+辅助两种组成部分


7.1图表

B端设计师需要准确通过图表来表达出用户需要的维度信息。

7.1.1折线图

随时间(连续内容)而变化的连续数据,适合表现趋势。Y 轴刻度值选择要合理,以数据波动要最大化的显示


7.1.2面积图

面积图和折线图比较类似,针对只有单个数据类型有面积区域的表达效果比折线图好。数据类型尽量不要超过2个,有2个数据类型时,注意调整面积区域的透明度以及色系保持统一



7.1.3柱状图

通常用来统计累积叠加数据,数据之间能够非常清晰直观对比。柱状图的单位宽度不要是固定值,单位宽度之间间距在不同分辨率屏幕下的对比要合理。不用大圆角元素,不够严谨,太活泼。最多使用两种颜色,一种默认,一种hover或tap,保持界面统一性



7.1.4扇形图

有共同的上一级层级作为统计总合,数据之间平级且有占比。数据必须是正整数,至少两个以上数据,且用不同颜色表示




7.1.5环形图

与扇形图很相似,但是比扇形图更加直观浏览且不被抢视觉。避免过于太细太粗,控制好留白呼吸感




以上是常用的图形图表,绝不是全部。有兴趣的同学可以到以下两个网站可以利用碎片化时间扩展学习

EChart:

https://echarts.apache.org/examples/zh/index.html

AntV:

https://antv.gitee.io/zh](https://antv.gitee.io/zh




7.2辅助元素

卡片型图表的第二部分也就是辅助元素。辅助元素里面还有很多细节元素组成:标题、轴、提示信息、标签、气泡信息、功能(筛选、导出、保存)。当然在实际设计中,会根据场景去修饰删减一些元素,以此来减少冗余信息,帮助用户快速达成目标,在最少的时间内获取更多的信息。



7.2.1标题

标题是区分卡片信息,迅速让用户了解卡片图表的重要元素。通常需要斟酌严谨不重复,简洁概括。



7.2.2轴

轴上最重要的内容就是单位,将每个数据在同一轴上都是维持同种基准。便于进行数据测量。



7.2.2.1轴的细节

现在知道了轴由哪几部分构成,那么接着了解细节



轴线

轴线细节一般只考虑是否显示,在有网格线的情况下,可以考虑隐藏x/y轴线。通常显示数据的轴作为隐藏,突出视觉重点,减少不必要的线条。


轴刻度

轴刻度是轴线上的间距不宜过密,确保信息可读性以及呼吸感,根据 7±2 法则,在可见的卡片内尽量保持这个规则,可以利用抽样显示的手段来优化轴标签重叠的问题,这种一般是在连续性内容上可以使用。若轴上单位信息确实过多,虽然是连续性内容例如展示30天单位,由于本身卡片信息不是过于最重要层级,设计在相对狭小空间尺寸中,那么建议考虑在轴线上安排滚动条,并将重看单位放置前位。设计特别注意点,将滚动条设计作为辅助元素不宜抢视觉。


网格线

网格线是用来辅助图表数据直观对比的,增加数据更快速的阅读性。举个例子:数据展示轴线在左边。那么离左边最近的数据图形可能不需要网格线就能立即对应到相应数字。但是越靠近右边的数据图形就相对比左边的数据图形就比较难一眼识别。因此网格线也担任了刻度尺的功能。在设计网格线时要注意网格线更多是辅助的角色。表现类型可以选择虚线或是实线。但是要把握好颜色选用不抢视觉重点又能看到。




7.2.3提示信息

以对照的方式来理解可视化对象的项目归类信息,总结图形形状和文本组成内容。



7.2.4标签

在图表中,标签是对当前的一组数据进行的内容标注。根据不同的图表类型选择使用。



7.2.5气泡信息

当标签默认不显示,气泡信息一般是鼠标tap或者hover时,显示该位置的数据。在简洁的页面中,也能让用户直观看到信息对应数据结果



7.2.6功能

这个模块涉及的内容偏多,在表单页面更常出现,以后有机会可以单独说。一般常用功能如筛选、导出、保存。可以让用户控制和友好的体验



确定B端产品的设计风格

首先tob的产品dashboard说到底还是给使用用户所使用,也就是“人”。所以通常情况下dashboard除了传递出用户想要的数据信息,还要传递服务于人。此外最重要的是B端设计师需要理解项目背景。例如某个财务应用平台不属于科技未来感,而是突出一种安全,高效,具有客户亲和力的商业产品特性。那么关键词:服务、轻松、高效、亲和、精致。那么一个干净、相对轻量、统一的Dashboard UI界面就提炼出来。



色彩

常说色彩是一种情绪版,在Dashboard设计中,色彩也是映射关键词的非常重要一个环节



字体

B端产品一般都是以数据为主要信息源,针对一些关键信息指标时,可以采用特殊的数字字体。由于本身数字字体包内存不大,所以也方便调用。例如DIN系列等等



设计稿尺寸

本篇内容都是针对pc端内容,具体移动端以后有机会会分享。大多数B端设计师都知道以1440x900设计,但是在工作中会以埋点数据了解到事实上真实场景还是以1920x1080的尺寸为多数。毕竟时代不一样了。以1440做设计主要还是考虑从上下兼容的角度的。B端与C端不同,C端往往照顾大多数的用户群体或是主要消费力群体。但是B端一般不会放弃任何一个用户,哪怕定制化。这个在C端是不太现实的。因此适配对于B端产品来说也是尤为重要。



设计原则

上面的内容更多是阐述每个部分的内容,实际工作中设计Dashboard时不一定按照那个顺序进行,因此在此再强调下设计Dashboard的设计顺序以及原则。要先弄清楚目标用户以及使用场景,确定好关键的大约7个核心指标。将用户整个流程梳理流畅之后,再开始考虑Dashboard设计执行。


同时在设计执行上也要特别注意几个点:

1.突出核心指标(7个左右)

2.信息层级区分

3.减少用户选择,尽可能默认给到用户需要的数据维度

4.界面简洁严谨

5.避免过多颜色与不统一

6.数据维度正确图表选择



设计的注意事项以及建议

1.tob的设计师要了解业务所处的周期在什么样的阶段。在探索期建议dashboard的设计应用于市面上现成的组件进行搭建,以便与研发团队一起为业务助力。更好更快的发展。

2.在tob的dashboard设计中,设计师要特别注意数据表现的落地效果

3.当dashboard只在设计层面改版,并且改版内容过大时,推荐保留旧版入口,提前进行埋点用户以便应对用户对于大版本适应缓解焦虑。如果有新功能或功能调整要及时加入一些引导设计,以便减少用户的学习成本。关于引导设计的内容欢迎参考我的上一篇文章:《B端必看的引导设计(一)》

4.允许用户定制和共享dashboard,虽然不适用于所有的B端产品,如果类似于团队协作中多种角色共用一套的dashboard平台,可以考虑引入这个功能。几组定制模块可以满足于不同角色的用户需求,并且能够增加dashboard的使用率

5.dashboard关键信息数据尽量设计在一屏以内,作为数据可视化,内容快速浏览获知全局,并且完成任务是比较重要的。

6. 突出统计数据的变化并对异常情况作出反应

7.数字设置不一定要设置为右对齐,但是单位是金额,那么要将金额设置为右对齐,为了使用用户识别方便,快速比较。

8.设计完Dashboard一定要自查一遍,是否真的符合工作人员的使用场景。有没有理解不准确的地方。



最后

为什么b端设计师要懂得Dashboard,在很多b端业务场景中,有个特点,设计师常常会接到大量数据展示要求。如果设计师对dashboard缺乏认知,就有很大的可能性会造成信息杂乱,并且在Dashboard的界面中充斥着一些无关紧要的指标,这就是失去了Dashboard存在的意义。另一方面在b端产品中,Dashboard往往是以首页的形式出现的,是非常重要的。


文章来源:站酷   作者:一九互七

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

B端设计规范如何落地?

涛涛

“B端设计规范怎么落实下去是困扰很多设计师的一个问题,我总结一套从制作到落地的全部流程“。

在B端设计中,设计规范怎么建立才能落实下去之前一直困扰着包括我在内的广大设计师老铁们。设计师期望参与产品的每一个角色(产品,设计,前端开发,测试)都能遵循设计规范,结合设计规范内的内容,保证前端开发页面的还原度。因此从目标来说,其实设计师小伙伴与研发小伙伴的目标是一致的,但是实现起来其实并没有想象中的简单。在业务初始阶段对业务不熟悉,盲目就着手建立规范其实并不是一个明智的选择,很多B端的萌新小朋友会在业务尚未明确情况下就从第一个版本就开始制定设计规范,这会蕴含巨大的风险在里面,也不易推动落地。在初期有限的研发资源里只有了解了业务的实际场景,针对场景进行深度思考与分析,与规范涉及人员进行深度沟通统筹各方面资源,才能最后形成一套可以落地执行满足设计标准和业务需求的设计规范。


目录


01.B端设计为什么要制定设计规范?

02.什么阶段适合建立设计规范?

03.推动规范需要像需求一样去迭代!

04.B端的设计规范需要整理那些东西

05.搭建组件库你需要知道的几件事!

06.如何输出规范?

07.整理设计规范对个人的影响!






对产品来说

搭建原型可直接调用组件库,能搭建出高保真的原型。与设计师沟通更加顺畅,小的修改可以直接和开发沟通不需要通过设计师出图,极大增加了前期的节奏。



对设计师来说

当同一个项目由多个设计师共同协作时,由于设计理解不一致等各种原因都会出现设计控件使用混乱等问题,此时为了保证设计各方面统一性需要一份设计规范做引导。



对开发来说

按照设计规范建立好公共组件库,开发效率提升有了明显的提升,可复用的东西确定了下来不会频繁改动,设计走查的问题也会逐渐减少。



对测试来说

模凌两可的交互可以有地方看交互样式了,不需要再询问设计师。有更多的时间专注于测试功能上的问题了。






过往,设计师一般默认在启动一个项目的初始阶段进行设计规范的制作,具体时间点跟着版本节奏走。在1.0版本之前就着手规范的制作,其实这是很欠缺考虑的做法,其中蕴含着极多的风险因素在里面。此处分享个人工作中两个比较建议的规范建立时间点供大家参考。


2.1 业务处于探索期

在初始版本开发并未制定相应的业务组件。规范主要涉及到色彩,字体,间距,布局,栅格等通用设计原则以及常用业务组件的定制。此阶段搭建的规范具备高效性以及灵活性的特点,由于尚未搭建特殊的业务组件(当领导想要突然调转方向也不会很慌,改动较小就可以完成整体的规范转向)此时搭建规范组件库需要考虑到预留后续更改的空间。 


优点:灵活,满足业务随时更换的需求

缺点:体量小,仅能支持初步业务场景



2.2业务处于成长期

当业务已经迭代几个版本后,整个团队对业务的理解都不可同日而语。产品也正到了较为稳定的版本,此时若提出搭建组件库可以结合业务设计出符业务场景的样式,每个符合当前业务的组件逻辑和样式都不是初始阶段凭空想象出来的,当产品有一定的发展,有足够的业务逻辑,积累足够的业务场景,才能设计出有着自身业务的完善组件库。


优点:可以依据反馈沉淀组件库,发展到一定阶段整体变数不会太大

缺点:0-1阶段需要设计师对整体业务设计有比较足的把控力



我们公司在2020年初开启的项目,目前已经过了探索阶段处于向成长阶段过度,当时正值疫情高发整个项目都由我个人负责。现阶段整个公司在今年第四季度把系统性的产品和服务竞争优势提上了日程,毕竟没有设计规范对整个业务底层设计架构进行指引是很难做好产品差异化和规范化。也是趁此机会,设计可以针对性对现有的业务组件库以及规范进行一次全面的复盘,迭代出一个新的版本,在团队内推动落地以便更好适应产品的发展。




3.1做好产品定位

在B端的项目评审时,设计师就需要做好B端的用户画像,弄明白产品的目标用户以及使用用户的区别,他们通常并非同一类人。除了目标用户的差异外,不同用户的使用场景也是不一样的。只用弄清楚了各个角色的关系以及功能设计的逻辑,具体用户年龄,解决什么问题,才可以产出符合用户需求的设计。


3.2整理规范的内容和分类

在制定规范前,需要明确产品中主要有哪几种分类,将最基础的分类定义好方便后续针对分类内容进行整理。B端产品与C端产品既有共同性也有着很大的差异化,可以借鉴但是切忌生搬硬套C端的设计规范。




3.3排优先级嵌入版本迭代内

一套完整的规范蕴含内容是非常丰富的,将程序小哥的头发全部薅完也难以在1个版本迭代里面改完的。因此我们需要将自己作为设计规范这个项目的产品经理,针对现有的需求进行拆分,并排出优先级分版本迭代进产品里面,我们可以依据从大到小的原则进行优先级排序。对产品设计风格影响大的先排,影响小的后排。那么针对我们业务优先级排序是:设计准则>框架布局>组件>控件>场景。当然设计规范的制定不单单局限于设计团队内部,在嵌入版本里面时可与产品和开发多沟通,以便达到更好的落地效果。



上面的场景是否很熟悉,开发小哥每天都得忙很多的事情,如果不用线上文档进行同步的话,他们可能转头就会忘记哦~





4.1 页面布局


统一设计尺寸

据统计,目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900,以 1440 来设计的话是一个比较合适的尺寸,向上适配或者向下适配误差会比较小。



页面框架

主流页面框架主要分为左右栏布局和上下栏布局。


左右布局:顶部菜单栏、左侧菜单栏为固定结构,右侧主体内容根据分辨率进行动态缩放。

上下布局:顶部菜单栏为固定结构,主体内容进行动态缩放,需定义两边空白区域宽度



栅格布局

栅格系统的使用是为了解决自适应和响应式问题,从而更好地进行产品设计和产品开发。响应式栅格常采用 12和24 列栅格系统实现,以满足 2,3,4,5,6 分比布局等多种情况。固定宽度 Column,将间隔 Gutter 进行动态缩放。

  • 网格(Grid)

  • 栅格总宽度(Container)

  • 列和槽(Column&Gutter)

  • 边距(Margin)

  • 区块(Col-n)



我们的产品是在1440px的框架下进行设计的,采用左右布局的形式,将左侧菜单栏(100px)以及间距(24px)减去以后,就是自适应的内容区域(1292px)



4.2颜色/字体


颜色

主色的选择,需要依据使用人群,目标用户,使用场景,产品属性等因素综合进行考虑,在颜色使用上B端与C端的目的并不相同,C端颜色使用更大胆自由一些,以抓人眼球为主。而B端端使用则是以辅助产品功能为主,需要遵循对比原则,提升产品易读性。

小例子:以我们产品举例,在定义主色之前我向产品要来了关于用户人群的调研报告以辅助我去推测目标人群以及使用场景,并通过相关平台(七麦网)(艾瑞网)去找到竞品的行业报告。这些资料不仅可以帮你定义产品使用的颜色,还可以辅助你进行风格的定义,将这些报告放入评审的会议里面可以极大增强设计说服力和专业性。



通过鲸准与艾瑞网等数据相关网站可以轻松获取行业内的一些基本数据,这些数据足以让我们进行用户画像的初步建立了。



在规范好颜色以后,需要与前端进行同步,将颜色赋予单独的编号,方便双方就颜色上达成统一。如下图所示,一个编号对应一个RGB色值。



字体

B端页面可读性很大程度是由排版所决定端,而在排版中文字更是重点中的重点。


字体选择

在参考相关线上的成熟产品后,发现字体的渲染是一个很复杂的过程,首先我们需要知道在Web世界中存在着五大字体家族,江湖人称font-family:serif、sans-serif、monospace、cursive和fantasy。

font-family规定元素的字体系列,可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。



在实际使用场景中,用户的电脑一般是PC和Mac,但是这两个平台的屏幕材质、渲染方式都不一样,所以使用的默认字体也是不一样的。PC默认使用微软雅黑,而Mac默认使用苹方。

当我们打开一个网站,浏览器会读取font-family中的字体名称,并去检索用户电脑系统中的字体,如果有的话就显示,没有的话检索下一个。



字号与字重

字号的选择有多种方式进行参考,比如等差递增和等比递增的方式。我们自身在字体选择上选择由4为基数进行等差递增方式,在定义字号大小时默认采用偶数。



字重的功能是为了在文本种突出重点强调内容,在文本中常采用3种规格的自重(regular,Medium,Smlbold)

设定标题一律采用Medium

正文一律采用Regular,强调内容采用颜色区分大于字重去区分。

在使用字体时,我们需要判断其与背景色的对比度是否符合WCAG2.0的最低标准,即3:1,此处我们可以在创建文字样式时将标准标注进去。当我们使用文字样式的时候就可以随时提醒我们不要滥用。


4.3分隔与间距

在日常工作中,会常常出现多个小伙伴协同工作时采用的间距不一致的情况。虽然之前有进行口头上的统一(采用8px为基数)进行设计,但是还是会出现同一情况间距不一致的问题。在参照现有的成熟系统以后,依据亲密性原则与格式塔原理整理出符合现有业务的间距规范。




我会将间距分为竖向间距与横向间距。为了方便管理与沟通我会将他们进行尺寸上的区分(XS、S、M、L、XL)。


竖向间距:常用于模块与模块之间,一般采用24px,32px,48px

横向间距:日常设计中使用频率最高的间距,一般出现在组件与组件之间




4.4 图标规范

B端设计和C端设计里的图标无论是从功能,应用场景,图标的状态等方面都有非常大的差异,如果按照C端的方法去绘制B端的图标那简直是费力不讨好。在之前做C端的图标时常常需要考虑精致感与氛围营造,而B端图标功能则是降低用户认知为优先。为了方便图标端管理我将图标分为两大类型,分别为基础图标和业务拓展图标。且图标规定在3种尺寸分别为:XS=12px / S=16px / M=20px / L=24px以方便业务随时调用,且遵循偶数原则。


基础图标 :常规图标,复用性高且出现地方多

业务拓展图标:依据不同业务场景进行定制化的图标,常常跟着业务走


图标尺寸规范

与间距类似,将图标同等进行划分等级。12号字体搭配外框为12px 图标;14号字体请搭配 16px 的图标;16号以上的字体搭配 20px 图标,以达到更好的视觉效果:



keyline

通过keyline我们可以保证绘制不同形状的图标的一致性,在keyline的基础上画图标时基线可以给予我们一定的参考避免图标的比例失衡。可以说keyline是图标的栅格也不为过。



业务图标制作规范

除了常规基础图标外,针对业务场景制作的定制化图标如果不加以限制就会显得五花八门非常杂乱。当图标数量增加到一定程度时就会出现同一表意图标有不同的样式结果。因此有必要在保持图标美观易读的前提下对业务图标进行规整。




图标命名规范

随着业务增多,团队内之前的随意命名的习惯也开始凸显出弊端。在图标规范中,业务图标需要将每个业务区分开,每个业务都有着单独的后缀,这样可以让公用图标与业务图标更方便的溯源。



图标的图层整理

着业务线拉长,涉及的团队人员也越来越多。简洁整齐的图层不但能提升团队效率还可以让会影响接手工作小伙伴的心态。所以图层整理还是得纳入规范内的,此处不进行具体规范仅做提醒和警示作用。



图标交付/iconfont

在与前端开发沟通达成共识,图标制作完成确认后,将图标上传到阿里巴巴图标库中,更方便前端调用图标大小和调整颜色。如果开发需要自己去找到相关图标,也可以给予权限让开发从蓝湖上传图标(前提是得整理好图标到蓝湖上)





5.1组件库到底是什么?

组件库常可以类比于常玩的乐高玩具,每个组件都是积木,而产品相当于我们拼好的模型。我们可以根据业务需求,以“搭积木”的方式,让“模型”快速拼起来。但是并不是说我们可以随心所欲搭建积木,至少需要看一看“说明书”,而这“说明书”就是设计规范。产品、组件和规范差不多就是这样的关系。


5.2搭建组件库前需要知道的小知识


原子设计/拆分

在业务已经发展到一定体量情况下,需要将项目中具备服用行以及拓展性的模块进行拆解,对于B端产品来说筛选的时候会依据之前迭代的版本内容,把页面一一罗列出来,将可替换与相似的模块提取,并利用思维导图的方式统一归纳,并做成可以被替换的组件。组件的替换建议合成一个大的排期进行替换,避免了线上组件不一致导致体验问题。

以我们产品为例:

依据产品类型将组件拆分为:基础组件 、业务组件、数据可视化组件、常用模块。




原子设计

将产品拆分后,此时得到很多可复用组件。我们再依据原子设计理论针对性进行拆解直至拆分出5个层面

  • 原子(元素、要素)

  • 分子(组件)

  • 组织(模块)

  • 模板(原型)

  • 页面(填充内容)

从原子开始重新依据定好的视觉规范进行更改,再由原子组成新的分子。



盒子box

在与开发小哥沟通设计规范制定的过程中,常提到他们写CSS样式的时候是采用盒子(box)去写的。通过一个个盒子填充来将我们的组件元素放入其中,最终形成前端展示的页面。


走查时使用浏览器我们也可以看到开发写的盒子,了解盒子也可以方便我们走查时知道问题在哪。



5.2按钮

按钮设定有五种类型:主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。设计师可以依据自身业务属性,针对性修改按钮的圆角大小与描边,圆角曲率越大越柔越小越硬朗。除了按钮状态,在制定规范时还需要考虑到按钮的其他情况。比如按钮在放大使用时圆角曲率的变化。



按钮的尺寸规定

常用的按高度可设定为:24px、32px、40px、48px,超出48px的按钮都属于特殊按钮,需要进行单独设置的,宽度随着内容区域自适应。常规的按钮可分为:主要按钮(Primary Button ), 次要按钮(Secondary Button),虚框按钮(Dashed Button),失效按钮(Disable Button ),危险按钮(Danger Button),文字按钮(Text Button)等,对照着不同使用场景灵活运用即可。



按钮的自适应

按钮与按钮间的间距随着网页尺寸变化而变化,常设定几种断点规格进行选择。



5.3表单

表单承载着采集数据信息的功能,是用户在数据输入的核心模块之一。表单基础单位是由标签,输入框,填写提示,操作按钮构成。一行行列表单位组成表单界面。


常见的组合样式

据统计,表单内常见的组件样式有:文本框,文本域,选择器,开关,checkbox,radio,步骤条,上传/下载,标签页等。组件类别繁多,在选用组件时需要考虑其排布形式,在多列表情况下会着重描述这一点。


单列表单与多列表单如何选择?

在web页面内,在左侧导航条较小情况下会导致右侧输入区域空间较大,纵向空间不足的情况。若此时业务需求输入内容较多且难以采取分模块,分步骤交互时,采用双列或多列表单的形式提高空间利用率也是可以接受的。(ps:可以参照菲兹定律,采用多列的形式需要着重考虑文本框内容长度以及表单间间距的合理性)下面以自身业务为例子,列举在工作中多列表单出现的一些状态。




多列表单极端情况

采用多列表单后,随着复杂程度提升会出现各种各样的情况,此时设计师还需考虑到极端情况下表单显示问题。如标签过长规则(标签最好在最初阶段进行限制),带按钮如何进行换行,屏幕分辨率改变如何进行处理等。建议由设计师制定规则时与前端小哥进行深入沟通,以保证最终的落地效果。



让表单具有节奏感

之前我在表单宽度没有进行有意识的规范,导致整个表单呈现一种无序状态,通过有意识控制表单的宽度可以使我们对整体页面有着更好对把控,整体对品质感得到提升。可以对现有业务的表单进行梳理,整理出适合自身业务的表单长度单位。此处推荐阅读Ant_Design《整齐划一?不如错落有致》相信你会有更深的理解。



5.4 表格

表格,常用语展示数据,用户既可以在表格里面获取信息,也可以在表格内进行数据输入。相对于表单,表格可以进行多维度的数据整理与分析。其难点在于表格的组件交互联动多,以及数据展示的形式多。表格的信息密度很高是我们在B端页面设计中涉及最多的一个组件。


表格的构成

为了方便记忆,个人将表格分解为2大区域分别是:操作区域以及信息展示区域

操作区域:标题,工具栏,操作单元格

信息展示区域:表头,信息展示单元格,分页控件



表头与单元格

表头:表头分为带选框与不带选框/带icon与不带icon,需要注意的是表头上文字表意要清晰,简洁的表头能让用户更快明白此列的内容。此时需要与业务方沟通限制字数,若字数过长无法删减,则可以考虑使用tooltips。



单元格:在与开发沟通后发现,开发在写表格时并不与我们设计师的逻辑相仿,设计师在设计表格时是依据行与列的思维进行表格的设计,而前端则是通过许多的</tr>标签与</td>标签进行堆砌而成。因此在设计时将单元格规范好,前端将更容易还原好表格。



表格在页面中的样式规范

一般来说,表格内组件功能复杂,为了提升整体表格统一性与设计效率,我整理了业务上几乎所有的表格样式。整理需求后发现几乎所有的表格蕴含序列号与复选操作,故整理了一套通用表格规范以供小伙伴们参考。常规页面通过栅格,由列的数量决定列宽,与现在的主流框架组件一致;特殊页面可以与前端沟通后,在设计稿里面标注某单元格进行固定宽度,其他百分比缩放进行处理。



业务中表格的常见问题

此处仅提出几个个人业务中常见情况,更多的表格问题解决方案推荐查看CE青年《B端设计指南06 - 表格(下) 》。


有些特殊字段采取左对齐不美观该怎么规范对齐方式?

常规文本字段:可点击的字段、普通文本类、数字字母等,此类长短参差不齐的,建议采用左对齐的方式

特殊字段:日期、时间、字符数一致且比较短可控的,建议与表头居中对齐

业务字段:金额、状态标签、类型标识等业务性较强的,可根据相关特性与阅读习惯确定对齐方式


文本内容过长怎么解决?

当表格列数过多或者横向数据过长时,难免出现单个单元格内数据展示不下的问题,此时常采取换行的方式处理。(ps换行处理后的结果需要与后端沟通好,避免出现换行不分字段的情况)



单元格内操作项数量不一致时,该怎么处理?

此处建议采用平铺式进行处理,此方式适用方式比较广,稳定性较高(亲测)

将所有操作按照一定的预设排列顺序进行平铺,这种方式能够适应B端的大多数场景,将操作都简单平铺出来虽然看上去简单粗暴,但是在实际工作中,也是一种不错的处理方式



每一页表单展示多少行合适?

如果你经常与开发打交道你就会发现,开发对表格信息的处理逻辑是通过逐行从上到下进行渲染处理的。如果不对行数进行特定的规范,那么开发可能会采取渐进式加载(用户通过滚轮下滑的方式滚动到末尾再进行下一批量的数据加载)来解决表格内容过多的问题,这就会导致体验上的不统一。可以梳理当前业务,遵循尽量不让用户过多滑动为原则定制每页的行数。


5.5弹窗

B端业务中使用的弹窗主要分为模态弹窗和非模态弹窗,其最大区别在于对师傅会打断用户的操作流程,模态弹窗会要求用户必须给予操作。而非模态弹窗不会打断用户当前操作流程,仅仅起提醒用户的作用,非模态弹窗常常过一段时间会自动消失。



常见的模态弹窗有:对话弹窗,表单弹窗分,分步弹窗等

常见非模态弹窗有:通知,全局提示,警告提示,气泡提示,文字提示等




弹窗依据栅格自适应

为了方便规范系统内等弹窗位置和大小,将弹窗作为一个单独模块进行处理是一个不错的选择,业务中弹窗的性质一般都是横向居中展示。将弹窗纳入栅格体系中。前端小哥可以让弹窗的宽度随着列宽的大小变化而变化。



5.6组件库如何进行迭代

当我们把第一个版本组件库搭建完成后,对于它当更新和迭代需要依据业务当发展不断去维护。建议设计团队内有规划有目地去维护组件库当多样性,以保证组件库能随着业务的发展一起成长起来。因篇幅原因,此处遍不细讲此部分内容,如果大家感兴趣后期可以再单开一篇讲讲组件库的迭代流程,此处附上有赞的组件库迭代流程供大家参考。



小总结:组件库需要保持简洁和清晰,不能为了做组件而做组件。最好的状态是适合业务当前需求的状态,组件在于精细而不在于数量。臃肿对组件库不但不能提升整体团队效率,反而会拖垮整个工作的节奏。





搭建设计规范和我们日常处理工作需求类似,并非输出一份文档就结束了。我们还需要将做好的设计规范推广给包括设计小伙伴,PM和开发小伙伴的团队内外,并且需要得到团队内的一致认可才算是初步完成。


如何推广给PM

利益点:提升协作效率,减少工作成本


在启动设计规范的整理之前,内部宣讲让PM对于设计规范的搭建已经有了一个基础的概念。否则也不会分配资源给予时间去搭建整体的设计规范。可以通过提升PM与设计的效率和降低原型搭建成本去切入,通过组件库以及通用模版的搭建PM只需要极低的成本学习一下组件库怎么使用(我们的PM是使用sketch搭建原型)即可搭建高保真的原型界面。甚至完善好组件库后直接不需要设计的参与,开发通过原型组件库搭建页面。



设计团队内部如何推广

利益点:提升设计效率,减少人力损耗

设计规范一般由团队内小伙伴共同制定,基本上已经对规范的优势达成共识。因此主要讲讲如何更好在团队内部使用规范。


Library共享+更新日志

通过Sketch Library 共享组件库,并建立更新日志规范项目流程提升效率。



研发团队内容如何推广

利益点:封装组件,更少的更改,缩短研发流程


需要研发团队认可设计规范,前期前端的参与是必不可少的。在制作规范时设计师了解了前端开发的一些简单原理,前端开发也能及时了解设计师的想法,大家不再是各司其职而是串联起来共同协作,当规范确认下来前端就不会频繁改动组件,而且在有限的项目时间中。设计规范的统一极大缩短了设计和前端开发所需的时间,为后面的项目争取了空间。



小总结:本人时常听到一些小伙伴的反馈在公司内部设计师的话语权不够,公司不太重视设计。其实总结下来就是专业性得不到团队内的认可。设计师在工作中如何体现自己的优势是通过一次次的需求业务来体现的,许多小伙伴在做业务时既没有前期调研,也没有进行资料收集仅仅只是闷头开始动手做,往往结果不会太好。在处理需求时团队内部的同事也是可利用的资源之一,多与他们协作获取业务相关的信息,不仅能帮你站在全局的角度去思考这个业务,而且能让团队内部成员具有参与感,输出的结果当然更容易让他人认可。





收集信息能力

通过整理规范,需要收集目标用户,使用场景以及前期调研等众多资料,此时我们需要去发现信息以及整理信息。这一点在日常工作中也常常被使用到,日常中我们在做需要时也需要不断去挖掘相关对信息才能从容解决问题。


归纳总结能力

将收集好的信息进行分类整理,这要求需要一定对逻辑性。在设计基础框架时合理对分类可以协助我们处理好每个控件对层级,这项能力无论实在工作还是日常中都有着巨大对好处,可以帮助我们从一堆繁杂的事物中“提纲挈领”,换言之就是“化整为零”,做减法,提取出最关键对因素。


全面复盘能力

将信息归纳整理好后,需要对全局进行思考,全局的交互都需要考虑到位,比如什么情况下适合跳转页面,什么情况下适合给与用户弹窗。大体符合什么交互原则。除了对大体交互需要考虑到位,细节上也不可以忽视,比如异常情况,极端情况该如何去处理,组件之间该怎么去配合等。在日常工作中我们也可以逐渐有意识去培养此类技能,对项目全局思考的越多,那么对整体项目对把控能力也就越强,与他人合作也会越显得专业。


表达能力

在整理设计规范时,难免会遇到模凌两可举棋不定的时候。此时可以寻求向上或者向下的资源寻求帮助,具备良好的表达能力能迅速帮助我们将问题阐述清楚,我认为表达能力是设计师需要具备的重要技能之一。每次在求助它人或向他人汇报,都需要在全面复盘问题过后做到心里有数,将问题自己复述一次是否有漏洞或者没考虑清楚的地方。长此以往你表达的事情会更清晰,别人也更容易听懂你说的事情快速理解内在逻辑,那么说服别人推动工作的难度也会越小。


沟通能力

在多次与他人沟通,个人认为是对我本人帮助最大的能力了。我总结了几个和上下游沟通的小技巧希望能帮助到小伙伴们,在开始与他人沟通之前我们需要搞清楚我们沟通的原因与对象。


原因里面包含:

包含为什么要进行沟通?(推进项目还是告知)

想要达到什么结果?(自己能做多少妥协,底线在哪)

预判对方对这件事持什么态度?(支持/反对/无所谓)

希望对方做?自己的目的是啥?(求助还是说服)


对象里面包含:

和谁沟通?(上游还是下游)

他们对这件事了解多少?(比我多还是比我要少,需不需要简单讲解一些)

当然在沟通时还需要考虑方式和语气,这些都需要好后斟酌。也遇到过情绪不太好的开发小哥,这个时候反倒我们更不能将情绪激化,一般这些情绪化对态度过一会都会消散,可以采取冷处理等情绪过后换一种方式沟通看看。

文章来源:站酷   作者:Weiyehe 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

网站界面赏析,简洁,清新--蓝蓝设计

前端达人


网页中超过95%以上的信息都是通过文字的形式呈现。 然而,页面文字并非毫无章法的随意呈现。事实上,更具可读性、视觉效果以及独特排版和布局的网页文本设计,更能吸引用户,提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。






网站界面是基于浏览器的界面,随着人们对于用户体验要求的不断提高,BS界面的设计要求也越来越高,




接下来为大家分享一下我收集到的案例:

jhk-1612914009798.pngjhk-1615445795533.jpgjhk-1615445805715.jpgjhk-1615445810968.jpgjhk-1615445871742.pngjhk-1615445943142.pngjhk-1615445959669.png


--网站界面UI设计--

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服



中国风网站界面设计赏析

前端达人

       数字信息时代,互联网和智能手机快速发展,促使界面设计成为热门行业。中国传统文化博大精深,蕴含多种多样的中国元素。本文立足中国传统文化和界面设计,从视觉和交互角度着手进行分析,通过论证中国元素在界面设计中的优秀表现,探讨如何使中国界面设计走在时代的前沿。

下面给大家分享一些“国潮”界面

WechatIMG1473.jpegWechatIMG1474.jpegWechatIMG1475.jpegWechatIMG1476.jpegWechatIMG1477.jpegWechatIMG1478.jpeg


--bs界面UI设计--

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服



电商后台系统设计(二):订单管理

涛涛

电商后台产品,涉及众多模块,而以商品、订单、库存,为核心模块,模块之间存在大量交互。订单较为重要,它记录了所有的交易数据

对电商公司来讲,最核心最难做的有三部分:商品、订单、库存。商品与店铺、营销、评价等相关;订单与会员、营销、支付、库存、物流等相关;库存与订单、采购、WMS(仓储管理系统)、营销等相关。在这里我将结合自己在电商后台产品设计中遇到的一些问题与解决方案总结出来,仅供参考~


一.订单流程

订单流程是指C端用户的操作与后台发生交互的运转流程(含正向流程和逆向流程),如下图:

undefined当然,在实际业务中,订单流程远没这么简单。比如在用户结算付款/取消订单/退款/退货流程中,可能还会涉及到满减、优惠券、积分抵扣等情况。又或者说用户下单后,电商平台与WMS的数据交互,都是整个订单流程中很关键的节点。


二.订单状态

从订单流程图可知,正向流程可分为待付款、待发货、待发货和已收货/已完成/交易成功、四个阶段,再加上交易关闭(逆向流程产生)。下订单流程涉及到的模块主要有支付和库存,对于用户端来讲订单在各个阶段所涉及到的主要操作如下图,分为商品行与订单行的操作(是因为订单的逆向流程中申请退款等售后操作是商品维度的操作)对于商家后台来讲,订单各个阶段端主要操作有发货、审核、退款、修改地址等(可参考:三.订单列表)。

这里特别说明一下交易成功,是指在收货后N天后,此时除去售后问题外,渠道侧会涉及到平台和支付渠道结算的问题,货款需要从支付渠道流入平台账户;商户侧会涉及到平台需要生成待结算清单问题,明细该笔订单商户结算款是多少。


三.订单列表

订单列表页由搜索区、列表区和操作区组成。

1.搜索区域主要包括:订单编号、订单状态、下单时间、买家姓名、支付渠道、订单等,为了提高工作效率,需要将常用的重要的条件作为筛选项,同时将可以收起次要筛选项,以便于快速查找,一屏展示更多订单。

2.订单列表区的信息来源与订单详情,信息种类以及要素较多(可参考:四.订单详情信息价格图)所以后台列表中不可能直接显示订单相关的所有字段,需商家更关注使用频率更高的字段比如订单编号、订单状态、退款状态等信息。而剩余的其他信息,可以通过下级订单详情页面展示。


undefined

四.订单详情

订单详情的信息包括商品信息、订单信息、用户信息、支付信息、物流信息等,如下图所示:

1.用户信息包括用户账号、用户身份等级(普通会员/VIP)、用户的收货地址、收货人、收货人电话等组成。用户身份等级信息可以用来和促销系统进行匹配,获取商品折扣。

2.订单信息这里要补充一个概念-拆单。拆单有两次,一次是订单层面的拆单-在用户提交订单之后、支付之前拆单,这个拆单主要是因为多商品合并支付时,各个商品属于不同商家,此时订单需要使用父子订单进行区分。父订单是记录一次下单和合并支付的依据,子订单是买家和商家跟踪物流,售后、结算的依据(对于合并支付的订单,京东是拆为两个不同的订单编号,淘宝也是按照店铺拆为两个订单,但是订单编号相同);二次是商品层面的拆单-在用户下单之后,商家发货之前,去拆分发货单(SKU层面),这个拆单由于商品分属不同的仓库/商品品类需要单独打包发物流。

3.物流信息分两种业务场景来讲。一,平台自营商品通过WMS系统完成订单出库的是可以自动完成包裹物流信息的回传;二,第三方店铺通过自己的仓库打单发货的情况,是需要商家在后台系统手动上传包裹物流信息。补充一点:现在绝大多数物流公司都开放了物流接口,可以根据物流接口获取物流状态信息。当用户收到货后,可以根据物流公司反馈的签收结果,设置提醒用户确认收货。


五.逆向订单

1.修改订单,此操作发生在预下单过程中,用户没有提交订单,可以对订单一些信息进行修改,比如配送信息,优惠信息,及其他一些订单可修改范围的内容,此时只需对数据进行变更即可。值得一提的是,在预下单也就是确认订单时,是不支持用户修改选购商品的规格和数量的。这是为啥呢?










2.取消订单,此操作用户主动取消订单和用户超时未支付,两种情况下订单都会取消订单,而超时情况是系统自动关闭订单,所以在订单支付的响应机制上面要做支付的限时处理,尤其是在前面说的下单减库存的情形下面,可以保证快速的释放库存。

3.退款,待发货订单状态下取消订单时,分为商户退款(库存不足或者其他原因)和用户申请退款。其中用户退款分三种场景:商家还未发货,系统应该支持用户申请退款(无需审批);若商品还未出库,则需要推送至WMS从而在仓库内进行拦截,拦截成功则暂定出库,释放库存,同步订单系统同意取消订单,同时进入退款流程;若商品已出库,系统不支持退款申请,双方达成一致后,由卖家点同意退款系统更新退款状态,对订单进行退款操作,金额原路返回用户的账户,同时关闭原订单数据。

4.退货退款,需要与商户进行协商,如果协商过程存在争议平台客服介入进行协调。如无争议,商户审核通过后告知用户退货流程及退回的收件信息,进入退货流程后,商家收到用户退货商品后,库存系统进行补回,退货入库,订单系统确认后进行退款,同时关闭订单。


六.总结

以上是订单管理层面的一个整体总结和说明,在完整的电商架构中其实还有调度中心(串联WMS系统与订单管理中心)后面争取在梳理库存的时候一起分析总结一下这个模块。


文章来源:优设 作者:依拳超人

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

电商后台系统设计(一):商品管理

涛涛

电商后台产品,涉及众多模块,而以商品、订单、库存,为核心模块,模块之间存在大量交互。本文将总结最基础、最核心的商品管理。

对电商公司来讲,最核心最难做的有三部分:商品、订单、库存。商品与店铺、营销、评价等相关;订单与会员、营销、支付、库存、物流等相关;库存与订单、采购、WMS(仓储管理系统)、营销等相关。在这里我将结合自己在电商后台产品设计中遇到的一些问题与解决方案总结出来,仅供参考~


1.商品的基本概述

根据商品的公共数据库,主要包含品牌库、属性库、通用规格库、税率库、生产信息库(产地)等信息,先定义出SKU(库存量单位,例如:大头笔+黑色,能够确定一个SKU),然后加上商品描述和规格价格,就成了商品。


2.商品发布/新增

维护完商品基础属性、特有属性、销售属性并且保存之后,需要维护“商品详情”(一般通过文本编辑器来实现)即可发布为一个待上架(销售)的商品。

其中有几个属性需要说明一下:

3.商品上下架

商品管理中的商品分为在售商品(上架中的商品)和待售商品(下架中的商品),发布商品时也可以设置自动下架或者定时上架规则。

将商品分为在售商品和代售商品两个模块,只要便于平台运营人员或者商家管理商品。在日上运营过程中,商品下架的原因有很多,对应的处理方式也不同,例如系统自动下架、商家自主下架等。


4.商品编辑

商品编辑是对已经发布的商品的信息进行修改,通常不允许编辑上架中的商品以防止销售属性被篡改从而影响之前生成的SKU数据。


5.商品删除

商品删除是对不在进行销售的商品删除,上架状态的商品不可删除。


6.运费模版

在商品管理模块中有设置运费的入口,直接进入到物流系统设置运费模板,设置好运费模板之后,在发布(新增)商品时直接使用。


7.总结

在电商平台上的个体商户,由于自家SKU数量比较少,从录入商品参数到商品拍照、上架一个人基本都能解决。

但是对于自营平台过万的SKU,这样的方式显然是不行的。需要不同部门/人员来负责:比如采购部会负责商品基础属性的批量导入录入,运营部门负责维护商品主图、商品轮播图、商品详情图以及各种价格等工作的维护。商品管理是电商平台的基础数据,打好基础,方能建好高楼。

文章来源:优设 作者:依拳超人

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

电商后台系统设计(三):库存

涛涛

电商后台产品,涉及众多模块,而以商品、订单、库存为核心模块,模块间存在大量交互。库存决定商品是否可售卖,下单是否能成功。

      电商中的库存管理是为了保证前台商品的正常售卖,库存的管理和仓库密不可分,而仓库又和销售、采购相关,以下是简单的示意库存变动的影响因素。

A. 销售订单-减库存;B. 销售订单-锁库存;C.售后退货-补库存;D. 仓库调拨-增加/扣减库存;E.预售-锁库存 ;G. 采购-增加库存;H.盘盈盘亏(盘库存对账,增加/扣减库存)。这里说一下盘盈盘亏,盘点主要是用于管理仓库实际值与系统值的差异的。理论上来说,若商品的各个环节数据都准确的话,实际值与系统值应该是一致的。但实际中可能会有一些系统检测不到的因素影响了真实的库存,这就需要仓库进行周期性的盘点了。盘点之后,若实际值与系统值不一致,就需要把系统值修改正确,这时,可以通过人工或者自动生成出入库单的形式去修改系统值,而且修改的这部分数据是需要做出标记的,以便于财务之后的对账。(当然,实际设计中如何处理这部分差异,还要看业务性质和需求)

     根据库存不同应用阶段,将库存管理体系分层为销售层、调度层、仓库层,主要是各层的职能不同,驱动库存发生变化的依据也不一样。

销售层
      销售层的库存决定是否可售卖,下单是否能成功。在秒杀时,活动库存决定了是否可以秒杀成功;预售时,预售库存决定是否可下定金预定。

   ◼︎可销售库存:网站前台显示的库存,可以对外售卖的库存。当“可销售库存>0”时,前台网站则会显示商品可销售;而“可销售库存=0”时,前台网站则会显示商品缺货。

   ◼︎锁定库存:用户下单锁定库存,支付后扣减库存。锁定库存指的下单时占用库存,保证客户下单后支付的订单都是有货可发,而不会相互冲突。

   ◼︎已销售库存:统计商品已售数量。当支付成功,商品就算作已销售库存。如果取消订单或售后就需要走相应的库存变动流程变动。

   ◼︎活动库存:主要是做促销活动(例如秒杀)时,分配固定数量的商品给相应的活动,这时候就需要从可销售库存中占用相应数量给活动库存。这部分库存也是走相应的锁定、扣减逻辑。

   ◼︎预售库存:这部分是虚拟库存,主要是拉动式需求,例如B端订货、双十一定金预售等。预售同样走相应的锁定、扣减逻辑。不同的是,预售的订单需要备货之后,再推送至调度层。

      其中,可销售库存在商品维护界面仅有一个对库存数维护的地方,也就是实际可售库存。对于大平台的入驻商户来说,通常采用手动录入方式(有开发能力的可以做系统对接),让商户自己维护SKU的销售数量。具体填写多少由商户自己决定,这个填写的数字就是实际可售库存。而对于平台自营来说,公司通常都有自己的仓储系统,每个SKU都有明确的存储记录,并且部分SKU参与内部任务(如调拨、拍照、战略储存等)使得当前时间不可售。因此实际的SKU库存可能并不等于全部可售,具体实际可售库存需要通过仓储系统经过统计同步到商户模块中,而不是由买手自己手动维护。

调度层
      调度层相当于订单的分配中心,将订单转化为发货单,按照调度规则决定哪些sku由哪个仓库发货。
调度层的库存分为单仓、区域、总库存三个维度,区域库存指的是这些仓库只发某一区域的,例如京东华中地区的仓库配送华中地区,北京就无法从华中地区的仓库发货。总库存即所有仓库的sku库存总计。

   ◼︎账面库存:仓库中的实物库存,只要是未出库的都算在账面库存中。

   ◼︎可用库存:仓库中可供发货的库存。这部分库存是可供调度的库存。

   ◼︎在途库存:下了采购单但是尚未入库的库存,在途库存理论上部分是可供销售的,例如T+1的在途库存,就是1日之后就可以入库的sku。

   ◼︎已用库存:在调度层已分配的库存。

      调度层在某些方面上和前端库存有些重叠,前端库存也会分区域和总库存,但是不同的是,调度层对应的是实物,不会存在虚拟库存,流到调度层的订单经由调度后推动至仓库发货。


仓库层(WMS库存)

      仓库层的库存对应的是实物库存,出库入库盘点都会引起仓库库存的变动。仓库层在整个库存管理体系中尤为复杂,仓库内的出库流程可参考上图-库存关系流转关系图。(其中波次拣货是指将几个订单合并拣货,可以提高拣货效率。)

   ◼︎可用库存:发货单推至仓库后,仓库可以用于发货的库存,不包括锁定的库存。

   ◼︎锁定库存:发货单推送至仓库后锁定库存,锁定时同时去锁定库位库存。

   ◼︎已出库库存:已经确认出库的实物库存。

   ◼︎不可用库存:盘点时发现的不良品,需要报损,从可用库存转化为不可用库存。

文章来源:优设 作者:依拳超人

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



三八女神节首页

前端达人


转自:站酷

作者:柯大仙


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

眼镜类官方网站

前端达人



转自:站酷

作者:动之以情丶


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

B端产品弹窗以及设计方法

涛涛

弹窗作为应用的辅助窗口之一,在B端产品中占据重要作用,很多产品甚至大部分功能都需要在弹窗中完成。有些弹窗会被用来承担复杂的设置、有些弹窗会被频繁调用、有些弹窗需要提供更详细和更结构化的信息,如何处理好弹窗在整个任务流中的交互对UI来说非常重要,因此本文主要探讨B端产品中的弹窗设计和规范。文末会提供可供调研学习的B端网站。


如果你想了解B端系统图标的设计方法,可以浏览上一篇《小白适用:如何快速掌握系统图标的设计方法》,欢迎讨论指正。


一、弹窗、对话框、窗口,你分清了吗?


1、弹窗(popup)


不知道你们有没有思考过“对话框”和“弹窗”的区别,我们平常所称呼的“弹窗”主要着眼于动作,意思就是弹出来的窗口,是泛指,在GUI(Graphical User Interface)屏幕中几乎所有弹出来的对象都可以称之为“弹窗”。


在常用的两个前端网页开发组件Ant Design和ElementUI中,没有单独命名为“弹窗”的组件,都是细分在各个功能分类中。比如Ant Design中相关的细分就有警告提示、全局提示、对话框、通知提醒框、气泡确认框等,而ElementUI中则又是不一样的细分法,除了分类方法和命名不一样,归根结底达到的目的是一样的,以上我们都可称之为“弹窗”,当然在工作中用细分的称呼会更专业更明确。


2、窗口(window)


这里的“窗口”对标“对话框”和“弹窗”的概念,窗口是承载应用程序的区域,应用程序的窗口被打开,则表示该应用程序正在运行中。窗口可以移动、可以放大缩小,主要有二种姿态,一种是“独占式”,一种是“暂时式”。顾名思义,“独占式”就是需要占据大部分屏幕的应用,ps、ai的窗口就是“独占式”窗口,而“暂时式”则大部分时间在后台运行,比如音乐播放器、杀毒软件等,只需在必要时打开即可。



一个应用通常由一个主窗口和若干辅助窗口构成,弹窗就是典型的辅助窗口之一。


3、对话框(dialog)


对话框强调了用户与计算机进行对话的过程,是叠加在应用主窗口上的弹出框,一般在对话中它会给出消息或要求输入。当对话完成后,即可关闭对话框。说人话就是,对话框一般需要用户进行操作,当用户输入或者点击“确认”、“取消”等按钮时,计算机会根据指令进行工作,这是一个人机“对话”的过程,因此称之为“对话框”。



无论在现实中还是界面交互中,我们都不希望对话被打断,所以对话框通常是模态的(下文会解释模态和非模态的定义)。


梳理完三个容易混淆的概念之后,接下来主要从弹窗的二个角度展开讨论:弹窗的分类和应用场景;弹窗的设计细节和技巧。


二、弹窗的分类和应用场景


1、弹窗的分类


弹窗可分为两大类型:“模态弹窗”和“非模态弹窗”。


模态弹窗:用户必须给予弹窗反馈,除非点击关闭或者操作完成,否则弹窗会一直在。形式上来说就是给当前页面添加蒙层,使用户将注意力集中在弹窗上。上文提到,无论在现实中还是界面交互中,我们都不希望对话被打断,模态弹窗不会轻易被打断,所以对话框通常也都是模态弹窗。



模态弹窗的常见场景:你打开了一个应用的模态弹窗后没有管它,然后切换到其他应用程序中去,等你忙完回到原来的应用时,那个当初的模态弹窗仍旧在那儿等你。这就是模态弹窗,虽然看起来僵硬死板,但是它的目的和使用范围通常是非常清晰的。


非模态弹窗:不需要给出反馈,不影响用户的其他操作,主要有属性配置弹窗、Tooltips、消息通知、气泡框等类型。


下图红框中就是典型的非模态弹窗,它们可以同时开启且互不影响,不会影响主程序的进程。



非模态弹窗的另一个特点就是:实时生效。点开非模态弹窗的同时仍然可以看见主界面,主界面会根据你的操作实时变化,你可以随心所欲地不断选择、改变、选择、改变,而模态弹窗则无法在你点击其中一个表单的当下立即做出改变。


下图例子就是非模态的属性配置弹窗。



2、模态弹窗的应用场景


1)通知公告类弹窗(通常是重要的信息,需要加强用户关注度)


营销弹窗

出于营销目的,这类弹窗都会第一时间出现在你面前,直到手动关闭,它的特点就是不用登录也会出现,提高曝光率,便于拉新和转化。


公告通知弹窗

主要是为了将一些重要信息通知给用户,这些信息要么来自一些被触发的事件,要么来自应用开发者的信息,一般在用户登录后第一时间弹出,确保用户不会错过。需要注意的是,在应用的通知中心一般也需要保留这类重要或者高级别的通知,以便用户可以随时查看回顾。



提示类消息弹窗

提示类弹窗是由应用程序主动弹出的消息,主要有三种状态:错误、警告、确认。通常是用户进行某项操作后给出的反馈信息,会中断当前工作流,属于阻塞型提示。



以上都属于通知公告类的“模态弹窗”,特点就是一般不需要用户具体操作,用户将其关闭或者点击“确认”等按钮即代表用户已经接收到该消息,弹窗就完成了它的任务。


2)操作配置(B端应用中大部分的模态弹窗都为这种类型)


简单配置(表单少,操作清晰)


“简单”意义上的弹窗可以理解为只有平铺的表单让你选择或输入,交互清晰明了。比如创建项目、分享链接、更改名称等操作。



标签页弹窗


有些应用的功能配置中有很多复杂的属性,简单平铺的弹窗无法满足需求,需要分层分类归纳,于是从20世纪90年代开始出现了选项卡/标签页弹窗。它的优点是合理利用了空间,也能让用户更好的理解信息层级。


mac os 8.5系统的弹窗(发布于1998年10月)


monday.com的配置弹窗(简洁的标签页)


标签页弹窗的设计必须合理且适度,找到信息之间的因果关系,仔细斟酌并加以连接整理。同时,单个弹窗中的标签页不宜过多,一般不超过五个(动态可增减的标签页除外)。



如果你的标签页过度堆叠,你需要尝试改变交互方式,重新整理信息。一种办法是增加标签页的深度,将能够归纳在一起的内容尽量整合,放置在单个标签页中;另一种办法是拆分信息,分成多个简单的弹窗。


下图中的例子就是第一种办法,整个弹窗有三个标签页,但是单个标签页中又划分了更详细的结构化信息,是一个典型的标签页少但信息量大的弹窗。



流程步骤弹窗


流程步骤弹窗与标签页弹窗接近,区别就是步骤弹窗需按顺序进行,一般上一步未完成之前无法进入下一步,用户注册常用这种方式。


3、非模态弹窗的应用场景


1)属性配置弹窗


属性配置弹窗主要为了让用户改变某一对象的属性,可以是局部属性也可以是全局属性。


属性配置也可以用模态弹窗,如何选择用“模态”还是“非模态”?当你需要让用户实时看到界面的变化或者表单项简单的时候可以选择“非模态”,如果操作复杂或者信息加载比较耗时,则采用“模态”更合理。


下图为实时生效的日期选择弹窗

2)下拉菜单


下拉菜单几乎都是非模态,它的优势明显,没有复杂操作和各种表单,只需要鼠标划过点击即可,快速。


3)消息提示


上文中应用级的消息提示通常是模态弹窗,而非模态的消息提示弹窗则通常从页面的顶部或者右侧弹出,这类弹窗可以长时间驻留在屏幕边缘,也可以一段时间后自动消失。


4)气泡框


点击按钮时,弹出气泡式的弹窗就是气泡框,气泡框可以针对元素进行简单的操作,尺寸也会根据内容大小不一。


5)Tooltips


Tooltips跟上图的气泡框很类似,区别在于Tooltips更轻量,属于页面中最小的弹窗类型,用于功能的提示说明,通常都是文字,背景用深色来与主界面拉开层次。


三、弹窗的设计细节和技巧


1、标题


一般来说,如果是明确的属性配置弹窗都应该有一个标题来说明用途或功能,以及关联的动词来方便理解。比如“创建列表”、“删除列表”、“修改配置”、“配置参数”等,不同标题对应不同的功能场景,前提是方便理解。另外,动词在名词前面或者后面都可以,注意统一规范即可,不要一会儿在前一会儿在后。


标题字号一般比默认文本字号大2px或4px,也有应用为了突出标题,选择使用更大的字号,但大的字号也应该符合文字规范,而不是随意使用。



2、关闭


模态弹窗应至少包含一个以上的关闭方式,常见的弹窗关闭方式有4种:(1)、右上角的关闭按钮;(2)、弹窗底部的“取消”按钮;(3)、弹窗外的任意区域;(4)、一段时间后自动消失。


1)关闭按钮(弹窗外、弹窗内、弹窗上)



“关闭”按钮在弹窗外:常见于营销弹窗,一方面按钮远离弹窗,比较隐蔽,拖延用户关闭弹窗的时间,提高信息的曝光率。


“关闭”按钮在弹窗上:版式设计中有一个“破型”的概念,是一种打破规矩的设计技巧,能让画面快速吸引眼球,所以营销类弹窗经常采用这种设计方法。这种概念可以理解为,我们希望用户关注于被强调的部分,常见的场景就是ios系统批量删除App的时候,应用图标左上角会出现“移除”按钮。这种方式强调了“关闭”按钮,视觉上增加层次外,用户的关闭体验也更佳,减轻干扰性弹窗对用户的负面情绪。


“关闭”按钮在弹窗内:这是应用最广泛最不容易出错的方式,对用户来说,固定在弹窗右上角的“关闭”按钮代表了安全感,在误操作或者想中断操作时我们会自然而然地去右上角点击“关闭”。


2)弹窗底部的“取消”等指令性按钮


弹窗底部的按钮一般有2种功能:(1)、取消或者确认;(2)、进入下一步流程。基于大多数用户右手掌握鼠标的习惯,一般按钮居右下角的设计方式更广泛。这些按钮上的文字大不相同,代表了对计算机的不同指令,但相同的结果都是关闭了当前弹窗。


有些应用也会采取按钮居左的设计,这种方式有一个优点就是减少误操作,让按钮远离鼠标点击热区。



3)、弹窗外的任意区域


这种方式一般用于模态弹窗,除了弹窗中的关闭按钮外,点击弹窗外的任意区域关闭体验更佳。操作配置类弹窗不建议采用这种方式,容易误操作导致正在配置中的弹窗被关闭。


3、字号


B端弹窗的标题字号通常比内容文本大2px或4px,常用字号为12px、14px、16px,14px为默认文本字号,12px为辅助说明字号,也有紧凑型页面将12px作为常规字号。无论选用何种字号,都应跟主界面的字体规范保持一致。


4、排版


左对齐:弹窗中应用最多的对齐方式,适合表单较多的配置类弹窗。


居中对齐:常见于消息提示类弹窗,适合图文结合或者信息较少时的排版方式。


两边对齐:两边对齐的方式让弹窗看起来更规整,适用于平铺的配置类弹窗。一般表单较多的情况下不建议使用两边对齐的方式,一方面左对齐比两边对齐看起来更有层次,另一方面多表单时两边对齐会使弹窗看起来冗长。


除了对齐方式,表单的排列是B端弹窗中最令人头疼的一块内容了,在一些复杂的操作弹窗中,常常包含各种类型的表单,例如下拉框、输入框、日期框、穿梭框以及各种组合模式的表单项,很容易让表单看起来凌乱,也影响了交互操作。


单行一个表单项:常见的表单排列,适用于表单较少的排版方式。


单行多表单并排:在复杂场景中,单行只排列一个表单项会让弹窗超长,因此会采用多个表单并列分布的方式。这种方式存在2个问题:(1)、如果表单的标题长短不一,看起来参差不齐,下图中的表单标题一样长是最理想的场景;(2)、横向距离长,导致弹窗过大。


标题与表单分行排列:越来越多的应用采用这种表单排版方法,这种方法可以兼顾更多场景,可拓展性也更高。这种方法会增加纵向空间的占用,不过眼睛焦点的纵向浏览比横向浏览获取信息效率更高,所以在表单复杂的情况下,相比于上一种方法也是一种更优解。


表单的排版不只局限于一种,我们需要根据表单内容来设计。但是需要注意3点:

(1)、当表单标题长短不一,上下无法等距排列时,我们要尽量将标题和表单分行排列;

(2)、一行不要出现太多的表单项,一般来说弹窗中最多一行排列三个;

(3)、表单的灵活性很强,哪些需要宽度固定,哪些需要根据内容可扩展可换行,我们都要在设计中加以规范说明,多考虑可能会出现的样式问题,提前规避。


5、弹窗尺寸


弹窗是一个容器,容器的大小取决于放置其中的内容物。这里主要讨论场景复杂的对话框的尺寸规范,其他例如Tooltips之类可作为单独的组件在需要的场景直接调用即可。


对话框的大小主要根据内容而定,B端应用中,一个尺寸无法满足所有类型的弹窗需求,所以我们要设定几种常规尺寸,一般可设定为4种:S(通知提示类)、M(配置简单)、L(配置复杂或者扩展详情)、特殊(根据实际情况而定)。pc的小屏幕分辨率为1024*768,所以高度尽量控制在600px以内(除去导航栏、工具栏高度),宽度控制在1000px以内,如果你所设计的B端产品在某个固定的场景中使用,也可以根据使用场景而定,原则就是要让弹窗能够一屏展示完全。


6、设计技巧:巧用sketch组件


这里主要分享一个小技巧,对于弹窗来说很实用。sketch右侧属性面板有一个“调整尺寸“功能,非常适合各种组件化的应用。不同场景下我们会需要不同尺寸的弹窗,有了这个功能,我们不需要每个弹窗都画一遍,只需要创建一组基本的弹窗规范,其他尺寸可以根据所需场景调整。



未调整过的组件不能随意更改尺寸,否则将变形不可用。


创建弹窗组件时,把弹窗里需要固定不便的尺寸参数设置好。(设置方法:靠左的左边固定,靠右的右边固定,对角的靠两个边固定,分割线高度固定,文字图标宽高都固定)。


设置好后的弹窗组件即可在设计稿中随意调整大小,固定参数不会发生变化,因此我们在设计规范中只需要做一种或二三种常见的弹窗样式即可,不需要把设计稿中的每种尺寸都放到设计规范中。


表单同理,在组件中设置好参数后,调用时可以根据情况替换图标、文字和宽高,非常方便。

结语


在B端设计中,随着数据量的增加和业务线的扩大,设计师在设计时,常常需要考虑到交互的可扩展性,我们设计的交互至少要满足未来半年到一年的产品应用。因此作为使用频率很高的弹窗,我们在设计时尤其需要考虑全面,不只为了满足当前的场景,也要考虑未来可能应用的场景。


最后碎碎念一下,这是一篇从2020年跨越到2021年的文章,加上拖延症,写了很久...原本只打算简单的分享和总结,结果越写越多,越写越扩展。其中很多内容是自己在实际工作中遇到的坑中摸索出来的,做个总结也便于自己的成长,欢迎各位大佬们批评指正。


文章来源:站酷  作者:time不休 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档