恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
价值一万元的产品原型设计,长这样!
0.0°
2020-06-20 原创文章 教程 举报 698 2 2 0

之前我们宣布了「墨刀产品素材设计大赛」的比赛结果,刀友们纷纷留言说「太强了」、「厉害」.....

也有部分刀友好奇,这些作品到底是如何制作的?以及大佬们到底有什么独特的产品搭建技巧?!


今天,我们就邀请了本次大赛的最强王者——黑客企鹅(诗仪),让她来分享自己的作品和一些产品心得,赶紧来看看吧~


Hi ,我是黑客企鹅,本名叫诗仪,是一位专注于用户体验的设计师~


赛前,应该有很多人都看到我老在群里口出狂言,说要拿第一。幸好,没有被打脸,维持住了嚣张狂傲的人设~

废话不多说了,先跟刀友们聊聊本次的获奖作品——《摄图APP》吧。

点击此处体验完整原型



关于作品

灵感二三事


艺术来源于生活,作品也不例外。


我自己平时会习惯性拍摄一些风景作为手机壁纸,偶尔也会分享给朋友们看。这个时候我就会想到有没有人和我一样,希望把自己看到的美好事物,定格下来,分享给身边更多的人?


所以就想到本次参赛题材要做什么了···

图片来源:unsplash



设计思路


我将作品的使用人群定位为跟我一样是爱好摄影分享的年轻人,年龄在16-30岁区间内,都是年轻且较为审美挑剔的用户。


所以设计目标:符合使用者的审美和需求,打造一款便捷、时尚、简洁、健康的分享平台。



在色彩搭配上运用高级黑为主色,亮红色为点缀色,不仅能提升品牌认知度,还能突显出时尚、魅力的行业属性。



在视觉和布局上采用瀑布流、卡片式等流行操作和浏览排版方式、增加用户关注度。





考虑到墨刀 PC 浏览与 APP 浏览是有区别的,为了让交互看起来更舒适清晰(个人使了点小本事),浏览路径简短,我还在动效上费了点功夫,这样不仅方便用户发现和了解,并更好的引导用户继续下一步操作。


制作流程


其实本次作品制作周期并不是很长,只用了五个下午,整个流程相对简单。

 

Step 1

先确认要做的题材内容(参考我的设计灵感)。


Step 2

思考产品的核心的功能定位,以及为什么要做、做的用途是什么。

 

Step 3

对自己所做产品,找到 2~3 个竞品进行分析对比。


不管是做什么内容,都一定要找到类似的题材作为内容参考,因为这样才会提升作品的细节。


我在做「摄图」时,就找了与壁纸有关的【克拉壁纸】和素材分享的【花瓣】作为参考对象,从中寻找它们的亮点。


克拉壁纸


花瓣网


Step 4

领悟到竞品精髓的时候,就可以开始自我头脑风暴,用脑图工具简单的梳理要做的内容,如下图:

这样简单的操作,可以梳理出功能的亮点,能够决定作品的最终定位。

     

Step 5

思考出设计思路(详见上文)。

 

Step 6

思考部分结束了,接下来就要着手开始做了。


我的方式是先简单画出布局草图,并大概分析一下要排版的布局,这样可以令我在搭建原型时避免出错。


       

Step 7

因为这次作品是要用来参赛的,所以作品一定要符合比赛的规则!


在比赛详情中提到作品的评审标准是:"原创","实用","设计"等重要细节。


所以制作【摄图】之前,就要优先考虑每个模块是否可以直接创建为组件,是否能够多次使用的,并且尽可能去避免使用自己的原创素材(包括图标等),多用墨刀内置的功能和素材。



并且站在产品角度,我个人也不太建议做太多复杂的动画交互


所以这次的交互,大多采用了生活常见的交互体验,很符合本次大赛要求的实用性!但在整体原型的排版中,也要加入一些个人创意,达到一定的原创效果。


 

Step 8


当所有的布局都搭建好之后,就开始决定【摄图】的配色。相信大家也都看到摄图是黑色作为主色,红色作为点缀色。


为什么我会采用这配色方式?


首先黑白本身就很符合高端大气&时尚的气质,其次,也是站在产品的角度去思考,要尽可能避免设计师过多的发挥



至于为什么会选红色作为点缀,并没有当作是辅助色来使用呢?


原因也很简单,红色是我们生活中很常见的提醒颜色,作为点缀色是最好不过了,不仅可以提升作品的品质,还能避免在原型上过于滥用,最后找几张高格调的图片衬托一下,从而达到视觉最佳效果就可以啦~

 



Step 9


最后一步也是重点!那就是多次浏览运行检查作品,确保每个交互细节都毫无差错。


同时也要带着一个想法,就是站在用户的角度上去体验是否会有感到疑惑的地方,或者能否稍微减轻用户的学习成本,进行内容上的优化,在这提及一句:原型不是做给自己看的,是做给别人看的,所以不能仅仅只满足是否达到功能的需求,要多站在用户的角度去想哦~



关于我

 

原型搭建心得


原型搭建最重要的是能重点突出功能和实现基本的交互过程


当然,原型通用组件也是原型搭建中必不可缺的存在,一定程度上要适应快速修改。


除此之外,要注意交互效果的时间是有规范的哦~


参与感受


很刺激吧?


首先,第一次把做的内容分享给那么多人看,就收到了赞赏和那么多专业的评价。


其次,通过这次比赛也认识到了很多有意思的人,拓展了交际圈,收获到了一些行业冷知识。

 

最后,在比赛作品中也得到了一些产品启发。比如,我觉得《今天吃啥-美食原型》这个作品不管是在创意上还是整体结构上都十分的有意思,产品设计和逻辑上都很值得我学习。 

今天吃啥-美食原型

点击这里体验完整原型


产品学习


只有保持不断的学习,才能保证自己在进步。


在工作日的时候,我会选择在空闲的时间内听会电子书,晚上会固定挑选几个优质的公众号看几遍文章,偶尔会去听下网易的直播课程。


周末休息时,会看 3~5 小时左右的书(偶尔会去读书室),也会抓空练习下软件技巧。



一个关于产品的预测


我觉得未来的趋势会有可能会走向 VR 智能化,触感交互也会提升到另一种非触屏操作。


图片来源:ssyer


墨墨姐有话说:《摄图APP》整体操作下来特别流畅,设计感也十分的强,从交互动效上看作者确实下了一些功夫,个人风格属性极强,对其他人来说也有借鉴意义。


以上就是诗仪带来的分享啦,如果你有什么问题想要询问她,请在留言区写下来吧~


也别忘了去素材广场体验她的作品哦~

Powered by Froala Editor

更新:2020-06-20

收藏

2人已收藏

墨刀_MockingBot

在线产品设计写作一体化平台

  • 494

    作品

  • 1448

    粉丝

  • 3

    关注

  • 产品经理和设计师谈恋爱,看得我比“老坛酸菜”还酸!
  • Figma”断供“后:墨刀能为中国企业做什么?
  • 产品经理干久了,有哪些后遗症?
  • 超实用的后台原型,产品大佬的摸鱼技巧都在这里!

    猜你喜欢

      2020-06-20 原创文章 教程 举报 698 2 2 0

      价值一万元的产品原型设计,长这样!

      0.0°

      你确定要举报价值一万元的产品原型设计,长这样!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年05月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录