UI设计小站

原创 素材网站

【ICON类】1. 阿里巴巴矢量图库：http://iconfont.cn/search?q=%E4%B8%AD%E5%9B%BD&id=-12. easyicon：http://www.easyicon.net/3. 千图网图标库：http://tool.58pic.com/tubiaobao/4. icomoon：https://icomoon.io/app/#/selec

原创 设计师の学习网站

优设网：http://www.uisdc.com/              综合性最佳的网站，有很多干货。翻译了许多国外的教程。UImaker：http://www.uimaker.com/

转载 腾讯实战案例！聊聊刷一刷红包预热HTML 5背后的设计过程

编者按：一个UV高达9700万的HTML 5页面是怎么设计出来的？这篇实战案例让你全方位感受腾讯设计师的流弊！作为元旦和除夕2亿现金红包预热HTML 5的设计师，今天里奥同学把设计过程中的思考和经验都总结分享出来，来学习！开始之际首先祝大家新年快乐～新年新气象，天天猴赛雷！今年除夕，QQ红包2亿现金大家估计都收获不少吧（反正我是刷出了不少，哦呵呵呵呵！），而在大家欢乐刷一刷的背后，我们也是

转载 【精】配色达人速成

转载 【精】配色弱有救了！教你利用图片创建独有的色彩方案！

编者按：@飞屋睿UIdesign 这篇文章所讲述的配色方法和之前我们发布的《设计师必备取色技巧！教你在PS里通过照片创建色板》基本是相同的，素材处理和细节考量稍有差异，两篇文章互为补充，可以为纠结于配色的你点亮一盏灯。我们开始设计手机网页时，总是需要先确定好网页的配色方案。那么，这时，除非是客户提出色彩方案，我们大部分要面对的情况的是，根据客户的需求创建出一个色彩方案。在此，我想教大家如何从“

转载 【精】色彩三刀流！为新手量身打造的UI界面配色方法

如何快速选择或搭配颜色？今天@Micu设计 和大家介绍在界面中最为常用的三个方法，简单实用，附上大量的优秀实例，特别适合刚入门的色彩新手，学起来！快过年了，大家手头上的事都很多，于是很多同学要设计活动页面或者APP界面大改版等，那么如何快速的选择或搭配颜色呢？“选择”和“搭配颜色”，听到这两个词汇的时候，是不是从潜意识上就会有反感，心理琢磨着，这绝对是个坑！肯定得翻来覆去的折腾一把。其实很多初

转载 【精】Photoshop抠图全方位攻略

如果你是刚接触Photoshop的新手，小编真诚建议先学抠图。当然这个建议背后有广为人知的原因，见下…来自微博网友：@小丑出品这才是我学习Photoshop的动力啊！如果你对此也有着狂热的兴趣，那就继续读下去吧。这些都可以帮你从小白成为高手！《超赞！设计师完全自学指南》《交互设计师修炼指南！教你从零开始成为优秀交互设计师》攻略分为三部分，基础篇最常见

转载 【精】设计师完全自学指南

本文译自国外高质量问答社区Quora，原文作者Karen X. Cheng，原是微软Excel的项目经理，后通过自学转型成为设计师。她讲述的自学过程详实细致且条理有序，读完会发现与想象中的大不一样，对于想自学设计但迷茫不知道从何入手的童鞋来说，可以遵循她的步骤去学习，除了规划得当，还能对设计有一个全局的了解 : ）阅读之前来看看国内的18岁天才少年如何自学成才建立他的个人网站设计师

原创 配色网站 【精品】

日本传统色彩：http://color.uisdc.com/jp/

原创 3D Model & 图片类网站

3D Model网站123：http://www.123dapp.com/易绚·CG：http://www.3demoo.com/美术盒子：http://www.9abox.com/guideUnity3D：https://www.assetstore.unity3d.com/cn/#!/home图片类网站美思：https://muse.huaban.com/s

原创 AR & VR类网站

VR：IDEALSEE：http://index.idealsee.com/IDEALENS：http://www.idealens.com/cn/home?need_login=0腾讯VR：http://vr.tencent.com/AR：LayAR：https://www.layar.com/Augment：https://manager.augment

