首页

谈谈设计创意获取的思路

前端达人 设计思维

谈谈设计创意获取的思路
 
 
读了一本书,杰夫戴维森的《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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

谈谈设计创意获取的思路

前端达人 设计思维

谈谈设计创意获取的思路
 
 
读了一本书,杰夫戴维森的《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好好先生对设计创意的阻碍
讨论沟通,也促进了不同声音的展现。团队需要不同的声音,团队需要谦和而坚定的人来告诉我们事情的本来面目,要听到赤裸裸的现实。
 
感谢大家阅读。


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

B端设计思考总结

博博


本文主要从业务分析、交互体验和设计规范三个层面进行总结。



一、业务分析层面

与C端不同,B端产品主要围绕业务为核心展开,面向专业的人员,有固定的业务属性,我们只有将业务理解透彻,熟悉业务的运作流程,才能在B端设计过程中,输出良好清晰的设计架构,更好的解决业务问题。因此,设计师的业务分析能力在B端设计中至关重要。进行业务分析可以从以下几点着手:

1.深入透彻的理解业务场景

我们可以从多方面收集业务相关的信息,包括梳理需求文档,与业务人员沟通等,来了解行业背景、业务目标、组织架构,理清一些专业名词等。业务场景理解的越深入透彻,我们才能建立起一个系统性的逻辑思维,对我们接下来的设计脉络的梳理以及整体设计的把控是越有利的。

2.梳理业务流程

我们可以通过绘制业务流程图,将零散的业务信息通过具象的流程图清晰地呈现出来,有助于我们宏观系统的了解整个功能流程,同时也能够确保业务的标准流程都能够走通,不会出现逻辑问题及功能场景的缺失。

3.理清角色权限

B端用户因其岗位角色的不同,使其具有清晰的角色权限。比如普通成员、管理员、超级管理员,分别对应不同的权限,不同的权限背景下,其功能和业务路径也是不同的。理清角色权限,聚焦当前角色本身的任务流程,避免被无关的信息干扰,可以使我们的业务功能更加清晰,避免冗杂无用功能在不同角色间的穿插,有助于分解信息结构呈现的复杂性。

二、交互体验层面

我们知道,B端设计的核心目标为降本增效,在交互体验层面可以理解为降低认知成本,提高使用效率。而B端设计的一个显著特点就是功能、场景复杂,要达到降本增效,需要我们在交互体验层面上注意以下几点:

1.视觉降噪与引导

B端注重对页面的高效操作,因此在设计的过程中要保持简洁克制,排除过多的干扰元素,聚焦主要功能,弱化或隐藏非必要功能,保证页面信息呈现轻量化,降低用户认知负荷。

同时,通过视觉设计,比如颜色、字号、字重、合理排版等,使页面信息呈现有层次、有重点,能够合理有效的进行优先级的引导,页面信息呈现更加清晰有序,降低页面的复杂性。

2.设计一致性

设计过程中,遵守设计规范,在视觉与交互上保持一致性至关重要。

一方面保持视觉上的一致性,包括字体、颜色、间距、结构等,能够使页面信息呈现严谨有序,保证易读性;另一方面,保持整个系统交互操作的一致性,则可以大大降低用户的学习成本,同时还能够提升开发效率。

3.符合用户心智模型

B端功能交互逻辑复杂,在设计过程中,尽量保持已成标准的用户操作习惯,尊重用户已有的认知,保证内容的可理解性,可以增加用户的熟悉度,降低学习成本。

4.信息层级划分

B端的信息结构复杂,如果将信息完全平铺呈现,不仅占用页面空间,还会大大加重用户的认知负担。这就需要我们站在用户的角度,基于用户的行为路径,进行信息层级的划分。

第一,对页面信息进行梳理,明确主要信息和次要信息,必要信息和非必要信息,将次要信息和非必要信息进行隐藏、收起、删除等,可以有效聚焦核心内容,避免分散用户注意力;

第二,对需要展示的主要、必要信息进行分类归纳、信息分组,通过合理的页面排版布局,使信息结构清晰有序的呈现;

第三,注意层级步骤的拆分,让用户逐级获得信息,路径清晰,避免过多信息杂乱无序的呈现,增加用户认知负荷。

5.预测用户行为

首先,我们通过预测用户行为,在关键交互节点增加功能曝光,给予用户操作建议和提示,可以帮助用户高效流畅的完成任务目标;其次,对用户行为进行预测,主动帮助用户完成一部分操作,比如信息默认值填充等,可以提升用户体验,减轻用户的操作负担。

6.保留旧版返回入口

B端产品结构功能复杂,有使用学习的过程,如果对B端产品进行大的改版升级,会让已经熟悉旧版本且已经产生使用习惯的用户产生一些不适应感。保留旧版本返回入口,让用户慢慢习惯过渡到新版本,可以减小用户学习的压力,避免因习惯问题影响产品的正常使用,无论是对用户的接受度还是对我们改版的顺利落地都是一种不错的方式。

三、设计规范层面

B端系统庞大且复杂,建立起统一的设计组件和设计规范至关重要。

组件规范的建立:

第一,能够保证交互及视觉设计的一致性,提升设计效率和降低用户学习成本;

第二,能够提升团队的协作效率,提高设计还原度,降低对接成本;

第三,组件化设计,可复用性强,能够提升开发效率,在后期的迭代开发中,也可以进行统一的更新和应用,能够减少开发工作量,便于维护。

设计规范比较具体,且不同的项目在规范细节方面也会有所不同,下面主要整理了一些比较常涉及且可以通用的规范和组件。

1.布局

B端系统用户的主流分辨率为1920、1440和1366,我们在选择分辨率时,首先确定目标用户使用场景是否对分辨率有特殊要求,如果没有特殊的场景分辨率要求,基于上下好适配性,通常会选择1440的尺寸进行设计。

由于B端业务场景复杂,信息量比较大,通常选用24栅格系统。

考虑结构布局,根据不同的结构布局,给出动态缩放适配方案。常用的布局为:左右布局和上下布局。

左右布局:通常是将左边的导航栏固定,对右边的工作区域进行动态缩放。

上下布局:通常是对两边留白区域进行最小值的定义,当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。



2.色彩

B端用色讲究简洁克制,使用户能够高效聚焦功能内容,Ant Design上面对色彩应用的描述为“色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率,影响信息的清晰传达的这些原则之上,理性的选择颜色是关键。”基于色彩使用的目的,B端用色主要分为主色、功能色和中性色。

主色:通常是品牌色,或者根据用户群体、产品定位以及使用场景来定义,主要用在主要按钮、选中状态、高亮信息、空状态等。

功能色:代表了明确的信息以及状态,如成功、错误、提醒、链接等。功能色的使用需要遵守用户对色彩的基本认知。

中性色:主要用于文字、分割线、边框、背景等。

3.文字

字体:中文常用字有:Ping Fang SC、微软雅黑、思源黑体;英文常用字体有:San Francisco UI(SF字体)、Helvetica Neue、Arial。

字号:最小字号不小于12px,常规字号大小一般为14px。辅助文字12px,正文(常规)14px,小标题16px,标题18px、主标题20px,字号的选择可根据具体情况进行定义。

字重:字重通常选用regular、medium、semibold,分别对应代码中的400、500、600。

行高:行高设置一般为字号的1.5倍左右,我们也可以采用,字号+8px做行高。

4.按钮

(1)按照基础样式分为:主按钮、次按钮、虚线按钮、文本按钮、链接按钮



(2)定义按钮的交互状态:Normal(默认状态)、Disable(禁用状态)、Hover(悬停状态)、Press(点击状态)、Loading(加载状态)



(3)对按钮进行规范的制定:包括尺寸、圆角、文字、颜色、背景等


5.表单

表单通常由输入框、选择器、单选框、多选框等组成,具有收集、校验、提交数据的功能。

(1)表单的状态:设计时,要明确规范表单的三种状态

默认状态:即用户输入信息之前的状态;

焦点状态:即用户正在输入信息时的状态;

反馈状态:即用户填写信息后的校验状态。


(2)输入顺序:表单设计时信息的输入顺序按照先易后难,先必填后选填,先公开信息后隐私信息进行,可以减轻用户填写表单的心理压力。

(3)对齐方式:对齐方式分为三种:顶部对齐、右对齐和左对齐。

对齐方式的选择,需要根据浏览效率、屏幕空间以及标签长度来实际判断,做出选择。

