我是一个视觉设计师，我主要做了哪些工作呢？

平面设计+UI设计（App界面设计&网页设计）+新媒体设计（H5&公众号运营）+视频剪辑

话不多说，转入正题——我的浏览器收藏夹里都有些什么？

NO.01 UI设计（软件设计）类

▲这是简书上一篇早些年的iOS App图标和启动画面尺寸设计规范，添加到我的收藏夹时间是2016年，虽然这篇规范是作者于2014年写出来的，但是对于现在的ios软件开发，有些规范依然是实用的。

▲这是「CSDN-专业IT技术社区」网站里的一篇文章——【iOS设计】一款APP从设计稿到切图过程概述，也是有关于ios软件设计规范的。简书上有很多小哥哥小姐姐是做IT的，感兴趣的也可以关注一下这个网站，是一个很棒的IT社区。

说到配色，相信很多人都深有体会，当你被领导告知要做一个“高端大气上档次”亦或是“文艺小清新”的PPT的时候，就开始犯愁了，究竟什么才是“高端大气上档次”，什么才是“文艺小清新”呢？毕竟我们大多数人对于色彩是不敏感的，这个时候你就需要用到下边的这些配色网站了。

▲关于网页设计的常用色彩搭配表《配色表》

▲网页设计，灵感配色网站，这里面还包括“交互设计、产品设计、视觉设计、设计工具......”等很多跟设计相关的内容

▲嗯......这是一个很“文艺小清新”的网站，这篇文章是关于清新配色，这个网站包含了“插画、设计、素材、壁纸......”等等，个人很喜欢这个网站

▲应该有蛮多人知道“堆糖网”吧，“堆糖——美好生活研究所”，这也是一个很漂亮的网站，因为上边有很多很漂亮的图片素材。链接里边的内容是关于配色的

▲这是优设网上面的设计师配色宝典，优设网相信很多设计师都知道的，这是很多设计师常用的网站，类似的设计师网站还有站酷网、UI中国等等

▲新媒体管家，一个专门用来做新媒体运营的网站。可以把你所运营的新浪微博账号、头条号、微信公众号、百家号等等添加到里边，方便进行统一管理，你在运营哪些自媒体平台一目了然。最近好像还弄了一个微信公众号更改字体的功能，微信公众号里的文章终于再也不是千篇一律的方方正正的字体啦，但是好像仅限于ios端，Android端用户还不能享受这个福利功能

▲知乎上关于新媒体运营工作应该如何规划、如何开展的文章

▲关于头条号文章推荐机制

NO.04 设计素材（样机素材）类

设计灵感和设计素材类网站在简书上有很多这方面的文章了。关于设计灵感的网站，众所周知的比如：站酷网、花瓣网、堆糖网、Dribbble、Behance、优设网、UI中国等等；通用设计素材类的网站比如：千库网、千图网、摄图网、素材中国、创客贴等等。然而下边这些我收藏的是关于样机的素材网站，感兴趣的朋友，了解一下

▲设计大学——汽车样机，当然这个网站还包括其他一些设计素材

▲绘艺素材——logo样机，这个网站的slogan是国内优质的素材站点，所以也包含其他很多素材

▲千图样机——有各种样机：画册样机、UI样机、logo样机、名片样机、VI样机等等

▲图品汇——logo样机

▲知乎上一篇关于H5设计制作工作的回答，包括9个工具及各自特点简介。

UP主本人习惯使用“易企秀”，操作容易，上手简单，比较容易产出自己想要的效果，虽然偶尔也会产生一些小小的bug，但是无伤大雅。附上几个我用易企秀做的H5供大家欣赏——

▲前段时间母亲节做的H5

▲2017年公司年会邀请函H5

▲2018年公司年会邀请函H5

▲视达网，这是一个专注于电商设计师培训的网站

▲网易云课堂，这是UP主经常用的一个学习网站，上面有很多免费的教程，摄影、设计、编程、新媒体运营......不啦不啦不啦等等，当然如果你想深入的学习，还是得支付毛爷爷的

▲新浪微博上有很多设计大咖，也会经常更新一些设计教程，值得大家关注

NO.07 优秀设计公司类

▲东道设计——中国知名logo、VI、包装、导示设计公司

