网页设计师 – 设计之家

网页设计师该向印刷设计学习的3件事

sj33cn — Sun, 20 Sep 2015 14:47:18 +0000

了解这3条经典原则，能帮助你创造更好、更易懂的网页设计。

许多经典原则，例如那些字体设计原则，在线上仍然有效。图片由Peter Van Lancker提供，www.flickr.com/photos/petervanlancker

设计就是特定功能的构成——无论构成物是字节还是原子。这就意味着网页设计从它的祖先——纸墨中受益良多。

本文中，我们重点介绍几则印刷设计原则，它们在线上仍然适用。

熟练掌握后，你就能提升UI与UX设计水平，创造出更好、更易懂的设计。

01. 让读者保持专注

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

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

排版

就像报纸，用户不会阅读网站上的每个字——至少一开始不会。正如免费电子书《为人眼进行网页UI设计》里面描述的，扫视页面是用户的标准行为。

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

F模式排版：Creative Bloq的主页

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

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

还有Z模式：

Z模式布局：MailChimp的主页

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

文字

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

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

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

主要：页面上最显著的文字更大更闪耀，吸引用户的注意力。通常用于标题与装饰。
次要：介于中间的所有内容。不像标题那么显著，但要在页面的常规文字中突出显示。
再次：主要内容所选的文字。文字层次中的这一级，有助于使用户沉浸在正文中。
其他：更小的一级，使用斜体、粗体、下划线、不同颜色等等。

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

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

02. 建立平衡感

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

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

考虑使用极简的设计，通过白色、黑色或非常深的背景和前景元素达到平衡。《为人眼进行网页UI设计》里讨论过，负空间的运用可以引导用户的注意力。

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

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

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

03. 创造可靠的设计

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

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

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

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

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

未经过足够的测试：始终要尽可能广泛对设计进行测试。内容可能会跨越多种媒介（网页、电子书、印刷品），这会使得文字有新面貌。而且，有些字体转换到新媒介上可能会变得不易阅读。找到适用于所有情境的字体非常重要。还要考虑你的设计在不同屏幕尺寸、不同分辨率和不同浏览器中如何展现。
不恰当的语调：为每个页面元素选择正确的语调。与字体一样，标题应该吸引读者注意，副标题作为标题的阐明或补充，正文要像一段友好的对话——温暖亲切，让读者渴望了解更多信息。
不恰当的格式：遵循你所选的媒介：否则，会一直浪费时间修改文件，应对CMYK用于印刷、RGB用于网站这样的问题。

深度阅读：UXPin的免费电子书，2015-2016趋势的网页设计手册

想要了解更多有用的UI与UX设计技巧，查看UXPin的免费电子书，《2015-2016趋势的网页设计手册》

在其中，你会看到166个手工挑选的案例，来自于Adidas、Intercom、Apple、Google与Versace这样的公司。还列出了100项免费的在线资源，帮助你加速设计流程。

原文链接：http://www.creativebloq.com/web-design/3-things-web-designers-can-learn-print-design-91516662

译文链接：http://colachan.com/post/3462

网页设计师必须掌握的7项技能

sj33cn — Wed, 01 Apr 2015 01:59:17 +0000

网页设计既是一门科学也是一门艺术。网页设计工作一半基于正确的编程和设计技巧，另一半则基于是否对美与不美有着直觉般的敏锐度。一名称职的网页设计师一定要熟练掌握核心基础能力才能在同行中做到出类拔萃。

那么，应该如何培养自己的基础能力呢？一口是吃不成胖子的。诚然，经验的作用是无可替代的，但是优秀的教育，不论是正规教育还是非正规教育，也能带来巨大的帮助。同时，还强烈建议大家不断挑战自己，走出自己的舒适区，迎战新的领域。而这就是区别不断苦苦找客户，与客户主动找上门的关键所在。

下面是作为优秀的网页设计师所必需掌握并且能够帮助他们达到超群水平的一些必要基础能力。这些基础能力不一定都是技术和计算机技巧层面的。

1. 熟悉整体设计流程

注意“整体”这个词。网页设计有时会与图形设计重叠，所以说不同种类的设计学校有时候是非常相似的。这也就是为什么作为一名以自己作品为骄傲的网页设计师也需要多少学一些通用的基本设计流程知识。这一点包含了下列几项原则：

颜色

颜色是网页设计的核心，其有助于设计主题和主旨的构建。另外，其还具有心理层面的作用，也就是说颜色能够影响网站访客看待网站用户体验的方式。

