完整UI设计解析.ppt

在专题网 站设计中， 利用素材 来营造氛 围非常重 要。 最近流行的拟物化设计 也是利用条件反射的原 则，营造出现实中的真 实场景，拉近了用户在 现实中的感受。 界面设计的基本视觉原则 颜色能赋予设计更多的视觉乐趣和美感，并且可以加强设计元素的组 织和意义。如果用的不好，颜色也会严重损害设计的外形和功能。 7 、颜色 使用颜色的数目要尽可能的少。一个设计作品，一眼扫过去，所能接 受的颜色数目要尽可能的少，因为大多数人的颜色视觉是有限的，不 要把颜色当做信息表达的唯一途径。 为使颜色达到美观，可以利用色环上的相似色、辅色、和大自然中的 色彩组合。通常，运用去饱和色、明亮的色彩，会使人感觉友善而专 业。 视觉关系原则 设计中要把图形和背景区分清楚，以便让焦点集中、尽量避免认知混乱。 1 、图形与背景的关系 视觉关系原则 对于用户体现来说，在一个系统中，相似的部分使用相似的办法是对 用户使用习惯的尊重和再利用，能够让用户更好的学习，减少用户学 习的成本。“一致性”可以让人高效的把知识转到新背景，更快的学 习新事物，并且关注到工作的相关方面。一致性分为：美观、功能、 内部和外部。 2 、一致性 美观的一致性指的是风格、外观的统一。如公司的标识使用一致的字 体、颜色和图案，美观一致性会加强辨识度，强化统一性，增强品牌 影响力，建立情感上的期待。 UI 设计概述 UI 的本意是用户界面，是英文 User 和 Interface 的缩写。从字面上看是 用户与界面 2 个部分组成，但实际上还包括用户与界面之间的交互关系。 所以这样可分为 3 个方向，他们分别是：用户研究、交互设计、界面设 计。 UI 的定义 界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用 方式并且为最终用户而设计，是建立在科学性之上的艺术设计。检验 一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投 票的结果，而是终端用户的感受。所以界面设计要和用户研究紧密结 合，是一个不断为最终用户设计满意视觉效果的过程。 对于交互设计再一次的巨大推动是互联网的出现，互联网从 20 世纪 90 年代改变了人们的生活。如果没有互联网，个人计算机只能永远是 “工具”，而不会成为“玩具”。丰富的互联网通过界面交互设计给 人们提供了无数种可能，也给计算机赋予了无数个面貌。它可能是一个 集市，例如亚马逊和淘宝，也可能是和朋友交流的平台，就像 facebook 或者开心网，也可能是新闻报纸或者广播。例如 CNN. 这么多的可能性推 动着交互设计的快速发展。 推动交互设计大踏步向前发展的是个人电脑的流行。在 20 世纪 80 年代， 个人电脑的发展推动了图形界面的大行其道。图形界面即 GUI （ Graphic User Interface ），这一界面模式真正商业化是苹果的 lisa 及 Macintish 系统，同时代也出现了大批的基于 GUI 的操作系统，包括微软的 Windows. GUI 的出现让人与计算机的交互过程变得丰富而有趣起来，这一模式也 成为以后二十多年界面交互设计的主流 交互设计的发展历程 交互设计的发展历程 在目前这个“手机皆智能”的时代，人们当初从桌面 PC 互联网那里得到的 新鲜感又来到了手掌中。苹果的 Iphone 让智能手机的操作系统摆脱了桌 面 PC 的模式，形成了独特的一套系统 ios, 结合灵敏的触摸屏幕，让掌中 设备的用户体验提高到了新的级别。另一种流行的移动操作系统 Andriod 也给用户提供了丰富多彩的移动应用。 微电子与传感器的发展拓宽了交互设计的领域，交互设计师不必再拘泥 于屏幕之上进行设计。 TUI( 实体界面 ) 、物联网和普适计算机等概念让交 互设计的空间扩充到生活中的每个角落，想象一下，超市里每个商品都能 显示自身的信息；带有界面的办公桌可以让你忘掉计算机这样的老古董； 发送邮件只需要在屏幕墙面前挥几下手。这样的设计对象对于交互设计师 来讲是个巨大的挑战。 界面设计的基本视觉原则 基本视觉原则 文本内容的位置，可以让其边缘按照普通的行或列对齐，或者让其主 体按照一个中心点排列。视觉元素应该以一个或者多个药店对齐，这 样能创造出一致性与相符性，增加设计的整体美感，使人觉得清新舒 适。“对齐”也可以带领人去认识一项设计的强大工具。 1 、对齐 在分段的文本中，相对于中间对齐的文本格式，左对齐和右对齐的格 式有更强烈的对齐暗示。比起其他对齐方式，左对齐和右对齐的文本 格式，能够创作出无形的列，呈现出一种清新的视觉暗示。相反，中 间对齐的文本格式，视觉上的对齐暗示就很模糊，各个要点之间的并 列关系不够清楚。 “对齐”能够创造更整齐的版式，让信息传达更加快捷 1 、对齐 界面设计的基本视觉原则 界面设计的基本视觉原则 在一切大系统