首页

干货|交互设计中的「有效反馈」7大准则!

seo达人


准则 1.  Timely —— 找准时机,即时反馈

在用户操作后尽快 / 立即给予反馈是最有效的。即时反馈有助于帮助用户养成正确的操作习惯,或纠正用户的不当操作。

如果反馈内容需要较长时间的加载,也可以给用户设计一些有特点的 / 情感化的加载状态,缓解用户等待的不耐烦,又可以传达一定的品牌调性

例如:知乎 App 在加载内容的过程中,增加了 IP 形象的动态效果:

图片

 

准则 2.  Specific —— 具体分析,差异对待

在设计交互反馈时,不仅仅要给出正确或错误的判断结果,同时也应该考虑到用户的个性化需求,针对不同类型、场景、地区的用户提供差异性引导和服务。

例如:大众点评、高德地图可以根据用户的位置,在用户开始使用产品时就推送个性化信息:

图片

 

准则 3.  Balanced —— 正负反馈,穿插结合

通常来说,正面的反馈会激发用户的自信等积极情绪,因此我们更习惯使用正面反馈。但是一些不得不使用负面反馈的时候,我们可以在其中穿插一些正面的消息,减少或缓解用户的因负面反馈带来的消极情绪。

这就好像是别人跟你说:“ 坏消息是……,但是,这样做的好处是…… ”,坏消息不可避免,但加上一点转折,就会让他人心里稍微舒服一些。

例如:美团单车在你骑完车之后,需要支付费用时提示你可以购买单车套餐,虽然是在劝用户花钱,但看上去依旧很友善,其中的话术包括:“本次骑行免费”,“当前已是最优价格”:

图片

 

准则 4.  Instructive —— 提示下步,指引行动

有效的反馈会主动多引导一步,对用户的下一步行动给出清晰的、正确的、指导性的意见,有助于驱动用户继续做出有效操作。

很多 App 在截屏之后都会给出下一步分享的路径引导:

图片

 

准则 5.  Emotional —— 情感属性,引起共鸣

有科学依据证实,人脑会更容易被附带情绪的信息所吸引。用户更有可能会注意那些看上去承载了一些情绪的反馈,从而也更有可能改变其行为方式。

例如:虽然只是一个提醒弹窗,QQ 音乐会员到期的续费提醒文案却经过精心的设计,由各类歌名组成的一句话,每天的到期提醒都不同:

图片

 

准则 6.  Traceable —— 可被溯源,可供反馈

一些特殊情况下的、有重大意义的反馈可以被追溯到其根本原因,可以提供给用户进行申诉和询问的渠道,供用户进行反馈。

例如:电商平台和外卖平台都会在用户下单或退单之后,提供商品物流的详细信息,在查看购买的商品的当前状态时,并可以追溯到商品所在的各个历史环节:

图片

再比如,高德打车如果发现用户的行程订单金额与预估金额差距较大时,会给用户发短信提示,并给出客服和投诉渠道:

图片

 

准则 7.  Less is more —— 质量优先,减少数量

在这个信息过载而注意力稀缺的时代,好的反馈在于质量,不在于数量。有时数量越多,反而会对用户造成不必要的负担。用户并不需要给出很多反馈或者记录生活中一切信息的产品,而是需要能够帮他们理出头绪、提出有效解决方案、呈现有用信息的产品。

以上这 7 大准则,来源于我们日常工作中的积累和沉淀,对于设计产品的交互反馈具备较高的指导意义,希望对你有启发。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》干货|交互设计中的「有效反馈」7大准则!

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

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

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

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



数据可视化设计常出现的错误,你一定要避免!

seo达人


1.三维图形使用不当

虽然三维图形带来的立体感很强,但用在可视化设计中,很容易出现问题。

一方面,三维图形具有X、Y和Z坐标,容易造成图表间的遮挡关系,遮挡会掩盖一部分的数据,让精准比较数据信息变得困难。

另外,透视使对象看起来像是位于三维空间中,但在数据可视化中,它会造成错误的层次结构:前景图形看起来很大,背景图形很小,数据关系被不必要地扭曲。

图片

 

设计要点:

三维图形很有吸引力但可能会遮挡重要的数据信息,并扭曲数据间的比例关系;

如果没有绝对需要尽可能使用二维图形样式。

 

2.数据太多

在设计中,很多人总想在一张图表中尽可能多地展现内容,把各种数据信息聚合在一起。

这样的想法本身没什么错误,但重要的前提是要有清晰的认知,明确知道到底要展示哪些数据。

