网页设计中的字体排版

网页设计中我们更多的在谈论视觉效果和交互方式。但一个好用、常用的网站,在建立“第一次好印象”之后,最关键的“用户体验”应该是内容及获取的途径。内容在设计方向上自然是不在讨论范畴。就获取途径,良好的站点地图、合理的内容布局、规范的图文编排都是其中的重要基石。这其中,作为内容的载体——文字的编排,可以堪称为基石中的钢筋龙骨。
自从电脑技术进入千家万户之后,千字印刷所需要的专业技法和知识被简单的电脑自动排版所取代,字体编排成了一件不需要被熟知的技能。这也使得很多现代设计师不熟悉文字编排的通病。同时,伴随着技术的演进。设计师和程序员分工相对独立,在相互不了解工作机制的前提下就会产生设计稿无法被完全还原的情况。

本着“设计,不是为了设计稿而设计”的理念。作为设计师的我们应该注意以下这些我认为重要的字体编排知识。

善变的字体

不知道现在的你正在用着怎样的设备阅读这篇文章?可能是在公司的台式电脑上,或者坐在咖啡厅端着苹果MacBook笔记本,亦或者是在公交车上拿着Android手机在阅读呢?
如果你拿着这些设备做对比,会发现,每个设备上的页面都会有些许的不同,其中主要体现在文字上。每个设备(确切的说是每个操作系统)都会集成自己默认的字体,网页是调用系统中现有的字体。而由于版权的原因,你有的我不一定有,我有的你也不一定有。所以在不同系统中一张网页看起来会有所不同。

当你规定了某款字体的时候,需要它是足够“通用”的,但这很难。一般我们的解决方法是制定足够多的字体来给系统备选,这样你可以在不同系统间设定充足的备选方案。
另一方面,由于实现的技术不同,Windows和MAC OS系统对同一款字体的展示效果也会有很大差异。在Mac OS中字体看起来更加柔和平滑,而在Windows中则会变得像素化、锐利。

所以,尽可能多的在你需要展示的设备上去测试这些字体的呈现效果以达到你的预期。

继续阅读

这款SQUARE ENIX出品手游有把我惊艳到-「Lara Croft GO」

趁着圣诞促销收了SQUARE ENIX出品的GO系列三款游戏,值得说明的是在购买之前的我并不知道这三款游戏的模式玩法,仅仅是冲着3A大作的IP及非常高的评价去的(三款游戏在App Store上的评价分别是5星、5星、4.5星)。

古墓丽影9中的劳拉

这种举动在早两年是比较冒险的尝试,好的IP往往沦落为传统粗制滥造作品的一层外衣,以此来消费粉丝的热情。而排行榜的评分也是非常容易被伪造的。

丧心病狂的商家正在为App Store上的应用刷分

不过在我所能触及到的范围内这种局面这两年有明显改善——随着「星战外传」上映,前不久一款名为「Warp Shift」的星战主题的益智类游戏在App Store上线,游戏的素质可谓不俗。
最近我跟女朋友一起在玩一款叫「魔弦传说」的消除类游戏,画面、玩法都非常精良。我女朋友跟我不同,向来对游戏嗤之以鼻,但难得的在这款游戏面前折了腰。而高潮在于:当我点开相关信息时才发现,这居然是一部同名电影IP作品,当时我就震惊了。

题外话:这款游戏耗电虎的一逼,出门玩这游戏基本就是找死。
继续阅读

试玩了「Super Mario Run」后的一些感想

9月苹果发布会上任天堂展示的「Super Mario Run」在经过漫长的等待之后终于上架App Store了。当然,如果你想尝试一下这款时下流行游戏需要一个美区账号来下载及游戏时保持FQ状态。想在手机上尝试任天堂的游戏还真是不易。

得益于苹果的大力推广,这两天关于这款游戏的新闻也可谓是铺天盖地,大家纷纷猜测并表示这将是下一款「现象级」游戏。虽然很多人可能从10几年前那款像素级马里奥之后就没玩过任天堂其他游戏了,但这也不妨碍大家像之前追逐「Pokémon Go」那样追逐潮流。

这么说可能有些刻薄,不过我基本要表达的意思就是「消费者并不知道自己需要什么,大规模的宣传和信息轰炸会让人产生从众心里」。类似于有一部分人群每年都追逐最新款旗舰手机,但他们对手机需求往往只停留在刷朋友圈上(这部分人群要严格区分于土豪老板们)。

继续阅读

血战钢锯岭——我心中的2016年最佳影片奖

p2404339118

用一次偶然的机会去结识一部好电影

