网页设计 : Atomic Design简介及工作实例

今天来分享新工作第一个礼拜的案子：重新设计活动页面。

过程参考Atomic Design原子设计方法论，考量Web Responsive Design响应式网页设计。讲解关于遇到一个网页，我如何着手、设计流程及成果。

利用实际案例说明，如何将设计理论应用在网页设计，其中使用许多图片辅助，让大家可以参考不同的设计流程及方法：）

此文内容概括：

1. Atomic Design Brief Introduction 原子设计方法论简介

2. Case Study: FEVO Event Page Redesign 实例：改善FEVO活动页面

3. Conclusion 结论

图0 原子设计是一种网页设计方法，出自于Brad Frost在2013年时发表的文章

1. Atomic Design Introduction 原子设计理论简介

1.1 Introduction 背景介绍

于2013年Brad Forst提出此设计概念：

灵感来自于他高中时期的化学实验室，可以用肉眼看到的物体都是由原子(Atoms)组成，原子结合在一起形成分子(Molecures)，分子组合成相对更复杂的组织(Organisms)。于是Brad借此概念应用在介面设计。

Interfaces are made up of smaller components 介面是由许多元素所组成的。

图1.1 还记得高中化学元素周期表吗？Brad Forst认为网页也是由小元素所组成

1.2 定义Definition

原子设计是一个设计方法论，由五种不同的阶段组合，创建一个有层次、计画性的介面系统。

此五种阶段为：

以下我利用中华邮政网页为例说明Atomic Design：

图1.2.1 原子为网页构成的基本元素，组织是分子及原子集合的元件

图1.2.2 以中华邮政网页为例，说明模板可以套用在不同主题

1.3 优点 Benefits

1.4 批评Criticism

目前个人想到的唯一缺点是，一旦有了先入为主的架构，可能会跳脱不了系统性的方法，而丧失了创意发想的机会。

2. Case Study: FEVO Event Page Redesign 实例：改善FEVO活动网页

2.1 Problem Statement 问题定义

FEVO其中主要业务为协助客户销售票务，因此我们有一个default的活动页面，客户提供活动资讯及促销机制，消费者即可上网购票。

2.1.1 Customer needs客户需求

客户希望可以根据他们的品牌，设计客制化的网页。

2.1.2 Project Timeline设计时程

4/4 – 4/7 ，大约一周的时间

2.1.3 Current design目前页面设计

基本的活动页面包含活动名称、票价、介绍、图片/影片、按钮、促销活动等资讯。左方是网页版，右方是手机版。

优点：简洁的页面网页设计是什么工作，呈现所有重要资讯，使用者一看即可理解此页面目的。

缺点：以设计角度而言，

图2.1.1 目前活动页面，简洁的排版，但由于重点过多，让使用者不知该把目光放哪

图2.1.2 目前设计的UI互动机制并不一致，容易造成使用者认知混乱

2.2 Design Process 设计过程

2.2.1 Understand business goals理解商业目的

首先，我们必须了解客户最主要的目的，也就是赚钱！！！因此，如何让终端消费者购票，为首要考量。再来，先前提到客户需求，他们希望活动网页与品牌风格一致。

了解目的后，再进行设计，才能将商业与设计更顺畅的结合，客户更容易被说服、买单。由于产品是要赚钱的，因此此案例着重于商业与设计的结合，假如是较偏向创意发想的计画，此设计过程请斟酌参考。

2.2.2 Know limitations了解设计限制

设计限制主要是考量到预算、时间、资源分配，是设计过程十分重要的步骤。事前询问产品经理在此页面可以更动的元素是什么，以及工程师的技术限制，有助于更有效率的设计。

在此案例中，尽管产品经理跟我说，我可以大改、突发奇想都没问题。但个人以产品开发时间及资源为主要考量，且此计画的急迫性、重要性影响并不大。因此，如何用最少资源达到目的最佳化，减少开发成本，让客户满意为设计目的。

2.2.3 Decompose the interface分解介面

在了解目的及限制后，我开始分解介面成两大方向：

UI元素：字型、按钮、连结等，同时考量不同状态的互动方式(Normal, Hover, Active and Disabled)

