如何快速提高过稿率？我分3个阶段帮你完全掌握（中）

本文将讲解设计前、中、后的结构，总结设计师在什么样的阶段采取什么样的策略能提高过稿率。

上篇回顾：

过了“望闻问切”的设计需求评估分析阶段，已经有了较为深入的了解，可以针对产品目标、制定设计目标。在交互设计输出后，视觉设计可以转战如第二阶段大展拳脚！

关键词：方向、分析、输出

1. 按流程输出避免返工

按照流程输出的好处：能够达成方向的共识，提升设计的效率。避免或减少我们再输出了全部页面之后，相关决策人提出风格不符合推翻重来或反复加入自己的主观审美争论不休。

我们部门的会将视觉设计主流程按节点拆解为：

阶段 1：确定风格

好的开头时成功的一半。若大方向若不对，后面的努力都是白费。产品在 0-1 探索阶段或 1-2 视觉升级版本的阶段，我们需要花费较多的时间去确定风格。有些产品不理解这步的必要性催着设计立即执行，设计师有必要科普下情绪板的指南针作用，磨刀不误砍柴工。合理利用设计工具：

1. 能够与相关决策者以较小的时间和实践成本达成风格共识。
2. 设计师也在着手设计前做到成竹在胸，围绕着“关键词”作为方向锚点进行设计，降低后续方向跑偏的风险。
3. 后续可以在评审作为设计考核的判断依据。

（1）因果正向推导：情绪板找大感觉

情绪板一般是根据我们自身产品、人群定位——分析关键词——寻找代表性图像——指导设计。找到大的感觉方向，再去推导设计结果。从“为什么why”去推导“是什么what”。

在使用情绪板时，除了图片罗列，我还会为提取风格的名称或关键词作为标题、列出根据关键词（视觉映射、感觉映射、具象映射），提取归纳共性的色彩、质感、形状等。包括适用的场景、优势劣势、风险成本机会等角度分析，帮助产品理解。如果时间充裕，可以邀请用户或相关决策者共同参与情绪板的关键词、和图片筛选。网上有很多制作情绪板的方法这里就不展开了。

（2）果因逆向推倒：竞品分析、拆解

竞品分析往往是根据已有的设计结果去拆解：

界面带来什么样的大方向感受？拆分页面结构&设计元素“形、色、字、质、构、动”如何配合实现？有什么样的创新和可借鉴的地方？为什么要采取这样的设计策略，他的目标用户、承载的内容、和产品定位是怎样的？从“是什么(what)”去推导“为什么(why)”。

两者都有必要性，“情绪板”我们根据实际情况可以采取抽象自然的物像，也可以配合更具体的元素拆分。通过对竞品的拆解，也会让我们减少设计上的“撞衫”和创造“方轮子”，思考为什么大家都用“圆轮子”的合理性。

（3）产品拟人化

一个前辈告诉我的小技巧，觉得挺好用推荐给大家，把产品拟人化：

把你的产品和典型目标用户群里对应起来想成一种类型的人，他有什么样的外形特征，有什么样的品味，他有怎样的行为模式，带入同理心他与别人会如何对话交流。这个形象越是和目标用户重合丰满，界面设计风格和文案一致性就保持的更好，目标群体的自我形象认知和产品形象认同感就会更吻合。

阶段 2：2-3 套主视觉风格视觉提案

一般选择 1-2 个界面，如主页、详情页等界面，或者出现用户密接频次最多的操作页进行主视觉风格尝试。以 2 套及以上方向差异性较大方案为佳。

阶段 3：全部页面视觉输出评审

在风格确认后，第三节点全部页面的输出要保证重要界面易用，次要界面可用。多花时间和精力放在产品优先级高、用户操作频次高的界面优化上。

阶段 4：视觉基础&控件规范梳理

其实在做完典型页面后，已经可以开始着手基础规范梳理及简单常用控件规范。全部页面完成后对控件规范进行补充整理。规范的制定，可以让设计、开发协作更规范高效。

阶段 5：标注切图

现在我们基本上已经能够通过协同软件进行自动标注。但弹性控件，图片大小屏适配、操作热区等，一些设计师自知而开发不一定知道的规律、准则我们也需要主动用文字标注出来，避免因理解不统一造成的开发翻车，最后设计也跟着连坐。切图时提前与开发预沟通，可能需要采取一些较为特殊的切图形式。学习“盒模型思维”，用开发的盒模型思维去切图标注，元素间距、点击热区。

关于盒模型：

阶段 6：开发跟进验收

设计不是交出去的那一刻结束的，提前通知产品、开发为设计效果还原验收预留时间和还原度程度要求，保证我们的“孩子”能安全落地。一般会在第一轮验收时以文档形式：设计图和实现图差异对照标注，问题清晰说明并给出解决方案（如间距调整：XX 间距上移 10px），标出优先级 p0\p1\p2，对于反复提交无法达成一致的问题搬个小凳坐过去可能更高效。

推荐截图工具 MAC 软件「xnip」 https://xnipapp.com/

