首页

如何快速制作一款有个人风格的字体?来看阿里设计师的方法!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

专注于做好一件小事,哪怕是做不好也用心去做,小到搭建一个精美的网格系统,做好一个字体的拐角……先看一下我的往期设计案例。

如何从无到有设计一款字体

对于很多刚接触字体设计的同学经常会遇到一种情况那就是想法高大上,结果很悲伤,为什么会造成这样的结果?归根结底是对字体设计本身了解还不够细致就照葫芦画瓢直接上,为了避免这种尴尬的结果,我们应该在开始着手做字体之前要做好各项准备工作,不断去浏览优秀的字体设计从中寻找设计的感觉,确定感觉后建立网格系统,开始逐步设计字体。我在做字体设计的时候会把握几个步骤「建网格」——「选字体」——「拆字体」——「绘笔画」——「绑骨架」——「粗与细」——「取与舍」——「磨细节」——「去感受」。

下面我们就以大家最常见的矩阵字体为例来给大家分享如何制作字体。

1. 建网格

建立网格系统,万丈高楼平地起,要做一款扎实的字体离不开网格系统的规范。

2. 拆字体

以「燃」为例——选取一个默认字体,按照字体结构对笔画进行拆分。

3. 绘笔画

将拆分出的笔画用横线和竖线在网格系统里进行笔画重绘,此时不要做细节,撇、捺和点根据自身走向和结构特点也归属为横竖线。

4. 绑骨架

拆分绘制的字体笔画就是字体的骨骼,笔画间的连接处可以理解成是人体的关节,关节的意义在于保证字体稳固的同时又灵活多变,字体的笔画可以根据视觉需要围绕关节在一定范围内做活动,也可调整长短比例。

5. 粗与细

笔画的粗细与硬度由你想要的字体气质来决定,细笔画与曲笔画柔美气质,粗笔画与直笔画沉稳大气,虽说设计是一种感觉,但是这种感觉对于初学者来说很难把控,所以跟大家共享一下常用的几种笔画的粗细,在1000PX*1000PX画板里采用6px,10px和20px为基础笔画粗细,根据想要的业务气质选取即可。

6. 解与构

常见的字体结构有「上下结构」「上中下结构」「左右结构」「左中右结构」「半包围结构」和「全包围结构」。其中「上下结构」中着重强调占比较小的那部分笔画,进而达到字体本身的平衡,例如「感」字着重设计心字;「上中下结构」中一般会在不影响识别性的前提下去掉中间部分横行笔画,进而达到字体本身的平衡,例如「享」字着重设计口字;左中右结构中在不影响识别性的前提下会简化左边部分笔画,进而达到字体本身的平衡,例如「燃」字着重设计火字。

7. 取与舍

笔画变粗后整个字体笔画间的空间比例会受到一定影响,因此为了字体的美观度和透气性我们会对字体结构进行一些取舍和整合。

8. 磨细节

为了让字体看起来更加舒适,我们将字体的拐角做圆,做圆角的同时也要根据网格系统来调整圆的度数。

9. 去感受

打磨整体字体,继续刻画细节。

注意:在一组字里,每个单字的结构都存在差异,适当调整字体内部的比例,形成感官上舒适的笔势,对保持视觉上大小一致很重要。汉字字体类型繁多,但是如果我们用几何法则来划分字体类型其实大致可以归纳为三种:方形,圆形和三角形,从面积上来看方形和圆形的面积最大,三角形次之,所以我们为了保持字重大小的一致性需要调整他们之间的大小比例,做到大小均匀,笔画一致,结构严谨和间隙适中。

△ 图源:ElethomHunter

为了拉出字体的气质,一般会把字体做的稍微偏瘦长一些。

字体设计的手段是多种多样的,每个设计师都有自己擅长的切入点,最后的结果是自己想要的就好。上述的分享希望能给字体设计初学者一点帮助,也欢迎各位同行大神交流切磋。

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

微信小程序实现倒计时,苹果手机不显示

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

JS页面代码段:


    
  1. const app = getApp()
  2. let goodsList = [
  3. { actEndTime: '2018-07-21 21:00:34' },
  4. { actEndTime: '2028-07-17 21:00:37' },
  5. { actEndTime: '2018-09-21 05:00:59' },
  6. { actEndTime: '2018-08-19 07:00:48' },
  7. { actEndTime: '2018-08-28 03:00:11' }
  8. ]
  9. Page({
  10. data: {
  11. countDownList: [],
  12. actEndTimeList: []
  13. },
  14. onLoad: function () {
  15. let endTimeList = [];
  16. // 将活动的结束时间参数提成一个单独的数组,方便操作
  17. goodsList.forEach(o => { endTimeList.push(o.actEndTime) })
  18. this.setData({ actEndTimeList: endTimeList });
  19. // 执行倒计时函数
  20. this.countDown();
  21. },
  22. //当时间小于两位数时十位数补零。
  23. timeFormat: function (param) {//小于10的格式化函数
  24. return param < 10 ? '0' + param : param;
  25. },
  26. //倒计时函数
  27. countDown: function () {
  28. // 获取当前时间,同时得到活动结束时间数组
  29. let newTime = new Date().getTime();//当前时间
  30. let endTimeList = this.data.actEndTimeList;//结束时间的数组集合
  31. let countDownArr = [];//初始化倒计时数组
  32. // 对结束时间进行处理渲染到页面
  33. endTimeList.forEach(o => {
  34. let endTime = new Date(o).getTime();
  35. let obj = null;
  36. // 如果活动未结束,对时间进行处理
  37. if (endTime - newTime > 0) {
  38. let time = (endTime - newTime) / 1000;
  39. // 获取天、时、分、秒
  40. let day = parseInt(time / (60 * 60 * 24));
  41. let hou = parseInt(time % (60 * 60 * 24) / 3600);
  42. let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
  43. let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
  44. obj = {
  45. day: this.timeFormat(day),
  46. hou: this.timeFormat(hou),
  47. min: this.timeFormat(min),
  48. sec: this.timeFormat(sec)
  49. }
  50. } else {//活动已结束,全部设置为'00'
  51. obj = {
  52. day: '00',
  53. hou: '00',
  54. min: '00',
  55. sec: '00'
  56. }
  57. }
  58. countDownArr.push(obj);
  59. })
  60. //每隔一秒执行一次倒计时函数, 渲染
  61. this.setData({ countDownList: countDownArr })
  62. setTimeout(this.countDown, 1000);
  63. }
  64. })

