首页

兰亭妙微原创作品 | 当硬核科研遇上极简美学 这才是高端仪器该有的样子

丽洁 设计思维

近期和团队一起完成了一个超酷的项目——飞秒激光时域热反射测量系统(TDTR)的软件UI设计。

不得不说,做科研设备设计真的太“上头”了!

这不仅仅是一个软件界面,更是连接科学家与纳米世界的窗口。

 

分享一下我们的设计思考,希望能给做B端、科研仪器设计的姐妹们一点灵感~

1. 项目背景:让复杂的测量变简单 客户是一家专注于热学测试设备领域的科技企业。 

设备用途: 测量纳米薄膜热导率、界面热阻等。

 核心挑战: 如何把微纳尺度的复杂数据,转化成直观、易操作的视觉语言? 我们输出了深色和浅色两套方案,客户一眼相中了浅色方案!理由是:干净、通透,长时间盯着屏幕做实验眼睛不累。

ScreenShot_2026-06-09_131239_604.png

 

2. 设计亮点:严谨中的“小心机” 

配色逻辑:红灰CP太绝了!

灰色背景: 作为基底,最大程度保证了数据图表的清晰度,不抢戏。

 红色点睛: 作为品牌主色和警示色,关键操作按钮和重要数据用红色突出,既符合工业严谨性,又增加了视觉活力。

图标设计:低饱和度的“科研风” 没有用花里胡哨的渐变,而是采用几何图形+数据可视化元素。

线条扁平化,小尺寸下也能看清,降低科研人员的认知成本。

布局:多面板分栏 左侧控制参数,中间展示实时数据,右侧显示拟合分析。

这种布局让科研人员可以“一眼看全”,不用频繁切换页面,大大提升了实验效率。

 

3. 从设计到落地:高还原度的秘密 让人骄傲的是,我们不仅做了UI设计,还负责了QT前端开发! 

通过多轮的效果走查,我们实现了设计稿的高还原度落地。看着设计图变成真正能跑代码、能测数据的软件,这种成就感真的爆棚!

ScreenShot_2026-06-09_131254_320.png

 

4. 设计师碎碎念

做科研仪器设计,“克制”是最大的美德。 我们不需要炫技,只需要让数据更清晰,让操作更流畅。每一个像素的打磨,都是为了致敬科学的严谨。

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

 

image.png

为什么审美跟得上,但没参考就不会做设计?

之晨 设计思维

一、全文速览图

image.png

我想这是很多新手设计师都有过的感受,明明懂了很多设计知识,但到真正设计的时候还是会出现迷茫或者没思路的情况。

  1. 看了很多内容/审美在线,但拿到需求没想法
  2. 设计技法VS设计原理
  3. 平面能力差
  4. 学习路径推荐

二、原因分析

造成这种情况的主要原因是,虽然我们每天看了大量的设计文章或者技法,但没有第一时间应用到设计实践中。

换句话说就是,我们每天看的设计内容可能跟我们实际做的工作需求不够搭边,这样就很容易造成拿到一个新需求后没有想法,感觉之前看了很多设计图或者文章都没派上用场,不得不重新找竞品找参考才能展开设计。

就像学了一节新课程,如果没有第一时间做配套的练习题,等过了一周再做练习题发现根本不会做,因为之前学的课程早都忘得差不多了。

北京兰亭妙微UI设计公司:下面展开讲讲如何避免这种情况,建立自己的设计成长体系。

三、设计技法VS设计原理

对于设计技法vs设计原理的问题,我觉得对于设计师来说同等重要,但具体要结合你现在的工作情况找到一个侧重点。

举个例子,比如当前的工作偏UI视觉多一点,需要常做一些运营活动图,那么日常就可以多侧重练练技法,多做视觉练习;如果当前的工作偏向纯UI,那么就可以多重视设计理论,多思考产品规划、交互流程、用户使用体验等等这些产品交互相关的知识,用理论支撑起我们的设计方案。

这样既能保证我们能很好地胜任当前的工作,还能让我们在持续的工作中不断有进步有提高。

四、如何看待平面能力

对于平面能力差的问题,我觉得平面设计能力是基础。可能很多同学在大学时有过这种体验,无论你的专业是视传、数媒、产设,甚至摄影,都需要经历平面设计这一关。排版、手绘、字体、后期合成等等这些平面能力需要我们不断练习实践。

