首页

手机appUI界面设计赏析(八)

前端达人


手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品,为你的产品设计注入灵感。

jhk-1589856824505.png

--手机appUI设计--

jhk-1589856834298.jpg

--手机appUI设计--

jhk-1589856847369.jpg

--手机appUI设计--

jhk-1589856965196.png

--手机appUI设计--

jhk-1596893249060.png

--手机appUI设计--

jhk-1596893316552.jpg

--手机appUI设计--

jhk-1596893336786.jpg

--手机appUI设计--

jhk-1597108869110.jpg

--手机appUI设计--

WechatIMG50.png

--手机appUI设计--

WechatIMG51.png

--手机appUI设计--

WechatIMG52.png

--手机appUI设计--

WechatIMG53.png

--手机appUI设计--

WechatIMG54.png

--手机appUI设计--

WechatIMG62.jpeg

--手机appUI设计--

WechatIMG63.jpeg

--手机appUI设计--

WechatIMG66.jpeg

--手机appUI设计--

(以上图片均来源于网络)

 





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



  更多精彩文章:

       手机appUI界面设计赏析(一)

       手机appUI界面设计赏析(二)

       手机appUI界面设计赏析(三)

       手机appUI界面设计赏析(四)

       手机appUI界面设计赏析(五)

       手机appUI界面设计赏析(六)

       手机appUI界面设计赏析(七)

uni-app页面之间的传参,让下一个页面接收上一个页面的值

seo达人

为了实现页面之间的通讯,或者数据交换,我们要实现一个页面到另一个页面的传参,可以通过点击跳转的时候进行页面之间的传值。


<template>

   <view>

       <navigator url="../a/a?id=1" hover-class="none">

           <view>跳转到A页面</view>

       </navigator>

       <navigator url="../b/b?id=2" hover-class="none">

           <view>跳转到B页面</view>

       </navigator>

       <navigator url="../c/c?id=3" hover-class="none">

           <view>跳转到C页面</view>

       </navigator>

   </view>

</template>


<script>

export default {

   data() {

       return {


       }

   },

   methods: {


   },

   onLoad: function (option) {

       //获得上一个页面传过来的id

       var pageid = option.id;

       console.log(pageid);

   }

}

</script>

Author:TANKING

Web:http://www.likeyun.cn/

Date:2020-8-13

WeChat:face6009

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

动效不知如何落地?

雪涛

一直有很多朋友会问一些关于移动端实现动效的方法,平时也会给大家做一些解答,但是可能没有那么系统性,这次抽点时间总结归纳下这方面的内容,跟大家分享下我日常设计中是如何完成动画实现的。

实现动画的方式

设计输出的方式大概可以分为位图和矢量两种,与常规的图片输出并无太大的差异。位图方式:PNG序列帧、APNG、GIF;矢量方式:Lottie、SVG动画。

动效不知如何落地?看完腾讯高手的经验就明白了

当然除了以设计提供的方式之外,还可以设计完成好demo,开发通过代码进行实现例如:javascript直接实现、SVG(可伸缩矢量图形)、CSS3 transition、CSS3 animation、Canvas动画、requestAnimationFrame由于超出个人能力范畴就不展开讲了。

实现动画常用的工具

实现动画,首先还是得了解有哪些工具可以制作及合成相关的动效,我日常主要使用的工具有Principle、AE、bodymovin插件、iSparta等软件。另外最近准备学习一个新的专门制作svg动画的软件-KeyShape。

  • Principle:可以输出GIF、视频等格式;
  • AE:可以输出PNG序列,结合插件可以输出GIF等等;
  • bodymovin:输出json文件(也就是所谓的Lottie动画);
  • iSparta:使用PNG序列合成APNG、GIF图片格式除此之外;
  • Keyshape:主要是可以制作比较强大的路径变换动画,然后输出svg动画格式。

动效不知如何落地?看完腾讯高手的经验就明白了

格式说明

  • PNG序列:以单帧图像呈现,输出后会生成一个序列组的文件夹;
  • APNG:实际上是把PNG序列合成一张可动画化的PNG,类似GIF,但相比GIF质量要高,图片后缀依旧是「.png」。
  • GIF:可动的位图,但质量较差,压缩到临界值时会出现锯齿边和白边,个人比较不喜欢用。
  • Json(Lottie动画):实际上是一个用代码描述的文档,通过代码描述路径、节点的方式来完成动画效果,与开发实际通过代码实现动画类似,通过bodymovin输出后减少开发实现的时间,提高了开发实现的效率。
  • SVG动画:与Lottie的方式比较类似,可以减少开发的动画工作量,可以通过keyshape设计并导出,后缀为「.SVG」。

如何输出文件?

接下来讲解下各个软件输出对应格式的方法,实际上操作并不会太难,动效本身更重要的还是在于创意本身,因此当你把握了这些方式之后可以考虑进行创意设计。

由于GIF文件多种工具都可以输出,这里就不再作详细说明

1. PNG序列

  • 在AE中制作好动画
  • 通过AE预渲染,然后选择PNG序列,直接渲染出序列帧到本地文件夹
  • 导出序列帧后需要进行压缩,常用的是tinypng,压缩后较小的文件再进行交付

具体如下视频

2. APNG

如上导出到PNG序列帧,拖拽到iSparta软件中,合成即可。合成时可以选择帧率、循环次数(0为无限循环)、导出质量等。如下视频

3. Lottie

  • AE中需要安装bodymovin的插件
  • 制作好动画后,在窗口打开插件-bodymovin、
  • 选择导出的位置,直接渲染一下,即可在本地生成json文件
  • 插件带有预览能力,但较差。可以在https://lottiefiles.com/preview中进行预览查看

更多Lottie相关可以前往https://lottiefiles.com/学习,里面有丰富等Lottie动画效果和一些插件下载,去研究下吧

4. SVG动画

  • 下载keyshape软件,属于付费软件,可以下载14天试用版
  • 可以通过图形制作动效,可以设置自动补间
  • 导出svg文件,导出时可以设置运动是循环或是一次

建议大家自己下载软件后尝试

5. 格式大小比

通过试验几种格式的大小大概是排序依次为:PNG序列>APNG>GIF(质量较差)>Lottie / SVG,json文件和SVG动画文件比较接近,因此可以根据实际考虑决定即可,GIF虽然可以压缩到比较小,但是本身图片质量也较差,因此建议慎重考虑。

动效不知如何落地?看完腾讯高手的经验就明白了

应用案例

动效在UI设计中的应用场景很多,这里梳理了一下,之前我在项目中尝试过的动效,给大家分享下一些案例,希望可以对大家有所启发。

动效不知如何落地?看完腾讯高手的经验就明白了

动效不知如何落地?看完腾讯高手的经验就明白了

动效不知如何落地?看完腾讯高手的经验就明白了

动效不知如何落地?看完腾讯高手的经验就明白了

动效不知如何落地?看完腾讯高手的经验就明白了

动效不知如何落地?看完腾讯高手的经验就明白了

最后总结

学习用什么工具导出什么格式的文件只是第一步,更重要的还是如何制造出一个有创意的动效,因此不要过于强调工具,更多应该培养自己思考设计的习惯。

文章来源:优设    作者:ID设计站

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


饿了么、美团都在用的轻拟物风格,到底是什么?

雪涛

拟物化设计的回归

在今天的 UI 设计领域,由扁平化设计风格占据主导地位,已经是无可辩驳的事实了。扁平化应用除了提升用户获取信息的效率外,对设计师而言就是设计的难度大大降低了。

一个界面的 UI 视觉元素,仅仅只需要图片素材、矢量图标、几何、文字,UI 设计师的工作仅仅是对内容进行组织和排版,涉及到绘制原创的也仅仅只有少量的图标(大多数人还画不好)。

饿了么、美团都在用的轻拟物风格,到底是什么?

这种状态持续了很多年,看起来岁月一片静好。

但是,这两年市场发出了一些不同的声音,那就是打破纯扁平风格的 UI 风格、元素开始越来越盛行了。

比如新拟态风格在年初炒了一波热度,各大平台和公众号都铺天盖地的发文和介绍,介绍它的设计理念和设计方法。

饿了么、美团都在用的轻拟物风格,到底是什么?

还有就是以饿了么、美团为首的国民级应用在主页显眼的位置里使用极具识别性的拟物图标,引起设计圈的热议。

饿了么、美团都在用的轻拟物风格,到底是什么?

首先讲讲新拟态设计,之所以之前只字不提,是因为我对这个风格实在没什么好感,有种对纯拟物借尸还魂的味道,且它的样式对于信息密度高的应用是完全不适用的,只能活在飞机稿里。

而国内大型应用开始在实际项目中上线拟物图标,意义就不一样了,证明这样的设计是经过几个大厂团队认可,且有共识的。

当然,这并不因为大厂用了就无脑推崇。而是纯扁平的设计已经越来越难满足部分需要强视觉效果的页面设计了。

今天的互联网和过去不一样,用户的增长留存不再是过去一样通过裂变和口碑完成,一个产品只要认真打磨体验、功能就能获得用户的青睐和驻留。用户的精力时间是固定的,而互联网产品又层出不穷,佛系的等待用户临幸是没有出路,这种现状也被称为互联网的下半场。

佛系不行,当舔狗更不行(成本太高),所以今天大型产品都在对待用户的态度都选择更具更具侵略性的霸道总裁人设。不仅是用色饱和度越来越高,运营活动越来越密集,广告和强提示也越来越多。比如刚打开了三个应用,进入的首页大家自己意会……

