篇一：自学设计入门,写给ui设计初学者们
自学设计入门，写给ui设计初学者们
自学设计入门，写给ui设计初学者们
经常能看到各类设计网站发布的关于自学UI设计的分享文章。这些文章有一个共同的特点，就是描述作者如何从一个零基础的设计小白，通过种种途径，成长为一个熟练掌握PS或AI的设计达人的，亦或是分享了一堆有参考价值的设计类网站或工具等等。这些文章的点击率很高，因为通过这些初学者眼中的“干货”，能够很容易地进行模仿，并得到技能上的快速提升。
但我想问的是，这真的是学习UI设计的正确方式吗，如果不是，那有没有一篇能够正确引领大家学习UI设计的文章呢?很可惜，我在网上搜了很久，没有找到那篇我认为是正确的文章。
导致这个问题，我觉得可能有以下两个原因：
这类文章的内容往往比较“湿”，理论性比较强，需要时间慢慢体会，不是拿来就能用的东西，因此文章的点击率往往较低，随着时间的推移，很快便淹没在了那些新鲜出炉的设计干货之中，而无法搜索到了。
那些真正优秀的设计师往往都早已过了初学者那个阶段，他们也更乐于分享自己的设计观点或杰出作品，却很难站在一个初学者的角度来写如何学习设计的文章了。
我也曾和很多设计初学者们一样在自学的过程中有过困惑，走过弯路。今天，我仍在不断地努力学习，去尝试理解设计的真正含义。我也希望通过这篇文章，能给那些还在设计门外打转，不得其门而入的学习者们一些不同的启发。
我为什么自学UI设计
我之所以自学UI设计，其实源于一次失败的创业实验。称它为实验，是因为它并不算是一次真正的创业，我和我的合伙人并没有放弃自己的工作，而是利用一些业余时间来做一个以实习生为主题的社区(那时还是“开心”、“人人” 这样的SNS社交平台大行其道的年代)。我那时是一家500强金融集团的应用架构师，因此，便当人不让地承担起了我们这个团队中程序员的角色，负责完成了整个平台的架构以及开发工作。但始终困扰我们的是，找不到一名优秀的UI设计师，能够把这个平台推到一个产品的高度。我们也曾经通过朋友介绍或在淘宝上寻找，合作过几位设计师，但由于种种原因(有技能问题，理念问题，投入度问题 等等)都无法达到我们的要求，最后也都不欢而散了。当然，我们的这次创业也最终以失败而告终。现在回想起来，失败的原因有很多，但缺少一名靠谱的UI设计师，导致我们的产品迟迟不能推向市场，是这次失败的一个非常重要的原因。
我始终觉得自己还是一个有着产品梦想的人(自我鼓励一下^-^)，因此，为了下一次重新启航行时，不再重蹈覆辙，我便决定开始自学UI设计。
自学路上的困扰
我在自学UI设计的道路上，走得并不平坦，有过很多困扰和挫折。今天想来，其实最大的障碍正是源于自身对于UI设计本身的理解不够全面和深刻所导致的。
概括起来，主要有以下几个发面：
对于学习UI设计的困难准备不足：由于在此之前，一直从事企业级应用的研发，因此，那时在我们的圈子里，设计师(我们更多称为“美工”)属于非常边缘的辅助角色。我也想当
然地觉得学习那些技能对于我来说是小菜一碟，几周就能搞定。但实践证明，我错了，真正能称得上是一个UI设计师。而随着我对设计本身理解的加深，对设计师的看法也完全转变了，他们不再是我口中的美工，而是一个能够左右产品优劣，驱动产品研发的关键角色。认为学习UI设计 = 学习 PS、AI等工具：当决定学习UI设计后，我便开始在网上搜的UI设计远没有想象中那么容易掌握，直到今天，我都不敢说自己已经掌握了UI设计并索如何学习UI设计，而“度娘”给我的答案便是大量的PS、AI等各种设计教程。我也是一路拼命下载，然后不分昼夜地学习。不久之后，我确实能够按照这些学习指南P出一些图，或是作出几个图标来了，但当我尝试独立去做一个完整的UI设计时，我突然发现我作出来的东西与那些我所见过的优秀设计仍是天差地别，即使是我完全模仿那些优秀作品做的设计，仍然感觉怪怪的，好像哪里出了问题，自己又说不清楚。这时，我才意识到我的学习方法可能错了，简单地说就是捡了芝麻丢了西瓜，虽然掌握了一些设计工具技巧，但却对真正的设计一无所知。
审美能力不足：另一个我遇到过的困难便是自身审美能力的不足。其实我想说，这不仅是我一个人的问题，可能也是我们这一代，甚至是几代人共同的问题。由于整个教育体系对于学生在美学教育上不够重视，导致我们从小缺少艺术和美的熏陶，美术课往往会被语数外等主课霸占，从而成为摆设。由于缺乏对美的感知和判断能力，导致我们很难准确评判自己作品的优劣，更不会知道如何去改善它。放到更大的角度，我们很难像苹果那样设计出伟大的产品来。
重新认识UI设计
在意识到学习方法的错误之后，我便再次寻求了“度娘”的帮助，但这一次我要找的是那些优秀设计师们自己对于设计的感悟，设计心得，推荐阅读的设计类书籍 等等。我也放下了手中的PS、AI，静下心来进行大量的阅读。通过这些阅读，我也渐渐了解并重新认识了UI设计。
经过对设计知识的重新梳理，我将所需要掌握的基本设计技能归纳为以下10点(我将会在日后的《技匠谈设计》系列文章中对以下每一点进行展开，并分享我的设计心得)
色彩：需要理解色彩的基本原理以及配色方法。色彩很难把控，因为它很容易被过度使用。如果，你还是一个初学者，那么尽可能使用柔和的色彩，仅在需要强调的地方使用更醒目的色彩。
字体与排版：文字往往占据整个设计内容超过80%的区域，所以理解如何使用正确的字体和排版方式非常重要。请将内容的清晰易读作为你定义字体和做排版的首要目标。效：动效能够显著增强一个应用的用户体验。他们能使你的应用更有生气和迷人，前提是你所设计的动效快速、流畅，并且是符合用户预期的。
图标：优秀的图标往往与我们每天见到的事物紧密关联，比如 相机、垃圾桶、云等等，能让人一眼就识别出它所代表的功能。因此，使用那些具有良好辨识度的图标，避免让用户产生混淆。
声效：声效在设计中用得很少，但恰如其分的声效能够提升用户体验。用户不用看到你的应用，光听到一个熟悉的声音便能识别出你的产品来。
获得设计灵感：设计灵感不是与生俱来的，你需要不断地寻找它。有很多获得设计灵感
的方法，下文中我将分享我的一些经验。
设计原则：流行转瞬即逝，但设计中最本质的东西却能永恒。设计大师们很早就认识到了这些，并将它们提炼为设计原则。你要做的是，理解这些设计原则，并将它们运用到你的设计之中。
用户体验设计：你需要了解你的用户，这样才能设计出符合用户需求的产品。学习设计心理学，将有利于你设计出更人性化的产品。
基于不同平台的设计：在不同平台设计产品有很大的差异，你需要了解产品所在的平台(如 IOS，Android)，并符合不同它们各自的设计规范。
设计工具：设计工具有很多，对于UI设计，我建议使用Sketch3，因为它是专为UI设计而生的，能给你带来更高的设计效率。
改变设计工具
自从我改变学习UI的方法之后，一直到今天，我每天都会坚持阅读 Designer News 上的每日推荐文章，它能让我了解国外优秀的设计师门都在想些什么或做些什么。而这之中，给我带来最大改变的便是，我放弃了原来使用的 PhotoShop，而开始使用Sketch来进行UI设计。因为我惊讶地发现越来越多的国外设计师，特别是在初创公司的设计师们开始使用Sketch作为他们的设计工具。
实践证明，Sketch的使用确实给我带来了极大的惊喜。
小巧快捷：Sketch只有41M，相较1.6GB的Photoshop来说显得非常的小巧。因此无论是安装，还是启动、运行，Sketch都非常快捷。
专为UI设计而生：Photoshop是一个图片处理工具，它包含了大量图片处理功能，而这些对于UI设计师来说是多余的，并会成为UI设计师们工作时的噪音，降低他们的设计效率。而Sketch则专注于UI设计，它的所有功能都只为UI设计服务，比如：使用统一的计量单位 Pixel 使你不必关注其他计量单位(cm，ml，picas)，支持HSB、RGB颜色模型和色板功能，使用Symbol可以将方便的复用你的设计元素，针对任意设计元素或元素组导出不同分辨率的图片 等等。另外你不用再面对一个一半功能都不会去碰的工具栏，也完全不用去关心那些与UI设计无关的东西，这使你更容易学习和掌握这个设计工具。
强大的插件功能 ：虽然Sketch的核心非常小，但它却提供了非常强大的插件功能。针对不同的设计场景，可以使用不同的插件。比如，你可以使用Sketch Palettes保存你的常用色板，并与朋友方便地分享。使用 Magic Mirror 可以将你的设计方便地展示到不同的实体模型(如: iPhone，iPad，书的封面 等等)。也可以使用 Sketch Content Generator 来批量地产生内容，这能为设计师节省大量的时间。还有像Measure、Dynamic Button、Sketch Constraints 等许多非常优秀的插件可以帮助你大大提升工作效率，从而使你更能够专注于设计本身。
以上只是Sketch所带来的众多优秀特性中的一小部分，网上已经有很多关于Sketch的设计教程和指南，你能通过这些资料，快速的学习并掌握Sketch。我正看到越来越多如Sketch，Affinity Designer, Affinity Photo 等创新工具对设计工具领域带来的变革，他们不再追求大而全，而更注重于以最简洁、高效的方式服务于不同的设计目的。这也正是互联网思维在设计工具领域的一个体现。因此，如果你是一个UI设计初学者，亦或已经是一名
UI设计师并正在使用PS、AI等工具，我都建议你尝试使用Sketch，因为，它是一个能给你带来巨大改变并代表着未来的优秀设计工具。
寻找设计灵感
对于设计初学者来说，经常会为找不到设计灵感而苦恼。而我想说的是，灵感不是与生俱来的，它需要你去不断地寻找。如果没有灵感，你将永远不能开始，更别说去完成一个设计了。下面是我使用的一些方法。
阅读
我没有上过任何设计学校或培训班，因此我的大部分设计知识，都是从阅读中获得的。我几乎不读那些30天速成系列的书或关于设计趋势的文章，因为我知道技术的变化是非常快的，正如，我现在完全使用Sketch来做设计，而不用PS一样。我更关注设计的本质，书是获得这方面知识的很好途径。
下面是我书橱中的一部分设计类书籍，我阅读那些对设计有着深刻思想的人物传记 如《乔布斯传》，与设计相关的心理学书籍《设计心理学》、与色彩相关的《色彩设计》，与字体相关的《设计师的自我修养》等等。也正是通过这些书籍，让我逐步理解了设计的内涵，从而让我彻底走出了之前学习设计时的误区。
另外我也会读一些网上的优秀文章，Designer News 是一个我获得高质量设计文章的优秀网站，在这里我可以看到最新的来自全球设计师的优秀分享。当然，我也在 优设、推酷、Medium 等网站上阅读那些具有思想性的设计文章，并且通过关注一些优秀的设计师，从他们身上学到了很多经验和启发，给我学习UI设计带来了极大的帮助。
收集优秀设计
另一个获得灵感的方法是收集优秀的设计作品。Ember是我用过的用来收集设计素材的最佳工具。更棒的是它支持订阅功能，可以从Dribbble这样的网站自动下载设计作品，并让我非常方便地浏览和收集。(下图为我的Ember应用截图)
除了Ember之外，我也使用Pintrest来收集手机上看到的优秀设计，并按照分类添加大我在Pintrest上创建的Board中。
你所做的每一件事情，它的背后都可以和艺术联系在一起。只要是付出了努力，精心制作，并能反映出作者情感与灵魂的东西都可以被称为艺术品。想一想你平时喜欢做的事情，阅读，散步，美食或者看展览。这其中的每一件都与一种艺术形式相关联：写作，环球旅行，烹饪、摄影。你会发现当你当你不断完善某一项技能的同时，其他技能也会得到加强。对于设计来说，上面提到的 写作、摄影、旅行等都是对设计能力的很好补充。
篇二：如何零基础自学UI设计
零基础如何自学UI设计
看了这么多答案，我也来讲讲我的自学设计之路
2011年，大学一年级的时候，我的专业是软件工程，但是我奇怪的被分到了物理电子工程学院，老师从来不教软件，天天教电路基础和大学物理，由于没兴趣，我从来不去上课，就和同学们开黑打dota，这样打了一年。
2012年，大二了，我妈有一天和我讲，说以后肯定不能帮我安排工作，我突然有了危机感，如果毕业了我还没工作，会很丢人，我父母都是教师，别人家的孩子不是出国就是考上重点大学，压力还是很大的。当时我还挂着4门课在学校。
当时喜欢研究各种手机越狱和雨滴之类的东西，然后有一天，我打完游戏上网的时候看到了一张图片
当时我还不知道，《1126》，设计师叫罗子雄，现在是锤子科技的视觉设计总监，那时候我还没有ui设计的概念，把这个都叫做主题，它太精致了，给我带来极大的震撼，不仅细节完美，而且还特别严谨，运用了黄金分割。如果你以为我看了这个作品就开始努力学UI那你就大错特错了,我根本不知道这是用什么软件做的，我开始学习了网页设计，研究css样式和html，学了半个月发现好像有点不对，这是帮助别人实现效果的啊。。。
接下来要讲的是我的临摹之路，这个相当漫长，也最为重要。因为UI设计也是设计的一种，所以它第一个要求就是你设计的东西要
美，如何能美？细节是最重要的，你需要观察，仔细的观察你和大神的作品之间的差别，然后再想办法实现它。现在设计之所以浮躁的原因我想就是很多人不愿意也没有耐心去培养自己的审美了。
这是我当时跟着临摹教程做下来的，一个比一个有进步，每个都花了一天或者半天时间完成，当达不到原作效果的时候就继续观察，继续改，现在一看还有好多问题，比如第一个铅笔的投影是黑色的很难看，第二个台球的边缘太锐利，很不真实，如果当时不是疯狂修改我想问题会更多。
当我临摹了半年以后，我认为我的ps技术已经很不错了，跟同学说话的时候也爱吹牛，说自己是ps大神，一天一个同学下午来我寝室，说你干嘛呢？不知道今天晚上团里要开荒？你的萨满装等多少了？
天天日常任务也不做。。。我说我画会图标，他说？？？我说我以后想当设计师，他说你别逗了。。。我当时心想一定要坚持下来！
做了快一个月，其实我在最后一天偷懒了，上面的哪个大的天气widget是用的原来的图抠下来的。。。
在这些过程中，我的技法运用越来越熟练了，其实做这种ui，只需要你用好图层样式这一个ps功能就好！剩下的就是不断调整内阴影，投影，还有渐变，一定要注意投影的颜色，不要用黑色！要用深色，比如说黄色就用深黄色当投影，蓝色就用深蓝色，这样。推荐大家去站酷看看牛哥的文章，他的分享真的是很详细也很实用，从字体选择到ui入门都讲的特别到位，在学习路上能有他这样的老师带路我想我很幸运，再次谢谢他！
当ps技术熟练以后，我就想着做一些自己的东西出来，然后照着照片用ps涂抹了一张定制耳机
篇三：主题制作教程
主题制作教程
目前主题大赛设计阶段已经结束，涌现出了很多优秀的设计作品，很多花粉在问，这些主题什么时候才能下载呢？别急，从一个主题设计稿转变为可以在手机上使用的主题，还有很多的工作需要做，希望各位能够参与其中，尽快的把这些优秀的主题开发出来和大家见面哦。那么现在我们就来说说怎么入手做这件事情吧。
一、前期准备
1. 准备好主题设计稿，需要是PSD或者AI分层源文件，因为制作时需要将设计稿按规范尺寸进行切图，分成一张张小的图片用于主题包中。
2. 下载华为Emotion UI手机主题制作工具，有了这个主题工具，制作主题就不再是一件很难的事情啦。目前主题工具正在根据大家的反馈不断优化，会越来越好用的哦。 主题工具下载地址：http://dl.vmall.com/c035hci8qe
主题工具的使用教程请见：
http://cn.ui.vmall.com/forum.php?mod=viewthread&tid=28015&extra=page%3D1&page=1
主题工具包含在Hi suite中，下载安装后在侧边栏就可以看到主题工具了。
3. 目前主题设计大赛优先开发的设计尺寸为xhdpi（720x1280px），目前华为只有D1手机支持此分辨率。如果你手头上正好有华为D1手机，那么就再好不过了，可以拿来测试你的主题包。（后续会推出hdpi（540x960px）分辨率的主题制作，可以支持P1手机。）如果没有华为D1手机，主题包打好后可以发给华为Emotion UI
编外团
队代为测试，后续会公布测试地址（这里是否先公布下发布测试地址？请俞丰安排）
二、Emotion UI 主题包简介
主题包是一个用zip打包的压缩包，命名时用hwt作为后缀，里面包含了该主题的描述、预览图以及各种图片资源，并按一定的目录结构进行组织。主题工具中已经包含一个主题包模版,可以通过点击主题工具左上方的保存按钮将主题包模版存出来查看。
有些文件夹里有一个res的文件夹，这个就是主题的图片资源存放路径，你可以对照这些切图将自己主题中相应的资源用photoshop软件存出来。如果有些图片不清楚是用在哪里的，请查看“主题包资源图片清单.xlsx”文档。替换优先级高的图片资源是对主题风格有比较大的影响的，建议你替换以保证主题的效果哦。另外，替换的时候要注意的是一定要保证图片名称保持一致，如果有改动，软件是无法读取的哦。
三、制作简单主题包
请先打开主题工具，对照侧边栏中的界面名称，按下面步骤一步一步来吧，主题看似复杂，实际上只需要在主题工具中将对应的切图资源一一换掉就可以了哦。
1. 描述文件
标题：请填入主题名字，你可以取一个合适的主题名填在此处。
设计者：请填入主题设计师的名字
开发者：请填入主题制作者的名字
版本、分辨率、保存路径目前暂不涉及，不用修改。
2. 解锁
四方向键解锁、向下滑动解锁、左右滑动解锁这三种最基本的解锁方式（如下图）可以通过主题工具直接完成。
如果需要做复杂一点的解锁方式，就需要通过软件代码来实现了，可以参考锁屏教程。你也可以提出你的创意，经过审核后，将由华为Emotion UI软件团队来帮你实现你的想法。
3. 桌面
桌面中所显示的widget和图标均分别在图标资源包和widget资源包中，所以桌面资源中包含的主要是底部栏背景图片、文件夹、桌面编辑时出现的垃圾桶等图片资源（如图）。
如下是桌面的文件夹打开、缩略图等页面。作为低优先级的替换要求。其中涉及到缩略图卡片的.9文件、文件夹打开等资源图片。如果想保证你的主题的完整度，不妨也可以替换这部分图片。
4. Me widget
Me widget是华为合一桌面上第一屏的widget，我们一般用网格来表明其尺寸规格。如桌面整屏为4x4个网格，Me widget占4x3个网格(如图1-1)。其中各个不同的Unit各自占相应的网格数，用户可以根据规格自定义排列。
如默认页面上：天气unit 2x1个网格/ 时钟Unit 2x1个网格/ 相册Unit 2x1个网格/ 联系人Unit 1x1个网格/ 音乐Unit 2x1个网格。这些内容在桌面第一屏，在主题中作为高优先级替换内容。(如图1-2)
同时我们也可以提供4x1网格的天气unit/4x1网格的音乐unit（如图1-3），用户可以在配置页面中看到并选择它们。
图1-1图1-2图1-3
如下是Me widget的编辑配置页面。作为低优先级的替换要求。其中涉及到编辑状态下的选框/按钮等资源图片。如果想保证你的主题的完整度，不妨也可以替换这部分图片。
当你看到Me widget的主题资源包时会发现，它包含两个目录。这是由于联系人Unit图片我们是直接从联系人模块中读取的。所以在打包的时候，联系人Unit相应的资源（如默认联系人头像）应该放在com.android.com这个目录下；其他Me widget资源则全部放在com.huawei.android.mewidget这个目录下。
值得强调的是，Me widget的资源包中涉及到的内容，如果需要替换则一定要保证文件名/文件类型（点九或非点九）的一致，否则不能被正确读取。如果是非点九的图片，也请保证切图大小的一致，以免布局上会发生错误。
具体资源的描
免费论文网友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.csmayi.cn Corporation, All Rights Reserved 共享时代 共享你我他 版权所有