网页界面设计要点-5-图形与按钮

《网页界面设计要点-5-图形与按钮》由会员分享，可在线阅读，更多相关《网页界面设计要点-5-图形与按钮（29页珍藏版）》请在金锄头文库上搜索。

1、网页界面设计要点 BIZ BI 魏 凌 2013年9月 视觉篇 1-界面布局 2-色彩搭配 3-分隔类型 功能篇 导航 条件选择 信息提示 表单 表格 图形 按钮 目目 录录 格式简单明了 前后连贯 功能篇功能篇 6 6- -图形图形 图形的作用与关键因素图形的作用与关键因素 图形的作用 迅速传达信息 直接关注重点 更明确地显示其相互关系 使信息的表达鲜明生动 好图形的几个关键因素 每张图都明确 表达一个信息 图形与标题、表格 相辅相成 清晰易懂 少而精 功能篇功能篇 6 6- -图形图形 总述总述 图形分类图形分类 数据类图表 概念类图表 数值？ 人员? 地点？ 时间？ 饼图 表格 组织架构

2、图 条形图 甘特图 地图 线性图 柱形图 流程图 散点图 矩阵 概念 功能篇功能篇 6 6- -图形图形 总述总述 你所想的决定你所取的你所想的决定你所取的 功能篇功能篇 6 6- -图形图形 总述总述 图形的类型由需要表达的形式决定图形的类型由需要表达的形式决定 公司A 公司B 北部 13% 39% 南部 35% 6% 东部 27% 27% 西部 25% 28% 1月份每个地区的销售百分比 功能篇功能篇 6 6- -图形图形 关系表达关系表达 分析方法中关系表达类型分析方法中关系表达类型 类型 具体含义 关键词 举例 成分相对 关系 各部分占总体的 百分比 份额，百分比，以及 预计达到百分比

3、 在5月份，A产品预计占到公司总销售额的最大份额； 2005年市场份额少于行业10% 项目项目 关系 不同元素的排序 大于，小于或者大致 相当 在5月份，A产品的销售额相当于B、C消费额之和 销售额中顾客的回报排名第四 时间序列 关系 一定时间的变化 变化、增长、提高、 下降、减少、下跌和 上下波动 从1月以来销售额稳定增长 投资回报在过去的5年急剧下跌 利率在过去的7季度里起伏不定 频率分布 关系 各数值范围内各 包含了多少项目 从X到Y，集中，频 率与分布 在5月，大多数地区的销售额在100万到200万之间； 我司员工年龄分布与竞争对手相比很大不同 相关性 关系 两个变量之间的 关系 与有

4、关；随而增 长，随而下降， 随而改变 5月份销售业绩显示销售业绩与销售员的经验没有关 系； CEO的薪水并不随着公司规模的变化而改变 功能篇功能篇 6 6- -图形图形 关系表达关系表达 关系表达类型与图形对应关系表达类型与图形对应 成分成分 项项目目 时间时间序列序列 频频率分布率分布 相相关关性性 饼图饼图 条条形形图图 柱形柱形图图 折折线图线图 散点散点图图 这些加起来基本上占应图形应用的90%，剩下的10%是其它或综合运用。其它如雷达图、矩阵图等；综合的如线形图表加上柱形图表，或饼形图表加上条形图表等等。 功能篇功能篇 6 6- -图形图形 图形的应用的常见问题及解决方案图形的应用的

5、常见问题及解决方案 综述综述1 1 在进行分析界面设计的时候选择图形应用中会有一些常见的问题，例如： 图形类型选择不合适，图形类型选择不合适，这个算最常见的问题了，如下图： 数据标识不清，光看图无法理解数据数据标识不清，光看图无法理解数据 标题缺失 数据缺失 数据单位缺失 指标说明缺失 维度值缺失 功能篇功能篇 6 6- -图形图形 图形的应用的常见问题及解决方案图形的应用的常见问题及解决方案 综述综述2 2 图形指标过多图形指标过多 例如： 图形具备误导性图形具备误导性 图形比例与数据不吻合 多指标时对应和理解困难 同一主题下图形类型过多同一主题下图形类型过多 风格多样，如2D与3D共存 使

