ui外观设计教程

　　当设计师在 UI 系统中尝试传递品牌信息和组织信息架构时，他们通常会采用熟悉的颜色、排版和图像系统。无论是按钮，还是卡片、文本字段、菜单和悬浮操作按钮，每个界面元素都避不开形状的存在。那么该如何利用UI外观设计形状来强化品牌形象，提升品牌关注度，还能支持各种互动操作呢?
 

　　在 Material 中使用自定义形状，形状可以强化您的品牌，在 UI 设计中如果涉及到形状，请通盘考虑这个形状在整个应用中的品牌表达能力。形象较为有机或友好的品牌可能会选择圆润的形状，而具有几何风格或希望进行精确表达的品牌则可能会选择更有棱角的形状。例如，Shrine 会在其 UI 中使用尖锐的切割线来暗合其棱角分明的钻石型 Logo。
 

　　强化层次结构，您可以明确地使用形状的强烈差异来引导用户的注意力。例如，如果UI设计主要采用圆形形状，这时采用锐利的菱形按钮就可以引起用户对该组件的关注。事实上，在 Material Design 中，位于矩形卡片上方的圆形 FAB 这种组合本身就是一个 "引起用户注意" 的例子。当然，也可以进行反向思维——如果您在视觉层次结构中使用更加和谐的形状组合，就可以在不同的元素之间形成关系，例如通过相似但圆角程度不同的矩形的叠加来阐述相关性——Backdrop 组件的设计正是使用了这一方法。Backdrop 组件，矩形的实色背景和前景中的圆角矩形暗示了前后两层结构的相关性。
 

　　暗示互动操作，还有一种更为策略性地使用形状的方法——用于暗示交互操作。使用不同的圆角半径以说明控件的状态，这种技巧可以配合其他元素的动画来使用，比如使用图标、更改透明度或更改尺寸本身——例如，在没显示完整的控件顶部使用两个圆角，会意味着这个控件可以继续向上拉起，而方角则说明所有内容均已在当前屏幕显示完毕。但要注意，不要仅仅依靠形状来传达交互涵义，因为这个视觉语言体系还不够标准化，需要配合其他视觉元素的动画来进行设计。
 

　　创造出独属于您的形状，考虑您的品牌属性。哪些核心形状体现了您品牌的个性，以此为起点，开发一系列互补的形状。您的核心形状是偏向圆润的吗，请尝试将圆角卡片与引人注目的胶囊形状的扩展 FAB 配对。在整个应用中始终如一地使用这些形状，这样您对形状的选择对您的用户才有意义。如果您对形状的使用不一致，则可能让用户感到困惑。同时也不要滥用UI设计形状，过度使用会削弱您的品牌表达。此外，请确保纯粹的装饰性形状看起来不具有功能性或互动性，并且用于传达意义的形状是明确而没有歧义的。
 

　　在设计中的未来，与现有的设计系统不同，形状在UI设计中的应用没有明确定义的规则，这也是本文中反复强调 "不要单独利用形状传达交互意图" 的原因。我们希望大家都能在实践中活用形状，并与更成熟的 UI 设计模式结合使用，从而找到与用户进行沟通的最有效方法。
 

　　现今，软件应用大都选用图表设计来可视化各类软件数据，成功简化界面设计的同时，也大幅提升其用户体验。试想，如若市场上的各种监控、金融、保健以及旅游类软件应用，不再使用此类直观吸睛的图表设计，整个软件应用的用户体验该很糟糕，更别说，此类图表设计, 为设计师们提供了更多随心创造和自我表达的空间， 其联动动效和交互设计，也为UI设计师们提供了更多界面提升和优化的可能性，设计师们也确实钟爱于在其实际的设计中，添加各类图表设计。
 

　　所以，图表的设计也不应该仅仅停留于视觉展示，其功能性和实用性也需要考虑在内。尽管，各类图表大多是度量衡、条件、规则以及相关运算结果的集合和呈现。但是，移动端和Web端软件应用的图表设计要求却大不相同。导致这些不同的核心因素就是常见的屏幕尺寸、设备数据处理能力以及相关技术性限制等等。
 

　　在部分设计情境里，相较于复杂多变的图表呈现，直接数字展示，更能有效的减少界面干扰，吸引和留住用户。所以，具体的案例设计过程中，UI设计师需要注意考虑实际设计情境，是否真正需要图表进行数据展示，以有效避免华而不实的情况出现。
 

　　图表设计中，不同数据的色彩搭配，也需要设计师谨慎选择。例如，红色并不适合搭配增长势头良好的数据。而为更加直观展示数据增长进度和梯度变化，搭配渐变色会更加适合。
 

　　每个图表设计的目的都是通过更加直观清晰的视觉形式向用户展示各类数据。为确保这一目的顺利实现，设计交付时，设计师需要向开发人员提供对应图表的信息、实现条件以及设计限制等细节，例如各类数据对应的名称、时间区间、图表数据计算公式等，从而保证图表设计得到完美实现和还原。
 

　　一般来说，UI设计师可事先为图表添加一个空白状态的设计。而它可以是一个没有任何数据的空白图表设计，也可以是带有特殊占位符的图表设计。总之，设计师可以根据需要进行选择。图表数据也可动态展示。比如，柱形图，一次展示一条。饼形图，一次展示一部分，以增加界面趣味性和灵动性。用户可自由选择需要显示或突出展示的图表信息。
 

