首页

从方法到工具,兰亭妙微设计师带你高效搞定图表设计

清阳 设计资源

数据可视化,是用视觉语言与数据对话。一份好的图表设计,不仅要美观,更要精准传递信息、高效辅助决策。兰亭妙微UI设计公司结合实战经验,从图表选型、设计原则、视觉规范、实用工具四大维度,帮你从零到一做好专业图表设计。
 

 

一、数据可视化的核心价值

image.png

数据本身是抽象的,可视化是让数据产生价值的关键。它能把复杂数字转化为直观图形,帮我们快速识别趋势、差异、分布、占比、流转等核心信息,避免因表达不当导致信息失真。

image.png

日常设计中,很多人过度追求视觉效果,却忽略数据与图表的匹配度,最终让好看的图表失去实用意义。好的可视化,永远是数据为先,设计为辅
 

 

二、图表设计核心方法:先选对,再做好

image.png

图表设计以目标为导向,先明确要传递的信息,再匹配图表类型,三步即可完成正确选型。
 

1. 图表选型三步法

image.png

(1)读懂数据:明确核心关系

 
先锁定页面最重要的数据,确定要表达的核心关系:
 
  • 比较:不同类别数据差异
  • 趋势:随时间 / 序列的变化
  • 分布:多变量关联与规律
  • 构成:整体与部分的占比
  • 流转:流程阶段的数值变化
 

(2)分析用户:匹配阅读需求

image.png

不同角色关注重点不同:
 
  • 管理者:看整体趋势、核心结果
  • 业务岗:看细分对比、个体变化
  • 执行层:看明细数据、流程节点
 

(3)按数据关系选图表

image.png

  • 比较类:柱形图、条形图、折线图
     
    柱 / 条形图:快速对比类别差异,是最通用的选择;
    image.png
    折线图:展示连续数据(如时间)的变化趋势。
  • 分布类:散点图、气泡图、雷达图

    image.png

    散点图:看变量相关性;气泡图:新增维度用大小表达;雷达图:多指标综合对比。
  • 构成类:饼图、环形图、树状图

    image.png

    饼 / 环形图:展示单一维度占比;树状图:呈现层级化结构占比。
  • 流转类:漏斗图、瀑布图、桑基图

    image.png

    漏斗图:转化流程分析;瀑布图:数值增减变化;桑基图:数据流向与分配。
 

2. 信息图形(Infographic)

image.png

偏向艺术化的可视化形式,适合科普、新闻、报告等场景,侧重易懂、美观、定制化,需要设计师具备信息提炼与视觉美化能力。
 

 

三、图表设计四大原则

 
遵循原则,避免信息扭曲,提升可读性。
 
  1. 准确性

    image.png

    数据真实无扭曲,优先用大众熟悉的图表(柱、线、饼);颜色不超过 5 种,降低认知负担。
  2. 一致性

    image.png

    颜色、样式、术语全局统一,同一指标固定用同一颜色,保持视觉连贯。
  3. 辅助性

    image.png

    用标题、图例、交互提示降低理解成本;小众图表需加说明,通用图表保持简洁。
  4. 可扩展性

    image.png

    适配多设备尺寸,兼顾宏观(整体)与微观(单点)数据;通过小图预览、大图交互实现层级展示。
 

 

四、图表视觉设计规范

 

1. 基础构成

image.png

  • 标题与说明:清晰点明核心结论,副标题补充数据范围、时间等背景;
  • 坐标轴与网格:横轴常用作时间 / 类别,纵轴为数值;网格线密度适中,小图可省略;
  • 图形元素:柱、线、点等保持简洁,适配真实数据与极限场景。
 

2. 颜色设计

image.png

  • 用法逻辑:色相区分类别,明度 / 饱和度表达数值梯度;
  • 配色方式:邻近色(温和统一)、互补色(强对比突出)、连续渐变(体现数值变化);
  • 品牌适配:沿用品牌色,或从 Logo、素材图提取配色,保持视觉统一。
 

3. 数据墨水比

image.png

核心:用最少的装饰,传递最多的数据信息
 
  • 保留核心数据元素,删除无关装饰;
  • 不过度简化导致信息缺失,在简洁与完整间平衡。
 

 

