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-uiant-designsemantic-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要自己先审查,再开会。

一些学习课程

安排在周六下午进行播放

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,799评论 25 709
  • 本文为2016年11月9日,『前端之巅』微信群在线分享活动总结整理而成,转载请在文章开头处注明来自『前端之巅』公众...
    尾尾阅读 13,666评论 3 32
  • 每个做父亲的,都希望给自己的孩子创造最好的条件,过上最好的生活,从而补偿自己成人世界里的缺憾。 作为新晋不久的老爸...
    良有方阅读 1,716评论 2 0
  • 本节课是认识图形的第4个活动“摆一摆”,让孩子把刚认识的图形重新从大脑中调出来,再次直观呈现,强化学生对这些...
    上小官阅读 4,809评论 0 0
  • linux下git的安装和使用 最近在使用github,感觉不错。在windows下,可使用github提供的wi...
    鲍陈飞阅读 9,538评论 0 2