• 欢迎访问毛玉毛的网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入
  • 本网站主要是学习分享,个人电影资源收藏,互动信息交流,欢迎留言或加QQ群69731264
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

互联网设计资源总结笔记

总内容 毛家二毛 1018次浏览 未收录 0个评论

本文实用性和可操作性都比较强,对设计方面的成长,走着非常大的作用,注意学

  • 本笔记通过总结分享出来,希望可以帮助大家。至少在面对项目,脑暴过程中可以从设计一个完整流程思路上,有一些可以借鉴的资源;在发散思维时有明确的、可以学习的指引;但同时慎用资源,看多了也会对自己设计造成潜移默化的影响,容易一定程度上圈住自己;
  • 本笔记肯定不是最全面的,但却是不需要梯子即可浏览的,是亲测可用的;如其中有任何错误请同学及时指出,及时更正,一起学习进步;
  • 同时笔者也会不定期的更新不同方向的文章内容,文章目前大致分为几个板块:①知乎Live概要笔记;②TED听后笔记;③设计资源总结笔记,有需要学习的同学可以保持关注:黑马cn

我们这次从接手一个项目里面的交互文档开始,到设计一个完整UI,再到验收监工这么一个完成的流程思路上入手,总结资源方面涵盖如下(请根据不同需要各取所需)

①资源导航 ②原型H5 ③设计适配规范 ④图标icon ⑤配色 ⑥相关经验 ⑦标注切图 ⑧高清福利


资源导航

1、UXBees,专业的用户体验网站导航,设计网址导航,用户体验网站导航,UED资源导航

2、UI设计师导航网

3、学UI网-UI设计师导航网,最专业的UI设计网站

4、SDC设计师网址导航

5、欢迎访问设计类导航 祝快乐

6、nicepsd_优质的PSD资源

7、Show Your Designs With Style-mockup素材资源

8、lookAE各类影视后期特效插件素材资源库


原型H5

1、CoolSite360 – 响应式网站/微信小程序 设计工具

Coolsite360推出国内第一款微信小程序可视化设计工具 
集成小程序所有组件,在线进行小程序UI设计,支持Flex布局,可导出符合小程序标准的代码供后续开发;适应平台:支持MAC/Windows

2、Justinmind中文网

JustinMind是由西班牙JustinMind公司出品的原型制作工具,可以输出Html页面。与目前主流的交互设计工具axure,Balsamiq Mockups等相比,Justinmind Prototyper更为专属于设计;适应平台:支持MAC/Windows

3、Mockplus 做原型,更快,更简单!

Mockplus中的原型交互设计完全可视化,所见即所得。拖拽鼠标做个链接,即可实现交互。同时,Mockplus封装了弹出面板、内容面板、滚动区、抽屉、轮播等系列组件,对于常用交互,使用这些组件就可快速实现;适应平台:支持MAC/Windows

4、Epub360意派 – 专业H5设计工具

Epub360采用由简到难递进式产品设计模式,尊重用户已有的软件使用习惯, 在保证专业度的同时,将常用效果组件化,最大程度上减少用户上手难度、提高设计效率;适应平台:支持MAC/Windows

5、首页 Hype中国社区

Hype 是 Mac App Store 新上架的一个 HTML5 创作工具,其长处是可以在网页上做出悦目的动画效果,无需 Flash 插件。开发该应用的公司 Tumult 由两个前苹果工程师创建,并获得了 Y-Combinator 的投资;适应平台:支持MAC


设计适配规范

1、iPhone APP设计规范/iPad APP设计规范/Android APP设计规范/网页设计规范-UI设计第一站

(如需最新iPhone7和ios10的视觉规范,请移步自行so最新Apple人机交互指南:)

2、iphone 6plus适配中,设计版,物理版,放大版区别? – iOS 开发

物理版就是iphone 6plus实际的屏幕像素;设计版就是我们截屏iphone 6plus的界面在ps中去量,发现的尺寸;至于放大版,其实就是iphone 6的尺寸等比放大1.5倍得出的尺寸;

3.1、UI适配攻略·教程①名词阐述&倍率选择|GUI|原创/自译教程

3.2、UI适配攻略·教程②Android&iPhone碎片化误区|GUI|原创/自译教程

3.3、UI适配攻略·教程③规范的误区+适配原则/方法|GUI|原创/自译教程

3.4、UI适配攻略·教程④一稿配双平台|GUI|原创/自译教程

3.5、UI适配攻略·教程⑤【最终篇】详解验收|GUI|原创/自译教程

4、APP如何同时设计 iOS 和 Android?

不管你是在家,在公司,还是在设计师工作室工作,互联网企业都会找你去给他们设计 App。为了满足所有顾客的需要,这些企业通常需要同时开发运行在 Android 和 iOS 设备上的App。