wxml页面代码段


    
  1. <view class='tui-countdown-content' wx:for="{{countDownList}}" wx:key="countDownList">
  2. 距结束
  3. <text class='tui-conutdown-box'>{{item.day}}</text>天
  4. <text class='tui-conutdown-box'>{{item.hou}}</text>时
  5. <text class='tui-conutdown-box'>{{item.min}}</text>分
  6. <text class='tui-conutdown-box tui-countdown-bg'>{{item.sec}}</text>秒
  7. </view>

 

wxss页面代码段


    
  1. page{
  2. background: #f5f5f5;
  3. }
  4. .tui-countdown-content{
  5. height: 50px;
  6. line-height: 50px;
  7. text-align: center;
  8. background-color: #fff;
  9. margin-top: 15px;
  10. padding: 0 15px;
  11. font-size: 18px;
  12. }
  13. .tui-conutdown-box{
  14. display: inline-block;
  15. height: 26px;
  16. width: 26px;
  17. line-height: 26px;
  18. text-align: center;
  19. background:#ccc;
  20. color: #000;
  21. margin: 0 5px;
  22. }
  23. .tui-countdown-bg{
  24. background: red;
  25. color: #fff;
  26. }
  27. .container{
  28. width: 100%;
  29. display: flex;
  30. justify-content: center;
  31. }
  32. .backView{
  33. width:690rpx;
  34. background: #fff;
  35. display: flex;
  36. flex-direction: column;
  37. margin-bottom: 30rpx;
  38. }
  39. .createDate
  40. {
  41. background: #f5f5f5;
  42. padding:15rpx 15rpx 10rpx 15rpx;
  43. line-height: 50rpx;
  44. font-size: 28rpx;
  45. color: gainsboro;
  46. text-align: center;
  47. }
  48. .backViewitem1{
  49. display: flex;
  50. flex-direction: row;
  51. height: 55rpx;
  52. align-items: center;
  53. padding:8rpx 40rpx;
  54. border-bottom: 2rpx solid #f5f5f5;
  55. }
  56. .ico
  57. {
  58. width:35rpx;
  59. height:35rpx;
  60. }
  61. .name
  62. {
  63. color: #c13176;
  64. margin-left: 20rpx;
  65. font-size: 28rpx;
  66. }
  67. .details
  68. {
  69. font-size:24rpx;
  70. letter-spacing: 2rpx;
  71. }
  72. .backViewitem2{
  73. display: flex;
  74. flex-direction: row;
  75. line-height: 35rpx;
  76. min-height: 70rpx;
  77. padding: 15rpx 40rpx 10rpx 40rpx;
  78. border-bottom: 2rpx solid #f5f5f5;
  79. }
  80. .details1
  81. {
  82. color:#888;
  83. font-size:23rpx;
  84. letter-spacing: 2rpx;
  85. }

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

从前端和后端两个角度分析jsonp跨域访问(完整实例)

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一、什么是跨域访问

举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的。跨域访问违反了同源策略,同源策略的详细信息可以点击如下链接:Same-origin_policy; 
总而言之,同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源(相同域名或IP)的资源。

二、什么是JSONP

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用<script>元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。更具体的原理需要更多篇幅的讲解,小伙伴可以自行去百度。

三、JSONP的使用

前端的使用示例

JQuery Ajax对JSONP进行了很好的封装,我们使用起来很方便。前端示例:

 $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接 dataType:"jsonp", //数据格式设置为jsonp jsonp:"callback", //Jquery生成验证参数的名称 success:function(data){ //成功的回调函数 alert(data);
            },
            error: function (e) { alert("error");
            }
        }); 
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

需要注意的地方是:

  • dataType,该参数必须要设置成jsonp
  • jsonp,该参数的值需要与服务器端约定,详细情况下面介绍。(约定俗成的默认值为callback)

后端的配合示例

JQuery Ajax Jsonp原理

后端要配合使用jsonp,那么首先得了解Jquery Ajax jsonp的一个特点: 
Jquery在发送一个Ajax jsonp请求时,会在访问链接的后面自动加上一个验证参数,这个参数是Jquery随机生成的,例如链接 
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046 
中,参数callback=jQuery31106628680598769732_1512186387045&_=1512186387046就是jquery自动添加的。 
添加这个参数的目的是唯一标识这次请求。当服务器端接收到该请求时,需要将该参数的值与实际要返回的json值进行构造(如何构造下面讲解),并且返回,而前端会验证这个参数,如果是它之前发出的参数,那么就会接收并解析数据,如果不是这个参数,那么就拒绝接受。 
需要特别注意的是这个验证参数的名字(我在这个坑上浪费了2小时),这个名字来源于前端的jsonp参数的值。如果把前端jsonp参数的值改为“aaa”,那么相应的参数就应该是 
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046

后端接收与处理

知道了Jquery Ajax Jsonp的原理,也知道了需要接受的参数,我们就可以来编写服务器端程序了。 
为了配合json,服务器端需要做的事情可以概括为两步:

第一步、接收验证参数

根据与前端Ajax约定的jsonp参数名来接收验证参数,示例如下(使用SpringMVC,其他语言及框架原理类似)

 @ResponseBody @RequestMapping("/getJsonp") public String getMySeatSuccess(@RequestParam("callback") String callback){
    
  • 1
  • 2
  • 3
第二步、构造参数并返回

将接收的的验证参数callback与实际要返回的json数据按“callback(json)”的方式构造:

 @ResponseBody
    @RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson(); //google的一个json工具库 Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12"); return callback+"("+gson.toJson(map)+")"; //构造返回值 }
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

四、总结

最终,前后端的相应代码应该是这样的: 
前端

 $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接 dataType:"jsonp", //数据格式设置为jsonp jsonp:"callback", //Jquery生成验证参数的名称 success:function(data){ //成功的回调函数 alert(data);
            },
            error: function (e) { alert("error");
            }
        });
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

后端

 @ResponseBody
    @RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson(); Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12");
        logger.info(callback); return callback+"("+gson.toJson(map)+")";
    }
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

需要注意的是:

  • 前端注意与后端沟通约定jsonp的值,通常默认都是用callback。
  • 后端根据jsonp参数名获取到参数后要与本来要返回的json数据按“callback(json)”的方式构造。
  • 如果要测试的话记得在跨域环境(两台机器)下进行。

完整的示例就是上面两段代码,这里就不提供Github连接了。上面的示例亲测有效,如果有遇到问题的,欢迎留言提问。

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

经验分享 | 如何让设计团队的工作效率提升50%? 原创: 熊猫小生 熊猫设计院

博博

