在开始这个话题之前，UI设计师先来回想一下自己的工作流程，当我们开始做一个界面时，不外乎两种情况，一种是新产品，一种是现有产品迭代界面重绘。对于前者，是不是先扒拉扒拉参考一下竞品的界面设计，然后套一套自己产品的功能，然后就可以开工了，这里需要放个导航条，嗯，这里用选项卡，再加个搜索框，搜索图标放里面好还是放外面好呢，就放外面吧，热门搜索要不要做成标签呢，不行，这事决定不了，去问问项目经理去，这里还需要一个文本输入框，限制200字，那就给它个高度300像素吧。而第二种情况，更简单，重新配配色，布布局，画画图标，就酱。不出意外的话，绝大多数UI不会脱离这个套路。（“大神级”UI自然也不会在看这篇文章，这一部分人就暂时忽略了）
如果作为UI设计师的你现在仍然停留在这个阶段的话，那从现在开始，你需要重新规划一下自己的设计思路了，并且，最最重要的是，你需要了解两个东东，“框架”和“库”。这两个概念我自己也比较模糊，从UI设计师的角度出发，我们需要知道的一点是和你们合作的前端极少极少不使用框架，而UI库是一些封装好的组件的样式，你发给攻城狮的设计稿，他们拿到后的第一反应就是赶快看看（咳咳，当我没说）有没有现成的可使用的组件样式，最好越接近你的设计越好，然后简单改改，攻城狮们的工作思路和我们是一样一样的，最好不改交互方式，只改样式。（什么控件、组件、插件的，我也不能严格区分，所以即使有错误的地方，也请勿纠正，哈哈）
说到这里，UI设计师又开始各种烦躁了，设计师到底为毛要掌握这些莫名其妙的知识？？举个例子先，我们都知道给响应不是那么快的页面设计一个加载动画，那作为设计师的你知不知道加载状态是和服务器存在数据交互时使用，如果是本地行为，则不需要加载状态。只有了解这个，你才会知道你的加载动画应该在哪些页面出现，进行什么操作时出现，以什么形式出现合适。（咦，这个例子似乎举得没有代表性，那么来看下面这个例子）
就说个最简单的tab选项卡吧，SUI组件库里的tab选项卡样式是下面这样子的：
tab样式.png
样式似乎没有什么参考性，但你从中要得到的一个重要信息就是，作为选项卡而言，内容要和选中标签页看上去成为一个整体，也就是说你可以重新设计成下面这个样式
自定义的tab选项卡样式.png
但如果你设计成了这种样式
错误的tab样式.png
那么请来告诉我，这神秘的横线我该如何理解呢？即使下面这种，仍然不是最佳方式，因为我们的选项卡需要“第一眼看上去就知道哪个tab页处于选中状态”。
目前广泛应用的UI组件库，包括easyUI、amazeUI、Bootstrap等等，我们可以从这些来入手，在设计时进行一下参考，如果它的按钮有四个状态，OK，你也来对应设计四个状态，如果它的input输入框有禁用状态，获得焦点状态，那同样你也要在自己的设计文档中予以体现。（当然，并非绝对，也要考虑项目的实际情况，灵活变通）
现在重新理一下工作流程，你要先咨询一下前端开发人员他们常用什么，或者项目中已经使用了什么，咱们来举例说明，如果前端攻城狮们已经使用了EasyUI，而碰巧你的项目中需要一个日期选择的功能，那正确的思路应该是怎样的呢？
首先，你需要先看一下EasyUI库里日期控件的样子。就是下面这样
easyui的日期控件.png
然后试一下功能，再进行设计时，心里就有底了，比如可以改成下面这样
重新设计后的日期控件样式.png
但这样就完了么？作为UI还需要考虑对于这个控件而言都提供了几种状态？默认加载的当前日期、选中其他日期后的当前日期、鼠标经过、周六/周日的日期颜色、非本月的日期的颜色，这些都需要一一体现在你的标注文档里，事无巨细，一旦疏忽了其中任何一个小细节，好点的情况是负责的前端开发人员会过来和你沟通，而有时可能攻城狮们一疏忽，那只有寄希望于视觉走查和测试了。这么简单的一个日期控件都需要考虑全面，所以，一个合格的UI还是需要多沉浸的。
如果你不没有看过UI库里日期组件的样式，而自作主张的设计成了下面的样子
不按套路出牌的日期控件.png
还拿出很多理论来支持自己的设计，你看，年和月的选择都很方便快捷嘛，嗯，好想看你被开发人员暴打的样子……当然了，这里不是说不让你发挥你的创意，不过除非你有非常说服力的理由和让别人心服口服的设计理论支持，否则，不要做这种出力不讨好的事情，因为作为成熟的组件库，经过多年的发展，已经被很多人所认可和使用，也能更大程度上和其他用户经常使用的产品保持一致的交互。
对于移动端，Android SDK提供的界面UI基本没有看的必要，而绝大多数开源UI库源码在github，给设计师们直观的查看设置了门槛，比如GreenDroid等等，Android的UI框架和web的有个比较大的区别就是按组件分类，像Side-Menu分类侧滑菜单，Pull-to-Refresh下拉刷新，给UI设计师推荐一个awesome-android-ui，自带Demo， https://github.com/wasabeef/awesome-android-ui/blob/master/pages/Material.md ，包括一些动效，很直观。
比如这种水纹效果的样式。
ripple效果.gif
还有这种汉堡菜单/关闭/返回按钮的变换
变换的按钮样式.gif
作为UI设计师，在做原型稿的时候基本不用费尽心思用AE来做什么特效，直接附上效果和库的源文件地址就好，方便自己也方便开发。
另外移动端的UI日常尤其要注意控件样式的积累，自己建好文件夹，分好类，按钮/编辑框/switch/文本控件/进度条/滚动条/对话框/日历/导航/图表/菜单/轮播广告位/搜索框/标签组等等，为了减轻开发人员的负担，在看到不错的效果时，可以把Demo动画和项目地址同时保存下来，因为你的天马行空的想象或者简单一句“在XXX上好像看过这种效果”会让开发人员非常抓狂。
多看UI库的另外一个好处是拓展自己的设计思路，像下面这种Floating Action Button
FAB动态加载.gif
还有粘连效果的页面指示器
粘连效果的页面指示器.jpg
如果不是看到这种动效，或许我们自己也想不出可以做成这种样子。
iOS开发的话因为我本人也只涉及过寥寥数个项目，而且都是和Android用的同一套界面，所以未总结出足够的经验，最多看看最新版的HIG人机交互指南，参考过几个竞品，所以这里就不献丑了。
综上所述，组件库是个好东东，身为设计师但还未了解任何组件库的你，把自己暂时从闭门造车的状态中脱离出来，多看多想，再去做，方可与前端开发人员保持同步。
网友评论