首页

B端系统设计全方位指南

资深UI设计者

什么是B端产品?

B 端产品也叫 2B(to Business)产品,使用对象一般为企业客户或组织。B 端产品帮助企业或组织通过协同办公,解决某类管理问题,承担着为企业或组织提升效率、降低成本、控制风险从而提高企业收入,减少企业内部损耗的重要职责。B 端产品的工作是合理实现企业需求,提高产品核心竞争力,并提升市场价值。在国内互联网语境中,B 端产品的狭义解释也基本可以和面向企业的 「网页程序」 等同,用更接地气的称呼可以叫「管理平台」、「管理端」 。

B 端产品大致分为两类,一种是支撑前台产品的,一种是管理各种资源的,前者就是我们熟悉的后台产品,后者就是给各个企业服务,提高各个企业工作效率的 B 端产品。

1. 支撑前台产品的:

C 端产品线的后台产品,比如我们常用的淘宝、微信、饿了么、美团这种 C 端产品,他都需要有个后台进行各种前端信息的管理。

平台级工具产品,比如微信公众号、头条号等对用户和文章的数据实时统计,可编辑文章,回复消息等

2. 管理各种资源的:

  • OA 办公系统(OA 系统是通过程序的形式使办公流程自动化的解决方案)
  • CRM 系统 (CRM 是企业专门用来管理客户的工具)
  • SaaS 系统(SAAS 通常它指第三方提供给企业的线上软件服务,它既可以包含前面几种服务类型,也可以是一些更细化的需求。)
  • ERP 系统(ERP 是对企业所拥有、调动的资源进行统一管理的平台)
  • WMS 系统(WMS 是仓库管理系统的缩写,通过入库业务、出库业务、仓库调拨、库存调拨和虚仓管理等功能,综合批次管理、物料对应、库存盘点、质检管理、虚仓管理和即时库存管理等功能综合运用的管理系统)
  • TMS 系统(TMS 是运输管理系统能够对物流公司的所有车辆进行实时跟踪(结合 GPS 系统),保持信息流和物流的畅通。)
  • 呼叫中心客服系统
  • FMS 财务管理系统

B端和C端的区别

1. 从定义上:

  • B 端:To B 就是 To business,面向企业或者特定用户群体的企业级别产品;
  • C 端:To C 就是 To customer,产品面向普通大众消费者。

2. 从用户群体上:

  • B 端:产品一般是多种角色,有决策者、管理者和执行者,B 端往往是基于公司层面多人对某一问题解决方案进行整体评估。
  • C 端:用户群体较单一,或者是专注于某一领域群体,可根据性别,职业或行为偏好等关键属性进行分类。

3. 业务场景

  • B 端:业务场景多、逻辑复杂,根据每个人角色需要有不同的解决方案
  • C 端:业务场景较单一,或者专注于某个垂直的使用场景。

4. 用户的诉求:

  • B 端:控制成本、提率,注重安全和稳定
  • C 端:重视人性和用户体验

5. 盈利模式:

  • B 端:有明确的盈利模式和用户群体。
  • C 端:大部份 C 端产品都是使用免费,以此吸引用户使用,等积累到一定数量需要探索变现的路径,或者寻找其他变现的路径。

B端产品该如何设计?

了解了 B 端和 C 端的区别,B 端产品的实用性大于美观性,能切实解决问题、配置资源的 B 端产品才是一个好的 B 端产品。在设计上对于操作和展示内容无关的元素,越少越好。很多人刚开始接触 B 端,会热衷于以 C 端视觉标准进行设计,对于真实的使用体验来说显得过于冗余、炫技。那么在 B 端设计中该如何思考去设计呢?下面我以设计前、中、后的三个方向去阐述我在做 B 端设计中的一些思考:

1. 设计前:

需求分析

  • 分析产品的背景是什么,要做什么,要给用户怎样的视觉感受?他的竞品状况是怎样的进行一些分析(一般 b 端的产品竞品是极少的),了解一些行业内的资料。
  • 目标用户群有哪些?不同角色的用户有哪些具体的权限?(这里简要了解下大概的人群,没必要像 c 端产品那种那么明确)
  • 设计的产品主要解决用户或者业务上的哪些具体痛点,复现分析下使用场景,在需求分析阶段,要对产品本身和行业本身有一些基本的认知。

使用场景、硬件情况

  • 了解用户的使用场景,可以有助于我们复现分析用户是如何使用我们设计的界面的。
  • 用户的硬件情况,了解主流用户的屏幕分辨率是多少,根据主流分辨率做设计稿。现在 PC 主流的分辨率占比排名前三的是 1920*1080、1366*768、1440*900,以 1440 来设计的话,向上适配或者向下适配误差会比较小。这里也不是必需,如果用户全部都是用小屏笔记本办公,在 1920 设计稿上做适配可能小屏幕上展示会出现滚动条,会比较拥挤。

梳理交互流程:拿到需求后切勿打开花瓣站酷一阵撸,一定要对需求进行梳理(有的公司有专门的交互设计来做)做 B 端产品最重要的是对业务的理解,在梳理过程中一定要跟产品随时沟通,产品的业务流程是怎样的?有哪些同类型的产品?和他们相比我们的产品有什么特色和特点?充分理解了业务再去做设计就会有事半功倍的效果。

情绪版,定义风格:梳理完需求就可以定义设计风格了,在设计风格上尽量做到简洁,B 端产品实用性大于美观性,减少不必要的装饰元素给用户操作上带来干扰。这里可以运用情绪版去定义设计风格,大概的流程就是,根据产品业务背景定义设计关键词、根据关键词去找参考图片定义设计风格,产品的主题色也可以根据情绪版来去定义。

2. 设计中:

布局上根据导航可分为以下三种:

水平导航布局:类似于普通网页的布局样式导航,顺应了从上至下的正常浏览 顺序,方便浏览信息;顶部宽度限制了导航的数量和文本长度。适用于导航较少,页面篇幅较长的产品。

垂直导航布局:可将导航栏固定在左侧,提高导航可见性,方便页面之间切换;顶部可放置常用工具,如搜索条、帮助按钮、通知按钮等。菜单栏还可以展开收起,适用于结构简单的产品。

混合导航布局:结合了水平导航和垂直导航的特点,层级可以扩展到二、三级菜单,且能够更加清晰地区分常用业务功能操作和辅助操作。适用于功能模块较多、较复杂的工具类型后台。

不同形态的布局,适配方式也不同。在做设计之前了解下适配的原理,避免在不同设备上出现视觉上的误差。水平导航布局,在适配方案中做法是对两边留白区域进行最小值的定义,当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。如图:

垂直导航布局和混合型导航布局,在适配方案中常见的做法是将左边的导航栏固定,对右边的工作区域进行动态缩放。如图:

最后说一下布局上的栅格,栅格会使整体页面更加工整简洁,内容区域采用 24 栅格(并非固定数值,参照案例 24 栅格布局),就不一一叙述栅格的定义与运用了,大家可以参考下网上有好多关于栅格的文章,如图:

颜色

颜色上大致分为品牌色(可以结合业务属性)、功能色(比如红黄绿蓝灯成功、出错、失败、提醒、链接等。功能色的选取需要遵循用户对色彩的基本认知)、 中性色(如深灰中灰浅灰,文字部分应用居多,此外背景、边框、分割线、等场景中也非常常见) 其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。

字体

在 B 端系统中优先使用系统默认的界面字体,常用中文字体有微软雅黑、苹方、思源黑体,英文字体有 Arial、Helvetica 系统不同展示的字体也不相同。

字体大小常见的有 12px、13px、14px、16px、20px、24px、30px 等。

规范

一份好的规范能够让设计和开发更加的工作,并且能够指引一些设计的细节,通过对大小、颜色、边距等、呼吸感等一些细节点的标注,可以让新加入的设计师快速上手设计。一个项目会有多个设计师的参与,规范化的设计语言,避免因设计控件混乱而影响设计输出。好的设计规范还能统一在产品中不同页面的相同板块的样式问题,为开发组件库奠定基础。

如何建立一份规范呢?大概总结以下几点:

  • 首先是要梳理产品中不同板块所出现的场景进程收集(收集产品所有出现过的场景进行整理)
  • 其次是把收集完的板块归纳分类(不同的样式、状态等可以分成不同的种类)
  • 最后就可以定义规范了。

定义好设计规范能大大提高设计师的工作效率,在同一个项目中也能更好的把控项目的视觉规范,帮助设计师复用及设计延展。

组件

B 端产品的决策方是老板和管理层,在设计 B 端产品中往往也是大多数情况下会有接到比较紧急的需求的情况,所以在设计过程中就需要我们设计师更加去注重效率,提高产能。做东西时要有组件化思维,去总结分析页面模块中的一些共性,跟开发共同完成产品的组件库。

如果没有前端工程师,我们的设计组件库就是 PNG。所以,在开工前,一定要和那个技术不错的前端工程师聊聊做设计组件库的事情,其中最重要的是确定好:选择什么样的前端框架。

如果组件库服务的是 B 端或者中后台系统,那其实有很多可参考的开源组件框架:Ant Design、ElemetUI、Layui 等,注意不同的框架用到的前端技术不一样,兼容的浏览器版本也不一样,这要根据你们技术情况做选择。如果觉得开源框架的风格和你们的产品不统一,那就需要二次设计和开发封装。

下面是蚂蚁金服组件库,如图根据组件的功能特点做出了分类:通用、布局、导航、数据录入、数据展示、反馈、其他等。大家可以去官网查看,这里就不再一一做阐述了。

这个是饿了么的组件库:

推荐几个官方组件库:

做之前大家一定要去多去查看这些大厂做的已成型的开源组件库,然后再结合工作业务特色做出自己公司特有的定制化组件库。有了组件库之后,再接到紧急需求,我们就可以做到事半功倍的效果。先去分析页面的构成,然后花费 80% 的时间去设计需求中 20% 的页面,剩下的通用型页面就可以直接用组件库堆出来了。

3. 设计后:

设计走查

在完成设计后,要整体对设计页面进行走查。从信息层级、文字、图标、图片等方面进行多次设计验证与测试。

高质量设计交付

设计稿命名一定要清晰规范,现在好多切图标注的插件,一键生成切图标注。现在就没有必要单独整理切图标注了,但是设计稿在交付前切图的命名一定要在设计稿里整理清楚,规范命名方便开发查阅。

推荐几款比较常用的切图标注的插件:

设计追踪、校验

设计稿给到开发在设计过程中,要随时跟开发沟通。项目上线后要对线上效果进行实时 UI 校验,保证开发同学对设计稿的高度还原。还有就是对设计上线后的验证工作,用户使用和反馈是优化产品的重要途径,针对性地在一些主流的页面模块按钮进行一些数据的埋点,统计下用户的点击状况,实时对数据进行一些跟进,为下次页面改版优化,提供有力的数据支撑,提升产品的用户体验。

总结

不管 B 端还是 C 端,设计的价值在于通过视觉表现的方式去助力公司、助力产品实现用户的需求、帮助用户解决问题。B 端产品相对而言,场景、功能、业务流程、信息架构要比 C 端更复杂,面对的异常情况也比较多,所以 B 端在设计风格上尽量做到简洁,B 端产品实用性大于美观性,在每一个功能的设计都需要你去思考很多方面:用户易用、信息层级、未来扩展,你都要做出取舍,而对于每个模块都需要你思考、结合用户场景。所以想要做好 B 端设计,一定要去了解业务,了解用户需求。

