每个设计师都应了解的10条有效的网站设计原则

Author: limo

就像任何创造性的学科一样,网站设计也有它的规则。内容、导航和视觉效果必须协同工作,以确保设计达到完美的平衡。但是,如何处理好的网站设计的基础呢?让我们找出答案。


优秀网站设计的10条原则


这里有10个原则来帮助指导您的下一个网站设计。


1、目标为基础



网站的消息传递和号召性用语(CTA)是支持其目标的关键,网站的目的可以很简单,比如促进购买、讲述公司故事或提供教程。您应该用一两句话来表达网站的意图——思考一下网站的使命宣言。


进行网站设计时,您不应该进行任何设计。目的将为您提供清晰的计划,并指导设计和内容创建。赢得胜利并不是一种实用的设计理念。


巩固网站目的的一部分是要知道它是为谁服务的——谁是您的受众,他们需要什么信息,您的网站将如何提供这些信息?了解您的用户的人口统计数据和痛点将帮助您找到正确的方向。


设计有广泛的意图,也有击败竞争对手的具体营销策略。视觉和内容如何巩固您的品牌,让它脱颖而出?您的网站如何能比您的竞争对手提供更多的价值?建立品牌和受众是很重要的。


2、内容赋予意义


Purple Mattress以简单,乐观的方式传达了其品牌的优势。


他们的网站设计是一个漂亮的包装,但真正重要的是里面的东西。一个网站需要有实质内容,而不是轻率的填充内容。


系统应该使用用户熟悉的单词、短语和概念使用用户的语言,而不是面向系统的术语。遵循现实世界的惯例,使信息以自然和逻辑的顺序出现。

-Jakob Nielsen,“用户界面设计的10个可用性启发”


高质量的内容是有用的,清晰的,并且引导您的听众采取您想要他们采取的行动。SEO应该被计划并融入到内容中。搜索引擎优化可以深思熟虑,有品味地执行与对话的语气,整合关键字和短语,不分散您的信息。


确定网站的目的有助于提供您需要的内容,采用内容第一的方法意味着从设计过程的开始就使用真正的内容。真正的内容能让您更容易地发现需要在过程中做出的改变,而不是在最后淹没在调整和大修中。


用能满足听众需求的内容来取悦他们。否则,您的网站可能会像这样:



3、视觉效果能让人们参与其中


Finsweet使用了不寻常的图像和动画来吸引您的注意力——比如一个粉色和绿色的狮子。


每个设计元素都应该反映和传达一个品牌的身份,图片、插图和其他图形平衡了文本,分散了网页,让眼睛从阅读中得到休息。


一个激动人心的主页面形象会给人良好的第一印象,动画过渡和滚动触发的效果使人们移动,并使导航从一种无需动脑筋的必要变成一种交互体验。无论一个品牌的风格如何,视觉效果都应该为网站设计增添活力,而不仅仅是占据空间。软件公司、食品卡车和会计师都可以在保持品牌的同时创造性地使用他们网站的图片。


您的视觉效果应该是高质量的、好看的——使用清晰、色彩平衡的照片和图形,尺寸和分辨率要合适。糟糕的视觉效果会毁掉一个伟大的设计。


4、和谐共鸣


NUA自行车使用灰色调色板,充足的白色空间和稀疏的文字,使我们的注意力集中在他们的自行车上。


布局中的每一个重要元素都应该协同工作——包括HTML和CSS。如果一个颜色鲜明的超大按钮没有足够的理由让它看起来不一致,那它感觉就不合适了。不协调分散和中断用户体验。当有些东西感觉不好的时候,很难看到整体上的好。同样的,糟糕的用户体验会导致网站访问者反弹——损害您在谷歌中排名的机会。


一个好的设计师会让事情变得用户友好,并且知道哪些字体、视觉效果和导航类型会吸引注意力。他们对如何将它们组合在一起有一个愿景。新设计师常常试图在布局中加入尽可能多的刺激元素。但是当太多的元素需要我们的注意力时,我们就会失去注意力。


熟练的网站设计师会考虑到每个元素的重量,他们知道什么时候应该克制。他们知道如何创建一个轻松导航的页面设计。这种和谐感也延伸到了品牌标识上。从网站的声音和色调到调色板的一切都应该是一致的。


