读取进度条设计的好坏直接影响着App的用户体验，因为它可以合理的疏导用户等待的焦虑情绪，通过一种有趣的美学体现程序运行的进度，这样用户就能稍微安心。

调查表明，用户需要进度指示器，尤其是当处理不同的应用程序时。因此，完全的理解进度指示条的趋势对我们来说至关重要。

进度条是多媒体播放器的基本组件，能够允许用户控制媒体播放的进度与流程，快进，或者快退。进度条的图形表现力非常重要，目的就是为了提高用户的趣味性，与此同时构造更好的人机交互界面。

在本文中，我们收集了一些美妙的手机App进度条案例，具有不同的风格和特性。下面我们来一起欣赏吧：）

Smart washer app UI by Hyelim Choi 具有强烈的模糊效果，为的是提炼背景的质感，轻微的透明感，白色的纯洁性，稍微加入了一点粉色，给整个App以热情、女性化的感觉。

dB-METER by Miguel Pires. 高亮的中心，临摹的仪表，非常好的打破了用户的无聊等待时间。精妙的线条韵律以及完美的细节处理让整个UI看起来很精致。

Charging Animation by Corey Lui看起来既整洁又引人注意，具有可爱的写实风格。 绿色的震动的动效用来阐明程序的进度，吸引了用户的注意力，分散了等待的焦虑。

iOS7 design practice by Muhammad Farhan 纯净的感觉，采用了Flat风格的设计，使用了平化的图像，精巧的色调，纤细的字体。硕大的圆环轨道条占据了整个界面的中央，让数据看起来非常的卓越不凡。

软件在提高专业人士办公效率的同时，也降低了许多创作型工作的门槛。比如由 FiftyThree 推出的Paper，它甚至可以帮助没有美术功底的人，通过 Paper 来有效且直观的沟通设计想法。

同 Paper 类似，由苹果及 IDEO 前包装设计师 Distler 推出的这款Context (只有 Mac 版) 也想提高设计师的工作效率，同时降低设计的门槛，让普通如你我的人过一把设计海报、书皮的瘾。

简单来说，通过 Context，你可以实时查看你所设计的图案在酒瓶、徽章、巨幅海报、各种不同材质纸张和现实背景下最终呈现的样子，且可 3D 查看。这样做的好处就是，设计师再也不用等样品制作出来，才能判断自己的方案是否真的可行了，即提率节省时间，也能节约成本 (演示视频如下)。

Context 背后同时使用了 3D、2.5D 和 2D 技术，帮助用户实时多方位、更直观的感受自己的作品。而相较一切需要从头开始的 Photoshop，Context 提供了很多表面材质和物件供用户任意搭配选择，节约了大量搭建背景的时间。

网页设计中，切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小，节省下载时间、有效的减少服务器的负担。

以设计师最常用的 Photoshop 以及 Illustrator 为例，都提供了「储存为网页用…」的功能。与默认的存盘模式不同，在这个模式中，软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项：

相信许多人都知道网页设计中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非所有的人都知道他们之前的实际差别跟到底何时该选择何种格式。经常发生的情况是，选择 GIF 后的输出结果看起来变得很糟，于是 PNG （24）似乎突然间风行了起来，不论图档尺寸是不是因此多了好几倍。

JPEG

由于旧型计算机系统以及文件系统的限制，计算机档案文件名与扩展名被规定为 8.3 的格式，因此 JPEG 的附档名被缩写为 .JPG。JPEG可以说是人们最熟悉的图档格式了，相信在数字相机普及的现在，几乎每台数字相机、照相手机都可以（甚至只能）输出 JPEG 格式的图档。JPEG是一种很典型的使用破坏性压缩（lossy compression）的图档格式，也就是说使用者每次进行 JPEG 的存档动作后，图档的内容都会遭到破坏，这个特性在肉眼辨识下并不明显，但却可以有效的降低图档的档案大小。

这是Suyee同学的一篇老文章了，而分享总结的经验还是很值得大家思考，千万不要养成旧文就不读不看不想不练的习惯，这只会禁锢双手，麻痹大脑。
收藏再多新文章，却不去看，还有何意义呢？

