首页

5个技巧,让你的做图效率翻10倍!

seo达人



相信很多设计师都会觉得每天时间不够用,没有效率,没有收获,那么今天分享5个时间管理的方法,帮助你提升效率的同时,个人也能得到成长。请看今天的分享,enjoy it。

 

如何做好时间管理?

图片

网上流传一张王健林的行程单,可以看得出时间分配相当满,于是我就特别好奇,专门问了一些我们公司的高P,他们每天那么多工作,是如何去平衡生活和工作的,其中有一个很重要的点就是做好时间管理且自律

比如今天晚上8点要和孩子去看一个音乐会,就会在8点之前把所有的工作全部搞定,然后去陪孩子!是呀,厉害的人,能在某一个点把事情全部搞定,本身就是超强的能力,那么作为职场人,我们该怎么合理管理时间呢,今天分享6个小方法给大家。

 

方法一:番茄工作法 

番茄工作法是由弗朗西斯科·西里洛于1992年创立的一种相对于GTD更微观的时间管理方法。因为创始人使用番茄定时器,所以叫番茄工作法。

图片

 

如何使用?

选择一个待完成的任务,将番茄时间设为25分钟,专注工作,中途不允许做任何与该任务无关的事,直到番茄时钟响起,然后在短暂休息一会(5分钟就行),每4个番茄时段多休息一会儿。

这个方法为什么好用呢?我相信很多设计师和我一样,每次工作几分钟后就会玩玩手机,看看微信,一边听歌,刷着网站,同时做着几件事情。

这个就是明显的一心多用,不够聚焦,番茄时钟好处就是督促你在这个25分钟内,专心只做一件事情。充分利用大脑的集中注意力去高效完成一件事,然后休息5分钟,再开始下一个番茄时间。

图片

当然你也可以根据你个人习惯来调整时间,我将番茄时间的25分钟改成了45分钟,这样有助于我更好的聚焦。比如我有一个需求时,我会花45分钟看完交互流程,45分钟去和开发还原开发细节,45分钟去收集设计灵感,45分钟去把页面框架搭建好,或者设计好一个局部等等,然后休息5分钟,让自己短暂休息下。

图片

 

合理拆解需求

学会拆解任务,设计师的需求有大有小,大的比如一个首页改版,一个设计语言的建立,小的有一个弹窗设计,一个图标绘制等等,那么运用番茄时间的第一步就是你需要对工作任务进行合理的拆解,才能用多个番茄时间段来覆盖整个项目,比如需要做一个首页改版,那么我就需要进行拆解任务。

图片

首页改版可以分成四个大的关键节点,需求讨论,设计风格探索,视觉设计,交付开发,然后每个大的模块下再细分小的任务,然后进行番茄时钟的评估,比如色彩收集我可能需要2个45分钟,那么就2个番茄时钟去完成它。

所以我们要学会合理的去拆分你的需求任务!明确到可执行的番茄时钟。

 

及时提醒

图片

每个25分钟或者45分钟的时间点提醒一定要及时,闹钟响了,停下手上工作,短暂的休息调整下,切忌继续一直工作下去,因为只有适当休息,我们才能更加高效,高质量的完成接下来任务。

 

听听白噪音

图片

很多同学在工作时,喜欢戴着耳机听着音乐,但是在使用番茄时钟时,我不太建议这样做,原因在于音乐会干扰我们思考,有时候音乐还会影响你的情绪,所以这个时候建议大家听听舒缓的白噪音,比如海浪声音、风声、雨声,我个人比较喜欢听海浪拍打的声音,能够让自己静下心来。

这里推荐一个番茄时钟的MAC工具,叫番茄钟,里面除了设置番茄钟外,还自带很多白噪音,非常好用!

图片

 

方法二:四象限时间法 

美国的管理学家科维提出的一个时间管理的理论,把工作按照重要和紧急两个不同的程度进行了划分,基本上可以分为四个“象限”:

1.既紧急又重要:

如同事投诉、即将到期的任务、上线危机等

2.重要但不紧急:

建立人际关系、设计培训、制定设计规范等

3.紧急但不重要:

如取快递、部门会议等

4.既不紧急也不重要:

如网购、闲谈、邮件、发朋友圈等

我们需要把每天工作任务,按处理顺序划分:先是既紧急又重要的,接着是重要但不紧急的,再到紧急但不重要的,最后才是既不紧急也不重要的。我们具体来看看设计工作中的一些场景。

图片

 

既紧急又重要

设计师工作场景:比如项目上线前的设计更改,明天和主管汇报的PPT,需求设计评审,这是我们每天工作的核心,大多数设计师在公司中日常任务就是产品的迭代,那么重要的事都是不能一拖再拖,都是迫在眉睫。

因为整个产品是赶时间点的,比如双11那天必须上线,那么无论如何都要按时保质量的完成,所以这时候是考验我们经验、判断力的时刻,如果没有做好,很有可能影响你的考核和晋升。

我自己的方法是每晚睡前给自己列出明天最重要的必须完成的3件事情,并用工具软件记录下来!

图片

 

重要但不紧急

这里主要是和你个人成长发展有关,比如学习英语、提升动效技能、掌握C4D、理财等等,这些很重要,但是很多时候我们每天都在处理重要又紧急的事情,特别是互联网公司,每天都在做需求,对于自己的个人规划,根本没有时间处理,就会导致你个人的提升这些事情完全没有时间做,多把精力放在这个领域去提升自己,必须主动去做,这是对于你个人成长最有帮助的。

比如你未来3年希望去大厂工作,那么你就要列出来大厂设计师的技能有哪些,比如科学设计方法、设计思维、动效、数据能力,然后都放在你重要不紧急事情里。在精力有限的基础上多做投入和提升,慢慢才能达到目标,否则就一直成为流水线设计,或者项目里面一个资源方,个人成长永远没有!

图片

 

紧急但不重要

比如PM找你聊需求,当然正常需求该聊还是聊,但是工作中经常有的聊,真的只是陪聊,很多时候真的在没有必要,没有结果的开会,聊需求真的是浪费时间,表面看似第一象限紧急事情里,因为迫切的呼声会让我们产生“这件事很重要”的错觉——实际上就算重要也是对别人而言。我们花很多时间在这个里面打转,其实不过是在满足别人的期望与标准。

设计师经常遇见的,改文案啊,产品会议,开发排期这种会议在我看来,出来关键节点有结果的需要参加,更多事情能少参与就少参与。

图片

 

既不紧急也不重要

这里的既不紧急也不重要就是每天你花费时间最多的地方,比如群里聊天,刷朋友圈,抖音,看八卦新闻,当然人都是需要一些无聊消遣的,但不值得花很多时间在这个象限。刚开始时也许有滋有味,到后来你就会发现其实是很空虚的。

我经常给大家说,你怎么比别人进步更快,就是设计之外的8小时你在做什么。别人工作时间外8小时都在学设计,学各种课程,而你在做些无聊事情,一年下去差别就出来了,不是说我们不应该去娱乐,而是需要注意时间分配。

总之,关于时间的4象限,需要大家多多的关注,多把精力放在重要又紧急,然后允许情况下,多提升重要不紧急事情的投入,长期坚持下去,你会有巨大的改变。

 

方法三:先思考再动手 

图片

在接到需求时候,多问自己几个为什么,这个页面为什么要改版?改版是为了提升用户留存,还是活跃度?还是提升页面转化?还是优化了什么?了解清楚,梳理清楚逻辑、流程关系以后再动手,这才是一个正确的做事方式,同时也需要思考,你在这中间做了哪些有价值的事!

这个道理很简单,但是很多人都没有做到,我也有很多时候,做着做着掉进一个坑里,所以做之前想清楚,想好了再做会更好!

 

方法四:避免重复造轮子 

图片

 

避免重复,经常总结积累

做一件事情,学会举一反三,学会从点到面,在很多公司面试晋升过程中,比如阿里,P6资深设计师和P7专家设计师,很重要的一个技能点就是,如何从点做到面。

我们在做很多需求时候,需要思考,这次做的这个需求后续如果遇见类似的,能不能快速解决,而不至于浪费时间和精力投入进去没有成长!比如说按钮设计,我们随便抓一个市场上的按钮,你会发现按钮的样式、大小颜色就是各种不统一,浪费开发资源和设计资源!如果你每天的工作都是做这种浪费精力没有存在感的事情,对于个人是很不利的,平时做项目多留心下,比如我做一个专题页面是不是可以去思考下,这个页面做完哪些控件我可以沉淀下来,复用到其他的场景中,赋能给其他设计师呢,这个是很重要的!

同样的,比如我们最近在研究一个弹窗,那么是不是我做这次弹窗,我就把弹窗彻底研究透彻,弹窗尺寸大小、颜色、按钮、状态都研究彻底,彻底掌握了这个知识点,后面再做弹窗信手拈来,深刻搞定一个任务,避免反复,经常总结和积累,也是提升效率很重要的方法。

图片

 

当你觉得很难的时候其实是在上坡

这是我很有感触的一句话,人的成长体现在同样的事情上,万事开头难,但后面会越来越顺手,因为在这个过程中你已经掌握了方法,我们需要做的就是不要半途而废,要学就学透学完整,后面工作效率就上来了。

图片

我们的专业知识就像这4个空杯子,一个代表AE,一个是C4D,一个是UI,一个是插画,很多东西都想掌握,于是每天学习一次就往这个杯子浇水一点,但是坚持10天就坚持不下去了,要么学别的,要么没有动力了,然后导致最后什么都没学到。

图片

正确做法是把一件事情学透了,学彻底了再去学下一件事情,你学AE就彻底把AE掌握了,再去学下一个,这样避免反复,彻底掌握不仅能加速你的成长,更能让你专业更深!

 

方法五:放下手机,定时间点 

最后这个方法对我来说很有效,学会放下手机,放下干扰,中国口香糖的营业额持续下降,大家知道为什么吗?口香糖一般都会摆在收银台的旁边,因为用户在超市收银台排队的时候,都在玩手机,没有人去看前面的货台!可见手机对我们影响有多大,所以当你准备学习时候,或者去完成一个任务时候,最有效就是手机放起来,至少一个番茄时间不要去看,这样保证你的效率变高。