经验分享 | 如何让设计团队的工作效率提升50%?

对于大部分的射击湿以及设计团队来讲,都会遇到如何提升设计效率的问题;尤其是在创业公司,最浪费时间的莫过于:永远撸不完的图及与开发中的设计反复;接下来我将通过自身的一些设计管理经验,从工具使用提升工作效率的角度,跟大家分享下我解决这两个问题的方法。

撸不完的图-处理各方设计需求

一、为什么有撸不完的图?

1、设计的需求方在不断增多:产品、运营、市场、地推、策划等等;

对于大部分的射击湿来说,设计的需求都是越来越多的;尤其是中小型公司由于发展的的需要,公司的人员及部门会越来越多;也就导致后期的设计需求慢慢增加;我们公司就是酱紫的,原来只要考虑产品需求的,现在要考虑运营日常海报、活动设计、市场推广素材、线下门店品牌视觉系统、还有老板的PPT等等。

2、需求不清导致变动频繁:没有目的下需求,缺少需求细节;

在日常的工作中,最麻烦的就是跟需求方确认需求;尤其是口述的需求,没有文案、时间节点及具体的需求描述;比如,我要“五彩斑斓的黑”或者“字要大”这种奇葩需求想一出就是一出的随性需求。

3、对接、确认流程不清晰:没有一套完整有效的对接流程,导致双方扯皮;

二、产生的问题?

1、设计效率及产出质量不高:需求方不满意,然后设计反复浪费时间;

2、项目推进速度变缓:有限的时间达不到设计要求拖慢项目进度,影响业务目标;

三、怎么解决?

1、建立和规范有效的需求对接确认流程:从制度层面解决跨部门协调问题;

首先,对内规范接收和分发需求的流程;将原来粗放的接收方式改为协作工具接收分发需求;其次,对外规范需求下方的格式规范。

2、使用“团队协作工具”统一输入/输出需求:运用工具解决需求接收下放问题;

3、规范需求方下需求的格式:需求包含的各项要点:

  • 时间节点:最好提前几天;

  • 需求描述:需要什么样的;

  • 文案描述:传达什么内容。




开发中的设计反复

一、为什么会出现反复?

1、工具不统一,协作较难:PS与Sketch混用;

我刚进公司的时候,设计团队的三个人用的设计工具和设备都不一样;有的用PS,有的用Sketch,这就造成设计协作难而且设计稿输出格式不同意,开发抱怨的情况,工作推进艰难。

2、标注切图耗时太长:页面中的各个元素都要进行大小、颜色、间距及格式的标注;

设计给开发的输出物有三种:视觉稿、标注及安卓、IOS不同尺寸的切图;以上是保证上线效果的关键;但是传统的手动标注和切图是很浪费时间的。

3、IOS、安卓设计规范差异:两个平台系统差异,有时候要输出两套设计素材;

二、怎么解决?

1、统一设计工具:移动端的设计统一Sketch输出;

2、利用第三方工具Zeplin自动标注设计稿:工具代替原来的手动标注;

3、工具zeplin工具的优势:

  • 自动匹配IOS及安卓平台设计单位、颜色及字体大小等;

  • 设计一套搞定,减少设计师工作量;

  • 设计沟通的效率和质量大大提升;



总结

以上就是我在做设计管理过程中摸索的一些的经验,无论是跟需求方的设计沟通还是和开发的协同配合,都非常的和谐;希望通过此次分享能给遇到相同困惑的小伙伴们一些启发~

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


交互设计篇-如何处理需求 夜月薰衣茶 PMIP

博博

交互设计篇-如何处理需求

夜月薰衣茶 PMIP

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

如何处理需求,是产品经理的基本功,不管是来自老板还是客户的,亦或来自企业内部(运营、业务)及产品本身的发展,产品经理都需要把需求的收集、分析、管理做到有效进行。


一、需求收集

用户调研

运用场景:

产品规划初期或者遇到重大版本迭代,需要重新架构设计时,将会进行用户问卷、用户访谈的方式去挖掘用户的真实需求。

  基本方法:

用户问卷-定量研究的方法,问卷问题一般为15个左右,包含用户基础资料信息(包括年龄、收入、教育水平等人口统计学范畴信息)和主观性的信息(包括用户做这项活动的态度、行为、目的等方面的信息)两大部分,收集到这些数据后进行分析并得出一定结论。

用户访谈-定性研究方法,访谈问题分类包括开放性的问题专业性的问题。问题尽量从简单到复杂,由较宽泛趋于精细;访谈的过程中的问题尽量说的简单易懂,避免专业词汇,让回答问题的用户清楚明白你说什么;避免问一些引导性的问题;不要因为冷场而尴尬过多,多次重复进行讲解,留有一定的时间让用户思考如何回答;尽量问用户一些开放性的问题让用户进行思考回答;用户描述的过程中尽量描述真实使用场景与案例。

两种方法基本为相互补充进行的一个方法,对于不熟悉的业务,问卷编写初期不知该如何进行挖掘用户的问题,寻找五个左右的用户进行相关业务及主要业务用户使用场景访谈,将会总结出一些问题然后加入你要调研清楚的问题包括客观问题主观问题进行用户问卷编写、发放与收集。


用户反馈

  运用场景:

产品专家用户的反馈,包括运营、客服直接获取用户的反馈,通过从微博、论坛、贴吧、软件用户评论等方面寻找用户的反馈。

  基本方法:

市场反馈  做运营、客服、市场等人员和用户进行产品销售推广、运营活动的过程中和用户直接交流,一些专家用户直接反馈出来的需求。具体也要根据产品是直接面向c端客户还是企业级别的客户,两者有很大差异。

访谈  在和用户进行访谈的过程中,一些专家级别的用户直接反馈对现有产品在使用过程中的一些不满和改进的建议等。

查询相关网站 比如产品下载市场、百度贴吧、微博、论坛、微信群、QQ群等各种用户有自由发表言论及感受的地方,用户的直接反馈。

用户直接反馈的信息,需要进行分析其需求的真伪性。


产品定位发展

  运用场景:

产品最终要帮用户解决一个什么样的问题,市场发展环境和公司可支配资源等方面进行综合评估产品的前期、中期、后期的目标定位。

 基本方法:

相关行业专家询问  在发觉一个新产品及市场时,不明确当前市场状况可直接找行业内的一些专家进行聊天交谈,他们对于市场的现状很熟悉,可向该类专家询问产品的定位与发展方向问题。

投资行业的专家交流 最了解市场、发觉市场前景行业及创业想法的投资者,他们对于市场发展的方向及敏感度有一定的专业看法,可与其交流产品的发展方向性的问题。