如果可视化中包含太多数据,信息的展现会变得不堪重负甚至难以理解,这样的话包含的数据再多也没有任何意义。

图片

 

设计要点:

避免数据可视化的信息过载,如果一张图表中包含的信息过多,反而会让用户混乱;

灵活结合多种可视化方式,让数据的展现变得更有效。

 

3.省略基线

一组数据往往各不相同,数据差值的大小也不确定。为了使可视化效果看着更舒服,有的设计师通过改变坐标轴比例来展示数据关系。

最常见的例子就是让Y轴代表的数据不是从0开始,借此夸大数据之间的差异,让数据的变化更加明显。

图片

 

设计要点:

图表的美感再怎么重要,也要服务于精准的数据表现;

避免通过省略基线来故意夸大或缩小数据差异,造成用户误解。 

 

4.选择错误的可视化方法

每个数据可视化方法都有自己的特点。例如饼图适合用来比较一个整体中的不同部分,但不适合用来比较几组不同的数据。

通过饼图的比例划分,虽然可以直观地显示三家企业的收益,但使用条形图会让这三家企业之间的差异更加明显。

如果目的是为了显示一段时间内的收入,那么折线图会是比条形图更好的选择。

图片

 

设计要点:

数据可视化方法并非一刀切;明确可视化传达的变量及最终目的。

 

5.混淆关联

数据可视化更高的价值在于探索和发现不同数据间的相关性,通过比较几组不同的数据关系,找出其中的关联性,从而得到一个更有根据的验证结果。

显示相关性最常用的方法是将几组不同的数据叠加在同一个图表上,但当叠加的数据数量过多时,图表会变得难以识别。

另外一旦强行关联几种相似的数据,有可能造成结果的混乱。一个有意思的例子是冰激凌销量的增加与暴力犯罪的激增有关,因为这两者都是因为气候变化造成的结果。

图片

 

设计要点:

透过数据间的关联性发现事物本质是有意义的,但要考虑数据间的关联是否有依据、是否合理;

数据有相关性并不等于有因果关系。

 

6.放大有利数据

数据的增长或下降和时间是不可分割的。放大时间范围是很多公司经营中投机取巧的方法。

比如只在图表上向用户展示业绩增长的4-6月份(上图),这样看起来公司业绩增长幅度特别大,但如果将X轴的时间缩小到一整年(下图),才会发现公司真实的经营状况,4-6月份的业绩增长仅仅代表了公司业绩持续下跌中的小幅上涨。

图片

 

设计要点:

避免放大的可视化效果与数据整体不一致;

短时间内放大的数据表现可能会让用户对信息的判断产生错误。

 

7.避开常见的视觉联想

视觉元素影响用户的心理,图标、色彩和字体都具有影响观者感知的作用。

下图的可视化描述了美国各个地区宗教信徒占所有居民的百分比,但使用的颜色与地图的设计元素(蓝色的水、绿色的植被和棕色的土地)太过相似。

图片

▲ 分析数据可视化很耗费精力。在看到这样的图表时,我们第一时间联想到的应该是国家的地形情况,可能很难在这个熟悉的认知下去重新理解这个图表代表的其他含义。

 

设计要点:

避免强迫用户重新理解常见的视觉联想,造成对数据的注意力分散。

 

8.过分纠结于数据可视化

数据可视化将难以表现的数字关系赋予了易于理解的形式。最理想的方式是可以通过可视化清晰、简洁地传达数据关系

但是并不是所有的数据都需要使用可视化来表现,有时候一个简单的数据搭配一个流行的颜色就足以说明问题。

图片

 

设计要点:

数据可视化是一种交流工具。像其他所有工具一样,有时它是合适的,有时可能另一种工具更适合。

 

为回馈一直以来关注和支持Clip设计夹的读者,将免费赠送3本《写给UI设计师看的数据可视化设计》书籍给大家,帮助大家更好地学习数据可视化设计。

参与方式:详见原文。

 

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

作者:Clippp

转载请注明:学UI网》数据可视化设计常出现的错误,你一定要避免!

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

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

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

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



如何解决运营设计的核心部分?

seo达人



01.背景

运营设计主要包括日常运营(以介绍产品为主)和活动运营(通过促销或游戏的形式,拉新促活),其目的都是要吸引用户关注,实现流量的最大化,最终完成商业目标。

那设计出好看的画面吸引用户就是运营设计中的核心了吗?