首先,需要明确,浏览效率上,顶对齐>右对齐>左对齐。

然后结合屏幕空间和标签长度做判断:

顶对齐:效率最高,标签长度可以更灵活一些,但垂直空间占用多;

右对齐:效率次之,文本字数不可控但又不是很多时可使用右对齐;

左对齐:浏览时间最长,效率最慢,标签字数可控或者需要用户谨慎确认信息时,可使用左对齐。

需要注意的一点是,顶对齐的标签布局之间要有合适的垂直间距,才能浏览舒适,效率更高,通常使用输入框 50%至 75%的高度作为相邻输入框的垂直间距。


(4)校验反馈:校验反馈要具有准确性和及时性。

准确性:主要体现在,要给予用户准确清晰的错误原因和解决方案,以及准确的错误位置。

及时性:表单填写时,出现错误是难免的,为了避免用户盲目填写信息或者出现大面积报错,可以进行实时的校验反馈,比如用户输入完成鼠标失焦后进行信息校验,但反馈的前提条件是不打扰到用户。

需要注意的一点是,成功或者错误等的反馈,不能仅用颜色来区分,需要加入明确的图标和文字来提示,以达到视觉无障碍设计。

(5)标签与占位符:标签和占位符都要尽量简洁,避免文字过多,给用户造成视觉负担,信息描述应该准确、直观且完整。

(6)表单分步:当表单内容多而复杂时,会让用户感到烦躁和不知所措,表单分步不仅有利于减轻用户的填写负担,缓解焦虑情绪,还能够明确了解表单填写的步骤流程。

(7)数据与默认值填充:在用户进行信息录入时,可以通过后台数据库进行匹配,自动填写已知信息,也可以设置合理的默认值,满足多数人需要的默认选择,帮助用户节省时间,快速完成表单填写。

(8)输入框宽度与高度设定:输入框的大小通常对用户输入信息的多少有着暗示作用,输入框尺寸越大,用户会认为是可以输入很多字的。因此,并不是所有输入框宽度一致,就是好的设计,需要根据实际情况,设定输入框宽度,但是也不能设定太多宽度,宽度太多会使表单视觉效果凌乱,宽度设定要合理适当。

输入框的宽度是固定的,但是高度可以根据内容进行自适应调整,来保证信息的显示完整性,给用户以良好的体验。



(9)选项便捷性:表单填写要始终遵循能不填写就不填写,能选择就不要输入的原则。当选项多于5个时,适合使用下拉框的形式进行展示。当选项内容过多,超过下拉框的高度,用户筛选比较困难时,可以考虑是否输入更快,采用输入的方式。

6.表格

B端表格的设计本着清晰易读的原则进行,设计上需要我们注意以下四点:

(1)表格宽度:表格宽度的处理需要考虑自适应问题,主要有三种方式:

a.设定表格的最小宽度,最大宽度不做限制,可以无限延伸,当表格达到最小宽度时,做极限处理;

b.根据需要设定多个等级的最小单元格宽度,当单元格达到最小宽度时,做极限处理;

c.也可以按照表格宽度的百分比,设置单元格宽度,或者固定部分无放大需求的单元格宽度,对剩余单元格按照百分比进行缩放;

(2)极限处理:极限处理主要针对最小宽度,当表格达到最小宽度时,信息展示不全的情况下,常见的处理方式有:文本信息缩略显示、文本信息换行显示、横向滚动显示。


(3)单元格高度:单元格的高度直接影响表格的高度,信息呈现量,以及阅读体验。单元格高度一般在38px~58px之间,高度太大或者太小都不利于阅读,个人实践建议高度为字体行高的2.5倍。

(4)对齐方式:为了提升浏览效率和数据的对比效率,通常采用文字左对齐,长数字右对齐的方式,空数据使用“-”填充。


总之,做好B端产品的设计,需要我们多思考、多总结,规范与标准不是一成不变的,设计过程中要与业务、产品、前端多沟通,才能够做出体验更好的产品。





作者:陈小花儿          来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

B端工作台设计思路解析

博博

一、需求分析

在设计一个产品的时候,我们要透过现象看本质。

我们是为谁?解决什么问题?分析的结果将直接影响到方案的好坏。 这里推荐大家采用5W1H分析法,5W1H分析法也叫六何分析法,是一种思考方法,也可以说是一种场景创造分析法。



5W1H分析法包含如下几个方面:

Why:为什么要做,是原因。

What:做什么、做成什么,是目标。

Where:在哪儿做,是地点。 

When:什么时候做,是时间。 

Who:谁来做,是执行对象。 

How:怎么做,是方法。

通过上述分析我们可以(假设)知道:我们的用户是技术人员、基层管理人员;做这个页面的目的是为了让用户随时掌握各项工作的进展情况,快速进入需要处理的工作事项。 根据结论可以得出工作台是一个导航页面或者综合管理页面,它是用户感知产品价值的重要“门面”,使用者有一定的经验,属于高级用户。从设计角度来看,首页工作台是整个系统规范与视觉风格的核心场景。

使用角色:

主要是技术人员、基层管理人员

内容主次(根据需求得出):

P0:各类数据指标的汇总、我的动态

p1:总量趋势、数据排名、操作汇总

p2:分发汇总、待办事项 

设计要求:

重点突出、简洁、清晰

二、信息架构

优先级处理

下面这张图是产品给的原型,也是B端面试题中经常会遇到的题目。如果你打算就按照产品给的原型直接做美化,那估计很难被选中。



做需求分析的目的之一就是为了做信息处理,这里要提到一个词叫“屏效”。B端产品我们都知道,目的是“降本增效”,在合理的信息布局下尽量利用交互等手段让页面缩短。 

比如:上面原型中有两个top10排名,如果一行展示会比较拥挤,也体现不了top10排名。考虑“易读性”我们会放两行,但这样又占据了屏幕空间,在与产品沟通后我们把它整合到一起,利用按钮组切换进行查看。同时排名也是业务人员需要关注的,所以我们把它们往上放。

顶部个人信息内容比较少,也没必要占一整行,我们把它移到右边;各类指标因前3个是不能点击的,为了和后面可点击按钮做区分,我们整合到一个卡片上;待办事项与产品沟通后说不太重要,移动到了最下面,操作汇总模块往上移;



到这里模块之间的信息优先级基本处理完成,下面就要对单个模块进行拆解处理。 

首先我们要观察哪个是:重要信息、次要信息、辅助信息,上面我们提到了“效率”,把重要信息突出显示,就是为了让用户一眼就能看清,不需要去寻找或被次要信息干扰。 

最后一个模块原型上只有一个标题,这真是验证了一句话:“巧妇难为无米之炊”,所以又去找产品沟通,为什么单个模型可以点击查看更多?用户在这个地方想要获取什么样的数据?

经过一番沟通,拿到了一些“米”,巧妇终于可以干活了。为了体现“易发现性”,我们在后面这个模块上加了一个详情按钮。



栅格化处理

其实上面的图是我处理过的,产品的原型可不长这个样子,模块大小、间距都是随便给的。你如果也按照产品给的原型模块大小做,估计研发会“骂娘”,因为这样没法按照比例进行换算,也就没法做自适应。



这一步主要就是做栅格化处理,我们需要定义每个模块的占比与间距。B端产品通常选用24栅格布局,也就是24栏+23水槽+2页边距。

我遇到的工作台页面有两种,一种是带左侧树,一种是不带,这两种对应的栅格化数值不太一样。 按照目前常用的尺寸1440*900来计算:不带左侧树我采用的是1440=2*20+43*24+16*23。



如果大家做的是带左侧树,可以参考下图数据



三、可视化图表

重点来了,我个人觉得这一节才是工作台、数据分析页面的核心,但很多人都忽略了,觉得不就是几个图表,唰唰唰一下就搞定了...... 

上面我们提到过B端测试题给的都是原始数据(表格),需要设计师自己根据数据找合适的可视化图形进行展示。

如果你对可视化图表不熟悉,不知道什么时候该用柱图、折线图、饼图;不知道随时间变化该用什么图形;不知道体现排名的数据该用什么图形。那你很难输出一份有理有据的作品。

因图表类型太多,详细的留到后面文章讨论,这次只对原型中使用的到图表进行分析:

柱图:

柱状图是常用的数据可视化图形之一,可用于随时间变化而产生变量的数据统计,也可用于数据类别的对比、排名。

如图,柱状图能展示知乎文章观看者地域分布,也能反应出不同时间段的情况,并通过图形能够快速了解 分布最多和最少的省份。



