专业网站设计精髓:Microsoft网站特色剖析

 更新时间:2016年9月20日 19:05  点击:1510

  和IBM.com一样,Microsoft.com这个以蓝色为主色调而驰名的IT技术类网站,一直创造着“经典”一词。几年来它的每次改版所形成的简洁大方的界面设计,清爽整洁的色彩设计,亲和力强的引导设计,功能性强的信息格局,阅读舒适的文字设计等,都是企业网站和设计者创作时的参考和借鉴的典范。

  Microsoft网站特色指数如下

  视觉美观度:★★★☆
  文化与情感表达度:★★★☆
  功能使用便捷度:★★★★☆

  为什么要强调“专业化”一词呢?肯定不少读者会提出疑问,如何从网页视觉设计上表现专业化?为了解答这一问题,我们先细致研究一下Microsoft.com的页面设计吧,从中一定可以得到很多启发。

  采用直线划分页面

  信息尽量填满,并且做到井然有序。要知道,直线可以给人一种严谨、精专的感受;相反,曲线给人的是一种飘扬、自由的感觉(图1)。所以在女性用品类的网站、饮品类网站、海产品类网站、为小孩子设计的网站以及为了表现柔软感觉的纺织品类网站……多采用曲线划分页面的曲线格局。而如同Microsoft.com这样采用直线、直角来划分的框架结构,就表现出了经过缜密思考的感觉、规划过的感觉、专业化的感觉。不可否认,直线框架非常适合IT类网站、电子产品类网站、法律以及政府类网站、男性用品类网站等。

  用色单一

  在Microsoft.com页面中,我们只能感受到一种色相——蓝色。为了给单色相增加变化,设计师运用了两到三种不同的渐变手法,一是铺垫到信息格局的背景里,二是在页面顶部增加层次感。

  如果用多种色相调配着一起使用,这种方法多半出现在娱乐为主的网站上,有蓝的、绿的或黄的等等。对于那些健康类、儿童类、游戏类等网站也适合多色相的组合配色方式,可表现出嘈杂的多种情感的综合特征。但对于Microsoft.com这样的想要表达出“一种声音”的网站来说,单一色相可以给人一种清晰悦目的感觉,整洁、统一反而会加深印象,给人留下深刻的感受。即便在Microsoft.com的不同栏目中,还选择了一些淡淡的红、绿、紫色作为空白背景的背景色,但蓝色为主色调的观感并不能动摇,这些颜色和渐变效果一样,增加了画面的精致度,并为页面带来了起伏感和修饰感。

  如果想要表现整洁与高效性,不妨学习一下Microsoft.com的用色方式,你一定会受益匪浅。

  清新悦目的标语设计

  文字不能直接堆砌在页面上,一些重点内容必须要用广告条才能吸引浏览者的注意力。那么对于一个信息资源丰富的企业网站来说,引导式的标语非常重要。

  国内不少网站是把文字完全叠加在图片上,文字看不清楚,图片选择不恰当,广告面积太大,这些都将影响整个页面的视觉效果和妨碍有效传递信息(图2)。

  让文字看得清楚是关键。即便文字不叠加在图片上,而图片占用了主要空间,文字仅在缝隙里得到了一点空间,这样对信息的传播会造成障碍。做标语广告时,多一分注意力放在文字设计上,让图片为文字开道,这是很核心的创作思路。虽然最有效的方式是去掉图片,只用文字设计广告,可这种情况又不美观。此时可以学学Microsoft.com,在广告条上增加背景图案,在增加变化的同时,却不会削弱文字的有效作用(图3)。

