塑造2010年的网页设计行业的那些事

塑造2010年的网页设计行业的那些事

2011/01/13 · HTML5 ·
HTML5

导读:原文由王五翻译,已修正原译文中的一些误译之处。以下是全文。

在2009年末,我曾坐下来考虑网页设计会向何处发展,当时发生的一切又将走向何方。我提起笔来(确切地说,我是坐在键盘前)写下了《2010年塑造Web的五项科技》,力图总结正在推动我们这个行业发展的科技趋势和行业发展的方向。为了真实的反映过去一年所发生的事,我在本文会讨论一些塑造了2010年网页设计行业的科技和趋势。

新的标记标准:CSS3 和HTML5

毫无疑问,在2010年中标记标准有巨大的发展。W3C理事会曾建议在几年之后最终确定CSS3和HTML5语言的地位(原本预计HTML5的地位最终会在2022年确立),可它们却已迅速成为新的标准。

图片 1

幸运的是。和IE9一样,当今的浏览器如Safari、Chrome、 Opera、
Firefox,都意识到了CSS3和HTML5对于移动平台和传统电脑桌面的的价值。它们都进了一步,将CSS3和HTML5投入应用,而不再只是做为样本。

对我而言,当看到2010出版的相关书籍,不少关于CSS3和HTML5的文章标题,如《无情的网页设计业》,
《网页设计者的CSS3》和 《网页设计者的HTML5
》时,我能总能感觉到一些更为切实和权威的意味——这只是冰山的一角。

图片 2

伴随对新语言的性能进行的无数实验和概念验证,网站设计者和浏览器供应商有了新的觉悟,这也把他们引入了主流。

也许开始赢得众多怀疑论者的是这些新规范在IE9中的应用——在最常用的浏览器中的重新运用——结果很受欢迎。微软浏览器的标准基于(大部分)其它浏览器供应商正在使用的标准,这意味着CSS3和HTML5在现今的项目中还是可以用的。

图片 3

IE9或许还不能支持CSS3和HTML5的所有特性,如你在谷歌浏览器和火狐浏览器中所看到的那样,但微软的工程师的确已经做出了很大转变,朝正确方向的转变。

即使在得到各种浏览器的全面支持之前,JavaScript助手资源库也扮演了很重要的角色,使得我们可以使用新CSS和HTML的特性。开放源代码项目如:Modernizr,HTML5
shiv, 和 HTML5
Boilerplate继续帮助网页设计者和网络开发者通过这些新的标记语言标准日益提升其产品的性能,同时又能迎合那些已经过时的浏览器。

网页排版

图片 4

使用CSS @font-face规则排版对网页设计也有很大的帮助。新的网络服务如Google
Font API 和Font
Deck,以及原有的TypeKit使得设计者可以跳出原来少量的网络安全字体的限制而有了更多的选择。

移动互联网

图片 5

2010年1月17日,苹果公司发布了iPad。iPad、笔记本电脑、MacBook
Air和Android
smartphones之类的超级便携电脑,使浏览器脱离了传统的静态桌面,转向沙发、机场休息室、火车及公园长凳上,实际上可以说是所有能接收无线网络信号的地方。

另一方面,去年有许多关于CSS3设计网页的讨论(和更多的应用)方面的媒体调查和反馈,使设计的网站可以在多种不同的平台展示。

通过设计iPad应用程序、设计现有网站的易用的移动版本、使用平果软件开发工具包设计iPhoner应用程序或利用开放的技术即设计HTML5
语言的iPhone程序, 很多设计者已经进入移动网络领域。

社交网络

2010年网络社交继续发展,甚至还有一部关于网络社交的电影!毋庸置疑现在网络社交比任何时候都要流行。对很多人而言,Facebook就是因特网。

我们已经看到了网络社交的文化效应,如某人网上的推特,还有Gap,这个国际大公司在Twitter和Facebook用户公开批评其选择后改换了公司标志。

有人说,并不是所有的网络社交理念都实现了, Google Wave做到了,谁不同意?

JavaScript

如果我问你在去年JavaScript做为一种标记语言发生了哪些变化,你或许发现并没有多少。新的JavaScript在开发方面的进展有些让人失望,尽管ECMAScript
5让人看到了JS引擎在现代浏览器中局部地应用(如FireFox)。

