首页

关于Vue中的slot的理解

seo达人

今天在做vue项目的时候,遇到一个问题就是slot插槽的概念。这突然让我想起用过类似于element-ui前端框架时,用他们组件的时候接触过slot,如下图: 







这是element-ui对话框的api,当时我记得我百度过,就是这样写就ok了,当时也没深究。



<el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

  <span slot="title">

    我是对话框标题

  </span>

  <!-- 这边写对话框的内容 -->

  <span>我是对话框内容</span>

  <span slot="footer" class="dialog-footer">

    我是对话框footer

  </span>

</el-dialog>

效果是这样:







今天研究了,我就查看了源码:







百度的发现这边有两个概念:



1.单个插槽也叫匿名插槽



slot不带name,如下:



<slot></slot>

一个子组件只有一个匿名插槽,就好比对话框的内容没有被含有slot="xx"属性的标签包裹,那么就会替换掉匿名插槽



2.具名插槽



slot 有name,如下



<slot name='xx'></slot>

具名插槽就可以有多个,就好比对话框含有slot='header'属性的标签会替换掉子组件<slot name='header'></slot>


JavaScript杂记(杂而又杂)

seo达人

JavaScript杂记

JavaScript可以直接写入 HTML 输出流

JavaScript 能够直接写入 HTML 输出流中:



之间的代码行包含了 JavaScript: 您可以在 HTML 文档中放入不限数量的脚本。 脚本可位于 HTML 的 或 部分中,或者同时存在于两个部分中。 通常的做法是把函数放入 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。 6. 外部的 JavaScript 也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。 外部 JavaScript 文件的文件扩展名是 .js。 如需使用外部文件,请在

这个程序写的不好,因为它没有触法程序,不能体现JS的作用

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 console.log() 写入到浏览器的控制台。

console.log() 方法能够让你看到你在页面中的输出内容,让你更容易调试javascript;与alert相比,console不会打断你页面的操作,console里面的内容非常丰富,你可以在控制台输入 console。

您知道吗?

Note 程序中调试是测试,查找及减少bug(错误)的过程。

8. JavaScript 数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等:



var length = 16; // Number 通过数字字面量赋值

var points = x * 10; // Number 通过表达式字面量赋值

var lastName = “Johnson”; // String 通过字符串字面量赋值

var cars = [“Saab”, “Volvo”, “BMW”]; // Array 通过数组字面量赋值

var person = {firstName:“John”, lastName:“Doe”}; // Object 通过对象字面量赋值

9. Value = undefined

在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。



在执行过以下语句后,变量 carname 的值将是 undefined:



var carname;

10. Undefined 和 Null

Undefined 这个值表示变量不含有值。



可以通过将变量的值设置为 null 来清空变量。

11. 声明变量类型

当您声明新变量时,可以使用关键词 “new” 来声明其类型:



var carname=new String;

var x= new Number;

var y= new Boolean;

var cars= new Array;

var person= new Object;



JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。



JavaScript函数

在JavaScript中,函数即对象,可以随意地被程序操控,函数可以嵌套在其他函数中定义,这样可以访问它们被定义时所处的作用域中的任何变量。

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

<1>JavaScript 函数语法

函数就是包裹在花括号中的代码块,前面使用了关键词 function:



function functionname()

{

执行代码

}



当调用该函数时,会执行函数内的代码。



可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。



lamp JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

提示:function 中的花括号是必需的,即使函数体内只包含一条语句,仍然必须使用花括号将其括起来。



<2>带有返回值的函数

有时,我们会希望函数将值返回调用它的地方。



通过使用 return 语句就可以实现。



在使用 return 语句时,函数会停止执行,并返回指定的值。

<3>在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:



function myFunction(a,b)

{

if (a>b)

{

return;

}

x=a+b

}

如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。



<3>局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内访问它。(该变量的作用域是局部的)。

您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数能识别出该变量。

只要函数运行完毕,本地变量就会被删除。

局部变量比同名全局变量的优先级高,所以局部变量会隐藏同名的全局变量。



全局 JavaScript 变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。



JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。



向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

这条语句:

carname=“Volvo”;

将声明一个全局变量 carname,即使它在函数内执行。

13. JavaScript 作用域

作用域是可访问变量的集合。



在JavaScript中,能够定义全局作用域或者局部作用域。



HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

实例

//此处可使用 window.carName



function myFunction() {

carName = “Volvo”;

}



你的全局变量,或者函数,可以覆盖 window 对象的变量或者函数。

局部变量,包括 window 对象可以覆盖全局变量和函数。

也就是说全局变量可以覆盖全局变量,局部可以在局部作用域里面覆盖全局变量



JavaScript事件

JavaScript 事件

事件是可以被 JavaScript 侦测到的行为。

HTML 事件是发生在 HTML 元素上的事情。



当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为,也可以是用户行为。

HTML 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。

以下是 HTML 事件的实例:

HTML 页面完成加载

HTML input 字段改变时

HTML 按钮被点击

通常,当事件发生时,你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。

单引号:



双引号:

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件 描述

onchange HTML 元素改变

onclick 用户点击 HTML 元素

onmouseover 用户在一个HTML元素上移动鼠标

onmouseout 用户从一个HTML元素上移开鼠标

onkeydown 用户按下键盘按键

onload 浏览器已完成页面的加载

15. JavaScript 字符串

JavaScript 字符串用于存储和处理文本。



字符串长度

可以使用内置属性 length 来计算字符串的长度:



字符串属性和方法

原始值字符串,如 “John”, 没有属性和方法(因为他们不是对象)。

原始值可以使用 JavaScript 的属性和方法,因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

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

UI 工作流程指南:切图标注

资深UI设计者

当界面设计定稿之后,设计师需要对图标进行切片,提供给开发工程师。切图与标注是为了能够满足开发人员对于效果图的高度还原需求,直接影响到工程师对设计效果的还原度,并且也是设计师重要的输出物之一。合适、精准的切图可以最大限度地还原设计图,起到事半功倍的效果。

通常我们只需要对 icon 与图片进行切图即可,文字、线条和一些标准的几何形状是不需要切图的,例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可,开发工程师可以用代码实现这种效果。

