记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 21528|回复: 2
收起左侧

[设计经验] 【产品实战经验分享】原型稿也有规范[含5P]

[复制链接]
发表于 5 天前 | 显示全部楼层 |阅读模式
                               
                        原型图不只是工作,更是设计对产品的理解。对整体的把控和思考的过程。所以后期的一些设计上的小错误都是因为没有严格的思考。一个产品的经验分享给大家...

                                                       







一、我为什么要做原型图的分享?


最近公司有很多面试者,加上有一些设计的分享群(打个广告,“花火分享”,希望大神们能帮忙分享文章)。好多人都会把自己做的某个产品页面分享出来,问大家“哪里不合适?这个按钮怎么设计好看?文字放在哪里比较好?”。其它的先不作评论。我个人觉得,别人未必了解你的产品思路,你的需求,你的设计想法和实际情况。所以,这类回答基本是不负责和没有帮助的。为了解决这些初级且琐碎的问题,我在思考到底是哪个环节出了问题。


ps:这里要感谢我的两位领导,是他们教会我一个道理,做设计不能是抠细节,而是先构思框架。整个大框架都掌握了,接下来就相对容易些。


出于这些目的,我决定总结自己的经验,试着分享一下解决一些问题。改善一下现状,说句不要脸的理想,为设计行业水平的整体出一分力;


新手设计师对设计岗的基本认知就是:产品(原型图)-设计(设计稿)- xxxx
但往往设计是一个很重要的承上启下的角色。你需要充分了解公司的商业目标,商业价值,用户的核心需求,产品现有或者未来的结构大概的走向,开发成本和难易度等等,多少都需要了解。这样你的稿子才有理有据。不需要讲究多绚丽,起码是符合用户期望是合理的合适的设计。说的更夸张一些,和别人撕x时,你是让别人服气的。我个人是这么认为的。


这样在将来的产品迭代中,在整体新增新需求时,你才能知道在哪些地方加是恰到好处的。高级一些的设计师甚至会事先都留好空间来防范这新增的需求。


更重要的是:产品经理不给原型图;
这样就会引起设计师“随意发挥”,如果没有规范,那真的是“抽象艺术”。
所以,我接下来分享的不光是一种技巧,更是一种方法,一种整体梳理产品的思路。帮助更多设计师更理解产品和更规范的一套思考方法;(大神就别来捣乱了,我直接跪拜)


二、原型图


最近面试问到的一般初级设计师都了解axure和mock plus等。这两款都各有特色。但是我已经玩够了。所以今天分享一个更快捷的就是:experience design;简称XD;(?ì _ í?)


说正事专用分割线“----------------------”


无论是设计还是其它的什么,总结规范(工作总结)最重要,因为可以快速的帮到你;不废话了,直接上货;


三、我想做  比汉斯和追波上的高大上原型稿;如下图(图片来自网络):


如何做到这么有完整,美观且工作效率要很高?





四、思考和经验结合;


我经常习惯用experience design(简称“xd”);这款软件是做设计用的,但我一直以来用它做原型稿。如下图:





五、如何做?


首先,假设我拿到一个“评价”的需求;需求的其中一个页面就是对订单评价;那么接下来你的脑子里肯定有个大致的构思;


1、导航栏
2、订单基本信息。谁,干了什么事,金额多少,完成时间等等;
3、一个大标题。比如:请好评之类的引导话语;
4、评价星星。或者其它图形。
5、不同的评价分数,对应不同的可选择标签。
6、匿名选项或者默认匿名。告诉用户不用有思想负担。
7、button。一个大的提交按钮。
基本以上这些功能可以先做个架构;如下图:





整体梳理一遍后,思路是清晰的;


六、架构也要有规范;(重点)


1、不要随随便便扯个图形方框就摆在这;有根据吗?有考虑吗?有整体性吗?我都在问自己
2、不要任凭心情来
3、不断调整试错
4、不懂的去借鉴大神的尺寸,因为那比较舒服
5、根据设计规范来推导原型的规范,都是相同的道理;
接下来是我的规范:注意看我的尺寸(@1x);





不举例子了,太累了;


1、我的标准都是以10px为单位的;
2、文字是以14为标准,画一个长100px,高14px的灰色框代替文本,行间距自己掌握;
3、图片和icon挺考验功力的,初级新手建议去看看weui。微信的规范,可以学习借鉴;
4、最后拖到ps里看一下效果,或者直接在xd里直接发布到链接上,然后用手机演示操作,体验一下;
5、一些app,比如微博、淘宝等都会用这种类似的图作预加载页面,我觉得用户体验是很好的;
6、这种原型好修改,可直接与开发和其它人员沟通,有了规范后,效率高,灵活性强;


做个展示,工作中的一个模块:







以上是分享内容,具体的可以看视频教程
第一次分享,有不足的地方请见谅。希望大神多多拍砖;感谢;

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x



上一篇:什么是设计?怎么设计?设计是什么?
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
发表于 5 天前 | 显示全部楼层
请问我的XD无法发布怎么办?好像是因为国内的adobeID无法发布,大神怎么解决的
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
回复

使用道具 举报

发表于 5 天前 | 显示全部楼层
666 谢谢 视频有点模糊
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
回复

使用道具 举报

快速回复 返回顶部 返回列表