功能/资讯重要程度排序：每一个区域所要达成的目的，是否跟客户目的及需求一致，此分析有助于设计架构

2.2.4 Play around with color大胆玩色彩

最后一步骤，才是进行设计，也是最开心的部分啦！大胆尝试不同颜色、排版的组合，其中参考许多网页的色彩组合，最常使用的灵感发想网页为Awwwards。

图2.2 网页分解图：将此网页的功能及目的性，做了重点排序(红→白→灰)

2.3 Final Design 设计产出

2.3.1 Web Design 网页设计

首先，我先挑选一个重点颜色（蓝色），作为网页的基底，目的为强调商业目的（购票及促销重点3），降低其他非重点的元素的视觉份量（较细的字体、将优惠调成浅色等），让页面更为简洁。

图2.3.1 Final Design: 用主要颜色强调商业目的的重点，减轻次要元素，让整个页面更为简洁

2.3.2 User Scenarios 使用情境

同时考量到客户不同的使用情境，根据促销优惠的数量进行使用情境设计，此步骤能保持各种情境的画面一致性。

图2.3.2 根据使用情境做设计，保持画面的一致性

2.3.3 Mobile Screens 行动装置

越来越多使用者在行动装置上购票，因此在手机版的页面以商业目的为主要考量，保持画面的简洁及强调重点。

图2.3.3 由于手机萤幕尺寸限制，更必须清楚此网页的目的性，进行排版

2.3.4 Pattern Library 素材库

最让产品经理惊艳的一点，即是我整理的设计素材库，包含：

素材库即是Atomic Design的其中应用，归纳元素。创建素材库的主要原因为

图2.3.4 Patter Library 素材库是设计与工程的桥梁，让产品开发过程更有效率

2.3.5 Templates 模板

由于素材库将网页拆解成元素，更方便重复使用、创造不同的视觉效果。最后我设计了四种模板，客户可以选择相对的颜色，页面主要色彩会因应改变，符合品牌形象。

图2.3.5.1 Modern 现代简洁版，高浓度的Primary Color，产生有活力、精神的视觉效果

图2.3.5.2 Royal 深色底创造出高贵的形象，适合百老汇、奢华品牌等

图2.3.5.3 Spring Breeze 利用女性柔和的颜色搭配，适合婚礼策划、春夏活动

图2.3.5.4 Vibrant 动感：渐层的背景，图片与促销优惠结合，在视觉上更为突显，适合演唱会、时尚秀等活动类型

2.4 Results 成果

重新设计的活动网页，有以下三个主要效果：

2.4.1 CTAEnhancement：由于强化了与商业目的相关的重点（购票及促销优惠），视觉效果上更为突出、吸引使用者的目光

2.4.2Efficiency/Reusability效率/重复使用性：素材库的创建，让设计师与工程师的沟通更为顺畅，同时可以重复利用元素，做无限的变化

2.4.3 Consistency设计一致性：将网页介面分解成元素，可以应用在不同的页面，让消费者有相同的使用者经验

图2.4 前后比较：相较于先前设计，CTA更为明显，让使用者目光更为集中

3. Conclusion 结论

最终呈现设计结果给产品经理以及CEO，他们都十分惊艳满意，因为我达到了以下目的：

达成客户需求（价值高）

容易执行（低开发成本）

美观

完整思考不同使用情境：不同萤幕尺寸的设计、优惠次数不同的画面

Development is Design.

设计到最终成品，还是要用程式码写出来，因此设计师如果能了解基本的程式概念、有系统性的思考，在产品开发的过程沟通能够顺畅许多。

设计网页有许多种方式，Atomic Design只是其中一种，很开心今天可以跟大家用实例讲解设计理论，并说明设计过程及结果网页设计是什么工作，希望大家都有收获，也不令指教！

References:

Atomic Design

Slideshare: Atomic design

Vimeo Video: Brad Frost: Atomic Design (Webdagene 2014)

The Unicorn Workflow: Design to Code with Atomic Design Principles and Sketchhttps

▲ 预告 ▲

Atomic Design 的相关内容，非科班设计翻译小组正在紧张的翻译中，预计六月初跟大家见面。