首页

三维图标设计宝典

涛涛

 “三维图标设计宝典” 方法论,强调从前期构思(分析竞品如马蜂窝与本品飞猪的图标类型、配色、风格及核心辨识点,通过关键词脑暴锁定 “品质、活力、青春” 方向并产出情绪版)、绘制图标(具象功能、简化结构、确定基本形,融入飞猪品牌超级符号,添加毛玻璃质感等细节)到走查图标(从辨识度、统一性、美感度、差异化四方面检查,如类型、风格、体量感统一,融入品牌符号增强差异化)的完整流程,助设计师提升过稿率。

MEUX「五月」AI设计观察

涛涛

MEUX「五月」AI设计观察

从列表到详情:提升用户转化的7种方法

lanlanwork

每个产品都希望展示更多用户感兴趣的内容,但受限于屏幕大小和人类的认知能力,我们不可能一次性获取产品中的所有信息。因此,需要采用逐层展开的结构来平衡信息密度与操作效率。这就催生了界面设计中最经典的「列表到详情」界面设计模式。这种模式在列表呈现内容摘要降低认知负荷,同时为深度探索提供入口,完美契合人类「先大概再具体」的认知路径。

企业如何用可视化大屏为决策者提供实时支持?

lanlanwork

可视化大屏的优势,可视化大屏的实现方式,可视化大屏在决策支持中的作用,实际应用场景

数据视界,智绘未来:企业信息化大屏软件的多维应用图景

lanlanwork

能源管理、生产制造监控、物流与供应链管理、企业运营管理、营销与客户服务

未来设计新篇章!2025 年 UX/UI 设计趋势,技术与体验的全新结合!

lanlanwork

随着2025年的到来,UX/UI设计领域正迎来诸多新趋势。这些趋势不仅展示了技术创新如何推动设计行业的进步,也体现了设计师和开发者在优化用户体验方面的不断努力。更重要的是,它们为普通用户带来了更加智能、直观和贴心的交互体验。

从人工智能和大数据的应用到更具个性化的界面设计,从无缝的跨平台体验到可持续设计理念的引入,这些变化正在深刻影响着数字产品的设计方式。以下,YES从多个角度整理了2025年的UX/UI设计趋势,旨在为设计师、开发者以及普通用户等提供一些启发,共同迎接更加智能化、创新化的数字时代。

包容性设计

包容性设计正成为重点。像 Apple、Google 和 Microsoft 等公司推出的语音控制和眼动追踪工具,虽然最初是为有特殊需求的用户设计,但它们同样提升了所有用户的体验。更大的字体、简化的导航和语音命令等设计,不仅对老年用户友好,也让所有人都能更方便地使用。

 

3D元素和交互式动画

3D 元素在用户界面中的应用越来越广泛,无论是电商平台中逼真的产品模型,还是界面中的 3D 图标和插画,都为用户提供了更直观的视觉体验。并且能让内容变得栩栩如生,赋予了深度和动感。这些视觉元素带来了一种触觉和互动性,缩短了与现实世界的距离,为用户提供了一种既现代又引人入胜的体验。

此外,这些元素可以显著提高用户参与度,鼓励用户探索网站并与之互动。这种增加的交互可以提高用户满意度和留存率,因为用户更有可能返回提供引人注目的交互式体验的网站。

可持续设计

随着可持续发展理念的深入,UX/UI 设计也开始关注数字产品的环保性。节能型设计正引领潮流,通过优化代码、减小文件体积等方式,让应用和网站变得更轻量化,既提高了加载速度,又减少了能耗。

简洁的设计风格也在回归。通过简化界面和减少不必要的视觉元素,不仅提升了用户体验,还降低了设备的能源消耗。同时,深色模式依然流行,不仅适合夜间使用,还能在 OLED 屏幕上节省电量。这些设计背后,体现了对环境和用户需求的双重关注。

玻璃拟态/粘土拟态

玻璃拟态设计(Glassmorphism)虽然不是新兴趋势,但仍然在 2025 年占据重要地位。其模拟了磨砂玻璃效果,具有半透明的背景和鲜艳、浮动的元素,创造出深邃的视觉效果,在现代、科技感十足的应用中广受欢迎。

 

而粘土拟态是一种充满趣味的3D元素风格,具有柔和的阴影、柔和的色彩和圆润的边缘。这种用户界面设计风格创建了友好且引人入胜的界面,尤其是在创意产业中,使其成为最佳 UI 实践中一个有趣的设计主题。

情感智能设计

情感智能设计正在成为 UX/UI 设计的一个重要方向,其目标是通过更人性化的设计与用户建立情感联系。这不仅仅是功能上的优化,更是通过细节设计,让用户感受到被关怀和支持。

 

例如,友好的文案提示、鼓励性的消息以及游戏化奖励机制,都能让用户在使用产品时有更积极的体验。视觉上,柔和的配色和轻缓的动画也能让界面显得更亲切。

AI增强设计

这两年,最火的领域莫过于AI,各行各业都增加了对AI的投入,设计也不例外,AI不仅改变了设计师的工作方式,也为产品设计带来了很多新的可能性。

 

现在,AI 不仅可以生成图像、视频,还能快速完成 UI 设计的初步框架。例如,一些 AI 工具可以根据需求生成完整的移动应用界面,甚至撰写界面文案。

 

AI 还被广泛用于用户交互中,例如通过语音或文本指令完成任务。这些技术让设计师能够更专注于创意环节,同时也为用户提供了更智能的操作方式。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计、交互设计、UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

2025年UI设计的新趋势,你不能错过

lanlanwork

响应式与自适应设计的进阶

在 2025 年,随着智能设备种类的持续增多,从传统的桌面电脑、笔记本电脑,到各式各样的智能手机、平板电脑,甚至新兴的可穿戴设备如智能手表、智能眼镜等,用户期望在不同设备上都能获得一致且优质的体验。响应式设计不再仅仅局限于简单的页面布局调整,而是在布局与交互层面实现更为深度的优化。

 

