首页

经验分享丨B端设计师价值体现那些事!

鹤鹤

提到B端设计你是否经常听到这样的声音:

  • B端不需要怎么设计,直接对着低保真出图就可以了;
  • 不要花时间在这些细枝末节上,参照Ant Design上的规范,在我的需求文档的基础上快速出图;
  • 不知道怎么跟需求团队沟通,感觉他们的设计思维太Low,聊不到一起;
  • 产品的图片设计好看才是设计师的价值,功能体验这些与设计师无关;
  • ……

刚转B端那段时间,我相信每一个设计师都曾有过这样的困惑。

设计师在实际工作的时候经常会遇到自己的设计方案与业务需求高度融合,由于B端的行业属性,缺乏完善的数据验证,常常到了最后也区分不了设计师真正的能力体现在何处,这就导致团队成员对设计师的价值认识不够全面。

那么我们B端设计的价值又该如何体现?今天本文将从4个方面进行阐述,一起来看一下吧~

01 设计价值是什么

B端设计师追求工作中如何体现价值的时候,我们得先明白B端的设计价值是什么。

那么何为B端的设计价值呢?

百度百科中设计价值的含义是:把一种计划、规划、设想通过视觉的形式传达出来的活动过程。今天本文中的B端设计价值分为视觉设计、交互体验以及业务流程优化,通过信息传达的改变,帮助客户降本增效的方式获取收益。

如果将B端整个生命流程进行剖析,我们会更好的理解其设计价值。

1.1 视觉设计吸引客户

B端产品与C端产品不同,它需要市场销售人员利用自身的能力以及资源向目标企业进行销售或者在一些大型展会上对外演示,据有关资料表明人所感知的信息的80%的信息来自视觉,这就需要对产品的功能进行视觉化展示。

因为竞争激烈,经常需要在众多竞争者中进行厮杀。在技术水平趋同的情况下,视觉起到了非常大的作用。特别是在展会期间,假如两家公司技术水平相当,演示的视觉完全碾压对手,让客户有着良好的品牌印象,这将产生快速的口碑影响,而这些将影响用户的最终决定。

1.2 交互体验留住客户

这一步需要我们理念进行升华,将视觉视角切换至体验视角。

企业是我们B端设计的重要客户,它是一个具有不同成员角色的群体组织。该组织为了工作管理的效率,会有不同的权限体系。权限的不同关注的信息也有所不同,这需要我们在设计中依据权限,考虑不同信息呈现优先级。

功能繁琐是很多同学对B端的第一印象。因其有着不同角色的参与,每个角色因为岗位职责的不同,所参与公司的业务流程存在差异,这意味着需要将不同的功能在遵循产品体验一致性的基础上汇聚在一起。

1.3 业务价值赋能客户

业务价值对于B端设计特别重要,这是企业决定购买B端产品的出发点。我们在说业务设计的时候,需围绕企业“降本增效”理念,让用户觉得有用,完成企业的管理需求。

举个例子,比如我们做了一款报销系统产品,帮助用户解决财务报销过程复杂、冗长的问题。通过前期参与用户调研,洞察业务,挖掘需求的突破点,找到当前背景下最优的业务流程解决方案。企业员工使用我们的产品后少填写信息,更快速的拿到了报销费用,平均比传统流程节省了20分钟。假设企业员工平均时薪60元,那么这个100人的企业每周可以节省1.6万的人力支出,而一年可以节省76.8万左右的支出。

02 如何体现设计价值

在了解了设计价值的体现后,我们知道B端设计的落脚点在业务价值的赋能上。当我们实实在在的解决了业务问题,而不是产品外层视觉与交互的表层需求,才能让我们的设计价值最大化,让设计得到团队其他成员的认可。接下来结合工作经验阐述下设计师可以赋能业务的点。

2.1 主动养成系统思维

很多B端设计师都是被动的接到产品经理的低保真,然后根据低保真的需求直接输出设计稿,妥妥的沦为一个画图的美工,这会使得自己在团队内部被定义为一个工具人。

那我们的发力点该是什么?借用Jesse James Garrett的理论用户体验五要素这个专业名称(表现层、框架层、结构层、范围层、战略层)。单纯的视觉设计虽然容易感知,但它却属于五要素的最顶层,价值有限,无法准确传达最底层战略层的含义,我们需要往下突破才能凸显我们的价值。

当我们在收到需求的时候,需要具备系统化思维,从底层战略开始,首先了解业务需求背后的价值,同产品经理对其业务目标后,帮助他梳理业务需求,结合用户目标以及当前的技术能力等多方因素系统性思考最优的设计解决方案。

只有发挥了我们的主观能动性,改变单点视角,具备系统化思考的能力,才能更好出结果,体现我们的价值。

2.2 更专业的组件规范

功能复杂繁琐的B端为了最大化的保证设计的一致性、提升开发的效率以及方便产品的迭代优化,组件规范是我们产品必不可少的工具。

那目前市面上的组件规范这么完善,对于我们设计师而言自身的价值是否无法体现了呢?其实它存在2个问题:

1、业务属性不符。虽然市面上存在众多的第三方组件,但由于设计的出发点不同(公司不同影响的业务属性不同),导致市面上的组件不一定与自家产品属性贴合,需要我们结合产品愿景以及业务规划进行重新设计;

2、业务特性不贴合。我们见到的很多组件只能归于基础组件,可以保证基础的设计一致性,但由于业务领域的独特性,在一些专业的场景中有着强烈的业务属性,需要我们对一些基础组件进行组合,进行更专业的沉淀,这样在实际使用的时候会更加高效。例如高级筛选、不同的场景弹框等。

2.3 赋能业务提升价值

不管B端还是C端的设计目的都是为了解决业务问题(业务目标的达成也是KPI考核的重要目标),我们始终要以业务目标作为我们的关键目标。

我们设计师需要参与整个行业生态的搭建,做到体验结构展示清晰,核心信息简洁明了,降低用户的操作门槛,通过提高体验效率(缩减时间成本),节省企业的人力成本。

对业务需求的赋能其实就是要求我们进行需求的挖掘,发现更多的业务增长点,提供当前背景下最优的解决方案。需要例如我们可以主动的进行XX调研活动,给出XX解决方案,最后给公司带来了XX业务价值。

2.4 复盘沉淀经验

项目复盘对于我们设计师的能力成长的作用是巨大的。它之所是最快的学习方式,因为它在是实践中的反馈,这种直观的经验沉淀最终会融入自己解决问题的知识体系架构,而这将进一步反辅自己的职业成长。

复盘可以让我们站在第三方角度,重新对项目流程进行全面的回顾与总结。结合不同的反馈,客观的了解当前设计在整个业务目标中的价值,这是对我们设计量化最佳途径。不单单对于个人,团队内部的其他成员也可以通过复盘加深对设计信任感的建立,他们可以看到我们的设计思路,更深层次的了解我们的设计价值。

03 写在最后

设计价值的体现建立在一朝一夕的积累上,如果想在B端设计中体现价值,一定要透过现象看本质,站在业务的角度,寻找真正的发力点,让自己参与业务赋能的同时共同成长。

作者:江鸟的设计生活

转载请注明:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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

关于B端导航的选择

鹤鹤

对B端产品架构而言,一个合理的导航设计对能够解决,对团队内部:堆砌功能开发混乱;对外部用户:找不到功能的问题,所以本篇主要总结一下如何正确选取合适的导航。


从产品结构明确导航分类
B端后台的导航大类从产品架构层面来讲可以分为:全局导航(顶部、侧边、混合)、局部导航(菜单栏、面包屑、选项卡、步骤条、文字链接)、辅助导航、内嵌导航、友好导航和远程导航。


全局导航
表现为产品的一级导航,需要具有良好的稳定性和拓展性。
提示:清晰稳定的路径比起少点击一次更重要!





