名片的设计 - UCD大社区

从名片设计说网页版式的细节

Tony — 2009-01-13 09:04:54

记得国外牛人说过，网页的设计95%都是排版的设计，我不知道具体有没有那么夸张，但版式的重要性估计很多人都深有体会，可是由于现在很多的互联网设计师在版式设计方面的素养并不太高导致了中文网站大多呈现乱，花。美观其次的，主要是让用户在寻找想要的信息的时候花费过多额外的时间。

平面设计中版式入门就是名片设计，在99X55mm的里面将信息组织并且呈现出来，说难不难，做好了也不简单。
我从网上搜出了两张apple的名片，左边的这张我认为是更早的设计，右边的是新的设计：1 LOGO更加简洁；2 字体的也选择了细节更少的字体。
但从版式上来看，变化不大。

信息的要点
第一次拿到这个名片，用户看到的肯定不是某个字，要点很简单：1 公司LOGO；2 名字和职位；3 其他信息
从名片上看1、2、3的视觉要点很明显，网页的版式设计跟名片设计的原理一样。用户在浏览一个新的网页的时候，浏览习惯是跳跃性的，速度非常地快，如果在版式设计的过程中，如果不能将信息要点让用户迅速地找到，这样的设计不管色调怎么和谐，看上去感觉多么都好，都是糟糕的设计。
我对信息要点的想法：
1 一屏内的页面要点控制在3个以内，并且清楚要点的主次关系。

2 装饰的元素需要理性地使用。什么是装饰元素？色块、花纹、图标、线条等等。当你选择要用到这些东西的时候，先想为什么，而不是“我感觉”、“因为这样好看”，是否能用别的方式来达到一样的目的。

3 减少要点周围的干扰因素。要点的分布要掌握节奏，不要扎堆了，一段文字都加粗了跟没有加粗的效果其实一样，所以，要弱化要点周围的信息。

控制并利用留白
在名片的设计中，留白的好坏直接影响名片的信息传递和美观，段落与段落的距离，行与行的距离，字与字的距离，包括四周边缘的空白距离，字的横向排列形成线（行），线的纵向排列形成面（段），面的排列加上留白形成视觉的节奏、比例。他们都通过这样的点，线，面划分了整个画面。是居中还是左对齐，留白的多少将会在潜意识里面告诉读者什么重要，内容的分类。

在网页设计中是一样的。
1 如果我们能让字的排列形成线，那线是否就是多余的呢？
2 如果用文字段与段之间能将区块划分清晰，还需要用底色吗？
3 一行字是否太长了不适合用户阅读？
4 一个段落是否因为行太多了造成阅读压力？

当然，也不是说不要用装饰元素，装饰元素从理性的方面看可以起到划分区块，突出要点的作用，另外，还有品牌识别的作用，但别让这个成为使用它们的借口，有些时候没有那些元素，一样可以达到目的，比如flickr。

做视觉设计的并不是艺术家，不是感性的，更没有什么“美工”之说。

相关话题：版式设计名片的设计源地址：http://uitony.com/?p=17

个人名片设计实例

苏杰 — 2009-02-27 01:15:12

最近做了个小小的个人产品，秀一下：做它的过程也是用产品设计的思路，并且轻量级的产品对应轻量级的文档，只有一个简单的思维导图，产出物图下图。

说说思路，从“战略层”开始。问题的提出——“我喜欢交朋友，喜欢乱发名片，但很多私人场合不想用公司名片。”所以“名片”这个产品，需要版本细分，于是决定做个“人名片”。

用户需求（自己是设计师又是用户，给自己提起需求来都是归纳好的，真实产品的用户可不会帮你想这么多）：

Ø 体现个人特色，具体为3点：

n 真实感：爱好、经历、专长，有血有肉的人（公司名片把人符号化）。

n 亲切感：把对方当朋友而不是客户（公司名片适合商务场合）。

n 专业感：由名片做介质，推导出“我设计产品很靠谱”。

Ø 与陌生人破冰难，有个道具会好很多：

n 假想台词：你好，这是我的个人名片……不给你公司名片是因为blabla……反面是我的关键词（对业内人士说“标签云”）……你可以选一个词问我个问题……

Ø 对个人网站iamsujie.com的推广

经过需求分析，得到如下产品需求：