在布局方面,CSS 网格布局(CSS Grid Layout)和弹性盒模型(Flexbox)技术得到更广泛且深入的应用。CSS 网格布局允许设计师创建二维的网格结构,精确控制页面元素在不同屏幕尺寸下的位置与大小。例如,在一个电商网站页面中,通过 CSS 网格布局,可以使商品展示区域在桌面端以多列形式整齐排列,而在手机端自动调整为单列布局,同时保持图片与文字信息的合理展示比例。弹性盒模型则更侧重于一维布局,它能够方便地实现元素的对齐、分布与自适应拉伸。在一个导航栏设计中,使用弹性盒模型可以确保导航项在不同屏幕宽度下均匀分布,且当屏幕空间不足时,自动调整导航项的显示方式,如将部分次要导航项折叠为下拉菜单。

 

交互层面,响应式交互设计也有了新的发展。例如,手势交互在不同设备上的一致性与适应性增强。在移动端,常见的滑动、缩放、长按等手势操作,在可穿戴设备上也能以类似且符合设备特点的方式实现。在智能手表上,用户通过简单的左右滑动屏幕即可切换不同功能界面,这种交互方式与手机端的操作习惯相呼应,同时又适应了智能手表屏幕小、操作空间有限的特点。此外,视差滚动效果在响应式设计中也得到创新应用。在一些品牌宣传网站中,视差滚动效果不仅能在桌面端营造出富有层次感的视觉体验,在移动端同样可以通过优化,利用有限的屏幕空间展现独特的视觉效果,吸引用户注意力,引导用户深入浏览页面内容。

极简主义与情感化设计的融合

极简主义设计风格在 2025 年依然盛行,但其内涵有了新的拓展,与情感化设计深度融合。极简主义强调去除不必要的元素,以简洁的界面呈现核心内容与功能,提升用户操作效率。而情感化设计则关注用户的情感需求,通过设计元素引发用户的情感共鸣。

 

从色彩运用来看,在极简主义的基础上,设计师更倾向于选择具有情感暗示的色彩。柔和的暖色调如淡橙色、浅黄色,常用于营造温馨、友好的氛围,在一些儿童教育类 APP 或健康养生类应用中较为常见,能够让用户在使用过程中感受到舒适与安心。冷色调中的深蓝色,因其给人专业、可靠的感觉,常被用于金融类、办公类应用的界面设计,增强用户对产品的信任感。

图标设计也体现了这种融合趋势。极简主义的图标造型简洁,仅保留最能代表功能的关键特征。在此基础上,通过赋予图标一些独特的细节或动效来传递情感。例如,一个音乐播放应用的播放按钮图标,在静止时是一个简洁的三角形,当用户点击播放时,图标会以一种柔和的动画效果展开,如同音乐从按钮中流淌出来,这种微妙的动效设计增加了用户与图标之间的互动乐趣,引发积极的情感反馈。

文案在极简主义与情感化设计融合中也起着重要作用。简洁明了的文案不仅能够准确传达信息,还能通过语气、措辞传递情感。在一个在线购物 APP 的订单确认页面,文案 “您的宝贝已踏上旅程,期待与您早日相见”,相比单纯的 “订单已确认”,更能让用户感受到购物的愉悦与期待,从情感层面提升用户对品牌的好感度。

 

AR 与 VR 在 UI 设计中的拓展

增强现实(AR)与虚拟现实(VR)技术在 2025 年逐渐成熟,其在 UI 设计领域的应用场景不断拓展。在 AR 购物领域,消费者通过手机或 AR 眼镜,能够在现实环境中虚拟试穿衣服、摆放家具等。例如,一家家居品牌推出的 AR 应用,用户可以在手机上选择心仪的家具款式,然后通过手机摄像头将家具虚拟放置在自己家中的实际场景中,查看家具与周围环境的搭配效果。在这个过程中,UI 设计需要考虑如何在现实场景中清晰地展示虚拟家具的信息,如价格、材质、尺寸等,同时不干扰用户对现实与虚拟融合场景的体验。设计师通常会采用半透明的悬浮卡片形式展示信息,卡片的位置与大小会根据用户的视角和操作进行动态调整,确保信息的可读性与展示的自然性。

在 VR 虚拟展厅方面,企业可以利用 VR 技术打造沉浸式的产品展示空间。UI 设计在其中负责构建导航系统、交互界面以及信息展示方式。用户在虚拟展厅中通过手柄或手势操作进行浏览,UI 设计需要提供直观的导航指引,如在展厅地面设置虚拟的引导线,或者在用户视野边缘显示简洁的导航图标,引导用户前往不同的展示区域。当用户靠近展品时,自动弹出详细的产品介绍窗口,窗口的设计风格与虚拟展厅的整体氛围相协调,采用 3D 立体效果展示产品细节,增强用户的沉浸感与交互体验。技术实现上,借助 Unity、Unreal Engine 等游戏开发引擎,结合 AR/VR 设备的传感器数据,实现精准的交互响应与逼真的视觉效果。

 

数据驱动设计的兴起

数据驱动设计在 2025 年成为 UI 设计的重要趋势。通过收集与分析用户在产品使用过程中的各种数据,设计师能够深入了解用户行为与偏好,从而精准优化 UI 设计的各个环节。

在界面布局优化方面,通过分析用户的点击热图数据,设计师可以了解用户在页面上的注意力分布情况。例如,在一个新闻资讯 APP 的首页,通过点击热图发现大部分用户集中点击页面顶部的热门新闻区域以及特定分类标签,而页面底部的一些功能按钮很少被点击。基于这些数据,设计师可以调整界面布局,将重要的新闻内容与常用功能放置在更易于用户操作的位置,提高用户获取信息与使用功能的效率。

