浅谈UI设计师急需掌握的平面设计基础

使用微信扫描二维码分享朋友圈，成交更快更简单！

曾看到网上一些帖子讨论UI设计师和平面设计师的差异，总结为思维方式的不同: UI设计师考虑用户习惯和易用体验，平面设计师专注于更具吸引力的信息传达。两者侧重不同但上有非常大的交集，信息传达的核心基础技能其实都是相通的。平面设计是如何表达一个事物，而UI设计是如何让用户更好使用一个事物，表达层面令人费解则卡在了使用的步。UI论坛有人吐槽:“不要用平面设计思维做UI”，然而许多UI设计师往往缺少平面设计基本的意识。
常见的平面设计基础问题平面设计的基础设计理论包括: 色彩构成、平面构成、字体设计、图案设计、版式设计等。平面设计基础能力可以概括为视觉化处理与传达信息的能力。UI设计在视觉化界面操作的阶段，与平面设计的交集是如何组织和处理每个界面的信息。平面设计中俗称的排版，把文字、表格、图形、图片等进行合理的排列调整，有效传达信息，并达到美观的视觉效果。
UI设计中对平面基础能力的检验
UI设计(User Interface界面设计)的设计原则：简易性、一致性、用户习惯、人性化等。遵循UI设计的设计原则，提高平面设计能力，可使得界面更为优雅。在UI设计中可对设计师的平面基础能力迅速检验，下面通过一些具体case的设计过程来简单分析。
1. 精简与一致性在手Q公众号图文消息优化中，我们发现线上旧的图文消息边距较为肥厚，在大图+1小图的情况下由于代码的模块化拼接，始终无法达到的像素间距。在考虑多种纯文字、单图、多图文模版拼接后，尽量减少间距规则和字号种类，达到拼接模版的统一规则。一致性为前提，也提供灵活拼接的多样性。
大图+1的情况下，定义1条小图的上下间距相等等于一个单位，而不是单个模块中小图距离上方的1/2单位，在+n小图的时候使得两个小图之间的间距相加后等于一个单位(见下图)。这个小小的视觉细节在和技术同学耐心联调后是可以实现的。
2. 操作的轻量化
在某电台app概念设计中，分享功能支持获取歌词并同时拉取专辑封面配图，允许用户上传照片、写下当时的心情或是用语音表达。初设计时的界面交互框架(左图)默认功能在“写下心情”，“加图片”和“录语音”的功能重要性并列，感受上是个功能强大的分享界面，告诉用户你有三种选择配心情内容的方式。讨论后优化框架(右图)，默认拉取专辑封面图，支持上传图片入口置于右上角，默认歌词展示在封面图上可点击编辑，整个页面可视化了终分享出去的样式，所见即所得。设计优化后，让整个操作有了。可以直接在分享预览图上操作，缩短了分享路径，重要带给用户轻量化的操作感受。
平面设计灵感注入UI设计好的UI设计可以让软件变得有个性和品位，同时操作上是简单舒适的。平面设计的灵感，往往可以使得界面设计跳出线框与控件的束缚，充分体现软件的定位和特点，使用过程中变得更有趣味。
1. 更具吸引力的点击关注一个账号、小站的通常app的做法是：头像加关注按钮。在 V 的频道界面中，点击头像即关注，按下后头像成为星形遮罩，表示已关注，点击操作反馈超乎预期又在情理之中。
2. 更优雅的操作在手机app上后期处理一张照片时，通常是操作区域和照片分开。Black 的处理照片主界面的操作有趣而直观，再调整曲线或加暗角操作都在图片层上，整个界面的导航也突破了传统控件模块，使得整个app在直观又易操作的基础上，彰显特的态度和个性。
小结提升平面设计基础能力，在生活中有意识的观察设计、思考分析、养成视觉洁癖。逛商场，导视系统是否能起到不迷失目的地的作用;地铁广告，信息是否能瞬间吸引过客的注意力; POS机打出的各种小票，怎么在方寸之地合理安排信息;阅读电子书，字号行距是否适合长时间阅读。如果自己设计将会做出怎样的改变。身边有许多传统平面设计师，苦恼于怎么转行做UI设计师(或许国内互联网行业平均薪水高些)，初级UI设计师往往忽视平面设计基础能力。传统平面设计是提高用户审美水平的担当;UI设计师肩负着让用户更轻松学会智慧生活的重任。用心思考设计，并无跨界一说。

本文由广州南跃科技有限公司提供。