首页

如何高效地进行网页设计?重点关注这些要素

lanlanwork


1.把握中心目标

大多数网页设计是以目标为导向,也就是网页做出来能为用户提供什么、能解决用户的哪些问题。

例如电商网站的终极目标是卖出更多的商品,资讯类网站的目标是让用户能更多地阅读最新讯息,目标不同,两类网站在设计上也会有截然不同的差异。

在设计上,电商网站会更注重页面氛围的营造,把红红火火的促销氛围搞起来,用户看到会更兴奋。

图片

▲ 在电商网站中,设计重点放在帮助用户浏览店铺并轻松找到特定商品上,放在详情页上用尽可能好的方式展示商品;付款流程也经过简化和仔细计算(例如某宝最近更新的订单页把价格聚集在一起),因此用户不需要经过太多思考就能快速下单购买。

 

2.打造平衡的效果

网页中炫酷的视觉效果能让用户印象深刻,但效果实现需要付出更成本。能明确知道什么时候更简洁的视觉效果能让整个设计变得更好,能让用户专注于正确的事情,这一点很重要。

有时候在网页中添加过多元素,会分散有价值的信息,用户也难以识别他们想看的内容。

图片

▲ 对齐和对称是页面保持平衡的重要因素。对齐既保证了布局统一,又将有联系的元素紧密连接起来;对称营造一种平衡的感觉,元素整齐有序。

 

图片

▲ 网站的登录注册页往往都设计得很简洁,有大面积的留白处理,只保留关键的信息输入框,这样用户能更专注于输入内容。

 

图片

▲ 在宜家网页中,清晰的视觉层级结构以及留白的运用让整个页面看起来非常整洁有序。好的结构能让用户知道他们在看什么,留白提供了视觉上的缓解作用,有助于引导用户的注意力。

 

3.了解基本的设计原理

格式塔原理基本上定义了我们感知事物的六种不同的认知规则。在网页设计中,这意味着需要以一种合理的方式来安排元素,帮助用户从整体上理解设计。

图片

▲ 设计中需要考虑不同元素的对齐关系、相似元素或按钮的排放位置、一组信息要如何展示、列表类信息该如何展示…

 

另一个重要的原则是希克定律,也就是向用户展示的选项越多,做出决定需要的时间就越长。因为我们的大脑需要考虑和分析所有选择,然后再选出最好的选择,当选择太多时,这就会成为一个问题。

这就像我们在餐厅里点菜一样,如果拿来一个20页的菜单,我们可能会从头到尾把这20页全看了,仍然不知道该点哪个,然后又把这个20页的菜单重新翻一遍。

去餐厅吃饭是件放松高兴的事,我们肯定不想在点餐上给自己带来压力,这样吃饭的乐趣也会大打折扣。

图片

▲ 如果需要填写很长的表单,考虑将长表单拆分成几个短的问题,让用户按步骤依次作答,避免一下看到过多问题给用户带来负担。

 

4.了解面对的用户

网页设计需要知道面对的用户是谁、他们想获取什么、想处理什么问题以及他们是想法是什么等等。

对最终用户的印象越清晰,越有可能创造出成功的设计,就像设计一个面向儿童的网站与设计一个供老年人使用的网页会完全不同。所以在一开始,要先学会把自己的观点先放在一边,倾听目标用户的意见,然后再慢慢验证自己的想法。

图片

▲ 抖音千人千面的推荐机制,能为用户精准推送他们感兴趣的内容,把握住了用户的兴趣,产品才能越来越受欢迎。

 

5.排版很重要

排版需要长期的积累和沉淀,如何合理地安排页面中的品牌标识、图片、文字等元素,是始终需要考虑的事。

比如不管网页设计的目标是什么,或者选择什么样的视觉效果,在选择字体时我们总要考虑字体的粗细、大小或对比度等因素。

对于更多的排版和设计技巧,可以回顾这篇文章: 快速改善网页设计的13个技巧!

图片

▲ 根据设备不同,最佳字体的选择可能会发生变化。在移动端设计中,文字可读性是首要的,屏幕越小越要保证信息的可读性。

 

6.信息架构和导航

网页的导航设计和信息架构共同构成了产品的主干,让用户能够了解产品和功能并找到需要的信息。

图片

无论信息的长短如何,合理的层级结构有助于在产品中创建逻辑结构,以便用户可以查找信息。导航能反映出产品架构,这样用户无需花费大量精力,就能轻松找到主要信息和功能。

图片

▲ 点击按钮之后会切换到哪一页、怎么返回到当前页、点击哪些按钮页面不跳转。架构流程不仅自己要明确,更需要用户看得懂。

 

7.降低认知成本

咱们前面提到,如果面临的选择太多,就需要经过大量思考,这样用户很可能会变得有压力甚至困惑。其实这里面还包含着另一层意思,过多的选择会增加用户的认知成本

只有降低认知成本,才不会给用户带来过多压力,才能快速做出判断。在网页大框架已经设计好的基础上,降低认知成本的地方往往更在于细节。

图片

▲ 准确拿捏细节。在面包屑导航中,鼠标悬浮上去是一种状态,点击后又是一种状态;选中的标签与未选中的标签在颜色上做出区分;当前页码重点突出的同时,告知用户前后页码还支持左右切换。

 

最后

最后为大家精选了网页设计Web UI Kit源文件,包含5套网页模板、30个不同的组件、3种颜色模型,很难得很实用的一份资源,涵盖了大部分的设计场景,赶快下载使用起来~

领取方式:关注公众号,后台回复【网页设计】获取设计源文件

图片

 

慢慢来比较快,希望对你有所帮助!

 

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

作者:Clippp

转载请注明:学UI网》如何高效地进行网页设计?重点关注这些要素

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

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

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

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



不会排版的来看看,序如何运用对比制造秩

lanlanwork

咕噜噜

今天我们讲版式中如何运用对比制造秩序

图片

图片

首先如何理解秩序,我们用点的示例放置,当展现在画面中出现无序的形态时,会显得没有规律性,而以螺旋状的方式放置时就明显感受到了画面的舒畅和秩序感。

图片