文章来源:优设    作者:小六可视化设计

B端产品的导航菜单设计5步法

资深UI设计者

导航菜单对于用户的使用来说尤为重要,本文是我从实际工作出发,结合自身产品和过去经验对于导航进行的一次全面总结。

在任意一个 B 端后台系统中,导航菜单都是不可或缺的一部分,每个导航菜单都有其固定位置,通常这个位置是不可撼动的。所以说:导航菜单是 B 端产品层级重要的交互控件。

对于 B 端产品的用户而言,他们使用导航菜单的目的性很强。

到后台主要是对具体功能进行操作,导航菜单在功能的引导中发挥了巨大作用。因此,其主要的功能就是对 B 端产品进行分发、引导;帮助用户在复杂的后台页面中,寻找出自己真正想要的功能。

合理规划

1. 遵循7±2原则

导航菜单建议最多不要超过 9 个,最少不要低于 5 个。

原则解释:1956 年乔治米勒对短时记忆能力进行的定量研究,他发现人类头脑最好的状态能记忆含有 7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。

在生活中我们经常会把一长串的数字分成 7 个左右的数组来记忆,这样会使难度降低很多,米勒称这种单位为「组块」。

是不是通过分组记忆以后,自己能记住的更多?这就是 7±2 原则的分组。

通过上面 7±2 原则描述我们明确到:在导航菜单当中,超过 9 个会给用户查找时带来困难,低于 5 个说明导航菜单的分发效率不够。

有人会说,在实际业务中,不会有那么理想,如果需要超过 9 个时,应该怎么办?

超过 9 个时,一定要对菜单进行分组,因为导航过多,用户寻找会十分迷茫,通过分组的方式,能够对菜单进行再次分类,提高查找效率。

举个例子:

比如在微盟、有赞、小鹅通的导航设计当中,微盟、小鹅通有很大不足,我们来一一拆解。

  • 小鹅通:共有 14 个导航菜单, 且菜单之间形式不同,表现也会有所差异, 也因此对于用户而言使用起来会产生很强的疑惑感。
  • 微盟:一共有 11 个一级菜单,不符合 7±2 原则,同时也能够感受到在视觉层面上,微盟的导航菜单没有分组,难以寻找和记忆。
  • 有赞:虽然在导航的数量上也是有 9 个以上,但是它对菜单进行分组,有效提高了用户查找时的效率,因此在设计上更加合理。
2. 导航菜单不能隐藏超过两级

导航菜单隐藏超过两级时,代表着产品在用户的使用规划中,没有深入思考整个用户体验

导航菜单层级越多,用户体验就会越差,你会发现一些拥有三级导航的菜单,都会通过设计优化来实现隐藏导航的合并,从而减少用户操作负担。

比如有赞就是一个典型例子,在有赞零售的导航菜单中其实是有三个层级,但是通过交互层面的优化,将二、三级菜单直接展示出来,形成一个整体,提升了用户体验避免用户层层寻找。

同时在交互上,采用悬停+点击结合的形式,用户既可以通过悬停鼠标进行快捷操作。同时又可以通过点击,确定跳转查看该一级导航下的菜单,能够提高用户的操作效率。

3. 鼠标悬停还是鼠标点击

作为导航来说,其操作本身并不多,但是设计上,点击与悬停(hover)之间,还是存在很大差距。

这里想要说明这两个操作本身而言,并没有对与错,但是适用场景的不同,导致在设计属性上存在着较大差异。

鼠标悬停操作

鼠标在悬停时触发的操作时间太短暂,会给用户带来很强烈的挫败感,同时在悬停选择下一级菜单时,鼠标移动悬停也同样会造成这样的结果。因此在设计时,对鼠标悬停时的操作要格外留意。通常在悬停操作当中,只适用于只有一个菜单层级的菜单选项,这样用户在操作时更加方便。

鼠标点击操作

鼠标点击操作多发生于多级导航进行操作,同时鼠标点击的形式,会给用户正向的反馈,用户点击后明确知道菜单栏不会隐藏,因此在两个操作之间进行选择操作时一定要多加思考。

确定菜单广度和深度

导航菜单广度和深度的区别:

  • 菜单广度,导航菜单中每一个层级包含的菜单项数目为广度。
  • 菜单深度,导航菜单层级的数目为深度。

深广度平衡帮助用户进行快速选择,能够对整个产品架构有着第一眼的认识。

1. 当菜单广度过大时,怎么办?

当菜单广度过大,我们也能够通过设计的方法来优化导航菜单。

我举一个比较具有代表性的例子:腾讯云。

腾讯云目前拥有大概 100+ 个云产品,他们都分布在导航菜单上,因此在导航设计上,它采取一种新的模式:全部菜单导航、搜索菜单、自定义导航。

在全部菜单中,展示了腾讯云 100+ 个云产品项目,通过搜索进行筛选得到用户想要的菜单。同时在导航栏上,支持用户去自定义 5 个菜单选项,也因此用户将常用的菜单添加至此,更方便用户去寻找。这样在满足业务的前提下,通过一些个性的设计,使 100+个菜单也能够塞得进整个导航中。

2. 菜单深度过深时,怎么办?

当面临菜单深度过深时,通常需要从以下几个方面去考虑。

与产品经理沟通是否到位

这里主要是想通过与产品经理的沟通,了解到菜单的架构设计的原因,以及能否为你的设计进行一次重新的梳理,寻找一些值得优化的点。

建议在寻找产品经理之间,自己能够通过一些思维导图的软件将自己产品的菜单目录全部罗列出来,能够先多思考,为下面的沟通节约时间、提率。

用户体验地图的绘制

在一个 B 端产品中,用户的目的虽然复杂,但是研究用户每一步操作,还是会查找出一些规律,我们可以从这些规律中做些文章。

比如我们之前在一个医疗系统中,根据角色的不同,将医疗角色分为:前台、咨询师、医生、老板这四种角色,每个角色所关心的点都会有所不同。

老板最关心每个门店目前的情况数据,比如门店营业额、门店待客数、每个医生的治疗量以及治疗最少的医生。这些都代表着他不同场景下使用的习惯。

将这些情况分析以后,提炼出核心的需求点。

然后绘制完成他们的用户地图后,根据角色,明确每一个角色的日常操作有哪些,从而确定我们所有菜单所展示的位置以及整个菜单的层级关系。

菜单层级有区分

我将常见的导航区分进行总结,分为以下三种形式。

1. 颜色区分

颜色区分作为最直接最有效的一种形式,这种形式也是后台页面最初的状态,我通常会用颜色区分和移动端顶部状态栏的演变史做对比,就其功能而言他们都有很多相似的点。

微信在 2018 年 12 月份时,发布微信 7.0,将顶部导航由黑色转变为白色,引得大家争论不休,而经过时间不断洗礼,大家也逐渐接受了这个事情,渐渐忘去。

延伸阅读:

2019 年也有类似的事情发生,有几个产品的 WEB 端进行了一系列的大改,YouTube、Twitch、Twitter 都进行了重新设计,他们也不约而同的将块面去除,去掉多余的灰色,通过留白和空间将页面拉开。

这是否是下一个 WEB 端所要追寻的趋势,我还不得而知。

如果 WEB 端都有此改变,那么 B 端产品还会远吗?

说回 B 端设计,颜色上的区分和移动端类似,更多体现在导航层和内容层之间的区别,因为从本质上讲,这两个本身就属于不同的业务模块,通过颜色的区分,是最为直接,最简单的一种方式。

这种形式常见于很多复杂系统,例如:飞书。

左侧导航为深色,能够让用户获得更沉浸的体验,因为屏幕边缘都为深色,用户在使用时能够真正做到有区分。

2. 投影区分

在现如今的移动端产品,投影大行其道,弥散投影,高级投影随处可见,也逐渐影响更多 WEB 端的产品使用投影,增加自身产品 Z 轴空间。

Z 轴空间给导航带来了纵深感,同时也能够在功能层级上,通过分层设计,使页面层级关系明确,引导用户使用导航。

Material Design 设计的出现,正是 Z 轴空间的鼻祖,在我们的屏幕中开辟了第三个设计维度,在 Z 轴上展示增加了更多的交互形式。在几何体系中,Z 轴是 X 轴和 Y 轴之外垂直于屏幕的轴,我们通过引入 Z 轴在交互设计中呈现三维的物理空间感,使页面内容能够得到有效区分。

比如 Teambiton 在页面中运用投影,强化了页面层级的关系:

3. 分割线区分

分割线针对导航功能性不高,同时要满足很高设计感的产品。

分割线太深,页面十分割裂,分割线太浅,页面划分又不明确,因此需要设计师对分割线的把控十分合理。

分割线在 Dribbble 上见到过很多,通过简单的线条加上空间的分割,将导航区与内容区分开,形成很好的视觉感受。如果你是刚开始尝试做导航,不太建议尝试这种形式,因为对于页面空间的把控要十分苛刻。

导航可配置

B 端产品易操作性中,导航可配置操作算得上是一个重要的点。其中最主要是通过配置操作实现导航易用性的提升,而如何让菜单可配置,通常的做法有两种。

1. 我的菜单

如果你的产品是针对多数角色不同的用户进行设计,那么在导航设计时,可以考虑增加一个菜单选项:我的菜单,对于菜单进行标签处理。

设置一个我的菜单,将用户常用的菜单进行添加,能够满足每一位用户的菜单快速选择的需求,通过这样的自定义,用户在常用的菜单下,能够通过我的菜单进行快速跳转。

举个例子:在印象笔记当中,其快捷方式就是可以将用户想要的模块放置在此,可以快速跳转。

2. 角色配置

如果你的产品是为特定几类角色进行服务,那么在导航设计时,可以考虑根据用户角色的不同,给用户不同的导航展示。

通过角色的筛选,对复杂导航进行简化,同时管理员可以根据自身公司的业务不同,给用户配置出不同的角色权限予以满足用户的导航需求,这样在设计层面上能够减少很多不必要的麻烦。

四种常见导航菜单

1. 侧边导航

侧边导航是国内的 B 端产品当中最为常见的。

将菜单栏放置在左侧,页面布局上基本为左右结构,将导航菜单放置左侧固定。

因为侧边导航在国内产品中最为常见,因此把它优先提出来讲,国内厂商对于侧边栏导航尤为偏爱,在很多人心目中,感觉就只有侧边导航和其他导航两种导航形式,也就造成了在 B 端产品的发展也逐渐趋同。不过现阶段大家对于 B 端产品的重视,在设计上也开始多元化。话不多说,我们先来看看侧边导航的优点有哪些。

优点

  • 扩展性较强:多级导航可以流畅展示,可以涵盖很多大而全的产品。
  • 展示灵活:侧边导航可收折,收折过后用户的横向核心空间将会增大,页面展示效率也会大大提高。
  • 快速定位:视觉起始线统一,用户可以根据首字进行查找,快速便捷。

缺点

  • 不易阅读:侧边导航文字垂直排列,有悖于眼动的正常视觉方向。
  • 阅读沉浸感低:侧边导航容易打断用户的正常阅读顺序,使阅读感降低。

线上产品:我们拿有赞零售进行举例,他就是一个典型例子。

菜单栏+功能菜单共有 15 个,然后通过导航的间隔将菜单进行分组,最多一个导航菜单共 9 个,满足 7±2 原则。

