首页

简洁之美,细节成就卓越:打造极致移动端弹窗体验

前端达人

细节成就卓越,从精致弹窗设计开始。
在移动端应用的世界里,弹窗不仅是信息传递的桥梁,也是用户体验的微妙触点。一个精心设计的弹窗能够在正确的时刻捕捉用户的注意力,以一种既美观又功能性强的方式提供必要信息或引导用户操作。从视觉清晰度到操作简便性,再到出现的时机和频率,每一个细节都关乎着用户对应用的整体感受和满意度。让我们一起探索如何通过细致入微的设计思考,打造既符合业务目标又让用户感到愉快的移动端弹窗,提升体验,创造细节之美。
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验
 
 
简洁之美,细节成就卓越:打造极致移动端弹窗体验

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

弹框关闭的七种交互方式

前端达人

前言:日常设计工作中,我们设计师可能会面临以下设计问题:
  1.  
    移动端弹框什么时候需要关闭按钮?什么时候不需要关闭按钮?
  2.  
    界面中间的确认取消警示弹框,是否需要在右上角添加“关闭”icon按钮?
  3.  
    手势关闭弹框需要注意什么?
  4.  
    iOS和安卓两端关闭弹框有什么区别?
  5.  
    点击弹框中的任务按钮,弹框是关闭还是不收起?
弹框关闭的七种交互方式
 
 
弹框关闭的七种交互方式
 
 
弹框关闭的七种交互方式
 
 
 
弹框关闭的七种交互方式
 
 
统一使用图标按钮,以icon“x”的形式,显示在底部弹框的右上角,用户通过点击“关闭icon”图标按钮来关闭弹框。
使用场景
当弹框中包含内容和功能操作时,应提供一个关闭icon“x”的图标按钮,以让用户能够主动关闭弹框并进行相应的操作。
何时不需要关闭按钮icon“x”?
1.操作型弹框,需要用户确认或选择操作项,不需要显示关闭按钮,需统一使用文字主按钮,以文本“取消”的按钮形式,显示在弹框面板底部,用户通过点击“取消”按钮来关闭弹框。例如当用户进行删除或提交操作时,弹出的确认框通常只需要“确定”和“取消”按钮,而不需要显示关闭按钮。
2.全局提示toast(自动关闭)。
3.功能入口类型弹框,为了保持界面简洁,不需要“关闭icon”,如智能文档编辑模式的底部悬浮工具栏。
4.警示或通知类型的弹框,不要关闭icon。
弹框关闭的七种交互方式
 
 
关闭按钮位置
关闭按钮需统一显示在弹框右上角。遵循iOS和Android系统规范、用户使用习惯、阅读习惯「Z字型」、避免误操作「关闭之前需要先确认信息和操作项」。
关闭按钮icon“x”何时需要展示在左上角?
页面级:当页面层级超过3级时,为了便于用户能快速回到一级页面,无需原路返回,可以将关闭按钮“x” 置于左上角,位于「返回」按钮右侧。
多语言和国际化用户习惯:特定语言和文化习惯,从右向左阅读顺序,遵循用户阅读习惯。例如台湾、日本等。
弹框关闭的七种交互方式
 
 
用户点击弹框外部区域,即遮罩层,可关闭弹框。
弹框关闭的七种交互方式
 
 
遮罩层不可点击场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,遮罩层不可点击。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
 
遮罩层展示逻辑
1、非模态弹框,不加遮罩层;模态弹框,加遮罩层;
2、遮罩层统一使用半透明黑色蒙层,色值和不透明度的数值由UI定义;
3、遮罩层可视高度,遵循移动端最小点击区域48dp*48dp高度的交互热区,保证用户可点击
 
遮罩层的覆盖范围
  1.  
    遮罩层需覆盖标题栏,需遵循iOS、Android、微信小程序平台规范。其中微信小程序端,遮罩层覆盖标题栏,但不可覆盖标题栏右侧胶囊按钮。
  2.  
    若是内嵌H5页面,因客观条件限制,则弹框之下的遮罩层无需覆盖标题栏。
  3.  
    以上提到模态弹框和非模态弹框两种弹框模式,要想更清晰理解两种模式弹框的关闭交互方式,需要理解两者之间的交互区别。‍‍
 
模态弹框和非模态弹框的交互区别
模态弹框‍‍‍‍‍‍‍‍‍‍‍‍:
用户只能操作弹框内的交互元素,弹框外部区域不可操作,需要加半透明遮罩层。例如底部操作型弹框。
非模态弹框‍‍‍‍‍‍‍‍‍‍‍
用户可以并行操作弹框内和弹框外部区域的交互元素,不要加半透明遮罩层。例如苹果地图App。
 
弹框关闭的七种交互方式
 
 
用户在底部弹框区域向下滑动手指,弹框会随之向下移动,当到达当前弹框高度的1/2位置后,会触发关闭交互,用户继续向下滑动松手则关闭弹框。
弹框关闭的七种交互方式
 
 
交互逻辑
1、支持下拉关闭的弹框,头部区域需统一展示水平条icon,样式由UI定义
2、交互热区:底部弹框全部区域
3、手势方向:手指只能向下移动
4、下拉触发关闭弹框阈值:当前底部弹框高度的1/2位置
 
使用场景
长内容类型弹框,需使用下拉关闭交互手势,关闭弹框
 
不可用下拉手势关闭弹框的场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,不可下拉关闭弹框。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
 
弹框关闭的七种交互方式
 
 
用户在屏幕上向下滑动(包括左下或右下滑动方向)至任意位置后松手释放,可关闭弹框;当用户手指下滑未松手,继续向上滑动到任意位置后松手释放,则可取消关闭弹框。
弹框关闭的七种交互方式
 
 
使用场景
仅图片大图模式场景使用。用户向下滑动屏幕,图片随之向下移动,松手后触发关闭图片查看器,关闭图片弹框
例如:手机相册
弹框关闭的七种交互方式
 
 
用户从弹框区域左边缘向右轻扫,即快速向右滑动后松手,则触发关闭弹框操作,关闭弹框。
弹框关闭的七种交互方式
 
 
不可从界面左边缘向右轻扫场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,不支持向右轻扫关闭弹框。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
除以上场景外,均需要支持弹框左边缘向右轻扫手势关闭弹框,包括Android、iOS、小程序。
 
特殊场景
1、当同时存在页面向右滑和弹框向右轻扫手势时,在弹框区域向右轻扫,先关闭弹框,再次沿着屏幕左边缘向右滑动,则返回上级页面。
2、键盘展开场景,iOS端不支持左边缘向右轻扫收起键盘,遵循iOS平台规范。
弹框关闭的七种交互方式
 
 
对于安卓设备,用户可以使用设备上的物理返回按钮来关闭弹框。当用户按下返回按钮时,可关闭弹框。
交互用法
1、点击物理按键,需原路逐级返回,不允许跳级返回
2、模态弹框,遮罩层覆盖物理返回按键,不支持左边缘向右轻扫关闭弹框
3、安卓手机将系统导航方式切换到全面屏手势,则不存在物理返回按键
弹框关闭的七种交互方式
 
 
  1.  
    点击弹框中的功能按钮,通常需要立即执行并关闭弹框。一定是先执行再关闭弹框,而不是先关闭弹框再执行。用户执行某功能按钮后,遵循即时响应原则,系统必须要反馈用户在执行用户操作。
  2.  
    为什么点击执行功能按钮需要关闭弹框?因为弹框是否关闭,和用户目标有关。用户主动触发某操作唤起弹框,首先是有用户目标的,其次,用户通过点击弹框内某功能按钮,执行任务来实现用户目标。
  3.  
    此外,也存在点击执行功能按钮立即执行不关闭弹框的场景,比如开关选择器,但本质还是围绕当前用户目标来进行决策是否关闭弹框。
 
结语:任何设计都有它遵循的规律
弹框关闭的七种交互方式
 
 
 
 
 
 
 
 
 


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

思考|B端产品如何建立用户画像

ui设计分享达人

在做C端产品设计时,我们常常将碎片化的用户调研信息,通过归类整理将用户进行分类,赋予姓名性别等用户信息以及用户性格,建立起一个个立体的用户画像,帮助我们快速了解用户,建立对用户的有效认知。

 

简洁之美,细节成就卓越:打造极致移动端弹窗体验

ui设计分享达人

在移动端应用的世界里,弹窗不仅是信息传递的桥梁,也是用户体验的微妙触点。一个精心设计的弹窗能够在正确的时刻捕捉用户的注意力,以一种既美观又功能性强的方式提供必要信息或引导用户操作。从视觉清晰度到操作简便性,再到出现的时机和频率,每一个细节都关乎着用户对应用的整体感受和满意度。让我们一起探索如何通过细致入微的设计思考,打造既符合业务目标又让用户感到愉快的移动端弹窗,提升体验,创造细节之美。

谈谈设计创意获取的思路

前端达人

谈谈设计创意获取的思路
 
 
读了一本书,杰夫戴维森的《The 60 sencond Innovation 》,讲的是
创意的获取方式
。因为国外的设计环境与国内还是有很大区别的(所以这本书的微信读书书评并不是很高),我摘选了几个我认为
适合国内现状的创意获取方法,与大家共享
谈谈设计创意获取的思路
 
 
一、关于设计趋势
设计创意是符合设计趋势的,我们需要关注设计趋势。
我觉得趋势这个词,书里面有个观点还是可以的:
关注长期趋势
为什么这么说呢,因为趋势不是朝三暮四的,往往会保持很长的时间。所以我们在做设计创意的时候可以适当关注长期趋势。
1.1关注社会趋势的重要性
最直接影响的就是职业生涯的发展
。譬如你是一名UI设计师或者即将毕业的学生,在当前的形势下UI设计师已经趋于饱和,你想完成一次职业方向的确定或转变,你会往哪里走?
那么你需要关注设计趋势。
如果你选择的是一个接近饱和的方向,那么你的薪资几年内肯定也得不到提高。有的设计师经常会说我做UI设计5-7年了,但是薪资依然还是1万,我
只能说你现在没有什么竞争力。
所以趁着年轻,你可以考虑换一条细分的赛道。
譬如逐渐趋于饱和的车载HMI设计,即将爆发的类似于Vision Pro的增强现实设计。。。
来自于苹果官网
来自于苹果官网
 