局部导航
局部导航包括:菜单栏、面包屑、选项卡、步骤条、文字链接。
特点:1、在同一个架构中,可以到这个节点的上下一级的通路;
2、有严格的父子级关系,局部导航与全局导航有层级关系,局部导航帮助用户进入更 加特定的页面。
通俗而言局部导航依附于全局导航,常作为二级导航出现。




辅助导航
提供用户在全局/局部导航不可到达的相关内容的快捷途径。






内嵌导航
也叫上下文导航,常用做对页面中的操作项进行解释;常见的有帮助引导链接等






友好导航
为用户提供便利的前进途径,常见于新手引导和帮助助手的场景,在不需要时可进行隐藏。





远程导航
指并不包含在产品结构中的功能入口;常见于网站地图、OA产品的工作台等。






如何进行合适的导航选择

1. 保证产品结构的稳定性

B端产品通常情况下都是复杂的,对用户来说具备一定的使用门槛和学习成本。所以导航首先要保证产品架构的稳定性,同时也要保证交互操作路径符合用户操作习惯。
重点:不可为了追求少一次点击而随便进行更改!





2. 便于后续扩展

在进行导航选择时需要考虑到后续产品的发展情况,在保证产品结构稳定性的前提下,为后续的功能扩展打好基础。






3. 操作清晰、易懂

在多层级的导航中要保证每一层级导航的视觉反馈清晰、明确。




4. 灵活适应

导航的功能选项可以根据使用场景需求来进行灵活添加,可以为了提升效率,在不同的导航选项下出现相同的功能入口。





5. 保持一致的交互规范

相同类型的导航控件,交互样式要保持一致;例如:飞书在面包屑的文字交互样式和文字链接的交互样式就做出了明显的区分。





6. 可不遵循层级关系

根据导航的定义而言,导航就是对信息进行分类,引导用户完成操作。
我们可以根据用户反馈和数据埋点可以将常用的操作功能进行前置,打破层级约束,实现对用户的操作提效。




根据场景,灵活使用导航


1. 顶部导航

顶部导航常用于官网类结构相对简单的产品
优点:节省空间、视觉干扰小,有沉浸式使用体验;
缺点:结构简单,拓展性低。





2. 侧边导航

侧边导航常用于操作比较复杂,专注操作的后台类产品;例如:SaaS产品等
优点:操作效率高、拓展性强、更容易进行功能收纳;





3. 混合导航

混合导航常用于操作很复杂,一级二级功能条目多的后台产品;例如:云产品(二级导航功能超多)
优点:比较综合





总结:


1. 一级导航需要具备足够的稳定性和拓展性

①、清晰、稳定的路径比少点击一次更重要
②、导航的排序尽量不要改变用户的操作习惯


2. 二、三级导航进行合理的分组收纳

利用分组控制导航的颗粒度。在二级导航只有一个时,无需设计分组


3. 判断功能是否应该作为全局导航

①、选择相对高频的分类,作为全局导航
②、低频的分类,作为局部导航

作者:戴戴戴戴戴虎全

转载请注明:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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

工作经验|使用组件做B端产品,设计师的工作价值还有哪些?

seo达人


一、组件的核心功能是什么

我们先来看看组件的核心功能是什么。组件的作用有很多,其中有两点最为突出:

 

1、降本提效

组件的初衷不是为了替代设计师。组件的本质是一种降本提效的工具。在工作内容上,可以将不必要的、重复性劳动的时间节省出来;在工作流程上,便于设计师与开发做交接和协作,减少沟通成本。

 

2、质量保障

不论是设计还是开发,使用组件后都可以在一定程度上保证工作质量。组件规范了前端和设计师的工作方法,建立了底层的合作机制,设定了设计和开发的质量底线。基于组件完成的产品通常具备:

  • 一致性:相对一致的表现样式,设计风格和交互体验上都可保持统一;
  • 可用性:对于用户来说具备最基本可操作性和可识别性;
  • 标准化:符合基本审美标准,虽不会很亮眼,但也不会很难看。

 

但对于一款好产品来说,仅达到基础合格线是远远不够的。组件能替代的仅仅是大部分重复性的页面。面对变化多样的业务需求,设计师还是需要做很多非基础性、非重复性的设计工作。

我们也要建立起一个重要的认知,那就是:

做组件不是设计目标,

而是一种为业务赋能的手段和方法。

能够为业务带来正向影响、助力业务发展的组件才是有效的。

 

二、设计师的工作重心有哪些

设计工作很注重专业与实践相结合,大多数情况下,能为业务赋能的设计行为,才能体现设计价值。在此过程中设计师的工作内容和重心可以分为以下几点(每一点我们也都在之前的文章中有过详细介绍,推荐你阅读完本文再做查看):

 

1、深挖业务诉求,优化体验

一款好的产品,质量不会仅停留在合格线。设计师可以把更多的时间和精力放到更有价值的工作上去,关注业务目标和用户需求,对业务逻辑做深度理解和剖析。不仅仅是在界面细节的表现手法上下功夫,还要用系统性思维为整个产品做全方位的体验优化。

* 我们曾在  完成设计需求的三个层次! 一文中为大家介绍过承接产品需求的几种方式,读完本文之后欢迎继续阅读。

 

2、提升组件专业性,赋能业务

很多业务领域有其独特性,比如金融类组件和政务类的产品页面列表内容就有很大区别。这就使得单一的组件在应用的过程中可以被再次组合、拼装和沉淀。

针对不同的业务领域,将高频使用的组件结合业务特性,进行更为专业的沉淀也很重要。这类组件使用起来也会更加得心应手、加倍提效。

* 我们曾在  基础组件与高级组件的区别  一文中,为大家介绍过两者的定义和使用场景,在公众号后台回复 “列表”  ,也可以看到更加完整的内容分享,读完本文之后欢迎继续阅读。

 

3、提升组件易用性,规范使用

组件并不是一劳永逸的设计工具,它需要紧跟业务的步伐迭代更新。只有当组件的质量达标,具备了一定的稳定性和易用性,才能被设计师和开发高效、高质地使用,更好地支持业务需求。

因此,除了建立组件的设计规范,组件如何被更新、怎样被同步给相关方、怎样才能被正确地使用,也是影响产品最终质量的关键因素。

* 我们曾在  组件的规范怎样才能更好用? 一文中为大家介绍过一些提升组件易用性的经验,读完本文之后欢迎继续阅读。

 

4、优化检验流程,排查问题

这里所说的「检验」包括两方面工作内容:

一是对于研发质量的检验;

二是对于产品体验的监测。

 

先来看看对于研发质量的检验,我们可以分为两部分内容:

1)设计还原度走查:即对于开发完成设计稿后的质量检查;

2)组件应用质量走查:即排查组件的使用问题,判断设计和开发的使用方式是否正确。

对于这两类走查,发现问题时不仅要及时纠正,还要思考问题产生的原因,从根本上解决和杜绝类似问题。

* 我们曾在  开发的设计还原度低该怎么办? 一文中为大家介绍过一些提升设计走查效率的经验,读完本文之后欢迎继续阅读。

 

再来看看对于产品体验的监测。其实很多大厂都提出过关于检测产品体验和设计质量的方法及模型,我们熟知的有 Google 的 HEART 模型和 GSM 模型、蚂蚁集团的 PTECH 模型和「两章一分」模型等等。

因为产品的评估方式本就是多维度的,不同的产品又有不同的评价标准,所以大家各自沉淀、百花齐放。不过参考和使用这些方法的原则只有一条:适合自己需求的工具,才是好用的。

* 在公众号后台回复 “体验”  ,可以看到更加完整、多维度的产品质量和用户体验检测内容。

 

设计自身的价值是全链路的、端到端的、内循环的。设计师不光用手,更应该用心和脑去思考和解决问题。可以说,组件就是帮助设计师解放双手的不二法门

