首页

APP优秀产品设计亮点

ui设计分享达人

为什么我想不到这些设计亮点
 
 
 
 
体验目录
 
一、这个隐藏的手势交互你忽略没
二、情感化的背景设计
三、自适应的瓷片区布局
四、考虑用户习惯的导航设计
五、应景的标签设计
六、情感化的心情记录
七、动态感的个人中心设计
八、动态 Banner 更有吸引力
九、有点意思的图标设计
十、营造冬季氛围的背景设计
 
  
 
一、这个隐藏的手势交互你忽略没
 
随着用户体验的不断升级,手势交互变得越发普及,使得产品操作体验变得更有互动感和趣味性。通过手势交互的辅助,让产品设计更加简化,更有利于用户实现操作目标。
 
我们经常用抖音刷短视频,可以通过单击底部标签栏“首页”进行刷新,长按则会弹出模式切换。通过手势交互的辅助可以快速切换单列、双列展示形式,以及刷新首页和默认静音设置,不知道这个操作你发现了吗?
为什么我想不到这些设计亮点
 
 
 
 
二、情感化的背景设计
 
情感化设计可以让产品与用户建立更强的共鸣感,让用户感受到产品的温度,促进对其服务的认可度。
 
在杭州生活的人会经常使用浙里办,在一些节庆、节气等时间段打开 App 时,顶部视觉区域背景会进行应景设计。通过情感化的表达方式营造氛围感的同时,也让用户感受到产品的温度,带来更加温馨的体验感。
为什么我想不到这些设计亮点
 
 
 
 
三、自适应的瓷片区布局
 
瓷片区的灵活性可以方便更多功能模块的布局,也能自由更换和增删处理,只要保障基础框架结构的稳定即可。
 
酷狗音乐未登录时首页推荐板块的瓷片区设计,在滑动过程中会进行自适应布局,方便进行结构的填充和内容的补充。默认时隐藏部分内容可以提高当前位置的利用率,便于提高更多内容的曝光度,交互过程中的动效表达也非常的流畅自然。
为什么我想不到这些设计亮点
 
 
 
 
四、考虑用户习惯的导航设计
 
抽屉式导航是导航设计表达的形式之一,由于属于隐藏式的设计,通常集合非操作频繁的功能。
 
酷狗音乐采用了底部标签栏和抽屉式导航结合的形式,即满足高频功能的便利性,也能集合更多低频功能。由于大屏手机的普及,用户单手操作的习惯各有差异,考虑用户左手或者右手都能轻松打开导航,酷狗音乐右上角的导航图标可以从右侧打开导航,左手贴边向右滑可以从左侧打开导航,满足了不同操作习惯的用户需求。
为什么我想不到这些设计亮点
 
 
 
 
五、应景的标签设计
 
标签设计的表达形式非常多样化,也被运用到众多的场景中,辅助内容的传播与理解等。
 
天气冷了,大家会在淘宝买一些秋冬服装等商品,当搜索秋冬外套、保暖等关键词时,会出现降温坐标、轻暖等标签设计。通过标签突出了商品关键词的特征,也让用户可以感受到季节的变化,促进商品被搜索的概率。
为什么我想不到这些设计亮点
 
 
 
 
六、情感化的心情记录
 
随着生活压力和职场压力的不断增加,为了缓解大家的焦虑情绪,衍生出很多日记类产品,帮助大家记录心情和管理调节。
 
最近在使用心岛日记记录心情时,记录界面设计感觉很有意思。通过转盘的交互形式选择心情,也通过应景的动效表达辅助心情传递,整体设计情感化体验度非常好。
为什么我想不到这些设计亮点
 
 
 
 
七、动态感的个人中心设计
 
个人中心的设计在整个产品设计中都是非常重要的存在,也因此出现了众多优秀的设计方案。
 
心岛日记的个人中心设计中,顶部区域背景以动态的形式表达,描绘出的场景让人心情愉悦。相较于静态画面的表达,动感的设计更能打动用户。
为什么我想不到这些设计亮点
 
 
 
 
八、动态 Banner 更有吸引力
 
Banner 设计在产品中的表现形式也非常丰富,可以在视觉创意中发挥,也可以在造型结构中变化,还能动静各异。
 
最近在使用支付宝时,首页为了突出发放消费券的活动,采用了动态 Banner 设计。突出的视觉和动感的效果,让活动变得特别突出,增加板块吸引力,提高用户参与度。
为什么我想不到这些设计亮点
 
 
 
 
九、有点意思的图标设计
 
随着图标设计的风格越来越多,使得产品设计的感官体验得到了提升,设计师也在不断尝试更多的创意表达。
 
最近在飞猪旅行 App 中,发现其图标设计有点意思。部分图标采用书法里面的连笔形式,结合渐变色使得整体图标风格年轻活泼,设计表达独特而有新意。
为什么我想不到这些设计亮点
 
 
 
 
十、营造冬季氛围的背景设计
 
冬天虽然很冷,但是也有独特的风景带给大家,在寒冷中感受这个季节的独特魅力。
 
飞猪旅行 App 在首页设计中,顶部背景区域结合冬季下雪与堆雪人等元素,以动态的形式营造了这个冬季独有的氛围感。不仅提升了产品的感官度,也让用户更有季节代入感。
为什么我想不到这些设计亮点
 
 
小结
 
设计灵感来源于日积月累,希望我们的产品体验日记栏目可以成为大家积累的来源。本文描述属于个人观点,不足之处大家留言补充。


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

2025 年 B 端界面设计的最新趋势与展望

ui设计分享达人

个性化设计

  • 打造个体专属形象1:随着 “超级个体” 时代的来临,B 端设计不再只关注企业整体,更注重为个体赋能。如钉钉等平台开始为用户提供动态头像等个性化功能,让员工能在工作场景中展现独特个性。
  • 满足个体情绪需求:通过色彩、插画等元素营造更具情感氛围的界面,比如 Teams 和 ONES 等产品利用色彩和插画设计,提升用户对品牌的情感认同,使工作不再枯燥。
  • 10_鍓湰.png

视觉设计创新

  • 渐变色的广泛应用2:渐变色重新定义了 B 端视觉美学,许多 B 端产品将背景和元素转变为渐变色,如 Baklib 官网的淡色背景渐变,既传达现代感与科技感,又实现了不同内容间的自然过渡。
  • 网格化布局流行2:网格化布局以其结构性受到青睐,像 Magnolia 与 Intercom 等企业的官网采用此布局,使内容分区明确,优化了页面可读性与逻辑性。

智能化融入

  • 突出 AI 元素2:AI 已成为 B 端设计的核心元素,众多 SaaS 平台在官网上直接强调与 AI 相关的功能,甚至在 Slogan 中加入关键词,展示企业的科技实力,让用户感受到前沿的科技形象。
  • 智能交互体验:借助 AI 实现智能提醒、自动推荐等功能,例如一些 B 端办公软件可以根据用户的使用习惯和工作流程,自动推送相关的任务和文件,提高工作效率。

交互设计升级

  • 微动效与微交互2:适度的动画和交互效果能够吸引用户注意,增强网站互动性,如在时间轴上滑动的效果、功能版块的滚动折叠等,让界面更加生动有趣,提升用户粘性。
  • 便捷的菜单导航2:折叠加展开的平铺菜单导航成为主流,清晰直观,方便用户快速找到所需信息,提高了信息获取的速度和便利性。
  • 22.png
展望未来,B 端界面设计还可能有以下发展方向:

沉浸式体验增强

随着技术的发展,B 端界面可能会更多地融入虚拟现实(VR)和增强现实(AR)技术,为用户带来沉浸式的操作体验。比如在设计建筑规划、机械维修等 B 端应用时,用户可以通过 VR 或 AR 技术更直观地进行操作和协作。

数据可视化深化

面对日益增长的数据量,数据可视化将更加复杂和精细。除了常见的图表和图形,可能会出现更具创意和互动性的数据展示方式,帮助用户更深入地理解数据背后的信息,为决策提供更有力的支持。