优点:

人眼对长短(高度)比较敏感,可以直观体现数据差异性。

缺陷:

分类过多时数据的展示效果会降低。 

设计要点:

能把图形视觉与体验都兼顾好,才能体现设计师的价值。 设计师的能力不仅体现在技法上,更多的是体现在思考能力上。图形扩展性设计和创新性设计都需要设计师做缜密的思考,只有这样才会有出彩的设计结果。

信息层级:



视觉展示:

2个人站在一起我们除了对比高度、颜值,还有会对比胖廋。那么,柱状体的粗细和间距如何定义呢? 在图中,中间柱状图的柱子间距过于疏散没有规律;右边图中的柱子间距又过小,视觉上显得拥挤,并且当分类过多时,过小的间距会导致柱状体之间没有独立性,不易阅读。



定义柱状体的间距可以用5分原则设计法,即柱子之间的间距为N,左右两边与柱子之间的距离就是2/N。 如图所示。这也是很多界面设计中常用的技法,其原理就是接近黄金比例,视觉上较为舒适。同时,在保证界面元素整体协调性的情况下,尽可能把柱子的宽度设计成N,这样视觉上最为协调。



另外,在设计图形前,设计师最好能了解到真实数据,这样才能结合真实的数据来设计图形,尽可能还原落地后的样子。在图中,图形的设计和落地后的样子存在较大的差异。问题就出在设计前设计师没有了解数据的真实情况,前端工程师按照设计图把X轴的数值固定了。



相似图表: 

堆积柱状图:堆积柱状图可以展示两个或多个数据的变化,以及数据之间的综合比较情况。 

分组柱状图:分组柱状图可以在同一数轴上展示各个分类下的不同分组数据。 

有序柱状图:与有序条形图一样,有序柱状图也能呈现数据的排名情况。



折线图:

折线图常用于表示一个连续时间段内数据的变化趋势,主要功能是能够清晰地反映出数据随时间变化的趋势。

如图,折线图不仅能展示不同月份的价格趋势,还能清晰呈现数据的峰值和低谷。折线图也可以是多条线,用来分析多组数据随时间变化的趋势及数据间的趋势比较。



优点: 

直观反映数据变化趋势 

缺陷:

无序的类别无法展示数据特点。

设计要点:

折线图可以用于展示数据的趋势变化,通过折线的起伏波动可以帮助人们探究数据背后的逻辑。但如果折线图的设计不够合理,在视觉上会让人产生错误的认知。在图中,有的折线图的刻度值设置不合理,如中间折线图的刻度值未从0开始,导致折线的呈现夸大;右边折线图的刻度值过高,趋势变化呈现过于平缓,这些都是在不客观地表达数据。正确的方式应该是刻度值从0开始,随着数据的增减,刻度值也做相应的变化。

视觉展示:



在折线图设计中,还需要注意折线的粗细要适中。在图中,其中一条折线过细,这会降低数据可视化的表现;另一条过粗,就会损失折线中的数据波动细节。在产品的图形设计中,一般网格线和起始线都是1像素,折线一般用2像素,这样的粗细会有较好的视觉表现。



相似图表:

阶梯线图:线在数据点之间形成一系列步骤。



面积图:与折线图唯一不同的是,其自变量数据和坐标轴之间有颜色填充,这样能更加突出数据的趋势变化。



饼图:

提到数据的占比,相信你第一个就会想到饼图,主要用来展示数据分布情况。 饼图是展示占比数据最直观的图形,通过弧度大小来表示分类的占比多少。但饼图有一定的局限性,当占比数值接近或占比分类过多时,在视觉上就不容易辨别各个类别占比的大小。在数据可视化产品中,因为饼图是大面积的色块,视觉上会非常突显,很容易抢走重要数据的风头,所以使用时要酌情考虑。



优点: 

直观显示各项占总体的占比,分布情况,强调整体与个体间的比较。

缺陷: 

分类过多,则扇形越小,无法展现图表。

设计要点:

每个图形都有自己的设计规范,如当饼图分类过多时,一般不把文字放在图形元素上,因为一旦出现几个相对较小的占比数据,字就很容易溢出,不容易辨别指向的分类,如图中的右图所示。好的解决方案就是,在图形的外围用引线指出分类数据,或者加示例图展示。

视觉展示:



另外,饼图的分类最好从12点钟的位置开始,这样较为符合人的阅读习惯,即从上到下、从左到右,如图中。如果饼图随意从不同位置开始展示,就会缺少规范,这样当多个饼图同时展示时容易出现混乱。

同时,在饼图的分类中如果没带排序,如1月、2月……,那么占比最好能够从大到小依次排列,这样还能直观地呈现出分类的排名情况。任何时候,如果有“其他”这项分类,无论其占比多少都要放在最后,因为其数据通常是最不被关注的数据。



相似图表: 

嵌套圈饼图:用于一个指标在不同维度的占比。 

跑道图:看到占比的同时,可以直观看到指标在当前维度下的排名情况。

表格

表格看起来简单,但想设计好也不是一件容易事。通常我们见到的(产品中)表格都属于比较简单的表格。

在BI系统中有一些复杂的表报,如果直接用组件信息会很难阅读。我们需要对表格的视觉进行调整,让信息获取更高效,这就需要一些设计技巧和原则。



设计要点:

表格排版第一大原则:文字左对齐,数字右对齐表格中文字需要左对齐,因为我们阅读文字的习惯是从左到右。

而图中(上图)的项目名称长短不一,居中对齐在视觉上会使切入点呈现“Z”字形,影响阅读效率。左对齐可以使线性结构在视觉上不跳跃,阅读流畅且更具美感。表格中的数字需要右对齐,因为当我们在面对一个长数字时,一般会从右往左读。比如数字¥368,568,023.00,我们一般是从个位到最后的千万位顺序识别数字体量,有的人可以通过千分符迅速判断数字的体量,但其实也是从右到左的浏览顺序,因此数字右对齐最符合人的阅读方式。

在图中(下图),让我们感受一下数字左对齐、居中对齐、右对齐的阅读效率,以及对各个数据体量的对比感知。



文字左对齐和数字右对齐,针对的是长短不一的名称和大体量的数字,而对于文字数量一样、体量较小的数字也可以尝试用居中对齐的方式,对称的元素本身就具有美感。如图所示,通过对表格中的文字和数字的重新排版,相信在阅读效率上会有较大的提高。虽然提高了阅读效率,但这相比优秀的表格设计还差得很远,其中最明显的是表格的边框在视觉上过于突出,接下来我们继续调整。



弱化边框

如图(下图)所示,通过弱化边框在视觉上能够突出表格的内容。表格边框可以让信息的呈现更有条理,能够提高易读性,但在视觉层级上不能高于内容信息。



去掉边框与分割线

将表格的边框与分割线去掉,用留白分隔内容,无框胜有框,增大留白可以使表格更有空间感。这样的设计需要注意的是,元素的间隔不能太小,不然会显得拥挤。由于去掉边框后有些问题会被放大,比如标题与内容没有对比,因此需要增强对比,在整体上要有层次。



强调标题

图中的表格加强了标题,这样看起来更有层次。强调标题的方法有很多种,不一定只是加粗字体或加大字号,还可以给标题栏添加背景,以形成对比。



突出重要信息

如果在一组数据中有重要数据和次要数据之分,那么就需要在对重要数据的设计上着重突出,表格的设计同样如此。图中所示就是把重要的数据信息通过增加背景色与其他元素形成较为突出的对比,这种设计是一种为用户做选择的设计方法,容易让用户的视觉停留在他本想重点关注的地方。



表格扩展设计

由于人们常常会对熟悉的事物产生审美疲劳,因此设计中有创新才容易给人眼前一亮的感觉。

下图在背景上面给了一根横线,来凸显这一列的数据,这样除了可以加强信息传达也可以打破常规的表格样式(这里只是提供一种思路)。




表格字体运用

表格数字最容易出问题的是数字字体的运用,因为很多数字字体不是等距设计,比如数字“1”所占的字间距面积要小于“8”的。如果遇到一组大量级的数字,就有可能会误导观者。

如下图所示,本来32,118,116,00大于28,558,363,00,但由于不同数字所占宽度不一样,这样的设计在视觉上容易误导用户。因此,表格中的数字要使用表格字体,因为表格字体每个数字所占面积一致,这样就不会出现案例中的问题了。