现在AI绘画工具的出图效果都不错,大家可以好好利用起来辅助出图,补齐UI设计师在平面设计上的短板。

总的来说,平面能力要多练习多积累,日常工作中还是建议灵活运用“AI+设计”的形式,也能打造出好的效果图,没必要为了某个视觉效果死磕PS而浪费太多工作时间。

五、可复制的学习路径

针对看了很多设计但做需求还是没想法,以及到底怎么学UI、建立自己的设计体系这些情况,我结合自己的经历总结一下,希望能对你有帮助:

首先还是多积累,多看好的设计,审美需要一直提高。比如每天早上我都会拿出半小时的固定时间去Pinterest或者花瓣里去看各种各样的设计图。

需要注意的是,这里的看也分为两个方向:一个是日常看图,一个是专项看图。

  1. 日常看图,就是我在网站里随便浏览,看到好的图就随手采集下来。这是一种没有目的性的,无论是APP设计、运营海报还是3D图标,看着好的设计图就存下来。
  2. 专项看图,就需要根据接下来要设计的需求,提前有目的地去看一些图,找各种竞品,去体验这些竞品有哪些好的地方,哪些可以用到我们的设计上。这时需要结合需求,有针对性地去看图。

其次,每天看的图很多,就需要把图都整理一下,这个时候就需要建立一个系统性的设计素材库。

image.png

拿花瓣举个例子,在花瓣里可以创建各种各样的分组。

比如APP是一个大的分组,在这个APP的分组里面可以建各种各样的画板,像APP-首页、APP-导航栏、APP-标签设计等等;再比如网页设计是一个大的分组,我可以在网页设计底下创建网站首页设计、网站登录页设计这些画板。

image.png

这样整理的好处一个是让我们每天看的图更加清晰有条理;另一个是有了分组/画板后,接到新的设计需求后就可以直接定位到某个分组里,看看我们之前创建的画板里有没有类似的一些参考图,省去了从0~1再重新找参考图的这种过程。

而且看到自己采集的参考图突然派上了用场的过程,对于设计师来说特别棒!这说明我们每天看的内容有价值,不只是在收藏夹里吃灰。

比如要设计一个UI标签,我们可能需要反复去创建的素材画板里看各种各样的标签设计,这样不止一次地反复看收集的素材,看的多了之后我们就对这些素材图特别熟悉,这样就不怕后面的设计再没思路。

现在每天网络上都有特别多的零碎信息,所以这种清晰的整理是一个特别有效的成长方法。经过这种「先整理再回看再设计」反复练习的过程,会有一个更清晰的设计体系和工作流,设计能力肯定会有一个质的提升。

转载自优设网

image.png

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

高手总结!教你做好登录页设计的12种切入点

清阳 设计思维

今天兰亭妙微UI设计公司,跟大家分享登录页的 12 种设计切入点,相信总有一款会入甲方爸爸的心。

作为设计师,我们常常面临一个窘境:要面对各式各样客户审美的挑剔,有时候被虐得都怀疑人生。

但找参考时,思维又容易被局限在常见的几种形式里,我通过分析大量优秀的登录页,总结了 12 个高级的设计切入点,希望能为你打开新思路。

一、以纯色背景+品牌符号为出发点的登录页设计

image.png

设计解析:

  1. 形式:两者都采用纯色作为底色,底色配几个跟系统主题相关的元素。
  2. 色彩:上图的配色冷静、柔和,突出专业与宁静;下图则大胆使用高对比度色彩,充满能量与动感。
  3. 构图:两者均采用经典的左右分割构图,这是登录页最稳健高效的布局之一。

二、以用户画像为出发点的登录页设计

image.png

设计解析:

  1. 形式:两个都采用了扁平插画的表现形式,并且将产品的目标用户投射到页面上,产生强烈的身份认同感。
  2. 色彩:上图采用高饱和度渐变背景,色彩大胆、鲜明,传递出年轻、潮流的品牌性格;下图色调冷静,应用场景比较普适。
  3. 构图:两者均采用稳健的左右分割构图,它更像是一个价值宣言页面,极大地降低了新用户的认知门槛,提升了注册的意愿。

三、以场景沉浸为出发点的登录页设计

image.png