另外一个方法就是定时间点,定结束时间点很重要,人对于时间点都是有天然遵守的,比如地铁错过末班车就回不了家,火车飞机晚点你也回不去,所以我们做事情时候可以立一个最晚完成时间,然后去做,比如我写作,定的时间就是每周末必须写完,所以我周末再忙,都会去抽空写完。

 

最后 

今天分享的这些经验,都是我实践过并有效的方法,希望可以帮助到大家一同实践起来,照着做下去,你会发现能压缩至少1/3的时间出来,让我们都把时间花在正确的事情,和正确的人身上,快乐工作,快乐成长,快乐生活!

 

原文地址:我们的设计日记(公众号)
作者:sky

转载请注明:学UI网》5个技巧,让你的做图效率翻10倍!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

设计沉思录 | B端商城的客户链路设计

seo达人


背景:58会员商城是面向B端商户的信息服务售卖平台,囊括了公司各类业务的会员端口套餐、推广商品、增值服务等商业化产品。长期以来公司的商业交易主要依赖电销团队、线下销售团队来完成,战略层希望将线下销售模式向线上模式转变,建设一个以客户为中心的售卖平台。

 

01.B端商城的认知探索

说起商城,作为普通消费者第一印象就是京东、天猫、淘宝、拼多多等耳熟能详的电商平台。在早期,我们也先入为主地以为商城的参照系是C端电商,以最基本的购物流程和商品信息架构入手。
 
然而在项目推进过程中,发现B端商城与C端电商有着孑然迥异的特征。为了调整原有的设计模式,让整体的商业服务能更贴合客户实际使用诉求,我们也先从研究入手,探索商城真实的客户情况。
 

调研花絮&物料

 

02.B端客户差异

从研究中发现,比起独立个体的C端消费者,B端客户往往目标更明确、决策要素更集中。

 

C端电商的客户

  • 用户:以独立个体为主
  • 流程:导流-列表-详情-订单-支付-物流-收货
  • 商品:以图片介绍为主,多为大众化消费品,认知成本低
  • 目标:灵活,分散,以兴趣、生活需要为导向

 

58会员商城的客户

  • 用户:既有公司团体,也有商户个体、独立个体
  • 流程:渠道转化-注册身份-选择套餐-付费下单-确认合同-认证资质-开通使用
  • 商品:信息服务类商品,认知成本高
  • 目标:聚焦,为业务运转而采购,推广预算明确,追求商业效益最大化

 

具体来说,58会员商城的客户一部分来自企业间的框架合作,例如房产推广客户,大型中介品牌与58同城达成了合作协议(业务侧称之为KA客户),定期从商城购买大批量的经纪人推广套餐会员,购物这件事儿对他们来说反而成了例行任务;另一部分来自电销推广,例如本地服务商家在业务员的推广转化下来到商城购买商户推广套餐;还有一部分是个体商人、经纪人,通过公开渠道自主下单。
 
这些客户从购买的服务内容、购买的机制规则来说都有不同的差异。对于商城设计师而言,更需要关注客户差异所带来的购物效率、成功率等问题。

 

  • 效率问题:KA客户采购模式与购物流程的矛盾
  • 成功率问题:客户心智与商品选择难度的矛盾

 

03.客户链路设计

本着给客户提供更好的商城售卖服务,根据上述关键问题,我们进行了针对性的流程链路梳理,探索更优解的方案设计。
 

· KA客户采购模式与购物流程的矛盾

KA客户的采购模式与C端电商经典购物流程截然不同。

首先,客户需要经历繁复的线下任务:i.跟门店经纪人收集名单;ii.整理经纪人开通时间&套餐类型;iii.与业务员审核名单信息。
 
然后才是进入商城-选择商品-上传名单-付费下单。根据KA客户的管理规模不同,每个月需要多次进行线下收集任务,周期性为旗下经纪人开通推广套餐。而收集环节中的名单信息存储在公司内的另一个业务系统中,C端电商的线性流程不能在这场景上互融互通。因此,我们需要进行新的流程设计,聚焦KA客户的采购场景,提升客户购买效率。

KA客户流程改造示意图

 

在新的流程中,将线下任务转移到线上,大幅缩减了参与人员类型和多个流程环节。用户经由KA客户专属入口,进入采购模式,通过名单管理机制完成添加、管理等操作。根据名单结果匹配对应的套餐组合和优惠策略,引导KA客户进行批量下单。通过系统流程的互通改造,打通原有操作屏障,提升采购流程的流程性与体验。

KA客户改造方案

 

不仅如此,还有更多细分场景,例如经纪人到期续费、新员工入职开通套餐、经纪人自主申报加开套餐等等。这些环节贯穿了KA客户及其员工们的工作生命周期,通过关键服务触点打磨和数据的融合,让客户能够更快捷获取信息通知、套餐管理、推广服务管理,从而形成完整的KA客户服务链路。而全链路设计非一日之功,这也是我们正在持续研究和挖掘的方向。

 

· 客户心智与商品选购难度的矛盾

与KA客户不同,黄页商家客户更接近于普通消费者。用户在业务员的引导下进入商城采购,这期间用户面临的主要挑战是:

1.复杂的业务分类

2.雷同的商品内容

在原先设计中,采用了扁平的C端电商筛选逻辑,筛选信息密度高,使得商家客户容易忽略城市、行业类别对套餐的影响,导致买错套餐、退单重买的情况频频发生。再者是信息服务类商品的大量雷同,需要业务员反复与客户介绍套餐资源差异,影响购物决策效率。因此,对于这类场景,设计师的目标就要聚焦商家客户的购物成功率,通过改造筛选路径提升交易准确性和体验。

 

商品列表问题

 

新方案中,先解决用户第一个挑战:聚焦“行业类别”选择。通过蒙层的方式,让用户聚焦自身的业务类型,再结合业务关键词的搜索匹配,避免海量类目干扰。
 

商品蒙层引导

 

接着让用户去完成下一个挑战:选择会员套餐。
 
信息服务类商品不像大众消费品有物理实体,可以通过照片去判断感知,更多情况只能通过文案描述来传递商品信息。那么,如何让用户感知文案差异也是设计的关键。通过信息清单的对比设计,来呈现不同规格的套餐内容。我们还衍伸套餐PK工具、自助餐模式,来应对信息服务商品的差异化感知问题。
 

商品信息对比设计

 

完成以上购物流程的改造、商品信息感知的设计之后,我们也逐渐发现:不同客户之间虽然有购买场景的差异,但也在商城有着共同接触的服务节点。

 

04.链路的整合与延伸

为了让好的设计服务到更多用户,我们需要从系统的角度去考虑如何让流程路径更具兼容性、让商城服务更具通用性。

 

· 业务分发路径

商城原先是以商品类型的分类逻辑进行组织,不同业务线与不同类型的商品交织混杂在一起。用户不能在业务分类下检索全部商品。在新的客户链路设计下,需要融合业务线客户特征、业务线商品特征等情况,因此需要调整为以业务类型为主的分类逻辑,在首页中强化业务分类,并将原来的商品列表页改成业务线大类页。让不同业务的商家、不同体量的客户各得其所。
 

商城框架改造示意

 

· 公共服务触点

我们收集了客户在购物不同阶段所可能接触的内容:购物前—咨询客服、了解业务介绍&商品规则;购物中—对比商品信息;购物后—引导开通资质。根据这些环节沉淀了公共的客服帮助中心,信息卡片规则,商品信息的流转结构、售后流程节点引导等等,通过细节的打磨和设计,给予用户更清晰、更便捷的指导,以此带来更方便的自助服务体验。
 

公共服务触点梳理

 

05.最后

回想起来,B端商城的核心设计思想依然还是“以用户为中心”。差别大致在于:C端是要去验证用户痛点的真伪,以“点状”思路验证可行性;而B端是要去支撑用户的业务链路,以“面状”的流程通路去满足业务基本的运转需要。在这样的项目中,作为设计师需要进行更多思考,由“点“及“面”,不断探索用户与业务的逻辑交织,像个蜘蛛侠一样跳跃在逻辑的塔楼。

 

原文地址:58UXD(公众号)
作者: 环铁艺术家 

转载请注明:学UI网》设计沉思录 | B端商城的客户链路设计

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

那些小众而独具美感的网站

涛涛

提升眼界,除了与优秀的人为伍

还要多看、多分析、多积累、多沉淀

不断扩展自己的能力边界

人生里最大的运气,不是捡钱,也不是中奖,而是有人可以带你走向更高的平台。其实限制人们发展的,不是智商学历,是你所处的生活圈子、工作圈子。


所谓的贵人:

“就是开拓你的眼界,带你进入新的世界的人。明天是否辉煌,取决于你今天的选择和行动!”


今天特意为大家准备了一波小众而独具美感的网站


我们要知道

很多时候一条有价值的信息

可以改变你的设计人生


自己平时上国外网站比较多,这里分享我最近浏览的优秀网站。

希望可以让你眼前一亮,哈哈。




undefined



1、Banorama


官网:https://banorama.banenor.no/?ref=reeoo


乘火车旅行是安全的,但这是为了安全。学习你应该注意的事情,并用quizen测试你的知识。





2、Polywork


官网:https://www.polywork.com/?ref=reeoo


Polywork是一个专业的多层网络。





3、Discord


官网:https://discord.com/?ref=reeoo


不和是通过语音、视频和文本进行交谈的最简单的方法。与朋友和社区保持密切的沟通、聊天、宿醉和保持密切联系。





4、Theodoz


官网:https://www.theodoz.com/?ref=reeoo


使用我们强大的平台和安全令牌协议创建最透明和可编程的金融应用程序。利用分布式基础设施的强大功能,我们使全球数十亿无银行存款的人能够获得标记化的资产投资和融资。





5、Affinity Designer


官网:https://affinity.serif.com/en-gb/designer/