原创 【PNG压缩工具】TinyPNG

TinyPNG：https://tinypng.comAtool：http://www.atool.org/pngcompression.php

原创 实用字体总结

Q版圆形字体：方正胖头鱼简体、方正准圆、锐字云胖头鱼体

原创 好看的中文网站

橙黑白配色：http://www.picovr.com/index.html蓝黑白配色：https://www.ucloud.cn/

原创 banner字体

中文：trends

原创 iCreatorVR 1.0.0 工作小结

APP开始制作的时间是2016.05.16，APP发布时间是2016.08.04。终于经历了一个完整的APP制作过程，从产品经理出原型交互图，跟产品确定主界面的风格，到UI这边出全部高保真图，然后再整体调整细节后切图标注好交付给程序。一直到后期跟着程序调整和修改BUG。在APP STORE发布自己的第一个产品，心情无比激动。大家齐心协力去做好一个产品的感觉，真的是很棒。再重新梳理一遍工作流程：

转载 英文字体（for banner）

01. BRICE>>> 字体下载02. Original>>> 字体下载03. Timeburner>>> 字体下载04. WAYWARD>>> 字体下载05. Halogen>>> 字体下载06. Blern>>> 字体下载07. Neptern Harb

转载 iPhone屏幕尺寸、分辨率及适配

转载地址：http://blog.youkuaiyun.com/phunxm/article/details/42174937/

转载 【ICON查看器】轻量级图标测试工具ICON STRIKE：快速主屏查看

这两天选icon，想起来有这么个网站可以快速在手机上查看效果。给大家推荐了一下，人人都说好。flinto地址：https://www.flinto.com/strike纯html实现 直接进网页连接https://www.flinto.com/strikeIcon Strike+DeskConnect实现快速查看拖动图标到框里可以通过邮件，短信和

转载 100个弹框设计小结

团队的JHong，在最近2年一直在做WebApp相关项目，设计过上百个弹框，其中总结了一些心得，将透过以下文章介绍弹框在Web上的各种应用﹑技巧及表现。什么是弹框?弹框是一种交互方式，用作提醒，做决定或者解决某个任务。弹框一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。由于弹框与当下流行的卡片式设计在表现形式上十分

原创 动效，动效

1.http://www.fubiz.net/2016/06/29/urban-photography-playing-with-lights-and-shades/           （fubiz的动效太可爱了，喜欢）

转载 教你简单快速的设计Banner

“不要太复杂，简单就好。要大气，要漂亮！”这是大多设计师面对需求提出者所共同听道的一个声音，然而说简单，设计并不简单。面对紧缩的时间与”大气”的要求，想要花太多的时间去雕琢一个好作品，在工作中并不现实，所以在较短的时间内拿出一个合格的设计品，是十分考验UIDer的。那么，如何能快速高效的设计出一个漂亮的Banner呢？选材：仔细选择一个与主题相关的形象或背景，不要复杂，简单就好。

转载 【精】高手教你做Banner！如何把banner做得传情达意

编者按：初入职场的设计师，可能每天都要做大量banner，工作多了，创意跟不上怎么办？其实创作banner也有规律可循，网易的同学就用大量案例 + 多个角度分享了他的经验，是一篇不可多得的经典文章，赶紧来学习一下。写在前面的话有人觉得做个banner放2张图，排几个字的事，一点技术含量都没有，像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的，其实一个banner可以研究

转载 没思路？教你3招轻松搞定电商Banner排版

@谢思靖 ：什么是真正好的排版，我觉得起码要做到清晰易读、信息突出并且观感上舒服好看，在这个基础上有突出的设计感、形式感，就是正真好的排版。怎么做？3个部分决定排版的步骤和方法，咱们分步来说。文章开始之前，针对一些板式设计新手，我们也推荐你可以补充一下基础知识，看看脍炙人口的《版式设计原理与应用》，有PDF下载哟。空间是文字之间、图文之间的排列关系，是排版的第一步和基础，一

