设计风格是一种很虚的东西,对于大部分的 UI 设计师来说,都是如此。

相信很多人都是在一家小型的互联网公司做设计,估计还是公司唯一的设计师,同时对设计风格又拿捏不定,总感觉是跟着产品经理或老板的思路去做设计。比如老板的要求是“大气”,谁 TM 知道这“大气”指的什么鬼?

即使花了不少时间去研究其他公司的产品,依然做不出领导满意的视觉稿,最后还被各个岗位的同事指点着去修改你一把屎一把尿喂大的稿子。

我上面也说了,其实这种事情(讲述设计风格)对于视觉设计师而言是一种很常见的现象。我身边也同样有很多设计师出现这个问题,不知道如何向领导或客户讲述自己的设计风格。

说个现象,仔细想想自己是不是这样的:我们在做视觉评审的时候,设计师讲述的常常是文字对齐、线条、高斯模糊、图片大小等视觉表现,有时候甚至沉醉于 icon 的角度及尺寸的问题。面对于产品经理与程序员的质疑只能说:我觉得这样更好看、这样比较适合我们产品的风格…之类的话。要知道,这些理由在如今这个以显性数字指标为衡量标准的互联网时代已显得苍白无力。

实话实话,想要把设计风格讲清楚,的确不是一件容易的事。但绝对要避免从感性的角度来阐述事实的这种习惯,毕竟现在的移动产品从视觉表现力方面正在逐步降低要求,这种环境的变化也是要求视觉设计师应该主动去加强设计思路的原因。

为什么要用这个颜色,为什么要用线条、模糊、留白、卡片、阴影…说这么多干嘛?别人能懂?即使听懂了,他也会从他的角度来告诉你:那我觉得这个阴影不要会更好。你怎么回复?

就像我说的,如果你针对你设计的视觉稿进行这种细致问题的解答,那么永远都不会有规范型的答案。视觉风格讲的是一个整体感受,这就需要我们从更高一个层面来解释这个问题。

接下来我将从以下 5 个维度来说说视觉设计师讲述设计风格的方法:

  1. 产品全局色系
  2. 系统图标
  3. 字体规范
  4. 图片的使用
  5. 视觉操作引导

1.产品全局色系

从全局色系的角度出发。如果你仔细分析过那些优秀的 App,你会发现它们的颜色使用的是非常谨慎的。当中绝大部分都只会用 3 到 4 个颜色用于突出信息的层次。就好比我之前写的那篇配色文章《用好 MD 你也可以做配色达人》一样,由主色、强调色、辅助色组成的整体色系,即一个产品的色彩风格。

这里需要注意的是,我们在阐述页面色彩的时候,不应该说:我认为红色比黄色更适合。而是结合这几种颜色组成的全局色系来说明这几个颜色的搭配能突出需求方想要的“时尚”或“大气”的要求。

这么做的好处是,需求方会认为你的说明非常的专业,不会随意修改你的 Idea 。更重要的是,你可以掌握主动权,而不是以“我认为”的方式作为被动方。

2.系统图标

说到图标,相信很多设计师都是去 Iconfont 等网站下载,筹齐一套直接使用。我之前也说过,系统图标的设计是考验一个设计师功底的重要条件,所以自己设计图标非常重要。具体可以参照我写的《图标设计的三个要素》这篇文章来做。

一款 App 需要一套易于识别的 Icon 来辅助信息展示,因此图标的风格能够突显出这款产品的整体风格。那么在讲述的过程中,你需要说明的是为什么你会使用这套线性 Icon 或填色 Icon,以及它所能展示的信息为何能够更符合你产品的风格。

而不是纠结这个图标的尺寸是多大,或者适不适合它所表达的意思,因为这些东西是在你讲述设计风格之前就应该定好的,它们由设计师来做决策,并不是在讲述设计风格的时候再去说明的(假如你在面试的时候如果说这些,面试官会觉得你的设计认知非常的基础)。

3.字体规范

字体是 App 界面中最重要的信息组成部分,相信这句话大部分都会认同,这也是大家一直争论为什么英文字体的排版比中文字体排版更好看的原因之一。