跨平台融合优化

企业使用的设备和平台越来越多样化,未来 B 端界面设计需要更好地实现跨平台融合,确保在不同的设备和操作系统上都能提供一致、流畅的用户体验。
总之,2025 年的 B 端界面设计正朝着个性化、智能化、创新化的方向发展,未来也将持续以满足用户需求、提升用户体验为目标,不断探索和创新。B 端设计师需要紧跟这些趋势,才能为企业创造出更具价值的产品和服务。
 

解锁B端按钮设计10大密码

ui设计分享达人

 
无法想象没有按钮的页面是什么滋味,那定会像没有方向盘的汽车,让人不知所措吧?也无法想象按钮设计不恰当,会给用户带来怎样的困扰?
 
面对十万火急的任务需求,
如果需要调动全部理性脑,深呼吸三秒,
才能找到想要执行操作的按钮入口,我想这样的产品设计是失败的,是会被用户所唾弃的。
 
本文将详细剖析按钮的神秘面纱,了解它、研究它,让按钮设计成为产品的得力助手,为我们的产品赋能,为我们的工作提效,下面就让我们开启这场神秘之旅吧!
 
解锁B端按钮设计10大密码
 
 
 
 
目录
一、按钮的定义
二、按钮设计的种类
三、按钮设计的尺寸
四、按钮的构成
五、按钮设计的作用
六、按钮的位置
七、按钮的颜色
八、按钮在UI界面的设计原则
九、按钮设计的注意事项
十、按钮弱化设计的六种方式
 
 
解锁B端按钮设计10大密码
 
 
按钮在我们生活中起着很大的作用,它就像我们的小助手一样,帮我们一键开启想要的任务,凡事都能一键触达。
 
解锁B端按钮设计10大密码
 
 
 
按钮在UI界面中,是一种界面交互控件,通常以矩形、圆形或其他几何形状呈现,具有明确的视觉边界。它通过用户的点击、触摸等操作来触发特定的功能或操作,如提交表单、执行命令、导航页面、切换状态等。
 
按钮一般包含文字标签、图标或两者的组合,以清晰传达其功能。
同时,按钮在不同状态下会呈现出不同的视觉效果,如默认状态、按下状态、悬浮状态、禁用状态等,为用户提供操作反馈和引导。
 
 
解锁B端按钮设计10大密码
 
 
1、Antdesign对按钮的种类划分:
 
 次按钮
常规按钮,用于非主要动作。如果不确定选择哪种按钮,次按钮永远是最安全的选择。
解锁B端按钮设计10大密码
 
 
 
❷ 
主按钮
突出“完成”、“推荐”类操作;一个按钮区最多使用一个主按钮。
解锁B端按钮设计10大密码
 
 
 
❸ 
文字按钮
弱化的按钮,采用更轻量的按钮样式,可用于需大面积展示按钮场景,例如下面的站酷活动页就用了很多的文字按钮,只有当按钮被选中时,按钮才会高亮选中。
解锁B端按钮设计10大密码
 
 
 
❹ 
图标按钮
图标提供视觉线索,避免逐字阅读按钮文案,更高效地使用界面,让页面看起来更加的简洁。
解锁B端按钮设计10大密码
 
 
解锁B端按钮设计10大密码
 
 
 
 
❺ 
在按钮中添加图标
用于对按钮含义补充解释,提高按钮识别效率。
解锁B端按钮设计10大密码
 
 
 
2、按钮的样式种类
按钮的样式可以从多个方面进行分类和设计,以下是一些常见的样式分类:
 
❶ 
按颜色划分:
单色按钮
按钮背景为单一颜色,如蓝色、绿色、红色等,常用于强调按钮的主要功能或操作。
 
渐变色按钮
按钮背景为渐变色,可以是线性渐变或径向渐变,通常用于增加视觉吸引力和现代感。
 
透明按钮
按钮背景透明或半透明,通常用于与背景融合或突出按钮上的文本和图标。
 
彩色边框按钮
按钮背景透明或浅色,但有彩色边框,常用于需要突出按钮边界的场景。
解锁B端按钮设计10大密码
 
 
 
 
❷ 
按形状分
矩形按钮
这种是最常见的按钮形状,适用于大多数界面设计。
 
圆形按钮
按钮形状为圆形,通常用于表示播放、暂停等操作,或用于具有特定功能的图标按钮。
 
圆角按钮
按钮形状通常为圆角矩形,常用于需要柔和视觉效果的场景。
 
自定义形状按钮
根据设计需求,按钮可以是任意自定义形状,如星形、心形等,常用于创意设计或特定主题的界面。
解锁B端按钮设计10大密码
 
 
 
❸ 
按边框分
无边框按钮
按钮没有边框,背景和文本直接显示,常用于简洁的界面设计。
 
细边框按钮
按钮有细边框,常用于区分按钮与周围元素,同时保持界面的简洁性。
 
粗边框按钮
按钮有粗边框,常用于强调按钮或与背景形成强烈对比。
 
虚线边框按钮
按钮边框为虚线,常用于表示辅助操作或非主要功能。
解锁B端按钮设计10大密码
 
 
 
❹ 
按图标分
图标按钮
按钮上只有图标,没有文本,常用于表示通用操作或节省空间的场景。
 
图标+文本按钮
按钮上既有图标又有文本,图标通常位于文本左侧或上方,常用于清晰表达按钮功能的场景。
解锁B端按钮设计10大密码
 
 
 
❺ 
按阴影样式分
无阴影按钮
按钮没有阴影,常用于简洁或平面风格的界面设计。
 
轻微阴影按钮
按钮有轻微的阴影效果,常用于增加按钮的立体感和层次感。
 
明显阴影按钮
按钮有明显的阴影效果,常用于突出按钮或与背景形成强烈对比。
 
动态阴影按钮
按钮的阴影效果会随着鼠标悬停或点击等交互动作而变化,常用于增加交互体验的趣味性。
解锁B端按钮设计10大密码
 
 
 
❻ 
按动画种类分
无动画按钮
按钮没有动画效果,常用于简洁或传统的界面设计。
 
悬停动画按钮
当鼠标悬停在按钮上时,按钮会有动画效果,如颜色渐变、边框变化、图标旋转等,常用于增加交互体验的趣味性和吸引力。
 
点击动画按钮
当点击按钮时,按钮会有动画效果,如缩放、震动、波纹等,常用于增加交互体验的反馈感。
马蜂窝的功能主按钮,在点击的时候都会产生动画,交互感十足。
解锁B端按钮设计10大密码
 
 
 
加载动画按钮
当按钮处于加载状态时,按钮会有加载动画效果,如旋转图标、进度条等,常用于告知用户操作正在进行中。
 
 
 
3、按钮的几种状态
解锁B端按钮设计10大密码
 
 
 
3.1 默认按钮
按钮的初始状态,通常具有正常的颜色、形状和文字显示,等待用户操作。
 
3.2 待激活状态按钮:
待激活状态按钮通常用于指示某个功能或服务尚未激活或启用,用户需要执行某些操作来激活它。这种按钮的设计和实现需要清晰地传达当前的状态,并引导用户进行下一步操作。
 
3.3 点击状态按钮:
当用户点击按钮时,按钮会呈现按下的状态,通常通过改变颜色、形状或添加阴影等方式来表示。
 
3.4 禁用按钮:
在某些情况下,按钮会处于禁用状态,无法进行操作,通常会以灰色或半透明的方式显示,提示用户当前操作不可用。
 
3.5加载状态按钮:
加载状态按钮通常用于指示某个过程正在进行中,例如数据加载、文件上传或页面正在加载等。这种按钮可以让用户知道他们的操作正在被处理,而不是卡住或出现错误。
 
3.6危险提示状态按钮:
危险提示状态按钮通常用于提醒用户即将执行的操作可能带来风险或不可逆的结果,例如删除重要文件、注销账户等。这种按钮的设计和实现需要让用户明确意识到操作的危险性,以避免误操作。
 