其实很多表格里面的数字字体都存在类似问题。下图是修改数字字体后的设计,这样就能客观地呈现数据了。

表格中常用的字体有Roboto、DIN、微软雅黑、思源黑体、宋体、苹方字体等。



四、视觉设计

配色:

参考631配色法 

对有含义的颜色要谨慎使用,例如:红、黄、绿



图标:

常用的图标分为两类:
工具图标:包含一定产品功能隐喻的简化抽象图形,代替文字节省界面空间,方便用户理解,常用于b端产品里面。
如图,里面来自不同产品的图标,虽然表现形式不太一样,风格不太一样,但都是为了体现图标后面文字的意思。



装饰图标:主要目的是用来装饰界面的视觉元素,样式大于功能,常用于产品宣传、活动等页面。 如图,云计算、大数据相关的产品,语义都比较复杂,很难通过图标去表达,既然看不懂,就抽象点。



在 B 端产品中,应用最广泛的还是工具图标。 可能有人觉得工具类图标太简单了,它是看起来简单,想做好一点都不容易。

首先要保证“一致性”, 粗细一致、圆角一致、透视一致、大小一致,同时还要把语义用图形表达出来。

间距:

一般采用8的倍数:8、16、24、32、40、48、...



字体:

12px、14px、16px、20px、24px,可采用“回退机制”






作者:夜莺YEAH



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

如何输出清晰有效的设计方案

纯纯

本文从What和How两个部分阐述如何输出清晰有效的设计方案,为大家建立系统的设计思路提供帮助。



很多初入职场的设计师在审美和平面图形基础上都比较扎实,对软件的操作也出神入化,单个方案的界面视觉表现完成度和细致度也没有太大问题。但却往往在实际输出项目方案的时候碰到瓶颈,方案反复地修改还不尽人意,设计能力无法得到质的提升,晋升的脚步也从而停滞。


本文从What/How两个部分循序渐进地阐述如何输出清晰有效的设计方案,希望给大家一些建立系统性设计思路的启发,帮助大家更好地输出设计方案,为决策设计方案提供更有力的参考。





 WHAT: 什么是清晰有效的设计方案


首先我们需要对清晰有效有一个整体的认知。所谓清晰,从字面上理解是指看得很清楚、明朗,设计层面来说就是方案能做到方向明确,方案明了。而有效字面上指的是有效果,有效力,从设计层面来说就是输出的方案可以解决存在的问题,能达到设定的目标以及可以切实落地。


清晰和有效的考量维度是不一样的:清晰更多是针对设计这一环节,在于不同方向/方案的差异度和侧重点;而有效则更多需要联合设计上下游(用户/产品/开发)。对于优秀的设计方案来说两者相辅相成,缺一不可。


接下来我们来详细拆解什么是清晰和有效。




1.清晰 - 方向明确,方案明了

——————————


很多设计师对方案输出的数量有个认知误区,认为设计方案越多越好,可以给老板、合作方更多选择,往往不假思索地用大量的时间输出所有可能的方案,并拿出来让别人评审,认为把所有的可能性列出来就不会错,这正是对方案清晰性缺乏认知的表现。


在设计最初期,不要着急动手输出界面,先结合目标(近期目标和远期目标)综合考量,系统性地思考有哪些途径达到目标,确保所有实现手段的方式都有考虑到,并且可以整合途径一致、方向近似的方案。对差异性不大的方案进行合并划归,才能在合理范围内整理出具有不同思考维度与目标侧重的提案方向。前期规划思考的深度决定了方案的广度,只有清晰的思考方案才会创造无限的可能。



 用案例来让大家对清晰这个定义有更具象的认知:


相册小程序Logo这个需求的目标是需要突出相册元素,并强化品牌识别度。


这是设计师输出的Logo提案初稿,虽然输出了28个方案之多,但没有设计思路的规划,想到哪就画到哪,很多方案是重复的,还有一些方案在设计初期就应该Pass,设计的整个细致度也不够充分。



于是设计师对设计方向重新进行规划整合,按照输出形式重新规划了分类。



按照分类筛选出四个可以继续优化的方案。并且拿着四个不同方向的方案去汇报。最终确定D方案。



我们重新回顾一下这个需求,28个方案 VS 4个方案,设计师需要的不是尽可能输出多方案的能力,方案越多可能表示你在错误的道路上越走越远,需要的是通过前期系统的思考能一次把方案做对的能力。



2. 有效 - 解决存在的问题、能达到设定的目标、可以落地的方案

——————————


很多设计师拿到产品需求会立即动手,认为满足了产品这个角色提的需求便是好的设计输出,或者把方案出的天花乱坠,当产品或者其他角色提出不同意见就会觉得他们不懂什么是好的设计。这些现象大多是因为设计师在项目前期没有正确思考和评估这个需求本身需要解决什么问题、方案能否达到团队共同设定的目标,以及方案是否能平稳落地这三个维度。




解决存在的问题—从问题出发


我们在实际输出方案的时候,不能从产品经理的需求文档开始,而是要把考量维度更前置,从项目现有的问题出发。这个问题的搜集包括外部用户的反馈,内部团队的声音,但需要注意的是用户的反馈不一定是真正的问题,需要做到筛选和甄别。比如新发布一个版本可能会碰到的一个情况是很多用户打一星反馈说界面太难看太丑,这种属于用户感受,我们可以再深挖一下用户觉得丑的原因,是不是改变了太多用户习惯,但又没有给用户真的带来更好的体验和更多的收益。



能达到设定的目标—从目标启动


问题还需要结合目标一起考虑,解决问题的思路并不完全等同于目标,目标是大家一起制定的未来产品的发展方向。比如我们新发布的版本里面新加了一个Tab改变了用户习惯,大批用户投诉,但如果这个新Tab是符合我们目标的,我们不能为了短期解决用户投诉把这个Tab下掉,应该继续观察用户在这个使用过程中碰到了什么问题,解决实际操作中碰到的问题。


用案例来让大家对问题和目标有更具象的认知:


我们需要优化QQ空间的为空界面,首先我们梳理下现网存在的问题,风格整体比较老旧,很多图形表意不明确,新出模块就会有新风格,所以存在很多不统一的地方,空间整个业务有一百多个为空界面,导致开发也不清楚到底应该怎么用,用什么,所以很长一段时间是处于乱用的状态。




接着我们梳理了这次优化的目标:


1 界面统一,用户能对表意感知明确(解决现网问题)

2 强化QQ的品牌

3 做成基础组件,保证复用性

4 低成本开发


确定了优化目标以后我们没有马上急于尝试风格,而是先遍历了所有为空异常页,整合了所有场景最后梳理出八种情况,这八种情况可以覆盖所有的为空场景,梳理整合场景是目标1、3、4能实现的前提。



然后我们基于这八个场景来输出设计风格,要低成本开发,所以这里没有考虑加动画,用企鹅剪影结合具体的场景来表意,不仅强化了品牌,也能做到表意清晰明确。图形定好以后我们马上也输出了规范,Push给对接的开发同学方便调用。



在输出方案过程中,始终都要紧紧贴合问题和目标,避免无效设计。



能落地的方案—技术可以实现


在输出设计方案的时候,设计师需要考虑到开发成本是什么,需要消耗多少资源去实现这个需求,最低成本达到目标的路径是什么。如果有些方案开发成本很大却收益价值却很小,我们就需要斟酌它是否仍有执行的必要。避免一味的追求设计效果不去对齐成本、人力,最后也只会是设计的自嗨。


用案例来让大家对清晰这个定义有更具象的认知:


产品提了好友生日推送礼物的需求,目标是想用生日这一比较温情的场景去设计专门的祝福页,用来提升写操作和大盘活跃。我们需要设计送给用户的礼物卡片,从实现手段的难易规划了三个方向:


A 手势交互但开发难度大: 3D手势交互动画

B 趣味动图且开发成本适中:局部小动画

C 静态但开发成本低:全静态视觉,复用已有开发流程



最后团队对齐了人力成本,决定采用方案C,把设计精力放在本身卡片的表现上。



HOW: 如何输出清晰有效的设计方案


那如何才能输出清晰有效的设计方案呢?设计方案归根结底是思维方式的具体体现,输出清晰有效的设计方案最核心的点在于体系化的思考方式,我总结了一下几点:




1 拓宽边界

——————————

