首页

兰亭妙微|用户体验设计・支持可用性的交互设计原则

涛涛

可用性是衡量产品体验与交互设计是否成功的核心指标。兰亭妙微作为专业设计机构,在移动端与 PC 端产品设计中,始终以可学习性、灵活性、鲁棒性为底层框架,将可用性原则落地到每一个交互细节,让产品更易用、更好用、更耐用。

B端表单设计|标题样式细节设计

清阳

B端系统软件中表单的应用场景非常多,今天兰亭妙微UI设计公司,就捞点干货,说说B端产品表单如何设计,用户体验会更好。

从标题、输入框、布局排版、数据展示四个方面,详细介绍一下关于表单的体验设计,目录如下:

一、标签是否加冒号

设计师A说:不加冒号,用户不在意,而且占空间…..

设计师B说:要加冒号,加上可以更好的区分上下文,以及标签和输入框的关系…..

以上A/B设计师说的都有一定的道理,那到底加不加冒号呢?

遇到问题咱就先调研一波,看一下Win、Mac系统中是否有无冒号。

Win系统:最新版本不加冒号。

Mac系统:最新版本设计偏向C端化,不加冒号,13.0.1之前版本有冒号。

是不是感觉主流的设计是不加冒号呀?

稍等一下…那在具体B端系统中是有怎样的应用场景呢?

以上场景中左右布局,单选/多选组件、标题加内容组件都不适合去掉冒号展示。

那到底加不加冒号呢?

可以先说一下答案,加不加冒号对用户无影响,《Web 表单设计·创建高可用性的网页表单》中,卡罗琳·贾雷特做过大量测试,最终证明没有一名用户留意表单冒号是否出现。

因此,得出以下建议:

  • 如果你希望系统重表单使用更多的业务场景和对齐方式,请使用冒号
  • 如果你当前已使用有冒号的表单,请保持使用冒号

如果你新建一个系统,使不使用冒号随意一旦决定是否使用冒号,需要全部表单统一规则  

二、表单必填样式

用户填写表单时,有必填项和选填项,如果表单中多数或全部是必填项,那是否还应该对其标记?

答案是肯定的,用户遇到较多表单填写项时,是需要通过必填标记来评估工作量。下面就介绍一下具体标记必填项的三种样式。

① 顶部统一提示

填写表单过长或填写表单被打断(移动端常见),就会增加用户工作记忆和认知负荷,完成任务更加困难,从而降低了用户体验。

② 文字提示“必填”

有部分设计师认为红色“*”会增加视觉噪音,并且重复的红色“*”会带来一些认知恐慌,便采用文字提示方式,但这种方式比较占用空间,文字内容过长,用户压力较大,用户体验降低,不建议使用。

③ 红色星号“*”必填提示

虽然有设计师认为红色“*”会增加视觉噪声,带来一些认知恐慌,但红色“*”在互联网中很常见,用户熟知其意,已形成固定的视觉语言,并且空间较小,能与标签文字足够区分开,相比之下采用红色“*”必填提示是非常值得推荐使用。

但是还有一个问题,就是红色“*”的位置是在字段前还是字段后呢?

红色“*”的具体位置有三种位置,如上图做了详细展示。

  1. 标题左侧:比较常见,用户打眼一看就能区分出必填项,推荐使用;
  2. 标题右侧:比较常见,多配合无号码使用;
  3. 输入框右侧:现有系统较少使用,由于输入框形式、长度不统一,会导致难以浏览和判断,不推荐。是否可标记可选字段?

这不是强制性的,但标记可选字段非必填,确实减轻了用户思考,提升用户体验。  

三、提示样式

用户最理想阅读的标题文字数是7±2,当标题文字过长,或不足对输入项准确说明时,要给出对应的提示文字,帮助用户更好的输入内容,常见样式如下。

这三种样式是递进逻辑,根据不同的文字提示内容和难度,选择不同的提示样式。其中对于第二种样式中,图标提示的位置还有几种方式,如下图说明。

四、小结

本文事无巨细的说了一下表单中标题样式问题,虽然很多是表单设计的一些较冷较小的内容,但也需要设计师沉下心来,打磨细节之处。

转载:人人都是产品经理

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

 

image.png

兰亭妙微设计|UI 设计必须死抠的细节(原创干货)

涛涛

很多 UI 设计师软件熟练、审美在线,但产出总不够精致、不够专业、开发落地差,核心原因就是:细节没抠到位。

兰亭秒微|UI 设计进阶:用好留白,让界面更有表现力

涛涛

在兰亭秒微的 UI/UX 设计体系里,留白不是 “空着”,而是提升质感、聚焦信息、优化体验的核心手段。优秀的留白设计,能在简约风格与功能可用性之间达到完美平衡,需要长期实践与经验沉淀。

兰亭秒微 UI 设计进阶:以用户为中心的设计 —— 两本经典方法论解析