两者同样以圆为形态,秩序感的形成却截然相反。

图片

秩序感的体现就像建筑和摄影中对于画面布局的形态与物体之间的关联起到微妙的动态变化。

图片

在整个呈现过程中,我们就需要运用秩序里的大小对比、空间对比、粗细对比和颜色对比的关系。

图片

我们用一个小案例来诠释对比的作用

 

1.大小对比

 

图片

首先运用大小对比,这是正常文案放置时的排版结构,文字的大小比例都是相等的。

图片

我们将文字的主次进行了拆分、强化了大小关系,这时文字的比例从原来的大小相等到互相有了不同变化。

图片

强化了对比后,我们看下效果,能明显感受到对比后的阅读逻辑性了有了一定提升。

图片

 

2.空间对比

图片

将主题中的文字放大并改变字体后弱化显示,再将原有内容放置到前面,在四周增加一些装饰信息作为点缀。

图片

通过对比后的效果,可以看出主体内容得到了一定的空间层次,整体也显得丰满一些。

图片

 

3.粗细对比

图片

通过筛选出优先重要信息,将内容作出粗细之间的明显区分,这样的方式可以帮助用户在阅读画面时有更好的着重点,也有了明显的阅读顺序。

图片图片

 

4.颜色对比

图片

改变主题颜色或者一些需要强化记忆的文字,能让整体的版式即显得完整,又多了一些阅读体验感。

图片

图片

我们刚才通过了多种对比,可以看出秩序性在整个版式中的重要,规律的变化也从来都不是毫无逻辑的呈现。

图片

 

示范案例

图片

为了让大家更容易理解和运用起来,我们再用一个案例来展现秩序性在版式中的使用方法。

首先填充红色为背景色,将主标题文字放大,副标题缩小。

图片

改变字体和颜色,利用英文拉开字间距放到主标题上形成了对比和颜色之间的关系。

图片

再复制主标题文字放大移动到背景上,改变字体颜色形成为背景之上的层级

图片

通过元素、图形、背景肌理、素材等去强化与文字版式之间的空间层级关系。

图片

这样一来,不仅文字信息有了非常清晰的逻辑表达,画面上也得到了视觉呈现的丰满和秩序性的动态规律。

图片

 

原文地址:修先森撩设计

作者:修先森

转载请注明:学UI网》不会排版的来看看,如何运用对比制造秩序

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

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

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

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



这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!

lanlanwork



我们先来看原作效果:

图片

再来看临摹练习的效果:

图片

好了,分析开始:

可优化点1:头图的透气感

我们看下头图的对比:

图片

相比之下原作中的头图有很多白色,让画面更加的有透气感,练习作品中的头图会有点闷。

头图的选取也影响了卡片投影的效果:

图片

原作的投影会稍有细节一点,会耐看很多。

 

可优化点2:色彩耐看度

当我们的颜色全都用彩色的时候,就会看起来有点腻,添加黑白灰是最好的一种解腻方式,我们看下面的这些插画:

图片

基本所有的都黑白灰色。

回来看我们的案例:

图片

原版会有很多灰色的搭配使用,但是练习作品全都是用的橙色系,所以看起来会稍微有点满。

 

可优化点3:图标的精致度

当图标有圆形底座的时候,我经常使用的方式就是把图标本身稍微小一点,别让它填充的太慢,比如我们举个最简单的例子,看下面两种方式:

图片

是不是左面的看起来会精致一些。

回到案例本身,我们看下箭头图标:

图片

也是一样的道理,左侧原版的会稍微精致一些。

 

可优化点4:关于信息层级对比

我们看下信息层级对比:

图片

原版的很多信息层级十分明显,练习的作品层级有点没拉开。

当然,这里需要强调下,真正落地的时候还是要考虑能否看清,原版的灰色字是有点太浅了,如果真正落地的话,可能不太行,但是作为概念高,把信息层级拉开一点的做法,是OK的。

 

可优化点5:一些散点

临摹稿的一些间距可能也会有一些问题,比如卡片和下面信息之间的间距:

图片

就稍微有点大了,看起来有点不太合理。

还有这里的状态可能也不是很全等等,没有选中爱心的状态:

图片

当然,说了一些问题之后,回来看,临摹作品其实也是有一些优点的:

比如这个页面的底部按钮:

图片

我觉得变成重色按钮会让整个画面层次更加丰富,并且操作区域也更加明显。

再比如选中态家了一个爱心图标:

图片

这也算是一种小的创意点,是有经过思考的。

这些小的思考和优化,积累多了,后期一定可以激发巨大能力和进步。

好了,以上就是今天分享的这个小案例,很多细节,希望可以给大家一点启发, 后面大家在做界面练习的时候,也可以多多思考并实践。

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!

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

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

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

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

设计师如何提升总结力

lanlanwork


前言 

 

总结能力,是人的一种底层能力和通用能力。跟创造力、沟通表达、学习能力等等一样,它是无论从事什么职业,做什么工作,都应该具备的一种重要能力。

 

很多设计师只顾着提升自己的专业能力,却忽略了这些通用能力的培养,导致自己很快就陷入了发展瓶颈。现实中有很多这样的例子,比如甲乙两个人,甲的专业能力上更强一些,但乙因为很擅长跟人沟通,结果乙发展的反正要更好。

 

打个比方,专业能力就像是游戏里的技能和装备,而通用能力,就像是游戏里人物的基本属性。技能和装备随着游戏的进程可能会不断更新替换,而基本属性则是永远跟随着你的成长,它的提升给你带来的是全方位的提升。

 

文末 原文地址可观看此视频讲解

 

 

一、什么是总结力

总结力,也就是归纳总结的能力。

那么,我们再追问一下,什么是总结呢?它的目的是什么?

 

我们通常所说的总结主要有两种

图片

 

一种信息资料的总结,也就是将一些体量较大的信息,归纳概况为简单的信息。比如我们日常中的学习总结、会议总结、工作总结、年终总结等等,都是这一类。

另一种是经验规律的总结,从大量相关的信息、资料中,寻找共性、规律,最终得出具有指导性的经验方法和结论。比如人类社会的科学、学术成果,我们所学的设计理论,设计讲座、文章里分享的设计经验,毕业设计论文等等,都是属于这一类总结。

 