走向

走向是指网站访客在体验网站时的视觉移动方向。走向涉及到对深度、颜色、层级、形状和线条的恰当使用。走向具包括视角、间距和面朝方向等。

平衡与比例

这一点是指视觉的稳定性与均衡性。比例可以分为两种：对称与不对称。比例通常用来强调重要元素，进而完善信息的走向。

间距

间距这一点非常简单明了。它是指不同元素之间的距离。网站要有优秀的用户体验就必须具有妥当的间距安排。一般来说，间距的大小应该要保证不同的元素具有足够的呼吸空间，同时又不能太大以免影响阅读。关键就是如何权衡。

2. 对HTML倒背如流

说到了解HTML，就要谈到写代码了。有些设计师觉得不会写代码无所谓，但也有的人坚定认为了解如何写代码是作为合格网页设计师所必须的。我认为，要作为一名面面俱到的设计师，至少要了解最基本的HTML知识。这是起码的！

HTML是所有网页的最基本构成框架，所以设计师务必要有所认识。了解HTML，就能让你的设计更具有目的性，同时更注重实用性。如果你能了解基本的代码，就能为自己所设计的网站创建模型，这样一来，相比其他不懂代码的设计师在推销服务时就更具优势，同时也能对自己设计能力的边界有着更深入的掌握。

3. 了解如何编写完美文案的

作为一名网页设计师，你要做的不仅仅局限于设计，有时候还需要编写网站文案，特别是在你没有合作的文案撰写人的时候。你可以这么想：一名同时具有优秀文案撰写能力的设计师对客户来说会更具有吸引力，同时也能要到更高的价格。

不要以为会不会写好文案只不过是在设计客户网站时的一个附庸。会写好文案是能让你在推销自己时立于不败之地的一项关键资产。想想吧，如果你能写一手一流的文案，你的推销邮件将会有效率的多。

4. 活到老学到老

山外有山，是所有网页设计师都应牢记的一句话。不断学习新知识新技巧，能让你不断震慑客户、拓展你的创意、提高你的技能，进而从整体上提高你对设计的热忱。

不断虚心学习的最大原因之一，就是网页设计领域不断涌现的新趋势。回想一下过去几年里耳熟能详的那些玩意：视差滚动、扁平化以及当下最流行的Material Design。在设计领域，学习是不能停的。学而不辍能让你始终站在潮流最前线，让你成为面貌俱到的优秀设计师。

5. 培养一些商务技能

很多网页设计师在职业生涯中总会或多或少的干过自由职业，所以说掌握一定的重要商务技能是合情合理的。你本身就是一家公司，而你所推销的优秀服务就是你的网页设计才能。如果没有商务技巧，你就会在自我推销、找客户、维护客户这些工作里痛苦挣扎。

但是如果你知道如何进行运营，就能更有信心地做出有关找客户、找项目的决策。同时，你还能学到“一心多用”的技能，让你一边以创意设计师的身份运用自身才能畅游于商业海洋大赚特赚，另一边则不断在职业道路上大步前进。

6. 掌握倾听的技巧

在与客户合作时，总要听他们讲解网站的需求，所以说让自己掌握倾听的技巧是绝对必要的。倾听是一项能够用到各种不同领域的生活技能，作为一名网页设计师自然也必不可少需要掌握。

如果你不会或者说拒绝去听倾听客户所说的话，那至少从商业角度来说，你做不了一名成功的设计师。客户总会在工作规程中反复要求或告诉你调整、修改设计。但你不能觉得烦人，不能给人留下不专业的印象（会影响生意嘛），相反，你要学会倾听他们的需求，仔细考虑然后提出自己的意见和建议。如果客户的要求是可行的，那最好不过。你只需要照做，然后表现出自己对客户需求的悉心关注。

7. 达到自己的网页设计顶点

不论在什么行业，达到职业生涯巅峰都是最根本的目标。这不是一两天甚至一两年所能实现的，但只要有持之以恒的决心和不断的进步就一定能达到。如果你对自己的作品满怀热情，就会不自觉、潜移默化地进入这种状态，当然，你也可以采用一些办法加速这一过程。

但是，关键就是你要做的面面俱到，让自己实现圆满。不要让自己所做的工作局限在设计上，这是成为一名更加优秀设计师的关键。其同时也是你迈向大师状态的起点。

原文地址：Web Designer Depot

翻译：NQ-UEC 蒋灿