饿了么、美团都在用的轻拟物风格,到底是什么?

有点扯远了,回到话题上。在这种掠夺用户注意力的思路指引下,再做所谓的性冷淡、大留白、极简风就不会合适。当对扁平的视觉效果已经开发到极限以后,那么进一步在一些细节处应用拟物就成为必然的选择。

而拟物的应用并不可能铺设到整个应用中去,因为完全拟物化的设计降低信息浏览效率是必然的,所以它只适合做局部的视觉强化,来加强用户对特定区域的感知。

最常见的需要被凸出的要素,就是首页中应用的快速入口图标、分类图标和底部导航栏图标了。这些区域长期受运营活动支配,相信大家已经很习惯了。

饿了么、美团都在用的轻拟物风格,到底是什么?

只是,这些图标开始在脱离运营活动的状态下,也开始使用非扁平模式,那就不再是运营设计师的工作职责,而是 UI 设计师们绕不过去的槛了(知识盲区)!

且除了 APP 外,其它领域对于拟物设计的需求也会开始逐渐提升,尤其是目前越来越复(fu)杂(kua)的大屏数据展示、车载界面、定制系统等等。

作为新世代的 UI 设计师,多数人对拟物的设计可以说是完全空白的状态,所以是时候要重拾拟物设计这个传统艺能了。

拟物和轻拟物的认识

前面我有提到,拟物主要应用在关键的图标上,但应用的拟物风格并不是过去我们追求的那种极其真实、复杂的拟物,而是经过一定简化、抽象后的拟物 —— 轻拟物。我们要先来明确一下轻拟物到底是什么。

首先我们看看,过去优秀的拟物图标和设计案例,它不仅表现元素本身的光影、透视、构造,甚至会非常完整的表现物体表面的材质和肌理。

饿了么、美团都在用的轻拟物风格,到底是什么?

这种图标单看起来确实很好看、细致。但是,把它丢进我们当前的页面中是非常违和的,因为它们细节实在太多了,而且画起来非常耗时间,不利于项目整体的推进。

所以为了符合画面的质感,又要考虑项目效率,轻拟物这个概念开始被提出和应用,作为一个折中的解决方案。

它和纯拟物设计的共同点在于,也表现光影、结构、透视,但它尽可能精简了轮廓的复杂度、肌理和层级,呈现出更概念化、理想化、易于辨识的拟物图形。

饿了么、美团都在用的轻拟物风格,到底是什么?

所以,我们主要去学习的内容是轻拟物的设计方法,而不是徒手画照片(这个可以缓缓)!

而轻拟物虽然 「轻」,但它依旧也还具备拟物的基本特征,是有实体质感的。但是扁平从插画到图标设计经过多年的改版,有各种叹(hua)为(li)观(hu)止(shao)的设计,应用大量的渐变、投影、模糊的效果,比如下图案例。

饿了么、美团都在用的轻拟物风格,到底是什么?

这在我们之前图标的系列干货中有提过,这类设计是面性图标的进阶版,它们依旧属于扁平风格的范畴之内,不能和轻拟物划上等号。

所以,先掌握这些概念,到下一篇中,我们就会展开具体的技法讲解和演示了。

结尾

对于这几年才开始学习 UI 设计的新手来讲,拟物已经变成一个很陌生的事物,这对行业来说是比较悲哀的一件事。

因为拟物的设计不仅仅是画图标而已,对它的学习可以全方位的提升设计师的基础素养,不仅包括对传统美术(结构、光影、色彩、透视)知识点的剖析,还包含对 PS 使用的深入探索。

可以说,自从拟物不成为必修题材以后,九成以上的UI设计师是不会用 PS 的,这极大的限制了他们自身的可能性和作品的多样性。

以后还敢说自己不会版式设计?

周周

作为一名专业的设计师,版面设计能力直接影响到该设计师水平。我们很多设计朋友在临摹的优秀作品中,往往只是被作品华丽的外表吸引了,比较少去思考设计背后的秘密。

那么在这里,我总结了版式设计原理的几个方面,结合一些具体例子实际操作演示,让对这块不熟悉的设计师朋友们能快速掌握版式设计。

目录

  1. 版式组成
  2. 构图平衡
  3. 设计原则
  4. 设计流程
  5. 案例演示

以后还敢说自己不会版式设计?

一、版式组成

主体:视觉焦点,主导着整个设计(可以是人/物/文字/图片),整个版面最吸引人的部分,相当于主角的作用。

文案:对主体的辅助说明或引导,毕竟有时候我们放一只小狐狸在旁边,用户也不能准确的知道它在说什么,配角的作用。推荐阅读:平面广告的版式风格与创新!

点缀元素:装饰元素,可有可无,具体根据版面需要;好的点缀元素能够渲染气氛,大部分的点缀元素遵循三角形原则,类似下图中的云朵,群演的作用。

背景:可分为纯色/彩色肌理/图片/图形等。

以后还敢说自己不会版式设计?

二、构图平衡

在设计中,平衡是实现统一的一条重要途径。如果上面所说的元素组合起来处于平衡状态,那么这个设计看起来就是统一的,就会给人一种整体印象。

因此,平衡是视觉传达设计的一个重要方面。版式平衡总共有3种分类,分别是:对称平衡,非对称平衡和整体平衡。

以后还敢说自己不会版式设计?

1. 对称平衡

对称是同等同量的平衡,对称式设计是一种静态的,可预见的,讲究条理和平衡布局的设计。对称构图相对比较易于创建,特点是稳定,庄严,整齐,安宁,沉静和古典。

以后还敢说自己不会版式设计?

2. 非对称平衡

非对称在不对等的元素间创设出秩序和平衡,非对称设计由于版式不可预见,所以空间是变化的。特点是动态的,灵活的和富有活力。非对称构图比较多,常见的有以下6种形式。

以后还敢说自己不会版式设计?

对角线构图:

文案摆放在版面的对角线方向,一方面避免了司空见惯的居中版面,一方面给中心主体留出了更多的创作空间;另外中心的图形也可以是对角线的设计,这样会让整个构图看起来比较平衡。

以后还敢说自己不会版式设计?

发射状构图:

点缀元素围绕中心的文案或者图形发射,这样的构图会让中心的视觉容易聚焦,视觉冲击感会更强烈。

以后还敢说自己不会版式设计?

像电商大促活动,淘宝和京东等等会经常使用发射性构图来营造大促活动的热闹火烈程度。

以后还敢说自己不会版式设计?

中心构图:

这是我们最常见的构图之一,文案和主体居中页面,注意的是位于版心的主体要尽可能的出彩,利用设计技巧吸引读者的眼光,这样才能避免平淡乏味。

以后还敢说自己不会版式设计?

s形构图:

文案或者图形放在线条转折的地方,整体呈一个 s 形。另外线条的起点和重点也同样是读者容易关注的地方,可以放一些重要的信息。这样的构图灵活,有趣,而且可以引导用户沿着 s 形轨迹阅读信息。

以后还敢说自己不会版式设计?

二分构图:

文案和主体分开,呈左右或者上下的构图形式,注意的是文案要采用对齐原则。这样的构图也是比较容易创建的。

以后还敢说自己不会版式设计?

形状构图:

主体和文案组合的形式可以是圆形,三角形,矩形等形状构图。注意如果是用三角形构图,最好呈倒金字塔结构,这样更加轻易引导用户进入下一个信息层。

以后还敢说自己不会版式设计?

3. 整体平衡(满版平衡)

整体平衡,是指图片充满整个版面,文案布局在上下,左右,中部的位置,特点是主要以图像为诉求,视觉传达直观而强烈。满版型构图,给人大方,舒展的感觉。

注意:在设计的过程中,这种类型的文字处理很容易显得「嘈杂」,因此为了避免拥挤的空间,适当删减些文字。

以后还敢说自己不会版式设计?

三、设计原则

对构图形式了解后,我们还要知道一些基本的设计原则,虽然这些原则我们可以在其他地方反复的看到,但是我在这里还是要强调一遍,因为它可以帮助我们在打破规则之前,必须清楚规则是什么。另外注意一点就是,这几个原则不是独立分开的,而是可以同时考虑和结合,不是唯一选择:

以后还敢说自己不会版式设计?

1. 对比

缺乏对比,作品会变得平淡乏味并且不能有效地传递信息。艾美奖设计师、Blind 公司创始人 Chris Do 说过 contrast is king(对比至上),运用好对比,可以在页面上引导用户的视觉,并且制造焦点。

以后还敢说自己不会版式设计?

一般产生对比的方法可以有:大小对比、粗细对比、冷暖色对比……不管是哪种对比,当你期望对比效果有效的话,需要大胆一些,明显一些,不要拿12号和13的文字做大小对比,这是没有任何意义的,不要畏畏缩缩,做设计也是一样。

以后还敢说自己不会版式设计?

2. 对齐

任何元素都不能在版面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。在版面上找到可以对齐的元素,尽管它们可能距离比较远。需要注意的地方是避免同时使用多种对齐方式。

以后还敢说自己不会版式设计?

左边的海报采用了矩形构图,右边的海报采用了二分构图,但是文案都是找到了一条明确清晰的对齐线,这样让版面产生了秩序美。

以后还敢说自己不会版式设计?

3. 亲密性

同类相近,异类相远,相关的元素距离靠近,归组在一起,成为一个视觉单位,而不是多个孤立分散的状态,这样有助于组织信息,减少混乱,让结构变得更清晰。根据文案内容,进行合理的分组与归类。