前者,信息资料的总结,是我们日常生活中最常见、最常用的,主要作用是整理归纳,就像是整理自己房间,整理超市货物,整理图书馆资料一样,让它看起来更加的整洁有序。

而后者,经验规律的总结,它是一种层次更高的总结,就像凝水成冰,百炼成钢一样,在原有的基础上进一步得到了升华。

 

二、为什么要提升总结力

接下来我们来聊为什么要提升总结能力,它的目的、作用是什么?

随着工作经验的增长,技术能力渐渐成熟,拉开差距、决定上限的,往往就是审美、创意、设计思维等等这些更高维度的能力。

而总结能力,就是这种更高维度的能力之一。

 

先从宏观上来看

进入设计的大门时,我们首先接触的往往就是各种设计理论。

而这些设计理论,就是前辈设计师们一代一代总结下来的宝贵经验。

图片

我们站在今日,看昨日之设计,能够很直观的感受到,设计像是一个有生命的东西,它是在不断发展和进步的。

图片

 

这种进步,是技术的进步,也是整个行业的不断总结与迭代。

 

有了总结,所以我们知道,大红大绿不好看、要突出主体,排版要尽量对齐,熬夜要喝枸杞。。。。

 

总之,我们每个人都受益于前人的总结,不必再去走前辈们曾踩过的坑。

 

 

再从个人的角度来看

锻炼总结能力对自己有哪些帮助?这里我列举了几个方面:

 

1、学习能力

首先是学习能力。

无论从事什么行业,摆在我们面前的第一道关卡就是学习。

人与人之间的学习能力差异是很大的。

有的人花几周的时间就可以快速上手一门新的软件,而有的人可能学了几个月还是感觉自己啥也不会。

这里面的影响因素有很多,比如你是否能找到好的教程资源,每天真正花在学习上的时间有多少,学完之后是否有通过练习来巩固,等等。

 

而总结能力,则是影响学习能力的其中一个重要因素。

它能够帮你简化复杂庞大的信息,更有效的消化知识,快速搭建起自己的知识技能树。

 

如果你要学一个新的软件和工具,在挑选书或教程的时候,可以先去看看它的目录。

图片

 

虽然它非常简短,但却是对整本书或整个教程内容的概括总结。

一个好的教程,一定是目录结构清晰有条理的,而不是东讲一点,西讲一点,想到哪讲到哪。

看完目录,你就可以对这个软件的功能模块上有一个宏观的认知。并可以筛选哪些内容是你需要的,哪些是暂时用不上的,这样就可以有针对性的学习,节省了很多时间。

 

2、成长提升

学习入门之后,接下来就是积累经验,成长提升的过程。

在设计这个行业里,能力跟工作年限,是没有绝对的关系的。

其中,善于不断总结过往经验,复盘项目的人,往往成长的会更快。

 

一个人是否善于总结,其中一个关键在于:他是怎么看待问题的?

是仅仅看到眼前的这一个问题,还是能够看的更远,看的是这一类问题?

图片

如果是前者,那么你解决的就只是当下的这一个问题。这就是为什么,有的人一个问题犯了几十遍了,然而下次遇到类似的问题,还是会继续犯错。

如果是后者,那么你解决掉的就不仅是当下的这一个问题,而是未来所有类似的问题。这样不断的总结,成长下去,最后积累的力量必然是惊人的。

 

比如我们来解决这样一个问题:这里有几个小元素,我们想让其中一个元素看起来更显眼。

图片

应该怎么做?

 

我们可能会想到一些办法,比如:让其中一个圆更大一点

图片

 

让其中一个圆描边更粗:

图片

 

或者降低其它圆的透明度,让其中一个更亮:

图片

 

这些方法都能达到我们的目的。

不善总结的人到这里可能就已经结束了,因为当前问题已经解决了。

 

但是善于总结的人到这里问题才刚开始。

他会思考:为什么这些操作会让元素看起来更显眼?它们中的共性和规律是什么?

 

经过这种更深一层的总结和思考,我们可以发现,无论是改变大小,改变粗细,还是改变亮度等等,它们的共性与本质,都是形成了“对比”。

这种对比形成的反差,让画面中与众不同的的元素会更加的突出。

图片

当我们经过总结思考,提炼出了“对比”这个本质之后,就能够基于“对比”这个概念,延伸出更多的方案。

图片

比如让它改变颜色、进行填充、改变清晰度等等,总之只要是符合“对比”这个核心的方案都是可以的。

 

我们还可以将它运用到各种其它领域的设计中,解决掉所有“让元素更突出”的问题。比如文字排版中,主标题对比其它的文字一定是最显眼的;海报设计中,主角要放在c位,

 

甚至我们还能反向运用,把元素弱化,比如弹窗广告的关闭按钮永远藏的让你找不到。。。。

 

你会发现,通过这种总结,我们找到了问题的本质与关键。从中得到的经验将不再只是几个具体的解决方案,而是这个问题的“通解”。从“有限”变为“无限”,从“具象”变为“抽象”。下次再看到这个问题,我们就能够站在一个更高的维度去思考。

 

 

3、沟通与表达

当然,对于设计师来说,专业设计能力的成长固然重要,但它绝不是一个设计师能力的全部。

设计离不开与人的沟通和交流,所以沟通和表达能力也非常重要。

 

而总结能力,可以让你在沟通上非常的有逻辑性,能够有效的把想表达的信息传递给对方,反之,则会让别人听了后面忘了前面,听了半天也没弄清楚你到底想说什么。

 

比如你要告诉别人一个设计要怎么优化,如果是这么去说:

图片

这种想到哪说到哪的方式,一旦信息量比较多的话,听的人会很头疼,而且get不到重点。

 

而清晰易懂的表达,一定要经过一个总结整理的过程,减轻听的人的接收负担。

 

这里介绍一个比较好的表达结构:就是我们小时候写作文的时候常用的“总分总”结构。

图片

先说总结、结论,再进行分类、分段阐述,最后结尾再进行一次总结,加深印象。

 

