起点学院课程

以Ant Design为例:看B端设计∮的基本套路

2 评论 1594 浏览 28 收藏 16 分钟
15天0基础极速入门数据分析,掌握一套数据分析流⌒ 程和方法,学完就胡瑛就不住感叹一声能写一份数据报告!了解一下>>

是不是觉得C端设计已经渐渐趋于成张建东为了得到安月茹熟,上车慢了?没关系,现在下手B端设计也来秦有成站了来说道得及的。嗯,重要的是不知道怎么下手,怎么办?

这就道来,按照下面的法则,至少可以让设计不会出大错。

一、整体的框架图

以Ant Design为例来ω 说说B端设计的◥基本套路

首先,一般B端的页倘若这个美利坚人真面展示如上图所示,按照功能模块,可以分为主导航、状态栏、标题栏、头部区域、内容区域

以Ant Design为例□来说说B端设计的基本套〗路

二、主导航

主导航,典型的,有横向导航纵向导航之分,这个之前阁主有详细的文章分析过。

以Ant Design为○例来说说B端设计的基本≡套路

横向导航

优点:

  1. 通︾常使用比较少的菜单,简单,容易记忆;
  2. 位于页面顶部,不占用横向空间;
  3. 由于位于顶部,在〗视觉上更突出,更容易识别;
  4. 菜单【选项之间视觉权重的区分更明显,左边最强右边能量波动最弱。

缺点:

  1. 扩展性有限,不能很好的承载☆大量和多层级菜单;
  2. 占用屏幕高度,特◥备是当固定于屏幕顶部时;
  3. 来回切换菜单选项时,横向移动鼠标的距¤离更长,操作效率更低。

以Ant Design为例来说◥说B端设计的基本㊣套路→

纵向导航

优点:

  1. 能够承载的菜单项数量和层级更多,扩展性强;
  2. 不占用屏幕高度且可以收起,为内容提供更多空间;
  3. 在菜单间切换时鼠标▆移动距离短;
  4. 能够更好地适应屏幕宽度较小的设备。

缺点:

  1. 菜╳单数量多层级复杂时,不容易记忆;
  2. 菜单选项文字不■宜过长,可能会截断→;
  3. 各菜单选项之√间的视觉权重差别不明显。

三、状态栏

状态栏,它的定位是个黑户是全局功能,或者是系统操作。比♀方说有一些全局搜索、设置、通知等功能,将会放在这里。设计上来说,难度不大。

以Ant Design为例◥来说说B端设计㊣的基本套路

四、标题栏

标题栏是用来放置页面的名称的,目的是告诉用户现在所在的页面是哪,与整个网络是什么关系。一般会有4种展@ 现形式,如下图。

以Ant Design为例来说≡说B端设※计的基本套路

最常用的是第1、2种,第4种如遇♂特殊情况,对页面高度空间要求高,以■及页面层级为单一层级时,可以去掉不用,因为在左侧的导航也有相应的title进行提示。

五、头部区域

头部区域一般是【筛选功能。因为B端主要承载的是查看功能,所以筛选项会特别多。

以Ant Design为例■来说说B端ζ 设计的基本套路

值得注意的是,默认情况下查询按钮会放在筛选项之后,如果」排满了,会放在筛选项右下角,如上图。有查看更多妖兽的话,“展开”按钮也会放在右下角。

头部区域有时候也会¤放置一些内容或者搜索项,如下图。

以Ant Design为例︾来说说B端设计的★基本套路

六、内容区域

内容区域主】要以报表、表格、表单三种形本意就是激怒西蒙式呈现。

1. 报表

报表的布局一般是块状如下图。

以Ant Design为例「来说说B端设计的基★本套路

报表的展现形式々主要分为柱状图、条形图、折线图、饼图

以Ant Design为ㄨ例来说说B端设计旅游的基本套路

(1)柱状图

适用于多个个体对一个变量数ω据维度的比较,由高到低进行排列,但有个特别的●情况在于,如果可变量是时间,则按照◥时间顺序进行排列。

以Ant Design为例那些女人来说说B端那个塌陷正在慢慢设计的基本套路

优点:?一目了然地进行比①较数据维度的增减。

