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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
一个优秀的作品是这样产生的
0.0°
2020-06-09 原创文章 教程 举报 1146 2 2 0

你是否正在为设计一个 Web 产品而感到不知所措?


因为字体选择、颜色搭配、功能整合、模块分布等等有太多可以选择,并且它们自身有无数种排列组合的方式。


如果你正在被困扰,不妨看看这个:





你是否对现阶段的旅行产品不太满意?厌倦了观看视频、购票、做景点功课需要在多产品之间切换?想要一劳永逸的完成旅行?来看看这个作品吧。


旅行购票




旅行功课




酒店设置



看电影



以上就是这次「墨刀产品素材设计大赛最佳潜力作品奖」的获奖作品。


如果你想要了解它们的幕后故事,请看下去吧。


客户智能营销平台


栗子不二枣

点击此处,体验原型


关于我


梦想成为鸟山明一样的漫画家,但目前是爱篮球、爱画漫画的 B 端交互设计师一枚。


设计思路


在正式的创作前,我先思考了一下目前使用素材的痛点:

1. 墨刀基础组件无法满足 Web 端的设计需求,最终还是要自己徒手画 ;

2. 如果没有设计师的帮助,搭建的页面会没有重点主次,也不好看;

3. 页面设计目前过于枯燥,且过时,毫无生气。


基于上面三个问题,我提出的解决设计方案是:卡片化、层级化、情感化。




宗旨就是:“Everything is CARD.” 


非要详说的话,大概可以这样理解:


  • 卡片化:根据不同业务场景设计种类丰富的卡片,让用户只需要改几个字,就能快速应用。


  • 层级化:构建底层信息层级规范。运用文字自重和灰度、黑白灰以及品牌辅助色,来体现页面的交互信息层级,B端产品由于功能复杂,单个页面信息密度大,需要严格设计信息的层级,从而让用户能在繁杂的信息中抓住重点,引导其顺畅地进行操作。所有的卡片都是由此底层层级规范构成,因而也能保证最终搭建出的页面清晰。


  • 情感化:通常的 B 端产品都过于冰冷,像机器人一般,用户使用压力大,因此可以从设计上构建整个系统的情感化来让用户压力得到缓解,提升系统体验感,建议从这三个角度出发:文案引导拟人化,智能助理辅助工作,空状态趣味插画引导。




这样对产品经理而言,能够快速利用这里的业务组件搭建页面,高效产出近似设计稿的原型;设计师则能基于模板和组件框架,搭建团队设计体系,建立团队统一的原型语言,方便业务、产品到设计的沟通协作。


灵感来源


主要是基于:Ant Design、IBM Carbon Design System。



Ant Design


IBM Carbon Design System


制作流程


制作这个作品,我一共花费了 4 个晚上,构思方向和搭建原型各占一半。


具体流程如下:


1.理解

理解墨刀的产品定位和比赛方向,以及墨刀现有素材库素材特点,推测比赛想要什么样的素材作品。


2.定义目标

结合自身设计经验,确定目标为:垂直领域业务化、高度复用性、高保真化



3.设计策略

参考行业内优秀的Design System,得出以卡片化、层级化、情感化构建素材原型的设计策略


4.草图

纸上草稿,先确认核心场景和页面类型,将大致的页面布局画出来




5.情绪

在Pinterest搜索符合B端产品风格,且偏科技感的图构建情绪版,并描绘出视觉风格。


6.原型设计

基于以上在墨刀中绘制最终的原型页面和组件



制作技巧


明确原型的使用场景,并根据场景明确原型的侧重点。


如果是用来沟通想法,简单文字和方框即可;如果是验证方案,重点是保证信息和操作跳转完整性;如果是面向甲方或者领导提案,需保证视觉效果和动效;如果是制作通用素材供同事或者共享在墨刀,那么侧重于通用性和拓展性。



确定有哪些类型页面后,可先创建出这些页面并写上页面名称(先不用画出页面元素),直接制作交互跳转体验用户路径,有助于更好地优化页面框架和流程哦。




大赛心得


