版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
产品原型设计规范“三步走”战略最近在带产品新人的时候,发现产品新人在绘制原型的时候,往往随性发挥、自由涂画,最后画出的原型千人千面,UI设计看了想打人,前端开发看了想骂人,后端开发看了……我的刀呢?所以在今天,我想谈谈产品原型设计的规范问题,综述为“三步走战略”。一、第一步:让UI设计平静下来——页面尺寸规范UI设计师在看到一份产品原型设计的时候,首先关注的就是整体页面的尺寸该做多大和页面内容能否完全的展示。此处为了让UI设计快速切入设计工作,而非纠结于尺寸的等比例缩放,降低原型理解难度,我们很有必要对页面的整体尺寸激进行规范化设计。(PS:假设你的原型页面布局无限趋近于页面的真实比例,那么也是一种对UI的鞭策:哥已经把尺寸布局定好了,你不会只是想配个色就交稿把?!)举例说明:如常见的WEB端软件页面,此处建议以1920*1080的尺寸进行规范设计。效果做好后,大家可以F5预览一下,正常的显示器,在隐藏左侧页面目录后,都可以满屏铺开,视觉效果瞬间拉满!上图是随手画的页面效果(铺满全屏需手动且未必可以):上图是页面规范过的效果(自动铺满全屏):经过上面两张图的对比,结论显而易见。另外,请各位产品同学在同一个页面中,尽量将输入框、按钮、列表的长宽都统一设定,这样显示效果更佳!二、第二步:让前端开发冷静下来——原型文件中需增加的字段说明原型设计不是让产品经理自嗨的,而是有效帮助开发人员理解软件功能意图的说明材料。认可此观点的同学请往下看,不认可的请ALT+F4。一份好的原型设计,应该列举出有关产品的说明材料,比如一个让账户输入密码的文本框,你应该准确注明相关的输入限制,如下图:上图为预览效果1:上图为点击黄色数字后的弹出内容:上图为RP文件中添加说明的地方:结合以上三张图,告诉大家如何添加元件说明以及对应的展示效果;这样做可以让前端开发人员准确理解各个字段或组件的准确含义,保证开发的准确性,也避免前端开发因为一些字段含义而每天找产品问东问西,能写清楚就别BB太多。三、第三步:让后端大哥放下刀——原型中添加功能结构图与业务流程图做好以上两步的前提下,紧接着就是面对后端开发人员,这时他们最需要的不是产品经理滔滔不绝的解释陈述,而是实实在在能帮助他们理清开发逻辑的说明资料,比如功能结构图与业务流程图。上图为举例说明的功能结构图,解释页面结构与内容:上图为用户新建司机信息的流程图:通过以上功能结构图与业务流程图的梳理,后端开发可以迅速明白设计思路,从而快速理解功能逻辑机构,自然就放下了手里的“刀”。综上所述:产品原型的设计规范三步走已经
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 减灾工作制度
- 专病工作制度
- 5五项工作制度
- 分管理工作制度
- 三创建工作制度
- 六个五工作制度
- 先锋岗工作制度
- 县商会工作制度
- 2026 年中职港口与航运管理(港口航运基础)试题及答案
- 维修电工安全操作
- 常见四肢骨折病人的护理
- 四型干部建设方案
- 蕉岭县幅地质图说明书
- 2023年上海奉贤区高三二模作文解析(质疑比相信更难) 上海市高三语文二模作文【范文批注+能力提升】
- 2023年江西环境工程职业学院高职单招(语文)试题库含答案解析
- 湘教版(2019)高中地理必修二知识点汇编(全一册)
- GA/T 2000.156-2016公安信息代码第156部分:常用证件代码
- 10KV开关柜二次原理图详解讲解课件
- 北师大数学六年级下册第一单元《圆柱与圆锥》单元整体解读课件
- 考研考博-英语-中国美术学院考试押题卷含答案详解4
- DLT5210.4-2018热工施工质量验收表格
评论
0/150
提交评论