首页

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咨询、用户体验公司、软件界面设计公司



更多精彩文章:



Bs界面设计之七:如何做好B端产品的信息设计?我总结了3个原则!

博博

最近在 12306 网站购票时,弹窗中展示了大段的文字信息,我只是匆匆扫了两眼就果断关闭了,实在没有耐心逐字读完。特别是节日抢票的场景,用户更不会有心情去看这些提示信息。

如何做好B端产品的信息设计?我总结了3个原则!

所以在做产品设计时,需要注重信息的传递效率。B 端产品通常用在 PC 端,屏幕显示区域大,在做设计时会不自觉的添加较多的信息,反而影响了用户的使用体验。今天我们就来讨论下如何做好信息传递?

我总结了以下 3 个原则:

如何做好B端产品的信息设计?我总结了3个原则!


匹配用户心智模型


心智模型指的是人们心中根深蒂固存在的,影响人们认识世界、解释世界、面对世界以及如何采取行动的许多假设、陈见和印象。是一个决定用户信息获取行为的内在的、可预测的认知模型。简单来讲就是人类基于经验的总结,去认知世界。

《About Face4:交互设计精髓》中提出了 3 种模型,实现模型、表现模型、用户的心智模型。好的产品的设计要尽可能匹配用户的心智模型,越符合用户心智模型的设计,产品越容易理解。

如何做好B端产品的信息设计?我总结了3个原则!

B 端产品页面内容变化较少,更强调一致性。主要由表格、表单、按钮等各种信息元素构成。在长期的使用过程中,用户对某些信息元素已经形成了特定的心智模型。例如用户看到输入框,就知道需要填写内容;看到步骤条引导,就知道多步操作;看到 Radio Button,就知道是单选。

因此方案设计时,设计师的一个重要目标就是让表现模型尽可能的匹配用户心理模型,避免因为组件使用不当,造成用户产生错误认知。

例如考虑到用户的视觉动线,“新建”主要、高频按钮通常放在左上角,方便用户浏览和操作,而辅助功能按钮会放置在右侧,用户也逐渐形成了这样的心智模型。

如果主操作按钮放置在右上角则违背了用户的心智模型,用户使用产品时,需要建立新的心智模型,改变已有的行为习惯。并且这种设计并不能带来其他层面的体验提升,个人认为有些得不偿失。

如何做好B端产品的信息设计?我总结了3个原则!


信息的层次性


B 端产品业务比较复杂,页面内容也会较多,信息的有效组织尤其重要。信息设计不是简单的内容堆砌,需要根据用户场景和需求做出优化处理,构建有效的信息的层级帮助用户去理解业务内容。

信息层级包括 2 个方面:

1. 系统空间分层

在一个系统中存在着空间分层,当页面较为复杂时,需要通过合理的内容分层,有序的展现内在逻辑关系。

B 端核心交互就是“增、删、改、查”,其中“查”就是信息的检索和浏览。所以页面主要是由搜索条件和表格构成的。而“增、改”等操作行为主要是在临时的系统空间中完成,例如弹窗、侧边浮窗、跳转页面等形式。

不同的信息在不同系统层级中相对独立的展示出来,保证了信息的层次感和秩序性。

如何做好B端产品的信息设计?我总结了3个原则!

2. 页面信息结构

复杂业务场景下,单个页面会承载大量的信息内容,需要通过合理有序地呈现给用户。主要有 2 种方式进行信息拆解。

如何做好B端产品的信息设计?我总结了3个原则!

1)高效组织——卡片化设计

在 B 端产品中,为了保证功能的完整性,必须要一个页面中展示给用户。逐条平铺,散点式的信息展示会造成信息密度过高,缺少层次性。而卡片方式可以很好的聚类相似信息,分割差异化信息,有助于降低信息的复杂性,帮助用户快速定位信息、浏览内容。

如何做好B端产品的信息设计?我总结了3个原则!

2)化整为零——步骤化设计

面对复杂的信息内容,用户容易产生畏难情绪。将复杂内容分步拆解,把用户的关注点从页面内容转移到步骤进度上,可以减少用户的心理压力。另外节点信息页也可以帮助用户更好的理解业务流程。