Ø “范围+结构”，需要哪些元素，之间是什么关系

n 正面：我是谁，在哪儿做什么，怎么联系

u 苏杰（大字醒目）

u 产品设计师 @alisoft，Alibaba Group

u 联系方法：website、email、msn（初识，咱先在网上联系着）

n 反面：Tag Cloud是设计理念的集中体现，大中小三级字号，突出轻松的元素（爱好），因为给名片的都是初次相识，方便迅速找到话题，同时不失“业内人事”的味道。

u 爱好：民科、台球、骑行、魔方、乒乓、K歌、升级

u 经历：浙江大学、混合班、CKC、BME（阿里相关的正面已有）

u 专长：互联网，软件、电子商务、用户研究，UE、PM、商业架构、PD、产品经理、需求分析

Ø “框架+表现”，风格与iamsujie.com一致，统一个人风格（颜色黑白橙，字体…）

n 正面简洁清爽，强化真人给对方的第一印象。

n 背面乱中有序，隐喻个人特质。

设计好之后的实施就很顺利了，找了晶晶帮忙，很有sense的mm，只小改了一次就定稿了，最后淘宝找了一位卖家制作，已经开始到处“片”了，：）

Web设计师的名片

千鸟 — 2009-04-06 16:35:36

前天晚上电话意外欠费上不了网，于是做了这个小东西。

几年时间攒了很多公司名片，阅过不少著名公司作品。另外还经常接到设计师的个人名片，感觉特好玩，因为名片最能体现设计师的设计风格、水准和个性，而且因技术领域而异。但是我经常在想，应该如何体现web设计师的风采？如何表现high quality web design？而不是千篇一律的平面设计造型，互联网在某些方面是否会更具优势？

最开始用photoshop画，感觉很不称手，因为效果始终与我所熟悉的手艺不契合。于是突发奇想用web原则来尝试也许是件更好玩的事情，并且根据我的经验，在不断尝试的错误中更能获取灵感。除一贯秉承的信息设计标准，可能唯一的小聪明就是用代码写出来。

第一版设计大标题使用Times New Roman，但我想要凸出效果时被拒绝，因为这个字体竖条太细没法凸出，只好委屈求全换了Microsoft YaHei。继续调整中，打算用400g日本进口象牙卡，有印前高手路过请指正，有兴趣的web设计师不妨也试试。

Name Card v1.0
http://rexsong.com/webdesign/namecard/1.0/code.htm

相关话题：名片的设计源地址：http://blog.rexsong.com/?p=6043

交互设计师的名片

捉刀人 — 2009-04-14 21:34:13

前不久时间读到苏杰的一篇博客——个人名片设计实例，几天前又读到千鸟的一篇——Web设计师的名片

于是乎，我也跟风尝试设计一种交互设计师的名片，成品尺寸是90×48

相关话题：名片的设计源地址：http://www.erlet.com/140

名片的印前处理

西乔 — 2009-06-18 22:17:41

网上现在搜不到啥文章把名片的印前处理讲明白的。可能真的搞印前的人不屑于写，但名片又是设计师们经常要做的东西，也没必要为此专门去系统学习印前的知识。我就把我知道的讲一下。

1：印刷方式

激光彩印：速度快，对于印数几百张的成本低。颜色漂亮。

激光彩印现在已经成为主流模式了。

黑白激光打印，就是黑色碳粉，通过静电附着在印刷材质表面。

彩色激光打印，就是CMYK四色碳粉，分四次附着在印刷材质表面。喷四种颜色的粉的时候会同时渗出一种粘合油把颜色们混合起来。颜色的控制是通过控制CMYK四色碳粉各自数量的多少来调配的。

一般每张纸上10张名片，印完以后覆膜，再裁切。

四色胶刷：传统印刷工艺，需要出片打样（菲林），但不是上大型的专业印刷机。而是专门的小名片印刷机，用一种名片大小的纸，每次一张。

2：印前处理注意事项。

名片的印前处理主要注意出血和单色黑问题。

其它：

名片的分辨率不能小于400dpi。
如果在矢量软件中制作，文字必须转成路径。
在图像处理软件中，一开始就使用CMYK模式和用RGB做完后再转成CMYK模式，没有区别。
图像处理软件处理CMYK的时候会速度变慢，部分滤镜不能生效。
不能在RGB和CMYK之间来回来去转换，图像之类是有损的。
线条最细不能低于0.076mm，低于这个印不出来