设计解析:

  1. 形式:两个都通过高质量摄影图来营造独特氛围;上图传递大自然、自由等意象;下图则传递温馨、舒适、有温度的服务感。
  2. 色彩:两者的色彩都源于背景图片本身,登录框的配色和背景融合的无比自然、舒适。
  3. 构图:两者均采用全屏背景+中心卡片的经典构图,它通过真实的场景,绕过生硬的文字说明,直接与用户进行情感对话。

四、以人物放大展示的登录页设计

image.png

设计解析:

  1. 形式:都使用了人物放大展示的表现手法,上图通过多位儿童看书传递阅读氛围;下图则通过虚拟角色传递潮流与个性。
  2. 色彩:上图使用高饱和度的童话色彩,营造温馨、快乐的感受;下图采用灰色调搭配霓虹黄绿渐变,营造酷炫、动感的氛围。
  3. 构图:两者均采用左右分割构图,但侧重点不同,上图插画重在营造氛围和讲述故事;下图则重在角色与表单平衡,突出个性。

五、以简约几何造型的登录页设计

image.png

设计解析:

  1. 形式: 均是几何造型为主的表现手法,上图采用冷紫渐变,传递出专业、稳定;下图采用暖黄渐变,散发出活力、乐观。
  2. 色彩: 色彩是这里唯一的变量,但效果截然不同,它完美验证了色彩在塑造品牌感知和影响用户情绪上的决定性作用。
  3. 构图: 两者都采用了清晰有力的左右分割构图,左侧是强有力的品牌口号,右侧是功能清晰的白底登录框。

六、高对比的登录页设计

image.png

设计解析:

  1. 形式:都使用了风景摄影图,且都内嵌在一个异形容器里,打破了传统的方形容器造型,比较新颖。
  2. 色彩: 色彩运用非常克制且有目的性,左侧功能区使用无彩色,这种强对比确保了功能区域的操作清晰。
  3. 构图:采用了最经典且不易出错的左右分割构图,左侧是纯功能性的白色表单区域,右侧是激发用户情感的场景化背景图。

七、以全屏插画风格的登录页设计

image.png

设计解析:

  1. 形式:都采用全屏插画为核心视觉,上图使用色彩鲜明的城市插画,营造活力都市氛围,下图采用紫色调山林夜景,传递出神秘气质。
  2. 色彩:色彩在这里是品牌情绪本身,这种设计强项在于通过视觉瞬间建立情感连接,让登录体验超越功能层面,成为一种品牌体验。
  3. 构图:采用中心构图法,这种设计的视觉记忆点和品牌辨识度非常高,非常适合需要快速建立独特品牌形象的创新型产品。

八、打破边界方式的登录页设计

image.png

设计解析:

  1. 形式:上下两个案例都巧用了打破造型边界的方式,每个页面元素都特意打破传统的容器边界,给人布局灵动的感觉。
  2. 色彩:色彩都使用了低饱和度的色彩,给人高级、稳重、大气的感觉。
  3. 构图:采用了经典的左右构图,打破边界的图形方向直指登录表单,极大地引导了用户完成注册和登录。

九、玻璃质感的登录页设计

image.png

设计解析:

  1. 形式:这是最常见的 B 端登录页表现方式,设计师都喜欢用这种玻璃质感去表达产品内涵。
  2. 色彩:色彩使用比较干净、轻盈,给人一种轻松、舒适的治愈感。
  3. 构图:采用了经典的左右构图,打破边界的图形方向直指登录表单,极大引导了用户完成注册和登录。

十、小范围 2.5D 插画的登录页设计

image.png

设计解析:

  1. 形式:这是前几年非常流行的 2.5D 插画风格,通过一些 2.5D 元素的简单组合,精准的传递平台属性。
  2. 色彩:两者都采用了蓝色主色调,但表达了不同的情感;上图的浅蓝色更具科技感;下图的深蓝色则更显沉稳、庄重。
  3. 构图:两者均采用最经典、易用的左右分割构图,确保功能表单区域的清晰可读。

十一、强质感的蓝色科技登录页设计

image.png

设计解析:

  1. 形式:两个案例都运用具象的形式将抽象的业务进行了很好的展示,科技感满满。
  2. 色彩:主色调采用体现科技感的深蓝/黑色,关键元素则使用亮蓝色和橙色作为点缀,打破了深色的沉闷,创造了视觉焦点。
  3. 构图:两者都采用中心聚焦式构图,将最具科技感的可视化元素置于画面中央,登录框作为功能面板悬浮其上。

