视觉传达设计-软件界面基础设计

• 界面给人的第一印象来自视觉的色彩感受。确定标准 色彩（即定色调）是软件界面设计的重要一步。
• 标准色通常采用l～3种色单独或组合使用。单色易记，印象强烈，但容 易与别人重复；多色组合易显出个性，然而用色过多；制作复杂也是不 可取的。
• 界面的标准色一般只采用一种，广泛应用于标志、标 题、主菜单和背景色块中，给人以统一的企业感。具 体应用时以标准色为中心，利用它的明度变化产生不 同的色彩。（注意：不是所有色彩都适合在界面中做 标准色。会存在视觉疲劳等问题) 其它色彩只是作为 对比和衬托，决不能喧宾夺主。
手机网页界面设计问题
问题1 网页VI无区分，网站之间无差别。
？
Metro风格改进方案
解决1 导入VI系统，运用平面色块、图标等元素增加网页视觉识别度。
手机网页界面设计问题
问题2 网页信息分类不清晰，显得庞杂无序。
Metro风格改进方案
解决2 利用色彩、大号字体构图区分版块。
手机网页界面设计问题
2000年汉诺威世博会动态标志 3、三维动态 6、与听觉的结合
• 主题：人类-自然-技术 • 2000年德国汉诺威世博会主题会标。 • 2000年汉诺威世博会聚焦于人类、自然和技术三者之间的关系， 在21世纪门槛上，向全世界提出了社会和谐的课题。大会会徽征 集工作从1994年开始。与以往不同的是，包括来MetaDesign的 Erik Spiekermann在内的九位名德国知名设计师共同题名了一批名 不见经传但才华横溢的年轻设计师加入徽标征集活动，以体现新 世纪的新观点、新视野以及对未来的想象。根据主办方的要求， 这个标志必须是：反映主题、独特性强、造型简洁而不乏深意、 适用于印刷、动画制作、网络等多种媒质、可任意放大或缩小、 能与“Expo2000 Hannover”的标题字样协调结合。 • 由奎恩工作室(German studio Qwer)设计的这个作品无疑契合 了主办方对于新世纪世博会的概念定位。它是一个能根据不同场 合改变结构与色彩的波纹图形，在整体结构不变的情况下时刻呈 现出不同的运动状态。它充满动感，仿佛只有高倍相机才能抓拍 它下一刻的游走。它又像一种难以捕捉的现象，充满了未知和不 确定性。正如主设计师Michael Gals所阐释的那样：“它包涵了促 使其保持运动和活力的元素，一种永恒的能量。这也是21世纪发 展对人类的要求：保持运动、思维灵活、勇于创新，运用智慧推 动世界向前发展。”由著名设计师组成的国际评审组织评价认为： 这个外观看似有机生物结构的造型是标志设计领域技术运用手段 变化的重要标志，它极富动感的造型与传统静止的印刷形态产生 强烈的反差。看来不论在内涵还是技术上，这都是一个会呼吸的 标志。
问题3 功能按键无特殊设计，容易被忽略。
百度
Metro风格改进方案
解决3 利用平面色块提高醒目度。
手机网页界面设计问题
问题4 当前状态显示不明，用户容易迷失。 解决4 显示输入框，关键字突出。
基础设计系统
• 标准标志 • 变形标志
早期的很多标识设计虽然在静止媒体上运用自如，可是其 在元素本身和构成形式上都是不适合用做动画效果来做展 示，在当今时代其传播途径必然受到限制，这对于品牌生 存与发展是不利的 。
3、动态元素的提取（元素适合打散与重组）
标识的构成元素是标识动画的主体，这些元素的设定直接 关系到标识动画的成败。 设计标识的同时需要考虑到这些元素之间是否具有可分散性， 很多标识动画的表现方式是以标识本身为题材，进行动态的 拆分、多个形态的重叠等等。
4、空间的延续性（多平面角度的定格） 标识在静止状态一定是单一视角的，也就是二维的，而一旦 成为动态效果时，标识就可以是跨空间的多维的。因此在构 思标识的同时，需要换一个角度考虑标识的形态，比如想象 从侧面、背面、斜面等视角是否具有延续性， 要适当追求标 志的运用弹性。
标识的概念由静止转为动态，由视觉转为视听结合，弥补 视觉障碍者对信息的接受，这就是说随着运用媒体的改变， 从动态的角度出发，标识不仅仅服务于静态的媒体，除了 必须具有传统标识设计的普遍性要求之外，还有更高的要求 。
交互标志的设计重点（更注重情 感与体验）
• • • • • • 1、以平面的vi为基础 2、三维立体感 3、三维动态与动态元素的提取 4、多角度平面效果的界定 5、光影、动态色彩等动态元素的界定 6、与听觉的结合
式的范围界定）
• 点击步骤
• 标准声音 • 进入页面（或开机、关机）的标准音乐 • 交互反馈的标准音乐（如点击音、操作 成功音与失误提示音等） • （如intel的标准音） • 其它 • 手势、触感等
吉祥物
Android系统
软件界面中的VI设计
• 目前绝大部分公司与学校都把VI放在传统的以静态印 刷为主的媒体中，但是日益发展的多媒体作为日益主 流的媒体已经向传统的Vi提出了挑战。 • 从传统的平面媒体、影视媒体和空间实物媒体转移到 虚拟的网络媒体上必然形成其独特的风格 。 • 虽然多媒体界面的设计已经比较成熟，但是在其中运 用VI品牌形象的并不多。目前在多媒体中实现VI设计 的最成功的产品就是apple系列。 • 注意：该课题是一个较新的课题，交互界面中的VI设 计与交互界面设计的区别：一个从企业的角度，一个 从用户心理的角度。 • 该课程作为一种尝试，将从基础设计系统与应用设计 系统两部分在多媒体界面中进行品牌形象设计的讲解。
• 选定的标准色要给出标准的色值。
• 动态交互色彩的标准（辅助动态色彩）： • 1、文字交互前后过程中的标准色彩 • 2、菜单交互过程中的标准色彩
渐变色彩的标准与标识
动态色彩的标注方式
• 商标品牌等的动态编排模式 • 在标准字体、动态标志、动态标准色的设计完成之后， 进一步的任务就是三者之间的编排以及规则的制定。 • 许多企业的产品都有着自己独立的品牌名称和品牌形 象（商标）；甚至同类产品由于销售定位不同，品牌 也大不相同。 有的是产品品牌延用企业品牌，二者合 而为一。 • 动态组合的编排，一方面强调了交互中企业的独特个 性；另一方面，也为大量的交互应用设计提供了模式， 使之在交互中更迅速、更规范。 • 横排、竖排等方式，以平面VI手册的编排为基础
• 网页左上角的品牌标志与字体的动态组合 • 终端开机页面的品牌动画
• • • • • • • • •
标准图标 以平面VI为基础 边框、形状 标准大小（几类） 质感以及不同质感间的图标转换 风格 标准颜色组合与限制 交互动态与前后变化 清晰度（图片精度）
• 标准交互方式 • 交互方式的界定与规范（标签式、翻页式等交互方
4、空间的延续性（多平面角度的定格）
• 标准字体
• 指用于软件界面标志、标题、主菜单的特有字 体。 • 设计师可以根据需要选择特别的字体，但由于 字库的不同，会出现显示问题。也可以作为图 片显示，但是文件会很大，影响下载。 • 中文网站网页默认的字体是宋体。
• 标准色彩与辅助交Hale Waihona Puke Baidu色彩
• 标准色彩
1、三维立体感
• 以晶莹剔透的色彩配合新款苹果电脑与iPod等 系列大胆发售，给人以崭新轻松的新形象。
• 变形标志
• 2、3、标识的立体化与互动元素： • 物象间利用它们的相似形、互借互生、融入对方的形 象结构中，相互成为对方必不可少的一部分，形成两 形或多形共用的有机整体。如湖南卫视的台标与盛开 的菊花组合和谐自然。