1.2如何了解设计趋势
首先,最直观的就是设计大事件。
譬如苹果等著名品牌引导的设计承载方式的变革。从罗永浩推出无限屏概念开始,其实类似的空间设计就已经处于慢热状态。直到苹果正式发布了Vision Pro,这种大事件直接将增强空间设计推向了高潮。
我们可以通过苹果的官方网站,去了解Vision Pro的使用方法,以此来感受Vision pro可以改变什么?文本编辑、影视、阅读以及游戏等等用户体验与手机操作的不同点,从而延伸出未来可以商业化的场景方向,可以做预知性的推断。
有兴趣的设计师还可以通过苹果发布的
Vision pro模拟器
,来尝试性地输出一些创新的想法和创意,以此来建立自己在增强空间设计上的设计经验和竞争力。
其次,可以通过设计网站、社区和平台。
譬如优设、站酷、人人都是产品经理等一些设计资讯平台。很多设计师会将国外的一些好的设计趋势的文章翻译,我们可以通过这些文章来获取设计趋势。
再者,可以通过行业内的研究报告。
譬如艾瑞咨询发布的《2023年AIGC场景应用展望研究报告》,里面就阐述了下一年甚至是未来AIGC的发展方向。
二、经验积累促进设计创意输出
2.1经验积累到一定程度的好处
一般设计师在自身发展的同时,也都会留意身边设计师发展的如何,嫉妒和对比是很正常的。有的设计师会觉得为什么他年纪不大却能当领导,为什么他的薪资比我多那么多,为什么每次任务下来后他总是做的又快又好。。。
因为这是工作/设计经验给他带来了各种红利。
为什么经验丰富的设计师创意那么多呢?那就是
尤尼卡效应(灵感的悄然而至)
。有经验的设计师,职业生涯过程中看过无数的案例,想过无数的方案,做过无数的作品。所以,他们可以在看到问题的时候,立马给你输出设计方案。如果你能达到这种地步,你的竞争力也将无可匹敌。
2.2经验积累下的灵感输出
做到两点:
【建立方向】和【埋头苦干】
毕业5年内的设计师,可以不用过多的去关注别人与自己的差别,你要做的就是【建立方向】和【埋头苦干】,幸运只光顾有准备的头脑。
那些有经验的设计师也都是摸爬滚打一点一滴练出来的。过年的时候跟大学同学吃饭,设计耕耘10余载,他已经是某设计院的总监了。想想与他一起住过的小黑屋,想想我们打地铺黑灯瞎火的做项目,为了钱么?是因为热爱,想做出更好的作品。再看看他一路走来的工作历程,他基本上在一个垂直方向上深耕细作,从场馆的设计方案到制定预算,从项目投标到施工流程,整个一套流程都驾轻就熟了。
2.3不断尝试后的灵感输出
设计师们都知道,灵感不会轻易上门。
创意是被逼出来的
!这一点设计师们都很有感触。
这里的经验积累不完全是工作年限的意思,也有深度挖掘之意
尤尼卡效应要求我们,即使在设计工作中没有灵感的时候,继续尝试着梳理思路不断钻研,肯定会有灵感乍现的那一刻。就像书中说的那样:
因为创新是一个渐进的过程,一次加上一点思考,最终会柳暗花明。
MIdjourny输出:设计师绞尽脑汁
MIdjourny输出:设计师绞尽脑汁
 
三、创意汇报
3.1高中低方案战略
要想实现创意被大家更好地接受,通常可以准备三种可能的方案:1.最佳方案2.中间方案3.最差方案
领导的决策,也需要有一定的参考。我们给出的方案,尽量涵盖高中低三种维度,以便进行对比。
3.2选择时机进行推荐
创意方案出来后,你可以安排一次会议/宣讲会,阐述一下自己的设计方案。聪明的做法就是在会议召开之前,先私下把方案简单过一下,以获得一定的支持。
3.3学会倾听
你在汇报项目的过程中,别人会有一些想法和建议,麻烦你认真倾听。不要着急去打断,以免造成厌恶性沟通。
3.4不要放弃
创意被否定很正常。
真正能一次通过的创意实属罕见,就好比不能因为拿不到第一就不上场比赛一样,你也不应该因为创意被否一次就永远自暴自弃。
四、创意输出需要心流状态
心流状态是指自己已经完全沉浸在设计创意中了。
心流状态可以很好地帮助设计师提高工作效率,促进设计创意的输出。
4.1如何获得心流状态
环境很重要。
对于设计师而言,通过调整周围的环境,比如说引进一些比较明亮的色彩、图片、标语等,可以大大激发一个人的学习能力。
开放、整洁、平整的表面有助于整理人的思维,所以一般来说,你的桌子越干净,就越容易提高工作效率,应对工作中的各种挑战。
五、创意伙伴日常沟通
众人拾柴火焰高。
5.1与什么样的人沟通
与相同价值的人沟通。
《探寻第一名》(Looking Out for Number One)一书中,作者罗伯特·林格(Robert Ringer)指出,持久的关系——一方为另一方提供相同的价值,双方的利益交织在一起,让这种关系持续下去——非常有价值。
因此
你找的人必定是彼此都珍视的人,可以成为创意伙伴
。你可以每个月找创意伙伴聊聊天喝喝茶充充电,获取一些新的想法,让自己的大脑保持常青常新。马云说过,企业在不缺钱的时候融资,而不是缺钱了再去融资。
设计圈有认识的大佬都很重视沟通,会经常跟身边的朋友聊天,其实这很大程度上
可以让一个人拥有多个人的经验和能力。
所以设计师应该尝试着开放一些,而不是闭门造车。
MIdjourny输出:设计师聊天
MIdjourny输出:设计师聊天
 
六、公司层面:讨论/沟通氛围的重要性
公司层面,应该鼓励设计师在会议上多阐述自己的意见。
很多公司是不是有这样一种现象:开会的时候鸦雀无声,只听到汇报的人胆怯地练着演讲稿或者说着自己的方案,让其他人给意见的时候基本无人举手,只能等领导给一些修改意见,
然后这个设计方案就变成了领导认可的设计方案了。
其实这种工作氛围真的非常糟糕,限制了设计师的创意的发挥,同时也让产品成为了一个片面性的产品。
6.1建立讨论沟通氛围的好处
所以团队的讨论氛围一定要建立起来。
书里这样描述:
1.当一个人感觉自己的想法受人欢迎的时候,他会想出更多有创意的点子来解决眼前的问题——有时可能会在会上发表看法,有时则是在私下里提出建议;
2.如果团队的每个成员都感觉更有满足感,他们的参与热情就会高涨。想想看,如果人人都愿意献计献策,事情将会变得多么容易啊!
6.2好好先生对设计创意的阻碍
讨论沟通,也促进了不同声音的展现。团队需要不同的声音,团队需要谦和而坚定的人来告诉我们事情的本来面目,要听到赤裸裸的现实。
 
感谢大家阅读。
【阿琦设计日记】,用最接地气的语言,讲述设计师成长道路上的故事。

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发



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

C端产品体验设计走查模型

博博

设计输出质量对于设计团队来说是极为重要的事情,在设计过程中,存在着许多潜在的风险,这些风险可能会导致用户直接流失,甚至是品牌形象受损,且对于C端产品来说更是如此。因此,作为一名用户体验设计师,降低体验设计风险是我们工作中不可或缺的一部分。
当然体验问题可能来自技术、设计、运营等多个环节,本文主要从体验设计师的视角去思考如何降低体验风险。
 
C端产品体验设计走查模型
 
 
一、设计团队如何降低体验风险
1、可以建立一套体验设计走查模型,通过建立走查模型,我们可以对设计过程进行全面检查,及时发现并解决设计中的问题。
2、建立设计内审机制,通过多名设计师和关键项目组角色共同内审,减少出错风险。
3、需要将体验问题的发现和解决纳入设计师工作当中,并且有明确的责任划分,确保产品遗留问题得到有效解决。
C端产品体验设计走查模型
 
 
二、建立适合自己的体验走查模型
走查模型的作用是帮助设计师产出全面的设计方案,尽可能避免有遗漏场景,造成体验事故和不必要的返工。市面上有很多不同的体验走查模型,具体需要根据自身产品情况确定。
所以好的体验走查模型需要符合3个要求。
1、实用性:需要通过模型将主观感受描述成客观的场景、标准,确保大家理解一致,不要造成使用偏差。
2、符合平台自身属性:结合自身产品类型和过往最常见的问题类型,有选择性的制定,不用追求大而全。
3、能够真正纳入工作当中:走查模型建立后,一定要在真实的项目中发挥作用,比如作为设计内审的具体通过标准之一。
C端产品体验设计走查模型
 
那么如何制定出符合平台要求的走查模型?其中比较有效的方法是梳理过往遇到的体验问题,并按照场景归类,梳理出典型的问题,并纳入到走查模型中。
比如在一些偏活动属性的产品设计中,我们发现设计师经常遗漏平台品牌性的信息,于是我们把品牌识别性也纳入到了走查模型当中。
C端产品体验设计走查模型
 
 
三、沉淀体验走查模型
体验走查表确定后,可以打印出来并且以表格的形式进行共享。
C端产品体验设计走查模型
 