▲正邦——中国知名的logo设计，VI设计，包装、标志、品牌设计公司

▲收藏这个网站纯粹是因为他炫酷的页面设计，给人的视觉张力和视觉震撼太强，简洁、大气、上档次。当然从他们的合作机构来看，包括“东方卫视中心、浦东电视台”等等，也是一家有实力的设计公司

▲360图书馆上一篇文章推荐的17个高逼格GIF网站

NO.09 其他几个简直不要太棒的网站

▲卤猫——一个唯美的插画师网站

▲Silk——一个可以生成炫酷图形的网站，可以导出png图片，上几张用这个网站生成的图片供大家观赏

以上图片均为随机手动生成，有没有觉得很炫酷？有的话，就赶紧点开这个网站试试看吧，绝对不会让你失望，可以用来做出很好看的背景图片

▲在线UI设计工具，可惜是英文的，不过对于英语好的童鞋来说是一点使用困难都没有的哈

NO.10 文末福利：献上两个UP主浏览器中收藏的两个视频，绝对福利！！！

▲一夜爆红！五重结局的高能Flash动画《孔明の罠》

▲古装美女群像之《笑红尘》——歌好听、人更美~

以上是我遇到的觉得不错的资源并且收藏起来在这里分享给大家，希望大家能够喜欢！

问题：视觉设计师是怎样让前端工程师 100% 实现设计效果的？

问题补充：发现自己设计的app和网页，在前端显示总是和设计效果偏差很远。和工程师沟通却说不可能100%呈现的，但实际上80%都没达到。想了解下，各位设计界的前辈是怎么做的，才能让前端显示尽量和设计效果一致。

下面是知乎用户@酸梅干超人

的回答，小编觉得很多价值，感兴趣的读者可以看一看，领悟一下。

首先，作为一个设计师，尤其是UI设计师，请跟我一起大声念：

必须掌握前端切图流程！！

这可能意味着你得学会HTML+CSS，或者要长时间和IOS或者安卓开发人员交流他们是怎么把图片和文字排进屏幕内的。别老是抱怨你是设计怎么能去学码农的东西，

设计人员对这些看似高深的源码有本能的畏惧和厌恶

无论你所在的公司在项目人员配置上如何贴心到位，但如果你自己没有掌握这些知识点，就不要妄想最后实现环节上能顺利收尾，因为你从出发点开始和程序员的认知就不对称，这些不对称是矛盾和偏差的根源。

例如你设计了这么个样式，倾斜、层叠，你有没有在设计的过程中考虑过这么设计的后果（国内外高能前端请不要加入此列）？你在当前宽度画布中设计效果似乎还不错，这注定该是个填满浏览器显示区域的设计，但是放大后呢？1920宽下怎么办，难道得是这个模样？？?

因为在水平线上无法直接延伸平铺的设计，在前端部分你让开发人员怎么帮你填补这两个区域的空白，你从设计初就不知道在对应设计类型下应该创建的画布大小（满屏响应式设计要准备好大小两种或多种方案），那进入切图环节我已经能脑补出你和开发人员是怎么撕逼的盛况了。

再者，假如我们填满这个设计稿（咳咳，比较粗糙的填上）：

这些没有内容被红线框出的背景区域最后怎么呈现出来？这里面几个主要的倾斜图形上面还叠加了对应内容、图片、文字，还有前后关系，别指望前端设计人员能轻松实现，如果你用一张背景图填充，那这张背景图的大小控制得住？加载过程要多久？导出WEB用途格式图片是选择“连续”还是“优化”？

现在很多小年轻们迷恋追波上大神们做的牛逼的动效，于是设计的时候光静态稿件不甘心，也来做个AE特效玩玩，压根没有考虑IOS或者安卓在实现这样的效果 时，需要哪些运行机制，有没有这样的控件支持，会不会不流畅等等！自己用了一整晚的时间折腾这么酷炫高大上的动画，开发这些土鳖居然告诉我不能实现恩？？ 撕逼ING.........

再普遍点的，是不是每次前端开发完你发现绝大多数元素和字体都不对，没有对齐，大小加粗等细节没有注意，但是开发拿设计稿就是没办法100%实现的借口的来搪塞你？？