十二、以安全信任、金融科技为出发点的登录页设计

image.png

设计解析:

  1. 形式:两个案例都通过核心视觉符号高效传达了产品属性,质感比较强烈。
  2. 色彩:深蓝色电路板背景营造出科技氛围,金色则提升了页面的品质感,发光效果和悬浮质感增强了元素的现代感和数字感。
  3. 构图:左右构图营造出严谨、平衡、可信赖的感受,登录面板位于黄金视觉区域,确保了功能优先级。

总结

通过以上 12 个案例的系统性拆解,我们发现 B 端登录页的设计可以有如此丰富的切入点。

它绝不仅仅是摆放表单的简单任务,而是一个融合了品牌战略、用户体验、视觉营销和技术表达的综合性设计挑战。

希望这 12 个切入点的详细分析,能成为您应对登录页设计挑战的灵感源泉和实用工具箱。

一个高级的设计,其最高境界是让用户感觉不到“设计”的存在,却能高效、愉悦地完成目标,并对品牌留下积极而深刻的印象。

转载:优设

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

 

image.png

8个防错绝招+5大补救术!这份「微设计」救场指南太实用了!

清阳 设计思维

哈喽,这里是兰亭妙微UI设计公司,今天分享的是「如何化解错误时刻

说到用户体验设计,大家首先想到的都是“正常场景”:注册流程顺畅、支付顺利完成、输入顺利通过。但现实并非如此,用户总会不小心犯错误,系统偶尔也会掉链子。但这些“问题时刻”往往最容易被忽略。要是产品没法帮用户解决问题,所有错误的后果都得用户承担,最后只会让他们焦虑。换句话说,错误是用户体验的最大危机,也是削弱用户对产品信任的关键节点。

相关干货:

 

一、用“微设计”化解错误

这里的“微设计”比我们常说的“微交互”范围更广,包括文案、视觉元素,还有各种反馈设计。这些小细节看似不起眼,却能精准安抚用户的出错焦虑,帮他们重新找回掌控感。

image.png

微设计的三个核心要素:

  1. 微交互:比如按钮点击时的震动反馈、输入框实时提示、自动聚焦到目标区域等;
  2. 微文本:简短清晰的提示,例如 “至少输入10个字”、“请检查您的网络连接”;
  3. 微视觉:流畅的动画、柔和的颜色、让人放松的插画。

在深入探讨具体案例之前,让我们先来探究一下用户遇到错误的背景和原因。下面简要总结了用户出错的类型、背后的心理,还有哪些场景容易出错。

1. 两种出错类型:失误VS错误

在用户体验理论中,错误分“失误”和“错误”两种,前者是用户在执行操作时无意识犯下的错误,后者是一开始就想错了。

失误:行为不当

image.png

 

目标是对的,但采取的行动有问题。例如不小心点错了按钮、着急打错了字,大多是做熟悉的事时分心、没留意造成的。

错误:判断失误

image.png

 

从一开始就误解了情况。比如看到一个显眼的按钮,以为是自己要的功能,结果点击后才发现不对。这种情况多是因为界面的信息混乱、层级不清晰,呈现的内容含糊不清。

image.png

 

通常“失误”发生在执行阶段,“错误”发生在规划阶段,但实际中两者经常一起出现。重点是搞清楚 “为什么会出错”,并给出解决方案。

2. 出错时的用户心理

出错不只是功能出问题,更会让用户慌张:“万一没法恢复怎么办?”(恐惧)、“我无法控制这种情况”(无助),甚至 “可能我根本不会用这东西”(自责)。最糟的就是自责——用户不怪产品怪自己,压力越来越大,最后干脆关掉页面、放弃使用。

所以设计师的任务很明确:别让用户背锅,明确告诉他们“能补救”。先给情绪上的安慰:“没关系,你可以再试一次。”

image.png

 

3. 增加焦虑的场景

有些时候,用户的选择压力和出错焦虑会被放大,心里越没底,越不敢动。

image.png

 

操作不可逆:删除文件、转账、重置数据等,一旦点错就没法恢复,让人不敢操作。

操作反复失败:连不上网、输密码总错,越试越沮丧,甚至会想 “是不是只有我用不了?”