相关行业专家、投资专家给予的建议和方向最终还需要结合本身公司的定位发展与界定产品的发展定位。


商业画布  一种能够帮助处于高层决定者激发创意、降低猜测、明确目标用户、合理解决其问题的工具,可直接判断出公司产品发展的的优势、资源等最直接有效的方法。

以下为商业画布九宫格主要内容:


数据分析

  运用场景:

产品或运营人员对用户操作规律,用户流失查询等方面进行查看分析,决定产品功能优化迭代最有效直接的证明。

  基本方法:

数据埋点  第三方数据服务平台或者用自己平台后台注入相关代码进行统计。程序员在程序编写时将主要操作、按钮进行数据埋点,通过网站即可查询相关数据。

第三方数据平台 专业做数据的网站会定期进行相关行业数据的发布,查看专业的报告即可获取一些相关数据。


结论

针对收集的需求,大致可分为以下几类:

产品运营类—某项调研结果直接反应出一种现象,将会指导产品运营人员的运营方向朝着这方面努力。比如一款产品预约功能,从团队做用户问卷的结果反馈中,用户更偏向于用微信公众号进行预约,运营团队需要相对在微信公众号预约增加相对的运营的投入。

功能优化类—用户使用某款产品的某个功能目的就是为了达到其某个目的,对于功能效率或用户体验上满足,将会直接影响用户的去留,优化该功能的用户体验满意度及效率将会提升用户的留存量。

新功能—产品功能的延伸或新增,通过用户研究,发现用户针对某个需求的实现很迫切,该需求就算新功能,可评估该功能紧急程度及效果进行功能设计满足。


二、需求分析

 

重要度、频率二维度

 运用场景:

当接到多个需求,因为时间原因,只能进行个别需求满足,评估优先级时,可用该方法进行简单需求评估分析。

 基本方法:

将功能需求按照重要度和频率进行四象限划分,重要高频象限中的需求要首先进行解决。重要度和频率如何进行衡量,频率衡量即使用的频次,重要度衡量判别是否会因为该需求的缺少而影响用户使用。


KANO模型分析

  运用场景:

产品重大版本迭代,因为时间等问题,只能选择个别两三个功能进行优化,但是优化的需求点比较多,可以直接向用户进行问题编辑,查看用户满意度选择进行优化。

  基本方法:

(1)从顾客角度认识产品或服务需要;

(2)设计问卷调查表;

(3)实施有效的问卷调查;

(4)将调查结果分类汇总,建立质量原型;

(5)分析质量原型,识别具体测量指标的敏感性

二维属性归属分类


场景化思维

  运用场景:

通过模拟或发现真实场景,预测用户行为从而进行设计。

  基本方法:

从交互五要素考虑,人、目的、行为、环境、媒介几个关键点去创造用户真实的使用场景。在什么地方,哪个人做了什么事,运用了哪些东西,达到了什么样的目的,遇到了什么样的问题,怎么进行处理解决。例:在淘票票购买电影票后,付款时推荐购买零食信息。

用户体验地图

 运用场景:

适用于任何场景,更适合在可能存在问题或者改进机会的事件上。

  基本方法:


  • 归纳用户该使用场景下的触点

  • 画出情感坐标

  • 寻找用户进行触点体验情感、意见描述

  • 归纳用户体验意见

  • 绘制情感曲线

  • 标注用户重要性意见


需求分析的方法很多种,以上仅列出部分,方法只是分析的一种工具,最主要还是通过方法分析需求得出的解决方案。


三、需求管理

  

需求提交

简单来说,就是将收集到的需求,在评估完优先级,确认做具体需求功能时将该需求开发计划告知相关开发、测试等人员,让其明确即将完成的功能需求。如功能需求相对应的方案设计、业务流程等内容提前与开发总监沟通好上传至公司统一管理文件处,具体根据不同公司的实际情况。


需求评估

需求功能的相关开发者、测试针对该需求达成统一认知和开发周期认定,使得相关开发人员在开发周期内有效配合开发,测试人员明确该如何进行有效测试,针对同一需求能够有效推进实现。


需求跟踪

 在开发过程能够及时跟进开发,一确保其开发功能达到预期效果,二有任何异常情况的发生能及时进行处理解决,三有效把控需求的开发周期,保证需求按期交付。


需求变更

当需求提出方提出需求变更或者在内部评审、开发过程导致需求变更,做好相关需求变更的把控,以防需求变更后导致项目无法执行。

      a.评估需求变更与原需求的差异

首先,明确需求变更的原因—是需求提出方进行需求变更还是内部原因导致需求变更。其次,需求变更后与原先需求定义是否有较大冲突,如有较大冲突,评估变更前后的利害关系,哪个更能有效达目的/效果,按评估结果执行;如无较大冲突,评估与原需求的紧急程度及时间安排,进行需求变更解决。最终,有效记录需求变更计划及原因,定期进行总结,评估相关解决方案。

       b.评估需求变更导致的结果

如需求变更后,利大于弊,允许变更,但需按照需求变更的规程执行,以防出现意外情况产生不必要的责任,失去相关控制。如需求变更后,利小于弊,拒绝变更.




优作|南非开普敦MUTI工作室设计赏析

博博

优作|南非开普敦MUTI工作室设计赏析 

 BIGD

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

MUTI是一家位于南非开普敦的创意工作室,他们的业务范围非常广,为许多品牌企业都提供过服务,运动品牌如耐克,服装品牌如优衣库,手机品牌如三星,杂志如Monocle 杂志、西捷航空杂志等等都有过他们的影子,同时他们的设计能力综合,从插画到字体设计再到Icon图标设计都十分强大。


WestJet Magazine

The Hound and The Hare

Brown Coffee & Bakery

World Wildlife Magazine

John Hopkins Magazine

Knight Time

Forbes Japan

Georges Magazine

WestJet Magazine

Lonely Planet Magazine

Flying High

Lonely Planet Magazine


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

《延禧攻略》输了!这部剧的画面更高级?

博博

《延禧攻略》输了!这部剧的画面更高级?

BIGD

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一定会成为优秀设计师的朋友们!

最近剧真的太多了,

小编还没从卫龙女孩的队伍里脱离出来,

如懿传就已经安排上了。

而且小编最近又发现一部新剧!

《天盛长歌》

对比《如懿传》大红大绿的配色

(虽然浮夸的色彩更符合乾隆时期的蜜汁审美)

它的配色和画风简直良心的不要!

