实战经验!搞定网页重设计的7个必要环节 - 优设网 - UISDC

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

2015/06/12 12908评论区

website-redesign-process-7-elements-1

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

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

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

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

1、访谈

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

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

2、项目简介

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

通常,项目简介会回答以下问题:

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

3、竞品分析

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

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

competative

4、信息架构

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

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

information-architecture

5、线框图

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

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

wireframes-1

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

6、启发板

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

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

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

mood-board

Shopify Plus 的启发板

other-mood-boards

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

7、视觉稿和原型

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

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

invision-mock

Shopify Plus 的InVision 项目页面

invision-mock-1

为Shopify Plus 搜集反馈

结语

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

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

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

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

线框图绘制技巧:
《给交互的同学!有哪些手绘线框图的小技巧?》

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

「子木说」

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

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

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

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

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/website-redesign-process-7-elements

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里