下面我们看看用“总分总”的结构应该是怎么表述的:

图片

 

先做总结:这个设计整体最大的问题是什么?然后细节上主要有哪些方面的问题?

然后做分类阐述。这个分类可以有很多种,比如可以跟之前一样按ABCD不同的区域去划分。但是不要跟之前一样来来回回绕,从A讲到D,又从D跳到B,而是应该按顺序讲完一个再讲下一个。

也可以按设计的不同层面去分类,比如根据构图、配色、排版、质感、动效等不同方面分别去展开讲。

最后结尾把整体最大的问题、一些关键的问题再总结一下,加深印象。

 

按照这样的结构沟通起来就会很有条理性。

 

前面我们是站在“说”的一方的角度,而如果是“听”的一方,其实也是一样的。

如果接收到的设计需求很多很杂,那么首先要做的就是整理归纳,做主次优先级的排序等等,整理清楚再动手。

 

 

好了,说完了总结能力的一些应用场景,再回头看看我们前面所说的总结的两种类型:

信息资料的总结经验规律的总结。

 

学习能力,成长提升,沟通表达,这三个方面中:

图片

学习能力和沟通表达,所用到的总结主要属于信息资料的总结,所以它通过归纳整理,带来了效率上的提升。

而成长提升,所用到的总结主要是经验规律的总结,我们前面说过,它能够在原有的基础上进一步得到升华,正是这种升华产生的力量,推动了我们的成长

 

三、如何提升总结力

我们再来看怎么做的问题,如何去提升总结能力。

首先要说的是,总结能力其实是人的一种本能,人们的大脑会自动对信息做归纳和分类,方便自己理解。

比如有西瓜、苹果、香蕉、草莓,鸡肉五个东西,我们会自动把西瓜、苹果、香蕉、草莓归为一类,因为它们都是水果。

 

再比如这张图:

图片

 

我们会认为左边的图形是一组,而右边的是另一组。

 

所以游戏机按钮就是这么设计的:

图片

 

其实我们每个人都是天生就拥有总结归纳的能力,

只是很多时候我们可能大脑想偷懒,没有刻意的去进行总结。

只要你开始真正做起来,它并不是一件难事。

 

总结步骤

总结的步骤其实很简单:

步骤一大量的资料收集,汇总

步骤二提炼规律、共性,归类分组得到总结

 

我们开头所说的两类总结中,信息资料的总结,一般用到这两步就够了,而经验规律的总结还需要用到第三步:

 

步骤三将得到的总结代入大量的资料,印证完善

 

加入了第三步之后,它就形成了一个闭环,会让你的总结不断完善下去。也就是所谓的:实践是检验真理的唯一标准。

图片

 

比如,我们前面讲总结能力对成长提升的帮助中,提到的例子“怎么让设计中的元素更明显”,这里面我们找到的各种方法:放大,改颜色,加描边等等,就是第一步:资料的收集汇总。

接下来我们进入了第二步:从这些方法中寻找共性,寻找规律,得到了“对比能够让元素更突出”这个总结。

最后是进入第三步,我们把得到的这个总结带回“让设计中的元素更明显”这一类问题中,得到了更多的方案,从而继续完善“对比”这个经验总结。

 

从实践中得到的经验总结,要再回到实践中去,指导实践,并让自身不断完善。

这也是设计中实践和理论之间的关系。

从这三步形成的闭环来看,在设计师成长的前期阶段,实践重于理论,因为这时候没有足够的实践和资料去支撑,也就无法完成第三步:用实践去印证理论。

而越往后面,随着自己掌握的经验、资料越来越多,这个闭环被打通,理论就会越来越重要。不断循环,不断完善下,让自己获得不断地提升。

 

而在这三个步骤中,第一步和第三步,并没有什么操作的难度,主要是时间和耐心的问题。

那么主要的问题就是在第二步,我们按照什么样的原则去总结?怎么去归类分组?这里是需要不断尝试的。

 

几个经典的总结框架

所以接下来我们介绍几个比较经典的总结框架,如果你自己没有好的方案,就可以直接套用这些成熟的总结框架。

 

 1、MECE原则

MECE原则是衡量归纳总结是否完善的一个经典原则。

它是在《金字塔原理》这本书里提到了一个思考工具,中文意思是“相互独立,完全穷尽”。

指的是分类归纳要做到:不重叠,不遗漏。

图片

不重叠是指每一个分类之间相互独立,不能有重复、交叉的部分。

不遗漏是指要完全穷尽,不能有遗漏的部分。

 

如果我们对人进行分类,分为“男人、女人、小孩”,这就不符合MECE原则,因为男人和女人里面也包含了小孩,有重复的部分。

 

再比如站酷对各大设计领域的分类。因为设计的分类非常广泛,为了避免一些相对小众的设计分支,找不到对应的分类。会增加一个“其它”分类。这就满足了“不遗漏”原则。

图片

 

 

 

我们每天调色时都要使用的RGB色彩模式,它就是完全符合MECE原则的。

图片

红绿蓝作为三基色,是相互独立,互不重叠的;而它们相互组合,就可以得到所有的色彩,满足了不遗漏的原则。

 

 

而在设计的分工合作上,使用mece原则也非常有效。

如果一个工作需要多个人分工合作来完成,根据mece原则,分工就应该满足两个条件:

图片

第一是不重叠,就是说每个人负责的任务要相互独立,不要有交叉重叠的部分。

不满足这一点,就会导致可能有两个人做了同一件事,造成了时间的浪费。

 

第二是不遗漏,也就是说分解工作的过程中不要漏掉某项,保证最后所有人的工作合起来是完整的。

不满足这一点,就会导致有一部分工作最后没有人做。

 

2、五帽架原则

接下来我们介绍下“五帽架原则”。

「帽架]这个词是根据类比而来,「帽」表示资料,「架」表示组织资料的方法,所以可以理解为「组织资料的五种方法]。

 

“五帽架”的概念最初是由理查德·沃尔曼在他的“ 信息焦虑”一书中提到的。

图片

 

 

它是做资料整理时可用的五种高效的逻辑顺序。

我在之前写的“设计师如何有效提升执行力”一文中也提到过这种方法。