同时可以看到,有赞在使用三级导航时,通过右侧面积统一展示二、三级导航,方便了用户导航展示的同时,优化了用户的使用体验。

为什么国内B端产品大多数是侧边导航?

我在我的设计剪贴板中有回答过这一个问题,直接分享给大家。

2. 顶部导航

顶部导航在国外的产品当中,算是较为常见的。

将菜单栏放置在顶部,页面布局上基本为上下结构,将导航菜单放置上方固定。

顶部导航早期出现于各类门户网站,比如企业官网,各种咨询类的网站经常会采取这样的导航形式。说回 B 端产品中,顶部导航通常在 B 端产品中也是十分常见的,其中以国外产品最为集中,比如国外 CRM 三剑客:salesforces、hubspot、zoho 都是采取的顶部导航的形式。

优点

  • 满足阅读习惯:导航为水平布局,阅读方式更贴近眼动的正常阅读顺序。
  • 沉浸感强:顶部导航通常不会打断用户的阅读行为,对用户的干扰少。
  • 设备影响小:导航顶部,整体页面稳定,页面对于用户显示器分辨率影响较小。

缺点

  • 通用性差:同时受导航栏标题文字限制,对于每一个菜单的字数限制严格。
  • 横向 Tab 数量少:承载不了太多菜单数量,超过 7 个后菜单排布会十分困难,横向空间利用率差。
  • 扩展性差:水平导航最好不要超过二级菜单,超过二级菜单,用户使用成本高。

线上产品:


△ salesforce

销售 CRM 传奇人物,千亿美元估值,每年营收百亿美元,无疑是 B 端产品当中的一个标杆。

如果你是做 CRM,或者是 B 端产品,必看的一个竞品。

salesforce 采取的就是一个顶部导航,只是不同的是,salesforce 的顶部导航更多是将页头的功能进行合并叠加,虽然 salesforce 的交互方式不算优秀,但是因为其业务线不断庞大,这样才能支撑其整条业务线。就因为这样的问题,需要设计师在设计时,要考虑到整个系统的一个扩展性问题。做 B 端产品的交互设计有点类似后端同学写代码,我们现在设计的这个交互最少要满足未来一到两年公司的已规划好的产品的扩展问题。

△ hubspot

Hubspot 采取就是顶部菜单,二级菜单下拉展示,同时 Hubspot 是按照角色去划分顶部菜单,能够给用户减轻认知负担,更好的被用户所使用。同时在一些设计小细节上,比如顶部的主题色,既可以提升品牌感,同时在适当时可以作为进度进行一个展示,使用户能够更加深入地感知到其设计。

3. 混合导航

在 B 端产品中,感觉混合导航也是一个后起之秀。

它的页面布局为顶部和侧边,简单来讲,就是将顶部导航与侧边导航进行结合。通常将一级导航菜单放置顶部,通过一级菜单的点击后,展示侧边的二、三级菜单。在一些拥有复杂的逻辑关系,菜单之间关系分明的产品中,混合导航也越来越被大众所接受。在很多复杂的系统当中,混合导航真的是很不错的一个选择,我们来看看他的优缺点

优点

  • 承载大型业务:在导航上,他能够展示 3 级甚至 4 级菜单,对于很多大型 B 端项目,混合导航算是更加合理的选择。
  • 扩展性强:对以后有规划大量功能的产品,用混合导航,能使之后菜单扩展性更强。

缺点

  • 占用面积大:要切换多个菜单,所以顶部和左侧会占用大量的空间。
  • 菜单交互路径长:一、二级菜单间来回交互成本高,操作繁琐。

线上产品

云产品其实就是一个很好的例子,比如阿里云,他们因为自身产品线众多,对于导航的设计也是以复杂著称,多数情况下,面对这种复杂的导航时都会采取混合导航。他们能够通过混合导航,使用户对于导航每一个功能模块都有一个深刻的认识。

金蝶-星空定位就以 Paas 进行定制销售,分析过他的产品你就会了解到,他一共有 100+ 个菜单,同时算是金蝶的王牌产品,因此对于此类产品,应该着重去了解,也因此,对于每一个模块,都是通过大标题+小标题的形式进行设计,使用户在使用时能够明确知道自己想要什么。

现在各大复杂的产品都会采取混合导航,这样对于产品的架构以及各类菜单层级的分析也会起到很大的帮助。

4. 平台类导航的新趋势

平台类导航是我们团队内部自己的取名,给他的定义通常是拥有很多模块,比如 Teambition、明道云,拥有很多个模块,通过一个统一的平台进行内容的分发,比如移动端的钉钉、企业微信、纷享销客都采用同样的方式,但在 WEB 端当中,平台导航通常伴随着其他导航同时出现。

比如最近很火的明道云,就是使用了平台导航,他们将自己的产品分别陈列在页面的核心区域,通过对于工作台的设计,形成对页面的展示,同时形成一个平台类的导航,于此相对应的还有钉钉后台管理页面,以及企业微信后台管理页面,他们都是通过一个个平台类的模块对导航进行分发的。

文章来源:优设

实战:如何利用栅格系统做响应式设计- 后台设计经验总结(2)

ui设计分享达人


左右布局响应策略动态演示。考虑到gif被压缩后效果不理想,所以做了一小段视频来帮助大家更好的理解响应策略。视频如果看着不清晰,选择清晰度为1080p蓝光观看即可

Image title

Image title

一、什么是响应式?

按照本人自己的理解,响应式就是通过合理的设计方案配合规范的技术实现策略,使同一个Web页面在各个终端(设备)不同分辨率屏幕上都能有最佳的用户体验。

Image title

这里说是用户体验而不是视觉效果是因为用户体验包含了性能、交互、效率等多方面内容,也就是说,对于一个线上的响应式页面,我们不仅要关注视觉上看到的,也要关注我们操作、使用时的感受,这些综合因素最终影响着用户使用后台系统时的效率与体验。而这里我提到的“合理的设计方案”就是本篇文章跟大家分享的重点:如何利用栅格系统完成后台页面的响应式设计。对于交互与性能方面内容,本篇文章不做介绍,因为两者涉及到我不太了解的技术相关知识。我提出这个观点主要希望大家在执行设计时,能有更全局的考虑,多跟交互与开发沟通,协力打造更好的用户体验



三、响应式的目的是什么?


后台系统做响应式设计的目的:提高屏幕利用率,最大化操作效率


1、提高屏幕利用率最简单的理解就是在大屏幕上显示更多内容,在小屏幕上通过数据筛选展示关键信息。一直以来大家普遍认为移动端碎片化严重,但实际上桌面端设备的分辨率也是有着不太均匀的分布,而随着新设备的更新,更多高分辨率屏幕不断加入,这种碎片化的趋势会更加明显,因而要想利用好每一块屏幕,让不同分辨率的用户都有好的体验,显然传统固定的布局是做不到了。

Image title


2、后台系统的应用特性,决定了响应式在后台设计中具有很高的实用价值。后台系统有两大主要功能:查看与操作。查看主要是各种数据,是系统自动生成的内容;操作是需人工干预、人工决策的任务,查看的数据为操作提供了依据,而操作支撑了公司或部门业务的正常运行。所以后台系统设计最基础的目标之一是如何通过良好的数据展示帮助用户提高操作、决策效率,而充足的展示空间显然是实现这一目标的基础,响应式设计通过为每个分辨率设定合理的版式布局,使数据在每块屏幕上都尽可能展示的最佳。优化后的数据展示,帮助用户更获取信息,从而提高了用户使用后台系统的效率与体验。

Image title



四、为何要利用栅格系统来进行响应式设计


响应式可以响应的前提有两点:1、页面布局具有规律性、2、元素宽高可用百分比代替固定数值,而这两点正是栅格系统本身就具有的典型特点,所以利用栅格系统进行响应式的设计是顺理成章的,也比较快捷,所以响应式与栅格化天生一对好搭档


栅格系统页面布局具有规律性、元素宽高可用百分比表示

Image title



五、利用栅格系统完成后台页面响应式设计的步骤


1、确立设计稿基准尺寸


设计稿基准尺寸是指我们从哪一个分辨率开始设计,也就是我们新建画板时画板的尺寸应该是多大。而这个尺寸确定的主要依据是我们后台系统所面向的主要用户的屏幕分辨率;我们分两大类情况来讨论这个问题。


(1)、如果我们的系统是给公司内部员工使用,由于公司批量采购设备的原因,公司内部员工的屏幕分辨率往往会比较统一,这种情况下我们需要拿到这个数据,然后以它作为基准尺寸开始设计。因为虽然响应式设计的目标是让页面在每个分辨率下都有最佳的体验,但实际开发中毕竟存在损坏,设计还原很难100%,因而大多数情况下还是基于基准尺寸的设计与开发,在用户端显示效果最佳、体验最好

(2)、如果我们的系统是平台级面向全网用户,或者虽然是公司内部使用,但是并不能统计到内部员工屏幕分辨率情况,就可以以1440*900作为基准尺寸开始设计。从统计数据来看,目前国内PC端用户屏幕分辨率排名前三的分别是1920*1080、1366*768、1400*900;1440的尺寸实际上是处于中间位置,如果以它为基准设计,最终向上向下响应适配后,相对误差最小,从而达成用户体验的最大公约数。

Image title



2、确定页面布局结构


页面的布局结构,是页面基本框架,后续的设计都是在这个大的框架下完成的,所以确定页面基准设计尺寸后,需要跟交互设计师或产品经理配合,根据实际业务情况讨论确定页面布局结构。一般来讲,后台系统有两种最典型的页面布局结构:左右布局与上下布局(这两种布局是最典型也是最基础的布局形式,其余布局,下期内容讲)


上下布局

Image title

上下布局的结构在传统网页中非常常见,而在后台系统中并不常用。这种布局的优点是符合用户认知,遵循用户从上而下浏览页面获取信息的习惯;贯穿全屏的导航栏设计也使页面显得正式稳重,除却导航栏之后相对较大的空间也为内容展示提供了比较充足的空间。缺点是顶部一级导航受页面宽度限制,数量会比较局限,同时导航层级较深时,交互效率也不够理想。所以该布局适合那些导航层级较少,内容展示充分的后台系统设计


左右布局

Image title

拥有侧边导航的左右布局页面结构,是在后台系统中更常见的页面布局形式。侧边导航栏可以固定也可以收起,相对比较灵活,同时文字横向排列的形式可以在竖向上展示更多内容,因此侧边导航比顶部导航能容纳更多一级内容,而层叠式的内容展示也使得一、二、三级导航内容关联更为顺畅,可扩展性也得到加强;由于侧边栏可以常驻在页面左侧,所以对于右侧内容的指示性也优于顶部导航,切换起来也更加方便。但同时,因为侧边栏的常驻,导致右侧内容区域空间被挤掉部分,所以相对上下布局的结构,左右布局的结构,内容区域空间会比较小;一般为了与页面其它区域做区分,导航部分会用更深的颜色、安排更多的图标和文字,这也导致了在视觉上左右布局的页面不够平衡,会有左边重右边轻的感觉。


3、对内容区域建立栅格系统


根据不同的布局类型,对页面内容区域建立栅格系统。对于一个利用栅格系统做响应式设计的页面来讲,主要有三大数值需要规范:Column、Gutter、Margin;对于Column、Gutter我们在上一期内容中已经有很详细的介绍,不再赘述,而Margin是页边距,主要确定了内容区域距离页面边缘的距离,它分布在内容区域的两侧,主要作用是通过留白把内容区域与周围环境隔离出来,从而突出内容区域的显示,此外还可通过Margin值来调整内容区域显示比例,使页面在视觉上有更好的呈现效果。所以一个用于响应式的栅格系统事实上由Columns、Gutters、Margins三部分组成。


