首页

用经典的设计原则,深度解析闲鱼的用户体验设计

涛涛 设计管理与成长

今天我们主要从用户体验的部分原则来看闲鱼,主要以产品视觉设计四大原则、交互设计十大可用性原则、情感化设计来看闲鱼

如何提升排版设计感?你需要知道的文字编排技巧

杰睿

关于文字编排的几条小建议。

排版,或者说对文字的编排,不应该只是平面设计师才需要具备的设计能力。在互联网设计大行其道的背景下,我认为不同方向的设计师都应该或多或少的具备一定水平的排版功底。能把排版做好,除了有助提升综合设计能力之外,对自己作品的展示,也能够起到锦上添花的作用。以下介绍几个文字编排的小技巧,有助快速提升版式设计感。

 

一、重复

重复在版式设计中是指统一与增强,即重复使用颜色、字体、图形等讲究条理性与统一性;重复出现的颜色、字体与图形能够有突出与强调的作用。

在这里我们只针对在文字编排中,如何使用重复来编排文字,从而提升版式的设计感。

通过上图的案例,我们将文字进行重复的编排之后,除了让画面更加饱满规整之外,既能展示完整的星球图案,文案也一定程度得到了加强,也使得主题更加明确,氛围感更强。

 

 

二、描边

在文字的编排中,描边的使用,多用在背景点缀与副标题上。在上文对文字重复的编排中,也使用了文字描边的处理,这也说明了设计师在设计的过程中需要根据具体情况,找到适宜需求的设计方式。

 

用描边处理对文字进行编排,我们可以看到,描边大多用在了辅助文字上,且被用来充当画面点缀物。原因在于文字失去填充之后,可读性会大幅度降低,就会失去文字用于承载信息的作用,所以我们在用描边对文字进行编排的时候,要尽量避免将其用在主标题或者重要的文字信息上。

使用文字描边去编排的好处是,当我们在设计的时候发现画面太空旷,且没有其他元素可以编排时,用这个方式丰富画面,除了提升设计形式感之外,也可以让我们一切的设计元素都有合理的来源,而不是随机的添加突兀元素。

 

 

三、字距

字距,即文本中两个字之间的距离。在长文本的文字排版时,我们很少会主动去控制文字间距。因为在一款字体被设计出来时,它的默认字距是经过设计与验证过的,是最适合阅读的字距。

但我们在版式设计中,为追求设计形式感,在文案较少的情况下,会对短文本或单一大标题的字距进行调整。原因在于短文本或大标题一般字数较少,阅读负担也相对较轻,所以可以接受对其字距进行适当的人为控制。

通过以上两个字距编排案例的对比,可以发现错误编排忽略了文字阅读性,在控制字间距的时候需要在形式感与实用性进行平衡。

 

 

四、繁体

中文繁体,从字型上相较简体而言,笔划会相对饱满与均衡,文字排版使用上也会使版面更加规整。但从使用习惯来说,在做面向内地市场的设计时,繁体的使用需要反复斟酌,避免使用过于生僻的繁体,且尽量多用在短文本或标题。

从上图案例可以看出,简体中文的“二零·二一”虽然在阅读习惯上会相对顺畅,但单从文字编排来说,笔划相差巨大,会造成视觉倾斜,看起来有些失衡。改成繁体中文“贰零·贰壹”,字型笔划更加均衡饱满,且文字也没那么生僻,可阅读性依然可以得到满足。

 

 

五、断句

对文案进行断句,在重点部位进行定位打断,然后在文字编排时体现出来。以此来制造视觉停留,故意发生不连续性的阅读,让阅读落在重点部分。

断句编排,可以看得出在版面受限制的情况下,是一个非常好用的编排方式,可以将主标题与副标题拉开差距,而且还能制造视觉重点。

 

 

六、填充

将适合主题的图案(图片)填充进文字,在设计风格与调性适合的条件下,尽可能选择稍粗字体,以便展示图案全貌,如果能看清图案全貌的话,也能起到强化设计风格的效果。

找一张精致且符合设计调性的图片,将它填充进文字,就能起到上面案例的效果。突出了标题,即不影响阅读性,也强化了画面整体效果。

 

 

七、裁剪

对字体进行裁剪和切割,是编排文字的常用手法,让字体形成缺口或错位,以此来创造形式感。但在裁切之后,缺失的笔画会一定程度影响文字的阅读性。所以在裁切时要注意保留文字的笔画特征,尽可能的降低裁剪对文字可读性的影响。

字体裁剪和切割的编排方式,大多用在相对比较大的字号上,原因在于字型被改变之后可读性会减低,而相对较大的字号,可以弥补字型笔划缺失带来的可读性降低。

 

 

八、空间

在平面的文字编排中,制造空间感的方式,主要依靠层级的叠加。营造出前后错落的视觉感受,以此来突出我们要传达的主体信息。

层次的区分,除了前后关系之外,还要对大小与颜色进行区分。尽量明显的对比,以便拉开文字之间的层级关系。

 

 

九、实践应用

接下来,可以试着运用上面的编排方式,来做一张最近很流行的酸性设计风格的海报。具体如何编排文字,当然是先把文字随便排进版式中,然后再对版式的文字进行编排。

