首页

如何创建人物插图——2018年世界杯版

博博


如何创建人物插图——2018年世界杯版 

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


五步创作2018世界杯超级球星插画


2018年世界杯赛正在如火如荼地进行,为了以示庆祝,我们挑选了来自多个国家的25位超级明星,给他们创作人物插图,送给广大球迷们。在创作过程中,Leo Natsume&Daniel Nyari给了我们很多灵感,非常感谢!


为了准确地画出每个球星的面部结构特征,一开始收集材料的时候就要收集的全一些。我们要从照片中提取每位球星的准确特征,这样最后做出来的插画才能“形神兼备”,才能非常生动。

让我们一起来看看设计思考的过程吧。



    

第一步


观察人物要从不同角度来看——正面,45度和侧面轮廓。此外,我们还需要收集不同面部表情的照片,比如冲刺的时候、休息的时候、微笑的时候等,才能更了解人物。做设计,我们不仅要看到“形”,还要看到“神”,多了解人物的个性和习惯有助于我们做出更有灵魂的设计创意。





第二步


接下来,我们要根据刚刚从不同角度做的人物分析总结一般面部结构和特征。我们以梅西为例,他留着经典的复古发型、大耳朵、小而有神的眼睛。当然,为了保持插图最终的统一性,所有人物的视线水平需要保持一致,并且应该根据人脸的长度和宽度以及发型进行调整。






第三步


通过前两个步骤之后,现在我们已经有了人物的主要图像了。现在,可以开始考虑人物的种族,肤色,发型和制服的颜色了,这样有助于做出原汁原味的人物视觉。同时,我们必须调整整体色调来调节亮度和饱和度的差异。





第四步


这是最关键的一步。完成以上所有操作后,就可以根据前面步骤中收集的照片选择每个球星最具特色的面部表情。例如,梅西微笑着轻轻抬起头的样子最吸引人,我们就选这个表情。







第五步


这是最后一步,我们将做细节的调整,包括人物的整体图像结构、颜色对比度、面部元素之间的比例等。然后再添加其他内容,如条纹、耐克/阿迪达斯徽标和其他此类细节。最后,将设计草稿缩小200%,以确定某些地方的设计是否足够亮。





经过上述五个步骤之后,我们的球星插画就出炉啦。我们一共设计了25位球星插画,挑选部分比较好的展示一下。And,祝大家看世界杯愉快!



























作者:Queble

翻译:熊小熊

原文链接:https://uxplanet.org/how-to-create-character-illustrations-2018-world-cup-edition-8a709dcfd589


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



表格设计(上篇):18种样式,与你分享

资深UI设计者

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

最近在做一款工具类软件,主要涉及表格的设计,边工作边整理了一些表格的设计样式和原型图,拿出来与需要的人分享。欢迎与我交流,有需要原型的小伙伴也欢迎在下方留言。

表格样式一

表格样式主要分为两大类,第一类表格中通常以一行为组,操作均是以组为单位进行。此类表格优点是简单直观,操作感强,可提前设定好计算公式;缺点是对于某一数据的批量操作较为复杂,不方便自定义复杂计算。

常用于信息展示,无需复杂计算的网页和C端界面中。

表格样式一:缝隙

第一类表格以行为一组,表头通常固定在最上端不参与滑动,现代设计为了美观通常也没有单元格的线框,设计时为了更直观的体现一条数据,可以在每条数据之间留一个缝隙。

表格样式一:斑马线

或者用斑马线形式更直观的展示数据,避免用户可能看串行的对不齐数据的情况。

表格样式一:按钮

为了页面的简洁可以将上端按钮尽可能减少,整个表格上端原则上保留批量操作功能按钮,对于单行的操作按钮可以放置在单行中悬浮展示。

表格样式一:拖拽

因为单行是一个模块,当有需要调整顺序时可以支持整行的拖拽操作。

表格样式一:分页1

当内容较多需要除了无限滚动外,还可以选用分页的方式,目前较为常见的可以选择如下方式。