四、如何避免流于形式,让走查模型真正发挥作用
一、以走查模型为交付标准。
产品从需求到落地,中间会经历多个环节和角色,体验走查模型一般在2个环节着重使用。
1、需求梳理阶段:帮助设计师围绕具体需求明确设计范围。
2、设计交付前:对照自查表,查漏补缺。
二、作为设计内审通过标准之一
在设计内审阶段,可以将体验走查模型当作通过的标准之一,走查模型可以和设计规范配合使用,确保在设计输出的时候是尽可能完整的。
C端产品体验设计走查模型
 
 
C端产品体验设计走查模型
 
 


作者:微店UED
来源:站酷

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

如何巧妙的呈现龙年氛围感

前端达人

龙年春节已结束,回顾一下各大产品是如何营造龙年氛围感的,今天黑马哥精选了部分场景,我们一起来看看吧!
如何巧妙的呈现龙年氛围感
 
 
 
 
一、封面边框营造氛围感
 
通过对主界面配图营造氛围感相对直接,可以针对封面设计进行创意,也可以在边框上面进行装饰。
 
爱奇艺首页推荐的影片封面设计中,在不改变结构布局的基础上,对封面边框进行氛围装饰,简洁直观地呈现出龙年氛围感。通过对封面设计进行创意,可以避免改变产品结构,方便随时更换,灵活性较高。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
二、通过图标配色营造氛围感
 
营造氛围感最直接的表现就是颜色层面,可以通过配色突出主题氛围。
 
马蜂窝 App 首页金刚区图标,春节期间运用红黄渐变进行图标配色,以此强化春节氛围感。不改变图标造型,也能便于用户记忆和适应变化,表现形式简洁有效。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
三、主题活动替换品牌区域
 
利用品牌 Logo 进行主题演变可以是品牌造型层面设计,也可以在品牌区域位置上面替换内容,针对预留的位置发挥性更强。
 
夸克 App 在主页默认展示品牌 Logo,春节期间以主题活动进行替换,不仅突出氛围也能增加活动曝光度。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
四、烟花动效突出顶部视觉区域
 
通过春节元素进行动效表现,可以让氛围感更突出,比如绽放的烟花、鞭炮、祥云、生肖元素等。
 
携程旅行首页顶部视觉区域,春节期间以绽放的烟花动效进行表现,氛围感十足。不仅突出年味,也能让区域视觉感更突出。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
五、主题文案嵌入图标设计
 
金刚区就如同百变金刚一般,更换内容非常便利,灵活性很高。针对图标设计风格、主题风格、主题文案等形式进行设计融入,均可突出各类主题风格。
 
安居客 App 首页金刚区图标设计,在春节期间结合主题文案进行嵌入,氛围感表现得直观清晰。再配合春节氛围的 Banner 展示,新春氛围渲染得非常到位。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
六、按钮设计中的画龙点睛
 
针对主按钮设计进行发挥较为常见,可以在按钮造型、配色、装饰等层面发挥,表现形式丰富多样。
 
携程旅行订票查询按钮设计中,可谓是画龙点睛。将中国龙和春节元素融入到按钮装饰中,不仅突出氛围感,眨眼睛的动效也是点睛之笔。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
七、主题皮肤氛围感拉满
 
在产品的各区域都可以进行主题氛围营造,形成不一样的主题皮肤,带给用户节日的沉浸式体验。
 
嘀嗒出行 App 从不错过每个节日的表达,春节期间在多个场景营造氛围感,使得主题皮肤氛围感拉满。在背景区域、各局部视觉区域、图标、弹窗、按钮、配图等,把春节氛围表现得淋漓尽致。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
八、满屏红包抢不停
 
对于春节而言怎能少得了抢红包的环节,将抢红包的游戏结合到活动中,氛围感和参与度都非常到位。
 
腾讯视频 App 就将抢红包的游戏结合到活动表达中,满屏的红包让你抢不停,用户的参与度瞬间被激活啦!通过游戏化的形式表达活动主题,更能符合年轻用户的需求。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
九、主题化 IP 形象表达
 
针对 IP 形象进行主题换肤,是强化主题氛围最直接的设计形式。
 
自如将主题化 IP 融入到个人中心和头像等表达中,也能突出春节氛围。在金刚区图标设计中也将春节元素进行发挥,整体的氛围营造非常到位。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
十、无处不在的云放烟花
 
燃放烟花爆竹才能体现出年味,在产品中的云放烟花也能让用户感受到乐趣。
 
高德地图无处不在的云放烟花,不仅让用户感受到烟花的乐趣,也能让云端年味变得更有氛围感。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
十一、突出卡片设计氛围
 
卡片式设计通常较为简单,以白色卡片居多,特殊情况下也会进行局部氛围营造。
 
高德地图个人中心在春节期间,推出了拜年相关的版块,以春节氛围营造卡片设计,氛围感十足。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
十二、营造底部标签栏氛围感
 
底部标签栏图标发挥是营造主题氛围的最佳选择之一,各大产品都会在这个区域进行设计发挥。
 
结合春节元素进行图标设计,或者在背景层面突出氛围等,设计表现形式非常多样化。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
小结
 
营造龙年氛围感的形式和案例非常多,这里仅选择了小部分作为欣赏。希望可以抛砖引玉,和大家一起在体验和积累中不断进步。
 
作者:黑马青年(vx: heimaux)
本文由 @黑马青年 原创发布。未经许可,禁止转载。
 


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

设计规范全方位指南

博博

一、设计规范的目标?
首先需要明确设计规范的目标,也就是为什么建立设计规范,这里包括提高用户体验、降低开发成本、提高团队协作斜率等。这些目标将为后续的规范制定提供方向。
还有就是大家都知道,在做项目时如果没有明确的目标和价值,是很难推动的。
从混沌到有序:设计规范全方位指南
 
 
二、什么时候建立设计规范?
在项目全面进入ui设计之前,先设计几个核心页面的demo,确立整体的基础规范和设计风格,把一些基础的设计规范定义出来,例如命名、尺寸、间距、颜色、字体、核心控件等、这样在开展设计的过程中保持一致性和统一性,当然,在项目设计过程中,UI设计规范也需要根据实际情况去调整补充。
从混沌到有序:设计规范全方位指南
 
 
三、设计规范具体要怎么做?
这里先讲一些基础通用的规范
3.1、间距
在间距部分我们需要把一些页面间距、模块间距、元素间距,这些要定义出来像我平时在工作中通常以8px作为基数,以此衍生出8、16、24、32、48、64
,这6个间距数值,完全能够满足绝大多数的使用场景。当然,针对信息较少的页面也会使用到120、160、200...其他间距数值,例如缺省页、登录页面等。出去这些特殊页面,基本上通用的就上面那6个就足够了
从混沌到有序:设计规范全方位指南
 
3.2、颜色规范
我们要先把主色调和辅助色,通常主色都是根据品牌形象和目标用户的需求选择。
拿在颜色的定义中需要注意以下几点
1、使用色彩心理学:
根据不同的颜色和情感联想,选择适合的颜色来传达品牌形象和用户体验。例如,蓝色通常被认为具有专业、信任和稳定的感觉,而红色则具有激情、活力和创新的联想。
2、建立层次结构:
使用颜色的饱和度和明度来建立层次结构。将重要的设计元素设置为高饱和度和明亮的颜色,使其在页面上突出显示,而将次要的设计元素设置为低饱和度和较暗的颜色。
3、避免使用过多的颜色:
过多的颜色可能会使页面显得混乱和难以聚焦。在设计过程中,尽量使用有限的颜色组合,并且要避免使用过多的对比色或互补色。
从混沌到有序:设计规范全方位指南
 
3.3、文字规范
我们需要把字体、字号、颜色、行距、这些给定义清楚,有规律的大小字号更有利于阅读,(另外要注意一些特殊字体的版权问题)常用的字体大小20px、24px、28px、32px、36px,44px,48px,且都是间隔4px,设计师需要根据具体场景去决定字体大小,以确保用户能够轻松阅读和理解界面信息层级比重。
 
3.4、UI图标规范
图标是UI设计的重要组成部分,它可以使图标看起来更加美观、易用、统一和有吸引力。也传达着整个UI视觉风格调性,和系统功能的作用。在图标设计上一定要简单清晰,定义规范时要对图标的大小、圆角、线条粗细、等有明确的指示,在绘制的时候我们可以制定自己的
网格规范,以便参考。
从混沌到有序:设计规范全方位指南
 
 
3.5、按钮
按钮尺寸:
一般来说,按钮的尺寸应该能够适应不同的屏幕尺寸和分辨率,并且应该能够突出显示。
按钮形状:
应该具有清晰的轮廓和圆润的边角,圆角大小是多少
按钮颜色:
按钮的颜色应该与整体UI设计风格相协调,并且应该能够突出主题和重点信息。一般主按钮大多使用主题色。
按钮文本:
按钮的文本应该简短明了,并且应该能够清晰地表达按钮的功能。还需要定义清楚按钮中限制的字数。
按钮内边距:
按钮的内边距应该能够扩大按钮的可点击范围,并且应该能够提高用户点击按钮的准确性。需要考虑极限情况下,最小应该保持多少内边距。
按钮状态:
按钮的状态应该能够表达按钮的状态和功能。一般来说,按钮的状态包括正常状态、点击状态等。
从混沌到有序:设计规范全方位指南



作者:考思考
来源:站酷

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

