UI设计之简历设计练习心得(实战篇一)

在上一篇《UI设计入门如何学习》中我提到的一些书籍和网站，我近一个月来都有看，进度比较慢，那几本书还没看完，不过我觉得我对UI设计还是渐渐地多了一些想法。一个好的设计师，平常要做到多看，多想，多练。要把看到的学到的运用到实践中才是自己的，所以在4月初的时候师父就布置给我一个作业，网页版的简历设计，用PS把蓝图做出来。

交了5次稿给师父，评价从开始的好丑（粤语“好肉孙”），到最后的感觉挺舒服，从“垃圾”作品到比普通的UI设计要好，每次完稿都进步一点，就像看着自己成长，很开心。

第一步应该是大量地参考优秀的网站，you should understand why they do it like that,learn color palettes,interface ideas,layouts and typography...

第二步，自己在白纸上或者在PS上把自己网页的主元素画个框架出来。例如（书上截图）：

手绘草稿.jpg

第三步，往上面添加具体的内容，字体，图片等。我觉得有必要强调一下使用PS制作的时候应该使用参考线和网格，排版出来才比较好看，不会参差不齐。

巧用网格和参考线.png

具体的内容。
1.字体方面。
一开始我制作的是中文简历，字体选择方面把握得不好，加上平时看的都是英文书籍和英文网站，中文的字体真不知该如何选择。第二稿开始就转为英文版。使用了Arial字体作为大标题personal resume的字体，ubuntu字体作为导航栏的字体，Hiragino Sans GB（苹果的丽黑字体）作为正文的字体。我最为喜欢ubuntu和Hiragino Sans GB字体了，追捧ubuntu系统和苹果产品的群众那么多，我相信大家也会觉得它们的字体让人看着舒服。

fonts.png

读书笔记：1、标题和正文字母大小写不同粗细不同 2、网页字体种类不能太多，不超3种，可以是标题一种，正文一种，图表列表一种，字体的搭配要和谐，看着舒服 3、推荐的字体，Google Fonts,Proxima Nova,Futura,Lato,Montserrat,Open Sans, Conbert...

font.png

选择好字体后还要注意要调整字体的字间距和行距、对齐方式！！！

2.配色方面。
我现在还是以参考、模仿为主。绿色为主色要慎重，稍有不慎就会变得很难看，黑，白，灰，蓝比较容易搭配。

最全的中文色彩库
http://www.peise.net/
配色神器

• Adobe Color CC
  https://color.adobe.com/
• Color Scheme Designer
  http://www.peise.net/tools/web/
  另外，大家可以看我上一篇《UI设计入门如何学习》提到的一些网站，新增推荐:
• UI设计导航网，包含了界内知名的相关设计类素材网站,学习网站,干货下载等多版块,更快速的提升自我。
  http://hao.xueui.cn/
• 设计师网址导航网
  http://www.userinterface.com.cn/

3.排版布局方面。
我的感受最大的是黄金分割布局和留白。

黄金分割是设计的利器，应用范围很广。

黄金分割是指将整体一分为二，较大部分与整体部分的比值等于较小部分与较大部分的比值，其比值约为0.618。这个比例被公认为是最能引起美感的比例，因此被称为黄金分割。
黄金分割具有严格的比例性、艺术性、和谐性，蕴藏着丰富的美学价值，这一比值能够引起人们的美感，被认为是建筑和艺术中最理想的比例。
画家们发现，按0.618:1来设计的比例，画出的画最优美，在达·芬奇的作品《维特鲁威人》、《蒙娜丽莎》、还有《最后的晚餐》中都运用了黄金分割。而现今的女性，腰身以下的长度平均只占身高的0.58，因此古希腊的著名雕像断臂维纳斯及太阳神阿波罗都通过故意延长双腿，使之与身高的比值为0.618。建筑师们对数字0.618特别偏爱，无论是古埃及的金字塔，还是巴黎的圣母院，或者是近世纪的法国埃菲尔铁塔，希腊雅典的巴特农神庙，都有黄金分割的足迹。——百度百科

网页上的黄金分割.png 苹果logo的黄金分割.png

上面只做了简单的介绍，想深入了解的朋友自己百度找资料吧。我在布局排版的时候一直想着1/3、2/3，1/3、2/3......虽然最后也没有用得很精确，不过看着也不会不舒服。

学会留白
从前总是觉得留白太多会显得画面很空，就会不断地往上面塞东西，结果适得其反。

留白是艺术设计中需要遵循的重要视觉准则之一。网页设计中留白使元素之间保持距离，拥有呼吸的空间。

• 留白在网页设计中的合理使用
  http://www.uisdc.com/13-examples-of-whitespace
• 五个诀窍帮你快速掌握留白的艺术
  http://www.uisdc.com/5-design-skill-improve-blank

留白.jpg

4.整体做好以后可以添加小图片加以点缀
这点心得没有很多，欢迎指点。

说了那么多，最后还是得附上自己设计的简历吧(^__)
页头是模仿别人网站的http://www.barkpr.com/

我的简历设计.jpg

时间线的使用上我开始有些误解，有兴趣的朋友可以看看《在设计中或许你误用了时间线》

写得不对的地方还请各路大神指正，我设计的简历还有哪里需要改进的地方，还请各路大神指点一二。谢谢!