以后还敢说自己不会版式设计?

左边海报文案分成了4组,清晰有条理,中心的主体和点缀元素也利用了亲密性原则,使得中心主体显得更饱满;右边海报主体采用了发射构图,整体呈倒置的金字塔形式,这种锥形容易引导用户阅读下一个信息层。

以后还敢说自己不会版式设计?

4. 重复

重复的目的是统一,并增强视觉效果。比如标题都是同一个字体或大小或粗细。但需要注意的是,要避免太多地重复一个元素,重复太多只会让人讨厌,要注意重复的「度」。太多的重复会混淆重点,都是重点等于没有重点。一般来说,呈均匀的重复式图案,是作为背景使用的。

以后还敢说自己不会版式设计?

左边海报中,我们的视线会被那一个不同的女孩吸引住,这个女孩和左上角的文案「敏感词万岁」相呼应,这种同质中的不同,即是变异元素,用来制作视觉焦点。

右边海报是葛西熏设计师为日本著名仲条正义设计的个人展海报,其中重复的形象是一个腮帮鼓起的小孩形象,不知道是在喝东西还是吐东西,这个具有冲击感的形象其实和这次展览主题「饮&呕吐」呼应的,设计师想表达仲条正义的创作于人生,正如这个重复的形象,不断吸收,不断推翻,最后不断创造。

以后还敢说自己不会版式设计?

5. 留白

留白是虚实空间对比的作用。适当的留白能让页面透气,有呼吸,给人舒适感。大量视觉信息堆砌时,每个元素都要经过眼睛扫描,大脑处理,当找不到重点的时候用户眼睛和大脑容易疲惫。在内容比较多的情况下,尽量在视觉上减少视觉分组;另外,多利用负空间创作一些巧妙的负空间。

以后还敢说自己不会版式设计?

左边在留白的同时,利用了负空间巧妙的将海报的主题「美食」和「美酒」结合起来。右边的海报是日本大师原研哉的设计作品,大量的留白空间更加显得中间寿司的精致,少而静的视觉元素提升了作品的品质感。

以后还敢说自己不会版式设计?

6. 变化

一成不变的元素会容易乏味无趣,版面也缺乏灵活感,如果将一些元素发生位置,大小或者颜色变化,打破版面呆板、平淡的格局,使得画面非常有层次感,不失为打破格局的好方法。

以后还敢说自己不会版式设计?

左边的海报如果将所有的元素归位,这将是一个文案和人物分开中规中距的构图,当他们的位置发生了一些位移,整个页面变得有趣多了。右边海报采用了 s 形构图,如果这些圆圈是一样的大小、颜色,可能没有多少人会有耐心的阅读下去。

以后还敢说自己不会版式设计?

四、设计流程

前面我们了解了版式组成的元素,构图和设计原则,那么我们在工作中怎么利用起来呢,下面介绍我自己的设计流程,每个人的流程都不一样,大家都可以根据自己的习惯来调整。

以后还敢说自己不会版式设计?

1. 需求沟通,确认主题

当接到需求的时候,第一步不要着急马上开工。先要找对需求的方向,才能提高工作效率,事半功倍。沟通主要注意几个方面:

需求的目的是什么?目标用户是谁?背景是什么?——对症下药

  • 这么多文案或者素材里面,哪个是一级二级?——划分信息层级,寻找重点

  • 风格上面有什么要求或建议?能否用3个关键词表达?——预期效果是否达成一致

Ps:关于第3步风格沟通,建议双方用图片交流和表达。毕竟每个人对「高大上」的理解都是不一样的,有的人认为是五彩斑斓的黑,有人认为是大量的留白。有了图片,我们可以去分析图片符合「高大上」的原因是哪些,从而提炼出具体的元素,将「感觉」具体化,这里也是运用到了情绪板设计的体系。

以后还敢说自己不会版式设计?

2. 确定构图形式,学会视线引导

根据前面的沟通和风格关键词,收集好用于表达信息的元素,包括图形图像文字等等,然后在草稿或者脑海中构思好,怎样的排布能让信息有效的传达出去。另外作为设计师要学会引导用户的阅读视线。比如你找到了一个抬头向上看的模特,你可以把文案放在海报上方,用户会习惯性地自然地沿着模特的视线看到文案。

以后还敢说自己不会版式设计?

3. 色彩搭配,5种平衡关系

关于配色,在网上大家都可以看到很多方法和理论,下面介绍这5种色彩平衡的方法个人觉得比较实用,也比较容易理解,大家要根据实际需求来运用合适的配色方案。

互补色——相互衬托

互补色就是色环上相对的两个颜色,海报中的绿色和红色就是这种关系,相互映衬,相互衬托,从而达到了一种平衡。

冷暖色——情感表达

当我们想表达强烈的情感时候,可以用冷暖色去对比,经常会在电影海报或者插画作品中看到。

深浅色——色彩层次

这里的深浅指的是黑白灰对比的重和轻,一般来说,色大而深显得比较重要,色小而浅显得比较次要,我们可以看一下前面讲构图那块展示的海报黑白版,会发现这个规律更加明显。

中性色和彩色——视觉聚焦

中性色指的是黑色,白色和灰色,也叫无彩色,当中性色充当背景色的时候,彩色部分会更加突出和聚焦。

纯色和花色——平衡多色关系

如果一张图中,主体本身颜色比较丰富鲜艳,背景色也五颜六色的话就眼花缭乱了,也就是经常说的辣眼睛,这时候一般采用纯色的背景来缓解视觉疲劳和平衡多色之间的关系。

以后还敢说自己不会版式设计?

以后还敢说自己不会版式设计?

4. 确定字体搭配

不同的字体有不同的气质,根据风格来选择合适的字体。如果遇到比较好看的字体,却不知道叫什么名字,可以找一些以图搜字的网站,比如求字网等等,避免伸手党。

黑体

工业现代感比较强的无衬线字体,给人感觉端正刚硬,具有力量感,多用于表达简洁或信赖感的主题。

宋体

细致优雅的衬线字体、苗条细长,特点是复古,多用于表达文艺或者时尚的主题。

圆体

圆体的笔画圆润,柔美,可爱,具有亲和力,多用于女性或儿童的主题领域。

书法体

书法体特点是潇洒大方,气势磅礴,具有历史感,多用于表达传统文化或者历史主题。

哥特体

哥特体是装饰性比较强的衬线字体,线条交接处和末端具有明显的粗细变化和装饰。特点是犀利、凌厉,多用于表达惊悚、魔法童话或者战争的主题。

艺术体

艺术体其实是泛指像素风格,手写字体,汉仪六字简等等具有强烈的艺术风格和设计感的字体。特点是轻松活泼,具有观赏性和趣味性。

以后还敢说自己不会版式设计?

以后还敢说自己不会版式设计?

以后还敢说自己不会版式设计?

五、案例演示

上面的案例大部分是平面展览或者电影海报,那么实际工作中的网页,banner、闪屏或者 ui 界面这些怎么办呢?其实方法都是一样的,版面设计的原理应用在各个方面。这里演示一个移动端 banner 设计案例吧。

以后还敢说自己不会版式设计?

首先,运营小姐姐的文案非常简洁,没有冗长到让我要分成一级二级三级;其次需求的目的也很明确,就是要突出2个素材和按钮;最后风格也没有奇奇怪怪的提议,只要和产品整体调性一致就好。

那么在这里要介绍一下产品的背景了,pins 是一款少女心拼图 app,界面简洁清新,多种布局模板和背景。很快的,我在脑海中简单地构思了一下构图的方式。其实3种构图形式都是可以的,但是为了更好的突出按钮和素材效果,我最后选择了对角线构图。

以后还敢说自己不会版式设计?

先在黑白稿的情况下把文案和主体布局好,让主次关系清晰;考虑到目标用户大部分是女生,使用了圆形字体,配色主要是参考了 pins 的 logo 的配色,少女心的品牌色;最后细节调整,加上一些点缀的元素,其中网格是 pins 比较受欢迎的背景。一个简单的 banner 就这样完成了。

以后还敢说自己不会版式设计?

当我们的工作内容无法满足做文字比较多的平面海报的欲望时,可以考虑自命题的练习。当时听到许巍《无人知晓》这首新歌的时候,有一些感悟和想法然后做了一些 C4d 素材,想利用它作为主体和歌名做一下排版练习:

以后还敢说自己不会版式设计?

在开始动手做之前我就想好了这次想做一个视觉直观而强烈的海报,再加上主体是文案和素材的结合,所以我才采用了满版构图。在黑白灰中将主角和配角的位置确定好,再去调整字体和距离。推荐阅读:版式必备的7招处理方法

以后还敢说自己不会版式设计?

然后调整主体中4个字和素材之前的交叉和重叠,细节调整后,我尝试了2个配色方案,一种是利用主体素材的颜色进行搭配,平静和谐;另外一种是红蓝配色,直观强烈。

以后还敢说自己不会版式设计?

总结

最后总结一下,我们在进行版面设计时候,要注意从这几个方面去不断调整和检查,同样当你看到一张海报的时候不知道怎么去思考和分析,也可以从这几个方面入手:

主题是否鲜明?视觉焦点是否突出?

  • 构图是否平衡?(3种平衡关系)

  • 设计原则是否合理运用?(6个设计原则)

  • 细节是否丰富? 是否有趣? 细节考验着设计师的情怀。(字体、色彩、光影等)

