有些人认为不应该对网站进行重设计，那样本钱太高昂了，只须要做适度调度即可。乍一看这么说也没错，网站本身只是内容的载体，只须要根据企业和产品本身的变革调度即可。不过，当需求和变革达到一定程度的时候，完全的重设计能够让网站本身更加统一同等，也能和产品、企业和业务进行更加深度的耦合。
当我们在进行重设计的时候，会基于企业的业务、营销等目标，从原型层面上入手，进行重新设计。这样做一方面孔标明确，另一方面也符合流程，这也符合 Justinmind 的事情办法。
小贴士：如何重新设计网站
在开始进行重设计之前，首先要制订相对明确的目标。适当的问题会给你带来你想要的答案：
我们想通过重设计来实现什么目标？我们的业务和营销目标是什么？我们的目标用户都是什么人？我们想要如何改进网站上的体验？在这4个问题的框架下来进行重设计，能够让项目向着精确的方向推进。
案例解析
本日，我们挑选了5个网站重设计案例，通过不同案例的处理方法，以及前后比拟，来同你分享网站重设计的履历。
1. Rev.com
Rev 为用户供应在线转录做事，网站的利用韶光已经不短了，他们希望通过重设计，让网站在视觉和体验上更加贴近当下，具备更加当代、专业的视觉和外不雅观。
重设计之前
旧有的网站设计风格看起来有点过期，最紧张的 UI元素是中间的轮播图，公司的三个代价主见则通过三张轮播图分别呈现：「速率、质量和做事」。图中利用了上世纪50年代的时候所盛行的复古插画来呈现产品特性，借用火箭、飞船和电话拨号盘更强劲的隐喻，来强调产品质量。
在轮播图上方则是网站的紧张导航，并且分别导向网站的不同子页面，每个页面中也大都利用了风格类似的复古插画。首屏的轮播图和子页面中都包含了产品做事更详细的信息，产品定价以及清晰能干的 CTA按钮，勾引用户去点击。
轮播图本身所存在的问题在于，用户一次只能看一张，但是耐心有限的用户，很难坚持都看完，常常会跳过个中的内容。如果采取更加简明的代价主见，只利用一张图即可。其余导航和轮播图也靠的太近。从趋势上来说，视差和动效会让用户更加舒适，视觉愉悦感也更强。
视觉风格上，目前更盛行的是扁平、自然有机的图形，超大而引人瞩目的首屏设计，或者是视频内容。
重设计之后：
Rev.com 的新版完备抛弃了轮播图和复古的设计，更换以当代、清爽、干净的视觉，企业的代价主见也更加精切实其实不雅观。下面包含3个不同的卡片，分别详细阐述做事本身一贯就有的完全的3个代价主见，每个卡片上都有详细的阐明和清晰的行为召唤用语。更主要的是，视觉上，三个卡片足够突出，可以吸引用户，鼓励点击。
向下滚动可以看到更多改变。页面中利用了一些公司客户的案例来支撑这些代价主见，并且后续有对做事更详细的描述。视觉上，每种做事都用不同的色彩进行区分。做事条款则是可点击的，会让人以为可信度更高。
从用户体验的角度上来说，重设计让页面更加轻盈当代，导航更加清晰，而产品特色则借助色彩得到了强化。而项目经理 Barron Caster 在之后公布了数据，新的设计让 Rev.com 的网站转化率提升了 18%。
2. Panos Pictures
Panos Pictures 是一个拍摄记录片和电影的代理机构，他们的网站重设计需求不仅仅是调度整体的视觉，而且还须要通过设计来修正底层架构。
重设计之前：
Panos 之前的网站比较简陋。老版本的网站并不是相应式的网站，对付移动端设备不足友好，短缺 JavaScript 的支持，导航选项也须要完善。首页顶部是一个导航菜单和搜索框，下面是超大的首屏图片，并不才方附带两三个比较小的图片。每个图片都会链接到相应的图片商店。
鼠标光标悬停在图片上，能够显示干系的图片信息，用户可以通过点击浏览照片背后的故事详情。顶部导航利用的是老式的嵌套式的导航菜单，但是实际上还有一些图片超出了导航的浏览范围，并且用户无法通过清晰的路径来方便用户关注更多的信息。
重设计之后：
经由重新设计的 Panos 的网站让用户更加「熟习」，体验上和当代设计更加贴近，而内容属性和之前保持同等——毕竟是一个供应图片的摄影机构，他们做的事情始终还是拍照。但是，在内容的呈现办法和细节上，已经发生了改变。
首先，网站已经完备是相应式的了，网页的内容和元素会自适应，顶部导航栏由于功能性相比拟较弱，已经被收纳到汉堡菜单当中了，用户点击的时候会以一个弹出图层的形式呈现。页面顶端仅保留了原来的品牌LOGO 和搜索框。
而内容区域则依然以图片呈现为主。每张图片都带有相应的标题、简短的先容和点击链接。而用作首屏的首图在尺寸上则比首屏尺寸要短一点，确保底部更多的信息能够被用户把稳到，勾引用户向下浏览。在筛选内容的时候，加载的时候会触发动人的动画效果。
总之，Panos 的重设计在保留品牌精髓的情形下，供应了更好的用户体验。
3. Mailchimp
Mailchimp 是著名的邮件做事供应商。作为今年关注度最高的重设计案例，Mailchimp 的网站重设计险些相称于是一次品牌重塑，网站不仅拥有了更加时髦的新衬线字体，而且重新调度了 LOGO、配色包括布局，以及更细致的功能。
重设计之前：
Mailchimp 的网站在情绪和游戏化设计上，已经是业内最值得学习的了。网站首页的布局设计很大略，顶部是菜单导航，然后是代价主见的内容和CTA按钮，下面是更加详细的功能描述和更多的CTA按钮，而首屏的大图则直不雅观而清晰地将这款工具应有的觉得通报给用户。网站有着良好的构造，但是它并非无法改进。
重设计之后：
Mailchimp 经由重设计之后，看起来完备不同，但是依然让人觉得得到之前的影子。通亮的黄色是这次重设计所加入进来的最能干的元素，品牌和产品的代价主见内容则利用比拟强烈的玄色衬线字体来呈现，天马行空的插画则增加了首屏的视觉张力。
MailChimp 本身丰富的功能中，最主要的4个功能被呈现在首页当中，每个功能都附带了一个小巧有趣的手绘插画，精髓精辟而直不雅观，一览无余。
页面靠下的位置，为客户推举语留下了足够大的一块区域，让Mailchimp 的用户为产品发声，加强 Mailchimp 的品牌体验。最下方的页脚则经由简化，全体体验比之前干练了不少，对付这个产品有所理解的用户，该当有较深的体会。
4. UserTesting
客户体验研究平台 UserTesting 在产品原型设计和迭代方面有着很广泛的影响力，对付设计和开拓者而言都不会太陌生。今年，这家公司针对自家的网站进行了重设计，将品牌推到了一个全新的高度。
重设计之前：
UserTesting 首页的紧张控件是一个超大的轮播图，轮播图紧张是勾引用户注册为测试做事的用户，并且通过额外的 CTA按钮勾引用户到其他的做事。轮播图本身存在的风险是不愿定的，同时第二个和第三个轮播图的功能相对不足清晰，转化并没有预期的高。
在轮播图下，网站还展示了一些客户的成功案例，并且呈现了品牌的三个紧张的代价主见，再靠下的位置则是一些客户的推举语，一些研究案例的链接和页脚。
全体首页内允许多，乃至有点乱。当然，作为一个常常进行用户测试的机构，我相信 UserTesting 自己也没少测试自己的首页设计。
重设计之后：
UserTesting 的新页面看起来更加轻盈，内容数量降落了25%，顶部导航被重新设计，轮播图和之前的几个案例一样，也被放弃了，改换上了看起来更加智能、当代、有机的插画，而宣扬用语也更加的大胆和吸引人。
在客户列表下方的产品特色和代价主见等信息，则更加简练，并且搭配上了动画，通过微交互让信息的生动性和传播性更强。接下来，他们强化了客户推举语的模块，每一段寄语都是关于一个主题，各司其职。末了便是知识库和带有 CTA按钮的页脚。
UserTesting 的重设计更加轻盈、清晰，也更加符合逻辑，易于理解，看着不累。
5. Art Institute of Chicago
芝加哥艺术研究院（AIC）是最受欢迎的博物馆之一，他们有着美国最好的艺术收藏品。而他们的网站同样须要重设计，提升整体的可用性，尤其是希望网站中大量的艺术作品的图片能够发挥效用。
重设计之前：
正犹如很多同类的老旧网站一样，AIC 的老版网站的宽度是固定的，顶部导航也是传统的多层级导航菜单，下拉框是半透明的，交互体验并不让人愉悦。
导航下面是全屏式的轮播图，6张图均是网站中的藏品或者展览。网页中的这个设计存在一个非常显著的问题，便是轮播控件和文本的色彩是固定的，但是背景图片则完备不可控，常常由于色彩比拟度不足，而无法看清前景的控件和文本，体验非常混乱。
轮播图的下面是页脚导航菜单，字体尺寸很小，链接被压缩得难以识别，博物馆的开放韶光和社交媒体链接也都挤压在这个地方。
重设计之后：
经由重新设计之后，AIC 的整体体验得到了很大的改进。首先，网站被改成完备相应式的，可以在任何网站上轻松阅读个中的内容。网站的信息架构被重新调度了，顶部的导航也进行了简化，没有笨重的下拉菜单。还增加了一个临时的公告区域。
轮播图被单个的首屏视频所替代，这样可以更加生动地呈现内容。而文本内容则增加了一个不透明的灰色的底，确保可读性。
借助栅格系统，网站的展览、活动、博物馆的亮点、周边商品都被约束了起来，确保布局优雅清晰。后面是用户注册的快速入口，页脚则被设计得更加易于理解。
AIC 是几个案例当中，改版前后变革最大的网站，可用性、可读性、SEO、相应式等功能都是在改版之后才用有，风格上优雅大气，还强化了品牌影响力。
结语
虽然这些网站各不相同，但是在这些重设计案例当中，可以清晰地看到网站的设计趋势，需求上的变革，以及很多宝贵的履历。
最范例的是对付轮播图这一控件的认知，越来越多的设计师开始在实战中摒弃这种设计，而开始拥抱高清大图和视频背景，更加在意针对性和目标明确的简约设计。动效和体验之间的紧密关系，使得设计师开始更多地在网页中利用这些元素。
作者： Justinmind
译者：陈子木
