七条优秀网页设计的基本准则

 

  这张图能够很好的阐述响应式设计的思想。


  而聪明的Luke Wroblewski提出了”移动优先(Mobile First)”设计战略,他认为,这种设计模式:先从移动设备开始设计,那么设计便能很轻松的向下兼容。(通俗的讲,就是大屏肯定能完美呈现小屏上的设计,而小屏不一定能装得下大屏上的设计。)

  世界一直在变,它的变数很大,而引领世界改变的互联网变数大到你无法想象。因此,迅捷的变化节奏导致互联网工作者的工作注定是”高强度、快节奏”的,要么适应变化,要么引领变局,要么被淘汰,无非这三种。正因如此,这个行业竞争激烈,新生力量层出不穷,很难有人一直保持前列。

  而本文的目的,不是为各位设计师罗列出森严的”军规”,然后以专家的口吻说”你必须得这么干”。本文的目的是更新大家适应网页设计的观念,掌握哪些经历过时间检验的基本准则,以更好的适应变化。

  新时代的网页设计充满了各种新技术、各种新的jQuery脚本、各种响应式网页设计——但我们依然不能忽略最基本的网页设计基础。

  新时代的网页设计以响应式理论为蓝本,力图在不同设备上呈现一致的网页浏览体验。

  而响应式时代依然不便的设计基本准则又是什么呢?一起来看看下面的七条,望诸君设计时铭记于心。

  1.优秀的网页设计应该简约,并且完整

  设计大师往往都是哲学家,他们往往保持一种包容的设计态度,不会采用极端的设计方式,他们的设计往往是一种平衡之美。

  我们可以画出一个横轴,左边是简约、右边是完整,而最好的设计会聪明的选取中值(如下图)

  网页设计必须简约,任何无用的特质都必须移除;与此同时,网页设计必须能够满足用户需求。

  太简单的网页如果没有空能支撑,那么从里到外就真的是”空洞无物”了。

  太复杂的网页如果缺少简约的收束,那么便会”尾大不掉”,让用户阅读困难。

  “言简意赅”的设计才是好设计,一个设计师的掌控力得以体现。


  总结起来就是一句话:一个布局、风格具有简约美,同时又能提供大量有价值信息的网站必定受用户欢迎。

  2. 用户往往缺乏耐心

  互联网充满了机遇,每个人都想通过简单的操作便能获取所需信息。

  互联网的信息浩瀚如海,你并不是唯一的信息提供者。

  亘古不变的是:用户的时间宝贵,他们缺乏耐心。如果你不能提供便捷的信息,那么他们会选择离开,进而寻找其他网站来谋求信息。

  想要做好这一点?说白了,就是信息层级要清晰,加载速度要快。

  但其实也不简单,就加载而言,我举一个例子


  上面这三种加载方式,中间的方式最迂腐:用户会想’这等到什么时候会是个头啊!

  右面呢?右面会不会好一点?答案是不会,想想你高中时上午最后一节课,你在等下课,所以你一直仔细的看着表上的指针,你越急躁,观察的越仔细,越能感觉到”时间太慢”。

  左面好不好?也不好,旋转指示条转的快,用户会认为加载速度很快,用户会想”加载的这么快还没有完全载入,这是设计问题吗?” 转的慢,用户会认为”这是网络问题,加载的居然这么慢”

  说实话,上面这三种方式都是告诉用户:请等待! 所谓的进度读取、旋转读取只不过是一种心理骗局:无论多块、进度条多充盈,在没有完成加载前,用户还是看不到页面信息。

  而最近出现了一种新方法,Luke Wroblewski在他的文章中提到过,叫做框架读取,也就是加载了多少内容,呈递多少内容,推荐各位尝试。

  3. 网页设计必须具备一致性

  想像一下你作为网络浏览者时的经历:你在浏览网页时,一般都不会详细阅读内容,你会快速滑动页面,大致浏览一遍,如果看到感兴趣的信息便停下,进行仔细阅读。这是一种用户习惯。

  万物作而弗始,生而弗有,为而弗恃,功成而弗居。夫唯弗居,是以不去。——道德经

  在John Allsopp《网页设计之道》中有这样一句话,大致是这么一种意思:设计师不应该作为用户的对立,设计师应该尊重用户的习惯,让设计适应用户的习惯,而不是做一个高高在上的独裁者。功成身退,这似乎有种”伟大的设计是隐形”的意味。

  好了,我们把话题扯回来,用户的这种阅读习惯意味着什么?这意味着设计必须具有高度的一致性,用户看到前面的布局,对后面的布局有一种”预期”:他会认为后面的页面布局也是如此,不要破坏用户的阅读节奏感。

  同样的,同一页面的各个元素以及各个子页面之间必须要具备一致的联系性,也就是说设计师的设计模式应该专一,再举个简单的例子,如果主页的导航栏布置在上方,子页面的导航栏布置在侧边,你认为用户会高兴吗?

  4.将导航菜单作为交互的”核心”


  上面已经提到过,各个页面的导航栏必须具备一致性。有时候,好的网页设计和差的网页设计差距就在导航菜单,好的导航菜单成就了一款设计,坏的导航毁灭了一例网站。

  每当用户有问题时,他都会习惯性的翻阅导航菜单,这也是用户习惯,要注意。个人认为,导航是网页设计的核心元素,影响到网站的交互性,至于要怎么设计,仁者见仁,智者见智了。

  5. 留白和信息同样重要


  “内容为王”、”内容至上”是吗?那我就提供大量丰富信息,把网站全部都填满。”这种设计思想真是大错特错,太片面了。

  你要有这样一种观念:留白也是设计的一部分,那些不使用的空间也能发挥其作用。从用户的角度来说,留白很好,让布局更有条理,信息更清晰。

  太刚强的事物容易折断,有张有弛才能长久。网页设计也是同理,多给用户一点阅读呼吸空间,让他们感受到网页设计的”节奏感”。

  各位可以自行想象一下,如果一款网页中一点留白都没有,到处都是密密麻麻的文字和图像,你会感到舒服吗?

  6.用心的设计都有清晰的视觉层级


  明智的设计师不光会创造内容,还知道如何高效组织内容,传递信息。视觉层级对于信息呈递来说异常重要,优秀的视觉层级还能帮助设计师强化设计理念。

  空间排布、间距使用、整体布局,关于这些的探讨已经够多了,归根结底,无非是为了打造优秀的视觉层级。

  7.永远不要忽略字体


  内容为王,那么内容是由什么包装的呢?答案是字体,这种小小的细节能造就大差异。字体的清晰与否决定了信息呈递的结果。

  扁平化设计强化了大家对于字体的重视,这一点我很赞同。

  还有一点趋势不容忽略:屏幕越来越大。那么字体呢?