设计师的思维和方法不一定会决定产品的生死,但足以帮助产品实现质量和体验的升级。也正因如此,产品才能在市场竞争中走得更为长远。

 


作者:元尧

转载请注明:学UI网》工作经验|使用组件做B端产品,设计师的工作价值还有哪些?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



B端设计经验总结-帮助新人快速上手

seo达人


本篇文章总结了交互新人在初工作过程中可能面临的疑惑与问题,并结合自身经历总结了相关设计经验,希望能够帮助新人设计师快速上手B端设计,游刃有余的应对工作中面临的各种机遇与挑战。首先,作为一名新人,在刚入职做设计时可能遇到哪些问题呢?看看以下问题,或许你会感觉很熟悉:
  • 需求文档不规范怎么办?
  • 承担了很多与产品相关的工作,是好还是不好?
  • 需求量大,如何推动需求排期合理化?
  • 经常插入或变更需求怎么办?
  • 如何更有效的解决问题?
  • 需求是否有价值?
  • 如何做好体验优化?
  • 怎样做好设计,并提升设计的说服力?
  • 应该具备怎么样的知识才能更好的应对日常需求?
  • 我应该掌握哪些专业知识与能力?

上述问题看起来比较杂乱,但是通过一定的分类整理,可以概括为两个方面,即:「专业能力」与「职业能力」。

图片

图1 专业能力与职业能力

专业能力:

与设计直接相关的能力,是完成设计工作不可或缺的组成部分,比如 需求挖掘、需求分析、方案设计、用户研究等内容。

职业能力:

岗位要求需具备的一些能力,可以帮助设计师更好地处理工作过程中遇到的问题,比如沟通能力、规划能力、驱动能力、执行能力等,可概括为“发现问题-解决问题”的效率与能力。

随着设计师项目经验和工作经验的增加,其所具备的专业能力和职业能力也会不同程度的成长与提升。下面会首先对新人设计师所应具备的专业能力进行总结和说明;其次对与职业能力常见的问题进行一定的解答与建议,希望能够帮助到各位设计师同学。

 

一、专业能力

设计师首先要明确设计工作的主要内容,从需求分析、用户分析到将抽象的需求转化为具象的设计方案输出,再到跟进设计方案上线;通过定性定量的方式跟进用户反馈,持续推动用户体验优化及挖掘更多用户场景和诉求均是设计师日常工作过程中的核心工作内容,接下来我们初步分析:

图片

图2 设计师主要工作内容

 

1、需求分析与用户分析

当设计师拿到需求后,切记要多去追问为什么。因为产品经理给到设计师的需求更多情况下是具体的功能,而对于为什么要做该功能是需要设计师去深入洞察和挖掘的。此阶段,设计师要明确「业务目标」「业务指标」「设计目标」和「设计指标」的概念,参照下图所示。

图片

图3 需求分析与用户分析

以“某客服平台改版”的需求为例进行简略介绍,其业务目标是:解决客服人员工作过程中遇到的痛点,提升客服使用体验,同时期望缩减客服人力成本投入,并明确具体的业务指标。设计侧接手项目后,通过 用户观察、用户访谈等用户研究手段,了解平台痛点,并从「业务层面」和「设计层面」总结归纳。

图片

图4 客服系统分析

对于业务层面的突出问题,通过与产品多次沟通形成相应的产品策略,并落实到具体方案中。而对于设计层面的问题,为了更系统准确的了解客服人员的痛点,设计侧又进行了二次调研。首先整理访谈提纲对客服人员进行访谈;其次整理了问卷提纲,通过发放问卷进一步验证调研结论的准确性,并全面收集客服人员的建议。并且沉淀各角色人员的用户画像,了解各角色人员的主要工作事项、关注点及痛点。调研发现,客服人员的主要工作内容聚焦在以下事项,并且客服人员对系统的整体满意度较低。

图片

图5 用户分析-客服主要工作内容

结合业务目标及对业务和用户的分析,设计侧将“提升用户核心工作流程的工作效率及平台整体的用户满意度”作为设计目标。由此设计的重点也放在核心操作路径优化和整体体验提升上面。通过对调研结果进行系统梳理,整理出高优先级优化内容,并推动埋点功能上线。最终,设计侧拿到核心操作路径优化前后的数据对比,达成设计目标。

建议各位设计师拿到需求后不要急于产出设计方案,多去进行需求分析与用户分析,它可以帮助设计师更深入的理解业务,挖掘业务本身的问题,了解用户的使用场景、关注点、痛点、期望与建议,为后续开展方案设计提供设计依据。在设计评审时呈现自己的思考与分析内容,也会大大提升设计方案的说服力。

 

2、需求转化为设计

关于设计目标的重要性在上述部分已有讲解,因此本部分重点讲解「设计系统」与「设计原则」。在日常工作中,除了上述提到的平台改版等较为复杂的需求,绝大部分情况是产品经理梳理清楚具体的需求或功能点,经需求评审后将其给到设计师,由设计师在敏捷迭代有限的时间内快速产出最优的设计方案。而对设计系统的充分了解和应用是B端设计过程中不可缺少且非常重要的一部分。

设计系统的构成

《Design System》一书中对设计系统的构成进行了详细的解读,笔者将其中与工作关联性最强的部分进行了整理,并且结合工作经验简要谈谈自己的理解。

图片

图6 设计系统的构成

  • 设计原则:

设计过程中需要遵循的指导原则与依据,有利于保障系统的易用性,提升用户满意度。由于设计原则的重要性,笔者会在下文中进行详细描述。

  • 设计组件:

通常包含基础组件、复杂组件和业务组件。基础组件即原子组件,例如按钮、输入框、下拉框等,可用于构成复杂组件或业务组件。复杂组件通常由基础的原子组件构成,但仍然在多条业务中具有通用性,例如 表单。业务组件通常用在特定业务场景下使用,具备复用性的同时可保证设计统一性。由于各公司通常具备成熟的组件库或使用ant design和iview组件。因此设计师在业务支撑过程中更多是从业务组件入手,本着“标准、统一、复用”的理念,沉淀丰富的业务组件以提升设计统一性、以及设计与开发效率。

  • 设计模式:

同类场景下用户行为的统一模式,从而避免多种设计问题出现,有利于形成统一的用户心智,符合系统设计的一致性原则,例如上传、搜索、批量操作等。需要通过详细的设计规范,对模式的使用场景、解决的问题、遵循的原则以及模式具体如何应用进行详尽细致的说明。某些设计模式可以沉淀为组件来达成模式的统一应用,而对于不方便沉淀为组件的模式,需要整理详细的规范文档,方便设计师查阅与使用。

  • 控件库:

将设计资产(组件、模式、图标、插图等)整理为symbol控件,在axure、sketch等设计软件中可快速使用控件搭建页面,提升设计效率。

  • 视觉样式:

通常包含颜色、布局、字体、图标、动效、插图等,是保持全局样式视觉统一性的重要基础。

  • 设计规范:

对视觉样式、组件、模式等如何应用进行详细的设计说明,包含设计原则、使用场景、使用流程与反馈等,产出通常为设计规范文档,对于新人设计师,一定要熟记、掌握和学会如何应用。

设计原则

关于B端设计原则,设计师对“高效、清晰、可视化”等原则一定不会感到陌生,但是笔者一直在想设计原则的得来是否能够更加有依据。由此上网看了很多文章,也结合自己支持的业务去思考,基于个人经验将设计原则总结概括为三个部分:「设计指导原则」「事实性原则」「可用性原则」 

图片

图7 设计原则

设计指导原则:

B端设计原则的顶层指导原则,是整个平台设计的全局性原则,通常由 业务定位、行业属性、客户标准、用户特征等因素综合得出。