上下布局结构与其对应的栅格系统

Image title


左右布局结构与其对应的栅格系统

Image title


4、根据实际业务内容确定盒子(Box)比例


上下布局结构的盒子

Image title


左右布局结构的盒子

Image title


5、确定响应策略


响应策略就是当视窗(Viewport)发生变化时,内容区域的元素如何去响应,具体到我们当前的栅格系统,就是Columns、Gutters、Margins以及由Columns跟Gutter组成的盒子(BOX)四者的值(主要是宽度)如何变化,以及在这种变化之下我们页面的布局如何调整。


为了方便直观的向开发工程师与团队里的其它小伙伴沟通,我们可以把这个响应策略制作成如下的表格,并在页面中标注说明相关元素的变化规律,供自己与开发参考。


由于带左侧导航的响应式规则相对复杂,所以我先以它为例跟大家交流下响应策略如何制定


左右布局响应策略表

Image title


如图,响应式是以视窗的最小宽度作为基本依据来制定每种宽度下Columns、Gutters、与Margins的响应策略,也就是说Viewport Min-width是做出响应的触发条件,视窗每达到一个最小宽度,就会触发该宽度下预设的页面布局方式,而每种布局都是在该宽度下的最佳布局,也是因此,响应式才会在各种复杂分辨率条件下都能给用户比较好的体验。


每个视窗宽度的最小值是触发响应的关键值,因此我们给这些用于触发的关键值起了个名字叫“Breakpoint”,每个Breakpoint触发一种响应策略,而每个策略持续(保持)的宽度范围就是图中绿色矩形的范围。以图中第二行矩形为例,该矩形代表的响应策略是:栏目数是8、水槽宽度16(SM)、页边距32、侧边栏收起且仅展示图标,当点击侧边栏展开图标时侧边栏以Push的方式展开,该策略触发的Breakpoint是768,保持范围是577~768。也就是当视窗宽度缩放至768时,栏目数量由上一级的12变为8,水槽宽度由24变为16,侧边导航由完全展开状态自动收起文字部分,仅保留图标,然后保持这些关键数值不变,直到视窗宽度达到另一个Breakpoint。需要特殊说明的是,第一行矩形中0~576(Min&Fixed)这个范围的视窗宽度是固定的,也就是在该套响应策略中,页面最小响应到576的页面宽度,当视窗到达这个宽度时,浏览器会限制视窗进一步缩小,因为当页面宽度比它还小时已经无法有效展示数据了,所以进一步的缩放是毫无意义的。


左右布局响应策略动态演示

考虑到gif被压缩后显示效果不理想,所以我做了一小段视频来帮助大家更好的理解上述响应策略在实际页面中如何发挥作用。视频如果看着不清晰,选择清晰度为1080p蓝光观看即可


左右布局响应策略标注

Image title


对于上下布局的后台系统我们根据内容区域(Container)宽度定义的不同方式,可以把它们分为两类:


1、内容区域定宽的后台系统( Fixed-width Container )


内容区域定宽是指内容区域在每一组视窗宽度区间内,都会设定一个最大值(Max-with),当内容区域宽度小于最大值时,区域内元素会响应视窗的变化;达到最大值后,内容区域不再响应视窗的变化,而是宽度保持该最大宽度值不变,此时我们通过增加页面两侧的margin值来响应视窗的变化。Flex Margin就是应对此情况的动态页边距。

Image title


 上下布局响应策略表(内容区域定宽( Fixed-width Container ))

Image title


2、内容区域宽度流式 (fluid-width Container) 


内容区域宽度流式 (fluid-width Container) 的后台系统,它的内容区域 (Container) 距离页面两侧的页边距Margin是定值,因此视窗有多大内容区域就展示多大。




Q&A


1、后台系统必须做成响应式么?


并不是必须的,是否要做响应式主要是根据后台产品面向的用户来定的。如果是公司内部使用的系统,且员工配备的桌面设备都是有统一的分辨率,就可以不做响应式;如果是面向全网用户的后台产品(比如淘宝商家的后台管理系统,阿里云的控制台)或公司(部门)内部的桌面设备并没有统一的分辨率规格,那么就需要做成响应式。当然了,更实际的环境中是否做响应式还有技术实现、时间、人员成本等各方面因素的考虑,有时为了尽快的让业务运营起来,后台系统会做的比较“简陋”



2、为什么栅格系统没有适配到移动端的分享?


因为后台管理系统的使用场景主要是工作时间在桌面设备上使用,由于庞杂的数据内容在移动设备上展示困难、操作不便,因而很少有公司会把后台系统响应到移动端使用,所以我们今天说的后台响应式仅针对桌面设备屏幕。



3、对于iMac4k、5K这类超高分辨率的屏幕如何做响应式设计?


对于左右布局的后台系统,实际上它是全屏展示的,也就是屏幕有多大就展示多大,因而iMac的响应策略也是按照左右布局响应策略表里的策略来响应对于上下布局,内容区域定宽的后台系统,iMac的响应策略使用上下布局响应策略表里的策略来响应即可;


对于内容区域宽度流式的后台系统,iMac的响应策略可以参考左右布局的响应策略表来处理栏目、水槽的变化,页边距保持定值即可。



4、在以8为原子单位的栅格中,Margin需要按8n的规律变化么?


能以8n的规律变化是最好的,如果无法做到也可以使用其它数值。Margin是页边距,主要作用是通过留白的方式将页面内容区域与周围环境隔离区分出来,从而突出内容;一般我们会优先考虑内容区域匹配8n的变化规律,安排完内容区域后剩余的空间自然成为页边距(margin)



5、响应策略制定的时机是什么?如何去制定?文中示例的策略表我可以借鉴套用么?


响应策略表一般是在主要页面设计完成,要交付开发实现的时候来跟开发一起商定。这块需要注意两点:


1、如果开始设计时就已确定页面是要具备响应式的能力,那么最好开始设计时就去跟开发沟通,看他们现有技术是如何来做响应式的,因为他们很有可能是在用Bootstrap、Foundation这类组件库来做开发,而这些组件库一般都有自己现成的响应规则,这种情况下我们需要了解开发他们的规则,让自己的设计匹配已有的策略。当然了,如果他们的规则并不能很好满足我们的业务需要,一般也是可以在这些组件的基础上让开发去修改调整的。


2、响应策略表只是对响应方式的结果的呈现,而这个策略的制定事实上是从设计开始执行时就要去考虑的,从我个人经验来讲,我一般会挑两类页面来做响应策略的研究与适配,一个是控制台(Dashboard)页面,另一个是表单(Form)页面。优先规划这两个页面的设计,考虑他们在各个Viewport下如何布局如何展示如何缩放变化,并且跟开发沟通想法,听取意见,制定初步的响应计划,当这两个页面设计完成,就可以更大范围的执行设计。


3、文中示例的策略表是基于我自己项目经验总结而来,具有实际应用价值,可以借鉴。但我更想做的是通过那个表希望跟大家分享一种与开发交流、沟通的方法和技巧。实际工作中我们并非一定要做出那么一个经过精心设计细致考虑的表,我们可能会找张纸画一画给开发看就可以了,这块的重点是如何把我们设计师的想法更可视化更直观准确的传达给开发工程师。所以那张表是启发而非标准。


控制台(Dashboard)页面示例(素材图片作者:Coderthemes)

Image title


表单(Form)页面示例

Image title

转自UI中国-BYMD



栅格系统及其在后台设计中的应用—后台设计经验总结01

ui设计分享达人

关于栅格系统文章不少,但鲜有专门针对栅格系统在后台设计中相关应用的介绍。本文抛砖引玉,希望引起更多同行的交流与讨论

Image title

Image title


栅格系统的目的


栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考,它让页面设计变得有规律,从而减少了设计决策成本;栅格化提高了页面布局的一致性跟复用性;避免了设计师与开发者在细节上的反复沟通确认,从而提升了整个设计开发流程的效率、并能帮助开发者实现较为理想的设计还原。

但实际应用中,由于对栅格系统理解的不充分,很多设计师在应用栅格系统的实践中产生了各种问题,本来帮助设计的工具现在反而成了设计中需要解决的问题。结合我自己后台设计的经验,本篇文章跟大家聊聊栅格系统在后台设计中如何应用。



建立栅格系统的方法与规则


1、第一步:确立栅格系统的原子单位(网格)


如图,一个比较完整的栅格系统是由许多规格一致的小网格组成,这些网格辅助我们更规范的排版、布局。

Image title

后台系统设计中,由于后台页面主要以Web形式呈现,而对于web,用户已习惯通过鼠标滚轮或滚动条(scrollbar)来纵向浏览页面内容,因此,在不考虑内容优先级的情况下,Web可以实现竖直方向的“无限”加载,即竖直方向可以无限延伸,因此基于Web的后台页面,它的栅格系统在水平方向的栅格可以不体现出来,我们在执行设计时只要在竖直方向保持规律的变化就可以了。标准的栅格系统简化为适用于Web后台的设计如下图所示

Image title

如上图,对于后台设计来讲,栅格系统是由栏目(Column)跟水槽(Gutter)交替分布形成的,栏目(Column)是接纳网页内容的容器,水槽(Gutter)用来调节相邻两个栏目间距,把控页面留白;由于栏目跟水槽的宽度是以网格作为基本单位来增加或者减小,所以栅格化的第一步需要先定义好栅格的原子单位“网格”的大小。根据本人的设计实践以及其它已有规范经验,目前后台栅格系统网格大小定义为8是最普适易用的。具体原因有以下几点:


(1)目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被8整除,使用8作为最小原子足够普适.


我们选取4、6、8、10、12为栅格的候选原子单位,然后用目前主流屏幕分辨率与其相除,判断各个分辨率在竖直(Y)与水平 (X)方向能否被候选原子整除,统计结果如图。

Image title

显然,对于目前市场桌面设备屏幕而言,4是整除率最高的一个原子,接下来依次是8、10、6、12。但4作为基本原子实在过于小了,太小的步进单位将导致我们决策成本的增加,因为我们将元素间间距增加4px或者减小4px视觉感受到的差异并不明显,这种情况下我们为了找到那个“合适、满意”的间距,就需要反复调试,这就造成了时间上的浪费,尤其对于没有经验的新人,这点会更为突出。但这种调整并不合适,原因是后台管理系统设计重点在于面向用户使用的效率与逻辑,其次才是视觉呈现,使用栅格系统的目的之一也是想减少设计师在“细节”上的纠结,希望设计师站在更全局的角度看待设计,合理安排时间,因此我们舍弃4。在剩下的6、8、10、12四个单位中,8的整除率最高(80%),以8像素作为一个步进单位的变化,我们视觉上也是能感受到较为明显的差异,因此选取整除率最高的8做为栅格系统的原子单位。



(2)以8为单位符合“偶数原则”。偶数原则可以在页面缩放中的避免类似于0.5、0.75、1.25等次像素的出现,从而使页面各类元素在大多数场景下都能有比较精致的细节表现