产品体验改版应该这样做!

前端达人

前言

hi 大家好,最近忙里偷闲,对过去在团队中主导的一次产品改版进行了深入的梳理。现在,来和大家分享这次改版的思路和方法,以及我是如何逐步推动整个过程的。
在这次改版中,我运用了一系列的方法论和思路,以确保我们能够更好地满足用户需求和市场趋势。同时,我也遇到了一些挑战和困难,但通过不断尝试和调整,我们最终成功地完成了改版。
文章内容较长,但相信耐心阅读后,你一定会有所收获。希望通过我的经验总结能够为大家提供一些启示和帮助,让我们在未来的工作中更加顺利和高效。
我将拆分为六个阶段:1.准备、2.探索、3.收拢、4.制定、5.执行、6.成果对大家理解整个流程会更加清晰一些。

 

壹、准备

在执行前我们要做好哪些准备工作呢?并能有效帮助我们提前规避一些问题,且更有序顺利的推进项目,通过后续项目复盘我大概总结了以下三个比较核心点:1.编写SOP文档、2.明确参与人员、3.制定执行策略。

 

一、编写SOP文档

更重要的是明确执行流程,提高工作效率,它能够清晰地展示整个执行过程,让协作者更容易理解和掌握执行步骤,一份详情的SOP大纲可以减少在执行过程中犯错概率,我们可以通过它明确规划过程或任务应该如何执行,包括具体的步骤、方法、所需材料和注意事项等。这有助于我们在执行过程中更好掌握方向避免失焦。

二、明确参与人员

在执行前需要明确参与到整个流程中的角色,我将参与人员分为了两类,固定参与非固定可调配,正如词意固定参与人员指的是在整个流程中起到主要作用,需要长期紧密协作的人员,比如方案制定者、设计师、PM、开发人员等。而非固定可调配人员则是在特定情况下才参与的人员,在项目中起到辅助作用,比如协助进行访谈或上机测试、通过调用内部团队资源组织虚拟小组进行用户体验研究的协调员等。不同的人员在流程中扮演不同的角色和承担不同的职责,总之可以将自己当作成这个项目中的Owner所有事物都由你来制定。

例如1:方案产出后可以邀请公司一线同学,进行测试以验证方案是否解决了用户痛点和方案完整度。通过收集反馈数据可以评估方案的效果和可行性,从而进行调整和优化,较多个维度度量。
例如2:当需要进行头脑风暴或其他研究时可以调用内部团队资源,通过组织虚拟小组的方式进行。这样可以方便我们了解不同用户的反馈声音,使我们更加精准找到方向,提高工作效率。

三、制定执行策略

在执行时需要明确具体的执行策略和计划以确保能够按时按质地完成计划,根据目标和范围、资源和时间等因素,制定具体的执行策略包括任务分解时间表负责人等核心价值观要做到“试试有回应,件件有着落”。

在制定执行策略计划排期时,我总结了五个注意事项:

  1. 任务分解要具体、明确,包括具体的任务名称、工作内容、完成标准等信息。
  2. 时间节点要合理、紧凑,确保任务能够按时完成。
  3. 负责人要明确,并分配合理的工作量和职责。
  4. 风险和问题的预测要全面、准确,并制定相应的应对措施。
  5. 调整和优化要及时、灵活,根据实际情况进行调优。

总之,制定执行策略计划排期是项目或任务成功执行的关键之一。通过合理的任务分解、时间节点安排和负责人分配等措施,可以更好地规划和管理项目或任务的执行过程,确保按时、按质地完成。
小结:以上是我对项目改版前期准备工作总结的心得,做足前期准备工作,可以确保项目改版的方向更加明确,团队之间的合作更加顺畅,从而为后续的执行和推进奠定有利的基础

 

贰、探索

在探索阶段制定明确的策略是至关重要的,以确保能够有效地深入洞察问题并识别出产品中存在的“体验问题”“用户需求”。以下是我制定的策略:

 

一、体验层策略
体验层将通过A.可用性测试B. 数据分析C.竞品分析三大板块进行深入洞察,并识别出产品存在的体验问题。

 

A. 可用性测试:

通过小规模的可用性测试,邀请目标用户参与,以观察他们如何与产品进行交互。通过这种方式,可以发现用户在操作过程中的问题、困扰和需求。对于可性测试网上有很多介绍以及使用方法,这里我就不过多展开讲解了,简单总结一些我在使用过程中制定的流程和方法。

  1. 组织虚拟小组:因为可用性测试需要大量的样本的数据支撑,我们可以调动内部团队资源组建成2人一组或3人一组小团队,并分配角色和职责如:观察员,记录员等。分别进行观察用户上机测试。
  2. 确定测试目的:明确测试的目标,是为了评估产品的可用性、找出问题、改进设计等。
  3. 选择测试对象:可以邀请公司内部具有代表性的用户(外部用户邀请不到情况下)需要考虑不同的用户类型、背景和需求,以便更全面地评估产品的可用性。
  4. 制定测试任务:根据产品的特点和用户需求,设计产品核心关键操作任务,包括对产品界面的浏览、功能的使用、信息的搜索等,最好是可以通过和PM共创共同制定,以免走错方向。
  5. 准备测试环境:选择合适的测试场所如公司会议室,办室,确保测试过程中不会受到干扰和影响,同时准备好测试所需的所有设备和记录工具。
  6. 用户上机测试:让用户在测试环境中完成预设的任务,观察员和开发人员在一旁观察、记录和分析用户的行为、反应和反馈。
  7. 体验问题分类:可将问题分为6大类(功能问题、性能问题、技术异常、布局框架、操作交互、视觉问题)
  8. 体验问题定级:可将问题分为4个等级来评估问题的重要程度(致命、严重、一般、轻微)。
  9. 分析结果总结:根据观察和记录的结果最后进行汇总,对产品进行分析找出问题和改进点。

在可用性测试中,我总结了四个注意事项:

  1. 选取适当的样本:样本应该具有代表性,能够涵盖不同的用户类型和需求,以便更全面地评估产品的可用性。
  2. 设计合理的任务:任务应该与产品的实际使用场景和用户需求相关,同时考虑不同用户的能力和偏好。
  3. 舒适的测试环境:测试环境应该舒适、安静、无干扰,以减少用户的不安和压力,同时提供必要的设备和工具。
  4. 观察用户的行为:观察员应仔细观察和分析用户的行为、反应和反馈,以便更准确地了解产品的问题所在。

B. 数据分析:
通过CSM团队对企业产品购买数据的分析,可以更直观的看到企业在购买过程的问题和机会,从而挖掘企业对产品的诉求最后将数据进行过滤抽取有效信息转化为用户需求,帮助我们明确产品体验优化范围和与竞品拉开差异化机会点,从而更准确地解决用户在使用过程中遇到的问题。

 

在提炼产品问题和用户需求时,我们可以从以下四个维度进行提炼,便于更加准确性的判断问题的根源:

  1. 使用场景卡点:用户在使用产品遇到的具体问题和难点,我们可以针对性地解决用户在使用过程中遇到的实际问题,提高用户的使用体验。
  2. 核心使用场景:用户使用产品核心场景和目的,通过了解核心使用场景,我们可以更好地理解用户的需求和痛点,并针对性地提供解决方案。
  3. 产品核心功能:产品或服务的主要功能和特点,我们还可以了解用户对产品核心功能的认知和满意度,发现潜在的问题和机会。
  4. 客户产品诉求:用户对产品期望和诉求,并针对性地提供解决方案。我们还可以了解用户对产品价值的认知和期望,为产品的定位和营销策略提供参考。

总之,通过从使用场景卡点、核心使用场景、产品核心功能和客户产品诉求这四个维度进行提炼和分析,我们可以更加准确性和全面性地了解用户需求和痛点,为体验升级、开发、功能优化等提供重要的参考依据和支持。

 

C. 竞品分析:

竞品分析有很多方法,这里我采用的是“用户路径分析法”通过观察和了解竞品的功能使用情况,分析竞品的业务模式、用户体验和视觉呈现,从而发现机会点并形成差异化。在进行竞品分析前选择分析对象很是非常关键之一,我们可以从两个维度“使用频率、市场规模”进行选择合适的竞对产品。

  1. 使用频率:这个维度关注的是竞品的使用频率,即用户与竞品交互的频率。通过了解竞品的使用频率,我们可以更好地理解用户对竞品的依赖程度,以及竞品在市场中的活跃度和影响力。在选择竞品时,选择那些使用频率较高的产品可以更好地了解用户的需求和行为,从而发现更多的机会点。
  2. 市场规模:这个维度关注的是竞品的市场规模,即竞品在市场中的销售量和影响力。通过了解市场规模,我们可以更好地了解竞品的竞争地位和市场占有率。在选择竞品时,选择那些市场规模较大、具有代表性的产品可以更好地了解市场的需求和趋势,从而发现更多的机会点。

在进行竞品分析过程中,我总结了两个方法可以帮助我们更有效的了解到竞品信息:

  1. 通过销售代表进行访谈:销售代表是直接与客户沟通的人员,他们非常了解客户对产品的需求和反馈,并且在介绍产品时也会提及其他竞品。通过与销售代表进行访谈,我们可以了解到市场对竞品的反馈和评价,从而更好地选择合适的竞品对象。
  2. 从企业软件购买量中抽样:这种方法可以帮助我们找到那些被广泛使用并且具有代表性的竞品。通过了解企业软件购买量,我们可以选择那些在市场中占据较大份额的竞品进行分析,从而确保我们选择的竞品对象是符合分析需求的。