<

  引:对下一代互联网的看法,还会有很多的讨论。有一点可以肯定,WEB2.0是以人为核心线索的网。但什么是WEB2.0? 呵,要理解WEB2.0,先得看WEB的历史。

  什么是WEB2.0?

  要理解WEB2.0,先得看WEB的历史。 World Wide Web,简称WWW,是英国人TimBerners-Lee 1989年在欧洲共同体的一个大型科研机构任职时发明的。通过WEB,互联网上的资源,可以在一个网页里比较直观的表示出来;而且资源之间,在网页上可以链来链去。在WEB1.0上做出巨大贡献的公司有Netscape,Yahoo和Google。 Netscape研发出第一个大规模商用的浏览器,Yahoo的杨致远提出了互联网黄页, 而Google后来居上,推出了大受欢迎的搜索服务。

  搜索最大的贡献是,把互联网上海量的信息,用机器初步分了个线索。但是,光知道网页里有哪些关键字,只解决了人浏览网页的需求。所以,Tim-Berners-Lee在提出WWW不久,即开始推崇语义网(Semantic Web)的概念。为什么呢?因为互联网上的内容,机器不能理解。他的理想是,网页制作时和架构数据库时,大家都用一种语义的方式,将网页里的内容表述成机器可以理解的格式。这样,整个互联网就成了一个结构严谨的知识库。从理想的角度,这是很诱人的,因为科学家和机器都喜欢有次序的东西。Berners-Lee关心的是,互联网上数据,及能否被其它的互联网应用所重复引用。举一个例子说明标准数据库的魅力。有个产品叫LiberyLink。装了它后,到Amazon上去浏览时,会自动告诉你某一本书在用户当地的图书馆能否找到,书号是多少等。因为一本书有统一的书号和书名,两个不同的互联网服务(Amazon 和当地图书馆数据库检索)可以公享数据,给用户提供全新服务。

  但是,语义网提出之后,曲高和寡,响应的人不多。为什么?因为指望要网页的制作者提供这么多额外的信息去让机器理解一个网页,太难;简直就是人给机器打工。这违反了人们能偷懒就偷懒的本性。看看Google的成功就知道。 Google有个Page Rank技术,将网页之间互相链接的关系,用来做结果排序的一个依据,变相利用了网页制作人的判断力。想一想网页的制作者们,从数量来说,比纯浏览者的数量小得多。但Google就这一个革新,用上了网页的制作者的一部份力量,已将其推上了互联网的顶峰。

   所以互联网下一步,是要让所有的人都忙起来,全民织网,然后用软件,机器的力量使这些信息更容易被需要的人找到和浏览。如果说WEB1.0是以数据为核心的网,那我觉得WEB2.0是以人为出发点的互联网。 我们看一看最近的一些WEB2.0产品,就可以理解以上观点。

  Blog: 用户织网,发表新知识,和其他用户内容链接,进而非常自然的组织这些内容。

  RSS: 用户产生内容自动分发,定阅

  Podcasting: 个人视频/声频的发布/定阅

  SNS: blog+人和人之间的链接

  WIKI: 用户共同建设一个大百科全书

  从知识生产的角度看,WEB1.0的任务,是将以前没有放在网上的人类知识,通过商业的力量,放到网上去。WEB2.0的任务是,将这些知识,通过每个用户的浏览求知的力量,协作工作,把知识有机的组织起来,在这个过程中继续将知识深化,并产生新的思想火花;

  从内容产生者角度看,WEB1.0是商业公司为主体把内容往网上搬,而WEB2.0则是以用户为主,以简便随意方式,通过blog/podcasting 方式把新内容往网上搬;

  从交互性看,WEB1.0是网站对用户为主;WEB2.0是以P2P为主。

  从技术上看,WEB客户端化,工作效率越来越高。比如像Ajax技术, GoogleMAP/Gmail里面用得出神入化。

  我们看到,用户在互联网上的作用越来越大;他们贡献内容,传播内容,而且提供了这些内容之间的链接关系和浏览路径。在SNS里面,内容是以用户为核心来组织的。WEB2.0是以用户为核心的互联网。

  那么,这种意义上的WEB2.0,和Tim Berners-Lee的语义网,有什么不同呢?语义网的出发点是数据的规整及可重复被机器调用,提出使用语义化的内容发布工具, 试图从规则和技术标准上使互联网更加有序。 Google等搜索引擎,在没有语义网的情况下,尽可能的给互联网提供了线索。 WEB2.0则是鼓励用户用最方便的办法发布内容(blog/podcasting),但是通过用户自发的(blog)或者系统自动以人为核心(SNS)的互相链接给这些看似凌乱的内容提供索引。 因为这些线索是用户自己提供,更加符合用户使用感受。互联网逐渐从以关键字为核心的组织方式和阅读方式,到以互联网用户的个人portal(SNS)为线索,或者以个人的思想脉络(blog/rss)为线索的阅读方式。WEB2.0强调用户之间的协作。WIKI是个典型例子。从这个角度看,互联网是在变得更有序,每个用户都在贡献:要么贡献内容,要么贡献内容的次序.

  对下一代互联网的看法,还会有很多的讨论。有一点可以肯定,WEB2.0是以人为核心线索的网。提供更方便用户织网的工具,鼓励提供内容

  web2.0

  博客的出现之所以被称为网络世界的革命,是因为其极大的降低了建站的技术门槛和资金门槛,而使每一个互联网用户都能方便快速的建立属于自己的网上空间。随着配套应用的快速发展,个人博客将在很短的时间内加速成长为类门户型的微型个人网站。博客走进千家万户和各行各业,从而将形成基于个人或小团体的以内容为导向的群体,而其中一定会出现的佼佼者将在很大程度上从门户频道乃至专业网站手里夺走部分甚至大部分读者。这在IT业界和互联网行业正在得到验证。

  Web2.0的定义,我认为是在web1.0的服务基础上,是互联网络用户从信息接受者转变成为信息制造者和传播者,从受众转向主体,从单个个体转向社团的新型互联网服务模式。在这种情况下,为用户提供优秀的发布平台、便捷的沟通和展示平台、顺畅的进入和退出机制、高效的信息整合机制变的与提供高质量信息一样重要,甚至更加重要。Web2.0时代的竞争,将不仅仅是内容的竞争,而是综合服务的竞争,其中的关键点包括以上的数个方面。博客是web2.0的最主要的代表。

  [文摘]web2.0是一个读写的互联网、一个依靠链接组织起来的互联网。

  一边是写,写的人活跃在各种各样的“节点”上,使用各种工具向互联网上传递着数字化的内容,这些内容被保存在数据库、文件系统,甚至是行动中的手机、PDA;一边是读,读的人活跃在各种各样的“主页”上,这里的“主页”已经不能简单的称呼为某个网站的主页,而是互联网上N个活动的节点的主页,一个“主页”上的内容,可能来自几十个节点,“主页”的编写者同节点的所有者一样,也在使用各种各样的工具,从节点读取内容,“主页”的编写者的主要工作已经从创造内容变成了收集和整理内容。

  博客

  博客的出现,在很大程度上满足了用户由单纯的信息接受者向信息提供者转变的需要,从而得到快速的发展。博客通过RSS、博采、Trackback、TAG等技术,在个体之间已初步形成了社团氛围和初步的社团机制。可以预见,博客服务提供商们将能提供更多的技术手段来加强这种社团性联系,如SNS等。博客圈子的形成,将在另一层意义上大规模提高其内容产生质量和数量。

  互动

  博客与互联网络的互动、博客之间的互动客观上要求BSP提供商适时提供博客与博客网站之间的互动,需要博客网站为博客提供展示自己的舞台。只有这种互动,才能将博客内容提供质量提高,而进一步深化博客信息质量。从某种程度上说,博客网站的门户效应将极大影响某类博客的发展态势和发展程度,而博客门户也会因为博客发展程度的原因而停滞或加速发展。两者相辅相成。

  在国内现有BSP竞争格局下,单纯的BSP服务和单纯的门户内容提供模式都是缺乏竞争力的。必须把两者结合起来,这就需要从博客网站和频道定位开始,逐步强化互动意识,探索互动的方法和技术。Web2.0时代的门户频道建设虽应从传统门户借鉴成功的经验和做法,更重要的是要探索出一条新路,挖掘自身网站博客的优秀内容。才能使2.0门户拥有大大超越1.0时代门户的资讯生产能力和整合、吸纳传统门户优秀内容的能力。极端的说,即便有更好的产品来取代博客,探索门户同博客的深度互动平台也必不可少。

  [文摘]

  随着支持RSS和XML-RPC的BLOG站点的兴起,WEB2.0的概念也跟着兴旺发达广为传播,就可以理解了。BLOG作为能够体现web2.0中“节点”概念几乎全部要素的一种形式,是存储和输出数字化内容的最佳载体。但是,纵观国内BLOG站点,多数都是提供了输入数据的界面,却没有能有效的让自己再次成为“节点”,实在是有些可惜。

  博客相关技术

  伴随博客出现而围绕博客服务的技术主要有:博采技术、内容聚合技术、同步技术、SNS技术和tag。博采技术为用户组织了随时摘取有用内容的有效工具,其前提是用户认知到这个信息;RSS技术则将有用的信息源聚合起来,随时将信息源提供的信息发送到用户平台,Trackback技术则将博客团体内其他成员的动向信息传递给用户,保持成员间的有效沟通;SNS技术用于凝聚社团的整体意识,tag是网民自主分类工具。可以说,基于博客单体的技术开发已形成体系并走向深化。与此对应的是,博客网站门户和频道的技术实现还停留在零的状态,甚至连第一代门户的技术都不如。

  [文摘]如果把wikipedia中的web 2.0的描述当成“定义”或者“经典”是非常片面的。 其实wekipedia并没有能下出一个定义,只是说明了哪些东西属于目前所说的web 2.0的技术:
 
  CSS + XHTML

  AJAX (最近很红火的新概念老技术,我自己的理解和定义是:通过网页内的javascipt调用来减少web页面刷新的必要性来提高web可用性的一种古老技术)

  通过RSS/ATOM同步数据

  通过RSS/ATOM聚合数据