无论怎样,在去年通过做为CSS3和HTML5的业务引擎,JavaScript已为网页设计者和网络开发者所熟悉。JavaScript是HTML5中许多令人兴奋的功能的驱动程序,
如canvas的APIs, 音频, 视频,
网络存储等。我们可以看到服务器端面脚本语言在项目中的应用(如node,
JS)使客户端和服务器端和服务器端面实现无缝对接。

简而言之,JavaScrip比以往更流行了。Promote
JS之类的项目对做到更好的文件编制有所助益并且激发了对JavaScript的讨论。

2010年下半年涌现出大量的新的JavaScript的博客,同时原有的博客的关注度也大为提高。JavaScript周刊等通讯刊物高调报道了关于JavaScript的相关新闻。

图片 6

JavaScript在新闻报道中被提及的次数较之2010年以前大为增加(通过Google
Trends
的统计可以看出),这一数据证明了JavaScript在主流设计领域中正日益流行。

原文:sixrevisions  译文:王五

 

赞 收藏
评论

图片 7

     
 0基础学设计快一年,各种心酸,各种被虐,各种怀疑人生。永远感觉脑袋不够用,昨天定计划之后每个月必须2本书,写写小学生日常的读后感(读书时一直抱怨每周写周记)。

网页首屏设计的那些事

今天在整理文档时候找到了一份关于表单设计的分享,里面有关于「表单5大元素」「情感」「设计」的分享,里面表单的例子是去年的,可能有些网站已经重新设计过,不过不影响阅读文档。

游戏网站的设计要求比一般网站要求要高,设计必需细致,突出画面视觉效果,很多优秀的游戏网站可能要经过手绘、后期处理并且制作极击冲击力的视频,这些都需要花费大量的时间,所以制作一个好的游戏官网并不容易。下面分享17个国外游戏行业的网页设计欣赏,画面精美,视频动画也很棒!如果你制作游戏项目网站,这些或许给你带来新鲜的灵感。

图片 8

作为一枚UI设计师,对于网页设计那是家常便饭了,最近很多人在微信群里问我,网页的首屏设计多高合适?我根据我的一些个人经验跟小伙伴分享一下关于网页首屏设计的那些事儿

图片 9

Batman: Arkham Knight

起初读这本书的时候最关心的就是第三章与第四章,第三章的的主题就是设计在整个团队中被虐,第四章则是设计在甲方眼里被虐。恰恰就是读到这两章的时候,心态已经又开始瞬间爆炸了(让一让,高德伟的箭要来了)不闲聊,直接看图。

一、什么是首屏

图片 10

图片 11

首屏(above the fold),fold有折叠之意,above the
fold是指在折叠之后能看到的内容。为什么首屏的英文翻译会跟折叠有关系呢?原因很简单,这个概念最早用于出版领域,可以简单的理解为“头版”。因为报纸的运输和分发过程是折叠起来的,所以报纸的折叠后暴露在读者面前的那一部分内容就显得尤其重要,读者会根据头版的内容决定是否购买。因此处于头版的内容意味着编辑认为它们是最重要的,头版的内容也决定了出版物的立场和定位。所以“above
the fold”也用来表示所有优先显示或或优先级最高的内容。

Destiny

图片 12

网页中什么是首屏呢?用一句话概括:首屏是指不滚动web网页屏幕的情况下就能被用户看到的画面。

图片 13

是的,,就是看了这两章,连续几天,已经欲哭无泪了。当初是踏着兴趣,踏着梦想。从入门到放弃,从入门到转行,从入门到住院,从入门到怀疑人生……..纵使有一万种理由,你的性趣(兴趣)、你的努力,你的耐心,以及无数个通宵的改稿,还是会被一个叫甲方的东东磨平了棱角。迷茫的那几天找到了当初面试我的一个设计尸。从这碗壮阳汤(鸡汤),仿佛看见了璀璨的未来在想我招手,仿佛耳边回响着马丁路德金壕得亢奋的“I
hava a dream…”that one day…..

整个绿色区域为首屏

Forza Horizon 2

图片 14

一屏式首屏设计