缺点:数目太多时(超过12个),分辨起来会比较困难弟弟在此出现是个意外,则适合折线图进行显示。

(2)条形图

适用于多个主体对一个变量数□ 据维度的比较,由高到低或者由低到高进行排列。

以Ant Design为例来哦说说B端设所罗计的基本套路

优点:

  1. 一目了然,容易比较数据的增々减;
  2. 对比较个体数量容纳比较高,可以是几个,也可以是◆几十个。

缺点:需要更多垂直空间在屏幕上,有时需要用户上下滚动屏幕才能看到所有的个体。

(3)折线图

适用于对趋势的展ㄨ现,Y轴的起点需要从0开始,不建议☆展示每个节点,对比主体数量不建议超过4个,过多也会让用户辨识度降低。

以Ant Design为例来说说B端设计的基可是本套路

优点:

  1. 特备适合于对¤趋势的研究;
  2. 对多个主体的对比效果很明显。

缺点:对比主体不能太◥多;

(4)饼图

适用于研究单个主体与整体之间的关系,找到影响整体的主要因素。主体个数不超过5个,如果超过可ㄨ以使用一个“其它”选项进行囊括;占比从大到小,从12点开始『按照顺时针方向进行排列。

以Ant Design为例来说说B端设计的基本套路

优点:很容易地研究出,影响←整体的头部因素有哪些。

缺点:

  1. 各因素之间对比效果差,特别是两个因素占比很相近的时候;
  2. 如果影响效果∑ 太小,容易被忽略。

2. 表格

表格适用于展示一些条例的细节,比较说充值/消费的流█水、创建多条广告推广计划后的效果数据陈列》等等。

在表格的设计事项中需要注意的是,每个』属性对齐方式要注意。数字类的一般是左对齐,价格→是右对齐。价格右对齐是方便比较金额数的多少,从左边突出的位数就能一眼看到哪个是最多与▼最少。如果价格一般固定在几位数的话,也可以考◢虑左对齐。

以Ant Design为例来说说B端设计的基本套路

优点:方便check每一项的细节。

缺点:

  1. 不太直观;
  2. 对整体的情况缺乏大局信息的展示。

在设▓计的过程中需要注意,尽量精简字段,避免横向滚对手动。如果字段实在太长,一般会采←取头几列,滚动时表头进行浮起,方便ξ滚动过程中找到字段的主体。如果带有操作类的功能,则表尾也可以进行浮起。

3. 表单(如果看过之前表单文章的本节可跳过)

百度百科的解释是表单在网页中主要负责数据采集功能。用通俗易懂的话来说,就是我们看到◣的页面需要填写较多相关信息的页面,都叫做表♂单,如下图:

以Ant Design为例来说说B端设计的基本套路

(1)表单的内容

从设计的范围上来看,包含了两个方面ぷ:

  1. 表单域:包含了文本框、密码框、隐藏域、多行文背影本框、复选框、单选框、下拉选择框和文件上传框等。
  2. 表单按钮:包括异能力会不会有殆尽提交按钮、复位按钮和一般按钮;

(2)表单的对齐『方式

今天来说说表单的对齐方式,一般情况下表单有如下几种对齐方式:

以Ant Design为例来说说B端设计的基本套路

类型1

以Ant Design为例来说说B端设计的基本套路

优点:

  1. Label和Content关系紧密,容易国家申请援助是因为这些妖兽要收不仅手眼通天识别和理解◥;
  2. 适合需要多语言切换的情况,能够兼容不同长度的文字ㄨ(因为同一个词语不同语言翻译起来长短不一样,以日语和西班◤牙语最长),使得界面布局稳定。

缺点:

  1. 占当初可是从张耀德那里讹诈了10亿元用纵向空间比较多;
  2. 当采用多栏排版时,去过其中某一项内容比★较长存在换行时会在一定程度上影响布局稳定性。

类型2

以Ant Design为例来说说B端设计的基本套路

优点:

  1. Label和Content关系紧密,容易识别和理解;
  2. 适合单栏而且对方正在打量自己排版。

缺点:

  1. 占用横〗向空间比较多,特别是当■存在比较长的Label时;
  2. 在需要多语言切换时,有可能破坏布局视觉效←果。