答案肯定是不确切的。画面的呈现只是吸引关注的第一步,信息的传达才是保证用户驻足的关键。随着获取信息的便捷,人们对信息的关注越来越碎片化,甚至只关注标题,所以标题的呈现无疑是运营设计中的核心关键。

a

02.神器诞生

标题设计有很多具体的方法,但随着用户对信息清晰度的更高要求和审美疲懒,装饰过多或者变化过多的标题已不再流行,取而代之的是言简意赅、辨识度高的,更像是“没有设计”的标题设计。在日常的设计中,设计师通常采用合适的字体再通过变形等设计手段,使标题字更有品质感。如果可以直接使用一款字体,既能够清晰表意且兼具个性,又能够节省设计师创作的成本,这无疑是标题设计的首选方式。

字体作为信息传达的核心因素,能够起到统一品牌理念和精神的作用,正是58设计团队当前探索的领域之一。就此,58UXD设计团队的首选原创字体——微笑体诞生了!这款字体在表达企业精神的同时,兼具清晰且个性的特征,并为设计师减轻了工作中标题字体设计的负担!

图片

微笑体诞生

f

03.品质提升,效率UP

· 微笑体是为标题而生,它可以满足运营设计中的绝大部分场景,应用于不同的表现形式

1)轻量化设计页面中,增加简单效果,就具有一定的设计感

图片

招聘业务线活动banner

 

图片

58到家-saas系统系列海报

 

2)需要突出标题品质时,可增加层次感或立体质感

图片

58到家-“城市黑盒”活动画面

 

3)配合3D设计风格时,亦能发挥其厚重优美的字形

图片

2021春节运营活动-房产/招聘/二手车主会场画面

 

· 应用广泛,统一集团品牌感

发布近半年,微笑体已应用到58平台各类运营设计中,并在集团各渠道发挥作用,成为58对外展示的品牌特质之一

图片

58到家线下店内海报

 

图片

58同城招聘业务日常活动

 

图片

58同城平台日常活动

 

图片

58同城校园招聘

 

图片

员工福利-蜂蜜礼盒

 

自5月8日微笑日发布微笑体字库后,主创团队不断优化微笑体,更新完善了含有3627字的字体包。在UXD自主研发的两款运营页面设计平台——斑马智能物料设计审核平台和灵动编辑器中,微笑体已嵌入使用,为运营设计师提供更加便捷的工作方式,为运营工作提供高效且高质量的输出环境。

图片

灵动编辑器

w

04.持续赋能

微笑体在工作中运用的成功,一定程度上解决了运营设计的核心部分。当然一款字体是无法覆盖所有的应用场景的,运营设计需要丰富多样的视觉呈现,需要标题字和其他文字信息以及画面共同完成。

在设计微笑体之初,58UXD组建了专门字体工作小组——Fontwork造字计划。团队本着提升58企业品牌的初心,为设计工作提效的目的,启动了字体设计的第二波征程。为补充微笑体的使用空缺,同时为满足更多的使用场景,第二款字体的字形确定为有设计感的正文字体。

第二款正文字体已征集完毕,在四十多款参赛作品中确定了一款字形,该字体目前正在如火如荼的设计中,待与大家见面时再解开它神秘的面纱~

图片

字体大赛作品展示

e

05.结语

为了给用户持续不断的新鲜体验,为了适应不断变化的流行趋势,高品质的运营设计目前还是主要依靠人力完成。合适且优秀的字体解决了运营设计工作中的一部分问题,如何在保证设计质量的同时,提高效率,优化工作方法将会是我们不断探索的方向。


 

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

作者:环铁艺术家

转载请注明:学UI网》如何解决运营设计的核心部分?

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

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

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

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


关于无障碍设计的研究分享

ui设计分享达人

大纲

1、研究背景

2、案例分析

3、无障碍设计工具推荐



在特殊的场景下所有人都存在残疾

一听无障碍设计就觉得可能和残障人士有关,其实不然;除了先天或后天出现的眼盲;耳聋的这种:永久性的障碍。在正常人身上也存在着情境式障碍;暂时性障碍;例如:


提着大包小包的你,想使用手机—情境式的肢体障碍

在喝热粥时,雾气遮挡住的眼镜—情境式的视觉障碍

骨折的腿无法正常行走—暂时性的肢体障碍

刚睡醒迷糊的你—暂时性的认知障碍

 ……


所以即使你是正常人,在日常使用产品时也会受到和残障人士一样的局限性。而大家说的用户体验设计其实就在特定场景下解决给特定的人群产生的局限性。



城市无障碍坡道