如何做好B端产品的信息设计?我总结了3个原则!

另外步骤化设计还可以将散点内容归集到一个任务流程中,引导用户快速完成工作任务。例如 Win11 系统安装后的设置引导,可以方便用户快速完成系统基本配置,避免用户操作的行为成本。

如何做好B端产品的信息设计?我总结了3个原则!

3. 页面元素设计

不同于 C 端产品,B 端产品更强调效率。正如奥卡姆剃刀原则所说“如无必要,勿增实体”。页面内容需要以简洁为主,避免无关要素形成信息干扰。而设计师更加感性,担心设计过于平淡,会在界面中添加各种视觉元素,反而会增加用户的认知成本。

如何做好B端产品的信息设计?我总结了3个原则!


信息的可理解性


B 端产品通常业务具有一定的专业性,用户门槛较高。在复杂业务场景下,必须让用户能够较为清晰的理解产品及功能,才能保证信息的传达效率。

1. 帮助信息

B 端产品需要尽可能地降低用户学习成本,但是本身业务层面的难度是无法避免的。因此需要为用户提供及时有效的帮助信息。

在阿里云、腾讯云界面中包含了大量的解释说明、Tips 等信息,解决用户在使用过程中的疑问,帮助用户更好的理解业务内容,减少用户的记忆量。

同时帮助信息还需要具有拓展性,当提示信息无法完全解决用户疑问时,还需要能够引导用户,查看完整的帮助文档,减少用户翻查资料的成本。

如何做好B端产品的信息设计?我总结了3个原则!

2. 可视化设计

数据可视化设计在 B 端产品中应用较多,例如概览页面,通过图形化的方式将数据的内在关系更直观的表达出来。

在某些特定的场景下,内容页面也可以通过可视化展示帮助用户理解信息,例如常见的身份证图片上传等,很多用户无法分清楚正面反面,借助图片可视化提示,便于用户更好的理解信息。

如何做好B端产品的信息设计?我总结了3个原则!


写在最后


体验设计行业需要创新,但是 B 端产品设计需要更加谨慎。尊重用户的习惯,完整表达业务逻辑性、保证内容的可理解性,是设计师必须去关注的。

作者:子牧先生

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:





Bs界面设计之六:想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

博博

有了解和学习 B 端的同学必然都听说过 SAAS 这个词,这在 B 端行业是个非常重要的产品形式和分支。

虽然它重要,但新手对这东西的理解充满了让人遗憾的扭曲。比如常见的误解式提问,Saas 应该怎么设计?适用哪些设计风格?

所以我从最底层的技术层面,来解析 SAAS 到底是什么,在未来你再也不用担心对这个词汇一知半解,无法正常参与业务讨论了。


想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

在 9 层塔中,SaaS 是完全制作好软件让用户直接上手使用的软件,而 PaaS 和 IaaS 就不一样。

1. PaaS

PaaS 全文 Platform as a Service,是平台即服务的简称。这属于完全技术化的服务,是非程序员的一般用户难以参与到的业务类型了。即服务商提供了基础的 7 层服务,只要用户购买了这些使用权,那么就可以直接在这个基础上编写或安装运行的程序进行使用了。

比如全球最大的开源 CMS 博客程序 WordPress,是由 PHP+MySQL 编写的,如果要创建这样的网站,就可以直接购买符合程序对应环境的服务器,再进行安装部署即可。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

2. IaaS

IaaS 全文 Infrastructure as a Service,就是用户只购买一个完全空白的虚拟主机,类似你购买了一台硬盘格式化后完全空白的虚拟电脑。用户可以自己选择安装什么样的系统,编写什么样的中间件,最后再搭建自己的框架。这适合定自定义要求更高的用户,完全根据自己的需要 DIY 项目的服务器功能。

3. Hosting

Hosting 则是比 IaaS 更进一步的服务,从原本的虚拟服务器升级到了完整的服务器。也就是说,在一些特定业务环境下(比如特殊的数据安全要求),用户需要购买完整的服务器硬件使用权,从原本的合租换成整租。