动作是NoahWeb中极为重要的一个概念,浏览器与服务器一个完整的上下交互行程都可以理解成一个动作。

动作编程与以往的过程编程和对象编程是截然不同的一种编程思路。过程编程已经被某种意义上被淘汰在此就不做讨论,而动作编程与对象编程相比较,他们之间最大的区别在于“高度”的不同。

类、对象带给我们的面向对象编程可以让我们方便的在众多领域中进行复杂、高效的编程实现应用。每个有过对象编程学习经历的人在最初学习时也许都被问过“这个世界是由什么组成的?”通过这个方法以便让大家能直观的了解对象和类,而对象和类更可以让我们用最初认知的世界方式来理解和描述计算机中的各种功能和值。可是,对于网站、MIS或业务系统这些轻量级B/S架构的应用,对象编程也许并不是一种最好选择。

对于客户——程序结构设计重要还是流程设计重要?

类、对象提供了我们一种去描述计算机程序内各种能力和值的方式,可类、对象也是一种很“低级”的描述方式。

我们可以通过类和对象的方式来假设设计一个批发商买卖矿泉水的程序:

首先,您需要使用对象的方式描述水的各种属性和它具有的能力,而水是被装在瓶子里,所以对于装水的瓶子您也需要用类或对象的方式去描述一下瓶子的属性和能力,瓶子需要被装在箱子里,所以您也需要去用类或对象的方式去描述一下箱子……到此暂停!