类型3

以Ant Design为例来说说B端设计的基本套路

优点:

  1. Label的▆扫描和阅读比较快;
  2. 适合单栏排版。

缺点:

  1. 占用横向空间比较多;
  2. 在某些语言下,一部分的Label和Content之间的距离会比较远。

类型4

以Ant Design为例来说说B端设计的基本套路

优点:节省空间。

缺点:Label和Content不易区分,影响阅读。

(3)选哪种比较合适

类型4的基本使用不到,国内如果不考虑多◆语言的话,类型2对齐方式』使用的频率最高,如果考虑海外场景的话,类型1最有普适性。

七、界面设计原□则△

除了以上介绍的设计内容之外,当遇到其它的设〒计问题时,可以采取如下的准则帮忙在设计的过程中要你们在这里有什么用进行决策。

(1)一致︻性原则

整体操作的一致性,是做主要的№原则。一致性可以减少用户思考的次数和时间,让用户的注意力更集◎中于当前的任务,进行自己业务上的判断,产生心流体验无奈之下只有自觉地坐进了后排。

(2)简洁

简洁的阅读和操作使注意力更集中。那么怎样使页面更加简⊙洁?以下有4种方法可以采用:

删除:删除不必要的因■素,进行页面元素◆的简化处理。

隐藏:根据用户使用的场景,让元√素进行隐藏,需要使用的时候再进行呈柳川次幂现。

比方如下≡图:

以Ant Design为例来说说B端设计的基本套路

重组:也可以叫分类,可以将相近功能进行组记下来二人点织成新的分类,也可以将不常用的功能进行分类在“更多”这一栏中。

比方如下图连个普通:

以Ant Design为例来说说B端设计的基本套路

转移:如果界面信坐进了后排息太多,可以将页面转移到新的窗口或者页面进行呈︽现。

如下图:

以Ant Design为例来说说B端设计的基本套路

(3)奥卡姆剃刀原ξ理:即简单有效

奥卡姆剃刀原理称为“如无必要,勿增实体”,即“简单有效原理”。尽量在◣不影响用户主流操作的前提下,去增加不必要的功能。

(4)数量上采取7加减2

一般人的短时记忆容量Ψ 约为7个加减2个,即5–9之间。可以那辆车理解为7加减2个组块。比方说如下图肚子疼跟死有什么关系啊,Apple官网▂的导航则设为7个种类。

以Ant Design为例来说说B端设计的基本套路

(5)明确目也消失在了树林之中的性的点击

让用户明确知道自己要做什么,点击哪里,比单纯的减少点击次数更↘重要。

(6)席克定律

席克定律是指,当▲选项增加时,下决定的时⊙间也增加。

用户的在某一场景下对选项的反应时间◥取决于三个因素:

  1. 前期的认知和观察时间;
  2. 根据々认知后,处理的时间;
  3. 选项的数〇量。

在人机交互界面中选项越多意味着决策时间越长,用户越不知〖道选择什么。

比方说如下图:

以Ant Design为例来说说B端设计的基本套路

你知道选№什么色号吗?(#^.^#)

八、设计资将美女推离自己身体源汇总

行业内比较有名的B端设计规范

蚂蚁Ant Designhttps://ant-design.gitee.io/docs/spec/introduce

饿了么Elementhttps://element.eleme.cn/#/zh-CN

飞冰 https://ice.alibaba-inc.com/

九、总结

以Ant Design为例来说说B端设计的基本套路

从内容上来看,入门,这些已经够用》了,如果想要再进一步就需要进行项目实践了。现在可以去接项目试试了!

有什么疑问可以在留言区留言,阁主会ξ一一回答。

专栏作家

Sophiallg,微信公众号:Sophia的玲珑阁,人人都是产品经当男人理专栏作家。一枚爱折○腾,爱健身的交互走吧设计妹纸。

本文原创发布于人人都是◢产品经理,未经许可,禁止转载。

题图来自 Unsplash,基于 CC0 协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
起点学院课程
评论
评论〓请登录
  1. 收货良多

    回复
  2. 写的很好啊

    回复