所以,Hosting 就是服务器托管的意思,用户向一些服务商购买了完整的服务器硬件使用权和联网功能,然后远程进行控制和使用。而商家负责硬件层面运维,防止服务器断电、断网、损坏、过热、故障等一系列硬件问题。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

4. Co-location

九层塔中,我们其实还省略了一个更底层的环节 —— 数据中心。

数据中心是一个物理名词,在今天指的是大规模的服务器数据设备安置和运行的空间。比如苹果的云上贵州,就是典型的数据中心。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

Co-location 的服务也叫场地出租,就是数据中心的商家,把数据中心的物理空间使用权租用给用户,用户自己购买服务器或商家的(不是临时租用)放进去,再借助数据中心的网络和其它基础服务实现服务器的正常运转。

这个概念大家简单理解就可以,我就不多做介绍了。所以,九层塔中包揽了不同层级数量的技术,就可以形成不同的服务,每一级服务有各自的优缺点,是由项目的实际情况决定的。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

相信看完前面的介绍大家已经知道,SaaS 等服务是建立在联网的基础之上的,也就是说,除了可以独立运行在你客户端里的本地软件,还包含更多需要联网的软件,或者干脆运行在远程服务器主机上的软件。

这是一个发展的过程……

最早的软件安装是我们到软件店里购买软盘、光盘,回到家里的电脑安装,这些软件往往只在本地运行,是不需要联网的孤岛。随着互联网行业的发展,孤岛渐渐被消除,联网上传和获取数据越来越普及,甚至,软件都不需要再下载和安装,直接用浏览器就可以访问使用。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

这种模式,就催生了软件的开发维护与服务器、网络的硬件运行进行了分工,一般的产品开发团队专注在软件应用层面的开发工作,而把网络、远程服务交给其它商家,并付费购买。这样不仅带来更高的效率,而且降低了各自的成本,实现了多方的共赢。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

所以,我们再来理解云服务这个词就很容易了,云就是网络,云服务就是基于联网实现的各种软硬件服务的总和。除了远程的虚拟机、中间件、数据库外,还有远程计算、渲染、CND 加速、直播分流等等。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

这也是为什么云服务会成为互联网发展的基础,因为它实在太重要了,几乎所有互联网公司都无法脱离云服务带来的支持。这也是为什么各个大厂纷纷投入云服务的赛道中,因为这是互联网的基建和命脉之一,拥有非常广阔的前景与市场。而在马太效应强者越强的现实环境下,头部的厂商拥有更好的机群、技术、人员,可以大幅度降低运作成本,提供更优质但价格更低廉的服务。

虽然云服务在今天不可或缺,价格也越来越有优势。但是,并不是所有企业都一定要选择购买外部的云服务,这就是我们要理解的另一个课题 —— 私有化部署。云服务再怎么便捷,也有一个缺陷,那就是数据是存储在别的商家、企业的服务器中,有一定的数据安全隐患。虽然数据安全是云服务的最基本保障,但很多对数据隐私、安全极度重视的企业,是不愿意承担任何外部风险的。所以他们就会通过自建本地服务器(私有云)的方式,实现从网络、硬件到软件全局私有化的部署。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

也就是说,服务器机房是自己公司的,网络是自己迁进机房的,服务器自己买的,环境、虚拟化、数据库自己搭建的,后端程序也是自己写的,最后电脑手机上运行的客户端,是连接这些服务器的。

哦对了,当然这些硬件日常的维护也要由自己公司的运维负责……

这样的成本高嘛?非常高。但类似国企、银行、证券、国防、政府机关等机构,对数据的安全性是异乎寻常的执着的,他们是有足够的动力划出预算来确保数据的私密与安全,用来运行自己内部的 B 端系统。这也是为什么这些机构从一开始就拒绝使用 Figma 这种公有云端软件,尤其是服务器在国外的。

再问下一个问题,私有化部署,就意味着这个环节中所有步骤全是自己搞定嘛?当然不可能,因为应用这个层面,有时候不是想开发就开发得出来,或者成本实在超出了预算。因为私有化的主要目标是数据安全,但不是应用的工具一定得个性化定制。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