它们分别是种类、时间、空间、字母、连续性

 

种类,就是按相似性,关联性划分,这是我们最容易想到的一种分类方法,比如b站的各类分区。

图片

 

 

然后是时间顺序,这也是我们最常用的一种结构,比如总结自己的工作经历时,我们可以按时间顺序从前往后,或者从后往前讲;再比如做年度设计总结,也可以按时间顺序,罗列每个月份或者每个季度的工作。

图片

 

 

有时间顺序,自然就有空间顺序,空间的不同位置,前后、远近。

比如摄影摄像中有一个非常重要的概念,就是“景别”。它就是使用空间顺序来分类的。

图片

 

根据摄像机离被摄物体远近的不同,我们可以划分出远景、全景、中景、近景、特写五种景别。

有了这样的统一划分,导演,摄影师,剪辑师等等不同职能的人员之间,才能拥有一套通用的语言,无障碍的沟通。

 

 

接下来是字母顺序,就是按字母、数字等符号的顺序进行分类,最典型的例子就是字典。

这种方式没有什么逻辑性,优点就是非常直白,便于查找。很适合用于资料之间本身没有太大相关性的。比如各种档案、资料的管理,通常就会用不同的编号来归类。

还有游戏里面用会SSR,SR,R这样的编号来区分角色的强度和稀有度。

 

最后是连续性,指的是按照从小到大,从少到多,从高到低,从浅到深等等,这种数学规律去总结整理。

图片

 

这种方式,通常都是为了能够从总结中得出一些重要的结论。

比如我们做完了一个项目,想进行一下复盘,就可以罗列一下项目中哪些地方花的时间最多?根据时间的占比做一个排序;然后就可以针对这些消耗时间最多的地方,看看哪里可以再优化一下,哪里效率还可以再提升提升。

 

 

3、5W2H分析法

5w2h分析法是一种广泛用于企业管理和技术活动中的策略方法。

它由五个W和两个H组成。分别是:

图片

(1)WHAT——是什么?目的是什么?做什么工作?

(2)WHY——为什么要做?可不可以不做?有没有替代方案?

(3)WHO——谁?由谁来做?

(4)WHEN——何时?什么时间做?什么时机最适宜?

(5)WHERE——何处?在哪里做?

(6)HOW ——怎么做?如何提高效率?如何实施?方法是什么?

(7)HOW MUCH——多少?做到什么程度?数量如何?质量水平如何?费用产出如何?

 

通过这七个方面的思考,我们就可以总结出事情的主要框架,让工作计划具有完整性,思考的更加全面、清晰、有条理,避免出现遗漏,这也是符合前面所说的mece法则的。

 

比如工作中做总结汇报,制定一个项目的开展计划,我们都可以使用5w2h这个总结框架,让自己能够对全局有一个清晰的认知,也就是我们常说的做事要有“全局观”。

 

如何高效训练

我们知道了总结的一些常用框架,常用方法,接下来就是去实际的运用。

怎么去高效的锻炼自己的总结能力呢?

这里介绍两个我自己常用的训练方法。

 

1、培养找关键的习惯

总结,说白了就是一个浓缩凝练的过程,从一堆信息中寻找它们的核心思想和关键点。

就像写文章一样,每篇文章都会有一个“标题”,这个标题就是整篇文章的核心和关键。

图片

 

所以,我们在生活中要刻意培养找关键的习惯。

 

比如工作中跟别人交流的时候,可以刻意锻炼自己做到“长话短说”,用最简洁的话来概括你要表达的重点,而不是给别人发一大段未经整理的文字。能一句话讲完的不要分两句讲。

 

再比如对设计做优化,可以先去找设计中最大的问题是什么,再去抓画面局部的小细节。

图片

我刚开始学平面设计的时候,我的老师就曾教过我,如果要看一个设计做的好不好,就先把图缩小,离远了看,看看整体的感觉怎么样,如果整体效果不行,是哪里不行,最主要的问题是什么?如果整体效果ok了,再去把图放大看里面的细节。

 

2、费曼学习法

费曼学习法,简单来说其实就是四个字:以教为学。

这是一种最高效的学习方法,

 

图片

 

为什么这么说呢,这是有科学依据的。有一个著名的研究成果,叫“学习金字塔”。它通过实验,研究出了不同的学习方式,学习者在两周后能记住内容的多少。

 

也就是说这篇文章你看完之后,因为属于被动学习,过段时间你还记得的内容最多只有30%,但是如果你看完之后还能再把它教给别人,你就能记住90%

 

图片

 

但是这里的教,并不是说随便怎么教,而是有目标的。

目标是要让别人很容易听懂,并且能够记住。如果有些地方别人没听懂,或者说记不住,那就说明这些地方你的归纳总结做的还不够好。那就要继续去简化表达,直到对方很容易听懂为止。

这个过程会倒逼你对自己掌握的知识去做概括总结,否则你是无法做到让别人很容易听懂并记住的,

如果没有尝试过的可以试一下,它其实是很有难度的,如果你成功了,你会发现自己对所教的内容的理解会更加深刻和清晰

 

 

这个方法也是我一直在用的方法。因为我自己做过好几年的讲师,对此深有体会。有些技术点自己操作起来已经很熟了,但是想要轻松的教会一些零基础的人,还有很有难度。需要不断的去深挖,真正理解透彻。

在教别人的过程中,我自己的收获也是巨大的,每写一篇文章,都是对自己经验的再次提炼和总结,从总结中得到升华。

 

总结

本次的内容信息量比较大,所以最后再总结回顾一下。

图片

我们从“是什么,为什么,怎么做”三个方面展开,去聊总结能力。

先讲了什么是总结,大致分为信息资料的总结和经验规律的总结两种。

然后讲了为什么要做总结,从学习能力,成长提升和沟通表达三个应用场景出发,举例说明了总结的作用

最后是怎么做的问题,我们介绍了三个经典的总结框架:mece法则,五帽架法以及5w2h分析法。然后讲了两种高效的训练方法“培养找关键习惯”以及费曼学习法。

 