　　从产品角度考虑图表设计是否符合产品特色、风格以及品牌形象，从用户角度考虑用户是否能够轻松获取和理解图表呈现的相关数据，从开发角度考虑图表设计是否能够完美的实现和还原。从设计中删除不必要的元素或内容，不仅能够简化设计本身，还能够有效提升其用户体验。
 

　　UI设计师面向的是产品使用者(用户)，由于用户的留存会决定产品的生死，所以他们要听的是用户的话。即使上层领导与你的审美有很大差别，但也决不敢拿产品的命运打赌。用户留存数据、内测用户的反馈等是你做产品迭代的原因所在。甚至有时候，漂亮、充满创意的界面产生的效果反而比较差。在开展设计产品UI之前，我们应当根据功能的优先级或者相关调研数据，结合常规设计原则来建立应用的界面交互框架，即交互线框图。
 

　　UI设计比美工更加符合互联网环境下的设计需求，既能够胜任最基础的平面设计，也可以胜任交互设计，而且还可以做用户测试/研究，更加符合现代化公司的用人需求。并且涉足范围广阔、企业需求量多，这也是UI设计相比较美工的一大优势。
 

　　其次UI设计师还要考虑到以下几点：
 

　　排版设计：在一个项目中不应该使用2种以上的字体，以及它们的多种风格样式。
 

　　文字间距：使用完全由大写字母组成的文字时，不要忘记设置字母间距。这样可以防止字符之间的粘连，也会让文字有更好的可读性。
 

　　文字粗细：在使用细体和极细体字体的时候要格外注意。中细体字可以用，但要看具体的字体细到啥程度。如果你做的产品最终会被用户在屏幕上看到，那么最好不要使用细体和极细字体，因为它们非常难阅读，在某些屏幕上甚至会造成半像素模糊的效果。
 

　　标题和正文字体大小：标题的级别有6个(h1-h6)。首先你应该确保你的项目中的标题级别不超过四个，并控制好它们的逻辑和一致性。一个网站或着陆页的最大标题(可能出现在主页面的第一块)可以随心所欲：目前的趋势是鼓励有表现力的排版。但是，确保你的标题的其余部分不要太大，因为太大的文字和太小的文字一样难以阅读。
 

　　浏览器的默认设置(以Chrome浏览器为参照)，会以16px大小显示每个文字。这个大小阅读起来是相当舒服的，要避免近似的尺寸，不要在同一段中使用16px和17px，这样会给产品的外观带来混乱和视觉上的不协调，可能会让人误以为是错误。
 

　　行高
 

　　很少可以直接利用默认行高。通常情况下，必须比默认值稍大一些来提高可读性。这对于大的文本块尤其如此：博客、文章、网站或移动应用的信息块。同样的方法也适用于标题：确保字母上下不会互相碰触
 

　　内容的层次
 

　　应使用加粗来突出显示文本的重要部分，包括标题、链接和按钮，有时也包括文本中被强调的部分。但如果所有文本内容都被加粗，就会变得不清楚该看哪里，分不清哪些部分更重要。内容需要有一定的层次性。
 

　　文字对比度
 

　　在UI设计中要特别注意文字的颜色。它应该有足够的对比度，这样文字在任何类型的显示器上都可以易读。这对于经常使用浅灰色的输入字段中的占位符尤其重要。图片、图标和背景决定了产品的基调。图片应该准确地展示公司、APP或网站所提供的东西。
 

　　投影
 

　　物体的投影绝对不应该是黑色的。投影的颜色永远都需要结合环境的颜色。物体通常有几个投影：一个是小而亮的，直接在它的正下方(如果是站着或躺着的东西)，第二个是比较模糊、透明的投影。避免项目中脏的、不自然的投影。
 

　　图标和配图

 

　　凡是可以矢量的东西都应该矢量。所有的图标，箭头和logo都应该以SVG格式(iOS开发的PDF格式)交给开发者。PNG图标边缘模糊，看起来很糟糕，尤其是在视网膜显示器上。
 

　　避免奇怪的布局
 

　　避免在没有充分理由的情况下，在屏幕/页面/卡片上实验性地定位元素。否则用户可能会感到困惑而离开你的网站或应用。请记住，UI设计师和艺术家是不同的职业。在设计中，我们是为人创造产品，这意味着你的个人创意冲动只能应用在不会干扰用户体验的地方。
 

　　界面尺寸
 

　　在开始UI设计一个手机APP之前，一定要先向开发者询问一下屏幕尺寸。通常情况下，iOS的屏幕尺寸为320px，Android的屏幕尺寸为360px。虽然在移动APP上或多或少都会有明确的预期，但网站设计可能会有一定的挑战性，因为它将在多种设备上展示。下面这种情况在我自己做前端开发的经验中非常常见：提供的布局是为巨大的显示器做的。块之间有400-600像素的边距，巨大的字体大小，奇怪的网格。
 

　　内容填充
 

　　重复的示例文本放在设计中看起来会很廉价，不专业，所以应当避免使用。它只会让人觉得你懒得得去做一些像样的内容。此外，现在不再需要自己创建，有一堆Sketch和Figma的插件可以自动填充内容。UI设计时内容尽量不要重复，哪怕只是为了演示的目的。放上不同的图片、标题和不同长度的预览文本，效果看起来会更好。