功能设计同样离不开数据支持。通过用户行为数据的分析,发现用户在某个功能模块的使用频率较低,进一步研究发现是该功能的操作流程过于复杂。设计师可以根据这些数据反馈,简化操作流程,重新设计功能交互方式。比如,在一个在线支付流程中,通过数据分析发现用户在填写支付信息环节的放弃率较高,经过优化,采用自动填充用户常用支付信息、简化支付步骤等方式,有效提高了支付成功率,提升了用户体验。

 

此外,数据驱动设计还体现在个性化推荐方面。通过收集用户的浏览历史、收藏记录、购买行为等数据,利用机器学习算法为用户提供个性化的内容推荐。在一个视频播放平台中,根据用户的观看偏好,为用户推荐符合其兴趣的视频内容,UI 设计则需要考虑如何以吸引人的方式展示这些个性化推荐内容,如采用瀑布流布局、个性化的封面设计等,提高用户对推荐内容的点击率与观看时长。

可持续设计理念在 UI 中的体现

随着环保意识的增强,可持续设计理念在 2025 年的 UI 设计中愈发重要。在资源节约方面,UI 设计注重减少数据传输量与能耗。例如,在图片处理上,采用 WebP 等高效的图片格式,相比传统的 JPEG、PNG 格式,WebP 格式在保证图片质量的前提下,能够大幅减少图片文件大小,降低数据传输量,节省用户的流量消耗,同时也减少了服务器的存储与传输压力。在动画效果设计中,避免使用过于复杂、高能耗的动画,采用简洁且必要的动画效果来提升用户体验,减少设备的电量消耗。

 

从绿色环保角度,UI 设计在色彩选择与界面风格上也有所体现。大量采用自然元素的色彩,如绿色、蓝色等,营造与自然和谐的视觉感受。在一些环保主题的应用中,界面设计模仿自然生态场景,如以森林、河流等为背景元素,传达环保理念。同时,在设计中避免使用过于刺眼、鲜艳且可能对用户视觉造成疲劳的色彩组合,减少不必要的视觉干扰,让用户在使用产品过程中感受到舒适与放松,从侧面体现可持续设计中对用户身心健康的关注。此外,在产品更新与维护方面,UI 设计考虑到版本迭代的可持续性,采用模块化设计,方便进行局部更新与优化,减少因整体更新带来的资源浪费与用户学习成本。


兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计、交互设计、UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

尼尔森十大设计原则

蓝蓝设计的小编

 

在产品设计领域中,尼尔森设计原则可以说是非常基础和必备的底层逻辑了。这篇文章,作者重新梳理了10大设计原则,并加以案例讲解,希望可以帮到大家。

尼尔森十大设计原则是由著名的用户体验专家、网站设计师雅各布·尼尔森(Jakob Nielsen)提出的。这些原则旨在帮助设计师创建更具用户友好性和易用性的数字产品和网站。

这些原则的来源可以追溯到尼尔森在其著作《使用者体验的十大原则》(”10 Usability Heuristics for User Interface Design”)中提出的。

一、可见性原则

1. 信息的可见性

用户在界面上应该能轻易地看到他们需要的信息。如果信息不直接展示给用户,那么应通过明显的提示来指引用户如何获取。

例如:如果一个功能可以通过菜单访问,那么这个菜单的标识和位置应当清晰明确。

2. 反馈的可见性

当用户与界面进行交互时,系统应该提供及时的、可见的反馈。

例如:当用户点击一个按钮时,按钮可以显示不同的视觉效果(如颜色变化、陷入效果等)来告知用户其操作已被系统识别。

3. 操作的可见性

用户可用的操作选项应该清晰展示。界面应避免隐藏用户可能需要的功能。操作的可见性可以通过良好的界面布局和适当的控件选择来加以增强。

例如:当断网时,下拉刷新用户会看的一个情感化加载动画,提示用户在加载中。

4. 状态的可见性

系统的当前状态应该对用户是明显的。

例如:在一个复杂的表单或多步骤流程中,界面应该清楚地显示当前处于哪一步。这样用户可以随时了解自己的进度和状态,降低因迷茫而产生的用户挫败感。

5. 错误的可见性

如果发生错误,应该有清楚的错误信息显示给用户,并且提供简单的、操作性的建议来解决这些错误。错误信息应该具体到足够用户理解发生了什么问题,并指导他们如何纠正。

例如:我们在输入密码的界面时,出现错误时会在下方提示当前密码输入错误,提示引导用户请输入数字+符号的组合密码。

可见性原则在生活中有哪些体现呢?

例如:我们常坐的地铁到站显示,乘坐高铁时的候车室列表,还有去超市买菜时自动结算上显示的数量金额、计算器等。

二、贴近现实场景原则

1. 模仿真实物体和行为

模仿用户在现实生活中熟悉的物体和行为,这样可以使用户能够轻松地理解和使用软件。

例如:将按钮设计成与现实中的按钮相似的样式,让用户有按下按钮的直观感受。

2. 遵循行业标准和习惯

界面设计应该符合行业内人机交互和设计规范的标准符合用户的习惯,以减少用户的认知负担和学习成本。

例如:将网页的导航菜单放置在页面的顶部或侧边,符合用户对网页导航的常规期待。

3. 保持一致性

在整个界面中保持一致性,使得用户在不同部分之间能够轻松地转换和理解。这包括一致的布局、一致的交互方式等。一致性可以提高用户的操作效率,减少错误和混淆。

例如:设计中的UI规范,交互样式保持一致性,书籍画册等里面的标题内容字体大小也遵循一致性原则。

4. 提供直观的反馈

当用户与界面进行交互时,界面应该提供及时、直观的反馈,让用户清楚地知道他们的操作已被识别和响应。

例如:按钮被按下时产生的视觉反馈、链接被点击时的状态变化等。

5. 避免违背用户期望

界面设计应避免违背用户的期望和常规操作,否则可能导致用户的困惑和挫败感。