亲和设计师-最快,最流畅,最精确的专业平面设计软件。





6、Warm Christmas


官网:http://warm-christmas.com/home/


温暖的圣诞节-圣诞老人很热,所以他为你准备了一个惊喜…





7、Despicable Me 3


官网:https://www.uphe.com/movies/despicable-me


官方电影网站为卑鄙的我3,主演史蒂夫凯尔和克里斯汀Wiig。看这里的拖车。2017年6月30日在电影院。





8、Renaud ROHLINGER


官网:https://renaudrohlinger.com/?ref=reeoo


投资组合-创意开发商雷诺·罗林格





9、Belazor Technologies, Inc


官网:http://belazortech.com/?ref=reeoo


Belazor Technologies,Inc–是无线建筑的骄傲。





10、Day of the Dead


官网:https://dayofthedead.holiday/


是一个纪念死者的节日。探索充满活力的传统、美味佳肴以及让这一天焕发生机的一切!





11、Staak


官网:https://www.staak.co.uk/


皇家利明顿水疗中心的独立创意机构、工艺、洞察、心。





12、East.Paris Agency


官网:http://east.paris/


是一家以文化艺术为灵感,以创意为动力的广告公司。


undefined




13、Dotlung


官网:https://dotlung.com/


一家培育和成长为具有强大在线身份和社区的成熟数字龙的网站





14、Spot the Bot


官网:https://spot-the-bot.com/


通过浏览器在虚拟现实中玩机器人!和一个朋友一起找出尽可能多的机器人。





15、ANIMAL


官网:https://animalmade.com/


我们是动物问题的解决者,讲故事的人,艺术家,概念思想者,还有那些喜欢开玩笑的人。









1、Affinity 


官网:https://affinity.pt/en


Affinity是一家专业从事技术和信息系统的咨询公司。它经营三个不同的业务领域:近支撑、外包、软件和产品开发。它在里斯本和波尔图设有办事处,拥有200多名员工,在17个国家开发项目。


Affinity定位于一家全球服务技术公司,拥有技术概况方面的横向技能和综合内部或客户项目管理。


从战略上讲,除了开发各种语言和技术之外,Affinity还将继续投资创建自己的软件。在内部和外部,亲和专注于双赢的关系,将所有的互动时刻定义为“一生的体验”。





2、Dinamica Plataforma


官网:https://dinamicaplataforma.com/estrategia/


Dinamica Plataforma是一家从事围绕关系动态、经济发展、自然资源和领土可持续性展开讨论。


undefined




3、1MD


官网:https://www.1md.be/?ref=reeoo


1MD是一家专注于艺术指导、设计和运动的创意工作室,为敢于脱颖而出的品牌打造身临其境的体验。





4、Alacran Group Productions and Recording


官网:https://alacrangroup.com/?ref=reeoo


我们致力于在世界各地培养人才、创造机会和建立伙伴关系。


AlalaN组包括AlalaN记录、录音工作室、AlalaN图片、现场活动制作和AlcRAN基金会。



undefined




5、Mogney


官网:https://mogney.com/?ref=reeoo


新一代支付方式





6、KIN


官网:https://kin.movie/


是一部带有科幻风格的惊心动魄的犯罪惊悚片,讲述了一个注定伟大的意外英雄的故事。



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

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


文章来源:站酷  作者:Lili丽丽子

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

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




掌握这些Figma进阶技巧,让你的工作效率提升10倍!

seo达人



现在越来越多的公司使用Figma作为主要的软件工具,在使用Figma时不能按照以前的思维去设计,要尽可能发挥出它的最大优势,学会进阶使用。

 

1.使用组件集

图片

如果我们有大量的按钮、输入字段等变体,在进行任何调整时,都可能花费大量的时间。

图片

通过使用组件集,可以对其中包含的基础组件进行调整,然后统一应用到所有的实例中。基础组件本身不需要成为组件集的一部分,可以放在同一页或原型附近。

 

2.将封面图添加到Figma文件中

图片

当管理各种不同的项目和Figma文件时,有时候寻找需要的项目可能会很费力。

创建封面照片是一种简单而优雅的解决方案,使项目一眼就能被识别。

添加封面的步骤:

在文档中创建一个页面并将其命名为“封面”;

为封面图像绘制一个框架(1920×960效果最好);

添加一些设计元素如logo、图标等,让封面便于识别;

右键单击框架并选择“设置为缩略图”。

 

3.使用样式

图片

当使用样式进行设计并决定要测试颜色、描边粗细、字体样式等不同变化时,只要快速更改,设计就能自动更新引用该样式的实例。

 

4.组件集布局

图片

点击组件集的框架,然后按shift+a,使用自动布局,轻松组织和重新排序组件。

 

5.使用自动布局

图片

自动布局使我们能够更密切地设计产品的开发方式,并在设计文件中保持一致性和可扩展性。

图片

通过遵循使用自动布局设计,可以在删除/添加内容、创建响应组件等方面节省大量时间。

 

6.创建流程图

图片

为了清晰传达页面间的流程,可以尝试使用一个技巧——将Figma中的连接器复制并粘贴到Figma文件中,它将保留它的所有功能。

 

7.使用约束

图片

为了保持一个框架的组织性和适应性,使用约束来告诉Figma当我们调整框架大小时页面该如何响应。

约束帮助我们控制设计在不同屏幕尺寸和设备上的页面,避免了每次调整页面时里面的元素也要调整。

如果要忽略框架中对象的约束设置,只需要在调整框架大小时按住command或ctrl。

 

8.为组件创建模板

图片

为个人资料卡创建一个模板是好的选择,随着用户人数增多,资料卡模板能够快速地复用,为我们节省大量时间,使设计更轻松。

图片

模板的工作原理:假设一个博客组件中包括一张图片和一些文本,再创建另一个组件,在其中嵌套10次博客组件。把这个模板放到设计文件中,如果我们需要添加内容或者调整组件之间的空间,我们只需要在主组件上进行调整。

 

9.组织组件

图片

考虑使用按钮、颜色样式、输入等来组织组件,这样更能提高功共享的效率。同时从一个设计文件组织排版的好坏,也能看出来这个设计到底怎么样。

 

10.使用Loom插件

图片

Loom插件是远程工作时必不可少的工具,能够节省会议时间,让设计师把更多时间投入到设计中。

图片

如果设计团队的日程安排混乱、不在一起办公或者在不同的时区,都可以尝试使用Loom插件进行设计评论和共享。

 

原文地址:medium.com

作者:Danny Sapio

译文地址:Clippp设计夹(公众号)

译者:Clippp

转载请注明:学UI网 » 掌握这些Figma进阶技巧,让你的工作效率提升10倍!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


如何让按钮设计的更迷人

seo达人



按钮在UI界面设计中是不可或缺的元素之一,这篇文章我们将介绍不同类型的按钮包括按钮的状态和交互。我们介绍的都是日常界面中使用的普通按钮,并不包括单选按钮、选项卡、复选框等其他类型的按钮。

 

按钮的不同分类如下:

* 动作按钮

* 常用按钮样式

* 按钮的颜色和形状

* 按钮状态和反馈

* 标签按钮

* 触摸屏按钮

* 按钮的位置

* 系统按钮

* 总结

 

动作按钮 

我们将分析按钮的层次结构和它们通信的语言。虽然有些按钮通熟易懂,但按钮操作不取决于它们的外观,而是取决于用户的行为。

 

1_1.行为召唤(CTA / C2A)

在设计中行为召唤按钮通常会提示用户注册/立即购买等。在产品设计中如果强烈建议用户应该做的事情应该使用CTA按钮。

行为召唤按钮

对于CTA按钮,我喜欢使用圆形按钮,这样会更引人注目。

 

1_2.主要操作按钮

虽然CTA按钮和主按钮看起来相同,但我喜欢将它们分开。主按钮应该是一个强大的视觉指示器,可以帮助用户完成他们的旅程。主按钮应该在用户可能想要“下一步”、“完成”、“开始”等的情况下使用。

主要操作按钮

对于主要操作,我喜欢使用实心按钮。

 

1_3.次要操作按钮

从“返回”的辅助按钮到“下一步”的主按钮,或从“编辑”的辅助按钮到“保存”的主按钮。辅助按钮是我们为用户提供的主要操作的备选方案。

主按钮旁边的辅助按钮的两种设计

我更倾向于使用线性按钮或文本链接作为辅助按钮。

 

1_4.三级按钮

三级按钮通常用于其他操作,可能暂时不是用户想要做的事情。比如“添加朋友”、“扫一扫”、“编辑”或“删除”之类的内容,前提是它们不是主要操作。

不同形式的三级按钮

一般来说,人们会使用较小或较不突出的按钮样式。

 

常用按钮样式 

下面我们将介绍常见的按钮样式,不同风格的按钮样式和他们的使用技巧。

 

2_1.实心

实心按钮是带有实心填充的按钮。

一个实心按钮

 

2_2.线性和幽灵按钮

线性按钮和实心按钮正好相反,一个没有填充的按钮 – 只是一个轮廓。虽然经常互换使用,但我更喜欢将线性按钮视为浅色(在白底下按钮的轮廓和文本颜色深一点更明显),将幽灵按钮视为深色(在黑底下按钮的轮廓和文本颜色浅一点更明显)。

线性按钮(左)和幽灵按钮(右)

 

2_3.圆形按钮

圆形按钮其边缘设置为最大圆角半径。

圆形按钮

 

2_4.FAB(悬浮按钮)

悬浮按钮是一种巧妙的设计模式,Google Material Design中更加受欢迎。虽然它们可能看起来像一个图标按钮,但实际上它们用在屏幕上的主要操作按钮。

一个悬浮按钮