时间: 2024-10-30 03:42:59

七条优秀网页设计的基本准则的相关文章

色彩个性化网页设计:优秀网页设计案例

文章描述:在网页设计中,如果想要独树一帜,不妨在最直接吸引眼球的色彩上下下功夫,大胆的使用色彩,能够让你的网站更个性化.然而配色问题一直是设计行业的挑战,如何用好色,配好色,分清主次,自然需要潜心研究了. 在网页设计中,如果想要独树一帜,不妨在最直接吸引眼球的色彩上下下功夫,大胆的使用色彩,能够让你的网站更个性化.然而配色问题一直是设计行业的挑战,如何用好色,配好色,分清主次,自然需要潜心研究了.如果做得好,那么效果会极具冲击力.推荐您看下我们之前推荐的人气文章<配色三部曲>. 本文收集了一些

实际经验总结:10条关于界面设计的基本准则

这篇文章是可用性大师 Jakob Nielsen 在10年前总结的,到今天仍然受用.通过这个时间跨度,可以得出,可用性话题不是某个时代的产物,一些研究经验时至今日也依然值得借鉴.看似短小的10条启示中,融入了大量项目经验,这些内容也将继续指导设计者,在新的互联网技术推动下,创造出更加高质量的产品. 不要把它当作教程来看,它只是思想精髓的提炼.在各式各样的项目中,会遇到千奇百怪的情况,会跟各种角色的人一同协作完成目标.只有当大家达成共识,才能更好地提高效率,这10条启发正是纽带. 其实,这是10条

