网页设计和用户界面设计
这是两个现在网页设计领域使用频率非常高的词。在大多数情况下,它们被相互替代。这个领域内外的很多人都认为这是两个意义基本一样的词。但是它们真的可以互相混淆么?我并没有为一些名词而去纠结的习惯,比方说我不会在美工和设计师之间与别人争论。但是我想网页设计和用户界面设计这两个词包含了很多东西,这两个词的对比可以引申出一些设计领域的发展过程和思考。
注:这篇网志所指的用户界面设计在无特殊说明下特指网页中的用户界面设计。
回到用户界面设计的原点
这里不做考古,只是回想一下最初在互联网领域提到用户界面这个词的时候,是由工业设计领域的人机交互界面中引申过来的。因而谈到界面,则必然会有交互这个概念的存在。从人机界面本身的理解上来看,它是人和机器(本文特指电脑)交互的媒介。
如果把机器看作是CPU、硬盘等硬件的话,那么界面就是各种各样的软件(包括操作系统);如果人交互的对象是软件里的一些对象(有可能是数据啊媒体文件啊等等),那么界面(图形界面)就是我们很熟悉的软件界面了。在软件领域,界面设计的发展已经非常成熟了,在各种环境、各种系统下都有不同的GUI Builder,而之所以称其为界面,则必须是人会通过界面这个媒介来操作数据。这和网页设计是不一样的。
从用户的需求出发来看网页设计
用户浏览网页的需求是什么?抽象出来可以归纳为 1:浏览信息;2:操作数据。这里的数据是指在数据库中躺着的数据。用户在单纯浏览信息时,不会对页面背后的数据造成任何操作,但用户可以点击链接,跳转页面。这部分就是网页设计有别于用户界面设计的一个主要地方。
前者会花相当多的精力在如何通过设计来准确地传达信息上,而后者虽然也涉及到信息的传达,但只占一小部分。这也是为什么做软件界面的设计师在做网页设计时会遇到比较大的挑战,也并不是很成功(尽管像软件一样的风格也正流行着)。
那是不是可以认为网页设计中包含一部分用户界面设计的职能,也就是操作数据的部分?事实上可以这么看,网页设计中的交互模式和用户界面设计的交互模式有很多都是想通的。但也需要注意这两者在交互模式上的差异性。目前由于网络速度、浏览器标准等原因的限制,能够完美应用到网页中的交互模式远少于用户界面设计中的交互模式,但这种差距正在逐步缩小(比如dragdrop,real time edit);而在用户界面设计中,这些交互也显得更加流畅。
网页设计受平面设计及界面设计的影响
很难说网页设计是从平面设计或者界面设计之中派生出来的。在最早的年代,网页设计应该是由浏览器开发公司来做的,也就是网景。至于现在发展成如此蓬勃的一个领域,有望超过传统的平面设计和界面设计,中间的过程中我的脑海中是一团混沌。但无疑,现代的网页设计是受了很多平面设计以及界面设计的影响。其中我认为平面设计的影响尤甚。
前面有提到用户在网页上一个重要需求是浏览信息,而网页设计的一个职能便是有效地、准确地传达信息,并且同时保证美感。而这正是平面设计的一个重要职能。举个最普遍的例子,大家通常谈到的网页设计中的排版和布局(layout),实际上正是来源于广泛应用在平面设计中的格式塔心理学理论的完形法则:
- 相近(Proximity)。 距离相近的各部分趋于组成整体。
- 相似(Similarity)。 在某一方面相似的各部分趋于组成整体。
- 封闭(Closure)。 彼此相属、构成封闭实体的各部分趋于组成整体。
- 简单(Simplicity)。 具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。
而色彩理论、构图理论等等,很多也是直接基于平面设计发展多年积累下来的经验结果的。甚至现在很多设计师直接把平面设计中独特的风格引入到网页设计里:Print Design Influence。
而网页设计和平面设计最大的不同,也就是在操作数据上。事实上,网页设计的发展也一直受软件界面设计的影响,先前已经提到网页中的交互越来越软件化。而交互的发展必然会影响到网页设计中的视觉部分。事实上这两部分谁先影响谁很难说清楚,是一个鸡生蛋,蛋生鸡的问题。另外一个网页设计有别于平面设计和用户界面设计的地方,我认为是css, html, js三者身上。
前端代码的发展对网页设计的影响非常大,甚至有段时间会主导网页设计的发展潮流,比如用jQuery轻松实现的one page style。而在平面设计领域,没有代码环节;在用户界面设计领域,GUI Builder的革新速度远远慢于前端代码。事实上,有点脱胎于平面设计和用户界面设计的网页设计,已经开始反向影响它的祖先了。
从美学上对比网页设计和用户界面设计的发展
在这个维度上来比较的话,影响网页设计的美学风格非常之多:国际主义(Swiss style),复古风格(Retro style),极简设计(Minimalist design),包豪斯主义(Bauhaus),垃圾风格(Grunge style),自然模拟风格(Organic style)等等等等。而用户界面设计的美学风格通常是在质感的摸索上,比如Windows Vista风格,苹果风格等等,比较受局限。这也是因为网页设计的美学风格通常从平面设计那派生而来(当然也有自己独特的比如Grunge style, Organic style等),而用户界面设计则很难从平面设计那里取经。
花了这么长篇幅来说自己对网页设计和用户界面设计的看法,其实更多地都是个人实践和思考的结果。在工作中这些称呼实际上无关痛痒,只是网页设计和用户界面设计这两者在本质上有着许多不同,而且在具体实践中感受也不一样。不过今后有可能这两个概念会最终变成一个,按现在的互联网发展速度,桌面软件以后会逐渐迁移到云端,到那时也许只有一个设计称谓了。
转自ChinaUI优艾网
来源:shimuuu
转载于:https://blog.51cto.com/xiaoyu/564760
相关文章:

