传统的图片上传交互很简单：一个文件域要求用户选择图片文件，一个提交按钮（如下图）。

这种方式有很多缺点，比如选择图片后看不到预览，一次只能选择一张图，上传过程看不到进度。当然也有它自身的优点：html本身的表单控件，代码简单，上传不易出错，适合低速网络环境。现在富媒体横行的时代，用户需要长传大量图片，这种传统表单的方式上传图片显然已经跟不上时代的需求，基于flash、html5的新型上传方式被广泛的应用。

我们从上传图片前、上传中、上传后三个步骤来分析其中的交互过程。

上传前

上传图片前一般可以：查看已上传相片、选择布局、来源等。

↑微博上传图片前需要选择单张还是多张

↑先择布局后再单张依次上传

↑ QQ空间的心情发布框首先让用户选择图片来源

上传中

上传大量图片时，是否可以让用户利用好等待的时间，比如在上传过程中就可以添加图片描述，移除不需要的图片。上传图片过程中最基本的需求是上传进度显示，大批量上传时不易导致用户烦躁。

↑ 点点网上传图片过程中有上传进度显示，已上传成功的图片可以添加描述，可以选择图片布局，可以删除图片

↑ 网易相册上传图片过程中可以查看上传进度，可以添加图片描述

↑ QQ相册上传图片过程中只有进度显示。

上传完成后

添加描述，选择布局，简单修改（旋转、裁剪等）

↑ 图片上传完成后，QQ相册推荐你为图片增加描述，写图片日志

↑ 在微博上，图片上传完成后可以拖动鼠标排序，放大、缩小图片等简单处理。

新技术带来的变革

在本地程序中，可以将图片直接复制粘贴到文档中，亦可以将图片拖放到程序里实现打开和修改，目前Google doc的网页实现了以上两种图片上传方式，使它更像一款本地应用。QQ空间中发布的日志如果有引用外部的图片，发布成功后会提示用户是否自动将外链图片转存到相册内。这一系列的交互，看似简单却需要后端复杂技术的支持。用户的操作少了，上传图片更加方便了，也许就是这些细节，留住了更多的用户，让他们不愿意迁移到其他平台。

在设计时，我们常常会涉及内容图片，这类图片尺寸不能太大，否则显得太粗糙，也不能太小，太小就不显眼，图片周围有文字说明，不能只有图片，没有文字说明。

（3）图片清晰、不变形是最基本的要求，也是必须的

我们设计时使用的所有的图片、图标，一定要清晰，见过很多设计太差的网站，按钮是变形的，有的图标也是变形的，用户上传的产品图片有的也是变形的，这个在网站设计中是绝对不允许出现的。图片尺寸要符合图片本身的特点，比如服装款式图片、人的头像，高度就一定要比宽度大，见过很多网站设计的人物头像，居然宽度比高度长。

4 导航页辅助内容设计一般标准

比如资讯导航页面重点推荐内容的导读，产品列表页面产品导读、产品参数等，在本研究报告，我都归纳为辅助内容。这些内容设计时要用灰色，字要更小一些，行距要低一些，主要就是不能影响重点内容，使页面看起来更有层次感，主次分明。用户也是在扫描整个页面，找到重要内容的时候，再去阅读辅助内容。

关于B2B行业网站的内容设计标准，就讲到这里，其实这个标准，也与一般的商业门户网站大同小异，但是与企业网站的区别很大。