网页设计师该向印刷设计学习的3个设计法则

   许多经典原则,例如那些字体设计原则,在线上仍然有效。设计就是特定功能的构成——无论构成物是字节还是原子。这就意味着网页设计从它的祖先——纸墨中受益良多。本文中,我们重点介绍几则印刷设计原则,它们在线上仍然适用。熟练掌握后,你就能提升UI与UX设计水平,创造出更好、更易懂的设计。

  图片由Peter Van Lancker提供,www.flickr.com/photos/petervanlancker

  01. 让读者保持专注

  印刷设计专注于易读性,网页上也是如此:只是把“读者”换成“用户”而已。

  目标应当是清晰的表达,并且让人能够轻松纵览整个设计。我们来看几个从印刷设计沿用过来的概念。

  排版

  就像报纸,用户不会阅读网站上的每个字——至少一开始不会,扫视页面是用户的标准行为。

  为扫视而设计时,有两种模式需要考虑。首先是F模式。


  F模式排版:Creative Bloq的主页

  F模式反映了用户最通常的扫视页面的方式。他们的视线从上面开始横向移动,然后沿着左边垂直移动,寻找突出的文字。

  一旦找到激起他们兴趣的内容,他们又会开始横向浏览页面。

  还有Z模式:


  Z模式布局:MailChimp的主页

  Z模式也是一种自然的浏览模式,通常用于报纸,网页上也是如此。用户在页面顶部水平浏览,然后向左下移动,在页面的下一行再次进行水平移动搜寻。

  文字

  和印刷一样,网页文字也应该有清晰的层次。选择适合的字号,有助于关键词在页面上突出,让用户更轻松的浏览页面。


  清晰的文字层次:World Baking Day网站。

  我们来看看文字层次中一些常见的层级:

  主要:页面上最显著的文字更大更闪耀,吸引用户的注意力。通常用于标题与装饰。

  次要:介于中间的所有内容。不像标题那么显著,但要在页面的常规文字中突出显示。

  再次:主要内容所选的文字。文字层次中的这一级,有助于使用户沉浸在正文中。

  其他:更小的一级,使用斜体、粗体、下划线、不同颜色等等。

  配合运用,建立文字的层次,可以创造出秩序,防止用户迷失其中。

  要测试你页面的易读性,可以使用“3秒原则”:简略地浏览页面,然后看向别处。其中突出的内容有没有反映出你设计意图?如果是的,那你方向正确,继续保持;如果不是,则需要打回重新设计——可能确实如此。

  02. 建立平衡感

  无论平衡感来自于对称、非对称或是放射状,都是为了让设计创造出稳固与一致的感觉。如果用户在你的网页上感到轻松,他们会更愿意逗留。

  图片或文字不要过于密集:时刻考虑元素的间隙。排版倾向于简洁——密集的布局会妨碍用户。眼睛难以接受杂乱,使人更难接受信息的流转。

  考虑使用极简的设计,通过白色、黑色或非常深的背景和前景元素达到平衡,负空间的运用可以引导用户的注意力。


  震撼的极简设计案例:鞋类品牌ETQ的网站。

  上面展示的ETQ网站,利用了负空间将视线引向所陈列的产品。页面底部对比鲜明的黑白色块,让用户选择尺寸或查看商品价格。

  网页上极少干扰信息,创造了一种平静与秩序的感觉——当然,也希望有助于促成用户购买。

  实战方法见:《超实用!如何让一个网站看起来高大上且更有设计感?》

  03. 创造可靠的设计

  让你的设计对于所有用户都是可靠的。不要使用两种以上的字体,确保所有年龄层的用户都能阅读。过于杂乱会扰乱信息。

  如果你发现自己在屏幕前手足无措,你的设计可能就包含了太多的图片。

  选择配色方案时也要时刻为用户着想——如果是医院网站,使用冷静柔和的色彩;如果受众是青少年,则适合更鲜明的色彩。


  UC San Diego Health的网站选用的配色很吻合它严肃的内容。

  下面是一些书籍设计中常犯的错误,同样适用于网页:

  未经过足够的测试:始终要尽可能广泛对设计进行测试。内容可能会跨越多种媒介(网页、电子书、印刷品),这会使得文字有新面貌。而且,有些字体转换到新媒介上可能会变得不易阅读。找到适用于所有情境的字体非常重要。还要考虑你的设计在不同屏幕尺寸、不同分辨率和不同浏览器中如何展现。

  不恰当的语调:为每个页面元素选择正确的语调。与字体一样,标题应该吸引读者注意,副标题作为标题的阐明或补充,正文要像一段友好的对话——温暖亲切,让读者渴望了解更多信息。

  不恰当的格式:遵循你所选的媒介:否则,会一直浪费时间修改文件,应对CMYK用于印刷、RGB用于网站这样的问题。

时间: 2024-09-24 07:29:22

网页设计师该向印刷设计学习的3个设计法则的相关文章

网页设计师面对低廉的价格加上粗糙的设计

网页制作Webjx文章简介:网页设计报价–设计师心中永远的痛. "涸泽而渔",说的是:为了捕鱼,把池水抽干,不管大鱼.小鱼.鱼蛋.乌龟.王八蛋都给捞上来.比喻只图眼前的利益,不做长远的打算.这个道理祖先早就总结出来的道理,却在网站设计这个行业被众人熟视无睹.低廉的价格加上粗糙的设计使得网页设计师的生存越来越困难. 从经济学的角度来说,价格趋近于成本价是行业成熟的标志之一.网站设计公司不是国字头垄断企业,在价格上无法与国际接轨,也不会跳出个砖家或人大代表为网站设计大打抱不平.我们只能控制