下边这两组弹框就是运用了危险按钮,来提示客户未来即将面临的风险,警示作用非常的明显。
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
1、 Web端的按钮尺寸建议
在Web端,按钮尺寸没有固定标准。不过,一般来讲,按钮的高度常在32px-48px之间,宽度可根据内容灵活设置,但最好不要小于48px,这样方便用户用手指(触屏设备)或鼠标点击。像一个简单的“提交”按钮,宽度可能是80px左右,高度是36px左右。这些尺寸能保证按钮在视觉上比较舒适,易于交互。
 
 
2、 麻省理工触摸实验对按钮尺寸的指导
麻省理工触摸实验室通过对人类指尖的研究,得出了关于界面按钮大小设计的一些重要参考数据。
 
解锁B端按钮设计10大密码
 
 
 
对于食指,平均宽度在16至20毫米,指腹触摸区域尺寸为10至14毫米,指尖触摸区域尺寸为8至10毫米;对于拇指,平均宽度为25毫米,指腹触摸区域尺寸为12至16毫米,指尖触摸区域尺寸为10至12毫米。由此建议,食指触摸的按钮应保证在8毫米×8毫米以上,且控件间距应保证至少在1毫米以上;拇指触摸的按钮应保证在10毫米×10毫米以上,且控件间距应保证至少在2毫米以上。
 
该研究还指出,大多数用户可以舒适可靠地击中 10 毫米×10 毫米的触摸目标 。
 
 
3、 iOS对按钮尺寸大小的规范
解锁B端按钮设计10大密码
 
 
 
从按钮图标尺寸来看,根据苹果官方设计指南,iOS中按钮图标有不同标准。小图标尺寸为24×24pt,用于小型按钮,如导航;标准图标为32×32pt,用于普通按钮,适合次要操作按钮;大图标是 40×40pt,用于宽大按钮;特大图标则为48×48pt,用于特大按钮。不同设备屏幕尺寸也有对应的建议图标尺寸,如iPhoneSE建议24pt,iPhone14及iPhone14Pro建议32pt,iPad 建议40pt 。
 
在最小触摸区域方面,iOS规定最小触碰区域为44×44pt,这种尺寸一般适合主要操作按钮。
 
 
解锁B端按钮设计10大密码
 
 
UI按钮的组成主要包括以下几个关键元素:
 
1、圆角
圆角的大小决定了按钮的气质和视觉感受。小圆角常用于常规按钮,如4px圆角;圆角越大,越有亲和力,人眼往往不喜欢非常锋利的物体,所以通常不建议使用0圆角的按钮样式,根据我大量的体验,我发现市面上确实也是带圆角的按钮居多些。
解锁B端按钮设计10大密码
 
 
 
2、图标
图标用于直观表达按钮的功能或状态,如加载中、编辑等。图标的设计应与整体页面风格一致,并确保其含义明确易懂。
 
 
3、内间距
内边距能够扩大按钮的可点击范围,帮助用户更容易点击按钮。一个好的设计间距是把按钮的水平内边距设计成垂直内边距的2倍。当然,你也可以根据你设计的实际情况做适当调整,规矩不是死的。
解锁B端按钮设计10大密码
 
 
 
 
4、容器
容器是包含所有视觉和交互元素的框架,包括颜色、纹理、文案和图标等。容器的设计应支持按钮的功能和美观。
 
 
5、边框
边框定义了按钮的边界,常用于次级按钮的描边。边框的粗细和样式可以影响按钮的视觉层次和交互效果。
 
 
6、文案
文案是按钮上的文字描述,用于表达按钮的含义和功能。文案应简洁明了,易于理解,同时具有一定的吸引力。
 
 
7、背景
背景用于表达按钮的状态和品牌气质。不同的背景颜色和纹理可以增强按钮的视觉吸引力和品牌识别度。
解锁B端按钮设计10大密码
 
 
 
 
8、投影
投影用于凸显层级关系,帮助用户更好地区分不同的按钮。投影通常与纹理、渐变色结合使用,以打造更好的视觉体验。
 
佐糖首页为了促进转化,特意将“开通会员”的按钮用投影凸显处理,带投影的按钮明显有向前走的感觉,比没有投影的按钮看起来更加显眼,小小投影在页面中不仅起到增加空间感的作用,还起到了业务强调的作用,已经不仅仅是样式的一个承载了。
解锁B端按钮设计10大密码
 
 
 
这些元素共同作用,不仅提升了按钮的功能性,还增强了其美观性和用户体验。在设计UI按钮时,应综合考虑这些因素,以确保按钮既美观又实用。
 
 
解锁B端按钮设计10大密码
 
 
Antdesign指出按钮的作用是指导用户采取你希望他们采取的行动,并帮助用户防错。
解锁B端按钮设计10大密码
 
 
 
1、触发操作
1.1提交与确认:
在表单填写场景中,如用户注册、登录、信息提交等,按钮用于触发提交或确认操作,将用户输入的信息发送给系统进行处理。
 
1.2执行功能:
在各类软件中,按钮是执行具体功能的主要方式,如在图像编辑软件中,“裁剪”“旋转”“调整颜色”等按钮,可让用户快速实现相应功能。
 
 
2、导航跳转
2.1页面切换:
在多页面的应用或网站中,按钮可实现页面之间的切换,如网站的首页、产品页、关于我们页等,通过点击按钮,用户能方便地浏览不同页面内容。
 
2.2菜单展开与收起:
用于控制导航菜单的展开与收起,节省页面空间,提高界面的整洁度和易用性。
 
 
3、状态控制
3.1显示与隐藏:
可用于控制某些元素的显示与隐藏,如在电商网站中,点击“查看更多商品详情”按钮,可展开隐藏的详细商品信息。
 
飞书中的这个小小按钮,它承载着隐藏折叠的功能,让页面看起来更加的简洁有序。
 
解锁B端按钮设计10大密码
 
 
 
 
3.2启用与禁用:
在某些功能需要满足一定条件才能使用时,按钮可用于表示该功能的启用或禁用状态,如在未填写完必填项时,“提交”按钮处于禁用状态,无法点击。
 
中国移动云盘的登录页就是这么设计的,当前面信息没有填完,后面的登录按钮始终是禁用的状态,只有当信息填完,且填写正确,按钮才会亮起。
解锁B端按钮设计10大密码
 
 
 
4、提供反馈
4.1 操作反馈:
当用户点击按钮后,按钮会通过颜色、形状、动画等方式的改变,向用户提供操作反馈,告知用户系统已接收到操作指令。
 
4.2 引导提示:
在一些复杂操作或新功能引导时,按钮可作为引导提示的一部分,告知用户下一步操作,如在新手引导流程中,突出显示“下一步”按钮。
 
心岛日志的新手指引中就是这样设计的,按钮在其中起了很重要的指引作用。
解锁B端按钮设计10大密码
 
 
 
5、数据交互
5.1 数据筛选:
在数据展示界面,如表格、列表等,按钮可用于对数据进行筛选,方便用户快速找到所需信息。
钉钉打卡这个界面中,多亏有了日、周、月的筛选按钮,才让数据筛选变得如此便捷。
解锁B端按钮设计10大密码
 
 
 
5.2 数据排序:
通过点击“按时间排序”“按销量排序”等按钮,用户可对数据进行重新排序,以满足不同的查看需求。
 
 
6、品牌传达
很多产品的按钮颜色都是与它的品牌色高度一致的,它既是按钮,又是品牌色的传递大使。
 
网易云音乐的按钮色用的网易红,钉钉打卡的按钮用的腾讯蓝,都是在传递自己的品牌色,同时也是在进行指令的传达。
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
在日常设计中,页面无疑少不了按钮位置的摆放,那么按钮放置在什么样的位置合适,这也是一个值得深思的问题,也许我们已经司空见惯了按钮的位置摆放,但是我们知道它为什么要放这里或者那里吗?下面我们来看下这几种设计模型,让它告诉我们,为什么,在特定场景下,按钮位置要这么放?
 
 
1、设计依据 – Z型视觉模型
1.1 原理含义
Z型视觉模型是一种描述用户在浏览网页或界面时视觉轨迹的理论模型。
它的布局遵循字母Z的形状,指用户的浏览路线——从左到右,从上到下的的视觉运动轨迹。
 
