---
title: "原创技巧：[网页界面设计]-之我的壹贰三肆"
url: "https://yjyj.net/learn/1469.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2010-04-08T02:54:42+08:00"
updated_at: "2010-04-08T02:55:17+08:00"
categories: "招数学习"
tags: "CSS布局技巧, 前端开发实战, 程序员职场随笔, 网页视觉设计"
summary: "本文把网页界面设计拆成沟通、归纳、准备、设计四步，解决“拿到需求却无从下手”的常见难题。重点讲清如何索取项目信息、分析客户与产品定位、准备图文素材，并在设计阶段把分析结果落到配色、布局、细节与体验上。"
source: "生猛大蝦 (https://yjyj.net)"
---

# 原创技巧：[网页界面设计]-之我的壹贰三肆

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/learn/1469.html) · 作者：小 虾 · 发布时间：2010-04-08

## 30 秒核心看点 (TL;DR)

- 先沟通再动手：把项目目的、产品信息、客户审美问清楚，避免后面返工。
- 拿到信息别急着画稿，先归纳分析，风格、配色、素材和布局往往就藏在需求里。
- 设计不是单纯做图，而是把分析结果转成图片处理、排版构成、色彩和用户体验。

分享于站酷：

 此文更多是谈自己的一些思路(步骤),然后站在回答网友问题的立场来写的。希望对存在这类问题的朋友有所启发!
Ok,下面先把几个阶段列出来,然后逐点阐述: **一、沟通阶段-(获取项目信息)
二、归纳阶段-(分析所获信息以深入了解项目)
三、准备阶段-(准备设计所需的图、文资料)
四、设计阶段-(设计页面)**

 **** **一、沟通阶段-(获取项目信息)** 这里讲的沟通,其目的在于获取项目信息,给下一阶段的"信息归纳"提供必要的信息源。
通常我会索取以下信息: 
·项目基本信息(项目主要的目的、项目的侧重点、项目期限等等)
·客户公司产品信息 (如产品定位、产品卖点、消费人群、经营范围等等,这点对于设计具体产品项目时,更为重要!)
·客户公司基本信息 (如公司简介、公司规模、公司性质等等)
·项目委托人个人审美倾向(委托人对网页风格的预期、委托人艺术审美取向等等) 在沟通方式上,不同性质的客户略有不同。我把之前的客户按客户性质分成两大类: 一类是设计类公司的外包业务,因为经过转手,这种形式的项目你往往不能与项目委托人进行直接沟通,信息传递过程中的误读也就在所难免。这类客户性质的业务,一般会有明确的网站策划,项目Manager也有一定"经验"。可能正因为"便利"太多,做这类项目时往往有放不开手脚的感觉,而且项目负责方一般都比较强势,所以在沟通上也自然就比较被动。 另一类就是企业性质的直接需求,我个人更倾向于接手这类项目。这类客户通常深谙设计之于品牌的意义,也大都会让设计师放手去做,此外在沟通、意见反馈上效率也会更高!所以在沟通方面我也就比较主动,站在客户、客户产品的立场思考问题也就是必须的。毕竟不能辜负客户对咱们的信任,对吧? Yi...咱们说啥来着,沟通是吧?又扯远了!上面说那么多,之所以不谈我某一项目具体是怎么跟客户沟通的,因为沟通方式还再其次,我觉得还是一个思路问题。总之,我们沟通时既要跳出来，也要走进去。既要跳出设计师的身份,站在客户项目(产品)的立场,自上而下的去沟通、去思考;也需要我们从设计专业的角度出诸多问题,索取你所需的项目信息。 **二、归纳阶段-(分析所获信息以深入了解项目)** 当获取到项目信息之后,你会发现这些信息显得比较零散,所以接下来有必要将这些信息进行系统的整理,然后综合起来分析。经过系统分析之后,后期设计上的诸多雏形会在此阶段形成,具体的比如说,网页的风格、配色、素材、布局等等。 写到这里,或许有同学会问,我要怎么样去做归纳、分析,才能得出适宜的分析结果呢?对于干设计的我们,我想这个问题确实是普遍存在的!之前的线上交流,不少朋友也有反映到:"在拿到项目信息之后,头脑依旧很茫然,找不到一个适合的解决方案。" 对于这种茫然,首先我们应该反问自己,所需的项目信息我都索取够了吗?项目信息我都仔细去解读了吗?如果我们回答都是肯定的,也就等于说,在解读项目信息方面,我们仍需努力!其实当我们试着去解读、分析项目信息,你会发现,我们经常遇到的风格问题、配色问题,答案就隐藏在这些项目信息里边。 说到这,个人建议大伙儿在提升软件技术的同时,可以抽时间多了解了解哲学、心理学、营销学方面的东东。因为我们不得不承认,商业设计终究还得回归到人的因素上来,你的设计是给人看的,客户看、客户产品目标消费人群看、设计圈子的人看......所以,我们的设计想要得到认可,同时促进产品销售,就们就还真得跳来想些事儿。 我个人解读项目信息的具体思路,这里暂不赘述,尔后我会专列一章,与大伙儿一并讨论! **三、准备阶段-(准备设计所需的图、文资料)**
综合分析之后,紧接着我会准备好设计时可能会用到的图、文资料。
图片主要包括客户公司的图片、产品图片、模特图片等等。一般情况是,客户会提供部分图片,更多的,图片我会去素材网站找找。
文案主要包括网页广告标语、导航文案、产品描述等等。有做网站策划的客户,这些文案大都会提供,如果没做策划的客户,我会跟客户负责人沟通定出。 **四、设计阶段-(设计页面)**
最后一个阶段,用一个比喻容易说明问题。 即如果把网页设计简单的比作烹饪,这四个阶段也就是说这么几回事儿:1.顾客提出相关要求;2.店方去思考如何做出一道客户称道的佳肴3.店方准备好烹饪所需的材料;4.炒菜;
最后的炒菜,需要解决问题就是:在分析结果的指导下,怎么样去把材料变成一道色、香、味俱全的美味?推演到咱们网页设计上来说,就是这样一些工作:处理图片、细节、色彩、排版构成、用户体验等等。 设计上的具体问题,这里也不多扯。当然,之前大伙所关心的网页调色以及细节处理,之后我会专门写一些心得。 行,就这吧,有问题的地方,欢迎大家交流、指正! WOSER'.pu
2010.3.30  

 [](https://yjyj.net/wp-content/uploads/2010/04/m_1269941824927.png) 

  

 原文链接：[http://www.zcool.com.cn/article/ZMjg1Ng==.html](http://www.zcool.com.cn/article/ZMjg1Ng==.html)

## 延伸问答与排错指南 (FAQ)

### 网页设计拿到需求后第一步该做什么？
先做沟通，尽量把项目目的、产品定位、目标人群、公司信息和委托人的审美倾向问清楚。信息越完整，后面的归纳和设计越不容易跑偏，也能减少反复修改。

### 为什么网页设计前要先归纳分析信息？
因为原始需求通常很零散，直接开工容易只凭感觉做。先把信息系统整理，再结合项目目标分析，才能提炼出风格、配色、素材和布局方向，让设计有依据而不是拍脑袋。

### 网页设计准备阶段要提前准备哪些资料？
主要准备图文两类资料：图片包括公司图、产品图、模特图等；文案包括广告标语、导航文案、产品描述等。若客户没有现成策划，就需要和负责人确认并补齐这些内容。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)