ui设计和网页设计有区别吗？.docx

UI 设计和网页设计有区别吗？ 我们应该都了解过设计的大概种类了。而其中我们都 应该听过 UI 设计以及网页设计吧。很多人都认为这俩者是 没有区别的，其实不然。下面我们来了解下什么是 UI 设计 什么是网页设计吧，最后我们再总结区别。 UI 设计是什么 UI 即 User Interface(用户界面)的 简称。UI 设计分为实体 UI 和虚拟 UI，互联网说的 UI 设计 是虚拟 UI，一般是指对软件的人机交互、操作逻辑、界面 美观的整体设计。好的 UI 设计不仅是让软件变得有个性有 品位，还要让软件的操作变得舒适简单、自由，充分体现 软件的定位和特点。 软件设计可分为两个部分：编码设计与 UI 设计。UI 的 本意是用户界面，是英文 User 和 Interface 的缩写。从字 面上看是用户与界面 2 个部分组成，但实际上还包括用户 与界面之间的交互关系。 在飞速发展的电子产品中，界面设计工作一点点的被 重视起来。做界面设计的“美工”也随之被称之为“UI 设 计师”或“UI 工程师” 。其实软件界面设计就像工业产品中 的工业造型设计一样，是产品的重要卖点。一个电子产品 拥有美观的界面会给人带来舒适的视觉享受，拉近人与商 品的距离，是建立在科学性之上的艺术设计。检验一个界 面的标准既不是某个项目开发组领导的意见也不是项目成 员投票的结果，而是终端用户的感受。 与之相应，UI 设计师的职能大体包括三方面：一是图 形设计，即传统意义上的“美工” 。当然，实际上他们承担 的不是单纯意义上美术工人的工作，而是软件产品的产品 “外形”设计。二是交互设计，主要在于设计软件的操作 流程、树状结构、操作规范等。一个软件产品在编码之前 需要做的就是交互设计，并且确立交互模型，交互规范。 三是用户测试/研究，这里所谓的“测试” ，其目标恰在于 测试交互设计的合理性及图形设计的美观性，主要通过以 目标用户问卷的形式衡量 UI 设计的合理性。如果没有这方 面的测试研究，UI 设计的好坏只能凭借设计师的经验或者 领导的审美来评判，这样就会给企业带来极大的风险。 研究界面 图形设计师 Graphic UI designer 国内大部分 UI 工作者都是从事这个行业。也有人称之 为美工，但实际上不是单纯意义上的美术工人，而是了解 软件产品、致力于提高软件用户体验的产品外形设计师。 随着时间的推移，美工这个词将渐渐淡出。 这些设计师大多是美术院校毕业的，其中大部分是有 美术设计教育背景，例如工业外形设计，装潢设计，信息 多媒体设计等。 人与界面 交互设计师 interaction designer 在图形界面产生之前，长期以来 UI 设计师就是指交互 设计师。交互设计师的工作内容就是设计软件的操作流程， 树状结构，软件的结构与操作规范(spec)等。一个软件产 品在编码之前需要作的就是交互设计，并且确立交互模型， 交互规范。 交互设计师一般都是软件工程师背景居多，也有视觉 设计师转行进入的。 研究人 用户测试/研究工程师 User experience engineer 任何的产品为了保证质量都需要测试，软件的编码需 要测试，自然 UI 设计也需要被测试。这个测试和编码没有 任何关系，主要是测试交互设计的合理性以及图形设计的 美观性。测 试方法一般都是采用焦点小组，用目标用户问卷的形 式来衡量 UI 设计的合理性。这个职位很重要，如果没有这 个职位，UI 设计的好坏只能凭借设计师的经验或者领导的 审美来评判，这样就会给企业带来严重的风险性。 用户研究工程师一般是心理学人文学背景比较合适。 综上所述 UI 设计师就是：软件图形设计师、交互设计 师、用户研究工程师。 1.简易性 界面的简洁是要让用户便于使用、便于了解产品，并 能减少用户发生错误选择的可能性。 2.用户语言 界面中要使用能反映用户本身的语言，而不是游戏设 计者的语言。 3.记忆负担最小化 人脑不是电脑，在设计界面时必须要考虑人类大脑处 理信息的限度。人类的短期记忆有限且极不稳定，24 小时 内存在约 25%的遗忘率。所以对用户来说，浏览信息要比记 忆更容易。 4.一致性 它是每一个优秀界面都具备的特点。界面的结构必须 清晰且一致，风格必须与产品内容相一致。 5.清楚 在视觉效果上便于理解和使用。 6.用户的熟悉程度 用户可通过已掌握的知识来使用界面，但不应超出一 般常识。 7.从用户习惯考虑 想用户所想，做用户所做。用户总是按照他们自己的 方法理解和使用。 通过比较两个不同世界(真实与虚拟)的事物，完成更 好的设计。如：书籍对比竹简。 8.排列 一个有序的界面 能让用户轻松的使用。 9.安全性 用户能自由的作出选择，且所有选择都是可逆的。在 用户作出危险的选择时有信息介入系统的提示。 10.灵活性 简单来说就是要让用户方便的使用，但不同于上述。 即互动多重性，不局限于单一的工具(包括鼠标、键盘或手 柄、界面)。 11.人性化 高效率和用户满意度是人性化的体现。应具备专家级 和初级玩家系统，即用户可依据自己的习惯定制界面，并 能保存设置。 UI 常见的手机 UI 一、确认目标用户 在 UI 设计过程中，需求设计角色会确定软件的目标用 户，获取最终用户和直接用户的需求。 用户交互要考虑到目标用户的不同引起的交互设计重 点的不同。 例如：对于科学用户和对于电脑入门用户的设计重点 就不同。 二、采集目标用户的习惯交互方式 不同类型的目标用户有不同的交互习惯。这种习惯的 交互方式往往来源于其原有的针对现实的交互流程、已有 软件工具的交互流程。 当然还要在此基础上通过调研分析找到用户希望达到 的交互效果，并且以流程确认下来。 三、提示和引导用户 软件是用户的工具。因此应该由用户来操作和控制软 件。软件响应用户的动作和设定的规则。 对于用户交互的结果和反馈，提示用户结果和反馈信 息，引导用户进行用户需要的下一步操作。 四、一致性原则 设计目标一致 软件中往往存在多个组成部分(组件、元素)。不同组 成部分之间的交互设计目标需要一致。 例如：如果以电脑操作初级用户作为目标用户，以简 化界面逻辑为设计目标，那么该目标需要贯彻软件(软件包)整 体，而不是局部。 元素外观一致 交互元素的外观往往影响用户的交互效果。同一个(类)软 件采用一致风格的外观，对于保持用户焦点，改进交互效 果有很大帮助。遗憾的是如何确认元素外观一致没有特别 统一的衡量方法。因此需要对目标用户进行调查取得反馈。 交互行为一致 在交互模型中，不同类型的元素用户触发其对应的行 为事件后，其交互行为需要一致。 例如：所有需要用户确认操作的对话框都至少包含确 认和放弃两个按钮。 对于交互行为一致性原则比较极端的理念是相同类型 的交互元素所引起的行为事件相同。但是我们可以看到这 个理念虽然在大部分情况下正确，但是的确有相反的例子 证明不按照这个理念设计，会更加简化用户操作流程。 五、可用性原则 可理解 软件要为用户使用，用户必须可以理解软件各元素对 应的功能。 如果不能为用户理解，那么需要提供一种非破坏性的 途径，使得用户可以通过对该元素的操作，理解其对应的 功能。 比如：删除操作元素。用户可以点击删除操作按钮， 提示用户如何删除操作或者是否确认删除操作，用户可以 更加详细的理解该元素对应的功能，同时可以取消该操作。 可达到 用户是交互的中心，交互元素对应用户需要的功能。 因此交互元素必须可以被用户控制。 用户可以用诸如键盘、鼠标之类的交互设备通过移动 和触发已有的交互元素达到其它在此之前不可见或者不可 交互的交互元素。 要注意的是交互的次数会影响可达到的效果。当一个 功能被深深隐藏(一般来说超过 4 层)那么用户达到该元素 的几率就大大降低了。 可达到的效果也同界面设计有关。过于复杂的界面会 影响可达到的效果。(参考简单导向原则) 可控制 软件的交互流程，用户可以控制。 功能的执行流程，用户可以控制。 如果确实无法提供控制，则用能为目标用户理解的方 式提示用户。 网页设计是面试? 网页设计(web design，又称为 Web UI design，WUI design，WUI)，是根据企业希望向浏 览者传递的信息(包括产品、服务、理念、文化)，进行网 站功能策划，然后进行的页面设计美化工作。作为企业对 外宣传物料的其中一种，精美的网页设计，对于提升企业 的互联网品牌形象至关重要。 网页设计一般分为三种大类：功能型网页设计(服务网 站有些则采用多媒 体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面 布置，甚至可以下载声音和录像片段。好的 Web 站点把图 形表现手法和有效的组织与通信结合起来。 为了做到主题鲜明突出，要点明确，应该使配色和图 片围绕预定的主题;调动一切手段充分表现网站点的个性和 情趣，办出网站的特点。 充分利用已有信息，如客户手册.公共关系文档.技术 手册和数据库等。 设计思路 简洁实用：这是非常重要的，网络特殊环境下，尽量 以最高效率的方式将用户所要想得到的信息传送给他就是 最好的，所以要去掉所有的冗余的东西。 使用方便：同第一个是相一致的，满足使用者的要求， 网页做得越适合使用，就越显示出其功能美 整体性好：一个网站强调的就是一个整体，只有围绕 一个统一的目标所做的设计才是成功的。 网站形象突出：一个符合美的标准的网页是能够使网 站的形象得到最大限度的提升的。 页面用色协调，布局符合形式美的要求：布局有条理， 充分利用美的形式，使网页富有可欣赏性，提高档次。当 然雅俗共赏是人人都追求的。 交互式强：发挥网络的优势，是每个使用者都参与到 其中来，这样的设计才能算成功的设计。这样的网页才算 真正的美的设计。 版式设计 网页设计作为一种视觉语言，特别讲究编排和布局， 虽然主页的设计不等同于平面设计，但它们有许多相近之 处。 版式设计通过文字图形的空间组合，表达出和谐与美。 多页面站点页面的编排设计要求把页面之间的有机联 系反映出来，特别要求处理好页面之间和页面内的秩序与 内容的关系。为了达到最佳的视觉表现效果，反复推敲整 体布局的合理性，使浏览者有一个流畅的视觉体验。 色彩作用 色彩是艺术表现的要素之一。在网页设计中，设计师 根据和谐、均衡和重点突出的原则，将不同的色彩进行组 合.搭配来构成美丽的页面。 根据色彩对人们心理的影响， 合理地加以运用。如果企业有 CIS(企业形象识别系统)，应 按照其中的 VI 进行色彩运用。 形式内容 为了将丰富的意义和多样的形式组织成统一的页面结 构，形式语言必须符合页面的内容，体现内容的丰富含义。 灵活运用对比与调和、对称与平衡、节奏与韵律以及 留白等手段，通过空间、文字、图形之间的相互关系建立 整体的均衡状态，产生和谐的美感。 三维空间的构成 网络上的三维空间是一个假想空间，这种空间关系需 借助动静变化.图像的比例关系等空间因素表现出来。 在 页面中，图片、文字位置前后叠压，或页面位置变化所产 生的视觉效果都各不相同。通过图片、文字前后叠压所构 成的空间层次不太适合网页设计，根据现有浏览器的特点， 网页设计适合比较规范、简明的页面，尽管这种叠压排列 能产生强节奏的空间层次，视觉效果强烈。 网页上常见的是页面上、下、左、右、中位置所产生 的空间关系，以及疏密的位置关系所产生的空间层次，这 两种位置关系使产生的空间层次富有弹性，同时也让人产 生轻松或紧迫的心理感受。 虚拟现实 人们已不满足于 HTML(标准通用标记语言下的一个应用)编 制的二维 Web 页面，三维世界的诱惑开始吸引更多的人， 虚拟现实要在 Web 网上展示其迷人的风采，于是 VRML 语言 出现了。VRML 是一种面向对象的语言，它类似 Web 超级链 接所使用的 HTML 语言，也是一种基于文本的语言，并可以 运行在多种平台之上，只不过能够更多地为虚拟现实环境 服务。 多媒体 网络资源的优势之一是多媒体功能。要吸引浏览者注 意力，网页的内容可以用三维动画、FLASH 等来表现。但要 由于网络宽带的限制，在使用多媒体的形式表现网页的内 容时不得不考虑客户端的传输速度。 便于使用 如果人们看不懂或很难看懂您的网站，那么，他如何 了解你的企业信息和服务项目呢?使用一些醒目的标题或文 字来突出您的产品与服务。并且即使您拥有最棒的产品， 如果客户从您的网站上看不清楚您在介绍什么或不清楚如 何受益的话，他们是不会喜欢您的网站的，这对于网页设 计而言是失败的。 导向清晰 网页设计中导航使用超文本链接或图片链接，使人们 能够在您的网站上自由前进或后退，而不必让他们使用浏 览器上的前进或后退。我们在所有的图片上使用“ALT”标 识符注明图片名称或解释，以便那些不愿意自动加载图片 的观众能够了解图片的含义。 快速下载时间 很多的浏览者不会进入需要等待 5 分钟下载时间才能 进入的网站，在互联网上 30 秒的等待时间与我们平常 10 分钟等待时间的感觉相同。因此，建议在网页设计中尽量 避免使用过多的图片及体积过大的图片。主要页面的容量 应确保普通浏览者页面等待时间不超过 10 秒。 非图形内容 在必要时适当使用动态“Gif”图片，为减少动画容量， 应用巧妙设计的 Java 动画可以用很小的容量使图形或文字 产生动态的效果。但是，由于在互联网浏览的大多是一些 寻找信息的人们，仍然建议您要确定您的网站将为他们提 供的是有价值的内容，而不是过度的装饰。 反馈与沟通 让客户明确您所能提供的产品或服务并让他们非常方 便地订购是您获得成功的重要因素。如果客户在您的网站 上产生了购买产品或服务的欲望，您是否能够让他们尽快 实现吗?是在线还是离线? 因此，如果是产品或服务介绍网站，应该有留言、电 话、在线咨询等功能或信息呈现。 在企业的 Web 站点上，要认真回复用户的电子邮件和 传统的联系方式如信件.电话垂询和传真，做到有问必答。 最好将用户的用意进行分类，如售前一般了解.售后服务等， 由相关部门处理，使网站访问者感受到企业的真实存在并 由此产生信任感。 测试改进 测试实际上是模拟用户询问网站的过程，用以发现问 题并改进网页设计。应该与用户共同安排网站测试。 内容更新 企业 Web 站点建立后，要不断更新网页内容。站点信 息的不断更新，让浏览者了解企业的发展动态和网上职务 等，同时也会帮助企业建立良好的形象。 注意不要许诺你实现不了的东西，在你真正有能力处 理回复之前，不要恳求用户输入信息或罗列一大堆自己不 能及时答复的电话号码。 如果要求访问者自愿提供其个人 信息，应公布并认真履行个人隐私保承诺。 1. 输入控件的自动聚焦和可用键盘切换输入焦点 使用 JavaScript 实现页面加载完成后立即自动聚焦 (focus)到第一个输入控件。可用 TAB 键(IE 缺省实现)或方 向键切换聚焦到下一个输入控件。 2. 可用 Enter(或 Ctrl+Enter)键提交，确保和点击提 交按钮的效果是相同的 不要在提交按钮上加入 onClick=”这样的 JavaScript 代码。 3.鼠标动作提示和回应 对用户的鼠标定位操作，当移动到可响应的位置上时， 应给予视觉或听觉的提示。 4.尽可能早的在客户端完成输入数据合法性验证 输入数据的合法性检验应该在客户端使用 JavaScript 进行验证。除非验证只能在服务器端完成，否则验证工作 应在最早能完成的情况下进行。 5.根据应用场景决定在表单页面和提交后返回页面间 是否使用中间过渡页面 根据应用场景，决定是否显示接收表单页面(表单页面 和提交后返回页面间的中间过渡页面)，以及使用何种方式 显示接收表单页面。 6.防止表单重复提交处理 对提交按钮点击后做变灰处理避免在网络响应较慢情 况下用户重复提交同一个表单。使用页面过期失效避免用 户后退浏览重复提交表单。 7.页面链接是打开新窗口、使用原窗口还是弹出窗口 的原则 一般而言，首页上链接可以使用