• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 网易设计师:浅析一种无差异化设计语言和两套通用的设计流程

网易设计师:浅析一种无差异化设计语言和两套通用的设计流程

作者:网易UEDC 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含经验分享,网易UEDC,设计流程,设计语言等相关知识,网易UEDC希望在学习及工作中可以帮助到您

网易UEDC – 马宝?: 一个漂洋过海的寿司食玩,为什么会让大人无从下手,不会使用?是语言文化地域的差异?还是设计师眼里只有自己的设计?本文将浅析一种无差异化设计语言,两套通用的设计流程和较为全面的设计决策。

1. 有趣的寿司

5岁的小侄子拿一包「食玩」向我老婆寻求帮助,希望教他 DIY 好吃好玩的寿司。但是翻看全日文产品包装后,就连在日企工作,日语专业很好的她,面对这份幼儿食品包装也傻了眼。为什么拥有阅读能力的成年人反而无法正常使用「产品」?

△ たのしいおすしやさん— 有趣的寿司

我是名视觉设计,即使看不懂日文,也能透过设计接收到产品传达的信息,看图说话关联图形和颜色,发掘排版和布局的信息层级,从设计者的视角可以很容易解读这份「天书」,但在普通用户眼里并非如此。

「复杂问题简单化,简单问题无脑化」。尝试拆解步骤,去除信息过载的「文字」干扰,选用最简单的图形符号作为视觉语言。让真正的目标用户(5岁左右的小朋友)不需要查阅文字的情况下,也能看懂教程,使用产品。

  • 第一步,将蓝色包倒入1号槽,加水搅拌出白色的米饭;
  • 第二步,将黄色和粉色包分别倒入「纹理」槽,加水平铺成黄色的鸡蛋和粉红色的金枪鱼;
  • 第三步,完成紫菜、鱼子制作;开始制作寿司……

2. 共同的设计语言

尽管地理、文化、习俗存在差异,对不同领域的设计影响也很大。但各领域的设计工作本质是相同的。所有设计都植根于一种通用的熟悉语言,有着共通的元素,如布局、图案、颜色,对比、重复等。相似的输出流程,如研究、分析、原型、设计、展示等。

掌握设计语言了解不同国家不同学科的设计者,践行这一门学科语言都会增加另一门学科的才能。多学科设计的融合,可以大大提升整体设计直觉。

△ 链接:https://saijogeorge.com/brand-style-guide-examples/

△ 图自:google design

设计语言是互通的,读懂设计的同时还加深现有的设计认知,通过两个层面的理解设计的目的是什么?

  • 可用性层面:帮助用户解决特定问题
  • 易用性层面:设计将情感转化为体验

实现设计目标的过程,往往需要兼顾「美学」和「功能」,美就是生产力,美的作用不仅仅在于养眼,还可以影响人们的正向情绪,促进人们反思,提升效率。设计同样是种约束力,要求设计师以很高的审美标准,去不断的追求新颖和美感。

人们会对有设计感的产品更包容,在产品使用中多尝试不同的操作方法,自觉发现问题自行解决。

「案例1」宝马的设计总监说,我们生产的根本不是汽车,是「艺术品」;福特公司也宣称,现在的福特汽车马力早已经让位给风格,用户就是为设计买单的。

「案例2」美国政府部门也在追求设计,04年的时候美国国务院宣布取消了使用多年的12号等宽字体,换了一种14号新罗马字体,因为新字体看起来更工整美观。

设计影响着社会、经济、政治方方面面。设计终究是实用的,具备「功能」的,据统计每增加1%的设计投入,公司的销量和利润就会平均增加4%,一个商品最能提升的价值空间就是设计感。

△ 荷兰设计大师马塞尔·万德斯(Marcel Wanders)

设计是与世界交谈的方式和语言,应该与那些代表生活本质的物件相连,「设计师真正的工作是为新设计找到一个合理化的理由,而这个理由的背景无疑就是生活。」反对把设计作品束之高阁,好的作品应与日常生活互动。

3. 共通的设计过程

设计过程:理性、演化模型

良好的设计过程造就良好设计的可能。设计过程大体分为两种方式——理性模型和演化模型。图例常见的理性模型的服务设计流程。

△ 图自:eico design

理性模型

理性模型是由计划任务驱动的线性顺序发展的设计全过程。会以一种受限的方式进行研究和获取新知。这种方法可作为任何设计领域的基础,将设计方法论概括为三点,研究 > 头脑风暴 > 测试(分析、设计和实施)。

理性模型应用广泛,分别是预生产的设计,后期制作和重新设计。如果能够完全按理性模型进行设计固然是好的。但工作中的目标、预算和资源经常发生改变,很少能以预期的步骤流向下一环节。最大问题是每个大环节下又由几个较小的过程组成,看似线性的单链路很简单实则运行扩展的层级繁杂,设计周期非常漫长。

△ 理性模型(左)对比 演化模型(右)新设计过程,多环节并行(分析、设计、实施)

