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

当你碰到一个新的项目或产品战略需要进行重大的改变时,作为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链接直接查看设计图,并提出评论反馈,这在团队协作方面非常有帮助。

以上就是我们分享的全部内容,我们希望能在界面设计风格设计方面为您带来一些启示。当然,在现实的工作环境中,我们需要根据具体情况灵活调整。因此,Pixso的设计师建议,您在日常项目中多做尝试,并在尝试中找到最适合您的方法。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值