回头看一下使用类和对象的时候我们在做什么?我们在进行对象之间的关系设计。而我们最初目的是什么?是设计一个批发商买卖矿泉水的流程。

看一下使用动作编程是怎么设计整个流程的:

订单确认—>出库—>装货—>送货—>收款

订单确认、出库、装货、送货、收款每个都是一个动作,而这些动作组合在一起构成了一个买卖矿泉水的动作流程。或许您还认为上述整个买卖矿泉水流程不合理应该是另一个更合理的流程。这样考虑就对了,因为您现在更多的时间已经花在为您的用户设计流程,而不是考虑设计整个类和对象之间的关系。

对于系统的用户我们为他考虑的不应该是程序结构方面的设计,而应该更多的是流程方面的设计。在使用动作方式后,您关注的不再是类和对象之间的关系,而是整个流程的设计。

一级还是多级?

我们还是继续来看批发商买卖矿泉水的流程设计,对象编程时,水和瓶子之间是存在关系,瓶子和箱子之又存在关系,再往上设计,或许还有批发商对象,买卖矿泉水的这个行为是由箱子这个对象来具备的,如下图所示:

<

NoahWeb™引擎为计算机编程专用语言解析引擎,属于新一代解析型编程语言执行引擎,用于快速开发B/S结构下的应用或网站。同NoahWeb™紧密相关的有NoahWeb Engine、NoahWeb Designer以及其他设计器辅助工具。

NoahWeb™使用有别于传统编程语言的编程结构和语法,语法分逻辑层和表现层两类。使用NoahWeb™对B/S的项目进行开发,逻辑层和表现层已经被NoahWeb™全新的编程结构分离。表现层(前端)使用HTML或是说XML内的注释标签方式描述基本的控制指令,逻辑层使用XML格式NoahWeb™语法进行逻辑开发,从而大大加快了开发速度。

NoahWeb™内包含对各种常见数据库的支持。NoahWeb™使用内部的数据库无差异支持引擎来对数据库进行方便快捷的访问,从而让使用NoahWeb™开发的项目能够轻松的移植到不同数据库运行。

NoahWeb™提供了功能强大的Form表单的管理和设计支持。

NoahWeb™集成了国内各种常见协议的支持。

NoahWeb™对表现层代码、字符资源、数据库查询、页面表单、变量、动作、函数等资源提供统一管理,各种资源具有极高的可重用性。

NoahWeb Designer用来协助开发人员使用NoahWeb™对项目进行快速开发。在NoahWeb Designer中可管理使用NoahWeb™开发的动作(Action)、名称空间(NameSpace)、模组(Moudle)、表单(Form)、字符资源(String)、数据库操作(SQL)等资源。