虽然对于后台设计而言,通常设计师是直接在目标尺寸下进行设计,并在此基础上标注、切图给开发实现,并不存在像移动端那样需要对各种尺寸、各种像素密度的设备进行适配的情况,但对于Web页面来讲,仍存在向上向下适配的可能,因而从页面的兼容性、可扩展性及可维护性层面来讲,我们设计师还是有必要考虑的更加长远,遵循“偶数原则”可以上避免各种潜在的问题。

Image title


(3)开发工程师使用的前端开源组件库比如Metronic、Antdesign等也是基于8的原子单位来设计,因此如果设计师也使用以8为基本单位的栅格系统,开发与设计师相互对接就会更加方便,开发实现页面时也能更高品质的去还原我们设计师的稿件



2、第二步:建立基于原子单位的栅格系统


经过第一步讨论,我们现已确定后台设计的原子单位为8,而我们也知道栅格系统是由栏目(Column)跟水槽(Gutter)交替分布形成的,所以接下来我们要利用原子单位确定栏目跟水槽在具体的页面中如何分布以及它们各自的宽度。


通常,在一套后台设计系统中,水槽宽度会是几个比较固定的数值(因为后台系统的页面相对于其它类型的Web页面,表现的更加整齐、规律,所以留白的方式比较固定,加之后台往往有大量的数据、内容需要呈现,所以要尽可能提高页面利用率,可以留白的空间也比较有限);而栏目宽度更加灵活,它可以根据页面水平方向尺寸的改变而增大或减小以响应页面的变化(遵循8n的变化规律,此处变化规律在下期文章《栅格化与响应式》里会详细介绍)。


当我们做后台设计的时候首先需要确定在什么样的分辨率下做设计,也就是首先需要确定设计稿的尺寸,当设计稿尺寸确定后,便可建立基于该尺寸的栅格系统。假设页面内容区域宽度为W,栏目个数为A,水槽个数为B,栏目(Column)宽度为C,水槽(Gutter)宽度为G,则W=A*C+B*G。栅格系统建立初期,由于我们并不确定之后会有什么样的内容呈现我们的页面上,所以为了让栅格更加灵活、普适,我们先假定单个栏目与水槽的宽度是相同的,即C=8n(n=1、2、3、4...)=G,然后以此将页面内容区域等分,形成初步的栅格,之后再按实际内容需要,按比例调整两者宽度或者按比例对两者进行组合,形成承载业务内容的盒子。目前有两种比较主流的等分方式:12等分与24等分。


12等分的栅格系统在流行的前端开发开源工具库Bootstrap与Foundation中广泛使用,适用于业务信息分组较少,单个盒子内信息体积较大的中后台页面设计;

Image title


24等分的栅格系统适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计;相对12栅格系统,24栅格系统变化更加灵活,更适合内容比较多样复杂的场景。

Image title



栅格系统的应用


1、页面布局与版式设计


(1)、了解承载业务内容的盒子模型(Box Model)


建立好栅格系统后,就可以根据自己的实际业务,在栅格系统上安排内容了。页面上最终承载内容的其实是一个个“盒子(Box)”,这个盒子的高度由盒子要容纳的内容与页面版式设计决定,按8n规律变化;宽度则由栏目与水槽按比例组合得到。


在栅格系统上容纳业务内容的容器我们把它称之为盒子(Box),栅格系统上的盒子其实跟前端工程师写页面时用到的盒子是一致的。如图所示,当我们浏览任何一个网页时,右键>检查元素(审查元素),然后在style菜单下就可以看到这个盒子结构了。其中Padding就是主体内容(Element)距离盒子外侧的距离,我把它称之为内边距,(Element可以是一个按钮,一段文本、一张图片或者一个表格等;)而Margin就是相邻两个盒子间的距离,对应在后台栅格系统中其实就是水槽的大小。了解完栅格系统的盒子模型之后,下一步我们需要根据具体业务内容来确定盒子的宽度,也就是如何利用栅格系统做实际内容的布局与版式设计

Image title


(2)、根据业务内容分配页面比例,确定盒子宽度


以24栅格系统为例,一个24栅格系统可以根据业务需要被2等分、3等分、4等分、6等分、8等分、12等分,还可以被1:1:1、1:2:1、1:3:2、2:3:3、1:2、1:3、1:5、3:5等不对称分割,具体采用哪种比例的组合需要我们根据自己业务需求来定,我们此处所说的比例实际上就是盒子的宽度。

Image title

上图展示了盒子在24栅格系统上的分布情况,图中只列举了部分比例,实际业务中,同一个页面上使用一到两组比例值的组合来布局是比较合适的(如下图),组合形式过多页面就会显得琐碎、杂乱,不利于阅读和使用。因为盒子的高度根据内容来定,故下图中没有体现高度这一维度的变化规律。

Image title

当我们完成上图规划后,需要做的便是根据实际内容往每个盒子里安排内容,做视觉与交互的落地了。



2、元素对齐与间距设定


栅格系统大的层面可以帮助设计者更好的进行版式设计与内容布局,而小的方面可以辅助设计师规范页面内各种元素的对齐与间距的设定。从用户体验角度来讲,这两者同等重要,从执行层面来讲,我们一般先做版式设计与布局,然后再填充内容、调整细节。


栅格系统辅助对齐的作用类似于各种设计软件中的参考线,它能让我们更直观的安排、调整内容的位置及对齐方式,可以使内容变得规律、有序,方便用户浏览阅读,帮助用户提高获取信息的效率。


栅格系统对于元素间间距设定的帮助是直观的,当我们定义了栅格原子单位为8时,这意味页面上各元素间距的变化也应遵循8n的规律,一致的变化规律让页面富有节奏感跟韵律感,在提高页面一致性的同时也减少了设计决策成本。我们知道,栅格系统中水槽与栏目的变化也遵循8n的变化规律,此处n为大于0的正整数,即n=1、2、3...;但是用于规范元素间距的8n,n可以是0.5、1.5这类包含二分之一8的情况,原因是实际工作中,我们面临的情况是复杂的,这样处理可以让间距的设定适应一些特殊的场景,从而使其更灵活普适。

Image title



注意事项


1、水槽宽度的设定


确定好内容模块比例后,我们会发现由于之前等分的缘故,此时水槽较宽,我们需要调整水槽宽度到一个合适的值。


水槽的宽度是8n,也就是水槽可以以8为基本单位去增加或减小。为了减少设计决策成本,我们会事先设定好一系列水槽宽度,并定义好每个宽度对应的使用场景,然后设计中根据每个场景使用对应数值就可以了。我定义了一组水槽的值是8、16、 24、32 、40,为了区分它们的使用场景我们依次为其命名为XS、SM、MD、LG、XL。根据实践经验,正常情况下,两个盒子间距(水槽)的值为24(MD)时,视觉上是最为舒适。

Image title


栅格化工具推荐(插件请在附件中下载)


Ps栅格系统工具


1、PS自带栅格系统设定:新建参考线版面(重点推荐)


Ps有个功能叫做“新建参考线版面”,打开这个面板后,在预设这里可以看到Ps已经预设了8列、12列、16列、24列的栅格系统,选择对应列数就可以看到页面上参考线的变化。预设中“装订线”的宽度即栅格系统中水槽的宽度。默认均为20px,我们可以根据之前讨论的8的倍数原则,将其手动更改为24;


如果预设的栅格系统无法满足我们工作需要,我们也可以自定义栅格系统,并能将栅格参数保存为预设,这样就可以重复利用自定义的栅格系统了;栅格系统还可以选择将其应用在当前画板或者所有画板,十分方便易用。由于是Ps自带的参考线,所以它可以通过快捷键灵活的控制显示或隐藏

Image title

Image title



2、利用Ps标注工具Assistor Ps 进行栅格系统的建立


Assistor Ps在之前主要是一款页面标注工具,但是随着蓝湖等自动标注工具的流行,这个小软件基本没人用了,但我发现它设置参考线的功能还是很强大的,可以媲美大名鼎鼎的guideguid(这款插件目前对Ps cc 2017及以上版本貌似已经不支持,软件本身安装也挺麻烦),所以就介绍给大家。(安装包在文末下载,Win&Mac,解压后跟常规装软件一样,正常安装就行)。但是这个插件由于很多数值都要自己算,实际上没有Ps自带的新建参考线面板的功能好用。算是一个工具的补充吧

Image title



Sketch栅格系统工具


1、Sketch自带栅格系统设定:Layout Settings

Image title

Sketch端利用sketch自带的栅格工具Layout Settings即可完成栅格系统的设置,由于sketch的栅格工具是自带的,与Ps类似,它也可以通过快捷键快速显示或隐藏,点击左下角“Make Default”还可以将自定义的栅格系统设置为默认的栅格系统,方便以后重复调用,但sketch貌似只能储存一组栅格系统的数值,而Ps可以储存多组。



2、Sketch栅格系统插件:BootstrapGrid-maste


BootstrapGrid是一个专门用于建立栅格系统的插件(插件在文末附件中下载),插件可以对栅格系统的基本数据做个性化的设定,可以对多个形状同时建立栅格系统,还可以通过快捷键快速调用。具体用法:先选中要建立栅格的画板或者画板里的形状(可以多选),然后:插件>Bootstrap Grid(Plugins -> Bootstrap Grid)


栅格系统参数设计

Image title



单个形状(画板)建立栅格系统动图演示

Image title



多个形状(画板)建立栅格系统动图演示

Image title



跨平台的web端栅格工具 http://grid.guide/


GridGuide 最大优点是可以针对一种栅格系统生成4组不同水槽宽度的栅格化方案,能比较直观的比较不同水槽宽度下各个栅格系统的视觉感受。使用方法:在右上角设置好页面宽度以及栏目数量,页面内就会自动生成可以下载为png图片的栅格。


Image title


QAQ(常见问题解答)


(1)当栅格系统中奇数不可避免的出现时,如何处理?


理想状态下,我们应该调整内容区域的大小,使其尽可能成为可以被8整除的尺寸,但实际应用中,有时会出现无法整除的情况。基于对盒子模型的理解,此时我们保持padding、margin的值不变,改变盒子的大小去适应奇数的页面(元素)即可,因为一致性跟效率才是栅格化要达成的首要目的,偶尔有一些不“完美”的尺寸是完全允许的,因为用户在实际使用页面时,并不能看到我们使用的栅格系统,也很难注意到那几像素的变化,他们能感受到的是页面整体呈现出来的节奏与韵律感,以及持续、一致的视觉语言带给他们的严谨、可靠的心里感受。



(2)栅格系统必须以8作为原子单位?使用其它数值是否可以


首先需要指出的是使用其它数值当然也可以,栅格系统只是手段,提升设计效率、减少沟通成本、提高页面一致性才是最终目的,所以如果你所在团队有其它栅格化习惯,且一直以来效果良好,那么继续使用它也是没问题的。但是对于设计新人来讲,如果能理解前人的经验,并能较好的运用,对于他们来讲,是会少一些弯路,更好的完成设计工作。



(3)栅格系统建立初期是否必须使栏目宽度与水槽宽相等,并等分内容区域?


建立栅格系统时并不是必须使栏目宽度与水槽宽相等,并等分内容区域。本篇文章介绍栅格系统时采用这种处理方式是为了让大家更好的理解栅格系统建立的原理与过程,事实上,栏目的宽度在实际应用中往往大于水槽宽度,我们通常会先计划好水槽的宽度、内容区域总宽度与栏目的数量,这时候栏目的宽度通过计算可得到,对于响应式页面,栏目的宽度可以是百分比而不是具体的数值(关于响应式的内容下期文章跟大家分享)。