先普及一个概念(curb cut effect)直译过来就是“遏制分割效应”,其实意思就是机会共同体的概念、弱势群体受益的法律和计划往往最终使整个社会受益;最普适的就像是路缘处会做临时的斜坡处理,目的是为了帮助坐轮椅和推荐不便的人出行顺利通过,但是实际上,对于推着婴儿车,和行李箱的人同样受益。


傻傻分不清楚的洗发水和沐浴液

为了统一品牌设计语言,往往会将洗发水和沐浴液的瓶体设计成一样,不仅是视障人士,任何人在闭上眼睛洗头时都分辨不出来。花王在1991年在瓶身做锯齿状处理用来区分两个产品,通过触感也可以轻松辨认。

原文传送门:シャンプーのきざみに込められた思い


接下来就是软件端的案例,软件产品在无障碍设计的例子上也很多。


哈啰出行-司机端

哈啰出行的司机端,在司机开始行程后,在司机端进行操作,APP会进行类似于IOS VoiceOver的语音播报,就是对你点击的位置做中文的播报,规避对情景式障碍的分神的危险。


滴滴-老年版

滴滴打车首页的“老人打车”,除了对布局的简介化,对字体的放大化,还可以设置常用地址然后一键打车,或者通过电话联系客服叫车,还是比较方便的。、对于60岁以上并通过实名认证的用户,如果终点是医院等特定目的地的话,后台还会优先派单,为老年人提供救急服务。


无障碍设计工具推荐


检查色彩对比度

色彩对比度意为:【识别对象】和【其背景颜色】之间的对比度,对比度越高,越清晰,对比度越低。越模糊。如把重要的文字信息的对比度设计到AAA.次级的文字信息的对比度设计到AA。 把色彩对比度量化的话,可以计算出比例值,最低1:1(黑底黑字)、最高21:1(白底黑字)。