首先,人们从左上角到右上角进行扫描,形成一条水平线;第二步,向页面的左下侧,创建一条对角线;最后,再次向右转,形成第二条水平线,当观众的视角以这种模式移动时,它形成一个虚构的“Z”字形。
解锁B端按钮设计10大密码
 
 
 
1.2 视觉区域
区域1:位于页面左上角,是用户视线最先关注的区域,通常放置最重要的信息,如网站标志、导航栏等,能第一时间吸引用户的注意力并让用户对页面内容有初步的整体认知。
 
区域2:在区域1的右侧,用户的视线在水平移动时会经过该区域,可放置一些与区域1相关的辅助信息或次要的导航元素等。
 
区域3:位于页面中部偏左,当用户视线继续向下移动时会关注到该区域,通常用来展示页面的核心内容,如产品介绍、文章主体等。
 
区域4:在页面的右下角,是用户视线的终点区域之一,可放置一些重要的操作按钮或补充信息等,以吸引用户在浏览完主要内容后进行进一步的操作或获取更多信息。
解锁B端按钮设计10大密码
 
 
 
1.3 应用案例
在电商网站中,商家会把热门推荐或主打产品放在区域1和区域3,以吸引用户的注意力。在产品详情页面,将“加入购物车”“立即购买”等按钮放在区域4,方便用户在浏览完产品信息后进行购买操作。
 
天猫商城就是这样做的,把网站的LOGO图放置在左上角(区域1),把产品图放置在左下角(区域3),最后在用户浏览了全部页面之后,在右下角(区域4)放置购买按钮,引导用户下单。
 
在这个带有销售场景的页面设计中,
购买按钮放置在右下角符合用户浏览习惯,也符合Z型视觉模型。
解锁B端按钮设计10大密码
 
 
 
在B端应用软件中,可能运用的功能比较多,按钮也比较多,通过大量分析和观察发现,它们
大部分喜欢把按钮放置在每次视觉运动线的起点或者终点的位置。
 
腾讯云是这样处理的,中国移动网盘是这么处理的,看似巧合,其实也有它合情合理的一面,因为每一个动作的开始和结束都会更加的引人注意。
 
这就跟人们每次入职一个新公司一样,刚进去时会特别卖力、小心,后面时间长了,也就形成免疫,习惯了,但是当最后要离开这家公司的时候,最后心情又会特别复杂,回想起自己在这里成长的岁月,就会心生很多的感慨,也会特别的记忆深刻。
 
也许这也是为啥很多页面设计,喜欢
把重要的按钮放置在每次视觉运动线的起点或者终点吧!
 
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
按钮的颜色在界面中不仅起到视觉点缀的作用,同时也是按钮状态的一种呈现和反馈。
 
按钮颜色不是千篇一律的品牌色,它也经常需要根据业务场景的不同,更换颜色,比方说红色-删除按钮、黄色-告警按钮、绿色-通过按钮、蓝色-更多按钮,不同的按钮在颜色设计上都会有所区别。
解锁B端按钮设计10大密码
 
 
 