拓宽边界需要设计师站在更高的视角和有更广的视野,把设计从表现和执行抽离往前后延展,在整个设计过程中往前去挖掘需求和规划产品结构,往后做到把控和沉淀,能站在上下游各维度去Review整个项目,只有站在更全局的视角审视,才能跳出片面设计的维度。




2 转换视角

——————————

从不同的视角看待问题,学会拆解问题和解决问题,从产品/开发不同的角度来全盘看整个产品,分析这个需求的投入产出比是不是足够,是不是能达到目标(包括设计目标和产品目标)。设计、产品、开发从来都不是对立的,都是不同角色为了整个产品发力。


举个例子,产品同学觉得输出的方案不好看,是在用感性表达,我们可以尝试继续拆解不好看背后的原因,比如是不是核心内容不够突出、担心按钮转化率等,一开始就抱着产品不懂设计这种想法是没有办法解决问题的。


还有一个就是用户同理心,很多时候我们不能只站在设计师和产品的角度看待用户反馈的问题,比如新功能内部团队觉得很厉害,但实际门槛太高,用户根本不知道怎么操作,而我们长期体验这个产品反而忽略了产品的易用性。



3 结构思维

——————————

我们在启动项目的时候,不要单点去看要在某个页面要做什么改动,而是从问题入手,和产品同学对齐好目标,结合设计理念,最后找到发力点在哪里,循序渐进,这样很大程度上能避免项目的反复,对设计流程的准确把控也是输出优秀设计方案的基础。


举一个日常生活的例子帮助大家理解,比如我的问题是长得丑,我的目标是要变得更年轻漂亮,我的理念就是改善体型和优化五官,最后找到具体的发力点比如晚上不吃晚饭,去美容院打美容针、学会怎么化妆等。




4 认知创新

——————————

有些新设计师对设计创新的认知还停留在是去做一些创造世界、改变世界的事情,认为创新就是把原项目进行翻天覆地的改变,初入职场会觉得负责的业务和项目都很小,没有什么意思,其实创新的维度有很多,包括设计工作流程的优化、还有从小的问题点着手去深挖和思考,找到合适的解决方案并打磨细节给用户创造惊喜。摆正心态才能做对事做好事。



5 及时复盘

——————————

完成项目以后需要不断的总结方法,遇到的问题,除了技法层面的提升,更重要的还包括思考层面的提升。学会去总结之前踩过的坑,避免重复性的问题,比如你的输出一直存在层级不清晰的问题,那么你需要关注后续输出的界面里大模块之间以及元素之间的层次是否还存在这个问题。可以犯错误,但是尽量避免总是犯同样的错误,这样才能加速成长的脚步。




写在最后




进入互联网公司工作之前,我们对设计的理解更多停留在表现层面,所以对好设计的判断标准更多是好不好看、喜不喜欢。当进入互联网公司后,随着工作经验的积累,我们会发现设计不只是狭义地使用软件绘制图形,背后需要很强的逻辑和系统思考的能力、结构化的思维、沟通能力等,需要我们不断的学习补齐自己的短板,及时转换职场心态。

文章来源:站酷   作者:腾讯ISUX

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



产品设计:边缘情况类型和解决方法

雪涛

编辑导语:在产品中,有某些情况是客观存在但却极少出现的,这就是产品中的边缘情况,而边缘情况的发生会影响用户的使用体验,因此产品设计时需要考虑到如何应对边缘情况的发生。本篇文章里,作者就边缘情况的类型、应对策略等方面做了总结,一起来看一下。


一、讲在前面

作为一名职场中合格的交互设计师或产品经理来说,避免在工作中出现遗漏各种边缘情况的考虑,与规避在方案评审的时候会遭到评审会中其他同学的各种diss的尴尬,是评判交互方案和交互设计师活好不好的重要评判指标。

所以,产品设计方案好赖看产品和交互的能力,产品和交互能力的好赖不得不看边缘情况怎么处理了。

交互设计其实是“向好避坏”并行的设计过程,向好设计是要追求绝对的好,结合实际情况竟可能保证产品体验的舒适和惊喜,这是产品设计一定要为用户的极致体验需要负责的;避坏设计是相对的坏,结合实际情况尽可能为一些低频场景的极端情况做好容错方案和机制,这就是产品设计中常常提到的边缘情况处理设计。

二、什么是边缘情况

从产品角度来讲,边缘情况是在用户使用APP的时候,极少会出现但是又客观存在的、会极大影响产品使用体验的一些不可控场景,这是区别于需求功能设计的一种隐性问题

边缘情况的出现往往是和硬件设备、系统、技术和使用环境有强关联的,和产品需求或交互设计本身关联较小,但是也有一些极少的场景,之后我们会给大家举简单的例子作为解释。

iOS 14 中遇到的边缘情况

对于所有的边缘情况来说,其实,不管哪一种因素导致的不可控的情况发生,作为交互设计师或产品经理来说,我们都可以用严谨的逻辑来将意外的边缘情况预先做出优化处理。

但是通常在产品设计的时候,边缘情况是很难被我们通过设计方法所避免的,同时,边缘情况也会随着网络技术、硬件设备、系统及技术的变化而变化的,而且有时候业内也会将“解决边缘情况问题”的能力作为一个产品经理或交互设计师是否有经验是否资深的一个评判标准。

所以,在日常的工作中,能主动应对或者在输出需求和交互方案时,可以先入为主地考虑和走查自己是否考虑到边缘情况的处理机制就显得格外重要了,这就是区别你和普通产品经理或交互设计师的一个直观评判标准了。

三、边缘情况分类

  1. 环境主导类:比如最常见的了网络状况,弱网加载、断网加载,云端内存已满、系统问题、磁干扰等等。
  2. 硬件主导类:硬件内存上线、硬件CPU超高超低温度影响、多按键冲突等。
  3. 软件主导类:多设备多账号同时登陆、图片缩放上限未限制、新功能在新老版本中的兼容问题等。

四、边缘情况处理

关于边缘情况的解决方案大致可分为3类。

1. 错误提示

该解决方案是相对研发成本最低的一种处理方法,但是,对于用户来说,体验感是最差的。这类解决方案往往以dialog或toast给予用户错误提示,如下图抖音断网提示:

抖音 v15.4.1

2. 引导解决

这是遇到边缘情况最常用的一种解决方案,也是一种比较“中庸”的方法,可同时坚顾研发成本和用户体验的平衡,也是对于一些环境主导的边缘情况的最佳解决方案,因为环境主导型的边缘情况有时候只能用户自己解决,APP是没有办法真正避免的。

该类解决方案往往会给出用户具体的解决步骤,如下图微信断网提示:

微信 v8.0.4

3. 预备planB

该解决方案应该是对用户体验最友好的解决方法了,这就是一种难受自己、满足用户的“自虐行为”,它可以在最大限度不干扰用户的前提下,默默处理掉一些突发的边缘情况而用户却毫不知情,但是这种解决方案就会加大开发成本和损耗研发人员的大量脑细胞了。

这种预先做好planB的处理方法通常用户是对已经出现的边缘情况无感知的,比如微信(v8、v7)的朋友圈评论处理机制,在断网或弱网情况下,用户评论或点赞朋友圈是没有任何断网弱网提示的,这是因为微信将用户操作数据保存到本地,等有网的情况下再次请求数据知道评论或点赞成功为止,这样就很好地避免了打断了用户评论和点赞行为。

五、常见的边缘情况lists

1. 环境主导型

  • 网络状况不好时,如,弱网、无网情况时的加载等待和请求失败的提示。
  • 根据网络类型选择不同的数据加载方案:如浏览视频时,对于手机网络的判定为无线网或数据流量时的区别对待,无线网络连接时,视频图片都内容提前预加载,视频自动播放;使用数据流量时不预加载视频音乐等耗流量的内容,也不自动播放。
  • 从云端拉取数据时,如,iOS中,用户选图发送feed时,如选择了被存储在iCloud里的情况时,图片和视频需要先下载到本地,这里需要给与用户下载提示反馈,和等待措施。
  • 安卓输入法键盘是系统的,光标和输入法不能联动同步。

2. 硬件主导型

  • APP内存情况:APP中打开照片和视频预览页与APP外存即手机内存:删除该预览照片和视频时的显示逻辑。
  • 相册选图达到最大限数后,其他图片置灰时,有些安卓机子性能不好会出现卡顿,和一屏显示几乘几的图片以及用户最多可选多少张图也有关系。
  • 多端联动:账号被另一设备登出,可多设备同时登录还是仅限一台设备登录,还是半闭状态,部分功能可多设备使用,部分功能仅限一台设备使用。

