首页

兰亭妙微ui设计公司分享: iPhone Duo 登场|3 大核心要点,拆解折叠屏 UI 适配设计思路

清阳 行业趋势

兰亭妙微ui设计公司分享:iPhone Duo 正式亮相,本文不聊硬件参数,也不做选购分析。随着折叠设备市场占有率持续走高,折叠屏 UI 适配已经成为移动端设计师无法回避的课题。

image.png

近段时间,折叠新品密集发布:竖向折叠代表有 VIVO X Fold6、OPPO Find N6;大屏阔折叠阵营,也迎来华为 Pura X Max、Xiaomi 18 Fold 等新机。

image.png

过往安卓厂商虽持续迭代折叠产品,但对整个行业的带动作用相对有限。而苹果入局折叠赛道之后,局面将会彻底改变。依托苹果强大的品牌声量与用户基础,折叠屏的大众热度与市场普及度,将会迎来新一轮快速提升。

image.png

这就意味着,UI 设计师在项目前期搭建界面框架、制定设计规范阶段,就必须将折叠屏适配纳入考量,提前规划适配逻辑,避免后期返工。

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

 

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

FlowTune 智能工作流自动化平台 UI/UX 设计深度解析

丽洁 系统UI设计文章及欣赏

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

导读
从节点拓扑图、实时网络监控到多端协同,构建可视化的数字运维闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。
1.png

一、产品定位:先回答系统替谁解决什么问题

FlowTune 并没有把自己仅仅定位为一款简单的项目管理看板或待办清单工具,而是试图建立一个覆盖服务编排、网络性能监控与自动化运维的企业级工作流操作系统
  • 桌面端:承担全局洞察与复杂编排,通过宽幅画布展示完整的节点依赖关系和实时吞吐量图表,主要面向运维工程师与系统架构师。
  • 移动端:承接高频监控与即时告警,将复杂的拓扑图简化为关键指标卡片(Service Insights),强调在移动场景下对系统健康度的快速感知。
  • 核心价值:通过“Smart Automation”(智能自动化)理念,将抽象的代码逻辑和网络数据转化为直观的图形界面,帮助团队从“被动救火”转向“主动治理”。

2.png

二、信息架构:把功能转译为运维的逻辑顺序

信息架构围绕“系统现状—依赖关系—异常定位”展开。
  • 全局层(Desktop):首页以巨大的拓扑画布为核心,节点(Nodes)代表服务,连线代表数据流向。底部面板承载“TCP Throughput”(吞吐量)和“Service Overview”(服务概览),这种布局直接回应了运维人员“哪里堵了、哪里断了”的首要问题。
  • 执行层(Mobile):移动端采用卡片式布局,将复杂的节点聚合为“Radis-Master”、“US-east-lb”等服务模块。底部的时间轴(Time scale)允许用户快速回溯历史状态。
  • 反馈层:通过“System Usability Score”等内部评估模块,量化团队的协作效率,形成从“工具使用”到“效能提升”的闭环。

3.png

三、关键交互:从阅读日志走向可视化决策

交互亮点在于把枯燥的后台数据转译为直观的空间反馈。
  • 动态拓扑图:不仅仅是静态连线,而是通过颜色变化(如红色连线代表高负载或错误)和实时数值(150 kbps),让数据流向变得可感知。
  • 时间轴回溯:底部的时间滑块设计非常精妙,用户可以通过拖动滑块,像看视频一样回放系统在特定时间段(如12:50 - 13:10)的状态变化,极大降低了故障排查的难度。
  • 沉浸式概览:移动端的“Service Insights”采用毛玻璃效果,突出核心数字(如2756.50的提升值),配合简单的滑动交互,让用户在通勤途中也能掌握系统脉搏。

4.png

四、视觉系统:品牌表达必须承担技术语义

