12530网站设计指导原则研究目标及建议教案解析.pptVIP

2008年12月 门户总体指标 门户运营 2007年 2008年 08年增长 交易量（万次） 17 50 195% 其中:WWW（万次） 7 15 100％ 其中:WAP（万次） 10 25 150% 其中:IVR（万次） 0 10 ——互联网/WAP门户 优化音乐业务流程 提供丰富的服务 关键频道建设 互动社区建设 ——IVR门户 音乐语言搜索服务 音乐服务呼叫中心 …… 音乐IVR渠道代码 ——彩信门户 无线音乐手机报 ——短信门户 音乐搜索 短信渠道 门户的整合与互动 设计指导原则介绍 什么是设计指导原则？ 设计指导原则指适用于WEB产品线的人机交互界面设计方面的指导手册。贯穿以用户为中心的设计指导方向，根据大道信通长期测试运营的特点总结的一些规则，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。并且加入了实用的案例分析，以及综合了设计师们的设计技巧，这样可以帮助网站更快的理解和应用这些通用原则。 谁去读设计指导原则？ 适合界面设计师，用户体验设计师，前台技术工程师，运营人员。 目录 一致性原则 模块原则 能辨度原则 图标 图片优势效应 对齐 12530建议 一致性原则 相同的部分用相同的方法表达时，系统的使用性得到了改进。一致使人们得以把知识有效的迁移到新的环境中，迅速学习新事物，把注意力集中在人物的有关方面。 审美一致 指风格和外观一致。（如使用一致的字体、色彩、图案）审美一致增强识别度，传递成员信息，引发情感期待。 功能一致 指意义和行为的一致。功能一致影响人们关于设计功能的现有知识，提高适用性和易学性。 内部一致 指系统内的其他组成部分保持一致。内部一致建立起与人的信息，表明一个系统是经过精心设计，而不是随便拼凑的。 外部一致 与环境中的其他部分保持一致。外部一致把内部一致的好处延伸到多个独立的系统，比内部系统更难做到，原因是不同的系统很少遵循共同的设计标准。 一致性原则-- 审美一致图示1 apple的网页、工业产品设计，都具有审美的一致性，通过视觉呈现将公司的理念与产品容为一体。yahoo、sony、IBM、HP等也都具有很好的一致性。Google、百度各产品页面都遵循简单的设计风格。 一致性原则-- 审美一致图示2 全球性统一一致 一致性原则-- 审美一致图示3 将logo中的色彩元素运用到页面设计中，加强了视觉元素的统一，提高了品牌的识别性。 一致性原则-- 功能性图示一致 Iphone中的icon设计与其表达的含义保持一致。 一致性原则-- 内部一致图示 同一产品的弹出窗口或浮动层样式应保持一致 一致性原则-- 外部一致图示 不同的频道页保持一致的设计风格,并且保持了各自频道区别于其他频道的颜色。 组块原则 一种把许多单元的信息组合成数量有限的单元或块、方便信息的处理和记忆的技巧。 “块”这个术语指短期记忆中的一个单元的信息---一串字母、一个单词或者一组数字。组块之一技巧通过把信息编成几个小单元寻求解决短期记忆限制。短期记忆能够有效处理的“块”的最大数量是四加一或减一。 组块原则图示1 组块原则图示2 新闻列表页有多条的话，最好以8－10条为一组，进行视觉区块分割 能辨度原则 文本视觉上的清晰度，通常依赖于所用字符的大小、字体、对比度、文本块和间距 大小 字体 对比度 在浅色背景中使用黑色字体，或在黑色背景中使用浅色字体。文字和背景的对比度超过70%时，效果最佳。只要注意最低对比度，前景与背景颜色的结合通常不影响能辨度。图案背景和纹理背景会大幅度降低能辨度，因此应避免使用。 文本块 间距 合适的行间距可增强阅读的舒适性。 能辨度图示 图标原则 使用形象化图片提高对符号和控制装置的识别 相似图标 使用在视觉上与动作、物件或概念相似的图案。交通图标：右转、左转、掉头 体例图标 是使用作为例证的图像或使用通常能与动作、物件或概念产生联想的事物的图案。机场指示牌：餐馆、电话亭 象征图标 是使用比较抽象层次的动作、物体或概念的图案。 纸箱盒上：易碎衣物上：机洗、手洗等 任意图标 是使用与动作、物体或概念很少或没有关系的图案-也就是说它们之间的关系必须靠学习才能获得。性别：女性、男性 图标图示 设计技巧：样式简单，表意清晰，小图标（20px以内）多采用像素形式，优点是边缘清晰，适应所有背景色，避免页面中同时出现大量功能性图标和装饰性图标 ?功能性图标设计时注意提升其点击感 图片优势效应原则 图片比文字记忆更深刻，更具有视觉冲击 一张图抵得上千言万语。尽管既有图片又有文字要比光有文字或图片记忆深刻，但图片一般要比文字更易牢记、更易识别。 同时使用图片和文字以确保同样的信息能达到最佳的效果，提高重要信息的可识别性和记忆效率。 相互冲突的图片