软件产品交互设计

2006-9-282006-9-28提纲人机心理学 用户界面分析 界面结构设计 界面交互设计 界面视觉设计 界面原型开发 界面开发实现 用户界面规范 实际案例剖析 基础知识2006-9-282006-9-28背景分析。解决问题的关键：再编程之前进行交互设计O在交互设计之前：学习再学习、实践再实跌、总結再总结1 ! IV 功夫造成问題的原因対系统能力的渴望igfiT对交互的要求 JKII的Mh的不ftMtt的好不好.両昱它程序员和用户的目标墓异程序员纽让戟件的创过建巍童H行用户M让与序的交互行o其他：时间资金成本：不了解不擅长2006-9-282006-9-28人机心理学学习的目的使工程技术设计与人的身心特点相匹配.从而统效舉、保 人机安全、并使人衽廉统中能够有效而if适地工作使人适应机器是40年代以*的墓本转点工程障设计机住住只議干机械力学性住的改进.很少希使 用者的要求：心理字求的工作也局1干为現成的机黔透拔和训练人机交互的接口一人机界面0呈示饕和控制器星人机之间的两个界面。机2通迥呈示探将信息传送给人.人通过控制2S将决策和播令信 患输送给机8S人机借患交换的效率很大程度上取决于展示曲和控HJb分别与 人的蚪知蹲官、与运动反应8S官笛性的匹tt.HH为仗两方面匹配得好.就要研究显示器和控制郢的材理特怪与人 的18知、记忆、思维、运动反应茅身心待点的关系入的特点感觉和知觉人们通过專党器官和越觉神经把外界的处.咒、味、冷、热尊传 到大絶.速就叫感!感党是外界務的个别厦性衽大脑中的反 映：9人的大腿&反映外界事物个期层性的基础上.通过言和经归的 作用.把榜的多种属性联合起来.形成对X-*物的整体认识. 这就叫知觉产品设计必须考&产品在觉和知觉方面的J!求丿/成功的产品设计应力求达到人在1作产品过程中、壬他 0不能对用户有胄O不紇使用户产生混乱0不紇让用户调整自己界面设甘原则 DONT MAKE ME THINK以用户为中心G设计由用户控制的界面而不呈界面控制用户清魁一致的设计。暫髀需啓风恪保持一致所有具有聖周含义的术逵保持一致拥有良好的觉特征薇少用户的逗忆负担.以用户所麹恿的现实世界事务的抽欽来给 用户暗示WRSMJ来钢肋用户能迅速学会软件的債用KK*用性发挥watt通过良好的界面设计达成欲件的易用性目标厶致性區则设计目标-致。软件中住住存在多个组成部分（组件.元索）不同组成部 分之间的交互设计目标篷夏一致例如：如果以电脑探作初 级用户作为目标用户.以简化界面逻输为设计目标那么该 冃标酒要贯彻软件（软件包）整体.而不是局部元索外观一致交直元索的外观住住影响用户的交互效果 1个（类）牧件采用一牧风格的外莢.对于保持用户焦点.改进交直效果有很大帮助交互行为一致&在交互模型中.不同类型的元索用户触发其对应的行为寧件 后具交互行为需要一致例如：所有需姜用户认探作的 对话柩都至少色含确认和放弃两个按仞2006-9-282006-9-28r可用性原则可理解G软件姜为用户使用.用户必硕可以理解软件各元索所对应的 功能O?!A设计的定义可达到G用户是交互的中心.交互元东对应用户需要的功能.因此交 立元族必须可以械用户控IM以实現目椽的达J*G可达到的效果也通交互次数有关可达到的效果也同界面设计有关可控制软件的交互流程.用户可以控制功能的执行流程.用户可以控制G如果确实无法提供控制.则应使用可理解的方式提示用户工业设计师Victor Papanek的定义：为构建有意义的秩序而付岀的有意识的直觉上的努力Alan Cooper的定义，理解用户的期望.需动机和场杲理解业务.技术和行业上的需求和限制。将这些所知道的东西转化为对产品的规划（或者产品 本身）使得产品的形式.内容和行为变得有用、能 用.令人向往.井且左经济和技术上可行关注用户的目标和动机.而不是技术和任务了解产品的定义产品的市场定位产品的核心功能了解公司的定位 o公司的18采 。公司的战略用户界面分析确定产品设计的基调是简约时尚.现代深邃.还是古朴也重0是奔放热烈的红.宁8致远的蓝.还是生机盎然的绿关键I要衽感性认识上达成一致关键逻辑分类和语词定义0这是易干理解和操作的重要前提界面结构设计 Structam DmAr.也称槪念设计_C*OwigR 罡界面设计的骨架.是通过分析制定出的产品的整体 架构形式上可以基于纸质来完成原型一 P Proton, * I ；力1更刁用尸Ziojm父淤和佯粧 MfnjTtWWlT2006-9-282006-9-28）亿3 直*T IDO.teiw 7、E 匕C1 / 】 Jit阶段关是勾勒出系统的框架 主体界面的风格样式 各个业务逻辑界面:业务逻轶界面的导航并回结构協计补充基于纸介康型同用户确认G；主界面风格是否满意 业务逻辑是否齐全业务逻辑界面的业务元茶是否齐全 O业务逻紺界面的导航方式是否满意注0此时关徳冷定的柩架样式和业务逻組组成）界面元索的细节表现和交互细节将庄后缤过程中完成Interactive Design界面交互设计从用户角度来说.交互设计是一种如何让产品揚用. 有效而让人偷悦的技术通过对产品的界面和行为进 行交互设计.让产品和它的使用者之间建立一种右机 关系.从而可以有效达到使用者的目标.这離泉交互 设计的目的什么是交互：指的是作为腿务使用者的用户和作为服务提供者的应 用系统之间的互动通信井交换信息的过程9看请求.有应答.需要双方步与任何产品功能的实现都是通过人和机器的交互来 完成的因此，人的因素应作为设计的核心界面视觉设计BVImmI Design0在结构设计和交互设计的基础上.畚照目标群体的心 理模型和任务达成进行的视觉上的直觉设计包括色彩、文字.构图、标识等。视觉设计的目标是将理念以感官刺激的方式表达出来G视觉设计的目标泉在不歪曲本意的利提下使产品更具 有人性：令产品更容易理解和使用.令用户衣使用产 品的过程中轻松而偷悦2006-9-282006-9-28视觉设计原则空站设计问题举例 VD1.界面清噺有效一致耒改变已访Rtttt的色（违反課蘇翳銭鹫誦辈轧熾刖通”貯己诙丽 VDN依赖认知而非记忆文字未井嚴（fiVD.1）文亨堆枳左一RJ8禅可佗的体冷34Kia09文字的 呂历VDM提供视觉拔索剌漱 VD4.WB用户经验感受不回答用户的11问（建反12）因定字体大小（I#反io”）制韻謀雛舉較恋諜嶷猛?什硕驻财曲反设计惯例（S&VD.1）器RS器器磐歿/氐5T心吐*爪畤皿2006-9-282006-9-28迪十大网站设计RW*匸犬网站设计问題 JB读性的问題没有标准的超连结衰示 I Flah的使用网页无法呈现网站内容I搜寻的要浏览昼的差异讨厌的框架没有槎接相关资讯或是公司资讯 固定的页面宽度不适当的图片放大连结主題不明确更改以存档的链接地址内容没有注明日期缩略图看不清细节图片的AUF文字过于冗长不给用户自定义选择过长的商品列表选择商品仅按照商标排序 过于限制用户录入的信息页面包含指向自身页面的链接2006-9-282006-9-28:网站栈计问题破坏或减慢后還锻钮打开新的浏览窗口使用不规范的GUI （图形用户界面）部件缺少自我介绍铁少存档移动页面至新的URL地址标题和内容不匹配对量新的网络热门毀追不舍厦务鶴访问速度过慢所有的东西起来都像广吿2006-9-282006-9-28界面开发实现集码实现真实系统界面（不实现业务功能）案例分析一华为结构。版式在1024X768分備率下刚好一屏.很简洁0区ML导航菜枫 广告占tgi/a.内容占（/瓠 广告等G栏目*信息分类为$个栏目.还算满楚视觉色彰，标志色彩红色运用较少.视贡冲击力一般G；文字*用标志性红色粗体做标趣.还尊可以G图片，使用大幅动画广告.速度一般.但商家的意图表现很 完整.有吸引力交互定位辐爲fflK翳的觀鈕暫广告内容又不具体.其他-语言设置和披索的摆放太过陌恋导航菜单抵入北京.不清斷条宀分析一 IBM中国ft?的户的雳求 迅速冷用自己常畅产品和理念件址氏杀期为謝升EK方式1024-7MiliVTWW （xm：上終导航菜、申上asisr*.中下郡主oa#. sx传用加 皂m 主0AK分13个皂ll不8；瓦成吃中便硝个全SinT上 THE和0（12*:込朋仪体分JW&导駅築主嬰甬标見来与其他文宁主决内密上的区别其ei：分典;襦更多wa-iq-关于ibat栏口设计码料商酌 O WKiS.li不事 3insvw7童体克：NSESfl快、王衣分昭方侵妄脚可谕何存：T体大小耳节圈并均*alt文*: 个员!有主员逢慢：2006-9-28C 慫 124桑氏力析一 SUN中国结构G版式！0区氐栏民视觉单页无框架广吿.导航*栏目.导航左中部不符合习惯 凌乱不清斷色彩：沉静的黑蓝.古朴而不杲身钮.体02TSUN给自己的定位 文字：导航菜单使用的相对鸟亮的白.祢朴了一些中间导航的缺 爪.当仍不够M目6）圈片|溝尚自由、团结的S1片.昭87SUN的内心独白 交互定位SUNI5通21网站吿诉大赢其实我才是老大.我才足根本 其他|0歟图片所査扬的佑息外.并没有认真的设计0内密区域文宇排列凌乱，SUN并不HWi#从惯伊属干值WW的努力追赳老滾的老者一微软中国 馆构版式单页.四框架结恂.O区域：Logo.紡图导航.内容广吿）.附加佑息栏目：广告太突出了.淹没了其他栏目色彩：蓝色框架下大使用红色.视St冲力冬O文字：盘.黒小五.专业張GB片2色彩艳丽.楂心设计.好00交互定位o产品宣传为主.很有tti动性其他：O倍患主要中衽广書及活动童传便用大B0片.浏岚速度一般3壬色基调下紅色的运用使岡站生动有活力各个页面采用统一権架.易于学习和使用2006-9-282006-9-28浚蓝色.比较清籃标18设计一般.童序广告不餡 文字占主要位置.符合定位结构版式单页卜两侧浮动广告区L导就菜单、广告、广告.内容、其他栏目：焦点快报无用.应改为会员登陆）图书分类、专 项广告（非魁好）图书导卖（好）视觉色G文字：图片x交互定位其他G史多的考虑了易用性.比如下面也有搜索栏栏目设计的一般.尤其使栏目标地2006-9-282006-9-28剧知识$颜色我们知道，人们视为呵见的光可以分解为从蓝 色到红色的一个渐进的彩虹光谱带色环显示如何通过混合两种或更多顾色来生成特 定的颓色.色环实质上就是衽彩色光谱中所见的 长条形的色彫序列.只是将苜尾连接在一起，使 红色连接到另一靖的紫色ttil基色按照定义，基色是量基本的颔色，通过按一定的 比例混合基色可以产生任何其它颔色小学里学到基色有红、黄、蓝（和现在大多是用红、绿.蓝作为基色（知潮辭柘青色、品红色、顾色不同是因为计算机显示器使用加色.而打印 机使用减色.显示SI发射彩色光找.而纸张上的 冷水则从它反射的光中吸收了某种濒色rm-色环的说明（对比色）丄広上IT讨约勢乞更RW*:W聲吕跆三林色吸跆.啟乎遊林祕勒籃丽呃建人以皿盹和力心出遵丽祕.臥毗冲寅林觉.谿员2006-9-28互补的关系物体通过表面色彩可以给人们或温醱或寒冷或凉窝的感觉（实为知觉）红、L便人姐到阳光.烈火，故称F色J如图中烬烧的禅林绿、W KWfi色与属夜.專冷相联，称冷色J如图中 夜晚软灯光熙務的宾馆大色彩的嗡意互补色结合的色组，是对比量强的色组.便人的 视觉产生剌漱性、不安定性如果配合不当，容易产生生硬、浮奇、总躁的效 果因此要通过处理主色相与次色相的面积大小. 或分散形态的方法来调节.壊和过于激烈的效果 BMA-isttK互补色对比第角組.色积大両且加入II助ene. 圮了主色讹的作用.ttJRMB. tra又安儼.恰列好处.2006-9-28色彩的三要素任何色影祁具有三种JB性：色相.明度、纯度色相是区别色彩所必要的名称.红.黄.眩是旗斛的三元色.两 色相加可变成相、绿.葉三色.而三色相加芸变成授近黒色. 辛干光的三元色是红.绿、蓝明度。是指色彩明昭.深浅的程度.明度高就是说色彩较淡.而需 色是色彩明度最低者彩度（纯度）?是指色彩的鲜艳饱和度而言.一般而言.饱和的紅色彩度員 高.而黑、白、灰则不貝彩度.称为无彩色薜鷄置牆述除翥眾不同而有异鮮明的纯色调 纯色调是由高纯色相组成的色毎一个色相个 性鲜帆 具有挑战性.令人嫌奋、赏心悦目.强 烈的色相对比意味着年轻、充満活力与朝气2006-9-282006-9-28朗净的明色调明色调于靑色系列，其特征是加入了多的白 色.提离整体色调的明度.色感相对减弱.明色 调犹如春天的新绿.透明清丽、明净轻快.以 阴色调的履系列为主的配色，有甜莫.风雅之味 道，少女般的清纯.明色调的冷系列虚得清凉、 真快高雅的明灰调这是在全色相色系大的调入浅灰濒色，是色相 全部带有灰浊味由于过多调入灰白色.色相的 明度提高了.形成高明度的次调子.这是明灰调 的特征明灰讥以平静的感觉.建含着高雅与恬 静，显示出另一种美的境界2006-9-282006-9-28朴实的中灰调中灰调是一组中等明度的含灰色调，色相环中所 有濒色均调入中灰色.是纯度降低.色相感淡薄. 中灰调带有几分深沉与睛淡.有着朴实、含*、 的特色2006-9-282006-9-28中庸的浊色调浊色调居于色彩体系的明暗中轴圾与高纯色之间 的位具有明显的色彩个性.有宣于谓和色调2006-9-282006-9-28艺肚的要素一形式展不 ws tnes 小we 4 个帛 -s gs下s* wsal 祈 s 点nIQ ? 药勺J 点典一-深沉的暗色调暗色调入了大的黒色，形成浓浓的深色调.矗 约踣显各色的相觀，这是暗色调的特征.表现出 深沉、坚实、冷静、庄的气质曲色iffi、代 s 、举 81.5 sss 1:後不:的启w&xW88VCWt 力T Qi3 aS.SS SINnnn齐 别、壽 :金 学不wml * WKA形位点tt何的V只 、lr 宦tt上 wsm s mi 务次冷 最二的三 a WM由A i 多 s. ;一 来的: a +1 GsRSB * 以式 的:本 s f 出化的 复 M小IAS s I 用rR !分不n成又 酌Hlna Is If gtn的様n ss tts s s 盲由M .s s .es i s s 平上、和對处力 ifis 次式林 三蛊 sf, s*w的H SB -a ss c -sfi ssM- 的nrNISM K2006-9-282006-9-28二术的要素膚安通如 奈人交就 两均心王S 的为.衡 力感的不 动中互常華 动相运觉在齧 物力对姿 餐右路 指两衡罢走 是葦理畫就上心学也现,*定藝-is视觉冲击 结构辨识 内容浏览 交互体验平嵩的形式有两种：对称和債倚嘰骷歛蠶洋鈔 支点在中间左右的形体借倚的平勧.很像胖子与瘦子坐翘越板.两者坐的位和支才能保持水平的:采用債倚的翱膘的簌矍鏈豁亿M何山DOOr.9ft MM ttM1内部案例点砰额色纯度过低，旧,同时缺少辅色辅助,画面不 明快，沉；画面细节缺少处理，没有生机.闷阳标导向设计即通过分析目标去解决问0设计的起点星定义用户角色和角色的目标三个组成部分，0一些看特问起的佈方決效的梅导原剤0 一些罪當有效的工具为快乐而设计 为健力更爱而设计 为礼而设计 为人简设计 不一切地追求可用性 夺回控制权2006-9-282006-9-28为礼貌而设计【比拼时代2006-9-28只有在没有选择的条件下，我们才忽略外在表现亠礼鏡的软件对我鹿兴建礼II的软件尊我礼Q的软件主动11供帮助 礼级的软件拥有常识礼稅的软件僉預0知我的需要礼義的软件反应載捷礼鏡的软件会解决自己的问 礼U的软件提供有用的值恵 礼的软件有満秦力礼荻的软件有自信礼U的软件很专注礼的软件灵活BL变礼II的软件即时回搖礼鏡的软件让人伯任2006-9-28背景分析在功用相似的条件下.我们会畫点关注外在表现阻是美工那么简单2006-9-28I1功夫I | cgncQUKsm背景人机心理学 用户界面分析 界面结构设计 。界面交互设计 界面视觉设计 界面原型开发 界面开发实现 用户界面规范 实际案例剖析 基础知识命5 “丘4K1週7造成问題的原因O对系统能力的渴望迟廠了对交互的要求廉的ah惊収的不MMM的好不好而是它ftttatt 程序员和用户的目标差异覆序员让软件的金过简单行“ uk? IB户爼it与停的交互筒行O其他：时间资金成本：不了解不接长O解决问题的关键：再编程之前进行交互设计。在交互设计之前：学习再学习、实践再实践.总结再总结！ I I2006-9-282006-9-28结束DONT MAKE ME THINK谢谢大家的参与!