涛涛

作为专注 UI/UE 设计与用户体验优化的专业团队,兰亭秒微在工业软件、医疗设备、能源监控、企业信息化等领域长期实践,始终以以用户为中心为设计核心。本文将结合兰亭秒微项目经验,提炼《用户体验要素》《简约至上》两本经典书籍的核心观点,为产品设计与体验升级提供系统化理论支撑。

UI 设计中的用户体验设计|兰亭妙微设计实战全解

涛涛

设计师遇到瓶颈,最好的破局方式,是跳出纯视觉审美,回到用户体验本质,重新审视需求、场景、行为与感受,用科学方法做有依据、可落地、能产生价值的设计。

UI 设计中色彩理论与实用调色板指南(原创完整版)

涛涛

颜色是视觉感知的核心,不同波长对应不同色彩,而每个人对色彩的感受,又受视觉能力、文化背景与使用场景影响。

兰亭妙微|认知与设计:以用户心智模型打造高效易用 UI/UX

涛涛

作为专注 UI/UX 设计与数字化体验升级的专业团队,兰亭妙微在工业软件、医疗设备、能源监控、航天军工等领域长期实践中,始终以认知科学为底层逻辑,把用户的视觉处理、阅读习惯、注意力机制、记忆特性与学习行为,转化为可落地的界面与交互准则,让复杂系统变简单、让专业工具更易用。

UI 设计中的构图与排版 —— 兰亭妙微设计实战方法论

涛涛

兰亭妙微设计自 2009 年成立以来,深耕 UI/UX 设计领域十余年,为金融、医疗、智能制造等 7 大行业 500 + 企业打造全链路数字化设计解决方案,在中车数据可视化大屏、施耐德后台系统交互设计等经典案例中,始终将构图与排版作为 UI 设计的核心底层逻辑。我们认为,根据产品主题与业务内容的需求,将文字、图片、色彩等视觉要素进行有组织、有目的的组合设计,不仅是塑造界面美感的关键,更直接决定了用户的操作体验与信息获取效率,是连接产品功能与用户感知的重要桥梁。

告别转圈焦虑!5个提升用户体验的等待时刻设计技巧

清阳

今天,兰亭妙微 ui 设计公司分享的是「等待时刻的交互体验」。打开 APP 一直在加载转圈、快递位置长时间不更新、预计时间到了外卖还没送达 —— 这些时刻是不是让你越等越烦躁?这些场景一旦卡住,我们都会很着急:系统怎么没反应?继续等下去有用吗?

告别转圈焦虑!5 个核心技巧优化产品等待时刻的用户体验

 
打开 APP 持续加载转圈、快递物流长时间无更新、外卖超预计时间仍未送达…… 这些等待场景总能让用户心生烦躁,甚至对产品产生质疑。当系统响应出现延迟,用户的核心焦虑往往源于 “未知”:系统是否正常运行?继续等待是否有意义?

image.png

事实上,等待是产品使用中无法避免的环节,与其依靠技术单方面提升响应速度,不如通过针对性的交互设计,稳住用户心态、减少等待焦虑,让用户在等待中也能保持使用沉浸感。本文将从等待类型分析出发,分享 5 个能显著提升用户体验的等待时刻设计技巧,让 “等待” 不再是产品体验的短板。
 

一、先做分类:精准设计的前提是区分两种等待类型

 
产品中的等待场景可分为可预测型和不可预测型,二者的核心差异在于是否能明确等待时间与进度,对应的设计逻辑和组件选择也截然不同,精准区分是做好等待体验设计的基础。
 

image.png

1. 可预测型等待:核心是 “准确可视化,承诺要靠谱”

image.png

这类等待的关键特征是等待时间明确、流程步骤清晰,比如外卖配送时效、打车司机接驾时间、文件下载进度等。当用户对等待有明确预期时,对产品的信任度会显著提升,反之,若进度卡顿、实际时间与预估严重不符,会直接消耗用户信任。
 
设计核心原则:预估时间宁保守不夸大,且需结合实际情况动态更新,避免信息滞后。例如电商、外卖的预计送达时间(ETA),需根据交通、天气、物流状态每 5-10 分钟实时调整,杜绝 “宣称 12 小时达,实际等待一天” 的不靠谱情况。
 
适配设计组件:

image.png

  • 进度条:直观展示操作进行状态与完成进度,适合有明确完成节点的场景;
  • 计时器:用于等待时间短、能精准计算的场景,如广告 “5 秒后可跳过”;image.png
  • 文字说明:展示打车、外卖、快递等场景的预估时间 / 距离,如 “预计 19:20 送达,距你 1.8km”;

    image.png

  • 步骤条:提示任务当前进度与整体步骤,常与进度条搭配使用,引导用户按流程完成操作。

    image.png

 

2. 不可预测型等待:核心是 “持续给反馈,告知在运行”