5、三分钟搞定安卓+iOS适配问题

Android适配是一个大坑,你可能早有耳闻。但是别人告诉你坑,然后你也说坑,肯定是无法令人信服的。我们做学问,不能光知其然不知所以然,适配问题到底有多坑,为什么坑,以及如何从坑里爬出来,就是我们今天要探讨的话题了。

6、教你iOS APP设计一稿支持iPhone5/iPhone6/Plus

7、值得收藏!为设计师量身打造的DPI指南

文是为“初学者”或者作为从一开始就想要学习更多跨DPI和跨平台设计知识的中级设计师准备的序言读物。 没有复杂的计算和不可分析的图表,只是按照划分直截了当地将内容呈献给读者,便于读者理解以及直接运用到设计过程中,非常实用且专业的知识。

8、移动端设计尺寸基础知识

初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。需要很长时间才弄明白,从原理说起,理清关于尺寸的所有细节。


图标icon

1、Iconfont-阿里巴巴矢量图标库

阿里妈妈MUX倾力打造的矢量图标管理、交流平台,设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

2、Free Vector Line Icons (SVG, PNG, PSD, CSH, EPS, Icon Font and more)

你好!我的名字是perxis。除了设计Linearicons,我戴王冠,每天玩我的胡子。这很有趣。他们叫我推特@ KingPerxis。如果你有一个好的味道,你应该在Dribbble跟随我。对于电子邮件通信,可以随时使用我的联系方式。

3、Icon Font & SVG Icon Sets ❍ IcoMoon

icomoon正努力建立和提供最佳的影像学及完美主义者的图标管理工具。IcoMoon的图标库功能只有最好的图标列出。我们所有的图标都是在一个精确的像素网格上设计的。icomoon应用程序可以让你建立和在许多不同的格式包括SVG,聚合物,PDF,XAML,csh使用你自己的图标,图标的字体和简单的格式/的CSS Sprites。

4、图标下载,ICON(PNG/ICO/ICNS)图标搜索下载

5、Iconfinder – 1,200,000+ free and premium icons

6、Animaticons – Beautiful, customizable animated GIF icons

GIF动画有优秀的浏览器的支持,因为他们的工作像图像。他们是小的文件大小和自动播放。使用他们在网站,演讲,电子邮件和更多地方。


配色

1、Coolors.co – The super fast color schemes generator

超快速彩色方案发生器!创建、保存和分享完美的调色板!

2、BrandColors

可以吸取一些知名企业LOGO上的配色,从而给自己的设计带来灵感和规范;

3、Adobe-color-wheel CC

大名鼎鼎的Adobe色轮参照

4、UI Colors – Get Awesome UI Colors for Your Website

5、coleure.com/


相关经验

1、移动端导航的七种设计模式(一)

任何APP的组织信息都需要以某种导航框架固定起来,就像是建筑工人拔地而起的高楼大厦一样,地基非常重要,之后你想要盖多少层楼、每层楼有多少间房,都在地基的基础上构成。而一个新的产品也是这样,合适的导航框架,决定了产品之后的延伸和扩展。

2、移动端导航的七种设计模式(二)

如果说标签式导航是APP中最普遍的导航方式,那么列表式导航就是最必不可少的一种信息承载模式,这种导航结构简单清晰、易于理解、冷静高效,能够帮助用户快速定位到对应内容。在APP中的应用也分为两种……

3、超实用!移动端界面中的版式设计原理(上)

在UI设计中其实也存在大量的版式设计原理,如果产品和设计都能对版式设计有一定的了解,那么设计师拿到原型的时候,评审设计输出稿的时候大家都能更好地理解对方的设计。总结了几种常见的版式设计原理,是工作当中做出良好视觉效果的前提。

4、超实用!移动端界面中的版式设计原理(下)

不单单是文字和图片需要设计,留白也是构成页面排版必不可少的因素。所有的白都是“有目的的留白”,带有明确的目的来控制页面的空间构成。常见的手法有几种,第一通过留白来减轻页面带给用户的负担。

5、UI设计师入门:7条实用法则让你制作好看的UI界面(一)

这篇文章不讲理论,只谈应用。我不会讲什么黄金分割、色彩理论,只有实站中总结出的经验和教训。就好像,柔道源于日本几个世纪以来的尚武精神和哲学理念。上柔道课时,不仅能学到打斗,还会学到很多关于能量、气息与和谐之类的东西。

6、UI设计师入门:7条实用法则让你制作好看的UI界面(二)

如果你想要成为好的 UI 设计师,你必须学会在图片上美观地呈现文字。优秀的设计师在这方面做得都不错,而水平较低的设计师往往在这方面也比较差,甚至完全不会。在学习了这部分以后,相信你会有很大的提升。

