---
title: "初阶UI美术设计师手册"
url: "https://yjyj.net/learn/1180.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2009-07-02T15:52:52+08:00"
updated_at: "2009-07-02T15:52:52+08:00"
categories: "招数学习"
tags: "前端开发实战, 程序员职场随笔, 网页视觉设计"
summary: "这篇《初阶UI美术设计师手册》讲清了小型互联网公司里，UI美术设计师从接单到出稿的完整思路：先理解业务目标，再定色调、收元素、排主次、做布局、细调并二次优化，最后完成页面撰写。适合想快速建立实战流程的新手。"
source: "生猛大蝦 (https://yjyj.net)"
---

# 初阶UI美术设计师手册

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/learn/1180.html) · 作者：小 虾 · 发布时间：2009-07-02

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

- 先别急着画图，先搞清楚业务目的、用户群和页面要表达什么。
- UI美术设计的核心是定基调、收元素、排轻重，再做布局与细节优化。
- 最终交付不止是美图，还要能落到页面实现，和产品、研发协同完成。

不错的文章.

  很多观点我也很赞同.努力挖!

  一个企业的UI设计部门中的美术设计师，有别于人机交互优化、用户行为分析、用户体验优化、页面语言标准优化等角色。   
尤其是在中国互联网行业现有的短平快的企业产品设计特色，对于美术设计师本身的有求相对比较高，而且具备的素质也更加全面。    
一个UI美术师是一个企业的窗口，一个产品的灵魂，    
今天我想浅谈在一个小互联网公司，UI美术设计师在初级阶段应该做的事情。    
（因为我本人一直做管理，做技术，本身不涉及太专业的美术设计领域，因此只能浅评，请大家拍砖）    
首先，作为一个UI美术设计师，拿到一个Case时，你最先应该做的是忘记你的本身的角色。    
因为你需要先对自己的工作做策划和规划，你得先明白你要做什么，怎么做，为什么这么做！    
如果你为了一次市场活动做Minisite，你需要加强自己对业务表达方面的意识；    
如果你是协助产品经理做产品界面设计，你则需要先深入了解这款产品的理念、特性，以及它的用户群；    
如果你是为客户做一个整站Case，那么你还需要了解这个客户的心理，他的网站行业特征和主要受众。    
然后，再到具体执行的步骤：    
1，策定你将要使用的基调和色调。    
    要根据你已经了解到的信息，然后根据它的行业特性、产品特性、业务目的决定一个主色，和两个以上的辅助色，制定一套配色方案。    
    用色的多少以及他们之间是强烈对比还是渐变过度，要根据你的工作经验和Case的几本需求来决定。    
2，收集你必须使用的元素。    
    无论是做活动用的Minisite，还是客户的的整站方案，还是产品设计。都肯定有一些必须要表达的点，要动用的元素以及需要划分的板块和栏目。    
    而且这些元素是你不能过度表达，也不能漏掉其中一个的必备条件。    
    举个例子，做一个产品促销站，页面上肯定得有的至少得有企业的标识、产品的标识、促销的按钮、产品特性和优点的表述、这次促销活动的卖点吧，这些都是最基本的。    
    通过与客户、产品经理或者相关负责人的深度沟通，以及你自己对这个Case的理解，这时候应该清晰地确定有哪些元素是你必须用到的，其他的才是你根据自己需要发挥出来的点缀品。    
3，根据业务目的，安排要表达的元素的轻重排序。    
    现在，你应该对你要做什么，和为什么这么做比较清楚了，并且手中已经初步掌握了可以运用的元素和模块。    
    你需要根据当前CASE深层次的业务目的，来为这些元素进行排序。屡清思路，明白哪个或者哪几个元素是需要下功夫勾画。    
    明白重点突出，占页面比较大的比重，而哪些元素是仅仅点到为止即可，还有哪些是可以引申发挥，并且点缀衔接的。    
4，策定页面布局。    
    现在，页面的基调和色调，要运用的手法，可以使用的元素，以及需要突出的重点，你都非常清楚了。    
    如果还不够清楚，请与客户、产品经理或者其它负责人再次沟通。    
    然后，在你心目中已经勾画出一个大概的轮廓。也就是说，结合你专业的排版知识，你可以开始策定页面的布局了。    
5，进行边角的调优。    
    现在，你可能已经在草稿纸面上简单的策划了一下你需要做的页面。    
    开始利用你熟悉的工具开始实际的设计吧，大多数人惯用Photoshop或者Fireworks.    
    画出第一图形稿之后，你可以对细节进行一些调优。    
    举个例子，比如色彩的契合、过度、对比手法，小图标和线条的点缀使不同的元素衔接或使不同的模块区分更加清晰。    
6，进行二次设计和深度优化，作出最终的设计稿。    
    好了，拿着你调优过的DEMO，拿给相关的人员评价，收集修改的建议。    
    经过多次的沟通和理解后，对已经完成的DEMO进行小幅度的调整和优化，如果修改的需求或者客户满意程度较差，则需要大幅度的二次设计。    
    经过反复的操作，直到作为专业设计人员的你，和你的产品经理或者客户都满意。    
    至此，恭喜你，设计的部分已经完成了。    
7，撰写页面。    
    完成了最终的设计稿之后，你可以将它转化成Web页面了。这可能需要你除了有深厚的美工功底之外，还需要会写一些脚本页面。    
    将整体设计以CSS+DIV，结合体积较小的图形和JS脚本，并配合相关的产品研发技术人员，完整的将它体现在用户面前。    
如果你顺利的完成了以上步骤，那么你就已经具备了一个初级UI美术设计师的业务素养。    
当然，每一步其实都有相当专业的讲究和知识，作为一个非专业美术设计人员，我就不好在这里大放厥词了。    
一个优秀的UI美术设计师，应该逐渐掌握较强的逻辑表达能力，美术设计能力和理解能力。    
你不仅仅需要创造一个美观的作品，更需要驾驭对页面设计的各种手段，并以此来进行一次次良好的业务表达，从而实现你企业的价值。    
当然，这是一个在短平快市场特性的创业型公司中，你才需要做的事情。    
一个完整的用户体验设计部门组成还是相当复杂的，    
举例如：策划师、结构设计工程师、视觉设计工程师、人机交互优化工程师、代码标准优化工程师、用户体验优化工程师、用户测试工程师……    
这需要一个很庞大，很专业的团队，成本高，产品开发周期太长，不适合我国大多数小型创业型企业的现状。    
不过未来，你可以向其中一个方向深入发展，做的更加专业，但这不是本文探讨话题的前提范围。

     
出处：[http://www.ismole.net/thread-589-1-1.html](#)

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

### 初阶UI美术设计师先做什么？
先忘掉“我只是画图的人”这个角色，优先理解业务目标、产品特性和受众。明确这次是活动页、产品界面还是整站方案，再决定色调、元素和页面重点，避免一上来就陷入细节绘制。

### UI美术设计的页面流程怎么走？
可按“理解需求—定基调—收元素—排主次—定布局—细调—二次优化—转页面”推进。这样能保证设计不是凭感觉堆图，而是围绕业务目的逐步收敛，减少返工。

### 为什么要先排元素轻重再做设计？
因为页面空间有限，所有信息不可能平均展示。先分清主视觉、核心卖点和辅助信息，才能把重点做大做强，把次要内容点到为止，让页面更清晰、更有引导性，也更利于后续实现。

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