——————————-

出血：出血的意思就是在实际图像尺寸之外再多做一点，这是针对裁切的。

因为裁切、机器嘛，不会特别精确，可能往左多切了一点，往右多切了一点。所以要预留几毫米，以防裁切机犯错误。不然多切了一点，就会出现难看的白边。

名片的出血一般是3mm。另外距离编译1MM内不要出现文字和logo。

——————————-

大色块：对于深色而言，CMYK四色填色总值超过250％以上的大色块，（比如C：80%，M：80%,Y：63%，K：90%这种就超过了。）印刷时容易造成背印。

对于淡色而言：四色设定总值不能低于5%，否则印不出来。

——————————-

单色黑/单色灰：单色黑的意思是设计稿在由RGB转为CMYK后，默认CMYK四种颜色里都有值（类似这种C:89、M:89、Y:89、K:89）。对于名片，文字很小，4色填色容易出现偏移和叠印问题。所以要求将CMY里的数字都清空为0。仅保留K中的值。黑色和灰色都需要如此处理。

如果小字使用了非黑灰类的颜色，建议将CMYK的值调整成只有2种颜色有值。原理同上。

3：偏色问题

印刷的偏色问题历来有之，色彩管理是个非常费神和费钱的学问。

偏色的主要问题是输入设备、图像处理设备和输出设备的颜色不统一。

如果要矫正为统一颜色，得用输入设备（扫描仪）扫描标准色卡，标准色卡和图像处理软件的配色模式统一。显示设备得用一个趴在屏幕上的小吸盘（里面有摄像机）拍下颜色，导回处理设备，通过专业色彩管理软件进行调配。

输出设备的矫正就更麻烦了。

首先颜色模式有很多种，RGB、CMYK、HSB、LAB。CMYK和印刷的模式最吻合。所以用于输出的基本都是CMYK模式。

CMYK分别代表青（C）、品红（M）、黄（Y）、黑（K）。其中青、品红、黄可以混合出几乎所有颜色，包括黑色。但是出来的黑色不饱和。且由3种颜色混合出来黑色，在印刷工艺中等于要把这3种颜色都轮流印在同一个地方。有一点偏差，就有有一种颜色印歪一点，所以就很难看了。于是要单独有黑色油墨来印制黑色和灰色。

灰色是最难印的颜色之一，很容易偏绿。这有一部分原因是由于在图像处理的还是很使用多种油墨来印制灰色。如果只在K上有值，情况会好一些。

CMYK和RGB之间的关系很逗。

颜色混合方法有2种。减色混合和加色混合。

减色混合的三原色的CMY，三者合成起来是黑色。两两混合起来分别可以产生RGB

加色混合的三原色是RGB，三者合成起来是白色。两两混合起来分别可以产生CMY

屏幕是内发光自亮设备，所以用的是加色混合，RGB模式在屏幕上会看起来很漂亮。

但印刷材质的颜色来自于光线反射，用的是减色混合，所以印刷的颜色模式是CMYK。

另外两者由于颜色生成原理不一样，两者色域有很大差别。有些CMYK能显示的颜色RGB显示不出来，有些RGB能显示的颜色CMYK显示不出来（特别是一些高亮色、金属色、鲜亮的青色、黄色）。

——————————-

扯远了。

所以在传统印刷中，解决偏色问题，第一是统一颜色模式，第二是要打校样。在远古时代，校样也是要出一次菲林，印刷一个小样，让设计师和客户们看看颜色是不是对。不对就再调。对了才能大批量印刷。

后来利润促进科技发展，有了数码打样机，用专门的设备可以直接数码打印出校样稿，上面甚至还有网纹干扰什么的都能看出来。

其实名片一般用不着。。。除非对颜色要求非常严格的公司。有全套VI系统，有标准色的公司。

——————————-

对于标准色有一个解决方案：就是专色印刷。

由于大型印刷设备就那么几家，大型油墨生产厂家也就那么几家。油墨厂家就提前混合好很多种专门的颜色，卖给印刷商。再出版发行一个庞大色版卡，上面印上每种油墨的对应颜色，卖给所有设计师。设计师们在使用专色的时候就会指定说我要***色卡中的***颜色。