比如公司内部的客服系统和面向房地产行业的设计管理系统,客服系统从业务定位出发是希望客服人员工作更加高效,而客服人员从自身动机出发也期望更加高效的完成目标,以取得不错的绩效。一般在设计时,设计师考虑到信息密度的问题,会将部分信息折叠收起,但是对于客服人员来说,他们更希望将全部信息铺开展示,通过瀑布流的形式他们可以快速检索信息,提升工作效率。而对于房产的设计管理系统,业务定位是提供全链路的解决方案,让客户满意是非常重要的业务目标。

由此,满足客户的标准和使用人员的诉求对于系统设计来说非常重要。客户会基于行业属性的特点提出要求,比如更加注重科技感,用户希望页面更直观,信息密度小等,设计师要综合多种考虑去制定全局的设计指导原则。

  • 事实性原则:

基于业界的定律去设计,为最优设计方案提供更多依据。比如希克定律、菲茨定律等。除此之外,设计师更要懂心理学,了解用户在观察、阅读、记忆等方面的影响因素,并且将其应用在方案设计中。如此,设计方案便有理有据,经得起推敲。

  • 可用性原则:

比如尼尔森十大可用性原则和设计界其他的一些可用性原则,设计师相对来说都比较熟悉,需要结合业务特征进行灵活的运用。

基于设计目标、设计系统、设计原则进行具体的方案设计,会帮助设计师从“完成方案”到“完成最优方案”进阶,同时也有利于:保障设计统一性,提升设计与开发效率;形成统一的用户心智模型,提升用户体验;平衡设计与技术,降低技术开发成本,保障功能按时上线。

 

3、需求挖掘与反馈收集

通常可使用定性、定量的用户研究手段去挖掘用户诉求以及收集用户反馈。定性调研通常包含:用户观察、用户访谈、焦点小组、启发式评估、可用性测试等。定量调研通常包含:问卷调研、数据埋点、后端数据拉取、AB测试等,新人设计师可以选择适合当前业务发展阶段的调研方法。与用户研究相关的资料较多,大家可以自行搜索学习,此处不再赘述。

这里笔者强调一点,即使用“体系化的设计思维”去整理用户反馈的体验问题。通常来说,调研后收集到的用户反馈是相对零散的,即便按功能模块分类整理,并且对优化带来的价值进行描述,业务人员也很难理解优化某一个体验问题带来的价值,从而导致设计师在推动体验优化需求排期时遇到阻力,且由于roi的投入产出比低体验优化被无限延后。此时设计师需要进行体系化的梳理,重点在核心工作人员的核心工作路径优化,预估优化后带来的数据价值,以此去PK其他需求证明体验优化带来的价值。在上线后也需要及时跟进真实的使用数据,拿到量化的数据结果及时同步相关人员。

图片

图8 体系化整理体验问题

二、职业能力

新人设计师需要逐步培养自己“发现问题和推动问题解决”的能力,多交流,多思考,多总结。这里有几个小建议给到大家:

  • 建立规范意识,通过标准化规范化的流程解决问题

在产品的敏捷迭代过程中,产品—设计—研发—测试等各环节必须保持规范化的运行节奏,一旦某环节出现异常,则会影响敏捷迭代的整个流程。比如需求变更的问题,可以在敏捷迭代复盘会上提出,并且跟大家一起分析背后的原因,找到行之有效的解决方案。若是因为客户提出临时加需求,可以考虑需求置换,但是如果是产品经理个人的原因,说明需求优先级排序出现问题,可能需要建立一套标准的优先级评估规范来避免或减少此类问题。

再举个例子,关于“需求量大,如何推动需求排期合理化的问题”。可以先去梳理当前存在的问题,以及带来的影响,同时提出解决方案,跟业务人员一起探索,达成一致后运行解决机制就能解决该问题。

图片

图9 需求排期机制

  • 找准设计边界,学会衡量利弊

作为设计新人,一定要学会明辨职责范围内的事项,找准设计边界。比如产品经理离职了,在短时间内设计师承担了部分产品经理的职责,统筹需求收集,给出设计方案,把控敏捷流程,保证产品迭代正常进行,且符合设计师职业和专业能力范围内时,设计师是可以承接的。但同时我们需要不断跟进业务招聘新人,让专业的人来做专业的事情,避免将个人精力全部花费在与产品相关的事项上面。

日常工作中设计师一定要学会明确边界,切忌将工作重点转移到非设计相关的事项而偏离了设计本身,可以多用系统性的思维去思考和分析利弊,相信此时设计师就会有自己的答案。

  • 学会借力,必要时学会依靠团队

设计师,尤其是新人设计师,在工作中遇到的问题很可能是凭一己之力无法解决的。这时候可以考虑借力,向领导借力,向团队借力,可以说出自己的想法,寻求大家的建议。不仅可以收获到经验,还可以提高解决问题的效率。举个例子,笔者刚刚毕业入职后,要去整理所负责的移动端产品的体验优化,采取了“群策群力”的方式,邀请团队的设计师一起进行体验走查,在2个小时的会议时间完成了整个产品的走查,并且收集到非常多的有效建议,依靠团队的力量达到事半功倍的效果。

 

总结

作为一名“过来人”,回想起自己还是设计新人的时候遇到的问题,踩过的坑…内心很感慨。因此,一直都想写一篇文章,将自己的经验和心得总结下来,希望本篇文章能够帮助设计师少走弯路,快速成长。

最后,借用在《腾讯产品法》一书中看到的一段话送给大家,我想设计也大抵如此。

 

阶段一:以片面、固化的眼光看问题,只看到零散的表象和静止的格局。解决方案呈点状随机分布。

阶段二:以宏观、系统的眼光看问题,能看到产品与产业、产品与其他产品的关系和位置。解决方案开始具有系统性特征。

阶段三:以动态、演进的眼光看问题;能看到时间长河中问题变化的趋势。解决方案能够助推产品顺势成长。

设计者修炼产品设计能力的过程本质上就是一个思考力进阶的过程。

 

参考书籍

《在腾讯产品法》

参考文章

尼尔森的十大可用性原则与场景案例

《Design System》相关文章

《Pin Design》年刊文章

作者:瑶一


转载请注明:学UI网》B端设计经验总结-帮助新人快速上手

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


在UI布局排版中,让界面快速出彩的7个技巧

seo达人

一、优先考虑重要内容

图片

优先考虑重要的内容,在页面中保持重要的信息占比更大、更明显。

为了让用户能够快速看到关键信息,可以通过滚动的交互方式和指导性的按钮设计,帮助用户找到他们想要的信息。

图片

‍▲ 例如《纽约客》网站的布局设计,在中间位置优先展示最重要的资讯,突出重点,网站两侧的资讯展示相对弱化。

 

二、保持合理的视觉层级

图片

页面中清晰的层级结构对用户来说也很重要。通过打造明确的视觉层级结构,页面内容的主次关系会更清晰和合理,方便用户更容易理解页面信息。

 

图片

▲ 在Netflix影片详情页的布局中,保持了清晰的视觉层级关系。跳到详情页后,我们首先会看到页面顶部的预告片和大尺寸的白色高亮播放按钮,然后是关于影片的介绍和其他功能。

 

三、使用非对称布局

图片

对称布局和非对称布局在日常设计中都很常用。对称的布局能够让页面看起来更加统一、整洁,但也导致页面效果缺少对比,效果单调。

非对称的布局刚好可以弥补这个缺点,在保证排版整齐的基础上增加页面的对比关系,让页面看起来更有吸引力。

▲ 例如在这个网站首页中,左图右文的非对称布局设计让整个页面看起来更有对比性和冲击力,快速吸引用户的注意力。

 

四、使用间距

图片

通过间距,能够将页面中不同的版面和内容划分出来,让页面的布局更丰富。