归纳总结,其实是一件偏理性,比较考验逻辑的事情,虽然我们平时做设计更多的是动用感性思维。但是如果能够把理性与感性相结合,往往能产生出更强大的力量。

 

希望本文对大家有所帮助。

 

原文地址:动态设计书屋(公众号)

作者: 崔小骏

转载请注明:学UI网》设计师如何提升总结力

15条APP体验设计的思路分析

lanlanwork


“微信”

公众号的音乐

关键词:#用户体验#
产品体验:
在微信公众号内的文章中或者链接中,会遇到插入音乐模块的内容,点击播放后可以拖拽快进或者重放,同时点击下方有15的按钮可以快进15s或快退15s。
图片 
设计思考:
在原有的公众号内插入音乐模块是无法快进或者快退的,用户只能听完或者关闭音乐的单独模块,推出该公众号也是不能关闭的。在优化后这里明显体验更好,没有两极分化严重的选择,增加了快进快退这样的功能,还有一个原因我认为,在公众号内增加音乐模块的内容多数还是以推荐为目的的,增加拖拽功能后,用户在阅读时快速了解到到歌曲是否是自己喜爱的类型,提高用户的选择速度。  
 

“高德地图”

询问前方路况
关键词:#活跃度# #用户体验#
产品体验:
使用高德地图导航后,如果路段中发生事故等原因堵塞时,在该路段会弹出一个提示框,提示该路段可能通畅的时间段,点击提示框后进入实时交通对话框。 
图片 
设计思考:
之前有体验过一次高德的交通实况功能,这次也是看到了在导航初期就提示了路段的状况,在系统的提示之外,结合实况交通的方式,更准确的提供路况信息,也是为了进一步的提高用户在产品内的活跃程度,更有可能提供潜在的陌生人社交,毕竟产品也上线的旅游路线等功能。  
 

“微信”

可以手动拒收其他应用的消息
关键词:#用户体验优化#
产品体验:
在微信的对话框内,好友发送来的非微信产品的分享消息,可以点击该消息右下角的小手,点击后弹出“接受/拒收来自此应用的所有消息”用户可以自主选择是否接受。 
图片 
设计思考:
产品分享链接无非是QQ、微信、微博、小红书等一些社交类产品,其中微信的基数是最大的一个,多数小伙伴还是选择微信登陆其他产品,再以微信为分享终端。不过这样做有一个问题,就是朋友分享来的程序可能是自己不感兴趣的内容,还会拉低朋友之间的好感度。微信在这里直接上线了拒收这类消息的功能,让用户自己决定要不要接收,不再整个产品上做限制。也是按照用户自主意愿进行了有效的分类选择。  
 

“抖音”

关注的提示增强
关键词:#视觉强化# #提示#
产品体验:
在抖音观看视频时,长时间停留在该up主的页面时,在作者信息下会显示出关注的颜色饱和度较高的按钮。 
图片 
设计思考:
抖音的用户基础是非常庞大的数字,众多用户每天在产品中浏览观看是up主发视频的动力之一,其次,用户的关注度更是刺激up主更新优质视频的动力源之一。所以在这里产品强化了关注这一行为,原有的up主头像下的关注按钮保留之外,增加了一个面积更大的按钮在创作者、视频信息的区域,刺激用户的视觉感受提示用户喜欢就关注,不过这个按钮是在用户长时间停留之后才显示的按钮,产品会根据用户页面停留时长做初步判断,用户是否对这个视频感兴趣,停留时间长感兴趣才会显示关注按钮提示用户。 
  

“微信”

折叠群
关键词:#强提示#
产品体验:
微信群中可以进入群设置,在消息免打扰下新增折叠群的功能,点击后将不出现在消息区,可以在群列表中找到,也不会收到@的强提示。
图片 
设计思考:
微信与QQ在群聊天上之前最大的不同就是,QQ可以完全屏蔽群信息,微信却不可以,虽然有消息免打扰,但是群@消息会有强提醒的功能,用户还是可以看到群中的信息。而这一次的优化彻底解决了这个问题,实际的使用环境确实会有用加入群是不得已的情况,退也不好退,又不想被打扰,所以需要一个完全屏蔽的功能来解决这个问题。而这个功能推出之后,估计对运营的同学是不太友好了,私域流量的限制估计会在未来越来越大,微信也总给我一种和QQ越来越像的感觉。  
 
 

“知乎”

我的页面中的回答问题
关键词:#交互方式#
产品体验:
打开知乎后切换至我的页面,在页面中间可以看到卡片形式的回答问题的部分,左右滑动卡片可以切换下一张。 
图片
 
设计思考:
知乎这里的回答问题采用左右滑动的方式,更像是社交产品中的交互方式,但是不同点是这里的左右滑没有附加更多的功能,只是为了看下一个内容。不过这样的操作也在一定程度上增加了用户与产品之间的互动性,让回答问题变得有趣。还有一点就是如果回答问题是很长的feed流,用户会在漫长的浏览中产生疲倦感,从而导致流量的流失,这样左右滑的形式可以很好的避免长页面的浏览疲倦,让用户的精力集中在内容本身。  
 

“微信”

视频等待接通期间可看朋友状态
关键词:#用户体验#
产品体验:
在微信中,与好友视频通话时,在等待对方接电话的时间里,界面中会显示对方近期发布朋友圈的内容,同时点击下方按钮可以收起内容不查看。  
图片  
设计思考:
在生活中,微信已经成为我们日常最主要的沟通手段之一,而随着流量降费,视频电话也更多的兴起。随之而来的就是在等待电话的过程中,用户是无事可做的状态,增加对方用户的朋友圈发布内容观看,除了知道对方近期做了什么,也是消除等待电话的真空期,提升用户体验。  
 

“腾讯地图”

搜索路线更综合
关键词:#用户体验#
产品体验:
在腾讯地图中搜索路线,在公共交通这里会有更综合的搜索结果,把骑行也包含在目标路线内。 
图片
 
设计思考:
腾讯地图的公共交通搜索更综合,对于日常上班出行的人群来说更友好,往往增加一个交通工具的选择可以有更多一种节省时间的出行方式,而且标注了每一条结果路线的预计费用,这也是给用户多一个选择思考的方向。 
  