转载 实用技巧！教你从层次/色调/创意3个方面设计出酷炫网页

大家在浏览网页时经常可以看优秀的海报设计，这些设计往往可以通过其优秀的颜色处理、场景打造、氛围渲染、排版布局、文字处理以及巧妙的创意等方面来抓住浏览者的眼球。那么今天我们就跟大家分享一下一些优秀的海报设计在网页中的应用。大家在浏览网页时经常可以看优秀的海报设计，这些设计往往可以通过其优秀的颜色处理、场景打造、氛围渲染、排版布局、文字处理以及巧妙的创意等方面来抓住浏览者的眼球。那么我们是不是可以

原创 视频网站

这个视频不错：http://www.mountainview.be/en/

转载 【团队协作工具】Teambition & 石墨 & 优快云

前几天，有粉丝朋友问我：美丫姐，为什么你的文末投票都是最后一个选项选择的人最多？！我一本正经的回答了她：因为设计师都有拖！延！症！不，可能说拖延症已经不适合设计师了！应该是拖延癌！！！作为设计师，如果你恰好在一家考勤并不严格的公司，那么你的作息可能跟正常的上班族，有着天壤之别：明明在当初幻想自己当上设计师之后，就会过上“工作的时候文艺的做做图，下班之后愉快的泡泡吧”的理性生活。结果TM

转载 字体界的黑科技！输入数字立刻生成酷炫信息图的字体

编者按：今天这款外挂级的字体必须颤抖着推荐给大家！安装字体后只要输入数字，就可以瞬间得到信息图，包括柱状图、饼状图、雷达图、玫瑰图等7类图表，完全不用多余的操作，而且作品也美观好看，绝对是业界良心！一起来看@凡屋SH 写的使用教程。这是一套专门用来做数据可视化的字体：FF Chartwell Font Family。这套字体包含七种字体，分别可以做柱状图、饼状图、雷达图、玫瑰图等7类图表（

转载 花了7天看了上千个交互动效神作，我总结出5个技巧

编者按：对一个全无经验的动效新手而言，如何制作出「正确」而不是「华丽」的动效？今天这篇Medium 上的好文，从克制、交互叙述流程、一步完成、不是动效的错和把握细节五个方面，附上案例分析，帮你学会基础的动画制作技巧。首先，我想大家会有这样的问题：什么是微交互 （micro-interaction)？来自 UXPin（一款在线可交互原型制作工具）的 Carrie Cousins 给出了如下定

转载 PS教程！手把手教你绘制3个效果酷炫的GIF动画效果

编者按：今天来一点简单好玩的动画教程，包括常见的Loading 动画、烟花动画和摩天轮旋转动画，操作不难，附有PS时间轴的入门手册，适合新人练习。为了避免写僵尸教程，有些地方还是需要大家自行思考并且延伸到更多的制作，如果仅仅参考教程做出的东西而不动脑筋，除了临时练手以外意义真的不大。往期教程：《新手指南！手把手教你玩转PS时间轴之基础操作篇》《轻松制作GIF动画！教你玩转PS时间轴

转载 27款张力十足的中文书法字体免费打包下载

@汉仪字库 ：端午节快来咯，提前搜集素材的设计师们有没有想过，该选哪个字体才能既不失传统，又有足够的商业表现效果呢？有的同学可能已经想到了，书法字体堪称是传统节日的不二之选。言归正传，27组免费打包的中文字体素材都在这了，赶紧下载备用！下载链接在文末 ：）举个例子，大家在近期的部分宣传中都看到了“书法”的广泛应用。△ 大鱼海棠海报△ 穷游网海报设计师们的尝试使书法艺术更

转载 有图有对比！125个提升网页可用性的优化小技巧（二）

编者按：这个系列的教程有125个实用的网页优化技巧，每一个技巧都有案例对比，保证简单易懂。今天@企业官网设计精选 翻译了第二部分 —— 在网页设计中帮助用户实现目标，一起来涨姿势！第一期回顾：《有图有案例！125个提升网页可用性的优化小技巧（一）》让常用功能和重要数据信息更接近用户预测用户的意图，让他们尽可能接近目标。△ 筛选出或跳至用户正在搜索的条目△ 将用户常选项目