同时,通过调整间距的大小能有效区分内容间的关联程度。例如,同一组信息采用间距小的布局方式,让内容的关联更紧密。

图片

▲ 在Instacart页面中,上下有两种不同的布局方式,通过增加间距,让页面看起来更清晰。

 

五、打破统一的布局

图片

过于统一的布局方式会让页面看起来很单调,无法突出重点。

如果想让页面中的某个内容吸引用户的注意力,可以尝试在打破一致的布局情况下,让页面看起来更有节奏。

图片

▲ 在Airbnb网站中,图1、2和5采用了相同的尺寸,图3和4打破了统一的布局,让页面看起来更有动态感。

 

六、使用网格

图片

网格系统是使用网格作为辅助,进行页面设计的方式。通过使用网格系统,可以更准确地定义页面的布局。

图片

当然,网格不仅能用在页面布局设计中,在其他类型的设计(海报、画册等)中也常用到,是非常值得设计师学习的系统。

 

七、保持对比

图片

在设计页面的布局关系时,要尽可能做到图文搭配,保证既要有文字、按钮等元素,也要有一定量的图片,让页面保持对比性。

图片

▲ 例如这个网站首页中,左右两部分采用了一致的布局方式,以图片作为背景,文字和按钮等元素与背景产生对比,提高页面的冲击力。

 

最后

通过这些实用的布局技巧,希望能够帮助你设计构建出更好的界面布局~ 对界面中内容的划分和信息的掌控带来进一步的提升。

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》在UI布局排版中,让界面快速出彩的7个技巧

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



B端列表页设计总结

鹤鹤

列表页脑图



左侧导航栏

全局导航

1、导航栏可折叠收起菜单。

2、收起时,鼠标悬浮在图标上同时右侧弹出菜单栏,然后触发菜单文字。



顶部导航栏

  • Tab摆放位置(什么时候在上,什么时候在下?)

1、根据tab的层级来确定位置,最高层级在上,不同流程层级在下。

Tab在上:用户明确自己想要查找的目标在哪个tab并且需要一眼看到所有概况(想要查找数据时,直接到对应的tab下查找)。

Tab在下:需要看到查询的结果在各tab下的分布情况。



筛选/搜索区

1、筛选区包括搜索项、查询、清除查询;如果搜索项超过一行时,需要「展开、收起」按钮。

2、折叠展开设计:默认显示一行将使用频率高、覆盖面广的1-3个显示出来其他的隐藏。(用户频繁使用的筛选条件能一眼找到)。

3、按钮固定在最右侧不变,搜索项可进行自适应。

4、筛选条件:

  • 交叉筛选:选择筛选条件后,需点击「查询」按钮才能触发筛选条件。
  • 实时筛选:筛选条件不存在交叉,可以实时筛选。像“流程状态”此类固定选项类,要不要提供“勾选即执行搜索”功能?用户可能还需要综合其他搜索条件一起查询,如果执行搜索可能会打断用户刚才的输入。
  • 时间筛选:根据真实场景来提供快捷选项,比如:昨天、最近7天、最近30天...



全局操作

1、功能性按钮和批量操作(比如新增、导入、导出...)

2、根据使用频率进行排列新增>导入>导出;使用频率高的操作采用高亮显示。

3、如果按钮太多可进行操作项分类。



表格栏

表头

1、在能够概括的情况下,尽量简练、准确,一般可根据上下文关系进行简化,以达到节省表格头部空间和减轻视觉压力的作用,让用户注意力聚焦在数据本身。

2、对于比较复杂的表头,可以跟一个释义标识,鼠标悬停时出现该字段的详细解释。

3、表头筛选、排序功能

  • 表头字段太多怎么办?

提供表头筛选功能,依据用户关注度最高的字段进行排列。

  • 哪些字段需要排序功能?

需结合业务场景具体分析,一般来说,编号、时间、价格字段,提供正序、倒序功能。

  • 默认排序

考虑用户第一次进入列表页的初始化状态,保证用户进入页面时大概率能直接看到自己想要的东西。

表体

包含多选列、数据列、操作列

  • 哪些字段可以前置?

特殊处理操作的按钮、字段优先级、状态可以前置,方便一目了然。

  • 表格字段太长该如何处理?

1、全部展示(缺点:利用滚轴滑动次数太多用户视觉容易疲惫)。

2、较长字段用“…”展示,防止字段重复,对重要字段进行快速区分、对比(优点:每行可显示较多的信息 缺点:想要看全信息,只能鼠标移入字段出现气泡显示完整信息)。

3、换行,保持行高不变,改变文字距单元格的上下间距,最好不要超过3行,多余字段用”…”显示(优点:尽可能显示全部内容 缺点:同2)。

4、字段优先级分类,做折叠展开设计(筛选信息层级较高的字段放在表格栏,次要信息放入二级表格)。

5、数据库中没有该字段,用“-”,数量用“0”后边有小数点、后位数保持上下单位一致。

  • 表格设计如何降噪

1、让用户将注意力放在数据信息上,而不是表格底色、边框

2、不使用斑马线设计、分割线样式轻盈、去掉不必要的装饰和颜色

  • 单行操作项位置如何处理?

基于业务、基于场景

比如用户以处理订单为主,操作项建议放在第一列,方便用户操作。

如果用户以查看信息为主,操作项一般放在最后一列。

  • 如何处理由于用户权限不同或者状态不同这两种原因,使得每行的数据拥有不同的操作项?

可以采用下拉框设计

  • 行高



1、行高=文字行高+上下间距

2、文字行高可以设定为字号的1.2~1.8倍,上下间距可以设定为字号的1~1.5倍;行高影响每行信息的易读性。

3、一般行高为32-56px












  • 列间距、列数、对齐方式

1、采用8px网格作为基础单位,来定义各组件和模块间距,因为目前主流桌面设备屏幕分辨率在垂直和水平方向基本都可以被8整除,使用8px比较普适。






2、最好列数在7±2

3、对齐方式:文本采用左对齐,金额及跟金额相关的百分比、操作项采用右对齐

  • 分页器
  • 一页展示多少条合适?

一页最好能在一屏展示,避免用户来回上下滚动,比如固定为展示10条。

用户特殊使用需求,不适用以上规则,一页可能展示10条/20条,都可以。





















视觉稿







作者:YOgire  来源:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

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

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

博博

B 端产品主要是 Web 端产品,空间大、操作多,内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系,从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。

格式塔主要包括 7 个基本原则:

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

今天我们就来总结下,格式塔原理在 B 端产品中是如何应用的?

接近性原则


我们先看 2 张截图,分别是不同分辨率下的界面效果。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

可以明显的感觉到高分辨率下,菜单列间距离较大,菜单的归属关系很清晰。而低分辨率下,菜单间的距离变小,特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则,距离近的关联亲密,距离远的就各自独立分组。

当我们想要传达给用户层级关系时,就需要善于利用接近性原则。例如表格上方的功能按钮,通常我们将高频、核心操作放置在左侧,低频、辅助功能放置在右侧。通过增大元素间的距离,达到功能分区的目的。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

相似性原则


相似性原则是通过颜色、尺寸、图形等方面的共同属性,实现信息的分组或者高可读性。

例如在可视化图表中,不同范围值的指标采用不同的背景色。通过背景色的差异,将同一范围内的数据形成视觉关联,提高用户对信息的识别效率。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页,都采用了双列设计,左侧主要以高频的业务功能信息为主,右侧是辅助运营信息。两列尺寸宽度有明显差异,用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异,并有效地突出业务信息。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

闭合性原则


IBM、苹果的 Logo 设计,无论是“用刀砍过”,还是被“偷咬了一口”,用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

在 UI 设计中,则会通过对齐方式,形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色,内容区借助标题、卡片对齐形成视觉闭合空间,最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

另外闭合性是需要元素之间相互辅助的,单独的元素无法构建出闭合空间。以下图为例,虽然四个小的卡片做了间距分割,但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