image.png

服务器延迟、身份验证、页面随机加载等场景属于此类,等待时间不明确、步骤模糊是其核心特征。若让用户在无反馈的状态下干等,极易引发焦虑,甚至出现反复刷新、直接退出 APP 的行为。
 
设计的关键并非提供准确时间,而是让用户明确感知 “系统正在正常运行,并未卡住”,通过视觉反馈缓解未知焦虑。
 
适配设计组件:
 
  • 加载器:表示操作正在进行但无具体进度,分环形(短时间加载,如点击按钮、打开弹窗)和线性(长时间加载,如下载大文件),又可细分为无限型(无起点终点,适用于服务器响应不确定的临时卡顿)和有限型(进度条逐步填充,适用于有预估范围但无精确数字的场景,给予 “马上完成” 的心理暗示)。

    image.png

     
    进阶设计可融入品牌元素,打造个性化加载器,如美团将 IP 形象奔跑动画融入加载动效,强化品牌体验的同时增加趣味性;
  • 骨架屏:以灰色占位框提前展示页面排版结构,搭配闪烁动效营造动态加载感,让用户预判加载内容的呈现形式。既适用于 APP 首次打开的整页加载,也可用于列表、卡片、个人主页等模块的局部加载,比单纯的转圈加载更能减少 “等待漫长” 的感知。

image.png

二、核心优化:5 个设计技巧,让用户不再怕等

 
无论是可预测型还是不可预测型等待,设计的核心都是营造可预测性、提供可视化反馈、稳住用户心态。结合不同等待类型的特征,总结 5 个通用且高效的设计技巧,覆盖绝大多数产品等待场景。
 

image.png

1. 即时反馈:杜绝 “无响应”,点击即有回应

image.png

用户点击操作后,若长时间无任何反馈,会默认系统卡顿或操作失效,进而产生放弃、重试的行为。哪怕等待仅一两秒钟,也需立即给出视觉 / 交互反馈,比如按钮点击后的状态变化、加载动效的即时启动,让用户明确感知 “操作已被接收,系统正在处理”。
 

2. 组件搭配:灵活组合,让进度更清晰

 
无需局限于单一组件的使用,应根据产品功能和使用场景,灵活搭配进度条、加载器、骨架屏、步骤条等组件。例如大文件下载时,可结合 “线性进度条 + 文字说明(已下载 88%,预计 2 分钟完成)”,既展示实时进度,又给出时间预估,双重反馈让用户对等待更有底,明确知晓 APP 运行正常。
 

3. 贴合预期:保守预估,制造 “超预期” 体验

 
提供可靠的时间信息是降低用户焦虑的关键,预估时间要往保守方向说,让实际等待时间大概率短于预估时间。比如打车时提示 “预计 5 分钟后司机应答”,若实际 3 分钟就完成接驾,用户会产生 “产品效率高” 的正向感知;反之,若预估时间过短,实际等待远超预期,会直接降低用户对产品的信任度。
 

4. 提供备选:释放用户时间,缓解等待压力

image.png

 
若预计等待时间较长(如人工客服排队、大型数据加载),切勿让用户被动等待,需为其提供可选择的替代方案,让用户能在等待中进行其他操作,减缓焦虑。
 
  • 功能层面:增加 “完成后通知我” 按钮,用户无需停留在当前页面,后续可通过消息接收完成提醒;
  • 服务层面:如客服场景,在人工排队时推荐 AI 智能客服,让用户优先通过 AI 解决基础问题,既节省用户时间,也降低产品的人工服务成本。
 

5. 利用时间:让等待成为 “有价值的学习时刻”

image.png

与其让用户对着加载动效发呆,不如在等待期间提供有价值、有意思的内容,将空白的等待时间转化为用户的 “学习 / 了解时间”,一举两得。
 
例如懂车帝的 3D 车型库加载场景,因需要加载复杂的 3D 模型和空间内容,等待时间相对较长,产品在进度条上方展示 6 个手势操作教学(双指滑动、单指旋转、双击切换等),既抓住了用户的注意力,又让用户在进入功能前提前掌握操作方法,省去了后续的单独操作引导,提升了整体使用效率。
 

三、设计总结

 
随着产品功能的不断丰富,用户注册、内容提交、复杂功能加载等流程的复杂度也在提升,等待成为产品体验中无法规避的环节。单纯依靠技术手段提升响应速度,总会存在体验上的局限性,而设计师通过精准的场景分类、贴心的组件选择和科学的设计策略,能让原本令人烦躁的等待时刻,变成提升产品体验的加分项。
 
好的等待体验设计,本质是站在用户视角化解 “未知焦虑”,让用户在等待中感受到产品的用心与可靠。慢下来的设计,反而能让用户的使用体验更 “快”,这也是产品体验优化的核心逻辑之一。
 

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

 

image.png

日历

链接

个人资料

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

存档