3. 软件主导型

  • APP拍摄图片使用上传为头像背景图时是否存储在本地相册,何时何种行为后储存等。
  • 图片缩放和异形图(超高超长图处理)可放大至多少像素或原图的多少倍。
  • 加载动画出现的时间限制,加载时长超过1s后在显示加载动画,一般为中心加载长设限,类似Instagram的替补状态栏加载的横条加载动画影响不大。
  • 新功能在老版本中的兼容问题。
  • 手势滑动距离的设定,类ins相册上滑交互的考量。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:人人都是产品经理   作者:一只船

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



一个ICON设计过程的价值挖掘

雪涛

每一个设计需求的背后都必然有其商业逻辑在里面,所以在拿到设计需求后,尝试多去问几个为什么。有什么样的商业目标?为什么做这个功能?用户是谁...当你琢磨清楚这些之后,并以此为出发点的设计方案,必然是有据可依、有说服力的,多角度的参与产品设计也更能体现设计师的价值、培养全局观。


商业目标是个大方向,有了目标就会产生解决方案(需求),当然方案可能不只是一种类型(可能是APP、网站、宣传H5或宣传海报等),设计师负责的去做的可能只是其中的一种。


以我参与过的冬奥会某冰雪 APP TAB 栏的 ICON 风格设计为例:


01

业务沟通,商业目标分析,明确设计目标


这个阶段一定要多去沟通、沟通、再沟通,如果是产品公司,那么需要去和产品、研发、市场等多部门沟通;如果是外包项目,那么就需要和客户多次沟通。退而求其次,也要和负责该项目的直属领导多去沟通,以求更精准的了解商业目标,最终明确设计目标,从而为接下来的设计创意设计指明方向。



该项目为二次设计外包项目,着手出图之前,我和该项目负责人、项目小组成员多次深入的讨论了甲方为了什么目的去做?从而确认了商业目标:“传播冰雪文化,激发人们对冬季运动的兴趣和热情”。


这是个大方向,接下来去考虑用什么形式承载,可能是常见的APP、网站、小程序...(这个形式还需要考虑下目标用户的使用习惯)。以及更具体的有哪些内容分类、个性化主题设计、互动形式等。


最终,该项目负责人决定采取安全策略(作为项目负责人,对投入产出比等全局性因素的考量是极其重要的),先做一款内容型APP,内容分类借鉴、提炼几款APP的精华,暂不考虑独创功能。


虽然有时候结果未必和自己期待的一致,但积极去参与的过程是应该的。。



知晓了商业目标和产品内容,接下来就有方向了。我将设计目标定为:将设计与“水凝化冰、冰积成雪”的物理现象相结合,体现冰雪主旨,烘托冬季竞技氛围。



02

创意分析,设计推演


这个阶段重点在于说服力,或许关系到客户是否买单。由于是内容型产品,内容结构上和其它APP并无太大区别,那么客户会不会想:你们是不是抄了一个软件,改了改就发给我了。。基于此,我在设计创意推演前,做了内容分类由来的分析。


人类接受信息的三种方式:视觉、听觉、触觉,对用户传达冰雪文化采用这三种手段,规划APP内容,视觉:图文资讯、视觉画面;听觉:音视频、直播;触觉:榜单、互动等。



借用“水凝化冰,冰积成雪”物理现象,结合基因创意法,对 ICON 进行设计推演,紧扣冰雪主旨。



通过品牌LOGO取色法,提炼 ICON 配色。



03

设计执行


到了这个阶段,基本的设计思路应该是比较清晰了,剩下的细节打磨就可以自由发挥了。



至此,一个ICON的设计已完成。该过程的最大价值在于:帮助项目理清了整个项目的核心价值、创意思路与设计提案思路,甚至可以由此推测到未来产品的功能规划方向,当然最重要的是协助项目负责人成功拿下了项目。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:空白思维

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


设计师如何在设计中讲好故事?

雪涛

讲故事也是一种设计能力。

更多设计文章,设计交流,欢迎加入粉丝群 | 微信ddm7851

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。

讲故事也是一种设计能力

undefined


作为设计师,经常需要和产品,技术,老板去沟通设计方案,每次都是向外发出声音表现你的的机会,很可惜,大多数设计师在表达时,对方还无法理解你的意思,更难理解你的设计概念和设计思路,很多设计师也因此害怕去说,其实设计师学会讲故事非常重要,也是专业能力的一种。今天这篇文章,希望可以帮助到你。


undefined


能把设计说成故事是一门艺术,作为设计师,我们必须借助讲故事的方式,将产品功能推导到用户价值层面,在大公司里面,设计师讲故事是一个越来越重要的技能,一个好的故事能够统一大家的建议,获得领导的认可,是将产品价值和功能流程和用户的情感联系在一起的关键!


看看别人怎么讲故事


韩国的设计,韩国很多潮流的娱乐视频都是围绕一个故事开始的,故事灵感也来源于大多数人生活,容易让观众引起共鸣。


undefined

 


这个MV是来自Zion.T的Eat,讲述了一个人在失落沮丧的时候,要照顾好自己,整个故事围绕着我们生活中各种失落,孤单的情节,再配合美妙的旋律,让观众感同深受。
undefined
K.will的Day也是运用电影短片讲述一个故事,讲述了一个单相思男生的故事,虽然故事很浅,但是每个故事的每一步都是来源于我们每个人生活当中的。


undefined


在Airbnb宣传页面,运用故事讲述了一家3口,为了女儿的生日,一同飞往洛杉矶,他们去了迪士尼乐园,在洛杉矶预订了房源,受到了房东的欢迎!这样宣传比广告更加真实打动人。
故事驱动的设计很容易入手,从情节提要开始,回归用户视角给出用户想要的体验。


undefined


allthatisshe一个英文网站,这个网站最初是在博主休产假期间创办的,它原本是一个很简单的时尚博客,但是博主异想天开的自我表达方案,以家庭小孩为主题的家庭故事,吸引了全世界的关注,在ins上关注度极高。


undefined

 


整个网站每篇文章都在描述博主和小朋友的生活故事,他们一家人相处的很多细节,这中间再推荐一些好用的商品,去旅行带着观众一起看风景等!整个网站的故事一般都是从生活细节出发,比如上班的路上,在品尝美食,听着喜欢的音乐时候,然后结合巧妙的内容,吸引用户。


讲好故事的5个步骤

 


那么,作为设计师,平时在述职,总结时候如何去讲故事呢?怎么去把一个合理的项目,通过叙事的方式,让它能和听众引起共鸣呢?


undefined



今天分享给你,一个讲故事的框架,一共有5步:

1.开始(背景)


2.冲突(问题)


3.情节(解决问题的过程)


4.高潮(设计策略)


5.行动和结果(问题如何解决的,解决过程中发生了什么)

我们来拆解下这个思路。


更多设计文章,设计交流,欢迎加入粉丝群 | 微信ddm7851

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。


1.开始(背景)


这个项目是如何开始的,它的整个商业背景是什么,要解决用户的什么问题!在我们演讲或分享时候,尽量在140字以内描述清楚,整个项目的背景和简介,让听众记住你。


undefined


乔布斯著名的演讲家,他分享有个小技巧,就是可以先抛出问题和困惑!一次iPad2发布会时候,乔布斯一上台就抛出几个问题,大家对于iPad销量很担心,iPad被各种抄袭,苹果怎么办?在一开始就通过问题,吸引听众,然后引人入胜!


undefined



来看一个实际案例,来自Facebook相册一个设计改版,在项目开始,设计师就介绍了整个项目背景,Facebook Photos是让用户更方便的分享他们的故事,分享他们的图片,让用户生活丰富多彩!那么如何帮助用户更加便捷,更快的分享照片,是这个项目的设计重点。


2.冲突(问题)


讲一个好的故事很难,一定要有冲突和问题,就像看一部电影,一定要有反派存在,只有冲突明显,观众才会觉得更有趣。那这个环节就需要我们把这次产品改版,最重要几个问题给提炼出来。


undefined


以Facebook为例,Facebook相册遇见的问题是,通过数据研究发现,人们不愿意在Facebook中分享照片有以下几个原因:


1.大家手机中的照片很多,不是为了分享而拍摄的!


2.选择照片很难,比如自拍,一次拍了十几张,选出一个最好的很费时间


3.大家经常忘记了分享

