实战经验！搞定网页重设计的7个必要环节

编者按：网站更新迭代重新设计恐怕是许多网站必经的环节，如何做好网页重设计也是许多设计师和产品人需要考量的事情。今天的这篇文章就是著名电商平台Shopify针对旗下企业服务平台Shopify Plus重设计改版的一些经验总结，希望能给大家带来一些启示~~~

Shopify Plus 是Shopify 的企业版电子商务托管平台，自从2014年2月发布之后，至今只做过一次更新迭代，也正是在这种情况下，我提出了对网站进行重设计的建议。

在这长达一年的时间里，我们对于自己的客户有更加深入的了解，也清楚地认识到老品牌和旧设计已经不再适应现在的情况了。

不同的公司和不同的团队，对于重设计有着不同的需求和考量，自然也就有着不同的流程。我们并未遵循某种特定流程，但是在迭代过程中，我们做好了下面7件环节，最终得到了我们想要的结果。

1、访谈

我对我们的决策团队的每一个成员进行了一对一的面谈，借此明确他们心中的Shopify Plus 到底是什么。为了接近真实，每次访谈我都会作笔记并且录音，随后繁复回放，仔细研究。

访谈之后，通常能从中获取灵感——从那里能了解关于产品的各种细节。这样一来，无论是产品未来的愿景、目标、品牌指南、项目原则还是网站文案，都比较容易确认。作为一个网站而言，更好的传达信息，才能真正让用户感到惊喜。

2、项目简介

在真正开始深入开发之前，我们需要写一份项目简介，确保每个参与者的信息和进度保持一致。我们会根据项目的实际情况，随时对简介内容进行调整和修改，实时更新。

通常，项目简介会回答以下问题：

•我们正在试图达到什么目的？
•我们如何确认这个项目是成功的？
•我们需要做什么事情？
•我们为什么需要这样做？
•哪些事情是非做不可的？
•我们为谁在做这些事情？
•他们如何了解这些事情？
•项目团队中包含哪些人？
•我们的最后期限是什么时候？

3、竞品分析

我们还需要仔细审视我们的对手。为此我们列出了竞争对手的列表，并开始了解在电子商务领域以外我们的产品如何服务于目标客户的。

我们会对比我们和对手之间的优势、劣势，我们碰到的机遇，独有的特色，以及需要规避的问题。

4、信息架构

合理可靠的信息架构能够有效地将内容组织起来，让信息更容易被用户获取并理解。在进行网页设计的时候，用结构化的示意图来呈现整个网站各屏之间的关系，能够使你从更高的层面上来把握整个网站。

于是，我先用结构示意图画出老版本网站的各屏关系。在更新升级之前，我充分屏幕了其中的内容、目标和流量分布，并提出了建议。结构示意图帮助我们界定项目实施的范畴，就像一份详尽的核对清单，让我们在组织内容、设计界面、编写代码的时候更为清晰明了。

5、线框图

在重设计过程中，我会使用线框图来勾勒整体，帮我思考问题，打通思路。有人喜欢在将想法涂鸦在餐巾纸之上，有人喜欢面对面分享想法，还有人喜欢将想法落实于草稿在线分享。

线框图的好处在于，你可以快速、便捷地填充不同的内容。仅落实于文档的思路不够具象，粗略的草稿不够规整，线框图能较好规避这些问题，不同类型的内容整齐地排列在一起，你可以清晰掌控布局，模块与模块之间的关系。

高精度的Shopify Plus 重设计线框图

6、启发板

我们会在启发版（Inspiration board）上展现新品牌的视觉设计，展现它可能的样子，这也是我从团队获取支持的一种方式。

同时我们还会使用Pinterest，为了防止我们在单个画板中泥足深陷，我们创造了多个画板，为导航、动效、排版等不同领域，有针对性地搜集案例，获取灵感。

当我有想法的时候，会在AI中进行勾勒，它们通常都是文字、图像和色彩的结合体，看起来形同广告。随后，相同相近的设计元素会出现在我们的草稿中，不过其中各元素的位置和外观，会有所不同，并且有许多不同的版本。

Shopify Plus 的启发板

在启发板上对Shopify Plus品牌进行探索

7、视觉稿和原型

很多人并不在意印在纸上的线框图和视觉稿。的确，直接在屏幕上看看还挺不错，但是直接查看落实于纸面上的线框图、视觉稿和原型效果更好。

另外，我在线框图绘制阶段就开始制作可交互的视觉稿（原型？），并且拿这些东西同客户进行沟通交流，一直到它们最终被落实为代码和实际的从程序。

Shopify Plus 的InVision 项目页面

为Shopify Plus 搜集反馈

结语

虽然许多设计机构倾向于严格遵循流程来进行设计，但是我们通常是将上述7个环节混合到一起进行的。使用真正符合你实际工作的流程，才是成功搞定重设计的核心。

【必知的线框图与原型知识】

线框图、视觉稿与原型的区别：
《术语小科普！聊聊线框稿、视觉稿与原型的区别》

发展历史：
《姿势大涨！你了解线框图和原型的过去、现在与将来吗？》

线框图绘制技巧：
《给交互的同学！有哪些手绘线框图的小技巧？》

原文地址：invisionapp
优设译者：@陈子木

「子木说」

线框图、原型、视觉稿有明显的区别，但是在功能上确实有着诸多相近的地方，根据项目和成员角色的不同，很多设计团队并不会三者都画。许多时候是PM画个线框图，设计师出个视觉稿就开始开发了。好在越来越多的低保真原型工具逐步涌现，一次性搞定快速、低保真原型成为了可能。

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量96万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：