以后还敢说自己不会版式设计?

以上海报案例图片采编于网络,版权归属原作者。

来源:UID的小伙伴们

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

如何实现小程序用户增长,开发者给了几点关键建议

seo达人

目前除了微信小程序,还有支付宝小程序,百度小程序,字节跳动小程序、京东小程序等,各大流量平台都希望借助小程序的服务连接能力,为企业和用户提供更好的服务。企业在小程序赛道上的战略布局,可以借助平台的流量,获得更多的用户和变现。

有些人会认为小程序用户增长是运营的事情,与产品和开发无关,实则不然。对于全栈工程师来说,他们不仅能做好小程序,还能玩溜小程序,真正全方位、无死角实现用户增长最大化。

小晓云近期采访了几位开发者,他们的小程序有些已经突破百万用户,在自己的领域中获得持续性的发展。开发者围绕用户增长中的拉新、留存、转化等维度,为我们提供了关于产品设计和开发的建议,希望以下的经验对你们都有帮助。

分享 1:小程序视觉和交互是重点,可以借鉴同行让产品更符合大众需求

小程序的特点是「即搜即用,用完即走」,更适合那些轻量级的工具型应用。用户来得快去得也快,则更需要简洁、轻便的设计定位。UI 设计师和前端开发者平常可以通过知晓商店等小程序商店,多参考同类型优秀小程序的设计与交付,以此优化自己的小程序。虽然小程序视觉和交互并不会带来用户裂变式增长,但这个是留住用户最基本的要求了。

分享 2:微信小程序订阅消息是一个用户回流的神器

今年微信小程序从模板消息升级为订阅消息,这是一个帮助小程序实现用户回流重要能力了。对于开发者来说,重点思考:如何合理的向用户直观传达订阅消息、在何处弹出订阅消息。开发者在接入订阅消息能力时,应该选择适合业务场景的模板,并进行文案的引导,同时可以尝试,发起一次订阅时同时订阅多个模版,让用户一次性获得更多消息,提高订阅率。新用户粘性较低,可以借助订阅消息发送奖励通知等,召回用户。

分享 3:结合业务和用户特点,策划符合平台调性的活动

我们原先是做体育领域的资讯和商城 App,微信小程序发布后,庞大的微信流量给了我们一个拓展用户的新机会,于是在 2017 年与知晓云结缘,并相伴 3 年了。用户增长其实不是简单的一两句话可以总结,所以我先分享其中一点。体育领域的资讯,能吸引和留住用户的,主要靠资讯的时效性、赛事活动、体育明星的加持,因此我们曾组织体育明星的投票活动,粉丝乐于参与,同时也提高了认同感和优越感。投票功能设置的门槛很低,但我们增加了很多排行榜的文案引导,加强粉丝的紧迫感,同时也增加了很多分享文案引导,让粉丝主动分享。这个是针对体育领域上很成功的增长案例,当然也可以应用于其它追星平台等。

分享 4:做好数据分析,让数据驱动用户增长

精细化运营的核心就是数据驱动,明确关键指标,并且通过数据分析的方式进行评估,然后不断优化。数据埋点的缺点是开发成本高,所以我们是基于无埋点,一次性集成 SDK,采集页面访问、点击行为、用户特征等全量数据。

分享 5:研究小程序平台的用户喜好,提供他们想要的服务

我是做 QQ 小程序的, QQ 小程序的用户对于社交、恋爱等偏娱乐的场景更感兴趣,针对性提供头像制作、起网名、小游戏等服务有比较大的市场。所以可以结合平台用户的特点和喜好,开发相关服务的小程序,更有利于小程序的发展和变现。

以上内容均来自知晓云开发者的经验分享,如果你对哪一个内容感兴趣,可以在文末或者小晓云微信上留言,对于大家感兴趣的内容,我们将再次邀请开发者进行更全面更完整的分享。

知晓云成立三年以来,通过提供不断更新的开发工具,帮助开发者提高开发效率,轻松完成优秀的作品。但我们服务不止于快、省,还要在增长与变现上赋能开发者/企业。

知晓推送

在线可视化操作加上业务系统轻松集成,可以一键推送全平台的订阅消息推送服务,轻松触达亿万用户。

实时数据库

支持各类高实时性的业务场景,以简便的开发方式、更高的时效性实现在云端和客户端来的数据实时同步。通过实时数据库实现的即时聊天室、投票、直播间送礼和弹幕、小游戏等互动功能,提升用户留存和转化。

运营后台

一键生成可视化的运营管理后台,User Dash API 和开箱即用的前端组件库,开发者可以快速编写一套独立的运营后台,并支持一键部署至知晓云服务器,是开发者的利器,也是运营者的福音。

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

模板商终结者——微信小商店

seo达人

微信小商店已经正式上线,对企业、个体和个人三种开店类型全量开放。微信小商店可以帮助商家免开发、零成本、一键生成卖货小程序。微信小商店团队将负责商品发布、订单管理、交易结算、物流售后、直播带货等技术和服务流程。

微信小商店个人开店非常简单,3秒搞定,毫不夸张,堪称模板商终结者。个人开店仅需身份认证即可,绑定银行卡可以提现,1个微信号仅支持开通1个个人主体的小商店。

企业、个体工商户需要上传营业执照、经营者信息、结算银行账户信息等基础信息,1个微信号可以开通3个“企业和个体”主体的小商店。

当前微信小商店现阶段支持售卖的商品类目超过1500个,主要包括:宠物生活、家用电器、手机、通讯、数码、电脑、办公、服饰内衣等,后续可售品类会增多。

如何开店

  1. 只需搜索小程序 小商店助手
  2. 进入后只需填入店名等极少量信息,选择个人店铺的话不需要上传资质
  3. 点击确认就能极速拥有自己的小程序店铺啦!
  4. 麻麻再也不用担心我被模板商折磨啦!

小程序助手

在 小商店助手 里面还能查看店铺数据在售商品新增商品待付款商品订单管理客服管理店铺设置 等,功能非常强大!

小程序助手

小程序助手

小程序助手

小程序助手

上架新商品也是非常简单快捷,直接上传商品图片,加上标题和一些描述信息就可以。

而且不论是开店审核还是商品上架审核,都非常迅速,作者尝试了几次都在一分钟左右就审核完了!

需要注意的一点是微信会收 0.6% 的交易金额提成哦,毕竟此路他开此树他栽树嘛~

小程序助手

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

如何让用户愿意逛愿意买?来看618站内攻略项目总结

雪涛

项目背景

站内攻略作为每年大促玩法的预告者,承担了向用户输出平台节奏、吸引用户预约回流的重要任务。 不同于着眼于转化的卖货会场,或是着眼于分享的互动H5,如何能让用户更好地了解京东的大促平台玩法,便捷用户的购物旅程,就成为了它的主要任务。

设计思路&设计执行

1. 产品化思路与定位

在开始设计之前,我们对比了2017年至今的所有攻略页面,发现往年页面存在缺乏延续性、定位不清晰的问题。作为大促信息传达的先行军,往期的攻略反而更多承担了转化型的会场类任务,对于优惠信息的预告往往是轻描淡写地用文案带过。而每一次的攻略样式都是「船新版本」,也产生了较大的人力消耗。

然而尽管攻略的任务是信息传递,但作为整体大促链路中的一环,它终究还是需要为大盘GMV服务。那么应该如何平衡二者,以达成更好的数据效果呢?

如何让用户愿意逛愿意买?来看618站内攻略项目总结

首先,从攻略存在的核心意义——助力集团大盘GMV的提升出发,它需要达成以下几个目标:

  • 让用户愿意逛:让用户明白京东大促的节奏和玩法、并且在了解后有意愿参与;
  • 让用户愿意买:提供能提升用户购物欲望的决策信息;
  • 让用户养成习惯:当攻略持续为用户产生了用户价值后,就可以养成用户「来京东购物前先看攻略」的心智,从而更好地引导用户进行操作。

然而纵观大促会场全局,许多卖货会场也可以达成这些目标,那么站内攻略和它们相比有具有哪些差异性呢?我们可以从对内和对外两个角度进行分析:

对内差异化:从站内来看,「我的」和「AI助手」也都承担了向用户进行活动会场推荐的功能,但「我的」是围绕用户已有的操作展开管理和推荐,是绝对精准的量身打造,「AI助手」是理性层级下的导购,需要用户先产生「想法」,再指导操作;站内攻略则是引导用户未来行为的指导和说明,先组织、筛选促销信息,再使用户产生「想法」,从而产生操作,有一定「逛」的性质。

如何让用户愿意逛愿意买?来看618站内攻略项目总结

对外差异化:从站外来看,站内攻略的定位与「什么值得买」有些近似。相比之下,站内攻略的优势则在于它能更紧密地围绕京东用户的消费习惯进行定制化推荐,和近年来以长图为主的阿里系攻略相比,则提供了更为丰富的操作(如预约),一定程度上能减少用户的记忆成本。

基于以上基础,我们对往年攻略的用户画像进行分析,并对攻略进行了横向与纵向的对比,总结出了攻略作为一个长线产品视角下的迭代思路,并根据攻略的特性制定了分时期的北极星指标:提升预热、专场期的预约加购率、提升全时期的活动分流以及提升高潮期的商品转化。那么我们又是如何根据这三个指标来拆解细分策略的呢?

如何让用户愿意逛愿意买?来看618站内攻略项目总结

2. 提升预约加购——日历优化

交互层面:动效辅助内容聚焦