此外,在设计按钮颜色时,有一些基本规范。
首先,从功能角度看,
主要按钮通常会使用比较突出的颜色,
像鲜艳的蓝色(如#007BFF),这是因为蓝色醒目又不会过于刺眼,能引导用户去点击。次要按钮(如取消、返回)的颜色会稍淡一些,比如浅灰色(#ccc),让用户知道这是相对次要的操作。
 
从颜色搭配来说,按钮颜色要和背景色有足够的对比度,方便用户识别。比如背景是白色,深色按钮就会很清晰;如果背景颜色较深,那按钮可以用浅色或者高亮度颜色。
 
另外,颜色的选择也要考虑产品的风格和使用场景。例如,在一个游戏软件里可能会使用更活泼的色彩,像红色、橙色;而在办公软件里,通常会采用比较沉稳的色调,如蓝色、黑色。
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
1、可识别性
1.1 视觉清晰:
按钮应采用用户熟悉的设计样式,如带有矩形或圆角矩形边框的填充按钮、带有阴影的填充按钮、幽灵按钮等。
 
1.2 文字明确:
按钮上的标签应准确、简明直接地介绍其功能,避免使用过于通用或模糊的表述,让用户清楚点击后会发生什么。
解锁B端按钮设计10大密码
 
 
 
 
 
2、易操作性
2.1位置合理:
将按钮放在用户期望看到的地方,如遵循F型或古腾堡原则,在页面的视觉焦点区域放置重要按钮。
解锁B端按钮设计10大密码
 
 
 
2.2尺寸适宜:
按钮大小应反映其在屏幕上的优先级,更大的按钮用于更重要的操作,同时要适配用户的手指,避免误触。
 
 
 
3、一致性
3.1 顺序得当、逻辑一致:
按钮的顺序应反映用户与界面之间交互的逻辑,如“上一步”按钮通常在左边,“下一步”按钮在右边。
 
3.2 状态样式一致:
按钮应具有一致的状态样式,如默认、按下、聚焦、禁用等,一个产品中,这些状态样式要高度的一致,不能在这个页面按钮样式是这样的,跑到另一个页面,样式又发生了改变。
 
著名的格式塔心理学也是这么认为的,它强调人对事物的理解是基于整体的、有组织结构的,如果按钮设计做到一致性,对提高产品的整体性是有非常大的改进的。
解锁B端按钮设计10大密码
 
 
 
 
 
4、简洁性
4.1 避免过多
避免在一个界面中使用过多的按钮,以免让用户感到无所适从,应优先考虑最重要的操作。
 
4.2 功能单一
每个按钮应尽量只执行一个主要功能,避免一个按钮承载过多复杂的操作,降低用户的认知成本。
 
希克定律指出,人的决策时间会随着选择的增加而增加。在按钮设计中,
简洁的设计能减少用户的选择和认知负担
,使用户能更快地做出决策并执行操作。
解锁B端按钮设计10大密码
 
 
 
 
 
5、美观性
5.1 风格统一
按钮的设计风格应与整个UI界面的风格保持一致,包括颜色、形状、字体等方面,形成统一的视觉体系。
 
5.2 对比协调
在保持整体协调的基础上,通过对比突出重要按钮,如使用高对比度的颜色、较大的尺寸等,吸引用户的注意力。
情感化设计理论强调设计应该注重用户的情感体验。美观的按钮设计能够传递积极的情感信息,增强用户和产品的情感连接。
解锁B端按钮设计10大密码
 
 
 
 
6、要符合习惯
奥斯卡·王尔德说过:“习惯一旦养成,便很难改变。” 
所以我们在设计按钮的时候,一定要符合人性的习惯,而不是试图改变人们的习惯。
 
 
 
解锁B端按钮设计10大密码
 
 
1、按钮设计要有分组意识
带有分组的按钮摆放,让人看起来总是更加的有序,也更利于用户进行操作,面对同类型的功能操作点无需跳跃着去寻找,能很快在相似功能操作区域找到。
 
360的分组意识很强烈,三个不同区域的图标按钮样式都做了明显的区分,让界面看起来更加有序,操作起来也更加的便捷。
解锁B端按钮设计10大密码
 
 
 
 
 
2、按钮排列视觉上要有主次
切不可一行按钮中出现多个高强调的按钮,Antdesign对这个也做了诠释,会对用户的行为进行错误的引导,也不利于聚焦。
 
通义这个页面虽然有多个选中的按钮,但是没有全部用高强调的按钮,只有强推荐的操作“开始录音”才用了强按钮,其它通过相对浅的颜色做了弱按钮选中处理,视觉上主次分明,信息主次表达上也清晰可见。
解锁B端按钮设计10大密码
 
 
 
 
 
3、不要在按钮中放置两个图标
当一个按钮同时兼顾两个交互动作的时候,一定要区分设计,不能赤裸裸的展示在一个按钮中,而不做任何区分。
解锁B端按钮设计10大密码
 
 
 
 
 
4、返回按钮宜放置在左边
具有返回意义的按钮,应该放在左侧,暗示其方向是回到之前,例如上一步。
解锁B端按钮设计10大密码
 
 
 
 
 
5、按钮文字不宜太长
简短的文字更易被用户阅读和记住,在一个按钮上最多不超过5个文字,重要的按钮一般
使用2~4个字。
解锁B端按钮设计10大密码
 
 
 
 
 
解锁B端按钮设计10大密码
 
 
❶ 用纯灰色文字的弱化按钮
 
❷ 用灰色边框+灰色文字的弱化按钮
 
❸ 用颜色边框+颜色文字的弱化按钮
 
❹ 用灰底+灰色文字的弱化按钮
 
❺ 用浅色底+颜色文字的弱化按钮
 
❻ 用纯颜色的弱化按钮
 
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
通过本篇文章的探讨,我们深入了解了B端按钮设计的九大核心要素。从按钮的基本定义到Antdesign的分类,再到尺寸、构成、作用、位置和颜色等细节,每一部分都是提升用户体验的关键。
 
按钮设计不仅关乎美观,更影响着用户的操作效率和满意度。
在UI界面中,遵循设计原则和注意事项,确保按钮既实用又具有吸引力,是每位设计师的职责。
 
希望本文能为设计师们提供有价值的参考,激发更多创新灵感,共同推动B端产品的交互设计向更高水平发展。
 
 
解锁B端按钮设计10大密码


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

B 端界面设计中色彩搭配的实用技巧

ui设计分享达人

B 端界面设计领域,色彩搭配是影响用户体验和产品形象的关键因素。合理的色彩运用能提升界面的可读性、易用性,强化品牌认知。下面分享一些 B 端界面设计中色彩搭配的实用技巧。

一、运用色彩心理学

不同色彩会引发用户不同的情感反应。蓝色常被视为专业、可靠,如众多云计算平台的管理界面多采用蓝色调,让用户感受到服务的专业与安全 ,从而增强信任。绿色代表生机、健康,在医疗保健类 B 端应用中,用绿色显示正常数据,可营造安心的氛围。而红色具有强烈视觉冲击力,适合用于警示信息或关键操作提示,像删除确认按钮常用红色,以引起用户注意,避免误操作。

2.png

二、搭建色彩体系

构建一套完善的色彩体系是基础。主色调要与企业品牌紧密相连,像 Salesforce 就以经典蓝色贯穿界面,强化品牌印象。辅助色一般选 2 - 3 种,用于次要元素,如在蓝色为主的项目管理系统中,浅灰色展示次要信息,橙色突出任务进度,让界面层次分明。强调色则用高饱和度、对比强的颜色,在数据报表中用红色标注异常数据,助力用户快速抓取关键信息。

三、确保色彩对比度

足够的色彩对比度是保障界面可读性和可操作性的关键。依据 WCAG 标准,正常文本与背景对比度至少 4.5:1,大文本 3:1。像黑字白底就是高对比度的经典搭配,易读性强;而深灰字配浅灰背景则可能导致阅读困难。此外,不同界面元素间的对比度也很重要,按钮与周围区域要区分明显,不同状态的按钮也要通过色彩变化区分,方便用户操作。

四、保障可读性与识别性

B 端界面信息量大,应避免花哨的色彩组合,防止分散用户注意力和造成视觉疲劳。像数据分析类产品,多采用淡蓝、淡绿等柔和色调搭配简洁图表和文字,让用户轻松理解数据。同时,要考虑色彩在不同环境和设备下的显示效果,确保清晰可辨,避免出现色彩偏差。

14.png

五、遵循品牌色彩规范

若企业有明确的品牌色彩规范,B 端界面应严格遵循。可直接使用品牌主色调,如腾讯云大量运用腾讯蓝,加深用户对品牌的关联认知。也可基于品牌色拓展衍生,提取不同明度和饱和度的颜色用于辅助或强调,既保持品牌一致性,又让界面更丰富生动。

六、重视用户测试

完成色彩方案后,用户测试必不可少。通过收集用户对界面色彩的直观感受、意见反馈,了解其舒适度、易读性等情况,针对性优化。同时观察用户行为,如寻找信息的速度、操作失误等,深入了解用户对色彩的实际需求,进一步完善设计。

总之,B 端界面设计的色彩搭配需综合考量多方面因素。掌握这些实用技巧,有助于打造出既美观又实用的 B 端界面,提升用户体验,塑造企业专业形象。

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

未来主义视角下的 UI 用户体验设计创新路径

蓝蓝设计的小编

在科技飞速发展的当下,未来主义不再是遥不可及的幻想,而是逐渐融入到我们生活的方方面面。UI 用户体验设计作为连接人与数字产品的关键桥梁,也在未来主义思潮的影响下,不断探索创新路径。从交互方式的变革到视觉风格的突破,未来主义视角为 UI 用户体验设计带来了全新的思考维度。

一、交互方式:打破传统边界

传统的 UI 交互主要依赖于鼠标、键盘和触摸操作,而在未来主义的语境下,交互方式正朝着更加自然、智能的方向发展。语音交互已经逐渐普及,用户只需动动嘴,就能完成各种操作,这大大提高了操作效率,尤其适用于双手忙碌或视力不佳的场景。例如,智能音箱可以通过语音指令播放音乐、查询天气等。
除此之外,手势交互也在不断发展。一些智能设备已经支持简单的手势识别,用户通过挥手、握拳等动作就能与设备进行交互。在未来,随着传感器技术的进步,手势交互将更加精准和复杂,实现更丰富的功能。
脑机接口技术的研究也为交互方式带来了无限可能。虽然目前还处于初级阶段,但在未来,用户或许只需通过大脑的思维活动,就能控制设备,实现真正意义上的 “心想事成”。这将彻底打破人与设备之间的物理隔阂,创造出前所未有的交互体验。

二、视觉风格:塑造科幻沉浸感

未来主义的视觉风格追求科技感、简洁性和强烈的视觉冲击力。在 UI 设计中,这种风格体现在简洁的界面布局、鲜明的色彩搭配和独特的图形元素上。
简洁的界面布局能够减少用户的认知负担,让用户快速找到所需信息。去除繁琐的装饰和不必要的元素,以简洁的线条和几何形状构建界面,使界面更加清晰明了。
鲜明的色彩搭配可以营造出强烈的视觉氛围。例如,使用高饱和度的冷色调,如蓝色、紫色等,来传达科技感和未来感。同时,通过对比强烈的色彩组合,吸引用户的注意力,突出重要信息。
独特的图形元素也是未来主义视觉风格的重要组成部分。例如,使用抽象的图标、动态的图形和光影效果,来增强界面的立体感和动态感,让用户仿佛置身于一个充满科技感的未来世界。

三、个性化定制:满足多元需求

未来的用户将更加注重个性化,他们希望自己使用的产品能够体现自己的独特品味和需求。因此,UI 用户体验设计需要具备更强的个性化定制能力。
通过大数据和人工智能技术,系统可以分析用户的使用习惯、偏好等信息,为用户提供个性化的界面布局、功能模块和内容推荐。例如,音乐 APP 可以根据用户的音乐偏好,推荐符合口味的歌曲和歌单;电商 APP 可以根据用户的浏览和购买历史,推荐相关的商品。
此外,用户还应该能够自主定制界面的视觉风格,如选择自己喜欢的颜色、字体、图标等,打造属于自己的专属界面。这种个性化定制不仅能够提高用户的满意度和忠诚度,还能让用户在使用产品的过程中获得更多的乐趣和成就感。
未来主义视角下的 UI 用户体验设计创新路径充满了无限的可能性。通过打破传统交互方式的边界、塑造独特的视觉风格和实现个性化定制,我们能够为用户创造出更加智能、便捷、有趣的数字体验。作为 UI 设计师,我们需要不断关注科技发展的前沿动态,勇于创新,将未来主义的理念融入到设计中,为用户带来更加美好的未来。

2025年UI设计师必看的15个网站

蓝蓝设计的小编

想要成长为一名优秀的设计师,紧跟潮流,不断吸收新的设计思想和灵感,绝对是极其重要的职业素养。
随着2025年的到来,设计行业内卷越发严重,对设计师的要求也更高,如何高质高效地进行设计,是每个设计师都要考虑的。今天,本文精选了15个网站,你可以从中了解最新设计趋势,寻找创意灵感,学习优秀作品,成长为更卓越的设计大牛~
一起来看看这15个网站吧!
 
1、
Dribbble
Dribbble是全球最大的设计师交流网站,设计师可以在这里寻找灵感,展示自己的设计作品,分享设计理念、设计技巧、设计工具等。为了方便大家学习交流,你可以在作品下方留言,同时也能通过其他人的评论,学习到不同的设计风格和创意思路。
不仅如此,Dribbble还有求职版块,许多知名的设计公司和品牌都会在上面发布招聘信息,你可以在这里看看有没有合适的机会。对设计师来说,Dribbble真的是一个很好的学习、展示和成长的平台~
访问地址:https://dribbble.com/
2025年UI设计师必看的15个网站
 
 
 
2、摹客资源社区
摹客是一个“设计+协作”的平台,专为设计师和产品经理打造,上手简单,不管是画线框图、高保真原型图、流程图还是做UI设计,它都能轻松满足需求。
此外,摹客还有一个资源社区,提供了丰富的模板例子,模板涵盖各个领域,无需下载,一键保存就能快速复用。编辑完成后,设计师还可以使用摹客协作,让团队小伙伴一起评论审阅,开发小伙伴还能直接获取标注信息和CSS代码,真的大大提升了团队的工作效率!
2025年UI设计师必看的15个网站
 
 
 
3、优设
优设是国内专业的设计师平台,汇聚了大量的设计教程、行业资讯、作品展示以及设计趋势,致力于帮助设计师提升技能、获取灵感。
它的设计资源丰富,包括高质量的UI/UX设计案例、免费设计模板、图标和字体等,供设计师们免费下载使用。同时,它还设有设计问答版块,设计师们可以在此交流经验、分享作品、提出问题,共同成长进步!
访问地址:https://www.uisdc.com/
2025年UI设计师必看的15个网站
 
 
 
4、
Medium
Medium是全球知名的创作平台,汇聚了来自各行各业的内容创作者,包括设计师、开发者、产品经理等。在这里,设计师可以读到各种关于UI/UX设计、产品设计思维、设计实战复盘等干货。
它最大的优势在于有很多高质量的原创文章,以及广泛的社区讨论,设计师不仅可以通过文章获取灵感,还能参与到行业讨论中,拓宽视野。许多设计大咖和行业专家也在Medium上发布深度分析和案例研究,是设计师提升专业能力的宝贵资源。
访问地址:https://medium.com/
2025年UI设计师必看的15个网站
 
 
 
5、
Pinterest
Pinterest是一个以视觉内容为主的社交媒体平台,广受设计师喜爱,特别适合用来寻找设计灵感。它拥有海量的图片和创意,覆盖从UI设计到插画、品牌设计等各种领域。设计师可以根据自己的兴趣和需求,通过关键词搜索来发现相关的设计作品。
值得一提的是Pinterest的收藏功能,你可以将喜欢的设计作品“钉”到自己的个人主页上,便于随时查看和参考。
访问地址:https://www.pinterest.com/
2025年UI设计师必看的15个网站
 
 
 
6、
花瓣网
花瓣网是国内知名的创意设计平台,用户可以利用它的采集工具,轻松收集网络上的图片和灵感。与Pinterest不同的是,花瓣网有很多本土化内容,许多国内设计师的作品和灵感都可以在这里找到。此外,它还拥有超过1亿的高质量素材,并提供海报、背景图、矢量图、字体、插画漫画等多种素材模板,好满足设计师的多样化需求。
访问地址:https://huaban.com/
2025年UI设计师必看的15个网站
 
 
 
7、Awwwards
Awwwards是全球知名的设计奖项和创意展示平台,专注于展示互联网领域的最佳网站和数字创意。它汇聚了全球顶尖的设计师的作品,展示了最新、最前沿的设计趋势。Awwwards每年都会对设计作品进行评选,结合用户投票和专业评审,评选出最具创意和表现力的作品。
设计师可以在这里浏览获奖作品,分析成功案例,获取灵感,提升自己的设计水平。另外,Awwwards网站本身的设计也很潮,非常值得一看哦~
访问地址:https://www.awwwards.com/
2025年UI设计师必看的15个网站
 
 
 
8、One Page Love
对于设计师来说,单页网站设计是个不小的挑战:如何在有限的空间里,呈现丰富的内容、提供良好的用户体验并确保设计美观呢?One Page Love会告诉你答案。
它是一个专注于单页网站设计的平台,自2008年成立以来,已经收录了超过8180个优秀的单页网站设计。这些案例展示了各种各样的设计风格和创意解决方案,是设计师们学习单页网站设计的理想资源库。
访问地址:https://onepagelove.com/
2025年UI设计师必看的15个网站
 
 
 
9、Lapa Ninja
Lapa Ninja是一个提供着陆页设计案例的网站,网站共展示了6749个着陆页设计,通过完整的网站截图,为用户提供真实的着陆页示例作为灵感来源。无论是设计师寻求创意灵感,还是老板想要了解如何打造吸引人的着陆页,这个网站都能提供有价值的参考。
访问地址:https://www.lapa.ninja/
2025年UI设计师必看的15个网站
 
 
 
10、Deviant Art
DeviantArt 是全球最大的艺术社区之一,集结了来自世界各地的设计师、插画师、摄影师、动画师等艺术创作者。无论是传统的绘画、雕塑,还是数字艺术、摄影作品等,任何艺术形式都能在这里找到展示空间。
对UI设计师来说,多看看不同类型的艺术设计,也许会收获意想不到的灵感!
访问地址:https://www.deviantart.com/
2025年UI设计师必看的15个网站
 
 
 
11、Designspiration
Designspiration是一个极具创意的设计灵感资源平台,内容包含多种设计领域,比如平面设计、室内设计、产品设计、时尚设计等。它的内容质量很高,很多作品都来自世界各地优秀的设计师或者设计工作室。而且,它的搜索功能很好用,可以按照不同类型、颜色、风格和关键词进行搜索,极大地方便了设计师的工作。
访问地址:https://www.designspiration.com/
2025年UI设计师必看的15个网站
 
 
 
12、Land-book
Land-book是一个网站设计灵感图库,网站上展示的都是精心挑选的内容,还会每日更新内容,好让用户及时获取到最新的网站设计趋势和案例。其内容涵盖多种类型,包括着陆页、电子商务页面、作品集等,设计领域包含互联网、时尚服饰、金融等多个行业。
总之,Land-book对于设计师来说,是一个获取灵感、了解行业动态的优质资源平台。
访问地址:https://land-book.com/
2025年UI设计师必看的15个网站
 
 
 
13、Mobbin
移动端设计的需求已经渐渐超过网页设计了,而Mobbin就是专门收集APP界面、布局设计的网站。不管你是要寻找手机的登陆界面、搜索页面、配置页面、还是知名品牌的APP界面等,都能快速找到!并且,Mobbin还会定期更新内容,确保展示的设计资源紧跟最新潮流,让你始终接触到最前沿的计思路。
访问地址:https://mobbin.com/
2025年UI设计师必看的15个网站
 
 
 
14、NavNav+
导航栏对网页、APP来说至关重要,它是用户的领路人,一个好的领路人才能留住用户。NavNav+是一个专门收集导航栏设计的平台,涵盖了各种类型和风格的导航栏设计案例,如传统的水平导航、侧边栏、下拉菜单、全屏菜单等。设计师可以在这里找到大量的创意灵感,了解不同场景下导航栏的设计方式和趋势。
访问地址:https://navnav.co/
2025年UI设计师必看的15个网站
 
 
 
15、Unsplash
Unsplash是一个免费的平面设计图素材网站,提供了各种类型的高质量图片,包括标志、海报、网站设计、插画等等。图片涵盖了各种各样的主题,包括风景、人物、建筑、动物、抽象概念、商业场景等,你可以按照不同的主题进行搜索,并免费下载所需的图片。此外,Unsplash还提供了一个社区,你可以在这里分享自己的作品,以及和其他设计师摄影师交流~
访问地址:https://unsplash.com/
2025年UI设计师必看的15个网站
 
 
 
以上就是为大家精心整理的网站资源,相信在使用这些网站的过程中,你会发现更多的惊喜和创意。让我们一起学习进步,争取2025年的UI设计水平更上一层楼!


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

原型不知道怎么设计?看完这8大原则!

蓝蓝设计的小编

原型设计8大原则,大厂产品经理干货分享!
 
 
如果你经历过在项目中后期推翻方案、修改设计、频繁返工的痛苦,你一定会明白原型设计的重要性。多年产品职业生涯告诉我,每一个成功项目的背后,都离不开一个扎实的原型设计。
通过原型,我们可以尽早发现问题,节省时间和金钱,让设计师和开发更轻松。接下来,我将从多年的实践经验出发,分享一些关于原型设计的核心原则,希望能对你有所启发。
以下是想要设计出一个优秀原型的八大原则:
原则 1:了解你的用户。
原则 2:明确原型设计的重点。
原则 3:选择合适的原型设计工具。
原则 4:少计划,多实践。
原则 5:放轻松!第一个原型总是比较粗糙。
原则 6:多和设计师、开发交流
原则 7:重视原型可维护性
原则 8:记录你的收获
 
1、了解你的用户
设计并不是单向的输出,而是与用户的对话。原型设计的起点就是深入了解目标用户,挖掘他们的需求、痛点、行为模式和使用场景。只有这样,当产品创意通过原型呈现出来,才能够真正解决用户的问题。
这就要求我们在进行原型设计时要做到:
1)做好用户研究,包括问卷访谈、调查等各种方式,以收集用户数据。
2)从用户的角度出发,思考他们如何与产品互动。
3)设计原型时,确保它符合用户的使用习惯。
可以说,原型设计的成功与否,很大程度上取决于我们对用户理解的深度,因此在研究用户方面,做多少工作都不为过。
 