使用VisualStudio2010连接CodePlex进行代码管理
摘要:CodePlex是微软的开源工程网站,涉及诸多微软最新技术的开源工程,同时你也可以建立并向世界展示自己的开源工程。同SourceForge、GoogleCode相比CodePlex有其自身的优势,特别是对做.Net开发的朋友来说,由于CodePle…

计算程序运行时间(time_t, clock_t)
转载自:http://blog.chinaunix.net/uid-23208702-id-75182.html 计算程序运行时间(time_t, clock_t)-whyliyi-ChinaUnix博客 我们有时需要得到程序的运行时间,但我们也要知道,根本不可能精确测量某一个程序运行的确切…
又一年5.20,用Python助力程序员脱单大攻略(视频版)
作者 | 写代码的明哥来源 | Python编程时光(ID: Cool-Python)情人节年年有,但今年的 5.20 要比以往的更有意义。2020.05.20 ,爱你爱你我爱你,如果再卡个时间(13:14),那就是 爱你爱你…

pthred()多线程计算派
实验一:计算π问题描述实验提供了两种计算方法,一种使用积分方法,另一种采用随机数方法。本报告中采用积分方法。计算公式:程序流程图:(图1)函数流程图(图2)一组实验数据,计算规模:500,000,000性…

使用最小堆优化Dijkstra算法
OJ5.2很简单,使用priority_queue实现了最小堆竟然都过了OJ……每次遇到relax的问题时都简单粗暴地重新push进一个节点…… 然而正确的实现应该是下面这样的吧,关键在于swap堆中元素时使用pos数组存储改变位置后的编号为k的节点对应在堆中的位置。下面这种…

C语言编程技巧-signal(信号机制)
http://blog.sina.com.cn/s/blog_6a1837e90100v1vc.html

