反差/重复/排列和分类与web设计相关原则

  我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论,并且包含许多极棒的设计实例。其中一个值得关注的地方就是4项主要的">设计原则,它们已经在设计中为我所用。这4项原则就是:反差, 重复, 排列, 和分类。

  本文将讨论这4项与web设计相关的原则。只要在脑海中牢牢记住了这4项原则,你就一定可以设计出更加整洁漂亮的网页。

  1.反差效果

  好的反差效果设计可以给用户一个极好的第一印象。如果用户的眼睛没有焦点,注意力就会在处处是相同尺寸的元素和排版界面中迷失。设计师需要设计出很明显的突出视觉元素来引导用户的体验。你可以通过选择图片、颜色和字体等来形成良好的反差效果。

  图片反差

  当需要在很多小元素后面展示一个大尺寸的插图时,这种方法很有效。嗯,我的意思就是,比如:

  The Invoice Machine  

  这个网页利用一张大图片来吸引用户的注意。而同时网页很自然的单色又让很少的蓝色应用有了更好的效果。

  Instabox  

  当你眼睛看到这个页面的时候,首先你会注意到什么?最有可能的就是盒子上面的那个星星了。跟 The Invoice Machine 一样,它们都是通过用一张大图片和很少的颜色来制造一个视觉焦点。

时间: 2025-01-21 16:25:25

反差/重复/排列和分类与web设计相关原则的相关文章

WEB设计先驱JEFFREY ZELDMAN经典访谈

  任何从事互联网设计工作的同学或许都听说过Jeffrey Zeldman的大名.作为现代互联网标准的最大贡献者之一,他在Web这个行当里做事的时间怕是比我的活过的年头都长. 能对他进行访谈,并将他对职业.生活及互联网设计的深挚热情分享给各位,对我来说是非常幸运的事. 本文即面向新人,同时也会使多年的老手感到共鸣和启迪.Jeffrey的回答不仅在设计方面具有教育意义,而且充满了个人化与直率的色彩,内容值得反复阅读和回味,对Web设计及其历史发展轨迹富有真挚情怀的设计师们不可错过. Q:您是什么时

《响应式Web设计全流程解析》一导读

译者序 响应式Web设计全流程解析关于什么是正确的Web设计流程,这个问题没有统一的答案,探其原因,是因为Web设计是一门非常年轻的行业. 十几年前,Web设计是由传统的平面设计师兼职的,在之后十几年变化中,这一职位渐渐分裂为Web设计相关的各个职位,包括用户研究.交互设计.视觉设计.前端开发.这些职位的分割带来了设计流程上的隔阂,每个人成为流水线上的一环,专注于输出自己的"交付物".交互设计师输出线框图.流程图以及可交互的原型.视觉设计师参考交互设计师的交付物,输出精美的视觉设计稿,

微博UED:WEB设计中的排版

首先谈一下"Metro"--由微软公司开发内部名称为" typography-based design language"(基于排版的设计语言). Metro是基于瑞士平面设计的设计原则(清晰,真实,美观),来源于交通指示牌.生活中人们行色匆匆,更需要提供快速,简洁,直接,明确的设计.现在的互联网又何尝不是如此,快捷获取信息的同时,信息泛滥.庞杂无序,简洁之风深入人心--减少元素,以显现本质.良好的排版有助于Web设计更加简洁有效. 概念: 排版就是将有限的视觉元素

WEB设计中的排版 如何便于用户高效、准确获取相关信息

首先谈一下"Metro"--由微软公司开发内部名称为" typography-based design language"(基于排版的设计语言). Metro是基于瑞士平面设计的设计原则(清晰,真实,美观),来源于交通指示牌.生活中人们行色匆匆,更需要提供快速,简洁,直接,明确的设计.现在的互联网又何尝不是如此,快捷获取信息的同时,信息泛滥.庞杂无序,简洁之风深入人心--减少元素,以显现本质.良好的排版有助于Web设计更加简洁有效. 概念: 排版就是将有限的视觉元素

6个优秀Web设计细节

优秀设计和卓越设计之间的区别是比较小的.一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品.通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别.前不久,我写过一篇4个优秀的网站http://www.aliyun.com/zixun/aggregation/8912.html">设计原则.现在这篇文章有点像是上一篇文章的延续.在上一篇文章里面我们重点讨论了对比.重复.对齐.分割在网页中的应用.以下内容我以几个优秀的网页作品作为实例,来说明卓越设计一

Web设计核心问题3:为用户设计(3)

web|设计|问题  3.3 用户的共同特征 不存在共性的人,但是人们一般有相似的物理特征.大多数人看到相同的东西,能够记忆,对刺激作出相同的反应.但是记住,人是各不相同的.有些人可能有很好的视力,而有些人则很差.有些人能够记住几百条链接并且能够快速地过滤它们,而有些人在面临多于两个选项时就无法处理.有些人的反应速度很快,而有些人则很慢.但是,就像Web设计的其他方面一样,应该首先着眼于共同点,并确信也考虑了差异.我们首先考虑用户的共同特征如视力.记忆力和对刺激的反应. 视力 首先考虑用户如何从

国外设计参考:以web设计为主的国外设计博客

以web设计为主,兼之前端技术.平面.矢量.摄影以及素材.来源都是国外的blog.虽然都是英文的,但基本图像就可以说明一切,所以英语不好的同学也不用有负担. -----------------------------– Interview With Digital Artist Ferdi Rizkiyanto aka Pepey Pepey.是来自印尼著名平面设计师,他关于温室效应的招贴设计全球闻名(有沙漏的那幅).他的作品中既有激动人心的创造力,又具备无与伦比的细节.在一些广告设计中使用的三

【译】Web 设计准则

本文讲的是[译]Web 设计准则, 原文地址:Do's and Don'ts of Web Design 原文作者:Nick Babich 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:吃土小2叉 校对者:michaelia.Hyde Song Web 设计准则 作者: Nick Babich Web 设计是一个棘手的主题.在创建一个网站的过程中需要考虑许多事项.为了简化这个任务,我准备了一份每个设计师都需要考虑的 Web 设计准则清单.好消息是这些

Web设计应该注意什么

你在看机器,机器也在看你.最近眼球跟踪技术诞生了不少的应用案例.比方说,Intel研发3D笔记本摄像头,可以追踪眼球读懂情绪:上海琢视的纯软件眼球追踪可支持用眼睛玩打飞机游戏等.现在EyeQuant则利用先进的神经技术研究用户眼球看网页时的运动,从而生成设计元素和网页区域的热点图(即用户的注意力集中的区域),再研究如何改进网页设计.以下就是他们的发现. Web设计应该注意什么 眼球跟踪技术的第一个发现是,Web的F和E形模式布局设计(利用用户大都最喜欢观看左侧屏幕的特点进行布局)未必就是对的.只