APP推广合作
联系“鸟哥笔记小乔”
以Ant Design为例来说说B端设计的基本套路
2020-03-22 21:30:41
是不是觉得C端设计已经渐渐趋于成熟,上车慢了?没关系,现在下手B端设计也来得及的。

嗯,重要的是不知道怎么下手,怎么办?你倒是说啊!要套路(*^▽^*)

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

一、整体的框架图


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


二、主导航

主导航,典型的,有横向导航纵向导航之分,这个之前阁主有详细的文章分析过,有兴趣的同学可以点击查看这里《B端设计之导航》


| 横向导航

优点:
1. 通常使用比较少的菜单,简单,容易记忆;
2. 位于页面顶部,不占用横向空间;
3. 由于位于顶部,在视觉上更突出,更容易识别;
4. 菜单选项之间视觉权重的区分更明显,左边最强右边最弱;
缺点:
1. 扩展性有限,不能很好的承载大量和多层级菜单;
2. 占用屏幕高度,特备是当固定于屏幕顶部时;
3. 来回切换菜单选项时,横向移动鼠标的距离更长,操作效率更低;


| 纵向导航:

优点:
1. 能够承载的菜单项数量和层级更多,扩展性强;
2. 不占用屏幕高度且可以收起,为内容提供更多空间;
3. 在菜单间切换时鼠标移动距离短;
4. 能够更好地适应屏幕宽度较小的设备;
缺点:
1. 菜单数量多层级复杂时,不容易记忆;
2. 菜单选项文字不宜过长,可能会截断;
3. 各菜单选项之间的视觉权重差别不明显。


三、状态栏

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


四、标题栏

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


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

五、头部区域

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


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

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



六、内容区域

内容区域主要以报表、表格、表单三种形式呈现。

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


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


| 柱状图

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


优点:
1. 一目了然地进行比较数据维度的增减;
缺点:
1. 数目太多时(超过12个),分辨起来会比较困难,则适合折线图进行显示;

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


优点:
1. 一目了然,容易比较数据的增减;
2. 对比较个体数量容纳比较高,可以是几个,也可以是几十个;
缺点:
1. 需要更多垂直空间在屏幕上,有时需要用户上下滚动屏幕才能看到所有的个体;

| 折线图

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


优点:
1. 特备适合于对趋势的研究;
2. 对多个主体的对比效果很明显;
缺点:
1. 对比主体不能太多;

| 饼图

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


优点:
1. 很容易地研究出,影响整体的头部因素有哪些;
缺点:
1. 各因素之间对比效果差,特别是两个因素占比很相近的时候;
2. 如果影响效果太小,容易被忽略;

2. 表格

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

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


优点:
1. 方便check每一项的细节;
缺点:
1. 不太直观
2. 对整体的情况缺乏大局信息的展示;

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

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

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


| 表单的内容

从设计的范围上来看,包含了两个方面:
1. 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
2. 表单按钮:包括提交按钮、复位按钮和一般按钮;

| 表单的对齐方式

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


类型1


优点:
1. Label和Content关系紧密,容易识别和理解;
2. 适合需要多语言切换的情况,能够兼容不同长度的文字(因为同一个词语不同语言翻译起来长短不一样,以日语和西班牙语最长),使得界面布局稳定;
缺点:
1. 占用纵向空间比较多;
2. 当采用多栏排版时,去过其中某一项内容比较长存在换行时会在一定程度上影响布局稳定性。

类型2


优点:
1. Label和Content关系紧密,容易识别和理解;
2. 适合单栏排版; 
缺点:
1. 占用横向空间比较多,特别是当存在比较长的Label时;
2. 在需要多语言切换时,有可能破坏布局视觉效果;

类型3


优点:
1.Label的扫描和阅读比较快;
2.适合单栏排版;
缺点:
1.占用横向空间比较多;
2.在某些语言下,一部分的Label和Content之间的距离会比较远;

类型4


优点:
节省空间;
缺点:
Label和Content不易区分,影响阅读;

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


七、界面设计原则

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