例如:点击一个图标却得到了与期望不符的结果,这会让用户感到困惑和不满。

6. 考虑用户的认知能力和心理模型

设计应该考虑用户的认知能力和心理模型,(需要根据用户画像,数据统计等定义用户群体,年龄端的不同认知也是不同的),使得界面的布局和功能对用户来说更加自然和易于理解。

例如:将相关的功能组织在一起,符合用户的认知结构。

例如:最简单案例体现,可以从图标的演变过程就可以感受到,从真实生活中的电话演变成图标,一直到现在的扁平化显示的电话图标。

贴近现实场景在生活中有哪些体现呢?

例如:我们生活中的汽车发展过程,从蒸汽汽车,到油车再到现在的新能源汽车,一直在变的是外观和里面的内饰,不变的是在大家受环境影响认知里的东西,四个轮子大家很容易就想到车。

三、用户控制和自由原则

1. 提供明确的操作选项

界面应该提供清晰明确的操作选项,让用户知道可以做什么以及如何做。

例如:在编辑界面中,应该明确标识出保存、撤销、删除等操作按钮,让用户知道可以进行哪些操作。

2. 允许用户撤销和返回

用户应该可以随时撤销之前的操作或返回到之前的状态,而不会造成不可逆的影响。

例如:提供撤销按钮、返回按钮或者多级回退功能,让用户可以自由地调整和修正他们的操作。

3. 避免强制性的操作和模式

界面设计应避免强制用户进行某些操作或者遵循固定的模式。应该给用户足够的自由度,让他们根据自己的需求和偏好来进行操作。

例如:不要强制用户在注册时填写过多的信息,而是提供必填和选填项,让用户可以根据自己的情况选择填写。

4. 提供明确的退出选项

在界面中应该提供明确的退出选项,让用户可以随时退出当前操作或者返回到上一层级。

例如:在应用程序中提供退出按钮或者返回到主界面的选项,让用户可以方便地退出当前任务或者返回到初始状态。

5. 防止误操作的发生

界面设计应该采取措施防止用户因为误操作而造成不必要的损失或者困扰。

例如:在危险操作(如删除文件)前要求用户确认,以避免误操作造成的后果。

6. 支持键盘快捷键和手势操作

为用户提供键盘快捷键和手势操作的支持,让他们可以通过更快速和高效的方式来完成操作。这可以提高用户的操作效率和满意度,增强用户的控制感和自由度。

用户控制和自由原则在生活中有哪些体现呢?

例如:我们经常出去吃饭,有些饭店可能比较火需要进行预约,预约后不想去了可以在软件上取消也可以打电话取消。我们进行购物时,收到了物品不想要也可以进行退换货。

四、一致性和标准化原则

1. 一致的布局和样式

界面中的布局、排版和样式应该保持一致,让用户在不同页面和功能之间能够轻松地切换和理解。例如:相似的功能应该采用相似的排列方式和视觉风格,按钮、导航栏等元素的位置和样式也应该保持一致。

2. 一致的交互方式

界面中的交互方式和操作流程应该保持一致,让用户能够在不同的功能和场景中使用相似的操作方法。例如:点击按钮应该在不同页面中具有相同的效果,滑动手势在不同功能中也应该具有相似的操作意义。

3. 遵循标准化设计规范

界面设计应该遵循行业的标准化设计规范,符合用户的习惯和期望,减少用户的认知负担和学习成本。例如:网页设计中遵循Web Content Accessibility Guidelines(WCAG)等国际标准,移动应用设计中遵循iOS Human Interface Guidelines或Material Design等平台规范。

4. 统一的图标和符号

界面中使用的图标和符号应该统一且易于理解,避免混淆和歧义。例如,使用相同的图标来表示相似的功能或操作,以便用户能够快速识别和理解。例如:手机主题界面的显示,电话的图标会从生活中电话提取图形标识。

5. 保持一致的术语和语言

界面中使用的术语和语言应该保持一致,避免混淆和困惑。

例如:在不同页面和功能中使用相同的术语和表达方式,以便用户能够准确地理解和识别。

6. 反馈一致性

界面中的反馈信息应该保持一致,让用户能够清晰地知道他们的操作已被识别和响应。

例如:成功操作和错误操作应该有明确的视觉和语言反馈,以便用户能够及时调整和纠正。

一致性和标准化在生活中有哪些体现呢?

例如:我们经常逛的超市或者菜市场都会遵循标准化,相同或相似的商品进行归类,看起来很整齐方便用户购买,马路上的红绿灯,全国保持一致性降低用户认知负担。

五、容错原则

1. 提供明确的反馈和指导

当用户出现错误或者不确定性时,界面应该提供明确的反馈和指导,让用户知道出了什么问题以及如何解决。

例如:当用户输入错误的密码时,界面应该明确提示用户密码错误,并且提供重新输入或者找回密码的选项。

2. 允许撤销和返回

用户应该可以随时撤销之前的操作或者返回到之前的状态,从而纠正错误或者重新开始。

例如:在编辑界面中提供撤销按钮或者返回按钮,让用户可以随时取消之前的操作并且返回到之前的状态。

3. 避免严格的输入要求

界面设计应该尽量避免严格的输入要求,允许用户输入格式的灵活性和容错性。

例如:在表单输入时,可以采用自动补全、格式化等技术来辅助用户输入,减少用户的输入错误。

4. 提供辅助和提示

当用户出现错误或者不确定性时,界面应该提供辅助和提示,帮助用户找到正确的解决方案。例如:在输入框中提供提示性的文字或者示例,指导用户如何正确地输入信息。

5. 减少不必要的强制性操作

界面设计应该尽量减少不必要的强制性操作,避免因为用户的操作失误而造成不可逆的影响。例如:在我们进行转账操作时要求用户对转账金额进行确认,以避免误操作造成的损失。