比如在即时设计官网的价格页面,就可以看到 “私有部署” 这个选项。它的实际作用,就是允许客户在自己的服务器上安装它,让内部的员工使用设计软件时是同步到公司指定的服务器而不是官方的公共服务器中,满足客户的数据隐私需求。

注:这例子大家讨论最多适合理解,非恰饭

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

所以,了解完上面的概念,你也就大概能明白什么是云服务,什么是私有化。如果需要在工作中碰到更细节的名词还是概念,可以再进一步做理解。


结尾


关于 SaaS、PaaS、IaaS、云服务、私有化部署的扫盲,就先解释到这里。希望大家看完以后对 B 端行业一些最基本的产品概念能有一定的认识。

作者:酸梅干超人

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:



Bs界面设计之五:想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

博博

有了解和学习 B 端的同学必然都听说过 SAAS 这个词,这在 B 端行业是个非常重要的产品形式和分支。

虽然它重要,但新手对这东西的理解充满了让人遗憾的扭曲。比如常见的误解式提问,Saas 应该怎么设计?适用哪些设计风格?

……

所以我从最底层的技术层面,来解析 SAAS 到底是什么,在未来你再也不用担心对这个词汇一知半解,无法正常参与业务讨论了。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

讲解什么是 Saas,或者刚刚图例出现的 Paas、laas 是什么,首先要认识一个问题,一个需要联网的软件,是如何落地的,需要哪些前提条件。

通常,我们可以把一个普通的联网产品要正式上线并使用,需要满足 9 个层级的条件,我们简称 “9 层塔”,分别是:

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

下面,我们根据每个大层级来解释一下,它们分别都是什么。

1. 基础设施层

基础设施层是一切网络服务的根基,由现实世界的硬件组成,是所有技术、代码、数据的运行基础。

层 1:网络(Networking)

即基础的互联网电信宽带服务,通过电信运营商在各地搭建联网用的设备,并使用线缆相互连接,满足数据的物理传输可能。

比如你想要在家上网冲浪(非移动上网),最基础的条件是就是购买和开通宽带服务,通过接入光纤的形式,实现从家中连接到互联网世界的可能。

层 2:服务器(Serves)

服务器,本质上也是一台电脑。有了联网的条件,我们就要把网络接入到这台 “电脑” 上,让它来完成各种数据的处理和存储。

但不管它能做什么,要做什么,首先你得先有这台设备,不然后续的工作都无从谈起,所以服务器指的就是用来完成后续工作的电脑设备。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

层 3:存储(Storage)

存储就是硬盘,你想要运行的任何程序、代码,还是想要收集的数据,都需要容纳的地方,那就是硬盘空间。存储就是关联到服务器的硬盘,是数据存储的物理环境。

之所以硬盘被独立出出来,而没有把 CPU 内存这些拿出来,是因为数据的存储和安全(物理上)是网络服务的重中之重。CPU、内存、电源坏了,替换就可以,硬盘损坏导致数据的丢失是无论如何不可能接受的。

所以,工程师们开发了非常多特殊的技术来保障存储的稳定和安全。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

2. 技术应用层

技术应用层,就是具备了网络、服务器、硬盘以后,让这些基础设施充分发挥作用和能效的相关技术。

层 4:虚拟化(Virtualization)

虚拟化是个比较抽象的概念,它是一种资源利用的技术,让服务器最大化的利用和分配自己的资源。

比如一台服务器,有 8 核心、8G 内存、8G 存储,如果卖个一个客户运行一个程序,那么很可能这个这个程序日常只使用一个核心的算力,1GB 内存,1G 不到的存储,剩下的算力资源不就浪费了嘛?

于是,虚拟技术就可以把这台服务器切割成 8 台 “虚拟机” 卖给 8 个这样的客户。让他们在这台设备上运行 8 个不同的程序,并根据它们各自使用的消耗灵活分配 CPU 和内存资源。

所以,今天如果你想要搭建一个网站,云服务商出售的 “虚拟主机”,就是在实体服务器主机上切割出来的一部分。这样客户省钱了,商家利润率也更高了!

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

层 5:操作系统(OS)