1. 一致性原则

整体操作的一致性,是做主要的原则。一致性可以减少用户思考的次数和时间,让用户的注意力更集中于当前的任务,进行自己业务上的判断,产生心流体验。

2. 简洁

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

删除
删除不必要的因素,进行页面元素的简化处理;

隐藏
根据用户使用的场景,让元素进行隐藏,需要使用的时候再进行呈现;比方如下图


重组
也可以叫分类,可以将相近功能进行组织成新的分类,也可以将不常用的功能进行分类在“更多”这一栏中,比方如下图;


转移
如果界面信息太多,可以将页面转移到新的窗口或者页面进行呈现,如下图;


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

4. 数量上采取7加减2
一般人的短时记忆容量约为7个加减2个,即5--9之间。可以理解为7加减2个组块。比方说如下图,Apple官网的导航则设为7个种类。


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

6. 席克定律
席克定律是指,当选项增加时,下决定的时间也增加。
用户的在某一场景下对选项的反应时间取决于三个因素:
a.前期的认知和观察时间
b.根据认知后,处理的时间
c.选项的数量
在人机交互界面中选项越多意味着决策时间越长,用户越不知道选择什么。
比方说如下图

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



八、设计资源汇总

行业内比较有名的B端设计规范
蚂蚁Ant Design  https://ant-design.gitee.io/docs/spec/introduce
饿了么Element  https://element.eleme.cn/#/zh-CN
飞冰  https://ice.alibaba-inc.com/

九、总结


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


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



- END -
点击右下角「 在看 」与转发
是对Sophia最大的肯定 

今日互动礼物↓↓↓
神秘礼物一份,就当玩盲盒吧~坐等惊喜
阁主会在留言区+点「在看」的小伙伴中抽取1位小伙伴,包邮送出小礼物至府上(获奖名单将在下一篇原创文章的留言区进行公布)

往期精彩文章
《交互设计知识体系》
《关于交互设计的思维抽象》
《好的交互文档其特点》
《在家办公是要写日报的》
《3步设计思维助力职业成长》

有专业交流需求的,扫以下二维码或者加微信号simuyu217可添加小助理,小助理会将大家拉到拉到粉丝2群,群里很干净无广告,打广告的直接会被T出去。






Sophia的玲珑阁,大厂体验设计师,人人都是产品经理专栏作家、简书互联网优秀作者,分享实用的互联网设计技巧和职场经验。


运营那些事儿
分享到朋友圈
收藏
收藏
评分

综合评分:

我的评分
Xinstall 15天会员特权
Xinstall是专业的数据分析服务商,帮企业追踪渠道安装来源、裂变拉新统计、广告流量指导等,广泛应用于广告效果统计、APP地推与CPS/CPA归属统计等方面。
20羽毛
立即兑换
一书一课30天会员体验卡
领30天VIP会员,110+门职场大课,250+本精读好书免费学!助你提升职场力!
20羽毛
立即兑换
顺丰同城急送全国通用20元优惠券
顺丰同城急送是顺丰推出的平均1小时送全城的即时快送服务,专业安全,准时送达!
30羽毛
立即兑换
运营那些事儿
运营那些事儿
发表文章43456
确认要消耗 羽毛购买
以Ant Design为例来说说B端设计的基本套路吗?
考虑一下
很遗憾,羽毛不足
我知道了

我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求,为完善跟帖评论自律管理,为了保护用户创造的内容、维护开放、真实、专业的平台氛围,我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容,同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。


一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规,对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息,主要表现为:
    1)反对宪法所确定的基本原则;
    2)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一,损害国家荣誉和利益;
    3)侮辱、滥用英烈形象,歪曲、丑化、亵渎、否定英雄烈士事迹和精神,以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉;
    4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动;
    5)煽动民族仇恨、民族歧视,破坏民族团结;
    6)破坏国家宗教政策,宣扬邪教和封建迷信;
    7)散布谣言,扰乱社会秩序,破坏社会稳定;
    8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪;
    9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序;
    10)侮辱或者诽谤他人,侵害他人名誉、隐私和其他合法权益;
    11)通过网络以文字、图片、音视频等形式,对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的;
    12)危害未成年人身心健康的;
    13)含有法律、行政法规禁止的其他内容;


