首页

UI 设计中按钮用圆角还是直角?

涛涛

UI 设计中按钮用圆角还是直角需综合考量,圆角在网格布局中更易辨识,如 TurboTax 仪表板中圆角卡片比尖角更引人注目,全圆形按钮在 Spotify 中因突出交互引导成功,但全圆形按钮可能被误认标签、嵌套选项触摸区域小、不适合堆叠,而直角按钮在表格等堆叠布局中更合适,此外圆角传达现代、简约等感觉,像 Chrome 浏览器更新为全圆形地址栏,总之设计需以鼓励用户交互、减少干扰为目标,而非单纯选择圆角或直角。

一次糟糕的导航设计,怎样毁掉了整个用户体验

清阳

“导航系统是用户在信息环境中的方向感,没有它,一切设计都是迷宫。” ——《信息架构:超越Web设计》
 
糟糕导航,真能毁掉体验! 我最近帮一个客户诊断他们的网站:视觉很好看,动效很花哨,但用户却频繁抱怨“找不到内容”。结果一查,核心问题就在导航设计
同级栏目命名不统一,用户分不清差别;
二级菜单隐藏太深,点击才能发现;
不同页面导航结构不一致,导致迷路;
移动端和PC端导航布局完全不同,切换设备时用户无所适从。
 
书中有一句话特别扎心:“导航应该是信息环境中一致的标识系统,而不是隐藏信息的迷雾。”
这正好点出了他们的问题本质:导航不是装饰,而是用户认知路径的支撑。
 
 一次糟糕的导航,怎么毁掉体验?
用户需要多次点击才能找到目标内容 → 增加流失率
不一致的导航让用户记忆成本倍增 → 挫败感提升
重要页面被埋没,关键转化流程被中断 → 直接影响业务数据
比如这个网站有“产品中心”和“解决方案”,实际内容高度重叠,用户分不清该点哪一个;搜索结果页没有回到主导航的按钮,用户只能强制返回首页重来。
书里也强调:“不合逻辑的导航结构会导致用户迷失方向,并迅速放弃探索。”
 
如何快速自检你的导航?
打开你的网站,让一个没用过的人用导航找5个特定内容;
观察他们是否能在三次点击内到达;
如果他们频繁回到首页或说“不知道在哪里”,说明你的导航需要优化。

47ae6436-363d-40c4-9af1-b8abb353d43f (1).png

47ae6436-363d-40c4-9af1-b8abb353d43f.png

1280X1280 (1).PNG

1280X1280.PNG

39671bbb-2cbf-44fe-88b0-bf8626da4a1c.png

20250630-211953.png

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

交互设计是什么?有什么用?

涛涛

交互设计( interaction design, IXD ),从字面上来说,交互即为相互作用相互影响,设计即为理解与传达。在互联网产品中,交互设计对用户体验产生很大的影响。本文将围绕交互设计进行分析,与你分享。

UI设计几个要点轻松提升用户体验

涛涛

UI设计几个要点轻松提升用户体验

每个公司都需要自己的产品体验报告

涛涛

当产品体验报告不再是 PPT 里的静态文档,而成为实时迭代的决策引擎,传统五要素模型正经历三维进化:

Tesla Model 3 用户体验设计测评总结

涛涛

Tesla Model 3 在智能化与极简设计上表现突出,但导航与语音功能的短板、安全隐患(无 HUD)仍需优化,物理按键的取舍是未来迭代的关键争议点。

为什么圆角看起来更舒服

清阳

如今,设计师们对圆角的运用如此广泛,以至于它更像是一种行业标准,而非一种设计潮流。圆角不仅出现在软件用户界面中,也出现在硬件产品设计中。那么,圆角究竟为何如此受欢迎呢?它确实看起来很吸引人,但其背后的意义远不止于此。
圆角看起来不太明亮
任何人都能欣赏圆角的美感,但并非每个人都能解释这种美感究竟从何而来。答案就在你的眼睛里。
一些专家表示,圆角矩形比锐角矩形更容易被眼睛识别,因为它们在视觉处理过程中所需的认知努力更少。中央凹处理圆形物体的速度最快。处理边缘需要大脑中更多的“神经图像工具”[1]。因此,圆角矩形更容易被识别,因为它们看起来比普通矩形更接近圆形。
DM_20250703172854_003.PNG
巴罗神经学研究所对角线进行的科学研究发现,“角线的感知显著性与角线的角度呈线性变化。锐角比平角产生更强的虚幻显著性”[2]。换句话说,角线越锐利,看起来就越亮。而角线越亮,看起来就越难被看到。

DM_20250703172854_001.PNG

DM_20250703172854_002.GIF

 

哪个物体更容易观察?
我们习惯于圆角
我们之所以对圆角情有独钟,另一个解释是,圆角更符合我们在现实世界中使用日常物品的方式 [3]。圆角随处可见。作为孩子,我们很快就知道尖角容易伤人,圆角更安全。这就是为什么当孩子玩球时,大多数父母并不感到惊慌。
但如果孩子玩叉子,父母就会把叉子拿走,因为担心孩子会弄伤自己。这会引发神经科学中所谓的“回避反应”,即对锋利边缘的“回避反应”。因此,我们倾向于“避开锋利的边缘,因为它们在自然界中可能构成威胁”[4]。
 