转载 有图有案例！125个提升网页可用性的优化小技巧（一）

编者按：这个系列的教程到目前为止有5个章节，共125个实用技巧，每一个技巧都有案例对比，保证简单易懂。今天@企业官网设计精选 翻译了第一部分 —— 在网页设计中如何引导用户的注意力。学会一个就能受用无穷，更别说这一章整整有17个具体的方法了。在界面中突出强调一个聚焦点每个界面都应该有一个清晰的起点。用户应该从哪里看起？要设计清楚。△ UX策略1 – 在页面标题部分添加视觉对比通

转载 设计try try try

一、层次层次分平面和纵深。任何一个设计师，都应该充分意识到，有节奏的层次变化，能在用户内心产生微妙的化学反应。我们来举个栗子。这是一个简单的底图＋文字（背景是卡塔尔航空），没有任何特别之处。然而却问题多多，不赶紧补救一下，根本拿不出手。首当其冲的是平面版式的层次，全部内容堆到一起，丢失视觉重心；其次是画面没有纵深感，稍作停留就觉得乏味。「Before」理一下思路，我们可以从

转载 从平庸到卓越！5个帮你快速提高设计稿质感的实用方法

@魔力大熊 ：为什么别人的作品看上去很有质感，细节到位，自己的就平淡无奇，谈不上满意。问题到底出在哪？如何给设计作品最后”定妆”，让最终的设计脱颖而出？下面这5条经验之谈（层次、色彩、阴影、字体、氛围）能帮你搞定这个问题。最后一公里？最后一公里！最后一公里「Last Kilometer」这个概念，最早是拿来形容公共交通末梢的问题。后来各个行业都开始用，就逐渐引申为完成一件事最后且关键性的一

转载 切图命名规范

转载 【Mark工具】一些好用的图片标注工具

身为一个产品汪有时也需要做做图，如果在设计稿上做好了标记与备注，这样与开发合作的时候，会更加方便。当然，设计湿也是可以用的。这几个工具是比较推荐大家使用的，其中有收费的也有免费的，可以酌情选用。P.S. 因为我只用过马克鳗和像素大厨，所以对这两个比较熟悉。后面的几个 PS 插件也是比较有名的，只是没有用过，了解不深，但是在设计师圈内口碑还是非常不错。MarkMan 马克鳗马克鳗

转载 UI设计教程之UI学习方法（看，想，做）

强烈建议大家先准备一个小本子        问：干什么用了?　　答：记录你每天学会的知识点。也可以理解为学习日记。　　看到了什么好设计画一画。　　想到了什么好点子，写一写。　　做会了什么或是想要学点什么，都记录下来。　　如果你保证每天学会5个知识点，一个月就是5*30=150，一年就是12*150=1800(这是保守的算法，不要纠结一个月是31天还是30天，不是重点)　

转载 UI设计的工作流程

要从UI接到的工作流程来说——产品/交互/设计。也就是说一般我们接到的是交互稿。这时候UI看到一个交互设计，需要考虑的是：　　1、这样的排布是否合理(比如960的屏和1136的屏幕是否都可以容下足够的设计关键信息)　　2、信息重点在哪里?　　3、用户人群是哪一类?在解决完上面的问题后，我们开始着手UI设计：　　1、从产品需求入手，考虑我们到底要用什么主色调　　比

转载 揭秘LOGO设计流程！超详细的腾讯云LOGO 改版记录全过程

编者按：一个优秀的LOGO 为什么值10，000元？让腾讯的同学来给你答案！这篇文章完整地记录了腾讯云LOGO 的改版过程，如何赋予品牌全新的形象，字体和配色怎么搭配，一份简易实用的LOGO 设计规范指南是什么样的…… 全是干货，值得一读。腾讯云基于腾讯多年来海量业务的技术锤炼，从基础架构到精细化运营，从平台实力到生态能力建设，通过游戏、视频、移动应用、金融、政企等行业解决方案和云服务器、云数