总之,选择合适的竞品对象是进行竞品分析的关键之一。通过使用“使用频率”和“市场规模”两个维度来选择竞品对象,可以帮助我们更好地了解市场和用户需求,发现更多的机会点并形成差异化。同时,参考销售代表的反馈和从企业软件购买量中抽样也是选择合适竞品对象的可靠方法。

 

二、用户层策略

用户层将通过A.用户访谈B.用户旅程图两大板块进行深入洞察,识别出产品存在的体验问题,从而针对性地优化产品体验。

 

A. 用户访谈:
通过现场对用户one one形式进行访谈了解用户需求和反馈,通过与用户进行交流深入了解用户在使用产品或服务过程中的感受、需求、痛点和期望。最后我们对用户反馈的问题进行梳理、分析和脑暴,洞察出产品功能及服务优化方向。网上有很多关于用户访谈使用介绍这里就不过多介绍了,简单总结了一些我在使用过程中制定的流程和方法。

在进行用户访谈时我总结了七个心得,可以帮助我们在执行时更好的开展。

  1. 确定访谈目标:在开始访谈前,需要明确访谈的目标和目的,以确保访谈的顺利进行和结果的可靠性。
  2. 选择合适的受访对象:选择具有代表性的用户作为受访者,可以更好地了解用户的需求和反馈。
  3. 准备访谈提纲:根据访谈的目标和目的,准备一份访谈提纲,包括要探讨的主题、问题列表等。
  4. 舒适的氛围:在访谈过程中,要营造一个舒适、轻松的氛围,以使受访者能够自由地表达自己的想法和意见。
  5. 关注用户需求:在访谈过程中,要关注用户的需求和痛点,了解用户对产品的期望和要求。
  6. 避免引导性问题:在访谈过程中,要避免提出引导性的问题,以避免影响受访者的回答。
  7. 记录和分析访谈结果:在访谈结束后,要及时记录和分析访谈结果,整理受访者的意见和建议,以帮助我们了解用户需求和反馈,针对性地优化产品体验和服务。

总之,用户访谈是一种非常有效的了解用户需求和反馈的方法,可以帮助我们更好地了解用户的需求和痛点,针对性地优化打磨产品体验和服务。

 

B. 用户旅程图:
通过用户访谈得出来数据结果,我们将采用绘制用户旅程图方式,可以更全面地了解用户在使用产品或服务的过程中所经历的流程和步骤,以及用户的触点、行为、痛点、爽点以及内心OS等元素。通过将用户旅程图与用户访谈得出的数据进行结合,我们可以更有效地识别出用户在使用过程中问题暴露最多的环节从而针对性地优化产品体验

在绘制用户旅程图时,我总结了五个注意事项可以帮助我们在绘制时更准确:

  1. 确定用户旅程图范围和目标:在绘制用户旅程图前,我们需要明确用户旅程图的范围和目标,例如要绘制的是整个产品的用户旅程图还是某个具体功能的用户旅程图。
  2. 收集用户数据:通过用户访谈、调查问卷、观察用户行为等方式收集用户在使用产品体验过程中的数据。
  3. 绘制用户旅程图:根据收集到的数据,将用户在使用产品体验的过程中的触点、行为、痛点、爽点以及内心OS等元素以图形化的方式呈现出来。
  4. 分析用户旅程图:通过分析用户旅程图,可以发现用户在使用产品体验过程中存在的问题和需求,从而针对性地优化产品体验。
  5. 多角色泳道图:在B端业务中,由于涉及多个角色的交互和触发任务,因此多角色泳道图是一个非常有效体现用户链路的,可以帮助我们更好地了解用户的使用行为。

总之,通过绘制用户旅程图,我们可以更全面地了解用户在使用产品体验过程中所经历的流程和步骤,结合用户访谈得出的数据,可以更有效地识别出用户使用的卡点和产品体验问题,从而针对性地优化产品体验。

 

三、探索结果总结

我们通过前期的“体验层和用户层”分析结果提取关键性问题,并与业务方共创、分析、量化当前版本中存在的体验问题,且达成共识共同制定本次产品改版优化目标

总之,在梳理调研结果问题过程中,我们可以以制定优化目标形式进行总结,这样可以帮助后续在制定产品体验优化目标和设计策略时会更加聚焦问题避免走偏方向。
小结:在探索阶段,通过体验层和用户层分析以及其他方法和工具的应用,我们可以更全面地了解用户需求和反馈,明确产品改版的优化目标,为后续的产品设计和开发提供有力的指导和支持。

 

叁、收拢

通过前期的产品体验分析,将制定五个方面的产品体验优化目标,分别为:业务目标、产品目标、用户目标、体验目标和设计目标,可以帮助我们更好地与业务侧进行共创,明确本次产品体验优化的范围和重点。同时,这些目标也可以帮助我们后续更好地度量产品的优化提升效果。

总之,在制定产品体验优化目标时需要确保每个目标都是具体可衡量可实现的,并且与业务需求和用户需求保持一致。同时,还需要根据产品的实际情况和优先级,确定哪些目标是必须达成的,哪些目标是后续通过迭代逐步达成的。这样可以更好地明确工作量,使我们在改版过程更加聚焦优化方向。
在制定产品改版目标时,我总结了四个注意事项可以帮助我们在制定时提前规避一些问题:

  1. 业务目标:是与业务需求和KPI\ORK相关的目标,如提高用户活跃度、增加订单量等。这些目标通常是公司或团队关注的重点,也是产品体验优化的基础。在制定业务目标时,需要与业务侧进行充分沟通和讨论,确保目标与业务需求保持一致。
  2. 产品目标:是与产品功能和特性相关的目标,如增加新功能、优化产品架构等。这些目标可以帮助我们更好地完善和迭代产品,提高产品的质量和竞争力。在制定产品目标时,需要考虑产品的整体架构和功能特性,确保目标与产品的发展方向保持一致。
  3. 用户目标:是与用户需求和反馈相关的目标,如提高用户满意度、解决用户痛点等。这些目标可以帮助我们更好地了解用户需求和反馈,从而针对性地优化产品体验。在制定用户目标时,需要深入了解用户的需求和反馈,并结合用户体验调研数据进行制定。
  4. 体验目标:是与用户体验和交互设计相关的目标,如提高操作的流畅度、优化界面设计等。这些目标可以帮助我们提高产品的用户体验和交互效果,从而使用户更加愿意使用产品。在制定体验目标时,需要结合用户体验数据和用户访谈结果进行制定。
  5. 设计目标:是与产品设计和技术实现相关的目标,如优化视觉质感、提高任务成功率等。这些目标可以帮助我们更好地实现产品的设计和开发,提高产品的质量和体验。在制定设计目标时,需要考虑设计的可行性和技术实现的可能性,确保目标能够得以顺利实现。

小结:在制定共同目标时,需要与相关人员进行清晰、明确的沟通,确保每个目标的具体达成结果和每个人的职责都得到明确。这样可以避免误解和混淆,确保参与人员能够准确、高效地推进项目。

 

肆、制定

通过前期分析的结论并制定改版策略,主要围绕两个方面:1、用户需求分类:针对用户反馈的需求进行过滤,并将功能定性和优先级排序2、制定设计策略:根据用户需求和业务目标及产品目标,制定相应的设计策略,设计策略需确保与用户需求和业务目标及产品目标保持一致。通过用户需求过滤、制定设计策略、明确工作范围、制定开发计划以及产品迭代优化策略,我们可以更好地明确工作范围和推进项目。同时也可以确保项目的顺利进行。以下是我制定策略使用的方法:

 

一、用户需求分类

在前期针对用户访谈和CRM人员提出的用户需求转化为问卷,并使用KANO模型进行需求分类和优先级排序,可以帮助我们更好地了解用户对产品的关注点和期望,明确后续优化时需要重点解决的用户痛点。这样做有助于提高产品的质量和竞争力,并更准确地满足用户的需求。

我们通过KANO模型,将用户需求分为基本需求、期望需求和魅力需求。基本需求是用户认为产品必须具备的需求,需要与PM达成共识确保这些需求得到正确实现并且不能出现问题。期望需求是用户认为产品应该具备的需求,需要在产品改版过程中实现这些需求以增加用户的满意度。魅力需求是用户没有预料到的需求,可以在产品中适当的实现这些需求可以增加用户的满意度和口碑。

总之,KANO模型是一个非常好用的工具,不仅可以帮助我们更好地了解用户的需求和期望,还可以用于日常工作对PM提出的需求进行甄别,明确属于哪一类需求,从而更好地满足用户的需求并提高产品的质量和竞争力。此外,KANO模型还可以用于产品策划、运营策略制定、市场营销等领域,可以帮助团队更好地了解用户需求和痛点,从而制定更精准的策略和措施。

 

二、制定设计策略

制定设计策略是产品改版开发过程中非常重要的一环,可以帮助我们明确设计方向和目标,并制定相应的策略来实现这些目标。通过前期的调研将基于GSM+UES模型制定设计目标与策略,可以更准确地满足用户需求和业务目标及产品目标,并且与调研的结论形成闭环。同时,与业务方进行共创达成目标一致也是非常重要的。我们需要与业务方进行充分的沟通和讨论,确保设计策略与业务目标保持一致,同时也能更好地理解业务方的需求和痛点,为产品的改版提供更贴合实际需求的解决方案。

总之,制定设计策略需要充分考虑用户需求、业务目标、产品目标、产品发展趋势等因素,并与业务方进行充分的沟通和共创,以确保设计策略的可行性和有效性。同时,也需要根据实际的设计结果和用户反馈来不断调整和优化设计策略,提高产品的用户体验和质量。
小结:在进行用户需求分类和制定设计策略的过程中,需要充分地与团队成员进行沟通和讨论,以便更好地理解用户需求和业务目标,并制定相应的设计策略。同时,也需要确保团队成员对设计策略的理解和共识,以避免设计方向失焦。在与团队成员进行沟通和讨论时,可以采用多种方式,如会议、讨论组、头脑风暴等,以便充分发挥团队的智慧和创造力。同时,也需要保持开放的心态,积极听取不同观点和建议,并对问题进行深入的分析和探讨,以找到更优的解决方案。

 