表格样式一:分页2

若不需要突出页码,主要查看都在第一页上时可以考虑将放在角落里,到达首页和到达尾页根据产品需求决定是否使用。

表格样式一:搜索

搜索功能考虑到用户需要手动输入,很难保证精准搜索,原则上所有搜索均为模糊搜索,必要精准搜索的地方使用筛选功能,给用户提供筛选选项。通常上端搜索栏不被限定搜索范围,可以全部搜索。

表格样式一:分项搜索

对比必要的分项搜索功能可以对应到各个列中,同时输入时可以给出联想结果,仍然应该设计为模糊搜索。

表格样式一:筛选

对于各个列中必须精准搜索的数据可以设计为筛选功能,可为用户提供可勾选的筛选信息。

表格样式一:高级筛选

对于部分列有筛选需求的情况,可以设计弹框输入筛选条件,也可以在此设计复杂筛选条件,筛选规则在上端展示,可以更直观的看到已筛选项。

表格样式一:可编辑单元格提示

表格中存在可编辑单元格和不可编辑单元格时,为了界面的一致性和美观性,可以考虑鼠标悬浮时给出可编辑单元格的编辑框,区分两种不同单元格样式。

表格样式一:信息预览(浮窗)

对于汇总表中如有预览详情的需要,同时对于数据仅为查看没有修改需要的时候可以考虑悬浮提示将主要数据进行展示。

表格样式一:信息预览(弹窗+蒙板)

对于详细有部分属性修改需求,对于细节没有修改需求的,可以考虑在一侧弹出弹框进行展示和修改属性。(如报价单表格信息,报价单审核状态的可以在此修改,详细信息仍在明细表中修改)

表格样式一:信息预览(折叠)

折叠模式的使用环境基本等同于弹出模式,可根据设计风格进行选择。

表格样式一:信息预览(弹窗)

单独弹出窗口在需要有多项数据进行对比查看时可以选用,弹出窗体操作通常只考虑状态改变,不建议其他数据在此更改。

表格样式一:信息预览(变导航)

此种展示方式,对于需要查看和修改较多数据的需求可以选中,汇总表将收为类似于导航栏的模式,数据可以精简只展示关键数据,弹窗可设计复杂操作,可以包含明细的修改等功能。

表格样式一:信息预览(变窗体结构)

通过减少列表高度流出信息展示空间,建议两部分在一屏内展示可分别滑动或翻页,汇总表信息完整,弹出窗体也可进行复杂操作设计。

表格样式一:信息预览(自定义表头)

自定义表头设计可以将此操作藏在较明显的位置同时可以保证界面的简洁。

后续

上篇中主要展示了一些表格样式一的一些操作习惯,除此之外还会在很多专业工具的设计中用到另一种展现形式类似于EXCEL表格。

欢迎各位做过类似项目的产品经理与我多多交流,如有需要原型的小伙伴可以在下方留言,我再将下载地址放出。如果大家喜欢这篇文章我会继续完成下篇的内容。

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

表格设计(上篇):18种样式,与你分享

资深UI设计者

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

最近在做一款工具类软件,主要涉及表格的设计,边工作边整理了一些表格的设计样式和原型图,拿出来与需要的人分享。欢迎与我交流,有需要原型的小伙伴也欢迎在下方留言。

表格样式一

表格样式主要分为两大类,第一类表格中通常以一行为组,操作均是以组为单位进行。此类表格优点是简单直观,操作感强,可提前设定好计算公式;缺点是对于某一数据的批量操作较为复杂,不方便自定义复杂计算。

常用于信息展示,无需复杂计算的网页和C端界面中。

表格样式一:缝隙

第一类表格以行为一组,表头通常固定在最上端不参与滑动,现代设计为了美观通常也没有单元格的线框,设计时为了更直观的体现一条数据,可以在每条数据之间留一个缝隙。

表格样式一:斑马线

或者用斑马线形式更直观的展示数据,避免用户可能看串行的对不齐数据的情况。