图片 15

  很多东西只要你喜欢,你做图能忘记时间,能忘记吃饭,即使前路有一万个坑,你的节操也能变成路人。天空只会飘来5个字(脑补大张伟…..)上帝为你关了一扇窗之后,还会继续关一扇门。假如生活欺骗了你,不要悲伤,不要心急,因为明天还会继续欺骗你。

二、影响首屏设计的因素

Mad Max

  有毒的鸡汤说完了,是时候来一发正能量了,但是飞翔的松江哥写的这本书确实能够解决许多设计新手常遇到的各种问题。商业设计不是为了炫技不是为了做一个吊炸天的界面,是为了解决客户的问题,满足用户需求,提升公司的品牌形象,提升产品的档次,使之在同类产品中脱颖而出,为产品增加更多的附加值。生活是个具象化的东西,而设计灵感往往是抽象的。对于灵感的解释,是日常生活中累计各种对生活的感悟,然后某一瞬间,无意在某点的启发下,将这些生活的感悟串联了起来,使人们摆脱困惑,对于事物有了全新的认识。

1. 尼尔森首屏原则

图片 16

  飞翔的松江哥在《网页设计那些事儿》在第六章的时候写到“你真的读懂需求了吗?”对于新手帮主特别大,记得第一份工作设计的第一个网页时,从接到需求,就是开始在站酷,UI中国上面随便翻一些好看的网页,形式觉得很好看,就直接原封不动找着页面抄了下来,完全不考虑什么鬼。只觉得,,嗯,这一块好看。好看,额,我要了。嘿嘿嘿~~所以做出来的东西自行脑补,画面太美,我自己都不敢看。但松江哥在一个如有雷同的案列中,从接到邮件需求就开始各种头脑风暴,从需求中提炼主广告语、提炼关键字、分析受众群体、确认参考三部曲、确定主色调、等一系列严谨的步骤,对于才入行的菜鸡,学到了很多。

世界著名的网页易用性专家尼尔森曾经有报告显示,首屏以上的关注度为80.3%,首屏以下的关注度仅有19.7%。这两个数据足以表明,首屏对每一个需要转化率的网站设计的重要性。

Tom Clancys The Division

设计是一份工作,也是一种生活态度,他没有那么深奥,也没那么简单,所以不要自卑,也不要膨胀,猥琐发育,别浪,偶尔冒个泡,无形之中装一个逼,体验生活,感悟设计,把职业当成兴趣,在把兴趣当成职业。商业与艺术并重,体验各种挑战—设计真正的乐趣就在于此。

尼尔森首屏设计原则

图片 17

2. 屏幕分辨率和市场占有率

Call of Duty: Advanced Warfare

根据相关数据统计分析,得出了以下结果:

图片 18

屏幕分辨率比重

Battlefield Hardline

市场占有率

图片 19

3. 浏览器界面参数和市场占有率

Assassins Creed

我们再来看看浏览器的问题,同样经第三方数据统计,分析各浏览器界面参数和市场占有率,得出以下结果:

图片 20

浏览器参数及市场占有率

Halo

4. 最佳首屏设计范围值

图片 21

当我们掌握了个浏览器参数和市场占有率以及屏幕分辨率参数,就可以确定首屏设计的宽度和高度。

安全宽度:1002px 建议最大安全宽度:1258px

Windows XP首屏高度:580px

Windows7、8、8.1、10首屏高度:710px

最佳首屏区域

① 宽度:

宽度无干扰因素影响因此是确定的1002px

② 高度:

屏幕总高度768px、1080px

任务栏高度40px(Win7、8、8.1、10=40px Win XP=30px)

浏览器=160px(包含工具栏、状态栏、边框等)

位置工具栏=30px(如搜搜工具栏,百度工具栏,360工具栏等等用户浏览器上安装的各种插件都会影响到首屏的高度)

首屏高度=屏幕分辨率总高度—系统任务栏高度 —
浏览器高度
(工具栏、状态栏、边框等)— 位置工具栏(如360、百度)

如果是电商网页首屏设计,还得减去商城页头和吊顶高度共106px

因此得出最佳的有效设计范围为:

1002 X 710 px

总结

以上是U妹总结的一些观点和个人的一些经验,具体设计时还需根据产品的定位去分析用户群体进再进行设计,以上希望可以帮到各位小伙伴们,内容未必是专业的,但文章肯定是U妹用心写的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注