2、明确原型设计的重点
在设计原型之前,首先要明确它的核心目标:是简单绘制下线框,讨论出产品大致框架?还是精细绘制出某个功能模块的交互?亦或是做高保真原型,以便产品演示?
每一次画原型都应该聚焦于核心目标,而不是试图一次性解决所有问题。不要担心一次原型无法涵盖所有细节——产品设计是一个不断迭代的过程,我们可以通过多个阶段的原型逐步验证假设,先明确产品的核心框架与基础功能,再逐步细化到实际体验和产品完成度。这样,我们便能在每一次原型设计迭代中,对不同方面加以优化完善,推动原型逐步趋近于理想的产品形态。
 
3、选择合适的原型设计工具
想要高效地完成原型设计,选择合适的工具至关重要。每种工具都有自己的特点,选择时,首先要评估项目的需求和复杂度。如果处于早期概念验证阶段,简单的绘图工具或低保真原型工具足够用了;而到了产品细化阶段,建议使用交互功能强大、更专业的原型设计工具。以下是我都用过且体验不错的产品:
 
1)摹客RP - 在线快速原型设计
摹客RP有大量的预设组件、丰富的原型模板,拖曳即用,大大提高了工作效率。它的交互能力也很强大,是少有的能完美继承Axure使用习惯和资源的原型设计工具。同时,它还支持强大的多人实时编辑能力,非常适合新手和对协作要求较高的团队。
原型设计8大原则,大厂产品经理干货分享!
 
 
 