7、接地气!国内知名UED团队的设计流程是怎样的?

这个设计流程,更适合“对设计有要求的创业公司”,因为,它既包含大公司的规范化、核心设计过程,同时,又能适应小团队的快速作战。这个流程,虽然有9步,但其实不复杂,在我们团队,整个跨度,只有4周。


标注切图

1、Cutterman – 为设计更专注

Cutterman致力于改善设计师的工作效率,为设计师提供优秀、高效、实用的技术解决方案, 解放双手。让创意不再有界限, 让设计更专注!

2、APP界面切图命名和文件整理规范

3、Android设计中的.9.png

在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”。这种图片是用于Android开发的一种特殊的图片格式,它的好处在于可以用简单的方式把一张图片中哪些区域可以拉伸,哪些区域不可以拉伸设定好,同时可以把显示内容区域的位置标示清楚。

4、UI设计师怒转!如何做一份让工程师泪流满面的标注?

始终遵循,视觉逻辑符合工程师的开发逻辑。合理划分,再复杂的页面,用三步也足够能说清楚,信息不要挤在一起。考虑到页面在不同屏幕大小下的变化,间距是否固定,比例是否缩放,图片和按钮宽度是否自适应。任何细节和要求都写清楚写清楚,写,清,楚,不要指望任何人“意会”你的设计,任何决定都要有据可查。每一个标注本身也要注意对齐方式,更干净整洁的标注能让大家一眼找到所需。

5、一款APP的设计稿从设计到切图

站在GUI设计师的角度去把APP从立项到设计到输出切片的过程写一写,相当于工作流程的介绍吧,公司不同,流程不尽相同,但是终究还是希望对大家有所帮助;

6、Sketch Measure

让创建规范成为开发者和团队协作的乐趣,一个集成了所有功能图标的工具栏,可以方便操作每一个功能;

7、Zeplin – Verified

一个综合了MAC/WIN两个平台,并且兼容了sketch/photoshop双工具的插件,你值得拥有;



高清无版权福利

本笔记福利,附赠一些国外高清无版权,大图资源网站:

1、Gratisography: Free high-resolution photos

提供的图片每周都会更新,很多时尚流行的照片在里面,并且适合用在设计项目上。

2、picjumbo — free stock photos

提供免费个人和商业使用的图像,照片质量很不错,非常适合用在界面设计或其它项目上。

3、Unsplash | Free HD Photos

大名鼎鼎的Unsplash,提供免费高清晰度照片网站,无疑成为了获取图像的最佳资源站,比如你要制作 一份wordpress主题,需要banner图片,我想这里的图像最适合了。

4、IM FREE

该站提供搜索和分类目录,有人物、自然、艺术、生活、图标等分类。确实不错,可惜有的分类很少图。

5、SplitShire – Free Stock Photos for Commercial Use

超高逼格的大图无版权网站,首屏就亮瞎了眼吧。

6、Vintage and Modern Free Public Domain Images Archive Download

目前已经有5万张免费高清图像下载,设计师可以免费使用在你的创意项目上。


======我是分割线======

另外,设计工具Sketch大家都介绍很多遍,这里就不列举很多了,放一些可能也会是重复的资源网站大家看看,相对应的插件都可以在下面资源中站到,具体使用方法这里就不细说了,这里还是主要集合资源:

1、The best resources for learning iOS design and Xcode

每周放送最新IOS系列最新的设计资源;

2、sketch 4.0.3破解版更新 (破解版涵盖3.0,3.7,3.8.0 3.9以上版本) 安装and使用指南(20161107)下载链接更新)……………楼主最近苦逼,求赞助T.T
3、sketchchina中国社区

4、Sketch 素材网

5、Sketch 交流讨论及站点资源字体包

6、停不下来第二弹!13个好用到令人震惊的Sketch插件
7、Flinto中文网-致力于分享Flinto原型设计教程与资源

8、Principle – Animated Design

<全文完>

笔者也会不定期的更新不同方向的文章内容,有需要学习的同学可以保持关注:黑马cn


P.S.

如时间充裕,可移步浏览——

知乎Live相关回答:

1、如何评价前Google技术总监郄小虎的Live《工程师如何规划自己的职业生涯》? – 黑马cn 的回答

2、微信小程序(应用号)来了,对创业者来说有什么挑战? – 黑马cn 的回答

3、参加了与预期不符的知乎 Live 是怎样的一种体验?如何改进? – 黑马cn 的回答

知乎Live听后概要笔记:

1、知乎Lives概览笔记:专属时间管理系统 & 习惯养成方法论 – 黑马cn的文章 – 知乎专栏

2、知乎Live:《用户体验设计师的必修课》听后笔记 – 黑马cn的文章 – 知乎专栏


毛家二毛 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明互联网设计资源总结笔记
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址