而且官宣也很佛系,

总之就是没见着过啥大动静,

可是豆瓣评分居然比《延禧攻略》还要高



虽然凭借“IP+超级卡司+大制作”

获得了较高的评分,

《天盛长歌》自播出后就反响平平,

收视一度扑街,

虽然小编还没看剧不知道它扑街的原因,

但单单从剧照和海报就能看出

剧组是真的下功夫了!!

服装精致,布景豪华,

还专门使用了电影的宽画幅比

场面变得更加宏大更有代入感!



官方发布的色卡看起来也很高级










海报也值得一看~


 主题海报 


- 壁影成双版海报 -


这世间自有百态浮生,千种际遇,万般辽阔山河。

看似光影阑珊,皆在你我眸间。




 微雨细语版海报 

感谢这亭外风雨漫天,你我才能在这亭中独处片刻。





 咫尺千山版海报 


此爱隔山海,山可平,海可越;

此义重天地,天有道,地有情。

家国在心,苍生在肩,不敢忘,莫能负。




 眸绘天光版海报 


天高地阔,可纳日月山河于怀,可藏情深意笃于心。

此念,不灭。



丹心一片,不曾忘情忘恩忘前尘,惟愿守己守家守苍生。

此意,可鉴。



风霜不顾,只求守得云开;此身不吝,但求所愿得偿。

此途,不忘。



趁年华岁月,追随不弃;经世事不易,伴君功成。

此生,不枉。



愿安一隅,享人世繁华;纵有风雨,念郎君顺遂。

此求,可得。




扎心剧照海报 


在光影间蓬勃而生,于明暗外纤毫毕现。

君有箴言相赠,吾自铭感于心。




 开播倒计时海报 


圆融不争,锋霜无畏。一方明镜如水,此情,不负。

距离相遇,还有3天


善恶得报,世存公道。一盏心灯如旧,此志,不改。

距离相识,还有2天。


六合既定,共享安宁。一卷长书如悟,此意,不移。

距离相知,还有1天。


热点节点借势海报 

- 七夕 | 天盛七夕节 -



看完这些海报和剧照之后,

你们有没有被吸引到呢?

留言告诉小编吧~


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


PS高手都想知道的10个PS心得

博博

PS高手都想知道的10个PS心得

平面设计ps教程cdr和ai教程

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

当我们看的PS教程越来越多、掌握的PS技巧越来越多的时候,可能就反思最初看到的教程到底是不是正确的。而今天国外精品翻译教程就跟大家一起来看看Photoshop高手分享的10个Photoshop心得,妥妥的干货!


图00

1.在背景图层上直接编辑

由于PS初学者总会犯些小错误,所以大多数的Photoshop教程都会要求创建副本,然后在副本上进行操作,即使出错都可以迅速回到原点,再次进行操作。不过,如果你已经意识到自己的每一步操作都能令作品更加完美,那就没有需要再回到原点了。

选择“图层>新图层>复制创建新图层”,或者使用快捷键Ctrl+J,就可以很简单地创建副本。但是过多的图层会让图层管理变得困难,特别是要从众多图层中找出目标对象的时候,很费时间。因此,如果有人说创建副本或者弄多几个图层时,其实你需要想想再进行操作。

如果只是对单一背景图层进行操作,就可以完全不管图层面板,以及担心创建副本影响PS运行速度的事情。当然,这听起来很简单,但要改变长期形成的操作习惯以及知道什么时候需要创建副本却不是那么容易的。所以操作前,先想想接下来的动作,尽量避免无用功。


图01

2.用好橡皮擦工具

橡皮擦与图层蒙版的功能比较类似,通过“擦掉”和“遮蔽”,就能将不想要的像素不显示出来。而图层蒙版的优点在于通过改变蒙版颜色的不透明度,达到不同程度的遮蔽效果。所以在大多数情况下都比较建议选用图层蒙版,因为蒙版下的图像仍在,只是被“遮蔽”,只要改变黑色的深浅就将图像显示出来。


图02

图层蒙版的广泛应用例子很多。比如,在使用新增调整图层时,也会发现选择“图层>新增调整图层>”,然后随意选择其中一种调整图层,都会附加一个图层蒙版。


图03

但是,对于橡皮擦来说,它的功能更加直接。想象一下,当你拿着一支笔和一张纸,如果想去掉某些图案,最直接的想法就是擦掉,而擦掉的后果就是原来的图案将永不存在。而在Photoshop中,橡皮擦事实上就延续着我们在实际画画过程中的习惯。

从上面的比较中可以看出,橡皮擦和图层蒙版最大的不同点在于橡皮擦是真实地去掉图像,而蒙版只是遮蔽图像。而蒙版的灵活性同时也是缺点之一,一旦黑色的深浅没有控制好,不能完全遮蔽图像,就会影响整个作品,而橡皮擦是百分之一百去掉的。所以当确定需要完全去掉图像时,请勇敢地选择橡皮擦。

3.不要忘记魔棒工具

关于创建选区,很多人第一时间都会想到钢笔工具、快速选择、套索工具等等,而魔棒工具往往被人们忽略掉。魔棒就如它的名字一样,充满魔力,轻轻一点击,就会自动将与点击位置颜色基本相同的区域选择起来,并且可以通过设置容差值,调整选择范围。在图像存在明显边缘的情况下,魔棒工具可以说是最佳选项。

为了抠图或者创建蒙版,往往需要创建选区,不需要局限在某种抠图手段,根据图像实际情况,选择自己拿手的是最优选项。


图04


图05



图06

4.键盘快捷键会让人错过一些发现

在Photoshop教程中,时常提及通过使用键盘快捷键进行操作。比如,通过复制目标图层来创建新图层,快捷键是Ctrl+J,菜单选择是“图层>新建>通过拷贝的图层”。

使用快捷键的确能提高操作效率,但同时也会让你错过一些学习的机会。当你使用快捷键进行操作的时候,就不会想从主场单中选择“图层>新建”,然后就不会知道存在另外一种方式:“通过剪切的图层”——原图层选区内的像素剪切到新图层中,这里包含了剪切和创建新图层两步操作,而“通过剪切的图层”一步就能完成。

并且Photoshop中还提供了自定义键盘快捷键的功能,选择“编辑>键盘快捷键”,所以不让只是遵循教程提供的一种方法,尝试一下别的,可能会更加有趣。


图07

5.图层样式按需设置