我们经常听到如:这个产品看上去很简洁、舒服、重点突出,而这其中最主要的原因就是文字的排版。

一般来说,我们会从产品的字体、字号、颜色等来说明字体规范,再重点去关注标题、文本信息以及引导信息的字体字号,通过设计对信息进行层次的区分,希望借此来引导用户的视觉焦点。

所以在说明设计风格时,要着重去提字体规范这块。

4.图片的使用

图片是 App 信息组成的重要元素,它的风格会很大程度上影响整体风格。所以每次有人给我发设计稿,叫我给点建议的时候,我都会说,先把重复的图片和文字修改了。一张设计稿,不要用同一张图片填充所有位置(同样不要用一句话填充所有文本段落)。

假如你在做日系风的外卖产品,你的图片风格就要统一,不要用百度上随便找的快餐图来作为视觉稿的展示。很多人以为这个不重要,认为这是后期开发再确定的事情,现在就是随便找张图去填充下。要知道,一张视觉稿能不能通过领导的审核,这些细节都很重要(即使对自己来说,也应该提升自身要求去作图)。

所以在讲述设计风格的时候,图片是起到至关重要的作用的。也许你想表达日系优雅风,结果在别人看来你所展示的却是阿富汗田园风。

5.视觉操作引导

我们期望的用户操作,最终目标是将其引导至我们想让他去的地方。对于电商类产品来说,这个目标也许是下单付款;对于社交类产品来说,这个目标也许是发送信息等等。

一款产品,每个页面都会有许多个行动点,设计师要做的,是将其进行层级的区分,即有主次感。好比广告,这些金主巴不得整个页面填满他们的广告,但是大家都知道这不可能,所以每个页面都需要进行合理的引导设计。

也许你觉得,视觉操作引导跟设计风格没什么关系,那你就错了。操作引导很大程度上会影响视觉风格的走向,如果我们要引导用户去执行某个操作,那么以上说到的所有元素所组成的框架,都需要重新修改。

所以你知道有多重要了么?当你描述完所有元素之后,最后说到视觉操作引导,那它们自然而然的就形成了这么一个页面,不需要过多的花哨说法,只要你前面说的四个维度顺畅且合理,那最后这个框架在需求方看来是无懈可击的,更不会轻易的让你修改当中的元素。

小结

虽然我只做了五个维度的说明,但相信大家已经知道如何去讲述设计风格的方法论。当然也不仅仅是从这五个维度出发去说明,要讲述的维度其实还有很多,这就需要大家自己去研究了。

通过这一系列的梳理,我们知道如何找到影响设计风格的关键因素。剩下的就是由你来告诉需求方,这些点形成了我们的设计风格。至于怎么说,上面写的很清楚了,好好思考下。

找准方向与维度,从大方向去讲解你的设计风格,只要你执行了,那它就不是什么困难的事情了。