伍、执行

在执行阶段,通过方案探索设计方案产出两个方面来进行方案设计和可行性验证。在执行这两个方面的工作时,团队需要保持紧密的合作和沟通,以确保设计方案的一致性和可行性。同时,团队还需要不断地与业务方和技术团队进行沟通和讨论,以确保设计方案能够得到有效的实现。

 

一、方案探索

方案探索将通过A.竞品框架分析B. 探索方案产出C.MVP方案验证三大板块进行方案探索,并确保方案的可实现性和有效性。

 

A. 竞品框架分析:

在方案设计前我们需要对竞品框架布局进行分析可以帮助我们更好地了解市场需求和用户行为从而更好地指导我们的产品改版方案设计通过对竞品框架布局的分析我们可以了解到用户使用频率较高的竞品是如何布局功能的以及它们的操作路径和交互设计。这些信息可以为我们提供有力的参考,帮助我们在设计改版方案时更好地聚焦方向优化框架布局提高产品的用户体验和基础体验。此外,通过对竞品的分析,我们还可以了解竞品的优势和不足之处,从而更好地改进自己的产品。我们可以借鉴竞品的优点,同时也可以针对竞品的不足之处进行改进,使自己的产品更加符合用户需求和市场需求。

分析完竞品框架后,还需要进行框架的优缺点对比,这里将通过统一性,逻辑性,可拓展性,可预测性4个维度进行对竞品框架分析,得出它们的优缺点有都有哪些,通过最后结论可以定位我们产品框架布局方向。

通过前面竞品框架分析和优缺点对比后,我们需要回顾一下是否符合我们的目标,并且衡量新框架可以解决可用性测试出来的体验问题的数量,同时也需要衡量新框架与目标的匹配程度

在竞品框架分析中,我总结了三点经验:

  1. 首先,我们需要确保新的框架设计能够满足我们的目标。我们的目标可能包括提高用户体验、增加用户满意度、优化操作流程等。通过对比竞品和分析优缺点,我们可以初步确定新的框架设计是否符合这些目标。
  2. 其次,我们需要度量新框架可以解决多少个可用性测试出来的体验问题。可用性测试可以帮助我们发现用户在使用产品过程中遇到的问题和困难,而这些问题和困难往往直接影响到用户体验和产品满意度。如果新的框架设计可以解决这些问题,那么它可能会带来更好的用户体验和产品满意度。
  3. 最后,我们还需要衡量新框架与目标的匹配度。即使新的框架设计符合目标,并且可以解决一些可用性测试出来的体验问题,但我们还需要确保它与目标完全匹配。换句话说,我们需要确保新的框架设计可以最大程度地满足我们的目标,并且能够带来更好的用户体验和产品满意度。

总之,在进行竞品框架分析和优缺点对比后,我们需要回顾一下是否符合我们的目标,并且衡量新框架可以解决可用性测试出来的体验问题的数量,以及新框架与目标的匹配程度。这些步骤可以帮助我们更好地评估新的框架设计是否可行和有效。

 

B. 探索方案产出:

结合着前期的调研与分析将结论融入到产品方案设计中,1、需要围绕现有产品的基础功能和用户期望的需求进行设计。这意味着需要考虑到产品的现有功能以及用户对产品的期望和需求从而制定相应的设计方案2、需要明确新框架的用户核心关键路径。这意味着需要了解用户在使用产品时的主要任务和操作流程并确定新框架如何引导用户完成这些任务和流程。通过明确用户核心关键路径可以更好地优化框架布局和功能设计。3、需要以高保真原型的质量产出方案高保真原型可以帮助我们更好地模拟产品的实际使用场景和用户体验,从而更好地评估方案的可行性和有效性,为后续做方案验证做准备。

总之,结合前期的调研和分析将结论融入到产品方案设计中是非常重要的步骤,可以帮助我们更好地指导方案设计。我们需要围绕现有产品的基础功能和用户期望的需求进行设计,明确新框架的用户核心关键路径,并以高保真原型的质量产出方案,为后续的方案验证做好准备。这样可以确保我们的设计方案更加贴近用户需求和市场趋势,提高产品质量和优势。

 

C. MVP方案验证:

MVP方案验证是产品改版方案的关键步骤,它旨在确保产品改版方案在实际操作中可行和方案落地有效支撑,并能够满足用户需求和解决产品可用性测试体验问题。

在开始前我们还需要准备一些前期工作:

  1. 需要编写一个标准操作流程(SOP)文档详细描述方案验证的所有步骤和操作指南。这包括测试目的、测试人员招募、测试环境、测试数据、测试步骤、结果记录等。这个文档将作为整个验证过程的指导和操作手册。
  2. 需要准备所有必要的材料和资源,包括测试目的、测试人员招募计划、测试环境搭建、测试数据准备、访谈问卷设计等。
  3. 在方案验证前,需要与业务方讨论并明确改版后产品的用户核心操作路径。这可以帮助我们更好地了解用户需求和产品使用场景,以便在方案验证过程中验证这些核心操作路径是否符合用户期望和业务需求。
  4. 需要将方案制作成可操作的Demo,以便在现场访谈中观察用户操作情况,验证方案的可行性和可落地性。Demo应该尽可能地模拟真实的使用场景和用户体验,以便更好地评估方案的可行性和有效性。
  5. 在准备好Demo后,需要邀请目标用户进行现场访谈,观察他们在实际操作中的表现和反馈。通过观察用户的操作过程和反馈,我们可以验证方案的可行性和可落地性,并明确产品改进的方向。
  6. 在访谈结束后,需要对用户的反馈和操作问题进行整理和分析。针对这些问题,我们需要进行深入的讨论和研究,列出问题优先级并逐个解决。
  7. 最后,根据测试结果和问题讨论的结果,需要明确结论,评估方案的可行性和可落地性。如果方案存在不可行或不可落地的问题,我们需要及时调整方案并进行再次验证;如果方案可行且可落地,我们可以进入下一阶段的产品开发。

在MVP方案验证结束后,根据测试结果和问题讨论的结果,我们可以通过以下三个维度“可用性测试问题解决覆盖率、用户体验提升比、产品体验评分”来度量新旧版本产品体验提升效果,并且和前期洞察产品体验问题结论形成闭环,(强调一下:这里的数据不是凭空捏造而是前期我们给自己挖的坑,在执行阶段时需要我们一点一点填补上前期挖的坑,可以理解为是一环套一环的思路哈!数据验证指标可以在前期共同讨论设定的,不仅限于此!)。

以下是我对MVP方案验证的理解和总结:
MVP方案验证的核心目的是什么?
MVP方案验证的核心目的是验证产品改版方案是否符合用户需求、是否能够解决可用性测试体验问题,以及是否能够在实际操作中可行。通过MVP方案验证,我们可以了解用户对产品的反馈和评价,验证产品方案的可行性和有效性,并及时发现和解决问题,确保产品改版的成功。
MVP方案验证的六个步骤:

  1. 准备MVP方案:在开始MVP方案验证之前,我们需要准备好MVP方案,包括产品改版的具体设计、功能实现操作demo、操作流程等。
  2. 招募测试用户:为了获得真实的用户反馈和评价,我们需要招募一定数量的测试用户,这些用户应该是我们的目标用户或者是相关领域的专家,以便更好地代表用户群体的意见和需求。
  3. 设计测试场景和任务:根据产品改版方案和用户需求,我们需要设计相应的测试场景和任务,以便在测试中模拟真实的使用情况,让用户在模拟的环境中进行操作和体验。
  4. 进行测试并收集用户反馈:在测试环境中,让测试用户按照设计的场景和任务进行操作,并收集他们的反馈和评价。这些反馈和评价可以包括用户对产品的使用感受、操作流程是否顺畅、功能是否满足需求等。
  5. 分析测试结果并解决问题:根据收集到的用户反馈和评价,我们需要对测试结果进行分析,找出产品改版方案中存在的问题和不足之处。针对这些问题,我们需要及时进行修正和完善,确保产品改版方案的可行性和有效性。
  6. 重复验证:在修正和完善产品改版方案后,我们需要再次进行MVP方案验证,以确保问题已经得到解决并且方案符合用户需求。重复验证是MVP方案验证的重要环节,以确保产品改版的成功。

总之,MVP方案验证是产品改版的关键步骤之一,它旨在验证产品改版方案是否符合用户需求、是否能够解决可用性测试体验问题、是否能够在实际操作中可行。通过MVP方案验证,我们可以及时发现和解决问题,确保产品改版的成功。

 

二、设计方案产出

在设计方案产出阶段将通过A.探索设计风格B. 明确设计方向C.视觉风格提案三方面进行方案的设计,并确保方案的设计质量和可落地性。

 

A. 探索设计风格:

在开始设计方案之前,首先需要探索和了解产品的设计风格和定位。这涉及对目标用户的研究、市场趋势的洞察,以及竞争对手的分析等。通过了解用户的需求、喜好和行为模式,以及市场上的成功案例,可以初步确定产品的设计风格和基调。

