阅读更多

10顶
0踩

互联网

转载新闻 Web 设计中的排版

2013-01-16 16:51 by 副主编 WnouM 评论(5) 有7187人浏览


首先谈一下“Metro”——由微软公司开发内部名称为“ typography-based design language”(基于排版的设计语言)。



Metro是基于瑞士平面设计的设计原则(清晰,真实,美观),来源于交通指示牌。生活中人们行色匆匆,更需要提供快速,简洁,直接,明确的设计。现在的互联网又何尝不是如此,快捷获取信息的同时,信息泛滥、庞杂无序,简洁之风深入人心——减少元素,以显现本质。良好的排版有助于Web设计更加简洁有效。

概念:

排版就是将有限的视觉元素进行有机的排列组合,让逻辑清晰、阅读顺畅、交互便捷,产生良好的体验。



Rams的10条关于优秀设计的原则(创新、实用、美感、简单易懂、谦虚、诚实、时间考验、细节、重视环境、简洁)

排版早已广泛应用于平面媒体中的报纸、书刊杂志,同样也适用于Web设计,但Web的特性使之又有所不同:


  • 交互性(可操作、即时响应、状态变化,要求不但美观更要易用)
  • 呈现媒介(PC、手机、平板、电视、投影等,需要考虑呈现尺寸及色彩)
  • 技术性(HTML和CSS的不断升级,对Web排版的支持更加优秀和高效)
  • 多媒体(文字、图片、视频)
致使Web设计中的排版更复杂,更困难,更有挑战性;



原则:

万变不离其宗,排版依然要遵循平面构成的基本原则——重复与交错、节奏与韵律、对称与均衡、对比与调和、比例与适度、变异与秩序、虚实与留白、变化与统一

同时还要强调:

  • 功能与形式(深入理解功能和内容,使之形式更好的体现主题思想)
  • 兼容与响应(跨平台,不同的分辨率、不同的设备环境下的呈现效果)


类型:

1. 文字

通过对字号、字体、字色、粗细、间距、行距等属性来体现出内容的层次结构。





2. 颜色

运用颜色的形体、位置、面积,及色相、明度、纯度等属性并结合内容与环境来组织色彩。



3. 图片

Pinterest引领瀑布流排版的流行风潮



4. 表单

精心的表单排版,能让用户感到心情舒畅,愉快地注册、付款和进行内容创建和管理。



5. 界面

和平面排版最大的区别在于,Web界面可操作的功能性,需要强调设计的可用性,排版上也要兼顾用户的浏览、操作习惯。





6. 导航/图表

通过对信息数据的归纳整理,有效分类、排布,将复杂信息高效、清晰地传递给用户——清晰、直观。





总结:

Web设计中排版很重要。好的排版设计,不但要美观,更多的是要将信息内容有效的组织、排布,使其规范有序、清晰明确,便于用户高效、准确获取相关信息,让Web设计更友好、易用、真实可信。

这需要设计师深入理解所设计的信息内容,提高信息内容的组织、加工能力,将内容本身作为设计元素,依照设计原理有效排布。良好的排版有助于Web设计更加简洁有效。
  • 大小: 17 KB
  • 大小: 43.3 KB
  • 大小: 117.5 KB
  • 大小: 142 KB
  • 大小: 83.7 KB
  • 大小: 132.6 KB
  • 大小: 211.6 KB
  • 大小: 150 KB
  • 大小: 196.2 KB
  • 大小: 266.8 KB
  • 大小: 149 KB
  • 大小: 199.6 KB
  • 大小: 184 KB
  • 大小: 94.4 KB
  • 大小: 57.9 KB