开篇啰嗦了一下，但这的确是很多同学们需要改正的坏习惯。2013年就要过去了，回首看看，今年你在思想认知、设计手法、团队协作、沟通演讲上有了哪些进步。

相关阅读：
思想认知：《电线杆上的用户体验设计》
设计手法：《设计要出彩？来看八大创意理论应用篇》
团队协作：《团队合作中用photoshop时应该注意什么》
沟通演讲：《写给设计师：如何与工程师一起工作》

好咯，进入正文：随着开放平台日益增多，衍生出来的各类应用服务也就呈不断增长的趋势。这些应用服务的站点设计也可谓是五彩斑斓，灿若繁星。我们可以来找找这些网站的设计是否有规律可循。

可以从几个方面来分析:

色彩

Amoderneden

从它的整体色彩配图元素构建等不难看出，这是一个关于儿童教育有关的网站，推的就是寓教于乐的产品服务。

Paraply

他们为用户的当前位置提供降雨预报服务。忧郁的蓝色预示着雨雪的降临，与雨伞保护感强烈的红色相对比显得相得益彰。

@亲爱的葱 数据可视化在当前是一个热门话题，旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着，数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。

然而，设计人员往往并不能很好地把握设计与功能之间的平衡，从而创造出华而不实的数据可视化形式，无法达到其主要目的，也就是传达与沟通信息。

如今学习应用数据可视化的渠道有很多，你可以跟踪一些专家博客，但更重要的一点是实践/实操，你必须对目前可用的数据可视化工具有个大致了解。以下是Netmagzine列举的二十大数据可视化工具，无论你是准备制作简单的图表还是复杂的图谱或者信息图，这些工具都能满足你的需要。更加美妙的是，这些工具大多免费。

第一部分：入门级工具

1.Excel

Excel的图形化功能并不强大，但Excel是分析数据的理想工具，上图是Excel生成的热力地图

作为一个入门级工具，Excel是快速分析数据的理想工具，也能创建供内部使用的数据图，但是Excel在颜色、线条和样式上可选择的范围有限，这也意味着用Excel很难制作出能符合专业出版物和网站需要的数据图。但是作为一个的内部沟通工具，Excel应当是你百宝箱中必备的工具之一。

这是一个读图的时代，浮躁的人们或许对超过150个的文字都读不下去，所以，信息图应运而生，搭配上优秀而又吸引人的图片，再加上一小段精炼的文字，足够吸引人而又不至于耽误太多的时间,在阅读一张张精彩的信息图之余，我们也常常会产生制作属于自己的精美信息图的冲动，只是往往是心有余而力不足.不过还好，有众多提供在线制作信息图的工具,比如creately就是其中的佼佼者。

什么是信息图(Infographics)

根据维基百科的解释:
信息图形（Information graphics），又称为信息图（Infographics），是指数据、信息或知识的可视化表现形式。信息图形主要应用于必须要有一个清楚准确的解释或表达甚为复杂且大量的信息，例如在各式各样的文件档案上、各个地图及标志、新闻或教程文件，表现出的设计是化繁为简。公元1958年，Stephen Toulmin提出了一种图形化的理论模型，后来成为有影响力的理论及其应用。

制作信息图的目的在于用图像的形式表现需要传达的数据、信息和知识。信息图示中的元素未必要和所表达的信息在语义上一致，但是必须达到向受众清晰传达正确信息的标准,这里介绍几个知名的提供信息图的网站

确保工作区整洁有序

合理的图层排序和分组便于设计师理解所有元素的对应位置。把它比作一个生产车间，要是你把所有的工具到处扔，害得你的工头什么都找不到，你还有好日子过么？

同一对象的多个图层归入一个文件夹

这是一条重要的规则。图层归组让你的图层变得有序，你不需要单独为每一个图层命名，只要命名组就行了。
例如：如果一个按钮由按钮图标和说明文字组成，那么应该把它们归入一个”按钮”的文件夹；菜单本身是一个一组一组的按钮对，归入一个”菜单”组，并且所有背景层也将归入”背景”这个文件夹。

