首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

设计狮与程序猿的“色色相惜”——空间配色大揭秘

ARCHY 2015-5-25 [DIVCSS] 来自PC 复制链接
51152
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
作者:王德尉;勤劳的金牛男,作为视觉设计师,爱好除了上班之外还有自拍、画画。故事是这样的

过去空间的配色很多,每次提取确实如同解密一样的充满“惊喜”。

亮瞎眼的邻近色 相近颜色太多,差异不大,光一个灰色都有三四个,隐隐的感觉这是在做色盲测试。
21.jpeg
设计师的痛  明明只是想要一个色值,却不得不打开差不多100M的PSD文件,去吸取颜色,去寻找颜色代码,打开时间可以看看小说了~~~
22.jpeg
坑爹的沟通  每次找开发调整颜色,都要从界面中截图说明是跟哪里的颜色,色值多了,别说是开发,设计师都疯了!
23.jpeg
虽然有了标注,但是还是可能遇到开发问:正文色是指什么颜色?色值是? “色无能”  害怕增加颜色,想想每个主题都增加一个配色,每次增加一个模块都需要随着主题的增长而增长,这是找死的节奏啊 我们对商城说:姐姐,不要再增加主题了,面对产品说:姐姐,不要异化模块了。 社稷师: 我本将心对颜色,谁知颜色照沟渠!趁着夜黑风高,咬咬牙,一不做二不休,不如来个“杀集取卵”~~~
24.jpeg
其实就是合并相近的颜色,在设计的过程中,经常会遇到同一个页面出现2种或2种以上类似颜色的情况,为了规避这种情况,把相近的颜色进行“合并再调整”,选出一个更适合的颜色。
25.jpeg
26.jpeg
1、对不同模块的颜色进行分类,包括“文字、色块、图标、线条、按钮”等等。并规范好每个分类的名称,针对每个分类下的颜色差异使用1、2、3…的序号进行命名,例如正文色T1、辅助文字T2、高亮文字颜色T3...
27.png
2、规范好能够适配主题的几套配色,只拓展主题、不增加配色,多套主题配合一套颜色,让主题使用无极限。
28.jpeg
29.jpeg
让设计和开发迅速传递信息。确定好10套配色的代码,并按分类定义色值。这里每一套主题的色值可能会不一样,但是编号肯定是一致的,例如文字T1~T10、按钮B1~B5…
30.jpeg
31.jpeg
当你已经完成了上面所有的事情,这个时候,你只需要给到一个“txt”文档开发,就可以一键完成单套主题所有的配色调整。
32.jpeg
开发哥调整颜色只需要更新txt文档即可,再也不用一个代码一个代码敲了,大大提高效率,同时也提高了设计同学对颜色使用的把控度。
33.jpeg

为什么要转发这篇文章呢?

我们也给很多客户做模板开发,也遇到很多做出来页面效果和PSD效果有差异,比较网页效果区块和PSD不一样,同时颜色渐变之类的也会有一定差异,导致出来会效果图差异,通过反复对比修改可以把效果基本做到99%的相同,如果客户要求非常高,做下来需要沟通的环境还是很多的。



上一篇:SEO的黑帽作弊手法详解
下一篇:网站外链建设的秘密,你真的会做外链吗
362938688 发表于 2015-6-2 16:44:10 来自PC
姐姐,不要异化模块了
www.zuchewangzhan.cn|www.banzhaowang.com|www.yhzb.org|www.211201.com|www.gchb001.com|www.seoh.cn网站推广
wills001 发表于 2015-6-11 12:14:10 来自PC
学习了 谢谢楼主分享
show119 发表于 2015-8-29 16:19:28 来自PC
强烈支持,站帮网有你更精彩
背影像条狗 发表于 2015-9-3 17:06:44 来自PC
好好学习,谢谢楼主分享
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表