尤其是对准确性要求高的场景,比如金融、商务、B2B工具,出错体验的设计更关键。有时候对于出错的恐惧,比错误本身更影响用户行为。

image.png

 

支付/转账:错误导致资金损失的压力以及造成损失的可能性。

传输/删除关键数据:知道没法恢复,更不敢操作。

表单反复验证失败:失败的次数越多,就会越沮丧。

应对错误的核心是“双管齐下”:提前预防 (别让错误发生) +及时恢复 (错了能轻松补救)。单独用哪一个都不够,需要根据场景灵活设计。

image.png

 

二、8个设计技巧,提前预防错误

1. 主动限制风险操作

image.png

 

从根本上阻止可能出错的情况,或者用视觉提示帮用户识别风险。比如禁用按钮、提供有限的选项、防止重复点击。某种程度上哪怕稍微限制一点用户的自由,也比让他们出错好。

image.png

 

例如订酒店时,对于有住宿天数要求的酒店,预定的天数少于住宿天数时,无法进行预订;类似的还有“信息没填完时,登录按钮是置灰的”、“加载时不能点按钮,避免重复操作”,都是这个道理。

2. 自动补全&智能建议

image.png

 

在搜索框、输入框里加入自动补全或关键词建议,不需要让用户记住全部信息,输入又快又准。尤其在输入地址或者比较复杂的内容时,这种方法能大大提高效率。

image.png

 

例如在输入地址时,搜索词会高亮显示,并且会可能提供清晰的搜索建议:想搜的是地铁、公交还是某家店铺,方便用户减轻记忆负担,快速做出选择;在移动设备中,键盘的局限性导致打字失误的情况频繁发生,飞书的错别字自动修正提示,能够很好地提高输入速度和准确性。

3. 将常用选项设为默认

image.png

 

对于需要重复做的操作,可以把常用的选项设为默认,帮助用户少费心。但默认选项不一定永远是对的,如果存在错误的可能性,得让用户能检查修改,不然反而会“诱导错误”。

image.png

 

例如在外卖软件中,可以把常用地址加上默认标识,省去了再次添加收货地址的麻烦。但当默认地址和当前的位置差很远,超出配送范围时,购物车中的商品会呈置灰状态无法进行购买。

4. 保持内容暂存

image.png

 

用户进行多步骤任务时 (比如注册),万一不小心退出了再进来,保持之前填的内容还在。这样不需要用户重新填,也不会忘记已经完成了哪些步骤,减少失误的发生。

image.png

 

编辑文章时,内容可以自动保存到草稿箱中。哪怕退出登录过两天再进入,草稿箱里的内容都还在,对于用户来说也是一种很贴心的体验。

5. 固定显示已选内容

image.png

 

对于需要记住很多选择的流程(比如订酒店),把选好的日期、人数、筛选条件固定在屏幕顶部,随时能看。这种设计方法允许用户在不依赖不准确记忆的情况下再次确认信息,从而及早预防错误。

image.png

 

像Airbnb会把要去的地点、 入住时间和人数这些筛选条件固定在页面的顶部,让用户可以持续查看当前的预订情况,这样在找房子的时候会觉得更踏实。

6. 二次确认不可逆操作

image.png

 

对于删除文件或重置数据这类不可逆的操作,一定要增加 “确认步骤”,进一步确认用户的意图。

一旦出错无法恢复的操作可能会引发用户的强烈焦虑,因此需要清晰传达操作的影响,并通过问题和警告来确认操作,例如:“您确定要删除xx?删除后不可恢复,请谨慎操作。”

但注意不能滥用确认弹窗,过于频繁的确认弹窗可能会让用户在不仔细看内容的情况下,习惯性地点击“确定”,增大出错的风险。只在重要且不可逆转的操作中使用。

image.png

 

例如删除文件时进行二次确认,同时告知删除后文件的位置、删除后文件是否可以找回等一系列内容,让用户对于删除的内容有清晰的认知;对于确认后无法再修改的信息,也最好来个再次确认,让用户做到心里有数。

7. 提供实时反馈

image.png

 

对于表单输入这类容易出错的场景,好的使用体验是在输入时就“实时”提供反馈,而不是等所有信息都填完点击提交之后再提示错误。