原则就是：文件夹分组在逻辑上应该符合你的布局结构。

如果一个对象包含几个图层，就应该把它们归入一个文件夹

新幻灯的版本为34/1，修改日期11月27

通常我们会把好几个不同版本的元素放在一个文件里，像同一个按钮不同的背景。

但为了避免忘记这一撮奇怪的隐藏图层其实是同一个背景的不同版本，最好还是好好给他们归组。最简单的办法就是创建一个”背景”文件夹，把所有的版本背景都放到里面。但更理想的方法是复制整个”按钮”文件夹并根据不同的版本命一样的名。这样就可以很清楚地知道这是一个按钮的3个不同版本。

这样分组，你的同事就能理解这些按钮是三个版本

这里收录的100句有关设计的事情，似乎更像是设计经典语录，它们之中肯定会有一句能够让您共鸣，甚至大彻大悟。

好吧，美妙的句子很多，开门见山，就让我们迅速开始吧。

零：项目背景

百度网盟推广平台是配合网盟推广用户的在线营销平台，推广客户可以在平台上实现全方位的推广管理，包括搭建账户结构、配置预算、定向方式、监控账户投放效果等等复杂的账户操作。但是由于系统的复杂度和功能性的增加，原有的系统对新功能的支撑显得有些捉襟见肘，所以在今年8月份，我们开始了对系统体验的分析和优化工作。

一：产品理解

广告投放平台广义上属于商业产品体系，商业产品和用户产品在体验的关注点上是有显著区别的。最大的区别就是使用需求不同，商业产品一般不会出现在我们日常生活中，大部分都是在工作时，或者是特定的时段内才会使用到。所以把握好商业产品的特性，是做好商业产品用户体验的关键。

研究一个产品的特性，一个比较简单的方法就是观察产品的“零容忍点”，也就是产品的哪些特性如果不能够满足用户，用户就会产生强烈反感，甚至放弃使用。比如说现在非常火的移动互联网应用，也就是app产品，用户的零容忍点基本上会停留在视觉层面上。因为我们的移动设备分辨率较高以及产品的使用场景（都是近距离使用）的关系，用户对产品的视觉效果会非常严苛，如果产品的icon或者界面丑陋，基本上就不会用了。但是，对于一些小说站点或者视频站点来说，视觉就不是用户最主要关注的了，这类产品，用户最关注的是他们的内容，如果内容不够好，别人有的你没有，那么用户就会离开，即使你的界面十分精美，只能是华而不实。同样，如果把思路切换到商业产品上，我们会发现用户最在意的是能够能够在使用的功能满足和节约时间。因为商业产品更像是一个用户的工具，如果工具不能够操作，那么用户就没有使用的动力了。因此，对于商业产品来讲，功能>性能>易用>美观。

所以，对于商业产品设计师来说，我们的思维中要一直有一个声音，那就是我们的优化是不是能够真正的提高用户的效率，在效率和效果面前，我们要强迫自己选择前者。

二.可用性走查

平台系统的复杂度之高，超出预期，怎样衡量复杂系统的操作效率提升是体验优化的一个难题，思考之后，把产品的易学性作为我的设计出发点，就是通过统一、规范的系统能够让用户更容易学习和掌握平台产品具体的使用方法。

对整个系统超过30个页面进行可用性走查，根据用户体验设计要素，把系统按照结构层、框架层和表现层来进行梳理。结构层解决用户如何导到某个页面，做完去哪里。在梳理结构层的过程中不具体思考交互方式，只是从任务出发，来看流程和结构上能不能满足功能，在满足功能的基础上有没有提升的空间。框架层则解决页面的具体布局和交互方式，对系统页面的控件、布局等详细梳理，寻找改进空间。表现层解决产品的视觉呈现。

虽然互联网发展迅速，但是利用Banner来推广产品，依然是王道。
很多公司都采用这种形式进行宣传，优点多多：便宜、效果可监测、行之有效。
现在呢，假设有客户让你帮忙设计个Banner广告，你要怎么设计呢？要怎么提高广告的点击率呢？

下面将详细讲述Banner设计的14条建议。

1. 选择最有效的Banner尺寸