作为站内优惠信息的聚集地,如何清晰简洁传达内容,一直是交互侧需要重点思考解决的难题。于是在本次攻略中,我们对比了往期攻略中的预告样式,在数据表现较好的日历样式基础上,对页面的层级进行了进一步的简化,配合动效的引导操作,以便用户能够更聚焦地浏览日历部分的核心内容:

如何让用户愿意逛愿意买?来看618站内攻略项目总结

视觉层面:视觉层级清晰

经过对交互稿的分析理解,以下3个痛点,对此次页面的信息层级和画面舒适度是一个考验:

  • 内容信息较多:为了提升预约吸引力,这次在单日预告内露出了更多的BI单品,同时增加了预约瓜分京豆的玩法,所以这次首屏的内容信息和双11相较而言,是有所增的。
  • 日历展示状态增加:日历尝试了新的交互样式,有展开和收起两种状态。
  • 卡片颜色多:为了让用户感知到每日主题的差异,日历卡片的颜色会根据每日主会场的主题颜色相呼应。

那么如何通过视觉的手段,让视觉层级清晰展示且画面颜色和谐呢?下面从最基础的视觉构成里的构图和色彩两方面进行分析并落地:

「构 图」整体用方形进行构图和内容分割

方形是最简洁的几何形态,对于信息量较大的页面,方形会让设计空间利用最大化,并且可以排除形态上的干扰,结构清晰的展示信息内容,让用户通顺的浏览页面。

简化视觉层级

在交互稿上,瓜分京豆模块和日历选择器两部分内容划分较为明显,但所留出的空间,会增加视觉层级的复杂度。为了尽量简化视觉层级,找交互同学商量是否可以在保持内容划分清晰的情况下,把瓜分京豆模块背景和日历选择器拉通,同时,也咨询了前端同学,视觉这样处理在实现上是否会有问题。最终,三方达成一致后,采用了视觉最终呈现的方案。

如何让用户愿意逛愿意买?来看618站内攻略项目总结

「颜 色」

为了更好的覆盖618全时期,挑选了色环上三种距离基本相等的色彩进行从暖色到冷色的色相渐变。

如何让用户愿意逛愿意买?来看618站内攻略项目总结

  • 头图运用了较为清透的黄色至红色的暖色渐变,适用于618全时期,体现了大促的热闹氛围;
  • 头图过渡到日历选择器,则是运用了从头图的红色渐变至紫蓝色,这样既能让选择器的文字信息清晰识别,也能将头图和日历选择器两部分内容进行自然的分割,减少了线面分割所带来的复杂层级关系;
  • 瓜分京豆模块的颜色则选用了偏中性的黄色,这样一来和每日不同颜色的卡片搭配和谐,二来和头图有所呼应,整体画面色彩保持平衡。

如何让用户愿意逛愿意买?来看618站内攻略项目总结

前端层面:复杂交互动画与跨平台功能适配

关于选中移动动画

如何让用户愿意逛愿意买?来看618站内攻略项目总结

日历选中动画部分我们需要实现的一种跟随移动的效果,那么我们需要考虑的是在当前日期是有可能去到任何一个可点击日期的位置。

实现方式:

用纯css方式控制,方块使用背景图的方式实现,通过控制类名移动位置,比如.move-[start]-[end],缺点:需要写好每个日期对应到其它日期的位置,不够灵活

用js控制。把日期看成一个棋盘格子,每个格子都占相同的坑位大小。我们把当前日期看作a,移动至日期看作b。假设把a移动至b的横向占格子数设为n,把a移动至b的纵向占格子数设为m。那么n=当前下标 % 行个数,m=当前下标 / 行个数取整。那么a移动到b的x = w * n,y = h * m (w为格子宽度,h为格子高度)。

注:宽度获取使用block.getBoundingClientRect().width;clientWidth会忽略小数位

  • 关于展开收起动画,半圆实现:
  • 可以使用clip-path
  • 我的实现方法为使用border-radius+height实现,半圆的弧度使用两倍大圆取其部分圆弧显示,展开收起实现使用高度修改:在低端机会略卡,因为每次使用会引起页面重绘(有待探讨优化)
  • 使用svg,canvas等
  • 关于app预约,小程序预约
  • app预约采用的是京东app日历预约,用户开启手机日历(写入)权限后,预约就会写入用户的手机日历,在活动开始前会以日历提醒的方式提醒用户。
  • 小程序预约走的是微信大账号提醒流程,预约需要分三步进行:预约-> 授权 -> 上报授权状态。进行完上述步骤后,用户会在活动开始前10分钟左右通过大账号(已关注用户)或服务通知(未关注用户)收到消息

2. 提升活动分流——福利秘籍

提升筛选效率

如何让用户愿意逛愿意买?来看618站内攻略项目总结

福利秘籍专区作为大促期间福利互动活动的集中地,承担了为互动分流,为用户提供快速查找筛选可参与活动的任务。而互动往往存在较为复杂的规则,对用户而言存在较高的理解成本。此次除了集团主推的互动,又增加了对于事业部互动的展示,对于保证页面展示效率也带来了一定的挑战。通过对往期迭代内容进行数据对比,同时参考其余会场对于多信息展示的策略,最终我们采用了BI展示,同时对用户弱相关的互动卡片进行折叠的方式提升页面的效率;而在卡片的信息展示上,选择重点突出活动可得的利益点,让用户一眼即可筛选出对自己最有价值的互动进行参与。

视觉创新优化

虽然运营同学对双11的秘籍视觉比较认可,但是仍然提出了希望有秘籍形式感的同时,能进行视觉创新的诉求。经思考后,我认为运营的诉求无法满足:

  • 视觉风格和618大促整体风格保持统一;
  • 能体现秘籍感的视觉表现手法有限;
  • 视觉创新的前提是要保证信息清晰的展示给用户;

于是带着以上3点找运营同学再次沟通清楚对方的真正诉求到底是什么,经沟通,对方最重要的诉求是希望有视觉创新,秘籍形式感诉求较弱。接下来针对重要诉求集中发力,并结合此次618视觉概念(光点、光线),找到了视觉创新优化的解决方案,并和运营达成了一致。

「构图」

上面提到了方形可以排除形态上的干扰,考虑到活动入口图数量较多,且氛围图不可把控,左侧以方形构成,右侧结合了618主图形——光线,把文字和氛围图分开,让各部分信息更加聚焦。

如何让用户愿意逛愿意买?来看618站内攻略项目总结

「颜色」

结合双11用研结论——活动入口主题不够鲜明,除了活动文案类似的因素,我认为颜色也是影响因素之一。所以这次在上部分平台级活动入口,采用了2种暖色的近似色交替构成,下部分事业部活动入口,统一采用了1种和上部分近似色的冷色构成;单个活动入口,文字和氛围图的背景进行统一色相的明暗深浅变化。从整体楼层来看,从上至下,由暖至冷,不仅活动主题有了明显差异化,而且较好的过渡到下一楼层;从单个活动入口来看,左右深浅颜色的划分,不仅对不可把控的氛围图适应性更强,且主题文案更加明显。

如何让用户愿意逛愿意买?来看618站内攻略项目总结

「表现形式」

整体页面在按钮的部分采用新拟态风格,在保证吸引力的同时,也减少了颜色过多的问题,减少了信息层级。新拟态风格更适合工具功能类产品,本次只尝试使用在了页面的按钮部分,风格上也会有眼前一亮的感觉。

如何让用户愿意逛愿意买?来看618站内攻略项目总结

3. 提升商品转化——今日导购

分时期变化的楼层策略

针对高潮期的转化指标,我们参考了往期的迭代经验,发现随着大促节奏的渐进,临近高潮期时,页面的转化模块表现往往有较大的提升。于是在本次设计中,我们针对这个数据表现,对楼层顺序进行了动态调整,高潮期将转化楼层前置,以更好地匹配不同时期的用户需求。

如何让用户愿意逛愿意买?来看618站内攻略项目总结

同时根据往期的楼层数据表现,本次我们也延续保留了数据表现较好的模块类型,例如增加了榜单的露出,以辅助页面目标的达成(以下数据来自于lan.jd.com)。

楼层整体化、内容吸引力包装

基于之前今日楼层视觉整体感较弱的问题,这次楼层背景色和页面背景色有所区分,楼层内模块颜色和楼层背景色同色,较往期此楼层来看更加整体化,又能让页面层级更加清晰。

如何让用户愿意逛愿意买?来看618站内攻略项目总结

其中,针对这次品牌入口和上海美影厂IP形象结合的策略,为了提升用户吸引力,且不干扰信息内容的前提下,视觉上采用了和用户共情,且和IP形象契合的元素——老电视机,同时按钮文案也进行场景契合的包装,增加趣味性。

如何让用户愿意逛愿意买?来看618站内攻略项目总结

项目成果

与往期站内攻略对比,本次618站内攻略主要在以下方面有较为明显的提升:

品牌视觉契合及创新

在延续主视觉元素的同时,视觉风格有所创新,在页面的按钮部分采用新拟态风格,减少颜色过多而导致的复杂信息层级问题,同时也保证了视觉吸引力

视觉精致程度

整体页面颜色较有节奏,且更加清透舒适

元素细节(打光、投影等)的刻画更加精致

信息层级清晰度

通过对颜色的合理规划,有主次的文字信息,让单个楼层更整体化,各楼层模块划分清晰

如何让用户愿意逛愿意买?来看618站内攻略项目总结

数据表现