转自UI中国-BYMD


B端产品的设计理念

ui设计分享达人

这篇文章主要是从什么是B端产品,B端产品与C端产品的差异性,以及如何从设计角度切入B端产品等做具体说明

前言:在当下的市场环境中,企业内部的运营管理效率问题因为团队规模迅速扩张而逐渐凸显。此时,B端产品的助力就显得尤为重要。这篇文章主要阐述了B端的定义和方向,以及与C端产品的差异性,并且如何从设计角度切入B端产品等方向做具体说明。


什么是B端产品?

B端产品也叫2B(to Business)产品,使用对象一般为企业客户或组织。B端产品帮助企业或组织通过协同办公,解决某类管理问题,承担着为企业或组织提升效率、降低成本、控制风险从而提高企业收入,减少企业内部损耗的重要职责。B端产品的工作是合理实现企业需求,提高产品核心竞争力,并提升市场价值。


B端产品有哪些方向?

根据B端产品的服务对象,我们归纳为三个方向:

1:业务平台方向  

2:办公协同方向

3:商家管理方向

这三个方向基本上涵盖了企业对内及对外的经营活动及业务运营的工作范围。接下来我会一一详细介绍。


1:业务平台方向

业务平台方向是指供业务平台使用并且对这些产品提供支持。其中再细分则包括垂直业务线、基础服务产品线、交易平台产品线。



举两个常见的例子:


CRM:客户关系管理(Customer Relationship Management)。广义上的CRM包括从客户开发、管理、营销、服务的客户全生命周期管理;狭义的CRM是指给销售人员使用的销售过程管理软件。是通过以客户为中心的管理模式,提高企业的销售力量来达到为企业赚钱为目的。


通过CRM系统我们可以知道: 

1:我们的客户在哪里?(售前市场调查)

2:哪个产品更畅销

3:针对客户进行分析

4:销售结果预测等等


ERP:企业资源计划(Enterprise Resource Planning)是针对物资资源管理、人力资源管理、财务资源管理、信息资源管理集成一体化的企业管理软件。例:ERP以一项计划为出发点,该计划可以是市场的一个大订单,或者是企业的一个战略目标,那实现该订单需要企业的多项的资源的支持,则需要用到人力,生产资源,设备,财务,采购,客户资源等。ERP是通过对这些资源的有效计划利用,公司高层通过掌握、管理、控制等手段来实现预期目标。适合大企业或者成熟的企业应用。



2:办公协同方向

支持企业内部办公管理运转的业务系统,属于办公协同产品。

例:OA,即办公自动化(Office Automation)。是比较常用的办公软件,基于工作流概念,使企业内部人员方便快捷地共享信息,协同工作。


3:商家管理平台

平台型互联网公司为商家提供了交易的平台。为了保证平台的持续、良性运转,公司需要对入驻的商家进行资质审核和服务管理,这就需要设计并开发企业内部使用的商户管理系统;同时公司需要给商家提供一套强大的经营管理后台,方便商家进行自主管理。从业务管理视角来看,商家管理方向大致分为图下所示的两大系统。

小结:上述所列分类为大类区分,有的产品即可归属于交易,又可归属于基础服务,所以不必严格按着分类走,还需根据公司具体情况做具体分析。



B端产品的特点?

1:B端产品大都有行业特性或场景特性,目标用户一般是群体。

B端产品用户群体是某个业务团队或组织,需要共同协作来完成工作,所以需要B端产品来帮助他们实现分工协作。


2:B端产品业务逻辑复杂,子业务多样化。

B端产品背后的业务复杂度高,人员、分工、协作、流程、规则随时可能调整,这就需要我们有非常强的抽象能力和逻辑思维,寻求看似散乱无章的业务共性,进行合理整理和设计。


3:效能第一

B端产品的目标是解决组织的某类业务问题,因此聚焦于流程,提升业务效能是最重要的。



B端产品和C端产品的差异性

1:需求来源不同

C端产品的需求来源于用户,使用C端产品的是独立的个人。而B端产品需求已经存在,来源于公司内部或外部。


2:产品设计不同

C端产品经理通常关注产品的点击率,转化率,增长率等。而设计B端产品的本质是提升企业内部工作效率,所以更注重优化用户操作流程,提能。


3:收益量化不同

C端产品关注的核心指标主要包括DAU、UV、PV、CVR等,任何功能的设计都可以明确考核指标,容易量化和评判项目收益。

B端产品要支持、解决业务问题,但业务成效的影响因素非常多,很多时候并非取决于B端产品设计的好坏。


4:核心功能点不同

C端产品有核心功能点,B端产品的功能多且每个功能都具有必要性。



面对B端产品如何分析和入手?

1:了解业务流程和产品定位

在做B端产品之前,我们需要对即将做的业务有一个充分的理解和认知,不同部门使用的产品不同,则相对应的设计方案也不相同,这就需要我们充分了解业务流程,针对性的进行梳理。

例:如果我们要做报税系统,那么我们要知道报税的流程有哪些,这样可以帮我们规避许多不必要的问题。


2:功能流程归类

把杂乱的功能整理清楚,提高用户效能。


3:让产品落地并不断生长(价值体系搭建)

这是整个产品中最核心的点。何谓价值体系?对于B端的产品而言,客户最关心它能为实际的工作带来哪些便利,所以对于一个B端产品,解决问题的价值就是最好的推广。


4:整合设计,迭代优化

对于设计部门,我们需要考虑设计的功能点有没有遗漏?交互框架搭建的过程中,随着产品发展,是否考虑到了其更多功能的扩展性。



提高B端产品的品质,需要考虑的方向

1:功能引导

功能引导是产品降低用户学习成本最通用的手段之一。简单说就是使产品学习起来简单,易用,用最快最清晰的方式触达产品核心,可划分为内嵌式和互动探索式两类。


来源:语雀(内嵌式)


来源:Teambition (互动探索式)


设计要点:

1: 文案精准,通俗易懂

2: 与品牌风格保持一致

3: 增加趣味性

4: 挖掘合适的出现场景,在最终呈现上做到简洁克制


功能引导最重要的是要契合产品本身,在合适的时机,以恰当的方式,在不剥夺用户探索权利的情况下,去引导用户更好地使用这款产品。



2:认知减负


帮助用户认知减负的常见手段有可读性优化、复杂性简化等。

可读性优化上,可以通过关键词提炼,可视化图表等方式,降低用户阅读大块内容时的产生的心理压力和抵触感。


例:图一中列表1和列表2的对比,通过数据可视化的方式让用户更为有效的查看数据,从而对业务有更加直观的了解。

图一:来源:某广告平台(可读性优化)


图二 来源: Teambition(可视化图表)



复杂性简化上,可以通过减少页面上不必要的功能信息,减少干扰信息。


例如teambition的登陆页面,点击“更多登录方式”则可以看到相对不常用的元素。将不常用的元素收起来,减少页面上低频率使用的功能,减少视觉上的混乱。

来源: Teambition 登录界面(复杂性简化)


设计要点:

1: 避免不必要的元素

2: 利用普遍的设计模式

3: 减少不必要的任务

4: 最小化可选项

5: 保证可读性


3:学习模式

对于一些面向固定人群使用的产品(比如企业数字化平台、智能工厂系统等),面对复杂的系统,有时简单的新手教程并不能解决业务复杂性的本身带来的操作门槛,此时向专业用户提供帮助文档或教学视频等学习工具,就变得尤为重要。

来源: 用友(教学视频)


结尾:以上就是对B端产品的初略思考,其实想说无论是B端还是C端,每个产品都有自己相应的价值,我们在设计的过程中需要根据具体的业务和场景进行具体分析。


细说B端后台产品UI设计那些小结

ui设计分享达人


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里B端后台产品UI设计的工作小结,总结一些常见问题、解决方法以及自己的经验。


写在前面

作为一个新时代全能打杂,日常工作包括移动端、PC端的UI设计以及各类平面视觉设计,其中自然少不了令人“秃”然的B端后台产品设计。

毕业两年来一直都做着B端产品的UI设计工作,参与过的后台产品设计面对的主要客户有公司内部、各大企业以及政府机构。工作和学习的过程中走过不少弯路,也在不同的项目中不断反思和总结。把自己的一些想法和经验分享出来,总结自己工作中遇到的问题和解决的方法,记录自己思考和理解的过程,也希望对即将或正在从事B端后台产品设计的你有一点点启发或帮助。

希望在日后的工作和学习中,通过实践来不断完善自己对B端后台产品的理解。



目录

一、明修栈道C和暗度陈仓B

二、后台产品设计思路

三、后台产品设计规范

四、经验观点及设计资源



正文

一、明修栈道C和暗度陈仓B

1.1初识B端产品和C端产品

按照C端产品和B端产品的专业术语来解释的话,C端Consumer,表示为消费者、个人用户或终端用户设计,直接面向普通用户提供服务来帮助他们实现个人需求。B端Business,它面对商业和企业,是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。

在我们日常生活中,在手机上使用的大多是C端产品,单一的C端产品通常是为了实现单一的需求,比如看网红的抖音、听音乐的酷狗、买车票的12306、社交的微信等,这些产品有自己的核心功能,其他的功能则是附加的,倘若没有这些附加功能,虽然用户体验感会降低,但并不会影响产品的核心功能。

而面向B端的产品,我个人称之为“暗度陈仓”,当个人用户为实现个人需求产生了一系列动作,往往伴随着该需求的另一端也会反馈一系列动作,即C端产品的后台产品线(BtoC),比如淘宝卖家平台、饿了么商家版等。除此之外,还有面向商家、企业、业务部门提供的企业级服务产品,以及面对企业或者个人提供的平台级工具产品等。

虽说我们日常使用的更多是C端产品,但是B端产品对我们的影响也是时时刻刻都存在着的。C端产品在明,逐渐改变着现代人的生活方式,B端产品在暗,间接服务于用户,让一切流程化秩序化,并且具有多个主要功能点。

——“ToB还是ToC?这是个问题......”

——“不管ToB还是ToC,最后都还是ToP(people)。”

1.2B端和C端产品的区别

在我看来,C端产品以消费互联网为主,B端产品以产业互联网为主,C端更感性,而B端更理性。

从使用者的角度来说——

C端产品关键词包括免费使用、迅速上手、体验为王、你能让我做什么;

B端产品的关键词则是付费购买、上手缓慢、效率第一、你能为我做什么。

从开发的角度来说——

C端周期短,B端周期长;

C端用户多,B端用户少;

C端逻辑简单,B端逻辑复杂;

C端竞品较多,B端竞品较少;

C端主战场是移动端,B端则是PC端;

C端是用户体验驱动,B端是解决问题驱动;

C端产品的使用决策权在用户手中,而B端产品的使用决策权则在客户手中(B端客户不一定是用户);

C端产品除了产品的体验以外,也要让产品更美观,让活动更有趣,让用户更舒服,产品经理有很强的同理心,B端产品的实用性大于美观性,能切实解决问题、配置资源的B端产品才是一个好的B端产品,产品经理要具有更强的逻辑思维能力。

1.3后台产品常见分类