五、高效图表设计工具

 
无需复杂操作,在线 / 开源工具快速出图:
 
  1. Flourish:在线可视化平台,模板丰富,支持多数据源导入与一键导出;image.png
  2. ECharts:开源免费,配置灵活,兼容多端,适合前端开发与设计师使用;image.png
  3. Tableau Public:拖拽式操作,快速制作交互式仪表盘,支持在线分享;image.png
  4. Informationisbeautiful:创意可视化模板,适合制作高颜值信息图;image.png
  5. D3.js:前端可视化库,支持高度自定义交互图表;image.png
  6. 配色工具:Muzli Colors、Coolors、Brand Colors、Flat UI Colors。

     

    转载:优设

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

米勒定律:破解短时记忆密码,重塑设计逻辑

涛涛

在信息爆炸的当下,用户每天要面对成百上千条信息冲击,如何让产品信息被高效接收、记忆?67 年前,美国心理学家乔治・米勒提出的 “7±2 法则”,为现代设计提供了穿越认知迷雾的指南针。这一被称为 “米勒定律” 的理论,不仅揭示了人类短时记忆的底层规律,更成为交互设计、产品界面、信息架构的核心指导原则,至今仍深刻影响着每一个与用户体验相关的领域。

设计四大核心原则:让作品从 “无序” 到 “专业” 的底层逻辑

涛涛

设计的本质是信息的有效传递,而好的设计从不依赖天赋的灵光一现,而是遵循着万物共通的底层规律。人类作为视觉动物,80% 的外界信息通过视觉获取,且对有序、关联的视觉元素有着天然的偏好。对比、重复、对齐、亲密性这四大设计原则,正是契合人类视觉认知规律的核心方法论,它们相互支撑、相辅相成,能帮设计师打破 “凭感觉设计” 的困境,打造出逻辑清晰、视觉舒适的专业作品。

用户体验一致性思考

涛涛

在团队内部,我们已确立了一套设计规范,在日常项目中使用设计规范输出变的高效、统一。然而,在实际操作中,不可避免地会遇到一些特殊情况:某些客户提出的个性化需求并不完全契合既定的设计规范,这些促使我们不得不在保持设计一致性的基础上进行灵活调整。因此,深入反思并优化一致性原则的应用策略显得尤为重要。我们需要探索如何在坚守设计规范核心精神的同时,灵活应对多变的需求,确保设计既保持统一和谐,又能满足特定场景下的独特需求,从而实现用户体验与品牌价值的双重提升。

总结七大设计原则,打造高素质的 ui 界面

lanlanwork

