继续Sexy Web Design的整理,这一篇主要是网页设计步骤概览。我采用了中英文对照,并截取了书中有趣的图片。

  • Step One: Research

步骤一: 市场调查、用户行为研究等分析。和广告公司中Planning的工作有类似。

调查研究对于任何设计、开发等强调以“用户为中心”、“市场为导向”的工作来说,都是至关重要、起决定性作用的步骤。

  • Step Two: Structure

步骤二:内容结构的确立

Scribble of the site structure? (Free time: what the site can become)

推荐要做的事:拿出纸笔在纸面上胡乱涂鸦。这是我们最喜欢干的事,圈圈画画各种结构层级图,很酷!

  • Info architecture

(key message,primary call to action…)

To organize information in a useful and logical manner

在做“结构”时,{dy}点是梳理整个网站的信息,使之有明确的架构:有主梁、有承重墙、有进出的门……用一种逻辑性的、易用性的方式去组织庞大的信息,使之结构化。

信息的架构其实是应该有专人来做,但是现阶段大部分的设计师都或多或少承担了其中的工作。

  • Wireframing(blueprint)

第二点就是进入线框图的绘制阶段,还是先进行纸上的草图勾画,用具体的页面来呈现内容架构。草图之后再动用一些画线框图的软件来进行更为清晰的定稿。

  • Tone, Atmosphere(goal of the visual style: to evoke a feeling in the end user to tie in with ?the site)

第三点就是往黑白的框架上添点颜色和血肉了。采用某种调性的设计去建立网站与用户的情绪性、情感性连结,营造一种气氛,就像咖啡馆和快餐店的气氛一样迥然不同。

  • Step Three:Interaction

(scrolling through the text, pushing buttons, submitting search queries, opening menus, navigating through multiple pages …)

步骤三:交互。

滚动文字、按某个键、提交搜索请求、打开某些菜单、多页面的导航显示…….网页上用户的交互行为不胜枚举。

  • Navigation(the most important interactive element)

首先值得强调的一项交互就是“信息导航”,可以说导航是一个网站中最重要的交互元素。之后会有文章详细介绍各类导航的方式。

  • Form 表单
  • Audio & Video 多媒体
  • Step Four:Aesthetics (the fun part: crack open the tins of paint and start throwing colors at the canvas)

步骤四:美。有了那么多步骤的铺陈,设计师终于可以挥毫泼墨了。对于具体的设计发挥越不拘一格越有惊喜,我也不做过多点评翻译了。

  • Layout & composition 布局
  • Artistic Layer (Attention to detail for a visually rewarding XP: the distinction between good and great design)

艺术性:请给设计以灵魂、个性 (To give designs soul, personality, and character)

  • Typography 排版
  • Images: Photograph, illustrative diagram, box shadow, a rounded corner(visual styling of the page), iconography

图像,包括照片、图表,以及在文本框外增加阴影、头像照片采用圆角而不是直角等格式都是很好的图像化设计得方式,另一种重要的方式是用小图标进行图像语言上的意义提示

  • Convention vs. Innovation 传统规范VS.创新创意
  • Step Five:Deliverables: split your lovely Photoshop output into individual image files, ready for a developer to build

步骤五:提交一份设计成品,这个成品应该是可以让其他设计人员、开发人员很容易上手使用的、规范的、详细的文档。包括了一份完整的设计稿和设计手册(包括了各种应用规范)

  • Design Comps(comprehensive artwork)
  • Style Guides (brand, identity, logo design, page templates…)