表格样式一:按钮

为了页面的简洁可以将上端按钮尽可能减少,整个表格上端原则上保留批量操作功能按钮,对于单行的操作按钮可以放置在单行中悬浮展示。

表格样式一:拖拽

因为单行是一个模块,当有需要调整顺序时可以支持整行的拖拽操作。

表格样式一:分页1

当内容较多需要除了无限滚动外,还可以选用分页的方式,目前较为常见的可以选择如下方式。

表格样式一:分页2

若不需要突出页码,主要查看都在第一页上时可以考虑将放在角落里,到达首页和到达尾页根据产品需求决定是否使用。

表格样式一:搜索

搜索功能考虑到用户需要手动输入,很难保证精准搜索,原则上所有搜索均为模糊搜索,必要精准搜索的地方使用筛选功能,给用户提供筛选选项。通常上端搜索栏不被限定搜索范围,可以全部搜索。

表格样式一:分项搜索

对比必要的分项搜索功能可以对应到各个列中,同时输入时可以给出联想结果,仍然应该设计为模糊搜索。

表格样式一:筛选

对于各个列中必须精准搜索的数据可以设计为筛选功能,可为用户提供可勾选的筛选信息。

表格样式一:高级筛选

对于部分列有筛选需求的情况,可以设计弹框输入筛选条件,也可以在此设计复杂筛选条件,筛选规则在上端展示,可以更直观的看到已筛选项。

表格样式一:可编辑单元格提示

表格中存在可编辑单元格和不可编辑单元格时,为了界面的一致性和美观性,可以考虑鼠标悬浮时给出可编辑单元格的编辑框,区分两种不同单元格样式。

表格样式一:信息预览(浮窗)

对于汇总表中如有预览详情的需要,同时对于数据仅为查看没有修改需要的时候可以考虑悬浮提示将主要数据进行展示。

表格样式一:信息预览(弹窗+蒙板)

对于详细有部分属性修改需求,对于细节没有修改需求的,可以考虑在一侧弹出弹框进行展示和修改属性。(如报价单表格信息,报价单审核状态的可以在此修改,详细信息仍在明细表中修改)

表格样式一:信息预览(折叠)

折叠模式的使用环境基本等同于弹出模式,可根据设计风格进行选择。

表格样式一:信息预览(弹窗)

单独弹出窗口在需要有多项数据进行对比查看时可以选用,弹出窗体操作通常只考虑状态改变,不建议其他数据在此更改。

表格样式一:信息预览(变导航)

此种展示方式,对于需要查看和修改较多数据的需求可以选中,汇总表将收为类似于导航栏的模式,数据可以精简只展示关键数据,弹窗可设计复杂操作,可以包含明细的修改等功能。

表格样式一:信息预览(变窗体结构)

通过减少列表高度流出信息展示空间,建议两部分在一屏内展示可分别滑动或翻页,汇总表信息完整,弹出窗体也可进行复杂操作设计。

表格样式一:信息预览(自定义表头)

自定义表头设计可以将此操作藏在较明显的位置同时可以保证界面的简洁。

后续

上篇中主要展示了一些表格样式一的一些操作习惯,除此之外还会在很多专业工具的设计中用到另一种展现形式类似于EXCEL表格。

欢迎各位做过类似项目的产品经理与我多多交流,如有需要原型的小伙伴可以在下方留言,我再将下载地址放出。如果大家喜欢这篇文章我会继续完成下篇的内容。

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

设计大师眼中的设计

蓝蓝设计的小编

为了创作出独特的东西,你的所有大脑神经必须集中在微小的细节上。

遮罩层上滚动,使下方的列表随之滚动

seo达人

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

效果

这里写图片描述

遮罩层为一张边框样式图(如下图):

这里写图片描述

边框样式遮罩层显示在最上方,然后是中间的列表,最下层是一个透明黑色遮罩层,滚动鼠标滚轮,能控制列表滚动

实现原理

