个人技术博客
个人技术博客
由于我在团队里负责的是美工的版块，所以咱们就说说UI那点事儿~
0.关于UI
我是在结对编程才开始接触原型设计，接触UI的，发现有很大的兴趣，才开始慢慢学习和了解~
以下是百度百科对UI的定义：
UI即User Interface（用户界面）的简称。泛指用户的操作界面，包含移动APP，网页，智能穿戴设备等。UI设计主要指界面的样式，美观程度。而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。
我对UI的定义：
一款软件的颜值！所以要好看！功能清楚！用户体验友好！
毕竟这是个看脸的世界
UI设计就像是在创造软件的美丽的外表，而编程设计就像是在塑造软件有趣的灵魂。软件有了美丽的外表和有趣的灵魂，谁不喜欢呢😝
1.UI学习
1.1 新手入门
俗话说巧妇难为无米之炊，所以新手入门第一件事就是了解界面设计的工具，根据自己的需求和能力，找到适合自己的工具~现阶段UI设计产品层出不穷，种类繁多，功能各异，让我这初学者无从下手，经过一番研究和咨询，我尝试用了几款比较初级的原型设计软件，以下是我的用户体验🤔
No.1: 墨刀（MockingBot）
- 版本 ：Mac os & iOS
- 用户体验：
傻瓜式操作，基本上都是拖拽式操作，不需要看教程，你就能够上手。多按几个按钮，多试几下，你就大概知道要怎么操作了，非常适合新手入门！素材库不算多，但是对于刚入门的新手来说，已经是打开新世界，耳目一新了！也可以进行团队协作，交互性也不错，手机ios端可以预览界面设计的效果（手机端也就是这个功能，不过用了其他软件以后觉得墨刀这个功能真的很良心了！！！）也可以生成网页预览版本，还可以二维码分享预览，交互性真是良心！总体来说，新手用墨刀应该是最合适不过了，操作简单，功能完备，交互性好~ - 适合：新手入门，UI初步设计草稿~
- 安利指数：⭐️⭐️⭐️⭐️⭐️
No.2: Balsamiq Mockups3
- 版本：Mac os
- 用户体验：手绘风的界面很好看！手绘的画风也有点是打草稿的意思，貌似开发者就是这个意图。操作让我觉得在做一页页的ppt😂，操作不难。界面全英文的，得看懂这些英文，知道你要用的东西在哪找得到。交互性不是很好，要想看到界面转换的效果，就要求对方的电脑也要有这个软件，否则只能导出每个界面的pdf图片，预览效果不直观。（当时听说可以产生网页预览效果，开心了一下子。下了Napkee，效果可以说是一言难尽。以后想用Napkee的小伙伴可以放弃了😂）为了让别人预览到页面转换关系，迫使我用OmniGraffle画了一晚上的各页面关系图（orz）毕竟是一款小众的原型设计软件，如果你对交互性没有要求，maybe为了颜值可以一试？但是对交互性稍微有点要求的小伙伴，就不要为难自己了（认真脸）
- 案例教程：Balsamiq Mockups3中文教程 全英文软件，咱们还是看看教程吧。
- 适合：（英语好）新手入门，UI（不要求交互性）的草稿
- 安利指数：⭐️⭐️⭐️（可能完全为了手绘风安利？？？）
- 画风：
原型设计的工具很多，找到一款好用的你喜欢的软件的捷径是——多试！探索期间，我也下了很多其他的软件，因为不同得人安利的软件可能都不一样。下下来，试试，看看画风是不是合胃口，不喜欢就卸掉呗，你终究会找到适合你的~
新手入门至此大概就了解了UI设计是怎么一回事，也能够设计一个比较简单的作品出来了~
1.2 新手进阶
完成前期界面初步设计（草稿），PM说接下来你们该去学习ps了，要学会切图，切不同像素的图。
（一脸懵逼😯）什么是切图？？？听说ps很难？？？
从这里开始，我才觉得可能才真正接触UI吧，所以在知乎搜了这么一个问题从零基础如何自学 UI 设计？里面安利很多素材很多教程很多干货！值得一看！
进阶工具：Sketch
在知乎里探索发现，Mac做界面设计可以用Sketch，比ps做界面友好，功能也不逊于ps？那就试试呗~
- 用户体验：Sketch确实名不虚传啊！真心强大~功能完备，操作不难，界面友好。就单纯他比ps轻量级就能完胜ps😂，我启动和退出ps都要好久（可能我的电脑比较不给力）。而且Sketch有很多超级好用的插件，极大的方便界面设计——sketch measure（标注插件，一键标注所有，不要太良心！）等等，虽然sketch原版是英文的，但是也有汉化插件，反正就是各种好！上手也不难，看几个视频教程就会了~~
- 教程：这个网上还是蛮多的~毕竟sketch很热门！
- 安利指数：⭐️⭐️⭐️⭐️⭐️ （良心软件！）
其他工具：真的要设计出前端人员可用的UI还是需要用到很多工具的，好的工具也能减轻你的工作量这里有一个工具安利网站，个人觉得还不错工具-UI中国
进阶素材
在设计UI的时候还需要用到许多的素材：图标、图片、网页模板等，有的是要放入你的作品中的，有的也是需要激发你的设计灵感的~
图标素材：Iconfont
这些干货网站都可以在上面提到的知乎的那个问题里找到~~~
这些是我在UI设计学习过程中的一些收藏
其实在这些网站里还能找到很多教程、设计规范等等很多干货，很多需要学习的东西！
2.经验总结
完成我们产品的UI设计的过程，是边学习边完成的过程，这就是所谓的Doing by Learning吧~
学习了很多关于UI的知识，也激发了我的兴趣（毕竟不喜欢编程，也许以后会走UI这条路也不一定呢~）
在写这篇博客的时候，想写的东西很多，但是交叉的内容有很多，不知道该怎么排版才能让读者真正能收获一些东西呢，亦或是让以后的自己想起当年这些前车之鉴，maybe I‘m not a good writer~
如果我有幸让你看到这篇思路有些乱的技术博客，原谅我的词穷和乱七八糟的逻辑😂
我是个新手，UI的路还很长有幸我们可以一起学习