在应用图层样式的时候,会注意到图层样式已经具有默认设置,而且这些默认设置通常“也不差”。因为这些默认设置是Adobe经过长时间研发和改良,并且随着时间的发展也在逐步完善。图层样式中,描边的默认颜色是红色,而现在的颜色是黑色。其实默认图层样式是相对的,它是Adobe长年累月的应用积累得出的。而对于Photoshop使用者,可以在各种教程的指导下,尝试各种设置选项,调试各种效果。

就如下面的文字的投影效果都很漂亮。单从效果是不知道这些漂亮的背后是怎么操作,如果点击打开图层样式就会发现,这些投影都有各自的角度。所以,下次应用图层样式的时候考虑一下实际应用需求。


图08


图08


图09

6.名字只是唤起记忆的符号

在处理数量不多图层时,我们可以不用怎么注意命名。当图层数量越来越多的时候,可以通过删减不必要的图层数量,简化图层结构,然后结合适当的命名方式,进一步优化对图层管理。对于图层命名可能会存在一个误区,就是命名描述得越详细越好。要记住,命名只是一个符号,主要区别于其他图层,具有大致的特征就可以,不然混含颜色、内容描述的命名组合会让人看到发晕。


图11

在Photoshop中,当对一个图层进行命名的时候,按着Tab键就可以对下个图层进行命名,可以说对每个图层命名是很容易的,但并不是没创建都要花一番心血弄个命名体系。就如图层不多的时候,采用默认命名方式“图层1”、“图层2”或者“图层2副本”,就可以满足需求。如果是头条文字图层,可以考虑命名为“背景文字”。当选用素材时,就不用将素材的引用名称都包含到图层命名中,相反可能命名得奇葩一点,可能效果会更加好。


图12

7.PS离不开鼠标

现在你们在用什么滚动翻阅着这篇文章呢,是手机的触摸屏还是鼠标滚轮,或者笔记本上的触控板?在任何情况下,都需要清楚知道屏幕翻动的方式。如今随着输入设备的发展,越来越多教程在推崇试用数位板等压力感应式输入设备。


图13

压力感应式输入设备与鼠标各有各优点。使用触控板或者数位板时,就像画画一样拿起画笔,在Photoshop上画出来。而鼠标虽然已经发明使用很长时间了,但对手掌来说,仍然是最完美的定点设备。如果拿起触控笔,操作方式将会完全跟鼠标不同。


图14

图像是由一个个细小像素组成,在精细度控制方面鼠标具有无与伦比的操作特性,也是触控类输入设备所难以比拟的。因此,在选用输入设备方面建议优先选用鼠标。


图15

8.不要怕高分辨率

有时候我们会听到说图像的分辨率很重要,太小就会显示不清楚,必须采用高分辨率,然后就开始听到关于DPI、PPI的各种解释,就会相信不能随便使用从网上下载的图像,因为它们的分辨率都太低或者尺寸太小。


图16

图像分辨率是指单位英寸中所包含的像素点数。随着图像技术的发展,理论上图像分辨率会越来越大。但是为什么一定要采用高分辨率呢?显示设备的日渐发展是一个原因,另一种结论是网络资源输出的控制。我们都知道图像素材作为一种网络资源,具有它的使用价值。当市场的使用要求比较高的时候,先抛出低质量的资源,再通过一些手段控制高质量资源的输出。

我们不用太多理会策略的东西,只要知道怎么解决就行!下面将会介绍怎么通过Photoshop来克服低分辨率的问题。

Step 1

打开Photoshop,选择“图像>图像大小”,设置图像各自增大200%,勾选重新取样,设置保留细节(扩大)。


图17

Step 2

选择“滤镜>锐化>USM锐化”,设置数量、半径、阀值,将放大产生的模糊或者失真尽量消除。这样图像尺寸就是原来的两倍,并且不需要高分辨率。学会了赶紧试试吧。


图18

9.控制Photoshop的内存使用空间

我们都知道Photoshop对电脑性能要求比较高,对CPU、内存的占用率也是比较大的。在之前的学习中,大家可能也知道一些关于优化性能、提高Photoshop运行效率的技巧。


图19


图20

但是,为什么Photoshop需要占用这么大的CPU和内存呢?除了处理图像之外,Photoshop还可能利用额外的内存或者CPU性能进行画面捕捉、记录行为等。但是这些与我们使用Photoshop基本无关,选择“编辑>首选项>性能”,在内存使用情况的设置框中调节让Photoshop使用的内存空间。让Photoshop使用的内存空间越少,可让PS进行额外记录捕捉的空间就越少。


图21

PS:Photoshop是否进行额外的画面捕捉或者记录就不得而知,但是有个秘密画面可以看一下:关闭PS重新启动,然后按着Ctrl,点击“帮助>关于Photoshop”,这时会出现一个秘密画面。


图22

10.合并图层节省空间

使用Photoshop过程往往会产生巨大的PSD文件。这些PSD文件包含非常多的图层,常占用超大的硬盘空间,如果想将这样的超级文件发送给其他人,基本上不用考虑E-mail,如果扔到U盘或者移动硬盘传输,就要慢慢等着进度条爬满。

合并图层工具作为一个不完全的解决方案,可以将PSD超级文件缩减为小文件。要注意合并过程会将隐藏图层扔掉哦。

下面是一个简单的例子:原PSD文件399MB,经过合并后,体积缩小至27.8MB,缩减比例达到93%,并且出图质量与原文件相差无几,有需要的朋友要记住了哦!


图23


图24

小结

本期的国外精品PS教程就到这里结束啦。文章提及的小技巧虽然比较简单,但是对我们拓展Photoshop使用思路是有一定的帮助,特别是对一些PS工具的使用方法上也会有新的了解。感兴趣的朋友可以记录下来,一一练习吸收。希望大家能通过这次的PS教程进一步提高PS技能,打造出更加出色的作品。




乾隆气哭了:《延禧攻略》不是莫兰迪色,而是中国传统色!

博博

乾隆气哭了:《延禧攻略》不是莫兰迪色,而是中国传统色!

平面设计ps教程cdr和ai教程

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


授权转自:艺非凡(ID:efifan)

每一种色彩,

都是一份匠心、一段历史。


中国传统色


一部《延禧攻略》,

火了永远的白月光富察•容音,

火了大家共同的敌人拔丝尔晴,

还火了“大猪蹄子”乾隆皇帝,

火到油管播放都破了10亿。


#以为傅恒买了iphone#


究其原因,

还是画面配色高级唯美,

让监制于正彻底洗刷了  

“阿宝色”黑历史。


从前的于正剧

现在的于正剧


网上不仅一片叫好,

还专门把这剧的配色命名为

