网页改版的7大要素分享 网页改版有哪7大要素

   2015-08-09 0
核心提示:我们并没有什么特别的流程,就是将以下7件事情串联起来,便达成了目的

Shopify Plus是我们创立的电商平台的企业版。2014年2月发布,如今仍然是第一版。我想是时候改版了。

经历了一年多,我们对客户与自身都有更深入的了解。陈旧的品牌已经不合时宜了。

我们并没有什么特别的流程,就是将以下7件事情串联起来,便达成了目的。

面谈

我对执行团队的成员进行了一对一面谈,明确了Shopify Plus是什么。为了真实还原,我录下了每段面谈,供以后回放。

面谈之后便有灵感涌现——我觉得自己对于这个产品已经了如指掌。撰写愿景、任务描述、品牌指南、项目概述和网站文案都变得容易了。我们的网站需要更好传达信息,让人顿悟其中含义。

项目概述

深入项目之前,我们写了一份项目概述,使大家达成共识。我们会适时更新,让它反映出项目的当前状态。

项目概述中可能会提出一些问题:

  • 我们试图完成什么目标?
  • 如何知道项目成功与否?
  • 需要做什么?
  • 为什么需要这么做?
  • 有什么必要条件?
  • 做这件事情是为了谁?
  • 如何让他们知道?
  • 项目团队有哪些人?
  • 截止日期是什么时候?

竞品分析

我们研究了还有哪些同类产品。我先从一系列竞品开始,然后转向电商领域之外那些与我们目标客户相同的公司。

我们对比了竞品的长处、弱点和机会,还有我们想要涉足的重点领域——和我们想要避开的领域。

网页改版的7大要素分享 网页改版有哪7大要素

我们的竞品分析文档

信息架构

信息结构是内容组织的表现,使内容易于理解。在网页设计中,结构图表反映了网站里各页面间的关系,让你从更高的角度看待网站的构成。

我给旧网站画了一张信息结构图,展现出各页面间的关系。在更新和改变之前,我评估了内容、目标与工作量。这张图表帮助我们确定项目的范畴,可以作为所有页面撰写、设计和编码的任务清单。

网页改版的7大要素分享 网页改版有哪7大要素

Shopify Plus的信息结构图表

线框图

在整个改版过程中,我都使用线框图帮助自己思考问题、激发创意。有一些画在餐巾纸上,面对面分享,另一些草图则通过网络分享。

线框图能带来一项意外收获:它帮你撰写内容。写文档让你难以把一切视觉化,在线框图中粘贴内容能让人清楚感受到页面的跳转流程,每块内容与其他如何保持关联。

网页改版的7大要素分享 网页改版有哪7大要素

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

灵感画板

我的灵感画板展示新品牌可能的样貌。它们有助于让我在项目早期从团队得到反馈。

我使用Pinterest创建了众多画板,用于局部分解,例如导航、动画和字体等,不会让创意迷失在单个画板中。

研究过程中在我Illustrator中绘制灵感创意,将文字、图片和色盘结合成类似广告的图样。同样的设计元素出现在各处设计稿中,不过位置和表现有所变化。

网页改版的7大要素分享 网页改版有哪7大要素

Shopify Plus的灵感画板

网页改版的7大要素分享 网页改版有哪7大要素

从灵感画板中探索Shopify Plus可能的品牌形象

效果图与交互原型

线框图和网页设计印在纸上时,多数人都不会在意。在屏幕上展现设计很好,但。

我在线框图流程早期就开始制作交互式效果图。直到网站编码完成前,都持续将它们与客户和团队分享。

我让他们在浏览时大胆讲出自己的看法,才能知道他们操作界面时所想。这些反馈都突显了局部的问题,也验证了设计方案,便于项目的最终定稿。

网页改版的7大要素分享 网页改版有哪7大要素

Shopify Plus的InVision项目页面

网页改版的7大要素分享 网页改版有哪7大要素

为Shopify Plus收集反馈

尽管一些机构会在改版过程中坚持特殊的顺序,但这7个步骤对我们很有效。选用适合你工作流程的策略,是改版成功的重要因素。

作者信息:

Filippo Di Trapani, Designer at Shopify

Filippo is a designer working at Shopify’s headquarters in Ottawa, Canada. He’s a loving husband, father of 2, and an avid music lover.

 
标签: 网页 改版 7大 要素
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 用 JavaScript 实现网页图片等比例缩放
    在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小。 !-- // 说明:用 JavaScript 实现网页图片等比例缩放 function Draw
    03-08
  • 学习前端页面css定位 网页前端设计css
    一、相对定位:absolute  相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。position:relative;同时可以设置上下左右位置偏移;rela
    03-08
  • css实现你的网页图片半透明效果 网页设计如何设
    style type="text/css" !-- .clarity {  filter: Alpha(Opacity=25, FinishOpacity=100, Style=3, StartX=0, StartY=1, FinishX=1024, FinishY=768); } -- /style首先在你的网页中建立一个样式,然后在把这个样式用在你的图片上。至于代码的意思请往下看!!!
    03-08
  • body全屏css/网页全屏设置/全屏样式 css全屏布局自适应方法
    body全屏css/网页全屏设置/全屏样式 css全屏布
     !DOCTYPE htmlhtmlheadmeta charset="utf-8"titlebody全屏demo/titlestyle* {padding: 0;margin: 0;}html {height: 100%;}body {height: auto;min-height: 100%;}/style/headbodyh1demo/h1/body/html 
    03-08
  • CSS美化 css美化网页
    CSS美化 css美化网页
    CSS概述css样式:css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储
    03-08
  • CSS实现网页变灰的效果 网页改颜色代码css
    CSS实现网页变灰的效果 网页改颜色代码css
    .indent { text-indent: 2em }h4, .postTitle { text-align: center }.content { text-indent: 3em; margin: 5px 0 }.indent img { width: 600px; margin: 6px 0 }在今年(2020年)的4月4日,国家经历了非常悲痛的时刻,北京时间 10 点钟全国默哀,来致敬英雄。
    03-08
  • CSS+DIV网页样式与布局:第二章:CSS的基本语法
    第二章:CSS的基本语法一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的)。用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果。1、标记选择器(列如  p ul    p{color:green;})2、类别选择器
    03-08
  • HTML在网页中插入音频视频简单的滚动效果
    HTML在网页中插入音频视频简单的滚动效果
    每次上网,打开网页后大家都会看到在网页的标签栏会有个属于他们官网的logo,现在学了HTML了,怎么不会制作这个小logo呢,其实很简单,也不需要死记硬背,每当这行代码出现的时候能知道这是什么意思就ok1 link rel="shortcuticon" type="image/x-icon" href="
    03-08
  • html网页如何使用哪种浏览器内核渲染的选择
    众所周知,国内的浏览器基本都是双内核的(ie(Trident)+webkit);而且基本默认时都是用webkit内核。尽管IE浏览器体验差,但是有时也会需要用IE内核来渲染的(比如银行网站)。如果要切换IE内核的方法是在头部加meta name="renderer" content="ie-comp|ie-stand"
    03-08
  • HTML设为首页/加入收藏代码 js收藏网页
    (特别注意:要把’这个符号换成无任何输入法状态中输入的’这个符号,否则程序无法运行)   1.文字型:    a onclick="this.style.behavior=’url(#default#homepage)’;this.setHomePage(’http://www.apple-wallpaper.com’);" href="http://www.
    03-08
点击排行