6. 优雅地处理异常情况

当用户遇到异常情况时,界面应该能够优雅地处理并给予用户友好的提示和解决方案。

例如:当网络连接出现问题时,界面应该显示友好的错误信息,并且提供重试或者刷新的选项。

容错原则在生活中有哪些体现呢?

例如:想要出去旅游到窗口购票,发现买错了可以去窗口找工作人员改签,或退票重新购买,这时工作人员会二次确认是否改签,用户回答确定,改签成功。因为天气原因造成的列车无法发车,会提示用户进行退票或改签操作。

六、易取原则

1. 简化操作流程

界面设计应该尽量简化操作流程,减少不必要的步骤和冗余的操作,让用户能够更快速地完成任务。

例如:在购物网站中,简化下单流程,减少用户填写信息的步骤。

2. 提供直接的路径

界面应该提供直接的路径让用户达到目标,不需要经过多次点击或者浏览。

例如:在网页中提供明显的导航链接,让用户可以直接跳转到所需的页面。

3. 减少用户输入

尽量减少用户需要输入的信息和数据,采用自动填充或者预设数值的方式来简化用户操作。

例如:在搜索框中提供模糊搜索提示的功能,减少用户输入的工作量。

4. 提供明确的标识和提示

界面上的按钮、链接和标识应该清晰明确,让用户一眼就能看出其功能和作用。同时,界面应该提供明确的提示和指导,引导用户完成操作。

例如:在网页中使用明显的按钮和图标来表示可点击的功能,同时提供鼠标悬停提示来解释按钮的作用。

5. 响应迅速

界面的响应速度应该尽量快速,减少用户等待的时间。

例如;当用户点击按钮或者链接时,界面应该立即给出反馈,让用户知道其操作已被识别。

6. 符合用户期望

界面设计应符合用户的期望和习惯,让用户能够直观地理解界面上的布局和功能。

例如:将相关的功能组织在一起,符合用户的认知结构。

易取原则在生活中有哪些体现呢?

例如:现在一些大型超市购物时提供自动扫码结算的机器,减少用户的等待时间,响应速度快,还有快捷刷脸支付(手机没有带也可以支付哟)用户可以很直观的进行支付。

七、灵活高效原则

1.支持多种操作方式

界面设计应该支持多种操作方式,让用户可以根据自己的习惯和偏好选择最适合自己的方式进行操作。

例如:提供键盘快捷键、手势操作、语音控制等多种方式。

2. 自适应和响应式设计

界面设计应该具有自适应和响应式的特性,能够适应不同设备和屏幕尺寸的显示,并且在不同分辨率下保持良好的布局和可用性。这样用户可以在任何设备上以相似的方式进行操作。

例如:我们常见的PC端网站会根据屏幕尺寸的不同响应式布局(Behance、花瓣等网站)。

3. 提供个性化的设置和选项

界面应该提供个性化的设置和选项,让用户可以根据自己的需求和偏好进行定制。

例如,允许用户自定义界面的布局、颜色主题、字体大小等。

4. 支持快速导航和查找

界面设计应该支持快速导航和查找功能,让用户能够迅速找到所需的信息和功能。

例如:提供搜索框和过滤选项,让用户可以快速定位到目标内容。

5. 减少不必要的点击和步骤

界面设计应尽量减少不必要的点击和步骤,简化操作流程,提高用户的操作效率。

例如:采用一键下单的方式,减少用户提交订单的步骤。

6. 提供即时反馈和状态更新

界面设计应该提供即时的反馈和状态更新,让用户清楚地知道他们的操作已被识别和响应。这样可以提高用户的操作效率和满意度。

例如:当用户提交表单或者完成购买时,界面应该立即显示成功的反馈信息。

灵活高效原则在生活中有哪些体现呢?

例如:火锅在选择上提供了多种口味的美食,一口锅全都煮了,用户也可以根据自己口味不同进行调料,做的比较哇塞的火锅店,还会贴上不同口味的搭配引导,对于第一次或不经常吃火锅店用户就很友好,食物放进火锅里会通过食材的颜色或软硬程度辨别是否熟了,给到用户反馈可以吃咯。

八、简洁性原则

1. 去除冗余信息

界面设计应该去除不必要的冗余信息,只保留核心和重要的内容,以减少用户的干扰和混乱。例如:去除重复的导航链接、无关的广告等。

2. 简化布局和排版

界面的布局和排版应该简洁明了,避免过多的装饰和复杂的结构,以提高用户的阅读和理解效率。

例如:采用简单的网格布局,保持页面的整洁和清晰。

3. 提炼核心功能

界面设计应该将核心功能突出显示,让用户一目了然地找到所需的功能和信息。不必要的功能应该隐藏或者移除,以减少用户的选择困难和认知负担。

例如:商品页面,商品名称、信息、价格、快捷加入购物车、买几份这种功能就放在了下一个页面减少对用户的干扰。

4. 简化操作流程

操作流程应该简化至最少的步骤,避免不必要的点击和跳转,提高用户的操作效率。

例如:采用一键式操作,减少用户提交订单的步骤。

5. 清晰明了的语言和标识

界面中使用的语言和标识应该清晰明了,避免歧义和混淆。按钮、链接等元素的标识应该直接表达其功能,让用户一目了然。

6. 精简视觉元素

视觉元素应该精简,避免过多的装饰和复杂的效果,以保持界面的干净和清晰。颜色、字体、图标等元素的使用应该简洁大方,突出重点。

7. 提供帮助和指导

界面设计应该提供必要的帮助和指导,让用户能够快速了解界面的使用方法和操作流程。但是这些帮助信息也应该简洁明了,避免过多的文字和复杂的说明。

简洁性原则在生活中有哪些体现呢?

例如:商场的逃生通道标识,办公室灭火器都会放在比较容易看到的地方,经常坐地铁的时候指引箭头就很符合简洁性原则,不需要放过多的解释说明文案,大家都可以看懂具备什么含义。