比如字符超了、密码格式不对,立即用红色文字、错误图标、边框高亮、震动动效等形式反馈出来,减少重复输入的麻烦。

image.png

 

例如发动态时,如果输入的标题字数不符合要求,会在标题处有一段反馈提示,提醒用户输入符合要求的标题;填写多个表单时,如果有多个表单未填写,每个输入框下面都会有错误反馈,而且每条错误反馈的内容会根据不同字段而调整,而不是用“请填写内容”这种模板化的反馈。

8. 先预览再提交

对于操作后不好修改的场景中 (比如发表文章、发布视频、视频渲染),可以先给用户看 “最终效果预览”。确认没问题再提交,这样用户就能提前发现错漏,心里也踏实。

image.png

 

例如在发布动态的时候上传视频封面后,在推荐列表、视频动态中能提前预览封面效果,有问题可以及时修改,省去了动态发布后再去修改的麻烦;视频软件中渲染一个视频通常需要几分钟甚至几十分钟,通过提供“渲染预览”可以快速检查错误减少不必要的时间浪费。 

 三、5 个设计技巧,帮助用户从错误中恢复

1. 通过撤销操作减少损失

image.png

 

“撤销”功能允许用户立即挽回错误,增强掌控感,减轻错误带来的负担,例如删错内容、发错邮件后,点一下就能恢复。有了这个功能,用户用着更放心,也敢大胆尝试各种功能。

image.png

 

在花瓣中采集图片后,会提供一个撤销的功能,方便用户快速撤销采集有误的图片;在使用微信发消息、使用邮箱发邮件的时候,也都支持在发出去几分钟内撤回,尽可能帮用户挽回错误。

2. 说清错误发生的原因

image.png

 

如果错误不可避免,需要使用通俗易懂的提示文案告诉用户哪里出现了错误,出现了什么样的错误,而不是用一些模板化的或是含糊不清的提示文案,让用户感到困惑。

image.png

 

例如上图中的登录失败提示,会明确告知什么地方出现了错误、出现多次错误后会有什么后果、如何操作能解决错误,这才是一个格式的错误提示;填写新增地址信息时,如果手机号码有问题,会明确提示“手机号有误”,而不是只说 “输入内容有误”。

3. 提供下一步操作

image.png

 

接着上一条,不仅要说清楚错误的原因,还要告诉用户“该怎么做”,引导用户立即采取行动。例如添加“重试”、“返回主页” 按钮,引导用户回到正确的操作流程里。

image.png

 

如果访问的页面有问题,可以提供返回首页或者联系客服的入口,让用户可以继续探索其他内容;例如苹果的Face ID连续5次识别失败后,系统会锁定面容ID功能,并提示输入密码验证后才能重新启用。

4. 自动聚焦错误选项

image.png

 

通过自动定位和聚焦错误输入项来鼓励快速更正。发现错误后,系统自动定位到出错的输入框,缩短错误从识别到更正的过程。尤其在那些表单特别多的后台页面中,这种错误定位的功能还是很有必要的。

5. 用视觉设计安抚情绪

利用情感化的视觉设计,例如柔和的色彩、插图和动效等,提供了视觉上的舒适感,缓解用户的焦虑和紧张。这不仅是简单的错误反馈,还是展现品牌个性的好机会。

image.png

 

比如谷歌浏览器离线时经典的“恐龙小游戏”,让用户等待网络连接的同时进行有趣的游戏体验,能让用户没那么烦躁。

最后

总的来说,减少错误的根本策略是避免不必要的差异化,并遵循熟悉的界面、交互和设计惯例。这里的“熟悉”不仅是风格问题,更是整个用户体验设计的通用标准。

当然,再标准的设计也没法完全杜绝错误的发生。这时候,贴心的微设计就派上用场了——帮助用户快速发现错误、轻松改过来。

这些细节,正是体验设计师存在的价值,也是产品赋予用户的最大信任。你还有哪些化解错误的小妙招呢?欢迎留言咱们一起聊聊~

转载:优设

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

 

image.png

表单设计:基于选择的输入

清阳 设计思维

兰亭妙微UI设计公司分享:在设计学校文艺汇演报名表单时,如何有效地实现基于选择的输入?本文探讨了隐藏非活动选项与显示非活动选项的设计方案,分析了页面级选项、水平Tab、垂直选项等多种形式的优劣及适用场景。

 

