美文网首页产品经理@IT·互联网@产品
一个优秀的作品是这样产生的

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

作者: 墨刀黑板报 | 来源:发表于2020-06-09 12:11 被阅读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 多个设计大赛的优秀作品,刀友们可以时不时就去看看哦~

    相关文章

      网友评论

        本文标题:一个优秀的作品是这样产生的

        本文链接:https://www.haomeiwen.com/subject/qxdstktx.html