“闲鱼”

长辈模式
关键词:#适老设计#
产品体验:
在闲鱼中我的页面内,设置按钮进入后可以在列表中可以找到长辈模式,点击后进入确认开启页,点击开启后重启app进入长辈模式。
图片 
设计思考:
面对老龄结构严重的社会,互联网产品不只是年轻人的专属,疫情之后更多老年人学会了智能手机,从而带来的问题就是多数产品没有适老设计,老年人面对小手机会看不清内容,操作按不准等现象凸显出来,玲琅满目的运营活动也是让老年人招架不过来。
那么,面对这么庞大的人群基数,推出适合老年人的产品就显得更为重要。这里并不单单是为老年人优化设计更好的用户体验,而是从根本上,心里上解决老年人在互联网产品使用的问题,闲鱼在这里推出的长辈版本删除了很多花里胡哨的设计元素,也没有简单用大字解决一切,更好的满足老年人使用需求。 
  

“App Store”

搜索结果增加细分标签(ios)
关键词:#标签#
产品体验:
在ios系统的Appstore内,搜索目标内容后,搜索结果页面搜索框下新增了结果的细分标签,点击标签可以进一步筛选。  
 
图片 
设计思考:
苹果商店中在近几个月不断的更新,首先是之前增加的搜索结果页广告位,这里有增加了搜索结果的细分标签,可以让用户进一步细分筛选,节约目标明确的用户,因浏览导致选择困难或无限下滑寻找目标的痛苦。  
 

“绿洲”

我的页面增加时间线
关键词:#用户体验#
产品体验:
在绿洲中,进入我的页面,可以看到自己发表内容的时间线,切换tab到第二个icon也保留了瀑布流的列表样式。 
图片 
 
设计思考:
在最初的绿洲中没有设置发布时间线的展示样式,只有瀑布流的列表样式,用户在这里虽然可以有更前卫,更沉浸的阅读感受,但是作为内容发布,并不能很好的看到自己发布内容的时间,尤其是时间久了之后,会有忘记原来发布的时间。那么增加时间线后,用户可以很清楚的看到自己发布每一个内容时的时间点,作为内容发布的产品来说,这种功能的增加也会激发用户的成就感,刺激用户继续发布。  
 
 

“淘宝”

双11前的视觉变化
关键词:#视觉气氛#
产品体验:
更新淘宝产品之后,启动可以发现淘宝有点不一样了,首页、逛逛频道视觉更新。   
图片 
设计思考:
随着淘宝的双十一购物节的到来,从远古的光棍节的感念到现在全民购物的形成,产品在这个节点前增强节日气氛,用户在启动打开产品后会潜移默化的感觉到购物的气氛,在气氛烘托的作用之下用户会逛一逛,动作有了开始的第一步随之而来的就会有后续的一连串动作。  
 

“开眼”

底部标签栏的交互方式
关键词:#趣味性# #用户习惯#
产品体验:
启动产品后,切换底部标签栏,可以看到选中状态是中文汉字加选中点,未选中的则为icon符号。在切换时也采用了模仿滚动的样式。  
图片 
设计思考:
底部标签作为整个产品的导航,承接这很重要的功能性,用户进入产品除了看到首页的视觉、滑动两下看内容,接下来就是点一点底部的导航。有序的底部导航会对产品的使用有不少的加分,比如爱奇艺、优酷的点击交互,比如早一点之前版本的站酷app都是比较有序的方式,当然,极简的样式也是有的比如小红书、Behance这样的。
而开眼虽说也是极简的类别中,但是更适应中文用户的交互方式,作为传统的中文用户,习惯性的还是要看一下文字的提示来确保点击正确,减少大脑的二次思考。所以开眼并没有像Behance一样完全符号化,也没有像小红书全完中文汉字,将两者结合之后加上一定的动效丰富切换的之间的有趣度,感觉会更符合大众用户的使用习惯 
 

“斗鱼”

将用户关注内容分类
关键词:#细分#
产品体验:
在斗鱼中,用户关注的主播列表进行了很好的分类,未开播、录播、正在直播、精选视频和很久未上线的主播分类设计。 
图片 
设计思考:
目前市场中的软件产品中,不论是不是内容类的,都设计了收藏的功能,当然也不是说收藏功能只有内容类的可以用。斗鱼作为直播平台,收藏喜欢的主播可以节约用户的操作路径,快速触达用户目标。但是问题也来了,并不是所有的产品都会细分收藏之后的内容,收藏列表里大多数还是按照时间点按序排列。而斗鱼这里之前版本也是这样的方式,但是更新之后的斗鱼收藏列表则一改面貌,更好的细分可以让用户更快的找到目标,较少思考提高效率也就会留住用户。 
 

“支付宝”

积分去看看
关键词:#按钮#
产品体验:
在支付宝中付款完成后,支付完成页面中金额下第一个卡片是领积分,点击立即领按钮后领取积分,领取完成后按钮变为去看看,点击后跳转积分页面。 
图片 
 
设计思考:
支付完成后的领取积分,这里点击领取并不会跳转到积分页面,不会对用户造成页面之间的跳转导致多一步返回的操作,而点击之后将按钮由“立即领”变为“去看看”可以让用户多一个选择,是否要去积分页,减少用户的来回操作的烦躁感。同时在视觉上,领取积分为实心的暖色按钮,点击感视觉冲击上比较强烈,领取之后的去看看变为空心的线框按钮,在视觉强度上减弱,也在一定程度上考虑了购物之后需要展示付款成功页面的使用环境,需要降低用户的视觉冲击。 
  
本期产品设计细节分享结束,我们下期再见。  
 

原文地址:黑马家族(公众号)

作者:神奇的小豪同学

转载请注明:学UI网》15条APP体验设计的思路分析

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

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

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

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



教程 | 设计中的规矩与秩序

lanlanwork



今天我们讲讲关于设计中的规矩与秩序

图片

 

中国人经常讲没有规矩不成方圆,规矩不是固执也不是保守,在规矩之内任意的流动,所形成的是规律,这便是规矩的内涵。

图片

 