其中最著名的就是Pantone色卡。
使用专色可以让颜色非常精确，设计师和客户都可以预先看到该颜色在纸张上的准确颜色。所以做了VI系统的企业都会指定几种专色作为标准色。

有人觉得这是一个其实比较笨的方法吗，由此可见色彩管理、印刷偏色是困扰了人类的一个多大的难题）

4 名片用纸

常用纸：
铜版纸：时尚杂志用的那种纸。表面光滑，比较亮白，容易吸收油墨。印出来颜色会漂亮。这是最流行的名片材质：铜版纸加覆膜（也叫过塑铜版纸）。纸张的厚度按克数算，300g以上就是很厚的纸了。

白卡、彩卡：印尼白卡荷兰白卡之类的。一般送水呀按摩呀的名片就是用克数很低白卡印的。如果自己用喷墨打印机制作名片，可以选用白卡类纸。但印刷出来颜色没有那么有光感、漂亮，偏色状况会较严重。彩卡就是有颜色的白卡。这两类纸的质感都非常像纸。。。

纹理纸：中布纹、细布纹之类的。提前在卡纸上压制好密度纹理不一样的花纹。和白卡纸一样，颜色不漂亮，容易偏色，纹理会影响颜色的附着。对色彩要求高不要选用这种纸。

其它质地：有一些其它的非纸类的名片材质，比如合成纸（很多层塑料薄膜，很结实，不怕撕不怕泡），塑料卡片，金属、皮革还有厚牛皮纸之类的。

覆膜：覆膜是指在纸的外面用冷裱的方式加上一层薄薄透明的塑料薄膜。可以增加质感、保护色彩、防水、增加名片厚度。
有普通膜和影楼膜。

普通膜一般就分为哑光和高光两种。哑光微有磨砂感，比较体现质感。

影楼用膜花样就多了，如果见过影楼做的婚纱照相册就会有印象。有纹理膜和激光膜。纹理膜包括磨砂纹理、布纹、丝纹、网格纹等。。激光膜覆完的效果类似我们买的电话充值卡或大头贴，在光线下会有激光图案闪烁。

一般价格300g以上铜版纸加双面覆膜在20多块钱左右/盒(100张）。

5 特殊印刷工艺

如果想做比较有特色的名片，可以在印刷局部使用一些比较特殊的工艺，让名片看起来比较特别或昂贵。

烫银/金：让局部闪闪发光。金属色是无法通过油墨或碳粉印刷出来的。

原理有点像我们小时候玩的转印画。通过压力和温度把金属箔上的金属转印到印刷材质上。

有普通烫印和立体烫印。立体的就是在烫金区域压上凹凸感。我记得美空的名片就是有一面立体烫银的大Logo。

常见的就是金银两色。金色比较土。。。

——————————-

UV:局部有轻浮雕感，表面在光线下看是塑料质感，光泽度非常高。

工艺是用丝网印刷将UV光油印刷到覆过膜的名片表面，然后通过UV光固机的紫外线照射，使光油层瞬间干燥，形成光亮的表面凸起，起到突出局部图形或者图案的作用。

覆过亚光膜的名片，制作局部UV效果最好。

UV印刷还有一种是消光UV，就是在高亮的印刷材质上，局部印上光泽度非常低的uv表面，效果也很特别。

—————————————–

凸版/凹版：印刷材质通过压力，让纸张变形，形成浮雕凹凸感。

——————————-

水晶：比UV印刷的浮起感厚数倍，也是塑料质感。不太容易找到加工商家。

注意，上面几种工艺都有精度限制，所以不能设计的太细太小。

——————————-

模切：把名片切成异型的。
有普通模切，把名片的直角弄成圆角。
异形模切：把名片整个切成你想要的形状。很贵。。而且别人很难收藏你的名片。

相关话题：名片的设计源地址：http://blog.xiqiao.info/2009/06/17/378

名片的设计 - UCD大社区

从名片设计说网页版式的细节

个人名片设计实例

Web设计师的名片

交互设计师的名片

名片的印前处理

1：印刷方式

2： 印前处理注意事项。

3：偏色问题

4 名片用纸

5 特殊印刷工艺

2：印前处理注意事项。