九、帮助用户识别和解决问题原则

1. 提供清晰的帮助文档和说明

界面设计应该提供清晰明了的帮助文档和说明,让用户能够快速找到解决问题的方法和答案。这些文档和说明应该简洁明了,避免使用过多的专业术语和复杂的语言。

2. 实时反馈和指导

界面应该提供实时的反馈和指导,让用户知道他们的操作是否成功,以及如何继续下一步。例如,在表单输入时实时检查格式是否正确,并给予相应的提示。

3. 提供可搜索的帮助资源

界面设计应该提供可搜索的帮助资源,让用户能够快速找到所需的信息和解决方案。这些帮助资源可以包括常见问题解答、在线帮助文档、视频教程等。

4. 友好的错误提示和解决方案

当用户遇到错误或者问题时,界面应该给予友好的错误提示和解决方案,让用户知道发生了什么问题以及如何解决。错误提示应该具体明了,避免使用晦涩难懂的术语。

5. 提供在线支持和反馈渠道

界面设计应该提供在线支持和反馈渠道,让用户能够随时联系到客户服务团队并获得帮助。这些支持和反馈渠道可以包括在线聊天、电子邮件支持、社区论坛等。

6. 优化用户体验和流程设计

界面设计应该优化用户体验和流程设计,减少用户可能遇到的问题和困难。例如,简化操作流程、提供明确的导航和引导、避免技术性障碍等。

7. 持续改进和优化

界面设计团队应该持续改进和优化界面,根据用户的反馈和需求不断调整和改进设计方案,以提高用户的满意度和体验质量。

帮助用户识别和解决问题原则在生活中有哪些体现呢?

例如:我们在印刷书籍时,印刷厂会给我们讲解纸张的尺寸,材质,类型、价格等,帮助我们了解和选择适合的印刷品。

十、人性化帮助原则

1. 温馨的语言和表达

界面设计应该使用温馨、友好和人性化的语言和表达方式,让用户感到被关心和被尊重。

例如:在错误提示和帮助文档中使用亲切的语气和表达方式。

2. 关注用户情感和需求

界面设计应该关注用户的情感和需求,根据用户的心理和情感状态来设计界面和提供帮助。

例如:在用户遇到困难或者错误时,表达理解和支持,提供鼓励和安慰。

3. 个性化的帮助和支持

界面设计应该提供个性化的帮助和支持,根据用户的偏好和习惯来提供定制化的解决方案。

例如:根据用户的历史操作记录和偏好,推荐相关的帮助文档或者解决方案。

4. 及时的反馈和回应

界面应该及时地回应用户的需求和问题,给予及时的反馈和解决方案。

例如:提供实时的在线支持和反馈渠道,让用户能够随时联系到客户服务团队。

5. 鼓励和奖励用户行为

界面设计应该鼓励和奖励用户的积极行为,增强用户的参与和忠诚度。

例如:通过积分系统或者优惠活动来奖励用户的购买行为和参与度。

6. 提供愉快的体验

界面设计应该提供愉快和愉悦的使用体验,让用户感到舒适和愉快。

例如:通过动画、音效等方式增强界面的趣味性和互动性,让用户感到愉悦和享受。

7. 尊重用户隐私和权利

界面设计应该尊重用户的隐私和权利,保护用户的个人信息和数据安全。

例如:明确告知用户数据的使用目的和范围,遵守相关的隐私政策和法律法规。

人性化帮助原则在生活中有哪些体现呢?

例如:人行道上的盲道,看新闻时的手语讲解介绍,都是比较人性化的一部分,还有卖的老年机等等。

总结一下

关于尼尔森十大设计原则包括可见性、反馈、控制性、一致性、容错、简洁性、灵活高效、帮助用户识别和解决问题、人性化帮助、用户控制和自由。

以下为此原则优点详解:

1.提高用户体验质量: 这些原则旨在提高用户对产品的整体感受和满意度,使用户更愿意使用并持续与产品互动。

2.降低学习成本: 设计原则的一致性和可见性帮助用户更快地熟悉界面,减少了学习新功能的时间和认知负担。

3.增强用户参与度: 提供了用户控制和自由的原则,使用户感到更加投入和自主,从而增强了其对产品的参与度。

4.提升用户效率: 设计原则的灵活高效性使用户能够更快速地完成任务,提高了用户的工作效率和操作效率。

5.减少用户错误: 容错性原则和帮助用户识别和解决问题的原则有助于减少用户的错误操作,提高了用户的成功率。

6.简化用户交互: 一致性、简洁性和灵活高效性设计原则简化了用户与产品之间的交互,使用户界面更加直观和易于理解。

7.增强产品的竞争力: 设计原则的综合应用使得产品更具有吸引力和竞争力,有助于产品在市场中脱颖而出。

8.提高用户忠诚度: 人性化帮助和用户控制和自由原则增强了用户对产品的信任和忠诚度,使用户更愿意选择并长期使用产品。

9.节约资源成本: 通过降低用户错误和提高用户效率,可以减少用户的时间和精力成本,从而节约了资源成本。

10.适应不同用户群体: 这些设计原则的灵活性和人性化帮助原则使得产品能够适应不同用户群体的需求和偏好,从而扩大了产品的受众范围。

参考文献:

https://www.nngroup.com/articles/ten-usability-heuristics/

https://medium.com/@nirbenita/the-10-design-heuristics-for-developers-1e70a9dc58a7

https://medium.com/@marialauraramirez/a-summary-of-nielsens-ux-principles-f482f32678f9

https://alonzowebster.medium.com/principles-of-ux-design-f7d5b193e19e

https://medium.com/@fireartstudio/common-ui-design-principles-d9889377f90b

https://medium.com/visual-side/10-usability-heuristics-for-user-interface-design-551dac8744e

专栏作家

