星盘优化总结

前言

设计对产品的驱动,主要围绕的用户,产品,效率。用户方面是要分析其需求,产品方面是优化功和能提升产品体验,效率就提升工作效率。所以此次的星盘的优化迭代,在用户已经确定的情况下,主要从产品和效率方面来优化。

  1. 首先要了解其产品的功能及用户群体
  2. 其次要分析其存在的问题
  3. 最后是解决存在的问题

 

产品功能及用户

 

星盘用户

主要是用户户是公司内部卖产品的员工,向其展示产品的销售数据,用户情况等销售的数据总结分析梳理,这样可以更加了解其产品业务的销售和用户的情况。

 

数据图表类型

页面主要以数据图表为主,于是乎就涉及到数据的可视化和图表设计的问题。

数据可视化的目的是让数据说话,让复杂抽象的数据以视觉的形式更准确快速的传达。其中管理系统尤其以图表设计作为数据可视化。直观,清晰,准确是衡量数据可视化的主要指标;

图表的主要分类有柱状图,条形图,折线图,饼图,圆环图等。数据可视化专家阿贝拉发布发布图表与数据关系的四种关系:对比,构成,分布,关联。

~~数据关系与之相应图表~~

 

交互的工作在于数据的收集以及筛选,以及合适的图表表现其数据;视觉的任务是优化图表的表现及色彩搭配。


~~图表设计的主要流程~~

 

存在的问题

1.新旧页面不统一

由于第一版只修改新需求的页面。然后没涉及到的旧页面由于没调整,导致同一个产品,不同模块的视觉和体验差异好大。

 

2.视觉不规范

导致选择控件的样式很多,以及整体框架的结构不规范;同类按钮在不同结构下的的位置及方式都有差异。导致视觉和交互的不统一。

 

3.色彩太过单一

由于整体是蓝色的为主,但单色调用的太多。整体的层级就突不出来,就没有重点了。还有就是整体的视觉风格就比较素。使用需要加些辅助色,提升和丰富页面的层次。

 

4.页自屏幕适配问题

由于页面么做好,自适应问题。导致不同屏幕尺寸下,差异比较大。在小屏幕分辨率的时候,页面都挤在一起。

 

优化改版

针对以上问题,归纳起来:制定视觉规范,调整页面保持统一性;添加点辅色,提升页面的丰富度;屏幕自适应问题,确定解决方案;

确定配色

在保持蓝色为主色调前提下,选择以邻近色的配色(绿色和紫色),色调统一和谐。整体偏冷色调,页面会显的更干净,更会突出数据图表。

 

由于渐变的设计趋势,渐变色的使用会使页面看起来不那么乏味,特别是这种后台管理的网站没有图片全身数值图表,加点渐变会让人印象深刻。
首页banner尝试用渐变色来做;然后css3支持渐变背景色使用,有点事不用切图避免了不同屏幕的锯齿问题;

渐变的好处:
* 渐变令人印象深刻
* 渐变是独一无二的
* 渐变给人真实的感觉
* 渐变俏皮,也更加丰富多彩

参考文章:Are Gradients The New Colors?

雅虎邮箱

前端代码(一种写法):
background: linear-gradient(to right, rgb(192, 36, 37), rgb(240, 203, 53))

渐变网站 ,代码效果如图下图

 

图表色彩选择

在图表的颜色运用上,色彩是最直接的信息表达的方式,图形和文字更加直观的传递信息,不同颜色的的组合也能体现数据的逻辑关系;
当图表需要的颜色较多时,建议最多不超过12种色相。通常情况下人在不连续的区域内可以分辨6〜12种不同色相。过多的颜色对传达数据是没有作用的,反而会让人产生迷惑如何让多种色相的颜色看来和谐有几种取色的方法?

图表的配色准则是易辨识与区分;对于单色的来讲,明度的跨度一定要够大才能更清晰的展示数据。明度跨度是否合适,可以通过在灰度模式下配色的辨识度来判断。
~~安卓规范里面的色彩对比明度~~

由于理论的色彩取值,可以并非是最佳的;可能与我们看到的自然有偏差。列如如下图:
从从淡黄色到深紫色应该与浅紫色过渡到深黄色转变大致相似。但正如我们在下面看到的,前者感觉自然,后者则不那么自然。

原因是我们在明亮的日落中看到明亮的黄色转变成深紫色,但是地球上没有地方可以看到一个浅紫色转变成深棕黄色。
相似的还有浅绿色到蓝紫色,淡枯黄色至暗绿色,橙褐色的冷灰色等等;

因为我们总是看到这些自然渐变,当我们在可视化中看到对应的调色板时,它们会感到熟悉和愉快。

可以在Photoshop中制作出色相变化的色带 再叠加明度渐变的色带,获得明度和色相均变化的色带。然后根据数据的数量,拉辅助线到取色点的位置,从断点处选取颜色,对渐变进行测试与调整,选取最优的配色。

 

选择同一饱和度和明度的不同色调作为可视化图表的配色,这样可以使图表看起来协调统一。

参考文章
(配色资源网站ColorHunt,ColorSchemer, Flat UI Colors,Material Design Colors,Adobe color)

整理设计规范

由于存在旧页面但是不在需求之内的,为了权衡产品的时间,设计的重复以及用户的体验;制定一套规范,让开发快速替换基本的控件和模板,显得是很有必要的一件事;

针对不同工作角色,制定规范大概有一下几点好处:

  1. 设计师内部提高工作效率,方便不同设计师的协同工作保持交互和视觉的一致,不重复设计;
  2. 打磨产品和设计的细节体验,开发来其快速其页面布局,控件及其微交互的开发。
  3. 确保平台设计的统一性;

规范的内容,依据不同平台及产品的复杂层度,有些不同;大概如下图这么多;根据不同产品复杂程度,可以补充;
参考文章

屏幕适配

为了确保用户的在不同分辨率下,有个好的浏览和操作的效果;我们需要针对用户回遇到的屏幕过大和过下的问题,做个适配;

调查发现:用户是公司内部员工,使用公司笔记本为主;
所有以公司笔记本的分辨率为设计的尺寸(1366*768),做为最小宽度;通过模块化的设计,和固定间距的效果,在大的分辨率下让其内容区域的变大来适配

响应式分类(可以多种方式结合):

  1. 瀑布流布局
  2. 等比缩放
  3. 设置断点

4.设置最大/最小宽度

参考文章
响应式页面集合

 

#

11/08/2017