注册最上面遮罩层的滚动事件,拿到滚动滚动方向,然后控制列表滚动的方向和距离

上代码

注册事件 /**
 * 增加滚轮滚动事件(暂时只实现了chrome的滚动效果)
 * @param modalDomId 遮罩层domId
 * @param domId 需要滚动下层列表domId
 */ addMousewheelListener(modalDomId:string,domId:string){ //添加页面监听 let modalAwardPanel = document.getElementById(modalDomId);
  modalAwardPanel.addEventListener('mousewheel',function(e){
    let scrollContentDom = document.getElementById(domId); //向上滚 if (e.wheelDelta > 0){ if (scrollContentDom.scrollTop -20 >= 0){
        scrollContentDom.scrollTop = scrollContentDom.scrollTop - 20;
      } else{
        scrollContentDom.scrollTop = 0 ;
      }
    } //向下滚 else{ if(scrollContentDom.scrollTop + scrollContentDom.clientHeight < scrollContentDom.scrollHeight){
        scrollContentDom.scrollTop = scrollContentDom.scrollTop + 20;
      }
    }
  });
}

组件调用: this.addMousewheelListener("你的最上方遮罩层id","你想要滚动的列表id");
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

连BAT设计师都在用的视觉动线技巧

资深UI设计者

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

作为设计师,我们需要很好的控制用户在使用产品过程中,他们浏览的路径,需要了解我们的眼睛是如何处理信息,本周我会结合我之前学习的一些知识和大家分享下视觉动线这个概念,以及如何在设计中进行运用!学习过程红大家任何不明白地方,欢迎加我微信交流:uiskyss

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

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

作为PM,你居然不知道Axure这10种非交互功能?

蓝蓝设计的小编

提到Axure,这可是绝大多数PM童鞋靠着吃饭的家伙事儿。Axure被很多人定义为一个以交互见长的原型设计工具。很多初入坑甚至入坑甚久的PM为画出炫酷的原型挖空了心思。我想这对Axure的初衷一定是有误解。

前端算法之弹幕设计

seo达人

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

大家都说前端写页面较多,几乎用不到算法。本文愿从弹幕设计这个场景来描述算法在前端中的应用,我们先来看下实现效果:

图1.1 弹幕效果

 

开场之前我们先来描述弹幕开发的难度,再集中精力描述算法设计的思路。

* 如何保证不同字号的弹幕不碰撞
* 弹幕的位置计算
* 弹幕的速度控制及动画实现
* 弹幕与视频的同步

***如何保证不同字号的弹幕不碰撞***

如果弹幕采用相同的字号,碰撞的问题处理起来比较简单,只要考虑相邻弹幕的播放速度和偏移的位置就可以计算出来。然而使用不同字号的弹幕处理起来就麻烦了许多,弹幕的起始位置不可以线性的增加,比如第一行放了字幕,接下来的字幕可以按顺序从上至下依次放置即可。

***弹幕的位置计算***

只有设计好弹幕的初始位置,才可以动态、的管理不同字号弹幕的碰撞问题。打个比方,我们通过接口获取了2秒之内的弹幕数据1000条,每个字幕的长度、速度、字号都不同,怎么管理这些弹幕,示意图如下:

图2.1 弹幕管理示意图

 

这是第一种情况,按照从上到啊的顺序依次摆放以后会有几个问题:
1. 弹幕五、六、七该怎么计算位置,按top值循环取模+累加吗?
2. 当弹幕一或者弹幕三足够长的时候,如何准时的跳过当前位置计算?
3. 当前屏幕的弹幕播放结束,如何再计算的时候利用空出来的位置
4. 空出的位置是否满足当前弹幕的高度
5. ……

一系列问题就不统统列举出来了,基于这个背景我们结合数学建模的思维方式,找到了弹幕场景相似度非常高的机场运营。我们可以把弹幕当做飞机,每个时间段播放多少弹幕和机场每个时间段放飞多少飞机一个道理。

