足彩网-官网

足彩网
足彩网-官网
足彩网 发电机公司
Mou Mou Jidian Generator
发电机维修 发电机回收
发电机出售 发电机租赁
客户统一服务热线

400-888-8888
13588888888


足彩网-官网 一直专注发电机发电车设备
专业技术团队,随时上门服务
热门搜索:  产品
足彩网-官网
实力商家
品质保证

4产品中心
您的位置: 足彩网 > 产品中心 >
从“海外维修系统”项目解析 B 端产品设计(上)

从“海外维修系统”项目解析 B 端产品设计(上)

  src=近两年 B 端产品得到关注度越来越高,相关的比如 ERP、CRM、后台、中台等设计也出现在 UI 设计师的工作中,那么如何去设计 B 端产品,以及它与 C 端产品的设计有什么不同。结合我最近完成的一个终端维修系统来和大家做一个简单的分享,希望能够帮助到你。

  首先我们要确认一点,相较于 C 端产品,B 端在拿到 PRD 文档开始,就要从整体宏观的角度去考虑每一个模块,以及各个模块间的衔接。所以就要求我们对所要执行的项目做到了如指掌的地步,记住 你 是除了产品经理外最熟悉各个功能的人。

  我司作为非洲第三大视频运营商,海外产品主要以机顶盒、智能电视、数字电视一体机为主。每年销售量达百万级别,后期的维修数量也相对巨大。海外落后的管理导致维修数据仍以 Excel 形式按季度上传,为了能对问题设备的总结归纳预判有相对应的数据支撑是该项目的研发原因。

  3)业务需求,根据问题提出对应的解决方案,再根据不同的角色维度,定义对应的使用权限:

  海外事业部总经理:泛非所有数据、大区维修数据(可切换筛选)、维修率、修复率、单一设备的维修情况(可筛选);

  大区经理:大区维修数据、门店维修数据、维修率、修复率、单一设备的维修情况(可筛选);

  门店经理:自家门店维修数据、维修率、修复率、单一设备的维修情况(可筛选)、设备入库、设备出库;

  维修人员:自家门店维修数据、维修率、修复率、单一设备的维修情况(可筛选)、维修数据录入。

  门店经理负责每日需要维修设备的入库,维修人员根据入库的设备逐一维修,维修完成提交维修结果,门店经理每日结束后从修好的数据库内批量出库。完成一整套维修流程。

  根据 PRD 文档,列出功能架构,个人建议架构采用横向树形图;这里面提到一个名词 节点 。

  节点:是树状结构当中的基本单位,使用节点可以表示不同数据间的组成关系(从属关系与并列关系)通常节点会分为几类特殊情况。

  根节点:整个树状结构的开端被称为根节点。一个树状结构一定只有一个根,在思维导图中,根节点就代表着它的开端,用于延展出更多的树状结构,可以理解为产品总和。

  子节点:根节点之外的节点被称为子节点。一个树状结构子节点数量是没有具体限制,在树形选择当中是直接展示出来的部分。可以理解为一级导航。

  叶节点:没有连接到其他子节点的节点。叶节点属于一类特殊的子节点,它是整个树状结构的最末端节点,在树形选择当中是一个重要的概念,可以理解为二级导航或一级导航下的功能模块。

  src=当然,现实中的功能架构要比上面的图例中复杂得多,但只要你理清楚树状架构,基本上我们的页面基本模块间关系就梳理好了。

  B 端产品相较于 C 端产品,在设计理念、交互方式、视觉表现上面有很大的不同,B 端产品组件化、栅格化的需求相较于 C 端产品更为重要。

  网格系统确定前,首先要确定导航样式;常见的 B 端导航样式有 3 种:横向式、纵向式、横纵式。

  src=考虑维修系统的使用场景(办公室对操作效率、专注度有要求)、未来的内容承载力(不会很复杂,但也会增加导航)、复杂程度选择纵向式导航,进而去确定网格系统。

  建立网格系统之前,我们首先要了解市面上的主流浏览器的尺寸:1440*900、1366*768、1920*1080;1920*1080 多为 24 寸以上显示器,海外本土条件不允许,删除;最终选择占比较高的 1440*900。

  浏览器无高度限制,但我们在设计的时候尽量考虑在一屏内展示完全,去掉浏览器顶部导航占据的位置,剩余高度在 700~760 之间,间距(水槽)按 8X 像素、列数为网页版常用的 12C;依此来建立网格系统。

  src=注:具体采用多少列网格,可根据原型图来确定。基本结构在交互原型阶段可以大致出来,所以在绘制原型图的过程中也要认线. 色彩系统

  B 端设计非常依赖于设计系统,好的颜色定义,能帮我们设计出一些更加统一、舒适、层级分明、可读性强的界面。

  根据主色制作出 24 色带,进而提炼出 12 色带作为标准色,12 色带的提炼原则:将颜色相近的删掉,不符合品牌调性的删除,不符合产品性质的删除。网上有很多生成色板的网站,工作中为了方便可以直接在网站上生成。但小编希望大家能够理解色板的制作原理。

  色板包含 120 个有彩色 +12 个中性色,作用不同,使用情境不同。中性色主要被大量的应用在界面的文字部分,此外背景、边框、分割线. 文字

  我们的用户通过文本来理解内容和完成工作,科学的字体系统将大大提升用户的阅读体验及工作效率。

  关于字体默认使用系统字体,在设计时也可以提供一套我们的品牌字体,但字体要始终保持良好的易读性和可读性,体现了友好、稳定和专业的特性。个人建议浏览器默认字体就可以,无需费力去挑选合适的字体。字体的字号、字重、行高直接参照 AntDesign 的设计规范就可以。

  关于字重方面,以 regular 和 medium 的两种字体重量为主。

  关于文字颜色与背景色搭配时,要做到清晰可读,可在:测试,至少要达到 AA 的标准。src=

  图标是将某个概念转换成清晰易读的图形,以降低用户的理解成本,提升界面的美观度为目的。由于 B 端在设计中图标往往只占了很小的比重,在调用时也会被缩到比设计稿小很多倍的尺寸,设计时要注意简单、清晰、准确。因为屏幕分辨率的不同,没有规定最小操作热区。但受到文字(Chrome 浏览器中限制最小的字体为 12px)的限制,12px 渐渐成为大家公认图标操作热区的最小值。16px、24px、32px 都是 PC 端常见的图标尺寸。这里我们采用 48*48 作为图标的设计尺寸。由此可制作出 Keyline。

  Icon 的制作需保证 icon 的初始结构,采用点线面(圆、方、三角形)构成。不做夸张处理,在一致性方面:图标的一致性体现在对重复性元素的的管理、元素间的比例上面。

  6. 容器容器为全局样式中的一种类别,用于盛放不同组件(文字、icon 等)的载体,我们可以理解为 盒子 。常见的容器有:组件的背景、按钮的各种状态、消息反馈的提示等。

  阴影来源于现实生活的反映物体与物体之间距离。在 UI 界面中,我们往往通过模拟元素的投影来表示元素之间的高度距离与层次关系。有上、下、左、右四个方向,依靠 XY 的数值调整。

  阴影可根据不同的应用场景分为四种:默认投影、悬停投影、弹框投影、文字投影;根据不同场景设置不同的投影参数。Y 轴距离:文字


联系我们
联系人:足彩网
网 址:足彩网-官网
网站二维码
手机网站
Copyright © 2012-2021  足彩网-官网 版权所有足彩网  XML地图  足彩网-官网
足彩网