2)Axure - 全面交互设计
使用地址:https://www.axure.com/
知名度最高的原型工具,优点也确实突出,交互功能非常强大,拥有丰富的交互组件库,几乎能制作任何交互效果,完美模拟出真实的应用场景和用户操作体验。不过需要说明的是,Axure上手难度大,协作功能很弱,并且近年来产品迭代的速度已经放缓,更推荐有复杂交互项目制作需求的团队使用。
原型设计8大原则,大厂产品经理干货分享!
 
 
 
3)Figma - 高保真原型设计
使用地址:https://www.figma.com/
在UI设计领域,Figma可谓大名鼎鼎,考虑到它在分享和协作上的优势,以及团队的设计师一般比产品经理多,有部分产品经理也直接用Figma绘制原型了。它的交互能力比较弱,更适合交互功能简单且需要高保真原型设计的团队。另外,Figma定价昂贵,更适合预算较高的团队使用。
原型设计8大原则,大厂产品经理干货分享!
 
 
 
4、少计划,多实践。
原型设计中常见的顾虑之一,是担心设计达不到我们脑海中的理想,容易陷入“还没完成”的心态。其实,画起来就好!不要过于执着规划“该做什么”,因为在设计过程中,我们会遇到新的问题,而具象化的原型图也会让我们的思维更清楚。
在这个阶段,通过设计倒逼思考,反倒是帮助我们深入思考产品的最佳途径。
 
5、放轻松!第一个原型总是比较粗糙。
“文章的初稿,都是狗屎。”这是文学大家海明威说的,虽然看起来有点粗俗,但确实是他的经验之谈。
其实原型也一样,第一个原型注定会有瑕疵,所以请放轻松。正因如此,我们才需要循序渐进地去完善原型。最好从低保真线框图开始,一步步迭代优化,在这个过程中,越早失败、反复尝试,并迅速调整方向、减少资源投入,才是正确路径,也是原型设计的意义所在。
 
6、多和设计师、开发交流
有人说,新手产品经理画原型就是单纯画原型,而资深产品经理画原型前就担心产品能不能实现了。原型设计不是屠龙,而是要开发出切实可用的产品。因此,产品经理在进行原型设计时,不应该完全以自己的想法进行设计。
我们需要和设计师、开发一起协作,最好在原型设计阶段就确定好功能的可实现性,这样做能大大规避后续流程中的反复与延误,显著提升团队的工作效率与产出质量,为项目的顺利推进奠定坚实基础。
原型设计8大原则,大厂产品经理干货分享!
 
 
 
7、重视原型可维护性
原型并非一次性产物,在设计时就要考虑后续的维护与更新。这就要求产品经理画原型时,一定要使用规范的命名、清晰的图层管理以及合理的组件复用,让原型在需求变更或功能拓展时更易于修改。
比如,当项目中某个通用模块的设计需要调整,如果之前构建原型时做好了组件复用,只需修改对应的组件,相关页面组件就会一键同步更新,大大节省了时间与精力,原型就能灵活适应项目发展的各种变化。
 
8、记录你的收获
在原型设计的整个过程中,记录复盘每一次收获至关重要。比如:记录好大家提出的各种备选方案、不同观点,以及从中获得的经验和见解。
这个小小的习惯极有可能帮了你大忙,因为产品设计流程复杂且多变,你无法预知何时需要回溯之前被忽略的内容。如果你做好了记录,后面需要改变时,就能快速定位问题根源并进行针对性迭代。
 
以上8条原则为原型设计提供了全面且实用的指导,有助于我们少走弯路。请记住,这8条原则并非孤立的存在,而是一个有机整体,我们在实际工作中,应不断尝试与调整,将它们灵活融入到工作流程。只要认真遵循了这些原则,离打造出一个成功的产品就不远啦!


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

ui设计师的产品体验日记

蓝蓝设计的小编

产品体验日记01
 
 
 
 
 