南设,公众号:南设(ID:NANSHE18),人人都是产品经理专栏作家。专注设计,逻辑性强,注重体验。分享体验设计、人工智能开发等。

原文链接:https://www.woshipm.com/share/6064709.html

本文原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

image.png

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

B端表单标签」要怎么对齐才好

蓝蓝设计的小编

B端表单标签的对齐方式对用户体验和界面设计至关重要。本文深入探讨了不同表单标签对齐方式的优劣势及适用场景,包括行内标签、顶标签、左标签文字右对齐和左标签文字左对齐等,帮助设计师在实际工作中做出最佳选择,提升表单填写效率和用户体验。

表单作为B端系统最常见的组件之一,一些常见的do、don’t想必大家已经十分熟。今天我们唠一唠【表单标签】这个细节。

在一些成熟的组件库中,大都提供了上下布局的顶标签、左右布局的左标签等样式可供选择。左标签样式,在不同的产品中,又存在标签文字左对齐、右对齐的情况,那它们之间差异在哪呢?如何选择呢?

最近工作中,正好在梳理相关的规范,于是把自己的一些思考及处理经验整理了一下,分享出来~

先对齐一下语言:表单标签、表单域。

会从这几个维度进行比较,放一个简易版表格,下文细说。

① 行内标签

优势:

  • 浏览速度快:可用性测试结果显示,行内标签样式下,人眼从标签移动到域的时间仅为10ms,是几种样式中最快的。视觉路径一路向下,很流畅。
  • 标签文字弹性宽度大,可与域等宽。
  • 节约空间:标签、域合二为一,不单独占空间。

劣势:

用户操作阻塞:如输入框聚焦,输入内容时,行内标签隐藏,用户操作会受阻。

使用场景:

一般用于用户心智已经十分成熟的页面,比如登录页、注册页等。

② 顶标签

优势:

  • 浏览查看、填写均有优势:标签与域的距离接近,同时符合用户从上到下的视觉动线,操作会很连贯、流畅。
  • 标签文字弹性宽度大。
  • 页面横向空间节约。

劣势:

Y轴屏效低:对页面纵向空间的利用率会比较低。

使用场景:

  • 适合移动端表单填写场景。
  • 适用于英文等语言场景,相同意思下需要更多的字符表示,宽度更宽。
  • web端页面两侧狭长工具栏。
  • 希望用户快速填写表单且录入项数量不多时,比如,将复杂的长难表单拆解分步骤填写,每一步骤表单用顶标签表单。

③ 左标签-文字右对齐

优势:

  • 填写优势:标签和域的距离比文字左对齐更近,视觉关联较明确,便于用户填写。
  • 提升Y轴屏效:较于顶标签,节省页面纵向空间。

劣势:

  • 影响阅读效率:文字右对齐导致左侧参差不齐,不利于快速浏览表单。
  • 标签文字弹性宽度小:标签文字需精简,超过规定宽度出现换行,不适合狭长的空间场景。

使用场景:

  • 常用于web端表单填写场景。
  • 页面纵向空间紧张,但又需要保证填写效率时使用。

④ 左标签-文字左对齐

优势:

  • 快速查看优势:标签文字左侧对齐,方便用户从上到下快速扫视表单整体情况。
  • 提升Y轴屏效:相较于顶标签,节省页面纵向空间。
  • 相较于文字右对齐视觉上更规整。

劣势:

  • 标签与域的距离最远,人眼从标签移动到域的时间为500ms,视觉动线频繁跳动影响填写表单的效率。
  • 标签文字弹性宽度小:标签文字需精简,超过规定宽度出现换行,不适合狭长的空间场景。

使用场景:

  • 敏感数据表单填写:希望用户进行仔细阅读确认、放慢填写速度时使用,比如,准入资格认证等场景
  • 陌生数据表单填写:表单中含有大量可选的表单域、大量需要高级设置的陌生数据时,或问题无法被分成易处理的内容组,左对齐标签更易于用户多次浏览阅读标签信息。
  • 表单详情查看场景。
  • 表单域也分左、右对齐,常见于移动端,两种对齐方式也一起对比一下。

⑤ 域-右对齐

优势:

  • 标签文字弹性宽度大、更灵活。
  • 视觉上两端对齐,填写时不容易漏填。
  • 纵向空间利用率高。

劣势:

  • 标签与域的距离远,视觉跳动影响填写效率。
  • 使用场景:
  • 移动端表单填写。
  • web端两侧狭长工具栏,两端对齐会更美观。

⑥ 域-左对齐

优势:

  • 相较于域右对齐,标签、域距离更接近,视觉移动速度更快,从上到下的视觉动线更舒服。
  • 纵向空间利用率高。

劣势:

  • 选择器等类型的表单域,提示图标距离选项较远。
  • 标签文字弹性宽度小,需要宽度限制换行显示。

使用场景:

  • 移动端表单查看/填写。

本文由人人都是产品经理作者【Clippp】,微信公众号:【Clip设计夹】

原文链接:https://www.woshipm.com/share/6208137.html

原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于 CC0 协议。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

image.png

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

重塑设计流程,利用AI直接生成原型图

蓝蓝设计的小编

在科技飞速发展的当下,AI 技术正以前所未有的态势渗透到各个领域,设计行业也迎来了重大变革。MasterGo AI 作为一款创新型在线设计工具,为产品经理和设计师带来了全新的工作模式,重新定义了界面设计的边界。下面,让我们通过图文结合的方式,深入了解这款工具的魅力。

 

一、MasterGo AI:功能强大的一站式设计利器

 

MasterGo AI 隶属于一站式产品设计协作平台 MasterGo,它的出现,让设计工作变得更加高效和智能。这款工具的核心功能涵盖设计图生成、原型图制作、代码生成以及设计系统管理,每一项功能都直击传统设计流程的痛点。
 