后台产品按其作用可大致分为两类,一是支撑前台产品,二是管理各种资源。我认为后台产品应当是囊括在B端产品的范围之内的,常见的类型包括:

  • C端产品的后台产品线——如淘宝商家版,饿了么商家版,对订单和用户进行管理,支持C端产品的业务进展;

  • 平台级工具产品——如微信公众平台,对文章和读者的数据统计和管理;各大互联网公司的开放平台,如微博开放平台等;

  • 企业级服务产品——虚拟主机系统(VMware),云主机管理系统(深信服、xensystem、腾讯云)以及各种云SaaS;

  • 企业的业务处理平台——对内有考勤、报销等OA办公系统,对外有CRM客户管理系统,ERP资源及供应链管理系统。

二、后台产品设计思路

2.1初识后台产品设计

说起后台产品,很容易想到复杂、庞大、逻辑缜密,而作为设计师,苦于竞品短缺、架构复杂,设计的前期工作比设计本身要复杂得多。

后台产品不同于普通用户所使用的APP,它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的app,再给他几个其他的音乐APP,用户是可以迅速上手并且轻易解决自己的需求的。而后台产品则不然。

对于后台产品来说,首先,所见之少,它并不是随随便便就可以下载使用的,即便你在使用的过程中,也因角色不同而受到权限限制,一般来讲很难像超级管理员一样接触到整体功能;其次,门槛之高,后台产品的使用者一般都是在该行业沉淀了很久,所以要对后台产品进行设计就需要同样了解该行业、甚至更能洞察该行业,业务本身的复杂性质决定了后台产品架构也会比较庞大;然后,无论是工厂商家的进销存管理,还是政府医院的工作流和业务流,乃至企业内部的产品,除了不同行业都有门槛外,对信息和产品也有“保密协议”的使命感,所谓“隔行如隔山”,在后台产品更是如此;最后,后台产品设计往往没有固定的功能架构和商业模式,对于产品经理的逻辑思维能力要求更高,设计师不仅仅是做界面、优化流程,也要主动和产品经理沟通交流,并对产品进行思考和探索。

这大概就是后台产品相关资源较少、设计难度较大的一些原因。


2.2后台UI设计工作流程

后台UI设计的工作,大体分为三个部分:需求分析——设计执行——数据分析。

  • 在需求分析阶段,要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况,比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。 做这个产品是为了解决什么问题?想实现什么目标?使用这个系统的用户有哪些?不同角色的用户有哪些具体的权限?是否需要对每一个用户的行为都生成操作日志?产品有哪些主要的功能模块?产品的业务流程是怎样的?有哪些同类型的产品?和他们相比我们的产品有什么特色和特点?成功地做出大而全的后台产品,是整个设计团队和开发团队能力的体现,而对很多小团队来说,只能做一些大团队不愿去做的产品,或另辟蹊径在某些方面做专做精。

  • 在设计执行阶段,参照PM给出的功能清单做原型和流程的梳理,需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等,交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成,开始做UI视觉方面的设计,而这时后端同步构思需求的实现方案。UI设计师向前端了解实现框架,方便交接和沟通。当界面实现,UI设计师应该是最早进行测试的,力求视觉设计和代码实现无误差。在完成设计执行后,从信息层级、文字、图标、图片等方面进行设计走查,进行多次设计验证与测试。

  • 数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户(或内部)使用,根据产生的具体问题进行不断迭代,且观察产品能否通过准确的数据反映问题、体现能力,应虚心接纳使用者的使用建议并严谨思考其合理性,用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标,后台产品才是真正产生了价值。



2.3制定设计规范的作用

为后台产品制定设计规范有哪些作用和好处呢?简单来说就是对产品好、对自己好、对团队好、对客户好。

  • 对产品——在项目完成第一版较为稳定的版本时,着手制定设计标准,统一公司视觉设计规范及某些特定交互设计规范。同一个项目会有多个设计师的参与,规范化的设计语言,避免因设计控件混乱而影响设计输出;

  • 对自己——组件化同类元素,提高工作效率,建立公司产品的组件库,以便不同项目的复用及设计延展;在同一个项目中也能更好的把控该项目的视觉规范,提率;

  • 对团队——设计规范的制定,规范了设计团队的输出,同时方便了与开发团队的交接和协作。通过设计规范的制定,前端实现也能拥有一套可供复用和扩展的组件库,助力上下游交接及团队协作;

  • 对客户——制定设计规范的同时需要考虑设计延展性,为不同客户的定制化需求提供更的输出。同时在进行产品迭代时,设计规范的组件化调整也大大提高了工作效率。



三、后台产品设计规范

*以下内容仅供参考和交流,图片内容不代表真实尺寸,请结合特定产品灵活使用。


3.1页面布局

  1. 统一尺寸——据统计,目前PC端用户屏幕分辨率占比排名前三的是1920*1080、1366*768、1440*900,以1440来设计的话,向上适配或者向下适配误差会比较小。 适配方案——面向多个客户,后台产品设计功能型页面的尺寸统一为1440*900,按照栅格系统原则向上或向下适配;展示型页面以1440*900为主,同时设计出极端情况(宽度为1280以及宽度为1920)的效果图,力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统,由于各个职工电脑屏幕是统一采购、统一尺寸,所以开发适配的分辨率可以统一尺寸进行设计,这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可(提前和前端沟通好)。

  2. 页面框架——页面框架主要分为左右栏布局和上下栏布局,还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域,其中顶部菜单栏、左侧菜单栏为固定结构,右侧主体内容根据分辨率进行动态缩放;上下栏布局包括顶部菜单栏和主体内容两大区域,其中顶部菜单栏为固定结构,主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值;左右栏布局时,左侧菜单可收缩展开,收缩状态下固定宽度。

  3. 栅格布局——栅格系统的使用是为了解决自适应和响应式问题,从而更好地进行产品设计和产品开发。响应式栅格采用24列栅格体系实现,以满足2,3,4,5,6分比布局等多种情况。固定宽度Column,将间隔Gutter进行动态缩放。需要栅格化处理的内容的总宽度=23列(1列=1宽度Column+1间隔Gutter)+1宽度Column=24宽度Column+23间隔Gutter。谷歌规定模块和结构之间要以8px为基准,布局间相对间距可采用8px以及8的倍数,但一些小组件(按钮、间隔、输入框 )可以以4为基准。栅格布局是为了辅助设计,灵活运用,不要被它所局限。

  4. 尺寸设定——一般在整体区域左上角放置产品LOGO及产品名称,大部分系统顶部栏高度48+8n,侧边栏宽度200+8n。我常用的是顶部栏高度56px,侧边栏宽度200px,侧边栏收缩状态宽度56px,右侧的侧浮窗宽度400px。

  5. 相对间隔——定义主体内容的上下左右边距,定义主体区域内各模块的边距及安全宽度,超出内容区域的部分采用区域内滚动或整屏滚动,视情况固定导航栏。



3.2标准色

  1. 颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求,可能也会将统计图、标签等进行统一标准色设定。

  2. 品牌色即产品主色,产品主色的设定直接影响产品气质和直观感受,也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取,尽量做好色彩的延伸性,可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。

  3. 辅助色用于提示其他场景,比如成功、失败、警告、无效等。

  4. 中性色常用于文本、背景、边框、分割线等,需要考虑深色背景和浅色背景的差异,可以选择同一色相控制透明度变化,用来表现不同的层级结构。

  5. 其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。

3.3标准字

  1. 后台系统常用的字体:windows系统,中文Microsoft YaHei,英文Arial;Mac字体,中文PingFang SC,英文Helvetica;除此之外可以选择的字体还有segoe UI、思源黑体、Hiragino Sans GB等。

  2. 后台系统中常用字体大小为12px、13px、14px、16px、18px、20px、24px、30px。

  3. 行高设定,根据文字大小及使用场景设置行高,一般行高=文字大小+6px/8px。


3.4图标

  1. 图标是UI设计中重要组成部分,一般分为功能图标和应用图标,以图形的方式传达概念,可以降低理解成本,使得界面更加协调美观。在后台产品中,图标的功能则更偏向辅助性,辅助用户对功能的认识。

  2. 除了某些常用的图标,有一些专业性的操作和词汇则需要设计师进行绘制,现在比较方便的方法是在iconfont提供的图标模板上用AI绘制,画板1024*1024,提供圆形、正方形、矩形形状(文末提供下载)。图标尺寸按照8的倍数进行延展,绘制完成后生成svg格式文件,提交到阿里巴巴矢量图标库的项目组里,方便前端调用,调整大小和颜色更为方便,且能够优化系统内存和性能。

  3. 分享一个我个人常用的AI使用小习惯,因为ctrl+q、ctrl+w作为退出和关闭我用的不多,而且有时候手抖会在保存时候不小心点成了关闭,所以我无情地把ctrl+q、ctrl+w变成了拓展和拓展外观的快捷键......感受还不错。




3.5按钮

  1. 按钮是后台产品进行交互设计是重要元素,提供给用户进行点击操作,是视觉上最引人注目的控件,具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。

  2. 按钮的交互状态包括默认、悬停、点击和不可用。

  3. 按钮根据需求分为不同尺寸,大中小三个级别用在不同的场景,一般按照8的倍数设定。如高度分别设定为24、32、40px。

  4. 规范整理时要规定不同类型按钮的宽高、圆角及文字大小,同时还要将按钮的不同状态展现出来。

  5. 填充按钮之间间距最小为10px。

3.6导航

  1. 导航的类型有很多种,常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。

  2. 各类导航中的字体大小可进行统一设定。

  3. 顶栏菜单多为一级菜单,点击切换,或作为下拉菜单的父级,将子级菜单合理分类。

  4. 侧栏菜单为垂直导航菜单,可以内嵌子菜单。

  5. 下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。

  6. 步骤条引导用户按照流程来完成任务,一般步骤不得少于两步。

  7. 分页的高度设定为24px、30px、32px,根据应用场景适当增减内容,比如设定每页展示数据的条数、跳转至指定页等。

  8. 面包屑用于说明层级结构,使用户明确当前所在位置,并且可以回到任一上级页面。

  9. 徽标数用来通知用户当前有未读消息,一般出现在图标的右上角或者跟在文字后面。



3.7表单

  1. 表单多由一条或多条列表项组成,单一列表项的类型有字段输入框、条件选择器。

  2. 字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式,比较适合PC端的使用;上下分布增加了表单的整体高度,视情况选择使用;无标题经常应用在登录注册,虽然减少了面积,但是增加了理解难度。

  3. 输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。

  4. 输入框的尺寸可按照8的倍数进行设定,比如24px、32px,也可根据系统实际情况进行设定,我常用的输入框高度为30px,宽度视情况而定,无圆角。上下布局的多个输入框上下间距为20px,有错误提示时候竖向增加10px或横向显示在输入框右侧(预留出位置)。

  5. 表单中标题文字左对齐,输入框左对齐,标题文字距离输入框20px(多个长度不同的输入框算最长的);标题文字右对齐,输入框左对齐,也是常用的方式。输入框内正文字体14px,文字和左右两边边框的边距10px。

  6. 选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形,复选框多为方形。

  7. 搜索框和选择框的高度为30px或按照8的倍数自行设定,通常和输入框保持一致。搜索框距离右侧按钮4px,内部文字14px。

  8. 单选多选框尺寸16*16px,多个选项横向排列间距16px,纵向排列间距8px。

  9. 开关按钮外框40*20px,内部圆形16*16px。