为网页设计师准备的10个在线的HTML5设计工具

1) Google – Web Designer http://static.oschina.net/uploads/img/201401/16081306_dgRl.png" > 2) SpriteBox http://static.oschina.net/uploads/img/201401/16081307_9nSR.png" > 3) Xray 4) Chrome – Ajax Animation 一个 HTML5 的强大的基于 Web 的动画套件,原本是考虑作为可

网页设计师的平衡点:到底要不要学写代码

网页设计师到底要不要学写代码?这个问题很有趣,但是却很少被大家提及.因为在一个网站开发中,网页风格设计和前端的布局代码(比如用 CSS,HTML)是分别是由美工和前端开发人员完成的.两者之间泾渭分明,在业界,几乎也从没有逾越这个界线.当然,这个问题的答案就需要仁者见仁了.不过,你可以阅读下文,或许你能从中找到一些启发. 这是个有趣的话题,不过网页设计师们却很少讨论这个问题.以Photoshop作为起点难度大,在完成第一个项目之后,你会感觉兴奋又紧张.但是,如果你不会写代码,网站的原型设计的用处又

如何做一个会赚钱的优秀网页设计师

  你是一名网页设计师或者一个想学习网页设计的人吗? 如果你的回答是"Yes",那么你最初想学习网页设计的原因是什么呢? 有些人梦想创造出伟大的设计并因此闻名于世;有些人则把网页设计作为自己的事业并为之奋斗一生;而有些人,或许仅仅是为了赚钱养家. 那么你呢? OK,无论你为何想学习网页设计,现在我要向你介绍一种一箭三雕的方法,能让你在学习网页设计的同时,变得更受欢迎,还能赚些钱.正所谓,生财有道!这听起来很棒,不是吗?你一定开始期待我要讲些关于网页设计的技术了吧.很遗憾,我要讲的跟这个

怎样才算是一个合格的网页设计师?

随着互联网的盛行,市场上各行各业的企业对于网站的更新换代都有着不等级别的需求,然而网页设计师这个专业便是一个赤手可热职位.在上海建站行业里面什么样的网页设计师才算是合格的,对于企业网站设计理念,设计思路,设计规划,以及最后网站成型的框架页面是否能够得到客户的认可,这些对于整个网站制作项目来说都是非常重要的. 网页的设计思路方向他贯穿着整个网站建设项目的灵魂,其实重点核心,还包含网站建设的前期准备,中期制作的把控,后期的运营,所以说想要把网站这个项目做好对于负责网站的网页设计师来说不是一件容易的事

网页设计师学习网页设计的经验和技巧

随着公司影响力的壮大和产品的不断提升,相关的形象设计要逐步跟得上,需要逐渐提升,所以就招一个应届生网页设计师,算是一块成长.应届生有拼劲.肯学,但也好高骛远,起点都差不多,如何培养网页设计师就变得至关重要了.总结自己接触和学习设计的一点经验与大家分享,希望得到大家更多的建议. 一.配色 其实对色彩的感觉是设计师应具备的最基本素质,其作品不管是对网页界面.系统界面.还是产品包装等等都有广泛应用.基本的一些理论,什么冷暖色.对比色/补色.色彩心理.搭配原则等等,满大街都是,有意者随便搜一两篇看看就行

给网页设计师的10个免费在线学习网站

  对于一个互联网从业者,持续不断的学习是不可避免的.新的技能是成长的必要条件,也是改变职业生涯的基石.想成为一名优秀的网页设计师.前端,不断砥砺技术,掌握新知识是必修课.还好网络上的在线课程和各类文章越来越多,在系统和完善程度上也做的颇为不错,所以即使你只是一个初学者,也能通过一系列系统的课程,称为了一个称职的设计师.开发者.当然,不论课程是收费还是免费,最重要的其实还是你自己的坚持,只有持之以恒,才能抵达目标. 当然,你的部分你来完成,而我除了鼓励,能给你的,就是这些精心挑选的在线课程了.这

网页设计师学习编写代码的一些理由

通常,在完成了一件网页设计后,设计师的无知都会显露无遗而备受指责.他们把创建网页代码的繁重工作都留给了程序员们.这种现象不只出现在网络开发行业,在软件及游戏开发业也是如此. 残酷的事实就是:开发进度可能会因设计师而停滞不前.为了追求最佳效率,设计师不仅需要描描画画,还需要能把它做出来!本文中,我想与读者分享一些为什么设计师需要学习编写代码的理由. 做现实可行的设计 有了一个最终产品将如何实现的明确印象,设计师将拿出更多实际可行的概念.作为开发进程中不可或缺的一份子,设计师肩负着确保他们的设计能够

网页设计师的字体替换方法指南

写在这篇文章之前:中文网页字体的窘境 在国外的设计师幸福地讨论着如何不用图片进行字体替换时,当Google Proudly地提供越来越多的web fonts时,使用中文的网页设计师只能发出一声叹息.中文世界的网页字体窘境,不仅仅是由于中文符号过多造成的字体文件过大这样的技术阻碍;更深一层的原因是,根本就没有几种可用的好字体. 一方面,尽管一些中文字体提供商也在致力于提供不同平台的解决方案,字体价格还是贵得令人乍舌,方正字库的年费高达万元,这对普通设计师来说很难承受.另一方面,制作中文字体是吃力不