header_v0.7.32

所以,平面基础对于 UI 设计来说有多重要?

278天前发布

原创文章 / UI / 教程
扑热息痛 原创,如需商业用途或转载请与扑热息痛联系,谢谢配合。

一点想法,愿与有意从事 UI 设计的朋友交流、探讨。

3523589fe3d9a801219c7744cc57.jpg


有学生、朋友常常会和我聊到如何更快地武装自己以便投入到 UI 设计的行列。他们会问我要不要再去巩固一下绘画技能?多多练习画 ICON ?学最新的设计软件?多读技术文档?这些可能都有帮助,但我建议大家努力再把平面设计基础夯实。


个人想法,不一定准确,传统的纸媒平面设计搬到屏幕上,加上交互,大概也就成了 UI,视觉设计的原理是不离其宗的。另一方面,UI 有它自己的规范,就像传统平面受制于印刷工艺一样,很相似。


“呐~做 UI 要有交互思维、产品思维、用户体验思维、互联网思维……还要研究用户、分析数据、懂一些软件开发知识……它跨了很多领域的界了呢~怎么就单单说平面设计的重要性?不严谨啊……我猜有朋友会这样式给我留言。我认为:第一,UI 本来就是视觉设计,这一点从它的定义就可以知道(User interface:用户界面)虽然 “inter” 提示我们 “Face” 有交互的成分,但你也得把界面搭建起来才有东西来谈交互,是吗?第二,当一个 UI 设计师连 Serif / Sans Serif 都闹不清的时候,你跟他谈交互?谈体验?”




从一张图开始吧…

麻烦大家先仔细看1分钟或60秒~

然后

说说图里有些什么~



bf5a589fe486a801219c777e521d.jpg



图里有什么元素?

如下



de2c589fe4c1a8012060c80f723a.jpg


我是背景(图像)



41a8589fe4e8a801219c77da707e.jpg


我是专辑封面(图像)



7d63589fe50fa8012060c8214191.jpg


我是文字(文字排版)



b71c589fe533a8012060c84e6068.jpg


控件、ICON、分割线……(图形)

p.s. 声音波形属于信息图形



一个 UI 界面若这样拆开来分析,大致就是以上这些元素(软件不同,元素类型可能会有细微出入,但大致如此)


把这些元素粗略做个分类的话,可以分为:


图 + 文


图又有图形和图像的区别。图像具体、富含细节,例如照片。图形简洁、几何化,例如 Logo、ICON(扁平化 ICON 更典型一些。拟物化时代,我们也会把一个 ICON 画地逼真无比,似乎有了图像的意味……那更接近绘画,而非设计 in my opinion),在 UI 页面里我们看到的头像、Banner、背景、照片、图片基本都属于图像的范畴。而页面里一些 ICON、控件等一些简洁而几何化的图标,都基本属于图形范畴。


我们进行 UI 设计的时候常常既要绘制 ICON 又要处理图片。举例来说,图中的背景图和专辑封面是图像,播放按钮等等则属于图形。

如下:


8093589fe560a8012060c82f7488.jpg


说说文字,UI 设计中关于文字的工作更多的时候是文字排版,而非字体设计。这一点要明确。甚至说,平面设计师工作中多数情况下也是在进行文字排版,除非设计 Logo 的时候会涉及到字形设计。


文字排版是 UI 设计中非常重要的一个环节,毕竟阅读文字是我们获得信息的主要途径之一。所以,怎么选用字体、文字大小、行距、设置层级等这些文字排版技能都是我们要着力提高的,易认性和易读性要常常想一想,我们是否真的做到了。


图有了,文也有了,它们组合起来就形成了完整的 UI 页面,整合的过程其实就是版式设计,个人认为 UI 中的版式设计主要是在践行网格系统版式,九宫格、列表、模块化……都渗透着网格系统的思想。


最后,如何将多个页面统一在一个色彩体系里面,又如何透过色彩传达信息,这关乎色彩理论、品牌设计等。


文章到这差不多结束了,字不多,但我觉得能够说明问题了,文中我们谈到些什么?图像、图形、文字排版、信息图、色彩、版式……



对啊,平面设计。



时间关系,并没有把提到的各个元素展开来作详细讲解,但大概意思我想已经说清楚了。关于 UI 设计中涉及到的软件操作、流程、规范这些都好解决,唯有平面设计能力需要长时间学习、积累,这才是做好 UI 设计的基石。


于平面设计,越学习越敬畏,共勉!


Save Save
11
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功