2. 不友善:不尊重用户及其所贡献内容的信息或行为。主要表现为:
    1)轻蔑:贬低、轻视他人及其劳动成果;
    2)诽谤:捏造、散布虚假事实,损害他人名誉;
    3)嘲讽:以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述,以此来激怒他人;
    4)挑衅:以不友好的方式激怒他人,意图使对方对自己的言论作出回应,蓄意制造事端;
    5)羞辱:贬低他人的能力、行为、生理或身份特征,让对方难堪;
    6)谩骂:以不文明的语言对他人进行负面评价;
    7)歧视:煽动人群歧视、地域歧视等,针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击;
    8)威胁:许诺以不良的后果来迫使他人服从自己的意志;


3. 发布垃圾广告信息:以推广曝光为目的,发布影响用户体验、扰乱本网站秩序的内容,或进行相关行为。主要表现为:
    1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式:
    2)单个帐号多次发布包含垃圾广告的内容;
    3)多个广告帐号互相配合发布、传播包含垃圾广告的内容;
    4)多次发布包含欺骗性外链的内容,如未注明的淘宝客链接、跳转网站等,诱骗用户点击链接
    5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光;
    6)购买或出售帐号之间虚假地互动,发布干扰网站秩序的推广内容及相关交易。
    7)发布包含欺骗性的恶意营销内容,如通过伪造经历、冒充他人等方式进行恶意营销;
    8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。


4. 色情低俗信息,主要表现为:
    1)包含自己或他人性经验的细节描述或露骨的感受描述;
    2)涉及色情段子、两性笑话的低俗内容;
    3)配图、头图中包含庸俗或挑逗性图片的内容;
    4)带有性暗示、性挑逗等易使人产生性联想;
    5)展现血腥、惊悚、残忍等致人身心不适;
    6)炒作绯闻、丑闻、劣迹等;
    7)宣扬低俗、庸俗、媚俗内容。


5. 不实信息,主要表现为:
    1)可能存在事实性错误或者造谣等内容;
    2)存在事实夸大、伪造虚假经历等误导他人的内容;
    3)伪造身份、冒充他人,通过头像、用户名等个人信息暗示自己具有特定身份,或与特定机构或个人存在关联。


6. 传播封建迷信,主要表现为:
    1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病;
    2)求推荐算命看相大师;
    3)针对具体风水等问题进行求助或咨询;
    4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失,包括通过占卜方法问婚姻、前程、运势,东西宠物丢了能不能找回、取名改名等;


7. 文章标题党,主要表现为:
    1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户;
    2)内容与标题之间存在严重不实或者原意扭曲;
    3)使用夸张标题,内容与标题严重不符的。


8.「饭圈」乱象行为,主要表现为:
    1)诱导未成年人应援集资、高额消费、投票打榜
    2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
    3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
    4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
    5)通过「蹭热点」、制造话题等形式干扰舆论,影响传播秩序


9. 其他危害行为或内容,主要表现为:
    1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的;
    2)不当评述自然灾害、重大事故等灾难的;
    3)美化、粉饰侵略战争行为的;
    4)法律、行政法规禁止,或可能对网络生态造成不良影响的其他内容。


二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时,本网站将依据相关用户违规情节严重程度,对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号,或者滥用多个帐号发布违规内容时,本网站将加重处罚。


三、申诉
随着平台管理经验的不断丰富,本网站出于维护本网站氛围和秩序的目的,将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议,可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)

我知道了
恭喜你~答对了
+5羽毛
下一次认真读哦
成功推荐给其他人
+ 10羽毛
评论成功且进入审核!审核通过后,您将获得10羽毛的奖励。分享本文章给好友阅读最高再得15羽毛~
(羽毛可至 "羽毛精选" 兑换礼品)
好友微信扫一扫
复制链接