首都国际机场一共有3条跑道,两条4E级跑道、一条4F级跑道,2016年的吞吐量为9000万人次。它的运行机制就是所有飞机通过搭台有顺序的共用3条跑道来完成运输任务的。

同理,我们也设计了几个个角色:一个是轨道(跑道)、一个是调度(塔台)、一个是弹幕(飞机),我们为每个角色设计一个类分为为Track、Main、Bullet。

* 轨道
            
       轨道这个角色很重要,它可以解决弹幕位置计算、速度控制、碰撞检测问题。
       首先,我们要来初始化轨道。通俗的说我们要修建几个跑道呢,我们不是实物,可以动态调整轨道的                        数量,计算的原则:
        轨道数量 = 播放器有效高度 / 设备基准字号
    * 播放器有效高度:播放器的实际高度减去控制条的高度,因为弹幕不可以遮挡控制条。
    * 设备基准字号:移动端是10px,pc端是12px;
        为啥计算公式是这样的?因为我们要支持不同字号的弹幕。试想不同的字号对物理空间的占用是不同的,然而如果要求轨道的尺寸是动态的,那就带来很复杂的计算。本文提出“虚拟轨道”的概念,在交通管制中最常见的就是道路合并或者改向。我们也是采用将相邻的物理轨道临时合并为一条轨道。这样就可以轻松的解决不同字号的轨道占用问题。原理图如下:
        

图2.2 轨道计算示意图

其次我们来回忆下机场的工作流程:
1. 机长呼叫塔台,CZ6132请求起飞
    * 目前跑道均被占用,请等待
        * N时刻后再次执行步骤1
    * 目前跑道 A1 空闲,准许进入
        * 执行步骤3
2. 塔台查看跑道使用情况
3. 进入跑道,起飞完成
4. 机长通知塔台,本次起飞完成,释放跑道的占用
5. 其他飞机同样执行上述步骤

按照这个思路,我们的弹幕工作流程:
    
1. 弹幕进入播放器
2. 轨道根据弹幕的播放速度、尺寸计算是否有合适的轨道提供
    * 没有
        * 通知弹幕尚无合适轨道提供,请等待;同时,弹幕队列中的其他弹幕依次执行步骤1
    * 有
        * 执行步骤3
3. 播放器加载弹幕DOM,开始播放,待播放完成
4. 播放完成通知轨道更新轨道占用情况
5. 其他弹幕同样执行上述步骤

图2.3 轨道可用性计算示意图

 

关于轨道的基本原理我们整理清楚了,当然还有不少细节比如如何和调度通信、如何和弹幕通信以及虚拟轨道检测算法等。有兴趣的同学可以参考代码吧。https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/control/makeBullet.js

* 弹幕
       弹幕基本是实现“飞机”的角色,我们要求它具有自身的属性和方法。比如调度中心通过id能拿到它所有的基本信息,轨道控制也可以通过弹幕进行检查和更新。当然弹幕也必须具备状态自动更新、移动、播放结束通知、自动销毁等功能。
* 调度
        调度就是搭台的化身,承接着轨道、弹幕的控制,也保持着与播放器的步调一致。它的职责如下:
    1. 播放器交互控制
    2. 弹幕队列控制
    3. 自身状态更新
    4. 数据格式转换
    5. 动画执行
        还是直接用流程图来描述更直接些:
        
       

图2.4 弹幕运行机制流程图

在弹幕启动之后,首先要检查本地是否已有缓存数据,没有的话直接请求数据并缓存,然后执行数据读取,首次过滤数据进入弹幕队列,同时启动定时器。弹幕队列的数据会定期请求轨道,检测队列里的弹幕是否可以进入,一旦确认后轨道做好登记,弹幕就可以进入播放器开启动画播放了。定时器每隔2秒就会再次更新数据进入到弹幕队列(这块不同的业务可以定制不同的规则)。弹幕播放结束后会通知调度和轨道,调度会在弹幕队列中移除该弹幕实例,轨道也会移除该弹幕实例的轨道占用。

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


日历

链接

个人资料

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

存档