进入正题之前,大家可以先思考一下,以下情形大家会怎么做?

学校组织文艺汇演,老师、学生、家长可以任意组队报名表演节目。组队后,每个队伍都需要在学校教务系统上录入信息进行报名。

假如你是教务系统的设计师,你会怎么设计这个报名表单?

一、什么是基于选择的输入

在上述案例中,对于“参与人员”这个信息,首先需要确定有哪几类人参加?其次再具体录入每一类的具体人员名称。比如:“三年5班队”表演的节目有40个人参加,其中只有老师和学生参加,那么老师分别是哪几位?学生又是哪几位?

那么根据对初始问题“有哪几类人参加?”的回答,要求继续回答“这几个人分别是谁?”,就是基于选择的输入。

组成部分

基于选择的输入内容大体上可以分为两个部分:初始的选择、选择之后需要输入的内容,如下所示。

表单中基于选择的输入类型可选择的交互形式有很多种,那么在需求过程中,如何选择最适合的方式去进行设计?

二、基于选择的输入设计方案

表单基于选择的输入场景在B端产品中尤为多见。由于B端产品多为Web端,所以下列分析暂不考虑移动端的情况。

如果把基于选中的内容需要输入的选项称为活动的选项,那大致可分为两大类:隐藏非活动的选项、显示非活动的选项。以上三个案例均为隐藏非活动的选项类型。

1.显示非活动的选项

显示所有未被选中选择的选择输入内容,会导致表单中出现大量无需用户处理的内容。除非用户需要这部分信息去辅助判断选择选项,否则不建议使用此类方法。

2.隐藏非活动的选项

大部分设计方式都会通过隐藏非活动的选项,来降低输入过程中无效信息对用户的干扰。具体如何处理初始的选择和活动选项之间的关系,又可以分为以下几类:页面级选项、水平Tab、垂直选项、下拉选择、单选按钮下方显示、单选按钮内显示。

(1)页面级选项

把过程明确分为两步,这可能是解决表单中选择性输入问题最简单的方法。最常见的做法是采用不同的步骤进行表单内容的填写,如下:

对多数用户而言,初始选择和相关输入之间的关系明确,但一旦做出初始的选择,两者之间的联系会变得微弱。在第二步进行相关输入时,无法查看先前进行的初始选择。看上去这种方案比在当前页面完成所有输入任务的方式更慢。

但在实际测试中,通过该方案设计的表单,用户填写错误比较少,眼动测试参数表现也比较好(主要是眼睛固定的次数、总固定时长以及平均固定时长)。

(2)水平Tab

通过Tab的形式进行初始选择的区分,用户可以浏览表单的Tab,进入对应的Tab中进行选择输入的部分。例如:飞书的登录页。

Tab不仅作为一组筛选功能,还对选择之后输入的内容起到一个明显标题的作用。但大部分人都熟悉Tab作为导航的概念,对于Tab在表单中的应用可能会存在一定的歧义。比如Tab之间是否互斥?提交选择是针对表单中所有Tab还是当前选中的Tab?

对比以上两种设计形式,如果只从结果考虑用户的使用情况,水平Tab在测试过程中基本没有用户出错,并且可以快速完成任务。但根据页面级选项案例的眼动测试数据中会发现,用户浏览整个表单相比上面的方案所需要耗费更多的努力。

(3)垂直选项

从水平Tab方案中表现出来的眼动测试结果可以发现,其不符合用户自上而下的阅读模式。而垂直选项的方案则弥补了这一缺陷。如下图所示。

在选择选项之后,眼睛不需要做太多的移动,设计更有效率,如下方案例眼动数据所示。

(4)下拉选项

相比水平Tab和垂直选项,下拉选项在视觉上没那么独特。每一个选项对应一个初始选项,如下图所示。

下拉选项的解决方案利用选择后,输入的内容在下方特定的位置进行展示。所选选项可作为标题,更好的传达初始选项的范围和影响(看具体业务是否需要在表单中映射这个关系),上方案例中的映射关系就比较弱。

(5)单选按钮下方显示

展示所有选项,根据用户选择情况在下方显示具体需要选择输入的内容,如下图所示。

(6)单选按钮内显示

与单选按钮下方显示的办法类似,在初始选项内显示额外的输入内容。

三 、各方案的优劣及适用场景

四、写在最后

