20170727会议草稿[PM线框图与UI图制作规范]

我在公司邮箱里共享给雅楠、立基一个文件《西柚设计规范Sketch》，里面是sketch文件。我大概讲一讲，以后我们线框图设计与ui设计需要遵循的点。

微信公众号

一般的功能类的app，按照设计规范中的来。特别是cell、popover等常用组件的设计。
PM与UI先概览一遍vux

APP设计

设计规范中包括iOS、Android。目前的情况，我们只按照iOS来设计一套。实际上，安卓和iOS在设计上，是存在设计规范上的差异的，特别是APP的header部分，返回键、title的位置等。我们以怎样的方式，可以花尽量少的时间，在做出的效果图上表现出差异，让开发理解？希望各位想一下这个问题，微信私我。

后台管理系统设计

后台管理系统设计前，PM必须与客户确定好使用框架，一般的客户也不会有意见。
我们一般使用的是vue的element-ui框架。
pm在设计线框图时，必须参考element-ui；
其他可供参考的框架
ant-design
semantic-ui

pc网站设计

企业官网设计，建议pm设计线框图前，先去找参考网站（直接百度“网站模版
”、“企业官网模板”），让客户看看喜欢哪种。
pc网站设计，同样可以遵循element-ui、ant-design、semantic-ui

线框图设计经验之谈：

• 尽可能轻量级操作

  
  
  

  较轻的设计

较重的设计

• 少用弹窗（modal）
  elementui中叫message box和dialog，semantic-ui和ant-design中叫modal了

  
  
  

  少用弹窗

• 避免自己设计组件
  一些组件，如tab、table、menu等，在ui上不需要重新设计，节省时间。
  另一些组件，如transfer，这样的组件pm一定要知道。推荐各位pm好好研究下element-ui和ant-design，里面都是前人的结晶，学会学习、消化，只有学会了别人的，我们才能创新。

我们缺乏的

• 组件状态。当表单不可提交时（如登录界面未填写手机号），按钮应为灰色。而现在大部分的效果图并没有体现。
• 最最基本的交互。如发送验证码按钮，线框图不会做点击后的倒计时，以至于UI也没有倒计时。这说明我们PM与UI经验缺失，也没有把角色彻底代入。
• 不会去模仿，不会精益求精。类似的界面，不参考大公司的设计，而是自己想当然做一个交差。如律超人的一个身份证认证页面。和大家强调一点，别人已经做了的东西，我们再做，如果做的比别人差，那不能说明我们智力不够，只能说明我们真的不用心！如果你不去模仿、不去思考，那么你做的东西永远都不会进步。
• UI与PM的关系
  • 我们目前的情况类似于PM给线框图，UI出了效果图，PM随便看一看，就丢给开发。最后开发出的东西问题一堆。
  • 共同为产品的最终效果负责。UI发现线框图问题，要与PM进行沟通，想一想这个图合不合理。PM发现效果图做的粗糙简单，也要和UI进行沟通，反思是不是自己的线框图没有表达清楚。沟通一定是双向的，这个过程是互相提高、互相学习的过程。
  • 一个人的力量是单薄的。所以，线框图出好后，全体项目组开会。UI图出好后，PM要自己先审查，再开会。

一些学习课程

安排在周六下午进行播放

• 交互设计师必备的9种能力
• 如何做好产品生命周期中的项目管理？
• 产品可用性设计宝典