您会把哪个物品托付给您的孩子?
圆角使信息更容易处理
圆角对于地图和图表来说更有效,因为它们能让我们的视线轻松地跟随线条,“因为它更符合头部和眼睛的自然运动”[5]。尖角会使你的视线偏离线条的路径,所以当线条改变方向时,你会感到突然的停顿。但有了圆角,线条会引导你的视线绕过每个拐角,继续沿着路径流畅地移动。
 
哪一个图表更容易让你的眼睛看清?
圆角也能成为有效的内容容器。这是因为圆角指向矩形的中心。这使得焦点集中在矩形内部的内容上。当两个矩形相邻时,圆角还能轻松区分哪条边属于哪个矩形。
尖角指向外侧,会降低矩形内部内容的视觉焦点。当两个矩形相邻时,尖角也使得难以区分矩形的两边。这是因为矩形的每条边都是直线。圆角矩形的边是独一无二的,因为这些线条会向其所属的矩形弯曲。
 
圆角的意义远不止于视觉所能感知的。圆角不仅更容易被眼睛识别,还能让信息更容易被理解。圆角本身就很吸引人,这一点毋庸置疑。但这些额外的因素让圆角更具吸引力。当你和客户谈论圆角时,你就能表达出更多内容,而不仅仅是“好看”。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

在开始任何用户体验研究之前要问的 3 个问题

清阳

 
关注研究后的决定
 
 
在开展研究之前,你首先需要理解为什么要进行这项研究。与你的利益相关者沟通,并明确写下他们在研究结束后想要做什么。他们是想在两个设计方向中选择一个?还是想识别并解决体验中的不足?又或许他们想构建一个全新的产品,只是想更好地了解某一特定用户群体?一旦你做到了这一点,你就可以开始设计问题来收集有用的数据了。
你的团队可能不知道自己想要做出什么决定,或者每个人对做什么都有不同的想法。这并不是坏事!意识到团队意见不一致本身就能带来启发。团队应该讨论产品路线图、市场力量、公司总体目标以及当前的产品分析,以便就研究方向达成一致。
 
问题 1:
询问“研究结束后,你希望做什么?”——与利益相关者进行一对一对话,规划重要的研究后决策。你可以同时询问整个团队,但你可能只会听到“最响亮”或“资深”的利益相关者的声音。
 
主题 #2
收集正确的信息
 
 
一旦你了解了团队在研究结束后的期望,你就应该与他们合作,找出哪些信息有助于他们采取这些行动。如果你的团队需要在两种设计方案中选择一个,那么单独收集可用性数据重要吗?还是同时收集每种设计给用户带来的感受?了解人们使用最新功能的频率是否有助于在研究结束后做出决策? 虽然收集“正确”的信息意义深远,但其核心在于弄清楚哪些来自用户的信息有助于更容易地做出这些一致的决策。在不同的情境下,“正确”的信息可能有所不同,甚至无法获得。例如,如果你的设计团队想知道用户在浏览设计时眼球是如何移动的,如果没有眼动追踪软件,这可能无法实现。如果您知道某些限制无法实现,请尽早告知团队,并尝试转向更容易回答的问题。
你的团队可能并不总是知道哪些东西值得学习,所以要准备好提出你可以研究的研究课题。只要确保这些课题与研究后的决策直接相关即可。
 
问题 #2:
问问自己:“哪些来自用户的信息有助于指导这些行动?” ——如果有多条信息有助于做出研究后决策,看看能否将它们归纳成更大的主题进行研究。您可以根据这些主题撰写研究问题。 看看能否将信息需求分为定性或定量类别。这能让您更轻松地规划研究并收集有用的信息。
 
主题 #3
选择一种方法
 
 
一旦你确定了决策和需要收集的有用信息,规划你的研究就会容易得多。尽量选择与研究后决策直接相关的研究问题、方法和参与者。如果你已经将信息需求分为定性/定量两类,那么选择方法应该会很快。
 
务必确定你需要在哪些限制条件下进行研究。这包括你的研究时长、招募参与者的难易程度、研究预算以及你拥有的研究工具或软件类型。基于这些限制,你可能需要以不同的方式研究定性信息需求(例如,进行远程访谈,而不是前往参与者所在地)。
 
在开始准备研究之前,将所有这些内容写进研究计划中,并获取反馈/协调意见。确保在你的研究计划中包含以下主题:
研究后决定
收集所需信息的研究问题
 
问题 3:
询问“在我们开始研究之前,这个研究计划是否需要改变?” - 尝试以数字方式发送研究计划,这样比找到开放日历时间来召开大型会议更快, 将所有反馈或评论记录在一个地方,快速进行和发送更改。
 
最后的想法
通过专注于决策和相关信息需求,您可以开展有意义的研究。缩小范围并确定重要事项,不仅能增强团队凝聚力,还能让他们对参与研究充满热情。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

交互设计思维:用户目标与交互目标

涛涛

前面的文章我们分享了交互设计思维,这篇文章,我们来看看用户目标与交互目标。交互设计的核心,就是帮用户拆解这些目标并找到最优路径,让他们觉得“这事儿没那么难”。

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

日历

链接

个人资料

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

存档