如果您想了解有关FAB的更多信息,我建议您在Material Design的网站上查看( https://material.io/design/components/buttons-floating-action-button.html )

 

2_5.文字链接

文本链接是一种非常简单的按钮类型。有几种不同的方式可以表明它是一个链接。它可以是颜色/下划线/链接的文本,甚至就是文本本身(例如“阅读更多”)。

文本链接的不同样式

在颜色方面,大多数网站使用蓝色,因为它是最容易识别的。为什么文本链接的颜色会使用蓝色?它一直追溯到是万维网的发明者,在他选择颜色时发现蓝色很酷的一种颜色,即使是色盲的人通常也能看到它。

 

2_6.带图标的标签按钮

图标按钮越来越受欢迎,一些按钮仍然需要一个标签来确保按钮的语意明了。

带图标的标签按钮

处理图标和标签时最棘手的事情是弄清楚字体组合的图标有多大。

方法1:让图标的大小对齐字体的顶线。

方法2:让图标的大小对齐字体的行高。需要注意的是确保图标和字体的组合视觉均衡。

 

2_7.图标按钮

图标按钮没有标签,只是一个图标。因为它们没有标签,所以它们在界面中节省了大量空间。图标按钮还可以将其他图标按钮一起排列在它们的小空间中。

图标按钮具有不同的风格

如果你在为计算机认知度较低的人群设计产品时,我建议使用带标签的按钮 – 尤其是那些很抽象的语意。

 

2_8.带图标的文本链接

某些文本链接可能带有图标。这些通常不会在正文中使用。

各种带图标的文本链接

 

按钮的颜色和形状 

在设计按钮时,需要考虑以下几个不同的元素。

 

3_1.颜色

在设计产品时,你应该要考虑有视觉障碍的人。为确保每个人都可以访问你的颜色,你可以使用在线对比度检查器。我使用的是那个。( https://accessible-colors.com/ )

不同颜色的按钮

 

另外,在选择颜色时应该考虑色彩心理学。红色按钮多用于删除,黄色按钮多用于警示等。

“删除”、“警告”、“保存”和“更多”按钮

 

3_2.边界半径

边界半径为按钮提供了很多个性化设计。具有更圆半径的按钮看起来更有趣。

不同边界半径设置的按钮

 

3_3.投影

按钮上的投影使按钮更加自然引人注意。阴影也可用于指示不同的状态。 ( https://material.io/design/environment/elevation.html#depicting-elevation )

Material Design通过使按钮在悬停状态下来达到这个效果。

不同阴影设置的按钮

 

3_4.标签样式

标签样式归结为字体以及阅读的容易程度。选择字体时,请确保它清晰可辨。

不同标签样式的按钮

以下是一些简单的方法可以让字体清晰易读:

* 选择大写的标签或大标题。(Material Design使用过带有大写标签的按钮。)

* 确保标签颜色与按钮填充对比较为突出。您可以使用( http://accessible-colors.com/ ) 查看。始终确保您的颜色符合AAA要求。

* 选择字体时,请确保字体清晰。

 

3_5.垂直内间距

按钮的大小对界面的可访问性起着很大的作用。大多数没有经验的设计师会说“按钮的高度应该是36像素”。如果你是为产品系统的设计按钮。你应该采用所用字体的行高,并在其中添加一定单位的内间距。例如:“我的按钮标签的行高为20px,垂直内间距为8px”。

不同垂直内间距的按钮

为什么会这样设定呢?这里有两个原因:

1)有视觉障碍的人可能会增大浏览器中的字体,因此他们需要更改字体大小而不会将按钮高度定死。

2)这也是开发人员创建按钮的方式-他们在DIV容器中添加内间距,而不是固定高度。

 

3_6.水平内间距

有两种方法可以接近水平内间距。

 

第一个方法:

使按钮宽度与网格对齐。这是保持所有按钮长度一致的好方法。但是它限制了你可以使用的字体数量。

宽度由网格决定的按钮

 

第二个方法:

两侧有固定内间距。我通常还会定按钮最小宽度,虽然避免了很窄的按钮,但是最小宽度按钮可容纳的不同字段会让按钮看上去不是很均匀。

宽度由内间距和标签长度决定的按钮

 

按钮状态和反馈 

按钮状态让用户知道他们是否可以点击、已经点击或已成功点击。按钮还可以有重叠的状态。例如可以同时是“点击”和“悬停”状态。

 

4_1.点击和禁用状态

点击状态就是鼠标可以点击按下按钮的状态,当然如果用户没有完成必要的步骤,按钮可以被禁用。例如用户没有输入他们的姓名和电子邮件地址,他们就不能提交他们的详细信息。

点击和禁用按钮

 

4_2.悬停和悬停离开(鼠标悬停和鼠标悬停离开)

在PC端按钮应具有不同的状态,让用户知道它是可点击的。通常“悬停”状态和“悬停离开”状态相反,但也不一定。你应该有效的区分让用户感知鼠标悬停在某个按钮上。

悬停演示按钮

平板电脑和移动设备上永远不会出现悬停状态,因为你的手指无法“悬停”。如果您正在为应用程序进行设计,请不要担心此状态。

 

4_3.焦点

焦点状态可能会让用户困惑。如果你的用户专注度较差,他们可能需要使用选项卡式导航。用户将点击“选项卡”在网站上移动,从一个导航链接移动到下一个。这意味着按钮需要有一个“焦点”状态才能显示它是“可点击的或尚未点击”。

默认的焦点状态是蓝色“发光”,幸运的是,我们生活在一个可以自定义按钮状态的时代。大多数设计师对悬停和焦点状态使用相同的视觉提示。

两个不同“焦点”状态的例子

 

4_4.按下

按下状态是当用户的光标或手指“按住”按钮时的状态。当用户将手指或光标“释放”在按钮上时,该按钮会指示为“已点击”。

“按下”状态的按钮

 

4_5.点击

按钮需要“点击”状态以向用户指示它已被点击。

“点击”状态的按钮

 

按钮标签 

按钮标签的诀窍是一致性。我们在产品设计前期需要制定按钮标签的规范,以避免以后花更多时间去改变你所有的按钮标签。

 

5_1.动词的用法

大多数按钮都包含指示按钮将执行什么操作,例如“保存”、“发布”、“编辑”。虽然“back”和“next”不是动词,但在接口上下文中,它们的工作方式似乎相同。我喜欢在编写按钮标签时使用“动词”+“名词”结构,这会让操作更具规定性,例如“保存文章”等,而不是“保存”。

 

5_2.案例

你还应该决定使用哪种字体大小写。以下是我使用的一些规范:

所有大写字母,例如“NEXT SECTION”,我把它们用于更专业的平台。Material Design使用所有大写字母的按钮。

标题框,例如“Next Section”,我倾向于避免使用标题大小写,因为它不像句子大小写那样容易阅读。就语调而言,我认为它介于“专业”和“会话”之间。

句子大小写,例如“Next section”,我把它们用于更“友好”或“对话”的平台。它更像是一句话,正常我们一句话结束会加一个句号,但是为了设计的美感,请不要加一个句号。

小写,例如“next section”,小写按钮标签使用频率较低。

 

5_3.一致性

为按钮编写标签时,请确保一致性。以下是一些我在项目使用的指导原则:

选择字数:每个按钮一个、两个或多个字

选择大小写:句子大小写,或大写,或标题大小写,或小写

标签结构:如“动词”+“名词”,或“动词”等。

 

触摸屏按钮 

桌面按钮大小调整(单击)

因为桌面上的光标比触摸屏上的手指小,所以您可以将按钮缩小很多。

 

触摸屏按钮尺寸(点击)

麻省理工学院触摸实验室的研究表明,人在使用触摸屏时手指部分是8-10毫米,如果你想避免用户手指触摸错误,最小目标尺寸需要10毫米或更大。如上所述-我需要较大的按钮。

那么,你应该做多大尺寸的按钮呢?专家们说的是:

Material Design建议接触目标应为48dp x 48dp,不同接触点之间距为8dp。

虽然我找不到关于iOS设计系统目标尺寸的任何文档,但一般的理解是,它的最小目标尺寸是44 x 44磅。

如果您在设计大小尺寸方面遇到困难,我强烈推荐Zac Dickerson关于易用性的故事。

 

按钮位置 

如果你非要放置2个按钮,主按钮应放在哪一侧?

主要和次要按钮的两种不同立场

选项A显示左侧为主按钮。它可能是用户首先想要看到的,所以先显示它。

选项B显示右侧为主按钮。我们希望用户首先看到辅助按钮,方便他们继续完成他们的旅程。右侧的按钮也表示继续。

 

系统按钮 

这里会介绍一些很酷的设计原则和系统。我喜欢Material Design System的按钮,因为他们的原理是经过深思熟虑的。

Material Design System的按钮

Material Design 按钮图片

Material Design中介绍了按钮的操作,以及按钮如何与系统中的其他组件交互。我喜欢用户在触摸屏上使用按钮的交互方式。

查看按钮部分:

https://material.io/design/components/buttons.html

 

悬浮按钮在这里查看:

https://material.io/design/components/buttons-floating-action-button.html

 

总结

如果没有按钮,你就不能真正构建界面;我们应该更多的关注它们。了解按钮在界面中是如何设计的?怎样正确的使用按钮并为你的用户提供最佳的体验?

 

原文地址:UX Collective

译文地址:水手哥学会计(公众号)

作者:Tess Gadd

译者: 水手哥

转载请注明:学UI网》如何让按钮设计的更迷人

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

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


文章来源:站酷   作者:陈皮Celia 

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

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



原来设计规范要这样理解,早知道就好了!

seo达人


@彩云Sky:Hi,我是彩云。经常在读者群里看到有人讨论,面试时被问到设计规范相关问题,不知道怎么回答才好。是不是要回答设计规范的具体尺寸,再把各种适配规则全背下来呢?今天彩云就和大家一起探讨下,到底要如何理解并运用设计规范。

 

1.什么是设计规范?

设计规范是一个老生常谈的话题了,网上相关的文章也非常多,但我相信有很多设计师对设计规范的理解还是比较模糊,认为设计规范指的就是字体,颜色,控件规范那些,这种理解其实是比较狭隘的。

于我而言,设计规范用一句话总结就是:设计规范是针对特定产品所制定出来的一整套产品标准,包括流程标准,技术标准,设计规则等等。通过这套标准,能减少错误发生率并提高设计质量和输出稳定性。

举个例子,我在做QQ的3D厘米秀项目的时候,一开始合作方提交的设计资源正确率很低,风格也各不相同。然后为了解决这个问题,我在项目中定义了流程标准,资源标准,cp合作标准等等。通过这些规范让多个不同设计团队能合作到一起,提升了整体协作的效率和质量,这些标准就成了设计规范的一部分。

图片

可以说,每个项目因合作方式,人员习惯,落地形式的不同,所形成的规范是有区别的。所以,设计规范更应该是针对项目来说的,除非是问你Android或iOS这种已经广泛适用的平台级规范。不然是很难有标准答案的,回答更应该是一种思路的描述,比如你会如何定义一套规范、解决了哪些问题以及如何验证这套规范真的助力了产品的体验提升

 

2.设计规范的作用

1)遵守用户习惯,减少认知成本

Don’t make me think。大家都知道,好用得产品都是尽可能的减少用户思考,不断去贴近用户的使用习惯。比如在iOS系统里想返回上一个页面时,你会熟悉的去左上角找返回操作,但如果把返回操作放在右上角就会很不习惯;再比如对国内用户来说,他们习惯正确按钮用绿色,错误按钮用红色,如果你非要反过来制造所谓的差异化,用户就会感到困惑,误操作的概率也可能会大量增加。

图片

 

2)统一品牌性格