体验目录
一.标签栏图文转换设计
二.3D元素运用
三.笔记本个性化封面设计
四.古风APP视觉赏析
五.通关模式学习设计
六.宠物养成陪伴成长
七.品牌化设计
八.寓意深远的微动效
九.IP元素的场景应用
十.优秀产品分享
 
 
一.标签栏图文转换设计
开眼在标签栏设计中,采用了独特的图文切换点击模式,这一设计颇为新颖。动效在图文之间切换时流畅自然,为用户带来了极为舒适的视觉体验,整体表现尤为亮眼,令人印象深刻。
产品体验日记01
 
 
 
 
二.3D元素运用
知源中医在“VIP会员”页面设计中,融入了3d视觉元素,这一创新极大增加了页面的空间层次,为用户带来焕然一新的视觉体验。
产品体验日记01
 
 
 
 
三.笔记本个性化封面设计
千本手账个性化“创建笔记本”功能,让用户可以自主选择或设计封面。借鉴实体笔记本,融合数字创意,既保留质感又便捷。个性化设计既满足用户对美观笔记本的追求,又无需额外花费即可拥有心仪的笔记本。精准捕捉用户个性化需求,激发情感共鸣。持续提供吸引力功能,吸引用户关注与参与,记录生活同时享受创造乐趣。
产品体验日记01
 
 
 
 
四.古风APP视觉赏析
长相思产品设计,古风宋韵独树一帜,视觉冲击力强,如细腻古风画卷,引人穿越千年雅致。每一处细节尽显文化底蕴与匠心,令人沉醉,不仅是视觉盛宴,更是心灵触动,激发无限遐想,每一次接触都是难忘文化之旅。
产品体验日记01
 
 
 
 
五.通关模式学习设计
在百词斩的“一起背”页面设计中,其创新地融入了游戏通关领取奖励的背诵模式。这一设计策略巧妙地激发了用户的好胜心和好奇心,使得用户在挑战自我、追求成就的过程中,对产品产生了更深的依赖与喜爱。通过这种方式,百词斩不仅提升了用户的学习动力,还进一步增强了用户对产品的忠诚度与粘性。
产品体验日记01
 
 
 
 
六.宠物养成陪伴成长
"我要做计划"这款App创新融合虚拟宠物陪伴成长,针对用户“三分钟热度”,让宠物成为计划的忠实监督者。通过定时提醒、情感互动,深度链接用户情感,增强依赖与归属感。这款App不仅高效有趣地助力自我提升专注力,还营造温馨激励的成长氛围,让用户在成长路上感受宠物“小伙伴”的温暖力量。
产品体验日记01
 
 
 
 
七.品牌化设计
在古茗的首页设计中,品牌元素以精致入微的动效形式巧妙融入页面布局之中,这一创意手法极大地加深了用户对品牌的记忆点与认同感。微动效过渡自然流畅,更以鲜明的视觉冲击力脱颖而出,成功吸引并锁定了用户的注意力。在增强页面活力的同时,也保持了整体视觉效果的和谐与统一,使得用户在享受流畅浏览体验的同时,对古茗品牌留下了深刻而美好的印象。
产品体验日记01
 
 
 
 
八.寓意深远的微动效
得到在电脑端“每日成长”设计中,微动效寓意深远:高山象征阻碍,预示挑战将过;书障寓意学习难关,书指明路,积智前行;大雁述说坚持与梦想,终达辉煌。这样的设计,不仅让页面充满了生动与活力,更在无形中传递着一种积极向上的力量,激励着每一个人在成长的道路上不断前行,不断超越自我。
产品体验日记01
 
 
 
 
九.IP元素的场景应用
在coStudy咨询处页面设计中,IP元素融入功能图标,增强品牌展现,吸引用户,让图标彰显品牌魅力,用户交互中深刻感受品牌特色;此设计提升体验,巩固品牌形象,实现品牌与功能完美共生。
产品体验日记01
 
 
 
 
十.优秀产品分享
小日常产品采用了一种扁平化的手绘线性风格,这种风格清亮简约且独具特色。产品中的各项功能大多以图标的形式直观展现,设计巧妙,极大地提升了用户的操作便捷性。其学习成本极低,所涵盖的功能均为日常高频所需,能够迅速帮助用户记录下各类重要事项,有效避免遗忘。对于现代忙碌的上班族而言,小日常产品无疑是一个理想的选择。它以其便捷性、快速响应和简单易用的特点,完美融入了快节奏的工作生活中,成为了用户不可或缺的日常助手。
产品体验日记01

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

2025 年 UI 大屏设计新风向

蓝蓝设计的小编

 
在科技日新月异的 2025 年,UI 大屏设计领域正经历着深刻的变革。随着技术的不断进步和用户需求的日益多样化,新的设计风向逐渐显现。了解并掌握这些趋势,对于设计师打造出更具吸引力和实用性的 UI 大屏作品至关重要。

一、沉浸式体验设计

如今,用户不再满足于简单的信息展示,他们渴望更具沉浸感的交互体验。2025 年,UI 大屏设计将更加注重通过空间感营造、动态效果和音效配合来打造沉浸式场景。例如,在城市交通监控大屏设计中,运用 3D 建模技术展示城市道路的立体布局,车辆和行人的动态模拟更加逼真,同时加入实时的交通环境音效,如车辆行驶声、信号灯提示音等,让监控人员仿佛置身于真实的交通场景中,能更快速、准确地做出决策。

二、极简主义与信息聚焦

信息爆炸的时代,用户注意力愈发分散。极简主义在 2025 年的 UI 大屏设计中依然占据主导地位,设计将更加聚焦于核心信息的呈现。去除繁杂的装饰元素,采用简洁的线条和布局,以突出关键数据和重要内容。在企业数据展示大屏上,仅保留最能反映业务关键指标的数据图表,通过大字体、鲜明色彩对比来强调数据的变化趋势,让决策者一眼就能获取关键信息,避免被过多无关信息干扰。

三、动态与交互性增强

静态的大屏展示逐渐被动态交互设计所取代。2025 年,UI 大屏将具备更多的动态效果和交互功能。比如,当用户点击大屏上的数据点时,相关的数据详情会以动画形式展开,图表之间也能通过交互操作实现数据关联展示。在教育领域的知识展示大屏中,学生可以通过触摸或手势操作,动态切换不同的知识点,探索知识的内在联系,这种互动式学习体验能极大地提高学习的积极性和效率。

四、可持续性设计理念融入

随着环保意识的增强,可持续性设计理念在 UI 大屏设计中崭露头角。这不仅体现在选择环保的显示材料和节能的技术方案上,还包括在设计风格上倡导简约、避免过度设计造成资源浪费。例如,采用低功耗的显示屏幕,减少不必要的视觉特效以降低能源消耗;在色彩选择上,优先使用自然、低饱和度的色彩,营造舒适且环保的视觉氛围。

五、跨平台与多设备协同设计

2025 年,各种智能设备相互连接,形成一个庞大的生态系统。UI 大屏设计需要考虑与多种终端设备的协同工作,实现跨平台的无缝衔接。例如,在医疗领域,医生可以在医院的大屏上查看患者的整体病历和检查数据,同时通过移动端设备随时调取详细的检查报告和影像资料,这种跨平台的协同设计方便了医疗工作的开展,提高了医疗服务的效率和质量。

六、个性化定制与用户参与

每个用户都有独特的需求和偏好,2025 年的 UI 大屏设计将更加注重个性化定制。用户可以根据自己的使用习惯和业务需求,对大屏的布局、展示内容和交互方式进行一定程度的自定义设置。同时,鼓励用户参与到设计过程中,通过收集用户反馈和使用数据,不断优化设计,使大屏设计更贴合用户的实际需求。
总之,2025 年的 UI 大屏设计正朝着更加沉浸式、简洁高效、动态交互、可持续、跨平台协同以及个性化的方向发展。设计师们需要紧跟这些新风向,不断创新和提升自己的设计能力,才能打造出符合时代需求的优秀 UI 大屏作品,为用户带来更优质的体验。

日历

链接

个人资料

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

存档