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

　　我在网上看到一些帖子来讨论UI设计师和平面设计师之间的差异，总结为不同的思维方式： UI设计师考虑用户习惯和易于使用的体验，平面设计师专注于更有吸引力的信息交流。两者侧重于不同，但在专业上有很大的交集。信息交流的核心和基本技能实际上是相互关联的。平面设计是如何表达一件事，而UI设计是如何让用户更好地使用一件事，而令人费解的表达水平被困在使用的第一步。UI论坛上有人开玩笑说：“不要使用平面设计思维来做UI”，但许多UI设计师往往缺乏平面设计最基本的意识。平面设计的常见基本问题

　　平面设计的基础设计理论包括： 色彩构图、平面构图、字体设计、图案设计、布局设计等。平面设计的基本能力可以概括为视觉处理和传达信息的能力。在视觉界面操作阶段，UI设计与平面设计的交叉点是如何组织和处理每个界面的信息。平面设计通常被称为排版，合理地排列和调整文本、表格、图形和图片，有效地传达信息，达到美丽的视觉效果。

　　1. 如何组织信息

　　组织页面信息的首要任务是判断信息的优先级，区分重要信息和次要信息，删除无用信息。简化复杂性，减少视觉干扰。举个小例子，你可以从简历中了解一些申请UI设计师的基本平面设计能力。首先，判断无用信息(说实话，我在简历中看到了体重信息)。二是组织和清晰地表达关键信息。个人信息：姓名、年龄、照片和联系信息;基本信息：工作经验、教育背景和专业技能;其他信息：兴趣爱好等。当几个简历点聚集在一起时，信息是有效和快速的

　　2. 如何对齐

　　在日常工作中，我们经常会遇到关于如何对齐的PK，我们总是争论不休。首先，达成信息优先级主次共识，可以提高排版效率。

　　a. 信息分组

　　首先，从酒店预订成功的通知信息案例来看，通知信息文本是直截了当的，没有合理的分组(左图)。在图片部分的顶部，酒店评估、信息地址和电话操作按钮是对齐的，酒店名称已成为一个副标题。经过适当的调整(右图)，文本通知、价格和时间字段被明确分组。电话按钮与酒店信息组对齐，使图片区域的文本和操作信息更加完整。

　　b. 中对齐或左对齐

　　信息分组后，每组信息的小标题排列在中间，增强了模块感，使阅读标题和每组信息中的视线跳跃。小标题与每组信息统一对齐，更符合快速浏览和操作。例如，在需要完成注册任务的网页中，标题左侧更有利于视线的快速下降，使操作路径更加顺畅。

　　3. 如何有重点

　　a. 大小对比

　　在谈到如何组织信息之前，如何使主要信息更加关注?首先，你可以打开大小比例，以一张活动海报为例。你在5米处能看到什么?海报的大图案渲染了气氛的整体感觉;你在3米处能看到什么?活动的主要标题;1米的近距离能找到什么?具体的信息和时间等。打开主次信息的尺寸比较，使观众能够从空间距离接受信息传输。观众密切阅读，有效传输信息的顺序也适用。

　　b. 并非均分

　　为什么似乎没有错误的信息布局(左图)总是更糟?因为细节不理解主要和次要的信息。最初的设计草案追求绝对的平均分数，导致信息分散，没有“组”的紧凑感。

　　页面元素中的左右间隔往往被忽略。例如，帐户头像与页面左侧之间的距离=帐户名称之间的间隔(左图)使页面中间区域的信息分散在页面边界上。标题和发布时间也通过设计软件的中心对齐功能快速对齐。具有平面设计意识的排版不仅是设计软件中文本框的绝对中心对齐，还需要深入思考信息分组和主次对齐，避免机械的平均对齐。

在UI设计中测试平面基础能力

　　UI设计(User Interface界面设计)设计原则:简单性、一致性、用户习惯、人性化等。遵循UI设计的设计原则，提高平面设计能力，使界面更加优雅。在UI设计中，可以快速测试设计师的基本平面能力。以下是一些具体的case设计过程的简单分析。

　　1. 简化与一致性

　　在手Q公共账户图形信息优化中，我们发现旧的在线图形信息边距相对较厚，由于代码的模块化拼接，总是无法达到完美的像素间距。在考虑了各种纯文本、单图、多图形模板拼接后，尽量减少间距规则和字体类型，实现拼接模板的统一规则。在保证一致性的前提下，也提供了灵活拼接的多样性。

　　大图+在1的情况下，定义一个小图的上下间距等于一个单位，而不是单个模块中小图的1/2单位+n小图时，两个小图之间的间距加起来等于一个单位(见下图)。这个小小的视觉细节可以在耐心地与技术学生联系后完美实现。

　　2. 轻量化操作

　　在广播应用程序的概念设计中，共享功能支持获取歌词，并在专辑封面上绘制图片，允许用户上传照片，写下当时的情绪或用语音表达。最初设计的界面交互框架(左图)默认功能是“写情绪”，“添加图片”和“记录语音”的功能重要性平行，感觉是一个强大的共享界面，告诉用户你有三种选择匹配情绪内容的方式。讨论后，优化框架(右图)，默认拉专辑封面图，支持上传图片入口放置在右上角，默认歌词显示在封面图上，可以点击编辑，整个页面可视化最终共享的风格，你看到的就是收入。经过设计优化，整个操作得到了关注。您可以直接在共享预览图上操作，缩短共享路径，最重要的是给用户带来轻量化的操作感觉。

注入UI设计灵感的平面设计