根据上线后的表现,本次福利互动模块的点击数据获得了显著的提升,今日模块的点击转化率相比往年也获得了成倍的增长,页面目标基本达成。

项目沉淀

1. 好的经验

针对攻略这类规律性存在的活动会场,我们可以针对其主要的功能组成模块进行数据导向的设计与迭代,来更好地指导后续的优化方向;同时也可以辅助业务侧更加清晰地规划会场定位,提升页面对用户以及大促的整体价值。

2. 如何沟通

Q:需求方一味的追求热闹复杂的视觉样式创新,该怎么办?

A:热闹的氛围对于大促活动来说固然非常重要,但也要根据页面类型去判断(重氛围or重信息)。设计师要倾听诉求并搞清诉求的根本原因,并用专业的角度判断诉求的合理性,以及价值大与否。热闹氛围塑造的前提是不能影响信息的识别,否则就会本末倒置,并且热闹氛围的视觉样式要和该场景逻辑匹配 。

3. 待优化项

虽然本次页面大部分模块基于产品化的思路迭代均获得了一定的正向反馈,但产品的发展往往是个曲折上升的过程,活动会场也不例外。结合上线后反馈,站内攻略依然有以下可优化点:

日历操作体验

根据用研结果显示,日历操作体验问题反馈较多,日历模块为滑动改变日期,而非点击跳转日期的操作方式,与用户的认知不符,且首屏动效较复杂,在安卓机型上体验较为卡顿。后续如有同样的交互方式,需优化操作体验。

福利互动入口主题文案

根据用研反馈,主题文案描述不直观,不易理解,导致用户容易滑过整个模块。建议后续活动主题能简单清晰的描述优惠和玩法。

综上,未来站内攻略需要进一步探索主要功能模块对用户的价值,探索其在大促链路中独特的差异性;同时保留高用户价值模块并持续优化,以求达到更好的用户体验,用设计策略为用户与业务带来更多的价值。

文章来源:优设    作者:JellyDesign

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


版式设计-文字

雪涛

今天的这篇文章也将围绕着「文字」展开,相信大家看完后会对「文字」有一个全新的了解,也将明白文字对于版面的意义是巨大的,处理好它,基本上你的版面也就编排的差不多了。好了,下面我们开始今天的内容吧。

高手的版式三部曲系列:文字篇

首先来看几张不同类型的海报,第一张文字占比较高,第二张图片占比较高,第三张文字与图片占比是五五开。

然而不管是属于哪种类型的,它们的核心目的都是在传达信息。因为对于一张海报来说,我们不光会看还会去阅读它们。

高手的版式三部曲系列:文字篇

平面设计就是通过文字来「说话」的。

高手的版式三部曲系列:文字篇

而在广告设计中,图片的占比会非常高,因为广告多以图片为主,通过图片我们能大致的猜测出设计师想要表达的东西是什么。

高手的版式三部曲系列:文字篇

总结一下:广告设计多以图片为主,意在通过图片传达概念;而平面设计则多以文字或图片为主,意在通过文字传达信息。

高手的版式三部曲系列:文字篇

那么作为信息传达的载体,字体就显得格外重要了。下面我会从字体的分类、字体的搭配、字体的气质与设置细节着手,慢慢带领大家去认识字体,首先我们来看看字体的分类都有哪些。

高手的版式三部曲系列:文字篇

中文字体大致可分为:黑体、宋体、圆体、书法体与卡通体等。

高手的版式三部曲系列:文字篇

其中书法体又细分为:楷书、行书、草书与隶书等。

高手的版式三部曲系列:文字篇

在列举的这些字体中,最常用就是:黑体、宋体和圆体,而在书法体中,最常用的是楷书与行书。为什么说这些字体常用呢?因为在许多优秀的设计作品中,这些字体的出现概率都非常高,尤其是黑体与宋体。

高手的版式三部曲系列:文字篇

下面说一下英文字体,大致可以分为:衬线体、无衬线体、手写体与展示字型等。

高手的版式三部曲系列:文字篇

其中最常用的就是:衬线体与无衬线体。理由与中文一样,它们也是使用率很高的字体,其次还有一个原因就是在以中文为主的设计中,它们与中文字体搭配起来比较契合。

高手的版式三部曲系列:文字篇

拿黑体来说,与之搭配的英文字体就是无衬线体,因为它们的笔画特征相似度很高。

高手的版式三部曲系列:文字篇

宋体搭配的就是衬线体,因为宋体的笔画特征是有粗细变化且有装饰线,而英文的衬线体也刚好有与之相似的地方。

高手的版式三部曲系列:文字篇

而圆体则是搭配拥有相似特征的无衬线体。

高手的版式三部曲系列:文字篇

因为常用的书法体通常使用毛笔书写,所以在笔画特征上没有与之相匹配的英文字体,大多数时候我们会选择用衬线体来搭配,具体原因我会在后面的字体气质环节为大家讲解。

高手的版式三部曲系列:文字篇

虽然也有别的搭配方式存在,但我给大家提供的这些都是最常用和最安全的。说完字体搭配问题后,下面我们来看看这些字体,所包含的气质又有哪些。

高手的版式三部曲系列:文字篇

首先是黑体,它具有科技感与现代感,这是由它简洁干练的笔画特征决定的。

高手的版式三部曲系列:文字篇

其次黑体也能表现出运动与时尚的感觉,因为运动与时尚本就是偏现代的词汇。

高手的版式三部曲系列:文字篇

接着是宋体,它具有文化与历史的气质,这个比较好理解。

高手的版式三部曲系列:文字篇

而除了能表现出历史与文化感之外,宋体还能表现出清新与雅致的感觉,这是由宋体的笔画特征决定的,横细竖粗且末端带有装饰,与优雅精致的感觉十分契合。

高手的版式三部曲系列:文字篇

圆体的特点也是非常明显的,在看到它时脑海中的第一印象就是可爱与卡通。

高手的版式三部曲系列:文字篇

除了刻板印象外,圆体那种圆滚滚的笔画给我们的感觉还有安全和易亲近,所以圆体也能用来表现儿童与温暖感觉的题材。

高手的版式三部曲系列:文字篇

一说到书法体,能直接联想到的关键词就是传统与历史,因为书法的演变就是我们汉字发展的轨迹。然后我们回过头来讲一下,为什么书法体可以和西文中的衬线体搭配。

高手的版式三部曲系列:文字篇

原因就在于衬线体也具备书法体的某些气质,比如传统、文化、历史等。与书法体在早期的东方一样,衬线体在早期的西方也是主要的字体之一。

高手的版式三部曲系列:文字篇

温暖、人情味儿,说到书法体可能很难联想到这两个词,但是书法体确实具备这种气质。跟黑体这种棱角分明的字体相比,书法体是手写出来的,它的笔画特征给我们的感觉就是有「温度」的。

高手的版式三部曲系列:文字篇

在字符面板中,除了选择字体与改变字号以外,这两个区域相信大家用的还是比较多的,它们分别是:行距设置与字距设置。

高手的版式三部曲系列:文字篇

拿行距来说,在使用时有几个比较常用的设置方法,比如用当前文字的字号乘以1.2、1.732或是2。不过,通过这个方法所算出来的数值只是一个参考,也就是说你可以在这个基础上做些调整。

高手的版式三部曲系列:文字篇

比如:在计算出的数值的基础上进行递增或是递减,这时你要做的就是用眼睛去观察,觉得大了就减少一些,觉得小了就增大一些。

高手的版式三部曲系列:文字篇

其中,用字号乘以1.2适用于标题。

高手的版式三部曲系列:文字篇

比如上方那个标题的字号是40pt,那么行距的数值就是用40乘以1.2等于48。下方这个是在此基础上做的一个调整,稍微增大了一些行距。

高手的版式三部曲系列:文字篇

字号乘以1.2适用于标题,而用字号乘以1.732或2则更适用于小字号的文字,比如内文。

高手的版式三部曲系列:文字篇

上方是用字号乘以1.732的例子,字号是9pt,用它乘以1.732得出来的数值是15.588,四舍五入取个整数得到的行距就是16,下方这个是用字号乘以2得到的效果。

高手的版式三部曲系列:文字篇

大多数情况下我建议大家用字号乘以1.732的行距,大小比较适中。

高手的版式三部曲系列:文字篇

跟行距不同的是,基本上来说字距是无需调整的。当然还是那句话,要靠自己的眼睛来衡量,如果你觉得字与字之间离的很近的话,那么可以增大一些字距,反之,则可以减小一些。

高手的版式三部曲系列:文字篇

高手的版式三部曲系列:文字篇

其次就是,当你遇到一些偏轻松慢节奏的设计,比如典雅清新类的文学小说时,就可以适当的增加一些字距来营造这个感觉。

比如这两张海报,左边的是经典的居中结构,右边的是包围结构,构图都是可以的没有任何问题,但为什么看起来还是怪怪的呢?因为文字组没有刻画好。

为了让大家能更深刻地体会到文字组对于版面的意义,修改了这两张海报,其中构图不变只改文字组。

高手的版式三部曲系列:文字篇

这个修改前后的对比还是非常直观的,可见文字组对版面的影响有多大。如果说构图是版面的骨架的话,那么文字组就是版面的五官,骨架再好五官不行结果也是可想而之的。

高手的版式三部曲系列:文字篇

文字组分为:左对齐、居中对齐、顶对齐以及两端对齐。

高手的版式三部曲系列:文字篇

其中与左对齐与顶对齐对应的有:右对齐与底对齐。