我们可以通过虚拟小组分头进行风格探索,集思广益,从多个角度和思路出发,寻找和探索适合的设计风格。而将分析结论整合,结合情绪板聚焦改版设计风格方向,则可以将这些探索结果进行整合和提炼,明确设计方向,确保方案的可落地性。
具体来说,这个过程可以包括以下步骤:

  1. 组建虚拟小组:将团队成员分成几个虚拟小组,每个小组负责探索不同的设计风格。
  2. 分头进行风格探索:每个虚拟小组可以通过调研、讨论、尝试等方式,探索不同的设计风格,包括色彩、排版、元素、交互方式等。
  3. 收集和分析数据:每个小组收集和分析相关数据,了解用户对不同设计风格的反应和喜好。
  4. 整合分析结论:将各个小组的分析结论进行整合,了解用户对不同设计风格的偏好和需求。
  5. 结合情绪板聚焦改版设计风格方向:根据整合后的分析结论,结合情绪板确定改版设计风格的方向。
  6. 设计方案产出:根据确定的设计风格方向,进行方案的设计和产出,确保方案的可落地性。

 

B. 明确设计方向:

在了解了设计风格的基础上,需要进一步明确设计方向。这包括确定产品的整体设计思路、核心理念和关键元素等。这个阶段需要我们根据前期收集到的用户反馈和市场信息,结合设计专业知识和经验,提出具体的设计方案和实施计划。

比如我们定义了以下三个体验优化策略:
1、STEP 01 简化功能模块。
将方案中的功能进行梳理和整合,去除不必要或冗余的功能,只保留核心和关键的功能,以降低实现的复杂度和成本,并提高用户的使用体验。

a.功能梳理:对方案中的所有功能进行梳理和分类,了解每个功能的作用和重要性。

b.功能整合:将相似或相关的功能进行整合,去除重复或冗余的功能,只保留必要的功能。

c.功能优先级排序:根据功能的重要性和用户需求,对保留的功能进行优先级排序,确定核心功能和次要功能。

d.设计简化方案:根据功能优先级排序结果,设计简化后的方案,确保只包含核心和关键的功能。

e.评估与验证:对简化后的方案进行评估和验证,确保其满足用户需求和业务目标。

 

2、STEP 02 减少信息干扰。
信息干扰通常是指设计元素、颜色、字体、布局等对用户注意力的分散和干扰,它可能会影响用户对产品信息的理解和使用。

a.精简设计元素:在设计方案中,尽量减少不必要的装饰和设计元素,保持界面的简洁和清晰。

b.突出核心信息:通过调整字体大小、颜色、位置等方式,突出显示核心信息,引导用户关注重点内容。

c.一致性的设计语言:在整个产品中,保持设计元素的统一和一致性,避免因设计风格的差异而造成用户的困惑。

d.合理利用空白:通过适当的空白和留白,营造出简洁、清晰的视觉效果,减少信息干扰。

 

3、STEP 03 缩短操作路径。
操作路径是指用户完成某项任务所需经过的步骤和流程。如果操作路径过长,用户可能会感到繁琐和不便,从而影响产品的使用体验。

a.减少操作步骤:优化产品设计,尽可能减少用户完成某项任务所需的步骤和操作。例如,通过整合多个功能或简化操作流程,减少用户需要点击或输入的次数。

b.整合功能:将相关功能进行整合,减少用户在不同页面或模块之间的跳转。例如,将多个相关功能放在同一个页面或模块中,方便用户一次性完成多个操作。

c.提供快捷方式:为用户提供快捷方式或快速入口,使其能够更快地到达目标页面或完成特定操作。例如,通过添加快捷菜单或按钮,使用户能够快速找到所需的功能或信息。

d.优化导航结构:优化产品导航结构,使用户能够更轻松地浏览和查找所需的内容。例如,通过设计清晰的菜单结构和标签页布局,使用户能够快速找到所需的信息或功能。

 

C. 视觉风格提案:

在明确了设计方向后,需要明确改版风格关键词,结合映射出的关键词制定视觉风格提案。这个阶段需要设计师根据产品的定位和目标用户的需求,制定出符合设计方向的视觉元素和风格。视觉风格提案需要包括颜色、字体、图片、布局等方面的具体建议,以便让用户在第一时间感受到产品的特点和风格。

通过提取产品中的核心关键界面,进行风格的尝试和设计探索并围绕“轻量、沉浸、高效”的原则进行设计。同时,与业务方共创明确设计方案风格方向,可以提高产品的用户体验和可用性,为推动产品改版成功打下坚实的基础。

在这个过程中,我们可以采取以下步骤:

  1. 确定核心关键界面:首先,我们需要确定产品中的核心关键界面,这些界面通常是用户使用频率较高、对产品体验影响较大的页面。
  2. 风格尝试:针对每个核心关键界面,我们可以进行多种风格的尝试,包括色彩、排版、图标、交互方式等。通过对比不同风格的呈现效果,我们可以找到最适合的界面风格。
  3. 设计探索:在确定风格后,我们可以在核心关键界面上进行设计探索,尝试不同的布局、交互方式和视觉效果。在这个过程中,我们需要注重轻量、沉浸和高效的设计原则,确保用户能够快速、轻松地完成任务。
  4. 试错打磨:通过试错的方式,我们可以不断调整和优化设计方案,找到最优的呈现样式。在这个过程中,我们需要不断收集用户反馈和评估效果,以便及时调整设计方案。
  5. 与业务方共创:与业务方共创设计方案风格方向是非常重要的。业务方通常更了解产品的业务需求和用户需求,他们的意见和建议可以帮助我们更好地满足用户需求和提高产品的可用性。

小结:在风格尝试阶段,可以大胆地探索不同的设计风格,不必过于考虑产品业务的约束,这样可以让我们寻找到最佳的设计方案。同时,试错打磨也是一个重要的步骤,通过不断地尝试和调整,我们可以提高设计的质量和效果。最后,及时与业务方进行沟通和同步是非常关键的,以确保我们的设计方向与产品业务需求保持一致。只有这样,我们才能确保方案的可落地性和产品的成功改版。

 

陆、结果

最后,我们需要制定两个标准分别为:设计目标度量标准,产品上线打分标准,可以通过这两个标准对设计方案进行量化和评估确保其符合前期制定的目标并具有完整性和可落地性。同时,我们也可以及时发现和解决潜在的问题和挑战,为产品的成功上线提供有力保障。

 

A. 设计目标度量:

设计目标度量是验证设计方案是否符合前期制定目标的关键步骤。我们可以通过灰度测试版本中进行度量,确保设计方案能够在实际操作中可行并能够满足用户需求。
我们可以根据前期制定的设计目标,制定具体的度量标准,包括功能可用性、用户体验、性能等方面。将灰度测试版本提供给一小部分合作企业,收集他们的反馈和数据,对设计方案进行实际验证。对收集到的数据进行分析和评估,包括用户使用行为、错误率、性能指标等,以了解设计方案在实际操作中的表现。根据数据分析结果,对设计方案进行必要的调整和优化,确保其能够更好地满足用户需求和提高产品性能。

在制定设计目标度量标准时,我们可以考虑以下几个方面:

  1. 功能性:评估设计方案是否满足用户需求和产品目标,是否涵盖了所有关键功能和界面。
  2. 可用性:评估设计方案是否符合用户的使用习惯和需求,是否能够提高产品的易用性和用户体验。
  3. 视觉设计:评估设计方案中的视觉元素是否符合产品风格和品牌形象,是否具有吸引力和美感。
  4. 交互设计:评估设计方案中的交互流程是否流畅、自然,是否能够引导用户完成操作任务。
  5. 性能响应速度:评估设计方案是否能够在不同设备和网络环境下保持快速的响应速度。

B. 产品上线打分标准:

产品上线打分标准是一个用于评估产品上线效果和质量的量化指标体系。根据打分结果评估产品的上线效果和质量。需要注意的是,具体的打分标准和权重可以根据实际情况进行调整和优化。同时,在产品上线后,还需要持续关注产品的运行情况和用户反馈,及时发现和解决潜在的问题和挑战,为产品的持续改进和优化提供有力保障。

以下是制定一个打分标准范围参考示例:

  1. 功能完整性:评估产品是否涵盖了所有关键功能和界面,是否满足用户需求和产品目标。
  2. 用户体验:评估产品的易用性、交互流程、视觉设计等方面是否符合用户的使用习惯和需求。
  3. 视觉语言:一致的设计语言、度量设计方案需遵循了标准化组件规范、色彩、弹框、圆角、间距、阴影等。
  4. 性能稳定性:评估产品在上线后的运行稳定性和响应速度,是否能够保持高效的运行效率。
  5. 创新性:评估产品是否具有创新性和前瞻性,是否能够引领产品的发展趋势并提高产品的竞争力。
  6. 用户反馈:评估用户对产品的反应和满意度,了解产品的优点和不足之处。
  7. 数据表现:评估产品上线后的数据表现,包括流量、转化率、ARPU等指标的变化。

C. 项目成果复盘:

最后,我们需要对整个产品改版过程进行详细的梳理和总结,以复盘的形式量化评估做得好和不足的地方。通过这种方式,我们可以沉淀方法论和经验,为团队赋能,避免在未来的工作中重蹈覆辙。(如何做项目复盘网上有很多方法哦,这里就不过讲了)

 

 

感谢阅读。
希望以上的总结能够为大家提供一些启示和帮助,让我们在未来的工作中更加顺利和高效。



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

B端设计——组件库—数据录入&反馈&导航

前端达人

B端设计的文章和资料参考,缺少系统性的说明,这是我总结第五篇。本文主要阐述——数据录入&反馈&导航

 

本文为B端设计组件库的第五篇、也是组件库系列的最后一篇,下一篇将更新B端设计中常见的问题合集来结束本系列。

一、引言