6、用过多图形类型，并且同一 种数据在不同页面使用不同类 型 不同图形中相同数据色彩表 达差异大 功能篇功能篇 6 6- -图形图形 图形的应用的范围及注意事项图形的应用的范围及注意事项 折线图折线图1 1 折线图在分析系统里是非常常见的，主要用于时间序列、频率分布等，如一些趋势图、对比、 分布等等，如： 折线图在使用过程中需要注意以下几点 1、折线线条要足够粗，明显粗过所有非数据元素 2、折线不能太多，否则易凌乱，过多时考虑分开作图； 3、折线的起点应从Y轴开始，而不是留下一段距离； 4、折线图的Y轴可以从非0开始，但要标上截断标识； 5、可不使用图例，直接在合适的位置对折线进行标识，减少目光检

7、索； 6、折线图不能用于分类数据的比较。 时 间 分 布频 率 分 布功能篇功能篇 6 6- -图形图形 图形的应用的范围及注意事项图形的应用的范围及注意事项 折线图折线图2 2 拆线图容易犯的一个错误是刻度的设置问题，例如： 上两张图是表达同样的信息，但因为刻度设计刻度设计的不同，给人带来不同的感觉。 图中数据的值对于演示来说并不重要，但是不合适的刻度尺将造成误解甚至错误，产生不 真实的信息，所以在进行图形刻度设计的时候，需要了解数据的业务特点来进行刻度设计。 价格平稳还是不平稳？ 功能篇功能篇 6 6- -图形图形 图形的应用的范围及注意事项图形的应用的范围及注意事项 折线图折线图3 3

8、如果遇到拆线过多的情况，会干扰用户的信息理解和判断，例如： 在条件允许的情况下，建议对这类折线图进行分组，或是在系统中提供指标选 择功能，让用户可以选择自己需要对比的指标。 功能篇功能篇 6 6- -图形图形 图形的应用的范围及注意事项图形的应用的范围及注意事项 条形图条形图 先来看看条形图的多样性 条形图需要注意以下问题 1、条形图数据最好进行排序（有特 定顺序要求的除外），让最长的条 形在最上面或最下面； 2、分类标签特别长时，可考虑放在 条与条之间的空白处； 3、当有负数时，避免条形图与分类 轴标签覆盖。 4、划分条形的空间要小于条形的宽 度，对需要强调的地方使用对比性 很强的颜色或阴影

9、，以便强调主题。 功能篇功能篇 6 6- -图形图形 图形的应用的范围及注意事项图形的应用的范围及注意事项 柱形图柱形图1 1 背景柱状图表：背景柱状图表：将盈利年代与 亏损年代鲜明地区分开来。 范围柱状图表：范围柱状图表：表明低数值与 高数值之间的一段时间特点， 如股市的气压式表现。 分组柱状图表分组柱状图表：一个柱体与另 一个柱体相互重合，比较在某 个时间两个项类的情况以及它 们之间随时间变化的关系，例 如，美元因通货膨胀的贬值。 细分柱状图表：细分柱状图表：表明各成分相对于总数 随时间变化的关系例如菥水加上奖金构 成的薪酬。 连续柱状图表：连续柱状图表：是指在柱体之间没有间 隙，它用于表

10、明数据在观测区间的急速 变化，如人员上限或生产能力利用系数。 柱形图的主要类型 功能篇功能篇 6 6- -图形图形 图形的应用的范围及注意事项图形的应用的范围及注意事项 柱形图柱形图2 2 柱形图主要是来表达时间序列和频度分布的，和折线图有重叠，我们来看看使 用建议： 如果图表只有少数的几个点（7个以内）使用柱形图图；否则建议折线图； 柱形图强调的数量级别，适合小段时间发生事件； 折线图强调的是角度的运动和图像的变化。 柱状图注重程度和数量，适合在一个时间段内的活动数据，每一个阶段都是一个新的柱体。线形图表侧重变化和变化趋势，因此在表达数据的发展状况时宜用线形图表。 柱形图使用过程中需要注意的