从五个维度来谈谈视觉设计师如何阐述设计风格相关推荐

  1. 实战经验!视觉设计师进阶指南17条-20140104早读课

    我是一个视觉设计师,其实对于自己目前的职业发展还是有一点比较清晰明确的认识的.但是对未来总还是有点不知道如何进行下去的感觉.(未来指的是5-10年之后,未来两三年的规划还是有的) 视觉设计师在经历了某 ...

  2. Web视觉设计师培训视频教程

    BF-TECH Web视觉设计师网络高端培训 适合人群:初级 课时数量:260课时 更新程度:70% 用到技术:PS.UI 涉及项目:使用曲线打造电影感场景.游戏界面主题风格 咨询qq:1840215 ...

  3. Web视觉设计视频教程_Web视觉设计师网络高端培训

    BF-TECH Web视觉设计师网络高端培训 适合人群:初级 课时数量:260课时 更新程度:70% 用到技术:PS.UI 涉及项目:使用曲线打造电影感场景.游戏界面主题风格 课程预售:进度约70%, ...

  4. 视觉设计师提升能力的4种学习方法

    很多人不了解视觉设计师的价值,更直接地说,大多数视觉设计师没有体现出足够的.令人信服的专业度.那么如何提升视觉设计师的能力呢? 1.多看 视觉设计不是一蹴而就的创造工作,它是不断迭代.不断更新的过程. ...

  5. 印度视觉设计师Rishab平面设计作品,简直太美了!

    来自印度的视觉设计师Rishab Jindal(@iamrishabjindal) 你别以为仅仅是视觉上吸引你眼球. 其实融入和宗教和z哲学. 你慢慢品味一下. 这张有点意思 有一种末日丧尸围城的氛围 ...

  6. OPPO高级视觉设计师戴润达:视觉设计师需要思考的11件事

    嘉宾介绍 戴润达 2015~2016年,参与腾讯 TencentOS 的手机 ROM 项目和腾讯 VR 设备平台的概念项目的 UI 设计工作: 2016~2017年,参与腾讯和歌尔合资子公司- Pac ...

  7. 前OnePlus视觉设计师蔡孝永:视觉设计师都在想些什么?

    嘉宾介绍 蔡孝永 视觉设计师.插画师 花菜工作室主理人 曾就职于一加科技.蓝色光标数字营销担任视觉设计师,在工作四年后决定进修,于是趁着这个空档创立了自己的工作室,尝试一些更加概念化的商业项目. 在蓝 ...

  8. 视觉设计师跟平面设计_使设计具有视觉吸引力

    视觉设计师跟平面设计 Interaction Design is very gratifying. 交互设计非常令人满意. From fast critical thinking to extract ...

  9. 视觉设计师提升自己能力的17条经验(上)

    1.积极心态 Robin(李彦宏)说得好--人要做喜欢且擅长的事,首先,你要足够确定你真的喜欢设计,热衷于发现美.感受美.创造美,最终能解释美.积极的行动和思考是进步的源动力.据我所知,业内优秀的视觉 ...

  10. 视觉设计师跟平面设计_用户体验设计师应了解的6条视觉设计原则

    视觉设计师跟平面设计 重点 (Top highlight) When I was studying visual communications design in college, I was fas ...

最新文章

  1. 仅需1/5成本:TPU是如何超越GPU,成为深度学习首选处理器的
  2. 引入JQuery提示:Uncaught ReferenceError: $ is not defined
  3. OS / Linux / Inode 详解
  4. 带你搞明白什么是缓存穿透、缓存击穿、缓存雪崩
  5. 【theano-windows】学习笔记二十——LSTM理论及实现
  6. 为什么盯一个字看久了,反而感觉不认识了?
  7. 帆软报表和jeecg的进一步整合--ajax给后台传递map类型的参数
  8. 摄像头uid怎么获取_每秒30W次的点赞业务,怎么优化?
  9. Java-线程-创建线程的方法
  10. L1-066 猫是液体 (5 分)-PAT 团体程序设计天梯赛 GPLT
  11. 手机号码验证的正则表达式(17......)
  12. Ps 初学者教程,如何在图片中创建双重曝光效果?
  13. 中移动、中联通、中电信取消网间结算政策:实行对等互联,互不结算
  14. python设计选择题代码_《Python程序的设计》试题库完整
  15. kali字典爆破wifi密码
  16. 码支付源码最新版_码支付源码,云端已本地化,ck协议本地化,完全脱离云端控制
  17. 汇编学习 step by step
  18. Android-Studio中AndroidManifest-xml文件中application标签
  19. 2019JAVA面试题附答案,很实用
  20. 对finecms模板的改造sql

热门文章

  1. siege 测试post_使用Siege进行Web App性能测试:计划,测试,学习
  2. SonarQube检测出的bug、漏洞以及异味的修复整理,最新java技术栈
  3. Linux网络编程-UDP单播服务客户端代码实现
  4. 为什么有符号数0XFFFF FFFF代表-1?
  5. 第二章 认识的本质及其规律笔记
  6. oracle如何实现累乘,由复合指标计算引起的oracle累乘
  7. cf----2019-10-06(Slime,Shashlik Cooking,Mysterious Crime)
  8. fn键台式计算机在哪,电脑键盘上FN键的使用方法【图文】
  9. 租用云服务器价格表:阿里云和腾讯云服务器最新价格表
  10. java中的xpath,读取xml文档。