3.8表格

  1. 表格在后台产品UI设计中站的比重非常大,用来展示数据、统一管理、作为详情入口,是最清晰、的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围,同时也包括表格中的按钮样式、标签样式。

  2. 表格主要分为五大区域:选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框,为用户提供按需搜索,可以大大提高用户效率;操作区指各种对表格内容进行增删改查、批量处理、配置列的动作;表头展示列标题,一般具有排序功能;正文主要展示各种各样的数据,要注意行高、对齐、分割、信息层级等,要考虑是否提供行内操作;底栏显示分页、总数统计等。 
    表格信息一般主要功能为增删改查,查看和编辑是最基本的功能,表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。

  3. 行高——表格行高可设置为表格内字体高度的2~3倍,主表格会间隔显示不同颜色,用于区分不同行数据、加强视觉流引导,展开单行的内置表格可采用纯色,选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用36、40、48、60等。

  4. 行数——表格行数太多加载速度会降低,延长用户等待时间;行数太少会导致用户不断翻页,降低使用效率。比较合适的默认表格行数是20或50,用户可以根据自己需求选择默认的行数。设定行数之后,如果每页行数多余每屏行数,可在表格内引入滚动条,这时可以固定表头滚动内容。

  5. 列宽——列宽根据内容字段长短需要有不同且合理的默认值,使得表格字段有良好的展示效果。列内容的长度固定时,列宽应大于固定宽度(比如时间、MD5、SHA1);列内容不固定时,能预判最大宽度的按照最大宽度设定列宽(比如IP地址、MAC地址、姓名),不能预判最大宽度的设定列宽按照常用宽度,多于内容省略以“...”展示,鼠标悬停出现完整内容(比如详情、描述)。

  6. 列数——表格列不应过多,列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列,用户可自定义展示必需列以外的其他列;只展示重要信息,下拉展开列查看完整信息;在表格中引入横向滚动条,根据实际情况选择是否要始终固定基本信息列(如第一列是文件名)和操作列(最后一列的操作)。

  7. 对齐方式——表格内的文本应按照文本类型不同进行统一规范,如金额类数值保留相同位数小数,SHA1虽然是一串数字但是其实那并不是数据而是一串编码,所以可以像文文本一样左对齐。根据文本内容不同,对齐方式也应灵活调整,可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的,将标签前置对齐。类似IP地址、MD5、SHA1、域名这样的信息,也可以根据产品需要在文本前面增加“复制”图标,方便用户调用。

  8. 详情入口——表格内部数据的详情入口,将能点击下钻查看详情的内容以不同颜色表示,同时在表格行最后一列操作按钮部分放置一个查看按钮。



3.9反馈

  1. 包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框,区别是是否会打断用户工作流。

  2. 弹框又称对话框,是叠加在应用主窗口上的弹出式窗口,以对话的方式使用户参与进来。

  3. 弹框——弹框出现时,主题内容增加一层遮罩#000,透明度50%,避免使用双层弹框,可同时采用有关闭图标的弹框和无关闭图标的弹框,引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭, 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框,或者再次进行交互梳理。

  4. 侧滑框——又称抽屉,出现在右侧,固定宽度400px,高度覆盖在主题内容之上,点击侧滑框以外的区域则收起侧滑框。

  5. 骨架屏——为某些特定数据提供数据加载等待时的占位图形组合。

  6. 全局提示——建议停留时间3s,可根据文字字数调整停留时间,文字内容限制在30以内。

  7. 警告提示——用不同颜色和样式展示需要关注的信息。

  8. 通知提醒——消息通知和告警信息用通知提醒框,单个消息从页面右侧以抽屉的方式划出,用户可手动关闭,或停留3s后自动关闭。



3.10缺省状态

  1. 绘制不同类型的情感画插画表示缺省状态,如404、500、暂时没有数据、没有新消息等。

  2. 页面需要一个默认的底色,错误文字使用14px,与情感化插画间距20px,与按钮间距30px;


3.11数据可视化

  1. 数据可视化部分可能是后台产品中对视觉设计要求较高的部分,使用情境为各类统计图、大屏展示页面等。

  2. 功能型页面的数据可视化可以引入图形化设计组件,Echarts、G2、d3等;展示型页面的数据可视化则可以做的更有趣,比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。

  3. 考虑到数据可视化可能会需要深色浅色不同的背景,在数据可视化统计图的色彩搭配上要注意颜色的拓展性。



四、经验观点及设计资源

4.1设计前端一家亲

  • Ant Design的设计组件,实现框架React、Angular——https://ant.design/docs/spec/layout-cn

  • Element的设计组件,实现框架Vue 2.0、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox

  • iView的设计组件,实现框架Vue——https://www.iviewui.com/docs/guide/theme

  • 飞冰的设计组件,实现框架React——https://alibaba.github.io/ice/

  • Layui的设计组件——https://www.layui.com/demo/grid.html

  • G2可视化图形组件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

  • Echarts可视化图形组件——https://echarts.baidu.com/

  • d3.js可视化图形组件——https://github.com/d3/d3/wiki/Gallery

  • 在线栅格化计算工具——http://grid.guide/#/1000/24/34/8/0



4.2不丑也要多读书

  • 《B端产品经理必修课》

  • 《交互设计精髓》

  • 《U一点料·Ⅱ》

  • 《简约至上:交互式设计四策略》



写在最后

不管是做C端产品还是B端产品,都是为了实现用户的需求、帮用户解决问题。

刚接触后台产品的UI设计师工作时候,最希望能把产品做的炫酷、美观,工作中慢慢地发现项目的背后思考更为重要,产出的设计成果也应该有理有据、支撑整个设计体系。网上供大家使用和学习的资源非常多,对一些公司来说、专门去制定一套自己的后台设计规范不免显得费时费力,合理引入antdesign和element等开源的设计组件,会使得设计师以及设计师的好朋友前端小哥哥事半功倍,有助于设计师把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上。

在后台产品的设计过程中,更应该把宝贵的时间用在更值得关注的事物上,让设计师能够辅助业务挖掘,从趋于相同的表象中找到产品独有的闪光点,从而切实解决问题和实现价值。

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


B端产品 — 浅谈Atlas设计思路

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

今天分享一款运维相关的B端产品,主要阐述自身的设计思路及产品的优化过程。

B端产品功能聚焦、讲究效能,对产品链路有着高流畅度与率的诉求。设计师在做B端产品的的时候要有全链路和小白用户视角,以体验及效率为先,我们需要协调全局一致性,遵循产品链路,在视觉上减少对于用户的负担和干扰,避免打断用户的使用流程,确保流畅、优质的用户体验。

在产品优化上,我们在每个版本迭代后,会对用户进行访谈及收集意见反馈,建议设计师可以制定一套自有的用户调研方式去了解用户的想法和自己产品的不足之处,这样的好处是可以让用户帮助你优化产品。

在产品的细节上我们可以深度地去挖掘和尝试更好更优的设计方式,对设计师来说打磨和优化每一个细节正是B端产品的魅力所在。

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

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

Feed流设计:那些容易被忽略的图片适配知识

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

在产品设计中,大家很容易跟着产品原型走而忽略了一些设计上的细节问题。本文笔者总结了在Feed流中容易被设计师忽略的,却最容易出现问题的几种图片适配方式。
我们每天被淹没在各种Feed流中,感觉它的设计是如此简单,只需设计一个卡片,然后复制粘贴整个界面就大功告成了。
但是,大家很容易忽略图片适配的问题,比如:微信朋友圈你无法保证用户发几张图片,也无法预估图片的比例,那么就需要我们对它设定相应的规则。
下面我总结了最易出现问题的大图布局、宫格布局、拼图布局的图片适配方式。
大图布局也就是不管用户上传几张图片,Feed流中以一张大图进行展现,点击详情或通过滑动才能查看其他图片。大图布局的图片适配方式一般有两种:一种是展示图片比例固定;另一种是随图片而变化。
不管用户上传的是横图还是竖图,其展示图片的比例都固定。采用该适配方式图片占用空间小,可提高用户的阅读效率,因此,当你的产品目的想要提高用户的阅读效率时可以使用,比如字里行间。
Feed流中容易被忽略的图片适配知识
Feed流中容易被忽略的图片适配知识
当用户上传不同比例的图片时,图片展示宽度为屏幕宽度,而图片的展示高度根据确定的宽度等比例缩放。采用该适配方式能将图片信息表达完善,图片占用空间大,适合图片质量高,用户以图片浏览为主的产品。
Feed流中容易被忽略的图片适配知识
Feed流中容易被忽略的图片适配知识
需要注意的是:采用该方式需要设置阈值,当图片的高度超过一定数值,高度就不在增加以阈值为准,当图片的高度小于一定数值,高度不在减小,以阈值为准。
宫格式布局也就是用户上传的图片会适配到一个个的方块中,宫格布局的形式多种多样可以是九宫格、五宫格、三宫格,下面以较为复杂的九宫格的适配为例。
九宫格的适配未对屏幕进行区分,但对只上传一张图片进行了特殊的处理,二张或二张以上直接以最小边为方块的宽,然后等比例缩放,图片的具体适配方案如下:
Feed流中容易被忽略的图片适配知识
Feed流中容易被忽略的图片适配知识
当图片为三张时,3、5位置对调,排成一行:1、2、3。2)当图片为两张时,直接将图片适配到1、2格子。
当图片为1张时,如果0.5 < = 宽 / 高 <= 2 时,被限定在1 – 4格子的范围大小(包括间距),也就是凡是宽高比在这个范围时,最长的那边暂两个格子加间距。
Feed流中容易被忽略的图片适配知识
Feed流中容易被忽略的图片适配知识
当图片为1张时,宽 / 高 > 2的图片(如全景图),最多占三栏,高最多占一栏(包括间距大小)
Feed流中容易被忽略的图片适配知识
Feed流中容易被忽略的图片适配知识
单张图片,宽 / 高 < 0.5(如微博长图),高最多占二栏,宽度最小占二栏1/3(包括间距)
Feed流中容易被忽略的图片适配知识
Feed流中容易被忽略的图片适配知识
这种布局方式是将几个图片拼成一个矩形,样式新颖类似杂志的排版,因此也叫杂志式布局,不过因为其对图片的要求较高,因此多应用在图片社交中,如in。
Feed流中容易被忽略的图片适配知识
Feed流中容易被忽略的图片适配知识
下面,我总结了宫格布局的规则,在设计时你可以不用把每种情况都设计完,只要把不同图片适配的方案发给开发即可,他们会选用相应的规则。
Feed流中容易被忽略的图片适配知识
Feed流中容易被忽略的图片适配知识
大家在设计时,很容易跟着产品原型走,从而忽略一些小设计。
尤其是对于新手设计师来说,更容易考虑不全面,因此建议大家在看到一些干货的文章,就收集起来,以后在工作中遇到也能够很快的找到文章,从而就可以规避这些问题,少走弯路。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

整理!点赞设计分类。

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 点赞设计的分享!

 微信图片_20190321162040.jpg微信图片_20190321162058.jpg微信图片_20190321162101.jpg微信图片_20190321162104.jpg微信图片_20190321162113.jpg微信图片_20190321162117.jpg微信图片_20190321162120.jpg微信图片_20190321162122.jpg微信图片_20190321162125.jpg微信图片_20190321162139.jpg微信图片_20190321162143.jpg微信图片_20190321162145.jpg微信图片_20190321162148.jpg微信图片_20190321162154.jpg微信图片_20190321162157.jpg微信图片_20190321162200.jpg微信图片_20190321162204.jpg

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

日历

链接

个人资料

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

存档