第一课:网络参考模型OSI
网络参考模型OSI(一):模型提出目的:开放系统互连。使各个厂商的设备可以很好的互连、互通、互操作。(二):各层功能(1):物理层:负责链路上bit流的传输。(bit流显著的特点是,不支持格式或者结构)。…
在线直播 | 是事实还是贩卖焦虑?IT行业也偏爱“小鲜肉”
几年前曾看过这样一篇报道:Java 之父求职被嫌年纪大,硅谷公司现在喜欢“小鲜肉”,不爱“老古董”。Java之父 James Gosling 在 Facebook 上发表了他所遭遇的年龄歧视:我曾在面试的时候被 HR 告知,“通常我们不招你这种…

eclipse 代码中突然出现特殊字符
在写代码的时候,不知道点到了 eclipse 的哪个属性,代码中就出现了一些特殊字符,也不能删除。 请问,在 eclipse 中该怎么设置,才能将这些字符去掉。 如下图所示: 解决方法: 选择Window->Preferences->…

如何优化数据中心虚拟机布局
当前已经有很多组织将服务器虚拟化技术引入到生产中,这么做是有道理的,特别是在当前经济并不景气的情况下,因为服务器虚拟化技术可以在服务器硬件,机架空间,电力消耗和制冷方面为组织节省开支。 但为了实现服务器虚…

回归——同步更新github.io
回归 已经有好长时间没写博客了,可能我比较懒,不太乐于分享,我觉得这个是一个很不好的习惯。但我坚信:Sharing changes the world! 最近搭建了自己的个人独立博客,基于Github Pages的,所以打算以后同步更…
支持量子机器学习,王海峰发布最新百度飞桨全景图
出品 | AI科技大本营(ID:rgznai100)刚刚,WAVE SUMMIT 2020深度学习开发者峰会上,百度CTO王海峰开场即披露了一组飞桨数据:飞桨累计开发者数量已超过190万,服务企业数量达8.4万家,发布模型数量已…

NPOI读写Excel
1、整个Excel表格叫做工作表:WorkBook(工作薄),包含的叫页(工作表):Sheet;行:Row;单元格Cell。 2、NPOI是POI的C#版本,NPOI的行和列的index都是从…

我的vim捣鼓之路
2016-06-13 更新 绑定独立博客到域名rebootcat.com 2016-06-12 更新文中的几个链接错误,google search报错 前言 从大二的时候就开始接触Linux了,从而也接触了vi,对的,当时对这些还不太了解,不知道还有个vim,真的觉得…
代码写对了还挂了?程序媛小姐姐从 LRU Cache 带你看面试的本质
来源 | 码农田小齐责编 | Carol 前言在讲这道题之前,我想先聊聊「技术面试究竟是在考什么」这个问题。技术面试究竟在考什么在人人都知道刷题的今天,面试官也都知道大家会刷题准备面试,代码大家都会写,那面试为什么还在考这些题&…

广船国际股份有限公司OA项目
2003年的老案例: 背景 广船国际股份有限公司是由原中国船舶工业总公司属下国有企业广州造船厂在1993年改组、在上海和香港同期上市的股份有限公司,公司享有自营进出口权。 广船国际于2002年3月通过评标后选定采用iOffice.net信息管理平台作为信息化建设…

注册表----修改Win7登录界面
在进行操作前,需要准备好背景图片。对背景图片的要求有三点: (1)图片必须是JPG格式; (2)必须将图片命名为backgroundDefault; (3)图片的体积必须小于256KB。 按下【WinR】…

定义自己的rm command
rm 是一个很危险的命令,别人一直说,我并没有在意,直到有一天一个不小心,忘记当前目录的位置,手贱的使用了rm命令,结果花了半天也没有把那些重要资料给恢复过来。所以还是有必要给自己定义一个不那么危险的r…
出任 Twitter 独立董事,AI 女神李飞飞的传奇人生
作者 | 年素清责编 | 伍杏玲出品 | 程序人生(ID:coder_life) 近日,Twitter宣布任命斯坦福大学计算机科学教授、前谷歌副总裁李飞飞为董事会独立董事。李飞飞本人表示:“推特是科技连接世界的一个重要平台,…

