当前位置: 首页 > 科技观察

B端产品如何做移动端设计?我总结了这个实践经验!

时间:2023-03-13 22:32:39 科技观察

在移动互联网高速发展的今天,如何让B端产品在移动的时候更好地满足用户的需求和期望?本文小编将以“点点通-汽配店管理系统”为例,对B端产品动员的设计思路进行分析总结。移动化趋势随着移动场景常态化,ToB服务不再局限于桌面设备,越来越多的服务商投入移动场景的赛道。一方面,这是基于人们上网习惯的改变。根据艾瑞咨询《2021年中国综合移动办公平台行业研究报告》,截至2021年6月,国内手机网民规模为10.07亿,占全部网民的99.6%。在一定程度上,习惯驱动服务提供商从桌面端向移动端转移;另一方面,传统桌面场景受限于固定的工作地点和时间,难以满足用户高效办公和协作的诉求,而移动性则既能满足用户轻量化的需求,又能随时随地进行业务操作。也帮助企业降低成本,提高效率。ToB服务工作场景拆解B端产品的最终目标是满足用户日常工作管理需求,帮助企业提高工作效率,降低使用成本,维护数据安全。虽然不同的B端产品服务于不同的行业和用户,但从工作流的角度来看,大致可以分为两类场景:“观看”和“处理”。“查看”是了解信息并提取可用数据。数据一般以图表、表格、面板等形式展示,大部分产品倾向于更垂直或更专业的数据模型。“处理”是为了解决业务流程和问题而进行的操作,如增、删、改、查等。无论是什么行业、什么职位、什么权限,用户都离不开这两种场景。以汽配店的日常运营为例,店长通常关注运营层面的数据,而员工则关心当前的生产信息。操作。定义B端产品移动桌面端的优势在于屏幕的输出效率和键盘鼠标的输入效率对数据和报表的浏览以及专业复杂工作的处理更加友好;移动端的优势在于不受固定办公地点和时间的限制。,设备数量的限制在移动办公场景中非常有优势。随着移动互联网和移动应用在功能、设计、体验等方面的日益成熟和易用性,人们将越来越习惯于使用移动设备来完成目标和解决需求。移动端基于B端产品,更多的是以轻量级的体验满足“用户”,专注于“看”和“处理”的场景。而不是处理和解决各种涉及权限、多次验证确认、复杂操作、复杂报表的工作。B端产品动员的设计思路1、保持一致性。一致性并不是简单地复制和统一交互框架和视觉风格。其实需要对齐的是两种使用场景的体验。中间是调和小屏和大屏的矛盾,触摸操作和键鼠操作的矛盾,两种不同心智模型的矛盾,下面将从三个维度来探讨一致性的思路视觉层、交互层和体验层。“视觉层”在移动端设计时首先要保证品牌的统一性。徽标、字体、品牌颜色,甚至文案规范都需要严格保持一致。保证品牌的统一性,有利于塑造品牌形象,增强用户对产品的信任度。视觉风格上,在手机设计上延续了点点通以黄色为主的品牌基调。在配色方案的尝试过程中,设计策略是将纯白色和浅灰色作为常用业务组件的打底,使用黄色或扩展色作为局部点缀。同时,部分页面保留大色块背景的使用,在突出品牌基调的同时增强对比度,保证信息的易读性。另外,在移动端预留了与功能业务相关的图标,在不影响识别度的情况下,大大降低了设计成本。《交互层》JakobNielsen在1994年提出的十大可用性原则,其中的原则Consistencyandstandards(一致性和标准化原则)是这样定义的,“相同的术语、功能和操作是一致的”。在此基础上,多端设计也是适用的,即同一场景下每一端的操作应该得到相同的结果。无论是复杂的桌面场景还是灵活的移动场景,在关键节点采用一致的设计原则尤为重要;基本订单流程按照“开票>施工>竣工>质检>结算”的路径进行操作。员工只需要在不同的节点上进行相应的操作;移动端受限于屏幕显示,通常需要更加关注订单的关键信息和状态。在移动设计中,不必要的订单信息将被弱化或省略。相同状态场景下,文案、业务功能的操作与WEB端一致。“体验层”虽然我们追求跨多个终端的统一用户体验,但每个终端的操作场景差异很大,用户在不同的平台上形成了不同的操作习惯。对比点门通网页端和移动端界面,虽然两端的页面结构并不一致,但也符合平台用户的操作习惯。以导航为例,在展示面积足够大的WEB端,侧边导航结构可以保证所有层次菜单平铺,让用户选择功能更加直观。移动设计需要遵循不同操作系统的规范,小屏幕需要关注信息。“更多”界面的设计通过功能项的分类与WEB端统一。2.聚焦核心移动性,不是一味照搬WEB端的功能和内容,而是了解用户在移动场景的重点诉求是什么,聚焦核心功能点进行设计,再扩展到其他次要的功能点功能。对于信息的展示和排版,我们从以下两个维度去思考:“信息重构”在WEB端有足够的屏幕空间来向用户展示所有的内容,而在大多数情况下,移动场景下的用户很少会主动浏览网页以外的信息。屏幕。对于移动设计,核心内容必须在一个屏幕上对用户可见。因此,我们需要控制单个页面内的信息量。对于一些对核心流程影响不大的领域或单元,可以尝试在流程中弱化,或者通过一定的交互成本来展示;如果必填字段较多,也可以尝试使用步骤条一步步操作界面;在入口场景中,我们通常的做法是在“更多信息”中隐藏非必要的字段。一方面避免了因表格过多需要用户滑动查看而带来的视觉焦虑。另一方面减少了不必要信息带来的干扰,简化了录入流程,保证了用户在移动场景下可以更快速的完成操作。.“Informationprominence”在讨论信息重构时提到需要控制移动端页面的信息量。但是页面上的信息少就够了吗?其实除了筛选信息,还要考虑信息的展示形式。对于用户更关心的信息,可以通过字体大小、字体颜色等风格差异,让信息具有更明显的优先级;通常订单详情页面会携带大量业务所需的信息。在WEB端,由于屏幕空间足够,大部分信息(当然个别重要的字段和内容也会有特殊的样式标注)基本都是平铺状态显示。在移动端设计中,需要考虑信息的一级和二级,重点关注用户关心的订单状态、金额等信息,通过加强这些字段来降低用户的获取成本。3、保证易用性在设计移动端时,我们需要将用户的思维加载进去,通过合适的设计引导用户,让用户在移动端场景下拥有和WEB端一样高效的体验,克服各种“特殊”情况。例如:极端场景的容忍度、异常状态的反馈等等……为了实现这个目标,我们从以下思路出发思考:“Easytooperation”StevenHoober列举了多种方式让用户握住手机本书中的设备《移动应用界面设计》通过一系列的研究,指出当用户单手操作手机时,页面的底部和中间是最适合操作的区域。因此,有必要尽量将最重要的UI控件放在拇指可触及的范围内;此外,他还表明移动用户更喜欢垂直居中的信息布局,无论是阅读还是与内容交互。考虑到用户的使用场景和移动办公的需求,在移动端设计中应尽可能应用这一原则,将页面的主次操作或重要内容放置在页面底部或其位置用一只手握住设备时易于操作。中间区域。“减少输入”移动设备上的按钮更小,与通过键盘和鼠标输入的桌面设备相比,太长的信息输入会导致用户体验差,反馈更差。为移动设备设计时,您需要始终考虑“是否可以减少输入?”。在很多场景下,我们为用户提供新建/编辑权限。当用户通过移动设备输入信息时,考虑到当前场景,我们尽量减少虚拟键盘的输入频率,转而使用滑块、步进器、选择器等组件;同时,对于一些表单,当用户开始输入关键词后,系统可以进行判断并给出合理的建议等,减少触摸输入带来的不便。“及时响应和反馈”RobertBMiller在《人机对话的响应时间》一书中指出,“对于用户动作直接触发的反馈,理想的响应时间应该控制在100毫秒以内。”当用户完成操作时,系统没有及时甚至相应的反馈提示,会给用户带来疑虑(现实模型与心智模型冲突),使用户不确定自己的操作是否执行,是否执行是否成功等。另外,在移动端场景下,由于沟通不畅导致内容加载不及时或页面跳转等问题,很容易引起用户的焦虑;这些链接中的任何一个都可能影响产品的用户体验。在移动设计过程中,我们主要关注过渡反馈和结果反馈。转场反馈是通过常见的转场组件给用户反馈,比如在内容加载前在界面中显示一个“框架”(骨架屏),让用户在心理上感受到加载速度的提升,从而减少他们的焦虑;结果反馈是将操作结果告知用户。考虑到点点通业务流程中各个节点的衔接顺畅,每个关键节点操作的反馈都需要通过Toast或Dialog弹框提示用户二次确认。4.个性化通常在同一个商店有多个移动设备,并根据不同的角色分配多个帐户。在移动设计中,需要考虑个人需求和场景,思考用户关心的内容展示。可以是根据权限来区分内容,也可以是结合算法展示个性化的内容,也可以是用户根据自己的喜好来展示内容。个性化配置使用习惯,确保为用户提供最关心的内容,提升用户体验。“内容个性化”手机首页的数据面板会根据角色的权限不同,看到的数据指标也会有所不同。店长可以查看当天的经营数据(往往与收支金额相关),可以通过点击事件进入相应报表,了解近期门店经营、收支状况;而普通员工只能看到商店当天的生产数据;此外,员工可以在个人页面获取和查询自己近期服务数据的汇总,了解一个周期内的绩效和薪资情况。「行为个性化」StoreLink为付费商店提供8大类62余项细分服务。首页功能入口是最暴露的区域之一,我们已经开放了该区域的配置权限给用户。由于工作类型和角色的不同,不同职能的员工在日常生活中使用频率也不同。用户可以根据自己的工作习惯在首页编辑功能入口(九宫格),提高工作效率。除了满足用户灵活办公使用的需求外,移动化的其他拓展还需要考虑如何在产品设计上充分发挥移动终端的特点和优势,弥补桌面场景下用户体验的不足。以下是在保证业务需求的前提下,对部分功能的移动化特性的探索:1.硬件扩展移动化设计需要结合硬件特性,充分利用移动设备的硬件基础,如录音、拍照、录影、蓝牙、wifi、LBS、NFC、GPS、重力感应、推送推送、定位精准等,打破桌面工作场景相对固定的局限。汽配店的日常运营需要通过照片、视频等流媒体记录业务流程的每一个节点。使用移动设备,文员可以直接通过设备拍照并上传取车、施工等节点流程;或扫描车牌,快速识别客户车辆信息。这些都在一定程度上扩展了应用场景,弥补了桌面场景的不足。2.生态拓展移动生态可以是硬件产品,也可以是关联的第三方应用。结合生态可以实现很好的场景联动。一个常见的例子是利用硬件系统内置的推送机制,将重要信息推送到门店,让员工无需启动App即可实时收到重要信息和订单更新;还可以连接打印机,让客户在设备上签到,快速打印结算单据等……或者使用第三方应用(如微信)向客户发送客户维护提醒;客户还可以通过小程序等实时查看车辆当前施工进度。