最权威的互联网无障碍规范 —— WCAG2.1(Web Content Accessibility Guideline,Web内容无障碍指南

对比度量化工具:点击这里

对比度cheome插件:点击这里


Funkify - 残疾模拟器


通过极端用户的视角来体验网络和界面,包括视线模糊、对比度下降(所有人的视觉对比度都会随着年龄而下降)、杂色、白内障、糖尿病视网膜病变等。

残疾模拟器cheome插件:点击这里


屏幕阅读器

用于在 Chrome 浏览器中朗读内容

屏幕阅读器cheome插件:点击这里


Color Oracle-色弱;色盲模拟器

支持Mac / Win / Linux。大约8%的男人和0.5%的女人有色盲或色弱、是相当大的族群。当然,UI中不应该只通过颜色来区分信息,但有时无论如何会用到色彩区分(比如数据可视化),那么就一定要使用色盲友善的配色方案。一般来讲,蓝/黄、蓝/橙是比较万用的搭配。

色盲模拟器工具:点击这里


总结:


虽然在现实的资本市场不太会在边缘人群身上花那么大的资源,但是体验设计存在的意义不就是为了解决各种因素给人产生的局限性么。


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

文章来源:站酷  作者:你听得到____

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

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

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


走进用户,开启家政服务新模式

lanlanwork


01.背景

目前,众多的平台商家都是以微信群的方式维护家政从业人员信息,通过微信甩单,让家政从业人员自荐或其与他商家合单的方式,完成订单对接。
 

不过,此类供给方式也存在一些不可避免的问题:

· 家政从业人员信息变更很迅速,匹配雇主的时间窗口较短;

· 商家订单在匹配家政从业人员时,匹配成本很高;

· 商家必须手动实时维护大量微信群,以保证获取新鲜资源对接;

· 被动且不受控制,好单有可能被爆单,且无法控制传播路径和时间;

图片

基于这些问题,58家庭服务通过平台策略,力求将线下甩单、合单的合作模式移植线上,以初期实现”家政从业人员 – 商家订单需求”双方供需智能匹配的形式,为以后在线上高效率完成“销售线索-家政员匹配-服务签单-营收分配”的流程打下基础。

借此契机,我们在对齐业务诉求的同时,更加深入的走进用户,从不同的角度出发,为家政从业人员提供优质的接单环境,为商家(经纪人)搭建灵活的建单形式。让设计策略与业务策略深度融合,实现“人-单”的精准匹配。

 

02.用户研究与设计策略设定

通常,我们称呼家政从业人员为阿姨,阿姨是58家庭服务平台十分重要的劳动者资源。所以我们也十分看重阿姨们在使用产品时的体验,致力于提高产品的易用性与实用性。

对此我们通过多种途径相结合方式,对58阿姨使用产品的状态进行调研,并得出了一份适用于58阿姨的无障碍设计方案,辅助我们跟紧用户诉求,让设计策略为用户服务。

图片

 

03.阿姨端,围绕无障碍原则展开的设计

为58阿姨提供优质的接单环境

主要秉承三个原则:清晰准确、感知清晰、操作简单

图片

阿姨通过界面中的文字快速获取订单信息,那么对文字字号和间距的合理设定,可以保障阿姨的基础浏览与操作性能。从调研结果中我们了解到,以16px为设计因子的设计方案最为阿姨认可。所以我们以此为基数设定了界面字号和间距的使用规范。
不过规范的使用也要具有灵活性,我们既要满足阿姨的视觉需要,又要保证页面信息的承载率。例如:
 

· 浏览型页面

与简历创建流程不同,阿姨在接单大厅寻求工作机会时,其接单的目的属性更强,信息读取的需求更甚于操作,通用规范会让页面拉的很长,所以设计上,在保持同等字号的同时,可以将需求单内各项信息之间的间距按基数缩减,保证页面信息的承载率。

图片

然后针对重点信息增加放大功能,同时强调字重和色彩的对比,让读取更加人性化。

图片

 

· 操作型页面

操作型页面,信息的读取并重于功能的操作,就不仅是字号和间距问题,设计同时要考虑减少输入性的交互,尽量去采用选择类型交互。

并在此基础上放大点触目标,以提升阿姨的点击准确率,避免误触。

图片

同时,在调研的时候我们发现,我们平台的阿姨其实在视觉障碍方面的影响并没有我们想象的那么强烈,只是对信息获取的反馈要求更高。所以在设计时,要降低阿姨对信息理解的障碍,及时就近给出阿姨对操作的明确反馈和提醒

图片

这个功能点其实很小,谈不上是核心的使用场景,但是这个对勾的反馈就很关键,让阿姨能够清楚的明白选择的结果。

当然反馈也可以结合场景,将功能引导或者信息提示与相关场景相融合,阿姨的感知也更直观,更强烈。

图片

还有在话术语义等方面的一些细节,依旧秉持同样的原则,就不一一展示了。

 

04.商家端,开启人-单智能匹配

基于用户使用场景,将C端需求进行精准细分

将需求单中,C端客户的每一个要求,都定义成一个模块,从视觉表现和层级关系上进行信息的细分分类,丰富每一个内容点。

图片

例如创建需求单时,单纯的单选或者多选的形式,已经不能完全涵盖所以客户的需求。

滚动形式的单选,范围太过笼统且不能跨域,多选虽然能满足大多数情况,但客户的要求千人千面,这种形式依旧不够灵活。

所以设计上增加了附有两个连续滑块的选择器,允许商家根据客户需求设定某个特定的值或者一个范围值。例如身高、体重、年龄、薪资范围等,实现对需求的定义更加自由精准。

图片

从而更精准地匹配我们的家政从业人员,解决交易双方信息不对等的问题,让供需关系更加智能。

 

05.结语

换一个角度看“商家订单需求-家政从业人员”双方供需智能匹配的形式,其实都是对用户真实需求的挖掘。基于既定的设计策略,不断完善在线服务体系,同时将信息的传与达进行提炼与外显,以体验助力产品,实现B端阿姨和商家的体验协同优化和C端客户的需求满足。


 

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

作者:环铁艺术家

转载请注明:学UI网》走进用户,开启家政服务新模式

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

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

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

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





作品集这样排版,不进大厂都难!

lanlanwork


 

01.关键词排版

关键词排版是很常用的一种排版方式,可以让面试官一下就抓到重点。但是大部分人都是圆圈加文字的表达方式,会显得有些简单、乏味。如果能配上图形或者图标搭配就会丰富、精致很多。

图片

图片

图片

图片

图片

图片

图片

 

02.模块分离

将页面中部分的内容模块分离出来展示,可以是图形或是卡片等等。不仅可以强调页面的层级展示,还可以让作品集排版更加出彩。

图片

图片

图片

图片

图片

图片

图片

图片

图片

a

03.细节特写

作品集排版页面中可以穿插一些放大的特写,可以展现一些精心制作的小细节,或者项目当中需要强调的内容。不仅可以丰富页面的排版形式,还能一目了然地展示出项目的侧重点。

图片

图片

图片

图片

图片

a

04.图文搭配

这个看起来好像是“废话方法”,一个主体图形和文字进行搭配,但是精髓在于文字部分最好是两种粗细或者字体或者大小写的不同对比,让文字内容更有层次。

图片

图片

图片

图片

图片

图片

图片

 

05.平分画面

将画面一分为二,填充不同的颜色背景。有鲜明的层次感和形式感,可以很好地表达一些需要对比的内容,或者需要进行多维度展示的内容。

图片

图片

图片

图片

 

原文地址:设计师深海(公众号)

作者:设计师深海


转载请注明:学UI网》作品集这样排版,不进大厂都难!

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

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

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

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



好的单选框设计具备哪些特质?把握住这些知识点!

lanlanwork


一、什么是单选框?

顾名思义,单选框表示只能选择一个选项,再具体一点,可以理解为只能从一组相互排斥的选项中选择其中一个选项。

单选框有选中和未选中两种状态,样式上用填充的圆表示选中,描边的圆表示未选中,通过改变状态来给用户反馈。

图片

▲ 常见的样式是按钮在左标签在右,在结合特定的场景使用时,两者的位置可以视情况灵活调换。

 

二、何时使用单选框?

除了单选框,选择类组件还有很多其他形式,比如下拉列表、复选框等,我们首先来对比区分一下这几个易混淆的组件。

 

单选框VS下拉列表

当用户需要从大量选项中进行选择时,为了节省空间,可以使用下拉列表代替单选按钮。但是下拉列表将内容都隐藏在下一层级中,需要用户多做一次选择,操作成本和认知成本都会变高

图片

▲ 当选择不多于3项,建议使用单选框,这样选项可以直接展示出来,用户只需要点击选择即可;当选择超过5项时,可以考虑使用下拉列表,确保选项不会占用大量空间。

 

单选框VS复选框

复选框允许用户一次选择多个选项,选中其中一个选项,不会对其他选项产生影响。对于何时使用单选框还是复选框没有明确的界定,需要具体问题具体分析。

图片

▲ 这里提一个使用复选框时需要注意的小问题,比如在只有两个选项时使用复选框,用户可能会以为只需要从这两个选项里面选择一个,反而造成误导。

 

三、单选框设计指南

始终确保良好的可用性

对于这样一个简单的组件,想要做好用好,在设计上有一些不可忽视的细节。

首先要避免在单选框列表中嵌套下一层级的选项,因为使用单选框的目的之一就是为了让所有选项清晰呈现给用户,嵌套过多层级会导致整个结构的混乱。

图片

▲ 另外要明确的是,单选按钮不应该是唯一可点击的热区,而是要将按钮和标签一起作为热区,便于用户准确点击操作

图片

▲ 这个选择模块由单选按钮、文字标签和图标共同组成,可操作的范围很大,视觉层次也很清晰,设计得既整洁又实用。

 

保证可读性

单选框列表的布局要有逻辑性,尽量减轻用户的认知负荷。

图片

▲ 用户习惯于上下浏览选项和列表,如果将这些选项水平排布,可能会造成两点问题:一个是浏览时视线移动的不习惯,另一个就是如果选项位置过于紧凑,用户可能不知道每个标签到底对应哪个按钮。

除了列表要垂直布局,标签也需要很简洁。标签越长,用户需要花费更多的时间和精力才能了解整个列表。

 

提供认选择

想象这样一个使用场景,我们下载了一个新的设计软件,第一次打开时跳出一个弹窗,提示我们是选择经典布局,还是个性化布局,但是我们对这个软件不是很了解,可能并不清楚这两个布局到底是什么样子。

图片

▲ 在这种情况下,最好默认选中其中一个选项,这样做一方面可以减轻用户对于选项的纠结,另一方面还能有目的地引导用户使用。

 

最后

最后为大家精选了单选框设计样式资源,学习好的单选框设计风格和样式,获取最新的设计灵感!

图片

关注公众号后台回复【单选框】获取设计文件。

 

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

作者:Clippp

转载请注明:学UI网》好的单选框设计具备哪些特质?把握住这些知识点!

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

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

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

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



工作经验| B 端产品组件设计细节及经验分享(一)

lanlanwork


1、中性色色值为什么要使用透明度? 

有细心的用户发现,在 Ant Design 的设计规范里,中性色色值可以按照透明度来设置,见下图中性色色值表(百分数代表不透明度):

图片

平时大家似乎更喜欢使用 #333333、#666666 这种色值,那使用透明色有什么优势呢?

我们知道,中性色主要被大量的应用在界面的文字部分,此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑背景以及有色背景的差异,同时结合 WCAG 2.0 标准

现在  Ant Design 的色板中,透明色模式和实色模式都是有的。透明度模式可以做到背景色兼容。

如下图示例,我们以颜色 gray-6 为例,这个颜色在实色模式的色值是 #BFBFBF,透明色模式的色值是 000000-25%。两者在白色背景上的颜色完全相同,但是在灰色或其他颜色的背景上,却有明显差别:

图片

因此在透明色模式下,以中性色为主的前景色,会与背景色有一个更明显的色彩对比,对背景的兼容性也会更好,保证内容的可读性。

Ant Design 提供了透明色和实色两种颜色模式供用户选择,也会使组件更具通用性。

 

2、组件和设计师之间的关系是? 

当下很多常见的、优秀的组件库,都为设计和开发的工作提供了便利。

图片

那么使用组件库可以替代设计师么?组件和设计师之间的关系又是什么呢?我个人观点如下:

 

1 . 组件是「效率」工具

组件是工具,用来为设计师和开发提升工作效率。所有组件库的初衷都不是要替代设计师,而是要提高整个团队的工作效率。使用组件可以从两个方面提效:

(1)工作内容上:可以将不必要的、重复性劳动的时间节省出来

(2)工作流程上:便于设计师与前端开发做交接和协作,节省沟通成本

 

2 . 组件是「质量」保障

使用组件做设计稿,可以在一定程度上保证工作质量。组件规范了前端和设计师的工作方法,建立相对底层的系统,设定了设计和开发的质量底线。

图片

基于组件规范设计和开发的产品更容易具备:

(1)一致性:具备相对一致的表现样式,设计风格和交互体验上均可保持统一

(2)可用性:对于用户操作,可以保证最基本的可理解性和可操作性

(3)审美性:符合基本审美标准,虽不会很亮眼,但也不会很难看

 

3 . 设计师要「沉淀」业务组件

设计师可以尝试沉淀有针对性的业务组件。很多业务领域有其独特性,比如金融类组件和政务类的产品页面列表内容就有很大区别。单一的元素组件在应用的过程中可以被再次组合和沉淀

举个例子,我之前在做业务需求设计时,相比于 AntD,其实更常用的是 TechUI —— 它是建立在 AntD 基础上的、由我们蚂蚁的设计师通过对业务需求的提炼、组合和封装,做成的一套于蚂蚁自己的【业务组件】

图片

再总结下二者的区别:

– Ant Design:是所有人的,是通用的,是单一的原子级别的(比如一个输入框)组件。

– TechUI:是蚂蚁自己的,是私有的,是组合的区块级别的(比如一整个表单)组件,更具备蚂蚁集团自己的业务属性。

图片

针对你公司不同业务类型,沉淀出不同种类的区块级别的组件,这类组件使用起来也会更加得心应手、加倍提效。这也是 B 端设计师可以去学习和精进的一点。

 

4 . 设计师要「洞察」业务诉求

使用组件可以让设计师把节约出来的时间和精力放到更多有价值的工作上去。作为 Ant Design 的设计师之一,坦白的说,即使你的设计稿全部使用了 Ant Design 的组件搭建,最终的页面效果也仍不完善,在用户体验上始终可以更进一步

设计师应该更多去关注对用户需求和业务逻辑的深入挖掘,不仅仅是在界面细节的表现手法上下功夫,还要学会站在全局,用系统性思维看待每一个项目,为整个产品的系统流程做优化,做更全面的产品体验升级。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》工作经验| B 端产品组件设计细节及经验分享(一)

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

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

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

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


辛辛苦苦做的设计,被人说没质感,结果两招就搞定了!

seo达人


1.明暗是影响质感的最关键因素

我们来看一组对比,左侧是原作,右侧是星友的练习作品:

图片

很明显,练习作品的质感没有原作好,其中最重要的一个原因就是,原作的明暗交接线非常清晰,明暗对比很强烈,而练习作品就会有点平。

很久之前做的这个作品,当时看起来还可以:

图片

但现在一看,也是缺少明暗对比,导致整体质感差了很多,人家下面这种在明暗方面就对比很强烈:

图片

所以,质感看起来就杠杠滴!

再比如下面这组对比,上面的是原做,下面的是临摹:

图片

我觉得临摹的要比原作好,我们看底部对比,下面那个底部暗部足够暗,形成强烈明暗对比,整体质感看起来就很舒服。

兄弟们,这个明暗非常重要,要牢记啊!

 

2.边缘光的重要性

再来说一个影响质感的因素——边缘光。

我们看下面这个对比,左侧为网上原作,右侧为练习作品:

图片

能看出来什么问题吗?右侧是不是和背景糊在一起了?如果,主体都和背景糊在一起了,那层次肯定就不够,整体效果也就差了很多。而这一切的问题都是因为没有加边缘光导致。

其实以前做项目的时候,我也遇到过这类问题,比如这个页面,最开始也是主体和背景糊在一起:

图片

后来加了一点边缘光,调整一下灯光色调:

图片

效果立马就好多了。

其实很多作品,都是带有边缘光的,这光一加上,立马就感觉高级很多:

图片

是不是,兄弟们!

 

3.前中后景的三个层次

下面这组设计是十豆三同学做的:

图片

最开始做的更新是比较常规的火箭,后来用品牌形象加飞船元素改了一版,更加有创意和特点了。

但是这里我们来说下后面这张图的不足,我会觉得主体和背景衔接的还不够自然,如果我们把画面分成前中后三个层级,这个画面就缺少了一点中层的内容。

我也经常做这种类似的画面,比如这种:

图片

如果说黑色是背景,白色形象是前景,那么背景上面的这些元素就是中景:

图片

这个中景是提高画面整体质感的关键因素之一,非常重要,不可忽视!

再比如这个画面:

图片

也是在中景加了一些图形和鸡蛋,让整体画面更加丰富,层次更加清晰。

 

总结

好了,以上就是我经常使用到的提升设计质感的小方法,希望可以帮助到大家,么么扔!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》辛辛苦苦做的设计,被人说没质感,结果两招就搞定了!

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

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

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

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


用好“对比色”,让你的设计更有吸引力!(实操篇)

seo达人



01 对比色配色实操

本次提取上期“对比色配色”理论篇讲解的部分文案,进行配色的实操演示:

图片

 

方案一

在PS中新建文件,背景选择蓝色。

英文放大铺满背景,并加入边框。颜色选择蓝色的对比色红色。(英文字体:Champion)

图片

新建图层,填充白色,用套索工具画出不规则选区。

图片

点击“添加图层蒙版”按钮,给图层添加蒙版。

选择蒙版,执行“滤镜-滤镜库-喷色描边”,得到不规则的撕纸边缘效果。

图片

复制一个新图层,填充红色,向上错位移动。

在白色图层添加“图层样式-投影”,撕纸效果就制作好了。

图片

复制“文字”和“矩形”图层,移动到红色图层上方,填充蓝色。

按“Ctrl+Alt+g”建立剪切蒙版,让文字只在红色图层范围显示。

图片

把蓝色字改为白色,白色是万能的调和色,可以缓冲蓝红对比色强烈的对抗性,也可以让作品更加透亮。

图片

最后加入文字排版和纸张褶皱效果,设计完成:

图片

 

方案二

使用AI进行制作,颜色选用对比色紫色和绿色搭配。(英文字体:Current)

图片

给英文创建轮廓,取消群组。

使用直线工具画出一条分割线,使用“路径查找器”中的“分割”功能,把字母切割开

图片

取消群组,右键选择“变换-旋转”180度,调整两个色块重合。

执行“效果-风格化-阴影”加入阴影。这样得到了折纸效果:

图片

使用相同的方法制作出其他字母:

图片

最后加入文字排版和纸张褶皱效果,设计完成:

图片

 

方案三

继续使用AI进行制作,把所有英文放置在画面中。(英文字体:Current)

图片

颜色选用黄、蓝、红的三色对比色进行搭配。

图片

图片

图片

最后加入文字排版和纸张褶皱效果,设计完成:

图片

可以尝试新的配色方案,

此方案颜色选用橙、绿、紫的三色对比色搭配。

图片

本期使用的字体、样机、源文件,请关注微信公众号:艺海拾贝Design(ID:YHSBds),公众号主页回复“对比色”获取下载链接。

 

优秀作业展示

01 NoctilucaGladys

图片

 

02 风少

图片

 

03 沕风

图片

 

04 龙娟(2张作品)

图片

图片

 

05 七陌

图片

 

06 Joyce

图片

 

07 蛋蛋DAN

图片

 

08 珞影随行

图片

 

09 咪奥mao

图片

图片

 

10 小孔呀

图片

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》用好“对比色”,让你的设计更有吸引力!(实操篇)

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

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

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

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



日历

链接

个人资料

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

存档