切图基本规范

  1. 切图的尺寸必须为偶数;
  2. 同一模块内,切图大小应保持一致;
  3. 如果有背景,尽量用平铺的背景图案来设计(减少程序体积);
  4. 可点击的部件要把相关状态都切图输出,比如:正常状态、点击状态、不可点击状态;
  5. 输出的切图应当尽可能的压缩大小,以降低 APP 的总大小,提升用户使用时的加载速度(推荐在线压缩:https://tinypng.com);
  6. 所有的变形字体把它当成 icon 来切;
  7. 切图输出格式:png-24;
  8. 重复的东西只切一个。

切图输出类型

1. 图标切图输出

桌面图标切图输出

App 的桌面图标会被运用在很多不同的地方,比如手机桌面、APP store、手机的设置列表,所以 app 桌面图标需要很多个不同尺寸的切图输出。两个平台对应的桌面图标设计输出尺寸也不尽相同,在输出的时候要把双平台的尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可,手机系统会自动生成圆角效果。

系统图标切图输出

一套图适配双平台:iOS平台(iPhone 6plus版本除外)和安卓平台公用 44*44px 切图素材,即可实现一套切图适配两个平台的开发。

适配大屏幕:为了适配 iPhone 6plus、iPhone 7plus,单独切一套比原有 44*44px 切图大 1.5 倍的切图,即 66*66px 大小的切图。

APP内功能图标

图标是可以有留白区域的,建议图标尺寸尽量不要过多。

2. 图片类切图输出

图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的尺寸大小,以便于工程师开发使用。另外一般这些切图的文件较大,在切图过程中需要控制切图文件的大小。

全屏类切图

局部类切图

3. 动效元素切图

动效元素切图一般是指在 app 中加载动效所需要的切图元素。

gif 动图切图一般分为三种:

一是只需要给到 gif 图动效的部分即可。

△ 城易logo

二是,导出序列图片压缩打包给开发人员。

三是导出 json 。

Airbnb 开发了一款动效神器:Lottie,这是一个将 After Effects 动画提供给任意一个 iOS,macOS,Android 还有 React Native 原生 APP 的文件库。这些动画通过一个叫 Bodymovin 的开源 After Effects 插件,以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。

相关链接

如何导出json动画文件

打开 AE,首选项 – 常规,将允许脚本写入文件和访问网络选项勾选上。

窗口 – 扩展 – Bodymovin,选择好合成和保存路径后,点击 Render 导出 data.jason 文件,再把该文件交给 iOS 开发 (其他同理),具体如下图:

这里设置选择 Demo ,可以导出 html 文件,在浏览器查看动画效果。选择 Glyphs 将字体转换成图形形状。

导出文件:

在线测试结果:可以直接上传 json 文件,可以提前知道动画是否有问题,然后再交付给开发。

网址:https://nicolasjengler.github.io/bodymovins-json-tester/dist/

切图命名规范

1. 通用切图命名:组件_类别_功能_状态@2x.png

举例:tabbar_icon_home_default@2x.png(对应中文:标签栏_图标_主页_默认@2x.png)

2. 模块特有切图命名:模块_类别_功能_状态@2x.png

举例:bill_icon_search_pressed@2x.png(对应的中文为:账单_图标_搜索_ 默认@2x.png)

3. 常用英文单词表

标注软件

现如今市场已有很多设计交互的平台,如:国内的墨刀、蓝湖、摹客等,国外的 Figma、invision 等,各自都有优秀的特点,既满足交互需求,又能有标注切图功能,选择适合自己团队的工具与开发一起协作即可。

1. Figma

支持 sketch 导入,Figma 也像 Zeplin 一样,标注页面间距与尺寸,并且支持各种图片格式、尺寸、形态输出,开发人员也有相应的代码可用参考,分享链接即可。

2. 墨刀

支持 sketch 上传页面至客户端,分享链接即可。支持多种切图格式下载,开发人员也有相应的代码可用参考,操作简单清晰。

3. 蓝湖

支持软件 PS、sketch 上传在线标注,在设计源文件上切好图片,开发人员可在线上下载,且有相应的代码可用参考,分享链接即可。

文章来源:优设

调整浏览器分辨率的插件下载方法

seo达人

前端开发在开发过程中经常会被UI小姐姐要求开发的各个页面都按照她的理想效果显示,所以就需要前端经常调整自己的浏览器分辨率,而今天笔者给大家带来的就是谷歌调整浏览器分辨率的插件下载配置方法:



点击不同的分辨率,浏览器就会开始切换了。



接下来笔者给大家分享如何下载和配置这个插件:

下载地址:https://me.csdn.net/download/weixin_43606158



或者关注笔者后加笔者QQ/微信笔者私聊发你:1336791007



下载后请先在谷歌浏览器上方输入 chrome://extensions/ 进入到谷歌的拓展程序。



而后将下载后的文件移动到谷歌拓展程序界面上。





PS如果出现程序包无效:“CRX_HEADER_INVALID”。这个提示,请看下方的解决办法链接。





解决 程序包无效:“CRX_HEADER_INVALID” 方法的链接:https://blog.csdn.net/weixin_43606158/article/details/97517104

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

设计规范制作流程

资深UI设计者

 

产品发展日趋平稳时,产品定位和品牌形象已进入稳定状态,参与设计的人越来越多,设计的统一性和效率的问题也渐渐显现。因此,为了保证平台设计统一性,提升团队工作效率,打磨细节体验,就需要我们定义和整理设计规范。

确定规范内容

UI 设计中,设计规范是一个关键步骤。知名大厂基本上都有一套自己的完整规范体系,在整理设计规范时,以大平台规范体系作为参考,针对产品自身情况增删,整理出我们自己所需要的规范内容,能有效地避免规范内容遗漏缺失。

拓展链接:各大官网设计规范集合

截屏2024-09-20 上午11.36.39.png

色彩规范

颜色是设计中最重要的元素,颜色的运用与搭配决定设计的品质感。在 UI 设计中,颜色的使用规范主要在于:品牌主色、文本颜色、界面颜色(背景色、线框色)等。

 

字体规范

不同的字体气质不一样,并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果,然后在设计规范中注明。

 

图标规范

在 UI 界面中,具有标识性质的图形就是图标。作为 UI 设计中重要的设计模块,产品的每个页面中都有可能存在图标。设计规范中,图标一般按照用途分为两类:应用图标、功能图标。

应用图标:各种应用程序的识别标志,在应用商店里下载的一些应用程序的标志。

 

功能图标:规范中最好标明图标格式与使用方式。比如 Web 设计,图片可以使用 iconfont 管理,可生成代码交付给前端开发;如果是原生 APP,那么需要标注图标导出格式与尺寸。

 

图片规范

图片作为界面设计的重要组成部分,需要标明尺寸规范,分为不同用途的种类。

 

设计尺寸&栅格系统

设计尺寸,是指进行设计时,选择的画板尺寸。例如是 750*1334,还是 375*667,每个公司设计的基准都不一样,所以设计尺寸并没有规定只能用某一个尺寸,我们在设计时,使用的 1 倍图为基准进行设计的,基准尺寸为 375*667。

栅格系统,是运用固定的格子设计版面布局,在 UI 设计和前端开发中被广泛应用的一套体系。在设计尺寸中提到栅格系统,是因为现在的设计基本都是一稿适配多端,而栅格系统能很好的解决这个问题。

△ Christie Tang

栅格系统拓展链接:《看不懂不会用的栅格系统,这篇帮你彻底掌握它!》

界面布局

布局是页面构成的前提,是后续展开交互和视觉设计的基础。设计规范中可以提供常用的布局模板来保证同类产品间的一致性,设计者在选择布局之前,需要注意以下几点原则:

  • 明确用户在此场景中完成的主要任务和需获取的决策信息。
  • 明确决策信息和操作的优先级及内容特点,选择合理布局。

 

△部分布局类型展示

控件规范

控件是指产品界面中可操作的部件,与组件是有一些区别的。控件翻译为 Control,组件翻译为 Component。

通俗的解释说法就是组件为多个元素组合而成,控件为单一元素组合而成。

常用的 UI 控件(Control):按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。

以下列举一些我们在 APP 设计规范中整理的内容。

1. 按钮

按钮有 5 个状态:正常、点击、悬停、加载、禁用。需要在规范中分别罗列出这五个状态,标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度,按钮文本大小、颜色值。如果是图标按钮的话,除了上述参数值以外,还需要标注 icon 和按钮文本之间的间距,icon 图标的大小。

 

2. 输入框

用于单行信息录入文字上下居中显示,支持键盘录入和剪切板输入文本,对特定格式的文本进行处理:密码隐藏显示、身份证、卡号分段显示,标注宽高。

 

3. 选择

选择可分为单选与多选,并且也有五种不同状态:未选择、已选中、未选悬停、已选失效、未选失效项。规范中需展示出所有效果状态。

 

4. 选项卡

用于让用户在不同的视图中进行切换。标签数量,一般是 2-5 个;其中,标签中的文案需要精简,一般是 2-4 个字。每个标签所占的宽度可适当调整。

 

5. 滑动开关

滑动开关有两个互斥的选项(例如开/关、是/否、启动/禁止),它是用来打开或者关闭选项的控件。选择其中一个选项会立即执行操作。

 

6. 进度条

用于向用户展示步骤的步数以及当前所处的进程。

 

7. 角标

用于聚合型的消息提示,一般出现在通知图标或头像的右上角,通过醒目的视觉形式吸引用户眼球。

 

组件规范

常用的 UI 组件(Component):表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。△ Ant design 移动组件

在 skecth 中设计时,使用 Symbol 创建的组件,在后期整理时,可以节省许多的时间。

推荐阅读:《Sketch 进阶教程!利用Symbol 建立一套设计规范组件库?》

当然,Figma 也同样具备这样的能力,你所创建的组件都存在于 Assets 中。

 

缺省页面

  • 空状态页面:显示对应的页面空状态的图标,增加相应的引导按钮。
  • 无网络状态:在没有连接到网络时的提示页面。
  • 404&505页面:发生未知错误时的页面。

 

规范优先级

了解规范的内容有哪些之后,我们需要确认的是规范优先级,规范内容庞大复杂,基础的、必要的、高性价比的放在第一个版本中,复杂的往后放,随着产品的迭代,规范才会越来越完整。

 

一个好的规范应该是的、简单易懂的。具体执行时,我们应该确保分类合理、规范本身保持一致、布局排版易读,来提升设计师查阅的效率;确保定义清晰、描述准确、场景完备,来帮助设计师理解和使用。但值得注意的是,设计规范并不是「圣经」,不要因为规范而限制了自己的思维,当发现规范有问题的时候,要及时去修正,而不是做了一次之后,一直沿用,永不修改。

以下是蓝蓝设计(北京兰亭妙微)给中国移动研究院设计三套软件,制作的部分UI规范。

 

 

 

 

 

 

 

 

 

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

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

网格基础手册

资深UI设计者

网格系统是针对于平面的,而不是网页设计和移动端的设计。网格系统、栅格系统、网格基线和网格基数,应用层面完全不同,大家跟着学慢慢就会理解它们之间的差异。平面中的网格系统非常庞大,网格基础就分为很多部分,如:网格的基础知识(认识网格)、网格的元素、网格的类型、网格的应用等等。

这些知识掌握后就要去理解网格都应用在哪里?如:宣传册和小册子,插画书,杂志和报纸,包装,海报等等。理解了网格系统都会使用在哪里后,就要去理解网格系统的具体结构,又分为两类:结构网格和解构网格。它们俩的知识又细分为:模块网格、比例网格、复合网格、分层网格、栏式网格等等。

理解了网格系统的结构就要去理解网格系统的设计思维,如:避免呆板的设计、留有呼吸的空间、用色彩来编码、让读者参与运用组织规则等等。这篇文章先来讲一下网格系统基础中的基础。

网格的概念

这里我引用了蒂莫西·萨马拉和德里克·博德萨尔,两位大师对网格系统的理解。蒂莫西·萨马拉认为:「在文字问题全部解决之后,网格真正的成功取决于设计师是否超越网格结构所蕴涵的整体性,然后用它来创造一部分动态的视觉表述,这些部分可以让读者保持对整本书中每一页的兴趣。」德里克·博德萨尔认为:「在版式设计中,网格是最容易引起误解和误用的元素。网格只有在你想用的素材上时才会有用。」

另外再了解一下罗伯特·劳森伯格先生对网格的理解:网格是用来给读者组织空间和信息的,它给整部作品提供了规划。网格给信息提供了围栏,同时也是规定和维持秩序的一种方法。虽然网格已经使用了许多个世纪,但是很多图表设计师还是把网格与瑞士人联系在一起。在 20 世纪 40 年代的时候,人们热切希望维持秩序,因而创造了这种可以提供视觉信息,并且更加系统化的方法。几十年后,网格设计被认为既单调又乏味。而如今,网络设计再次被看作是基础性的工具,无论是行业新手还是具备几十年经验的老手都依赖此种工具。

我这里再引用一下《秩序之美-网页中的网格设计》这本书中所阐述的对网格系统的观点,网格就是在混沌中建立规则。再引用《塑造和突破网格》书中的观点根据以上观点做结合得出:「在混沌中建立规则,突破网格结构并打破规则」,就是网格系统的核心概念。这些观点结合起来,这就是我理解的网格系统的概念。

网格的构成

网格构成的概念:网格包括一套独特的对齐关系的原则,用于指导如何在一个版面中分配各个组成部分。版面中包含若干个不同的部分和构成,每个部分都有着不同的用途和功能。设计师也可以根据自身喜好,将某些部分从整体结构中去掉,这一切也取决于设计师如何理解材料、市场和读者的需求。网格的构成:版面、版心、外缘留白/外页边距、订口、栏目、栏间空白、底部留白/底页边距。

网格的构成 – 大体结构:

  • 版面:版面是页面中所有构成部分的总和;
  • 版心:版心是页面中主要内容的所在区域;
  • 外缘留白/外页边距:外缘留白或外页边距有助于将文本框纳入整体的设计中;
  • 订口:订口是装订时所需要的留白,通常存在于两个页面之间的折叠部分;
  • 栏间空白:两个栏目之间的分隔区域;
  • 底部留白/底页边距:页面底部的留白区域。

网格的构成 – 局部结构:

  • 空白:空白可以提供如注释和说明文字等二级信息;
  • 基线:基线是网格的基本结构,用来引导文本和其他元素在设计中的布局;
  • 栏目:栏目是有组织的放置正文的地方,并让读者容易阅读;
  • 空间区:空间区可以为文字、广告、图像或其他信息构成特定区域的模块组或栏目组;
  • 模块:模块是给网格内图像元素留出的空间,相连接的网格可以建立不同的行列模块;
  • 标志:标志能标明出现在同一位置的素材的方位,包括页数、页首标题和页脚(标头、页脚),以及图标。

网格的度量

在网格系统中有两种度量:绝对度量和相对度量。网格系统本身有自己的绝对度量单位,例如英寸(inch)或磅(Pt,印刷字体大小的一种单位,1pt等于0.01384英寸,约1/72英寸)。在网格内部中很多元素可能会使用相对度量,来表示它们的大小和其他元素之间的关系。

运用网格系统时,可以从起始点就开始使用坐标。红色的线条是基线,它们之间的间隔为 12p 磅。首行、分栏一起构成一个坐标。一个模块单位有 13 条基线,每条间隔为 12 磅,因此版心高度是 156 磅(13×12)。

1. 网格的度量 – 文字

文字经常以绝对单位磅来计算的。对于确定的长度,绝对单位能提供一个固定值,这便意味着设计师能有效地控制文字和基线之间的关系。文字和基线通常使用磅值(pt)来进行计算的,用毫米算也行,但要注意的是将文字和基线放在同一个度量单位下进行计算。

上图中就有一个两栏文本块。在这个例子中,一旦建立起网格系统,说明元素的度量可变性更强了,绝对度量单位便不是那么重要了。

2.  网格的度量 – 图像

数码图像被用于设计时,通常是按照百分比缩小的,或者可以在程序中重设尺寸以适应特殊的空间要求。尽管如此,为了保证良好的印刷质量,印刷时图像的分辨率至少要保持在 300dpi。而在屏幕上显示,其分辨率则至少要保持 72dpi。

就像上图所表现的这样,图像也能占据单个模块或覆盖一组模块。

表现形式

网格系统与当代艺术运动有着紧密的关联,例如立体主义、构成主义和其他一些偏爱严谨结构的当代艺术的分支,都与网格系统有些紧密的联系。为了创造出流畅并令人印象深刻的设计,文本和图像的不同组合被当作表现形式来使用。如同画家在画布上构图一样,设计师也用相似的办法来吸引读者的注意。不同的表现形式能有效吸引读者,并形成一系列的联系。

上图介绍了一种设计观点,利用元素的放置位置可以创造出不同的视觉效果。设计对象既可以在页面中占主导位置,也可以被小心翼翼地插入页面的一角;既可以建立相互之间的关系,也可以被清楚明白的独立出来。

1. 分组

聚合成组的元素能使相关的信息联系起来。而不同的设计元素对应排列,也有助于建立起它们之间的联系。分组的方法就是将图像和文字置于单页、通页甚至整个出版物的特定模块或空间区中。

2. 边界

在设计中,为了使边框保持整齐和美观,设计师常常使用元素的远离来与边框保持一定的距离。尽管如此,对于边界的利用仍能有效的创造出具有设计感和活力感的版式设计。

3. 水平

当设计师要利用网格来引导读者视线横跨一个单页或通页时,设计元素便会依照这种水平运动的趋向来进行编排。也可以运用出血印刷和横跨订口的图片,形成水平的运动感。

4. 垂直

当设计师通过运用网格中的各个元素来引导读者视线在页面上下浏览,就是垂直形式的最好表现。垂直形式的垂直线不一定要在中线的位置。在平面中设置一个轴线,元素按照这个轴线做重心的平衡这种表现形式更好,这样不对称的版面具有一定的动势和张力,也更有冲击力和跃动感。

5. 斜角

把网格倾斜一定的角度,一般会倾斜至 30°、45° 和 60° 这三种角度,这些倾斜的网格发挥的作用原理与水平网格相同,但由于它们是倾斜的,设计师便能够以不同寻常的方式展现自己的创意。因网格可以设置成任何角度,往往这样有角度的网格更难设置也更难处理一些。

6. 轴线

网格中的轴线是一条隐形的平衡线或重力线,会贯穿整个设计作品,这个作品就是利用轴线网格来做的,它产生并受控于页面元素的位置和布局。

元素的比例

在设计中改变图像或文本等元素的比例,页面就能营造出跃动率和动势。在平面中运用元素之间的比例关系,就可以从不同的视角展示同一个主题。元素在没有经过比例调整的情况下,元素之间的比例只是按照它们固有的样式出现,这时它们之间存在一种消极的关系。相反,元素之间的对比关系存在,比例经过调整后,它们之间存在一种积极的关系。

这里的积极和消极可以理解为「动与不动」,页面元素没有变化就给人感觉死气沉沉的,版心上下留白一致也会给人这种感觉,这种布局适合用于古典书籍和较为传统的平面设计中。不动且没有变化给人感觉没有动势和张力并很消极,动而有变化给人感觉灵动活跃并很积极。

通过改变元素之间的比例关系就会存在积极的关系。相对较大的元素层级更高,并吸引了更多的注意力。

元素的层级

设计师利用层级的概念,通过比例大小或布局结构来定义作品,并呈现作品中最重要的信息。

1. 消极

下图所示中的页面是处于消极的状态,两大栏目没有对比关系。尺寸一致显得整体页面很平静,也没有表现出动势和张力,文本之间也不存在层级的关系。但要注意的是,采用这种排版布局,读者的视线会自然的从左到右依次阅读,并被带入作品所传递的信息中。

2. 位置

对设计元素的布局能明确设计中的层级关系。下图中的标题独立放置在了左页,来突显出它的优先级与重要性。

3. 位置和尺寸

位于页面入口处的元素被放大,它与下面元素的间距也被拉大,就形成了这个元素在层级中的重要性。

网状与点状网格

设计师会利用网状网格或点状网格来辅助对设计元素的布局。使用网格之前,必须理解它们是如何辅助设计师进行设计的。要思考牺牲对布局的多样性,换来多少设计的连贯性,而且也为实践留下了更大的空间。

1. 网状网格

网状网格是基础网格,它由一系列的水平线和垂直线组成的,以此来引导设计元素的布局,使设计师能快速布局并变得连贯而准确,它常被运用在设计定稿之前的草图中。

2. 点状网格

点状网格同样是一个基础网格,用来安置不同的设计元素。它们也可以用来补充页面元素的布局,例如文字和图片之间的空白等。

文章来源:优设

更改this指向的方法及其区别

seo达人

今天给朋友们带来更改this指向的三种方法,以及它们的区别:



一:call用法

window.color = 'red';

document.color = 'yellow';

var s1 = {color: 'blue'};

function changeColor () {

console.log(this.color);

}

changeColor.call() //不传参数默认指向window

changeColor.call(window) //指向window

changeColor.call(document) //指向document

changeColor.call(this) //构造函数的this如果打括号调用默认指向window

changeColor.call(s1) //指向s1对象



//例二:

var Pet = {

words: '...',

speak: function (say) {

console.log(say + '' + this.words)

}

}

Pet.speak('123') //输出123...

var Dog = {

words: 'WangWangWang'

}

Pet.speak.call(Dog,'123') //输出123WangWangWang



二:apply用法:

window.number = 'one';

document.number = 'two';

var s1 = {number: 'three'};



function changeNum() {

console.log(this.number)

}

changeNum.apply(); //one

changeNum.apply(window); //one

changeNum.apply(document);//two

changeNum.apply(this);//one

changeNum.apply(s1);//three



//例二:

function Pet(words){

this.words = words;

this.speak = function(){

console.log(this.words)

}

}

function Dog(words){

Pet.call(this,words);//结果wang

// Pet.apply(this,arguments);//结果wang

}

var dog = new Dog('wang');

dog.speak(); //wang



apply与call的区别:

接收的参数不同

apply()方法接收俩个参数,一个是函数运行的作用域(this),另一个是参数数组。

call()方法第一个参数和apply()方法的一样,但是传递给函数的参数必须一 一列举出来。

语法:

apply([thisObj [,argArray]]);

调用一个对象的一个方法,另一个对象替换当前对象

call([thisObj [,arg1[,arg2[…,argn]]]]);

说明:

如果thisObj是null或者undefined的时候,默认指向window。

如果argArray不是一个有效数组或不是arguments对象,那么将导致一个TypeError,如果没有提供argArray和thisObj任何一个参数,那么Global对象将用作thisObj。

call方法可以用来代替另一个对象的一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象,如果没有提供thisObj参数,那么Global对象被用于thisObj。



三:bind的用法:

var obj = {

name: 'WuXiaoDi'

}

function printName() {

console.log(this.name)

}

var wuXiaoDi = printName.bind(obj)

console.log(wuXiaoDi) //function(){...}

wuXiaoDi() //WuXiaoDi



//例二:

function fn(a, b, c) {

console.log(a, b, c);

}

var fn1 = fn.bind(null, 'Dot');

fn('A', 'B', 'C'); //A B C

fn1('A', 'B', 'C');           // Dot A B

fn1('B', 'C');                // Dot B C

fn.call(null, 'Dot');      // Dot undefined undefined



//例三:实现函数珂里化

var add = function(x) {

return function(y) {

return x + y;

};

};

var increment = add(1);

var addTen = add(10);

increment(2) //3

addTen(2) //12



小总结:

Function.prototype.bind(thisArg) - - ES5



能够返回一个新函数,该新函数的主体与原函数主体一致,但当新函数被调用执行时,函数体中的this指向的是thisArg所表示的对象。



Function.prototype.call(this.Arg,val1,val2, …)



调用函数执行,在函数执行时将函数体中的this指向修改为thisArg所表示的对象



val1, val2, … 表示传递给调用函数的实际参数列表



Function.prototype.apply(thisArg, array|arguments)



调用函数执行,在函数执行时将函数体中的this指向修改为thisArg所表示的对象,



array|arguments 表示调用函数的参数列表,使用数组或类数组的格式



区别:

bind与call和apply的区别:

返回值的区别:

bind的返回值是一个函数,而call和apply是立即调用。

参数使用的区别:

bind与call一样是从第二个参数开始将想要传递的参数一 一写入。但call是把第二个及以后的参数作为fn方法的实参传进去,而fn1方法的实参实则是在bind中参数的基础上再往后排。

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

这九招让你的视觉动起来!

资深UI设计者

在我们平时的设计工作中,经常会需要做一些有动感的画面,去体现某些产品所具有的运动属性,比如汽车的速度感、球鞋的运动感等等。可是由于载体或是成本的原因,导致客户没办法投入动态画面的制作,所以就要求我们只能在静态的平面中去创造动感,让原本不会动的画面看上去好像也能动起来,这就是今天要为大家带来的内容。

我们先来看一组照片,这些猫的图片明明都是静态的,可是为什么我们看到这些照片的时候,却能够明显的感觉到猫在跳跃的动感呢,这个主要是因为我们的心理作用。

正如佛教里所讲的,不是风在动,也不是云在动,而是心在动。那些看上去带有动感的图片并不是真的在动,也不是屏幕在动,而是我们的心理作用。

所以我们做设计的时候,就可以很好的利用这一心理作用,去实现一些具有动感的画面。既然要做动感的画面,我们需要先了解,关于运动在物理学中的定义。

物理学中的运动,必须具备两个要素,分别是速度和能量。

那我们就可以总结出两种画面中的动势,第一种就是具备速度和方向的动势,比如画面中这两张图片,我们可以很明显地感觉到,图片中的主体是正在运动的,并且具有很快地速度和明确的运动方向。

第二种就是静止的,但具有强烈能量的动势。比如画面中这两张图片都没有在动,可是我们也能够感觉到它的动感。如果说前一种动势更注重于刻画运动的速度感,那么第二种则更加注重刻画一触即发的能量感。

那么,我们在平面中应该如何去创造动感呢?其实很简单,因为张力在画面中不平衡时,便会产生动感。

所谓张力就是画面中元素向外扩张的心理作用力。

这么解释可能有些抽象,我们可以将张力与万有引力进行类比。万有引力就是,任意两个物体具有通过连线方向上的力相互吸引。而我们可以将张力定义为画面中任意两个元素,通过连线方向上的力相互吸引。也就是说画面中的任意元素都有相互吸引的力。

比如我们在一个画面中的上下左右各放一个圆点,然后在画面的正中间放一个较大的点,中间这个点由于均衡地受到上下左右吸引力的作用,所以它所受到的张力是平衡的。

当我们将中间这个大点往上移动,大点受到的张力平衡就会被打破,产生了要往下坠的动势。

根据万有引力定律公式,物体所受的吸引力和质量是成正比的。

所以我们同样可以类比到张力中来,画面中打破平衡的那个元素的质量和面积越大,所带来的动感就会越强烈。

看完了刚才所讲的这些,相信大家现在心里大概都会想起一句话,就是听过很多道理,依然过不好这一生。的确,听了这么多的理论公式,难免会越听越懵。而且我们在做设计的时候,也不可能去测量画面中每一个元素的大小、间距、方向,也不可能把每一个元素之间的张力进行量化,然后再用公式去计算出动感的大小强弱。那大家肯定还会继续追问了,那么到底该如何去制造动感呢?

这里我总结了三点产生动感的原因,分别是基于生活经验与心理认知、诱导视线移动,以及非平衡状态下产生的视觉冲击。

基于生活经验与心理认知

我们先来看基于生活经验与心理认知,每个人在成长的过程中都会碰到许多人和事,并且对不同的事物会总结出一套规律和认知,也可以说是刻板印象,所以我们就能感觉到一件事物是运动的还是静止的。

比如这两个小人,虽然只是一个轮廓,但是我们却能感觉到左边的人是站立的,静止的,而右边的人正在走路,是运动中的。

这样的例子很多,例如书本是静,车子是动。

树懒是静,猴子是动的。

另外由于人类拥有一种组织倾向,所以当我们看到某一个运动的瞬间时,会自动脑补中出他运动的过程。比如这张静态图片,相信很多人看到时都会脑补出那个视频。

但是这里有一个问题,就是不同的人他的生活经验是不同的,对于事物的认知和理解也就不同,可能对于一部分人来说这是具有动感的,而对另一部分人来说却是静止的。比如刚才那个打篮球的图片,如果是没看过视频的人,当然就脑补不出他的动感了。所以对于这种刻板印象的利用,我们需要根据受众的具体特征具体分析,千万不要盲目使用。

诱导视线移动

接下来我们来讲讲第二种情况,诱导视线移动。由于运动是相对的,所以我们在看东西的时候,视线移动也可以理解为是物体相对视线发生了移动。

比如我们在看报纸的时候,从左上角往右下角看,在我们眼睛里出现的画面是这样的,从而便产生了好像报纸在动的动感。

最简单移动的案例就是箭头,例如这是一条水平的直线,我们会认为他是静止的,而当我们在一端加上箭头之后,我们的眼睛就会随着箭头所指方向移动,从而产生动感。

这两个都是通过一些指向性的图形进行引导视线移动的作品。

非平衡状态下产生的视觉冲击

接下来我们来说一下第三种情况,非平衡状态下产生的视觉冲击。

比如在天平的两端各放一只猪,那么这个天平就是处于一个平衡的状态。

当我们在其中一边再加一只猪时,天平就会失去平衡,重量更大的一边会往下倒,直到找到一个新的平衡。

而我们的大脑其实也和天平相似,当我们看到一些不平衡的画面时,我们就会有把它转换为平衡状态的倾向,所以动感的产生,也就是大脑脑补不平衡到平衡的这个运动过程。

我们在半空中放一块石头,由于这块石头受到重力的作用,处于一个不平衡的状态,所以我们认为他有向下掉的趋势,直到与地面接触找到新的平衡状态。

如果我们把石头换成一个气球,那么情况就相反了,由于气球受到重力作用的同时也受到了更大的浮力,所以气球会有往上飘的趋势。

举一个更加能说明的例子,其实我们大多数人或多或少会有一些强迫症,比如看到这种一只铅笔没对齐的画面就会很难受,特别想把它怼回去。

所以我们就会脑补出这只铅笔往左移动的过程,从而产生了动感。

这两个海报都是通过创造一些不平衡的场景带来刺激感,从而产生动感。例如颠倒的房子和悬空的蒸笼。

制造动感的技巧

经过前面的讲解,相信大家应该对动感是如何产生的,有了一定的认识,但是,我们刚刚只是从理论的角度去讲解了动感是如何产生的,运用到实际的设计中可能还是会一头雾水。那接下来的部分就是真正的干货环节了,去给大家讲一些比较实用的制造动感的技巧。

这里总结了 9 个小技巧,我们一个个来看。

1. 捕捉动态瞬间

我们在前面提到了当我们看到某一个运动瞬间时,我们就会脑补出整个运动过程。那我们就可以反过来,从运动过程中捕捉某一个瞬间,用这一个瞬间来表达平面中的动感。

这里可以分为两种情况,一个是捕捉运动刚开始的瞬间,强调运动刚开始的那种能量感。

这是两个捕捉运动开始瞬间的例子,两名运动员都穿好了装备,虽然还没开始动,但是却能感受到一触即发的紧张感。

第二种就是捕捉运动过程的某一瞬间,这种方式带来的动感会比上一种强烈得多。

例如这两个例子都是捕捉了运动员正在运动中的瞬间。

这种方式所传达的动感强弱是由运动物体的动作姿态所决定的,所以我们需要认真比较每一瞬间的动作,选出最适合的一帧。

2. 倾斜

第二种技巧是倾斜构图,一般横线和竖线都会给我们一种稳定平衡的感觉,而斜线相对于横线和竖线来说,则会给我们带来强烈的不平衡感。

例如这些图片,无论是迈克尔·杰克逊的经典舞蹈动作,还是比萨斜塔,都给我们带来一种不安定、危险、不平衡的视觉冲击。通过这种不平衡感从而产生动感。

我们观察这些线,会发现 45° 时的斜线相对于横线和竖线的倾斜角度最大,所以 45° 倾斜时不平衡感最强,动感也最强烈。

漫画中的倾斜构图

在漫画作品中经常会将剧情画在倾斜的格子中,目的是为了弥补漫画纸质作品的缺陷,强化漫画内容的动感。

电影中的倾斜镜头

在电影中也会故意用到倾斜的镜头,由于电影本身就是动态的,所以运用倾斜镜头一般是用来强调危机感、动荡不安的漂泊感等等。

摄影中的倾斜镜头

摄影作品中也会用到倾斜视角,这两张都是通过倾斜视角强化速度感的例子。

文字倾斜

那么我们看看倾斜在设计中是如何使用的,首先可以是文字倾斜,这两个海报的人物主体都是竖直的,通过文字倾斜来增加动感。

主体倾斜

这两张海报则是保持文字水平排列,将主体进行倾斜处理从而带出动感。

叠加倾斜色块

我们也可以将文字和主体都水平或者竖直放置,然后添加倾斜的色块强化动感。

画面整体倾斜

这种是将包括主体和文字在内的画面整体进行同一角度倾斜处理。

多角度倾斜

最后这种是难度比较高的,画面中出现了多个角度的倾斜对比,画面十分灵活且动感十足。

3. 错位

接下来看看第三种倾斜技巧,错位。什么是错位呢?就像这辆小车一样,他在运动的过程中,身后会产生的一些虚影错位,使得画面中的一部分被破坏了,视觉需要在脑子里想象补充这一被破坏的部分,使画面还原为原本的样貌,从而产生运动感。

重复

错位这种技巧我们也可以分为几种类型,首先第一种就是重复,通过重复的手法去模拟物体的运动轨迹,让人脑补运动的过程,从而产生动感。

模糊

第二种就是通过将背景或者是主体进行模糊,从而传达动感。第一张图片是通过模糊主体身后的背景去产生动感,而第二张则是通过模糊文字的外轮廓从而产生一种收放的动感。

错开

第三种是错开,就是将画面的某一个部分进行错开处理,让画面遭到破坏,需要人脑去修补这部分的破坏,从而产生运动感。

其他

除了上面三种还有许多别的类型,例如通过车辆行驶溅起的水花,融化往下低落的液体等等,都可以造成对画面的破坏,从而制造动感。

4. 集中与发散

对于集中与发散我们可以分为两种,第一种是这种通过线条绘制的发射或是集中图案,从一个中心向某一方向或四周扩展,或者是四周向一个中心集中的线条图案,盯着看会出现一种光耀感,通过光学效果产生视觉幻想,从而产生视觉动感。

而第二种则是通过物体或图形的疏密节奏变化,从而产生出类似扩散或是集中的效果,这种效果会令我们联想到河流或是烟雾扩散的情形,从而产生了动感。

当扩散的图案配合上透视的效果,会使得动感变得更加的强烈。

背景

对于这种集中发散的图形,我们可以将它作为背景来烘托动感和氛围。

文字

也可以将文字编排成发射状,模拟出那种喷口而出的效果。

主体

或者是将图形作为主体去表达特殊的主题。

以透视作为发散

这两个海报是比较特别的例子,将放射状与透视相结合,体现了很强烈的动感。

5. 螺旋曲线

接下来讲讲关于螺旋的技巧,因螺旋发展或内收形成的曲线,会让人联想到水的旋涡形,视觉上就形成动感,且螺旋曲线的旋转曲度越大,动感就会越强。

另外,密集的螺旋曲线也能给人带来一种集中或者是发散的效果,从而也能带来一定的动感。

这两张海报是将螺旋曲线作为主体使用,来表达其特定主题。

这张海报个人比较喜欢,非常灵活地将画面中的文字和图片沿着螺旋曲线排布,加上大小的变化,让画面产生了一种集中的动感。

这张海报则是将螺旋线作为背景,并将文字放在螺旋曲线间排列。

6. 波状曲线

第六种技巧是波状曲线的使用。因为曲线的来回反复扭曲,会令人联想起翻滚的海浪。

而且由于曲线本身就具有不平衡的张力,他会有一种向直线转变的趋势,所以波状曲线特别适合用来表达动感。

波状曲线的曲度越大,他所产生的动感就会越强烈。

对于波状曲线,我们可以将其用来作为主体或者是背景进而表达动感。

也可以通过将文字做成这种扭曲的效果,从而产生一种文字在扭动的动态感。

7. 色彩

第七种技巧则是对色彩的使用。因为色彩有前进感和后退感,所以我们可以利用这一点来制造动感。其中最容易理解的就是使用色彩的渐变,沿着色彩逐渐变化的方向,来诱导人们的视线移动,从而产生视觉上的动感。

这两个都是利用不同色彩的渐变来引导视线移动,从而产生动感。

我们在前面讲过运动是需要能量的,而象征高温的暖色调比象征低温的冷色调更具备能量感,所以暖色调比冷色调更适合表达动感。

这是一张日本新干线的海报,虽然用的是静止的列车作为主体,可是鲜红的背景却能很好地传达出列车的能量感。如果我们将红色的画面换成蓝色的话,那种能量感瞬间就没了,多了些科技的属性,画面变得冷静克制了。

8. 重心偏移

接下来是重心偏移。一般我们编排版面时都会注意版面重心的均衡,将画面整体的重心放在画面中间。可是在塑造动感画面时,我们却可以将画面的重心偏离视觉中心,使画面形成一种不平衡感,从而产生动感。

我们来看看这两个海报,都是通过将画面的重心全都放在画面的一侧,从而产生了一种很强烈的不平衡感。

另外,由于视觉重力的原因,当画面重心偏上时,能很好地塑造出往下坠的动感。现在画面中的这两个作品都是将重心放在了画面的上方,我们能感受到画面中的主体会有一种往下掉的趋势。

9. 蒙太奇

最后一种是蒙太奇的手法。前面我们说过人类天生具有一种组织倾向,当我们看到运动的瞬间状态时,我们便能脑补出运动的过程。所以通过蒙太奇的手法,将一些不同时刻或状态的图片放在一起,便能使画面产生动感。蒙太奇手法比起单纯使用一张运动瞬间图片,能承载更长时间的运动和更多的运动内容。例如画面中的这两个动作,把他们放一起之后我们就可以联想到这个小哥从热身到起跑的过程。

其实漫画运用的就是蒙太奇原理,通过几个关键的情景,去传达一个完整的剧情。

这些都是运用蒙太奇手法的作品。

案例

以上就是今天的理论部分,接下来我们进入案例实操的环节,这次我给大家带来了四个案例,分别运用到了倾斜、重心偏移、发散与集中,以及蒙太奇的手法去塑造动感。希望通过这些案例的演示,能够让大家更好地理解今天的内容,下面我们就来进入案例的部分。

案例一

首先确定好画面的页边距,并且将画面横向分为 6 份。

然后将主体,也就是科比的形象,放在画面正中间,横向占中间四栏。

接着在科比的下方叠加一个红色的倾斜色块,强化科比倾斜的体态和动感。

从球鞋的名字中提取出关键词叠在科比下层,并将球鞋的中文名放在英文下方。

将球鞋与介绍性文字做成文字组的形式放在画面下方 。

由于主标题英文被遮挡了一部分,缺失了一些可读性,所以我们将球鞋的英文名做一个重复放在左上角,并在右上角添加 logo。接下来我们在背景上叠加一个篮球场的场景。

并将画面的四周涂上黑色的渐变,强化主体形象。

由于现在画面和主体都有一些偏暗了,所以我们对整体画面进行稍微调亮,那么这个案例就完成了。

案例二

这个案例同样也是一双运动鞋,但是我们这次利用重心偏移的技巧去塑造动感。

同样的确定页边距,并将画面横向分为四栏,将主体放在画面左上角占上方两栏。

然后从球鞋的名字中提取出相关英文放到版面顶部,并置于主体下方。

因为我们要做一个重心偏移的版面,所以我们接下来将所有的介绍性文字按照主体的负空间排列在版面上方。

为了防止重心的过度偏移,同时和左上角的球鞋做一个对角线的呼应,所以我们在版面的右下方放置价格以及球鞋的型号等信息。

然后吸取球鞋的颜色做一个色彩上的呼应。这一张球鞋的海报就完成了。

案例三

这个案例我们来做一个放射光线的海报,这个海报内容是一款果汁软糖的促销海报。

首先确定好页边距。

然后我们从这款软糖的包装上提取出一个图形作为画面主体。然后将软糖的名字和介绍文案放到这个图形中。

把图形按照黄金比例和网格放到画面中间。

在主体图形后面叠加放射线条,底下留出一部分空间放置产品图片及其他信息。

将产品图片和促销信息以居中对齐形式排列在画面下方。

然后我们可以在放射线上添加一些表情愉悦的人物图片,去强化吃了这款软糖会很开心的这个动态过程。

还可以在画面周围添加一些可爱的小图形去烘托氛围。

最后加上 logo,这个软糖的促销海报就完成了。

我们也可以将这个海报做成不同的配色,每一款产品对应一个配色。

案例四

这是一个艺术展的海报,我们通过蒙太奇的手法来表现。

由于展览主题是过去、现在和中间的一切,所以我们将画面分成三份,并用运动过程中的三个不同动作来代表着三个阶段。

由于第一张图片的底色偏亮了,所以我们将它抠出来,做一个与另外两个图片的相同背景。

将主题和时间这两个比较重要的信息放在画面的左上角。

其余信息排列在右下角。那么这个案例就完成了,也是非常简单的,利用的就是蒙太奇的手法。

本期教程到这里就结束了,我们来简单地总结一下今天的内容。首先我们了解了动感是画面张力不平衡所造成的,以及强调速度感和强调能量感的两种动势。接下来我们讲解了三种产生动感的原因,分别为基于生活经验与心理认知、引导视线移动以及不平衡状态下带来的视觉冲击。最后我们总结了 9 点实用的小技巧,分别为捕捉动态瞬间、倾斜、错位、集中与发散、螺旋、波状曲线、色彩、重心偏移、蒙太奇。希望大家能够掌握好这些方法,让原本静态的画面也能带来全新的动感。

文章来源:优设

如何通过竞品分析来解决问题

ui设计分享达人



1.竞品分析的定义


从专业的角度来讲,竞品分析是通过系统的分析方法去全面了解市场上位于前列的竞争对手的产品,能够让设计师快速了解自家产品所处的位置,从而来针对性的改进自身产品的一个方法。简而言之,就是要站在巨人的肩膀上去思考,以竞品分析的形式去学习其他优秀的产品,从而解决自身产品所存在的问题。



2.为什么要去做竞品分析


做一件事情之前一定要思考做这件事的价值和意义,只有你明白其重要和必要性,你才会知道该怎样去做这件事情,而不是一提起竞品分析就找一大堆专业框架和术语然后去填内容,这样虽然产出了很多,但是关键性的内容点其实还是不清楚。


说直白点,你需要通过这篇竞品分析去解决你工作或者创作中遇到的什么问题,带着疑惑和目的去分析在我看来是更有效率的。因此特分为以下几种情况:



因此我们要学会根据自己的不同需求,去制定不同的竞品分析方案,让分析的内容更聚焦。作为UI设计师来讲,通过竞品分析为自己的设计方案提供科学的理论依据,为自己赢得话语权,能够更好地科学产出内容。



3. 如何寻找竞品:


竞品的选择非常重要,如果找到错误的竞品,那么你所分析的一切结论可能都引向了一个错误的方向。从而让自己的努力都白费。那么怎样才能找到合适的竞品呢?分为以下三类情况


A.核心服务与目标用户相同的产品(直接竞品)


这一点是广大设计师都能想到的范畴,也称为直接竞品。即提供的核心服务、市场目标方向、客户群体等与我们的产品基本一致,产品功能和用户需求相似度极高的产品 。往往是通过业务关键词就能直接搜索到的竞品,比如音乐类产品,那么直接在应用商店,或者通过专业网站(易观千帆等)搜索关键词“音乐”即可搜索出排行前列的竞品。



B.目标人群不同,但功能模块和服务接近的产品(间接竞品):


这类竞品可以找起来并不那么直接,可以通过对应功能去逆推拥有此功能的产品,并进行相关搜索。


如果想不到,可以通过“人人都是产品经理” “36氪“等关于产品资讯的网站进行查询,甚至可以通过百度指数来进行发散思维,看一下跟你关键功能相接近的都有哪些。比如你研究外卖产品,除去饿了么和美团等直接竞品,你还可以在分析用户下单和购买流程中,去分析淘宝和京东等购物产品,也能得到一定的帮助。



C.目标人群和服务都不同,但交互或者视觉有可以参考的产品(关联竞品):


这里所选择的产品,定位和领域可以都完全不同,但是你要从这款产品中得到启发,从而让你的产品能够拥有其他竞品不同的特点或者功能模块。有一个很典型也熟知的的案例,就是卫龙辣条的设计案例,在卫龙推出之前,可以说是没人会想到辣条会和高端扯上关系,但是卫龙就是借鉴与其领域完全不同的苹果设计去做,从而在包装上独树一帜,从而吸引人们注意取得成功。因此通过不同领域跨行业的产品有时候也可以找到不错的思维方向。



4.如何进行商业分析:


进行商业分析,这里只提及到三个基本选项:商业背景、产品盈利模式以及用户人群。通过这三个基本要素,你能对所研究的竞品有一个大概的了解。当然深入了解还需要其他平台(官网网站、36Kr等)来查阅更多的相关性资料,下列是对QQ音乐商业背景的简要分析。




5. 如何进行交互分析:


我们在做交互分析时,我们需要进行必要的两点分析:用户路径和交互维度。


用户路径:指用户从某个开始行为事件直到结束事件的行为路径,即用户在使用某个功能的完整流程称之为用户路径。我们需要去观察和体验在这一个完整路径中涉及到的页面、动效、视觉到底是怎样的。就拿登录页来说,我们看看排行前列的竞品是怎么做的。通过相应的体验和对比分析,我们就可以找出这其中符合我们产品性质的最优解,从而提高我们的登录注册效率。



交互维度:交互维度和用户路径有所区别。这一层需要弄清楚产品的核心路径,从而能够更好的解析产品各个层面的逻辑关系,这就需要我们以用户的角度去逐个体验,整体联系,随后记录下来。使用过程中我们也要去观察APP中的交互小细节,怎样分享的,怎样展示的,比如音乐软件进行截屏后和点击喜欢按钮后的反馈是怎样的。




6. 如何进行视觉设计:


在进行视觉分析时,有一点需要注意,如果你需要详细分析某一模块,请用手机尺寸截图后拿到设计软件中进行测量,不要光靠眼睛观察,很多时候的小细节我们只有在手动测量后才能感受到,比如控件的尺寸大小,间距的大小,以及颜色的取值,都需要精准测量后才能得出靠谱的结论。


怎样进行视觉分析呢,我比较推荐从一个app 视觉语言最基本的五个维度去分析,即“形色字构质”



最近以音乐APP进行了一次竞品分析,以QQ音乐APP来举例进行分析(当然竞品分析并不能只分析一个,而应该根据你需要的功能找多个竞品进行对比分析,才能看到更多的维度,这里只拿一个举例):




6.1 图形元素的分析


首先我们以形进行分析,形即图形元素,具体来讲即LOGO和图标。LOGO的更新在2018年10月以后已完成更新。新版的主要图标整理归纳如下:



可以看到整体的图标色调更加清新,造型设计更加圆润,未选中状态的线形图标则采用4px的描边,粗线形描边让整体界面风格显得更加稳重的同时对用户的干扰也较小。新版的图标界面让界面保持稳重的同时又富有活力。



6.2 色彩体系的分析


其次则是对色这一类别进行分析,颜色其实是对于品牌调性有很大的影响,比如一想起QQ音乐就知道主色是绿,一想起网易云音乐就知道主色是红,对用户的记忆点更深刻。通过截屏测量进行分析,得出整体的颜色如下(由于手机屏幕的色差原因,不可避免会有些许误差)


从局部来看,分析颜色最重要的一点就是能够弄清楚一个页面中哪些元素用的是同一种颜色,观察成熟的产品是怎样用颜色(和字重)去区分层级关系的。



可以看到,用主色和三种辅色即可区分界面的整个层级关系,由此思考我们在制作自己的界面时也避免用太多的颜色,造成界面太过花哨。(颜色的具体色值可能有些许误差,更重要的是看颜色层级关系)



6.3 字体体系的分析


接下来是字的分析,字即字体体系,可具体到字体和字号。设计中字体一般来讲是苹方,字号则根据设计师的定义来进行相应的规范。通过页面的测量分析,可以拿到其具体的字号大小层级分析。(以下定义基于750的设计尺寸)



对于单个界面的分析,个人觉得要带有思考的眼光去看待,比如在首页中字号其实分配过多,像“更多”这种按钮就不应该再分一个字号,字号太多整体就显得有一点点乱了。虽然大厂的设计能在一定程度上给予我们参考,但并不是说他的每一个设计都是正确的,我们要学会用审视的眼光去看待出现在身边的设计。



6.4 界面构成分析


界面构成即界面的元素大小以及他们的布局,例如有时候我们不知道一个标准的搜索框的长宽具体多少才是合适的,这就需要我们去分析其他成熟的商业产品,通过测量来知道具体的数值,从而督促自己进行正确的设计。这里选取了一个默认的首页进行分析。



将一个页面用右边的形式进行原型化,去掉干扰可以把结构看得更清楚。间距之类的也可以通过软件进行测量。可以看到QQ9.0版本的去线化设计,利用大间距来区分各个模块,去掉了其他的干扰元素,整体的界面模块看起来非常整洁轻盈以及富有呼吸感。统一的圆角化设计也让整体设计符合流行趋势,显得更活泼。



6.5 质感与风格分析


关于界面的质感则是不同于扁平化的一个设计,即有的页面在你看来细节会更丰富,层级会更深。界面质感通过渐变,叠加,透明度等不同方式来呈现,比如在QQ音乐中的会员界面卡片,则体现了微质感:



上方的会员卡片就加入了渐变和图案叠加的方式来为卡片增加质感,让整个界面显得更精致。当然,叠加的图案都是与内容相关的,不能为了叠加而叠加。包括下方的权益图标,也采用了渐变的方式来让整个图标显得更精致和有质感。我们再处理质感的时候也可以用这种方式来进行。


以上通过“形色字构质”来分析是属于单个分析,相当于去拆解一个成熟产品中的每一个细节点,从而去学习和吸收。我们还要学会进行对比分析。把单独某一个功能模块拎出来,通过不同类型的对比从而归纳出这一类的设计方法和样式,进而总结相应规律。


比如某一天你需要设计一个歌单列表,你此时就需要分析所有TOP排行的歌单列表,看看分别都有什么,从而总结归纳出结构来,再进行分类。



通过分析提炼,形成以下结论并进行相应的概念风格展示设计:



这样,我们最后制作出来的方案才能涵盖比较全的解决方案,从而能够更好的助力设计产出。上图的产出可能稍显简陋,但只是做一个简单的示例,真正的产出应该更加有细节和落地,也要结合自己的工作需求做相应调整。



7.关注竞品的版本迭代和用户评价:



关注版本更迭,阅读竞品版本更新的详细说明,你可以从中得出版解决了什么问题,提升了哪些体验,添加了哪些功能,融合了什么流行的设计趋势。产品迭代就是团队通过用户需求对某个产品不断完善的一个过程。迭代对于一个产品来说是至关重要的,一个产品如果不想被对手超越,就必须不断的对版本进行更新迭代。


除了关注具体的内容,你还可以观察版本更新的提示信息,例如夸克浏览器在每次更新时总会用富有趣味的文案来打动你,从而让你更加情愿去更新,提升新版的使用率。


用户评价则更不用说,产品的最终服务对象就是用户,用户评价的重要性自然不言而言。不过我们要客观辩证地去看待用户的评价,吸收好的建议,屏蔽无脑的意见,从而能够正确地迭代版本。用户评价的查看可以使用App Store或者用户评价网站(https://appbot.co/)去查询。



总结


以上的篇幅较长,看下来可能会有一些累,那么此篇文章提及到的点在这里回顾一次:


1.竞品分析的定义-站在巨人的肩膀上去学习;

2.为什么做-基于自己的目的去进行对应的竞品分析,分析的最终目的是解决自己在设计过程中遇到的问题;

3.竞品分析分为三个层面:视觉分析、交互分析以及商业分析;

4.怎样进行商业分析(商业背景、盈利模式、用户人群);

5.怎样进行交互分析 (用户路径、核心路径、交互细节);

6.怎样进行视觉分析 (从“形色字构质”五个维度去分析以及如何对比分析应用);

7.竞品的迭代和用户评价的重要性。


自己有一个小习惯,看完每一篇文章,总会告诉自己一定要在脑海里回顾一遍,思考一下这一篇文章到底有什么观点是自己之前没有想到的,哪怕只有一点是没触及到的知识盲区,那么这篇文章之于自己就是有意义的。所以希望大家看完能有些许收获那便是最好的了。


写这篇文章的目的是给自己的竞品练习做一个总结,以输出倒逼输入是一种比较有效的学习方法。但基于自己的水平有限,在某些分析的地方仍然存在不足和疏漏之处,希望大家谅解并及时交流。感谢大家看到这里,希望大家每天都进步~


转自:站酷-进击的M 

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


日历

链接

个人资料

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

存档