“延禧莫兰迪色”



这看着也很是纳闷,

《延禧攻略》的配色,

分明是最正统不过的中国色

怎么还跟外国画家扯上关系了?



莫兰迪出生于20世纪初,

是一位意大利画家。

一生尽画些清汤寡水的瓶瓶罐罐,

反而因为低饱和度的特点,

在2018年被设计圈看中。

从此“高级灰”“性冷淡”成了明日黄花,

为了蹭上这波热度,

大家统统改名为“莫兰迪色”。



但是《延禧攻略》里的中国色,

可无心蹭这波热度。

莫兰迪色多以白色调和,

中国色多以墨色调和,

以明度纯度来判断简直天南地北,

差了整整两个色调。

「延禧」的服化道   

为了贴近传统花费了不少心血,

现在你却跟我说这是莫兰迪色?



《尚书》里写:

“以五采彰施於五色,作服,汝明。”

赤、黄、青、黑、白,

五色观是中国色的基础。


 01 



从周朝开始,

“朱色”就成了中国正统。

工匠把朱砂矿石细细研磨,

涂嵌在甲骨文上以示“高亮”,

历经3000年不褪色。



后来又有了天子朱批、贵胄朱门。

抄写佛经也要用朱砂。

「延禧红」即是朱砂红,

朱砂红便是中国红


恽寿平(清)


「延禧」中的宫门红墙,

均以朱色表示富贵。



傅恒、海兰察穿的侍卫服,

采用了烟红这种颜色   

专门用来制作古代的僧袍,

以及批量生产的制服。



刚入宫做小绣女时的粉装,

容易被认成莫兰迪色里的“高级粉”,

实则是中国传统色“十样锦”

由唐朝女诗人把信笺染成粉色而来。


张熊(清)


 02 



黄色五行属中,象征中正帝统。

又是土地的颜色,十分尊贵。

唐代开始就只有皇族可以使用。

而且黄色越纯,权利越大



「延禧」中只有皇帝、皇后

和贵妃才能用黄色。



 03 


蓝紫


古代的靛青色,

要从珍贵的青金石里提取,

有钱人家富太太专用色

也是剧中辉发那拉氏皇后的最爱。



莫高窟壁画中,

就使用了大量青金石  

制成的靛蓝颜料。

这可不是欧洲色地中海色,

而是纯正的中国色。



就连最接近莫兰迪色的紫色系,

也是传统中国色中的丁香色



 04 


青绿


冒着失去女朋友的风险,

小编还是要冒死说一句:

我喜欢尔晴  

常穿的那件墨绿旗装。



「延禧」中以粗晶皂和墨绿相配

正是明清时期国画常用的手法,

以粗晶皂为底色,

画上墨绿的枝叶。


乾隆御笔《水仙册》


魏姐就不适合穿墨绿,

而是用「荷绿+月白」

来表现素雅单纯的假象。



虽然都有低饱和度的特点,

但中国传统色,

是以水和墨来控制深浅,

色彩饱满不蒙灰,

和莫兰迪色系的高灰高白完全不同。



整部「延禧」的布景和服装,

采用了中国传统色之后,

呈现出了一种和谐稳定的感觉,

纯而不艳、灰而不脏。

就连群像都丝毫不乱,

满溢着微微泛黄的古画质感。



要知道在真正的历史上,

中国工匠为了制作这些传统色,

从春秋战国起,

历经了三千年艰难的探索。



上文提到的传统颜料

大多从天然矿石植物中提取。

一个合格的颜料匠人,

先要有一双慧眼,

在崇山峻岭中走上好几天,

发现适合提炼的岩石、植物。

有时几个月才能让找到1两适合的矿石。


GIF截自二更视频对颜料大师仇庆年的采访


再备上四件套:

榔头、石杵、石盆、瓷碗。

用榔头把矿石敲得稀碎,



再用筛子过滤掉粗糙的颗粒。



接着就是一天8小时枯燥的打磨

就一个动作,

手握石杵在钵里用力旋转,

耳边不断循环刺耳的滋啦滋啦声,

直到没有声音才算成了。



很脏、很累、很寂寞,

这种足以把人逼疯的单调,

是颜料匠人几十年如一日的日常。



至少一月有余,

才能做出小小一方颜料。

只有用手磨出来的颜料,

才能历经千年不褪色。


甲骨文的朱砂,没有褪色(3000年),

马王堆的帛画,没有褪色(2000年),

敦煌的壁画,没有褪色(1500年),

《千里江山图》,没有褪色(1000年)。



正是制作不易,

每一种传统色,

都有一个极富韵味的中国名。

燕地女子采撷红蓝花捣汁凝成脂块,

是为「胭脂」


画师:朴缜


宋徽宗梦见烟雨初霁,

水白而天空青成一片,

是为「天青」


宋汝窑水仙盆


唐朝女诗人薛涛,

用草木将信笺染粉写少女心事,

是为「十样锦」



中国工匠历经艰难,

制作了中国色。

中国画师钻研毕生,

把中国色用到。

每一种传统色,

都印刻着中国的历史。

现在终于有一部像样的古装剧出现,

却被莫兰迪色抢走了风头,

皮皮都要为传统色鸣不平了。


画师:朴缜


谁都知道,

莫兰迪会画画时,

大清都已经亡了。

只因近两年莫兰迪色风头正劲,

成了人人皆知的潮流色,

大家才会认为「延禧攻略」

采用了莫兰迪色系。

说到底,还是对中国传统色的

不了解、不熟悉。



其实中国传统色,

有着悠久的历史、淳厚的积淀,

每一色都纯正高级、堪称至美。



希望有一天,

再次看到「延禧攻略」

这样配色唯美的古装剧,

我们可以自信自豪地说出,

这不是莫兰迪色、霍克尼色、博纳尔色,

而是美了数千年的中国色。


参考资料:

二更视频《这才是真正的中国色》

中国色网: zhongguose.com

图片来自《延禧攻略》官方剧照

作者:RORO


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

迅速掌握不同插画风格的方法:仿型与破型

博博

迅速掌握不同插画风格的方法:仿型与破型

沉下(李以杰) 西见

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

不管是UI设计中还是营销活动中,插画都有很高的出场率,原因并不复杂:插画比起图片可控性更强,更容易发挥创意,营造氛围,传递信息。从内容到技术细节,插画都在某种程度上超过现成的图片。


作为视觉设计师,我们也常常会接到各种各样的需求,针对不同的项目和产品绘制插画,往往项目时间紧张但又需要在插画展示上有差异性。