NoahWeb Designer可根据项目的配置信息管理数据库连接,提供针对已连接数据库表结构的数据库操作的快速生成和编辑,还可进行对字符资源的编写和提供在其他编写工具中编写NoahWeb™的各类编写支持,最后NoahWeb Designer会将所有生成内容使用NoahWeb™语言和语法进行保存以保证NoahWeb Engine的正常解析和执行。




[!--infotagslink--]

相关文章

  • Cloudflare国内自选IP节点整理收录

    一般来说为了达到隐藏自身 IP,我们都会选择一些 CDN 服务,目前用的最多的免费 CDN 是 Cloudflare。但是正常情况下 Cloudflare 是不能自己选择IP,有时候分配给我们的 IP 可能表现不佳,也只能将就着用。但是我们都希望可以用上 CF 比较快的 IP。那么自选IP,就显得很必要了。...2022-09-23
  • photoshop设计一幅大鱼海棠动画片海报制作实例教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程,各位想知道具体制作步骤的使用者们,那么各位就快来看看...2016-09-14
  • MySQL性能监控软件Nagios的安装及配置教程

    这篇文章主要介绍了MySQL性能监控软件Nagios的安装及配置教程,这里以CentOS操作系统为环境进行演示,需要的朋友可以参考下...2015-12-14
  • iOS APP h5快捷程序 .mobileconfig的生成

    1.从APP Store 下载Apple Configurator 2从一个管理点管理所有iOS设备应用程序,文档和配置文件。想要确保您的所有家庭成员在其每台iOS设备上都有类似的应用和文档,管理日益增...2021-12-23
  • 如何获取网站icon有哪些可行的方法

    获取网站icon,常用最简单的方法就是通过website/favicon.ico来获取,不过由于很多网站都是在页面里面设置favicon,所以此方法很多情况都不可用。 更好的办法是通过google提供的服务来实现:http://www.google.com/s2/favi...2014-06-07
  • iOS设置UIButton文字显示位置和字体大小、颜色的方法

    这篇文章给大家分享了iOS如何设置UIButton的文字显示位置和字体的大小、颜色,文中给出了示例代码,相信对大家的学习和理解很有帮助,有需要的朋友们下面来一起看看吧。...2020-06-30
  • iOS如何将图片裁剪成圆形

    这篇文章主要为大家详细介绍了iOS如何将图片裁剪成圆形,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-30
  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件,有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影,一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06
  • iOS给border设置渐变色的方法实例

    这篇文章主要给大家介绍了关于iOS给border设置渐变色的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-09
  • C语言程序设计第五版谭浩强课后答案(第二章答案)

    这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
  • iOS新版微信底部返回横条问题的解决

    这篇文章主要介绍了iOS新版微信底部返回横条问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
  • Photoshop设计商务名片的5种常见思路分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路,各位想知道的使用者,那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
  • mac下Apache + MySql + PHP搭建网站开发环境

    首先为什不自己分别搭建Apache,PHP和MySql的环境呢?这样自己可以了解更多知识,说起来也更酷。可也许因为我懒吧,我是那种“既然有现成的,用就是了”的人。君子生非异也,善假于物也。两千年前的荀子就教导我们,要善于利用工具...2014-06-07
  • WPF实现类似360安全卫士界面的程序源码分享

    最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
  • 2022年最新Cloudflare免费自选IP教程(非Partner)

    写在开头众所周知,CF在去年底大规模禁用Host API key,使得Partner自选法失效.但最近,Cloudflare为所有计划添加了100个SaaS域免费额度(以前$2一个).经过一番摸索,这个船新的...2022-09-23
  • php实现网站留言板功能

    我要实现的就是下图的这种样式,可参考下面这两个网站的留言板,他们的实现原理都是一样的畅言留言板样式:网易跟帖样式:原理 需要在评论表添加两个主要字段 id 和 pid ,其他字段随意添加,比如文章id、回复时间、回复内容、...2015-11-08
  • vue+axios全局添加请求头和参数操作

    这篇文章主要介绍了vue+axios全局添加请求头和参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-24
  • php strrpos()与strripos()函数

    strripos() 和 strripos() 的区别就是是不是对大小写敏感...2013-09-28
  • iOS蓝牙设备名称缓存问题的解决方法

    这篇文章主要给大家介绍了关于iOS蓝牙设备名称缓存问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
  • 游戏开发中如何使用CocosCreator进行音效处理

    这篇文章主要介绍了游戏开发中如何使用CocosCreator进行音效处理,并对音效组件进行封装,方便以后使用,同学们看完之后,一定要亲手实验一下...2021-04-15