品牌指南和生活方式指南有助于保持一致性。品牌指南提供了从内容到颜色的全面解释。还有一个生活方式指南,展示了所有东西是如何组合在一起的,并使整个站点的变化简单而迅速。


5、字体塑造知觉


尼古拉斯·杰克逊使用一种时尚的字体和打印式的图像给他的作品集一个艺术的复杂性。


印刷最重要的一点是,它把思想、想法、图像从一个头脑传递到另一个头脑。

——Beatrice Warde《水晶酒杯》


印刷术是思想的容器,除了单词本身,字母的形状和样式也传达着意思。排版就像一个解码器,把作者的想法翻译成视觉表达。


字体应该同时适合放置的选择和设计的色调,草书字体可能在标题或装饰的目的很好,但他们是不切实际的大段文字。


错误的字体会破坏重要的内容。只要问问那些用漫画字体幻灯片宣布发现希格斯玻色子的科学家们就知道了。对于这种字体的选择,人们有很多要说的。谁知道呢——也许那些唱反调的人错了?一定要知道并喜欢您选择字体的原因。


在设计中,传统字体和更具个性的字体有很大的空间。对于大块的内容和其他重要信息,简单的字体可以提高可读性。程式化的排印应该被当作强烈的香料-添加一点这里和那里的味道。


6、组织统一


Blue Apron井然有序的网站设计使他们的食品包订阅变得简单而诱人。


内容应该具有逻辑、流程并适合于层次结构。您的内容应该引导您的听众得出一个必然的结论,每一部分都建立在之前的基础上。每句话都应该更清楚地说明您的品牌和目的,让读者在阅读时对接下来的内容有所期待。


标题标签应该用来构造内容,帮助网络爬虫为网络搜索排名您的网站。如果您在开始设计之前还没有完成所有的内容,至少使用标题来帮助您构建。


视觉元素也应该有组织。用图像和图形定义部分,以补充书面内容。


7、颜色决定基调



简单巧克力用他们产品的包装和原料来提供网站的调色板,其设计与他们的品牌流动,并展示他们美味的巧克力棒。


您为设计选择的调色板传达了很多信息。它可以像玩具公司那样好玩,也可以像金融服务网站那样严肃。一个配色方案可以很好地反映一个品牌的精神和信息。


选择能传达您身份的颜色,最重要的是,让内容容易阅读。记住这一点,总是通过颜色对比检查来运行您的颜色组合,以确保可读性。


8、留白创造平衡


丹•马查多(Dan Machado)的在线作品集使用了大片空白和粗线条。


空白、按钮和其他视觉设计元素可以帮助图像和内容脱颖而出,避免布局混乱。留白,也被称为负空间,是任何实用设计的一个重要方面。没有它,消息传递就会变成模糊的斑点。


9、视觉层次结构使导航简单


水烟零售商Fumo使用一个下拉菜单,其中只有有限的几个选项,以方便浏览产品类别。


您的网站导航的视觉层次结构应该使它很容易访问您的内容,只需几个步骤。当然,您不希望错过任何内容,但无休止的下拉菜单、按钮和内部链接会让人不知所措。


通往网站各部分和内容的路径应该清晰易用。想象一个有3个街道选择的交叉路口和10个街道选择的交叉路口——简单会让您的旅程更好。


10、真实性增强信任



从基层到被大公司收购,本杰里一直坚持着自己的价值观。


“好的设计是诚实的。它并不能使产品比实际更有创新性、更强大或更有价值。它不会试图用无法兑现的承诺来操纵消费者。——来自维索的《优秀设计的力量》。


精明的消费者。他们能够看穿肤浅的营销行话——他们希望品牌是真实的。除了视觉效果,网站还应该有深度和真实性。如果您登陆过一个有虚假推荐信的网站,您可能会立即被退回。我们知道当有人试图在我们身上停车时,我们总是感觉不好。


陈词滥调和模糊的营销文案不会帮助您与人建立联系。通过提供有价值的信息,传播品牌背后的人性,将您的品牌定位为真实的声音。


一些简单的规则将指导您无尽的设计可能性


这些指导原则告诉您几乎所有您要访问的网站,例外总是存在的,但是了解规则可以在不破坏您的网站设计的情况下更容易地修改它们。


相关阅读