但看着网上风格各异的插图,往往想学习却又无从下手,该怎么办?


下面我将从仿型和破型两个角度来阐述,如何快速掌握风格各异的插画。



dribbble上形式各异的插画  

图片来源:dribbble




01


仿型


仿型,可说是一个模仿、练习的过程。选择喜欢的插画作为学习对象,拆解画面构成元素,总结代表性特征,了解其思考方式,是一种理解原作者绘画思路和想法的过程。


我们从形式上来说可以将一张插画拆解为5个构成元素:构图、造型、素描关系、配色和肌理。



1. 构图


构图是一张插画的骨架,各个元素按照设计的位置、大小排列在画面中,就能形成一张画最基础的模样。概括来说,最基本的构图有如下这么几种:


1.1 环型

环形构图是非常常见的一种形式感很强的构图,往往画幅中心存在一个视觉焦点,围绕视觉焦点发散/聚拢元素。



1.2 对称

对称构图的画面中存在一个轴线,画面元素围绕轴线两边对称。这种对称既可以追求强形式感的动态对称,也可以是相对的形成一种视觉平衡的动态对称。



1.3 平铺

平铺构图的画面往往不存在一个明确的视觉中心,所有的元素均匀的充满着画面,强调整体的统一性。


1.4 S型

S型构图是非常常见的一种构图方式,形式灵活多变,相信很多接受过素描静物训练的同学一定对此不陌生。S型构图重点不在于元素的布局是“S”或是“Z”,而是利用错位布局,营造空间,增强画面的节奏感。往往S型构图有着明显的层次关系,元素在空间上可以分为前、中、后景。



2. 造型


同样的元素,在不同的设计师手上画出的感觉一定是不同的,一个插画师最明显的风格特征也往往体现在造型的独特性上。造型的类别是无法枚举的,写实或抽象、松弛或硬朗、精细或概括...对造型感的提升需要我们多看优秀的作品辅以大量的练习。


风格迥异的人物造型 插画来源:dribbble


3. 素描关系


素描关系这个词想必大家不陌生,严格来说它也是造型的要素之一,单独提出来是方便大家更好的理解。素描关系由高光、灰部、明暗交界线、暗部、反光、投影组成。一个元素加哪几种素描关系,怎么加,加在那,什么肌理,都能左右一张插画的视觉风格。一般来说,对素描关系处理的越多,画面会有更多的细节,更趋近于写实。


素描关系由少到多



4. 配色


人类的视觉感知系统,对于颜色是第一位的,其次是形状。插图的颜色往往能决定观者的第一印象。对于配色,我们需要注意两点:


4.1 颜色的配比

决定画面整体色调的颜色,一般占画面60%以上,余下有30%的辅助色,10%的点缀色。这并不意味着画面中只能出现三个颜色,但是三个纬度的颜色需要尽量在色相上保持接近。


4.2 颜色的对比

首先我们要明确画面中有无对比。

颜色三要素:色相、明度、纯度。相应的对比也分为色相的对比,明度的对比,纯度的对比,当然更多时候是混用的。对比的作用有很多,较强的对比可以使得你的画面更富层次感和视觉冲击力,较弱的对比则营造一种柔和自然的感受。


不同类型色彩对比营造的画面

插图来源:dribbble


5. 肌理


肌理本是指物体表面的组织纹理结构,即各种纵横交错、高低不平、粗糙平滑的纹理变化,是表达人对设计物表面纹理特征的感受,是一种三维的概念。在这里,肌理所指的含义与质感相近,是一种二维概念。我们可以通过刻意制造的笔触感、噪点、纹理等,使得画面蕴含丰富的细节,更加耐看。

对同一元素的不同肌理表现






02



破型


破型,就是在充分理解学习对象构成的基础上,结合自己的风格痕迹和需要表现的内容,形成新的插画画面。

好的插画是形式与内容的完美结合,优秀的表现形式是为了传递信息,你应该明确插画需要传递何种信息,并且让所有的元素为之服务。

缺少内容创作的插画学习会失去内涵乃至成为抄袭,这是我们一定要避免的。如何更好的结合内容呢?


1. 理解各个元素的视觉表意


环形构图更聚焦,对称构图更具形式感;曲线的运用会让画面更柔和,贴近自然,直线与几何则更具现代感和科技感。先要理解各个元素所隐含的视觉语言,再通过你想传达的内容去挑选合适的呈现方式


2. 构建一个故事


想象一个故事,谁(who),在哪(where),什么时间(when),做什么事(what),怎样在做(how)?


比如说,如果是想画关于工作的故事,是谁在工作(加班狗),在哪(工位),什么时间(深夜),做什么事(加班),怎样在做(几个人讨论需求)。


然后我们再问自己一个问题:这个故事要传达什么情绪(有趣、温馨...)。

不断思考这样的问题,完成从故事到画面的转变,画面里物境-情境-意境的搭建。


3. 视觉转译


故事是文字,我们需要将文字视觉转译为图形。


让我们接着上面继续想:怎样造型的加班狗是有趣的,什么表情是温馨的?加班的桌上应该有什么?怎样的色彩和素描关系可以表现深夜,又体现出温馨? 等等。


答案也许会一点点浮现:深夜这个词从颜色的纬度,应该是冷色调的;从素描关系的纬度,应该是具有较深的投影,较强的高光,乃至是一个背光。


一点点的细化你的故事,将每一个词转化为可见的图形和颜色,并且快速的反馈到你的草图中去。当然,这个过程对于每个人来说都会得到不同的结果,自信一点,这才是你创作中最与众不同的部分

采用这样的思路,我们可以快速的创作不同风格的插画:


左侧为作者练习 右侧为学习对象





03



几个建议


1. 关上电脑


在自主创作的阶段中,我们一定会遇到想法不够,不知该如何进行下去的时候,此时应该避免回过头去看学习的对象,这样会让自己的创作变的局限,从而越来越像原作。


2. 足够细致的草稿


很多人对待草稿是不够用心的,粗糙的草图意味着你并没有真正做好独立创作的准备。请尽量保证从投影的造型到人物脸部的配色,每一个元素的细节都能在草稿画完之后心中有数,这样才能使你避免你对着AIPS中的半成品不知所措。


作者平日的草稿


3. 向经典学习


dribbble上固然能提供许多新鲜的想法和创意,但是不妨去了解一下新艺术运动的插图,席勒的速写,达达主义和立体主义的海报等等,你会发现艺术史上如此多大师和流派,都是取之不尽用之不竭的灵感源泉。


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

日历

链接

个人资料

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

存档