you have been blocked&figure&&img src=&https://pic3.zhimg.com/v2-fdb1fcf5ecceca7d1a406ef176b283dc_b.jpg& data-rawwidth=&900& data-rawheight=&400& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic3.zhimg.com/v2-fdb1fcf5ecceca7d1a406ef176b283dc_r.jpg&&&/figure&&p&依旧是学员整理的素材进行反思的分享，本次分享的主题是 APP 功能模块入口的组件。分享学员：五期-成歌。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b12b0a3ecbb758aed9cfac_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1160& data-rawheight=&1209& class=&origin_image zh-lightbox-thumb& width=&1160& data-original=&https://pic1.zhimg.com/v2-b12b0a3ecbb758aed9cfac_r.jpg&&&/figure&&p&完整的组件素材将在近期放出，可以关注我的公众号获取：&/p&&h2&&b&超人的电话亭&/b&&/h2&&p&&br&&/p&&p&快速功能入口广泛应用于较为复杂的 APP 中，尤其是电商、外卖、音乐类的 相关领域。作为占据重要版面的组件类型，有哪些有趣的样式，如何进行设计，是每一个 UI 设计师都该掌握的基础知识。&/p&&p&以下为原文。&/p&&hr&&h2&&b&前言&/b&&/h2&&p&“快速功能入口”模块，它可以帮助用户快速进入某些具体的功能模块，起到导航的作用，对于复杂的应用引导用户快速找到想要的内容起到至关重要的作用。&/p&&p&下面我们看看有哪些案例：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-a92b79d182fd45a40b1d46e47cff37f9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&917& data-rawheight=&552& class=&origin_image zh-lightbox-thumb& width=&917& data-original=&https://pic2.zhimg.com/v2-a92b79d182fd45a40b1d46e47cff37f9_r.jpg&&&/figure&&p&我们都知道一个好的设计最起码应该满足两个条件：就是功能和美观。那么如何如何在满足功能的前提下又保证样式的美观呢？&/p&&p&这取决于我们使用哪种图标，且图标和文字的组合设计方式。下面，我们就分别对它们进行介绍。&/p&&p&&br&&/p&&h2&&b&图标的选择&/b&&/h2&&p&在功能图标的使用中，主要包含了三种类型：&/p&&ul&&li&面性&/li&&li&线性&/li&&li&扁平&/li&&/ul&&p&不同的类型应用对最终的视觉效果也会产生不同的影响，所以先来了解它们是如何进行展示的。&/p&&p&&br&&/p&&p&&b&面性：&/b&&/p&&p&面形icon可细分为两类：有外边框图形包裹的和无边框包裹两种。&/p&&p&前者主要使用相同的边框图形，并填充不同的色彩（纯色或渐变）。后者则直接将不同的颜色与细节直接作用到图标本身上。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-edd19ffa40d9f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1017& data-rawheight=&314& class=&origin_image zh-lightbox-thumb& width=&1017& data-original=&https://pic4.zhimg.com/v2-edd19ffa40d9f_r.jpg&&&/figure&&p&&br&&/p&&p&&b&线性：&/b&&/p&&p&线性则是只使用最简单的线性图标进行展示，在相对简约的应用中可以减少视觉干扰，更符合应用调性。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-a39dd38c3c979cb41e18c09add5aab8c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1005& data-rawheight=&400& class=&origin_image zh-lightbox-thumb& width=&1005& data-original=&https://pic1.zhimg.com/v2-a39dd38c3c979cb41e18c09add5aab8c_r.jpg&&&/figure&&p&&br&&/p&&p&&b&扁平：&/b&&/p&&p&扁平类的图标，则单独应用扁平风格绘制的插画图标，也是依据应用所处的风格与环境进行设计的，有更好的故事性和发挥空间。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-3b0bf088e4_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&981& data-rawheight=&478& class=&origin_image zh-lightbox-thumb& width=&981& data-original=&https://pic1.zhimg.com/v2-3b0bf088e4_r.jpg&&&/figure&&p&&br&&/p&&h2&&b&图标文字的组合&/b&&/h2&&p&注：下面将同属一组的icon和文字称为“组合”&/p&&p&在开始设计组合的时候，要先知道如何进行排版。很多新手在处理快速入口的时候，先将图标文字的组合独立排列出来并每个组合编一个组，然后再对它们进行等分操作，如下面的错误示范。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-208baba63dd019b6e6c4_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&750& data-rawheight=&342& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/v2-208baba63dd019b6e6c4_r.jpg&&&/figure&&p&但实际上，设计功能入口的时候，我们要做的是优先确定功能模块的宽度，然后根据每列的摆放数量，对它们进行等分处理。下面是设计的步骤。&/p&&ol&&li&如我们要在 375 宽的区域中，横向摆放五个图标，则可以等分为 75 宽的五个模块。&/li&&li&然后可以根据提前预设高度，或者根据内容调整高度的方式，确定每个模块的高。&/li&&li&最后，再将图标和文字垂直居中排列并给出适当间距形成组合，置入每个模块中进行水平、垂直居中对齐。&/li&&/ol&&figure&&img src=&https://pic4.zhimg.com/v2-eaaa157f431bf_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&548& data-rawheight=&310& class=&origin_image zh-lightbox-thumb& width=&548& data-original=&https://pic4.zhimg.com/v2-eaaa157f431bf_r.jpg&&&/figure&&p&&br&&/p&&h2&&b&图标的设计&/b&&/h2&&p&1.icon填充白色衬以彩色的圆形背板进行反白；&/p&&p&2.背板中的反白的icon大小最好不要大于背板直径的三分之一，不然在视觉上会显得不美观。如上方原型中的icon背板的大小为36pt，反白的icon为24pt。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-3406fc51edcedc1210bad17c2dd7b9fa_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&721& data-rawheight=&490& class=&origin_image zh-lightbox-thumb& width=&721& data-original=&https://pic3.zhimg.com/v2-3406fc51edcedc1210bad17c2dd7b9fa_r.jpg&&&/figure&&p&&br&&/p&&p&&b&颜色&/b&&/p&&p&一.单色填充，单个组合单色填充，不同组合之间颜色混搭，如：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-b8306d51cec6b0d834d4246bcda1c20f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1051& data-rawheight=&560& class=&origin_image zh-lightbox-thumb& width=&1051& data-original=&https://pic4.zhimg.com/v2-b8306d51cec6b0d834d4246bcda1c20f_r.jpg&&&/figure&&p&单色填充的应注意两点：&/p&&ol&&li&要有冷暖搭配。比如上方的暖色系的红橙搭配冷色系的蓝绿。 &/li&&li&还要注意各个背板各个颜色的饱和度和明度不能相差太多，大家可以去吸吸看上方的颜色就明白了·。&/li&&/ol&&p&二.渐变填充，则是通过渐变赋予图标更活泼的形式，如：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-1e121e0e8bc5b0ed0dee8f0b63b26573_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1047& data-rawheight=&550& class=&origin_image zh-lightbox-thumb& width=&1047& data-original=&https://pic4.zhimg.com/v2-1e121e0e8bc5b0ed0dee8f0b63b26573_r.jpg&&&/figure&&p&首先颜色的选择要选择中高饱和度 (50-100)，高明度 (80-100) 的颜色。不然整体会看起来特别脏；&/p&&figure&&img src=&https://pic1.zhimg.com/v2-e7490d3faf077a2316d5c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&375& data-rawheight=&441& class=&content_image& width=&375&&&/figure&&p&其次是颜色的搭配也要注意冷暖色的协调搭配，上面也说过了；&/p&&p&如何渐变：选择一个颜色后，它的过渡色位置为”它的右下角位置的颜色“，渐变的角度为左上角至右下角45°。如下图”热点入口“中的背板渐变；&/p&&figure&&img src=&https://pic2.zhimg.com/v2-ffbfdcf716c6fd_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&206& data-rawheight=&227& class=&content_image& width=&206&&&/figure&&p&这里有个调整的范围大家可以参考一下：H(色相)的调整不超过30，S(饱和度)的调整不超过20，B(明度)的调整不超过10。如上方”热点“的背板渐变色：&/p&&p&颜色分别为：#4 64 99, #340 83 97,这里的颜色模式为HSB；&/p&&figure&&img src=&https://pic2.zhimg.com/v2-4bf7fcadc9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&294& data-rawheight=&359& class=&content_image& width=&294&&&/figure&&p&当然，这样的渐变也可以直接应用到面性的图标设计中去。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-94af671ca363_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&899& data-rawheight=&503& class=&origin_image zh-lightbox-thumb& width=&899& data-original=&https://pic4.zhimg.com/v2-94af671ca363_r.jpg&&&/figure&&p&&br&&/p&&p&&b&另类处理&/b&&/p&&p&有时候为了将某个组合(功能入口)突出，会在此组合上进行特殊处理。一般是加入新的元素，比如在icon的右上角加入小红点，或者是直接在icon中加入品牌logo：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-6d4ae1fba014ae7dcdffc2_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&640& data-rawheight=&490& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic3.zhimg.com/v2-6d4ae1fba014ae7dcdffc2_r.jpg&&&/figure&&p&&br&&/p&&h2&小结：&/h2&&p&面形图标在“快速功能入口”的应用是最为广泛的。因为面形图标的视觉占比很大，具有强烈的视觉冲击力，可以方便用户更快速的寻找。在图标的选择上要注意表意清楚，做到图(icon)文一致，并且满足对”快速功能入口“模块的视觉定位(相匹配)。而在图标和文字的组合设计上，要注意间距的排布和颜色的选择。做到既能满足功能上的需求：快速导航和清晰指示，也要将之设计得美观得体，这才是一个好的”快速功能入口“组件模块应有的样子!&/p&&p&&br&&/p&&hr&&p&可以加QQ群交流，不定时分享干货：&/p&&p&以及关注公众号，获取往期文章：&b&超人的电话亭&/b&&/p&
依旧是学员整理的素材进行反思的分享，本次分享的主题是 APP 功能模块入口的组件。分享学员：五期-成歌。完整的组件素材将在近期放出，可以关注我的公众号获取：超人的电话亭 快速功能入口广泛应用于较为复杂的 APP 中，尤其是电商、外卖、音乐类的 相关领…
以下大多数是我收藏的非常优秀的设计师的个人网站，每个都各具风格，值得学习品味，希望能给你带来一些参考^_^&br&&br&&b&1. 将音乐与设计结合到一起的个人网站，动效的设计可以称得上惊艳。&/b&&br&&a href=&//link.zhihu.com/?target=http%3A//kenjiendo.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&KENJI ENDO&/a&&br&&figure&&img src=&https://pic3.zhimg.com/50/v2-91c64b8b4dc71a9fda89da3a_b.jpg& data-rawwidth=&2700& data-rawheight=&1440& class=&origin_image zh-lightbox-thumb& width=&2700& data-original=&https://pic3.zhimg.com/50/v2-91c64b8b4dc71a9fda89da3a_r.jpg&&&/figure&&br&&b&2. 精致的配色，精致的排版&/b&&br&&a href=&//link.zhihu.com/?target=http%3A//www.paulineosmont.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Pauline Osmont : Art director, Web Designer, Illustrator based in Lyon (France).&/a&&br&&figure&&img src=&https://pic3.zhimg.com/50/v2-44cb0b2cbedfa7bb1b26836facae822d_b.jpg& data-rawwidth=&2706& data-rawheight=&1410& class=&origin_image zh-lightbox-thumb& width=&2706& data-original=&https://pic3.zhimg.com/50/v2-44cb0b2cbedfa7bb1b26836facae822d_r.jpg&&&/figure&&br&&br&&b&3. 将个人网站的各个部分整合到一个横版游戏的不同场景中，浏览时连贯而且有趣&/b&&br&&a href=&//link.zhihu.com/?target=http%3A//www.rleonardi.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Robby Leonardi | &/a&&br&&figure&&img src=&https://pic2.zhimg.com/50/v2-e7fcaa5e4a0ec0fbcc8a7b1_b.jpg& data-rawwidth=&2701& data-rawheight=&1391& class=&origin_image zh-lightbox-thumb& width=&2701& data-original=&https://pic2.zhimg.com/50/v2-e7fcaa5e4a0ec0fbcc8a7b1_r.jpg&&&/figure&&br&&b&4. 黑色主色调搭配着怪诞的插画，个人风格非常强烈&/b&&br&&a href=&//link.zhihu.com/?target=http%3A//www.nerisson.fr/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&nerisson.fr &/a&&br&&figure&&img src=&https://pic3.zhimg.com/50/v2-dc1bd6bb81e8f_b.jpg& data-rawwidth=&2700& data-rawheight=&1426& class=&origin_image zh-lightbox-thumb& width=&2700& data-original=&https://pic3.zhimg.com/50/v2-dc1bd6bb81e8f_r.jpg&&&/figure&&br&&b&5. 一个跨领域多学科设计师，前Spotify的首席设计师和艺术指导，设计界的网红&/b&&br&&a href=&//link.zhihu.com/?target=http%3A//www.vanschneider.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Tobias van Schneider&/a&&br&&figure&&img src=&https://pic4.zhimg.com/50/v2-dabcf7a2a72b1b6ac0e32a_b.jpg& data-rawwidth=&2616& data-rawheight=&1400& class=&origin_image zh-lightbox-thumb& width=&2616& data-original=&https://pic4.zhimg.com/50/v2-dabcf7a2a72b1b6ac0e32a_r.jpg&&&/figure&&br&&b&6. 位于比利时的一个平面设计工作室，体会下小而美的感觉&/b&&br&&a href=&//link.zhihu.com/?target=http%3A//gravual.com/en/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GRAVUAL(TM) - Graphic Design Studio in Antwerp&/a&&br&&figure&&img src=&https://pic2.zhimg.com/50/v2-70aedec5077e8edb6f303_b.jpg& data-rawwidth=&2701& data-rawheight=&1361& class=&origin_image zh-lightbox-thumb& width=&2701& data-original=&https://pic2.zhimg.com/50/v2-70aedec5077e8edb6f303_r.jpg&&&/figure&&br&&b&7. 图片的投影会随着鼠标的位置发生变化，很有趣&/b&&br&&a href=&//link.zhihu.com/?target=http%3A//objetorocha.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Objeto Rocha [Buy Now]&/a&&br&&figure&&img src=&https://pic3.zhimg.com/50/v2-f258be9bcbb1_b.jpg& data-rawwidth=&2699& data-rawheight=&1457& class=&origin_image zh-lightbox-thumb& width=&2699& data-original=&https://pic3.zhimg.com/50/v2-f258be9bcbb1_r.jpg&&&/figure&&br&&b&8. 由上面介绍过的&a href=&//link.zhihu.com/?target=http%3A//www.vanschneider.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Tobias van Schneider&/a&设计的网站，第一次看会被惊艳到&/b&&br&&a href=&//link.zhihu.com/?target=http%3A//aquatilis.tv/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Aquatilis Expedition&/a&&br&&figure&&img src=&https://pic2.zhimg.com/50/v2-a52acc1a702986afea972c2_b.jpg& data-rawwidth=&2698& data-rawheight=&1454& class=&origin_image zh-lightbox-thumb& width=&2698& data-original=&https://pic2.zhimg.com/50/v2-a52acc1a702986afea972c2_r.jpg&&&/figure&&br&&b&9. 体会如何通过字体、颜色、排版表现力度和冲击感&/b&&br&&a href=&//link.zhihu.com/?target=http%3A//www.vo2-group.com/en& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&VO2 Group&/a&&br&&figure&&img src=&https://pic2.zhimg.com/50/v2-79bb24def13f7bae5e0c7e66bb40d8d9_b.jpg& data-rawwidth=&2730& data-rawheight=&1452& class=&origin_image zh-lightbox-thumb& width=&2730& data-original=&https://pic2.zhimg.com/50/v2-79bb24def13f7bae5e0c7e66bb40d8d9_r.jpg&&&/figure&&br&&b&10. 一个创意设计机构，它的官网排版和细节做的非常赞&/b&&br&&a href=&//link.zhihu.com/?target=http%3A//www.onlyorca.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Orca Design - Website and Graphic Design Agency Bristol&/a&&br&&figure&&img src=&https://pic3.zhimg.com/50/v2-eab40cdbfce4a865e2e61b7_b.jpg& data-rawwidth=&2701& data-rawheight=&1446& class=&origin_image zh-lightbox-thumb& width=&2701& data-original=&https://pic3.zhimg.com/50/v2-eab40cdbfce4a865e2e61b7_r.jpg&&&/figure&
以下大多数是我收藏的非常优秀的设计师的个人网站，每个都各具风格，值得学习品味，希望能给你带来一些参考^_^ 1. 将音乐与设计结合到一起的个人网站，动效的设计可以称得上惊艳。
2. 精致的配色，精致的排版
【更新】&br&&br&这篇回答写了快一年了，一直没有更新过。想等到自己正式找到工作了再来更新。如今正式找到工作了，到了该更新的时候了。&br&&br&自学完PS之后，准备了第一份作品集，之后在寒假之前开始各种投简历。当时我的心态很简单：“找一份工作去实际的操练一下”，但是真相远比你想得要艰难。&br&&br&在经历了29小时南下的火车行程，我来到了魔都上海。选上海的原因很直接，我喜欢的人在这里。每天早晨醒来第一件事就是投简历，然后坐着等一天电话，不停地查看简历状态。&br&&br&没有任何工作经验的大学生在求职过程中是最没有话语权的，你的成绩你的学历可能都不及别人相关领域工作过几个月的工作经验。在拉勾，智联，大街海投的一波全部阵亡。最后我也看清了自己只能去实习的事实，于是下了一个叫“实习僧”的APP，在这个APP上找到了我在上海第一份工作。&br&&br&公司是一家互联网金融公司，2000多人也算一家大公司了。当时工作的部门是市场部，主要的工作就是设计一些运营的插画，海报，着落页之类的设计，在大概一个月之后迎来了我人生中第一个项目，一款公司的借贷产品。需要为它做一个产品页，由我和带我的那个姑娘一人出一稿，最终项目组选择了我的设计。&br&&br&接到的第一个任务，真的很开心。在和项目组对接的时候还不忘去解释一下为什么这么设计。可是最后由于工程师的原因我的第一个项目没有完整落地，打开网址之后只有一张PNG的视觉稿。&br&&br&不过我也还是很高兴，毕竟是第一个接手的项目啊。觉得自己在成长为独立的UI 设计师的路上又夸上了一个台阶。&br&&br&之后又陆陆续续的接了各种活，每次都是我和那个姑娘一人出一稿，不过大部分他们都选择用我的设计。私下里我问过他们原因，他们说她的设计风格太老旧。所以后来的设计选稿总会让我有一种抢了她风头的感觉。&br&&br&部门的经理在我入职一个月之后就找我谈话说一定要把我留在公司，一个是因为我的设计风格比较新，更容易吸引用户；二是因为觉得我有潜力可以培养起来，以后公司也可以随意调用。我也是十分感激这位领导，是她给了我很多支持和鼓励。才让我对自己的设计越来越有信心。&br&&br&过完年之后又在公司实习了一个月，之后就到了不得不回学校的时间。总共在这家公司实习了四个月的时间，最大的收获就是PS AI 的使用越来越熟练，还有在面对实际的需求时应该从哪些角度考虑问题。当然还有一些职场的人际关系经验。&br&&br&在这个月，我认识了在我自学设计的路上对我最重要的人，我的师傅——知乎大V 酸梅干超人。因为我的这个自学贴，他联系上了我，说他在开一个设计课程，希望我可以过去听一听。我在了解到他的开课意图之后，决定去上课。&br&&br&&br&&br&&br&&br&&br&有的朋友在问学习的时间，素描利用寒暑假时间学习，加起来一共三十天左右；PS从九月中旬学到十月中旬，一共三十一天；其他的设计书籍，是利用平时课后的时间看的。&br&&br&现在仍在继续学习继续改进，希望可以找到一份工作实际的去体验一次真正的设计流程。&br&&br&这是下午刚建的站酷主页：&a href=&//link.zhihu.com/?target=http%3A//www.zcool.com.cn/u/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&陈傑NeilJ的个人主页&/a& 希望大家可以多多交流，站酷上有 很多好的资源和教程。&br&&br&【&b&正文&/b&】&br&自从打算开始自学UI设计开始，关注这个问题很久了，不过学习上一直比较忙，假期犯懒癌学PS这件事一直拖到大四开学才开始。到今天为止学习PS一个月，被学校催着找工作，没日没夜的学PS终于是赶出了自己的第一份作品，求大神们轻拍。&br&&br&一开始看到&a href=&//www.zhihu.com/people/f98f8c46da72470cefda7dd& data-hash=&f98f8c46da72470cefda7dd& class=&member_mention& data-editable=&true& data-title=&@酸梅干超人& data-hovercard=&p$b$f98f8c46da72470cefda7dd&&@酸梅干超人&/a&大神的高赞回答，非常全面的给出了一个自学计划。后来又看到&a href=&//www.zhihu.com/people/aeedf5b91a3f0a9de3426dbe497c743d& data-hash=&aeedf5b91a3f0a9de3426dbe497c743d& class=&member_mention& data-editable=&true& data-title=&@力力nevergg& data-hovercard=&p$b$aeedf5b91a3f0a9de3426dbe497c743d&&@力力nevergg&/a&的自学帖，又给了自己力量去开始学习。大神们的教学帖都十分详细了，我就不说方法了，下面就对自己的自学历程做一个记录。希望给大家一点力量，拿出你们的行动来！&br&&br&&b&初期启蒙阶段&/b&&br&&br&把知乎上关于UI设计，交互设计，用户体验设计的高赞答案看了一遍。对“&b&UI，UE，UX，GUI，交互设计，用户体验设计&/b&”这些初级专业名词有初步的了解，知道自己未来具体想从事哪一方面的工作。有了方向和目标再去努力会节省很多时间，有需要的同学请关注我的收藏夹，有一个关于UI设计优秀回答的收藏夹。顺便把大V关注一遍，他们经常会有好的回答。&br&&br&接下来按照酸梅干超人的回答，按顺序一步一步来，先学素描。利用两个暑假学习了素描，加起来大概三十天。&br&刚开始画的结构素描&br&&figure&&img data-rawheight=&800& src=&https://pic2.zhimg.com/50/v2-d6536eae9af721b8c9b15b5adac40f62_b.jpg& data-rawwidth=&1067& class=&origin_image zh-lightbox-thumb& width=&1067& data-original=&https://pic2.zhimg.com/50/v2-d6536eae9af721b8c9b15b5adac40f62_r.jpg&&&/figure&&br&然后是画球体&br&&figure&&img data-rawheight=&800& src=&https://pic1.zhimg.com/50/v2-fdfd9e1bb10a2e802203d_b.jpg& data-rawwidth=&1067& class=&origin_image zh-lightbox-thumb& width=&1067& data-original=&https://pic1.zhimg.com/50/v2-fdfd9e1bb10a2e802203d_r.jpg&&&/figure&&br&接下来开始临摹石膏&br&&figure&&img data-rawheight=&640& src=&https://pic2.zhimg.com/50/v2-f3c36f26ad806eadc8464392_b.jpg& data-rawwidth=&853& class=&origin_image zh-lightbox-thumb& width=&853& data-original=&https://pic2.zhimg.com/50/v2-f3c36f26ad806eadc8464392_r.jpg&&&/figure&&br&下一步是开始画静物&br&&figure&&img data-rawheight=&720& src=&https://pic2.zhimg.com/50/v2-a9f06caa9eb69ed7ee0de8_b.jpg& data-rawwidth=&960& class=&origin_image zh-lightbox-thumb& width=&960& data-original=&https://pic2.zhimg.com/50/v2-a9f06caa9eb69ed7ee0de8_r.jpg&&&/figure&&br&学画最后一天画的精微素描&br&&figure&&img data-rawheight=&3050& src=&https://pic2.zhimg.com/50/v2-837b1fe8e78e0d0b5dad65_b.jpg& data-rawwidth=&2000& class=&origin_image zh-lightbox-thumb& width=&2000& data-original=&https://pic2.zhimg.com/50/v2-837b1fe8e78e0d0b5dad65_r.jpg&&&/figure&&br&可以看出来进步是巨大的，最开始画的结构素描时候真是线都拉不直，最后的精微素描自己看了都觉得不想再画第二次（虐心的过程）。不过在老师的不断鼓励和夸奖之下，终于是学下来了。&br&&br&在学校里利用课余的时间，看专业书籍：&br&《用户体验要素》《破茧成蝶》《写给大家的设计书》《设计心理学》《启示录》这几本是很基础的入门书籍，都看了一遍，对未来要涉及的专业名词有一定印象。有时间要把iOS和Android人机交互指南看一遍。&br&&br&强烈推荐看罗子雄的一个TED演讲，里面提到的三个学习要素“多看，多做，多想”，直白有效。&br&&br&&b&中期练手阶段&/b&&br&&br&PS Ai AX这些都是初步设计软件，可以先开始学。&br&PS入门视频可以看李涛的，祁连山的，淘宝有一大堆高清视频。&br&&br&了解基本操作之后，推荐大家一个网络教学机构叫BIGD，我是淘宝买的教程，鼓励有条件购买正版教学视频，里面的课程直接个人觉得还是很不错的。每节课教你做一个icon，过程中我们要做的是不断地熟悉基本的UI设计操作，每课的课后作业必须做，这样对上课的内容是一个复习。&br&遇到一些老师教的小诀窍，把它们都记下来，前十节课是非常基础却非常关键的，值得多看几遍，做作业过程中忘记了这个效果怎么出来的一定要回放一下弄明白。&br&&br&这是我人生中画的第一个icon，连钢笔都不知道怎么用&br&&figure&&img data-rawheight=&800& src=&https://pic3.zhimg.com/50/v2-b93df651d5b203f9b5e975aa23f735eb_b.jpg& data-rawwidth=&800& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic3.zhimg.com/50/v2-b93df651d5b203f9b5e975aa23f735eb_r.jpg&&&/figure&&br&&br&&br&后来找到了教程，总算是摸到了门在哪里&br&&figure&&img data-rawheight=&800& src=&https://pic4.zhimg.com/50/v2-1ab96c7b841c290677cd_b.jpg& data-rawwidth=&800& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic4.zhimg.com/50/v2-1ab96c7b841c290677cd_r.jpg&&&/figure&&br&&figure&&img data-rawheight=&500& src=&https://pic2.zhimg.com/50/v2-cc2eb44daba76a_b.jpg& data-rawwidth=&500& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic2.zhimg.com/50/v2-cc2eb44daba76a_r.jpg&&&/figure&&br&&figure&&img data-rawheight=&800& src=&https://pic4.zhimg.com/50/v2-7b7844daefbee58d3ce19_b.jpg& data-rawwidth=&560& class=&origin_image zh-lightbox-thumb& width=&560& data-original=&https://pic4.zhimg.com/50/v2-7b7844daefbee58d3ce19_r.jpg&&&/figure&&br&&figure&&img data-rawheight=&500& src=&https://pic1.zhimg.com/50/v2-47d6aa2a3e5f16cc9cf14_b.jpg& data-rawwidth=&500& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/50/v2-47d6aa2a3e5f16cc9cf14_r.jpg&&&/figure&&br&&br&跟着教程一集的画，第二部分的作品。发在朋友圈里被同学夸厉害，也让我得到了及时的奖励。机械蝴蝶是临摹的，机械蜻蜓是原创的。&br&&figure&&img data-rawheight=&587& src=&https://pic2.zhimg.com/50/v2-13ee1b1de66faf7db5d0f143_b.jpg& data-rawwidth=&800& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic2.zhimg.com/50/v2-13ee1b1de66faf7db5d0f143_r.jpg&&&/figure&&br&&br&&figure&&img data-rawheight=&1000& src=&https://pic4.zhimg.com/50/v2-bb228ffa103_b.jpg& data-rawwidth=&1000& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&https://pic4.zhimg.com/50/v2-bb228ffa103_r.jpg&&&/figure&&br&&figure&&img data-rawheight=&1536& src=&https://pic4.zhimg.com/50/v2-fe71d0c312b1e_b.jpg& data-rawwidth=&2048& class=&origin_image zh-lightbox-thumb& width=&2048& data-original=&https://pic4.zhimg.com/50/v2-fe71d0c312b1e_r.jpg&&&/figure&&br&&figure&&img data-rawheight=&2048& src=&https://pic4.zhimg.com/50/v2-ea369b4f7ea6c9a23426_b.jpg& data-rawwidth=&615& class=&origin_image zh-lightbox-thumb& width=&615& data-original=&https://pic4.zhimg.com/50/v2-ea369b4f7ea6c9a23426_r.jpg&&&/figure&&br&&br&第三部分教的是交互设计和Axure的基本操作，第一次做出可以点击的原型，虽然简陋却还是很激动。&br&&br&第四部分是牛mo王老师的课程，对技巧的讲解很少，大部分是告诉你如何去设计。我的作品如下（ps:试了一次中文格式，真心不如英文的）：&br&&figure&&img data-rawheight=&1800& src=&https://pic1.zhimg.com/50/v2-c77a9d2d250_b.jpg& data-rawwidth=&1200& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&https://pic1.zhimg.com/50/v2-c77a9d2d250_r.jpg&&&/figure&&br&&figure&&img data-rawheight=&2048& src=&https://pic3.zhimg.com/50/v2-9ab67dac4_b.jpg& data-rawwidth=&444& class=&origin_image zh-lightbox-thumb& width=&444& data-original=&https://pic3.zhimg.com/50/v2-9ab67dac4_r.jpg&&&/figure&&br&可以看出，一个月的学习，虽然进步很大，但里面的配色，排版，交互形式仍需要提升。笔记本电脑画出来的图在iPhone上显示的时候饱和度都提升了。而且笔记本电脑画图啊时候高度会被压缩…这一点要注意。&br&&br&平时要多去dribble，behance,站酷上面找优秀的设计，然后不断的抄袭，磨炼自己的PS技巧。不要觉得国内的设计看不上，切勿眼高手低。我的临摹：&br&&figure&&img data-rawheight=&1500& src=&https://pic1.zhimg.com/50/v2-9b780e0cda88ed_b.jpg& data-rawwidth=&2000& class=&origin_image zh-lightbox-thumb& width=&2000& data-original=&https://pic1.zhimg.com/50/v2-9b780e0cda88ed_r.jpg&&&/figure&&br&&br&&br&下一阶段是找工作，我正在进行当中。如果有内推的小伙伴也可以联系我呀。找到了之后我会继续更新的。&br&&br&&br&其实在一个月之前，我为找工作还是继续读书的选择纠结了很久，甚至焦虑到睡不着觉。后来我的朋友一句话提醒了我“&b&我不知道什么样的选择才是对的，但我知道去做你最想做的，然后不要后悔&/b&”&br&&br&&b&我发现停止焦虑最好的办法就是直面你的恐惧，你的拖延，你的各种借口。然后不断的做做做！&/b&拿出你的行动来，时间会把你的结果显现出来。一个月没日没夜的画图，我仅仅只是摸到了UI的门，却还没有入设计的门，等待着我去学的东西还有很多很多。从零到一的突破我这种三本院校的学生都做成了，你们为什么不可以呢？&br&&br&所以加油吧！总有人会在合适的时候出现，带你走出迷茫。&br&&br&&figure&&img data-rawheight=&1334& src=&https://pic1.zhimg.com/50/v2-5a158b91e0b1b4a8fb363de31d5f51a7_b.jpg& data-rawwidth=&750& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/v2-5a158b91e0b1b4a8fb363de31d5f51a7_r.jpg&&&/figure&
这篇回答写了快一年了，一直没有更新过。想等到自己正式找到工作了再来更新。如今正式找到工作了，到了该更新的时候了。 自学完PS之后，准备了第一份作品集，之后在寒假之前开始各种投简历。当时我的心态很简单：“找一份工作去实际的…
号更新：&br&&br&&br&欢迎大家关注我的微信公众号：&b&ui每日推&/b&&br&&br&&br&我会在每周日更新我的视频教程，教大家如何零基础自学
UI ，内容包含详细的操作技法，对设计的理解，配色，版式的运用等等，另外每天推送国内外精选的十佳 UI 作品，只需两分钟轻松提高审美！&br&已经有1万人关注了，就差勤奋的你啦！请扫下面的二维码。&br&&br&&p&&a href=&//link.zhihu.com/?target=http%3A//weixin.qq.com/r/J0hgeDTE1mmprXAb9x01& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&weixin.qq.com/r/J0hgeDT&/span&&span class=&invisible&&E1mmprXAb9x01&/span&&span class=&ellipsis&&&/span&&/a& (二维码自动识别)&/p&&br&&br&......................................................................................................................................................................................................................................................................................................................&br&&br&&br&&br&&br&&br&&br&正文：&br&&br&&br&&br&&br&看了这么多答案，我也来讲讲我的自学设计之路&br&&br&2011年，大学一年级的时候，我的专业是软件工程，但是我奇怪的被分到了物理电子工程学院，老师从来不教软件，天天教电路基础和大学物理，由于没兴趣，我从来不去上课，就和同学们开黑打dota，这样打了一年。&br&&br&2012年，大二了，我妈有一天和我讲，说以后肯定不能帮我安排工作，我突然有了危机感，如果毕业了我还没工作，会很丢人，我父母都是教师，别人家的孩子不是出国就是考上重点大学，压力还是很大的。当时我还挂着4门课在学校。&br&当时喜欢研究各种手机越狱和雨滴之类的东西，然后有一天，我打完游戏上网的时候看到了一张图片&br&&br&&figure&&img src=&https://pic2.zhimg.com/50/d208aacba6_b.jpg& data-rawwidth=&900& data-rawheight=&1802& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic2.zhimg.com/50/d208aacba6_r.jpg&&&/figure&&br&&br&当时我还不知道，《1126》，设计师叫罗子雄，现在是锤子科技的视觉设计总监，那时候我还没有ui设计的概念，把这个都叫做主题，它太精致了，给我带来极大的震撼，不仅细节完美，而且还特别严谨，运用了黄金分割。如果你以为我看了这个作品就开始努力学UI那你就大错特错了,我根本不知道这是用什么软件做的，我开始学习了网页设计，研究css样式和html，学了半个月发现好像有点不对，这是帮助别人实现效果的啊。。。然后有一天看到邵飞老师的一个视频教程，是教你画图标的，需要用ps这个软件，我跟着做了一下，完全做不下来，我就百度如何学ps，找到了李涛老师的《ps高手之路》，这样开始一步步学习ps，每天也不上课就看视频学习。不得不说学软件是个漫长的过程。所幸李涛老师的讲解很幽默，也就跟着学下来了。&br&&br&接下来要讲的是我的临摹之路，这个相当漫长，也最为重要。因为UI设计也是设计的一种，所以它第一个要求就是你设计的东西要美，如何能美？细节是最重要的，你需要观察，仔细的观察你和大神的作品之间的差别，然后再想办法实现它。现在设计之所以浮躁的原因我想就是很多人不愿意也没有耐心去培养自己的审美了。&br&&br&当时站酷上有一个视频教程叫《十分钟UI设计》，是腾讯的设计师omega和老程一起做的，里面的内容特别好，大家可以去搜索一下，我跟着里面的教程做了很多练习，当时老程说，windows的图标是很不错的，当你能把一整套图标都临摹下来，你就出师了。&br&&br&&figure&&img src=&https://pic4.zhimg.com/50/5a108d8ada2f78a302d4f0_b.jpg& data-rawwidth=&800& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic4.zhimg.com/50/5a108d8ada2f78a302d4f0_r.jpg&&&/figure&&br&&br&这是我当时跟着临摹教程做下来的，一个比一个有进步，每个都花了一天或者半天时间完成，当达不到原作效果的时候就继续观察，继续改，现在一看还有好多问题，比如第一个铅笔的投影是黑色的很难看，第二个台球的边缘太锐利，很不真实，如果当时不是疯狂修改我想问题会更多。&br&&br&2013年，大三了&br&当我临摹了半年以后，我认为我的ps技术已经很不错了，跟同学说话的时候也爱吹牛，说自己是ps大神，一天一个同学下午来我寝室，说你干嘛呢？不知道今天晚上团里要开荒？你的萨满装等多少了？天天日常任务也不做。。。我说我画会图标，他说？？？我说我以后想当设计师，他说你别逗了。。。我当时心想一定要坚持下来！&br&&br&有一天在上站酷的时候，发现一个主题设计，再次深深震撼到了我，那时候ios7扁平风格盛行，很少有拟物的东西出现了，在看了很多千篇一律的设计以后很难被打动。&br&&br&&figure&&img src=&https://pic2.zhimg.com/50/425bbd2f9a5f34c306ed_b.jpg& data-rawwidth=&900& data-rawheight=&1509& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic2.zhimg.com/50/425bbd2f9a5f34c306ed_r.jpg&&&/figure&&br&&br&牛mo王的《心随我动》，参加了康佳首届主题设计比赛，我立马跑到他站酷的主页&a href=&//link.zhihu.com/?target=http%3A//jr1985.zcool.com.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&牛MO王的个人主页&/a& 膜拜了他，看了他当时发的所有文章，他也是自学，我觉得太厉害了，他当时写了好多文章，告诉大家如何自学，感触特别深。后来我找到了他的qq，没想到他居然同意了，真的特别兴奋。。。然后我问了他一个图标方面的问题，令我没想到的是，他居然打开ps手把手教我如何调参数。。。一边做一边传图片给我，教我如何实现效果，他说好多东西其实非常简单，但是没有人告诉你的话自己很难想出来，到现在我都特别感谢他，叫他牛哥，虽然他不姓牛。。。我问他心随我动这个主题是怎么做出来的？他说只有积累到一定程度才可以。。。然后我默默努力，偷偷临摹它，一天一个图标。下面是我临摹的《心随我动》。&br&&br&&figure&&img src=&https://pic4.zhimg.com/50/6c681abc2b1c_b.jpg& data-rawwidth=&900& data-rawheight=&1600& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic4.zhimg.com/50/6c681abc2b1c_r.jpg&&&/figure&&br&做了快一个月，其实我在最后一天偷懒了，上面的哪个大的天气widget是用的原来的图抠下来的。。。然后我把临摹的给牛哥看，他当时就说，哇，好棒，你进步好快！可能没有谁像我一样把它临摹了一遍，在这些过程中，我的技法运用越来越熟练了，其实做这种ui，只需要你用好图层样式这一个ps功能就好！剩下的就是不断调整内阴影，投影，还有渐变，一定要注意投影的颜色，不要用黑色！要用深色，比如说黄色就用深黄色当投影，蓝色就用深蓝色，这样。推荐大家去站酷看看牛哥的文章，他的分享真的是很详细也很实用，从字体选择到ui入门都讲的特别到位，在学习路上能有他这样的老师带路我想我很幸运，再次谢谢他！&br&&br&当ps技术熟练以后，我就想着做一些自己的东西出来，然后照着照片用ps涂抹了一张定制耳机&br&&br&&figure&&img src=&https://pic1.zhimg.com/50/307b5aafb6dc5a9d2f9a94f3dce21891_b.jpg& data-rawwidth=&900& data-rawheight=&563& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic1.zhimg.com/50/307b5aafb6dc5a9d2f9a94f3dce21891_r.jpg&&&/figure&&br&&br&现在感觉阴影有一些深，线的感觉也不自然，有些发虚。&br&&br&在大三后半学期，参加了小米的主题比赛，每个图标都在网上搜索好多的图片做参考，然后自己绘制，差不多两个月的时间，最后入围了决赛。&br&&br&&figure&&img src=&https://pic2.zhimg.com/50/b5fca8f2d67a456fd66e73de_b.jpg& data-rawwidth=&900& data-rawheight=&2657& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic2.zhimg.com/50/b5fca8f2d67a456fd66e73de_r.jpg&&&/figure&&br&&figure&&img src=&https://pic3.zhimg.com/50/5c9ce0402adaf5b80775_b.jpg& data-rawwidth=&900& data-rawheight=&3332& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic3.zhimg.com/50/5c9ce0402adaf5b80775_r.jpg&&&/figure&&br&自己做主题和临摹是有很大不同的，每个图标做多大？用什么颜色？这些都需要自己控制，可以看出，这个作品在这两个方面都很差。。。当时很迷茫，自己做的东西究竟是不是设计？字体要用什么？排版怎么才好看？因为平时积累的东西太少了，所以真的很质疑自己。我意识到需要多看设计方面的东西，所有的都需要积累，到需要用的时候才能用到。&br&&br&第一次 接触实际项目 是大三后半学期，我的一个老师要做一款ios应用，主打背单词功能，我们两个人他写代码，我负责设计 ui 。我花了一天时间研究切图，研究我做的图片怎么才能用在实际的app中，然后我模仿path做了几个样式出来，我们干劲十足，前后做了好几个版本，修改了十几次。&br&&br&&figure&&img src=&https://pic1.zhimg.com/50/3eaedf69e3fd9b14e6b29_b.jpg& data-rawwidth=&640& data-rawheight=&1136& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic1.zhimg.com/50/3eaedf69e3fd9b14e6b29_r.jpg&&&/figure&&br&&br&&figure&&img src=&https://pic2.zhimg.com/50/dfeb3e090ee57f0d18a581ad_b.jpg& data-rawwidth=&2000& data-rawheight=&2000& class=&origin_image zh-lightbox-thumb& width=&2000& data-original=&https://pic2.zhimg.com/50/dfeb3e090ee57f0d18a581ad_r.jpg&&&/figure&&br&&figure&&img src=&https://pic2.zhimg.com/50/6a79d934247bbd620a8c98c3e4cc9300_b.jpg& data-rawwidth=&2000& data-rawheight=&2000& class=&origin_image zh-lightbox-thumb& width=&2000& data-original=&https://pic2.zhimg.com/50/6a79d934247bbd620a8c98c3e4cc9300_r.jpg&&&/figure&&br&&figure&&img src=&https://pic4.zhimg.com/50/fc40ae00122aad65da3fcff0ec61f535_b.jpg& data-rawwidth=&900& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic4.zhimg.com/50/fc40ae00122aad65da3fcff0ec61f535_r.jpg&&&/figure&&br&这个软件前前后后一共做了半年，对我实际项目的实践是一个挑战，靠这个软件我还拿到了在京东实习的机会，大四后半学期在京东实习了半年。&br&&br&期间还和同学做了一个网站叫野渡集市&br&&br&&figure&&img src=&https://pic1.zhimg.com/50/5a8d702d204fff5fe7d653b86fb2ad2b_b.jpg& data-rawwidth=&800& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic1.zhimg.com/50/5a8d702d204fff5fe7d653b86fb2ad2b_r.jpg&&&/figure&&br&现在我工作已经一年了，在北京的美餐网，自己一路自学过来，毅力很重要，我想兴趣更重要，我现在还在不断学习，因为自己的设计知识还是很不足，到这个时候要多看看ios和google的设计规范，知道ios的最小点击区域是44pt，字体不要小于22像素，36像素适合阅读，这些都是在以前自己很少注意到的。现在每天还在自学c4d和ae，加强自己动效方面的实力。&br&&br&发一点现在的作品吧，我觉得很少有人能听我啰嗦到现在。。&br&&br&&figure&&img src=&https://pic3.zhimg.com/50/ebfdbff5c82a_b.jpg& data-rawwidth=&800& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic3.zhimg.com/50/ebfdbff5c82a_r.jpg&&&/figure&&br&&figure&&img src=&https://pic3.zhimg.com/50/fbdc2ba6e7dfb2ffe0dde3_b.jpg& data-rawwidth=&800& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic3.zhimg.com/50/fbdc2ba6e7dfb2ffe0dde3_r.jpg&&&/figure&&br&&figure&&img src=&https://pic1.zhimg.com/50/fac146a976df034f0e661cc_b.jpg& data-rawwidth=&800& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic1.zhimg.com/50/fac146a976df034f0e661cc_r.jpg&&&/figure&&br&&br&最后推荐大家一定要多上dribbble，看看国外的大神是怎么做的，当我上dribbble以后才发现，很多国内的所谓大神不过是抄袭别人的作品而已。&br&&br&&br&&br&&br&&br&&br&&br&///////////////////////////////////////////////
9月25日更新
////////////////////////////////////////////&br&&br&&br&&br&&br&&br&刚才写了一大堆然后浏览器崩溃了都没了。。。只好重写了&br&2天收获了500多个赞，我真的没有想到，还是有好多同学提问或者私信我，我在这里做统一的解答&br&&br&1.好多人问我用的是什么软件？是ps还是ai？&br&这个问题在我学ps的时候也特别困惑，我想说的是一门心思学好ps就行了，ps比ai更适合做ui设计，我都是用ps做的，当然用ai也能做出来但是会不方便，而且网上ps的教程会很多，ai就很少了，所以建议大家学好ps。&br&我现在工作以后使用sketch进行设计，因为公司是全mac办公，用sketch能极大提高效率，sketch默认输出一倍图片，减少了标注的麻烦，而且设计稿可以让ios工程师直接使用。（现在这个软件只有mac能用到，这是它不好的一点，当然有条件的可以学习一下，很方便。）&br&&br&这是用sketch设计的设计稿，虽然最后没有用，但是可以看出来一个文件搞定了好多设计稿（不会说话了。。。）&br&&figure&&img src=&https://pic3.zhimg.com/50/4dfbafa4f8b955f9ee2b1e52f1a694d9_b.jpg& data-rawwidth=&2880& data-rawheight=&1800& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic3.zhimg.com/50/4dfbafa4f8b955f9ee2b1e52f1a694d9_r.jpg&&&/figure&&br&2.我向大家推荐了使用dribbble来提高审美，并且了解ui设计的最新趋势，但是说的不仔细，现在给大家分享一下我如何使用dribbble。&br&&br&首先在dribbble里有一个点赞功能，叫likes。&br&拿我举个例子，在我的主页，这个地方，进去有我喜欢的作品。&br&&br&&figure&&img src=&https://pic1.zhimg.com/50/ebe9cac5e9bd33_b.jpg& data-rawwidth=&2880& data-rawheight=&1800& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic1.zhimg.com/50/ebe9cac5e9bd33_r.jpg&&&/figure&&br&这个有什么用呢？比如我在浏览今天dribbble的推荐作品的时候，发现两个超棒的作品,看下面的图：&br&&br&&figure&&img src=&https://pic1.zhimg.com/50/2b9ac8c79b_b.jpg& data-rawwidth=&2102& data-rawheight=&981& class=&origin_image zh-lightbox-thumb& width=&2102& data-original=&https://pic1.zhimg.com/50/2b9ac8c79b_r.jpg&&&/figure&&br&我们可以发现，这是两种不同的风格，也是现在最流行的两种&br&第一种设计是那种酷炫的，很有ios的风格，像自带的应用日历一样，里面有很多小的控件，很精致。&br&&br&第二种设计现在更多得流行起来，用大的色块，大的按钮，大的圆角，还有流畅的动效给使用者带来非常愉悦的感觉，有的配合了卡通形象，更加增加了亲切感，这类的app有marval，还有游戏jellies（就是那个抓水母游戏）。&br&我们点击作者的名字，到他们的主页，看到他们更多的作品。&br&&br&&figure&&img src=&https://pic4.zhimg.com/50/81ad017c607fb895b8130c_b.jpg& data-rawwidth=&2880& data-rawheight=&1800& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic4.zhimg.com/50/81ad017c607fb895b8130c_r.jpg&&&/figure&&br&&figure&&img src=&https://pic4.zhimg.com/50/4c7e018d4a9ecdf8b34087_b.jpg& data-rawwidth=&2880& data-rawheight=&1800& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic4.zhimg.com/50/4c7e018d4a9ecdf8b34087_r.jpg&&&/figure&&br&可以发现他们在自己的风格里面都做的特别棒，有很多值得我们学习和研究的地方，最好能看看他们的likes，看看他们都喜欢什么作品&br&&br&比如这个大神，应该是中国人但是原谅我不知道他是谁，低调的人太多了&br&&br&&figure&&img src=&https://pic2.zhimg.com/50/0dfba7b09a0d6f4b3f8e_b.jpg& data-rawwidth=&2880& data-rawheight=&1800& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic2.zhimg.com/50/0dfba7b09a0d6f4b3f8e_r.jpg&&&/figure&这个是他的主页，可以看出来他也是第二种风格的，我们看看他的喜欢&br&&br&&figure&&img src=&https://pic1.zhimg.com/50/64bbd0ca97cbf35ac26dd_b.jpg& data-rawwidth=&2880& data-rawheight=&1800& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic1.zhimg.com/50/64bbd0ca97cbf35ac26dd_r.jpg&&&/figure&果然，可以看到更多的大色块和卡通的设计。也让我们发现更多的擅长此类设计的大神。&br&&br&接下来讲讲dribbble的搜索&br&当有一天老板需要我设计一个登录界面，但是我并没有什么好的灵感，&br&大家肯定早就注意到dribbble上有search按钮了，我们搜索“login”，出来以下结果&br&&br&&figure&&img src=&https://pic2.zhimg.com/50/ef9e7f29e5feb1e2eeafca53e2f7eaa1_b.jpg& data-rawwidth=&2880& data-rawheight=&1800& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic2.zhimg.com/50/ef9e7f29e5feb1e2eeafca53e2f7eaa1_r.jpg&&&/figure&&br&这么多的登录界面设计，这下不怕没有灵感了，我忘了是谁说的了，世界上没有纯粹的设计，所有伟大的作品都是以前的作品的结合和再创造，我们学习别人的想法和设计语言。&br&&br&dribbble还有很多psd可以下载的，比如iphone的各种展示模型，我们搜索“mockups”或者“mockup iphone”就可以找到下载了。做展示的时候很好用。看下图：&br&&br&&figure&&img src=&https://pic1.zhimg.com/50/b6b15e727b170a4e79c2dda93cd4620e_b.jpg& data-rawwidth=&2880& data-rawheight=&1800& class=&origin_image zh-lightbox-thumb& width=&2880& data-original=&https://pic1.zhimg.com/50/b6b15e727b170a4e79c2dda93cd4620e_r.jpg&&&/figure&&br&&br&我做界面设计的时间也不长，只是说一些自己的理解，尤其是工作以后，那些很炫很酷的界面往往是不能实现的，我们的设计不能出格，比如在ios上你使用安卓的材料设计语言就很错误，但是在遵守大的设计规范的时候如何才能让你的设计出彩？这就需要我们对细节的处理，比如path里掉下来的小卡片，或者是一个小的可爱的动画，让用户能感觉到设计的精致，现在我们也管这种小细节叫“情怀”。我们看好的作品不一定要把他实现，但是要学里面的细节，有时一抹亮色或者一点光晕就能为你的设计点睛。&br&&br&3.前面有些提到的素材有人说找不到，我帮大家把链接贴出来&br&&a href=&//link.zhihu.com/?target=http%3A//v.youku.com/v_show/id_XNTU5NzkzODQ0.html%3Ff%3Dfrom%3Dy1.7-3& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【十分钟设计第一季】史上最酷最接地气儿的UI视频教程&/a&&br&&a href=&//link.zhihu.com/?target=http%3A//i.ui.cn/ucenter/88618.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&小课堂的设计作品-UI中国&/a&&br&
还有就是回音的ui分享会，牛哥的u1系列教程，我都看过，也推荐大家认真看一下。&br&
学c4d可以看看ihdt上海映速的免费教程&br&&br&（以上教程我都是一步步看过来的，还有好多跟着做了临摹，我一直认为，如果你回答里推荐的那些素材网站你从来没有看过那是不负责任的，推荐一大堆链接不如不推荐，有人评论和私信喷我我必须说他们两句。。。）&br&&br&这次更新就到此为止，祝大家每天都有进步。下次更新可能要到我动效或者c4d有大的进步的时候再来了！&br&&br&&br&&br&最新作品更新：&br&dribbble：&a href=&//link.zhihu.com/?target=https%3A//dribbble.com/Nevergg& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Dribbble - zfy&/a&&br&zcool：&a href=&//link.zhihu.com/?target=http%3A//www.zcool.com.cn/u/1577168& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&力力_NeverGG的个人主页&/a&&br&&br&&br&我会经常更新的！！！！
号更新： 欢迎大家关注我的微信公众号：ui每日推 我会在每周日更新我的视频教程，教大家如何零基础自学 UI ，内容包含详细的操作技法，对设计的理解，配色，版式的运用等等，另外每天推送国内外精选的十佳 UI 作品，只需两分钟轻松提高审美！ 已…
谢邀呢&br&又遇到简单的没人答的题目了（又可以轮到臣妾装逼了）(≧▽≦)/&br&&br&&b&直接进入正题吧。&/b&&br&&br&这样风格的图标其实很简单的，用PS 和 AI 都能做，但是如果不考虑像素级的话呢，用AI 会快很多。&br&&br&下面是随便找了一个图形参考的，步骤可能会很啰嗦也很多哦，辛苦观看。泪目::&_&::&br&&br&&b&1、新建【Dribbble牌】画布800x600&/b&&br&&b&&figure&&img src=&https://pic4.zhimg.com/50/f4bafc2b7bb0c2e49206cf_b.jpg& data-rawwidth=&1684& data-rawheight=&1310& class=&origin_image zh-lightbox-thumb& width=&1684& data-original=&https://pic4.zhimg.com/50/f4bafc2b7bb0c2e49206cf_r.jpg&&&/figure&颜色模式、分辨率别选错哦。&/b&&br&&br&&br&&b&2、用矩形工具画一个矩形&br&&/b&&br&&figure&&img src=&https://pic1.zhimg.com/50/53da23a8c5cb_b.jpg& data-rawwidth=&3078& data-rawheight=&2152& class=&origin_image zh-lightbox-thumb& width=&3078& data-original=&https://pic1.zhimg.com/50/53da23a8c5cb_r.jpg&&&/figure&&br&&b&3、选择参数，将填充去掉，打开描边，像素点自行选择。&/b&&figure&&img src=&https://pic4.zhimg.com/50/cb7caefda1316_b.jpg& data-rawwidth=&1458& data-rawheight=&1162& class=&origin_image zh-lightbox-thumb& width=&1458& data-original=&https://pic4.zhimg.com/50/cb7caefda1316_r.jpg&&&/figure&&br&&b&4、调整一下描边的形式，【对齐】自行选择【端点】和【角点】一般都选择圆角&/b&&figure&&img src=&https://pic3.zhimg.com/50/b46cfd1add26ed_b.jpg& data-rawwidth=&1186& data-rawheight=&916& class=&origin_image zh-lightbox-thumb& width=&1186& data-original=&https://pic3.zhimg.com/50/b46cfd1add26ed_r.jpg&&&/figure&&br&&br&&b&5、得到以下形状后，用钢笔工具，在红色箭头区域点几个锚点，间距自行选择。&/b&&br&&figure&&img src=&https://pic3.zhimg.com/50/e3f4cae47e3bde72dab25_b.jpg& data-rawwidth=&2776& data-rawheight=&1910& class=&origin_image zh-lightbox-thumb& width=&2776& data-original=&https://pic3.zhimg.com/50/e3f4cae47e3bde72dab25_r.jpg&&&/figure&&br&&b&6、用直接选择工具，框选两个锚点之间。&/b&&figure&&img src=&https://pic3.zhimg.com/50/255e2a816cc71a808e22f_b.jpg& data-rawwidth=&2698& data-rawheight=&1550& class=&origin_image zh-lightbox-thumb& width=&2698& data-original=&https://pic3.zhimg.com/50/255e2a816cc71a808e22f_r.jpg&&&/figure&如下图↓&br&&figure&&img src=&https://pic3.zhimg.com/50/cfd89d1f5ba4e42f0b68d04_b.jpg& data-rawwidth=&1004& data-rawheight=&1418& class=&origin_image zh-lightbox-thumb& width=&1004& data-original=&https://pic3.zhimg.com/50/cfd89d1f5ba4e42f0b68d04_r.jpg&&&/figure&&br&&b&7、然后按键盘上的删除键 delete，就得到以下形状。&/b&&figure&&img src=&https://pic1.zhimg.com/50/e779ecd966ad2a9ade0e4_b.jpg& data-rawwidth=&2936& data-rawheight=&2236& class=&origin_image zh-lightbox-thumb& width=&2936& data-original=&https://pic1.zhimg.com/50/e779ecd966ad2a9ade0e4_r.jpg&&&/figure&&br&&br&&b&8、再画一个矩形，设置如下，关闭描边，打开填充。&/b&&figure&&img src=&https://pic1.zhimg.com/50/df2e9e85db0c_b.jpg& data-rawwidth=&1538& data-rawheight=&1564& class=&origin_image zh-lightbox-thumb& width=&1538& data-original=&https://pic1.zhimg.com/50/df2e9e85db0c_r.jpg&&&/figure&&br&&br&&b&9、随便选择一个颜色，拖动到描边矩形中，注意黄色矩形与描边矩形的间距是否一致。&/b&&figure&&img src=&https://pic3.zhimg.com/50/28d6a5e11be3f525ae35bb82fdc4b36c_b.jpg& data-rawwidth=&5118& data-rawheight=&2704& class=&origin_image zh-lightbox-thumb& width=&5118& data-original=&https://pic3.zhimg.com/50/28d6a5e11be3f525ae35bb82fdc4b36c_r.jpg&&&/figure&&br&&br&&b&10、画两个眼睛&/b&&figure&&img src=&https://pic4.zhimg.com/50/6ccff7e3a87c3499acdd4d4b82c7f9f4_b.jpg& data-rawwidth=&3220& data-rawheight=&2114& class=&origin_image zh-lightbox-thumb& width=&3220& data-original=&https://pic4.zhimg.com/50/6ccff7e3a87c3499acdd4d4b82c7f9f4_r.jpg&&&/figure&&br&&br&&b&11、再画一个嘴巴&/b&&figure&&img src=&https://pic4.zhimg.com/50/29ee998d8b8bb6deb2489_b.jpg& data-rawwidth=&3244& data-rawheight=&2208& class=&origin_image zh-lightbox-thumb& width=&3244& data-original=&https://pic4.zhimg.com/50/29ee998d8b8bb6deb2489_r.jpg&&&/figure&&br&&br&&b&12、用矩形选框工具，从这个椭圆的水平中线画一个选取，如下图我画的选取是W:24px，那么我的锚点则会点在距离水平中线，距左距右各是24px。&figure&&img src=&https://pic2.zhimg.com/50/8c3bde3fdad_b.jpg& data-rawwidth=&2404& data-rawheight=&2088& class=&origin_image zh-lightbox-thumb& width=&2404& data-original=&https://pic2.zhimg.com/50/8c3bde3fdad_r.jpg&&&/figure&&/b&如下图↓&br&&figure&&img src=&https://pic3.zhimg.com/50/a29988ededeb69eac1331_b.jpg& data-rawwidth=&3736& data-rawheight=&2284& class=&origin_image zh-lightbox-thumb& width=&3736& data-original=&https://pic3.zhimg.com/50/a29988ededeb69eac1331_r.jpg&&&/figure&&br&&b&13&/b&&b&、用直接选择工具，选中圆圈中的3个锚点。再按键盘上的delete键。&/b&&figure&&img src=&https://pic4.zhimg.com/50/e40d1ddf7eb64efd3e92b436dc8b63c6_b.jpg& data-rawwidth=&3248& data-rawheight=&2440& class=&origin_image zh-lightbox-thumb& width=&3248& data-original=&https://pic4.zhimg.com/50/e40d1ddf7eb64efd3e92b436dc8b63c6_r.jpg&&&/figure&&br&&b&14、我们会得到以下的形状。。&/b&&b&( ⊙o⊙ )哇，好大的嘴巴呀，一点也不萌呢。&/b&&figure&&img src=&https://pic1.zhimg.com/50/8b4ba1a9d542aad013e7_b.jpg& data-rawwidth=&3206& data-rawheight=&2412& class=&origin_image zh-lightbox-thumb& width=&3206& data-original=&https://pic1.zhimg.com/50/8b4ba1a9d542aad013e7_r.jpg&&&/figure&&br&&br&&br&&b&15、嘴巴太大，我们再用刚刚的方法。用矩形选框工具，这次画个W:12px吧，然后左右各点两个锚点，再删点不需要的锚点。&figure&&img src=&https://pic4.zhimg.com/50/58af3c6ce352ef2c065d0bf_b.jpg& data-rawwidth=&3020& data-rawheight=&1590& class=&origin_image zh-lightbox-thumb& width=&3020& data-original=&https://pic4.zhimg.com/50/58af3c6ce352ef2c065d0bf_r.jpg&&&/figure&&/b&&br&&b&16、我们就能得到稍微小一点的萌萌哒的嘴巴了(⊙o⊙)哦。&/b&&b&我们可以把这个小嘴画成小鸡小鸭的嘴巴，可以通过拖动锚点，画出你想要的线条形状。&/b&&br&&figure&&img src=&https://pic4.zhimg.com/50/3a6a9bb17b96950cfe5eadf02ee37db6_b.jpg& data-rawwidth=&2780& data-rawheight=&1480& class=&origin_image zh-lightbox-thumb& width=&2780& data-original=&https://pic4.zhimg.com/50/3a6a9bb17b96950cfe5eadf02ee37db6_r.jpg&&&/figure&&br&&br&&b&17、编组，再复制一个组。&/b&&br&&figure&&img src=&https://pic3.zhimg.com/50/7bf9fc35fe45d8911c9e_b.jpg& data-rawwidth=&988& data-rawheight=&633& class=&origin_image zh-lightbox-thumb& width=&988& data-original=&https://pic3.zhimg.com/50/7bf9fc35fe45d8911c9e_r.jpg&&&/figure&&br&&b&18&/b&&b&、将复制的组，command(ctrl)+t，变化一下角度。&/b&&figure&&img src=&https://pic2.zhimg.com/50/ff9b2a6cff719c5aa8da5a26e561044b_b.jpg& data-rawwidth=&5156& data-rawheight=&2708& class=&origin_image zh-lightbox-thumb& width=&5156& data-original=&https://pic2.zhimg.com/50/ff9b2a6cff719c5aa8da5a26e561044b_r.jpg&&&/figure&&br&&b&19&/b&&b&、用钢笔工具和delete键删掉不要的锚点&/b&&figure&&img src=&https://pic4.zhimg.com/50/71f48a570c2ab25cae69d_b.jpg& data-rawwidth=&3508& data-rawheight=&2384& class=&origin_image zh-lightbox-thumb& width=&3508& data-original=&https://pic4.zhimg.com/50/71f48a570c2ab25cae69d_r.jpg&&&/figure&&br&&b&20、用形状减去不需要的矩形面积，选择矩形工具按住alt键鼠标边上会出现一个减号，说明可减去当前矩形。&/b&&br&&figure&&img src=&https://pic2.zhimg.com/50/30bfaddf210_b.jpg& data-rawwidth=&1074& data-rawheight=&768& class=&origin_image zh-lightbox-thumb& width=&1074& data-original=&https://pic2.zhimg.com/50/30bfaddf210_r.jpg&&&/figure&&br&&b&21、减去之后我们在画一个矩形&/b&&figure&&img src=&https://pic3.zhimg.com/50/9d31b1286_b.jpg& data-rawwidth=&4030& data-rawheight=&2394& class=&origin_image zh-lightbox-thumb& width=&4030& data-original=&https://pic3.zhimg.com/50/9d31b1286_r.jpg&&&/figure&&br&&b&22、创建剪贴蒙版，在两个图层中间按住alt键也可进行快速剪贴蒙版。&/b&&figure&&img src=&https://pic2.zhimg.com/50/9d18c17d48e993ad1e3b8ee077ca15e0_b.jpg& data-rawwidth=&3088& data-rawheight=&2152& class=&origin_image zh-lightbox-thumb& width=&3088& data-original=&https://pic2.zhimg.com/50/9d18c17d48e993ad1e3b8ee077ca15e0_r.jpg&&&/figure&&br&&br&&b&23、变换一下形状，改变一个颜色，一般，黄色上面的投影会偏红。&/b&&figure&&img src=&https://pic2.zhimg.com/50/88f1b1ddd7f15ee76e46efa34fbe3353_b.jpg& data-rawwidth=&3620& data-rawheight=&2104& class=&origin_image zh-lightbox-thumb& width=&3620& data-original=&https://pic2.zhimg.com/50/88f1b1ddd7f15ee76e46efa34fbe3353_r.jpg&&&/figure&&br&&br&&b&24、大功告成( ⊙o⊙ )哇，等等还有一个小伙伴呢。(╯3╰)&/b&&figure&&img src=&https://pic1.zhimg.com/50/a2fbedb9dcf_b.jpg& data-rawwidth=&5156& data-rawheight=&2708& class=&origin_image zh-lightbox-thumb& width=&5156& data-original=&https://pic1.zhimg.com/50/a2fbedb9dcf_r.jpg&&&/figure&&br&&br&&b&25、新的小伙伴，我们在复制一个组，（快捷键我就不赘述了）。&/b&&figure&&img src=&https://pic1.zhimg.com/50/a04f532f99ad2bfb3b4bbfd_b.jpg& data-rawwidth=&3656& data-rawheight=&1974& class=&origin_image zh-lightbox-thumb& width=&3656& data-original=&https://pic1.zhimg.com/50/a04f532f99ad2bfb3b4bbfd_r.jpg&&&/figure&&br&&br&&b&26、准备移动另一个小伙伴的时候我们应该先记住右边这个的位置，按住command键会出现一个快捷的间距像素显示。我们可以记下这些数，当我们把另一个图移到左边的时候可以参考这个数值，以保证左右对称。( ⊙o⊙ )千真万确&/b&&figure&&img src=&https://pic4.zhimg.com/50/d2a4d924fe_b.jpg& data-rawwidth=&5014& data-rawheight=&2716& class=&origin_image zh-lightbox-thumb& width=&5014& data-original=&https://pic4.zhimg.com/50/d2a4d924fe_r.jpg&&&/figure&&br&&br&&b&27、另一个小伙伴一过来了，变换一下水平翻转，保持左右数值一致。&/b&&figure&&img src=&https://pic2.zhimg.com/50/c13e94290add05d1bd72_b.jpg& data-rawwidth=&5118& data-rawheight=&2698& class=&origin_image zh-lightbox-thumb& width=&5118& data-original=&https://pic2.zhimg.com/50/c13e94290add05d1bd72_r.jpg&&&/figure&&br&&br&&b&28、改下颜色，用个蓝色，一般冷色上的投影偏暖，暖色上的投影偏冷，可以做出不错的色彩效果。&/b&&figure&&img src=&https://pic4.zhimg.com/50/8a435aca7081aab0f1db_b.jpg& data-rawwidth=&5156& data-rawheight=&2710& class=&origin_image zh-lightbox-thumb& width=&5156& data-original=&https://pic4.zhimg.com/50/8a435aca7081aab0f1db_r.jpg&&&/figure&&br&&br&&b&29、最后，我们画一些点缀。完工了。~(≧▽≦)/~&/b&&figure&&img src=&https://pic3.zhimg.com/50/e942d250c5ad6d2c6c870d66d2ebca3c_b.jpg& data-rawwidth=&5156& data-rawheight=&2710& class=&origin_image zh-lightbox-thumb& width=&5156& data-original=&https://pic3.zhimg.com/50/e942d250c5ad6d2c6c870d66d2ebca3c_r.jpg&&&/figure&&br&&br&辛苦，本来以为12点能做完，结果耗到2：30，只为了更好呢。&br&&br&谢谢观看。&br&&br&关注我，我会不定期的发布一些有趣的教程。带你轻松入门，收获一颗纯纯的少女心。~(@^_^@)~&br&&br&&b&点个赞吧，么么哒(&^ω^&)喵&/b&
谢邀呢 又遇到简单的没人答的题目了（又可以轮到臣妾装逼了）(≧▽≦)/ 直接进入正题吧。 这样风格的图标其实很简单的，用PS 和 AI 都能做，但是如果不考虑像素级的话呢，用AI 会快很多。 下面是随便找了一个图形参考的，步骤可能会很啰嗦也很多哦，辛苦观…
&b&【本文单从设计角度阐述如何用粉色达成所谓“硬汉”的效果，我只写干货不讨好吃瓜群众，不喜欢的请随便喷，不保证我不会喷回去哈】&/b&&b&&br&&/b&&br&&b&颜色像人一样都是有性格的，配色时考虑一下各种颜色的个性，把不会打架的放在一起自然能达到想要的效果。&/b&&br&一般来说要设计硬汉效果的东西，没谁会用粉色…&br&但如果你&b&非要用&/b&粉色这么骚气的小盆友玩硬汉，&br&就只能从以下四个方向降低粉色的存在感：&br&&br&&b&拿重色压，降低彩度，减小面积，宁方勿圆。&/b&&br&此法则适用于任何必须用又不好用的颜色上。（比如你老板或者甲方要求你用的情况）&br&&b&&br&①拿重色压&/b&&br&推荐用无彩色，也就是黑白灰。&br&只有没有色相的黑白灰，才不会被小粉这种公孔雀般分分钟争奇斗艳的性格带跑，也不会跟他计较。&br&如果是要硬汉，就要压低明度，而里面明度最低的也就是黑色了，如下图&br&&figure&&img data-rawheight=&2265& src=&https://pic4.zhimg.com/50/0e17a6b0ccd1c287e01b_b.jpg& data-rawwidth=&600& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&https://pic4.zhimg.com/50/0e17a6b0ccd1c287e01b_r.jpg&&&/figure&&figure&&img data-rawheight=&976& src=&https://pic3.zhimg.com/50/cc9c0df0e4_b.jpg& data-rawwidth=&750& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/cc9c0df0e4_r.jpg&&&/figure&&br&这样即使是两种颜色面积类似，甚至大面积使用粉色，小粉也会因为撞上了个腰圆膀粗的黑老大，只能一起严肃的狐假虎威了。&br&&br&除了黑色，绀色、深灰也是可以试试的。&br&但一定不要用暖色来搭，有色相的也尽量不要把彩度提到10%以上。&br&&br&&b&服装搭配时，无彩色或中性色都可以：&/b&&br&首先，保证你露出来的皮肤不会大面积白嫩细腻，&br&然后，以面积50%以上的深色色块来搭配。&br&&figure&&img data-rawheight=&825& src=&https://pic2.zhimg.com/50/f468fc17dbbd37_b.jpg& data-rawwidth=&550& class=&origin_image zh-lightbox-thumb& width=&550& data-original=&https://pic2.zhimg.com/50/f468fc17dbbd37_r.jpg&&&/figure&&figure&&img data-rawheight=&517& src=&https://pic4.zhimg.com/50/1d6ec662eaa56d52d897_b.jpg& data-rawwidth=&340& class=&content_image& width=&340&&&/figure&&figure&&img data-rawheight=&1087& src=&https://pic2.zhimg.com/50/5e15df3eadc_b.jpg& data-rawwidth=&750& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/5e15df3eadc_r.jpg&&&/figure&&figure&&img data-rawheight=&750& src=&https://pic1.zhimg.com/50/e8e4bfa5f0b8768059bbd6_b.jpg& data-rawwidth=&359& class=&content_image& width=&359&&&/figure&↑天生自带50%以上重色块，粉色随便玩&br&&br&&br&&b&②降低彩度，玩高级灰&/b&&br&指的是降低粉色本身的彩度，也就是教育小粉做人要低调，特别是要向性格中庸的灰色系学习，不要老是辣么没节操：&br&&figure&&img data-rawheight=&1034& src=&https://pic4.zhimg.com/50/90793ccd832e02be9cece3_b.jpg& data-rawwidth=&737& class=&origin_image zh-lightbox-thumb& width=&737& data-original=&https://pic4.zhimg.com/50/90793ccd832e02be9cece3_r.jpg&&&/figure&&figure&&img data-rawheight=&674& src=&https://pic4.zhimg.com/50/b0a1f2792a68bdd834d0fb_b.jpg& data-rawwidth=&448& class=&origin_image zh-lightbox-thumb& width=&448& data-original=&https://pic4.zhimg.com/50/b0a1f2792a68bdd834d0fb_r.jpg&&&/figure&&figure&&img data-rawheight=&750& src=&https://pic3.zhimg.com/50/cb5cce545dac_b.jpg& data-rawwidth=&480& class=&origin_image zh-lightbox-thumb& width=&480& data-original=&https://pic3.zhimg.com/50/cb5cce545dac_r.jpg&&&/figure&这个规则比起图上颜值秀丽的小哥们，个人认为更加适用于长相硬汉的男人们：反可以利用一下小粉的骚逼性格，把自己黑老大的形象磨合得知性有风度一些。当然，我指的是纯度低灰度高或小面积地使用。&br&&br&效果如下图：&br&&figure&&img data-rawheight=&1158& src=&https://pic3.zhimg.com/50/fc3cbbb191_b.jpg& data-rawwidth=&448& class=&origin_image zh-lightbox-thumb& width=&448& data-original=&https://pic3.zhimg.com/50/fc3cbbb191_r.jpg&&&/figure&还有任何偏黄的颜色都不适合亚洲人，一点点都会很搓…不要以身试法…（经评论提示加上来的&br&&br&&br&而用在UI和平面设计上，便是以下玩法：&br&&figure&&img data-rawheight=&300& src=&https://pic1.zhimg.com/50/9b22147ef4dab20b42997a4dea0ba531_b.jpg& data-rawwidth=&400& class=&content_image& width=&400&&&/figure&↑降低透明度&br&&br&↓以纯度爆棚的桃红和灰色来打造知性的效果&br&&figure&&img data-rawheight=&1850& src=&https://pic2.zhimg.com/50/bfcceb41f276e55dd90395_b.jpg& data-rawwidth=&750& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/bfcceb41f276e55dd90395_r.jpg&&&/figure&&br&&br&&br&&b&③减小面积，宁方勿圆了：&/b&&br&小粉本身就是个风骚的性格，如果再给他一个圆润的身材，你说他是不是能上了天去！&br&所以就要限制限制再限制，能方正点连角都不要是圆的：&br&o UI界面&br&&figure&&img data-rawheight=&1292& src=&https://pic3.zhimg.com/50/aecb96c7e76abb64fa96d_b.jpg& data-rawwidth=&750& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/aecb96c7e76abb64fa96d_r.jpg&&&/figure&o DTP&br&&figure&&img data-rawheight=&2001& src=&https://pic2.zhimg.com/50/c4e1ae68ce66aacef085bcebdd2086a9_b.jpg& data-rawwidth=&600& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&https://pic2.zhimg.com/50/c4e1ae68ce66aacef085bcebdd2086a9_r.jpg&&&/figure&&br&然而如果您非要把小粉掰弯掰圆，也行。&br&那就只能小小小面积的去用了：&br&&figure&&img data-rawheight=&4981& src=&https://pic4.zhimg.com/50/27ec2cb73d_b.jpg& data-rawwidth=&723& class=&origin_image zh-lightbox-thumb& width=&723& data-original=&https://pic4.zhimg.com/50/27ec2cb73d_r.jpg&&&/figure&&br&&br&&br&&b&此规则同样适用于各种别的小风骚性格的孩子们，比如薄荷绿，明黄，橙色：&/b&&br&&br&&figure&&img data-rawheight=&543& src=&https://pic1.zhimg.com/50/9bb65a73c4dfe73586b0fddbebf5e157_b.jpg& data-rawwidth=&500& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic1.zhimg.com/50/9bb65a73c4dfe73586b0fddbebf5e157_r.jpg&&&/figure&&figure&&img data-rawheight=&1684& src=&https://pic4.zhimg.com/50/32ea42a91bd84b6e4d5e4_b.jpg& data-rawwidth=&750& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/32ea42a91bd84b6e4d5e4_r.jpg&&&/figure&&br&&figure&&img data-rawheight=&1334& src=&https://pic4.zhimg.com/50/5f7de4d6d1e2dc692f553_b.jpg& data-rawwidth=&750& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/5f7de4d6d1e2dc692f553_r.jpg&&&/figure&&br&&figure&&img data-rawheight=&3584& src=&https://pic4.zhimg.com/50/e8da9a6ff31ba12e1e24_b.jpg& data-rawwidth=&600& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&https://pic4.zhimg.com/50/e8da9a6ff31ba12e1e24_r.jpg&&&/figure&&br&&br&以上图片全部来自Pinterest。&br&转载及业务联络请私信。&br&&br&&br&&b&———————谢谢您拉到最后———————&/b&
【本文单从设计角度阐述如何用粉色达成所谓“硬汉”的效果，我只写干货不讨好吃瓜群众，不喜欢的请随便喷，不保证我不会喷回去哈】
颜色像人一样都是有性格的，配色时考虑一下各种颜色的个性，把不会打架的放在一起自然能达到想要的效果。 一般来说要设计…
&p&首先如果你小团队或者个人开发，当然可以用Xcode，如果大公司跨部门审核调整各种，还是有个快速的原型。&/p&&br&&p&如你要求，可交互。包括常用的Axrue，我试用过下面提到的所有软件，分别完整产出过不同的原型，还有一些市面上的你一看它介绍图还在用ios6的就知道不必了，说明很久没更新了。&/p&&br&&p&下面这些是我按照不同的特点进行了归类，视你的具体情况而定吧。&/p&&br&&p&我在选择软件这个过程中纠结了很久，也是用过在领悟真正的原理。但是这段时间的摸索对我以后也有很大帮助。&/p&&br&&b&轻巧型&/b&&br&&b&低保真；无控件；iOS；少交互；免费。&/b&&br&&br&&a href=&//link.zhihu.com/?target=https%3A//itunes.apple.com/cn/app/pop-prototyping-on-paper/idFmt%3D8& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Pop&/a&&br&&figure&&img src=&https://pic2.zhimg.com/50/88160fbfcfcff4ea781abd_b.jpg& data-rawwidth=&320& data-rawheight=&568& class=&content_image& width=&320&&&/figure&&br&&p&非常火的一款原型软件，第一次满足了大家人人都是产品经理的感觉。&/p&&p&方法：拍照--添加触控区--转场方式--选择图片&/p&&p&平台：全手机操作&/p&&p&缺点：分享不便。动画有如侧滑、展开、消失，快现的摇一摇。操作只可以单击。没有控件，所有东西都靠你的照片。&/p&&br&&a href=&//link.zhihu.com/?target=https%3A//itunes.apple.com/cn/app/tapcase-rapid-prototyping/idFmt%3D8& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Tapcase&/a&&br&&figure&&img src=&https://pic1.zhimg.com/50/7ff20c87a236c673d7b635_b.jpg& data-rawwidth=&320& data-rawheight=&568& class=&content_image& width=&320&&&/figure&&br&&p&基本和pop一样，就是软件本身的UI更ios7一点，其他都一样，也是导入图片，加热区就好了。缺点也是一样的。&/p&&p&**总结：**轻巧型的就是适合简单软件且是早期，在手机上稍微复杂一点的就痛不欲生了。但问题是，如果简单到这么轻松了，那真的还需要用软件模拟吗？真的在纸上画更轻松吧。点击这种交互也不需要模拟了吧。&/p&&br&&b&专业型&/b&&br&&b&高保真度；自带控件；Mac+iOS；全交互；收费+免费&/b&&br&&br&&a href=&//link.zhihu.com/?target=http%3A//uid.cdc.tencent.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&UIDesigner + UIDPlayer&/a&&br&&figure&&img src=&https://pic2.zhimg.com/50/f281cf28d2c4c10bb1454_b.jpg& data-rawwidth=&903& data-rawheight=&345& class=&origin_image zh-lightbox-thumb& width=&903& data-original=&https://pic2.zhimg.com/50/f281cf28d2c4c10bb1454_r.jpg&&&/figure&&br&&p&腾讯出品的原型软件，中文，操作简单，符合国人习惯，容易上手。方便分享。&/p&&p&方法：windows电脑安装UIDesigner，使用现成控件进行可视化搭建，调试后通过网盘等方式发到iOS设备，用UIDPlayer打开即可。&/p&&p&平台：只支持Win+ iOS。可能也是优点，仅有的专门支持Win平台的原型软件。&/p&&p&缺点：吹毛求疵吧，逼格不高。&/p&&br&&a href=&//link.zhihu.com/?target=https%3A//itunes.apple.com/cn/app/briefscase/idFmt%3D8& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Briefs + Briefscase&/a&&br&&figure&&img src=&https://pic1.zhimg.com/50/a7fd402c1c2fd6f624e69b8f378b2352_b.jpg& data-rawwidth=&800& data-rawheight=&500& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic1.zhimg.com/50/a7fd402c1c2fd6f624e69b8f378b2352_r.jpg&&&/figure&&br&&p&这是我最近发现非常好的一款软件，好在对交互的支持上，如果调整细腻一点，几乎可以以假乱真。我是用它在UI定稿的情况下，提前当完成品测试交互体验的。当然也自带控件，用于原型设计。&/p&&p&还有三种模式，场景模式（Scene View ）和细节模式（Details View）分别负责交互设计和UI设计两个部分，在设计完成后可以在第三个模式（Overview）查看整个APP的架构。&/p&&p&方法：在场景模式中，添加Actors（按钮，文本段落，文本热点）和Actions（触发动作），可以设置界面跳转时的TRANSITION效果，声效，延时，Retina 空间等交互体验辅助特效。&/p&&p&然后在iOS设备上安装Briefscase，通过Dropbox同步后使用。&/p&&p&缺点：贵。1298元，感受一下。标注起来还是不太趁手。通过dropbox同步有点慢，又没办法加快，只能生等。可以先试用一下，觉得好再入手吧。&/p&&br&&a href=&//link.zhihu.com/?target=https%3A//itunes.apple.com/cn/app/blueprint-ios-mockup/idFmt%3D8& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Blueprint + viewer&/a&&br&&figure&&img src=&https://pic1.zhimg.com/50/aef49adc544d404b900861db_b.jpg& data-rawwidth=&480& data-rawheight=&360& class=&origin_image zh-lightbox-thumb& width=&480& data-original=&https://pic1.zhimg.com/50/aef49adc544d404b900861db_r.jpg&&&/figure&&br&&p&我最早用的原型软件，现在制作出的原型已经出现在App Store里拉。Sakura Day。&/p&&p&当时用免费的功能（2个项目，无法导入dropbox图片，无自定义控件）就做出来了。后来接手公司大项目，专门买了完整版128元。&/p&&p&但是注意，这是用iPad做，iPhone或者iPad看，没有电脑版的。我当时就是为了地铁上可以用，是优点也是缺点。&/p&&p&方法：基本都一样，就是在iPad上操作。触控不那么精确，但是操作体验很好，完整版的自定义库按钮很多很丰富。&/p&&p&平台：iPad + iOS&/p&&p&缺点：最重要的就是只能在iPad上编辑，我做了个大型的项目，打开还是稍慢点，但是稳定，操作多了有点累。分享需要对方装软件，而且生成的项目文件会很大。&/p&&p&&strong&总结：&/strong& 专业软件还有很多，各有千秋，这两个是最快支持iOS7的，说明他们很重视产品保证更新。但是价格确实也是不菲，优缺点很明显，不符合国人习惯。腾讯那个整体是很不错了，除非你和我一样只用mac。&/p&&br&&b&HTML型&/b&&br&&b&中保真度；自带控件；全平台；需联网；少交互；收费+免费&/b&&br&&br&&a href=&//link.zhihu.com/?target=https%3A//www.flinto.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Flinto&/a&&figure&&img src=&https://pic1.zhimg.com/50/df2a54e4ea3ab_b.jpg& data-rawwidth=&735& data-rawheight=&718& class=&origin_image zh-lightbox-thumb& width=&735& data-original=&https://pic1.zhimg.com/50/df2a54e4ea3ab_r.jpg&&&/figure&&p&&a href=&//link.zhihu.com/?target=http%3A//www.ui.cn/project.php%3Fid%3D11107& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&在Flinto中快速制作iOS原型&/a&&/p&&p&我是通过下面提