2006‐9‐28
●此阶段关键是勾勒出系统的框架
⊙ 主体界面的风格样式 ⊙ 各个业务逻辑界面 ⊙ 业务逻辑界面的导航
●基于纸介原型同用户确认
⊙ 主界面风格是否满意 ⊙ 业务逻辑是否齐全 ⊙ 业务逻辑界面的业务元素是否齐全 ⊙ 业务逻辑界面的导航方式是否满意
●注意：
⊙ 此时关键确定的框架样式和业务逻辑组成 ⊙ 界面元素的细节表现和交互细节将在后续过程中完成
● 其他：
⊙ 信息主要集中在广告及活动宣传 ⊙ 使用大图片，浏览速度一般 ⊙ 蓝色基调下红色的运用使网站生动有活力 ⊙ 各个页面采用统一框架，易于学习和使用
● 结构
⊙ 版式：单页无框架 ⊙ 区域：广告、导航菜单、栏目，导航在中部，不符合习惯 ⊙ 栏目：凌乱，不清晰
● 视觉
⊙ 色彩：沉静的黑蓝，古朴而不是身份，体现了SUN给自己的定位 ⊙ 文字：导航菜单使用的相对高亮的白，祢补了一些中间导航的缺
⊙ 显示器和控制器是人机之间的两个界面 ⊙ 机器通过显示器将信息传送给人，人通过控制器将决策和指令信
息输送给机器 ⊙ 人机信息交换的效率，很大程度上取决于显示器和控制器分别与
人的感知器官、与运动反应器官特性的匹配程度 ⊙ 为使两方面匹配得好，就要研究显示器和控制器的物理特性与人
的感知、记忆、思维、运动反应等身心特点的关系
● 成功的产品设计应力求达到人在操作产品过程中：
⊙ 不能对用户有害 ⊙ 不能使用户产生混乱 ⊙ 不能让用户调整自己
‹#›
2006‐9‐28
●DON’T MAKE ME THINK !!!
● 以用户为中心
⊙ 设计由用户控制的界面，而不是界面控制用户
● 清楚一致的设计
⊙ 所有界面的风格保持一致，所有具有相同含义的术语保持一致， 且易于理解
●关注用户的目标和动机，而不是技术和任务
●了解产品的定义
⊙ 产品的市场定位 ⊙ 产品的核心功能
●了解公司的定位
⊙ 公司的愿景 ⊙ 公司的战略
●确定产品设计的基调
⊙ 是简约时尚，现代深邃，还是古朴稳重 ⊙ 是奔放热烈的红，宁静致远的蓝，还是生机盎然的绿
●关键：要在感性认识上达成一致
●Structure Design，也称概念设计－Conceptual Design
⊙ 软件要为用户使用，用户必须可以理解软件各元素所对应的 功能
●可达到
⊙ 用户是交互的中心，交互元素对应用户需要的功能，因此交 互元素必须可以被用户控制，以实现目标的达成
⊙ 可达到的效果也通交互次数有关 ⊙ 可达到的效果也同界面设计有关
●可控制
⊙ 软件的交互流程，用户可以控制 ⊙ 功能的执行流程，用户可以控制 ⊙ 如果确实无法提供控制，则应使用可理解的方式提示用户
项广告（非常好）、图书导卖（好）
●视觉
⊙ 色彩：淡蓝色，比较清新 ⊙ 文字：标题设计一般，专项广告不错 ⊙ 图片：文字占主要位置，符合定位
●交互 ●定位 ●其他
⊙ 更多的考虑了易用性，比如下面也有搜索栏 ⊙ 栏目设计的一般，尤其使栏目标题
‹#›
2006‐9‐28
●我们知道，人们视为“可见”的光可以分解为从蓝 色到红色的一个渐进的彩虹光谱带
●Interactive Design
⊙ 从用户角度来说，交互设计是一种如何让产品易用， 有效而让人愉悦的技术。通过对产品的界面和行为进 行交互设计，让产品和它的使用者之间建立一种有机 关系，从而可以有效达到使用者的目标，这就是交互 设计的目的
●什么是交互
⊙ 指的是作为服务使用者的用户和作为服务提供者的应 用系统之间的互动通信并交换信息的过程
●破坏或减慢“后退”按钮 ●打开新的浏览窗口 ●使用不规范的GUI（图形用户界面）部件 ●缺少自我介绍 ●缺少存档 ●移动页面至新的URL地址 ●标题和内容不匹配 ●对最新的网络热门紧追不舍 ●服务器访问速度过慢 ●所有的东西看起来都像广告
●通过静态的平面图形来展示最终的系统
‹#›
●编码实现真实系统界面（不实现业务功能）
●视觉
⊙ 色彩：标志色彩红色运用较少，视觉冲击力一般 ⊙ 文字：用标志性红色粗体做标题，还算可以 ⊙ 图片：使用大幅动画广告，速度一般，但商家的意图表现很
完整，有吸引力
●交互 ●定位
⊙ 大幅广告表明了华为的意图在宣传，广告内容又不具体，表 明华为的意图在造势，在形象定位
●其他
⊙ 语言设置和搜索的摆放太过随意 ⊙ 导航菜单融入北京，不清晰
因为满意 所以忠诚K
软件产品界面设计老K-王传刚
●背景 ●人机心理学 ●用户界面分析 ●界面结构设计 ●界面交互设计 ●界面视觉设计 ●界面原型开发 ●界面开发实现 ●用户界面规范 ●实际案例剖析 ●基础知识
2006‐9‐28
●只有在没有选择的条件下，我们才忽略外在表现 ●在功用相似的条件下，我们会重点关注外在表现
● 文字未排版（违反VD.1） ⊙ 将所有文字堆积在一起是一种可怕的体验，浏览这样的文字将是痛苦的 经历
● 固定字体大小（违反ID.4） ⊙ CSS样式不幸让网站有权禁止浏览器的“改变字体大小”的功能，对于部分 人群来说，这个固定的文字大小有时候会影响阅读
● 违反设计惯例（违反VD.1） ⊙ 当事物遵循相同的原则运作时，用户不用担心发生意外，因为他们根据 先前的经验已经很清楚将会发生什么事情
●造成问题的原因
⊙ 对系统能力的渴望遮蔽了对交互的要求
• 跳舞的熊：惊叹的不是熊跳的好不好，而是它竟然在跳
⊙ 程序员和用户的目标差异
• 程序员想让软件的创建过程简单易行 • 用户想让与程序的交互简单易行
⊙ 其他：时间资金成本；不了解不擅长
解决问题的关键：
再编程之前进行交互设计
在交互设计之前：
学习再学习、实践再实践、总结再总结！！！
●易读性的问题 ●没有标准的超连结表示 ●Flash的使用 ●网页无法呈现网站内容 ●搜寻的重要 ●浏览器的差异 ●讨厌的框架 ●没有链接相关资讯或是公司资讯 ●固定的页面宽度 ●不适当的图片放大连结
2VD.3） ⊙ 链接是浏览过程中的一个关键因素，让用户知道哪些网页已经访问过了， 这样就不必一次又一次访问同一个历史页面
● 结构 ⊙ 版式：采用单页面分区域方式展现，1024*768分辨率下需两屏 ⊙ 区域：上部导航菜单、中上部直观广告、中下部主体内容、底部宣传附加 ⊙ 栏目：主题内容分四个栏目，设计有些简单，不甚清晰
● 视觉 ⊙ 色彩：使用标志的标准色为主调，协调统一了整个网站的视觉。配图是使用对比 色，成稳中又能体现其明快风格，使得整个网站的色调生动起来，全屏模式下上 下呼应，和谐稳重 ⊙ 文字：运用粗体分别在导航条、主要菜单标题来与其他文字做主次内容上的区别。 易于识别 ⊙ 图片：主图在点睛生动了该网站的同时、有效的减少了客户视觉浏览方向点，直 接引导到该网站的中心意图点；技术支持页面采用男、女促销员颇赋亲和力热情 微笑的图片，体现、暗喻IBM公司内部团体服务周到、热情友好健康的企业文化 精神风貌
●专业厂商网站
⊙ 华为网站 ⊙ IBM中国网站 ⊙ 微软中国网站 ⊙ SUN中国网站
●国内购书网站
⊙ China－Pub ⊙ 当当 ⊙ 卓越
2006‐9‐28
●结构
⊙ 版式：在1024×768分辨率下刚好一屏，很简洁 ⊙ 区域：导航菜单、广告占据1/3强，内容占1/3，广告等 ⊙ 栏目：信息分类为5个栏目，还算清楚
● 感觉和知觉
⊙ 人们通过感觉器官和感觉神经把外界的声、光、味、冷、热等传 到大脑，这就叫感觉，感觉是外界事物的个别属性在大脑中的反 映
⊙ 人的大脑在反映外界事物个别属性的基础上，通过感官和经验的 作用，把事物的多种属性联合起来，形成对某一事物的整体认识， 这就叫知觉
● 产品设计必须考虑产品在感觉和知觉方面的要求
⊙ 包括色彩、文字、构图、标识等
⊙ 视觉设计的目标是将理念以感官刺激的方式表达出来
⊙ 视觉设计的目标是在不歪曲本意的前提下使产品更具 有人性：令产品更容易理解和使用，令用户在使用产 品的过程中轻松而愉悦
‹#›
●VD1.界面清晰有效一致 ●VD2.依赖认知而非记忆 ●VD3.提供视觉线索刺激 ●VD4.尊重用户经验感受
● 不回答用户的提问（违反ID.2） ⊙ 用户是因为某个目的才访问你的网站。他们方式可能是想购买你的产品 或者其他，但最终却失败了，因为网站没有提供用户寻找的资料信息
●主题不明确 ●更改以存档的链接地址 ●内容没有注明日期 ●缩略图看不清细节 ●图片的ALT文字过于冗长 ●不给用户自定义选择 ●过长的商品列表选择 ●商品仅按照商标排序 ●过于限制用户录入的信息 ●页面包含指向自身页面的链接
⊙ 有请求，有应答，需要双方参与
●任何产品功能的实现都是通过人和机器的交互来 完成的。因此，人的因素应作为设计的核心
●1.有清楚的提示，并提供快速反馈 ●2.使用用户语言，并让用户来控制 ●3.允许工作中断，可随时安全退出 ●4.知道当前位置，并提供全程导航
●Visual Design
⊙ 在结构设计和交互设计的基础上，参照目标群体的心 理模型和任务达成进行的视觉上的直觉设计
⊙ 是界面设计的骨架，是通过分析制定出的产品的整体 架构
●形式上可以基于纸质来完成原型－Paper Prototype，
⊙ 方便与用户之间的交流和体验，从而完善设计
●关键：逻辑分类和语词定义
⊙ 这是易于理解和操作的重要前提
‹#›
●业务逻辑分类设计 ●导航菜单设计 ●页面框架设计 ●统一关键词语及其定义
陷，当仍不够醒目 ⊙ 图片：崇尚自由、团结的图片，昭显了SUN的内心独白
● 交互 ● 定位
⊙ SUN在通过网站告诉大家，其实我才是老大，我才是根本
● 其他：
⊙ 除图片所宣扬的信息外，并没有认真的设计 ⊙ 内容区域文字排列凌乱 ⊙ SUN并不打算遵从惯例，属于值得尊重的努力追赶潮流的老者