非 Mac 端推荐这款：

2. 如何找参考

没想法时，如何获取灵感呢？考验“搜商”的时候到了，我一般会从以下方向去搜索：

（1）同类产品

同业务类型的产品

（2）同形式

同表现形式的，如卡片式、邀请函形式...

（3）同风格调性

同风格的如科技风格、美漫风、酸性风、像素风、孟菲斯风格....感觉关键词：高端、文艺、小清新、传统..

（4）跨界突破：跳出自身行业、产品类型限制。

同行互相看很容易审美趋同，比如这段时间 UI 设计很流行用磨砂玻璃图标、3D 建模。开始新鲜流行的东西，过一段被大量使用就泯然众人，同类产品我们看的越多，越容易被反复强化思维定固住。看同行业的作品没想法，完全可以跳出行业类别，熟悉的事物形态，去看其他行业的优秀作品，摄影、服装的肌理、舞台、工业造型、海报设计...，重组融合固有元素。说不定会有新灵感，跳出趋同化。

（5）同目标人群

比如我们的目标人群是年轻潮人，我们想要打造年轻化的界面。除了用撞色、动感图形等表达年轻人的潮、酷等特征。我们也可以下载年轻潮人常用软件和常看的综艺节目，了解年轻人的喜好、表达方式、行为方式、搭配审美等，针对提取到的特定人性特征，采用更个性化、标签化、流行等元素，表达采用年轻人的口头禅。

找到参考之后，不是要照抄，而是要站在巨人的肩膀上学习，用“形色字质构”的分析法拆解表现及原因，再结合融入到自己的设计中，新瓶装旧酒。

3. 谁说视觉设计不需要动脑！

想的越清楚，对产品 PRD 及用户深入思考，了解功能，并在设计稿中得体的表现出来，更大发挥设计的价值。

你也可以理直气壮的说：人、功能、场景、风险项我都考虑到了，我这样设计都是基于什么样依据的得出的。从这些的角度可以更全面的思考设计：

（1）带入不同的角色

把自己当成用户，带入不同的「用户角色」：新用户、老用户、普通用户、专家用户的操作经验，是否需要操作新人指引、专业名词用户是否易于理解？重点内容该如何强调？图标的示意是否是可被理解的？

带入不同的「协作者角色」：产品希望突出的重点是？开发的实现成本？运营的包容性怎样？...

（2）从场景出发：

场景要素：用户、需求、事件、环境状态、载体状态、人物状态

产品组成：形态、功能、内容

用户通常会在什么样的时间、地点、满足什么样的目的以什么样的方式使用产品？早、中、晚使用高频时间段是？使用的环境是否会有干扰被打断？是否有多线程任务需要进度提示？...

（3）从功能完成出发

如何引导用户操作主线任务；如何引导用户分流至支线任务；如何引导用户视觉动线、关注点。目标达成需要增强设计氛围感还是信息降噪？信息间的层次该如何区分？如何避免用户误操作？等等

4. 至少 2-3 个方案

（1）自我突破

多出方案多去尝试，经过长期验证，我发现最优秀的设计往往不会在第一稿时出现，往往是在自己的能力圈内的保守方案，越做越有感觉，越能打破原型图的布局束缚，长期看对自己的设计能力也有提升。没法每次都做到 100 分尽善尽美，但可以每次都尝试做更好，每天进步一点点，瓶颈期的时候才会逐渐突破。

（2）差异化输出

方案之间的差异性最好大一些，保留保守的方案和大胆突破创新方案，我习惯在提案时标注分析每个方案的特征，和方案的优劣点，书面化梳理思路。这对日后整理作品集也会有帮助，帮你想起来当时为什么这么想这么做。

（3）更多的选择

出多个方案也可以在评审时，分散下产品的注意力在选择上，而不是集中火力对一个方案的挑剔上，多次提出不同的修改意见。甲方总是贪婪的，想要看到更多的可能性，有对比才更方便做决策，那就提前把更多的可能性展示出来。

5. 选择好看的图片 or 真实的图片

结论是：好看的图片 or 真实的图片全都要！

之前发现很多设计师，只选择用好看理想的素材图片去提升整体的设计调性。好看的图片确实清晰、疏密得当，美观干净，在提案的时候能让我们的设计锦上添花。

但如果项目落地是涉及到用户可以自由选择上传图片这类 UGC 内容，图片的质量就不是我们所能够把控的。那各种情况都可能发生：杂乱的图片、透明的背景、纯白纯黑的背景都会使得可读的文字信息或操作图标识别性变差。如果我们在设计时也用真实情况的图片去验证，寻找更好的解决方案，根据实际情况去添加蒙层、为白色文字加上投影是不是就可以避免这类影响体验的情况发生。同理在输入条件不可控的前提下，尽量多用真实数据或素材去更全面验证设计的合理性。

例：用户可自定义背景的复杂情况影响图标即文字识别

小结：

设计中关键词：多分析、多尝试、多验证，意在笔先。下篇分享下提案的一些经验总结吧～希望与大家多多交流，共同进步