品牌性格不论是大到公司层面,还是小到具体某一个产品,都需要有一套品牌识别体系来约束,只有统一的视觉印象才能更好的让用户记住。这些品牌识别体系其实也是设计规范的一部分,在具体执行中,可以根据一些品牌核心概念规范快速做一些风格决策。

比如腾讯QQ的品牌形像风格关键词是青春、互动,叙事和干净,那么在选择画面配色的时候就可以根据关键词指导画面的选择,使得整体的画风得到统一。

图片

 

3)降低新人学习成本

这里所说的新人不单纯指刚入职场的设计新人,也包括刚参与到一个新项目的设计老手,设计规范是能够以最低的沟通成本实现快速上手。有成熟的控件资源和标杆的设计参考,就算是之前完全没做过的设计师也能搭建出一个还不错的页面。

图片

 

4)提高开发效率

有了好的设计规范,开发就能把一些常用的样式进行封装,在需要复用的场景中直接调用。这样做,一方面可以通过调用的方式减少样式代码的复制使用,提升效率的同时降低软件包体积,另一方面也可以减少不必要的工作量,方便后期维护。

图片

 

5)保证设计的一致性

有设计规范的约束,能让团队在一个既定的框架内做设计,统一大家的输出质量,从而保证设计的一致性。

 

3.怎么学习设计规范

设计规范的学习肯定不是靠死记硬背,而是要讲究方法,从我自身的经验来说,我觉得大致可以有以下2个步骤:

 

1)在新手期,多去看一些大厂的设计规范,先建立认知,不要求全部记住。把这些规范当成字典,先大致了解一遍,等真正做的时候拿不准再去查阅就好了。这里推荐几个必看的大厂设计规范官网,建议收藏。

苹果iOS设计官网:https://developer.apple.com/design/human-interface-guidelines

谷歌Material Design设计官网:https://material.io/design

微软Fluent Design System设计官网:https://www.microsoft.com/design/fluent

IBM设计官网:https://www.ibm.com/design/language

Facebook设计官网:https://design.facebook.com

蚂蚁金服设计官网:https://ant.design/index-cn

图片

其实网上很多设计规范,原理之类的文章,源头都来自于这些大厂规范,想获得一手信息,最好是自己去这些网站多看看

这也就是我为什么不写具体规范数值的原因,因为网上的资料实在是太多太详细了,写一些重复的知识实在是没多少价值。学知识的路上一定不要什么都等别人喂给自己,需要更多的主动性,这样才能提升自己的学习能力和解决问题的能力

 

2)根据自己要做的模块,有针对性的找市面上大厂的应用作为参考,直接截图标注,自己总结规律印象会更加深刻

我开始做UI的时候就这样学习的,不知道字体该用多大,间距用多大,颜色怎么用,就直接去找相类似的界面截图参考,量它们的尺寸,吸它们的颜色,然后就这样一步步的把规范经验积累起来了。

比如从QQ的动态tab页面中,我们可以借鉴到很多信息,比如列表的高度,列表左侧的图标尺寸和圆角,间隔线高度和配色,右侧的箭头大小和配色,列表文字的字号和配色,用户头像大小和结合的样式,图标与文字的间距等等。这些借鉴并非是抄袭,要你做的跟这个界面一模一样,只是参考这里面的某几个属性然后结合自己的产品综合运用,减少出错

图片

发现了吗?一个优秀的界面设计,上面的任何信息其实都可以拿来参考,就看你会不会用了。

需要强调的是,这些参考来的标准,并非是标准答案,还是要根据自己的实际项目做调整,只是至少知道一个范围,在这个范围内不大会犯错

这就像刚开始做设计时一样,去参考这些规范相当于做临摹的练习,这种临摹是需要的,临摹的过程中不断加入自己的思考,然后通过总结,变成自己的知识体系

 

4.怎样定义出设计规范

随着对设计规范理解的加深,自身设计能力的不断提高,就要开始从设计规范的使用者转变为规范的制定者了。如何制定针对项目的设计规范呢?我的经验是在项目过程中把做的好的和踩坑后的正确解法进行总结,并形成文字,积累多了就形成了规范要把每一次遇到的问题都当成是一次改进流程和规范的机会。

我自己是有随时记录的习惯,项目中一旦发现问题就会赶紧把它记录下来。有时候甚至还蛮期待出现问题的,因为出了问题才能找到优化的机会,自己也能从中找到解决问题的成就感

曾经在QQ的3D厘米秀项目中遇到过非常多的坑,然后从填坑的过程中慢慢总结出各种设计规范,去帮助项目减少错误率,提升设计质量。从最终的产出和结果来看,自身的进步是可观的,对产品的帮助也比较大,所以很值得去做。

图片

 

5.使用规范会影响设计的创意性吗?

刚掌握设计规范的时候,干活是特别舒服的一件事,因为做需求可以很快,好像拼拼组件就能完成。但稍微做久一点时间,又会觉得好像没啥进步,天天拼组件,担心影响设计的创意性,真是挺矛盾的。

其实,规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化,又要在设计的过程中给用户制造惊喜。比如,整个UI的配色和字体需要保持统一,但在一些图形,动效上可以做出亮点,让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是需要一个动态平衡的过程

 

总结

设计规范绝对不需要死记硬背,而是要充分理解并灵活使用,才能发挥它的价值。随着UI行业的不断成熟,设计工具的简单化,各种组件化资源和思维越来越普及,可以预见的是未来一般的UI界面会高度组件化,设计师单纯在界面上花费的时间可能会越来越少。

这从行业的发展来说,减少了很多体力劳动,让设计和开发有更多的时间去打磨产品细节,肯定是好事。但对设计师自身来说,省下了以前那种常规设计需求的时间后还能做些什么,设计师的价值又在哪?值得每个设计师去思考

 

原文地址:彩云译设计(公众号)

作者:彩云Sky

转载请注明:学UI网》原来设计规范要这样理解,早知道就好了!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


做设计有一道及格线,标准肯定是“它”

seo达人



很多设计师容易犯一个错:设计不明确

设计一旦不明确,就容易让用户产生疑惑,甚至认为出现了bug!

我的原则就是,要么不做变化,要做咱就做的彻底一点,明确一点!

我从以下方面举几个例子:

1.间距

2.大小

3.样式

4.颜色

 

1.间距

当信息内容需要区隔的时候,最常用的两种方式:

一种是加一条细细的分割线;

另一种是加一条粗粗的分割块:

我们有一次在加分割块的时候就出现了一个小失误,把分割块设定为4pt:

这样会存在什么问题?

会让用户怀疑,这是粗一点的线条?还是细一点的色块?

所以为了避免这样情况的发生,线条就细点0.5pt,色块就粗点10pt(反正稍微大一点就行),明确一点:

再比如之前有一个小案例,大概的信息是这样排版的:

不细看也没啥大问题,但是仔细观察就会发现,在间距方面有一定的优化空间。图上有六条信息,实际是三组,如果间距不做彻底,就会让人感觉是独立的六组,但如果把间距做的彻底一点:

这样就可以很明确看出,这是三组信息,而不仅仅只是六条信息。

所以要么就不分组,既然分了,就分的彻底一点!

 

2.大小

界面内信息有很多,这么多信息,有些需要强调,有些可以弱化。

很简答一个例子,有时候大字后面需要跟一个小字,如果你没区分开就是这样的效果:

这样就很不明确,到底是做了大小变化?还是出现了bug?

所以尽量把二者区分开,比如大小对比、颜色区分、粗细变化:

这样就可以很明确!

 

3.样式

前短时间有位读者朋友发我一组图标,图标源自追波,我觉得整体做的还可以,但是有一个样式上的小细节可以优化下。

整体图标样式都是有厚度的,但是邮件这个图标看起来就有些犹豫,想表达厚度,但是又没表达清楚:

图标源自追波

所以可以让厚度的宽度加大,并且把侧面的颜色和正面区分开,这样就可以把厚度更明确的表达出来。

再比如之前做过一个引导页,需要做一个影带,最开始做的是这样的:

不知道的还以为是个手表带,所以必须要仔细观察影带的特征,并将其明确的表达出来,比如两边的孔是方形的,整体材质要软一下等等:

这样表达才明确,用户才不会困惑!

 

4.颜色

下面两组颜色:

左面这组可以很好的突出一个颜色,而右面这组就很难突出某一个颜色。

在界面设计中,有很多场景下,会有多个按钮,我们需要强调其中一个,就需要采用这种彻底的对比方式:

而不是让人模凌两可,分不清主次的方式:

明确一点,用户就不困惑了。

我们再来一个例子!