连续性原则


用户更习惯于从左到右的横扫阅读,因此连续性主要体现在横向空间中。

下图中,虽然左侧的标签文字与右侧的内容信息有较为明显的间距,高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体,而是理解为两组信息。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

在某些场景中,如果信息平均分布,不会产生连续性的视觉感知。

例如下图指标监控中,指标都是采用小卡片,间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点,没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时,需要逐个检索,花费的成本更高。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

简单对称原则


通过上述很多图片,我们可以看出页面元素基本都是横平竖直,中规中矩的元素和分割方式。或许有些单调乏味,但是胜在简单,不会带来额外的视觉噪点。

特别是 B 端产品,基本看不到异形的存在,甚至全圆角矩形都很少见到。即使有异形,也只是作为视觉表现元素存在于内容中,而不会作为空间的划分边界。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

主体与背景原则


主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性,凸显弹窗信息。

当我们需要着重表现内容时,同样适用于主体与背景原则。例如登录界面的设计,会通过差异化的背景、阴影等方式,带给用户清晰的视觉层级,适当凸显输入框的主体地位。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

而 B 端内容区是核心空间,基本都是采用纯白背景,与页面背景形成对比,从而占据信息的主体地位。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

共同命运原则


共同命运原则听起来有点玄学,指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少,我没有找到合适的案例解释这个原理。

在移动端产品中有些应用案例。比如 iOS 系统中,桌面布局编辑态下抖动的图标,可以与静态不可编辑的内容形成隔离效果,视觉引导性更强。同样今日头条频道编辑时,也采用了抖动效果。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

总结


虽然 B 端产品没有 C 端色彩丰富,表现力上没那么炫酷。但是两者对信息传达的要求是一样的,要求和谐、有序、层次分明,辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。

格式塔原理不仅限于视觉表现,产品经理或交互设计师在原型设计时,也要重视格式塔原理,辅助设计方案表达,提高团队间的协作效率。

今天的分享就到这里了。如果有更好的案例,欢迎评论区留言分享给大家~


作者:子牧先生

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



Bs界面设计之十:B端设计基础指南:网格系统

博博


网格的历史


说到网格的应用,我们可以追溯到很远。古埃及人在他们的雕刻和绘画中描绘的人物遵循了一个规则,将比例标准定为人的拳头,一个站立的人物从地面到头顶测量为 18 个拳头。

B端设计基础指南:网格系统

公元 1040 年,首次在中国出现活字印刷,主要采用的是泥活字。在西方,金属活字印刷术在 1450 年左右出现,而古腾堡圣经在 1455 年左右的发行将是出版界的第一个重大里程碑。金属类型的文字更加充分利用了网格。

B端设计基础指南:网格系统

到了 1917 年,网格在荷兰风格派运动中最为明显,由艺术家 Theo van Doesburg 和 Piet Mondrian 领导。他们将画布限制在相交的垂直和水平线条和原色上。

B端设计基础指南:网格系统

1919 年,德国的包豪斯学校成立,他们主张的简洁实用的设计理念同样用到了网格的概念。像著名的包豪斯国际象棋,它的棋子都是正方形和长方形等简单的几何形体,可以紧密地组合在一起,以便紧凑地存放。

B端设计基础指南:网格系统

1950 年代,一种崭新的平面设计风格终于在瑞士形成。这种风格的设计,力图通过简单的网络结构和近乎标准化的排版方式,达到设计上的统一性。这种风格一直到现在影响了很多网页和平面设计师。

B端设计基础指南:网格系统

随着第二次世界大战的结束,一种新的消费主义出现了。经济快速发展,广告业的繁荣逐渐兴起。保罗·兰德作为美国第一个应用瑞士平面设计风格商业艺术家,他以企业品牌标志设计及商业广告设计而闻名,网格在这种新的广告形式中发挥了重要作用。

今天我们要聊的是关于网页设计网格系统。说起来很简单,但其实里面包含了很多复杂的概念。网页设计的第一步就是如何进行布局。标题、导航、按钮放在哪?每个元素之间的间距是多少?这些都离不开页面布局。作为网页设计的基础,页面布局可以极大地影响用户阅读的流畅度和直观度。在聊页面布局前,我们需要先普及一些概念。

B端设计基础指南:网格系统


页面布局


页面布局是网页上所有视觉元素的排列。通过页面元素的有序排列,可以建立元素间的关系,从而更好地引导用户体验。作为网页设计的关键组成部分,布局决定了页面哪些元素最受关注,以及页面的视觉整体平衡。总之,一个好的页面布局可以将用户的注意力引向正确的方向。先将他们吸引到最重要的元素上,然后按照重要性顺序阅读余下部分。


网格的作用及概念


要实现良好的页面布局,最好的办法就是应用网格系统。网格是设计的骨架,可以帮助我们对齐,有序组织页面内容。通过正确使用网格,我们不会随意地把元素放到页面里,而是明确地知道将这些元素放到哪些合理的位置上,有助于提高设计效率和设计质量。无论是 PC 端还是移动端设计,通过网格都将对我们做出有指导性的设计决策并为用户创造更好的体验。

网格由几个部分组成,分别是 Column (列)、Gutter (槽)和 Margin (边距)。它们在一起构成了屏幕的水平宽度。

接下来通过几个图例来详细解释下。

B端设计基础指南:网格系统

列(Column)是跨越内容区域的垂直部分。在网页设计中列越多,网格就越灵活。列的宽度由设计师自己来决定,传统做法是在 PC 端网页上使用 12 个,Pad 端使用 8 个,移动端使用 4 个。列宽一般定义为 60~80px。列宽是影响实际内容宽度的关键因素。

B端设计基础指南:网格系统

槽(Gutter)是列与列之间的间隙。槽的作用是将每个模块的内容进行纵向分割。较宽的槽更适合较大的屏幕设备,可以通过更宽的槽去拉开页面的间距,使页面信息展示的更加舒展。

B端设计基础指南:网格系统

边距(Margin)是内容与屏幕左右边缘之间的空间。更宽的边距更适合更大的屏幕,因为它们会在内容的周边创建更多的空白。

B端设计基础指南:网格系统

介绍了以上 3 个概念,我们可以利用 8pt 网格系统来对页面进行分割。8pt 网格系统,使用 8 的增量来调整页面元素的大小和间距。也就是说,页面中的高度或宽度、边距或填充都是 8 的倍数。


8pt 网格介绍


有没有想过我们在做移动端界面设计的时候为什么选用特别小的画板,但我们的显示设备却非常大?

比如,我们用 375×812 的尺寸来进行设计 iphone X,但其实 iphone X 的实际尺寸是 1125×2436,是我们设计尺寸的 3 倍。

B端设计基础指南:网格系统

B端设计基础指南:网格系统

因为设计尺寸会以 2 倍或 3 倍的像素进行渲染,比如 iphoneX 就是以 3 倍尺寸进行渲染,iphone8 或 iphoneXR 会以两倍尺寸进行渲染。所以我们在进行设计的时候可以采用 1 倍最小尺寸进行设计,以适配到不同设备的不同尺寸。因此,1pt 可以分别转换为 @1x(1 倍尺寸)、@2x(2 倍)和 @3x(3 倍)大小的 1px、4px 或 9px。

B端设计基础指南:网格系统

所以我们设计一个 16pt 的图标,导出@2x 或者@3x 的尺寸应该是 32px、48px


为什么一定要用 8pt?


使用偶数来调整元素大小或元素间的间距可以很好的适配到各种尺寸的屏幕。比如在@1.5x 尺寸下,如果用奇数来定义元素尺寸或间距,就很容易出现半个像素的情况。5px 在 1 倍尺寸中导出为 1.5 倍尺寸就容易出现半格像素的情况。之所以选择 8,也是因为大部分的屏幕尺寸是可以被 8 整除的,这样就很容易适配。此外在 PC 端没有使用 2 或 4,是因为其颗粒度太小,不便于设计师进行操作;用 8 的倍数来设计还有一个好处就是避免我们在设计中过于纠结。

