AlloyTeam

AlloyTeam

Copyright © Tencent AlloyTeam. All Rights Reserved.
AlloyTeam 腾讯全端 AlloyTeam 团队 Blog
  • 首页
  • Web 开发
    • 前端资讯
    • HTML5
    • CSS3
    • JavaScript
    • Node.js
    • 移动 Web 开发
    • 用户体验设计
    • Web 前端优化
    • 资源工具
  • 移动开发
    • Android 开发
    • iOS 开发
    • 移动 Web 开发
  • Alloy 实验室
    • 作品
    • HTML5 游戏
  • 关于
    • 团队
    • Github
    • 留言
    • 友情链接
  • RSS
  • 25 条超实用简约原则(2)– 博客 – 伯乐在线
    In Web开发 on 2015年03月24日 by TAT.littenli view: 855
    0

    09. 打破规则

    如之前所提到过,在极简主义中,你可以尝试到在其它风格中不可能实现的可能,这也就意味着,需要略微突破一下规则。就这个 Ruby Wight 所设计的 LOGO 字体来说,其中一半的字母都颠倒排放看起来是个不可思议的决定,放在任何其它设计风格中,这都会造成不易阅读的困扰。但是,好在这款品牌设计极度简洁,摒弃所有不必须的元素,令这貌似疯狂的想法最终倒呈现出了良好的视觉效果。

    10. 字体的图形化

    字体是不可忽视的重要武器,对极简主义尤为如此。它可以被用作视觉元素,根据所需状况调整其形态。譬如这个意大利 Vogue 中的页面,字体展现出水流波纹的视觉效果,无需多余元素,便令设计概念清晰简洁。

    11. 妙用留白空间

    留白亦被称之为 “负空间”,有时候看起来只是空白而已,但是它绝不仅于此!巧妙留白可令设计平衡,避免杂乱,让画面呼吸起来。Studioahamed 的此款版面设计充分使用留白,达成了高大上的极简风格。

    12. 挖掘可能

    有什么比纯白色调更简约的呢?设计绝不止于屏幕,在印刷工艺中隐藏着各种可能,有机会让你的设计脱颖而出。凸板印刷及凹凸效果可以为极简风格设计增色不少,大家可以从 Adam Buente 的设计中感受到。

    13. 关于材质

    当我们在尝试极简主义时,常会只使用纯色以保画面简洁,但是极简主义并非如此。带入一些材质背景可以为设计增加深度,增强效力,同时也不会影响到风格的简约。在 Watts Design 的品牌及网站设计中,我们可以发现,其实材质图片与简洁纯色搭配特别能达成平衡感,这些简约的照片和标示组合成为极具感染力的设计。

    14. 跳出固定思维

    毫不夸张地说,在极简主义中,你可以突破常规思维,把玩元素的位置和构图,Gregmadeit 的版面设计就是个很好的例子。字母极度靠边排放,呈现出独特的效果,十分引人注目,同时,也保证了文字的可读性。

    15. 直截了当

    当去除了所有多余元素后,你就可以更直接地表达信息与沟通。这一特点在网站设计中尤为实用,我们总是速速浏览网页,寻找直接有效的信息。在 Nine Sixty 的网站案例中,读者可以在第一时间了解到他们是谁。

    16. 放大放大

    在极简主义中,你可以决定读者最先看到什么,要做到这一点的诀窍就是把控尺寸。看一下 Saturdays Magazine 的这个版面,就能发现第一眼定是落在最大的元素上——右页中的大标语,而后是照片,最终是文字。在一个简约设计中,对元素尺寸的把握可以帮你决定读者的视觉阅读路线。

    17. 不只有黑白

    很多人认为极简风格只使用单色,但事实并不如此。在用色上,我们可以既抓人眼球又保持简约,只要尽可能保持最少用色(1-3 个颜色最佳)。Moruba 的这款案例选用明黄与黑白搭配,十分醒目显眼(仍然是简约风格)。

    ![][9]

    继续阅读

  • 《纸牌屋》:苹果与三星的又一战场 | 雷锋网
    In Web开发 on 2015年03月24日 by TAT.littenli view: 941
    0

    当你在观看《纸牌屋》的过程中,哪些品牌曾引起了你的注意?

    克莱尔·安德伍德(由罗宾·怀特饰演)在影片中通常会使用苹果的 iPhone;雷米·丹顿(由马赫沙拉·阿里饰演)则会驾驶着通用汽车公司的别克;弗兰西斯·安德伍德(由凯文·史派西饰演)佩戴的手表一直都是万国手表。

    在《纸牌屋》第三季中一共出现了 105 个不同的品牌。 105 个品牌听起来好像很多,然而和《纸牌屋》第一、二季的 129 个品牌和 134 个品牌相比,则出现小幅下降。

    Concave 是一家专门跟踪并分析电视节目和电影中品牌出镜情况的市场研究公司,他们追踪了三季《纸牌屋》中出现的所有品牌,在最新一季的节目追踪中,排名前十的企业有六家为科技公司,分别为:苹果(第一)、亚美亚(第五)、诺基亚(第七)、三星(第八)、黑莓(第九)和戴尔(第十)。

    当然,上述排名只是第三季节目中的排名,如果想要了解每一个季度的 TOP 20 品牌排名可以查看下面这张图片:

    从上图中可以看出,苹果公司在三季共 39 集剧集中都亮相了;亚美亚、黑莓、戴尔和三星在三季中的亮相次数虽然不如苹果那么高,但也都超过了 30 集;最有趣的是诺基亚,在第一季节目中完全没有出现过,而在第二、三季分别出现 8 次和 12 次。

    在上图中,展示了三季节目中不同品牌的明显程度,虽然有不少品牌出镜了,但仍有部分品牌展现的并非十分明显。可以从图中看出,苹果在每一季中都是最为明显的品牌;而三星则是上升最为明显的品牌,三星从第一季排名前十开外,达到了第三季的第二名,几乎和苹果不相上下。

    下图展示了剧集中,不同人物所使用的 TOP 5 品牌:

    就如图片中所说的一样,苹果在八名演员中占据了四席,与此同时三星在此胜出,占据了 7 席。

    那么这些品牌广告在剧集中出现的时长加在一起有多久呢?根据 Concave 的数据显示,在第三季中的广告时长为 3 小时 55 分,这一时长比第一季要长,比第二季短。

    虽然苹果可能是三季节目中整体明显程度最高的品牌,但是 Concave 指出,三星在 24% 的时间里都是以特写的方式出现,而苹果只有 3%。

    想要查看出境的所有 105 个品牌,可以点击原文查看。

    via businessinsider

    【本文版权归雷锋网所有,未经许可不得转载。文章仅代表作者看法,如有不同观点,欢迎添加雷锋网微信公众号(微信号:leiphone-sz)进行交流。】

    思睿

    <table><tbody><tr><td>

    这个作者太任性, 随意黑!

    </td></tr></tbody></table>

    思睿

    继续阅读

  • TAT.bizai HTTP2.0 的奇妙日常
    In HTML5,Web 前端资讯,Web开发 on 2015年03月23日 by TAT.bizai view: 33,786
    35
       【交代:时间是在距今的 5 年后,由于我的智能滑板鞋,还有智能小内内的创业失败,为了在这个先看胸再看脸的时代活下去,我不得不重操旧业,去面试 web 前端工程师的工作。多年没有接触 web 开发了,找了个 AlloyTeam 的老同事晨伯帮我温习一下知识, 好让面试通过】
        
        “多年没见,你的女神后来什么样了” 晨伯总是这么八卦我的女神,而不是我。
        “我给你一个表情,你自己体会一下”youshang_small
        “你先写个小页面给我看看吧,我指导一下你吧。”晨伯一幅很吊的样子。
    但是这样的小 case 当然难不了我,虽然多年没碰 web,但是我当年可以是 AlloyTeam 的成员啊。很快我就啪啪啪地完成了页面。晨伯看完我写的页面,一幅 “我可是有女朋友的男人” 的表情,感叹了一句 “现在是 HTTP2.0 的时代啦,给你普及一下知识点”。
     

    继续阅读

  • TAT.Fujun 初识 NodeJS 服务端开发(Express+MySQL)
    In Node.js,Web开发 on 2015年03月09日 by TAT.Fujun view: 44,336
    41

    NodeJS 对前端来说无疑具有里程碑意义,在其越来越流行的今天,掌握 NodeJS 已经不再是加分项,而是前端攻城师们必须要掌握的技能。本文将与同志们一起完成一个基于 Express+MySQL 的入门级服务端应用,即可以对数据库中的一张表进行简单的 CRUD 操作。但本人还是斗胆认为,通过这个应用,可以让没怎么接触后端开发的同志对使用 Node 进行后端开发有一个大致了解。

    Express 工程环境准备

    1. 安装 express,和 express 项目种子生成器(什么?你问第 1 步为什么不是安装 NodeJS,我也只能呵呵..)

    安装 express

    1
    npm install express -g

    安装 express

    1
    npm install express-generator -g

    2. 创建工程。进入工程目录,运行命令

    1
    express projectName

     

    继续阅读

  • TAT.dnt 游戏/前端开发利器:第二代 spritecow
    In 资源工具 on 2015年03月09日 by TAT.dnt view: 7,634
    1

    快速入口

    不读文章可以直接拐向这里:

    spritecow 二代:https://kmdjs.github.io/arejs-tool-sprite/

    写在前面

    工欲善其事必先利其器,最近 fork 了一份 spritecow 代码进行了大量升级改造,
    作为 AlloyRenderingEngine 的开发辅助工具之一,确确实实地提高了开发效率,游戏或前端开发更加便利。

    继续阅读

  • TAT.zhipingfeng 使用 gradle 打包指定包名和类的 jar
    In Android 开发 on 2015年03月04日 by TAT.zhipingfeng view: 20,910
    4

    1
    2
    3
    4
    5
    在开发sdk生成jar在eclipse里相对比较容易操作,只要导出class时指定哪里导出就可以,
    但在用AndroidStudio开发时要导出jar就没那么容易,需要写gradle脚本,但gradle脚本
    的入门成本还是比较高,网上也有打包jar的脚本参考,但大多是通过生成classes.jar重命名
    来生成,这样生成的jar是包含工程里所有类的,有时我们需要指定一些包和类来生成jar。
    下面是参考脚本:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    task clearJar(type: Delete) {
        delete 'libs/sdk.jar'
    }
     
    task makeJar(type:org.gradle.api.tasks.bundling.Jar) {
        //指定生成的jar名
        baseName 'sdk'
        //从哪里打包class文件
        from('build/intermediates/classes/debug/org/cmdmac/cloud/pluginsdk/')
        //打包到jar后的目录结构
        into('org/cmdmac/cloud/pluginsdk/')
        //去掉不需要打包的目录和文件
        exclude('test/', 'BuildConfig.class', 'R.class')
        //去掉R$开头的文件
        exclude{ it.name.startsWith('R$');}
    }
     
    makeJar.dependsOn(clearJar, build)

     

    1
    在build.gradle写上后,只要在命令行执行gradle makeJar就可以在build/libs目录下找到这个jar

     

    上面是个简单的例子,只能打包某个包下面的所有文件,如果要实现只打某个包下面的某些子包或者文件可参考如下示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    task makeSdkJar(type:org.gradle.api.tasks.bundling.Jar) {
        baseName 'pluginsdk'
        //只打包org.cmdmac下的org.cmdmac.pluginsdk.impl和org.cmdmac.gamecenter,其他子包不会被打包进去
        from('build/intermediates/classes/debug/org/cmdmac/') {
            include 'pluginsdk/impl'
            include 'gamecenter'
        }
        into('org/cmdmac/')
    //    exclude('R.class')
    //    exclude{ it.name.startsWith('R$');}
    }

     

    继续阅读

  • TAT.dnt AlloyRenderingEngine 开门大吉
    In Web开发 on 2015年02月28日 by TAT.dnt view: 6,984
    10

    快速入口

    不读文章可以直接拐向这里:

    github:https://github.com/AlloyTeam/AlloyGameEngine

    开门大吉

    每次输入 kmdj 输入法自动提示【开门大吉】,输入 kmdjs 提示【开幕倒计时】,所以说 kmdjs 不仅仅是满满的血腥味
    (kill all module define lib/framework, kill amd and cmd),还有着美好的寓意。
    一定要提 kmdjs 是因为 AlloyRenderingEngine 是基于 kmdjs 进行模块化开发(其实使用 kmdjs 已经没有模块的概念了),只要 class 和 namespace。
    kmdjs 的核心的核心就是 {},class 全部挂在 {} 上。{} 属于 namespace。所以很自然而然得轻松实现循环依赖。当然 kmdjs 还有很多优点,如:

    继续阅读

  • TAT.dorsywang 【视频】AngularJs 搭建大型多页面应用
    In Web开发 on 2015年01月29日 by TAT.dorsywang view: 12,622
    8

    鄙人不才,视频是在 csdn 首次尝试以在线直播的方式讲授的课程,比较适合没有基础的新手学习 AngularJs

    观看地址

     

    继续阅读

  • TAT.dnt HTML5 粒子编辑器
    In Alloy 实验室,HTML5,Web开发,作品,资源工具 on 2015年01月23日 by TAT.dnt view: 19,698
    8

    写在前面

    大家阅读此文之前,可以先看一篇 MiloYip 的文章:用 JavaScript 玩转游戏物理 (一) 运动学模拟与粒子系统,看完之后再看此文,更加容易理解。

    MiloYip 使用的粒子是 canvas 中绘制的圆,还有一些粒子效果是基于 像素级别的,如:火焰字 ,但是使用像素的计算成本太大,因为需要的粒子数量太多,甚至要配合一些 nosie 算法,如(perlin nosie),计算量太大。

    所以一般会先设计好粒子的纹理(每个纹理假设是 32*32,一个粒子就包含了九百多个像素了),这样需要的粒子个数不多,计算量也不大,管理粒子的成本也不高(对粒子增删改查)。

    canvas globalCompositeOperation

    粒子系统在什么时候最漂亮?晚上!所以在绘制纹理的时候,需要设置 globalCompositeOperation 的值为 lighter。其作用是:在图形重叠的地方,颜色由两种颜色值的加值来决定。

    globalCompositeOperation 还有非常多的属性可以设置,详情见:w3school。

    继续阅读

  • TAT.Jdo 【Web Audio API】— 初探音频上下文与音频节点
    In HTML5,JavaScript,Web开发 on 2015年01月11日 by TAT.Jdo view: 16,747
    3

    这主题主要是早期对 web audio api 的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正。

    在真正进入 Web Audio API 开发之前,需要先弄清两个概念:音频上下文(AudioContext)、音频节点(AudioNode);

    Web Audio API 是一套以音频上下文(AudioContext)为基础的接口系统;基本上每一次的开发都需要第一个用到,

    看下 W3C 对 AudioContext 的描述:

    This interface represents a set of AudioNode objects and their connections. It allows for arbitrary routing of signals to the AudioDestinationNode (what the user ultimately hears). Nodes are created from the context and are then connected together. In most use cases, only a single AudioContext is used per document.

    大意是一个 AudioContext 代表一系列音频节点以及节点之间的连接方式,它允许一个或以上的音频信号在经过任意的连接之后最终连接在音频播放设备节点上;节点都是可以通过音频上下文对象然后连接到了一起;通常一个文档中只需要一个一个音频上下文对象即可。

    继续阅读

上页 1 ...33 34 35 36 37 38 39 40 41 42 ...61 下页
公众号:AlloyTeam
扫码关注
公众号:AlloyTeam
合作伙伴
HTML5梦工场
腾讯云
Coding
兄弟团队
  • 腾讯 ISUX
  • 腾讯 CDC
  • 腾讯游戏 TGideas
  • 百度前端 EFE
  • 百度前端 FEX
  • 淘宝前端团队 FED
友情链接
  • 印记中文
  • W3CTech
  • 前端观察
  • W3C Plus
  • Web 前端开发
  • V2EX
  • 蓝色理想
  • 云开发 CloudBase
  • HTML5中文学习网
  • 爱思资源网
  • 牛大拿_前端设计导航
  • 吕小鸣前端博客
  • 腾讯大学


Copyright ©  2011-2025 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2