来自西班牙设计师的优秀网页设计

  这次又是别人家的网页设计!之前混在一起看可能不觉得,单独来看西班牙的网页设计其实还是能察觉到他们的民族性格,时尚奔放,现代的设计下难掩躁动与激情,令人着迷! 充满活力,朝气蓬勃,美丽四射,时尚风情,这是西班牙给人的印象,也是来自西班牙的优秀网页设计给人的别样体验.这些网页独特的浏览体验并非偶然,西班牙独特的历史和的历史和多元化的文化赋予了这些设计不同凡响的风格:意大利文艺复兴.罗马式的风格.穆斯林文化.西班牙文化的黄金时代.巴洛克和洛可可,新古典主义以及,乃至于超现实主义,文化与思潮在西班牙

20个以细腻动画取胜的优秀网页设计

  动画今年是热门,像一场跳跃腾挪的表演,久看也不免厌倦.在这波浪潮里,有一小股设计师别出心裁,给网站加了细腻而不恼人的动画,一方面给网站添了生气,不致沉闷,一方面顺应潮流,锦上添花,实在是聪明得紧,来学习一下. 目前很多网页设计已经运用新的HTML5视频以及CSS3+JS来实现很棒的动画效果,不过我们在使用动画时也不能太弦,可以适当的并且有意义的去使用,这才不会分散网站访客的注意力. 网页设计中如何合理使用动画效果呢? 我们可以参考今天整理的20个融合细微动画的优秀网页设计作品,这些网页使用了

以字体为核心的优秀网页设计作品

  在现代网页设计中,字体也常会被当做重要的设计元素融入网页设计之中,以一种新颖的方式传达信息.设计师们发现了不依赖于图片.阴影和背景等元素去设计漂亮网站的新方法,那就是以字体为核心的网页设计,而且效果令人惊讶.今天这篇文字就收集了35佳以字体为核心的网页设计作品,一起欣赏. 01. Games We Played 02. Hello Studios 03. Kccreepfest 04. The Kettle 05. English Workshop 06. What the Fox 07.

35佳以字体为核心的优秀网页设计作品

在现代网页设计中,字体也常会被当做重要的设计元素融入网页设计之中,以一种新颖的方式传达信息.设计师们发现了不依赖于图片.阴影和背景等元素去设计漂亮网站的新方法,那就是以字体为核心的网页设计,而且效果令人惊讶.今天这篇文字就收集了35佳以字体为核心的网页设计作品,一起欣赏. 01. Games We Played     02. Hello Studios     03. Kccreepfest       04. The Kettle     05. English Workshop     0

优秀网页设计作品:卓越设计遵循的原则

导读:优秀设计和卓越设计之间的区别是比较小的.一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品.通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别. 内容摘要1.合理使用渐变2.留白3.网格布局4.提高字体应用5.明确而有效的导航6.设计漂亮.有用的页脚介绍优秀设计和卓越设计之间的区别是比较小的.一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品.通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别.前不久,

25个巧用字体排版帅气的优秀网页设计

  虽然排版是网页设计 中极为重要的组成部分,但是绝大多数的网站并未在排版上做过专门的设计和调整. 事实上,在我看来我们日常访问的许多网站在排版设计上并无亮点,这也是为什么,当我们发现这些在排版设计上用心雕琢的网站的时候,会由衷地感受到喜悦和别样的幸福感. 如果你厌倦了无处不在的宋体.雅黑.Arial和Helventica,那么你应该会喜欢接下来的案例,这些巧用字体排版帅气的优秀网站会再次扩充你的网页收藏夹. 1. V02 Group 雅致的文字排版悬浮在半空中,和背景融为一体,这种设计除了众所

WEBJX收集国外的用大图当背景的优秀网页设计案例

文章描述:20个大背景风格网页设计作品欣赏. 使用一个满屏的大图片,做为背景.这是一个很好的设计,让整个网页布局,充满了冲击力.收集了国外20个优秀前端工程师的作品,一起来欣赏一下,个人尤其喜欢那个狗狗的博客. Uber – Portfolio WordPress Theme Whitmans New York Studio Octopi Von Dutch Hiu Denim Co Casey Britt Range Rover Evoque The Amazing Spider-Man Su