在 原型步骤就想好对应的图层结构，交互特效，并和开发人员做好交流，是否可以实现，功能的评估一定要细致，否则会浪费大量的人力成本。还有原型是挺严肃一玩 意儿，但是大多数团队或者设计都没有认识到它们的价值，在这里不展开原型的细节了，这还可以再写一个长评，你们懂意思就好拉，画在纸上的手稿也比没有强。

下面放我自己平时做的原型：

无 论是WEB还是IOS、安卓、WP等等，都有对应的设计规范文档，我下面会帖出来。如果连最基础的设计规范都不知道就开始做设计，那么你要自己承担项目拖 延和被整个开发组人员问责的后果。在你动手前，请好好的做完功课，并且在每次环境大升级时跟进关注（例如新的iPhone6、6+发布的尺寸变更等）。

前人已经栽好了树，你需要做的就是在既定框架内完成设计即可。你要牢记自己的设计是基于相应的运行环境的，没有足够的能力前，不要有认为这套体系下的设计都很“土”，你是一个要成“大神”的男人，打破限制和规范是你的嗜好和品位。如有以上想法，请对着镜子里的自己说：

例如WEB设计下，12PX以下的中文字体无法被正常显示，文本只支持本地客户端已有字库，IOS的TABBAR、TOPBAR等高度是不能被随意变更任意 增减层级等等。这样的稿子如果被交付，并没有强有力的逻辑说服别人，只会让你的团队感受到你的不专业，增加矛盾隐患。SO，好好看看这些文章：

基础知识学起来！为设计师量身打造的DPI指南

擦！！突然发现一些收藏不见了~~后面慢慢更

这也是提升效率和整体视觉和谐感的重点，你要在大框架下建立小体系，这是你展示自己个性的部分，记得也要用文档记录下来，在以后的改版和开发过程中，严格遵守规范的参数，减少沟（si）通（bi）成本。

例如：主色色值、按钮的大小边框、各文字类型颜色大小、模块间隔距离等等。

我一直认为做完PSD还是SKETCH文件，往开发那边一扔，任务搞定的想法，是相当不负责任的一种行为。因为设计不合理的部分导致导出切图的工作变困难，因你的烂摊子，开发效率降低，完全是因为你的失误，不要抱怨和找任何借口。

比 如水平可平铺的背景是怎么最优化导出的？安卓适应多屏幕分辨率下，点九图是怎么进行标记和拉伸的，应该使用什么工具？需要应用透明背景的图片知道应该使用 什么格式？你必须设计出自己独立也能完成切图工作的设计稿，再要求开发能够完整实现，而不是让他们又来找你抱（si）怨（bi）哪里哪里是不行的你得重做。

标注的作用何其重要，开发人员对于元素的间距和文字大小还有透明元素的参数设置，是没有耐心一点点查看和检测的（没错，大部分情况会——凭！！感！！觉！！），你不好好把这些制作成文件白纸黑字，那么这个最重要的还原环节上出差错的几率也是最多的，往后修改最困难的。

　　UI设计师需要具备哪些工作经验?现在设计师受到很多企业的关注，薪资也在不断升温，想从事UI这个职业吗?没基础可以学， 机构千禧艺海数字设计培训基地为你提供平台。

　　主要要求从业人员精通Photoshop、Illustrator、Flash等图形软件，1. 负责公司产品在智能电视、PC端、移动端页面/应用的整体设计;2. 基于用户体验、人机交互、图形化设计、界面设计等前沿理论实现产品风格设计;3. 充分理解产品策划思路及理念，配合产品经理和研发人员实现产品各种界面的视觉设计;4. 建立和完善产品界面视觉设计规范;.5.根据交互设计及产品规划，完成产品(iPhone、Android 、Web平台App及网站)相关的用户界面视觉设计。

　　6.配合产品开发中的图形界面(GUI)设计。

　　7.完成产品相关推广活动的专题页面、FLASH的设计及制作。

　　8.与研发团队充分沟通协作，确认可控的误差范围和视觉效果的最终实现;

　　9.根据视觉设计的发展趋势及用户研究的结果不断优化产品的图形界面(GUI)

　　总体上一个合格的UI设计师的基本工作流程分为需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段五大基本流程。

文中图片素材来源网络，如有侵权请联系删除