演化模型

演化模型是由多个相关概念组成的更自主自发的设计方法。它假设设计是即兴的,在没有预先定义的阶段,不同环节中(分析,设计和实施)都是可并行的。

演化模型促进设计师激发潜能。就好像生活在寒冷北极圈的爱斯基摩人(因纽特人),在长期极度恶劣生活条件下,逐渐演化出一套生存机制,他们可以不用地图、指南针,仅依靠星星、风向甚至是雪堆的形状就能精准判断定位。

演化模型下对设计师要求更高,需要设计师具有良好的审美的同时,可以使用创造力和情感来塑造各种的设计可能性。在出现意见分歧时,以专业的判断和常识迅速带入某点推进设计,进而大幅提高效率。 由于这种方法没有按照阶段顺序进行硬编码,它几乎存在于所有的学科中。一旦掌握这类设计范式就可以广泛应用,成为探索新领域的基石。

「理性模型」典型的 UI 工作流程环节会由12个部分组成,如果有充足的时间和资源来做设计,就算是缺少经验的新人设计师也可以选用理性模型按部就班的完成设计,所有的步骤是为了保证设计质量。

「演化模型」很多项目时间短、资源有限,理性模型不适用,经验丰富的设计师就会以强大的整体设计直觉,在「理解需求」的前提下,直接进入最核心设计环节。排除外部干扰,省略已经在大量项目演化中被反复验证环节。对设计的产生预判使得作图又快又好。这就是演化模型的魅力。

4. 全面的设计选择

每个设计师不可避免地都会遇到无法做出设计决策的情况。是求助高阶的设计总监、美术指导的专业经验?还是相信经过研究、分析更懂用户的设计直觉?这是一种选择。

我们是设计师不是科学家。不一定需要为我们所做的每一个审美决定提供证据。有时我们的专业会受到各方的压力和挑战,不要急于否定自己,坚信设计同样也是一种选择。只有设计的本能和独创性,帮助产品在混乱的信息时代脱颖而出,设计的意愿取决于对设计的想象。

五感一体的设计建构

△ 「欲望」的土壤产出设计的果实

语言告诉我什么是设计。过程解释怎么做设计。那为什么而设计?设计界的哲学问题,「我是谁,从哪来,到哪去」。

总结

我想引用《设计中的设计》书中的插图,假如设计是长在树上的果实;市场才是培育果树的土壤,构成市场的个人「欲望水平」控制土壤的质量。培育土壤你选择种怎样的树就会产怎样的果。眼中所见,心中所想便会成为你最终的设计模样。

欢迎关注作者「网易UEDC」的微信公众号:

图片素材作者:Marcus Gestré

「这可能是最全面的设计流程合集」

  • 平面设计?丨《高手的平面课堂!一个完整的设计流程是怎样的?》
  • Logo设计 |?《网易资深设计师:我用这7个流程做LOGO设计》
  • UI 设计丨《超赞干货!一个完整的UI设计流程是怎样的?》
  • 品牌设计丨《用腾讯企鹅电竞的案例告诉你完整的品牌设计该怎么做》
  • 交互设计丨《够专业!一个完整的交互设计流程是怎样的?》
  • 图标设计丨《超实用!聊聊图标设计流程及小技巧》
  • 产品设计 | 《一个完善的产品设计流程是怎样的?听听美团设计师怎么说》
  • UED 团队设计丨《接地气!国内知名UED团队的设计流程是怎样的?》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开

您可能想查找下面的文章:

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2018-08-23为了拖尾款,甲方竟然要当我的男朋友…
  • 2018-08-23学会这5个技巧,避免你的作品被人用竞品评头论足!
  • 2018-08-231990-2018,可能是最全的 Photoshop 简史科普
  • 2018-08-23有意思!一个独立开发者总结的App 迭代设计思路
  • 2018-11-02打包 React 项目
  • 2017-08-06正确的空链接写法 防止点击后页面会跳动问题 a href #号问题
  • 2018-08-23用一张图阐述一个设计师的思考与成长历程
  • 2018-08-23实战经验!滴滴专车会员项目背后的设计经验总结
  • 2017-08-06如何做一个好重构 不仅是在重构代码也是在重构人生
  • 2018-08-23网易高手:角色权限设计的100种解法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何制作百度死链文件的方法介绍
    • 这10个小技巧,帮你创造出可用性良好的微文案
    • 该有的视觉元素全都有,设计不好到底差在哪里?
    • wap页面之iphone设备字体偏大问题解决方法
    • IE8兼容视图(IE7 mode)与独立IE7的区别详解
    • 用这个设计方案,成功解决了为色盲设计的难题
    • 深入理解::before/:before和::after/:after的使用
    • 以手机淘宝为例,看原型图易缺失的交互场景
    • 在IE6,IE7 中DIV容器固定高度的使用技巧
    • 最佳网页宽度及其兼容实现方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有