世间万物,变幻万千,形成无序的混乱体系和错综关系,合理分配成规范化的形态和关联体系,支撑起这一切的作用,这是秩序。

图片

 

所谓秩序为方,规矩成圆,这不仅是上千年留下来的一个古语,也透彻了一切事物本源的真相,如何运用在设计中,我们先做个示范。

图片

 

教程示范一

1、甜甜圈放置规矩之内,神奇的绿色总能让男人瞬间清醒。

图片

 

2、增加文字与图形,版式中以合理分配主次内容。

图片

 

3、搭建框架在四周形成秩序关系,合理的变化流动,一切都掌握在规矩的作用中。

[优化输出图像]

 

4、增加背景,合理的在规矩之内适当变化。

[optimize output image]

 

图片

 

 

想要更多的变化方式,当然可以。

▽ 

教程示范二

1、将物体随意放置到规矩之内。

图片

 

2、内部的可以随着主体的变化,改变各物体大小规律。它,便是流动的,且变化的,但依然在规矩之中有序的绽放。

图片[optimize output image]

 

3、在秩序的外框架中,编排我们的需求文案,在编排时,注意整体的一个流动方向。

图片

 

4、放置后的编排文字布局,要保持上下的比例平衡来稳定中心的视觉,否则会造成整体画面的失衡,以此改变了本身的秩序。

图片

图片

 

5、中心的视觉可在规矩之内形成了多个空间层次,富有丰富的变化感。

图片

 

6、背景的色彩帮助规矩有了更体系化的完整展现,使之形成了微妙的化学反应。

图片

图片

 

在这规律之中,感受并掌握这样的变化方法,你便有了上千种的设计形式。

图片

[优化输出图像]

 

这就是今天带来的设计中的规矩与秩序。

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》教程 | 设计中的规矩与秩序

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

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

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

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



独家首发 | 2022年视觉设计趋势,美得很高级!

lanlanwork


#1.幻彩立体

图片
幻彩立体也是3D设计的演化,在2022年它会依然会疯狂的出现。不过风格上有些微妙的变化,质感更轻盈纯粹、色彩更少量、图形上更几何块面化,保持更真实的空间立体感受,直观自然。
图片

我们可以从Dribbble 上面看到像UI8、craftwork、Is等,他们的3D作品逐渐趋近走向更简洁风格调性,减少复杂的光影,这也是在扁平化中找到的思路。

图片
图片

图片

 

#2.几何分形

图片
美国电视频道 Turner Classic Movies 
今年发现越来越多几何形状在平面作品或者UI中出现,新的几何图形更具表意,更趋于表达真实情感少了一些图形的抽象化装饰,更多的是传达设计理念,品牌符号穿透。当分形形状与色彩完美结合,可以创建出极具吸引力的视觉效果。
图片
Goodfood Market

图片

图片
HANBOK CULTURE WEEK
图片
unipapa 推出的卫生纸,以简洁纯白的包装令人眼前一亮。

 

#3.NFT艺术

图片
Gucci 发布首款只能在数字环境中穿着的虚拟运动鞋
AR和VR这个大家都知道,前几年就火起来了。今天主要提一下今年备受关注的NFT艺术,什么NFT?其中文名称是非同质化代币,一种应用区块链技术验证的数字资产。它最容易理解的外号,是数字艺术品。
图片
Andrés Reisinger 在 2 月份售出支持 NFT 家具

将NFT与平面设计联系起来,就是我们所说的数字平面艺术。它的到来对设计师影响有很大变化,横向能力要求有所提高,比如了解虚拟数字化设计,以及对全新审美和新三维技术有更高的要求。

图片
 Beeple 一幅拼贴画,经过区块链验证的艺术品在拍卖会上以超过 6900 万美元的价格成交。
图片
Beeple 的其中一幅作品
Moooi与 3D 艺术家Andrés Reisinger合作完成了这把不能生产的虚拟椅子

 

#4.超萌趣图标

来源:腾讯ISUX出品

图标设计一直是社交领域的重头戏,自从去年大量在设计作品中后,截止今年依然很强劲。因为很多设计师意识到单一的枯燥图标无法满足一些特殊场景的情感化设计表达,平面超萌趣图标来了,带来更强的视觉观欣赏性与生动性。
来源:腾讯ISUX出品

图片

图片
图片

 

#5.经典衬线字体

图片
衬线字体在今年Behance作品集首页上,可谓出镜率可比以往高,唤起一种怀旧的感觉。也许是因为看多了衬线字体版式,设计师更多想尝试用衬线字体来打破僵局,设计出新颖的视觉效果。
图片

图片

图片

图片

图片

 

#6.自然设计

图片

 Vocation

自然设计,主张可持续性发展与环境建立联系,是一种新生活态度,是百转千回,回归本源的理想之态。设计师通过设计表达对环境的敬意,与产品建立强相关,既能表达产品自然纯粹之意,又可以宣传品牌贴近我们生活自然之意。

图片

&SMITH 凉茶包装“循环生活”理念

图片

TRØVE

图片

 

#7.超变形字体

图片

dia Design studio

今年很多平面海报设计、品牌符号的动态系统设计中,都可以看到字体被扭曲、变形,以一种新的形态出现在眼前,没错,这就是超变形字体。它打破常规,以不同寻常的路子出现在大众视野中,带来全新视觉体验。

图片

图片

图片

 

#8.动态包装

说到动态包装,这是在国内外这两年火起来一个大趋势,首先微软早期各种产品宣传视频,在到Google、IBM、Apple的视觉语言更新宣传视频。现在越来越多厂商喜欢厂商动态包装产品,这样比平面展示更多细节与生动。

 

Rise

格拉斯哥设计工作室Need为Rise全新重塑品牌,同时通过动态展示品牌延展设计。

今天的趋势分析差不多到这结束了,设计趋势没有好坏之分,选择合适的应用在设计中,将发挥不可估量的作用。希望今天的分享能给大家带来一些启发。

 

原文地址: 功夫UX(公众号)
作者: 功夫UX
转载请注明:学UI网》独家首发 | 2022年视觉设计趋势,美得很高级!

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

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

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

蓝蓝设计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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

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

存档