来自: 微博UDC
10
0
评论 共 5 条 请登录后发表评论
5 楼 xisuchi 2013-01-22 16:57
不错 喜欢简约的风格
4 楼 yydriver 2013-01-18 15:09
1楼的观点不敢苟同,程序员同样可以设计出很好的网页。
程序员写的程序难道不是一种艺术家在创作么?
不是有那么句话:熟读唐诗三百首。。。。。。
如果一个程序员能够深入分析300个优秀的网站,一样可以设计出漂亮的网页。
不过,前提是有兴趣去做此方面的研究。
3 楼 wcnjeusr 2013-01-17 11:40
mark,,
2 楼 dsjt 2013-01-17 11:08
虽然看不懂,
但是觉得很厉害!
1 楼 freezingsky 2013-01-16 20:35
页面的设计,在我看来,更像是艺术家的创作。对于程序员来说,压力太大。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • php参数反射,php-通过反射传递参数

    /*** Call protected/private method of a class.** @param object &$object Instantiated object that we will run method on.* @param string $methodName Method name to call* @param array $parameters...

  • getMethod方法getMethod(String name, Class<?>... parameterTypes)传入可变参数类型

    反射的getMethod方法getMethod(String name, Class<?>… parameterTypes) Class<?>… parameterTypes 表示需要执行的方法Method的参数类型,及invoke里面传入的实例参数是那些,多个参数的话就传多个...

  • 在C#中使用反射方式实现传参,参数为object,要转换参数时需要使用IEnumerable

    ,在C#中使用反射方式实现传参,参数为object,要转换参数时需要使用IEnumerable,不然取不到想要的值。 参数委托端: //获取方法信息 执行反命令 MethodInfo methodInfo =info.Target.GetType().GetMethod(x....

  • 反射全解

    反射的概念 反射的引入: Object obj = new Student(); 若程序运行时接收到外部传入的一个对象,该对象的编译类型是Object,但程序又需要调用该对象运行类型的方法: 1.若编译和运行类型都知道,使用 instanceof...

  • java 传递类参数吗_如何在Java中将类作为参数传递?

    public void foo(Class c){try {Object ob = c.newInstance();} catch (InstantiationException ex) {Logger.getLogger(App.class.getName()).log(Level.SEVERE, null, ex);} catch (IllegalAccessException ex) {Lo...

  • 使用注解、切面、反射,对前端传递的参数,做统一的空格(trim)处理

    使用注解、切面、反射,对前端传递的参数,做统一的空格(trim)处理 业务场景:由于目前的前后端分离,在某些情况下,前端可能没有对传入后端的字符串做出来,导致传递到后端的数据可能有偏差,两端出现空格的情况...

  • java不带参数方法_Java反射:如何获取不带参数的方法

    我们假设该类有一个没有任何参数的构造函数 . 然后,程序打印出创建的对象的公共变量的名称和值,以及未指定参数的公共方法的列表 . 程序应该让用户选择一个方法并在创建的对象上执行该方法 . 之后,程序应该再次...

  • C#通过反射调用其他类的方法 传递参数 获得返回值

    //通过这个例子了解通过反射调用方法 public class SaveControler : MonoBehaviour { public bool LoadTheData(string username) { Debug.Log("通过反射调用成功"); return true; } } public void LoginTheG...

  • java 方法当参数_如何在Java中将函数作为参数传递?

    如何在Java中将函数作为参数传递?这个问题在这里已有答案:Java Pass方法作为参数 14个答案是否可以将方法作为参数传递给Java方法? 如果是这样,有人可以指导我吗? 这似乎并不重要Jason asked 2019-01-26T17:30:...

  • 什么是反射?如何使用反射

    1.什么是反射 Java反射机制是在运行状态中,对于任意一个...在每一个阶段都能以不同的方式使用反射 获取Class对象的方式: Class.forName(“全类名”):将字节码文件加载进内存,返回Class对象 多用于配置文件

  • 面试官:什么是Java反射?它的应用场景有哪些?

    反射就是指程序在运行的时候可以知道一个类的自身信息。对于任何一个类:可以知道这个类的属性和方法。对于任何一个对象:可以调用这个对象的任何一个方法和属性。反射就是把java类中的各种成分映射成一个个的Java...

  • get传参list_java反射传入参数是list<string>,具体该怎么写?

    传List.class即可,泛型参数在编译后会被擦除掉,无论List里面是String还是什么别的东西都不会影响获取到那个method,在invoke的时候传的参数对不上的话才会产生异常//Test.javaimport java.lang.reflect.Invocation...

  • Java 反射调用类的函数,并传递参数

    文章目录Java 反射调用类的函数,并传递参数示例 Java 反射调用类的函数,并传递参数 通过类的包路径和函数名称以及已知参数类型,进行传参函数调用 示例 被调用函数 public class Test { public void testInvoke...

  • java反射传递参数_Java反射 调用传参

    //测试方法@Testpublic void test01() {Class p = null;Person01 person01 = new Person01();try {p = Class.forName...// 第一个参数是类的方法名 第二个是需要传的参数Method method = p.getMethod("returnName",...

  • 用java的反射机制执行某个方法并传递复杂参数

    下面这个例子演示了如何用反射

  • java 反射获取方法 参数是array_详解java中反射机制(含数组参数)

    详解java中反射机制(含数组参数)java的反射是我一直非常喜欢的地方,因为有了这个,可以让程序的灵活性大大的增加,同时通用性也提高了很多。反射原理什么的,我就不想做过大介绍了,网上一搜,就一大把。(下面我是...

  • unity通过反射调用方法

    using System.Reflection; using System; 通用 // 1.Load(命名空间名称),GetType(命名空间....Type type = ClassName.GetType();...MethodInfo method = type.GetMethod(“MethodFunc” }); // 3.调用的实例化方法...

  • 【Java代码】反射机制处理传递给mapper文件的非Map类型参数对象(指定属性为空则设置默认值)

    why 为什么要拦截传递给 ...既然是核心方法,无关的@Override方法不再贴出, 参数对象是map类型的不是重点,这里主要看一下封装对象借助反射机制通过 getter 和 setter 方法获取和设置指定属性值的操作。 public clas

  • 怎样通过反射机制调用java对象的方法?

    补充: getMethod(方法名,Object... args) invoke(Object obj,Object... args) 可变长参数 Object... args这就是可变长参数 语法是:类型...(注意:一定是3个点) 1.可变长参数要求的参数个数是:0~N个 2.可变...

  • C#反射

    C#反射一、反射基础理论1.什么是程序集2.元数据3.反射的概念4.反射的作用二、相关APIType获取类的程序集信息测试代码获取类中的公共成员获取所有的公共的构造函数并调用获取类中的公共成员变量获取类的公共方法其它...

Global site tag (gtag.js) - Google Analytics