下图是作者按照上面文字编排技巧,花了十几分钟做出来的海报,你也可以动手试试~

文字编排也是一门创作艺术,远不止上文所提到的这几种方式。本文只是列举了几种常用的方法,希望能对大家有所帮助



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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

做设计这么久,还是这个技巧实用

杰睿

重复原则是经常提到的一个概念,在设计中用到的也是非常广泛

设计中无论是版式还是字体等设计中,重复原则基本上用到的是最多的,这得益于重复本身的属性,会使元素具备统一性,这样视觉会更有节奏感,不至于整个画面不融合,其中利用圆方三角或图形做设计实最普遍的,相信大家都见过。

 

开篇前言

希望大家在牛年里都能实现自己的小目标

取得想要的成绩,牛气冲天

 

先简单看看重复图形在海报中的应用

这幅Nike的海报是将文字作为图形进行设计

置入到几何形中,形成统一,细节上进行特异性来表现

 

这幅海报更多的是不规则的几何形进行组合,主要信息用白色矩形承载

形成特异性,能明确表达传达的信息

 

这里则是用简单的横线重复形成图形作为主视觉

还有很多主视觉都是用单元形拼凑成的,多学学Ai技巧用到设计中很重要

 

而字体设计中我们是不是见过这种

用几何形来进行设计

这些都是重复图形在设计中的应用

这种方法能够帮我们发散思维

更好的掌握构成知识

 

Round 1

↓↓↓

 

下面我们用几何形设计一幅海报

主题为重阳节

字体先用三角形和矩形进行设计

 

首先将笔画用图形代替

接下来填充渐变色,使文字更有层次感

 

确定好主视觉位置,对画面进行空间划分

这些空间用什么填充呢,是不是就可以继续考虑用几何形

那么接着用几何图形将空间填补

这里只是一种组合方式,别的方式期待大家解锁

要注意元素之间的节奏性

接着我们对信息进行处理,做好信息之间的对比

 

然后将一部分几何形去除

把我们需要的信息放到相应的位置即可

加上噪点效果增加质感

 

最后我们加一个带场景的样机效果 

 

Round 2

↓↓↓

 

如果用到商业海报中能不能用这个思路呢

我们一起来看看

嚯哈~

 

我们先看看文案信息,简单将文字划个层级

 

 

显然是个家装的海报,全屋定制

尽量要高级一点

 

再来看看客户提供的图片

 

 

 

三张图片,说多不多,说少不少

我们就分成多个矩形块来嵌入图片

 

上面主要是图片,下面是信息

 

 

接着我们对信息进行处理

文字选用宋体,凸显品质感

 

信息之间都做个小对比

 

 

中文配英文,标题配符号,这个是要点,记住了啊

 

 

接着我们将主标题和主图放到相应的位置

接着将剩余信息放进相应的空间

由于整体色调偏低饱和度,这里背景我们选用蓝灰色

 

 

最后看这个画面,是不是左下角还有点空

而且氛围感不够

这时候我们加上一些装饰

再安排一个小沙发,画面就完成了

 

 

 

今天的分享就到这里了,希望对小伙伴有一点点帮助

新的一年,立个小目标

争取把学到的东西转化成自己的,才是真正的进步



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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

B端用研体系框架的搭建

涛涛

B端拥有复杂的业务流,用户研究体系框架的搭建对于产品的成功至关重要,它不仅关系到用户的直接体验,还涉及到产品的长期发展和市场竞争力。通过用户研究,可以更好地理解B端用户的需求和使用习惯,从而设计出更加符合用户期望的产品功能和交互流程。

用户体验一致性思考

涛涛

在团队内部,我们已确立了一套设计规范,在日常项目中使用设计规范输出变的高效、统一。然而,在实际操作中,不可避免地会遇到一些特殊情况:某些客户提出的个性化需求并不完全契合既定的设计规范,这些促使我们不得不在保持设计一致性的基础上进行灵活调整。因此,深入反思并优化一致性原则的应用策略显得尤为重要。我们需要探索如何在坚守设计规范核心精神的同时,灵活应对多变的需求,确保设计既保持统一和谐,又能满足特定场景下的独特需求,从而实现用户体验与品牌价值的双重提升。

UI设计基础

涛涛

建立好产品设计的规范和组件化的价值是:

  1. 最大化的保证设计的一致性,

  2. 提升开发效率,

  3. 方便产品迭代优化

超多案例|不容小觑的标签Tag设计分析

涛涛

所以不同类型产品,标签设计一定要适用于自身的产品调性。不违和且恰到好处的提醒用户达成产品策略。

设计师如何实现自我成长

涛涛

成长路上有踩过坑,有平平坦坦,也有收获的高光时刻,本篇文章将分享我这7年的设计工作与成长历程,分享我在其中的心得感悟,希望能与你共勉~

如何快速重新设计?看看国外大神的实战总结

涛涛

重新设计(redesign)是基于现有产品的改版设计,设计师根据想法和设计理念产出效果图,其目的是在差异中发现设计的意义。

日历

链接

个人资料

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

存档