《UI设计流程》.pdf

UI设计流程 新工作工作一个月了（手机UI和网页UI都有做），每天很忙但团队很和谐，总 体来说很赞。自己从平面转做UI的一些专业的学习，多得一些前辈在网上的一 些经验分享，及教程。所以一直想出这个设计流程，给想换行，想了解工作流程 的朋友一个参考，不过一路无时间。这个文章按照我现在的工作流程来写，有出 入，或者不够规范的地方请见谅哦~整个流程分为三个阶段来写，1.原型2.设计 3.交接（图一） 一、原型 1.推荐软件：MindManager（思维导图软件） 2.工作描述：PM出产品原型图，小组讨论完合理性，修改确认之后，原型图会 给到UI和程序员。你拿到的原型可能如下图所示（图二），一页页的，带有部分 连接。你看完就可以作图咯~ 啰嗦：有的PM会给到你流程交互图（图三），有的也可能没有，脑补能力不好, 不知道哪个页面是哪个页面里面的你，可能就需要用到思维导图软件，自己先画 一下，给他们命好名，排好序，这样可以有条理，分清主次一个一个做，不乱。 （图四） 设计 1.推荐网站： 花瓣（图片分享软件，带采集功能，非常强大，喜欢的图都可以采上去） 图翼（优秀的UI设计平台） PSplay(你在ps里作图，可以同步到你的手机，手机UI的朋友可以实时调整看 上去不合理的地方。下载：/tool/23568.html) 2.要养成的习惯：命名、编组、双倍数。 啰嗦：设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果 图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有 好处的。做的每个图层都要给他个名字，一来你自己好辨认，二来你切图的时候 也免去了重新命名的麻烦。 命名规则： 交图 1.推荐软件：Markman(标注软件) 2.保存文件类型：高保真、标注图、切图、PSD源文件。 2.标注：给出大小、距离、颜色、字号之类的。 3.切图：切图每个页面一个文件夹，很多页面公用的可以单独放。 4.源文件 制作icon 1）苹果版 120px：Icon-120@2x.png 80px：Icon-small-40@2x.png 58px：Icon-small@2x.png 114px：Icon@2x.png 2）安卓版 36x36px：drawable-ldpi 48x48px：drawable-mdpi 72x72px：drawable-hdpi 96x96px：drawable-xhdpi