B端设计基础指南:网格系统


文本如何设置?


基于 8pt 网格的排版系统。字体的大小可以设计成不同的尺寸,但它们的行高要尽量是 8 的倍数。

B端设计基础指南:网格系统

B端设计基础指南:网格系统

在网页端设计时,很少会遇到几倍尺寸的输出,所以通常情况下都以像素为单位,这样的话就是 8px 的倍增。我们就可以把间距或者元素定义成以 8 的倍增不同尺寸。

例如:

small = 8px
medium = 16px
large = 24px
x-large = 32px
……


页面布局类型


普及了上述概念后,我们一起进一步了解下页面的布局,页面布局大体分为几类:固定布局、流动布局、自适应布局、响应式布局。

固定布局,顾名思义就是页面的整体宽度是固定的,不会随着浏览器的拉伸变化而变化。这种页面相对死板单一,但对于设计师来讲相对容易设计,也易于开发。

B端设计基础指南:网格系统

流动布局,它会随着浏览器窗口的大小而变化,但是它变化的逻辑是以模块的百分比来定义的。无论浏览器的宽度是多少,流动布局都会填满页面的宽度。其次流动布局不需要像响应式布局那么多样性的变化。它在极大或极小的页面宽度上会存在一些缺点。比如页面很宽,内容可能会被拉伸得太长,单个文字段落可能会在单行上贯穿页面。相反,小屏幕上的多列布局也可能对内容来说过于拥挤。

B端设计基础指南:网格系统

自适应布局可以理解为是固定布局的一个升级版,举个例子,当页面内容为 960px,此时页面无论再往多宽拉伸,页面内容始终显示 960 宽度。如果缩小宽度到一个临界值时,比如 960px 以内,页面就会缩小到它的第二个宽度,假设是 640,以此类推。这个临界值我们称之为断点。

B端设计基础指南:网格系统

响应式布局结合了流动布局和自适应布局。随着浏览器宽度的增加或减少,响应式布局将像流动布局一样进行变化。同时,如果浏览器宽度超出了某个临界点,也就是断点,那么页面布局也会发生改变。通常,响应式布局是为了能够兼容网页端、平板端和移动端等不同设备进行设计的,这样会给用户带来更好的浏览体验。

B端设计基础指南:网格系统

最后用图例展示下如何利用网格系统在网页设计上进行页面布局。

B端设计基础指南:网格系统

在 figma 上的设置如图:

B端设计基础指南:网格系统

我们可以设置好列数,定义好列宽和槽宽来决定页面的实际宽度。

在网页设计上使用网格系统浅层价值是为了让页面布局有章可循,使页面看起来更加统一,深层价值其实是为了做自适应布局,让页面在不同宽度下适配到不同的设备上。

这里我也创建了 4 种不同尺寸的网页端网格系统,供大家参考,大家也可以根据自己的实际情况去建立自己的网格。

B端设计基础指南:网格系统

https://www.figma.com/community/file/1076073453929437640/8pt-web-grid

最后推荐一款 sketch 智能布局网格的插件,喜欢的同学附件进行下载。

B端设计基础指南:网格系统

切记,在实际项目中,尽可能灵活的使用网格,不必拘泥于 8pt 的单位,但尽量保持在偶数范围。

参考文献:

Bs界面设计之九:从6个层面,帮新手快速入门B端设计系统

博博


什么是设计系统?


从6个层面,帮新手快速入门B端设计系统

配图取自文章《以B端产品为例,帮你深入浅出掌握「设计系统」》

设计系统 = 设计价值观和原则+设计规范+场景定义+工具包

设计系统是在设计价值观和原则、设计标准指导下的各种共享的设计模式和组件资产,是将产品设计团队联合在一起共同打造的一套质量和效率上都有所保障的可行性解决方案,能够解决产品视觉、交互体验一致性的问题、帮助传达统一的品牌认知。帮助团队快速完成产品迭代和功能开发!


为什么要构建设计系统?


从6个层面,帮新手快速入门B端设计系统

问题 1:

随着业务的拓展,产品和项目数量不断增加,发展中期设计和交互上不一致性的问题浮出水面,需要采取措施确保产品或产品线之间保持统一的品牌传达、外观和体验,以满足用户预期并向其传达统一的品牌认知。

问题 2:

无统一的设计规范和交互原则,没有统一的 UI 组件库和代码库,各团队设计和前端需花费大量资源陷入低质量沟通协作和重复造轮子,拖慢产品和项目设计和开发节奏。

问题 3:

产品项目数量 vs 产品设计师,人员配比严重不足的情况下,团队的设计师们无法从杂/乱/急的日常需求中剥离出来,影响构建产品壁垒的质量和速度。


设计系统的价值


产品侧:

保证可复用模块的交互体验的一致性。如同一个产品类型不同分支多个团队完成的时候,可以保证产品团队使用同一份设计规范快速完成产品原型设计。

设计侧:

把设计师逐渐从不必要、重复性劳动中解放出来,节约出来的时间和精力放到更多有价值的工作上去。更多去关注对用户需求和业务逻辑的深入挖掘,如果每个设计师都具备产品用研、交互、组件化等一条龙能力,才能体现 tob 产品设计师的价值,才不会被别人称作是拖拽组件的“工具人”。

开发侧:

形成开发资产,可以提升研发效率,降低维护成本。开发工程师无需再重复开发同一个组件,只需要去组件库里调用即可,配合业务逻辑,高效完成界面开发。做到开箱即用。

测试侧:

标准化的设计规范,是测试人员最喜欢看到的。1 是 1,2 是 2 的设计准则,提升了测试效率。例如,设计规范规定弹窗 footer 区按钮组居右,那么测试人员只要测到不居右,就可以给产品提优化建议了。

主流设计系统-他山之石可以攻玉!

无需犹豫,直接基于现有的优秀的开源设计系统。

设计系统的打造不必从 0-1 构建, 例如:Ant Design 业界优秀的开源设计系统,我们完全可以站在前人的肩膀,最终生产出符合达观品牌、业务特性的设计系统。

  1. 阿里 Ant design:https://ant.design/docs/spec/introduce-cn
  2. 阿里的 teambition: https://design.teambition.com/
  3. 华为 devui: https://devui.design/design-cn/design-value
  4. 饿了么 elemnt: https://element.eleme.io/#/zh-CN
  5. 有赞: https://design.youzan.com/index.html
  6. 字节跳动 Semi Design: https://semi.design/zh-CN/
  7. 字节跳动 Arco Design: https://arco.design/
  8. Material Design:https://material.io/
  9. Lightning Design System: https://www.lightningdesignsystem.com/
  10. Microsoft fluent: https://www.microsoft.com/design/fluent/#/
  11. eva.design: https://eva.design/
  12. Atlassian design: https://atlassian.design/


以原子理论构建设计系统


1. 原子理论设计介绍

首先原子设计理论并不是什么高大上的规则。最早是由国外前端开发工程师 Brad Frost 提出的,他从化学元素周期表中得到启发,发现在化学世界中,所有的物体都是由原子构成,原子组合构成分子,分子组合构成有机物,最终形成了宇宙万物。根据他的理论,设计体系主要包含 5 个层面:原子、分子、组织、模板、页面。

原子理论设计不是一个线性的过程, 它更像是一个心理模型,来帮助我们把用户界面看作是一个连贯的整体,同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面,让我们更深入的了解每一个概念哦~

2. 原子层(Atoms):

原子是物质的基础组成部分,是构成设计系统的最基础元素。

在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线、间距、圆角、间距、阴影等。