apache ab压力测试
2019独角兽企业重金招聘Python工程师标准>>> ab的原理:ab命令会创建多个并发访问线程,模拟多个访问者同时对摸一个URL地址进行访问。它的测试目标是基于URL的,因此它既可以用来测试apache的负载压力,也可以测试nginx、…

我的个人博客搭建记录
6/13更新 绑定个人博客到域名 rebootcat.com 前言 本篇博客旨在备忘,并记录了自己折腾了3,4天后顺利搭建自己的个人博客过程中碰到的一部分问题。 搭建个人独立博客有很多种方法,我暂时采用的是基于github Pages的免费博客,博客框架采用he…

oracle中创建触发器
从csdn上面看到一个如何创建触发器的问题,感觉自己很有必要保存学习,特写下来:条件:现有A、B两张表A: 工号 姓名 密码 性别 年龄 。。。B: 工号 姓名 密码当对A表中的“密码”字段进行修改时,B表中的“密码…
量子计算与AI“双拳”出击,他们锁定38种潜在抗疫药物
作者 | Just出品 | AI科技大本营(ID:rgznai100)医药研发行业有一个“三个十”的说法,即一种药物的发现需要投入十年以上的时间,花费十多亿美元,最后获得10%的成功率。也就是说,医药研发需要花费很长时间&am…

Android官方开发文档Training系列课程中文版:OpenGL绘图之应用投影与相机视图
原文地址:http://android.xsoftlab.net/training/graphics/opengl/projection.html##transform 在OpenGL ES环境中,投影相机View可以将所绘制的图形模拟成现实中所看到的物理性状。这种物理模拟是通过改变对象的数字坐标实现的: 投影 - 这基于…
Python分析101位《创造营2020》小姐姐,谁才是你心中的颜值担当?
来源 | CDA 数据分析师责编 | Carol Show me data,用数据说话。今天我们聊一聊《创造营2020》各个小姐姐,点击下方视频,先睹为快: 最近可以追的综艺真是太多了,特别是女团选秀节目。之前我们刚聊过《青春有你2》&…

体验Remix——安卓电脑
第一次听说Android-X86 以前玩唱吧的时候接触过PC上的安卓模拟器,不过这个只是一个软件,效果毕竟不好,想要把电脑变成安卓手机,还差远了。 然后,前段时间一直纠结要不要换个手机,我现在的华为小6已经跟我…

重置 microsoft visual studio窗口
“工具”->“导入导出设置”—>“重置所有设置”,在这个向导中可以重置编译环境的!转载于:https://www.cnblogs.com/qiantuwuliang/archive/2011/05/31/2064825.html

排序算法总结之堆排序
一,堆排序介绍 堆是一个优先级队列,对于大顶堆而言,堆顶元素的权值最大。将 待排序的数组 建堆,然后不断地删除堆顶元素,就实现了排序。关于堆,参考:数据结构--堆的实现之深入分析 下面的堆排序…

Hessian通信案例(java)
个人博客: 戳我,戳我 前言 由于工作的原因,接触到了hessain,项目需要做hessain和xml之间的报文转换。但是对于hessian是个什么东西一头雾水。于是接下来的时间了解了hessain协议的序列化规则以及hessian协议进行通信的方式。这篇文章是在完成了这个模块…

VDI序曲二十一 APP-V 4.6 SP1服务器端部署
APP-V是微软应用程序虚拟化除RemoteApp以外非常棒的另一种应用程序虚拟化,此应用程序虚拟化是把搭开应用程序消耗的资源放在前端,应用程序虚拟化主要解决的还是软件兼容性问题和保护软件资产问题,同时让用户无需安装就可以绿色使用的手段&…