所以,在这个环节,我们需要从生活场景去思考,用浅显易懂的语言去讲述当前产品遇见的问题!


3.情节(解决问题的过程)


针对这些问题,设计师怎么去解决呢,在这个环节,一定要充分把你整个设计过程的思考,详细描述,比如设计师常用的情绪版,竞品分析,设计的形色字构质的思考都可以在这个环节表达清楚。


undefined


Facebook团队,基于用户研究数据,和数据结果,决定先定出一些设计原则,通过设计原则和主张来解决之前发现的问题和冲突!于是这个过程和产品开发一起讨论出来,设计的原则和目标:


1.帮助人们记住他们可以分享的故事


2.轻松快速的分享


3.设计一种新的布局方式,让大家分享时候自豪,能够吸引人!


undefined


然后展示了他们做的竞品分析,情绪板,以及一些设计探索的方向!比如做了十几个原型图,对于相册的展示设计了很多概念方案,包括各个文件类型的展示方案(照片,文字,视频,地图)等等!


4.高潮(设计决策)


基于以上设计过程,就可以得出对应的设计决策,再进行详细的方案设计展示。


undefined


重新设计了页面框架,用户的相册框架图来帮用户更好的分类相册,同时在布局上对各种文件类型进行分类,优化相册的浏览效率。


undefined


视觉设计时候,去掉不需要的设计元素,突出内容,确保每一步都能是一个最佳的解决方案!


undefined


同时在视觉设计上进行了很多创新探索,将相册故事以胶片的形式呈现在顶部,让用户更愿意去分享。


undefined


在设计时,考虑多端的统一性,针对不同端的展示效果,真正的保证设计的落地性!


Facebook这个设计环节就像我们电影的中间高潮部分,怎么去解决冲突的,如何定决策,并逐步去落地整个设计方案的!我们在工作中也需要在这个环节很好阐述你根据设计策略,在设计上怎么去落地的,设计方案是什么样的,最后上线是如何的。


5.行动和结果


undefined


这个环节需要把你故事中遇见的问题抛出来,以及这些问题你是怎么去沟通解决的。

比如Facebook相册问题,就遇见了新版本排期问题,无法一下子改完,那么设计师针对这个问题,设计了中间迭代的方案,一步一步迭代到最终,以及开发测试问题,担心用户情绪反弹比较大,分批次上线等等。


同时,做这个项目你得到了哪些启发和教训,后续如何去避免等,最后的结果和上线后数据可以帮助我们验证设计的正确与否。这些设计过程中的细节问题和决策,是帮助我们丰富故事很重要的因素。


undefined


掌握好了这个框架,生活中很多事情都可以运用这个框架去讲,比如你要去和别人分享【设计师如何做简历】就可以按照这个框架去讲:


1.开始(故事背景和简介)


很多设计师找工作比较难,作品集发出去无人问津,原因是什么?是找工作人太多,还是大环境不好,那么如何提升作品集呢,怎么才能更快的让你作品集脱颖而出。


2.冲突(问题)


通过查阅了几百份设计作品集,发现一些问题,比如:版式同质化,设计风格单一,文字太多,飞机稿太多,这些是影响作品集质量很大的问题,由于这些问题导致很多面试官看作品集时候看见类似基本都跳过了,所以才导致大家找工作难。


3.情节(解决问题的过程)


通过查看大公司的招聘信息,提取重要关键信息,比如设计趋势,数据研究,系统思考这些关键词出现的比较多,同时查看了全球顶级设计师和韩国设计师作品集,发现好的作品集都是简约的,排版舒服的,那针对这些,你决定从这几个问题去优化作品集:


版式上往苹果简约风格去靠。设计风格上贴近主流,优化作品使得作品手法丰富,同时针对飞机稿太多,优化线上案例,重新按照最新手法来做等。


4.高潮(设计策略)


花了一个月时间,去详细设计你的作品集,同时设计完成后对比之前作品发现明显的提升,同时设计的过程也掌握了一些设计趋势,再投递的时候发现获得面试的机会大于之前。


5.行动和结果


最后获得了一个大厂的offer,但是整个过程中是艰苦的,做作品集中间也遇见很多问题,比如没有人指导,不知道最新的趋势是什么,比较焦虑,针对这些现状当时自己是如何调整的。


运用这个框架简单的一个叙事,你会发现这样的体系化思考能让我们表达时候更上一层楼。


运用XYZ公式讲故事

 

undefined


当我们向别人介绍一个新产品时,无法切中要点,明确表达产品用户和概念,很多人会觉得「他们怎么听不懂,一定是他们理解有问题,不是我的问题」很不幸的是,问题就是在于我们的表达上,分享一个XYZ公式给大家。


undefined


分享给大家一个公式,掌握后,你就能轻松的给别人讲清楚:


X:产品功能


Y:使用产品的目标用户


Z:这个产品赋予用户的感受


这三个问题,与产品,开发的人都有关系,无论任何项目进展,团队都能想起这个产品愿景,从而让我们对产品轮廓更加清晰,同时这个公式的表达能让团队外的人听的懂。


举个例子


undefined


X:微信一款通讯工具,支持单人、多人参与,通过手机网络发送语音、图片、视频和文字;


Y:它的目标用户是使用手机的用户;


Z:这个产品希望链接用户生活方方面面,是一种新的生活方式。


undefined


X:支付宝一款支付工具,它融合了支付,生活服务,保险,理财公益的生活服务平台 ;


Y:它的目标用户是互联网用户;


Z:这个产品希望给人亲近、安全、可靠的感觉。


上述这个XYZ框架,能够很好帮助你表达一个产品功能和定位,希望在你下次晋升或者述职向别人介绍时,能够用上。


最后

 

undefined


回顾下今天所分享的知识点,如何很好的将你项目讲成故事的5个步骤:


1.开始(背景)


2.冲突(问题)


3.情节(解决问题的过程)


4.高潮(设计策略)


5.行动和结果(问题如何解决的,解决过程中发生了什么)


如何向别人准确表达产品功能和愿景,XYZ公式:


X:产品功能


Y:使用产品的目标用户


Z:这个产品赋予用户的感受。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:我们的设计日记

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


最初我觉得这效果也太差了,最后没想到做的还不错!

seo达人


今天给大家讲讲每周任务页页面头图案例,讲讲这里面的思路,让大家吸收一波!本文头图强调颜色的横向丰富与纵向丰富,色相的差异化、颜色占比的问题、层次和饱满度,这样就能大大提升画面质感。

最近在做每周任务页页面,头图又是给我难够呛,我们先看下第一版到第三版的变化:

第一版

图片

 

第二版

图片

 

第三版

图片

中间过程思考了很多,和大家分享一下。

 

1. 颜色的横向丰富与纵向丰富

什么是横向颜色?

其实就是同一饱和度、明度的颜色,色相不同,比如下面这组颜色:

图片

虽然色相挺丰富,但是看多了会比较腻。

所以有时候我们就需要进行颜色的纵向延伸,也就是除了色相的不同,还有饱和度、明度的不同,比如:

图片

 

2. 色相的差异化

之前在总结颜色的时候有说过,色相不要用的太正,会比较常规,因为人们看多了比较正的颜色,所以就会感觉没什么新意。

举个例子,同样是红色:

图片

第一个红色就会比较正,如果没有相当足的功力,很可能做成过年、国庆的感觉,而第个组就会相对容易出效果一点!

当然,颜色本身没有好坏,要看怎么用,只是说不太正的色相对新手来说比较友好一些。

所以大家看下,色相从比较正的橙色变换色相后,瞬间感觉没那么老气了:

图片

 

3. 关于颜色占比的问题

当然,这个案例中,除了色相以外,还有颜色完毕的问题,其实我之前很多作品,重色会占比多一些,比如下面这种:

图片

而这次的每周任务页面希望能有一点轻松愉悦的感觉,别用太浓烈的颜色让用户压力太大。所以对我来说也算是一次小挑战。

所以我将重色占比缩小,只用在最前处的近景和字体暗部(蓝色部分):

图片

其他地方都是比较轻的颜色。

 

4.关于层次和饱满度

上面讲的都是关于配色的,接下来说下层次和饱满度。

因为这次的构图比较简单,就是中心构图,也没有什么大透视,那如何增加层次呢?

我使用三、四层云放在前面,这几本就把算是拉开层次:

图片

但是有个问题,下面是有层次了,但是上面有点感觉空空的,于是又加了一点小元素进行点缀:

图片

这样整体看起来就比较和谐了,这里面有个要说的点,对于小元素的颜色,一定要有前后关系,也就是用颜色的深浅、色相来体现:

图片

这样看起来才不会生硬。

 

总结:

做到这里,越看越不顺眼,总感觉有点油腻,有点土,具体什么原因?怎么修改?因为不想写的太长,所以我们下期再仔细的聊一聊在保持基础框架不变的情况下,如何拆分画面来优化每一处细节,使第二版变成第三版的!

图片

 

原文地址:菜心设计铺
作者:菜心设计铺

转载请注明:学UI网》最初我觉得这效果也太差了,最后没想到做的还不错!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

                                                            微信图片_20210513163802.png

 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

用户错了吗? 防错与容错

雪涛

据说只要可能犯错,就一定会有人犯错,用户犯错的可能性比我们想象中要大得多得多得多
做好防错与容错,可以让用户更顺畅...




据说只要可能犯错,就一定会有人犯错,用户犯错的可能性比我们想象中要大得多得多得多得多。

做好防错与容错,可以让用户更顺畅的达成自己的目标。


恩,用户总是那么不可理喻对吧

都做得那么明显了,还犯错。该提醒的也提醒了...诶~

打住,打住,当用户犯错时,别急着怪他,我们需要先判断清楚。


一、用户真的错了吗?

用户委屈的说:“来来来,我就想下载一个资源,大家都是讲道理的设计师,来评评理,我错在哪里?”

这,这... 每一步的确都好像没问题,那,问题究竟在哪?

作为设计师的你是不是已经敏锐的察觉到了什么?

对,关键点在 ' 67bh ' 这里。都是空格惹的祸!

那好,你准备好方案救用户了吗?......(这里理论上应该停顿30s以上吧)。

当然,现在不会公布答案,方式有好多种。留着你看完文章中间部分再跟大家一起找方案吧。

这一部分的重点不是方案,而是思维。


很多时候,用户并没有错,作为一个有担当的设计师,我们可不能甩锅。

有了这个前提,我们就可以去掉心中的那些烦躁和埋怨...开始愿意伸出援手,去拯救用户了。


二、如何避免用户“犯错”

对,这个疑问就已经包含了解决方案了。

真的感叹中文的博大精深,避 (防错)、免 (容错)。

为了让大家能更好的理解什么是防错和容错,我特意举一个例子哈~

(什么,防错容错你都懂?你怎么知道我讲的跟你想的一样呢,既然这么厉害赶紧做下面这道题。)

对,就是图片里那个拿滑板的家伙,估计是第一次来这片海滩,有鲨鱼都不知道,还使劲忘海里冲...


从避(防错)的角度来看,你有什么方法帮他呢?(先不考虑哪种方法更好也不要考虑成本哈,能达到目的的都行。)

友情提示:防错的目的是让用户在操作之前,尽量减少用户出错的可能性。


看看的你脑袋是不是真的转得飞起...

我这边有几个想法,看看我们有没有缘,想到一块儿去了:

  • 大声告诉他,这位拿滑板的大哥,海里有鲨鱼,别忘海里冲了...

  • 警告这位大哥,嘿兄弟,这里只允许坐轮船和直升机去海岛那边。

  • 在通往海岛的路线全程搭起防鲨网。

恩,目前就想到这些了,还有方案的同学可以在评论区炸沙发哈。


这些方式,我们试着抽象一下:

  • 【提前做好引导和提示】大声告诉他,这位拿滑板的大哥,海里有鲨鱼,别忘海里冲了...

  • 【优先选择减少输入】警告这位大哥,嘿兄弟,这里只允许坐轮船和直升机去海岛那边。

  • 【限制原操作范围】在通往海岛的路线全程搭起防鲨网。

大家应该都发现了,这种方式虽然能达到让用户安全的目的,但是用户会有挫败感,同时也会有被限制的感觉。

我只要说到USB插头,大家应该就开始脑补画面了吧“为什么我插的进去的第一次永远是错的方向,OMG!”

那,容错呢?


还是这位拿着滑板的大哥,想要去海上的小岛,从免(容错)的角度来看,你有什么方法帮他呢?

友情提示:容错的目的是在用户操作之后,自动纠正/化解错误或提供挽回的方法。


我有几个奇怪的方法,来跟大家分享一下:

  • 呃...驯化/杀死鲨鱼。

  • 派一直专业驱鲨救援队跟随这位大哥(滑板大哥:我何德何能,太感动了)。


同样,我们继续抽象一下:

  • 【让原本的错误不影响用户行为和结果】呃...驯化/杀死鲨鱼。

  • 【出现错误可挽回】派一直专业驱鲨救援队跟随这位大哥,出现鲨鱼就杀鱼。


诶,成本好像非常高哈,但是用户感觉良好哦~

因为他甚至都感知不到这片海还有过危险,按自己喜欢的方式行动就行。

我提一提微信消息的撤销功能,大家可能就会舒缓一口气了。

不知道挽回了多少个尴尬的瞬间,是吧~

可是...我只是一个有无缚鸡之力的设计师,我肝不过鲨鱼怎么办?

来来来,前面那个喊救命的大哥又来了,大家赶紧想想办法吧~


三、试用一下以上方法

(第一步和第四步就是单纯点击,就先删掉了)

前面讲的方法也列在右侧了,看看你们是不是可以针对每种方法找到对应方案了呢?

看看是不是可以这样?


方案一:使用方法-提前做好引导和提示


方案二:使用方法-优先选择减少输入


方案三:使用方法-限制操作范围


方案四:使用方法-出现错误可挽回


方案五:使用方法-让错误不影响结果


在这个案例中,大家觉得那个方案更好呢?

好吧,这个问题的确很蠢。当然是 方案二 + 方案五 结合使用了。因为是两个平台的交互,而对于各自平台而言,一个控制好输出,一个控制好输入。对平台自身的容错性有很大的帮助。

通过上面的案例,相信大家都已经熟练掌握好防错和容错的方法了。

什么,还没掌握?那你滚回去,(望着你正在慢慢蜷缩的身体)不.........不是你滚,是你的鼠标往回滚!

那,我们先不管那几个往回滚的同学,开始进行强化学习啦~


四、带着思考学习

找了一些生活中经常用到的产品,让大家感受一下防错容错的魅力。

如果你根本无法从图中发现什么,那我只能说... 你还是需要经常用银杏叶擦擦眼睛了(因为擦了之后你就更容易发现(人性)。

案例先到这里,大家一定以为要结束了吧~不,不,前面这些都不是最重要的。

方法总会越来越多,靠“别人”总结的方法也就能应个急。

来来来,放空~~~~抛弃你的职业相关认知、抛弃你的设计师的身份,你再看我们的设计。

你像孩子一样,好奇又“无知”。

你会发现,为什么会有这么多奇怪的看不见的规则,为什么我这么难完成我的任务。


五、提前预知错误风险(重点)

如果当客户遇到问题,你能用合适的方法去解决,那你已经是个不错的设计师了,但离优秀还很远,因为优秀的设计师必须具有敏锐的嗅觉,要在产品团队的前面,感知并规避风险。

所以,更重要的还是,我们必须学会变身。

好了,这一次真的需要大家独立思考了,并且没有标准答案,大家可以交流交流。


在以下场景中,可能会出现什么“错误”,如何有效处理用户“犯错”?

在生活中,其实会有很多很多“让用户犯错”的产品/场景,多参与其中,去发现问题,去思考解决方案,慢慢的,你就会具备非常好的问题发现能力和解决能力了。

说了这么多,可能有一部分同学会想说:

“用户出错的情况应该很少吧,你花这么长的篇幅”

“你一定低估了用户的智商”

我告诉你,出来玩玩,谁带智商做事啊~

不信你看。


六、那些你可能想象不到的用户错误

百度一下,你会发现用户犯错的可能性大大超出你的预期。

只是,你以为与你“无关”而已。


七、防止用户犯错的设计可能比你想象中更难,更重要

要防止用户犯错,你需要不断的模拟用户的操作行为,去捕获那些可能存在的问题,然后将它一一化解;这个过程很难,因为你要抛开自己以往的经验和认知,去感受用户的视角。


想想,用户体验的改进不就是让产品越来越符合用户认知,从而减少用户“犯错”吗?

只是有些错误,我们只作为围观者,将它推向了用户。

从现在起,将“错误”留给自己。




 蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:得勿

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务






日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档