优质 UI 设计至关重要。提出了七大设计原则,包括简单(剔除华丽装饰与不必要元素,专注核心用户体验,如挪威餐厅 Maaemo 网站,预订表单突出,次要内容藏于汉堡菜单)、清晰(按钮和操作标签文字指向明确,避免冗长复杂文本

2025年UI/UX趋势

清阳

2025年,UI/UX设计领域正迎来一系列令人兴奋的创新趋势。从更具沉浸感的3D元素到人性化的分区设计,从动态排版到模糊与颗粒效果的巧妙运用,再到生物识别技术的普及和可穿戴设备的深度适配,这些趋势不仅让界面更加美观,更提升了用户体验和情感共鸣。本文将深入探讨这些前沿设计趋势,为设计师和产品团队提供灵感和方向,帮助他们打造出更具吸引力和实用性的数字产品。

2025 年,数字设计领域会有很多新机会,这都得靠创新来推动。设计师们现在越来越大胆,敢打破传统套路,设计出的东西不仅要实用,还得有吸引力,能真正打动人。

比如,会有更多 3D 元素加入设计里,让用户感觉更真实、更沉浸;还有很多设计会把 “方便用户” 和 “拉近人际距离” 放在首位,不再只追求技术炫酷,而是更关注用户的实际需求和情感感受。

那么我们来看一下有哪些趋势~

1、分区设计(便当格):像整理抽屉一样规划界面

你有没有过这样的体验?打开一个 APP,信息像 “乱炖” 一样堆在一起,找半天找不到重点。

2025 年的设计师学会了 “断舍离”

就像日式便当盒把饭菜分成不同格子,现在设计师也把网页或 APP 界面分成多个 “小格子”,每个格子放不同功能或内容(比如数据、图片、文字)。

好处:信息更清晰,用户一眼就能看出重点,而且设计师可以灵活排列,让页面既整齐又好看。

比如有的网站用这种格子展示不同模块,重要内容更突出,干扰少。

分区设计技巧:格子的大小、间距、边框都有讲究!重要内容的格子更大、边框更粗,次要信息的格子更 “低调”,就像妈妈给你装便当,爱吃的菜永远摆在最显眼的位置。

图片网站链接:https://selestial.co/

2、3D 元素:让界面从 “照片” 变成 “小世界”

以前网页里的 3D 图像是 “摆件”,现在它们会 “互动” 了!

3D 效果不是新鲜事,但现在更厉害:能互动、能沉浸!

比如网页里的物体可以 360 度旋转,虚拟试穿衣服、查看产品细节,甚至结合 AR/VR 让你感觉身临其境。

现在手机和浏览器性能更强了,3D 元素加载更快,甚至能在低配设备上流畅运行,设计师可以大胆用毛茸茸的 3D 图标、会 “呼吸” 的动态按钮(比如按钮按下时像真的被按下去一样凹陷)。

好处:画面更立体、有趣,用户体验像在真实世界互动,不再是死板的图片和文字。

图片网站链接:https://kevinhilgendorf.com/

图片网站链接:https://labs.chaingpt.org/

3、动态排版:文字会 “讲故事” 了

字体不再老老实实不动,而是会 “跳舞”:大小变化、颜色渐变、跟着用户操作移动,甚至根据内容情绪调整动画(比如错误提示字体变红闪烁,成功提示变绿飘动)。

好处:吸引注意力,传递品牌个性,比如让标题动起来,用户一眼就被抓住。

文字不再是 “死板的符号”,而是会 “表演” 的演员,我们可以做一些交互创意方面的案例假设

案例1:一个新闻网站的标题 “今日热点”,当你滚动页面时,“热点” 两个字会像火苗一样跳动,吸引你点击;电商网站的 “限时折扣” 按钮,文字会从左到右 “跑马灯” 式滚动,仿佛在喊 “快看我!”。

案例2:社交媒体 APP 的评论区,当有人给你发 “生日快乐”,“生日快乐” 这几个字会飘出彩色 confetti(纸屑),还会放大缩小;如果收到一条提醒 “网络连接失败”,文字会变成红色,轻微抖动,像在着急地告诉你 “出问题啦”。

案例3:未来的动态字体甚至能根据你的输入语气自动调整!比如你在聊天框里输入 “气死我了!”,发送后文字会变成红色,扭曲变形,模拟 “愤怒” 的情绪;输入 “哈哈哈哈哈”,文字会笑着上下弹跳,自带喜感。

图片网站链接:https://wodniack.dev/

图片网站链接:https://romaingranai.xyz/

4、模糊 & 颗粒效果:给界面加一层 “温柔滤镜”

背景不再是纯色或简单渐变,而是加了 “滤镜”:有的模糊像柔光,有的带颗粒感像老照片,让界面更有层次和温度。

好处:不抢主内容的风头,却能增加细腻的质感,让用户觉得界面更精致、有 “呼吸感”。

想象一下:你的屏幕不再是冰冷的玻璃,而是像磨砂质感的灯罩,透着柔和的光 ——

例如:一个阅读 APP 的背景,不是纯灰色,而是带点模糊的浅灰,像隔着一层薄雾,文字浮在上面更突出,眼睛看久了也不累;

短视频 APP 的点赞按钮背后,有淡淡的颗粒感,像老电影胶片,点击时还会有轻微的 “沙沙” 声,复古又治愈。

例如:有些网站的光标变成了半透明的小圆圈,移动时会在背景留下淡淡的拖影,像在雪地上踩出脚印;

购物车图标点击时,周围会升起细小的颗粒,像撒了一把金粉,让操作更有 “仪式感”。

现代人看腻了 “完美到反光” 的数字界面,这种带点 “不完美” 的质感,反而让人感觉亲切,像摸到了真实的纸张或布料。

图片网站链接:https://breadzine.com/

5、暗色模式:从 “暗黑冷酷” 到 “深夜暖灯”

以前的暗色模式是 “纯黑配白字”,刺眼又冰冷,现在设计师给它加了 “柔光滤镜”:

不是纯黑背景配白字那种刺眼的暗模式,而是柔和的 “低对比度暗调”:比如深灰配浅灰,带点淡淡光影,像傍晚的光线一样舒服。

好处:保护眼睛,减少视觉疲劳,还营造出高级、安静的氛围,比传统暗模式更温馨。

颜色更温柔:比如微信的暗色模式,背景不是纯黑,而是深海军蓝,文字是浅灰色,图标带一点淡金色光泽,晚上刷手机像在暖黄色的台灯下看书,不刺眼还很高级。

场景化设计:一个助眠 APP 的低光模式,界面会模拟 “月光效果”,背景有淡淡的云层阴影,按钮像夜空中的星星一样微微闪烁,配合白噪音,让你还没开始冥想就先放松下来。

保护眼睛更贴心:低对比度设计减少视觉疲劳,尤其适合长时间用手机的上班族、学生党,再也不用担心晚上刷手机 “亮瞎眼”。

图片网站链接:https://www.chromatique.studio/

图片网站链接:https://dribbble.com/shots/24281290-Kenn-Food-Processor-Landing-Page

图片网站链接:https://silverdrive.nl/

6、UX文案:界面里的 “贴心小助手”

你有没有被 APP或网站 的 “谜之提示” 搞懵过?比如 “操作异常,请重试”—— 到底哪里异常?现在设计师开始 “说人话” 了

按钮上的字、提示信息、错误提醒…… 这些细节文字越来越重要。比如 “提交” 改成 “确认发布”,错误提示写 “网络好像断了,点击重试” 而不是冷冰冰的 “错误 404”。

好处:让用户知道该做什么,减少操作困惑,就像有个小助手在旁边轻声指导。

按钮文案更具体:以前 “提交” 按钮,现在改成 “确认并发布动态”,你一下就知道点了之后会发生什么;购物车的 “结算” 按钮变成 “去支付(含 3 件商品)”,清楚告诉你当前购物车数量。

错误提示会 “安慰人”:当你登录密码输错,不再是 “密码错误”,而是 “密码好像不对哦,是不是字母大小写搞错了?试试找回密码吧~”,带点 emoji 和亲切感,让你不烦躁。

空状态会 “引导”:比如一个笔记 APP 的空白页,不再是冷冰冰的 “暂无笔记”,而是画着一个小台灯,配文 “点击新建笔记,开始记录今天的小确幸吧~”,鼓励你行动起来。

图片网站链接:https://clickup.com/

图片网站链接:https://www.headspace.com/

7、生物识别:靠 “脸” 吃饭,告别密码焦虑

不用记复杂密码了!指纹、人脸、语音识别越来越普及,甚至未来可能用眼动或神经信号验证。比如手机刷脸解锁、支付时扫指纹,又快又安全。

好处:再也不怕忘记密码,登录像 “本能反应” 一样自然。 

你还记得自己设过多少个密码吗?邮箱、银行、社交软件……2025 年,你只需要 “露个脸”

“扫个指纹”:

生活场景:早上上班,刷脸打开公司门禁;午休用指纹支付买咖啡;晚上回家,虹膜识别解锁手机,全程不用输密码。甚至连银行 APP 转账,看一眼摄像头就能确认身份,安全又快捷。

默默验证更省心:有些 APP 会 “偷偷” 验证你 —— 比如你常用手机的手势是右手拇指解锁,系统会记录你的握持姿势,当检测到左手拿手机且指纹不符时,自动触发安全提醒,不用你手动操作,安全藏在细节里。

特殊场景:比如戴着手套不方便指纹解锁?未来的可穿戴设备可能支持 “静脉识别”,通过血管纹路确认身份,下雨天、运动时也能轻松解锁。

图片网站链接:https://dribbble.com/shots/23201694-Face-id

8、可穿戴设备设计:从 “戴在身上” 到 “长在身上”

智能手表不再是 “缩小版手机”,而是更懂你的 “贴身伙伴”:

智能手表、VR 眼镜、健康手环等设备的设计越来越难:屏幕小,怎么让用户操作方便?

比如用手势滑动、语音命令,甚至靠眨眼控制;还要考虑戴着舒服(轻、贴合手腕)、续航久、适应各种场景(运动时防水,强光下看得清)。

小屏幕大讲究:比如一个运动手表,跑步时屏幕自动切换成 “极简模式”,只显示配速、心率、里程,字体超大,你 glancing(扫一眼)就能看清;当你停下来休息,屏幕会慢慢显示更详细的数据,像个贴心教练。

交互方式创新:VR 眼镜不再靠手柄操作,你眨眨眼就能切换菜单,点点头就能确认;智能手环检测到你睡眠不好,早上会震动提醒 “昨晚睡眠质量一般,今天记得多喝水哦”,还会同步调整手机的屏幕亮度,帮你缓解疲劳。

场景化适配:比如滑雪专用智能眼镜,强光下自动调暗镜片,检测到你加速滑行时,界面只显示速度和路线,避免分心;潜水手表接触到水时,自动锁定屏幕防止误触,浮出水面后又恢复正常。

图片网站链接:https://inspect-ar.com/en/

图片网站链接:https://dribbble.com/shots/18628321-Fitness-Smart-Watch-UI

2025 年的设计趋势:“以人为本”

界面不再只追求好看,还要让用户用得爽、有情感共鸣:分区清晰、3D 互动、动态字体吸引眼球,模糊背景和低光模式让眼睛舒服;UX 写作和生物识别减少操作麻烦,可穿戴设备更懂用户的使用场景。

本文由人人都是产品经理作者【南设】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

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

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

进阶思维 | UI设计师必须掌握的四个设计原则

涛涛

好的设计作品总是需要遵循一定的设计原则,而优秀的设计师则需要将设计原则根植于心,灵活应运于日常的设计中。通过对大量作品的揣摩和提炼,本文总结了以下四个在 UI 界面设计中至关重要的设计原则。只要仔细思考,反复推敲,必然会打通任督二脉,设计能力稳步提升!

尼尔森十大设计原则

鹤鹤

 
尼尔森十大设计原则是由著名的用户体验专家、网站设计师雅各布·尼尔森(Jakob Nielsen)提出的。这些原则旨在帮助设计师创建更具用户友好性和易用性的数字产品和网站。
这些原则的来源可以追溯到尼尔森在其著作《使用者体验的十大原则》("10 Usability Heuristics for User Interface Design")中提出的。

设计原则之一致性

鹤鹤

一致性的字面意思和使用的场景不同代表的含义也会有区别,这里主要使用在UI/UX设计中。
UI/UX设计中一致性是指在整个应用程序或网站中使用相同的设计元素和模式。它涉及在所有页面和屏幕上使用相同的视觉语言、布局和交互,以创造一致且直观的用户体验。一致性有助于用户了解如何浏览应用程序或网站,消除困惑和沮丧,并使他们更容易学习和记住如何使用产品。
设计并非孤立的实践。它与其他领域交织在一起,其中之一就是心理学。在设计中发挥根本作用的心理学原理是重复定律。
这一定律的起源可以追溯到 20 世纪早期,当时德国心理学家赫尔曼·艾宾浩斯进行了开创性的研究。他的工作对理解人类记忆具有革命性意义。艾宾浩斯最著名的贡献是“遗忘曲线”,它表明如果不尝试保留信息,信息会随着时间的推移而丢失。然而,他还发现,反复接触信息会极大地影响我们记忆信息的能力。从本质上讲,重复可以强化回忆。

设计原则之一致性

前端达人

一、什么是一致性呢?
二、  为什么一致性很重要呢?
三、  生活中一致性的案例
四、  UI设计一致性的体现
五、  交互设计一致性的体现
六、  总结
设计原则之一致性
 
 
一、什么是一致性呢?
一致性的字面意思和使用的场景不同代表的含义也会有区别,这里主要使用在UI/UX设计中。
UI/UX设计中一致性是指在整个应用程序或网站中使用相同的设计元素和模式。它涉及在所有页面和屏幕上使用相同的视觉语言、布局和交互,以创造一致且直观的用户体验。一致性有助于用户了解如何浏览应用程序或网站,消除困惑和沮丧,并使他们更容易学习和记住如何使用产品。
设计并非孤立的实践。它与其他领域交织在一起,其中之一就是心理学。在设计中发挥根本作用的心理学原理是重复定律。
这一定律的起源可以追溯到 20 世纪早期,当时德国心理学家赫尔曼·艾宾浩斯进行了开创性的研究。他的工作对理解人类记忆具有革命性意义。艾宾浩斯最著名的贡献是“遗忘曲线”,它表明如果不尝试保留信息,信息会随着时间的推移而丢失。然而,他还发现,反复接触信息会极大地影响我们记忆信息的能力。从本质上讲,重复可以强化回忆。
 
设计原则之一致性
 
 
艾宾浩斯的重复实验主要关注学习和记忆的过程,但其影响远不止于此。这让人们认识到,重复的元素更容易被记住,从而引导观众的注意力和焦点。很明显,重复可以用来引导行为和理解。
通过重复颜色、形状和图案等特定元素,设计师可以创造一种统一感和节奏感。这种重复还使设计师能够强调基本元素或信息。
重复不仅仅是一种设计原则,更是生活的一个基本方面。在自然界中,重复以各种方式体现,从雪花的对称性到海浪拍打海岸的韵律图案,从贝壳的螺旋到一年四季的循环。这种自然的重复带来了节奏、结构和可预测性,创造了一种舒适和熟悉的感觉。
人类是自然的一部分,天生就能够识别和响应这些模式。我们的大脑是出色的模式识别机器,我们倾向于认为重复的模式令人感到舒适和熟悉。这种认知特征解释了为什么设计中的重复模式(无论是在数字界面、实体产品、建筑还是营销中)会引起我们的共鸣。
设计原则之一致性
 
 
二、  为什么一致性很重要?
在 iOS 的设计指南中,一致性被视为让设计融入 iOS 生态的关键,它帮助用户在不同应用间建立起一种熟悉感。遵循规范的一致性可以「help your design feel at home in iOS」,保持一致性是为用户带来产品愉悦感的重要方式。
在经典交互设计原则中,「一致性」一直是重要的设计准则。在几乎可以称为「设计师必读」的雅各布·尼尔森的十条可用性原则中,一致性(Consistency and standards)位列第四,原则建议设计者在界面和交互上遵循既定的规则,无论是在应用内部还是跨平台之间。
在具体的执行中,内部一致性通常指应用内应当使用统一的视觉风格和交互语言,相同的功能和操作应该在体验上保持一致。而外部一致性则更强调用户应该遵循平台和系统的设计规范,保持用户在同一平台不同应用间体验的相似性。
一致性在UI/UX(用户界面/用户体验)中非常重要,因为它对于提供良好的用户体验和用户界面的可用性至关重要。下面详细说明一致性的几个重要原因:
 
设计原则之一致性
 
 
1、  用户学习曲线:
一致的UI/UX设计可以降低用户的学习曲线。当用户在应用程序或网站中遇到一致的元素、布局和交互方式时,他们可以快速理解并准确预测如何与界面进行交互。这减少了用户的混淆和困惑,提高了他们的效率和满意度。
2、  提升可用性:
一致性使用户界面更加易于使用。当用户在不同的页面或功能之间找到相似的设计元素和交互模式时,他们可以轻松地将已有的知识和经验应用于新的情境中。这种一致性帮助用户快速完成任务,减少错误和迷失,提供更好的导航和流畅的体验。
3、  品牌认可度:
一致的UI/UX设计有助于树立品牌形象和增强品牌认可度。通过在不同的渠道和平台上保持一致的设计元素、标识和视觉风格,品牌可以建立起独特而可识别的形象。用户在不同的触点上都能感受到品牌的一致性,从而增加品牌的信任和忠诚度。
4、  用户满意度:
一致性直接影响用户的满意度。当用户在使用应用程序或网站时感受到一致的设计和交互方式时,他们会感到更加舒适和自信。一致性传递了专业和质量的信号,让用户感到被关注和重视。这种积极的用户体验有助于提升用户满意度,并促使他们持续使用和推荐你的产品或服务。
 
三、  生活中一致性的案例
设计原则之一致性
 
 
生活中的案例保持一致性的有很多,
a、例如红绿灯,在学习驾照或老师教学时会统一讲解红灯停,绿灯行。
b、向左向右箭头符号的使用,在日常生活中都会保持一致。
c、我们乘坐地铁时,地铁的线路图也会保持一致性,每个站的点大小,文字,到站和未到站以及行驶过的站点都有清晰统一的设计和交互操作。
 
四、  UI设计一致性的体现
 
设计原则之一致性
 
 
1、  颜色
颜色是一种物理现象和感官体验,是光波在人眼视网膜上的反射或吸收所形成的视觉效果。
设计中的颜色选择代表了一个项目的品牌,例如常见的饿了么蓝,美团的黄,京东的红等等,颜色的一致性有助于营造良好的视觉体验,强化品牌形象,提升可用性和无障碍性,最终改善用户的整体交互感受。这对于产品的成功至关重要。在设计时颜色(品牌色)会延续到按钮,图标,字体、标签,背景,banner等模块使用。
设计原则之一致性
 
 
2、  字体
字体是一种特定的文字样式,它描述了文字的形状、大小、粗细、间距等视觉特征。
字体是设计中非常重要的元素之一,不同类型的字体,字体的粗细,有衬线字体和有衬线字体,字体的字重等,这些不一致会造成页面混乱,字体的选择和使用会对用户的视觉体验、信息感知、品牌联系和情感体验产生重要影响。
开发实现上如果字体使用较多,会影响加载速度,没有统一的字体制定规则后期更新迭代也会比较繁琐,造成资源浪费。
 
设计原则之一致性
 
 
3、  图标
图标是一种简化的、具有视觉表现力的符号图形,在用户界面设计、信息传达等领域广泛应用。
在众多APP中,常使用APP的你肯定可以感受到,图标除了准确的表达某个含义,还需要在设计时保持一致性,图标的大小,设计的风格例如线型图标、填充图标、简约图标、立体图标、卡通图标等,如果这些图标风格进行混合使用就会造成混乱,影响用户体验,看起来很不专业也会影响用户使用时对于安全性的担忧。
设计原则之一致性
 
 
4、  按钮样式
按钮是一种常见的交互界面元素,用于触发某种操作或功能。
设计中的按钮有很多样式,因为项目类型的不同按钮样式也不同,按钮的样式有圆形按钮,矩形按钮,圆角矩形按钮,菱形按钮等,同一个项目中建议使用统一的按钮样式,除了可以体现专业性,还可以让用户增加信任度,按钮样式使用很多,用户除了使用体验不友好,还会觉得是不是跳出了这个产品去到了另一个地方。
 
设计原则之一致性
 
 
5、  排版
排版是指在印刷或数字媒体中,对文本、图像等内容进行有规则的布局和格式化的过程。
设计中排版的一致性,使用户能够快速适应和理解界面的结构,降低学习成本,用户对于熟悉的排版模式产生更强烈的归属感和安全感,使内容更易读,用户可以依照熟悉的视觉动线快速找到所需信息,提高信息获取效率。
五、  交互设计一致性的体现
 
设计原则之一致性
 
 
1、  操作一致
根据文字意思就是用户才操作时候的流程保持一致,操作保持一致,例如大家常见的下单购买商品流程,
用户在购买商品时:点击商品——商品详情——付款购买,其他商品也应该是这样流程,
如果每个商品流程不同就会很乱,例如:
点击A商品————商品详情——付款购买;
点击B商品——付款购买——查看商品详情;
点击C商品——同类商品列表——商品详情——付款购买,
这样就会很乱,用户不知道点击下一个商品会是什么样子。
例如:
设计原则之一致性
 
 
1、APP中的视频浏览是上下滑动,进入新的模块后视频浏览变成了左右滑动。
2、需要确认某些操作时,确认按钮一会在右侧,一会确认又在左侧。
用户在操作时会除了体验很乱,也很难培养用户习惯。
设计原则之一致性
 
 
2、  文案符号一致
文案和标点符号的一致比较好理解,例如常见的输入框,“请您输入帐号”,“请输入你的密码”,同一页面场景下文案和称呼不统一,会造成用户操作迟疑,是不是这个不重要才用了“你”,重要的才用“您”,为了避免用户进行不必要的思考文案保持一致,符号亦是如此。
设计原则之一致性
 
 
3、  反馈一致
当我们看到下一步按钮时,有些地方交互是进入了新的页面,有的是分步式使用。建议使用一种保持统一,避免用户产生误导。
操作反馈后的弹窗,相同功能反馈的弹窗样式不一致:一会是图文弹窗,一会纯文字提示,用户也会很乱,包括交互时出现的样式也需要保持一致,剧中或从下向上弹出。
六、  总结
一致性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悦的用户体验。通过保持设计元素、布局和交互方式的一致性,可以降低用户的认知负荷,提高用户的学习效率,增强品牌形象,提升用户满意度,并最终实现更好的业务成果,详细分为以下七点:
设计原则之一致性
 


作者:CANAAN8
链接:https://www.zcool.com.cn/article/ZMTYyMDQ3Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

个人资料

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

存档