每台电脑都有自己的操作系统,我们熟知的 Windows、Mac OS 等等。如果硬件没有搭载操作系统,那它们就只是一堆工艺精密的废铁。

对于服务器来说也是,任何服务器想要正常运行,都必须搭载相关的服务器操作系统,有了基本的系统,我们才能创建程序,让服务器去运行我们想要的功能。

前面提到的虚拟机,就允许同一台服务器通过虚拟技术运行多个系统。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

层 6:中间件

中间件也是个比较复杂的技术概念,它是个独立系统软件服务程序,是软件的直接面向对象(而不是服务器),是一种支撑软件。

举个不太严谨的例子,我们常规的逻辑是一个程序对应一台服务器(或虚拟机),但真实情况往往是一个程序会关联好几个服务器和不同的系统,来完成不同的网络服务。正常情况下,你需要对每个服务器和系统进行适配。

而中间件的作用就是帮助你省掉这个麻烦的步骤,让你只需要对接唯一的翻译和话事人,他会帮你向不同的任务对象传达你的要求。

层 7:程序环境(Runtime)

程序环境,就是编译代码用的环境。我们常听说的 C 语言、C++、PHP、Java、.Net 等编程语言,都需要安装一个对应的运行环境。

许多热衷电脑游戏的同学一定很熟悉游戏第一次启动触发的 Java 安装界面,那就证明这个游戏中运用到了 Java 的代码,如果你没有 Java 的运行环境,那么它们就无法生效。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

3. 产品表现层

层 8:应用(Application)

在这个系统下,应用程序指的不是你在自己电脑手机上安装的程序。而是安装在服务器上运行的程序,不管是后端程序还是前端程序。

它们需要使用某些特定的程序语言来编写,并运行在上面所说的对应环境中。我们所说的后端开发,通常就是开发服务器所运行的程序的程序员。

层 9:数据(Data)

这个词放在这里可能有比较大的歧义,数据实际上就是使用这个程序所产生出来的数据,而不是单指数据库(数据库也是环境的一部分)。

比如你打开一个网站注册了账号,上传了头像,那么这些信息就是使用程序所额外产生的数据,它是项目正常运作的必然产品。

4. SaaS 到底是什么

理解上面的 9 个层级的内容是什么,我们就可以看下面这张图表了。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

SaaS 全程 Software-as-a-Service,翻译叫 “软件即服务”,讲人话就是 “卖联网软件” 的。

前面提的 9 个层级,除了最后一层数据是我们普通人可以负责的,其它每个层级都需要对应的开发和工程师来负责对吧,那么我们普通人还是企业就不能使用网络软件服务了嘛?

这肯定是不符合事物发展规律的。

SaaS 的存在,就是让用户不用管什么服务器、代码、中间件这些有的没的高深玩意,直接让你在浏览器或本地客户端上直接使用这款联网软件,并创建对应的数据信息。

换句话讲,只要这个软件是联网的,且软件本身的功能就是服务的核心(划重点:社区电商类软件的服务显然不是软件功能本身),它就是 SaaS。SaaS 既可以免费,也可以是通过批量出售软件功能的使用权来赚取收益。

免费情景:

微软:如果你使用了基于 Web 的电子邮件服务(例如 Outlook、Hotmail 或 Yahoo!Mail),那么你已经使用一种形式的 SaaS。

https://azure.microsoft.com/zh-cn/overview/what-is-saas/

付费情景:

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

在 B 端的语境下,SaaS 通常就是指制作一个面向商业用户的联网软件,然后批量出售这个软件的使用权。它并没有特指这个软件必须是 CRM、ERP、HRM 还是商用 HMI……

所以明白了嘛,SaaS 只是一个商业形式或技术形式的统称,它根本没有具体的设计规范或者学习方法,完全根据业务的实际需求和场景决定。

最后,再问你们一个问题,你们现在负责的项目是 SaaS 嘛?


结尾


这一篇我们完成对 SaaS 的基本介绍,下一篇,我会在这基础进一步展开,讲解 PaaS、laaS 和云服务的相关概念。

希望大家不要再在这种基础概念中犯迷糊了……

我们下篇再贱~

作者:酸梅干超人

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:












日历

链接

个人资料

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

存档