高手的版式三部曲系列:文字篇

给大家找了一些各种对齐方式的案例。这是左对齐的形式。

高手的版式三部曲系列:文字篇

这是右对齐的形式,与左对齐相比右对齐属于不常用的对齐方式,主要是出于易读性的考虑,但并不是说不能用。

高手的版式三部曲系列:文字篇

这是居中对齐的形式,最经典的对齐方式之一。

高手的版式三部曲系列:文字篇

这是顶对齐的形式,是文字竖排时最常用的对齐方式。

高手的版式三部曲系列:文字篇

这是底对齐的形式,跟顶对齐相比也是属于不常用的对齐方式。

高手的版式三部曲系列:文字篇

最后是两端对齐的形式,横排与竖排都可以使用这种对齐方式。

高手的版式三部曲系列:文字篇

如果作品看得足够多,应该见过这种形式的组合,它同时包含了多种不同对齐方式,我们称其为「对齐组合」。

高手的版式三部曲系列:文字篇

比如我们可以借鉴结构,以这个文字组为例,它的结构是这样的:两端对齐、中间的文字字号大,上下的文字字号小,按照这个套路我们来试着做一个组合。

高手的版式三部曲系列:文字篇

在编排前,我们先阅读一下文案,通过文字可以得知,这是一个与篮球明星有关的内容,气质上来说会偏现代一些。

高手的版式三部曲系列:文字篇

所以字体可以选择一款黑体,英文部分则搭配一款无衬线体。

高手的版式三部曲系列:文字篇

根据之前总结到的这些特征,下面就可以开始编排文字了。

高手的版式三部曲系列:文字篇

按照那个组合的套路,我们先将两端对齐中较大字号的文字给编排出来,而标题信息无疑是非常适合用来放大的。

高手的版式三部曲系列:文字篇

接着再将上方和下方的小字号文字给编排出来。

高手的版式三部曲系列:文字篇

其中要注意的就是这段文字的行距,我参考了logo的高度来进行设置。而整个组合中,字距是基本没有进行调整的。

高手的版式三部曲系列:文字篇

值得一提的是,在两端对齐的文字组中,这种小大小的形式非常好用。因为它的节奏变化丰富,所以大家在做两端对齐的文字组时不妨试试。

高手的版式三部曲系列:文字篇

这就是借鉴结构的效果了,精髓在于要多去分析别人的形式与套路,并从中获取做组合的灵感。除了能借鉴结构之外,我们还可以借鉴标题字数+结构,是什么意思呢?

高手的版式三部曲系列:文字篇

以这个组合为例,它的标题有7个字,整个组合是由顶对齐与两端对齐构成的一个对齐组合。

高手的版式三部曲系列:文字篇

它的组合结构为小中大,按照这些特点我们来尝试借鉴。

高手的版式三部曲系列:文字篇

这是要用到的文案信息,通过阅读文案可以得知,这是一个关于炸鸡套餐的内容。

高手的版式三部曲系列:文字篇

通过去看kfc的各种物料,发现运用黑体的场景还是比较多的。

高手的版式三部曲系列:文字篇

所以,在字体搭配上选择用黑体与无衬线体。

高手的版式三部曲系列:文字篇

根据之前总结到的这些特征,下面就可以开始编排文字了。

高手的版式三部曲系列:文字篇

按照小中大的特点,依次将信息给编排出来。

高手的版式三部曲系列:文字篇

完成后可以在组与组之间,添加一根小线段用于连接,以起到过度的作用,如果大家现在回过头去看原图的话,也能发现这一特征。

高手的版式三部曲系列:文字篇

其中,标题的行距就是用标题的字号乘以1.2算出来的。

高手的版式三部曲系列:文字篇

字距我也做了调整,因为默认0的字距看上去有些拥挤。

高手的版式三部曲系列:文字篇

可以看出跟原图相比,在不破坏组合结构的情况下,针对文字信息的编排是做了些调整的,比如:原稿最左侧是两行顶对齐的小文字,在借鉴时将它换成了logo,因为我们是要借鉴它的结构,而不是为了跟原稿做的一模一样,具体还是要根据我们的内容来合理编排。

高手的版式三部曲系列:文字篇

首先我们来看这张图,一个标准的两端对齐、组合结构与之前那个是一样的,中间的字号大,上下的字号小。

高手的版式三部曲系列:文字篇

除去这些外还有一个小特征就是,在大字号中间还有一层小字号的文字。

高手的版式三部曲系列:文字篇

接着我们再来看这张图,它的特点就是图片叠压在了文字的上方。至于它的结构我们可以不用考虑,因为结构已经找好借鉴了。

高手的版式三部曲系列:文字篇

这是要用到的文案与图片。通过文字可以得知,这是一个关于介绍昆虫的图书,且配有一张插图。这个插图的风格是手绘形的,偏写实一些没有那么的卡通。

高手的版式三部曲系列:文字篇

结合这些特点我选择的字体搭配方式是,宋体配衬线体。

高手的版式三部曲系列:文字篇

因为字体搭配这部分我又借鉴了一些相关风格的书,发现它们的字体搭配方式用宋体比较多。

高手的版式三部曲系列:文字篇

分析完文案找到字体搭配方式后,在结合之前总结的一些组合特征,我们就可以开始编排了。

高手的版式三部曲系列:文字篇

先将中间比较大的那层文字给编排出来,然后在它中间处置入一个小字号的文字。

高手的版式三部曲系列:文字篇

中间层编排完成后再来编排上下层的文字,字号不用太大,整体注意好两端对齐。

高手的版式三部曲系列:文字篇

调整字距的地方有两处,首先是标题,调整的原因在于默认值我觉得有些小了,其次是标题中间的那行文字,调整它的原因在于不想字号放太大。

高手的版式三部曲系列:文字篇

因为是两端对齐的结构,不调整字距的话。标题中间那行文字只能通过放大字号来达到目,然而这个效果并不是我想要的。

高手的版式三部曲系列:文字篇

综合考虑,选择了这个,最后,把图片置入进去叠压在文字的上方。

高手的版式三部曲系列:文字篇

图叠压在文字上有一个无法避免的问题就是,被压住的文字会出现无法识别的情况,英文还好但是中文却不行,因为在这个组合中,中文是用来阅读的文字,英文仅充当装饰用。

高手的版式三部曲系列:文字篇

既然中文是重要的信息,那为什么还要去遮挡它呢?因为有提示,通过这两个字你也能猜出来被压住的文字是什么。

高手的版式三部曲系列:文字篇

这就是借鉴结构+表现手法的例子,多一张图片的加入,混合借鉴后的效果与原稿的相似度就会降低。

高手的版式三部曲系列:文字篇

下面我们来看这张图,它既有顶对齐又有两端对齐的感觉,像这种组合我将它称为顶部两端对齐。

高手的版式三部曲系列:文字篇

它的组合结构也是一个小大小的形式。

高手的版式三部曲系列:文字篇

分析完上一个组合后,再来看看这个组合,值得借鉴的地方有两处,首先就是整体的结构,其次就是字体搭配。由于已经借鉴了上一个组合的结构,所以这个组合要借鉴的就是字体搭配。

高手的版式三部曲系列:文字篇

在原图的这个字体搭配中,英文是最好判断的,这个字体是衬线体,中文则比较陌生了,既不像黑体也不像宋体。

高手的版式三部曲系列:文字篇

感觉是被设计过的,不像是字库里的字体,我通过观察发现,它既有宋体横细竖粗的笔画感觉,又有黑体干净利落的特征。

高手的版式三部曲系列:文字篇

所以,我在字库字体中找到了一款具有类似感觉的字体:姚体。

高手的版式三部曲系列:文字篇

在字体搭配上选择用姚体搭配衬线体。这里需要强调的一点是,在挑选字体借鉴的过程中已经考虑到了与文案的气质相匹配的问题,下面我们就来看看文案。

高手的版式三部曲系列:文字篇

标题叫「遇见你之前」,给人的感觉比较文艺,而姚体我们前面也分析过了,它是具有宋体特征的,而且笔画细长,整体给人的感觉就是比较文艺的。

高手的版式三部曲系列:文字篇

分析完成后,结合之前总结的组合特点就可以开始编排了。

高手的版式三部曲系列:文字篇

第一步,还是按照小大小的感觉将组合给编排出来,注意好顶部两端对齐。

高手的版式三部曲系列:文字篇

接着在组与组的缝隙处加入线条就完成了。

高手的版式三部曲系列:文字篇

在这个组合中标题的行距与字距,默认状态下是左边这样的,字距还好,行距却非常大,这个时候你就不能套用之前讲到的倍数去算行距了。那样行距只会越来越大,所以这里我们要根据视觉效果来调整。

高手的版式三部曲系列:文字篇

这样,一个借鉴结构+字体搭配的例子就完成了。

高手的版式三部曲系列:文字篇

这是要用到的文案与图片素材,首先,老规矩分析一下文案,选择与之契合字体。书名叫《流星之绊》,还是比较文艺的。

高手的版式三部曲系列:文字篇

根据这个书名,搜索了一下原书的样子,在这三个不同的版本中,所感受到的气质有:温情和雅致,在字体的选择上与之较为契合的有:书法体与宋体,这两个字体的选择在这三个不同的原版本中也都有体现。

高手的版式三部曲系列:文字篇

打算用宋体,与其搭配的英文首选就是衬线体了。

高手的版式三部曲系列:文字篇

这是第一个要借鉴的对象,可能有人会说这不像文字组,这确实不是文字组,但并不代表它不能被联想成文字组。