其实工作上有很多优化需求都是基于“明确”这个点展开的,前一阵子做的一个排行榜奖牌标识的优化,我们看看原来的样式,就是因为颜色对比度不够,产生数字看不清的情况:

在这样的背景下,我们就可以拉大颜色对比度,让数字更清晰、更明确:

这就是基于“明确“这个点,进行的需求优化。

 

总结

今天讲的都是做设计不够明确的小案例,也是很多朋友容易忽略的问题。

ios有一条设计原则就是清晰,清晰的本质就是做的足够彻底,该强调的强调,该弱化的弱化,比如他们超级醒目的大标题:

当我们能把设计做的足够明确、足够有节奏感的时候,就可以减少一定的稚嫩,使设计更稳更成熟!

 

原文地址:菜心设计铺(公众号)

作者:菜心设计铺


转载请注明:学UI网》做设计有一道及格线,标准肯定是“它”

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

把握创造力的5个层次,了解设计师如何成长!

seo达人



什么是创造力?对于在设计行业工作的人来说,这是一个很难回答的问题。如果谷歌搜索这个问题,会发现很多答案,比如:创造力就是创造新的东西。创造力就是把好的点连接在一起。创造力就是想出一个想法或一个新产品。我个人更喜欢下面的定义:“创造力是将新的和富有想象力的想法变为现实的行为。创造力涉及两个过程:思考,然后生产。”

 

如果你有一个大胆的想法,但却不付诸行动来实施它,证明你富有想象力但缺乏创造力。

因此,创造力不仅仅是思考一个想法,还要把想法变成现实。下面是5个不同层次的创造力水平:

 

层次一:复制

图片

临摹优秀的设计作品仍然是一种创造力。这是最低水平的创造力,只能用于培训或练习的目的。

我们不应该将这个层次的产出用于商业用途或者称这个想法是自己原创的。

 

层次二:复制+修改

图片

为了提高水平,我们不能仅仅临摹或复制某个东西,更需要修改它以适应现在的使用环境。这意味着我们必须开始把我们的想法投入到作品的创作中。

这个层次的产出已经可以用于商业用途,但很大一部分工作仍在复制。

 

层次三:复制+修改+改进

图片

在这个阶段,设计师已经达到了一定的成熟度。每个设计方案都必须放到产品应用的环境中,并且需要仔细考虑每个设计决策,以验证这些方案或想法。

例如,下图是原版的添加新内容的动效设计,动画效果相对复杂。

图片

通过对这个动效进行修改和改进,下图中输出的设计更简单,更容易在产品中实现,同时还减少了用户在真实产品中可能无法识别的不必要的动画效果。

图片

在这个层次上,你可以被视为是一个高级设计师。

 

层次四:趋势制造者

图片

作为趋势制造者,技能必须处于较高的水平,每一个想法都能以独特的方式执行,并且带有自己的个人风格。

这个层次的设计师的作品会受到大多数人的重视和评价,因此有足够的支持来创造一个新的“趋势”,激励其他设计师甚至影响客户使用这些作品作为他们的参考。

 

层次五:系统制造者

图片

这个层次的设计师是定义全新的设计并设置新创意的先驱,是其他人进行创意工作的基础。

在绘画方面,我们有艺术流派:印象派、野兽派、立体派、超现实主义等。在技术方面,有“人机界面设计-iOS”或谷歌Material Design-Android。无论产品设计师是什么风格,他们的设计都必须遵循这两个应用平台的规则。

 

最后

创造力的五个层次分别是:

复制

复制和修改

复制、修改和改进

趋势制造者

系统制造者

图片

通过了解创意层次希望能有助于你从另一个角度来看待创造力,了解创造力水平。

现在的你处在哪个层次呢?

 

原文地址:medium.com

译文地址:Clip设计夹(公众号)

作者:Hoang Nguyen

译者:Clippp

转载请注明:学UI网》把握创造力的5个层次,了解设计师如何成长!


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

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


文章来源:站酷   作者:陈皮Celia 

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

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


设计沉思录|临感VR官网升级(视觉篇)

seo达人

临感官网设计升级,我们将会从【流程篇】、【视觉篇】两个角度进行的复盘,本次分享主要从视觉方向进行阐述,下一期由交互伙伴分享流程篇,本次分享主要从视觉方向进行阐述,欢迎大家持续关注和探讨。

                     

前言

临感官网设计升级,我们将会从【流程篇】、【视觉篇】两个角度进行的复盘,本次分享主要从视觉方向进行阐述,下一期由交互伙伴分享流程篇,本次分享主要从视觉方向进行阐述,欢迎大家持续关注和探讨。

a

01.产品背景

临感是58同城旗下独立品牌,专注于3D空间数字化服务,自2017年起临感作为58同城、安居客的技术提供方为两个平台提供了空间自动化建模、VR拍摄、VR看房、VR带看、VR装修等服务,累计服务用户数过亿,临感通过不断的技术积累以及对行业的理解,正在成长为3D空间数字化领域的一流平台。
随着B端合作用户的激增、业务的完善及拓展,最初的临感官网在设计风格和框架上,已经无法承载更多业务拖展,同时也无法诠释「VR聚合平台」这个概念的诉求。因此,我们在此契机之下,由设计发起这次临感官网改版项目。 

 

旧版存在的问题

图片

对比其他VR竞品网站,旧版整体框架过于传统,设计语言陈旧,无法体现VR的概念。作为VR服务平台,我们需要展现给用户的专业化的一面。

a

02.设计目标

图片

在项目进行前,我们与产品和交互同学通过大量的竞品分析,结合自身产品的目标导向,确立设计目标:给用户酷炫的feel(对整体复盘流程有兴趣的伙伴,可以去看之后交互同学即将发布的”流程篇“)

1

03.设计拆解             

视觉升级强化品牌认知

图片

本次官网的配色方案,延用了最新的定义的《临感品牌升级规范》中的品牌色体系。

图片

首页的视觉主体“百变魔方”的灵感,源自新定义的《临感品牌升级规范》中的临感CUBE。基于临感CUBE的形态,进行了3D化再塑造,赋予了临感CUBE百变的新形态。

1

定义视觉基调

图片

s
灵感收集

图片

同时我们与交互同学们一起找了大量的国内国外的优秀案例进行分析参考,在视觉表现上得到了很大灵感启发。(后续的动画呈现与风格方面,主要参考了2020年的微软vivo宣传片中,抽象与现实结合的手法。)

2

设计风格

图片

初期概念稿中的设计元素以抽象的几何体展现,但呈现效果缺失了生活气息与温度。

图片

经过不断的讨论与设计打磨,最终我们采用了科技与温度并存,抽象与写实互补的展现形式。

r

UI

图片

整体UI采用轻量化设计,按钮模仿毛玻璃拟态效果,使UI与整体动画更加融洽,在交互与视觉上体验更好。

s

动画

为让动画衔接更加自然流畅,动画间无缝衔接,尽量做到用户无感知的切换体验,我们需要带着思考去制作。
首屏临感CUBE不同形态转时,用户产生交互,动画如何过度?
针对用户在浏览时随时的翻页的行为,不同模块动画如何衔接?
用户停留在一个功能,无交互行为,动画如何进行?
动画地址
带着以上诸多思考,我们的3D设计师陈明经过不断调试,最终动画呈现超出预期。

a

技术对接

技术对接时,我们遇到了整个项目进程中最大的难点,同时也是最大的阻碍。为让动画效果更加饱满,在灯光材质等方面采用了OC渲染,而技术伙伴做动画还原时,无法读取到OC数据相关的所有数据,于是我们的3D设计师与对接技术伙伴一起,尝试了很多不同的导出格式,并不断转换3D设计软件,还是无法用技术还原视觉动画。最终我们选择了折中的方式,采用视频适配的播放形态上线。
为做到伪技术实现的效果,我们在每个模块与下一模块衔接前做了几秒的循环动画,这样用户停留某一模块无操作时,可以衔接播放循环动画,让整个页面的动画感知更顺畅。

d

04.结语

临感官网是58UXD首个用动画制作的网站,在设计上也是新的探索与尝试。未来临感还需要不断的探索完善,希望用更精彩的视觉呈现和更友好的产品设计,让用户感受科技的温度。
感谢在设计的过程中辛苦付出的3D设计师与交互伙伴。


 

原文地址: 58UDX(公众号)

作者:环铁艺术家


 

转载请注明:学UI网》设计沉思录|临感VR官网升级(视觉篇)

产品细节剖析,提升用户体验就差这一点!

seo达人



在体验优秀的作品时,我们需要站在用户的角度去发现好设计细节及交互解决方案,思考能给企业或用户带来价值并记录下来,久而久之,就能提高自己的语言组织以及总结能力,再通过不断的练习,以达到质变效果。

 

151.「keep」设置身高/体重-模拟现实生活中的固有认知

152.「网易蜗牛读书」找人共读-坚持读书的动力

153.「keep」隐私模式-一键隐藏跑步轨迹

154.「京东」删除搜索记录-决策思考

155.「哔哩哔哩」动效IP结合操作特性-提升品牌曝光度

156.「高德地图」返回-贴心的交互手势反馈

157.「腾讯视频」只看TA-满足“追星”用户沉浸式体验

158.「京东读书」你用过横屏时分栏阅读吗?

159.「ETC车宝」如何在较少的空间展示更多的内容?

160.「盒马」金刚区-引导用户直达目标、快速转化

161.「美团」酒店住宿-评价功能的重要性

162.「今日头条」内容与评论区-高速直达

163.「MONO」TAB栏图标-植入品牌记忆

164.「高德地图」屏幕常亮-减少不必要的操作

165.「哔哩哔哩」生日-通过闪屏给自己一个暖心的祝福

 

151.「keep」设置身高/体重-模拟现实生活中的固有认知

产品体验:

在keep设置身高/体重时,页面效果采用了现实生活中的尺子/称的刻度,通过左右滑动,跟随刻度变化调整出准确的身高/体重数值。

 

设计思考:

早期的互联网产品界面,很多都通过拟物化的设计来描绘现实世界中的产品,其便于用户对功能进行感知,模拟物理世界中的交互,帮助轻松掌握界面的使用方式,最大程度的降低用户学习成本。虽然后来逐渐过渡到扁平设计风格,但很多方面,依然保留了拟物的特征。拟物化风格会不会再次来临也不得而知,但从设计趋势的不但变化可以看出,如2020年火爆的新拟态设计(基本扑街)、C4D、2.5D设计等表现手法,都是在朝着贴近现实世界的认知方向延展。

在keep设置身高/体重时,通过模拟现实世界用户对生活中事物的认知,将页面设计成尺子/称的刻度样式,左右滑动即可设置完成,很符合用户的直觉。模拟现实的设计可以帮助用户轻松掌握界面的使用方式,更快的跟产品之间建立连接,根据模仿学习的基础,有利于初次接触的用户,降低学习成本、提高效率以及出错概率。

 

152.「网易蜗牛读书」找人共读-坚持读书的动力

产品体验:

进入网易蜗牛读书的介绍页面,通过“找人共读”邀请喜欢读书的伙伴加入,为坚持下去提供动力。

 

设计思考:

说起线上读书,一开始必定给自己定下各种计划,还会下定决心,从明天开始就……。可计划很丰满、现实很骨感,当你不想再看书时,可以找到上百个说法来掩盖自己坚持不下去的理由,且听上去合情合理。很多内/外因素的存在,当正在看书时收到朋友的吃烧烤邀请、网友的开黑4缺一、前男/女朋友的微信等都是放弃计划的开始,即便可以抵挡这些诱惑,但面对看到的精彩无处表达喜悦、疑惑之处无地诉说等,无法交流的痛可能是压倒你坚持的最后一根稻草。

网易蜗牛读书可以邀请喜欢看书的网友一起学习,通过交流互动、相互鼓励提升学习氛围,虽然在虚拟的网络世界,但相比一个人读书更有看书的仪式感,精彩之处相互分享、不懂之处相互交流,摆脱一个人的孤独,为坚持读书提供源源不断的动力。另外,第一次共读的用户,还可以免费得书,且后面能获得翻倍的蜗牛壳用于换书,正所谓免费东西不要白不要,以此增加用户的使用粘性,提升用户在此平台读书的频率,为后面的转化提供条件。

(一个人在电影院就算看着喜剧也可能睡着,但一群人在场很可能让你笑的岔气;一个人静悄悄的在手机追剧跟开着弹幕相比,也是两种不同的心情)

 

153.「keep」隐私模式-一键隐藏跑步轨迹

产品体验:

在keep跑步完成后,进入跑步记录页面,开启隐私模式,系统会屏蔽跑步轨迹地图上的部分文字信息,避免用户在分享后暴露自己的位置隐私。

 

设计思考:

跑步是受大家喜欢的运动之一,没有健身房里的复杂训练和费用成本,且时间灵活自由,经常跑步可以减肥、改善视力、改善失眠状况、释放压力/舒缓情绪等诸多好处。坚持跑步需要极强的自制力,如果光靠自律来让自己坚持,很少人能做到,其外在条件不可或缺,比如多人约定一起跑,相互鼓励;给自己制造必须跑步的条件和理由;打卡朋友圈,获得他人认可和鼓励等。打卡朋友圈是很多人使用的一种方法,一方面碍于面子心理,通过营造努力的人设,在他人那里博得面子和形象,给自己带来心理上的满足感;另一方面,可以通过其他人的点赞、评论获得对自己的肯定,增强自己对跑步的兴趣,以提供坚持下去的动力。

keep为了让用户更安心分享自己的跑步记录,在跑步轨迹地图设置了隐私模式,点击“小眼睛”开启后,轨迹地图上去掉了位置及信息标记,只能看到大概的轮廓。隐私模式能有效避免用户的位置信息泄露,以最安全的方式使用产品带来的服务,给用户更容易掌控的感觉,带去安全保障的同事,还能提升用户对产品的信任度。

 

154.「京东」删除搜索记录-决策思考

产品体验:

在京东搜索页面删除历史记录时,会自动展开所有搜索记录,不打断用户浏览的情况下再次提醒是否全部删除。

 

设计思考:

应用将用户的搜索行为记录下来,其主要目的是方便用户下次使用时再次展现,可直接点击快速找到自己所需的商品。虽然保存搜索记录是在给用户提供方便,但也可能将用户较为私密的关键词暴露给其他人,如果被自己的朋友或亲人看到,就有些尴尬了,删除历史搜索记录无疑是最有效的方法。在用户删除历史记录的过程中,其不同的交互方式给用户不一样的体验,且还能提醒用户思考、是否需要放弃这一操作行为。

在京东APP删除搜索记录的过程中,系统将所有记录展开供用户浏览,且右上角出现“全部删除”的弱提示。通过展示的历史记录给用户足够的时间,以延长用户下一步操作决策的思考,降低删除成功的可能。众所周知,用户在操作删除时,其主行动目标就是删除成功,虽然在中途不太可能改变用户的想法,但每给用户多一份思考(所有历史记录),用户改变想法的可能性就会增加;每增加一定的难度(弱化删除操作,降低视觉传播速度),用户放弃下一步操作的可能性也会增加,而且应用需要通过用户多次重复的搜索记录来计算,确定是否增加该关键词对应产品的曝光频率,以达到更多的转化,用户的历史记录一旦删除成功,就会增大二次搜索关键变化的范围及不稳定性,不利于系统更精确的定向推荐产品及服务内容。

常见删除历史搜索记录的交互方式无非三种,虽然不敢说哪一种最好,但可以根据应用的实际需求酌情利用:

①、无提示:操作删除即删除成功,路径最短、效率最高,但极容易造成不可挽回的误操作(如:美团);

②、弱提示:操作删除,再次提示是否删除,弱化主操作,不影响页面浏览,给予足够的思考空间,但容易混淆原本的想法并通过信息错觉给用户“洗脑”,促使用户放弃下一步操作或引导其误操作(如:京东);

③、强提示:操作删除,通过弹窗提示用户快速做出决策,效率较高,但用户无法浏览页面内容,没有太大的思考空间,只停留在“是/否”的层面上(如:淘宝、饿了么)。

 

155.「哔哩哔哩」动效IP结合操作特性-提升品牌曝光度

产品体验:

在哔哩哔哩视频下方点赞时,或出现IP竖起大拇指的动效,生动有趣,点赞成功的同时,还传播了品牌形象。

 

设计思考:

大拇指点赞是出现过最多的一种图形表现方式,其诞生于2000年后,逐渐在全球各种应用中出现并被人们接受且成为一种潜在的点赞认知,通过自己对产品/内容的态度和认知倾向,用支持、赞同、偏爱等表达主观情绪感受。知名产品对点赞的视觉表现、交互效果都非常严格,因为它会影响所有用户的使用体验及品牌价值。

哔哩哔哩的点赞除了常规的大拇指图标交替出现外,还融入了动效品牌基因及激励性质的文案。点赞成功时,图标上方会出现一个竖起大拇指的动效IP形象,2秒后消失,利用点赞的特性结合IP强化品牌,为用户在操作过程中增强记忆,提高品牌的曝光度,且动效IP样式更具产品灵魂和趣味性。

 

156.「高德地图」返回-贴心的交互手势反馈

产品体验:

在高德地图页面返回时,使用右滑交互手势,所接触的位置会出现水滴状的返回图标,对用户做出交互反馈。

 

设计思考:

针对移动端界面的返回,第一印象是左上角的返回图标,但在全面屏手机普及后,大屏幕尺寸也又开始占据市场,屏幕大意味着内容可以更大限度地得到展示,但也会增加单手操作的难度,尤其是顶部,几乎成为单手操作的盲区,于是,很多应用开始将重要的功能往下方移动以及增加了很多隐藏的交互手势,如上/下/左/右滑动、双击、长按、多指并行等一系列便捷的操作。

其实很多交互手势,用户已经见怪不怪,基本都有接触,但是在地图类型的应用中,80%以上的用户操作各方向滑动时,思维还停留在移动地图的认知上,很少有右滑返回的概念。高德地图增加了右滑返的交互,且在人机交互的接触位置出现水滴状的返回图标,给予用户明确的反馈,便于用户快速区分对应的下一步变化是返回还是滑动地图,极大方便用户使用,简单的设计细节十分友好贴心,不知道的童鞋赶紧试试吧!

 

157.「腾讯视频」只看TA-满足“追星”用户沉浸式体验

产品体验:

在腾讯视频横屏观看影片时,点击“只看TA”,选择只想看到的明星片段,后续在看片过程中,系统会自动屏蔽与该明星无关的片段。

 

设计思考:

所谓“萝卜青菜、各有所爱”,针对喜欢追剧/看片的人群,其目的是各不相同,比如喜欢历史的,所关注的是故事的情节、改编程度及连贯性;喜欢科幻的,关注的是动感和特效。但说起青春偶像剧,喜欢看的,大部分用户都是片中某些明星铁粉,因“鲜肉”云集,打开弹幕就不难看出,铺天盖地的都是“好帅啊”“老公”“摸了女孩的手、我好伤心……爱死了”等一系列的花痴语录,什么演技、剧情都不重要,重要的是“TA”别消失,不然的话就算是通过快进、跳集也要找到(抱歉、曝光了那一类人看剧的“猫病”)。

腾讯视频APP的“只看TA”功能,解决了看片专为偶像而来用户的需求,选中“只看xxx片段”,后续会自动屏蔽与该明星无关的内容。因为感性的成分较多,“只看TA”功能对于单纯追星的用户来说,再也不用通过快进、跳集的方式去寻找相关片段,可无需任何操作沉浸式看片,给用户带来较强愉悦感和满足感。

 

158.「京东读书」你用过横屏时分栏阅读吗?

产品体验:

在京东读书的高级设置中,打开“横屏时双页”开关,在横屏阅读时会变成左右双页的样式,给用户多一个选择。

 

设计思考:

在报纸、刊物、出版物中,我们经常看到将大量的文字进行了分栏展示,其目的主要是便于快速阅读。人们在阅读大量的文字时基本都是不断地从左到右-返回-从左到右……如此循环下去,当一行文字较长时,头部和视线需要跟随文字大幅度的移动,看完一行后,再用相反的动作返回下一行的开头,费时费力费精神。而较小的行宽能让一行文字在大部分情况下始终保持在目光范围内,保证阅读的完整性,提升阅读速度。

使用京东阅读APP,在高级设置中开启横屏时双页(分栏),其实在用户看书时并没有多大作用,但根据少数用户的视觉浏览喜好多提供了一种选择。针对习惯、感触各异的互联网用户,在不影响功能、视觉体验的情况下,让他们去选择最适合自己方式,是满足用户需求的最佳之举。

 

159.「ETC车宝」如何在较少的空间展示更多的内容?

产品体验:

进入ETC车宝“我的”页面,会员版块会出现抖动的效果,下滑可展开会员权益,上滑即再次隐藏还原。

 

设计思考:

用户开通会员/购买增值服务是企业盈利非常重要的一大版块,其固定入口大部分在“我的”页面,为了引导用户转化的需要,也会合适的穿插在其他页面、状态、功能之中。因“我的”页面需要给用户提供常用的跟个人相关的功能,固会员版块展示区域,基本上不能超出自己的那“一亩三分地”,也间接导致了因展示内容较少、吸引力不够、转换率较低的情况。

ETC车宝的会员版块展示区域同样较小,但却合理利用不同的交互方式在不占用太多页面资源的情况下,展示了更多会员权益。进入“我的”页面,会员版块会出现抖动的动画效果,其最主要作用在于动态比静态更加吸引眼球,增加视觉关注度,利用轻交互动效来吸引用户视觉焦点,增加点击欲望。

一般来说,除非用户在目标非常明确的情况下,才会主动进入会员页面,因为这关系着用户的经济成本。ETC车宝“我的”的下滑可展开会员权益,上滑即隐藏,既做到了不占用页面空间,又额外给用户展示了比较有诱惑力的会员权益,吸引用户参与,勾起开通会员的欲望,同时也能在减少用户操作的情况下,了解更多会员内容,最终达到增加转化率的目的。

 

160.「盒马」金刚区-引导用户直达目标、快速转化

产品体验:

盒马APP将金刚区的入口直接做成了产品一级分类,用户进入首页,即可根据对应的需求快速到达指定位置,少了各种常规功能的弯弯绕绕。

 

设计思考:

常见的电商应用,大部分都是直接在底部标签栏设计一个分类入口,而金刚区是一个页面中头部的重要位置,也是核心功能区域,其聚合了各类子板块的入口,为各个子版块分发内容引导流量,所以其重要性不言而喻。

盒马APP直接将金刚区设计成产品类型入口,其最主要的目的是引导用户在最短的时间内找到目标,快速解决用户需求,少了常规的套路和弯弯绕绕,多了一份效率。相比tab上的分类入口,更能促进用户快速决策,避免用户被其他内容吸引而产生新的想法,影响转化。

 

161.「美团」酒店住宿-评价功能的重要性

产品体验:

美团酒店住宿详情页主图的右下角,会特别突出该酒店的综合评分和其中一条好评,点击后可进入评论页面,依然突出酒店评分,以及大数据下的住客偏好。

 

设计思考:

评价的目的更多是为了表达个人对于某问题或现象的看法以及思考,也会作为后来者是否购买该产品的重要依据,直接关系着店铺的综合评分。不难看出,用户在购买某个产品时,除了价格之外,买家秀就是决定用户是否转化的关键因素(不是唯一),商家也会使用各种方法来提高好评率,其中就包括收到快递后好评返现券、商家电话提示等。纵然如此,评论功能也都只是提供一个的简单入口或介绍完产品后象征性的展示最近两条最新评论,还没有上升到超级重要的程度。

美团APP酒店住宿版块则把评论(综合评分)的重要程度提升了一个等级,将综合评分和其中一条好评显示在详情页主图的右下角,用户进入即可被快速吸引。住客都是以自身位置为中心,因距离的因素限制了诸多选择条件,相比其他电商产品,评价似乎成了除价格之外的唯一决策条件,提高评价功能的等级,也是为了将对应的信息快速传达给用户,减少其思考时间,提升决策效率。

 

162.「今日头条」内容与评论区-高速直达

产品体验:

在今日头条的新闻详情页,点击小气泡图标,页面会自动跳到底部评论区,以供随时查看、参与评论,再次点击图标,可回到之前未看的位置。

 

设计思考:

在拥挤的公交/地铁上、忙里偷闲的上班时间里,我们偶尔会打开新闻APP来了解一些社会热点资讯,增加知识视野及“吹水”能力,偶尔还会跟随大流调侃一番。当被新闻中某个有趣的点刺激着自己的脑细胞时,会不自觉的进入评论区表达自己的想法或看看别人见解,很简单,点一下底部(大部分底部悬浮)的气泡图标就能直达。一番操作之后,要再次回到页面刚才没有看的位置就难搞了,因大部分新闻内容较长,靠下拉去查找基本不现实,且查找的时间越长,记忆力就会逐渐减弱,浪费更多的时间成本。

今日头条APP的新闻详情页面,在点击图标去到底部后,若想回到文中原来的位置,只需再次点击图标即可,避免通过调取大脑记忆滑动页面查找而浪费大量的时间,还能防止用时过长而“断片”,为用户提供了便捷的路径,减少不必要的误操作,增加产品的易用性。

 

163.「MONO」TAB栏图标-植入品牌记忆

产品体验:

MONO(猫弄)APP,底部tab栏图标直接用名称中的四个字母替代,以达到最大化品牌传播的目的。

 

设计思考:

一个应用是否好用,其视觉(交互效果/任务流程/操作方式)占据很大的作用。tab栏作为整个应用结构的入口,也不例外,不管是精致的图标、趣味的动效还是优秀的交互方式,其目的都是为了通过美观的视觉,将产品想表达的内容清晰发反馈给用户。

MONO打破了以往其他应用tab栏的常规表现方式,将名称拆解,即M、O、N、O以图标的方式至于tab栏,用最直接的方式进行品牌传播,让用户记住的并非APP里的某个功能,而是品牌记忆。虽然跟用户所需要的美观、亲和力、趣味性等,似乎是反其道而行,但存在即为合理,通过品牌基因的融入,能让产品带有灵魂, 延伸品牌价值观以及突出图标特征来提高品牌曝光度,让用户看到产品的第一印象,就知道当前使用的是什么,当品牌元素在产品的各个层面合理复用时,也能增强用户记忆,变相提升用户粘性。

 

164.「高德地图」屏幕常亮-减少不必要的操作

产品体验:

在高德的地图设置中,开启“开启屏幕常亮”功能,即可在导航过程中保持设备屏幕常亮,避免猝不及防的息屏带来安全不必要的麻烦和安全隐患。

 

设计思考:

平时我们在导航的过程中,如果长时间没有触碰手机会出现自动锁屏的情况,因事发突然,若行驶在交通复杂且不熟悉的道路口,慌忙之中选择解锁手机查看、刹车减速靠边或随便驶入其中一个路口,不管何种选择,都可能来不必要的麻烦及安全隐患。

使用高德导航时,在设置中开启屏幕常亮后,导航过程中能有效防止设备自动变暗或锁屏,避免用户在驾驶过程中手动调整设备或考虑突发事件造成大脑“开小差”,影响驾驶安全。屏幕常亮可以帮助用户将更多的注意力放在安全驾驶方面,不会因出现息屏受到影响,从而提升安全系数。

 

165.「哔哩哔哩」生日-通过闪屏给自己一个暖心的祝福

产品体验:

在生日当天进入哔哩哔哩,启动页之后会出现一个暖心生日祝福+温馨的闪屏,利用情感化的表现方式让用户在进入应用之前就能感受到友好的祝福,几秒钟后,自动进入首页。

 

设计思考:

“生”是来到这个美好世界的一种方式,“日”是纪念降临人间的日子。很多人都想在自己生日这天得到好友的祝福,只有在这一天才感觉到自己是真正的主角,听到一声“生日快乐”是对自己最好的期盼,被习惯性地祝福,即使这一天自己天犯了什么错,也会被不同程度地原谅,因为我们知道,还有人记着、爱着自己。

在智能设备普及的今天,我们身边少了很多的朋友,但却多了一个铁友-智能手机,最初给我印象最深的就是在生日这一天,从早上开始,QQ的生日祝福消息就没有断过,虽然都是虚拟的礼物,但至少是自己的朋友(Q友)亲手送出,还是无比的开心。而如今的微信、抖音、视频等平台成了手机必备,履行着我们可以没有朋友,但不能没有手机的原则。表面上看,我们似乎在和冷冰冰的机器交流,实则应用早已通过亲和、情感、趣味化的方式成为了自己最忠实的朋友。

在生日当天进入B站,系统会通过闪屏的方式给我们送上最真挚的祝福,温馨的画面+暖心的祝福语,再结合产品的特性融入情感化的设计,为用户打造了一个有归属感且温暖的“家”,为产品设计增添了人情味,并通过祝福的方式拉近用户与产品间的距离感。如果自己的生日被所有人遗忘,多少会有些失落感,而B站用温暖的方式传递爱与力量,也能抚慰每一个被情绪伤害过的灵魂,这也是巩固用户粘性与忠诚度十分巧妙的方式,一个小小的细节,就能感受到产品的温度与团队的用心,很大程度上提升了用户对产品的好感度。

 

结语:

设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来,加强自己的记忆,不仅能提升自己的语言组织和总结能力,也为日后输出优秀的作品当铺垫,对自己的能力提升以及未来的职业发展带来便利。

本期产品设计细节分享结束,我们下期再见。

 

原文地址:能量眼球

作者:大漠飞鹰CYSJ

转载请注明:学UI网》产品细节剖析,提升用户体验就差这一点!

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

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



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

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

日历

链接

个人资料

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

存档