主旨：提高自己的能力期望上限还有沟通能力。这篇文章主要是我从一些文章再加上我的个人认知，总结出来的一些心得。希望工作中能更好地运用理论。

    设计效率

    界面设计要保持一致性，就像一条线一样，它可以弯弯曲曲的从起点到终点看起来很繁琐，经过自己保持一致性的优化，就能趋向于变成直线，也就是培养系统性思维。在我实践的过程中，不管是文字大小还是图片大小，我都改了无数次因此浪费了不少时间，首先可以选择基本单元：8像素网络，以其倍数来调整和移动元素的大小。px和dp的换算公式为：px=dp*(dpi/160).作为设计师，怎样做好决策并保证决策的高效合理性是必需的。采用8像素网格系统是为了有秩序感，能让用户获得信任感和体验度。

    学会选择正确的字体大小，字体元素是基于一个几何级数，图案是呈圆形的四分之一状态，对于排版来说，还有一个简单的经过经验验证的字体尺寸，比例是12、14、16、18、20、24、30、36、48、60和72。对于行高要再次使用4像素的增量。

    定义项目中的颜色，颜色原来也能成体系。为每种颜色准备5到10种色调，提前准备好元素的几个尺寸，并将选项限制在尽可能少的范围内。使整体设计就会整洁。

    设计规范

    基础规范：首先声明设计规范只适用于跨越0-1阶段的产品。所以这时候可以制作些基础的设计规范，如栅格、配色、字体、图标规范等。制定统一的栅格系统：栅格可以直接建立横向栅格系统，常用的是12栅格。还有一种情况是制定网格系统。

    色彩规范：主要表明色彩的色值和使用范围。一般有品牌色、辅助色、基础色、状态用色等等。用到渐变，也要注明清楚渐变的角度和色值。重要内容和正文内容要保证文本的可识别度。WCAG指南中指出，文本和背景色的对比度需要达到3：1

    字体规范：需要提取出各个场景下用的字体和字号。标注上应用场景方便其他人理解。除了字号和应用场景之外，对于多行文本和段落文本，通常还会对行高进行基本的设置，避免后期走查还要重新联系开发修改。

    图标规范：分为两种，功能性图标和展示性图标。前者是为了引导用户理解和操作，方便用户识别其含义。常规状态下为无彩色。后者通常为页面入口，会有更多形状、颜色、质感的表达，吸引用户的注意力和点击欲望，强调差异性。用AI进行绘制需要明白基于48*48px的画板，关键形状是图标的基础，通过关键形状规则，保持图标的一致性。功能性图标均为线性形式。所有图标均为直角，描边统一为2px。图标应保持视觉上的尺寸一致性，达到视觉居中而不是物理居中。倾斜图标应保持角度一致。

    页面组件

    按钮一般有悬浮按钮、填充按钮、线框按钮和文本按钮等类型。其中悬浮按钮具有最高的优先级，属于强引导型按钮。通常有三种状态，常规状态、点击状态和不可用状态。也可能会有加载状态。为了保证可用性，按钮的点击热区不能小于24*24pt，且热区不能互相重叠。按钮的宽度是根据按钮内文本调整，高度根据页面需求设置。按钮的倒角分为以下两种：1、直角按钮，主要适用于通栏类按钮2、小圆角按钮，圆角为5px/2px，也可根据按钮大小选择合适的圆角。

    导航，分类为常规标题样式、标签样式、搜索框样式、无标题样式、字母导航......标题需要注意文字的极限值，ICON尺寸和位置的话要考虑最小点击区域。

    弹窗是为了提示和通知用户而位于页面内容之上的一种控件。它是引导用户专注于某一项任务，用户可以通过操作来关闭弹框。包含模态（对话框、操作菜单）和非模态（toast、snakebar等）两种形式。前者需要定义蒙层的样式（颜色、透明度），以及弹框内的文字说明和按钮。

    列表是由多个等宽的行组成的、按照一定规律排列的连续条目。单行列表：标题描述简明概要；同时含有标题和辅助文本时，标题不超过6个字，辅助文本不超过10字。辅助文本放在列表右侧。双行列表：图片放左侧，不超过几个字，超过的用省略号替代。

Powered by Froala Editor