FiFi Design

视觉改变生活 细节成就体验

Category: 3.前端集锦

前端集锦

easyDialog2.0简单、轻量、实用的弹出层组件

easyDialog v2.0新增的功能:
1. 增加了默认的弹出层内容模板,如果只是一些简单的应用,自己可以不去写弹出层内容的结构,而只需传几个简单的参数即可,原来的使用方法:
view source
print?
easyDialog.open({
container : ‘demoBox’
});
 

使用默认的内容模板,那么container参数可以这么用:
easyDialog.open({[……]

继续阅读

2014设计趋势:浅谈矢量图形iconfont的前景

矢量图形对于从事设计的我们来说并不陌生,大多设计师都不同程度的接触过illustrator、CorelDRAW等矢量绘图软件,但在网页应用中很少被触及,如果非要说有的话应该算Flash的swf矢量动画。我们在过去图形应用中更多接触的是位图格式的图形,但在过去的几年里,随着硬件和技术等外部因素的影响,位图应用给设计师的效率和开发成本带来了挑战,举个例子:
一个图标要适配pc端、移动端或retina屏幕的话上就要设计两份或者更多,前端开发[……]

继续阅读

iOS 7.1 Safari新增的一个新特性,网页加载时隐藏地址栏与导航栏

iOS7.0的童鞋在用Safari浏览网页时,都知道是这种效果:

11

滑动页面的时候,底部和顶部的状态栏会自动隐藏弱化,这个体验其实挺人性化的,但fifi觉得可能某些时候会觉得不方便,因为假如我常常要回顾上面看过的文字内容,就要滑动回去,滑动的时候底部和顶部的状态栏就会显示出来,无形中占据了不少的窗口位置。

始终强调人性化设计的苹果当然注意到了这点,于是在 iOS 7.1 的 Safari 中为 meta 标签新增 mi[……]

继续阅读

一目了然,入门级移动web、app开发规范推荐

FiFi:对于刚接触app开发、移动web开发的人员开说,如果身边有一本相关的开发规范来指导和参考,那真是再也方便不过了,下面就是Alloyteam在日常开发过程中总结提炼出的规范建议,具备较好的项目实践,强烈推荐使用

字体设置
使用无衬线字体
body {
font-family: “Helvetica Neue”, Helvetica, STHeiTi, sans-serif;
}
iOS 4.0+ 使用英文[……]

继续阅读

向高手迈步,浅谈图标字体化Icon Font

FiFi前言:随着大分辨率手机的发展,越来越多视网膜手机出现在我们面前,包括现在热度很高的4k显示器,都给项目开发过程中设计师带来了难题。因为越大的分辨率就意味着需要制作设计更大的图标,同时还要为了适配不同的分辨率屏幕而制作不同的图标尺寸。但矢量图标或者说图标字体Icon Font将改变这一难题。

FiFi用的Macbook Pro Retina在阅览网页时候就发现不少网站已经使用的Icon Font,比如“淘宝”、“支付宝”、“[……]

继续阅读

[一淘UX]如何在移动设备上使用iconfont矢量图标

随着IOS7普及,扁平化设计在移动设备的应用越来越多,iconfont在移动设备上应用的话题也越来越受前端工程师关注,下面是阿里妈妈MUX团队在移动平台应用的一些经验教程;

iconfont的优点

iconfont在web上的应用已经很广泛,如淘宝、一淘、sina、豆瓣等大网站都已经在自己的网站上应用了iconfont技术;它能有效的解决分辨率的问题,并且在应用的时候非常便捷,节省前端、设计很多重复改图、调色的工作。在移动设备上[……]

继续阅读

不得不说的IE9九大特性

还在用老掉牙的ie6的童鞋们,赶紧抛弃把,即便ie6是多么的经典但那已是过去的辉煌了,升级你的系统到WIN7,安全性快捷性稳定性上都更上一个层次的ie9才是ie家族未来的趋势。

但是你没有用上IE9?对IE9没有直观的认识?那么下面的九幅漫画,会让你了解到IE9的九大特性:

1、新JavaScript引擎

IE9全新内置的“Chakra JavaScript引擎”充分利用当下主流计算机配置的多核心CPU,优化协同运算能[……]

继续阅读

设计开发中不可或缺、必备的几款Firefox插件

话不多说,用了你就知道好了。

网页设计制作中经常使用到的火狐浏览器插件——

1)HTML Validator

网页符合W3C标准十分重要,一方面是为了让页面能够跨浏览器兼容,另一方面也是为了让搜索引擎能顺利地抓取和理解你的页面。所以让页面通过W3C校验是网 页优化工作很重要的一方面,使用火狐HTML Validator插件能够高效地检测出页面中HTML代码的有效性,不仅如此,它还能显示出错的代码位置,并给出错误说明[……]

继续阅读

© 2017 FiFi Design

登录 Copyright © 2010-2014 All Rights Reserved. FiFi Up ↑