4610a0458e000b26c41420856f8ecdc.png

 
在设计图生成方面,以往设计师从构思到绘制草图,再到细化设计,需要耗费大量时间和精力。如今,借助 MasterGo AI,只需在输入框中输入详细的文字描述,如 “打造一个复古风格的摄影 APP 编辑界面,底部有常用工具栏,包含裁剪、滤镜、调色等功能图标,中间是图片预览区,上方为操作菜单”,短短几分钟,就能生成布局合理、设计精美的 UI 设计图。这大大缩短了设计周期,让创意能够迅速转化为可视化成果。
 
原型图制作功能同样出色,它支持创建交互式原型,设计师可以轻松添加点击跳转、滑动切换等交互效果。这使得团队能够在产品开发前期快速验证设计,提前发现潜在问题,有效节省开发成本。例如在设计一款社交 APP 时,通过 MasterGo AI 制作的原型,能直观展示不同页面之间的交互逻辑,让团队成员更清晰地理解产品的使用流程。
 
代码生成功能更是 MasterGo AI 的一大亮点,生成的设计图可直接导出为 HTML、CSS 代码,还支持 Vue 和 React 等主流前端框架。这不仅减少了前端开发者从设计到开发的转换工作量,还实现了设计与开发的无缝衔接,提高了项目整体推进速度。

设计系统管理功能则助力团队建立和维护统一的设计规范。无论是颜色、字体,还是组件样式,都能在设计系统中统一管理,确保团队协作过程中设计的一致性与复用性,提升整体工作效率。
 

二、MasterGo AI 的独特优势:对比中凸显卓越

 

与即时 AI、墨刀 AI 等同类工具相比,MasterGo AI 在多个维度展现出明显优势。

从功能层面看,MasterGo AI 生成速度极快。输入相同设计需求,它能在几十秒内生成设计初稿,而部分竞品则需 1 - 2 分钟。在设计质量上,其基于先进深度学习算法和海量设计数据训练,生成的界面布局更合理,元素比例、间距协调,色彩搭配和谐自然。功能丰富度方面,除基本的设计图和原型图制作功能外,它还具备强大的设计系统管理与多框架代码生成功能,这是许多同类工具所不具备的。

使用体验上,MasterGo AI 也更胜一筹。其界面简洁直观,操作高度自动化,新手用户也能快速上手。调整设计元素时,提供直观的拖拽和参数调整界面,方便设计师实现创意。界面友好度高,清新简洁的设计风格,搭配清晰易懂的图标和文字标识,操作过程中还会实时提供智能提示和反馈。在团队协作方面,支持多人实时在线协作,团队成员可同时编辑和评论,极大提高沟通协作效率。
 
257198aba765c7a17ca87d772000edd.png
 

三、实际案例见证:MasterGo AI 助力项目成功

某教育科技公司计划开发一款在线学习 APP,旨在为学生提供个性化学习体验。项目初期,团队面临时间紧迫、预算有限的问题,且在界面设计上难以快速确定创新方向。

在传统设计模式下,完成一套满意的界面设计需要经历复杂流程,从市场调研、头脑风暴到绘制草图、细化设计,不仅耗时久,人力成本也高,而且创意激发存在一定难度。

引入 MasterGo AI 后,团队输入对 APP 界面的详细描述:“设计一个针对中小学生的在线学习 APP,首页要有课程分类导航,以卡片形式展示热门课程,顶部为搜索栏和个人中心入口,底部是学习社区、课程表和消息中心的快捷导航”。MasterGo AI 迅速生成多套不同风格的设计初稿,涵盖简约现代、可爱卡通等多种风格。
 
基于这些初稿,团队快速讨论筛选,确定设计方向。设计师利用实时编辑功能,对选定设计稿进行细节优化,如调整色彩搭配、优化按钮样式。MasterGo AI 根据设计师操作习惯和历史数据提供智能推荐,提高设计效率。最终,设计稿直接导出代码供前端开发使用,整个项目周期大幅缩短。据团队反馈,使用 MasterGo AI 后,界面设计时间缩短约 60%,人力成本降低 40%,APP 上线后,凭借独特新颖的界面设计吸引大量用户,在竞争激烈的在线教育市场中崭露头角。
 

四、快速上手 MasterGo AI

想要使用 MasterGo AI,先注册登录。注册成功后就能进入设计界面。使用时,向它输入文字描述很关键,描述得越详细精准,比如明确设计对象的目标用户、功能模块、色调偏好、布局要求等,再融入优秀设计示例的风格元素,多运用专业设计术语,生成的设计就越符合预期。

设计稿生成后还能编辑,通过界面的工具栏可修改元素属性、编辑文本、添加或删除元素等。完成编辑,就能导出设计稿,它支持多种格式,像代码格式方便前端开发,图片格式用于展示,还有能和其他设计工具协作的格式。另外,MasterGo AI 有免费版还提供积分,也有不同的付费套餐,用户可以根据需求选择。
 
d6dbc177402e281952d7ad5be56d0b4.png
 

五、展望未来:AI 驱动设计行业变革

随着 AI 技术持续发展,MasterGo AI 这类工具将对设计行业产生更为深远的影响。未来,设计师的工作模式将发生重大转变,基础设计工作由 AI 高效完成,设计师得以从繁琐的重复性劳动中解放出来,将更多精力投入到创意构思、用户体验研究和品牌价值塑造等核心领域。

设计师可借助 MasterGo AI 快速生成多个设计初稿获取灵感,再运用专业知识和审美能力进行优化完善,实现创意与效率的完美融合。这不仅能提升设计作品的质量和创新性,还将推动整个设计行业朝着更加智能化、高效化的方向发展。

MasterGo AI 为设计行业带来了全新的发展机遇,无论是产品经理、设计师还是开发团队,都能从中受益。它让设计变得更加简单、高效、智能,开启了设计领域的新篇章,值得每一位设计从业者深入探索和使用。

日历

链接

个人资料

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

存档