手机平台应用开发

1手机平台应用开发——交互设计补充教师：金星Tel：189711427712内容•用户研究和设计–用户研究–线框图•视觉感知–色觉理论–配色理论–实践•版式设计•“AJAX之父”JesseJamesGarrett，2000–以用户为中心的Web设计流程–用户体验的要素•框架层–按钮、表格、照片和文本区域的位置。用户体验工程模型用户研究•用户是什么？–亨利福特：如果我直接问人们需要什么，回答很可能是：“一匹更快的马”。•绝大部分人不是产品设计师•用户只会满足于比现有好一点发现问题找到方法人们目前正在做的更高效、更方便地完成人们不喜欢做却不得不做的变得有趣一些想要做的变为现实用户倾向于•用户只会用到20%左右的软件功能–但是往往希望有某些额外功能•用户只会使用一种操作模式–很少提升他们的技能•养成了自己对软件工作原理的理解–为什么电脑这么慢？•如何找到用户的真实需求？例：场景融入•一个寻找餐馆的手机软件–让我看看，附近有什么餐馆？好，有7家。其中两家是快餐店，就不考虑了，2家炒菜，还行，2家提供烧烤，不健康，1家西餐，半成品做的。–现在是晚上11点，还开业吗？它们消费水平高吗？–排名，我需要它们的排名和评论。–小A说这家服务态度好，他的评论可靠吗？4.5星级的，姑且相信吧！–我是不是需要一个方向指示，或是一张地图？用例之后：线框图•界面轮廓•3R法则–Requirement–Reduction–Regularity•乔希威廉姆斯–75%的设计是在写html之前纸上勾勒。去掉一般性功能•每个新增功能意味着–更多的帮助文档、学习、理解和确认–更多的自定义选项–更多的犯错可能•奶牛规则–成熟：9.0版本–已有用户群体的制约•不爱改变时间非必要性测试•降低软件中的噪音–我的软件主要是用来支持什么情境的？–如果这个软件不存在，我想创建一个最简解决方法，是什么？–从头重新创建上面的软件需要多长时间？•60秒法则–这个项目周期已经缩短一半–面见客户前我们还有60秒决定保留哪些东西、舍弃哪些东西。案例：提升45%购买人数•表单内容•出现时机10删除文件取消购买前登录登录注册电子邮箱密码忘记了密码？表单上的可用性研究1112少用一些文字•不是警告，而是允许撤销。•智能处理，而非警告。–如浏览器地址栏，自动搜索。•不要为一个界面附加大段说明性文字。•如果无可避免……–保证每个按钮都有特定的标签确认框删除文件取消你要删除文件吗？确认取消13人们通常不会逐字逐句阅读•使用对用户有用的词汇•每段只阐明一个主旨•各段主旨置于首句•概括性标题•加亮关键词•使用项目符号列表•简短、日常化的文字–不要过度考虑一致性，不要使用企业口吻，语气不要居高临下。14图片代替叙述•请在菜单栏点击“编辑”，然后出现编辑子菜单，再点击“全选”。•哪种更简洁？15测试文字•填空测验–从产品界面文字中选出长125——150字的内容片段–五个词之间留一个空–测试者补上缺失的词•结果分析：–若正确率小于40%，则重新撰写。–若高于60%，则可用。界面诊断——邮件管理17人的感知•视觉–80%的信息•听觉–仅次于视觉•触觉–不可低估，尤其对有能力缺陷的人，是至关重要的•其他感觉18视觉感知过程•受到外部刺激接收信息阶段–物理特性决定了人类无法看到某些事物•解释信息阶段–对不完全信息发挥一定的想象力–但也可能有错觉1920两种神经细胞21比较视干细胞视锥细胞在低水平照明时（如夜间）起作用在高水平照明时（如白天）起作用区别黑白445/535/575nm，综合对光谱中绿色最敏感，视网膜外围处最多对550nm黄绿最敏感，视网膜中部最多对极弱的刺激敏感主要在识别空间位置和要求敏锐地看物体时起作用22视角23视敏度（VisualAcuity）•人眼对细节的感知能力，通常用被辨别物体最小间距所对应的视角的倒数表示。•最佳状况：在6M处辨认出20毫米高的字母。•一般：辨认出40毫米高的字母。24亮度•增强亮度可以提高视敏度•亮度增加，闪烁感也会增强。–低于50Hz，视觉系统就会感到闪烁•在设计交互界面时，要考虑使用者对亮度和闪烁的感知，尽量避免使人疲劳的因素。25层次感：相对距离和深度•覆盖关系•大小比例•对物体的熟悉度–产生预期，影响对大小、远近的判断。26色散实验27色彩•人能感觉到不同的颜色，这是眼睛接受不同波长的光的结果。•色度、强度和饱和度。–正常的眼睛可感受到的光谱波长为390纳米-770纳米。–实际上，是不同锥细胞的综合感觉。28视锥细胞的“三原色”445nm接近蓝色535nm接近绿色575nm接近黄色29色觉抵消机制•七色板–色彩抵消，亮度不抵消。•颜色混合的原理–颜色是3组视信号的差异造成的。–红色+绿色=黄色–黄色+蓝色=白色–蓝色+红色=紫色•颜色对比现象30色相空间•色相，也称色调(Hue)–颜色的首要属性，借以用名称来区别红、黄、绿、蓝等各种颜色。•自我测评：你能分辨出多少种不同的色调？–人的眼睛可以分辨出约180种不同色相的颜色。•色轮：圆形的色图–牛顿经典棱镜实验的一部分–红、橙、黄、绿、蓝、紫–等量混合出相间色，成十二基本色相。31“三原色”(PrimaryColor)•小学时学过的基本原色：–“红黄产生橘黄色，黄色和蓝色变成绿色，蓝色和红色成为紫色”。–事实上，红，黄，蓝只能混合出一个较小的色域。•非原色标准的原色集合–橙，绿，紫：彩色摄影法Autochrome（1903）–C（Cyan，青），M（Magenta，品红）–Y（Yellow，黄）。我才能混合出广的色域呢！32“三原色”：加色与减色33三原色色轮红黄蓝间色SecondarycolorPrimarycolor第三色Tertiarycolor34连续的色轮35色轮：加色vs.减色RGBCMYK36两色搭配是用色的基础有了白色，红色更注目；有了红色，白色更干净。有了黑色，红色更热情；有了红色，黑色更庄重。无彩色：黑，白，灰红色：燃烧，燥热，刺眼白色：焦点37互补色•色轮上相对的颜色–红绿，蓝橙，黄紫–色彩之间强烈对比在高纯度的情况下，会引起色彩的颤动和不稳定感，正式设计中比较少见。–一种做主色，另一种做小范围强调色。38三色组•彼此等距的三种颜色–红、黄、蓝–紫、橙、绿–比较协调–但一定要选出一种色彩作为主色，另外两种作为辅助色。39分裂互补三色组•互补色两侧的颜色–对比依然非常强烈–不会像互补色搭配那样产生颤抖和不安的感觉。–对初学者来说，这是种非常好用的搭配。40类似色•彼此相邻的颜色–近似色搭配常常在自然中被找到，所以对眼睛来说，是最舒适的搭配方式。颜色+灰色=亮度。41配色器42亮色和暗色•Brightness(Value)•亮色–向纯色增加白色•暗色–向纯色增加黑色暗色亮色HSV模型:色调饱和度亮度•画家:加白色改变颜色浓度加黑色改变颜色深度44纯度和方形调色板•纯度–颜色鲜艳度、饱和度。–保持亮度相同时，颜色相对灰色的所占比例。•HSV模型–用户颜色模型，A.R.Smith在1978年创建。–HueSaturationValue•方形调色板–横看亮度不变–竖看纯度不变45亮度界面高亮度雅致刺激少46亮色和暗色：改进界面•色质–明暗度、深浅度或色调。•色质过于接近时–影响界面对比度。•加强色质差别–加强明暗对比–使用阴影47高纯度设计•强烈艳丽•对视觉刺激是迅速的，醒目的效果•不易于长时间的观看48界面色调理论•界面色调：–界面中色彩总的趋向。•主色调–主要色调，其他配色不能超过该主要色调的视觉面积。•辅色调–仅次与主色调的视觉面积，烘托、融合主色调。•点睛色–在小范围内点上强烈的颜色来突出主题效果，使界面更加鲜明生动。49动动脑50颜色心理学•暖色–红、黄–眼睛更敏感，点缀–RGB配色中用于给颜色“加热”•冷色–蓝–大块使用才有效果–配色中给颜色“降温”51从图片中提取色调52动起来•myPantone–取色配色软件•GIMP/美图秀秀/mypaint–图片处理软件•实践作业：–上网找出10个你最喜欢的海报、PPT、网站，指出它们分别采用了怎样的配色设计。53视错觉•人们总会夸大水平线而缩短垂直线。•影响到显示页面的对称性。•人们经常把对称页面的中心看得稍微偏上些。–如果页面以实际中心为基准排版设计，人们就会感到页面上部比下部分要短，影响视觉效果。54黄金分割之美•植物叶子中的黄金分割55黄金分割的设计•著名画作《最后的晚餐》56黄金分割的设计•LOGO和界面设计57黄金分割实践•移动网页设计和电脑网页设计5859版式设计一般原则•亲密性–彼此相关的项应当形成一个视觉单元，实现组织性。•对齐–每个元素都应与页面上另一个元素有某种视觉联系。•重复–统一并增强视觉效果。•对比–避免页面上元素太过相似。60亲密性•分类整理，得到一个清晰明了的结构。•页面留白设计6162“亲密性”原则的根本目的•实现组织性。更容易阅读和记忆，使空白更美观。63实现方法如何实现眯起眼睛，统计眼睛停顿的次数，控制在不超过3-5个；要点不要仅仅因为有空白就把元素放在角落或者中央；不要在元素之间留同样大小空白，除非属同一子集；在有很近亲密性的元素间建立关系；不属于一组的元素要分开。‘64对齐•前面主要体现差异性，对齐则体现统一性。65灵活的对齐•特别之处66表单对齐67表单对齐68实现方法•每个元素都能找到与之对齐的元素。–左对齐、右对齐、居中对齐、两端对齐–两端对齐：每行长度一致–可以试着有意识的去打破这个规则•要避免的问题–不要用混合对齐，就是用了右对齐就别用居中了。–居中对齐可能导致视线的跳跃性太大。他是源自欧洲的百年品牌他起步于纯粹的机械工业他的血液里融会了关爱与责任他饱经磨砺却风采依旧他没有大多数后起之辈的张扬与高调，却有着自己独特的稳重与深邃他的历史也是汽车制造业的历史这——就是Skoda……6月6月1日6月10日6月15日6月20日6月30日2011年度新生篮球赛2011研究生篮球对抗赛篮球校队集训教师运动会多人多足竞走比赛体育部户外拓展运动国家电网在建项目》建设项目•四基地两中心•800千伏特高压直流输电工程•660Kv直流输电工程》运行项目•800千伏高压直流电示范工程•特高压交流试验示范工程•输变电示范工程》计划项目•500千伏输变电工程•特高压交流输电示范工程•500千伏输变电工程项目促销策略—事件营销互联网软文，微博，视频配合震区模拟演习提供产品免费试用共青团委，教育局整合事件营销电台热线问答+微访谈+优惠促销合作单位新闻报道推广传统媒体73重复原则•提高整体一致性。这是同一本书的两页吗？74实践技巧•重复的对象–字体、字号、颜色、形状、图案、版式等。•如何开始–背景中创造一个图案然后重复应用–重要信息处使用重复的元素，以引导观众视线•高度的一致性很有可能会呆板无趣。–同样的字体及字号，可以使用不同的颜色；同样的形状，可以使用不同的大小。75动动脑•有使用重复吗？76一致的网站标志和导航栏‘它们可以说是最体现网站特征的部分。应该对LOGO的颜色、大小、位置等方面都有严格的说明。如果一个网站里面每个网页的LOGO都大小不同，或者位置不统一，或者导航栏在某些页面突然多出两个子选项，给浏览者的感觉一定很不好。77一致的页面布局这可以说是一种“包装”。如果某些页面的等级是一致的，那么它们的“包装”风格也应是一致的，用户应该使用同样的浏览方式来阅读这些网页。‘78一致，但不要高度一致‘79实践思路•可不可以专门做一个图片设计，并且将某些一致元素（如标题）作为这个图片设计的一部分？•在每个页面底部或每个标题下面使用一条粗细为1点的线吗？或者是不是使用一条更粗的线（4点），使重复元素显得更明显，更生动？•有没有可能增加一些纯粹为建立重复而设计的元素。是不是有一个编号项列表？可不可以使用另外一种字体或逆序数字，然后对出版物中的每一个编号列表都重复同样的处理？80对比原则•增强页面的效果和组织性–平静的海面上有个小岛之类的，吸引住视觉焦点。–对比要强烈！字号、加粗、空间、颜色。81版式设计小结•不要害