随着企业对于数字化转型的需求日益强烈,B端产品的发展也在加速。而B端组件库,作为产品设计与开发的基础构建模块,其重要性不言而喻。在众多的组件中,“数据录入”、“反馈”和“导航”是三个关键的组成部分,它们在很大程度上决定了产品的用户体验和工作效率。本文将对这三个组件进行深入的研究,探索其最佳的设计与实施策略。

二、B端组件库中的数据录入类组件应该如何搭建?如何进行多样化设计?

2.1“数据录入”类组件搭建过程

 

2.1.1搭建步骤:

需求分析:首先明确数据录入的需求,包括需要录入的数据类型、数据量、频率等。

设计表单:根据需求设计合适的表单,包括输入项的类型(文本、数字、日期等)、布局、标签等。

添加验证:为了确保数据的准确性,需要为表单添加合适的验证规则,如必填项、格式验证等。

考虑用户体验:为了提高数据录入的效率,可以考虑添加一些方便用户的功能,如自动填充、批量导入等。

测试与迭代:完成设计后,进行用户测试,根据反馈进行必要的调整和优化。

2.1.2注意事项:

明确性:确保每个输入项的目的和要求都是清晰的,避免用户产生困惑或误解。

友好性:尽量简化录入流程,减少不必要的步骤和输入。提供友好的提示信息和反馈,帮助用户顺利完成录入。

响应速度:数据录入过程中,系统的响应速度也是一个重要的考虑因素。确保系统在处理大量数据或复杂操作时仍能保持流畅。

安全性:对于敏感数据的录入,需要确保系统的安全性,如使用加密技术、防止SQL注入等。

2.1.3常用场景:

用户注册:在注册新用户时,需要收集用户的基本信息,如姓名、邮箱、密码等。

商品管理:在电商或库存管理系统中,添加或编辑商品信息时需要进行数据录入。

订单处理:处理订单时,需要录入订单的相关信息,如客户信息、商品信息、支付方式等。

数据导入:对于一些已经存在的数据,提供批量导入的功能可以大大提高数据录入的效率。

报表生成:生成报表时,用户可能需要输入一些参数或筛选条件,这也涉及到数据录入的操作。

2.3如何进行多样化设计?

进一步提升B端组件库中“数据录入”类组件的设计和扩展能力:

1. 增强交互与动效设计 使用明显的交互动效,如微动画、过渡效果等,提升用户输入时的体验。 设计清晰的输入状态,如聚焦、失焦、有效、无效等,使用户明确知道当前输入的状态。

2. 提供多种输入格式和单位支持 允许用户选择不同的输入格式,如日期可以选择“年-月-日”或“月/日/年”等格式。 对于数字输入,提供多种单位支持,如百分比、货币、科学计数等。

3. 设计可扩展的验证规则系统 提供内置的常见验证规则,如必填、长度限制、正则匹配等。 允许用户自定义验证规则,以满足特定的业务需求。

4. 支持复杂数据结构输入 设计支持数组、对象等复杂数据结构的输入组件。 提供可视化编辑工具,方便用户直接编辑复杂数据结构。

5. 优化键盘导航和快捷键支持 允许用户使用键盘快速导航和输入数据,如使用Tab键在字段间切换。 提供常用的快捷键支持,如Ctrl+C/V进行复制粘贴。

6. 设计可配置的界面和布局 提供多种预设的界面风格和布局选项。 允许用户自定义界面元素和布局,以满足不同的视觉需求。

7. 集成智能提示和自动补全功能 使用机器学习算法为用户提供输入建议,减少输入错误。 对于重复输入的数据,提供自动补全功能,提高输入效率。

8. 支持多语言和本地化设置 为不同语言和文化背景的用户提供本地化支持。 允许用户自定义显示的语言和格式设置。

9. 建立组件使用分析和反馈系统 收集并分析用户使用数据录入组件的数据,了解用户的真实需求和习惯。 建立用户反馈系统,及时收集和处理用户对组件的意见和建议。

三、B端组件库中的反馈类组件应该如何搭建?有哪些注意事项?常用的场景有哪些?

在B端组件库中,反馈类组件是非常重要的一部分,它们用于在必要时向用户反馈操作结果,做到合理有效的信息传达。

3.1搭建反馈类组件

确定反馈类型:根据需要,确定要使用的反馈类型,如提示、警告、错误、成功等。

设计反馈样式:针对不同类型的反馈,设计相应的视觉样式,如颜色、图标、动画等。

编写组件代码:根据设计好的样式,编写反馈类组件的代码,包括HTML结构、CSS样式和JavaScript交互逻辑。

测试与优化:对编写好的组件进行测试,确保其在不同浏览器和设备上都能正常工作,并根据测试结果进行优化。

3.2注意事项

反馈一致性:对于同一类型的消息反馈,使用同一类型的组件,以确保用户在不同场景下获得一致的体验。

符合场景:不同的场景使用不同的反馈组件,例如系统主动推送消息类型的使用通知提醒框。

描述精确:合理而精确的消息提示文案描述,可以帮助用户高效理解。

可关闭性:对于一些非关键性的反馈,提供用户手动关闭的选项,避免打扰用户。

适应性:确保反馈类组件在不同屏幕尺寸和分辨率下都能正常显示和工作。

3.3常用场景

告警提示:当某个页面需要向用户提供告警信息时,使用告警提示。通常告警提示在页面上不会自己消失,用户可以手动关闭。

全局提示:在当前页面以轻量级提示方式告知用户操作的结果,使用全局提示。通常提示框在页面顶部居中显示并且会自动消失,不打断用户的其他操作行为。

通知提醒框:一般在系统主动推动通知的情况下使用,如服务到期、服务告警等。

加载提示:常用于数据加载中提示、操作中提示,Loading的文案可按照具体场景定义。

对话框:常用于比较强的二次确认弹框提示、或者展示一段比较长的消息。

四、B端组件库中的导航类组件应该如何搭建?有哪些注意事项?常用的场景有哪些?

在B端组件库中,导航类组件的设计和实现对于用户体验和系统效率至关重要。

4.1搭建导航类组件

确定导航结构:根据系统的信息架构和用户需求,确定导航的结构,如全局导航、局部导航、面包屑导航等。

设计导航样式:针对不同类型的导航,设计相应的视觉样式,如颜色、字体、图标等。

编写组件代码:根据设计好的样式和结构,编写导航类组件的代码,包括HTML结构、CSS样式和JavaScript交互逻辑。

测试与优化:对编写好的组件进行测试,确保其在不同浏览器和设备上都能正常工作,并根据测试结果进行优化。

4.2注意事项

清晰的信息架构:确保导航的结构能够清晰地反映系统的信息架构,使用户能够快速找到所需的信息。

易于理解:导航的标签和名称应使用用户熟悉的术语,避免使用过于专业的术语或缩写。

可扩展性:考虑到系统未来的发展,导航结构应具备一定的可扩展性,以便添加新的功能或模块。

响应式设计:确保导航在不同屏幕尺寸和分辨率下都能正常显示和工作,提供良好的用户体验。

遵循设计规范:参考行业通用的设计规范和最佳实践,确保导航的设计符合用户的期望和习惯。

4.3常用场景

全局导航:适用于整个系统的主导航,通常位于页面的顶部或侧边,提供对主要功能和模块的快速访问。

局部导航:适用于特定页面或功能的子导航,帮助用户在该页面或功能内快速找到所需的信息。

面包屑导航:显示用户当前所在的位置,以及从首页到当前页面的路径,方便用户了解自己的位置和返回上一级页面。

下拉菜单:当导航项较多时,可以使用下拉菜单进行收纳,节省页面空间并提高用户体验。

标签页导航:适用于需要同时展示多个内容或功能的场景,用户可以在不同的标签页之间切换以查看或操作不同的内容。

举例说明:公司内部不同系统,可采用的不同种类菜单导航,均可以设计先行。后续使用可进行调整

 

五、如何对“数据录入”、“反馈”、“导航”进行C化设计?

对于数据录入,关键在于简化用户的输入过程,同时提供清晰直观的界面。

例如,可以通过减少不必要的表单字段来简化录入流程,使用智能填充来加速输入过程,并通过即时验证和友好的错误提示来减少用户的输入错误。此外,考虑到移动设备用户的增长,优化表单的移动端设计,确保在小屏幕上也能轻松输入,是至关重要的。这可能意味着增加触摸友好的元素,如更大的点击区域和适应屏幕大小的布局。

在反馈方面,提供即时、直观且情感化的反馈对于增强用户体验至关重要。这包括在用户完成任务或遇到错误时提供明确的视觉和文字提示。

例如,操作成功时可以显示绿色的勾号图标和正面的消息,而错误则可以用红色的叹号和说明性的错误消息来提示。增加动态反馈,如加载动画,也可以提高用户体验,减少等待时的焦虑感。此外,提供易于访问的帮助和支持选项,例如在线聊天或用户论坛,可以帮助用户在遇到问题时快速找到解决方案。

对于导航,设计的重点是确保用户能够直观地理解如何在应用或网站中移动。

这涉及到创建清晰、一致的导航结构,突出显示主要功能,并使用易于理解的图标和标签。在移动设备上,这可能意味着采用汉堡菜单或底部导航条来节省空间。同时,考虑到个性化的重要性,可以提供自定义选项,让用户根据自己的偏好调整导航界面。 综上所述,C化设计强调的是提高易用性和用户体验,使得B端产品在保持专业性和功能性的同时,更贴近最终消费者的使用习惯。

六、结束

后续还有一篇“问题汇总”,之后会整理一些最近两年的B端项目发布,感谢大家支持!!

 

其余篇章,可点击主页观看!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



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

日历

链接

个人资料

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

存档