比赛的感觉,就像是参加了一场一人分饰多角的黑客马拉松,连续 4 晚疯狂输出,体会到如何在限定时间内高效完成一个产品的设计,最终的作品也是对自己设计思考的沉淀和输出。


在本次比赛中,我很欣赏《寻找逃跑的程序猿》这个作品,它很有创意地用墨刀做了个交互游戏。



创意能让世界变得有趣,也能改变世界,这个作品给我的启示是:工具只是帮助我们更好的创作,而创作是没有局限的,墨刀也不仅仅可以用来做原型。


其他


保持自己不断进步,就是要了解更多不同行业的知识,并学会连接知识,产出见解,把见解应用到自己的设计中。

预言一下,5G 技术可能会带来用户数据的大爆发,以后产品和产品之间比的是谁比谁更加懂用户,产品会越来越定制化,目前淘宝和抖音能做到内容的定制化,以后将不仅是内容,可能连功能都能定制化。


举个例子,一个产品经理用到墨刀和一个设计师用到的墨刀,界面就会不一样,产品经理的墨刀都是素材搭建模块,设计师的墨刀则是图形设计模块。


原型妙妙屋


MMO


点击此处,体验原型


关于我


一个狗屁膏药18线切图仔:MMO 

个人网站:HTTPS://MMOO.FUN


设计思路


本次设计的作品,我觉得它在内容及部分功能理念上都超出常规,是一个娱乐精细化的行业服务产品,模拟了一个封闭娱乐环境(无正常的联系方式与信号网络链接),为游客所需服务与娱乐而存在。


所有设计的功能合理且存在,同时该应用作为主程序,内含的功能都将作为可扩展服务的多场景子级程序(如:支付宝小程序、微信小程序),子级程序非独立个体存在,视情况与主程序紧密关联。



设计灵感


在很多时候,设计师都只顾着页面的效果,而忽略了实际开发。


当页面越炫酷,开发的工期就会越长,当开发开始取巧的“切图贴图”实现时,页面的维护将变得越来越繁杂且难以维护。


目前大部分的页面开发都由前端去实现,如果我们从前端的角度出发,满满的贴图是及其不可原谅,原因如下:


1.贴图式开发难以维护&扩展;

2.不符合组件式开发;

3.首屏(白屏)时间过长,致用户流失。


如果能够理解页面的渲染原理及常用的开发框架,最终进行设计,对设计与开发都是最高效的。




故事模拟


大致分为四个步骤:

1.主题咖创办了“多日游玩乐园”,该乐园为封闭式乐园,既一进入则中途不可离开;在主题咖乐园内,游客的食住娱乐都由主题咖提供的服务进行;

2.旅客购买主题咖门票需提供个人信息,并为其创办会员;

3.旅客在园区内的行为都由APP提供的会员码统一进行管理,如身份核验、支付、联系、交友等;

4.乐园采用内网作为唯一数据传输,旅客可通过增值服务使用外网信号传输 。


制作流程


首先要尊重本次参赛规则,更多体现的是可复用式设计,以及功能简化方案。


其次设计要有足够的耐心,建议先从大框架入手,比如项目的整体架构、功能的入口等脑图的梳理;


然后分析页面展示及复用表单等之间的关系,合理制作可复用性组件,如果对于复用无法做到极致,可以先尝试把需要用到该类型的页面进行基础排版;


最后结合实际需求统一设计为复用组件即可。




以上就是本期的「刀友访谈」啦,如果你对他们的作品有任何的疑问,请在评论区留言。


如果你想使用他们的作品,请直接到素材广场找到他们的作品,就可以体验复用了。


再说一个好消息,本周内将会陆陆续续在素材广场上架 200 多个设计大赛的优秀作品,刀友们可以时不时就去看看哦~


Powered by Froala Editor

更新:2020-06-09

收藏

2人已收藏

墨刀_MockingBot

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

  • 494

    作品

  • 1448

    粉丝

  • 3

    关注

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

    猜你喜欢

      2020-06-09 原创文章 教程 举报 1146 2 2 0

      一个优秀的作品是这样产生的

      0.0°

      你确定要举报一个优秀的作品是这样产生的

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2020年06月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      2
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录