这套视觉系统极力避免传统SaaS软件的白底蓝字,转而营造“极客、深邃、未来感”的氛围。
  • 深色模式基底:大面积的深灰/黑色背景不仅符合工程师的审美偏好,更能有效降低长时间注视屏幕的视觉疲劳,同时让高亮的数据元素更加醒目。
  • 语义化色彩系统
    • 荧光绿 (#66FF4C):代表健康、通过、正常运行,作为主色调传递安全感。
    • 警示粉 (#FF518D):代表错误、中断或高危警报,在深色背景中具有极强的穿透力。
    • 科技蓝 (#2860EB):用于常规节点和信息展示,保持界面的冷静与专业。
    • 暖橙/灰 (#F68A02):用于警告或次要状态,形成清晰的层级。
  • 光效与质感:节点图标采用微发光效果,模拟服务器指示灯的物理质感,增强了界面的真实感和科技感。

5.png

五、面向产品与设计团队的可复用价值

对产品经理而言,最值得借鉴的是跨端体验的一致性策略:桌面端做“深”,提供无限画布和详尽参数;移动端做“精”,只提供结果和告警。两者共享同一套色彩语义和图标语言,降低了用户的学习成本。
对设计团队而言,要重点维护复杂信息的降噪处理。在展示成百上千个节点时,如何通过缩放、聚合、高亮当前路径来避免视觉混乱,是此类产品设计的核心难点。
6.png

六、专业审视:仍需补齐的体验边界

现有方案的主要风险是认知负荷过高。对于非技术背景的管理人员,密集的拓扑图和代码式命名(如 sdk-client-sip)可能难以理解。
  • 建议:增加“业务视图”模式,将技术节点映射为业务术语(如将 US-east-lb 显示为“美国区负载均衡”)。
  • 移动端局限:在小屏上展示拓扑图极易出现误触,建议移动端仅保留列表视图或极简的状态红绿灯,避免强行移植桌面端的画布交互。
  • 无障碍设计:高饱和度的荧光色在对比度上表现优异,但需考虑色弱用户对红绿状态的辨识,建议增加形状区分(如圆形代表正常,三角形代表警告)。

7.png

结语:设计的最终判断标准是效率与掌控感

FlowTune 展示了B端工具产品从“功能堆砌”走向“智能洞察”的路径:以可视化建立全局观,以自动化释放人力,以实时反馈维持系统韧性。真正决定这类产品成败的,不是界面有多酷炫,而是当系统报警时,用户能否在3秒内通过界面找到问题根源。
 

组件实战|兰亭妙微:全面解析弹窗提醒类交互设计

涛涛 交互设计及用户体验

弹窗与各类提醒浮层是移动端、B 端产品高频组件,兰亭妙微在项目落地中发现,很多体验问题来源于弹窗滥用,一需要强调信息就直接上强阻断模态弹窗,层层叠加,严重干扰用户操作。做提醒交互,核心是按照信息优先级选择对应组件,而非一概使用弹窗。

理论实战|兰亭妙微:读懂交互设计经典定律与用户体验地图

涛涛 交互设计及用户体验

在交互项目评审与方案设计中,成熟的设计定律可以帮助设计师快速判断方案合理性,而用户体验地图则是梳理全流程痛点的实用工具。兰亭妙微在政企、移动端项目实践中,会将二者结合使用,从理论落地到真实业务场景,提升整体产品体验。

Into 智能生育监测产品 UI/UX 设计深度解析

丽洁 移动端UI设计文章及欣赏

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

WechatIMG7780.png

导读
从激素数据可视化、硬件连接到科普教育,构建科学且温情的备孕支持闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。
 

一、产品定位:先回答系统替谁解决什么问题

Into 并没有把自己仅仅定位为一款记录经期的日历工具,而是试图建立一个覆盖激素监测、排卵确认与生育知识普及的家庭生育实验室操作系统
  • 移动端 App:作为核心数据载体,承接高频的试纸扫描、结果解读与周期追踪,强调“5分钟出结果”的便捷性。
  • Web 端/官网:承担品牌信任构建与深度教育,通过详尽的 FAQ、原理图解(如激素曲线)和价值观展示,解决用户对“在家测激素”准确性的疑虑。
  • 核心价值:通过“硬件+软件”的结合,将复杂的医疗级激素检测(雌激素、促黄体生成素、孕酮)转化为可视化的生育洞察,帮助用户从“盲目猜测”转向“数据驱动备孕”。WechatIMG7781.png

二、信息架构:把功能转译为备孕的科学逻辑

信息架构围绕“检测—解读—行动”展开。
  • 感知层:App 首页以“Fertility Chart”(生育图表)为视觉锚点,通过三条不同颜色的曲线直观展示激素变化趋势,确立数据的科学性。
  • 执行层:将“Scan”(扫描)按钮置于底部导航栏中心,作为最高优先级操作;官网则通过分步图解(Dip, Attach, Insert, Get results)降低硬件使用门槛。
  • 认知层:通过“Why measure Progesterone?”(为什么要测孕酮?)等科普模块,解释数据背后的医学意义,建立用户对产品专业度的信任。

WechatIMG7785.png

三、关键交互:从枯燥读数走向可视化洞察

交互亮点在于把抽象的生化指标转译为直观的图形反馈。
  • 动态曲线图:不仅仅是展示数字,而是通过平滑的贝塞尔曲线和色彩填充区域,清晰界定“易孕期”、“排卵日”与“黄体期”,让不可见的生理周期变得可见。
  • 即时反馈闭环:在扫描环节,App 界面模拟了试纸插入的物理动作,并在几秒内给出明确的“Peak”(峰值)或“High”(高)状态提示,减少用户的等待焦虑。
  • 引导式流程:官网的“How it works”部分采用卡片式分步引导,配合实物照片,让用户在购买前就能预演完整的使用体验。

WechatIMG7788.pngWechatIMG7789.png

四、视觉系统:品牌表达必须承担科学与关怀的双重语义

这套视觉系统极力避免传统医疗产品的冰冷感,转而营造“专业且温柔”的氛围。
  • 色彩心理学应用:主色调采用低饱和度的淡紫色与青绿色。紫色通常与女性健康、神秘感相关,而青绿色则传递医疗、科技与冷静的信号。两者的结合既保留了女性产品的柔美,又确立了医疗器械的专业感。
  • 留白与呼吸感:界面大量使用白色背景与圆角卡片,配合柔和的阴影,营造出干净、无菌但不刺眼的视觉体验,符合备孕人群追求安心、平静的心理需求。
  • 字体层级:关键数据(如激素数值、日期)使用粗体强调,而解释性文字则使用细体,确保用户在焦虑状态下也能快速抓取核心信息。

WechatIMG7790.png

五、面向产品与设计团队的可复用价值

对产品经理而言,最值得借鉴的是“硬件软化”的策略:通过 App 的易用性掩盖硬件操作的复杂性,用软件的价值感提升硬件的溢价能力。
对设计团队而言,要重点维护数据可视化的准确性与美观度的平衡。Into 的图表设计证明了,即使是严肃的医疗数据,也可以通过优秀的 UI 设计变得易于理解且令人愉悦,从而降低用户的认知负荷。
 

六、专业审视:仍需补齐的体验边界

现有方案的主要风险在于用户教育成本较高。虽然官网有详细科普,但 App 内的新手引导仍需强化,特别是对于第一次接触激素监测的用户,如何解释“假阳性”或“无峰值”的情况至关重要。
建议在 App 内增加更多场景化的文案提示(例如:“今天没测到峰值?别担心,试试明天同一时间再测”),而不仅仅是冷冰冰的数据展示;同时,考虑到备孕人群的敏感性,隐私保护条款应在显眼位置给予更温暖的承诺。
 

结语:设计的最终判断标准是信任与希望

Into 展示了生育科技产品从“工具”走向“伙伴”的路径:以硬件获取精准数据,以软件提供清晰洞察,以设计传递温暖陪伴。真正决定产品成功率的,不是传感器有多精密,而是用户在面对复杂数据时,是否能感到被理解、被支持,并对未来充满希望。

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微ui设计公司分享:AI 做不出来的复杂组件该如何设计?吃透这 6 个核心方向就够了

清阳 行业趋势

兰亭妙微ui设计公司分享:随着 AI 绘图能力飞速迭代,很多界面效果它都能快速生成。但适配国内业务场景的高阶 UI 组件,AI 往往很难交出合格答卷,国外设计师直接上手也容易水土不服。

这并不是工具本身的局限,更多是国内 UI 从业者的能力缺口:如果缺少复杂组件的设计能力,很难承接进阶业务需求,也达不到大厂岗位的能力要求。本文将结合实操案例,拆解组件的基础逻辑与进阶设计方法论,帮你补齐 AI 无法替代的核心竞争力。

一、分清两类组件:标准化基建 vs 自定义创作

UI 界面里的组件可以分成两大类别:

image.png

  1. 标准化基础组件:拥有成熟命名与固定范式,属于界面基建。像瓷片区、弹窗提示、动态卡片、用户列表、底部导航栏都属于这一类,设计时更多是遵循规范临摹落地。
  2. 自定义特殊组件:没有统一命名、没有固定样式,例如专题活动模块、会员卡片、排行榜、横向运营列表等。

真正考验设计师能力的,就是这类无固定模板的组件设计。没有现成参考,需要自主做判断、构思与创作,也是新手进阶路上最大的难关。

 

想要提升组件设计能力,可以分成三步:

image.png

  1. 收集归类:大量收集优秀组件案例,整理到 Eagle、花瓣等素材库,拓宽设计眼界;
  2. 掌握基础框架:吃透组件底层排版框架,守住界面视觉下限;
  3. 积累视觉细节手法:学会丰富画面表现,完成高阶创意表达。

守住视觉下限:简约基础组件设计要点

简约不等于简单,基础组件决定页面的底线效果。即便没有花哨特效,只要做好下面几点,界面就不会翻车:

  • 合理完成内容元素排版,信息层级清晰;
  • 把控好元素尺寸、字号,参数统一规范;
  • 内外间距设置合理,留白克制有序;
  • 选用高质量、风格统一的图标与图片素材。

底层逻辑:把各类元素,以正确的尺寸、间距摆放到对应位置,再搭配合适的素材。 如果基础排版、间距、尺寸没有处理到位,再堆砌特效、图形、创意,只会让页面更加混乱。

image.png

文中以山姆会员页作为修改案例:改版前页面特效繁杂,但元素尺寸混乱、间距失控。先剥离花哨样式,校准间距、字号、布局,输出简约版本。优化之后,即便不加任何装饰,页面已经达到合格水准,信息清晰整洁。

二、组件进阶设计:6 大突破方向(逆向设计思维)

image.png

国内互联网产品竞争的核心之一,是争夺用户注意力。朴素的基础组件容易平淡,运营类页面就需要打破常规,做出更抓眼球的效果。

进阶设计的底层是逆向思维:先吃透标准的设计规则,再有意识打破固有范式;前提是基础能力过关,否则你都不知道自己在打破什么规则。image.png

一共 6 个常用进阶手法,可以单独使用,也可以组合叠加到同一个组件中:

1. 边缘轮廓的异形处理

image.png

不局限于标准直角矩形,对卡片轮廓做改造:局部增加弧度、边角切斜、边缘做凹陷、折叠缺口等,打破死板的方框感,制造形态趣味。

案例:将会员卡片外层矩形做缺口折叠造型,跳出常规卡片形态。

2. 特殊字体标题的应用

image.png

标题放弃普通系统字体,选用风格化的定制标题字、品牌 VI 字体,强化主题氛围感,让标题信息更加醒目突出。

3. 悬浮标签 / 图标元素应用

image.png

打破横平竖直的布局约束,让标签、小图标悬浮、轻微旋转,部分元素溢出卡片边界,制造视觉冲突感。

案例:开通会员按钮外侧增加气泡悬浮标签,展示 “低至 0.72 / 天” 优惠信息,不侵占按钮内部空间。

4. 镂空突出的图片元素

image.png

把图片 / 图标主体抠出,让图形突破容器边界,不再完全被矩形、圆形框死,营造更强空间层次感。

5. 渐变和图片背景应用

image.png

跳出纯色背景的局限,使用精致渐变、低透明度背景图叠加。拒绝简单双颜色粗暴过渡,也不直接硬贴摄影图;通过色彩、蒙版、透明度叠加,打造细腻的背景氛围。

6. 特殊视觉效果的添加

image.png

适度增加质感特效提升表现力:毛玻璃、玻璃拟态、轻拟物、2.5D、水晶质感、高光模糊等。

注意:特效是加分项,切忌滥用堆砌,优先保证信息可读性。

实操示例:山姆会员卡片完整进阶改造,依次叠加:异形轮廓→品牌标题字体→悬浮优惠标签→突破容器图标→渐变背景 + 底图→毛玻璃 + 轻拟物高光,完成从朴素模板到高级运营组件的完整升级。

三、高效训练方法,快速提升组件能力

想要熟练掌握以上手法,最快路径就是:收集→归类→临摹

  1. 收集:广泛搜集各类优秀组件,积累素材库,见识足够多的表现形式;
  2. 归类:按照组件类型、表现手法建立素材分组,建立自己的设计资料库;
  3. 临摹:挑选优质案例复刻,在实操中理解布局逻辑,把技巧内化成自己的能力。

 

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微ui设计公司分享:新手引导别乱做!牢记5种常用模式和4个新手引导设计原则

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:新手引导不能只停留在“教操作”的层面,更得想办法留住用户,让他们愿意一直用下去。今天就来聊聊,如何设计新手引导体验,确保产品能获得用户认可~
 
一、 5种新手引导界面模式


①欢迎提示image.png

②分步提示

image.png


③气泡提示

image.png


④弹窗提示

image.png


⑤漫游式引导

image.png


 
二、4种新手引导类型

image.png


①强制式引导

image.png


②可选式引导

image.png


③渐进式引导

image.png


④沉浸式引导

image.png


 
三、4个新手引导设计原则

image.png


①尽快让用户get到核心功能点
②尽量减少用户负担

image.png


③鼓励用户在自己的节奏里熟悉产品

image.png


④分析使用路径,找对引导时机
 
新手引导不仅仅是介绍功能,更是帮助用户“适应”产品的过程。新手引导体验的核心目标是让用户自然学习逐步了解核心功能,不打断使用流程,更不会感到“学习过程”的负担。

 

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

实战总结|兰亭妙微:移动端交互设计十大核心原则

涛涛 交互设计及用户体验

交互设计本质,是结合用户心理模型与业务逻辑,把产品需求转化为用户易于理解的操作路径,平衡商业目标与用户诉求。兰亭妙微在大量移动端、B 端项目落地过程中,总结出十条高频实用的交互原则,指导团队日常设计评审与组件输出。

兰亭妙微ui设计公司分享:刷视频为什么停不下来?拆解 4 种成瘾交互套与 3 条良性设计原则

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:临睡前拿起手机刷短视频,明明只打算看几条就休息,一晃眼一两个小时已然悄然流逝。为什么我们总是会陷入 “越刷越停不下来” 的困境?短视频产品背后,藏着一套精巧的交互心理逻辑。本文拆解 4 种极易让人沉迷的交互手段,同时探讨回归用户本心的良性设计思路。image.png

一、让人不知不觉沉浸其中的 4 类典型交互

滑动翻页、下拉刷新、等待加载…… 很多时候我们完成这些操作几乎不需要思考。这些被精心打磨的交互机制,持续攫取用户注意力,诱导我们无节制地使用产品。

1. 无限滚动

image.png

 

无限滚动移除页面末尾边界,依托算法源源不断推送新内容,只要持续上滑,就永远有新的信息流呈现在眼前。

这种设计广泛应用于短视频、图文 Feed 流。它会催生用户害怕错过的心理,让人不断期待 “下一条会更有趣”。省去手动翻页的同时抹除结束节点,驱动用户不间断消费内容,时间就在无意识滑动中消耗殆尽。

2. 自动播放

image.png

看完一条视频自动接续播放下一条,表面上简化操作,省去手动点击播放的步骤。但本质上,在你尚未做出 “要不要继续观看” 的判断前,产品已经替你做好选择。

用户被动进入连续观看的循环,很难主动抽身。除此之外,视频片尾推送「更多相似内容」,也是一套拉长退出时长的设计技巧。

3. 下拉刷新

image.png

下拉刷新最早诞生于海外社交平台,初衷是便捷获取最新资讯。但如今该功能被过度运用,演化成一种行为习惯。

如同无限滚动,用户形成肌肉记忆,会反复下拉页面,期待刷新出意料之外的新鲜内容。这种不可预测的惊喜反馈,不断勾住用户反复操作,很难主动停下。

4. 点赞评论、消息通知的红点反馈

image.png

社交产品随处可见的 “99+” 徽标红点,总会勾起人的点开欲望。

红点徽章的原始作用,是提醒用户不要遗漏重要消息。但过量红点会带来无形心理负担,制造 “还有事情没有处理” 的压迫感,催生焦虑,驱使用户反复点开 App 查看消息与互动。image.png

优化参考:部分产品已经给出解决方案,例如一键清空全部未读红点;微信支持仅接收好友互动提醒,过滤无效红点干扰。

二、交互功能的两面性:便利与 “暗黑模式” 一线之隔

image.png

交互设计的内核,是通过心理引导改变用户行为。但一旦越过边界,剥夺用户自主选择权,迫使用户进行无意义重复操作,就不再是优质体验,而属于暗黑模式(Dark pattern)—— 即刻意误导、操控用户决策的设计手段。

表格

功能 正向价值 越界带来的负面体验
无限滚动 实现不间断浏览内容 没有终点,难以主动停止
自动播放 降低用户操作成本 被动播放不感兴趣的内容
下拉刷新 快速获取更新内容 养成无意义反复刷新的习惯
通知红点反馈 高效传递重要信息 频繁提示,操控用户行为

实用设计和诱导套路的边界十分模糊。当产品一味追逐用户停留时长,疯狂推送海量相似内容,而非帮助用户主动挖掘高质量内容时,就会出现这种现象:刷了很久内容看似热闹,放下手机却毫无收获,时间白白耗费。

不少业务把播放量、点击量、在线时长作为核心考核指标,倒逼产品想方设法留住用户。但短期亮眼的数据,往往和长期用户体验互相冲突。只追求把用户 “耗在产品里”,长远会消耗用户信任,损害品牌口碑,最终反而流失用户。真正好的产品,应当着眼长期用户价值。

三、回归本心:3 条良性引导的设计原则

image.png

 

image.png

① 设置终点,交还用户决策主动权

可以为 Feed 流设计明确的结束节点。对比永无止境的无限滚动,拥有边界的内容流,更利于用户聚焦内容本身,提升内容可信度,让用户拥有主动退出的选择权。

② 适度反馈,拒绝过载刺激

适度反馈能够鼓励用户互动;可当消息、徽章反馈给用户带来焦虑疲惫,就应当调整设计,避免反馈泛滥。

③ 多一份真诚,少一点套路

通知、内容推荐应当以有效信息传递为核心,减少情绪化营销话术。类似 “再不看就过期”“错过就亏了” 这类套路,短期可以提升点击率,长期只会消耗用户好感,引发反感。

 

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微ui设计公司分享:B 端产品如何做好移动化设计?实战经验总结

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:随着移动互联网全面普及,B 端业务早已不再局限于 PC 桌面端。如何做好 B 端产品移动化改造,真正匹配业务人员真实诉求,是很多产品与设计师需要面对的课题。本文将以门店通 —— 汽配门店管理系统为实战案例,梳理 B 端产品移动化完整设计思路与落地方法。

一、B 端产品移动化的时代背景

image.png

移动办公已经成为主流工作模式。根据艾瑞咨询相关行业报告,截至 2021 年 6 月,国内手机网民规模达 10.07 亿,占全体网民比例 99.6%。用户使用习惯的变迁,倒逼 B 端服务从桌面端向移动端延伸。

传统 PC 办公受地点、设备约束,很难满足随时随地办公的现实需求。而 B 端移动化的核心价值,就是以轻量化能力,打破时空限制,帮助企业降本增效,让业务人员可以随时随地完成工作。

但这里有一个关键认知:B 端移动端不是 PC 页面的简单缩小复刻。PC 端依靠大屏、键鼠,擅长处理复杂报表、批量配置、高复杂度业务;移动端优势在于灵活便携,适合碎片化、即时性业务。B 端移动化,应当聚焦高频的「查看信息」和「简易业务处理」,复杂权限校验、多步骤深度配置、海量报表处理,依旧留给桌面端完成。

B 端业务两大核心场景:查看与处理

image.png

抛开行业差异,绝大多数 B 端工作流程,都可以归为两类基础场景:查看信息、业务处理

  1. 查看:获取业务数据、读取业务状态,常见形式为表格、图表、数据面板、业务模型,帮助用户掌握经营、生产、销售等各类信息。
  2. 处理:完成业务操作,对应增删改查、流程审批、基础配置、数据分析等动作。

以汽配门店举例:管理者查看门店经营营收数据,员工查看生产工单信息;获取信息之后,二者再根据业务需要执行对应的业务操作。

二、B 端移动化四大核心设计原则

结合门店通项目实践,我们将 B 端移动端设计拆解为 4 大原则:保持一致、聚焦核心、保证易用、个性化适配

原则 1:保持一致 —— 多端体验协同,而非简单复制

image.png

一致性不等于直接照搬 PC 端界面框架。真正要调和的,是大屏 vs 小屏、键鼠 vs 触控、两套用户心智模型之间的矛盾,从视觉、交互、体验三个维度实现多端对齐。

  1. 视觉一致:守住品牌基因 保证 Logo、品牌色、字体、文案规范统一,强化品牌感知,提升用户信任感。 门店通以黄色作为主品牌色,移动端延续这套视觉体系;业务组件采用白、浅灰作为基底,品牌色做局部点缀;保留业务功能图标,在保证识别性前提下降低设计成本。image.png
  2. 交互一致:相同场景,相同结果 遵循尼尔森可用性原则中的一致性标准:相同业务场景,操作逻辑、输出结果保持统一。 门店通订单完整流程为「开单 > 施工 > 完工 > 质检 > 结算」,无论 Web 端还是移动端,业务流转逻辑完全不变。移动端受屏幕限制,会隐藏弱化非关键字段,但订单状态文案、核心操作按钮,和 Web 端完全对齐,避免用户跨端产生认知割裂。

    image.png

  3. 体验一致:尊重平台原生操作习惯 页面结构不必强求一模一样,但要适配设备原生交互范式。 Web 端空间充足,使用侧边导航平铺全部菜单;移动端空间有限,遵循手机系统设计规范,把功能归类收纳到「更多」模块。功能归类逻辑和 Web 端保持统一,同时适配移动端用户的使用习惯。

    image.png

原则 2:聚焦核心,做信息重构与层级强化

 

移动化切忌全盘搬运 Web 端功能。需要回归移动端真实使用场景,筛选高频核心能力,做信息重构。

① 信息重构:精简单页信息量

image.png

PC 大屏可以平铺全部字段,移动端用户很少主动翻阅屏幕之外的内容。核心信息必须做到一屏可见。

  • 非必要字段折叠收纳,放在「更多信息」内,减少页面信息噪音;
  • 字段数量过多时,使用步骤条拆分长表单,分步完成操作。

门店通表单录入场景,将次要信息折叠收起,避免表单过长带来的视觉压力,简化填写流程,提升操作效率。

② 信息突出:建立清晰信息层级

image.png

筛选完信息之后,还要区分信息优先级。利用字号、颜色、权重,把用户最关心的内容凸显出来。 以订单详情页为例:Web 端可以平铺全部字段;移动端优先强化订单状态、订单金额、核心车辆信息,次要信息弱化展示,降低用户信息获取成本。

原则 3:保证易用,适配移动场景的特殊条件

移动办公常常伴随单手操作、环境嘈杂、网络不稳定等现实情况,设计需要充分包容这些极端场景,从操作、输入、反馈三方面优化体验。

① 操作便捷,适配单手触控

image.png

根据移动设备握持行为研究,手机底部与中部是拇指舒适操作区。重要操作按钮、高频控件,尽量放置在拇指可轻松触及的区域;把低频危险操作放在难触达的顶部区域。

② 尽可能减少手动输入

image.png

手机虚拟键盘输入效率远低于键鼠,设计要尽可能降低打字输入。 可以采用这些方案:扫码录入、选择器、滑块、步进器、关键词模糊联想匹配,用点选、扫描替代手动打字,减少输入负担。

③ 及时响应与状态反馈

image.png

用户操作后需要得到明确反馈,理想情况下操作反馈控制在 100ms 以内。移动场景还要考虑弱网、加载卡顿问题。

  • 过渡反馈:骨架屏、加载动画,缓解用户等待焦虑;
  • 结果反馈:Toast 提示告知操作成功失败;高危操作使用弹窗二次确认;
  • 兜底状态:设计空页面、异常缺省组件,应对无数据、网络异常等场景。

原则 4:个性化设计,匹配不同角色用户

B 端产品一个设备往往对应多角色账号,管理者、一线员工关注的数据、功能完全不一样,需要做权限与使用习惯的个性化。

  1. 内容个性化:按角色权限分发数据 门店通首页数据面板,根据账号权限展示不同指标:

    image.png

  • 门店管理者:查看营收、结算金额等经营类指标;
  • 一线员工:只展示进厂、出厂、工单等生产类数据; 员工个人中心还可以查看个人绩效、提成统计,做到千人千面。
  1. 行为个性化:支持用户自定义配置 面向付费门店,开放首页九宫格功能入口编辑权限。不同岗位员工,可以把自己高频使用的功能置顶,调整功能排序,适配个人工作习惯,进一步提升工作效率。

    image.png

三、拓展:发挥移动端独有优势,补充 PC 端短板

移动端除复刻业务能力之外,还可以利用手机硬件、生态能力,补足桌面端的局限。

1. 硬件能力拓展

image.png

充分调用手机摄像头、GPS、蓝牙、推送、相册等硬件能力:

  • 扫描车牌,自动识别车辆档案;
  • 拍照上传施工、接车过程照片留存业务凭证;
  • Push 推送,实时推送新订单、工单变更提醒。 这些能力是 PC 端很难便捷实现的。

2. 生态联动拓展

image.png

打通软硬件与第三方生态,实现场景联动:

  • 硬件:连接蓝牙打印机,现场完成电子签字、单据打印;
  • 软件生态:系统消息推送、微信公众号、小程序联动;顾客可以通过小程序查看车辆施工进度,接收保养提醒。

写在最后

B 端移动化不是把 PC 功能照搬到手机上,核心是取舍与适配:分清哪些业务适合移动端,哪些依旧留给 PC;在多端保持业务逻辑统一的前提下,针对小屏触控场景重构信息与交互;同时善用手机硬件与生态,创造桌面端无法实现的业务价值。

 

 

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

日历

链接

个人资料

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

存档