基于选择的输入,在设计方案的选择中,需要考虑各个方面。

如果每个初始选项的额外输入选项数量很多,且同时存在其他需录入的信息时,那么页面级选项可能是最佳方案。虽然需要两个网页来拆分表单,但至少不会让用户产生困惑,也无需怀疑选项之间是否互斥。

垂直选项和水平Tab两个方案需要通过交互设计或者视觉设计来规避其互斥问题。

如果初始选项列表较长(4或者5个以上),并且每个选项都自带一套基于选择的输入,在设计时最好能针对额外选项采用下拉列表和视觉分组。

如果每个初始选项只有几个额外的输入选项,单选按钮下方显示或者单选按钮内显示是最佳的方案。但容易出现因选项切换而造成的页面跳动问题。

就整体而言,隐藏无关的输入项,可以减轻用户对表单的负担,帮助用户更快的完成表单内容。

最好能清晰的显示选项与基于选择的输入项之间的关系。

转载:人人都是产品经理

 

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

 

image.png

兰亭妙微UI设计公司,实时表单设计指南

清阳 设计思维

这篇文章核心讲:实时表单验证不只是技术交互,更是人机心理博弈,从设备适配、场景策略、案例实践三个层面给出完整设计方法。
 

 

一、跨设备与无障碍验证

image.png

  1. 移动端
    • 痛点:屏幕小、软键盘遮挡错误提示,用户反复试错
    • 做法:提示放键盘上方;加大触控区;用颜色 / 动画 / 震动多维度反馈
     
  2. 桌面端
    • 优势:空间充足,可做非打断式细腻反馈
    • 做法:气泡提示、悬停说明、修正后绿色正向反馈,克制不打扰
     
  3. 无障碍
    • 不只用颜色 / 图标提示,需兼容屏幕阅读器
    • 给错误字段加属性、提示做语义标记,让视障用户可 “听” 到错误
     
 

 

二、分场景验证策略

image.png

  1. 注册 / 登录(第一印象)
    • 自动聚焦首字段,默认无警告
    • 密码用强度条 + 鼓励语,重名给替代建议

    image.png

  2. 支付 / 商业(防错止损)
    • 强格式:自动空格、限制非法字符、动态掩码
    • 智能容错:提示错误细节、辅助修正,降低投诉
     
  3. 高风险(实名认证 / 税务 / 公积金)
    • 原则:安抚情绪→解释原因→给方案→告知无影响
    • 显示进度、保存进度,避免用户焦虑
     
 

 

三、国内外案例对比

 
  • 国内(务实安全):支付宝分步验证、京东智能地址、小红书实时推荐
  • 国外(友好共情):Typeform 对话式、Airbnb 国别适配、Dropbox 路径兜底
  • 差异:国内偏失焦验证 + 强规则;国外偏即时验证 + 容错引导
 

 

核心结论

表单验证的目标不是拦错,而是帮用户顺利完成:跨设备保证反馈可见,分场景匹配用户情绪,最终提升提交率、降低放弃率。
 

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

 

image.png

兰亭妙微:如何做好 UI 设计|实战干货篇

涛涛 设计思维

在兰亭妙微,我们服务过金融、医疗、军工、智能制造等大量政企与企业级项目,见过太多设计师「软件很溜、想法很空、落地很慌」。同样是做界面,为什么有的人只能当美工,有的人却能拿高薪、控项目、带结果?

兰亭妙微:高级 UI 设计的三大核心特质

涛涛 设计思维

好的 UI 设计,从来不止是界面美化,而是品牌、场景、体验三位一体的系统能力。兰亭妙微深耕 UI/UE 设计 16 年,服务金融、军工、医疗、能源、智能制造等多领域,沉淀出一套可复制、可落地的高级 UI 设计方法论。我们认为,真正的高级 UI 设计师,必须具备三大核心特质 ——品牌体系化、场景业务化、体验心智化,这也是兰亭妙微所有项目的底层设计准则。

UI 设计文字规范全解|兰亭妙微:让设计 100% 还原落地

涛涛 设计思维

在兰亭妙微多年 UI 设计项目中,文字排版是设计师与前端对接时高频出问题的环节:视觉稿精致清晰,开发还原后却错位、拥挤、层级混乱,反复像素级微调浪费大量时间。

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

日历

链接

个人资料

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

存档