这个名字(或者称它译名更合适)是那种很难让人提起兴趣的电影,况且也不是现在市场主流的题材。如果不是因为「好久没看电影了,这电影有优惠」或者「老爸应该会喜欢这个题材」之类的想法,绝壁会是一部与之失之交臂的电影。

周四上班路上听podcast——影评刚好谈到这部电影:场面异常血腥、以真实拍摄还原现场效果、主角光环~belabelabela~~其实讲的特别干,也没听进去什么,估计主持人都没看过电影就在谈背景导演什么的,追热的影评总是有点空洞乏味的。

影片开始半小时我就得出一个结论——这绝壁是一部美国传统价值观下的电影:不幸的家庭(主要表现在父亲从战场回来后的失意给家庭带来的创伤)、炽热奔放的爱情、追求理想及作为军人保卫家园的自豪 等等怀旧元素都在体现这些。

继续阅读

Brackets及相关插件介绍
一款我正在用的前端代码编辑器

09142451M-0

我对代码编辑器的要求有点类似于sketch,专一(因为我只用来写前端,当然还包括一些WP主题的开发涉及到一些PHP代码~)、功能精简——因为不是程序员,很多专业相的功能对我而言都是没必要的,反而界面的精炼和简介对我更为重要。这种需求推动下,Brackets进入了我的视野。

Brackets 是 Adobe 开发的一款免费开源且兼容多平台的前端代码编辑器,你能在官网下载到对应的版本。官网:http://brackets.io/ (不翻墙登录有时会很卡或无法加载样式等问题,此问题同时出现在下载插件中。)

之前版本有一些跟 Adobe 自家 Photoshop联动的功能——把PSD文件传到服务器上然后在 Brackets上直接调用文件中的资源自动生成页面等~,不过国内的高墙基本限制了这些功能的发挥,所以还是把它当作一款正常的、精简的编辑器就好啦~

更多中文介绍:Brackets – 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

由于它的过于精简,所以在使用之前需要安装一些插件才能真正好用~

hero 继续阅读

别担心,我们有很多时间来打磨自己

tumblr_ogh6fyecw91tin44bo1_1280

最近做了一次网站迁移,最直观的感受或许就是现在访问 sjfan.net 已经会跳转 miaoxiaoyang.com ,以及一些页面样式上的调整吧。

双十一时候收到阿里云推送优惠信息顺道去看了下自己空间,发现原来空间快到期了,于是前段时间在着手迁移搬迁(手上还有一个备用的)的事。网站现在走的主域名是 miaoxiaoyang.com,不过我在考虑之后还是迁回 sjfan.net 上来。

继续阅读

挨千刀的贼把我小电驴给偷了

小电驴

翻遍手机,唯一一张小电驴刚到快递站时候拍的照片,还是爱的不够啊~


昨天下班从公司顺回来的包裹太多停车时候一个踉跄摔了一下,光顾着看人拿东西,却忘记开双向报警器了…

好吧,这事儿我承认我自己得背大部分的锅…

我对小电驴的安全防范意识,从买来时候的认真重视到现在漠视态度算是给自己打了一记响亮的耳光。刚拿到车那活儿还叫嚷着买吧好点的锁来防盗,结果因为价格奇高也就不了了之了。

继续阅读

网页设计中基础布局

网格系统

一般而言,网页会有一块主体区域,网站内容都包含在这块区域中。
wy_01
为了展示更多内容,但又支持尽可能多的显示器尺寸,就会要求主体区域尽可能的小但又足够大。
根据这一特定要求,早年孕育而生了「960网格系统」。
wy_02
网格系统,就是将主体区域划分成若干等份的列,列与列之间保持等份的间隙。它既能在设计中为设计师提供布局参考,又能为前端工程师提供标准化的创建区块提供依据。
960网格系统是由 Twitte推出的一套网格规范,由12、16、24列不同的等份法。12列等份是我们常用的一种方式。
继续阅读

G20来了,我得搬家了

9月份杭州要召开「G20领导人峰会」,我查了下,20峰会是一个时间、地理跨度很大的会议,不同时间段在不同地方举办不同级别、方向的会议。不过最重要的应该是这个「领导人峰会」了,据说中央有一千亿的预算拨款。从年初,杭州就进入了轰轰烈烈的形象整治工程,沿街店面、老旧住宅、路面都陆续翻新、扩建。

从去年夏末搬到现在住的地方块一年了,房子位于临近市中心的一个老小区内,一楼带两个院子,晚上会在院子里纳凉吃饭,蛮惬意的。不过去年入冬之后雨水便特别的多,院子里也渐渐呆不住了。随之带来的院外落叶、楼上杂物,即使每星期冲刷打扫一番都无法保持干净整洁了。伴随着冬季的到来,院子也成了只用来晾晒衣物、堆放杂物的荒凉地。

继续阅读