高手的版式三部曲系列:文字篇

高手的版式三部曲系列:文字篇

比如它的结构是由一个顶对齐与一个左对齐构成的对齐组合,而且下方的那个左对齐文字是放在了顶对齐的负空间处的。

高手的版式三部曲系列:文字篇

其次,顶对齐的文字字号较大,下方左对齐的文字字号较小。

高手的版式三部曲系列:文字篇

这就是根据那张图所总结出的一些组合特征,下面我们就根据这些特征来编排文字。

高手的版式三部曲系列:文字篇

先排出顶对齐的文字,然后在其负空间处置入左对齐的文字信息。

高手的版式三部曲系列:文字篇

排到这发现右下角还有块小缺口,既然是要做一个对齐组合的话,那么就要把它填满。

高手的版式三部曲系列:文字篇

关于顶对齐的中间部分为什么要这么做,是因为标题的字数不足以作出顶对齐的感觉,为了解决这个问题,选择重复了一次标题并且将它的笔画打散了,而打散的灵感来源于「流星」,它们就像流星一样散布在天空中,不知道什么时候就会掉落下来。到这为止是书封的上半部分,下面我们来编排下半部分。

高手的版式三部曲系列:文字篇

这是要用到的借鉴图,它也是一个由顶对齐与左对齐构成的对齐组合。

高手的版式三部曲系列:文字篇

除了这个外它顶对齐部分的文字跟左对齐的比,也是属于较大的。

高手的版式三部曲系列:文字篇

这是从那个组合中,总结出的组合特征,与上一个几乎一样。

高手的版式三部曲系列:文字篇

按照总结出的组合特征,将文字给编排出来。

高手的版式三部曲系列:文字篇

其中顶对齐与这段左对齐的文字,它们的行距是用字号乘以1.732算出来的,字距则是做了些微调整,因为当文字缩小后,它的字距在视觉上看着也会变小,所以我在默认0的基础上将字距增加到了50。

高手的版式三部曲系列:文字篇

这就是根据那两张图片所借鉴出来的文字组了,下面把它们置入进版面中。

高手的版式三部曲系列:文字篇

整体是一个上下结构的,这种类型在构图中属于上下构图。这也是为什么会找那两张图来当参考的原因,因为提前已经考虑好了构图。

高手的版式三部曲系列:文字篇

接下来做烘托氛围的工作,先把底色换成夜空的黑色,然后配上图片。

高手的版式三部曲系列:文字篇

接着更换字体的色彩恢复识别性,其中黄色的部分是为了与白色部分做区分。

高手的版式三部曲系列:文字篇

然后给腰封换上色彩以恢复下方的文字的识别性,再挑选一些信息,在它们的下方配上黄色,目的是为了与上方的色彩做呼应。

高手的版式三部曲系列:文字篇

最后,将书脊编排出来,这个案例就编排完成了。

高手的版式三部曲系列:文字篇

以上就是版式三部曲之文字篇的所有内容了,回顾一下,由两个部分组成。第一部分是:字体的分类、字体的搭配、字体的气质与设置细节。具体包括:字体有哪些不同的类型、在选中字体的类型后,要如何选择与之搭配的英文字体。字体气质主要讲的是,不同类型的字体都有哪些味道,它的意义在于当你确定好项目的风格后,可以根据不同字体的气质,快速的找到与项目定位契合的字体。

文章来源:优设    作者:研习设

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


「上下构图」的排版技巧

雪涛

构图是在有限的空间内把文字、色彩、图形等元素结合起来构成画面,使作品不仅具有美感,还能清晰表达设计者的目的。不同构图能使画面产生不同的视觉变化,进而给观者带来不同的心理感受。同的心理感受。本期分享的是上下构图的使用方法,此构图形式具有良好的视觉效果,也比较容易掌握,是非常实用的构图方式。

什么是上下构图

上下构图形式是将版面分割为上下两部分,或让画面中的元素整体呈现出上下的分布趋势,主空间承载视觉点,次空间承载阅读信息,呈现的视觉效果平衡而稳定。

用超多案例,帮你掌握「上下构图」的排版技巧

最典型的上下构图由「上图下字」或者「上字下图」两部分构成,图片及文字各占据一部分,互不干预,能清晰明了的传达出版面的信息。

用超多案例,帮你掌握「上下构图」的排版技巧

主空间还经常使用图形化的标题文字充当画面主体,可以很好解决画面缺少图片层级的问题。

用超多案例,帮你掌握「上下构图」的排版技巧

上下构图空间划分比较固定,为了得到丰富的视觉效果和良好的设计感,需要通过精心设计的编排来丰富版面的视觉效果。比如文字的横竖排版,元素之间的对比、点线面的运用、巧妙的留白等。

用超多案例,帮你掌握「上下构图」的排版技巧

构图比例

进行上下构图设计时,可以根据版面内容的信息体量划分画面的空间,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等。在设计时也可以反复进行调整,直到找到最为合适的构图比例。

1. 1:1分割

把画面平分为上下两部分,形成对称均衡的分割构成。

用超多案例,帮你掌握「上下构图」的排版技巧

1:1分割比例构成方式,多用于版面中两部分内容处于并列或对立的关系。

用超多案例,帮你掌握「上下构图」的排版技巧

2. 黄金分割

「黄金分割比例(1:1.618)」被认为是最具美感的分割比例,具有严谨的艺术性、和谐性,蕴藏着丰富的美学价值。

用超多案例,帮你掌握「上下构图」的排版技巧

在设计中有意识地运用黄金分割比例进行设计,可以营造出富有美感的版式效果。

用超多案例,帮你掌握「上下构图」的排版技巧

3. 白银分割

「白银分割比例(1:1.414)」是日本率先采用的一种分割比例,目前广泛运用在版式设计的布局中。

用超多案例,帮你掌握「上下构图」的排版技巧

与黄金分割相比,白银分割次空间占据的比例更大一些,能够承载的信息量也更多。

用超多案例,帮你掌握「上下构图」的排版技巧

4. 2:1分割

采用2:1的比例,图片主体在画面中占据主导地位,视觉焦点更清晰。

用超多案例,帮你掌握「上下构图」的排版技巧

主要的信息(标题)常融入图片中放在主空间成为画面主体,阅读性文字则放在次空间。

用超多案例,帮你掌握「上下构图」的排版技巧

5. 3:1分割

3:1分割的比例与2:1比例相似,但图片在画面中占据主导地位更强,主空间承载视觉点,次空间承载阅读信息。

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

通过比例,可以让版面分割更严谨。但没有那个比例关系绝对正确,需要根据画面的项目调性、信息体量、信息功能与图文主体而定。如使用其它比例分割的优秀案例:

用超多案例,帮你掌握「上下构图」的排版技巧

空间调整

把图文按比例分别编排在版面上下方,是比较严谨规范的构图方式,但是为了避免版面的呆板,可以通过调整版面空间变换出多种编排形式。如以下几个案例:

缩小图片和文字空间,使留白处形成外空间,增加层次感。

用超多案例,帮你掌握「上下构图」的排版技巧

在背景(绘画作品)上重新划出新的空间,形成内外空间对比,既丰富了画面层次,又让版面变得生动有趣。

用超多案例,帮你掌握「上下构图」的排版技巧

通过图片文字的错位排版和负空间的巧妙留白,让原本呆板的上下构图变得灵活多变,充满个性。

用超多案例,帮你掌握「上下构图」的排版技巧

让图片位置重心偏移,打破均衡稳定的构图形式。标题的破图处理,也增加了版面的灵活性与丰富性。

用超多案例,帮你掌握「上下构图」的排版技巧

在上方空间上划分出新的空间,这样的手法可以很好让空间具有多变性,也可以让我们的设计更加灵动。

用超多案例,帮你掌握「上下构图」的排版技巧

灵活运用

上下构图的框架看似比较固定,但是也能通过设计手法,变换出多种编排形式,巧妙破除上下分割的单一性与呆板感。

1. 曲线分割

把生硬的直线改为呈现出动态的曲线或斜线进行画面的分割,版面显得更生动活泼。

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

2. 图片裁切

把方形图片裁切为其他形状,使上下构图没有明显的分割线,也可以呈现出良好的视觉效果。

用超多案例,帮你掌握「上下构图」的排版技巧

3. 文字破图

使用文字串联起上下两个空间,破除上下构图版面的单一性。

用超多案例,帮你掌握「上下构图」的排版技巧

4. 元素串联

利用图形、色块等元素串联空间,让主次空间建立起联系,具有丰富的视觉效果和良好的设计感。

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

5. 图片退底

把图片主体进行退底处理,重新营造场景,弱化空间的分区。

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

6. 空间留白

使用留白破除两个空间的间隙,拉开画面的空间感,具有良好的视觉效果。

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

总结

  • 上下构图是将版面分割为上下两部分,或让画面中的元素整体呈现出上下的分布趋势,主空间承载视觉点,次空间承载阅读信息,呈现的视觉效果平衡而稳定,是非常实用的构图方式;
  • 进行上下构图设计时,可以根据版面内容的信息体量划分画面的空间,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等;
  • 为了避免版面的呆板,可以通过调整版面空间变换出多种编排形式;
  • 可以通过曲线分割、图片裁切、文字破图、元素串联、图片退底、空间留白等手法,变换出多种编排形式,巧妙破除上下分割的单一性与呆板感。
文章来源:优设    作者:艺海拾贝Design

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档