从6个层面,帮新手快速入门B端设计系统

简单概述下来就五个字:色、形、质、构、质;

从6个层面,帮新手快速入门B端设计系统

3. 分子(Molecules)层

在界面中,分子就像是一个由 UI 元素组成的相对简单的组织。如:按钮、弹窗、搜索框等。

以按钮为例,它的组成元素包含了文字、色块、图标和间距。这些抽象的原子从毫无关联组合成一个分子,图标和文字互相配合传达意义,颜色定义了按钮的特性,间距为按钮定义了一个尺寸和规范。

从6个层面,帮新手快速入门B端设计系统

4. 组织(Organisms)层

分子+原子组合成更复杂和可扩展性的模块,这个称之为组织(区块组件),如:列表操作区块、列表展示区块、表单区块、数据统计卡片区块。

以表单为例,一个表单我们可以通过数量的组合,以及间距的调整,元素的增减,在界面中表达不同的场景和含义。

从6个层面,帮新手快速入门B端设计系统

5. 模板(Templates)层

由原子+分子+组织构成的更复杂更具拓展性的模块,如:分组表单页、页面级表单、详情页、列表页、异常页、dashborad。

本质就是线框图,模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。专注于页面的底层的内容结构,页面中的信息是占位作用,而不是页面的最终内容。

从6个层面,帮新手快速入门B端设计系统

6. 页面(Pages)层

带业务逻辑的场景案例如:标注详情场景、抽取详情场景、权限管理场景。页面将真实内容应用于模板;

页面是模板的具体实例,填充了真实的内容(图片、文字等)后形成页面,也就是常说的带交互逻辑的「视觉稿」即为高保真原型图,将占位符替换为有代表性的真实内容,使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案。

从6个层面,帮新手快速入门B端设计系统


关于设计系统的常见认知误区


误区 1:设计体系就是设计规范或者组件库吗?

许多人认为设计系统就是单个代码库、组件库、设计规范,但实际上他们不是一个层次的东西,准确来说设计体系包含设计规范,组件库也是建立在设计体系内的,组件库是记录和共享设计模式的工具,就是设计体系工具化和表现层的部分;

误区 2:设计体系的存在扼制了组织内创造力,会替代掉设计师?

抛出这个问题,是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点,我个人是很难认同这个的,对 design system 的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合,需要调动整个团队的想象力和创造力,最终达到一个统一共识才有可能被实施和执行;

好的设计系统可以通过流程和机制促进创造力的,而且好的设计资产可以帮助大家从不必要的、重复的劳动时间内节省出来,当然也不能过度依赖过往的沉淀资产,把自己定位为设计系统的创造者,而不是使用的工具人,不断的创造和贡献好的解决方案被整个组织采用,就不必再担心那些即将沦为沉没成本的过往设计与技术资产的限制。不会替代掉设计师,反而是一个企业内部尊重设计师价值的开始!是企业对设计文化的认可!

误区 3:设计系统是一劳永逸的吗?

设计体系是动态的,永远是随着组织需求和用户需求而变化的,一切说自己已经完成了设计体系的建设的人都是错误的,都是将静态的设计规范曲解成了设计体系。

误区 4:设计系统由少数人员生产,我们负责用就行了?

正确管理机制:少数人负责管理,多数人参与贡献;避免你做、我用模式,这种生产消费模式非常内卷;避免如:我一个设计师为啥要用你的规范;这规范做的太垃圾用处不大,我才不用,用你做的规范;我苦逼做业务,你晋升拿结果的负面心态;

设计系统也不是简单的靠少数的人 1-2 个月用爱发电就能完成的,设计系统是一群人,对一种做设计文化的认可,每个与之相关的人都应该是设计体系的贡献者与布道者!


需要克服的潜在难题


当然设计体系也容易出现一些缺点,这些问题需要设计体系的构建者们去摸索去克服;

  1. 产品业务复杂性提升,提升建设难度
  2. 难以控制创造与控制间的平衡
  3. 复用与定制间的平衡,刻意追求复用率而容易丢失整体观,为特定业务目标服务时不如灵活集中化式方法等
  4. 资源问题,容易被当成是辅助项目而缺乏预算等资源….
  5. 缺乏良性有效的组件库更新迭代机制,虎头蛇尾….
  6. 收益短期不明显,搭建体系的长期收益难以被组织短期内察觉;

尽管有一系列潜在的问题,但总的来说设计体系带来的收益是大于这些投入的,总的来说方向是没错的,下一个关键问题是:我们如何去建立一个更优秀的设计体系。

今天就跟大家分享到这了,一点拙见,设计系统的话题这个我们分三期跟大家进行交流,如有兴趣,铁子们可以加个关注

作者:IM UED

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



更多精彩文章:



Bs界面设计之八:用2个案例,帮你学会B端关键信息的密度提升设计

博博

在决策类产品中,用户的行为路径一般从信息分析场景到信息决策场景。系统关键信息密度的高低是影响用户决策速率的重要因子。因此我们建议从「信息拆分与重组」、「功能高效聚合」两个层级出发,以提升关键信息在页面模块中的的密度。

B 端有效信息密度提升设计框架的颗粒度由粗到细可总结为三个层级,分别为基础层、功能层与信息层。首先是基础层,B 端产品多场业务景、多用户角色、多任务流程的关键性差异决定了业务侧信息是一切设计的出发点;再者,需依据业务场景定义、角色定义与任务流排布的相关内容链接与聚合产品功能;最后,基于以上信息,使用交互与视觉相结合的设计方法,降低用户与系统的交互成本,引导用户聚焦产品核心能力,提升关键信息在页面中的密度与触达效率。

用2个案例,帮你学会B端关键信息的密度提升设计

「信息拆分重组」:在 B 端系统中,信息拆分与重组是依据业务与产品内容对信息进行重新组合,以求达到低跳转、高密度、有效触达的设计目标。

「功能高效聚合」:在 B 端系统中,功能高效聚合是依据业务场景与业务逻辑对产品功能进行重新整合,旨在单位时间、单位面积内的带来更多商业效益/效率提升。


案例一:入库计划-销售计划确认产品


设计方法:信息层拆分与重组。

项目背景:基于对计划方式的调研及整理,结合业务侧对于销售计划确认模块提供参考信息过少、浏览体验较差等问题,对明细表格及其他部分进行整体体验升级。

用户痛点:销售计划确认明细表格的浏览与分析效率低下,导致线上计划确认难。

设计目标:依据业务逻辑对表格信息进行拆分与重组,减少并优化用户眼动轨迹,提升信息展示密度。

用2个案例,帮你学会B端关键信息的密度提升设计

用2个案例,帮你学会B端关键信息的密度提升设计


案例二:全流程数据概况产品


设计方法:功能高效聚合

项目背景:对全流程进行数据可视化,分环节数据监控,同时展示时效等更多维度数据,便于业务快速定位异常并跟进处理。

用户痛点:用户在产品方案中无法快速获取到履约率相关数据,在一定程度上影响数据分析与决策的效率。

设计目标:依据业务逻辑排布浏览分析全流程数据任务的起点、过程与终点,缩短优化用户眼动轨迹,提升信息触达时效。

用2个案例,帮你学会B端关键信息的密度提升设计

用2个案例,帮你学会B端关键信息的密度提升设计

用2个案例,帮你学会B端关键信息的密度提升设计


最后


以上就是「关键信息密度提升设计」的全部内容啦~

录入流程设计、任务中断回溯设计已经发布,感兴趣的小伙伴记得阅读收藏哦~后续会为大家带来「场景化设计」等 B 端的设计方法,希望能给正在从事或准备入局 B 端的的小伙伴带来启发,也希望跟大家一起探讨更多的 B 端设计方法。

作者:自转一周的鹿

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



更多精彩文章:



日历

链接

个人资料

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

存档