【思∙译】网站设计改版流程的7大要素

　　【思∙译】网站设计改版流程的7大要素

　　我们的竞品分析文档

　　4. 信息架构

　　简单地说，信息架构就是一种组织内容的实践。在网页设计中，架构图反映一个网站不同页面间的关系，高度概括了一个网站各部分组成是什么。

　　我画了一个之前网站的信息架构图，用来展示页面间的关系。在进行更新和提出改进建议前，我对页面内容、我们的目标及访问流量进行了评估。这个架构图帮助我们明确了项目发布范围，并作为清单，帮助我们对所有页面进行内容书写，设计和程序开发。

　　Shopify Plus 的信息架构图

　　5. 线框图

　　改版的整个过程中我都在使用线框图，这样能帮助我透彻地思考问题，让想法获得认可。其中有些是我画在餐巾纸上，面对面进行分享讨论的，另一些是我画草图并在线分享的。

　　线框图有一个意想不到的好处——帮你书写内容。如果只写一个文档，很难把所有元素是如何相互配合的可视化出来，而把内容粘贴

　　到线框图里，就可以让你清晰地感受到页面的流程，内容中的每一部分是如何与另一部分相关联的。

　　Shopify Plus 改版中所用的高保真线框图

　　6. 灵感画板

　　我的灵感画板展示了我个人对于新品牌应该看起来是什么样的愿景，也是我早期获得团队认可所使用的方式。

　　我使用的是Pinterest。并且，为了避免让点子杂乱地分布在单独的一块画板上以至于丢失，我创建了几块不同的画板分别专注于导航、动效、字体等方面。

　　我做研究时会在 Illustrator 中画草图以表现想法，把文字，图像以及色卡组合成一个看起来像广告一样的东西。虽然同样的设计元素会出现在每一个草图中，但他们的排布和展现形式却不尽相同。

　　Shopify Plus 的灵感画板

　　探索 Shopify Plus 品牌方向的灵感画板

　　7. 视觉稿和原型

　　许多人并不会太关注打印出来的线框图或者网页设计稿。虽然在屏幕上展示设计也可以，但最好还是通过用户的眼睛去看设计。

　　早在画线框图的过程中我就开始开发可交互的原型，并且在整个项目进程中，我都与客户和团队保持共享，直到大部分网页开发落地。

　　我请用户在浏览网页时大声说出他们的想法，这样就能了解他们在与原型交互的过程中在思考什么。他们给出的反馈凸显了存在的问题，帮助我们验证设计决策，我们就能据此确定方案。

　　Shopify Plus 在 InVision 上的项目主页

　　收集对 Shopify Plus 的反馈

　　有些团队可能会坚持某个特定顺序的改版流程，但对我们来说，融会贯通以上7个步骤非常奏效。改版项目成功的核心就是使用一个适合你工作流程的对策。