揭秘：大厂设计师是如何制定UI风格的？

news2025/1/6 20:40:40

当你碰到一个新的项目或产品战略需要进行重大的改变时，作为UI设计师，你要如何重新思考产品的视觉风格？从何处开始？存在哪些重要注意点？今天我们有幸请到Pixso的设计师，他们将以出租车应用程序的风格设计过程为例，向我们展示他们的设计理念和过程。

设计背景信息收集

没错！你没有看错！在进入产品视觉风格设计阶段之前，我们并不是简单地拿起产品交互原型就开始努力工作，相反，我们应该首先理解为什么要进行产品设计？这款产品的目标用户是谁？以及我们希望向目标用户传递什么样的理念？等等这些基础的背景信息。UI设计师可以与产品团队进行沟通，了解这些基础信息。

以打车APP为例子，假设以下是我们从产品团队那里获取到的产品信息：

“我们要设计的是一款打车应用程序，其核心价值在于满足用户的出行需求，为用户提供出行服务。因此，它需要关注用户出行相关的体验，比如迅速叫到车。它的目标用户年龄范围是18-35岁。在视觉设计中，我们需要向用户传达便捷、快速的叫车服务，以及安全、可靠的产品理念。”

在收集到以上信息之后，为了避免UI设计师和产品团队在产品视觉风格上产生理解差异，并因此导致时间浪费，我们可以使用情绪板（也就是风格参考图）来快速呈现设计师的想法和创新。情绪板可以将抽象的语言描述转化为更具体的图像信息，使双方对目标更加清晰，并达成初步的设计共识。因此，UI设计师需要搜集情绪板，确保情绪板可以起到初步设计建议的作用，从而提高最终设计稿的输出效率。

关于UI设计师搜集情绪板，Pixso设计师根据自身经验，给出以下思考方向：

收集竞品的方案
搜集当前流行的设计风格趋势
结合从产品团队获取的信息和实际场景

另外，Pixso设计师建议情绪板的风格应尽可能多样化，并提出不同的风格方向建议。因为单一的方案可能会导致选择困难。

此外，情绪板需要尽可能地表达明确的设计想法和创意，通常可以制作3-5个案例进行说明，太多或太少的方案都不利于作出选择。大家可以参考下图中Pixso设计师收集的一个打车APP情绪板案例，每个元素的应用都需要进行说明。

确立设计风格进行设计

在与产品团队通过情绪板沟通后，我们初步决定在色彩上主要采用品牌的蓝色，打车APP的整体风格偏向简洁，使用的图片风格感觉真实，需要突出层次结构。接下来，Pixso设计师将借助Pixso软件，根据产品提供的交互原型所涉及的元素，开始对打车APP界面设计的基本元素如颜色、字体、图标、图片等进行设计，然后再利用Pixso软件输出视觉稿。

1. 选择配色

颜色是展示页面整体风格的重要元素，也是建立品牌识别性的关键因素之一。根据前期的情绪板，Pixso设计师基本确定采用蓝色为主色调，因为蓝色给人安全可靠的感觉，非常符合我们产品的定位。除了基础的蓝色外，我们还选择了红色和黄色进行特殊提示说明。此外，我们还选择了五种无彩色系用于文字。

2. 设置文字

对于文字设计，我们主要关注其传达信息的效率。对于打车APP，我们选择统一使用系统默认字体，以解决在不同设备尺寸上特殊字体的兼容问题。因此，Pixso设计师选择的字体方案为：iOS系统使用苹方家族字体，Android系统使用Roboto家族字体。此外，Pixso设计师根据文字的不同使用情况（如标题、正文、辅助说明等），对文字的字号、字重、行高和字距等样式进行设置。

3. 设计图标风格

图标是产品中的精髓，它可以直接影响产品的视觉体验和产品调性。我们选择了填充性图标作为打车APP登录/注册页的功能性图标，因为这种图标可以让用户快速定位图标位置，并预知点击后的状态。

4. 选择图片风格

图片在页面视觉风格中起着极其重要的作用。考虑到打车APP附近车辆推荐部分需要展示车辆图片，因此我们决定采用背景干净且真实的车辆图片，让用户有更强的代入感，同时又不会让页面显得杂乱。

5. 输出视觉稿

视觉稿的输出对界面设计的成功至关重要。为了保险起见，Pixso设计师的视觉稿输出将采取分步式、多选择的方法进行。在完成2-3个关键页面后，会与产品团队进行沟通交流，确认设计风格是否符合产品团队的期望。如果有任何风格问题，我们可以及时进行调整。因为时间比较充裕，Pixso设计师还将设计2-3个风格的关键页面，以便产品团队做出更好的选择。在以上沟通反馈后，我们再输出打车APP的其余视觉稿。

最后，在这整个设计流程中，有一点值得强调的是，我们全过程都是使用Pixso软件完成界面设计。借助Pixso的编辑器，我们可以直接在不同设备（手机、平板、电脑等）的画板上创建和预览设计效果，这极大地提高了我们的设计效率。设计完成后，我们可以直接通过Pixso的分享功能发送链接给产品团队。产品团队可以通过Pixso链接直接查看设计图，并提出评论反馈，这在团队协作方面非常有帮助。