11、事项如下： 数据系列和数据点均不能过多，否则应考虑其他图表类型或分解作图； 比较分类项目时，若分类标签文字过长导致重叠或倾斜，应改为条形图； Y轴刻度必须从0开始，除非为了隐瞒真相、误导读者； 同一数据系列的柱体不应使用不同颜色。 功能篇功能篇 6 6- -图形图形 图形的应用的范围及注意事项图形的应用的范围及注意事项 饼图饼图 饼图适合表达成分对比关系，因为一个圆圈可以给人一个整体的印象。需要注 意的是： 饼图仅仅适合仅仅适合表示一个整体，以及它的每个部分占这个整体的百分比。 饼图在表明单一整体的各部分比例的作用时比条形和柱状图管用，但是，当你需要比较两个整体的成分时，不要犹豫，选择条形图和

12、柱状图表。 饼图使用过程中需要注意的事项如下： 为了使饼图表发挥最大的效用，你在使用中一般不宜超过6个部分，如果有6个以上，应选择最有代表性的6个部分，把剩下的成分归为其它。 由于眼睛习惯于顺时针方向看东西，所以你需要把最重要的内容放在12点的位置附近，并且用对比强烈的颜色来突出显示。 如果指标顺序没有强行指定的话，建议饼图从12点顺时针开始按指标大小排序进行展示。 采用明显不违和的边框线，产生很好的切割感。 分布及指标大小： 可以直观的展示指标大小 功能篇功能篇 6 6- -图形图形 图形的应用的范围及注意事项图形的应用的范围及注意事项 散点图散点图 相关性分析： 比对指标是否有关系 散点图

13、单个来说，主要是表示分布关系，适用于较多指标的分布，比方大于7 个指标等。散点图目前在具体应用中，有很多组合关系和扩展，如： 分布情况： 体现分布的密度、范围等 散点图在使用过程中主要注意几点：散点图在使用过程中主要注意几点： 1、散点的边界清晰，避免展示的时候变成直接连成一片，如果无法区分边界，建议重叠多的 地方用颜色加深表示 2、分布个数太小的不适宜使用散点图，界面会过于空洞，可以改成柱状或条状图。 功能篇功能篇 6 6- -图形图形 总结总结 在网页设计过程中，针对分析界面，很多同学都喜欢加入不同的图形，这样能 让界面显得丰富亮丽，但是需要注意的是，在分析系统中，数据一定是主角， 图形只

14、是辅助作用，所以我们在设计的时候一定要理解用户需要什么，希望从 哪些角度来发现问题，才能够确定用什么样的辅助手段。 讨论：两个系统首页哪个更好？ 视觉篇 1-界面布局 2-色彩搭配 3-分隔类型 功能篇 导航 条件选择 信息提示 表单 表格 图形 按钮 目目 录录 功能篇功能篇 7 7- -按钮按钮 综述综述 按钮是界面中接受用户点击行为的部件。按钮需要用户进行操作，通常都会完 成一个事件，并产生反馈，比方跳转到新页面，弹出新窗口或者反馈窗口等。 常用的按钮包括 确认、取消、注册、登录、购买 等，由于这些按钮的点击行 为都是用户完成一项任务或需要引导用户行为的重要步骤，因此按钮的位置， 可点击

15、的范围、文字描述、阴影等视觉效果都是触发用户点击的重要元素，特 别是对于电商类网页，最好能够达到“点击暗示”的效果。 功能篇功能篇 7 7- -按钮按钮 如何增加按钮的点击率如何增加按钮的点击率1 1 按钮需要具备 诱惑性 ：对于涉及到注册率、购买量等的按钮，如购买、注册 和搜索等，增加按钮的点击率，便其具有诱惑性是设计中的要点。 尽管按钮的具体设计面要根据具体情况确定，但总体上宗旨在于突出按钮的位 置，使其处于可点击的状态，并具能够诱导用户去点击。 我们来看一些购物网站的购物按钮 可以看出，几乎所有按钮都采用了色彩比较饱和的红、蓝、黑、绿色等，并且 都比较突出按钮的形状 再来看一下几个电商网站的购物按钮 淘宝： 天猫： 苏宁： 京东： 对比几个网站，按钮共性如下： 按钮醒目，饱和度高，对页面对比度强 文字简洁清晰，以动词为主，具备诱惑力与行动力 较大按钮尺寸，让用户容易发现和使用 功能篇功能篇 7 7- -按钮按钮 如何增加按钮的点击率如何增加按钮的点击率2 2 当当： 亚马逊： 拍拍： 功能篇功